:root {
  --bg: #08101e;
  --panel: rgba(16, 27, 47, 0.92);
  --panel-2: #111d31;
  --border: rgba(255, 255, 255, 0.10);
  --text: #f4f7fb;
  --muted: #95a4ba;
  --primary: #6ea8fe;
  --primary-strong: #4085f3;
  --success: #3ddc97;
  --warning: #ffcc66;
  --danger: #ff6b7a;
  --shadow: 0 28px 90px rgba(0, 0, 0, 0.38);
  font-family: Inter, "Segoe UI", Tahoma, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 10%, rgba(64, 133, 243, 0.18), transparent 34rem),
    radial-gradient(circle at 90% 85%, rgba(61, 220, 151, 0.10), transparent 28rem),
    var(--bg);
}

button, input, textarea { font: inherit; }

.page-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px 18px;
}

.card {
  width: min(760px, 100%);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  padding: clamp(22px, 5vw, 42px);
}

.admin-card { width: min(860px, 100%); }

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

.eyebrow {
  margin: 0 0 8px;
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(1.75rem, 5vw, 2.7rem);
  line-height: 1.15;
}

h2 { margin: 0 0 6px; font-size: 1.08rem; }

.subtitle, .control-box p, .footer-note {
  color: var(--muted);
  line-height: 1.75;
}

.subtitle { margin: 10px 0 0; }
.footer-note { margin: 24px 0 0; font-size: 0.86rem; text-align: center; }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 13px;
  background: rgba(255,255,255,0.04);
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 800;
  direction: ltr;
}

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--warning);
  box-shadow: 0 0 16px currentColor;
}

.status-pill[data-state="online"] { color: var(--success); }
.status-pill[data-state="online"] .status-dot { background: var(--success); }
.status-pill[data-state="offline"] { color: var(--danger); }
.status-pill[data-state="offline"] .status-dot { background: var(--danger); }
.status-pill[data-state="loading"] { color: var(--warning); }

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

