/* QY platform design system. Existing routes and accessible shell mechanics
   are retained; this file owns the product's visual language and effects.
   Stored theme keys remain compatible with saved preferences. */
:root {
  --font-sans: Geist, "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  --gutter: clamp(16px, 1.8vw, 28px);
}
body { font-family: var(--font-sans); line-height: 1.6; }
.sidebar { padding-top: 12px; }
.sb-head { padding-bottom: 16px; }
.sb-brand strong { letter-spacing: .015em; }
.sb-label { font-size: 11px; letter-spacing: .06em; }
.sb-item { font-size: 13px; }
.sb-child { font-size: 12.5px; }
.sb-app.is-current > .sb-app-toggle { background: var(--sidebar-accent); }
.sb-submenu { margin-top: 5px; margin-bottom: 10px; }
.sb-foot { background: var(--sidebar); }
.sb-user .avatar { border-radius: 9px; }
.main { min-width: 0; }
.topbar { border-bottom-color: var(--border); padding-inline: 16px; container: toolbar / inline-size; }
.topbar .crumb { font-weight: 500; color: var(--muted-foreground); }
.console-palette-trigger { background: var(--muted); box-shadow: none; }
@container toolbar (max-width: 720px) {
  .console-palette-trigger { width: 32px; padding: 0; justify-content: center; border: 0; background: transparent; }
  .console-palette-trigger > span, .console-palette-trigger kbd { display: none; }
  .topbar .crumb { max-width: 90px; }
}
.content { padding-top: 20px; container: workspace / inline-size; }
.page { gap: 20px; }
.page-head { padding: 0; align-items: center; min-height: 44px; }
.page > .page-title { padding-top: 0; }
.page-title { font-size: clamp(22px, 1.65vw, 26px); letter-spacing: -.025em; line-height: 1.4; }
.page-tip { line-height: 1.75; margin-top: 6px; color: var(--muted-foreground); }
.card { padding: 22px; box-shadow: var(--shadow-xs); }
.card.steward-chat, .card.ai-model-card, .card.ai-tests-card,
.card.ai-knowledge-card, .card.files-list { padding: 0; }
.card-title { font-size: 14px; font-weight: 600; margin-bottom: 16px; }
.card > .page-head:first-child { margin-bottom: 16px; }
.page :is(a.link, .workspace-task-name a, .home-todo-text a), .todos-bar a {
  text-decoration: none; text-underline-offset: 3px;
}
.page :is(a.link, .workspace-task-name a):hover, .todos-bar a:hover { text-decoration: underline; }
.btn { min-height: 36px; padding-inline: 13px; border-color: var(--border); }
.btn-primary, .btn.ok { border-color: transparent; }
.btn-ghost { border-color: transparent; }
.btn-sm { min-height: 30px; padding-inline: 10px; }
.btn-row, .actions { gap: 8px; }
.field { margin-bottom: 16px; }
.field > :is(span, label) { font-size: 12.5px; }
.form-grid { gap: 4px 20px; }
.field :is(input, select, textarea), .filter-bar :is(input, select) { box-shadow: none; }
.field :is(input, select, textarea):focus, .filter-bar :is(input, select):focus {
  border-color: var(--ring);
}
.filter-bar { padding-bottom: 16px; margin-bottom: 0; align-items: center; }
.filter-bar input[type=text] { max-width: 400px; }
.tbl-scroll { border: 1px solid var(--border); }
.tbl { font-size: 13px; }
.tbl th { background: var(--muted); font-size: 11.5px; font-weight: 500; padding: 10px 12px; }
.tbl td { padding: 12px; line-height: 1.65; }
.tbl :is(.num, .mono), .tbl .badge { white-space: nowrap; }
.tbl .link { font-weight: 500; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .empty { height: auto; padding: 40px 18px; }
.table-sort-link { gap: 5px; }
.stat-grid { gap: 14px; }
.stat { background: var(--card); padding: 18px; gap: 12px; }
.stat .stat-num { font-size: clamp(22px, 1.8vw, 28px); letter-spacing: -.035em; }
.stat .stat-num small { display: inline-block; font-size: 11px; color: var(--muted-foreground); }
.asset-summary-head { margin-bottom: 12px; }
.asset-summary-head .card-title { margin-bottom: 0; }
.asset-status-summary { margin-top: 12px; font-size: 12px; color: var(--muted-foreground); }
.procurement-summary .card { padding: 18px; }
.procurement-summary strong { font-size: 26px; letter-spacing: -.03em; }
.empty { padding: 40px 16px; font-size: 13px; }
.toast { font-size: 13px; }
/* Responsive to the actual work area, including either resizable side panel. */
@container workspace (max-width: 880px) {
  .stat-grid, .stat-grid.asset-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-grid, .admin-grid, .ai-settings-grid, .ai-knowledge-grid { grid-template-columns: minmax(0, 1fr); }
  .ai-knowledge-grid > form { border-right: 0; border-bottom: 1px solid var(--border); }
}
@container workspace (max-width: 640px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .steward-layout { grid-template-columns: minmax(0, 1fr); }
  .steward-history { max-height: 180px; }
  .steward-conversations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .procurement-summary { grid-template-columns: minmax(0, 1fr); }
  .ai-setting-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (min-width: 768px) {
  /* Keep long ledgers legible rather than compressing names into tiny columns. */
  #asset-ledger { min-width: 1040px; }
  .members-table { min-width: 1040px; }
  .console-record-wrap { overflow-x: auto; }
}
/* A quieter, continuous personal task panel; resize and collapse stay available. */
.todos-bar { margin-right: 8px; padding: 18px 16px 12px; }
.todos-bar-head { min-height: 32px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.todos-bar-head h2 { font-size: 13px; }
.todos-bar-head h2 .badge { background: var(--muted); color: var(--muted-foreground); }
.todos-bar-body { padding-top: 12px; }
.todos-bar-body > .page-tip { text-align: center; padding: 28px 8px; font-size: 12px; }
.todos-bar .todo-row { padding-block: 14px; }
.home-todo-text { font-size: 13px; line-height: 1.75; }
.todos-bar-foot { font-size: 12px; padding-top: 12px; }
.todos-bar-resize { left: 0; width: 5px; }
.file-options-panel { z-index: 60; border-radius: 10px; padding: 5px; box-shadow: var(--shadow-lg); }
.file-options-panel :is(a, button) { border-radius: 6px; }
.file-dialog { box-shadow: var(--shadow-lg); border-radius: 14px; }
.notebook-editor { max-width: 100%; }
.notebook-editor textarea { font-size: 14px; line-height: 1.9; }
.todo-input { padding: 22px; }
.todo-row { line-height: 1.75; }
/* Conversation surfaces use the same headers, inputs and quiet suggestion cards. */
.steward-heading { margin-bottom: 0; }
.steward-layout { grid-template-columns: minmax(170px, 22%) minmax(0, 1fr); }
.steward-history { padding: 12px; gap: 12px; }
.steward-chat-head { padding: 14px 20px; background: color-mix(in oklab, var(--muted) 45%, var(--card)); }
.steward-chat-head h2 { font-size: 14px; font-weight: 600; }
.steward-messages { padding: 24px; min-height: 340px; }
.steward-empty h2 { font-size: 20px; }
.steward-suggestions .btn { background: var(--muted); box-shadow: none; min-height: 42px; }
.steward-composer { padding: 16px 20px; }
.steward-composer textarea { border-radius: 10px; padding: 12px; background: var(--card); font-size: 13px; }
.steward-conversation-menu { z-index: 60; box-shadow: var(--shadow-lg); }
@container workspace (max-width: 640px) {
  .steward-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .content { padding: 18px 16px 32px; }
  .page { gap: 16px; }
  .topbar { padding-inline: 8px; }
  .card, .todo-input { padding: 16px; }
  .page-title { font-size: 22px; }
  .tbl-scroll.console-record-wrap { border: 0; border-radius: 0; }
  .console-record-table :is(.num, .mono) { white-space: normal; }
  .console-record-table .empty { padding: 24px 0 !important; }
  .steward-messages { padding: 16px; min-height: 300px; }
  .steward-chat-head, .steward-composer { padding: 14px 16px; }
  .steward-suggestions { grid-template-columns: minmax(0, 1fr); }
}
@media (pointer: coarse) {
  .btn, .btn-sm { min-height: 44px; }
  .steward-suggestions .btn { min-height: 44px; }
}
@media (max-width: 480px) and (pointer: coarse) {
  .topbar { height: auto; min-height: 48px; padding-block: 4px; align-items: flex-start; }
  .topbar .lft { flex: none; }
  .topbar .crumb { display: none; }
  .topbar .rgt { flex: 1; min-width: 0; flex-wrap: wrap; justify-content: flex-end; gap: 3px; }
  .topbar .console-palette-trigger { width: 44px; flex: none; }
  .topbar #preset-select { width: 62px; }
}
@media print {
  .content { container-type: normal; }
  .tbl-scroll { border: 0; }
  .tbl { min-width: 0 !important; }
}

/* Surface system: soft depth, a thin inner highlight and theme-aware glass. */
:root {
  --surface-glass: color-mix(in oklab, var(--card) 82%, transparent);
  --surface-edge: color-mix(in oklab, var(--border) 86%, transparent);
  --surface-highlight: oklch(1 0 0 / .8);
  --surface-shadow: 0 2px 5px oklch(.25 .025 262 / .025), 0 12px 30px -20px oklch(.25 .025 262 / .18);
  --surface-hover-shadow: 0 3px 8px oklch(.25 .025 262 / .04), 0 18px 38px -22px oklch(.25 .025 262 / .22);
  --orb-tint-rgb: .35 .52 .88;
  --orb-color: oklch(.65 .14 260);
}
html.dark {
  --surface-glass: color-mix(in oklab, var(--card) 78%, transparent);
  --surface-highlight: oklch(1 0 0 / .055);
  --surface-shadow: 0 2px 8px oklch(0 0 0 / .12), 0 14px 36px -22px oklch(0 0 0 / .4);
  --surface-hover-shadow: 0 4px 14px oklch(0 0 0 / .18), 0 20px 40px -22px oklch(0 0 0 / .5);
  --orb-tint-rgb: .48 .64 .97;
}
html[data-theme-preset=tangerine] { --orb-tint-rgb: .93 .55 .32; --orb-color: oklch(.72 .14 45); }
.shell { background: radial-gradient(ellipse at 8% 0%, color-mix(in oklab, var(--chart-1) 5%, var(--sidebar)), var(--sidebar) 62%); }
.main { background: radial-gradient(ellipse at 100% 0%, color-mix(in oklab, var(--orb-color) 4%, var(--background)), var(--background) 55%); }
.topbar, .topbar.scrolled { background: color-mix(in oklab, var(--background) 83%, transparent); }
.card, .stat { border-color: var(--surface-edge); box-shadow: inset 0 1px 0 var(--surface-highlight), var(--surface-shadow); }
.card { transition: border-color 180ms var(--ease-out), box-shadow 220ms var(--ease-out); }
.stat { background: linear-gradient(145deg, var(--card), color-mix(in oklab, var(--orb-color) 3%, var(--card))); }
.sb-item.active, .sb-item[aria-current=page] { box-shadow: inset 0 1px 0 var(--surface-highlight), var(--shadow-sm); }
.btn { position: relative; transition: transform 140ms var(--ease-out), box-shadow 180ms var(--ease-out), border-color 180ms var(--ease-out), background-color 180ms var(--ease-out); }
.btn-primary { background-image: linear-gradient(180deg, oklch(1 0 0 / .08), transparent); box-shadow: inset 0 1px 0 oklch(1 0 0 / .15), 0 3px 6px -4px var(--primary); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.btn:focus-visible { box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 12%, transparent); }
.field :is(input, select, textarea):focus-visible { box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 9%, transparent); }
.badge { box-shadow: inset 0 1px 0 var(--surface-highlight); }
.file-options-panel, .steward-conversation-menu { background: var(--popover); border-color: var(--border-strong); }
dialog { border-color: var(--border-strong); box-shadow: inset 0 1px 0 var(--surface-highlight), var(--shadow-lg); }
dialog[open]:not(.task-helper-drawer) { animation: premium-modal-in 220ms var(--ease-out) both; }
dialog::backdrop { background: color-mix(in oklab, var(--scrim) 85%, transparent); }
/* Glass stays on bounded UI surfaces. Ledger cells remain opaque and readable. */
@supports (backdrop-filter: blur(12px)) {
  .topbar, .topbar.scrolled { backdrop-filter: blur(16px) saturate(125%); }
  .console-palette, .file-options-panel, .steward-conversation-menu { background: var(--surface-glass); backdrop-filter: blur(20px) saturate(130%); }
  dialog::backdrop { backdrop-filter: blur(5px); }
}
@media (hover: hover) and (pointer: fine) {
  .card:hover, .stat:hover { border-color: var(--border-strong); box-shadow: inset 0 1px 0 var(--surface-highlight), var(--surface-hover-shadow); }
  .btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-md); }
  .btn:active:not(:disabled) { transform: translateY(1px) scale(.98); }
  .steward-suggestions .btn:hover { border-color: color-mix(in oklab, var(--orb-color) 35%, var(--border)); background: color-mix(in oklab, var(--orb-color) 6%, var(--card)); }
}
/* A small spatial illustration in the overview and the empty AI conversation. */
.premium-hero { position: relative; isolation: isolate; min-height: 190px; padding: 28px 30px; overflow: hidden; border: 1px solid var(--surface-edge); border-radius: 14px; background: linear-gradient(115deg, var(--card) 10%, color-mix(in oklab, var(--orb-color) 8%, var(--card))); box-shadow: inset 0 1px 0 var(--surface-highlight), var(--surface-shadow); }
.premium-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 85% 40%, color-mix(in oklab, var(--orb-color) 11%, transparent), transparent 60%); pointer-events: none; }
.premium-hero-copy { position: relative; z-index: 1; max-width: calc(100% - 180px); }
.premium-eyebrow { display: block; margin-bottom: 10px; font-size: 10.5px; font-weight: 500; letter-spacing: .12em; color: var(--muted-foreground); }
.premium-hero .page-title { font-size: clamp(24px, 2vw, 30px); letter-spacing: -.04em; }
.premium-hero .workspace-overview-date { margin-top: 16px; background: color-mix(in oklab, var(--card) 60%, transparent); font-size: 10.5px; padding: 5px 9px; }
.premium-orb { position: relative; display: block; width: 230px; height: 180px; pointer-events: none; flex: none; }
.premium-hero > .premium-orb { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); }
.premium-orb canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.premium-orb[data-orb-rendered] canvas { opacity: 1; }
.premium-orb-fallback { position: absolute; width: 110px; height: 110px; top: 35px; left: calc(50% - 55px); border-radius: 50%; background: radial-gradient(circle at 30% 22%, oklch(1 0 0 / .85), transparent 28%), radial-gradient(circle at 36% 28%, color-mix(in oklab, var(--orb-color) 65%, white), var(--orb-color) 45%, color-mix(in oklab, var(--orb-color) 45%, black) 90%); box-shadow: inset -14px -16px 28px oklch(0 0 0 / .18), 0 15px 30px -15px color-mix(in oklab, var(--orb-color) 40%, transparent); }
.premium-orb[data-orb-rendered] .premium-orb-fallback { opacity: 0; }
.premium-orb-ring { position: absolute; width: 174px; height: 66px; left: calc(50% - 87px); top: 57px; border: 1px solid color-mix(in oklab, var(--orb-color) 26%, transparent); border-radius: 50%; transform: rotate(-26deg); }
.premium-orb-ring::after { content: ''; position: absolute; top: 10px; right: 18px; width: 5px; height: 5px; background: var(--orb-color); border: 2px solid color-mix(in oklab, var(--card) 70%, transparent); border-radius: 50%; box-shadow: 0 0 12px color-mix(in oklab, var(--orb-color) 45%, transparent); }
.steward-empty { position: relative; padding-top: 0; }
.steward-empty > .premium-orb { width: 170px; height: 120px; margin: -6px auto 0; }
.steward-empty .premium-orb-fallback { width: 74px; height: 74px; top: 23px; left: calc(50% - 37px); }
.steward-empty .premium-orb-ring { width: 120px; height: 44px; left: calc(50% - 60px); top: 38px; }
.steward-empty h2 { margin-top: 0; }
.steward-messages:has(.steward-empty) { min-height: 400px; }
/* Reveal is progressive enhancement: content is visible before and without JS.
   Opacity-only entrances keep fixed-position help and menus correctly anchored. */
