:root {
  --bg:#0f1217; --bg-elev:#171b22; --bg-soft:#1d232c;
  --border:#262d38; --border-strong:#333c49;
  --text:#e7eaf0; --text-soft:#b3bccb; --text-mute:#a0acbe;
  --accent:#6c9bff; --accent-soft:#1a2740; --accent-ink:#b9ceff;
  --ok:#4cc79b; --ok-soft:#10281f; --warn:#e0b15a; --warn-soft:#2a2313;
  --danger:#f0796f; --danger-soft:#2c1614;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.35);
  --shadow-lg:0 12px 44px rgba(0,0,0,.55);
  --radius:14px; --radius-sm:9px; --radius-xs:5px; --radius-lg:24px; --radius-pill:999px;
  --dur-fast:120ms; --dur-base:150ms; --dur-slow:300ms; --dur-exit:120ms; --dur-enter:300ms; --ease:cubic-bezier(.2,.8,.2,1); --ease-exit:cubic-bezier(.4,0,1,1);
  --glow-line:rgba(108,155,255,.28); --glow-soft:0 0 12px rgba(108,155,255,.35);
  --glow-hard:0 0 18px rgba(108,155,255,.55);
  --nav-h:68px; --maxw:1180px;
  --ui-page-max:1280px; --ui-page-top:24px; --ui-page-side:24px; --ui-page-bottom:48px;
  --ui-header-gap:20px; --ui-section-gap:20px; --ui-action-gap:8px;
  --ui-control-height:40px; --ui-control-padding:14px;
  --ui-input-border:var(--text-mute);
  --ui-nav-top:16px; --ui-nav-inset:24px; --ui-shell-max:1540px;
  --ui-nav-control:40px; --ui-nav-link-height:40px; --ui-nav-logo:40px;
  --fs-xs:12px; --fs-sm:13px; --fs-base:14px; --fs-md:16px;
  --fs-lg:20px; --fs-xl:26px; --fs-display:32px;
  --font:"Segoe UI","Malgun Gothic","Apple SD Gothic Neo",system-ui,-apple-system,sans-serif;
  --font-mono:ui-monospace,"Cascadia Mono",Consolas,"D2Coding",monospace;
  --on-fill:#fff; --button-ink:#0f1217; --logo-grad-to:#7a5cff;
  --brand-cyan:#4fc3e8; --glass-surface:rgba(23,27,34,.94);
  --glass-nav:rgba(15,18,23,.94); --surface-highlight:rgba(79,195,232,.07);
  --ambient-cyan:rgba(79,195,232,.10); --ambient-blue:rgba(108,155,255,.09);
  color-scheme:dark;
}
:root[data-theme="light"] {
  --bg:#eef3f8; --bg-elev:#f9fbfe; --bg-soft:#e3ebf4;
  --border:#cbd7e5; --border-strong:#98aabe;
  --text:#172638; --text-soft:#40546c; --text-mute:#536780;
  --accent:#315fca; --accent-soft:#dde8ff; --accent-ink:#214ba9;
  --ok:#12684d; --ok-soft:#dcefe7; --warn:#7b530b; --warn-soft:#f8edcf;
  --danger:#ae352f; --danger-soft:#fbe5e2;
  --glass-surface:rgba(249,251,254,.96); --glass-nav:rgba(249,251,254,.96);
  --surface-highlight:rgba(49,95,202,.04); --ambient-cyan:rgba(79,195,232,.08);
  --ambient-blue:rgba(49,95,202,.06); --button-ink:#fff;
  --glow-line:rgba(49,95,202,.24);
  --shadow:0 2px 12px rgba(23,38,56,.06); --shadow-lg:0 12px 44px rgba(23,38,56,.16);
  color-scheme:light;
}
*,*::before,*::after { box-sizing:border-box; }
html { color-scheme:dark; scroll-behavior:smooth; }
html[data-theme="light"] { color-scheme:light; }
body {
  min-height:100vh; margin:0; font-family:var(--font); font-size:var(--fs-base);
  line-height:1.6; color:var(--text);
  background:radial-gradient(ellipse at 5% 30%,var(--ambient-cyan),transparent 48%),
    radial-gradient(ellipse at 95% 70%,var(--ambient-blue),transparent 52%),var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4 { line-height:1.3; text-wrap:balance; }
a { color:var(--accent-ink); text-decoration:none; }
a:hover { text-decoration:underline; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; color:inherit; }
button:disabled { cursor:not-allowed; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius-xs); }
img { max-width:100%; }
.skip-link { position:fixed; left:12px; top:8px; z-index:100; padding:8px 12px; transform:translateY(-160%); background:var(--bg-elev); color:var(--text); border:1px solid var(--border-strong); border-radius:var(--radius-sm); }
.skip-link:focus { transform:translateY(0); }
.nav {
  border:1px solid var(--glow-line); border-radius:var(--radius-lg);
  background:var(--glass-nav); box-shadow:var(--shadow);
  backdrop-filter:saturate(150%) blur(18px); -webkit-backdrop-filter:saturate(150%) blur(18px);
}
.nav .brand { color:var(--text); }
.brand-text { display:flex; flex-direction:column; gap:4px; min-width:0; }
.brand-wordmark { overflow:hidden; color:var(--text); font-size:var(--fs-lg); font-weight:600; letter-spacing:.14em; line-height:1; text-overflow:ellipsis; white-space:nowrap; }
.brand-tagline { color:var(--text-soft); font-size:var(--fs-xs); line-height:1.25; }
.nav .links > a { border:1px solid transparent; border-radius:var(--radius-sm); }
.nav .links > a:hover { text-decoration:none; }
.nav .links > a:hover:not([aria-current="page"]) { background:var(--bg-soft); }
.nav .links > a[aria-current="page"] { border-color:var(--accent); }
.nav-actions { display:flex; align-items:center; justify-self:end; gap:8px; }
.nav-search { border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--bg-soft); color:var(--text-mute); }
.nav-search input { width:100%; min-width:0; padding:0; border:0; background:transparent; color:var(--text-soft); font:inherit; font-size:var(--fs-sm); cursor:default; opacity:1; }
.nav-search input::placeholder { color:var(--text-mute); opacity:1; }
.nav-tool-placeholder:disabled { cursor:default; color:var(--text-mute); }
.nav-tool-placeholder:disabled:hover { background:transparent; color:var(--text-mute); }
.icon-btn { display:inline-grid; flex:0 0 38px; place-items:center; width:38px; height:38px; padding:0; color:var(--text-soft); background:transparent; border:1px solid transparent; border-radius:50%; }
.icon-btn:hover { color:var(--text); background:var(--bg-soft); }
.icon-btn svg { width:19px; height:19px; }
.avatar { display:inline-grid; place-items:center; width:30px; height:30px; overflow:hidden; color:var(--accent-ink); background:var(--accent-soft); border:1px solid var(--border); border-radius:50%; font-size:var(--fs-sm); font-weight:700; object-fit:cover; }
.menu .dropdown {
  position:absolute; top:46px; right:0; z-index:50; display:none; width:288px;
  min-width:0; max-width:calc(100vw - 24px); max-height:min(70vh,560px);
  overflow:auto; padding:8px; background:var(--glass-surface); border:1px solid var(--glow-line);
  border-radius:var(--radius); box-shadow:var(--shadow-lg);
  backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%);
}
.menu.open .dropdown { display:block; }
.dropdown .who { display:flex; align-items:center; gap:12px; padding:14px 12px; margin-bottom:8px; border-bottom:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-highlight); }
.dropdown .account-avatar { flex:0 0 40px; width:40px; height:40px; font-size:var(--fs-md); }
.dropdown .account-details { flex:1; min-width:0; }
.dropdown .account-name-row { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:4px 8px; }
.dropdown .account-name-row b { font-size:15px; font-weight:600; }
.dropdown .account-role { flex-shrink:0; color:var(--text-mute); font-size:11px; }
.dropdown .who b,.dropdown .who small { display:block; overflow-wrap:anywhere; }
.dropdown .who small { margin-top:3px; color:var(--text-soft); font-size:var(--fs-xs); }
.dropdown-item { display:flex; width:100%; min-height:44px; align-items:center; gap:12px; padding:10px 12px; text-align:left; color:var(--text); background:transparent; border:0; border-radius:var(--radius-sm); font-size:var(--fs-base); }
.menu .dropdown .dropdown-item { display:flex; }
.dropdown-item svg { flex:0 0 18px; width:18px; height:18px; color:var(--text-soft); }
.dropdown-item.account-logout { margin-top:6px; border-top:1px solid var(--border); border-radius:0 0 var(--radius-sm) var(--radius-sm); color:var(--text-soft); }
.account-mode-message { margin:4px 0; padding:4px 12px 8px; color:var(--danger); font-size:var(--fs-xs); line-height:1.6; }
.nav .menu.open > .icon-btn { background:var(--bg-soft); }
.dropdown-item:hover:not(:disabled) { background:var(--bg-soft); }
.dropdown-item:disabled { color:var(--text-mute); opacity:.72; }
main#view { position:relative; z-index:1; width:100%; max-width:var(--maxw); margin:0 auto; padding:40px 20px 80px; }
.page-head { display:flex; align-items:center; gap:16px; margin:8px 0 20px; }
.page-head h1 { margin:0; color:var(--text); font-size:var(--fs-xl); font-weight:800; letter-spacing:-.4px; }
.page-head .sub { color:var(--text-soft); font-size:var(--fs-base); }
.panel { padding:24px; color:var(--text); background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius); }
.panel h2,.panel h3 { margin:0 0 12px; font-size:var(--fs-md); }
.panel p { margin:0; color:var(--text-soft); }
@media (max-width:1100px) {
  .nav-search input { display:none; }
}
@media (max-width:600px) {
  .brand-text { max-width:70px; }
  .brand-tagline { display:none; }
  .brand-wordmark { font-size:var(--fs-md); letter-spacing:.1em; }
  main#view { padding:20px 16px 64px; }
  .page-head { flex-wrap:wrap; }
  .panel { padding:18px; }
  .menu .dropdown { top:calc(100% + 8px); max-height:calc(100dvh - 100px); }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; }
}