:root {
  color-scheme: light dark;
  --bg: #f6f7fb;
  --surface: #fff;
  --surface-2: #eef1f8;
  --ink: #182033;
  --muted: #64708a;
  --line: #dce2ef;
  --brand: #5267e8;
  --brand-2: #8a5be8;
  --danger: #c33d55;
  --success: #207a59;
  --radius: 14px;
  --shadow: 0 12px 32px rgba(21, 33, 70, .10);
  font-family: Inter, "SF Pro Text", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root { --bg:#111521; --surface:#191f2e; --surface-2:#242c3e; --ink:#edf1fa; --muted:#a9b5cc; --line:#34405a; --shadow:0 12px 32px rgba(0,0,0,.28); }
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--ink); }
button, input, select { font: inherit; }
button { border: 0; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 42%, transparent); outline-offset: 2px; }
.shell { min-height: 100dvh; display:grid; grid-template-rows:auto 1fr auto; }
.topbar, .footer { display:flex; align-items:center; gap:16px; padding: 14px clamp(16px, 4vw, 44px); background:color-mix(in srgb, var(--surface) 94%, transparent); border-bottom:1px solid var(--line); }
.footer { border-top:1px solid var(--line); border-bottom:0; justify-content:space-between; color:var(--muted); font-size:13px; }
.brand { display:flex; align-items:baseline; gap:9px; text-decoration:none; color:var(--ink); font-weight:800; letter-spacing:-.02em; }
.brand-mark { color:var(--brand); font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
.topbar-actions { margin-left:auto; display:flex; align-items:center; gap:8px; }
.workspace { min-height:0; display:grid; grid-template-columns:minmax(0, 1fr) 348px; }
.canvas-stage { position:relative; min-height:440px; overflow:hidden; display:grid; place-items:center; padding:32px; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 45%); }
.canvas-wrap { position:relative; max-width:100%; max-height:100%; box-shadow:var(--shadow); line-height:0; }
#canvas { display:block; max-width:100%; max-height:calc(100dvh - 152px); background: repeating-conic-gradient(#dfe4ef 0 25%, #fff 0 50%) 50%/18px 18px; touch-action:none; }
.panel { overflow:auto; padding:22px; background:var(--surface); border-left:1px solid var(--line); }
.section { padding:0 0 20px; margin:0 0 20px; border-bottom:1px solid var(--line); }
.section:last-child { border:0; }
h1,h2,h3,p { margin:0; }
h2 { font-size:16px; margin-bottom:14px; }
h3 { font-size:14px; margin:16px 0 8px; }
.field { display:grid; gap:7px; margin:12px 0; color:var(--muted); font-size:13px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
input, select { width:100%; min-height:40px; border:1px solid var(--line); border-radius:9px; padding:8px 10px; background:var(--surface-2); color:var(--ink); }
input[type="range"] { padding:0; accent-color:var(--brand); }
.button { min-height:40px; padding:9px 13px; border-radius:9px; background:var(--surface-2); color:var(--ink); border:1px solid var(--line); font-weight:650; white-space:nowrap; }
.button:hover:not(:disabled) { border-color:var(--brand); }
.button:disabled { opacity:.45; cursor:not-allowed; }
.button.primary { border-color:transparent; color:white; background:linear-gradient(125deg,var(--brand),var(--brand-2)); }
.button.danger { color:var(--danger); }
.button.small { min-height:32px; padding:6px 9px; font-size:12px; }
.button-row { display:flex; gap:8px; flex-wrap:wrap; }
.button-row > .button { flex:1; }
.hint { color:var(--muted); font-size:12px; line-height:1.55; }
.upload { position:absolute; inset:0; display:grid; place-items:center; padding:24px; background:var(--bg); z-index:5; }
.upload-card { max-width:580px; width:100%; text-align:center; padding:44px 28px; border:2px dashed var(--line); border-radius:22px; background:var(--surface); box-shadow:var(--shadow); }
.upload-card.dragover { border-color:var(--brand); background:color-mix(in srgb, var(--brand) 6%, var(--surface)); }
.upload-icon { display:grid; place-items:center; width:56px; height:56px; border-radius:18px; margin:0 auto 18px; color:white; background:linear-gradient(125deg,var(--brand),var(--brand-2)); font-size:27px; }
.upload-card h1 { font-size:28px; letter-spacing:-.04em; }
.upload-card p { margin:12px auto 24px; color:var(--muted); line-height:1.6; }
.privacy-badge { margin-top:16px; color:var(--success); font-size:13px; }
.queue { display:grid; gap:8px; max-height:230px; overflow:auto; }
.queue-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; padding:9px; border:1px solid var(--line); border-radius:9px; font-size:12px; }
.queue-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.queue-meta { color:var(--muted); grid-column:1/-1; }
.queue-state.error { color:var(--danger); }.queue-state.ready,.queue-state.done { color:var(--success); }
.dialog-backdrop { position:fixed; inset:0; display:none; place-items:center; padding:20px; background:rgba(9,13,23,.55); z-index:10; }
.dialog-backdrop.open { display:grid; }
.dialog { width:min(510px,100%); max-height:calc(100dvh - 40px); overflow:auto; padding:24px; border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }
.dialog header { display:flex; justify-content:space-between; gap:16px; align-items:center; }
.dialog p { color:var(--muted); line-height:1.6; margin:14px 0; }
.toast-region { position:fixed; right:18px; top:18px; display:grid; gap:8px; z-index:20; }
.toast { max-width:min(380px, calc(100vw - 36px)); padding:11px 14px; border-radius:10px; color:var(--ink); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); font-size:13px; }
.toast.error { border-color:var(--danger); }.toast.success { border-color:var(--success); }
.hidden { display:none !important; }

@media (max-width: 900px) {
  .workspace { grid-template-columns:1fr; grid-template-rows:minmax(360px, 54dvh) auto; }
  .canvas-stage { min-height:360px; padding:16px; }
  #canvas { max-height:calc(54dvh - 32px); }
  .panel { border-left:0; border-top:1px solid var(--line); }
}
@media (max-width: 520px) {
  .topbar { padding:11px 14px; gap:8px; }.brand-mark { display:none; }.topbar-actions { gap:5px; }
  .topbar-actions .button { padding:7px 8px; font-size:12px; }.field-row { grid-template-columns:1fr; }
  .footer { align-items:flex-start; flex-direction:column; gap:6px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto !important; transition:none !important; } }