/* sc-ui-v2 (SC-N331) - portal consistency layer. Loads last on every page.
   One primary colour, one panel surface, one section rhythm, one way code and tabs behave on a phone.
   Uses the Evidence Ledger tokens from sc-brand.css (--bg0/1/2, --line, --ink/2/3, --accent), so the
   light theme keeps working through [data-theme="light"]. */

:root{
  --sc-primary:#1b76b1;            /* the marketing site's button blue */
  --sc-primary-hover:#2385c4;
  --sc-primary-ink:#ffffff;
  --sc-radius:8px;
  --sc-gap-section:28px;
}
[data-theme="light"]{ --sc-primary:#1b6aa0; --sc-primary-hover:#1b76b1; }

/* ---------- 1. Buttons: one primary, quiet secondaries, gold only where a page has a single money action ---------- */
.btn-primary,
button.btn-primary,
a.btn.btn-primary{
  background:var(--sc-primary)!important;background-image:none!important;
  border:1px solid var(--sc-primary)!important;color:var(--sc-primary-ink)!important;box-shadow:none!important;
}
.btn-primary:hover:not(:disabled),
a.btn.btn-primary:hover:not(:disabled){background:var(--sc-primary-hover)!important;border-color:var(--sc-primary-hover)!important;filter:none!important}
.btn-primary:focus-visible,.btn-ghost:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sc-btn-danger-quiet:hover{color:var(--red,#f87171)!important;border-color:color-mix(in srgb,var(--red,#f87171) 45%,transparent)!important}

/* ---------- 2. One panel surface: passkeys / push / SMS cards match .card ---------- */
.scs-stack{max-width:none!important;margin-top:0!important;gap:14px}
.scs-card,.scp-card{
  background:var(--bg1)!important;border:1px solid var(--line)!important;border-radius:var(--sc-radius)!important;
  max-width:none!important;padding:18px 20px;
}
.scs-card h3,.scp-card h3{color:var(--ink);font-size:.95rem}
.scs-sub,.scp-sub{color:var(--ink2)}
.scs-ico{background:var(--bg2);color:var(--accent);border:1px solid var(--line)}
.scs-item{background:var(--bg0);border-color:var(--line)}
#sc-phone{margin-top:14px}
#sc-phone:empty,#sc-secure:empty{display:none}
.card{border-radius:var(--sc-radius)}

/* ---------- 3. Section rhythm: every page uses the same label + spacing ---------- */
.page-content > .sc-section,
.page-content > section.sc-section,
#vault-root > .sc-section,
#dash-root > .sc-section{margin-top:var(--sc-gap-section)}
.sc-section__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.sc-section__head .sc-section__title{flex:1 1 auto;min-width:0}
.sc-sec-label{
  font-family:var(--mono,'Geist Mono',monospace);font-size:.72rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink3);display:flex;align-items:center;gap:10px;
}
.sc-sec-label::after{content:"";flex:1;height:1px;background:var(--line)}
.sc-section__sub{font-size:.76rem;color:var(--ink2)}

/* ---------- 4. Account page ---------- */
.sc-acct-addons:has(#sc-addons > .sca-muted:only-child){display:none}
.sc-acct-signin:not(:has(.scs-card,.scp-card,.scp-row)){display:none}
.sc-meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}

/* ---------- 5. Vault: first visit shows only what gets the first backup done ---------- */
body.sc-firstrun :is(.sc-after-first,#onboard-strip,#sc-upg-card,#sc-evidence,#sc-cleanup,.sc-upg-strip){display:none!important}
.sc-status.is-pending{
  color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
}
.sc-token[data-act="revealToken"]{border-color:var(--line)!important}
.sc-token[data-act="revealToken"] .sc-token__value{color:var(--accent)!important}
.sc-token[data-act="revealToken"] .sc-token__label i{color:var(--accent)!important}
.sc-tier-ribbon__cta i{margin-left:4px}

/* ---------- 6. Code, tabs and chat on small screens ---------- */
.code-block,.sc-token__value,pre{max-width:100%}
.code-block{white-space:pre;overflow-x:auto;word-break:normal!important;overflow-wrap:normal!important;-webkit-overflow-scrolling:touch}
.sc-tabbar{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sc-tabbar::-webkit-scrollbar{display:none}
.sc-tabbar .sc-tab{flex:0 0 auto;white-space:nowrap}
.sc-token__value{overflow-wrap:anywhere}

@media (max-width:640px){
  .page-content{padding-bottom:88px}
  #sc-chat-widget #sc-chat-bubble,#sc-chat-bubble{width:46px!important;height:46px!important;right:14px!important;bottom:calc(14px + env(safe-area-inset-bottom,0px))!important}
  .card{padding:14px}
  .card .card{padding:12px}
  .sc-step{gap:10px}
  .sc-tier-ribbon{flex-wrap:wrap;row-gap:8px}
  .sc-tier-ribbon__cta{margin-left:0!important}
  .scs-card,.scp-card{padding:14px}
}

/* ---------- 7. Forms: selects match inputs in both themes ---------- */
select{background-color:var(--bg2)!important;border:1px solid var(--line)!important;color:var(--ink)!important}
select option{background-color:var(--bg1);color:var(--ink)}

/* ---------- 8. First-backup / activation panel on the shared surface, accent instead of gold ---------- */
.sc-act{background:var(--bg1)!important;border:1px solid var(--line)!important;border-left:3px solid var(--accent)!important;border-radius:var(--sc-radius)!important}
.sc-act--ok{border-left-color:var(--green,#34d399)!important}
.sc-act--hot{border-left-color:var(--red,#f87171)!important}
.sc-act--paused{border-left-color:var(--ink3)!important}
.sc-act--first .sc-act__icon,.sc-act--up .sc-act__icon{background:var(--bg2);color:var(--accent);border:1px solid var(--line)}
.sc-act__hint a{color:var(--accent)}
.sc-act__steps li.is-now span{border-color:var(--accent);color:var(--accent)}
.sc-act__dot{background:var(--accent)}
.sc-act__cmd{background:var(--bg0);border-color:var(--line)}
.sc-act__meter{background:var(--bg2)}
.sc-act__meter span{background:var(--accent)}
.sc-act__msg{color:var(--ink2)}

/* ---------- 9. Vault: setup steps folded once backups exist ---------- */
.sc-qs-fold > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:14px 18px;
  background:var(--bg1);border:1px solid var(--line);border-radius:var(--sc-radius);color:var(--ink2);font-size:.88rem;
}
.sc-qs-fold > summary::-webkit-details-marker{display:none}
.sc-qs-fold > summary:hover{color:var(--ink);border-color:var(--line-strong)}
.sc-qs-fold > summary i{color:var(--accent);font-size:.8rem;transition:transform .15s}
.sc-qs-fold[open] > summary{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:transparent}
.sc-qs-fold[open] > summary i{transform:rotate(45deg)}
.sc-qs-fold[open] > .card{border-top-left-radius:0;border-top-right-radius:0}

/* ---------- 10. Utilities ---------- */
[hidden]{display:none!important}
.page-content .card .empty{padding-block:26px}
.page-content .card .empty .empty-icon{margin-bottom:10px}

/* ---------- 11. Review pass (SC-N331 audit) ---------- */
body.sc-firstrun .sc-vault-actions{display:none!important}
.sc-status.is-pending::before{background:var(--accent)!important;box-shadow:none!important}
.sc-upg__eyebrow i{color:var(--ink3)!important}
@media (min-width:641px){ .sc-upg-cmp{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))!important} }
.profile-field input,.profile-field select{width:100%;min-width:0;box-sizing:border-box}
#sc-chat-widget #sc-chat-bubble{background:var(--sc-primary)!important;color:#fff!important}

.sc-setup-fold{margin-top:var(--sc-gap-section)}
.sc-setup-fold > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:14px 18px;
  background:var(--bg1);border:1px solid var(--line);border-radius:var(--sc-radius);color:var(--ink2);font-size:.88rem;
}
.sc-setup-fold > summary::-webkit-details-marker{display:none}
.sc-setup-fold > summary:hover{color:var(--ink);border-color:var(--line-strong)}
.sc-setup-fold > summary i{color:var(--accent);font-size:.8rem;transition:transform .15s}
.sc-setup-fold[open] > summary i{transform:rotate(45deg)}
.sc-setup-fold > .sc-section:first-of-type{margin-top:18px}

/* sidebar: everything fits a 900px-tall screen, footer stays in view */
.sidebar .nav-section{margin-top:12px!important;margin-bottom:2px!important;padding-top:0!important}
.sidebar .nav-item{padding-top:7px!important;padding-bottom:7px!important}

/* phones */
@media (max-width:640px){
  .portal-layout .srv-row{flex-wrap:wrap;row-gap:8px}
  .portal-layout .srv-row__main{flex:1 1 calc(100% - 60px);min-width:0}
  .portal-layout .srv-row__meta{flex:1 1 100%;justify-content:flex-start;padding-left:52px}
  .portal-layout .srv-row__sub{overflow-wrap:anywhere}
  #vault-root .card .card,#vault-root .sc-section > .card > .card{border:0;background:transparent;padding:0}
  .code-block{padding-right:18px}
  .sc-tabbar{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .sc-upg-cmp__cell .sc-label{white-space:nowrap;font-size:.62rem}
}
.sc-session__meta,.sc-session__device{overflow-wrap:break-word;word-break:normal}
@media (min-width:901px){
  .sidebar{display:flex!important;flex-direction:column!important;overflow:hidden!important}
  .sidebar-logo{flex:none}
  .sidebar-nav{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;scrollbar-width:thin}
  .sidebar-user{flex:none!important}
}

/* sc-n409-portal-visual-v1 */
/* SC-N409 portal visual pass. Appended to the shared stylesheet that loads last on every portal page.
   Selector based, existing tokens only (--bg0/1/2, --line, --line-strong, --ink/2/3, --accent, --sc-primary), so the
   light theme follows. Rules that must beat the <style> blocks sc-pbs.js / sc-borg.js inject at runtime are scoped
   under .portal-layout. Sections: 1 tokens, 2 frame and wide screens, 3 type scale, 4 cards, 5 stat tiles,
   6 buttons, 7 code, 8 progress, 9 status chips, 10 sidebar, 11 phones. */

/* ---------- 1. Tokens ---------- */
:root{
  --n9-r:10px;
  --n9-r-ctl:8px;
  --n9-surface:color-mix(in srgb,var(--ink,#e8ecf2) 3%,var(--bg1,#0b0e13));
  --n9-tile:color-mix(in srgb,var(--ink,#e8ecf2) 2.5%,var(--bg0,#07090c));
  --n9-btn2:color-mix(in srgb,var(--ink,#e8ecf2) 6%,var(--bg1,#0b0e13));
  --n9-btn2-hover:color-mix(in srgb,var(--ink,#e8ecf2) 11%,var(--bg1,#0b0e13));
  --n9-btn2-bd:color-mix(in srgb,var(--ink,#e8ecf2) 17%,transparent);
  --n9-label:12px;
  --n9-body:15px;
  --n9-z:1;
}
/* dark theme only: the muted ink (#5c6673) measured 3.1:1 on panels; lifted to about 5:1 */
:root:not([data-theme="light"]){--ink3:#7b8696}

/* ---------- 2. Frame: fluid column up to 1320px, centred; large monitors scale like browser zoom ---------- */
.portal-layout .page-wrap .page-content,
html.sc-compact .portal-layout .page-wrap .page-content{
  max-width:1320px;
  margin-inline:auto;
}
@media (min-width:769px) and (max-width:1100px){
  .portal-layout .page-wrap .page-content,
  html.sc-compact .portal-layout .page-wrap .page-content{padding-left:28px!important;padding-right:28px!important}
}
/* >= 1600px: the whole portal grows together (type, cards, sidebar), the way browser zoom does. Consoles (noVNC,
   serial) are appended to <body>, outside .portal-layout, so their pointer maths is never zoomed. */
@media (min-width:1600px){:root{--n9-z:1.08}}
@media (min-width:1840px){:root{--n9-z:1.15}}
@media (min-width:2160px){:root{--n9-z:1.25}}
@media (min-width:2480px){:root{--n9-z:1.33}}
@media (min-width:3000px){:root{--n9-z:1.5}}
@media (min-width:1600px){
  .portal-layout{zoom:var(--n9-z);min-height:calc(100vh / var(--n9-z))}
  .portal-layout .sidebar{height:auto;bottom:0}
  .portal-layout .page-wrap{min-height:calc(100vh / var(--n9-z))}
  /* dialogs that live outside .portal-layout scale with it (the noVNC / serial consoles do not) */
  body > :is(.modal-backdrop,.sc-modal,.scv-modal){zoom:var(--n9-z)}
  :is(.portal-layout,body > .modal-backdrop,body > .sc-modal) :is(.modal-box,.sc-modal__panel){max-height:calc((100vh - 40px) / var(--n9-z))}
  body > .scv-modal{max-height:calc((100vh - 40px) / var(--n9-z))}
}

/* ---------- 3. Type scale: body 15px, labels 12px caps, meta 13px, values 15-18px ---------- */
.portal-layout .page-content{font-size:var(--n9-body)}
.portal-layout .page-content :is(p,.pbs-note,.bg-note,.sc-step__hint,.sc-help,.sc-help-sm,.sc-hint,.data-row-desc,
  .sc-callout,.dm-note,.sc-section__sub,.card-sub,.sbg-foot,.sc-server-strip__sub,.sc-stat__note){
  font-size:15px;line-height:1.6;
}
.portal-layout .page-content :is(.pbs-note,.bg-note,.sc-step__hint,.sc-help,.sc-help-sm,.sc-hint,.sc-section__sub,
  .sc-action__sub,.sc-pref-row__desc,.form-hint,.sc-vital__sub,.sc-profile-email){color:var(--ink2)}
.portal-layout .sc-greet__sub{font-size:15.5px;line-height:1.6;color:var(--ink2);max-width:72ch}
.portal-layout .sc-greet__title{font-size:clamp(1.6rem,1.2rem + 1vw,2.05rem);letter-spacing:-.015em}

/* labels: one eyebrow style */
.portal-layout :is(.sc-greet__hello,.sc-token__label,.sc-label,.sc-field-label,.sc-eyebrow,.sc-vital__head > span:first-child,
  .sc-invoice-header > div,.pbs-kv b,.bg-kv b,.info-tile-label,.sc-stat__head,.scv-eyebrow,.sc-section__title,.sc-sec-label){
  font-size:var(--n9-label);
  letter-spacing:.09em;
  text-transform:uppercase;
  font-weight:600;
}
.portal-layout :is(.sc-greet__hello,.sc-token__label,.sc-label,.sc-field-label,.sc-eyebrow,.sc-invoice-header > div,
  .pbs-kv b,.bg-kv b,.info-tile-label,.sc-stat__head){color:var(--ink2)}

/* chips and badges: 12px, one shape */
.portal-layout :is(.sc-vital__meta,.sc-vital__head > span,.badge,.sc-status,.sc-device__chip,.sc-pm-default-chip,.sc-tk-status,.sc-tk-prio,.sc-pref-lock,
  .pbs-pill,.bg-pill,.srv-row__plan,.sc-session__chip,.sbg-pill,.sc-tier-ribbon__chip,.sc-bill-save,.srv-status){
  font-size:12px;
  letter-spacing:.02em;
  line-height:1.3;
}
.portal-layout :is(.pbs-pill,.bg-pill){
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-weight:600;
  border-color:var(--line-strong);background:var(--n9-tile);
}

/* secondary / meta lines: never below 13px */
.portal-layout :is(.sc-snap__meta,.sc-device__meta,.sc-pm-exp,.sc-pm-brand,.srv-row__renew,.sc-ticket__meta-item,
  .sc-session__meta,.sc-vital__unit,.sc-vital__meta,.sc-vital__sub,.sc-action__sub,.srv-row__sub,.srv-row__specs,
  .sc-pref-row__desc,.form-hint,.sc-annual-note,.sc-stat__note,.sbg-year,.scs-meta,.sc-server-strip__sub,.scv-mono,
  .sc-snap__expiry span,.sc-pref-num__unit,.dm-tld,.dm-tlds .lbl,.pbs-field__head,.bg-field__head,.sbg-blurb,
  .sc-hero__stat,.form-label,.sc-pm-btn,.sc-invoice-pdf,.profile-field > span,.mono.text-muted,.bg-hk,.dep-price span){
  font-size:13px;
}
.portal-layout .page-content :is(code:not(.code-block code)){font-size:.92em}
.portal-layout .user-plan{font-size:12px}
.portal-layout .sc-bill-toggle .sc-bill-save{font-size:12px}
/* these carry inline or id-scoped sizes (10-11.8px), so the floor needs !important */
.portal-layout :is(.sc-section__title > span,.sc-section__head > span,.sc-snap__expiry span,.summary-row span,.sc2-plan-kind,
  .method-tile-badge,.sc-bill-save,.sc2-on span){font-size:12.5px!important}
.portal-layout .user-name{font-size:13.5px}

/* ---------- 4. Cards: one surface, clear title, comfortable padding ---------- */
.portal-layout .page-content .card:not(.sc-hero):not(:has(.sc-greet__title,.sc-profile-hero)){border-radius:var(--n9-r)}
@media (min-width:769px){
  .portal-layout .page-content .card:not(.sc-hero):not(.sc-server-strip):not(.sc-action):not(:has(.sc-greet__title,.sc-profile-hero)){padding:24px}
  .portal-layout .page-content .card .card{padding:18px}
}
.portal-layout .card-title{font-size:15.5px;line-height:22px;font-weight:650;letter-spacing:-.005em}
.portal-layout .card-title > i:first-child{opacity:.85}
.portal-layout :is(.pbs-top,.bg-top){gap:10px;padding-bottom:16px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.portal-layout :is(.pbs-top h3,.bg-top h3){font-size:1.2rem;font-weight:700;letter-spacing:-.01em;margin-right:4px}
.portal-layout :is(.pbs-card,.bg-card){margin-bottom:20px}
.portal-layout :is(.pbs-once,.bg-panel){border-radius:var(--n9-r);padding:18px 20px}
.portal-layout :is(.pbs-once h4,.bg-panel h4){font-size:15.5px;font-weight:650}
.portal-layout .sc-section__title{color:var(--ink2)}

/* ---------- 5. Stat tiles: 4 / 2 / 1 columns, label above a readable value ---------- */
.portal-layout :is(.pbs-grid,.bg-grid){
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0 16px;
}
.portal-layout .bg-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1180px){.portal-layout :is(.pbs-grid,.bg-grid){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.portal-layout :is(.pbs-grid,.bg-grid){grid-template-columns:minmax(0,1fr)}}
.portal-layout :is(.pbs-kv,.bg-kv,.info-tile){
  background:var(--n9-tile);border:1px solid var(--line);border-radius:var(--n9-r-ctl);padding:14px 16px;min-width:0;
  font-size:16px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;
}
.portal-layout :is(.pbs-kv b,.bg-kv b){display:block;margin-bottom:8px}
.portal-layout :is(.pbs-kv code,.bg-kv code){font-size:15px;font-weight:500;color:var(--ink);line-height:1.45;overflow-wrap:anywhere;word-break:normal}
.portal-layout .info-tile-value{font-size:15.5px}
.portal-layout .sc-vital__value{font-variant-numeric:tabular-nums}

/* ---------- 6. Buttons: primary / secondary / ghost, visible disabled and busy states ---------- */
.portal-layout .btn{min-height:40px;font-size:14px;border-radius:var(--n9-r-ctl);padding-left:16px;padding-right:16px;gap:8px;letter-spacing:0}
.portal-layout .btn-sm{min-height:36px;font-size:13.5px;padding-left:13px;padding-right:13px}
.portal-layout .btn-lg{min-height:46px;font-size:15px}
.portal-layout .btn i{font-size:.92em}
/* primary keeps sc-ui-v2's blue; adds an edge so it reads as the main action */
.portal-layout .btn-primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(0,0,0,.25)!important}
/* secondary (.btn-ghost is the portal's secondary button): filled, bordered, full-ink label */
.portal-layout .btn-ghost{
  background:var(--n9-btn2);border:1px solid var(--n9-btn2-bd);color:var(--ink);font-weight:600;
}
.portal-layout .btn-ghost:hover:not(:disabled){background:var(--n9-btn2-hover);border-color:color-mix(in srgb,var(--ink) 28%,transparent);color:var(--ink)}
.portal-layout .btn-ghost:active:not(:disabled){background:var(--n9-btn2-hover)}
/* ghost: utility buttons that sit beside content (copy, add a vault, view all) */
.portal-layout :is(.pbs-copy,.bg-copy,.code-copy,.srv-copy){
  background:transparent;border:1px solid transparent;color:var(--ink2);min-height:32px;font-weight:600;
}
.portal-layout :is(.pbs-copy,.bg-copy,.code-copy,.srv-copy):hover{background:var(--n9-btn2);border-color:var(--n9-btn2-bd);color:var(--ink)}
/* disabled: clearly unavailable, not just slightly faded */
.portal-layout :is(.btn,button):disabled,
.portal-layout .btn[disabled],
.portal-layout .btn[aria-disabled="true"]{
  opacity:1!important;filter:none;cursor:not-allowed;
  background:transparent!important;background-image:none!important;
  border:1px dashed var(--line-strong)!important;color:var(--ink3)!important;box-shadow:none!important;
}
/* busy: sc-busy.js marks the button whose request is running (.sc-is-busy) and centres a spinner over the label;
   the spinner moves to the icon slot so the label stays readable */
.portal-layout .btn.sc-is-busy,
.portal-layout .btn.sc-is-busy:disabled{
  border-style:solid!important;background:var(--n9-btn2)!important;color:var(--ink2)!important;padding-left:38px!important;
}
.portal-layout .btn.sc-is-busy > *{opacity:1}
.portal-layout .btn.sc-is-busy > i:first-child{display:none}
.portal-layout .btn.sc-is-busy::after{left:14px;margin-left:0;width:13px;height:13px;margin-top:-6.5px;color:var(--accent)}
.portal-layout :is(.pbs-actions,.bg-actions){gap:10px;margin-top:16px!important}
.portal-layout .btn:focus-visible,.portal-layout .nav-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- 7. Code blocks ---------- */
.portal-layout .page-content .code-block{
  font-size:13.5px;line-height:1.7;padding:16px 18px;border-radius:var(--n9-r-ctl);
  tab-size:4;
}
:root:not([data-theme="light"]) .portal-layout .page-content .code-block{background:var(--bg0);border:1px solid var(--line)}
.portal-layout :is(.pbs-field,.bg-field){margin-top:18px}
.portal-layout :is(.pbs-field__head,.bg-field__head){gap:12px;margin-bottom:8px;color:var(--ink2);line-height:1.45}
.portal-layout :is(.pbs-field__head,.bg-field__head) > span{min-width:0}
.portal-layout :is(.pbs-field__head,.bg-field__head) .btn{flex:0 0 auto}

/* ---------- 8. Progress bars: visible track, accent fill ---------- */
.portal-layout :is(.pbs-bar,.bg-bar,.progress-bar){
  height:8px;border-radius:99px;background:color-mix(in srgb,var(--ink) 12%,transparent);overflow:hidden;
}
.portal-layout :is(.pbs-bar,.bg-bar){margin-top:10px}
.portal-layout :is(.pbs-bar i,.bg-bar i){background:var(--accent);border-radius:99px;min-width:4px}

/* ---------- 9. Status lines: an inline chip while working, red on error, hidden when empty ---------- */
.portal-layout :is(.pbs-msg,.bg-msg):empty{display:none}
.portal-layout :is(.pbs-msg,.bg-msg):not(:empty):not(:has(*)){
  display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:8px 14px 8px 12px;
  border-radius:999px;font-size:13.5px;font-weight:600;line-height:1.35;
  color:var(--ink);background:color-mix(in srgb,var(--accent) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);
}
.portal-layout :is(.pbs-msg,.bg-msg):not(:empty):not(:has(*))::before{
  content:"";flex:0 0 auto;width:13px;height:13px;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--accent) 30%,transparent);border-top-color:var(--accent);
  animation:n9-spin .8s linear infinite;
}
.portal-layout :is(.pbs-msg,.bg-msg).err:not(:empty):not(:has(*)){
  color:#fca5a5;background:color-mix(in srgb,#ef4444 10%,transparent);border-color:color-mix(in srgb,#ef4444 45%,transparent);
}
.portal-layout :is(.pbs-msg,.bg-msg).err:not(:empty):not(:has(*))::before{
  animation:none;border:0;width:16px;height:16px;border-radius:50%;background:#ef4444;
  content:"!";color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;line-height:16px;text-align:center;
}
.portal-layout .bg-msg.ok:not(:empty):not(:has(*)){
  color:#6ee7b7;background:color-mix(in srgb,#34d399 10%,transparent);border-color:color-mix(in srgb,#34d399 40%,transparent);
}
.portal-layout .bg-msg.ok:not(:empty):not(:has(*))::before{animation:none;border:0;width:8px;height:8px;background:#34d399}
[data-theme="light"] .portal-layout :is(.pbs-msg,.bg-msg).err:not(:empty):not(:has(*)){color:#b91c1c}
[data-theme="light"] .portal-layout .bg-msg.ok:not(:empty):not(:has(*)){color:#047857}
.portal-layout :is(.pbs-msg,.bg-msg):has(*){display:block}

/* ---------- 10. Sidebar ---------- */
.portal-layout .sidebar .nav-item{font-size:14px;gap:12px;min-height:36px;color:var(--ink2)}
.portal-layout .sidebar .nav-item:hover{background:color-mix(in srgb,var(--ink) 5%,transparent);color:var(--ink)}
.portal-layout .sidebar .nav-item.active{
  background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--ink);font-weight:600;
  box-shadow:inset 3px 0 0 var(--accent);border-radius:var(--n9-r-ctl);
}
.portal-layout .sidebar .nav-item.active i{color:var(--accent)}
.portal-layout .sidebar .nav-item i{width:16px;text-align:center;opacity:.9}
.portal-layout .sidebar .nav-section{font-size:12px;letter-spacing:.14em;color:var(--ink3)}
.portal-layout .sidebar .nav-item.danger{color:#f87171}

/* ---------- 11. Phones and narrow tablets ---------- */
@media (max-width:768px){
  .portal-layout .page-content{font-size:15px}
  .portal-layout :is(.btn,.btn-sm,.btn-lg),
  .portal-layout :is(.plan-card,.sbg-card) .btn-full{min-height:44px}
  .portal-layout :is(.pbs-copy,.bg-copy,.code-copy){min-height:44px}
  .portal-layout .scs-icon-btn{width:44px;height:44px}
  .sc-theme-chip{min-width:44px;min-height:44px}
  .portal-layout #logo-link{display:inline-flex;align-items:center;min-height:44px}
  .portal-layout #notif-bell{min-width:44px;min-height:44px}
  .portal-layout :is(.srv-copy,.sc-pm-btn,.sc-invoice-pdf,.scm-btn,.sc-tab,.sc-bill-toggle button,.pp-tg button){min-height:44px}
  .portal-layout :is(.srv-copy){min-width:44px;justify-content:center}
  .portal-layout .page-content :is(input:not([type=checkbox]):not([type=radio]),select,textarea,.form-input){min-height:44px;font-size:16px}
  .portal-layout .sidebar .nav-item{min-height:44px}
  .portal-layout .burger{width:44px;height:44px;top:12px;left:12px}
  .portal-layout .page-wrap .page-content,
  html.sc-compact .portal-layout .page-wrap .page-content{padding-top:72px!important}
  .portal-layout :is(.pbs-actions,.bg-actions) > .btn{flex:1 1 auto}
  .portal-layout .page-content .code-block{font-size:13px;padding:14px}
  .portal-layout .page-content table:not(.sc-keep-table){display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .portal-layout :is(.pbs-kv,.bg-kv,.info-tile){padding:12px 14px}
  .portal-layout :is(.pbs-top,.bg-top){padding-bottom:14px}
}
/* sign-in, sign-up and reset pages (no sidebar): 44px fields and buttons on phones */
@media (max-width:768px){
  body:not(:has(.portal-layout)) :is(.btn,button[type="submit"],.form-input,input[type="email"],input[type="password"],input[type="text"],input[type="tel"]){min-height:44px}
  body:not(:has(.portal-layout)) .pw-toggle{min-width:44px;min-height:44px}
}
/* /sc-n409-portal-visual-v1 */