/* ============================================================
   Brainstack — Product design system, built to the approved spec
   ("White ground, one violet" · Playfair display + Archivo · dark
   is a token swap). Tokens taken verbatim from the spec; components
   are the spec's own classes. Loads after bs-admin.css.
   Icons: /assets/bs-sprite.svg via <use href="...#id">.
   ============================================================ */
@font-face{ font-family:"Playfair Display"; src:url("/assets/fonts/PlayfairDisplay.woff2") format("woff2"); font-weight:400 900; font-display:swap; }

:root{
  --page:#FFFFFF; --rail:#FBFBFD; --card:#FFFFFF; --sunken:#F6F6F9;
  --ink:#16182B; --ink-2:#5A5D75; --ink-3:#6E7287;
  --line:#EBEBF0; --line-2:#DDDDE6;
  --accent:#5A4BE3; --accent-wash:#EFEDFE; --on-accent:#FFFFFF;
  --ok:#1F7A4D; --ok-wash:#E6F4EC; --warn:#93610A; --warn-wash:#FBF0DC; --info:#2563C9; --info-wash:#E7EFFB;
  --hover:#F6F6F9; --shadow:0 1px 2px rgba(16,18,43,.05);
  --display:"Playfair Display",Georgia,serif;
  /* aliases so any shared bs-admin rules read the new palette */
  --bg:var(--page); --surface:var(--card); --card-sunken:var(--sunken); --card-elev:var(--sunken); --tint:var(--hover); --sidebar:var(--rail);
  --accent-2:#4B3ED2; --accent-ink:var(--accent); --accent-tint:var(--accent-wash);
  --navy:var(--accent); --bleu:var(--accent); --growth:var(--ok); --amber:var(--warn);
  --ok-fg:var(--accent); --ok-bg:var(--accent-wash); --warn-fg:var(--warn); --warn-bg:var(--warn-wash); --err-fg:#BA1A1A; --err-bg:#FBECEC;
  --font-head:"Archivo",system-ui,sans-serif; --ui:"Archivo",system-ui,sans-serif; --r-card:14px; --r-pill:999px;
  /* galaxy hero + glass overlays (from the design) */
  --hero-bg:radial-gradient(120% 120% at 50% 38%, #FFFFFF 0%, #F3F4FA 55%, #EAECF5 100%);
  --hero-ink:#16182B; --hero-ink-2:rgba(22,24,43,.6); --hero-faint:rgba(22,24,43,.5);
  --glass-bg:rgba(255,255,255,.62); --glass-border:rgba(22,24,43,.1); --glass-ink:#16182B; --glass-ink-2:rgba(22,24,43,.52);
  --glass-shadow:0 20px 60px rgba(22,24,43,.14); --glass-soft:rgba(255,255,255,.42); --glass-soft-border:rgba(22,24,43,.08);
  --vignette:radial-gradient(70% 60% at 50% 46%, transparent 45%, rgba(234,236,245,.55) 100%);
}
/* accent variants (used by the "amber/blue/green" tints the design carries) */
:root[data-accent="blue"]{ --accent:#2563C9; --accent-wash:#E7EFFB; }
:root[data-accent="green"]{ --accent:#1F7A4D; --accent-wash:#E6F2EC; }
:root[data-accent="amber"]{ --accent:#93610A; --accent-wash:#F6EEDD; }
:root[data-theme="dark"], html:not([data-theme="light"]) :root{}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --page:#1B1D28; --rail:#171925; --card:#232634; --sunken:#2A2E3D;
  --ink:#F0F0F6; --ink-2:#BFC1CE; --ink-3:#9195A8;
  --line:#333749; --line-2:#3E4256;
  --accent:#9B8FFF; --accent-wash:#2C2A46; --on-accent:#16182B;
  --ok:#5FCB94; --ok-wash:#163024; --warn:#E0A94A; --warn-wash:#332715; --info:#7FB0F5; --info-wash:#17253C;
  --hover:#232634; --shadow:0 1px 2px rgba(0,0,0,.3); --accent-2:#B0A6FF;
  --hero-bg:radial-gradient(120% 120% at 50% 40%, #262a3c 0%, #16182200 0%, #14161f 58%, #101119 100%),#131521;
  --hero-ink:#FFFFFF; --hero-ink-2:rgba(255,255,255,.66); --hero-faint:rgba(255,255,255,.52);
  --glass-bg:rgba(35,38,52,.6); --glass-border:rgba(255,255,255,.12); --glass-ink:#FFFFFF; --glass-ink-2:rgba(255,255,255,.55);
  --glass-shadow:0 20px 60px rgba(0,0,0,.35); --glass-soft:rgba(34,37,50,.5); --glass-soft-border:rgba(255,255,255,.09);
  --vignette:radial-gradient(72% 62% at 50% 46%, transparent 42%, rgba(16,17,25,.5) 100%);
} }
:root[data-theme="dark"]{
  --page:#1B1D28; --rail:#171925; --card:#232634; --sunken:#2A2E3D;
  --ink:#F0F0F6; --ink-2:#BFC1CE; --ink-3:#9195A8;
  --line:#333749; --line-2:#3E4256;
  --accent:#9B8FFF; --accent-wash:#2C2A46; --on-accent:#16182B;
  --ok:#5FCB94; --ok-wash:#163024; --warn:#E0A94A; --warn-wash:#332715; --info:#7FB0F5; --info-wash:#17253C;
  --hover:#232634; --shadow:0 1px 2px rgba(0,0,0,.3); --accent-2:#B0A6FF;
  --hero-bg:radial-gradient(120% 120% at 50% 40%, #262a3c 0%, #16182200 0%, #14161f 58%, #101119 100%),#131521;
  --hero-ink:#FFFFFF; --hero-ink-2:rgba(255,255,255,.66); --hero-faint:rgba(255,255,255,.52);
  --glass-bg:rgba(35,38,52,.6); --glass-border:rgba(255,255,255,.12); --glass-ink:#FFFFFF; --glass-ink-2:rgba(255,255,255,.55);
  --glass-shadow:0 20px 60px rgba(0,0,0,.35); --glass-soft:rgba(34,37,50,.5); --glass-soft-border:rgba(255,255,255,.09);
  --vignette:radial-gradient(72% 62% at 50% 46%, transparent 42%, rgba(16,17,25,.5) 100%);
}
body{ background:var(--page); color:var(--ink); font-family:"Archivo",system-ui,sans-serif; }
::selection{ background:var(--accent-wash); }

.app,.app *{box-sizing:border-box;}
.app{
  display:grid; grid-template-columns:268px 1fr;
  min-height:100vh;
  background:var(--page); color:var(--ink);
  font-family:"Archivo",system-ui,sans-serif; font-size:15px;
}

/* ---- rail ---- */
.rail{background:var(--rail); border-right:1px solid var(--line); display:flex; flex-direction:column; padding:22px 14px 14px;
  position:sticky; top:0; height:100vh; align-self:start; overflow-y:auto;}
.brandrow{display:flex; align-items:center; gap:10px; padding:0 8px 22px;}
.brandrow .wm{font-size:19px; font-weight:700; letter-spacing:-.03em;}
/* Brainstack logo mark — the supplied art is a full lockup on a solid light
   ground, so we crop to just the brain+books via background-size/position and
   frame it in a tile (works in light + dark). Nudge the position if the crop
   is off. */
.brand-mark{ width:32px; height:32px; flex:none; border-radius:8px; border:1px solid var(--line);
  background-color:#fff; background-image:url("/assets/brainstack-logo.png"); background-repeat:no-repeat;
  background-size:99px 60px; background-position:-34px -7px; box-shadow:var(--shadow); }

.nav{display:flex; flex-direction:column; gap:2px;}
.nav a{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:9px;
  text-decoration:none; color:var(--ink-2); font-size:14.5px; font-weight:500;}
.nav a:hover{background:var(--hover); color:var(--ink);}
.nav a[aria-current="page"]{background:var(--accent-wash); color:var(--accent); font-weight:600;}
.nav a svg{color:var(--ink-3); flex:none;}
.nav a[aria-current="page"] svg{color:var(--accent);}

.railsec{margin-top:26px;}
.railsec .h{font-size:10.5px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); padding:0 12px; margin-bottom:8px;}
.sub{display:flex; flex-direction:column; gap:1px;}
.sub a{display:flex; align-items:center; gap:10px; padding:7px 12px; border-radius:8px;
  text-decoration:none; color:var(--ink-2); font-size:13.5px;}
.sub a:hover{background:var(--hover); color:var(--ink);}
.sub a .n{margin-left:auto; font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums;}
.sub a .lk{color:var(--ink-3); display:inline-flex;}
.sub a.add{color:var(--accent); font-weight:600;}
.sub a.add svg{color:var(--accent);}
.sub a svg{color:var(--ink-3); flex:none;}

.me{margin-top:auto; display:flex; align-items:center; gap:10px; padding:12px 10px;
  border-top:1px solid var(--line); position:relative; cursor:pointer;}
.me:hover{background:var(--hover);}
.me-gear{margin-left:auto; color:var(--ink-3); display:inline-flex; flex:none;}
.me:hover .me-gear{color:var(--ink);}
.me .nm{display:flex; flex-direction:column; line-height:1.3; min-width:0;}
.me .nm b{font-size:13.5px; font-weight:600;}
.me .nm span{font-size:11.5px; color:var(--ink-3);}
.me .chev{margin-left:auto; color:var(--ink-3);}
.avatar{width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-size:12px; font-weight:600; background:var(--accent-wash); color:var(--accent);}

/* ---- main ---- */
.main{display:flex; flex-direction:column; min-width:0;}
.topbar{display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:20px 34px 0;
  height:auto; background:transparent; border-bottom:0; backdrop-filter:none; position:static;}
.iconbtn{width:36px; height:36px; border-radius:9px; border:1px solid var(--line); background:var(--card);
  display:grid; place-items:center; color:var(--ink-2); cursor:pointer;}
.iconbtn:hover{background:var(--hover); color:var(--ink);}
.body{padding:20px 34px 40px; display:grid; grid-template-columns:1fr 330px; gap:30px; align-items:start;}
.body.one{grid-template-columns:1fr;}
.body.one .colmax{max-width:860px;}

.hero{margin:14px 0 34px;}
.hero h1{font-family:"Playfair",Georgia,serif; font-weight:500; font-size:46px; line-height:1.08;
  letter-spacing:-.015em; color:var(--ink); margin:0 0 10px;}
.hero p{font-size:16px; color:var(--ink-3);}

.ptitle{font-family:"Playfair",Georgia,serif; font-weight:500; font-size:38px; line-height:1.12;
  letter-spacing:-.012em; color:var(--ink); margin:14px 0 8px;}
.psub{font-size:15px; color:var(--ink-3); margin:0 0 30px; max-width:56ch; line-height:1.6;}

.sechead{display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 0 12px;}
.sechead h3{font-size:15.5px;}
.link{font-size:13px; font-weight:600; color:var(--accent); text-decoration:none;}
.link:hover{text-decoration:underline;}
.blk{margin-bottom:34px;}

/* rows */
.list{display:flex; flex-direction:column;}
.item{display:flex; align-items:center; gap:14px; padding:14px 4px; border-bottom:1px solid var(--line);
  cursor:pointer; border-radius:8px;}
.item:hover{background:var(--hover);}
.item:last-child{border-bottom:0;}
.tile{width:36px; height:36px; border-radius:9px; flex:none; display:grid; place-items:center;
  background:var(--sunken); border:1px solid var(--line);}
.item .t{display:flex; flex-direction:column; gap:3px; min-width:0; flex:1;}
.item .t b{font-size:14.5px; font-weight:600; letter-spacing:-.005em; color:var(--ink);}
.item .t span{font-size:12.5px; color:var(--ink-3); font-variant-numeric:tabular-nums;}
.item .r{font-size:12.5px; color:var(--ink-3); white-space:nowrap; font-variant-numeric:tabular-nums;}

/* chips */
.chip{display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:6px;
  font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap;}
.chip.decision{background:var(--accent-wash); color:var(--accent);}
.chip.runbook{background:var(--info-wash); color:var(--info);}
.chip.client{background:var(--ok-wash); color:var(--ok);}
.chip.note{background:var(--sunken); color:var(--ink-3);}
.chip.conflict{background:var(--warn-wash); color:var(--warn);}
.src{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-3); white-space:nowrap;}

/* cards */
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.card{background:var(--card); border:1px solid var(--line); border-radius:13px; padding:15px;
  display:flex; flex-direction:column; gap:11px; box-shadow:var(--shadow); cursor:pointer; min-height:150px;}
.card:hover{border-color:var(--line-2);}
.card .top{display:flex; align-items:center; justify-content:space-between;}
.card .top .go{color:var(--ink-3);}
.card p{font-size:13.5px; line-height:1.5; color:var(--ink); font-weight:500;}
.card .foot{margin-top:auto; display:flex; align-items:center; gap:8px;}
.card .foot .n{font-size:11.5px; color:var(--ink-3);}
.stackicons{display:flex; align-items:center;}
.stackicons .tile{width:22px; height:22px; border-radius:6px; margin-left:-5px; background:var(--card);}
.stackicons .tile:first-child{margin-left:0;}
.stackicons .more{margin-left:7px; font-size:11.5px; color:var(--ink-3);}

/* quick access */
.quick{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.qa{display:flex; align-items:center; gap:11px; padding:15px; border-radius:12px; cursor:pointer;
  background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); color:var(--ink);
  font-size:13.5px; font-weight:600;}
.qa:hover{border-color:var(--line-2); background:var(--hover);}
.qa .go{margin-left:auto; color:var(--ink-3);}
.qa .ic{width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:var(--accent-wash); color:var(--accent); flex:none;}

/* right rail */
.side{display:flex; flex-direction:column; gap:16px; position:sticky; top:20px;}
.scard{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:var(--shadow);}
.scard .h{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.scard .h b{font-size:14px; font-weight:600;}
.week{display:flex; flex-direction:column; gap:2px; margin-bottom:16px;}
.week .big{font-family:"Playfair",Georgia,serif; font-size:40px; font-weight:500; line-height:1.05;
  letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums;}
.week .cap{font-size:12.5px; color:var(--ink-3);}
.bar{display:flex; height:6px; border-radius:99px; overflow:hidden; background:var(--sunken); margin-bottom:12px;}
.bar i{display:block;}
.bar i.s{background:var(--accent);}
.bar i.c{background:var(--accent); opacity:.35;}
.keys{display:flex; flex-direction:column; gap:8px;}
.key{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-2);}
.key .d{width:8px; height:8px; border-radius:3px; background:var(--accent); flex:none;}
.key .d.c{opacity:.35;}
.key .v{margin-left:auto; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums;}
.conn{display:flex; flex-direction:column;}
.conn a{display:flex; align-items:center; gap:11px; padding:9px 0; text-decoration:none; border-bottom:1px solid var(--line);}
.conn a:last-of-type{border-bottom:0;}
.conn .t{display:flex; flex-direction:column; gap:1px; min-width:0;}
.conn .t b{font-size:13px; font-weight:600; color:var(--ink);}
.conn .t span{font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums;}
.conn .dot{margin-left:auto; width:6px; height:6px; border-radius:50%; background:var(--ok); flex:none;}
.more-btn{width:100%; margin-top:10px; padding:8px; border-radius:8px; border:1px solid var(--line);
  background:transparent; color:var(--ink-2); font:inherit; font-size:12.5px; font-weight:500; cursor:pointer;}
.more-btn:hover{background:var(--hover); color:var(--ink);}

/* buttons */
.btn{font:inherit; font-size:13.5px; font-weight:600; letter-spacing:-.005em; padding:9px 16px;
  border-radius:9px; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:7px;
  background:var(--accent); color:var(--on-accent); border:1px solid var(--accent);}
.btn.ghost{background:var(--card); color:var(--ink-2); border-color:var(--line-2);}
.btn.ghost:hover{color:var(--ink); background:var(--hover);}
.btn.quiet{background:transparent; border-color:transparent; color:var(--ink-3); padding:8px 10px;}
.btn.quiet:hover{color:var(--accent); background:var(--accent-wash);}

/* knowledge feed */
.view{display:inline-flex; padding:3px; gap:2px; border:1px solid var(--line); border-radius:9px; background:var(--sunken);}
.view button{font:inherit; font-size:12.5px; font-weight:500; color:var(--ink-3); background:none; border:0;
  padding:6px 13px; border-radius:6px; cursor:pointer; display:inline-flex; align-items:center; gap:6px;}
.view button[aria-pressed="true"]{background:var(--card); color:var(--accent); font-weight:600; box-shadow:var(--shadow);}
.view button[aria-pressed="true"] svg{color:var(--accent);}
.view svg{color:var(--ink-3);}
.head-row{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px;}

.note-row{display:flex; gap:15px; padding:18px 6px; border-bottom:1px solid var(--line); cursor:pointer; border-radius:10px;}
.note-row:hover{background:var(--hover);}
.note-row .body-col{display:flex; flex-direction:column; gap:7px; min-width:0; flex:1;}
.note-row .ttl{font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--ink); line-height:1.4;}
.note-row:hover .ttl{color:var(--accent);}
.note-row .snip{font-size:14px; line-height:1.55; color:var(--ink-2); max-width:70ch;}
.note-row .meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:2px;}
.note-row .prov{font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums;}
.sep{color:var(--line-2);}

