/* Confidant Studio skin. Loaded after the app's inline styles, so equal-specificity rules here win.
   Decisions:
   - Accent is the cyan from Confidant's own icon (#22d3ee), used solid, never as a gradient.
   - Surfaces are a neutral graphite scale; one edge treatment per surface (hairline on cards, shadow only on modals).
   - Type: Avenir Next (ships with macOS) for headings, the system UI face for everything else. No webfont download.
   - Radius is graduated: 6 chips/small, 8 buttons+inputs, 10 cards, 14 columns, 18 modals. */

:root{
  --bg:#0b0c0e; --panel:#0f1013; --card:#15171a; --card2:#1b1e22; --field:#0d0e11;
  --line:#24272c; --line2:#33373e; --hair:rgba(255,255,255,.04);
  --fg:#ececee; --muted:#b3b7be; --dim:#868b94; --faint:#5c616a; --read:#3a3e45;
  --accent:#22d3ee; --accent-rgb:34,211,238; --on-accent:#03181c;
  --grad:var(--accent); --glow:rgba(34,211,238,.14);
  --green:#5fc98a; --amber:#d9a441; --red:#ef6461;
  --shadow:0 18px 50px rgba(0,0,0,.5);
  --font-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  --font-head:"Avenir Next",Avenir,Montserrat,Corbel,"URW Gothic",sans-serif;
  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:18px;
  --side:224px;
}
html.skin, html.skin body{background:var(--bg);font-family:var(--font-ui);font-size:14px;letter-spacing:0;}
html.skin body{background:var(--bg) !important;}
.skin ::selection{background:rgba(var(--accent-rgb),.3);}
.skin *::-webkit-scrollbar{width:10px;height:10px;}
.skin *::-webkit-scrollbar-thumb{background:#2a2d33;border-radius:10px;border:3px solid var(--bg);}
.skin *::-webkit-scrollbar-track{background:transparent;}

/* ---------- icons ---------- */
.skin .ph{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em;margin-right:.5em;}
.skin .icon-only .ph{margin-right:0;}
.skin .wiz-card .big .ph{width:56px;height:56px;margin:0;color:var(--accent);}
.skin .wiz-card .big{line-height:0;}

/* ---------- sidebar ---------- */
#sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--side);z-index:15;background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:22px 12px 14px;overflow-y:auto;-webkit-app-region:no-drag;}
body[data-view="editorWrap"] #sidebar, body[data-view="prompterView"] #sidebar{display:none;}
.skin #library, .skin #aiwriter{left:var(--side);}
.sb-brand{display:flex;align-items:center;gap:11px;padding:0 6px 20px;}
.sb-brand .logo{width:34px;height:34px;flex:none;border-radius:9px;box-shadow:0 0 0 1px var(--line);}
.sb-name{font-family:var(--font-head);font-size:17px;font-weight:600;letter-spacing:.1px;line-height:1.1;}
.sb-date .lib-date{margin:3px 0 0;font-size:11px;letter-spacing:.2px;text-transform:none;color:var(--dim);font-weight:500;}
.skin .sb-new{width:100%;justify-content:center;margin:0 0 22px;}
.sb-group{margin-bottom:20px;}
.sb-label{font-size:11px;font-weight:600;color:var(--faint);padding:0 10px 6px;letter-spacing:.3px;}
.skin .sb-nav{display:flex;flex-direction:column;gap:1px;margin:0;padding:0;border:0;}
.skin #sidebar .navb{display:flex;align-items:center;width:100%;text-align:left;padding:7px 10px;border-radius:var(--r-sm);border:0;background:transparent;
  color:var(--muted);font-size:13.5px;font-weight:500;box-shadow:none;}
.skin #sidebar .navb .ph{color:var(--dim);margin-right:10px;width:17px;height:17px;}
.skin #sidebar .navb:hover{background:rgba(255,255,255,.04);color:var(--fg);}
.skin #sidebar .navb.on{background:rgba(var(--accent-rgb),.1);color:var(--fg);box-shadow:none;}
.skin #sidebar .navb.on .ph{color:var(--accent);}
.skin #sidebar .navb.on.dim-on{background:transparent;color:var(--muted);}
.skin #sidebar .navb.on.dim-on .ph{color:var(--dim);}
.sb-foot{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding-top:14px;border-top:1px solid var(--line);}
.skin .sb-foot .folder-chip{width:100%;margin-bottom:8px;background:var(--card);border-radius:var(--r-sm);font-weight:500;font-size:12.5px;color:var(--muted);}
.skin .sb-foot .folder-chip .name{max-width:none;}
.skin .sb-foot #installBtn{margin-bottom:8px;}
.skin .folder-chip.on .dot, .skin .folder-chip.warn .dot{box-shadow:none;}

