/* ===================================================================
   Forge design-system overlay (loaded last to win the cascade).
   Reskins existing components to the new system. Behaviour untouched.
   =================================================================== */
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-sm);}
::selection{background:rgba(43,208,197,.3);}
*::-webkit-scrollbar{width:10px;height:10px;}
*::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:var(--r-pill);border:2px solid var(--canvas);}
*::-webkit-scrollbar-track{background:transparent;}

/* Headings -> Montserrat */
h1,h2,h3,h4,h5,.page-title,.section-title,.login-title,.sidebar-logo,.fs-title,
.analytics-value,.stat-value,.an-kpi .k-val,.metric .mnum{font-family:var(--font-head);letter-spacing:-.3px;}

/* Primary actions -> brand gradient + glow (one per screen + Agent) */
.btn-primary,.btn-billing.primary,.fs-btn.primary,.btn.primary,button.primary{
  background:var(--gradient-action)!important;color:#06111c!important;border:none!important;
  box-shadow:var(--glow-brand);transition:filter var(--dur-fast),transform var(--dur-fast);}
.btn-primary:hover,.btn-billing.primary:hover,.fs-btn.primary:hover,.btn.primary:hover{filter:brightness(1.08);}
.btn-primary:active,.btn-billing.primary:active,.fs-btn.primary:active{transform:translateY(1px);}
.btn-primary:disabled,.btn-secondary:disabled,.btn-billing:disabled{opacity:.45;cursor:not-allowed;}

/* Secondary / ghost */
.btn-secondary{background:var(--surface-2);color:var(--text);border:1px solid var(--border-strong);transition:background var(--dur-fast),border-color var(--dur-fast);}
.btn-secondary:hover{background:var(--surface-3);border-color:var(--border-strong);}

/* Inputs -> 44px, rounded, cyan focus ring */
.form-input,.login-input,input[type=text],input[type=email],input[type=tel],input[type=number],input[type=url],input[type=password],input[type=search],select,textarea{
  border-radius:var(--r-md);transition:border-color var(--dur-fast),box-shadow var(--dur-fast);}
.form-input:not(textarea),.login-input,input[type=text],input[type=email],input[type=tel],input[type=number],input[type=url],input[type=password],input[type=search],select{min-height:44px;}
.form-input:focus,.login-input:focus,input:focus,select:focus,textarea:focus{
  border-color:var(--brand-cyan)!important;outline:none;box-shadow:0 0 0 3px rgba(43,208,197,.15)!important;}

/* Sidebar active nav -> gradient-soft with cyan accent */
.nav-item.active{background:var(--gradient-brand-soft)!important;color:var(--text)!important;box-shadow:inset 2px 0 0 var(--brand-cyan);}
.nav-item.active svg{color:var(--brand-cyan)!important;}
.nav-badge{background:var(--gradient-brand);color:#fff;}
.nav-badge.amber{background:var(--warning);color:#1a1304;}

/* Logo mark -> gradient tile */
.sidebar-logo img{filter:none;}

/* Status chips coherence */
.chip,.status-chip{border-radius:var(--r-pill);}

/* Toggle -> brand-blue when on */
.toggle input:checked + .toggle-slider{background:var(--brand-blue)!important;}

/* Cards lift on hover where the class allows */
.analytics-card,.an-kpi,.stat-card{transition:border-color var(--dur-fast),transform var(--dur-fast);}

/* ===== Global button hover affordance (every button feels alive) =====
   Give every button class a clear hover: gradient/primary lift+brighten,
   secondary/ghost/neutral a border+bg lighten, and cursor:pointer everywhere.
   Colour changes are on-brand (blue -> cyan). Transforms are stripped under
   prefers-reduced-motion below, but the colour feedback always stays. */
button,[role=button],.btn,.btn-primary,.btn-secondary,.btn-ghost,.btn-sm,.fs-btn,
.type-toggle-btn,.social-btn,.music-cat-btn,.cal-view-btn,.tour-skip-btn,.account-btn{cursor:pointer;}
button:not(:disabled),.btn:not(:disabled),.fs-btn:not(:disabled),.btn-sm:not(:disabled){transition:filter var(--dur-fast,.14s),background var(--dur-fast,.14s),border-color var(--dur-fast,.14s),color var(--dur-fast,.14s),box-shadow var(--dur-fast,.14s),transform var(--dur-fast,.14s);}
/* Gradient / primary buttons -> brighten + subtle lift */
.btn-primary:hover:not(:disabled),.btn-billing.primary:hover:not(:disabled),.fs-btn.primary:hover:not(:disabled),.btn.primary:hover:not(:disabled),.btn-sm.primary:hover:not(:disabled),button.primary:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px);}
/* Neutral / secondary / ghost buttons -> border + bg lighten toward cyan */
.fs-btn:hover:not(:disabled):not(.primary),.btn-sm:hover:not(:disabled):not(.primary):not(.danger),.type-toggle-btn:hover,.social-btn:hover,.music-cat-btn:hover,.cal-view-btn:hover{border-color:var(--brand-cyan,#2BD0C5)!important;background:rgba(43,208,197,.08)!important;color:var(--text,#e9e9f2)!important;}
/* Small icon / plain buttons that have no border -> gentle brighten */
.tile-menu-btn:hover:not(:disabled),.img-options-btn:hover:not(:disabled){filter:brightness(1.12);}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}

.sc-head{display:flex;align-items:center;justify-content:space-between;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-3);margin:16px 0 8px;font-weight:700;}
.sc-head span{font-weight:700;color:var(--brand-cyan);letter-spacing:0;}
.setup-check{display:flex;flex-direction:column;gap:5px;}
.sc-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:9px 11px;cursor:pointer;color:var(--text-1);font-family:inherit;transition:border-color .15s,background .15s;}
.sc-row:hover:not(.done){border-color:var(--brand-cyan);}
.sc-row.done{opacity:.62;cursor:default;}
.sc-ic{width:22px;height:22px;flex:none;display:grid;place-items:center;color:var(--text-3);}
.sc-row.done .sc-ic{color:var(--success);}
.sc-row.done .sc-ic svg{width:18px;height:18px;}
.sc-ic svg{width:18px;height:18px;}
.sc-tx{flex:1;min-width:0;display:flex;flex-direction:column;}
.sc-tx b{font-size:13px;font-weight:600;}
.sc-tx span{font-size:11px;color:var(--text-3);}
.sc-go{font-size:11px;font-weight:700;color:var(--brand-cyan);flex:none;}
.sc-done{font-size:10px;font-weight:700;color:var(--success);text-transform:uppercase;letter-spacing:.5px;flex:none;}
.sprint-band{background:linear-gradient(135deg,rgba(46,124,246,.14),rgba(46,124,246,.10) 55%,rgba(43,208,197,.10));border:1px solid var(--border-strong,var(--border));border-radius:var(--r-xl,20px);padding:22px 24px;margin:0 0 22px;display:grid;grid-template-columns:1fr 300px;gap:26px;}
.sprint-head{display:flex;align-items:center;justify-content:space-between;gap:18px;}
.sprint-elabel{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-3);font-weight:700;}
.sprint-pts{font-family:var(--font-head);font-weight:800;font-size:44px;line-height:1;letter-spacing:-1px;margin:6px 0 4px;background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.sprint-pts span{font-size:15px;-webkit-text-fill-color:var(--text-2);font-weight:600;}
.sprint-sub{font-size:12.5px;color:var(--text-2);max-width:48ch;line-height:1.5;}
.sprint-ring{position:relative;width:84px;height:84px;flex:none;}
.sprint-ring svg{width:84px;height:84px;transform:rotate(-90deg);}
.sprint-ring .ring-bg{fill:none;stroke:var(--surface-3);stroke-width:3;}
.sprint-ring .ring-fg{fill:none;stroke:var(--brand-cyan);stroke-width:3;stroke-linecap:round;}
.sprint-ring .ring-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:800;font-size:22px;}
.sprint-ring .ring-mid span{font-size:9px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;}
.leaderboard{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px 16px;}
.lb-title{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-3);font-weight:700;margin-bottom:10px;display:flex;justify-content:space-between;}
.lb-title span{color:var(--brand-cyan);letter-spacing:0;}
.lb-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--border);font-size:13px;}
.lb-row:last-child{border-bottom:none;}
.lb-row.me{font-weight:600;}
.lb-rank{width:22px;text-align:center;flex:none;font-size:13px;}
.lb-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lb-pts{flex:none;color:var(--text-2);font-variant-numeric:tabular-nums;}
@media(max-width:820px){ .sprint-band{grid-template-columns:1fr;} }
/* ===== Gamified momentum panel ===== */
.gam{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s5,20px);margin-bottom:22px;position:relative;overflow:hidden;}
.gam::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--gradient-brand);opacity:.9;}
.gam-top{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.gam-ring{--p:0;width:84px;height:84px;border-radius:50%;background:conic-gradient(var(--brand-cyan) calc(var(--p)*1%),var(--surface-3) 0);display:grid;place-items:center;flex:none;}
.gam-ring i{width:66px;height:66px;border-radius:50%;background:var(--surface-1);display:grid;place-items:center;flex-direction:column;font-style:normal;}
.gam-ring .pn{font-family:var(--font-head);font-weight:800;font-size:22px;line-height:1;}
.gam-ring .pl{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--text-dim);margin-top:2px;}
.gam-hd{flex:1;min-width:200px;}
.gam-hd h3{font-family:var(--font-head);font-weight:800;font-size:17px;margin:0 0 3px;}
.gam-hd p{font-size:12.5px;color:var(--text-muted);margin:0;}
.gam-streak{display:flex;align-items:center;gap:8px;background:var(--warning-bg);border:1px solid rgba(245,182,66,.3);border-radius:var(--r-pill);padding:7px 14px;font-weight:700;font-size:13px;color:var(--warning);flex:none;}
.gam-streak svg{width:16px;height:16px;}
.gam-miles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:18px;}
.gam-m{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:11px 13px;transition:border-color var(--dur-fast),transform var(--dur-fast);}
.gam-m.done{border-color:rgba(43,214,111,.35);}
.gam-m .mic{width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;flex:none;background:var(--surface-3);color:var(--text-dim);}
.gam-m.done .mic{background:var(--success-bg);color:var(--success);}
.gam-m .mtx{min-width:0;}
.gam-m .mtt{font-size:12.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gam-m .mst{font-size:10.5px;color:var(--text-dim);}
.gam-m.done .mst{color:var(--success);}
.gam-nba{display:flex;align-items:center;gap:12px;margin-top:18px;background:var(--gradient-brand-soft);border:1px solid var(--border-strong);border-radius:var(--r-md);padding:13px 15px;}
.gam-nba .nbt{flex:1;min-width:0;}
.gam-nba .nbl{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--brand-cyan);font-weight:700;}
.gam-nba .nbm{font-size:13.5px;font-weight:600;color:var(--text);margin-top:2px;}


