/* xBrand / Foldback. Identity masters are unmodified. UI tokens extend the approved palette. */
:root { background:#0F1115; color-scheme:dark; }
:root[data-theme=light] { background:#F2F4F7; color-scheme:light; }
.xc,.xc * { box-sizing:border-box; }
.xc { margin:0; min-height:100vh; background:var(--xc-bg); color:var(--xc-text); font:14px/1.5 var(--xc-font-ui); accent-color:var(--xc-accent-text); }
[hidden] { display:none!important; }
button,input,select { font:inherit; }
button,select,summary { cursor:pointer; }
button,a,input,select,summary { -webkit-tap-highlight-color:transparent; }
button:disabled { cursor:not-allowed; opacity:.55; }
a { color:inherit; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { font-family:var(--xc-font-display); font-weight:600; }
:focus-visible { outline:3px solid var(--xc-accent-text); outline-offset:3px; }
.icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.skip { position:fixed; top:-60px; left:16px; padding:10px 16px; background:var(--xc-green); color:var(--xc-carbon); z-index:20; }
.skip:focus { top:12px; }
.header { height:61px; border-bottom:1px solid var(--xc-line); background:var(--xc-bg); position:sticky; top:0; z-index:5; }
.header-inner { max-width:1320px; height:100%; padding:0 28px; margin:auto; display:flex; align-items:center; gap:30px; }
.brand { display:flex; flex-shrink:0; }
.brand img { width:139px; height:auto; display:block; }
.on-light { display:none!important; }
[data-theme=light] .on-dark { display:none!important; }
[data-theme=light] .on-light { display:block!important; }
nav { display:flex; height:100%; align-items:stretch; gap:8px; }
.nav-tab { display:flex; align-items:center; gap:8px; padding:0 15px; border:0; border-bottom:2px solid transparent; background:none; color:var(--xc-muted); font-size:13px; }
.nav-tab .icon { width:17px; height:17px; }
.nav-tab.active { border-color:var(--xc-green); color:var(--xc-text); }
.nav-tab:hover { background:var(--xc-surface); }
.header-tools { display:flex; align-items:center; gap:8px; margin-left:auto; }
.engine-pill { display:flex; align-items:center; gap:8px; font:10px var(--xc-font-mono); color:var(--xc-muted); margin-right:12px; }
.engine-pill i { display:block; width:5px; height:5px; background:var(--xc-green); border-radius:50%; }
.icon-button { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid var(--xc-line); border-radius:6px; background:transparent; color:var(--xc-muted); flex-shrink:0; }
.icon-button:hover { background:var(--xc-raised); color:var(--xc-text); }
.icon-button .icon { width:17px; height:17px; }
.workspace { max-width:1264px; padding:26px 28px 40px; margin:0 auto; }
.work-grid { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:22px; align-items:start; }
.main-column { min-width:0; }
.drop-zone { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:28px 24px; min-height:310px; border:1px dashed var(--xc-line-strong); border-radius:10px; background:var(--xc-surface); transition:background .18s,border-color .18s; }
.drop-zone.dragover { background:var(--xc-tint); border-color:var(--xc-accent-text); box-shadow:inset 0 0 0 2px var(--xc-accent-text); }
.upload-illustration { display:flex; align-items:center; gap:18px; margin:0 0 22px; }
.file-tile { display:grid; place-items:center; width:48px; height:60px; border:1px solid var(--xc-line); border-radius:6px; background:var(--xc-raised); color:var(--xc-muted); transform:rotate(-8deg); }
.file-tile.target { transform:rotate(8deg); border-color:var(--xc-accent-text); color:var(--xc-accent-text); background:var(--xc-tint); }
.file-tile .icon { width:24px; height:24px; }
.route-icon { color:var(--xc-muted); width:18px; }
.drop-copy h2 { font-size:23px; letter-spacing:-.025em; }
.drop-copy p { color:var(--xc-muted); font-size:13px; margin-top:5px; }
.drop-zone .button { margin-top:20px; }
.formats { margin-top:18px; font:10px/1.7 var(--xc-font-mono); letter-spacing:.025em; color:var(--xc-muted); }
.drop-zone.compact { min-height:104px; padding:20px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:15px; text-align:left; }
.drop-zone.compact .upload-illustration { margin:0; }
.drop-zone.compact .upload-illustration .file-tile { width:34px; height:40px; transform:none; }
.drop-zone.compact .upload-illustration .target,.drop-zone.compact .route-icon,.drop-zone.compact .formats { display:none; }
.drop-zone.compact h2 { font-size:16px; }
.drop-zone.compact p { font-size:11px; }
.drop-zone.compact .button { margin:0; }
.button { min-height:42px; border:1px solid var(--xc-line); border-radius:6px; background:var(--xc-raised); color:var(--xc-text); display:inline-flex; gap:8px; align-items:center; justify-content:center; padding:9px 16px; font-size:12px; font-weight:600; text-decoration:none; transition:background .16s,border-color .16s,transform .16s; }
.button:hover:not(:disabled) { border-color:var(--xc-line-strong); }
.button.primary { background:var(--xc-green); border-color:var(--xc-green); color:var(--xc-carbon); }
.button.primary:hover:not(:disabled) { background:#4AD17C; }
.button:active:not(:disabled) { transform:translateY(1px); }
.button.full { width:100%; }
.button .icon { width:18px; height:18px; }
.workspace-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 2px 18px; color:var(--xc-muted); font-size:10px; }
.workspace-meta>span { display:flex; align-items:center; gap:6px; }
.workspace-meta .icon { width:14px; height:14px; }
.queue { border:1px solid var(--xc-line); background:var(--xc-surface); border-radius:8px; overflow:hidden; }
.queue-header { display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--xc-line); min-height:56px; padding:10px 18px; }
.queue-header h2 { font-size:15px; }
.count { border:1px solid var(--xc-line); color:var(--xc-muted); padding:1px 6px; border-radius:4px; font:10px var(--xc-font-mono); }
.queue-header .text-button { margin-left:auto; }
.text-button { display:inline-flex; align-items:center; justify-content:center; min-height:32px; background:none; border:0; padding:5px 7px; color:var(--xc-muted); font-size:11px; }
.text-button:hover:not(:disabled) { color:var(--xc-text); }
.empty-state { min-height:140px; display:flex; align-items:center; justify-content:center; gap:14px; padding:24px; }
.empty-state>.icon { width:28px; height:28px; color:var(--xc-muted); }
.empty-state strong { font-weight:500; font-size:13px; }
.empty-state p { color:var(--xc-muted); font-size:11px; margin-top:3px; }
.queue-toolbar { padding:7px 12px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--xc-line); }
.row-actions { display:flex; flex-wrap:wrap; gap:3px; align-items:center; }
.check-label { display:flex; align-items:center; gap:8px; font-size:12px; min-height:30px; cursor:pointer; }
.check-label input { margin:0; width:15px; height:15px; flex-shrink:0; }
.file-list { list-style:none; margin:0; padding:0; }
.file-row { padding:16px 18px; border-bottom:1px solid var(--xc-line); animation:arrive .18s ease-out; }
.file-row:last-child { border:0; }
.file-top { display:grid; grid-template-columns:16px 36px minmax(0,1fr) auto; gap:10px; align-items:center; }
.file-check { width:15px; height:15px; margin:0; }
.file-thumb { width:36px; height:42px; display:grid; place-items:center; border:1px solid var(--xc-line); border-radius:5px; background:var(--xc-raised); color:var(--xc-muted); overflow:hidden; }
.file-thumb img { width:100%; height:100%; object-fit:contain; }
.file-main { min-width:0; }
.file-name { overflow-wrap:anywhere; font-size:12px; font-weight:500; }
.file-meta { font:10px/1.6 var(--xc-font-mono); color:var(--xc-muted); margin-top:4px; overflow-wrap:anywhere; }
.file-status { display:flex; align-items:center; gap:7px; }
.state { color:var(--xc-muted); font:10px var(--xc-font-mono); }
.state.done,.state.converting { color:var(--xc-accent-text); }
.state.error { color:var(--xc-error); }
.file-detail { margin:12px 0 0 26px; }
.output-row { display:flex; gap:8px; align-items:center; margin-top:10px; }
.output-row label { flex:1; min-width:0; }
.output-name { width:100%; min-height:34px; padding:6px 9px; background:var(--xc-bg); border:1px solid var(--xc-line); border-radius:4px; color:var(--xc-text); font-size:11px; }
.extension { color:var(--xc-muted); font:11px var(--xc-font-mono); }
.result-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; }
.result-actions .button { min-height:34px; padding:6px 11px; font-size:11px; }
.result-note { color:var(--xc-muted); font-size:11px; }
.file-error { margin-top:10px; padding:10px 12px; background:var(--xc-error-bg); color:var(--xc-error); border-radius:5px; font-size:12px; overflow-wrap:anywhere; }
progress { display:block; width:100%; height:4px; border:0; border-radius:3px; background:var(--xc-line); overflow:hidden; margin-top:10px; }
progress::-webkit-progress-bar { background:var(--xc-line); }
progress::-webkit-progress-value { background:var(--xc-green); }
progress::-moz-progress-bar { background:var(--xc-green); }
.progress-caption { display:flex; justify-content:space-between; color:var(--xc-muted); font:10px var(--xc-font-mono); margin-top:7px; }
audio { width:100%; height:34px; display:block; margin-top:12px; }
.waveform { display:block; width:100%; height:32px; margin-top:12px; color:var(--xc-accent-text); }
.settings-column { position:sticky; top:85px; }
.panel { background:var(--xc-surface); border:1px solid var(--xc-line); border-radius:9px; overflow:hidden; }
.panel-header { padding:16px 18px; display:flex; align-items:center; gap:9px; border-bottom:1px solid var(--xc-line); }
.panel-header h2 { font-size:15px; }
.panel-header .icon { color:var(--xc-muted); width:17px; height:17px; }
.panel-body { padding:18px; }
.field { display:block; margin-bottom:16px; min-width:0; }
.field>span,legend { display:block; font:10px var(--xc-font-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--xc-muted); margin-bottom:9px; }
.field select,.field input:not([type=range],[type=checkbox]) { width:100%; min-height:38px; border:1px solid var(--xc-line); border-radius:5px; background:var(--xc-bg); color:var(--xc-text); padding:8px 10px; font-size:12px; }
.field input[type=color] { padding:3px; height:38px; }
.field input[type=range] { width:100%; }
.field output { float:right; font-size:11px; color:var(--xc-text); }
.field-pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
fieldset { border:0; padding:0; margin:0; min-width:0; }
legend { padding:0; }
.presets { display:grid; gap:7px; }
.preset { display:flex; align-items:center; gap:9px; min-height:53px; padding:9px 10px; border:1px solid var(--xc-line); border-radius:5px; cursor:pointer; }
.preset:has(input:checked),.preset.selected { border-color:var(--xc-accent-text); background:var(--xc-tint); }
.preset input { margin:0; width:15px; height:15px; }
.preset strong { display:block; font-size:12px; font-weight:600; }
.preset small { display:block; color:var(--xc-muted); font-size:10px; margin-top:2px; }
.preset-badge { font:8px var(--xc-font-mono); color:var(--xc-accent-text); margin-left:auto; }
.hint { color:var(--xc-muted); font-size:11px; line-height:1.65; margin-top:10px; }
.advanced { border-top:1px solid var(--xc-line); margin-top:16px; padding-top:12px; }
.advanced summary { font-size:12px; color:var(--xc-muted); padding:4px 0; }
.advanced summary:hover { color:var(--xc-text); }
.detail-body { padding-top:12px; }
.detail-body .check-label { margin-bottom:10px; }
.detail-body .hint { margin:0 0 12px; }
.conversion-summary { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px; border-top:1px solid var(--xc-line); padding-top:16px; margin:16px 0 12px; color:var(--xc-muted); font-size:11px; }
#size-estimate { font:10px var(--xc-font-mono); }
.keep-open { text-align:center; font-size:10px; }
.offline-button { display:flex; gap:8px; align-items:center; padding:12px 3px; color:var(--xc-muted); background:none; border:0; font-size:10px; text-align:left; }
.offline-button .icon { width:14px; height:14px; }
.ico-sizes { display:flex; flex-wrap:wrap; gap:7px; }
.ico-sizes label { display:flex; gap:5px; align-items:center; padding:6px; border:1px solid var(--xc-line); border-radius:4px; font:10px var(--xc-font-mono); cursor:pointer; }
.ico-sizes input { margin:0; }
.notice { border:1px solid var(--xc-line); background:var(--xc-surface); border-radius:6px; padding:12px 15px; font-size:12px; margin-bottom:18px; overflow-wrap:anywhere; }
.notice.error { background:var(--xc-error-bg); color:var(--xc-error); }
.notice.success { background:var(--xc-tint); color:var(--xc-accent-text); }
.mobile-action { display:none; }
dialog { background:var(--xc-surface); color:var(--xc-text); border:1px solid var(--xc-line-strong); border-radius:10px; width:min(640px,calc(100% - 32px)); max-height:85dvh; padding:0; box-shadow:0 30px 100px #0007; }
dialog::backdrop { background:#0009; }
.dialog-heading { position:sticky; top:0; z-index:1; background:var(--xc-surface); display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--xc-line); }
.dialog-heading h2 { font-size:18px; }
.dialog-body { padding:20px; }
.dialog-section { border-top:1px solid var(--xc-line); padding-top:18px; margin-top:20px; }
.dialog-section h3 { font-size:14px; margin-bottom:12px; }
.dialog-section>p:not(.hint) { margin-top:10px; font-size:12px; color:var(--xc-muted); }
.dialog-section .check-label { margin-bottom:8px; }
.version { font:10px var(--xc-font-mono); color:var(--xc-muted); margin-top:24px; }
kbd { font:10px var(--xc-font-mono); background:var(--xc-raised); border:1px solid var(--xc-line); border-radius:3px; padding:2px 4px; }
.history-row { padding:16px 0; border-bottom:1px solid var(--xc-line); overflow-wrap:anywhere; }
.history-row strong { display:block; font-size:12px; }
.history-row p { font-size:11px; color:var(--xc-muted); margin:6px 0 10px; }
.preview-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.preview-grid figure { margin:0; min-width:0; }
.preview-grid img { width:100%; height:240px; object-fit:contain; background:repeating-conic-gradient(var(--xc-raised) 0 25%,var(--xc-bg) 0 50%) 0/16px 16px; border:1px solid var(--xc-line); border-radius:4px; }
.preview-grid figcaption { font-size:12px; color:var(--xc-muted); margin-top:8px; }
@keyframes arrive { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
@media(min-width:1600px) { .workspace { padding-top:34px; } }
@media(max-width:950px) { .work-grid { grid-template-columns:minmax(0,1fr) 282px; gap:16px; } .workspace { padding:22px 20px 32px; } .header-inner { padding:0 20px; gap:20px; } .engine-pill { display:none; } .file-top { grid-template-columns:16px minmax(0,1fr) auto; } .file-thumb { display:none; } .drop-zone.compact { grid-template-columns:minmax(0,1fr) auto; } .drop-zone.compact .upload-illustration { display:none; } }
@media(max-width:720px) { .header { height:57px; } .header-inner { gap:14px; padding:0 16px; } .brand img { width:113px; } .nav-tab { padding:0 10px; font-size:12px; gap:6px; } .header-tools { gap:5px; } .work-grid { grid-template-columns:1fr; } .workspace { padding:18px 16px 100px; } .settings-column { position:static; } .drop-zone { min-height:270px; padding:22px 18px; } .presets { grid-template-columns:1fr 1fr; } .preset-badge { display:none; } .mobile-action { display:flex; position:fixed; bottom:0; left:0; right:0; z-index:6; gap:12px; align-items:center; justify-content:space-between; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--xc-line); background:var(--xc-bg); } .mobile-action>span { font-size:11px; color:var(--xc-muted); } .mobile-action .button { min-width:125px; } .queue-toolbar { flex-wrap:wrap; } .file-status { gap:5px; } .preview-grid { grid-template-columns:1fr; } }
@media(max-width:390px) { .header-inner { padding:0 12px; gap:9px; } .brand img { width:96px; } .nav-tab { padding:0 7px; } .nav-tab .icon { display:none; } .header-tools .icon-button { width:31px; height:33px; } .workspace { padding-left:12px; padding-right:12px; } .workspace-meta { font-size:9px; } .drop-zone.compact { padding:14px; gap:8px; } .drop-zone.compact h2 { font-size:14px; } .drop-zone.compact .button { padding:9px; } .drop-zone.compact .button .icon { display:none; } .file-row { padding:14px 12px; } .file-detail { margin-left:0; } .field-pair { gap:8px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
@media(forced-colors:active) { .button,.icon-button,.preset,.panel,.queue,.drop-zone { border-color:ButtonText; } .nav-tab.active { border-color:Highlight; } }

/* V3: compact, task-first, five workspaces. No marketing hero or tutorial footer. */
.header-inner { min-height: 56px; gap: 22px; }
.brand { width: 138px; flex: 0 0 138px; }
.header nav { display: flex; min-width: 0; }
.nav-tab { padding-inline: 14px; font-size: 13px; white-space: nowrap; }
.workspace { padding-top: 24px; }
.quick-routes { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 18px; }
.route-chip { font:inherit; font-size:11px; border:1px solid var(--xc-line); border-radius:5px; padding:7px 10px; color:var(--xc-muted); background:var(--xc-surface); cursor:pointer; }
.route-chip:hover,.route-chip[aria-pressed=true] { color:var(--xc-text); border-color:var(--xc-accent); }
.format-note { font-size:12px; line-height:1.6; color:var(--xc-muted); margin:0 0 18px; }
.result-warnings { padding:9px 12px; margin:10px 0; border-left:2px solid #b18337; background:var(--xc-surface); color:var(--xc-muted); font-size:12px; line-height:1.55; }
.result-warnings p { margin:4px 0; }
.file-detail video { display:block; max-width:100%; width:100%; max-height:300px; background:#000; margin:12px 0; border-radius:5px; }
.source-details { margin:8px 0 12px; color:var(--xc-muted); font-size:12px; }
.source-details summary { cursor:pointer; padding:6px 0; }
.text-preview { white-space:pre-wrap; overflow-wrap:anywhere; max-height:360px; overflow:auto; font:12px/1.65 Consolas,monospace; padding:14px; background:var(--xc-bg); border:1px solid var(--xc-line); border-radius:6px; }
.table-preview-wrap { overflow:auto; max-height:340px; }
.table-preview { width:100%; border-collapse:collapse; font-size:12px; }
.table-preview td { border:1px solid var(--xc-line); padding:7px; max-width:240px; overflow-wrap:anywhere; }
.table-preview tr:first-child { font-weight:600; }
#document-settings .field small { color:var(--xc-muted); font-size:11px; letter-spacing:0; text-transform:none; }
#csv-settings .check-label { margin-block:12px; }
.settings-changed { font-size:11px; color:var(--xc-muted); }
@media(max-width:1000px){.header-inner{gap:10px}.nav-tab{padding-inline:9px}.engine-pill{display:none}}
@media(max-width:720px){
 .header-inner{display:grid;grid-template-columns:1fr auto;gap:0;padding:0 14px;min-height:0}
 .brand{width:125px;height:46px;display:flex;align-items:center}.brand img{max-height:36px}
 .header-tools{grid-column:2;grid-row:1}.header nav{grid-column:1/-1;grid-row:2;overflow-x:auto;width:100%;justify-content:space-between}
 .nav-tab{height:40px;padding:0 11px;font-size:12px;flex:0 0 auto}.nav-tab .icon{width:15px;height:15px}
 .workspace{padding-top:16px}.quick-routes{gap:5px;margin-bottom:14px}.route-chip{font-size:10px;padding:6px 8px}
 .panel #convert,.panel #stop,.panel .keep-open{display:none!important}
 .mobile-action{z-index:20;bottom:0;padding-bottom:max(12px,env(safe-area-inset-bottom))}
 .result-actions{flex-wrap:wrap}
}
@media(max-width:390px){.nav-tab{padding:0 10px}.nav-tab .icon{display:none}.header nav{justify-content:flex-start}}
/* Ensure both mobile header rows remain in normal flow; never clip workspace tabs. */
@media(max-width:820px){
 .header{height:auto;min-height:86px}
 .header-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:46px 40px;height:auto;min-height:0;gap:0;padding:0 14px}
 .brand{width:125px;height:46px;align-items:center}
 .header-tools{grid-column:2;grid-row:1}
 .header nav{grid-column:1/-1;grid-row:2;height:40px;min-height:40px;width:100%;gap:0;overflow-x:auto;justify-content:space-between}
 .nav-tab{height:40px;padding:0 9px;font-size:12px;flex:0 0 auto}
 .nav-tab .icon{display:none}
}
@media(max-width:390px){.nav-tab{padding:0 7px;font-size:11px}.header nav{justify-content:space-between}}
.file-warning{font-size:11px;line-height:1.65;color:var(--xc-muted);margin:5px 0}