/* Machine explorer. Parts index (start) | live 3D stage over the process line and gauges | manual page (end) */
.app{ max-width:1760px; margin:0 auto; padding-inline:16px; padding-block:12px 10px; display:grid; gap:12px; font-size:15px; line-height:1.8; }
.app button{ font:inherit; color:inherit; }

.top{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:8px 24px; }
.brand{ display:grid; gap:0; min-width:0; }
.crumbs{ display:flex; flex-wrap:wrap; gap:4px 8px; font-size:13px; color:var(--muted); margin:0; padding:0; list-style:none; }
.crumbs a{ color:var(--muted); text-decoration:none; }
.crumbs a:hover{ color:var(--ink); text-decoration:underline; }
.crumbs li + li::before{ content:"‹"; margin-inline-end:8px; color:var(--line); }
.brand h1{ margin:0; font-family:var(--f-display); font-weight:800; font-size:clamp(21px,2.2vw,28px); line-height:1.55; text-wrap:balance; }
.brand p{ margin:0; color:var(--muted); font-size:13.5px; max-width:80ch; }
.modes{ display:inline-flex; gap:2px; padding:3px; border:1px solid var(--line); background:var(--sunk); border-radius:999px; }
.modes button{ border:0; background:transparent; padding:6px 16px; border-radius:999px; cursor:pointer; color:var(--muted); font-weight:500; font-size:14px; }
.modes button[aria-selected="true"]{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow); font-weight:700; }

.work{ display:grid; grid-template-columns:230px minmax(0,1fr) 380px; gap:12px; height:clamp(600px, calc(100vh - 185px), 1000px); }
.panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); min-height:0; overflow:auto; }
.center{ display:flex; flex-direction:column; gap:12px; min-width:0; min-height:0; }
.stage{ position:relative; flex:1 1 auto; min-height:320px; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r); background:var(--scene); overflow:hidden; }
.viewport{ position:relative; flex:1 1 auto; min-height:0; }
.viewport canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; outline:none; cursor:grab; }
.viewport canvas.hovering{ cursor:pointer; }
.loading{ position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); font-size:14px; padding:16px; text-align:center; }
.badge{ position:absolute; top:10px; inset-inline-start:10px; display:flex; align-items:center; gap:8px; padding:3px 11px; border-radius:999px; background:var(--surface); border:1px solid var(--line); font-size:13px; box-shadow:var(--shadow); font-variant-numeric:tabular-nums; }
.badge i{ width:9px; height:9px; border-radius:50%; background:var(--ok); flex:none; }
.badge[data-s="stop"] i{ background:var(--muted); }
.badge[data-s="warn"] i{ background:var(--warn); }
.badge[data-s="bad"] i{ background:var(--bad); }
.hint{ position:absolute; bottom:8px; inset-inline-end:12px; font-size:12px; color:var(--muted); pointer-events:none; }
.tags{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.tag{ position:absolute; left:0; top:0; pointer-events:auto; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:999px; min-width:24px; height:24px; padding:0 8px; font-size:12px; font-weight:700; cursor:pointer; box-shadow:var(--shadow); display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; font-variant-numeric:tabular-nums; line-height:1; }
.tag.sel{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.tag.fault{ background:var(--bad); color:var(--on-bad); border-color:var(--bad); }
.tag.aff{ background:var(--warn-soft); border-color:var(--warn); }
.tip{ position:absolute; left:0; top:0; pointer-events:none; background:var(--ink); color:var(--bg); padding:2px 9px; border-radius:6px; font-size:12.5px; white-space:nowrap; }
.tip.ctx{ background:var(--surface); color:var(--muted); border:1px solid var(--line); }

.toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 10px; background:var(--surface); border-top:1px solid var(--line); }
.tbtn{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--surface); padding:4px 11px; border-radius:7px; cursor:pointer; font-size:13.5px; }
.tbtn:hover{ background:var(--sunk); }
.tbtn[aria-pressed="true"]{ background:var(--accent-soft); border-color:var(--accent); }
.tbtn.primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:700; }
.tbtn:disabled{ opacity:.55; cursor:not-allowed; }
.tbtn svg{ width:14px; height:14px; flex:none; fill:currentColor; }
.slider{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; padding-inline:4px; flex:1 1 160px; min-width:140px; max-width:320px; }
.slider input{ flex:1; accent-color:var(--accent); min-width:0; }

