/* The account panel (antitheft.pro/account): sign-in, then overview, devices and billing. Tokens and components come from
   ../system.css (the app's palette, glass, chips, buttons, .seg); this file adds only the panel's own rules. The bar and the
   theme switch are the landing page's (next.css), repeated here so the page needs none of next.css. */

/* ---- the bar: the landing page's (next.css), liquid glass (system.css .glass.lg + ../liquid-glass.js, which only the bar and theme switch use) floating 12px from the
   top inside the gutters; tall with a big wordmark at the top of the page, the normal 46px bar once it scrolls (account.js
   sets .is-scrolled) ---- */
:root { --bar-h: 76px; }
.nav { position: fixed; top: 12px; left: var(--gutter); right: var(--gutter); height: var(--bar-h); padding-inline: 22px 10px; border-radius: 18px; transition: height 0.25s var(--ease); }
.nav.is-scrolled { height: var(--nav-h); }
.nav .pill { height: 32px; min-width: 32px; padding: 0 13px 0 11px; border: 0; border-radius: 999px; background: transparent; }
.nav .pill:hover { background: var(--hover-tint); }
.nav .pill.is-here { color: var(--ink); background: light-dark(rgba(16, 24, 44, 0.08), rgba(255, 255, 255, 0.12)); }
.nav-links .pill > span { text-transform: lowercase; }
.wordmark { gap: 10px; transition: gap 0.25s var(--ease); }
.wordmark-name { font-size: 28px; letter-spacing: -0.02em; color: inherit; text-decoration: none; transition: font-size 0.25s var(--ease); }
.wordmark-by { font-size: 13px; transition: font-size 0.25s var(--ease); }
.nav.is-scrolled .wordmark { gap: 6px; }
.nav.is-scrolled .wordmark-name { font-size: 15px; letter-spacing: -0.01em; }
.nav.is-scrolled .wordmark-by { font-size: 11px; }
@media (max-width: 560px) { :root { --bar-h: 62px; } .wordmark-name { font-size: 23px; } .wordmark-by { font-size: 12px; } .nav { padding-inline: 16px 8px; border-radius: 16px; } }
.nav-links[hidden] { display: none; }
.nav-sep { align-self: center; width: 1px; height: 18px; margin-inline: 8px; background: var(--line); }
.nav-who { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--muted); padding-inline: 4px 6px; }
@media (max-width: 900px) { .nav-who { display: none; } }
@media (max-width: 640px) {
  .nav-links .pill > span { display: none; }
  .nav-links .pill { padding: 0; }
  .nav-sep { margin-inline: 4px; }
}

/* ---- the theme switch (next.css .theme-fab) ---- */
.theme-fab {
  position: fixed; z-index: 45; right: 26px; bottom: 22px;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-items: center;
  width: 72px; height: 38px; padding: 3px; border-radius: 999px; color: var(--muted); cursor: pointer;
}
.theme-fab::before { content: ""; position: absolute; top: 3px; left: 3px; width: 32px; height: 32px; border-radius: 999px; background: light-dark(rgba(16, 24, 44, 0.08), rgba(255, 255, 255, 0.12)); transition: transform 0.3s var(--ease); transform: translateX(32px); }
.theme-fab .ui-pic { position: relative; font-size: 17px; transition: color 0.2s ease; }
.theme-fab:hover { color: var(--ink); }
.theme-fab .fab-moon { color: var(--ink); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-fab::before { transform: none; }
  :root:not([data-theme="dark"]) .theme-fab .fab-sun { color: var(--ink); }
  :root:not([data-theme="dark"]) .theme-fab .fab-moon { color: inherit; }
}
:root[data-theme="light"] .theme-fab::before { transform: none; }
:root[data-theme="light"] .theme-fab .fab-sun { color: var(--ink); }
:root[data-theme="light"] .theme-fab .fab-moon { color: inherit; }
:root[data-theme="dark"] .theme-fab::before { transform: translateX(32px); }
:root[data-theme="dark"] .theme-fab .fab-moon { color: var(--ink); }
:root[data-theme="dark"] .theme-fab .fab-sun { color: inherit; }
@media (hover: none) { .theme-fab { right: 14px; bottom: 14px; } }

