:root {
  color-scheme: dark;
  --bg: #030711;
  --bg-soft: #06101c;
  --surface: rgba(7, 18, 32, 0.88);
  --surface-strong: rgba(9, 24, 42, 0.96);
  --surface-muted: rgba(6, 15, 28, 0.72);
  --line: rgba(93, 154, 205, 0.20);
  --line-strong: rgba(68, 178, 255, 0.42);
  --text: #edf6ff;
  --text-soft: #bfd4e8;
  --muted: #7f9db6;
  --blue: #078fff;
  --blue-2: #10c7ff;
  --green: #19d18f;
  --red: #ff4778;
  --amber: #ffb020;
  --shadow: 0 24px 90px rgba(0, 0, 0, 0.42);
  --radius: 8px;
}

/* BAKIShield 4 panel identity: black surfaces, red controls, white content. */
body.panel-body {
  --bg: #050506;
  --bg-soft: #0a0a0c;
  --surface: rgba(12, 12, 14, 0.94);
  --surface-strong: rgba(17, 17, 20, 0.98);
  --surface-muted: rgba(9, 9, 11, 0.82);
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(225, 32, 52, 0.58);
  --text: #ffffff;
  --text-soft: #eeeeef;
  --muted: #9b9ba3;
  --blue: #e12034;
  --blue-2: #ff4b5e;
  --red: #ff344b;
  background:
    radial-gradient(circle at 82% -10%, rgba(225, 32, 52, 0.16), transparent 30%),
    linear-gradient(180deg, #050506 0%, #08080a 58%, #030304 100%);
}

body.panel-body::before {
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 72px 72px;
}

body.panel-body .panel-sidebar {
  background: linear-gradient(180deg, #09090b, #050506 72%);
  border-right: 1px solid rgba(255,255,255,.08);
}

body.panel-body .panel-topbar,
body.panel-body .panel,
body.panel-body .command-center,
body.panel-body .server-dashboard {
  border-color: rgba(255,255,255,.09);
  box-shadow: 0 24px 70px rgba(0,0,0,.48);
}

body.panel-body .panel-nav a.active,
body.panel-body .panel-nav a:hover,
body.panel-body .server-root {
  border-color: rgba(225,32,52,.42);
  background: linear-gradient(90deg, rgba(225,32,52,.22), rgba(225,32,52,.06));
}

body.panel-body .nav-icon,
body.panel-body .eyebrow,
body.panel-body a:hover { color: #ff4b5e; }
body.panel-body .brand-logo { filter: drop-shadow(0 0 16px rgba(225,32,52,.52)); }
body.panel-body .button.primary,
body.panel-body button.primary { background: linear-gradient(135deg, #e12034, #9f1020); border-color: #ff4b5e; color: #fff; }
body.panel-body input:focus,
body.panel-body select:focus,
body.panel-body textarea:focus { border-color: #e12034; box-shadow: 0 0 0 3px rgba(225,32,52,.13); }

.admin-section-label { color: #ff4b5e !important; margin-top: 18px; }
.admin-nav-block { padding: 0 8px; }
.nav-badge.admin { background: #e12034; color: #fff; }
.administration-mode .main { border-top: 2px solid #e12034; }
.administration-mode .page-hero { border-color: rgba(225,32,52,.34); background: radial-gradient(circle at 85% 10%, rgba(225,32,52,.18), transparent 34%), #0b0b0d; }

.admin-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.admin-metrics article { padding: 16px; border: 1px solid rgba(255,255,255,.09); border-top: 2px solid #e12034; border-radius: 8px; background: #0d0d10; }
.admin-metrics span, .admin-license-row small { display: block; color: var(--muted); font-size: 12px; }
.admin-metrics strong { display: block; margin-top: 7px; color: #fff; font-size: 28px; }
.admin-create-license { display: grid; grid-template-columns: 1fr 220px auto; gap: 12px; align-items: end; margin: 14px 0 20px; }
.admin-license-list { display: grid; gap: 8px; }
.admin-license-row { display: grid; grid-template-columns: minmax(180px,1fr) minmax(220px,1fr) auto 150px; gap: 12px; align-items: center; padding: 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 7px; background: #09090b; }
.admin-license-row code { color: #fff; }
@media (max-width: 1050px) { .admin-metrics { grid-template-columns: repeat(2,1fr); } .admin-create-license, .admin-license-row { grid-template-columns: 1fr; } }

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 20% 0%, rgba(0, 143, 255, 0.20), transparent 32%),
    radial-gradient(circle at 82% 20%, rgba(16, 199, 255, 0.13), transparent 28%),
    linear-gradient(180deg, #030711 0%, #040913 52%, #02050c 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(43, 126, 190, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 126, 190, 0.055) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: linear-gradient(180deg, black, transparent 86%);
}

body > * {
  position: relative;
  z-index: 1;
}

a {
  color: inherit;
  text-decoration: none;
}

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

button {
  cursor: pointer;
}

.shell {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.nav {
  position: sticky;
  top: 16px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 64px;
  margin-top: 16px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(3, 8, 16, 0.80);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: max-content;
  font-weight: 900;
  letter-spacing: 0;
}

.brand-logo {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(0, 162, 255, 0.78));
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.nav-links a:hover,
.side-links a:hover {
  color: var(--text);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 17px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  background: rgba(9, 26, 45, 0.86);
  font-weight: 900;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.button:hover {
  transform: translateY(-1px);
  border-color: var(--line-strong);
}

.button.primary {
  border-color: transparent;
  color: #001726;
  background: linear-gradient(135deg, var(--blue), var(--blue-2));
  box-shadow: 0 14px 32px rgba(7, 143, 255, 0.28);
}

.hero {
  display: grid;
  align-items: center;
  min-height: calc(100vh - 84px);
  margin-top: -80px;
  padding: 160px 0 72px;
  border-bottom: 1px solid rgba(68, 178, 255, 0.20);
  background:
    linear-gradient(90deg, rgba(3, 7, 17, 0.98), rgba(3, 7, 17, 0.82) 42%, rgba(3, 7, 17, 0.28) 70%),
    linear-gradient(180deg, rgba(3, 7, 17, 0.08), rgba(3, 7, 17, 0.94) 92%),
    url("/assets/bakishield-bg.png") center right / cover no-repeat;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(340px, 470px);
  gap: 34px;
  align-items: end;
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.hero-copy {
  width: min(720px, 100%);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(16, 199, 255, 0.32);
  border-radius: 999px;
  color: #9fe4ff;
  background: rgba(7, 143, 255, 0.12);
  font-size: 13px;
  font-weight: 900;
}

.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 14px var(--green);
}

.hero h1 {
  margin: 18px 0 0;
  font-size: clamp(58px, 11vw, 126px);
  line-height: 0.92;
  letter-spacing: 0;
  text-shadow: 0 0 42px rgba(7, 143, 255, 0.35);
}

.hero p {
  max-width: 660px;
  margin: 24px 0 0;
  color: var(--text-soft);
  font-size: 19px;
  line-height: 1.62;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 12px;
  width: min(610px, 100%);
  margin-top: 42px;
}

.hero-dashboard {
  align-self: end;
  overflow: hidden;
  border: 1px solid rgba(68, 178, 255, 0.30);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(7, 22, 39, 0.88), rgba(2, 7, 15, 0.94)),
    radial-gradient(circle at 20% 0%, rgba(16, 199, 255, 0.18), transparent 36%);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
}

.mock-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 58px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(68, 178, 255, 0.16);
  color: var(--text-soft);
  font-weight: 950;
}

.mock-head strong {
  color: var(--green);
  font-size: 13px;
}

.mock-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(68, 178, 255, 0.12);
}

.mock-grid div {
  padding: 18px;
  background: rgba(4, 13, 24, 0.88);
}

.mock-grid span,
.signal-row span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.mock-grid strong {
  display: block;
  margin-top: 8px;
  font-size: 25px;
}

.signal-list,
.stack-list {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.signal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(68, 178, 255, 0.16);
  border-radius: 7px;
  background: rgba(2, 8, 17, 0.64);
}

.signal-row strong {
  color: var(--text);
  font-size: 13px;
}

.signal-row.success strong {
  color: var(--green);
}

.signal-row.warn strong {
  color: var(--amber);
}

.signal-row.danger strong {
  color: var(--red);
}

.hero-stats div,
.metric,
.card,
.panel,
.license-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(10, 28, 48, 0.90), rgba(5, 12, 23, 0.94));
  box-shadow: var(--shadow);
}

.hero-stats div {
  padding: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12px);
}

.hero-stats strong,
.hero-stats span {
  display: block;
}

.hero-stats strong {
  font-size: 22px;
  line-height: 1;
}

.hero-stats span {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.section {
  padding: 68px 0;
}

.split-section {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.75fr);
  gap: 22px;
  align-items: start;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(7, 18, 32, 0.86), rgba(3, 8, 16, 0.66)),
    url("/assets/bakishield-bg.png") center right / cover no-repeat;
  box-shadow: var(--shadow);
}

.split-section .stack-list {
  padding: 0;
}

.section h2,
.main h1 {
  margin: 0;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.05;
  letter-spacing: 0;
}

.section-lead {
  max-width: 680px;
  margin: 12px 0 24px;
  color: var(--muted);
  line-height: 1.6;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.card {
  position: relative;
  overflow: hidden;
  padding: 24px;
}

.card::before,
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(16, 199, 255, 0.14), transparent 36%);
}

.card > *,
.panel > * {
  position: relative;
  z-index: 1;
}

.card h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

.card p,
.muted,
.panel p {
  color: var(--muted);
}

.price {
  margin: 24px 0;
  font-size: 42px;
  line-height: 1;
  font-weight: 950;
  text-shadow: 0 0 22px rgba(7, 143, 255, 0.26);
}

.card.featured {
  border-color: rgba(237, 246, 255, 0.72);
  background:
    linear-gradient(180deg, rgba(7, 55, 105, 0.62), rgba(5, 12, 23, 0.96)),
    linear-gradient(135deg, rgba(16, 199, 255, 0.22), transparent);
}

.card-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 14px;
  padding: 0 10px;
  border: 1px solid rgba(16, 199, 255, 0.34);
  border-radius: 999px;
  color: #aeeaff;
  background: rgba(7, 143, 255, 0.14);
  font-size: 12px;
  font-weight: 950;
}

.plan-list,
.check-list {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  color: var(--text-soft);
  font-size: 14px;
}

.plan-list li,
.check-list li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}

.plan-list li::before,
.check-list li::before {
  content: "";
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--blue-2);
  box-shadow: 0 0 13px rgba(16, 199, 255, 0.72);
}

.layout {
  display: grid;
  grid-template-columns: 274px minmax(0, 1fr);
  min-height: 100vh;
}

.layout > * {
  min-width: 0;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 16px;
  border-right: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(4, 18, 32, 0.98), rgba(2, 7, 15, 0.98)),
    url("/assets/bakishield-logo.png") center 80% / 240px auto no-repeat;
}

.sidebar .brand {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(9, 30, 52, 0.84);
}

.side-links {
  display: grid;
  gap: 6px;
  margin-top: 24px;
}

.side-links a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 7px;
  color: #b8cfe2;
  font-size: 14px;
  font-weight: 850;
}

.side-links a.active {
  color: white;
  background: linear-gradient(135deg, rgba(7, 143, 255, 0.88), rgba(13, 85, 156, 0.70));
  box-shadow: 0 14px 30px rgba(7, 143, 255, 0.18);
}

.main {
  min-width: 0;
  padding: 24px;
  background:
    radial-gradient(circle at 80% 0%, rgba(7, 143, 255, 0.11), transparent 26%),
    linear-gradient(rgba(43, 126, 190, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 126, 190, 0.04) 1px, transparent 1px);
  background-size: auto, 72px 72px, 72px 72px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 22px;
}

.topbar p {
  margin: 8px 0 0;
}

.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 430px);
  gap: 22px;
  align-items: stretch;
  margin-bottom: 22px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(5, 13, 26, 0.96), rgba(5, 13, 26, 0.74)),
    url("/assets/bakishield-bg.png") center right / cover no-repeat;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.page-hero h1 {
  margin-top: 12px;
}

.page-hero p {
  max-width: 640px;
  margin: 12px 0 0;
  color: var(--text-soft);
  line-height: 1.6;
}

.hero-logo-card {
  display: grid;
  place-items: center;
  min-height: 220px;
  border: 1px solid rgba(68, 178, 255, 0.22);
  border-radius: var(--radius);
  background: rgba(2, 8, 17, 0.60);
}

.hero-logo-card img {
  width: min(260px, 78%);
  filter: drop-shadow(0 0 30px rgba(7, 143, 255, 0.50));
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 22px 0;
}

.kpi {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(10, 28, 48, 0.82), rgba(5, 12, 23, 0.94));
}