.system{ flex:0 0 auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:8px 12px 10px; display:grid; gap:7px; }
.sys-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:2px 12px; }
.sys-head h2{ margin:0; font-size:14px; font-weight:700; }
.sys-head p{ margin:0; font-size:12.5px; color:var(--muted); }
.sys-head p[data-s="warn"]{ color:var(--warn); font-weight:700; }
.sys-head p[data-s="bad"]{ color:var(--bad); font-weight:700; }
.circuit-wrap{ overflow-x:auto; }
.circuit{ display:flex; align-items:center; gap:3px; min-width:680px; }
.stg{ flex:1 1 0; min-width:0; text-align:center; padding:3px 6px; border:1px solid var(--line); border-radius:7px; background:var(--sunk); font-size:12.5px; line-height:1.5; transition:background-color .4s, border-color .4s; }
.stg small{ display:block; font-family:var(--f-data); font-size:9.5px; color:var(--muted); direction:ltr; }
.stg.focus{ border-color:var(--ink); font-weight:700; }
.stg[data-s="warn"]{ background:var(--warn-soft); border-color:var(--warn); }
.stg[data-s="bad"]{ background:var(--bad-soft); border-color:var(--bad); }
.arw{ color:var(--muted); font-size:11px; flex:none; }
.loop{ font-size:12px; color:var(--muted); margin:0; }
.kpis{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
.kpi{ border:1px solid var(--line); background:var(--sunk); border-radius:8px; padding:5px 10px 6px; display:grid; align-content:start; min-width:0; transition:border-color .4s; }
.kpi .l{ font-size:12px; color:var(--muted); line-height:1.5; }
.kpi .v{ font-size:19px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.4; }
.kpi .u{ font-size:11.5px; color:var(--muted); font-weight:400; }
.kpi .row{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
.kpi .pill{ font-size:11px; padding:0 7px; border-radius:999px; background:var(--ok-soft); color:var(--ok); font-weight:700; line-height:1.7; }
.kpi .b{ font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }
.kpi[data-s="warn"]{ border-color:var(--warn); }
.kpi[data-s="warn"] .pill{ background:var(--warn-soft); color:var(--warn); }
.kpi[data-s="bad"]{ border-color:var(--bad); }
.kpi[data-s="bad"] .pill{ background:var(--bad-soft); color:var(--bad); }

.plist-head{ position:sticky; top:0; background:var(--surface); padding:10px 12px 8px; border-bottom:1px solid var(--line); display:grid; gap:6px; z-index:1; }
.plist-head h2{ margin:0; font-size:14px; display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.plist-head h2 span{ font-size:12px; color:var(--muted); font-weight:400; }
.search{ width:100%; border:1px solid var(--line); background:var(--sunk); border-radius:7px; padding:4px 10px; font:inherit; font-size:13.5px; color:var(--ink); }
.grp{ margin:0; padding:10px 14px 2px; font-size:11.5px; font-weight:700; color:var(--muted); }
.plist{ list-style:none; margin:0; padding:0 0 6px; }
.pbtn{ width:100%; display:grid; grid-template-columns:22px minmax(0,1fr) 10px; align-items:center; gap:8px; text-align:start; padding:4px 12px; border:0; border-inline-start:3px solid transparent; background:transparent; cursor:pointer; font-size:14px; line-height:1.65; }
.pbtn:hover{ background:var(--sunk); }
.pbtn[aria-current="true"]{ background:var(--accent-soft); border-inline-start-color:var(--accent); font-weight:700; }
.pbtn .n{ font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; text-align:center; }
.pbtn .d{ width:8px; height:8px; border-radius:50%; }
.pbtn .d.fault{ background:var(--bad); }
.pbtn .d.aff{ background:var(--warn); }
.empty{ padding:12px 14px; color:var(--muted); font-size:13.5px; margin:0; }

.d-wrap{ padding:14px 16px 18px; display:grid; gap:14px; }
.d-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:13px; }
.d-head{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:0 12px; align-items:center; }
.d-num{ grid-row:span 2; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:var(--bg); font-weight:800; font-size:17px; font-variant-numeric:tabular-nums; }
.d-head h2{ margin:0; font-family:var(--f-display); font-weight:800; font-size:20px; line-height:1.6; text-wrap:balance; }
.d-head .meta{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; }
.d-head.solo{ grid-template-columns:minmax(0,1fr); }
.chip{ display:inline-block; font-size:11.5px; padding:0 8px; border-radius:999px; border:1px solid var(--line); color:var(--muted); line-height:1.8; }
.tabs{ display:flex; gap:2px; border-bottom:1px solid var(--line); overflow-x:auto; }
.tabs button{ border:0; background:transparent; padding:5px 10px 7px; cursor:pointer; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; font-size:14px; white-space:nowrap; }
.tabs button[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--accent); font-weight:700; }
.d-body{ display:grid; gap:14px; }
.d-body p{ margin:0; }
.d-body h3{ margin:0; font-size:16px; font-weight:800; line-height:1.6; }
.d-body h4{ margin:0 0 4px; font-size:12.5px; color:var(--muted); font-weight:700; }
.d-body ul,.d-body ol{ margin:0; padding-inline-start:20px; display:grid; gap:3px; }
.lead{ font-size:15.5px; }
.specs{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:3px 14px; margin:0; font-size:14px; border-top:1px solid var(--line); padding-top:10px; }
.specs dt{ color:var(--muted); }
.specs dd{ margin:0; }
.callout{ border:1px solid var(--line); background:var(--sunk); border-radius:8px; padding:9px 12px; font-size:14px; }
.callout h4{ margin-bottom:2px; }
.callout.fact{ border-color:var(--accent); background:var(--accent-soft); }
.safety{ border-color:var(--hazard); padding-top:17px; position:relative; overflow:hidden; }
.safety::before{ content:""; position:absolute; inset-inline:0; top:0; height:6px; background:repeating-linear-gradient(-45deg, var(--hazard) 0 9px, var(--hazard-ink) 9px 18px); }
.safety strong{ display:block; }
.chain{ list-style:none; padding:0 !important; counter-reset:c; gap:0 !important; }
.chain li{ counter-increment:c; display:grid; grid-template-columns:26px minmax(0,1fr); gap:10px; padding-block:5px; position:relative; transition:opacity .4s; }
.chain li::before{ content:counter(c, persian); width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--surface); border:1px solid var(--line); font-size:12.5px; font-weight:700; transition:background-color .4s, border-color .4s; }
.chain li:not(:last-child)::after{ content:""; position:absolute; inset-inline-start:12.5px; top:33px; bottom:-4px; width:1px; background:var(--line); }
.chain li.todo{ opacity:.4; }
.chain li.done::before{ background:var(--warn-soft); border-color:var(--warn); }
.chain li.now::before{ background:var(--bad); border-color:var(--bad); color:var(--on-bad); }
.chain li.now span{ font-weight:700; }
.actions{ display:flex; flex-wrap:wrap; gap:8px; }
.btn{ border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); border-radius:8px; padding:5px 14px; cursor:pointer; font-weight:700; font-size:14px; text-decoration:none; }
.btn.ghost{ background:transparent; color:var(--accent); }
.btn.danger{ background:var(--bad); border-color:var(--bad); color:var(--on-bad); }
.d-nav{ display:flex; justify-content:space-between; gap:8px; border-top:1px solid var(--line); padding-top:10px; }
.linkish{ border:0; background:none; color:var(--accent); cursor:pointer; padding:0; font-size:13.5px; text-align:start; }
.scen{ display:grid; gap:6px; }
.scen button{ text-align:start; border:1px solid var(--line); background:var(--sunk); border-radius:8px; padding:6px 11px; cursor:pointer; display:grid; font-size:14px; font-weight:700; line-height:1.6; }
.scen button span{ font-size:12.5px; color:var(--muted); font-weight:400; }
.scen button:hover{ border-color:var(--accent); }
.copied{ font-size:12.5px; color:var(--ok); }

