:root{--bg:#07111f;--panel:#0c1728;--panel2:#101e32;--line:#1d2c43;--text:#ecf4ff;--muted:#8da1bb;--accent:#4b8cff;--accent2:#6aa2ff;--green:#2bd47d;--red:#ff5d68;--orange:#ffb14a;--shadow:0 20px 60px rgba(0,0,0,.32);--radius:18px}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:radial-gradient(circle at top right,#10284a 0,#07111f 38%,#050b14 100%);color:var(--text)}a{color:inherit;text-decoration:none}button,input,select{font:inherit}.login-page{min-height:100vh;display:grid;place-items:center;padding:28px;background:radial-gradient(circle at 25% 20%,rgba(75,140,255,.22),transparent 28%),radial-gradient(circle at 80% 70%,rgba(43,212,125,.08),transparent 24%),#06101d}.login-shell{width:min(1050px,100%);display:grid;grid-template-columns:1.15fr .85fr;background:rgba(9,20,35,.9);border:1px solid rgba(255,255,255,.08);border-radius:28px;overflow:hidden;box-shadow:0 35px 100px rgba(0,0,0,.45)}.login-hero{padding:64px;background:linear-gradient(145deg,rgba(75,140,255,.2),rgba(6,16,29,.15));min-height:590px;display:flex;flex-direction:column;justify-content:space-between}.logo{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.4px;font-size:19px}.logo-mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#6aa2ff,#356fe0);display:grid;place-items:center;box-shadow:0 10px 30px rgba(75,140,255,.35)}.logo-mark:before{content:'R';font-weight:900;color:white}.hero-copy h1{font-size:48px;line-height:1.06;margin:0 0 18px;max-width:600px}.hero-copy p{font-size:18px;color:#aabbd1;line-height:1.6;max-width:560px}.hero-pills{display:flex;flex-wrap:wrap;gap:10px}.hero-pills span{border:1px solid rgba(255,255,255,.1);padding:9px 12px;border-radius:999px;color:#b8c8dd;background:rgba(255,255,255,.035);font-size:13px}.login-form-wrap{padding:64px 52px;display:flex;align-items:center}.login-card{width:100%}.login-card h2{font-size:30px;margin:0 0 9px}.login-card .sub{color:var(--muted);margin:0 0 30px}.field{margin-bottom:17px}.field label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#91a4bd;font-weight:700;margin:0 0 8px}.input,select.input{width:100%;height:48px;border:1px solid var(--line);background:#091523;color:var(--text);border-radius:12px;padding:0 14px;outline:none;transition:.2s}.input:focus{border-color:#4b8cff;box-shadow:0 0 0 3px rgba(75,140,255,.12)}.btn{border:1px solid var(--line);background:#101d30;color:#dce9f9;border-radius:11px;padding:10px 14px;cursor:pointer;font-weight:700;display:inline-flex;align-items:center;gap:8px;justify-content:center}.btn:hover{background:#15263d}.btn.primary{background:linear-gradient(135deg,#4b8cff,#3776e8);border-color:#4b8cff;color:white;box-shadow:0 10px 25px rgba(75,140,255,.22)}.btn.danger{border-color:rgba(255,93,104,.35);background:rgba(255,93,104,.1);color:#ffabb1}.btn.success{border-color:rgba(43,212,125,.35);background:rgba(43,212,125,.1);color:#72e7a8}.btn.full{width:100%;height:48px}.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;padding:26px 18px;border-right:1px solid rgba(255,255,255,.06);background:rgba(5,13,24,.88);backdrop-filter:blur(18px);display:flex;flex-direction:column}.sidebar .logo{padding:0 9px 28px}.nav{display:flex;flex-direction:column;gap:6px}.nav a{padding:12px 13px;border-radius:11px;color:#9db0c8;font-weight:650;font-size:14px;display:flex;gap:10px;align-items:center}.nav a:hover,.nav a.active{background:#101f34;color:white}.nav a.active{box-shadow:inset 3px 0 #4b8cff}.nav .section{font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:#5f738d;padding:22px 13px 8px}.sidebar-bottom{margin-top:auto;border-top:1px solid rgba(255,255,255,.06);padding:18px 10px 0}.sidebar-bottom .admin{font-weight:700;font-size:14px}.sidebar-bottom .email{color:#7388a2;font-size:12px;margin-top:3px}.sidebar-bottom a{display:block;color:#95a8c0;font-size:12px;margin-top:12px}.content{padding:26px 32px 56px;min-width:0}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.title h1{font-size:27px;margin:0 0 4px}.title p{margin:0;color:#7187a1;font-size:13px}.online-pill{display:flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid var(--line);background:#0b1829;border-radius:999px;color:#a6b8cf;font-size:13px}.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(43,212,125,.09)}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}.card{background:linear-gradient(180deg,rgba(15,30,50,.94),rgba(9,21,36,.96));border:1px solid rgba(255,255,255,.07);border-radius:var(--radius);box-shadow:0 14px 40px rgba(0,0,0,.18)}.metric{padding:20px}.metric .label{color:#7f93ad;font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:750}.metric strong{display:block;font-size:29px;margin-top:9px}.metric small{display:block;color:#69819d;margin-top:6px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}.section-card{padding:20px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.section-head h2{font-size:17px;margin:0}.section-head p{margin:5px 0 0;color:#70869f;font-size:13px}.list-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0;border-top:1px solid rgba(255,255,255,.055)}.list-row:first-of-type{border-top:0}.mainline{font-weight:750;font-size:14px}.subline{color:#7388a2;font-size:12px;margin-top:4px}.right{text-align:right}.badge{display:inline-flex;align-items:center;padding:5px 8px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.07em}.badge.good{background:rgba(43,212,125,.12);color:#64e6a0}.badge.bad{background:rgba(255,93,104,.12);color:#ff8790}.badge.warn{background:rgba(255,177,74,.12);color:#ffc06c}.badge.neutral{background:rgba(120,145,177,.12);color:#a8b8cc}.table-card{overflow:hidden}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th{padding:13px 16px;text-align:left;color:#7187a1;font-size:10px;text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(7,16,29,.45)}td{padding:15px 16px;border-bottom:1px solid rgba(255,255,255,.045);font-size:13px}tbody tr{cursor:pointer}tbody tr:hover{background:rgba(255,255,255,.025)}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.form-grid .span2{grid-column:1/-1}.form-card{padding:22px;max-width:920px}.info-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.info-box{padding:15px;border:1px solid rgba(255,255,255,.06);border-radius:13px;background:#091626}.info-box span{display:block;color:#6f849e;font-size:10px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}.info-box b{font-size:14px;word-break:break-word}.install-box{padding:20px;margin-top:18px;border:1px solid rgba(75,140,255,.22);background:linear-gradient(135deg,rgba(75,140,255,.09),rgba(11,24,41,.9));border-radius:16px}.code{background:#040a12;border:1px solid #18263a;border-radius:12px;padding:14px;color:#b9d2f4;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow:auto;white-space:pre-wrap;word-break:break-all}.alert{padding:12px 14px;border-radius:12px;margin:0 0 16px;font-size:13px}.alert.bad{background:rgba(255,93,104,.11);border:1px solid rgba(255,93,104,.22);color:#ffb1b6}.alert.good{background:rgba(43,212,125,.1);border:1px solid rgba(43,212,125,.2);color:#82efb7}.actions{display:flex;gap:8px;flex-wrap:wrap}.empty{padding:42px 18px;text-align:center;color:#7388a2}.empty strong{display:block;color:#b8c8dc;margin-bottom:5px}.device-conf{display:grid;grid-template-columns:1fr 1fr;gap:16px}.muted{color:#7288a2}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.progress{height:7px;background:#081322;border-radius:999px;overflow:hidden;margin-top:8px}.progress>i{display:block;height:100%;background:linear-gradient(90deg,#4b8cff,#67a6ff);border-radius:999px}.modal{border:1px solid #22334b;background:#0c1829;color:var(--text);border-radius:20px;padding:0;width:min(620px,calc(100% - 28px));box-shadow:var(--shadow)}.modal::backdrop{background:rgba(0,0,0,.7);backdrop-filter:blur(3px)}.modal-inner{padding:22px}.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.modal-head h3{margin:0}.x{background:transparent;border:0;color:#8296af;font-size:24px;cursor:pointer}.footer-note{color:#536b87;font-size:11px;margin-top:25px}@media(max-width:1100px){.cards{grid-template-columns:repeat(2,1fr)}.info-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:820px){.login-shell{grid-template-columns:1fr}.login-hero{display:none}.login-form-wrap{padding:40px 26px}.app{grid-template-columns:1fr}.sidebar{height:auto;position:relative}.nav{display:grid;grid-template-columns:repeat(2,1fr)}.sidebar-bottom{display:none}.content{padding:20px 16px}.grid2{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-grid .span2{grid-column:auto}.device-conf{grid-template-columns:1fr}}@media(max-width:520px){.cards{grid-template-columns:1fr}.info-grid{grid-template-columns:1fr}.topbar{align-items:flex-start;gap:14px;flex-direction:column}}

/* v1.4 professional service analytics */
.eyebrow{font-size:10px;letter-spacing:.16em;color:#6683a7;font-weight:800;margin-bottom:6px}.service-head h2{font-size:22px;margin:0}.live-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0 0 18px}.live-card{padding:16px 17px;border:1px solid rgba(255,255,255,.07);border-radius:15px;background:linear-gradient(180deg,rgba(13,29,49,.98),rgba(8,20,35,.98));box-shadow:0 10px 28px rgba(0,0,0,.14)}.live-card>span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#7088a5;font-weight:800}.live-card strong{font-size:21px;display:block;margin-top:7px}.live-card small{display:block;color:#607896;margin-top:4px;font-size:11px}.service-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:18px}.service-main{min-width:0}.service-side{min-width:0}.sticky-card{position:sticky;top:24px}.chart-card canvas{width:100%;display:block;max-height:260px}.range-tabs{display:flex;gap:5px;background:#081321;border:1px solid #172842;border-radius:10px;padding:4px}.range{border:0;background:transparent;color:#7189a7;border-radius:7px;padding:6px 9px;font-size:11px;font-weight:800;cursor:pointer}.range.active,.range:hover{background:#153050;color:#dceaff}.chart-legend{display:flex;justify-content:flex-end;gap:18px;color:#788eaa;font-size:11px;margin-top:10px}.legend-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px}.legend-dot.rx{background:#4b8cff}.legend-dot.tx{background:#2bd47d}.device-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:22px;padding:14px 0;border-top:1px solid rgba(255,255,255,.055)}.device-row:hover{background:rgba(255,255,255,.015)}.device-ident{display:flex;align-items:center;gap:11px}.status-orb{width:9px;height:9px;border-radius:50%;background:#566b84;flex:none}.status-orb.online{background:#2bd47d;box-shadow:0 0 0 4px rgba(43,212,125,.08)}.status-orb.offline{background:#61738b}.device-live{display:flex;align-items:center;gap:14px;font-size:11px;color:#7287a2}.device-live b{font-size:12px;color:#c8d9ed;margin-left:4px}.device-total{padding-left:14px;border-left:1px solid #1d2d43}.summary-card{margin-top:18px}.summary-card h2{font-size:16px;margin:0 0 10px}.summary-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid rgba(255,255,255,.055);font-size:12px}.summary-row span{color:#7288a3}.summary-row b{text-align:right}.input-suffix{position:relative}.input-suffix .input{padding-right:68px}.input-suffix span{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:11px;color:#7187a2}.field-help{font-size:11px;line-height:1.45;color:#607690;margin-top:7px}.pulse{animation:rvpnPulse .45s ease}@keyframes rvpnPulse{0%{opacity:.45}100%{opacity:1}}@media(max-width:1280px){.live-strip{grid-template-columns:repeat(3,1fr)}.service-layout{grid-template-columns:1fr}.sticky-card{position:static}.service-side{display:grid;grid-template-columns:1fr 1fr;gap:18px}.summary-card{margin-top:0}}@media(max-width:780px){.live-strip{grid-template-columns:1fr 1fr}.service-side{grid-template-columns:1fr}.device-row{grid-template-columns:1fr}.device-live{justify-content:flex-start}}

/* v1.5 dual-direction limits + interactive chart */
.live-strip{grid-template-columns:repeat(6,minmax(0,1fr))}.limit-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.limit-note{margin:-2px 0 15px;padding:10px 12px;border:1px solid rgba(75,140,255,.14);border-radius:10px;background:rgba(75,140,255,.05)}#trafficChart{cursor:crosshair}.chart-card{position:relative}.chart-legend span{display:inline-flex;align-items:center}.live-card strong{white-space:nowrap}@media(max-width:1500px){.live-strip{grid-template-columns:repeat(3,1fr)}}@media(max-width:780px){.limit-grid{grid-template-columns:1fr}.live-strip{grid-template-columns:1fr 1fr}}


/* v1.6 device cards + public IPv4 inventory */
.devices-section{overflow:hidden}.device-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.device-card{display:block;padding:17px;border:1px solid rgba(255,255,255,.085);border-radius:15px;background:linear-gradient(145deg,rgba(10,25,43,.96),rgba(7,18,31,.98));box-shadow:0 9px 26px rgba(0,0,0,.14);transition:.18s ease}.device-card:hover{transform:translateY(-1px);border-color:rgba(75,140,255,.34);box-shadow:0 12px 34px rgba(0,0,0,.22)}.device-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.device-name{font-size:15px;font-weight:800;color:#edf5ff}.device-state-text{font-size:11px;color:#7188a4;margin-top:2px}.device-addresses{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:15px 0 12px}.device-addresses>div{padding:10px 11px;border-radius:10px;background:#071423;border:1px solid rgba(255,255,255,.055)}.device-addresses span,.rate span{display:block;color:#637b98;font-size:9px;letter-spacing:.1em;font-weight:800}.device-addresses b{display:block;margin-top:5px;font-size:12px}.device-rate-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.rate{padding:11px;border-radius:11px;border:1px solid rgba(255,255,255,.055);background:rgba(8,20,35,.72)}.rate b{display:block;font-size:16px;margin-top:5px}.rate.down b{color:#76a7ff}.rate.up b{color:#55e49a}.rate small{display:block;color:#5f7692;margin-top:3px;font-size:10px}.device-card-foot{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:13px;padding-top:12px;border-top:1px solid rgba(255,255,255,.055);font-size:10px;color:#7087a3}.device-open{margin-left:auto;color:#83aef3;font-weight:750}.ip-pool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.ip-pool-card{padding:15px;border:1px solid rgba(255,255,255,.075);border-radius:14px;background:#091727}.ip-pool-card.free{border-color:rgba(43,212,125,.18)}.ip-pool-card.shared{border-color:rgba(75,140,255,.24)}.ip-pool-card.dedicated{border-color:rgba(181,113,255,.27)}.ip-pool-card.disabled{opacity:.52}.ip-pool-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.ip-address{font-size:14px;font-weight:800}.ip-state{font-size:9px;font-weight:850;padding:5px 7px;border-radius:999px;white-space:nowrap}.ip-state.free{background:rgba(43,212,125,.11);color:#64e6a0}.ip-state.shared{background:rgba(75,140,255,.12);color:#77a7ff}.ip-state.dedicated{background:rgba(181,113,255,.12);color:#cda2ff}.ip-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}.ip-meta span{font-size:8px;letter-spacing:.08em;color:#7890ad;border:1px solid #1a2c44;border-radius:7px;padding:4px 6px}.ip-usage{font-size:11px;color:#7d93ae;margin-top:11px;min-height:16px}.ip-actions{display:flex;gap:7px;margin-top:12px}.btn.small{padding:7px 9px;font-size:10px}.ip-add-form{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.055)}.ip-pool-count{font-size:10px;color:#83a0c3;border:1px solid #1d314c;background:#091626;padding:6px 9px;border-radius:999px}.create-vpn-card{max-width:1040px}.ip-picker{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.ip-picker-help{font-size:11px;color:#68809d;margin-top:7px;padding:8px 10px;border-radius:9px;background:rgba(75,140,255,.045);border:1px solid rgba(75,140,255,.11)}@media(max-width:1250px){.ip-pool-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:900px){.device-card-grid,.ip-pool-grid{grid-template-columns:1fr}.ip-add-form{grid-template-columns:1fr}}

/* Royal VPN v1.7: keep the entire right rail together so Service summary never slides behind controls. */
.service-side{align-self:start;min-width:0}
.service-side-sticky{position:sticky;top:24px;display:flex;flex-direction:column;gap:18px;max-height:calc(100vh - 48px);overflow-y:auto;overflow-x:hidden;padding-right:2px;scrollbar-width:thin;scrollbar-color:#243b59 transparent}
.service-side-sticky::-webkit-scrollbar{width:7px}.service-side-sticky::-webkit-scrollbar-thumb{background:#243b59;border-radius:8px}.service-side-sticky .summary-card{margin-top:0;position:relative;z-index:1}.service-side-sticky .section-card{flex:0 0 auto}.sticky-card{position:static!important}
@media(max-width:1280px){.service-side-sticky{position:static;max-height:none;overflow:visible;display:grid;grid-template-columns:1fr 1fr;gap:18px}.service-side{display:block}.summary-card{margin-top:0}}
@media(max-width:780px){.service-side-sticky{display:grid;grid-template-columns:1fr}}

.plan-preview{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:12px;border:1px solid var(--line);border-radius:14px;background:#081423}.plan-preview>div{padding:12px;border:1px solid rgba(255,255,255,.06);border-radius:12px}.plan-preview small,.plan-stat-grid span{display:block;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.08em;margin-bottom:5px}.plan-preview b{font-size:14px}.plan-admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px}.plan-admin-card{padding:20px;transition:.18s}.plan-admin-card:hover{transform:translateY(-2px);border-color:#31517a}.plan-admin-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.plan-admin-head h2{margin:3px 0 16px}.plan-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.plan-stat-grid>div{padding:12px;border:1px solid var(--line);border-radius:12px;background:#081423}.check-row{display:flex!important;align-items:center;gap:10px;text-transform:none!important;letter-spacing:0!important;font-size:14px!important}.check-row input{width:18px;height:18px}.split{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:18px}.eyebrow{color:#70a7ff;font-size:11px;font-weight:900;letter-spacing:.12em;margin-bottom:5px}@media(max-width:900px){.plan-preview{grid-template-columns:1fr 1fr}.split{grid-template-columns:1fr}}

/* V3.1 support center */
.ticket-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px}.ticket-admin-thread{display:flex;flex-direction:column;gap:14px}.ticket-bubble{border:1px solid #183a58;background:#081a2c;border-radius:16px;padding:16px 18px}.ticket-bubble.client{margin-right:7%;border-color:#174b73}.ticket-bubble.admin{margin-left:7%;background:#0b243d;border-color:#2768a4}.ticket-bubble.system{background:#16212d}.ticket-author{display:flex;justify-content:space-between;align-items:center;gap:12px}.ticket-author span{font-size:10px;color:#62aaff;margin-left:8px;font-weight:700}.ticket-author time{font-size:12px;color:#6f8da9}.ticket-bubble p{white-space:pre-wrap;line-height:1.65;margin:12px 0 0}.ticket-reply{border-top:1px solid #18304a;margin-top:20px;padding-top:20px}@media(max-width:1100px){.ticket-layout{grid-template-columns:1fr}}