.kpi span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.kpi strong {
  display: block;
  margin-top: 10px;
  font-size: 28px;
  line-height: 1;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.panel-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.78fr) minmax(420px, 1fr);
  gap: 18px;
}

.config-header {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(420px, 0.9fr);
  gap: 22px;
  align-items: start;
  margin-bottom: 18px;
}

.config-header h1 {
  margin-top: 14px;
}

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

.field.compact {
  flex: 1 1 260px;
  margin-bottom: 0;
}

.config-command {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(5, 15, 28, 0.82);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.24);
}

.config-command p {
  margin: 0;
}

.config-tabs {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 16px;
  padding: 6px;
  border: 1px solid rgba(68, 178, 255, 0.18);
  border-radius: var(--radius);
  background: rgba(4, 16, 29, 0.74);
}

.config-tabs button {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font-weight: 950;
}

.config-tabs button:hover,
.config-tabs button.active {
  color: var(--text);
  border-color: rgba(16, 199, 255, 0.58);
  background: linear-gradient(180deg, rgba(7, 143, 255, 0.22), rgba(7, 143, 255, 0.06));
  box-shadow: inset 0 0 0 1px rgba(16, 199, 255, 0.16);
}

.config-tab {
  display: none;
}

.config-tab.active {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.config-tab .panel {
  min-width: 0;
  min-height: 100%;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.30);
}

.config-tab .panel.wide {
  grid-column: 1 / -1;
}

.panel {
  position: relative;
  overflow: hidden;
  padding: 20px;
}

.panel h2 {
  margin: 0 0 8px;
  font-size: 20px;
}

.field {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 800;
}

.setting-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  min-height: 54px;
  padding: 12px;
  border: 1px solid rgba(68, 178, 255, 0.14);
  border-radius: 7px;
  background: rgba(3, 12, 22, 0.46);
}

.setting-row + .setting-row {
  margin-top: 10px;
}

.setting-row span {
  display: block;
}

.setting-row small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 700;
}

input,
textarea,
select {
  width: 100%;
  min-height: 42px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  background: rgba(3, 12, 22, 0.82);
  outline: none;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--line-strong);
  box-shadow: 0 0 0 3px rgba(7, 143, 255, 0.12);
}

textarea {
  min-height: 118px;
  resize: vertical;
}

input[type="checkbox"] {
  width: 18px;
  min-height: 18px;
  accent-color: var(--blue);
}

pre {
  overflow: auto;
  min-height: 220px;
  margin: 14px 0 0;
  padding: 16px;
  border: 1px solid rgba(68, 178, 255, 0.22);
  border-radius: 7px;
  background: rgba(1, 6, 13, 0.80);
  color: #b9edff;
  line-height: 1.55;
}

.license-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.license-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px;
  box-shadow: none;
}

.license-item > div:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.license-item strong {
  font-size: 16px;
}

.license-item p {
  margin: 6px 0 0;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid rgba(25, 209, 143, 0.35);
  border-radius: 999px;
  color: var(--green);
  background: rgba(25, 209, 143, 0.12);
  font-size: 12px;
  font-weight: 900;
}

.pill.blue {
  border-color: rgba(7, 143, 255, 0.38);
  color: #9fe4ff;
  background: rgba(7, 143, 255, 0.14);
}

.pill.red {
  border-color: rgba(255, 71, 120, 0.36);
  color: #ff9ab4;
  background: rgba(255, 71, 120, 0.12);
}

