:root {
  color-scheme: dark;
  --bg: #071311;
  --bg-soft: #0b1917;
  --surface: rgba(14, 31, 28, .88);
  --surface-2: #10231f;
  --stroke: rgba(164, 216, 202, .12);
  --text: #edf8f4;
  --muted: #8fa9a1;
  --teal: #63e1c0;
  --teal-bright: #82f1d0;
  --mint: #a4f5dc;
  --warning: #e8c77c;
  --danger: #ff8f87;
  --radius: 23px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; min-height: 100vh; color: var(--text); background: radial-gradient(ellipse at 50% -10%, #17342c 0%, #0c1c18 34%, var(--bg) 72%); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--teal-bright); outline-offset: 3px; }
button:disabled { opacity: .46; cursor: not-allowed; }
.ambient { position: fixed; z-index: -1; width: 300px; height: 300px; border-radius: 50%; pointer-events: none; filter: blur(110px); opacity: .11; }
.ambient-one { top: 18%; left: -220px; background: #36e3bd; }
.ambient-two { right: -240px; top: 55%; background: #54ab9a; }
.app-shell { width: min(100%, 530px); min-height: 100vh; margin: 0 auto; padding: 0 22px 114px; }
.topbar { height: 77px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.brand-mark { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; gap: 2px; border: 1px solid rgba(99,225,192,.5); border-radius: 9px; transform: rotate(-8deg); }
.brand-mark span { width: 3px; background: var(--teal); border-radius: 3px; transform: skew(-20deg); }
.brand-mark span:nth-child(1) { height: 9px; opacity: .6; }.brand-mark span:nth-child(2) { height: 15px; }.brand-mark span:nth-child(3) { height: 11px; opacity: .8; }
.brand-name { font-size: 16px; font-weight: 750; letter-spacing: -.055em; }.brand-name span { color: var(--teal); font-weight: 500; }
.sandbox-pill { display: flex; align-items: center; gap: 7px; padding: 7px 11px; color: #a6e9d6; background: rgba(59, 145, 121, .12); border: 1px solid rgba(99,225,192,.2); border-radius: 99px; font-size: 9px; font-weight: 800; letter-spacing: .11em; }
.pulse-dot, .status-dot { width: 6px; height: 6px; border-radius: 99px; background: var(--warning); box-shadow: 0 0 11px rgba(232,199,124,.45); }.pulse-dot { animation: pulse 2s ease infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px rgba(232,199,124,.08); opacity: .75; } }
.page { display: none; animation: page-in .22s ease-out; }.page.active { display: block; }
.api-state-banner { margin: 10px 0 16px; padding: 12px; border: 1px solid rgba(255,143,135,.25); border-radius: 13px; color: #ffc0b8; background: rgba(119,45,42,.16); font-size: 10px; line-height: 1.5; }
@keyframes page-in { from { opacity: .45; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.welcome-row { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 22px; }
.eyebrow, .tiny-label { margin: 0 0 7px; color: #78b9a7; font-size: 9px; font-weight: 800; letter-spacing: .15em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 4px; font-size: clamp(27px, 7vw, 34px); line-height: 1.12; letter-spacing: -.055em; font-weight: 680; }
h1 span:not(.gradient-text) { color: var(--teal-bright); }
h2 { margin: 0; font-size: 17px; line-height: 1.2; letter-spacing: -.025em; font-weight: 650; }
.muted { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.avatar { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(132,233,204,.3); border-radius: 14px; color: var(--mint); background: linear-gradient(145deg, rgba(110,227,193,.17), rgba(16,35,31,.75)); font-size: 15px; font-weight: 750; }
.panel-card { background: linear-gradient(145deg, rgba(17,39,34,.94), rgba(12,27,24,.95)); border: 1px solid var(--stroke); box-shadow: 0 16px 40px rgba(0,0,0,.13), inset 0 1px rgba(255,255,255,.025); }
.subscription-card { position: relative; overflow: hidden; padding: 19px; border-radius: var(--radius); }
.subscription-card::before { position: absolute; content: ""; width: 190px; height: 190px; top: 32px; right: -85px; border: 1px solid rgba(101,225,193,.1); border-radius: 50%; box-shadow: 0 0 0 20px rgba(101,225,193,.025), 0 0 0 42px rgba(101,225,193,.02); pointer-events: none; }
.card-topline, .subscription-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.status-label { display: inline-flex; align-items: center; gap: 7px; color: #bbd2ca; font-size: 10px; font-weight: 650; }.status-dot { background: #687d76; box-shadow: none; }.status-dot.online { background: var(--teal); box-shadow: 0 0 9px rgba(99,225,192,.45); }
.plan-chip { padding: 5px 8px; border-radius: 7px; color: #99b7ac; background: rgba(255,255,255,.035); font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.subscription-main { position: relative; min-height: 115px; display: flex; align-items: center; justify-content: space-between; padding: 12px 0 3px; z-index: 1; }.subscription-main .eyebrow { margin-bottom: 6px; }.subscription-main h2 { font-size: 19px; }
.shield-art { width: 75px; height: 83px; margin-right: 2px; display: grid; place-items: center; color: #a0f5d9; font-size: 27px; background: linear-gradient(155deg, rgba(103,224,189,.19), rgba(35,104,84,.06)); border: 1px solid rgba(125,238,206,.24); border-radius: 39% 39% 48% 48%; clip-path: polygon(50% 0, 94% 17%, 87% 70%, 50% 100%, 13% 70%, 6% 17%); box-shadow: inset 0 0 30px rgba(83,226,184,.08); }
.price { display: flex; align-items: baseline; gap: 4px; }.price strong { font-size: 24px; letter-spacing: -.045em; }.price span { color: var(--muted); font-size: 11px; }
.button { min-height: 40px; padding: 0 15px; border: 0; border-radius: 12px; cursor: pointer; font-size: 11px; font-weight: 750; transition: transform .15s, filter .15s, background .15s; }.button:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }.button:active:not(:disabled) { transform: translateY(0); }
.button-primary { color: #062019; background: linear-gradient(115deg, #8cf0cf, #55d8b3); box-shadow: 0 7px 20px rgba(66,209,167,.15); }.button-secondary { color: #c7eee1; background: rgba(100,219,185,.12); border: 1px solid rgba(100,219,185,.2); }.button-quiet { color: #c8b5ef; background: rgba(148,113,212,.11); border: 1px solid rgba(148,113,212,.22); }.button-wide { width: 100%; min-height: 48px; }
.button-crypto { color: #c8d9ef; background: rgba(112,147,191,.13); border: 1px solid rgba(127,164,207,.24); }
.subscription-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 15px; padding: 11px 12px; border: 1px dashed rgba(113,204,177,.23); border-radius: 11px; background: rgba(0,0,0,.14); }.subscription-link > div { min-width: 0; }.subscription-link .tiny-label { display: block; margin: 0 0 3px; font-size: 7px; }.subscription-link code { display: block; overflow: hidden; color: #a7c6bb; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.not-live { flex: 0 0 auto; color: var(--warning); font-size: 8px; font-weight: 700; }.hidden { display: none !important; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 28px 2px 12px; }.section-heading .eyebrow { margin-bottom: 4px; }.section-heading h2 { font-size: 16px; }.sim-tag { color: #9c86cd; font-size: 8px; font-weight: 800; letter-spacing: .13em; }.compact-heading { margin-top: 27px; }
.payment-grid { display: grid; gap: 9px; }.payment-card { width: 100%; min-height: 65px; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; text-align: left; cursor: pointer; transition: transform .15s, border-color .15s; }.payment-card:hover { transform: translateY(-1px); border-color: rgba(119,221,190,.32); }.payment-icon { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; font-size: 17px; font-weight: 750; }.rub-icon { color: #b9f1dc; background: rgba(85,212,171,.13); }.star-icon { color: #e3c5ff; background: rgba(161,112,224,.16); }.crypto-icon { color: #ccdcf0; background: rgba(112,147,191,.16); }.payment-copy { flex: 1; display: grid; gap: 3px; }.payment-copy strong { font-size: 11px; }.payment-copy small { color: var(--muted); font-size: 9px; }.arrow { color: #79b9a5; font-size: 17px; }
.inline-note { display: flex; align-items: flex-start; gap: 8px; margin: 11px 2px 0; color: #859d94; font-size: 10px; line-height: 1.5; }.note-icon { flex: 0 0 auto; width: 15px; height: 15px; display: grid; place-items: center; border: 1px solid rgba(122,177,157,.45); border-radius: 50%; color: #98c9b6; font-size: 9px; }
.text-button { padding: 4px 0; color: var(--teal); background: transparent; border: 0; font-size: 10px; cursor: pointer; }.text-button span { padding-left: 3px; }.referral-summary { display: flex; align-items: center; gap: 11px; padding: 14px; border-radius: 16px; }.summary-icon { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid rgba(101,225,193,.18); border-radius: 12px; color: var(--teal); background: rgba(70,174,142,.1); font-size: 16px; }.summary-copy { display: grid; gap: 2px; }.summary-copy strong { font-size: 16px; }.summary-copy small { color: var(--muted); font-size: 9px; }.summary-divider { width: 1px; height: 31px; margin: 0 7px; background: var(--stroke); }
.announcements-heading { margin-top: 25px; }.announcement-empty { min-height: 105px; }.announcement-list { display: grid; gap: 9px; }.announcement-card { padding: 14px; border-left: 2px solid rgba(99,225,192,.56); border-radius: 4px 15px 15px 4px; }.announcement-card .tiny-label { display: block; margin-bottom: 7px; font-size: 8px; }.announcement-copy { margin: 0; color: #d5e9df; font-size: 11px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.page-intro { margin: 20px 1px 24px; }.page-intro h1 { font-size: 37px; }.page-intro .muted { max-width: 360px; margin-top: 10px; font-size: 12px; line-height: 1.6; }.gradient-text { color: transparent; background: linear-gradient(100deg, #91f2d3 0%, #55cdaa 55%, #adf4d9 100%); background-clip: text; -webkit-background-clip: text; }
.referral-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding: 17px; border-radius: 19px; }.referral-hero::after { position: absolute; content: ""; top: -45px; right: -37px; width: 125px; height: 125px; border: 1px solid rgba(107,228,192,.1); border-radius: 50%; box-shadow: 0 0 0 18px rgba(107,228,192,.025); }.reward-emblem { width: 48px; height: 48px; display: grid; place-items: center; color: #042119; background: linear-gradient(145deg, #a9f2d5, #52c89e); border-radius: 15px; font-size: 22px; font-weight: 750; box-shadow: 0 7px 22px rgba(69,203,158,.16); }.referral-hero .tiny-label { margin-bottom: 1px; font-size: 8px; }.reward-value { color: var(--mint); font-size: 31px; font-weight: 750; letter-spacing: -.06em; line-height: 1.15; }.reward-value small { font-size: 17px; }.reward-rule { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--stroke); color: #a6bcb2; font-size: 10px; line-height: 1.5; }
.invite-card { padding: 13px; border-radius: 16px; }.invite-url { display: flex; align-items: center; gap: 9px; padding: 10px 11px; border: 1px solid rgba(127,180,158,.12); border-radius: 11px; color: #9fcabc; background: rgba(3,13,11,.3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; overflow-wrap: anywhere; }.link-glyph { flex: 0 0 auto; color: var(--teal); font-family: sans-serif; font-size: 17px; }.invite-card .button { width: 100%; margin-top: 9px; }.tiny-muted { margin: 8px 2px 0; color: #799188; font-size: 9px; }
.metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 11px; }.metric-card { min-height: 99px; display: grid; align-content: start; gap: 5px; padding: 12px; border-radius: 15px; }.metric-icon { color: var(--teal); font-size: 15px; }.metric-card small { color: var(--muted); font-size: 9px; }.metric-card strong { font-size: 17px; letter-spacing: -.04em; }
.payout-banner { display: flex; align-items: center; justify-content: space-between; gap: 11px; margin-top: 12px; padding: 15px; border-color: rgba(134,193,169,.2); border-radius: 18px; }.payout-copy { min-width: 0; }.payout-copy .tiny-label { font-size: 7px; }.payout-copy h2 { color: var(--mint); font-size: 19px; }.payout-copy .muted { max-width: 250px; font-size: 9px; line-height: 1.5; }.payout-banner .button { flex: 0 0 auto; padding: 0 11px; font-size: 9px; }.history-block { margin-top: 3px; }
.empty-state { min-height: 132px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 16px; text-align: center; }.empty-glyph { margin-bottom: 3px; color: #75c9ad; font-size: 21px; }.empty-state strong { font-size: 11px; }.empty-state small { color: var(--muted); font-size: 9px; }
.list-stack { display: grid; gap: 8px; }.list-row { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 11px; border-radius: 14px; }.list-row-icon { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; color: var(--teal); background: rgba(77,181,147,.12); font-weight: 700; }.list-row-copy { flex: 1; min-width: 0; display: grid; gap: 3px; }.list-row-copy strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.list-row-copy small { color: var(--muted); font-size: 8px; }.list-row-value { flex: 0 0 auto; color: #bbd2c8; font-size: 9px; font-weight: 750; }.positive-value { color: var(--teal-bright); }.muted-value { color: #a998ca; }.order-heading { margin-top: 25px; }
.sandbox-tools { margin-top: 18px; overflow: hidden; border-radius: 16px; }.sandbox-tools summary { min-height: 59px; display: flex; align-items: center; gap: 10px; padding: 12px; list-style: none; cursor: pointer; }.sandbox-tools summary::-webkit-details-marker { display: none; }.sandbox-settings-icon { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(170,143,224,.2); border-radius: 11px; color: #c5aaf3; background: rgba(145,111,203,.12); }.sandbox-tools summary > span:nth-child(2) { flex: 1; display: grid; gap: 3px; }.sandbox-tools summary strong { font-size: 10px; }.sandbox-tools summary small { color: var(--muted); font-size: 8px; }.details-chevron { color: #8cac9d; transition: transform .2s; }.sandbox-tools[open] .details-chevron { transform: rotate(180deg); }.sandbox-body { padding: 0 13px 14px; border-top: 1px solid var(--stroke); }.sandbox-body p { margin: 11px 0; color: #9eb2aa; font-size: 9px; line-height: 1.55; }.sim-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.sim-actions .button { padding: 0 8px; font-size: 9px; }.reset-button { display: block; margin: 11px auto 0; padding: 5px 9px; color: #e09e98; background: transparent; border: 0; font-size: 9px; cursor: pointer; }
.announcement-editor { margin-top: 17px; padding-top: 14px; border-top: 1px solid var(--stroke); }.announcement-editor > .tiny-label { display: block; margin-bottom: 8px; font-size: 8px; }.announcement-editor textarea { width: 100%; min-height: 92px; resize: vertical; padding: 11px; border: 1px solid rgba(143,193,170,.18); border-radius: 11px; color: var(--text); background: rgba(4,15,12,.65); font: inherit; font-size: 10px; line-height: 1.55; }.announcement-editor textarea::placeholder { color: #688178; }.announcement-editor-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 7px; }.announcement-editor-meta small { color: #7f968c; font-size: 8px; }.announcement-editor-meta .button { min-height: 34px; }.announcement-preview { margin-top: 11px; padding: 12px; border: 1px solid rgba(102,218,182,.19); border-radius: 12px; background: rgba(55,123,99,.08); }.announcement-preview .tiny-label { display: block; margin-bottom: 7px; color: #80cdb1; font-size: 7px; }.announcement-preview p { margin: 0 0 11px; color: #d4e9df; font-size: 10px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }.announcement-preview .button { width: 100%; }.announcement-sandbox-note { margin-bottom: 0 !important; color: #8ca99b !important; font-size: 8px !important; }
.balance-card { position: relative; overflow: hidden; padding: 20px; border-radius: 22px; }.balance-light { position: absolute; top: -82px; right: -70px; width: 210px; height: 210px; border-radius: 50%; background: radial-gradient(circle, rgba(74,203,159,.18), transparent 68%); pointer-events: none; }.balance-card .tiny-label { position: relative; }.balance-amount { position: relative; margin: 5px 0 23px; font-size: 44px; font-weight: 700; letter-spacing: -.07em; }.balance-amount small { margin-left: 5px; color: #8ecab4; font-size: 21px; }.balance-bottom { position: relative; display: flex; justify-content: space-between; color: #93aaa0; font-size: 9px; }.balance-bottom strong { color: #c8e7d9; font-size: 10px; }.balance-bar { height: 5px; overflow: hidden; margin-top: 9px; border-radius: 5px; background: rgba(255,255,255,.08); }.balance-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #45bb93, #8bebca); transition: width .35s ease; }.balance-bar .progress-0 { width: 0; }.balance-bar .progress-10 { width: 10%; }.balance-bar .progress-20 { width: 20%; }.balance-bar .progress-30 { width: 30%; }.balance-bar .progress-40 { width: 40%; }.balance-bar .progress-50 { width: 50%; }.balance-bar .progress-60 { width: 60%; }.balance-bar .progress-70 { width: 70%; }.balance-bar .progress-80 { width: 80%; }.balance-bar .progress-90 { width: 90%; }.balance-bar .progress-100 { width: 100%; }.balance-hint { position: relative; margin: 7px 0 0; color: #88a095; font-size: 9px; }
.conversion-card { display: flex; align-items: center; gap: 11px; margin-top: 10px; padding: 13px; border-radius: 16px; }.conversion-symbol { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: var(--teal); background: rgba(77,181,147,.12); font-size: 17px; }.conversion-card > div:nth-child(2) { flex: 1; }.conversion-card strong { font-size: 10px; }.conversion-card p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }.pending-chip { padding: 5px 7px; border: 1px solid rgba(232,199,124,.18); border-radius: 7px; color: var(--warning); background: rgba(232,199,124,.07); font-size: 7px; font-weight: 800; letter-spacing: .09em; }.wallet-warning { display: flex; gap: 9px; margin: 12px 2px 17px; padding: 11px; border: 1px solid rgba(232,199,124,.14); border-radius: 12px; color: #b2a989; background: rgba(232,199,124,.045); }.warning-mark { flex: 0 0 auto; width: 17px; height: 17px; display: grid; place-items: center; border: 1px solid rgba(232,199,124,.35); border-radius: 50%; color: #ecd396; font-size: 10px; }.wallet-warning p { margin: 0; font-size: 9px; line-height: 1.55; }.wallet-intro { margin-bottom: 20px; }
.bottom-nav { position: fixed; z-index: 5; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(3, 1fr); width: min(100%, 530px); min-height: 72px; margin: 0 auto; padding: 7px 17px calc(7px + env(safe-area-inset-bottom)); background: rgba(7,19,17,.88); border-top: 1px solid rgba(144,194,175,.12); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }.nav-item { display: grid; justify-items: center; align-content: center; gap: 3px; color: #71867d; background: transparent; border: 0; font-size: 8px; font-weight: 650; cursor: pointer; }.nav-icon { width: 25px; height: 23px; display: grid; place-items: center; border-radius: 9px; font-size: 17px; }.nav-item.active { color: #a4f0d2; }.nav-item.active .nav-icon { color: var(--teal); background: rgba(86,203,164,.12); }
.toast { position: fixed; z-index: 10; right: 20px; bottom: calc(88px + env(safe-area-inset-bottom)); left: 20px; width: min(430px, calc(100% - 40px)); margin: 0 auto; padding: 12px 14px; border: 1px solid rgba(117,218,185,.24); border-radius: 13px; color: #d7f4e7; background: rgba(16,39,32,.96); box-shadow: 0 10px 30px rgba(0,0,0,.35); font-size: 10px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s, transform .2s; }.toast.visible { opacity: 1; transform: translateY(0); }.toast.error { border-color: rgba(255,143,135,.35); color: #ffb0a6; }
.modal { width: min(440px, calc(100% - 32px)); max-width: none; padding: 23px; color: var(--text); background: #10221e; border: 1px solid rgba(153,219,193,.2); border-radius: 23px; box-shadow: 0 28px 90px rgba(0,0,0,.6); }.modal::backdrop { background: rgba(2,9,8,.73); backdrop-filter: blur(7px); }.modal-close-form { position: absolute; top: 12px; right: 12px; }.modal-close { width: 31px; height: 31px; border: 1px solid var(--stroke); border-radius: 10px; color: #96ada3; background: rgba(255,255,255,.03); font-size: 19px; cursor: pointer; }.modal-icon { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 16px; border-radius: 13px; color: var(--teal); background: rgba(79,194,153,.14); font-size: 20px; }.modal .eyebrow { margin-bottom: 5px; }.modal h2 { font-size: 20px; }.modal-description { margin: 7px 0 18px; line-height: 1.6; }.field-label { display: block; margin-bottom: 7px; color: #bbd0c7; font-size: 10px; font-weight: 650; }.wallet-input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid rgba(143,193,170,.2); border-radius: 11px; color: var(--mint); background: #091713; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }.field-help { margin: 6px 0 14px; color: #8da69b; font-size: 9px; }.modal-summary, .network-pending { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--stroke); color: var(--muted); font-size: 10px; }.modal-summary strong { color: var(--mint); font-size: 15px; }.network-pending { padding-top: 7px; padding-bottom: 14px; border: 0; }.network-pending strong { color: var(--warning); font-size: 9px; }

@media (min-width: 600px) {
  .app-shell { padding-right: 28px; padding-left: 28px; }
  .topbar { height: 86px; }
  .welcome-row { margin-top: 18px; }
  .payment-grid { grid-template-columns: 1fr 1fr; }
  .payment-card { min-height: 88px; align-items: flex-start; flex-wrap: wrap; }.payment-copy { flex-basis: calc(100% - 51px); }.payment-card .arrow { display: none; }.crypto-payment { grid-column: 1 / -1; min-height: 68px; align-items: center; }
  .subscription-card { padding: 22px; }
}

@media (max-width: 360px) {
  .app-shell { padding-right: 16px; padding-left: 16px; }
  .payout-banner { align-items: flex-start; flex-direction: column; }.payout-banner .button { width: 100%; }
  .sim-actions { grid-template-columns: 1fr; }
  .page-intro h1 { font-size: 33px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.traffic-card { margin-top:18px; padding:17px; border:1px solid rgba(116,205,169,.15); background:linear-gradient(145deg,rgba(18,34,28,.96),rgba(13,26,22,.98)); }
.traffic-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.traffic-heading .eyebrow { margin-bottom:3px; }
.traffic-heading h2 { margin:0; font-size:18px; }
.traffic-plan { padding:6px 9px; border:1px solid rgba(125,203,157,.18); border-radius:999px; color:#abdcb8; background:rgba(94,164,111,.08); font-size:12px; }
.traffic-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:16px 0 11px; }
.traffic-summary > div { display:grid; gap:3px; }
.traffic-summary strong { color:#e1efe5; font-size:18px; font-weight:670; }
.traffic-summary small { color:#8ca297; font-size:12px; }
.traffic-progress { height:8px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.08); }
.traffic-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#43b98f,#9be7c0); transition:width .3s ease; }
.traffic-progress .progress-0 { width:0; }.traffic-progress .progress-10 { width:10%; }.traffic-progress .progress-20 { width:20%; }.traffic-progress .progress-30 { width:30%; }.traffic-progress .progress-40 { width:40%; }.traffic-progress .progress-50 { width:50%; }.traffic-progress .progress-60 { width:60%; }.traffic-progress .progress-70 { width:70%; }.traffic-progress .progress-80 { width:80%; }.traffic-progress .progress-90 { width:90%; }.traffic-progress .progress-100 { width:100%; }
.traffic-disclaimer { margin:8px 0 10px; color:#a0b4a9; font-size:12px; line-height:1.55; }
.traffic-extra,.traffic-period { display:flex; align-items:center; justify-content:space-between; gap:9px; margin-top:7px; color:#91a69a; font-size:12px; }
.traffic-extra strong,.traffic-period strong { color:#c2d7c6; font-size:12px; text-align:right; }
.trial-button { display:flex; width:100%; justify-content:center; margin:13px 0; font-size:13px; }
.traffic-packs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.traffic-pack { display:flex; flex-direction:column; align-items:stretch; justify-content:space-between; gap:10px; min-width:0; padding:10px; border:1px solid rgba(160,194,173,.11); border-radius:11px; background:rgba(255,255,255,.02); }
.traffic-pack > div { display:grid; min-width:0; gap:3px; }
.traffic-pack strong { color:#dce9df; font-size:13px; white-space:nowrap; }
.traffic-pack small { color:#8fa195; font-size:12px; }
.traffic-pack button { padding:6px 8px; border:1px solid rgba(160,194,173,.12); border-radius:7px; color:#82968a; background:rgba(255,255,255,.02); font:inherit; font-size:12px; white-space:nowrap; }
.traffic-pack button:disabled { opacity:.6; cursor:not-allowed; }
.traffic-pack button:not(:disabled) { border-color:rgba(117,217,168,.2); color:#b8e3c3; background:rgba(92,163,108,.1); cursor:pointer; }
.tiny-muted a { margin-left:4px; color:#a9e5bf; text-decoration:underline; text-underline-offset:3px; }
.service-rules-card { display:flex; align-items:center; gap:13px; width:100%; margin-top:18px; padding:17px; color:var(--text); text-decoration:none; border-radius:18px; }
.rules-symbol { display:grid; place-items:center; flex:0 0 38px; height:38px; border-radius:12px; color:var(--mint); background:rgba(99,225,192,.09); font-size:22px; }
.rules-copy { flex:1; min-width:0; display:grid; gap:4px; }
.rules-copy strong { font-size:14px; font-weight:650; }
.rules-copy small { color:var(--muted); font-size:12px; line-height:1.45; }
.bottom-nav { grid-template-columns:repeat(4,minmax(0,1fr)); }
.nav-item { min-width:0; min-height:48px; font-size:11px; text-decoration:none; }
.traffic-sandbox-tools { margin:13px 0 2px; padding:11px; border:1px solid rgba(131,169,143,.13); border-radius:11px; background:rgba(255,255,255,.018); }
.traffic-sandbox-tools > strong { display:block; margin-bottom:8px; color:#b9cdbd; font-size:13px; }
.traffic-sandbox-tools > small { display:block; margin-top:7px; color:#82968a; font-size:12px; }
.traffic-sandbox-tools .sim-actions { grid-template-columns:repeat(3,minmax(0,1fr)); }
.traffic-sandbox-tools .button { min-height:38px; font-size:12px; }
.traffic-sandbox-tools .plan-selected { border-color:rgba(123,205,152,.3); color:#bfe7c5; background:rgba(91,161,107,.14); }
@media (max-width:520px) { .traffic-card { padding:14px; }.traffic-packs { grid-template-columns:1fr; }.traffic-pack { padding:10px 12px; }.traffic-sandbox-tools .sim-actions { grid-template-columns:1fr; }.traffic-sandbox-tools .button { width:100%; }.traffic-summary { gap:6px; }.traffic-summary strong { font-size:16px; } }
.topbar-tools { display:flex; align-items:center; gap:10px; }
.language-control select { min-height:34px; padding:0 9px; color:#c6ded1; background:#10211d; border:1px solid rgba(117,198,165,.22); border-radius:9px; font:inherit; font-size:12px; }
.language-error { max-width:150px; color:#e7aa9d; font-size:11px; }
@media (max-width:520px) { .topbar-tools { gap:6px; }.language-control select { min-height:32px; padding:0 6px; font-size:11px; }.language-error { display:none; }.sandbox-pill { padding:7px 8px; font-size:8px; } }

/* Home shows essentials; secondary actions open focused panels. */
[hidden] { display:none !important; }
#home .welcome-row { margin-bottom:18px; }
#home .welcome-row .muted { display:none; }
#home .subscription-main { min-height:92px; }
#home .subscription-footer { display:block; }
#home .price { margin-bottom:14px; }
.subscription-actions { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; }
.subscription-actions .button { min-height:44px; font-size:13px; }
#home .traffic-card { margin-top:14px; border-radius:20px; }
.traffic-actions { margin-top:14px; }
.traffic-actions .button { width:100%; min-height:40px; font-size:12px; }
.traffic-details { margin-top:13px; padding-top:10px; border-top:1px solid var(--stroke); }
.traffic-details summary,.purchase-history summary { color:var(--muted); font-size:12px; cursor:pointer; }
.home-footer { display:grid; gap:16px; padding:22px 2px 8px; color:var(--muted); font-size:12px; }
.home-footer a { width:fit-content; color:var(--muted); text-underline-offset:4px; }
.home-footer .orders-list { margin-top:12px; }
.all-news { margin-top:10px; font-size:12px; }
.home-dialog { max-height:calc(100dvh - 32px); overflow-y:auto; padding-top:48px; }
.home-dialog h2 { margin:0 0 14px; }
.home-dialog > .muted { font-size:12px; line-height:1.6; }
.home-dialog .payment-grid { grid-template-columns:1fr; }
.home-dialog .traffic-packs { grid-template-columns:1fr; }
.home-dialog .traffic-pack { flex-direction:row; align-items:center; }
.home-dialog .announcement-card { margin-top:12px; }
@media (max-width:360px) { .subscription-actions { grid-template-columns:1fr; }.subscription-actions .button { width:100%; } }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.subscription-actions .trial-button { width:auto; margin:0; }

.subscription-actions .button { display:grid; place-items:center; padding:8px 12px; line-height:1.4; }

.trial-end-note { margin:0 0 16px; padding:12px; color:#c9e7d9; background:rgba(100,219,185,.07); border:1px solid var(--stroke); border-radius:12px; font-size:12px; line-height:1.6; }
.subscription-actions.trial-ended { grid-template-columns:1fr; }
.connection-steps { display:grid; gap:9px; margin:14px 0; padding-left:22px; color:#c2d4c8; font-size:13px; line-height:1.55; }
.connection-steps li { padding-left:3px; }
.renew-from-traffic { display:block; margin:12px auto 0; }
.connection-clients { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:16px 0 20px; }
.client-choice { display:grid; align-content:center; gap:5px; min-width:0; min-height:70px; padding:10px 6px; border:1px solid var(--stroke); border-radius:12px; color:var(--text); background:var(--bg-soft); font:inherit; cursor:pointer; }
.client-choice strong { font-size:13px; }.client-choice small { color:var(--muted); font-size:10px; overflow-wrap:anywhere; }
.client-choice.active { border-color:var(--teal); background:rgba(99,225,192,.08); }
.connection-device { width:100%; padding:10px; border:1px solid var(--stroke); border-radius:9px; background:var(--bg-soft); color:var(--text); font:inherit; }
.client-download { display:grid; place-items:center; padding:10px; text-decoration:none; text-align:center; }
.router-help { margin-top:16px; padding-top:14px; border-top:1px solid var(--stroke); }
.router-help p { color:var(--muted); font-size:12px; line-height:1.6; }
.router-help-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.router-help-actions .button { display:grid; place-items:center; padding:10px; text-decoration:none; text-align:center; }
#copy-connection { margin-top:12px; font-size:12px; }

.pack-carry-warning { padding:10px; border:1px solid rgba(232,199,124,.3); border-radius:9px; color:#d8c694; font-size:12px; line-height:1.55; }

.client-import {width:100%;margin-top:12px;}
.import-preview {padding:18px;margin:16px 0;border:1px solid var(--border,#36534a);border-radius:16px;background:rgba(97,173,133,.09);}
.import-preview h3 {margin:8px 0 12px;}
.import-preview code {display:block;overflow-wrap:anywhere;white-space:normal;margin:8px 0;font-size:12px;}
.import-preview p {font-size:13px;line-height:1.5;margin-bottom:0;}