/* AFM Designer – dark engineering UI + light print report */
:root {
  --bg: #0f1115; --panel: #171a20; --panel2: #1b1f26; --line: #262b33; --line2: #2c323b;
  --text: #dfe4ea; --dim: #9aa4af; --dim2: #6f7a86; --accent: #4f9dff; --accent2: #2563c7;
  --ok: #5bd38a; --warn: #ffb020; --err: #ff4f78; --gold: #ffd98a;
  --A: #ff5c5c; --B: #2fd16a; --C: #4f9dff; --D: #f0b23c; --E: #c07bff; --F: #2fd0d0;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font: 13px/1.35 system-ui, "Segoe UI", Roboto, sans-serif; overflow: hidden; }
#app { display: grid; grid-template-rows: auto auto 1fr auto; height: 100vh; }
.boot { padding: 40px; color: var(--dim); }
a { color: var(--accent); }
button { font: inherit; }

/* ---------- top bar ---------- */
.topbar { display: flex; align-items: center; gap: 14px; padding: 6px 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo { color: var(--accent); display: flex; }
.bt { font-weight: 700; font-size: 14px; letter-spacing: .02em; }
.bs { color: var(--dim); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.dname { margin-left: auto; background: #0f1216; border: 1px solid var(--line2); color: #fff; padding: 5px 8px; border-radius: 4px; width: 180px; }
.acts { display: flex; align-items: center; gap: 6px; }
.tbtn { background: #212630; border: 1px solid #323a45; color: #dce3ea; padding: 5px 10px; border-radius: 4px; cursor: pointer; }
.tbtn:hover { background: #29303b; }
.tbtn:disabled { opacity: .4; cursor: default; }
.tbtn.accent { background: var(--accent2); border-color: #3a7be0; color: #fff; }
.lang { display: flex; margin-left: 6px; border: 1px solid #323a45; border-radius: 4px; overflow: hidden; }
.lbtn { background: #1b2028; color: var(--dim); border: 0; padding: 5px 9px; cursor: pointer; }
.lbtn.on { background: #24456f; color: #fff; }

/* ---------- tabs ---------- */
.tabs { display: flex; overflow-x: auto; background: #13161b; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.tab { background: none; border: 0; border-bottom: 2px solid transparent; color: #aeb6c0; padding: 9px 14px; cursor: pointer; white-space: nowrap; display: flex; gap: 7px; align-items: center; }
.tab:hover { color: #fff; background: #181c22; }
.tab.on { color: #fff; border-bottom-color: var(--accent); background: #181c22; }
.tn { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #262c35; font-size: 10.5px; color: #c6ced8; }
.tab.on .tn { background: var(--accent2); color: #fff; }

/* ---------- workspace ---------- */
.work { display: flex; min-height: 0; }
.left { flex: none; overflow-y: auto; background: var(--panel); border-right: 1px solid var(--line); padding: 8px 12px 40px; scrollbar-width: thin; }
.splitter { flex: none; width: 5px; cursor: col-resize; background: #1a1e24; }
.splitter:hover { background: #2a3442; }
.right { flex: 1; min-width: 0; min-height: 0; position: relative; display: flex; flex-direction: column; }
.right > * { flex: 1; min-height: 0; }
.view { position: relative; width: 100%; height: 100%; min-height: 0; background: #14171c; overflow: hidden; }
.view.gl canvas { display: block; }
.rgrid { display: grid; height: 100%; min-height: 0; gap: 1px; background: var(--line); }
.rgrid > * { min-height: 0; min-width: 0; }
.rgrid.rows-60-40 { grid-template-rows: 60% 40%; }
.rgrid.rows-62-38 { grid-template-rows: 63% 37%; }
.rgrid.cols-65-35 { grid-template-columns: 65% 35%; }
.pane { background: var(--bg); min-height: 0; }
.pane.scroll { overflow: auto; padding: 10px 14px; }
.pane.col { display: flex; flex-direction: column; padding: 8px 12px; gap: 6px; min-height: 0; height: 100%; }
.pane.light { background: #dde1e6; }
.vwrap { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.vwrap > .view { flex: 1; }
.viewtool { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 4px 10px; background: #161a1f; border-bottom: 1px solid var(--line); font-size: 12px; flex: none; }
.tchk { display: flex; gap: 4px; align-items: center; color: #c3cad3; cursor: pointer; }
.tnote { color: var(--dim2); margin-left: auto; font-size: 11px; }
.subtabs { display: flex; gap: 2px; padding: 4px 8px; background: #161a1f; border-bottom: 1px solid var(--line); flex: none; }
.subtab { background: none; border: 1px solid transparent; color: #aeb6c0; padding: 4px 10px; border-radius: 4px; cursor: pointer; }
.subtab.on { background: #24456f; color: #fff; border-color: #3a6aa8; }
.overlay-note { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background: rgba(20,23,28,.9); border: 1px solid #3a4250; padding: 6px 10px; border-radius: 4px; color: var(--gold); font-size: 12px; pointer-events: none; max-width: 80%; text-align: center; }
.empty { padding: 30px; color: var(--dim); }

/* ---------- forms ---------- */
.form { display: flex; flex-direction: column; }
.fsec { display: flex; align-items: center; gap: 6px; margin: 14px 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--line); color: #e6ebf1; font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; cursor: pointer; user-select: none; }
.fsec:first-child { margin-top: 4px; }
.fsec .caret { color: var(--dim2); transition: transform .15s; }
.fsec.closed .caret { transform: rotate(-90deg); }
.frow { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(130px, 1.15fr); gap: 3px 8px; align-items: center; padding: 3px 0; }
.frow.chk { display: flex; gap: 8px; align-items: center; cursor: pointer; color: #c9d0d8; }
.frow.btnrow { display: block; }
.frow.disabled { opacity: .5; pointer-events: none; }
.flabel { color: #b9c1cb; font-size: 12.5px; display: flex; align-items: center; gap: 4px; min-width: 0; }
.fctl { display: flex; align-items: center; gap: 6px; min-width: 0; }
.help { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #263241; color: #9cc5ff; font-size: 10px; cursor: help; flex: none; }
input.num, input.txt, textarea.txt, select.sel { width: 100%; min-width: 0; background: #0f1216; border: 1px solid var(--line2); color: #fff; padding: 4px 6px; border-radius: 4px; font: inherit; }
input.num { font-family: var(--mono); text-align: right; font-size: 12.5px; }
input.num.sm { width: 74px; }
input.num:focus, input.txt:focus, select.sel:focus, textarea.txt:focus { outline: none; border-color: var(--accent); }
.unit { color: #8b95a1; min-width: 26px; font-size: 11.5px; }
.frow.invalid input.num { border-color: var(--err); background: #2a1219; }
.ferr { grid-column: 1 / -1; color: #ff7d98; font-size: 11px; min-height: 0; }
.ferr:empty { display: none; }
.ferr.block { display: block; margin: 4px 0; }
.seg { display: flex; flex-wrap: wrap; gap: 4px; }
.seg.col { flex-direction: column; align-items: stretch; }
.segbtn { background: #1f242c; border: 1px solid var(--line2); color: #c9d1da; padding: 5px 8px; border-radius: 4px; cursor: pointer; text-align: left; font-size: 12px; }
.segbtn:hover { background: #262c36; }
.segbtn.on { background: #24456f; border-color: var(--accent); color: #fff; }
.segbtn:disabled { opacity: .35; cursor: default; }
.frow.derived .dval { font-family: var(--mono); color: var(--gold); font-size: 12px; overflow-wrap: anywhere; }
.lock { color: #5d6875; font-size: 11px; }
.fnote { color: #8c96a3; font-size: 11.5px; line-height: 1.45; margin: 3px 0; }
.fnote.ok { color: #7fd99a; }
.fnote.scope { border-left: 2px solid #3a4250; padding-left: 8px; }
.fnote.errbox, .errbox { background: #2a1219; border: 1px solid #5c1f30; color: #ff9fb3; padding: 6px 8px; border-radius: 4px; }
.fnote.errbox:empty { display: none; }
.warnbox { background: #2e2410; border: 1px solid #6a5216; color: #ffd58a; padding: 6px 8px; border-radius: 4px; font-size: 12px; margin: 6px 0; }
.btn { background: #232933; border: 1px solid #353d48; color: #e3e8ee; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12.5px; }
.btn:hover { background: #2b323d; }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primary { background: var(--accent2); border-color: #3a7be0; color: #fff; }
.btn.primary:hover { background: #2d6fda; }
.btn.ghost { background: transparent; }
.btn.danger { color: #ff8a9e; border-color: #5c2a36; }
.btn.xs { padding: 2px 7px; font-size: 11px; }
.btn.on { background: #24456f; border-color: var(--accent); }
.btnbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.range { width: 100%; accent-color: var(--accent); }
.rval { font-family: var(--mono); color: var(--gold); min-width: 54px; text-align: right; font-size: 12px; }
.layers { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.ptitle { font-weight: 600; color: #dfe6ee; margin: 12px 0 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; }
.srcbox { background: #1a1e25; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; margin: 6px 0; word-break: break-all; }
.srcbox .ptitle { margin-top: 0; }
.srcbox details { margin-top: 4px; color: var(--dim); }
.filters { display: flex; flex-direction: column; gap: 4px; }
.editor { border-top: 1px solid var(--line); padding-top: 4px; }

/* ---------- selection / results ---------- */
.selbox { border: 1px solid #2a3039; border-radius: 6px; padding: 8px; margin: 6px 0; background: #191d23; }
.selhead { font-weight: 600; color: #fff; margin-bottom: 4px; font-size: 12.5px; }
.results .bar { background: linear-gradient(90deg, #2459a8 var(--w), #222831 var(--w)); padding: 1px 5px; border-radius: 3px; color: #fff; min-width: 44px; display: inline-block; }
.cellstack div { white-space: nowrap; }
.cands { display: flex; flex-direction: column; gap: 5px; max-height: 460px; overflow-y: auto; padding-right: 2px; }
.cand { display: grid; grid-template-columns: 30px 1fr auto; gap: 6px; align-items: start; background: #191d23; border: 1px solid #2a3039; border-radius: 6px; padding: 6px 7px; cursor: pointer; }
.cand:hover { border-color: #3a4656; }
.cand.sel { border-color: var(--accent); background: #1b2a3f; }
.cand.cur { box-shadow: inset 3px 0 var(--ok); }
.crank { color: var(--dim); font-family: var(--mono); font-size: 12px; padding-top: 1px; }
.cbody { min-width: 0; font-size: 12px; }
.cpart b { color: #fff; font-weight: 600; }
.cid { color: var(--dim2); font-size: 11px; }
.clay, .cnums { color: #aab3bd; font-size: 11.5px; }
.cscore { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.cscore .bar { font-size: 11px; }
.cfit { color: var(--dim); font-size: 11px; }
.cacts { display: flex; flex-direction: column; gap: 4px; }
.acts { display: flex; gap: 4px; }
.pattern table { width: 100%; }

/* ---------- tables ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.tbl th { position: sticky; top: 0; background: #1b1f26; text-align: left; padding: 5px 6px; color: #aab3bd; font-weight: 600; white-space: nowrap; z-index: 1; }
.tbl th.asc::after { content: ' ▲'; color: var(--accent); }
.tbl th.desc::after { content: ' ▼'; color: var(--accent); }
.tbl td { padding: 4px 6px; border-bottom: 1px solid #222831; vertical-align: top; }
.tbl.compact td, .tbl.compact th { padding: 3px 5px; }
.tblwrap.fill .tbl td { white-space: nowrap; }
.tbl.clickable tbody tr { cursor: pointer; }
.tbl tbody tr:hover td { background: #1a1f27; }
.tbl tr.sel td { background: #1d3352 !important; }
.tbl tr.cur td:first-child { box-shadow: inset 3px 0 var(--ok); }
.tbl tr.dim td { opacity: .45; }
.tbl tr.chg td { color: var(--gold); }
.tbl .num, .tbl td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
.tbl .mono { font-family: var(--mono); }
.tblwrap { overflow: auto; max-height: 340px; border: 1px solid var(--line); border-radius: 4px; }
.tblwrap.tall { max-height: 420px; }
.tblwrap.fill { max-height: none; flex: 1; min-height: 0; }
.ph { font-weight: 700; }
.ph0 { color: var(--A); } .ph1 { color: var(--B); } .ph2 { color: var(--C); } .ph3 { color: var(--D); } .ph4 { color: var(--E); } .ph5 { color: var(--F); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.card { background: #1a1e25; border: 1px solid #262c35; border-radius: 6px; padding: 8px 10px; }
.ck { color: #8f99a5; font-size: 11px; }
.cv { font-size: 15px; color: #fff; font-family: var(--mono); margin-top: 2px; }

/* ---------- status / drawer / toast ---------- */
.status { display: flex; gap: 16px; align-items: center; padding: 4px 12px; background: var(--panel); border-top: 1px solid var(--line); font-size: 12px; min-height: 28px; }
.sbadge { border: 0; border-radius: 3px; padding: 2px 9px; cursor: pointer; font-weight: 600; }
.sbadge.err { background: #3b1220; color: #ff8aa5; }
.sbadge.warn { background: #3a2b0d; color: #ffcf6a; }
.sbadge.ok { background: #10301d; color: #7fe0a0; }
.sinfo { color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sms { margin-left: auto; color: var(--dim2); font-family: var(--mono); font-size: 11px; }
.sbad { color: var(--err); }
.drawer { position: fixed; right: 0; top: 86px; bottom: 28px; width: 460px; max-width: 92vw; background: var(--panel); border-left: 1px solid var(--line); transform: translateX(102%); transition: transform .18s; overflow: auto; z-index: 50; box-shadow: -8px 0 24px rgba(0,0,0,.35); }
.drawer.open { transform: none; }
.dhead { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); }
.dgroup { padding: 8px 12px 3px; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.ditem { display: flex; gap: 8px; padding: 5px 12px; font-size: 12px; cursor: pointer; border-bottom: 1px solid #20252d; }
.ditem:hover { background: #1d222a; }
.dic { flex: none; width: 14px; }
.ditem.error .dic { color: var(--err); } .ditem.warn .dic { color: var(--warn); } .ditem.info .dic { color: #6fb6ff; } .ditem.ok .dic { color: var(--ok); }
.ditem.ok { color: #9fb1a5; }
.toast { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); background: var(--accent2); color: #fff; padding: 8px 14px; border-radius: 6px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 60; }
.toast.show { opacity: 1; }
.toast.bad { background: #b3123f; }

/* ---------- svg ---------- */
.afm-svg { display: block; cursor: grab; user-select: none; touch-action: none; }
.afm-svg.panning { cursor: grabbing; }
.afm-svg * { vector-effect: non-scaling-stroke; }
.afm-svg text { font-family: system-ui, "Segoe UI", sans-serif; pointer-events: none; }
.afm-svg .halo { paint-order: stroke; stroke: #14171c; stroke-width: 3px; stroke-linejoin: round; }
.afm-svg .halo-light { paint-order: stroke; stroke: rgba(255,255,255,.9); stroke-width: 2.6px; stroke-linejoin: round; }
.afm-svg .dimtext { paint-order: stroke; stroke: rgba(20,23,28,.85); stroke-width: 3px; stroke-linejoin: round; }
.afm-svg .maglabel { paint-order: stroke; stroke: rgba(0,0,0,.55); stroke-width: 2px; }
.afm-svg.light .halo, .afm-svg.light .dimtext { stroke: rgba(255,255,255,.92); }
.strip-canvas { display: block; }

/* ---------- report ---------- */
.report-preview { padding: 18px 0; }
.report { background: #fff; color: #111; max-width: 920px; margin: 0 auto; padding: 26px 34px; font-size: 12px; box-shadow: 0 2px 16px rgba(0,0,0,.25); }
.report h1 { font-size: 20px; margin: 0 0 4px; }
.report h2 { font-size: 14px; border-bottom: 2px solid #1f6fd6; padding-bottom: 3px; margin: 20px 0 8px; color: #0d2a52; }
.report h3 { font-size: 12.5px; margin: 10px 0 4px; color: #333; }
.rmeta { color: #555; font-size: 11.5px; }
.rscope { color: #555; font-size: 11px; border-left: 3px solid #1f6fd6; padding-left: 8px; }
.rnotes { white-space: pre-wrap; }
.report .kv { width: 100%; border-collapse: collapse; }
.report .kv th { text-align: left; width: 46%; color: #444; font-weight: 500; padding: 3px 6px; border-bottom: 1px solid #eef0f2; vertical-align: top; }
.report .kv td { padding: 3px 6px; border-bottom: 1px solid #eef0f2; font-variant-numeric: tabular-nums; }
.report .tbl th { background: #f0f2f5; color: #333; position: static; }
.report .tbl td { border-bottom: 1px solid #e5e7ea; color: #111; }
.report .tbl tbody tr:hover td { background: none; }
.report .small { font-size: 11px; color: #333; }
.report .mono { font-family: var(--mono); word-break: break-word; }
.report .bad { color: #b00020; }
.report .total { font-weight: 700; text-align: right; font-size: 13px; margin-top: 6px; }
.report .checks li { margin: 2px 0; }
.report .checks li.error { color: #b00020; }
.report .checks li.warn { color: #8a5a00; }
.report .checks li.info { color: #334; }
.report a { color: #1f6fd6; text-decoration: none; }
.figs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fig { margin: 0 0 10px; border: 1px solid #d9dde2; border-radius: 4px; overflow: hidden; break-inside: avoid; }
.fighost { height: 320px; }
.fighost svg { cursor: default; }
.fig figcaption { font-size: 11px; text-align: center; padding: 4px; color: #555; background: #f6f7f9; border-top: 1px solid #e5e7ea; }
#printRoot { display: none; }

@page { size: A4; margin: 12mm; }
@media print {
  html, body { height: auto; overflow: visible; background: #fff; }
  #app { display: none !important; }
  #printRoot { display: block; }
  .report { box-shadow: none; max-width: none; padding: 0; margin: 0; font-size: 10.5px; }
  .rsec { break-inside: auto; }
  .report h2 { break-after: avoid; }
  .fig { break-inside: avoid; }
  .fighost { height: 82mm; }
  .report .tbl th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .afm-svg { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (max-width: 900px) {
  body { overflow: auto; }
  #app { height: auto; }
  .work { flex-direction: column; }
  .left { width: 100% !important; max-height: none; }
  .splitter { display: none; }
  .right { height: 80vh; }
  .bs { display: none; }
}