/* ─── THE APP SHELL (interior chrome, canon 2026-08-09) ────────────────────
   ONE interior for every signed in surface. The inside now looks like the
   outside: same ground, same ink, same accent family, same type as the
   estate front doors (Source/Sites/_shared/design/estate.css).

   THE RULE THIS FILE EXISTS TO ENFORCE. LUX, VEX and MIRA are not four
   products with four interiors. They are MODES on one record. The mode
   switcher in the rail is the visible proof: it sets one variable,
   --mode, and the whole shell re-tints. Nothing navigates away.

   WHAT THIS FILE IS NOT. It is chrome and layout only. It knows nothing
   about auth, sessions, cookies, fetches or state keys. A page adopting it
   keeps every handler it already had. The shell wraps, it never replaces.

   LOADING. Plain CSS custom properties plus classes. No build step, no
   framework, no CDN. Fonts are self hosted woff2 with three source
   candidates so the same file works from every site root.

   TOKENS. Identical names and values to estate.css. Loading both is safe
   and idempotent; loading this one alone is also complete.             */

/* ── fonts. Self hosted only. Three candidates: site root, the noctara
      filename convention, then a path relative to this stylesheet. A
      browser walks the src list and falls through on a failed fetch. */
@font-face{font-family:'Public Sans';font-weight:400;font-style:normal;font-display:swap;
  src:url('/fonts/public-sans-400.woff2') format('woff2'),
      url('/fonts/public-sans-latin-400-normal.woff2') format('woff2'),
      url('fonts/public-sans-400.woff2') format('woff2')}
@font-face{font-family:'Public Sans';font-weight:700;font-style:normal;font-display:swap;
  src:url('/fonts/public-sans-700.woff2') format('woff2'),
      url('/fonts/public-sans-latin-700-normal.woff2') format('woff2'),
      url('fonts/public-sans-700.woff2') format('woff2')}
@font-face{font-family:'Martian Mono';font-weight:400;font-style:normal;font-display:swap;
  src:url('/fonts/martian-mono-400.woff2') format('woff2'),
      url('/fonts/martian-mono-latin-400-normal.woff2') format('woff2'),
      url('fonts/martian-mono-400.woff2') format('woff2')}

/* ── tokens ───────────────────────────────────────────────────────────── */
:root{
  /* grounds */
  --bg:#0A0C0F; --bg2:#0E1117; --bg3:#12161D; --plate:#07090C;
  /* surfaces */
  --card:rgba(255,255,255,.035); --card2:rgba(255,255,255,.055);
  --line:rgba(255,255,255,.10);  --line2:rgba(255,255,255,.18);
  /* inks */
  --fg:#ECEEF1; --fg2:#98A1AB; --fg3:#6B747E;
  /* accents */
  --accent:#8FA6FF; --accent2:#5C7BFF; --accentDeep:#2440B8;
  --lux:#4FBF92; --vex:#E0697B; --mira:#DE73B4;
  /* status. Colour is spent on status and one accent, nothing else. */
  --ok:#4FBF92; --warn:#E8B45C; --bad:#E0697B; --info:#8FA6FF;
  /* type */
  --sans:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'Martian Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  /* radii */
  --r:18px; --rs:12px; --rxs:10px; --pill:999px;
  /* depth: hairline plus drop plus inset light catch. Always all three. */
  --lift-1:0 18px 36px -26px rgba(0,0,0,.60), rgba(255,255,255,.055) 0 1px 0 inset;
  --lift-2:0 24px 48px -28px rgba(0,0,0,.72), rgba(255,255,255,.07) 0 1px 0 inset;
  --container:1180px;
  --t-fast:180ms cubic-bezier(.2,.8,.2,1);
  --t-slow:700ms cubic-bezier(.2,.8,.2,1);
  /* shell metrics. 8px rhythm. Rail sits inside the 240 to 280 band. */
  --rail-w:256px; --rail-w-tight:72px; --topbar-h:58px; --bar-h:62px;
  --row-h:38px; --ctl-h:40px;
}

/* ── the mode. One variable, five templates, one product. ─────────────── */
.app{--mode:var(--accent); --mode-ink:#0A0C0F;
     --mode-soft:rgba(143,166,255,.13); --mode-line:rgba(143,166,255,.34)}
