.garage-band { background: #10261a; background-image: linear-gradient(rgba(240, 194, 59, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(240, 194, 59, .05) 1px, transparent 1px); background-size: 32px 32px; color: #e7efe6; }
.garage-wrap { padding-block: 22px 44px; }
.garage-head h1 { margin-top: 6px; color: #fff; font-size: clamp(2.6rem, 4.4vw, 3.6rem); line-height: 1; }
.garage-head p { max-width: 62ch; margin: 10px 0 0; color: #bcd0bf; font-size: 16px; }
.garage-head .machine-crumbs { color: #bcd0bf; margin-bottom: 14px; }
.garage-head .machine-crumbs a { color: #e7efe6; }
.garage-app { margin-top: 22px; }
.g-nojs, .g-loading { color: #bcd0bf; }

.g-shell { --g-line: rgba(231, 239, 230, .18); --g-panel: rgba(8, 24, 15, .62); --g-ink: #e7efe6; --g-muted: #a9c0ad; --g-yellow: #f0c23b; }
.g-shell button, .g-dialog button, .g-dialog input, .g-dialog select, .g-dialog textarea { font: inherit; }
.g-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; padding-bottom: 14px; }
.g-save { margin: 0; color: var(--g-muted); font-size: 13px; }
.g-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.g-actions button, .g-btn, .g-add { min-height: 40px; padding: 0 16px; border: 1px solid var(--g-line); border-radius: 8px; background: transparent; color: var(--g-ink); font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color .15s, border-color .15s; }
.g-actions button:hover, .g-btn:hover, .g-add:hover { border-color: var(--g-yellow); background: rgba(240, 194, 59, .1); color: #fff; }
.g-actions button:disabled { opacity: .45; cursor: not-allowed; }
.g-primary { border-color: var(--g-yellow); background: var(--g-yellow); color: #10261a; font-weight: 600; }
.g-primary:hover { background: #f6d160; color: #10261a; }
.g-shell :focus-visible { outline: 3px solid var(--g-yellow); outline-offset: 3px; }

.g-body { display: grid; grid-template-columns: 230px minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
.g-rail, .g-stage, .g-panel { border: 1px solid var(--g-line); border-radius: 12px; background: var(--g-panel); }
.g-rail { padding: 14px; }
.g-rail h3, .g-title h3 { color: #fff; font-size: 1.5rem; }
.g-machines { display: grid; gap: 8px; margin: 10px 0 12px; }
.g-machine { display: block; width: 100%; padding: 10px 12px; border: 1px solid var(--g-line); border-radius: 8px; background: transparent; color: var(--g-ink); text-align: left; cursor: pointer; }
.g-machine strong { display: block; font-size: 15px; }
.g-machine span { display: block; margin-top: 2px; color: var(--g-muted); font-size: 12px; }
.g-machine.is-active { border-color: var(--g-yellow); background: rgba(240, 194, 59, .12); }
.g-sample, .g-alert { display: inline-block; margin-top: 6px; margin-right: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 600; }
.g-sample { background: #faf5e9; color: #755316; }
.g-alert { background: #e8826f; color: #2a0f0a; }
.g-add { width: 100%; border-style: dashed; }

.g-stage { padding: 16px; }
.g-title { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 20px; }
.g-title p { margin: 4px 0 0; color: var(--g-muted); font-size: 14px; }
.g-title a { color: var(--g-yellow); }
.g-stats { display: flex; gap: 20px; margin: 0; }
.g-stats dt { color: var(--g-muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.g-stats dd { margin: 2px 0 0; color: #fff; font: 600 1.6rem/1 var(--display); font-variant-numeric: tabular-nums; }
.g-art { position: relative; margin-top: 8px; }
.g-art svg { display: block; width: 100%; height: auto; }
.g-noart { margin-top: 12px; padding: 24px; border: 1px dashed var(--g-line); border-radius: 10px; color: var(--g-muted); }
.g-spot { position: absolute; z-index: 2; display: flex; align-items: center; gap: 6px; transform: translate(-50%, -50%); padding: 0; border: 0; background: transparent; color: var(--g-ink); cursor: pointer; }
.g-spot span { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 2px dashed var(--g-yellow); border-radius: 50%; background: rgba(16, 38, 26, .85); color: var(--g-yellow); font: 600 20px/1 var(--body); transition: transform .15s var(--ease), background-color .15s; }
.g-spot b { display: none; padding: 3px 8px; border-radius: 6px; background: rgba(16, 38, 26, .92); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }
.g-spot:hover span, .g-spot.is-selected span { transform: scale(1.12); background: rgba(240, 194, 59, .25); }
.g-spot:hover b, .g-spot:focus-visible b, .g-spot.is-selected b { display: block; }
.g-spot-ok span { border: 3px solid #7ac98d; background: rgba(122, 201, 141, .22); }
.g-spot-warn span { border: 3px solid #f0c23b; background: rgba(240, 194, 59, .24); }
.g-spot-unknown span { border: 3px dashed #cfd9d1; background: rgba(207, 217, 209, .18); }
.g-spot-bad span { border: 3px solid #e8826f; background: rgba(232, 130, 111, .26); }
.g-slotlist { display: grid; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.g-slotrow { display: grid; width: 100%; grid-template-columns: 130px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--g-line); border-radius: 8px; background: transparent; color: var(--g-ink); text-align: left; cursor: pointer; }
.g-slotrow span { color: var(--g-muted); font-size: 13px; }
.g-slotrow em { color: var(--g-muted); font-style: normal; }
.g-slotrow:hover, .g-slotrow.is-selected { border-color: var(--g-yellow); background: rgba(240, 194, 59, .08); }
.g-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.g-ok { background: #7ac98d; color: #0b2515; }
.g-warn { background: #f0c23b; color: #2d2204; }
.g-unknown { background: transparent; color: #cfd9d1; box-shadow: inset 0 0 0 1px #cfd9d1; }
.g-bad { background: #e8826f; color: #2a0f0a; }

.g-panel { padding: 0 0 16px; }
.g-tabs { display: flex; border-bottom: 1px solid var(--g-line); }
.g-tabs button { flex: 1; min-height: 46px; padding: 0 6px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--g-muted); font-size: 13px; font-weight: 600; cursor: pointer; }
.g-tabs button.is-active { border-bottom-color: var(--g-yellow); color: #fff; }
.g-tabbody { display: grid; gap: 12px; padding: 16px; }
.g-hint, .g-fine { margin: 0; color: var(--g-muted); font-size: 13px; line-height: 1.5; }
.g-sub { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--g-line); color: #fff; font-size: 1.2rem; }
.g-slot-detail { padding: 12px 14px; border: 1px solid var(--g-yellow); border-radius: 10px; background: rgba(240, 194, 59, .07); }
.g-slot-detail h4 { margin: 0; color: #fff; font-size: 1.3rem; }
.g-sub { margin-bottom: 0; }
.g-slot-detail p { margin: 6px 0; }
.g-reasons { margin: 8px 0; padding: 0; list-style: none; }
.g-reasons li { margin: 4px 0; padding-left: 14px; border-left: 3px solid var(--g-line); font-size: 13px; line-height: 1.45; }
.g-r-ok { border-color: #7ac98d !important; }
.g-r-warn { border-color: #f0c23b !important; }
.g-r-bad { border-color: #e8826f !important; }
.g-r-unknown { border-color: #cfd9d1 !important; }
.g-pick { margin: 8px 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.g-pick button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--g-line); border-radius: 8px; background: transparent; color: var(--g-ink); text-align: left; cursor: pointer; }
.g-pick small, .g-item small { display: block; color: var(--g-muted); font-size: 12px; }
.g-pick button:hover { border-color: var(--g-yellow); }
.g-items, .g-plans, .g-timeline { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.g-item > div:first-child, .g-plan > div:first-child { min-width: 0; }
.g-item, .g-plan { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border: 1px solid var(--g-line); border-radius: 8px; }
.g-item-actions { display: flex; gap: 4px; }
.g-item-actions { flex: 0 0 auto; }
.g-item-actions button, .g-link { white-space: nowrap; padding: 4px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--g-yellow); font-size: 12px; cursor: pointer; }
.g-item-actions button:hover, .g-link:hover { background: rgba(240, 194, 59, .12); }
.g-plan small { display: block; color: var(--g-muted); font-size: 12px; }
.g-plan-overdue { border-color: #e8826f; background: rgba(232, 130, 111, .12); }
.g-plan-soon { border-color: #f0c23b; }
.g-event { padding: 10px 12px; border: 1px solid var(--g-line); border-left: 3px solid var(--g-yellow); border-radius: 8px; }
.g-event-head { display: flex; gap: 10px; align-items: baseline; }
.g-event time { color: var(--g-muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-event-meta, .g-event-notes { margin: 3px 0 0; color: var(--g-muted); font-size: 12px; }
.g-parts { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.g-parts code { color: var(--g-yellow); font-size: 12px; }
.g-danger { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px; }
.g-danger button { padding: 6px 10px; border: 1px solid var(--g-line); border-radius: 6px; background: transparent; color: var(--g-muted); font-size: 12px; cursor: pointer; }
.g-live { min-height: 1.4em; margin-top: 10px; color: var(--g-yellow); font-size: 13px; }

.g-empty { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: 28px; border: 1px dashed var(--g-line); border-radius: 12px; }
.g-empty-art svg { width: 100%; height: auto; opacity: .5; }
.g-empty h3 { color: #fff; font-size: 2rem; }
.g-empty p { max-width: 52ch; color: var(--g-ink); }
.g-empty-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* dialogs */
.g-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid #0d2216; border-radius: 14px; background: #fbfcf9; color: #202f25; }
.g-dialog::backdrop { background: rgba(8, 20, 13, .7); }
.g-dialog .g-form { display: grid; gap: 12px; padding: 22px 24px; }
.g-dialog h3 { font-size: 1.8rem; }
.g-dialog label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; }
.g-dialog fieldset { display: grid; gap: 8px; margin: 0; padding: 12px; border: 1px solid #d5ded2; border-radius: 8px; }
.g-dialog legend { padding: 0 6px; font-size: 13px; font-weight: 600; }
.g-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.g-part { display: grid; grid-template-columns: 1fr 1.6fr 70px; gap: 6px; }
.g-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.g-dialog .g-btn { border-color: #9daea0; color: #202f25; }
.g-dialog .g-btn:hover { background: #edf2e9; color: #202f25; }
.g-dialog .g-primary { border-color: #245b3b; background: #245b3b; color: #fff; }
.g-dialog .g-primary:hover { background: #173e29; color: #fff; }
.g-results { margin: -6px 0 0; padding: 0; list-style: none; }
.g-results button { width: 100%; padding: 8px 10px; border: 0; border-bottom: 1px solid #d5ded2; background: transparent; text-align: left; cursor: pointer; }
.g-results button:hover { background: #edf2e9; }
.g-panel .g-form { display: grid; gap: 10px; }
.g-panel .g-form label, .g-panel .g-form legend { color: var(--g-ink); font-size: 13px; font-weight: 600; }
.g-panel .g-form label { display: flex; flex-direction: column; gap: 4px; }
.g-panel .g-form input, .g-panel .g-form select { min-height: 40px; background: rgba(255, 255, 255, .06); border-color: var(--g-line); color: #fff; }
.g-panel .g-form option { color: #202f25; }
.g-panel fieldset { margin: 0; padding: 10px 12px; border: 1px solid var(--g-line); border-radius: 8px; }
.g-check { flex-direction: row !important; align-items: center; gap: 8px !important; font-weight: 400 !important; }
.g-check input { width: 18px; min-height: 0; }

#garage-passport { display: none; }

@media (max-width: 1180px) {
  .g-body { grid-template-columns: 200px minmax(0, 1fr); }
  .g-panel { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .g-body { grid-template-columns: minmax(0, 1fr); }
  .g-machines { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .g-empty { grid-template-columns: 1fr; }
  .g-slotrow { grid-template-columns: minmax(0, 1fr) auto; }
  .g-slotrow span { grid-column: 1 / -1; }
  .g-spot b { display: none !important; }
  .g-two, .g-part { grid-template-columns: 1fr; }
}
@media print {
  body.g-printing > *:not(#garage-passport) { display: none !important; }
  body.g-printing #garage-passport { display: block !important; padding: 0; color: #000; background: #fff; }
  .g-pass h1 { font-size: 26pt; }
  .g-pass h2 { margin-top: 16pt; font-size: 14pt; }
  .g-pass table { width: 100%; border-collapse: collapse; font-size: 10pt; }
  .g-pass th, .g-pass td { padding: 4pt 6pt; border-bottom: .5pt solid #999; text-align: left; vertical-align: top; }
  .g-pass-note { margin-top: 18pt; font-size: 9pt; color: #444; }
}