/* map */
.map{position:relative; height:452px; border:1px solid var(--line); border-radius:14px;
  background:var(--card); overflow:hidden; box-shadow:var(--shadow);}
.map canvas{display:block; width:100%; height:100%; cursor:crosshair;}
.pop{position:absolute; pointer-events:none; z-index:2; width:262px; padding:13px 15px;
  background:var(--card); border:1px solid var(--line-2); border-radius:11px;
  box-shadow:0 2px 6px rgba(16,18,43,.06), 0 16px 40px -14px rgba(16,18,43,.3);
  transform:translate(-50%,calc(-100% - 14px));}
.pop[hidden]{display:none;}
.pop .t{font-size:14px; font-weight:600; line-height:1.35; color:var(--ink); margin:0 0 6px;}
.pop .m{font-size:11.5px; color:var(--ink-3); display:block; margin-bottom:10px; font-variant-numeric:tabular-nums;}
.pop .r{display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding-top:9px; border-top:1px solid var(--line);}
.pop .hits{font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums;}
.legend{display:flex; gap:20px; flex-wrap:wrap; margin-top:14px; font-size:12px; color:var(--ink-3);}
.legend i{display:inline-flex; align-items:center; gap:7px; font-style:normal;}
.legend .sq{width:7px; height:7px; border-radius:2px; background:var(--accent);}
.legend .ci{width:7px; height:7px; border-radius:50%; background:var(--ink-3); opacity:.7;}
.legend .ln{width:16px; height:1px; background:var(--line-2);}
.legend .sz{display:inline-flex; align-items:center; gap:4px;}
.legend .sz b{width:4px; height:4px; border-radius:50%; background:var(--ink-3); opacity:.55;}
.legend .sz b:nth-child(2){width:7px; height:7px;}
.legend .sz b:nth-child(3){width:10px; height:10px;}