.field { display: grid; gap: 9px; }
.field > span { color: #c8d3e3; font-size: 0.9rem; font-weight: 700; }

input, textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #0b1526;
  color: var(--text);
  padding: 14px 16px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

input { direction: ltr; text-align: left; }
textarea { resize: vertical; }

input:focus, textarea:focus {
  border-color: rgba(110,168,254,0.75);
  box-shadow: 0 0 0 4px rgba(110,168,254,0.10);
}

.btn, .link-button {
  border: 0;
  border-radius: 13px;
  padding: 13px 18px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  transition: transform .14s ease, opacity .14s ease, background .14s ease;
}

.btn:hover:not(:disabled), .link-button:hover { transform: translateY(-1px); }
.btn:disabled { cursor: not-allowed; opacity: .48; }
.btn-primary { color: #06101f; background: linear-gradient(135deg, #8bbaff, var(--primary)); }
.btn-secondary, .link-button { color: var(--text); background: rgba(255,255,255,0.08); border: 1px solid var(--border); }
.btn-danger { color: #fff; background: rgba(255,107,122,0.18); border: 1px solid rgba(255,107,122,0.24); }
.btn-small { padding: 8px 12px; font-size: 0.82rem; }

.result-panel {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.result-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  color: #c8d3e3;
  font-weight: 700;
}

#activationCode {
  direction: ltr;
  text-align: left;
  font-family: "Cascadia Code", Consolas, monospace;
  min-height: 92px;
}

.notice {
  margin: 0 0 20px;
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 13px 15px;
  line-height: 1.7;
}
.notice-info { background: rgba(110,168,254,0.10); border-color: rgba(110,168,254,0.24); }
.notice-success { background: rgba(61,220,151,0.10); border-color: rgba(61,220,151,0.24); }
.notice-warning { background: rgba(255,204,102,0.10); border-color: rgba(255,204,102,0.24); color: #ffe3a6; }
.notice-error { background: rgba(255,107,122,0.10); border-color: rgba(255,107,122,0.24); color: #ffc0c7; }
.hidden { display: none !important; }

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

.stat-box, .control-box {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
}
.stat-box { display: grid; gap: 8px; }
.stat-label { color: var(--muted); font-size: .83rem; }
#adminStatusValue[data-state="online"] { color: var(--success); }
#adminStatusValue[data-state="offline"] { color: var(--danger); }

.control-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 20px;
}
.control-box p { margin: 0; }

.switch { position: relative; display: inline-block; width: 58px; height: 32px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #37445a;
  border-radius: 999px;
  transition: .2s;
}
.slider::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  right: 4px;
  bottom: 4px;
  background: white;
  border-radius: 50%;
  transition: .2s;
}
.switch input:checked + .slider { background: var(--success); }
.switch input:checked + .slider::before { transform: translateX(-26px); }

.button-row {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 640px) {
  .brand-row { flex-direction: column; }
  .status-pill, .link-button { align-self: stretch; }
  .status-pill { justify-content: center; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .control-box { align-items: flex-start; }
  .button-row > * { flex: 1 1 100%; }
}


/* ===== Cyber / Hacker presentation for public generator only ===== */
.cyber-page {
  --cyber-green: #39ff88;
  --cyber-green-dim: rgba(57, 255, 136, .18);
  --cyber-cyan: #43e8ff;
  --cyber-black: #020607;
  --cyber-panel: rgba(3, 12, 12, .94);
  --cyber-line: rgba(57, 255, 136, .22);
  background:
    radial-gradient(circle at 50% -10%, rgba(57,255,136,.10), transparent 34rem),
    linear-gradient(180deg, #010404 0%, #020808 55%, #000 100%);
  font-family: "Cascadia Code", "JetBrains Mono", Consolas, "Courier New", monospace;
  overflow-x: hidden;
}

.cyber-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background-image:
    linear-gradient(rgba(57,255,136,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57,255,136,.055) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, #000, transparent 90%);
}

.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .065;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 3px,
    #7affaa 4px
  );
  mix-blend-mode: screen;
}

.cyber-shell { padding: 34px 18px; position: relative; z-index: 2; }

.cyber-card {
  width: min(940px, 100%);
  border-radius: 10px;
  border: 1px solid var(--cyber-line);
  background:
    linear-gradient(180deg, rgba(8,24,23,.97), rgba(1,8,8,.98));
  box-shadow:
    0 0 0 1px rgba(67,232,255,.04),
    0 0 42px rgba(57,255,136,.08),
    0 34px 90px rgba(0,0,0,.72);
  padding: 0;
  overflow: hidden;
}

.cyber-card::before {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyber-green), var(--cyber-cyan), transparent);
  box-shadow: 0 0 18px var(--cyber-green);
}

.cyber-topbar {
  direction: ltr;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(57,255,136,.13);
  background: rgba(0,0,0,.42);
  color: #9db6ad;
  font-size: .76rem;
  letter-spacing: .08em;
}

.cyber-brand {
  display: flex;
  gap: 9px;
  align-items: center;
  color: var(--cyber-green);
  font-weight: 800;
}

.prompt-mark {
  color: #00140a;
  background: var(--cyber-green);
  padding: 2px 6px;
  box-shadow: 0 0 14px rgba(57,255,136,.38);
}

.cyber-id { color: #55766a; }

.cyber-metrics {
  direction: ltr;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid rgba(57,255,136,.11);
  background: rgba(5,17,16,.74);
}

.cyber-metrics > span {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px;
  color: #75b998;
  font-size: .72rem;
  letter-spacing: .09em;
  border-right: 1px solid rgba(57,255,136,.09);
}

.cyber-metrics > span:last-child { border-right: 0; }
.cyber-metrics b { color: #405f51; font-weight: 600; }
.metric-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyber-green);
  box-shadow: 0 0 11px var(--cyber-green);
}

.cyber-brand-row {
  margin: 0;
  padding: 34px 34px 24px;
  align-items: center;
}

.cyber-eyebrow {
  color: var(--cyber-green);
  letter-spacing: .19em;
  font-size: .72rem;
}

