/* Colours from src/Wazn.App/App.xaml (light and dark), so the browser version looks like the Windows app. */
:root { --shell:#F0F5FA; --surface:#FAFCFF; --panel:#FFFFFF; --inset:#F2F5FA; --line:#E0E6EF; --line-strong:#C9D3E0; --text:#202633; --muted:#6F7B8D;
  --sel:#ECE8FF; --accent:#5B45E0; --ok-soft:#E6F4EA; --ok:#1E6B34; --bad-soft:#FDECEC; --bad:#A12626; --warn-soft:#FFF4CE; --warn-line:#ECDDA5; --warn:#614D18;
  --font:"thmanyah serif text", "Segoe UI", Tahoma, system-ui, sans-serif; --head:"thmanyah serif display", "Segoe UI", Tahoma, sans-serif; --mono:"Cascadia Mono", Consolas, monospace; }
@media (prefers-color-scheme: dark) { :root { --shell:#191B24; --surface:#20232D; --panel:#282C37; --inset:#232632; --line:#3B4050; --line-strong:#4C5265; --text:#F1F3FA; --muted:#A5AEC0;
  --sel:#2E2950; --accent:#A08CFF; --ok-soft:#1F3326; --ok:#9BDBAE; --bad-soft:#3A2224; --bad:#F2A7A7; --warn-soft:#3A3320; --warn-line:#5C5030; --warn:#F3DFA2; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--shell); color:var(--text); font:15px/1.55 var(--font); }
.shell { display:grid; grid-template-columns:200px 1fr; min-height:100vh; }
.rail { background:var(--shell); border-inline-end:1px solid var(--line); padding:14px 10px; display:flex; flex-direction:column; gap:4px; position:sticky; top:0; height:100vh; }
.brand { display:flex; gap:8px; align-items:center; padding:4px 8px 14px; font:700 18px var(--head); }
.logo { background:var(--accent); color:#fff; border-radius:7px; width:26px; height:26px; display:grid; place-items:center; }
.nav { display:flex; gap:10px; align-items:center; background:none; border:0; color:var(--text); font:inherit; padding:8px 10px; border-radius:9px; cursor:pointer; text-align:start; }
.nav i { font-style:normal; width:18px; text-align:center; color:var(--muted); }
.nav:hover { background:var(--surface); } .nav.on { background:var(--sel); font-weight:600; }
.rail-foot { margin-top:auto; display:flex; gap:8px; align-items:center; padding:8px; }
main { background:var(--surface); padding:22px 24px 90px; display:flex; flex-direction:column; gap:16px; min-width:0; }
.top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }
h1 { margin:0; font:700 26px var(--head); } h2 { margin:0 0 10px; font:600 17px var(--head); } p { margin:0; }
.muted { color:var(--muted); } .small { font-size:12.5px; } .ltr { direction:ltr; } .row { display:flex; gap:10px; align-items:center; } .grow { flex:1; }
button { font:inherit; color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:7px 14px; cursor:pointer; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; } button:disabled { opacity:.5; cursor:default; }
button.icon { padding:4px 9px; font-size:12px; }
.pill { border-radius:99px; padding:3px 10px; font-size:12.5px; background:var(--inset); color:var(--muted); } .pill.ok { background:var(--ok-soft); color:var(--ok); }
.banner { border-radius:12px; padding:10px 14px; border:1px solid var(--line); } .banner.warn { background:var(--warn-soft); border-color:var(--warn-line); color:var(--warn); } .banner.info { background:var(--inset); color:var(--muted); }
.card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:10px; min-width:0; }
.tiles { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.tile { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 16px; display:flex; flex-direction:column; } .tile span { color:var(--muted); font-size:12.5px; } .tile b { font-size:19px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .grid3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.pads { display:flex; gap:24px; justify-content:center; } figure { margin:0; text-align:center; } figcaption { color:var(--muted); font-size:13px; }
canvas { display:block; } .pads canvas { border-radius:50%; border:1.5px solid var(--line-strong); }
.inset { background:var(--inset); border:1px solid var(--line); border-radius:12px; padding:10px; } .inset canvas { width:100%; height:auto; }
.seg { display:inline-flex; gap:4px; background:var(--inset); border:1px solid var(--line); border-radius:12px; padding:4px; width:320px; }
.seg button { flex:1; border:0; background:none; color:var(--muted); } .seg button.on { background:var(--panel); color:var(--text); font-weight:600; }
.picker { display:flex; flex-direction:column; align-items:flex-start; text-align:start; }
.presets { border:1px solid var(--line); border-radius:12px; max-height:420px; overflow:auto; background:var(--panel); }
.presets h3 { margin:0; padding:10px 12px 2px; font-size:12.5px; color:var(--accent); }
.preset { display:grid; grid-template-columns:60px 1fr; gap:10px; align-items:center; width:100%; border:0; border-radius:0; text-align:start; background:none; padding:7px 12px; }
.preset:hover { background:var(--inset); } .preset.on { background:var(--sel); } .preset svg { background:var(--inset); border:1px solid var(--line); border-radius:6px; direction:ltr; }
.kv { display:grid; grid-template-columns:auto 1fr; gap:6px 16px; } .kv dt { color:var(--muted); } .kv dd { margin:0; }
.profiles { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .prof { border:1px solid var(--line); border-radius:12px; padding:10px 12px; } .prof.on { border-color:var(--accent); }
table { width:100%; border-collapse:collapse; } td, th { padding:5px 6px; border-bottom:1px solid var(--line); text-align:start; font-size:13.5px; }
.bar { position:fixed; bottom:0; inset-inline:200px 0; background:var(--panel); border-top:1px solid var(--line); padding:10px 24px; display:flex; gap:12px; align-items:center; }
select, input[type=range] { font:inherit; accent-color:var(--accent); } select { background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:9px; padding:6px 10px; }
.slider { display:flex; flex-direction:column; gap:2px; } .slider input { width:100%; }
@media (max-width: 900px) { .shell { grid-template-columns:60px 1fr; } .nav span, .brand b, #ver { display:none; } .bar { inset-inline:60px 0; } .tiles { grid-template-columns:1fr 1fr; } .grid2, .grid3 { grid-template-columns:1fr; } }

.stack { display:flex; flex-direction:column; gap:16px; } .wrap { flex-wrap:wrap; }
details summary { cursor:pointer; color:var(--accent); } .points { display:grid; grid-template-columns:auto 1fr 1fr; gap:6px 10px; align-items:center; margin-top:8px; }
input[type=number] { font:inherit; width:100%; background:var(--inset); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:4px 8px; }
.steps .row { gap:6px; margin:4px 0; } .steps input[type=number] { width:90px; } .editor { border-color:var(--accent); }
.arrows { display:grid; grid-template-columns:repeat(3, 40px); grid-template-rows:repeat(3, 34px); gap:4px; margin:8px 0; }
.arrows .up { grid-area:1/2; } .arrows .left { grid-area:2/1; } .arrows .right { grid-area:2/3; } .arrows .down { grid-area:3/2; }
.trim { display:flex; flex-direction:column; align-items:center; }

.gate { position:fixed; inset:0; background:var(--shell); display:grid; place-items:center; z-index:10; padding:16px; }
.gatecard { width:min(420px, 100%); } .gatecard input { font:inherit; background:var(--inset); color:var(--text); border:1px solid var(--line); border-radius:10px; padding:9px 12px; }
button.link, a.button { background:none; border:0; color:var(--accent); padding:4px 0; text-align:start; } a.button { text-decoration:none; }
.gmsg.bad { color:var(--bad); } .acct { display:flex; flex-direction:column; gap:2px; margin-inline-end:auto; }