:root {
  color-scheme: dark;
  --bg: #060914;
  --bg-deep: #03050c;
  --surface: rgba(16, 23, 40, .82);
  --surface-strong: rgba(20, 29, 50, .94);
  --surface-soft: rgba(20, 30, 50, .58);
  --line: rgba(159, 183, 226, .15);
  --line-strong: rgba(159, 201, 255, .3);
  --text: #f5f8ff;
  --muted: #8d9ab3;
  --muted-2: #65728c;
  --cyan: #45e9ff;
  --cyan-2: #5aa7ff;
  --violet: #9b78ff;
  --lime: #a8f05a;
  --emerald: #5bf0a2;
  --gold: #f1c772;
  --danger: #ff788e;
  --shadow-lg: 0 32px 90px rgba(0, 0, 0, .42);
  --shadow-md: 0 16px 46px rgba(0, 0, 0, .28);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --nav-height: 76px;
  --font-display: "Onest", "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Manrope", "Onest", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
}

* { box-sizing: border-box; }
html { min-height: 100%; margin: 0; background: var(--bg-deep); scroll-behavior: smooth; }
body { min-height: 100%; margin: 0; overflow-x: clip; background: transparent; color: var(--text); font-family: var(--font-body); font-weight: 500; }
body::before,
body::after { content: ""; position: fixed; pointer-events: none; z-index: 0; }
body::before { inset: 0; background: radial-gradient(circle at 8% 12%, rgba(0, 174, 255, .19), transparent 30%), radial-gradient(circle at 88% 16%, rgba(103, 76, 255, .12), transparent 31%), radial-gradient(circle at 53% 78%, rgba(0, 208, 255, .075), transparent 33%); }
body::after { inset: 0; opacity: .22; background: linear-gradient(180deg, rgba(1,7,18,.02), rgba(2,7,17,.26) 72%, rgba(2,5,13,.58)); }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: wait; opacity: .58; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
img { display: block; max-width: 100%; }
.hidden { display: none !important; }

.app-bg { position: fixed; inset: 0; z-index: 0; background-color: #06142b; background-image: linear-gradient(138deg, rgba(0,43,82,.2), rgba(2,8,23,.08) 44%, rgba(22,12,59,.12)), url("/app/assets/connectix-network-bg.28b599fff748.svg"); background-position: center; background-size: cover; background-repeat: no-repeat; }
.app-shell { position: relative; z-index: 1; width: min(100%, 1160px); min-height: 100dvh; margin: 0 auto; padding: max(20px, env(safe-area-inset-top)) 20px calc(var(--nav-height) + 34px + env(safe-area-inset-bottom)); }
.screen { display: none; min-height: calc(100dvh - 140px); }
.screen.active { display: block; animation: screen-in .42s cubic-bezier(.2, .8, .2, 1); }
@keyframes screen-in { from { opacity: 0; transform: translateY(12px) scale(.993); } to { opacity: 1; transform: none; } }

.glass,
.glass-soft { position: relative; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(22, 31, 53, .85), rgba(10, 16, 29, .83)); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.035); backdrop-filter: blur(24px) saturate(128%); -webkit-backdrop-filter: blur(24px) saturate(128%); }
.glass-soft { background: linear-gradient(145deg, rgba(20, 30, 49, .65), rgba(10, 16, 29, .6)); box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }

.dashboard-topbar { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-bottom: 18px; }
.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-tree { display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border: 1px solid rgba(69, 233, 255, .42); border-radius: 13px; color: #07101a; background: linear-gradient(145deg, var(--cyan), #75abff 52%, var(--violet)); box-shadow: 0 0 28px rgba(69, 233, 255, .18), inset 0 1px 0 rgba(255,255,255,.8); font: 800 12px var(--font-display); letter-spacing: -.05em; }
.brand-wordmark { font: 800 15px var(--font-display); letter-spacing: .29em; text-shadow: 0 2px 18px rgba(69,233,255,.16); }
.system-pill,
.live-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(91, 240, 162, .2); border-radius: 999px; padding: 8px 12px; color: #c9fbe0; background: rgba(91, 240, 162, .07); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.system-pill i,
.live-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 4px rgba(91,240,162,.09), 0 0 13px var(--emerald); }

