@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{--bg:#f5f6f8;--surface:#fff;--surface2:#f0f1f4;--text:#111318;--muted:#69707d;--line:#e1e4e9;--accent:#7c3aed;--accent2:#a855f7;--success:#16a34a;--warning:#d97706;--danger:#dc2626;--shadow:0 18px 50px rgba(17,19,24,.08)}
:root[data-theme=dark]{--bg:#08090d;--surface:#11131a;--surface2:#171923;--text:#f7f7fa;--muted:#969cab;--line:#252834;--accent:#9b5cff;--accent2:#c084fc;--shadow:0 22px 60px rgba(0,0,0,.32)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}.app-shell{min-height:100vh;display:flex}.sidebar{width:250px;background:var(--surface);border-right:1px solid var(--line);padding:24px 16px;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:20}.brand{display:flex;align-items:center;gap:11px;padding:4px 10px 28px}.brand strong{font-size:12px;letter-spacing:.12em}.brand span{display:block;font-size:9px;color:var(--muted);letter-spacing:.16em;margin-top:3px}.brand-mark{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:800;font-size:23px;box-shadow:0 12px 30px rgba(124,58,237,.3)}.brand-mark.small{width:38px;height:38px;border-radius:12px;font-size:15px}.sidebar nav{display:grid;gap:6px}.sidebar nav a,.logout,.theme-toggle{border:0;background:transparent;color:var(--muted);display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;cursor:pointer;text-align:left}.sidebar nav a:hover,.sidebar nav a.active,.logout:hover,.theme-toggle:hover{background:var(--surface2);color:var(--text)}.sidebar nav a.active{box-shadow:inset 3px 0 var(--accent)}.sidebar-bottom{margin-top:auto;display:grid;gap:5px}.main{margin-left:250px;width:calc(100% - 250px)}.topbar{height:66px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:space-between;padding:0 30px;position:sticky;top:0;z-index:10}.top-title{font-weight:700}.top-user{font-size:13px;color:var(--muted)}.online-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--success);margin-right:7px}.mobile-menu{display:none}.content{padding:34px;max-width:1500px;margin:auto}.page-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}.eyebrow{font-size:11px;letter-spacing:.18em;font-weight:800;color:var(--accent);margin-bottom:8px}h1{font-size:32px;line-height:1.1;margin:0 0 8px}h2{margin:0 0 8px;font-size:20px}h3{margin:0 0 8px}.muted{color:var(--muted)}.small{font-size:12px}.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.hero,.server-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px;margin-bottom:18px}.grid{display:grid;gap:18px;margin-bottom:18px}.grid.four{grid-template-columns:repeat(4,1fr)}.grid.three{grid-template-columns:repeat(3,1fr)}.grid.two{grid-template-columns:repeat(2,1fr)}.stat{padding:20px}.stat span{display:block;color:var(--muted);font-size:12px}.stat strong{display:block;font-size:25px;margin:9px 0 5px}.stat small{color:var(--muted)}.feature{padding:25px}.feature .icon{width:42px;height:42px;border-radius:12px;background:var(--surface2);display:grid;place-items:center;margin-bottom:18px;color:var(--accent);font-weight:800}.feature a{color:var(--accent);font-weight:700}.btn{border:1px solid var(--line);background:var(--surface2);color:var(--text);padding:11px 15px;border-radius:11px;font-weight:700;cursor:pointer;transition:.18s}.btn:hover{transform:translateY(-1px);border-color:var(--accent)}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.success{background:color-mix(in srgb,var(--success) 12%,var(--surface));color:var(--success)}.btn.warning{background:color-mix(in srgb,var(--warning) 12%,var(--surface));color:var(--warning)}.btn.danger{background:color-mix(in srgb,var(--danger) 12%,var(--surface));color:var(--danger)}.btn.full{width:100%}.control-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}.section-title{display:flex;justify-content:space-between;align-items:center;gap:15px}.status{display:flex;align-items:center;gap:8px;text-transform:capitalize;font-weight:700}.status span{width:10px;height:10px;border-radius:50%;background:var(--muted)}.status.running span,.status.online span{background:var(--success);box-shadow:0 0 0 5px color-mix(in srgb,var(--success) 14%,transparent)}.status.stopped span,.status.offline span{background:var(--danger)}.status.starting span,.status.stopping span{background:var(--warning)}.badge{display:inline-flex;align-items:center;border-radius:999px;padding:6px 9px;font-size:10px;font-weight:800;letter-spacing:.08em}.badge.premium{background:color-mix(in srgb,var(--accent) 14%,var(--surface));color:var(--accent)}.badge.success,.badge.paid{background:color-mix(in srgb,var(--success) 14%,var(--surface));color:var(--success)}.badge.pending{background:color-mix(in srgb,var(--warning) 14%,var(--surface));color:var(--warning)}.alert{padding:13px 15px;border:1px solid var(--line);border-radius:12px;margin-bottom:18px;background:var(--surface2)}.alert.success{border-color:color-mix(in srgb,var(--success) 35%,var(--line));color:var(--success)}.alert.danger{border-color:color-mix(in srgb,var(--danger) 35%,var(--line));color:var(--danger)}.hidden{display:none}.command-form{display:flex;gap:9px;margin:18px 0}.command-form input,label input{width:100%;background:var(--surface2);border:1px solid var(--line);border-radius:11px;color:var(--text);padding:11px 13px;outline:none}.command-form input:focus,label input:focus{border-color:var(--accent)}.console-card{padding:20px}.console-card pre{min-height:220px;max-height:430px;overflow:auto;background:#050609;color:#e5e7eb;border-radius:12px;padding:18px;white-space:pre-wrap;word-break:break-word}.small-btn{padding:7px 10px;font-size:12px}.table-card{padding:20px}.table-wrap{overflow:auto;margin-top:14px}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:14px;border-bottom:1px solid var(--line);font-size:13px}th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.empty{text-align:center;color:var(--muted);padding:35px}.billing-plan{padding:26px}.price{font-size:34px;font-weight:800;margin:18px 0}.price small{font-size:12px;color:var(--muted);font-weight:500}.check-list{padding-left:20px;color:var(--muted);line-height:2}.prose{padding:28px;line-height:1.7}.mini-card{background:var(--surface2);border:1px solid var(--line);border-radius:14px;padding:18px}.mini-card strong,.mini-card span{display:block}.mini-card span{font-size:12px;color:var(--muted);margin-top:5px}.auth-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--accent) 18%,var(--bg)),var(--bg) 50%)}.auth-shell{width:min(430px,100%);text-align:center}.auth-shell h1{margin-top:14px}.auth-card{text-align:left;padding:24px;margin:20px 0;display:grid;gap:16px}.auth-card label{display:grid;gap:7px;font-size:12px;font-weight:700}.auth-shell .muted.small{display:block}.auth-shell .alert{text-align:left}footer{padding:24px 0 5px;color:var(--muted);font-size:11px;display:flex;justify-content:space-between}.server-header h2{margin-top:12px}.prose p{color:var(--muted)}@media(max-width:1000px){.grid.four{grid-template-columns:repeat(2,1fr)}.grid.three{grid-template-columns:1fr}.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:none}.main{margin-left:0;width:100%}.mobile-menu{display:block;border:0;background:none;color:var(--text);font-size:20px}.top-title{margin-right:auto;margin-left:14px}.content{padding:22px}.page-head{align-items:start;flex-direction:column}.grid.two{grid-template-columns:1fr}}@media(max-width:600px){.grid.four{grid-template-columns:1fr}.hero,.server-header{align-items:start;flex-direction:column}.control-grid{grid-template-columns:1fr}.topbar{padding:0 18px}.content{padding:18px}.top-user{display:none}footer{gap:10px;flex-direction:column}.brand-mark{width:52px;height:52px}}
.status.installing span,.status.provisioning span{background:var(--warning)}label select{width:100%;background:var(--surface2);border:1px solid var(--line);border-radius:11px;color:var(--text);padding:11px 13px;outline:none;font:inherit}label select:focus{border-color:var(--accent)}label{display:grid;gap:7px;font-size:12px;font-weight:700}