/* ---------- library shell ---------- */
.skin .lib-inner{max-width:1480px;padding:28px 26px 80px;}
.skin #library .lib-head{display:none;}
.skin .page-h{margin:0 0 22px;}
.skin .page-h h2, .skin .space-h, .skin #aiwriter .lib-head h1, .skin .sess-h{font-family:var(--font-head);font-size:24px;font-weight:600;letter-spacing:-.2px;margin:0 0 4px;}
.skin .page-sub, .skin .space-sub2{font-size:13px;color:var(--dim);font-weight:400;}
.skin .space-h{display:flex;align-items:baseline;gap:12px;}
.skin .space-h .ph{display:none;}
.skin .sess-sub{font-size:13.5px;color:var(--dim);line-height:1.6;}
.skin .drophint{display:none;}
.skin .lib-foot{border-top:0;margin-top:30px;padding-top:0;}
.skin .lib-foot .btn{color:var(--dim);}
.skin #aiwriter .lib-head{border-bottom:0;padding-bottom:0;margin-bottom:22px;}
.skin #aiwriter .lib-head .spark{display:none;}
.skin #aiwriter .lib-date{text-transform:none;letter-spacing:0;font-size:13px;font-weight:400;margin-top:4px;}
.skin #aiBack{display:none;}

/* ---------- buttons ---------- */
.skin .btn{background:var(--card2);border:1px solid var(--line2);border-radius:var(--r-sm);color:var(--fg);box-shadow:none;
  font-size:13.5px;font-weight:600;padding:8px 13px;display:inline-flex;align-items:center;transition:background .12s,border-color .12s,color .12s;}
.skin .btn:hover{background:#22252a;border-color:#3f444b;transform:none;}
.skin .btn.primary{background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);box-shadow:none;}
.skin .btn.primary:hover{filter:none;background:#4fdcf1;border-color:#4fdcf1;transform:none;box-shadow:none;}
.skin .btn.sm{padding:5px 10px;font-size:12.5px;border-radius:var(--r-xs);}
.skin .btn.ghost{background:transparent;border-color:transparent;}
.skin .btn.ghost:hover{background:rgba(255,255,255,.05);border-color:transparent;}
.skin .btn.danger:hover, .skin .btn.ghost.danger:hover{background:rgba(239,100,97,.12);border-color:transparent;color:#ff8f8c;}
.skin .btn.icon{padding:8px 10px;}
.skin .btn:focus-visible, .skin .navb:focus-visible, .skin button:focus-visible{outline:2px solid rgba(var(--accent-rgb),.7);outline-offset:2px;}

/* ---------- inputs ---------- */
.skin .ai-input, .skin .iv-answer, .skin .pg-in, .skin .hdk-in, .skin .lf-script, .skin .ml-del{background:var(--field);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--fg);}
.skin .ai-input:focus, .skin .iv-answer:focus, .skin .pg-in:focus{border-color:rgba(var(--accent-rgb),.7);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.14);}
.skin .ai-label{font-weight:600;color:var(--muted);font-size:12.5px;}
.skin .ai-hint{font-weight:400;color:var(--faint);}
.skin .ai-label .ph{color:var(--dim);}