/* teach */
.well{background:var(--card); border:1px solid var(--line-2); border-radius:14px; padding:20px 22px;
  min-height:230px; display:flex; flex-direction:column; box-shadow:var(--shadow);}
.well:focus-within{border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-wash);}
.well .ph{font-size:15.5px; line-height:1.6; color:var(--ink-3);}
.caret{display:inline-block; width:1.5px; height:17px; background:var(--accent); vertical-align:-3px;
  animation:blink 1.1s steps(2) infinite;}
@keyframes blink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.caret{animation:none}}
.well .foot{margin-top:auto; padding-top:16px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:9px;}
.pick{display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:12.5px; font-weight:500;
  color:var(--ink-2); padding:7px 11px; border:1px solid var(--line-2); border-radius:8px;
  background:var(--card); cursor:pointer;}
.pick:hover{background:var(--hover);}
.pick svg{color:var(--ink-3);}
.drop{margin-top:14px; display:flex; align-items:center; gap:11px; padding:15px 17px;
  border:1px dashed var(--line-2); border-radius:12px; font-size:13.5px; color:var(--ink-3); cursor:pointer;}
.drop:hover{border-color:var(--accent); color:var(--accent);}
.drop b{color:var(--ink-2); font-weight:600;}
.drop:hover b{color:var(--accent);}

