:root {
  --toolbar: #001b3b;
  --toolbar-active: #003f7f;
  --viewer: #000;
  --divider: #0b3769;
  --selected: #0066d6;
  --text: #f5f6f7;
  --series: #001f42;
  color-scheme: dark;
  font-family: Arial, "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--viewer); }
body { color: var(--text); font-size: 12px; }
button { font: inherit; color: inherit; }
button:focus-visible, .viewport-panel:focus-visible { outline: 2px solid #48a7ff; outline-offset: -2px; }
.viewer-app { width: 100vw; height: 100vh; min-width: 320px; display: grid; grid-template-rows: 68px minmax(0, 1fr) 116px; background: var(--viewer); }
.toolbar { min-width: 0; display: flex; align-items: stretch; justify-content: space-between; gap: 8px; padding: 0 6px; background: var(--toolbar); border-bottom: 1px solid #09284d; overflow: hidden; }
.toolbar-scroll { min-width: 0; display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: none; }
.toolbar-scroll::-webkit-scrollbar { display: none; }
.tool-button, .compact-button { position: relative; min-width: 48px; height: 66px; padding: 3px 5px 0; display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1px; border: 0; border-bottom: 3px solid transparent; background: transparent; cursor: pointer; }
.tool-button:hover, .compact-button:hover, .tool-button.is-active { background: var(--toolbar-active); border-bottom-color: #1194ff; }
.tool-icon { height: 30px; display: grid; place-items: center; font-size: 26px; font-weight: 300; line-height: 1; }
.tool-button span:not(.tool-icon), .compact-button span:not(.compact-icon) { font-size: 12px; line-height: 15px; white-space: nowrap; }
.tool-button b, .compact-button b { position: absolute; right: 2px; bottom: 8px; color: #8db5dc; font-size: 12px; font-weight: 400; }
.toolbar-right { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.new-version { height: 34px; margin: 0 6px; padding: 0 15px; border: 1px solid #168bff; border-radius: 18px; color: #66b5ff; background: transparent; cursor: pointer; white-space: nowrap; }
.new-version:hover { background: rgba(22, 139, 255, .17); }
.compact-button { min-width: 48px; height: 66px; }
.compact-icon { height: 30px; display: grid; place-items: center; font-size: 25px; line-height: 1; }
.viewer-grid { position: relative; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 4px; background: var(--divider); }
.viewport-panel { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #000; border: 1px solid #0a2a50; cursor: crosshair; isolation: isolate; }
.viewport-panel.is-selected { border-color: var(--selected); box-shadow: inset 0 0 0 1px var(--selected); }
.pane-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: brightness(1) contrast(1) saturate(1); transform-origin: center; transition: filter .15s ease, transform .15s ease; user-select: none; pointer-events: none; }
.pane-meta { position: absolute; z-index: 2; display: flex; flex-direction: column; color: var(--text); font-size: clamp(9px, 1.05vw, 13px); line-height: 1.28; text-shadow: 0 1px 2px #000; white-space: nowrap; pointer-events: none; }
.meta-left-top { top: 8px; left: 9px; align-items: flex-start; }
.meta-right-top { top: 8px; right: 9px; align-items: flex-end; text-align: right; }
.meta-left-bottom { bottom: 8px; left: 9px; align-items: flex-start; }
.meta-right-bottom { right: 9px; bottom: 8px; align-items: flex-end; text-align: right; }
.window-label { margin-top: 14px; }
.orientation { position: absolute; z-index: 2; color: #fff; font-size: clamp(9px, 1.05vw, 13px); text-shadow: 0 1px 2px #000; }
.orientation-top { top: 8px; left: 50%; transform: translateX(-50%); }
.orientation-bottom { bottom: 8px; left: 50%; transform: translateX(-50%); }
.orientation-left { top: 50%; left: 9px; transform: translateY(-50%); }
.orientation-right { top: 50%; right: 9px; transform: translateY(-50%); }
.crosshair-overlay { position: absolute; inset: 0; z-index: 3; display: none; pointer-events: none; background: linear-gradient(90deg, transparent calc(50% - .5px), rgba(255,255,255,.6) 50%, transparent calc(50% + .5px)), linear-gradient(0deg, transparent calc(50% - .5px), rgba(255,255,255,.6) 50%, transparent calc(50% + .5px)); }
.viewer-grid.show-crosshair .crosshair-overlay { display: block; }
.viewer-grid.single-layout { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.viewer-grid.single-layout .viewport-panel:not(.is-selected) { display: none; }
.series-strip { min-width: 0; padding: 6px 6px 5px; background: var(--series); border-top: 1px solid #073c72; overflow: hidden; }
.series-title { height: 22px; color: var(--text); font-size: 13px; line-height: 20px; }
.series-scroll { height: 82px; display: flex; align-items: stretch; gap: 8px; overflow-x: auto; scrollbar-color: #3477b5 transparent; scrollbar-width: thin; }
.series-card { position: relative; width: 84px; min-width: 84px; height: 76px; padding: 3px; display: grid; grid-template-rows: 55px 13px; gap: 2px; border: 1px solid #214a75; border-radius: 2px; background: #00142d; cursor: pointer; text-align: left; }
.series-card:hover, .series-card.is-selected { border-color: #0e8fff; background: #063866; }
.series-card img { width: 100%; height: 55px; object-fit: cover; background: #000; }
.series-card span { min-width: 0; overflow: hidden; color: #dce7f4; font-size: 9px; line-height: 13px; text-overflow: ellipsis; white-space: nowrap; }
.series-card b { position: absolute; right: 4px; bottom: 1px; color: #dce7f4; font-size: 9px; font-weight: 400; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 760px) {
  .viewer-app { grid-template-rows: 68px minmax(0, 1fr) 104px; }
  .toolbar-right { display: none; }
  .pane-meta { font-size: 9px; line-height: 1.2; }
  .orientation { font-size: 9px; }
  .window-label { margin-top: 8px; }
  .series-card { width: 78px; min-width: 78px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}