/* Appearance foundation: primitive -> semantic -> component tokens. */
:root{
  --appearance-primitive-paper-0:#ffffff;
  --appearance-primitive-paper-50:#f1f4f8;
  --appearance-primitive-paper-100:#e9eef5;
  --appearance-primitive-paper-200:#dce3ed;
  --appearance-primitive-ink-950:#080b12;
  --appearance-primitive-ink-900:#0f141d;
  --appearance-primitive-ink-850:#151c27;
  --appearance-primitive-ink-800:#1b2432;
  --appearance-primitive-text-900:#10151d;
  --appearance-primitive-text-700:#465268;
  --appearance-primitive-text-600:#5f6b80;
  --appearance-primitive-dark-text-50:#f4f7fb;
  --appearance-primitive-dark-text-200:#c4cedc;
  --appearance-primitive-dark-text-400:#94a1b4;
  --appearance-primitive-brand-700:#1d6b5d;
  --appearance-primitive-brand-800:#154d44;
  --appearance-primitive-brand-300:#78dfc2;
  --appearance-primitive-brand-200:#7ccdba;
  --appearance-primitive-blue-600:#1769e0;
  --appearance-primitive-blue-300:#7daaff;

  --appearance-bg-canvas:var(--appearance-primitive-paper-50);
  --appearance-bg-surface:var(--appearance-primitive-paper-0);
  --appearance-bg-surface-subtle:var(--appearance-primitive-paper-100);
  --appearance-bg-surface-raised:var(--appearance-primitive-paper-0);
  --appearance-bg-surface-dense:var(--appearance-primitive-paper-0);
  --appearance-bg-glass-shell:rgb(255 255 255 / .78);
  --appearance-bg-glass-readable:rgb(255 255 255 / .94);
  --appearance-fg-primary:var(--appearance-primitive-text-900);
  --appearance-fg-secondary:var(--appearance-primitive-text-700);
  --appearance-fg-muted:var(--appearance-primitive-text-600);
  --appearance-fg-tertiary:#6f7b90;
  --appearance-border-subtle:#d4dce8;
  --appearance-border-strong:#a8b4c6;
  --appearance-action-primary:var(--appearance-primitive-brand-700);
  --appearance-action-primary-hover:var(--appearance-primitive-brand-800);
  --appearance-action-on-primary:#ffffff;
  --appearance-focus-ring:var(--appearance-primitive-blue-600);
  --appearance-overlay-scrim:rgb(9 15 13 / .48);
  --appearance-status-success-bg:#e8f5ef;
  --appearance-status-success-fg:#116943;
  --appearance-status-warning-bg:#fff4d6;
  --appearance-status-warning-fg:#704700;
  --appearance-status-danger-bg:#fff0f1;
  --appearance-status-danger-fg:#a91f2a;
  --appearance-shadow-surface:0 10px 30px rgb(22 26 29 / .10);
  --appearance-shadow-glass:0 18px 50px rgb(22 30 27 / .16),inset 0 1px rgb(255 255 255 / .74);
  --appearance-material-blur-shell:16px;
  --appearance-material-blur-overlay:24px;
  --appearance-noise-opacity:.025;
  --appearance-motion-fast:100ms;
  --appearance-motion-standard:180ms;
  --appearance-motion-emphasis:240ms;
  --appearance-ease-out:cubic-bezier(.16,1,.3,1);

  --appearance-shell-sidebar-bg:#f8fafc;
  --appearance-shell-sidebar-fg:#172033;
  --appearance-shell-sidebar-muted:#66748a;
  --appearance-shell-topbar-bg:var(--appearance-bg-glass-shell);
  --appearance-shell-topbar-border:var(--appearance-border-subtle);
  --appearance-data-panel-bg:var(--appearance-bg-surface-dense);
  --appearance-card-bg:var(--appearance-bg-surface);
  --appearance-card-border:var(--appearance-border-subtle);
  --appearance-button-bg:var(--appearance-bg-surface);
  --appearance-button-fg:var(--appearance-fg-primary);
  --appearance-input-bg:var(--appearance-bg-surface);
  --appearance-input-fg:var(--appearance-fg-primary);
  --appearance-dialog-bg:var(--appearance-bg-surface-raised);
  --appearance-popover-bg:var(--appearance-bg-glass-readable);
  --appearance-popover-border:var(--appearance-border-subtle);
  --appearance-toast-bg:var(--appearance-bg-surface-raised);
  --appearance-focus-shadow:0 0 0 3px color-mix(in srgb,var(--appearance-focus-ring) 22%,transparent);

  --color-canvas:var(--appearance-bg-canvas);
  --color-surface:var(--appearance-bg-surface);
  --color-surface-subtle:var(--appearance-bg-surface-subtle);
  --color-surface-raised:var(--appearance-bg-surface-raised);
  --color-nav:var(--appearance-shell-sidebar-bg);
  --color-nav-hover:#e8edf5;
  --color-border:var(--appearance-border-subtle);
  --color-border-strong:var(--appearance-border-strong);
  --color-text:var(--appearance-fg-primary);
  --color-text-muted:var(--appearance-fg-secondary);
  --color-text-soft:var(--appearance-fg-muted);
  --color-action:var(--appearance-action-primary);
  --color-action-hover:var(--appearance-action-primary-hover);
  --color-focus:var(--appearance-focus-ring);
  --color-success:var(--appearance-status-success-fg);
  --color-success-bg:var(--appearance-status-success-bg);
  --color-warning:var(--appearance-status-warning-fg);
  --color-warning-bg:var(--appearance-status-warning-bg);
  --color-danger:var(--appearance-status-danger-fg);
  --color-danger-bg:var(--appearance-status-danger-bg);
  --bg:var(--appearance-bg-canvas);
  --panel:var(--appearance-bg-surface);
  --panel2:var(--appearance-bg-surface-subtle);
  --line:var(--appearance-border-subtle);
  --muted:var(--appearance-fg-secondary);
  --text:var(--appearance-fg-primary);
  --green:var(--appearance-action-primary);
  --green2:var(--appearance-action-primary-hover);
  --brand-accent:var(--appearance-action-primary);
  --brand-accent-ink:var(--appearance-action-primary-hover);
  --brand-accent-soft:#e7f1ed;
}

