/* The incumbent paper / native-window / color-reveal system is preserved.
   This production surface adds real service, task, file and recovery states. */
:root {
  --paper:#f7f6f3; --ink:#1b1d1a; --dim:#6e716b; --muted:#92958e;
  --rule:#e3e4dd; --well:#eeeee8; --raised:#fff; --canvas:#fbfaf8;
  --accent:#3d6556; --accent-ink:#2f5747; --accent-soft:#e5ece5;
  --danger:#a44134; --danger-soft:#f9eeea;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang TC","Microsoft JhengHei","Segoe UI",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.8,.2,1); color-scheme:light;
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) { --paper:#111310; --ink:#eceee7; --dim:#a1a69a; --muted:#808779; --rule:#2a2f26; --well:#20251c; --raised:#1e231b; --canvas:#171b15; --accent:#a3bfa3; --accent-ink:#bad0b8; --accent-soft:#283426; --danger:#f3a598; --danger-soft:#36221d; color-scheme:dark; }
}
:root[data-theme="dark"] { --paper:#111310; --ink:#eceee7; --dim:#a1a69a; --muted:#808779; --rule:#2a2f26; --well:#20251c; --raised:#1e231b; --canvas:#171b15; --accent:#a3bfa3; --accent-ink:#bad0b8; --accent-soft:#283426; --danger:#f3a598; --danger-soft:#36221d; color-scheme:dark; }
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.6 var(--sans); -webkit-font-smoothing:antialiased; }
h1,h2,h3,p,ul { margin:0; }
a { color:inherit; text-decoration:none; }
button,input { color:inherit; font:inherit; letter-spacing:inherit; }
button { cursor:pointer; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button:disabled { cursor:wait; opacity:.55; }
[hidden] { display:none!important; }
::selection { background:var(--accent); color:var(--paper); }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:5px; }
button:focus-visible { outline-offset:2px; }
input { caret-color:var(--accent); }
svg { display:block; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.page { max-width:856px; margin:auto; padding:0 32px; }
.top { height:80px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; gap:9px; font-size:16px; font-weight:650; letter-spacing:-.02em; }
.brand-mark { width:25px; height:28px; border-radius:8px; display:grid; place-items:center; color:var(--paper); background:var(--accent); }
.brand-mark svg { width:20px; height:20px; stroke-width:1.8; }
.brand-domain { color:var(--dim); font-weight:450; }
.top-end { display:flex; align-items:center; gap:18px; }
.service-state { display:flex; align-items:center; gap:7px; color:var(--dim); font-size:11px; }
.service-state i { width:5px; height:5px; border-radius:50%; background:var(--muted); }
.service-state[data-state="ready"] i { background:#6d9f68; }
.icon-button { width:44px; height:44px; border:0; background:none; display:grid; place-items:center; padding:0; border-radius:12px; color:var(--dim); }
.icon-button:hover { color:var(--ink); background:var(--well); }
.theme-toggle { margin-right:-12px; }
.intro { text-align:center; padding:clamp(52px,8vh,88px) 0 46px; }
h1 { text-wrap:balance; font-size:32px; line-height:1.4; font-weight:620; letter-spacing:-.025em; }
h1 span { display:block; color:var(--dim); font-weight:450; }
.intro-caption { margin-top:20px; color:var(--dim); font-size:13px; text-wrap:balance; }
.workspace { max-width:760px; margin:0 auto; }
.window { position:relative; background:var(--canvas); min-height:410px; border-radius:14px; box-shadow:0 0 0 1px var(--rule),0 1px 2px #0000000a,0 30px 60px -30px #00000038; overflow:hidden; font-size:13px; line-height:1.35; }
.wash { position:absolute; inset:0 0 auto; height:340px; opacity:.2; filter:blur(40px) saturate(1.2); transform:scale(1.2); pointer-events:none; mask-image:linear-gradient(#000 15%,transparent); -webkit-mask-image:linear-gradient(#000 15%,transparent); background-position:center; background-size:cover; animation:wash-in .6s var(--ease); }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) .wash { opacity:.28; } }
:root[data-theme="dark"] .wash { opacity:.28; }
@keyframes wash-in { from { opacity:0; } }
.titlebar { position:relative; height:64px; display:flex; align-items:center; gap:10px; padding:0 15px; }
.lights,.toolbar-spacer { flex:1 0 0; display:flex; align-items:center; }
.lights { gap:7px; }
.lights i { width:10px; height:10px; background:#ff655b; border-radius:50%; box-shadow:inset 0 0 0 .5px #00000013; }
.lights i:nth-child(2) { background:#efbd4b; }
.lights i:nth-child(3) { background:#69b66a; }
.omni { flex:0 480px; min-width:0; height:44px; padding:0 0 0 12px; display:flex; align-items:center; gap:9px; border:1px solid transparent; border-radius:11px; background:color-mix(in srgb,var(--ink) 5%,transparent); color:var(--dim); transition:background .16s,border-color .16s,box-shadow .16s; }
.omni:focus-within,.omni.open { border-color:color-mix(in srgb,var(--accent) 50%,transparent); background:var(--raised); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent); }
.omni input { flex:1; min-width:0; width:100%; height:100%; border:0; padding:0; outline:none; background:none; font-size:13.5px; color:var(--ink); text-overflow:ellipsis; }
.omni input::placeholder { color:var(--dim); opacity:1; }
.omni kbd { flex:none; padding:1px 5px; border:1px solid var(--rule); border-radius:4px; font:11px/1.4 var(--sans); color:var(--dim); }
.omni .clear-input { width:28px; height:40px; border-radius:5px; }
.resolve-button { flex:none; width:44px; height:44px; padding:0; display:grid; place-items:center; border:0; border-radius:10px; color:var(--dim); background:none; transition:color .15s,background .15s; }
.resolve-button:hover { color:var(--accent-ink); background:var(--accent-soft); }
.resolve-button.is-loading svg { animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.service-notice { position:relative; margin:8px 28px 0; padding:11px 12px; display:flex; align-items:flex-start; gap:9px; color:var(--dim); background:var(--well); border-radius:10px; font-size:12px; line-height:1.6; }
.service-notice>span { margin-top:3px; }
.service-notice p { flex:1; }
.service-notice button { flex:none; align-self:center; min-height:32px; color:var(--accent-ink); background:none; border:0; padding:0 4px; font-size:11px; }
.library { position:relative; padding:4px 28px 25px; max-height:560px; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--rule) transparent; }
.library::-webkit-scrollbar { width:6px; }
.library::-webkit-scrollbar-thumb { background:var(--rule); border-radius:4px; }
.lib-head { display:flex; align-items:center; gap:13px; padding:16px 0 17px; }
.lib-head h2 { font-size:20px; font-weight:680; letter-spacing:-.02em; white-space:nowrap; }
.filters { display:flex; align-items:center; gap:3px; }
.filters button { min-height:32px; padding:4px 11px; display:flex; align-items:baseline; gap:5px; border:0; border-radius:16px; color:var(--dim); background:none; font-size:12px; font-weight:550; white-space:nowrap; }
.filters button[aria-pressed="true"] { color:var(--canvas); background:color-mix(in srgb,var(--ink) 86%,transparent); }
.filters button:not([aria-pressed="true"]):hover { color:var(--ink); background:var(--well); }
.filters small { font:inherit; font-size:11px; opacity:.7; font-variant-numeric:tabular-nums; }
.filters button { align-items:center; justify-content:center; border-radius:999px; }
.preview-art img,.tile-art img { position:relative; }
.filters small:empty { display:none; }
.library-caption { margin-left:auto; color:var(--dim); font-size:11px; }
.sub { min-height:28px; display:flex; align-items:baseline; gap:8px; padding:2px 0 10px; color:var(--dim); font-size:12px; font-weight:600; }
.sub-detail { font-variant-numeric:tabular-nums; font-size:11px; font-weight:400; }
.card { position:relative; display:flex; align-items:center; gap:17px; padding:12px 12px 12px 12px; margin-bottom:11px; border-radius:16px; background:var(--raised); box-shadow:0 0 0 1px var(--rule); animation:rise .35s var(--ease); --tint:#719966; }
@keyframes rise { from { opacity:.35; transform:translateY(10px); } }
.art { position:relative; flex:none; width:174px; aspect-ratio:16/9; border-radius:10px; background:var(--well); overflow:hidden; }
.art-gray,.art-color { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.art-gray { filter:grayscale(1) contrast(.75) brightness(1.05); opacity:.5; }
.art-color { clip-path:inset(0 calc(100% - var(--p,0%)) 0 0); }
.art-fallback { position:absolute; inset:0; color:color-mix(in srgb,var(--tint) 60%,var(--dim)); display:grid; place-items:center; background:color-mix(in srgb,var(--tint) 11%,var(--well)); }
.art-fallback svg { width:28px; height:28px; stroke-width:1.2; }
.art[data-empty="true"] .art-gray,.art[data-empty="true"] .art-color { display:none; }
.duration { position:absolute; right:6px; bottom:6px; color:#fff; background:#0000009e; border-radius:5px; padding:2px 5px; font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; }
.card-text { min-width:0; flex:1; display:grid; gap:4px; }
.card-title,.tile-title,.preview-title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.3; }
.card-title { font-size:14px; font-weight:650; }
.meta { color:var(--dim); font-size:11px; font-variant-numeric:tabular-nums; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.figure { margin-top:6px; min-height:25px; display:flex; align-items:baseline; gap:9px; }
.figure b { flex:none; color:var(--tint); font-size:19px; line-height:1.2; font-weight:700; font-variant-numeric:tabular-nums; }
.figure .meta { font-size:11px; }
.state-label { color:var(--dim); font-size:12px; font-weight:500; }
.bar { position:relative; height:4px; border-radius:2px; overflow:hidden; background:color-mix(in srgb,var(--ink) 8%,transparent); }
.bar>i { display:block; height:100%; width:var(--p,0%); border-radius:2px; background:linear-gradient(90deg,color-mix(in oklab,var(--tint),white 25%),var(--tint)); }
.bar.paused>i { background:color-mix(in srgb,var(--dim) 50%,transparent); }
.bar.indeterminate>i { width:34%; transform:translateX(-105%); animation:indeterminate 1.6s var(--ease) infinite; opacity:.65; }
@keyframes indeterminate { to { transform:translateX(395%); } }
.card-actions { flex:none; display:flex; align-items:center; gap:2px; }
.card-actions button { width:44px; height:44px; border:0; border-radius:50%; color:var(--dim); background:none; display:grid; place-items:center; }
.card-actions button:hover { background:var(--well); color:var(--ink); }
.card-actions button[data-action="retry"] { color:var(--accent-ink); }
.card[data-state="failed"] .state-label { color:var(--danger); }
.card-error { color:var(--danger); font-size:11px; line-height:1.5; margin-top:5px; }
.card[data-state="ready"] .state-label { color:var(--accent-ink); }
.empty-state { min-height:248px; padding:28px 12px 31px; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; }
.empty-mark { width:52px; height:58px; display:grid; place-items:center; margin-bottom:15px; color:var(--accent); }
.empty-mark svg { width:37px; height:37px; stroke-width:1.15; }
.empty-state h3 { font-size:15px; font-weight:550; text-wrap:balance; }
.empty-state>p { margin-top:8px; color:var(--dim); font-size:12px; text-wrap:balance; }
.text-action { min-height:44px; border:0; padding:0; background:none; color:var(--dim); font-size:12px; display:inline-flex; align-items:center; justify-content:center; gap:6px; text-decoration:underline; text-decoration-color:var(--rule); text-underline-offset:4px; }
.text-action:hover { color:var(--accent-ink); text-decoration-color:currentColor; }
.empty-state .text-action { margin-top:10px; color:var(--accent-ink); }
.ready-heading { display:flex; align-items:baseline; justify-content:space-between; padding-top:9px; }
.ready-heading button { min-height:32px; color:var(--dim); font-size:11px; background:none; border:0; padding:0; }
.ready-heading button:hover { color:var(--ink); }
.tiles { padding:0; list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(192px,1fr)); gap:23px 20px; }
.tile { display:grid; align-content:start; gap:8px; animation:grow .35s var(--ease); min-width:0; --tint:#719966; }
@keyframes grow { from { opacity:.5; transform:scale(.96); } }
.tile-art { position:relative; aspect-ratio:16/9; border-radius:11px; overflow:hidden; background:var(--well); }
.tile-art img { width:100%; height:100%; object-fit:cover; display:block; }
.tile-title { font-size:12px; font-weight:600; }
.tile-text { display:grid; gap:3px; }
.tile .meta { font-size:11px; }
.save-file { min-height:36px; display:flex; justify-content:center; align-items:center; gap:6px; padding:6px 10px; border-radius:7px; color:var(--accent-ink); background:var(--accent-soft); font-size:11px; font-weight:550; }
.save-file:hover { background:color-mix(in srgb,var(--accent) 20%,var(--accent-soft)); }
.preview-panel { position:absolute; z-index:3; top:60px; left:50%; transform:translateX(-50%); width:min(632px,100% - 48px); padding:14px; border-radius:14px; background:var(--raised); box-shadow:0 0 0 1px var(--rule),0 18px 50px #00000038,0 2px 6px #00000014; display:grid; grid-template-columns:132px minmax(0,1fr); column-gap:15px; row-gap:11px; animation:drop .3s var(--ease); }
@keyframes drop { from { opacity:.4; transform:translate(-50%,-8px) scale(.98); } }
.preview-art { position:relative; width:132px; aspect-ratio:16/9; border-radius:9px; background:var(--well); overflow:hidden; grid-column:1; grid-row:1/3; align-self:start; }
.preview-art img { width:100%; height:100%; object-fit:cover; display:block; }
.preview-text { min-width:0; }
.preview-title { font-size:14px; font-weight:650; }
.preview-text .meta { margin-top:5px; }
.quality-options { display:flex; flex-wrap:wrap; gap:5px; grid-column:2; }
.quality-options button { min-height:32px; padding:4px 11px; border:0; border-radius:16px; background:var(--well); color:var(--dim); font-size:11px; font-weight:550; }
.quality-options button[aria-checked="true"] { color:var(--paper); background:var(--ink); }
.quality-options button:hover:not([aria-checked="true"]) { color:var(--ink); }
.preview-footer { grid-column:1/-1; padding-top:11px; border-top:1px solid var(--rule); display:flex; align-items:center; justify-content:space-between; gap:14px; }
.preview-footer p { color:var(--dim); font-size:11px; }
.primary { min-height:40px; padding:0 17px; border:0; border-radius:8px; display:flex; align-items:center; justify-content:center; gap:8px; color:var(--paper); background:var(--ink); font-size:12px; font-weight:550; }
.primary:hover { opacity:.85; }
.preview-message { grid-column:1/-1; display:flex; align-items:center; gap:11px; padding:10px 3px; color:var(--dim); line-height:1.6; font-size:12px; }
.preview-message svg { color:var(--accent); }
.preview-message.error { color:var(--danger); }
.preview-message strong { display:block; color:var(--ink); font-size:13px; font-weight:550; margin-bottom:2px; }
.preview-message p { flex:1; }
.preview-message .spinner { animation:spin 1s linear infinite; }
.workspace-foot { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:13px 2px 0; color:var(--dim); font-size:11px; }
.workspace-foot>p { display:flex; align-items:center; gap:5px; }
.workspace-foot .text-action { min-height:36px; font-size:11px; }
.workspace-foot kbd { font:inherit; }
.task-notice { margin:8px 0 0; padding:10px 12px; border-radius:9px; color:var(--danger); background:var(--danger-soft); font-size:12px; line-height:1.6; }
.support-note { padding:49px 0 50px; text-align:center; color:var(--dim); font-size:12px; line-height:1.8; }
.support-note>p { color:var(--ink); font-size:13px; margin-bottom:7px; }
.support-note>span { word-spacing:3px; }
.foot { display:flex; justify-content:space-between; align-items:baseline; gap:18px; border-top:1px solid var(--rule); padding:22px 0 35px; color:var(--dim); font-size:11px; }
.support-details { flex:1; text-align:center; max-width:430px; }
.support-details summary { cursor:pointer; list-style:none; min-height:30px; }
.support-details summary::-webkit-details-marker { display:none; }
.support-details[open] summary { color:var(--ink); }
.support-details>div { text-align:left; line-height:1.8; padding:0 18px 6px; }
.support-details p+p { margin-top:9px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.noscript { text-align:center; padding:20px; }
@media (width<=650px) {
  .page { padding:0 24px; }
  .lights { flex:0 0 46px; gap:5px; }
  .lights i { width:8px; height:8px; }
  .toolbar-spacer { display:none; }
  .omni { flex:1; }
  .library-caption { display:none; }
  .card { gap:13px; }
  .art { width:144px; }
  .card-actions { flex-direction:column; gap:0; }
}
@media (width<=520px) {
  .page { padding:0 16px; }
  .top { height:68px; }
  .top-end { gap:5px; }
  .service-state { font-size:11px; gap:5px; }
  .intro { padding:43px 0 34px; }
  h1 { font-size:28px; line-height:1.45; }
  .intro-caption { font-size:12px; margin-top:17px; max-width:29em; margin-inline:auto; }
  .window { min-height:430px; }
  .titlebar { padding:0 11px; gap:8px; height:64px; }
  .lights { display:none; }
  .omni { height:44px; gap:8px; padding-left:10px; }
  .omni input { font-size:16px; }
  .omni kbd { display:none; }
  .omni .clear-input { width:28px; height:42px; }
  .resolve-button { width:44px; height:44px; }
  .library { padding:0 16px 22px; max-height:560px; }
  .lib-head { gap:10px; padding:15px 0 17px; }
  .lib-head h2 { font-size:18px; }
  .filters { gap:0; }
  .filters button { min-height:44px; padding-inline:10px; font-size:11px; }
  .service-notice { margin:5px 16px 0; flex-wrap:wrap; padding:10px; gap:7px; }
  .service-notice p { min-width:200px; font-size:11px; }
  .service-notice button { min-height:36px; margin-left:23px; }
  .card { padding:10px; gap:11px; align-items:flex-start; min-height:134px; }
  .art { width:103px; }
  .card-title { font-size:13px; }
  .meta { font-size:11px; }
  .figure { flex-wrap:wrap; row-gap:3px; margin-top:7px; min-height:24px; }
  .figure b { font-size:18px; }
  .figure .meta { font-size:11px; flex-basis:100%; }
  .card-actions { position:absolute; left:8px; top:76px; flex-direction:row; }
  .card-actions button { width:44px; height:44px; }
  .card-error { font-size:11px; }
  .tiles { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:21px 14px; }
  .save-file { min-height:44px; }
  .empty-state { min-height:256px; padding:25px 0 30px; }
  .empty-state h3 { font-size:14px; max-width:18em; }
  .empty-state>p { font-size:11px; max-width:20em; }
  .empty-mark { margin-bottom:13px; }
  .preview-panel { width:calc(100% - 24px); top:61px; grid-template-columns:88px minmax(0,1fr); gap:10px 12px; padding:12px; }
  .preview-art { width:88px; grid-row:1; }
  .preview-text { align-self:center; }
  .preview-title { font-size:13px; }
  .quality-options { grid-column:1/-1; gap:5px; }
  .quality-options button { min-height:44px; border-radius:22px; }
  .preview-footer { align-items:stretch; flex-direction:column; gap:9px; }
  .preview-footer p { text-align:center; font-size:11px; }
  .preview-footer .primary { order:-1; min-height:44px; }
  .workspace-foot { gap:10px; font-size:11px; }
  .workspace-foot .text-action { font-size:11px; min-height:44px; }
  .support-note { padding:35px 12px 36px; font-size:11px; }
  .support-note>p { font-size:12px; }
  .support-note>span { word-spacing:1px; }
  .foot { gap:9px; font-size:11px; padding-top:18px; }
  .foot>span:last-child { display:none; }
  .support-details { text-align:right; }
  .support-details>div { padding:0 0 4px 8px; font-size:11px; }
}
@media (width<=359px) {
  .page { padding:0 12px; }
  .service-state { max-width:86px; }
  h1 { font-size:25px; }
  .library { padding-inline:12px; }
  .filters button { padding-inline:7px; }
  .art { width:88px; }
  .card { gap:9px; min-height:132px; }
  .card-actions { top:67px; left:6px; }
  .card-actions button { width:44px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
  .bar.indeterminate>i { transform:none; width:35%; }
}