:root {
  color-scheme: dark;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  background: #090b10;
  color: #f7f8fa;
  --bg: #090b10;
  --surface: #11141b;
  --surface-2: #151921;
  --line: #252a35;
  --muted: #9a9faa;
  --quiet: #6d7380;
  --red: #ed3044;
  --red-deep: #9e1629;
  --green: #46df72;
  --amber: #ffa72c;
  --radius: 8px;
  --tg-content-top: env(safe-area-inset-top);
  --tg-content-bottom: env(safe-area-inset-bottom);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--bg); }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; }
.app-shell { width: min(100%, 480px); min-height: 100vh; margin: 0 auto; padding: calc(18px + var(--tg-content-top)) 20px calc(128px + var(--tg-content-bottom)); overflow: hidden; }
.boot-screen, .empty-screen { min-height: calc(100vh - 40px); display: grid; place-content: center; gap: 14px; text-align: center; color: var(--muted); }
.brand-mark { display: grid; place-items: center; width: 56px; height: 56px; margin: auto; border: 1px solid var(--red); border-radius: 50%; color: #fff; font-size: 24px; font-weight: 900; box-shadow: inset 0 0 18px #ed304433; }
.topbar { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 26px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-logo { width: 56px; height: 56px; flex: 0 0 auto; }.brand-logo img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.brand-copy strong { display: block; font-size: 23px; letter-spacing: 0; white-space: nowrap; }.brand-copy strong span { color: var(--red); }.brand-copy small { display: block; color: var(--muted); margin-top: 3px; font-size: 12px; white-space: nowrap; }
.icon-button { display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface); width: 54px; height: 54px; border-radius: var(--radius); position: relative; }.icon-button svg { width: 24px; height: 24px; }.badge { position: absolute; right: 11px; top: 11px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); border: 1px solid var(--surface); }
.page-title { margin: 0 4px 26px; }.page-title h1 { font-size: 35px; line-height: 1.12; margin: 0 0 7px; letter-spacing: 0; }.page-title p { color: var(--muted); margin: 0; font-size: 17px; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }.subscription { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 118px; grid-template-areas: "eyebrow ring" "status ring" "expires expires" "button button"; column-gap: 16px; min-height: 0; padding: 24px; background: linear-gradient(135deg, #12151d 52%, #200d14 100%); }.subscription::after { content: ""; position: absolute; width: 300px; height: 150px; right: -115px; bottom: -65px; background: radial-gradient(ellipse, #d8253938 0%, transparent 68%); pointer-events: none; }.subscription .eyebrow { grid-area: eyebrow; }.subscription .status-row { grid-area: status; }.subscription .expires { grid-area: expires; }.subscription .ring { grid-area: ring; }.subscription .primary { grid-area: button; }.eyebrow { color: var(--muted); margin: 0 0 14px; font-size: 15px; }.status-row { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; min-width: 0; }.status-row h2 { font-size: 26px; line-height: 1.08; margin: 0; }.status-chip { background: #0c3320; color: var(--green); padding: 7px 9px; border-radius: 6px; font-size: 13px; font-weight: 700; white-space: nowrap; }.expires { color: var(--muted); font-size: 15px; margin: 20px 0; }.ring { position: relative; z-index: 1; align-self: center; width: 112px; height: 112px; display: grid; place-content: center; border: 13px solid #262832; border-top-color: var(--red); border-right-color: var(--red); border-radius: 50%; text-align: center; transform: rotate(25deg); }.ring b, .ring small { transform: rotate(-25deg); }.ring b { font-size: 31px; line-height: 1; }.ring small { margin-top: 2px; font-size: 12px; font-weight: 700; }.primary { min-height: 52px; width: 100%; border: 0; border-radius: 8px; background: linear-gradient(100deg, var(--red-deep), var(--red)); color: #fff; font-weight: 750; font-size: 16px; position: relative; z-index: 1; }.primary:active { transform: translateY(1px); }.arrow { float: right; font-size: 27px; line-height: 16px; font-weight: 400; }
.quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }.quick-card { height: 172px; min-height: 0; padding: 13px; display: flex; flex-direction: column; text-align: left; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }.quick-card .round-icon { margin-bottom: 13px; }.round-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; border: 1px solid #383d48; border-radius: 50%; color: var(--red); }.round-icon svg { width: 20px; height: 20px; }.quick-card strong { display: block; font-size: 14px; line-height: 1.2; word-break: normal; overflow-wrap: normal; }.quick-card small { display: block; color: var(--muted); font-size: 11px; line-height: 1.3; margin-top: 6px; word-break: normal; overflow-wrap: normal; }.quick-card em { display: block; margin-top: auto; color: var(--red); font-size: 19px; line-height: 1; font-style: normal; text-align: right; }
.traffic { padding: 22px 0 0; margin-top: 18px; }.section-heading { padding: 0 22px; margin: 0; color: var(--muted); font-size: 16px; }.traffic-row { display: grid; grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1fr); align-items: center; padding: 16px 20px; text-align: center; }.traffic-row > div:first-child { text-align: left; }.traffic-row > div:last-child { text-align: right; }.traffic-value { font-size: 21px; font-weight: 780; white-space: nowrap; }.traffic-label { color: var(--muted); margin-top: 7px; font-size: 12px; }.traffic-label .down, .traffic-label .up { color: var(--red); font-weight: 800; font-size: 19px; vertical-align: -2px; margin-right: 2px; }.mini-ring { width: 92px; height: 92px; margin: auto; display: grid; place-content: center; border: 11px solid #272a34; border-top-color: var(--red); border-right-color: var(--red); border-radius: 50%; font-size: 12px; color: var(--muted); }.mini-ring b { display: block; color: #fff; font-size: 15px; margin-top: 2px; }.update-row { border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; color: var(--muted); font-size: 12px; }.text-action { background: none; border: 0; color: var(--red); padding: 4px; font-weight: 700; }
.server-current { display: flex; align-items: center; gap: 12px; padding: 17px; margin-top: 18px; }.flag { font-size: 29px; line-height: 1; }.server-name { min-width: 0; flex: 1; }.server-name strong { font-size: 16px; }.server-name small { display: block; color: var(--muted); margin-top: 3px; }.ping { color: var(--green); font-size: 15px; font-weight: 700; white-space: nowrap; }.chevron { color: var(--muted); font-size: 24px; }
.referral-banner { width: 100%; min-height: 112px; display: flex; align-items: center; gap: 13px; margin-top: 18px; padding: 16px; border: 1px solid #48202a; border-radius: var(--radius); color: #fff; text-align: left; background: linear-gradient(90deg, #0b0c11ee 0%, #0b0c1188 54%, #0b0c1122 100%), url('./assets/referral-background.png') center / cover; overflow: hidden; }.referral-banner img { width: 58px; height: 58px; border-radius: 7px; object-fit: cover; }.referral-banner span { min-width: 0; flex: 1; }.referral-banner strong { display: block; font-size: 17px; }.referral-banner small { display: block; margin-top: 6px; color: #c7c9d0; font-size: 12px; line-height: 1.35; }.referral-banner b { color: var(--red); font-size: 29px; font-weight: 400; }
.bottom-nav { position: fixed; left: 50%; bottom: max(8px, var(--tg-content-bottom)); transform: translateX(-50%); display: grid; grid-template-columns: repeat(4, 1fr); align-items: stretch; width: min(calc(100% - 24px), 456px); min-height: 66px; padding: 6px 4px; border: 1px solid #202531; border-radius: 16px; background: #12161ef2; backdrop-filter: blur(15px); z-index: 10; }.nav-item { display: grid; justify-items: center; align-content: center; gap: 4px; border: 0; background: none; color: var(--muted); font-size: 11px; }.nav-item svg { width: 22px; height: 22px; }.nav-item.active { color: var(--red); }
.search { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 25px; background: var(--surface); padding: 0 18px; height: 54px; margin-bottom: 17px; }.search svg { color: var(--muted); width: 21px; }.search input { width: 100%; outline: none; background: none; border: 0; color: #fff; font-size: 15px; }.search input::placeholder { color: #737986; }.segmented { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; margin-bottom: 17px; }.segmented button { padding: 10px 4px; border: 0; background: none; color: var(--muted); white-space: nowrap; font-size: 14px; }.segmented button.active { color: var(--red); background: #32141b; font-weight: 700; }.server-list { display: grid; gap: 9px; }.server-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-align: left; }.server-row.current { border-color: var(--red); background: linear-gradient(100deg, #221117, var(--surface)); }.server-row .ping { margin-left: auto; }.star { margin-left: 5px; border: 0; padding: 3px; color: var(--quiet); background: none; }.star.active { color: var(--red); }.star svg { width: 23px; height: 23px; }
.chart-panel { padding: 22px; }.period-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; margin-bottom: 22px; }.period-tabs button { background: none; color: var(--muted); border: 0; padding: 12px 4px; }.period-tabs button.active { background: #3a151d; color: var(--red); }.chart-total { font-size: 30px; font-weight: 800; margin: 8px 0 18px; }.bar-chart { height: 205px; display: flex; align-items: end; gap: 3px; padding: 12px 0 26px; border-bottom: 1px solid var(--line); position: relative; }.bar-chart::before { content: ""; position: absolute; inset: 20px 0 26px; background: repeating-linear-gradient(to bottom, transparent 0 48px, #282c353c 49px 50px); pointer-events: none; }.bar { flex: 1; min-width: 3px; max-width: 14px; background: linear-gradient(#fa4252, #821727); border-radius: 4px 4px 0 0; z-index: 1; }.chart-labels { display: flex; justify-content: space-between; color: var(--quiet); font-size: 11px; margin-top: 7px; }.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 19px; }.metric { border: 1px solid var(--line); border-radius: var(--radius); padding: 15px; }.metric span { color: var(--muted); font-size: 12px; }.metric b { display: block; font-size: 22px; margin: 8px 0; }.metric i { color: var(--green); font-size: 12px; font-style: normal; }.countries { margin-top: 20px; padding: 20px; }.country-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-top: 18px; }.country-bar { grid-column: 2 / 4; height: 5px; background: #262a32; border-radius: 3px; overflow: hidden; }.country-bar i { display: block; height: 100%; background: var(--red); border-radius: inherit; }.country-bytes { color: var(--muted); font-size: 13px; }
.profile-card { display: flex; align-items: center; gap: 14px; padding: 19px; background: linear-gradient(100deg, #151821, #250d15); }.avatar { width: 68px; height: 68px; border-radius: 50%; display: grid; place-content: center; background: #262a33; color: #d3d5db; font-size: 25px; font-weight: 800; flex: 0 0 auto; }.profile-card strong { font-size: 20px; }.profile-card small { display: block; color: var(--muted); margin-top: 7px; }.profile-card .profile-status { margin-left: auto; text-align: right; color: var(--green); font-size: 13px; }.action-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0; }.action-card { min-height: 136px; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-align: left; }.action-card .round-icon { margin-bottom: 18px; }.action-card strong { display: block; font-size: 14px; }.action-card small { display: block; color: var(--muted); margin-top: 6px; font-size: 12px; line-height: 1.35; }.menu-list { margin-top: 20px; }.menu-row { width: 100%; display: flex; align-items: center; gap: 13px; padding: 17px; border: 0; border-bottom: 1px solid var(--line); background: var(--surface); text-align: left; }.menu-row:first-child { border-radius: var(--radius) var(--radius) 0 0; }.menu-row:last-child { border-bottom: 0; border-radius: 0 0 var(--radius) var(--radius); }.menu-row span:nth-child(2) { flex: 1; }.menu-row small { display: block; color: var(--muted); margin-top: 3px; }.menu-row .round-icon { width: 37px; height: 37px; }.menu-row .round-icon svg { width: 18px; }
.modal-backdrop { position: fixed; z-index: 20; inset: 0; display: grid; align-items: end; background: #0009; }.modal { max-height: 86vh; overflow: auto; padding: 24px 20px calc(25px + env(safe-area-inset-bottom)); background: #151922; border-radius: 18px 18px 0 0; }.modal h2 { margin: 0 0 9px; font-size: 23px; }.modal > p { margin: 0 0 20px; color: var(--muted); line-height: 1.5; white-space: pre-line; }.manual-image { display: block; width: 100%; max-height: 220px; margin: 12px 0 18px; object-fit: cover; object-position: top; border: 1px solid var(--line); border-radius: var(--radius); }.secondary-action { min-height: 48px; margin-top: 9px; font-size: 14px; }.text-action svg { width: 18px; height: 18px; margin-left: 5px; vertical-align: -4px; }.close { float: right; border: 0; background: none; color: var(--muted); font-size: 28px; line-height: 20px; }.tariff-list { display: grid; gap: 9px; }.tariff { display: flex; align-items: center; gap: 12px; padding: 17px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-align: left; }.tariff.active { border-color: var(--red); }.tariff b { font-size: 16px; }.tariff small { display: block; color: var(--muted); margin-top: 4px; }.tariff strong { margin-left: auto; color: var(--red); }.device-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 16px 0; }.device-pick button { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 13px; }.device-pick button.active { border-color: var(--red); color: var(--red); }.notice { padding: 12px; margin: 12px 0; border-radius: var(--radius); background: #3c1a1f; color: #ffbdc4; font-size: 14px; }.hidden { display: none !important; }
@media (max-width: 370px) { .app-shell { padding-inline: 13px; }.brand-copy strong { font-size: 21px; }.brand-copy small { font-size: 11px; }.icon-button { width: 48px; height: 48px; }.subscription { grid-template-columns: minmax(0, 1fr) 102px; gap: 12px; padding: 18px; }.ring { width: 98px; height: 98px; border-width: 11px; }.status-row h2 { font-size: 23px; }.status-chip { font-size: 12px; }.quick-card { min-height: 202px; padding: 12px; }.quick-card strong { font-size: 14px; }.quick-card small { font-size: 11px; }.traffic-row { padding-inline: 13px; grid-template-columns: minmax(0, 1fr) 86px minmax(0, 1fr); }.mini-ring { width: 80px; height: 80px; border-width: 9px; }.traffic-value { font-size: 18px; } }