:root {
  --bg: #0b0d12;
  --panel: #11151d;
  --panel-2: #161b25;
  --border: #232a37;
  --text: #f5f7fb;
  --muted: #8e98a8;
  --accent: #a855f7;
  --accent-2: #7c3aed;
  --danger: #ef4444;
  --warning: #f59e0b;
  --success: #22c55e;
  --info: #38bdf8;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

.login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at top, rgba(168, 85, 247, .18), transparent 35%),
    var(--bg);
}

.login-shell {
  width: min(92vw, 520px);
}

.login-card {
  padding: 42px;
  background: rgba(17, 21, 29, .96);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .4);
}

.brand-mark {
  width: 62px;
  height: 62px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-weight: 900;
  letter-spacing: -.05em;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  margin-bottom: 18px;
}

.brand-mark.small {
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 10px;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: .85rem;
}

.login-state {
  margin: 26px 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: #0d1118;
  border: 1px solid var(--border);
  display: flex;
  gap: 10px;
  align-items: center;
  color: #c7d0dc;
}

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 18px rgba(34, 197, 94, .8);
}

.primary-button,
.secondary-button,
.discord-button {
  border: 0;
  border-radius: 10px;
  padding: 12px 16px;
  font-weight: 700;
  cursor: pointer;
}

.primary-button {
  display: block;
  text-align: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
}

.discord-button {
  margin-top: 12px;
  width: 100%;
  background: #5865f2;
  color: white;
  opacity: .45;
  cursor: not-allowed;
}

.secondary-button {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
}

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

.sidebar {
  background: #0d1016;
  border-right: 1px solid var(--border);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px 24px;
}

.sidebar-brand strong,
.sidebar-brand span {
  display: block;
}

.sidebar-brand span {
  color: var(--muted);
  font-size: .78rem;
}

.nav-list {
  display: grid;
  gap: 5px;
}

.nav-item {
  padding: 11px 12px;
  border-radius: 9px;
  color: #b9c2cf;
}

.nav-item:hover,
.nav-item.active {
  background: var(--panel-2);
  color: white;
}

.nav-item.active {
  box-shadow: inset 3px 0 0 var(--accent);
}

.nav-item.disabled {
  opacity: .35;
  pointer-events: none;
}

.sidebar-footer {
  margin-top: auto;
  display: grid;
  gap: 10px;
  padding: 12px 8px 0;
  color: var(--muted);
  font-size: .85rem;
}

.backend-pill {
  width: fit-content;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
}

.backend-pill.ok {
  color: var(--success);
}

.backend-pill.error {
  color: var(--danger);
}

.main-panel {
  padding: 30px;
  min-width: 0;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  margin-bottom: 24px;
}

h1, h2, p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: 2rem;
}

h2 {
  font-size: 1.05rem;
  margin-bottom: 0;
}