.status-box {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.status-line {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(68, 178, 255, 0.14);
  color: var(--text-soft);
  font-weight: 800;
}

.status-line span:last-child {
  color: var(--text);
  text-align: right;
}

.log-list {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.log-item {
  display: grid;
  grid-template-columns: minmax(240px, 0.45fr) minmax(360px, 1fr);
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(68, 178, 255, 0.18);
  border-radius: var(--radius);
  background: rgba(3, 12, 22, 0.56);
}

.log-item strong {
  display: block;
  margin-top: 12px;
  font-size: 16px;
}

.log-item pre {
  min-height: 120px;
  margin: 0;
}

.docs-layout {
  display: grid;
  grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.docs-sidebar {
  position: sticky;
  top: 24px;
}

.docs-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.doc-link {
  width: 100%;
  min-height: 92px;
  padding: 14px;
  border: 1px solid rgba(68, 178, 255, 0.18);
  border-radius: 7px;
  color: var(--text);
  text-align: left;
  background: rgba(3, 12, 22, 0.58);
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.doc-link:hover,
.doc-link.active {
  transform: translateY(-1px);
  border-color: rgba(16, 199, 255, 0.58);
  background: linear-gradient(180deg, rgba(7, 143, 255, 0.22), rgba(7, 143, 255, 0.08));
}

.doc-link strong,
.doc-link span {
  display: block;
}

.doc-link strong {
  font-size: 15px;
}

.doc-link span {
  margin-top: 7px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.doc-view {
  min-height: 620px;
}

.doc-content {
  display: grid;
  gap: 12px;
  color: var(--text-soft);
  line-height: 1.66;
}

.doc-content h2,
.doc-content h3,
.doc-content h4 {
  margin: 22px 0 2px;
  color: var(--text);
  letter-spacing: 0;
}

.doc-content h2:first-child,
.doc-content h3:first-child,
.doc-content h4:first-child {
  margin-top: 0;
}

.doc-content h2 {
  font-size: 28px;
}

.doc-content h3 {
  font-size: 22px;
}

.doc-content h4 {
  font-size: 18px;
}

.doc-content p {
  margin: 0;
}

.doc-content ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 22px;
}

.doc-content code {
  padding: 2px 6px;
  border: 1px solid rgba(68, 178, 255, 0.18);
  border-radius: 5px;
  color: #b9edff;
  background: rgba(1, 6, 13, 0.72);
}

.doc-content pre {
  min-height: auto;
  white-space: pre-wrap;
}

.doc-content pre code {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
}

.card:hover,
.panel:hover,
.license-item:hover {
  border-color: rgba(16, 199, 255, 0.42);
}

@media (max-width: 980px) {
  .nav {
    position: static;
  }

  .nav-links {
    display: none;
  }

  .hero {
    min-height: auto;
    margin-top: -80px;
    padding: 142px 0 54px;
    background:
      linear-gradient(180deg, rgba(3, 7, 17, 0.78), rgba(3, 7, 17, 0.96)),
      url("/assets/bakishield-bg.png") center / cover no-repeat;
  }

  .hero h1 {
    font-size: clamp(44px, 14vw, 68px);
  }

  .hero-stats,
  .grid,
  .kpi-grid,
  .hero-inner,
  .split-section,
  .page-hero,
  .panel-grid,
  .docs-layout,
  .layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .main {
    padding: 18px;
  }

  .topbar,
  .log-item,
  .license-item,
  .config-header,
  .config-actions,
  .config-tab.active {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .config-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .docs-sidebar {
    position: static;
  }
}

/* Customer dashboard shell */
.panel-body {
  overflow-x: hidden;
  background:
    linear-gradient(90deg, rgba(2, 6, 14, 0.98), rgba(3, 10, 20, 0.92)),
    url("/assets/bakishield-bg.png") center right / cover fixed no-repeat;
}

.panel-layout {
  grid-template-columns: 280px minmax(0, 1fr);
}

.panel-sidebar {
  display: flex;
  flex-direction: column;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(4, 18, 32, 0.98), rgba(1, 7, 14, 0.98)),
    radial-gradient(circle at 40% 20%, rgba(16, 199, 255, 0.11), transparent 36%);
}

.panel-brand {
  min-height: 64px;
  background:
    linear-gradient(135deg, rgba(11, 39, 67, 0.96), rgba(6, 18, 33, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 50px rgba(0, 0, 0, 0.28);
}

.side-section-label {
  margin: 24px 10px 9px;
  color: #5f7f99;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.panel-nav a {
  position: relative;
  gap: 10px;
  min-height: 44px;
  border: 1px solid transparent;
}

.panel-nav a span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(127, 157, 182, 0.48);
}

.panel-nav a.active,
.panel-nav a:hover {
  border-color: rgba(16, 199, 255, 0.22);
  background: linear-gradient(135deg, rgba(7, 143, 255, 0.84), rgba(10, 46, 82, 0.70));
}

.panel-nav a.active span,
.panel-nav a:hover span {
  background: var(--green);
  box-shadow: 0 0 12px rgba(25, 209, 143, 0.80);
}

.panel-nav.compact {
  margin-top: 0;
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 18px;
}

.sidebar-user,
.top-profile,
.account-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-user {
  min-height: 66px;
  padding: 10px;
  border: 1px solid rgba(68, 178, 255, 0.20);
  border-radius: 8px;
  background: rgba(7, 22, 39, 0.76);
}

.sidebar-user strong,
.top-profile strong {
  display: block;
  color: var(--text);
  line-height: 1.2;
}

.sidebar-user small,
.top-profile small,
.muted-label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.avatar-shell {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(16, 199, 255, 0.34);
  border-radius: 8px;
  color: #dff6ff;
  background:
    linear-gradient(135deg, rgba(7, 143, 255, 0.42), rgba(2, 8, 17, 0.90)),
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.26), transparent 30%);
  box-shadow: 0 0 28px rgba(7, 143, 255, 0.18);
  font-weight: 950;
}

.avatar-shell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-shell.small {
  flex-basis: 36px;
  width: 36px;
  height: 36px;
}

.avatar-shell.large {
  flex-basis: 82px;
  width: 82px;
  height: 82px;
  border-radius: 10px;
  font-size: 26px;
}

.dashboard-main {
  padding: 20px 28px 42px;
  background:
    linear-gradient(180deg, rgba(3, 8, 16, 0.72), rgba(3, 8, 16, 0.98) 72%),
    linear-gradient(rgba(43, 126, 190, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 126, 190, 0.035) 1px, transparent 1px);
  background-size: auto, 72px 72px, 72px 72px;
}

.panel-topbar {
  position: sticky;
  top: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
  margin: -20px -28px 20px;
  padding: 12px 28px;
  border-bottom: 1px solid rgba(68, 178, 255, 0.17);
  background: rgba(3, 8, 16, 0.82);
  backdrop-filter: blur(18px);
}

.panel-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.panel-breadcrumb span + span::before {
  content: "/";
  margin-right: 10px;
  color: #3f6584;
}

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

.top-profile {
  min-width: 210px;
  min-height: 48px;
  padding: 6px 10px;
  border: 1px solid rgba(68, 178, 255, 0.18);
  border-radius: 8px;
  background: rgba(7, 22, 39, 0.68);
}

.button.ghost {
  background: rgba(3, 12, 22, 0.44);
}

.command-center {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 470px);
  gap: 20px;
  align-items: stretch;
  margin-bottom: 18px;
  padding: 26px;
  border: 1px solid rgba(68, 178, 255, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(4, 13, 25, 0.97), rgba(4, 13, 25, 0.76) 45%, rgba(4, 13, 25, 0.48)),
    url("/assets/bakishield-bg.png") center right / cover no-repeat;
  box-shadow: 0 26px 90px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.command-copy {
  min-height: 245px;
}

.command-copy h1 {
  margin: 18px 0 0;
  font-size: clamp(42px, 7vw, 76px);
  line-height: 0.96;
}

.command-copy p {
  max-width: 740px;
  margin: 16px 0 0;
  color: var(--text-soft);
  font-size: 17px;
  line-height: 1.55;
}

.account-panel {
  display: grid;
  align-content: space-between;
  gap: 24px;
  padding: 22px;
  border: 1px solid rgba(68, 178, 255, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(9, 30, 52, 0.82), rgba(2, 8, 17, 0.90)),
    radial-gradient(circle at 20% 0%, rgba(25, 209, 143, 0.12), transparent 34%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.account-panel h2 {
  margin: 4px 0 3px;
  font-size: 24px;
}

.account-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.account-meta,
.status-matrix,
.metric-row {
  display: grid;
  gap: 12px;
}

.account-meta {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.account-meta div,
.status-matrix div,
.metric-card {
  min-width: 0;
  border: 1px solid rgba(68, 178, 255, 0.16);
  border-radius: 8px;
  background: rgba(2, 8, 17, 0.54);
}

.account-meta div {
  padding: 13px;
}

.account-meta span,
.status-matrix span,
.metric-card span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.account-meta strong,
.status-matrix strong {
  display: block;
  margin-top: 7px;
  color: var(--text);
}

.metric-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
}

.metric-card {
  position: relative;
  overflow: hidden;
  padding: 20px;
  background:
    linear-gradient(180deg, rgba(10, 33, 56, 0.90), rgba(4, 13, 25, 0.95)),
    radial-gradient(circle at 0% 0%, rgba(16, 199, 255, 0.14), transparent 36%);
}

.metric-card strong {
  display: block;
  margin: 14px 0 8px;
  font-size: 38px;
  line-height: 1;
}

.metric-card small {
  color: var(--muted);
  font-weight: 800;
}

.dashboard-grid-pro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.85fr);
  gap: 18px;
  margin-bottom: 18px;
}

.panel-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.panel-title-row h2 {
  margin-bottom: 4px;
}

.system-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(68, 178, 255, 0.22);
  border-radius: 999px;
  color: #b8d4ea;
  background: rgba(8, 24, 41, 0.72);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.system-pill.online {
  border-color: rgba(25, 209, 143, 0.35);
  color: #a8ffde;
  background: rgba(25, 209, 143, 0.12);
}

.system-pill.warning {
  border-color: rgba(255, 176, 32, 0.35);
  color: #ffd58a;
  background: rgba(255, 176, 32, 0.12);
}

.system-pill.danger {
  border-color: rgba(255, 71, 120, 0.35);
  color: #ffadc2;
  background: rgba(255, 71, 120, 0.12);
}

.status-matrix {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.status-matrix div {
  padding: 16px;
}

.readiness-panel {
  display: grid;
  gap: 12px;
}

.check-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 13px;
  border: 1px solid rgba(68, 178, 255, 0.16);
  border-radius: 8px;
  background: rgba(2, 8, 17, 0.52);
}

.check-row span {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 12px rgba(25, 209, 143, 0.72);
}

.check-row strong,
.check-row small {
  grid-column: 2;
}

.check-row small {
  color: var(--muted);
  font-weight: 800;
}

.licenses-panel {
  padding: 22px;
}

.license-tools {
  width: min(420px, 100%);
}

.license-table {
  display: grid;
  gap: 10px;
}

.license-table-head,
.license-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(190px, 0.9fr) minmax(110px, 0.48fr) minmax(130px, 0.62fr) minmax(110px, 0.45fr) minmax(310px, auto);
  gap: 14px;
  align-items: center;
}

.license-table-head {
  min-height: 38px;
  padding: 0 14px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.license-row {
  min-height: 76px;
  padding: 14px;
  border: 1px solid rgba(68, 178, 255, 0.16);
  border-radius: 8px;
  background: rgba(2, 8, 17, 0.58);
}

.license-row:hover {
  border-color: rgba(16, 199, 255, 0.42);
  background: rgba(7, 22, 39, 0.68);
}

.license-row strong,
.license-row small {
  display: block;
}

.license-row small {
  margin-top: 5px;
  color: var(--muted);
  font-weight: 800;
}

.license-row code {
  overflow: hidden;
  padding: 8px 10px;
  border: 1px solid rgba(68, 178, 255, 0.18);
  border-radius: 7px;
  color: #b9edff;
  background: rgba(1, 6, 13, 0.72);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.row-actions .button {
  min-height: 36px;
  padding: 0 12px;
}

.empty-state {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: 22px;
  border: 1px dashed rgba(68, 178, 255, 0.28);
  border-radius: 8px;
  background: rgba(2, 8, 17, 0.52);
}

.empty-state p {
  margin: 0;
  color: var(--muted);
}

@media (max-width: 1250px) {
  .panel-layout {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  .command-center,
  .dashboard-grid-pro,
  .status-matrix,
  .metric-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .license-table-head {
    display: none;
  }

  .license-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .row-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 860px) {
  .panel-layout,
  .command-center,
  .dashboard-grid-pro,
  .metric-row,
  .status-matrix,
  .account-meta {
    grid-template-columns: 1fr;
  }

  .panel-topbar {
    position: static;
    margin: -18px -18px 18px;
    padding: 12px 18px;
    align-items: stretch;
    flex-direction: column;
  }

  .topbar-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .top-profile {
    width: 100%;
  }

  .command-copy h1 {
    font-size: 42px;
  }
}

/* Professional panel polish */
.sidebar {
  display: flex;
  flex-direction: column;
}

.panel-body .main {
  min-height: 100vh;
}

.panel-sidebar .brand-logo {
  width: 34px;
  height: 34px;
}

.sidebar-user {
  width: 100%;
}

.sidebar-user strong,
.top-profile strong {
  max-width: 166px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 950;
}

.panel-body .dashboard-main {
  background:
    linear-gradient(180deg, rgba(1, 6, 13, 0.24), rgba(1, 6, 13, 0.82)),
    radial-gradient(circle at 68% 0%, rgba(16, 199, 255, 0.12), transparent 34%),
    linear-gradient(rgba(43, 126, 190, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 126, 190, 0.035) 1px, transparent 1px);
  background-size: auto, auto, 72px 72px, 72px 72px;
}

.command-center {
  position: relative;
  overflow: hidden;
}

.command-center::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(16, 199, 255, 0.10), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 24%);
  opacity: 0.8;
}

.command-center > * {
  position: relative;
  z-index: 1;
}

.ops-timeline {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.ops-timeline div {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(68, 178, 255, 0.14);
  border-radius: 8px;
  background: rgba(1, 7, 15, 0.54);
}

.ops-timeline span {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--blue-2);
  box-shadow: 0 0 14px rgba(16, 199, 255, 0.72);
}

.ops-timeline strong,
.ops-timeline small {
  grid-column: 2;
}

.ops-timeline small {
  color: var(--muted);
  font-weight: 800;
}

.heartbeat-cell {
  display: grid;
  gap: 6px;
  justify-items: start;
}

.heartbeat-cell small {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.panel-body .license-row {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* Client console navigation */
.client-brand-card {
  align-items: center;
  min-height: 66px;
}

.client-brand-card span {
  display: grid;
  gap: 2px;
}

.client-brand-card strong {
  font-size: 14px;
  line-height: 1.1;
}

.client-brand-card small {
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 800;
}

.panel-nav {
  align-content: start;
  gap: 3px;
}

.panel-nav .side-section-label {
  margin: 20px 0 6px;
  color: #7d9ab5;
  font-size: 12px;
  font-weight: 950;
}

.panel-nav a {
  position: relative;
  gap: 10px;
  min-height: 34px;
  padding: 0 10px;
}

.panel-nav a.disabled {
  opacity: 0.55;
}

.panel-nav a .nav-badge {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 999px;
  color: #9edfff;
  background: rgba(7, 143, 255, 0.28);
  font-size: 10px;
  font-weight: 950;
}

.server-tree {
  display: grid;
  gap: 5px;
}

.server-root {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  color: var(--text-soft);
  font-weight: 900;
}

.server-root span,
.server-children a span {
  width: 14px;
  height: 14px;
  border: 1px solid rgba(167, 214, 255, 0.68);
  border-radius: 4px;
}

.server-root strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.server-root em {
  color: var(--muted);
  font-style: normal;
  text-align: center;
}

.server-children {
  display: grid;
  gap: 3px;
  margin-left: 12px;
  padding-left: 11px;
  border-left: 1px solid rgba(16, 199, 255, 0.22);
}

.server-children a {
  min-height: 32px;
}

/* Live players page */
.server-console-body .dashboard-main {
  padding: 0 0 34px;
}

.server-console-main,
.stream-main {
  display: grid;
  align-content: start;
  gap: 18px;
}

.server-titlebar {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  padding: 28px 26px 0;
}

.server-titlebar h1,
.stream-toolbar h1 {
  margin: 10px 0 0;
  font-size: 30px;
  line-height: 1.1;
}

.server-titlebar h1 small,
.stream-toolbar h1 small,
.stream-roster h2 small {
  padding: 3px 9px;
  border-radius: 999px;
  color: #9fe4ff;
  background: rgba(7, 143, 255, 0.24);
  font-size: 12px;
  vertical-align: middle;
}

.server-picker {
  width: min(280px, 100%);
}

.server-console-main > .panel,
.players-grid,
.players-footer {
  margin-inline: 26px;
}

.live-toolbar {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.search-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 12px;
}

.filter-line,
.stream-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 850;
}

.filter-line label,
.stream-filters label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.players-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  gap: 14px;
}

.player-card {
  display: grid;
  gap: 14px;
  min-height: 136px;
  padding: 16px;
  border: 1px solid rgba(68, 178, 255, 0.18);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(7, 18, 32, 0.94), rgba(2, 7, 15, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.player-card:hover {
  border-color: rgba(16, 199, 255, 0.48);
  transform: translateY(-1px);
}

.player-card.is-offline {
  opacity: 0.62;
}

.player-card-head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
}

.player-card-head strong,
.player-card-head small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-card-head small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.player-avatar,
.roster-avatar {
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #e9f8ff;
  background: rgba(7, 143, 255, 0.18);
  font-weight: 950;
}

.player-avatar {
  width: 38px;
  height: 38px;
}

.player-avatar.online {
  background: rgba(25, 209, 143, 0.18);
  color: #6dffc9;
}

.player-avatar.warning {
  background: rgba(255, 176, 32, 0.18);
  color: #ffd37a;
}

.player-avatar.danger {
  background: rgba(255, 71, 120, 0.18);
  color: #ff7fa2;
}

.ping {
  color: var(--green);
  font-size: 12px;
  font-weight: 950;
}

.ping.bad {
  color: var(--amber);
}

.player-meter {
  display: grid;
  gap: 7px;
}

.meter-label,
.player-meta-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 850;
}

.player-meter > span {
  display: block;
  height: 7px;
  border-radius: 999px;
}

.player-meter > span.good {
  background: var(--green);
}

.player-meter > span.warn {
  background: var(--amber);
}

.player-meter > span.bad {
  background: var(--red);
}

.players-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: rgba(0, 4, 10, 0.70);
  backdrop-filter: blur(6px);
}

.modal-backdrop[hidden] {
  display: none;
}

.player-modal {
  position: relative;
  width: min(520px, calc(100vw - 32px));
  padding: 22px;
  border: 1px solid rgba(68, 178, 255, 0.28);
  border-radius: 8px;
  background: rgba(4, 13, 24, 0.98);
  box-shadow: var(--shadow);
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  background: rgba(5, 16, 30, 0.92);
}

.modal-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.modal-stats div {
  padding: 12px;
  border: 1px solid rgba(68, 178, 255, 0.16);
  border-radius: 8px;
  background: rgba(2, 8, 17, 0.72);
}

.modal-stats span,
.modal-stats strong {
  display: block;
}

.modal-stats span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Multi stream */
.stream-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 14px;
  min-height: calc(100vh - 70px);
  padding: 18px;
}

.stream-stage {
  display: grid;
  align-content: start;
  gap: 16px;
}

.stream-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.stream-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.stream-card {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(68, 178, 255, 0.18);
  border-radius: 8px;
  background: rgba(2, 7, 15, 0.92);
  overflow: hidden;
}

.stream-card header,
.stream-card footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}

.stream-card header strong,
.stream-card header small {
  display: block;
}

.stream-card header small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.stream-frame {
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(135deg, rgba(7, 143, 255, 0.10), transparent 40%),
    #01050c;
}

