/* ── 윤전기 3D 시스템 뷰 ─────────────────────────────
   팔레트: 잉크 블랙 홀 + 신문지 아이보리 + CMYK 계통색
   ink-black  #131619   패널 #1B2126   경계 #2B333B
   newsprint  #EDE9DC   muted #8B95A0
   C #009FD4  M #D6006E  Y #F2B705  K #3C4046
──────────────────────────────────────────────────── */
:root {
  --ink: #131619;
  --panel: #1B2126;
  --panel-2: #232B32;
  --line: #2B333B;
  --paper: #EDE9DC;
  --muted: #8B95A0;
  --cyan: #009FD4;
  --magenta: #D6006E;
  --yellow: #F2B705;
  --green: #35C46A;
  --red: #E5484D;
  --amber: #F2A314;
  --font: "Apple SD Gothic Neo", Pretendard, "Noto Sans KR", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font);
}

#scene { position: fixed; inset: 0; display: block; }

button { font-family: inherit; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* ── 헤더 ── */
#header {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 18px 22px 0;
  pointer-events: none;
  z-index: 10;
}
.brand { pointer-events: auto; }
.brand-tag {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.28em;
  color: var(--muted);
}
.brand-name {
  font-size: 21px; font-weight: 800; letter-spacing: -0.01em;
  margin-top: 4px;
}
.brand-sub { font-weight: 300; color: var(--muted); }

/* 앱 전환 탭 (3D 뷰어 ↔ 지면견당장치) */
.app-tabs {
  display: flex; gap: 0;
  pointer-events: auto;
  border: 1px solid var(--line); border-radius: 5px;
  overflow: hidden;
  align-self: center;
}
.app-tab {
  background: var(--panel); color: var(--muted);
  border: 0;
  font-size: 12.5px; font-weight: 600;
  padding: 9px 16px;
  display: flex; align-items: center; gap: 6px;
}
.app-tab + .app-tab { border-left: 1px solid var(--line); }
.app-tab:hover { color: var(--paper); }
.app-tab.active { background: var(--panel-2); color: var(--yellow); }
.app-tab-badge {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em;
  color: var(--muted);
  border: 1px solid var(--line); border-radius: 3px;
  padding: 1px 5px;
}
.app-tab.active .app-tab-badge { color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 50%, transparent); }

/* TRC 모드에서 3D 전용 도구 숨김 */
body.trc-mode #btn-overview, body.trc-mode #btn-labels,
body.trc-mode #btn-autorotate, body.trc-mode #btn-xray { display: none; }

.view-tools { display: flex; gap: 6px; pointer-events: auto; }
.tool-btn {
  background: var(--panel); color: var(--paper);
  border: 1px solid var(--line); border-radius: 4px;
  font-size: 12px; padding: 7px 12px;
  transition: background 0.15s, border-color 0.15s;
}
.tool-btn:hover { background: var(--panel-2); }
.tool-btn[aria-pressed="true"] {
  border-color: var(--yellow); color: var(--yellow);
}

/* ── 좌측 계통 패널 ── */
#sections-panel {
  position: fixed; top: 86px; left: 22px;
  width: 252px; max-height: calc(100vh - 220px);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 14px 0 10px;
  z-index: 10;
  display: flex; flex-direction: column;
}
.panel-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  padding: 0 16px 10px;
  border-bottom: 1px solid var(--line);
}
.panel-title-jp { color: var(--muted); font-weight: 400; margin-left: 6px; }

/* 좌측 패널 탭 */
.panel-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
}
.panel-tab {
  flex: 1;
  background: none; border: 0;
  color: var(--muted);
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em;
  padding: 4px 0 12px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.panel-tab:hover { color: var(--paper); }
.panel-tab.active { color: var(--yellow); border-bottom-color: var(--yellow); }

#pane-sections, #pane-troubles {
  display: flex; flex-direction: column;
  min-height: 0; flex: 1;
}
#pane-sections[hidden], #pane-troubles[hidden] { display: none; }

/* 트러블슈팅 검색 */
.ts-search-wrap { padding: 10px 12px 6px; }
#ts-search {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--line); border-radius: 4px;
  color: var(--paper);
  font-family: inherit; font-size: 12.5px;
  padding: 8px 10px;
}
#ts-search:focus { outline: none; border-color: var(--yellow); }
#ts-search::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }

.ts-count {
  font-size: 10.5px; color: var(--muted);
  padding: 0 16px 6px;
}