/* ---------- board ---------- */
.skin .pipeboard{grid-template-columns:repeat(5,minmax(150px,1fr));gap:12px;}
.skin .pipecol{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 10px 12px;box-shadow:none;min-height:260px;}
.skin .pipecol::before{display:none;}
.skin .pipecol[data-stage="idea"]{--stage:#d9a441;} .skin .pipecol[data-stage="script"]{--stage:#22d3ee;}
.skin .pipecol[data-stage="recorded"]{--stage:#ef8a6a;} .skin .pipecol[data-stage="edited"]{--stage:#5fc98a;} .skin .pipecol[data-stage="ready"]{--stage:#868b94;}
.skin .pipe-h{font-size:12.5px;font-weight:600;color:var(--muted);margin:2px 4px 12px;letter-spacing:0;}
.skin .pipe-h span:first-child{display:flex;align-items:center;}
.skin .pipe-h .ph{color:var(--stage);width:15px;height:15px;margin-right:8px;}
.skin .pipe-h .count{background:transparent;border:0;color:var(--dim);font-weight:600;font-size:12px;padding:0;min-width:0;font-variant-numeric:tabular-nums;}
.skin .pipe-list{gap:8px;}
.skin .pipe-empty{color:var(--faint);font-size:12px;padding:30px 8px;border:1px dashed var(--line);border-radius:var(--r-md);}

.skin .pcard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:11px 11px 10px;transition:border-color .15s;}
.skin .pcard:hover{border-color:var(--line2);}
.skin .pcard .pt{font-size:13.5px;font-weight:600;line-height:1.35;white-space:normal;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.skin .pcard .pm{font-size:12px;color:var(--dim);margin-top:5px;line-height:1.45;}
.skin .pcard .ptag{font-size:10.5px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--muted);border:0;background:rgba(255,255,255,.06);border-radius:var(--r-xs);padding:2px 7px;display:inline-flex;align-items:center;}
.skin .pcard .ptag .ph{margin-right:4px;}
.skin .pcard .ptag.qa{color:var(--green);background:rgba(95,201,138,.1);}
.skin .pcard-acts{margin-top:10px;gap:4px;flex-wrap:nowrap;}
.skin .pcard-acts .btn.sm.primary{background:rgba(var(--accent-rgb),.12);color:var(--accent);border-color:transparent;font-weight:600;}
.skin .pcard-acts .btn.sm.primary:hover{background:rgba(var(--accent-rgb),.2);}
.skin .pipecol[data-stage="idea"] .pcard-acts .btn.sm.primary{background:rgba(217,164,65,.12);color:#e8b860;}
.skin .pipecol[data-stage="recorded"] .pcard-acts .btn.sm.primary{background:rgba(239,138,106,.12);color:#f29c7f;}
.skin .pipecol[data-stage="edited"] .pcard-acts .btn.sm.primary{background:rgba(95,201,138,.12);color:#7ad6a0;}
.skin .pipecol[data-stage="ready"] .pcard-acts .btn.sm.primary{background:rgba(255,255,255,.06);color:var(--muted);}
.skin .pcard-acts .btn.sm.ghost{font-size:0;padding:5px;color:var(--dim);}
.skin .pcard-acts .btn.sm.ghost .ph{font-size:14px;margin:0;}
/* move / edit / delete live in a hover toolbar, top right */
.skin .pcard-acts .pmove, .skin .pcard-acts [data-act="edit"], .skin .pcard-acts [data-act="del"]{
  position:absolute;top:7px;width:24px;height:24px;padding:0;display:grid;place-items:center;font-size:10px;
  background:var(--card2);border:1px solid var(--line2);border-radius:var(--r-xs);color:var(--muted);opacity:0;pointer-events:none;transition:opacity .12s;}
.skin .pcard-acts [data-act="del"]{right:7px;} .skin .pcard-acts [data-act="edit"]{right:34px;}
.skin .pcard-acts .pmove[data-act="fwd"]{right:61px;} .skin .pcard-acts .pmove[data-act="back"]{right:88px;}
.skin .pcard:hover .pcard-acts :is(.pmove,[data-act="edit"],[data-act="del"]), .skin .pcard:focus-within .pcard-acts :is(.pmove,[data-act="edit"],[data-act="del"]){opacity:1;pointer-events:auto;}
.skin .pcard-acts .pmove:disabled{opacity:0 !important;pointer-events:none !important;}
.skin .pcard-acts [data-act="del"]:hover{color:#ff8f8c;background:#2a1a1b;}
.skin .pcard-acts :is(.pmove,[data-act="edit"],[data-act="del"]) .ph{width:13px;height:13px;}
.skin .pmeta{font-size:11.5px;color:var(--dim);}
.skin .pipe-archive{background:transparent;border:1px solid var(--line);border-radius:var(--r-md);}
.skin .pipe-archive>summary{font-weight:600;color:var(--dim);display:flex;align-items:center;}

/* Border Beam (ported from 21st.dev/gooseui/border-beam): the next script to record */
@property --beam{syntax:"<angle>";initial-value:0deg;inherits:false;}
@keyframes beam-spin{to{--beam:360deg;}}
.skin .pipecol[data-stage="script"] .pipe-list > .pcard:first-child::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--beam),transparent 0 70%,rgba(var(--accent-rgb),.25) 80%,var(--accent) 88%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:beam-spin 6s linear infinite;}
.skin .pipecol[data-stage="script"] .pipe-list > .pcard:first-child .pt::before{content:"Up next";display:block;font-size:10.5px;font-weight:600;color:var(--accent);margin-bottom:3px;letter-spacing:.2px;}
@media (prefers-reduced-motion:reduce){.skin .pipecol[data-stage="script"] .pipe-list > .pcard:first-child::after{animation:none;background:rgba(var(--accent-rgb),.5);}}

/* Spotlight Card (ported from 21st.dev/preetsuthar17/spotlight-card) */
.skin :is(.pcard,.kcard,.hl-item,.hl-tpl,.hl-sp,.hl-cr,.ml-card,.idea,.card,.mb-hook,.lf-ch){position:relative;isolation:isolate;}
.skin :is(.pcard,.kcard,.hl-item,.hl-tpl,.hl-sp,.hl-cr,.ml-card,.idea,.card,.mb-hook,.lf-ch)::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(var(--accent-rgb),.075),transparent 70%);}
.skin .spot::before{opacity:1;}

/* ---------- kanban spaces (hitlist, splinters, magnets, templates) ---------- */
.skin .kcol{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:none;}
.skin .kcol::before{display:none;}
.skin .kcol-h{font-weight:600;color:var(--muted);}
.skin .kcol-h .count{background:transparent;border:0;color:var(--dim);}
.skin .kcard, .skin .hl-item, .skin .hl-tpl, .skin .hl-sp, .skin .hl-cr, .skin .ml-card, .skin .idea, .skin .rl-sec, .skin .hl-add, .skin .lf-ch, .skin .mb-ctx, .skin .lf-outro, .skin .preview-wrap{
  background:var(--card);border:1px solid var(--line);box-shadow:none;}
.skin .kcard, .skin .hl-sp, .skin .hl-cr{border-radius:var(--r-md);}
.skin .hl-item, .skin .hl-tpl, .skin .ml-card, .skin .idea, .skin .lf-ch{border-radius:var(--r-lg);}
.skin .hl-tpl, .skin .hl-sug, .skin .hl-var{border-left-width:1px;border-left-color:var(--line);}
.skin .lf-ch::before{display:none;}
.skin .kmove{background:var(--card2);border-color:var(--line2);}
.skin .rl-sec summary{font-weight:600;}

/* ---------- modals ---------- */
.skin #session, .skin #capture, .skin #research, .skin #brainchat, .skin #magbuild, .skin #pagebuild, .skin #longform, .skin #editkit, .skin #comp, .skin #interview, .skin .setmodal{
  background:rgba(5,6,8,.72);backdrop-filter:blur(3px);}
