/* Classing mobile palette, 20/28 px islands and pill controls. */
body[data-ui="classing"] {
  --canvas:#f5f7f6; --surface:#fcfdfc; --surface-2:#eff2f1; --ink:#171a1e; --muted:#687078; --subtle:#899097;
  --blue:#3e5ed7; --blue-deep:#304cb8; --teal:#2e795a; --amber:#b95b19; --red:#b3261e;
  --border:#dde2e1; --border-strong:#bcc5c2; --sidebar:#fcfdfc; --sidebar-muted:#687078; --sidebar-line:#dde2e1;
  --shadow:0 8px 28px rgba(23,26,30,.055); --radius-control:18px; --radius-panel:28px;
  --md-primary:var(--blue); --md-on-primary:#fff; --md-primary-container:#e6ebff; --md-on-primary-container:#10245e;
  --md-secondary:#687078; --md-on-secondary:#fff; --md-secondary-container:#e8edec; --md-on-secondary-container:var(--ink);
  --md-tertiary:#745bbe; --md-tertiary-container:#ece6f7; --md-on-tertiary-container:#37265a; --md-error:var(--red);
  --md-surface:var(--canvas); --md-surface-container-lowest:#fff; --md-surface-container-low:var(--surface);
  --md-surface-container:var(--surface-2); --md-surface-container-high:#e8edeb; --md-surface-container-highest:#dfe6e3;
  --md-on-surface:var(--ink); --md-on-surface-variant:var(--muted); --md-outline:var(--border-strong); --md-outline-variant:var(--border);
  --md-inverse-surface:#252a2e; --md-inverse-on-surface:#f1f4f3;
  font-family:system-ui,-apple-system,"Noto Sans SC","Microsoft YaHei",sans-serif;
}
body.dark[data-ui="classing"] {
  color-scheme:dark; --canvas:#111417; --surface:#1c2024; --surface-2:#252a2e; --ink:#f1f4f3; --muted:#b8c0c4; --subtle:#8d969b;
  --blue:#b8c4ff; --blue-deep:#d0d8ff; --border:#3b4247; --border-strong:#596267; --sidebar:#1c2024; --sidebar-muted:#b8c0c4;
  --md-on-primary:#10245e; --md-primary-container:#253c82; --md-on-primary-container:#dfe5ff;
  --md-secondary-container:#333c3d; --md-surface-container-lowest:#1c2024; --md-surface-container-high:#2c3136; --md-surface-container-highest:#353c42;
}
body[data-ui="classing"] .sidebar { color:var(--ink); background:var(--surface); border-color:var(--border); }
body[data-ui="classing"] .workspace-mark,body[data-ui="classing"] .nav-icon { color:var(--muted); background:var(--surface-2); border-radius:12px; }
body[data-ui="classing"] .workspace-switcher,body[data-ui="classing"] .account-chip { background:var(--surface-2); border-color:transparent; border-radius:20px; }
body[data-ui="classing"] .nav-item { border-radius:18px; color:var(--muted); padding:13px 16px; }
body[data-ui="classing"] .nav-item.active { color:var(--ink); background:var(--md-secondary-container); box-shadow:none; }
body[data-ui="classing"] .nav-item:hover { background:var(--surface-2); color:var(--ink); }
body[data-ui="classing"] .topbar { background:color-mix(in srgb,var(--canvas) 92%,transparent); border-color:var(--border); }
body[data-ui="classing"] .panel,body[data-ui="classing"] .runtime-panel,body[data-ui="classing"] .metric-card,body[data-ui="classing"] .auth-card {
  border:0; background:var(--surface); border-radius:28px; box-shadow:var(--shadow);
}
body[data-ui="classing"] .runtime-hero,body[data-ui="classing"] .page-heading { background:transparent; border:0; box-shadow:none; }
body[data-ui="classing"] h1,body[data-ui="classing"] h2,body[data-ui="classing"] h3 { letter-spacing:-.035em; }
body[data-ui="classing"] .primary-button,body[data-ui="classing"] .tonal-button,body[data-ui="classing"] .danger-button,body[data-ui="classing"] .quiet-button { border-radius:999px; min-height:44px; padding:10px 20px; box-shadow:none; }
body[data-ui="classing"] .primary-button { background:var(--md-primary); color:var(--md-on-primary); border:0; }
body[data-ui="classing"] .tonal-button { background:var(--surface-2); color:var(--ink); border:0; }
body[data-ui="classing"] .danger-button { color:var(--red); background:color-mix(in srgb,var(--red) 8%,var(--surface)); border:0; }
body[data-ui="classing"] input,body[data-ui="classing"] select,body[data-ui="classing"] textarea { border-radius:18px; border:1px solid var(--border); color:var(--ink); background:var(--surface); padding:13px 16px; }
body[data-ui="classing"] .auth-shell { background:radial-gradient(ellipse at 10% 8%,#b9d8e822,transparent 55%),var(--canvas); }
body[data-ui="classing"] .auth-story { background:transparent; color:var(--ink); box-shadow:none; }
body[data-ui="classing"] .auth-story h1 { font-size:clamp(30px,4vw,52px); }
body[data-ui="classing"] .auth-links { display:flex; gap:12px; }
body[data-ui="classing"] .auth-links button { flex:1; border-radius:999px; padding:12px; background:var(--surface-2); color:var(--ink); }
body[data-ui="classing"] .consent-row span { display:flex; flex-wrap:wrap; gap:6px; }
body[data-ui="classing"] .consent-row a { font-size:12px; color:var(--blue); }
body[data-ui="classing"] .ai-message { background:transparent; padding:12px 4px; }
body[data-ui="classing"] .ai-message.user { margin-left:15%; justify-self:end; max-width:85%; background:var(--md-secondary-container); border-radius:22px 22px 6px 22px; padding:14px 18px; }
body[data-ui="classing"] .ai-message.assistant { margin-right:0; }
body[data-ui="classing"] .material-fab { border-radius:999px; background:var(--md-primary); color:var(--md-on-primary); border:0; bottom:74px; box-shadow:var(--shadow); }
#uiModeSwitch { position:fixed; z-index:80; right:18px; bottom:16px; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--ink); padding:10px 16px; box-shadow:var(--shadow); font-size:12px; cursor:pointer; }
.markdown-body table { display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; }
.markdown-body th,.markdown-body td { border:1px solid var(--border); padding:8px 12px; text-align:left; }
.markdown-body th { background:var(--surface-2); }
.markdown-body pre { white-space:pre; overflow:auto; }
@media(prefers-reduced-motion:reduce) { body[data-ui="classing"] *,body[data-ui="classing"] *::before,body[data-ui="classing"] *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
@media(max-width:600px) { body[data-ui="classing"] .runtime-panel { border-radius:24px; padding:18px; } #uiModeSwitch { right:12px; bottom:12px; } }
body[data-ui="classing"] dialog { max-width:min(600px,calc(100vw - 28px)); width:100%; max-height:85vh; overflow:auto; padding:28px; border:0; border-radius:28px; background:var(--surface); color:var(--ink); box-shadow:var(--shadow); }
body[data-ui="classing"] dialog::backdrop { background:rgba(17,20,23,.35); backdrop-filter:blur(4px); }