/* modal (New team, and future feature dialogs) */
.modal-overlay{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(16,18,43,.4);}
:root[data-theme="dark"] .modal-overlay{background:rgba(0,0,0,.55);}
.modal-overlay[hidden]{display:none;}
.modal{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:26px 28px; width:100%; max-width:440px;
  box-shadow:0 24px 70px -20px rgba(16,18,43,.45);}
.modal h2{font-family:var(--display); font-weight:500; font-size:24px; letter-spacing:-.01em; margin:0 0 6px; color:var(--ink);}
.modal .sub{font:400 14px/1.5 var(--ui); color:var(--ink-3); margin:0 0 4px;}
.modal label{display:block; font:600 12.5px var(--ui); color:var(--ink-2); margin:18px 0 7px;}
.modal input[type=text], .modal textarea{width:100%; box-sizing:border-box; padding:11px 13px; border:1px solid var(--line-2);
  border-radius:9px; background:var(--page); color:var(--ink); font:inherit; font-size:14.5px; outline:none;}
.modal input[type=text]:focus, .modal textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash);}
.modal input::placeholder{color:var(--ink-3);}
.modal .actions{display:flex; justify-content:flex-end; gap:10px; margin-top:24px;}
.modal .err{color:#BA1A1A; font-size:13px; margin-top:12px; min-height:17px;}

/* settings menu (gear) */
.setwrap{position:relative; display:inline-flex;}
.setmenu{position:absolute; right:0; top:44px; z-index:60; width:236px; padding:12px;
  background:var(--card); border:1px solid var(--line); border-radius:13px;
  box-shadow:0 2px 6px rgba(16,18,43,.06), 0 18px 44px -14px rgba(16,18,43,.32);}
/* when anchored to the bottom-left profile, pop upward */
.setmenu.up{top:auto; right:auto; bottom:calc(100% + 8px); left:6px; width:230px;}
.setmenu[hidden]{display:none;}
.set-sec{font:600 11px/1 var(--ui); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin:2px 2px 9px;}
.set-pills{display:flex; gap:5px; background:var(--sunken); border:1px solid var(--line); border-radius:9px; padding:3px;}
.set-pills .set-theme{flex:1; padding:7px 0; border:0; border-radius:6px; background:transparent; cursor:pointer;
  font:600 12.5px var(--ui); color:var(--ink-2);}
.set-pills .set-theme:hover{color:var(--ink);}
.set-pills .set-theme[aria-pressed="true"]{background:var(--card); color:var(--accent); box-shadow:var(--shadow);}
.set-div{height:1px; background:var(--line); margin:12px 0;}
.set-item{display:flex; align-items:center; gap:10px; padding:9px 8px; border-radius:8px; text-decoration:none;
  font:500 13.5px var(--ui); color:var(--ink-2); cursor:pointer;}
.set-item:hover{background:var(--hover); color:var(--ink); text-decoration:none;}
.set-item svg{color:var(--ink-3);}

/* destination select (Teach + Teams default) */
.dp-select{ margin-top:10px; width:100%; max-width:360px; padding:10px 12px; border:1px solid var(--line-2);
  border-radius:9px; background:var(--card); color:var(--ink); font:inherit; font-size:14.5px; cursor:pointer; }
.dp-select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); }