.skin .iv-card, .skin .setwrap{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow);}
.skin .iv-q{font-family:var(--font-head);font-weight:600;letter-spacing:-.1px;}
.skin .ivdot.on, .skin .wiz-steps span.on{background:var(--accent);}
.skin .settabs, .skin .seg{background:var(--field);border-color:var(--line);border-radius:var(--r-md);}
.skin .settab, .skin .seg-btn{font-weight:600;color:var(--dim);display:inline-flex;align-items:center;justify-content:center;}
.skin .settab.on, .skin .seg-btn.on, .skin .bc-tab.on, .skin .hdk-tab.on{background:var(--card2);color:var(--fg);box-shadow:0 0 0 1px var(--line2);border-color:transparent;}
.skin .settab.on .ph, .skin .bc-tab.on .ph, .skin .hdk-tab.on .ph{color:var(--accent);}
.skin .bc-user, .skin .hdk-u{background:rgba(var(--accent-rgb),.16);color:var(--fg);box-shadow:none;}
.skin .bc-brain, .skin .hdk-a{background:var(--card2);}
.skin .bc-stat{background:var(--field);box-shadow:none;}
.skin .bc-statn{font-family:var(--font-head);font-weight:600;font-variant-numeric:tabular-nums;}
.skin .bc-sech, .skin .pg-h, .skin .mb-step-h, .skin .ek-label, .skin .lf-tt-h, .skin .hl-suggest-h{color:var(--muted);letter-spacing:.3px;font-weight:600;}
.skin .iv-launch{background:rgba(var(--accent-rgb),.06);border-color:rgba(var(--accent-rgb),.25);}

