:root {
  color-scheme: dark;
  --bg:#080b12; --card:#111622; --card2:#171d2b; --text:#f6f7fb;
  --muted:#9ba6b7; --line:rgba(255,255,255,.09); --accent:#7c5cff;
  --accent2:#35d6a3; --danger:#ff6b75; --nav:rgba(10,13,21,.94);
}
* { box-sizing:border-box; }
html { background:var(--bg); }
body {
  margin:0; min-height:100vh; color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:radial-gradient(circle at 90% -8%,rgba(124,92,255,.28),transparent 25rem),
             radial-gradient(circle at -12% 32%,rgba(53,214,163,.1),transparent 25rem),var(--bg);
}
button { font:inherit; color:inherit; }
button:focus-visible { outline:2px solid var(--accent2); outline-offset:2px; }
.app { width:min(100%,760px); min-height:100vh; margin:auto; }
.topbar {
  position:sticky; top:0; z-index:8; display:flex; align-items:center; justify-content:space-between;
  padding:max(12px,env(safe-area-inset-top)) 16px 12px; background:linear-gradient(var(--bg) 75%,transparent);
}
.brand { display:flex; align-items:center; gap:10px; padding:0; border:0; background:none; font-weight:850; letter-spacing:.02em; }
.brand-mark { display:grid; place-items:center; width:36px; height:36px; border-radius:12px; background:var(--text); color:var(--bg); font-weight:950; }
.user-chip { display:flex; align-items:center; gap:7px; max-width:46%; padding:8px 11px; border:1px solid var(--line); border-radius:99px; color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; }
.user-chip span:last-child { overflow:hidden; text-overflow:ellipsis; }
.status-dot { flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:var(--accent2); box-shadow:0 0 12px var(--accent2); }
.view { padding:12px 14px calc(102px + env(safe-area-inset-bottom)); }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:10px; font-size:clamp(31px,8vw,48px); line-height:1.02; letter-spacing:-.05em; }
h2 { margin-bottom:8px; font-size:25px; letter-spacing:-.035em; }
p { color:var(--muted); line-height:1.5; }
.mini-label { color:var(--accent2); font-size:11px; font-weight:900; letter-spacing:.15em; }
.welcome { margin:12px 4px 20px; }
.welcome p { margin-bottom:2px; font-size:14px; }
.welcome h1 { margin:0; }
.preview-note { margin-bottom:12px; padding:10px 12px; border:1px solid rgba(224,180,90,.25); border-radius:13px; background:rgba(224,180,90,.08); color:#e0b45a; font-size:11px; text-align:center; }
.return-offer { display:grid; grid-template-columns:54px 1fr auto; align-items:center; gap:12px; margin-top:14px; padding:14px; border:1px solid rgba(255,189,89,.42); border-radius:20px; background:linear-gradient(135deg,rgba(255,189,89,.15),rgba(124,92,255,.11)); }
.return-offer>span { display:grid; place-items:center; width:54px; height:54px; border-radius:16px; background:#ffbd59; color:#141821; font-size:17px; font-weight:950; }
.return-offer b,.return-offer small { display:block; }
.return-offer small { margin-top:4px; color:var(--muted); font-size:10px; line-height:1.35; }
.return-offer button { padding:10px 12px; border:0; border-radius:12px; background:#fff; color:#121722; font-size:10px; font-weight:900; }
.offer-note { color:#ffcc78; }
.bonus-note { color:var(--accent2); }
.activation-choice { display:grid; gap:8px; margin:16px 0; }
.activation-choice h3 { margin:0 0 3px; }
.activation-choice label { cursor:pointer; }
.activation-choice input { position:absolute; opacity:0; }
.activation-choice span { display:block; padding:13px 14px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.035); }
.activation-choice b,.activation-choice small { display:block; }
.activation-choice small { margin-top:4px; color:var(--muted); font-size:10px; }
.activation-choice input:checked+span { border-color:var(--accent); background:rgba(124,92,255,.14); box-shadow:inset 0 0 0 1px rgba(124,92,255,.22); }
.status-card { padding:21px; border:1px solid var(--line); border-radius:25px; background:linear-gradient(145deg,rgba(25,31,46,.96),rgba(13,17,27,.96)); box-shadow:0 18px 60px rgba(0,0,0,.2); }
.status-card.inactive { display:flex; align-items:center; justify-content:space-between; }
.status-card h2 { margin:5px 0 5px; }
.status-card p { margin:0; font-size:13px; }
.status-orb { display:grid; place-items:center; width:54px; height:54px; border:1px solid var(--line); border-radius:50%; color:var(--muted); font-size:30px; }
.status-row,.account-top { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.live-pill { padding:7px 9px; border-radius:99px; background:rgba(53,214,163,.11); color:var(--accent2); font-size:10px; font-weight:800; white-space:nowrap; }
.usage { margin-top:22px; }
.usage>div:first-child { display:flex; align-items:end; justify-content:space-between; color:var(--muted); font-size:12px; }
.usage strong { color:var(--text); font-size:17px; }
.progress { display:block; width:100%; height:7px; margin-top:10px; overflow:hidden; border:0; border-radius:99px; background:rgba(255,255,255,.08); appearance:none; -webkit-appearance:none; }
.progress::-webkit-progress-bar { border-radius:99px; background:rgba(255,255,255,.08); }
.progress::-webkit-progress-value { border-radius:99px; background:linear-gradient(90deg,var(--accent),#a78bff); }
.progress::-moz-progress-bar { border-radius:99px; background:linear-gradient(90deg,var(--accent),#a78bff); }
.status-meta { display:flex; justify-content:space-between; margin-top:14px; color:var(--muted); font-size:11px; }
.trial-banner { margin-top:14px; padding:21px; border:1px solid rgba(124,92,255,.35); border-radius:25px; background:linear-gradient(135deg,rgba(124,92,255,.2),rgba(17,22,34,.95) 58%); }
.trial-banner h2 { margin:5px 0; }
.trial-banner p { margin-bottom:17px; font-size:13px; }
.primary,.secondary,.ghost {
  min-height:50px; padding:0 18px; border:0; border-radius:15px; cursor:pointer; font-weight:800;
  transition:transform .14s ease,opacity .14s ease;
}
button:active { transform:scale(.98); }
button:disabled { opacity:.45; cursor:not-allowed; }
.primary { width:100%; background:linear-gradient(135deg,var(--accent),#9f79ff); color:white; }
.secondary { background:var(--accent2); color:#061810; }
.ghost { border:1px solid var(--line); background:rgba(255,255,255,.04); }
.section-block { margin-top:31px; }
.section-title { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:0 4px 14px; }
.section-title h2 { margin:4px 0 0; }
.price-pill { padding:8px 10px; border:1px solid var(--line); border-radius:99px; color:var(--muted); font-size:11px; white-space:nowrap; }
.plans-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.plan-card { position:relative; min-height:190px; padding:17px; border:1px solid var(--line); border-radius:22px; text-align:left; background:rgba(17,22,34,.9); cursor:pointer; }
.plan-card.featured { border-color:rgba(124,92,255,.75); background:linear-gradient(150deg,rgba(124,92,255,.21),rgba(17,22,34,.96) 55%); }
.popular { position:absolute; right:12px; top:12px; color:#b9a9ff; font-size:7px; font-weight:950; letter-spacing:.1em; }
.plan-name { display:flex; align-items:center; gap:7px; margin-bottom:25px; color:var(--muted); font-size:13px; }
.plan-name i { font-style:normal; font-size:18px; }
.plan-card>strong { display:block; margin-bottom:5px; font-size:28px; letter-spacing:-.04em; }
.plan-card>small { color:var(--muted); }
.plan-price { display:block; margin-top:18px; padding:11px 7px; border-radius:13px; background:rgba(255,255,255,.07); text-align:center; font-size:11px; font-weight:850; }
.featured .plan-price { background:var(--accent); }
.quick-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:24px; }
.quick-card { display:flex; flex-direction:column; align-items:flex-start; min-height:125px; padding:18px; border:1px solid var(--line); border-radius:21px; background:var(--card); text-align:left; }
.quick-card>span { margin-bottom:16px; color:var(--accent); font-size:22px; }
.quick-card.partner>span { color:var(--accent2); }
.quick-card.ads>span { color:#ffbd59; }
.quick-card b { margin-bottom:4px; }
.quick-card small { color:var(--muted); line-height:1.35; }
.quick-card.wide { grid-column:1/-1; min-height:auto; display:grid; grid-template-columns:36px 1fr; column-gap:10px; }
.quick-card.wide>span { grid-row:1/3; margin:0; }
.next-step { display:grid; grid-template-columns:48px 1fr; gap:14px; margin-top:14px; padding:20px; border:1px solid rgba(124,92,255,.42); border-radius:24px; background:linear-gradient(145deg,rgba(124,92,255,.16),var(--card) 66%); }
.next-step-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:16px; background:rgba(124,92,255,.2); color:#c4b7ff; font-size:23px; }
.next-step h2 { margin:4px 0 5px; font-size:18px; }
.next-step p { margin:0; color:var(--muted); font-size:11px; line-height:1.45; }
.next-step>.primary,.next-step>.ghost,.next-step-feedback { grid-column:1/-1; }
.next-step>.primary,.next-step>.ghost { width:100%; margin-top:3px; }
.next-step-feedback { padding:4px; background:transparent; color:var(--muted); font-size:10px; text-decoration:underline; }
.next-step.urgent { border-color:rgba(255,189,89,.42); background:linear-gradient(145deg,rgba(255,189,89,.12),var(--card) 66%); }
.next-step.urgent .next-step-icon { background:rgba(255,189,89,.15); color:#ffbd59; }
.next-step.compact { border-color:rgba(53,214,163,.3); }
.page-head { margin:18px 4px 24px; }
.page-head h1 { margin:6px 0; }
.page-head p { margin:0; }
.empty-state { padding:34px 24px; border:1px solid var(--line); border-radius:27px; background:var(--card); text-align:center; }
.empty-state p { max-width:360px; margin:0 auto 22px; }
.empty-icon { display:grid; place-items:center; width:64px; height:64px; margin:0 auto 19px; border-radius:20px; background:rgba(124,92,255,.13); color:var(--accent); font-size:30px; }
.error-state .empty-icon { background:rgba(255,107,117,.12); color:var(--danger); }
.account-card { padding:22px; border:1px solid var(--line); border-radius:27px; background:linear-gradient(155deg,rgba(124,92,255,.17),var(--card) 52%); }
.account-top b { font-size:12px; color:var(--muted); }
.traffic-ring { display:grid; place-items:center; width:190px; height:190px; margin:22px auto; border-radius:50%; background:conic-gradient(var(--accent) calc(var(--value)*1%),rgba(255,255,255,.07) 0); position:relative; }
.traffic-ring::after { content:""; position:absolute; inset:12px; border-radius:50%; background:var(--card); }
.traffic-ring div { position:relative; z-index:1; text-align:center; }
.traffic-ring strong { display:block; font-size:28px; }
.traffic-ring span { color:var(--muted); font-size:12px; }
.metrics { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.metrics div { padding:15px; border-radius:16px; background:rgba(255,255,255,.05); }
.metrics small { display:block; margin-bottom:5px; color:var(--muted); }
.action-list { margin-top:16px; overflow:hidden; border:1px solid var(--line); border-radius:22px; background:var(--line); }
.action-list button,.terms-link { display:flex; align-items:center; width:100%; padding:16px; border:0; background:var(--card); text-align:left; }
.action-list button+button { border-top:1px solid var(--line); }
.action-list button>span { display:grid; place-items:center; width:38px; height:38px; margin-right:12px; border-radius:12px; background:rgba(124,92,255,.12); color:var(--accent); }
.action-list button div { flex:1; }
.action-list b,.action-list small { display:block; }
.action-list small { margin-top:3px; color:var(--muted); }
.action-list i { color:var(--muted); font-size:25px; font-style:normal; }
.device-list { display:grid; gap:9px; }
.device-item { display:flex; align-items:center; padding:15px; border:1px solid var(--line); border-radius:19px; background:var(--card); }
.device-icon { display:grid; place-items:center; width:44px; height:44px; margin-right:12px; border-radius:14px; background:rgba(255,255,255,.05); font-size:20px; }
.device-item div { flex:1; }
.device-item b,.device-item small { display:block; }
.device-item small { margin-top:4px; color:var(--accent2); font-size:11px; }
.device-item>button { width:36px; height:36px; border:0; border-radius:12px; background:rgba(255,107,117,.1); color:var(--danger); font-size:21px; }
.empty-inline { padding:29px; border:1px dashed var(--line); border-radius:20px; color:var(--muted); text-align:center; }
.empty-inline span { font-size:30px; }
.empty-inline p { margin:7px 0 0; }
.sticky-action { margin-top:15px; }
.info-card { margin-top:16px; padding:18px; border:1px solid var(--line); border-radius:20px; background:rgba(17,22,34,.72); }
.info-card p { margin:6px 0 0; font-size:12px; }
.period-strip { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:15px; padding:12px 14px; border-radius:14px; background:rgba(124,92,255,.1); color:var(--muted); font-size:11px; }
.period-strip b { color:#c7bbff; text-align:right; }
.period-action { border-color:rgba(124,92,255,.45)!important; background:linear-gradient(135deg,rgba(124,92,255,.16),var(--card))!important; }
.support-card { margin-top:16px; padding:20px; border:1px solid rgba(53,214,163,.25); border-radius:22px; background:linear-gradient(145deg,rgba(53,214,163,.1),var(--card) 70%); }
.support-card h2 { margin:6px 0; }
.support-card p { margin-bottom:16px; font-size:12px; }
.support-card .secondary { width:100%; }
.legal-links { margin-top:0; }
.sheet-note-left { margin:-3px 0 20px; font-size:11px; }
.legal-copy { margin-bottom:22px; }
.legal-copy h3 { margin:20px 0 6px; color:var(--text); font-size:14px; }
.legal-copy p { margin:0; font-size:12px; }
.partner-balance { padding:26px; border:1px solid rgba(53,214,163,.28); border-radius:27px; background:linear-gradient(145deg,rgba(53,214,163,.17),var(--card) 62%); }
.partner-balance span,.partner-balance strong,.partner-balance small { display:block; }
.partner-balance span { color:var(--muted); }
.partner-balance strong { margin:6px 0 10px; font-size:39px; }
.partner-balance small { color:var(--muted); line-height:1.4; }
.partner-warning { margin-top:13px; padding:11px 12px; border:1px solid rgba(255,107,117,.25); border-radius:13px; background:rgba(255,107,117,.08); color:#ff9da5; font-size:11px; line-height:1.4; }
.partner-withdraw { margin-top:18px; }
.stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin-top:10px; }
.stats-grid div { padding:17px; border:1px solid var(--line); border-radius:18px; background:var(--card); }
.stats-grid strong,.stats-grid span { display:block; }
.stats-grid strong { margin-bottom:5px; font-size:20px; }
.stats-grid span { color:var(--muted); font-size:11px; }
.referral-card { margin-top:16px; padding:19px; border:1px solid var(--line); border-radius:22px; background:var(--card); }
.referral-card code { display:block; overflow:hidden; margin:9px 0 15px; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; }
.referral-card>div { display:grid; grid-template-columns:1.2fr 1fr; gap:8px; }
.earn-more { margin-top:16px; }
.earn-more>.mini-label { display:block; margin:0 4px 8px; }
.earn-more>button { display:grid; grid-template-columns:42px 1fr auto; align-items:center; width:100%; padding:13px; border:1px solid rgba(255,189,89,.28); border-radius:18px; background:linear-gradient(135deg,rgba(255,189,89,.1),var(--card)); text-align:left; }
.earn-more>button>span { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:rgba(255,189,89,.14); font-size:20px; }
.earn-more>button div { padding-left:11px; }
.earn-more>button b,.earn-more>button small { display:block; }
.earn-more>button small { margin-top:3px; color:var(--muted); font-size:10px; }
.earn-more>button i { color:var(--muted); font-size:24px; font-style:normal; }
.partner-contact { display:grid; grid-template-columns:40px 1fr auto; align-items:center; width:100%; margin-top:10px; padding:11px 14px; border:1px solid var(--line); border-radius:18px; background:var(--card); color:var(--text); text-align:left; }
.partner-contact-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:13px; background:rgba(125,82,255,.16); font-size:18px; }
.partner-contact b { padding-left:12px; font-size:13px; }
.partner-contact-arrow { color:var(--muted); font-size:24px; }
.payout-history { display:grid; gap:8px; margin-top:18px; }
.payout-history>.mini-label { margin-bottom:2px; }
.payout-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border:1px solid var(--line); border-radius:17px; background:var(--card); }
.payout-item b,.payout-item small { display:block; }
.payout-item small { margin-top:3px; color:var(--muted); font-size:10px; }
.payout-item code { color:#b9a9ff; font-size:10px; }
.terms-link { justify-content:space-between; margin-top:12px; border:1px solid var(--line); border-radius:18px; }
.terms-link span { color:var(--muted); font-size:22px; }
.promo-box { margin:12px 0 20px; }
.promo-box>div { display:grid; grid-template-columns:1fr auto; gap:8px; }
.promo-box input { min-width:0; padding:13px 14px; border:1px solid var(--line); border-radius:14px; outline:none; background:rgba(255,255,255,.04); color:var(--text); text-transform:uppercase; }
.promo-box input:focus { border-color:var(--accent); }
.promo-box button { padding:0 15px; background:rgba(124,92,255,.18); color:#c4b7ff; }
.promo-box>small { display:block; margin-top:7px; color:var(--accent2); font-size:10px; }
.order-summary>div>small { display:block; margin-top:3px; color:var(--accent2); font-size:9px; }
.feedback-list { display:grid; gap:8px; }
.feedback-list button { padding:14px 15px; border:1px solid var(--line); background:var(--card); color:var(--text); text-align:left; }
.steps { display:grid; gap:9px; }
.steps article { display:flex; gap:14px; padding:18px; border:1px solid var(--line); border-radius:20px; background:var(--card); }
.steps article>span { display:grid; flex:0 0 auto; place-items:center; width:37px; height:37px; border-radius:12px; background:var(--accent); font-weight:900; }
.steps p { margin:5px 0 0; font-size:12px; }
.bottom-nav { position:fixed; left:50%; bottom:0; z-index:9; display:grid; grid-template-columns:repeat(4,1fr); width:min(100%,760px); padding:9px 8px max(9px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--nav); backdrop-filter:blur(20px); transform:translateX(-50%); }
.nav-item { display:grid; place-items:center; gap:3px; padding:5px 2px; border:0; background:transparent; color:var(--muted); }
.nav-item>span { font-size:21px; }
.nav-item small { font-size:9px; }
.nav-item.active { color:var(--text); }
.nav-item.active>span { color:var(--accent); }
.loading-card { margin-top:24vh; text-align:center; }
.loader { display:block; width:42px; height:42px; margin:0 auto 20px; border:3px solid rgba(255,255,255,.1); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.sheet-backdrop { position:fixed; inset:0; z-index:19; background:rgba(0,0,0,.62); opacity:0; transition:opacity .22s; }
.sheet-backdrop.open { opacity:1; }
.sheet { position:fixed; left:50%; bottom:0; z-index:20; width:min(100%,760px); max-height:88vh; padding:14px 18px max(24px,env(safe-area-inset-bottom)); overflow:auto; border:1px solid var(--line); border-bottom:0; border-radius:28px 28px 0 0; background:#121722; box-shadow:0 -20px 70px rgba(0,0,0,.48); transform:translate(-50%,105%); transition:transform .22s ease; }
.sheet.open { transform:translate(-50%,0); }
.sheet-handle { width:42px; height:4px; margin:0 auto 20px; border-radius:99px; background:rgba(255,255,255,.16); }
.sheet-close { position:absolute; right:16px; top:17px; width:34px; height:34px; border:0; border-radius:50%; background:rgba(255,255,255,.06); color:var(--muted); font-size:24px; }
.sheet-plan-head { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.sheet-plan-head>span,.sheet-icon { display:grid; place-items:center; width:54px; height:54px; border-radius:17px; background:rgba(124,92,255,.14); font-size:27px; }
.sheet-plan-head small { color:var(--accent2); font-weight:850; letter-spacing:.1em; }
.sheet-plan-head h2 { margin:2px 0 0; }
.sheet-plan-meta { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:22px; }
.sheet-plan-meta div { padding:15px; border-radius:16px; background:rgba(255,255,255,.05); }
.sheet-plan-meta strong,.sheet-plan-meta span { display:block; }
.sheet-plan-meta span { margin-top:3px; color:var(--muted); font-size:11px; }
.sheet h3 { font-size:14px; }
.sheet-lead { margin-bottom:19px; }
.form-field { display:block; margin-bottom:14px; }
.form-field span { display:block; margin:0 0 7px 3px; color:var(--muted); font-size:11px; font-weight:750; }
.form-field input { width:100%; min-height:54px; padding:0 15px; border:1px solid var(--line); border-radius:15px; outline:0; background:rgba(255,255,255,.045); color:var(--text); font:inherit; }
.form-field input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(124,92,255,.12); }
.form-field input::placeholder { color:#646e82; }
.duration-list { display:grid; gap:8px; }
.duration-list button { display:flex; align-items:center; justify-content:space-between; min-height:65px; padding:12px 15px; border:1px solid var(--line); border-radius:17px; background:rgba(255,255,255,.04); text-align:left; }
.duration-list b,.duration-list small { display:block; }
.duration-list small { margin-top:4px; color:var(--accent2); }
.duration-list button>strong { color:#c7bbff; }
.order-summary { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:0 0 22px; }
.order-summary div { padding:15px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.04); }
.order-summary span,.order-summary b { display:block; }
.order-summary span { margin-bottom:5px; color:var(--muted); font-size:11px; }
.payment-methods { display:grid; gap:8px; }
.payment-methods button { display:flex; align-items:center; width:100%; min-height:70px; padding:12px 14px; border:1px solid var(--line); border-radius:17px; background:rgba(255,255,255,.04); text-align:left; }
.payment-methods button>span { display:grid; flex:0 0 auto; place-items:center; width:42px; height:42px; margin-right:12px; border-radius:13px; background:rgba(124,92,255,.14); color:#c7bbff; font-size:19px; font-weight:900; }
.payment-methods button div { flex:1; }
.payment-methods b,.payment-methods small { display:block; }
.payment-methods small { margin-top:4px; color:var(--muted); font-size:11px; }
.payment-methods i { color:var(--muted); font-size:24px; font-style:normal; }
.sheet-note { margin:15px 3px 0; font-size:11px; text-align:center; }
.sheet-icon { margin-bottom:16px; }
.check-list,.terms-list { display:grid; gap:12px; margin:0 0 22px; padding:0; list-style:none; }
.check-list li,.terms-list li { position:relative; padding-left:28px; color:var(--muted); line-height:1.45; }
.check-list li::before { content:"✓"; position:absolute; left:0; color:var(--accent2); font-weight:900; }
.terms-list li::before { content:"•"; position:absolute; left:5px; color:var(--accent); }
.terms-list b { color:var(--text); }
.platform-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.platform-grid button { display:grid; place-items:center; gap:8px; min-height:110px; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.04); }
.platform-grid span { font-size:28px; }
.location-list { display:grid; gap:8px; }
.location-list button { display:grid; grid-template-columns:38px 1fr auto; align-items:center; width:100%; min-height:68px; padding:12px 14px; border:1px solid var(--line); border-radius:17px; background:rgba(255,255,255,.04); text-align:left; }
.location-list button>span { color:var(--accent2); font-size:18px; }
.location-list b,.location-list small { display:block; }
.location-list small { margin-top:4px; color:var(--muted); font-size:10px; }
.location-list i { color:var(--muted); font-size:23px; font-style:normal; }
.sheet-secondary { width:100%; margin-top:9px; }
.link-button { display:grid; place-items:center; width:100%; text-decoration:none; }
.connect-steps { display:grid; gap:10px; margin:0 0 22px; padding-left:22px; color:var(--muted); line-height:1.45; }
.admin-stats { grid-template-columns:repeat(2,1fr); }
.admin-section { display:grid; gap:8px; margin-top:18px; }
.admin-section>.mini-label { margin:0 3px 2px; }
.admin-node { display:grid; grid-template-columns:12px 1fr auto; align-items:center; gap:12px; padding:15px; border:1px solid var(--line); border-radius:17px; background:var(--card); }
.admin-node b,.admin-node small { display:block; }
.admin-node small { margin-top:3px; color:var(--muted); font-size:10px; }
.admin-node>strong { color:var(--muted); font-size:11px; }
.node-dot { width:10px; height:10px; border-radius:50%; background:#758097; box-shadow:0 0 0 4px rgba(117,128,151,.12); }
.node-dot.online { background:var(--accent2); box-shadow:0 0 0 4px rgba(53,214,163,.12); }
.node-dot.degraded { background:#e0b45a; box-shadow:0 0 0 4px rgba(224,180,90,.12); }
.node-dot.offline { background:var(--danger); box-shadow:0 0 0 4px rgba(255,107,117,.12); }
.status-summary { display:flex; align-items:center; gap:13px; padding:19px; border:1px solid var(--line); border-radius:21px; background:var(--card); }
.status-summary>span { display:grid; place-items:center; width:45px; height:45px; border-radius:15px; background:rgba(224,180,90,.12); color:#e0b45a; font-size:21px; }
.status-summary.healthy>span { background:rgba(53,214,163,.12); color:var(--accent2); }
.status-summary b,.status-summary small { display:block; }
.status-summary small { margin-top:4px; color:var(--muted); font-size:10px; }
.server-status-list { display:grid; gap:8px; margin-top:12px; }
.server-status-list article { display:grid; grid-template-columns:12px 1fr auto; align-items:center; gap:12px; padding:15px; border:1px solid var(--line); border-radius:17px; background:var(--card); }
.server-status-list b,.server-status-list small { display:block; }
.server-status-list small { margin-top:3px; color:var(--muted); font-size:10px; }
.server-status-list strong { color:var(--muted); font-size:10px; }
.gift-plan-list { display:grid; gap:8px; }
.gift-plan-list>button { display:grid; grid-template-columns:42px 1fr auto; align-items:center; width:100%; padding:13px; border:1px solid var(--line); border-radius:17px; background:rgba(255,255,255,.04); text-align:left; }
.gift-plan-list>button>span { font-size:24px; }
.gift-plan-list b,.gift-plan-list small { display:block; }
.gift-plan-list small { margin-top:3px; color:var(--muted); font-size:10px; }
.gift-plan-list i { color:var(--muted); font-size:24px; font-style:normal; }
.gift-codes { display:grid; gap:8px; margin-top:22px; }
.gift-codes article { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.04); }
.gift-codes b,.gift-codes small { display:block; }
.gift-codes b { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.04em; }
.gift-codes small { margin-top:4px; color:var(--muted); font-size:9px; }
.gift-codes button { padding:9px 10px; border:0; border-radius:10px; background:rgba(124,92,255,.16); color:#c7bbff; font-size:10px; }
.alert-options { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:14px; }
.alert-options label { cursor:pointer; }
.alert-options input { position:absolute; opacity:0; }
.alert-options span { display:grid; place-items:center; min-height:52px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.04); color:var(--muted); font-weight:800; }
.alert-options input:checked+span { border-color:var(--accent); background:rgba(124,92,255,.15); color:var(--text); }
.toggle-row { display:flex; align-items:center; gap:10px; margin:4px 0 18px; padding:13px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.035); }
.toggle-row input { width:20px; height:20px; accent-color:var(--accent); }
.sheet.busy::after { content:""; position:absolute; inset:0; background:rgba(18,23,34,.45); }
.toast { position:fixed; left:50%; bottom:calc(88px + env(safe-area-inset-bottom)); z-index:30; width:min(calc(100% - 28px),520px); padding:14px 16px; border:1px solid var(--line); border-radius:15px; background:rgba(24,30,44,.97); box-shadow:0 15px 45px rgba(0,0,0,.48); text-align:center; opacity:0; pointer-events:none; transform:translate(-50%,18px); transition:.2s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.toast.error { border-color:rgba(255,107,117,.35); }
@media(max-width:390px){ .view{padding-left:11px;padding-right:11px}.plan-card{padding:14px;min-height:180px}.plan-card>strong{font-size:24px}.plan-price{font-size:10px}.user-chip{max-width:41%} }
@media(min-width:620px){ .plans-grid{grid-template-columns:repeat(4,1fr)}.plan-card{min-height:210px}.quick-grid{grid-template-columns:repeat(3,1fr)}.quick-card.wide{grid-column:auto;display:flex}.quick-card.wide>span{margin-bottom:16px} }
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}