:root {
  color-scheme: light;
  --ink: #17201b;
  --muted: #667169;
  --line: #d8ded7;
  --surface: #f7f8f5;
  --panel: #ffffff;
  --field: #e8f0eb;
  --steel: #34495e;
  --clay: #a4563f;
  --moss: #3f6f5e;
  --gold: #b8842b;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}

button,
input,
select {
  font: inherit;
}

.app-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  padding: 32px clamp(16px, 4vw, 48px) 24px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(23, 32, 27, 0.82), rgba(23, 32, 27, 0.28)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='420' viewBox='0 0 1200 420'%3E%3Crect width='1200' height='420' fill='%23d8ded7'/%3E%3Cpath d='M0 300h1200v120H0z' fill='%23849287'/%3E%3Cpath d='M90 265h250v35H90zM390 235h300v65H390zM745 205h330v95H745z' fill='%235d6c65'/%3E%3Cpath d='M118 115h48v150h-48zM210 145h54v120h-54zM420 105h58v130h-58zM525 82h62v153h-62zM790 74h72v131h-72zM930 118h80v87h-80z' fill='%23f7f8f5'/%3E%3Cpath d='M85 103h260v18H85zM386 70h220v18H386zM764 55h290v18H764z' fill='%23b8842b'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  color: white;
}

.eyebrow {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

h1 {
  max-width: 820px;
  margin: 0;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: 0;
}

.view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.tab-button {
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 8px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.14);
  color: white;
  cursor: pointer;
}

.tab-button.is-active {
  background: white;
  color: var(--ink);
}

main {
  padding: 24px clamp(16px, 4vw, 48px) 48px;
}

.metrics-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.metrics-band div {
  min-height: 90px;
  padding: 18px;
  background: var(--panel);
}

.metrics-band span {
  display: block;
  font-size: 28px;
  font-weight: 800;
}

.metrics-band p {
  margin: 6px 0 0;
  color: var(--muted);
}

.toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 180px 180px;
  gap: 12px;
  align-items: end;
  margin: 18px 0;
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

input,
select {
  min-height: 42px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: white;
  color: var(--ink);
}

.view-root {
  min-height: 420px;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin: 24px 0 12px;
}

.section-heading h2 {
  margin: 0;
  font-size: 22px;
}

.section-heading p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
}

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

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

.item-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: var(--panel);
}

.item-card h3 {
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.3;
}

.item-card p {
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.5;
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 0 10px;
  background: var(--field);
  color: var(--steel);
  font-size: 12px;
  font-weight: 700;
}

.badge.verified {
  background: #e5f2dc;
  color: var(--moss);
}

.badge.pending {
  background: #fff1d7;
  color: var(--gold);
}

.badge.alert {
  background: #f8e4de;
  color: var(--clay);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  gap: 14px;
}

.empty-state {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 28px;
  background: white;
  color: var(--muted);
}

@media (max-width: 920px) {
  .app-header,
  .toolbar,
  .split {
    grid-template-columns: 1fr;
  }

  .view-tabs {
    justify-content: flex-start;
  }

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

@media (max-width: 560px) {
  h1 {
    font-size: 24px;
  }

  .metrics-band,
  .grid {
    grid-template-columns: 1fr;
  }
}

.admin-shell {
  min-height: 100vh;
  background: #eef1ed;
}

.admin-layout {
  min-height: 100vh;
  padding: clamp(18px, 4vw, 44px);
}

.admin-login {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 28px;
  align-items: stretch;
  max-width: 1080px;
  margin: 0 auto;
}

.admin-brand,
.login-form,
.admin-topbar,
.admin-console > .metrics-band,
.admin-queues > section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.admin-brand {
  min-height: 520px;
  display: grid;
  align-content: end;
  gap: 24px;
  padding: clamp(24px, 5vw, 48px);
  background:
    linear-gradient(135deg, rgba(23, 32, 27, 0.9), rgba(63, 111, 94, 0.78)),
    linear-gradient(90deg, transparent 31px, rgba(255,255,255,0.08) 32px),
    linear-gradient(0deg, transparent 31px, rgba(255,255,255,0.08) 32px),
    #17201b;
  background-size: auto, 32px 32px, 32px 32px, auto;
  color: white;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  font-weight: 900;
  font-size: 28px;
}

.admin-brand h1,
.admin-topbar h1 {
  max-width: 660px;
}

.login-form {
  align-self: center;
  display: grid;
  gap: 16px;
  padding: 24px;
}

.primary-action,
.ghost-action {
  min-height: 44px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  padding: 0 16px;
  font-weight: 800;
  cursor: pointer;
}

.primary-action {
  background: var(--ink);
  color: white;
}

.ghost-action {
  background: white;
  color: var(--ink);
}

.form-message {
  min-height: 22px;
  margin: 0;
  color: var(--clay);
  font-weight: 700;
}

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

.admin-console {
  display: grid;
  gap: 18px;
}

.admin-topbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 22px;
}

