/* =============================================================================
   Customer dashboard (/dashboard): full-viewport app shell, overview, proxy
   generator, add time, account. Loaded after style.css, dashboard.css and
   site.css; overrides both where the old modal styles leak in.
   ============================================================================= */

:root { --side-w: 256px; --gap: 16px; --pad-x: 32px; }
/* Glass (html.glass; palette and --gl-* recipe in css/site.css): pure white / black ground,
   cards lit from the top edge, frosted hero cards, orange accents. */
:root.glass[data-theme="light"] {
    --panel: var(--card-bg);
    --panel-2: rgba(16,17,20,0.03);
    --bar-bg: #ffffff;
    --bar-solid: #ffffff;
    --ibtn-bg: var(--gl-btn);
    --tip-bg: #ffffff;
    --hero-bg: var(--gl-hi), var(--gl-fill), linear-gradient(#ffffff, #ffffff);
    --chart-grid: rgba(16,17,20,0.07);
    --chart-ax: #86868b;
    --code-bg: #fafafb;
    --o-soft: linear-gradient(135deg, rgba(255,140,0,0.12), rgba(255,140,0,0.02));
    --o-line: rgba(242,122,0,0.42);
    --o-glow: rgba(255,130,0,0.32);
    --rn-on: radial-gradient(130% 90% at 50% 0%, rgba(255,140,0,0.12), rgba(255,140,0,0.03) 62%, transparent), #ffffff;
    --rn-on-best: radial-gradient(130% 90% at 50% 0%, rgba(255,59,46,0.1), rgba(255,140,0,0.03) 62%, transparent), #ffffff;
    --sum-bg: linear-gradient(180deg, #ffffff, #fafafb);
    --paybar-bg: #ffffff;
    --was: #86868b;
}
:root.glass[data-theme="dark"] {
    --panel: var(--card-bg);
    --panel-2: rgba(255,255,255,0.035);
    --bar-bg: #000000;
    --bar-solid: #000000;
    --ibtn-bg: var(--gl-btn);
    --tip-bg: #141416;
    --hero-bg: var(--gl-hi), var(--gl-fill), linear-gradient(#000000, #000000);
    --chart-grid: rgba(255,255,255,0.06);
    --chart-ax: #6E6E73;
    --code-bg: #050506;
    --o-soft: linear-gradient(135deg, rgba(255,140,0,0.16), rgba(255,140,0,0.03));
    --o-line: rgba(255,150,30,0.45);
    --o-glow: rgba(255,130,0,0.45);
    --rn-on: radial-gradient(130% 90% at 50% 0%, rgba(255,140,0,0.14), rgba(255,140,0,0.03) 62%, transparent), #141416;
    --rn-on-best: radial-gradient(130% 90% at 50% 0%, rgba(255,70,46,0.16), rgba(255,120,0,0.03) 62%, transparent), #141416;
    --sum-bg: linear-gradient(180deg, #141416, #0e0e10);
    --paybar-bg: #000000;
    --was: #6E6E73;
}

html, body { overflow-x: clip; }
body[data-page="dashboard"] { min-height: 100vh; margin: 0; }
[hidden] { display: none !important; }
/* Light: a softer sky so white cards read as white. */
/* Views are tab panels: they always render (content-visibility would also trap the fixed pay bar). */
html.glass.cv main.main > section.view { content-visibility: visible; contain-intrinsic-size: none; }
.sink { display: none !important; }

/* --- Shared bits ---------------------------------------------------------- */
.i { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.lbl { font: 800 11px/1 'Manrope', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.money { padding: 0.1em 0.08em 0.14em; margin: -0.1em -0.08em -0.14em; }
.grad { background: none; color: var(--accent-text); -webkit-text-fill-color: currentColor; }
.mono { font-family: 'IBM Plex Mono', monospace; }
.pill { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; font: 800 12px/1 'Manrope', sans-serif; white-space: nowrap; }
.pill.ok { background: var(--green-soft); color: var(--green); }
.pill.bad { background: rgba(255,59,46,0.13); color: var(--red); }
.pill.gold { background: var(--accent-soft); color: var(--accent-ink); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--panel-2); font: 800 13px/1 'Manrope', sans-serif; color: var(--ink); white-space: nowrap; }
.chip.free { border-color: color-mix(in srgb, var(--green) 45%, transparent); background: var(--green-soft); color: var(--green); }
.chip s { color: var(--mute); font-weight: 700; }
.ibtn { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border-radius: 10px; border: 1px solid var(--line-2); background: var(--ibtn-bg); color: var(--ink-2); cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.ibtn:hover { color: var(--ink); border-color: var(--gl-line-hot); }
.ibtn svg { width: 16px; height: 16px; }
.ibtn.done { color: var(--green); border-color: color-mix(in srgb, var(--green) 50%, transparent); }
.btn.btn-sm { height: 38px; padding: 0 16px; font-size: 13.5px; border-radius: 10px; display: inline-flex; align-items: center; gap: 8px; }
.btn svg { width: 17px; height: 17px; flex: none; }
.err { margin: 12px 0 0; font: 700 13.5px/1.4 'Manrope', sans-serif; color: var(--red); }
.err:empty { display: none; }

/* Cards: the site card (css/site.css), a hairline edge lit from the top, 28 px corners; the
   pointer light comes from site.css .card::after. */
.app .card { border: 1px solid transparent; border-radius: 28px; background: var(--card-glow) padding-box, var(--card-bg) padding-box, linear-gradient(var(--card-base), var(--card-base)) padding-box, var(--edge) border-box; box-shadow: var(--hi), var(--shadow); min-width: 0; }
/* Hero cards: frosted glass with light catching two corners (the landing's closing cards). */
.app .card.phero, .app .card.claim, .app .card.offer, .app .card.prem-t, .lg-card { border-color: transparent; box-shadow: var(--gl-in), var(--gl-drop); }
.app .card.phero::before, .app .card.claim::before, .app .card.offer::before, .app .card.prem-t::before, .lg-card::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1px; background: var(--gl-rims); pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; }
.card-h h2, .card-h h3 { margin: 0; font: 800 16px/1.2 'Manrope', sans-serif; letter-spacing: -0.015em; color: var(--ink); }
.card-h .r { display: flex; align-items: center; gap: 8px; }
.pad { padding: 22px 24px 24px; }

/* Segmented control */
.seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 13px; border: 1px solid transparent; background: var(--gl-fill); box-shadow: var(--gl-in); }
.seg button { height: 30px; padding: 0 12px; border: none; border-radius: 10px; background: transparent; color: var(--ink-2); font: 700 12.5px/1 'Manrope', sans-serif; cursor: pointer; white-space: nowrap; }
.seg button:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.seg button.on, .seg .proxy-fmt-tab.active { background: var(--g-orange); color: var(--on-accent); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 6px 16px -6px var(--o-glow); }
.seg .proxy-fmt-tab { border: none; font-family: 'Manrope', sans-serif; font-size: 12.5px; }

/* --- Login ---------------------------------------------------------------- */
.lg { position: relative; z-index: 1; min-height: 100vh; display: grid; place-items: center; padding: 96px 18px 48px; }
.lg-back { position: fixed; top: 22px; left: 22px; z-index: 5; }
.lg-card { position: relative; width: 100%; max-width: 460px; padding: 40px 38px 34px; border-radius: 28px; border: 1px solid transparent; background: var(--hero-bg); box-sizing: border-box; }
.lg-card > * { position: relative; z-index: 2; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; font: 800 19px/1 'Manrope', sans-serif; letter-spacing: -0.02em; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
/* Brand, then the title: no icon tile between them. */
.lg-card h1 { margin: 30px 0 24px; font: 800 36px/1.05 'Manrope', sans-serif; letter-spacing: -0.035em; }
.lg-field label { display: block; margin-bottom: 9px; }
.lg-input { width: 100%; height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--well); color: var(--ink); font: 500 15px/1 'IBM Plex Mono', monospace; box-sizing: border-box; }
.lg-input::placeholder { color: var(--mute); }
.lg-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.lg-card .btn.wide { width: 100%; height: 52px; margin-top: 16px; font-size: 15.5px; }
.lg-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); font: 700 14px/1.4 'Manrope', sans-serif; }
.lg-foot a, .lg-foot button { background: none; border: none; padding: 0; cursor: pointer; color: var(--accent-ink); font: inherit; text-decoration: none; }
.lg-found { margin-top: 14px; padding: 16px; border-radius: 16px; background: var(--green-soft); border: 1px solid color-mix(in srgb, var(--green) 35%, transparent); }
.lg-found code { display: block; margin: 9px 0 13px; font: 500 13.5px/1.45 'IBM Plex Mono', monospace; word-break: break-all; color: var(--ink); }

/* --- App shell ------------------------------------------------------------ */
.app { position: relative; z-index: 1; display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh; overflow-y: auto; scrollbar-width: none; box-sizing: border-box; display: flex; flex-direction: column; gap: 26px; padding: 22px 16px 18px; border-right: 1px solid var(--line); background: var(--bar-solid); }
.side .brand { padding: 4px 8px; }
.nav { position: relative; display: grid; gap: 4px; }
.nav-ind { position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 12px; border: 1px solid transparent; background: var(--gl-fill); box-shadow: var(--gl-in); box-sizing: border-box; pointer-events: none; }
.nav-ind.ready { transition: transform .45s cubic-bezier(.2,.9,.25,1.05), width .45s cubic-bezier(.2,.9,.25,1.05), height .45s ease; }
.nav button { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; width: 100%; height: 44px; padding: 0 12px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--ink-2); font: 700 14.5px/1 'Manrope', sans-serif; cursor: pointer; text-align: left; transition: background .15s, color .15s; }
.nav button svg { width: 19px; height: 19px; flex: none; }
.nav button:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
.nav button.on { color: var(--ink); }
.nav button.on:hover { background: transparent; }
.nav button.on svg { stroke: url(#gIcon); }
.accts { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.accts-h { display: flex; align-items: center; justify-content: space-between; padding: 0 8px; }
.accts-h button { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; cursor: pointer; color: var(--accent-ink); font: 800 12.5px/1 'Manrope', sans-serif; padding: 4px 0; }
.accts-h button svg { width: 14px; height: 14px; }
.acct-list { display: grid; gap: 6px; overflow-y: auto; max-height: 34vh; padding: 1px; scrollbar-width: thin; }
.acct { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 8px; align-items: center; width: 100%; padding: 10px 11px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); cursor: pointer; text-align: left; font-family: 'Manrope', sans-serif; box-sizing: border-box; }
.acct:hover { border-color: var(--o-line); }
.acct.on { border-color: var(--accent); background: var(--o-soft); }
.acct code { font: 500 12.5px/1.1 'IBM Plex Mono', monospace; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct small { grid-column: 1; font: 700 12px/1 'Manrope', sans-serif; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct .pill { grid-column: 2; grid-row: 1 / span 2; height: 22px; padding: 0 9px; font-size: 11px; }
.side-foot { margin-top: auto; display: flex; gap: 8px; align-items: center; }
/* One scroll for the whole sidebar: the plan and account lists never get a small scroll box of
   their own, and the theme + Log out row stays pinned at the bottom over what scrolls under it. */
@media (min-width: 901px) {
    .side .accts { flex: none; }
    .side .acct-list { max-height: none; overflow: visible; }
    .side-foot { position: sticky; bottom: 0; z-index: 2; margin: auto -16px -18px; padding: 14px 16px 18px; background: var(--bar-solid); box-shadow: 0 -16px 16px -4px var(--bar-solid); }
}
.side-foot .btn { flex: 1; height: 40px; padding: 0 12px; font-size: 13.5px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

.main { min-width: 0; padding: 0 var(--pad-x) 48px; box-sizing: border-box; }
.main.active { display: block; }
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 16px; height: 76px; margin: 0 calc(var(--pad-x) * -1) 8px; padding: 0 var(--pad-x); background: var(--gl-band); }
.top h1 { margin: 0; font: 800 26px/1 'Manrope', sans-serif; letter-spacing: -0.03em; white-space: nowrap; }
.top-r { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.tok { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 4px 0 14px; border-radius: 12px; border: 1px solid var(--gl-line); background: var(--ibtn-bg); }
.tok code { font: 500 13px/1 'IBM Plex Mono', monospace; color: var(--ink-2); white-space: nowrap; }
.tok .ibtn { width: 32px; height: 32px; border: none; background: transparent; }
.top .btn-primary { height: 40px; padding: 0 18px; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
.m-only { display: none !important; }

.warn { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 16px 0 0; padding: 12px 12px 12px 18px; border-radius: 14px; border: 1px solid rgba(255,59,46,0.42); background: linear-gradient(90deg, rgba(255,59,46,0.12), rgba(255,59,46,0.04)); font: 700 14.5px/1.4 'Manrope', sans-serif; color: var(--red); }
body[data-tab="renew"] .warn .btn { display: none; }
/* Upgrade nudges (threads near the plan's cap, GB nearly used): gold, not red. */
.warn.nudge { border-color: rgba(255,170,0,0.45); background: linear-gradient(90deg, rgba(255,170,0,0.14), rgba(255,170,0,0.04)); color: var(--accent-text); }
.warn .btn { height: 38px; padding: 0 16px; font-size: 13.5px; flex: none; display: inline-flex; align-items: center; }

.view { margin-top: 16px; }
.g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.g.stretch { align-items: stretch; }
.c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; } .c6 { grid-column: span 6; }
.c7 { grid-column: span 7; } .c8 { grid-column: span 8; } .c12 { grid-column: 1 / -1; }
.stack { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }

/* --- Overview: plan hero -------------------------------------------------- */
.phero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) auto; align-items: center; gap: 36px; padding: 22px 26px; background: var(--hero-bg) !important; overflow: hidden; }
.phero > * { position: relative; z-index: 1; }
.hero-plan { display: flex; align-items: center; gap: 18px; min-width: 0; }
.hero-ic { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 20px; background: var(--ic-bg); border: 1px solid var(--ic-edge); box-shadow: var(--ic-halo); }
.hero-ic svg { width: 30px; height: 30px; stroke: url(#gIcon); }
.hero-plan h2 { margin: 8px 0 12px; font: 800 26px/1.05 'Manrope', sans-serif; letter-spacing: -0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-plan .chips { display: flex; gap: 8px; flex-wrap: wrap; }
.hero-time { min-width: 0; padding-left: 36px; border-left: 1px solid var(--line); }
.ht-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.ht-row b { font: 800 40px/1 'Manrope', sans-serif; letter-spacing: -0.04em; white-space: nowrap; }
.ht-row span.pct { font: 800 14px/1 'Manrope', sans-serif; color: var(--ink-2); white-space: nowrap; }
.bar { position: relative; height: 10px; margin: 16px 0 10px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: var(--g-cta); box-shadow: 0 0 14px var(--o-glow); transition: width 1s cubic-bezier(.2,.8,.2,1); }
.bar-ax { display: flex; justify-content: space-between; gap: 12px; font: 700 12.5px/1 'Manrope', sans-serif; color: var(--mute); white-space: nowrap; }
.hero-act { display: flex; flex-direction: column; gap: 10px; }
.hero-act .btn { height: 46px; padding: 0 24px; font-size: 14.5px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; white-space: nowrap; }

/* --- Overview: KPI tiles --------------------------------------------------- */
.kpi { position: relative; padding: 18px 22px 20px; overflow: hidden; }
.kpi > * { position: relative; }
.kpi-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kpi-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--accent-soft); }
.kpi-ic svg { width: 18px; height: 18px; stroke: url(#gIcon); }
.kpi-v { display: flex; align-items: baseline; gap: 7px; margin-top: 6px; white-space: nowrap; min-width: 0; }
.kpi-v b { font: 800 30px/1 'Manrope', sans-serif; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.kpi-v small { font: 700 14px/1 'Manrope', sans-serif; color: var(--mute); overflow: hidden; text-overflow: ellipsis; }
.kpi .bar { height: 6px; margin: 14px 0 0; }
.spark { display: block; width: 100%; height: 34px; margin-top: 10px; overflow: visible; }
.spark path.l { fill: none; stroke: url(#gLine); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark path.a { fill: url(#gArea); }
.kpi .flat { height: 34px; margin-top: 10px; display: flex; align-items: flex-end; }
.kpi .flat i { display: block; width: 100%; height: 2px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 11px); }

/* --- Overview: chart -------------------------------------------------------- */
.chart-card { display: flex; flex-direction: column; gap: 14px; }
.lv-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lv { display: grid; gap: 10px; padding: 14px 16px 16px; border-radius: 20px; border: 1px solid var(--line); background: var(--panel-2); color: inherit; text-align: left; font: inherit; cursor: pointer; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.lv:hover { border-color: var(--o-line); }
.lv.on { border-color: var(--accent); background: var(--o-soft), var(--panel-2); box-shadow: 0 10px 26px -14px var(--o-glow); }
.lv-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.lv-s { font: 700 12px/1.4 'Manrope', sans-serif; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-s b { color: var(--ink-2); font-weight: 800; font-variant-numeric: tabular-nums; }
.lv-v { display: flex; align-items: baseline; gap: 7px; min-width: 0; white-space: nowrap; }
.lv-v b { font: 800 28px/1 'Manrope', sans-serif; letter-spacing: -0.035em; color: var(--ink); font-variant-numeric: tabular-nums; }
.lv.on .lv-v b { color: var(--accent-text); }
.lv-v small { font: 700 14px/1.3 'Manrope', sans-serif; color: var(--mute); overflow: hidden; text-overflow: ellipsis; }
.lv .bar { height: 6px; margin: 2px 0 0; }
.kpi .bar.inf i, .lv .bar.inf i { width: 100% !important; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent) 0 8px, transparent 8px 14px); box-shadow: none; }
.chart { position: relative; height: 224px; }
.chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart .gl { stroke: var(--chart-grid); stroke-width: 1; shape-rendering: crispEdges; }
.chart .ax { fill: var(--chart-ax); font: 700 11px 'Manrope', sans-serif; }
.chart .ln { fill: none; stroke: url(#gLineU); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.chart .ar { fill: url(#gAreaU); }
.chart .lim { stroke: var(--ink-2); stroke-width: 1.2; stroke-dasharray: 4 6; opacity: .45; }
.chart .xh { stroke: var(--line-2); stroke-width: 1; }
.chart .xp { fill: var(--accent); stroke: var(--bg); stroke-width: 2.5; }
:root[data-theme="dark"] .chart .ln { filter: drop-shadow(0 0 6px rgba(255,140,0,0.5)); }
.chart-tip { position: absolute; top: 0; z-index: 3; transform: translate(-50%, -8px); padding: 8px 10px; border-radius: 12px; background: var(--tip-bg); border: 1px solid var(--line-2); box-shadow: var(--shadow); font: 700 12px/1.3 'Manrope', sans-serif; color: var(--ink-2); white-space: nowrap; pointer-events: none; }
.chart-tip b { display: block; color: var(--ink); font-size: 14px; }
.chart-empty { position: absolute; left: 0; right: 0; top: 0; bottom: 26px; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; pointer-events: none; }
.chart-empty .e-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--ic-bg); border: 1px solid var(--ic-edge); box-shadow: var(--ic-halo); }
.chart-empty .e-ic svg { width: 26px; height: 26px; stroke: url(#gIcon); }
.chart-empty b { font: 800 16px/1.2 'Manrope', sans-serif; color: var(--ink); }
.chart-empty .btn { pointer-events: auto; }

/* --- Credential rows ------------------------------------------------------- */
.creds { display: grid; gap: 8px; }
.cred { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 10px; height: 50px; padding: 0 8px 0 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--well); box-sizing: border-box; }
.cred code { font: 500 13.5px/1.2 'IBM Plex Mono', monospace; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cred code.hi { color: var(--accent-ink); }
.cred.full { height: auto; min-height: 50px; padding-top: 10px; padding-bottom: 10px; background: linear-gradient(90deg, rgba(255,140,0,0.09), transparent 70%), var(--well); border-color: var(--o-line); }
.cred.full code { white-space: normal; word-break: break-all; line-height: 1.45; }
.proto-row { display: flex; gap: 6px; }

/* --- Code blocks ------------------------------------------------------------ */
.code { position: relative; margin: 0; padding: 16px 60px 16px 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--code-bg); overflow: auto; font: 500 13px/1.7 'IBM Plex Mono', monospace; color: var(--ink); white-space: pre; tab-size: 4; min-height: 0; }
.code, .out-card .proxy-output-code { box-shadow: var(--well-in); }
.code .s { color: var(--accent-ink); }
.code .k { color: var(--green); }
.code .c { color: var(--mute); }
.code-wrap { position: relative; display: flex; flex-direction: column; }
.code-wrap.fill { flex: 1; min-height: 0; }
.code-wrap.fill .code { flex: 1; }
.code-wrap .ibtn { position: absolute; top: 12px; right: 12px; z-index: 2; }

/* --- Quick actions ------------------------------------------------------------ */
.qa { display: grid; gap: 8px; }
.qa button, .qa a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; height: 58px; padding: 0 14px 0 9px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); cursor: pointer; text-align: left; text-decoration: none; font: 700 14.5px/1.2 'Manrope', sans-serif; box-sizing: border-box; transition: border-color .15s, background .15s; }
.qa button:hover, .qa a:hover { border-color: var(--o-line); background: var(--accent-soft); }
.qa .q-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); }
.qa .q-ic svg { width: 19px; height: 19px; stroke: url(#gIcon); }
.qa .q-go { width: 16px; height: 16px; color: var(--mute); }
.qa small { color: var(--mute); font: 700 12.5px/1 'Manrope', sans-serif; }

/* --- Proxies tab ---------------------------------------------------------------- */
.set { display: flex; flex-direction: column; gap: 16px; }
#tab-proxies .dash { display: flex; flex-direction: column; gap: var(--gap); }
#tab-proxies .dash-card { padding: 22px 24px 24px; border-radius: 28px; }
.opts { display: grid; gap: 8px; }
.app .mode-toggle.opts { display: grid; padding: 0; border: 0; border-radius: 0; background: none; gap: 10px; }
.opts.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.opts.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#detailCountryHelp:empty { display: none !important; }
.opts.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app .opts .opt, #tab-proxies .dash .dash-seg .opt { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; height: auto; min-height: 96px; margin: 0; padding: 14px 14px 13px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--well); color: var(--ink); cursor: pointer; text-align: left; font: 800 14.5px/1.1 'Manrope', sans-serif; box-shadow: none; transition: border-color .15s, background .15s, box-shadow .15s; white-space: normal; }
.opts.two .opt, .opts.three .opt, .opts.five .opt { min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; padding: 13px 14px; }
.opts.three .opt, .opts.five .opt { min-height: 68px; }
.app .opts .opt:hover { border-color: var(--o-line); background: var(--well); color: var(--ink); }
.app .opts .opt.active { border-color: var(--accent); background: var(--o-soft), var(--well); box-shadow: 0 0 0 1px var(--accent), 0 8px 24px -10px var(--o-glow); color: var(--ink); }
.opt .o-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--accent-soft); flex: none; }
.opt .o-ic svg { width: 18px; height: 18px; stroke: url(#gIcon); }
.opt.active .o-ic { background: var(--g-orange); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45); }
.opt.active .o-ic svg { stroke: var(--on-accent); }
.opt .o-t { display: grid; gap: 7px; min-width: 0; width: 100%; }
.opt .o-t code { font: 500 11.5px/1 'IBM Plex Mono', monospace; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt.active .o-t code { color: var(--accent-ink); }
.opt .o-t em { font: 700 11.5px/1 'Manrope', sans-serif; font-style: normal; color: var(--mute); }
.qcc { display: flex; flex-wrap: wrap; gap: 6px; }
.qcc button { height: 32px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--ink-2); font: 800 12.5px/1 'Manrope', sans-serif; cursor: pointer; }
.qcc button:hover { color: var(--ink); border-color: var(--gl-line-hot); }
.qcc button.on { background: var(--accent-soft); border-color: var(--o-line); color: var(--accent-ink); }
#tab-proxies .cpick-box { min-height: 46px; border-radius: 14px; background: var(--well); }
#tab-proxies .cpick-menu { border-radius: 16px; background: var(--tip-bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
#tab-proxies .dash-hint.warn { font-weight: 700; }
.sticky-opts { display: grid; gap: 12px; padding-top: 4px; }
.sticky-opts .dash-lbl { margin: 0; }
#tab-proxies .dash-field .ctrl-input, .num-row .ctrl-input { height: 42px; border-radius: 12px; background: var(--well); }
#tab-proxies .dash-seg { border-color: transparent; border-radius: 13px; background: var(--gl-fill); box-shadow: var(--gl-in); }
#tab-proxies .dash .dash-seg .seg-btn { border-radius: 10px; }
#tab-proxies .dash .dash-seg .seg-btn.active { background: var(--g-orange); color: var(--on-accent); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 6px 16px -6px var(--o-glow); }
.out-card { display: flex; flex-direction: column; gap: 16px; }
/* Formats: one row; on a narrow card it scrolls sideways (the active one is scrolled into view by dashboard.js). */
.out-card .proxy-format-tabs { display: flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity; padding-bottom: 3px; border-bottom: 0; }
.out-card .proxy-format-tabs::-webkit-scrollbar { display: none; }
.out-card .proxy-format-tabs .proxy-fmt-tab { flex: none; scroll-snap-align: start; }
.out-card .proxy-format-tabs.more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.out-card .proxy-output-code { margin: 0; min-height: 96px; max-height: 260px; padding: 16px 64px 16px 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--code-bg); color: var(--accent-ink); font: 500 14px/1.65 'IBM Plex Mono', monospace; white-space: pre-wrap; word-break: break-all; overflow: auto; box-sizing: border-box; }
.out-card .dash-conn { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.out-card .dash-conn-item { flex-direction: column; align-items: flex-start; gap: 8px; background: var(--well); padding: 12px 14px; border-radius: 14px; }
.out-card .dash-conn-value { text-align: left; font-size: 13px; line-height: 1.35; }
.num-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.num-row .ctrl-input { width: 120px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-2); color: var(--ink); font: 800 15px/1 'Manrope', sans-serif; text-align: center; font-variant-numeric: tabular-nums; box-sizing: border-box; -moz-appearance: textfield; }
.num-row .ctrl-input::-webkit-outer-spin-button, .num-row .ctrl-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.num-row .ctrl-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.num-row .grow { flex: 1; }
.bulk-big { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; }
.bulk-big .bb-n { font: 800 34px/1 'Manrope', sans-serif; letter-spacing: -0.04em; }
.bulk-big .bb-n small { font-size: 15px; color: var(--mute); letter-spacing: 0; margin-left: 6px; }
.bulk-acts { display: flex; gap: 8px; }
.bulk-acts .btn { height: 44px; padding: 0 18px; font-size: 14px; border-radius: 12px; display: inline-flex; align-items: center; gap: 8px; }

/* --- Add time: same money motion as the checkout (css/checkout.css); loops move transform or opacity only --- */
@keyframes dkPick { 0% { transform: scale(.96); } 55% { transform: scale(1.025); } 100% { transform: scale(1); } }
@keyframes dkBump { 0% { transform: scale(1); } 35% { transform: scale(1.09); } 100% { transform: scale(1); } }
@keyframes dkSwap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes dkShine { to { background-position: -200% 0; } }
@keyframes dkSweep { 0%, 58% { transform: translateX(0) skewX(-20deg); } 100% { transform: translateX(var(--sw, 488%)) skewX(-20deg); } }
@keyframes dkPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes dkChip { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes dkRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes dkFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dkFlow { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.money { display: inline-block; background: var(--g-shine); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; transform-origin: right bottom; }
.dk-bump { animation: dkShine 5s linear infinite, dkBump .5s cubic-bezier(.2,.9,.3,1.3) !important; }
.dk-bump-s { animation: dkBump .45s cubic-bezier(.2,.9,.3,1.3); }
.dk-swap { animation: dkSwap .35s cubic-bezier(.2,.8,.2,1); }
.was { color: var(--was); font-weight: 600; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.was:empty { display: none; }

/* Duration cards */
.rn-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding-top: 8px; }
.app .rn { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; min-width: 0; min-height: 178px; padding: 0; border-radius: 20px; border: 1px solid var(--line-2); background: var(--well); color: var(--ink); cursor: pointer; text-align: left; font-family: 'Manrope', sans-serif; overflow: visible; box-shadow: var(--hi); transition: transform .28s cubic-bezier(.2,.8,.2,1), border-color .2s ease, box-shadow .28s ease, background .25s ease; -webkit-tap-highlight-color: transparent; }
.app .rn:hover { transform: translateY(-3px); border-color: var(--o-line); box-shadow: 0 12px 30px -12px var(--o-glow); }
.app .rn.pop { border-color: rgba(255,150,10,0.5); }
.app .rn.best { border-color: rgba(255,59,46,0.50); }
.app .rn.active { background: var(--rn-on); border-color: rgba(255,150,10,0.3); box-shadow: 0 16px 44px -10px rgba(255,130,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08); animation: dkPick .5s cubic-bezier(.2,.9,.3,1.3); }
.app .rn.best.active { background: var(--rn-on-best); border-color: rgba(255,59,46,0.30); box-shadow: 0 16px 44px rgba(255,90,40,0.24), inset 0 1px 0 rgba(255,255,255,0.10); }
.app .rn.active::after { content: none; }
/* Rotating light around the picked card and the summary: a conic square under a static ring mask
   (css/site.css .ring-fx), turned with transform. dashboard.js adds the .ring-fx layers. */
.app .rn > .ring-fx, .dk-ring > .ring-fx { z-index: 3; }
.app .rn:not(.active) > .ring-fx { display: none; }
:root.glass[data-theme] .app .rn > .ring-fx > i { width: 160%; height: auto; aspect-ratio: 1; background: conic-gradient(rgba(255,150,10,0.35) 0deg, #FFB547 60deg, #F27A00 120deg, rgba(255,150,10,0.35) 180deg, #FF9F0A 250deg, rgba(255,150,10,0.35) 360deg); animation-duration: 4s; }
:root.glass[data-theme] .app .rn.best > .ring-fx > i { background: conic-gradient(rgba(255,59,46,0.45) 0deg, #ff6a3d 60deg, #FF9F0A 130deg, rgba(255,59,46,0.45) 190deg, #ff3b2e 260deg, rgba(255,59,46,0.45) 360deg); }
.dk-ring > .ring-fx { padding: 1px; }
:root.glass[data-theme] .dk-ring > .ring-fx > i { background: conic-gradient(transparent 0deg, transparent 40deg, #FFB547 100deg, #F27A00 140deg, transparent 200deg, transparent 360deg); }
.rn-flag { position: absolute; top: -10px; left: 50%; z-index: 4; transform: translateX(-50%); overflow: hidden; padding: 5px 9px; border-radius: 6px; font: 800 9.5px/1 'Manrope', sans-serif; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; background: var(--g-cta); color: var(--on-accent); box-shadow: 0 6px 16px -4px var(--o-glow); }
.rn.best .rn-flag { background: linear-gradient(120deg, #ff5a3d, #ff3b2e 50%, #d61f14); color: #fff; box-shadow: 0 6px 18px rgba(255,59,46,0.45); }
.rn-flag::after, .save::after { --sw: 433%; content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.75), transparent); transform: skewX(-20deg); animation: dkSweep 3.6s ease-in-out infinite; }
.rn.best .rn-flag::after { animation-delay: 1.8s; }
.rn-b { display: flex; flex-direction: column; gap: 10px; padding: 22px 16px 16px; flex: 1; container-type: inline-size; }
.rn-t { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 22px; font: 800 16px/1 'Manrope', sans-serif; white-space: nowrap; }
.save { position: relative; overflow: hidden; display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 6px; font: 800 11px/1 'Manrope', sans-serif; letter-spacing: 0.02em; color: #fff; background: var(--red); box-shadow: 0 4px 12px rgba(255,59,46,0.30); white-space: nowrap; }
.save::after { --sw: 488%; width: 40%; animation-duration: 4.4s; }
.save.g { background: var(--green); box-shadow: 0 4px 12px color-mix(in srgb, var(--green) 30%, transparent); }
.save.o { background: linear-gradient(180deg, #FFA51F, #FF8200); box-shadow: 0 4px 12px rgba(255,130,0,0.35); }
:root[data-theme="dark"] .save.g { color: #07170f; }
/* Sized to the card: $1,079.99 is 4.44 em wide, so 21.5% of the card's inner width always fits. */
.rn-p { margin-top: 6px; font: 800 min(34px, 21.5cqi)/1 'Manrope', sans-serif; letter-spacing: -0.04em; white-space: nowrap; transform-origin: left bottom; }
.rn.active .rn-p { animation: dkShine 5s linear infinite; }
.rn.active .rn-p.dk-bump-s { animation: dkShine 5s linear infinite, dkBump .45s cubic-bezier(.2,.9,.3,1.3); }
.rn-d { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; font: 800 14px/1 'Manrope', sans-serif; color: var(--ink); white-space: nowrap; }
.rn-d s { color: var(--was); font-weight: 600; text-decoration-thickness: 1.5px; }
.rn-d small { margin-left: -3px; font: 600 11.5px/1 'Manrope', sans-serif; color: var(--ink-2); }
.rn.pop .rn-d .pd, .rn.active .rn-d .pd { color: var(--accent-ink); }
.rn.best .rn-d .pd { color: var(--red); }
.rn-sp { margin-top: auto; padding-top: 6px; }
.rn-sp span { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: 8px; font: 800 12px/1 'Manrope', sans-serif; white-space: nowrap; border: 1px solid var(--line-2); color: var(--ink-2); }
.rn-sp span.up { border-color: color-mix(in srgb, var(--green) 42%, transparent); background: var(--green-soft); color: var(--green); }

/* New end date */
.tl { display: grid; gap: 14px; }
.tl-track { position: relative; display: flex; height: 14px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.tl-track .cur, .tl-track .add { height: 100%; width: 0; transition: width .75s cubic-bezier(.2,.8,.2,1); }
.tl-track .cur { background: color-mix(in srgb, var(--accent) 38%, transparent); }
:root[data-theme="dark"] .tl-track { background: var(--well); box-shadow: var(--well-in); }
:root[data-theme="dark"] .tl-track .cur { background: rgba(255,255,255,0.16); }
.tl-track .add { position: relative; overflow: hidden; background: #FF9A0A; box-shadow: 0 0 16px var(--o-glow); }
.tl-track .add::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 400%; background: linear-gradient(90deg, #FFB547, #FF9A0A 45%, #F27A00 75%, #FFB547) 0 0 / 50% 100% repeat-x; animation: dkFlow 6s linear infinite; }
.tl-track .add::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.6), transparent); transform: skewX(-20deg); animation: dkSweep 3.8s ease-in-out infinite; }
.tl-mark { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink); opacity: .55; transition: left .75s cubic-bezier(.2,.8,.2,1); }
.tl-ax { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tl-ax div { display: grid; gap: 8px; }
.tl-ax div:nth-child(2) { text-align: center; }
.tl-ax div:nth-child(3) { text-align: right; }
.tl-ax b { font: 800 17px/1.1 'Manrope', sans-serif; letter-spacing: -0.02em; white-space: nowrap; }
.tl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tl-head b { font: 800 26px/1 'Manrope', sans-serif; letter-spacing: -0.03em; }
.inc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.inc { display: grid; gap: 6px; padding: 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--panel-2); }
.inc-ic { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 6px; border-radius: 12px; background: var(--accent-soft); }
.inc-ic svg { width: 19px; height: 19px; fill: none; stroke: url(#gIcon); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.inc b { font: 800 22px/1 'Manrope', sans-serif; letter-spacing: -0.03em; color: var(--accent-text); }
.inc > span:last-child { color: var(--ink-2); font: 700 13px/1.2 'Manrope', sans-serif; }
@media (max-width: 700px) { .inc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Summary */
.app .card.sum { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 0; padding: 0; background: var(--sum-bg) padding-box, var(--edge) border-box; }
.sum-band { height: 3px; margin: 0 28px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, rgba(255,181,71,0), #FFB547 18%, #FF9A0A 50%, #F27A00 82%, rgba(242,122,0,0)); }
.sum-in { display: flex; flex-direction: column; gap: 16px; padding: 20px 22px 22px; }
.sum-rows { display: grid; gap: 0; }
.sum-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font: 700 14px/1.2 'Manrope', sans-serif; color: var(--ink-2); }
.sum-row:last-child { border-bottom: 0; }
.sum-row b { display: inline-flex; align-items: center; gap: 7px; font: 800 14.5px/1.2 'Manrope', sans-serif; color: var(--ink); text-align: right; white-space: nowrap; }
.sum-row b .chip { height: 24px; padding: 0 8px; font-size: 11.5px; }
.sum-row .off { font: 800 10.5px/1 'Manrope', sans-serif; letter-spacing: 0.04em; color: #fff; background: var(--red); border-radius: 6px; padding: 5px 7px; box-shadow: 0 4px 12px rgba(255,59,46,0.30); }
.sum-row .off.wk { background: var(--green); box-shadow: none; }
.sum-row .off.mo { background: linear-gradient(180deg, #FFA51F, #FF8200); box-shadow: 0 4px 12px rgba(255,130,0,0.35); }
:root[data-theme="dark"] .sum-row .off.wk { color: #07170f; }
.sum-row .off:empty { display: none; }
.sum-total { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px dashed var(--line-2); }
.st-l { display: flex; flex-direction: column; gap: 6px; font: 700 16px/1 'Manrope', sans-serif; color: var(--ink); }
.st-l .was { font-size: 14px; }
.code-tag { align-self: flex-start; font: 800 10.5px/1 'Manrope', sans-serif; letter-spacing: 0.04em; color: var(--green); background: var(--green-soft); border-radius: 6px; padding: 5px 7px; animation: dkChip .35s cubic-bezier(.2,.9,.3,1.4); }
.code-tag:empty { display: none; }
.sum-total .t { font: 800 46px/1 'Manrope', sans-serif; letter-spacing: -0.045em; animation: dkShine 5s linear infinite; }
.sum-save { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 16px; background: linear-gradient(120deg, color-mix(in srgb, var(--green) 20%, transparent), color-mix(in srgb, var(--green) 7%, transparent)); border: 1px solid color-mix(in srgb, var(--green) 40%, transparent); color: var(--green); font: 700 15px/1.2 'Manrope', sans-serif; animation: dkSwap .35s cubic-bezier(.2,.8,.2,1); }
.sum-save:empty { display: none; }
.sum-save::after { --sw: 488%; content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.28), transparent); transform: skewX(-20deg); animation: dkSweep 4.2s ease-in-out infinite; pointer-events: none; }
.sum-save svg { flex: none; width: 22px; height: 22px; stroke-width: 2; }
.sum-save b { display: inline-block; margin-left: 5px; font: 800 22px/1 'Manrope', sans-serif; letter-spacing: -0.03em; }
.sum-save.nudge { padding: 0; background: none; border: none; overflow: visible; }
.sum-save.nudge::after { content: none; }
.dk-nudge { position: relative; width: 100%; display: flex; align-items: center; gap: 12px; padding: 13px 14px 13px 16px; border-radius: 16px; background: var(--accent-soft); border: 1px dashed var(--o-line); color: var(--accent-ink); font: 700 15px/1.2 'Manrope', sans-serif; text-align: left; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.dk-nudge:hover { background: color-mix(in srgb, var(--accent) 26%, transparent); transform: translateY(-1px); }
.dk-nudge > svg { flex: none; width: 20px; height: 20px; }
.dk-nudge b { font: 800 15px/1.2 'Manrope', sans-serif; color: var(--ink); }
.dk-nudge .go { margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--g-orange); color: var(--on-accent); animation: dkPulse 1.8s ease-in-out infinite; }
.dk-nudge .go svg { width: 16px; height: 16px; stroke-width: 2.6; }

/* Discount code: one field, green with a -N% chip when valid. */
.dk-code { position: relative; display: flex; align-items: center; gap: 8px; height: 54px; padding: 0 6px 0 46px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--well); box-sizing: border-box; transition: border-color .2s ease, box-shadow .2s ease; }
.dk-code > svg { position: absolute; left: 16px; top: 50%; width: 19px; height: 19px; transform: translateY(-50%); stroke: var(--mute); stroke-width: 2; transition: stroke .2s ease; pointer-events: none; }
.dk-code:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.dk-code:focus-within > svg { stroke: var(--accent-ink); }
.dk-code .ctrl-input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ink); font: 800 14.5px/1 'Manrope', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.dk-code .ctrl-input:focus { outline: none; }
.dk-code .ctrl-input::placeholder { font: 600 14.5px/1 'Manrope', sans-serif; letter-spacing: 0; text-transform: none; color: var(--mute); }
.dk-code .btn { flex: none; height: 42px; border-radius: 12px; }
.dk-code .renew-code-note { flex: none; padding: 7px 10px; border-radius: 8px; font: 800 13px/1 'Manrope', sans-serif; white-space: nowrap; color: var(--red); background: rgba(255,59,46,0.12); animation: dkChip .35s cubic-bezier(.2,.9,.3,1.4); }
.dk-code .renew-code-note:empty { display: none; }
.dk-code.ok { border-color: color-mix(in srgb, var(--green) 60%, transparent); box-shadow: 0 0 0 4px var(--green-soft); }
.dk-code.ok > svg { stroke: var(--green); }
.dk-code.ok .renew-code-note { color: #fff; background: var(--green); }
:root[data-theme="dark"] .dk-code.ok .renew-code-note { color: #07170f; }

/* Pay: lock, pulse, shine. */
.dk-paybar { position: relative; }
.pb-total { display: none; }
.sum .pay { position: relative; width: 100%; height: 60px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 20px; border: 1px solid transparent; border-radius: 16px; background: var(--g-orange) border-box; color: var(--on-accent); font: 800 17.5px/1 'Manrope', sans-serif; letter-spacing: -0.01em; box-shadow: 0 0 0 1px rgba(255,150,40,0.5), inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(140,60,0,0.35), 0 14px 34px -12px rgba(255,130,0,0.7); }
.sum .pay:hover { background: var(--g-orange) border-box; transform: translateY(-2px); filter: brightness(1.06); }
.sum .pay:active { transform: translateY(0) scale(.985); }
.sum .pay::after, .sum .pay:hover::after { --sw: 488%; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.6), transparent); animation: dkSweep 3.2s ease-in-out infinite; transition: none; }
.sum .pay svg { width: 20px; height: 20px; stroke-width: 2.3; }
.sum .pay:disabled { opacity: .65; cursor: wait; animation: none; }
.terms { font: 600 12.5px/1.4 'Manrope', sans-serif; color: var(--mute); text-align: center; }
.form-error { font: 700 13.5px/1.4 'Manrope', sans-serif; color: var(--red); }
.form-error.hidden { display: none; }

/* Views rise in on a tab switch, cards staggered. */
.view.enter .card { animation: dkRise .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 45ms); }
.view.enter .card.sum { animation-name: dkRise; }

/* --- Account ----------------------------------------------------------------------- */
.tokbox { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 16px; border: 1px solid var(--o-line); background: linear-gradient(90deg, rgba(255,140,0,0.09), transparent 70%), var(--well); }
.tokbox code { flex: 1; min-width: 0; font: 500 15px/1.4 'IBM Plex Mono', monospace; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tokbox .btn { height: 38px; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.facts div { display: grid; gap: 9px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-2); min-width: 0; }
.facts b { font: 800 16px/1.1 'Manrope', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.themes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.themes button { display: grid; gap: 12px; padding: 10px 10px 13px; border-radius: 18px; border: 1px solid var(--line-2); background: var(--well); color: var(--ink); cursor: pointer; font: 800 14px/1 'Manrope', sans-serif; text-align: left; }
.themes button.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.themes button span { padding-left: 4px; }
.tprev { display: grid; grid-template-columns: 26% 1fr; gap: 6px; height: 88px; padding: 8px; border-radius: 11px; box-sizing: border-box; }
.tprev i { display: block; border-radius: 5px; }
.tprev.l { background: #ffffff; box-shadow: inset 0 0 0 1px rgba(16,17,20,0.08); } .tprev.l i { background: #f5f5f7; border: 1px solid rgba(16,17,20,0.08); }
.tprev.d { background: #000000; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); } .tprev.d i { background: #111113; border: 1px solid rgba(255,255,255,0.12); }
.tprev .m { display: grid; grid-template-rows: 14px 1fr; gap: 6px; background: none !important; border: 0 !important; }
.tprev .m i:first-child { background: linear-gradient(90deg, #FFB547, #F27A00) !important; width: 55%; border: 0; }
.alist { display: grid; gap: 8px; }
.arow { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 12px 12px 12px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel-2); }
.arow.on { border-color: var(--o-line); background: linear-gradient(90deg, rgba(255,140,0,0.1), transparent 70%); }
.arow code { font: 500 13.5px/1.2 'IBM Plex Mono', monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arow b { font: 800 14px/1.2 'Manrope', sans-serif; white-space: nowrap; }
.arow span.m { font: 700 13.5px/1.2 'Manrope', sans-serif; color: var(--ink-2); white-space: nowrap; }
.arow .acts { display: flex; gap: 6px; }
@media (min-width: 901px) { .arow { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 96px auto; } .arow .pill { justify-self: end; } }

#loadingOverlay { background: rgba(0,0,0,0.35); }

/* --- Responsive ------------------------------------------------------------------------- */
@media (min-width: 1800px) {
    :root { --pad-x: 40px; --gap: 18px; }
}
@media (max-width: 1440px) {
    :root { --side-w: 232px; --pad-x: 26px; --gap: 14px; }
    .phero { gap: 26px; padding: 22px 24px; }
    .hero-time { padding-left: 26px; }
    .ht-row b { font-size: 34px; }
    .hero-plan h2 { font-size: 23px; }
    .rn-t { flex-direction: column; align-items: flex-start; gap: 9px; }
    .out-card .dash-conn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rn-b { padding: 20px 12px 14px; }
    .rn-p { font-size: min(28px, 21.5cqi); }
    .rn-t { font-size: 14.5px; }
    .rn-d { gap: 5px 4px; font-size: 12.5px; }
    .rn-d small { margin-left: -2px; font-size: 10.5px; }
    .save { padding: 0 5px; font-size: 10.5px; }
    .kpi-v b { font-size: 27px; }
    .ov-l { grid-column: span 7; } .ov-r { grid-column: span 5; }
}
@media (max-width: 1200px) {
    .phero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .hero-act { grid-column: 1 / -1; flex-direction: row; }
    .hero-act .btn { flex: 1; }
    .c3 { grid-column: span 6; }
    .c4, .c5, .c7, .c8, .ov-l, .ov-r { grid-column: 1 / -1; }
    .app .card.sum { position: static; }
    /* Summary follows the durations. */
    .rn-main { display: contents; }
    .rn-dur, .rn-tl, .rn-inc, .rn-side, .up-gate { grid-column: 1 / -1; }
    .rn-dur { order: 1; } .rn-side { order: 2; } .rn-tl { order: 3; } .rn-inc { order: 4; }
    .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    :root { --pad-x: 16px; --gap: 12px; }
    .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; }
    .side { position: sticky; top: 0; z-index: 40; height: auto; overflow: visible; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 8px; padding: 10px 12px 0; border-right: none; border-bottom: 1px solid var(--line); }
    .side .brand { padding: 0; font-size: 17px; margin-right: auto; }
    .side .brand img { width: 30px; height: 30px; }
    .nav { order: 5; flex: 1 0 100%; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 8px; }
    .nav::-webkit-scrollbar { display: none; }
    .nav button { flex: 1 1 auto; width: auto; justify-content: center; height: 44px; padding: 0 6px; gap: 6px; font-size: 13.5px; border-radius: 0; border: none; border-bottom: 2px solid transparent; background: none !important; }
    .nav button.on { color: var(--ink); }
    .nav-ind { border: 0; border-radius: 2px; background: var(--accent); box-shadow: none; }
    .nav button svg { width: 17px; height: 17px; }
    .accts { display: none; }
    .side-foot { margin: 0; }
    .side-foot .btn { flex: none; height: 38px; padding: 0 12px; font-size: 13px; }
    .side-foot .theme-btn { width: 38px; height: 38px; }
    .main { padding: 0 var(--pad-x) 40px; }
    .top { position: static; height: auto; margin: 0; padding: 18px 0 4px; background: none; border: none; backdrop-filter: none; -webkit-backdrop-filter: none; flex-wrap: wrap; }
    .top h1 { font-size: 26px; }
    .top .btn-primary, .tok { display: none; }
    .m-only { display: revert !important; }
    .phero { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
    .hero-plan { gap: 14px; }
    .hero-ic { width: 52px; height: 52px; border-radius: 15px; }
    .hero-time { padding: 20px 0 0; border-left: none; border-top: 1px solid var(--line); }
    .hero-act { flex-direction: column; }
    .hero-act .btn { flex: none; }
    .ht-row b { font-size: 32px; }
    .kpi { padding: 16px; }
    .kpi-v b { font-size: 24px; }
    .kpi-ic { width: 32px; height: 32px; }
    .chart { height: 210px; }
    .lv-v b { font-size: 24px; }
    .rn-grid { grid-template-columns: 1fr; gap: 16px; }
    .app .rn { flex-direction: row; min-height: 0; }
    .rn-flag { left: 14px; transform: none; font-size: 9px; }
    .rn-b { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t p" "d sp"; align-items: center; gap: 10px 12px; padding: 17px 16px 16px; }
    .rn-t { grid-area: t; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; font-size: 16px; }
    .rn-t .save[style] { display: none; }
    .rn-p { grid-area: p; margin: 0; font-size: 28px; text-align: right; }
    .rn-d { grid-area: d; }
    .rn-sp { grid-area: sp; margin: 0; padding: 0; justify-self: end; }
    .opts.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .opts.five .opt:last-child { grid-column: 1 / -1; }
    .opts.three { grid-template-columns: 1fr; gap: 8px; }
    .opts.three .opt { min-height: 54px; }
    .arow { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; }
    .arow .m { display: none; }
    .arow .pill { grid-column: 2; grid-row: 1; justify-self: end; }
    .arow b { grid-column: 1; grid-row: 2; }
    .arow .acts { grid-column: 1 / -1; }
    .arow .acts .btn { flex: 1; }
    .bulk-big { grid-template-columns: 1fr; }
    .card-h { flex-wrap: wrap; row-gap: 12px; }
    .card-h .r { flex-wrap: wrap; }
}
@media (max-width: 620px) {
    .c3, .c6 { grid-column: 1 / -1; }
    .g.kpis > .c3 { grid-column: span 6; }
    .kpi .spark, .kpi .flat { display: none; }
    .kpi-v { flex-direction: column; align-items: flex-start; gap: 6px; }
    .kpi-v b { font-size: 24px; }
    .kpi-v small { font-size: 12.5px; }
    .side-foot .btn span { display: none; }
    .cred { grid-template-columns: minmax(0, 1fr) auto; gap: 7px 10px; height: auto; padding: 11px 8px 11px 14px; }
    .cred .lbl { grid-column: 1; grid-row: 1; }
    .cred code { grid-column: 1; grid-row: 2; }
    .cred .ibtn { grid-column: 2; grid-row: 1 / span 2; }
    .lv { padding: 12px 12px 14px; }
    .lv-h { flex-direction: column; align-items: flex-start; gap: 6px; }
    .lv-v { flex-direction: column; align-items: flex-start; gap: 5px; }
    .out-card .dash-conn { grid-template-columns: 1fr; }
    .out-card .dash-out-head { flex-direction: column; align-items: stretch; }
    .out-card .proxy-format-tabs { width: 100%; box-sizing: border-box; }
    .facts { grid-template-columns: 1fr 1fr; }
    .pad { padding: 20px 18px 20px; }
    .app .card, #tab-proxies .dash-card { border-radius: 24px; }
    .lg-card { padding: 30px 22px 26px; }
    .lg-card h1 { font-size: 30px; }
    .warn { flex-direction: column; align-items: stretch; }
    .bulk-acts .btn { flex: 1; justify-content: center; }
    #tab-account .card-h .r { width: 100%; }
    #tab-account .card-h .r .btn { flex: 1; justify-content: center; }
    .tl-ax b { font-size: 14px; }
    .sum-total .t { font-size: 38px; }
}
/* Phones: total + Pay stay under the thumb, like the checkout sheet. The summary
   card drops its blur so the fixed bar is placed against the viewport. */
@media (max-width: 900px) {
    body[data-tab="renew"] .main { padding-bottom: 104px; }
    .app .card.sum { backdrop-filter: none; -webkit-backdrop-filter: none; }
    .view.enter .card.sum { animation-name: dkFade; }
    .dk-paybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; align-items: center; gap: 14px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--paybar-bg); border-top: 1px solid var(--line); box-shadow: 0 -18px 40px rgba(0,0,0,0.2); }
    .pb-total { display: flex; flex-direction: column; gap: 6px; flex: none; min-width: 84px; }
    .pb-total b { font: 800 25px/1 'Manrope', sans-serif; letter-spacing: -0.04em; animation: dkShine 5s linear infinite; transform-origin: left center; }
    .sum .pay { flex: 1; min-width: 0; height: 54px; font-size: 16.5px; padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .bar i, .app .rn, .tl-track .cur, .tl-track .add, .tl-mark, .nav-ind.ready { transition: none; }
    .app .rn, .ring-fx > i, .tl-track .add::before, .rn-flag::after, .save::after, .rn.active .rn-p, .tl-track .add, .tl-track .add::after, .sum-total .t, .sum-save, .sum-save::after, .dk-nudge .go, .code-tag, .dk-code .renew-code-note, .sum .pay, .sum .pay::after, .pb-total b, .view.enter .card { animation: none !important; }
}


/* =============================================================================
   Accounts with several products: switcher, free proxies, claim, upgrade,
   Telegram, merge, Telegram Mini App.
   ============================================================================= */
.chip.gold { border-color: var(--o-line); background: var(--accent-soft); color: var(--accent-ink); }
.note { margin: 0; font: 600 13.5px/1.5 'Manrope', sans-serif; color: var(--ink-2); }

/* Product switcher (sidebar) */
.acct.prod { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; padding: 9px 10px 9px 9px; }
.acct.prod .p-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); }
.acct.prod .p-ic svg { width: 17px; height: 17px; stroke: url(#gIcon); }
.acct.prod .p-ic { grid-column: 1; grid-row: 1 / span 2; }
.acct.prod .p-t { display: contents; }
.acct.prod .p-t b { grid-column: 2; grid-row: 1; min-width: 0; font: 800 13.5px/1.1 'Manrope', sans-serif; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct.prod small { grid-column: 2 / 4; grid-row: 2; }
.acct.prod .pill { grid-column: 3; grid-row: 1; height: 20px; padding: 0 8px; font-size: 10.5px; }
.acct.prod.ghost { border-style: dashed; background: transparent; }
.acct.prod.ghost .p-t b { color: var(--ink-2); }
.acct.prod.ghost:hover .p-t b { color: var(--ink); }
.accts.prods .acct-list { max-height: none; }

/* Phones: products as a sideways row under the title. */
.pchips { display: none; }
@media (max-width: 900px) {
    .pchips:not([hidden]) { display: flex; gap: 8px; margin: 6px calc(var(--pad-x) * -1) 0; padding: 4px var(--pad-x) 6px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
    .pchips::-webkit-scrollbar { display: none; }
    .pchip { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 11px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--ink-2); font: 800 13.5px/1 'Manrope', sans-serif; cursor: pointer; white-space: nowrap; }
    .pchip svg { width: 17px; height: 17px; stroke: url(#gIcon); }
    .pchip.on { border-color: var(--accent); color: var(--ink); background: var(--o-soft), var(--panel-2); }
    .pchip.ghost { border-style: dashed; background: transparent; }
    .pchip em { font-style: normal; font-size: 11px; padding: 4px 7px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); }
}

/* Proxies tab: a card whose feature the plan does not have. */
.lock { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 14px; border: 1px dashed var(--o-line); background: var(--accent-soft); font: 800 13.5px/1.2 'Manrope', sans-serif; color: var(--accent-ink); }
.lock > svg { width: 17px; height: 17px; flex: none; }
.lock .btn { margin-left: auto; height: 34px; }
.locked #detailCountryPick, .locked #ccQuick, .locked #detailStickySeg, .locked #detailStickyOpts { opacity: .42; pointer-events: none; filter: grayscale(1); }
#detailTimeSeg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: auto; }
#tab-proxies #detailTimeSeg .seg-btn { padding: 9px 6px; text-align: center; }

/* Free overview: ports */
.code.ports { padding: 12px 14px; font-size: 12px; line-height: 1.75; white-space: pre; color: var(--accent-ink); }
#freeHero .bar-ax span:first-child { color: var(--ink-2); }

/* Claim: free proxies / premium trial */
.claim { display: flex; flex-direction: column; gap: 20px; padding: 26px 28px 26px; background: var(--hero-bg) !important; overflow: hidden; }
.claim-top { display: flex; align-items: center; gap: 18px; }
.claim-top h2 { margin: 8px 0 0; font: 800 32px/1 'Manrope', sans-serif; letter-spacing: -0.035em; }
.claim .facts div { background: var(--well); }
.claim .facts b { color: var(--accent-text); font-size: 20px; letter-spacing: -0.02em; }
.cl-speed { display: grid; gap: 10px; }
.opts.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.app .opts.four .opt { min-height: 0; padding: 14px; justify-content: center; align-items: center; }
.opts.four .opt .o-t { justify-items: center; font-size: 15px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.steps li { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--well); flex-wrap: wrap; box-sizing: border-box; }
.steps .n { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-ink); font: 800 14px/1 'Manrope', sans-serif; }
.steps .n > * { grid-area: 1 / 1; }
.steps .n em { font-style: normal; }
.steps .n .ck { width: 18px; height: 18px; stroke-width: 2.8; opacity: 0; transform: scale(.4); transition: opacity .2s ease, transform .3s cubic-bezier(.2,.9,.3,1.4); }
.steps li.done .n { background: var(--green); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--green) 32%, transparent); }
.steps li.done .n em { opacity: 0; }
.steps li.done .n .ck { opacity: 1; transform: none; }
:root[data-theme="dark"] .steps li.done .n { color: #07170f; }
.steps[hidden] { display: none !important; }
.st-b { display: grid; gap: 5px; flex: 1; min-width: 0; }
.st-b b { font: 800 15px/1.2 'Manrope', sans-serif; color: var(--ink); }
.st-v { font: 700 13px/1 'Manrope', sans-serif; color: var(--green); }
.st-v:empty { display: none; }
.steps .btn { flex: none; }
.claim-go { height: 58px; font-size: 16.5px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 16px; }
:root.glass[data-theme] .claim-go:disabled { border-color: var(--line); background: var(--panel-2); color: var(--mute); box-shadow: none; cursor: not-allowed; transform: none; filter: none; }
:root.glass[data-theme] .claim-go:disabled::after { display: none; }
.qa .q-t { display: grid; gap: 5px; min-width: 0; }
.qa .q-t small { font: 700 12.5px/1 'Manrope', sans-serif; color: var(--mute); }

/* Log in with Telegram (js/tglogin.js): the button opens @proxiesfoodbot, the status box
   under it shows the code and the wait. Primary on the login card, outline elsewhere. */
.tg-slot { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.tg-slot[hidden] { display: none !important; }
.tg-btn.btn { width: 100%; height: 48px; padding: 0 18px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 15px; text-decoration: none; }
.tg-btn.btn svg { width: 19px; height: 19px; }
.steps .tg-slot { flex: none; align-items: flex-end; }
.steps .tg-btn.btn { width: auto; }
.steps .tg-btn.btn { height: 38px; padding: 0 16px; border-radius: 10px; font-size: 13.5px; gap: 8px; }
.steps .tg-btn.btn svg { width: 17px; height: 17px; }
.lg-tg { margin-top: 4px; }
.lg-or { display: flex; align-items: center; gap: 12px; margin: 20px 0 16px; font: 700 12.5px/1 'Manrope', sans-serif; color: var(--mute); text-transform: uppercase; letter-spacing: 0.1em; }
.lg-or::before, .lg-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.lg-tg .tg-btn.btn { height: 52px; font-size: 15.5px; }
/* A strip over every view but Account while the account has no Telegram. */
.tg-nudge { display: flex; align-items: center; gap: 14px; margin: 16px 0 0; padding: 10px 10px 10px 12px; border-radius: 14px; border: 1px solid var(--line); font: 700 14.5px/1.4 'Manrope', sans-serif; color: var(--ink); }
.tg-nudge[hidden], body[data-tab="account"] .tg-nudge { display: none; }
.tg-nudge-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--accent-ink); }
.tg-nudge-ic svg { width: 18px; height: 18px; }
.tg-nudge-t { flex: 1; min-width: 0; }
.tg-nudge .tg-slot { flex: none; }
.tg-nudge .tg-btn.btn { width: auto; height: 38px; padding: 0 16px; border-radius: 10px; font-size: 13.5px; gap: 8px; }
.tg-nudge .tg-btn.btn svg { width: 17px; height: 17px; }

/* Account: Telegram + merge */
.tg-user { display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--well); }
.tg-av { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(180deg, #6ec0f5, #3d93d8); color: #fff; font: 800 17px/1 'Manrope', sans-serif; }
.tg-who { display: grid; gap: 5px; flex: 1; min-width: 0; }
.tg-who b { font: 800 15px/1.2 'Manrope', sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-who small { font: 600 12.5px/1 'Manrope', sans-serif; color: var(--mute); }
.tg-link { display: grid; gap: 14px; }
.merge { display: flex; gap: 8px; }
.merge .lg-input { flex: 1; min-width: 0; height: 46px; }
.merge .btn { flex: none; height: 46px; padding: 0 20px; display: inline-flex; align-items: center; gap: 8px; }

/* Upgrade (free proxies) */
.up-thr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.app .up-thr .opt { min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 14px; }
.up-t .o-t { display: flex; align-items: baseline; gap: 6px; }
.up-t .o-t b { font: 800 22px/1 'Manrope', sans-serif; letter-spacing: -0.03em; }
.up-t .o-t em { font: 700 13px/1 'Manrope', sans-serif; font-style: normal; color: var(--mute); }
.up-from { grid-column: 1 / -1; font: 700 12.5px/1 'Manrope', sans-serif; color: var(--ink-2); }
.up-from b { color: var(--accent-ink); font-weight: 800; }
.rn-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app .rn-grid.three .rn { min-height: 150px; }
.rn.pop .rn-flag { background: var(--g-orange); color: var(--on-accent); }

@media (max-width: 1200px) {
    .claim, .cl-side { grid-column: 1 / -1; }
    /* Upgrade: threads, then duration, then the summary. */
    #tab-upgrade .rn-tl { order: 2; } #tab-upgrade .rn-side { order: 3; }
}
@media (max-width: 900px) {
    .up-thr { grid-template-columns: 1fr; }
    .rn-grid.three { grid-template-columns: 1fr; }
    .app .rn-grid.three .rn { min-height: 0; }
    .opts.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .claim { padding: 20px 18px; gap: 18px; }
    .claim-top h2 { font-size: 26px; }
    .claim .facts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
    .steps li { padding: 10px; }
    .steps .tg-slot { flex-basis: 100%; align-items: stretch; }
    .steps .tg-btn.btn { width: 100%; }
    .tg-nudge { flex-wrap: wrap; }
    .tg-nudge .tg-slot { flex-basis: 100%; }
    .tg-nudge .tg-btn.btn { width: 100%; height: 44px; }
    .merge { flex-direction: column; }
    .lock span { font-size: 13px; }
}

/* Telegram Mini App: Telegram colours, no sky, no site chrome. */
html.tg .sky, html.tg #loginBack, html.tg .lg-tg, html.tg .side-foot .theme-btn, html.tg #themeCard { display: none !important; }
html.tg body[data-page="dashboard"] { background: var(--bg); }
html.tg .side, html.tg .top { backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Telegram's colours (dashboard.js applyTgTheme) on the glass recipe: cards, bars and stages in its own colours. */
html.tg.glass[data-theme] { --card-bg: none; --card-glow: none; --gl-band: linear-gradient(var(--bg), var(--bg)); --hero-bg: var(--gl-hi), var(--gl-fill), linear-gradient(var(--card-base), var(--card-base)); --sum-bg: linear-gradient(var(--card-base), var(--card-base)); --code-bg: var(--well); --tip-bg: var(--card-base); --paybar-bg: var(--bg);
    --rn-on: radial-gradient(130% 90% at 50% 0%, rgba(255,140,0,0.14), rgba(255,140,0,0.03) 62%, transparent), var(--well); --rn-on-best: radial-gradient(130% 90% at 50% 0%, rgba(255,70,46,0.14), rgba(255,120,0,0.03) 62%, transparent), var(--well); }
html.tg .lg { padding-top: 32px; }


/* =============================================================================
   Two areas (Premium first, Free proxies second), the premium offer, the
   trial card, premium teasers in the free area.
   ============================================================================= */
.area { display: grid; gap: 8px; }
.area button { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; padding: 10px 12px 10px 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-2); cursor: pointer; text-align: left; font-family: 'Manrope', sans-serif; transition: border-color .2s, background .2s, color .2s; }
.area button:hover { border-color: var(--o-line); color: var(--ink); }
.area button.on { border-color: var(--accent); color: var(--ink); background: var(--o-soft), var(--panel-2); box-shadow: 0 10px 26px -14px var(--o-glow); }
.area .a-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); }
.area .a-ic svg { width: 20px; height: 20px; stroke: url(#gIcon); }
.area button.on .a-ic { background: var(--g-orange); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45); }
.area button.on .a-ic svg { stroke: var(--on-accent); }
.area .a-t { display: grid; gap: 5px; min-width: 0; }
.area .a-t b { font: 800 15px/1.1 'Manrope', sans-serif; color: inherit; }
.area .a-t small { font: 700 12px/1 'Manrope', sans-serif; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Selling line inside a dashboard card (caps payoff words in <b>). */
.sell { margin: 0; font: 600 16px/1.5 'Manrope', sans-serif; color: var(--ink-2); }
.sell b { color: var(--ink); font-weight: 800; }
.sell.sm { font-size: 14.5px; }

/* Premium offer: the landing pricing block inside one card. */
.offer { padding: 26px 26px 24px; background: var(--hero-bg) !important; overflow: visible; }
.of-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 28px; flex-wrap: wrap; margin-bottom: 30px; }
.of-t h2 { margin: 10px 0 0; font: 800 clamp(26px, 2.4vw, 38px)/1.08 'Manrope', sans-serif; letter-spacing: -0.035em; color: var(--ink); text-wrap: balance; }
.of-t .money { white-space: nowrap; }
.offer .lp-cols { gap: 12px; }
.offer .lp-included { margin-top: 24px; }
.offer .lp-speed { flex: none; }
.claim-top .pill { margin-left: auto; align-self: flex-start; }
#trialCard[data-trial="used"] .claim-go { opacity: .55; }
.tr-wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 40px; align-items: start; }
.tr-a, .tr-b { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.tr-b { align-self: stretch; justify-content: flex-end; }

/* Premium teaser (free area overview and Proxies). */
.prem-t { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 20px 24px; background: var(--hero-bg) !important; }
.prem-t .pt-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--ic-bg); border: 1px solid var(--ic-edge); box-shadow: var(--ic-halo); }
.prem-t .pt-ic svg { width: 26px; height: 26px; stroke: url(#gIcon); }
.prem-t .pt-b { display: grid; gap: 8px; min-width: 0; }
.prem-t h2 { margin: 0; font: 800 22px/1.15 'Manrope', sans-serif; letter-spacing: -0.03em; color: var(--ink); }
.prem-t p { margin: 0; font: 600 14.5px/1.45 'Manrope', sans-serif; color: var(--ink-2); }
.prem-t p b { color: var(--ink); font-weight: 800; }
.prem-t .btn, .pt-a .btn { height: 46px; padding: 0 22px; font-size: 14.5px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; white-space: nowrap; }
.pt-a { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.lock { flex-wrap: wrap; }
.lock .btn + .btn { margin-left: 0; }

/* Login: pay for a free-proxies plan without an account. */
.lg-buy { display: grid; gap: 12px; margin: 0 0 18px; padding: 18px; border-radius: 20px; border: 1px solid var(--o-line); background: var(--o-soft), var(--well); }
.lg-buy-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lg-buy-h .money { font: 800 30px/1 'Manrope', sans-serif; letter-spacing: -0.04em; }
.lg-buy-t { font: 800 17px/1.2 'Manrope', sans-serif; color: var(--ink); }
.lg-buy-s { margin: 0; font: 600 14.5px/1.5 'Manrope', sans-serif; color: var(--ink-2); }
.lg-buy-s b { color: var(--ink); }
/* A free-proxies pick: the plan, then Log in with Telegram, then the token form. */
.lg-or2 { display: none; }
.lg-card.pick { display: flex; flex-direction: column; }
.lg-card.pick > .brand { align-self: flex-start; }
.lg-card.pick > .lg-buy { order: 1; margin: 0 0 16px; }
.lg-card.pick > .lg-tg { order: 2; margin-top: 0; }
.lg-card.pick > .lg-tg .lg-or { display: none; }
.lg-card.pick > .lg-or2 { order: 3; display: flex; }
.lg-card.pick > form { order: 4; }
.lg-card.pick > .lg-foot { order: 5; }

/* The checkout modal over the dashboard sits above the sticky bars. */
#purchaseModal, #tosModal { z-index: 200; }

@media (max-width: 1440px) {
    .offer { padding: 22px 20px 20px; }
    .offer .lp-col-body { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 1200px) {
    .prem-t { grid-template-columns: auto minmax(0, 1fr); }
    .prem-t > .btn, .prem-t .pt-a { grid-column: 1 / -1; justify-content: flex-start; }
    .tr-wide { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
    .area { order: 4; flex: 1 0 100%; grid-template-columns: 1fr 1fr; gap: 8px; }
    .area button { grid-template-columns: 32px minmax(0, 1fr); gap: 9px; padding: 7px 10px 7px 7px; border-radius: 14px; }
    .area .a-ic { width: 32px; height: 32px; border-radius: 10px; }
    .area .a-ic svg { width: 17px; height: 17px; }
    .area .a-t b { font-size: 14px; }
    .area .a-t small { font-size: 11.5px; }
    .of-head { margin-bottom: 22px; }
    .offer { padding: 20px 16px 18px; }
    .prem-t { padding: 18px; gap: 16px; }
    .prem-t .pt-ic { width: 46px; height: 46px; border-radius: 13px; }
    .prem-t h2 { font-size: 19px; }
    .prem-t > .btn, .pt-a .btn { flex: 1; }
}
@media (max-width: 620px) {
    .prem-t { grid-template-columns: 1fr; }
    .prem-t .pt-ic { display: none; }
    .lock span { flex: 1 0 calc(100% - 30px); }
    .lock .btn { flex: 1 1 0; min-width: 0; margin-left: 0; padding: 0 12px; }
    .claim-top .pill { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .steps .n .ck { transition: none; }
}
@media (max-width: 900px) {
    .nav button { white-space: nowrap; flex: 0 0 auto; padding: 0 10px; }
}
/* No live blur anywhere: the sidebar is opaque, the top bar is a band in the page colour. */
.side { background: var(--bar-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
.top { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* =============================================================================
   Thin outline (the landing's mega menu and "Every plan includes"): no grey fills.
   Cards, rows, tiles, inputs and icon chips are a 1 px line on the page colour;
   hover lights the line orange, the picked item keeps an orange line.
   ============================================================================= */
:root.glass[data-theme="dark"] { --ol: rgba(255,255,255,0.15); --ol-2: rgba(255,255,255,0.1); --ol-hot: rgba(255,159,10,0.6); --ol-on: #FF9F0A; --ol-glow: 0 0 0 1px rgba(255,159,10,0.12), 0 14px 40px -18px rgba(255,140,0,0.45); }
:root.glass[data-theme="light"] { --ol: rgba(16,17,20,0.14); --ol-2: rgba(16,17,20,0.1); --ol-hot: rgba(242,122,0,0.55); --ol-on: #FF9A0A; --ol-glow: 0 0 0 1px rgba(255,159,10,0.1), 0 14px 36px -20px rgba(255,140,0,0.38); }

/* Cards */
:root.glass[data-theme] .app .card, :root.glass[data-theme] #tab-proxies .dash-card, :root.glass[data-theme] .lg-card { border: 1px solid var(--ol); background: transparent !important; box-shadow: none; }
/* Hero cards: the outline drawn by the corner-rim layer, so the corners catch the light. */
:root.glass[data-theme] .app .card:is(.phero, .claim, .offer, .prem-t), :root.glass[data-theme] .lg-card { border-color: transparent; }
:root.glass[data-theme] .app .card:is(.phero, .claim, .offer, .prem-t)::before, :root.glass[data-theme] .lg-card::before { background: var(--gl-rims), linear-gradient(var(--ol), var(--ol)); }

/* Rows and blocks inside cards */
:root.glass[data-theme] :is(.cred, .facts div, .tg-user, .steps li, .inc, .dash-conn-item, .arow, .code, .proxy-output-code, .dash-out) { border: 1px solid var(--ol-2); background: transparent; box-shadow: none; }
:root.glass[data-theme] .claim .facts div, :root.glass[data-theme] .out-card .dash-conn-item, :root.glass[data-theme] .out-card .proxy-output-code, :root.glass[data-theme] .dash-out-body .proxy-output-code { background: transparent; border-color: var(--ol-2); }
:root.glass[data-theme] :is(.cred.full, .tokbox, .arow.on, .lg-buy) { border-color: var(--o-line); background: transparent; }
:root.glass[data-theme] .lg-found { background: transparent; }
:root.glass[data-theme] :is(.warn, .lock, .dk-nudge) { background: transparent; }

/* Tiles and buttons you pick */
:root.glass[data-theme] :is(.lv, .qa button, .qa a, .themes button, .acct, .area button, .pchip, .qcc button, .chip) { border: 1px solid var(--ol-2); background: transparent; box-shadow: none; }
:root.glass[data-theme] .app :is(.opts, .up-thr) .opt, :root.glass[data-theme] #tab-proxies .dash .dash-seg .opt { border: 1px solid var(--ol-2); background: transparent; box-shadow: none; }
:root.glass[data-theme] .app .rn, :root.glass[data-theme] .app .rn.active, :root.glass[data-theme] .app .rn.best.active { background: transparent; box-shadow: none; }
:root.glass[data-theme] :is(.lv, .qa button, .qa a, .themes button, .acct, .area button, .pchip, .qcc button):hover,
:root.glass[data-theme] .app :is(.opts, .up-thr) .opt:hover, :root.glass[data-theme] .app .rn:hover { border-color: var(--ol-hot); background: transparent; box-shadow: var(--ol-glow); }
:root.glass[data-theme] :is(.lv.on, .themes button.on, .acct.on, .area button.on, .pchip.on, .qcc button.on),
:root.glass[data-theme] .app :is(.opts, .up-thr) .opt.active { border-color: var(--ol-on); background: transparent; box-shadow: var(--ol-glow); color: var(--ink); }
:root.glass[data-theme] .app .rn.active { box-shadow: var(--ol-glow); }
:root.glass[data-theme] .qcc button.on { color: var(--accent-ink); }
:root.glass[data-theme] .chip.free { border-color: color-mix(in srgb, var(--green) 50%, transparent); color: var(--green); }
:root.glass[data-theme] .chip.gold { border-color: var(--o-line); color: var(--accent-ink); }
:root.glass[data-theme] :is(.acct.prod.ghost, .pchip.ghost) { border-style: dashed; }

/* Status pills: a coloured ring, no fill. */
:root.glass[data-theme] .pill { background: transparent; border: 1px solid currentColor; }
:root.glass[data-theme] .pill.ok { border-color: color-mix(in srgb, var(--green) 55%, transparent); }
:root.glass[data-theme] .pill.bad { border-color: color-mix(in srgb, var(--red) 55%, transparent); }
:root.glass[data-theme] .pill.gold { border-color: var(--o-line); }

/* Icon chips: outline only, orange icon; orange line when the tile is hovered or picked. */
:root.glass[data-theme] :is(.kpi-ic, .qa .q-ic, .opt .o-ic, .area .a-ic, .acct.prod .p-ic, .inc-ic, .hero-ic, .prem-t .pt-ic, .chart-empty .e-ic, .steps .n) { background: transparent; border: 1px solid var(--ol); box-shadow: none; }
:root.glass[data-theme] :is(.opt.active .o-ic, .area button.on .a-ic, .acct.prod.on .p-ic, .qa button:hover .q-ic, .qa a:hover .q-ic, .opt:hover .o-ic, .area button:hover .a-ic) { background: transparent; border-color: var(--ol-hot); box-shadow: 0 0 16px -4px rgba(255,140,0,0.45); }
:root.glass[data-theme] :is(.opt.active .o-ic, .area button.on .a-ic) svg { stroke: url(#gIcon); }
:root.glass[data-theme] .steps li.done .n { background: transparent; border-color: var(--green); color: var(--ink); box-shadow: none; }

/* Inputs */
:root.glass[data-theme] :is(.lg-input, .dash-field .ctrl-input, .num-row .ctrl-input, .dk-code, .cpick-box), :root.glass[data-theme] #tab-proxies :is(.dash-field .ctrl-input, .cpick-box) { border: 1px solid var(--ol); background: transparent; box-shadow: none; }
:root.glass[data-theme] :is(.lg-input, .dash-field .ctrl-input, .num-row .ctrl-input):focus, :root.glass[data-theme] .dk-code:focus-within, :root.glass[data-theme] .cpick-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
:root.glass[data-theme] .dk-code.ok { border-color: color-mix(in srgb, var(--green) 60%, transparent); box-shadow: 0 0 0 4px var(--green-soft); }
:root.glass[data-theme] .dk-code .ctrl-input { border: 0; box-shadow: none; }

/* Segmented controls: a thin outline track, the orange pick. */
:root.glass[data-theme] .seg, :root.glass[data-theme] #tab-proxies .dash-seg, :root.glass[data-theme] .dash-seg { border: 1px solid var(--ol-2); background: transparent; box-shadow: none; }

/* Summary */
:root.glass[data-theme] .sum-save { background: transparent; }
:root.glass[data-theme] .sum-save.nudge { border: 0; }
:root.glass[data-theme] .claim-go:disabled { background: transparent; border-color: var(--ol); }

/* Floating layers keep the page colour so text under them never shows through. */
:root.glass[data-theme] .chart-tip, :root.glass[data-theme] #tab-proxies .cpick-menu { background: var(--bg); border: 1px solid var(--ol); }
:root.glass[data-theme] .tok, :root.glass[data-theme] .ibtn { background: transparent; }

/* Sidebar: the active tab is an outlined pill. */
@media (min-width: 901px) {
    :root.glass[data-theme] .nav-ind { border: 1px solid var(--ol); background: transparent; box-shadow: none; }
}

/* Premium offer: the landing price grid as outlines inside the card. */
:root.glass[data-theme] .offer .lp-col { --edge: linear-gradient(var(--ol), var(--ol)); background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--edge) border-box; box-shadow: none; }
:root.glass[data-theme] .offer .lp-col.pop { --edge: linear-gradient(180deg, #FFB547, rgba(255,140,0,0.55)); box-shadow: 0 0 0 1px rgba(255,140,0,0.2), 0 0 50px -18px rgba(255,140,0,0.4); }
:root.glass[data-theme] .offer .lp-col.best { --edge: linear-gradient(180deg, #ff7a5c, rgba(255,59,46,0.6)); box-shadow: 0 0 0 1px rgba(255,59,46,0.18), 0 0 50px -18px rgba(255,59,46,0.36); }
:root.glass[data-theme] .offer .lp-col-chip { background: transparent; border-color: var(--ol-2); }
:root.glass[data-theme] .offer .lp-col-save:not(.nudge) { background: transparent; }
:root.glass[data-theme] .offer .lp-speed { border: 1px solid var(--ol-2); background: transparent; box-shadow: none; }
/* Ember (dark): card edges lit orange from the top, black inside (css/site.css "Ember"). */
html:root.glass[data-theme="dark"] .app .card, html:root.glass[data-theme="dark"] #tab-proxies .dash-card, html:root.glass[data-theme="dark"] .lg-card { border-color: transparent; background: var(--edge) border-box !important; box-shadow: var(--em-fill); }
html:root.glass[data-theme="dark"] .app .card:is(.phero, .claim, .offer, .prem-t)::before, html:root.glass[data-theme="dark"] .lg-card::before { display: none; }
html:root.glass[data-theme="dark"] .app .rn.active { box-shadow: inset 0 0 22px -10px rgba(255,140,0,0.55); }
html:root.glass[data-theme="dark"] .app .rn.best.active { box-shadow: inset 0 0 22px -10px rgba(255,59,46,0.5); }

/* Add / switch token confirmation (dashboard.js tokAsk) */
.modal.tok-modal { max-width: 460px; }
.tok-modal .co-scroll { padding: 26px 26px 22px; }
.tok-lead { margin: 14px 0 10px; font: 600 15px/1.5 'Manrope', sans-serif; color: var(--ink); }
.tok-lead code { font: 500 14px/1.2 'IBM Plex Mono', monospace; color: var(--o, #FF9F0A); }
.tok-plans { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tok-plans:empty { display: none; }
.tok-plans li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-2); font: 700 14px/1.3 'Manrope', sans-serif; }
.tok-plans li span { color: var(--ink-2); white-space: nowrap; }
.tok-plans li.off span { color: var(--red, #ff453a); }
.tok-note { margin: 14px 0 0; font: 600 13.5px/1.5 'Manrope', sans-serif; color: var(--ink-2); }
.tok-acts { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }
.tok-acts .btn { flex: 1 1 auto; justify-content: center; }
.tok-modal .co-head h2 { font-size: 24px; }