:root {
  --bg: #060711;
  --bg-soft: #0b0d18;
  --panel: rgba(18, 20, 34, 0.78);
  --panel-strong: rgba(25, 27, 45, 0.92);
  --panel-soft: rgba(255, 255, 255, 0.045);
  --line: rgba(160, 139, 255, 0.16);
  --line-strong: rgba(160, 139, 255, 0.34);
  --text: #f7f3ff;
  --muted: #a9a6ba;
  --purple: #8b5cf6;
  --purple-2: #5b21b6;
  --green: #22c55e;
  --red: #ef4444;
  --cyan: #06b6d4;
  --gold: #f59e0b;
  --pink: #ec4899;
  --orange: #f97316;
  --lime: #84cc16;
  --radius: 18px;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font: 14px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-width: 320px;
}

button, input, select, textarea {
  font: inherit;
}

button, .button-link {
  cursor: pointer;
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, var(--purple), #6d5dfc);
  border-radius: 12px;
  padding: 11px 16px;
  font-weight: 850;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 14px 32px rgba(139, 92, 246, 0.22);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, opacity .18s ease;
}

button:hover, .button-link:hover { transform: translateY(-1px); }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; }

input, select, textarea {
  width: 100%;
  color: var(--text);
  background: rgba(7, 8, 18, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px 13px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

input:focus, select:focus, textarea:focus {
  border-color: rgba(139, 92, 246, .72);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, .13);
  background: rgba(10, 12, 24, .95);
}

label { display: grid; gap: 8px; color: #dcd7ec; font-weight: 750; }
small, .muted { color: var(--muted); }
code { background: #08090d; border: 1px solid var(--line); border-radius: 7px; padding: 3px 6px; color: #d9c8ff; }

.layout {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% -10%, rgba(139, 92, 246, .22), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(6, 182, 212, .13), transparent 30%),
    linear-gradient(180deg, #080916 0%, #05060d 100%);
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  width: 292px;
  padding: 24px 18px;
  overflow: auto;
  background: linear-gradient(180deg, rgba(13, 15, 28, .96), rgba(7, 8, 16, .96));
  border-right: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.server-card {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px;
  border: 1px solid rgba(139, 92, 246, .38);
  background: linear-gradient(135deg, rgba(139, 92, 246, .18), rgba(255, 255, 255, .045));
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.server-card.big { padding: 18px; border-radius: 20px; }
.server-card strong { display: block; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.server-card small { display: block; color: var(--muted); margin-top: 2px; }
.server-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 950;
  background: linear-gradient(135deg, #17192a, #0a0b13);
  border: 1px solid rgba(255, 255, 255, .12);
}

.side-title {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 900;
  font-size: 11px;
  margin: 28px 4px 14px;
}

nav { display: grid; gap: 7px; }
nav a {
  position: relative;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #c9c4d8;
  text-decoration: none;
  font-weight: 850;
  padding: 12px 13px;
  border-radius: 13px;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
nav a:hover, nav a.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(139, 92, 246, .28), rgba(139, 92, 246, .07));
  box-shadow: inset 3px 0 0 var(--purple);
}
nav a:hover { transform: translateX(2px); }

[data-icon] { width: 20px; height: 20px; display: inline-grid; place-items: center; flex: 0 0 20px; }
[data-icon]::before { content: "◇"; }
[data-icon="home"]::before { content: "⌂"; }
[data-icon="server"]::before { content: "▤"; }
[data-icon="bot"]::before { content: "◉"; }
[data-icon="shield"]::before, [data-icon="guard"]::before { content: "◆"; }
[data-icon="staff"]::before, [data-icon="member"]::before { content: "♙"; }
[data-icon="role"]::before { content: "♢"; }
[data-icon="channel"]::before, [data-icon="hash"]::before { content: "#"; }
[data-icon="lock"]::before { content: "▣"; }
[data-icon="emoji"]::before { content: "☻"; }
[data-icon="sticker"]::before { content: "▧"; }
[data-icon="boolean"]::before { content: "✓"; }
[data-icon="string"]::before { content: "Aa"; font-size: 12px; font-weight: 950; }
[data-icon="limit"]::before { content: "∞"; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 78px;
  margin-left: 292px;
  padding: 14px 30px;
  display: flex;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 8, 17, .78);
  backdrop-filter: blur(18px);
}
.topbar h1 { margin: 0; flex: 1; min-width: 0; color: #dbcaff; font-size: clamp(21px, 2vw, 28px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.server-pill { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #d9c7ff; border: 1px solid rgba(139, 92, 246, .42); background: rgba(139, 92, 246, .13); border-radius: 999px; padding: 10px 14px; font-weight: 850; }
.logout, .danger { border: 1px solid rgba(239, 68, 68, .5); background: rgba(239, 68, 68, .12); color: #ff9a9a; box-shadow: none; }

.content { margin-left: 292px; padding: 30px; max-width: 1680px; }

.metric-grid, .card-grid, .guard-grid, .bot-grid, .media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}
.bot-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.media-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.metric, .panel, .hero-panel, .setting-card, .guard-card, .rank-card, .bot-card, .login-hero, .login-card {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.024));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}

.metric {
  min-height: 172px;
  padding: 24px;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: 10px;
  overflow: hidden;
  position: relative;
}
.metric::after { content: ""; position: absolute; inset: auto -35% -55% -35%; height: 100px; background: radial-gradient(circle, rgba(139,92,246,.18), transparent 60%); }
.metric-icon, .hero-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--purple), var(--purple-2));
  box-shadow: 0 18px 38px rgba(139, 92, 246, .24);
}
.hero-icon.small { width: 42px; height: 42px; border-radius: 13px; }
.metric.gold .metric-icon { background: linear-gradient(135deg, var(--gold), #f97316); }
.metric.cyan .metric-icon { background: linear-gradient(135deg, var(--cyan), #2563eb); }
.metric.green .metric-icon { background: linear-gradient(135deg, var(--green), #16a34a); }
.metric.purple .metric-icon { background: linear-gradient(135deg, var(--purple), #7c3aed); }
.metric.pink .metric-icon { background: linear-gradient(135deg, var(--pink), #be185d); }
.metric.orange .metric-icon { background: linear-gradient(135deg, var(--orange), #dc2626); }
.metric.lime .metric-icon { background: linear-gradient(135deg, var(--lime), #22c55e); }
.metric span { color: var(--muted); font-size: 11px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.metric strong { max-width: 100%; color: #eadfff; font-size: clamp(24px, 2.1vw, 34px); line-height: 1.06; overflow: hidden; text-overflow: ellipsis; }

.panel, .hero-panel { padding: 22px; }
.panel h2, .hero-panel h2, .login-card h2 { margin: 0 0 6px; font-size: 20px; }
.panel p, .hero-panel p { margin: 0; color: var(--muted); }
.panel + .panel, .hero-panel + .panel, .panel + .hero-panel { margin-top: 18px; }
.panel-head, .hero-panel.compact, .guard-top, .rank-head, .bot-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.panel-head, .hero-panel.compact { align-items: center; margin-bottom: 18px; }
.hero-panel.compact { margin-bottom: 18px; }
.hero-panel.compact > div:nth-child(2), .panel-head > div:nth-child(2) { flex: 1; min-width: 0; }

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.rows { display: grid; gap: 10px; }
.rows > div, .row-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 13px;
  background: rgba(7, 8, 18, .52);
}
.rows b { color: #e8dfff; }

.settings-grid { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.setting-card, .guard-card, .rank-card, .bot-card { padding: 17px; display: grid; gap: 14px; }
.setting-card.is-configured, .guard-card.is-configured, .bot-card.is-configured { border-color: rgba(34, 197, 94, .34); }
.setting-card.is-empty, .guard-card.is-empty, .bot-card.is-empty { border-color: rgba(239, 68, 68, .24); }
.setting-title { display: flex; align-items: center; gap: 10px; }
.setting-title strong { flex: 1; min-width: 0; }
.setting-title b { color: #cbb8ff; font-size: 12px; border: 1px solid var(--line); border-radius: 999px; padding: 5px 9px; }

.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.switch input { display: none; }
.switch > span:last-child {
  width: 52px;
  height: 30px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.1);
  transition: background .18s ease;
}
.switch > span:last-child::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  transition: transform .18s ease;
}
.switch input:checked + span { background: linear-gradient(135deg, var(--purple), #22c55e); }
.switch input:checked + span::before { transform: translateX(22px); }
.switch.line { padding: 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: rgba(7,8,18,.48); }
.switch-text { color: var(--muted); font-weight: 850; }

.picker { position: relative; display: grid; gap: 9px; }
.picked { min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background: rgba(7,8,18,.5); }
.picked em { color: var(--muted); font-style: normal; padding-left: 5px; }
.picked span, .chips span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  color: #e5dcff;
  background: rgba(139, 92, 246, .18);
  border: 1px solid rgba(139, 92, 246, .28);
  border-radius: 999px;
  font-weight: 780;
}
.picked button { width: 22px; height: 22px; padding: 0; border-radius: 50%; background: rgba(255,255,255,.12); box-shadow: none; }
.picker-options {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 250px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: rgba(12, 14, 27, .98);
  box-shadow: var(--shadow);
}
.picker-options button { width: 100%; justify-content: flex-start; background: transparent; box-shadow: none; border-radius: 10px; color: #ded8ee; }
.picker-options button:hover { background: rgba(139, 92, 246, .18); }

.alert { margin: 0 0 18px; padding: 13px 15px; border-radius: 14px; font-weight: 800; }
.alert.ok { color: #9af7bd; background: rgba(34, 197, 94, .11); border: 1px solid rgba(34, 197, 94, .32); }
.alert.danger, .danger { color: #ffaaa9; background: rgba(239, 68, 68, .12); border: 1px solid rgba(239, 68, 68, .34); }

.form-line, .mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: end; }
.select-wrap { display: grid; gap: 8px; }
.actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap; }
.actions.inline { justify-content: flex-start; }
.stack { display: grid; gap: 16px; }

.table { width: 100%; border-collapse: separate; border-spacing: 0 9px; }
.table th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; text-align: left; padding: 0 12px; }
.table td { padding: 13px 12px; background: rgba(7,8,18,.52); border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); }
.table td:first-child { border-left: 1px solid rgba(255,255,255,.07); border-radius: 12px 0 0 12px; }
.table td:last-child { border-right: 1px solid rgba(255,255,255,.07); border-radius: 0 12px 12px 0; }
.members td:first-child { font-weight: 850; }

.bot-head strong { display: block; font-size: 17px; }
.bot-head small { display: block; color: var(--muted); margin-top: 3px; }
.status { border-radius: 999px; padding: 5px 10px; font-size: 11px; font-weight: 900; white-space: nowrap; }
.status.online { background: rgba(34,197,94,.14); color: #8dffb5; border: 1px solid rgba(34,197,94,.32); }
.status.paused { background: rgba(245,158,11,.14); color: #ffd589; border: 1px solid rgba(245,158,11,.32); }
.status.offline { background: rgba(239,68,68,.14); color: #ff9a9a; border: 1px solid rgba(239,68,68,.32); }
.bot-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bot-meta span { background: rgba(7,8,18,.56); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 10px; color: var(--muted); }
.bot-meta b { color: var(--text); }
.log-box { white-space: pre-wrap; max-height: 520px; overflow: auto; background: rgba(4,5,10,.72); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 16px; color: #d8d5e7; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.modal { border: 1px solid var(--line); border-radius: 18px; background: #101220; color: var(--text); padding: 0; box-shadow: var(--shadow); }
.modal::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(4px); }
.modal-card { width: min(760px, 90vw); padding: 24px; display: grid; gap: 16px; }

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at 18% 12%, rgba(139,92,246,.28), transparent 34%),
    radial-gradient(circle at 85% 82%, rgba(6,182,212,.14), transparent 30%),
    #060711;
}
.login-shell { width: min(1080px, 100%); display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: stretch; }
.login-hero, .login-card { padding: clamp(26px, 4vw, 42px); }
.login-hero { display: grid; align-content: center; gap: 22px; min-height: 480px; }
.login-hero h1 { margin: 0; font-size: clamp(38px, 6vw, 68px); line-height: .98; letter-spacing: -.04em; }
.login-hero p { margin: 0; max-width: 620px; color: var(--muted); font-size: 18px; }
.login-card { display: grid; align-content: center; gap: 18px; }
.login-card h2 { font-size: 26px; }
.login-card button { width: 100%; min-height: 48px; }

@media (max-width: 1120px) {
  .sidebar { position: relative; width: auto; inset: auto; display: block; }
  .topbar, .content { margin-left: 0; }
  .topbar { position: relative; flex-wrap: wrap; }
  .content { padding: 20px; }
  .split, .login-shell, .form-line, .mini-grid { grid-template-columns: 1fr; }
  .server-pill { max-width: 170px; }
}

@media (max-width: 680px) {
  body { font-size: 13px; }
  .sidebar { padding: 18px 14px; }
  nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  nav a { padding: 10px; font-size: 12px; }
  .topbar { padding: 14px 16px; }
  .top-actions { width: 100%; justify-content: space-between; }
  .content { padding: 16px; }
  .metric-grid, .card-grid, .guard-grid, .bot-grid, .media-grid, .settings-grid { grid-template-columns: 1fr; }
  .panel, .hero-panel, .setting-card, .guard-card, .rank-card, .bot-card { padding: 16px; }
  .hero-panel.compact, .panel-head, .guard-top, .rank-head, .bot-head { align-items: stretch; flex-direction: column; }
  .bot-meta { grid-template-columns: 1fr; }
  .table { display: block; overflow-x: auto; white-space: nowrap; }
  .login-page { padding: 16px; }
  .login-hero { min-height: auto; }
}

/* Admin redesign overrides */
.admin-layout {
  background:
    radial-gradient(circle at 20% -10%, rgba(88, 80, 255, .28), transparent 34%),
    radial-gradient(circle at 92% 8%, rgba(14, 165, 233, .16), transparent 30%),
    linear-gradient(135deg, #060816 0%, #0a0d1f 45%, #05060d 100%);
}
.admin-sidebar { width: 304px; padding: 22px 16px; }
.brand-card, .operator-card {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  border-radius: 20px; padding: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.brand-mark {
  width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(135deg, #8b5cf6, #2563eb); color: #fff; font-weight: 950; font-size: 20px;
  box-shadow: 0 18px 36px rgba(79,70,229,.3);
}
.brand-mark.large { width: 64px; height: 64px; border-radius: 22px; font-size: 28px; }
.brand-copy strong, .login-brand strong { display:block; font-size: 17px; letter-spacing: -.02em; }
.brand-copy small, .login-brand small { color: var(--muted); }
.operator-card { margin-top: 14px; background: rgba(8,10,24,.62); }
.operator-avatar { width: 38px; height: 38px; border-radius: 13px; display:grid; place-items:center; background: rgba(139,92,246,.18); color:#dacbff; font-weight:900; }
.operator-card div { flex: 1; min-width: 0; }
.operator-card small { display:block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.operator-card strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.operator-card i, .live-pill i { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 18px #22c55e; }
.admin-nav a { border: 1px solid transparent; }
.admin-nav a b { font-size: 12px; letter-spacing: .01em; }
.admin-nav a.active { border-color: rgba(139,92,246,.28); }
.admin-topbar { margin-left: 304px; min-height: 84px; background: rgba(7,9,22,.72); }
.topbar-title small, .eyebrow, .form-head small {
  display:block; color:#8ea0ff; text-transform:uppercase; letter-spacing:.12em; font-weight:900; font-size:11px;
}
.topbar-title h1 { margin: 2px 0 0; color:#fff; }
.live-pill { display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(34,197,94,.24); background:rgba(34,197,94,.1); color:#a7f3c1; border-radius:999px; padding:10px 13px; font-weight:850; }
.admin-content { margin-left: 304px; padding: 28px; }
.dashboard-hero {
  display:grid; grid-template-columns: minmax(0, 1fr) 320px; gap:22px; align-items:stretch;
  padding: 28px; border:1px solid rgba(255,255,255,.1); border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(139,92,246,.24), rgba(6,182,212,.08)),
    rgba(255,255,255,.035);
  box-shadow: var(--shadow); overflow:hidden; position:relative;
}
.dashboard-hero::after { content:""; position:absolute; right:-120px; top:-120px; width:320px; height:320px; border-radius:50%; background:rgba(139,92,246,.16); filter: blur(4px); }
.dashboard-hero > * { position:relative; z-index:1; }
.dashboard-hero h2 { margin: 10px 0 10px; font-size: clamp(34px, 4vw, 58px); line-height: .98; letter-spacing: -.055em; max-width: 860px; }
.dashboard-hero p { margin:0; color:#c1bfd0; font-size:16px; max-width: 720px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
.button-link.ghost { background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); box-shadow:none; }
.health-card { border:1px solid rgba(255,255,255,.12); background:rgba(5,7,18,.62); border-radius:24px; padding:20px; display:grid; gap:12px; align-content:center; }
.health-card small { text-transform:uppercase; letter-spacing:.1em; font-weight:900; }
.health-card strong { font-size:22px; line-height:1.1; }
.health-card p { font-size:13px; }
.health-ring { width:112px; height:112px; border-radius:50%; display:grid; place-items:center; margin:8px auto; background: conic-gradient(#22c55e 0 78%, rgba(255,255,255,.1) 78%); }
.health-ring.offline { background: conic-gradient(#ef4444 0 38%, rgba(255,255,255,.1) 38%); }
.health-ring span { width:76px; height:76px; border-radius:50%; display:grid; place-items:center; background:#080a18; font-weight:950; }
.kpi-grid { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:16px; margin-top:18px; }
.kpi-card { position:relative; overflow:hidden; padding:20px; border-radius:22px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.045); box-shadow:0 18px 60px rgba(0,0,0,.24); }
.kpi-card::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:#8b5cf6; }
.kpi-card span { color:var(--muted); font-weight:850; }
.kpi-card strong { display:block; margin:8px 0; font-size:34px; letter-spacing:-.04em; }
.kpi-card small { color:#9c99ad; }
.kpi-card.accent-cyan::before { background:#06b6d4; } .kpi-card.accent-green::before { background:#22c55e; } .kpi-card.accent-purple::before { background:#8b5cf6; } .kpi-card.accent-gold::before { background:#f59e0b; }
.admin-grid { display:grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); gap:18px; margin-top:18px; }
.panel-head.clean { border-bottom:0; padding-bottom:0; margin-bottom:16px; }
.quick-actions { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; }
.quick-actions a { display:grid; gap:7px; text-decoration:none; color:var(--text); padding:16px; border-radius:16px; background:rgba(7,8,18,.55); border:1px solid rgba(255,255,255,.08); transition:.18s; }
.quick-actions a:hover { transform: translateY(-2px); border-color:rgba(139,92,246,.45); background:rgba(139,92,246,.12); }
.quick-actions span { color:#cbb8ff; }
.quick-actions b { font-size:15px; }
.quick-actions small { color:var(--muted); }
.stat-list { display:grid; gap:10px; }
.stat-list div { display:flex; align-items:center; justify-content:space-between; padding:14px; border-radius:15px; background:rgba(7,8,18,.55); border:1px solid rgba(255,255,255,.07); }
.stat-list span { color:var(--muted); font-weight:750; } .stat-list b { font-size:22px; }
.ops-panel { margin-top:18px; }
.ops-timeline { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:12px; }
.ops-timeline div { padding:15px; border-radius:16px; background:rgba(7,8,18,.52); border:1px solid rgba(255,255,255,.08); display:grid; gap:7px; }
.ops-timeline i { width:11px; height:11px; border-radius:50%; background:#8b5cf6; box-shadow:0 0 18px rgba(139,92,246,.7); }
.ops-timeline .done i { background:#22c55e; box-shadow:0 0 18px rgba(34,197,94,.7); }
.ops-timeline span { color:var(--muted); }
.admin-login { background:
  radial-gradient(circle at 8% 18%, rgba(139,92,246,.34), transparent 30%),
  radial-gradient(circle at 88% 75%, rgba(6,182,212,.2), transparent 28%),
  linear-gradient(135deg, #050713, #090d20 52%, #05060d);
}
.admin-login-shell { width:min(1180px, calc(100vw - 42px)); grid-template-columns: 1.08fr .92fr; }
.admin-login-hero { min-height:620px; border-radius:32px; padding:44px; background:linear-gradient(145deg, rgba(139,92,246,.22), rgba(255,255,255,.035)); position:relative; overflow:hidden; }
.admin-login-hero::after { content:""; position:absolute; width:360px; height:360px; right:-160px; bottom:-130px; border-radius:50%; background:rgba(6,182,212,.16); }
.login-badge { width:max-content; display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:999px; border:1px solid rgba(34,197,94,.24); color:#b8f7cf; background:rgba(34,197,94,.1); font-weight:850; }
.login-badge span { width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 16px #22c55e; }
.login-brand { display:flex; align-items:center; gap:14px; margin-top:34px; }
.admin-login-hero h1 { font-size: clamp(42px, 6vw, 76px); max-width:760px; margin:44px 0 18px; }
.login-feature-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px; margin-top:34px; }
.login-feature-grid div { border:1px solid rgba(255,255,255,.1); background:rgba(5,7,18,.48); border-radius:18px; padding:16px; }
.login-feature-grid b { display:block; } .login-feature-grid small { color:var(--muted); }
.login-card-wrap { display:grid; align-items:center; }
.admin-login-card { border-radius:30px; padding:38px; background:rgba(10,13,30,.82); }
.form-head { display:flex; align-items:center; gap:14px; margin-bottom:8px; }
.form-icon { width:48px; height:48px; border-radius:16px; display:grid; place-items:center; background:linear-gradient(135deg, #8b5cf6, #2563eb); font-weight:950; }
.login-note { margin:0; color:var(--muted); text-align:center; font-size:12px; }
@media (max-width:1120px){
  .admin-topbar, .admin-content { margin-left:0; }
  .dashboard-hero, .admin-grid, .admin-login-shell { grid-template-columns:1fr; }
  .kpi-grid, .ops-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-login-hero { min-height:auto; }
}
@media (max-width:680px){
  .dashboard-hero { padding:20px; border-radius:22px; }
  .dashboard-hero h2 { font-size:36px; }
  .kpi-grid, .quick-actions, .ops-timeline, .login-feature-grid { grid-template-columns:1fr; }
  .admin-login-shell { width:100%; }
  .admin-login-hero, .admin-login-card { padding:24px; border-radius:24px; }
}

/* Acimasiz console theme */
:root {
  --bg: #050609;
  --panel: #11131b;
  --panel-strong: #171923;
  --line: rgba(255,255,255,.075);
  --line-strong: rgba(99,102,241,.35);
  --text: #f8f8fb;
  --muted: #777b8c;
  --purple: #5b3df5;
  --purple-2: #7521d0;
  --green: #00c99a;
  --red: #ff3d6e;
  --gold: #ffb800;
  --radius: 25px;
}
body { background:#050609; font-family:Inter,system-ui,sans-serif; }
.layout, .admin-layout { min-height:100vh; background:#050609; }
.sidebar, .admin-sidebar {
  width:240px; padding:20px 16px 26px; background:#08090d; border-right:1px solid #191b22;
  scrollbar-width:thin; scrollbar-color:#34363e transparent;
}
.brand-card { border:0; background:transparent; box-shadow:none; padding:0 0 20px; border-radius:0; }
.brand-mark { width:40px; height:40px; border-radius:12px; font-size:23px; background:linear-gradient(135deg,#7048ff,#7d2eff); box-shadow:0 10px 28px rgba(108,67,255,.35); }
.brand-copy strong { font-size:16px; }
.brand-copy small { font-size:11px; color:#747888; }
.operator-card { margin:13px -1px 24px; padding:16px; min-height:74px; border-radius:13px; border-color:rgba(110,72,255,.35); background:#181126; }
.operator-avatar { width:38px; height:38px; border-radius:50%; color:#fff; background:#050609; border:1px solid #30323b; }
.operator-card small { font-size:8px; color:#666b7c; text-transform:none; letter-spacing:0; }
.operator-card i { display:none; }
.side-title,.nav-group { color:#4d505b; text-transform:uppercase; letter-spacing:.18em; font-weight:900; font-size:9px; }
.side-title { margin:0 0 9px; }
.nav-group { display:block; margin:21px 12px 7px; }
.admin-nav { gap:2px; }
.admin-nav a { min-height:38px; padding:9px 11px; color:#c2c5cf; border-radius:9px; }
.admin-nav a b { font-size:11px; font-weight:500; }
.admin-nav a:hover,.admin-nav a.active { color:#fff; transform:none; border-color:rgba(99,102,241,.16); background:rgba(88,62,235,.13); box-shadow:inset 2px 0 #6d58ff; }
.sidebar-logout { margin-top:22px; }
.sidebar-logout button { width:100%; justify-content:center; }
[data-icon] { color:#8c90a0; }
.admin-content,.content { margin-left:240px; padding:38px 32px 52px; max-width:none; }
.admin-topbar { display:none; }
button,.button-link { min-height:44px; border-radius:10px; text-transform:uppercase; font-size:12px; background:#5538ee; box-shadow:0 6px 0 rgba(56,35,174,.55); }
input,select,textarea { min-height:44px; border-radius:10px; color:#f5f5f8; background:#161822; border-color:#282b36; }
label { color:#aeb1be; font-size:12px; }
.panel,.hero-panel,.setting-card,.guard-card,.rank-card,.bot-card,.login-hero,.login-card {
  background:#11131b; border:1px solid #22252f; border-radius:var(--radius); box-shadow:none; backdrop-filter:none;
}
.panel,.hero-panel { padding:28px; }
.panel h2,.hero-panel h2 { font-family:Montserrat,Inter,sans-serif; font-weight:900; text-transform:uppercase; }
.hero-panel.compact { min-height:104px; background:transparent; border:0; padding:0 0 24px; border-radius:0; }
.hero-panel.compact .hero-icon { background:transparent; color:#6f63ff; box-shadow:none; }
.hero-panel.compact h2 { font-size:34px; font-style:italic; }
.hero-panel.compact p { color:#727687; }
.hero-panel.compact button { min-width:170px; }
.console-heading { margin:0 0 40px; }
.console-heading .eyebrow { color:#00d39f; font-size:10px; letter-spacing:.22em; }
.console-heading h1 { margin:7px 0 3px; font:italic 900 clamp(38px,4vw,54px)/1 Montserrat,Inter,sans-serif; text-transform:uppercase; letter-spacing:-.055em; }
.console-heading p { margin:0; max-width:720px; color:#626675; font-size:14px; }
.kpi-grid { gap:24px; margin:0 0 40px; }
.kpi-card { min-height:106px; display:flex; align-items:center; justify-content:space-between; padding:24px; border-radius:31px; background:#11131b; border:1px solid #22242d; box-shadow:0 20px 32px rgba(38,39,115,.12); }
.kpi-card::before { display:none; }
.kpi-card span { display:block; color:#666977; font-size:10px; text-transform:uppercase; letter-spacing:.06em; font-weight:900; }
.kpi-card strong { margin:6px 0 0; font:900 24px/1 Montserrat,Inter,sans-serif; }
.kpi-card > i { width:56px; height:56px; display:grid; place-items:center; flex:0 0 56px; border-radius:16px; border:1px solid #2a2d37; background:#1b1d26; color:#6e6dff; font-size:30px; font-style:normal; }
.kpi-card.accent-green { box-shadow:0 20px 34px rgba(0,201,154,.11); }
.kpi-card.accent-green > i { color:#00d6a4; }
.kpi-card.accent-pink { box-shadow:0 20px 34px rgba(255,61,110,.11); }
.kpi-card.accent-pink > i { color:#ff4c76; }
.kpi-card.accent-gold { box-shadow:0 20px 34px rgba(255,184,0,.1); }
.kpi-card.accent-gold > i { color:#ffc400; }
.overview-grid { display:grid; grid-template-columns:minmax(0,2.08fr) minmax(340px,1fr); gap:32px; align-items:stretch; }
.activity-panel { min-height:550px; padding:42px; overflow:hidden; }
.activity-panel .panel-head h2 { margin:0; font-size:24px; }
.activity-panel .panel-head small { color:#555969; text-transform:uppercase; font-size:10px; font-weight:800; }
.chart-legend { display:flex; gap:16px; color:#6e7283; font-size:9px; text-transform:uppercase; }
.chart-legend b:first-child { color:#6967ff; }.chart-legend b:last-child { color:#00c99a; }
.activity-chart { display:block; width:100%; height:405px; margin-top:16px; overflow:visible; }
.chart-lines line { stroke:#1b1e27; stroke-width:1; stroke-dasharray:3 4; }
.chart-fill { fill:url(#chartFill); }.chart-stroke { fill:none; stroke:#6768ff; stroke-width:3; }.voice-stroke { fill:none; stroke:#00c99a; stroke-width:3; }
.overview-side { display:grid; gap:32px; grid-template-rows:315px minmax(230px,1fr); }
.control-card { padding:38px 40px; border-radius:39px; background:linear-gradient(145deg,#5234ff,#7d16c3); box-shadow:0 24px 42px rgba(88,40,224,.26); }
.control-card h2 { margin:0 0 22px; font:900 23px Montserrat,Inter,sans-serif; text-transform:uppercase; }
.control-card a { min-height:82px; display:flex; align-items:center; gap:16px; margin-top:15px; padding:16px 20px; color:#fff; text-decoration:none; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14); border-radius:15px; }
.control-card a i { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:rgba(255,255,255,.1); font-style:normal; font-size:22px; }
.control-card a b { flex:1; font-size:12px; text-transform:uppercase; }.control-card a span { opacity:.4; }
.health-panel { padding:38px 40px; }
.health-panel h2 { margin:0 0 25px; font-size:19px; }
.health-panel label { display:grid; grid-template-columns:1fr auto; gap:8px; margin:18px 0; text-transform:uppercase; font-size:9px; color:#666a79; font-weight:900; }
.health-panel label > i { grid-column:1/-1; display:block; height:6px; border-radius:99px; background:#20222a; overflow:hidden; }
.health-panel label em { display:block; height:100%; min-width:10px; border-radius:99px; background:#00c99a; }
.health-panel label b { color:#b7bdcf; }
.health-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:22px; }
.health-stats span { padding:12px; border-radius:12px; background:#171923; text-align:center; }.health-stats small { display:block; text-transform:uppercase; font-size:8px; }.health-stats b { font-size:18px; }
.guard-grid,.settings-grid,.bot-grid,.card-grid { gap:16px; }
.guard-card,.setting-card,.bot-card,.rank-card { background:#171923; border-radius:17px; border-color:#282b36; }
.guard-card { padding:20px; }
.switch > span:last-child { width:48px; height:25px; padding:3px; }.switch > span:last-child::before { width:17px; height:17px; }.switch input:checked + span { background:#5538ff; }.switch input:checked + span::before { transform:translateX(23px); }
.split { gap:30px; }.rows > div,.row-form { background:#171923; border-color:#292c35; }
.picker-search,.picked { background:#161822; border-color:#292c36; }.picker-options { background:#11131b; }
.bot-card.is-configured,.guard-card.is-configured,.setting-card.is-configured { border-color:rgba(99,102,241,.34); }
.bot-card.is-empty,.guard-card.is-empty,.setting-card.is-empty { border-color:#282b36; }
.table > div { display:grid; grid-template-columns:1fr auto auto; gap:18px; align-items:center; margin:9px 0; padding:16px; border:1px solid #282b35; border-radius:14px; background:#171923; }
.media-grid > div { padding:15px; border:1px solid #282b35; border-radius:15px; background:#171923; }
.members img,.media-grid img { width:42px; height:42px; border-radius:12px; object-fit:cover; vertical-align:middle; }
.ops-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin:0 0 26px; }
.ops-card { min-height:132px; padding:22px; border:1px solid #282b36; border-radius:18px; background:#11131b; }
.ops-card span { display:block; color:#737887; font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:900; }
.ops-card strong { display:block; margin:10px 0 6px; font:900 34px/1 Montserrat,Inter,sans-serif; }
.ops-card small { color:#727687; }
.ops-card.accent-green strong { color:#00d6a4; }
.ops-card.accent-purple strong { color:#8b75ff; }
.ops-card.accent-cyan strong { color:#1ec7df; }
.ops-card.accent-gold strong { color:#ffc34d; }
.system-grid,.map-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; margin:0 0 24px; }
.stack { display:grid; gap:16px; }
.compact-form { padding:14px; border:1px solid #282b36; border-radius:16px; background:#151720; }
.status-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.status-list span { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px; border:1px solid #282b36; border-radius:14px; background:#171923; }
.status-list b { color:#d8dbea; }
.status-list em { min-width:34px; min-height:34px; display:grid; place-items:center; border-radius:10px; background:#211b49; color:#8f7cff; font-style:normal; font-weight:900; }
.team-form { display:grid; grid-template-columns:1fr 1fr 1fr 1fr auto; gap:14px; align-items:end; }
.team-list { display:grid; gap:10px; }
.team-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px; border:1px solid #282b36; border-radius:14px; background:#171923; }
.team-row span,.row-form span { display:grid; gap:3px; min-width:0; }
.team-row b,.row-form b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-chart { display:grid; gap:15px; }
.bar-chart label,.voice-list div { display:grid; grid-template-columns:96px 1fr 34px; gap:12px; align-items:center; }
.bar-chart i,.voice-list i { display:block; height:10px; border-radius:99px; overflow:hidden; background:#20232d; }
.bar-chart em,.voice-list em { display:block; height:100%; min-width:8px; border-radius:99px; background:linear-gradient(90deg,#5b45ff,#18c7dd); }
.bar-chart b { text-align:right; color:#d8dbea; }
.donut-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.donut-stat { min-height:128px; display:grid; place-items:center; align-content:center; gap:7px; border:1px solid #282b36; border-radius:18px; background:radial-gradient(circle at 50% 42%,#242044 0 26%,#171923 27%); text-align:center; }
.donut-stat strong { font:900 30px/1 Montserrat,Inter,sans-serif; color:#fff; }
.donut-stat span { color:#858b9b; font-size:10px; text-transform:uppercase; letter-spacing:.1em; font-weight:900; }
.role-heat,.voice-list { display:grid; gap:10px; }
.role-heat div { display:grid; grid-template-columns:16px 1fr auto; gap:10px; align-items:center; padding:12px; border-radius:13px; background:#171923; border:1px solid #282b36; }
.role-heat span { width:12px; height:12px; border-radius:4px; background:var(--role-color); box-shadow:0 0 18px var(--role-color); }
.role-heat b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.role-heat em { color:#8f94a3; font-style:normal; font-weight:900; }
.voice-list div { grid-template-columns: minmax(120px,180px) 1fr; padding:12px; border-radius:13px; background:#171923; border:1px solid #282b36; }
.voice-list span { display:grid; gap:2px; min-width:0; }
.voice-list b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.layer-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.layer-grid article { min-height:98px; padding:18px; border:1px solid #282b36; border-radius:16px; background:#171923; }
.layer-grid span { display:block; color:#777d8d; font-size:10px; text-transform:uppercase; letter-spacing:.1em; font-weight:900; }
.layer-grid strong { display:block; margin-top:8px; font:900 30px/1 Montserrat,Inter,sans-serif; }
@media(max-width:1200px){.overview-grid{grid-template-columns:1fr}.overview-side{grid-template-columns:1fr 1fr;grid-template-rows:auto}.activity-panel{min-height:480px}.sidebar,.admin-sidebar{position:relative;width:auto}.admin-content,.content{margin-left:0}.admin-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.nav-group{grid-column:1/-1}}
@media(max-width:1200px){.ops-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.system-grid,.map-grid,.team-form{grid-template-columns:1fr}.team-form{align-items:stretch}}
@media(max-width:760px){.admin-content,.content{padding:24px 16px}.kpi-grid,.ops-grid{grid-template-columns:1fr}.overview-side{grid-template-columns:1fr}.activity-panel{padding:22px;min-height:420px}.activity-chart{height:300px}.control-card,.health-panel{padding:26px}.hero-panel.compact h2{font-size:26px}.panel-head{flex-direction:column}.table>div{grid-template-columns:1fr}.admin-nav{grid-template-columns:1fr}.status-list,.donut-row,.layer-grid{grid-template-columns:1fr}.bar-chart label,.voice-list div{grid-template-columns:1fr}.team-row,.row-form{flex-direction:column;align-items:stretch}}