/* destination picker (Teach — "who can retrieve this") */
.destpick{margin-top:16px; padding-top:16px; border-top:1px solid var(--line);}
.dphead{font:600 12px/1 var(--ui); letter-spacing:.02em; color:var(--ink-2); margin-bottom:10px;}
.dpsegs{display:flex; gap:9px;}
.dpseg{display:flex; align-items:center; justify-content:center; gap:7px; flex:1; padding:9px 13px;
  border-radius:9px; border:1px solid var(--line); background:var(--card); color:var(--ink);
  font:600 13px var(--ui); cursor:pointer;}
.dpseg svg{color:var(--ink-3);}
.dpseg[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-wash); color:var(--accent);}
.dpseg[aria-pressed="true"] svg{color:var(--accent);}
.dpexplain{margin-top:11px; font:400 13px/1.55 var(--ui); color:var(--ink-3);}
.dpexplain b{color:var(--ink-2); font-weight:600;}

/* default-space picker (Teams) */
.spacepick{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:10px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:2px; max-width:520px;}
.spacerow{display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px; cursor:pointer; border:1px solid transparent; background:transparent;}
.spacerow:hover{background:var(--hover);}
.spacerow[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-wash);}
.spacerow .sp-ic{width:34px; height:34px; flex:none; border-radius:9px; display:grid; place-items:center; background:var(--sunken); color:var(--ink-3);}
.spacerow[aria-pressed="true"] .sp-ic{background:var(--card); color:var(--accent);}
.spacerow .sp-t{display:flex; flex-direction:column; gap:2px; flex:1; min-width:0;}
.spacerow .sp-t b{font:600 14px var(--ui); color:var(--ink);}
.spacerow .sp-t span{font:400 12px var(--ui); color:var(--ink-3);}
.spacerow .sp-dot{width:9px; height:9px; border-radius:50%; background:transparent; border:1.5px solid var(--line-2); flex:none;}
.spacerow[aria-pressed="true"] .sp-dot{background:var(--accent); border-color:var(--accent);}