.welcome-row { display: flex; align-items: center; gap: 13px; margin: 0 3px 16px; }
.profile-avatar { display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border: 1px solid rgba(111, 205, 255, .65); color: #fff; background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.24), transparent 24%), linear-gradient(145deg, #136d86, #5740a1); box-shadow: 0 0 28px rgba(69, 233, 255, .16), inset 0 1px 0 rgba(255,255,255,.22); font: 800 20px var(--font-display); }
.profile-avatar--dashboard { width: 50px; height: 50px; border-radius: 17px; }
.profile-avatar--compact { width: 66px; height: 66px; border-radius: 21px; }
.profile-avatar--premium { border-color: var(--gold); box-shadow: 0 0 30px rgba(241,199,114,.24); }
.welcome-label,
.eyebrow,
.brand-kicker { color: var(--cyan); font: 800 10px var(--font-display); letter-spacing: .15em; text-transform: uppercase; }
.welcome-row h1 { margin: 3px 0 2px; font: 800 clamp(22px, 4vw, 27px) var(--font-display); letter-spacing: -.035em; text-shadow: 0 3px 20px rgba(0,0,0,.3); }
.welcome-row p { margin: 0; color: var(--muted); font-size: 12px; }

.screen-header { margin-bottom: 16px; padding: 3px 2px; }
.screen-header--center { text-align: center; }
.screen-header h2,
.screen-title { margin: 6px 0 0; font: 800 clamp(30px, 5.2vw, 46px) var(--font-display); letter-spacing: -.055em; text-shadow: 0 4px 26px rgba(0,0,0,.3); }
.screen-header h2, .screen-title { font-family: var(--font-display); font-weight: 800; }
.screen[data-screen="news"] .screen-header h2 { color: #cbd5e7; text-shadow: 0 3px 20px rgba(69,233,255,.09); }

.dashboard-balance,
.balance-card,
.profile-card { overflow: hidden; border-radius: var(--radius-xl); padding: clamp(20px, 4vw, 30px); }
.dashboard-balance::before,
.balance-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(7, 12, 23, .98) 0%, rgba(7, 12, 23, .9) 48%, rgba(7,12,23,.18) 100%), url("/app/assets/aurora-data-core.15a9c300ed24.webp") 74% 50% / cover no-repeat; opacity: .68; }
.dashboard-balance::after,
.balance-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(105deg, rgba(69,233,255,.09), transparent 42%, rgba(155,120,255,.07)); }
.dashboard-balance > *,
.balance-card > * { position: relative; z-index: 1; }
.dashboard-balance-head,
.section-head,
.balance-chart-caption,
.payment-history-top,
.subscription-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dashboard-balance-value,
.balance-value { margin: 10px 0 4px; font: 800 clamp(42px, 8vw, 68px) var(--font-display); letter-spacing: -.07em; text-shadow: 0 0 32px rgba(69,233,255,.12); }
.balance-supporting { width: min(390px, 86%); margin: 0 0 12px; color: #aab6cb; font-size: 12px; }
.balance-chart { width: min(100%, 560px); margin: 8px 0 15px; }
.balance-chart svg { display: block; width: 100%; height: 82px; overflow: visible; }
.balance-chart-fill { fill: url(#dashboardChartFill); }
.balance-chart-line { fill: none; stroke: var(--cyan); stroke-width: 2.3; filter: drop-shadow(0 0 6px rgba(69,233,255,.74)); }
.balance-chart-caption { color: var(--muted); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }

.primary-btn,
.secondary-btn { min-height: 44px; border: 1px solid transparent; border-radius: 14px; padding: 0 18px; font-weight: 700; transition: transform .2s ease, border-color .2s ease, filter .2s ease, background .2s ease; }
.primary-btn { color: #051019; background: linear-gradient(112deg, var(--lime), var(--cyan) 52%, #75adff); box-shadow: 0 13px 28px rgba(69,233,255,.14), inset 0 1px 0 rgba(255,255,255,.65); }
.secondary-btn { border-color: var(--line); color: var(--text); background: rgba(255,255,255,.05); }
.primary-btn:hover,
.secondary-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.primary-btn:active,
.secondary-btn:active { transform: translateY(0) scale(.985); }
.dashboard-topup,
.balance-card > .primary-btn { width: min(100%, 430px); display: flex; align-items: center; justify-content: space-between; }
.dashboard-topup b { font-size: 20px; }

.dashboard-stats { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 12px 0; }
.dashboard-stat { display: grid; grid-template-columns: 28px minmax(46px, auto) minmax(0, 1fr); align-items: center; gap: 10px; min-height: 62px; padding: 10px 13px; border-radius: 18px; transition: transform .22s ease, border-color .22s ease; }
.dashboard-stat:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.stat-icon { display: block; color: var(--violet); font-size: 20px; text-align: center; }
.dashboard-stat:nth-child(2) .stat-icon { color: var(--cyan); }
.dashboard-stat:nth-child(3) .stat-icon { color: var(--gold); }
.dashboard-stat strong { display: block; margin: 0; font: 800 19px var(--font-display); letter-spacing: -.04em; }
.dashboard-stat small { color: #a8b4cb; font-size: 10px; line-height: 1.3; }
.dashboard-stat small br { display: none; }

.dashboard-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.action-tile { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; align-content: center; min-height: 64px; border-radius: 18px; padding: 10px 12px; text-align: left; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.action-tile:hover { transform: translateY(-3px); border-color: var(--line-strong); background: rgba(28, 42, 68, .76); }
.action-tile span { grid-row: 1 / 3; align-self: center; color: var(--cyan); font-size: 20px; }
.action-tile:nth-child(2) span { color: var(--violet); }
.action-tile:nth-child(3) span { color: var(--lime); }
.action-tile:nth-child(4) span { color: var(--gold); }
.action-tile b { align-self: end; font-family: var(--font-display); font-size: 12px; font-weight: 750; }
.action-tile small { color: var(--muted); font-size: 10px; }

.section-gap { margin-top: 20px; }
.section-head { margin-bottom: 12px; }
.section-head h3,
.section-title { margin: 3px 0 0; font: 800 20px var(--font-display); letter-spacing: -.035em; }
.section-head--center { text-align: center; }
.count-badge,
.badge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border: 1px solid transparent; border-radius: 999px; padding: 6px 10px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.count-badge { color: #061016; background: var(--lime); box-shadow: 0 0 18px rgba(168,240,90,.18); }
.badge--active { border-color: rgba(91,240,162,.18); color: #bdf8d7; background: rgba(91,240,162,.1); }
.badge--inactive,
.badge--frozen { border-color: rgba(255,120,142,.2); color: #ffc1cc; background: rgba(255,120,142,.1); }

.dashboard-subscriptions,
.cards-stack,
.news-list { display: grid; gap: 12px; }
.dashboard-tariff-hero { position:relative; min-height:300px; overflow:hidden; display:flex; align-items:flex-end; width:100%; border:1px solid rgba(69,233,255,.24); border-radius:var(--radius-xl); padding:24px; color:inherit; text-align:left; background:#081321; box-shadow:var(--shadow-md); }
.dashboard-tariff-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.56; }
.dashboard-tariff-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,12,23,.95),rgba(5,12,23,.68) 46%,rgba(5,12,23,.2)); }
.dashboard-tariff-hero-copy { position:relative; z-index:1; display:grid; gap:7px; max-width:360px; }
.dashboard-tariff-hero-copy strong { font:800 clamp(27px,3vw,42px)/1.05 var(--font-display); letter-spacing:-.045em; }
.dashboard-tariff-hero-copy small { color:var(--muted); font-size:13px; }
.dashboard-tariff-hero-copy em { display:inline-flex; width:max-content; margin-top:11px; border-radius:12px; padding:11px 15px; color:#061019; background:linear-gradient(112deg,var(--lime),var(--cyan)); font-style:normal; font-weight:700; }
.screen[data-screen="home"] > .tariff-list { display: none; }
.dashboard-subscription,
.subscription-compact,
.empty-card,
.news-card,
.status-card { border-radius: var(--radius-lg); padding: 15px; }
.dashboard-subscription { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 13px; align-items: start; cursor: pointer; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.dashboard-subscription:hover { transform: translateY(-3px); border-color: rgba(69,233,255,.28); box-shadow: 0 16px 38px rgba(0,0,0,.24); }
.dashboard-sub-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(155,120,255,.2); border-radius: 15px; color: var(--violet); background: radial-gradient(circle, rgba(155,120,255,.2), rgba(155,120,255,.06)); font-size: 21px; }
.dashboard-sub-copy { min-width: 0; }
.dashboard-sub-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dashboard-sub-title h4 { margin: 0; font: 800 15px var(--font-display); }
.dashboard-sub-copy > p { margin: 4px 0 9px; color: var(--muted); font-size: 11px; }
.dashboard-progress { height: 6px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.075); }
.dashboard-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--cyan), var(--lime)); box-shadow: 0 0 10px rgba(69,233,255,.35); }
.dashboard-sub-meta { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-top: 10px; color: var(--muted); font-size: 9px; }
.dashboard-sub-meta span b { display: block; margin-top: 2px; color: #dbe4f4; font-size: 11px; }
.dashboard-sub-meta > strong { color: var(--cyan); font: 800 14px var(--font-display); text-align: right; }
.dashboard-sub-meta > strong small { display: block; color: var(--muted); font: 500 8px var(--font-body); }
.dashboard-empty { border-radius: var(--radius-lg); padding: 28px; color: var(--muted); text-align: center; }

.event-stream { display: grid; gap: 0; overflow: hidden; border-radius: var(--radius-lg); padding: 5px 16px; }
.event-item { display: grid; grid-template-columns: 34px 1fr auto; gap: 11px; align-items: center; min-height: 62px; border-bottom: 1px solid rgba(159,183,226,.09); }
.event-item:last-child { border-bottom: 0; }
.event-dot { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 11px; color: var(--cyan); background: rgba(69,233,255,.08); }
.event-item b { display: block; font-size: 12px; }
.event-item small { color: var(--muted); font-size: 10px; }
.event-time { color: var(--muted-2); font-size: 9px; }

.profile-card { max-width: 720px; margin: 0 auto 12px; }
.profile-head { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.profile-name { font: 800 20px var(--font-display); }
.profile-username { margin-top: 3px; color: var(--muted); font-size: 12px; }
.profile-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.info-box { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 13px; background: rgba(255,255,255,.025); }
.info-box span { display: block; color: var(--muted); font-size: 10px; }
.info-box strong { display: block; margin-top: 5px; overflow-wrap: anywhere; font: 800 17px var(--font-display); }
.info-box--highlight { background: linear-gradient(135deg, rgba(69,233,255,.075), rgba(155,120,255,.05)); }
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }

.profile-details { max-width: 720px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; overflow: hidden; margin: 0 auto 12px; border-radius: var(--radius-lg); padding: 1px; }
.profile-detail { min-height: 70px; padding: 15px; background: rgba(10,16,29,.55); }
.profile-detail span { display: block; color: var(--muted); font-size: 10px; }
.profile-detail strong { display: block; margin-top: 5px; font-size: 13px; }
.sync-ok { color: var(--emerald); }
.security-card { max-width: 720px; display: grid; grid-template-columns: 92px 1fr; gap: 18px; overflow: hidden; margin: 0 auto 12px; border-radius: var(--radius-xl); padding: 22px; }
.security-card::after { content: ""; position: absolute; width: 260px; height: 260px; right: -120px; top: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(91,240,162,.16), transparent 68%); pointer-events: none; }
.security-orbit { position: relative; width: 88px; height: 88px; display: grid; place-items: center; border: 1px solid rgba(69,233,255,.18); border-radius: 50%; background: radial-gradient(circle, rgba(69,233,255,.14), rgba(69,233,255,.02) 60%, transparent 62%); }
.security-orbit::before,
.security-orbit::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(155,120,255,.42); border-radius: 50%; transform: rotate(55deg) scaleY(.46); }
.security-orbit::after { border-color: rgba(91,240,162,.45); transform: rotate(-45deg) scaleY(.5); }
.security-orbit span { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #061016; background: var(--emerald); box-shadow: 0 0 22px rgba(91,240,162,.35); font-weight: 700; }
.security-copy { min-width: 0; }
.security-copy h3 { margin: 5px 0; font: 800 20px var(--font-display); }
.security-copy p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.security-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.security-grid > div { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: rgba(255,255,255,.025); }
.security-grid span { display: block; color: var(--muted); font-size: 9px; }
.security-grid strong { display: block; margin-top: 4px; font-size: 11px; }
.profile-settings { max-width: 720px; overflow: hidden; margin: 0 auto; border-radius: var(--radius-lg); padding: 4px 16px; }
.settings-row { width: 100%; min-height: 62px; display: flex; align-items: center; justify-content: space-between; border: 0; border-bottom: 1px solid rgba(159,183,226,.1); padding: 10px 2px; background: transparent; text-align: left; }
.settings-row:last-child { border-bottom: 0; }
.settings-row span b,
.settings-row span small { display: block; }
.settings-row span b { font-size: 12px; }
.settings-row span small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.settings-row i { color: var(--muted); font-style: normal; }
.settings-row--danger b { color: #ffc0cb; }

.subscription-compact { overflow: hidden; border-color: rgba(69,233,255,.2); background: linear-gradient(145deg, rgba(14,45,62,.7), rgba(9,20,34,.82)); transition: transform .22s ease, border-color .22s ease; }
.subscription-compact:hover { transform: translateY(-3px); border-color: rgba(69,233,255,.36); }
.subscription-compact--frozen { border-color: rgba(255,120,142,.2); background: linear-gradient(145deg, rgba(55,29,48,.68), rgba(22,17,31,.82)); }
.subscription-top h4 { margin: 4px 0 2px; font: 800 17px var(--font-display); }
.subscription-top p { margin: 0; color: var(--muted); font-size: 11px; }
.subscription-meta { color: var(--muted); font-size: 10px; }
.meta-chip { display: inline-block; margin: 10px 5px 0 0; border: 1px solid rgba(159,183,226,.1); border-radius: 999px; padding: 7px 9px; color: #cbd6e9; background: rgba(255,255,255,.045); font-size: 10px; }
.subscription-open-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.subscription-open-hint { color: var(--muted); font-size: 10px; }
.subscription-open-btn { min-height: 36px; padding: 0 13px; font-size: 11px; }

.balance-card { margin-bottom: 12px; }
.balance-card > .primary-btn { margin-top: 13px; }
.quick-amounts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.quick-amounts button { min-height: 34px; border: 1px solid rgba(69,233,255,.16); border-radius: 999px; padding: 0 12px; color: #bdeff6; background: rgba(69,233,255,.055); font-size: 10px; }
.quick-amounts button:hover { border-color: rgba(69,233,255,.4); background: rgba(69,233,255,.1); }
.last-operation,
.status-card { margin-bottom: 12px; border-radius: var(--radius-lg); padding: 17px; }
.status-card--active { border-color: rgba(91,240,162,.58); background: radial-gradient(circle at 20% 45%, rgba(91,240,162,.14), transparent 52%), linear-gradient(145deg, rgba(17,51,44,.88), rgba(8,24,27,.9)); box-shadow: 0 0 34px rgba(91,240,162,.18), inset 0 0 26px rgba(91,240,162,.09), inset 0 1px 0 rgba(205,255,228,.12); }
.status-card--active .status-title,
.status-card--active .status-text { color: #caffdf; }
.status-card--idle { box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.last-operation { transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.last-operation--confirmed { border-color: rgba(91,240,162,.42); background: linear-gradient(145deg, rgba(18,48,42,.66), rgba(9,22,28,.7)); box-shadow: inset 0 0 20px rgba(91,240,162,.055); }
.last-operation--confirmed strong { color: #9ff6c7; }
.last-operation--rejected { border-color: rgba(255,120,142,.5); background: linear-gradient(145deg, rgba(65,25,37,.68), rgba(27,12,22,.72)); box-shadow: 0 0 26px rgba(255,65,96,.08), inset 0 0 20px rgba(255,120,142,.065); }
.last-operation--rejected .eyebrow,
.last-operation--rejected strong { color: #ff9cad; }
.last-operation > div { display: flex; justify-content: space-between; gap: 12px; margin-top: 9px; }
.last-operation strong,
.last-operation small { display: block; }
.last-operation strong { font-size: 13px; }
.last-operation small { color: var(--muted); font-size: 10px; text-align: right; }
.status-title { font: 800 17px var(--font-display); }
.status-text { margin-bottom: 0; color: var(--muted); font-size: 12px; }
.payment-history-list { display: grid; gap: 8px; margin-top: 12px; text-align: left; }
.payment-history-item { border: 1px solid var(--line); border-radius: 14px; padding: 11px 12px; background: rgba(255,255,255,.025); }
.payment-history-item--confirmed { border-color: rgba(91,240,162,.18); }
.payment-history-item--rejected,
.payment-history-item--declined,
.payment-history-item--cancelled { border-color: rgba(255,120,142,.38); background: linear-gradient(145deg, rgba(56,22,33,.38), rgba(255,120,142,.025)); }
.payment-history-amount { font-weight: 700; }
.payment-history-status { color: var(--cyan); font-size: 10px; }
.payment-history-item--confirmed .payment-history-status { color: var(--emerald); }
.payment-history-item--rejected .payment-history-status,
.payment-history-item--declined .payment-history-status,
.payment-history-item--cancelled .payment-history-status { color: #ff92a5; }
.payment-history-date { margin-top: 3px; color: var(--muted); font-size: 9px; }
.payment-history-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.payment-history-page-btn { min-width: 31px; min-height: 31px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.035); }
.payment-history-page-btn.is-active { color: #051019; border-color: transparent; background: var(--cyan); }
.payment-history-ellipsis { align-self: center; color: var(--muted); }

.screen[data-screen="news"] { width: min(100%, 980px); margin-inline: auto; }
.screen-header--news { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.news-pagination { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px; max-width:52%; }
.news-page-pill { display:grid; place-items:center; width:24px; height:24px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:rgba(255,255,255,.04); font-size:10px; }
.news-page-pill.is-latest { color:#071015; border-color:transparent; background:var(--lime); font-weight:700; }
.news-headline { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 13px; overflow: hidden; margin-bottom: 10px; border-radius: var(--radius-lg); padding: 15px; }
.news-headline::after { content: ""; position: absolute; width: 180px; height: 180px; right: -90px; top: -90px; border-radius: 50%; background: radial-gradient(circle, rgba(155,120,255,.16), transparent 68%); }
.news-headline > * { position: relative; z-index: 1; }
.news-headline-mark { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; color: #061016; background: linear-gradient(145deg, var(--lime), var(--cyan)); box-shadow: 0 0 23px rgba(69,233,255,.18); font-size: 20px; }
.news-headline strong { display: block; margin: 4px 0; font: 800 15px var(--font-display); }
.news-headline-subtitle { display: block; color: var(--muted); font-size: 10px; }
.badge--new { color: #061016; background: var(--cyan); }
.badge--pinned { color: #0d1005; background: var(--lime); }
.badge--unread { border-color: rgba(69,233,255,.16); color: var(--cyan); background: rgba(69,233,255,.08); }
.news-card { position: relative; overflow: hidden; border: 1px solid var(--line); padding: 0; background: linear-gradient(145deg, rgba(20,30,49,.72), rgba(9,15,27,.82)); box-shadow: var(--shadow-md); transition: transform .22s ease, border-color .22s ease; }
.news-card-rank { position:absolute; z-index:3; top:12px; right:13px; display:grid; place-items:center; min-width:28px; height:28px; padding:0 7px; border:1px solid rgba(69,233,255,.24); border-radius:10px; color:var(--cyan); background:rgba(5,12,23,.78); font:700 12px var(--font-display); box-shadow:0 8px 20px rgba(0,0,0,.2); }
.news-card--featured .news-card-rank { color:#061019; border-color:transparent; background:linear-gradient(135deg,var(--lime),var(--cyan)); }
.news-card:hover { transform: translateY(-3px); border-color: rgba(69,233,255,.28); }
.news-card--unread::after { content: ""; position: absolute; width: 7px; height: 7px; right: 13px; top: 13px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.news-card-main { width: 100%; display: block; border: 0; padding: 15px; color: inherit; background: transparent; text-align: left; }
.news-card-main.has-media { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 14px; }
.news-card.can-delete .news-card-main { padding-right: 92px; }
.news-card--featured .news-card-main.has-media { grid-template-columns: minmax(0,1fr); }
.news-card-media { width: 112px; height: 100%; min-height: 112px; border-radius: 15px; object-fit: cover; background: linear-gradient(145deg, rgba(69,233,255,.1), rgba(155,120,255,.1)); }
.news-card--featured .news-card-media { width: 100%; height: 180px; }
.news-card-body { align-self: center; min-width: 0; }
.news-date { display:flex; align-items:center; justify-content:center; gap:4px; color: var(--muted); font-size: 12px; line-height: 1.4; letter-spacing: .02em; padding-right:42px; text-align:center; }
.news-kind { color:var(--cyan); font-weight:600; }
.news-card h3 { margin: 9px 0; overflow-wrap: anywhere; font: 800 clamp(19px, 2.2vw, 25px)/1.16 var(--font-display); letter-spacing: -.03em; }
.news-excerpt { max-width: 70ch; color: #bdc9dc; font: 500 15px/1.55 var(--font-body); overflow-wrap: anywhere; white-space: normal; }
.news-card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.news-delete-btn { position: absolute; z-index: 2; right: 12px; bottom: 12px; min-height: 36px; border: 1px solid rgba(255,120,142,.3); border-radius: 10px; padding: 0 11px; color: #ffb5c1; background: rgba(9,15,27,.9); font-size: 10px; }

.bottom-nav { position: fixed; z-index: 25; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); width: min(calc(100% - 24px), 670px); display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; transform: translateX(-50%); border-radius: 24px; padding: 7px; box-shadow: 0 22px 70px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.05); }
.nav-btn { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 59px; border: 0; border-radius: 18px; color: var(--muted); background: transparent; font-size: 9px; transition: color .2s ease, background .25s ease, transform .2s ease; }
.nav-btn:hover { color: #dce7f8; }
.nav-btn.active { color: #061019; background: linear-gradient(120deg, var(--lime), var(--cyan) 58%, #7ca9ff); box-shadow: 0 8px 25px rgba(69,233,255,.18), inset 0 1px 0 rgba(255,255,255,.68); transform: translateY(-1px); }
.nav-icon { width: 22px; height: 22px; }
.nav-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.account-exit-fab { display: none; }

.modal-backdrop { position: fixed; z-index: 40; inset: 0; background: rgba(2,4,10,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: fade-in .2s ease; }
@keyframes fade-in { from { opacity: 0; } }
.sheet { position: fixed; z-index: 41; left: 50%; top: 50%; width: min(600px, calc(100% - 24px)); max-height: min(92dvh, 860px); overflow-y: auto; overscroll-behavior: contain; transform: translate(-50%, -50%); border: 1px solid rgba(159,183,226,.22); border-radius: 28px; padding: 19px; background: linear-gradient(145deg, rgba(20,29,49,.98), rgba(6,10,19,.985)); box-shadow: 0 36px 110px rgba(0,0,0,.68), inset 0 1px 0 rgba(255,255,255,.045); animation: sheet-in .28s cubic-bezier(.2,.8,.2,1); }
@keyframes sheet-in { from { opacity: 0; transform: translate(-50%, -46%) scale(.97); } }
.sheet--catalog { width: min(1040px, calc(100% - 24px)); }
.sheet-handle { width: 42px; height: 4px; margin: 0 auto 15px; border-radius: 999px; background: rgba(255,255,255,.25); }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.sheet-head h3 { margin: 5px 0; font: 800 24px var(--font-display); letter-spacing: -.04em; }
.catalog-subtitle,
.sheet-description { color: var(--muted); font-size: 12px; line-height: 1.5; }
.icon-btn { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.045); }
.icon-btn--sm { width: 36px; height: 36px; }
.sheet-content { margin-top: 16px; }
.sheet-actions { display: flex; gap: 8px; margin-top: 18px; }
.sheet-actions > * { flex: 1; }

.catalog-list { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
.catalog-group { position:relative; overflow:hidden; border:1px solid rgba(69,233,255,.22); border-radius:22px; padding:14px; color:inherit; background:linear-gradient(155deg,rgba(18,31,51,.96),rgba(7,12,22,.98)); text-align:left; }
.catalog-group--breaker { display:grid; grid-template-columns:180px minmax(0,1fr); align-items:center; gap:18px; border-color:rgba(168,240,90,.35); }
.catalog-group--breaker img { width:180px; height:180px; border-radius:16px; object-fit:cover; }
.catalog-group--breaker strong { display:block; margin:7px 0; font:800 24px/1.1 var(--font-display); }
.catalog-group--breaker small,.catalog-group--breaker em { display:block; color:var(--muted); font-size:12px; line-height:1.45; }
.catalog-group--breaker em { margin-top:12px; color:#dce6f7; font-style:normal; font-weight:700; }
.catalog-group-head h4 { margin:4px 0; font:800 20px var(--font-display); }
.catalog-group-head p { margin:0; color:var(--muted); font-size:11px; }
.catalog-inner-list { display:grid; grid-template-columns:1fr; gap:10px; margin-top:12px; }
.catalog-option { display:grid; grid-template-columns:62px minmax(0,1fr) auto; align-items:center; gap:10px; min-width:0; border:1px solid rgba(69,233,255,.18); border-radius:16px; padding:8px; color:inherit; background:rgba(255,255,255,.035); text-align:left; }
.catalog-option img { width:62px; height:62px; border-radius:12px; object-fit:cover; }
.catalog-option strong,.catalog-option small { display:block; overflow-wrap:anywhere; }
.catalog-option strong { margin-top:3px; font:800 14px var(--font-display); }
.catalog-option small { margin-top:4px; color:var(--muted); font-size:10px; }
.catalog-option > b { color:var(--cyan); }
.funds-sheet { max-width:420px; text-align:left; }
.funds-sheet-art { height:150px; display:grid; place-items:center; overflow:hidden; margin:-19px -19px 16px; background:linear-gradient(135deg,rgba(69,233,255,.18),rgba(155,120,255,.2)),url("/app/assets/aurora-data-core.15a9c300ed24.webp") center/cover; }
.funds-sheet-art span { display:grid; place-items:center; width:72px; height:72px; border:1px solid rgba(255,255,255,.5); border-radius:24px; color:#061019; background:linear-gradient(135deg,var(--lime),var(--cyan)); font:800 34px var(--font-display); }
.funds-sheet-text { color:var(--muted); line-height:1.55; }
.catalog-card { position: relative; min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(69,233,255,.22); border-radius: 22px; padding: 9px; color: inherit; background: linear-gradient(160deg, rgba(18,31,51,.96), rgba(7,12,22,.98)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); text-align: left; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.catalog-card:hover,
.catalog-card.is-selected { transform: translateY(-3px); border-color: rgba(69,233,255,.55); box-shadow: 0 16px 38px rgba(0,0,0,.3), 0 0 0 2px rgba(69,233,255,.08); }
.catalog-card--multi { border-color: rgba(155,120,255,.3); }
.catalog-card--breaker { border-color: rgba(168,240,90,.3); }
.catalog-card-visual { position: relative; aspect-ratio: 1.18 / 1; overflow: hidden; border-radius: 17px; background: #050b14; }
.catalog-card-visual::after { content: ""; position: absolute; inset: 52% 0 0; background: linear-gradient(180deg, transparent, rgba(7,12,22,.94)); pointer-events: none; }
.catalog-card-image { width: 100%; height: 100%; object-fit: cover; }
.catalog-card-copy { position: relative; z-index: 1; flex: 1; padding: 10px 5px 5px; }
.catalog-card-icon { display: none; }
.catalog-badge { display: inline-block; margin-bottom: 9px; border-radius: 999px; padding: 5px 8px; color: var(--cyan); background: rgba(69,233,255,.08); font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.catalog-card--multi .catalog-badge { color: #c8b9ff; background: rgba(155,120,255,.1); }
.catalog-card--breaker .catalog-badge { color: #cffa9c; background: rgba(168,240,90,.09); }
.catalog-card h4 { margin: 0 0 5px; overflow-wrap: anywhere; font: 800 18px/1.2 var(--font-display); letter-spacing: -.035em; }
.catalog-card p { min-height: 0; display: -webkit-box; margin: 0; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.catalog-card-price { display: block; margin-top: 9px; color: #dce6f7; font-size: 11px; line-height: 1.35; }
.catalog-card-action { display: flex; align-items: center; justify-content: space-between; min-height: 40px; margin-top: 8px; border-radius: 13px; padding: 0 12px; color: #061019; background: linear-gradient(112deg, var(--lime), var(--cyan) 56%, #75adff); font-size: 11px; font-weight: 700; }

.tariff-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.tariff-card { position: relative; min-height: 330px; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; padding: 18px; background: var(--surface-strong); }
.tariff-sparkles,
.tariff-emblem,
.tariff-stamp { position: relative; z-index: 1; }
.tariff-top,
.tariff-card-footer { position: relative; z-index: 1; }
.tariff-top { display: flex; justify-content: space-between; gap: 10px; }
.tariff-name { font: 800 19px var(--font-display); }
.tariff-subtitle { margin-top: 6px; color: var(--muted); font-size: 11px; }
.tariff-card-footer { margin-top: 18px; }
.tariff-price-preview { min-height: 36px; color: #dce6f7; font-size: 11px; }
.tariff-focus { display: none; }

.tariff-sheet-options,
.tariff-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tariff-sheet-group { width: 100%; margin-top: 15px; }
.tariff-chip { min-height: 40px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 11px; color: #cfdaec; background: rgba(255,255,255,.035); font-size: 11px; }
.tariff-chip.is-active { border-color: transparent; color: #061019; background: linear-gradient(120deg, var(--lime), var(--cyan)); box-shadow: 0 0 22px rgba(69,233,255,.15); }
.tariff-bonus-row { display: flex; flex-wrap: wrap; gap: 7px; }
.tariff-bonus-chip { border: 1px solid var(--line); border-radius: 999px; padding: 7px 10px; color: #cbd7e9; background: rgba(255,255,255,.035); font-size: 10px; }
.tariff-inline-link { border: 0; color: var(--cyan); background: transparent; font-size: 10px; text-decoration: underline; }
.breaker-help-block,
.breaker-help-note { border: 1px solid var(--line); border-radius: 16px; padding: 14px; color: #c8d3e4; background: rgba(255,255,255,.03); font-size: 12px; line-height: 1.55; }
.breaker-help-note { margin-top: 9px; border-color: rgba(69,233,255,.16); }

.subscription-sheet-status-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.subscription-sheet-date { color: var(--muted); font-size: 10px; }
.subscription-sheet-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 13px; }
.info-box--action { color: inherit; text-align: left; }
.info-box--action.is-actionable { cursor: pointer; }
.info-box--action.is-active { border-color: rgba(69,233,255,.32); background: rgba(69,233,255,.07); }
.subscription-traffic-details { display: grid; gap: 6px; margin-top: 10px; border: 1px solid var(--line); border-radius: 15px; padding: 10px; background: rgba(255,255,255,.025); }
.subscription-traffic-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 6px; font-size: 10px; }
.subscription-traffic-names { display: grid; gap: 3px; color: var(--muted); }
.subscription-traffic-name i { color: var(--cyan); font-style: normal; }
.subscription-traffic-note { margin: 4px 6px; color: var(--muted); font-size: 9px; }
.subscription-sheet-extra { display: grid; gap: 8px; margin-top: 12px; }
.subscription-sheet-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(159,183,226,.08); padding: 10px 2px; }
.subscription-sheet-line > span { color: var(--muted); font-size: 10px; }
.subscription-sheet-line > strong { font-size: 11px; text-align: right; }
.subscription-sheet-line--stack { display: block; }
.subscription-sheet-key-row { display: grid; gap: 8px; margin-top: 8px; }
.subscription-sheet-key { max-height: 88px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; padding: 10px; color: #bdeff6; background: rgba(3,7,14,.56); font: 9px/1.45 monospace; overflow-wrap: anywhere; }
.subscription-sheet-key-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.subscription-help-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; }
.subscription-help-col { border: 1px solid var(--line); border-radius: 14px; padding: 11px; background: rgba(255,255,255,.025); }
.subscription-help-col-title { margin-bottom: 7px; color: var(--cyan); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.subscription-help-text { color: var(--muted); font-size: 10px; line-height: 1.55; }

.news-sheet-media { display: grid; gap: 8px; }
.news-sheet-media img { display: block; width: 100%; max-height: 420px; border-radius: 17px; object-fit: cover; }
.news-article { max-width: 68ch; color: #cbd6e8; font: 500 16px/1.72 var(--font-body); overflow-wrap: anywhere; }
.news-article p { margin: 0 0 1.05em; }
.news-article strong { color:#f4f8ff; font-weight:700; }
.news-article em { color:#d9cfff; }
.news-article blockquote { margin:1.1em 0; border-left:3px solid var(--cyan); border-radius:0 12px 12px 0; padding:10px 14px; color:#dce8fa; background:rgba(69,233,255,.07); }
.news-article ul { margin:0 0 1em; padding-left:1.35em; }
.news-article li { margin:.35em 0; }
.news-article code { border:1px solid var(--line); border-radius:6px; padding:2px 5px; color:#d5faff; background:rgba(69,233,255,.08); font-size:.9em; }
.news-article a { color:var(--cyan); text-decoration:underline; text-underline-offset:3px; }

.sync-overlay { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; overflow-y: auto; overscroll-behavior: contain; padding: max(16px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom)); background: rgba(2,4,10,.86); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.sync-modal { width: min(100%, 500px); max-height: calc(var(--cx-viewport-height, 100dvh) - 28px); overflow-y: auto; border-radius: 28px; padding: 23px; }
.sync-modal h3 { margin: 7px 0; font: 800 24px var(--font-display); letter-spacing: -.04em; }
.sync-text { color: var(--muted); font-size: 11px; line-height: 1.55; }
.sync-label { display: block; margin: 13px 0 6px; color: #cdd8e9; font-size: 10px; font-weight: 700; }
.sync-input { width: 100%; min-height: 46px; border: 1px solid var(--line); border-radius: 13px; padding: 0 13px; color: var(--text); background: rgba(3,7,14,.62); }
.sync-input:focus { border-color: rgba(69,233,255,.55); box-shadow: 0 0 0 4px rgba(69,233,255,.07); }
.sync-remember { display: flex; align-items: center; gap: 8px; margin: 12px 0; color: #c6d2e4; font-size: 11px; }
.sync-remember input { accent-color: var(--cyan); }
.sync-accordion-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-top: 7px; border: 1px solid var(--line); border-radius: 13px; padding: 0 13px; background: rgba(255,255,255,.03); text-align: left; font-size: 11px; font-weight: 700; }
.sync-accordion-panel { padding: 0 2px; }
.sync-error { min-height: 18px; margin-top: 8px; color: #ffafbd; font-size: 10px; }
.sync-actions { display: grid; gap: 8px; margin-top: 10px; }
.sync-submit { width: 100%; }
.confirm-modal { width: min(100%, 430px); text-align: center; }
.confirm-modal .eyebrow { color: var(--danger); }
.confirm-modal .sync-text { margin-inline: auto; max-width: 36ch; }
.confirm-actions { grid-template-columns: 1fr 1fr; margin-top: 18px; }
.danger-btn { min-height: 44px; border: 1px solid rgba(255,120,142,.42); border-radius: 14px; color: #fff; background: linear-gradient(135deg, #d94d68, #ff788e); font-weight: 700; box-shadow: 0 12px 28px rgba(217,77,104,.2); }
.toast { position: fixed; z-index: 80; left: 50%; bottom: calc(var(--nav-height) + 30px + env(safe-area-inset-bottom)); max-width: min(420px, calc(100% - 30px)); transform: translate(-50%, 18px); border: 1px solid rgba(69,233,255,.24); border-radius: 14px; padding: 11px 15px; opacity: 0; pointer-events: none; color: #eaf9fc; background: rgba(8,16,29,.94); box-shadow: var(--shadow-lg); font-size: 11px; text-align: center; transition: opacity .2s ease, transform .2s ease; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.toast--center { top: 50%; bottom: auto; transform: translate(-50%, -45%); }
.toast--center.visible { transform: translate(-50%, -50%); }

/* Premium Cyrillic typography with a stable system fallback. */
.brand-tree,
.brand-wordmark,
.profile-avatar,
.welcome-label,
.eyebrow,
.brand-kicker,
.welcome-row h1,
.screen-header h2,
.screen-title,
.dashboard-balance-value,
.balance-value,
.dashboard-stat strong,
.section-head h3,
.section-title,
.dashboard-sub-title h4,
.dashboard-sub-meta > strong,
.profile-name,
.info-box strong,
.security-copy h3,
.subscription-top h4,
.status-title,
.news-headline strong,
.news-card h3,
.sheet-head h3,
.catalog-card h4,
.tariff-name,
.sync-modal h3 {
  font-family: var(--font-display);
}

h1, h2, h3, h4, strong, b { font-family: var(--font-display); }
.news-card h3,
.news-headline strong,
.news-sheet h3,
.news-article h1,
.news-article h2,
.news-article h3 { font-weight: 800; letter-spacing: -.035em; text-shadow: 0 3px 20px rgba(0,0,0,.32); }
.news-excerpt,
.news-article { color: #c0cade; font-family: var(--font-body); font-weight: 500; }
.news-date { font-family: var(--font-body); font-weight: 650; letter-spacing: .015em; }
.catalog-group-open { display: inline-flex; align-items: center; width: max-content; margin-top: 12px; color: var(--cyan); font-family: var(--font-display); font-size: 11px; font-style: normal; font-weight: 800; }

@media (min-width: 780px) {
  .screen[data-screen="home"].active { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 12px; align-content: start; }
  .screen[data-screen="home"] > .dashboard-topbar,
  .screen[data-screen="home"] > .welcome-row,
  .screen[data-screen="home"] > .section-head,
  .screen[data-screen="home"] > .dashboard-subscriptions,
  .screen[data-screen="home"] > .event-stream { grid-column: 1 / -1; }
  .screen[data-screen="home"] > .dashboard-tariff-hero { grid-column: span 8; grid-row: span 2; }
  .screen[data-screen="home"] > .dashboard-stats,
  .screen[data-screen="home"] > .dashboard-actions { grid-column: span 4; margin: 0; }
  .screen[data-screen="home"] > .section-head { margin-top: 14px; margin-bottom: 0; }
  .dashboard-subscriptions { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cards-stack { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 900px; margin: 0 auto; }
  .screen[data-screen="balance"].active { display: grid; grid-template-columns: 1.15fr .85fr; gap: 12px; align-content: start; }
  .screen[data-screen="balance"] > .screen-header { grid-column: 1 / -1; }
  .screen[data-screen="balance"] > .balance-card { grid-row: span 3; margin: 0; }
  .news-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .news-card--featured { grid-column: 1 / -1; }
  .news-card--featured .news-card-main { grid-template-columns: 42% minmax(0,1fr); }
  .news-card--featured .news-card-media { height: 240px; }
}

@media (max-width: 779px) {
  .app-shell { padding: max(14px, env(safe-area-inset-top)) 12px calc(var(--nav-height) + 26px + env(safe-area-inset-bottom)); }
  .dashboard-topbar { margin-bottom: 13px; }
  .screen-header { margin-bottom: 12px; }
  .screen-header h2,
  .screen-title { font-size: clamp(27px, 8vw, 34px); }
  .system-pill span { display: none; }
  .system-pill { padding: 9px; }
  .dashboard-balance::before,
  .balance-card::before { background: linear-gradient(90deg, rgba(7,12,23,.98), rgba(7,12,23,.78) 70%, rgba(7,12,23,.4)), url("/app/assets/aurora-data-core.15a9c300ed24.webp") 66% 50% / cover no-repeat; opacity: .52; }
  .dashboard-stats { grid-template-columns: 1fr; }
  .dashboard-stat { min-height: 58px; padding: 9px 12px; }
  .dashboard-stat strong { font-size: 18px; }
  .dashboard-actions { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .action-tile { min-height: 62px; padding: 9px 11px; }
  .last-operation > div { display: block; }
  .last-operation small { margin-top: 3px; text-align: left; }
  .dashboard-balance,
  .balance-card,
  .profile-card { padding: 18px; }
  .dashboard-balance-value,
  .balance-value { font-size: clamp(38px, 12vw, 52px); }
  .balance-chart svg { height: 68px; }
  .section-gap { margin-top: 17px; }
  .news-list { gap: 9px; }
  .news-headline { padding: 13px; }
  .catalog-list { grid-template-columns: 1fr; gap: 10px; margin-top: 11px; }
  .catalog-card { border-radius: 17px; padding: 6px; }
  .catalog-card-visual { border-radius: 13px; }
  .catalog-card-copy { padding: 7px 2px 2px; }
  .catalog-badge { margin-bottom: 6px; padding: 4px 6px; font-size: 8px; }
  .catalog-card h4 { font-size: 13px; }
  .catalog-card p { font-size: 9px; line-height: 1.35; }
  .catalog-card-price { margin-top: 6px; font-size: 9px; }
  .catalog-card-action { min-height: 36px; margin-top: 6px; padding: 0 8px; font-size: 9px; }
  .sheet--catalog { top: max(8px, env(safe-area-inset-top)); bottom: auto; width: calc(100% - 16px); max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom))); padding: 13px; transform: translateX(-50%); }
  .sheet--catalog.hidden { display: none !important; }
  .subscription-help-grid { grid-template-columns: 1fr; }
  .dashboard-tariff-hero { min-height:240px; padding:19px; }
  .catalog-group--breaker { grid-template-columns:1fr; gap:10px; }
  .catalog-group--breaker img { width:100%; height:150px; }
  .catalog-group--breaker strong { font-size:21px; }
  .catalog-inner-list { grid-template-columns:1fr; }
  .news-card-rank { top:10px; right:10px; min-width:26px; height:26px; }
  .news-date { font-size:11px; }
  .news-card h3 { font-size:20px; }
  .news-excerpt { font-size:14px; }
  .news-article { font-size:15px; line-height:1.65; }
  .profile-card, .balance-card { padding:16px; }
  .info-box { padding:11px; }
}

@media (max-width: 420px) {
  .brand-wordmark { font-size: 13px; letter-spacing: .23em; }
  .dashboard-stats { gap: 7px; }
  .dashboard-stat small { font-size: 9px; }
  .app-bg { background-position: 43% center; background-size: auto 100%; }
  .dashboard-subscription { grid-template-columns: 40px minmax(0,1fr); padding: 14px; }
  .dashboard-sub-icon { width: 40px; height: 40px; }
  .dashboard-sub-meta { grid-template-columns: 1fr 1fr; }
  .dashboard-sub-meta > strong { grid-column: 1 / -1; text-align: left; }
  .profile-summary-grid { grid-template-columns: repeat(2, 1fr); }
  .profile-summary-grid .info-box:last-child { grid-column: 1 / -1; }
  .profile-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .security-card { grid-template-columns: 72px 1fr; padding: 17px; }
  .security-orbit { width: 68px; height: 68px; }
  .security-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .subscription-sheet-grid { grid-template-columns: 1fr 1fr; }
  .sheet-actions { flex-direction: column; }
  .news-card-main.has-media { grid-template-columns: 88px minmax(0,1fr); gap: 11px; }
  .news-card-media { width: 92px; min-height: 104px; }
  .news-card.can-delete .news-card-main { padding-right: 78px; }
  .news-card h3 { font-size: 15px; }
  .news-excerpt { font-size: 12px; line-height: 1.5; }
  .news-delete-btn { right: 9px; bottom: 9px; min-height: 34px; padding-inline: 9px; }
  .news-headline { grid-template-columns: 42px 1fr; }
  .news-headline .badge { display: none; }
  .catalog-subtitle { display: none; }
  .sheet--catalog .sheet-head h3 { font-size: 21px; }
  .confirm-actions { grid-template-columns: 1fr; }
}

@media (max-width: 350px) {
  .app-shell { padding-inline: 9px; }
  .catalog-list { gap: 8px; }
  .catalog-card h4 { font-size: 12px; }
  .catalog-card p { font-size: 8.5px; }
  .catalog-card-action span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Premium lightened canvas and movable scroll controls */
body { color: #edf5ff; }
.app-bg { background-color: #10345d; background-image: linear-gradient(120deg, rgba(10,82,132,.72), rgba(40,32,104,.68)), url("/app/assets/connectix-network-bg.f99f17056fcc.svg"); background-size: cover, 1600px 1200px; opacity: 1; }
.app-bg::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 18% 15%, rgba(51,214,255,.16), transparent 35%), radial-gradient(circle at 82% 30%, rgba(143,103,255,.16), transparent 38%); pointer-events:none; }
.toast-backdrop { position:fixed; inset:0; z-index:79; background:rgba(3,10,24,.44); backdrop-filter:blur(10px); opacity:0; pointer-events:none; transition:opacity .25s ease; }
.toast-backdrop.visible { opacity:1; pointer-events:auto; }
.toast { display:flex; flex-direction:column; gap:6px; min-width:min(420px, calc(100vw - 28px)); text-align:center; font-family:var(--font-display); font-weight:700; letter-spacing:.01em; border:1px solid rgba(76,220,255,.38); box-shadow:0 16px 50px rgba(0,0,0,.38), 0 0 28px rgba(62,216,255,.18); }
.toast strong { font-size:18px; }
.toast span { font-size:15px; color:#c8d8ee; }
.toast--success { border-color:rgba(143,245,75,.65); background:linear-gradient(135deg,#1b3c3d,#162c43); }
.toast--error { border-color:rgba(255,92,116,.7); background:linear-gradient(135deg,#401c31,#211c35); }
.toast--modal { top:50%; bottom:auto; transform:translate(-50%,-50%) scale(.96); }
.toast--modal.visible { transform:translate(-50%,-50%) scale(1); }
.scroll-fab { position:fixed; right:18px; bottom:92px; z-index:70; display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px; border:1px solid rgba(111,221,255,.35); border-radius:18px; background:rgba(10,28,52,.82); backdrop-filter:blur(14px); box-shadow:0 8px 28px rgba(0,0,0,.35),0 0 18px rgba(67,215,255,.16); user-select:none; contain:layout paint; will-change:left,top; }
.scroll-fab.is-dragging { cursor:grabbing; box-shadow:0 12px 34px rgba(0,0,0,.5),0 0 24px rgba(67,215,255,.3); }
.scroll-fab-btn { width:34px; height:31px; border:0; border-radius:11px; color:#ecf8ff; background:rgba(45,92,135,.42); font:700 20px/1 var(--font-display); cursor:pointer; }
.scroll-fab-btn:hover,.scroll-fab-btn:focus-visible { background:linear-gradient(135deg,#9cf35b,#43dfff); color:#071425; outline:none; }
.scroll-fab-grip { color:#86a5c9; font-size:15px; line-height:12px; cursor:grab; touch-action:none; }
.subscription-help-tabs { display:flex; gap:8px; margin:10px 0 8px; }
.subscription-help-tab { flex:1; min-height:40px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.035); color:var(--muted); font:700 13px var(--font-display); cursor:pointer; transition:.2s ease; }
.subscription-help-tab.is-active { color:#071425; border-color:transparent; background:linear-gradient(135deg,#a7f35a,#47dfff); box-shadow:0 0 18px rgba(68,221,255,.2); }
.subscription-help-col[hidden] { display:none !important; }
.screen-header h2,.sheet-head h3,.section-title { text-shadow:0 2px 16px rgba(90,210,255,.14); }
.news-card h3,.catalog-card h4,.catalog-group strong { letter-spacing:-.025em; text-shadow:0 1px 10px rgba(165,210,255,.1); }
.news-excerpt,.news-article,.sheet-content p { color:#c2d0e5; }
.catalog-group--breaker,.catalog-group--standard { box-shadow:0 20px 55px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04); }
.catalog-group--breaker { border-color:rgba(126,236,255,.58); background:linear-gradient(120deg,rgba(18,55,83,.92),rgba(12,25,52,.94)); }
.catalog-group--breaker strong { font-size:clamp(25px,3vw,38px); letter-spacing:-.04em; }
.catalog-group--breaker small { display:block; max-width:48ch; color:#d5e5f7; font-size:15px; line-height:1.5; }
.catalog-group--standard { border-color:rgba(78,216,255,.42); background:linear-gradient(135deg,rgba(19,39,66,.92),rgba(17,24,55,.94)); }
.catalog-group-head h4 { font-size:clamp(24px,3vw,34px); letter-spacing:-.035em; }
.catalog-inner-list .catalog-option { min-height:136px; border-radius:20px; box-shadow:0 10px 28px rgba(0,0,0,.2); }
.subscription-sheet { box-shadow:0 28px 90px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.06); }
.subscription-sheet .sheet-head h3 { font-size:clamp(28px,4vw,42px); letter-spacing:-.045em; }
.subscription-sheet-status-row .badge { box-shadow:0 0 22px rgba(93,241,160,.24); }
.subscription-sheet-grid .info-box { min-height:92px; display:flex; flex-direction:column; justify-content:center; }
@media (max-width:600px) { .scroll-fab { right:10px; bottom:82px; } .toast--modal { width:calc(100vw - 26px); } }

/* Variant 2: editorial neon tariff surfaces. */
.sheet--catalog,
.tariff-purchase-sheet,
.subscription-sheet {
  border-color: rgba(91, 204, 255, .28);
  background:
    radial-gradient(circle at 92% 8%, rgba(72, 185, 255, .13), transparent 34%),
    radial-gradient(circle at 8% 92%, rgba(156, 112, 255, .12), transparent 36%),
    linear-gradient(145deg, rgba(11, 25, 50, .985), rgba(4, 9, 20, .99));
  box-shadow: 0 38px 120px rgba(0, 0, 0, .72), 0 0 70px rgba(49, 190, 255, .08), inset 0 1px 0 rgba(255,255,255,.08);
}
.sheet--catalog .sheet-head h3,
.tariff-purchase-sheet .sheet-head h3,
.subscription-sheet .sheet-head h3 { font-size: clamp(29px, 4vw, 42px); letter-spacing: -.055em; }
.sheet--catalog .catalog-subtitle { font-size: 14px; color: #aabbd6; }
.sheet--catalog .catalog-list { gap: 16px; margin-top: 20px; }
.sheet--catalog .catalog-group { border-radius: 26px; padding: 18px; }
.sheet--catalog .catalog-group--breaker {
  min-height: 230px;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 24px;
  border-color: rgba(104, 232, 255, .52);
  background: linear-gradient(120deg, rgba(10, 51, 82, .9), rgba(10, 18, 44, .95));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 60px rgba(0,0,0,.28), 0 0 38px rgba(67, 210, 255, .1);
}
.sheet--catalog .catalog-group--breaker::after { content:""; position:absolute; width:330px; height:330px; right:-80px; top:-80px; border-radius:50%; background:radial-gradient(circle, rgba(104,240,255,.17), transparent 65%); pointer-events:none; }
.sheet--catalog .catalog-group--breaker img { position:relative; z-index:1; width:240px; height:194px; border-radius:22px; object-fit:cover; box-shadow: 0 0 34px rgba(67, 223, 255, .22); }
.sheet--catalog .catalog-group--breaker > span { position:relative; z-index:1; }
.sheet--catalog .catalog-group--breaker strong { font-size: clamp(27px, 4vw, 42px); margin: 10px 0 8px; }
.sheet--catalog .catalog-group--breaker small { max-width: 45ch; font-size: 15px; color: #d3e3f7; }
.sheet--catalog .catalog-group--breaker .catalog-group-open { margin-top: 18px; font-size: 13px; }
.sheet--catalog .catalog-group--standard { border-color: rgba(90, 176, 255, .34); background: linear-gradient(135deg, rgba(16, 36, 70, .83), rgba(8, 18, 39, .95)); }
.sheet--catalog .catalog-group-head { padding: 2px 2px 4px; }
.sheet--catalog .catalog-group-head h4 { font-size: clamp(24px, 3vw, 32px); }
.sheet--catalog .catalog-group-head p { font-size: 13px; }
.sheet--catalog .catalog-inner-list { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.sheet--catalog .catalog-option { min-height: 120px; grid-template-columns: 72px minmax(0,1fr) auto; border-radius: 19px; padding: 10px; border-color: rgba(101, 181, 255, .22); background: rgba(4, 14, 32, .6); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.sheet--catalog .catalog-option:hover { transform: translateY(-3px); border-color: rgba(104, 232, 255, .62); box-shadow: 0 14px 34px rgba(0,0,0,.3), 0 0 22px rgba(67,210,255,.1); }
.sheet--catalog .catalog-option img { width: 72px; height: 72px; border-radius: 15px; }
.sheet--catalog .catalog-option strong { font-size: 16px; }
.sheet--catalog .catalog-option small { font-size: 11px; line-height: 1.4; }

.tariff-purchase-sheet { width: min(700px, calc(100% - 24px)); }
.tariff-sheet-hero { position:relative; min-height:190px; overflow:hidden; margin-top:18px; border:1px solid rgba(99, 213, 255, .32); border-radius:24px; background:linear-gradient(120deg,#091a36,#081024); }
.tariff-sheet-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.62; }
.tariff-sheet-hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg, rgba(4,12,28,.95), rgba(4,12,28,.7) 46%, rgba(4,12,28,.15)); }
.tariff-sheet-hero-copy { position:relative; z-index:1; display:grid; align-content:center; min-height:190px; max-width:62%; padding:24px; }
.tariff-sheet-hero-copy strong { margin:9px 0 6px; font:800 clamp(25px,4vw,38px)/1.06 var(--font-display); letter-spacing:-.045em; }
.tariff-sheet-hero-copy small { color:#c3d5eb; font-size:13px; line-height:1.5; }
.tariff-purchase-sheet .sheet-description { margin-top:18px; color:#bdcde3; font-size:14px; line-height:1.65; }
.tariff-purchase-sheet .sheet-description p { margin: 0 0 10px; }
.tariff-purchase-sheet .sheet-description ul { margin: 0 0 12px; padding-left: 1.25em; }
.tariff-purchase-sheet .sheet-description li { margin: 4px 0; }
.tariff-purchase-sheet .tariff-sheet-group { margin-top:20px; }
.tariff-purchase-sheet .tariff-chip { min-height:44px; border-radius:14px; padding-inline:14px; font-size:13px; }

.subscription-sheet { width:min(820px, calc(100% - 24px)); }
.subscription-sheet-hero { display:flex; align-items:center; gap:18px; margin-top:17px; border:1px solid rgba(92, 217, 255, .24); border-radius:23px; padding:15px 18px; background:linear-gradient(110deg, rgba(18, 67, 86, .64), rgba(16, 25, 53, .7)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 30px rgba(60, 211, 255, .08); }
.subscription-sheet-orb { display:grid; place-items:center; flex:0 0 auto; width:84px; height:84px; overflow:hidden; border:1px solid rgba(112, 230, 255, .72); border-radius:50%; background:radial-gradient(circle at 35% 25%, rgba(255,255,255,.32), transparent 30%), linear-gradient(145deg,#0d74a2,#5c36bd); box-shadow:0 0 32px rgba(69, 233, 255, .28), inset 0 0 24px rgba(255,255,255,.12); }
.subscription-sheet-orb img { width:100%; height:100%; object-fit:cover; mix-blend-mode:screen; opacity:.9; }
.subscription-sheet-hero-copy { display:grid; gap:5px; min-width:0; }
.subscription-sheet-hero-copy strong { font:800 clamp(23px, 3vw, 32px)/1.1 var(--font-display); letter-spacing:-.04em; }
.subscription-sheet-hero-copy > span:last-child { color:#c2d4ea; font-size:13px; }
.subscription-sheet-status-row { margin-top:16px; }
.subscription-sheet-status-row .badge { min-height:34px; padding-inline:13px; font-size:12px; box-shadow:0 0 24px rgba(91,240,162,.22); }
.subscription-sheet-date { font-size:12px; }
.subscription-sheet-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:15px; }
.subscription-sheet-grid .info-box { min-height:92px; display:flex; flex-direction:column; justify-content:center; border-radius:17px; padding:14px; background:rgba(15, 28, 51, .74); }
.subscription-sheet-grid .info-box span { font-size:11px; }
.subscription-sheet-grid .info-box strong { margin-top:7px; font-size:21px; }
.subscription-traffic-overview { display:grid; grid-template-columns:112px minmax(0,1fr); align-items:center; gap:18px; margin-top:15px; border:1px solid rgba(112, 174, 255, .2); border-radius:20px; padding:15px 18px; background:rgba(12, 25, 49, .72); }
.traffic-ring { --traffic-percent:0%; position:relative; display:grid; place-items:center; width:96px; height:96px; border-radius:50%; background:conic-gradient(from -90deg, var(--lime) 0 var(--traffic-percent), rgba(69, 95, 140, .28) var(--traffic-percent) 100%); box-shadow:0 0 26px rgba(112,237,167,.2); }
.traffic-ring::after { content:""; position:absolute; inset:9px; border-radius:50%; background:#0d1a32; box-shadow:inset 0 0 18px rgba(0,0,0,.35); }
.traffic-ring span,.traffic-ring small { position:relative; z-index:1; grid-area:1/1; }
.traffic-ring span { margin-top:-8px; font:800 20px var(--font-display); }
.traffic-ring small { margin-top:34px; color:#91a6c2; font-size:8px; text-transform:uppercase; letter-spacing:.08em; }
.traffic-overview-copy { display:grid; gap:5px; min-width:0; }
.traffic-overview-copy > span { color:#90a4c3; font-size:11px; }
.traffic-overview-copy strong { overflow-wrap:anywhere; font:800 20px var(--font-display); }
.traffic-overview-copy small { color:#b3c3da; font-size:12px; }
.traffic-progress { height:8px; overflow:hidden; margin-top:4px; border-radius:99px; background:rgba(255,255,255,.08); }
.traffic-progress i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--lime),var(--cyan),#74a8ff); box-shadow:0 0 13px rgba(69,233,255,.35); transition:width .5s ease; }
.subscription-sheet-extra { margin-top:15px; }
.subscription-sheet-line { padding:12px 2px; }
.subscription-sheet-line > span { font-size:12px; }
.subscription-sheet-line > strong { font-size:13px; }
.subscription-sheet-key { font-size:11px; border-radius:14px; padding:13px; }
.subscription-sheet-actions { position:sticky; bottom:-1px; margin:17px -2px -2px; padding-top:12px; background:linear-gradient(180deg, transparent, rgba(7,15,29,.95) 20%); }
.subscription-sheet-actions .primary-btn,.subscription-sheet-actions .secondary-btn { min-height:48px; font-size:14px; }

@media (max-width: 700px) {
  .sheet--catalog .catalog-group--breaker { grid-template-columns: 1fr; gap: 14px; }
  .sheet--catalog .catalog-group--breaker img { width:100%; height:160px; }
  .sheet--catalog .catalog-group--breaker strong { font-size:29px; }
  .sheet--catalog .catalog-group--breaker small { font-size:13px; }
  .sheet--catalog .catalog-inner-list { grid-template-columns:1fr; }
  .tariff-sheet-hero-copy { max-width: 78%; padding:18px; }
  .subscription-sheet-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .subscription-traffic-overview { grid-template-columns:88px minmax(0,1fr); gap:13px; padding:13px; }
  .traffic-ring { width:80px; height:80px; }
  .traffic-ring span { font-size:17px; }
  .traffic-ring small { margin-top:29px; font-size:7px; }
  .subscription-sheet-hero { padding:13px; }
  .subscription-sheet-orb { width:68px; height:68px; }
}

@media (max-width: 430px) {
  .sheet--catalog .catalog-group { padding:13px; }
  .sheet--catalog .catalog-group--breaker img { height:140px; }
  .tariff-purchase-sheet .sheet-description { font-size:13px; }
  .tariff-sheet-hero { min-height:165px; }
  .tariff-sheet-hero-copy { min-height:165px; max-width:86%; padding:15px; }
  .tariff-sheet-hero-copy strong { font-size:26px; }
  .tariff-sheet-hero-copy small { font-size:11px; }
  .subscription-sheet-hero-copy > span:last-child { font-size:11px; }
  .subscription-sheet-grid .info-box { min-height:78px; padding:10px; }
  .subscription-sheet-grid .info-box strong { font-size:18px; }
  .subscription-sheet-actions { position:static; }
}

/* Variant 2 fidelity pass: match the approved composition, scale and hierarchy. */
.tariff-purchase-sheet,
.subscription-sheet { padding: 22px; }
.tariff-purchase-sheet .sheet-head h3,
.subscription-sheet .sheet-head h3 { margin: 0; font-size: clamp(25px, 3vw, 34px); letter-spacing: -.045em; }

.tariff-purchase-sheet { width: min(720px, calc(100% - 24px)); }
.tariff-purchase-sheet .sheet-content { margin-top: 14px; }
.tariff-sheet-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  align-items: center;
  min-height: 250px;
  margin-top: 15px;
  overflow: hidden;
  border-color: rgba(71, 194, 255, .38);
  background:
    radial-gradient(circle at 82% 46%, rgba(61, 210, 255, .14), transparent 31%),
    linear-gradient(135deg, rgba(8, 28, 58, .96), rgba(5, 15, 34, .98));
}
.tariff-sheet-hero::after { content:""; position:absolute; inset:auto -6% -36% 28%; height:70%; background:repeating-radial-gradient(ellipse at center, transparent 0 13px, rgba(73,204,255,.08) 14px 15px); transform:rotate(-8deg); pointer-events:none; }
.tariff-sheet-hero-copy { min-height: 0; max-width: none; align-content: center; padding: 26px 0 26px 26px; }
.tariff-sheet-hero-copy strong { order: 1; margin: 0 0 14px; font-size: clamp(34px, 5vw, 48px); line-height: .98; }
.tariff-sheet-hero-copy .catalog-badge { order: 2; width:max-content; margin:0 0 16px; padding:7px 12px; color:#061322; background:linear-gradient(110deg,var(--lime),var(--cyan),#70a5ff); font-size:11px; letter-spacing:.02em; text-transform:none; }
.tariff-sheet-hero-copy small { order: 3; max-width:28ch; color:#c6d7ed; font-size:14px; line-height:1.55; }
.tariff-sheet-hero-orb { position:relative; z-index:2; display:grid; place-items:center; width:190px; height:190px; justify-self:center; border-radius:50%; background:radial-gradient(circle,rgba(57,215,255,.19),transparent 68%); filter:drop-shadow(0 0 24px rgba(64,217,255,.32)); }
.tariff-sheet-hero-orb::before,.tariff-sheet-hero-orb::after { content:""; position:absolute; border:1px solid rgba(92,225,255,.26); border-radius:50%; }
.tariff-sheet-hero-orb::before { inset:14px -8px; transform:rotate(24deg); }
.tariff-sheet-hero-orb::after { inset:-5px 24px; transform:rotate(-31deg); border-color:rgba(158,112,255,.32); }
.tariff-sheet-hero-orb img { position:relative; inset:auto; z-index:2; width:155px; height:155px; border-radius:50%; object-fit:cover; opacity:1; mix-blend-mode:screen; }
.tariff-feature-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.tariff-feature-strip > span { display:flex; align-items:center; gap:8px; min-height:58px; border:1px solid rgba(102,164,225,.18); border-radius:15px; padding:10px 11px; color:#bfcfe4; background:rgba(11,24,46,.66); font-size:10px; line-height:1.35; }
.tariff-feature-strip i { display:grid; place-items:center; flex:0 0 auto; width:25px; height:25px; border-radius:9px; color:var(--cyan); background:rgba(69,233,255,.08); font-style:normal; font-weight:800; }
.tariff-purchase-sheet .tariff-bonus-row { margin-top:9px; }
.tariff-purchase-sheet .tariff-sheet-options { display:block; }
.tariff-purchase-sheet .tariff-sheet-group { margin-top:15px; }
.tariff-purchase-sheet .tariff-chip-row { gap:7px; }
.tariff-purchase-sheet .tariff-chip { min-height:42px; padding:7px 12px; }
.tariff-purchase-sheet .sheet-actions { margin-top:16px; }
.tariff-purchase-sheet .sheet-actions > * { min-height:50px; }

.subscription-sheet { width:min(760px, calc(100% - 24px)); }
.subscription-sheet .sheet-content { margin-top: 12px; }
.subscription-sheet-hero { gap:16px; margin-top:14px; padding:13px 15px; border-radius:20px; background:linear-gradient(110deg,rgba(10,69,94,.67),rgba(18,34,65,.82) 58%,rgba(42,91,67,.55)); }
.subscription-sheet-orb { width:76px; height:76px; }
.subscription-sheet-hero-copy { flex:1; gap:4px; }
.subscription-sheet-hero-title { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.subscription-sheet-hero-title strong { font-size:clamp(22px,3vw,30px); }
.subscription-sheet-hero-title .badge { min-height:28px; padding:5px 10px; font-size:10px; box-shadow:0 0 20px rgba(91,240,162,.22); }
.subscription-sheet-hero-copy > span:last-of-type { color:#b6c8df; font-size:11px; }
.subscription-sheet-date { margin-top:2px; color:#7f93b1; font-size:9px; }
.subscription-traffic-overview { grid-template-columns:96px minmax(0,1fr); gap:15px; margin-top:0; border-radius:18px; padding:13px 15px; }
.traffic-ring { width:82px; height:82px; }
.traffic-ring::after { inset:8px; }
.traffic-ring span { font-size:18px; }
.traffic-ring small { margin-top:29px; font-size:6.5px; }
.traffic-overview-copy strong { font-size:18px; }
.traffic-overview-copy small { font-size:10px; }
.subscription-sheet-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:10px; }
.subscription-sheet-grid .info-box { min-height:70px; border-radius:14px; padding:10px 11px; }
.subscription-sheet-grid .info-box span { font-size:9px; }
.subscription-sheet-grid .info-box strong { margin-top:5px; font-size:16px; }
.subscription-sheet-line--secondary-meta { display:none; }
.subscription-sheet-extra { gap:10px; margin-top:10px; }
.subscription-sheet-line--stack { border:1px solid rgba(103,165,224,.17); border-radius:17px; padding:12px; background:rgba(8,20,40,.66); }
.subscription-sheet-line--stack > span { color:#d8e5f4; font-size:11px; font-weight:700; }
.subscription-sheet-key-row { grid-template-columns:minmax(0,1fr) auto; align-items:center; }
.subscription-sheet-key { max-height:52px; min-height:42px; padding:11px 12px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.subscription-sheet-key-actions { flex-wrap:nowrap; }
.subscription-sheet-key-actions .secondary-btn { min-height:42px; padding-inline:13px; }
.subscription-help-tabs { margin:9px 0 7px; }
.subscription-help-tab { min-height:38px; }
.subscription-help-grid { margin-top:0; }
.subscription-help-col { padding:10px 12px; }
.subscription-help-text { font-size:9px; line-height:1.5; }
.subscription-sheet-actions { position:static; margin:12px 0 0; padding-top:0; background:none; }
.subscription-sheet-actions .primary-btn,.subscription-sheet-actions .secondary-btn { min-height:45px; font-size:12px; }

@media (min-width: 701px) {
  .subscription-sheet { max-height:min(94dvh,900px); }
}

@media (max-width: 700px) {
  .tariff-purchase-sheet,.subscription-sheet { padding:15px; }
  .tariff-sheet-hero { grid-template-columns:minmax(0,1fr) 130px; min-height:205px; }
  .tariff-sheet-hero-copy { padding:19px 0 19px 18px; }
  .tariff-sheet-hero-copy strong { font-size:clamp(28px,9vw,38px); }
  .tariff-sheet-hero-copy small { font-size:11px; }
  .tariff-sheet-hero-orb { width:125px; height:125px; }
  .tariff-sheet-hero-orb img { width:105px; height:105px; }
  .tariff-feature-strip { grid-template-columns:1fr; }
  .tariff-feature-strip > span { min-height:44px; }
  .subscription-sheet-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 430px) {
  .tariff-purchase-sheet .sheet-head h3,.subscription-sheet .sheet-head h3 { font-size:24px; }
  .tariff-sheet-hero { grid-template-columns:minmax(0,1fr) 102px; min-height:180px; }
  .tariff-sheet-hero-copy { padding:15px 0 15px 14px; }
  .tariff-sheet-hero-copy strong { margin-bottom:10px; font-size:27px; }
  .tariff-sheet-hero-copy .catalog-badge { margin-bottom:10px; padding:5px 8px; font-size:8px; }
  .tariff-sheet-hero-orb { width:94px; height:94px; }
  .tariff-sheet-hero-orb img { width:82px; height:82px; }
  .subscription-sheet-hero { gap:11px; padding:11px; }
  .subscription-sheet-orb { width:58px; height:58px; }
  .subscription-sheet-hero-title { gap:6px; }
  .subscription-sheet-hero-title strong { font-size:19px; }
  .subscription-traffic-overview { grid-template-columns:76px minmax(0,1fr); gap:10px; padding:11px; }
  .traffic-ring { width:68px; height:68px; }
  .traffic-ring span { font-size:15px; }
  .traffic-ring small { margin-top:24px; }
  .traffic-overview-copy strong { font-size:15px; }
  .subscription-sheet-key-row { grid-template-columns:1fr; }
  .subscription-sheet-key-actions { width:100%; }
  .subscription-sheet-key-actions > * { flex:1; }
}

@media (min-width: 701px) {
  .sheet--catalog .catalog-group--breaker > img { grid-column:2; grid-row:1; }
  .sheet--catalog .catalog-group--breaker > span { grid-column:1; grid-row:1; }
}

@media (max-width: 700px) {
  .sheet--catalog .catalog-group--breaker { grid-template-columns:minmax(0,1fr) 126px; min-height:190px; }
  .sheet--catalog .catalog-group--breaker > img { grid-column:2; grid-row:1; width:126px; height:126px; align-self:center; border-radius:50%; }
  .sheet--catalog .catalog-group--breaker > span { grid-column:1; grid-row:1; }
  .sheet--catalog .catalog-group--breaker strong { font-size:25px; }
}

@media (max-width: 430px) {
  .sheet--catalog .catalog-group--breaker { grid-template-columns:minmax(0,1fr) 92px; min-height:160px; gap:8px; }
  .sheet--catalog .catalog-group--breaker > img { width:92px; height:92px; }
  .sheet--catalog .catalog-group--breaker strong { font-size:22px; }
  .sheet--catalog .catalog-group--breaker small { font-size:10px; }
}

/* Approved reference colour pass: richer neon without changing layout. */
.tariff-purchase-sheet,
.subscription-sheet {
  background:
    radial-gradient(circle at 88% 10%, rgba(41, 151, 255, .21), transparent 31%),
    radial-gradient(circle at 8% 88%, rgba(42, 225, 194, .10), transparent 34%),
    linear-gradient(145deg, rgba(8, 27, 57, .995), rgba(3, 10, 25, .995));
  border-color: rgba(83, 194, 255, .48);
  box-shadow:
    0 38px 120px rgba(0, 0, 0, .74),
    0 0 72px rgba(34, 161, 255, .14),
    inset 0 1px 0 rgba(255, 255, 255, .11);
}

.tariff-purchase-sheet .sheet-head h3,
.subscription-sheet .sheet-head h3 {
  color: #f6f9ff;
  text-shadow: 0 0 22px rgba(102, 193, 255, .22);
}

.tariff-sheet-hero {
  border-color: rgba(72, 214, 255, .61);
  background:
    radial-gradient(circle at 82% 47%, rgba(79, 232, 255, .24), transparent 31%),
    radial-gradient(circle at 96% 83%, rgba(99, 255, 130, .15), transparent 33%),
    linear-gradient(135deg, rgba(7, 37, 76, .98), rgba(4, 15, 37, .99));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 0 38px rgba(53, 203, 255, .13);
}
.tariff-sheet-hero-copy .catalog-badge {
  box-shadow: 0 0 24px rgba(108, 238, 160, .32), inset 0 1px 0 rgba(255,255,255,.7);
}
.tariff-sheet-hero-orb {
  background:
    radial-gradient(circle at 45% 42%, rgba(69, 224, 255, .32), transparent 54%),
    radial-gradient(circle, rgba(85, 251, 151, .18), transparent 70%);
  filter: drop-shadow(0 0 20px rgba(54, 222, 255, .5)) drop-shadow(0 0 34px rgba(92, 246, 132, .23));
}
.tariff-feature-strip > span {
  border-color: rgba(89, 175, 255, .28);
  background: linear-gradient(145deg, rgba(13, 38, 72, .84), rgba(7, 19, 42, .9));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 8px 24px rgba(0,0,0,.18);
}
.tariff-feature-strip > span:nth-child(1) i { color:#77f3a3; background:rgba(101,243,146,.12); box-shadow:0 0 15px rgba(101,243,146,.15); }
.tariff-feature-strip > span:nth-child(2) i { color:#53b4ff; background:rgba(83,180,255,.12); box-shadow:0 0 15px rgba(83,180,255,.15); }
.tariff-feature-strip > span:nth-child(3) i { color:#cf72ff; background:rgba(207,114,255,.12); box-shadow:0 0 15px rgba(207,114,255,.15); }

.subscription-sheet-hero {
  position: relative;
  overflow: hidden;
  border-color: rgba(56, 221, 239, .48);
  background:
    radial-gradient(circle at 7% 50%, rgba(52, 214, 255, .27), transparent 26%),
    radial-gradient(circle at 100% 90%, rgba(83, 255, 116, .42), transparent 33%),
    linear-gradient(108deg, rgba(8, 76, 105, .89), rgba(10, 36, 70, .92) 60%, rgba(36, 111, 74, .88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 0 34px rgba(43, 215, 242, .16);
}
.subscription-sheet-hero::after {
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  right:-72px;
  bottom:-120px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(128,255,119,.27), transparent 68%);
  pointer-events:none;
}
.subscription-sheet-hero > * { position:relative; z-index:1; }
.subscription-sheet-orb {
  border-color: rgba(113, 236, 255, .9);
  box-shadow:
    0 0 18px rgba(65, 225, 255, .55),
    0 0 36px rgba(100, 246, 132, .22),
    inset 0 0 25px rgba(255,255,255,.18);
}
.subscription-sheet-hero-title .badge {
  color:#102617;
  border-color:rgba(190,255,156,.72);
  background:linear-gradient(110deg,#bafa72,#79eca3);
  box-shadow:0 0 22px rgba(136,247,130,.46), inset 0 1px 0 rgba(255,255,255,.72);
}

.subscription-traffic-overview {
  border-color: rgba(85, 168, 255, .31);
  background:
    radial-gradient(circle at 13% 50%, rgba(76, 237, 255, .11), transparent 25%),
    linear-gradient(135deg, rgba(11, 34, 66, .94), rgba(7, 19, 43, .96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 12px 34px rgba(0,0,0,.22);
}
.traffic-ring {
  background:conic-gradient(from -90deg, #a9f75d 0, #61ecbc, #4fb8ff var(--traffic-percent), rgba(55, 82, 128, .34) var(--traffic-percent) 100%);
  box-shadow:0 0 18px rgba(76,224,255,.4), 0 0 36px rgba(117,244,117,.2);
}
.traffic-ring::before {
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:50%;
  border:1px solid rgba(82,214,255,.17);
  box-shadow:inset 0 0 18px rgba(82,214,255,.08);
}
.traffic-ring::after { background:radial-gradient(circle at 45% 35%, #102c51, #07152d 72%); }
.traffic-progress { background:rgba(73,106,159,.28); }
.traffic-progress i { background:linear-gradient(90deg,#a9f75d,#62eac0 48%,#51b8ff); box-shadow:0 0 16px rgba(86,220,255,.52); }

.subscription-sheet-grid .info-box {
  position:relative;
  overflow:hidden;
  border-color:rgba(89,154,222,.26);
  background:linear-gradient(145deg,rgba(13,38,71,.88),rgba(7,18,40,.94));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 10px 28px rgba(0,0,0,.18);
}
.subscription-sheet-grid .info-box::after { content:""; position:absolute; width:74px; height:74px; right:-36px; bottom:-42px; border-radius:50%; opacity:.28; pointer-events:none; }
.subscription-sheet-grid .info-box:nth-child(1)::after { background:#a7f45f; box-shadow:0 0 25px #a7f45f; }
.subscription-sheet-grid .info-box:nth-child(2)::after { background:#50b6ff; box-shadow:0 0 25px #50b6ff; }
.subscription-sheet-grid .info-box:nth-child(3)::after { background:#ca66ff; box-shadow:0 0 25px #ca66ff; }
.subscription-sheet-grid .info-box:nth-child(4)::after { background:#51e7ff; box-shadow:0 0 25px #51e7ff; }
.subscription-sheet-grid .info-box:nth-child(1) strong { color:#caff9a; }
.subscription-sheet-grid .info-box:nth-child(2) strong { color:#80caff; }
.subscription-sheet-grid .info-box:nth-child(3) strong { color:#e1a2ff; }
.subscription-sheet-grid .info-box:nth-child(4) strong { color:#8bedff; }

.subscription-sheet-line--stack {
  border-color:rgba(86,162,235,.3);
  background:linear-gradient(145deg,rgba(10,31,61,.88),rgba(5,16,36,.94));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}
.subscription-sheet-key { color:#c5efff; border-color:rgba(79,160,236,.28); background:rgba(2,10,24,.75); text-shadow:0 0 13px rgba(70,211,255,.18); }
.subscription-help-tab.is-active,
.subscription-sheet-actions .primary-btn,
.tariff-purchase-sheet .primary-btn {
  background:linear-gradient(105deg,#a8f45c 0%,#65edaa 30%,#48dcff 67%,#659bff 100%);
  box-shadow:0 0 20px rgba(83,225,255,.3),0 13px 30px rgba(41,146,255,.17),inset 0 1px 0 rgba(255,255,255,.72);
}

/* Connectix profile device management */
.profile-head--account { align-items:center; }
.profile-head--account .profile-head-text { min-width:0; }
.profile-telegram-id {
  margin-left:auto;
  min-width:152px;
  padding:11px 14px;
  border:1px solid rgba(92,188,255,.25);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(12,39,72,.76),rgba(6,19,42,.9));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 22px rgba(68,209,255,.08);
  text-align:right;
}
.profile-telegram-id span { display:block; color:#879ab8; font-size:10px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.profile-telegram-id strong { display:block; margin-top:3px; color:#c6f2ff; font:700 15px var(--font-display); letter-spacing:.025em; }
.security-card { cursor:pointer; outline:none; transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease; }
.security-card:hover,.security-card:focus-visible { transform:translateY(-2px); border-color:rgba(82,225,255,.5); box-shadow:0 18px 48px rgba(0,0,0,.27),0 0 28px rgba(70,214,255,.11),inset 0 1px 0 rgba(255,255,255,.08); }
.security-open-hint { grid-column:2; display:inline-flex; align-items:center; gap:8px; width:max-content; margin-top:-7px; color:#65ddff; font-size:11px; font-weight:750; }
.security-open-hint b { font-size:15px; transition:transform .2s ease; }
.security-card:hover .security-open-hint b { transform:translateX(3px); }

.device-sheet { width:min(820px,calc(100% - 24px)); padding:22px; border-color:rgba(65,216,255,.3); background:radial-gradient(circle at 88% 6%,rgba(71,120,255,.16),transparent 28%),linear-gradient(145deg,rgba(12,30,58,.99),rgba(4,12,29,.99)); }
.device-sheet-head p { margin:4px 0 0; color:#91a4c1; font-size:12px; }
.device-subscription-tabs { display:flex; gap:8px; overflow-x:auto; margin:15px 0 2px; padding:2px 1px 5px; scrollbar-width:none; }
.device-subscription-tabs::-webkit-scrollbar { display:none; }
.device-subscription-tab { flex:0 0 auto; min-width:142px; padding:10px 13px; border:1px solid rgba(100,146,209,.25); border-radius:15px; color:#9eb0cc; background:rgba(6,19,43,.75); text-align:left; }
.device-subscription-tab span,.device-subscription-tab small { display:block; }
.device-subscription-tab span { color:#d9e7f8; font-weight:760; }
.device-subscription-tab small { margin-top:2px; font-size:9px; }
.device-subscription-tab.is-active { border-color:rgba(95,234,255,.65); background:linear-gradient(120deg,rgba(49,211,255,.16),rgba(106,248,126,.12)); box-shadow:0 0 20px rgba(70,220,255,.12),inset 0 1px 0 rgba(255,255,255,.08); }
.device-sheet-content { margin-top:13px; }
.device-loading,.device-error,.device-empty { min-height:245px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; border:1px solid rgba(89,150,215,.22); border-radius:22px; background:rgba(4,15,35,.5); text-align:center; }
.device-loading i { width:36px; height:36px; border:3px solid rgba(104,178,239,.2); border-top-color:#51ddff; border-radius:50%; animation:spin .8s linear infinite; }
.device-loading span,.device-error span,.device-empty p { max-width:40ch; color:#91a4c1; font-size:12px; }
.device-error strong,.device-empty strong { color:#eef6ff; font-size:17px; }
.device-error .secondary-btn { flex:none; min-width:150px; margin-top:5px; }
.device-summary { position:relative; display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:14px; overflow:hidden; padding:17px; border:1px solid rgba(64,221,238,.42); border-radius:23px; background:radial-gradient(circle at 0 50%,rgba(47,214,255,.24),transparent 30%),radial-gradient(circle at 100% 100%,rgba(106,255,116,.32),transparent 33%),linear-gradient(110deg,rgba(8,70,102,.92),rgba(8,30,60,.94) 62%,rgba(28,92,68,.9)); box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 30px rgba(47,218,244,.13); }
.device-summary-orbit { width:58px; height:58px; display:grid; place-items:center; border:1px solid rgba(101,234,255,.72); border-radius:50%; background:radial-gradient(circle at 38% 30%,#7cf8d4,#1b88b8 48%,#164482 75%); box-shadow:0 0 20px rgba(64,224,255,.42),0 0 34px rgba(103,244,120,.18); }
.device-summary-orbit span { width:27px; height:27px; display:grid; place-items:center; border-radius:50%; color:#102617; background:#b7fb81; font-weight:900; box-shadow:0 0 16px rgba(162,252,115,.55); }
.device-summary-copy span,.device-summary-copy strong,.device-summary-copy small { display:block; }
.device-summary-copy span { color:#7eeaff; font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.device-summary-copy strong { margin-top:3px; color:#f4f8ff; font:800 21px var(--font-display); letter-spacing:-.025em; }
.device-summary-copy small { margin-top:2px; color:#b5c6dd; font-size:11px; }
.device-limit { display:flex; align-items:baseline; gap:4px; padding-right:4px; }
.device-limit > strong { color:#bdff89; font:850 30px var(--font-display); text-shadow:0 0 18px rgba(168,249,93,.33); }
.device-limit span { color:#83a6bd; font-size:14px; }
.device-limit-progress { grid-column:2/4; height:6px; overflow:hidden; border-radius:99px; background:rgba(74,110,158,.32); }
.device-limit-progress i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#a8f35f,#62ebbd 50%,#4db9ff); box-shadow:0 0 14px rgba(82,226,255,.5); transition:width .45s ease; }
.device-note { display:flex; gap:10px; margin:11px 0 15px; padding:11px 13px; border:1px solid rgba(171,113,255,.24); border-radius:16px; color:#c3d1e6; background:linear-gradient(120deg,rgba(101,53,160,.14),rgba(9,23,50,.6)); }
.device-note > span { color:#c07dff; font-size:17px; }
.device-note p { margin:0; font-size:10.5px; line-height:1.5; }
.device-list-head { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin:0 2px 10px; }
.device-list-head h4 { margin:2px 0 0; color:#f0f6ff; font:800 19px var(--font-display); }
.device-free-slots { padding:6px 10px; border:1px solid rgba(116,244,145,.28); border-radius:99px; color:#aef794; background:rgba(75,213,106,.08); font-size:9px; font-weight:800; white-space:nowrap; }
.device-list { display:grid; gap:9px; }
.device-item { display:grid; grid-template-columns:50px minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px; border:1px solid rgba(91,151,219,.24); border-radius:18px; background:linear-gradient(145deg,rgba(12,34,64,.88),rgba(5,17,38,.94)); box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 9px 24px rgba(0,0,0,.14); }
.device-item-icon { width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(77,216,255,.35); border-radius:14px; background:radial-gradient(circle at 35% 25%,rgba(74,225,255,.25),rgba(31,64,122,.4) 50%,rgba(68,47,138,.35)); font-size:21px; box-shadow:0 0 19px rgba(69,208,255,.1); }
.device-item-copy { min-width:0; }
.device-item-copy strong,.device-item-copy span,.device-item-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.device-item-copy strong { color:#eef6ff; font:750 14px var(--font-display); }
.device-item-copy span { margin-top:2px; color:#90a4c1; font-size:10px; }
.device-item-copy small { margin-top:4px; color:#b4c7da; font-size:9px; }
.device-item-copy small i { display:inline-block; width:6px; height:6px; margin-right:3px; border-radius:50%; background:#62ef9a; box-shadow:0 0 8px #62ef9a; }
.device-item-actions { display:flex; gap:7px; }
.device-action-btn { min-height:34px; padding:0 11px; border:1px solid rgba(82,206,255,.32); border-radius:11px; color:#8feaff; background:rgba(41,160,210,.08); font-size:10px; font-weight:760; }
.device-action-btn:hover { border-color:rgba(85,224,255,.7); background:rgba(51,202,239,.14); }
.device-action-btn--danger { border-color:rgba(255,105,128,.3); color:#ff9daf; background:rgba(208,54,80,.08); }
.device-action-btn--danger:hover { border-color:rgba(255,102,125,.65); background:rgba(208,54,80,.15); }
.device-empty { min-height:180px; }
.device-empty > span { color:#55ddff; font-size:35px; filter:drop-shadow(0 0 13px rgba(75,221,255,.45)); }
.device-empty p { margin:0; }
.device-disconnect-all { width:100%; min-height:46px; margin-top:12px; }
.device-action-modal { max-width:480px; }
.device-action-modal h3 { margin:7px 0 4px; color:#f3f7ff; font:800 23px var(--font-display); letter-spacing:-.03em; }
.device-action-modal .sync-input { margin-top:6px; }
.device-action-modal .sync-actions { grid-template-columns:1fr 1fr; }
.eyebrow--danger { color:#ff91a6; }

@media (max-width:640px) {
  .profile-head--account { display:grid; grid-template-columns:auto minmax(0,1fr); }
  .profile-telegram-id { grid-column:1/-1; width:100%; min-width:0; margin:1px 0 0; text-align:left; }
  .profile-telegram-id span,.profile-telegram-id strong { display:inline; }
  .profile-telegram-id strong { margin-left:8px; }
  .security-open-hint { grid-column:1/-1; }
  .device-sheet { top:max(8px,env(safe-area-inset-top)); bottom:auto; width:calc(100% - 16px); max-height:calc(100dvh - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom))); padding:14px; transform:translateX(-50%); }
  .device-summary { grid-template-columns:52px minmax(0,1fr) auto; padding:13px; gap:10px; }
  .device-summary-orbit { width:48px; height:48px; }
  .device-summary-copy strong { font-size:17px; }
  .device-limit > strong { font-size:24px; }
  .device-item { grid-template-columns:43px minmax(0,1fr); padding:10px; }
  .device-item-icon { width:42px; height:42px; }
  .device-item-actions { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; }
  .device-action-btn { min-height:38px; }
  .device-action-modal .sync-actions { grid-template-columns:1fr; }
}

/* Focused tariff copy and live profile controls */
.tariff-purchase-sheet .tariff-bonus-row {
  display:grid;
  grid-template-columns:auto auto minmax(180px,1fr);
  align-items:stretch;
  justify-content:center;
  gap:9px;
}
.tariff-purchase-sheet .tariff-bonus-chip {
  display:grid;
  place-items:center;
  min-height:50px;
  border-radius:15px;
  padding:10px 14px;
  border-color:rgba(91,171,236,.28);
  background:linear-gradient(145deg,rgba(13,37,70,.86),rgba(6,18,40,.94));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 24px rgba(0,0,0,.17);
  text-align:center;
}
.tariff-purchase-sheet .tariff-bonus-chip--action {
  grid-template-columns:minmax(0,1fr) auto;
  gap:9px;
  width:100%;
  color:#dceafb;
  cursor:pointer;
  text-align:left;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.tariff-purchase-sheet .tariff-bonus-chip--action:hover,.tariff-purchase-sheet .tariff-bonus-chip--action:focus-visible { transform:translateY(-2px); border-color:rgba(90,222,255,.67); background:linear-gradient(145deg,rgba(13,57,94,.94),rgba(8,25,51,.98)); box-shadow:0 12px 25px rgba(0,0,0,.22),0 0 22px rgba(68,207,255,.12); outline:none; }
.tariff-purchase-sheet .tariff-bonus-chip--action b { color:#6eeaff; font-size:17px; }
.tariff-purpose-card {
  min-width:0;
  display:grid;
  grid-template-columns:35px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  border:1px solid rgba(196,112,255,.5);
  border-radius:15px;
  padding:8px 12px;
  color:#eef6ff;
  background:radial-gradient(circle at 0 50%,rgba(193,91,255,.2),transparent 43%),linear-gradient(130deg,rgba(32,32,83,.92),rgba(9,28,57,.95));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 24px rgba(175,81,255,.12);
  text-align:left;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.tariff-purpose-card:hover,.tariff-purpose-card:focus-visible { transform:translateY(-2px); border-color:rgba(106,231,255,.72); box-shadow:0 12px 28px rgba(0,0,0,.25),0 0 25px rgba(81,215,255,.16); outline:none; }
.tariff-purpose-card > i { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; color:#e2a1ff; background:rgba(194,90,255,.14); box-shadow:0 0 15px rgba(193,89,255,.18); font-style:normal; }
.tariff-purpose-card span small,.tariff-purpose-card span strong { display:block; }
.tariff-purpose-card span small { color:#9aaec9; font-size:8px; letter-spacing:.08em; text-transform:uppercase; }
.tariff-purpose-card span strong { margin-top:2px; font:760 11px var(--font-display); }
.tariff-purpose-card > b { color:#60e5ff; font-size:16px; }

.traffic-guide-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.traffic-guide-card { position:relative; overflow:hidden; min-height:195px; border:1px solid rgba(89,157,226,.27); border-radius:20px; padding:16px; background:linear-gradient(145deg,rgba(14,37,70,.94),rgba(6,18,39,.98)); box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 12px 30px rgba(0,0,0,.2); }
.traffic-guide-card::after { content:""; position:absolute; width:120px; height:120px; right:-60px; bottom:-65px; border-radius:50%; opacity:.34; pointer-events:none; }
.traffic-guide-card--moderate::after { background:#55dcff; box-shadow:0 0 40px #55dcff; }
.traffic-guide-card--active::after { background:#a46cff; box-shadow:0 0 40px #a46cff; }
.traffic-guide-card--maximum::after { background:#ff647c; box-shadow:0 0 40px #ff647c; }
.traffic-guide-title { display:flex; align-items:center; gap:9px; }
.traffic-guide-title > span { width:35px; height:35px; display:grid; place-items:center; border-radius:11px; background:rgba(255,255,255,.055); font-size:17px; }
.traffic-guide-title strong,.traffic-guide-title small { display:block; }
.traffic-guide-title strong { color:#f3f8ff; font:820 21px var(--font-display); }
.traffic-guide-title small { margin-top:1px; color:#8fa5c2; font-size:8px; }
.traffic-guide-card > p { position:relative; z-index:1; margin:14px 0 10px; color:#c9d7e9; font-size:10.5px; line-height:1.55; }
.traffic-guide-card > em { position:relative; z-index:1; display:block; color:#8ea3bf; font-size:9px; font-style:normal; line-height:1.45; }
.traffic-guide-orient { margin-top:11px; border:1px solid rgba(81,216,255,.25); border-radius:19px; padding:14px; background:radial-gradient(circle at 100% 0,rgba(84,117,255,.16),transparent 36%),rgba(7,22,47,.78); }
.traffic-guide-orient > div { margin-bottom:9px; }
.traffic-guide-orient > div strong { display:block; margin-top:3px; color:#eef7ff; font:780 15px var(--font-display); }
.traffic-guide-orient > p { display:grid; grid-template-columns:25px 1fr auto; align-items:center; gap:8px; margin:6px 0; padding:8px 10px; border:1px solid rgba(100,151,211,.17); border-radius:12px; color:#bdcce0; background:rgba(255,255,255,.025); font-size:10px; }
.traffic-guide-orient > p span { font-size:15px; }
.traffic-guide-orient > p b { color:#dce8f7; font-weight:680; }
.traffic-guide-orient > p em { color:#71e8ff; font-style:normal; font-weight:800; }
.breaker-help-note { border-color:rgba(95,228,255,.32); background:linear-gradient(120deg,rgba(54,202,255,.1),rgba(98,239,128,.07)); text-align:center; }
.breaker-purpose-hero { display:flex; gap:14px; align-items:center; border:1px solid rgba(75,223,255,.38); border-radius:21px; padding:17px; background:radial-gradient(circle at 0 50%,rgba(67,220,255,.25),transparent 28%),linear-gradient(120deg,rgba(8,61,92,.88),rgba(11,27,56,.96)); box-shadow:0 0 28px rgba(60,213,242,.11),inset 0 1px 0 rgba(255,255,255,.08); }
.breaker-purpose-hero > span { flex:0 0 auto; width:52px; height:52px; display:grid; place-items:center; border-radius:50%; color:#102519; background:linear-gradient(135deg,#b8fa71,#58e5c6,#56a9ff); box-shadow:0 0 25px rgba(83,226,255,.44); font-size:21px; }
.breaker-purpose-hero strong { color:#f4f9ff; font:820 20px var(--font-display); }
.breaker-purpose-hero p { margin:5px 0 0; color:#bdcce0; font-size:11px; line-height:1.55; }
.breaker-purpose-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:10px; }
.breaker-purpose-grid article { border:1px solid rgba(91,153,218,.25); border-radius:17px; padding:14px; background:linear-gradient(145deg,rgba(13,36,68,.88),rgba(6,17,38,.95)); }
.breaker-purpose-grid i { width:31px; height:31px; display:grid; place-items:center; margin-bottom:10px; border-radius:10px; color:#66e5ff; background:rgba(74,210,255,.1); font-style:normal; }
.breaker-purpose-grid article:nth-child(2) i { color:#c883ff; background:rgba(190,94,255,.1); }
.breaker-purpose-grid article:nth-child(3) i { color:#a9f56c; background:rgba(148,238,92,.1); }
.breaker-purpose-grid strong { display:block; color:#edf5ff; font:740 12px var(--font-display); }
.breaker-purpose-grid p { margin:5px 0 0; color:#95a8c3; font-size:9.5px; line-height:1.5; }
.breaker-purpose-note { margin-top:10px; border:1px solid rgba(114,242,145,.25); border-radius:15px; padding:12px 14px; color:#cfe4d8; background:rgba(73,213,102,.07); font-size:10px; line-height:1.5; text-align:center; }

.breaker-info-panel { display:grid; gap:10px; }
.breaker-info-hero { display:flex; align-items:center; gap:14px; border:1px solid rgba(77,220,255,.38); border-radius:22px; padding:17px; background:radial-gradient(circle at 0 50%,rgba(68,208,255,.24),transparent 30%),linear-gradient(128deg,rgba(8,54,89,.93),rgba(9,23,50,.98)); box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 0 28px rgba(66,210,255,.1); }
.breaker-info-hero > span { flex:0 0 auto; width:55px; height:55px; display:grid; place-items:center; border-radius:18px; font:850 25px var(--font-display); color:#06182a; background:linear-gradient(135deg,#a9fa73,#4de3dc,#5da7ff); box-shadow:0 0 27px rgba(82,224,255,.4); }
.breaker-info-hero--unlimited { border-color:rgba(151,240,111,.4); background:radial-gradient(circle at 0 50%,rgba(150,238,105,.23),transparent 31%),linear-gradient(128deg,rgba(15,61,61,.93),rgba(9,23,50,.98)); }
.breaker-info-hero--unlimited > span { color:#14321a; background:linear-gradient(135deg,#ccfb76,#5de3af,#62b8ff); }
.breaker-info-hero strong { display:block; color:#f4f9ff; font:820 20px var(--font-display); }
.breaker-info-hero p { margin:5px 0 0; color:#c1d1e5; font-size:11px; line-height:1.55; }
.breaker-info-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.breaker-info-grid article { min-height:144px; border:1px solid rgba(89,155,221,.27); border-radius:17px; padding:14px; background:linear-gradient(145deg,rgba(13,36,68,.9),rgba(6,17,38,.96)); }
.breaker-info-grid i { width:33px; height:33px; display:grid; place-items:center; margin-bottom:10px; border-radius:11px; color:#6de8ff; background:rgba(67,209,255,.11); font-style:normal; font-size:12px; font-weight:800; }
.breaker-info-grid article:nth-child(2) i { color:#ca92ff; background:rgba(190,94,255,.12); }
.breaker-info-grid article:nth-child(3) i { color:#aefa78; background:rgba(130,233,89,.11); }
.breaker-info-card--warning { border-color:rgba(255,172,105,.34) !important; background:linear-gradient(145deg,rgba(72,42,40,.62),rgba(15,23,43,.97)) !important; }
.breaker-info-card--warning i { color:#ffc66d !important; background:rgba(255,174,83,.13) !important; }
.breaker-info-grid strong { display:block; color:#eef6ff; font:740 12px var(--font-display); }
.breaker-info-grid p { margin:5px 0 0; color:#9dafc9; font-size:9.5px; line-height:1.52; }

.purchase-confirm-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:11px; }
.purchase-confirm-summary > div { min-height:78px; border:1px solid rgba(92,167,228,.28); border-radius:16px; padding:12px; background:linear-gradient(145deg,rgba(14,39,74,.92),rgba(7,19,42,.96)); }
.purchase-confirm-summary span,.purchase-confirm-summary strong { display:block; }
.purchase-confirm-summary span { color:#91a6c3; font-size:9px; }
.purchase-confirm-summary strong { margin-top:5px; color:#f1f7ff; font:790 16px var(--font-display); }
.purchase-confirm-warning,.purchase-confirm-benefit { display:flex; align-items:flex-start; gap:11px; border-radius:18px; padding:14px; }
.purchase-confirm-warning { border:1px solid rgba(255,188,103,.42); background:linear-gradient(135deg,rgba(95,61,35,.35),rgba(22,25,47,.95)); }
.purchase-confirm-benefit { margin-top:9px; border:1px solid rgba(139,240,121,.3); background:rgba(94,220,114,.07); }
.purchase-confirm-warning i,.purchase-confirm-benefit i { width:31px; height:31px; flex:0 0 auto; display:grid; place-items:center; border-radius:10px; font-style:normal; font-weight:900; }
.purchase-confirm-warning i { color:#ffd17c; background:rgba(255,188,95,.13); }
.purchase-confirm-benefit i { color:#b9fa7b; background:rgba(139,240,111,.11); font-size:19px; }
.purchase-confirm-warning strong { display:block; color:#fff4df; font:760 13px var(--font-display); }
.purchase-confirm-warning p,.purchase-confirm-benefit p { margin:4px 0 0; color:#c7d2e3; font-size:10.5px; line-height:1.55; }
.purchase-confirm-check { display:flex; gap:10px; align-items:flex-start; margin-top:12px; border:1px solid rgba(95,162,221,.25); border-radius:15px; padding:12px; color:#d6e2f1; background:rgba(255,255,255,.025); font-size:10.5px; line-height:1.45; cursor:pointer; }
.purchase-confirm-check input { appearance:none; width:19px; height:19px; flex:0 0 auto; margin:0; border:1px solid rgba(114,192,246,.54); border-radius:6px; background:#07182f; display:grid; place-content:center; }
.purchase-confirm-check input::after { content:"✓"; color:#061523; font-weight:900; transform:scale(0); transition:transform .15s ease; }
.purchase-confirm-check input:checked { border-color:#9ffc73; background:linear-gradient(135deg,#a4fb73,#54dfe5); }
.purchase-confirm-check input:checked::after { transform:scale(1); }

.profile-telegram-id > div { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.profile-id-copy { width:29px; height:29px; display:grid; place-items:center; border:1px solid rgba(92,207,255,.31); border-radius:9px; color:#83eaff; background:rgba(57,184,225,.08); font-size:14px; transition:background .2s ease,border-color .2s ease,transform .2s ease; }
.profile-id-copy:hover,.profile-id-copy:focus-visible { transform:translateY(-1px); border-color:rgba(99,229,255,.7); background:rgba(63,211,240,.15); outline:none; }
.info-box--profile-devices { position:relative; width:100%; color:inherit; text-align:left; cursor:pointer; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.info-box--profile-devices > i { position:absolute; right:12px; top:50%; color:#62e3ff; font-style:normal; transform:translateY(-50%); }
.info-box--profile-devices:hover,.info-box--profile-devices:focus-visible { transform:translateY(-2px); border-color:rgba(77,219,255,.55); box-shadow:0 10px 24px rgba(0,0,0,.2),0 0 20px rgba(66,215,255,.1); outline:none; }

@media (max-width:700px) {
  .tariff-purchase-sheet .tariff-bonus-row { grid-template-columns:1fr 1fr; }
  .tariff-purpose-card { grid-column:1/-1; }
  .traffic-guide-grid,.breaker-purpose-grid,.breaker-info-grid { grid-template-columns:1fr; }
  .traffic-guide-card { min-height:0; }
  .purchase-confirm-summary { grid-template-columns:1fr 1fr; }
  .profile-telegram-id > div { display:inline-flex; margin-left:8px; vertical-align:middle; }
  .profile-telegram-id strong { margin-left:0; }
}

/* Desktop home composition: the companion actions form one calm, equal-height column. */
@media (min-width: 960px) {
  .screen[data-screen="home"] > .dashboard-actions {
    grid-row: span 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 12px;
    min-height: 0;
    height: 100%;
  }

  .screen[data-screen="home"] > .dashboard-actions .action-tile {
    min-height: 0;
    height: 100%;
    padding: 18px;
  }

  /* Keep the canvas continuous at every browser zoom level: no fixed-size image island. */
  html,
  body { background-color: #10345d; }

  .app-bg {
    width: 100vw;
    min-width: 100%;
    height: 100vh;
    min-height: 100%;
    background-position: center center;
    background-size: cover, cover;
  }
}

/* Reviews: isolated visual system built from the cabinet's existing tokens. */
.reviews-lead { max-width:560px; margin:8px auto 0; color:var(--muted); font-size:12px; line-height:1.55; }
.reviews-compose { overflow:hidden; border-radius:var(--radius-xl); padding:clamp(17px,3vw,25px); }
.reviews-compose::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 100% 0,rgba(111,89,255,.2),transparent 36%),radial-gradient(circle at 0 100%,rgba(69,233,255,.1),transparent 34%); }
.reviews-compose > * { position:relative; z-index:1; }
.reviews-compose-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.reviews-compose-icon { width:44px; height:44px; display:grid; place-items:center; border:1px solid rgba(80,222,255,.43); border-radius:15px; color:#071421; background:linear-gradient(135deg,var(--lime),var(--cyan),#78a8ff); box-shadow:0 0 25px rgba(69,233,255,.22); font-size:19px; }
.reviews-compose-head b,.reviews-compose-head small { display:block; }
.review-author-choice { display:grid; gap:6px; margin:0 0 12px; padding:11px 12px; border:1px solid rgba(99,192,255,.19); border-radius:15px; background:rgba(5,16,35,.4); }
.review-author-choice label { color:#dcecff; font:700 11px var(--font-display); }
.review-author-choice input { width:100%; min-height:37px; border:1px solid rgba(103,174,233,.26); border-radius:10px; padding:0 11px; color:#eef8ff; background:rgba(2,9,21,.62); outline:none; }
.review-author-choice input:focus { border-color:rgba(71,225,255,.7); box-shadow:0 0 0 3px rgba(69,233,255,.08); }
.review-author-choice small { color:var(--muted); font-size:10px; line-height:1.45; }
.reviews-compose-head b { font:800 18px var(--font-display); }
.reviews-compose-head small { margin-top:3px; color:var(--muted); font-size:10px; }
.reviews-toolbar { display:flex; gap:7px; margin-bottom:8px; }
.reviews-toolbar button { width:34px; height:32px; border:1px solid rgba(112,172,230,.26); border-radius:10px; color:#dcecff; background:rgba(255,255,255,.045); transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.reviews-toolbar button:hover,.reviews-toolbar button:focus-visible { transform:translateY(-1px); border-color:rgba(75,222,255,.65); background:rgba(48,191,238,.12); outline:none; }
.review-media-row { display:flex; align-items:center; gap:10px; margin:0 0 9px; color:var(--muted); font-size:10px; }
.review-photo-btn { display:inline-flex; min-height:31px; align-items:center; padding:0 10px; border:1px solid rgba(72,218,255,.35); border-radius:10px; color:#dff7ff; background:rgba(51,196,246,.1); cursor:pointer; }
.review-emoji-panel { display:flex; flex-wrap:wrap; gap:6px; margin:-2px 0 10px; padding:8px; border:1px solid rgba(109,171,235,.21); border-radius:12px; background:rgba(3,11,26,.72); font-size:19px; letter-spacing:3px; cursor:pointer; }
.review-image { display:block; width:100%; margin-top:12px; padding:0; border:0; border-radius:15px; overflow:hidden; background:#071426; cursor:zoom-in; }
.review-image img { display:block; width:100%; max-height:330px; object-fit:cover; }
.reviews-editor { min-height:146px; border:1px solid rgba(106,165,222,.27); border-radius:18px; padding:14px; color:#edf7ff; background:rgba(3,10,23,.6); font-size:13px; line-height:1.6; outline:none; overflow-wrap:anywhere; transition:border-color .2s ease,box-shadow .2s ease; }
.reviews-editor:empty::before { content:attr(data-placeholder); color:#71829d; pointer-events:none; }
.reviews-editor:focus { border-color:rgba(70,224,255,.66); box-shadow:0 0 0 3px rgba(69,233,255,.08),inset 0 1px 0 rgba(255,255,255,.04); }
.reviews-compose-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:11px; }
.reviews-compose-foot span { color:var(--muted-2); font-size:10px; }
.reviews-compose-foot .primary-btn { min-height:41px; }
.reviews-editor-note { min-height:16px; margin:10px 1px 0; color:#a9b8cf; font-size:10px; line-height:1.45; }
.reviews-list { display:grid; gap:11px; }
.review-card { overflow:hidden; border-radius:22px; padding:16px; }
.review-card header { display:flex; align-items:center; gap:10px; }
.review-avatar { width:38px; height:38px; display:grid; place-items:center; border:1px solid rgba(95,216,255,.36); border-radius:13px; color:#071321; background:linear-gradient(145deg,#86ef80,#4ee0e8 53%,#70a9ff); font:800 14px var(--font-display); box-shadow:0 0 18px rgba(76,220,238,.14); }
.review-card header > div { min-width:0; flex:1; }
.review-card header b,.review-card header small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.review-card header b { color:#edf7ff; font:760 13px var(--font-display); }
.review-card header small { margin-top:2px; color:#899bb5; font-size:9px; }
.review-card header i { border:1px solid rgba(125,239,139,.22); border-radius:99px; padding:5px 8px; color:#bff7c5; background:rgba(89,232,139,.07); font-size:8px; font-style:normal; font-weight:800; }
.review-content { margin-top:13px; color:#c7d5e8; font-size:12px; line-height:1.62; overflow-wrap:anywhere; }
.review-content p { margin:0 0 9px; }.review-content p:last-child { margin-bottom:0; }
.review-content h4 { margin:0 0 9px; color:#f0f8ff; font:800 16px var(--font-display); }
.review-content blockquote { margin:8px 0; border-left:2px solid var(--cyan); padding:7px 11px; color:#dbe9f9; background:rgba(74,196,238,.06); }
.review-content pre { margin:8px 0; overflow:auto; border:1px solid rgba(104,154,215,.2); border-radius:12px; padding:10px; color:#b9ecff; background:#061225; font:10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre-wrap; }
.review-content code { border-radius:5px; padding:1px 4px; color:#bdeeff; background:rgba(78,189,245,.11); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.reviews-empty { display:grid; min-height:165px; place-items:center; align-content:center; border-radius:22px; padding:20px; text-align:center; }
.reviews-empty > span { color:var(--cyan); font-size:31px; text-shadow:0 0 22px rgba(69,233,255,.6); }.reviews-empty strong { margin-top:8px; font:760 15px var(--font-display); }.reviews-empty p { max-width:310px; margin:6px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }
.reviews-more { display:block; width:min(100%,300px); margin:14px auto 0; }
.reviews-pagination { display:flex; align-items:center; justify-content:center; gap:10px; margin:15px auto 0; color:var(--muted); font-size:11px; }
.reviews-pagination button { min-width:38px; min-height:34px; border:1px solid rgba(101,185,240,.28); border-radius:10px; color:#eaf6ff; background:rgba(13,34,71,.7); }
.reviews-pagination button:disabled { opacity:.4; }
.reviews-admin { margin-top:22px; padding:18px; border-radius:20px; }
.reviews-admin h3 { margin:4px 0; font:800 18px var(--font-display); }.reviews-admin p,.reviews-admin small { color:var(--muted); font-size:11px; line-height:1.45; }
.reviews-admin article { display:grid; gap:7px; margin-top:10px; padding:12px; border:1px solid rgba(106,171,233,.19); border-radius:13px; background:rgba(7,19,43,.55); }.reviews-admin article div { display:flex; flex-wrap:wrap; gap:7px; }.reviews-admin button { min-height:31px; padding:0 9px; border:1px solid rgba(97,183,244,.28); border-radius:9px; color:#eaf8ff; background:rgba(39,123,195,.16); font-size:10px; }
.reviews-honesty-btn { margin-top:12px; min-height:34px; padding:0 12px; border:1px solid rgba(113,93,255,.48); border-radius:11px; color:#eaf8ff; background:linear-gradient(90deg,rgba(87,76,236,.23),rgba(57,205,245,.14)); font-size:11px; }
.reviews-modal-overlay { position:fixed; z-index:1400; inset:0; display:grid; place-items:center; overflow-y:auto; overscroll-behavior:contain; padding:20px; background:rgba(0,3,12,.76); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.reviews-honesty-card { position:relative; width:min(600px,100%); max-height:calc(100dvh - 40px); overflow:auto; overscroll-behavior:contain; display:grid; gap:11px; margin:0; padding:22px; border-radius:22px; background:linear-gradient(145deg,rgba(11,24,51,.97),rgba(5,13,31,.98)); box-shadow:0 24px 90px rgba(0,0,0,.72),0 0 50px rgba(78,221,255,.1); }.reviews-honesty-card h3 { margin:0 38px 4px 0; font:800 21px var(--font-display); }.reviews-honesty-card div { display:grid; gap:4px; padding:12px; border:1px solid rgba(82,202,251,.19); border-radius:13px; background:linear-gradient(120deg,rgba(6,18,39,.72),rgba(80,46,145,.12)); }.reviews-honesty-card div:nth-of-type(2n) { border-color:rgba(157,243,104,.18); }.reviews-honesty-card small { color:var(--muted); line-height:1.5; }.reviews-honesty-card > button { position:absolute; top:12px; right:12px; width:32px; height:32px; border:1px solid rgba(146,180,231,.24); border-radius:10px; color:#eaf7ff; background:rgba(12,29,58,.75); font-size:20px; }
.review-card footer { display:flex; justify-content:flex-end; margin-top:10px; }.review-card footer button { border:0; color:#859ab8; background:transparent; font-size:9px; text-decoration:underline; }
.review-admin-nav,.review-admin-filters,.review-admin-tools,.review-admin-actions { display:flex; flex-wrap:wrap; gap:7px; margin:10px 0; }.review-admin-nav button.is-active,.review-admin-filters button.is-active { border-color:var(--cyan); color:#071321; background:linear-gradient(135deg,var(--lime),var(--cyan)); }.review-admin-tools input { min-width:min(100%,280px); flex:1; min-height:36px; border:1px solid rgba(102,176,235,.3); border-radius:10px; padding:0 10px; color:#eef8ff; background:rgba(3,12,28,.7); }.review-admin-card-head { display:flex!important; align-items:center; justify-content:space-between; gap:10px; }.review-admin-card-head span { color:#9eeec0; font-size:9px; }.review-reason { border-left:2px solid #ffb45b; padding-left:8px; color:#ffd5a2!important; }
.review-admin-modal { position:relative; box-sizing:border-box; width:min(760px,100%); max-height:calc(100dvh - 30px); overflow:auto; overscroll-behavior:contain; display:grid; gap:12px; padding:22px; border-radius:22px; }.review-admin-modal h3 { margin:0; }.review-admin-modal label { display:grid; gap:5px; color:#aebed4; font-size:10px; }.review-admin-modal input,.review-admin-modal textarea { box-sizing:border-box; width:100%; border:1px solid rgba(99,181,239,.3); border-radius:11px; padding:10px; color:#eff9ff; background:#061329; }.review-admin-modal textarea { min-height:150px; resize:vertical; }.review-modal-close { position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:10px; color:white; background:#172c4c; }.review-admin-meta { color:#8fa4be; font-size:10px; line-height:1.5; }.review-admin-image { width:100%; max-height:300px; object-fit:contain; border-radius:14px; background:#030b18; }.review-admin-actions .danger { border-color:#ff667e; color:#ffc3cb; }.review-admin-modal details { border:1px solid rgba(96,165,225,.2); border-radius:12px; padding:10px; }.review-admin-modal details p { color:#9fb0c8; font-size:9px; white-space:pre-wrap; }.review-modal-error { min-height:1.2em; margin:0; color:#ffc3cb!important; }
.review-admin-image-button { display:block; width:100%; padding:0; border:0; border-radius:14px; background:transparent; cursor:zoom-in; }.review-user-modal { width:min(650px,100%); }.review-modal-upload { width:max-content; min-height:34px; box-sizing:border-box; padding:9px 12px; border:1px solid rgba(95,212,255,.42); border-radius:10px; color:#eaf8ff!important; background:rgba(39,123,195,.18); cursor:pointer; }.review-remove-photo { display:block!important; color:#ffd5a2!important; }.review-modal-photo { margin:0; color:var(--muted)!important; font-size:11px!important; }.review-edit-preview { display:grid; gap:6px; padding:12px; border:1px solid rgba(96,165,225,.2); border-radius:12px; background:rgba(5,16,36,.62); }.review-edit-preview b { color:#d9f7ff; font-size:11px; }.review-edit-preview p { margin:0; white-space:pre-wrap; color:#c8d8ee!important; }.review-image-overlay { padding:16px; }.review-image-modal { position:relative; box-sizing:border-box; display:grid; place-items:center; width:min(1080px,100%); max-height:calc(100dvh - 32px); padding:42px 14px 14px; border-radius:20px; background:rgba(4,12,28,.98); }.review-image-modal img { display:block; max-width:100%; max-height:calc(100dvh - 88px); object-fit:contain; border-radius:12px; }

@media (max-width:480px) {
  .bottom-nav { width:calc(100% - 12px); gap:2px; padding:5px; border-radius:20px; }
  .nav-btn { min-height:55px; border-radius:15px; font-size:8px; }
  .nav-icon { width:20px; height:20px; }
  .reviews-compose-foot { align-items:stretch; flex-direction:column; }
  .reviews-compose-foot .primary-btn { width:100%; }
  .reviews-modal-overlay { place-items:end center; padding:0; }
  .reviews-honesty-card,.review-admin-modal { width:100%; max-height:min(88dvh,760px); border-radius:24px 24px 0 0; padding:20px 16px max(20px,env(safe-area-inset-bottom)); }
}