.cyber-subtitle { color: #708b82; }

.glitch-title {
  position: relative;
  direction: ltr;
  text-align: left;
  color: #e8fff2;
  font-size: clamp(2rem, 6vw, 3.45rem);
  letter-spacing: -.045em;
  text-shadow:
    0 0 22px rgba(57,255,136,.12),
    2px 0 0 rgba(67,232,255,.16);
}

.glitch-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: var(--cyber-cyan);
  opacity: .12;
  transform: translate(2px, 0);
  clip-path: inset(62% 0 22% 0);
  animation: cyberGlitch 5s steps(1) infinite;
  pointer-events: none;
}

@keyframes cyberGlitch {
  0%, 91%, 100% { transform: translate(2px, 0); opacity: .1; }
  92% { transform: translate(-4px, 1px); opacity: .28; }
  94% { transform: translate(5px, -1px); opacity: .2; }
  96% { transform: translate(-1px, 0); opacity: .12; }
}

.cyber-status {
  border-color: rgba(57,255,136,.25);
  background: rgba(57,255,136,.045);
  border-radius: 4px;
  letter-spacing: .08em;
}

.mini-terminal {
  margin: 0 34px 26px;
  direction: ltr;
  border: 1px solid rgba(57,255,136,.16);
  background: rgba(0,5,4,.76);
  box-shadow: inset 0 0 30px rgba(57,255,136,.025);
}

.terminal-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border-bottom: 1px solid rgba(57,255,136,.12);
  background: rgba(255,255,255,.018);
}

.terminal-bar span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #25483a;
}

.terminal-bar span:first-child { background: #ff5e63; }
.terminal-bar span:nth-child(2) { background: #d6b94c; }
.terminal-bar span:nth-child(3) { background: #39d98a; }
.terminal-bar code {
  margin-left: 7px;
  color: #416b59;
  font-size: .7rem;
}

.terminal-lines {
  padding: 11px 14px 13px;
  color: #6c9985;
  font-size: .74rem;
  line-height: 1.45;
}

.terminal-lines p { margin: 3px 0; }
.terminal-lines em {
  color: var(--cyber-green);
  font-style: normal;
}

.cyber-form,
.cyber-result,
.cyber-card > .notice {
  margin-left: 34px;
  margin-right: 34px;
}

.cyber-field > span,
.cyber-result .result-heading {
  direction: ltr;
  text-align: left;
  color: #78a18f;
  font-size: .76rem;
  letter-spacing: .08em;
}

.input-shell {
  position: relative;
  direction: ltr;
}

.input-prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cyber-green);
  font-weight: 800;
  z-index: 1;
}

.cyber-page #firstCode,
.cyber-page #activationCode {
  border-radius: 3px;
  border-color: rgba(57,255,136,.17);
  background: rgba(0,7,6,.9);
  color: #baffd3;
  caret-color: var(--cyber-green);
  box-shadow: inset 0 0 22px rgba(57,255,136,.018);
  font-family: "Cascadia Code", Consolas, monospace;
}

.cyber-page #firstCode {
  padding-left: 34px;
  letter-spacing: .04em;
}

.cyber-page input:focus,
.cyber-page textarea:focus {
  border-color: rgba(57,255,136,.72);
  box-shadow: 0 0 0 2px rgba(57,255,136,.08), 0 0 18px rgba(57,255,136,.08);
}

.cyber-generate {
  direction: ltr;
  border-radius: 3px;
  background: transparent;
  color: var(--cyber-green);
  border: 1px solid rgba(57,255,136,.55);
  letter-spacing: .11em;
  box-shadow: inset 0 0 20px rgba(57,255,136,.035), 0 0 18px rgba(57,255,136,.04);
}

.cyber-generate:hover:not(:disabled) {
  background: var(--cyber-green);
  color: #00160a;
  box-shadow: 0 0 26px rgba(57,255,136,.28);
}

.button-bracket { opacity: .48; }

.cyber-result {
  border-top-color: rgba(57,255,136,.13);
}

.cyber-page #activationCode {
  min-height: 100px;
  color: var(--cyber-cyan);
}

