#app { display: grid; grid-template-rows: var(--header-h) 1fr; height: 100vh; }

/* ---------- header ---------- */
.header { display: flex; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-4); background: var(--bg-1); border-bottom: 1px solid var(--line); position: relative; z-index: 30; }
.brand { display: flex; align-items: center; gap: var(--sp-3); white-space: nowrap; flex: none; }
.wordmark { font-size: 15px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.wordmark b { color: var(--accent); font-weight: 800; }
.brand .div { width: 1px; height: 20px; background: var(--line-strong); }
.tagline { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.nav { display: flex; height: 100%; margin: 0 auto; }
.nav button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 0 var(--sp-4); height: 100%; color: var(--text-1); font-weight: 600; white-space: nowrap; }
.nav button:hover { background: var(--bg-2); color: var(--text-0); }
.nav button[aria-selected=true] { color: var(--text-0); border-bottom-color: var(--accent); }
.header-right { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.search { position: relative; width: 260px; transition: width var(--t); }
.search:focus-within { width: 340px; }
.search input { width: 100%; height: 34px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 64px 0 34px; color: var(--text-0); }
.search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.search .glyph { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-2); pointer-events: none; display: flex; }
.search kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); pointer-events: none; }
@media (max-width: 1200px) { .tagline, .brand .div { display: none; } }
@media (max-width: 1000px) { .search { width: 170px; } .search:focus-within { width: 220px; } .search kbd { display: none; } }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 0; }
.sidebar { display: flex; flex-direction: column; min-height: 0; background: var(--bg-1); border-right: 1px solid var(--line); }
.sidebar-head { padding: var(--sp-3) var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--line); }
.sidebar-label { font-size: var(--fs-xs); letter-spacing: .14em; color: var(--text-2); font-weight: 700; margin-bottom: var(--sp-2); }
.chips { display: flex; gap: var(--sp-1); overflow-x: auto; white-space: nowrap; padding-bottom: var(--sp-1); }
.sidebar-list { flex: 1; overflow-y: auto; padding: var(--sp-2); }
.sidebar-foot { padding: var(--sp-3); border-top: 1px solid var(--line); display: grid; gap: var(--sp-2); }
.foot-line { font-size: var(--fs-xs); color: var(--text-1); }

.main { min-width: 0; min-height: 0; position: relative; }
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, 1fr); height: 100%; gap: var(--sp-3); padding: var(--sp-3); }
.split > * { min-height: 0; min-width: 0; }
.viewer-col { display: flex; flex-direction: column; gap: var(--sp-2); min-height: 380px; }
@media (max-width: 1099px) {
  .split { grid-template-columns: 1fr; grid-template-rows: minmax(380px, 46vh) 1fr; }
  .shell { grid-template-columns: 240px 1fr; }
}
.content-col { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: auto; position: relative; }
.doc-view { height: 100%; overflow: auto; }
.doc { max-width: 820px; margin: 0 auto; padding: var(--sp-6) var(--sp-5) var(--sp-8); }

/* ---------- viewer ---------- */
.viewer { position: relative; flex: 1; min-height: 340px; border-radius: var(--r-lg); overflow: hidden; background: radial-gradient(ellipse at 50% 40%, var(--bg-2), var(--bg-0) 75%); border: 1px solid var(--line); }
.viewer canvas { display: block; width: 100%; height: 100%; outline: none; }
.viewer .css2d { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.glass { background: var(--glass); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-2); }
.vtools { position: absolute; top: 12px; left: 12px; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); z-index: 5; flex-wrap: wrap; max-width: calc(100% - 200px); }
.vpresets { position: absolute; top: 12px; right: 12px; display: flex; padding: var(--sp-1); gap: 2px; z-index: 5; }
.vhint { position: absolute; left: 12px; bottom: 12px; padding: 5px var(--sp-3); font-size: var(--fs-xs); color: var(--text-2); z-index: 5; }
.partcard { position: absolute; right: 12px; bottom: 12px; padding: var(--sp-3); z-index: 6; width: 250px; }
.partcard .row { display: flex; align-items: center; gap: var(--sp-2); }
.partcard .name { font-size: var(--fs-sm); color: var(--text-0); font-weight: 600; flex: 1; }
.partcard .desc { font-size: var(--fs-xs); color: var(--text-2); margin-top: var(--sp-1); line-height: 1.45; }
.legend { display: flex; gap: var(--sp-2); overflow-x: auto; padding: 2px 2px var(--sp-1); flex: none; }
.vempty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-2); }

/* ---------- phones / small tablets: drawer sidebar, wrapped header, single scrolling column ---------- */
.menu-btn, .scrim { display: none; }
@media (max-width: 820px) {
  #app { grid-template-rows: auto minmax(0, 1fr); height: 100vh; height: 100dvh; }
  .header { flex-wrap: wrap; gap: var(--sp-2); padding: 6px var(--sp-3) 0; }
  .menu-btn { display: inline-flex; order: 0; }
  .brand { order: 1; } .brand .wordmark { font-size: 13px; letter-spacing: .16em; }
  .header-right { order: 2; margin-left: auto; }
  .search { width: 110px; } .search:focus-within { width: min(58vw, 260px); }
  .nav { order: 3; width: 100%; height: 42px; margin: 0; overflow-x: auto; }
  .nav button { padding: 0 var(--sp-3); flex: 1 0 auto; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: min(86vw, 320px); z-index: 60; transform: translateX(-102%); transition: transform var(--t); box-shadow: var(--sh-2); }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .5); border: 0; }
  .main { overflow-y: auto; overflow-x: hidden; }
  .split { display: flex; flex-direction: column; height: auto; padding: var(--sp-2); gap: var(--sp-2); }
  .viewer-col { min-height: 0; flex: none; }
  .viewer { flex: none; height: min(62vh, 440px); min-height: 280px; }
  .content-col { overflow: visible; flex: none; }
  .vtools { max-width: calc(100% - 24px); }
  .vpresets { top: auto; bottom: 12px; right: 12px; left: auto; }
  .vhint { display: none; }
  .partcard { width: calc(100% - 24px); bottom: 56px; right: 12px; }
  .doc { padding: var(--sp-4) var(--sp-3) var(--sp-6); }
  .tabpane { overflow-x: auto; }
  .tbl { min-width: 460px; }
  .tbl th { position: static; }
}