.admin-metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.admin-queues {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

.admin-queues > section {
  padding: 18px;
}

.section-heading.compact {
  margin-top: 0;
}

.admin-card {
  border-left: 4px solid var(--gold);
}

@media (max-width: 860px) {
  .admin-login,
  .admin-queues,
  .admin-metrics {
    grid-template-columns: 1fr;
  }

  .admin-brand {
    min-height: 360px;
  }

  .admin-topbar {
    align-items: stretch;
    flex-direction: column;
  }
}
.password-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 18px;
}

.password-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 12px;
  align-items: end;
}

.password-form .form-message {
  grid-column: 1 / -1;
}

@media (max-width: 920px) {
  .password-form {
    grid-template-columns: 1fr;
  }
}
.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.admin-actions span {
  color: var(--muted);
  font-weight: 700;
}
.status-form {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}

.compact-action {
  min-height: 42px;
}

.status-message {
  grid-column: 1 / -1;
  min-height: 18px;
  color: var(--moss);
  font-size: 12px;
  font-weight: 800;
}

.admin-review-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

@media (max-width: 860px) {
  .admin-review-grid {
    grid-template-columns: 1fr;
  }
}
.admin-v2 { --admin-bg:#f3f5f2; --admin-ink:#111712; --admin-soft:#6d756f; --admin-line:#d6ddd5; --admin-card:#fff; --admin-accent:#c4ff4d; background:var(--admin-bg); }
.admin-v2 .admin-layout { padding:0; }
.admin-login-v2 { min-height:100vh; max-width:none; grid-template-columns:minmax(0,1fr) 420px; gap:0; background:var(--admin-bg); }
.admin-brand-v2 { min-height:100vh; border:0; border-radius:0; padding:clamp(32px,7vw,88px); align-content:center; background:linear-gradient(90deg,rgba(17,23,18,.94),rgba(17,23,18,.72)),linear-gradient(90deg,rgba(196,255,77,.16) 1px,transparent 1px),linear-gradient(0deg,rgba(196,255,77,.11) 1px,transparent 1px),#111712; background-size:auto,38px 38px,38px 38px,auto; }
.admin-brand-v2 h1 { max-width:760px; font-size:clamp(36px,5vw,72px); line-height:1.02; }
.login-form-v2 { min-height:100vh; align-self:stretch; align-content:center; border:0; border-left:1px solid var(--admin-line); border-radius:0; padding:clamp(24px,4vw,44px); background:#fff; }
.form-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.admin-console-v2 { min-height:100vh; display:grid; grid-template-columns:320px minmax(0,1fr); gap:0; background:var(--admin-bg); }
.admin-sidebar { position:sticky; top:0; height:100vh; display:grid; grid-template-rows:auto auto auto 1fr; gap:16px; border-right:1px solid var(--admin-line); padding:22px; background:#111712; color:#fff; }
.sidebar-brand,.admin-user-card { display:flex; gap:12px; align-items:center; }
.sidebar-brand strong { display:block; font-size:16px; }
.sidebar-brand span:not(.brand-mark),.admin-user-card span { color:rgba(255,255,255,.68); font-size:12px; font-weight:700; }
.brand-mark.small { width:38px; height:38px; font-size:20px; background:var(--admin-accent); }
.admin-user-card { justify-content:space-between; border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); padding:14px 0; }
.admin-user-card .ghost-action { min-height:36px; padding:0 12px; border-color:rgba(255,255,255,.28); background:transparent; color:#fff; }
.sidebar-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.metric-tile { min-height:74px; border:1px solid rgba(255,255,255,.13); border-radius:8px; padding:12px; background:rgba(255,255,255,.06); }
.metric-tile span { display:block; color:var(--admin-accent); font-size:24px; font-weight:900; }
.metric-tile p { margin:4px 0 0; color:rgba(255,255,255,.68); font-size:12px; font-weight:800; }
.password-panel-v2 { align-self:end; border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.05); color:#fff; }
.password-panel-v2 .section-heading h2,.password-panel-v2 label { color:#fff; }
.password-form-v2 { grid-template-columns:1fr; }
.password-form-v2 input { border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:#fff; }
.password-form-v2 .primary-action { background:var(--admin-accent); border-color:var(--admin-accent); color:#111712; }
.admin-workbench { min-width:0; padding:22px; }
.admin-topbar-v2 { border:0; border-radius:0; padding:10px 0 22px; background:transparent; }
.admin-topbar-v2 h1 { font-size:clamp(28px,4vw,48px); line-height:1.05; }
.admin-section-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.admin-panel { min-width:0; border:1px solid var(--admin-line); border-radius:8px; background:#fff; overflow:hidden; }
.priority-panel { border-top:4px solid var(--admin-accent); }
.panel-head { display:flex; justify-content:space-between; gap:12px; align-items:baseline; padding:14px 16px; border-bottom:1px solid var(--admin-line); }
.panel-head h2 { margin:0; font-size:17px; }
.panel-head span { color:var(--admin-soft); font-size:11px; font-weight:900; text-transform:uppercase; }
.admin-list { gap:0; }
.admin-row-card { display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:12px; align-items:center; padding:14px 16px; border-bottom:1px solid var(--admin-line); background:#fff; }
.admin-row-card:last-child { border-bottom:0; }
.row-main { min-width:0; }
.row-kind { display:inline-block; margin-bottom:6px; color:var(--admin-soft); font-size:11px; font-weight:900; }
.admin-row-card h3 { margin:0; font-size:15px; line-height:1.35; }
.admin-row-card p { margin:5px 0 0; color:var(--admin-soft); font-size:12px; line-height:1.45; }
.row-control { display:grid; gap:8px; justify-items:stretch; }
.admin-v2 .badge { justify-content:center; min-height:24px; border-radius:6px; background:#edf2eb; }
.admin-v2 .status-form { grid-template-columns:1fr auto; margin-top:0; }
.admin-v2 .status-form select { min-height:36px; border-radius:6px; }
.admin-v2 .compact-action { min-height:36px; border-radius:6px; }
.admin-v2 .status-message { min-height:16px; font-size:11px; }
.admin-v2 .empty-state { border:0; border-radius:0; padding:18px 16px; background:#fff; }
@media (max-width:1120px) { .admin-console-v2 { grid-template-columns:1fr; } .admin-sidebar { position:static; height:auto; grid-template-columns:1fr; } .password-panel-v2 { align-self:auto; } }
@media (max-width:840px) { .admin-login-v2,.admin-section-grid,.admin-row-card { grid-template-columns:1fr; } .admin-brand-v2,.login-form-v2 { min-height:auto; } .admin-brand-v2 { padding:32px 20px; } .login-form-v2 { border-left:0; } .form-actions { grid-template-columns:1fr; } }
/* Admin v2 stabilization */
.admin-v2 .admin-console-v2 {
  align-items: start;
}

.admin-v2 .admin-workbench,
.admin-v2 .admin-sidebar,
.admin-v2 .admin-panel,
.admin-v2 .admin-row-card,
.admin-v2 .metric-tile,
.admin-v2 .password-panel-v2 {
  box-sizing: border-box;
}

.admin-v2 .admin-section-grid {
  align-items: start;
}

.admin-v2 .admin-panel {
  min-height: 180px;
}

.admin-v2 .admin-list {
  display: grid;
}

@media (max-width: 1120px) {
  .admin-v2 .admin-sidebar {
    display: grid;
    grid-template-columns: minmax(220px, .9fr) minmax(260px, 1.1fr);
    align-items: start;
  }

  .admin-v2 .sidebar-metrics {
    grid-column: 1 / -1;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .admin-v2 .password-panel-v2 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .admin-v2 .admin-sidebar,
  .admin-v2 .admin-section-grid,
  .admin-v2 .admin-row-card,
  .admin-v2 .sidebar-metrics {
    grid-template-columns: 1fr;
  }

  .admin-v2 .admin-panel {
    border-radius: 8px;
  }

  .admin-v2 .admin-workbench {
    padding: 14px;
  }
}