html[data-theme="dark"]{
  --appearance-bg-canvas:var(--appearance-primitive-ink-950);
  --appearance-bg-surface:var(--appearance-primitive-ink-900);
  --appearance-bg-surface-subtle:var(--appearance-primitive-ink-850);
  --appearance-bg-surface-raised:var(--appearance-primitive-ink-800);
  --appearance-bg-surface-dense:var(--appearance-primitive-ink-900);
  --appearance-bg-glass-shell:rgb(12 17 25 / .84);
  --appearance-bg-glass-readable:rgb(20 27 39 / .96);
  --appearance-fg-primary:var(--appearance-primitive-dark-text-50);
  --appearance-fg-secondary:var(--appearance-primitive-dark-text-200);
  --appearance-fg-muted:var(--appearance-primitive-dark-text-400);
  --appearance-fg-tertiary:#7f8ca1;
  --appearance-border-subtle:#283244;
  --appearance-border-strong:#46536a;
  --appearance-action-primary:var(--appearance-primitive-brand-300);
  --appearance-action-primary-hover:var(--appearance-primitive-brand-200);
  --appearance-action-on-primary:#07130f;
  --appearance-focus-ring:var(--appearance-primitive-blue-300);
  --appearance-overlay-scrim:rgb(0 0 0 / .68);
  --appearance-status-success-bg:#10271f;
  --appearance-status-success-fg:#8ed9b8;
  --appearance-status-warning-bg:#2b2414;
  --appearance-status-warning-fg:#f1cb76;
  --appearance-status-danger-bg:#321a1d;
  --appearance-status-danger-fg:#ffadb3;
  --appearance-shadow-surface:0 12px 34px rgb(0 0 0 / .34);
  --appearance-shadow-glass:0 22px 64px rgb(0 0 0 / .48),inset 0 1px rgb(255 255 255 / .08);
  --appearance-shell-sidebar-bg:#080b12;
  --appearance-shell-sidebar-fg:#f4f7fb;
  --appearance-shell-sidebar-muted:#a5b1c2;
  --color-nav-hover:#151c28;
  --brand-accent-soft:#173129;
}

