:root{
    --bg:#f4f6f9; --surface:#ffffff; --surface-2:#eef1f5; --surface-3:#e7ebf1;
    --ink:#1b2432; --muted:#5c6676; --faint:#8a94a3;
    --line:#dde3ea; --line-strong:#c7d0da;
    --accent:#0e8290; --accent-ink:#0a5f6a; --accent-soft:#dff0f2;
    --danger:#c8452f; --ok:#2f855a; --warn:#b7791f;
    --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --radius:9px;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --bg:#0e1420; --surface:#151d2b; --surface-2:#1b2536; --surface-3:#222f45;
      --ink:#e4eaf2; --muted:#98a4b5; --faint:#6b7789;
      --line:#26324a; --line-strong:#39496a;
      --accent:#2bb6c9; --accent-ink:#7fdce8; --accent-soft:#123039;
      --danger:#f0724f; --ok:#57c98a; --warn:#e0a63f;
      color-scheme: dark;
    }
  }
  :root[data-theme="light"]{
    --bg:#f4f6f9; --surface:#ffffff; --surface-2:#eef1f5; --surface-3:#e7ebf1;
    --ink:#1b2432; --muted:#5c6676; --faint:#8a94a3;
    --line:#dde3ea; --line-strong:#c7d0da;
    --accent:#0e8290; --accent-ink:#0a5f6a; --accent-soft:#dff0f2;
    --danger:#c8452f; --ok:#2f855a; --warn:#b7791f;
    color-scheme: light;
  }
  :root[data-theme="dark"]{
    --bg:#0e1420; --surface:#151d2b; --surface-2:#1b2536; --surface-3:#222f45;
    --ink:#e4eaf2; --muted:#98a4b5; --faint:#6b7789;
    --line:#26324a; --line-strong:#39496a;
    --accent:#2bb6c9; --accent-ink:#7fdce8; --accent-soft:#123039;
    --danger:#f0724f; --ok:#57c98a; --warn:#e0a63f;
    color-scheme: dark;
  }

  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:var(--sans); font-size:15px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .app{ display:flex; flex-direction:column; height:100vh; min-height:0; }

  /* ---- top bar ---- */
  .bar{
    display:flex; align-items:center; gap:16px; flex-wrap:wrap;
    padding:10px 18px; background:var(--surface); border-bottom:1px solid var(--line);
  }
  .brand{ display:flex; align-items:baseline; gap:10px; margin-right:auto; }
  .brand .mark{ font-size:19px; }
  .brand h1{
    font-family:var(--mono); font-size:15px; font-weight:600; letter-spacing:.02em;
    margin:0; color:var(--ink);
  }
  .brand h1 b{ color:var(--accent); font-weight:600; }
  .brand .tag{
    font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--faint); border-left:1px solid var(--line-strong); padding-left:10px;
  }
  .controls{ display:flex; align-items:center; gap:8px; }
  label.sel{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--muted); }
  select, button{ font-family:var(--sans); font-size:13px; color:var(--ink); }
  select{
    background:var(--surface-2); border:1px solid var(--line-strong); border-radius:7px;
    padding:6px 9px; cursor:pointer;
  }
  button{
    background:var(--surface-2); border:1px solid var(--line-strong); border-radius:7px;
    padding:6px 11px; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
    transition:background .12s, border-color .12s;
  }
  button:hover{ background:var(--surface-3); }
  button.primary{ background:var(--accent); border-color:var(--accent); color:#06222a; font-weight:600; }
  button.primary:hover{ filter:brightness(1.06); background:var(--accent); }
  button.icon{ padding:6px 8px; }
  :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

  /* ---- split ---- */
  .split{ display:flex; flex:1; min-height:0; }
  .pane{ display:flex; flex-direction:column; min-width:0; min-height:0; }
  .pane.editor{ flex:0 0 34%; max-width:520px; }
  .pane.view{ flex:1; min-width:0; }

  /* draggable splitter */
  .resizer{
    flex:none; width:8px; cursor:col-resize; background:var(--line);
    position:relative; touch-action:none; transition:background .12s;
  }
  .resizer::before{
    content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:2px; height:28px; border-radius:2px; background:var(--faint); opacity:.55;
  }
  .resizer:hover, .resizer.dragging{ background:var(--accent-soft); }
  .resizer:hover::before, .resizer.dragging::before{ background:var(--accent); opacity:1; }

  .pane-head{
    display:flex; align-items:center; gap:4px; padding:0 10px;
    background:var(--surface); border-bottom:1px solid var(--line); height:40px; flex:none;
  }
  .pane-head .lbl{
    font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--faint); padding:0 8px;
  }

  /* ---- editor ---- */
  .edit-wrap{ position:relative; display:flex; flex:1; min-height:0; background:var(--surface); }
  .gutter{
    flex:none; padding:14px 8px 40px; text-align:right; overflow:hidden;
    font-family:var(--mono); font-size:13.5px; line-height:21px;
    color:var(--faint); background:var(--surface-2); border-right:1px solid var(--line);
    user-select:none;
  }
  .gutter .ln{ padding:0 6px 0 10px; }
  .gutter .ln.err{ color:#fff; background:var(--danger); border-radius:3px; }
  textarea#src{
    flex:1; min-width:0; resize:none; border:0; outline:none; background:transparent; color:var(--ink);
    font-family:var(--mono); font-size:13.5px; line-height:21px;
    padding:14px 16px 40px; tab-size:2; white-space:pre; overflow:auto;
  }
  .status{
    flex:none; display:flex; align-items:flex-start; gap:10px; padding:9px 14px;
    border-top:1px solid var(--line); background:var(--surface); font-size:12.5px; max-height:34%; overflow:auto;
  }
  .status .dot{ width:9px; height:9px; border-radius:50%; margin-top:5px; flex:none; }
  .status.ok .dot{ background:var(--ok); }
  .status.bad .dot{ background:var(--danger); }
  .status .msg{ min-width:0; }
  .status .headline{ font-family:var(--mono); font-size:12px; color:var(--muted); }
  .status .headline .word{ font-weight:600; }
  .status.ok .headline .word{ color:var(--ok); }
  .status.bad .headline .word{ color:var(--danger); }
  .issues{ margin:6px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:3px; }
  .issues li{ display:flex; gap:8px; color:var(--muted); }
  .issues li .l{ font-family:var(--mono); color:var(--danger); flex:none; }
  .issues li.warn .l{ color:var(--warn); }

  /* ---- view tabs ---- */
  .tabs{ display:flex; gap:2px; }
  .tab{
    font-family:var(--mono); font-size:12px; letter-spacing:.04em;
    padding:9px 14px; border:0; background:transparent; color:var(--muted); cursor:pointer;
    border-bottom:2px solid transparent; border-radius:0;
  }
  .tab:hover{ color:var(--ink); background:transparent; }
  .tab.active{ color:var(--accent); border-bottom-color:var(--accent); }
  .view-body{ flex:1; min-height:0; overflow:auto; background:var(--bg); }
  .panel{ display:none; }
  .panel.active{ display:block; }

  /* diagram - fills the pane and scales to fit (grows when you widen the pane) */
  #panel-diagram{ height:100%; }
  #panel-diagram.active{ display:flex; }
  #diagram{ flex:1; min-width:0; min-height:0; padding:18px; }
  #diagram svg{ display:block; width:100%; height:100%; }
  .empty{ padding:48px; color:var(--faint); font-family:var(--mono); font-size:13px; }

  /* stride — fluid width: grows with the view pane as the splitter moves (like the diagram) */
  .stride{ padding:22px 26px; max-width:none; }
  .stride h2{ font-size:17px; margin:0 0 4px; }
  .stride .sub{ color:var(--muted); font-size:13px; margin:0 0 18px; }
  .chips{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 22px; }
  .chip{
    display:flex; flex-direction:column; gap:2px; padding:9px 14px; min-width:96px;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  }
  .chip .n{ font-family:var(--mono); font-size:22px; font-weight:600; font-variant-numeric:tabular-nums; }
  .chip .k{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
  .chip.warn .n{ color:var(--danger); }
  table.grid{ width:100%; border-collapse:collapse; margin:0 0 8px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
  table.grid th, table.grid td{ text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); font-size:13.5px; }
  table.grid th{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); background:var(--surface-2); }
  table.grid tr:last-child td{ border-bottom:0; }
  table.grid td.el{ font-weight:600; }
  table.grid td.ty{ font-family:var(--mono); font-size:12px; color:var(--muted); }
  .sc{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:5px; font-family:var(--mono); font-size:12px; font-weight:600; }
  .sc.on{ background:var(--accent-soft); color:var(--accent-ink); }
  .sc.off{ color:var(--line-strong); }
  .sc.cond{ background:var(--accent-soft); color:var(--accent-ink); position:relative; opacity:.72; }
  .stride h3{ font-size:12px; font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:24px 0 10px; }
  .xflow{ display:flex; flex-direction:column; gap:8px; }
  .xflow .row{ display:flex; align-items:center; gap:12px; padding:10px 14px; background:var(--surface); border:1px solid var(--line); border-radius:8px; }
  .xflow .path{ font-family:var(--mono); font-size:13px; }
  .xflow .path .via{ color:var(--faint); }
  .xflow .zones{ margin-left:auto; font-size:11.5px; color:var(--muted); font-family:var(--mono); }
  .legend-key{ font-family:var(--mono); font-size:12px; font-weight:600; }
  .note{ font-size:12.5px; color:var(--muted); margin:14px 0 0; padding:10px 14px; background:var(--surface-2); border-radius:8px; }
  .note b{ color:var(--ink); }
  .idsub{ color:var(--faint); font-family:var(--mono); font-size:11px; }

  /* ---- analysis: framework picker + toolbar ---- */
  #panel-analysis{ height:100%; }
  #panel-analysis.active{ display:flex; flex-direction:column; }
  #analysis{ flex:1; min-height:0; overflow:auto; }
  .analysis-bar{
    display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap;
    padding:8px 14px; background:var(--surface); border-bottom:1px solid var(--line); flex:none;
  }
  .fw-picker{ display:flex; flex-wrap:wrap; gap:6px; margin-right:auto; }
  .fw-chip{
    font-family:var(--mono); font-size:11.5px; letter-spacing:.02em;
    padding:5px 10px; border-radius:999px; border:1px solid var(--line-strong);
    background:var(--surface-2); color:var(--muted); cursor:pointer;
  }
  .fw-chip:hover{ background:var(--surface-3); color:var(--ink); }
  .fw-chip.on{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink); font-weight:600; }
  .analysis-export{ display:flex; gap:6px; }
  button.mini{ font-size:12px; padding:5px 9px; }

  .fw-section{ padding:22px 26px; max-width:none; border-top:1px solid var(--line); }
  .fw-section:first-of-type{ border-top:0; }
  .fw-section > h2{ font-size:16px; margin:0 0 3px; }
  .fw-section > .sub{ color:var(--muted); font-size:13px; margin:0 0 16px; }
  .stride > .chips{ padding:22px 26px 0; }

  /* ---- DREAD ---- */
  .dread-tools{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 10px; }
  .dread-legend{ font-size:12px; color:var(--faint); margin-right:auto; font-family:var(--mono); }
  table.dread td{ vertical-align:middle; }
  select.dread-sel{
    padding:3px 5px; font-family:var(--mono); font-size:12.5px; border-radius:5px;
    border:1px solid var(--line-strong); background:var(--surface-2); color:var(--ink);
  }
  .risk{
    display:inline-block; min-width:78px; padding:3px 9px; border-radius:6px;
    font-family:var(--mono); font-size:12px; font-weight:600; text-align:center;
  }
  .risk.high{ background:color-mix(in srgb, var(--danger) 18%, transparent); color:var(--danger); }
  .risk.med{ background:color-mix(in srgb, var(--warn) 20%, transparent); color:var(--warn); }
  .risk.low{ background:color-mix(in srgb, var(--ok) 18%, transparent); color:var(--ok); }

  /* ---- attack tree ---- */
  .tree-hint{ font-size:12.5px; color:var(--muted); margin:0 0 14px; }
  ul.atree{ list-style:none; margin:0; padding:0; }
  ul.atree ul.atree{ margin:6px 0 6px 18px; padding-left:16px; border-left:1px dashed var(--line-strong); }
  ul.atree li{ margin:6px 0; }
  .tnode{
    display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap;
    padding:6px 11px; border:1px solid var(--line); border-radius:8px; background:var(--surface); font-size:13px;
  }
  .tnode.goal{ background:var(--accent-soft); border-color:var(--accent); font-weight:600; }
  .tnode.sub{ font-weight:600; }
  .tnode.leaf{ background:var(--surface-2); }
  .gate{ font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.06em; padding:1px 5px; border-radius:4px; background:var(--surface-3); color:var(--muted); }
  .gate.or{ color:var(--accent-ink); }
  .gate.and{ color:var(--warn); }
  .tnote{ font-family:var(--mono); font-size:10.5px; color:var(--faint); }

  /* ---- kill chain ---- */
  .kc{ display:flex; flex-direction:column; gap:8px; }
  .kc-phase{ background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:10px 14px; border-left:3px solid var(--accent); }
  .kc-h{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
  .kc-name{ font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); }
  .kc-d{ font-size:12px; color:var(--faint); }
  .kc-items{ display:flex; flex-wrap:wrap; gap:6px; }
  .kc-item{ font-size:12px; background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:3px 8px; }
  .kc-item em{ color:var(--faint); font-style:normal; font-family:var(--mono); font-size:10.5px; margin-left:5px; }
  .kc-empty{ font-size:12px; color:var(--faint); font-family:var(--mono); }

  /* docs — fluid width: grows with the view pane as the splitter moves (like the diagram) */
  .docs{ padding:26px 30px 60px; max-width:none; }
  .docs h2{ font-size:20px; margin:0 0 6px; text-wrap:balance; }
  .docs .lead{ color:var(--muted); margin:0 0 26px; }
  .docs h3{ font-size:12px; font-family:var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); margin:30px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--line); }
  .docs p{ margin:0 0 12px; }
  .docs ul{ margin:0 0 12px; padding-left:20px; }
  .docs li{ margin:4px 0; }
  .docs code{ font-family:var(--mono); font-size:12.5px; background:var(--surface-2); padding:1px 5px; border-radius:4px; }
  .docs pre{ font-family:var(--mono); font-size:12.5px; line-height:1.55; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:14px 16px; overflow-x:auto; margin:0 0 14px; }
  .docs pre code{ background:none; padding:0; }
  .docs table{ width:100%; border-collapse:collapse; margin:0 0 14px; font-size:13px; }
  .docs th,.docs td{ text-align:left; padding:7px 10px; border-bottom:1px solid var(--line); }
  .docs th{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
  .docs .wrong{ color:var(--danger); }
  .docs .attribution{ margin-top:30px; font-size:12px; color:var(--faint); border-top:1px solid var(--line); padding-top:14px; }

  /* stack the panes on narrow screens; splitter becomes a horizontal bar */
  @media (max-width: 860px){
    .split{ flex-direction:column; }
    .pane.editor{ flex:0 0 45%; max-width:none; }
    .resizer{ width:auto; height:10px; cursor:row-resize; }
    .resizer::before{ width:28px; height:2px; }
  }
  /* phones */
  @media (max-width: 560px){
    body{ font-size:14px; }
    .bar{ gap:8px 12px; padding:8px 12px; }
    .brand .tag{ display:none; }
    label.sel{ font-size:11px; }
    select{ max-width:44vw; }
    .stride{ padding:16px 14px; }
    .docs{ padding:18px 16px 48px; }
    #diagram{ padding:12px; }
    .pane.editor{ flex:0 0 50%; }
    textarea#src, .gutter{ font-size:12.5px; line-height:19px; }
  }
  /* keep wide content (STRIDE tables, docs) scrollable rather than overflowing the page */
  #analysis, #panel-docs{ overflow-x:auto; }
  @media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }