/* ============================================================
   sc-portal-polish-v1 (2026-10-05)
   Loads LAST on every portal page. Styling only: no element is
   hidden that carries function, no ids or markup change.
   One spacing scale (4/8/12/16/20/24/32), three radii
   (8 panel / 6 control / 4 chip), one surface per level,
   flat accent, no gradient text, no glow, no blur, no bounce.
   Most rules are scoped to .portal-layout so auth pages,
   checkout and the chat widget keep their own styling.
   ============================================================ */

:root{
  --pp-r:8px;
  --pp-r-ctl:6px;
  --pp-r-chip:4px;
  --pp-pad:20px;
  --pp-gap:16px;
  --pp-block:16px;           /* space between stacked blocks */
  --pp-section:32px;         /* space before a labelled section */
  --pp-field:#0a0d12;
  --pp-field-bd:var(--line-strong,#2a3240);
  --pp-icon-bg:#141922;
  --pp-hover:#11151c;
  --pp-seg-on:#1f2632;
  --pp-focus:rgba(110,168,255,.22);
  --pp-shadow-pop:0 16px 40px rgba(0,0,0,.45);
}
[data-theme="light"]{
  --pp-field:#ffffff;
  --pp-field-bd:#c3c9d3;
  --pp-icon-bg:#eef0f3;
  --pp-hover:#f7f8fa;
  --pp-seg-on:#ffffff;
  --pp-focus:rgba(47,107,221,.18);
  --pp-shadow-pop:0 16px 40px rgba(20,28,40,.16);
}

/* ---------- 1. AI tropes, removed globally ---------- */

/* gradient headline text -> solid ink */
.sc-greet__title,
[data-theme="light"] .sc-greet__title{
  background:none !important;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  -webkit-text-fill-color:currentColor;
  color:var(--ink);
}

/* scroll-reveal, stagger and page-enter motion: content is simply there */
.portal-layout [data-motion],
.portal-layout [data-stagger] > *{
  opacity:1;
  transform:none;
  transition:none;
}
body.sc-page-enter .page-content,
.page-content{animation:none}
.stat-value.sc-just-updated{animation:none}

/* overshoot easings -> plain ease-out */
.modal-box{animation:pp-fade-in .14s ease-out}
.toast{animation-timing-function:ease-out}
@keyframes pp-fade-in{from{opacity:0}to{opacity:1}}

/* glass blur behind dialogs -> solid scrim */
.modal-backdrop,
.sc-modal-backdrop,
.sc-modal__scrim{
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.modal-backdrop,
.sc-modal-backdrop{background:rgba(4,6,9,.72)}
.sc-modal__scrim{background:rgba(4,6,9,.72)}
[data-theme="light"] .modal-backdrop,
[data-theme="light"] .sc-modal-backdrop,
[data-theme="light"] .sc-modal__scrim{background:rgba(20,26,36,.42)}

/* glow halos on status dots */
.sc-health::before,
.sc-status::before,
.sc-status.is-active::before,
.vault-dot.active,
.portal-layout .dot,
.portal-layout .srv-status .dot{box-shadow:none}
.vault-dot.active{animation:none}

/* lift-on-hover and press-scale on static UI */
.portal-layout .card:hover{box-shadow:none}
.portal-layout .btn:not([disabled]):hover,
.portal-layout .btn:not([disabled]):active,
.portal-layout button:not([disabled]):active{transform:none}
.portal-layout .btn:not([disabled]):hover{box-shadow:none}

/* ---------- 2. Page frame: one width, one gutter ---------- */

.portal-layout .page-content,
html.sc-compact .portal-layout .page-content{
  max-width:1100px;
  padding:32px 40px 64px !important;
}
.portal-layout .page-content > [hidden]{display:none}

/* decorative hero glyph next to the billing title */
.portal-layout .sc-icon-hero{display:none}

/* ---------- 3. Page header: plain heading block, not a box ---------- */

.portal-layout .card:has(.sc-greet__title),
.portal-layout .card.sc-page-hero:has(.sc-profile-hero),
html.sc-compact .portal-layout .card:has(.sc-greet__title){
  background:none;
  background-image:none;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  box-shadow:none;
  padding:0 0 20px;
  margin:0 0 24px;
}
/* the light theme pinned these heroes dark ("exhibits"); as a plain
   header on paper they take the paper tokens again. :not(#_) matches the
   id-level specificity of the exhibit selector list in sc-brand.css. */
[data-theme="light"] .portal-layout .card.sc-hero:has(.sc-greet__title):not(#_){
  --ink:#171c24; --ink2:#49535f; --ink3:#77808d; --muted:#6b7686;
  --ink-2:#49535f; --ink-3:#77808d;
  --bg:#f2f3f6; --bg1:#ffffff; --bg2:#e9ebef; --bg3:#e9ebef; --bg4:#e1e4ea;
  --surf:#ffffff; --card:#ffffff;
  --line:#d7dbe2; --line-strong:#b8bfca; --bdr:#d7dbe2; --bdr2:#b8bfca;
  --blue:#2f6bdd; --blue-d:#2456b8;
  color:var(--ink);
  border:0;
  border-bottom:1px solid var(--line);
}
.portal-layout :is(.sc-page-hero__row,.sc-hero__row,.card:has(.sc-greet__title) > .flex-between){
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.portal-layout :is(.sc-page-hero__row,.sc-hero__row,.card:has(.sc-greet__title) > .flex-between) > :first-child{
  flex:1 1 320px;
  min-width:0;
}
.portal-layout .sc-greet__hello{
  font-family:var(--font,inherit);
  font-size:12px;
  font-weight:500;
  line-height:16px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink3);
  margin:0 0 4px;
}
.portal-layout .sc-greet__title,
html.sc-compact .portal-layout .sc-greet__title{
  font-family:var(--display);
  font-size:1.5rem !important;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.01em;
  margin:0;
}
.portal-layout .sc-profile-hero{gap:16px;align-items:center}
.portal-layout .sc-profile-avatar{width:48px;height:48px;font-size:16px}
.portal-layout .sc-profile-name--lg{font-family:var(--display);font-size:1.5rem;font-weight:700;line-height:1.25}
.portal-layout .sc-profile-email{font-size:13px;color:var(--ink3);margin-top:2px}
.portal-layout .sc-greet__sub{
  font-size:14px;
  line-height:1.5;
  color:var(--ink2);
  margin-top:4px;
  max-width:72ch;
}
.portal-layout .sc-hero__stat{font-size:13px;color:var(--ink2);gap:4px}
.portal-layout .sc-hero__stat > i:first-child{margin-right:4px}
.portal-layout .sc-hero__stat .n{color:var(--ink)}

/* ---------- 4. Vertical rhythm ---------- */

.portal-layout :where(.page-content,#dash-root,#vault-root,#view-list,#sc-domains,#scb-app,#vplans-root) > *{
  margin-top:0;
  margin-bottom:var(--pp-block);
}
.portal-layout :where(.page-content,#dash-root,#vault-root,#view-list,#sc-domains,#scb-app,#vplans-root) > :last-child{margin-bottom:0}
.portal-layout .page-content > :is(#alert-area,#toast-container):empty{margin:0}
.portal-layout .card + .card{margin-top:0}
.portal-layout .sc-section{margin:var(--pp-section) 0 0}
.portal-layout :is(#dash-root,#vault-root) > .sc-section + .sc-section{margin-top:var(--pp-section)}
.portal-layout :is(.page-content,#dash-root,#vault-root,#vplans-root) > .sc-section{margin-bottom:0}
.portal-layout .sc-sec-label{margin-top:var(--pp-section)}
.portal-layout .card:has(.sc-greet__title) + .sc-sec-label,
.portal-layout .card:has(.sc-greet__title) + * > .sc-sec-label:first-child{margin-top:0}

/* ---------- 5. Section labels: one style everywhere ---------- */

.portal-layout .sc-section__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:32px;
  margin:0 0 12px;
  padding:0;
}
.portal-layout :is(.sc-section__title,.sc-sec-label){
  font-family:var(--font,inherit);
  font-size:12px;
  font-weight:600;
  line-height:16px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink2);
}
.portal-layout .sc-section__title::before{content:none}
.portal-layout .sc-section__title::after{content:none}
.portal-layout .sc-section__sub,
.portal-layout .sc-section__link{font-size:13px;color:var(--ink3)}
.portal-layout .sc-section__link{color:var(--accent);text-decoration:none}
.portal-layout .sc-sec-label{margin-bottom:12px}
.portal-layout .sc-section > .sc-section__title:first-child{display:flex;align-items:center;min-height:32px;margin-bottom:12px}
.portal-layout .scm-label-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:32px;
}
.portal-layout .sc-hint,
.portal-layout .sc-help,
.portal-layout .sc-help-sm{font-size:13px;line-height:1.5;color:var(--ink3)}

/* ---------- 6. Panels ---------- */

.portal-layout .card,
html.sc-compact .portal-layout .card{
  background-color:var(--bg1);
  background-image:none;
  border:1px solid var(--line);
  border-radius:var(--pp-r);
  box-shadow:none;
  padding:var(--pp-pad);
}
.portal-layout #sc-ref-card{padding:var(--pp-pad) !important}
.portal-layout a.card:hover,
.portal-layout .card.sc-server-strip:hover{border-color:var(--line-strong);background-color:var(--pp-hover)}
.portal-layout .card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:32px;
  margin:0 0 16px;
  padding:0;
  border:0;
}
.portal-layout .card-title{
  font-size:14px;
  font-weight:600;
  line-height:20px;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink);
}
.portal-layout .card-sub{font-size:14px;color:var(--ink2);margin:-8px 0 16px}
/* referral card heading uses inline sizes; match card titles */
.portal-layout #sc-ref-card > div:first-child{min-height:32px;align-items:center !important;margin-bottom:16px}
.portal-layout #sc-ref-card > div:first-child > div:first-child{font-size:14px !important;font-weight:600 !important}
.portal-layout #sc-ref-card > div:first-child > div:last-child{font-size:13px !important}

/* ---------- 7. Grids: equal-height siblings, buttons on one line ---------- */

.portal-layout :is(.grid-2,.sc-vitals,.sc-actions,.plan-grid,.sbg-grid,.sbg-notes){
  gap:var(--pp-gap);
  align-items:stretch;
}
.portal-layout :is(.grid-2,.sc-vitals,.sc-actions,.plan-grid,.sbg-grid,.sbg-notes) > *{margin:0 !important}

.portal-layout .grid-2 > .card{display:flex;flex-direction:column}
.portal-layout .grid-2 > .card > :is(form,#storage-wrap,#totp-wrap),
.portal-layout .grid-2 > .card > #totp-wrap > div{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
}
.portal-layout .grid-2 > .card > .btn:last-child,
.portal-layout .grid-2 > .card > :is(form,#storage-wrap) > .btn:last-child,
.portal-layout .grid-2 > .card > #totp-wrap > div > .btn:last-child{
  margin-top:auto;
  align-self:flex-start;
}
.portal-layout .grid-2 > .card > :is(form,#storage-wrap) > .btn:last-child,
.portal-layout .grid-2 > .card > .btn:last-child{margin-top:auto}
.portal-layout .grid-2 > .card .form-group:last-of-type{margin-bottom:20px}

/* ---------- 8. Stat tiles ---------- */

.portal-layout .sc-vitals{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.portal-layout .sc-vital{
  background:var(--bg1);
  border:1px solid var(--line);
  border-radius:var(--pp-r);
  box-shadow:none;
  padding:16px 20px;
  min-height:116px;
  display:flex;
  flex-direction:column;
  gap:0;
}
.portal-layout .sc-vital:hover{border-color:var(--line)}
.portal-layout .sc-vital__head{
  min-height:16px;
  margin-bottom:10px;
  font-family:var(--font,inherit);
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--ink3);
}
.portal-layout .sc-vital__head > span:first-child{font-family:var(--font,inherit);font-size:11px;letter-spacing:.06em}
.portal-layout .sc-vital__head i{color:var(--ink3) !important}
.portal-layout .sc-vital__head > :last-child{font-weight:500;letter-spacing:0;font-variant-numeric:tabular-nums}
.portal-layout .sc-vital__value,
.portal-layout .sc-vital .sc-health{
  min-height:28px;
  line-height:28px;
  font-size:1.375rem;
  display:flex;
  align-items:baseline;
  gap:6px;
}
.portal-layout .sc-vital .sc-health{font-size:1.125rem;align-items:center;font-weight:600}
.portal-layout .sc-vital__bar{margin-top:8px}
.portal-layout .sc-vital__sub{
  margin-top:auto;
  padding-top:8px;
  font-size:12.5px;
  line-height:18px;
  color:var(--ink3);
}

/* ---------- 9. Rows and inner surfaces ---------- */

/* top-level list rows (servers, sites, quick actions, server strip, tier ribbon) */
.portal-layout :is(.srv-row,.sc-action,.sc-tier-ribbon,.sc-onboard){
  background:var(--bg1);
  background-image:none;
  border:1px solid var(--line);
  border-radius:var(--pp-r);
  box-shadow:none;
}
.portal-layout .srv-row{padding:16px 20px}
.portal-layout :is(.srv-row,.sc-action):hover{
  border-color:var(--line-strong);
  background:var(--pp-hover);
  transform:none;
  box-shadow:none;
}
.portal-layout .sc-action{padding:16px;align-items:flex-start}
.portal-layout .sc-action__title{font-size:14px;font-weight:600;line-height:20px}
.portal-layout .sc-action__sub{font-size:13px;line-height:18px;color:var(--ink3)}
.portal-layout .sc-tier-ribbon{padding:12px 16px}
.portal-layout .sc-tier-ribbon__name{letter-spacing:.1em}
.portal-layout .sc-onboard{padding:var(--pp-pad)}
.portal-layout .sc-onboard__title{font-family:var(--font,inherit);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.portal-layout .sc-onboard__title i{color:var(--ink3)}
/* onboarding buttons carry inline colours; match .btn-primary.btn-sm */
.portal-layout :is(#sc-verify-restore-btn,#sc-recheck-backup-btn){
  background:var(--accent) !important;
  border:1px solid var(--accent) !important;
  color:#0a0d12 !important;
  border-radius:var(--pp-r-ctl) !important;
  font-size:13px !important;
  min-height:32px;
  padding:0 12px !important;
}
[data-theme="light"] .portal-layout :is(#sc-verify-restore-btn,#sc-recheck-backup-btn){color:#fff !important}

/* nested rows inside panels */
.portal-layout :is(.sc-snap,.sc-device,.sc-pm-card,.sc-ticket){
  background:transparent;
  background-image:none;
  border:1px solid var(--line);
  border-radius:var(--pp-r-ctl);
  box-shadow:none;
  padding:12px 16px;
}
.portal-layout :is(.sc-snap,.sc-device,.sc-ticket):hover{background:var(--pp-hover)}
.portal-layout .sc-pm-card.is-default{border-color:var(--line-strong);background:transparent}

/* one neutral icon well everywhere; no colour per card */
.portal-layout :is(.sc-action__icon,.sc-server-strip__icon,.srv-row__icon,.sc-snap__icon,.sc-device__icon,.sc-ticket__icon,.srv-empty__icon,.sc-nudge__icon),
.portal-layout .sc-action__icon:is(.sc-action__icon--gold,.sc-action__icon--grn,.sc-action__icon--pur){
  background:var(--pp-icon-bg);
  background-image:none;
  border:1px solid var(--line);
  border-radius:var(--pp-r-ctl);
  color:var(--ink2);
  box-shadow:none;
}
.portal-layout :is(.sc-action__icon,.sc-server-strip__icon,.srv-row__icon,.sc-snap__icon,.sc-device__icon,.sc-ticket__icon) i{color:inherit}
.portal-layout .sc-action__icon{width:36px;height:36px;flex:0 0 36px}
.portal-layout .sc-nudge__icon{color:var(--gold)}

/* upgrade nudge: tinted, flat */
.portal-layout .sc-nudge{
  background:rgba(240,192,64,.06);
  background-image:none;
  border:1px solid rgba(240,192,64,.28);
  border-radius:var(--pp-r);
  padding:14px 16px;
}
[data-theme="light"] .portal-layout .sc-nudge{background:#fdf8ea;border-color:#ead9a4}

/* callouts and token fields */
.portal-layout .sc-callout{
  background:var(--bg2);
  border:1px solid var(--line);
  border-radius:var(--pp-r-ctl);
  margin:12px 0 20px;
}
.portal-layout .sc-token{border-radius:var(--pp-r-ctl)}
/* endpoint spans the row; the two fields under it split it evenly
   instead of leaving two empty auto-fit tracks */
.portal-layout .sc-token-grid{gap:12px}
.portal-layout .sc-token-grid:has(> .sc-token:nth-child(3):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}

/* numbered setup steps: number centred on the title line, steps spaced */
.portal-layout .sc-quickstart{gap:0}
.portal-layout .sc-step{gap:12px}
.portal-layout .sc-step + .sc-step{margin-top:16px}
.portal-layout .sc-step__num{width:24px;height:24px;margin-top:-2px;font-size:12px;border-radius:50%}
.portal-layout .sc-step__title{font-size:14px;line-height:20px;margin-bottom:4px}
.portal-layout .sc-step__hint{font-size:13px}

/* list rows: empty placeholder cells (no expiry, no action) take no grid row */
.portal-layout :is(.sc-snap,.sc-device) > div:empty{display:none}

/* privacy rows read as list rows under the card title */
.portal-layout .data-row{align-items:center;gap:16px;padding:16px 0}
.portal-layout .data-row-title{font-size:14px;font-weight:600;line-height:20px;margin-bottom:2px}
.portal-layout .data-row-desc{font-size:13px;line-height:1.5;color:var(--ink2)}
.portal-layout .data-row > :last-child:not(.data-row-text){flex:0 0 auto}

/* avatars */
.portal-layout .user-avatar,
.portal-layout .sc-profile-avatar{
  background:var(--pp-icon-bg);
  background-image:none;
  border:1px solid var(--line);
  border-radius:var(--pp-r-ctl);
  color:var(--ink);
}

/* sidebar */
.portal-layout .nav-item{border-radius:var(--pp-r-ctl)}
.portal-layout .nav-item.active{border-radius:var(--pp-r-ctl)}

/* ---------- 10. Plan cards ---------- */

.portal-layout .plan-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.portal-layout :is(.plan-card,.sbg-card){
  position:relative;
  background:var(--bg1);
  background-image:none;
  border:1px solid var(--line);
  border-radius:var(--pp-r);
  box-shadow:none;
  padding:var(--pp-pad);
  display:flex;
  flex-direction:column;
}
.portal-layout :is(.plan-card,.sbg-card).is-current,
.portal-layout .sbg-card.is-pop{
  border-color:var(--accent);
  box-shadow:none;
  background:var(--bg1);
}
.portal-layout :is(.plan-card,.sbg-card) > :is(.btn,a.btn):last-child,
.portal-layout :is(.plan-card,.sbg-card) > :is(.btn,a.btn):nth-last-child(2):has(+ .sbg-year){margin-top:auto}
.portal-layout :is(.plan-card,.sbg-card) .btn-full{min-height:36px}
.portal-layout :is(.plan-card,.sbg-card) :is(ul,.plan-features,.dep-specs){margin-bottom:20px}
/* "current plan" chip sits in the corner instead of pushing the card down */
.portal-layout .plan-card .plan-chip{
  position:absolute;
  top:16px;
  right:16px;
  width:auto;
  margin:0;
  border-radius:var(--pp-r-chip);
  background:transparent;
  border:1px solid var(--accent);
  color:var(--accent);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.06em;
  padding:2px 6px;
}
.portal-layout .plan-card .plan-name{min-height:22px;padding-right:96px}
/* hosting plans: name over price so five columns fit; equal head height */
.portal-layout .plan-grid .dep-card .dep-head{
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}
.portal-layout .plan-grid .sc-annual-note{
  height:36px;
  line-height:18px;
  margin:4px 0 0;
  font-size:12px;
  color:var(--ink3);
  overflow:hidden;
}
.portal-layout .plan-grid .dep-card .dep-head:not(:has(+ .sc-annual-note)){margin-bottom:42px}
.portal-layout .plan-grid .dep-card .dep-specs{margin-top:16px}
.portal-layout .sbg-pill{border-radius:var(--pp-r-chip)}

/* billing-cycle switches: one segmented control */
.portal-layout :is(.sc-bill-toggle,.sc-cycle){
  display:inline-flex;
  gap:2px;
  padding:3px;
  background:var(--bg2);
  border:1px solid var(--line);
  border-radius:var(--pp-r-ctl);
}
.portal-layout :is(.sc-bill-toggle button,.sc-cycle__btn){
  border:1px solid transparent;
  border-radius:var(--pp-r-chip);
  background:transparent;
  color:var(--ink2);
  font-size:13px;
  font-weight:600;
  padding:6px 12px;
  opacity:1;
  min-height:30px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-transform:none;
  letter-spacing:0;
}
.portal-layout :is(.sc-bill-toggle button.on,.sc-cycle__btn.is-active){
  background:var(--pp-seg-on);
  border-color:var(--line-strong);
  color:var(--ink);
}
.portal-layout :is(.sc-bill-toggle .sc-bill-save,.sc-bill-toggle button.on .sc-bill-save,.sc-cycle__tag){
  background:rgba(52,211,153,.12);
  color:var(--grn);
  border-radius:var(--pp-r-chip);
  font-size:11px;
  padding:1px 6px;
}
[data-theme="light"] .portal-layout :is(.sc-bill-toggle .sc-bill-save,.sc-bill-toggle button.on .sc-bill-save,.sc-cycle__tag){color:#11865a;background:#e3f5ec}
.portal-layout .sc-cycle-wrap{justify-content:flex-start}

/* ---------- 11. Buttons ---------- */

.portal-layout .btn{
  border-radius:var(--pp-r-ctl);
  min-height:36px;
  padding-top:0;
  padding-bottom:0;
  padding-left:14px;
  padding-right:14px;
  font-size:13.5px;
  font-weight:600;
  line-height:1.2;
  gap:8px;
  align-items:center;
  justify-content:center;
  box-shadow:none;
  background-image:none;
}
.portal-layout .btn-sm{min-height:32px;padding-left:12px;padding-right:12px;font-size:13px}
.portal-layout :is(.btn-gold,.btn-danger,.btn-primary){box-shadow:none;background-image:none}
.portal-layout :is(.sc-pm-btn,.sc-invoice-pdf,.srv-copy,.scm-btn){border-radius:var(--pp-r-ctl)}
.portal-layout :is(.sc-pm-btn,.sc-invoice-pdf){min-height:28px;display:inline-flex;align-items:center}
.portal-layout .scm-btn{min-height:32px;background:transparent;border:1px solid var(--line-strong);color:var(--ink)}
.portal-layout .scm-btn:hover{background:var(--pp-hover)}
/* header action groups keep one baseline */
.portal-layout :is(.card-header,.sc-section__head,.flex-between) > :last-child:is(div,.panel-actions):has(> .btn){
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

/* ---------- 12. Forms ---------- */

.portal-layout :is(.form-input,
  input[type="text"],input[type="email"],input[type="tel"],input[type="url"],
  input[type="number"],input[type="password"],input[type="search"],input:not([type]),
  select,textarea):not(.sc-switch input){
  background:var(--pp-field);
  border:1px solid var(--pp-field-bd);
  border-radius:var(--pp-r-ctl);
  color:var(--ink);
  font-size:14px;
  min-height:38px;
  padding:0 12px;
  box-shadow:none;
}
.portal-layout textarea{padding:10px 12px;line-height:1.5}
.portal-layout :is(.form-input,input,select,textarea):focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--pp-focus);
  outline:none;
}
.portal-layout .form-input.is-dim,
.portal-layout :is(input,select,textarea):disabled,
.portal-layout :is(input,textarea)[readonly]{color:var(--ink3);background:var(--bg2)}
.portal-layout :is(input,textarea)::placeholder{color:var(--ink3)}
.portal-layout .form-group{margin-bottom:16px}
.portal-layout .form-label,
.portal-layout .profile-field{
  font-size:13px;
  font-weight:500;
  line-height:18px;
  color:var(--ink2);
  letter-spacing:0;
  text-transform:none;
}
.portal-layout .form-label{display:block;margin-bottom:6px}
.portal-layout .profile-field{gap:6px}
.portal-layout .profile-grid{gap:16px}
.portal-layout .profile-actions{margin-top:20px}
.portal-layout .form-hint{font-size:12.5px;line-height:18px;color:var(--ink3);margin-top:6px}
.portal-layout .dm-bar :is(input,.btn){min-height:44px}
.portal-layout .sc-pref-num input[type=number]{min-height:34px}

/* ---------- 13. Tables ---------- */

.portal-layout .sc-invoices{
  background:transparent;
  border:1px solid var(--line);
  border-radius:var(--pp-r-ctl);
  gap:0;
  overflow:hidden;
}
.portal-layout .sc-invoice-row{
  background:transparent;
  border-top:1px solid var(--line);
  font-size:14px;
}
.portal-layout .sc-invoice-row:first-child{border-top:0}
.portal-layout .sc-invoice-row:hover{background:var(--pp-hover)}
.portal-layout .sc-invoice-row.sc-invoice-header,
.portal-layout .sc-invoice-row.sc-invoice-header:hover{
  background:var(--bg2);
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--ink3);
}
@media (min-width:561px){
  /* header and body rows share one column template */
  .portal-layout .sc-invoice-row{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) 96px}
  .portal-layout .sc-invoice-actions{justify-content:flex-end}
}
.portal-layout table{border-collapse:collapse;width:100%}
.portal-layout :is(th,td){padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.portal-layout th{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);background:var(--bg2)}
.portal-layout :is(.table-wrap,.tbl-wrap,.card) > table{display:table}

/* ---------- 14. Chips and badges: small, square-ish, consistent ---------- */

.portal-layout :is(.badge,.sc-status,.sc-device__chip,.sc-pm-default-chip,.srv-row__plan,.sc-tk-prio,.sc-tk-status,.dm-tld,.sc-pref-lock){
  border-radius:var(--pp-r-chip);
  font-family:var(--font,inherit);
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  line-height:16px;
  padding:2px 7px;
}
.portal-layout .dm-tld{font-family:var(--brand-mono);letter-spacing:0;font-weight:500;font-size:12px;background:var(--bg2)}

/* ---------- 15. Empty states ---------- */

.portal-layout :is(.srv-empty,.empty){
  background:var(--bg1);
  border:1px dashed var(--line-strong);
  border-radius:var(--pp-r);
  padding:48px 24px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:200px;
}
.portal-layout .card :is(.empty){border:0;background:transparent;min-height:160px;padding:32px 16px}
.portal-layout :is(.srv-empty__icon){width:40px;height:40px;font-size:16px;margin-bottom:8px}
.portal-layout :is(.srv-empty,.empty) :is(h3,h4,.srv-empty__title){font-size:15px;font-weight:600;margin:0;color:var(--ink);font-family:var(--font,inherit)}
.portal-layout :is(.srv-empty,.empty) p{font-size:14px;line-height:1.5;color:var(--ink2);max-width:420px;margin:0 auto}
.portal-layout .sc-snap.is-empty{border-style:dashed;background:transparent}

/* ---------- 16. Dialogs ---------- */

.modal-box,
.sc-modal-box,
.sc-modal__panel{
  background:var(--bg1);
  border:1px solid var(--line-strong);
  border-radius:10px;
  box-shadow:var(--pp-shadow-pop);
}
:is(.modal-box,.sc-modal-box,.sc-modal__panel) h3,
.sc-modal__title,
.sc-modal-title{
  font-family:var(--font,inherit);
  font-size:16px;
  font-weight:600;
  letter-spacing:0;
}
:is(.sc-modal-actions,.modal-actions){gap:8px;justify-content:flex-end}

/* empty status line under the privacy actions only takes space once it has text */
.portal-layout .data-status:empty{display:none}
.portal-layout .data-row:is(:last-child,:has(+ .data-status:empty)){border-bottom:0}

/* ---------- 17. Alerts ---------- */

.portal-layout .alert{border-radius:var(--pp-r-ctl);padding:12px 16px;font-size:14px}

/* ---------- 18. Floating chat launcher: neutral shadow, normal radius ---------- */

/* sc-chat-v2 owns the widget; only its tinted launcher halo is swapped
   for a neutral drop shadow through its own variable. */
html #sc-chat-widget{--scc-launch-shadow:0 6px 18px rgba(0,0,0,.35)}
html[data-theme="light"] #sc-chat-widget{--scc-launch-shadow:0 6px 18px rgba(20,28,40,.18)}
html #sc-chat-widget #sc-chat-bubble:hover{box-shadow:0 8px 22px rgba(0,0,0,.4)}
html[data-theme="light"] #sc-chat-widget #sc-chat-bubble:hover{box-shadow:0 8px 22px rgba(20,28,40,.22)}

/* ---------- 19. Small screens ---------- */

@media (max-width:768px){
  .portal-layout .page-content,
  html.sc-compact .portal-layout .page-content{
    padding:64px 16px 96px !important;
  }
}
@media (max-width:640px){
  :root{--pp-pad:16px}
  .portal-layout .card:has(.sc-greet__title){padding-bottom:16px;margin-bottom:20px}
  .portal-layout .sc-greet__title,
  html.sc-compact .portal-layout .sc-greet__title{font-size:1.3rem !important}
  /* header actions take a full row so they line up with the content edge */
  .portal-layout :is(.sc-page-hero__row,.sc-hero__row,.card:has(.sc-greet__title) > .flex-between) > :last-child:not(:first-child){flex:1 1 100%}
  .portal-layout :is(.sc-page-hero__row,.sc-hero__row,.card:has(.sc-greet__title) > .flex-between) > .btn:last-child,
  .portal-layout .card:has(.sc-greet__title) > .flex-between > :last-child > .btn{width:100%}
  .portal-layout .flex-between:has(> :last-child > .btn) > :last-child:not(:first-child){flex:1 1 100%}
  .portal-layout .flex-between > :last-child:not(:first-child) > .btn{flex:1 1 auto}
  .portal-layout .sc-section__head{flex-wrap:wrap}
  .portal-layout .sc-section__head > :last-child:not(:first-child):has(.btn){flex:1 1 100%;justify-content:space-between}
  .portal-layout .sc-vital{min-height:0;padding:14px 16px}
  .portal-layout .srv-row{padding:14px 16px}
  .portal-layout :is(.srv-empty,.empty){padding:32px 16px;min-height:160px}
  /* single-column plans need no reserved annual-note line */
  .portal-layout .plan-grid .sc-annual-note{height:auto}
  .portal-layout .plan-grid .dep-card .dep-head:not(:has(+ .sc-annual-note)){margin-bottom:0}
  /* saved card: number on one line, chip and actions wrap under it */
  .portal-layout .sc-pm-card{flex-wrap:wrap;row-gap:8px}
  .portal-layout .sc-pm-info{flex:1 1 calc(100% - 64px)}
  .portal-layout .sc-pm-last4{white-space:nowrap}
  .portal-layout .sc-pm-card > .sc-pm-info + *{margin-left:52px}
  .portal-layout .data-row{flex-wrap:wrap}
}

/* ---------- sc-qa-v1 (2026-10-07): layout QA pass, desktop + mobile ---------- */

/* plan cards: the badge sits on the card's top edge, so it never covers the plan name */
.portal-layout .plan-card{overflow:visible}
.portal-layout .plan-card .plan-chip{
  top:-10px;
  left:14px;
  right:auto;
  background:var(--bg1);
  line-height:16px;
  white-space:nowrap;
}
.portal-layout .plan-card .plan-name{padding-right:0}
/* long button labels ("Upgrade to Standard") wrap inside the button instead of spilling out */
.portal-layout .plan-card .btn{white-space:normal;line-height:1.25;padding-left:10px;padding-right:10px;gap:6px;text-align:center}
/* two-line features keep the check on the first line */
.portal-layout .plan-features li{align-items:flex-start}
.portal-layout .plan-features li i{margin-top:.32em}

@media (max-width: 760px){
  /* tap targets: at least 36px tall on phones */
  .sc-section__link,.sc-upg__link,.sc2-coupon-link,.sc-invoice-pdf{display:inline-flex;align-items:center;min-height:36px}
  .sc-pm-btn,.sc-cycle__btn{min-height:36px}
}

/* sc-dm-err-wrap-v1 (2026-10-08): a visible register error moves to its own line; name and price never overlap */
.dm-row:has(> .dm-err:not([style*="none"])){flex-wrap:wrap}
.dm-row > .srv-row__main{min-width:0;flex:1 1 180px}
.dm-row .srv-row__name{flex-wrap:wrap;row-gap:4px}
.dm-row > .dm-err{order:99}
@media (max-width:640px){ .dm-row{flex-wrap:wrap} .dm-row .dm-actions{flex-basis:100%;justify-content:flex-end} }