.cyber-copy {
  border-radius: 3px;
  color: var(--cyber-cyan);
  border-color: rgba(67,232,255,.22);
  background: rgba(67,232,255,.035);
}

.cyber-footer {
  direction: ltr;
  display: flex;
  justify-content: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 30px;
  padding: 14px 18px;
  border-top: 1px solid rgba(57,255,136,.1);
  background: rgba(0,0,0,.28);
  color: #355a49;
  font-size: .64rem;
  letter-spacing: .12em;
}

.cyber-page .notice {
  border-radius: 3px;
  font-family: "Cascadia Code", Consolas, monospace;
}

@media (max-width: 700px) {
  .cyber-topbar { align-items: flex-start; flex-direction: column; }
  .cyber-metrics { grid-template-columns: 1fr; }
  .cyber-metrics > span { border-right: 0; border-bottom: 1px solid rgba(57,255,136,.08); }
  .cyber-brand-row { padding: 26px 20px 20px; }
  .mini-terminal,
  .cyber-form,
  .cyber-result,
  .cyber-card > .notice { margin-left: 20px; margin-right: 20px; }
  .glitch-title { font-size: clamp(1.8rem, 10vw, 2.8rem); }
}


/* ===== MJX cyber admin console ===== */
.cyber-admin-page {
  --admin-green: #39ff88;
  --admin-cyan: #43e8ff;
  --admin-red: #ff5964;
  --admin-amber: #e7bf4a;
  --admin-panel: rgba(2, 11, 10, .96);
  --admin-line: rgba(57,255,136,.20);
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 0%, rgba(67,232,255,.07), transparent 30rem),
    radial-gradient(circle at 85% 100%, rgba(57,255,136,.06), transparent 34rem),
    #010504;
  font-family: "Cascadia Code", "JetBrains Mono", Consolas, monospace;
  color: #dfffea;
  overflow-x: hidden;
}

.admin-grid-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(rgba(57,255,136,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57,255,136,.045) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.5) 70%, transparent 100%);
}

.admin-scanlines {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .045;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 3px,
    var(--admin-green) 4px
  );
}

.admin-shell {
  position: relative;
  z-index: 2;
  padding: 34px 18px;
}

.admin-console {
  width: min(980px, 100%);
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--admin-line);
  background:
    linear-gradient(180deg, rgba(6,20,18,.985), rgba(1,7,6,.985));
  box-shadow:
    0 0 0 1px rgba(67,232,255,.035),
    0 0 48px rgba(57,255,136,.07),
    0 36px 100px rgba(0,0,0,.68);
}

.admin-console::before {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--admin-green), var(--admin-cyan), transparent);
  box-shadow: 0 0 18px rgba(57,255,136,.45);
}

.admin-console-topbar {
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(57,255,136,.11);
  background: rgba(0,0,0,.42);
  color: #527266;
  font-size: .72rem;
  letter-spacing: .09em;
}

.admin-console-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--admin-green);
  font-weight: 800;
}

.root-badge {
  padding: 3px 7px;
  color: #00160a;
  background: var(--admin-green);
  box-shadow: 0 0 14px rgba(57,255,136,.28);
}

.admin-build { color: #47645a; }

.admin-system-strip {
  direction: ltr;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid rgba(57,255,136,.10);
  background: rgba(5,17,15,.64);
}

.admin-system-strip span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 10px 8px;
  border-right: 1px solid rgba(57,255,136,.08);
  color: #70aa91;
  font-size: .67rem;
  letter-spacing: .08em;
}

.admin-system-strip span:last-child { border-right: 0; }
.admin-system-strip b { color: #3c5d4e; font-weight: 600; }

.admin-system-strip i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--admin-green);
  box-shadow: 0 0 10px var(--admin-green);
}

.admin-hero {
  direction: ltr;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 34px;
  border-bottom: 1px solid rgba(57,255,136,.09);
}

.admin-kicker {
  margin: 0 0 8px;
  color: var(--admin-green);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .18em;
}

.admin-hero h1 {
  direction: ltr;
  margin: 0;
  color: #ecfff4;
  font-size: clamp(2rem, 6vw, 3.35rem);
  letter-spacing: -.045em;
  text-shadow: 0 0 24px rgba(57,255,136,.10);
}