.eyebrow {
  margin-bottom: 5px;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.metric-card,
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.metric-card {
  padding: 18px;
}

.metric-card span,
.metric-card small {
  display: block;
  color: var(--muted);
}

.metric-card strong {
  display: block;
  font-size: 1.8rem;
  margin: 8px 0 4px;
}

.metric-card small {
  font-size: .75rem;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.panel {
  padding: 18px;
  min-width: 0;
}

.span-2 {
  grid-column: 1 / -1;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 15px;
}

.panel-header a {
  color: var(--accent);
  font-size: .85rem;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

th,
td {
  padding: 11px 9px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: .84rem;
}

th {
  color: var(--muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.loading-row {
  color: var(--muted);
  text-align: center;
  padding: 30px;
}

.badge {
  display: inline-block;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  background: var(--panel-2);
  border: 1px solid var(--border);
}

.badge.low { color: var(--success); }
.badge.medium { color: var(--info); }
.badge.high { color: var(--warning); }
.badge.critical { color: var(--danger); }

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

.stack-item {
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #0d1118;
}

.stack-item strong,
.stack-item span {
  display: block;
}

.stack-item span {
  color: var(--muted);
  font-size: .78rem;
  margin-top: 4px;
}

.mode-label {
  font-size: 1rem !important;
}

.skeleton-line {
  height: 42px;
  border-radius: 8px;
  background: linear-gradient(90deg, #171c25, #222a37, #171c25);
}

.error-banner {
  position: fixed;
  right: 24px;
  bottom: 24px;
  max-width: 440px;
  padding: 13px 15px;
  border-radius: 10px;
  color: #fecaca;
  background: #2a0f14;
  border: 1px solid #5f1c25;
}

.hidden {
  display: none;
}

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

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

  .span-2 {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: relative;
    height: auto;
  }

  .main-panel {
    padding: 20px 14px;
  }

  .cards-grid {
    grid-template-columns: 1fr;
  }
}


.active-discord {
  display: block;
  text-align: center;
  opacity: 1;
  cursor: pointer;
}

.active-discord:hover {
  filter: brightness(1.08);
}


.player-search {
  display: flex;
  gap: 10px;
}

.search-input {
  flex: 1;
  min-width: 0;
  background: #0d1118;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  outline: none;
}

.search-input:focus {
  border-color: var(--accent);
}

.primary-inline-button {
  border: 0;
  border-radius: 10px;
  padding: 12px 18px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.clickable-row {
  cursor: pointer;
}

.clickable-row:hover td {
  background: rgba(168, 85, 247, .06);
}

.evidence-link {
  display: inline-block;
  margin-top: 8px;
  color: var(--accent);
  font-size: .8rem;
  font-weight: 700;
}

.badge.none {
  color: var(--muted);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}


.report-toolbar,
.report-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.select-input {
  background: #0d1118;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
}

.select-input:focus {
  border-color: var(--accent);
}

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

.badge.report-open {
  color: var(--info);
}

.badge.report-claimed,
.badge.report-investigating {
  color: var(--warning);
}

.badge.report-action-taken {
  color: var(--success);
}

.badge.report-dismissed,
.badge.report-closed {
  color: var(--muted);
}

@media (max-width: 760px) {
  .evidence-grid {
    grid-template-columns: 1fr;
  }
}

.gg-modal{position:fixed;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:24px;z-index:100}.gg-modal.hidden{display:none}.gg-modal-card{width:min(850px,100%);max-height:90vh;overflow:auto;background:#10151d;border:1px solid var(--border);border-radius:16px;padding:22px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0}.form-grid label{display:flex;flex-direction:column;gap:7px;color:var(--muted);font-size:.82rem}.form-grid .span-2{grid-column:span 2}textarea.search-input{min-height:90px;resize:vertical}@media(max-width:760px){.form-grid{grid-template-columns:1fr}.form-grid .span-2{grid-column:span 1}}


.form-stack {
  display: grid;
  gap: 14px;
}

.form-stack label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: .82rem;
}

.toggle-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: .82rem;
}

.success-banner {
  position: fixed;
  right: 24px;
  bottom: 24px;
  max-width: 440px;
  padding: 13px 15px;
  border-radius: 10px;
  color: #bbf7d0;
  background: #0d2918;
  border: 1px solid #1d6337;
}


.runtime-cards {
  margin-top: 14px;
}

.runtime-grid {
  margin-bottom: 14px;
}

.runtime-health {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: .72rem;
  font-weight: 800;
}

.runtime-health.online {
  color: var(--success);
  background: rgba(34, 197, 94, .08);
}

.runtime-health.stale {
  color: var(--warning);
  background: rgba(245, 158, 11, .08);
}

.runtime-health.offline {
  color: var(--danger);
  background: rgba(239, 68, 68, .08);
}

.runtime-warning-item {
  border-color: rgba(245, 158, 11, .35);
}

.runtime-warning-item strong {
  color: var(--warning);
}

.runtime-ok-item {
  border-color: rgba(34, 197, 94, .3);
}

.runtime-ok-item strong {
  color: var(--success);
}


.notification-critical {
  border-color: rgba(239, 68, 68, .42);
}

.notification-critical strong {
  color: var(--danger);
}

.notification-high {
  border-color: rgba(249, 115, 22, .4);
}

.notification-high strong {
  color: #fb923c;
}

.notification-warning {
  border-color: rgba(245, 158, 11, .38);
}

.notification-warning strong {
  color: var(--warning);
}

.notification-info strong {
  color: var(--info);
}


.rbac-hidden {
  display: none !important;
}


.investigation-note-compose,
.evidence-annotation-compose {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.evidence-annotation-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.evidence-annotation {
  padding: 10px;
  border-left: 3px solid var(--accent);
  background: rgba(168, 85, 247, .06);
  border-radius: 8px;
}

.evidence-annotation strong,
.evidence-annotation span {
  display: block;
}

.evidence-annotation span {
  color: var(--muted);
  font-size: .78rem;
  margin-top: 4px;
}


.global-maintenance-banner {
  position: sticky;
  top: 0;
  z-index: 250;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  background: rgba(245, 158, 11, .16);
  border-bottom: 1px solid rgba(245, 158, 11, .4);
  color: var(--warning);
  backdrop-filter: blur(12px);
}

.global-maintenance-banner span {
  color: var(--text);
}


.release-check {
  border-left: 3px solid var(--border);
}

.release-pass {
  border-left-color: var(--success);
}

.release-pass strong {
  color: var(--success);
}

.release-warn {
  border-left-color: var(--warning);
}

.release-warn strong {
  color: var(--warning);
}

.release-fail {
  border-left-color: var(--danger);
}

.release-fail strong {
  color: var(--danger);
}