:root {
  --bg: #eef1f5; --panel: #ffffff; --ink: #1d2430; --mute: #5d6878; --line: #dde2ea;
  --accent: #2f6fdf; --reused: #7b5cd6; --new: #12a37f; --bad: #d6402e; --ok: #16975f;
  --power: #e8590c; --lock: #d6336c; --door: #1c7ed6; --radio: #0ca678;
  font: 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; border: 1px solid var(--line); background: #f7f9fc; border-radius: 6px; padding: 5px 8px; }
button:hover { background: #eaf0fa; }
button[aria-pressed="true"], button[aria-checked="true"], button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a { color: var(--accent); }
h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); margin: 0 0 6px; font-weight: 650; }
h3 { margin: 0 0 4px; font-size: 15px; }
em { color: var(--mute); font-style: normal; }

.top { height: 48px; display: flex; align-items: center; gap: 18px; padding: 0 14px; background: var(--panel); border-bottom: 1px solid var(--line); }
.brand b { font-size: 15px; margin-right: 8px; }
.brand span { color: var(--mute); }
.modes { display: flex; gap: 4px; margin-left: auto; }
.modes button { padding: 6px 14px; border-radius: 16px; }
.meta { color: var(--mute); font-size: 12px; min-width: 240px; text-align: right; }