/* ===== XP / Level + day-streak ===== */
.gam-level{display:flex;align-items:center;gap:13px;}
.gam-lvl-badge{width:46px;height:46px;border-radius:var(--r-md);background:var(--gradient-brand);display:grid;place-items:center;color:#fff;box-shadow:var(--glow-brand);flex:none;}
.gam-lvl-badge svg{width:24px;height:24px;}
.gam-lvl-meta .ll{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);font-weight:600;}
.gam-lvl-meta .lv{font-family:var(--font-head);font-weight:800;font-size:18px;}
.gam-xp{height:9px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden;margin-top:14px;}
.gam-xp>i{display:block;height:100%;border-radius:inherit;background:var(--gradient-brand);transition:width var(--dur-slow) var(--ease);}
.gam-xp-lab{display:flex;justify-content:space-between;font-size:11.5px;color:var(--text-muted);margin-top:6px;}
.gam-xp-lab b{color:var(--text);font-weight:700;}
.gam-dots{display:flex;gap:6px;margin-top:10px;}
.gam-dots i{flex:1;height:24px;border-radius:6px;background:var(--surface-3);display:grid;place-items:center;position:relative;}
.gam-dots i.on{background:rgba(245,182,66,.18);border:1px solid rgba(245,182,66,.4);}
.gam-dots i.on::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--warning);}
.gam-dots i .dl{position:absolute;bottom:-15px;left:0;right:0;text-align:center;font-size:9px;color:var(--text-dim);}
.gam-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin-top:4px;}
.gam-sub{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:14px 16px;}
.gam-sub .sh{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--text-dim);font-weight:600;}
.gam-streaknum{font-family:var(--font-head);font-weight:800;font-size:34px;display:flex;align-items:center;gap:8px;line-height:1;margin-top:4px;}
.gam-streaknum svg{width:26px;height:26px;color:var(--warning);}
@media(max-width:720px){.gam-grid{grid-template-columns:1fr;}}


/* ===== Command palette (Cmd/Ctrl+K) ===== */
.cmdk-back{position:fixed;inset:0;background:rgba(5,6,12,.6);backdrop-filter:blur(4px);z-index:12000;display:none;align-items:flex-start;justify-content:center;padding-top:12vh;}
.cmdk-back.open{display:flex;}
.cmdk{width:min(560px,92vw);background:var(--surface-1);border:1px solid var(--border-strong);border-radius:var(--r-lg);box-shadow:var(--shadow-2);overflow:hidden;}
.cmdk-in{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);}
.cmdk-in svg{width:18px;height:18px;color:var(--text-dim);flex:none;}
.cmdk-in input{flex:1;background:none;border:none;outline:none;color:var(--text);font-family:inherit;font-size:15px;min-height:auto;}
.cmdk-in kbd{font-size:10px;color:var(--text-dim);border:1px solid var(--border);border-radius:6px;padding:2px 6px;}
.cmdk-list{max-height:54vh;overflow-y:auto;padding:8px;}
.cmdk-grp{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--text-dim);font-weight:600;padding:10px 10px 4px;}
.cmdk-item{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:var(--r-md);cursor:pointer;color:var(--text-2);}
.cmdk-item .ci{width:30px;height:30px;border-radius:var(--r-sm);background:var(--surface-2);display:grid;place-items:center;flex:none;color:var(--text-dim);}
.cmdk-item .ct{font-size:13.5px;font-weight:600;color:var(--text);}
.cmdk-item .cd{font-size:11.5px;color:var(--text-dim);}
.cmdk-item.sel,.cmdk-item:hover{background:var(--gradient-brand-soft);}
.cmdk-item.sel .ci,.cmdk-item:hover .ci{color:var(--brand-cyan);}
.cmdk-empty{padding:24px;text-align:center;color:var(--text-dim);font-size:13px;}