.stream-frame iframe,
.stream-frame img,
.stream-frame video {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.stream-frame video { display: none; background: #000; }
.stream-fallback { position: absolute; inset: 0; }
.stream-fallback > img { width: 100%; height: 100%; object-fit: cover; }
.stream-card.webrtc-ready .stream-frame video { display: block; }
.stream-card.webrtc-ready .stream-fallback { display: none; }
.stream-card [data-transport-state] { color: #ff4d5f; }
.stream-card.webrtc-ready [data-transport-state] { color: #35e69b; }

.stream-placeholder,
.stream-empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  min-height: 260px;
  padding: 24px;
  color: var(--text-soft);
  text-align: center;
}

.stream-placeholder span {
  width: 42px;
  height: 42px;
  border: 2px solid rgba(16, 199, 255, 0.42);
  border-top-color: var(--blue-2);
  border-radius: 999px;
}

.stream-placeholder.error span { background: #ff315c; box-shadow: 0 0 0 8px rgba(255,49,92,.12); }
.stream-placeholder.error strong { color: #ff9ab0; }
.stream-placeholder .button { margin-top: 10px; }

.stream-placeholder small,
.stream-empty p {
  max-width: 430px;
  color: var(--muted);
  font-weight: 800;
}

.stream-roster {
  position: sticky;
  top: 86px;
  align-self: start;
  display: grid;
  gap: 12px;
  max-height: calc(100vh - 104px);
  overflow: auto;
  padding: 14px;
}

.stream-roster-list {
  display: grid;
  gap: 8px;
}

.roster-player {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 9px;
  min-height: 56px;
  padding: 8px;
  border: 1px solid rgba(68, 178, 255, 0.14);
  border-radius: 8px;
  color: var(--text);
  background: rgba(2, 8, 17, 0.78);
  text-align: left;
}

.roster-player:hover {
  border-color: rgba(16, 199, 255, 0.42);
}

.roster-avatar {
  width: 34px;
  height: 34px;
}

.roster-player strong,
.roster-player small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-player small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.roster-player em {
  color: var(--blue-2);
  font-style: normal;
  font-weight: 950;
  text-align: center;
}

@media (max-width: 1400px) {
  .players-grid {
    grid-template-columns: repeat(3, minmax(240px, 1fr));
  }
}

@media (max-width: 1100px) {
  .players-grid,
  .stream-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stream-layout {
    grid-template-columns: 1fr;
  }

  .stream-roster {
    position: static;
    max-height: none;
  }
}

@media (max-width: 760px) {
  .server-titlebar,
  .stream-toolbar,
  .players-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .search-line,
  .players-grid,
  .stream-grid,
  .modal-stats {
    grid-template-columns: 1fr;
  }
}

/* BAKIShield client shell refinement */
.panel-layout {
  min-height: 100vh;
}

.panel-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid rgba(68, 178, 255, 0.18);
}

.panel-sidebar .client-brand-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  margin-bottom: 18px;
  padding: 12px;
  border-color: rgba(68, 178, 255, 0.22);
  background:
    linear-gradient(135deg, rgba(9, 42, 73, 0.96), rgba(5, 17, 31, 0.92)),
    radial-gradient(circle at 0% 0%, rgba(16, 199, 255, 0.22), transparent 38%);
}

.panel-nav {
  margin-top: 0;
}

.panel-nav a {
  display: flex;
  min-width: 0;
  color: #bfd7ea;
}

.panel-nav a strong {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel-nav a .nav-icon,
.server-root #shellServerStatus {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(126, 184, 228, 0.28);
  border-radius: 6px;
  color: #91bfdc;
  background: rgba(4, 16, 29, 0.82);
  box-shadow: none;
  font-size: 10px;
  font-weight: 950;
}

.panel-nav a.active .nav-icon,
.panel-nav a:hover .nav-icon {
  color: #001725;
  background: linear-gradient(135deg, var(--blue), var(--blue-2));
  box-shadow: 0 0 16px rgba(16, 199, 255, 0.34);
}

.server-tree {
  margin-top: 2px;
}

.server-root {
  min-height: 38px;
  padding: 0 10px;
  border-radius: 7px;
  background: rgba(2, 10, 19, 0.38);
}

.server-root #shellServerStatus {
  border-radius: 5px;
}

.server-root #shellServerStatus::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #667d90;
}

.server-root #shellServerStatus.online::before {
  background: var(--green);
  box-shadow: 0 0 12px rgba(25, 209, 143, 0.86);
}

.server-children {
  margin-top: 4px;
  margin-left: 21px;
}

.server-children a {
  min-height: 34px;
}

.side-support-block {
  display: grid;
  gap: 3px;
  margin-top: auto;
  padding-top: 18px;
}

.side-support-block a {
  min-height: 34px;
}

.sidebar-footer {
  padding-top: 12px;
}

.sidebar-user {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
}

.sidebar-user small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Documentation */
.docs-main {
  padding-bottom: 52px;
}

.docs-layout {
  grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
}

.doc-group {
  display: grid;
  gap: 9px;
  padding-top: 8px;
}

.doc-group + .doc-group {
  margin-top: 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(68, 178, 255, 0.16);
}

.doc-group h3 {
  margin: 0 0 2px;
  color: #dff6ff;
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
}

.doc-link-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.lang-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 31px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid rgba(31, 166, 255, 0.38);
  border-radius: 999px;
  color: #bfefff;
  background: rgba(0, 146, 255, 0.12);
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0;
}

.doc-view {
  max-width: 1120px;
}

.doc-content {
  font-size: 15px;
}

.doc-content ol,
.doc-content ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 24px;
}

.doc-content li {
  padding-left: 2px;
}

.doc-content hr {
  width: 100%;
  height: 1px;
  margin: 8px 0;
  border: 0;
  background: rgba(68, 178, 255, 0.18);
}

.doc-callout {
  padding: 14px 16px;
  border: 1px solid rgba(16, 199, 255, 0.24);
  border-left: 3px solid var(--blue-2);
  border-radius: 8px;
  color: #d8f4ff;
  background: rgba(7, 143, 255, 0.10);
  font-weight: 850;
}

.doc-content pre {
  max-height: 520px;
}

/* Live views refinements */
.server-console-main,
.stream-main {
  min-height: 100vh;
}

.server-titlebar,
.stream-toolbar {
  align-items: end;
}

.players-grid {
  grid-auto-rows: minmax(138px, auto);
}

.player-card,
.stream-card,
.stream-roster {
  backdrop-filter: blur(12px);
}

.player-meta-line span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stream-grid:has(.stream-empty) {
  grid-template-columns: 1fr;
}

.stream-empty {
  min-height: 520px;
  border: 1px dashed rgba(68, 178, 255, 0.24);
  border-radius: 8px;
  background: rgba(2, 8, 17, 0.52);
}

/* BAKIShield professional refactor */
:root {
  --panel-sidebar-w: 302px;
  --nav-h: 70px;
  --deep: #020610;
  --deep-2: #06111d;
  --glass: rgba(6, 17, 31, 0.78);
  --glass-strong: rgba(8, 24, 42, 0.92);
}

body:not(.panel-body) {
  overflow-x: hidden;
  background:
    linear-gradient(180deg, rgba(2, 6, 14, 0.42), rgba(2, 6, 14, 0.96) 68%),
    url("/assets/bakishield-bg.png") center top / cover fixed no-repeat,
    #020610;
}

body:not(.panel-body)::before {
  opacity: 0.75;
  mask-image: linear-gradient(180deg, black, rgba(0, 0, 0, 0.42) 74%, transparent);
}

.shell {
  width: min(1380px, calc(100% - 48px));
}

.nav {
  min-height: var(--nav-h);
  border-color: rgba(107, 183, 244, 0.28);
  background: rgba(3, 8, 17, 0.76);
}

.nav .brand {
  min-width: 260px;
}

.nav-links {
  gap: 26px;
  font-size: 13px;
  text-transform: uppercase;
}

.hero {
  min-height: 100vh;
  margin-top: calc((var(--nav-h) + 16px) * -1);
  padding: 150px 0 72px;
  background:
    linear-gradient(90deg, rgba(2, 6, 14, 0.98) 0%, rgba(2, 6, 14, 0.86) 38%, rgba(2, 6, 14, 0.34) 74%, rgba(2, 6, 14, 0.88) 100%),
    linear-gradient(180deg, rgba(2, 6, 14, 0.08), rgba(2, 6, 14, 0.94) 92%),
    url("/assets/bakishield-bg.png") center center / cover no-repeat;
}

.hero-inner {
  grid-template-columns: minmax(0, 1fr) minmax(390px, 520px);
  align-items: center;
  gap: 46px;
  width: min(1380px, calc(100% - 48px));
  min-height: 720px;
}

.hero-copy {
  width: min(780px, 100%);
}

.hero h1 {
  margin-top: 22px;
  font-size: 88px;
  line-height: 0.96;
}

.hero p {
  max-width: 760px;
  color: #cfdfed;
  font-size: 20px;
}

.hero-dashboard {
  align-self: center;
  border-color: rgba(16, 199, 255, 0.38);
  background:
    linear-gradient(180deg, rgba(8, 25, 44, 0.92), rgba(2, 7, 15, 0.96)),
    radial-gradient(circle at 12% 0%, rgba(25, 209, 143, 0.12), transparent 34%);
  box-shadow: 0 28px 92px rgba(0, 0, 0, 0.50), 0 0 42px rgba(16, 199, 255, 0.16);
}

.hero-stats div,
.card,
.panel,
.metric-card,
.license-row,
.player-card,
.stream-card,
.stream-roster,
.live-toolbar,
.stream-ops-strip {
  border-color: rgba(92, 167, 229, 0.22);
  background:
    linear-gradient(180deg, rgba(8, 24, 42, 0.84), rgba(3, 9, 18, 0.86)),
    radial-gradient(circle at 0% 0%, rgba(16, 199, 255, 0.10), transparent 34%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.section {
  padding: 76px 0;
}

.section h2 {
  font-size: 38px;
  letter-spacing: 0;
}

.card {
  min-height: 170px;
}

.card.featured {
  border-color: rgba(255, 176, 32, 0.42);
  background:
    linear-gradient(180deg, rgba(17, 27, 38, 0.94), rgba(5, 11, 20, 0.92)),
    radial-gradient(circle at 100% 0%, rgba(255, 176, 32, 0.16), transparent 38%);
}

.price {
  color: #f3f8ff;
}

.panel-layout {
  grid-template-columns: var(--panel-sidebar-w) minmax(0, 1fr);
}

.panel-sidebar {
  width: var(--panel-sidebar-w);
  padding: 12px 14px;
  background:
    linear-gradient(180deg, rgba(4, 17, 31, 0.98), rgba(2, 8, 17, 0.99)),
    radial-gradient(circle at 22% 0%, rgba(16, 199, 255, 0.11), transparent 34%);
}

.panel-sidebar .client-brand-card {
  min-height: 76px;
  margin-bottom: 18px;
  border-radius: 8px;
}

.client-brand-card strong {
  font-size: 15px;
}

.client-brand-card small {
  font-size: 12px;
}

.panel-nav .side-section-label {
  margin: 18px 0 7px;
  color: #87a5be;
  text-transform: none;
}

.panel-nav a {
  min-height: 37px;
  border-radius: 7px;
}

.panel-nav a.active {
  color: #f4fbff;
  background: linear-gradient(90deg, rgba(7, 143, 255, 0.82), rgba(7, 143, 255, 0.26));
  box-shadow: inset 3px 0 0 #10c7ff;
}

.panel-nav a.disabled {
  opacity: 0.46;
}

.server-root {
  min-height: 42px;
  border: 1px solid rgba(92, 167, 229, 0.15);
}

.server-children {
  margin-left: 22px;
  padding-left: 12px;
  border-left: 1px solid rgba(68, 178, 255, 0.18);
}

.side-support-block {
  margin-top: auto;
}

.sidebar-footer {
  margin-top: 12px;
}

.sidebar-user {
  min-height: 58px;
  padding: 8px;
  border: 1px solid rgba(92, 167, 229, 0.22);
  border-radius: 8px;
  background: rgba(7, 143, 255, 0.14);
}

.dashboard-main {
  padding: 18px 24px 56px;
}

.panel-topbar {
  min-height: 60px;
  margin: -18px -24px 18px;
  padding: 10px 24px;
  border-bottom: 1px solid rgba(92, 167, 229, 0.14);
  background: rgba(2, 8, 17, 0.76);
}

.panel-breadcrumb {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(92, 167, 229, 0.18);
  border-radius: 7px;
  background: rgba(5, 17, 31, 0.68);
}

.top-profile {
  min-height: 42px;
  border-radius: 7px;
  background: rgba(7, 143, 255, 0.10);
}

.command-center {
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
  min-height: 340px;
  padding: 28px;
  border-color: rgba(92, 167, 229, 0.22);
  background:
    linear-gradient(90deg, rgba(3, 10, 20, 0.94), rgba(5, 18, 32, 0.76)),
    url("/assets/bakishield-bg.png") center right / cover no-repeat;
}

.command-copy h1 {
  font-size: 58px;
  line-height: 1;
}

.command-copy p {
  max-width: 760px;
  color: #c5d8e8;
}

.metric-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.metric-card {
  min-height: 136px;
  padding: 18px;
}

.metric-card strong {
  font-size: 42px;
}

.dashboard-grid-pro {
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
}

.licenses-panel {
  padding: 20px;
}

.license-table {
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(92, 167, 229, 0.16);
  border-radius: 8px;
}

.license-row {
  border: 0;
  border-top: 1px solid rgba(92, 167, 229, 0.12);
  border-radius: 0;
}

.server-console-main,
.stream-main {
  padding: 24px 30px 54px;
}

.server-titlebar {
  margin-bottom: 14px;
  padding: 8px 2px 4px;
}

.server-titlebar h1,
.stream-toolbar h1 {
  font-size: 34px;
}

.live-toolbar {
  margin-bottom: 16px;
  padding: 14px;
}

.search-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 12px;
}

.filter-line {
  gap: 18px;
}

.players-grid {
  grid-template-columns: repeat(4, minmax(260px, 1fr));
  gap: 14px;
}

.player-card {
  min-height: 184px;
  padding: 14px;
}

.player-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.player-status-row .system-pill {
  min-height: 24px;
  padding: 0 8px;
  font-size: 10px;
}

.player-card-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.button.mini {
  min-height: 31px;
  padding: 0 9px;
  font-size: 12px;
}

.stream-layout {
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  padding: 0;
}

.stream-toolbar {
  align-items: flex-end;
}

.stream-toolbar-actions {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.stream-ops-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(92, 167, 229, 0.18);
  border-radius: 8px;
}

.stream-ops-strip div {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(92, 167, 229, 0.14);
  border-radius: 7px;
  background: rgba(1, 7, 15, 0.54);
}

.stream-ops-strip span,
.stream-ops-strip small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.stream-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.stream-frame {
  min-height: 310px;
}

.stream-card footer span {
  margin-right: auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.roster-player.active {
  border-color: rgba(25, 209, 143, 0.42);
  background: rgba(25, 209, 143, 0.10);
}

/* BAKIShield live dashboard */
.server-dashboard {
  display: grid;
  gap: 18px;
  margin: 18px 0;
  padding: 20px;
}

.dashboard-server-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.field.compact {
  min-width: 260px;
  margin: 0;
}

.server-status-cards {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.server-status-cards article {
  display: grid;
  gap: 8px;
  min-height: 112px;
  padding: 14px;
  border: 1px solid rgba(92, 167, 229, 0.17);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(8, 25, 44, 0.84), rgba(2, 8, 17, 0.92)),
    radial-gradient(circle at 100% 0%, rgba(16, 199, 255, 0.11), transparent 42%);
}

.server-status-cards article span,
.server-status-cards article small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.server-status-cards article strong {
  color: #f4fbff;
  font-size: 27px;
  line-height: 1;
}

.server-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.58fr) minmax(280px, 0.58fr);
  gap: 14px;
}