#trouble-list {
  list-style: none;
  overflow-y: auto; flex: 1;
  padding-bottom: 8px;
}
#trouble-list::-webkit-scrollbar { width: 4px; }
#trouble-list::-webkit-scrollbar-thumb { background: var(--line); }

.ts-item button {
  width: 100%; text-align: left;
  background: none; border: 0;
  color: var(--paper);
  padding: 8px 16px;
  display: flex; gap: 9px; align-items: flex-start;
  transition: background 0.12s;
}
.ts-item button:hover { background: var(--panel-2); }
.ts-item.active button { background: var(--panel-2); }
.ts-mark {
  width: 8px; height: 8px; border-radius: 2px;
  flex-shrink: 0; margin-top: 4px;
}
.ts-symptom { font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.ts-part { display: block; font-size: 10.5px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.ts-item.active .ts-symptom { color: var(--yellow); }

/* 상세 패널: 트러블 관련 */
.ts-detail-causes { margin-top: 12px; }
.ts-block-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.ts-block-title.cause { color: var(--magenta); }
.ts-block-title.action { color: var(--green); }
.ts-cause-item, .ts-action-item {
  font-size: 12.5px; color: color-mix(in srgb, var(--paper) 88%, transparent);
  line-height: 1.6;
  padding: 3px 0 3px 20px; position: relative;
}
.ts-cause-item::before {
  content: ""; position: absolute; left: 5px; top: 11px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--magenta);
}
.ts-action-item { counter-increment: tsstep; }
.ts-actions { counter-reset: tsstep; margin-top: 12px; }
.ts-action-item::before {
  content: counter(tsstep);
  position: absolute; left: 0; top: 4px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--green) 25%, transparent);
  color: var(--green);
  font-size: 9.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ts-source {
  margin-top: 12px;
  font-size: 10.5px; color: var(--muted);
  border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  padding-top: 8px;
}
.ts-est-badge {
  display: inline-block;
  font-size: 9.5px; color: var(--amber);
  border: 1px solid color-mix(in srgb, var(--amber) 50%, transparent);
  border-radius: 3px; padding: 0 5px;
  margin-left: 6px; vertical-align: 1px;
}

/* 부품 상세 → 관련 트러블 */
#detail-troubles { margin-top: 14px; }
.rel-trouble-btn {
  width: 100%; text-align: left;
  background: color-mix(in srgb, var(--panel-2) 80%, transparent);
  border: 1px solid var(--line); border-radius: 4px;
  color: var(--paper);
  font-size: 12px; line-height: 1.45;
  padding: 7px 10px;
  margin-bottom: 5px;
  display: flex; gap: 8px; align-items: baseline;
}
.rel-trouble-btn:hover { border-color: var(--red); }
.rel-trouble-btn .rt-icon { color: var(--red); font-size: 11px; flex-shrink: 0; }

/* 트러블 → 부품 바로가기 */
.ts-goto-part {
  margin-top: 10px;
  background: none;
  border: 1px solid var(--line); border-radius: 4px;
  color: var(--paper); font-size: 12px;
  padding: 7px 12px;
  width: 100%; text-align: center;
}
.ts-goto-part:hover { border-color: var(--yellow); color: var(--yellow); }

#section-list { list-style: none; overflow-y: auto; }
#section-list::-webkit-scrollbar { width: 4px; }
#section-list::-webkit-scrollbar-thumb { background: var(--line); }

.sec-item { border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent); }
.sec-head {
  width: 100%; text-align: left;
  display: flex; align-items: center; gap: 10px;
  background: none; border: 0; color: var(--paper);
  padding: 10px 16px;
  transition: background 0.12s;
}
.sec-head:hover { background: var(--panel-2); }
.sec-item.active .sec-head { background: var(--panel-2); }
.sec-no {
  font-family: var(--mono); font-size: 10px;
  color: var(--muted); width: 20px; flex-shrink: 0;
}
.sec-item.active .sec-no { color: var(--yellow); }
.sec-name { font-size: 13.5px; font-weight: 600; flex: 1; }
.sec-name small { display: block; font-size: 10.5px; color: var(--muted); font-weight: 400; margin-top: 1px; }
.sec-mark { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

.sec-parts { list-style: none; display: none; padding: 2px 0 8px; }
.sec-item.active .sec-parts { display: block; }
.part-btn {
  width: 100%; text-align: left;
  background: none; border: 0; color: var(--muted);
  font-size: 12px; padding: 5px 16px 5px 46px;
  transition: color 0.12s;
}
.part-btn:hover, .part-btn.active { color: var(--paper); }
.part-btn.active { color: var(--yellow); }

.flow-hint {
  font-size: 10.5px; color: var(--muted);
  padding: 10px 16px 4px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 6px;
}
.flow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--paper); flex-shrink: 0;
  animation: flowpulse 2s infinite;
}
@keyframes flowpulse { 50% { opacity: 0.3; } }

