/* Silicon Dreams — workshop theme. Dark, warm lamplight, amber accents. */
:root {
  --bg: #14110f; --bg2: #1c1815; --panel: #221d19; --panel2: #2a2420; --line: #3b332c; --line2: #4d4238;
  --text: #ece4da; --muted: #a99c8e; --dim: #6e6357;
  --accent: #f5b841; --accent2: #f59e0b; --accent-ink: #1a1307;
  --blue: #38bdf8; --good: #4ade80; --bad: #f87171; --warn: #fbbf24; --info: #93c5fd;
  --zone-ok: #4ade80; --zone-bad: #f87171;
  --radius: 10px; --shadow: 0 6px 24px #0008;
  --font: "Atkinson Hyperlegible", system-ui, sans-serif; --head: "Chakra Petch", "Atkinson Hyperlegible", sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace;
}
body.colorblind { --good: #60a5fa; --bad: #fb923c; --zone-ok: #60a5fa; --zone-bad: #fb923c; }
body.high-contrast { --bg: #000; --bg2: #0a0a0a; --panel: #111; --panel2: #1a1a1a; --line: #777; --line2: #aaa; --text: #fff; --muted: #ddd; --dim: #bbb; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; background: radial-gradient(ellipse at 50% -10%, #3a2c1d 0%, transparent 55%), var(--bg); color: var(--text); font-family: var(--font); font-size: 1rem; line-height: 1.45; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 600; letter-spacing: .02em; margin: 0 0 .5em; line-height: 1.2; }
h1 { font-size: 1.8rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; color: var(--accent); } h4 { font-size: .85rem; text-transform: uppercase; color: var(--muted); letter-spacing: .08em; }
p { margin: .3em 0 .6em; }
kbd { font-family: var(--mono); background: var(--panel2); border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 4px; padding: 0 .35em; font-size: .85em; }
.muted { color: var(--muted); } .small { font-size: .85rem; } .good { color: var(--good); } .bad-text { color: var(--bad); } .warn-text { color: var(--warn); } .neg { color: var(--bad); } .pos { color: var(--good); }
.loading { position: fixed; inset: 0; display: grid; place-items: center; font-family: var(--head); color: var(--muted); margin: 0; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* buttons */
.btn { appearance: none; border: 1px solid var(--line2); background: linear-gradient(#352d27, #2a2420); color: var(--text); padding: .45em .9em; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: .92rem; transition: background .15s, transform .08s, border-color .15s; white-space: nowrap; }
.btn:hover:not(:disabled) { border-color: var(--accent); background: linear-gradient(#3e342c, #2f2823); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: linear-gradient(#f8c65a, #e9a52a); color: var(--accent-ink); border-color: #c98a17; }
.btn.primary:hover:not(:disabled) { background: linear-gradient(#ffd677, #f2b23c); }
.btn.danger { background: linear-gradient(#7f1d1d, #5c1414); border-color: #b91c1c; }
.btn.small { padding: .25em .6em; font-size: .82rem; }
.btn.big { padding: .75em 1.4em; font-size: 1.05rem; min-width: 14em; }
.icon-btn { appearance: none; background: none; border: 1px solid transparent; color: var(--muted); font-size: 1.3rem; border-radius: 8px; cursor: pointer; padding: .2em .45em; }
.icon-btn:hover { color: var(--text); border-color: var(--line2); }
.row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.row-end { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1rem; }

/* top bar */
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 1rem; padding: .45rem 1rem; background: linear-gradient(#1f1a16f2, #171310f2); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: .5rem; background: none; border: 0; cursor: pointer; padding: .2rem; }
.logo-chip { width: 26px; height: 26px; border-radius: 6px; background: var(--accent); box-shadow: inset 0 0 0 5px #2a1d08, 0 0 14px #f5b84155; }
.logo-text { font-family: var(--head); font-weight: 700; font-size: 1.05rem; color: var(--text); white-space: nowrap; max-width: 12em; overflow: hidden; text-overflow: ellipsis; }
.mainnav { display: flex; gap: .2rem; flex-wrap: wrap; }
.navbtn { appearance: none; background: none; border: 1px solid transparent; border-radius: 8px; padding: .4rem .7rem; cursor: pointer; display: flex; gap: .35rem; align-items: center; color: var(--muted); font-weight: 700; position: relative; }
.navbtn:hover { color: var(--text); background: #ffffff08; }
.navbtn.active { color: var(--accent); border-color: var(--line2); background: #f5b84112; }
.navicon { font-size: 1rem; }
.badge { background: var(--bad); color: #fff; border-radius: 999px; font-size: .7rem; padding: 0 .4em; line-height: 1.4; }
.stats { display: flex; gap: .9rem; margin-left: auto; align-items: center; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; line-height: 1.1; min-width: 4.5rem; }
.stat-k { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.stat-v { font-family: var(--head); font-weight: 700; font-size: 1.05rem; }
.stat.money.neg .stat-v { color: var(--bad); }
.stat.rep .stat-v { color: var(--accent); }
.timebar, .xpbar { display: block; height: 4px; background: #ffffff14; border-radius: 4px; margin-top: 3px; overflow: hidden; width: 5rem; }
.timebar span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--accent), #f97316); }
.xpbar span { display: block; height: 100%; background: var(--good); }
.top-actions { display: flex; gap: .4rem; align-items: center; }
.end-day { background: linear-gradient(#3a3046, #2b2335); border-color: #6d5a8a; }

.screen { padding: 1rem; max-width: 1640px; margin: 0 auto; outline: none; }
.panel { background: linear-gradient(var(--panel), #1e1a16); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; box-shadow: 0 2px 10px #0004; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.panel-head h2, .panel-head h1 { margin: 0; }
.tabs { display: flex; gap: .25rem; flex-wrap: wrap; }
.tab { appearance: none; background: var(--panel); border: 1px solid var(--line); border-radius: 8px 8px 0 0; padding: .45rem .9rem; cursor: pointer; color: var(--muted); font-weight: 700; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.tab small { font-weight: 400; font-size: .75rem; color: var(--dim); max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab .count { font-size: .75rem; background: #ffffff14; border-radius: 999px; padding: 0 .45em; margin-left: .3em; }
.tabs .tab { flex-direction: row; align-items: center; }
.tab.on { color: var(--accent); border-color: var(--line2); background: var(--panel2); border-bottom-color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.chip { appearance: none; border: 1px solid var(--line2); background: transparent; border-radius: 999px; padding: .2rem .7rem; cursor: pointer; color: var(--muted); font-size: .85rem; }
.chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 8px; overflow: hidden; }
.seg button { appearance: none; background: transparent; border: 0; padding: .4rem .9rem; cursor: pointer; color: var(--muted); font-weight: 700; }
.seg button.on { background: var(--accent); color: var(--accent-ink); }
.tag { display: inline-block; background: #ffffff12; border: 1px solid var(--line2); border-radius: 6px; padding: 0 .4em; font-size: .8rem; margin: 0 .2em; }
.empty { text-align: center; padding: 2rem 1rem; color: var(--muted); }

/* status icons */
.sicon { display: inline-grid; place-items: center; width: 1.2em; height: 1.2em; border-radius: 50%; font-size: .75em; font-weight: 700; flex: none; }
.sicon.good, .sicon.ok { background: color-mix(in srgb, var(--good) 25%, transparent); color: var(--good); }
.sicon.bad, .sicon.error { background: color-mix(in srgb, var(--bad) 25%, transparent); color: var(--bad); }
.sicon.warn { background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn); border-radius: 3px; }
.sicon.info { background: #ffffff14; color: var(--info); }
ul.checks, ul.evidence, ol.steps, ul.events, ul.reqs, ul.tests, ul.tiers, ul.ledger-mini, ul.loglist, ul.machines, ul.joblist, ul.jc-machines { list-style: none; margin: 0; padding: 0; }
ul.checks li, ul.evidence li { display: flex; gap: .45rem; align-items: flex-start; padding: .28rem 0; border-bottom: 1px dashed #ffffff0d; font-size: .92rem; }
.ck-label { flex: 1; }
.ck-detail { color: var(--muted); font-size: .82rem; text-align: right; }
ul.checks li.missing .ck-label { color: var(--text); }
ul.checks li.optional { color: var(--muted); }
ul.checks li.stale { opacity: .6; }
ul.evidence li.bad span:not(.sicon):first-of-type { color: #fecaca; }
body.colorblind ul.evidence li.bad span:not(.sicon):first-of-type { color: #fed7aa; }
.ev-day { margin-left: auto; color: var(--dim); font-size: .75rem; white-space: nowrap; }

/* tooltips, toasts, modals */
.tooltip { position: fixed; z-index: 100; max-width: 22rem; background: #0d0b09f2; border: 1px solid var(--line2); color: var(--text); padding: .45rem .65rem; border-radius: 8px; font-size: .85rem; pointer-events: none; box-shadow: var(--shadow); }
.toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 90; display: flex; flex-direction: column; gap: .5rem; max-width: min(26rem, calc(100vw - 2rem)); }
.toast { display: flex; gap: .55rem; align-items: flex-start; background: #1d1814f5; border: 1px solid var(--line2); border-left: 4px solid var(--info); padding: .6rem .8rem; border-radius: 8px; box-shadow: var(--shadow); animation: toast-in .25s ease-out; }
.toast.good { border-left-color: var(--good); } .toast.bad { border-left-color: var(--bad); } .toast.warn { border-left-color: var(--warn); }
.toast.out { opacity: 0; transform: translateX(20px); transition: all .35s; }
.toast-icon { font-weight: 700; }
.toast.good .toast-icon { color: var(--good); } .toast.bad .toast-icon { color: var(--bad); } .toast.warn .toast-icon { color: var(--warn); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
.modal-layer { position: relative; z-index: 80; }
.modal-wrap { position: fixed; inset: 0; background: #000a; display: grid; place-items: center; padding: 1rem; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.modal { background: linear-gradient(var(--panel2), var(--panel)); border: 1px solid var(--line2); border-radius: 14px; width: min(34rem, 100%); max-height: calc(100vh - 2rem); display: flex; flex-direction: column; box-shadow: 0 20px 60px #000c; animation: pop .18s ease-out; }
.modal.wide { width: min(52rem, 100%); }
@keyframes pop { from { transform: scale(.96); opacity: 0; } }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1rem .4rem; }
.modal-head h2 { margin: 0; font-size: 1.2rem; }
.modal-body { padding: .3rem 1rem 1rem; overflow: auto; }
.modal-actions { display: flex; justify-content: flex-end; gap: .5rem; padding: .7rem 1rem; border-top: 1px solid var(--line); flex-wrap: wrap; }

/* main menu */
body[data-screen="menu"] .screen, body[data-screen="newgame"] .screen { max-width: none; padding: 0; }
.menu { min-height: 100vh; display: grid; place-items: center; position: relative; overflow: hidden; background: radial-gradient(circle at 50% 40%, #3b2a17 0%, #14110f 60%); }
.menu-card { position: relative; z-index: 2; text-align: center; padding: 2.4rem 2.6rem; background: #1a1512d9; border: 1px solid var(--line2); border-radius: 18px; box-shadow: 0 30px 80px #000c; backdrop-filter: blur(6px); max-width: 30rem; margin: 1rem; }
.title-chip { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 12px; background: var(--accent); box-shadow: inset 0 0 0 12px #2a1d08, 0 0 40px #f5b84177; position: relative; }
.title-chip::after { content: ""; position: absolute; inset: -10px; background: repeating-linear-gradient(90deg, transparent 0 9px, var(--accent) 9px 13px) top/100% 8px no-repeat, repeating-linear-gradient(90deg, transparent 0 9px, var(--accent) 9px 13px) bottom/100% 8px no-repeat; opacity: .8; }
.title { font-size: clamp(2.2rem, 6vw, 3.4rem); margin: 0; background: linear-gradient(#ffe2a3, #f5b841 60%, #c47f12); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: .04em; }
.tagline { color: var(--muted); margin: .3rem 0 1.6rem; }
.menu-buttons { display: flex; flex-direction: column; gap: .6rem; align-items: center; }
.fine { color: var(--dim); font-size: .8rem; margin-top: 1.4rem; }
.hero-art { position: absolute; inset: 0; pointer-events: none; }
.float { position: absolute; width: 170px; opacity: .55; filter: drop-shadow(0 12px 20px #000a); animation: bob 7s ease-in-out infinite; }
.float.f0 { left: 6%; top: 14%; width: 260px; } .float.f1 { right: 8%; top: 12%; animation-delay: -2s; } .float.f2 { left: 10%; bottom: 14%; width: 220px; animation-delay: -4s; }
.float.f3 { right: 10%; bottom: 12%; animation-delay: -1s; } .float.f4 { left: 40%; top: 4%; width: 110px; animation-delay: -3s; } .float.f5 { right: 32%; bottom: 4%; width: 120px; animation-delay: -5s; }
@keyframes bob { 50% { transform: translateY(-14px) rotate(2deg); } }
.howto ol, .howto ul { padding-left: 1.3rem; } .howto li { margin: .3em 0; }
.newgame { max-width: 40rem; margin: 3rem auto; display: flex; flex-direction: column; gap: .4rem; }
.newgame label { font-weight: 700; margin-top: .6rem; }
input[type="text"], select { background: #0e0c0a; border: 1px solid var(--line2); border-radius: 8px; padding: .45rem .6rem; color: var(--text); max-width: 100%; }
.diffs { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .6rem; }
.diff { appearance: none; text-align: left; background: var(--panel2); border: 2px solid var(--line); border-radius: 10px; padding: .7rem .8rem; cursor: pointer; display: flex; flex-direction: column; gap: .2rem; }
.diff span { color: var(--muted); font-size: .85rem; } .diff small { color: var(--dim); }
.diff.on { border-color: var(--accent); background: #f5b84114; }

/* workshop */
.scene-wrap { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: #1d1814; }
.scene { display: block; width: 100%; height: auto; }
.scene .hot { cursor: pointer; transition: filter .15s; outline: none; }
.scene .hot:hover, .scene .hot:focus-visible { filter: brightness(1.25) drop-shadow(0 0 8px #f5b84188); }
.scene-label { font-family: var(--head); font-size: 14px; font-weight: 700; fill: #e9d8bf; letter-spacing: .12em; paint-order: stroke; stroke: #0008; stroke-width: 3px; }
.scene-hint { position: absolute; right: .8rem; top: .5rem; font-size: .8rem; color: #d9cbb7; background: #0009; padding: .15rem .5rem; border-radius: 6px; }
.ws-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.machine { display: flex; justify-content: space-between; gap: .6rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.machine.empty { color: var(--muted); }
.m-main { display: flex; flex-direction: column; min-width: 12rem; }
.m-job { font-size: .82rem; color: var(--accent); } .m-job.shop { color: var(--good); } .m-job.late { color: var(--bad); } .m-job.due { color: var(--warn); }
.m-actions { display: flex; gap: .3rem; flex-wrap: wrap; }
.bench-tag { font-family: var(--head); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); margin-top: .6rem; }
.joblist li { display: flex; gap: .7rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.joblist li.late { background: #f8717112; } .joblist li.due { background: #fbbf2410; }
.jl-text { flex: 1; display: flex; flex-direction: column; }
.cust { display: flex; gap: .6rem; align-items: center; }
.cust svg { border-radius: 12px; flex: none; }
.cust-text { display: flex; flex-direction: column; line-height: 1.2; }
.trait { font-size: .75rem; color: var(--accent); }
.steps li { display: flex; gap: .5rem; padding: .25rem 0; align-items: flex-start; }
.steps li.done span:last-child { color: var(--muted); text-decoration: line-through; }
.loglist { max-height: 18rem; overflow: auto; }
.loglist li { display: flex; gap: .6rem; padding: .2rem 0; font-size: .88rem; border-bottom: 1px dashed #ffffff0a; }
.log-t { font-family: var(--mono); color: var(--dim); font-size: .78rem; white-space: nowrap; }
.loglist li.bad span:last-child { color: #fecaca; } .loglist li.good span:last-child { color: #bbf7d0; } .loglist li.warn span:last-child { color: #fde68a; }

/* assembly */
.bench-tabs { display: flex; gap: .3rem; margin-bottom: -1px; flex-wrap: wrap; }
.asm-grid { display: grid; grid-template-columns: 17rem minmax(0, 1fr) 19rem; gap: .9rem; align-items: start; background: var(--panel2); border: 1px solid var(--line2); border-radius: 0 var(--radius) var(--radius) var(--radius); padding: .9rem; }
.asm-left, .asm-right, .test-left, .test-right { display: flex; flex-direction: column; gap: .8rem; }
.asm-right { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem; position: sticky; top: 4.5rem; max-height: calc(100vh - 5.5rem); overflow: hidden; }
.machine-info h2 { margin-bottom: .1rem; }
.job-tag { font-size: .85rem; color: var(--accent); } .job-tag.shop { color: var(--good); }
dl.mini { display: grid; grid-template-columns: auto 1fr; gap: .1rem .7rem; margin: .4rem 0 0; font-size: .88rem; }
dl.mini dt { color: var(--muted); } dl.mini dd { margin: 0; } dl.mini dd.bad { color: var(--bad); }
.power-row { display: flex; gap: .7rem; align-items: center; background: #0003; border: 1px solid var(--line); border-radius: 10px; padding: .55rem .7rem; }
.power-row > div { display: flex; flex-direction: column; flex: 1; line-height: 1.2; }
.power-btn { width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid #64748b; background: radial-gradient(#2b323d, #161a20); color: #94a3b8; font-size: 1.4rem; cursor: pointer; flex: none; transition: all .15s; }
.power-btn:hover { color: var(--good); border-color: var(--good); box-shadow: 0 0 16px #4ade8055; }
.power-btn.on { color: var(--good); border-color: var(--good); box-shadow: 0 0 18px #4ade8077; }
.power-result { border-radius: 10px; padding: .55rem .7rem; border: 1px solid var(--line); background: #0003; font-size: .9rem; }
.power-result.ok { border-color: #166534; background: #14532d33; } .power-result.fail { border-color: #7f1d1d; background: #7f1d1d22; }
.power-result h3 { margin-bottom: .3rem; } .power-result p { margin: .2rem 0; display: flex; gap: .3rem; align-items: baseline; flex-wrap: wrap; }
.hint { color: var(--muted); font-size: .82rem; }
small.hint { display: block; color: var(--blue); }
.leds { display: flex; gap: .3rem; align-items: center; }
.ledtag { background: #7f1d1d; color: #fecaca; border-radius: 4px; padding: 0 .35em; font-size: .75rem; font-family: var(--mono); }
.preflight h3 { margin-bottom: .2rem; }
.preflight ul.checks li { font-size: .85rem; }
ul.checks li.warnrow { color: #fde68a; }
.toolbox { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.toolbox h3 { grid-column: 1 / -1; margin: 0; }
.tool-chip { display: flex; align-items: center; gap: .4rem; background: #0003; border: 1px solid var(--line2); border-radius: 8px; padding: .4rem .5rem; cursor: grab; user-select: none; font-weight: 700; font-size: .88rem; touch-action: none; }
.tool-chip:hover { border-color: var(--accent); } .tool-chip.selected { border-color: var(--accent); background: #f5b84122; }
.tool-chip .count { margin-left: auto; font-family: var(--mono); color: var(--muted); font-size: .8rem; }
.asm-center { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.asm-toolbar { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.view-wrap { background: #0b0a09; border: 1px solid var(--line); border-radius: 14px; padding: .4rem; box-shadow: inset 0 0 40px #000; }
.pcview { display: block; width: 100%; height: auto; user-select: none; touch-action: none; }
.pcview .label { font-family: var(--head); font-size: 11px; fill: #64748b; letter-spacing: .12em; }
.pcview .brandmark { font-family: var(--head); font-size: 12px; fill: #475569; letter-spacing: .3em; }
.pcview .zone { fill: transparent; stroke: #94a3b866; stroke-width: 1.5; stroke-dasharray: 5 5; transition: fill .12s, stroke .12s; }
.pcview .zone.filled { stroke: transparent; }
.pcview .zone.empty:hover { stroke: #e2e8f0; fill: #ffffff0a; }
.pcview .zone.z-ok { stroke: var(--zone-ok); stroke-dasharray: none; stroke-width: 3; fill: color-mix(in srgb, var(--zone-ok) 18%, transparent); animation: pulse 1.2s ease-in-out infinite; }
.pcview .zone.z-bad { stroke: var(--zone-bad); stroke-dasharray: 3 4; stroke-width: 2.5; fill: color-mix(in srgb, var(--zone-bad) 14%, transparent); }
body.colorblind .pcview .zone.z-bad { stroke-dasharray: 2 6; }
.pcview .zone.hover.z-ok { fill: color-mix(in srgb, var(--zone-ok) 38%, transparent); }
.pcview .zone.hover.z-bad { fill: color-mix(in srgb, var(--zone-bad) 30%, transparent); }
@keyframes pulse { 50% { stroke-opacity: .45; } }
.pcview .part { cursor: pointer; transition: filter .15s; }
.pcview .part:hover { filter: brightness(1.18) drop-shadow(0 0 6px #f5b84199); }
.pcview .just-installed { animation: drop-in .35s cubic-bezier(.2, 1.4, .4, 1); transform-box: fill-box; }
@keyframes drop-in { from { opacity: 0; translate: 0 -24px; } }
.pcview .cable { cursor: pointer; filter: drop-shadow(0 2px 2px #0008); }
body.dragging .pcview .cable, .view-wrap.selecting .pcview .cable { pointer-events: none; }
.pcview .cable:hover { stroke: var(--accent) !important; }
.pcview .cable.loose { stroke-dasharray: 10 5; animation: wiggle .8s linear infinite; }
@keyframes wiggle { to { stroke-dashoffset: 30; } }
.pcview .port-base { fill: #0b0d10; stroke: #6b7280; stroke-width: 1; }
.pcview .port { fill: #f5b84130; stroke: var(--accent); stroke-width: 2; cursor: pointer; animation: pulse 1.2s infinite; }
.pcview .port.blocked { fill: #f8717122; stroke: var(--bad); animation: none; }
.pcview .port.z-ok, .pcview .port.hover { fill: color-mix(in srgb, var(--zone-ok) 40%, transparent); stroke: var(--zone-ok); }
.pcview .led { fill: #1f2937; } .pcview .led.on { fill: #4ade80; filter: drop-shadow(0 0 4px #4ade80); }
.pcview .dbg { fill: #3f1d1d; } .pcview .dbg.lit { fill: #ef4444; filter: drop-shadow(0 0 4px #ef4444); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }
.pcview .panel-text { font-family: var(--head); font-size: 26px; fill: #64748b; letter-spacing: .2em; }
.pcview .spin { animation: spin .5s linear infinite; }
.pcview.powered .spin { animation-duration: .35s; }
.pcview:not(.powered) .spin { animation: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.part-svg .spin { animation: spin 2.5s linear infinite; }
.view-wrap.selecting .pcview .part { opacity: .85; }
.sel-bar { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; background: #f5b84118; border: 1px solid var(--accent); border-radius: 8px; padding: .35rem .5rem; font-size: .85rem; }
.sel-bar span { flex: 1; }
.tray { display: grid; grid-template-columns: 1fr; gap: .4rem; overflow: auto; max-height: calc(100vh - 17rem); padding-right: .2rem; }
.part-card { display: flex; gap: .55rem; align-items: center; background: #0003; border: 1px solid var(--line2); border-radius: 9px; padding: .35rem .5rem; cursor: grab; user-select: none; touch-action: none; position: relative; transition: border-color .12s, background .12s; }
.part-card:hover { border-color: var(--accent); background: #ffffff08; }
.part-card.selected { border-color: var(--accent); background: #f5b84122; box-shadow: 0 0 0 2px #f5b84155; }
.part-card.customer { border-style: dashed; }
.part-card.drag-source { opacity: .4; }
.pc-art { width: 4.2rem; height: 2.8rem; flex: none; display: grid; place-items: center; }
.pc-art svg, .sr-art svg { max-width: 100%; max-height: 100%; }
.pc-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.pc-name { font-weight: 700; font-size: .9rem; } .pc-sub { color: var(--muted); font-size: .78rem; }
.fit { position: absolute; right: .5rem; top: .35rem; font-size: .8rem; }
.fit.ok { color: var(--good); } .fit.no { color: var(--dim); }
.drag-ghost { position: fixed; z-index: 120; pointer-events: none; transform: translate(-50%, -60%); display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.ghost-art { width: 7.5rem; transition: transform .15s; filter: drop-shadow(0 10px 18px #000c); }
.ghost-art svg { width: 100%; height: auto; }
.ghost-cap { background: #0d0b09f0; border: 1px solid var(--line2); border-radius: 8px; padding: .2rem .55rem; font-size: .8rem; max-width: 20rem; text-align: center; }
.ghost-cap.ok { border-color: var(--good); color: #bbf7d0; } .ghost-cap.bad { border-color: var(--bad); color: #fecaca; }
.ghost-cap:empty { display: none; }
.ghost-tool { background: #0d0b09f0; border: 1px solid var(--accent); border-radius: 8px; padding: .35rem .7rem; font-weight: 700; white-space: nowrap; }
body.dragging, body.dragging * { cursor: grabbing !important; }
.cables { display: flex; flex-direction: column; gap: .35rem; overflow: auto; max-height: calc(100vh - 15rem); }
.cable-chip { display: flex; align-items: center; gap: .45rem; background: #0003; border: 1px solid var(--line2); border-radius: 8px; padding: .35rem .5rem; font-size: .86rem; cursor: grab; touch-action: none; user-select: none; }
.cable-chip.done { opacity: .65; cursor: default; } .cable-chip.blocked { border-color: #7f1d1d; cursor: not-allowed; }
.cc-label { flex: 1; } .cc-state { color: var(--muted); font-size: .78rem; } .cc-state.bad { color: var(--bad); }
.notes h2 { margin-bottom: .3rem; } .notes-body { max-height: 14rem; overflow: auto; }
.empty-bench { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1rem; background: var(--panel2); border: 1px solid var(--line2); border-radius: 0 var(--radius) var(--radius) var(--radius); padding: 1rem; }
.case-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .6rem; }
.case-card { appearance: none; background: #0003; border: 1px solid var(--line2); border-radius: 10px; padding: .6rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; }
.case-card:hover { border-color: var(--accent); }
.case-card svg { width: 5rem; height: auto; } .case-card small { color: var(--muted); }
.warn-text { color: var(--warn); }
body.puff .view-wrap { animation: puff .9s ease-out; }
.pcview .burst { fill: none; stroke: var(--accent); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: burst .6s ease-out forwards; }
@keyframes burst { from { opacity: .9; transform: scale(.3); } to { opacity: 0; transform: scale(1.3); } }
.view-wrap { position: relative; overflow: hidden; }
body.sweep .view-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 280px; left: -280px; pointer-events: none; background: radial-gradient(ellipse at center, #fff6d966, transparent 70%); animation: sweep 1.1s ease-in-out forwards; }
@keyframes sweep { to { left: 100%; } }
@keyframes puff { 30% { box-shadow: inset 0 0 120px #e7e0d3aa; } }

/* paste */
.paste { display: flex; flex-direction: column; align-items: center; }
.paste-cpu { position: relative; width: 14rem; height: 14rem; cursor: pointer; touch-action: none; user-select: none; border-radius: 12px; }
.paste-cpu svg { width: 100%; height: 100%; }
.paste-blob { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #c9ccd1 60%, #9aa0a8); box-shadow: 0 2px 4px #0006; transition: width .05s, height .05s; pointer-events: none; }
.paste-blob.spill { border-radius: 46% 54% 40% 60%; }
.paste-verdict { min-height: 2.6em; text-align: center; font-weight: 700; }

/* testing */
.test-grid { display: grid; grid-template-columns: 16rem minmax(0, 1fr) 20rem; gap: .9rem; align-items: start; background: var(--panel2); border: 1px solid var(--line2); border-radius: 0 var(--radius) var(--radius) var(--radius); padding: .9rem; }
.led-row { display: flex; gap: .55rem; flex-wrap: wrap; background: #0004; border: 1px solid var(--line); border-radius: 10px; padding: .5rem .6rem; }
.led-item { display: flex; align-items: center; gap: .3rem; font-family: var(--mono); font-size: .75rem; color: var(--muted); }
.led-dot { width: .7rem; height: .7rem; border-radius: 50%; background: #2a2f37; border: 1px solid #111; }
.led-dot.on.green { background: #4ade80; box-shadow: 0 0 8px #4ade80; } .led-dot.on.red { background: #ef4444; box-shadow: 0 0 8px #ef4444; } .led-dot.on.amber { background: #f59e0b; box-shadow: 0 0 8px #f59e0b; } .led-dot.on.white { background: #f1f5f9; box-shadow: 0 0 8px #fff; }
body.colorblind .led-dot.on.red { background: #fb923c; }
.led-dot.on.red, .led-dot.on.amber, .led-dot.on.white { animation: blink 1s steps(2) infinite; }
.tool-list { display: flex; flex-direction: column; gap: .3rem; }
.tool-row { appearance: none; display: flex; justify-content: space-between; background: #0003; border: 1px solid var(--line2); border-radius: 8px; padding: .4rem .6rem; cursor: pointer; text-align: left; }
.tool-row:hover:not(:disabled) { border-color: var(--accent); } .tool-row:disabled { opacity: .5; cursor: not-allowed; }
.tr-time { color: var(--muted); font-family: var(--mono); font-size: .8rem; }
.monitor-wrap { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.monitor { display: flex; flex-direction: column; align-items: center; }
.bezel { width: 100%; background: linear-gradient(#202329, #15171b); border-radius: 16px; padding: 14px 14px 22px; box-shadow: 0 10px 30px #000a, inset 0 1px 0 #ffffff14; }
.screen-inner { aspect-ratio: 16 / 10; background: #05070a; border-radius: 6px; overflow: hidden; position: relative; font-family: var(--mono); font-size: .88rem; color: #cbd5e1; box-shadow: inset 0 0 50px #000; }
.stand { width: 30%; height: 18px; background: linear-gradient(#2a2d33, #1a1c20); border-radius: 0 0 10px 10px; }
.no-signal { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #475569; font-size: 1.1rem; letter-spacing: .1em; gap: .4rem; text-align: center; padding: 1rem; }
.no-signal small { font-size: .8rem; letter-spacing: 0; }
.post { padding: 1rem; height: 100%; display: flex; flex-direction: column; }
.post pre, .post-lines { margin: 0; white-space: pre-wrap; color: #e2e8f0; flex: 1; overflow: auto; font-family: var(--mono); }
.type-line { opacity: 0; animation: typein .25s steps(6) forwards; }
body.reduced-motion .type-line { opacity: 1; }
@keyframes typein { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
.post-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.post-actions .btn, .desktop .btn, .bios .btn, .installer .btn, .app-window .btn { font-family: var(--font); }
.bios { background: #0b1d4a; color: #dbeafe; height: 100%; display: flex; flex-direction: column; }
.bios-head { background: #1e3a8a; padding: .4rem .8rem; display: flex; justify-content: space-between; font-weight: 600; }
.bios-body { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: .7rem .9rem; overflow: auto; }
.bios h4 { color: #93c5fd; }
.bios-row { display: flex; justify-content: space-between; gap: .5rem; padding: .25rem 0; border-bottom: 1px solid #ffffff12; align-items: center; flex-wrap: wrap; }
.bk { color: #93c5fd; } .bv { color: #fff; text-align: right; }
.bios select { background: #172554; border-color: #3b82f6; color: #fff; font-family: var(--mono); font-size: .85rem; }
.bios-foot { display: flex; gap: .5rem; align-items: center; padding: .5rem .8rem; background: #1e3a8a; flex-wrap: wrap; }
.desktop { height: 100%; position: relative; background: radial-gradient(circle at 70% 20%, #3b82f6 0%, #1e3a8a 45%, #0f172a 100%); font-family: var(--font); color: #fff; }
.desktop.os-fernix { background: radial-gradient(circle at 30% 30%, #22c55e 0%, #14532d 50%, #052e16 100%); }
.desktop.os-harbor { background: linear-gradient(135deg, #0f766e, #134e4a 50%, #042f2e); }
.desk-bar { display: flex; gap: .8rem; align-items: center; padding: .35rem .6rem; background: #0008; font-size: .85rem; flex-wrap: wrap; }
.desk-actions { margin-left: auto; display: flex; gap: .3rem; }
.icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: .5rem; padding: .8rem; }
.app-icon { appearance: none; background: #ffffff14; border: 1px solid #ffffff22; border-radius: 10px; padding: .5rem .3rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .2rem; color: #fff; font-size: .78rem; }
.app-icon:hover:not(:disabled) { background: #ffffff2a; } .app-icon:disabled { opacity: .4; cursor: not-allowed; }
.ai { font-size: 1.5rem; }
.popups { position: absolute; inset: 0; pointer-events: none; }
.popup { position: absolute; background: #fef08a; color: #7c2d12; border: 2px solid #dc2626; padding: .4rem .6rem; font-weight: 700; font-size: .8rem; box-shadow: 4px 4px 0 #0006; animation: bob 2s ease-in-out infinite; }
.app-window { margin: .7rem; background: #0f172af2; border: 1px solid #334155; border-radius: 8px; padding: .5rem .8rem .8rem; height: calc(100% - 1.4rem); display: flex; flex-direction: column; font-family: var(--font); }
.aw-title { display: flex; gap: .6rem; align-items: center; border-bottom: 1px solid #334155; padding-bottom: .35rem; margin-bottom: .5rem; }
.aw-title .btn { margin-left: auto; }
.aw-out { flex: 1; margin: 0; white-space: pre-wrap; font-family: var(--mono); color: #e2e8f0; overflow: auto; font-size: .86rem; }
.progress { height: 10px; background: #1e293b; border-radius: 6px; overflow: hidden; margin-bottom: .5rem; }
.progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #38bdf8, #a78bfa); }
.installer { padding: 1rem; font-family: var(--font); background: #111827; height: 100%; overflow: auto; }
.inst-box { background: #1f2937; border: 1px solid #374151; border-radius: 8px; padding: .7rem; margin: .5rem 0; display: flex; flex-direction: column; gap: .5rem; }
.inst-box label, .form label, .job-pick { display: flex; flex-direction: column; gap: .2rem; font-weight: 700; font-size: .88rem; }
.form { display: flex; flex-direction: column; gap: .6rem; }
table.disks { width: 100%; border-collapse: collapse; font-size: .85rem; } table.disks td { padding: .35rem; border-bottom: 1px solid #334155; vertical-align: top; }

/* jobs */
.jobs-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.tier-line { font-size: .85rem; color: var(--muted); display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; }
.tier { border: 1px solid var(--line); border-radius: 999px; padding: 0 .55em; color: var(--dim); }
.tier.on { color: var(--accent); border-color: var(--accent); }
.job-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr)); gap: 1rem; }
.job-card { background: linear-gradient(var(--panel), #1d1915); border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem; display: flex; flex-direction: column; gap: .5rem; box-shadow: 0 3px 12px #0005; }
.job-card.late { border-color: var(--bad); } .job-card.due { border-color: var(--warn); }
.jc-head { display: flex; justify-content: space-between; gap: .8rem; align-items: flex-start; flex-wrap: wrap; }
.jc-title { text-align: right; flex: 1; min-width: 10rem; }
.jc-title h3 { color: var(--text); font-size: 1.05rem; margin: .2rem 0 0; }
.kind { display: inline-block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; padding: .1em .55em; border-radius: 6px; background: #ffffff14; color: var(--muted); }
.kind.k-repair, .kind.k-contract { background: #1e3a8a66; color: #93c5fd; } .kind.k-build, .kind.k-fleet { background: #14532d77; color: #86efac; } .kind.k-upgrade { background: #581c8766; color: #d8b4fe; } .kind.k-recovery { background: #7c2d1266; color: #fdba74; } .kind.k-malware { background: #7f1d1d66; color: #fca5a5; } .kind.k-thermal { background: #164e6366; color: #67e8f9; }
.story { font-style: italic; color: #d8cbbb; margin: 0; }
.job-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.fact { background: #0003; border: 1px solid var(--line); border-radius: 8px; padding: .3rem .5rem; display: flex; flex-direction: column; }
.fact span { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .fact strong { font-family: var(--head); }
.jc-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; }
ul.reqs li { font-size: .86rem; padding: .1rem 0 .1rem .9rem; position: relative; }
ul.reqs li::before { content: "▸"; position: absolute; left: 0; color: var(--accent); }
ul.reqs.bonus li::before { content: "+"; color: var(--good); }
.jc-foot { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: .55rem; margin-top: auto; }
.jc-foot > span { margin-right: auto; font-size: .85rem; }
.jc-machines li { display: flex; gap: .4rem; align-items: center; font-size: .88rem; flex-wrap: wrap; }
.result { background: #0003; border: 1px solid var(--line); border-radius: 8px; padding: .5rem .7rem; }
.result.fail { border-color: #7f1d1d; }
.res-top { display: flex; gap: .7rem; align-items: center; }
.stars { color: var(--accent); font-size: 1.2rem; letter-spacing: .1em; } .stars .dim { color: #4b4038; }
.review { font-style: italic; }
.res-money { display: flex; gap: .4rem .9rem; flex-wrap: wrap; font-size: .85rem; }
.fin.strong { font-weight: 700; }
.invoice .inv-row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: .5rem 0; }
.invoice input[type="range"] { width: 14rem; }
table.inv { width: 100%; border-collapse: collapse; font-size: .9rem; margin: .4rem 0; }
table.inv th, table.inv td { padding: .3rem .4rem; border-bottom: 1px solid var(--line); text-align: left; }
table.inv td:nth-child(2) { text-align: right; } table.inv tr.total th, table.inv tr.total td { font-weight: 700; border-top: 2px solid var(--line2); }
.inv-total { font-size: 1.15rem; margin-top: .6rem; }
.pick-machines { display: flex; flex-direction: column; gap: .7rem; }
.pick { border: 1px solid var(--line); border-radius: 8px; padding: .5rem .7rem; }
.pick-head { display: flex; gap: .6rem; align-items: center; } .pick-head .btn { margin-left: auto; }
.day-summary .sum-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .8rem; }
.sum-card { background: #0003; border: 1px solid var(--line); border-radius: 8px; padding: .5rem; display: flex; flex-direction: column; }
.sum-card span { font-size: .75rem; color: var(--muted); } .sum-card strong { font-family: var(--head); font-size: 1.2rem; }
ul.events li { padding: .3rem 0 .3rem 1.1rem; position: relative; border-bottom: 1px dashed #ffffff10; }
ul.events li::before { content: "●"; position: absolute; left: 0; color: var(--info); font-size: .7rem; top: .5rem; }
ul.events li.bad::before { color: var(--bad); content: "✖"; } ul.events li.good::before { color: var(--good); content: "✔"; } ul.events li.warn::before { color: var(--warn); content: "▲"; }

/* store */
.store-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.shelf-meter { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; color: var(--muted); min-width: 12rem; }
.meter { height: 8px; background: #ffffff14; border-radius: 6px; overflow: hidden; } .meter span { display: block; height: 100%; background: var(--good); } .meter span.full { background: var(--bad); }
.store-tools { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: .7rem; }
.express { font-size: .9rem; }
.shop-list, .inv-list { display: flex; flex-direction: column; gap: .45rem; }
.shop-row, .inv-row { display: grid; grid-template-columns: 6rem minmax(0, 1fr) auto auto; gap: .8rem; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .5rem .8rem; }
.shop-row.locked { opacity: .55; } .inv-row.customer { border-style: dashed; }
.sr-art { height: 3.6rem; display: grid; place-items: center; }
.sr-main { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.sr-specs { color: var(--muted); font-size: .84rem; font-family: var(--mono); }
.sr-meta { font-size: .82rem; color: var(--dim); }
.owned { color: var(--accent); } .fit-ok { color: var(--good); } .fit-bad { color: var(--bad); } .lock { color: var(--warn); }
.sr-price { text-align: right; display: flex; flex-direction: column; font-family: var(--head); font-size: 1.1rem; }
.sr-price s { font-size: .8rem; }
.sr-actions { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.cmp { font-size: .8rem; color: var(--muted); display: flex; gap: .2rem; align-items: center; }
.compare { position: sticky; bottom: 0; margin-top: 1rem; background: #1a1512f5; border: 1px solid var(--accent); border-radius: 12px 12px 0 0; padding: .6rem .8rem; box-shadow: 0 -10px 30px #000a; z-index: 10; }
.cmp-head { display: flex; gap: .6rem; align-items: center; } .cmp-head .btn { margin-left: auto; }
.cmp-scroll { overflow: auto; max-height: 40vh; }
table.cmp { border-collapse: collapse; width: 100%; font-size: .85rem; }
table.cmp th, table.cmp td { padding: .3rem .5rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.cmp thead th { vertical-align: bottom; } table.cmp thead svg { width: 5rem; height: 3rem; display: block; }
.bargain-grid, .tool-grid, .upgrade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .7rem; }
.bargain-card, .tool-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .7rem .8rem; display: flex; flex-direction: column; gap: .3rem; }
.bargain-card svg { width: 7rem; height: 4rem; align-self: center; }
.bc-price { display: flex; gap: .5rem; align-items: baseline; font-family: var(--head); font-size: 1.15rem; }
.tool-card p { color: var(--muted); font-size: .88rem; flex: 1; margin: .1rem 0; }
.tool-card.owned { border-color: #166534; } .tool-card.locked { opacity: .6; }
.tc-foot { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.tools-tab section { margin-bottom: 1.4rem; }
.inventory section { margin-bottom: 1rem; }
.orders-table, .jobs-table { width: 100%; border-collapse: collapse; } .orders-table th, .orders-table td, .jobs-table th, .jobs-table td { text-align: left; padding: .4rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.ledger-mini { max-height: 22rem; overflow: auto; }
.ledger-mini li { display: grid; grid-template-columns: 3.5rem 1fr auto; gap: .5rem; padding: .25rem 0; border-bottom: 1px dashed #ffffff0d; font-size: .88rem; }
.planner .plan-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1rem; }
.plan-form, .plan-result { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .8rem; display: flex; flex-direction: column; gap: .4rem; }
.plan-row { display: grid; grid-template-columns: 8rem 1fr auto; gap: .5rem; align-items: center; }
.plan-row select { width: 100%; }
.pl-label { font-weight: 700; font-size: .9rem; }
.plan-totals { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }

/* inspect */
.inspect { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 1rem; }
.inspect-art { background: radial-gradient(#3a322b, #1a1612); border-radius: 12px; display: grid; place-items: center; padding: 1rem; min-height: 9rem; }
.inspect-art svg { width: 100%; height: auto; }
.lede { font-family: var(--head); font-size: 1.1rem; margin-top: 0; }
table.specs { border-collapse: collapse; width: 100%; font-size: .9rem; }
table.specs th { text-align: left; color: var(--muted); font-weight: 400; padding: .2rem .6rem .2rem 0; width: 42%; vertical-align: top; }
table.specs td { padding: .2rem 0; } table.specs tr { border-bottom: 1px dashed #ffffff0d; }

/* business */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .7rem; margin-bottom: 1rem; }
.kpi { background: linear-gradient(var(--panel), #1d1915); border: 1px solid var(--line); border-radius: 10px; padding: .6rem .8rem; display: flex; flex-direction: column; }
.kpi span { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .kpi strong { font-family: var(--head); font-size: 1.35rem; }
.biz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); gap: 1rem; }
.biz-grid .wide { grid-column: 1 / -1; }
table.breakdown { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.breakdown th { text-align: left; font-weight: 400; padding: .25rem .4rem .25rem 0; white-space: nowrap; }
table.breakdown td { padding: .25rem 0; text-align: right; } table.breakdown td.bar { width: 45%; padding: 0 .6rem; text-align: left; }
td.bar span { display: block; height: 8px; border-radius: 4px; background: var(--good); } td.bar span.neg { background: var(--bad); }
tr.total th, tr.total td { font-weight: 700; border-top: 1px solid var(--line2); }
.milestones { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .6rem; }
.milestone { display: flex; gap: .6rem; background: #0003; border: 1px solid var(--line); border-radius: 10px; padding: .5rem .7rem; opacity: .7; }
.milestone.got { opacity: 1; border-color: var(--accent); }
.ms-icon { font-size: 1.4rem; } .milestone p { margin: .1rem 0; }
ul.tiers li { display: flex; gap: .4rem; align-items: center; padding: .25rem 0; }
.setting { display: flex; gap: .7rem; align-items: flex-start; padding: .55rem 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.setting input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: var(--accent); flex: none; }
.set-text { display: flex; flex-direction: column; } .set-text small { color: var(--muted); }
.setting.range { flex-direction: column; } .setting.range .set-text { flex-direction: row; justify-content: space-between; width: 100%; }
.setting.range input { width: 100%; accent-color: var(--accent); }
.settings { max-width: 46rem; margin: 0 auto; }
.settings section { margin: 1.2rem 0; }
.error-panel { max-width: 40rem; margin: 3rem auto; }

/* motion and contrast preferences */
body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .float, .pcview .spin, .popup { animation: none !important; } }
body.high-contrast .panel, body.high-contrast .job-card, body.high-contrast .shop-row { background: var(--panel); border-color: var(--line2); }
body.high-contrast .muted, body.high-contrast .sr-specs { color: var(--muted); }
body.high-contrast .pcview .zone { stroke: #fff; }

/* narrower desktops */
@media (max-width: 1280px) {
  .asm-grid { grid-template-columns: 15rem minmax(0, 1fr); }
  .asm-grid > .asm-right { grid-column: 1 / -1; position: static; max-height: none; }
  .tray { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); max-height: 26rem; }
  .test-grid { grid-template-columns: 15rem minmax(0, 1fr); }
  .test-grid > .test-right { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .asm-grid, .test-grid { grid-template-columns: 1fr; }
  .test-grid > .test-right { grid-template-columns: 1fr; }
  .job-cards { grid-template-columns: 1fr; }
  .job-facts { grid-template-columns: 1fr 1fr; }
  .shop-row, .inv-row { grid-template-columns: 4rem minmax(0, 1fr); }
  .sr-price, .sr-actions { grid-column: 2; text-align: left; justify-content: flex-start; }
  .planner .plan-grid, .inspect { grid-template-columns: 1fr; }
  .navlabel { display: none; }
  .stats { margin-left: 0; }
}