:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --bg: #061019;
  --panel: #081925;
  --ink: #edf5f6;
  --muted: #718998;
  --line: rgba(129, 178, 192, 0.15);
  --accent: #54d9c8;
  --warm: #d79174;
  background: var(--bg);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--ink); }
button { font: inherit; }

.app-shell {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  grid-template-rows: 72px minmax(0, 1fr);
  width: 100%;
  height: 100%;
}

.topbar {
  z-index: 5;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26px;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 15, 23, 0.91);
  backdrop-filter: blur(18px);
}

.brand { display: flex; align-items: center; gap: 14px; }
.brand-symbol { position: relative; display: block; width: 39px; height: 39px; border: 1px solid rgba(84, 217, 200, 0.44); border-radius: 50%; }
.brand-symbol::before { content: ""; position: absolute; inset: 7px 10px 6px 9px; border: 1px solid var(--accent); border-left-color: transparent; border-radius: 56% 44% 54% 46%; transform: rotate(-12deg); }
.brand-symbol i { position: absolute; width: 1px; height: 7px; background: var(--accent); opacity: 0.72; }
.brand-symbol i:nth-child(1) { top: -4px; left: 19px; }
.brand-symbol i:nth-child(2) { right: -2px; top: 16px; transform: rotate(90deg); }
.brand-symbol i:nth-child(3) { bottom: -4px; left: 19px; }
.brand p { margin: 0; color: var(--accent); font-size: 8px; letter-spacing: 0.25em; }
.brand h1 { margin: 3px 0 0; font-size: 18px; font-weight: 650; letter-spacing: 0.08em; }
.source-badge { display: flex; align-items: center; gap: 8px; color: #8ba0ad; font-size: 10px; letter-spacing: 0.1em; }
.source-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 11px var(--accent); }

