:root {
    --bg: #08090b;
    --panel: #101114;
    --panel-raised: #15161a;
    --surface: rgba(255, 255, 255, 0.035);
    --surface-hover: rgba(255, 255, 255, 0.06);
    --border: rgba(255, 255, 255, 0.085);
    --border-strong: rgba(255, 255, 255, 0.14);
    --text: #f4f5f7;
    --text-secondary: #b3b7c2;
    --muted: #727782;
    --accent: #6272e8;
    --accent-hover: #7885ef;
    --accent-soft: rgba(98, 114, 232, 0.14);
    --green: #34c88a;
    --amber: #e9a84a;
    --red: #e86464;
    --excel: #2fb978;
    --word: #4c8ff0;
    --archive: #a07bf3;
    --radius: 12px;
    --font: 'Geist', 'Segoe UI', system-ui, sans-serif;
    --mono: 'Geist Mono', 'Cascadia Code', Consolas, monospace;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    background:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
        var(--bg);
    background-size: 48px 48px;
    font-family: var(--font);
    font-feature-settings: 'cv01', 'ss03';
    -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }
button, .file-upload-zone, .download-btn { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, .file-upload-zone:focus-visible, a:focus-visible {
    outline: 2px solid var(--accent-hover);
    outline-offset: 2px;
}

.ambient { position: fixed; pointer-events: none; filter: blur(120px); opacity: .13; border-radius: 50%; }
.ambient-one { width: 460px; height: 460px; right: 4vw; top: -270px; background: #5865d8; }
.ambient-two { width: 320px; height: 320px; left: -220px; bottom: 4vh; background: #284d92; opacity: .1; }

.app-shell { width: min(1520px, calc(100% - 48px)); margin: 0 auto; position: relative; }
.topbar {
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
}
.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-mark {
    width: 40px; height: 40px; display: grid; place-items: center;
    border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface);
}
.brand-mark img { width: 50px; height: 50px; object-fit: contain; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.18; }
.brand-copy strong { font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.brand-copy small { font-size: 11px; color: var(--muted); margin-top: 3px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.retention-note, .status-badge {
    height: 34px; display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--border); border-radius: 8px; padding: 0 11px;
    color: var(--text-secondary); background: rgba(255,255,255,.02); font-size: 12px;
}
.retention-note i { color: var(--muted); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 4px rgba(114,119,130,.1); }
.status-badge.ready .status-dot { background: var(--accent-hover); box-shadow: 0 0 0 4px var(--accent-soft); }
.status-badge.processing .status-dot { background: var(--amber); box-shadow: 0 0 0 4px rgba(233,168,74,.12); animation: statusPulse 1.4s ease-in-out infinite; }
.status-badge.success .status-dot { background: var(--green); box-shadow: 0 0 0 4px rgba(52,200,138,.12); }
.status-badge.error .status-dot, .status-badge.cancelled .status-dot { background: var(--red); box-shadow: 0 0 0 4px rgba(232,100,100,.12); }
.download-btn {
    height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 13px;
    border: 1px solid rgba(98,114,232,.5); border-radius: 8px; color: #fff;
    background: var(--accent); text-decoration: none; font-size: 12px; font-weight: 600;
    transition: background .18s ease, transform .18s ease;
}
.download-btn:hover { background: var(--accent-hover); transform: translateY(-1px); }

.workspace { padding: 48px 0 30px; }
.intro { display: flex; justify-content: space-between; align-items: end; gap: 42px; margin-bottom: 30px; }
.eyebrow, .section-kicker { display: block; color: #8f9af4; font: 500 10px/1 var(--mono); letter-spacing: .12em; }
.intro h1 { margin: 12px 0 8px; max-width: 720px; font-size: clamp(30px, 3.1vw, 48px); line-height: 1.04; letter-spacing: -1.7px; font-weight: 500; text-wrap: balance; }
.intro > div > p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 660px; }
.steps { display: flex; align-items: center; gap: 12px; padding-bottom: 4px; }
.steps > i { color: #363940; font-size: 9px; }
.step { display: flex; align-items: center; gap: 7px; color: var(--muted); }
.step span { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; font: 500 9px var(--mono); }
.step p { margin: 0; font-size: 11px; }
.step.active { color: var(--text-secondary); }
.step.active span { border-color: rgba(98,114,232,.45); color: #b8c0ff; background: var(--accent-soft); }

.work-grid { display: grid; grid-template-columns: minmax(520px, .9fr) minmax(560px, 1.1fr); gap: 16px; align-items: stretch; }
.panel { background: linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.018)); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: 0 16px 50px rgba(0,0,0,.2); }
.setup-panel, .activity-panel { padding: 25px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.panel-heading h2 { margin: 8px 0 0; font-size: 19px; line-height: 1.1; font-weight: 500; letter-spacing: -.35px; }
.required-hint { font-size: 10px; color: var(--muted); }
.required-hint b, .field-meta b { color: #e78383; }

.upload-stack { display: grid; gap: 15px; }
.upload-field, .form-group { display: grid; gap: 8px; }
.field-meta { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.field-meta label { color: var(--text-secondary); font-size: 12px; font-weight: 500; }
.field-meta span { color: var(--muted); font: 400 9px var(--mono); }
.file-upload-zone {
    min-height: 76px; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 13px;
    border: 1px dashed var(--border-strong); border-radius: 9px; padding: 12px 13px;
    background: rgba(0,0,0,.13); cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.file-upload-zone:hover, .file-upload-zone.dragover { border-color: rgba(120,133,239,.65); background: rgba(98,114,232,.07); transform: translateY(-1px); }
.file-upload-zone.selected { border-style: solid; border-color: rgba(52,200,138,.35); background: rgba(52,200,138,.035); }
.file-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; font-size: 18px; }
.file-icon.excel { color: var(--excel); background: rgba(47,185,120,.1); }
.file-icon.word { color: var(--word); background: rgba(76,143,240,.1); }
.file-icon.archive { color: var(--archive); background: rgba(160,123,243,.1); }
.zone-copy { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.zone-copy strong { color: #dfe1e7; font-size: 12px; font-weight: 500; }
.zone-copy small { color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-upload-zone.selected .zone-copy small { color: #7bd6ad; }
.choose-file { color: var(--text-secondary); border: 1px solid var(--border); border-radius: 6px; background: var(--surface); padding: 7px 10px; font-size: 10px; }
.divider { height: 1px; background: var(--border); margin: 24px 0; }
.input-shell { height: 42px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 8px; background: rgba(0,0,0,.16); padding: 0 13px; transition: border-color .18s ease; }
.input-shell:focus-within { border-color: rgba(120,133,239,.65); box-shadow: 0 0 0 3px rgba(98,114,232,.08); }
.input-shell i { color: var(--muted); font-size: 12px; }
.input-shell input { flex: 1; min-width: 0; color: var(--text-secondary); background: transparent; border: 0; outline: 0; font: 400 11px var(--mono); }
.limit-card { margin-top: 15px; border: 1px solid var(--border); border-radius: 9px; background: rgba(0,0,0,.1); padding: 13px; }
.switch-row { display: flex; align-items: center; cursor: pointer; position: relative; }
.switch-row > span:first-child { display: flex; flex: 1; flex-direction: column; gap: 3px; }
.switch-row strong { color: var(--text-secondary); font-size: 12px; font-weight: 500; }
.switch-row small { color: var(--muted); font-size: 10px; }
.switch-row input { opacity: 0; position: absolute; }
.switch { width: 36px; height: 20px; border-radius: 999px; background: #292b31; border: 1px solid var(--border); position: relative; transition: background .18s ease; }
.switch::after { content: ''; width: 14px; height: 14px; border-radius: 50%; background: #858a94; position: absolute; left: 2px; top: 2px; transition: transform .18s ease, background .18s ease; }
.switch-row input:checked + .switch { background: var(--accent); }
.switch-row input:checked + .switch::after { transform: translateX(16px); background: #fff; }
.limit-options { border-top: 1px solid var(--border); margin-top: 13px; padding-top: 13px; display: grid; grid-template-columns: 1fr 90px; align-items: center; gap: 10px; }
.limit-options > label:first-child { color: var(--muted); font-size: 10px; }
.limit-options > input { width: 90px; height: 34px; color: var(--text); border: 1px solid var(--border); border-radius: 6px; background: #0d0e11; padding: 0 10px; }
.mini-check { grid-column: 1/-1; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }
.mini-check input { accent-color: var(--accent); }
.action-row { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; margin-top: 20px; }
.btn { min-height: 42px; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; display: inline-flex; justify-content: center; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; transition: transform .18s ease, background .18s ease, opacity .18s ease; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.secondary-btn { color: var(--text-secondary); background: var(--surface); }
.secondary-btn:hover:not(:disabled) { background: var(--surface-hover); }
.primary-btn { color: #fff; background: var(--accent); border-color: rgba(128,141,245,.5); }
.primary-btn:hover:not(:disabled) { background: var(--accent-hover); }
.danger-btn { grid-column: 1/-1; color: #ffb4b4; background: rgba(232,100,100,.08); border-color: rgba(232,100,100,.25); }
.btn-loader { width: 13px; height: 13px; border: 2px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }

.activity-panel { display: flex; flex-direction: column; min-height: 690px; }
.activity-heading { margin-bottom: 18px; }
.icon-btn { width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 7px; color: var(--muted); background: var(--surface); cursor: pointer; }
.icon-btn:hover { color: var(--text); background: var(--surface-hover); }
.progress-wrapper { margin-bottom: 14px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 8px; background: rgba(98,114,232,.055); }
.progress-topline { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 9px; color: var(--text-secondary); font: 400 10px var(--mono); }
.progress-track { height: 4px; border-radius: 9px; background: rgba(255,255,255,.07); overflow: hidden; }
.progress-fill { width: 0; height: 100%; border-radius: inherit; background: var(--accent-hover); transition: width .3s ease; }
.console-frame { flex: 1; min-height: 480px; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: #090a0c; box-shadow: inset 0 0 32px rgba(0,0,0,.3); }
.console-toolbar { height: 40px; flex: 0 0 auto; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border); padding: 0 13px; color: var(--muted); background: #101115; font: 400 9px var(--mono); }
.traffic-lights { display: flex; gap: 5px; }
.traffic-lights i { width: 7px; height: 7px; border-radius: 50%; background: #353840; }
.traffic-lights i:first-child { background: #714044; }
.traffic-lights i:nth-child(2) { background: #6e5a34; }
.traffic-lights i:last-child { background: #335c48; }
.live-indicator { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: #5a5e67; }
.live-indicator i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.console-output { flex: 1; min-height: 0; max-height: 590px; overflow: auto; padding: 15px; color: #a9adb6; font: 400 10.5px/1.65 var(--mono); scrollbar-width: thin; scrollbar-color: #30323a transparent; }
.console-line { white-space: pre-wrap; overflow-wrap: anywhere; padding: 1px 0; }
.console-line::before { content: '› '; color: #4d566c; }
.console-line.error { color: #ef8a8a; }
.console-line.warning { color: #d6ac65; }
.console-line.success { color: #67cda0; }
.console-empty { height: 100%; min-height: 380px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--muted); }
.empty-glyph { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 15px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.025); color: #62687a; font-size: 17px; }
.console-empty strong { color: var(--text-secondary); font: 500 12px var(--font); }
.console-empty p { margin: 6px 0 0; font: 400 10px var(--font); }
.privacy-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 15px; color: var(--muted); }
.privacy-note i { margin-top: 2px; color: #6d759f; font-size: 11px; }
.privacy-note p { margin: 0; font-size: 9.5px; line-height: 1.55; }
.privacy-note strong { color: #9297a3; font-weight: 500; }
footer { height: 58px; display: flex; align-items: center; gap: 7px; border-top: 1px solid var(--border); color: #50545d; font-size: 10px; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 20; max-width: 360px; transform: translateY(16px); opacity: 0; pointer-events: none; border: 1px solid var(--border-strong); border-radius: 9px; background: #191a1f; color: var(--text); padding: 12px 15px; box-shadow: 0 16px 50px rgba(0,0,0,.4); font-size: 11px; transition: .2s ease; }
.toast.show { transform: translateY(0); opacity: 1; }
.toast.success { border-color: rgba(52,200,138,.3); }
.toast.error { border-color: rgba(232,100,100,.35); }
.toast.warning { border-color: rgba(233,168,74,.35); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes statusPulse { 50% { opacity: .45; } }

@media (max-width: 1120px) {
    .work-grid { grid-template-columns: 1fr; }
    .activity-panel { min-height: 580px; }
    .console-frame { min-height: 430px; }
}
@media (max-width: 760px) {
    .app-shell { width: min(100% - 24px, 1520px); }
    .topbar { height: 66px; }
    .retention-note { display: none; }
    .brand-copy small { display: none; }
    .workspace { padding-top: 30px; }
    .intro { align-items: flex-start; flex-direction: column; gap: 22px; }
    .intro h1 { font-size: 34px; letter-spacing: -1.1px; }
    .steps { width: 100%; justify-content: flex-start; }
    .setup-panel, .activity-panel { padding: 18px; }
    .file-upload-zone { grid-template-columns: 40px minmax(0,1fr); }
    .choose-file { display: none; }
    .action-row { grid-template-columns: 1fr; }
    .danger-btn { grid-column: auto; }
}
@media (max-width: 460px) {
    .brand-mark { width: 36px; height: 36px; }
    .status-badge { padding: 0 9px; }
    .status-badge span:last-child { display: none; }
    .download-btn span { display: none; }
    .download-btn { width: 36px; padding: 0; justify-content: center; }
    .intro h1 { font-size: 29px; }
    .step p { display: none; }
    .panel-heading h2 { font-size: 17px; }
    .field-meta span { display: none; }
    .file-upload-zone { min-height: 70px; padding: 10px; }
    .zone-copy strong { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}