:root {
  --bg:#0a0c0f; --surface:#101318; --surface-2:#151920; --surface-3:#1b2028;
  --line:#262c35; --line-strong:#39424f; --text:#f3f4f6; --sub:#b3bbc7; --muted:#7e8998;
  --accent:#5377f3; --accent-2:#6f8eff; --success:#2fc08d; --warning:#d89b3c; --error:#e66670;
  --shadow:0 18px 45px rgba(0,0,0,.32); --topbar:58px; --sidebar:208px;
  --font:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
[data-theme="light"] { --bg:#f2f4f6; --surface:#fff; --surface-2:#f7f8fa; --surface-3:#eceff3; --line:#dce1e7; --line-strong:#bfc7d1; --text:#171a20; --sub:#4f5a68; --muted:#74808e; --shadow:0 18px 45px rgba(28,35,45,.09); }
* { box-sizing:border-box; margin:0; padding:0; }
html,body { min-height:100%; }
body { background:var(--bg); color:var(--text); font-family:var(--font); line-height:1.45; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
button { cursor:pointer; }
svg { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.td-topbar { position:fixed; inset:0 0 auto; z-index:40; height:var(--topbar); display:flex; align-items:center; justify-content:space-between; padding:0 18px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(18px); }
.td-brand { display:flex; align-items:center; gap:13px; color:var(--text); text-decoration:none; }
.td-brand img { display:block; width:166px; height:auto; }
[data-theme="dark"] .td-brand img { content:url('/assets/brand/pacific-collections-white.png'); }
.td-brand span { padding-left:12px; border-left:1px solid var(--line-strong); color:var(--muted); font-size:.62rem; font-weight:800; letter-spacing:.12em; }
.td-top-actions,.td-system { display:flex; align-items:center; gap:10px; }
.td-system { color:var(--muted); font-size:.68rem; }
.td-system b { font-weight:650; }
.td-system i,.td-worker-gate i { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:var(--warning); box-shadow:0 0 0 3px color-mix(in srgb,var(--warning) 15%,transparent); }
.td-system.ready i,.td-worker-gate[data-state="ready"] i { background:var(--success); box-shadow:0 0 0 3px color-mix(in srgb,var(--success) 15%,transparent); }
.td-system.error i,.td-worker-gate[data-state="error"] i { background:var(--error); box-shadow:0 0 0 3px color-mix(in srgb,var(--error) 15%,transparent); }
.td-icon-button,.td-avatar { width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line); border-radius:7px; background:var(--surface-2); color:var(--sub); }
.td-icon-button:hover,.td-avatar:hover { border-color:var(--line-strong); color:var(--text); }
.td-icon-button svg { width:16px; }
.td-avatar { border-radius:50%; color:var(--accent-2); font-size:.68rem; font-weight:800; }
.td-shell { min-height:100vh; display:grid; grid-template-columns:var(--sidebar) 360px minmax(0,1fr); padding-top:var(--topbar); }
.td-sidebar { min-width:0; padding:20px 10px; overflow-y:auto; border-right:1px solid var(--line); background:var(--surface); }
.td-sidebar .sidebar-section { margin-bottom:10px; }
.td-sidebar .sidebar-label { margin:13px 10px 6px; color:var(--muted); font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.td-sidebar .sidebar-section:first-child .sidebar-label { margin-top:0; }
.td-sidebar .sidebar-nav { display:flex; flex-direction:column; gap:3px; margin:0; padding:0; list-style:none; }
.td-sidebar .sidebar-nav li.hidden { display:none; }
.td-sidebar a { min-height:38px; display:flex; align-items:center; gap:11px; padding:0 10px; border-left:2px solid transparent; border-radius:6px; color:var(--sub); font-size:.72rem; font-weight:650; text-decoration:none; }
.td-sidebar a:hover { background:var(--surface-2); color:var(--text); }
.td-sidebar a.active { border-left-color:var(--accent); background:color-mix(in srgb,var(--accent) 15%,var(--surface)); color:#9db0ff; }
.td-sidebar a svg { width:15px; height:15px; flex:0 0 15px; }
.td-compose { position:relative; z-index:2; min-width:0; padding:24px 22px 32px; overflow-y:auto; border-right:1px solid var(--line); background:var(--surface); }
.td-page-title { margin-bottom:22px; }
.td-eyebrow,.td-stage-kicker { color:var(--accent-2); font-size:.6rem; font-weight:850; letter-spacing:.1em; }
.td-page-title h1 { margin:5px 0 4px; font-size:1.52rem; line-height:1.15; letter-spacing:0; }
.td-page-title p { color:var(--muted); font-size:.72rem; }
.td-section { padding:17px 0; border-top:1px solid var(--line); }
.td-section-head { display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.td-section-head span { color:var(--accent-2); font-family:ui-monospace,monospace; font-size:.61rem; font-weight:800; }
.td-section-head h2 { font-size:.82rem; }
.td-field { display:flex; flex-direction:column; gap:6px; }
.td-field>span { color:var(--sub); font-size:.65rem; font-weight:700; }
.td-field input { width:100%; height:39px; padding:0 10px; border:1px solid var(--line); border-radius:6px; outline:0; background:var(--surface-2); color:var(--text); font-size:.7rem; }
.td-field input:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent); }
.td-field input.invalid { border-color:var(--error); }
.td-source-preview { position:relative; height:150px; margin-top:10px; overflow:hidden; border:1px dashed var(--line-strong); border-radius:7px; background:var(--surface-2); }
.td-source-preview img { width:100%; height:100%; object-fit:contain; background:repeating-conic-gradient(var(--surface-3) 0 25%,var(--surface-2) 0 50%) 50%/18px 18px; }
.td-source-empty { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px; color:var(--muted); text-align:center; }
.td-source-empty svg { width:24px; margin-bottom:8px; }
.td-source-empty strong { color:var(--sub); font-size:.69rem; }
.td-source-empty span { max-width:240px; margin-top:3px; font-size:.59rem; }
.td-boundary { display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; margin:4px 0 14px; padding:11px; border:1px solid var(--line); border-radius:7px; background:var(--surface-2); }
.td-boundary svg { width:22px; color:var(--warning); }
.td-boundary strong,.td-boundary span { display:block; }
.td-boundary strong { font-size:.65rem; }
.td-boundary span { margin-top:2px; color:var(--muted); font-size:.57rem; line-height:1.35; }
.td-worker-gate { margin-bottom:12px; padding:11px; border:1px solid var(--line); border-radius:7px; background:var(--surface-2); }
.td-worker-gate>div { display:flex; align-items:center; gap:9px; }
.td-worker-gate strong { font-size:.64rem; }
.td-worker-gate p { margin:5px 0 0 16px; color:var(--muted); font-size:.57rem; line-height:1.4; }
.td-worker-gate[data-state="error"] { border-color:color-mix(in srgb,var(--error) 38%,var(--line)); background:color-mix(in srgb,var(--error) 7%,var(--surface-2)); }
.td-generate { width:100%; min-height:43px; display:flex; align-items:center; justify-content:center; gap:9px; border:0; border-radius:6px; background:var(--accent); color:#fff; font-size:.72rem; font-weight:780; box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 20%,transparent); }
.td-generate:hover { background:var(--accent-2); }
.td-generate:disabled { opacity:.5; cursor:not-allowed; }
.td-generate svg { width:16px; }
.td-job { margin-top:12px; padding:12px; border:1px solid var(--line); border-radius:7px; background:var(--surface-2); }
.td-job-head { display:grid; grid-template-columns:14px minmax(0,1fr) auto; align-items:center; gap:8px; }
.td-job-head strong,.td-job-head b { font-size:.62rem; }
.td-spinner { width:13px; height:13px; display:inline-block; border:2px solid var(--line-strong); border-top-color:var(--accent); border-radius:50%; animation:td-spin .75s linear infinite; }
@keyframes td-spin { to { transform:rotate(360deg); } }
.td-progress { height:5px; margin:11px 0 8px; overflow:hidden; border-radius:99px; background:var(--surface-3); }
.td-progress i { display:block; width:0; height:100%; border-radius:inherit; background:var(--accent); transition:width .35s ease; }
.td-job p { color:var(--muted); font-size:.57rem; }
.td-job button { margin-top:8px; border:0; background:transparent; color:var(--muted); font-size:.57rem; }
.td-stage { position:relative; min-width:0; min-height:calc(100vh - var(--topbar)); display:grid; grid-template-rows:auto minmax(460px,1fr) auto; overflow:hidden; background:#0b0d11; }
[data-theme="light"] .td-stage { background:#e8ebef; }
.td-stage-toolbar,.td-stage-footer { position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 18px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:blur(15px); }
.td-stage-toolbar>div:first-child { display:flex; flex-direction:column; gap:2px; }
.td-stage-toolbar strong { font-size:.72rem; }
.td-stage-toolbar>div:last-child { display:flex; gap:7px; }
.td-tool-button,.td-download { min-height:34px; display:flex; align-items:center; justify-content:center; gap:7px; border:1px solid var(--line); border-radius:6px; background:var(--surface-2); color:var(--sub); text-decoration:none; font-size:.63rem; font-weight:720; }
.td-tool-button { width:34px; }
.td-tool-button svg,.td-download svg { width:14px; }
.td-download { padding:0 11px; }
.td-tool-button:hover:not(:disabled),.td-download:hover:not(.disabled) { border-color:var(--line-strong); color:var(--text); }
.td-tool-button:disabled,.td-download.disabled { opacity:.4; cursor:not-allowed; pointer-events:none; }
.td-viewer { position:relative; min-width:0; min-height:0; overflow:hidden; touch-action:none; }
.td-viewer canvas { position:absolute; inset:0; width:100%; height:100%; display:block; outline:0; }
.td-viewer-state,.td-viewer-loading { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:22px; color:var(--muted); text-align:center; pointer-events:none; }
.td-viewer-state svg { width:42px; margin-bottom:12px; color:var(--line-strong); }
.td-viewer-state strong,.td-viewer-loading strong { color:var(--sub); font-size:.78rem; }
.td-viewer-state span,.td-viewer-loading small { margin-top:4px; color:var(--muted); font-size:.63rem; }
.td-viewer-loading { gap:8px; background:color-mix(in srgb,#0b0d11 72%,transparent); backdrop-filter:blur(5px); }
.td-viewer-loading .td-spinner { width:20px; height:20px; }
.td-viewer-loading[hidden],.td-job[hidden] { display:none !important; }
.td-stage-footer { min-height:42px; padding-top:9px; padding-bottom:9px; border-top:1px solid var(--line); border-bottom:0; color:var(--muted); font-size:.58rem; }
.td-toast-stack { position:fixed; right:16px; bottom:16px; z-index:80; display:flex; flex-direction:column; gap:7px; }
.td-toast { min-width:250px; max-width:360px; padding:10px 12px; border:1px solid var(--line-strong); border-radius:7px; background:var(--surface-3); color:var(--text); box-shadow:var(--shadow); font-size:.67rem; }
.td-toast.error { border-color:var(--error); }
@media (max-width:1000px) {
  .td-shell { grid-template-columns:64px 310px minmax(0,1fr); }
  .td-sidebar a { justify-content:center; padding:0; font-size:0; }
  .td-sidebar a svg { width:18px; height:18px; }
  .td-sidebar .sidebar-label { display:none; }
  .td-compose { padding:20px 16px 28px; }
  .td-stage { grid-template-rows:auto minmax(400px,1fr) auto; }
}
@media (max-width:680px) {
  .td-topbar { padding:0 12px; }
  .td-brand img { width:144px; }
  .td-brand span,.td-system { display:none; }
  .td-shell { display:flex; flex-direction:column; }
  .td-sidebar { display:none; }
  .td-compose { border-right:0; border-bottom:1px solid var(--line); }
  .td-page-title { margin-bottom:16px; }
  .td-source-preview { height:175px; }
  .td-stage { min-height:72vh; grid-template-rows:auto minmax(440px,1fr) auto; }
  .td-stage-toolbar,.td-stage-footer { padding-left:12px; padding-right:12px; }
}
@media (max-width:390px) {
  .td-brand img { width:128px; }
  .td-download span { display:none; }
  .td-download { width:34px; padding:0; }
}