/* teams */
.teamrow{display:flex; align-items:center; gap:14px; padding:16px 6px; border-bottom:1px solid var(--line); border-radius:10px;}
.teamrow:hover{background:var(--hover);}
.teamrow .t{display:flex; flex-direction:column; gap:3px; flex:1; min-width:0;}
.teamrow .t b{font-size:15px; font-weight:600; display:flex; align-items:center; gap:7px;}
.teamrow .t span{font-size:12.5px; color:var(--ink-3);}
.teamrow .lk{color:var(--ink-3); display:inline-flex;}
.faces{display:flex; align-items:center;}
.faces .avatar{width:26px; height:26px; font-size:9.5px; margin-left:-7px; border:2px solid var(--page); box-sizing:content-box;}
.faces .avatar:first-child{margin-left:0;}
.faces .more{margin-left:8px; font-size:12px; color:var(--ink-3);}
.count{font-size:12.5px; color:var(--ink-3); min-width:76px; text-align:right; font-variant-numeric:tabular-nums;}

/* status */
.state{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-2); white-space:nowrap;}
.state.off{color:var(--ink-3);}
.dot{width:6px; height:6px; border-radius:50%; background:var(--ok); flex:none;}
.dot.off{background:var(--line-2);}

/* galaxy hero */
.galaxy{position:absolute; inset:0; overflow:hidden; z-index:0; background:var(--hero-bg);}
.galaxy canvas{display:block; width:100%; height:100%; cursor:crosshair;}
.galaxy .vig{position:absolute; inset:0; pointer-events:none; background:var(--vignette);}
.galaxy .tip{position:absolute; left:0; top:0; transform:translate(-50%,-100%); opacity:0;
  transition:opacity .18s ease; pointer-events:none; background:rgba(10,11,17,.92);
  border:1px solid rgba(255,255,255,.12); border-radius:9px; padding:7px 10px; white-space:nowrap;
  backdrop-filter:blur(4px); z-index:4;}