.app[data-mode="personal"]    {--mode:#4FBF92; --mode-soft:rgba(79,191,146,.13);  --mode-line:rgba(79,191,146,.36)}
.app[data-mode="practitioner"]{--mode:#E0697B; --mode-soft:rgba(224,105,123,.13); --mode-line:rgba(224,105,123,.36)}
.app[data-mode="creator"]     {--mode:#DE73B4; --mode-soft:rgba(222,115,180,.13); --mode-line:rgba(222,115,180,.36)}
.app[data-mode="team"]        {--mode:#8FA6FF; --mode-soft:rgba(143,166,255,.13); --mode-line:rgba(143,166,255,.36)}
.app[data-mode="child"]       {--mode:#F0B356; --mode-soft:rgba(240,179,86,.13);  --mode-line:rgba(240,179,86,.36)}

/* ── base ─────────────────────────────────────────────────────────────── */
.app-base{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);
  font-size:15px;line-height:1.5;letter-spacing:-.006em;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
.app *,.app *::before,.app *::after{box-sizing:border-box}
.app img,.app svg{max-width:100%}
/* the hidden attribute must beat every display rule in this file, or a
   mode-scoped nav group stays on screen after the mode changes. */
.app [hidden],[hidden]{display:none!important}

/* keyboard. Real focus, never removed, always visible on dark. */
.app :focus{outline:none}
.app :focus-visible{outline:2px solid var(--mode);outline-offset:2px;border-radius:6px}
.app .btn:focus-visible,.app .nav-item:focus-visible,.app .modesw-btn:focus-visible,
.app .seg-btn:focus-visible,.app .row:focus-visible{outline-offset:3px}
.app .input:focus-visible,.app .textarea:focus-visible,.app .select:focus-visible{
  outline-offset:0;border-color:var(--mode);box-shadow:0 0 0 3px var(--mode-soft)}
.skip-link{position:absolute;left:8px;top:-56px;z-index:120;background:var(--bg3);
  color:var(--fg);border:1px solid var(--line2);border-radius:var(--pill);
  padding:10px 18px;font:700 14px/1 var(--sans);text-decoration:none;transition:top var(--t-fast)}
.skip-link:focus{top:8px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── shell layout ─────────────────────────────────────────────────────── */
.app{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);min-height:100vh;
  min-height:100dvh;background:var(--bg)}
.app[data-rail="tight"]{--rail-w:var(--rail-w-tight)}

.app-rail{position:sticky;top:0;align-self:start;height:100vh;height:100dvh;
  display:flex;flex-direction:column;gap:16px;padding:16px 12px 12px;
  background:var(--bg2);border-right:1px solid var(--line);z-index:40}
.app-main{display:flex;flex-direction:column;min-width:0;min-height:100vh;min-height:100dvh}
.app-content{flex:1;width:100%;max-width:var(--container);margin:0 auto;padding:28px 32px 64px}
.app-content.wide{max-width:none}

/* ── rail: brand ──────────────────────────────────────────────────────── */
.rail-brand{display:flex;align-items:center;gap:10px;height:40px;padding:0 8px;
  color:var(--fg);text-decoration:none;border-radius:var(--rxs)}
.rail-brand svg{width:22px;height:22px;flex:none}
.rail-brand b{font:700 15px/1 var(--sans);letter-spacing:-.02em}
.rail-brand span{font:400 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg3);margin-left:auto}

/* ── rail: mode switcher. The one product, many templates, made visible. */
.modesw{position:relative}
.modesw-btn{display:flex;align-items:center;gap:10px;width:100%;height:40px;
  padding:0 12px;background:var(--card);color:var(--fg);border:1px solid var(--line);
  border-radius:var(--pill);font:700 13.5px/1 var(--sans);letter-spacing:-.01em;
  cursor:pointer;text-align:left;transition:background var(--t-fast),border-color var(--t-fast)}
.modesw-btn:hover{background:var(--card2);border-color:var(--line2)}
.modesw-btn[aria-expanded="true"]{background:var(--card2);border-color:var(--mode-line)}
.modesw-btn .caret{margin-left:auto;width:12px;height:12px;color:var(--fg3);flex:none;
  transition:transform var(--t-fast)}
.modesw-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}
.mode-dot{width:9px;height:9px;border-radius:var(--pill);background:var(--mode);flex:none;
  box-shadow:0 0 0 3px var(--mode-soft)}
.mode-dot[data-mode="personal"]{background:#4FBF92;box-shadow:0 0 0 3px rgba(79,191,146,.16)}
.mode-dot[data-mode="practitioner"]{background:#E0697B;box-shadow:0 0 0 3px rgba(224,105,123,.16)}
.mode-dot[data-mode="creator"]{background:#DE73B4;box-shadow:0 0 0 3px rgba(222,115,180,.16)}
.mode-dot[data-mode="team"]{background:#8FA6FF;box-shadow:0 0 0 3px rgba(143,166,255,.16)}
.mode-dot[data-mode="child"]{background:#F0B356;box-shadow:0 0 0 3px rgba(240,179,86,.16)}

.modesw-menu{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:60;
  padding:6px;background:var(--bg3);border:1px solid var(--line2);border-radius:var(--rs);
  box-shadow:var(--lift-2);display:none}
.modesw-menu.open{display:block}
.modesw-opt{position:relative;display:flex;align-items:flex-start;gap:10px;width:100%;
  padding:9px 54px 9px 10px;background:none;border:0;border-radius:var(--rxs);color:var(--fg);
  cursor:pointer;text-align:left;font-family:var(--sans);transition:background var(--t-fast)}
.modesw-opt:hover{background:var(--card2)}
.modesw-opt .mode-dot{margin-top:5px}
.modesw-opt>span{min-width:0;flex:1}
.modesw-opt i{display:block;font:400 11.5px/1.4 var(--sans);color:var(--fg3);font-style:normal}
.modesw-opt b{display:block;font:700 13.5px/1.3 var(--sans)}
.modesw-opt[aria-checked="true"]{background:var(--card)}
.modesw-opt[aria-checked="true"]::after{content:"active";position:absolute;right:10px;top:11px;
  font:400 9px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg3)}

/* ── rail: nav ────────────────────────────────────────────────────────── */
.rail-scroll{flex:1;overflow-y:auto;overflow-x:hidden;margin:0 -4px;padding:0 4px}
.rail-group{display:block;padding:14px 10px 6px;font:400 9.5px/1 var(--mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg3)}
.rail-nav{display:flex;flex-direction:column;gap:2px}
.nav-item{position:relative;display:flex;align-items:center;gap:10px;width:100%;
  min-height:var(--row-h);padding:0 10px;background:none;border:0;border-radius:var(--rxs);
  color:var(--fg2);font:400 14px/1.2 var(--sans);letter-spacing:-.008em;text-align:left;
  text-decoration:none;cursor:pointer;transition:background var(--t-fast),color var(--t-fast)}
.nav-item svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nav-item:hover{background:var(--card);color:var(--fg)}
.nav-item.is-active,.nav-item[aria-current="page"],.nav-item[aria-selected="true"]{
  background:var(--card2);color:var(--fg);font-weight:700}
.nav-item.is-active::before,.nav-item[aria-current="page"]::before,
.nav-item[aria-selected="true"]::before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;
  width:2px;border-radius:2px;background:var(--mode)}
.nav-item[disabled],.nav-item.is-disabled{opacity:.42;pointer-events:none}
.nav-badge{margin-left:auto;font:400 10px/1 var(--mono);letter-spacing:.06em;color:var(--fg3);
  background:var(--card2);border-radius:var(--pill);padding:4px 7px;font-variant-numeric:tabular-nums}
.nav-item.is-active .nav-badge{color:var(--mode)}

/* ── rail: footer, account and billing ────────────────────────────────── */
.rail-foot{border-top:1px solid var(--line);padding-top:10px;display:flex;
  flex-direction:column;gap:2px}
.acct{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 8px;
  background:none;border:0;border-radius:var(--rxs);color:var(--fg);cursor:pointer;
  text-align:left;font-family:var(--sans);transition:background var(--t-fast)}
.acct:hover{background:var(--card)}
.acct-avatar{width:28px;height:28px;flex:none;border-radius:var(--pill);
  display:grid;place-items:center;background:var(--mode-soft);color:var(--mode);
  border:1px solid var(--mode-line);font:700 12px/1 var(--sans);text-transform:uppercase}
.acct-id{min-width:0}
.acct-id b{display:block;font:700 13px/1.25 var(--sans);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.acct-id i{display:block;font:400 10.5px/1.3 var(--mono);color:var(--fg3);font-style:normal;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.04em}

/* ── topbar ───────────────────────────────────────────────────────────── */
.app-topbar{position:sticky;top:0;z-index:35;display:flex;align-items:center;gap:12px;
  min-height:var(--topbar-h);padding:0 32px;background:rgba(10,12,15,.78);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topbar-title{font:700 15px/1.2 var(--sans);letter-spacing:-.018em;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-crumb{display:flex;align-items:center;gap:8px;min-width:0;color:var(--fg3);
  font:400 13px/1 var(--sans)}
.topbar-crumb .sep{color:var(--fg3);opacity:.6}
.topbar-tools{margin-left:auto;display:flex;align-items:center;gap:8px}
/* the rail toggle is a .btn, and .btn sets display later in this file, so
   this needs the extra specificity or the hamburger shows on desktop. */
.app .rail-toggle{display:none}

/* ── page header ──────────────────────────────────────────────────────── */
.page-head{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;
  padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.page-head .lead{min-width:0;flex:1 1 320px}
.kicker{font:400 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--fg3)}
.page-title{margin:8px 0 0;font:700 clamp(24px,3vw,32px)/1.08 var(--sans);letter-spacing:-.028em}
.page-sub{margin:8px 0 0;font:400 14.5px/1.55 var(--sans);color:var(--fg2);max-width:62ch}
.page-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;
  cursor:pointer;font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:-.012em;
  border-radius:var(--pill);padding:0 20px;min-height:var(--ctl-h);text-decoration:none;
  white-space:nowrap;position:relative;
  transition:transform var(--t-fast),background var(--t-fast),box-shadow var(--t-fast),
             border-color var(--t-fast),opacity var(--t-fast)}
.btn svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.btn.solid{background:#F4F6F8;color:#0A0C0F;box-shadow:0 2px 20px rgba(255,255,255,.10)}
.btn.mode{background:var(--mode);color:#0A0C0F;box-shadow:0 4px 22px var(--mode-soft)}
.btn.blue{background:var(--accent2);color:#fff;box-shadow:0 4px 24px rgba(92,123,255,.34)}
.btn.ghost{background:rgba(255,255,255,.05);color:var(--fg);border:1px solid var(--line2)}
.btn.quiet{background:none;color:var(--fg2);border:1px solid transparent}
.btn.quiet:hover{color:var(--fg);background:var(--card)}
.btn.danger{background:none;color:var(--bad);border:1px solid rgba(224,105,123,.34)}
.btn.danger:hover{background:rgba(224,105,123,.10);border-color:var(--bad)}
.btn.solid:hover,.btn.mode:hover,.btn.blue:hover,.btn.ghost:hover{transform:translateY(-1px)}
.btn.ghost:hover{background:rgba(255,255,255,.08);border-color:var(--line2)}
.btn:active{transform:translateY(0) scale(.985)}
.btn[disabled],.btn.is-disabled{opacity:.42;pointer-events:none;box-shadow:none;transform:none}
.btn.sm{font-size:13px;min-height:32px;padding:0 14px;gap:6px}
.btn.sm svg{width:14px;height:14px}
.btn.lg{font-size:15px;min-height:48px;padding:0 26px}
.btn.block{display:flex;width:100%}
.btn.icon{padding:0;width:var(--ctl-h);min-height:var(--ctl-h);border-radius:var(--pill)}
.btn.icon.sm{width:32px;min-height:32px}
.btn.is-loading{color:transparent!important;pointer-events:none}
.btn.is-loading::after{content:"";position:absolute;width:15px;height:15px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;
  color:var(--fg);animation:spin 620ms linear infinite}
.btn.solid.is-loading::after,.btn.mode.is-loading::after{color:#0A0C0F}
@keyframes spin{to{transform:rotate(360deg)}}

/* segmented control */
.seg{display:inline-flex;padding:3px;gap:2px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--pill)}
.seg-btn{border:0;background:none;color:var(--fg2);cursor:pointer;border-radius:var(--pill);
  padding:0 14px;min-height:30px;font:700 13px/1 var(--sans);letter-spacing:-.01em;
  transition:background var(--t-fast),color var(--t-fast)}
.seg-btn:hover{color:var(--fg)}
.seg-btn[aria-pressed="true"],.seg-btn.is-active{background:var(--card2);color:var(--fg)}

/* ── cards ────────────────────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--lift-1);transition:border-color var(--t-fast),background var(--t-fast)}
.card.pad{padding:20px}
a.card:hover,.card.link:hover,.card.is-interactive:hover{border-color:var(--line2);background:var(--card2)}
.card-head{display:flex;align-items:center;gap:12px;padding:16px 20px;
  border-bottom:1px solid var(--line)}
.card-head h3{margin:0;font:700 15px/1.3 var(--sans);letter-spacing:-.018em}
.card-head .card-tools{margin-left:auto;display:flex;gap:8px;align-items:center}
.card-body{padding:20px}
.card-foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;
  align-items:center;gap:12px;flex-wrap:wrap}
.card-note{margin:0;font:400 12.5px/1.5 var(--sans);color:var(--fg3)}
.grid{display:grid;gap:16px}
.grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* stat tile. Evidence is mono, label is mono, everything else is sans. */
.stat{padding:16px 18px}
.stat .label{font:400 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--fg3)}
.stat .val{margin-top:10px;font:400 26px/1 var(--mono);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--fg)}
.stat .delta{margin-top:8px;font:400 11.5px/1 var(--mono);letter-spacing:.02em;color:var(--fg3)}
.stat .delta.up{color:var(--ok)} .stat .delta.down{color:var(--bad)}

/* ── data rows and tables ─────────────────────────────────────────────── */
.rows{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card)}
.row{display:flex;align-items:center;gap:14px;width:100%;padding:13px 18px;
  background:none;border:0;border-bottom:1px solid var(--line);color:var(--fg);
  font-family:var(--sans);text-align:left;text-decoration:none;
  transition:background var(--t-fast)}
.row:last-child{border-bottom:0}
button.row,a.row{cursor:pointer}
button.row:hover,a.row:hover{background:var(--card2)}
.row-main{min-width:0;flex:1}
.row-main b{display:block;font:700 14px/1.35 var(--sans);letter-spacing:-.012em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-main span{display:block;font:400 12.5px/1.45 var(--sans);color:var(--fg2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-meta{margin-left:auto;display:flex;align-items:center;gap:14px;flex:none}
.row-chev{width:16px;height:16px;color:var(--fg3);flex:none;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.table-wrap{border:1px solid var(--line);border-radius:var(--r);overflow-x:auto;
  background:var(--card);-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;min-width:640px}
.table th{position:sticky;top:0;background:var(--bg3);text-align:left;padding:11px 18px;
  font:400 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--fg3);
  border-bottom:1px solid var(--line);white-space:nowrap}
.table td{padding:13px 18px;border-bottom:1px solid var(--line);font:400 14px/1.4 var(--sans);
  color:var(--fg);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr{transition:background var(--t-fast)}
.table tbody tr:hover{background:var(--card2)}
.table td.num,.table th.num{text-align:right}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;color:var(--fg2)}
.mono.ink{color:var(--fg)}

/* status pills. The only place colour is spent besides the mode accent. */
.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--pill);
  font:400 10px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  background:var(--card2);color:var(--fg2);border:1px solid var(--line);white-space:nowrap}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.tag.ok{color:var(--ok);border-color:rgba(79,191,146,.30);background:rgba(79,191,146,.10)}
.tag.warn{color:var(--warn);border-color:rgba(232,180,92,.30);background:rgba(232,180,92,.10)}
.tag.bad{color:var(--bad);border-color:rgba(224,105,123,.30);background:rgba(224,105,123,.10)}
.tag.mode{color:var(--mode);border-color:var(--mode-line);background:var(--mode-soft)}
.tag.plain::before{display:none}

/* ── forms ────────────────────────────────────────────────────────────── */
.field{display:block;margin-bottom:18px}
.field:last-child{margin-bottom:0}
.label{display:block;font:700 12.5px/1.3 var(--sans);letter-spacing:-.006em;color:var(--fg);
  margin-bottom:7px}
.label .opt{font-weight:400;color:var(--fg3);margin-left:6px}
.input,.textarea,.select{width:100%;min-height:var(--ctl-h);padding:10px 14px;
  background:rgba(255,255,255,.03);color:var(--fg);border:1px solid var(--line2);
  border-radius:var(--rs);font:400 14.5px/1.45 var(--sans);letter-spacing:-.008em;
  transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast)}
.input::placeholder,.textarea::placeholder{color:var(--fg3)}
.input:hover,.textarea:hover,.select:hover{background:rgba(255,255,255,.05)}
.textarea{min-height:104px;resize:vertical}
.select{appearance:none;padding-right:38px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#6B747E 50%),
                   linear-gradient(135deg,#6B747E 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 13px) calc(50% + 1px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.input[disabled],.textarea[disabled],.select[disabled]{opacity:.45;cursor:not-allowed}
.input[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--bad)}
.hint{margin:7px 0 0;font:400 12px/1.45 var(--sans);color:var(--fg3)}
.err{margin:7px 0 0;font:400 12px/1.45 var(--sans);color:var(--bad)}
.input.mono-in{font-family:var(--mono);font-size:13px;letter-spacing:.01em}

.check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;padding:6px 0}
.check input{appearance:none;width:18px;height:18px;flex:none;margin:1px 0 0;
  border:1px solid var(--line2);border-radius:5px;background:rgba(255,255,255,.03);
  cursor:pointer;transition:background var(--t-fast),border-color var(--t-fast)}
.check input:checked{background:var(--mode);border-color:var(--mode)}
.check input:checked::after{content:"";display:block;width:100%;height:100%;
  background:no-repeat center/11px 11px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0C0F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.6l5.2 5.2L20 7'/%3E%3C/svg%3E")}
.check span{font:400 13.5px/1.45 var(--sans);color:var(--fg2)}
.check b{display:block;font:700 13.5px/1.4 var(--sans);color:var(--fg)}

.switch{position:relative;display:inline-flex;align-items:center;flex:none}
.switch input{appearance:none;width:44px;height:26px;margin:0;border-radius:var(--pill);
  background:rgba(255,255,255,.10);border:1px solid var(--line2);cursor:pointer;
  transition:background var(--t-fast),border-color var(--t-fast)}
.switch input::after{content:"";position:absolute;left:4px;top:50%;width:18px;height:18px;
  border-radius:50%;background:var(--fg2);transform:translateY(-50%);
  transition:transform var(--t-fast),background var(--t-fast)}
.switch input:checked{background:var(--mode-soft);border-color:var(--mode-line)}
.switch input:checked::after{transform:translate(18px,-50%);background:var(--mode)}
.switch input[disabled]{opacity:.42;cursor:not-allowed}

/* ── settings and billing pattern ─────────────────────────────────────── */
.set-group{margin-bottom:28px}
.set-group>h3{margin:0 0 4px;font:700 16px/1.3 var(--sans);letter-spacing:-.02em}
.set-group>p{margin:0 0 14px;font:400 13.5px/1.55 var(--sans);color:var(--fg2);max-width:64ch}
.set-row{display:flex;align-items:center;gap:20px;padding:16px 20px;
  border-bottom:1px solid var(--line)}
.set-row:last-child{border-bottom:0}
.set-row .set-txt{min-width:0;flex:1}
.set-row .set-txt b{display:block;font:700 14px/1.35 var(--sans);letter-spacing:-.012em}
.set-row .set-txt span{display:block;margin-top:3px;font:400 12.5px/1.5 var(--sans);color:var(--fg2)}
.set-row .set-ctl{margin-left:auto;flex:none;display:flex;align-items:center;gap:10px}
.set-group.danger .card{border-color:rgba(224,105,123,.28)}

.plan{display:flex;align-items:flex-start;gap:24px;flex-wrap:wrap;padding:22px}
.plan .plan-id{min-width:0;flex:1 1 260px}
.plan .plan-name{display:flex;align-items:center;gap:10px;font:700 17px/1.2 var(--sans);
  letter-spacing:-.022em}
.plan .plan-price{margin-top:12px;font:400 30px/1 var(--mono);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.plan .plan-price sub{font-size:12px;vertical-align:baseline;color:var(--fg3);
  letter-spacing:.06em;margin-left:6px}
.plan .plan-meta{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px 18px;
  font:400 11px/1.5 var(--mono);letter-spacing:.04em;color:var(--fg3)}
.plan .plan-act{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}

/* ── empty states. Task oriented, never a blank silence. ──────────────── */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:12px;padding:52px 28px}
.empty .ico{width:44px;height:44px;border-radius:var(--rs);display:grid;place-items:center;
  background:var(--mode-soft);border:1px solid var(--mode-line);color:var(--mode)}
.empty .ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.empty h4{margin:4px 0 0;font:700 16px/1.3 var(--sans);letter-spacing:-.02em}
.empty p{margin:0;font:400 13.5px/1.6 var(--sans);color:var(--fg2);max-width:44ch}
.empty .btn{margin-top:6px}

/* ── loading skeletons ────────────────────────────────────────────────── */
.sk{position:relative;overflow:hidden;background:rgba(255,255,255,.06);border-radius:8px}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);
  animation:sweep 1400ms ease-in-out infinite}
@keyframes sweep{100%{transform:translateX(100%)}}
.sk-line{height:12px;margin-bottom:10px}
.sk-line:last-child{margin-bottom:0}
.sk-line.w80{width:80%} .sk-line.w60{width:60%} .sk-line.w40{width:40%}
.sk-title{height:20px;width:46%;margin-bottom:16px;border-radius:6px}
.sk-avatar{width:34px;height:34px;border-radius:50%;flex:none}
.sk-row{display:flex;align-items:center;gap:14px;padding:15px 18px;
  border-bottom:1px solid var(--line)}
.sk-row:last-child{border-bottom:0}
.sk-row .sk-col{flex:1}

/* ── toasts ───────────────────────────────────────────────────────────── */
.toasts{position:fixed;right:20px;bottom:20px;z-index:110;display:flex;
  flex-direction:column;gap:10px;width:min(360px,calc(100vw - 40px));pointer-events:none}
.toast{display:flex;align-items:flex-start;gap:11px;padding:13px 14px;
  background:var(--bg3);border:1px solid var(--line2);border-radius:var(--rs);
  box-shadow:var(--lift-2);pointer-events:auto;
  animation:toast-in 240ms cubic-bezier(.2,.8,.2,1)}
.toast.is-out{animation:toast-out 180ms ease-in forwards}
.toast .bar{width:3px;align-self:stretch;border-radius:3px;background:var(--mode);flex:none}
.toast.ok .bar{background:var(--ok)} .toast.warn .bar{background:var(--warn)}
.toast.bad .bar{background:var(--bad)}
.toast .msg{min-width:0;flex:1;font:400 13.5px/1.45 var(--sans);color:var(--fg)}
.toast .msg b{display:block;font-weight:700;margin-bottom:2px}
.toast .x{background:none;border:0;color:var(--fg3);cursor:pointer;padding:2px;
  border-radius:6px;line-height:0;flex:none}
.toast .x:hover{color:var(--fg)}
.toast .x svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round}
@keyframes toast-in{from{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes toast-out{to{opacity:0;transform:translateY(6px)}}

/* ── modals ───────────────────────────────────────────────────────────── */
.scrim{position:fixed;inset:0;z-index:100;background:rgba(5,7,10,.66);
  backdrop-filter:blur(6px);display:none;align-items:flex-start;justify-content:center;
  padding:max(6vh,24px) 20px 24px;overflow-y:auto}
.scrim.open{display:flex;animation:fade 180ms ease-out}
@keyframes fade{from{opacity:0}}
.modal{width:100%;max-width:520px;background:var(--bg3);border:1px solid var(--line2);
  border-radius:var(--r);box-shadow:var(--lift-2);
  animation:modal-in 220ms cubic-bezier(.2,.8,.2,1)}
.modal.wide{max-width:720px}
@keyframes modal-in{from{opacity:0;transform:translateY(12px) scale(.985)}}
.modal-head{display:flex;align-items:flex-start;gap:14px;padding:20px 22px 0}
.modal-head h3{margin:0;font:700 18px/1.25 var(--sans);letter-spacing:-.024em}
.modal-head p{margin:6px 0 0;font:400 13.5px/1.55 var(--sans);color:var(--fg2)}
.modal-head .x{margin-left:auto;background:none;border:0;color:var(--fg3);cursor:pointer;
  padding:4px;border-radius:8px;line-height:0;flex:none}
.modal-head .x:hover{color:var(--fg);background:var(--card2)}
.modal-head .x svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round}
.modal-body{padding:18px 22px}
.modal-foot{display:flex;align-items:center;gap:10px;padding:16px 22px 20px;flex-wrap:wrap}
.modal-foot .spread{margin-left:auto}

/* ── mobile bar. Under 860 the rail becomes a bottom bar. ─────────────── */
.app-bar{display:none}

@media (max-width:1120px){
  .app-content{padding:24px 22px 72px}
  .app-topbar{padding:0 22px}
  .grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}
  /* the drawer and its scrim must sit ABOVE the bottom bar (z-index 45),
     or the account footer is clipped by it and the bar stays lit. */
  .app-rail{position:fixed;left:0;top:0;bottom:0;z-index:50;width:min(300px,86vw);
    padding-bottom:max(12px,env(safe-area-inset-bottom));
    transform:translateX(-102%);transition:transform var(--t-fast);
    box-shadow:0 0 60px rgba(0,0,0,.6)}
  .app[data-drawer="open"] .app-rail{transform:none}
  .rail-scrim{position:fixed;inset:0;z-index:49;background:rgba(5,7,10,.66);display:none}
  .app[data-drawer="open"] .rail-scrim{display:block}
  .app .rail-toggle{display:inline-flex}
  .app-content{padding:20px 16px calc(var(--bar-h) + 34px)}
  .app-topbar{padding:0 14px}
  .grid.c2,.grid.c3,.grid.c4{grid-template-columns:minmax(0,1fr)}
  .page-head{gap:14px}
  .page-actions{width:100%}
  .page-actions .btn{flex:1}
  .plan .plan-act{margin-left:0;width:100%}
  .plan .plan-act .btn{flex:1}
  .set-row{flex-wrap:wrap;gap:12px}
  .set-row .set-ctl{margin-left:0;width:100%}
  .toasts{right:12px;left:12px;bottom:calc(var(--bar-h) + 12px);width:auto}
  .modal{max-width:none;border-radius:var(--r) var(--r) 0 0}
  .scrim{align-items:flex-end;padding:0}

  /* the bar itself */
  .app-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;
    align-items:stretch;gap:2px;height:var(--bar-h);padding:6px 6px
      max(6px,env(safe-area-inset-bottom));
    background:rgba(14,17,23,.94);backdrop-filter:blur(14px);
    border-top:1px solid var(--line)}
  .app-bar .bar-item{flex:1;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:3px;background:none;border:0;border-radius:var(--rxs);
    color:var(--fg3);font:400 10px/1 var(--sans);letter-spacing:.005em;cursor:pointer;
    text-decoration:none;padding:0;min-width:0}
  .app-bar .bar-item svg{width:19px;height:19px;stroke:currentColor;fill:none;
    stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .app-bar .bar-item.is-active,.app-bar .bar-item[aria-current="page"],
  .app-bar .bar-item[aria-selected="true"]{color:var(--mode);font-weight:700}
  .app-bar .bar-item span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (min-width:861px){.rail-scrim{display:none!important}}
@media (max-width:420px){
  .page-title{font-size:23px}
  .app-content{padding:18px 14px calc(var(--bar-h) + 30px)}
  .card.pad,.card-body,.modal-body{padding:16px}
  .plan{padding:18px}
}

/* ── reduced motion. Everything still works, nothing moves. ───────────── */
@media (prefers-reduced-motion:reduce){
  .app *,.app *::before,.app *::after,.toast,.modal,.scrim{
    animation-duration:1ms!important;animation-iteration-count:1!important;
    transition-duration:1ms!important;scroll-behavior:auto!important}
  .sk::after{display:none}
  .btn:hover,.btn:active{transform:none}
}