:root{--primary:#16a085;--accent:#19b98c;--bg:#11161e;--sidebar:#1b232d;--surface:#1b222c;--surface-2:#202934;--surface-3:#26313d;--border:#28323e;--text:#f2f5f7;--muted:#8d98a7;--soft:#b9c0c9;--success:#23c483;--info:#4b8fff;--warning:#f2a93b;--danger:#ec5967;--shadow:0 14px 35px rgba(0,0,0,.16);--sidebar-w:255px}

html[data-theme="light"]{--bg:#f3f6f8;--sidebar:#fff;--surface:#fff;--surface-2:#f7f9fa;--surface-3:#eef2f4;--border:#e1e7eb;--text:#18212b;--muted:#71808e;--soft:#4c5965;--shadow:0 10px 35px rgba(24,40,55,.08)}

*{box-sizing:border-box}
html{background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;scroll-behavior:smooth}
body{margin:0;font-size:14px;min-width:280px}
button,input,select,textarea{font:inherit}
button,a{outline:none}
a{color:inherit}
.app-shell{min-height:100vh;display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr)}
.sidebar{position:sticky;top:0;height:100vh;height:100dvh;background:var(--sidebar);border-right:1px solid var(--border);padding:16px 12px;display:flex;flex-direction:column;z-index:50;overflow-y:auto;overscroll-behavior:contain}
.sidebar-scrim{display:none;border:0;padding:0}
.brand{height:48px;display:flex;align-items:center;gap:11px;padding:0 5px 14px;color:var(--text);text-decoration:none;border-bottom:1px solid var(--border)}
.brand img,.brand-mark{width:32px;height:32px;border-radius:9px}
.brand img{object-fit:cover}
.brand-mark{display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-weight:800;box-shadow:0 7px 16px color-mix(in srgb,var(--primary) 25%,transparent)}
.brand strong{font-size:17px}
.side-nav{padding-top:10px}
.side-nav p{margin:17px 10px 7px;color:#71808f;font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:700}
.side-nav a{position:relative;display:flex;align-items:center;gap:11px;min-height:38px;padding:8px 10px;border-radius:9px;text-decoration:none;color:var(--muted);font-size:13px;margin:2px 0;transition:.18s ease}
.side-nav a:hover{color:var(--text);background:var(--surface-2)}
.side-nav a.active{color:var(--text);background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 14%,var(--surface-2)),var(--surface-2));box-shadow:inset 3px 0 var(--accent)}
.side-nav a em{font-size:9px;font-style:normal;margin-left:auto;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);padding:3px 6px;border-radius:8px}
.nav-icon{width:20px;text-align:center;font-size:16px;color:#94a0ae}
.active .nav-icon{color:var(--accent)}
.sidebar-card{margin:18px 3px 12px;padding:13px;border:1px solid color-mix(in srgb,var(--accent) 24%,var(--border));border-radius:11px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 10%,var(--surface)),var(--surface));display:grid;gap:5px;position:relative;overflow:hidden}
.sidebar-card span{font-size:9px;letter-spacing:.12em;color:var(--accent);font-weight:800}
.sidebar-card strong{font-size:11px}
.sidebar-card small{font-family:ui-monospace,monospace;color:var(--muted);font-size:9px}
.sidebar-card i{position:absolute;width:50px;height:50px;border-radius:50%;background:var(--accent);filter:blur(30px);right:-10px;bottom:-20px}
.profile{border-top:1px solid var(--border);margin-top:auto;padding:13px 5px 0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px}
.profile strong,.profile small{display:block;font-size:11px}
.profile small{color:var(--muted);text-transform:capitalize;margin-top:2px}
.avatar{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),#546d86);color:#fff;font-weight:700;font-size:11px}
.avatar.large{width:43px;height:43px;font-size:15px}
.workspace{min-width:0;position:relative}
.topbar{height:64px;position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(15px);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 24px;gap:15px}
.sidebar-toggle{display:none}
.crumb{display:flex;align-items:center;gap:9px;font-size:12px}
.crumb span,.crumb b{color:var(--muted)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:7px}
.icon-btn{width:34px;height:34px;border:0;border-radius:9px;background:transparent;color:var(--soft);display:grid;place-items:center;cursor:pointer}
.icon-btn:hover{background:var(--surface-2);color:var(--text)}
.search-trigger{height:34px;width:200px;background:var(--surface);border:1px solid var(--border);border-radius:9px;color:var(--muted);display:flex;align-items:center;gap:8px;padding:0 9px;cursor:pointer}
.search-trigger em{font-style:normal;font-size:11px}
.search-trigger kbd{margin-left:auto;background:var(--surface-3);border:1px solid var(--border);border-radius:5px;padding:2px 5px;font-size:9px;color:var(--soft)}
.notification-btn{position:relative}
.notification-btn>i{position:absolute;right:0;top:-2px;min-width:15px;height:15px;border-radius:8px;background:var(--danger);color:#fff;font-style:normal;font-size:8px;display:grid;place-items:center;border:2px solid var(--bg)}
.top-profile{border:0;background:transparent;color:var(--text);display:flex;align-items:center;gap:8px;cursor:pointer;margin-left:2px}
.top-profile-copy{display:grid;text-align:left;gap:1px;line-height:1.15}
.top-profile-copy strong{font-size:11px}
.top-profile-copy small{font-size:8px;color:var(--muted);text-transform:capitalize}
.popover{display:none;position:fixed;z-index:90;right:22px;top:57px;width:300px;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow);border-radius:12px;padding:10px}
.popover.open{display:block}
.notifications>div:first-child{padding:5px 6px 10px;border-bottom:1px solid var(--border)}
.notifications>div strong,.notifications>div span{display:block}
.notifications>div span{font-size:10px;color:var(--muted);margin-top:3px}
.notifications>p{display:flex;gap:9px;margin:0;padding:10px 6px;border-bottom:1px solid var(--border);font-size:11px}
.notifications>p>i{width:7px;height:7px;margin-top:5px;border-radius:50%;background:var(--accent)}
.notifications small{display:block;color:var(--muted);margin-top:4px}
.notifications .notification-message{display:block;color:var(--soft);font-size:10px;margin-top:3px;overflow-wrap:anywhere}
.popover-empty{padding:25px!important;text-align:center;color:var(--muted);font-size:11px}
.profile-menu{width:220px}
.profile-summary{display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--border);padding:6px 5px 12px}
.profile-summary strong,.profile-summary small{display:block}
.profile-summary small{color:var(--muted);font-size:10px;margin-top:3px}
.profile-menu>a,.profile-menu button{display:block;width:100%;border:0;background:none;color:var(--soft);text-align:left;text-decoration:none;padding:10px 8px;font-size:11px;cursor:pointer}
.profile-menu button{color:var(--danger)}
main{padding:25px 24px 55px;max-width:1500px;margin:auto}
.page-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.page-title h1{font-size:23px;margin:0 0 4px;letter-spacing:-.025em}
.page-title p{margin:0}
.role-pill{display:flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--surface);color:var(--soft);padding:7px 10px;border-radius:20px;font-size:10px;text-transform:capitalize}
.role-pill i{width:6px;height:6px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px color-mix(in srgb,var(--success) 12%,transparent)}
footer{display:flex;justify-content:space-between;border-top:1px solid var(--border);padding:16px 24px;color:var(--muted);font-size:10px}
.notice,.error{padding:11px 14px;border-radius:9px;margin-bottom:16px;font-size:11px}
.toast{position:fixed;z-index:120;top:78px;right:24px;width:min(390px,calc(100vw - 30px));display:flex;align-items:flex-start;gap:12px;padding:14px 14px 14px 16px;border-radius:11px;background:var(--surface);border:1px solid var(--border);box-shadow:0 18px 50px rgba(0,0,0,.3);animation:toast-in .22s ease both}
.toast:before{content:"";width:4px;align-self:stretch;border-radius:4px;background:var(--danger)}
.toast span{flex:1;color:var(--soft);font-size:11px;line-height:1.45}
.toast span b{display:block;color:var(--text);font-size:12px;margin-bottom:3px}
.toast button{width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer;font-size:18px}
.toast button:hover{background:var(--surface-3);color:var(--text)}
.toast.hiding{animation:toast-out .18s ease both}
@keyframes toast-in{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateY(-8px) scale(.98)}}
.notice{background:color-mix(in srgb,var(--success) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--success) 25%,var(--border));color:var(--success)}
.error{background:color-mix(in srgb,var(--danger) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--danger) 25%,var(--border));color:var(--danger)}
p{color:var(--muted);line-height:1.55}
.welcome-card{min-height:130px;border-radius:17px;padding:28px 31px;position:relative;overflow:hidden;background:linear-gradient(115deg,#087652,#006244 52%,#142b38);display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;box-shadow:var(--shadow)}
.welcome-card>div:not(.welcome-grid),.welcome-card>a{position:relative;z-index:2}
.welcome-card span{font-size:9px;letter-spacing:.14em;color:#8cddc4;font-weight:800}
.welcome-card h2{font-size:27px;margin:6px 0;color:#fff}
.welcome-card p{color:#b6d9cf;margin:0}
.welcome-card p b{color:#fff}
.welcome-card>a{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(10px);padding:11px 17px;border-radius:9px;color:#fff;text-decoration:none;font-size:11px}
.welcome-card>a b{margin-left:10px}
.welcome-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:25px 25px;mask-image:linear-gradient(90deg,transparent,#000)}
.dashboard-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.card,.panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px;box-shadow:0 2px 5px rgba(0,0,0,.03)}
.span-2{grid-column:span 2}
.metric-head{display:flex;justify-content:space-between}
.metric-head span,.mini-card>div span{color:var(--muted);font-size:11px}
.metric-head strong,.mini-card>strong{display:block;font-size:29px;margin:6px 0;letter-spacing:-.04em}
.metric-head small,.mini-card small{font-size:10px}
.positive{color:var(--success)!important}
.metric-icon{width:43px;height:43px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,#d7fff2,#b9eadc);color:#087e5b!important;font-size:22px!important}
.line-chart{width:100%;height:120px;margin-top:5px;overflow:visible}
.chart-area{fill:url(#chartFill)}
.chart-line{fill:none;stroke:var(--accent);stroke-width:2}
.chart-axis{display:flex;justify-content:space-between;color:var(--muted);font-size:8px}
.goal-card{text-align:center;display:flex;flex-direction:column;align-items:center}
.ring{--value:72;width:118px;height:118px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--value)*1%),var(--surface-3) 0);display:grid;place-items:center;margin:4px auto 12px;position:relative}
.ring:after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--surface)}
.ring>div{position:relative;z-index:1}
.ring strong{font-size:24px;display:block}
.ring span{font-size:8px;color:var(--muted);text-transform:uppercase}
.goal-card h3,.card-title h3{font-size:13px;margin:0}
.goal-card p{font-size:10px;margin:4px 0 10px}
.goal-card a,.card-title a{font-size:10px;color:var(--accent);text-decoration:none}
.mini-card>div{display:flex;justify-content:space-between}
.mini-card p{font-size:10px;margin:0}
.mini-bars{height:70px;display:flex;align-items:end;gap:8px;margin:10px 0}
.mini-bars i{flex:1;background:var(--accent);border-radius:4px 4px 0 0;opacity:.78}
.mini-bars i:nth-child(1){height:25%}
.mini-bars i:nth-child(2){height:42%}
.mini-bars i:nth-child(3){height:32%}
.mini-bars i:nth-child(4){height:67%}
.mini-bars i:nth-child(5){height:52%}
.mini-bars i:nth-child(6){height:82%}
.mini-bars i:nth-child(7){height:72%}
.spark{width:100%;height:70px;margin:8px 0}
.spark path{fill:none;stroke:var(--accent);stroke-width:2}
.legend{display:flex;gap:12px;color:var(--muted);font-size:8px}
.legend span:before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;margin-right:4px}
.legend .green:before{background:var(--success)}
.legend .blue:before{background:var(--info)}
.legend .orange:before{background:var(--warning)}
.card-title{display:flex;justify-content:space-between;align-items:start;margin-bottom:14px}
.card-title p{font-size:10px;margin:3px 0}
.card-title>span{font-size:9px;color:var(--muted)}
.funnel-card>strong{font-size:25px}
.funnel-card>p{font-size:9px;margin:2px 0 15px}
.funnel-row{margin-top:12px}
.funnel-row>span{display:flex;justify-content:space-between;color:var(--soft);font-size:9px}
.funnel-row>i{height:6px;background:var(--surface-3);display:block;border-radius:6px;margin-top:6px;overflow:hidden}
.funnel-row em{display:block;height:100%;background:var(--accent);border-radius:6px}
.funnel-row .muted-bar{background:var(--warning)}
.inventory-list>div{display:grid;grid-template-columns:auto 1fr auto 60px;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--border)}
.inventory-list>div:first-child{border-top:0}
.rank{width:27px;height:27px;border-radius:7px;display:grid;place-items:center;font-size:8px;font-weight:800}
.green-bg{background:color-mix(in srgb,var(--success) 14%,transparent);color:var(--success)}
.blue-bg{background:color-mix(in srgb,var(--info) 14%,transparent);color:var(--info)}
.orange-bg{background:color-mix(in srgb,var(--warning) 14%,transparent);color:var(--warning)}
.red-bg{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger)}
.inventory-list p{margin:0}
.inventory-list p strong,.inventory-list p small{display:block}
.inventory-list p strong{color:var(--text);font-size:10px}
.inventory-list p small{font-size:9px;margin-top:2px}
.inventory-list>div>b{font-size:12px}
.inventory-list>div>em{font-size:8px;font-style:normal;color:var(--muted);text-align:right}
.activity-list>div{display:flex;gap:10px;padding:9px 0;border-top:1px solid var(--border)}
.activity-list>div:first-child{border-top:0}
.activity-list>div>i{width:7px;height:7px;border-radius:50%;background:var(--accent);margin-top:5px;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 10%,transparent)}
.activity-list p{margin:0;font-size:9px}
.activity-list p strong{color:var(--text)}
.activity-list small{display:block;margin-top:3px;color:var(--muted)}
.live-dot{color:var(--success)!important}
.team-card{grid-column:span 1}
.team-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.team-stats>div{background:var(--surface-2);border-radius:10px;padding:14px}
.team-stats span,.team-stats small{display:block;color:var(--muted);font-size:9px}
.team-stats strong{font-size:25px;display:block;margin:7px 0}
.empty-state{display:grid!important;justify-items:center!important;text-align:center;padding:25px!important}
.empty-state>span{font-size:25px;color:var(--muted)}
.empty-state strong{font-size:11px;margin-top:7px}
.empty-state p{font-size:9px;margin:2px 0}
.panel{margin-bottom:18px}
.panel h3{font-size:15px;margin:4px 0}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.inventory-filter{display:flex;align-items:end}
.inventory-filter select{min-width:180px}
.pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:15px;margin-top:8px;border-top:1px solid var(--border);color:var(--muted);font-size:9px}
.pagination nav{display:flex;align-items:center;gap:5px}
.pagination a{width:31px;height:31px;display:grid;place-items:center;border:1px solid var(--border);border-radius:7px;background:var(--surface-2);color:var(--soft);text-decoration:none;font-size:10px}
.pagination a:hover{border-color:var(--accent);color:var(--text)}
.pagination a.current{background:var(--accent);border-color:var(--accent);color:#06281f;font-weight:800}
.panel-head p,.create-panel p{font-size:10px;margin:3px 0}
.eyebrow{font-size:8px;letter-spacing:.14em;color:var(--accent);font-weight:800}
.create-panel{display:flex;justify-content:space-between;align-items:end;gap:25px}
.inline-form,.account-form{display:flex;align-items:end;gap:10px;flex-wrap:wrap}
label{display:grid;gap:6px;color:var(--soft);font-size:10px;font-weight:600}
input,select,textarea{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:10px 11px;outline:none;min-height:37px}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent)}
.primary,.secondary{border-radius:8px;padding:10px 14px;cursor:pointer;font-size:10px;font-weight:700}
.primary{border:0;background:var(--accent);color:#06281f;box-shadow:0 7px 18px color-mix(in srgb,var(--accent) 18%,transparent)}
.secondary{background:var(--surface-2);border:1px solid var(--border);color:var(--text)}
.table-wrap{overflow:auto;margin:0 -5px}
table{width:100%;border-collapse:collapse;min-width:700px}
th{text-align:left;color:var(--muted);font-size:8px;text-transform:uppercase;letter-spacing:.09em;padding:11px}
td{padding:13px 11px;border-top:1px solid var(--border);font-size:10px;color:var(--soft)}
code{background:var(--surface-3);border:1px solid var(--border);padding:5px 7px;border-radius:5px;color:var(--text)}
.voucher-code{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;letter-spacing:.04em;font-family:ui-monospace,monospace;background:var(--surface-3);border:1px solid var(--border);padding:5px 7px;border-radius:6px;color:var(--text);cursor:pointer}
.voucher-code:hover,.voucher-code:focus-visible{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface-3))}
.voucher-code em{font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:7px;font-style:normal;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.voucher-code.copied{border-color:var(--success);color:var(--success)}
.voucher-code.copied em{color:var(--success)}
.status{font-size:8px;font-weight:800;text-transform:uppercase;padding:5px 7px;border-radius:10px;white-space:nowrap}
.status.unused{background:color-mix(in srgb,var(--warning) 13%,transparent);color:var(--warning)}
.status.active{background:color-mix(in srgb,var(--success) 13%,transparent);color:var(--success)}
.status.trial{background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent)}
.status.offline{background:color-mix(in srgb,var(--muted) 13%,transparent);color:var(--muted)}
.status.expired,.status.revoked{background:color-mix(in srgb,var(--danger) 13%,transparent);color:var(--danger)}
.text-danger{border:0;background:none;color:var(--danger);font-size:9px;cursor:pointer}
.empty{text-align:center;padding:30px;color:var(--muted)}
.codes textarea{width:100%;min-height:160px;font-family:ui-monospace,monospace;line-height:1.8}
.account-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.account-grid article{display:grid;grid-template-columns:auto 1fr auto auto auto;align-items:center;gap:10px;border:1px solid var(--border);padding:13px;border-radius:10px;background:var(--surface-2)}
.account-grid .account-card{cursor:pointer;transition:border-color .15s ease,transform .15s ease}
.account-grid .account-card:hover,.account-grid .account-card:focus-visible{border-color:var(--accent);transform:translateY(-1px);outline:none}
.account-grid .account-card strong a{color:var(--text);text-decoration:none}
.account-grid article div span{display:block;color:var(--muted);font-size:9px;margin-top:3px}
.account-grid article div .upline{color:var(--accent);font-size:8px;margin-top:5px}
.account-grid article strong{font-size:10px}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.settings-grid .panel{display:grid;gap:14px;align-content:start}
.profile-grid{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(320px,1.3fr);gap:18px;align-items:start}
.profile-identity{display:grid;justify-items:center;text-align:center;gap:9px;padding:28px 20px}
.profile-identity h3{margin:2px 0}.profile-identity p{margin:0;font-size:10px}.profile-identity .avatar{width:58px;height:58px;font-size:20px}
.profile-form{display:grid;gap:14px}.profile-form .primary{justify-self:start}.profile-form .form-note{font-size:9px;margin:0;color:var(--muted)}
.server-modal{width:min(760px,calc(100vw - 28px));max-height:min(820px,calc(100dvh - 28px));overflow:auto;padding:0;border:1px solid var(--border);border-radius:16px;background:var(--surface);color:var(--text);box-shadow:0 28px 90px rgba(0,0,0,.55)}
.server-modal::backdrop{background:rgba(3,8,13,.72);backdrop-filter:blur(4px)}
.server-modal-head{position:sticky;top:0;z-index:3;display:flex;justify-content:space-between;align-items:flex-start;gap:15px;padding:21px 22px;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.server-modal-head h2{font-size:20px;margin:5px 0 2px}.server-modal-head p{font-size:10px;margin:0}.server-modal-head .icon-btn{font-size:22px}
.server-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:21px 22px;align-items:end}
.server-form .primary{min-height:40px}
.server-install-error{grid-column:1/-1;display:grid;gap:4px;padding:12px 13px;border:1px solid color-mix(in srgb,var(--danger) 35%,var(--border));border-radius:9px;background:color-mix(in srgb,var(--danger) 9%,var(--surface-2));color:var(--danger)}.server-install-error b{font-size:10px}.server-install-error span{font-size:9px;line-height:1.5;overflow-wrap:anywhere}
.install-progress{grid-column:1/-1;display:grid;gap:7px}.install-progress[hidden]{display:none}.install-progress>div{height:5px;overflow:hidden;border-radius:5px;background:var(--surface-3)}.install-progress i{display:block;width:38%;height:100%;border-radius:inherit;background:var(--accent);animation:install-progress 1.15s ease-in-out infinite}.install-progress span{color:var(--muted);font-size:8px}.install-submit{display:inline-flex;align-items:center;justify-content:center;gap:7px}.install-spinner{display:none;width:13px;height:13px;border:2px solid color-mix(in srgb,currentColor 30%,transparent);border-top-color:currentColor;border-radius:50%}.install-submit.installing .install-spinner{display:block;animation:install-spin .75s linear infinite}@keyframes install-spin{to{transform:rotate(360deg)}}@keyframes install-progress{0%{transform:translateX(-110%)}50%{transform:translateX(125%)}100%{transform:translateX(290%)}}
.field-error{display:block;min-height:12px;margin-top:4px;color:var(--danger);font-size:8px}
.server-form-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:9px;padding-top:7px}
.cloudflare-form{display:grid;gap:14px;padding:21px 22px}.cloudflare-form label{min-width:0}.cloudflare-form input{width:100%}.cloudflare-form .server-form-actions{margin-top:4px}
.server-fab-group{position:fixed;right:28px;bottom:28px;z-index:38;display:flex;align-items:center;gap:10px}
.server-fab{display:flex;align-items:center;gap:9px;min-height:48px;padding:7px 17px 7px 8px;border:0;border-radius:25px;background:var(--accent);color:#05281f;box-shadow:0 14px 35px color-mix(in srgb,var(--accent) 30%,rgba(0,0,0,.35));cursor:pointer;font-weight:800}
.server-fab:hover{transform:translateY(-2px)}.server-fab span{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.22);font-size:24px;font-weight:400}.server-fab b{font-size:10px}
.settings-fab{background:var(--surface);border:1px solid var(--border);color:var(--text)}.settings-fab span{font-size:17px;color:var(--accent);background:var(--surface-2)}
.install-profile{position:relative;display:grid;gap:6px}.install-profile>label{color:var(--soft);font-size:10px;font-weight:600}
.install-select{width:100%;min-height:54px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;text-align:left;padding:7px 10px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2);color:var(--text);cursor:pointer}.install-select span,.install-menu button span{min-width:0}.install-select b,.install-select small,.install-menu b,.install-menu small{display:block}.install-select b,.install-menu b{font-size:10px}.install-select small,.install-menu small{font-size:8px;color:var(--muted);margin-top:2px}.install-select i{font-style:normal;color:var(--muted)}
.debian-logo{width:34px;height:34px;display:grid!important;place-items:center;border-radius:50%;background:#a80030;color:#fff!important;font:800 17px Georgia,serif;box-shadow:inset 0 0 0 2px rgba(255,255,255,.16)}
.install-menu{display:none;position:absolute;z-index:5;left:0;right:0;top:calc(100% + 6px);padding:6px;border:1px solid var(--border);border-radius:11px;background:var(--surface);box-shadow:var(--shadow)}.install-menu.open{display:grid}.install-menu button{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;text-align:left;border:0;border-radius:8px;padding:8px;background:transparent;color:var(--text);cursor:pointer}.install-menu button:hover,.install-menu button[aria-selected="true"]{background:var(--surface-2)}
.server-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.server-stats article{display:flex;align-items:center;gap:12px;padding:15px 17px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}.server-stats article>span{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--accent) 10%,var(--surface-2));color:var(--accent);font-size:18px}.server-stats small,.server-stats strong{display:block}.server-stats small{color:var(--muted);font-size:8px;text-transform:uppercase;letter-spacing:.08em}.server-stats strong{margin-top:3px;font-size:19px}
.servers-heading{display:flex;align-items:center;justify-content:space-between;margin:25px 2px 13px}
.servers-heading h3{font-size:15px;margin:0}
.servers-heading p{font-size:10px;margin:3px 0 0}
.server-live{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:9px}
.server-live i{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px color-mix(in srgb,var(--success) 12%,transparent)}
.server-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.server-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;min-width:0}
.server-accordion-trigger{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;border-radius:10px;cursor:pointer;outline:none}.server-accordion-trigger:hover{background:var(--surface-2)}.server-accordion-trigger:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.server-card.open .server-accordion-trigger{padding-bottom:14px;border-bottom:1px solid var(--border);border-radius:10px 10px 0 0}.server-accordion-panel[hidden]{display:none}
.server-card h3{font-size:12px;margin:0}
.server-accordion-trigger p{font-size:9px;margin:3px 0 0}
.server-summary-ip,.server-summary-ns{color:var(--soft);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.server-summary-tunnel{color:var(--accent)!important;font-size:8px!important}
.summary-copy{border:0;background:transparent;color:inherit;font:inherit;padding:0;cursor:pointer;text-align:left}.summary-copy:hover{color:var(--accent)}
.server-summary-meta{display:flex;align-items:flex-end;flex-direction:column;gap:5px}.server-connected,.server-ram{color:var(--muted);font-size:8px;white-space:nowrap}.server-ram{color:var(--soft)}
.server-title{min-width:0}.server-title>div{display:flex;align-items:center;gap:6px;min-width:0}.server-title h3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copy-icon{width:27px;height:27px;flex:0 0 auto;display:grid;place-items:center;border:1px solid var(--border);border-radius:7px;background:var(--surface-2);color:var(--accent);cursor:pointer}.copy-icon:hover{border-color:var(--accent)}.copy-icon:disabled{opacity:.35;cursor:not-allowed}.copy-icon.copied{border-color:var(--success);color:var(--success)}
.server-flag{width:39px;height:39px;display:grid;place-items:center;border-radius:10px;background:var(--surface-2);font-size:23px}
.server-address{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 0}
.server-address>span,.server-details span{color:var(--muted);font-size:8px;text-transform:uppercase;letter-spacing:.08em}
.server-copy{display:flex;align-items:center;gap:6px;min-width:0;border:0;background:transparent;color:var(--text);cursor:pointer;padding:4px;border-radius:6px}
.server-copy:hover{background:var(--surface-2)}
.server-copy code{overflow:hidden;text-overflow:ellipsis}
.server-copy em{color:var(--accent);font-size:7px;font-style:normal;text-transform:uppercase}
.server-copy.copied em{color:var(--success)}
.server-details{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.server-details>div{min-width:0;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:10px}
.server-details span,.server-details strong{display:block}
.server-details strong{font-size:9px;margin-top:5px;overflow-wrap:anywhere}
.certificate-detail{display:flex;align-items:center;justify-content:space-between}.certificate-detail span{display:block}.certificate-detail .copy-icon{margin-left:auto}
.ram-detail{grid-column:1/-1}.ram-detail>div:first-child{display:flex;align-items:center;justify-content:space-between}.ram-detail>div:first-child strong{margin:0}.ram-track{height:7px;margin-top:8px;border-radius:7px;background:var(--surface-3);overflow:hidden}.ram-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--success))}
.tunnel-chip{color:var(--accent)}
.server-users{font-size:18px!important;line-height:1}
.server-card>footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 0 0;margin-top:13px;border-top:1px solid var(--border);color:var(--muted)}
.server-card>footer small{font-size:8px}
.server-empty{grid-column:1/-1;text-align:center;border:1px dashed var(--border);border-radius:14px;padding:55px 20px;background:var(--surface)}
.server-empty>span{font-size:28px;color:var(--accent)}
.server-empty h3{font-size:13px;margin:10px 0 2px}
.server-empty p{font-size:9px;margin:0}
.colors{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.colors input{width:100%;height:46px;padding:4px}
.theme-preview{border:1px solid var(--border);border-radius:11px;background:var(--surface-2);padding:15px;display:flex;align-items:center;gap:9px}
.theme-preview span{width:23px;height:23px;border-radius:6px;background:var(--accent)}
.theme-preview button{margin-left:auto;background:var(--primary);color:#fff;border:0;border-radius:6px;padding:7px;font-size:9px}
.login-page{min-height:100vh;display:grid;grid-template-columns:1.15fr 1fr;background:var(--bg)}
.login-art{position:relative;overflow:hidden;padding:8vw;background:linear-gradient(145deg,#101a22,#0b3028);display:flex;align-items:center}
.art-copy{position:relative;z-index:2;max-width:510px}
.art-copy .brand-mark{width:45px;height:45px}
.art-copy h1{font-size:52px;line-height:1.08;margin:26px 0 18px}
.art-copy p{font-size:15px}
.orb{position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--accent),#027152 45%,transparent 67%);filter:blur(8px);opacity:.55;right:-120px;bottom:-150px}
.login-form{display:grid;place-items:center;padding:40px}
.auth-card{width:min(400px,100%);display:grid;gap:19px}
.auth-card h2{font-size:25px;margin:6px 0}
.auth-card p{font-size:11px}
.auth-card input{padding:12px}
.password-field{position:relative;display:block}
.password-field input{width:100%;padding-right:48px}
.password-toggle{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
.password-toggle:hover,.password-toggle:focus-visible{color:var(--text);background:var(--surface-3)}
.password-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.password-toggle .eye-off{display:none}
.password-toggle[aria-pressed="true"] .eye-on{display:none}
.password-toggle[aria-pressed="true"] .eye-off{display:block}
.auth-card .primary{display:flex;justify-content:space-between;padding:12px 15px}
.help{text-align:center;color:var(--muted);font-size:9px}
.command-backdrop{display:none;position:fixed;inset:0;z-index:100;background:rgba(5,8,12,.68);backdrop-filter:blur(3px);padding-top:12vh}
.command-backdrop.open{display:block}
.command{width:min(560px,calc(100% - 30px));margin:auto;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 25px 80px rgba(0,0,0,.45);padding:9px}
.command>div:first-child{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);padding:8px}
.command input{flex:1;border:0;background:transparent;box-shadow:none;font-size:13px}
.command kbd{font-size:8px;color:var(--muted);border:1px solid var(--border);padding:3px 5px;border-radius:4px}
.command>p{font-size:8px;text-transform:uppercase;letter-spacing:.12em;padding:5px 9px;margin:8px 0}
.command>a{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;text-decoration:none;padding:9px;border-radius:8px}
.command>a:hover,.command>a.selected{background:var(--surface-2)}
.command>a>span{grid-row:1/3;align-self:center;color:var(--accent)}
.command>a b{font-size:10px}
.command>a small{font-size:9px;color:var(--muted);margin-top:2px}
.command-empty{display:none;text-align:center;padding:25px;color:var(--muted);font-size:10px}

@media(max-width:1180px){.dashboard-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.server-form{grid-template-columns:repeat(2,minmax(0,1fr))}
.server-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.revenue-card{grid-column:span 2}
.inventory-card{grid-column:span 2}
}

@media(max-width:900px){.app-shell{grid-template-columns:1fr}
.server-form{grid-template-columns:repeat(2,minmax(0,1fr))}
.sidebar{position:fixed;left:0;width:min(86vw,var(--sidebar-w));transform:translateX(-105%);transition:transform .22s ease;box-shadow:var(--shadow);padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom))}
.sidebar.open{transform:none}
.sidebar-scrim{display:block;position:fixed;inset:0;z-index:45;background:rgba(3,8,13,.62);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}
.nav-open{overflow:hidden}
.nav-open .sidebar-scrim{opacity:1;visibility:visible}
.sidebar-toggle{display:grid}
.search-trigger{width:38px;justify-content:center}
.search-trigger em,.search-trigger kbd{display:none}
.crumb span,.crumb b{display:none}
.dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.span-2,.inventory-card{grid-column:span 2}
.settings-grid{grid-template-columns:1fr}
.profile-grid{grid-template-columns:1fr}
.create-panel{align-items:start;flex-direction:column}
.login-page{grid-template-columns:1fr}
.login-art{display:none}
.login-form{min-height:100vh;min-height:100dvh}
}

@media(max-width:620px){main{padding:18px 12px calc(40px + env(safe-area-inset-bottom))}
.server-modal{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}
.server-modal-head{padding:17px}.server-form{padding:17px}.server-form-actions{display:grid;grid-template-columns:1fr 1fr}.server-form-actions button{width:100%}
.server-fab-group{right:14px;bottom:calc(14px + env(safe-area-inset-bottom));gap:8px}.server-fab b{display:none}.server-fab{padding:7px}
.server-form{grid-template-columns:1fr}
.server-form .primary{min-height:44px}
.server-grid{grid-template-columns:1fr}
.servers-heading{margin-top:20px}
.toast{top:calc(68px + env(safe-area-inset-top));right:10px;width:calc(100vw - 20px)}
.topbar{height:calc(58px + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));gap:8px}
.top-actions{gap:2px}
.top-profile-copy,.top-profile>span:last-child{display:none}
.top-profile{margin-left:0}
.page-title p,.role-pill{display:none}
.page-title{margin-bottom:18px}
.page-title h1{font-size:22px}
.welcome-card{align-items:start;flex-direction:column;padding:22px;gap:18px}
.welcome-card h2{font-size:22px}
.dashboard-grid{grid-template-columns:1fr;gap:12px}
.span-2,.inventory-card,.team-card{grid-column:span 1}
.card,.panel{padding:20px}
.account-grid{grid-template-columns:1fr}
.account-grid article{grid-template-columns:auto 1fr auto}
.account-grid article form{grid-column:1/-1}
.settings-grid{gap:12px}
.profile-form .primary{width:100%;min-height:44px}
.inline-form,.account-form{width:100%}
.inline-form label,.account-form label{width:100%}
.inline-form input,.inline-form select,.account-form input,.account-form select{width:100%}
.inline-form button,.account-form button{width:100%;min-height:44px}
.inventory-list>div{grid-template-columns:auto 1fr auto}
.inventory-list>div>em{display:none}
.table-wrap{margin:0;overflow:visible}
.panel-head{align-items:flex-start;gap:14px;flex-direction:column}
.inventory-filter{width:100%;align-items:end}
.inventory-filter label{flex:1}
.inventory-filter select{width:100%;min-width:0}
.pagination{align-items:flex-start;flex-direction:column}
.pagination nav{width:100%;justify-content:center;flex-wrap:wrap}
.table-wrap table{min-width:0}
.table-wrap thead{display:none}
.table-wrap tbody,.table-wrap tr,.table-wrap td{display:block;width:100%}
.table-wrap tr:not(.empty-row){border:1px solid var(--border);background:var(--surface-2);border-radius:10px;padding:8px 12px;margin:10px 0}
.table-wrap td{display:flex;align-items:center;justify-content:space-between;gap:15px;border:0;border-bottom:1px solid var(--border);padding:10px 0;text-align:right}
.table-wrap td:last-child{border-bottom:0}
.table-wrap td:before{content:attr(data-label);color:var(--muted);font-size:8px;text-transform:uppercase;letter-spacing:.08em;text-align:left}
.table-wrap .empty-row{display:table-row}
.table-wrap .empty-row td{display:table-cell;text-align:center}
.table-wrap .empty-row td:before{display:none}
.text-danger{min-height:36px;padding:0 8px}
footer{padding:14px max(12px,env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));gap:10px;flex-wrap:wrap}
.popover{right:max(10px,env(safe-area-inset-right));width:calc(100% - 20px);top:calc(52px + env(safe-area-inset-top))}
.command-backdrop{padding-top:max(8vh,env(safe-area-inset-top))}
.login-form{padding:28px 20px}
.auth-card input,.auth-card .primary{min-height:46px}
}

@media(max-width:360px){.topbar{padding-left:8px;padding-right:8px}
.top-actions .icon-btn{width:32px}
.search-trigger{width:34px}
.top-profile .avatar{width:29px;height:29px}
.welcome-card{padding:20px}
.card,.panel{padding:17px}
.team-stats{grid-template-columns:1fr}
.account-grid article{grid-template-columns:auto 1fr}
.account-grid article>.role-pill,.account-grid article>.status{justify-self:start}
.colors{grid-template-columns:1fr}
.theme-preview{align-items:flex-start;flex-wrap:wrap}
.theme-preview button{margin-left:0;width:100%}
}

@media(hover:none),(pointer:coarse){.icon-btn{min-width:42px;min-height:42px}
.side-nav a{min-height:44px}
.primary,.secondary{min-height:42px}
.profile-menu>a,.profile-menu button{min-height:44px}
.command>a{min-height:50px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}