/* ── 우측 상세 패널 ── */
#detail-panel {
  position: fixed; top: 86px; right: 22px;
  width: 320px; max-height: calc(100vh - 220px);
  overflow-y: auto;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 18px 20px;
  z-index: 11;
  transform: translateX(24px); opacity: 0;
  pointer-events: none;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
#detail-panel.open {
  transform: none; opacity: 1; pointer-events: auto;
}
#detail-panel::-webkit-scrollbar { width: 4px; }
#detail-panel::-webkit-scrollbar-thumb { background: var(--line); }

#detail-close {
  position: absolute; top: 10px; right: 12px;
  background: none; border: 0; color: var(--muted);
  font-size: 20px; line-height: 1;
}
#detail-close:hover { color: var(--paper); }

.detail-eyebrow {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.22em; margin-bottom: 6px;
}
#detail-name { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
.detail-jp { font-size: 12px; color: var(--muted); margin: 3px 0 12px; }
#detail-role { font-size: 13px; line-height: 1.65; color: color-mix(in srgb, var(--paper) 88%, transparent); }

#detail-specs { margin-top: 14px; }
.spec-row {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 12px; padding: 6px 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.spec-row dt { color: var(--muted); }
.spec-row dd { font-family: var(--mono); font-size: 11.5px; text-align: right; }

#detail-maint { margin-top: 14px; }
.maint-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--amber); margin-bottom: 6px;
}
.maint-item {
  font-size: 12px; color: var(--muted); line-height: 1.6;
  padding-left: 14px; position: relative;
}
.maint-item::before {
  content: ""; position: absolute; left: 2px; top: 8px;
  width: 4px; height: 4px; background: var(--amber);
}

/* ── 하단 운전 콘솔 ── */
#console {
  position: fixed; bottom: 18px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 26px;
  background: linear-gradient(180deg, #242B31, #181D22);
  border: 1px solid var(--line);
  border-bottom-color: #0C0F12;
  border-radius: 10px;
  padding: 14px 26px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
  z-index: 10;
}
.console-group { display: flex; align-items: center; gap: 14px; }
.console-group + .console-group {
  border-left: 1px solid var(--line);
  padding-left: 26px;
}