.server-analytics,
.server-breakdown,
.recent-events {
  padding: 16px;
  border: 1px solid rgba(92, 167, 229, 0.16);
  border-radius: 8px;
  background: rgba(2, 8, 17, 0.52);
}

.server-analytics h3,
.server-breakdown h3,
.recent-events h3 {
  margin: 0;
  color: #dff4ff;
  font-size: 17px;
}

.panel-title-row.compact {
  margin-bottom: 12px;
}

.server-chart {
  min-height: 280px;
  border: 1px solid rgba(92, 167, 229, 0.13);
  border-radius: 8px;
  background:
    linear-gradient(rgba(92, 167, 229, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 167, 229, 0.04) 1px, transparent 1px),
    rgba(1, 7, 15, 0.56);
  background-size: 100% 25%, 8.333% 100%, auto;
}

.chart-bars {
  display: grid;
  grid-template-columns: repeat(24, minmax(14px, 1fr));
  align-items: end;
  gap: 5px;
  min-height: 232px;
  padding: 18px 14px 8px;
}

.chart-column {
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: end;
  gap: 7px;
  min-width: 0;
}

.chart-column span {
  display: block;
  width: 100%;
  min-height: 3px;
  border-radius: 999px 999px 0 0;
}

.chart-column span.events {
  background: linear-gradient(180deg, rgba(7, 143, 255, 0.86), rgba(7, 143, 255, 0.25));
}

.chart-column span.detections {
  background: linear-gradient(180deg, rgba(255, 176, 32, 0.90), rgba(255, 176, 32, 0.23));
}

.chart-column span.bans {
  background: linear-gradient(180deg, rgba(255, 71, 120, 0.92), rgba(255, 71, 120, 0.24));
}

.chart-column small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-align: center;
  text-overflow: clip;
}

.chart-legend {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.chart-legend span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--blue);
}

.chart-legend .detections::before {
  background: var(--amber);
}

.chart-legend .bans::before {
  background: var(--red);
}

.chart-empty {
  display: grid;
  min-height: 280px;
  place-items: center;
  color: var(--muted);
  font-weight: 900;
  text-align: center;
}

.rank-list {
  display: grid;
  gap: 11px;
}

.rank-row {
  display: grid;
  gap: 7px;
}

.rank-row div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #dff4ff;
  font-size: 13px;
  font-weight: 900;
}

.rank-row span {
  color: var(--muted);
}

.rank-row em {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--blue-2));
  box-shadow: 0 0 18px rgba(7, 143, 255, 0.25);
}

.recent-events {
  display: grid;
  gap: 12px;
}

.recent-log-list {
  display: grid;
  gap: 8px;
}

.recent-log-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid rgba(92, 167, 229, 0.12);
  border-radius: 8px;
  background: rgba(1, 7, 15, 0.48);
}

.recent-log-row strong,
.recent-log-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-log-row small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.empty-state.compact {
  min-height: 112px;
  padding: 16px;
}

@media (max-width: 1280px) {
  .hero h1 {
    font-size: 72px;
  }

  .server-status-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .server-dashboard-grid {
    grid-template-columns: 1fr 1fr;
  }

  .server-analytics {
    grid-column: 1 / -1;
  }

  .players-grid {
    grid-template-columns: repeat(3, minmax(250px, 1fr));
  }
}

@media (max-width: 980px) {
  .shell {
    width: min(100% - 28px, 720px);
  }

  .hero {
    min-height: auto;
    padding: 128px 0 54px;
    background:
      linear-gradient(180deg, rgba(2, 6, 14, 0.72), rgba(2, 6, 14, 0.97)),
      url("/assets/bakishield-bg.png") center right / cover no-repeat;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero h1 {
    font-size: 54px;
  }

  .panel-layout,
  .command-center,
  .dashboard-grid-pro,
  .server-status-cards,
  .server-dashboard-grid,
  .metric-row,
  .players-grid,
  .stream-layout,
  .stream-grid,
  .stream-ops-strip,
  .search-line {
    grid-template-columns: 1fr;
  }

  .panel-sidebar {
    width: auto;
    height: auto;
    position: static;
  }

  .dashboard-server-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .recent-log-row {
    grid-template-columns: 1fr;
  }
}

/* Interactive map */
.map-main {
  padding: 22px 30px 24px;
}

.map-shell {
  min-height: calc(100vh - 86px);
}

.map-canvas-wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr minmax(250px, 320px);
  gap: 14px;
  min-height: calc(100vh - 110px);
}

.map-controls,
.map-roster {
  position: relative;
  z-index: 3;
  align-self: start;
  background: rgba(4, 16, 28, 0.92);
  border-color: rgba(0, 180, 255, 0.26);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
}

.map-controls,
.map-roster {
  margin-top: 18px;
}

.map-controls {
  grid-column: 1;
  grid-row: 1;
}

.map-roster {
  grid-column: 3;
  grid-row: 1;
}

.map-roster {
  max-height: calc(100vh - 146px);
  overflow: auto;
}

.live-map {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 1;
  min-height: calc(100vh - 110px);
  overflow: hidden;
  border: 1px solid rgba(0, 180, 255, 0.28);
  border-radius: 8px;
  background-color: #061522;
  isolation: isolate;
  cursor: grab;
}

.live-map:active { cursor: grabbing; }

.map-world {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform-origin: 50% 50%;
  transition: transform 180ms ease-out;
}

.live-map:active .map-world { transition: none; }

.gta-map-tiles,
.map-trails-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.gta-map-tiles { overflow: hidden; background: #080a0c; }
.gta-map-tiles img { position: absolute; display: block; object-fit: fill; filter: invert(.88) hue-rotate(170deg) saturate(.35) brightness(.55) contrast(1.25); }
.map-trails-layer { z-index: 2; pointer-events: none; }

/* The previous decorative beams hid the actual position layer. */
.live-map::before,
.live-map::after { display: none; }

.map-trail { fill: none; stroke: #ff344b; stroke-width: 3; opacity: .5; vector-effect: non-scaling-stroke; }
.map-trail.active { stroke: #fff; stroke-width: 4; opacity: .8; }

.map-zoom-controls {
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  gap: 7px;
  margin-top: 12px;
}

.map-live-legend {
  position: absolute;
  z-index: 4;
  left: 340px;
  right: 340px;
  bottom: 16px;
  display: flex;
  justify-content: center;
  gap: 16px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid rgba(0,180,255,.22);
  border-radius: 8px;
  background: rgba(3,14,25,.86);
  color: var(--muted);
  font-size: 11px;
  pointer-events: none;
}

.map-live-legend span { display: flex; align-items: center; gap: 6px; }
.map-live-legend i { width: 8px; height: 8px; border-radius: 50%; background: #00c978; }
.map-live-legend i.warning { background: #ffbf00; }
.map-live-legend i.danger { background: #ff315c; }
.map-live-legend strong { color: #62ddff; margin-left: auto; }

.live-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 170, 255, 0.11) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 170, 255, 0.11) 1px, transparent 1px),
    linear-gradient(135deg, rgba(0, 229, 255, 0.12), transparent 38%),
    linear-gradient(45deg, rgba(0, 96, 150, 0.28), transparent 44%),
    #061522;
  background-size: 120px 120px, 120px 120px, auto, auto, auto;
}

.live-map::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(23deg, transparent 0 30%, rgba(86, 148, 92, 0.22) 30% 43%, transparent 43% 100%),
    linear-gradient(152deg, transparent 0 45%, rgba(210, 196, 126, 0.18) 45% 58%, transparent 58% 100%),
    linear-gradient(84deg, rgba(8, 43, 66, 0.72), transparent 28% 68%, rgba(0, 133, 180, 0.32));
  opacity: 0.85;
}

.live-map.satellite::before {
  background:
    linear-gradient(90deg, rgba(35, 122, 180, 0.12) 1px, transparent 1px),
    linear-gradient(0deg, rgba(35, 122, 180, 0.12) 1px, transparent 1px),
    linear-gradient(140deg, rgba(12, 32, 52, 0.86), rgba(4, 9, 17, 0.98));
  background-size: 110px 110px, 110px 110px, auto;
}

.live-map.satellite::after {
  opacity: 0.4;
}

.map-grid-lines,
.map-markers,
.map-empty {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.map-grid-lines {
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(164, 216, 255, 0.18) calc(25% - 1px) 25%, transparent 25% calc(50% - 1px), rgba(164, 216, 255, 0.18) calc(50% - 1px) 50%, transparent 50% calc(75% - 1px), rgba(164, 216, 255, 0.18) calc(75% - 1px) 75%, transparent 75%),
    linear-gradient(0deg, transparent 0 calc(25% - 1px), rgba(164, 216, 255, 0.18) calc(25% - 1px) 25%, transparent 25% calc(50% - 1px), rgba(164, 216, 255, 0.18) calc(50% - 1px) 50%, transparent 50% calc(75% - 1px), rgba(164, 216, 255, 0.18) calc(75% - 1px) 75%, transparent 75%);
}

.map-markers {
  pointer-events: none;
}

.map-marker {
  position: absolute;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid #dffaff;
  background: #00c978;
  color: #04101d;
  font-size: 11px;
  font-weight: 900;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.38), 0 8px 20px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  pointer-events: auto;
}

.map-marker.warning {
  background: #ffbf00;
}

.map-marker.danger {
  background: #ff315c;
  color: #fff;
}

.map-marker.active {
  width: 34px;
  height: 34px;
  box-shadow: 0 0 0 4px rgba(0, 229, 255, 0.4), 0 0 28px rgba(0, 180, 255, 0.62);
  z-index: 4;
}

.heatmap-on .map-marker::after {
  content: "";
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  background: rgba(0, 229, 255, 0.16);
  z-index: -1;
}

.map-empty {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  color: var(--muted);
}

.map-empty[hidden] { display: none !important; }

.map-empty strong {
  display: block;
  margin-bottom: 8px;
  color: var(--text);
  font-size: 22px;
}

.map-empty p {
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.5;
}

.map-toggle,
.map-filter-group {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 13px;
}

.map-toggle {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.map-filter-group > span {
  color: var(--text);
  font-weight: 800;
}

.map-filter-group label {
  display: flex;
  gap: 8px;
  align-items: center;
}

.map-roster-list {
  display: grid;
  gap: 10px;
}

.map-selected-player {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid rgba(0, 180, 255, 0.22);
  border-radius: 8px;
  background: rgba(0, 13, 26, 0.62);
}

.map-selected-player h3,
.map-selected-player p {
  margin: 0;
}

.map-selected-player dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0;
}

.map-selected-player dt,
.map-selected-player dd {
  margin: 0;
}

.map-selected-player dt {
  color: var(--muted);
  font-size: 11px;
}

.map-selected-player dd {
  color: var(--text);
  font-weight: 800;
  font-size: 12px;
}

.map-selected-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.map-roster-items {
  display: grid;
  gap: 8px;
}

.map-roster-item {
  width: 100%;
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 10px;
  align-items: center;
  text-align: left;
  border: 1px solid rgba(0, 180, 255, 0.14);
  border-radius: 8px;
  background: rgba(0, 12, 24, 0.58);
  color: var(--text);
  padding: 9px;
  cursor: pointer;
}

.map-roster-item.active,
.map-roster-item:hover {
  border-color: rgba(0, 180, 255, 0.55);
  background: rgba(0, 93, 163, 0.24);
}

.map-roster-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #00c978;
  color: #06111d;
  font-weight: 900;
}