.panel { z-index: 4; display: flex; min-height: 0; flex-direction: column; gap: 21px; padding: 22px 21px 18px; overflow-y: auto; border-right: 1px solid var(--line); background: linear-gradient(180deg, rgba(8, 25, 37, 0.98), rgba(5, 17, 27, 0.98)); box-shadow: 24px 0 70px rgba(0, 0, 0, 0.22); }
.section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.section-title b { color: var(--accent); font-size: 8px; font-weight: 500; letter-spacing: 0.15em; }
.section-title h2 { margin: 0; color: #bfd0d8; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; }

.view-grid, .material-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.view-grid button, .material-list button, .panel-actions button { border: 1px solid var(--line); color: #8299a8; background: rgba(255, 255, 255, 0.024); cursor: pointer; transition: 160ms ease; }
.view-grid button:hover, .material-list button:hover, .panel-actions button:hover { border-color: rgba(84, 217, 200, 0.43); transform: translateY(-1px); }
.view-grid button { display: grid; justify-items: center; gap: 6px; min-height: 61px; padding: 9px 4px 7px; border-radius: 9px; font-size: 9px; }
.view-grid button.active, .material-list button.active { border-color: rgba(84, 217, 200, 0.57); color: #edfffc; background: linear-gradient(135deg, rgba(84, 217, 200, 0.15), rgba(84, 217, 200, 0.025)); }
.view-glyph { display: block; width: 22px; height: 29px; border: 1px solid #557587; border-radius: 52% 44% 57% 43%; }
.view-glyph.profile { width: 11px; }
.view-glyph.back { border-style: dashed; }
.active .view-glyph { border-color: var(--accent); box-shadow: inset 0 0 12px rgba(84, 217, 200, 0.08); }

.material-list button { min-width: 0; padding: 9px 5px 8px; border-radius: 9px; text-align: center; }
.material-list strong { display: block; margin-top: 6px; overflow: hidden; font-size: 9px; font-weight: 600; white-space: nowrap; }
.material-list small { display: none; }
.swatch { display: block; width: 24px; height: 15px; margin: 0 auto; border-radius: 50%; box-shadow: inset -5px -3px 8px rgba(0, 0, 0, 0.24), inset 4px 3px 7px rgba(255, 255, 255, 0.2); }
.swatch.scan { background: #c98268; }
.swatch.clinical { background: #d4dddd; }
.swatch.wire { border: 1px solid #54d9c8; background: repeating-linear-gradient(45deg, transparent 0 3px, #54d9c8 4px); box-shadow: none; }

.model-info dl { margin: 0; border-top: 1px solid var(--line); }
.model-info dl div { display: flex; justify-content: space-between; padding: 7px 2px; border-bottom: 1px solid rgba(129, 178, 192, 0.075); }
.model-info dt { color: #5e7585; font-size: 9px; }
.model-info dd { margin: 0; color: #bdcdd5; font-size: 9px; font-variant-numeric: tabular-nums; }
.model-info dd.ready, .model-info dd.corrected { color: var(--accent); }

.processing-note { display: flex; gap: 10px; align-items: center; padding: 11px 12px; border: 1px solid rgba(84, 217, 200, 0.18); border-radius: 9px; background: rgba(84, 217, 200, 0.045); }
.processing-note > i { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px rgba(84, 217, 200, 0.8); }
.processing-note p { margin: 0; }
.processing-note strong, .processing-note span { display: block; }
.processing-note strong { color: #d6f8f2; font-size: 8px; letter-spacing: 0.14em; }
.processing-note span { margin-top: 4px; color: #67808f; font-size: 8px; line-height: 1.45; }

.panel-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.panel-actions button { height: 40px; border-radius: 9px; font-size: 10px; }
.panel-actions .accent { border-color: rgba(84, 217, 200, 0.42); color: #defff9; background: rgba(84, 217, 200, 0.1); }
.panel-actions span { margin-right: 5px; color: var(--accent); font-size: 8px; }

.stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: radial-gradient(circle at 58% 47%, rgba(26, 73, 80, 0.3), transparent 39%), linear-gradient(135deg, #07131d, #050e17 58%, #071724); }
.stage::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(rgba(95, 151, 161, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(95, 151, 161, 0.035) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(circle at 58% 50%, black, transparent 73%); }
#modelCanvas { display: block; width: 100%; height: 100%; outline: 0; }
.stage-heading { position: absolute; z-index: 2; top: 27px; left: 28px; pointer-events: none; }
.stage-heading p { margin: 0 0 5px; color: var(--accent); font-size: 8px; letter-spacing: 0.19em; }
.stage-heading h2 { margin: 0; color: #e0eaee; font-size: 14px; font-weight: 540; letter-spacing: 0.08em; }
.precision-badge { position: absolute; z-index: 2; top: 27px; right: 28px; display: flex; align-items: center; gap: 7px; color: #6d8390; font-size: 8px; letter-spacing: 0.16em; pointer-events: none; }
.precision-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 11px var(--accent); }
.axis-label { position: absolute; z-index: 2; right: 28px; color: #405b68; font-size: 7px; letter-spacing: 0.15em; writing-mode: vertical-rl; pointer-events: none; }
.axis-label.superior { top: 24%; }
.axis-label.inferior { bottom: 23%; }
.interaction-hint { position: absolute; z-index: 2; right: 27px; bottom: 22px; display: flex; align-items: center; gap: 7px; color: #536e7b; font-size: 8px; letter-spacing: 0.07em; pointer-events: none; }
.mouse, .wheel { display: inline-block; width: 10px; height: 14px; margin-left: 10px; border: 1px solid #587583; border-radius: 5px; }
.mouse::after, .wheel::after { content: ""; display: block; width: 1px; height: 4px; margin: 2px auto; background: var(--accent); }

.loading-overlay { position: absolute; z-index: 8; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(5, 15, 23, 0.95); backdrop-filter: blur(12px); transition: opacity 360ms ease, visibility 360ms ease; }
.loading-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.scan-loader { position: relative; width: 58px; height: 70px; margin-bottom: 18px; border: 1px solid rgba(84, 217, 200, 0.45); border-left-color: transparent; border-radius: 54% 46% 58% 42%; animation: breathe 1.5s ease-in-out infinite; }
.scan-loader::before { content: ""; position: absolute; inset: 13px 12px 14px 17px; border: 1px solid rgba(84, 217, 200, 0.65); border-bottom-color: transparent; border-radius: 55%; }
.scan-loader span { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.scan-loader span:nth-child(1) { top: 5px; left: 34px; }
.scan-loader span:nth-child(2) { top: 31px; right: 6px; opacity: 0.62; }
.scan-loader span:nth-child(3) { bottom: 6px; left: 17px; opacity: 0.35; }
.loading-overlay p { margin: 0 0 13px; color: #d8e5e9; font-size: 12px; letter-spacing: 0.11em; }
.loading-overlay small { margin-top: 9px; color: #5c7481; font-size: 8px; }
.progress { width: min(270px, 52vw); height: 2px; overflow: hidden; background: rgba(141, 181, 193, 0.13); }
.progress i { display: block; width: 2%; height: 100%; background: linear-gradient(90deg, #307f7a, var(--accent)); box-shadow: 0 0 10px var(--accent); transition: width 160ms ease; }
@keyframes breathe { 50% { transform: scale(1.05); filter: drop-shadow(0 0 9px rgba(84, 217, 200, 0.27)); } }

@media (max-width: 760px) {
  .app-shell { grid-template-columns: 1fr; grid-template-rows: 62px minmax(0, 1fr) 180px; }
  .topbar { padding: 0 17px; }
  .source-badge { display: none; }
  .brand h1 { font-size: 15px; }
  .panel { grid-row: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 15px; border-top: 1px solid var(--line); border-right: 0; }
  .model-info, .processing-note { display: none; }
  .panel-actions { margin: 24px 0 0; align-self: start; }
  .stage { grid-row: 2; }
  .stage-heading { top: 17px; left: 17px; }
  .precision-badge { top: 18px; right: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}