.ui-surface-enter { animation: premium-surface-in 520ms var(--ease-out) both; }
@keyframes premium-surface-in { from { opacity: .35; } to { opacity: 1; } }
@keyframes premium-modal-in { from { opacity: .4; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
html.ui-theme-changing *, html.ui-theme-changing *::before, html.ui-theme-changing *::after { transition: none !important; }
@container workspace (max-width: 650px) {
  .premium-hero { padding: 24px; min-height: 175px; }
  .premium-hero-copy { max-width: calc(100% - 125px); }
  .premium-hero > .premium-orb { width: 160px; height: 140px; right: 0; }
  .premium-hero > .premium-orb .premium-orb-fallback { width: 88px; height: 88px; top: 26px; left: calc(50% - 44px); }
  .premium-hero > .premium-orb .premium-orb-ring { width: 140px; height: 50px; left: calc(50% - 70px); top: 45px; }
}
@container workspace (max-width: 430px) {
  .premium-hero { padding: 22px 20px; }
  .premium-hero-copy { max-width: calc(100% - 60px); }
  .premium-hero > .premium-orb { width: 130px; height: 130px; right: -28px; opacity: .45; z-index: -1; }
  .premium-hero .page-tip { max-width: 250px; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-surface-enter, dialog[open] { animation: none !important; }
  .btn:hover:not(:disabled), .btn:active:not(:disabled) { transform: none; }
}
@media print {
  .premium-orb { display: none; }
  .premium-hero { box-shadow: none; background: transparent; min-height: 0; }
  .premium-hero-copy { max-width: none; }
  .ui-surface-enter { animation: none; opacity: 1; }
}

/* New visual direction: midnight navigation, pearl surfaces and aurora accents. */
:root {
  --header-h: 60px;
  --radius: 14px; --radius-panel: 22px; --radius-md: 10px;
  --sidebar: oklch(.205 .035 278); --sidebar-foreground: oklch(.86 .025 275);
  --sidebar-accent: oklch(.3 .055 280); --sidebar-accent-foreground: oklch(.98 .005 280);
  --sidebar-border: oklch(1 0 0 / .10);
  --background: oklch(.983 .005 280); --foreground: oklch(.26 .035 280);
  --card: oklch(1 0 0); --card-foreground: var(--foreground); --popover: var(--card);
  --primary: oklch(.55 .205 291); --primary-foreground: oklch(.99 .003 280);
  --secondary: oklch(.959 .013 280); --secondary-foreground: oklch(.34 .05 280);
  --muted: oklch(.962 .009 280); --muted-foreground: oklch(.52 .033 277);
  --faint-foreground: oklch(.63 .026 277); --accent: oklch(.949 .021 285); --accent-foreground: var(--foreground);
  --border: oklch(.924 .014 280); --border-strong: oklch(.848 .034 284); --input: oklch(.89 .024 280);
  --ring: oklch(.62 .185 291); --chart-1: oklch(.6 .18 291); --chart-2: oklch(.7 .13 245);
  --orb-color: oklch(.67 .16 290); --orb-tint-rgb: .57 .43 .94;
  --surface-edge: color-mix(in oklab, var(--border) 85%, transparent);
  --surface-shadow: 0 2px 4px oklch(.3 .04 280 / .02), 0 12px 32px -20px oklch(.35 .055 285 / .22);
  --surface-hover-shadow: 0 3px 6px oklch(.3 .04 280 / .04), 0 20px 42px -24px oklch(.35 .055 285 / .3);
}
html.dark {
  --sidebar: oklch(.175 .027 278); --sidebar-foreground: oklch(.84 .025 275);
  --sidebar-accent: oklch(.285 .05 282); --background: oklch(.215 .027 279);
  --foreground: oklch(.945 .012 278); --card: oklch(.252 .029 280); --popover: oklch(.265 .033 280);
  --primary: oklch(.7 .16 293); --primary-foreground: oklch(.18 .03 280);
  --secondary: oklch(.3 .032 280); --secondary-foreground: var(--foreground);
  --muted: oklch(.295 .03 280); --muted-foreground: oklch(.72 .025 276);
  --faint-foreground: oklch(.6 .023 276); --accent: oklch(.32 .049 284);
  --border: oklch(1 0 0 / .085); --border-strong: oklch(.62 .065 285 / .4); --input: oklch(1 0 0 / .14);
  --ring: oklch(.72 .15 291); --orb-tint-rgb: .66 .55 .99;
}
html[data-theme-preset=tangerine] {
  --sidebar: oklch(.235 .022 258); --sidebar-foreground: oklch(.88 .015 250);
  --sidebar-accent: oklch(.325 .033 258); --background: oklch(.982 .006 75); --foreground: oklch(.29 .025 258);
  --primary: oklch(.56 .13 65); --primary-foreground: oklch(.99 .008 80);
  --secondary: oklch(.955 .014 75); --secondary-foreground: oklch(.36 .035 65);
  --muted: oklch(.96 .01 75); --muted-foreground: oklch(.52 .024 258);
  --accent: oklch(.946 .022 75); --border: oklch(.918 .016 75); --border-strong: oklch(.84 .036 70); --input: oklch(.885 .018 75);
  --chart-1: oklch(.65 .13 65); --ring: oklch(.66 .13 65); --orb-color: oklch(.73 .12 65); --orb-tint-rgb: .88 .64 .33;
}
html.dark[data-theme-preset=tangerine] {
  --sidebar: oklch(.18 .022 258); --sidebar-accent: oklch(.285 .033 258); --background: oklch(.22 .025 258);
  --foreground: oklch(.95 .01 75); --card: oklch(.265 .025 258); --popover: oklch(.28 .029 258);
  --primary: oklch(.76 .13 70); --primary-foreground: oklch(.22 .025 65);
  --secondary: oklch(.315 .027 258); --secondary-foreground: var(--foreground);
  --muted: oklch(.305 .025 258); --muted-foreground: oklch(.735 .02 258); --accent: oklch(.335 .038 258);
  --border: oklch(1 0 0 / .095); --border-strong: oklch(.63 .045 70 / .4); --input: oklch(1 0 0 / .14);
}
html[data-theme-preset=jade] {
  --sidebar: oklch(.956 .024 159); --sidebar-foreground: oklch(.34 .035 165);
  --sidebar-accent: oklch(.914 .043 159); --sidebar-accent-foreground: oklch(.29 .04 165);
  --sidebar-border: oklch(.865 .035 159);
  --background: oklch(.989 .004 159); --foreground: oklch(.29 .025 165);
  --primary: oklch(.465 .09 163); --primary-foreground: oklch(.99 .005 165);
  --jade-button: oklch(.86 .067 159); --jade-button-foreground: oklch(.29 .045 165);
  --secondary: oklch(.957 .014 165); --secondary-foreground: oklch(.34 .04 165);
  --muted: oklch(.962 .011 165); --muted-foreground: oklch(.51 .025 165); --faint-foreground: oklch(.62 .022 165);
  --accent: oklch(.947 .024 165); --border: oklch(.925 .016 165); --border-strong: oklch(.84 .039 165); --input: oklch(.887 .025 165);
  --ring: oklch(.6 .13 163); --chart-1: oklch(.59 .13 163); --chart-2: oklch(.71 .10 188);
  --chart-3: oklch(.43 .05 166); --chart-4: oklch(.84 .06 165); --chart-5: oklch(.66 .07 165);
  --orb-color: oklch(.79 .105 159); --orb-tint-rgb: .57 .86 .72;
  --surface-shadow: 0 2px 4px oklch(.3 .03 165 / .02), 0 12px 32px -20px oklch(.35 .04 165 / .14);
  --surface-hover-shadow: 0 3px 6px oklch(.3 .03 165 / .03), 0 20px 42px -24px oklch(.35 .04 165 / .22);
}
html.dark[data-theme-preset=jade] {
  --sidebar: oklch(.17 .022 166); --sidebar-accent: oklch(.28 .035 166);
  --sidebar-foreground: oklch(.88 .018 165); --sidebar-accent-foreground: oklch(.98 .008 165); --sidebar-border: oklch(1 0 0 / .10);
  --background: oklch(.215 .022 166); --foreground: oklch(.95 .009 165);
  --card: oklch(.26 .024 166); --popover: oklch(.275 .027 166);
  --primary: oklch(.73 .13 163); --primary-foreground: oklch(.2 .025 165);
  --secondary: oklch(.31 .027 166); --secondary-foreground: var(--foreground);
  --muted: oklch(.30 .025 166); --muted-foreground: oklch(.73 .023 165); --faint-foreground: oklch(.61 .021 165);
  --accent: oklch(.33 .036 166); --border: oklch(1 0 0 / .09); --border-strong: oklch(.63 .045 165 / .4); --input: oklch(1 0 0 / .14);
  --ring: oklch(.72 .13 163); --chart-1: oklch(.72 .13 163); --chart-3: oklch(.79 .03 166); --chart-4: oklch(.43 .05 165);
  --orb-color: oklch(.72 .14 163); --orb-tint-rgb: .34 .78 .61;
  --surface-shadow: 0 2px 5px oklch(0 0 0 / .13), 0 12px 32px -20px oklch(0 0 0 / .35);
  --surface-hover-shadow: 0 3px 7px oklch(0 0 0 / .17), 0 20px 42px -24px oklch(0 0 0 / .45);
}
html[data-theme-preset=jade] .sidebar :is(.sb-label, .sb-item .i, .sb-empty, .file-nav-empty, .sb-points-label, .sb-user .who span) { color: oklch(.72 .022 165); }
html[data-theme-preset=jade] .sidebar .sb-nav-dot { background: oklch(.68 .028 165); }
html[data-theme-preset=jade] .sidebar .sb-child.active .sb-nav-dot { background: oklch(.92 .025 165); }
html[data-theme-preset=jade] .sidebar .sb-item.active .i { color: oklch(.95 .01 165); }
/* Light mint navigation and actions; keep dark ink for readable links and labels. */
html:not(.dark)[data-theme-preset=jade] .sidebar :is(.sb-brand strong, .sb-item .i) { color: var(--sidebar-foreground); }
html:not(.dark)[data-theme-preset=jade] .sidebar :is(.sb-label, .sb-empty, .file-nav-empty, .sb-points-label, .sb-user .who span) { color: oklch(.48 .028 165); }
html:not(.dark)[data-theme-preset=jade] .sidebar :is(.sb-item:hover, .file-nav-link:hover, .file-nav-link.active, .file-nav-icon:hover, .file-nav-toggle:hover, .file-nav-chevron:hover, .sb-user:hover, .sb-user .quit:hover) { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
html:not(.dark)[data-theme-preset=jade] .sidebar :is(.sb-item.active, .sb-item[aria-current=page]) { background: linear-gradient(100deg, oklch(.879 .06 159), oklch(.921 .043 159)); color: var(--sidebar-accent-foreground); box-shadow: inset 0 0 0 1px oklch(.76 .06 159 / .22), 0 4px 14px -10px oklch(.5 .08 159 / .2); }
html:not(.dark)[data-theme-preset=jade] .sidebar .sb-app.is-current > .sb-app-toggle { background: oklch(.926 .035 159); color: var(--sidebar-foreground); }
html:not(.dark)[data-theme-preset=jade] .sidebar :is(.sb-submenu, .sb-foot) { border-color: var(--sidebar-border); }
html:not(.dark)[data-theme-preset=jade] .sidebar .sb-nav-dot { background: oklch(.52 .04 165); }
html:not(.dark)[data-theme-preset=jade] .sidebar .sb-child.active .sb-nav-dot { background: var(--primary); }
html:not(.dark)[data-theme-preset=jade] .sidebar .sb-item.active .i { color: var(--sidebar-accent-foreground); }
html:not(.dark)[data-theme-preset=jade] .sidebar .sb-user .avatar { background: var(--sidebar-accent); border-color: var(--sidebar-border); color: var(--sidebar-foreground); }
html:not(.dark)[data-theme-preset=jade] :is(.sidebar .sb-brand .logo, .portal-login .logo) { background: linear-gradient(145deg, oklch(.91 .045 159), var(--jade-button)); color: var(--jade-button-foreground); box-shadow: inset 0 1px 0 oklch(1 0 0 / .5), 0 5px 16px -10px oklch(.5 .08 159 / .25); }
html:not(.dark)[data-theme-preset=jade] :is(.btn-primary, .btn.ok) { background-color: var(--jade-button); color: var(--jade-button-foreground); box-shadow: inset 0 1px 0 oklch(1 0 0 / .4), 0 4px 12px -8px oklch(.5 .08 159 / .25); }
html:not(.dark)[data-theme-preset=jade] .portal-login .login-appearance .icon-btn:hover { background: var(--sidebar-accent); color: var(--sidebar-foreground); }
html:not(.dark)[data-theme-preset=jade] .portal-login .login-frame { border-color: var(--border); box-shadow: 0 30px 90px -35px oklch(.35 .04 165 / .2); }
.shell { background: var(--sidebar); }
.sidebar { background: radial-gradient(ellipse at 30% 0%, color-mix(in oklab, var(--primary) 9%, var(--sidebar)), var(--sidebar) 48%); padding: 18px 12px 12px; color: var(--sidebar-foreground); }
.sidebar .sb-head { padding-bottom: 18px; }
.sidebar .sb-brand { gap: 11px; height: 46px; }
.sidebar .sb-brand strong { color: oklch(.97 .008 275); font-size: 15px; letter-spacing: .025em; }
.sidebar .sb-brand .logo { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(145deg, color-mix(in oklab, var(--primary) 80%, white), var(--primary)); color: white; box-shadow: inset 0 1px 0 oklch(1 0 0 / .25), 0 5px 14px -6px var(--primary); }
.sidebar .sb-label { color: oklch(.68 .033 275); font-size: 10.5px; letter-spacing: .1em; }
.sidebar .sb-item { color: var(--sidebar-foreground); height: 37px; border-radius: 9px; font-size: 12.5px; }
.sidebar .sb-item .i { color: oklch(.7 .03 275); }
.sidebar .sb-item:hover { color: white; background: oklch(1 0 0 / .055); }
.sidebar .sb-item.active, .sidebar .sb-item[aria-current=page] { color: white; background: linear-gradient(100deg, color-mix(in oklab, var(--primary) 62%, var(--sidebar)), color-mix(in oklab, var(--primary) 35%, var(--sidebar))); box-shadow: inset 0 0 0 1px oklch(1 0 0 / .07), 0 4px 14px -10px var(--primary); }
.sidebar .sb-item.active .i { color: oklch(.95 .012 275); }
.sidebar .sb-app.is-current > .sb-app-toggle { color: white; background: oklch(1 0 0 / .045); }
.sidebar .sb-submenu { border-color: oklch(1 0 0 / .12); }
.sidebar .sb-nav-dot { background: oklch(.66 .035 275); }
.sidebar .sb-child.active .sb-nav-dot { background: oklch(.92 .035 285); }
.sidebar :is(.sb-empty, .file-nav-empty, .sb-points-label, .sb-user .who span) { color: oklch(.7 .025 275); }
.sidebar :is(.file-nav-link, .file-nav-toggle, .file-nav-icon, .file-nav-chevron, .file-nav-heading) { color: var(--sidebar-foreground); }
.sidebar .file-nav-link:is(:hover, .active) { background: oklch(1 0 0 / .08); color: white; }
.sidebar :is(.file-nav-icon, .file-nav-toggle, .file-nav-chevron):hover { background: oklch(1 0 0 / .1); color: white; }
.sidebar .sb-foot { padding-top: 12px; background: transparent; border-color: oklch(1 0 0 / .1); }
.sidebar .sb-user:hover { background: oklch(1 0 0 / .04); }
.sidebar .sb-user .avatar { background: oklch(1 0 0 / .08); border-color: oklch(1 0 0 / .12); color: white; }
.sidebar .sb-account-points { color: var(--sidebar-foreground); }
.sidebar .sb-user .quit { color: var(--sidebar-foreground); }
@media (min-width: 768px) {
  .shell.sb-collapsed .sidebar { padding-inline: 6px; }
  .shell.sb-collapsed .sb-brand .logo { width: 28px; height: 28px; }
}
.main { margin: 12px 12px 12px 0; height: calc(100dvh - 24px); border-radius: 20px; box-shadow: 0 8px 40px -20px oklch(0 0 0 / .25); }
.topbar { padding-inline: 22px; border-bottom-color: var(--border); }
.topbar .icon-btn { border-radius: 10px; }
.topbar .crumb { color: var(--foreground); font-size: 12px; letter-spacing: .01em; }
.console-palette-trigger { height: 34px; border-radius: 10px; background: var(--card); }
.topbar .select { height: 34px; border-radius: 10px; font-size: 12px; }
.content { padding-top: 24px; }
.page { gap: 22px; }
.page-title { font-weight: 650; letter-spacing: -.035em; }
.card, .stat { border-radius: 14px; }
.card-title { letter-spacing: -.01em; }
.btn { height: 38px; min-height: 38px; border-radius: 10px; font-size: 12.5px; }
.btn-sm { height: 31px; min-height: 31px; border-radius: 8px; font-size: 11.5px; }
.btn-primary { background-color: var(--primary); color: var(--primary-foreground); box-shadow: inset 0 1px 0 oklch(1 0 0 / .18), 0 4px 12px -6px color-mix(in oklab, var(--primary) 65%, transparent); }
.field :is(input, select, textarea), .filter-bar :is(input, select) { border-radius: 10px; }
.tbl-scroll { border-radius: 11px; }
.tbl th { background: color-mix(in oklab, var(--muted) 75%, var(--card)); font-size: 11.5px; }
.badge { border-radius: 7px; }
.todos-bar { margin: 12px 12px 12px 0; border-radius: 18px; border: 1px solid var(--surface-edge); box-shadow: var(--surface-shadow); }
.todos-bar-head h2 { font-size: 13px; letter-spacing: .015em; }
.premium-hero { border-radius: 17px; background: radial-gradient(ellipse at 90% 10%, color-mix(in oklab, var(--orb-color) 14%, transparent), transparent 75%), linear-gradient(120deg, var(--card), color-mix(in oklab, var(--orb-color) 5%, var(--card))); }
.premium-eyebrow { font-size: 10px; letter-spacing: .16em; color: var(--primary); }
.premium-hero .page-title { font-weight: 650; }
.workspace-approval-group { background: color-mix(in oklab, var(--muted) 32%, var(--card)); border-radius: 11px; }
.steward-chat-head { background: color-mix(in oklab, var(--muted) 45%, var(--card)); }
.steward-suggestions .btn { background: var(--card); border-color: var(--border); }
/* The entry screen uses the same pearl surface and indigo framing. */
.portal-login { background: radial-gradient(ellipse at 30% 0%, color-mix(in oklab, var(--primary) 18%, var(--sidebar)), var(--sidebar) 65%); }
.portal-login .login-wordmark, .portal-login .login-footer { color: var(--sidebar-foreground); }
.portal-login .logo { background: linear-gradient(145deg, color-mix(in oklab, var(--primary) 80%, white), var(--primary)); color: white; border-color: oklch(1 0 0 / .15); box-shadow: 0 5px 16px -8px var(--primary); }
.portal-login .login-appearance .icon-btn { color: var(--sidebar-foreground); }
.portal-login .login-appearance .icon-btn:hover { background: oklch(1 0 0 / .08); color: white; }
.portal-login .login-frame { border-radius: 20px; border-color: oklch(1 0 0 / .12); box-shadow: 0 30px 90px -35px oklch(0 0 0 / .6); }
.portal-login .login-context { background: radial-gradient(ellipse at 0% 0%, color-mix(in oklab, var(--primary) 12%, transparent), transparent 75%), var(--muted); }
.portal-login .portal-eyebrow { color: var(--primary); letter-spacing: .1em; }
@media (max-width: 767px) {
  .main { margin: 0; height: auto; min-height: 100dvh; border-radius: 0; }
  .sidebar { padding: 16px 12px; }
  .topbar { padding-inline: 8px; }
  .content { padding: 18px 16px 32px; }
  .page { gap: 16px; }
  .card { border-radius: 13px; }
  .btn-sm { min-height: 34px; }
}
@media (pointer: coarse) { .btn, .btn-sm { min-height: 44px; } }
@media print {
  .main { margin: 0; height: auto; box-shadow: none; border-radius: 0; }
  .card, .stat { box-shadow: none; }
}