/* ===== Rail (reference nav) ===== */
.rail{width:248px;flex:none;position:sticky;top:0;align-self:flex-start;height:100vh;background:var(--surface-1);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:16px;gap:14px;overflow:hidden;transition:width .24s cubic-bezier(.4,0,.2,1),padding .24s cubic-bezier(.4,0,.2,1);}
.rail-head{display:flex;align-items:center;gap:12px;padding:0 4px;}
.brand-mark{width:38px;height:38px;border-radius:var(--r-md);flex:none;background:var(--gradient-brand);display:grid;place-items:center;font-family:var(--font-head);font-weight:800;color:#fff;font-size:15px;box-shadow:var(--glow-brand);position:relative;z-index:1;}
/* ── P7 Forge mascot ─ sits BEHIND the opaque FC tile (z-index 0 vs the tile's 1) and rises out of
   it on login. pointer-events:none on the wrap (never blocks the rail); only the SVG is clickable,
   and only while playing. prefers-reduced-motion gets a static peek with no wave. */
.fc-mascot{position:absolute;left:-1px;top:-4px;width:48px;height:52px;z-index:0;pointer-events:none;opacity:0;transform:translate(0,8px) scale(.5);}
.rail-head{position:relative;}
.fc-mascot .fcm-svg{display:block;}
.fc-mascot.play{animation:fcMascotPeek 5.2s cubic-bezier(.34,1.3,.5,1) forwards;}
.fc-mascot.play .fcm-svg{pointer-events:auto;cursor:pointer;}
.fc-mascot.play .fcm-arm{animation:fcMascotWave 1.9s ease-in-out .9s 1;transform-origin:40px 20px;}
.fc-mascot.play + .brand-mark{animation:fcLogoOpen 1.1s ease-in-out 1;}
.fc-mascot-bubble{position:absolute;left:52px;top:1px;background:var(--surface-2,#181b27);border:1px solid var(--border);border-radius:10px;border-bottom-left-radius:2px;padding:4px 9px;font-size:11px;font-weight:700;color:var(--text-1,#fff);white-space:nowrap;opacity:0;box-shadow:0 6px 18px rgba(0,0,0,.35);}
.fc-mascot.play .fc-mascot-bubble{animation:fcMascotBubble 5.2s ease forwards;}
/* The character slides out DIAGONALLY from behind the tile to its upper-right, so the face clears
   the tile's right edge while everything stays inside the rail's padding box (the rail clips
   overflow, and the viewport top sits flush with the rail - straight-up would decapitate it). */
@keyframes fcMascotPeek{0%{opacity:0;transform:translate(0,8px) scale(.5);}6%{opacity:1;}14%{opacity:1;transform:translate(15px,-11px) scale(1);}84%{opacity:1;transform:translate(15px,-11px) scale(1);}97%{opacity:0;transform:translate(0,8px) scale(.5);}100%{opacity:0;transform:translate(0,8px) scale(.5);}}
@keyframes fcMascotWave{0%,100%{transform:rotate(0deg);}15%{transform:rotate(-40deg);}35%{transform:rotate(8deg);}55%{transform:rotate(-40deg);}75%{transform:rotate(8deg);}90%{transform:rotate(-22deg);}}
@keyframes fcLogoOpen{0%,100%{transform:rotate(0deg);}18%{transform:rotate(-7deg);}42%{transform:rotate(4deg);}70%{transform:rotate(-2deg);}}
@keyframes fcMascotBubble{0%,16%{opacity:0;transform:translateY(4px);}24%{opacity:1;transform:translateY(0);}80%{opacity:1;transform:translateY(0);}92%,100%{opacity:0;}}
@media (prefers-reduced-motion: reduce){
  .fc-mascot.play,.fc-mascot.play .fcm-arm,.fc-mascot.play + .brand-mark,.fc-mascot.play .fc-mascot-bubble{animation:none;}
  .fc-mascot.play{opacity:1;transform:translate(15px,-11px) scale(1);transition:opacity .3s;}
  .fc-mascot.play .fc-mascot-bubble{opacity:1;}
}
.brand-name{font-family:var(--font-head);font-weight:800;letter-spacing:.5px;font-size:15px;line-height:1.1;flex:1;}
.brand-name span{display:block;font-weight:500;font-size:9px;letter-spacing:3px;color:var(--text-3);}
.meter-wrap{display:flex;flex-direction:column;gap:8px;padding:0 4px;}
.plan-row{display:flex;align-items:center;gap:8px;min-width:0;}
.chip-plan{font-family:var(--font-head);font-weight:700;font-size:10px;letter-spacing:1px;padding:3px 8px;border-radius:var(--r-pill);background:rgba(46,124,246,.18);color:#caa7ef;border:1px solid rgba(46,124,246,.4);flex:none;}
.rail .meter{height:8px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden;}
.rail .meter>i{display:block;height:100%;background:var(--gradient-brand);border-radius:inherit;transition:width var(--dur);}
.meter-label{font-size:12px;color:var(--text-3);display:flex;justify-content:space-between;}
.meter-label b{color:var(--text-2);font-weight:600;}
.rail .nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1;margin:0 -4px;padding:0 4px;}
.rail .nav-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-md);color:var(--text-2);font-size:15px;font-weight:500;position:relative;transition:background .16s,color .16s;white-space:nowrap;width:100%;text-align:left;background:none;border:none;cursor:pointer;}
.rail .nav-item svg{width:20px;height:20px;flex:none;}
.rail .nav-item:hover{background:var(--surface-2);color:var(--text-1);}
.rail .nav-item.active{color:var(--text-1);background:var(--gradient-brand-soft);box-shadow:none;}
.rail .nav-item.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:var(--r-pill);background:var(--gradient-brand);}
.rail .nav-item.active svg{color:var(--brand-cyan);}
.rail .nav-item .count{margin-left:auto;font-size:11px;font-weight:700;background:var(--surface-3);color:var(--text-2);padding:1px 8px;border-radius:var(--r-pill);}
.rail .nav-item .count.amber{background:var(--warning);color:#1a1304;}
.refer{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--border);width:100%;text-align:left;cursor:pointer;}
.refer svg{width:22px;height:22px;color:var(--brand-cyan);flex:none;}
.refer .r-title{font-weight:700;font-size:13px;} .refer .r-sub{font-size:12px;color:var(--text-3);} .refer .chev{margin-left:auto;color:var(--text-3);}
.acct{border-top:1px solid var(--border);padding-top:12px;display:flex;flex-direction:column;gap:2px;position:relative;}
.acct-btn{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--r-md);color:var(--text-2);width:100%;text-align:left;font-size:13px;background:none;border:none;cursor:pointer;}
.acct-btn:hover{background:var(--surface-2);color:var(--text-1);} .acct-btn svg{width:18px;height:18px;flex:none;}
.acct-avatar{width:28px;height:28px;border-radius:var(--r-pill);background:var(--gradient-brand);display:grid;place-items:center;font-family:var(--font-head);font-weight:700;font-size:12px;color:#fff;flex:none;overflow:hidden;}
.acct-menu{display:none;flex-direction:column;gap:2px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:8px;margin-bottom:8px;}
.acct-menu.open{display:flex;}
/* ===== Contextual sub-nav (pill tabs) ===== */
.view-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 20px;}
.view-head .vh-text{flex:1;min-width:240px;} .vh-text p{white-space:normal;max-width:70ch;line-height:1.5;}
.view-head h1{font-family:var(--font-head);font-weight:800;font-size:30px;letter-spacing:-.4px;color:var(--text-1);line-height:1.1;}
.view-head p{color:var(--text-2);margin:8px 0 0;max-width:70ch;font-size:14px;line-height:1.5;min-height:21px;}
.view-head .vh-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.view-head .vh-head-row{display:flex;align-items:center;gap:2px;}
.vh-info{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;border:1px solid var(--border-strong,rgba(255,255,255,.22));color:var(--text-2);vertical-align:middle;margin-left:11px;cursor:help;position:relative;background:var(--surface2);transition:color .15s,border-color .15s;flex:none;}
.vh-info:hover,.vh-info:focus-visible{color:var(--cyan);border-color:var(--cyan);outline:none;}
.vh-info svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.vh-info .vh-tip{position:absolute;top:calc(100% + 9px);left:-6px;background:var(--surface3,#1b1b25);border:1px solid var(--border);border-radius:11px;padding:11px 13px;font-family:var(--font-body,inherit);font-size:12.5px;font-weight:400;line-height:1.5;letter-spacing:0;color:var(--text-2);width:max-content;max-width:320px;white-space:normal;box-shadow:0 10px 30px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .16s,transform .16s;z-index:70;text-align:left;pointer-events:none;}
.vh-info .vh-tip::before{content:'';position:absolute;bottom:100%;left:11px;border:6px solid transparent;border-bottom-color:var(--border);}
.vh-info:hover .vh-tip,.vh-info:focus-visible .vh-tip,.vh-info:focus .vh-tip{opacity:1;visibility:visible;transform:translateY(0);}

.main > #forgeViewHead{box-sizing:border-box;max-width:1560px;margin:0 auto;padding:36px 40px 12px;}
.tab-pane.pane-railed{padding-top:10px!important;}
@media(max-width:768px){ .main > #forgeViewHead{padding:20px 18px 10px;} #forgeSubnav.subnav{margin-left:18px;} }
/* hide the now-duplicated in-pane headers (their title+actions live in the view-head above the tabs) */
.vh-src{display:none!important;}
.vh-srctitle{margin:0 0 8px!important;background:none!important;border:none!important;justify-content:flex-end!important;}
.vh-srctitle > div:first-child{display:none!important;}
@media(max-width:520px){ .view-head h1{font-size:24px;} }
/* form editor rail = collapsed icon rail, matching the post Studio menu (.fs-rail) */
.fed-screen .editor2-body{grid-template-columns:80px minmax(320px,400px) 1fr!important;}
.fed-screen .editor2-rail{padding:10px 6px!important;align-items:center!important;gap:4px!important;}
.fed-screen .e2-tab{flex-direction:column!important;width:66px!important;height:62px!important;gap:5px!important;padding:7px 4px!important;font-size:9.5px!important;line-height:1.15!important;text-align:center!important;justify-content:center!important;border-radius:11px!important;}
.fed-screen .e2-tab svg{width:20px!important;height:20px!important;}
.fed-screen .e2-tab.active::before{display:none!important;}
#forgeSubnav.subnav{display:flex;gap:4px;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-pill);padding:4px;margin:4px 0 24px 40px;width:max-content;max-width:100%;overflow-x:auto;}
#forgeSubnav.subnav button{padding:9px 22px;border-radius:var(--r-pill);color:var(--text-2);font-weight:600;font-size:13px;white-space:nowrap;transition:color .16s,background .16s;position:relative;background:none;border:none;cursor:pointer;font-family:inherit;}
#forgeSubnav.subnav button:hover{color:var(--text-1);}
#forgeSubnav.subnav button.active{color:var(--text-1);background:var(--gradient-brand-soft);box-shadow:none;} #forgeSubnav.subnav button.active::after{content:"";position:absolute;left:18px;right:18px;bottom:2px;height:2px;border-radius:999px;background:var(--gradient-brand);}
/* UAT8: Owner console sub-nav uses the SAME standard scrollable gradient-pill strip as Posts / My Brand (single row, no wrapping). Buttons keep .help-menu-btn so the existing active-state JS still works. */
#ownerSubnav.subnav{display:flex;flex-wrap:nowrap;gap:4px;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-pill);padding:4px;margin:4px 0 24px;width:max-content;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
#ownerSubnav.subnav .help-menu-btn{padding:9px 22px;border:none;border-radius:var(--r-pill);color:var(--text-2);font-weight:600;font-size:13px;white-space:nowrap;transition:color .16s,background .16s;position:relative;background:none;cursor:pointer;font-family:inherit;margin:0;}
#ownerSubnav.subnav .help-menu-btn:hover{color:var(--text-1);background:none;}
#ownerSubnav.subnav .help-menu-btn.active{color:var(--text-1);background:var(--gradient-brand-soft);box-shadow:none;} #ownerSubnav.subnav .help-menu-btn.active::after{content:"";position:absolute;left:18px;right:18px;bottom:2px;height:2px;border-radius:999px;background:var(--gradient-brand);}
/* Reusable pill sub-nav for in-page section switchers (Owner console, Billing) - matches #forgeSubnav so every sub-menu looks the same. */
.pill-subnav{display:inline-flex;flex-wrap:wrap;gap:4px;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-pill);padding:4px;margin:0 0 24px;width:max-content;max-width:100%;overflow-x:auto;}
.pill-subnav .help-menu-btn,.pill-subnav button{padding:9px 22px;border:none;border-radius:var(--r-pill);color:var(--text-2);font-weight:600;font-size:13px;white-space:nowrap;transition:color .16s,background .16s;position:relative;background:none;cursor:pointer;font-family:inherit;margin:0;}
.pill-subnav .help-menu-btn:hover,.pill-subnav button:hover{color:var(--text-1);background:none;}
.pill-subnav .help-menu-btn.active,.pill-subnav button.active{color:var(--text-1);background:var(--gradient-brand-soft);box-shadow:none;} .pill-subnav .help-menu-btn.active::after,.pill-subnav button.active::after{content:"";position:absolute;left:18px;right:18px;bottom:2px;height:2px;border-radius:999px;background:var(--gradient-brand);}
/* ===== page-head hero scale ===== */
.page-title{font-size:30px!important;font-weight:800;letter-spacing:-.5px;}
.page-subtitle{font-size:14px;color:var(--text-2);max-width:64ch;}
/* ===== Mobile sidebar drawer + hamburger ===== */
/* UI-E: inside a full-screen editor, global mobile chrome steps aside (editor has its own Back + tool rail) */
body.editor-open .mob-burger,
body.editor-open #mobileBottomNav,
body.editor-open #forgeTabbar,
body.editor-open #mobSubMenu,
body.editor-open #mobSubScrim{display:none!important;}
/* Hamburger overlap fix: the floating menu button must never sit on top of a dialog/composer title. Hide it whenever any modal, custom overlay or side drawer is open (modern :has plus a JS-toggled body.has-modal fallback). */
body:has(.modal-overlay.open) .mob-burger,
body:has(.fc-modal-ov) .mob-burger,
body:has(#agentDrawer.open) .mob-burger,
body.has-modal .mob-burger{display:none!important;}

.mob-burger{display:none;position:fixed;top:12px;left:12px;z-index:205;width:42px;height:42px;border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--border-strong);place-items:center;box-shadow:var(--shadow-1);color:var(--text);}
.mob-burger svg{width:20px;height:20px;}
.sidebar-scrim{position:fixed;inset:0;background:rgba(5,6,12,.6);backdrop-filter:blur(3px);z-index:209;display:none;}
.sidebar-scrim.open{display:block;}
@media (max-width:768px){
  .mob-burger{display:grid;}
  .main{padding-top:64px;scroll-padding-top:64px;}
  .rail{display:flex!important;position:fixed;top:0;left:-300px;width:264px;height:100vh;z-index:210;transition:left var(--dur) var(--ease);box-shadow:var(--shadow-2);}
  .rail.drawer-open{left:0;}
}

/* ===== Insights (reference analytics) ===== */
.in-grid{display:grid;gap:16px;} .in-grid.g2{grid-template-columns:1fr 1fr;} .in-grid.g4{grid-template-columns:repeat(4,1fr);}
.kpi-row{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:22px;}
.kpi{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px 20px;}
.kpi .kl{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;}
.kpi .kl svg{width:15px;height:15px;}
.kpi .kn{font-family:var(--font-head);font-weight:800;font-size:26px;letter-spacing:-.5px;}
.kpi .kd{margin-top:4px;}
.delta{font-size:11px;font-weight:700;display:inline-flex;align-items:center;gap:3px;}
.delta.up{color:var(--success);} .delta.down{color:var(--danger);} .delta.flat{color:var(--text-3);}
.in-card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;margin-bottom:16px;}
.in-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.in-num{width:26px;height:26px;border-radius:var(--r-pill);background:var(--gradient-brand-soft);border:1px solid var(--border-strong);display:grid;place-items:center;font-family:var(--font-head);font-weight:700;font-size:13px;color:var(--brand-cyan);flex:none;}
.in-head h3{font-family:var(--font-head);font-size:17px;font-weight:800;margin:0;}
.in-head .sh-meta{margin-left:auto;font-size:13px;color:var(--text-3);}
.funnel-wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:center;}
.funnel-svg{width:100%;height:auto;}
.funnel-attr{display:flex;flex-direction:column;gap:12px;}
.fa-stage{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:14px;position:relative;overflow:hidden;}
.fa-stage::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--stage-c,var(--brand-cyan));}
.fa-top{display:flex;align-items:center;gap:12px;margin-bottom:8px;}
.fa-top .fa-name{font-family:var(--font-head);font-weight:700;font-size:13px;flex:1;}
.fa-top .fa-num{font-family:var(--font-head);font-weight:800;font-size:20px;}
.fa-top .fa-pct{font-size:11px;color:var(--text-3);width:52px;text-align:right;}
.fa-sources{display:flex;gap:8px;flex-wrap:wrap;}
.fa-src{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--text-2);background:var(--surface-3);padding:3px 9px;border-radius:var(--r-pill);}
.fa-src i{width:8px;height:8px;border-radius:2px;}
.chart-card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;}
.chart-card h3{font-family:var(--font-head);font-size:15px;font-weight:700;margin:0 0 4px;}
.chart-card .ch-sub{font-size:11px;color:var(--text-3);margin-bottom:16px;}
.legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px;font-size:13px;color:var(--text-2);}
.legend span{display:inline-flex;align-items:center;gap:6px;} .legend i{width:10px;height:10px;border-radius:3px;display:inline-block;}
.donut-wrap{display:flex;align-items:center;gap:24px;}
.donut-center{position:relative;width:150px;height:150px;flex:none;}
.donut-center .dc-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.donut-center .dc-n{font-family:var(--font-head);font-weight:800;font-size:24px;} .donut-center .dc-l{font-size:11px;color:var(--text-3);}
.bar-list{display:flex;flex-direction:column;gap:12px;}
.bar-row{display:grid;grid-template-columns:minmax(96px,150px) 1fr minmax(52px,auto);align-items:center;gap:12px;font-size:13px;}
.bar-row .bl{color:var(--text-2);display:flex;align-items:center;gap:8px;min-width:0;}.bl-t{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25;word-break:break-word;}
.bar-row .bl i{width:14px;height:14px;border-radius:4px;flex:none;}
/* P7: one shared track per row; both series overlay on it (absolute fills) so the teal CTA-click
   segment the legend promises actually renders on top of the blue views bar, same track everywhere. */
