:root{color-scheme:light;font-family:Sora,Segoe UI,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--background: #f2f7ff;--background-strong: #e8f0fb;--surface: rgba(255, 255, 255, .84);--surface-strong: #ffffff;--surface-muted: rgba(239, 246, 255, .86);--surface-border: rgba(30, 73, 124, .1);--text-main: #10233d;--text-muted: #5a6d84;--accent: #1f69d8;--accent-strong: #164a97;--accent-soft: rgba(31, 105, 216, .12);--success: #1f7a66;--success-soft: rgba(31, 122, 102, .12);--danger: #b4554c;--danger-soft: rgba(180, 85, 76, .12);--shadow-lg: 0 24px 72px rgba(21, 53, 98, .12);--shadow-md: 0 14px 36px rgba(21, 53, 98, .08);--radius-xl: 32px;--radius-lg: 24px;--radius-md: 18px}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;color:var(--text-main);background:radial-gradient(circle at top left,rgba(96,160,255,.2),transparent 32%),radial-gradient(circle at 85% 20%,rgba(205,227,255,.72),transparent 24%),linear-gradient(180deg,#f9fbff 0%,var(--background) 55%,#e4eefc 100%)}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(rgba(16,35,61,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(16,35,61,.025) 1px,transparent 1px);background-size:40px 40px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 88%);mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 88%)}button,input,select{font:inherit}button{cursor:pointer}a{color:var(--accent)}.auth-layout,.dashboard-layout,.fullscreen-state{min-height:100vh;padding:clamp(18px,2.5vw,28px)}.auth-layout,.dashboard-layout{display:grid;align-items:stretch}.auth-panel,.dashboard-shell,.status-card{width:min(1240px,100%);margin:0 auto;position:relative;z-index:1}.auth-panel{min-height:calc(100vh - clamp(40px,6vw,72px));display:grid;justify-content:center;align-items:center}.auth-card,.panel-card,.status-card,.overview-card{border:1px solid var(--surface-border);background:var(--surface);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--shadow-lg)}.status-card{padding:clamp(22px,3vw,32px)}.dashboard-header h1,.status-card h1{margin:0;font-size:clamp(2.4rem,5vw,5rem);line-height:.94;letter-spacing:-.065em}.overview-card strong{display:block;font-size:1rem;font-weight:600;letter-spacing:-.03em;margin-bottom:6px}.overview-card p,.device-summary{margin:0;color:var(--text-muted)}.auth-card,.panel-card{border-radius:32px;padding:clamp(20px,2.6vw,28px)}.auth-card{width:min(560px,100%);display:grid;align-content:center;min-height:min(680px,100%)}.segmented-control{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:6px;border-radius:20px;background:#10233d0d;margin-bottom:20px}.segment{border:0;border-radius:16px;padding:14px 16px;background:transparent;color:var(--text-muted);transition:background-color .18s ease,color .18s ease,transform .18s ease}.segment.active{background:var(--surface-strong);color:var(--text-main);transform:translateY(-1px);box-shadow:0 8px 20px #15356214}.form-grid{display:grid;gap:14px}.inline-actions{display:grid;gap:10px}.field{display:grid;gap:8px}.field span,.eyebrow,.overview-label{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}.eyebrow{margin:0;color:var(--accent);font-weight:700}.field input,.field select{width:100%;border:1px solid rgba(31,105,216,.12);background:#ffffffd1;border-radius:var(--radius-md);padding:13px 15px;color:var(--text-main);outline:none;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease}.field select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:46px;cursor:pointer;background-image:linear-gradient(180deg,#ffffffeb,#f1f7ffe6),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 5.25L7 9.25L11 5.25' stroke='%23164a97' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat,no-repeat;background-position:0 0,calc(100% - 16px) 50%;background-size:100% 100%,14px 14px;box-shadow:inset 0 1px #ffffff8c}.field select:hover{border-color:#1f69d838;background-image:linear-gradient(180deg,#fffffff5,#ecf4fff5),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 5.25L7 9.25L11 5.25' stroke='%23164a97' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}.field input:focus,.field select:focus{border-color:#1f69d861;box-shadow:0 0 0 4px #1f69d81a;background:#fff}.field select:focus{background-image:linear-gradient(180deg,#fff,#f4f9ff),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 5.25L7 9.25L11 5.25' stroke='%23164a97' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}.primary-button,.secondary-button,.danger-button,.ghost-button{min-height:52px;border:0;border-radius:var(--radius-md);padding:14px 18px;transition:transform .16s ease,opacity .16s ease,background-color .16s ease,border-color .16s ease}.primary-button:hover,.secondary-button:hover,.danger-button:hover,.ghost-button:hover{transform:translateY(-1px)}.primary-button:disabled,.secondary-button:disabled,.danger-button:disabled,.ghost-button:disabled{cursor:not-allowed;opacity:.6;transform:none}.primary-button{background:var(--accent);color:#f6fbf8}.secondary-button{background:#10233d0f;color:var(--text-main)}.danger-button{background:var(--danger-soft);color:var(--danger)}.ghost-button{background:#ffffff85;color:var(--text-main);border:1px solid rgba(31,105,216,.12)}.text-button{border:0;padding:0;background:transparent;color:var(--text-muted);text-align:left}.feedback{margin:12px 0 0;padding:12px 14px;border-radius:var(--radius-md)}.feedback.error{background:var(--danger-soft);color:var(--danger)}.feedback.success{background:var(--success-soft);color:var(--success)}.muted-text{color:var(--text-muted)}.dashboard-shell{display:grid;gap:16px}.dashboard-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.dashboard-heading-block{display:grid;gap:6px}.dashboard-heading-block h1{max-width:none}.dashboard-subtitle{margin:0}.dashboard-top-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(320px,.95fr);gap:16px;align-items:start}.dashboard-top-left{display:grid;gap:12px}.overview-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.overview-card{border-radius:28px;padding:16px 18px}.overview-label{display:block;color:var(--text-muted);margin-bottom:8px}.overview-card strong{margin-bottom:4px;font-size:clamp(1.55rem,2.6vw,2.2rem)}.server-status-panel{display:grid;gap:8px}.server-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.server-card{border:1px solid rgba(31,105,216,.08);border-radius:18px;background:#ffffffbd;padding:11px 12px}.dashboard-grid{display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);gap:16px;align-items:start}.sidebar-stack{display:grid;gap:16px}.sticky-card{position:sticky;top:24px}.panel-heading{display:grid;gap:5px;margin-bottom:14px}.panel-heading h2,.empty-state h3,.device-card h3{margin:0;letter-spacing:-.04em}.devices-panel{min-height:100%}.billing-panel{display:grid;gap:10px}.tariff-panel{display:grid;gap:6px}.billing-panel.panel-card,.tariff-panel.panel-card{padding:16px 18px}.billing-panel.panel-card{padding:20px}.billing-panel .panel-heading,.tariff-panel .panel-heading{gap:4px;margin-bottom:10px}.billing-chip{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:999px;background:#10233d0d;color:var(--text-muted);font-size:.92rem}.billing-chip.active{background:var(--accent-soft);color:var(--accent-strong)}.billing-chip.accent{background:#1f69d824;color:var(--accent-strong)}.balance-card{display:grid;gap:10px;border:1px solid rgba(31,105,216,.08);border-radius:24px;background:linear-gradient(180deg,#ffffffeb,#f1f7ffdb);padding:14px 16px}.balance-management-card{grid-template-columns:1fr;align-items:start;gap:10px;padding:0;border:0;border-radius:0;background:transparent}.balance-summary{display:grid;gap:2px;padding-bottom:12px;border-bottom:1px solid rgba(31,105,216,.08)}.tariff-card{display:grid;gap:8px;padding:12px 14px;border:1px solid rgba(31,105,216,.08);border-radius:16px;background:#ffffffc7;align-content:start}.tariff-card p{margin:0;color:var(--text-muted);line-height:1.35}.balance-card strong{display:block;margin:2px 0 4px;font-size:clamp(1.4rem,2.2vw,1.8rem);letter-spacing:-.05em}.balance-card p{margin:0;color:var(--text-muted);line-height:1.35}.compact-balance-actions{display:grid;justify-items:stretch;gap:10px}.top-up-form{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px}.top-up-field{gap:6px}.top-up-input-wrap{position:relative}.top-up-input-wrap input{padding-right:40px}.top-up-presets{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.top-up-preset{min-height:34px;justify-content:center;padding:0 10px;border:1px solid rgba(31,105,216,.08);font-size:.82rem}.top-up-currency{position:absolute;top:50%;right:14px;transform:translateY(-50%);color:var(--text-muted);font-weight:600;pointer-events:none}.compact-button{min-height:40px;padding:8px 12px}.payment-link-card{display:grid;gap:8px;padding:10px 12px;border:1px solid rgba(31,105,216,.08);border-radius:14px;background:#ffffffbd}.billing-panel .balance-summary p{max-width:40ch}.billing-panel .overview-label,.tariff-panel .overview-label{margin-bottom:4px}.tariff-card .billing-chip{justify-self:start}.payment-link-label{color:var(--text-muted);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}.payment-link{color:var(--accent-strong);font-size:.83rem;line-height:1.3;overflow-wrap:anywhere;text-decoration:none}.payment-link:hover{text-decoration:underline}.payment-link-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.compact-link-button{min-height:40px;padding:8px 12px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.empty-state{border:1px dashed rgba(31,105,216,.16);border-radius:26px;padding:24px;background:var(--surface-muted)}.device-list{display:grid;gap:10px}.device-card{border:1px solid rgba(31,105,216,.1);border-radius:24px;padding:14px 16px;background:#ffffffb8;box-shadow:var(--shadow-md)}.device-card-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.device-card-header{display:grid;gap:4px}.device-title-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:2px}.status-badge{display:inline-flex;align-items:center;border-radius:999px;padding:6px 12px;font-size:.76rem;font-weight:600}.status-badge.active{color:var(--accent-strong);background:#1f69d81f}.status-badge.paused{color:var(--danger);background:var(--danger-soft)}.status-badge.maintenance{color:#8c6a18;background:#c99e2a29}.status-badge.server-online{color:var(--accent-strong);background:#1f69d81f}.device-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}.device-actions-expanded{margin-bottom:10px}.device-summary{margin:0;max-width:52ch;font-size:.94rem}.device-card-details{margin-top:10px}.device-card-collapsed-meta{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:8px;font-size:.92rem}.traffic-card{display:grid;gap:10px;border:1px solid rgba(31,105,216,.08);border-radius:22px;background:#f0f7ffc7;padding:12px 14px}.traffic-card-top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}.traffic-card-top strong{display:block;margin-top:2px;font-size:1.05rem;letter-spacing:-.04em}.traffic-badge{display:inline-flex;align-items:center;justify-content:center;min-width:50px;min-height:32px;padding:0 10px;border-radius:999px;background:#1f69d81f;color:var(--accent-strong);font-weight:600}.traffic-bar{position:relative;overflow:hidden;width:100%;height:10px;border-radius:999px;background:#10233d14}.traffic-bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#1f69d8,#67a8ff)}.traffic-footnote{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.status-card{margin:auto;border-radius:36px}.guide-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;padding:20px;background:#0c192b47;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.guide-modal{width:min(720px,100%);border:1px solid var(--surface-border);border-radius:30px;background:#ffffffeb;box-shadow:var(--shadow-lg);padding:20px}.guide-modal-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}.guide-modal h2{margin:0 0 4px;letter-spacing:-.04em}.guide-steps{margin:0;padding-left:20px;display:grid;gap:10px}.guide-steps li{padding-left:4px}.guide-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.server-card-top{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:8px}.server-card-heading{display:grid;gap:2px}.server-card-heading h3{margin:0;line-height:1.1}.server-card-heading p{margin:0;line-height:1.15}.server-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:6px}.server-metric{display:grid;grid-template-rows:auto 1fr;align-items:center;gap:3px;min-width:0;min-height:62px;padding:8px 9px;border:1px solid rgba(31,105,216,.08);border-radius:12px;background:#f0f7ffe0;justify-items:center;text-align:center}.server-metric strong{display:block;width:100%;font-size:.94rem;font-weight:600;line-height:1.2;white-space:nowrap}.server-metric-label{display:block;color:var(--text-muted);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase}@media (max-width: 1080px){.dashboard-top-grid,.dashboard-grid{grid-template-columns:1fr}.auth-panel{min-height:auto}.overview-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.server-grid{grid-template-columns:1fr}.sticky-card{position:static}.dashboard-heading-block h1{white-space:nowrap}}@media (max-width: 720px){.auth-layout,.dashboard-layout,.fullscreen-state{padding:14px}.auth-card,.panel-card,.status-card,.overview-card{border-radius:24px}.auth-card,.panel-card,.status-card{padding:18px}.auth-panel{align-items:stretch}.auth-card{align-content:start;min-height:auto}.dashboard-header h1,.status-card h1{max-width:none;font-size:clamp(1.8rem,9vw,2.5rem)}.segmented-control{margin-bottom:18px}.segment{padding:12px 10px}.dashboard-heading-block h1{white-space:normal}.dashboard-header,.device-card-top,.traffic-card-top,.guide-modal-top,.server-card-top{display:grid;grid-template-columns:1fr;align-items:stretch}.overview-strip{grid-template-columns:1fr}.device-actions,.guide-actions,.compact-balance-actions{width:100%}.device-card-collapsed-meta{display:grid;gap:4px}.server-metrics{grid-template-columns:1fr}.device-actions button,.ghost-button,.guide-actions button,.compact-balance-actions button{width:100%}.payment-link-actions{grid-template-columns:1fr}.top-up-form{grid-template-columns:1fr;align-items:stretch}.top-up-presets{grid-template-columns:repeat(2,minmax(0,1fr))}}