/* ---------- wizard ---------- */
.skin #wizard{background:var(--bg);}
.skin .wiz-card h2{font-family:var(--font-head);font-weight:600;letter-spacing:-.3px;}
.skin #wizNext{background:var(--accent);border-color:var(--accent);color:var(--on-accent);border-radius:12px;}

/* ---------- editor + prompter chrome ---------- */
.skin #editorWrap{background:var(--bg);}
.skin #editorWrap h1{font-family:var(--font-head);font-weight:600;color:var(--muted);}
.skin #doneBtn{background:var(--accent) !important;color:var(--on-accent) !important;border-color:var(--accent) !important;box-shadow:none !important;}
.skin #bar{background:rgba(11,12,14,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.skin #bar button{background:var(--card2);border-color:var(--line2);border-radius:var(--r-sm);font-weight:600;display:inline-flex;align-items:center;}
.skin #bar button.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}
.skin #bar button.rec{background:var(--red);border-color:var(--red);}

/* ---------- help + misc ---------- */
.skin #helpFab{width:44px;height:44px;background:var(--card2);border:1px solid var(--line2);color:var(--muted);box-shadow:0 8px 24px rgba(0,0,0,.4);}
.skin #helpFab .ph{margin:0;width:20px;height:20px;}
.skin #helpFab:hover{color:var(--fg);transform:none;}
.skin #helpDock{background:var(--card);border-radius:var(--r-xl);}
.skin .hdk-head{background:var(--panel);}
.skin #updateBanner{background:var(--panel);border-top:1px solid var(--line);}
.skin #updateBanner .ub-dl{background:var(--accent);color:var(--on-accent);}
.skin .silo-tag{color:var(--accent);border-color:rgba(var(--accent-rgb),.5);}
.skin .ai-spin{border-color:#2c3036;border-top-color:var(--accent);}
.skin .banner.warn{border-radius:var(--r-md);}
body[data-view="library"] #helpFab:not(.has-alert), body[data-view="aiwriter"] #helpFab:not(.has-alert){display:none;}  /* sidebar has Help & bugs; keep the fab only when it carries an alert */

/* ---------- mic level meter (prompter bar), OBS-style: green to -20, yellow to -9, red to 0 ---------- */
.micmeter{display:flex;flex-direction:column;gap:4px;width:220px;flex:none;}
.mm-top{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;font-weight:600;color:var(--muted);gap:8px;}
.mm-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mm-db{color:var(--dim);font-variant-numeric:tabular-nums;flex:none;}
.mm-track{position:relative;height:8px;border-radius:3px;overflow:hidden;
  background:linear-gradient(90deg,#3fbf6a 0 66.6%,#e3b341 66.6% 85%,#e5534b 85% 100%);}
.mm-off{position:absolute;top:0;bottom:0;right:0;left:0;background:#24272c;transition:left 60ms linear;}
.mm-peak{position:absolute;top:0;bottom:0;width:2px;left:0;background:#fff;opacity:.85;}
.micmeter.silent .mm-name::after{content:" · not hearing you";color:#e3b341;}
.mm-warn{font-size:11px;line-height:1.35;color:#ffb4ab;background:rgba(229,83,75,.12);border-radius:var(--r-xs);padding:4px 7px;max-width:260px;}
.mm-warn[hidden]{display:none;}
.micmeter{width:250px;}
.mic-select{appearance:none;-webkit-appearance:none;background:var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23868b94'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") no-repeat right 7px center/11px;
  color:var(--fg);border:1px solid var(--line2);border-radius:var(--r-xs);font:600 12px var(--font-ui);padding:4px 24px 4px 8px;min-width:0;max-width:100%;cursor:pointer;}
.mic-select:focus{outline:2px solid rgba(var(--accent-rgb),.6);outline-offset:1px;}
.mm-top .mic-select{flex:1;}
.micmeter.silent .mm-db::after{content:" · can't hear you";color:#e3b341;}
.micmeter.silent .mm-name::after{content:none;}
.sb-mic{margin-bottom:10px;}
.sb-mic .sb-label{display:flex;align-items:center;padding:0 2px 6px;}
.sb-mic .sb-label .ph{width:13px;height:13px;margin-right:6px;}
.sb-mic .mic-select{width:100%;padding:7px 26px 7px 10px;font-size:12.5px;border-radius:var(--r-sm);background-color:var(--card);}
.skin #bar .cam-select{width:150px;padding:8px 24px 8px 9px;border-radius:var(--r-sm);background-color:var(--card2);}

/* ---------- plans: sidebar card, plans sheet, toast ---------- */
.sb-plan{display:flex;align-items:center;gap:10px;justify-content:space-between;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 10px 10px 12px;margin-bottom:12px;}
.sb-plan b{display:block;font-size:13px;font-weight:600;}
.sb-plan span{display:block;font-size:11.5px;color:var(--dim);margin-top:1px;}
.sb-plan.is-pro b{color:var(--accent);}
.sb-plan .btn{flex:none;}
.plan-sheet{position:fixed;inset:0;z-index:9500;background:rgba(5,6,8,.72);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px;}
.plan-sheet.hidden{display:none;}
.ps-card{position:relative;width:min(480px,100%);background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow);padding:30px 30px 20px;animation:psIn .22s cubic-bezier(.2,.7,.2,1);}
@keyframes psIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ps-x{position:absolute;top:14px;right:14px;background:none;border:0;color:var(--dim);padding:6px;border-radius:var(--r-xs);}
.ps-x:hover{color:var(--fg);background:rgba(255,255,255,.05);}
.ps-x .ph{margin:0;}
.ps-logo .logo{width:40px;height:40px;border-radius:10px;box-shadow:0 0 0 1px var(--line);}
.ps-card h2{font-family:var(--font-head);font-size:22px;font-weight:600;letter-spacing:-.2px;margin:16px 0 6px;}
.ps-sub{color:var(--muted);font-size:13.5px;line-height:1.55;margin:0 0 16px;}
.ps-list{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:9px;}
.ps-list li{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--muted);line-height:1.45;}
.ps-list li b{color:var(--fg);font-weight:600;}
.ps-list .ph{color:var(--accent);margin:1px 0 0;width:16px;height:16px;}
.ps-trial{display:flex;gap:8px;}
.ps-trial .ai-input{flex:1;font-size:14px;padding:10px 12px;}
.ps-trial .btn{padding:10px 14px;}
.ps-plans{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.ps-plan{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:var(--field);border:1px solid var(--line2);border-radius:var(--r-md);padding:13px 14px;color:var(--fg);}
.ps-plan:hover{border-color:rgba(var(--accent-rgb),.6);}
.ps-plan span{font-size:12px;color:var(--dim);font-weight:600;}
.ps-plan b{font-family:var(--font-head);font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;}
.ps-plan small{font-size:11.5px;color:var(--dim);}
.ps-plan.best{border-color:rgba(var(--accent-rgb),.55);background:rgba(var(--accent-rgb),.06);}
.ps-plan.best small{color:var(--accent);}
.ps-fine{font-size:11.5px;color:var(--faint);margin-top:10px;}
.ps-err{margin-top:12px;font-size:12.5px;color:#ffb4ab;background:rgba(229,83,75,.12);border-radius:var(--r-xs);padding:8px 10px;}
.ps-err[hidden]{display:none;}
.ps-foot{display:flex;justify-content:space-between;margin-top:16px;padding-top:12px;border-top:1px solid var(--line);}
.ps-link{background:none;border:0;color:var(--dim);font-size:12.5px;padding:2px 0;}
.ps-link:hover{color:var(--fg);}
.busy{opacity:.6;pointer-events:none;}
.plan-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:9600;background:var(--card2);border:1px solid var(--line2);color:var(--fg);font-size:13px;font-weight:600;padding:10px 16px;border-radius:var(--r-md);box-shadow:var(--shadow);}

/* ---------- board header + paste scripts ---------- */
.page-h-row{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.page-h-row h2{margin:0;}
.bulk-card{width:min(640px,100%);}
.bulk-in{width:100%;min-height:300px;font-size:13.5px;line-height:1.55;resize:vertical;}
.bulk-list{max-height:46vh;overflow:auto;display:flex;flex-direction:column;gap:6px;padding-right:4px;}
.bulk-row{display:flex;gap:12px;align-items:flex-start;background:var(--field);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;}
.bulk-row .n{flex:none;width:22px;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums;padding-top:1px;}
.bulk-row b{display:block;font-size:13px;font-weight:600;}
.bulk-row span:not(.n){display:block;font-size:12px;color:var(--dim);margin-top:2px;}
.bulk-acts{display:flex;align-items:center;gap:8px;margin-top:14px;}
.bulk-note{flex:1;font-size:12.5px;color:var(--muted);}
/* narrow columns: let a card's extra icon buttons wrap instead of spilling out of the card */
.skin .pcard-acts{flex-wrap:wrap;}
.skin .pcard-acts .btn.sm.primary{min-width:0;}
.sb-plan[hidden],.sb-mic[hidden]{display:none;}
.skin #installBtn{display:none !important;}  /* browser-PWA only; the desktop app never needs it */

/* ---------- Brain: Add knowledge tab ---------- */
.bs-panel{text-align:left;max-height:58vh;overflow:auto;padding-right:4px;}
.bs-panel.hidden{display:none;}
.bs-intro{color:var(--muted);font-size:13.5px;margin:0 0 14px;}
.bs-block{background:var(--field);border:1px solid var(--line);border-radius:var(--r-md);padding:14px;margin-bottom:12px;}
.bs-h{display:flex;align-items:center;font-weight:600;font-size:13.5px;margin-bottom:10px;}
.bs-h .ph{color:var(--accent);}
.bs-h.small{font-size:12px;color:var(--dim);margin:16px 0 8px;}
.bs-row{display:flex;gap:8px;align-items:center;}
.bs-row.end{justify-content:flex-end;margin-top:8px;}
.bs-row .ai-input{flex:1;}
.bs-hint{font-size:12px;color:var(--faint);margin-top:8px;}
.bs-text{width:100%;min-height:110px;resize:vertical;font-size:13.5px;}
.bs-file{cursor:pointer;}
.bs-status{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin:4px 0 10px;}
.bs-status.err{color:#ffb4ab;background:rgba(229,83,75,.12);border-radius:var(--r-xs);padding:8px 10px;}
.bs-status[hidden]{display:none;}
.bs-log{display:flex;flex-direction:column;gap:4px;}
.bs-item{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);padding:6px 2px;border-bottom:1px solid var(--line);}
.bs-item .ph{color:var(--dim);margin:0;width:14px;height:14px;}
.bs-item span{flex:1;}
.bs-item small{color:var(--faint);}
.bs-empty{font-size:12.5px;color:var(--faint);}

/* ---------- Settings → Brand: extract from website ---------- */
.bx{background:rgba(var(--accent-rgb),.05);border:1px solid rgba(var(--accent-rgb),.22);border-radius:var(--r-md);padding:14px;margin-bottom:18px;}
.bx-h{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;}
.bx-h .ph{color:var(--accent);width:18px;height:18px;margin:2px 0 0;}
.bx-h b{display:block;font-size:14px;}
.bx-h span{display:block;font-size:12.5px;color:var(--dim);}
.bx-out{margin-top:14px;border-top:1px solid var(--line);padding-top:14px;}
.bx-out[hidden]{display:none;}
.bx-top{display:flex;gap:12px;align-items:center;margin-bottom:12px;}
.bx-top img{width:44px;height:44px;object-fit:contain;background:#fff;border-radius:var(--r-sm);padding:4px;}
.bx-top b{display:block;font-size:15px;}
.bx-top span{display:block;font-size:12.5px;color:var(--dim);}
.bx-sw{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap;}
.bx-sw button{width:28px;height:28px;border-radius:var(--r-xs);border:1px solid rgba(255,255,255,.15);cursor:pointer;padding:0;}
.bx-sw button.on{outline:2px solid var(--fg);outline-offset:2px;}
.bx-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:13px;color:var(--muted);}
.bx-grid small{display:block;font-size:11px;color:var(--faint);margin-bottom:2px;}
.bx-sum{font-size:13px;color:var(--muted);line-height:1.55;margin:12px 0 4px;}
.bx-note{flex:1;font-size:12px;color:var(--dim);}
.ps-google{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:#1f1f1f;border:1px solid #dadce0;border-radius:var(--r-sm);padding:11px 14px;font:600 14.5px var(--ui);cursor:pointer;}
.ps-google:hover{background:#f2f2f2;}
.ps-google .g{width:18px;height:18px;}
.ps-or{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--faint);font-size:12px;}
.ps-or::before,.ps-or::after{content:"";flex:1;height:1px;background:var(--line);}

/* ---------- phone layout (iPhone browser version; also narrow desktop windows) ---------- */
.mbar,.mb-scrim{display:none;}
@media (max-width:760px){
  .mbar{display:flex;align-items:center;gap:10px;position:fixed;top:0;left:0;right:0;z-index:16;height:calc(54px + env(safe-area-inset-top));
    padding:env(safe-area-inset-top) 12px 0;background:rgba(11,12,14,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
  .mbar .logo{width:26px;height:26px;border-radius:7px;}
  .mb-title{flex:1;font-family:var(--font-head);font-weight:600;font-size:17px;}
  .mbar button{background:none;border:0;color:var(--fg);width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-sm);}
  .mbar button .ph{margin:0;width:22px;height:22px;}
  .mbar .mb-new{background:var(--accent);color:var(--on-accent);width:36px;height:36px;}
  body[data-view="editorWrap"] .mbar, body[data-view="prompterView"] .mbar{display:none;}
  #sidebar{transform:translateX(-102%);transition:transform .25s ease;z-index:30;width:min(300px,84vw);padding-top:calc(22px + env(safe-area-inset-top));box-shadow:var(--shadow);}
  body.drawer-open #sidebar{transform:none;}
  body.drawer-open .mb-scrim{display:block;position:fixed;inset:0;z-index:29;background:rgba(0,0,0,.5);}
  body[data-view="editorWrap"] #sidebar, body[data-view="prompterView"] #sidebar{display:none;}
  .skin #library,.skin #aiwriter{left:0;top:calc(54px + env(safe-area-inset-top));}
  .skin .lib-inner{padding:18px 14px 90px;}
  .skin .page-h h2,.skin .space-h,.skin #aiwriter .lib-head h1{font-size:21px;}
  .skin .page-sub{font-size:12.5px;}
  .skin #bulkBtn{padding:7px 11px;font-size:13px;}
  /* board: swipe between columns */
  .skin .pipeboard{grid-template-columns:repeat(5,84vw);overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -14px;padding:0 14px 8px;}
  .skin .pipecol{scroll-snap-align:center;min-height:0;}
  .skin .pcard-acts .pmove,.skin .pcard-acts [data-act="edit"],.skin .pcard-acts [data-act="del"]{opacity:1;pointer-events:auto;}  /* no hover on touch */
  .skin .pcard .pt{padding-right:110px;}
  /* editor */
  .skin #editorWrap{padding:calc(12px + env(safe-area-inset-top)) 12px 12px;}
  .skin #editorHead{flex-wrap:wrap;gap:8px;}
  .skin #editorHead .btn,.skin #doneBtn{padding:7px 10px;font-size:13px;}
  .skin .kbdInline,.skin #editorWrap .hint{display:none;}
  /* teleprompter: one scrollable row of controls, smaller text */
  .skin #bar{flex-wrap:nowrap;overflow-x:auto;gap:6px;padding:calc(8px + env(safe-area-inset-top)) 10px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .skin #bar::-webkit-scrollbar{display:none;}
  .skin #bar .group{flex-wrap:nowrap;flex:none;}
  .skin #bar .sep{display:none;}
  .skin #bar button{padding:7px 10px;font-size:13px;white-space:nowrap;flex:none;}
  .skin #bar input[type=range]{width:80px;}
  .skin .micmeter{width:170px;flex:none;}
  .skin #bar .cam-select{width:120px;flex:none;}
  .skin #script{font-size:calc(var(--fontsize) * .58) !important;padding:0 5vw;}
  .skin #helpFab{display:none;}
  /* sheets */
  .ps-card{padding:24px 18px 16px;max-height:92vh;overflow:auto;}
  .ps-trial{flex-direction:column;}
  .ps-plans{grid-template-columns:1fr;}
  .skin .iv-card,.skin .setwrap{border-radius:16px;}
  .skin .settabs{flex-wrap:nowrap;overflow-x:auto;}
}
.skin .pcard .rt{display:flex;align-items:center;font-size:11px;color:var(--faint);margin-top:4px;font-variant-numeric:tabular-nums;}
.skin .pcard .rt .ph{width:12px;height:12px;margin-right:4px;}