/* Wifi Influencers — dark navy production UI with brand gold */

/* ---------- Plans page: the landing page's four cards, inside the app ---------- */
.planspage { padding: 4px 2px 30px; }
.plantop { margin-bottom: 18px; }
.plantop h2 { font-family: "Bricolage Grotesque", serif; font-size: 28.2px; margin-bottom: 6px; }
.plantop p { color: var(--muted); font-size: 15.8px; max-width: 680px; }
.curplan { margin-top: 12px; font-size: 15.2px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
/* the trial, spoken to directly: still running reads as an invitation, spent reads as an upsell —
   never as a dead end, because the person reading it has just made something and kept it */
.trialnote {
  margin-top: 12px; padding: 11px 14px; border-radius: 10px; font-size: 15.2px; line-height: 1.55;
  color: var(--text); background: rgba(74,222,128,.09); border: 1px solid rgba(74,222,128,.32);
}
.trialnote.done { background: rgba(245,197,66,.1); border-color: rgba(245,197,66,.38); }
.trialnote b { color: var(--gold-hi); }
.trialnote.done b { color: #f5c542; }
.plancards { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 14px; align-items: start; }
.plancard {
  position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px 18px;
  box-shadow: 0 2px 0 #0a0c11, 0 18px 34px -26px rgba(0,0,0,1);
}
.plancard.pop { border-color: rgba(74,222,128,.5); box-shadow: 0 2px 0 #0a0c11, 0 22px 42px -26px rgba(74,222,128,.55); }
.plancard.on { border-color: var(--ok); }
.plancard h3 { font-family: "Bricolage Grotesque", serif; font-size: 18.7px; margin-bottom: 12px; }
.plancard.pop h3 { color: var(--ok); }
.ptag {
  position: absolute; top: 16px; right: 16px; font-size: 10.5px; letter-spacing: .1em; font-weight: 800;
  padding: 3px 7px; border-radius: 5px; color: #07240f; background: linear-gradient(180deg, #86efac, #22c55e);
}
.ptag.now { background: var(--panel-2); color: var(--ok); border: 1px solid var(--ok); }
.pprice { font-family: "Bricolage Grotesque", serif; font-size: 32.5px; font-weight: 800; letter-spacing: -1.2px; }
.pprice small { font-size: 14px; font-weight: 500; color: var(--muted); font-family: inherit; letter-spacing: 0; }
.ppermo { color: var(--muted); font-size: 14.6px; margin: 2px 0 14px; }
.plancard ul { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 7px; font-size: 15.2px; }
.plancard li::before { content: "▸ "; color: var(--ok); font-weight: 700; }
.pnote { color: var(--muted); font-size: 14.6px; }
.planfoot { color: var(--muted); font-size: 14.6px; margin-top: 16px; max-width: 760px; }

/* plan picker in the Buy Credits modal — four cards, the chosen one outlined in gold */
.planpick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 14px 0 4px; }
.planpick button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  background: var(--panel, #16181d); border: 1px solid var(--line, #323232); color: var(--text, #e8e8ea);
}
.planpick button b { font-size: 15.8px; }
.planpick button span { font-size: 15.2px; color: var(--gold-hi, #ffd166); font-weight: 700; }
.planpick button small { font-size: 13.5px; color: var(--muted, #9a9aa5); }
.planpick button:hover { border-color: var(--gold, #e8b23c); }
.planpick button.on { border-color: var(--gold, #e8b23c); box-shadow: 0 0 0 1px var(--gold, #e8b23c) inset; }
@media (max-width: 520px) { .planpick { grid-template-columns: 1fr; } }
:root {
  /* v1 blue-black: near-black with a blue undertone, not navy */
  --bg: #06080d;
  --panel: #0a0d13;
  --panel-2: #0e1118;
  --card: #12151d;
  --line: #262626;
  --text: #e9e7e0;
  --muted: #8b8fa0;
  --gold: #e0aa1e;
  --gold-hi: #f2c45a;
  --ok: #4ade80;
  --bad: #f87171;
  --purple: #7c6cf0;
}
* { box-sizing: border-box; margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font-family: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  font-size: 17px; line-height: 1.5; height: 100vh; overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
.boot { display: grid; place-items: center; height: 100vh; color: var(--muted); }
.mono { font-family: "Spline Sans Mono", Consolas, monospace; }
/* profile photos are ALWAYS small circles, wherever they appear */
.pfpimg { width: 36px; height: 36px; min-width: 36px; border-radius: 50%; object-fit: cover; display: inline-grid; place-items: center; background: var(--panel-2); font-weight: 700; color: var(--gold); }
.pfpimg.lg { width: 64px; height: 64px; min-width: 64px; font-size: 26px; }

/* ---------- auth screen ---------- */
.auth { display: grid; place-items: center; height: 100vh; padding: 20px; }
.auth .box { width: min(400px, 92vw); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 36px 32px; text-align: center; }
.auth .wmark { width: 52px; height: 52px; border-radius: 12px; background: var(--gold); color: #14100a; display: inline-grid; place-items: center; font-family: "Bricolage Grotesque", serif; font-weight: 800; font-size: 30.4px; margin-bottom: 16px; }
.auth h1 { font-family: "Bricolage Grotesque", serif; font-size: 1.5rem; margin-bottom: 4px; }
.auth p { color: var(--muted); font-size: 0.92rem; margin-bottom: 22px; }
.auth input { width: 100%; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; }
.auth .note { font-size: 0.82rem; color: var(--muted); margin-top: 16px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 8px; border: 1px solid transparent; background: var(--panel-2); cursor: pointer; font-weight: 600; font-size: 16.4px; transition: filter .15s, border-color .15s; text-decoration: none; }
.btn:hover { filter: brightness(1.15); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.btn.gold { background: linear-gradient(160deg, var(--gold-hi), var(--gold)); color: #14100a; }
.btn.ghost { border-color: var(--line); background: transparent; }
.btn.full { width: 100%; }
.btn.sm { padding: 6px 12px; font-size: 15.2px; }
.btn.danger { color: var(--bad); border-color: var(--line); background: transparent; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- shell ---------- */
.shell { display: flex; height: 100vh; }
.side {
  width: 248px; min-width: 248px; background: var(--panel); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; transition: margin-left .22s ease;
}
.shell.collapsed .side { margin-left: -248px; }
.side .top { display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px; }
.side .wmark { width: 34px; height: 34px; border-radius: 9px; background: var(--gold); color: #14100a; display: grid; place-items: center; font-family: "Bricolage Grotesque", serif; font-weight: 800; font-size: 22.2px; }
.side .top .t { line-height: 1.15; }
.side .top .t b { font-family: "Bricolage Grotesque", serif; font-size: 17.5px; }
.side nav { flex: 1; overflow-y: auto; padding: 6px 10px 10px; }
.side .sec { font-size: 12.3px; letter-spacing: .16em; color: var(--muted); padding: 14px 8px 6px; text-transform: uppercase; }
.side .item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: 8px; background: none; border: 0; cursor: pointer;
  color: var(--text); font-weight: 500; margin-bottom: 1px; font-size: 16.4px;
}
.side .item:hover { background: var(--panel-2); }
.side .item.on { background: var(--panel-2); color: var(--gold-hi); }
.side .item .ic { width: 18px; text-align: center; opacity: .85; }
.side .item.sub { padding-left: 34px; font-size: 15.8px; color: var(--muted); }
.side .item.sub.on { color: var(--gold-hi); }
.side .item .soon { margin-left: auto; font-size: 11.1px; letter-spacing: .1em; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); border-radius: 5px; padding: 2px 6px; }
.side .item.disabled { opacity: .55; cursor: default; }
.credcard {
  margin: 4px 8px 10px; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px;
}
.credcard > b { font-size: 14px; display: block; margin-bottom: 8px; }
.credcard .cu { display: flex; justify-content: space-between; font-size: 12.9px; color: var(--muted); margin-bottom: 7px; }
.credcard .cu b { color: var(--text); }
.credcard .cbar { height: 5px; background: var(--bg); border-radius: 3px; overflow: hidden; margin-bottom: 10px; }
.credcard .cbar div { height: 100%; background: linear-gradient(90deg, var(--gold-hi), var(--gold)); border-radius: 3px; }
.side .foot { border-top: 1px solid var(--line); padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.side .foot img, .side .foot .pfp { width: 32px; height: 32px; border-radius: 50%; background: var(--panel-2); object-fit: cover; display: grid; place-items: center; font-weight: 700; color: var(--gold); }
.side .foot .who { flex: 1; min-width: 0; }
.side .foot .who b { display: block; font-size: 15.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side .foot .who small { color: var(--muted); font-size: 12.9px; }
.side .foot .out { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 14px; }
.side .foot .out:hover { color: var(--bad); }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--panel); }
.topbar .burger { display: none; background: none; border: 1px solid var(--line); border-radius: 7px; width: 32px; height: 32px; cursor: pointer; color: var(--muted); }
.shell.collapsed .topbar .burger { display: inline-block; }
.side .collapse { margin-left: auto; background: none; border: 1px solid var(--line); border-radius: 6px; width: 24px; height: 24px; cursor: pointer; color: var(--muted); font-size: 16.4px; line-height: 1; }
.side .collapse:hover { color: var(--gold-hi); border-color: var(--gold); }
.topbar h1 { font-family: "Bricolage Grotesque", serif; font-size: 1.05rem; font-weight: 700; }
.topbar .credits { margin-left: auto; font-family: "Spline Sans Mono", monospace; font-size: 14.6px; color: var(--gold-hi); background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; }
.content { flex: 1; overflow: auto; padding: 20px; }

/* ---------- dashboard ---------- */
.cards-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.panelbox { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.panelbox h3 { font-size: 0.95rem; margin-bottom: 10px; }
.panelbox .big { font-family: "Bricolage Grotesque", serif; font-size: 2rem; font-weight: 800; color: var(--gold-hi); }
.boardtile { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; cursor: pointer; transition: border-color .15s; }
.boardtile:hover { border-color: var(--gold); }
.boardtile b { font-size: 17.5px; }
.boardtile small { display: block; color: var(--muted); margin-top: 4px; }
.rowflex { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mt { margin-top: 18px; }
.ledger { font-size: 15.2px; }
.ledger div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.ledger .amt.pos { color: var(--ok); } .ledger .amt.neg { color: var(--bad); }

/* ---------- kanban ---------- */
.kanban { display: flex; gap: 12px; align-items: stretch; height: 100%; overflow-x: auto; padding-bottom: 10px; }
.lane { display: flex; flex-direction: column; gap: 9px; width: 216px; min-width: 216px; height: 100%; }
.lane .list { width: 100%; min-width: 0; flex: 1 1 0; min-height: 110px; max-height: none; }
.list { width: 264px; min-width: 264px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; max-height: 100%; }
.list .cdot { width: 12px; height: 12px; min-width: 12px; border-radius: 50%; border: 1px solid var(--line); background: transparent; cursor: pointer; padding: 0; }
.list .lh { display: flex; align-items: center; gap: 6px; padding: 11px 10px 8px; overflow: hidden; }
.list .lh .grip { cursor: grab; color: var(--muted); font-size: 14px; letter-spacing: -2px; user-select: none; padding: 0 2px; }
.list .lh .grip:active { cursor: grabbing; }
.list .lh input { flex: 1; min-width: 0; background: none; border: 0; font-weight: 600; font-size: 15.8px; color: var(--text); }
.list.draglist { opacity: .45; }
.list .lh input:focus { outline: 1px solid var(--line); border-radius: 5px; }
.list .lh .cnt { font-size: 12.9px; color: var(--muted); background: var(--panel-2); border-radius: 5px; padding: 2px 7px; }
.list .lh .del { background: none; border: 0; color: var(--muted); cursor: pointer; }
.list .cards { flex: 1; overflow-y: auto; padding: 4px 8px 8px; display: flex; flex-direction: column; gap: 7px; min-height: 30px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 10px 11px;
  cursor: pointer; transition: border-color .12s;
}
.card:hover { border-color: var(--gold); }
.card.dragging { opacity: .4; }
.card { position: relative; }
.card.notes { border-color: var(--gold); background: linear-gradient(180deg, var(--gold-dim), transparent 70%), var(--card); }
.card.notes .ct { color: var(--gold-hi); }
.bdg.notesb { color: var(--gold); border-color: #4d3d13; }
.cardmenu {
  position: absolute; top: 22px; right: 4px; z-index: 45; width: 110px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 12px 34px rgba(0,0,0,.5); padding: 4px; animation: popIn .1s ease;
}
.cardmenu button { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--text); font-size: 12.9px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.cardmenu button:hover { background: var(--panel); color: var(--gold-hi); }
.cardmenu button.dgr { color: var(--bad); }
/* the hovered card carries a transform, which traps the menu in its stacking context under the NEXT card; lift it */
.card:has(> .cardmenu) { z-index: 60; }
/* as wide as the card it sits on - a fixed width spilled past the column edge and was clipped */
.cardmenu.pick { left: 4px; right: 4px; width: auto; min-width: 0; max-height: 340px; display: flex; flex-direction: column; }
.cardmenu.pick .picklist button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cardmenu.pick .picklist { overflow-y: auto; min-height: 0; }
.cardmenu.pick .pickq { width: 100%; box-sizing: border-box; margin: 2px 0 6px; padding: 6px 8px; font: inherit; font-size: 12.9px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; outline: none; }
.cardmenu.pick .pickq:focus { border-color: var(--gold); }
.cardmenu.pick i { display: block; color: var(--muted); font-style: normal; font-size: 12px; padding: 6px 8px; }
.cardmenu.pick small { display: block; color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px 2px; }
.card .editpen { float: right; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 14px; padding: 0 2px; visibility: hidden; }
.card:hover .editpen { visibility: visible; }
.card .editpen:hover { color: var(--gold-hi); }
.card .ct { font-size: 15.8px; font-weight: 600; }
.card img.th { width: 100%; border-radius: 6px; margin-bottom: 7px; display: block; }
.card .badges { display: flex; gap: 5px; margin-top: 7px; flex-wrap: wrap; align-items: center; }
.epcnt {
  margin-left: auto; font-family: "Spline Sans Mono", monospace; font-weight: 700; font-size: 11.1px;
  padding: 1px 7px; border-radius: 6px; border: 1px solid;
}
.epcnt.g { color: #4ade80; border-color: #1d5a31; background: rgba(74, 222, 128, 0.08); box-shadow: 0 0 9px rgba(74, 222, 128, 0.35); }
.epcnt.r { color: #f87171; border-color: #5a1d1d; background: rgba(248, 113, 113, 0.08); box-shadow: 0 0 9px rgba(248, 113, 113, 0.4); }
.card .bdg { font-size: 11.7px; padding: 2px 7px; border-radius: 5px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); letter-spacing: .04em; }
.card .bdg.avatar { color: var(--purple); border-color: #3a3564; }
.card .bdg.run { color: var(--gold-hi); border-color: #4d3d13; }
.card .bdg.done { color: var(--ok); border-color: #1d4429; }
.card .bdg.fail { color: var(--bad); border-color: #4d1d1d; }
.list .addcard, .addlist {
  background: none; border: 0; color: var(--muted); cursor: pointer; text-align: left;
  padding: 8px 12px 10px; font-size: 15.2px; border-radius: 0 0 12px 12px;
}
.list .addcard:hover { color: var(--gold-hi); }
.addlist { min-width: 240px; background: rgba(255,255,255,0.02); border: 1px dashed var(--line); border-radius: 12px; padding: 14px; }
.addlist:hover { color: var(--gold-hi); border-color: var(--gold); }

/* ---------- modal ---------- */
.overlay { position: fixed; inset: 0; background: rgba(5, 7, 12, 0.72); display: grid; place-items: center; z-index: 100; padding: 20px; }
.modal { width: min(880px, 96vw); max-height: 92vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.modal.small { width: min(480px, 94vw); }
.modal h2 { font-family: "Bricolage Grotesque", serif; font-size: 1.15rem; margin-bottom: 4px; }
.modal .x { float: right; background: none; border: 0; color: var(--muted); font-size: 21.1px; cursor: pointer; }
.modal .cols { display: grid; grid-template-columns: 1.25fr 0.9fr; gap: 22px; margin-top: 14px; }
.modal:has(.cols.three) { width: min(1220px, 96vw); }
.cols.three { grid-template-columns: 1.1fr 1fr 0.95fr !important; gap: 26px; align-items: start; }
.cols.three .chat .msgs { max-height: none; height: 100%; min-height: 340px; }
.cols.three .f label:first-child { margin-top: 0; }
@media (max-width: 1020px) { .cols.three { grid-template-columns: 1fr 1fr !important; } .cols.three .chat { grid-column: 1 / -1; } }
@media (max-width: 760px) { .modal .cols, .cols.three { grid-template-columns: 1fr !important; } }
.f label { display: block; font-size: 12.3px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 14px 0 5px; }
.f input, .f select, .f textarea { width: 100%; padding: 9px 11px; background: var(--bg); border: 1px solid var(--line); border-radius: 7px; font-size: 15.8px; }
.f textarea { resize: vertical; }
.f .linkline { display: flex; gap: 8px; align-items: center; }
.f .linkline input { flex: 1; }
.f .linkline a { color: var(--gold-hi); font-size: 14.6px; white-space: nowrap; }
.upfield { display: flex; align-items: center; gap: 10px; }
.upfield a { display: block; line-height: 0; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; transition: border-color .15s; }
.upfield a:hover { border-color: var(--gold); }
.upfield a img { width: 108px; height: 62px; object-fit: cover; display: block; }
.genbox { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-top: 16px; }
.genbox .st { font-family: "Spline Sans Mono", monospace; font-size: 14px; color: var(--muted); margin-top: 8px; }
.genbox .st.run { color: var(--gold-hi); } .genbox .st.done { color: var(--ok); } .genbox .st.fail { color: var(--bad); }
.chat { display: flex; flex-direction: column; height: 100%; min-height: 260px; }
.chat .msgs { flex: 1; overflow-y: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 10px; font-size: 15.2px; min-height: 180px; max-height: 320px; }
.chat .m { margin-bottom: 8px; overflow-wrap: anywhere; word-break: break-word; }
.chat .m a { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 2px; }
.chat .m a:hover { color: var(--text); }
/* Niche Sets for a viewer: nothing that changes a set is drawn */
.nlib.viewonly .nlnewbtn, .nlib.viewonly .nlfm, .nlib.viewonly #nlrefresh, .nlib.viewonly #nlfold, .nlib.viewonly #nlinputs, .nlib.viewonly .nlch b { display: none !important; }
.nlview { color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin: -4px 0 8px; }
/* a mention notice stays until it is opened or dismissed */
.toast.mention { text-align: left; cursor: pointer; border-color: var(--ok); padding-right: 34px; }
.toast.mention small { display: block; color: var(--muted); font-size: 13px; margin-top: 3px; overflow-wrap: anywhere; }
.toast.mention .tx { position: absolute; top: 6px; right: 10px; color: var(--muted); cursor: pointer; font-size: 14px; }
.toast.mention .tx:hover { color: var(--text); }
.setsview { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); margin-right: 8px; white-space: nowrap; cursor: pointer; }
.visgrp { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
/* the rate the plan cards are priced at: images only, or images + video b-roll */
.ratepick { display: flex; gap: 8px; margin: 14px 0 4px; }
.rateopt { flex: 0 1 auto; display: grid; gap: 1px; text-align: left; padding: 8px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--text); cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; }
.rateopt small { color: var(--muted); font-size: 11.5px; font-weight: 400; }
.rateopt.on { border-color: var(--ok); background: rgba(74,222,128,.07); }
.testbanner { margin: 10px 14px 0; padding: 8px 14px; border: 1px solid rgba(224,170,30,.5); background: rgba(224,170,30,.08); border-radius: 9px; font-size: 13.5px; }
.testbanner b { letter-spacing: .08em; }
.setsview input { accent-color: var(--ok); }
/* the channel's b-roll choice: three rows, the chosen one lit */
.brollpick { display: grid; gap: 6px; margin-bottom: 4px; }
.f label.brollopt, .brollopt { display: flex; gap: 9px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: var(--panel-2); text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--text); margin: 0; }
.brollopt input { width: auto; display: inline-block; }
.f label.brollopt.on, .brollopt.on { border-color: var(--ok); background: rgba(74,222,128,.07); }
.brollopt input { margin: 3px 0 0; accent-color: var(--ok); flex: none; }
.brollopt span { display: grid; gap: 1px; min-width: 0; }
.brollopt b { font-size: 13.5px; }
.brollopt small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.brollnote { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.45; margin-top: 2px; }
.hubmode:empty { display: none; }
.hubmode { flex: none; font-size: 8px; letter-spacing: .06em; font-weight: 800; border-radius: 999px; padding: 1px 5px; }
.hubmode.scale { color: #0b1f12; background: var(--ok); }
.hubmode.test { color: var(--muted); border: 1px solid var(--line); }
.scalebadge { flex: none; font-size: 9.5px; letter-spacing: .1em; font-weight: 800; color: #0b1f12; background: var(--ok); border-radius: 999px; padding: 2px 7px; }
.chat .m b { color: var(--gold-hi); font-size: 14px; }
.chat .m small { color: var(--muted); font-size: 12.3px; margin-left: 6px; }
.chat .send { display: flex; gap: 8px; margin-top: 8px; }
.chat .send input { flex: 1; padding: 9px 11px; background: var(--bg); border: 1px solid var(--line); border-radius: 7px; }

/* team + settings */
.member { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.member img, .member .pfp { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--panel-2); display: grid; place-items: center; font-weight: 700; color: var(--gold); }
.member .who { min-width: 180px; }
.member .who small { color: var(--muted); display: block; }
.member select { background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 6px 9px; font-size: 15.2px; }
.rolechip { font-size: 12.3px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-hi); border: 1px solid #4d3d13; border-radius: 5px; padding: 2px 8px; }
.invitelink { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.invitelink a { color: var(--gold-hi); font-size: 15.2px; word-break: break-all; }
.checkrow { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 15.8px; color: var(--muted); }
/* launch niche modal */
.lsettings { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; padding: 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; }
.lset label { display: block; font-size: 9.9px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.lset select { padding: 5px 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font-size: 12.9px; }
.step { display: inline-flex; align-items: center; gap: 8px; }
.step button { width: 20px; height: 20px; background: var(--bg); border: 1px solid var(--line); border-radius: 5px; color: var(--text); cursor: pointer; font-size: 12.9px; line-height: 1; }
.step button:hover { border-color: var(--gold); color: var(--gold-hi); }
.step b { min-width: 20px; text-align: center; font-family: "Spline Sans Mono", monospace; font-size: 14px; }
.subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.stab { padding: 4px 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; font-size: 12.9px; cursor: pointer; color: var(--muted); }
.stab.on { border-color: var(--gold); color: var(--gold-hi); }
.stab b { cursor: pointer; margin-left: 3px; color: var(--muted); font-weight: 400; }
.stab b:hover { color: var(--bad); }
.staba { padding: 4px 10px; background: none; border: 1px dashed var(--line); border-radius: 999px; font-size: 12.9px; cursor: pointer; color: var(--muted); }
.staba:hover { color: var(--gold-hi); border-color: var(--gold); }

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--panel-2); border: 1px solid var(--gold); color: var(--text);
  border-radius: 9px; padding: 10px 20px; z-index: 200; font-size: 15.8px;
  /* an error that explains what to do next is worth more than one that fits on a line */
  max-width: min(560px, 92vw); line-height: 1.5; text-align: center;
}
.err { color: var(--bad); font-size: 15.2px; margin-top: 10px; }
.welcome { text-align: center; }
.welcome .wmark { width: 60px; height: 60px; border-radius: 14px; background: var(--gold); color: #14100a; display: inline-grid; place-items: center; font-family: "Bricolage Grotesque", serif; font-weight: 800; font-size: 34.7px; margin-bottom: 14px; }
.welcome h2 { font-size: 1.35rem; }
.welcome p { color: var(--muted); margin: 10px 0 20px; }

/* ---------- density pass: the whole app at "60% zoom" compactness ---------- */
body { font-size: 14.6px; }
.side { width: 200px; min-width: 200px; }
.shell.collapsed .side { margin-left: -200px; }
.side .top { padding: 12px 12px 10px; }
.side .wmark { width: 28px; height: 28px; font-size: 18.7px; border-radius: 7px; }
.side .top .t b { font-size: 15.2px; }
.side .item { padding: 6px 9px; font-size: 14.6px; }
.side .item.sub { padding-left: 30px; font-size: 14px; }
.side .sec { padding: 10px 8px 4px; font-size: 11.1px; }
.side .foot { padding: 9px 12px; }
.side .foot img, .side .foot .pfp { width: 26px; height: 26px; }
.side .foot .who b { font-size: 14px; }
.topbar { padding: 8px 14px; }
.topbar h1 { font-size: 0.95rem; }
.topbar .burger { width: 27px; height: 27px; }
.topbar .credits { font-size: 12.9px; padding: 4px 11px; }
.content { padding: 14px; }
.btn { padding: 8px 14px; font-size: 14.6px; border-radius: 7px; }
.btn.sm { padding: 5px 10px; font-size: 13.5px; }
.panelbox { padding: 14px; border-radius: 10px; }
.panelbox .big { font-size: 1.6rem; }
.boardtile { padding: 14px; border-radius: 10px; }
.kanban { gap: 9px; }
.list { width: 216px; min-width: 216px; border-radius: 10px; }
.list .lh { padding: 8px 9px 6px; }
.list .lh input { font-size: 14px; }
.list .cards { padding: 3px 6px 6px; gap: 6px; }
.card { padding: 8px 9px; border-radius: 8px; }
.card .ct { font-size: 14px; }
.card .bdg { font-size: 10.5px; padding: 1px 6px; }
.list .addcard { padding: 6px 10px 8px; font-size: 14px; }
.addlist { min-width: 200px; padding: 11px; }
.modal { padding: 18px; }
.f label { font-size: 11.1px; margin: 10px 0 4px; }
.f input, .f select, .f textarea { padding: 7px 9px; font-size: 14.6px; }
.chat .msgs { font-size: 14px; padding: 8px; }
.member { padding: 9px 0; }
.member img, .member .pfp { width: 30px; height: 30px; }
.pfpimg { width: 30px; height: 30px; min-width: 30px; }
.pfpimg.lg { width: 54px; height: 54px; min-width: 54px; }

/* ---------- topbar menu (⋮) ---------- */
.menubtn { background: none; border: 1px solid var(--line); border-radius: 7px; width: 27px; height: 27px; cursor: pointer; color: var(--muted); font-size: 17.5px; }
.menubtn:hover { color: var(--gold-hi); border-color: var(--gold); }
.menu {
  position: absolute; top: 40px; right: 14px; z-index: 90; width: 230px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,.5); padding: 10px; animation: popIn .12s ease;
}
.menu .msec { font-size: 11.1px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding: 8px 8px 4px; }
.menu .mitem { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 7px 8px; border-radius: 7px; background: none; border: 0; cursor: pointer; color: var(--text); font-size: 14.6px; }
.menu .mitem:hover { background: var(--panel-2); color: var(--gold-hi); }
.menu .mitem .soon { margin-left: auto; font-size: 10.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
.menu .mrow { display: flex; align-items: center; justify-content: space-between; padding: 7px 8px; font-size: 14.6px; }
.menu .swatches { display: flex; gap: 6px; padding: 4px 8px 8px; flex-wrap: wrap; }
.menu .sw { width: 17px; height: 17px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.menu .sw.on { border-color: var(--text); }
.toggle { position: relative; width: 32px; height: 18px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); cursor: pointer; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); transition: left .15s, background .15s; }
.toggle.on { background: var(--gold); border-color: var(--gold); }
.toggle.on::after { left: 16px; background: #14100a; }

/* add-card composer */
.composer { margin: 0 5px 5px; padding: 8px; display: grid; gap: 6px; background: var(--card); border: 1px solid var(--gold); border-radius: 9px; }
.tbtools { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 0; margin-left: 6px; }
.tbtools .bsearch { flex: 0 1 340px; }
.searchwrap { position: relative; flex: 0 1 280px; display: block; }
.searchwrap .bsearch { width: 100%; }
.searchdrop {
  position: absolute; top: 30px; left: 0; right: 0; z-index: 80;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 16px 46px rgba(0,0,0,.55); padding: 5px; max-height: 320px; overflow-y: auto; animation: popIn .1s ease;
}
.searchdrop button { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left; background: none; border: 0; color: var(--text); font-size: 12.9px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.searchdrop button:hover { background: var(--panel); color: var(--gold-hi); }
.searchdrop button small { margin-left: auto; color: var(--muted); font-size: 11.1px; }
.searchdrop .tag { font-size: 9.9px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
.searchdrop .none { padding: 8px; color: var(--muted); font-size: 12.9px; }
.composer .crow { display: flex; gap: 6px; align-items: center; }
.composer .emobtn { width: 30px; height: 30px; min-width: 30px; background: var(--bg); border: 1px solid var(--line); border-radius: 7px; cursor: pointer; font-size: 16.4px; padding: 0; }
.composer .emobtn:hover { border-color: var(--gold); }
.composer .cname { flex: 1; min-width: 0; padding: 7px 9px; background: var(--bg); border: 1px solid var(--line); border-radius: 7px; color: var(--text); font-size: 14.6px; }
.composer .ctmpl { width: 100%; padding: 6px 9px; background: var(--bg); border: 1px solid var(--line); border-radius: 7px; color: var(--text); font-size: 14px; }
.composer .cadd { flex: 1; }
.emopal { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px; }
.emopal button { background: none; border: 0; font-size: 17.5px; cursor: pointer; padding: 3px; border-radius: 5px; }
.emopal button:hover { background: var(--panel-2); }

/* drag indicators */
.dropline { width: 3px; min-width: 3px; align-self: stretch; border-radius: 2px; background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.droplineH { height: 3px; min-height: 3px; border-radius: 2px; background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.list.stack-target { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 22px var(--gold-dim); }

/* list ⋯ menu */
.list { position: relative; }
.listmenu {
  position: absolute; top: 26px; right: 5px; z-index: 40; width: 140px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px;
  box-shadow: 0 14px 40px rgba(0,0,0,.5); padding: 5px; animation: popIn .1s ease;
}
.listmenu button { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--text); font-size: 12.9px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.listmenu button:hover { background: var(--panel); color: var(--gold-hi); }
.listmenu button[disabled] { color: var(--muted); opacity: .5; cursor: default; }
.listmenu button.dgr { color: var(--bad); }

/* EP composer row */
.composer .eprow { font-size: 12.3px; color: var(--muted); gap: 7px; }
.composer .ecount { width: 52px; padding: 5px 7px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font-size: 12.9px; text-align: center; }

/* breadcrumb (channel boards) */
.breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; font-size: 14px; }
.breadcrumb .bcback { background: none; border: 1px solid var(--line); border-radius: 6px; width: 24px; height: 24px; cursor: pointer; color: var(--muted); }
.breadcrumb .bcback:hover { color: var(--gold-hi); border-color: var(--gold); }
.breadcrumb .bcws { color: var(--muted); }
.breadcrumb .bcsep { color: var(--line); }
.breadcrumb b { font-size: 14.6px; }
.breadcrumb .bcpfps { display: flex; align-items: center; margin-left: 6px; }
.breadcrumb .bcpfps .pfpimg { width: 20px; height: 20px; min-width: 20px; font-size: 11.7px; margin-left: -6px; border: 1.5px solid var(--bg); }
.breadcrumb .more { font-size: 11.7px; color: var(--muted); margin-left: 4px; }

/* labels */
.lbl { display: inline-block; color: #101014; font-size: 9.9px; font-weight: 700; padding: 1.5px 7px; border-radius: 4px; margin-right: 4px; letter-spacing: .02em; }
.card .lblrow { margin-bottom: 5px; line-height: 1.7; }
.lblbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; position: relative; }
.lblpop {
  position: absolute; top: 28px; left: 0; z-index: 60; width: 200px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0,0,0,.5); padding: 10px; animation: popIn .1s ease;
}
.lblpop > b { font-size: 12.9px; display: block; margin-bottom: 7px; }
.lblopt { display: flex; align-items: center; gap: 7px; padding: 3px 0; cursor: pointer; }
.lblopt .lbl { flex: 1; text-align: left; padding: 3px 8px; font-size: 11.7px; }
.newlbl { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
.newlbl .nlname { width: 100%; padding: 5px 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font-size: 12.9px; margin-bottom: 6px; }
.nlcolors { display: flex; gap: 5px; flex-wrap: wrap; }
.nlc { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,.3); cursor: pointer; padding: 0; }
.nlc:hover { transform: scale(1.2); }

/* board toolbar */
.btoolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.btn.launch { background: linear-gradient(160deg, #34d399, #10b981); color: #06281c; font-weight: 700; }
.bsearch { flex: 0 1 340px; padding: 8px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; color: var(--text); font-size: 14.6px; }

/* light theme */
body[data-light] {
  --bg: #f2f3f7; --panel: #ffffff; --panel-2: #eef0f4; --card: #ffffff;
  --line: #dcdfe6; --text: #191a1f; --muted: #6a7080; --console-bg: #ffffff;
}
body[data-light] .list, body[data-light] .card { box-shadow: 0 1px 4px rgba(30,34,60,.06); }

/* ---------- density v2: "67% zoom" as the native look ---------- */
body { font-size: 12.9px; }
.side { width: 168px; min-width: 168px; }
.shell.collapsed .side { margin-left: -168px; }
.side .top { padding: 10px 10px 8px; }
.side .wmark { width: 24px; height: 24px; font-size: 16.4px; }
.side .top .t b { font-size: 13.5px; }
.side .item { padding: 5px 8px; font-size: 12.9px; }
.side .item.sub { padding-left: 26px; font-size: 12.3px; }
.side .sec { font-size: 9.9px; padding: 8px 7px 3px; }
.side .foot { padding: 7px 10px; }
.side .foot img, .side .foot .pfp { width: 22px; height: 22px; }
.side .foot .who b { font-size: 12.3px; } .side .foot .who small { font-size: 10.5px; }
.side .collapse { width: 20px; height: 20px; font-size: 14px; }
.credcard { padding: 9px; margin: 3px 6px 8px; }
.credcard > b { font-size: 12.3px; }
.credcard .cu { font-size: 11.1px; }
.topbar { padding: 6px 12px; }
.topbar h1 { font-size: 0.85rem; }
.topbar .burger { width: 24px; height: 24px; font-size: 14px; }
.topbar .credits { font-size: 11.1px; padding: 3px 9px; }
.menubtn { width: 24px; height: 24px; font-size: 15.2px; }
.content { padding: 11px; }
.btn { padding: 6px 12px; font-size: 12.9px; }
.btn.sm { padding: 4px 9px; font-size: 11.7px; }
.bsearch { padding: 6px 10px; font-size: 12.3px; }
.tbtools .bsearch { flex: 0 1 280px; }
.kanban { gap: 8px; }
.lane, .lane .list { width: 178px; min-width: 178px; }
.list { width: 178px; min-width: 178px; border-radius: 9px; }
.list .lh { padding: 6px 7px 5px; gap: 5px; }
.list .lh input { font-size: 12.3px; }
.list .lh .cnt { font-size: 10.5px; padding: 1px 5px; }
.list .cdot { width: 10px; height: 10px; min-width: 10px; }
.list .cards { padding: 2px 5px 5px; gap: 5px; }
.card { padding: 6px 8px; border-radius: 7px; }
.card .ct { font-size: 12.3px; }
.card .bdg { font-size: 9.4px; padding: 1px 5px; }
.list .addcard { padding: 5px 8px 7px; font-size: 12.3px; }
.addlist { min-width: 170px; padding: 9px; font-size: 12.9px; }
.composer .cname, .composer .ctmpl { padding: 5px 8px; font-size: 12.3px; }
.composer .emobtn { width: 25px; height: 25px; min-width: 25px; font-size: 14px; }
/* keep the composer inside the narrow column — inputs have huge default min-widths */
.list .cards { overflow-x: hidden; }
.composer { min-width: 0; max-width: 100%; }
.composer .crow { min-width: 0; }
.composer .cname { flex: 1 1 0; width: 0; min-width: 0; }
.composer .ctmpl { width: 100%; min-width: 0; }
.composer .crow .btn { padding: 4px 8px; font-size: 11.7px; white-space: nowrap; }
.emopal { grid-template-columns: repeat(6, 1fr); }
.panelbox { padding: 11px; }
.panelbox .big { font-size: 1.3rem; }
.boardtile { padding: 11px; }
.modal { padding: 15px; }
.modal h2 { font-size: 1rem; }
.f label { font-size: 9.9px; margin: 8px 0 3px; }
.f input, .f select, .f textarea { padding: 6px 8px; font-size: 12.9px; }
.chat .msgs { font-size: 12.3px; }
.menu { width: 205px; }
.menu .mitem { font-size: 12.9px; padding: 6px 7px; }
.menu .mrow { font-size: 12.9px; }
.pfpimg { width: 26px; height: 26px; min-width: 26px; }
.pfpimg.lg { width: 46px; height: 46px; min-width: 46px; }
.member img, .member .pfp { width: 26px; height: 26px; }

/* smoothness */
.card, .list, .boardtile, .btn, .side .item { transition: background .12s ease, border-color .12s ease, transform .12s ease; }
.card:active { transform: scale(0.985); }
.overlay { animation: fadeIn .12s ease; }
.modal { animation: popIn .14s ease; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes popIn { from { opacity: 0; transform: translateY(8px) scale(0.985); } }

/* ---------- v22: credits via card + admin page + competitor sets ---------- */
.navbadge { margin-left: auto; background: var(--gold); color: #14100a; font-size: 11.7px; font-weight: 700; border-radius: 999px; padding: 1px 7px; }
.amtpick { display: flex; gap: 8px; margin-top: 14px; }
.amtpick button { flex: 1; padding: 9px 0; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; color: var(--text); font-weight: 600; cursor: pointer; font-size: 15.2px; }
.amtpick button.on, .amtpick button:hover { border-color: var(--gold); color: var(--gold-hi); }
.howpay { margin: 16px 0 0 18px; font-size: 14.6px; color: var(--muted); line-height: 1.55; }
.howpay b { color: var(--text); }
.chip { display: inline-block; font-size: 12.3px; letter-spacing: .08em; text-transform: uppercase; border-radius: 5px; padding: 2px 8px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.chip.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.chip.paid { color: var(--gold-hi); border-color: #4d3d13; }
.chip.wait { color: var(--muted); }
.chip.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.ledger div .chip { align-self: center; }
.admrow .amtin { width: 84px; padding: 5px 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 7px; font-size: 15.2px; }
.admrow .rowflex { gap: 6px; }
.upfield a[hidden] { display: none; }
.emojibtn { width: 40px; height: 38px; flex: 0 0 40px; background: var(--bg); border: 1px solid var(--line); border-radius: 7px; font-size: 22.2px; cursor: pointer; line-height: 1; }
.emojibtn:hover { border-color: var(--gold); }
/* the grid is its own element now, because the search box filters it down to a handful of icons */
.emojipick { position: absolute; z-index: 5; margin-top: 42px; display: grid; gap: 8px; padding: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.emojipick .egrid { display: grid; grid-template-columns: repeat(9, 32px); gap: 4px; min-height: 32px; }
.emojipick button { width: 32px; height: 32px; background: var(--panel-2); border: 1px solid transparent; border-radius: 6px; font-size: 19.9px; cursor: pointer; line-height: 1; }
.emojipick button.on, .emojipick button:hover { border-color: var(--gold); }
.emojipick input { padding: 5px 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; font-size: 14px; }
.emojipick .enone { color: var(--muted); font-size: 13.5px; }
.emojipick .enone[hidden] { display: none; }
.f .rowflex { position: relative; }

/* ---------- v23: ASCII "W" on cards while an automation runs (neon green) → gold when finished ---------- */
.card .wlogo { position: absolute; right: 8px; top: 8px; margin: 0; font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 7.6px; line-height: 1.1; letter-spacing: 0; pointer-events: none; z-index: 2; padding: 3px 4px; border-radius: 5px; background: rgba(5, 7, 12, .55); user-select: none; }
.card .wlogo.neon { color: #39ff14; text-shadow: 0 0 4px #39ff14, 0 0 10px rgba(57, 255, 20, .75), 0 0 18px rgba(57, 255, 20, .45); animation: neonpulse 1.1s ease-in-out infinite alternate; }
.card .wlogo.gold { color: var(--gold-hi); text-shadow: 0 0 4px var(--gold), 0 0 10px rgba(224, 170, 30, .6); }
.card.haslogo .ct { padding-right: 62px; }
@keyframes neonpulse { from { opacity: .55; filter: brightness(.9); } to { opacity: 1; filter: brightness(1.35); } }
.card .bdg.queued { color: #39ff14; border-color: #1d4429; }
.genbox .st.queued { color: #39ff14; }
.upfield .dl { white-space: nowrap; }
/* link cards: URL → rich preview (image, title, description, source) — click opens the link, ✎ edits */
.card.linkcard { cursor: pointer; }
.card.linkcard img.th { aspect-ratio: 16/9; object-fit: cover; background: var(--panel-2); }
.card.linkcard .ct { color: var(--gold-hi); word-break: break-word; }
.card.linkcard .editpen { visibility: visible; opacity: .5; }
.card.linkcard:hover .editpen { opacity: 1; }
.card.linkcard .ldesc { font-size: 13.5px; color: var(--muted); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card.linkcard .lsrc { margin-top: 7px; font-size: 11.1px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.tbback { margin-right: 6px; }
/* avatar variants (same presenter, 3 backgrounds) */
.avvars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.avvars:empty { display: none; }
.avvar { margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel-2); display: flex; flex-direction: column; }
.avvar.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.avvar img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.avvar .btn { border-radius: 0; width: 100%; }
.avvar .avbtns { display: flex; }
.avvar .avbtns .btn:first-child { flex: 1; }
.f textarea#cscript { font-family: "Instrument Sans", system-ui, sans-serif; line-height: 1.5; }
/* card modal: ‹ 3 / 12 › navigation (← / → keys) */
.modal .cardnav { float: right; display: inline-flex; align-items: center; gap: 6px; margin: 2px 12px 0 0; color: var(--muted); font-size: 14px; font-family: "Spline Sans Mono", monospace; }
.modal .cardnav .cn { width: 26px; height: 26px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font-size: 19.9px; line-height: 1; cursor: pointer; }
.modal .cardnav .cn:hover { border-color: var(--gold); color: var(--gold-hi); }
.avvars.thvars .avvar img { aspect-ratio: 16 / 9; }
/* Wifi Engine progress */
.card .pbar { width: 100%; height: 4px; background: var(--bg); border-radius: 2px; overflow: hidden; margin-top: 4px; }
.card .pbar div { height: 100%; background: linear-gradient(90deg, #39ff14, var(--gold)); border-radius: 2px; transition: width .6s ease; }
.card .bdg.retry { cursor: pointer; }
.card .bdg.retry:hover { border-color: var(--bad); filter: brightness(1.25); }
.svcbanner { background: #3a1d1d; color: #ffb4b4; border-bottom: 1px solid #5a2626; padding: 7px 14px; font-size: 14.6px; text-align: center; }
.svcbanner b { color: #fff; }
/* "bots" status light (top bar): neon green = vgen working, neon red = down */
.topbar .bots { display: inline-flex; align-items: center; gap: 7px; margin-right: 10px; font-family: "Spline Sans Mono", monospace; font-size: 14px; color: var(--muted); cursor: pointer; user-select: none; }
.topbar .bots .dot { width: 11px; height: 11px; border-radius: 50%; background: #555; box-shadow: none; transition: background .3s, box-shadow .3s; }
.topbar .bots.up .dot { background: #39ff14; box-shadow: 0 0 6px #39ff14, 0 0 14px rgba(57, 255, 20, .7); animation: botpulse 2.2s ease-in-out infinite; }
.topbar .bots.down .dot { background: #ff2d2d; box-shadow: 0 0 6px #ff2d2d, 0 0 16px rgba(255, 45, 45, .8); animation: botpulse 1s ease-in-out infinite; }
.topbar .bots.up { color: #39ff14; } .topbar .bots.down { color: #ff6b6b; }
@keyframes botpulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.5); } }
.topbar .botsrow { display: inline-flex; gap: 12px; margin-right: 12px; }
.topbar .botsrow .bots { margin-right: 0; }

/* finished-stage call-to-action pill: one clean line, reads as "click me" instead of a status dump */
.card .bdg.done.cta { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; letter-spacing: .02em; color: #eafff1; background: linear-gradient(135deg, #163a25, #0f2a1b); border-color: #2c7a4b; box-shadow: 0 0 0 1px rgba(57,255,20,.08), 0 0 10px rgba(57,255,20,.12); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.card:hover .bdg.done.cta { filter: brightness(1.15); }

/* voice picker: select + ▶ Preview (+ 🧬 Clone for super admins) on one line */
.voicerow { display: flex; gap: 6px; align-items: center; }
.voicerow select { flex: 1; min-width: 0; }
.voicerow .btn { white-space: nowrap; }

/* sidebar: never wrap or scroll sideways — labels ellipsize, SOON pills stay on the line */
.side { overflow: hidden; }
.side nav { overflow-x: hidden; }
.side .item { white-space: nowrap; min-width: 0; }
.side .item .nl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.side .item .soon { flex: none; font-size: 9.9px; padding: 1px 5px; letter-spacing: .08em; }
.side .item .ic { flex: none; }
.side { width: 222px; min-width: 222px; }
.shell.collapsed .side { margin-left: -222px; }

/* settings: fill the landscape — as many equal columns as the window has room for.
   A fixed two columns capped at 1180px left half of a widescreen empty; auto-fit adds a third
   column on a wide monitor and collapses to one on a laptop without needing its own breakpoint. */
.settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; align-items: start; }
.settings .col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.settings .panelbox { margin-top: 0; }
@media (max-width: 860px) { .settings { grid-template-columns: 1fr; } }



/* ================= WIFI INFLUENCERS 1:1 THEME =================
   Flat near-black, purple accent, green CTAs — matched to the original Wifi Influencers UI. */
:root {
  --bg: #0a0a10;
  --panel: #101017;
  --panel-2: #16161f;
  --card: #181822;
  --line: #272727;
  --text: #f4f4f8;
  --muted: #83839a;
  --purple: #7c6cf0;
  --purple-hi: #a89cf5;
  --green: #2fd05f;
  --ok: #4ade80;
}
body { background: var(--bg); }

/* ---- sidebar ---- */
.side { background: #0d0d14; border-right: 1px solid #1e1e1e; }
.side .top { padding: 14px 14px 12px; }
.side .wmark { background: #fff; color: #0a0a10; border-radius: 50%; }
.side .sec { display: flex; align-items: center; font-size: 11.1px; letter-spacing: .18em; padding: 16px 10px 6px; }
.side .sec .secv { margin-left: auto; opacity: .6; font-size: 12.9px; letter-spacing: 0; }
.side .item { border-radius: 9px; color: #b9b9c9; font-weight: 500; padding: 7px 10px; }
.side .item .ic { opacity: .8; filter: grayscale(.3); }
.side .item:hover { background: #16161f; color: var(--text); }
.side .item.on { background: #2c2c2c; color: #fff; position: relative; }
.side .item.on::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--purple); margin-left: auto; flex: none; }
.side .item.on .nl { flex: none; }
.side .item .soon { background: #16161f; border-color: #2d2d2d; font-size: 9.4px; color: #6f6f85; }
.side .foot { border-top: 1px solid #1e1e1e; }
.side .foot .who b { font-size: 14.6px; }
.credcard { background: #12121a; border-color: #252525; border-radius: 12px; }

/* ---- topbar ---- */
.topbar { background: var(--bg); border-bottom: 1px solid #17171f; padding: 10px 16px; }
.topbar h1 { font-size: 1rem; }
.menubtn, .topbar .burger { background: #14141c; border-color: #272727; border-radius: 9px; }
.btn.launch { background: linear-gradient(160deg, #33d968, #1fab4b); color: #fff; border: 0; font-weight: 700; border-radius: 10px; box-shadow: 0 4px 14px rgba(47, 208, 95, 0.25); }
.btn.launch:hover { filter: brightness(1.08); }
.bsearch { background: #12121a !important; border: 1px solid #272727 !important; border-radius: 10px; padding: 8px 40px 8px 30px; min-width: 300px; color: var(--text); }
.searchwrap { position: relative; display: inline-flex; }
.searchwrap::before { content: '🔍'; position: absolute; left: 9px; top: 50%; transform: translateY(-50%); font-size: 12.9px; opacity: .55; pointer-events: none; }
.searchwrap::after { content: '⌘K'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 11.1px; color: #6f6f85; border: 1px solid #2d2d2d; border-radius: 5px; padding: 1px 5px; background: #14141c; pointer-events: none; }

/* ---- board / columns ---- */
.content { background: var(--bg); }
.kanban { gap: 12px; }
.list { background: #101018; border: 1px solid #212121; border-radius: 13px; }
.list .lh input { font-size: 14.6px; font-weight: 700; }
.list .cnt { background: rgba(74, 222, 128, 0.10); border: 1px solid rgba(74, 222, 128, 0.45); color: var(--ok); border-radius: 7px; font-size: 12.3px; font-weight: 700; padding: 1px 7px; min-width: 20px; text-align: center; }
.addlist { background: rgba(255, 255, 255, 0.015); border-color: #212121; }
.addcard { color: #6f6f85; }
.addcard:hover { color: var(--text); }

/* ---- cards ---- */
.card {
  background: linear-gradient(165deg, #1f1f1f, #16161f 70%);
  border: 1px solid #292929;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.card:hover { border-color: #3a3a3a; }
.card .ct { font-size: 14.6px; font-weight: 600; }
.card.notes { background: linear-gradient(165deg, #262038, #1a1826); border-color: #3a3355; }
.card .bdg.avatar { background: rgba(124, 108, 240, 0.14); border: 1px solid rgba(124, 108, 240, 0.45); color: var(--purple-hi); border-radius: 999px; padding: 2px 9px; }
.card .bdg.avatar::before { content: '●'; font-size: 8.2px; margin-right: 4px; vertical-align: 1px; }
.lbl { border-radius: 999px; }
.epcnt { border-radius: 999px; background: transparent; font-weight: 700; }
.epcnt.g { border: 1px solid rgba(124, 108, 240, 0.55); color: var(--purple-hi); }
.epcnt.r { border: 1px solid rgba(248, 113, 113, 0.55); color: var(--bad); }
.epcnt::before { content: '↗'; margin-right: 2px; }

/* ---- panels, modals, menus ---- */
.panelbox, .boardtile { background: #10101a; border-color: #232323; border-radius: 14px; }
.boardtile:hover { border-color: rgba(124, 108, 240, 0.5); }
.modal { background: #12121b; border-color: #272727; border-radius: 16px; }
.overlay { background: rgba(5, 5, 10, 0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.menu, .cardmenu, .lblpop { background: #14141d; border-color: #2d2d2d; border-radius: 12px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55); }
.toast { background: #14141d; border: 1px solid #2d2d2d; }
.composer { background: #14141d; border-color: var(--purple); }
input, select, textarea { background: #12121a !important; border: 1px solid #272727 !important; border-radius: 9px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: rgba(124, 108, 240, 0.6) !important; }
select option { background: #14141d; }

/* buttons: primary actions go green like the original */
.btn { border-radius: 10px; }
.btn.gold { background: linear-gradient(160deg, #33d968, #1fab4b); color: #fff; box-shadow: 0 4px 14px rgba(47, 208, 95, 0.18); }
.btn.ghost { background: #14141c; border-color: #272727; }
.chip.ok { background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.45); color: var(--ok); border-radius: 999px; }
.rolechip { color: var(--purple-hi); border-color: rgba(124, 108, 240, 0.4); border-radius: 999px; }

/* scrollbars */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2d2d2d; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #3c3c3c; border: 2px solid transparent; background-clip: content-box; }

/* keep the neon service lights + gold W logo as-is */

/* ---- 1:1 refinement pass: match the original board texture ---- */
.content { padding: 14px 16px; }
.kanban { gap: 14px; }
.list { background: #131319; border: 1px solid #1e1e28; border-radius: 14px; }
.list .lh { padding: 12px 12px 8px; gap: 7px; }
/* header: emoji+name, count pill right after, controls (⋮⋮ ＋ ⋯) at the far right */
.list .lh input { order: 1; flex: 0 1 auto; width: auto; min-width: 40px; font-size: 14.6px; font-weight: 700; }
.list .lh .cnt { order: 2; margin-right: auto; }
.list .lh .cdot { order: 0; width: 10px; height: 10px; min-width: 10px; border-color: #2f2f2f; }
.list .lh .grip { order: 3; opacity: .55; }
.list .lh .addtop { order: 4; font-size: 17.5px; line-height: 1; opacity: .7; }
.list .lh .addtop:hover, .list .lh .lmenu:hover { opacity: 1; color: var(--text); }
.list .lh .lmenu { order: 5; opacity: .7; }
.list .cnt { background: rgba(74, 222, 128, 0.08) !important; border: 1px solid rgba(74, 222, 128, 0.5) !important; color: #57e389 !important; border-radius: 8px !important; font-size: 12.3px !important; font-weight: 700; padding: 1px 8px !important; box-shadow: none; }
.list .cards { padding: 4px 10px 10px; gap: 10px; }
.list .cards::-webkit-scrollbar { width: 7px; }
.list .cards::-webkit-scrollbar-thumb { background: #313131; }
.addcard { text-align: left; padding: 8px 12px 12px; font-size: 14.6px; }

/* cards: roomier, faint violet sheen */
.card { padding: 11px 12px; border-radius: 12px; background: linear-gradient(168deg, #202020, #15151e 75%); border: 1px solid #2b2b2b; }
.card .ct { font-size: 14.6px; font-weight: 600; margin-bottom: 7px; }
.card .bdg { font-size: 11.1px; }

/* the ↗n badge: small outline pill, no glow */
.epcnt, .epcnt.g, .epcnt.r { background: transparent !important; box-shadow: none !important; font-size: 11.7px !important; font-weight: 700; padding: 1px 8px !important; border-radius: 999px !important; }
.epcnt.g { border: 1px solid rgba(124, 108, 240, 0.55) !important; color: var(--purple-hi) !important; }
.epcnt.r { border: 1px solid rgba(248, 113, 113, 0.5) !important; color: #f0908f !important; }

/* ↗ badge as a YouTube-channel link when the niche card has a channel URL */
.epcnt.link { cursor: pointer; }
.epcnt.link:hover { filter: brightness(1.35); border-color: var(--purple-hi) !important; }

/* ---- liquid-glass depth pass: same palette, but surfaces get light, curvature and lift ---- */
.list {
  background: linear-gradient(180deg, #17171f, #111118 78%);
  border: 1px solid rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 28px rgba(0, 0, 0, 0.38);
}
.card {
  background: linear-gradient(165deg, #252525, #17171f 68%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 5px 14px rgba(0, 0, 0, 0.32);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.card:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 22px rgba(0, 0, 0, 0.45);
}
.card:active { transform: translateY(0); }
.side { background: linear-gradient(180deg, #101018, #0b0b12); }
.topbar { background: rgba(10, 10, 16, 0.72); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); }
.panelbox, .boardtile {
  background: linear-gradient(172deg, #15151f, #0f0f17 80%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 30px rgba(0, 0, 0, 0.35);
}
.modal {
  background: rgba(19, 19, 28, 0.88);
  backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 30px 70px rgba(0, 0, 0, 0.6);
}
.menu, .cardmenu, .lblpop, .toast, .searchdrop {
  background: rgba(22, 22, 32, 0.82);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 20px 48px rgba(0, 0, 0, 0.55);
}
.btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.btn.gold, .btn.launch { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 16px rgba(47, 208, 95, 0.28); }
.btn.gold:active, .btn.launch:active { transform: translateY(1px); }
.credcard { background: linear-gradient(172deg, #15151f, #0f0f17); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.card .bdg, .chip, .rolechip, .list .cnt { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.side .item.on { background: linear-gradient(165deg, #353535, #292929); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09); }
.bsearch { box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.35) !important; }
input, select, textarea { box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3); }
/* subtle ambient sheen behind everything so the glass has something to catch */
body::before {
  content: ''; position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 30% at 15% 5%, rgba(124, 108, 240, 0.07), transparent 60%),
    radial-gradient(36% 28% at 85% 10%, rgba(47, 208, 95, 0.05), transparent 60%),
    radial-gradient(44% 36% at 75% 92%, rgba(124, 108, 240, 0.05), transparent 60%);
}

/* fix: dropdown menus must float ABOVE the glass columns (they were sliding behind, peeking through the gaps) */
.menu, .cardmenu, .lblpop, .searchdrop { z-index: 500; }

/* card badge: back to the plain remaining-topics counter (green ok / red low), no arrow, no purple pill */
.epcnt, .epcnt.g, .epcnt.r { font-size: 12.9px !important; padding: 2px 8px !important; border-radius: 999px !important; font-weight: 700; }
.epcnt::before { content: '' !important; margin: 0 !important; }
.epcnt.g { color: #4ade80 !important; border: 1px solid #1d5a31 !important; background: rgba(74, 222, 128, 0.08) !important; box-shadow: 0 0 9px rgba(74, 222, 128, 0.35) !important; }
.epcnt.r { color: #f87171 !important; border: 1px solid #5a1d1d !important; background: rgba(248, 113, 113, 0.08) !important; box-shadow: 0 0 9px rgba(248, 113, 113, 0.4) !important; }

/* readable headers + compact spacing, like the old board */
.list .lh input { order: 1; flex: 1 1 auto; width: auto; min-width: 0; }  /* full column name visible again */
.list .lh .cnt { margin-right: 0; }
.list .lh { padding: 10px 10px 6px; gap: 6px; }
.content { padding: 10px 12px; }
.kanban { gap: 9px; }
.list .cards { padding: 3px 8px 8px; gap: 7px; }
.card { padding: 9px 10px; }
.card .ct { margin-bottom: 5px; }
.addcard { padding: 6px 10px 10px; }

/* ---- FINAL header + density pass (hard overrides): full names, old-board compactness ---- */
.list { width: 236px !important; min-width: 236px !important; border-radius: 12px; }
.lane { width: 236px !important; min-width: 236px !important; }
.kanban { gap: 8px !important; }
.content { padding: 8px 10px !important; }
.list .lh { padding: 9px 8px 5px !important; gap: 4px !important; }
.list .lh input { order: 0 !important; flex: 1 1 50px !important; width: auto !important; min-width: 50px !important; font-size: 13.5px !important; font-weight: 700 !important; }
.list .lh .cdot { order: -1 !important; width: 8px !important; height: 8px !important; min-width: 8px !important; }
.list .lh .cnt { order: 1 !important; margin: 0 !important; font-size: 11.1px !important; padding: 1px 6px !important; }
.list .lh .grip { order: 2 !important; font-size: 11.7px !important; padding: 0 1px !important; }
.list .lh .addtop { order: 3 !important; font-size: 15.2px !important; padding: 0 2px !important; }
.list .lh .lmenu { order: 4 !important; font-size: 14px !important; padding: 0 2px !important; }
.list .cards { padding: 2px 7px 7px !important; gap: 6px !important; }
.card { padding: 8px 9px !important; border-radius: 10px !important; }
.card .ct { font-size: 14px !important; margin-bottom: 4px !important; }
.card .bdg { font-size: 10.5px !important; padding: 1px 6px !important; }
.epcnt, .epcnt.g, .epcnt.r { font-size: 11.7px !important; padding: 1px 7px !important; }
.addcard { padding: 5px 9px 9px !important; font-size: 13.5px !important; }

/* per request: no card-count pill in column headers (the number still exists for menus/logic, just not shown) */
.list .lh .cnt { display: none !important; }

/* hold-Shift niche switcher pill */
.nswitch {
  /* just under the top bar: dead centre sat over whatever was being read, and over the toasts */
  position: fixed; left: 50%; top: 64px; transform: translateX(-50%); z-index: 600;
  display: flex; align-items: center; gap: 14px; max-width: 84vw;
  background: rgba(17, 17, 25, 0.92); border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 999px;
  padding: 11px 20px; backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 44px rgba(0, 0, 0, 0.55);
  animation: popIn .12s ease;
}
.nswitch .prev, .nswitch .next { color: var(--muted); font-size: 14px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nswitch .cur { font-weight: 700; font-size: 15.8px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nswitch .chev { color: var(--muted); font-size: 16.4px; }

/* in-card video preview */
.cardvid { width: 100%; max-height: 350px; border-radius: 12px; margin: 10px 0 8px; background: #000; border: 1px solid var(--line); outline: none; }

/* competitor thumbnail picker */
.cthumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; max-height: 62vh; overflow-y: auto; }
.cthumb { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; cursor: pointer; background: #14141d; transition: border-color .12s, transform .12s; }
.cthumb:hover { border-color: var(--purple-hi); transform: translateY(-2px); }
.cthumb.busy { opacity: .5; pointer-events: none; }
.cthumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.cthumb .ct-meta { padding: 7px 9px; }
.cthumb .ct-meta b { display: block; font-size: 13.5px; line-height: 1.3; margin-bottom: 3px; }
.cthumb .ct-meta small { color: var(--muted); font-size: 12.3px; }
.cthumb .ct-out { color: #4ade80; font-weight: 700; }

/* ---- motion: quick and smooth ---- */
.side { transition: margin-left .18s cubic-bezier(.22, .61, .36, 1); will-change: margin-left; }
.btn, .side .item, .card, .boardtile, .cthumb, .avvar { transition: background-color .12s ease, border-color .12s ease, transform .12s cubic-bezier(.22,.61,.36,1), box-shadow .12s ease, filter .12s ease; }
.btn:active { transform: translateY(1px); }
.menu, .cardmenu, .lblpop, .searchdrop, .emojipick { animation: popIn .13s cubic-bezier(.22, .61, .36, 1); }
.overlay { animation: fadeIn .13s ease; }
.modal { animation: modalIn .17s cubic-bezier(.22, .61, .36, 1); }
@keyframes modalIn { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
.toast { animation: popIn .15s cubic-bezier(.22, .61, .36, 1); }
.card.dragging { transition: none; }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* board member stack in the toolbar */
.bmembers { display: inline-flex; align-items: center; margin-left: 6px; }
.bmembers .pfpimg { width: 24px; height: 24px; min-width: 24px; font-size: 11.7px; margin-left: -7px; border: 2px solid var(--bg); }
.bmembers .pfpimg:first-child { margin-left: 0; }
.bmembers .bmmore { font-size: 12.3px; color: var(--muted); margin-left: 5px; }
.sechead { font-size: 12.3px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 4px 0 6px; display: flex; align-items: center; gap: 8px; }
.member .pfpwrap { display: inline-flex; }

/* Chat | Activity tabs inside the card modal */
.ctabs { display: flex; gap: 14px; margin-bottom: 8px; }
.ctab { background: none; border: 0; padding: 0 0 5px; cursor: pointer; font-size: 12.3px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid transparent; }
.ctab.on { color: var(--text); border-bottom-color: var(--purple); }
.act { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14.6px; color: var(--muted); }
.act .who { color: var(--text); font-weight: 600; }
.act b { color: var(--text); font-weight: 600; }
.act small { display: block; font-size: 12.3px; opacity: .7; margin-top: 2px; }

/* delete button on a workspace tile */
.wstile { position: relative; }
.wstile .wsdel { position: absolute; top: 8px; right: 8px; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 15.2px; opacity: 0; transition: opacity .12s ease, color .12s ease; padding: 2px 4px; border-radius: 6px; }
.wstile:hover .wsdel { opacity: .75; }
.wstile .wsdel:hover { opacity: 1; color: var(--bad); background: rgba(248,113,113,.1); }

/* topics badge aligned with the niche title */
.card .ct { display: flex; align-items: center; gap: 7px; }
.card .ct .epcnt { margin-left: auto; flex: none; }
.card .ct .editpen { flex: none; }
.card .ct > .epcnt + .editpen { margin-left: 0; }

/* the topbar and its dropdowns must float above the board columns */
.topbar { position: relative; z-index: 300; }
.searchdrop { z-index: 600; }
.bmembers .bmp { display: inline-flex; }
.bmembers .bmp + .bmp .pfpimg { margin-left: -7px; }

/* character count under the title field */
.charcount { font-size: 13.5px; color: var(--ok); margin: 4px 0 2px; }
.charcount.over { color: var(--bad); }

/* topics badge pinned to the card's top-right edge (stays put however the title wraps) */
.card .ct { position: static; padding-right: 44px; display: block; }
.card .ct .epcnt { position: absolute; top: 9px; right: 9px; margin: 0; z-index: 2; }
.card .editpen { position: absolute; top: 7px; right: 8px; float: none; z-index: 3; }

/* the menu and the count sit side by side, menu to the LEFT of the number, so neither hides the other */
.card .ct .ctools { position: absolute; top: 7px; right: 8px; z-index: 3; display: flex; align-items: center; gap: 5px; }
.card .ct .ctools .editpen { position: static; top: auto; right: auto; }
.card .ct .ctools .epcnt { position: static; top: auto; right: auto; margin: 0; }
/* room for both, but only on the cards that actually carry a count */
.card .ct:has(.epcnt) { padding-right: 66px; }
.card:hover .ct .epcnt:hover { opacity: 1; }

/* page transitions: slide + fade instead of a hard pop */
.content.pagein { animation: pageIn .2s cubic-bezier(.22, .61, .36, 1); }
@keyframes pageIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.kanban .list { animation: listIn .22s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes listIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.content { will-change: opacity, transform; }

/* ================= NAVY / INDIGO SCHEME (old Wifi Influencers look) =================
   Deep blue-purple instead of flat black, with translucent surfaces over an ambient glow. */
:root {
  --bg: #151515;
  --panel: #222222;
  --panel-2: #2b2b2b;
  --card: #2d2d2d;
  --line: rgba(255, 255, 255, 0.08);
  --text: #eceafd;
  --muted: #8f93bd;
  --purple: #7c6cf0;
  --purple-hi: #a99cf8;
}
body { background: var(--bg); }
body::before {
  content: ''; position: fixed; inset: -15%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46% 34% at 12% 4%, rgba(124, 108, 240, 0.20), transparent 62%),
    radial-gradient(40% 30% at 88% 8%, rgba(66, 120, 230, 0.16), transparent 62%),
    radial-gradient(52% 42% at 78% 96%, rgba(124, 108, 240, 0.13), transparent 62%),
    radial-gradient(34% 28% at 25% 88%, rgba(47, 208, 149, 0.07), transparent 62%);
}
.side { background: linear-gradient(180deg, rgba(31, 31, 31, 0.92), rgba(21, 21, 21, 0.92)); border-right: 1px solid var(--line); }
.topbar { background: rgba(21, 21, 21, 0.72); border-bottom: 1px solid var(--line); }
.content { background: transparent; }
.list {
  background: linear-gradient(180deg, rgba(45, 45, 45, 0.72), rgba(34, 34, 34, 0.72));
  border: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 30px rgba(10, 10, 10, 0.42);
}
.card {
  background: linear-gradient(165deg, rgba(66, 66, 66, 0.72), rgba(45, 45, 45, 0.72));
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 12px rgba(10, 10, 10, 0.35);
}
.card:hover { border-color: rgba(169, 156, 248, 0.5); background: linear-gradient(165deg, rgba(54, 60, 116, 0.8), rgba(51, 51, 51, 0.8)); }
.card.notes { background: linear-gradient(165deg, rgba(70, 58, 130, 0.75), rgba(38, 33, 76, 0.75)); border-color: rgba(169, 156, 248, 0.42); }
.panelbox, .boardtile, .credcard {
  background: linear-gradient(172deg, rgba(43, 43, 43, 0.7), rgba(31, 31, 31, 0.7));
  border: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
.boardtile:hover { border-color: rgba(169, 156, 248, 0.55); }
.modal { background: rgba(36, 36, 36, 0.9); border: 1px solid rgba(255, 255, 255, 0.11); }
.overlay { background: rgba(14, 14, 14, 0.6); }
.menu, .cardmenu, .lblpop, .searchdrop, .toast, .emojipick {
  background: rgba(43, 43, 43, 0.92); border: 1px solid rgba(255, 255, 255, 0.11);
}
.composer { background: rgba(28, 32, 68, 0.92); border-color: var(--purple); }
input, select, textarea, .bsearch {
  background: rgba(17, 17, 17, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
}
input:focus, select:focus, textarea:focus, .bsearch:focus { border-color: rgba(169, 156, 248, 0.7) !important; }
select option { background: #2b2b2b; }
.btn { background: rgba(66, 66, 66, 0.6); border: 1px solid rgba(255, 255, 255, 0.11); }
.btn.ghost { background: rgba(45, 45, 45, 0.55); }
.side .item:hover { background: rgba(60, 66, 128, 0.45); }
.side .item.on { background: linear-gradient(165deg, rgba(84, 78, 180, 0.6), rgba(56, 54, 122, 0.6)); }
.side .item .soon { background: rgba(45, 45, 45, 0.8); border-color: rgba(255, 255, 255, 0.11); }
.addlist { background: rgba(45, 45, 45, 0.35); border: 1px dashed var(--line); }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); }
::-webkit-scrollbar-thumb:hover { background: rgba(169, 156, 248, 0.4); }

/* destructive action: solid bright red so it reads as dangerous, not disabled */
.btn.dangerfill { background: linear-gradient(160deg, #ff4d4d, #d92020); color: #fff; border: 1px solid rgba(255,255,255,.25); font-weight: 700; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 16px rgba(217,32,32,.32); }
.btn.dangerfill:hover { filter: brightness(1.1); }
.btn.dangerfill:active { transform: translateY(1px); }
.btn.danger { color: #ff6b6b; border-color: rgba(255,107,107,.45); }
.btn.danger:hover { background: rgba(255,77,77,.14); color: #fff; }

/* ---------- voice picker: a panel you read, not a dropdown you parse ---------- */
.vptrigger { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 7px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--text); cursor: pointer; font-size: 15.2px; text-align: left; }
.vptrigger:hover { border-color: var(--gold); }
.vpnm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vpacc { margin-left: auto; color: var(--muted); font-size: 12.9px; text-transform: capitalize; white-space: nowrap; }
.vpempty { color: var(--muted); }
.vav { width: 26px; height: 26px; min-width: 26px; border-radius: 50%; display: inline-block; }
.vpsearch { width: 100%; margin-top: 10px; padding: 9px 12px; font-size: 15.8px; }
.vpcount { color: var(--muted); font-size: 12.9px; margin: 8px 0 4px; }
/* landscape: as many columns as the window allows, so the list is scanned rather than scrolled */
.vpgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 7px; max-height: 62vh; overflow: auto; padding-right: 4px; }
/* the actions are a play glyph and a short word - the rest of the row belongs to the voice's name */
.vpacts { display: flex; gap: 4px; margin-left: auto; flex-wrap: nowrap; align-items: center; }
.vpacts .btn { font-size: 12.9px; padding: 4px 9px; border-radius: 7px; line-height: 1.3; }
.vpacts .vfplay { padding: 4px 7px; }
.vfbody .vpcard { padding: 7px 9px; }
.vfbody .vpmeta b { font-size: 15.2px; white-space: normal; overflow: visible; line-height: 1.25; }
.vfbody .vpmeta small { white-space: normal; overflow: visible; line-height: 1.35; }
.vpcat { grid-column: 1 / -1; font-size: 12.3px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 12px 0 2px; }
.vpcat small { text-transform: none; letter-spacing: 0; opacity: .8; margin-left: 6px; }
.vpcard { display: flex; align-items: center; gap: 9px; padding: 8px 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: border-color .12s, background .12s; }
.vpcard:hover { border-color: var(--gold); }
.vpcard.on { border-color: var(--gold); background: var(--gold-dim); }
.vpradio { width: 13px; height: 13px; min-width: 13px; border-radius: 50%; border: 1.5px solid var(--line); }
.vpcard.on .vpradio { border-color: var(--gold-hi); box-shadow: inset 0 0 0 3px var(--gold-hi); }
.vpmeta { min-width: 0; flex: 1; display: grid; gap: 1px; }
.vpmeta b { font-size: 14.6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vpmeta small { color: var(--muted); font-size: 12.3px; text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the finder puts video titles and descriptions on that line, and capitalising Every Word Of A Title reads wrong */
.vfbody .vpmeta small { text-transform: none; }
.vfbody .vpgrid { max-height: 56vh; }
.vptags { display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; max-width: 120px; }
.vptags i { font-style: normal; font-size: 11.1px; letter-spacing: .03em; padding: 1px 6px; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--muted); white-space: nowrap; }

/* ---------- admin monitor: headline numbers, a 30-day shape, then the accounts ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 13px 14px; }
.kpi .big { font-family: "Bricolage Grotesque", serif; font-size: 1.7rem; font-weight: 800; line-height: 1.15; margin: 6px 0 4px; }
.kpi small { color: var(--muted); font-size: 12.3px; }
.trendrow { display: flex; align-items: flex-end; gap: 10px; margin-top: 8px; }
.trendrow > span { min-width: 62px; font-size: 12.9px; color: var(--muted); }
.spark { flex: 1; display: flex; align-items: flex-end; gap: 2px; height: 42px; }
.spark i { flex: 1; min-width: 2px; border-radius: 2px 2px 0 0; opacity: .85; }
.spark i:hover { opacity: 1; }
.montable { display: grid; gap: 1px; font-size: 14.6px; }
.monrow { display: grid; grid-template-columns: 2.2fr 1.1fr .7fr .7fr .8fr .6fr; gap: 10px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--line); }
.monrow small { display: block; color: var(--muted); font-size: 12.3px; }
.monrow.monhead { color: var(--muted); font-size: 12.3px; letter-spacing: .1em; text-transform: uppercase; border-bottom-color: var(--gold); }
.monrow:last-child { border-bottom: 0; }
@media (max-width: 860px) {
  .monrow { grid-template-columns: 1.6fr .9fr .6fr .6fr; }
  .monrow > span:nth-child(5), .monrow > span:nth-child(6) { display: none; }
}

/* ---------- team page: the numbers first, then the people ---------- */
/* fills the window - a 1120px cap left half a widescreen empty next to the member list */
.tmwrap { max-width: none; }
.teamhead { margin-bottom: 22px; }
.teamhead h1 { font-family: "Bricolage Grotesque", serif; font-size: 2.5rem; font-weight: 800; letter-spacing: -.02em; margin: 8px 0 10px; }
.teamhead h1 i { color: var(--gold-hi); font-weight: 700; }
.teamhead p { color: var(--muted); font-size: 15.8px; line-height: 1.6; max-width: 640px; }
.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 14px; margin-bottom: 20px; }
.statcard { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.statcard .big { font-family: "Bricolage Grotesque", serif; font-size: 2.3rem; font-weight: 800; line-height: 1.1; margin: 8px 0 6px; }
.statcard small { color: var(--muted); font-size: 12.3px; letter-spacing: .08em; text-transform: uppercase; }
.tmtabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.tmtab { background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px; font-size: 14.6px; color: var(--muted); cursor: pointer; transition: color .12s, border-color .12s, background .12s; }
.tmtab:hover { color: var(--text); border-color: var(--gold); }
.tmtab.on { background: rgba(255, 255, 255, .07); color: var(--text); border-color: var(--gold); }
.tmwrap > .btn.gold { margin-bottom: 14px; }
.tmrow { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tmrow:last-child { border-bottom: 0; }
.tmrow img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--panel-2); }
.tmrow .who { min-width: 180px; }
.tmrow .who small { color: var(--muted); display: block; font-size: 13.5px; }
@media (max-width: 820px) {
  .teamhead h1 { font-size: 1.9rem; }
  .statcard { padding: 14px; }
  .statcard .big { font-size: 1.8rem; }
}

/* ================= sidebar motion: a real slide, not a snap =================
   margin-left drives the layout, transform + opacity carry the eye, and the whole panel is
   painted on its own layer so a 200-card board doesn't stutter behind it. */
.side {
  transition: margin-left .3s cubic-bezier(.32, .72, 0, 1), transform .3s cubic-bezier(.32, .72, 0, 1), opacity .22s ease;
  will-change: margin-left, transform;
  contain: paint;
  backface-visibility: hidden;
}
.shell.collapsed .side { margin-left: -222px; transform: translateX(-14px); opacity: 0; pointer-events: none; }
.side .top, .side nav, .side .foot { transition: opacity .18s ease .04s; }
.shell.collapsed .side .top, .shell.collapsed .side nav, .shell.collapsed .side .foot { opacity: 0; transition-delay: 0s; }

/* the collapse chevron turns as it hides; the burger fades in rather than appearing */
.side .collapse { transition: transform .3s cubic-bezier(.32, .72, 0, 1), color .12s ease, border-color .12s ease; }
.side .collapse:hover { transform: translateX(-1px); }
.topbar .burger { display: inline-flex !important; align-items: center; justify-content: center; opacity: 0; width: 0; margin: 0; padding: 0; border-width: 0; overflow: hidden; transition: opacity .2s ease .06s, width .26s cubic-bezier(.32,.72,0,1), margin .26s cubic-bezier(.32,.72,0,1); }
.shell.collapsed .topbar .burger { opacity: 1; width: 32px; margin-right: 2px; border-width: 1px; }

/* the board area glides into the reclaimed space instead of jumping */
.main { transition: none; }
.kanban { transition: none; }

/* nav items: the active pill grows in rather than blinking */
.side .item { transition: background-color .16s ease, color .16s ease, transform .16s cubic-bezier(.32,.72,0,1); }
.side .item:hover { transform: translateX(2px); }
.side .item.on::after { transition: transform .2s cubic-bezier(.32,.72,0,1); }

/* ================= FINAL MOTION OVERRIDE =================
   The sidebar was fading while it slid, so it read as a pop. Pure travel now — no opacity,
   no extra transform — with a long emphasized curve so the eye follows it the whole way. */
.side {
  transition: margin-left .38s cubic-bezier(.32, .72, 0, 1) !important;
  transform: none !important;
  opacity: 1 !important;
  will-change: margin-left;
}
.shell.collapsed .side { margin-left: -222px !important; transform: none !important; opacity: 1 !important; }
.side .top, .side nav, .side .foot { opacity: 1 !important; transition: none !important; }
.shell.collapsed .side .top, .shell.collapsed .side nav, .shell.collapsed .side .foot { opacity: 1 !important; }
.shell.collapsed .side .collapse { transform: rotate(180deg); }

/* modals: rise and settle instead of blinking into place */
.modal { animation: modalIn .26s cubic-bezier(.32, .72, 0, 1) !important; transform-origin: center 40%; }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.965); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
.overlay { animation: fadeIn .22s ease !important; }
.menu, .cardmenu, .lblpop, .searchdrop, .emojipick { animation: popIn .18s cubic-bezier(.32, .72, 0, 1) !important; transform-origin: top right; }
@keyframes popIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
.toast { animation: toastIn .24s cubic-bezier(.32, .72, 0, 1) !important; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
/* pages settle in a touch slower so navigation reads as movement */
.content.pagein { animation: pageIn .26s cubic-bezier(.32, .72, 0, 1) !important; }
.kanban .list { animation: listIn .3s cubic-bezier(.32, .72, 0, 1) both !important; }

/* ---------- presenter library ---------- */
.pickhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.pickhead h2 { margin: 0; }
.pcount { font-family: "Spline Sans Mono", monospace; font-size: 12.9px; color: var(--purple-hi); border: 1px solid rgba(124,108,240,.45); border-radius: 999px; padding: 2px 9px; }
.searchwrap2 { flex: 1; min-width: 180px; }
.searchwrap2 input { width: 100%; font-size: 15.2px; padding: 8px 12px; border-radius: 10px; }
.plfilters { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.plfilters .chip { cursor: pointer; font-size: 14px; color: var(--muted); background: rgba(45, 45, 45,.55); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; }
.plfilters .chip:hover { color: var(--text); border-color: var(--line-hi, rgba(169,156,248,.5)); }
.plfilters .chip.on { color: #fff; background: rgba(124,108,240,.28); border-color: rgba(169,156,248,.5); }
.plgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 13px; max-height: 56vh; overflow-y: auto; padding-right: 4px; }
.pcardx { position: relative; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 13px; overflow: hidden; cursor: pointer; background: linear-gradient(165deg, rgba(66, 66, 66,.72), rgba(45, 45, 45,.72)); transition: transform .14s cubic-bezier(.32,.72,0,1), border-color .14s ease; }
.pcardx:hover { transform: translateY(-2px); border-color: rgba(169,156,248,.5); }
.pcardx.on { border-color: var(--green, #2fd05f); box-shadow: 0 0 0 1px rgba(47,208,95,.5); }
.pimg { position: relative; aspect-ratio: 16/9; background: #1b1b1b; }
.pimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ptick { position: absolute; top: 8px; left: 8px; width: 22px; height: 22px; border-radius: 50%; background: #2fd05f; color: #06210f; display: grid; place-items: center; font-size: 15.2px; font-weight: 800; opacity: 0; transform: scale(.7); transition: opacity .16s ease, transform .16s ease; }
.pcardx.on .ptick { opacity: 1; transform: none; }
.pgender { position: absolute; top: 8px; right: 8px; font-family: "Spline Sans Mono", monospace; font-size: 11.1px; letter-spacing: .08em; text-transform: uppercase; background: rgba(17, 17, 17,.7); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 2px 8px; }
.pmetax { padding: 9px 10px 11px; display: grid; gap: 6px; }
.pmetax b { font-size: 15.2px; }
.pused { display: flex; gap: 5px; flex-wrap: wrap; }
.plboard { font-size: 12.3px; color: var(--purple-hi); background: rgba(124,108,240,.14); border: 1px solid rgba(124,108,240,.34); border-radius: 999px; padding: 1px 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plboard.free { color: #4ade80; background: rgba(74,222,128,.1); border-color: rgba(74,222,128,.4); }
/* only the Studio grid adds these: the same chips render inside the influencer PICKER, where a click
   selects the face and must not wander off to a board */
.plboard.plgo, .plboard.plassign { cursor: pointer; transition: color .12s ease, background .12s ease, border-color .12s ease; }
.plboard.plgo:hover, .plboard.plassign:hover { color: #fff; background: rgba(124,108,240,.3); border-color: var(--purple-hi); }
.plboard.plassign { font-weight: 700; }
.pdel { position: absolute; bottom: 8px; right: 8px; background: rgba(17, 17, 17,.7); border: 1px solid var(--line); color: var(--muted); border-radius: 7px; cursor: pointer; font-size: 12.9px; padding: 3px 6px; opacity: 0; transition: opacity .12s ease, color .12s ease; }
.pcardx:hover .pdel { opacity: 1; }
.pdel:hover { color: #ff6b6b; border-color: rgba(255,107,107,.5); }
.plbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }

/* member avatar: instant name tooltip (no slow browser title, no email) */
.bmembers .bmp { position: relative; }
.bmembers .bmp::after {
  content: attr(data-name);
  position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%) translateY(-3px);
  background: rgba(43, 43, 43, 0.96); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--text);
  font-size: 13.5px; white-space: nowrap; padding: 4px 9px; border-radius: 7px;
  opacity: 0; pointer-events: none; z-index: 700;
  box-shadow: 0 8px 20px rgba(10, 10, 10, .5);
  transition: opacity .13s ease, transform .13s cubic-bezier(.32,.72,0,1);
}
.bmembers .bmp:hover::after { opacity: 1; transform: translateX(-50%); }

/* @mention picker above the chat box */
.mentions {
  position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; z-index: 700;
  background: rgba(43, 43, 43, 0.96); border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 11px; padding: 5px; box-shadow: 0 14px 34px rgba(10, 10, 10, .55);
  max-height: 210px; overflow-y: auto;
}
.mrowx {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; color: var(--text); font: inherit; font-size: 14.6px;
  padding: 5px 7px; border-radius: 8px;
}
.mrowx:hover, .mrowx.on { background: rgba(124, 108, 240, 0.28); }
.mrowx .pfpimg { width: 22px; height: 22px; min-width: 22px; font-size: 11.7px; }

/* segmented controls in the generate-presenter dialog */
.segrow { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.seg {
  font: inherit; font-size: 14.6px; cursor: pointer; color: var(--muted);
  background: rgba(45, 45, 45, 0.55); border: 1px solid var(--line);
  border-radius: 9px; padding: 6px 13px;
  transition: color .14s ease, border-color .14s ease, background-color .14s ease;
}
.seg:hover { color: var(--text); border-color: rgba(169,156,248,.5); }
.seg.on { color: #fff; background: rgba(124,108,240,.3); border-color: rgba(169,156,248,.55); }

/* invite banner on the sign-in screen */
.auth .invitenote {
  background: rgba(47, 208, 95, 0.1); border: 1px solid rgba(47, 208, 95, 0.4); color: #a9f0c1;
  border-radius: 10px; padding: 9px 12px; font-size: 14.6px; margin-bottom: 14px; text-align: left;
}

/* ---------- phone: brand mark in the bar, room for thumbs ---------- */
.topbar .mlogo { display: none; width: 26px; height: 26px; border-radius: 7px; background: #fff; flex: none; }
@media (max-width: 760px) {
  .topbar .mlogo { display: block; }
  .topbar h1 { font-size: .92rem; }
  .bsearch { min-width: 0 !important; }
  .searchwrap { flex: 1; }
  .botsrow { display: none; }              /* service lights are desk-side detail */
  .content { padding: 8px 8px 14px !important; }
  .kanban { gap: 8px !important; }
  .list { width: 84vw !important; min-width: 84vw !important; scroll-snap-align: start; }
  .kanban { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .modal { width: 96vw !important; padding: 14px !important; max-height: 94vh; }
  .modal .cols, .cols.three { grid-template-columns: 1fr !important; }
  .btn { padding: 9px 14px; }              /* comfortable tap targets */
  .side { width: 82vw; min-width: 82vw; position: fixed; inset: 0 auto 0 0; z-index: 900; box-shadow: 0 0 60px rgba(0,0,0,.6); }
  .shell.collapsed .side { margin-left: -82vw !important; }
}
/* installed app: keep clear of the notch / home indicator */
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
}

/* Install app — a real button at the foot of the sidebar, shown only when the browser offers it */
.side .instbtn {
  margin: 0 10px 10px; padding: 9px 12px; width: calc(100% - 20px);
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-size: 14.6px; font-weight: 600; cursor: pointer; color: #eafff1;
  background: linear-gradient(160deg, #33d968, #1fab4b);
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 6px 16px rgba(47, 208, 95, 0.22);
  transition: filter .14s ease, transform .14s cubic-bezier(.32,.72,0,1);
}
.side .instbtn:hover { filter: brightness(1.08); }
.side .instbtn:active { transform: translateY(1px); }
.side .instbtn[hidden] { display: none; }

/* ================= PHONE PASS =================
   Written last and with matching specificity, because the desktop rules it replaces are themselves
   specific (.topbar .botsrow) or already !important (.list / .lane widths). */
@media (max-width: 820px) {
  /* --- top bar: one tidy row, nothing wrapping or colliding --- */
  .topbar { gap: 6px; padding: 8px 10px; flex-wrap: nowrap; overflow: hidden; }
  .topbar h1 { display: none; }                      /* the board name wrapped to two lines; ‹ Back is the context */
  .topbar .botsrow { display: none !important; }     /* service lights are desk-side detail */
  .topbar .bmembers { display: none !important; }    /* the avatar stack collided with Members */
  .topbar .mlogo { width: 30px; height: 30px; }
  .tbtools { gap: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin-left: 2px; }
  .tbtools::-webkit-scrollbar { display: none; }
  .topbar .btn, .tbtools .btn { white-space: nowrap; flex: none; padding: 7px 11px; font-size: 14px; line-height: 1.1; }
  .searchwrap { flex: 1 1 auto; min-width: 86px; }
  .searchwrap::after { display: none; }              /* the ⌘K hint */
  .bsearch { min-width: 0 !important; padding: 8px 10px 8px 28px; font-size: 14.6px; }
  .menubtn { flex: none; }

  /* --- board: one column per screen, snapping --- */
  .content { padding: 8px 0 14px !important; }
  .kanban { gap: 10px !important; padding: 0 10px 10px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .list, .lane { width: 86vw !important; min-width: 86vw !important; scroll-snap-align: center; }
  .lane .list { width: 100% !important; min-width: 0 !important; }
  .card { padding: 11px 12px !important; }
  .card .ct { font-size: 15.8px !important; }
  .list .lh input { font-size: 15.2px !important; }

  /* --- sidebar as a real drawer: solid, above the board, with a scrim --- */
  .side {
    position: fixed; inset: 0 auto 0 0; width: 84vw; min-width: 84vw; z-index: 900;
    background: #1f1f1f !important; box-shadow: 0 0 60px rgba(0, 0, 0, .65);
  }
  .shell.collapsed .side { margin-left: -84vw !important; }
  .shell:not(.collapsed) .main::before {
    content: ''; position: fixed; inset: 0; z-index: 850;
    background: rgba(10, 10, 10, .55); backdrop-filter: blur(2px);
  }
  .side .item { padding: 11px 12px; font-size: 16.4px; }   /* thumb-sized targets */
  .side .collapse { width: 30px; height: 30px; }

  /* --- dialogs --- */
  .modal { width: 96vw !important; padding: 14px !important; max-height: 92vh; }
  .modal .cols, .cols.three { grid-template-columns: 1fr !important; }
  .settings { grid-template-columns: 1fr !important; }
  .plgrid, .cthumbs { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; }
  .cardnav { position: static; display: inline-flex; margin-left: 6px; }
}

/* ---- phone corrections ----
   overflow:hidden on the bar was clipping the dropdowns; the service lights come back as bare dots. */
@media (max-width: 820px) {
  .topbar { overflow: visible; }                       /* the ⋮ menu and search results were being cut off */
  .tbtools { overflow-x: auto; overflow-y: visible; }

  /* dropdowns anchor to the screen so nothing can clip them */
  .menu, .searchdrop {
    position: fixed !important; top: 56px !important; left: 8px !important; right: 8px !important;
    width: auto !important; max-height: 68vh; overflow-y: auto; z-index: 950 !important;
  }

  /* the status panel anchors to the screen like the other dropdowns, rather than trying to sit
     inside a top bar that is only as wide as a phone. */
  .statuswrap .botsrow {
    position: fixed !important; top: 56px !important; left: 8px !important; right: 8px !important;
    width: auto !important; max-width: none; z-index: 950 !important;
  }
  .statuswrap .botsrow[hidden] { display: none !important; }
  .vgstat { max-height: 70vh; }
}

/* card count back in the column header (it tells you how much is queued at a glance) */
.list .lh .cnt {
  display: inline-block !important;
  order: 2; margin-right: auto;
  background: rgba(74, 222, 128, 0.10) !important;
  border: 1px solid rgba(74, 222, 128, 0.45) !important;
  color: #57e389 !important;
  border-radius: 8px !important; font-size: 12.3px !important; font-weight: 700;
  padding: 1px 8px !important; min-width: 22px; text-align: center;
  font-family: "Spline Sans Mono", ui-monospace, monospace;
}
@media (max-width: 820px) { .list .lh .cnt { font-size: 12.9px !important; padding: 2px 9px !important; } }

/* the ＋ in each column header adds a card — the footer button was a second door to the same room */
.list .addcard { display: none !important; }
.list .cards { padding-bottom: 10px !important; }

/* ---------- one mark, one job ----------
   The W is the menu button: it replaces ☰ (open sidebar) and, on top-level boards, ‹ Back. */
.topbar .burger { display: none !important; }
.topbar .mlogo {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; flex: none; cursor: pointer;
  background: #fff; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: transform .18s cubic-bezier(.32,.72,0,1), box-shadow .2s ease, filter .18s ease;
}
.topbar .mlogo img { display: block; width: 22px; height: 22px; border-radius: 5px; }
.topbar .mlogo:hover { filter: brightness(1.04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 6px 18px rgba(0, 0, 0, 0.45); }
.topbar .mlogo:active { transform: scale(.93); }
.topbar .mlogo:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
/* a gold ring while the drawer is open, so the mark reads as a toggle rather than a badge */
.shell:not(.collapsed) .topbar .mlogo { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 0 2px rgba(212, 175, 55, 0.55); }
@media (max-width: 820px) {
  .topbar .mlogo { width: 32px; height: 32px; }
  .topbar .mlogo img { width: 21px; height: 21px; }
}

/* the video title under the card name — the name says which episode, this says what it is */
.card .cvt {
  margin-top: 3px; font-size: 14px; line-height: 1.35; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- niche cards: what it is, and who is on it ---------- */
/* one calm row: presenter left, team right, never wrapping onto a second line */
.card .nrow { display: flex; align-items: center; gap: 8px; margin-top: 9px; flex-wrap: nowrap; min-width: 0; }
/*
 * The unassigned pill GLOWS on purpose: it reads as "this channel still needs a presenter", and the
 * moment one is assigned the glow is replaced by that presenter's named chip. So the purple light is
 * the to-do list and the coloured chips are the done list, and the board empties of glow as faces
 * get assigned.
 */
.card .aiav {
  font-size: 11.7px; font-weight: 600; letter-spacing: .02em; padding: 3px 9px 3px 7px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px; color: #d9c6ff;
  background: rgba(139, 108, 255, 0.16); border: 1px solid rgba(150, 120, 255, 0.42);
  animation: aiavglow 2.6s ease-in-out infinite;
}
.card .aiav::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%; background: #b18cff;
  box-shadow: 0 0 6px #b18cff;
}
@keyframes aiavglow {
  0%, 100% { box-shadow: 0 0 6px rgba(139, 108, 255, 0.18); }
  50%      { box-shadow: 0 0 13px rgba(139, 108, 255, 0.42); }
}
.card .nfaces { display: inline-flex; align-items: center; margin-left: auto; flex: none; }
/* team faces are context, not content - small, muted, and out of the presenter's way */
.card .nfaces .pfpimg { width: 18px; height: 18px; min-width: 18px; font-size: 9.9px; }
.card .nfaces .bmp { margin-left: -6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--card, var(--panel)); opacity: .8; }
.card .nfaces .bmp:first-child { margin-left: 0; }
.card .nfaces .bmp:hover { opacity: 1; }
.card .nfaces .bmmore { margin-left: 3px; font-size: 11.7px; color: var(--muted); }
/* a long presenter name gives way, the channel count never does */
.card .nrow .pchip { flex: 0 1 auto; min-width: 0; }
.card .nrow .pchip em { flex: none; }

/* Niche Notes has no chat column, so its two panels get the full width.
   Everything about the presenter lives on the right with their face, which leaves Notes alone on the
   left — so it stretches to whatever height the right column ends up being, instead of a stubby 5 rows. */
.modal .cols.two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
.cols.two .notescol { display: flex; flex-direction: column; }
.cols.two .notescol #cb { flex: 1; min-height: 240px; resize: vertical; }
.cols.two .notescol .mt { margin-top: 14px; }

/* competitor channels, mirrored onto Niche Notes */
.compbox { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; max-height: 210px; overflow: auto; }
.compch {
  display: flex; align-items: center; gap: 9px; padding: 6px 9px; border-radius: 9px; text-decoration: none;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text); font-size: 14.6px;
}
.compch:hover { border-color: var(--gold); }
.compch img, .compch .ph { width: 34px; height: 20px; border-radius: 4px; object-fit: cover; flex: none; background: var(--line); }
.compch span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the Shift switcher stays put: fixed columns either side, so the current title never drifts */
.nswitch { display: grid !important; grid-template-columns: 14px 160px 240px 160px 14px; align-items: center; justify-items: center; }
.nswitch .prev, .nswitch .next, .nswitch .cur { max-width: 100%; text-align: center; }
.nswitch .prev { justify-self: end; text-align: right; }
.nswitch .next { justify-self: start; text-align: left; }

/* =====================================================================
   THE OLD BOARDS PALETTE, EXACTLY
   The purple came from saturation, not lightness: #161936 is 59% HSL sat,
   while the old lane was a white wash over the body — nearly neutral
   charcoal. Use the wash, not a flattened hex, so it tracks the gradient.
   ===================================================================== */
:root {
  --bg: #0a0915;
  --panel: #14131e;
  --panel-2: #1d1d1d;
  --line: rgba(255, 255, 255, 0.10);
  --text: rgba(255, 255, 255, 0.92);
  --muted: #8b8a9c;
}
body {
  background: #0a0915;
  background-image:
    radial-gradient(1400px 700px at 0% -10%, rgb(59 130 246 / 0.08), transparent 65%),
    radial-gradient(1000px 500px at 100% 0%, rgb(37 99 235 / 0.06), transparent 60%),
    linear-gradient(180deg, #0a0915 0%, #111111 50%, #0a0915 100%);
  background-attachment: fixed;
  font-family: Inter, "Instrument Sans", system-ui, sans-serif;
}
/* lanes and cards are washes over that body, so they never go violet */
.list {
  background: rgb(255 255 255 / 0.04);
  border: 1px solid rgb(255 255 255 / 0.10);
  border-radius: 12px;
}
.card {
  background: rgb(22 20 48 / 0.80);
  border: 1px solid rgb(255 255 255 / 0.10);
  border-radius: 12px;
  padding: 12px;
}
.card:hover { background: #1f1f1f; border-color: rgb(255 255 255 / 0.20); }
.topbar, .side { background: rgb(255 255 255 / 0.03); }

/* type: Inter, and card titles at 500 — the old app's weight, not 600/700 */
.card .ct {
  font-family: Inter, system-ui, sans-serif; font-weight: 500;
  color: rgb(255 255 255 / 0.90);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.list .lh input { font-family: Inter, system-ui, sans-serif; font-weight: 600; color: rgb(255 255 255 / 0.90); }

/* ---------- sidebar: the brand mark is the animated W, in a circle, no chip ---------- */
.side .wmark {
  width: 36px; height: 36px; border-radius: 50%; background: none; border: 0; box-shadow: none;
  overflow: hidden; display: grid; place-items: center; flex: none; padding: 0;
}
.side .wmark img {
  width: 148%; height: 148%; object-fit: cover; border-radius: 50%;  /* zoomed so the W fills the circle */
  display: block;
}
/* the last word on the sidebar name — earlier layers set 15/13/11.5px and this one overrides them
   all, so this is the only size worth changing. With WIFI MEDIA gone it takes the freed room. */
.side .top .t b { font-family: Inter, system-ui, sans-serif; font-weight: 700; font-size: 21.1px; }

/* nav rows read a touch small next to the old app */
.side .item { font-size: 16.4px; padding: 10px 12px; }
.side .sec { font-size: 12.3px; }

/* the way out of the drawer, where Install app used to be */
.side .sideclose {
  margin: 0 10px 10px; width: calc(100% - 20px); padding: 8px;
  background: rgb(255 255 255 / 0.04); border: 1px solid var(--line); border-radius: 10px;
  color: var(--muted); font: inherit; font-size: 15.2px; cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.side .sideclose:hover { color: var(--text); border-color: rgb(255 255 255 / 0.22); background: rgb(255 255 255 / 0.07); }

/* a dragged-over label selection looked broken — labels are chrome, not content */
.modal label, .list .lh, .card .lblrow, .side .sec { user-select: none; }

:root { --card: #1d1d1d; }
/* the phone drawer has to stay opaque, but in the new palette */
@media (max-width: 820px) { .side { background: #131313 !important; } }

/* ---------- Channel Templates ---------- */
.ctmodal { width: min(1080px, 96vw); }
.ctnew { display: flex; gap: 10px; margin: 14px 0 16px; }
.ctnew input {
  flex: 1; padding: 11px 14px; background: rgb(255 255 255 / 0.04);
  border: 1px solid var(--line); border-radius: 10px; color: var(--text); font: inherit; font-size: 15.8px;
}
.ctnew input:focus { outline: none; border-color: var(--gold); }
.ctlist { display: flex; flex-direction: column; gap: 12px; }
.ctempty { color: var(--muted); font-size: 15.2px; padding: 18px 0; }

.cttmpl { background: rgb(255 255 255 / 0.03); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.cttmpl.open { border-color: rgb(255 255 255 / 0.18); }
.cthead { display: flex; align-items: center; gap: 12px; }
.ctmeta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ctmeta b { font-size: 17.5px; font-weight: 600; }
.ctmeta small { color: var(--muted); font-size: 14px; }
.ctacts { margin-left: auto; display: flex; align-items: center; gap: 7px; flex: none; }
.ctdef { font-size: 12.9px; color: #8ef0ae; background: rgb(47 208 95 / 0.12); border: 1px solid rgb(47 208 95 / 0.35); border-radius: 999px; padding: 3px 10px; }
.ctdel { color: #ff8f8f; }
.cthint { color: var(--muted); font-size: 14px; margin: 12px 0 10px; }

.ctcols { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.ctcol {
  flex: 0 0 190px; background: rgb(255 255 255 / 0.03); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px; display: flex; flex-direction: column; gap: 7px;
}
.ctcolh { display: flex; align-items: center; font-size: 12.3px; letter-spacing: .09em; color: var(--muted); text-transform: uppercase; }
.ctcount { margin-left: auto; letter-spacing: 0; }
.ctcount.full { color: var(--gold-hi); }
.ctitems { display: flex; flex-direction: column; gap: 7px; }
.ctitem {
  background: rgb(22 20 48 / 0.8); border: 1px solid rgb(255 255 255 / 0.10); border-radius: 8px;
  padding: 7px 8px; display: flex; flex-direction: column; gap: 6px;
}
.ctitem .ctname { font-size: 14.6px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctmove { display: flex; gap: 2px; }
.ctmove button {
  flex: 1; background: none; border: 0; color: var(--muted); cursor: pointer;
  font: inherit; font-size: 12.9px; line-height: 1; padding: 3px 0; border-radius: 4px;
}
.ctmove button:hover { color: var(--text); background: rgb(255 255 255 / 0.08); }
.ctadd {
  margin-top: auto; background: none; border: 1px dashed var(--line); border-radius: 8px;
  color: var(--muted); font: inherit; font-size: 14px; padding: 7px; cursor: pointer;
}
.ctadd:hover:not(:disabled) { color: var(--text); border-color: rgb(255 255 255 / 0.25); }
.ctadd:disabled { opacity: .45; cursor: default; }

@media (max-width: 820px) { .ctcol { flex-basis: 165px; } }

/* ---------- density: the old app rendered the whole shell at 80% ----------
   Phones are excluded: zoom rescales the viewport the media queries are written against,
   so a 390px phone would start matching desktop rules. */
@media (min-width: 821px) {
  :root { zoom: 0.8; }
  /* vh is measured against the UNZOOMED viewport, so 100vh only covers 80% of the screen once
     the root is scaled. Divide by the zoom to get back to a full-height shell. */
  body, .shell, .boot, .auth { height: 125vh; }
}

/* ---------- Install app, with a way to dismiss it ---------- */
.side .sideclose { display: none; }
.side .instwrap { display: flex; align-items: stretch; gap: 6px; margin: 0 10px 10px; }
.side .instwrap[hidden] { display: none; }
.side .instbtn {
  flex: 1; margin: 0; width: auto; padding: 9px 12px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-size: 14.6px; font-weight: 600; cursor: pointer; color: #eafff1;
  background: linear-gradient(160deg, #33d968, #1fab4b);
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 6px 16px rgba(47, 208, 95, 0.22);
  transition: filter .14s ease, transform .14s cubic-bezier(.32,.72,0,1);
}
.side .instbtn:hover { filter: brightness(1.08); }
.side .instbtn:active { transform: translateY(1px); }
.side .instx {
  flex: none; width: 30px; border-radius: 10px; cursor: pointer;
  background: rgb(255 255 255 / 0.04); border: 1px solid var(--line); color: var(--muted);
  font: inherit; font-size: 14px; line-height: 1;
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.side .instx:hover { color: var(--text); border-color: rgb(255 255 255 / 0.22); background: rgb(255 255 255 / 0.08); }

/* the mark sits dead centre of its circle — a grid item bigger than its box does not */
.side .wmark { position: relative; overflow: hidden; }
.side .wmark img {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 132%; height: 132%; max-width: none; object-fit: cover; border-radius: 0;
}
/* the top bar mark is a circle too */
.topbar .mlogo { border-radius: 50%; overflow: hidden; }
.topbar .mlogo img { border-radius: 50%; }

/* a steady glow, not a pulsing one */
/* (the old animation:none override is gone - the glow is intentional again) */

/* ---------- Niche access ---------- */
.namodal { width: min(940px, 96vw); }
.nasub { color: var(--muted); font-size: 14.6px; margin: 6px 0 14px; }
.nabody { display: grid; grid-template-columns: 236px 1fr; gap: 14px; align-items: start; }

.nawho { display: flex; flex-direction: column; gap: 4px; max-height: 62vh; overflow: auto; }
.nahead { font-size: 12.3px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); padding: 2px 4px 6px; }
.nam {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; cursor: pointer;
  padding: 8px 10px; border-radius: 10px; font: inherit; color: var(--text);
  background: none; border: 1px solid transparent;
}
.nam:hover { background: rgb(255 255 255 / 0.05); }
.nam.on { background: rgb(255 255 255 / 0.07); border-color: rgb(255 255 255 / 0.18); }
.namwho { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.namwho b { font-size: 15.2px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.namwho small { color: var(--muted); font-size: 12.9px; }
.namn {
  margin-left: auto; flex: none; font-size: 12.9px; color: var(--muted);
  background: rgb(255 255 255 / 0.06); border-radius: 999px; padding: 2px 8px;
  font-variant-numeric: tabular-nums;
}
.namn.all { color: #8ef0ae; background: rgb(47 208 95 / 0.12); }

.napane { border: 1px solid var(--line); border-radius: 12px; background: rgb(255 255 255 / 0.03); padding: 12px; }
.natop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.natitle { display: flex; align-items: center; gap: 7px; font-size: 15.2px; }
.natitle small { color: var(--muted); font-variant-numeric: tabular-nums; }
.nasearch {
  flex: 1 1 160px; min-width: 120px; padding: 7px 11px; font: inherit; font-size: 14.6px;
  background: rgb(255 255 255 / 0.04); border: 1px solid var(--line); border-radius: 8px; color: var(--text);
}
.nasearch:focus { outline: none; border-color: var(--gold); }
.nagrid {
  display: flex; flex-wrap: wrap; gap: 6px;
  max-height: 52vh; overflow: auto; align-content: flex-start;
}
.nachip {
  font: inherit; font-size: 14px; cursor: pointer; padding: 6px 11px; border-radius: 999px;
  background: rgb(255 255 255 / 0.04); border: 1px solid var(--line); color: var(--muted);
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.nachip:hover:not(:disabled) { color: var(--text); border-color: rgb(255 255 255 / 0.24); }
.nachip.on {
  color: #dfe6ff; background: rgb(80 110 255 / 0.20); border-color: rgb(120 145 255 / 0.55);
}
.nachip:disabled { opacity: .5; cursor: default; }
.naempty { color: var(--muted); font-size: 15.2px; padding: 14px 4px; }

@media (max-width: 820px) { .nabody { grid-template-columns: 1fr; } .nawho { max-height: 30vh; } }

/* invite, folded into Niche access so the link is scoped as it is made */
.nainvtoggle {
  display: block; width: 100%; text-align: left; margin-bottom: 12px; cursor: pointer;
  padding: 9px 12px; border-radius: 10px; font: inherit; font-size: 14.6px; color: var(--muted);
  background: rgb(255 255 255 / 0.03); border: 1px dashed var(--line);
}
.nainvtoggle:hover, .nainvtoggle.on { color: var(--text); border-style: solid; border-color: rgb(255 255 255 / 0.22); }
.nainv {
  border: 1px solid var(--line); border-radius: 12px; background: rgb(255 255 255 / 0.03);
  padding: 12px; margin-bottom: 14px;
}
.nainv[hidden] { display: none; }
.nainvtop { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 10px; }
.nainvtop b { font-size: 15.2px; font-weight: 600; }
.nainvtop select {
  padding: 6px 9px; font: inherit; font-size: 14.6px; border-radius: 8px;
  background: rgb(255 255 255 / 0.04); border: 1px solid var(--line); color: var(--text);
}
.nainvn { color: var(--muted); font-size: 14px; }
.nainvtop .btn { margin-left: auto; }
.nagrid.inv { max-height: 30vh; }
.nainv .invitelink { margin-top: 10px; }

/* ============================================================
   AI Influencer Studio
   ============================================================ */
.studio { display: block; }
.stuhead { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 18px; }
.stuhead h2 { font-family: "Bricolage Grotesque", serif; font-size: 1.35rem; margin: 0; }
.stuhead p { color: var(--muted); font-size: 14.6px; margin: 0; max-width: 62ch; line-height: 1.55; }
.stuhead .btn { margin-left: auto; flex: 0 0 auto; white-space: nowrap; }
.stugrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 15px; }
.stuempty { color: var(--muted); font-size: 15.2px; padding: 22px 2px; }
.stucard {
  position: relative; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 14px; overflow: hidden;
  cursor: pointer; background: linear-gradient(165deg, rgba(66, 66, 66,.72), rgba(45, 45, 45,.72));
  transition: transform .14s cubic-bezier(.32,.72,0,1), border-color .14s ease;
}
.stucard:hover { transform: translateY(-2px); border-color: rgba(169,156,248,.5); }
.stuimg { position: relative; aspect-ratio: 16/9; background: #1b1b1b; }
/* :not(.stupfp) matters — the badge below is also a direct child img, and without this it inherits
   the portrait's 100%x100% and blows up into a full-card oval */
.stuimg > img:not(.stupfp) { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the channel profile picture, tucked into the corner as the small round badge it will actually be */
.stuimg > img.stupfp {
  position: absolute; left: 8px; top: 8px; width: 38px; height: 38px; border-radius: 50%;
  object-fit: cover; border: 2px solid rgba(255,255,255,.85); box-shadow: 0 3px 10px rgba(0,0,0,.55);
}
.stubadges { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; }
/* voice state, in the card's own chip language: amber while it is missing, green once one is set */
.stuvoice {
  background: rgba(245,197,66,.16); border: 1px solid rgba(245,197,66,.45); color: #f5c542;
  border-radius: 999px; padding: 1px 8px; font-size: 12.3px; line-height: 1.6; white-space: nowrap;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.stuvoice.on { background: rgba(74,222,128,.14); border-color: rgba(74,222,128,.45); color: #4ade80; }
.stubadge {
  background: rgba(17, 17, 17,.75); border: 1px solid var(--line); border-radius: 999px;
  padding: 1px 7px; font-size: 12.9px; line-height: 1.5;
}
.stumeta { padding: 11px 11px 12px; display: grid; gap: 5px; }

.stumeta b { font-size: 15.8px; }
.stumeta small { color: var(--muted); font-size: 12.9px; text-transform: capitalize; }
.stuniche { font-size: 12.9px; color: var(--gold-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stumate { font-size: 12.3px; color: var(--muted); }

/* new-influencer dialog */
.segnote { display: block; color: var(--muted); font-size: 13.5px; margin: -2px 0 4px; }
.agerange { width: 100%; accent-color: var(--gold); margin: 2px 0 0; }
.agescale { display: flex; justify-content: space-between; color: var(--muted); font-size: 12.3px; margin-top: 2px; }
.agescale span:nth-child(2), .agescale span:nth-child(3) { opacity: .7; }

/* one influencer */
.ifsub { color: var(--muted); font-size: 14.6px; margin: 2px 0 14px; text-transform: capitalize; }
.ifcols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.ifshot { display: block; line-height: 0; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.ifshot img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
.ifvars { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.ifvar { padding: 0; line-height: 0; background: none; border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; }
.ifvar img { width: 74px; height: 42px; object-fit: cover; display: block; }
.ifvar.on { border-color: var(--gold); }
.ifvar:hover { border-color: rgba(169,156,248,.6); }
.ifnote { display: block; color: var(--muted); font-size: 12.9px; line-height: 1.5; margin-top: 8px; }
/* launching a niche with a face already chosen */
.lpresenter { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 14px;
  background: rgba(124,108,240,.12); border: 1px solid rgba(124,108,240,.34); border-radius: 11px; }
.lpresenter img { width: 62px; height: 36px; object-fit: cover; border-radius: 6px; display: block; }
.lpresenter span { display: grid; gap: 2px; font-size: 14.6px; }
.lpresenter small { color: var(--muted); font-size: 12.9px; }
@media (max-width: 820px) { .ifcols { grid-template-columns: 1fr; } }

/* the banner preview + leftover-name caption, now inline in the influencer dialog */
.bmprev { margin-top: 16px; }
.bmprev a { display: block; line-height: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.bmprev a:hover { border-color: var(--gold); }
.bmprev img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
/* leftover free-text presenter name, shown under the Studio dropdown that replaced the field */
.cpname { display: block; color: var(--muted); font-size: 13.5px; margin-top: 6px; }
.cpname[hidden] { display: none; }

/* the banner strip under a Studio card's portrait, and its background-render spinner */
.stubanner { position: relative; line-height: 0; border-top: 1px solid rgba(255, 255, 255, 0.10); background: #1b1b1b; }
.stubanner img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; max-height: 62px; object-position: center; }
.stubdl {
  position: absolute; right: 6px; bottom: 6px; background: rgba(17, 17, 17,.8); border: 1px solid var(--line);
  color: var(--muted); border-radius: 6px; cursor: pointer; font-size: 12.9px; padding: 2px 7px; line-height: 1.4;
  opacity: 0; transition: opacity .12s ease, color .12s ease;
}
.stucard:hover .stubdl { opacity: 1; }
.stubdl:hover { color: var(--gold-hi); border-color: var(--gold); }
.stubanner.busy {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  font-size: 13.5px; line-height: 1.4; color: var(--muted);
}
.bmbusy { display: flex; align-items: center; gap: 9px; margin-top: 16px; font-size: 14.6px; color: var(--muted); }
.spin {
  width: 13px; height: 13px; flex: 0 0 13px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--gold); animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Niche Notes carries the whole presenter block now, so it gets the wide modal too */
.modal:has(.cols.two) { width: min(1180px, 96vw); }
.upfield.banrow a img { width: 168px; height: 42px; }

/* an influencer still being named and photographed */
.pendingcard { cursor: default; }
.pendingcard:hover { transform: none; border-color: rgba(255, 255, 255, 0.10); }
.pendingcard .stuimg { display: grid; place-items: center; }
.pendingcard .spin { width: 26px; height: 26px; flex: none; border-width: 3px; }
.pendingcard b { font-size: 14.6px; color: var(--muted); font-weight: 500; }
/* the banner preview inside the influencer dialog */
.ifcols .bmprev { margin-top: 12px; }
.ifcols .bmprev img { max-height: 96px; }

/* a portrait / profile-picture render still running on a card you have navigated away from */
.stuworking {
  position: absolute; left: 8px; bottom: 8px; display: flex; align-items: center; gap: 7px;
  background: rgba(17, 17, 17,.82); border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 11px 3px 9px; font-size: 12.9px; color: var(--gold-hi);
}

/* a profile picture is a channel avatar, so it previews as a circle everywhere — never as the
   wide 108x62 strip the other .upfield thumbnails use */
.upfield .pfpthumb { border-radius: 50%; flex: 0 0 auto; }
.upfield .pfpthumb img { width: 54px; height: 54px; object-fit: cover; }
.upfield.banrow .pfpthumb img { width: 42px; height: 42px; }

/* every field autosaves, so the old Save button became a quiet confirmation instead */
.savedot { min-height: 18px; margin-top: 12px; font-size: 13.5px; color: var(--ok, #4ade80); opacity: 0; transition: opacity .18s ease; }
.savedot.on { opacity: 1; }

/* ============================================================
   YouTube Preview — the title + thumbnail at every size YouTube serves.
   Deliberately YouTube's own light chrome, not the app's dark theme: judging
   contrast against our panels would tell you nothing about the real shelf.
   ============================================================ */
.ytprevmodal { background: #fff; color: #0f0f0f; }
.ytprevmodal h2 { color: #0f0f0f; font-family: "Bricolage Grotesque", serif; margin: 0 0 4px; }
.ytprevmodal .x { color: #606060; }
.ytprevmodal .ytsub { color: #606060; font-size: 15.2px; margin: 0 0 20px; }
.ytprevmodal .ytsub b { color: #0f0f0f; }
.ytsec { border-top: 1px solid #e5e5e5; padding-top: 14px; margin-top: 18px; }
.ytsec:first-of-type { border-top: 0; margin-top: 0; }
.ytsec h3 { font-size: 12.3px; letter-spacing: .14em; text-transform: uppercase; color: #606060; margin: 0 0 14px; }
.ytrow { display: flex; gap: 30px 34px; align-items: flex-start; flex-wrap: wrap; }
.ytlab { display: block; font-size: 14px; color: #606060; margin-bottom: 8px; }
.ytc { font-family: Roboto, "Segoe UI", Arial, sans-serif; max-width: 100%; }
.ytthumb { position: relative; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: #e5e5e5; }
.ytthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ytnothumb { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; color: #909090; }
.ytdur {
  position: absolute; right: 5px; bottom: 5px; background: rgba(0,0,0,.8); color: #fff;
  font-size: 14px; font-weight: 500; line-height: 1.2; padding: 2px 4px; border-radius: 4px;
}
.ytmeta { display: flex; gap: 12px; margin-top: 12px; }
.ytpfp { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; background: #d9d9d9; object-fit: cover; }
/* YouTube clamps the title to two lines and the metadata to one — the truncation IS the point */
.yttitle {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 16.4px; font-weight: 500; line-height: 1.4; color: #0f0f0f;
}
.ytwords small { display: block; font-size: 14px; color: #606060; line-height: 1.5; }
/* sidebar / mobile column: thumbnail left at a fixed 168px, words filling whatever is left.
   min-width:0 on both flex children is what stops the title collapsing to one word per line. */
.ytc.row { display: flex; gap: 8px; }
.ytc.row .ytthumb { width: 168px; flex: 0 0 auto; border-radius: 8px; }
.ytc.row .ytmeta { margin-top: 0; flex: 1 1 auto; min-width: 0; }
.ytc.row .ytwords { flex: 1 1 auto; min-width: 0; }
.ytc.row .yttitle { font-size: 15.2px; }
.ytmeta { min-width: 0; }
.ytwords { min-width: 0; flex: 1 1 auto; }
/* TV sits on black and sets everything larger, because you are three metres away */
.yttvbox { background: #000; border-radius: 12px; padding: 20px; }
.yttvname { color: #fff; font-size: 16.4px; display: block; }
.yttvhome { color: #aaa; font-size: 14px; display: block; margin: 2px 0 16px; }
.ytc.tv .yttitle { color: #fff; font-size: 21.1px; font-weight: 700; }
.ytc.tv .ytwords small { color: #aaa; }
.ytc.tv .ytmeta { margin-top: 14px; }
@media (max-width: 760px) { .ytrow { gap: 22px; } }

/* no Video title yet — the preview still shows, but it must not look like real copy */
.yttitle.ph { color: #909090; font-style: italic; font-weight: 400; }
.ytc.tv .yttitle.ph { color: #777; }
.ytprevmodal .ytsub.warn { color: #b45309; }
.ytprevmodal .ytsub.warn b { color: #b45309; }

/* vgen account balance, sitting with the three lights it pays for — platform admins only.
   Matches the lights' mono type so the row reads as one instrument cluster. */
.topbar .vbal {
  display: inline-flex; align-items: center; font-family: "Spline Sans Mono", monospace; font-size: 14px;
  cursor: pointer; user-select: none; padding: 2px 9px; border-radius: 999px;
  background: rgba(17, 17, 17, .45); transition: color .3s, border-color .3s, box-shadow .3s;
  /* healthy glows the same neon green as the three lights it sits with */
  color: #39ff14; border: 1px solid rgba(57, 255, 20, .55);
  text-shadow: 0 0 8px rgba(57, 255, 20, .75);
  box-shadow: 0 0 6px rgba(57, 255, 20, .35), inset 0 0 8px rgba(57, 255, 20, .12);
  animation: botpulse 2.2s ease-in-out infinite;
}
.topbar .vbal.low {
  color: #f5c542; border-color: rgba(245, 197, 66, .55);
  text-shadow: 0 0 8px rgba(245, 197, 66, .7);
  box-shadow: 0 0 6px rgba(245, 197, 66, .3), inset 0 0 8px rgba(245, 197, 66, .1);
}
/* the lights only turn red once it hits zero, so this has to shout well before they do */
.topbar .vbal.out {
  color: #ff2d2d; border-color: rgba(255, 45, 45, .6);
  text-shadow: 0 0 9px rgba(255, 45, 45, .8);
  box-shadow: 0 0 10px rgba(255, 45, 45, .4), inset 0 0 8px rgba(255, 45, 45, .15);
  animation: botpulse 1.4s ease-in-out infinite;
}
/* unreadable is not a state to celebrate — no glow, no pulse */
.topbar .vbal.warn {
  color: var(--muted); border: 1px dashed var(--line);
  text-shadow: none; box-shadow: none; animation: none;
}

/* ============================================================
   LAUNCH WIZARD — step 1 influencer, step 2 niche
   ============================================================ */
.modal.wiz { width: min(1080px, 96vw); }
/* progress bar: the lit step glows the same green as everything else that means "go" */
.wizsteps { display: flex; align-items: center; gap: 14px; margin: 2px 0 20px; }
.wstep {
  display: inline-flex; align-items: center; gap: 9px; background: none; border: 0; cursor: pointer;
  color: var(--muted); font: inherit; font-size: 15.2px; padding: 0;
}
.wstep i {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal;
  font-size: 14.6px; font-weight: 700; border: 1px solid var(--line); background: var(--panel-2);
  transition: all .2s ease;
}
.wstep.on { color: #39ff14; }
.wstep.on i { border-color: #39ff14; color: #39ff14; background: rgba(57,255,20,.1); box-shadow: 0 0 10px rgba(57,255,20,.45); }
.wstep.done { color: var(--text); }
.wstep.done i { border-color: rgba(57,255,20,.6); color: #39ff14; }
.wstep:disabled { opacity: .45; cursor: not-allowed; }
.wline { flex: 1; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; max-width: 190px; }
.wline i { display: block; height: 100%; width: 50%; background: #39ff14; box-shadow: 0 0 8px rgba(57,255,20,.6); transition: width .25s ease; }
.wline.full i { width: 100%; }
.wizbody { min-height: 320px; }
/* bottom bar mirrors the top bar, so forward and back exist in both places */
.wizbar { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.wizbar .wsave { color: var(--muted); font-size: 13.5px; margin: 0 auto; }
.btn.gold.glow { box-shadow: 0 0 14px rgba(57,255,20,.28); }
.btn.gold.glow:disabled { box-shadow: none; }

/* step 1 — the niche band drives everything under it, so it sits alone across the top */
.wnicheband { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 18px; }
.wnicheband label { margin-top: 0; }
.wherit {
  flex: 0 0 auto; align-self: center; white-space: nowrap; font-size: 13.5px; padding: 5px 12px;
  border-radius: 999px; color: var(--pink-hi, #f472b6); background: rgba(244,114,182,.12); border: 1px solid rgba(244,114,182,.35);
}
.wherit[hidden] { display: none; }
.wcols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
/* a large face image's natural width was forcing the left column to 1080px and crushing the right one to 200 */
.wcols > * { min-width: 0; }
.wface { position: relative; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; aspect-ratio: 4/3; background: var(--bg); display: grid; place-items: center; }
.wface img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* before there is a face, a monogram — a photo-shaped hole reads as broken */
.wmono {
  width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(124,108,240,.25); color: var(--purple-hi, #a99cf8);
  font-family: "Bricolage Grotesque", serif; font-size: 25.7px; font-weight: 700; letter-spacing: .04em;
}
/* Re-roll sits under the frame, not over the face it is about to replace */
.wchip {
  margin-top: 10px; background: rgba(57,255,20,.1); border: 1px solid rgba(57,255,20,.45);
  color: #39ff14; border-radius: 999px; padding: 5px 14px; font-size: 14px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
}
.wchip:hover { background: rgba(57,255,20,.18); }
.wchip:disabled { opacity: .6; cursor: default; }
/* the style reference: a thumbnail with its label - with no rule it rendered at 1536px and blew the wizard's columns apart */
.wstyleprev { position: relative; display: inline-block; width: 72px; height: 48px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; vertical-align: middle; margin-left: 6px; }
.wstyleprev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wstyleprev i { position: absolute; left: 3px; bottom: 2px; font-style: normal; font-size: 10px; color: #fff; text-shadow: 0 0 3px #000; }
/* previous generations — a re-roll is never destructive, the old face is one tap away */
.wvars { margin-top: 12px; }
.wvrow { display: flex; align-items: center; gap: 7px; }
.wvar { position: relative; padding: 0; line-height: 0; background: var(--bg); border: 2px solid var(--line); border-radius: 8px; overflow: hidden; cursor: pointer; width: 46px; height: 46px; flex: 0 0 46px; }
.wvar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wvar.empty { border-style: dashed; cursor: default; opacity: .5; }
.wvmore { color: var(--muted); font-size: 13.5px; }
.wvar.on { border-color: #39ff14; box-shadow: 0 0 8px rgba(57,255,20,.4); }
.wvar i { position: absolute; right: 2px; bottom: 1px; font-style: normal; font-size: 12.9px; color: #39ff14; text-shadow: 0 0 4px #000; }
.wvar:hover { border-color: rgba(169,156,248,.6); }
/* name suggestions come from the heritage, so an Amish niche never proposes "Clyde Branham" */
.wnamechips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.wnc { background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 4px 12px; font-size: 14px; cursor: pointer; }
.wnc:hover { color: var(--gold-hi); border-color: var(--gold); }
.wdisc { background: none; border: 0; color: var(--muted); font-size: 13.5px; cursor: pointer; padding: 14px 0 0; text-align: left; }
.wdisc:hover { color: var(--text); }
.wbriefbox[hidden] { display: none; }
/* assets stay visible but unusable before there is a face — the whole journey is always on screen */
.wassets.locked { opacity: .5; pointer-events: none; }
.wready { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.wr { font-size: 13.5px; color: var(--muted); }
.wr.ok { color: #39ff14; }
.wrmiss { width: 100%; color: #f5c542; font-size: 13.5px; }
.wrmiss.ok { color: #39ff14; }

/* step 0 — whose face is this launch? */
.pickhint { color: var(--muted); font-size: 14.6px; margin: 6px 0 14px; }
.pickrow { display: flex; gap: 12px; align-items: stretch; margin-bottom: 16px; }
.picknew {
  display: grid; gap: 2px; text-align: left; cursor: pointer; padding: 10px 16px; border-radius: 11px;
  background: rgba(57,255,20,.08); border: 1px dashed rgba(57,255,20,.45); color: #39ff14; font: inherit;
}
.picknew:hover { background: rgba(57,255,20,.14); }
.picknew small { color: var(--muted); font-size: 12.9px; }
.pkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; max-height: 56vh; overflow-y: auto; padding-right: 4px; }
.pkcard { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; cursor: pointer; background: var(--panel-2); display: grid; gap: 3px; padding-bottom: 10px; transition: border-color .14s, transform .14s; }
.pkcard:hover { border-color: var(--gold); transform: translateY(-2px); }
.pkcard img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; margin-bottom: 7px; }
.pkcard b, .pkcard small, .pkcard .pkuse { padding: 0 10px; }
.pkcard b { font-size: 15.2px; }
.pkcard small { color: var(--muted); font-size: 12.9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pkuse { font-size: 12.3px; color: var(--purple-hi); }
.pkuse.free { color: #4ade80; }
@media (max-width: 900px) { .wcols { grid-template-columns: 1fr; } }

/* ---------- voice finder ---------- */
.vfh { font-size: 12.3px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 18px 0 9px; }
.vfh:first-child { margin-top: 4px; }
.vfh small { text-transform: none; letter-spacing: 0; font-size: 12.9px; margin-left: 8px; opacity: .8; }
.vflist { display: grid; gap: 7px; }
.vfrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; }
.vfth { width: 64px; height: 36px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; background: #1b1b1b; }
.vfname { display: grid; gap: 2px; min-width: 0; flex: 1; }
.vfname b { font-size: 15.2px; }
.vfname small { color: var(--muted); font-size: 12.9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the slot budget is always on screen, because fifteen is a hard ceiling */
.vfslots { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; }
.vfslot { font-size: 12.3px; color: var(--purple-hi); background: rgba(124,108,240,.14); border: 1px solid rgba(124,108,240,.34); border-radius: 999px; padding: 1px 9px; }
.vfslot.free { color: #f5c542; background: rgba(245,197,66,.1); border-color: rgba(245,197,66,.4); }

/* ---------- reference pack + face lock ---------- */
.wpack { margin-top: 12px; }
.wlock { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: #39ff14; background: rgba(57,255,20,.1); border: 1px solid rgba(57,255,20,.4); border-radius: 999px; padding: 3px 11px; }
.wpack .wvar { cursor: default; }

/* ---------- niche sets ---------- */
.nscard { border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 14px; overflow: hidden; cursor: pointer; background: linear-gradient(165deg, rgba(66, 66, 66,.72), rgba(45, 45, 45,.72)); transition: transform .14s cubic-bezier(.32,.72,0,1), border-color .14s ease; }
.nscard:hover { transform: translateY(-2px); border-color: rgba(169,156,248,.5); }
.nscard > img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: #1b1b1b; }
.nsnothumb { aspect-ratio: 16/9; display: grid; place-items: center; color: var(--muted); font-size: 13.5px; background: #1b1b1b; }

/* ---------- step 1: four numbered stages, read top-to-bottom then left-to-right ---------- */
.wtop { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
/* the influencer's own name, in the same serif the cast grid credits them with */
.wname { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.5rem; margin: 0; }
.wsub { color: var(--muted); font-size: 14.6px; margin-top: 3px; }
.wsub b { color: var(--pink-hi, #f472b6); font-weight: 600; }
.wmore { margin-left: auto; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); border-radius: 8px; cursor: pointer; font-size: 17.5px; line-height: 1; padding: 4px 10px; }
.wmore:hover { color: #ff6b6b; border-color: rgba(255,107,107,.5); }
/* the number is the whole point — it tells you what order produces a good result */
.wnum {
  display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
  font-style: normal; font-size: 11.7px; font-weight: 700; margin-right: 7px; vertical-align: -3px;
  color: #39ff14; border: 1px solid rgba(57,255,20,.55); background: rgba(57,255,20,.1);
}
.wstage { margin-bottom: 18px; }
.wstage > label:first-child { margin-top: 0; }
.wcap { display: block; color: var(--muted); font-size: 12.9px; line-height: 1.5; margin-top: 7px; }
.wnamein { margin-top: 12px; }
/* the picked voice reads as something you can hear, not a dropdown you have to parse */
.wvoicecard { display: flex; align-items: center; gap: 10px; padding: 9px 11px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; }
.btn.full.sm { width: 100%; justify-content: center; }
/* ---------- voice finder: the slot budget as a bar you cannot miss ---------- */
.vfbar { width: 100%; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; margin-bottom: 4px; }
.vfbar i { display: block; height: 100%; background: linear-gradient(90deg, #39ff14, #f5c542); }
.vfrec { font-size: 12.3px; color: #f5c542; }

/* readiness sits at the foot of the assets column, the way the mockup reads it */
.wready { margin-top: 22px; padding-top: 14px; }
.wr { font-size: 13.5px; }
.wr:not(.ok) { color: #f5c542; }

/* a guessed presenter gender — labelled "likely" because nothing here has heard the voice */
.vfg { font-style: normal; color: var(--gold-hi); }
/* Niche Sets: saved sets first, then the lists your launched boards already carry */
.nsh { font-size: 12.3px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 22px 0 11px; }
.nsh:first-child { margin-top: 4px; }
.nsh small { text-transform: none; letter-spacing: 0; font-size: 12.9px; margin-left: 8px; opacity: .8; }
.nscard.fromboard { border-style: dashed; }

/* per-channel script DNA, on the Niche Notes card where scripts actually get written */
.scrstyle { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.scrstyle small { flex: 1 1 220px; line-height: 1.5; }
.scrok { font-size: 13.5px; color: #39ff14; flex: 1 1 auto; }
.pickhint.warn { color: #f5c542; }
.pickhint a { color: var(--gold-hi); }

/* age sits with the niche, because who they are is decided before anything is generated */
.wagerow { margin-top: 12px; }
.wagerow label { margin-top: 0; }
.wagerow .agerange { width: 100%; }

/* clone straight from audio you already have — no YouTube, no extractor */
.vfown { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14.6px; }
.vfown small { width: 100%; color: var(--muted); font-size: 12.9px; }
/* when a YouTube clone fails, draw the eye to the two paths that always work */
.vfown.flash { border-top-color: var(--gold); box-shadow: 0 -1px 0 var(--gold); }
.vfown.flash b { color: var(--gold-hi); }

/* ---------- v24: thumbnail review — our EP on a competitor's channel page ---------- */
.modal.trev { width: min(1320px, 97vw); }
.modal.trev h2 small { font-weight: 500; color: var(--muted); font-size: .8rem; margin-left: 6px; }
.modal.trev h2 .tryt { font-size: .72rem; font-weight: 600; color: var(--purple-hi); text-decoration: none; margin-left: 8px; }
.modal.trev h2 .tryt:hover { text-decoration: underline; }
.trload { padding: 40px 0; text-align: center; color: var(--muted); }
.trnone { padding: 26px 14px; text-align: center; color: var(--muted); font-size: .85rem; }

.trpick { padding: 18px 0 8px; }
.trpick h3 { font-size: .95rem; margin-bottom: 12px; }
.trplist { display: flex; flex-wrap: wrap; gap: 8px; }
.trpch {
  background: var(--panel2, rgba(255, 255, 255, .04)); border: 1px solid var(--line); color: var(--text);
  border-radius: 9px; padding: 9px 14px; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.trpch:hover:not(:disabled) { border-color: var(--purple-hi); color: var(--purple-hi); }
.trpch:disabled { opacity: .6; cursor: default; }

.trbar { display: flex; align-items: center; gap: 10px; margin: 14px 0 12px; flex-wrap: wrap; }
.trbar .trspacer { flex: 1; }
.trdots { display: flex; gap: 5px; flex-wrap: wrap; }
/* hollow where an EP still has no thumbnail — the gaps in the slate read at a glance */
.trdots i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: .38; border: 1px solid transparent; }
.trdots i.empty { background: transparent; border-color: var(--muted); }
.trdots i.on { opacity: 1; background: var(--purple-hi); border-color: var(--purple-hi); transform: scale(1.25); }

/* YouTube's own grid, so the comparison is against what a viewer really sees */
.ytgrid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 16px;
  background: #0f0f0f; padding: 16px; border-radius: 12px; max-height: 68vh; overflow-y: auto;
}
.ytgrid.light { background: #fff; }
.ytg { min-width: 0; }
.ytgth { position: relative; border-radius: 10px; overflow: hidden; background: #222; aspect-ratio: 16 / 9; }
.ytgrid.light .ytgth { background: #e5e5e5; }
.ytgth img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ytgno { display: grid; place-items: center; height: 100%; font-size: .72rem; color: #aaa; text-align: center; padding: 8px; }
.ytgdur {
  position: absolute; right: 6px; bottom: 6px; background: rgba(0, 0, 0, .8); color: #fff;
  font-size: .68rem; font-weight: 600; padding: 1px 4px; border-radius: 4px;
}
.ytg b {
  display: block; margin-top: 9px; font-size: .82rem; line-height: 1.3; font-weight: 600; color: #f1f1f1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ytg small { display: block; margin-top: 4px; font-size: .74rem; color: #aaa; }
.ytgrid.light .ytg b { color: #0f0f0f; }
.ytgrid.light .ytg small { color: #606060; }
.ytgb { display: flex; gap: 5px; margin-top: 5px; min-height: 17px; }
.ytgvph, .ytgolr { font-size: .64rem; font-weight: 700; padding: 1px 6px; border-radius: 999px; }
.ytgvph { background: #272727; color: #ccc; }
.ytgolr { background: #a3123c; color: #fff; }
.ytgrid.light .ytgvph { background: #f2f2f2; color: #444; }

@media (max-width: 900px) {
  .ytgrid { grid-template-columns: repeat(2, 1fr); max-height: none; }
}
.vfprov { font-style: normal; font-size: .62rem; font-weight: 700; letter-spacing: .03em; padding: 1px 5px; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--muted); margin-right: 5px; }
.vfprov.el { background: rgba(124,108,240,.18); color: var(--purple-hi); }

/* ---------- v25: one face across several channels ---------- */
.pchip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  border-radius: 999px; padding: 2px 8px 2px 2px;
  font-size: 12.3px; font-weight: 600; cursor: pointer; user-select: none;
  transition: filter .12s;
}
.pchip:hover { filter: brightness(1.07); }
.pchip b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
/* the count is the quiet half: it answers "who else" without competing with the name */
.pchip em { font-style: normal; font-weight: 600; opacity: .72; white-space: nowrap; }
.pchip b::after { content: ' ·'; opacity: .5; }
.pav {
  width: 17px; height: 17px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9.9px; font-weight: 800; font-style: normal; letter-spacing: -.02em;
}
.pav.big { width: 34px; height: 34px; font-size: 15.2px; }

/* focus mode: the shared face lights, everything else recedes
   The lit cards were a thin ring over a board that was still three-quarters visible, which on a
   wide board reads as "nothing happened". What is not lit goes much further down and loses its
   colour; what is lit is ringed, tinted and lifted, so it is findable from across the screen. */
.card.pdim { opacity: .12; filter: grayscale(.7); }
.card.phit {
  border-color: transparent; position: relative; z-index: 2;
  transform: scale(1.03); transition: transform .14s;
}
.card.pflash { box-shadow: 0 0 0 1px #fff, 0 0 20px 3px rgba(255, 255, 255, .6) !important; }

/* the strip is the one piece of UI that has to be readable from across the room: it is what tells
   you what is lit and how to put it back, so it is sized like a toolbar, not like a footnote */
.pstrip {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 620;
  display: flex; align-items: center; gap: 13px; max-width: calc(100vw - 32px);
  padding: 12px 16px 12px 12px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .6);
  overflow-x: auto; white-space: nowrap;
  animation: pstripIn .16s ease;
}
@keyframes pstripIn { from { opacity: 0; transform: translateX(-50%) translateY(10px); } }
.pstrip > b { font-size: 18.7px; font-weight: 700; }
.pstrip .psub { color: var(--muted); font-size: 16.4px; }
.pjump {
  font-size: 16.4px; padding: 9px 15px; border-radius: 999px; flex: none;
  border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer;
  transition: border-color .14s, color .14s;
}
.pjump:hover { border-color: var(--purple-hi); color: var(--text); }
.pjump.pclear { color: var(--muted); }

@media (max-width: 700px) {
  .pchip em { display: none; }   /* the name matters more than the tally on a phone */
}

/* ---------- v26: the board runs 20% larger - requested after a week of squinting at 12px cards ---------- */
.kanban { zoom: 1.2; }

/* the niche input drives everything below it, so it reads like it matters */
#wniche { font-size: 1.05rem; padding: 11px 14px; flex: 1; min-width: 0; }

/* ---------- v26: assign mode - the board becomes a picker for one influencer ---------- */
.asbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 640;
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  background: linear-gradient(90deg, #0c3d24, #0f5131); border-bottom: 1px solid #1d7a4b;
  animation: pstripIn .16s ease;
}
.asbar .astitle { color: #d9f7e6; font-size: .85rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asbar .astitle b { color: #fff; }
.asbar .ascount { margin-left: auto; font-weight: 700; font-size: .8rem; color: #7ee2a4; border: 1px solid #2c5c3f; border-radius: 999px; padding: 3px 10px; flex: none; }
.asbar .pav { width: 26px; height: 26px; font-size: 11.7px; flex: none; }

/* selected: this influencer's green; taken: someone else's, and it says so by refusing the eye */
.card.asel { box-shadow: 0 0 0 2px #2ecc71, 0 0 16px 2px rgba(46, 204, 113, .45); border-color: transparent; position: relative; }
.card.asel::after { content: '✓'; position: absolute; top: -7px; left: -7px; width: 18px; height: 18px; border-radius: 50%; background: #2ecc71; color: #06301a; font-size: 12.9px; font-weight: 800; display: grid; place-items: center; }
.card.atake { opacity: .35; }

.asres { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; max-height: 40vh; overflow-y: auto; }
.asrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .85rem; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; }
.asrow .ok { color: #4ade80; font-size: .75rem; }
.asrow .bad { color: var(--bad); font-size: .75rem; }
.asnote { color: var(--muted); font-size: .85rem; margin-top: 4px; }

/*
 * 20% larger, scaled INSIDE the centering transform. zoom on a fixed element rescales its coordinate
 * space, so left:50% stops meaning the middle and the pill lands off-centre then visibly corrects -
 * the exact "opens here, then moves" being fixed. scale() happens after positioning and stays put.
 *
 * The -50% on Y arrived with the scale and contradicted the `top: 64px` above, which had been
 * written for an element anchored by its TOP edge. Together they put the pill's centre on 64px -
 * the seam of the top bar - so it half-covered the toolbar and half-covered the column headers.
 * Anchor it by its middle on purpose instead: dead centre of the window, the way every other
 * hold-a-key switcher sits, clear of the bar it was straddling.
 */
.nswitch { top: 50% !important; transform: translate(-50%, -50%) scale(1.2) !important; }

/* ---------- v27: the niche format library ---------- */
/* hard height, not min-height: the shell gives pages no height to inherit, so min-height left the
   footer floating mid-screen over a void. The grid scrolls inside; the page owns the viewport. */
/* 58px was a guess at the topbar, and it ignored .content's own padding - which changes at four
   breakpoints - so the page was tens of pixels off and stopped short of the window. Let the parent
   measure itself instead: .content becomes a flex column for this page only and .nlib takes what is
   left, exactly, at every width. */
.content:has(> .nlib) { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.nlib { display: flex; gap: 0; flex: 1; min-height: 0; overflow: hidden; }
.nlibside { flex: 0 0 220px; border-right: 1px solid var(--line); padding: 18px 14px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.nlibside h2 { font-family: "Bricolage Grotesque", serif; font-size: 1.05rem; margin-bottom: 6px; }
.nlf { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: 0; color: var(--text); padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: .85rem; }
.nlf:hover { background: rgba(255,255,255,.05); }
.nlf.on { background: rgba(124,108,240,.14); }
.nlf i { font-style: normal; }
.nlf span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nlf em { font-style: normal; font-size: .7rem; color: var(--muted); }
.nlibold { margin-top: auto; font-size: .78rem; color: var(--muted); text-decoration: none; padding: 8px 10px; }
.nlibold:hover { color: var(--purple-hi); }
.nlibmain { flex: 1; padding: 18px 20px; min-width: 0; display: flex; flex-direction: column; }
.nlhead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.nlhead h3 { font-family: "Bricolage Grotesque", serif; font-size: 1.15rem; }
.nlseed { font-size: .72rem; color: var(--muted); max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nlpaste { display: flex; gap: 8px; margin-bottom: 10px; }
.nlpaste input { flex: 1; }
.nlbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.nlsort { font-size: .75rem; color: var(--muted); }
.nlonly { font-size: .75rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.nlgrid { display: grid; grid-template-columns: repeat(var(--nlcols, 5), minmax(0, 1fr)); gap: 12px; overflow-y: auto; flex: 1; align-content: start; }
.nfc { cursor: pointer; min-width: 0; }
.nfcth { position: relative; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; background: #222; border: 2px solid transparent; }
.nfc.sel .nfcth { border-color: #2ecc71; box-shadow: 0 0 10px rgba(46,204,113,.35); }
.nfcth img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nfcno { display: grid; place-items: center; height: 100%; font-size: .72rem; color: #aaa; text-align: center; padding: 8px; }
.nfcsel { position: absolute; top: 5px; right: 5px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); display: grid; place-items: center; font-size: 12.9px; font-weight: 800; color: #06301a; }
.nfc.sel .nfcsel { background: #2ecc71; border-color: #2ecc71; }
.nfc b { margin-top: 7px; font-size: .8rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nfc small { display: block; margin-top: 4px; font-size: .72rem; color: var(--muted); }
.nfcb { display: flex; gap: 5px; margin-top: 5px; min-height: 17px; }
.nfcolr { font-size: .64rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: #a3123c; color: #fff; }
.nlfoot { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); margin-top: 12px; }
.nlfoot #nlcount { font-size: .78rem; color: var(--muted); }
.nlfoot select { max-width: 260px; }

/* v27.1: 1:1 with the mock - master row, channel chips, footer bar, folder modal */
.nlf.master { font-weight: 700; }
/* .nlx was already the outlier badge on a format card - the folder trash needs its own class */
.nlfx { font-weight: 400; font-size: .8rem; opacity: 0; padding: 0 3px; border-radius: 6px; cursor: pointer; transition: opacity .12s; }
.nlf:hover .nlfx { opacity: .5; }
.nlfx:hover { opacity: 1; background: rgba(255,90,90,.2); }
/* an EP showing the channel presenter it inherits, rather than an empty box */
.inherit { font-style: normal; font-size: .72rem; color: var(--muted); font-weight: 400; }
.upfield img.inheritimg { opacity: .72; }
.nlfe { font-weight: 400; font-size: .78rem; opacity: 0; padding: 0 3px; border-radius: 6px; cursor: pointer; transition: opacity .12s; }
.nlf:hover .nlfe { opacity: .5; }
.nlfe:hover { opacity: 1; background: rgba(124,108,240,.3); }

/* Refresh is the button this page is actually used with, and it was a small ghost while Generate
   sat there full size. Same metrics as .nlgo, purple so the green one still reads as the payoff. */
.nlrf { background: rgba(124,108,240,.2); color: var(--purple-hi); border: 1px solid rgba(124,108,240,.5); border-radius: 999px; padding: 9px 18px; font-weight: 700; font-size: .82rem; cursor: pointer; }
.nlrf:hover { background: rgba(124,108,240,.32); }
.nlrf:disabled { opacity: .6; }

/* the inputs, now under the grid rather than above it */
.nlinputs { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.nlinputs .nlchanbox { flex: 1 1 320px; margin-bottom: 0; }
.nlinputs .nlchanbox textarea { font-size: .82rem; min-height: 84px; }
.nlinputs .nlpaste { flex: 1 1 340px; flex-wrap: wrap; margin-bottom: 0; padding-top: 19px; }
.nlinputs .nlpaste input { padding: 9px 13px; font-size: .82rem; }
.nlinputs .nlchann { top: 30px; }
.nllab { display: block; font-size: .72rem; color: var(--muted); margin-bottom: 5px; }

/* the saved sets read as a wall of cards, not a scrolling column */
.nscompact { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.nlf em { background: rgba(124,108,240,.16); color: var(--purple-hi); border-radius: 999px; padding: 1px 7px; font-size: .66rem; }
.nlnewbtn { background: none; border: 1px dashed var(--line); color: var(--muted); border-radius: 8px; padding: 8px 10px; cursor: pointer; font-size: .8rem; text-align: left; }
.nlnewbtn:hover { color: var(--text); border-color: var(--muted); }
.nlchip { font-size: .66rem; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
.nlchanbox { position: relative; margin-bottom: 10px; }
.nlchanbox textarea { width: 100%; font-size: .78rem; resize: vertical; }
.nlchann { position: absolute; top: 8px; right: 12px; font-size: .7rem; color: var(--muted); }
.nlchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.nlch { font-size: .7rem; font-weight: 600; border-radius: 999px; padding: 3px 9px; display: inline-flex; align-items: center; gap: 5px; }
.nlch em { font-style: normal; opacity: .75; }
.nlch b { cursor: pointer; opacity: .6; font-weight: 800; }
.nlch b:hover { opacity: 1; }
.nlpaste { align-items: center; }
.nlclip { color: var(--muted); }
.nlt { background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 4px 12px; font-size: .74rem; cursor: pointer; }
.nlt:hover { color: var(--text); }
@media (max-width: 700px) { .nlgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }   /* phones: as many as fit */
.nfc small { font-size: .68rem; }
.nlfoot #nlcount b { color: var(--text); }
.nlboardsel { font-size: .78rem; border-radius: 999px; padding: 6px 12px; max-width: 230px; }
.nlgo { background: #2ecc71; color: #06301a; border: 0; border-radius: 999px; padding: 9px 18px; font-weight: 700; font-size: .82rem; cursor: pointer; }
.nlgo:hover { filter: brightness(1.08); }
.nlgo:disabled { opacity: .6; }
.nfemoji { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.nfe { font-size: 21.1px; background: rgba(255,255,255,.04); border: 2px solid transparent; border-radius: 9px; padding: 5px 8px; cursor: pointer; }
.nfe.on { border-color: #2ecc71; background: rgba(46,204,113,.1); }

/* ---------- CREATE: the simple studio (Starter, Creator, trial) ---------- */
/* the cursive accent is the landing page's: Instrument Serif italic, leaned further than italic alone */
.qshello em, .qs em.lean {
  font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: 0;
  display: inline-block; transform: skewX(-9deg); padding-right: .04em; margin-right: -.02em; color: #4ade80;
}
.qs { max-width: 760px; margin: 0 auto; padding: 18px 4px 60px; }
.qseyebrow { font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 12.9px; letter-spacing: .22em; color: var(--muted); margin-bottom: 10px; }
.qshello { font-family: "Inter", system-ui, sans-serif; font-size: clamp(30px, 5vw, 44px); font-weight: 700; letter-spacing: -1.2px; line-height: 1.08; margin: 0 0 8px; }
.qssub { color: var(--muted); font-size: 17px; margin: 0 0 22px; }
.qs .trialnote { margin: 0 0 16px; }
.qsnew {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer;
  padding: 16px 18px; border-radius: 14px; color: var(--text);
  background: linear-gradient(180deg, rgba(224,170,30,.10), rgba(224,170,30,.03)); border: 1px solid rgba(224,170,30,.28);
  transition: border-color .15s, transform .15s;
}
.qsnew:hover { border-color: var(--gold); transform: translateY(-1px); }
.qsic { flex: none; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; font-size: 23.4px; color: #221803; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); }
.qsnt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.qsnt b { font-size: 17.5px; }
.qsnt small { color: var(--muted); font-size: 14.6px; }
.qsarr { color: var(--gold-hi); font-size: 21.1px; }
#qsvids { margin-top: 22px; }
.qsempty { padding: 26px 18px; text-align: center; color: var(--muted); font-size: 15.8px; border: 1px solid var(--line); border-radius: 14px; }
.qsempty a { color: var(--gold-hi); }
.qshead { font-size: 15.2px; font-weight: 600; color: var(--muted); margin: 0 0 10px; letter-spacing: .02em; }
.qshead small { margin-left: 6px; padding: 1px 7px; border-radius: 99px; background: var(--panel-2); color: var(--text); }
.qsgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.qsvid { background: var(--panel); border: 1px solid var(--line); border-radius: 13px; overflow: hidden; display: flex; flex-direction: column; }
.qsvid.failed { border-color: rgba(239,68,68,.35); }
.qsmedia { position: relative; aspect-ratio: 16 / 9; background: #07080f; }
.qsmedia img, .qsmedia video { width: 100%; height: 100%; object-fit: cover; display: block; }
.qsvid.working .qsmedia img { filter: brightness(.55) saturate(.7); }
.qsplay {
  position: absolute; inset: 0; margin: auto; width: 50px; height: 50px; border-radius: 50%; border: 0; cursor: pointer;
  font-size: 21.1px; color: #221803; background: var(--gold-hi); box-shadow: 0 8px 22px rgba(0,0,0,.5);
}
.qsbadge { position: absolute; top: 8px; right: 8px; font-size: 12.9px; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: rgba(0,0,0,.65); color: var(--gold-hi); }
.qsmeta { padding: 11px 12px 12px; display: grid; gap: 4px; }
.qsmeta b { font-size: 15.8px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.qsmeta small { color: var(--muted); font-size: 13.5px; }
.qsprog { display: grid; gap: 5px; margin-top: 4px; }
.qsprog span { font-size: 13.5px; color: var(--gold-hi); }
.qsbar { height: 5px; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.qsbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-hi)); transition: width .6s; }
.qsfail { font-size: 14px; color: var(--bad); margin-top: 2px; }
.qsfail span { color: var(--muted); }
.qsact { display: flex; gap: 6px; margin-top: 6px; }

.qsform .qsfield { margin: 0 0 18px; }
.qsform label { display: block; font-family: "Spline Sans Mono", ui-monospace, monospace; font-size: 12.9px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.qsform label.btn { display: inline-flex; font-family: inherit; font-size: 14.6px; letter-spacing: 0; text-transform: none; color: var(--text); margin: 0; }
.qsform input#qstitle { width: 100%; font-size: 17.5px; padding: 12px 14px; border-radius: 11px; }
.qspeople { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.qsp {
  display: grid; justify-items: center; gap: 4px; padding: 12px 8px 10px; border-radius: 12px; cursor: pointer; text-align: center;
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
}
.qsp.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.qsp.dim { opacity: .55; }
.qsp img, .qsph { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; }
.qsph { display: grid; place-items: center; background: var(--panel-2); font-size: 25.7px; color: var(--muted); }
.qsp b { font-size: 14.6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qsp small { font-size: 12.3px; color: var(--muted); }
.qsp small.ok { color: var(--ok); }
.qsp small.warn { color: var(--gold-hi); }
.qsp.add { border-style: dashed; }
.qsnone { grid-column: 1 / -1; display: grid; justify-items: center; gap: 8px; padding: 22px; text-align: center; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: 15.2px; }
.qsnone b { color: var(--text); font-size: 16.4px; }
.qsseg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 11px; background: var(--panel); border: 1px solid var(--line); margin-bottom: 10px; }
.qsseg button { border: 0; background: none; color: var(--muted); font: inherit; font-size: 15.2px; padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.qsseg button.on { background: var(--panel-2); color: var(--text); box-shadow: 0 0 0 1px var(--gold) inset; }
.qsvrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 11px; background: var(--panel); border: 1px solid var(--line); }
.qsvrow.muted { color: var(--muted); font-size: 15.2px; }
.qsvlab { flex: 1; min-width: 160px; display: flex; align-items: center; gap: 8px; }
.qsup { padding: 12px 14px; border-radius: 11px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.qsup p { width: 100%; margin: 0; color: var(--muted); font-size: 14.6px; line-height: 1.5; }
.qsupst { font-size: 14.6px; color: var(--muted); overflow-wrap: anywhere; }
.qsstyle { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.qsstyle > div { padding: 12px 14px; border-radius: 11px; background: var(--panel); border: 1px solid var(--line); display: grid; gap: 2px; }
.qsstyle > div.on { border-color: var(--gold); }
.qsstyle b { font-size: 15.8px; }
.qsstyle small { color: var(--muted); font-size: 14px; }
.qsgo { margin-top: 6px; padding: 13px; font-size: 17.5px; }
.qsnote { min-height: 18px; margin-top: 8px; font-size: 15.2px; color: var(--muted); }
.qsnote.bad { color: var(--bad); }

/* live generation: sidebar rows, and a pill in the top bar for phones where the sidebar is a closed drawer */
.genlive .genrow {
  display: grid; gap: 4px; width: 100%; text-align: left; cursor: pointer; margin: 0 0 6px; padding: 8px 10px;
  border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); font: inherit;
}
.genlive .gtop { display: flex; gap: 8px; align-items: baseline; font-size: 14px; }
.genlive .gt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.genlive .gtop b { color: var(--gold-hi); font-size: 14px; }
.genlive .gbar { height: 4px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; }
.genlive .gbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-hi)); transition: width .6s; }
.genlive small { font-size: 12.3px; color: var(--muted); }
.shell.collapsed .genlive { display: none; }
.genpill {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 5px 10px; border-radius: 99px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--gold-hi); background: rgba(224,170,30,.12); border: 1px solid rgba(224,170,30,.35);
  white-space: nowrap;
}
.genpill .gdot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-hi); animation: genpulse 1.4s ease-in-out infinite; }
@keyframes genpulse { 50% { opacity: .3; } }
.plancard li.boardsyes::before, .plancard li.boardsyes { color: var(--ok); }

@media (max-width: 820px) {
  .qs { padding: 8px 16px 40px; }
  .qsnew { padding: 13px 14px; }
  .qsnt small { font-size: 14px; }
  .qsgrid { grid-template-columns: 1fr; }
  .qspeople { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qsp img, .qsph { width: 52px; height: 52px; }
  .qsseg { display: flex; }
  .qsseg button { flex: 1; }
  .qsvlab { min-width: 0; width: 100%; }
}
.genpill[hidden] { display: none; }

/* Create is off while every render slot is busy - it reads as waiting, not broken */
.qsnew.locked, .qsnew:disabled { cursor: not-allowed; opacity: .6; transform: none; border-color: var(--line); }
.qsnew.locked .qsic { filter: grayscale(1); }
.qsnew.locked .qsnt small { color: var(--gold-hi); }

/* plan cards: the operator's six/seven lines with outline icons, nothing else */
.plancard ul.planlines { gap: 11px; font-size: 15.8px; margin-bottom: 18px; }
.plancard ul.planlines li::before { content: none; }
.plancard li.pl { display: flex; align-items: center; gap: 10px; color: var(--text); }
.plancard li.pl svg { width: 17px; height: 17px; flex: none; color: var(--muted); }
.plancard li.pl.lead { font-weight: 700; }
.plancard li.pl.lead:first-child { font-family: "Bricolage Grotesque", serif; font-size: 24.6px; letter-spacing: -.5px; }
.plancard li.pl.boardsyes, .plancard li.pl.boardsyes svg { color: var(--ok); }
.planfee { color: var(--muted); font-size: 14.6px; margin-top: 14px; text-align: center; }

/* video length on the new video page - Creator, Pro and Scale */
.qslenrow { display: flex; align-items: center; gap: 14px; }
.qslenrow input[type=range] { flex: 1; accent-color: var(--gold); }
.qslenrow b { min-width: 58px; text-align: right; font-size: 17.5px; color: var(--gold-hi); }
.qslenhint { display: block; margin-top: 6px; color: var(--muted); font-size: 14px; }

/* Cancel: on a generating card's badge, in the sidebar's Generating list, and on Create */
.bdg.run .bdgx {
  margin-left: 7px; border: 0; background: rgba(0,0,0,.28); color: inherit; font: inherit; font-size: 12.9px;
  line-height: 1; padding: 2px 5px; border-radius: 5px; cursor: pointer; opacity: .75;
}
.bdg.run .bdgx:hover { opacity: 1; background: var(--bad); color: #fff; }
.genlive .sec { display: flex; align-items: center; justify-content: space-between; }
.genlive .cancelall {
  border: 1px solid var(--line); background: none; color: var(--muted); font: inherit; font-size: 12.3px;
  letter-spacing: 0; text-transform: none; padding: 2px 7px; border-radius: 6px; cursor: pointer;
}
.genlive .cancelall:hover { color: #fff; background: var(--bad); border-color: var(--bad); }
.genlive .genx {
  font-style: normal; font-size: 12.9px; line-height: 1; padding: 2px 5px; border-radius: 5px; cursor: pointer;
  color: var(--muted); background: rgba(255,255,255,.06);
}
.genlive .genx:hover { color: #fff; background: var(--bad); }

/* the admin service strip, behind one small button */
.statuswrap { position: relative; display: inline-flex; }
.topbar .statusbtn {
  border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); font: inherit; font-size: 13.5px;
  padding: 4px 10px; border-radius: 99px; cursor: pointer; white-space: nowrap;
}
.topbar .statusbtn.ok { color: var(--ok); border-color: rgba(74,222,128,.35); }
.topbar .statusbtn.low { color: var(--gold-hi); border-color: rgba(224,170,30,.4); }
.topbar .statusbtn.down { color: #fff; background: var(--bad); border-color: var(--bad); }
.topbar .statusbtn:hover { filter: brightness(1.1); }
/* The panel is one scrolling list now, not a wrapped row of pills, so it gets a fixed width and
   owns its own scrolling rather than growing sideways off the screen. */
.statuswrap .botsrow {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 400;
  display: block; width: min(92vw, 400px);
  padding: 11px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.9);
}
.statuswrap .botsrow[hidden] { display: none; }

/* Three lists in one panel: what is left in each account, what our own last call to each model did,
   and vgen's own board. Same row shape throughout, so the eye reads one column of dots. */
.vgstat { max-height: 66vh; overflow-y: auto; overflow-x: hidden; font-size: 14px; }
.vgstat * { min-width: 0; overflow-wrap: break-word; }   /* up and down only - a long line wraps instead of scrolling sideways */
.vgbanner { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; font-weight: 600; font-size: 14.6px; }
.vgbanner i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.vgbanner.ok { background: rgba(47,208,95,.1); border: 1px solid rgba(47,208,95,.35); color: var(--ok); }
.vgbanner.ok i { background: var(--ok); }
.vgbanner.bad { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.35); color: #f87171; }
.vgbanner.bad i { background: #f87171; }
.vgsub { color: var(--muted); font-size: 12.3px; margin: 7px 2px 3px; }
.vgfold { display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: 0; padding: 5px 2px; cursor: pointer; text-align: left; font: inherit; font-size: 12.3px; }
.vgfold:hover { color: var(--text); }
.vgfold span { width: 10px; display: inline-block; }
.vgfold small { margin-left: auto; font-size: 11px; opacity: .8; }
.vgfoldbody[hidden] { display: none; }
.vghead { color: var(--muted); font-size: 12.3px; letter-spacing: .09em; text-transform: uppercase; margin: 10px 2px 4px; }
.vgrow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; background: var(--bg); margin-bottom: 3px; }
.vgdot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--muted); }
.vgdot.operational { background: var(--ok); }
.vgdot.maintenance { background: #818cf8; }
.vgdot.degraded, .vgdot.down, .vgdot.out { background: #f87171; }
.vgdot.low { background: var(--gold); }
.vgdot.ok { background: var(--ok); }
.vgdot.unknown { background: var(--muted); }
.vglabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vgstate { margin-left: auto; flex: none; text-align: right; font-size: 12.9px; color: var(--muted); max-width: 58%; }
.vgstate.operational { color: var(--ok); }
.vgstate.maintenance { color: #818cf8; }
.vgstate.degraded, .vgstate.down, .vgstate.out { color: #f87171; }
.vgstate.low { color: var(--gold-hi); }
.vgstate.ok { color: var(--ok); font-weight: 600; }
.vgstate.unknown { color: var(--muted); }
.vgstate small { display: block; color: var(--muted); font-size: 11.7px; font-weight: 400; white-space: normal; line-height: 1.35; }
.vgerr { color: #f87171; padding: 6px 2px; }
/* the two model pickers: a pinned one is amber, because it is a deliberate override of the
   chain and should never look like the resting state. */
.pinrow { padding: 7px 8px; border-radius: 7px; background: var(--bg); margin-bottom: 3px; }
.pinrow label { display: block; font-size: 12.9px; color: var(--muted); margin-bottom: 4px; }
.pinrow.on label b { color: var(--gold-hi); font-weight: 600; }
.pinrow select { width: 100%; font: inherit; font-size: 14px; padding: 5px 7px; border-radius: 6px;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line); }
.pinrow.on select { border-color: rgba(224,170,30,.5); color: var(--gold-hi); }
.pinrow small { display: block; margin-top: 4px; font-size: 11.7px; color: var(--muted); line-height: 1.35; }

/* the fal-only switch: a checkbox sits on the same line as its label, unlike the two selects */
.pinrow.tog { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 8px; }
.pinrow.tog label { margin: 0; font-size: 13.5px; color: var(--text); cursor: pointer; }
.pinrow.tog input { width: 15px; height: 15px; accent-color: var(--gold); cursor: pointer; margin: 0; }
.pinrow.tog small { grid-column: 1 / -1; }
.pinrow.tog.on { background: rgba(224, 170, 30, .09); box-shadow: inset 0 0 0 1px rgba(224, 170, 30, .3); }


/* Niche Blueprint: the set-once settings. No longer folded - see .cptrigger below for why the
   presenter leads them. */
.advfields[hidden] { display: none; }

/* THE PRESENTER BOX. First field on the blueprint and the only green one, because picking a face is
   the decision the rest of the column follows from: it fills in the photo, the name and the voice.
   Empty it reads as an invitation; filled it is the face itself, so you never have to guess which
   Martha you attached. */
.cptrigger {
  display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 4px;
  padding: 8px 12px; min-height: 52px; cursor: pointer; font: inherit; text-align: left;
  border-radius: 10px; color: var(--text);
  border: 1px solid rgba(47,208,95,.55); background: rgba(47,208,95,.08);
}
.cptrigger:hover { border-color: var(--green, #2fd05f); background: rgba(47,208,95,.15); }
.cptrigger.on { border-style: solid; }
.cptrigger .cpface {
  width: 36px; height: 36px; flex: none; border-radius: 8px; object-fit: cover;
  background: var(--bg); display: grid; place-items: center; font-size: 19.9px;
}
.cptrigger .cpnm { font-weight: 600; font-size: 15.8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cptrigger .cpempty { font-size: 15.8px; color: var(--green, #2fd05f); font-weight: 600; }
.cptrigger .cpgo { margin-left: auto; flex: none; font-size: 13.5px; color: var(--muted); }
.cptrigger:hover .cpgo { color: var(--green, #2fd05f); }

/* "8 episodes use faces of their own, not Coy Campbell" - stated on the blueprint, because that is
   the one screen where you cannot otherwise tell. */
.inhwarn {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 2px; padding: 9px 11px;
  border-radius: 9px; font-size: 14px; line-height: 1.4;
  background: rgba(224,170,30,.08); border: 1px solid rgba(224,170,30,.35); color: var(--gold-hi);
}
.inhwarn[hidden] { display: none; }
.inhwarn span { flex: 1; min-width: 150px; }

/* the rename pencil sits beside the bin on a library face - same treatment, one slot to its left.
   It replaces right-clicking the presenter dropdown, which is hidden behind the green box now. */
.pren { position: absolute; bottom: 8px; right: 38px; background: rgba(17, 17, 17,.7); border: 1px solid var(--line); color: var(--muted); border-radius: 7px; cursor: pointer; font-size: 12.9px; padding: 3px 6px; opacity: 0; transition: opacity .12s ease, color .12s ease; }
.pcardx:hover .pren { opacity: 1; }
.pren:hover { color: var(--gold); border-color: rgba(224,170,30,.5); }
/* what a video cost to make: a floor, not an invoice - attempts charged for but never delivered
   cannot be seen from a shot list, so the badge stays quiet and the tooltip is honest. */
.vlcostrow { margin-top: 4px; }
.vlcost { display: inline-block; padding: 2px 7px; border-radius: 99px; font-size: 12.9px; font-weight: 600;
  font-family: "Spline Sans Mono", monospace; color: var(--ok); background: rgba(74,222,128,.1);
  border: 1px solid rgba(74,222,128,.3); cursor: help; }
.vlcost.est { color: var(--muted); background: rgba(255, 255, 255, 0.05); border-color: var(--line); }
.vlday h3 .vldaycost { float: right; font-family: "Spline Sans Mono", monospace; font-size: 14px;
  font-weight: 600; color: var(--muted); cursor: help; }


/* The voice finder is read at arm's length - the title, the search box and its button all scale up. */
.modal:has(#vfq) h2 { font-size: 1.5rem; margin-bottom: 10px; }
.modal:has(#vfq) #vfq { font-size: 18.1px; padding: 12px 14px; }
.modal:has(#vfq) .rowflex .btn { font-size: 17px; padding: 11px 20px; }
.modal:has(#vfq) .wcap { font-size: 14.6px; }
.vfown { font-size: 15.8px; }
.vfown small { font-size: 14px; }
@media (max-width: 820px) { .modal:has(#vfq) h2 { font-size: 1.25rem; } }

/* the board you were just sent to says so: its name flashes once on arrival */
.topbar h1.tflash { animation: titleFlash 2.4s ease-out 1; }
@keyframes titleFlash {
  0% { color: var(--gold-hi); text-shadow: 0 0 18px rgba(224,170,30,.75); }
  70% { color: var(--gold-hi); text-shadow: 0 0 10px rgba(224,170,30,.35); }
  100% { color: inherit; text-shadow: none; }
}

/* Admin: tabs across the top, the work first (replaces the old folding panels) */
.admbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 12px; }
.admbar label { color: var(--muted); font-size: 14px; }
.admbar select { width: auto; min-width: 220px; padding: 7px 10px; font-size: 15.2px; }
.panelbox.admsec > h3 { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; }
.panelbox.admsec > h3:hover { color: var(--gold-hi); }
.admcaret { font-style: normal; color: var(--muted); font-size: 12.9px; transition: transform .15s; }
.panelbox.admsec.closed .admcaret { transform: rotate(-90deg); }
.panelbox.admsec.closed .admbody { display: none; }
.panelbox.admsec.closed { padding-bottom: 12px; }

/* the five Claude chose, marked out from the rest of the list */
.vpcard.pick { border-color: rgba(224,170,30,.45); background: linear-gradient(180deg, rgba(224,170,30,.07), transparent); }
.vpcard.pick .vpmeta small { color: var(--gold-hi); }

.admtabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: -4px 0 18px; }
.admtab {
  border: 0; background: none; color: var(--muted); font: inherit; font-size: 15.8px; cursor: pointer;
  padding: 10px 14px; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 7px;
}
.admtab:hover { color: var(--text); }
.admtab.on { color: var(--text); border-bottom-color: var(--gold); }
.admcount { font-style: normal; font-size: 12.9px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--gold); color: #221803; }
.admlede { color: var(--muted); font-size: 15.2px; margin: 0 0 14px; }
.admcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.admcard {
  text-align: left; cursor: pointer; display: grid; gap: 6px; padding: 16px 18px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--line); color: var(--text); font: inherit;
}
.admcard:hover { border-color: var(--gold); }
.admcard .admct { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 14.6px; }
.admcard .admct i { font-style: normal; }
.admcard.ok .admct i { color: var(--ok); }
.admcard.warn .admct i { color: var(--gold-hi); }
.admcard b { font-family: "Bricolage Grotesque", serif; font-size: 32.5px; letter-spacing: -1px; }
.admcard small { color: var(--muted); font-size: 14px; line-height: 1.45; }
.admsign { display: grid; gap: 2px; }
.admrow { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-top: 1px solid var(--line); }
.admrow:first-child { border-top: 0; }
.admwho { display: grid; gap: 2px; min-width: 0; }
.admwho b { font-size: 15.8px; overflow: hidden; text-overflow: ellipsis; }
.admwho small { color: var(--muted); font-size: 13.5px; }
.admdec { color: var(--bad); border-color: rgba(239,68,68,.35); }
.admdec:hover { background: var(--bad); color: #fff; }
.admclear h3 { color: var(--ok); }
@media (max-width: 820px) {
  .admtabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .admtabs::-webkit-scrollbar { display: none; }
  .admtab { white-space: nowrap; }
  .admrow { flex-wrap: wrap; }
}

/* Settings: a ledger that reads as a table, and money moved in beside the workspace it belongs to */
.pnote { color: var(--muted); font-size: 14.6px; line-height: 1.5; }
.reqlist { display: grid; gap: 2px; margin-top: 10px; }
.reqrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 15.2px; }
.reqrow:first-child { border-top: 0; }
.reqrow small { color: var(--muted); }
.reqempty { color: var(--muted); font-size: 14.6px; padding: 8px 0; }
.actbox h3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.acount { color: var(--muted); font-size: 13.5px; font-weight: 500; }
.actwarn {
  display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 12px; padding: 11px 13px; border-radius: 10px;
  background: rgba(224,170,30,.08); border: 1px solid rgba(224,170,30,.3); color: var(--gold-hi); font-size: 14.6px; line-height: 1.45;
}
.actbar { display: flex; gap: 8px; margin-bottom: 8px; }
.actbar input { flex: 1; padding: 8px 11px; font-size: 14.6px; }
.actbar select { width: auto; padding: 8px 11px; font-size: 14.6px; }
.actlist { display: grid; }
.actrow { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-top: 1px solid var(--line); font-size: 14.6px; }
.actrow:first-child { border-top: 0; }
.actdot { width: 6px; height: 6px; border-radius: 99px; background: var(--muted); flex: none; }
.actdot.warn { background: var(--gold); }
.actkind { font-size: 12.3px; letter-spacing: .06em; color: var(--muted); font-weight: 700; width: 58px; flex: none; }
.actid { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; color: var(--gold-hi); }
.actmeta { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actamt { margin-left: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; color: var(--muted); flex: none; }
.actamt.pos { color: var(--ok); }
.actamt.neg { color: var(--text); }
.actmore { width: 100%; margin-top: 10px; }
.autorow { display: flex; align-items: flex-start; gap: 11px; margin-top: 14px; padding: 12px 13px; border-radius: 11px; background: var(--panel-2); border: 1px solid var(--line); font-size: 14.6px; line-height: 1.5; color: var(--text); }
.autorow.on { border-color: rgba(34,197,94,.35); }
.autorow .toggle { flex: none; margin-top: 1px; }
@media (max-width: 720px) {
  .actkind { width: auto; }
  .actmeta { display: none; }
}

/* the card you arrived at from a niche chip: ringed until you click away or press Escape */
.card.pkeep {
  box-shadow: 0 0 0 3px var(--gold), 0 0 26px 6px rgba(224, 170, 30, .45) !important;
  border-color: transparent !important;
  background-image: linear-gradient(180deg, rgba(224, 170, 30, .14), transparent 60%);
  position: relative; z-index: 2; transform: scale(1.03); transition: transform .14s;
}
.keepstrip > b { color: var(--gold-hi); }
.pjump.pclear { color: var(--text); border-color: var(--gold); font-weight: 600; padding: 9px 18px; }
.pjump.pclear:hover { background: var(--gold); color: #221803; }

/* the voice casting call: what the niche implied, then six different readings of it */
.vfnote { margin-top: 8px; font-size: 15.2px; padding: 9px 12px; }
.vprofile {
  display: grid; gap: 4px; margin: 12px 0 4px; padding: 12px 14px; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--line); font-size: 14.6px; color: var(--muted); line-height: 1.5;
}
.vprofile b { color: var(--gold-hi); font-size: 15.8px; }
.vpmeta .vread {
  font-style: normal; font-size: 12.9px; font-weight: 600; margin-left: 8px; padding: 2px 8px;
  border-radius: 999px; background: rgba(224, 170, 30, .16); color: var(--gold-hi);
}

/* Wifi Ideas: the blueprint's big column, triaged with the arrow keys */
.wfi { display: flex; flex-direction: column; gap: 9px; min-height: 380px; height: 100%; }
.wfihead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wfihead b { font-size: 16.4px; }
.wfihead select { width: auto; flex: 0 1 auto; max-width: 210px; padding: 7px 9px; font-size: 14.6px; }
.wfihint { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.wfihint b { color: var(--text); font-weight: 600; }
.wfilist { flex: 1; overflow: auto; display: grid; gap: 3px; align-content: start; min-height: 220px; padding-right: 3px; }
.wfiempty { color: var(--muted); font-size: 14.6px; padding: 18px 0; }
.wfirow {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; cursor: pointer;
  border: 1px solid transparent; background: var(--panel-2); transition: border-color .12s, opacity .12s;
}
/* the focused row: a quiet green edge, not a white glow */
/* the focused row: a tint only - the green edge that moved with the arrows was distracting */
.wfirow.on { background: rgba(74,222,128,.1); }
.wfifoot a { color: var(--muted); text-decoration: none; }
.wfifoot a:hover { color: var(--text); }
.wfifoot b { color: var(--text); }
.wfipush { font-weight: 700; }
.wfipush:disabled { opacity: .45; }
.wfiscore {
  flex: none; width: 30px; text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px; color: var(--gold-hi);
}
.wfimeta { min-width: 0; flex: 1; display: grid; gap: 2px; }
.wfimeta b { font-size: 15.2px; line-height: 1.35; }
.wfimeta small { color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.wfiacts { flex: none; display: flex; gap: 4px; }
.wfib {
  width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line);
  background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1;
}
.wfib.yes:hover { border-color: var(--ok); color: var(--ok); }
.wfib.no:hover { border-color: var(--bad); color: var(--bad); }
.wfirow.kept .wfib.yes { border-color: var(--ok); color: var(--ok); }
/* the panel is focusable so the arrows work; the browser must not draw its white focus ring around it */
#wfi:focus, #wfi:focus-visible, #wfi:focus-within { outline: none; }
.wfifoot { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }

/* the blueprint is 70/30 now: ideas get the room, the settings take the side */
.modal .cols.two { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); }
.cols.two .notescol #wfi { min-height: 520px; }
@media (max-width: 900px) { .modal .cols.two { grid-template-columns: 1fr; } }

/*
 * The blueprint is a workspace now, not a form, so it gets the screen. The :has(.cols.two) rule
 * below outranked the class by specificity and the body's density pass shrinks everything by a
 * fifth on top, which is how "1280px" rendered at 944 on a 1900px display. Stated once, firmly.
 */
.modal.bpmodal { width: min(1720px, 96vw) !important; max-width: 96vw !important; padding: 28px 32px; }
.modal.bpmodal .cols.two { gap: 28px; align-items: start; }
/* the ideas column keeps its height whatever the side column does, so Shift never reflows the page */
.modal.bpmodal .notescol #wfi { height: min(72vh, 900px); min-height: 480px; }
.modal.bpmodal .f > label { margin-top: 12px; }

/* Riff inputs and the parent outliers a title borrowed from */
.wfiin { display: grid; gap: 6px; }
.wfiin input { font-size: 14.6px; padding: 8px 11px; }
.wfipar { display: grid; gap: 3px; margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: rgba(224,170,30,.07); border: 1px solid rgba(224,170,30,.25); }
.wfipar i { font-style: normal; font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.wfipar i b { color: var(--gold-hi); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.9px; margin-right: 4px; }
.wfipar i u { text-decoration: none; color: var(--gold-hi); }
.wfimeta small em { font-style: normal; color: var(--bad); }

/* Niche Sets: the folder view as an input, with the thumbnails at a readable size */
.nlcols { display: inline-flex; align-items: center; gap: 4px; }
.nlcols small { color: var(--muted); font-size: .72rem; margin-right: 4px; }
.nlcols .nlt.on { color: var(--text); border-color: var(--gold); background: rgba(224,170,30,.12); }
.nfmodal { width: min(560px, 94vw); }
.nfname { width: 100%; margin-top: 10px; font-size: 21.1px; padding: 14px 16px; }
.nfcur { font-size: 28.2px; line-height: 1; padding: 4px 8px; border-radius: 9px; background: rgba(255,255,255,.05); }
.nfnone { color: var(--muted); font-size: 14px; padding: 6px 0; }

/* editing a riffed title in place */
.wfittl { cursor: text; }
.wfittl:hover { text-decoration: underline dotted var(--muted); text-underline-offset: 3px; }
.wfiedit { width: 100%; font-size: 15.2px; font-weight: 600; padding: 6px 9px; border-color: var(--gold); }
.wfib.pen:hover { border-color: var(--gold); color: var(--gold-hi); }

/* the video library: the day is the heading, the niche is a chip */
.vlib { padding: 4px 0; }
.vlibhead { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.vlibhead h2 { font-family: "Bricolage Grotesque", serif; font-size: 1.25rem; }
.vlibcount { color: var(--muted); font-size: 14px; }
.vlq { width: min(360px, 100%); padding: 8px 12px; font-size: 14.6px; }
.vlday { margin-bottom: 22px; }
.vlday h3 { font-size: 15.2px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.vlday h3 small { font-size: 12.9px; padding: 1px 7px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--line); }
.vlgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.vlcard { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px; display: grid; gap: 6px; }
.vlth { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--panel-2); display: grid; place-items: center; }
.vlth img { width: 100%; height: 100%; object-fit: cover; }
.vlnoth { font-size: 30.4px; opacity: .5; }
.vlplay { position: absolute; inset: 0; margin: auto; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 18.7px; cursor: pointer; opacity: .85; }
.vlplay:hover { background: var(--gold); color: #221803; opacity: 1; }
.vlmin { position: absolute; right: 6px; bottom: 6px; font-size: 12.3px; padding: 2px 6px; border-radius: 6px; background: rgba(0,0,0,.7); color: #fff; }
.vlttl { font-size: 14.6px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vlmeta { color: var(--muted); font-size: 12.9px; }
.vlchip { color: var(--gold-hi); }
.vlacts { display: flex; gap: 4px; flex-wrap: wrap; }
.vlacts .btn { font-size: 12.9px; padding: 4px 8px; }
.vlmodal { width: min(1100px, 96vw); padding: 12px; }
.vlmodal video { width: 100%; border-radius: 8px; background: #000; max-height: 82vh; }

/* niche sets: per-row lives in the header now, and the inputs fold */
.nlhead .nlcols { margin-left: auto; margin-right: 6px; }
.nlfold { display: block; margin: 10px auto 0; padding: 5px 14px; border-radius: 999px; border: 1px solid rgba(74,222,128,.4); background: rgba(74,222,128,.08); color: var(--ok); font-size: 13.5px; cursor: pointer; }
.nlfold:hover { background: rgba(74,222,128,.16); }
.nlinputs[hidden] { display: none; }
/* a parent outlier is a link to its video */
.wfipar a { font-style: normal; font-size: 13.5px; color: var(--muted); line-height: 1.4; text-decoration: none; }
.wfipar a:hover { color: var(--text); text-decoration: underline; }
.wfipar a b { color: var(--gold-hi); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.9px; margin-right: 4px; }
.wfipar a u { text-decoration: none; color: var(--gold-hi); }

/* the blueprint's CTA switch — it governs the picture below it, so the picture dims when it is off */
.ctatog { display: flex; align-items: center; gap: 8px; cursor: pointer; margin-top: 10px;
  padding: 8px 10px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line); }
.ctatog input { width: 15px; height: 15px; accent-color: var(--gold); cursor: pointer; margin: 0; flex: none; }
.ctatog span { font-size: 14.6px; color: var(--text); }
.ctatog.on { border-color: rgba(224, 170, 30, .4); background: rgba(224, 170, 30, .07); }
.ctaimglbl.off { opacity: .4; }
.ctaimglbl.off + .upfield { opacity: .4; }

/* the niche chip in the Studio: the chip itself reassigns, the arrow opens the board */
.plboard.plpick { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.plboard.plpick:hover { color: #fff; background: rgba(124,108,240,.3); border-color: var(--purple-hi); }
.plboard .plopen { font-style: normal; opacity: .55; padding: 0 1px; border-radius: 4px; }
.plboard .plopen:hover { opacity: 1; background: rgba(255,255,255,.18); }

/*
 * The cast switcher: the board pill, over the influencer dialog.
 *
 * Same pill, deliberately — the gesture is the same, so the feedback should look the same. Two
 * differences only. It sits near the BOTTOM rather than dead centre, because the middle of the
 * screen is where the dialog is and a pill over the face being chosen is a pill in the way. And it
 * outranks the overlay (z-index 100), since it has to be legible above it.
 */
.nswitch.cswitch { top: auto !important; bottom: 42px; transform: translateX(-50%) scale(1.12) !important; z-index: 960; }
.nswitch.cswitch .cur { display: flex; flex-direction: column; line-height: 1.25; }
.nswitch.cswitch .cur small { font-weight: 500; font-size: 10.5px; color: var(--muted); }

/* ---------- the cast: the "new" tile, and names set in the serif ---------- */
/*
 * NAMES ONLY. The serif is the accent the landing page already uses, and it earns its place on a
 * person's name — it reads as a credit, which is what a cast list is. Everywhere else keeps the
 * interface font: a face card where the nationality, the age and the niche chip were all set in
 * italic serif would be a poster, not a control.
 */
.stuname {
  font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400;
  font-size: 20.5px; letter-spacing: .01em; line-height: 1.15;
}

/*
 * The empty slot, where the next host goes. Dashed because it is a place rather than a thing, and
 * it answers on hover in OUR green — the gold is spoken for by the niche chips right beside it.
 */
.stucard.stunewcard {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  min-height: 230px; padding: 20px; text-align: center;
  background: rgba(74, 222, 128, .04);
  border: 1px dashed rgba(74, 222, 128, .34);
}
.stucard.stunewcard:hover {
  border-color: rgba(74, 222, 128, .85); border-style: solid;
  background: rgba(74, 222, 128, .10);
  box-shadow: 0 10px 34px rgba(74, 222, 128, .14);
}
.stunewcard .snplus {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-size: 23px; line-height: 1; color: #4ade80;
  border: 1px solid rgba(74, 222, 128, .4); background: rgba(74, 222, 128, .09);
  transition: background .14s ease, transform .14s cubic-bezier(.32,.72,0,1);
}
.stucard.stunewcard:hover .snplus { background: rgba(74, 222, 128, .2); transform: scale(1.06); }
.stunewcard .stuname { color: #4ade80; }
.stunewcard small {
  font-family: "Spline Sans Mono", ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .14em; color: var(--muted); text-transform: uppercase;
}
/* at the plan's allowance it is a sign, not a button — it says why rather than going dark */
.stucard.stunewcard.full { border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.02); cursor: not-allowed; }
.stucard.stunewcard.full:hover { transform: none; box-shadow: none; border-color: rgba(255, 255, 255, 0.21); background: rgba(255, 255, 255, 0.03); }
.stucard.stunewcard.full .snplus { color: var(--muted); border-color: rgba(255, 255, 255, 0.15); background: transparent; }
.stucard.stunewcard.full .stuname { color: var(--muted); }

/*
 * The name inside a niche line ("Budgie Expert | Rob Castillo") gets the serif, but not the size
 * or the colour of a heading — it is set INTO a line of 12.9px gold, so it takes both from its
 * parent and only the letterforms change. A touch larger because the serif runs small next to the
 * sans at the same nominal size.
 */
.stuniche .stuname, .wsub .stuname { font-size: 1.1em; color: inherit; }

/* ---------- "learn a script style": one question, room to breathe ---------- */
/*
 * The old version put a label and its input on the same line with nothing between the three
 * fields, so it read as a wall. Each field is a block with its own help text, and the rarely-used
 * paste box is folded away rather than sitting open and competing with the thing you came for.
 */
.modal.bsm h2 { margin: 0 0 6px; }
.bsm .bshint { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0 0 18px; }
.bsm .bsfield { margin-bottom: 16px; }
.bsm .bsfield label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; letter-spacing: .02em; }
.bsm .bsfield input, .bsm textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 13.5px; padding: 10px 12px;
  border-radius: 9px; background: var(--bg); border: 1px solid var(--line); color: var(--text);
}
.bsm .bsfield input:focus, .bsm textarea:focus { outline: none; border-color: rgba(74,222,128,.6); }
.bsm .bsfield small, .bsm .bsmore small { display: block; margin-top: 6px; font-size: 11.5px; color: var(--muted); line-height: 1.45; }

.bsm .bscomps { display: flex; flex-wrap: wrap; gap: 7px; }
.bsm .bscomp {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 5px 11px 5px 5px; border-radius: 999px; font: inherit; font-size: 12.5px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text); max-width: 100%;
}
.bsm .bscomp:hover { border-color: rgba(74,222,128,.6); background: rgba(74,222,128,.08); }
.bsm .bscomp.on { border-color: #4ade80; background: rgba(74,222,128,.14); }
.bsm .bscomp img, .bsm .bscomp .ph { width: 30px; height: 18px; border-radius: 4px; object-fit: cover; background: var(--line); flex: none; }
.bsm .bscomp span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bsm .bsmore { margin-bottom: 14px; }
.bsm .bsmore summary { cursor: pointer; font-size: 12.5px; color: var(--muted); padding: 4px 0; }
.bsm .bsmore summary:hover { color: var(--text); }
.bsm .bsmore textarea { margin-top: 8px; resize: vertical; }

.bsm .bsnote { font-size: 12.5px; color: var(--muted); min-height: 18px; line-height: 1.45; }
.bsm .bsnote .bad { color: var(--bad); }
.bsm .bsbar { display: flex; justify-content: flex-end; gap: 9px; margin-top: 12px; }

/* the "pacing only" switch sits between the sources and the rarely-used paste box */
.bsm .bstog { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; margin: 2px 0 16px;
  padding: 10px 12px; border-radius: 9px; background: var(--panel-2); border: 1px solid var(--line); }
.bsm .bstog:hover { border-color: rgba(74,222,128,.45); }
.bsm .bstog input { width: 15px; height: 15px; accent-color: #4ade80; margin: 1px 0 0; flex: none; cursor: pointer; }
.bsm .bstog span { font-size: 12.5px; color: var(--text); line-height: 1.45; }
.bsm .bstog small { color: var(--muted); font-size: 12px; }

/* ---------- Niche Sets: a readable sidebar, a titled set, bigger video titles ---------- */
/*
 * The sidebar was 220px with a count badge, a pencil and a bin in every row, so the one thing that
 * tells sets apart - the name - was the thing being cut to "Elias f…". Wider, the badge gone, the
 * two actions behind one ⋯, and the name may take two lines before it is cut at all.
 */
.nlibside { flex-basis: 250px; }
.nlf { align-items: flex-start; padding: 7px 8px 7px 10px; gap: 7px; }
.nlf i { line-height: 1.3; }
.nlf span { white-space: normal; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nlf em { display: none; }
.nlfm { font-weight: 700; font-size: .95rem; line-height: 1.1; letter-spacing: .05em; opacity: 0; padding: 0 5px; border-radius: 6px; cursor: pointer; transition: opacity .12s, background .12s; color: var(--muted); flex: none; }
.nlf:hover .nlfm, .nlf.on .nlfm { opacity: .7; }
.nlfm:hover { opacity: 1 !important; background: rgba(124,108,240,.3); color: var(--text); }
/* drag & drop: the row being carried fades, the row it will land on shows a line above it */
.nlf[draggable="true"] { cursor: grab; }
.nlf.dragging { opacity: .35; }
.nlf.over { box-shadow: inset 0 2px 0 #4ade80; background: rgba(74,222,128,.08); }
.nlmenu { position: absolute; z-index: 980; min-width: 150px; padding: 5px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(0,0,0,.5); animation: popIn .1s ease; }
.nlmenu button { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--text); font: inherit; font-size: 12.9px; padding: 8px 10px; border-radius: 7px; cursor: pointer; }
.nlmenu button:hover { background: rgba(255,255,255,.07); }
.nlmenu button.danger:hover { background: rgba(255,90,90,.18); color: #ff8a8a; }

/*
 * The open set's name is the page's title, so it gets the serif the cast is credited in and twice
 * the size it had. Only the set's name: the video titles below keep the interface font - they are
 * read in bulk, and a wall of italic serif is a poster, not a list.
 */
.nlhead h3.nlsetname { font-size: 2.3rem; line-height: 1.1; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.nlhead h3.nlsetname .stuname { font-size: 1em; }
.nlhead h3.nlsetname small { font-family: "Instrument Sans", "Segoe UI", system-ui, sans-serif; font-size: .85rem; color: var(--muted); font-weight: 400; letter-spacing: 0; }
/* the card text is YouTube's: 14px/20px title clamped to two lines, 12px meta - the 30px titles were the complaint */
.nfc b { font-size: 14px; line-height: 20px; -webkit-line-clamp: 2; margin-top: 8px; font-weight: 500; letter-spacing: 0; }
.nfc small { font-size: 12px; line-height: 18px; margin-top: 3px; }
.nlsortsel { font: inherit; font-size: 12.5px; padding: 6px 9px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); margin-right: 6px; }
.nlsortsel:focus { outline: none; border-color: rgba(74,222,128,.6); }
/* persona page cleanup: these stay in the page for their handlers, but are never shown */
#wpack[hidden], #wbrief[hidden], #wready[hidden], #wgenqr[hidden], .wassets .upfield[hidden] { display: none !important; }

/* ============ the Decisions panel ============ */
#decbtn { position: fixed; right: 0; top: 40%; z-index: 70; writing-mode: vertical-rl; padding: 14px 6px; background: #17161f; color: #ececf1; border: 1px solid #2e2d38; border-right: 0; border-radius: 9px 0 0 9px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
#decbtn:hover { background: #1e1d27; }
.decpanel { position: fixed; right: 0; top: 0; bottom: 0; z-index: 320;   /* the topbar sits at 300 */ background: #17161f; border-left: 1px solid #2e2d38; border-top: 5px solid #3ddc84; box-shadow: -18px 0 50px rgba(0,0,0,.45); display: flex; }
.decgrip { width: 9px; cursor: ew-resize; background: transparent; border-left: 1px solid #2e2d38; touch-action: none; }
.decgrip:hover { background: rgba(61,220,132,.18); }
.decbody { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; min-width: 0; }
.dechead { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #25242f; flex-wrap: wrap; }
.dectitle { font-family: 'Bricolage Grotesque', serif; font-size: 1.2rem; border: 1px solid rgba(61,220,132,.5); border-radius: 10px; padding: 3px 14px; }
.decchip { background: rgba(61,220,132,.14); color: #6ff0a6; border: 1px solid rgba(61,220,132,.4); border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.decthr { background: #1e1d27; color: #c9c7d6; border: 1px solid #2e2d38; border-radius: 9px; padding: 7px 12px; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; white-space: normal; text-align: left; min-width: 0; }
.decrf { width: 32px; height: 32px; border-radius: 8px; border: 1px solid #2e2d38; background: #1e1d27; color: #c9c7d6; font: inherit; font-size: 14px; cursor: pointer; }
.decxx { height: 32px; border-radius: 8px; border: 1px solid #2e2d38; background: #1e1d27; color: #ececf1; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; padding: 0 12px; white-space: nowrap; }
.decxx:hover { border-color: #ff7b72; color: #ff7b72; }
.decthred { padding: 12px 16px; border-bottom: 1px solid #25242f; background: #15141c; font-size: 13px; }
.decthred p { margin: 0 0 8px; color: #c9c7d6; }
.decthred .good { color: #6ff0a6; } .decthred .bad2 { color: #ff7b72; }
.decthred input { width: 58px; height: 28px; background: #1e1d27; color: #ececf1; border: 1px solid #2e2d38; border-radius: 7px; padding: 0 8px; font: inherit; text-align: center; margin: 0 2px; }
.dectabs { display: flex; gap: 6px; padding: 12px 16px 2px; flex-wrap: wrap; }
.dectab { border: 1px solid #2e2d38; background: transparent; color: #c9c7d6; border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.dectab.on { border-color: #6f9aff; color: #ececf1; box-shadow: 0 0 0 1px #6f9aff inset; }
.dechd, .decrow { display: grid; grid-template-columns: 34px minmax(104px, 1.4fr) 40px 76px minmax(78px, 1fr) 56px 66px; gap: 8px; align-items: center; padding: 10px 14px 10px 12px; overflow: hidden; }
.dechd { color: #8b8a99; font-size: 10px; font-weight: 800; letter-spacing: .08em; padding-top: 14px; }
.dechd span:first-child { grid-column: 1 / 3; }
.decrows { flex: 1; }
.decrow { border-top: 1px solid #1f1e28; cursor: pointer; }
.decrow:hover, .decrow.on { background: #1b1a24; }
.decav { width: 32px; height: 32px; border-radius: 50%; color: #1a1420; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; }
.decnm { min-width: 0; }
.decnm b { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.decnm small { color: #8b8a99; font-size: 12px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.decl, .decavg { color: #c9c7d6; font-size: 13.5px; }
.decup b { font-size: 13.5px; }
.decup s { display: block; height: 4px; border-radius: 3px; background: #25242f; margin-top: 4px; text-decoration: none; overflow: hidden; }
.decup s i { display: block; height: 100%; background: #8b6cf0; }
.decbv b { font-size: 14.5px; display: block; }
.decbv small { font-size: 12px; font-weight: 700; }
.decbv .good, .decqchip .good { color: #6ff0a6; }
.decbv .bad, .decqchip .bad { color: #ff7b72; }
.dim2 { color: #8b8a99; }
.decvd { border-radius: 999px; padding: 4px 0; text-align: center; font-size: 12px; font-weight: 800; }
.decvd.scale { background: rgba(61,220,132,.14); color: #6ff0a6; border: 1px solid rgba(61,220,132,.4); }
.decvd.kill { background: rgba(255,99,99,.12); color: #ff7b72; border: 1px solid rgba(255,99,99,.4); }
.decvd.collab { background: rgba(57,208,196,.12); color: #5fe6d8; border: 1px solid rgba(57,208,196,.4); }
.decvd.hold { background: #1e1d27; color: #8b8a99; border: 1px solid #2e2d38; }
.decact { display: flex; align-items: center; gap: 8px; padding: 8px 16px 12px 56px; border-top: 1px dashed #25242f; background: #15141c; flex-wrap: wrap; }
.decb { height: 32px; border-radius: 8px; background: transparent; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 0 12px; }
.decb.scale { border: 1px solid rgba(139,108,240,.6); color: #c4a8ff; }
.decb.scale:hover { background: rgba(139,108,240,.12); }
.decb.drop { border: 1px solid rgba(255,99,99,.55); color: #ff7b72; }
.decb.drop:hover { background: rgba(255,99,99,.1); }
.decb.sis { border: 1px solid rgba(61,220,132,.55); color: #6ff0a6; }
.decb.sis:hover { background: rgba(61,220,132,.1); }
.decb[disabled] { opacity: .45; cursor: default; }
.decglow { outline: 2px solid #3ddc84; outline-offset: 2px; border-radius: 12px; }
.declink { flex: 1; min-width: 180px; height: 32px; background: #1e1d27; color: #ececf1; border: 1px solid #2e2d38; border-radius: 8px; padding: 0 10px; font: inherit; font-size: 12.5px; }
.decfoot { color: #8b8a99; font-size: 11.5px; padding: 10px 16px 16px; margin: 0; }

/* ============ Launch sisters (Andy's mock, 1:1) ============ */
.siswrap { z-index: 340;   /* above the drawer it opens from */ background: rgba(12,11,17,.86); overflow: auto; padding: 32px 16px; display: flex; align-items: flex-start; justify-content: center; }
.sispanel { width: 100%; max-width: 1280px; background: #17161f; border: 1px solid #2e2d38; border-top: 2px solid #8b6cf0; border-radius: 14px; }
.sishead { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid #25242f; }
.siskick { font-size: 11px; letter-spacing: .1em; font-weight: 800; color: #c4a8ff; display: block; }
.sishead h1 { margin: 2px 0 0; font-size: 20px; font-weight: 800; }
.sisparent { display: flex; align-items: center; gap: 8px; background: #1e1d27; border: 1px solid #2e2d38; border-radius: 999px; padding: 4px 12px 4px 4px; font-size: 12px; font-weight: 700; }
.sisparent i { width: 24px; height: 24px; border-radius: 50%; color: #1a1420; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; font-style: normal; }
.sisparent small { color: #8b8a99; font-size: 11px; font-weight: 400; }
.sisx { width: 36px; height: 36px; border-radius: 8px; border: 1px solid #2e2d38; background: transparent; color: #c9c7d6; font: inherit; cursor: pointer; }
.sisctl { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px; padding: 16px 22px; border-bottom: 1px solid #25242f; background: #15141c; }
.sisf { display: flex; flex-direction: column; gap: 6px; }
.sisf > span { font-size: 11px; font-weight: 800; color: #8b8a99; letter-spacing: .06em; }
.sisstep { display: flex; align-items: center; border: 1px solid #2e2d38; border-radius: 8px; overflow: hidden; }
.sisstep button { width: 36px; height: 36px; background: #1e1d27; color: #ececf1; border: 0; font-size: 16px; font-weight: 800; cursor: pointer; }
.sisstep b { width: 40px; text-align: center; font-size: 15px; }
.siscnt { display: flex; gap: 4px; }
.siscnt button { width: 36px; height: 36px; border-radius: 8px; border: 1px solid #2e2d38; background: #1e1d27; color: #c9c7d6; font-size: 13px; font-weight: 800; cursor: pointer; }
.siscnt button.on { background: #ececf1; color: #121119; }
.sisf select, .sisf input { height: 36px; min-width: 200px; background: #1e1d27; color: #ececf1; border: 1px solid #2e2d38; border-radius: 8px; padding: 0 10px; font: inherit; font-size: 13px; }
.sisgen { height: 36px; background: #ececf1; color: #121119; border: 0; border-radius: 8px; padding: 0 16px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.sisgen[disabled] { opacity: .6; cursor: default; }
.sisgrid { padding: 18px 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.siscard { background: #1e1d27; border: 1px solid #2e2d38; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.siscard.on { border-color: #8b6cf0; }
.sisimg { position: relative; height: 200px; background: #121119; display: flex; align-items: center; justify-content: center; }
.sisimg img { width: 100%; height: 100%; object-fit: cover; }
.sisslot { position: absolute; top: 10px; left: 10px; background: #121119; color: #ececf1; border-radius: 6px; padding: 3px 8px; font-size: 11px; font-weight: 800; }
.sisregen { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 8px; background: #121119; color: #ececf1; border: 0; font-size: 15px; cursor: pointer; }
.sismeta { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.sisk { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: #8b8a99; }
.sisname { text-align: left; background: transparent; color: #c9c7d6; border: 1px solid #2e2d38; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.sisname.on { background: #313131; color: #ececf1; border-color: #8b6cf0; }
.sisvo { height: 34px; background: #17161f; color: #ececf1; border: 1px solid #2e2d38; border-radius: 8px; padding: 0 8px; font: inherit; font-size: 12px; }
.sispick { height: 38px; border-radius: 8px; border: 1px solid #2e2d38; background: transparent; color: #c9c7d6; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.sispick.on { background: #8b6cf0; color: #fff; border-color: #8b6cf0; }
.sisfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 16px 22px; border-top: 1px solid #25242f; background: #15141c; border-radius: 0 0 14px 14px; font-size: 13px; }
.sisfoot small { color: #8b8a99; font-size: 12px; }
.sislaunch { height: 40px; background: #3ddc84; color: #0d2a19; border: 0; border-radius: 8px; padding: 0 18px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.sislaunch[disabled] { background: #2e2d38; color: #8b8a99; cursor: default; }
.spin.big { width: 26px; height: 26px; }

/* compilations: the pick box and the combine bar */
.vlth { position: relative; }
.vlpick { position: absolute; top: 8px; left: 8px; width: 28px; height: 28px; border-radius: 8px; border: 2px solid rgba(255,255,255,.7); background: rgba(10,13,18,.55); color: #0d2a19; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; z-index: 2; }
.vlpick.on { background: #3ddc84; border-color: #3ddc84; }
.vlpick:hover { border-color: #3ddc84; }
/* the compile bar floats at the bottom centre, the same pill as the avatar strip - out of the way of the grid */
.vlcomb { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 620; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 10px 12px 10px 18px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(0,0,0,.6); white-space: nowrap; animation: pstripIn .16s ease; }
.vlcomb[hidden] { display: none; }   /* display:flex beats the hidden attribute, which left an empty bar on screen */
.vlcomb > b { font-size: 16px; }
.vlcomb input { width: 300px; min-width: 160px; height: 36px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 0 14px; color: var(--text); }
.vlcomb .vlclear { font-size: 14px; padding: 8px 14px; border-radius: 999px; border: 1px solid #3ddc84; background: transparent; color: var(--text); cursor: pointer; font-weight: 700; }
.vlcomb .vlclear:hover { background: rgba(61,220,132,.1); }
.vlcomb .btn { border-radius: 999px; }
.vlcmin { color: var(--muted); font-size: 13px; }

/* ---------- the sliding switch: Studio steps 4-5, System, and the blueprint's choices ---------- */
.segpill {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0;
  padding: 4px; border-radius: 12px; background: rgb(255 255 255 / 0.04); border: 1px solid var(--line);
  --i: 0; --n: 2;
}
.segpill .segknob {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n));
  border-radius: 9px; background: linear-gradient(180deg, #f2c94c, #e0aa1e);
  box-shadow: 0 4px 14px -6px rgba(224,170,30,.7);
  transform: translateX(calc(100% * var(--i))); transition: transform .28s cubic-bezier(.3,.7,.2,1);
}
.segpill button {
  position: relative; z-index: 1; background: none; border: 0; padding: 9px 8px; border-radius: 9px;
  color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; transition: color .2s ease;
}
.segpill button:hover { color: var(--text); }
.segpill button.on { color: #1a1300; }
.segpill.off { opacity: .6; }
.segpill.off button { cursor: default; }
.wscrbox { margin-top: 10px; }
.wscrprev { display: block; margin-top: 10px; color: var(--muted); font-size: 12px; }
.wlen {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 12px;
  background: rgb(255 255 255 / 0.04); border: 1px solid var(--line);
}
.wlen button {
  width: 36px; height: 34px; border-radius: 9px; border: 0; background: rgb(255 255 255 / 0.06);
  color: var(--text); font-size: 18px; cursor: pointer;
}
.wlen button:hover:not(:disabled) { background: rgb(255 255 255 / 0.12); }
.wlen button:disabled { opacity: .35; cursor: default; }
.wlen span { min-width: 74px; text-align: center; color: var(--muted); font-size: 13.5px; }
.wlen b { color: var(--text); font-size: 17px; }
.wsys { margin: 4px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.wsys .segpill { max-width: 460px; }
.wsysnote { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }

/* =====================================================================
   BLACK, LIKE THE OLD WIFI BOARDS. Two earlier :root blocks (the navy
   scheme and the indigo "old boards" palette) sat below the v1 black
   and silently won, so this is the last word on the surfaces.
   ===================================================================== */
:root {
  --bg: #050506;
  --panel: #0c0c0e;
  --panel-2: #111114;
  --card: #141417;
  --line: rgba(255, 255, 255, 0.09);
  --muted: #8a8a94;
}
body {
  background: #050506;
  background-image: linear-gradient(180deg, #060607 0%, #08080a 50%, #050506 100%);
  background-attachment: fixed;
}
.card { background: rgb(20 20 23 / 0.92); }
.card:hover { background: #1a1a1e; }
.modal { background: #0e0e11; border-color: #222226; }
@media (max-width: 820px) { .side { background: #0a0a0c !important; } }

/* ---------- the influencer page, one page: cards, no stepper, System beside Launch ---------- */
.wiz .wizsteps { display: none; }
.wiz .wtop { margin-bottom: 14px; }
.wiz .wnicheband { padding: 12px 14px 10px; margin-bottom: 16px; }
.wkindrow { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.wkindrow .segrow { margin: 0; flex: none; flex-wrap: nowrap; }
.wkindrow .seg { padding: 6px 14px; }
.wagelbl { flex: none; color: var(--muted); font-size: 13px; }
.wagelbl b { color: var(--text); }
.wkindrow .agerange { flex: 1; min-width: 80px; margin: 0; }
.wiz .wcols { gap: 18px; }
.wiz .wstage { margin-bottom: 12px; }
.wiz .wface { aspect-ratio: 16/10; }
.wiz .wvars { margin-top: 8px; }
.wiz .wvrow { gap: 6px; }
.wiz .wvar { flex: 1 1 0; width: auto; height: 40px; border-radius: 7px; }
.wfacebtns { display: flex; gap: 6px; margin-top: 8px; }
.wfacebtns .wchip { flex: 1; margin: 0; justify-content: center; text-align: center; }
.wcard { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.wcard > label:first-child { margin-top: 0; }
.wcardlbl { display: block; margin: 0 0 6px; }
.wcardlbl:not(:first-child) { margin-top: 4px; }
.wcard .wnamechips { display: flex; align-items: center; gap: 2px 8px; margin-top: 7px; }
.wtry { color: var(--muted); font-size: 12.5px; }
.wcard .wnc { background: none; border: 0; padding: 0; border-radius: 0; color: var(--text); font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.35); }
.wcard .wnc:hover { color: var(--gold-hi); text-decoration-color: var(--gold); border: 0; }
.wcard .wnc.ref { text-decoration: none; color: var(--muted); }
.wvoicestage .wvoicecard { padding: 10px 12px; border-radius: 12px; }
.wcard .wscrbox { margin-top: 10px; }
.wcomp {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--line); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: left;
}
.wcomp span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcomp i { font-style: normal; color: var(--muted); font-size: 12px; font-weight: 500; }
.wcomp:hover { border-color: rgba(255,255,255,.22); }
.wcompok { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: #3ddc84; font-size: 12.5px; }
.wcompok span { flex: 1; }
.wcompnone { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; }
.wlink { background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: 12.5px; text-decoration: underline; cursor: pointer; }
.wlink:hover { color: var(--text); }
.wlenrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; font-weight: 600; }
.wlenrow .wlen { padding: 3px; }
.wlenrow .wlen button { width: 30px; height: 28px; font-size: 15px; }
.wlenrow .wlen span { min-width: 60px; }
.wctanote { display: block; margin: 8px 0 10px; color: var(--muted); font-size: 12px; }
.wcard .wsysnote { margin-top: 8px; }
.wiz .wizbar { flex-wrap: wrap; }
.wiz .wizbar .wsys { display: flex; align-items: center; gap: 10px; margin: 0 auto 0 0; padding: 0; border: 0; }
.wiz .wizbar .wsys .segpill { width: 210px; }
.wsyslbl { color: var(--muted); font-size: 13px; }
.wstills { color: #f5c542; font-size: 12.5px; font-weight: 600; }
.wstills[hidden] { display: none; }
@media (max-width: 760px) {
  .wkindrow { flex-wrap: wrap; }
  .wiz .wizbar .wsys { width: 100%; margin-bottom: 8px; }
}
.wizbar [hidden] { display: none !important; }