html[data-theme="light"]{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
html,body,.app-shell,.app-shell>main,.page-body,.content-area{background:var(--appearance-bg-canvas);color:var(--appearance-fg-primary)}
body{transition:background-color var(--appearance-motion-standard) var(--appearance-ease-out),color var(--appearance-motion-standard) var(--appearance-ease-out)}
:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline-color:var(--appearance-focus-ring);box-shadow:var(--appearance-focus-shadow)}
::selection{background:color-mix(in srgb,var(--appearance-action-primary) 24%,transparent);color:var(--appearance-fg-primary)}

.sidebar{background:var(--appearance-shell-sidebar-bg);color:var(--appearance-shell-sidebar-fg)}
.sidebar .brand strong{color:var(--appearance-shell-sidebar-fg)}
.sidebar .brand small,.sidebar .storage small{color:var(--appearance-shell-sidebar-muted)}
.sidebar .storage{border-color:color-mix(in srgb,var(--appearance-shell-sidebar-fg) 18%,transparent);background:color-mix(in srgb,var(--appearance-shell-sidebar-fg) 7%,transparent);color:var(--appearance-shell-sidebar-muted)}
.topbar{border-color:var(--appearance-shell-topbar-border);background:var(--appearance-shell-topbar-bg);backdrop-filter:saturate(120%) blur(var(--appearance-material-blur-shell));-webkit-backdrop-filter:saturate(120%) blur(var(--appearance-material-blur-shell))}
.button,.icon-btn,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea{border-color:var(--appearance-border-strong);background:var(--appearance-button-bg);color:var(--appearance-button-fg)}
.button.primary{border-color:var(--appearance-action-primary);background:var(--appearance-action-primary);color:var(--appearance-action-on-primary)}
.button.primary:hover{border-color:var(--appearance-action-primary-hover);background:var(--appearance-action-primary-hover);color:var(--appearance-action-on-primary)}
dialog,.analysis-drawer,.settings-shell{border-color:var(--appearance-border-subtle);background:var(--appearance-dialog-bg);color:var(--appearance-fg-primary)}
.project-state-card,.autopilot-card,.upload-panel,.advanced-panel,.batch-stage,.project-overview-summary,.pm-metrics-panel,.project-assets-panel{border-color:var(--appearance-card-border);background:var(--appearance-data-panel-bg);color:var(--appearance-fg-primary)}

.auth-gate{background:var(--appearance-bg-canvas);color:var(--appearance-fg-primary)}
.auth-product-preview{background:linear-gradient(104deg,var(--appearance-bg-surface-subtle) 0 57%,var(--appearance-bg-canvas) 57% 100%)}
.auth-product-preview::before{background:linear-gradient(90deg,color-mix(in srgb,var(--appearance-bg-surface) 38%,transparent),transparent 34%,color-mix(in srgb,var(--appearance-bg-surface) 44%,transparent))}
.auth-brand{color:var(--appearance-fg-primary)}
.auth-brand small,.auth-mobile-brand small,.auth-surface-heading span,.auth-card>p,.auth-card>small,.auth-path,.auth-path p{color:var(--appearance-fg-secondary)}
.auth-work-surface{border-color:var(--appearance-border-subtle);background:color-mix(in srgb,var(--appearance-bg-surface) 82%,transparent);box-shadow:var(--appearance-shadow-glass)}
.auth-surface-status{color:var(--appearance-fg-secondary)}
.auth-surface-status strong,.auth-path span{color:var(--appearance-fg-secondary)}
.auth-form-pane{border-color:var(--appearance-border-subtle);background:var(--appearance-bg-glass-shell);box-shadow:var(--appearance-shadow-glass);backdrop-filter:blur(var(--appearance-material-blur-overlay)) saturate(110%);-webkit-backdrop-filter:blur(var(--appearance-material-blur-overlay)) saturate(110%)}
.auth-card{color:var(--appearance-fg-primary)}
.auth-card label{color:var(--appearance-fg-primary)}
.auth-card input{border-color:var(--appearance-border-strong);background:var(--appearance-bg-glass-readable);color:var(--appearance-fg-primary)}
.auth-card input:focus{border-color:var(--appearance-action-primary);background:var(--appearance-bg-surface);box-shadow:var(--appearance-focus-shadow)}
.auth-switch,.auth-surface-status span,.auth-path b{color:var(--appearance-action-primary)}