.map-roster-avatar.warning {
  background: #ffbf00;
}

.map-roster-avatar.danger {
  background: #ff315c;
  color: #fff;
}

.map-roster-item strong,
.map-roster-item small {
  display: block;
}

.map-roster-item small {
  color: var(--muted);
}

.map-roster-item em {
  font-style: normal;
  font-weight: 900;
  color: var(--accent);
}

@media (max-width: 1180px) {
  .map-canvas-wrap {
    grid-template-columns: 1fr;
  }

  .live-map {
    grid-column: 1;
    grid-row: 2;
    min-height: 62vh;
  }

  .map-controls,
  .map-roster {
    grid-column: 1;
    grid-row: auto;
    margin: 0;
    max-height: none;
  }

  .map-live-legend { left: 16px; right: 16px; }
}

/* Final BAKIShield panel polish */
.panel-nav a .nav-icon,
.side-support-block a .nav-icon,
.server-root #shellServerStatus {
  display: grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(126, 184, 228, 0.26);
  border-radius: 7px;
  background: rgba(4, 16, 29, 0.76);
  color: #9bc6df;
  font-size: 0;
}

.panel-nav a .nav-icon svg,
.side-support-block a .nav-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.panel-nav a.active .nav-icon,
.panel-nav a:hover .nav-icon,
.side-support-block a:hover .nav-icon {
  color: #001725;
  border-color: transparent;
  background: linear-gradient(135deg, #15baff, #0b8fff);
  box-shadow: 0 0 18px rgba(16, 199, 255, 0.34);
}

.server-root {
  grid-template-columns: 24px minmax(0, 1fr) auto 18px;
  min-height: 44px;
  padding: 6px 9px;
  border: 1px solid rgba(92, 167, 229, 0.16);
  border-radius: 8px;
  background: rgba(2, 10, 19, 0.52);
}

.server-root #shellServerStatus {
  width: 24px;
  height: 24px;
}

.server-root #shellServerMeta {
  width: auto;
  height: auto;
  min-width: 58px;
  padding: 3px 7px;
  border: 0;
  border-radius: 999px;
  color: #8fc8f2;
  background: rgba(7, 143, 255, 0.14);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  text-align: center;
}

.panel-sidebar .client-brand-card {
  padding: 9px 10px;
  border: 1px solid rgba(92, 167, 229, 0.20);
  background:
    linear-gradient(180deg, rgba(8, 24, 42, 0.82), rgba(3, 12, 22, 0.94)),
    radial-gradient(circle at 0% 0%, rgba(16, 199, 255, 0.18), transparent 46%);
}

.panel-sidebar .brand-logo {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.side-support-block a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 0 10px;
  color: #bfd7ea;
  text-decoration: none;
}

.side-support-block a strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(16px);
}

.top-profile {
  border: 1px solid rgba(92, 167, 229, 0.18);
}

.server-titlebar,
.stream-toolbar {
  border-bottom: 1px solid rgba(92, 167, 229, 0.12);
}

.player-modal {
  width: min(520px, calc(100vw - 34px));
  border-color: rgba(16, 199, 255, 0.35);
  background:
    linear-gradient(180deg, rgba(6, 17, 31, 0.98), rgba(2, 8, 17, 0.99)),
    radial-gradient(circle at 100% 0%, rgba(16, 199, 255, 0.12), transparent 34%);
}

.stream-card {
  min-height: 390px;
}

.stream-frame {
  min-height: 340px;
}

/* Final product alignment pass */
.server-console-main,
.stream-main,
.map-main {
  padding-left: 0;
  padding-right: 0;
}

.server-titlebar,
.stream-toolbar {
  padding-left: 34px;
  padding-right: 34px;
}

.server-console-main > .panel,
.players-grid,
.players-footer {
  margin-inline: 34px;
}

.players-grid:has(.empty-state) {
  grid-template-columns: minmax(280px, 430px);
}

.empty-state {
  min-height: 156px;
  align-content: center;
  background:
    linear-gradient(180deg, rgba(7, 22, 39, 0.70), rgba(2, 8, 17, 0.72)),
    radial-gradient(circle at 0% 0%, rgba(16, 199, 255, 0.12), transparent 34%);
}

.stream-empty {
  display: grid;
  place-items: center;
  padding: 34px;
  text-align: center;
}

.stream-empty strong {
  color: var(--text);
  font-size: 20px;
}

.stream-empty p {
  max-width: 520px;
}

.map-empty {
  z-index: 4;
  background: radial-gradient(circle at center, rgba(1, 7, 15, 0.64), rgba(1, 7, 15, 0.10) 55%, transparent 72%);
}

