:root{
  --bg:#070b12;
  --panel:#0e1624;
  --panel2:#101b2c;
  --line:#223047;
  --text:#e8f0ff;
  --muted:#8ea0b8;
  --blue:#00bfff;
  --green:#5fffb2;
  --yellow:#ffd166;
  --orange:#ff9f43;
  --red:#ff5d6c;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Arial,Helvetica,sans-serif;
  background:radial-gradient(circle at top right,rgba(0,191,255,.16),transparent 32%),var(--bg);
  color:var(--text);
}

.topbar{
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:flex-end;
  padding:28px 32px;
  border-bottom:1px solid var(--line);
  background:rgba(7,11,18,.78);
  backdrop-filter:blur(12px);
  position:sticky;
  top:0;
  z-index:5;
}

.eyebrow{
  color:var(--blue);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:12px;
  font-weight:700;
}

h1,h2,h3,p{margin-top:0}
h1{font-size:34px;margin-bottom:6px;letter-spacing:-.04em}
h2{font-size:28px;margin-bottom:8px;letter-spacing:-.03em}
h3{font-size:18px;margin-bottom:6px}
p{color:var(--muted);line-height:1.5}

.statusbar,.heroactions,.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pill,.tag{
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 10px;
  color:#c7d6ee;
  background:rgba(255,255,255,.035);
  font-size:12px;
}

.shell{display:grid;grid-template-columns:250px 1fr;min-height:calc(100vh - 120px)}
.sidebar{border-right:1px solid var(--line);padding:24px 18px;position:sticky;top:104px;height:calc(100vh - 104px)}
.navtitle{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.14em;margin:0 0 12px 8px}
.navitem{display:block;color:#b9c7da;text-decoration:none;padding:11px 12px;border-radius:12px;margin-bottom:4px;border:1px solid transparent}
.navitem:hover,.navitem.active{background:rgba(0,191,255,.08);border-color:rgba(0,191,255,.25);color:white}
.navmeta{margin-top:28px;padding:14px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.03)}
.navmeta span,.muted{display:block;color:var(--muted);font-size:13px;margin-top:4px}

.content{padding:24px;max-width:1440px;width:100%}
.card{background:linear-gradient(180deg,rgba(16,27,44,.96),rgba(10,17,29,.96));border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 18px 60px rgba(0,0,0,.24)}
.hero{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.metric span{color:var(--muted);font-size:13px}.metric strong{display:block;font-size:34px;margin-top:8px}
.sectionhead{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:14px}.sectionhead p{margin-bottom:0;font-size:14px}

button{border:0;border-radius:12px;padding:10px 14px;background:var(--blue);color:#02101a;font-weight:800;cursor:pointer}
button:hover{filter:brightness(1.08)}
button.ghost{background:transparent;color:#dbe8ff;border:1px solid var(--line)}
.actionsgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.test.low{background:var(--green)}.test.medium{background:var(--yellow)}.test.high{background:var(--orange)}.test.critical{background:var(--red);color:white}

.out{margin-top:14px}.lbl{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px}
pre{white-space:pre-wrap;word-break:break-word;margin:0;background:#060a10;border:1px solid var(--line);border-radius:14px;padding:14px;color:#dce8f8;min-height:84px}

.riskgrid,.policygrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.policygrid{grid-template-columns:repeat(5,1fr)}
.riskgrid div,.policygrid div{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:14px;padding:14px}.riskgrid span,.policygrid span{display:block;color:var(--muted);font-size:12px}.riskgrid strong,.policygrid strong{font-size:28px;display:block;margin-top:8px}

.list{display:grid;gap:10px}.listitem{padding:12px;border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:14px}.listitem strong,.listitem span,.listitem small{display:block}.listitem span{color:#cbd8eb;margin-top:4px}.listitem small{color:var(--muted);margin-top:4px}.listitem.alert{border-color:rgba(255,93,108,.45);background:rgba(255,93,108,.07)}.empty{padding:14px;border:1px dashed var(--line);border-radius:14px;color:var(--muted)}

.kv{display:grid;grid-template-columns:180px 1fr;gap:8px}.k{color:var(--muted)}.v{font-weight:800}
.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:14px}table{width:100%;border-collapse:collapse;min-width:900px}th,td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;font-size:13px}th{color:#9db0c9;background:rgba(255,255,255,.035);font-size:12px;text-transform:uppercase;letter-spacing:.08em}tr:last-child td{border-bottom:0}code{color:#aee8ff}
.risk{font-weight:900}.risk.low{color:var(--green)}.risk.medium{color:var(--yellow)}.risk.high{color:var(--orange)}.risk.critical{color:var(--red)}
.mutedcard{margin-bottom:14px}.footer{display:flex;justify-content:space-between;padding:20px 32px;color:var(--muted);border-top:1px solid var(--line)}

@media(max-width:980px){.shell{grid-template-columns:1fr}.sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line)}.grid4,.grid2{grid-template-columns:1fr}.policygrid{grid-template-columns:1fr 1fr}.topbar{display:block}.statusbar{margin-top:14px}.hero{display:block}.heroactions{margin-top:14px}}

.approval-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
}

.approval-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.approval-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.approval-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.mini-btn {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #f8fafc;
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
}

.mini-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

.mini-btn.approve {
  color: var(--green);
  border-color: rgba(95, 255, 178, 0.45);
  background: rgba(95, 255, 178, 0.08);
}

.mini-btn.reject {
  color: var(--red);
  border-color: rgba(255, 93, 108, 0.45);
  background: rgba(255, 93, 108, 0.08);
}

.badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .02em;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .045);
}

.badge.authorized,
.badge.allow {
  color: var(--green);
  border-color: rgba(95, 255, 178, .35);
  background: rgba(95, 255, 178, .08);
}

.badge.pending,
.badge.pending_approval,
.badge.approval_required {
  color: var(--yellow);
  border-color: rgba(255, 209, 102, .35);
  background: rgba(255, 209, 102, .08);
}

.badge.block,
.badge.blocked,
.badge.rejected {
  color: var(--red);
  border-color: rgba(255, 93, 108, .35);
  background: rgba(255, 93, 108, .08);
}

@media(max-width:700px){
  .approval-item {
    grid-template-columns: 1fr;
  }

  .approval-actions {
    width: 100%;
  }

  .mini-btn {
    flex: 1;
  }
}