.appearance-control{position:relative;z-index:3000;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Noto Sans CJK SC","Source Han Sans SC","Microsoft YaHei",system-ui,sans-serif}
body>.appearance-control{position:fixed;top:max(76px,calc(12px + env(safe-area-inset-top)));right:max(18px,env(safe-area-inset-right))}
.appearance-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:88px;min-height:44px;padding:0 14px;border:1px solid var(--appearance-popover-border);border-radius:999px;background:var(--appearance-popover-bg);color:var(--appearance-fg-primary);box-shadow:var(--appearance-shadow-glass);backdrop-filter:blur(var(--appearance-material-blur-shell)) saturate(120%);-webkit-backdrop-filter:blur(var(--appearance-material-blur-shell)) saturate(120%);cursor:pointer;transition:transform var(--appearance-motion-fast) var(--appearance-ease-out),background-color var(--appearance-motion-fast) var(--appearance-ease-out),border-color var(--appearance-motion-fast) var(--appearance-ease-out)}
.appearance-toggle:hover{background:var(--appearance-bg-surface-raised);border-color:var(--appearance-border-strong)}
.appearance-toggle:active{transform:scale(.97)}
.appearance-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.appearance-toggle span{font-size:13px;font-weight:700;line-height:18px}
.appearance-popover{position:absolute;top:56px;right:0;width:min(320px,calc(100vw - 32px));padding:14px;border:1px solid var(--appearance-popover-border);border-radius:14px;background:var(--appearance-popover-bg);color:var(--appearance-fg-primary);box-shadow:var(--appearance-shadow-glass);backdrop-filter:blur(var(--appearance-material-blur-overlay)) saturate(120%);-webkit-backdrop-filter:blur(var(--appearance-material-blur-overlay)) saturate(120%);transform-origin:top right;animation:appearance-popover-in var(--appearance-motion-emphasis) var(--appearance-ease-out) both}
.appearance-popover-heading{display:grid;gap:2px;margin-bottom:10px;padding:0 2px}
.appearance-popover-heading strong{font-size:15px;line-height:20px}
.appearance-popover-heading span{color:var(--appearance-fg-muted);font-size:12px;line-height:17px}
.appearance-options{display:grid;gap:6px}
.appearance-options label{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr);align-items:start;gap:10px;min-height:52px;padding:9px 10px;border:1px solid transparent;border-radius:10px;color:var(--appearance-fg-primary);cursor:pointer}
.appearance-options label:hover{background:var(--appearance-bg-surface-subtle)}
.appearance-options label:has(input:checked){border-color:color-mix(in srgb,var(--appearance-action-primary) 55%,var(--appearance-border-subtle));background:color-mix(in srgb,var(--appearance-action-primary) 10%,var(--appearance-bg-surface))}
.appearance-options input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--appearance-action-primary)}
.appearance-options span,.appearance-options b,.appearance-options small{display:block}
.appearance-options b{font-size:13px;line-height:18px}
.appearance-options small{margin-top:2px;color:var(--appearance-fg-secondary);font-size:12px;line-height:17px}
.appearance-announcement{min-height:17px;margin:8px 2px 0;color:var(--appearance-fg-muted);font-size:12px;line-height:17px}
@keyframes appearance-popover-in{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .topbar,.auth-form-pane,.appearance-toggle,.appearance-popover{background:var(--appearance-bg-surface-raised);box-shadow:var(--appearance-shadow-surface)}
}

@media (prefers-reduced-transparency:reduce){
  .topbar,.auth-form-pane,.appearance-toggle,.appearance-popover{background:var(--appearance-bg-surface-raised);backdrop-filter:none;-webkit-backdrop-filter:none}
}

@media (prefers-reduced-motion:reduce){
  body,.appearance-toggle{transition:none}
  .appearance-popover{animation:none;transform:none}
}

@media (forced-colors:active){
  .appearance-toggle,.appearance-popover,.appearance-options label{border:1px solid CanvasText;background:Canvas;color:CanvasText;box-shadow:none;forced-color-adjust:auto}
  .appearance-options label:has(input:checked){outline:2px solid Highlight;outline-offset:-2px}
  .topbar,.auth-form-pane{border:1px solid CanvasText;background:Canvas;backdrop-filter:none;-webkit-backdrop-filter:none}
}

@media (max-width:620px){
  body>.appearance-control{top:calc(68px + env(safe-area-inset-top));right:12px}
  .appearance-toggle{min-width:44px;padding:0 12px}
  .appearance-toggle span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}