:root {
  color-scheme: dark;
  font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
  --page: #0d151b;
  --panel: #111c23;
  --panel-2: #16232b;
  --surface: #1b2b34;
  --line: #30434c;
  --line-soft: #263740;
  --text: #e5edf0;
  --muted: #9aaeb7;
  --subtle: #728a96;
  --accent: #77adff;
  --accent-strong: #c6dcff;
  --amber: #dfbd78;
  background: var(--page);
  color: var(--text);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
button, input, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: #6498e077; color: white; }

.app {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  grid-template-rows: 66px minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
  min-height: 480px;
  overflow: hidden;
}
.topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
  padding: 0 20px;
  background: #101a20;
  border-bottom: 1px solid var(--line);
  z-index: 3;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 150px;
  height: 49px;
  flex: none;
  padding: 5px 8px;
  border: 1px solid #c7d7da;
  background: #fff;
}
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-text { min-width: 0; line-height: 1.05; white-space: nowrap; }
.brand-text strong { display: block; font-size: 15px; font-weight: 730; letter-spacing: .01em; }
.brand-text em { padding: 2px 4px; border: 1px solid #638dc7; color: var(--accent-strong); font-size: 10px; font-style: normal; vertical-align: 2px; }
.brand-text small { display: block; margin-top: 6px; color: var(--subtle); font-size: 9px; font-weight: 650; letter-spacing: .12em; }
.top-divider { width: 1px; height: 34px; margin: 0 4px; flex: none; background: var(--line); }
.file-context { min-width: 80px; max-width: 460px; }
.file-context > span { display: block; margin-bottom: 4px; color: var(--subtle); font-size: 9px; font-weight: 700; letter-spacing: .15em; }
.file-name { overflow: hidden; color: #c7d4d8; font: 11px Consolas, "Cascadia Mono", monospace; text-overflow: ellipsis; white-space: nowrap; }
.top-spacer { flex: 1; }
.status { display: flex; align-items: center; gap: 9px; flex: none; color: #b9c9cf; font-size: 12px; white-space: nowrap; }
.status i { width: 7px; height: 7px; background: var(--amber); }
.status.ready i { background: #7eafff; }
.status.error i { background: #ef8585; }
.btn, .top-select, .panel-select, .small-action {
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
}
.btn { min-height: 34px; padding: 7px 12px; white-space: nowrap; }
.btn:hover, .small-action:hover { border-color: #6f9bd8; background: #203551; }
.btn-ghost { background: transparent; }
.top-select { height: 34px; min-width: 76px; padding: 0 7px; }
.panel-select { width: 100%; height: 36px; padding: 0 9px; }

.sidebar { display: flex; flex-direction: column; min-height: 0; background: var(--panel); border-right: 1px solid var(--line); z-index: 2; }
.sidebar-scroll { overflow: auto; min-height: 0; scrollbar-color: #4b626b transparent; scrollbar-width: thin; }
.sidebar-overview { padding: 22px 20px 20px; border-bottom: 1px solid var(--line); }
.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--subtle); font-size: 9px; font-weight: 750; letter-spacing: .15em; }
.eyebrow b, .section-code { display: inline-grid; place-items: center; width: 23px; height: 20px; border: 1px solid #5279ae; color: var(--accent); font: 700 10px Consolas, monospace; letter-spacing: 0; }
.sidebar h1 { margin: 14px 0 8px; font-size: 23px; font-weight: 680; letter-spacing: -.02em; line-height: 1.16; }
.sidebar h1 span { color: var(--accent-strong); }
.intro { max-width: 260px; margin: 0 0 17px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); background: #142129; }
.stats > div { min-width: 0; padding: 11px 6px 9px; border-right: 1px solid var(--line); text-align: center; }
.stats > div:last-child { border-right: 0; }
.stats strong { display: block; color: #f3f6f5; font: 600 19px Consolas, "Cascadia Mono", monospace; letter-spacing: -.045em; }
.stats span { display: block; margin-top: 5px; color: var(--subtle); font-size: 10px; font-weight: 700; letter-spacing: .045em; }
.panel-section { padding: 16px 20px 18px; border-bottom: 1px solid var(--line-soft); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; margin-bottom: 12px; }
.section-heading > div { display: flex; align-items: center; gap: 9px; min-width: 0; }
.section-heading h2 { margin: 0; color: #dce7e9; font-size: 12px; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; }
.section-code { width: 22px; height: 20px; border-color: #42628b; color: #a7caff; font-size: 9px; flex: none; }
.section-note { color: var(--subtle); font: 10px Consolas, monospace; white-space: nowrap; }
.text-btn { padding: 3px 0; border: 0; background: transparent; color: var(--accent); font-size: 10px; font-weight: 600; white-space: nowrap; }
.text-btn:hover { text-decoration: underline; }
.small-action { width: 100%; min-height: 32px; margin-top: 9px; padding: 6px 9px; color: var(--accent-strong); }
.toggle-list { display: grid; gap: 2px; }
.toggle-row { display: flex; align-items: center; gap: 9px; min-height: 32px; padding: 5px 7px; border: 1px solid transparent; color: #c5d2d5; font-size: 12px; cursor: pointer; }
.toggle-row:hover, .layer-row:hover { border-color: #405e82; background: #1a2a3c; }
.toggle-row input, .layer-row input, .jumper-pill input, .jumper-cables input { margin: 0; accent-color: var(--accent); cursor: pointer; }
.toggle-row input { width: 13px; height: 13px; }
.toggle-row .swatch { width: 7px; height: 13px; flex: none; }
.toggle-row .count { margin-left: auto; color: var(--subtle); font: 10px Consolas, monospace; }
.jumper-grid { display: grid; grid-template-columns: 1fr; gap: 7px; }
.jumper-entry { padding: 7px; border: 1px solid var(--line); background: #142129; }
.jumper-control { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, auto); gap: 4px; }
.jumper-pill { display: flex; align-items: center; gap: 7px; min-width: 0; height: 27px; padding: 0 8px; border: 1px solid var(--line); color: #b6c7cb; cursor: pointer; font: 700 11px Consolas, monospace; }
.jumper-pill:has(input:checked) { border-color: #5f8bc5; background: #1d3552; color: var(--accent-strong); }
.jumper-mini { min-width: 43px; height: 27px; padding: 0 4px; border: 1px solid var(--line); border-radius: 2px; background: #182932; color: #aec2c8; font-size: 9px; font-weight: 750; letter-spacing: .02em; }
.jumper-mini:hover, .jumper-mini.active { border-color: #70a0e1; color: var(--accent-strong); background: #254367; }
.jumper-cables { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 6px; }
.jumper-cables label { display: flex; align-items: center; justify-content: center; gap: 5px; height: 22px; border: 1px solid #2d434a; color: #9db2b8; cursor: pointer; font: 10px Consolas, monospace; }
.jumper-cables label:has(input:checked) { background: #20354e; color: #d4e2f8; }
.jumper-cables input { width: 11px; height: 11px; }
.opacity-section input[type=range] { width: 100%; margin: 0; accent-color: var(--accent); cursor: pointer; }
.search-wrap { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 9px; border: 1px solid var(--line); background: #142129; color: var(--subtle); }
.search-wrap input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 11px; }
.search-wrap input::placeholder { color: #718995; }
.layer-list { max-height: 250px; margin-top: 8px; overflow: auto; scrollbar-color: #4b626b transparent; scrollbar-width: thin; }
.layer-row { display: flex; align-items: center; gap: 8px; min-height: 26px; padding: 4px 5px; border: 1px solid transparent; cursor: pointer; }
.layer-row input { width: 12px; height: 12px; flex: none; }
.layer-row span { overflow: hidden; color: #b5c7cd; font: 10px Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.layer-row small { margin-left: auto; color: var(--subtle); font: 10px Consolas, monospace; }
.sidebar-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 37px; padding: 0 17px; border-top: 1px solid var(--line); color: var(--subtle); font: 9px Consolas, monospace; white-space: nowrap; }
.local-badge { display: flex; align-items: center; gap: 7px; color: #b8d3fb; }
.local-badge i { width: 6px; height: 6px; background: #7eafff; }

.viewport { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #101a22; }
.viewport > canvas#scene { display: block; width: 100%; height: 100%; outline: 0; }
.view-toolbar, .mode-toolbar { position: absolute; display: flex; align-items: center; gap: 2px; max-width: calc(100% - 32px); min-height: 38px; padding: 3px; border: 1px solid #3c535d; background: #111d24f2; z-index: 1; }
.mode-toolbar { top: 16px; left: 16px; }
.view-toolbar { top: 16px; right: 16px; }
.view-btn, .mode-btn { min-height: 28px; padding: 5px 8px; border: 1px solid transparent; border-radius: 2px; background: transparent; color: #a9bec5; font-size: 11px; font-weight: 600; white-space: nowrap; }
.view-btn:hover, .mode-btn:hover { border-color: #628dcb; color: white; }
.view-btn.active, .mode-btn.active { border-color: #6597d8; background: #234268; color: #d0e1ff; }
.icon-btn { min-width: 28px; padding: 3px 6px; font-size: 17px; line-height: 1; }
.toolbar-sep { width: 1px; height: 19px; margin: 0 3px; background: #435c64; flex: none; }
.viewport-watermark { position: absolute; right: 18px; bottom: 16px; color: #73909d; font: 700 9px Consolas, monospace; letter-spacing: .04em; pointer-events: none; }
.viewport-watermark span { color: var(--accent); }
.coordinate-panel { position: absolute; bottom: 15px; left: 16px; width: 305px; max-width: calc(100% - 32px); padding: 11px 13px; border: 1px solid #496487; border-left: 3px solid var(--accent); background: #111d24f2; z-index: 1; }
.coord-label { color: var(--accent); font: 700 9px Consolas, monospace; letter-spacing: .09em; }
.coord-label span { margin-left: 5px; color: var(--muted); }
.coord-value { overflow-wrap: anywhere; margin-top: 7px; color: #eaf1f1; font: 11px Consolas, monospace; }
.measure-readout { margin-top: 6px; color: #a9bbc1; font-size: 10px; line-height: 1.45; white-space: pre-line; }
.help-hint { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); color: #809ba7; font: 9px Consolas, monospace; white-space: nowrap; pointer-events: none; }
.help-hint span { margin: 0 6px; color: #67858e; }
.help-hint kbd { margin-left: 3px; color: #b6cbd0; font: inherit; }
.selection-panel { position: absolute; top: 64px; right: 16px; width: 314px; max-width: calc(100% - 32px); padding: 15px; border: 1px solid #4c6890; background: #122028f8; box-shadow: 0 15px 32px #07101688; z-index: 2; }
.selection-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line); color: var(--accent); font: 700 10px Consolas, monospace; letter-spacing: .09em; }
.selection-top button { border: 0; background: none; color: #b0c2c8; font-size: 19px; line-height: 1; }
.selection-panel strong { display: block; margin: 13px 0 10px; overflow-wrap: anywhere; color: #eff4f3; font: 700 13px Consolas, monospace; }
.property-row { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px; padding: 6px 0; border-top: 1px solid #273b44; font-size: 11px; line-height: 1.4; }
.property-row span { color: #819aa4; }
.property-row b { overflow-wrap: anywhere; color: #cbd9dc; font-weight: 550; }
.selection-panel .small-action { margin-top: 13px; }
.axes-widget { position: absolute; right: 16px; bottom: 43px; display: flex; flex-direction: column; align-items: center; width: 110px; height: 125px; color: #819ca8; font: 700 9px Consolas, monospace; pointer-events: none; }
.axes-widget canvas { width: 110px !important; height: 110px !important; }
.axes-widget span { margin-top: -7px; }
.loading-panel, .error-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(350px, calc(100% - 32px)); padding: 23px; border: 1px solid #6484b2; background: #14242cf5; text-align: center; z-index: 3; }
.loading-panel strong { font-size: 13px; }
.loading-panel p { margin: 9px 0 16px; color: var(--muted); font-size: 11px; }
.loading-ring { width: 24px; height: 24px; margin: 0 auto 13px; border: 2px solid #365477; border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.progress-track { height: 4px; overflow: hidden; background: #29405c; }
.progress-track div { height: 100%; width: 2%; background: var(--accent); transition: width .2s; }
.error-panel { border-color: #bf7471; background: #342527; color: #f6e6e4; font-size: 12px; line-height: 1.5; }

@media (max-width: 1280px) {
  .view-toolbar { top: auto; bottom: 15px; left: 16px; right: 16px; max-width: none; overflow-x: auto; }
  .coordinate-panel { bottom: 62px; }
  .axes-widget { bottom: 82px; }
  .help-hint, .viewport-watermark { display: none; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: 275px minmax(0, 1fr); }
  .topbar { gap: 12px; padding: 0 14px; }
  .file-context, .top-divider { display: none; }
  .brand-mark { width: 120px; height: 42px; }
  .brand-text strong { font-size: 13px; }
  .sidebar-overview { padding: 18px 15px; }
  .panel-section { padding: 14px 15px; }
  .stats strong { font-size: 17px; }
  .selection-panel { top: 60px; }
}
@media (max-width: 620px) {
  .app { grid-template-columns: 1fr; grid-template-rows: 58px minmax(0, 1fr) 225px; min-height: 0; }
  .topbar { grid-row: 1; padding: 0 10px; gap: 10px; }
  .brand-mark { width: 96px; height: 37px; padding: 4px; }
  .brand-text strong { font-size: 11px; }
  .brand-text small { display: none; }
  .topbar .status, .topbar #fullscreenBtn, .topbar #captureScale { display: none; }
  .topbar #screenshotBtn { margin-left: auto; }
  .viewport { grid-column: 1; grid-row: 2; }
  .sidebar { grid-column: 1; grid-row: 3; border-top: 1px solid var(--line); border-right: 0; }
  .sidebar-overview, .sidebar-footer { display: none; }
  .panel-section { padding: 12px 16px; }
  .mode-toolbar { top: 8px; left: 8px; max-width: calc(100% - 16px); }
  .view-toolbar { bottom: 8px; left: 8px; right: 8px; max-width: none; }
  .view-btn, .mode-btn { font-size: 9px; padding: 4px 6px; }
  .coordinate-panel { bottom: 52px; left: 8px; width: 285px; max-width: calc(100% - 16px); }
  .selection-panel { top: 53px; right: 8px; width: min(280px, calc(100% - 16px)); }
  .axes-widget { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .loading-ring { animation: none; }
  .progress-track div { transition: none; }
}