/* 상태 램프 */
.console-lamps { flex-direction: column; align-items: flex-start; gap: 5px; }
.lamp {
  display: flex; align-items: center; gap: 7px;
  font-size: 10.5px; color: var(--muted); letter-spacing: 0.06em;
}
.lamp-light {
  width: 9px; height: 9px; border-radius: 50%;
  background: #383F46; box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
}
.lamp-light.on.red { background: var(--red); box-shadow: 0 0 8px var(--red); }
.lamp-light.on.amber { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.lamp-light.on.green { background: var(--green); box-shadow: 0 0 8px var(--green); }
.lamp:has(.lamp-light.on) { color: var(--paper); }

/* 누름 버튼 — 실제 조작반 조광 푸시버튼 스타일 */
.push-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: 0;
}
.push-cap {
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid #101316;
  box-shadow: 0 3px 0 #0B0E10, inset 0 2px 4px rgba(255,255,255,0.25), inset 0 -4px 6px rgba(0,0,0,0.35);
  transition: transform 0.06s, box-shadow 0.06s, filter 0.15s;
}
.push-btn.green .push-cap { background: radial-gradient(circle at 35% 30%, #57D98A, #17753C); }
.push-btn.red .push-cap { background: radial-gradient(circle at 35% 30%, #F0787C, #96262A); }
.push-btn.amber .push-cap { background: radial-gradient(circle at 35% 30%, #F7C25B, #A66A08); }
.push-btn:active:not(:disabled) .push-cap {
  transform: translateY(3px);
  box-shadow: 0 0 0 #0B0E10, inset 0 2px 4px rgba(0,0,0,0.4);
}
.push-btn:disabled { cursor: not-allowed; }
.push-btn:disabled .push-cap { filter: grayscale(0.85) brightness(0.55); }
.push-btn.lit .push-cap { filter: brightness(1.25); box-shadow: 0 3px 0 #0B0E10, 0 0 18px currentColor; }
.push-btn.green.lit { color: var(--green); }
.push-btn.amber.lit { color: var(--amber); }
.push-label { font-size: 10.5px; color: var(--muted); letter-spacing: 0.08em; }
.push-btn:not(:disabled) .push-label { color: var(--paper); }

/* 속도 */
.console-speed { flex-direction: column; align-items: stretch; gap: 6px; }
.console-speed label {
  font-size: 10.5px; color: var(--muted); letter-spacing: 0.08em;
}
#speed {
  width: 150px; accent-color: var(--yellow);
}
.speed-readout {
  font-family: var(--mono); font-size: 17px; font-weight: 600;
  display: flex; align-items: baseline; gap: 5px;
}
.speed-readout .unit { font-size: 10px; color: var(--muted); }

/* 부수 카운터 — 기계식 카운터 느낌 */
.console-counter { flex-direction: column; align-items: flex-start; gap: 5px; }
.counter-label { font-size: 10.5px; color: var(--muted); letter-spacing: 0.08em; }
.counter {
  font-family: var(--mono); font-size: 21px; font-weight: 700;
  letter-spacing: 0.14em;
  background: #0C0F11; color: #E8E36A;
  border: 1px solid #060809; border-radius: 3px;
  padding: 3px 10px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.8);
}

/* 줌 버튼 */
#zoom-controls {
  position: fixed; right: 22px; bottom: 110px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 10;
}
#zoom-controls button {
  width: 44px; height: 44px;
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  border: 1px solid var(--line); border-radius: 6px;
  color: var(--paper);
  font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, border-color 0.12s;
}
#zoom-controls button:hover { background: var(--panel-2); border-color: var(--yellow); }
#zoom-controls button:active { transform: translateY(1px); }

/* 조작 힌트 */
#help-chip {
  position: fixed; bottom: 20px; left: 22px;
  font-size: 10.5px; color: var(--muted);
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  border: 1px solid var(--line); border-radius: 20px;
  padding: 6px 13px;
  z-index: 9;
}

/* 3D 라벨 (sprite 대신 HTML 오버레이) */
.label3d {
  position: fixed; z-index: 5;
  transform: translate(-50%, -100%);
  pointer-events: auto; cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--paper);
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  border: 1px solid var(--line);
  border-left: 3px solid var(--yellow);
  padding: 4px 8px;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.label3d:hover { background: var(--panel-2); }
.label3d.hidden { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .flow-dot { animation: none; }
  #detail-panel { transition: none; }
}

@media (max-width: 1100px) {
  #sections-panel { width: 210px; }
  #detail-panel { width: 280px; }
  #console { gap: 16px; padding: 12px 16px; }
  .console-group + .console-group { padding-left: 16px; }
  #help-chip { display: none; }
}

/* Scene controls stay separate from application navigation. */
#visual-tools {
  position: fixed; top: 86px; right: 22px; z-index: 10;
  display: flex; align-items: center; gap: 7px;
  padding: 8px 10px; border: 1px solid #344753; border-radius: 8px;
  background: #101c28e8; backdrop-filter: blur(12px);
}
.visual-caption { font: 10px var(--mono); letter-spacing: .15em; color: #7895a7; margin-right: 5px; }
.cmyk-key { display: flex; gap: 3px; padding: 0 5px; }
.cmyk-key i { width: 5px; height: 16px; background: #00cafa; border-radius: 2px; }
.cmyk-key i:nth-child(2) { background: #ff438e; }
.cmyk-key i:nth-child(3) { background: #ffd24a; }
.cmyk-key i:nth-child(4) { background: #83f2d1; }
#detail-panel { top: 148px; max-height: calc(100vh - 280px); }
body.trc-mode #visual-tools { display: none; }
.brand-tag { color: #7fb3c6; }
#sections-panel, #detail-panel { box-shadow: 0 16px 50px #0004; }
.label3d { border-color: #446172; border-left-color: #76d8ed; border-radius: 4px; box-shadow: 0 4px 16px #0005; }
@media (max-width: 1250px) {
  #header { flex-wrap: wrap; gap: 10px; }
  .brand-name { font-size: 17px; }
  .brand-sub { display: none; }
  .tool-btn { padding: 7px 9px; }
}
@media (max-width: 760px) {
  #header { padding: 12px; }
  .view-tools { width: 100%; }
  #sections-panel { top: 152px; left: 12px; width: 176px; max-height: calc(100vh - 290px); }
  #visual-tools { top: 106px; right: 12px; }
  #detail-panel { top: 152px; right: 12px; width: min(280px, calc(100vw - 210px)); }
  #console { bottom: 10px; padding: 10px; gap: 10px; max-width: calc(100vw - 20px); }
  .console-group + .console-group { padding-left: 10px; }
  .console-counter, .console-lamps { display: none; }
  #speed { width: 110px; }
  .visual-caption, .cmyk-key { display: none; }
}

/* Replacement parts and local-only order prototype */
#btn-parts { color: #9eeada; border-color: #41796d; background: #18332f; }
#detail-replacements { border-top: 1px solid #3a4a51; margin-top: 18px; padding-top: 16px; }
#detail-replacements:empty { display:none; }
.rp-detail-head {display:flex;justify-content:space-between;color:#a3e8da;margin-bottom:10px;}
.rp-detail-item {display:block;width:100%;text-align:left;background:#14242c;border:1px solid #354751;border-radius:6px;padding:10px;margin:6px 0;color:#e0e8ed;cursor:pointer;}
.rp-detail-item span,.rp-detail-item code {display:block;}
.rp-detail-item code {font-size:11px;color:#95b7c4;margin-top:5px;overflow-wrap:anywhere;}
#parts-dialog { margin:auto; width:min(1120px,calc(100vw - 40px));max-height:calc(100dvh - 40px);padding:0;border:1px solid #46616c;border-radius:16px;background:#101b23;color:#e5edf2;box-shadow:0 32px 120px #000b; }
#parts-dialog::backdrop {background:#030a12bb;backdrop-filter:blur(5px);}
#parts-dialog button,#parts-dialog input,#parts-dialog select,#parts-dialog textarea {font:inherit;}
#parts-dialog button {cursor:pointer;}
#parts-dialog button:disabled {opacity:.4;cursor:default;}
#parts-dialog button:focus-visible,#parts-dialog input:focus-visible,#parts-dialog select:focus-visible,#parts-dialog textarea:focus-visible {outline:2px solid #95f1db;outline-offset:3px;}
.rp-header {display:flex;align-items:center;justify-content:space-between;padding:24px 28px 18px;}
.rp-eyebrow {font:10px var(--mono);letter-spacing:.18em;color:#8bc6c5;}
.rp-header h2 {margin:7px 0 0;font-size:25px;}
.rp-close {border:1px solid #40535e;background:transparent;color:#c5d7df;border-radius:50%;width:36px;height:36px;font-size:25px!important;}
.rp-demo {padding:10px 28px;background:#1c302f;color:#a8d6c8;font-size:12px;}
.rp-steps {display:flex;gap:32px;padding:18px 28px;border-bottom:1px solid #30424c;font-size:12px;color:#7c909d;}
.rp-steps .active {color:#9af1dc;font-weight:700;}
.rp-layout {display:grid;grid-template-columns:minmax(0,1fr) 300px;}
.rp-catalog {padding:22px 28px;max-height:60vh;overflow:auto;}
.rp-filter {display:grid;grid-template-columns:1fr 150px;gap:14px;}
.rp-filter label,.rp-field {display:flex;flex-direction:column;gap:7px;color:#b3c5cf;font-size:12px;}
#parts-dialog input,#parts-dialog select,#parts-dialog textarea {background:#0c151d;border:1px solid #40515f;color:#e5edf2;padding:10px;border-radius:6px;min-width:0;}
.rp-result-count {font-size:12px;color:#92a9b8;margin:18px 0 12px;}
.rp-cards {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.rp-card {border:1px solid #344651;background:linear-gradient(135deg,#1c2b35,#14212b);border-radius:10px;padding:16px;display:flex;flex-direction:column;}
.rp-card.selected {border-color:#67b7a4;}
.rp-card-top {display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:10px;color:#98b1bf;}
.rp-badge {background:#21443c;color:#a4e2c8;border-radius:4px;padding:4px 6px;white-space:nowrap;}
.rp-badge.pending {background:#443720;color:#f0cf86;}
.rp-card h3 {font-size:15px;line-height:1.5;margin:16px 0 8px;}
.rp-card code,.rp-review-item code {font:13px var(--mono);color:#a3d3df;display:block;overflow-wrap:anywhere;}
.rp-card p,.rp-muted {font-size:12px;color:#98afbd;line-height:1.7;}
.rp-source {font-size:10px;color:#a7b9c5;margin:auto 0 14px;padding-top:8px;}
.rp-add,.rp-added {background:#203e3b;color:#b0f0dd;border:1px solid #43776b;border-radius:6px;padding:10px;width:100%;font-size:12px!important;}
.rp-cart {background:#0b141c;border-left:1px solid #30424c;padding:22px;max-height:60vh;overflow:auto;}
.rp-cart h3 {margin:0 0 18px;font-size:16px;display:flex;justify-content:space-between;}
.rp-cart h3 span {color:#93e4d0;}
.rp-cart-item {padding:14px 0;border-bottom:1px solid #2c3e49;}
.rp-cart-item strong {font-size:12px;display:block;line-height:1.5;}
.rp-cart-item code {font:10px var(--mono);color:#9cb8c7;display:block;margin:7px 0;overflow-wrap:anywhere;}
.rp-cart-item>div {display:flex;justify-content:space-between;align-items:center;font-size:12px;}
.rp-cart-item input {width:64px;padding:6px!important;}
.rp-cart-item button {border:0;background:transparent;color:#be9e96;font-size:11px!important;}
.rp-total {display:flex;justify-content:space-between;margin:24px 0 12px;font-size:13px;}
.rp-primary {background:#a5ead7;color:#102923;border:0;border-radius:7px;padding:13px 18px;width:100%;font-weight:700!important;}
.rp-link {display:block;background:transparent;color:#a5dcd2;border:0;padding:12px 0;font-size:12px;cursor:pointer;text-align:left;}
.rp-empty {color:#8ea6b5;line-height:1.8;padding:24px 0;font-size:13px;}
.rp-review-item {display:flex;justify-content:space-between;gap:18px;padding:18px 0;border-bottom:1px solid #354650;font-size:14px;}
.rp-review-item code {margin:8px 0;}
.rp-review-item small {color:#93aab8;font-size:11px;}
.rp-field {margin-top:20px;}
.rp-field textarea {min-height:90px;resize:vertical;}
.rp-warning {color:#e3c380;font-size:12px;}
.rp-complete {text-align:center;padding:44px 28px 52px;max-width:620px;margin:auto;}
.rp-complete h3 {font-size:24px;}
.rp-complete p {color:#a1b7c5;font-size:13px;line-height:1.8;}
.rp-complete .rp-primary {max-width:260px;margin-top:20px;}
.rp-check {background:#21443c;color:#a5ead7;width:64px;height:64px;border-radius:50%;margin:auto;display:grid;place-items:center;font-size:30px;}
@media(max-width:760px){#parts-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);}.rp-layout{grid-template-columns:1fr;}.rp-catalog,.rp-cart{max-height:none;overflow:visible;padding:18px;}.rp-cart{border-left:0;border-top:1px solid #30424c;}.rp-cards{grid-template-columns:1fr;}.rp-steps{gap:15px;padding:16px;font-size:11px;}.rp-header{padding:18px;}.rp-header h2{font-size:20px;}.rp-filter{grid-template-columns:1fr;}}

/* Official transparent TKS mark, rendered monochrome for the dark application header. */
.brand { display:flex; align-items:center; gap:16px; min-width:0; }
.brand-logo-link { display:flex; align-items:center; flex-shrink:0; padding:5px 16px 5px 0; border-right:1px solid #40515c; }
.brand-logo { display:block; width:168px; height:auto; filter:brightness(0) invert(1); opacity:.9; }
.brand-logo-link:hover .brand-logo { opacity:1; }
.brand-logo-link:focus-visible { outline:2px solid var(--yellow); outline-offset:5px; border-radius:3px; }
.brand-copy { min-width:0; }
.brand-copy .brand-tag { font-size:9px; letter-spacing:.16em; }
.brand-copy .brand-name { font-size:18px; line-height:1.3; }
@media(max-width:1600px){ .brand-copy .brand-sub {display:none;} }
@media(max-width:1250px){ .brand-logo {width:140px;} .brand {gap:12px;} .brand-logo-link {padding-right:12px;} .brand-copy .brand-name {font-size:16px;} }
@media(max-width:760px){ .brand-logo {width:112px;} .brand {gap:10px;} .brand-logo-link {padding-right:10px;} .brand-copy .brand-tag {font-size:8px;letter-spacing:.08em;} .brand-copy .brand-name {font-size:14px;} }