/* ---- panels ----
   The bar's glass look (system.css .glass.lg: light tint, hairline edge, soft shadow) without its cost. Behind the panels is
   the fixed, flat canvas, so there is nothing to blur or bend: no backdrop-filter and no liquid-glass.js refraction (one SVG
   displacement filter per card, redrawn as the page scrolls, is what made the page lag). Only the sign-in card, which stands
   over the watchman, adds a plain CSS blur (--frost). The bar and the theme switch keep the landing's liquid glass. */
.pane { background: var(--lg-tint); box-shadow: inset 0 0 0 1px var(--lg-edge), 0 10px 30px -12px var(--lg-drop); }
.pane--frost { -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); }
@media (prefers-reduced-transparency: reduce) { .pane, .pane--frost { background: var(--glass-solid); backdrop-filter: none; -webkit-backdrop-filter: none; } }

/* ---- shared bits ---- */
[hidden] { display: none !important; }
main { min-height: 100svh; }
.eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; color: var(--muted); }
.field { display: flex; flex-direction: column; gap: 7px; }
.field-label { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; color: var(--muted); }
.field input { height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--btn-fill); color: var(--ink); font: inherit; font-size: 15px; }
.field input:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.btn { cursor: pointer; }
.btn--wide { width: 100%; justify-content: center; }
.btn--sm { height: 36px; padding: 0 14px; font-size: 13px; }
.btn .ui-pic { font-size: 16px; }
.btn:disabled { opacity: 0.55; cursor: default; filter: none; transform: none; }
.btn--danger { border: 1px solid color-mix(in srgb, var(--critical) 45%, transparent); background: color-mix(in srgb, var(--critical) 12%, transparent); color: color-mix(in srgb, var(--critical) 75%, var(--ink)); }
.btn--danger:hover { background: color-mix(in srgb, var(--critical) 20%, transparent); }
.linkbtn { font-size: 11.5px; letter-spacing: 0.08em; color: var(--accent-2); cursor: pointer; }
.linkbtn:hover { text-decoration: underline; text-underline-offset: 3px; }
.inline-link { color: var(--accent-2); }
.inline-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.chip:empty { display: none; }
.spin { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent-2); animation: spin 0.8s linear infinite; display: inline-block; }
.spin--sm { width: 14px; height: 14px; border-width: 2px; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }
.boot { min-height: 100svh; display: grid; place-items: center; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.dot--good { background: var(--good); box-shadow: 0 0 8px color-mix(in srgb, var(--good) 60%, transparent); }
.dot--warn { background: var(--warning); }
.dot--crit { background: var(--critical); }
.dot--live { animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

/* ---- sign-in gate ---- */
/* the pricing band's blue light, and its watchman (next.css .price-emblem: one ink colour through a mask, the painting's tones
   kept as alpha) standing on the bottom edge at the left of the screen, mirrored so he looks in at the card */
.gate {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: calc(var(--bar-h) + 72px) 16px 56px;
  background:
    radial-gradient(900px 520px at 18% 8%, light-dark(rgba(42, 99, 207, 0.16), rgba(58, 110, 220, 0.20)), transparent 70%),
    radial-gradient(800px 480px at 88% 100%, light-dark(rgba(42, 99, 207, 0.10), rgba(58, 110, 220, 0.12)), transparent 70%);
}
.gate-stage { position: relative; width: min(100%, 440px); }
.gate-art {
  --emb: url(../img/app/emblem-dark.png);
  position: absolute; z-index: -1; left: 0; bottom: 0;
  height: min(88svh, 900px); max-width: 46vw; aspect-ratio: 1006 / 1438;
  transform: scaleX(-1);
  background: var(--ink);
  -webkit-mask: var(--emb) right bottom / contain no-repeat;
  mask: var(--emb) right bottom / contain no-repeat;
  pointer-events: none;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .gate-art { --emb: url(../img/app/emblem-light.png); } }
:root[data-theme="light"] .gate-art { --emb: url(../img/app/emblem-light.png); }
@media (max-width: 760px) { .gate-art { height: 52svh; max-width: 60vw; } }
.gate-card { position: relative; width: 100%; display: flex; flex-direction: column; gap: 18px; padding: clamp(22px, 3vw, 34px); border-radius: var(--r-dialog); }
.gate-title { font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.gate-lede { font-size: 15px; line-height: 1.5; color: var(--muted); }
.gate-lede b { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.gate-google { display: flex; flex-direction: column; gap: 8px; }
/* Continue with Google: our own button (Google's mark, its own colours, on the panel's control style), Google's branding rules:
   the full-colour G, unaltered, on a light or dark neutral fill, "Continue with Google" */
.gbtn {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 48px; padding: 0 18px;
  border-radius: var(--r-ctl); font-size: 15px; font-weight: 600; letter-spacing: -0.005em; color: var(--ink);
  background: light-dark(#ffffff, rgba(255, 255, 255, 0.07));
  box-shadow: inset 0 0 0 1px light-dark(rgba(16, 24, 44, 0.14), rgba(255, 255, 255, 0.14)), 0 6px 18px -10px var(--lg-drop);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
  cursor: pointer;
}
.gbtn:hover { background: light-dark(#f6f8fc, rgba(255, 255, 255, 0.11)); box-shadow: inset 0 0 0 1px light-dark(rgba(16, 24, 44, 0.22), rgba(255, 255, 255, 0.22)), 0 8px 22px -10px var(--lg-drop); }
.gbtn:active { transform: scale(0.99); }
.gbtn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.gbtn:disabled { cursor: default; opacity: 0.7; }
.gbtn-g { width: 20px; height: 20px; flex-shrink: 0; }
.gate-note { font-size: 13px; color: var(--muted); }
.gate-or { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.gate-or::before, .gate-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.gate-form { display: flex; flex-direction: column; gap: 14px; }
.gate-msg { min-height: 1.4em; font-size: 14px; line-height: 1.45; color: var(--muted); }
.gate-msg.is-err { color: color-mix(in srgb, var(--critical) 80%, var(--ink)); }
.gate-msg.is-ok { color: color-mix(in srgb, var(--good) 75%, var(--ink)); }
.gate-sent { display: flex; flex-direction: column; gap: 14px; }
.gate-sent-icon { font-size: 34px; color: var(--accent-2); }
.gate-sent-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.gate-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.gate-back { font-size: 14px; color: var(--accent-2); }
.gate-back:hover { text-decoration: underline; text-underline-offset: 3px; }
.gate-app { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding-top: 16px; border-top: 1px solid var(--line); }
.gate-app p { font-size: 14px; line-height: 1.5; color: var(--muted); }

/* ---- signed-in layout ---- */
.app { width: min(100% - 32px, 1120px); margin-inline: auto; padding: calc(var(--bar-h) + 52px) 0 88px; display: flex; flex-direction: column; gap: 28px; }
.page { display: flex; flex-direction: column; gap: 32px; animation: page-in 0.4s var(--ease); }
@keyframes page-in { from { transform: translateY(8px); } }   /* no opacity: a fading container stops its glass blurring */
.page-head { display: flex; flex-direction: column; gap: 10px; }
.page-title { font-size: clamp(30px, 3.4vw, 46px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; text-wrap: balance; }
.page-lede { font-size: clamp(15px, 1.1vw, 17px); line-height: 1.55; color: var(--muted); max-width: 64ch; text-wrap: pretty; }
.page-lede b { color: var(--ink); font-weight: 600; }
.section { display: flex; flex-direction: column; gap: 14px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.fine { font-size: 13px; line-height: 1.5; color: var(--muted); }
.empty { padding: 22px; font-size: 14px; color: var(--muted); }
.banner { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--r-card); font-size: 14px; line-height: 1.45; border: 1px solid var(--line); background: var(--btn-fill); }
.banner--good { border-color: color-mix(in srgb, var(--good) 35%, transparent); background: color-mix(in srgb, var(--good) 10%, transparent); }
.banner--warn { border-color: color-mix(in srgb, var(--warning) 40%, transparent); background: color-mix(in srgb, var(--warning) 10%, transparent); }
.banner--crit { border-color: color-mix(in srgb, var(--critical) 40%, transparent); background: color-mix(in srgb, var(--critical) 10%, transparent); }
.banner .btn { margin-left: auto; }
.foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); }
.foot a:hover { color: var(--accent-2); }

/* ---- overview tiles ---- */
.ov-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ov-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* the cloud off: no SUBSCRIPTIONS tile */
@media (max-width: 860px) { .ov-grid { grid-template-columns: 1fr; } }
.tile { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; min-height: 150px; border-radius: var(--r-card); transition: background-color 0.2s ease; }
a.tile.pane:hover { background: light-dark(rgba(255, 255, 255, 0.46), rgba(40, 40, 48, 0.36)); }
.tile-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tile-label { font-size: 11px; letter-spacing: 0.1em; color: var(--muted); }
.tile-value { font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.tile-meta { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.tile-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }

/* ---- device rows (overview) ---- */
.devmini { border-radius: var(--r-card); overflow: hidden; }
.devmini-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--line); }
.devmini-row:first-child { border-top: 0; }
.devmini-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.devmini-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.plat { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--btn-fill); color: var(--ink); flex-shrink: 0; }
.plat .ui-pic { font-size: 18px; }

/* ---- devices page ---- */
.seats { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 18px 22px; border-radius: var(--r-card); }
.seats-count { font-size: 15px; }
.seats-count b { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.seats-bar { display: flex; gap: 5px; flex: 1; min-width: 160px; max-width: 320px; }
.seats-bar i { flex: 1; height: 8px; border-radius: 4px; background: var(--line); }
.seats-bar i.on { background: var(--accent); }
.seats-note { flex-basis: 100%; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.devlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 860px) { .devlist { grid-template-columns: 1fr; } }
.dev { display: flex; flex-direction: column; gap: 16px; padding: 20px 22px; border-radius: var(--r-card); }
.dev-head { display: flex; align-items: center; gap: 14px; }
.dev-title { min-width: 0; flex: 1; }
.dev-name { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-sub { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: hidden; }
.dev-stat { padding: 10px 12px; border-left: 1px solid var(--line); }
.dev-stat:first-child { border-left: 0; }
.dev-stat b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.dev-stat span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; }
.dev-stat--crit b { color: color-mix(in srgb, var(--critical) 80%, var(--ink)); }
.dev-stat--good b { color: color-mix(in srgb, var(--good) 75%, var(--ink)); }
.dev-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 16px; font-size: 13.5px; }
.dev-meta dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; padding-top: 2px; }
.dev-meta dd { margin: 0; overflow-wrap: anywhere; }
.dev-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.dev-foot .fine { flex: 1; min-width: 180px; }
.dev--removed .dev-name, .dev--removed .dev-meta dd { color: var(--muted); }
.dev-confirm { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r-ctl); border: 1px solid color-mix(in srgb, var(--critical) 35%, transparent); background: color-mix(in srgb, var(--critical) 7%, transparent); font-size: 13.5px; line-height: 1.5; }
.dev-confirm .gate-row { gap: 10px; }
.removed summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 11.5px; letter-spacing: 0.08em; color: var(--muted); list-style: none; }
.removed summary::-webkit-details-marker { display: none; }
.removed summary .ui-pic { font-size: 14px; transition: transform 0.2s var(--ease); }
.removed[open] summary .ui-pic { transform: rotate(90deg); }
.removed[open] summary { margin-bottom: 14px; }
.steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.steps b { color: var(--ink); font-weight: 600; }

/* ---- billing: status ---- */
.status { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 24px; align-items: center; padding: 22px 24px; border-radius: var(--r-card); }
@media (max-width: 720px) { .status { grid-template-columns: 1fr; } }
.status-main { display: flex; flex-direction: column; gap: 8px; }
.status-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.status-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.status-text { font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 70ch; }
.status-text b { color: var(--ink); font-weight: 600; }
.status-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.status-parts { grid-column: 1 / -1; display: flex; gap: 28px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line); }
.status-part span { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; }
.status-part b { font-size: 15px; font-weight: 600; }

/* ---- billing: plans ---- */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 720px) { .plans { grid-template-columns: 1fr; } }
.plan { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; border-radius: var(--r-card); }
.plan--best { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, transparent), 0 24px 48px -27px var(--glass-drop); }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plan-name { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }
.plan-price { display: flex; align-items: baseline; gap: 8px; }
.plan-price b { font-size: 40px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.plan-price span { font-size: 14px; color: var(--muted); }
.plan-desc { font-size: 14px; line-height: 1.5; color: var(--muted); }
.plan .btn { margin-top: auto; justify-content: center; }
.chip--accent { color: var(--ink); background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

/* ---- billing: crypto ---- */
.crypto { display: grid; grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.4fr); border-radius: var(--r-card); overflow: hidden; }
@media (max-width: 820px) { .crypto { grid-template-columns: 1fr; } }
.crypto--intro { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; }
.coins { display: flex; flex-direction: column; border-right: 1px solid var(--line); }
@media (max-width: 820px) { .coins { border-right: 0; border-bottom: 1px solid var(--line); } }
.coin { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 13px 18px; border-top: 1px solid var(--line); text-align: left; transition: background-color 0.15s ease; }
.coin:first-child { border-top: 0; }
.coin:hover { background: var(--hover-tint); }
.coin[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.coin-sym { font-weight: 700; }
.coin-net { grid-column: 1; font-size: 12.5px; color: var(--muted); }
.coin-fee { grid-column: 2; grid-row: 1 / span 2; text-align: right; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.coin-fee em { display: block; font-style: normal; font-size: 9.5px; letter-spacing: 0.08em; }
.coin-fee--high { color: color-mix(in srgb, var(--warning) 80%, var(--ink)); }
.addr { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; min-width: 0; }
.addr-title { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.addr-box { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--btn-fill); }
.addr-box code { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 13px; overflow-wrap: anywhere; user-select: all; }
.addr-warn { font-size: 13px; line-height: 1.5; color: color-mix(in srgb, var(--warning) 75%, var(--ink)); }
.addr-wait { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; color: var(--muted); }
.addr-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.deps { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.deps li { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.deps li span:last-child { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }

/* ---- ledger ---- */
.ledger { border-radius: var(--r-card); overflow: hidden; }
.lrow { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 13px 20px; border-top: 1px solid var(--line); font-size: 14px; }
.lrow:first-child { border-top: 0; }
.lrow time { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.lrow-what { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lrow-what .ui-pic { font-size: 16px; color: var(--muted); flex-shrink: 0; }
.lrow-what span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow-amt { font-weight: 600; text-align: right; white-space: nowrap; }
.lrow-amt--neg { color: color-mix(in srgb, var(--critical) 75%, var(--ink)); }
.lrow-days { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); text-align: right; min-width: 70px; white-space: nowrap; }
@media (max-width: 640px) {
  .lrow { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .lrow time { grid-column: 1; grid-row: 2; }
  .lrow-what { grid-column: 1; grid-row: 1; }
  .lrow-amt { grid-column: 2; grid-row: 1; }
  .lrow-days { grid-column: 2; grid-row: 2; }
}

/* ---- toast ---- */
.toast { position: fixed; left: 50%; bottom: 26px; z-index: 70; transform: translateX(-50%); padding: 10px 16px; border-radius: 999px; font-size: 12px; letter-spacing: 0.04em; color: var(--ink); background: var(--glass-solid); border: 1px solid var(--line); box-shadow: 0 14px 30px -14px var(--glass-drop); animation: toast-in 0.3s var(--ease); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ---- a device's subscription (devices page) ---- */
.devsub { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: var(--r-ctl); border: 1px solid var(--line); font-size: 13.5px; line-height: 1.5; }
.devsub--on { border-color: color-mix(in srgb, var(--good) 30%, transparent); background: color-mix(in srgb, var(--good) 6%, transparent); }
.devsub--off { border-color: color-mix(in srgb, var(--warning) 40%, transparent); background: color-mix(in srgb, var(--warning) 8%, transparent); }
.devsub-line { display: flex; gap: 10px; align-items: flex-start; }
.devsub-line .ui-pic { font-size: 16px; flex-shrink: 0; margin-top: 2px; }
.devsub--on .devsub-line .ui-pic { color: var(--good); }
.devsub--off .devsub-line .ui-pic { color: var(--warning); }
.devsub-line b { font-weight: 600; }
.devsub-act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* our own select (account.js picker): the control's button, and a floating list in the panel's glass (a light tint and a
   CSS blur: it is small and only open for a moment, so no refraction filter) */
.pick { position: relative; display: inline-flex; max-width: 100%; }
.pick-btn {
  display: inline-flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px 0 13px;
  border-radius: var(--r-ctl); font-size: 13px; color: var(--ink); text-align: left;
  background: var(--btn-fill); box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.pick-btn:hover, .pick.is-open .pick-btn { background: var(--btn-fill-hover); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 55%, var(--line)); }
.pick-btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.pick-btn:disabled { opacity: 0.6; cursor: default; }
.pick-btn.is-placeholder .pick-label { color: var(--muted); }
.pick-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-chev { font-size: 14px; color: var(--muted); flex-shrink: 0; transition: transform 0.2s var(--ease); }
.pick.is-open .pick-chev { transform: rotate(180deg); }
.pick-list {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 100%; max-width: min(420px, 90vw); max-height: 280px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px; padding: 5px; border-radius: 12px;
  background: light-dark(rgba(250, 251, 254, 0.86), rgba(24, 24, 28, 0.82));
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 0 0 1px var(--lg-edge), 0 18px 40px -16px var(--glass-drop);
  animation: pick-in 0.16s var(--ease);
}
.pick--up .pick-list { top: auto; bottom: calc(100% + 6px); }
@keyframes pick-in { from { transform: translateY(-4px); } }
.pick--up .pick-list { animation-name: pick-in-up; }
@keyframes pick-in-up { from { transform: translateY(4px); } }
.pick-opt {
  display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 7px 10px; border-radius: 8px;
  font-size: 13px; color: var(--ink); text-align: left; white-space: nowrap;
}
.pick-opt span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pick-opt:hover, .pick-opt:focus-visible { background: var(--hover-tint); outline: none; }
.pick-opt[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.pick-tick { font-size: 14px; color: var(--accent-2); flex-shrink: 0; }
@media (prefers-reduced-transparency: reduce) { .pick-list { background: var(--glass-solid); backdrop-filter: none; -webkit-backdrop-filter: none; } }

/* ---- billing: the subscription list ---- */
.subs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 860px) { .subs { grid-template-columns: 1fr; } }
.sub { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; border-radius: var(--r-card); scroll-margin-top: calc(var(--nav-h) + 30px); }
.sub:target { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, transparent), 0 24px 48px -27px var(--glass-drop); }
.sub-head { display: flex; align-items: center; gap: 12px; }
.sub-title { flex: 1; min-width: 0; }
.sub-name { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.sub-sub { font-size: 11px; letter-spacing: 0.06em; color: var(--muted); }
.sub-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sub-row .pick { flex: 1; min-width: 180px; }
.sub-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.subs-foot { grid-column: 1 / -1; }
.toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); cursor: pointer; user-select: none; }
.toggle input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

/* ---- billing: who a new subscription is for ---- */
.buyfor { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-radius: var(--r-card); }
.buyfor .pick { min-width: 260px; }
.plan-btns { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.plan-btns .btn { justify-content: center; margin-top: 0; }

/* ---- dialogs (account.js openDialog): a scrim that fades its colour (never opacity: a fading container stops the glass in it
   blurring) and a frosted panel that rises in ---- */
.modal-open body { overflow: hidden; }
.modal {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px;
  background: transparent; transition: background-color 0.22s ease;
}
.modal.is-in { background: light-dark(rgba(16, 24, 44, 0.22), rgba(0, 0, 0, 0.5)); }
.modal-panel {
  position: relative; width: min(100%, 640px); max-height: calc(100svh - 32px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px; padding: 22px 24px 24px; border-radius: var(--r-dialog);
  background: light-dark(rgba(248, 250, 254, 0.86), rgba(22, 22, 26, 0.78));
  transform: translateY(10px) scale(0.985); transition: transform 0.28s var(--ease);
}
.modal.is-in .modal-panel { transform: none; }
.modal-panel:focus { outline: none; }
.modal-panel .crypto { grid-template-columns: 1fr; }
.modal-panel .coins { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.modal-panel .coin { border-top: 0; border-left: 1px solid var(--line); flex: 0 0 auto; }
.modal-panel .coin:first-child { border-left: 0; }
.modal-panel .coin[aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--accent); }
.modal-panel .addr { padding: 16px 18px; }
.modal-top { display: flex; align-items: center; justify-content: space-between; min-height: 28px; }
.modal-back { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 0.08em; color: var(--muted); }
.modal-back:hover { color: var(--ink); }
.modal-back .ui-pic { font-size: 14px; }
.modal-x { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 999px; color: var(--muted); transition: background-color 0.15s ease, color 0.15s ease; }
.modal-x:hover { color: var(--ink); background: var(--hover-tint); }
.modal-x .ui-pic { font-size: 16px; }
.modal-title { font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; }
.modal-text { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.modal-field { display: flex; align-items: center; gap: 12px; }
.modal-field .pick { flex: 1; }
.modal-opts { display: flex; flex-direction: column; gap: 8px; }
.modal-opt {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 14px; text-align: left;
  background: var(--btn-fill); box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.modal-opt:hover:not(:disabled) { background: var(--btn-fill-hover); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 50%, var(--line)); }
.modal-opt:active:not(:disabled) { transform: scale(0.995); }
.modal-opt:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.modal-opt:disabled { cursor: default; }
.modal-opt:disabled .modal-opt-ic, .modal-opt:disabled .modal-opt-name { color: var(--muted); }
.modal-opt.is-on { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, transparent); }
.modal-opt-ic { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: 11px; color: var(--accent-2); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.modal-opt-ic .ui-pic { font-size: 19px; }
.modal-opt-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.modal-opt-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.modal-opt-desc { font-size: 13px; line-height: 1.45; color: var(--muted); }
.modal-opt-go { font-size: 16px; color: var(--muted); flex-shrink: 0; }
.modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin-top: 4px; }
.modal-actions .btn { min-width: 140px; justify-content: center; }
.modal-done { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 999px; color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.modal-done .ui-pic { font-size: 32px; }
/* the plans side by side: name and saving, the price big, one line under it */
.modal-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }
.modal-plan {
  display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; border-radius: 14px; text-align: left;
  background: var(--btn-fill); box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.modal-plan:hover { background: var(--btn-fill-hover); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 50%, var(--line)); }
.modal-plan:active { transform: scale(0.995); }
.modal-plan:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.modal-plan.is-on { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, transparent); }
.modal-plan-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.modal-plan-price { display: flex; align-items: baseline; gap: 6px; }
.modal-plan-price b { font-size: 32px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--ink); }
.modal-plan-price span { font-size: 13px; color: var(--muted); }
/* the ways to pay side by side on a wide screen: icon, name, one line, no chevron */
@media (min-width: 641px) {
  .modal-opts--row { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }
  .modal-opts--row .modal-opt { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
  .modal-opts--row .modal-opt-go { display: none; }
}
@media (max-width: 640px) { .modal-plans { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .modal { place-items: end center; padding: 0; } .modal-panel { width: 100%; border-radius: var(--r-dialog) var(--r-dialog) 0 0; max-height: 92svh; } }

/* ---- support: one live conversation (the cloud's /v1/support), the bubbles in the app's own tokens ---- */
.nav .pill { position: relative; }
.pill-badge { min-width: 17px; height: 17px; margin-left: 6px; padding: 0 5px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 10.5px; font-weight: 600; line-height: 1; color: #fff; background: var(--accent); }
.pill-badge[hidden] { display: none; }
@media (max-width: 640px) { .pill-badge { position: absolute; top: -3px; right: -5px; margin: 0; } }
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; }

.chat { display: flex; flex-direction: column; min-height: min(70svh, 720px); max-height: calc(100svh - var(--nav-h) - 120px); overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 14px; }
.chat-who { flex: 1; min-width: 0; color: var(--muted); }
.chat-who b { color: var(--ink); font-weight: 600; }
.chat-log { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.chat-more { align-self: center; }
.chat-day { align-self: center; margin-block: 6px 2px; font-size: 11px; letter-spacing: 0.08em; color: var(--muted); }
.chat-msg { display: flex; flex-direction: column; gap: 4px; max-width: min(78%, 620px); }
.chat-msg--me { align-self: flex-end; align-items: flex-end; }
.chat-msg--them { align-self: flex-start; align-items: flex-start; }
.chat-bubble { padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg--me .chat-bubble { color: #fff; background: var(--accent); border-bottom-right-radius: 5px; }
.chat-msg--them .chat-bubble { color: var(--ink); background: var(--btn-fill); box-shadow: inset 0 0 0 1px var(--line); border-bottom-left-radius: 5px; }
.chat-msg.is-sending .chat-bubble { opacity: 0.6; }
.chat-msg.is-failed .chat-bubble { box-shadow: inset 0 0 0 1.5px var(--critical); }
.chat-meta { font-size: 11.5px; color: var(--muted); padding-inline: 4px; }
.chat-meta .linkbtn { font-size: 11px; }
.chat-note { align-self: center; max-width: 60ch; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.chat-empty { margin: auto; max-width: 46ch; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.chat-empty .ui-pic { font-size: 30px; color: var(--accent-2); }
.chat-empty b { color: var(--ink); font-size: 16px; font-weight: 600; }
.chat-typing { padding: 0 18px 8px; font-size: 11.5px; letter-spacing: 0.06em; color: var(--muted); }
.chat-typing[hidden] { display: none; }
.chat-form { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px 12px; border-top: 1px solid var(--line); }
.chat-form textarea { width: 100%; min-height: 72px; max-height: 40svh; resize: vertical; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--btn-fill); color: var(--ink); font: inherit; font-size: 15px; line-height: 1.5; }
.chat-form textarea:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.chat-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.chat-row .btn { margin-left: auto; }
.chat-form .gate-msg:empty { display: none; }
@media (max-width: 640px) {
  .chat { min-height: 70svh; max-height: none; }
  .chat-msg { max-width: 88%; }
  .chat-log { padding: 14px; }
}

/* ---- settings: rows of a label and its control ---- */
.setlist { display: flex; flex-direction: column; }
.setrow { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-top: 1px solid var(--line); }
.setrow:first-child { border-top: 0; }
.setrow-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.setrow-copy b { font-size: 15px; font-weight: 600; color: var(--ink); }
.setrow .toggle input { width: 18px; height: 18px; }
.setrow-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) { .setrow { flex-direction: column; align-items: stretch; } .setrow-acts { justify-content: flex-start; } }
.legal-text { max-height: 56svh; overflow: auto; padding: 16px 18px; border-radius: var(--r-ctl); background: var(--btn-fill); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
/* the legal markdown drawn as text (account.js legalNodes) */
.legal-text--md { white-space: normal; }
.legal-text--md h3 { margin: 18px 0 6px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.legal-text--md h3:first-child { margin-top: 0; }
.legal-text--md p { margin: 0 0 10px; }
.legal-text--md ul { margin: 0 0 10px; padding-left: 20px; }
.legal-text--md li { margin: 4px 0; }
.legal-text--md b { font-weight: 650; }
.legal-text--md a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
/* the Terms' own acknowledgment, ticked before I accept */
.legal-ack { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--ink); cursor: pointer; }
.legal-ack input { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent-2); cursor: pointer; }
/* Cloudflare Turnstile's widget: above everything, bottom centre, and only there when Cloudflare needs the person */
.bot-slot { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 300; }
.bot-slot:empty { display: none; }
/* the legal gate's card: wide enough to read a document */
.gate-stage--wide { width: min(100%, 760px); }
.field-inline { display: flex; flex-direction: column; gap: 7px; }
.field-inline input { height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--btn-fill); color: var(--ink); font: inherit; font-size: 15px; }
.field-inline input:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* ---- a device's name, renamed in place ---- */
.dev-rename { display: flex; gap: 8px; align-items: center; }
.dev-rename input { flex: 1; min-width: 0; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--btn-fill); color: var(--ink); font: inherit; font-size: 15px; }
.dev-rename input:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.dev-name-btn { all: unset; cursor: pointer; border-radius: 6px; }
.dev-name-btn:hover .dev-name, .dev-name-btn:focus-visible .dev-name { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--muted); }
.dev-name-btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* ---- add a computer: the install command per platform, then sign in ---- */
.addpc-steps { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.addpc-steps > li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; font-size: 14.5px; line-height: 1.5; color: var(--ink); counter-increment: s; }
.addpc-steps > li::before { content: counter(s); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; font-size: 13px; font-weight: 600; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--ink); }
.addpc-steps p { color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.addpc-cmd { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--btn-fill); box-shadow: inset 0 0 0 1px var(--line); }
.addpc-cmd code { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 13px; overflow-wrap: anywhere; color: var(--ink); }
.addpc-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* ---- the licence: a .status card on the overview, and the list in its dialog ---- */
.lic .fine a { color: var(--accent-2); }
.lic-gift, .lic-warn { display: flex; align-items: center; gap: 8px; }
.lic-gift { font-size: 14px; font-weight: 600; color: var(--ink); }
.lic-gift .ui-pic { font-size: 16px; color: var(--accent-2); flex-shrink: 0; }
.lic-warn .ui-pic { font-size: 15px; color: var(--warning); flex-shrink: 0; }
.lic-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lic-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.lic-list .ui-pic { font-size: 16px; color: var(--good); flex-shrink: 0; margin-top: 2px; }
.modal-panel .fine a { color: var(--accent-2); }
/* the subscriptions on the card (Amendment 2): one row each, hairlines between, its own buttons on the right */
.lic-subs { display: flex; flex-direction: column; margin-top: 6px; border-top: 1px solid var(--line); }
.lic-sub { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--line); }
.lic-sub-name { font-size: 15px; color: var(--ink); }
.lic-sub--off .lic-sub-name { color: var(--muted); }
.lic-sub-name .mono { font-size: 11px; letter-spacing: 0.06em; color: var(--muted); }
.lic-sub-state { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.lic-sub-acts { display: flex; gap: 8px; flex-wrap: wrap; }
/* how many computers, in the buy dialog: minus, the number, plus, and the total */
.lic-count { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lic-count-n { min-width: 2ch; text-align: center; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.lic-count-total { font-size: 14px; color: var(--muted); }