.bar-track{height:8px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden;position:relative;}
.bar-track>i{display:block;position:absolute;left:0;top:0;height:100%;border-radius:inherit;}
.bar-row .bv{text-align:right;font-weight:700;color:var(--text-1);white-space:nowrap;line-height:1.3;}
.bar-row .bv em{display:block;font-style:normal;font-weight:600;font-size:11px;color:var(--text-3);}
.dtable{width:100%;border-collapse:collapse;font-size:13px;}
.dtable th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-3);font-weight:600;padding:0 12px 12px;border-bottom:1px solid var(--border);}
.dtable td{padding:12px;border-bottom:1px solid var(--border);color:var(--text-2);}
.dtable td:first-child{color:var(--text-1);font-weight:500;}
.dtable tr:last-child td{border-bottom:none;}
.dtable td.num{text-align:right;font-variant-numeric:tabular-nums;}
.spark-grid{display:flex;align-items:flex-end;gap:4px;height:70px;}
.spark-grid i{flex:1;background:var(--gradient-brand);border-radius:3px 3px 0 0;opacity:.85;min-height:4px;}
.in-ministat{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:14px;}
.in-ministat .n{font-family:var(--font-head);font-weight:800;font-size:22px;} .in-ministat .l{font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;}
.in-empty{padding:22px;text-align:center;color:var(--text-3);font-size:13px;border:1px dashed var(--border);border-radius:var(--r-md);}
@media(max-width:980px){ .kpi-row{grid-template-columns:repeat(3,1fr);} .funnel-wrap{grid-template-columns:1fr;} .in-grid.g2,.in-grid.g4{grid-template-columns:1fr;} .donut-wrap{flex-direction:column;align-items:flex-start;} }
/* UI-F: Insights mobile - KPIs 2-up so nothing is clipped at narrow widths */
@media(max-width:640px){ .kpi-row{grid-template-columns:1fr 1fr!important;gap:12px;margin-bottom:18px;} .kpi{padding:14px 15px;} .kpi .kn{font-size:23px;} .in-card{padding:16px;} .in-head h3{font-size:16px;} }
@media(max-width:380px){ .kpi-row{gap:9px;} .kpi{padding:12px 12px;} .kpi .kn{font-size:21px;} .kpi .kl{font-size:10px;} }