.admin-description {
  margin: 10px 0 0;
  color: #668277;
  line-height: 1.7;
}

.admin-public-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  color: var(--admin-cyan);
  border: 1px solid rgba(67,232,255,.18);
  background: rgba(67,232,255,.025);
  text-decoration: none;
  font-size: .72rem;
  letter-spacing: .08em;
  transition: .18s ease;
}

.admin-public-link:hover {
  border-color: rgba(67,232,255,.55);
  box-shadow: 0 0 18px rgba(67,232,255,.08);
}

.admin-console > .notice {
  margin: 22px 34px 0;
  border-radius: 3px;
  font-family: "Cascadia Code", Consolas, monospace;
}

.admin-login-zone,
.admin-dashboard {
  padding: 30px 34px 34px;
}

.admin-section-heading {
  direction: ltr;
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 20px;
}

.admin-section-heading > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(57,255,136,.24);
  color: var(--admin-green);
  font-size: .72rem;
}

.admin-section-heading div {
  display: grid;
  gap: 3px;
}

.admin-section-heading small {
  color: #4e6b5e;
  font-size: .62rem;
  letter-spacing: .14em;
}

.admin-section-heading strong {
  color: #b9d9ca;
  font-size: .9rem;
  font-weight: 600;
}

.login-terminal {
  direction: ltr;
  border: 1px solid rgba(57,255,136,.16);
  background: rgba(0,5,4,.72);
  box-shadow: inset 0 0 36px rgba(57,255,136,.02);
}

.login-terminal-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 11px;
  border-bottom: 1px solid rgba(57,255,136,.11);
  background: rgba(255,255,255,.012);
}

