/* rc.18 · Shared TV/F3 parts UI. All overrides stay inside the apps. */
/* Tokens: F3's system typography and neutral palette. TV aliases stay local. */
:is(#b04View, #diagramView.detail-view, #directoryView, #f3App) {
  --ink:#191d20; --muted:#899197; --line:#e3e5e7; --accent:#762533;
  --soft:#f7f7f6; --yellow:#e0b400; --bd:var(--line); --red:var(--accent);
  --parts-hotspot:rgba(174,25,35,.16); --parts-hotspot-hover:rgba(174,25,35,.24);
  --parts-hotspot-selected:rgba(174,25,35,.28); --parts-hotspot-line:#d5a800;
  --parts-hotspot-active-line:#e2b500; --parts-reserve:#8e785a;
  color:var(--ink); font-size:14px; font-weight:400; line-height:1.55; /* rc.18.1: font-family inherited, as in rc.17 */ min-width:0;
}
:is(#b04View, #diagramView.detail-view, #directoryView, #f3App) *,
:is(#b04View, #diagramView.detail-view, #directoryView, #f3App) *::before,
:is(#b04View, #diagramView.detail-view, #directoryView, #f3App) *::after { box-sizing:border-box; }

/* Detail grid and panels. Leave positioning/transforms and fullscreen intact. */
:is(#b04View, #diagramView.detail-view) .layout,
#f3App .detail-grid {
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(360px,1fr);
  gap:22px; align-items:start;
}
:is(#b04View, #diagramView.detail-view) .layout > .card,
#f3App :is(.drawing-panel,.parts-panel) {
  min-width:0; border:1px solid var(--line); border-radius:0; background:#fff; box-shadow:none;
}
:is(#b04View, #diagramView.detail-view) .layout > .card:first-child { position:static; }
:is(#b04View, #diagramView.detail-view) .cardhead,
#f3App .panel-head {
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  height:auto; padding:16px 18px; border-bottom:1px solid var(--line); background:#fff;
}
:is(#b04View, #diagramView.detail-view) :is(.cap,.cap b),
#f3App .panel-head strong { color:var(--ink); font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase; }
:is(#b04View, #diagramView.detail-view) .tiny,
#f3App .panel-head small { display:block; color:var(--muted); font-size:10px; margin-top:4px; }
:is(#b04View, #diagramView.detail-view) .stage:not(:fullscreen):not(.fullscreen) {
  height:750px; min-height:0; max-height:none; background:var(--soft);
}
#f3App #viewport { background:var(--soft); }
:is(#b04View, #diagramView.detail-view) .drawingbottom,
#f3App .drawing-foot { padding:15px 18px; min-height:0; gap:15px; color:var(--muted); font-size:10px; border-top:1px solid var(--line); background:#fff; }
:is(#b04View, #diagramView.detail-view) .controls,
#f3App .zoom-tools { display:flex; align-items:center; gap:5px; flex:none; }
:is(#b04View, #diagramView.detail-view) .zoomread,
#f3App .zoom-tools output { width:auto; min-width:40px; font-size:10px; font-weight:400; color:var(--ink); text-align:center; font-variant-numeric:tabular-nums; }

/* Selected part, including cloned d-selected* elements via their classes. */
:is(#b04View, #diagramView.detail-view) .detailPanel { padding:22px 21px; border-color:var(--line); }
:is(#b04View, #diagramView.detail-view) .detailEyebrow,
#f3App .detail-label { color:#8e98a1; font-size:10px; font-weight:400; letter-spacing:1px; text-transform:uppercase; }
:is(#b04View, #diagramView.detail-view) .detailtop { margin-top:0; flex-wrap:wrap; }
:is(#b04View, #diagramView.detail-view) .detailtop > div { min-width:0; flex:1 1 220px; } /* rc.18.15: larger name wraps beside the state tag instead of pushing it below */
/* rc.18.15: 爆炸图详情 — product name and SKU/OEM code swap sizes (name 24px/600, code 13px/400). Margins unchanged. rc.18.16: TV name moved to .detailName below. */
:is(#b04View, #diagramView.detail-view) .detailSKU,
#f3App .detail-code { font-size:13px; font-weight:400; line-height:1.55; letter-spacing:normal; margin:10px 0; overflow-wrap:anywhere; }
:is(#b04View, #diagramView.detail-view) .detailReference { font-size:13px; font-weight:400; color:var(--ink); line-height:1.55; margin:0 0 14px; overflow-wrap:anywhere; }
/* rc.18.16: TV matches F3 — Chinese name (.detailName) large, English reference (.detailEn) as F3's .detail-en; qty/status stay in .detailReference. */
:is(#b04View, #diagramView.detail-view) .detailName { font-size:24px; font-weight:600; color:var(--ink); line-height:1.25; margin:0 0 3px; overflow-wrap:anywhere; }
:is(#b04View, #diagramView.detail-view) .detailEn { font-size:10px; font-weight:400; color:#89939c; line-height:1.55; margin:0 0 6px; overflow-wrap:anywhere; }
:is(#b04View, #diagramView.detail-view) :is(.detailName,.detailEn):empty { display:none; }
#f3App .detail-name { font-size:24px; font-weight:600; line-height:1.25; overflow-wrap:anywhere; }
:is(#b04View, #diagramView.detail-view) .metrics,
#f3App .detail-values { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:15px 0; }
:is(#b04View, #diagramView.detail-view) .metric,
#f3App .detail-values > div { min-width:0; background:#f7f8f9; padding:12px; border:1px solid #edf0f2; border-radius:4px; }
:is(#b04View, #diagramView.detail-view) .metric .lbl,
#f3App .detail-values small { display:block; font-size:9px; font-weight:400; letter-spacing:.5px; color:#929da6; }
:is(#b04View, #diagramView.detail-view) .metric .val,
#f3App .detail-values strong { display:block; font-size:17px; font-weight:500; color:#46515b; margin-top:5px; overflow-wrap:anywhere; }
:is(#b04View, #diagramView.detail-view) [id$="referenceStock"],
#f3App .detail-values .availability { font-size:12px; }
:is(#b04View, #diagramView.detail-view) .actions,
#f3App .detail-actions { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:8px; margin-top:0; }

/* Shared secondary controls; primary actions use the same geometry. */
:is(#b04View, #diagramView.detail-view, #directoryView, #f3App) :is(.action,.btn,.ctrl,.detail-actions button,[id="copyLink"],.zoom-tools button,.tv-variant-card button,.f3-candidate button,.f3-candidates > button,.mv-shop-add) {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-width:0; height:44px; min-height:44px; padding:8px 13px; margin-bottom:0;
  border:1px solid var(--line); border-radius:0; background:#fff; color:var(--ink);
  font-size:11px; font-weight:400; line-height:1.3; letter-spacing:.3px;
  text-align:center; text-decoration:none; cursor:pointer; touch-action:manipulation;
}
:is(#b04View, #diagramView.detail-view, #directoryView, #f3App) :is(.action,.btn,.ctrl,.detail-actions button,[id="copyLink"],.zoom-tools button,.tv-variant-card button,.f3-candidate button,.f3-candidates > button,.mv-shop-add):hover {
  border-color:#93999d; background:var(--soft); color:var(--ink);
}
:is(#b04View, #diagramView.detail-view, #directoryView, #f3App) :is(.action.main,.btn.primary,button.primary,.mv-shop-add) {
  background:var(--ink); border-color:var(--ink); color:#fff;
}
:is(#b04View, #diagramView.detail-view, #directoryView, #f3App) :is(.action.main,.btn.primary,button.primary,.mv-shop-add):hover {
  background:var(--accent); border-color:var(--accent); color:#fff;
}
:is(#b04View, #diagramView.detail-view, #directoryView, #f3App) :is(button,a,input,select,[tabindex]):focus-visible {
  outline:2px solid var(--accent); outline-offset:3px;
}
:is(#b04View, #diagramView.detail-view, #directoryView, #f3App) :is(button,.mv-shop-add):disabled,
:is(#b04View, #diagramView.detail-view, #directoryView, #f3App) .mv-shop-add[aria-disabled="true"] {
  opacity:.5; cursor:not-allowed; background:var(--soft); color:var(--muted); border-color:var(--line); box-shadow:none;
}
:is(#b04View, #diagramView.detail-view) .controls button,
#f3App .zoom-tools button { min-width:29px; padding:6px 9px; font-size:12px; }

/* Hotspots: SVG TV rectangles and positioned F3 buttons keep their coordinates. */
:is(#b04View, #diagramView.detail-view) g.hotspot > rect.visible {
  fill:var(--parts-hotspot); stroke:var(--parts-hotspot-line); stroke-width:1.5px;
  vector-effect:non-scaling-stroke; rx:0; pointer-events:none;
}
#f3App #drawingStage .hotspot {
  background:var(--parts-hotspot); border:1.5px solid var(--parts-hotspot-line);
  border-radius:0; padding:0; min-width:0; min-height:0;
}
:is(#b04View, #diagramView.detail-view) g.hotspot:hover > rect.visible { fill:var(--parts-hotspot-hover); }
#f3App #drawingStage .hotspot:hover { background:var(--parts-hotspot-hover); }
:is(#b04View, #diagramView.detail-view) g.hotspot.active > rect.visible {
  fill:var(--parts-hotspot-selected); stroke:var(--parts-hotspot-active-line); stroke-width:1.5px;
  filter:drop-shadow(0 0 2px rgba(226,181,0,.15));
}
#f3App #drawingStage .hotspot.selected {
  background:var(--parts-hotspot-selected); border-color:var(--parts-hotspot-active-line);
  box-shadow:0 0 0 2px rgba(226,181,0,.15);
}
:is(#b04View, #diagramView.detail-view) g.hotspot > rect.hit { fill:transparent; stroke:none; pointer-events:all; }
:is(#b04View, #diagramView.detail-view) g.hotspot:focus-visible > rect.visible { stroke:var(--parts-hotspot-active-line); }

/* Same-number OEM candidates. */
:is(#b04View, #diagramView.detail-view) .tv-variant-choices,
#f3App .f3-candidate-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
:is(#b04View, #diagramView.detail-view) .tv-variant-card,
#f3App .f3-candidate { display:flex; flex-direction:column; align-items:stretch; gap:9px; min-width:0; padding:16px; border:1px solid var(--line); border-radius:0; background:#fff; }
:is(#b04View, #diagramView.detail-view) .tv-variant-card.chosen,
#f3App .f3-candidate.chosen { border-color:#77232e; background:#f7f6f4; }
:is(#b04View, #diagramView.detail-view) .tv-variant-card h3 { font-size:14px; font-weight:600; margin:0; overflow-wrap:anywhere; }
:is(#b04View, #diagramView.detail-view) .tv-variant-card :is(p,small,label) { margin:0; font-size:12px; line-height:1.7; overflow-wrap:anywhere; }
:is(#b04View, #diagramView.detail-view) .tv-variant-card small { color:#6d6b67; }
:is(#b04View, #diagramView.detail-view) .tv-variant-card > button,
#f3App .f3-candidate > button { margin-top:auto; width:100%; }

/* Lists retain TV's quantity column, with a shared right-aligned price rail. */
:is(#b04View, #diagramView.detail-view) .item,
#f3App .part-row { min-height:74px; padding:15px 17px; gap:10px; border-bottom:1px solid #eceeef; color:var(--ink); }
:is(#b04View, #diagramView.detail-view) :is(.item,.columns) { grid-template-columns:34px minmax(0,1fr) 28px 91px; }
:is(#b04View, #diagramView.detail-view) .item > span { min-width:0; }
:is(#b04View, #diagramView.detail-view) .item:hover,
#f3App .part-row:hover { background:#fafafa; }
:is(#b04View, #diagramView.detail-view) .item.selected,
#f3App .part-row.selected { background:#fffae7; box-shadow:inset 3px 0 #d8b000; }
:is(#b04View, #diagramView.detail-view) .idx,
#f3App .no-pill { display:grid; place-items:center; width:29px; height:28px; border:1px solid #dde1e4; border-radius:4px; background:transparent; color:var(--ink); font-size:10px; font-weight:600; }
:is(#b04View, #diagramView.detail-view) .selected .idx,
#f3App .selected .no-pill { background:#dcb800; border-color:#dcb800; color:var(--ink); }
:is(#b04View, #diagramView.detail-view) .sku,
#f3App .part-row strong { font-size:12px; font-weight:600; letter-spacing:.3px; overflow-wrap:anywhere; }
:is(#b04View, #diagramView.detail-view) .itemmeta { font-size:10px; color:#929ba4; margin-top:3px; }
:is(#b04View, #diagramView.detail-view) :is(.itemstatus,.columns span:last-child),
#f3App .part-row .price { font-size:11px; text-align:right; color:#606b74; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }

/* Shop bridge: price, availability and asynchronous buy slots. */
:is(#b04View, #diagramView.detail-view, #directoryView, #f3App) .mv-shop-price { font-variant-numeric:tabular-nums; }
:is(#b04View, #diagramView.detail-view, #directoryView, #f3App) .mv-shop-price.is-instock { color:var(--ink); }
:is(#b04View, #diagramView.detail-view, #directoryView, #f3App) .mv-shop-price del { color:var(--muted); text-decoration:line-through; font-weight:400; }
:is(#b04View, #diagramView.detail-view, #directoryView, #f3App) .mv-shop-stock.is-instock { color:#347052; }
:is(#b04View, #diagramView.detail-view, #directoryView, #f3App) :is(.mv-shop-price,.mv-shop-stock).is-reserve { color:var(--parts-reserve); }
:is(#b04View, #diagramView.detail-view, #directoryView, #f3App) :is(.mv-shop-buy,.mv-shop-buy-slot) { display:block; min-width:0; }
:is(#b04View, #diagramView.detail-view, #directoryView, #f3App) .mv-shop-add { width:100%; }
:is(#b04View, #diagramView.detail-view, #directoryView, #f3App) :is(.mv-shop-buy,.mv-shop-buy-slot):empty,
:is(#b04View, #diagramView.detail-view) .mv-shop-buy-slot:has(> .mv-shop-buy:empty) { display:none; }
:is(#b04View, #diagramView.detail-view) .actions:not(:has(.mv-shop-add)),
#f3App .detail-actions:not(:has(.mv-shop-add)) { grid-template-columns:minmax(0,1fr); }

/* rc.18.17: 「↑ 返回爆炸图」 in the part detail panel — MV red, clear gap above the selected-part details. */
:is(#b04View, #diagramView.detail-view) .back-drawing.btn { background:var(--accent); border-color:var(--accent); color:#fff; margin:0 0 20px; }
:is(#b04View, #diagramView.detail-view) .back-drawing.btn:hover,
:is(#b04View, #diagramView.detail-view) .back-drawing.btn:active { background:#591620; border-color:#591620; color:#fff; }

/* Responsive sizes follow F3; no clipping of the draggable drawing surface. */
@media (min-width:1001px) {
  #f3App .detail-grid:has(.f3-candidates[data-mode="complex"]) { grid-template-columns:minmax(0,1fr) minmax(420px,1.3fr); }
}
@media (min-width:1550px) {
  :is(#b04View, #diagramView.detail-view) .stage:not(:fullscreen):not(.fullscreen) { height:850px; }
}
@media (min-width:761px) and (max-width:1050px) {
  :is(#b04View, #diagramView.detail-view) .layout,
  #f3App .detail-grid { grid-template-columns:minmax(0,1.1fr) minmax(340px,1fr); gap:15px; }
  :is(#b04View, #diagramView.detail-view) .stage:not(:fullscreen):not(.fullscreen) { height:630px; }
  :is(#b04View, #diagramView.detail-view) .cardhead { flex-wrap:wrap; }
}
@media (max-width:760px) {
  :is(#b04View, #diagramView.detail-view, #directoryView, #f3App) { max-width:100%; padding-inline:16px; }
  :is(#b04View, #diagramView.detail-view) .layout,
  #f3App .detail-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
  #f3App .drawing-panel { margin-bottom:0; }
  /* Preserve F3's explicit list/diagram tab visibility. */
  #f3App #diagramView[data-mobile-view="list"] .detail-grid { display:none; }
  :is(#b04View, #diagramView.detail-view) .stage:not(:fullscreen):not(.fullscreen) { height:465px; }
  :is(#b04View, #diagramView.detail-view) .cardhead,
  #f3App .panel-head { padding:13px 12px; flex-wrap:wrap; }
  :is(#b04View, #diagramView.detail-view) .cardhead > div:first-child { min-width:0; flex:1 1 100px; }
  :is(#b04View, #diagramView.detail-view) .tiny { overflow-wrap:anywhere; }
  :is(#b04View, #diagramView.detail-view) .detailPanel { padding:21px 16px; }
  :is(#b04View, #diagramView.detail-view) .back-drawing.btn { margin:0 0 18px; }
  :is(#b04View, #diagramView.detail-view) .actions,
  #f3App .detail-actions { grid-template-columns:minmax(0,1fr); }
  :is(#b04View, #diagramView.detail-view) .actions > *,
  #f3App .detail-actions > * { width:100%; min-width:0; }
  :is(#b04View, #diagramView.detail-view) .tv-variant-choices,
  #f3App .f3-candidate-choices { grid-template-columns:minmax(0,1fr); }
  :is(#b04View, #diagramView.detail-view) .item,
  #f3App .part-row { min-height:70px; padding:14px; }
  :is(#b04View, #diagramView.detail-view) :is(.item,.columns) { grid-template-columns:29px minmax(0,1fr) 20px minmax(60px,80px); gap:6px; }
  :is(#b04View, #diagramView.detail-view) :is(.detail-context,.diagram-selector,.intro,.drawingbottom),
  #directoryView :is(.search-row,.section-heading,.pagination) { flex-wrap:wrap; min-width:0; }
  :is(#b04View, #diagramView.detail-view) :is(.diagram-selector select,.tv-variant-tools input),
  #directoryView :is(input,select) { min-width:0; max-width:100%; }
  :is(#b04View, #diagramView.detail-view) .intro h1 { overflow-wrap:anywhere; }
  :is(#b04View, #diagramView.detail-view) .tv-compare-scroll { max-width:100%; }
  #directoryView .search-row > input { flex:1 1 100%; }
  #directoryView .group-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #directoryView :is(.group-card,.result-row) { min-width:0; overflow-wrap:anywhere; }
}