/* Vuln-Iso Manager - Style analog WAP Recovery Manager */
:root {
  --bg: #f5f7fa;
  --card: #ffffff;
  --border: #d0d7de;
  --text: #1f2328;
  --muted: #656d76;
  --primary: #0969da;
  --primary-dark: #0550ae;
  --danger: #cf222e;
  --warn: #d79b00;
  --ok: #1a7f37;
  --stage7: #f8cecc; --stage7-b: #b85450;
  --stage6: #ffe6cc; --stage6-b: #d79b00;
  --stage5: #ffe6cc; --stage5-b: #d79b00;
  --stage4: #d5e8d4; --stage4-b: #82b366;
  --stage3: #d5e8d4; --stage3-b: #82b366;
  --stage2: #d5e8d4; --stage2-b: #82b366;
  --stage1: #d5e8d4; --stage1-b: #82b366;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; }
header { background: #1f2328; color: white; padding: 12px 24px; display: flex; align-items: center; gap: 16px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
header h1 { margin: 0; font-size: 18px; font-weight: 600; }
header .spacer { flex: 1; }
header .user { font-size: 13px; opacity: 0.9; }
header a, header button { color: white; background: none; border: 1px solid rgba(255,255,255,0.3); padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; text-decoration: none; }
header a:hover, header button:hover { background: rgba(255,255,255,0.1); }
nav.tabs { background: white; border-bottom: 1px solid var(--border); padding: 0 24px; display: flex; gap: 4px; overflow-x: auto; }
nav.tabs button { background: none; border: none; padding: 14px 18px; cursor: pointer; font-size: 14px; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
nav.tabs button.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
nav.tabs button:hover:not(.active) { color: var(--text); background: #f6f8fa; }
main { padding: 24px; max-width: 1400px; margin: 0 auto; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 20px; margin-bottom: 16px; }
.card h2 { margin: 0 0 16px 0; font-size: 18px; }
.card h3 { margin: 16px 0 8px 0; font-size: 15px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row > * { flex: none; }
.grow { flex: 1 1 auto !important; }
label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; font-weight: 500; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; font-family: inherit; background: white;
}
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: -1px; border-color: var(--primary); }
.btn { background: var(--primary); color: white; border: none; padding: 8px 16px; border-radius: 6px; font-size: 14px; cursor: pointer; font-weight: 500; }
.btn:hover { background: var(--primary-dark); }
.btn.secondary { background: white; color: var(--text); border: 1px solid var(--border); }
.btn.secondary:hover { background: #f6f8fa; }
.btn.danger { background: var(--danger); }
.btn.danger:hover { background: #a40e26; }
.btn.small { padding: 4px 10px; font-size: 12px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { background: #f6f8fa; font-weight: 600; }
tr:hover td { background: #f9fafb; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.stage-7 { background: var(--stage7); color: var(--stage7-b); }
.stage-6 { background: var(--stage6); color: var(--stage6-b); }
.stage-5 { background: var(--stage5); color: var(--stage5-b); }
.stage-4 { background: var(--stage4); color: var(--stage4-b); }
.stage-3 { background: var(--stage3); color: var(--stage3-b); }
.stage-2 { background: var(--stage2); color: var(--stage2-b); }
.stage-1 { background: var(--stage1); color: var(--stage1-b); }
.severity-critical { background: #ffe2e0; color: #b1170a; }
.severity-high { background: #ffe2c0; color: #b35900; }
.severity-medium { background: #fff3bf; color: #856404; }
.severity-low { background: #d1f0d7; color: #176a23; }
.muted { color: var(--muted); font-size: 12px; }
.tag { display: inline-block; background: #eaeef2; color: var(--text); padding: 2px 6px; border-radius: 4px; font-size: 11px; margin-right: 4px; }
.alert { padding: 12px 16px; border-radius: 6px; margin: 12px 0; }
.alert.info { background: #ddf4ff; border: 1px solid #54aeff; color: #0550ae; }
.alert.warn { background: #fff8c5; border: 1px solid #d4a72c; color: #633c01; }
.alert.danger { background: #ffebe9; border: 1px solid #ff8182; color: #82071e; }
.alert.ok { background: #dafbe1; border: 1px solid #1f883d; color: #1a7f37; }
.wizard-question { background: #fff8c5; border: 1px solid #d4a72c; padding: 16px; border-radius: 8px; margin-bottom: 12px; }
.wizard-question .q { font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.wizard-question .h { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.wizard-option { display: block; background: white; border: 1px solid var(--border); padding: 10px 14px; border-radius: 6px; margin: 6px 0; cursor: pointer; width: 100%; text-align: left; font-size: 14px; }
.wizard-option:hover { background: #f6f8fa; border-color: var(--primary); }
.wizard-result { background: white; border: 2px solid var(--primary); padding: 20px; border-radius: 8px; }
.history-step { display: flex; gap: 8px; padding: 4px 0; font-size: 12px; color: var(--muted); }
.history-step .arrow { color: var(--primary); }
.kbd { background: #f6f8fa; border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; font-family: ui-monospace, monospace; font-size: 12px; }
.toggle { display: inline-flex; gap: 4px; }
.toggle button { background: white; border: 1px solid var(--border); padding: 6px 12px; cursor: pointer; }
.toggle button.active { background: var(--primary); color: white; border-color: var(--primary); }
.toggle button:first-child { border-radius: 6px 0 0 6px; }
.toggle button:last-child { border-radius: 0 6px 6px 0; }
hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.hidden { display: none !important; }
.center { text-align: center; }

/* Wizard Two-Column Layout */
.wiz-grid { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(420px, 1.4fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .wiz-grid { grid-template-columns: 1fr; } }
.wiz-tree-card { position: sticky; top: 12px; }
.wiz-tree-card svg { width: 100%; height: auto; display: block; background: #fafbfc; border-radius: 6px; }
.tree-node rect { transition: fill 0.15s, stroke 0.15s, stroke-width 0.15s; cursor: pointer; }
.tree-node text { pointer-events: none; font-family: -apple-system, "Segoe UI", sans-serif; font-size: 11px; }
.tree-node.t-question rect { fill: #fff8c5; stroke: #d4a72c; }
.tree-node.t-action rect { fill: #e1d5e7; stroke: #9673a6; }
.tree-node.t-outcome rect { fill: #ddf4ff; stroke: #54aeff; }
.tree-node.t-result.q-Q1 rect { fill: #f8cecc; stroke: #b85450; }
.tree-node.t-result.q-Q2 rect { fill: #ffe6cc; stroke: #d79b00; }
.tree-node.t-result.q-Q3 rect { fill: #d5e8d4; stroke: #82b366; }
.tree-node.t-result.q-Q4 rect { fill: #dafbe1; stroke: #1f883d; }
.tree-node.visited rect { stroke-width: 3px; }
.tree-node.current rect { stroke: #0969da; stroke-width: 4px; fill: #0969da; }
.tree-node.current text { fill: white; font-weight: 700; }
.tree-edge { stroke: #d0d7de; stroke-width: 1.5px; fill: none; }
.tree-edge.visited { stroke: #0969da; stroke-width: 3px; }
.tree-edge-label { font-size: 10px; fill: #656d76; font-family: ui-monospace, monospace; }
.tree-edge-label.visited { fill: #0969da; font-weight: 700; }
.tree-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; margin-top: 8px; }
.tree-legend span { display: inline-flex; align-items: center; gap: 4px; }
.tree-legend i { width: 12px; height: 12px; display: inline-block; border-radius: 2px; border: 1px solid; }

@media print {
  header, nav.tabs, .no-print { display: none !important; }
  body { background: white; }
  .card { border: none; box-shadow: none; padding: 0; page-break-inside: avoid; }
}