/* Shared user-facing surfaces: paper, graphite, consistent interaction states. */
:root{
 --paper:#fff;--canvas:#fcfbf9;--surface:#f5f4f1;--ink:#292826;--secondary:#66635f;
 --muted:#79756f;--line:#e4e1dc;--accent:#393734;--border:var(--line);
 --hover:#efede9;--selected:#e9e6e0;--radius:10px;
 color:var(--ink);background:var(--canvas);
 font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
}
body{color:var(--ink);background:var(--canvas)}
button,a,input,select,textarea{font-family:inherit}
button,select,input,textarea{color:var(--ink);border-color:var(--line);border-radius:var(--radius)}
button{min-height:36px;transition:background-color 140ms,border-color 140ms,transform 100ms,opacity 140ms;cursor:pointer}
button:hover:not(:disabled){background:var(--hover);border-color:#cbc6bd}
button:active:not(:disabled){transform:translateY(1px) scale(.985)}
button:disabled{cursor:default;opacity:.45}
button[aria-busy=true]{opacity:1;cursor:progress;color:var(--secondary)}
button[aria-busy=true]:before,.loading-status:before{
 content:"";display:inline-block;width:12px;height:12px;border:1.5px solid currentColor;
 border-right-color:transparent;border-radius:50%;vertical-align:-2px;margin-right:8px;animation:paper-spin 700ms linear infinite;
}
:is(button,a,input,select,textarea,summary,[contenteditable]):focus-visible{outline:2px solid #74706a;outline-offset:3px}
:is(button,a)[aria-current],button[aria-selected=true],button[aria-pressed=true]{background:var(--selected);color:var(--ink);border-color:#d4cec4}
input,select,textarea{accent-color:var(--accent)}
a{color:inherit}
.sidebar{background:var(--surface);border-color:var(--line)}
.brand,.project-heading,.preview-heading h2,.welcome h1,.message .body{color:var(--ink)}
.brand-icon{background:var(--accent)}
.brand-en,.sidebar-label,.local-badge,.eyebrow,.message .speaker{color:var(--muted)}
.sidebar-bottom>a,.sidebar-bottom>button,.account{color:var(--secondary);border-color:var(--line)}
.project-row,.new-project,.project-main{border-radius:var(--radius)}
.project-row.active,nav button.active{background:var(--selected);color:var(--ink)}
.topbar,.conversation{background:var(--canvas);border-color:var(--line)}
.wallet-chip{color:var(--ink);background:var(--paper);border-color:var(--line)}
.conversation-top,.welcome>p:not(.eyebrow),.materials-heading,.task-status,.task-status.busy{color:var(--secondary)}
.welcome h1{font-size:26px;font-weight:600;letter-spacing:-.5px}
.quick-prompts button{background:var(--paper);color:var(--secondary);border-color:var(--line)}
.quick-prompts button:hover{background:var(--hover);border-color:#cbc6bd}
.message.user{background:var(--surface);border-radius:12px}
.composer{border:1px solid #d8d3ca;border-radius:14px;box-shadow:none;background:var(--paper)}
.composer:focus-within{border-color:#8e877b;box-shadow:0 0 0 2px #39373408}
.composer-heading label,.prompt-editor{color:var(--ink)}
.composer-heading>span,.composer-hint,.creation-action>span,.materials-heading small,.material-card .asset-meta{color:var(--muted)}
.prompt-editor:empty:before{color:#87817a}
.material-mention{color:var(--ink);background:#eeebe5}
.composer-bottom,.creation-action{border-color:var(--line)}
.composer-bottom .attach,.composer-bottom .attach-folder,.composer-bottom>select,
.composer-bottom>.model-picker>button,.preference-chip,.count-picker input{background:var(--surface);border-color:var(--line);color:var(--ink)}
.creation-action .send,.primary,#loginbutton{background:var(--accent);color:#fff;border-color:var(--accent)}
.creation-action .send:hover:not(:disabled),.primary:hover:not(:disabled){background:#514d46;color:#fff}
.material-card>span:last-child,.material-card .asset-meta,.more-preferences,.count-picker{color:var(--secondary)}
.asset-strip .material-card{border-color:var(--line);border-radius:var(--radius)}
.material-thumb,.mention-thumb,.material-remove{background:var(--surface);color:var(--secondary)}
.preview-pane{background:var(--surface);border-color:var(--line)}
.preview-stage{background:#eeece7;border-color:var(--line);border-radius:12px}
.frame-icon{background:var(--paper);color:#9a9286;border-color:var(--line);border-radius:14px}
#preview-empty h3,#preview-empty p,.preview-heading span,.preview-caption,.preview-actions button,.video-navigation span{color:var(--secondary)}
.video-navigation button,.result-downloads button,.generation-point{color:var(--ink);background:var(--paper);border-color:var(--line)}
.generation-point[aria-pressed=true]{color:var(--ink);background:var(--selected);border-color:#cfc8bc}
.generation-timeline h3,.work-details summary,.post-production-tools>summary{color:var(--secondary)}
.work-details,.message details section{border-color:var(--line)}
.work-tabs{background:var(--selected)}
.task-progress{background:var(--paper);border-color:var(--line);border-radius:var(--radius);color:var(--secondary)}
.task-progress li.current,.task-progress li.done:before{color:var(--ink)}
.task-progress li{opacity:1;color:var(--muted)}
.task-progress li.current{font-weight:600}
.task-progress li.done{color:var(--secondary)}
.feedback-consent{color:var(--secondary)}
.feedback-consent input,.audio-consent input{accent-color:var(--accent)}
dialog{border-radius:14px;background:var(--paper);border:1px solid var(--line);color:var(--ink);box-shadow:none}
dialog::backdrop{background:#27252252;backdrop-filter:none}
dialog[open]{animation:paper-enter 180ms ease-out}
dialog[open]::backdrop{animation:paper-fade 150ms ease-out}
.dialog-heading{border-color:var(--line)}
.dialog-heading h2{font-size:18px;font-weight:600;letter-spacing:-.2px;color:var(--ink)}
.dialog-heading button{background:var(--surface);border-radius:8px;color:var(--secondary);width:32px;min-height:32px}
.dialog-intro{color:var(--secondary);font-size:13px;line-height:1.7}
.dialog-body{padding:22px 24px}
.dialog-body>label{font-size:13px;color:var(--ink)}
.model-menu,.mention-menu,.preference-menu{background:var(--paper);border-color:var(--line);border-radius:var(--radius);box-shadow:0 6px 24px #2928260a}
.model-menu button,.mention-menu button,.preference-menu button{color:var(--ink);border-radius:7px;min-height:38px}
.model-menu button:hover:not(:disabled),.preference-menu button:hover,.preference-menu button:focus{background:var(--hover)}
.model-menu button[aria-selected=true],.preference-menu button[aria-selected=true]{background:var(--selected);color:var(--ink)}
.model-menu small{color:var(--secondary)}
#creationpreferences .model-picker>button{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink)}
.settings-label{display:block;margin:0 0 8px;font-size:12px;font-weight:600;color:var(--ink)}
.settings-note{font-size:12px;line-height:1.7;color:var(--secondary);margin:12px 0 0}
.library-tabs{gap:4px;display:flex;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:16px}
.library-tabs button{border-radius:8px;background:transparent;border-color:transparent;color:var(--secondary)}
.library-tabs button[aria-pressed=true]{background:var(--selected);color:var(--ink);font-weight:600}
.library-add{background:var(--surface);border-color:var(--line);border-radius:var(--radius)}
.archive-toolbar{align-items:flex-end;gap:12px}
.archive-toolbar label{margin:0}
.archive-toolbar button{margin-bottom:0}
.archive-folder,.archive-generation,.user-asset,.image-plan-card{border-color:var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink)}
.archive-folder-icon{background:var(--selected);border-color:#d9d3c8}
.archive-folder-icon:before{background:var(--selected);border-color:#d9d3c8}
.archive-folder small,.archive-empty,.archive-generation-heading span,.archive-location,.archive-video h4{color:var(--secondary)}
.archive-video{background:var(--surface);border-radius:var(--radius)}
.archive-generation{padding:16px}
.archive-generation-heading{flex-wrap:wrap;gap:8px}
.archive-generation-heading h3{margin-right:auto}
.archive-generation-heading button{font-size:12px;padding:6px 10px;min-height:32px}
.archive-videos{grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:10px;margin-top:12px}
.archive-video{padding:8px;min-width:0;border:1px solid transparent}
.archive-video.selected{border-color:#655e53;background:#eae6de;box-shadow:0 0 0 1px #655e53}
.archive-thumbnail{display:block;position:relative;width:100%;padding:0;border:0;overflow:hidden;background:#ece9e3;border-radius:7px}
.archive-thumbnail .archive-video-poster{height:116px;border-radius:7px;object-fit:contain}
.archive-thumbnail .archive-video-icon{height:116px;font-size:12px}
.archive-play-icon{position:absolute;left:50%;top:50%;translate:-50% -50%;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:white;background:#272522ad;font-size:20px;pointer-events:none;transition:background-color 140ms}
.archive-thumbnail:hover .archive-play-icon{background:#272522e6}
.archive-video-choice{display:flex;align-items:center;gap:7px;margin:8px 0;font-size:12px;cursor:pointer}
.archive-video-choice input{width:16px;height:16px;flex:none;margin:0}
.archive-video-choice span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.archive-video>button:not(.archive-thumbnail){width:100%;font-size:11px;padding:5px 8px;min-height:30px;background:var(--paper)}
.archive-selection-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;position:sticky;top:-22px;z-index:3;background:var(--paper);border-block:1px solid var(--line);padding:12px 0}
.archive-selection-bar[hidden]{display:none}
.archive-selection-bar>span{font-size:12px;margin-right:auto;color:var(--secondary)}
.archive-selection-bar button{font-size:12px;padding:7px 11px}
.archive-download-status{font-size:12px;line-height:1.7;color:var(--secondary)}
.archive-download-status:empty{display:none}
.production-plan-details{font-size:12px;color:var(--secondary);margin:12px 0}
.production-plan-details>summary{cursor:pointer}
@media(max-width:600px){.archive-videos{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.archive-selection-bar{top:-18px}.archive-generation{padding:12px}}
.archive-video-poster,.archive-video-icon{background:#eeece7;border-radius:8px}
.archive-generation.located{border-color:#90887b}
#libraryuploadstatus{font-size:12px;color:var(--secondary);min-height:18px}
.archive-loading{display:flex;gap:9px;align-items:center;padding:20px 0;color:var(--secondary);font-size:13px}
.checkpoint-resume>button{border-color:#c8c1b5;color:var(--ink)}
.recovery-details{margin:12px 0;color:var(--secondary);font-size:12px}
.recovery-details summary{cursor:pointer;padding:6px 0}
.recovery-cost{padding:12px;background:var(--surface);border-radius:8px;font-weight:500;font-variant-numeric:tabular-nums}
body>header{background:var(--paper);border-color:var(--line);color:var(--ink)}
.card{background:var(--paper);border-color:var(--line);border-radius:12px;box-shadow:none}
.account-heading h1{font-size:26px;color:var(--ink)}
header .brand,.card h2,.task-card h3,.task-summary dd,.ledger-row strong{color:var(--ink)}
.task-metrics div,.account-tabs{background:var(--surface);border-radius:var(--radius)}
.task-card{background:var(--paper);border-radius:var(--radius)}
.task-metrics span,.balance-value span,.task-summary dt,.task-detail,.ledger-row p,.ledger-row details,#accountupdated{color:var(--secondary)}
.balance-note,.task-detail{border-color:var(--line)}
.account-heading p,.balance-note,.task-date,.account-section-heading p,.muted,.account-empty{color:var(--secondary)}
.balance-value strong,.task-metrics strong,.ledger-amount.credit{color:var(--ink)}
.account-tabs button{color:var(--secondary)}
.account-tabs button[aria-selected=true]{background:var(--selected);color:var(--ink);border-color:var(--line)}
.task-card,.ledger-row{border-color:var(--line)}
.status-pill,.status-pill.succeeded,.status-pill.failed,.status-pill.running{background:var(--surface);color:var(--ink)}
.account-read-status{color:var(--secondary);font-size:13px;padding:8px 0}
#accountloading{margin-block:20px;padding:12px 16px;box-shadow:none}
#notice{background:#393734;color:#fff;border:1px solid #ffffff20;box-shadow:0 4px 16px #0001;z-index:1000;animation:paper-enter 140ms ease-out}
@keyframes paper-enter{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}
@keyframes paper-fade{from{opacity:0}to{opacity:1}}
@keyframes paper-spin{to{rotate:360deg}}
@media(max-width:700px){.dialog-body{padding:18px}.welcome h1{font-size:24px}.library-tabs button{flex:1}.account-heading h1{font-size:24px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}button:active:not(:disabled){transform:none}}