:root{
  --bg:#050817;--panel:rgba(10,17,42,.82);--panel2:rgba(13,24,57,.9);
  --line:rgba(76,177,255,.25);--cyan:#38d9ff;--blue:#4d72ff;--purple:#9b4dff;
  --text:#eef5ff;--muted:#9aa9c7;--green:#23e58a;--yellow:#ffd45a;--red:#ff5575;
  --shadow:0 18px 60px rgba(0,0,0,.42),0 0 30px rgba(55,110,255,.09);
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--text);
background:radial-gradient(circle at 20% 0%,#10265c 0,#070b1d 34%,#03050d 100%);min-height:100vh}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.18;background-image:linear-gradient(rgba(74,133,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(74,133,255,.06) 1px,transparent 1px);background-size:48px 48px}
a{color:inherit;text-decoration:none}.container{width:min(1220px,calc(100% - 32px));margin:auto}
.nav{position:sticky;top:0;z-index:20;background:rgba(3,6,18,.88);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.navin{min-height:70px;display:flex;align-items:center;gap:18px}.brand{font-weight:900;font-size:18px;line-height:.8;letter-spacing:-.8px}.brand span{color:var(--cyan)}
.logo{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#21c8ff,#6d39ff);box-shadow:0 0 24px rgba(56,217,255,.28);font-size:21px}
.navlinks{display:flex;gap:4px;flex:1}.navlinks a{padding:11px 13px;border-radius:10px;color:#c6d3ed;font-size:14px}.navlinks a:hover,.navlinks a.active{background:rgba(65,120,255,.15);color:#fff;box-shadow:inset 0 -2px var(--cyan)}
.user{display:flex;align-items:center;gap:8px;font-size:13px}.avatar{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#5ee7ff,#6b4cff);display:grid;place-items:center;font-weight:900}
.menu{display:none;background:none;border:1px solid var(--line);color:white;border-radius:9px;padding:8px}
.hero{padding:42px 0 22px}.heroCard{min-height:430px;border:1px solid var(--line);border-radius:24px;padding:48px;display:flex;align-items:end;overflow:hidden;position:relative;box-shadow:var(--shadow);background:linear-gradient(90deg,rgba(3,8,24,.94),rgba(4,11,30,.58)),url('https://images.unsplash.com/photo-1542751371-adc38448a05e?auto=format&fit=crop&w=1600&q=80') center/cover}
.heroCard:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 30%,rgba(64,105,255,.38),transparent 35%)}
.heroContent{position:relative;z-index:1;max-width:680px}.eyebrow{color:var(--cyan);font-weight:800;letter-spacing:2px;text-transform:uppercase;font-size:12px}.hero h1{font-size:clamp(42px,6vw,78px);line-height:.92;margin:12px 0}.hero p{font-size:18px;color:#c7d5ef;max-width:600px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.btn{border:0;border-radius:11px;padding:12px 18px;color:#fff;background:linear-gradient(135deg,#4c35ff,#8a3cff);font-weight:800;cursor:pointer;box-shadow:0 8px 24px rgba(91,59,255,.25)}.btn.alt{background:rgba(24,36,76,.8);border:1px solid var(--line)}.btn.danger{background:linear-gradient(135deg,#b82246,#ff3f67)}.btn.green{background:linear-gradient(135deg,#079e68,#16d987)}
.grid{display:grid;gap:16px}.stats{grid-template-columns:repeat(4,1fr);margin:16px 0}.cards{grid-template-columns:repeat(3,1fr)}.two{grid-template-columns:2fr 1fr}
.card{background:linear-gradient(145deg,rgba(13,23,55,.92),rgba(6,11,28,.86));border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow);backdrop-filter:blur(12px)}.card h2,.card h3{margin:0 0 10px}.muted{color:var(--muted)}.stat{display:flex;align-items:center;gap:14px}.stat strong{font-size:27px;display:block}.icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(54,141,255,.12);border:1px solid var(--line)}
.status{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:13px}.dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 12px currentColor}.offline .dot{background:var(--red)}.maintenance .dot{background:var(--yellow)}
.server{position:relative;overflow:hidden}.server:before{content:"";position:absolute;inset:-60px auto auto 60%;width:180px;height:180px;border-radius:50%;background:rgba(93,72,255,.18);filter:blur(20px)}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px}.pill{padding:5px 9px;border-radius:99px;background:rgba(70,105,255,.15);border:1px solid var(--line);font-size:12px}.section{padding:20px 0}.sectionTitle{display:flex;justify-content:space-between;align-items:end;margin-bottom:14px}.sectionTitle h2{margin:0;font-size:25px}
.page{padding:34px 0}.pageTitle{margin-bottom:22px}.pageTitle h1{font-size:38px;margin:0 0 7px}.pageTitle p{color:var(--muted);margin:0}
.list{display:grid;gap:10px}.listItem{display:flex;align-items:center;gap:12px;padding:13px;border-radius:12px;background:rgba(20,31,68,.55);border:1px solid rgba(76,177,255,.12)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.tab{padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:rgba(16,25,58,.7);color:#b9c8e6;cursor:pointer}.tab.active{color:white;background:rgba(84,75,255,.3)}
.table{width:100%;border-collapse:collapse}.table th,.table td{text-align:left;padding:12px;border-bottom:1px solid rgba(76,177,255,.12);font-size:13px}.table th{color:#91a4ca}
input,select,textarea{width:100%;background:#080f28;border:1px solid var(--line);border-radius:10px;padding:12px;color:white;outline:none}textarea{min-height:110px;resize:vertical}.form{display:grid;gap:12px}.chat{min-height:500px;display:flex;flex-direction:column}.messages{flex:1;display:grid;align-content:start;gap:12px}.bubble{max-width:75%;padding:11px 13px;border-radius:14px;background:#101b3e;border:1px solid rgba(76,177,255,.12)}.bubble.me{justify-self:end;background:#30205d}.composer{display:flex;gap:8px;margin-top:14px}.composer input{flex:1}
.profileHero{min-height:300px;border-radius:20px;border:1px solid var(--line);background:linear-gradient(90deg,rgba(3,7,20,.9),rgba(5,11,29,.38)),url('https://images.unsplash.com/photo-1518709268805-4e9042af9f23?auto=format&fit=crop&w=1500&q=80') center/cover;position:relative;padding:24px;display:flex;align-items:end}.profileInfo{display:flex;gap:18px;align-items:end}.bigAvatar{width:110px;height:110px;border-radius:22px;background:linear-gradient(135deg,#23d8ff,#713bff);display:grid;place-items:center;font-size:44px;font-weight:900;border:3px solid rgba(255,255,255,.15)}
.notice{padding:12px 15px;border-radius:12px;background:rgba(255,205,72,.1);border:1px solid rgba(255,205,72,.25);color:#ffe18a}.good{color:var(--green)}.bad{color:var(--red)}
footer{margin-top:50px;padding:30px 0;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
@media(max-width:900px){.navlinks{display:none}.menu{display:block;margin-left:auto}.navlinks.open{display:grid;position:absolute;top:70px;left:0;right:0;padding:12px;background:#050918;border-bottom:1px solid var(--line)}.user{display:none}.stats{grid-template-columns:repeat(2,1fr)}.cards,.two{grid-template-columns:1fr}.heroCard{padding:28px;min-height:390px}.profileInfo{align-items:start;flex-direction:column}.bigAvatar{width:90px;height:90px}}
@media(max-width:560px){.container{width:min(100% - 20px,1220px)}.stats{grid-template-columns:1fr 1fr}.hero h1{font-size:42px}.card{padding:16px}.pageTitle h1{font-size:31px}.table{min-width:680px}.tableWrap{overflow:auto}.composer{flex-direction:column}}