.galaxy .tip .n{font:600 12px var(--ui); color:#fff; display:flex; align-items:center; gap:6px;}
.galaxy .tip .tip-ic{display:inline-flex; width:16px; height:16px; border-radius:4px; background:#fff; align-items:center; justify-content:center; flex:none;}
.galaxy .tip .tip-ic svg{width:12px; height:12px;}
.galaxy .tip .m{display:flex; align-items:center; gap:6px; margin-top:3px; font:400 11px var(--ui); color:rgba(255,255,255,.6);}
.galaxy .tip .m i{width:7px; height:7px; border-radius:50%; display:inline-block;}
.hero-greet{position:absolute; left:48px; top:92px; pointer-events:none; z-index:2; max-width:440px;}
.hero-greet .k{font:600 11px var(--ui); letter-spacing:.02em; color:var(--hero-faint);}
.hero-greet h1{font-family:var(--display); font-weight:500; font-size:52px; letter-spacing:-.015em; margin:10px 0 0; color:var(--hero-ink);}
.hero-greet p{font:400 16px/1.5 var(--ui); color:var(--hero-ink-2); margin:12px 0 0;}
.hero-stats{display:flex; gap:10px; margin-top:18px;}
.hero-stat{display:flex; align-items:baseline; gap:7px; padding:9px 14px; border-radius:11px;
  background:var(--glass-soft); border:1px solid var(--glass-soft-border); backdrop-filter:blur(10px);}
.hero-stat b{font-family:var(--display); font-weight:500; font-size:22px; color:var(--hero-ink); line-height:1; font-variant-numeric:tabular-nums;}
.hero-stat span{font:500 11px var(--ui); color:var(--hero-ink-2);}
.glasscard{background:var(--glass-soft); border:1px solid var(--glass-soft-border); border-radius:15px;
  backdrop-filter:blur(16px); overflow:hidden; z-index:2;}
.hero-legend{position:absolute; left:48px; bottom:36px; display:flex; gap:24px; pointer-events:none; z-index:2; transition:opacity .35s ease;}
.hero-legend .lh{font:700 9px/1 var(--ui); letter-spacing:.09em; text-transform:uppercase; color:var(--hero-faint); margin-bottom:7px;}
.hero-legend .rows{display:flex; flex-direction:column; gap:5px;}
.hero-legend .rows > div{display:flex; align-items:center; gap:7px; font:400 11px var(--ui); color:var(--hero-ink-2);}
/* segmented List/Galaxy toggle */
.hseg{display:inline-flex; gap:3px; padding:3px; border-radius:9px; background:var(--sunken); border:1px solid var(--line);}
.hseg.onhero{background:rgba(127,127,140,.16); border-color:var(--glass-border); backdrop-filter:blur(8px);}
.hseg button{display:flex; align-items:center; gap:6px; padding:7px 12px; border-radius:7px; border:none; cursor:pointer;
  font:600 13px var(--ui); background:transparent; color:var(--ink-2);}
.hseg.onhero button{color:var(--hero-ink-2);}
.hseg button[aria-pressed="true"]{background:var(--accent); color:#fff;}