:root {
  --bg: #0f1117;
  --card: #171a22;
  --accent: #27c93f;
  --accent-light: #5ef180;
  --text: #e6e6e6;
  --muted: #999;
  --border: #1e212a;
  --gradient: linear-gradient(90deg, #27c93f, #5df08f);
  --warn: #ffcc00;
  --danger: #ff4d4d;
}

* { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI', Roboto, sans-serif; }
body { background: var(--bg); color: var(--text); overflow-x:hidden; }

a { color: var(--accent); text-decoration:none; transition:.25s; }
a:hover { color: var(--accent-light); }

header{
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 10%;
  background: rgba(15,17,23,.95);
  backdrop-filter: blur(10px);
  position: sticky; top:0; z-index:20;
  border-bottom:1px solid var(--border);
  gap:12px; flex-wrap:wrap;
}

.logo { display:flex; align-items:center; gap:10px; }
.logo-icon { width:34px; height:34px; background:var(--accent); border-radius:8px; box-shadow:0 0 10px #27c93f80; }
.logo-text { font-size:22px; font-weight:800; color:#fff; letter-spacing:1px; }

.top-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }

.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.10);
  color: var(--muted);
  font-size:13px;
}
.chip i{ color: var(--accent); font-size:16px; }

.btn{
  background:var(--accent); color:#fff;
  padding:10px 16px; border-radius:10px;
  font-weight:600; border:none; cursor:pointer;
  box-shadow:0 0 15px #27c93f40;
  transition:.3s;
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none;
  white-space:nowrap;
}
.btn:hover{ transform: translateY(-2px); box-shadow:0 0 20px #27c93f80; }

.btn-ghost{
  background:transparent;
  border:1px solid var(--border);
  color: var(--text);
  box-shadow:none;
}
.btn-ghost:hover{
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 20px #27c93f15;
  transform: translateY(-2px);
}

/* ===== Landing hero ===== */
.hero{
  position:relative; overflow:hidden;
  padding:70px 10% 90px;
  background: linear-gradient(180deg, #11141b, #0f1117);
  min-height: calc(100vh - 82px);
}
.hero::after{
  content:""; position:absolute; width:950px; height:950px;
  background: radial-gradient(circle, #27c93f18, transparent 70%);
  top:-320px; left:60%; transform: translateX(-50%);
  pointer-events:none;
}
.hero-inner{ position:relative; z-index:1; max-width:980px; }
.hero h1{
  font-size:44px; font-weight:900;
  background: var(--gradient);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:10px;
}
.hero p{ color:var(--muted); font-size:16px; line-height:1.7; max-width:720px; }
.hero-actions{ margin-top:18px; display:flex; gap:10px; flex-wrap:wrap; }

/* ===== Auth card ===== */
.auth-hero{
  position:relative; overflow:hidden;
  padding:70px 10% 90px;
  background: linear-gradient(180deg, #11141b, #0f1117);
  min-height: calc(100vh - 82px);
  display:grid; place-items:center;
}
.auth-hero::after{
  content:""; position:absolute; width:900px; height:900px;
  background: radial-gradient(circle, #27c93f20, transparent 70%);
  top:-280px; left:50%; transform: translateX(-50%);
  z-index:0;
}
.auth-wrap{
  width:100%; max-width:980px;
  display:grid; grid-template-columns: 1.05fr 0.95fr;
  gap:35px;
  position:relative; z-index:1;
  align-items:stretch;
}
.auth-info, .auth-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:35px;
  position:relative;
  overflow:hidden;
}
.auth-info{ display:flex; flex-direction:column; justify-content:space-between; }
.kicker{ display:inline-flex; align-items:center; gap:10px; color:var(--muted); font-size:14px; margin-bottom:16px; }
.kicker i{ color:var(--accent); font-size:18px; }
.auth-info h1{
  font-size:42px; font-weight:800; margin-bottom:14px;
  background: var(--gradient);
  -webkit-background-clip:text;
  -webkit-text-fill-color: transparent;
}
.auth-info p{ color:var(--muted); font-size:16px; line-height:1.6; max-width:520px; }
.bullets{ margin-top:24px; display:grid; gap:12px; }
.bullet{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:14px;
  background: rgba(0,0,0,0.08);
  transition:.35s;
}
.bullet:hover{ border-color:var(--accent); box-shadow:0 0 20px #27c93f18; transform: translateY(-2px); }
.bullet i{ color:var(--accent); font-size:20px; margin-top:1px; }
.bullet strong{ display:block; color:#fff; font-size:15px; margin-bottom:2px; }
.bullet span{ color:var(--muted); font-size:13px; line-height:1.5; display:block; }
.auth-card h2{ font-size:22px; color:#fff; margin-bottom:10px; }
.auth-card p{ color:var(--muted); font-size:14px; margin-bottom:22px; line-height:1.5; }
.auth-footer{ margin-top:20px; text-align:center; color:#666; font-size:13px; }

/* ===== Dashboard layout ===== */
.shell{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap:26px;
  padding:28px 10% 80px;
  background: linear-gradient(180deg, #11141b, #0f1117);
  position:relative;
  overflow:hidden;
  min-height: calc(100vh - 82px);
}
.shell::after{
  content:""; position:absolute;
  width:950px; height:950px;
  background: radial-gradient(circle, #27c93f18, transparent 70%);
  top:-320px; left:60%; transform: translateX(-50%);
  z-index:0; pointer-events:none;
}
.sidebar, .content{ position:relative; z-index:1; }

.sidebar{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  height:fit-content;
  position: sticky;
  top: 98px;
}
.profile{
  display:flex; gap:12px; align-items:center;
  padding:14px;
  border:1px solid var(--border);
  border-radius:16px;
  background: rgba(0,0,0,.08);
  margin-bottom:14px;
}
.avatar{
  width:42px; height:42px;
  border-radius:12px;
  background: radial-gradient(circle at 30% 20%, #5ef18055, #27c93f22 55%, rgba(0,0,0,.1));
  border:1px solid #27c93f25;
  box-shadow:0 0 20px #27c93f10;
  overflow:hidden;
  display:grid;
  place-items:center;
}
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.profile strong{ display:block; color:#fff; font-size:14px; }
.profile span{ display:block; color:var(--muted); font-size:12px; margin-top:2px; }

.nav{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.nav a{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid transparent;
  color:var(--text);
  transition:.25s;
  font-weight:500;
}
.nav a .left{ display:flex; align-items:center; gap:10px; }
.nav a i{ font-size:18px; color:var(--muted); transition:.25s; }
.nav a:hover{ border-color:var(--border); background: rgba(0,0,0,.10); }
.nav a:hover i{ color:var(--accent); }
.nav a.active{
  border-color:#27c93f35;
  background: rgba(39,201,63,0.08);
  box-shadow:0 0 20px #27c93f10;
}
.nav a.active i{ color: var(--accent); }

.badge{
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--muted);
  background: rgba(0,0,0,.10);
}

.content{ display:flex; flex-direction:column; gap:18px; }

.page-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:18px; flex-wrap:wrap; }
.page-head h1{
  font-size:30px; font-weight:800;
  background: var(--gradient);
  -webkit-background-clip:text;
  -webkit-text-fill-color: transparent;
  margin-bottom:4px;
}
.page-head p{ color:var(--muted); font-size:14px; line-height:1.6; max-width:720px; }
.quick{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }

.grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap:16px; }
.col-12{ grid-column: span 12; }
.col-8{ grid-column: span 8; }
.col-6{ grid-column: span 6; }
.col-4{ grid-column: span 4; }
.col-3{ grid-column: span 3; }

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  position:relative;
  overflow:hidden;
  transition:.35s;
  min-height:110px;
}
.card:hover{
  border-color:var(--accent);
  box-shadow:0 0 25px #27c93f18;
  transform: translateY(-2px);
}
.card .cap{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:12px;
}
.cap .t{ display:flex; align-items:center; gap:10px; color:#fff; font-size:14px; font-weight:700; }
.cap .t i{ color:var(--accent); font-size:18px; }

.metric{ display:flex; align-items:baseline; gap:8px; margin-top:8px; }
.metric b{ font-size:26px; color:#fff; letter-spacing:.2px; }
.metric span{ color:var(--muted); font-size:12px; }
.muted{ color:var(--muted); font-size:13px; line-height:1.5; }

.spark{
  position:absolute; right:-30px; top:-30px;
  width:160px; height:160px;
  background: radial-gradient(circle, #27c93f18, transparent 70%);
  pointer-events:none;
}

.notice{
  display:flex; gap:14px; align-items:flex-start;
  border-radius:18px;
  border:1px solid #27c93f35;
  background: rgba(39,201,63,0.08);
  padding:16px 18px;
}
.notice i{ color:var(--accent); font-size:20px; margin-top:1px; }
.notice strong{ color:#fff; display:block; margin-bottom:3px; }
.notice p{ color:var(--muted); font-size:13px; line-height:1.5; }

.servers{ display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.server{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  padding:14px;
  border-radius:16px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.08);
  transition:.25s;
}
.server:hover{
  border-color:var(--accent);
  box-shadow:0 0 20px #27c93f10;
  transform: translateY(-1px);
}
.server .left{ display:flex; align-items:center; gap:12px; min-width:0; }
.srv-icon{
  width:42px; height:42px;
  border-radius:14px;
  border:1px solid #27c93f25;
  background: radial-gradient(circle at 30% 20%, #5ef18055, #27c93f22 55%, rgba(0,0,0,.1));
  display:grid; place-items:center;
  color: var(--accent);
  box-shadow:0 0 20px #27c93f10;
  flex: 0 0 auto;
}
.srv-icon i{ font-size:20px; }
.srv-meta{ min-width:0; }
.srv-meta strong{
  display:block; color:#fff; font-size:14px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:360px;
}
.srv-meta span{
  display:block; color:var(--muted); font-size:12px;
  margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:360px;
}
.srv-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; flex:0 0 auto; }
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.10);
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
}
.pill i{ font-size:14px; }
.pill.ok i{ color: var(--accent); }
.pill.warn i{ color: var(--warn); }

footer{
  padding:28px 10% 44px;
  border-top:1px solid var(--border);
  color:#666;
  text-align:center;
  background:#0d0f14;
}
footer a{ font-weight:600; }

@media (max-width: 1100px){
  .shell{ grid-template-columns: 1fr; }
  .sidebar{ position:relative; top:0; }
  .col-8{ grid-column: span 12; }
  .col-4{ grid-column: span 12; }
}
@media (max-width: 700px){
  header{ padding:18px 6%; flex-direction:column; gap:10px; }
  .shell{ padding:22px 6% 70px; }
  .hero{ padding:60px 6% 80px; }
  .auth-hero{ padding:60px 6% 80px; }
  .page-head h1{ font-size:26px; }
  .col-3{ grid-column: span 6; }
  .col-6{ grid-column: span 12; }
  .srv-meta strong, .srv-meta span{ max-width:220px; }
  .auth-wrap{ grid-template-columns:1fr; }
  .auth-info h1{ font-size:36px; }
}

.profile-link{
  display:block;
  text-decoration:none;
  color:inherit;
}

.profile-link .profile{
  cursor:pointer;
}

.profile-link .profile:hover{
  border-color: var(--accent);
  box-shadow: 0 0 20px #27c93f10;
  transform: translateY(-1px);
}