.terminal-light {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.terminal-light.red { background: #ff5e63; }
.terminal-light.amber { background: #d6b94c; }
.terminal-light.green { background: #39d98a; }

.login-terminal-head code {
  margin-left: 7px;
  color: #426b5a;
  font-size: .68rem;
}

.admin-login-form {
  padding: 22px;
}

.admin-field > span {
  color: #668d7b;
  font-size: .7rem;
  letter-spacing: .11em;
}

.admin-input-shell {
  position: relative;
  direction: ltr;
}

.admin-prefix {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #355848;
  font-size: .72rem;
  pointer-events: none;
}

.cyber-admin-page .admin-field input {
  border-radius: 3px;
  border-color: rgba(57,255,136,.16);
  background: #000706;
  color: #baffd3;
  padding-left: 66px;
  font-family: "Cascadia Code", Consolas, monospace;
  caret-color: var(--admin-green);
}

.cyber-admin-page .admin-field input:focus {
  border-color: rgba(57,255,136,.65);
  box-shadow: 0 0 0 2px rgba(57,255,136,.06), 0 0 18px rgba(57,255,136,.06);
}

.admin-auth-button {
  border-radius: 3px;
  border: 1px solid rgba(57,255,136,.5);
  background: transparent;
  color: var(--admin-green);
  letter-spacing: .12em;
}

.admin-auth-button:hover:not(:disabled) {
  background: var(--admin-green);
  color: #00140a;
  box-shadow: 0 0 24px rgba(57,255,136,.22);
}

.admin-security-note {
  direction: ltr;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
  padding: 12px 14px;
  border-left: 2px solid rgba(231,191,74,.7);
  background: rgba(231,191,74,.035);
}

.admin-security-note span {
  color: var(--admin-amber);
  font-size: .65rem;
  letter-spacing: .12em;
}

.admin-security-note p {
  margin: 0;
  color: #726e58;
  font-size: .7rem;
  line-height: 1.6;
}

.admin-dashboard-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-stat-box {
  direction: ltr;
  min-height: 116px;
  border-radius: 3px;
  border-color: rgba(57,255,136,.12);
  background: rgba(0,7,6,.72);
}

.admin-stat-box .stat-label {
  color: #46685a;
  font-size: .63rem;
  letter-spacing: .11em;
}

.admin-stat-box strong {
  margin-top: 5px;
  color: #d9ffea;
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.admin-stat-box small {
  margin-top: auto;
  color: #2e4b3e;
  font-size: .58rem;
  letter-spacing: .08em;
}

.static-good { color: var(--admin-green) !important; }

.admin-control-block {
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-top: 12px;
  padding: 17px 18px;
  border: 1px solid rgba(57,255,136,.13);
  background: rgba(0,7,6,.66);
}

.admin-control-copy {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.control-index {
  flex: 0 0 auto;
  padding: 4px 6px;
  color: #4d7a65;
  border: 1px solid rgba(57,255,136,.13);
  font-size: .58rem;
}

.admin-control-copy h2 {
  margin: 0 0 5px;
  color: #bfe5d2;
  font-size: .85rem;
  letter-spacing: .07em;
}

.admin-control-copy p {
  margin: 0;
  color: #587268;
  font-size: .72rem;
  line-height: 1.6;
}

.admin-response-code {
  flex: 0 0 auto;
  color: var(--admin-red);
  background: rgba(255,89,100,.04);
  border: 1px solid rgba(255,89,100,.18);
  padding: 7px 9px;
  font-size: .66rem;
}

.admin-switch .slider {
  border-radius: 3px;
  background: #18251f;
  border: 1px solid rgba(57,255,136,.14);
}

.admin-switch .slider::before {
  border-radius: 2px;
  background: #6b8478;
}

.admin-switch input:checked + .slider {
  background: rgba(57,255,136,.15);
  border-color: rgba(57,255,136,.5);
}

.admin-switch input:checked + .slider::before {
  background: var(--admin-green);
  box-shadow: 0 0 12px rgba(57,255,136,.4);
}

.admin-action-bar {
  direction: ltr;
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}

.admin-action-bar .btn {
  border-radius: 3px;
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: .7rem;
  letter-spacing: .07em;
}

.admin-action-primary {
  color: var(--admin-green);
  background: rgba(57,255,136,.04);
  border: 1px solid rgba(57,255,136,.42);
}

.admin-action-primary:hover:not(:disabled) {
  background: var(--admin-green);
  color: #00140a;
}

.admin-action-secondary {
  color: var(--admin-cyan);
  background: rgba(67,232,255,.03);
  border: 1px solid rgba(67,232,255,.22);
}

.admin-action-danger {
  color: #ff8790;
  background: rgba(255,89,100,.035);
  border: 1px solid rgba(255,89,100,.20);
}

.admin-footer-line {
  direction: ltr;
  display: flex;
  justify-content: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid rgba(57,255,136,.09);
  color: #2f4f41;
  font-size: .58rem;
  letter-spacing: .12em;
}

@media (max-width: 820px) {
  .admin-system-strip { grid-template-columns: repeat(2, 1fr); }
  .admin-dashboard-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-action-bar { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .admin-hero { align-items: flex-start; flex-direction: column; padding: 26px 20px; }
  .admin-login-zone,
  .admin-dashboard { padding: 24px 20px 28px; }
  .admin-console > .notice { margin-left: 20px; margin-right: 20px; }
  .admin-dashboard-grid { grid-template-columns: 1fr; }
  .admin-control-block { align-items: flex-start; flex-direction: column; }
  .admin-system-strip { grid-template-columns: 1fr; }
}


.admin-title-control {
  align-items: center;
}

.admin-title-input {
  width: min(360px, 100%);
  flex: 0 1 360px;
  direction: ltr;
  text-align: left;
  border-radius: 3px;
  border: 1px solid rgba(57,255,136,.22);
  background: #000706;
  color: #baffd3;
  padding: 11px 13px;
  font-family: "Cascadia Code", Consolas, monospace;
  letter-spacing: .03em;
  outline: none;
}

.admin-title-input:focus {
  border-color: rgba(57,255,136,.65);
  box-shadow: 0 0 0 2px rgba(57,255,136,.06), 0 0 18px rgba(57,255,136,.06);
}

@media (max-width: 640px) {
  .admin-title-input { width: 100%; flex-basis: 100%; }
}


/* ===== PWA install controls ===== */
.cyber-top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.install-app-button {
  appearance: none;
  border: 1px solid rgba(57,255,136,.32);
  border-radius: 3px;
  background: rgba(57,255,136,.035);
  color: var(--cyber-green);
  padding: 6px 10px;
  font: inherit;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
  cursor: pointer;
  transition: .18s ease;
}

.install-app-button:hover {
  background: var(--cyber-green);
  color: #00140a;
  box-shadow: 0 0 18px rgba(57,255,136,.22);
}

@media (display-mode: standalone) {
  .install-app-button { display: none !important; }
}

@media (max-width: 640px) {
  .cyber-top-actions {
    width: 100%;
    justify-content: space-between;
  }
}


/* ===== Public user authentication ===== */
.user-login-panel {
  margin: 0 34px 28px;
  padding: 20px;
  border: 1px solid rgba(57,255,136,.16);
  background: rgba(0,7,6,.74);
  box-shadow: inset 0 0 28px rgba(57,255,136,.018);
}

.user-login-heading {
  direction: ltr;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(57,255,136,.10);
}

.user-login-heading span {
  color: var(--cyber-green);
  font-size: .68rem;
  letter-spacing: .13em;
}

.user-login-heading strong {
  color: #92b9a6;
  font-size: .82rem;
  font-weight: 600;
}

.user-login-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  direction: ltr;
}

.user-login-form .cyber-generate {
  grid-column: 1 / -1;
}

.user-session-bar {
  direction: ltr;
  margin: 0 34px 20px;
  padding: 11px 13px;
  border: 1px solid rgba(67,232,255,.15);
  background: rgba(67,232,255,.025);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.user-session-bar > div {
  display: grid;
  gap: 3px;
}

.user-session-label {
  color: #3d6f64;
  font-size: .58rem;
  letter-spacing: .12em;
}

#currentUserName {
  color: var(--cyber-cyan);
  font-size: .78rem;
}

.user-logout-button {
  border: 1px solid rgba(255,89,100,.22);
  background: rgba(255,89,100,.035);
  color: #ff8790;
  padding: 8px 11px;
  font-family: inherit;
  font-size: .7rem;
  cursor: pointer;
}

.user-logout-button:hover {
  background: rgba(255,89,100,.10);
}

@media (max-width: 700px) {
  .user-login-panel,
  .user-session-bar {
    margin-left: 20px;
    margin-right: 20px;
  }

  .user-login-form {
    grid-template-columns: 1fr;
  }

  .user-login-heading,
  .user-session-bar {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* ===== Admin user access control ===== */
.admin-user-management,
.admin-audit-section {
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid rgba(57,255,136,.10);
}

.admin-subsection-heading {
  margin-bottom: 18px;
}

.create-user-form {
  direction: ltr;
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr auto;
  gap: 10px;
  align-items: end;
  padding: 16px;
  border: 1px solid rgba(57,255,136,.13);
  background: rgba(0,7,6,.64);
}

.create-user-form .admin-field {
  min-width: 0;
}

.create-user-form .admin-field > span {
  text-align: left;
}

.create-user-form input {
  border-radius: 3px;
  border-color: rgba(57,255,136,.16);
  background: #000706;
  color: #baffd3;
  font-family: "Cascadia Code", Consolas, monospace;
}

.admin-list-toolbar {
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 14px 0 10px;
}

.admin-list-toolbar > div {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #789b8b;
  font-size: .73rem;
}

.admin-list-toolbar strong {
  color: #b7d8c8;
  font-size: .78rem;
}

#userCountBadge {
  display: inline-grid;
  place-items: center;
  min-width: 25px;
  height: 20px;
  padding: 0 6px;
  border: 1px solid rgba(57,255,136,.20);
  color: var(--admin-green);
  font-size: .65rem;
}

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

.user-access-card {
  direction: ltr;
  border: 1px solid rgba(57,255,136,.13);
  background: rgba(0,7,6,.70);
  padding: 15px;
}

.user-access-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(57,255,136,.08);
}

.user-access-head > div {
  display: grid;
  gap: 4px;
}

.user-access-head strong {
  color: #d9ffea;
  font-size: .88rem;
}

.user-access-head code {
  color: #4f7564;
  font-size: .68rem;
}

.user-state {
  padding: 4px 8px;
  border: 1px solid;
  font-size: .62rem;
  letter-spacing: .06em;
}

.user-state.enabled {
  color: var(--admin-green);
  border-color: rgba(57,255,136,.28);
  background: rgba(57,255,136,.045);
}

.user-state.disabled {
  color: #ff8790;
  border-color: rgba(255,89,100,.28);
  background: rgba(255,89,100,.045);
}

.user-access-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 10px;
  background: rgba(57,255,136,.07);
}

.user-access-stats > div {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 10px;
  background: #010908;
}

.user-access-stats span {
  color: #3d6252;
  font-size: .58rem;
}

.user-access-stats strong {
  color: #8eafa0;
  font-size: .67rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.user-access-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.user-access-actions .btn {
  border-radius: 3px;
  padding: 9px 8px;
  font-family: inherit;
  font-size: .65rem;
}

.user-action-toggle {
  color: var(--admin-green);
  border: 1px solid rgba(57,255,136,.25);
  background: rgba(57,255,136,.035);
}

.user-action-revoke {
  color: var(--admin-cyan);
  border: 1px solid rgba(67,232,255,.22);
  background: rgba(67,232,255,.03);
}

.user-action-reset {
  color: #e7bf4a;
  border: 1px solid rgba(231,191,74,.22);
  background: rgba(231,191,74,.03);
}

.user-action-delete {
  color: #ff8790;
  border: 1px solid rgba(255,89,100,.22);
  background: rgba(255,89,100,.03);
}

.audit-list {
  display: grid;
  gap: 7px;
}

.audit-row {
  direction: ltr;
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(0, 1.8fr);
  gap: 10px 16px;
  align-items: center;
  padding: 11px 13px;
  border: 1px solid rgba(57,255,136,.10);
  background: rgba(0,7,6,.58);
}

.audit-event {
  display: flex;
  align-items: center;
  gap: 8px;
}

.audit-event strong {
  color: #a8c8b9;
  font-size: .7rem;
}

.audit-badge {
  padding: 4px 7px;
  border: 1px solid;
  font-size: .57rem;
  white-space: nowrap;
}

.audit-badge.success {
  color: var(--admin-green);
  border-color: rgba(57,255,136,.22);
}

.audit-badge.danger {
  color: #ff8790;
  border-color: rgba(255,89,100,.22);
}

.audit-badge.neutral {
  color: var(--admin-cyan);
  border-color: rgba(67,232,255,.20);
}

.audit-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  color: #426253;
  font-size: .59rem;
}

.audit-row p {
  grid-column: 1 / -1;
  margin: 0;
  color: #3f5d50;
  font-size: .61rem;
}

.admin-empty-state {
  padding: 18px;
  border: 1px dashed rgba(57,255,136,.14);
  color: #426253;
  text-align: center;
  font-size: .7rem;
}

.admin-empty-state.error {
  color: #ff8790;
  border-color: rgba(255,89,100,.18);
}

@media (max-width: 900px) {
  .create-user-form {
    grid-template-columns: 1fr 1fr;
  }

  .create-user-form button {
    grid-column: 1 / -1;
  }

  .user-access-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .user-access-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .audit-meta {
    justify-content: flex-start;
  }
}

@media (max-width: 600px) {
  .create-user-form,
  .user-access-stats,
  .user-access-actions {
    grid-template-columns: 1fr;
  }

  .create-user-form button {
    grid-column: auto;
  }

  .admin-list-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
}


.user-form-message {
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid rgba(67,232,255,.20);
  background: rgba(67,232,255,.035);
  color: #8edbe6;
  font-size: .7rem;
}

.user-form-message.success {
  border-color: rgba(57,255,136,.28);
  background: rgba(57,255,136,.05);
  color: #86ffb6;
}

.user-form-message.error {
  border-color: rgba(255,89,100,.28);
  background: rgba(255,89,100,.05);
  color: #ff9da4;
}