.top-profile strong,
.sidebar-user strong {
  max-width: 142px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-profile small,
.sidebar-user small {
  max-width: 156px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.model-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0}.model-stats article{padding:18px;display:flex;flex-direction:column;gap:6px}.model-stats strong{font-size:28px}.model-stats .safe{border-color:rgba(15,214,148,.35)}.model-stats .danger{border-color:rgba(255,47,76,.38)}.model-toolbar{padding:14px;display:flex;gap:12px;align-items:center}.model-toolbar input{flex:1}.models-source{margin:12px 2px}.models-source a{color:#ff5369}.models-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:14px}.model-card{overflow:hidden;border:1px solid #17283a;background:#030a13;border-radius:13px}.model-card.allowed{border-color:rgba(15,214,148,.45)}.model-card.blocked{border-color:rgba(255,47,76,.6)}.model-preview{display:flex;height:190px;align-items:center;justify-content:center;background:radial-gradient(circle,#10223a 0,#040b14 72%);overflow:hidden}.model-preview img{width:100%;height:100%;object-fit:contain}.model-preview.missing:after{content:'Apercu indisponible';color:#6e8094}.model-info{padding:13px;display:grid;gap:6px}.model-info strong{overflow:hidden;text-overflow:ellipsis}.model-info code{color:#ff5369}.model-info small{color:#7f91a6}.model-actions{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #17283a}.model-actions button{border:0;padding:11px;background:#071421;color:#aebccc;cursor:pointer}.model-actions .allow.active{background:rgba(15,214,148,.16);color:#21dfa0}.model-actions .block.active{background:rgba(255,47,76,.19);color:#ff5369}.models-footer{display:flex;justify-content:space-between;align-items:center;padding:18px 0}@media(max-width:800px){.model-stats{grid-template-columns:1fr}.model-toolbar{align-items:stretch;flex-direction:column}.model-toolbar .toolbar{flex-wrap:wrap}}
.global-search,.key-create{padding:14px;display:flex;gap:10px;margin:18px 0}.global-search input,.key-create input{flex:1}.search-summary{padding:8px 2px}.search-summary strong{font-size:24px;color:#ff405a}.search-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.search-group{padding:16px}.search-group h2{display:flex;justify-content:space-between}.search-group h2 small{color:#ff405a}.search-row,.key-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #142233}.search-row div,.key-row div{display:grid;gap:3px;flex:1}.search-row small,.key-row small{color:#718398}.search-row a{color:#ff5369}.secret-reveal{padding:18px;margin-bottom:16px;border-color:#ff405a}.copy-secret{display:flex;align-items:center;gap:10px}.copy-secret code{flex:1;word-break:break-all;color:#ff7083}.key-list{padding:4px 16px 16px}.key-row code{color:#ff7083}.console-window{overflow:hidden;margin-top:18px}.console-help{padding:12px 16px;border-bottom:1px solid #1b2b3c;color:#8091a3}.console-output{height:540px;overflow:auto;padding:16px;background:#01060b;font-family:Consolas,monospace}.console-entry{display:grid;grid-template-columns:75px 1fr auto;gap:10px;padding:8px 0;border-bottom:1px solid #0d1924}.console-entry span{color:#566d80}.console-entry em{color:#ffb833}.console-entry em.completed{color:#16d89b}.console-entry em.error{color:#ff405a}.console-entry pre{grid-column:2/4;white-space:pre-wrap;color:#adbbca;margin:4px 0}.console-input{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid #1b2b3c}.console-input span{color:#ff405a;font:700 20px Consolas}.console-input input{flex:1;background:transparent;border:0}@media(max-width:850px){.search-results{grid-template-columns:1fr}.global-search,.key-create{flex-direction:column}}
.ban-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin:18px 0}.ban-heading h1{margin:0 0 6px}.ban-filter{padding:17px;margin-bottom:18px}.ban-filter-line{display:flex;gap:10px;margin:14px 0}.ban-filter-line input{flex:1}.ban-filter>.toolbar{justify-content:flex-start}.ban-filter>.toolbar select{margin-left:auto}.bans-table-panel{overflow:hidden}.table-heading{display:flex;justify-content:space-between;padding:16px 18px}.table-heading>div{display:grid;gap:4px}.table-heading small{color:#72859a}.table-scroll{overflow:auto}.bans-table{width:100%;border-collapse:collapse;min-width:1250px}.bans-table th{text-align:left;padding:12px;color:#8da0b5;font-size:12px;border-top:1px solid #172536;border-bottom:1px solid #172536}.bans-table td{padding:11px 12px;border-bottom:1px solid #132131;vertical-align:middle}.bans-table td>strong,.bans-table td>small{display:block}.bans-table small{color:#718398;margin-top:3px}.bans-table code{color:#d8e5f1}.evidence-thumb{display:block;position:relative;width:72px;height:44px;border-radius:7px;overflow:hidden;background:#07121e}.evidence-thumb img{width:100%;height:100%;object-fit:cover}.evidence-thumb span{position:absolute;inset:0;display:grid;place-items:center;color:white;background:#0004}.ban-actions{display:flex;gap:8px}.ban-actions a,.ban-actions button{border:0;background:transparent;color:#ff5369;cursor:pointer}.ban-actions button{color:#ff8797}@media(max-width:900px){.ban-heading{flex-direction:column}.ban-filter-line{flex-direction:column}}
.icon-actions{align-items:center;justify-content:center;gap:7px}.icon-button{width:37px;height:37px;border:1px solid transparent!important;border-radius:9px!important;display:grid!important;place-items:center;background:transparent!important;color:#c7d7e7!important;transition:.18s ease}.icon-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.icon-button:hover{background:#102033!important;border-color:#294057!important;color:#fff!important;transform:translateY(-1px)}.icon-button.danger{color:#ff3655!important}.icon-button.danger:hover{background:#3a0c16!important;border-color:#7a1b2d!important}.icon-button.disabled{opacity:.25;pointer-events:none}.evidence-thumb{border:0;cursor:pointer}.ban-details-modal{width:min(880px,calc(100vw - 32px));max-width:880px}.ban-detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}.ban-detail-grid>div,.ban-reason-box{padding:14px;border:1px solid #1a2a3d;border-radius:10px;background:#06101c;display:grid;gap:5px}.ban-detail-grid small,.ban-reason-box small{color:#748aa0;font-size:10px}.ban-proof-video{width:100%;max-height:440px;background:#000;border:1px solid #20344b;border-radius:10px;margin:14px 0}.ban-details-modal details{margin-top:14px}.ban-details-modal pre{max-height:260px;overflow:auto;background:#02070d;padding:14px;border-radius:9px}.search-page-title{display:flex;align-items:end;justify-content:space-between;gap:20px;padding:22px 0 6px}.search-page-title h1{margin:0}.player-search-bar{margin-top:14px}.player-reputation-card{padding:20px;border-top:3px solid #2f87ff;margin:16px 0}.player-reputation-card.risk-critique{border-top-color:#ff3151}.player-reputation-card.risk-moyen{border-top-color:#ff9f1c}.player-reputation-card header{display:flex;align-items:flex-start;gap:14px}.player-reputation-card h2{margin:0 0 3px;font-size:25px}.reputation-avatar{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#071e3b;color:#3e9cff;font-size:21px;font-weight:800}.reputation-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;background:#061120;border-radius:10px;padding:15px;margin:22px 0}.reputation-stats>div{display:grid;gap:5px}.reputation-stats small,.threat-head{color:#7894ae;font-size:11px}.threat-head{display:flex;justify-content:space-between}.threat-head strong{color:#ffac25}.threat-track{height:6px;background:#092748;border-radius:9px;overflow:hidden;margin:8px 0 12px}.threat-track span{display:block;height:100%;background:linear-gradient(90deg,#008cff,#ff3655);border-radius:9px}.reputation-warning,.reputation-clean{padding:13px;border-radius:8px}.reputation-warning{background:#27101f;color:#ff5972}.reputation-warning ul{margin:7px 0 0;padding-left:19px}.reputation-clean{background:#08251d;color:#25d99d}.reputation-tabs{overflow:hidden;margin-bottom:16px}.reputation-tabs nav{display:grid;grid-template-columns:repeat(5,1fr);background:#061221}.reputation-tabs nav span{padding:12px;text-align:center;color:#8ca2b7;border-bottom:1px solid #17304a}.reputation-tabs nav span:first-child{background:#09213a;color:#fff}.reputation-tabs nav b{background:#123b67;border-radius:10px;padding:2px 6px}.identity-columns{display:grid;grid-template-columns:1.25fr 1fr .8fr;gap:24px;padding:18px}.identity-columns section{display:flex;flex-direction:column;gap:7px}.identity-columns code{display:block;padding:9px;border:1px solid #19304a;border-radius:6px;color:#8ba7c2;overflow-wrap:anywhere}.reputation-history{overflow:hidden}.search-row.full{width:100%;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}.search-row.full:hover{background:#081522}.search-open{color:#ff5369}.mobile-menu-toggle,.mobile-nav-backdrop{display:none}
.evidence-missing{padding:7px 10px;border:1px solid rgba(255,64,90,.38);border-radius:7px;background:rgba(255,64,90,.10);color:#ff7184;font-weight:800;cursor:pointer}

/* Public showcase: black, red and white BAKIShield identity */
body.landing-page{--bg:#050505;--bg-soft:#0b0b0d;--panel:#0e0e11;--panel-2:#141417;--line:#29292e;--text:#fff;--muted:#aaaab3;--blue:#e32138;--blue-2:#ff4057;background:radial-gradient(circle at 82% 12%,rgba(227,33,56,.16),transparent 32%),linear-gradient(180deg,#050505,#09090b 52%,#030303);color:#fff}
body.landing-page:before{background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,#000,transparent 76%)}
.landing-page .nav{border:1px solid rgba(255,255,255,.09);background:rgba(7,7,8,.86);box-shadow:0 18px 60px #0008}
.landing-page .brand-logo{filter:drop-shadow(0 0 18px rgba(227,33,56,.48))}
.landing-page .nav-links a{color:#d2d2d7}.landing-page .nav-links a:hover{color:#ff4057}
.landing-page .button{border-color:#34343a;background:#101013;color:#fff}.landing-page .button:hover{border-color:#e32138;background:#19191d}
.landing-page .button.primary{border-color:#ff4057;background:linear-gradient(135deg,#f02a42,#9d0d1e);color:#fff;box-shadow:0 12px 34px rgba(227,33,56,.23)}
.landing-page .hero{min-height:690px;background:radial-gradient(circle at 76% 30%,rgba(227,33,56,.18),transparent 30%),linear-gradient(135deg,#060607,#101014 58%,#080809);border-block:1px solid rgba(255,255,255,.07)}
.landing-page .hero:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 48%,rgba(255,255,255,.025) 49%,transparent 50%)}
.landing-page .eyebrow{border-color:rgba(255,64,87,.38);background:rgba(227,33,56,.11);color:#ff6577}
.landing-page .hero h1{font-size:clamp(64px,9vw,132px);letter-spacing:-.075em;background:linear-gradient(180deg,#fff 25%,#a5a5aa);-webkit-background-clip:text;background-clip:text;color:transparent}
.landing-page .hero-copy p{max-width:760px;color:#b9b9c0;font-size:19px;line-height:1.75}
.landing-page .hero-dashboard{border-color:rgba(255,64,87,.32);background:linear-gradient(180deg,rgba(19,19,22,.96),rgba(7,7,8,.98));box-shadow:0 28px 90px #000b,0 0 50px rgba(227,33,56,.08)}
.landing-page .hero-dashboard:before{content:"LIVE PROTECTION";display:block;padding-bottom:14px;color:#ff4057;font-size:11px;font-weight:900;letter-spacing:.18em}
.landing-page .mock-grid>div,.landing-page .signal-row,.landing-page .hero-stats>div,.landing-page .card,.landing-page .split-section{border-color:rgba(255,255,255,.09);background:linear-gradient(180deg,#111114,#09090b)}
.landing-page .mock-grid strong,.landing-page .hero-stats strong{color:#fff}.landing-page .signal-row.danger strong{color:#ff4057}
.landing-page .section{padding-block:88px}.landing-page .section h2{font-size:clamp(32px,4vw,54px);letter-spacing:-.04em}.landing-page .section-lead{color:#a9a9b1}
.landing-page .card{position:relative;overflow:hidden}.landing-page .card:before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:linear-gradient(90deg,#e32138,transparent)}.landing-page .card h3{color:#fff}.landing-page .card p{color:#a7a7af}
.landing-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:56px;padding-block:36px;border-top:1px solid rgba(255,255,255,.10);color:#95959e}.landing-footer .brand{display:flex}.landing-footer .brand-logo{width:46px;height:46px}
@media(max-width:760px){.landing-page .nav .brand{min-width:0}.landing-page .nav>.button.primary{min-height:38px;padding-inline:13px}.landing-page .hero{min-height:auto}.landing-page .hero h1{font-size:56px}.landing-page .hero-copy p{font-size:16px}.landing-page .section{padding-block:56px}.landing-footer{align-items:flex-start;flex-direction:column}}
@media(max-width:980px){body.panel-body{overflow-x:hidden}.panel-layout{display:block!important}.panel-sidebar{position:fixed!important;z-index:1002!important;left:0;top:0;bottom:0;width:min(86vw,320px)!important;max-width:320px;transform:translateX(-105%);transition:transform .22s ease;box-shadow:20px 0 60px #000b}.mobile-nav-open .panel-sidebar{transform:translateX(0)}.mobile-menu-toggle{display:grid;position:fixed;z-index:1004!important;left:12px;top:calc(12px + env(safe-area-inset-top));width:43px;height:43px;border:1px solid #26394e;border-radius:10px;background:#06111d;place-content:center;gap:4px}.mobile-menu-toggle span{width:19px;height:2px;background:#fff;border-radius:2px}.mobile-nav-backdrop{position:fixed;z-index:1001;inset:0;border:0;background:#000a}.mobile-nav-open .mobile-nav-backdrop{display:block}.dashboard-main,.server-console-main,.main{width:100%!important;max-width:none!important;grid-template-columns:minmax(0,1fr)!important;margin:0!important;padding:calc(66px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom))!important}.panel-topbar{min-height:50px;padding-left:48px!important}.topbar-actions .system-pill,.panel-breadcrumb{display:none}.server-titlebar,.search-page-title{align-items:stretch;flex-direction:column}.server-picker,.search-page-title .field{width:100%!important}.ban-detail-grid,.reputation-stats{grid-template-columns:repeat(2,1fr)}.identity-columns{grid-template-columns:1fr}.reputation-tabs nav{display:flex;overflow-x:auto}.reputation-tabs nav span{min-width:150px}.models-grid,.players-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.map-sidebar,.map-player-panel{position:static!important;width:100%!important}.map-page{display:flex!important;flex-direction:column}.stream-layout{grid-template-columns:1fr!important}.stream-sidebar{max-height:340px}.dashboard-grid,.admin-grid,.overview-grid{grid-template-columns:1fr!important}}
@media(max-width:680px){.dashboard-main,.server-console-main,.main{padding-left:10px!important;padding-right:10px!important}.panel-topbar{margin-left:0}.top-profile>div:not(.avatar-shell){display:none}.ban-heading .toolbar,.ban-filter>.toolbar,.players-footer,.models-footer{width:100%;display:grid;grid-template-columns:1fr}.ban-filter>.toolbar select{margin-left:0;width:100%}.global-search,.player-search-bar{flex-direction:column}.models-grid,.players-grid{grid-template-columns:1fr!important}.model-preview{height:220px}.ban-detail-grid,.reputation-stats{grid-template-columns:1fr}.player-reputation-card{padding:14px}.player-reputation-card header{align-items:center}.player-reputation-card h2{font-size:20px}.reputation-tabs nav span{min-width:135px}.identity-columns{padding:13px}.table-scroll{overflow:visible}.bans-table{min-width:0}.bans-table thead{display:none}.bans-table,.bans-table tbody,.bans-table tr,.bans-table td{display:block;width:100%}.bans-table tr{border:1px solid #1a2d42;border-radius:12px;margin:10px;background:#06111e;overflow:hidden}.bans-table td{display:grid;grid-template-columns:105px 1fr;gap:10px;border-bottom:1px solid #13283c;padding:10px}.bans-table td:before{color:#718ba4;font-size:10px;text-transform:uppercase}.bans-table td:nth-child(1):before{content:'Joueur'}.bans-table td:nth-child(2):before{content:'ID de ban'}.bans-table td:nth-child(3):before{content:'Raison'}.bans-table td:nth-child(4):before{content:'Preuve'}.bans-table td:nth-child(5):before{content:'Statut'}.bans-table td:nth-child(6):before{content:'Date'}.bans-table td:nth-child(7):before{content:'Première connexion'}.bans-table td:nth-child(8):before{content:'Actions'}.bans-table .icon-actions{justify-content:flex-start}.console-output{height:55vh}.map-canvas{min-height:62vh!important}.stream-frame{min-height:240px!important}.page-hero,.server-titlebar{padding:16px!important}.table-heading{align-items:flex-start;gap:8px}.table-heading .pill{display:none}}

/* Player intelligence workspace */
.player-search-body .search-page-title{padding:30px 4px 8px}.player-search-body .search-page-title h1{font-size:clamp(30px,3vw,46px);letter-spacing:-.045em}.player-search-body .global-search{border-color:rgba(255,64,87,.22);background:#0b0b0e}.player-search-body .player-reputation-card{border-color:rgba(255,255,255,.09);border-top-color:#e32138;background:radial-gradient(circle at 0 0,rgba(227,33,56,.13),transparent 28%),#0b0b0e}.player-search-body .reputation-avatar{background:#21070c;color:#ff5167}.player-search-body .reputation-stats{border:1px solid rgba(255,255,255,.06);background:#070709}.player-search-body .threat-track{background:#251014}.player-search-body .threat-track span{background:linear-gradient(90deg,#ffb020,#e32138)}
.reputation-tabs{border-color:rgba(255,255,255,.09);background:#09090b}.reputation-tabs nav{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));overflow:auto;border-bottom:1px solid rgba(255,255,255,.08);background:#070708}.reputation-tabs nav button{position:relative;min-height:54px;padding:10px 14px;border:0;border-right:1px solid rgba(255,255,255,.05);background:transparent;color:#8e8e98;font-weight:800;white-space:nowrap}.reputation-tabs nav button:after{content:"";position:absolute;left:18%;right:18%;bottom:0;height:2px;background:#e32138;transform:scaleX(0);transition:transform .18s ease}.reputation-tabs nav button:hover{color:#fff;background:rgba(255,255,255,.025)}.reputation-tabs nav button.active{color:#fff;background:linear-gradient(180deg,rgba(227,33,56,.13),rgba(227,33,56,.03))}.reputation-tabs nav button.active:after{transform:scaleX(1)}.reputation-tabs nav button:focus-visible{outline:2px solid #ff4057;outline-offset:-3px}.reputation-tabs nav b{display:inline-grid;min-width:20px;height:20px;margin-left:5px;padding:0 6px;place-items:center;border-radius:999px;background:#2a0a10;color:#ff6577;font-size:11px}.reputation-panel{padding:22px}.reputation-panel[hidden]{display:none!important}.tab-panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:17px}.tab-panel-heading h3,.tab-panel-heading p{margin:0}.tab-panel-heading p{margin-top:5px;color:#868691}
.identity-token{display:flex;align-items:center;gap:8px}.identity-token code{flex:1}.identity-token button,.player-note button{border:0;background:transparent;color:#ff6176;font-weight:800}.known-name{display:grid;gap:3px;padding:10px;border:1px solid rgba(255,255,255,.07);border-radius:7px;background:#070709}.known-name small{color:#797983}.alternate-list,.player-notes-list{display:grid;gap:10px}.alternate-account{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;width:100%;padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:9px;background:#08080a;color:#fff;text-align:left}.alternate-account:hover{border-color:rgba(255,64,87,.38);background:#10090b}.alternate-account>span:nth-child(2){display:grid;gap:3px;min-width:0}.alternate-account code{overflow:hidden;color:#9696a0;text-overflow:ellipsis}.alternate-account small{color:#73737d}.alternate-account em{color:#ff5369;font-style:normal;font-weight:800}.reputation-avatar.small{width:38px;height:38px;font-size:14px}
.profile-ban-list{display:grid;gap:9px}.profile-ban-row{display:grid;grid-template-columns:minmax(130px,.8fr) minmax(220px,1.5fr) minmax(170px,1fr) minmax(150px,.8fr) auto auto;align-items:center;gap:14px;padding:13px;border:1px solid rgba(255,255,255,.075);border-radius:9px;background:#070709}.profile-ban-row>div{display:grid;gap:4px;min-width:0}.profile-ban-row small{color:#6f6f79;font-size:10px}.profile-ban-row strong,.profile-ban-row code,.profile-ban-row span{overflow:hidden;text-overflow:ellipsis}.profile-empty{padding:34px;border:1px dashed rgba(255,255,255,.12);border-radius:9px;color:#777781;text-align:center;background:#070709}
.player-note-form{display:grid;gap:10px;margin-bottom:18px}.player-note-form textarea{min-height:105px;resize:vertical;border-color:rgba(255,255,255,.10);background:#070709}.player-note-form>div{display:flex;align-items:center;justify-content:space-between;gap:14px}.player-note-form small{color:#777781}.player-note{padding:14px;border:1px solid rgba(255,255,255,.08);border-left:2px solid #e32138;border-radius:8px;background:#070709}.player-note header{display:flex;justify-content:space-between;gap:12px}.player-note header small{color:#75757f}.player-note p{margin:12px 0;color:#d4d4d8;white-space:pre-wrap}.player-note>button{padding:0}.player-search-body .reputation-clean{background:#082119;color:#3be0a6}
@media(max-width:1100px){.reputation-tabs nav{grid-template-columns:repeat(5,minmax(170px,1fr))}.profile-ban-row{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-ban-row>.pill,.profile-ban-row>.button,.profile-ban-row>.muted{justify-self:start}}
@media(max-width:680px){.reputation-tabs nav button{min-width:145px}.reputation-panel{padding:14px}.tab-panel-heading,.player-note-form>div{align-items:stretch;flex-direction:column}.alternate-account{grid-template-columns:auto minmax(0,1fr)}.alternate-account em{grid-column:2}.profile-ban-row{grid-template-columns:1fr}.identity-token{align-items:stretch;flex-direction:column}.identity-token button{align-self:flex-start}}

/* Mobile overflow hardening across every customer/admin category. */
@media(max-width:980px){
  .panel-topbar{margin-left:0!important;margin-right:0!important}
  .reputation-tabs nav button{min-width:150px}
  .reputation-panel,.player-reputation-card,.panel{max-width:100%}
  code,pre,.identity-token,.profile-ban-row{min-width:0;overflow-wrap:anywhere}
}
@media(max-width:680px){
  .bans-table tr{width:auto!important;margin:10px 0!important}
  .reputation-tabs nav button{min-width:135px}
}

/* Professional event journal */
.logs-license-picker{min-width:280px;margin:0}.logs-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0}.logs-metric{position:relative;overflow:hidden;padding:16px;border:1px solid #20252d;border-radius:10px;background:linear-gradient(145deg,#0d0e11,#07080a)}.logs-metric:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#60646f}.logs-metric.red:before,.logs-metric.danger:before{background:#ef2f47}.logs-metric.warning:before{background:#e2a43b}.logs-metric span,.logs-metric small{display:block;color:#888b95;font-size:11px}.logs-metric strong{display:block;margin:5px 0;color:#fff;font-size:28px}.logs-toolbar{display:grid;grid-template-columns:minmax(240px,1fr) 190px 170px 180px auto auto;gap:9px;padding:12px;border:1px solid #252831;border-radius:10px;background:#08090b}.logs-toolbar select,.logs-search{min-height:42px;border:1px solid #292d36;border-radius:7px;background:#050608;color:#fff}.logs-search{display:flex;align-items:center;gap:8px;padding:0 12px}.logs-search span{color:#ef3048;font-size:22px}.logs-search input{width:100%;border:0;outline:0;background:transparent;color:#fff}.logs-result-bar{display:flex;justify-content:space-between;align-items:center;padding:17px 4px 10px;color:#888b95;font-size:12px}.logs-result-bar strong{color:#fff}.professional-log-list{border-top:1px solid #252831}.professional-log-row{display:grid;grid-template-columns:88px 24px minmax(300px,1fr) minmax(250px,.75fr);gap:12px;align-items:start;padding:17px 8px;border-bottom:1px solid #20242c;background:linear-gradient(90deg,rgba(255,255,255,.018),transparent)}.professional-log-row:hover{background:rgba(255,255,255,.028)}.log-time{text-align:right}.log-time strong,.log-time small{display:block}.log-time small{margin-top:4px;color:#747984;font-size:10px}.log-marker{position:relative;height:100%}.log-marker:before{content:"";position:absolute;left:11px;top:-17px;bottom:-18px;width:1px;background:#2d3038}.log-marker span{position:relative;z-index:1;display:block;width:11px;height:11px;margin:5px 0 0 6px;border:2px solid #6e7480;border-radius:50%;background:#08090b}.severity-critical .log-marker span{border-color:#ff3d55;box-shadow:0 0 14px #ff304766}.severity-warning .log-marker span{border-color:#e2a43b}.severity-info .log-marker span{border-color:#3c91e8}.log-summary-head{display:flex;align-items:center;gap:8px}.log-category{color:#ff4359;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.1em}.log-summary h3{margin:8px 0 5px;color:#fff;font-size:15px}.log-summary p{margin:0;color:#8c919c;font-size:12px}.log-summary code{color:#aab0ba}.log-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.log-meta span,.log-meta a{padding:4px 7px;border:1px solid #272c35;border-radius:5px;color:#9299a5;font-size:10px;text-decoration:none}.log-meta a{border-color:#6f202d;color:#ff566a}.log-technical{border:1px solid #242831;border-radius:7px;background:#050608}.log-technical summary{padding:10px;color:#a9adb6;cursor:pointer;font-size:11px;font-weight:800}.log-technical pre{max-height:240px;margin:0;padding:12px;border-top:1px solid #20242b;overflow:auto;color:#aab8c8;font-size:10px;white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:1200px){.logs-toolbar{grid-template-columns:1fr 1fr 1fr}.professional-log-row{grid-template-columns:72px 20px 1fr}.log-technical{grid-column:3}}
@media(max-width:720px){.logs-license-picker{min-width:0;width:100%}.logs-metrics{grid-template-columns:1fr 1fr}.logs-toolbar{grid-template-columns:1fr}.professional-log-row{grid-template-columns:54px 14px minmax(0,1fr);padding-inline:0}.log-time strong{font-size:11px}.log-technical{grid-column:1/-1;margin-left:68px}.log-summary p code{display:block;margin-top:4px;overflow-wrap:anywhere}}

/* Administration workspace */
.admin-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.admin-metrics article.attention{border-color:#7c2632;background:linear-gradient(145deg,#25090e,#0c090b)}.admin-create-pro{grid-template-columns:minmax(220px,1.3fr) 160px 160px minmax(190px,1fr) auto}.admin-controlbar{display:grid;grid-template-columns:minmax(260px,1fr) 190px 180px auto;gap:9px;margin:18px 0 8px;padding:11px;border:1px solid #272a31;border-radius:9px;background:#08090b}.admin-controlbar input,.admin-controlbar select{min-height:42px;border:1px solid #2a2d34;border-radius:7px;background:#050608;color:#fff;padding:0 12px}.admin-result-count{margin:10px 2px}.admin-license-card{display:grid;grid-template-columns:minmax(190px,1.1fr) minmax(230px,1.3fr) minmax(190px,1fr) 150px 110px 150px;gap:15px;align-items:center;padding:15px;border:1px solid #24272e;border-left:3px solid #4b4e57;border-radius:9px;background:linear-gradient(110deg,#0d0e11,#07080a)}.admin-license-card.is-online{border-left-color:#24c887}.admin-client{display:flex;align-items:center;gap:10px}.admin-client-avatar{display:grid;width:38px;height:38px;border:1px solid #65202a;border-radius:10px;background:#21080d;color:#ff5065;place-items:center;font-weight:900}.admin-client strong,.admin-client small,.admin-server-health strong,.admin-server-health small,.admin-license-plan small,.admin-license-plan strong,.admin-license-plan span,.admin-license-risk small,.admin-license-risk strong,.admin-license-risk span,.admin-license-key small{display:block}.admin-client small,.admin-server-health small,.admin-license-plan small,.admin-license-plan span,.admin-license-risk small,.admin-license-risk span,.admin-license-key small{margin-top:4px;color:#7f848f;font-size:10px}.admin-server-health .system-pill{margin-bottom:7px}.admin-license-key code{display:block;margin:5px 0;color:#d8d9de;overflow-wrap:anywhere}.admin-license-key button{border:0;background:transparent;color:#ff4e63;cursor:pointer;padding:0;font-weight:800}.admin-license-actions{display:grid;gap:8px}.admin-payment-card{display:grid;grid-template-columns:1.2fr .6fr 1fr auto;gap:18px;align-items:center;padding:15px;border-bottom:1px solid #24272e;background:#090a0c}.admin-payment-card h3{margin:8px 0 3px}.admin-payment-card p,.admin-payment-card small,.admin-payment-card span{display:block;color:#858a95;font-size:11px}.admin-license-modal{width:min(760px,94vw)}.admin-edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.admin-modal-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:9px;margin-top:7px}.admin-toast{position:fixed;z-index:3000;right:18px;bottom:18px;max-width:min(420px,90vw);padding:13px 17px;border:1px solid #286d54;border-radius:9px;background:#09251c;color:#7bf0bd;box-shadow:0 18px 50px #000a;opacity:0;transform:translateY(16px);transition:.2s;pointer-events:none}.admin-toast.visible{opacity:1;transform:none}.admin-toast.error{border-color:#7d2934;background:#280a0f;color:#ff7a8c}
@media(max-width:1450px){.admin-license-card{grid-template-columns:1fr 1.3fr 1fr 130px}.admin-license-risk,.admin-license-actions{grid-column:auto}.admin-create-pro{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:980px){.admin-metrics{grid-template-columns:1fr 1fr}.admin-create-pro,.admin-controlbar{grid-template-columns:1fr 1fr}.admin-license-card{grid-template-columns:1fr 1fr}.admin-payment-card{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.admin-create-pro,.admin-controlbar,.admin-license-card,.admin-payment-card,.admin-edit-grid{grid-template-columns:1fr}.admin-modal-actions{grid-column:1;display:grid}.admin-license-card{gap:12px}.admin-license-key,.admin-license-plan,.admin-license-risk,.admin-license-actions{padding-top:10px;border-top:1px solid #24272e}}

/* Professional storefront */
.shop-trustbar{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:20px 0 28px}.shop-trustbar span{padding:8px 12px;border:1px solid #282b32;border-radius:999px;background:#0a0b0d;color:#b7bac2;font-size:12px}.shop-plan-grid{align-items:stretch}.shop-plan-card{position:relative;display:flex;flex-direction:column;min-height:470px;padding:27px!important;border-color:#292c33!important;background:linear-gradient(155deg,#111216,#070709 66%)!important}.shop-plan-card.recommended{transform:translateY(-8px);border-color:#9b2637!important;box-shadow:0 24px 70px rgba(213,20,45,.18)!important}.shop-recommended{position:absolute;right:16px;top:16px;padding:6px 9px;border-radius:999px;background:#e5223b;color:#fff;font-size:10px;font-weight:900;text-transform:uppercase}.shop-plan-head h3{margin:18px 0 9px;font-size:27px}.shop-plan-head p{min-height:48px;color:#92959d}.shop-plan-card .price{margin:20px 0 3px;color:#fff}.shop-plan-card .price strong{font-size:52px;letter-spacing:-.05em}.shop-plan-card .price span{font-size:15px;color:#979aa3}.shop-payment-mode{color:#6f737d}.shop-plan-card .plan-list{flex:1;margin-block:22px}.shop-buy{width:100%;min-height:47px}.shop-process{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:30px 0}.shop-process article{display:flex;gap:14px;padding:18px;border:1px solid #282b32;border-radius:10px;background:#090a0c}.shop-process b{color:#ff3d54;font-size:22px}.shop-process strong{color:#fff}.shop-process p{margin:6px 0 0;color:#858993;font-size:12px;line-height:1.5}.shop-faq{display:grid;gap:8px;max-width:900px;margin:30px auto}.shop-faq details{border:1px solid #292c33;border-radius:9px;background:#090a0c}.shop-faq summary{padding:16px;color:#fff;font-weight:800;cursor:pointer}.shop-faq p{padding:0 16px 16px;margin:0;color:#9699a2}.shop-toast{position:fixed;z-index:3000;left:50%;bottom:24px;transform:translate(-50%,20px);padding:13px 18px;border:1px solid #286d54;border-radius:9px;background:#09251c;color:#7bf0bd;box-shadow:0 20px 60px #000b;opacity:0;transition:.2s}.shop-toast.visible{opacity:1;transform:translate(-50%,0)}.shop-toast.error{border-color:#7d2934;background:#280a0f;color:#ff7a8c}
@media(max-width:800px){.shop-plan-card.recommended{transform:none}.shop-process{grid-template-columns:1fr}.shop-plan-card{min-height:0}.shop-plan-head p{min-height:0}}