*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#f0f2f5;
  --card:#fff;
  --text:#1a1a2e;
  --text2:#555;
  --text3:#6b7280;
  --accent:#2563eb;
  --accent2:#1d4ed8;
  --accent-light:#dbeafe;
  --border:#e5e7eb;
  --nav-bg:#0f172a;
  --nav-text:#f1f5f9;
  --badge-bg:#dbeafe;
  --badge-text:#1d4ed8;
  --tag-bg:#f3f4f6;
  --tag-text:#6b7280;
  --radius:8px;
  --shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-hover:0 4px 12px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04)
}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  font-size:14px;
  -webkit-font-smoothing:antialiased
}

/* Navbar */
nav{
  background:var(--nav-bg);
  color:var(--nav-text);
  padding:6px 20px;
  display:flex;
  align-items:center;
  gap:16px;
  position:sticky;
  top:0;
  z-index:100;
  flex-wrap:wrap;
  border-bottom:1px solid rgba(255,255,255,.06)
}
nav .logo a{
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:15px;
  letter-spacing:-.3px
}
nav .logo a::before{content:'\25C6 ';color:var(--accent);font-size:13px}

/* Search bar */
.search-bar{display:flex;justify-content:center;width:100%}
.search-form{display:flex;gap:4px;align-items:center;background:#1e293b;padding:4px 6px;border-radius:10px;border:1px solid #334155}
.search-form input{
  height:30px;padding:0 10px;border:none;border-radius:6px;background:transparent;
  color:#e2e8f0;font-size:13px;outline:none;transition:background .15s
}
.search-form input:focus{background:#253445}
.search-form input::placeholder{color:#64748b}
.s-brand{width:70px;text-transform:uppercase}
.s-model{width:80px;text-transform:uppercase}
.s-part{width:200px}
.s-btn{
  height:30px;padding:0 14px;background:var(--accent);color:#fff;
  border:none;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;
  white-space:nowrap;transition:background .12s
}
.s-btn:hover{background:var(--accent2)}

/* Layout */
.container{max-width:1100px;margin:0 auto;padding:20px}
h1{font-size:22px;font-weight:700;margin-bottom:8px;color:var(--text)}
h1.pn{font-family:monospace;font-size:26px;color:var(--accent)}
h2{font-size:16px;font-weight:600;margin:24px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border);color:var(--text2)}
.pn-mono{font-family:'SF Mono',Monaco,monospace;font-weight:500}

/* Cards */
.card{
  background:var(--card);border-radius:var(--radius);padding:12px 16px;
  margin-bottom:6px;box-shadow:var(--shadow);display:block;
  text-decoration:none;color:inherit;border:1px solid transparent;
  transition:all .15s
}
.card:hover{box-shadow:var(--shadow-hover);border-color:var(--accent);transform:translateY(-1px)}
.card h3{font-size:14px;font-weight:600;margin-bottom:2px}
.card .count{display:inline-block;background:var(--badge-bg);color:var(--badge-text);font-size:11px;padding:1px 8px;border-radius:10px;font-weight:600}
.card .meta{font-size:12px;color:var(--text3);display:block;margin-top:2px}

/* Grids */
.family-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.card-list{display:flex;flex-direction:column;gap:4px}

/* Stats */
.stats-bar{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.stat-box{
  background:var(--card);border-radius:var(--radius);padding:14px 20px;
  box-shadow:var(--shadow);flex:1;min-width:110px;text-align:center
}
.stat-box .num{font-size:24px;font-weight:700;color:var(--accent)}
.stat-box .label{font-size:11px;color:var(--text3);margin-top:2px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}

/* Breadcrumb */
.breadcrumb{font-size:13px;color:var(--text3);margin-bottom:14px;display:flex;flex-wrap:wrap;gap:4px}
.breadcrumb a{color:var(--accent);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb .sep{color:#d1d5db;margin:0 4px}

/* Tables */
table{
  width:100%;border-collapse:separate;border-spacing:0;
  background:var(--card);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);margin-bottom:12px;font-size:13px
}
th{
  background:var(--nav-bg);color:var(--nav-text);padding:8px 12px;
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:600
}
td{padding:8px 12px;border-bottom:1px solid var(--border)}
tr:last-child td{border-bottom:none}
tr:nth-child(even) td{background:#f8fafc}
td a{color:var(--accent);text-decoration:none;font-weight:500}
td a:hover{text-decoration:underline}

/* Part name/sections */
.part-name{font-size:15px;color:var(--text2);margin-bottom:8px;font-weight:500}
.caption{
  background:var(--card);border-radius:var(--radius);padding:12px 16px;
  margin-bottom:12px;font-size:13px;color:var(--text2);box-shadow:var(--shadow);line-height:1.5
}
.tag{
  display:inline-block;background:var(--tag-bg);color:var(--tag-text);
  font-size:11px;padding:2px 8px;border-radius:4px;font-weight:500
}
.info-row{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.info-chip{
  background:var(--badge-bg);color:var(--badge-text);padding:3px 12px;
  border-radius:20px;font-size:12px;font-weight:500
}
.part-section{
  background:var(--card);border-radius:var(--radius);padding:16px 20px;
  margin-bottom:12px;box-shadow:var(--shadow)
}
.part-section h3{font-size:14px;font-weight:600;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border);color:var(--text)}
.model-tag{
  display:inline-block;background:var(--badge-bg);color:var(--badge-text);
  font-size:12px;padding:3px 10px;border-radius:6px;text-decoration:none;
  font-weight:500;font-family:'SF Mono',Monaco,monospace;margin:2px;transition:all .1s
}
.model-tag:hover{background:#bfdbfe;transform:translateY(-1px)}
.snp-range{
  display:inline-block;background:#fef3c7;color:#92400e;font-size:11px;
  padding:2px 8px;border-radius:4px;margin:2px;font-family:monospace
}
.btn{
  display:inline-block;background:var(--accent);color:#fff;padding:6px 16px;
  border-radius:6px;text-decoration:none;font-size:12px;font-weight:500;transition:background .1s
}
.btn:hover{background:var(--accent2)}
.empty{color:var(--text3);font-size:13px;padding:16px 0;text-align:center}

/* System group tree */
.sg-section .sg-header{
  cursor:pointer;display:flex;align-items:center;gap:6px;
  font-size:14px;color:var(--accent);font-weight:600;padding:4px 0;
  margin-bottom:4px;border:none;user-select:none
}
.sg-section .sg-header:hover{color:var(--accent2)}
.sg-section .sg-header .arrow{font-size:10px;width:14px;text-align:center;color:#9ca3af;transition:transform .15s}
.sg-section .sg-header .arrow.open{transform:rotate(90deg)}
.sg-section .sg-body{display:none}
.sg-section .sg-body.open{display:block}
.sg-section .cnt{font-size:11px;color:#9ca3af;font-weight:400}

/* Tree sidebar */
.tree-sidebar{
  position:fixed;left:0;top:52px;width:260px;height:calc(100vh - 52px);
  background:#1e293b;color:#cbd5e1;overflow-y:auto;z-index:99;
  padding:8px 0;font-size:13px;transition:transform .25s ease
}
.tree-sidebar.collapsed{transform:translateX(-252px)}
.tree-toggle{
  position:fixed;left:260px;top:52px;z-index:100;
  background:#1e293b;color:#94a3b8;border:none;
  border-radius:0 6px 6px 0;padding:6px 5px;cursor:pointer;font-size:12px;
  transition:left .25s ease
}
.tree-toggle:hover{color:white}
.tree-toggle.open{left:8px}
.tree-node{
  cursor:pointer;padding:5px 16px;display:flex;align-items:center;gap:6px;
  transition:background .1s;text-decoration:none;color:#cbd5e1;font-size:13px
}
.tree-node:hover{background:#334155;color:white}
.tree-node .arrow{font-size:10px;width:14px;text-align:center;color:#64748b;transition:transform .15s}
.tree-node .arrow.open{transform:rotate(90deg)}
.tree-children{display:none}
.tree-children.open{display:block}
.tree-node .spinner{
  display:inline-block;width:12px;height:12px;border:2px solid #475569;
  border-top-color:white;border-radius:50%;animation:spin .6s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}
.main-with-tree{margin-left:260px;transition:margin-left .25s ease}
.main-with-tree.expanded{margin-left:8px}

/* Images */
.img-gallery{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.img-gallery img{border:1px solid var(--border);border-radius:6px;max-width:100%;height:auto;cursor:pointer;transition:transform .15s;background:#fff}
.img-gallery img:hover{transform:scale(1.02)}
.img-gallery .img-card{background:var(--card);border-radius:8px;padding:6px;box-shadow:var(--shadow)}
.img-gallery .img-card .gcn{font-size:10px;color:var(--text3);text-align:center;margin-top:3px;font-family:monospace}
.img-main{text-align:center;margin:12px 0;background:var(--card);border-radius:8px;padding:12px;box-shadow:var(--shadow)}
.img-main img{max-width:100%;max-height:500px;border-radius:6px;border:1px solid var(--border)}
.img-thumb{width:80px;height:60px;object-fit:cover;border-radius:4px;border:1px solid var(--border);cursor:pointer;transition:all .12s}
.img-thumb:hover{border-color:var(--accent);box-shadow:0 0 0 2px var(--badge-bg)}
.img-thumb.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--badge-bg)}
.img-nav{display:flex;gap:6px;margin:8px 0;flex-wrap:wrap;align-items:center}
.img-nav .thumb-wrap{padding:2px}
.img-loader{display:inline-block;width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite;margin:20px auto}
.img-section{background:var(--card);border-radius:8px;padding:16px 20px;margin-bottom:12px;box-shadow:var(--shadow)}
.img-section h3{font-size:14px;font-weight:600;margin-bottom:8px}

/* Search results */
.search-result-cards{display:flex;flex-direction:column;gap:6px}

/* Responsive */
@media(max-width:768px){
  .tree-sidebar{transform:translateX(-252px)}
  .tree-sidebar.open{transform:translateX(0)}
  .main-with-tree{margin-left:8px}
  .family-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .s-part{width:140px}
}

/* Balloon annotation overlay (CGM drawings): full-resolution image, centred
   in a scrollable card; the annotation layer tracks the image (img-wrap). */
.img-main{position:relative;max-width:100%;overflow:hidden;margin:12px 0;background:var(--card);border-radius:8px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;height:calc(100vh - 280px);min-height:300px}
/* 无可见图（不存在或加载失败）时隐藏图片框与工具条 */
.img-main:not(:has(img:not([style*="display: none"]))):not(:has(canvas.raw-cgm)){display:none}
.img-main:not(:has(img:not([style*="display: none"]))):not(:has(canvas.raw-cgm)) + .zoom-bar{display:none}
.img-wrap{position:relative;width:max-content;margin:auto}
.img-main img,.img-main canvas.raw-cgm{display:block;max-width:none;max-height:none;border-radius:6px;border:1px solid var(--border)}
.anno-layer{position:absolute;inset:0;pointer-events:none}
.anno{position:absolute;transform:translate(-50%,-50%);min-width:18px;height:18px;padding:0 3px;border-radius:9px;background:#fff;border:1.5px solid #d32f2f;color:#d32f2f;font:700 11px/15px sans-serif;text-align:center;pointer-events:auto;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.3);z-index:5}
.anno:hover{background:#d32f2f;color:#fff}

/* Three-column assembly layout: tree | figure | parts */
.asm-layout{display:flex;gap:16px;align-items:flex-start;margin-top:12px}
.asm-figure{flex:1;min-width:0}
/* No-image placeholder (kept visible; figure is never auto-hidden now) */
.no-image{display:flex;align-items:center;justify-content:center;min-height:300px;border:1px dashed #ccc;border-radius:6px;background:#fafafa}
.no-image-text{color:#999;font-size:14px}
.asm-parts{width:370px;flex-shrink:0;position:sticky;top:12px;max-height:calc(100vh - 140px);overflow-y:auto;background:var(--card);border-radius:8px;box-shadow:var(--shadow)}
.asm-parts table{margin:0}
/* Left tree panel */
.tree-panel{width:260px;flex-shrink:0;position:sticky;top:12px;max-height:calc(100vh - 140px);overflow-y:auto;background:var(--card);border-radius:8px;box-shadow:var(--shadow);font-size:12px}
.tree-panel-header{padding:8px 12px;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);border-bottom:1px solid var(--border)}
.tree-body{padding:6px}
.tree-loading,.tree-empty{padding:10px 12px;color:var(--text3);font-size:12px}
.tree-node{user-select:none}
.tree-row{display:flex;align-items:center;gap:4px;padding:3px 6px;border-radius:4px;cursor:pointer;line-height:1.35}
.tree-row:hover{background:var(--badge-bg,#eef2f7)}
.tree-row .arrow{width:12px;color:var(--text3);flex-shrink:0;font-size:10px}
.tree-node.top>.tree-row{font-weight:600}
.tree-node.child.current>.tree-row,.tree-node.asm.current>.tree-row{background:#e8f0fe;color:#1a73e8}
.tree-row.dim{color:var(--text3);cursor:default}
.tree-row.dim .tree-name{opacity:.7}
.tree-row.leaf{cursor:pointer;padding-left:18px}
.leaf-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0;opacity:.7}
.tree-children{display:none;padding-left:12px}
.tree-children.open{display:block}
.tree-badge{background:#e8f0fe;color:#1a73e8;border-radius:8px;font-size:10px;padding:0 6px;line-height:15px;flex-shrink:0;margin-left:auto}
.tree-sub{color:var(--text3);font-size:11px}
.tree-sn{color:var(--text3);font-size:11px;margin-left:5px}
.asm-sub{display:block;color:var(--text3);font-size:11px;margin-top:1px}
.pn-mono{font-family:ui-monospace,Consolas,monospace}
.tree-row .pn-mono{font-size:12px}
@media (max-width:1100px){
  .asm-layout{flex-direction:column}
  .asm-parts{width:auto;max-height:none;position:static}
  .tree-panel{width:auto;max-height:none;position:static}
}

/* Zoom bar under the figure */
.zoom-bar{display:flex;align-items:center;gap:6px;margin:8px 0 0;padding:6px 10px;background:var(--card);border-radius:8px;box-shadow:var(--shadow);width:max-content}
.zoom-bar button{border:1px solid var(--border);background:#fff;border-radius:6px;padding:3px 10px;cursor:pointer;font-size:14px;line-height:1.4}
.zoom-bar button:hover{background:#f0f0f0}
.zoom-pct{min-width:52px;text-align:center;font-size:13px;color:#666}

/* Ref-row highlight (clicking an annotation scrolls + flashes) */
tr.ref-highlight{background:#fff3cd !important;transition:background 0.5s}
tr.ref-highlight td{background:transparent !important}
tr.ref-hover{background:#e8f0fe !important}
tr.ref-hover td{background:transparent !important}
.anno.anno-hover{outline:2px solid #1565c0;outline-offset:2px}

/* Zoom: image fills its wrapping box (box is sized by zoom.js) */
.img-wrap img,.img-wrap canvas{width:100%;height:auto}

/* Zoom: allow the figure box to grow beyond the flex container (scrollable) */
.img-main .img-wrap{flex-shrink:0}

/* Part page image gallery: main drawing on a fixed stage (cannot escape the
   card) + uniform thumb cards: image sits INSIDE its own fixed slot (.t-img,
   contain + overflow hidden — a drawing can never poke out of the card).
   Demo-approved 2026-09-08. */
/* Main drawing stage: viewport-adaptive height (user choice A) — taller on
   big screens (cap 540px), shrinks on small ones; zoom fit recomputes on
   resize. Width always fills the card. */
.img-section .img-main{height:min(58vh, 540px);min-height:320px}
.part-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.part-thumbs .img-thumb{
  display:flex;flex-direction:column;align-items:stretch;
  width:112px;height:auto;   /* height:auto — legacy .img-thumb{height:60px}
                                pinned cards, clipping the 130px slot (bug
                                seen on 7X0368); auto lets content decide */
  padding:5px;text-align:left;text-decoration:none;color:var(--text,#333);
  background:#fff;border:1.5px solid transparent;border-radius:7px;overflow:hidden;
  transition:border-color .12s}
.part-thumbs .img-thumb:hover{border-color:#c3d5f2;box-shadow:none}
.part-thumbs .img-thumb.active{border-color:var(--accent);background:var(--badge-bg,#e8f0fe)}
/* Part page image gallery thumbs: FIXED slot shaped like the majority of
   drawings (2025x2641 portrait ≈ 1:1.3 -> 100x130). object-fit:contain so
   ANY ratio renders whole — nothing is ever cropped; portrait drawings fill
   the slot, wide ones center with light margins. User-approved 2026-09-08. */
.part-thumbs .t-img{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:100%;height:130px;
  background:#f2f4f6;border:1px solid #e2e5e9;border-radius:5px;
  overflow:hidden}                 /* belt & braces — nothing can exceed it */
.part-thumbs .t-img img{
  display:block;width:100%;height:100%;min-width:0;min-height:0;
  object-fit:contain}   /* any aspect ratio: whole drawing, no crop */
.part-thumbs .t-img img.t-err{visibility:hidden}   /* failed load keeps the slot */
.part-thumbs .t-lbl{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  height:26px;font-size:10px;line-height:1.3;color:#5a6066;margin-top:4px;
  word-break:break-word;flex:none}
.part-thumbs .img-thumb.own .t-lbl{color:var(--accent,#1a73e8);font-weight:600}

/* Models expand button */
.model-more-btn{border:1px solid var(--border);background:#fff;border-radius:6px;padding:2px 10px;cursor:pointer;font-size:12px;margin-left:6px;color:var(--text,#333)}
.model-more-btn:hover{background:#f0f0f0}
.asm-group-no{font-size:13px;color:var(--text3);margin:4px 0 8px}
.result-type{display:inline-block;font-size:10px;font-weight:600;padding:1px 6px;border-radius:3px;margin-bottom:2px;text-transform:uppercase}
.asm-result .result-type{background:#e8f0fe;color:#1a73e8}
.part-result .result-type{background:#e6f4ea;color:#137333}
mark{background:#fff3c4;padding:0 2px;border-radius:2px}

/* ===== Search: tag suggestions, badges, model chips, grouped results ===== */
.search-form select.s-brand{border:1px solid var(--border);border-radius:4px;padding:6px 8px;font-size:13px;background:var(--panel);color:var(--text);outline:none}
.s-part-wrap{position:relative;display:inline-block}
.suggest{position:absolute;top:100%;left:0;margin-top:4px;background:var(--panel);border:1px solid var(--border);border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.14);min-width:320px;display:none;z-index:100;overflow:hidden}
.suggest.open{display:block}
.suggest .sg-head{font-size:11px;color:var(--text3);padding:6px 12px 2px;text-transform:uppercase;letter-spacing:.5px}
.suggest .sg-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 12px;cursor:pointer;font-size:13px}
.suggest .sg-item:hover,.suggest .sg-item.active{background:#e8f0fe;color:var(--accent)}
.sg-item .sg-tag{font-weight:600}
.sg-item .sg-cnt{font-size:11px;color:var(--text3);background:var(--badge-bg);padding:1px 7px;border-radius:9px;white-space:nowrap}
.tag-row{display:inline-flex;gap:5px;align-items:center;flex-wrap:wrap;max-width:420px}
.tag-badge{display:inline-flex;align-items:center;gap:6px;background:#e8f0fe;color:var(--accent);border:1px solid #c6d9f8;border-radius:14px;padding:3px 10px;font-weight:600;font-size:13px;text-decoration:none}
.tag-badge:hover{border-color:var(--accent)}
.tag-badge .x{font-weight:700;font-size:14px;color:var(--accent2)}
.tag-badge:hover .x{color:#d93025}
.filter-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0 12px}
.filter-line .fl-label{font-size:13px;color:var(--text3)}
.model-chips{display:flex;gap:6px;flex-wrap:wrap}
.mchip{background:var(--badge-bg);color:var(--badge-text);border:1px solid var(--border);border-radius:12px;padding:2px 10px;font-size:12px;cursor:pointer;text-decoration:none}
.mchip:hover{border-color:var(--accent);color:var(--accent)}
.summary{font-size:13px;color:var(--text3);margin:0 0 14px}
.mgroup{margin-bottom:20px}
.mgroup-head{display:flex;align-items:baseline;gap:8px;font-weight:700;font-size:14px;border-bottom:2px solid var(--accent);padding-bottom:4px;margin-bottom:8px}
.mgroup-head a{color:var(--accent);text-decoration:none}
.mgroup-head .snps{font-size:11px;color:var(--text3);font-weight:400}
.mgroup-head .cnt{margin-left:auto;font-size:11px;color:var(--text3);font-weight:400}
.card .models{font-size:11px;color:var(--text3);margin-left:auto;white-space:nowrap}
.card h3{min-width:120px}

/* ===== Search v2.1: two-column results + pager + soft selected chips ===== */
.mchip.sel{background:#E8F0FE;color:#1A73E8;border-color:#1A73E8;font-weight:600}
.dual-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.dual-cols .col-head{font-weight:700;font-size:14px;border-bottom:2px solid var(--accent);padding-bottom:4px;margin-bottom:8px;display:flex;align-items:baseline;gap:8px}
.dual-cols .col-head .cnt{font-size:12px;color:var(--text3);font-weight:400;margin-left:auto}
.pager{display:flex;gap:5px;flex-wrap:wrap;margin:18px 0 6px;align-items:center}
.pager a{padding:3px 9px;border:1px solid var(--border);border-radius:4px;text-decoration:none;font-size:13px;color:var(--text2)}
.pager a:hover{border-color:var(--accent);color:var(--accent)}
.pager a.cur{background:#E8F0FE;color:#1A73E8;border-color:#1A73E8;font-weight:600}
.pager .pg-ell{color:var(--text3);padding:0 2px}
@media (max-width:760px){.dual-cols{grid-template-columns:1fr}}

/* ===== Search v2.2: collapsible model groups with inner two columns ===== */
.mgroup-head{cursor:pointer;user-select:none}
.fold-arrow{font-size:10px;color:var(--accent);display:inline-block;width:14px;transition:transform .15s}
.fold-arrow.open{transform:rotate(0deg)}
.fold-arrow:not(.open){transform:rotate(-90deg)}
.mgroup-body{display:none}
.mgroup-body.open{display:block;margin-top:8px}
.dual-cols-mini{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.col-head-mini{font-size:12px;font-weight:700;color:var(--text2);border-bottom:1px solid var(--border);padding-bottom:3px;margin-bottom:6px}
@media (max-width:760px){.dual-cols-mini{grid-template-columns:1fr}}

/* ===== Part page: collapsible sections (unified fold-arrow style) ===== */
.part-section-head{cursor:pointer;user-select:none;font-weight:600;font-size:15px;margin:14px 0 6px;display:flex;align-items:center;gap:6px}
.part-section-head:hover{color:var(--accent)}
.part-section-body{display:none}
.part-section-body.open{display:block}
.anno.pn-hit{background:#d93025;color:#fff;border:2px solid #b3261e;font-weight:800;font-size:15px;z-index:30;padding:1px 4px;box-shadow:0 0 8px rgba(217,48,37,.7)}

/* ===== Search bar v3: unified pill on dark nav (user-approved) ===== */
.search-form{background:#1e293b;border:1px solid #334155;border-radius:10px;padding:3px 6px;gap:0;flex-wrap:wrap;box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
.search-form select.s-brand{height:34px;padding:0 12px;border:none;border-left:none;background:transparent;color:#f1f5f9;font-size:13.5px;outline:none;border-radius:0;width:84px;cursor:pointer;appearance:none;-webkit-appearance:none}
.search-form .s-brand option{color:#1a1a2e;background:#fff}
.search-form .s-model{height:34px;padding:0 12px;border:none;background:transparent;color:#f1f5f9;font-size:13.5px;outline:none;border-radius:0;width:150px;border-left:1px solid #334155}
.search-form .s-part{height:34px;padding:0 12px;border:none;background:transparent;color:#f1f5f9;font-size:13.5px;outline:none;border-radius:0;width:270px;border-left:1px solid #334155}
.search-form .s-model::placeholder,.search-form .s-part::placeholder{color:#94a3b8;opacity:1}
.search-form .s-btn{height:34px;padding:0 18px;background:#2563eb;color:#fff;border:none;border-radius:8px;font-weight:600;font-size:13.5px;cursor:pointer;margin-left:4px}
.search-form .s-btn:hover{background:#3b82f6}
.search-form .s-part-wrap{position:relative}
.search-form .suggest{background:#fff;border:1px solid #e5e7eb;color:#1a1a2e;min-width:320px;top:calc(100% + 6px)}
.search-form .tag-row{flex-basis:100%;padding:4px 8px 3px;max-width:none}
.search-form .tag-badge{background:#1e3a5f;color:#93c5fd;border-color:#3b5f8a}
.search-form .tag-badge .x{color:#93c5fd}
.search-form .tag-badge:hover{border-color:#93c5fd}
@media (max-width:760px){.search-form .s-model{width:110px}.search-form .s-part{width:150px}}

/* ===== Part page v2: card layout, stat cards, chip rows (user-approved) ===== */
.part-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:4px}
.part-title-row h1.pn{margin:0;font-size:24px}
.dim-text{color:var(--text3);font-size:13px;font-family:'SF Mono',Monaco,monospace;font-weight:400}
.stat-cards{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 14px}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:7px 18px;min-width:72px;text-align:center;box-shadow:var(--shadow)}
.stat-num{display:block;font-size:16px;font-weight:700;color:var(--accent);line-height:1.3}
.stat-lbl{display:block;font-size:11px;color:var(--text3)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip-row .model-tag{margin:0}
.part-section{background:var(--card);border:1px solid var(--border);border-radius:8px;margin:10px 0;box-shadow:var(--shadow);overflow:hidden;padding:0}
.part-section-head{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;font-weight:600;font-size:14px;color:var(--text);padding:11px 16px;margin:0}
.part-section-head:hover{background:#f8fafc}
.part-section-head:hover{color:var(--accent)}
.part-section-body{display:none}
.part-section-body.open{display:block;padding:4px 16px 14px;border-top:1px solid var(--border);background:#fff}
.part-section-body table{width:100%;border-collapse:collapse;font-size:13px}
.part-section-body th{text-align:left;padding:7px 10px;border-bottom:2px solid var(--border);color:var(--text3);font-size:11px;text-transform:uppercase;letter-spacing:.4px}
.part-section-body td{padding:6px 10px;border-bottom:1px solid #f1f5f9;vertical-align:top}
.part-section-body tr:hover td{background:#E8F0FE}
.part-section-body td .tag{background:#E8F0FE;color:#1A73E8;font-family:'SF Mono',Monaco,monospace;font-size:12px;font-weight:600;padding:1px 8px;border-radius:4px}
.part-section-body td.pn a{color:var(--text);text-decoration:none}
.part-section-body td.pn a:hover{color:var(--accent)}

/* ===== Light theme v4: nav + search pill + tree sidebar (user feedback) ===== */
nav{background:#fff;color:var(--text);border-bottom:1px solid var(--border);box-shadow:0 1px 2px rgba(0,0,0,.04)}
nav .logo a{color:#1a1a2e}
.search-form{background:#f8fafc;border:1px solid #d1d5db;box-shadow:none}
.search-form select.s-brand{color:#1a1a2e}
.search-form select.s-brand option{color:#1a1a2e;background:#fff}
.search-form .s-model,.search-form .s-part{color:#1a1a2e;border-left:1px solid #e5e7eb}
.search-form .s-model::placeholder,.search-form .s-part::placeholder{color:#9aa4af}
.search-form .tag-badge{background:#E8F0FE;color:#1A73E8;border-color:#c6dafc}
.search-form .tag-badge .x{color:#1A73E8}
.tree-sidebar{background:#fff;color:var(--text2);border-right:1px solid var(--border)}
.tree-sidebar .tree-node{color:var(--text2)}
.tree-sidebar .tree-node:hover{background:#E8F0FE;color:#1A73E8}
.tree-sidebar .tree-node .arrow{color:#9aa4af}
.tree-toggle{background:#fff;color:#94a3b8;border:1px solid var(--border);border-left:none}
.tree-toggle:hover{color:var(--accent)}
.tree-sidebar .tree-children{border-left:1px solid #eef2f7;margin-left:14px}

/* ===== Search bar v5: full-width single-row pill, no logo (user-approved) ===== */
nav{padding:6px 16px;flex-wrap:nowrap}
nav .search-bar{width:100%}
.search-form{width:100%;max-width:none;flex-wrap:wrap;gap:0}
.search-form select.s-brand{width:90px}
.search-form .s-model{width:200px;min-width:110px}
.search-form .s-part{width:auto;flex:1 1 auto;min-width:140px}
.search-form .s-part-wrap{flex:1 1 140px;min-width:140px;display:flex}
.search-form .s-part-wrap .s-part{flex:1 1 auto;width:100%;min-width:0}
.search-form .s-btn{padding:0 26px;margin-left:4px;white-space:nowrap}
.search-form .tag-row{display:none;flex-basis:100%;padding:0;gap:6px;align-items:center}
.search-form .tag-row.has-badges{display:flex;padding:6px 6px 4px}
.tree-sidebar{top:46px;height:calc(100vh - 46px)}
.tree-toggle{top:46px}
@media (max-width:760px){.search-form .s-model{width:110px}.search-form .s-part{min-width:90px}}

/* ===== Search bar v6: compact centered pill (user feedback) ===== */
nav .search-bar{display:flex;justify-content:center;width:100%}
.search-form{flex:0 1 760px;width:auto;max-width:760px;border-radius:12px;padding:0;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.search-form select.s-brand{width:96px}
.search-form .s-model{width:220px;min-width:120px;border-left:1px solid #cbd5e1}
.search-form .s-part{border-left:1px solid #cbd5e1}
.search-form .s-part-wrap{flex:1 1 200px;min-width:160px}
.search-form .s-btn{margin:3px 4px;border-radius:8px}
.search-form .tag-row{border-top:1px solid #e5e7eb;background:#fff}
.search-form .tag-row.has-badges{display:flex;padding:5px 10px}
.search-form .tag-badge{background:#fff;color:#1A73E8;border:1px solid #c6dafc;border-radius:999px;font-size:12px;padding:2px 10px}
.search-form .tag-badge .x{color:#94a3b8}
.search-form .tag-badge:hover{border-color:#1A73E8}

/* ===== Search bar v7: rounded inner cells inside outer pill (user-approved) ===== */
.search-form{background:#fff;border:1px solid #d1d5db;border-radius:12px;padding:4px;gap:4px;overflow:visible;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.search-form select.s-brand,.search-form .s-model,.search-form .s-part{background:#f8fafc;border:1px solid #e5e7eb;border-radius:8px;height:34px}
.search-form select.s-brand{border-radius:8px;padding:0 10px}
.search-form .s-model,.search-form .s-part{border-left:1px solid #e5e7eb}
.search-form .s-btn{margin:0;border-radius:8px}
.search-form .s-model:hover,.search-form .s-part:hover,.search-form select.s-brand:hover{border-color:#cbd5e1}
.search-form .s-model:focus,.search-form .s-part:focus{border-color:#1A73E8;background:#fff;box-shadow:0 0 0 2px rgba(26,115,232,.15)}
.search-form .tag-row{border-top:none;background:transparent}
.search-form .tag-row.has-badges{display:flex;padding:2px 6px 0;gap:6px}

/* Assembly part-row click-to-expand (lazy part info) */
tr.part-row { cursor: pointer; }
tr.part-info-row td.part-info-cell {
  background: var(--bg2, #1e293b);
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text3, #94a3b8);
}
.part-info-label { font-weight: 600; margin-right: 4px; color: var(--text2, #cbd5e1); }
.part-info-name { margin: 2px 0; font-size: 12px; }
tr.part-info-row a.model-tag { font-size: 12px; }

/* ---- Part info: row buttons + expand card (2026-09-04) ---- */
.row-btns{display:inline-flex;align-items:center;gap:4px;margin-left:8px;vertical-align:middle}
.btn-ic{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:4px;border:1px solid var(--bg3,#27364b);background:transparent;color:var(--text3,#94a3b8);cursor:pointer;font-size:12px;line-height:1;padding:0;transition:all .12s}
.btn-ic:hover{color:var(--accent,#38bdf8);border-color:var(--accent,#38bdf8)}
.btn-ic.active{color:#0f172a;background:var(--accent,#38bdf8);border-color:var(--accent,#38bdf8)}
.btn-copy{font-size:10px}
.btn-info{font-size:12px;font-weight:700}
tr.part-info-row td.part-info-cell{background:#16233c;padding:0}
.part-info-card{padding:10px 14px;font-size:13px;border-left:3px solid var(--accent,#38bdf8)}
.part-info-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.part-info-head .pn{font-weight:700;font-size:14px;color:var(--text,#e2e8f0)}
.part-info-head .name{color:var(--text2,#cbd5e1);margin-left:8px}
.part-info-head a{color:var(--accent,#38bdf8);text-decoration:none;font-size:12px}
.part-info-head a:hover{text-decoration:underline}
.kv-row{display:flex;flex-wrap:wrap;gap:8px 24px;margin-bottom:8px}
.kv{display:flex;align-items:baseline;gap:6px}
.kv .k{color:var(--text3,#94a3b8);font-size:12px;text-transform:uppercase;letter-spacing:.4px}
.kv .v{color:var(--text,#e2e8f0);font-weight:600}
.kv .v small{color:var(--text3,#94a3b8);font-weight:400;margin-left:4px}
.badge{display:inline-block;border-radius:4px;padding:1px 8px;font-size:12px;font-weight:600}
.badge.npr{background:rgba(251,191,36,.15);color:var(--amber,#fbbf24);border:1px solid rgba(251,191,36,.4)}
.chip{background:var(--chipbg,#334155);border-radius:5px;padding:2px 10px;font-size:12.5px;color:var(--text2,#cbd5e1);text-decoration:none;border:1px solid transparent;cursor:pointer}
a.chip:hover{color:var(--accent,#38bdf8);border-color:var(--accent,#38bdf8);text-decoration:none}
.chip .d{color:var(--text3,#94a3b8);margin-left:5px;font-size:12px}
.sec-label{color:var(--text3,#94a3b8);font-size:12px;text-transform:uppercase;letter-spacing:.4px;margin:8px 0 2px}
.more{color:var(--text3,#94a3b8);font-size:12px}
.pi-card{background:var(--bg2,#1e293b);border:1px solid var(--bg3,#27364b);border-radius:10px;overflow:hidden;max-width:560px}
.pi-head{padding:9px 14px;background:var(--bg3,#27364b);font-weight:600;font-size:13px;display:flex;justify-content:space-between;align-items:center}
.pi-head .fold{color:var(--text3,#94a3b8);font-size:11px;cursor:pointer}
.pi-body{padding:12px 14px;font-size:13px}
.pi-kv{display:grid;grid-template-columns:110px 1fr;row-gap:7px;margin-bottom:10px}
.pi-kv .k{color:var(--text3,#94a3b8);font-size:12px;text-transform:uppercase;letter-spacing:.4px;padding-top:1px}
.pi-kv .v{color:var(--text,#e2e8f0);font-weight:600}
.pi-kv .v small{color:var(--text3,#94a3b8);font-weight:400}

/* pn-link: part number acts as expand trigger (click, not navigation).
   Class-only selector (2026-09-21): the cell renders an <a href="/part/...">
   for crawlers; JS intercepts the click and expands instead. */
.pn-link{color:var(--accent,#38bdf8);cursor:pointer;text-decoration:none}
.pn-link:hover{text-decoration:underline}
.pn-link.open{color:var(--green,#4ade80)}
td.copy-cell{text-align:right;white-space:nowrap}

/* empty-state note inside expand/part-info cards */
.empty-note{color:var(--text3,#94a3b8);font-size:12px;font-style:italic;padding:2px 0}

/* SNP leaf in the Families sidebar: direct link to its drawings */
.tree-sidebar a.tree-node.snp-leaf{color:#1A73E8;font-weight:500;padding-left:24px}
.tree-sidebar a.tree-node.snp-leaf:hover{color:#1A73E8;background:#E8F0FE;text-decoration:none}

/* ---- Part page "Part Information" card: light, demo-approved 2026-09-08 ----
   (overrides the dark .pi-card used by the dark theme; scoped to .pi-card so
   assembly expand-cards (.part-info-card) keep their dark styling) */
.pi-card{background:#fff;border-left:4px solid #1A73E8;border-radius:10px;
        box-shadow:0 1px 3px rgba(0,0,0,.08);padding:14px 18px;margin-bottom:12px;
        overflow:visible;max-width:none}
.pi-card .pi-head{padding:0 0 10px;background:none;font-weight:700;font-size:13.5px;
                  color:#222;display:flex;justify-content:space-between;align-items:center}
.pi-card .pi-head .fold{color:#8a9199;font-size:10px;cursor:pointer}
.pi-card .pi-body{padding:0;font-size:13px;color:#222}
.pi-card .pi-kv{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;margin-bottom:6px}
.pi-card .pi-kv .k{color:#8a9199;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.4px;padding-top:2px}
.pi-card .pi-kv .v{color:#222;font-weight:700;font-size:15px}
.pi-card .pi-kv .v small{color:#8a9199;font-weight:400;font-size:11px;margin-left:4px}
.pi-card .sec-label{color:#8a9199;font-size:11px;font-weight:700;text-transform:uppercase;
                    letter-spacing:.4px;margin:10px 0 4px}
.pi-card .chip-row{display:flex;flex-wrap:wrap;gap:6px}
.pi-card a.chip{display:inline-flex;flex-direction:column;background:#fff;color:#1A73E8;
                border:1px solid #dde1e6;border-radius:6px;padding:3px 10px;
                font-weight:700;font-size:12px;text-decoration:none;cursor:pointer}
.pi-card a.chip:hover{border-color:#1A73E8;color:#1A73E8;text-decoration:none}
.pi-card .chip .d{font-weight:400;font-size:10px;color:#8a9199;margin-left:0}
.pi-card .more{color:#8a9199;font-size:12px;font-weight:400}