:root{--app-height: 100vh;--visual-height: 100vh;color:#e8f0df;background:#0c1510;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%;text-size-adjust:100%}*{box-sizing:border-box}html,body{height:100%}html{background:#0c1510;max-width:100%;overflow-x:hidden;overflow-x:clip;overscroll-behavior:none}body{margin:0;min-width:320px;max-width:100%;min-height:100%;overflow:hidden;overflow-x:clip;overscroll-behavior:none;position:fixed;width:100%}#root{height:100vh;height:100dvh;height:var(--app-height);max-width:100%;overflow:hidden;width:100%}button,input,textarea{font:inherit;-webkit-tap-highlight-color:transparent}button,a{transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease;touch-action:manipulation}a{color:inherit}.shell{background:linear-gradient(180deg,#080d0829,#080d089e 45%,#080d08f5),url(/assets/marsh-dawn-modern-B_PPZGZt.jpg) center / cover no-repeat,linear-gradient(135deg,#111c15,#16271d 46%,#263927);display:grid;grid-template-columns:250px 1fr;height:100vh;height:100dvh;height:var(--app-height);min-height:0;overflow:hidden;position:relative;width:100%}.sidebar{background:#070d08c7;border-right:1px solid rgba(196,216,151,.16);color:#dfead3;height:100vh;height:100dvh;height:var(--app-height);min-height:0;overflow-y:auto;padding:28px 16px;position:sticky;top:0;z-index:1}.brand{display:block;margin-bottom:30px}.brand img{display:block;height:auto;max-height:78px;object-fit:contain;object-position:left center;width:190px}.brandText{color:#f6f1d8;display:block;font-size:24px;font-weight:900;letter-spacing:0;padding:8px 4px}.mainNav{display:grid;gap:8px}.mainNav button{appearance:none;background:transparent;border:1px solid transparent;border-radius:10px;color:#f1f5e5;cursor:pointer;font-size:16px;font-weight:700;overflow:hidden;padding:10px 16px;position:relative;text-align:left;text-decoration:none;width:100%}.mainNav button:before{background:linear-gradient(90deg,#f2b86685,#7f99441a);border-radius:inherit;content:"";inset:0;opacity:0;position:absolute;transform:translate(-14px);transition:opacity .18s ease,transform .18s ease}.mainNav button:hover:before,.mainNav button.active:before{opacity:1;transform:translate(0)}.mainNav button:hover{border-color:#cbe88438;transform:translate(3px)}.mainNav button.active{background:#748b3d94;border-color:#cbe88452;color:#fff}main{height:100%;min-width:0;overflow-x:hidden;overflow-x:clip;overflow-y:auto;padding:34px;position:relative;-webkit-overflow-scrolling:touch;z-index:1}.topbar{align-items:center;display:flex;gap:16px;justify-content:space-between;margin-bottom:22px}.menuButton{background:#e9efcf14;border:1px solid rgba(230,241,190,.22);border-radius:999px;color:#f0ead0;cursor:pointer;display:none;font-size:16px;font-weight:800;min-height:40px;padding:0 16px}.mobileClose{display:none}.topActions{display:flex;flex-wrap:wrap;gap:10px}h1,h2,p{margin:0}h1{color:#f6f1d8;font-size:34px;letter-spacing:0;line-height:1.08}h2{color:#f4ecd2;font-size:17px;line-height:1.2}.topbar p,.panelHeader p,.panelLead{color:#aebc9b;font-size:13px;margin-top:7px}.ghost{background:#e9efcf14;border:1px solid rgba(230,241,190,.22);border-radius:999px;color:#f0ead0;cursor:pointer;font-size:14px;font-weight:700;min-height:40px;padding:0 16px}.ghost:hover,.actions button:hover,.actions a:hover,.credentials button:hover,.profileBox button:hover,.wideLink:hover{background:#f2b866;border-color:#ffd38b;box-shadow:0 10px 24px #f2b8662e;color:#142016;transform:translateY(-1px)}.dangerGhost:hover{background:#c77958;border-color:#e3a082;color:#fff8ed}.error,.toast{border-radius:18px;margin-bottom:16px;padding:12px 14px}.error{background:#692522db;border:1px solid rgba(235,143,125,.42);color:#ffe4dc}.toast{background:#1b3a22e6;border:1px solid rgba(172,220,122,.36);color:#e9ffd6}.toast.warn{background:#5d4820e6;border-color:#ffcf7057;color:#fff0c8}.manualCopy{background:#141f0feb;border:1px solid rgba(212,228,172,.22);border-radius:18px;display:grid;gap:10px;margin-bottom:16px;padding:14px}.manualCopy strong{color:#fff4cf;font-size:14px}.manualCopy textarea{min-height:118px;resize:vertical}.manualCopyActions{display:flex;flex-wrap:wrap;gap:10px}.manualCopyActions button{background:#ebf1d014;border:1px solid rgba(228,238,192,.2);border-radius:999px;color:#e7f0ce;cursor:pointer;flex:1 1 150px;font-size:13px;font-weight:800;min-height:40px;padding:0 14px}.manualCopyActions button:hover{background:#f2b866;border-color:#ffd38b;color:#142016}.metrics{display:grid;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:20px}.metric,.panel{background:#121d17c7;border:1px solid rgba(231,239,214,.16);box-shadow:0 22px 58px #0000003d,inset 0 1px #ffffff0d;backdrop-filter:blur(22px) saturate(145%);-webkit-backdrop-filter:blur(22px) saturate(145%)}.metric{border-radius:18px;overflow:hidden;padding:17px;position:relative}.metric:after{background:linear-gradient(90deg,#f4b95ab8,#799e480a);bottom:0;content:"";height:3px;left:0;position:absolute;right:0}.metric span,.metric small{color:#9caf92;display:block;font-size:12px}.metric strong{color:#fff4cf;display:block;font-size:22px;line-height:1.2;margin:8px 0 2px;overflow-wrap:anywhere}.contentGrid{align-items:start;display:grid;gap:18px;grid-template-columns:minmax(0,1fr) 316px}.singleColumn{grid-template-columns:minmax(0,1fr)}.sideStack{display:grid;gap:18px}.userGrid{grid-template-columns:minmax(0,1fr) 316px}.panel{border-radius:20px;overflow:hidden}.panelHeader{align-items:center;border-bottom:1px solid rgba(212,228,172,.13);display:flex;gap:16px;justify-content:space-between;padding:18px}.search{color:#acbb9d;font-size:12px;max-width:280px;min-width:220px;width:32%}.tableScroll{overflow-x:auto}table{border-collapse:collapse;min-width:880px;width:100%}th{background:#ffffff0e;color:#b4c4a8;font-size:12px;font-weight:700;padding:12px 14px;text-align:left}td{border-top:1px solid rgba(231,239,214,.1);color:#e8efdc;font-size:14px;padding:14px;vertical-align:middle}.clientRow{background:#ffffff0b;outline:1px solid rgba(231,239,214,.08);outline-offset:-1px}.clientRow+.keyRow td{border-top:0}.clientRow:hover{background:#ffffff12}.clientRow td:first-child strong{color:#fff8e4;font-size:15px}td strong,td span{display:block}td span{color:#99aa8f;font-size:12px;margin-top:5px;overflow-wrap:anywhere}tr.created{background:#8ba94e38}.statusPill{border-radius:999px;display:inline-flex;font-size:12px;font-weight:800;min-width:48px;padding:6px 10px;text-align:center;text-transform:uppercase}.statusPill.on{background:#8dbb5d2e;color:#c9f49b}.statusPill.off{background:#c075552e;color:#ffc0a6}.actions{display:flex;flex-wrap:wrap;gap:8px;min-width:240px}.actions button,.actions a,.credentials button,.profileBox button,.wideLink{background:#ebf1d014;border:1px solid rgba(228,238,192,.2);border-radius:999px;color:#e7f0ce;cursor:pointer;font-size:12px;font-weight:800;line-height:1;padding:10px 12px;text-align:center;text-decoration:none}.actions button:disabled,form button:disabled{cursor:wait;opacity:.55;transform:none}.actions .disable{border-color:#e78f6b4d;color:#ffc5ad}.actions .enable{border-color:#bce77d4d;color:#d8ffae}.actions .dangerAction{border-color:#e78f6b57;color:#ffc5ad}.keyRow td{background:#040b0857;padding:10px 14px 16px}.keyList,.serverList{display:grid;gap:10px}.profileKeys{margin-top:16px}.profileActions{margin-top:16px;min-width:0}.profileActionGrid{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:14px}.profileActionCard{align-content:space-between;background:#ebf1d00e;border:1px solid rgba(212,228,172,.14);border-radius:14px;display:grid;gap:14px;min-width:0;padding:12px}.profileActionCard.primaryAction{background:#68934c24;border-color:#bae77d3d}.profileActionCard strong{color:#fff4cf;display:block;font-size:14px;line-height:1.2;margin-bottom:5px}.profileActionCard span{color:#aebc9b;display:block;font-size:12px;line-height:1.35}.profileActionCard button,.profileActionCard a{background:#ebf1d014;border:1px solid rgba(228,238,192,.2);border-radius:999px;color:#e7f0ce;cursor:pointer;font-size:12px;font-weight:800;line-height:1;min-width:0;padding:10px 12px;text-align:center;text-decoration:none}.profileActionCard button:disabled{cursor:wait;opacity:.55}.profileActionCard button:hover,.profileActionCard a:hover{background:#ebf1d024;transform:translateY(-1px)}.profileActionButtons{display:flex;flex-wrap:wrap;gap:8px}.profileActionButtons button,.profileActionButtons a{flex:1 1 104px}.keyItem,.serverCard{background:#09110dbd;border:1px solid rgba(231,239,214,.14);border-radius:14px;display:grid;gap:8px;padding:12px}.keyItem{box-shadow:inset 3px 0 #96bf5e85}.keyItem span,.serverCard span{color:#9caf92;font-size:12px}.serverCard code{background:#060f0a7a;border:1px solid rgba(210,226,152,.16);border-radius:12px;color:#eaf1d8;font-size:12px;overflow-wrap:anywhere;padding:8px}.serverCard textarea{min-height:132px}.compactHeader{margin:-20px -20px 16px}.compactHeader .ghost{flex:0 0 auto}.logStack{display:grid;gap:12px}.logBlock{background:#060f0a6b;border:1px solid rgba(210,226,152,.12);border-radius:16px;display:grid;gap:8px;min-width:0;padding:12px}.logBlock strong{color:#fff4cf;font-size:13px}.logBlock pre{background:#010704b8;border:1px solid rgba(210,226,152,.1);border-radius:12px;color:#dce8ca;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:11px;line-height:1.5;margin:0;max-height:360px;overflow:auto;padding:12px;white-space:pre-wrap;word-break:break-word}.empty{color:#9caf92;padding:38px;text-align:center}.createPanel{padding:20px}form{display:grid;gap:14px;margin-top:16px}label{color:#adbb9e;display:grid;font-size:13px;gap:7px}input,textarea{background:#060f0a9e;border:1px solid rgba(210,226,152,.2);border-radius:16px;color:#f1f7de;font-size:16px;outline:none;padding:11px 12px;-webkit-appearance:none;appearance:none}input:focus,textarea:focus{border-color:#f2b866;box-shadow:0 0 0 4px #f2b8661f}textarea{min-height:92px;resize:vertical}form button{background:linear-gradient(135deg,#91af52,#e0a558);border:0;border-radius:999px;color:#10180f;cursor:pointer;font-size:14px;font-weight:900;height:44px}form button:hover{box-shadow:0 16px 32px #e0a55833;transform:translateY(-1px)}.credentials,.profileBox{border-top:1px solid rgba(212,228,172,.13);display:grid;gap:10px;margin-top:18px;padding-top:16px}.credentials strong{color:#fff4cf;font-size:14px}.credentials code{background:#060f0a7a;border:1px solid rgba(210,226,152,.16);border-radius:16px;color:#eaf1d8;display:block;font-size:12px;overflow-wrap:anywhere;padding:10px}.profileBox textarea{min-height:116px}.vpnInput{min-height:132px}.profileLayout,.guideGrid{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr))}.guideCard{background:#141f0fb8;border:1px solid rgba(212,228,172,.16);border-radius:18px;box-shadow:0 24px 70px #00000038,inset 0 1px #ffffff0a;display:grid;gap:16px;min-width:0;padding:18px}.guideWide{grid-column:1 / -1}.guideHead{align-items:center;display:flex;gap:14px;min-width:0}.guideHead img,.guideIcon{align-items:center;background:#ffffff14;border:1px solid rgba(212,228,172,.16);border-radius:14px;display:flex;flex:0 0 auto;height:54px;justify-content:center;object-fit:contain;padding:8px;width:54px}.guideIcon{color:#fff4cf;font-size:25px;font-weight:900;padding:0}.happIcon{background:linear-gradient(145deg,#6185ff47,#60d4a733)}.defaultVpnIcon{background:linear-gradient(145deg,#f2b86647,#7da9523d);color:#fff8df}.guideHead div{min-width:0}.guideHead p{color:#aebc9b;font-size:13px;margin-top:5px}.guideCard ol{color:#e8efdc;display:grid;gap:10px;line-height:1.45;margin:0;padding-left:20px}.guideCard li{padding-left:2px}.guideCard a{color:#f2b866;font-weight:800;text-decoration:none}.accountRows{display:grid;gap:10px;margin-top:16px}.accountRows div{align-items:center;background:#060f0a61;border:1px solid rgba(210,226,152,.12);border-radius:16px;display:flex;justify-content:space-between;padding:12px}.accountRows span{color:#9caf92;font-size:13px}.accountRows strong{color:#fff4cf;font-size:14px;overflow-wrap:anywhere;text-align:right}.muted{color:#9caf92;font-size:14px;margin-top:12px}.loginPage{align-items:center;background:linear-gradient(180deg,#070c0714,#070c07c7),url(/assets/marsh-dawn-modern-B_PPZGZt.jpg) center / cover no-repeat,linear-gradient(135deg,#0b130e,#243724);display:flex;justify-content:center;height:100vh;height:100dvh;height:var(--app-height);min-height:0;overflow:hidden;padding:24px;position:relative;width:100%}.loginPanel{background:#0d1a12c7;border:1px solid rgba(232,242,213,.2);border-radius:22px;box-shadow:0 28px 80px #00000057;margin:auto;max-width:410px;padding:26px;position:relative;width:100%;z-index:1}.loginBrand{margin-bottom:20px}.loginBrand img{margin:0 auto;max-height:128px;object-fit:contain;width:min(100%,300px)}@media(max-width:1120px){.shell{grid-template-columns:1fr;background:linear-gradient(180deg,#080d082e,#080d08ad 42%,#080d08f5),url(/assets/marsh-dawn-modern-B_PPZGZt.jpg) center / cover no-repeat,linear-gradient(135deg,#111c15,#16271d 46%,#263927)}.sidebar{background:#070d08f7;bottom:0;box-shadow:24px 0 70px #0006;display:block;left:0;max-width:300px;position:fixed;top:0;transform:translate(-105%);transition:transform .18s ease;width:82vw;z-index:5}.menuOpen .sidebar{transform:translate(0)}.menuOpen main{filter:brightness(.42);pointer-events:none}main{padding:20px}.contentGrid,.userGrid{grid-template-columns:1fr}.menuButton{display:inline-flex;align-items:center;justify-content:center}.mobileClose{appearance:none;background:#e9efcf14;border:1px solid rgba(230,241,190,.22);border-radius:999px;color:#f0ead0;cursor:pointer;display:block;font-size:13px;font-weight:800;margin:-12px 0 16px;min-height:38px;width:100%}}@media(max-width:1380px){.contentGrid,.userGrid{grid-template-columns:1fr}}@media(max-width:760px){body{background:#0c1510}.shell,.loginPage{height:100svh;height:var(--app-height);max-width:none;min-height:0;overflow-x:hidden;overflow-x:clip;width:100%}.shell{padding-bottom:env(safe-area-inset-bottom)}main{padding:calc(16px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom));overflow-x:hidden;overflow-x:clip;width:100%}.topbar p,.panelLead,.keyItem span{overflow-wrap:anywhere}.topbar,.panelHeader{align-items:stretch;flex-direction:column}.metrics,.profileLayout,.guideGrid{grid-template-columns:1fr}.topActions{width:100%}.topActions .ghost{flex:1}h1{font-size:26px}.search{min-width:0;max-width:none;width:100%}.tableScroll{margin:0;max-width:100%;overflow:visible}table,thead,tbody,tr,th,td{display:block;min-width:0;width:100%}thead{display:none}tbody{display:grid;gap:12px;padding:12px}.clientRow{background:#ffffff12;border:1px solid rgba(231,239,214,.14);border-radius:16px;display:grid;gap:0;outline:0;overflow:hidden}.clientRow td{align-items:center;border-top:1px solid rgba(231,239,214,.08);display:flex;gap:14px;justify-content:space-between;padding:12px}.clientRow td:first-child{align-items:flex-start;border-top:0;display:grid;gap:4px}.clientRow td:before{color:#9caf92;content:attr(data-label);flex:0 0 auto;font-size:12px;font-weight:800}.clientRow td:first-child:before,.clientRow td.actions:before{display:none}.clientRow td:not(:first-child){text-align:right}.keyRow{margin-top:-12px}.keyRow td{background:transparent;border-top:0;padding:8px 0 0}.keyList{padding:0 12px 12px}.metric,.panel{border-radius:18px}.actions{min-width:0;width:100%}.actions button,.actions a{flex:1 1 138px;min-width:0;overflow-wrap:anywhere}.profileActionGrid{grid-template-columns:1fr}.profileActionButtons button,.profileActionButtons a{flex-basis:120px}.compactHeader{margin:-20px -20px 14px}.logBlock pre{max-height:300px}.loginPanel{max-width:380px;padding:24px}.loginBrand img{width:min(100%,292px)}}