:root {
  --brand: #7c3aed;
  --brand-ink: var(--brand);
  --brand-ink-hover: color-mix(in srgb, var(--brand) 86%, #000);
  --brand-deep: color-mix(in srgb, var(--brand) 70%, #0a0620);
  --brand-lilac: color-mix(in srgb, var(--brand) 86%, #c084fc);
  --on-brand: #ffffff;
  --brand-text: color-mix(in srgb, var(--brand) 88%, #000);
  --brand-soft: color-mix(in srgb, var(--brand) 10%, transparent);
  --brand-soft-2: color-mix(in srgb, var(--brand) 20%, transparent);
  --brand-line: color-mix(in srgb, var(--brand) 34%, transparent);
  --brand-glow: color-mix(in srgb, var(--brand) 62%, transparent);
  --pop: #f59e0b;
  --pop-text: #fbbf24;
  --focus: var(--brand-text);
  --focus-ring: color-mix(in srgb, var(--brand) 26%, transparent);
  --bg: #f1f2f7;
  --surface: #ffffff;
  --surface-2: #f6f7fb;
  --surface-3: #f4f5fa;
  --border: color-mix(in srgb, var(--brand) 7%, #e1e3ec);
  --border-strong: #8a87a8;
  --line: #ebecf3;
  --text: #111326;
  --text-2: #2c2f48;
  --muted: #5d6178;
  --ink: #111326;
  --on-ink: #ffffff;
  --ok: #047857;
  --ok-bg: #e3f5ed;
  --warn: #a44a08;
  --warn-bg: #fdf1e2;
  --danger: #b83a0b;
  --danger-bg: #fdeee6;
  --info: #1d4fd7;
  --info-bg: #e7efff;
  --accent: #6d28d9;
  --accent-bg: #f1ebfd;
  --promo: #b4410b;
  --promo-bg: #ffeddf;
  --veil: rgba(17, 19, 38, 0.42);
  --dots: rgba(255, 255, 255, 0.16);
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-head: "Unbounded", "Manrope", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fw-head: 700;
  --fw-strong: 700;
  --track-head: -0.03em;
  --fs-base: 15px;
  --r-card: 22px;
  --r-field: 14px;
  --r-btn: 999px;
  --r-chip: 999px;
  --r-pill: 999px;
  --r-menu: 16px;
  --r-tile: 18px;
  --shadow-card: 0 1px 2px rgba(17, 19, 38, 0.05), 0 10px 30px -12px rgba(17, 19, 38, 0.16);
  --shadow-pop: 0 0 0 1px rgba(17, 19, 38, 0.04), 0 16px 36px -12px rgba(17, 19, 38, 0.24), 0 4px 10px -4px rgba(17, 19, 38, 0.08);
  --shadow-btn: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 1px color-mix(in srgb, var(--brand) 78%, #000), 0 8px 18px -8px var(--brand-glow);
  --card-border: 1px solid var(--border);
  --field-bg: var(--surface-2);
  --field-border: 1px solid var(--border-strong);
  --field-h: 48px;
  --side-bg: var(--surface);
  --side-text: var(--text-2);
  --side-border: 1px solid var(--border);
  --side-active-bg: var(--brand-soft);
  --side-active-text: var(--brand-text);
  --bar-bg: color-mix(in srgb, var(--bg) 92%, transparent);
  --bar-border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  --tab-bg: var(--surface);
  --tab-gap: 10px;
  --side-w: 252px;
  --side-w-mini: 72px;
  --rail-w: 104px;
  --dock-h: 0px;
  --page-max: 1280px;
  --page-gap: 16px;
  --sum-w: 400px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

.dark, html[data-mode="dark"] {
  --brand-deep: color-mix(in srgb, var(--brand) 62%, #05030f);
  --brand-text: color-mix(in srgb, var(--brand) 55%, #fff);
  --brand-soft: color-mix(in srgb, var(--brand) 20%, transparent);
  --brand-soft-2: color-mix(in srgb, var(--brand) 30%, transparent);
  --brand-line: color-mix(in srgb, var(--brand) 52%, transparent);
  --brand-glow: color-mix(in srgb, var(--brand) 50%, transparent);
  --focus-ring: color-mix(in srgb, var(--brand) 40%, transparent);
  --bg: #0a0b14;
  --surface: #13152a;
  --surface-2: #181b33;
  --surface-3: #101226;
  --border: #2b2850;
  --border-strong: #6b6895;
  --line: #1f2140;
  --text: #eceefa;
  --text-2: #c9cce3;
  --muted: #a0a4bf;
  --ink: #eceefa;
  --on-ink: #111326;
  --ok: #34d399;
  --ok-bg: rgba(52, 211, 153, 0.13);
  --warn: #fbbf24;
  --warn-bg: rgba(251, 191, 36, 0.13);
  --danger: #fb923c;
  --danger-bg: rgba(251, 146, 60, 0.14);
  --info: #7aa7ff;
  --info-bg: rgba(122, 167, 255, 0.14);
  --accent: #c4a8ff;
  --accent-bg: rgba(167, 139, 250, 0.15);
  --promo: #ffad7a;
  --promo-bg: rgba(251, 146, 60, 0.15);
  --veil: rgba(0, 0, 0, 0.62);
  --field-bg: var(--surface-3);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 30px -14px rgba(0, 0, 0, 0.7);
  --shadow-pop: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 16px 40px -12px rgba(0, 0, 0, 0.75);
  --shadow-btn: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 18px -8px var(--brand-glow);
  color-scheme: dark;
}

body { letter-spacing: -0.005em; }
h1, h2 { font-weight: 700; }
h3, h4, h5, h6 { font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.01em; }
.mono, code, kbd, pre { font-family: var(--font-mono); }
::selection { background: var(--brand-soft-2); color: var(--text); }

.side .nav-link, .side .side-new, .tab { --ic: var(--brand-ink); --ic-fg: var(--ic); --ic-strong: color-mix(in srgb, var(--ic) 82%, #000); --ic-soft: color-mix(in srgb, var(--ic) 12%, transparent); --ic-line: color-mix(in srgb, var(--ic) 24%, transparent); }
.side [data-nav="massorder"], .side [data-nav="updates"], .side [data-nav="blog"] { --ic: #db2777; }
.side [data-nav="orders"], .tab[data-tab="orders"] { --ic: #2563eb; }
.side [data-nav="refill"], .side [data-nav="api"] { --ic: #0e7490; }
.side [data-nav="dripfeeds"], .side [data-nav="rankings"] { --ic: #a16207; }
.side [data-nav="subscriptions"], .side [data-nav="affiliates"] { --ic: #b45309; }
.side [data-nav="services"], .tab[data-tab="services"] { --ic: #7c3aed; }
.side [data-nav="addfunds"], .tab[data-tab="funds"] { --ic: #15803d; }
.side [data-nav="tickets"] { --ic: #c2410c; }
.side [data-nav="account"], .side [data-nav="page"], .side .side-theme, .tab[data-tab="menu"] { --ic: #64748b; }
.side [data-nav="logout"] { --ic: #b83a0b; }
.dark .side .nav-link, .dark .side .side-new, .dark .tab { --ic-fg: color-mix(in srgb, var(--ic) 48%, #fff); --ic-strong: color-mix(in srgb, var(--ic) 40%, #fff); --ic-soft: color-mix(in srgb, var(--ic) 22%, transparent); --ic-line: color-mix(in srgb, var(--ic) 42%, transparent); }

.brand { gap: 10px; }
.brand-mark { width: 36px; height: 36px; border-radius: 12px; background: linear-gradient(140deg, var(--brand-deep) 0%, var(--brand-ink) 58%, var(--pop) 135%); color: #fff; font-size: 15px; box-shadow: 0 6px 14px -6px var(--brand-glow); }
.brand-name { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.icon-btn { color: var(--text-2); font-size: 19px; transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease; }
.avatar { background: linear-gradient(140deg, var(--brand-ink), var(--brand-deep)); color: #fff; font-family: var(--font-head); font-size: 13px; font-weight: 700; }
.avatar-lg { width: 56px; height: 56px; border-radius: 18px; font-size: 22px; }
.dot-count { top: 4px; right: 3px; min-width: 18px; height: 18px; font-size: 10.5px; box-shadow: 0 0 0 2px var(--surface); }

.side { gap: 10px; padding: env(safe-area-inset-top) 12px calc(14px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left)); border-right: 0; }
.side-head { gap: 6px; }
.side-head .brand { min-width: 0; }
.side-new { gap: 8px; min-height: 48px; flex-shrink: 0; border-radius: 999px; background: linear-gradient(135deg, var(--brand-ink), var(--brand-deep)); background-color: var(--brand-ink); font-size: 15px; font-weight: 800; box-shadow: var(--shadow-btn); }
.side-new > i { font-size: 21px; }
.side-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.side .nav-sec { display: none; }
.side-nav .nav-link { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 8px; min-height: 84px; padding: 10px 8px 10px 9px; border: 1px solid var(--ic-line); border-radius: 16px; background: var(--ic-soft); color: var(--text); font-size: 11.5px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.side-nav .nav-link > i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--ic); color: #fff; font-size: 17px; }
.side-nav .nav-link > span { display: -webkit-box; max-width: 100%; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
.side-nav .nav-link[aria-current="page"] { border-color: transparent; background: var(--ic); color: #fff; box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--ic) 70%, transparent); }
.side-nav .nav-link[aria-current="page"] > i { background: rgba(255, 255, 255, 0.22); }
.side-foot { gap: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.side-foot .nav-link { gap: 12px; border-radius: 14px; font-size: 14.5px; font-weight: 650; color: var(--text-2); }
.side-foot .nav-link > i { width: 32px; height: 32px; line-height: 32px; text-align: center; border-radius: 10px; background: var(--ic-soft); color: var(--ic-fg); font-size: 17px; }
.side-foot .nav-out { color: var(--danger); }
.side-bal { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; margin-bottom: 8px; padding: 14px; border: 1px solid var(--border); border-radius: var(--r-tile); background: var(--surface-2); }
.side-bal-label { grid-column: 1; grid-row: 1; font-size: 12.5px; font-weight: 650; }
.side-bal-label > i { display: none; }
.side-bal-add { grid-column: 2; grid-row: 1; align-self: center; gap: 4px; padding: 0 14px; border-color: var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 13px; font-weight: 800; }
.side-bal-value { grid-column: 1 / -1; grid-row: 2; font-size: 21px; letter-spacing: -0.03em; }
.rank-pill { grid-row: 3; justify-self: stretch; margin-top: 6px; border-color: var(--border); border-radius: 14px; background: var(--surface); color: var(--text); font-size: 13px; }

.topbar { background: var(--bar-bg); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
.topbar-in { gap: 6px; }
.top-title { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.bal-pill { gap: 6px; padding: 0 14px; border: 0; background: var(--brand-soft); color: var(--brand-text); font-size: 14px; font-weight: 800; letter-spacing: -0.01em; }
.bal-pill > i { display: none; }
.top-bell, .avatar-btn { border: 1px solid var(--border); border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(17, 19, 38, 0.05); }
.top-actions { gap: 6px; }
.menu-panel { padding: 8px; border: 0; border-radius: var(--r-menu); box-shadow: var(--shadow-pop); }
.menu-head { padding: 8px 10px 12px; }
.menu-label { font-weight: 650; }
.menu-value { font-size: 22px; letter-spacing: -0.03em; }
.menu-user { font-weight: 800; }
.menu-item { gap: 12px; border-radius: 12px; font-size: 14.5px; font-weight: 650; }
.menu-item > i { flex-shrink: 0; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 10px; background: var(--brand-soft); color: var(--brand-text); font-size: 16px; }
.menu-item[aria-current="true"], .menu-item[aria-current="page"] { background: var(--brand-soft); }
.menu-item-danger > i { background: var(--danger-bg); color: var(--danger); }
.menu-panel .btn-block { margin: 2px 0 6px; }

.tabbar { left: calc(12px + env(safe-area-inset-left)); right: calc(12px + env(safe-area-inset-right)); bottom: calc(var(--tab-gap) + env(safe-area-inset-bottom)); height: calc(var(--tab-h) - var(--tab-gap)); padding: 0 6px; border: 1px solid var(--border); border-radius: 24px; background: var(--tab-bg); box-shadow: var(--shadow-card), 0 18px 34px -18px rgba(17, 19, 38, 0.3); align-items: center; }
.tab { gap: 2px; min-height: 48px; border-radius: 14px; color: var(--ic-fg); font-size: 11.5px; font-weight: 700; }
.tab > i { width: 40px; height: 26px; border-radius: 10px; font-size: 21px; }
.tab[aria-current="page"], .tab[data-current="1"] { background: var(--ic-soft); color: var(--ic-strong); }
.tab[aria-current="page"] > i, .tab[data-current="1"] > i { background: transparent; }
.tab-new { color: var(--text-2); }
.tab-new > i, .tab-new[aria-current="page"] > i { width: 54px; height: 42px; border-radius: 16px; background: radial-gradient(circle at 50% 50%, var(--brand-ink) 0 12px, transparent 13px), conic-gradient(from 200deg, var(--brand-deep), var(--brand-ink) 32%, var(--pop) 50%, var(--brand-ink) 68%, var(--brand-deep)); color: #fff; font-size: 24px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 20px -8px var(--brand-glow); }
.tab-new[aria-current="page"] { background: transparent; }
.tab-new > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

.panel { border-left: 0; }
.panel-head { border-bottom-color: var(--line); }
.panel-title { font-size: 16px; }
.news { padding: 14px 0; border-bottom-color: var(--line); }
.news-title { font-size: 14.5px; font-weight: 800; }
.news-title > i { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px; background: var(--brand-soft); font-size: 17px; }
.news-text, .news-date { margin-left: 40px; }
.legend-list dt { font-size: 18px; }

.foot { background: transparent; border-top: 1px solid var(--line); font-size: 13.5px; }
.foot-copy b { font-family: var(--font-head); font-weight: 700; }
.foot-link { font-weight: 650; }
.popular-title { font-family: var(--font-head); font-size: 11px; letter-spacing: 0.08em; color: var(--muted); }
.popular-link { min-height: 44px; border-color: var(--border); font-weight: 700; }

.pubbar { padding: calc(10px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 0 calc(10px + env(safe-area-inset-left)); background: transparent; border-bottom: 0; }
.pubbar-in { padding: 0 6px 0 8px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: var(--shadow-card); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
.pubbar-in > .brand { min-width: 0; }
.pub-link { border-radius: 999px; font-weight: 700; color: var(--text-2); }
.pub-link[aria-current="page"] { background: var(--brand-soft); color: var(--brand-text); }
.pub-actions { gap: 4px; }
.pub-signup { box-shadow: var(--shadow-btn); }
.lang-btn { font-family: var(--font-mono); font-size: 12px; }
body.is-pub .svc-bar { top: calc(var(--bar-h) + 10px + env(safe-area-inset-top)); }

.page-head { gap: 12px 20px; }
.page-title { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.page-count { display: inline-grid; place-items: center; min-width: 28px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-text); font-size: 12px; font-weight: 800; }
.page-sub { color: var(--muted); }
.sec-title { font-size: 16px; font-weight: 700; }

.box { border-radius: var(--r-card); }
.box-head { min-height: 56px; padding: 12px 18px; border-bottom-color: var(--line); }
.box-title { font-size: 15px; font-weight: 700; }

.kpis { gap: 10px; }
.kpi { position: relative; isolation: isolate; overflow: hidden; padding: 16px; border-radius: var(--r-card); }
.kpi-label { gap: 8px; font-size: 13px; font-weight: 650; color: var(--muted); }
.kpi-label > i { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 10px; font-size: 16px; }
.kpi-value { margin-top: 6px; font-size: 19px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; }
.kpi-value.mono, .kpi-code { font-family: var(--font-mono); letter-spacing: 0; }
.kpi-code { font-size: 13.5px; font-weight: 500; }
.kpi-label > i { --cc: var(--brand); background: color-mix(in srgb, var(--cc) 13%, transparent); color: color-mix(in srgb, var(--cc) 88%, #000); }
.dark .kpi-label > i { color: color-mix(in srgb, var(--cc) 48%, #fff); background: color-mix(in srgb, var(--cc) 24%, transparent); }
.kpi-spent .kpi-label > i { --cc: #15803d; }
.kpi:nth-child(3n + 2):not(.kpi-spent) .kpi-label > i { --cc: #2563eb; }
.kpi:nth-child(3n):not(.kpi-rank) .kpi-label > i { --cc: #c2410c; }
.kpi-bal { border-color: transparent; background-color: var(--brand-deep); background-image: linear-gradient(150deg, var(--brand-deep) 0%, var(--brand-ink) 68%, var(--brand-lilac) 100%); color: #fff; box-shadow: 0 16px 30px -18px var(--brand-glow); }
.kpi-bal::after { right: -110px; top: -130px; width: 300px; height: 300px; }
.kpi-bal::before { background-size: 16px 16px; -webkit-mask-image: linear-gradient(110deg, transparent 30%, #000); mask-image: linear-gradient(110deg, transparent 30%, #000); }
.kpi-bal .kpi-label { color: #fff; }
.kpi.kpi-bal .kpi-label > i { background: rgba(255, 255, 255, 0.18); color: #fff; }
.kpi-bal .kpi-value { color: #fff; font-size: 24px; }
.kpis.has-rank .kpi-bal { grid-column: 1 / -1; }
.kpis.has-rank .kpi-rank { grid-column: auto; }
.kpi-rank { --ring: 40px; padding-left: calc(16px + var(--ring) + 10px); }
.kpi-rank::before { content: ""; position: absolute; left: 16px; top: 50%; width: var(--ring); height: var(--ring); margin-top: calc(var(--ring) / -2); --rw: 7px; --pf: var(--pct, 100); }
.kpi-rank .kpi-label > i { display: none; }
.kpi-rank .rank-link { max-width: 100%; min-width: 44px; min-height: 44px; margin-top: 0; font-family: var(--font-sans); font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.kpi-rank .rank-ico { position: absolute; left: calc(16px + var(--ring) / 2 - 13px); top: 50%; width: 26px; height: 26px; margin-top: -13px; font-size: 14px; }
.rank-link { gap: 8px; }
.kpi-rank .rank-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

.btn, .btn-primary, .btn-secondary, .btn-outline, .btn-ghost, .btn-danger, .btn-success, .btn-light { gap: 8px; padding: 0 20px; font-size: 15px; font-weight: 800; letter-spacing: -0.005em; }
.btn > i { font-size: 18px; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-primary { border: 0; background-color: var(--brand-ink); box-shadow: var(--shadow-btn); }
.btn-secondary { border-color: var(--border); background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(17, 19, 38, 0.05); }
.btn-outline { border-color: var(--border-strong); background: var(--surface); }
.btn-ghost { color: var(--brand-text); }
.btn-light { background: #fff; color: var(--brand-deep); box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.45); }
.btn-lg { min-height: 54px; font-size: 16px; }
.btn-sm { padding: 0 14px; font-size: 13.5px; }
.link { color: var(--brand-text); font-weight: 800; }

.label, .form-label, .control-label { font-size: 13.5px; font-weight: 700; color: var(--text-2); }
.input, .select, .form-control, .form-select, .fg-control { padding: 11px 16px; border-radius: var(--r-field); }
.input:focus, .select:focus, .form-control:focus, .form-select:focus, .fg-control:focus { background: var(--surface); border-color: var(--brand-text); box-shadow: 0 0 0 4px var(--focus-ring); }
.input-group { border-radius: var(--r-field); }
.input-group:focus-within { background: var(--surface); border-color: var(--brand-text); box-shadow: 0 0 0 4px var(--focus-ring); }
.input-addon { padding: 0 2px 0 14px; border-right: 0; background: transparent; color: var(--muted); font-size: 17px; }
.input-group > .input-addon:last-child { padding: 0 14px; border-left: 0; }
.input-btn { border-left: 0; background: transparent; color: var(--muted); }
.check { font-size: 14px; font-weight: 600; }
.help, .help-text, .help-block, .form-text { font-size: 12.5px; }

.alert, .alert-success, .alert-danger, .alert-warning, .alert-info { border-radius: 16px; font-size: 14px; font-weight: 600; }
.badge { gap: 6px; min-height: 24px; padding: 2px 10px; font-size: 12px; font-weight: 800; }
.badge-status > i { display: none; }
.badge-status::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.chips { margin: 0; padding: 4px; gap: 2px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface-2); scroll-padding: 0 4px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); padding-right: 28px; }
.chips .chip { padding: 0 15px; border: 0; background: transparent; color: var(--muted); font-size: 13.5px; font-weight: 800; }
.chips .chip[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-card); }
.chip { border-color: var(--border); font-weight: 800; }
.chip[aria-current="page"], .chip[aria-pressed="true"] { border-color: var(--brand-line); }
.seg { gap: 2px; padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); }
.seg > * { border-radius: 999px; font-size: 13.5px; font-weight: 800; color: var(--muted); }
.seg > [aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-card); }
.srch { border-radius: var(--r-field); }
.srch:focus-within { background: var(--surface); border-color: var(--brand-text); box-shadow: 0 0 0 4px var(--focus-ring); }
.srch button { border-radius: 50%; }

.lst { border-radius: var(--r-card); }
.lst-t tr { border-top-color: var(--line); }
.lst-id { font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
.lst-name { font-weight: 700; }
.lst-sub, .lst-date { font-family: var(--font-mono); font-size: 12px; }
.lst-link { font-family: var(--font-mono); font-size: 12.5px; }
.prog-count { font-family: var(--font-mono); font-size: 12px; }
.bar-track { height: 6px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.bar-fill { background: linear-gradient(90deg, var(--brand-ink), color-mix(in srgb, var(--brand-ink) 60%, #2563eb)); }
.pager { gap: 6px; }
.pg { border-color: var(--border); font-weight: 800; }
.pg[aria-current="page"] { box-shadow: var(--shadow-btn); }
.empty-state { padding: 40px 20px; color: var(--muted); }
.empty-state > i { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--brand-soft); color: var(--brand-text); font-size: 26px; }
.empty-state > p { font-weight: 700; color: var(--text-2); }
.bulk-bar { --focus: var(--on-ink); border: 0; border-radius: 20px; background: var(--ink); color: var(--on-ink); }
.cta-band, .auth-brand, .mass-sum, .hero-copy, .kpi-bal, .api-code { --focus: #fff; }
.music-btn { border-color: var(--border); }

.order-fields { gap: 4px; }
.step { grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; row-gap: 8px; align-items: center; padding: 10px 0 12px; }
.step-body { display: contents; }
.step-num { width: 24px; height: 24px; margin: 0; border-radius: 7px; background: var(--brand-ink); color: #fff; font-size: 11.5px; font-weight: 800; }
.step > .step-num { grid-column: 1; grid-row: 1; }
.step .step-label { grid-column: 2; grid-row: 1; margin: 0; font-size: 14px; font-weight: 700; color: var(--text); }
.step-body > :not(.step-label) { grid-column: 1 / -1; min-width: 0; }
.funds-form .step-num { width: 24px; height: 24px; border-radius: 7px; background: var(--brand-ink); color: #fff; font-size: 11.5px; }
.order-sum { gap: 12px; padding: 16px; border-radius: var(--r-card); background: var(--surface-2); }
.sum-total { --focus: #fff; gap: 6px; padding: 16px 18px; border-radius: 16px; background: #111326; }
.dark .sum-total { background: color-mix(in srgb, var(--brand) 24%, #0a0b14); box-shadow: inset 0 0 0 1px var(--brand-line); }
.sum-total .sum-label { color: #fff; font-size: 13.5px; font-weight: 700; }
.sum-total .sum-value { min-height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #fff; font-size: 28px; font-weight: 800; letter-spacing: -0.04em; }
.sum-total .sum-value:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.order-submit { min-height: 54px; font-size: 16px; }
.bal-preview { border-style: dashed; border-color: var(--border-strong); background: transparent; }
.favorite-item { border-radius: 16px; }
.fav-id { font-family: var(--font-mono); font-weight: 700; }
.favorite-badge { font-family: var(--font-mono); }
.find-pop { border: 0; }
.promo-card { border-radius: 16px; }
.promo-now { font-size: 22px; letter-spacing: -0.03em; }
.promo-clock, .promo-time b { font-family: var(--font-mono); }
.order-done { border-left: 0; box-shadow: inset 4px 0 0 var(--ok), var(--shadow-card); }
.done-ico { border-radius: 14px; }
.done-title { font-size: 17px; }

.nf .card { border-radius: 16px; background: var(--surface-3); }
.nf .card-header { background: transparent; font-weight: 800; }
.nf .card small.text-uppercase { font-family: var(--font-head); font-weight: 600; letter-spacing: 0.06em; }
.nf label, .nf .control-label, .nf .form-label, .nf .custom-label, .nf .fla { font-size: 13.5px; font-weight: 700; }
.nf .btn-default, .nf .clear-datetime, .nf .btn-outline-secondary { background: var(--surface); color: var(--text-2); border-left-color: var(--border-strong); }
.nf .help-block, .nf .min-max { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.dropdown-toggle, .dropdown > .btn.dropdown-toggle { border-radius: var(--r-field); font-size: 16px; }
.dropdown-toggle[aria-expanded="true"] { background: var(--surface); box-shadow: 0 0 0 4px var(--focus-ring); }
.dropdown > .dropdown-menu { padding: 6px; border: 0; box-shadow: var(--shadow-pop); }
.dropdown-item { border-radius: 10px; }
.datepicker.dropdown-menu { border: 0; }

.svc-bar { border-bottom-color: transparent; background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.svc-bar > .chip { background: var(--surface); }
.svc-cat { overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-card); }
.svc-cat + .svc-cat { margin-top: 16px; }
.svc-cat-h { gap: 12px; margin: 0; padding: 8px 16px 8px 12px; border-bottom: 1px solid var(--line); font-family: var(--font-head); font-size: 14px; font-weight: 700; letter-spacing: -0.02em; }
.svc-cat-ico, .stat-ico, .feat-ico, .plat-ico, .acc-sum > i:first-child { --cc: #7c3aed; background: color-mix(in srgb, var(--cc) 13%, transparent); color: var(--cc); }
.dark :is(.svc-cat-ico, .stat-ico, .feat-ico, .plat-ico, .acc-sum > i:first-child) { color: color-mix(in srgb, var(--cc) 48%, #fff); background: color-mix(in srgb, var(--cc) 24%, transparent); }
.svc-cat-ico { width: 36px; height: 36px; border-radius: 12px; font-size: 17px; }
section.svc-cat:nth-of-type(5n + 2) .svc-cat-ico { --cc: #2563eb; }
section.svc-cat:nth-of-type(5n + 3) .svc-cat-ico { --cc: #15803d; }
section.svc-cat:nth-of-type(5n + 4) .svc-cat-ico { --cc: #c2410c; }
section.svc-cat:nth-of-type(5n) .svc-cat-ico { --cc: #db2777; }
.svc-cat-count { display: inline-grid; place-items: center; min-width: 28px; height: 24px; margin-left: auto; padding: 0 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-family: var(--font-sans); font-size: 12px; font-weight: 800; }
.svc-list { border: 0; border-radius: 0; box-shadow: none; }
.svc-name { font-weight: 700; }
.svc-price { font-weight: 800; }
.svc-range { font-family: var(--font-mono); font-size: 12.5px; }
.svc-buy { border: 0; background: var(--brand-soft); font-weight: 800; }
.svc-detail { border-radius: 16px; }
.svc-dl dd { font-family: var(--font-mono); font-size: 13px; }
.svc-buy-label { font-family: var(--font-head); font-size: 11px; letter-spacing: 0.08em; }
.svc-buy-value { font-size: 30px; letter-spacing: -0.04em; }
.facts dd { font-family: var(--font-mono); font-size: 13px; }
.svc-card { border-radius: var(--r-card); }
.svc-card-cat { font-family: var(--font-head); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; color: var(--brand-text); }
.svc-card-facts > div { padding: 8px 10px; border-radius: 12px; background: var(--surface-2); }
.land-hero { position: relative; isolation: isolate; overflow: hidden; background-image: radial-gradient(ellipse 60% 70% at 100% 0%, var(--brand-soft), transparent 70%); }
.land-title { letter-spacing: -0.04em; }

.home { gap: 40px; }
.hero { gap: 14px; }
.hero-copy { position: relative; isolation: isolate; overflow: hidden; padding: 26px 22px 28px; border-radius: 24px; background-color: var(--brand-deep); background-image: linear-gradient(150deg, var(--brand-deep) 0%, var(--brand-ink) 100%); color: #fff; box-shadow: 0 22px 40px -26px var(--brand-glow); }
.hero-copy::before { -webkit-mask-image: linear-gradient(160deg, #000, transparent 75%); mask-image: linear-gradient(160deg, #000, transparent 75%); }
.hero-copy::after { right: -90px; bottom: -110px; width: 280px; height: 280px; }
.hero-copy::before, .kpi-bal::before, .cta-band::before, .hero-copy::after, .kpi-bal::after, .cta-band::after, .auth-brand::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(245, 158, 11, 0.36), rgba(245, 158, 11, 0.1) 42%, transparent 66%); pointer-events: none; }
.kpi-rank::before, .rk-ring::before { border-radius: 50%; background: conic-gradient(var(--rk, var(--brand-ink)) calc(var(--pf) * 1%), var(--surface-2) 0); }
.kpi-rank::before, .rk-ring::before, .at-ring { -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--rw) - 1px), #000 calc(100% - var(--rw))); mask: radial-gradient(farthest-side, transparent calc(100% - var(--rw) - 1px), #000 calc(100% - var(--rw))); }
.hero-title { color: #fff; font-size: 28px; letter-spacing: -0.04em; line-height: 1.12; }
.hero-brand { color: var(--pop-text); }
.hero-tag { margin-top: 8px; color: #fff; }
.hero-lead { margin-top: 14px; color: #fff; font-size: 15.5px; font-weight: 500; line-height: 1.6; }
.login-card { position: relative; gap: 16px; padding: 22px 20px; border-radius: 24px; box-shadow: var(--shadow-pop); }
.login-card::before { content: ""; position: absolute; inset: -1px; padding: 2px; border-radius: inherit; background: linear-gradient(135deg, var(--brand-ink), color-mix(in srgb, var(--brand) 50%, transparent) 45%, var(--pop)); -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 exclude, linear-gradient(#000 0 0); pointer-events: none; }
.login-title { font-size: 19px; letter-spacing: -0.03em; }
.or-line { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.google-btn { border-color: var(--border); }
.home-sec { gap: 20px; }
.sec-head { gap: 8px; }
.sec-h2 { font-size: 23px; letter-spacing: -0.04em; line-height: 1.15; }
.sec-lead { color: var(--muted); }
.stats { gap: 10px; }
.stat { gap: 12px; padding: 16px; border-radius: var(--r-card); }
.stat-ico { width: 44px; height: 44px; border-radius: 14px; }
.stats > :nth-child(4n + 2) .stat-ico { --cc: #15803d; }
.stats > :nth-child(4n + 3) .stat-ico { --cc: #2563eb; }
.stats > :nth-child(4n) .stat-ico { --cc: #b45309; }
.stat-value { font-size: 22px; letter-spacing: -0.04em; }
.stat-label { font-weight: 650; }
.stats > .stat:last-child:nth-child(4) { border-color: transparent; background: #111326; }
.dark .stats > .stat:last-child:nth-child(4) { background: color-mix(in srgb, var(--brand) 22%, #0a0b14); border-color: var(--brand-line); }
.stats > .stat:last-child:nth-child(4) .stat-value { color: #fff; }
.stats > .stat:last-child:nth-child(4) .stat-label { color: #c9cce3; }
.stats > .stat:last-child:nth-child(4) .stat-ico { background: rgba(245, 158, 11, 0.16); color: var(--pop-text); }
.feats { gap: 12px; }
.feat { gap: 10px; padding: 20px; border-radius: var(--r-card); }
.feat-ico { width: 48px; height: 48px; border-radius: 15px; font-size: 22px; }
.feats > :nth-child(4n + 2) .feat-ico { --cc: #15803d; }
.feats > :nth-child(4n + 3) .feat-ico { --cc: #c2410c; }
.feats > :nth-child(4n) .feat-ico { --cc: #0e7490; }
.feat-title { font-size: 16px; }
.feat-text { color: var(--muted); }
.hsteps { gap: 12px; }
.hstep { position: relative; gap: 8px; padding: 20px; border-radius: var(--r-card); }
.hstep-num { width: 40px; height: 40px; border-radius: 14px; background: linear-gradient(140deg, var(--brand-ink), var(--brand-deep)); color: #fff; font-size: 15px; box-shadow: 0 8px 16px -8px var(--brand-glow); }
.hstep-ico { display: none; }
.hstep-title { font-size: 16px; }
.hstep-text { color: var(--muted); }
.plats { gap: 10px; }
.plat { gap: 8px; padding: 16px 10px; border-radius: var(--r-tile); }
.plat-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; font-size: 24px; }
.plat[data-platform="instagram"] .plat-ico { --cc: #c13584; }
.plat[data-platform="youtube"] .plat-ico { --cc: #d90000; }
.plat[data-platform="facebook"] .plat-ico { --cc: #1765cc; }
.plat[data-platform="telegram"] .plat-ico { --cc: #1a7fb5; }
.plat[data-platform="whatsapp"] .plat-ico, .plat[data-platform="spotify"] .plat-ico { --cc: #15803d; }
.plat[data-platform="twitch"] .plat-ico { --cc: #7c3aed; }
.plat[data-platform="linkedin"] .plat-ico { --cc: #0a66c2; }
.plat[data-platform="tiktok"] .plat-ico, .plat[data-platform="twitter"] .plat-ico, .plat[data-platform="threads"] .plat-ico { --cc: var(--text); }
.plat-name { font-size: 14.5px; }
.plat-count { font-weight: 650; }
.cat-link { border-radius: var(--r-card); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.offer { border-radius: var(--r-card); }
.offer-cat { font-family: var(--font-head); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; }
.faq-list { gap: 10px; counter-reset: faq; }
.faq-item.box { padding: 0 18px; border-radius: 18px; }
.faq-q { gap: 14px; min-height: 60px; }
.faq-q::before { content: counter(faq, decimal-leading-zero); counter-increment: faq; flex-shrink: 0; min-width: 26px; color: var(--brand-text); font-family: var(--font-head); font-size: 13px; font-weight: 700; }
.faq-q > :is(h3, span) { flex: 1 1 auto; min-width: 0; text-align: left; }
.faq-q h3 { font-size: 15px; font-weight: 800; }
.faq-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--brand-soft); font-size: 18px; }
.faq-a { padding-left: 40px; color: var(--muted); }
.cta-band { position: relative; isolation: isolate; overflow: hidden; gap: 12px; padding: 40px 22px; border-radius: 26px; background-color: var(--brand-deep); background-image: linear-gradient(140deg, var(--brand-deep), var(--brand-ink)); box-shadow: 0 22px 40px -24px var(--brand-glow); }
.cta-band::after { left: 50%; bottom: -160px; width: 360px; height: 260px; margin-left: -180px; }
.cta-title { font-size: 24px; letter-spacing: -0.04em; }

.auth { gap: 14px; }
.auth-brand { position: relative; isolation: isolate; overflow: hidden; background-color: var(--brand-deep); background-image: linear-gradient(155deg, var(--brand-deep), var(--brand-ink)); color: #fff; }
.auth-brand::after { right: -100px; top: -100px; width: 280px; height: 280px; }
.auth-brand .brand, .auth-brand .brand-name { color: #fff; }
.auth-brand .brand-mark { background: #fff; color: var(--brand-deep); box-shadow: none; }
.auth-points li { color: #fff; font-weight: 700; }
.auth-points i { width: 36px; height: 36px; border-radius: 12px; background: rgba(255, 255, 255, 0.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.auth-card { gap: 18px; padding: 22px 20px; border-radius: 24px; box-shadow: var(--shadow-pop); }
.auth-ico { width: 46px; height: 46px; border-radius: 15px; background: linear-gradient(140deg, var(--brand-ink), var(--brand-deep)); box-shadow: 0 8px 16px -8px var(--brand-glow); }
.auth-title { font-size: 21px; letter-spacing: -0.04em; }

.acc { gap: 16px; }
.acc-name { font-family: var(--font-head); font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.acc-mail { font-family: var(--font-mono); font-size: 12px; }
.acc-nav-link { gap: 12px; border-radius: 14px; font-weight: 700; }
.acc-nav-link > i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--brand-soft); font-size: 16px; }
.acc-sec { border-radius: var(--r-card); }
.acc-sum { gap: 12px; min-height: 60px; padding: 0 18px; font-size: 15px; font-weight: 800; }
.acc-sum > i:first-child { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; font-size: 18px; }
#acc-password .acc-sum > i:first-child { --cc: #c2410c; }
#acc-lang .acc-sum > i:first-child { --cc: #0e7490; }
#acc-timezone .acc-sum > i:first-child { --cc: #2563eb; }
#acc-mail .acc-sum > i:first-child { --cc: #db2777; }
#acc-api .acc-sum > i:first-child, .tk-new .acc-sum > i:first-child { --cc: #15803d; }
details[open] > .acc-sum { border-bottom: 1px solid var(--line); }
.acc-form { gap: 16px; padding: 18px; border-top: 0; }
.rk-card { gap: 14px; }
.rk-label { font-weight: 650; }
.rk-name { letter-spacing: -0.03em; }
.rk-icon { border-radius: 14px; box-shadow: 0 8px 16px -10px var(--rk, transparent); }
.rk-progress .bar-fill, .rk-bar .bar-fill { background: var(--rk, var(--brand-ink)); }

.rk-hero { gap: 14px; padding: 18px; background-image: radial-gradient(ellipse 80% 100% at 0% 0%, var(--rk-soft, var(--brand-soft)), transparent 70%); }
.rk-hero-prog { border-radius: 18px; }
.rk-name-lg { font-size: 24px; letter-spacing: -0.04em; }
.rk-spent { border-radius: 16px; }
.rk-spent-value { font-size: 19px; letter-spacing: -0.03em; }
.rk-ring { width: 104px; height: 104px; }
.rk-ring svg { display: none; }
.rk-ring::before { content: ""; position: absolute; inset: 0; --rw: 11px; --pf: var(--pct, 0); }
.rk-ring-text { font-family: var(--font-head); font-size: 17px; font-weight: 700; letter-spacing: -0.03em; }
.rk-ends { font-weight: 700; }
.rk-levels { gap: 12px; }
.rk-level { position: relative; gap: 8px; padding: 18px; border-radius: var(--r-card); background-color: var(--surface); background-image: linear-gradient(180deg, color-mix(in srgb, var(--rk, var(--brand)) 11%, var(--surface)), var(--surface) 72%); }
.rk-level .rk-icon { width: 48px; height: 48px; border-radius: 15px; font-size: 22px; }
.rk-level[data-state="current"] { border-color: transparent; box-shadow: 0 0 0 2px var(--rk), 0 14px 28px -16px var(--rk); }
.rk-level-name { font-family: var(--font-head); font-size: 16px; font-weight: 700; letter-spacing: -0.03em; }
.rk-level-range { font-family: var(--font-mono); font-size: 13px; }
.rk-level-desc { color: var(--muted); }

.funds-form { gap: 20px; }
.funds-form .step-label { gap: 10px; margin: 0; font-size: 14.5px; font-weight: 800; color: var(--text); }
.pay-methods { gap: 10px; }
.pay-card { gap: 8px; min-height: 88px; border: 1px solid var(--border); border-radius: var(--r-tile); background: var(--surface-2); transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; }
.pay-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-text); font-size: 19px; }
.pay-name { font-weight: 800; }
.pay-radio:checked + .pay-card { border-color: var(--brand-text); background: var(--brand-soft); box-shadow: 0 0 0 3px var(--focus-ring); }
.aff-rate-title { letter-spacing: -0.04em; }
.copy-row > .input { font-family: var(--font-mono); }

.tk-grid { gap: 16px; }
.chat { gap: 16px; }
.msg-bubble { border-radius: 20px; font-size: 14.5px; }
.msg-me .msg-bubble { border-bottom-right-radius: 6px; background: linear-gradient(140deg, var(--brand-ink), var(--brand-deep)); background-color: var(--brand-ink); }
.msg-sup .msg-bubble { border-bottom-left-radius: 6px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.msg-meta { font-family: var(--font-mono); font-size: 11.5px; }
.msg-meta strong { font-family: var(--font-sans); font-weight: 800; }

.upd-group { border-radius: var(--r-card); }
.upd-head { padding: 12px 18px; border-bottom-color: var(--line); background: var(--surface-2); }
.upd-day { font-family: var(--font-head); font-size: 13.5px; font-weight: 700; }
.upd-date { font-family: var(--font-mono); font-size: 12px; }
.upd-item { padding: 14px 18px; }
.upd-ico { width: 38px; height: 38px; border-radius: 12px; }
.upd-name { font-weight: 700; }
.upd-meta { font-family: var(--font-mono); font-size: 11.5px; }

.api-sec { border-radius: var(--r-card); }
.api-code { background: #111326; }
.api-h { font-family: var(--font-head); font-size: 11px; letter-spacing: 0.06em; }
.api-code .api-h { color: #c9cce3; }
.api-key { font-family: var(--font-mono); font-size: 12.5px; }
.code { color: #a7f3d0; font-size: 12.5px; line-height: 1.6; }

.posts { gap: 16px; }
.post { border-radius: var(--r-card); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.post-title { font-size: 16px; font-weight: 800; }
.post-title > i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: var(--brand-soft); font-size: 18px; }
.read-cover { border-radius: var(--r-card); }
.prose code { padding: 1px 6px; border-radius: 6px; background: var(--surface-2); font-size: 0.86em; }
.prose pre code { padding: 0; background: none; }
.prose blockquote { border-left-color: var(--brand); }
.prose h1, .prose h2 { font-family: var(--font-head); letter-spacing: -0.03em; }

.mass-row { border-radius: var(--r-card); }
.order-num { min-width: 28px; height: 28px; border-radius: 9px; font-family: var(--font-head); font-size: 12px; }
.price-display { font-family: var(--font-mono); font-size: 12.5px; }
.mass-sum { border: 0; border-radius: 16px; background: #111326; color: #fff; }
.dark .mass-sum { background: color-mix(in srgb, var(--brand) 24%, #0a0b14); box-shadow: inset 0 0 0 1px var(--brand-line); }
.mass-sum .sum-label { color: #fff; }
.mass-sum .sum-value { border: 0; background: transparent; color: #fff; }

.crumbs-list { font-size: 13px; font-weight: 600; }
.crumb-now { font-weight: 800; }
.banner { border: 0; border-radius: 18px; background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand-line); }
.banner-go { box-shadow: var(--shadow-btn); }

.modal { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.modal-card { border: 0; border-radius: 24px; }
.modal-head-brand { border-radius: 24px 24px 0 0; background: linear-gradient(140deg, var(--brand-ink), var(--brand-deep)); background-color: var(--brand-ink); }
.modal-title { font-size: 16px; font-weight: 800; }
.confirm-dialog { border: 0; border-radius: 24px; }
.confirm-dialog[data-tone="danger"] .confirm-yes { box-shadow: none; }
.dlg-body { gap: 16px; padding: 22px; }
.dlg-title { font-size: 16.5px; letter-spacing: -0.03em; }
.captcha-input { font-family: var(--font-mono); }

body.is-error { background: var(--bg); }
.err-card { position: relative; isolation: isolate; overflow: hidden; padding: 40px 22px; border: 1px solid var(--border); border-radius: 26px; background: var(--surface); box-shadow: var(--shadow-card); }
.err-card::before { content: ""; position: absolute; z-index: -1; left: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, var(--brand-soft-2), transparent 66%); pointer-events: none; }
.err-code { background: linear-gradient(120deg, var(--brand-ink), var(--brand-lilac) 55%, var(--pop)); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: clamp(80px, 26vw, 160px); font-weight: 800; letter-spacing: -0.06em; }
.err-ico { border-radius: 18px; background: linear-gradient(140deg, var(--brand-ink), var(--brand-deep)); }
.err-title { letter-spacing: -0.04em; }
.err-text { color: var(--muted); }

.art-tiles { min-height: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: 52px 52px; grid-template-areas: "a b r r c d" "e e r r f g"; gap: 10px; max-width: 30rem; }
.at { display: grid; place-items: center; min-width: 0; border-radius: 16px; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 22px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.at-a { grid-area: a; background: #db2777; }
.at-b { grid-area: b; background: #c2410c; }
.at-c { grid-area: c; background: #111326; }
.at-d { grid-area: d; background: #0e7490; }
.at-e { grid-area: e; align-content: center; justify-items: start; gap: 8px; padding: 0 14px; }
.at-f { grid-area: f; background: #2563eb; }
.at-g { grid-area: g; background: #15803d; }
.at-r { grid-area: r; background: rgba(255, 255, 255, 0.1); }
.at-ring { --rw: 10px; width: 74px; height: 74px; border-radius: 50%; background: conic-gradient(var(--pop) 0 68%, rgba(255, 255, 255, 0.24) 0); }
.at-bar { display: block; width: 80%; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.7); }
.at-bar-2 { width: 52%; background: var(--pop); }

@media (hover: hover) {
  .side-nav .nav-link:hover:not([aria-current="page"]) { background: color-mix(in srgb, var(--ic) 20%, transparent); color: var(--text); }
  .side-foot .nav-link:hover { background: var(--surface-2); }
  .icon-btn:hover, .avatar-btn:hover { background: var(--surface-2); color: var(--text); }
  .top-bell:hover, .avatar-btn:hover { border-color: var(--border-strong); }
  .bal-pill:hover { background: var(--brand-soft-2); }
  .menu-item:hover { background: var(--surface-2); color: var(--text); }
  .btn-secondary:hover, .btn-outline:hover { background: var(--surface-2); border-color: var(--border-strong); }
  .btn-light:hover { background: #f4efff; }
  .chips .chip:hover:not([aria-current="page"]) { color: var(--text); }
  .seg > :hover:not([aria-selected="true"]) { color: var(--text); }
  .pg:hover:not([aria-current="page"]) { border-color: var(--border-strong); color: var(--text); }
  .svc-buy:hover { background: var(--brand-ink); color: var(--on-brand); }
  .pay-card:hover { border-color: var(--border-strong); }
  .pay-radio:checked + .pay-card:hover { border-color: var(--brand-text); }
  .acc-nav-link:hover { background: var(--surface-2); color: var(--text); }
  .tab:hover:not([aria-current="page"]):not(.tab-new) { background: var(--ic-soft); }
  .pub-link:hover:not([aria-current="page"]) { background: var(--surface-2); color: var(--text); }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .kpi:not(.kpi-bal):hover, .cat-link:hover, .post:hover, .feat:hover, .plat:hover, .stat:hover, .rk-level:hover { transform: translateY(-2px); }
  .kpi, .feat, .plat, .stat, .rk-level { transition: transform 0.15s ease; }
}

@media (min-width: 480px) {
  .kpi-rank { --ring: 50px; }
  .kpi-rank .rank-ico { left: calc(16px + var(--ring) / 2 - 15px); width: 30px; height: 30px; margin-top: -15px; font-size: 15px; }
}

@media (min-width: 640px) {
  .chips { display: inline-flex; flex-wrap: wrap; width: fit-content; max-width: 100%; padding: 4px; overflow: visible; border-radius: 999px; -webkit-mask-image: none; mask-image: none; }
  .panel { border-radius: 24px 0 0 24px; }
  .order-tabs { justify-self: start; width: fit-content; }
  .order-tabs > * { flex: 0 0 auto; padding: 0 18px; }
  .page-title { font-size: 26px; }
  .kpis.has-rank { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi { padding: 18px; }
  .kpi-rank { padding-left: calc(18px + var(--ring) + 14px); }
  .kpi-rank::before { left: 18px; }
  .kpi-rank .rank-ico { left: calc(18px + var(--ring) / 2 - 15px); }
  .hero-title { font-size: 36px; }
  .sec-h2 { font-size: 28px; }
  .pay-card { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 64px; padding: 10px 40px 10px 12px; text-align: left; }
  .pay-check { top: 50%; right: 12px; transform: translateY(-50%); }
  .pay-methods { --pay-min: 12.5rem; }
  .err-card { padding: 52px 40px 46px; }
}

@media (min-width: 768px) {
  .order-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .order-fields > .step-details { grid-column: 1 / -1; }
  .rk-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 22px; }
  .auth { border: 0; border-radius: 26px; box-shadow: 0 0 0 1px var(--border), var(--shadow-pop); }
  .auth-brand { border-right: 0; }
  .auth-verify { box-shadow: none; }
  .auth:not(.auth-verify) .auth-card { border-radius: 0; box-shadow: none; }
  .auth-art .art-tiles { margin-top: 8px; }
  .cta-band { padding: 56px 32px; }
  .cta-title { font-size: 30px; }
}

@media (max-width: 1023.98px) {
  :root { --tab-h: 72px; }
  .hero-art { display: none; }
  .side { box-shadow: 0 30px 60px -20px rgba(17, 19, 38, 0.4); }
  .side-head { min-height: 60px; }
  .chips .chip, .seg > * { min-height: 44px; }
  .svc-buy, .pg, .side-bal-add, .rank-pill { min-height: 44px; }
  .top-title { margin-right: 4px; }
  .bal-pill { max-width: 34vw; padding: 0 12px; font-size: 13.5px; }
  .top-bell, .avatar-btn { border: 0; background: transparent; box-shadow: none; }
}

@media (min-width: 640px) and (max-width: 1023.98px) {
  .tabbar { max-width: 560px; margin: 0 auto; }
}

@media (max-width: 359.98px) {
  .side-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639.98px) {
  .kpi-value.num { font-family: var(--font-sans); font-size: clamp(15px, 4.6vw, 19px); letter-spacing: -0.02em; white-space: nowrap; overflow-wrap: normal; }
  .kpis.has-rank .kpi-bal .kpi-value.num, .kpis-one .kpi-value.num { font-family: var(--font-head); font-size: clamp(19px, 6.2vw, 24px); letter-spacing: -0.03em; }
}

@media (min-width: 1024px) {
  :root { --fs-base: 14.5px; --page-gap: 20px; }
  .side-nav { display: flex; }
  .side-nav .nav-link { flex-direction: row; justify-content: center; align-items: center; min-height: 44px; padding: 0; border: 0; }
  .side-nav .nav-link > i { width: auto; height: auto; background: none; color: inherit; }
  .side-nav .nav-link[aria-current="page"] > i { background: none; }
  .topbar { border-bottom: 0; }
  .topbar-in { gap: 10px; }
  .top-title { font-size: 16px; }
  .topbar .top-search { flex: 0 1 22rem; margin-left: auto; border-color: var(--border-strong); background: var(--surface); border-radius: 999px; }
  .topbar .top-search input { min-height: 44px; font-size: 14px; }
  .top-actions { gap: 8px; margin-left: 0; }
  .bal-pill { position: relative; min-height: 44px; padding: 0 6px 0 16px; gap: 10px; font-size: 14px; }
  .bal-pill::after { content: ""; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(#fff, #fff) center / 12px 2px no-repeat, linear-gradient(#fff, #fff) center / 2px 12px no-repeat, var(--brand-ink); box-shadow: 0 6px 12px -6px var(--brand-glow); }
  .top-bell, .avatar-btn { width: 44px; height: 44px; }
  .page-title { font-size: 28px; letter-spacing: -0.035em; }
  .page-head { min-height: 48px; }
  .kpis.has-rank { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1.45fr); }
  .kpis.has-rank .kpi-bal { grid-column: auto; }
  .page-order > .kpis:not(.has-rank) { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .page-order .kpi { min-height: 140px; padding: 20px 22px; }
  .page-order .kpi-bal .kpi-value { margin-top: 10px; font-size: 32px; }
  .page-order .kpi-spent { display: flex; flex-direction: column; justify-content: flex-end; }
  .page-order .kpi-spent .kpi-label { flex-direction: column; align-items: flex-start; gap: 18px; }
  .page-order .kpi-spent .kpi-label > i { position: absolute; top: 20px; left: 22px; width: 40px; height: 40px; border-radius: 13px; font-size: 19px; }
  .page-order .kpi-spent .kpi-value { font-size: 21px; }
  .page-order .kpi-rank { --ring: 78px; display: flex; flex-direction: column; justify-content: center; padding-left: calc(22px + var(--ring) + 18px); }
  .page-order .kpi-rank::before { left: 22px; --rw: 8px; }
  .page-order .kpi-rank .rank-ico { left: calc(22px + var(--ring) / 2 - 20px); width: 40px; height: 40px; margin-top: -20px; font-size: 20px; }
  .page-order .kpi-rank .rank-link { font-family: var(--font-head); font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
  .bal-pill > i { display: block; font-size: 17px; }
  .page-funds { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); }
  .page-funds > * { grid-column: 1 / -1; }
  .page-funds > .page-head { grid-column: 1; grid-row: 1; }
  .page-funds > .kpis { grid-column: 2; grid-row: 1; }
  .page-funds .kpi-bal .kpi-value { font-size: 26px; }
  .svc { min-height: 54px; }
  body.is-app .svc-bar, body.is-pub .svc-bar { position: relative; top: auto; padding: 0; background: transparent; border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .svc-bar > .srch { flex: 0 1 26rem; margin-right: auto; }
  .svc-filter { width: 17rem; font-size: 14.5px; }
  .svc-head { padding: 10px 16px; background: var(--surface-2); border-bottom-color: var(--line); color: var(--muted); font-size: 11.5px; font-weight: 800; }
  .input, .select, .form-control, .form-select, .fg-control, .srch input, .dropdown-toggle { font-size: 15px; }
  .copy-row > .input { font-size: 14px; }
  .lst-t:not(.lst-cards) th { background: var(--surface-2); color: var(--muted); font-size: 11.5px; font-weight: 800; letter-spacing: 0.05em; }
  .acc-nav { padding: 8px; border-radius: var(--r-card); box-shadow: var(--shadow-card); }

  .home { gap: 64px; }
  .hero { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); column-gap: 16px; row-gap: 0; align-items: stretch; }
  .hero-copy { grid-row: 1 / span 2; grid-column: 1; padding: 52px 48px 196px; border-radius: 28px; }
  .hero-art { grid-row: 2; grid-column: 1; align-self: end; z-index: 1; padding: 0 48px 44px; }
  .hero-login { align-self: stretch; max-width: none; }
  .login-card { height: 100%; align-content: center; padding: 30px 28px; border-radius: 28px; }
  .hero-title { font-size: 44px; line-height: 1.08; }
  .hero-lead { font-size: 16.5px; max-width: 36rem; }
  .sec-h2 { font-size: 32px; }
  .hsteps > .hstep:not(:last-child)::after { content: ""; position: absolute; z-index: 1; top: 39px; left: calc(100% - 6px); width: calc(var(--page-gap) + 12px); border-top: 2px dashed var(--brand-line); }
  .home-faq .faq-list { max-width: 56rem; }
  .auth-brand { padding: 44px; }
  .auth:not(.auth-verify) .auth-main { padding: 40px; }

  html[data-shell="rail"] { --ri: 48px; --rg: 5px; --rr: 16px; --rb: 44px; --rf: 44px; --rp: 14px; --rm: 14px; }
  html[data-shell="rail"] .side { top: var(--rm); height: calc(100vh - 2 * var(--rm)); height: calc(100dvh - 2 * var(--rm)); width: 76px; margin: var(--rm) 0 var(--rm) 14px; padding: var(--rp) 0; gap: var(--rg); align-items: center; border: 1px solid var(--border); border-radius: 26px; background: var(--side-bg); box-shadow: var(--shadow-card); }
  html[data-shell="rail"] .side::-webkit-scrollbar { display: none; }
  html[data-shell="rail"] .side-head { flex-shrink: 0; min-height: 0; padding: 0 0 2px; }
  html[data-shell="rail"] .side-head .brand-mark { width: var(--rb); height: var(--rb); border-radius: calc(var(--rb) / 3); font-size: 16px; }
  html[data-shell="rail"] .side-new { flex-shrink: 0; width: var(--ri); height: var(--ri); min-height: 0; border-radius: var(--rr); box-shadow: 0 8px 18px -6px var(--brand-glow); }
  html[data-shell="rail"] .side-new > i { font-size: 22px; }
  html[data-shell="rail"] .side-nav { flex-direction: column; align-items: center; gap: var(--rg); width: 100%; }
  html[data-shell="rail"] .side-nav::before { content: ""; flex-shrink: 0; width: 28px; height: 1px; margin: 2px 0 4px; background: var(--border); }
  html[data-shell="rail"] .side .nav-link { flex-shrink: 0; width: var(--ri); height: var(--ri); min-height: 0; border-radius: var(--rr); background: var(--ic-soft); color: var(--ic-fg); }
  html[data-shell="rail"] .side .nav-link > i { font-size: 19px; }
  html[data-shell="rail"] .side .nav-link[aria-current="page"] { background: var(--ic); color: #fff; box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--ic) 65%, transparent); }
  html[data-shell="rail"] .side-foot { flex-shrink: 0; align-items: center; width: 100%; margin-top: auto; padding-top: 6px; gap: var(--rg); border-top: 0; }
  html[data-shell="rail"] .side-foot .nav-link { width: var(--rf); height: var(--rf); border-radius: calc(var(--rr) - 2px); background: var(--surface-2); color: var(--text-2); }
  html[data-shell="rail"] .side-foot .nav-link > i { width: auto; height: auto; line-height: 1; background: none; color: inherit; font-size: 19px; }
  html[data-shell="rail"] .side-foot .nav-out { background: var(--ic-soft); color: var(--ic-fg); }
  html.nav-icons[data-shell="rail"] .side :is(.side-new, .nav-link) > span { max-width: 16rem; overflow: visible; white-space: nowrap; -webkit-line-clamp: none; padding: 7px 12px; border-radius: 10px; background: #111326; color: #fff; font-family: var(--font-sans); font-size: 13px; font-weight: 700; box-shadow: var(--shadow-pop); }
  html.nav-icons[data-shell="rail"] .side-nav .nav-link > span { display: block; }
  html.dark.nav-icons[data-shell="rail"] .side :is(.side-new, .nav-link) > span { background: #eceefa; color: #111326; }
}

@media (min-width: 1024px) and (pointer: fine) {
  .topbar .top-search { min-height: 42px; }
  .topbar .top-search input { min-height: 40px; }
  .topbar .top-search button { width: 40px; height: 40px; }
  .chips .chip { min-height: 38px; }
  .seg > *, .pg { min-height: 40px; }
  .pg { min-width: 40px; }
  .btn-sm { min-height: 38px; }
  .svc-buy { min-height: 36px; }
  .acc-nav-link { min-height: 42px; }
}

@media (min-width: 1024px) and (max-height: 960px) and (pointer: fine) {
  html[data-shell="rail"] { --ri: 40px; --rg: 3px; --rr: 13px; --rb: 38px; --rf: 38px; --rp: 12px; }
}

@media (min-width: 1024px) and (max-height: 820px) and (pointer: fine) {
  html[data-shell="rail"] { --ri: 34px; --rg: 2px; --rr: 11px; --rb: 32px; --rf: 32px; --rp: 8px; --rm: 10px; }
  html[data-shell="rail"] .side .nav-link > i { font-size: 17px; }
}

@media (min-width: 1024px) and (max-height: 700px) and (pointer: fine) {
  html[data-shell="rail"] { --ri: 32px; --rr: 10px; --rb: 30px; --rf: 30px; --rp: 8px; --rm: 8px; }
}

@media (min-width: 1024px) and (max-width: 1279.98px) {
  :root { --gutter: 24px; }
  .hero-copy { padding: 44px 36px 190px; }
  .hero-art { padding: 0 36px 40px; }
  .hero-title { font-size: 38px; }
}

@media (min-width: 1280px) {
  .order { column-gap: 20px; }
  .order-tabs { margin: 20px 22px 0; }
  .order-search { padding: 18px 22px 4px; }
  .order-fields { padding: 4px 22px 22px; }
  .order-favs { padding: 20px 22px; }
  .order-sum { gap: 14px; padding: 20px; background: var(--surface); border-radius: var(--r-card); }
  .sum-total { padding: 18px 20px 16px; }
  .sum-total .sum-value { font-size: 32px; }
}

@media (min-width: 1440px) {
  :root { --sum-w: 460px; }
  .hero-title { font-size: 50px; }
}

@media (max-height: 500px) and (orientation: landscape) {
  :root { --tab-h: 58px; --tab-gap: 6px; }
  .tab { min-height: 44px; }
  .tab > i { width: 34px; height: 26px; }
  .tab-new > i { width: 50px; height: 38px; }
  .side-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .side-nav .nav-link { flex-direction: row; align-items: center; justify-content: flex-start; min-height: 48px; padding: 6px 8px; }
  .side-nav .nav-link > i { width: 30px; height: 30px; flex-shrink: 0; }
  .side-nav .nav-link > span { line-height: 1.15; }
  .side-bal { grid-template-columns: auto minmax(0, 1fr) auto; padding: 8px 10px; }
  .side-bal-label { grid-column: 1; grid-row: 1; }
  .side-bal-value { grid-column: 2; grid-row: 1; font-size: 16px; }
  .side-bal-add { grid-column: 3; grid-row: 1; padding: 0 12px; }
  .rank-pill { grid-row: 2; }
  .side-head { min-height: 48px; }
}

@media (prefers-reduced-motion: no-preference) {
  .kpi-rank::before, .rk-ring::before { animation: tiles-ring 0.9s var(--ease-out) both; }
  .at-ring { animation: tiles-spin 14s linear infinite; }
  .menu-panel { transition: opacity 0.16s var(--ease-out), visibility 0.16s ease, transform 0.16s var(--ease-out); transform: translateY(-4px) scale(0.98); transform-origin: top right; }
}
@media (prefers-reduced-transparency: reduce) {
  .pubbar-in { background-color: var(--surface); }
  .svc-bar { background-color: var(--bg); }
}
@keyframes tiles-ring { from { transform: rotate(-90deg); opacity: 0; } }
@keyframes tiles-spin { to { transform: rotate(360deg); } }