/* ===== Home game-strip + quests + metric (reference) ===== */
.game-strip{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin-bottom:22px;}
.game-card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;}
.game-card.level{background:radial-gradient(600px 200px at 0% 0%,rgba(46,124,246,.22),transparent 60%),var(--surface-1);}
.level-top{display:flex;align-items:center;gap:12px;}
.level-badge{width:46px;height:46px;border-radius:var(--r-md);background:var(--gradient-brand);display:grid;place-items:center;color:#fff;box-shadow:var(--glow-brand);flex:none;font-family:var(--font-head);font-weight:800;}
.level-badge svg{width:24px;height:24px;}
.level-meta .ll{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-3);}
.level-meta .lv{font-family:var(--font-head);font-weight:800;font-size:22px;}
.xp-bar{height:8px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden;}
.xp-bar>i{display:block;height:100%;background:var(--gradient-brand);border-radius:inherit;transition:width var(--dur-slow,.4s);}
.xp-label{font-size:11px;color:var(--text-3);display:flex;justify-content:space-between;}
.streak-num{font-family:var(--font-head);font-weight:800;font-size:38px;letter-spacing:-1px;display:flex;align-items:center;gap:8px;}
.streak-num svg{width:28px;height:28px;color:var(--warning);}
.streak-days{display:flex;gap:6px;margin-top:8px;}
.streak-days i{flex:1;height:26px;border-radius:6px;background:var(--surface-3);display:grid;place-items:center;position:relative;}
.streak-days i.on{background:rgba(245,182,66,.18);border:1px solid rgba(245,182,66,.4);}
.streak-days i.on::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--warning);}
.streak-days i .dlab{position:absolute;bottom:-16px;left:0;right:0;text-align:center;font-size:9px;color:var(--text-3);}
.milestones{display:flex;gap:12px;flex-wrap:wrap;}
.ms{flex:1;min-width:120px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:14px;text-align:center;position:relative;}
.ms .msi{width:34px;height:34px;border-radius:var(--r-pill);background:var(--gradient-brand-soft);border:1px solid var(--border-strong);display:grid;place-items:center;color:var(--brand-cyan);margin:0 auto 8px;}
.ms .msi svg{width:18px;height:18px;}
.ms.locked .msi{color:var(--text-3);background:var(--surface-3);}
.ms .msv{font-family:var(--font-head);font-weight:800;font-size:13px;}
.ms .msl{font-size:11px;color:var(--text-3);}
.ms.done .msl{color:var(--success);}
.onboard{position:relative;overflow:hidden;border-radius:var(--r-xl);border:1px solid var(--border-strong);background:radial-gradient(900px 300px at 10% -20%,rgba(46,124,246,.22),transparent 60%),radial-gradient(700px 320px at 95% 0%,rgba(43,208,197,.16),transparent 55%),var(--surface-1);padding:24px;margin-bottom:26px;}
.onboard h2{font-size:24px;font-weight:800;font-family:var(--font-head);} .onboard .o-sub{color:var(--text-2);margin-top:8px;max-width:60ch;}
.o-progress{display:flex;align-items:center;gap:16px;margin:18px 0;}
.o-bar{flex:1;height:10px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden;max-width:420px;} .o-bar>i{display:block;height:100%;background:var(--gradient-brand);border-radius:inherit;}
.o-count{font-size:13px;color:var(--text-2);font-weight:700;}
.quests{display:flex;flex-direction:column;gap:8px;}
.quest{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--border);cursor:pointer;transition:border-color var(--dur-fast);}
.quest:hover{border-color:var(--border-strong);}
.quest .qi{width:30px;height:30px;border-radius:8px;background:var(--surface-3);display:grid;place-items:center;color:var(--brand-cyan);flex:none;}
.quest .qi svg{width:16px;height:16px;}
.quest.done .qi{background:rgba(43,214,111,.16);color:var(--success);}
.quest .qt{flex:1;font-size:13px;font-weight:600;} .quest .qt span{display:block;font-weight:400;color:var(--text-3);font-size:12px;margin-top:1px;}
.quest .qxp{font-size:11px;font-weight:700;color:var(--warning);background:rgba(245,182,66,.12);padding:3px 8px;border-radius:var(--r-pill);}
.quest.done .qxp{color:var(--success);background:rgba(43,214,111,.12);}
.metric{display:flex;flex-direction:column;gap:12px;padding:20px;}
.metric .mtop{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.metric .mi{width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;} .metric .mi svg{width:20px;height:20px;}
.mi.cyan{background:rgba(43,208,197,.14);color:var(--brand-cyan);} .mi.blue{background:rgba(46,124,246,.14);color:#4d9bff;}
.mi.purple{background:rgba(46,124,246,.18);color:#6EA8FF;} .mi.green{background:rgba(43,214,111,.14);color:var(--success);}
.mi.amber{background:rgba(245,182,66,.14);color:var(--warning);} .mi.pink{background:rgba(242,84,91,.14);color:var(--danger);}
.metric .mnum{font-family:var(--font-head);font-weight:800;font-size:28px;letter-spacing:-1px;}
.metric .mlabel{font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-3);font-weight:500;}
@media(max-width:900px){ .game-strip{grid-template-columns:1fr;} }

/* ===== Outreach automation sequence (reference) ===== */
.flow-steps{position:relative;padding-left:34px;margin-top:6px;}
.flow-steps::before{content:"";position:absolute;left:14px;top:8px;bottom:28px;width:2px;background:var(--border-strong);}
.fstep{position:relative;margin-bottom:14px;}
.fstep .fdot{position:absolute;left:-30px;top:4px;width:22px;height:22px;border-radius:50%;background:var(--surface-1);border:2px solid var(--brand-cyan);display:grid;place-items:center;color:var(--brand-cyan);}
.fstep .fdot svg{width:12px;height:12px;}
.fstep-card{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:14px;}
.fstep-head{display:flex;align-items:center;gap:12px;margin-bottom:6px;}
.fstep-head .ft{font-family:var(--font-head);font-weight:700;font-size:13px;flex:1;}
.delay-chip{font-size:11px;font-weight:700;color:var(--brand-cyan);background:rgba(43,208,197,.12);padding:3px 10px;border-radius:var(--r-pill);white-space:nowrap;}
.fstep-body{font-size:13px;color:var(--text-2);}
.fstep-edit{font-size:11px;color:var(--text-3);background:none;border:none;cursor:pointer;text-decoration:underline;padding:0;margin-left:8px;}
.fstep-edit:hover{color:var(--brand-cyan);}
.ao-step{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 13px;margin-bottom:10px;}
.ao-step-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px;}
.ao-step-n{font-weight:700;font-size:13px;color:var(--text-1);}
.ao-chan{display:inline-flex;border:1px solid var(--border);border-radius:999px;overflow:hidden;}
.ao-chan-btn{background:transparent;border:none;padding:5px 12px;font-size:12px;color:var(--text-muted);cursor:pointer;font-weight:600;}
.ao-chan-btn.on{background:var(--brand-cyan,#2E7CF6);color:#fff;}
.ao-step-toggle{margin:0 0 0 auto;}
.ao-step-x{background:transparent;border:none;color:var(--text-dim);font-size:20px;line-height:1;cursor:pointer;padding:0 4px;}
.ao-step-ctl{background:transparent;border:1px solid var(--border);color:var(--text-2);width:24px;height:24px;border-radius:6px;cursor:pointer;font-size:13px;line-height:1;display:inline-flex;align-items:center;justify-content:center;padding:0;}
.ao-step-ctl:hover:not(:disabled){border-color:var(--brand-cyan,#2BD0C5);color:var(--brand-cyan,#2BD0C5);}
.ao-step-ctl:disabled{opacity:.35;cursor:not-allowed;}
.ao-step-x:hover{color:var(--red,#ef4444);}
.ao-step-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:4px;}
.ao-step-row select,.ao-step-row input{padding:6px 9px;font-size:12.5px;border:1px solid var(--border);border-radius:var(--r-sm,7px);background:var(--surface-2,#fff);color:var(--text-1);}
.ao-step-note{font-size:12.5px;color:var(--text-2);background:var(--surface-2,#f6f8fc);border:1px solid var(--border);border-radius:var(--r-sm,7px);padding:9px 11px;margin-top:8px;line-height:1.5;}
.ao-step-note a{color:var(--brand-cyan,#2E7CF6);font-weight:600;text-decoration:none;}
@media(max-width:860px){.ao-step-head{gap:7px;}.ao-chan-btn{padding:5px 9px;}}
.stop-rule{display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--r-md);border:1px dashed var(--border-strong);background:var(--surface-1);margin-top:8px;}
.stop-rule svg{width:18px;height:18px;color:var(--success);flex:none;}
.add-step{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border:1px dashed var(--border-strong);border-radius:var(--r-md);color:var(--text-2);font-weight:600;font-size:13px;background:none;cursor:pointer;font-family:inherit;}
.add-step:hover{border-color:var(--brand-cyan);color:var(--brand-cyan);}.add-step svg{width:16px;height:16px;flex:none;}
.seq-chip{display:inline-flex;align-items:center;font-size:11px;color:var(--text-2);background:var(--surface-3);padding:3px 9px;border-radius:var(--r-pill);}

/* ===== Form / Landing builder chrome -> design system ===== */
.modal{border-radius:var(--r-lg)!important;border-color:var(--border-strong)!important;box-shadow:var(--shadow-2);}
.modal-header h3,.modal-title{font-family:var(--font-head);font-weight:800;letter-spacing:-.2px;}
#formBuilderModal .modal{max-width:880px;}
.fb-preset{border-radius:var(--r-pill)!important;font-weight:600!important;transition:background var(--dur-fast),color var(--dur-fast);}
.fb-preset.active{background:var(--gradient-brand)!important;color:#fff!important;border-color:transparent!important;box-shadow:var(--glow-brand);}
#fbPreview,#lpPreview{border-radius:var(--r-md)!important;border-color:var(--border)!important;}
/* Landing editor tabbed sidebar pills -> system */
[data-lptab],.lp-tab{border-radius:var(--r-md)!important;}
[data-lptab].active,.lp-tab.active{background:var(--gradient-brand-soft)!important;color:var(--text)!important;box-shadow:inset 2px 0 0 var(--brand-cyan);}
.lp-builder-head,.lp-editor-head{border-bottom:1px solid var(--border)!important;}
/* Field rows in the form builder */
#fbFields > div{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);}

/* ===== Posts cards -> design system (reference) ===== */
.post-card{border-radius:var(--r-lg)!important;background:var(--surface-1)!important;border-color:var(--border)!important;}
.post-card:hover{border-color:var(--border-strong)!important;background:var(--surface-2)!important;box-shadow:var(--shadow-1)!important;transform:translateY(-2px);}
.post-image-wrap{background:radial-gradient(120% 120% at 0% 0%,rgba(46,124,246,.5),transparent 55%),radial-gradient(120% 120% at 100% 100%,rgba(43,208,197,.45),transparent 55%),var(--gradient-brand)!important;}
.post-image-wrap img,.post-image-wrap video{background:transparent;}
.post-card.needs-action{border-color:rgba(245,182,66,.35)!important;}
.post-card.revision{border-color:rgba(245,182,66,.35)!important;}

/* ===== Full-screen Form editor (reference editor2) ===== */
#formBuilderModal.modal-overlay{padding:0!important;align-items:stretch!important;justify-content:stretch!important;}
.fed-screen{display:flex;flex-direction:column;width:100%;height:100vh;background:var(--canvas);overflow:hidden;}
.fed-screen .editor-top{display:flex;align-items:center;gap:16px;padding:12px 22px;border-bottom:1px solid var(--border);background:var(--surface-1);flex:none;}
.fed-screen .editor-top h2{font-family:var(--font-head);font-weight:800;font-size:20px;}
.fed-screen .et-title{display:flex;align-items:center;gap:12px;}
.fed-screen .editor-top .spacer{flex:1;}
.fed-screen .editor2-body{flex:1;display:grid;grid-template-columns:212px minmax(320px,400px) 1fr;min-height:0;}
.fed-screen .editor2-rail{background:var(--surface-1);border-right:1px solid var(--border);padding:16px 12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;}
.fed-screen .e2-tab{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-md);color:var(--text-2);font-weight:500;font-size:13px;text-align:left;width:100%;position:relative;background:none;border:none;cursor:pointer;font-family:inherit;}
.fed-screen .e2-tab svg{width:18px;height:18px;flex:none;}
.fed-screen .e2-tab:hover{background:var(--surface-2);color:var(--text-1);}
.fed-screen .e2-tab.active{background:var(--gradient-brand-soft);color:var(--text-1);}
.fed-screen .e2-tab.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:var(--r-pill);background:var(--gradient-brand);}
.fed-screen .e2-panel{background:var(--surface-1);border-right:1px solid var(--border);padding:24px;overflow-y:auto;}
.fed-screen .e2-preview{background:var(--canvas);padding:24px;overflow-y:auto;}
.fed-screen .e2-pane{display:none;} .fed-screen .e2-pane.active{display:block;}
.fed-screen .e2-h{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-3);margin-bottom:16px;font-weight:600;}
.fed-screen .field{margin-bottom:18px;} .fed-screen .field label{display:block;font-size:13px;color:var(--text-2);margin-bottom:6px;}
.fed-screen .preview-label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);margin-bottom:16px;}
.fed-screen .preview-label .dot{width:8px;height:8px;border-radius:50%;background:var(--success);}
@media(max-width:980px){ .fed-screen .editor2-body{grid-template-columns:1fr;display:flex;flex-direction:column;} .fed-screen .editor2-rail{flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--border);} .fed-screen .e2-tab{flex:none;white-space:nowrap;} .fed-screen .e2-tab.active::before{display:none;} }

/* E6 mobile CapCut layout for the Form editor (matches the Landing editor): preview on top, fields scroll, rail = bottom toolbar. Verified live at 360px. */
@media(max-width:860px){
 #formBuilderModal .editor2-body{flex-direction:column!important;height:100%!important;overflow:hidden!important;}
 #formBuilderModal .editor2-body>.e2-preview{order:1!important;height:34vh!important;min-height:180px!important;flex:0 0 auto!important;overflow:auto!important;border-bottom:1px solid var(--border)!important;}
 #formBuilderModal .editor2-body>.e2-panel{order:2!important;flex:1 1 auto!important;overflow-y:auto!important;min-height:0!important;-webkit-overflow-scrolling:touch;}
 #formBuilderModal .editor2-body>.editor2-rail{order:3!important;flex:0 0 auto!important;flex-direction:row!important;flex-wrap:nowrap!important;overflow-x:auto!important;height:56px!important;position:sticky;bottom:0;background:var(--surface-1)!important;border-top:1px solid var(--border)!important;border-bottom:none!important;z-index:5;}
}

.mobile-tabbar{display:none;}
@media(max-width:768px){
  .mobile-tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--surface-1);border-top:1px solid var(--border);padding:6px 4px;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px));box-shadow:0 -6px 20px rgba(0,0,0,.28);}
  .mobile-tabbar .mtab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:none;border:none;color:var(--text-3,#6B7488);font-size:10px;font-weight:600;font-family:inherit;cursor:pointer;padding:5px 2px;border-radius:10px;-webkit-tap-highlight-color:transparent;}
  .mobile-tabbar .mtab svg{width:22px;height:22px;}
  .mobile-tabbar .mtab.active{color:var(--brand-cyan);}
  .main{padding-bottom:74px!important;}
  .tab-pane{padding-bottom:90px!important;}
}
.rail-head{position:relative;}
.rail-bell{margin-left:auto;width:34px;height:34px;border-radius:var(--r-md);display:grid;place-items:center;color:var(--text-2);background:none;border:none;cursor:pointer;position:relative;flex:none;transition:color .15s,background .15s;}
.rail-bell:hover{color:var(--text-1);background:var(--surface-2);}
.rail-bell svg{width:19px;height:19px;}
.notif-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--danger,#F2545B);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;}
.app-layout.rail-collapsed .rail-bell{display:none;}
.notif-panel{display:none;position:absolute;left:14px;right:14px;top:118px;z-index:120;background:var(--surface-2);border:1px solid var(--border-strong,var(--border));border-radius:var(--r-lg);box-shadow:0 20px 50px rgba(0,0,0,.5);max-height:420px;overflow-y:auto;}
.notif-panel.open{display:block;}
.np-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-3);border-bottom:1px solid var(--border);}
.np-head button{background:none;border:none;color:var(--brand-cyan);font-size:11px;font-weight:600;cursor:pointer;text-transform:none;letter-spacing:0;}
.np-item{display:flex;gap:10px;width:100%;text-align:left;padding:11px 14px;background:none;border:none;border-bottom:1px solid var(--border);cursor:pointer;color:var(--text-1);font-family:inherit;}
.np-item:hover{background:var(--surface-3);}
.np-item.unread{background:rgba(43,208,197,.06);}
.np-dot{width:8px;height:8px;border-radius:50%;flex:none;margin-top:5px;background:var(--text-3);}
.np-dot.win{background:var(--success,#2BD66F);}.np-dot.warn{background:var(--warning,#F5B642);}.np-dot.info{background:var(--brand-cyan);}
.np-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.np-tx b{font-size:13px;font-weight:600;}
.np-tx span{font-size:11.5px;color:var(--text-2);line-height:1.4;}
.np-tx i{font-size:10.5px;color:var(--text-3);font-style:normal;}
.np-empty{padding:20px 14px;font-size:12.5px;color:var(--text-3);text-align:center;}
/* ===== Setup + shared sections -> reskin cards ===== */
.section{background:var(--surface-1)!important;border:1px solid var(--border)!important;border-radius:var(--r-lg)!important;}
.section-head{padding:16px 20px!important;border-bottom:1px solid var(--border)!important;}
.section-title{font-family:var(--font-head)!important;font-weight:700!important;font-size:15px!important;letter-spacing:-.2px;color:var(--text-1)!important;}
.section-desc{color:var(--text-2)!important;}
.section-body{padding:20px!important;}
.settings-row{border-bottom:1px solid var(--border)!important;}
.settings-name{font-family:var(--font-head)!important;font-weight:600!important;color:var(--text-1)!important;}
.settings-desc{color:var(--text-2)!important;}
/* legacy aliases used in Studio/setup chrome -> tokens */
.btn-sm{border-radius:var(--r-sm)!important;}
/* ===== Pipeline kanban -> reference column treatment ===== */
.pipe-board{grid-template-columns:repeat(5,minmax(210px,1fr))!important;gap:16px!important;}
.pipe-col{background:var(--surface-1)!important;border:1px solid var(--border)!important;border-radius:var(--r-lg)!important;padding:12px!important;min-height:150px;}
.pipe-col.drag-over{border-color:var(--brand-cyan)!important;background:var(--surface-2)!important;box-shadow:inset 0 0 0 1px var(--brand-cyan);}
.pipe-col-head{display:flex!important;align-items:center;gap:8px;font-family:var(--font-head)!important;font-weight:700!important;font-size:12.5px!important;letter-spacing:.5px;text-transform:uppercase;color:var(--text-2)!important;border-bottom:none!important;padding:2px 2px 12px!important;margin-bottom:2px!important;}
.pipe-col-head::before{content:"";width:9px;height:9px;border-radius:50%;flex:none;background:var(--text-3,#6B7488);}
.pipe-col-head > span:last-child{margin-left:auto;font-size:11px;font-weight:700;color:var(--text-3,#6B7488);background:var(--surface-2)!important;padding:1px 9px;border-radius:var(--r-pill);text-transform:none;letter-spacing:0;}
.pipe-col[data-stage="New"] .pipe-col-head::before{background:var(--st-new);}
.pipe-col[data-stage="Engaged"] .pipe-col-head::before{background:var(--st-contacted);}
.pipe-col[data-stage="Booked"] .pipe-col-head::before{background:var(--st-booked);}
.pipe-col[data-stage="Won"] .pipe-col-head::before{background:var(--st-won);}
.pipe-col[data-stage="Lost"] .pipe-col-head::before{background:var(--st-lost);}
.lead-card{background:var(--surface-2)!important;border:1px solid var(--border)!important;border-radius:var(--r-md)!important;padding:12px 13px!important;}
.lead-card:hover{border-color:var(--border-strong)!important;transform:translateY(-2px);}
/* UI-B: clean, on-brand multi-select control on pipeline cards (no raw OS checkbox) */
.pipe-sel{appearance:none;-webkit-appearance:none;width:16px!important;height:16px!important;border:1.5px solid var(--border-strong,#3a3a48);border-radius:5px;background:var(--surface-1,#12151d);cursor:pointer;position:relative;transition:border-color .12s,background .12s;flex:none;}
.pipe-sel:hover{border-color:var(--brand-cyan,#2BD0C5);}
.pipe-sel:checked{background:var(--brand-cyan,#2BD0C5);border-color:var(--brand-cyan,#2BD0C5);}
.pipe-sel:checked::after{content:"";position:absolute;left:4.5px;top:1px;width:4px;height:8px;border:solid #0b1020;border-width:0 2px 2px 0;transform:rotate(45deg);}
/* status chips: leading dot, matching the reference .chip treatment */
.status-chip::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:6px;vertical-align:1px;}
/* ===== Landing editor -> full-screen (reference) ===== */
#lpEditorModal.modal-overlay{padding:0!important;align-items:stretch!important;justify-content:stretch!important;}
.lp-rail{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;background:var(--surface-1)!important;border-right:1px solid var(--border);overflow-y:auto;}
.lp-rail .lp-tab{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:66px;height:62px;padding:7px 4px;border-radius:11px!important;border:none!important;background:none!important;color:var(--text-2)!important;font-size:9.5px!important;font-weight:600;line-height:1.15;text-align:center;cursor:pointer;font-family:inherit;}
.lp-rail .lp-tab svg{width:20px;height:20px;flex:none;}
.lp-rail .lp-tab:hover{background:var(--surface-2)!important;color:var(--text-1)!important;}
.lp-rail .lp-tab.on{background:var(--gradient-brand-soft)!important;color:var(--text-1)!important;box-shadow:none!important;}
@media(max-width:860px){ #lpEditorModal .lp-builder-body{grid-template-columns:1fr!important;} .lp-rail{flex-direction:row;border-right:none;border-bottom:1px solid var(--border);overflow-x:auto;} }
/* E6 mobile CapCut layout for the Landing editor: preview on top, controls scroll, tab rail = bottom toolbar. Verified live at 360px. */
@media(max-width:860px){
 #lpEditorModal .modal.lp-builder .lp-builder-body{display:flex!important;flex-direction:column!important;height:100%!important;overflow:hidden!important;}
 #lpEditorModal .modal.lp-builder .lp-builder-body>div:last-child{display:block!important;order:1!important;height:38vh!important;min-height:200px!important;flex:0 0 auto!important;border-bottom:1px solid var(--border)!important;overflow:hidden!important;background:#0b0b10;}
 #lpEditorModal .modal.lp-builder .lp-builder-body>div:last-child iframe{width:100%!important;height:100%!important;border:0!important;}
 #lpEditorModal .modal.lp-builder .lp-builder-body>div:nth-child(2){order:2!important;flex:1 1 auto!important;overflow-y:auto!important;min-height:0!important;-webkit-overflow-scrolling:touch;}
 #lpEditorModal .modal.lp-builder .lp-builder-body>nav.lp-rail{order:3!important;flex:0 0 auto!important;flex-direction:row!important;flex-wrap:nowrap!important;overflow-x:auto!important;height:60px!important;border-top:1px solid var(--border)!important;border-bottom:none!important;position:sticky;bottom:0;background:var(--surface-1)!important;z-index:5;}
 #lpEditorModal .modal.lp-builder .lp-builder-body>nav.lp-rail .lp-tab{flex:0 0 auto!important;}
}
#lpEditorModal .modal.lp-builder{max-width:100%!important;width:100vw!important;height:100vh!important;max-height:100vh!important;border-radius:0!important;border:none!important;}
#lpEditorModal .modal-header{background:var(--surface-1);}
#lpEditorModal .modal-header h3{font-family:var(--font-head);font-weight:800;}
/* Landing editor left config tabs -> pill row already; keep on-system */
#lpEditorModal .lp-tab.on{background:var(--gradient-brand-soft)!important;border-color:var(--border-strong)!important;color:var(--text)!important;}

/* ===== Collapsible rail ===== */
.rail-collapse{width:34px;height:34px;margin:-4px 0 0 4px;border-radius:var(--r-md);display:grid;place-items:center;color:var(--text-3);background:none;border:1px solid var(--border);cursor:pointer;flex:none;transition:background .16s,color .16s,border-color .16s;}
.rail-collapse:hover{background:var(--surface-2);color:var(--text-1);} .rail-collapse svg{width:18px;height:18px;}
.app-layout.rail-collapsed .rail{width:68px;padding:16px 10px;}
.app-layout.rail-collapsed .rail-collapse{margin:-4px auto 0;}
.app-layout.rail-collapsed .tab-pane{max-width:1800px;}
.app-layout.rail-collapsed .main > #forgeViewHead{max-width:1800px;}
.main{transition:none;}
.app-layout.rail-collapsed .rail-head{justify-content:center;gap:0;}
.app-layout.rail-collapsed .brand-name,.app-layout.rail-collapsed .meter-wrap,.app-layout.rail-collapsed .rail .nav-item .label,.app-layout.rail-collapsed .rail .nav-item .count,.app-layout.rail-collapsed .refer > div,.app-layout.rail-collapsed .refer .chev,.app-layout.rail-collapsed .acct-btn .label,.app-layout.rail-collapsed .nav-section{display:none!important;}
.app-layout.rail-collapsed .rail .nav-item,.app-layout.rail-collapsed .refer,.app-layout.rail-collapsed .acct-btn{justify-content:center;padding:11px 0;}
.app-layout.rail-collapsed .rail-head{justify-content:center;}
/* Multi-company switcher: adapt to the collapsed 68px rail (icon-only + flyout menu) so it never breaks the menu. */
.app-layout.rail-collapsed .org-switch{padding:0 10px 8px;position:relative;}
.app-layout.rail-collapsed #orgCurrentName{display:none!important;}
.app-layout.rail-collapsed #orgSwitchBtn{justify-content:center;padding:9px 0;}
.app-layout.rail-collapsed #orgSwitchBtn > svg:last-of-type{display:none;}
/* P8: the open flyout is positioned FIXED by _orgToggleMenu when the rail is collapsed (the rail's
   overflow:hidden clipped the old absolute flyout into an unclickable sliver). */
.app-layout.rail-collapsed #orgMenu{min-width:212px;}
.app-layout.rail-collapsed #orgSwitchBtn{width:44px;margin:0 auto;}
.app-layout.rail-collapsed .rail-collapse{margin-left:0;}
.acct{position:relative;}
.app-layout.rail-collapsed .acct-menu{position:fixed;left:74px;bottom:16px;width:210px;z-index:300;box-shadow:0 18px 50px rgba(0,0,0,.55);background:var(--surface-2);border:1px solid var(--border-strong,var(--border));}
.app-layout.rail-collapsed .acct-menu .acct-btn{justify-content:flex-start;padding:9px 12px;}
.app-layout.rail-collapsed .acct-menu .acct-btn .label{display:inline!important;}
.app-layout.rail-collapsed .acct-row > .acct-btn{position:relative;}
.app-layout.rail-collapsed .acct-row > .acct-btn > svg:last-child{display:none!important;}
/* ===== Reference switch toggle ===== */
.fswitch{width:42px;height:24px;border-radius:var(--r-pill);background:var(--surface-3);position:relative;flex:none;transition:background var(--dur);display:inline-block;cursor:pointer;border:none;padding:0;}
.fswitch.on{background:var(--brand-blue);}
.fswitch i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left var(--dur);}
.fswitch.on i{left:21px;}
.fswitch:disabled{opacity:.5;cursor:not-allowed;}
.swatch-pick{display:flex;flex-wrap:wrap;gap:8px;}
.swatch-pick .sw{width:30px;height:30px;border-radius:8px;border:2px solid var(--border-strong);cursor:pointer;}
.swatch-pick .sw.on{border-color:#fff;box-shadow:0 0 0 2px var(--brand-cyan);}
.seg-toggle{display:flex;background:var(--surface-3);border-radius:var(--r-md);padding:3px;max-width:240px;}
.seg-toggle button{flex:1;padding:8px;border-radius:var(--r-sm);font-size:13px;font-weight:600;color:var(--text-2);background:none;border:none;cursor:pointer;}
.seg-toggle button.active{background:var(--brand-blue);color:#fff;}

/* =====================================================================
   MOB-UI: mobile consistency sweep (phones, 360-480px). Additive only.
   Every rule below is inside a max-width media query, so DESKTOP IS
   UNCHANGED. Goal: one gutter, one heading rhythm, one button behaviour,
   no clipped text, no centred-by-accident section heads.
   ===================================================================== */

/* 1. Section heads. The legacy mobile rule stacks .section-head into a
   column but the base rule still says align-items:center, so on every
   phone the title AND its buttons were being centred while the rest of
   the screen stayed left aligned. Force a deterministic left-aligned
   stack so all cards read the same way. */
@media(max-width:768px){
  .section-head{flex-direction:column!important;align-items:flex-start!important;}
  .section-head > *{max-width:100%;min-width:0;}
}

/* 2. Sub-nav pill strips (Posts / Create / Boost / My Brand / Owner console).
   They scroll horizontally, which is correct, but #forgeSubnav ran flush to
   the right edge of the screen so the last tab looked cut off by the phone
   rather than by a scroller. Give every strip the same 18px gutter as the
   heading above it, hide the scrollbar and tighten the pills so fewer of
   them need scrolling at all. The active pill is scrolled into view by
   _forgeRailSync so it is never half-hidden on load. */
@media(max-width:768px){
  #forgeSubnav.subnav{margin-left:18px!important;margin-right:18px!important;max-width:calc(100% - 36px)!important;}
  #forgeSubnav.subnav,#ownerSubnav.subnav,.pill-subnav{scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain;}
  #forgeSubnav.subnav::-webkit-scrollbar,#ownerSubnav.subnav::-webkit-scrollbar,.pill-subnav::-webkit-scrollbar{display:none;}
  #forgeSubnav.subnav button,#ownerSubnav.subnav .help-menu-btn,.pill-subnav .help-menu-btn,.pill-subnav button{padding:9px 15px!important;font-size:12.5px!important;scroll-snap-align:start;}
  #forgeSubnav.subnav,#ownerSubnav.subnav,.pill-subnav{scroll-snap-type:x proximity;scroll-padding-left:4px;}
}

/* 3. One gutter. Below 480px the pane dropped to 12px while the view head
   and sub-nav stayed at 18px, so headings sat 6px further in than the
   cards underneath them. Everything is 18px now. */
@media(max-width:480px){
  .tab-pane{padding-left:18px!important;padding-right:18px!important;}
}

/* 4. View-head actions. On a phone the header buttons wrapped to a ragged
   second line. Let them share the row and fill it, so they always look
   deliberate whether there are one, two or three of them. */
@media(max-width:520px){
  .view-head .vh-actions{width:100%;}
  .view-head .vh-actions > button{flex:1 1 auto;min-width:132px;}
}

/* 5. Modals and composers (Email N leads, lead card, connection dialogs).
   24px of overlay padding plus 28px of modal padding left barely 240px of
   usable width at 360px, which is what made the composer feel cramped.
   The three full-screen editors already pin their own overlay padding to
   0 with an id selector, so they are unaffected. */
@media(max-width:640px){
  .modal-overlay{padding:12px!important;}
  .modal-overlay:not(#lpEditorModal):not(#formBuilderModal) > .modal{padding:20px!important;max-height:92vh!important;}
  .modal-header{gap:12px;margin-bottom:16px!important;align-items:flex-start;}
  .modal-header h3,.modal-title{font-size:16px!important;line-height:1.3;min-width:0;overflow-wrap:anywhere;}
  .modal-close{flex:none;margin-top:-2px;}
  .modal-footer{flex-wrap:wrap;}
  .modal-footer > button{flex:1 1 auto;min-width:130px;}
}

/* 6. Boost > Today's leads. P8: rows now use the shared .boost-lead flex-column skeleton, which
   stacks naturally on mobile - the old 58px/1fr/150px grid overrides are gone with the grid. */
@media(max-width:640px){
  .pr-lead-row{padding:16px 18px!important;}
  .pr-lead-row .boost-cta > .btn-primary,.pr-lead-row .boost-cta > .btn-secondary{flex:1 1 40%;}
}

/* 7. My Brand > Offers. The two-column product grid put the URL label
   directly under the floating remove (x) button, and the Price / Stripe
   pair squeezed a 120px column against a link field. Single column on a
   phone, with head room reserved for the remove button. */
@media(max-width:640px){
  .product-row{grid-template-columns:1fr!important;padding-top:34px!important;}
  .product-pricerow{grid-template-columns:1fr!important;}
}

/* 8. Settings rows kept a 24px desktop gap between the copy and the
   toggle, which pushed long labels into an early wrap. */
@media(max-width:640px){
  .settings-row{gap:14px!important;}
  .settings-info{min-width:0;}
}

/* 9. Pipeline board. A later reskin rule re-declared the column width with
   !important, which silently killed the existing narrow-screen override,
   so phones were still laying out 210px columns. Restore the intended
   narrower columns at the same breakpoint. */
@media(max-width:900px){
  .pipe-board{grid-template-columns:repeat(5,minmax(164px,1fr))!important;gap:10px!important;}
}

/* 10. Long unbroken strings (emails, urls, business names) must not push a
   card wider than the screen. */
@media(max-width:640px){
  .lead-card,.post-card-body,.settings-desc,.section-desc,.account-handle{overflow-wrap:anywhere;}
}