:root {
  --bg: #0b0f14;
  --card: #101825;
  --text: #e7eef9;
  --muted: #9fb0c8;
  --line: #1b2a41;
  --btn: #2b6cff;
  --btn2: #1b2638;

  --chip: #0c1422;
  --good: #23c483;
  --warn: #ffb020;
  --bad: #ff4d4d;
  --info: #2b6cff;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: radial-gradient(1000px 600px at 20% 0%, #14233a 0%, var(--bg) 60%);
  color: var(--text);
}

.wrap { max-width: 980px; margin: 0 auto; padding: 28px 18px 40px; }

.top h1 { margin: 0 0 6px; font-size: 24px; }
.top p { margin: 0 0 18px; color: var(--muted); }

.card {
  background: rgba(16, 24, 37, 0.9);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  margin: 14px 0;
  box-shadow: 0 6px 28px rgba(0,0,0,.25);
}

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

.field label { display: block; font-size: 13px; margin-bottom: 6px; color: var(--muted); }
.field input, .field select {
  width: 100%;
  padding: 10px 11px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #0c1422;
  color: var(--text);
  outline: none;
}
.field small { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }

.actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
button {
  border: 0;
  background: var(--btn);
  color: white;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
}
button.secondary { background: var(--btn2); border: 1px solid var(--line); }
button:disabled { opacity: .5; cursor: not-allowed; }

.outHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.outHead h2 { margin: 0; font-size: 16px; }
.meta { color: var(--muted); font-size: 12px; }

.badges {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  border: 1px solid var(--line);
  background: var(--chip);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--text);
}
.chipTag { color: var(--muted); }
.chipMeta { color: var(--muted); }
.chipPhase { border-color: #28426a; }
.chipRisk { font-weight: 700; }

.chipRisk-info { border-color: #28426a; }
.chipRisk-low { border-color: rgba(35, 196, 131, .35); }
.chipRisk-medium { border-color: rgba(255, 176, 32, .45); }
.chipRisk-high { border-color: rgba(255, 77, 77, .55); }
.chipRisk-critical { border-color: rgba(255, 77, 77, .9); }

.details {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

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

.kv {
  border: 1px solid var(--line);
  background: #0c1422;
  border-radius: 14px;
  padding: 12px;
}
.kvTitle {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}
.kvList {
  margin: 0;
  padding-left: 16px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}
.kvList li { margin: 4px 0; }

.detailsFoot {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
}

.notes {
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
  display: grid;
  gap: 6px;
}
.noteItem {
  border-left: 3px solid #2b6cff;
  padding-left: 10px;
}

.output { margin-top: 12px; display: grid; gap: 10px; }
.cmd {
  border: 1px solid var(--line);
  background: #0c1422;
  border-radius: 14px;
  padding: 12px;
}
.cmdTop { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.cmdIdx { color: var(--muted); font-size: 12px; }
.copyBtn {
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 12px;
  background: #162744;
  border: 1px solid var(--line);
}
pre {
  margin: 10px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}

.sectionTitle {
  margin-top: 14px;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: .2px;
}

.evidence, .reportHint {
  margin-top: 6px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.hintGrid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hintItem {
  border: 1px solid var(--line);
  background: #0c1422;
  border-radius: 14px;
  padding: 12px;
}
.hintKey {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
}
.hintVal {
  font-size: 13px;
  line-height: 1.35;
}

.foot { margin-top: 12px; color: var(--muted); font-size: 12px; }
.status { opacity: .9; }

@media (max-width: 900px) {
  .detailsGrid { grid-template-columns: 1fr; }
  .hintGrid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .grid { grid-template-columns: 1fr; }
}
.field select {
  appearance: auto;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
}

/* Helps in some browsers where option text looks invisible */
select, option {
  color: var(--text);
  background: #0c1422;
}