main { display: grid; grid-template-columns: 250px 1fr 370px; height: calc(100vh - 48px); }
.left, .right { background: var(--panel); overflow-y: auto; }
.left { border-right: 1px solid var(--line); padding: 10px 12px; }
.right { border-left: 1px solid var(--line); padding: 12px 14px; }
.left section { padding: 8px 0 10px; border-bottom: 1px solid var(--line); }
.left section:last-child { border-bottom: 0; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.note { color: var(--mute); font-size: 11.5px; margin: 6px 0 0; }
.row { display: flex; align-items: center; gap: 8px; }
.row input[type=range] { flex: 1; accent-color: var(--accent); }
output { width: 44px; flex: none; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.wide { width: 100%; margin-top: 6px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.grid4 button { padding: 5px 2px; font-size: 12px; }
.grid4.small { margin-top: 4px; }
.chk { display: flex; align-items: center; gap: 7px; padding: 3px 0; cursor: pointer; }
.chk input { margin: 0; accent-color: var(--accent); }
.sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
.sw.reused { background: repeating-linear-gradient(45deg, var(--reused) 0 3px, #d8cff6 3px 6px); }
.sw.new { background: var(--new); }
.budget .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.kpis div { background: #f4f7fb; border-radius: 6px; padding: 5px 3px; text-align: center; }
.kpis b { display: block; font-size: 13px; white-space: nowrap; }
.kpis span { color: var(--mute); font-size: 11px; }

.stage { position: relative; overflow: hidden; background: linear-gradient(#f6f8fb, #e4e9f0); }
#c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
#c:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
#labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lbl { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: 11.5px; padding: 2px 7px; border-radius: 10px; background: rgba(255,255,255,.94);
  border: 1px solid #cfd6e0; color: var(--ink); box-shadow: 0 1px 3px rgba(20,30,50,.12); will-change: transform; }
.lbl::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 1px; height: 7px; background: #7d8796; }
.lbl.reused { border-color: var(--reused); }
.lbl.reused i, .tag.reused { background: var(--reused); }
.lbl i { font-style: normal; font-size: 9px; font-weight: 700; color: #fff; border-radius: 6px; padding: 0 4px; margin-left: 5px; letter-spacing: .04em; }
.lbl.new i { background: var(--new); }
.lbl.step { background: #1d2430; color: #fff; border-color: #1d2430; }
.lbl.path { color: #fff; border: 0; font-weight: 600; }
.lbl.unk { border-style: dashed; color: var(--mute); }
#tip { position: absolute; pointer-events: none; background: #1d2430; color: #fff; padding: 5px 8px; border-radius: 6px; font-size: 12px; max-width: 280px; z-index: 5; }
#tip small { color: #b9c3d3; display: block; }
#toast { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); background: #1d2430; color: #fff; border-radius: 8px; padding: 8px 14px; font-size: 13px;
  opacity: 0; transition: opacity .25s; pointer-events: none; max-width: 80%; text-align: center; }
#toast.on { opacity: .95; }
.hud { position: absolute; left: 10px; bottom: 8px; color: var(--mute); font-size: 11px; background: rgba(255,255,255,.75); padding: 3px 7px; border-radius: 6px; }
.estimate { position: absolute; right: 10px; bottom: 8px; color: #7a5a00; font-size: 11px; background: #fff6d6; border: 1px solid #f0dc95; padding: 3px 7px; border-radius: 6px; }

/* right panel */
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.panel-h h3 { font-size: 16px; }
.close { padding: 2px 8px; }
.badge { display: inline-block; font-size: 11px; font-weight: 650; border-radius: 10px; padding: 1px 8px; margin: 0 4px 4px 0; }
.badge.ok { background: #dcf5e9; color: var(--ok); }
.badge.bad { background: #fde5e1; color: var(--bad); }
.badge.reused { background: #ece6fb; color: var(--reused); }
.badge.new { background: #dcf5ee; color: #0b7a5f; }
.badge.grp { background: #eef1f5; color: var(--mute); }
.kv { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 12.5px; }
.kv th { text-align: left; color: var(--mute); font-weight: 500; padding: 3px 8px 3px 0; vertical-align: top; width: 38%; }
.kv td { padding: 3px 0; vertical-align: top; word-break: break-word; }
.kv tr + tr th, .kv tr + tr td { border-top: 1px solid #f0f2f6; }
.role { margin: 4px 0 8px; }
.why { margin: 0 0 8px; color: #384354; background: #f6f8fb; border-left: 3px solid var(--accent); padding: 6px 8px; border-radius: 0 6px 6px 0; }
.risks { margin: 4px 0 8px; padding-left: 18px; color: #6b2c22; }
.risks li { margin-bottom: 3px; }
.price { display: flex; gap: 6px; margin: 6px 0 8px; }
.price div { flex: 1; background: #f4f7fb; border-radius: 6px; padding: 6px 8px; }
.price b { display: block; font-size: 15px; }
.price span { color: var(--mute); font-size: 11px; }
.links { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
.search { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; margin-bottom: 8px; }
.plist { list-style: none; margin: 0; padding: 0; }
.plist h4 { margin: 10px 0 3px; font-size: 11px; color: var(--mute); text-transform: uppercase; letter-spacing: .05em; }
.plist button { display: flex; width: 100%; text-align: left; border: 0; background: none; padding: 4px 6px; border-radius: 5px; gap: 6px; align-items: baseline; }
.plist button:hover, .plist button:focus-visible { background: #eef3fb; }
.plist .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plist .q { color: var(--mute); font-variant-numeric: tabular-nums; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; align-self: center; }
.dot.ok { background: var(--ok); } .dot.bad { background: var(--bad); } .dot.reused { background: var(--reused); }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li button { display: grid; grid-template-columns: 24px 1fr; gap: 8px; width: 100%; text-align: left; border: 0; background: none; padding: 6px; border-radius: 6px; }
.steps li button:hover { background: #eef3fb; }
.steps li button[aria-current="step"] { background: #e6efff; }
.steps .n { width: 22px; height: 22px; border-radius: 50%; background: #dfe5ee; display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.steps button[aria-current="step"] .n { background: var(--accent); color: #fff; }
.steps .t { font-weight: 600; }
.steps .tool { display: block; color: var(--mute); font-size: 12px; font-weight: 400; }
.stepcard { background: #f6f8fb; border-radius: 8px; padding: 10px; margin: 8px 0 10px; }
.stepcard .tool { margin: 6px 0 0; font-size: 12.5px; }
.stepcard .tool b { color: var(--mute); font-weight: 600; }
.nav2 { display: flex; gap: 6px; margin: 6px 0; }
.nav2 button { flex: 1; }
.progress { height: 6px; background: #e2e7ef; border-radius: 3px; overflow: hidden; margin-top: 8px; }
.progress div { height: 100%; background: var(--accent); width: 0; }
.flowlist { list-style: none; margin: 6px 0; padding: 0; }
.flowlist li { display: grid; grid-template-columns: 22px 1fr; gap: 6px; padding: 4px 4px; border-radius: 6px; color: var(--mute); }
.flowlist li b { color: var(--ink); font-weight: 600; }
.flowlist li.on { background: #fff1e6; color: #6b3a10; }
.flowlist li.done b { color: #6b7588; }
.flowlist .n { font-variant-numeric: tabular-nums; color: #9aa3b2; text-align: right; }
.total { background: #f4f7fb; border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.total b { font-size: 26px; display: block; }
.total span { color: var(--mute); }
.bars { list-style: none; padding: 0; margin: 4px 0 12px; }
.bars li button { display: block; width: 100%; border: 0; background: none; text-align: left; padding: 4px 4px; border-radius: 5px; }
.bars li button:hover, .bars li button:focus-visible { background: #eef3fb; }
.bars .lbl2 { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.bars .lbl2 span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars .lbl2 span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; flex: none; }
.bars .bar { height: 6px; border-radius: 3px; background: #e5e9f0; margin-top: 2px; }
.bars .bar div { height: 100%; border-radius: 3px; background: var(--accent); }
details { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; margin-bottom: 6px; }
details summary { cursor: pointer; display: flex; justify-content: space-between; gap: 10px; font-weight: 600; }
details summary span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
details ul { margin: 6px 0 2px; padding-left: 16px; }
details li { margin-bottom: 3px; font-size: 12.5px; }
details li small { color: var(--mute); display: block; }
.legend-path { display: inline-block; width: 18px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.caption { font-size: 12px; color: var(--mute); margin: 2px 0 6px 20px; }