.qtype{ display:flex; flex-wrap:wrap; gap:6px; }
.opts{ display:grid; gap:6px; }
.opt{ text-align:start; border:1px solid var(--line); background:var(--sunk); border-radius:8px; padding:7px 12px; cursor:pointer; font-size:14.5px; }
.opt:hover:not(:disabled){ border-color:var(--accent); }
.opt.right{ background:var(--ok-soft); border-color:var(--ok); font-weight:700; }
.opt.wrong{ background:var(--bad-soft); border-color:var(--bad); }
.opt:disabled{ cursor:default; }
.score{ font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.verdict-ok{ color:var(--ok); }
.verdict-bad{ color:var(--bad); }

.app-notes{ font-size:12.5px; color:var(--muted); display:grid; gap:4px; max-width:120ch; }
.app-notes p{ margin:0; }

@media (max-width:1280px){
  .work{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); height:auto; }
  .center{ grid-column:1 / -1; order:-1; }
  .stage{ height:62vh; min-height:420px; flex:none; }
  .parts,.detail{ max-height:700px; }
  .kpis{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:760px){
  .work{ grid-template-columns:minmax(0,1fr); }
  .stage{ height:58vh; min-height:360px; }
  .kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .detail{ order:0; max-height:none; }
  .parts{ order:1; max-height:440px; }
  .hint{ display:none; }
  .slider{ max-width:none; }
}

/* showcase mode: only the live model, used as the landing-page preview */
html.showcase, html.showcase body{ height:100%; overflow:hidden; background:var(--scene); }
html.showcase .site-top, html.showcase .top, html.showcase .parts, html.showcase .detail, html.showcase .system,
html.showcase .toolbar, html.showcase .hint, html.showcase .app-notes, html.showcase .skip, html.showcase .site-foot{ display:none !important; }
html.showcase .app{ padding:0; height:100%; max-width:none; display:block; }
html.showcase .work{ display:block; height:100%; }
html.showcase .center{ height:100%; }
html.showcase .stage{ height:100%; border:0; border-radius:0; min-height:0; }
html.showcase .viewport canvas{ touch-action:auto; cursor:default; }
html.showcase .badge{ display:none; }