:root {
      --bg: #151719;
      --panel: #202326;
      --panel-strong: #111315;
      --line: #3e464d;
      --text: #f1f5f4;
      --muted: #b7c0bd;
      --soft: #d6dedb;
      --accent: #16a085;
      --accent-strong: #0f766e;
      --measure: #f2b84b;
      --danger: #9f2f2f;
    }

    * { box-sizing: border-box; }
    .hidden { display: none !important; }
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
    }
    header {
      min-height: 58px;
      padding: 10px 14px;
      background: var(--panel-strong);
      display: flex;
      align-items: center;
      gap: 10px;
      border-bottom: 1px solid var(--line);
    }
    header h1 {
      font-size: 18px;
      margin: 0;
      white-space: nowrap;
      letter-spacing: 0;
    }
    .topBrand {
      display: flex;
      align-items: baseline;
      gap: 10px;
      min-width: 0;
    }
    #topContext {
      color: var(--muted);
      font-size: 13px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 42vw;
    }
    .topActions {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    #userBadge {
      font-size: 12px;
      color: var(--soft);
      white-space: nowrap;
    }
    select, button, input, textarea {
      border-radius: 7px;
      border: 1px solid var(--line);
      background: #1a1d20;
      color: var(--text);
      padding: 8px 9px;
      font: inherit;
    }
    select {
      min-width: 260px;
      max-width: 56vw;
    }
    button {
      cursor: pointer;
      min-height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    button:hover { border-color: #7a858c; }
    button.active {
      background: var(--accent-strong);
      border-color: #32d3b2;
    }
    button:disabled {
      color: #727d82;
      cursor: not-allowed;
      border-color: #33393d;
    }
    textarea {
      width: 100%;
      min-height: 70px;
      resize: vertical;
    }
    label {
      display: grid;
      gap: 5px;
      color: var(--soft);
      font-size: 12px;
    }
    input[type="checkbox"] {
      width: 16px;
      height: 16px;
      padding: 0;
      accent-color: var(--accent);
    }
    .loginScreen {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 24px;
      background: radial-gradient(circle at 50% 0%, #26413b 0%, #151719 42%, #0b0d0e 100%);
    }
    .loginPanel {
      width: min(440px, 100%);
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(32, 35, 38, 0.96);
      padding: 22px;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
    }
    .loginPanel h1 {
      margin: 0 0 8px;
      font-size: 24px;
      letter-spacing: 0;
    }
    .loginPanel p {
      margin: 0 0 18px;
      color: var(--soft);
      line-height: 1.45;
      font-size: 13px;
    }
    .formStack {
      display: grid;
      gap: 10px;
    }
    .formGrid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .formGrid .wide { grid-column: 1 / -1; }
    .statusText {
      min-height: 18px;
      color: #f2b84b;
      font-size: 12px;
    }
    .layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 380px;
      height: calc(100vh - 58px);
    }
    .layout.catalogMode {
      grid-template-columns: minmax(0, 1fr);
    }
    #viewerWrap {
      --rotation-map-top: 0px;
      --rotation-map-width: min(300px, 23vw);
      --rotation-map-height: clamp(110px, 22vh, 190px);
      --rotation-drawer-gap: 10px;
      --rotation-drawer-width: clamp(240px, 24vw, 300px);
      --scan-overlay-drawer-width: clamp(250px, 25vw, 320px);
      --rotation-drawer-top: calc(var(--rotation-map-top) + var(--rotation-map-height) + var(--rotation-drawer-gap));
      --scan-overlay-drawer-top: calc(var(--rotation-drawer-top) + 340px);
      position: relative;
      min-width: 0;
      overflow: hidden;
      background: #080a0b;
    }
    #viewer {
      position: relative;
      width: 100%;
      height: 100%;
      --rotation-map-top: 0px;
      --rotation-map-width: min(300px, 23vw);
      --rotation-map-height: clamp(110px, 22vh, 190px);
      --rotation-drawer-gap: 10px;
      --rotation-drawer-width: clamp(240px, 24vw, 300px);
      --scan-overlay-drawer-width: clamp(250px, 25vw, 320px);
      --rotation-drawer-top: calc(var(--rotation-map-top) + var(--rotation-map-height) + var(--rotation-drawer-gap));
      --scan-overlay-drawer-top: calc(var(--rotation-drawer-top) + 340px);
      background: #080a0b;
      overflow: hidden;
    }
    .learningModeBanner {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 32;
      display: flex;
      align-items: center;
      gap: 8px;
      max-width: min(620px, calc(100% - 340px));
      padding: 8px 10px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 8px;
      background: rgba(17, 19, 21, 0.9);
      color: var(--soft);
      font-size: 12px;
      box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35);
    }
    .learningModeBanner b {
      color: var(--text);
      white-space: nowrap;
    }
    .learningModeBanner span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .learningModeBanner a {
      color: #d7fff3;
      text-decoration: none;
      border-left: 1px solid rgba(255, 255, 255, 0.22);
      padding-left: 8px;
      white-space: nowrap;
    }
    .viewerModeExam #annotationsToggleBtn,
    .viewerModeExam #annotationsListBtn,
    .viewerModeExam #infoToggleBtn,
    .viewerModeExam #macroToggleBtn,
    .viewerModeExam #scanDownloadBtn {
      display: none !important;
    }
    #viewerWrap:fullscreen,
    #viewerWrap.splitWholeFullscreenHost {
      width: 100vw;
      height: 100vh;
    }
    #viewer:fullscreen,
    #viewer.viewerFullscreenHost {
      width: 100vw;
      height: 100vh;
    }
    #viewer:fullscreen .openseadragon-container,
    #viewer:fullscreen .openseadragon-canvas,
    #viewer.viewerFullscreenHost .openseadragon-container,
    #viewer.viewerFullscreenHost .openseadragon-canvas {
      width: 100% !important;
      height: 100% !important;
    }
    .viewerFullscreenUiLayer {
      position: absolute;
      inset: 0;
      z-index: 2147483000;
      overflow: hidden;
      pointer-events: none;
    }
    .viewerFullscreenUiLayer > .fixedNavigator,
    .viewerFullscreenUiLayer > .learningModeBanner,
    .viewerFullscreenUiLayer > .rotationDockHotspot,
    .viewerFullscreenUiLayer > .scanOverlayDockHotspot,
    .viewerFullscreenUiLayer > .splitFullscreenBtn,
    .viewerFullscreenUiLayer > .rotationPanel,
    .viewerFullscreenUiLayer > .scanOverlayPanel,
    .viewerFullscreenUiLayer > .leftDockHotspot,
    .viewerFullscreenUiLayer > .annotationDock,
    .viewerFullscreenUiLayer > .floatingPanel,
    .viewerFullscreenUiLayer > .scanOverlayPickerPanel,
    .viewerFullscreenUiLayer > .zoomDock,
    .viewerFullscreenUiLayer > #scaleHud,
    .viewerFullscreenUiLayer > .manualSyncPanel {
      pointer-events: auto;
    }
    .viewerFullscreenUiLayer > #overlay,
    .viewerFullscreenUiLayer > .splitPaneLayer,
    .viewerFullscreenUiLayer > .paneScaleHud {
      pointer-events: none;
    }
    .fixedNavigator {
      position: absolute;
      top: var(--rotation-map-top);
      right: 0;
      width: var(--rotation-map-width);
      height: var(--rotation-map-height);
      min-width: 160px;
      min-height: 110px;
      z-index: 22;
      overflow: hidden;
      background: rgba(10, 11, 12, 0.82);
      border-left: 1px solid rgba(255, 255, 255, 0.26);
      border-bottom: 1px solid rgba(255, 255, 255, 0.26);
      cursor: crosshair;
      touch-action: none;
    }
    .fixedNavigator.hidden {
      display: none;
    }
    .fixedNavigator img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      user-select: none;
      pointer-events: none;
    }
    #fixedNavigatorViewport {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
    }
    #fixedNavigatorViewportShape {
      fill: rgba(211, 31, 60, 0.12);
      stroke: #d31f3c;
      stroke-width: 2px;
      vector-effect: non-scaling-stroke;
      shape-rendering: geometricPrecision;
    }
    .scanBrowser {
      position: absolute;
      inset: 0;
      z-index: 8;
      overflow: auto;
      padding: 18px;
      background: #151719;
    }
    .scanBrowserHeader {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }
    .scanBrowserHeader h2 {
      margin: 0;
      font-size: 19px;
      letter-spacing: 0;
    }
    .scanBrowserHeader input {
      width: min(360px, 100%);
    }
    .scanCatalogGrid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 10px;
    }
    .scanCatalogGrid.scanTree {
      display: block;
      max-width: 1120px;
    }
    .catalogTreeRow {
      --tree-indent: calc(var(--tree-depth, 0) * 18px);
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr) auto;
      align-items: center;
      gap: 5px;
      min-height: 42px;
      padding: 3px 8px 3px calc(4px + var(--tree-indent));
      border: 1px solid transparent;
      border-radius: 7px;
      color: var(--text);
    }
    .catalogTreeRow + .catalogTreeRow {
      margin-top: 2px;
    }
    .catalogTreeRow:hover {
      border-color: #28313a;
      background: rgba(255, 255, 255, 0.035);
    }
    .catalogTreeRow.active {
      border-color: #f2b84b;
      background: rgba(242, 184, 75, 0.08);
    }
    .catalogTreeRow.brokenScan,
    .scanCard.brokenScan {
      border-color: rgba(239, 68, 68, 0.46);
      background: rgba(127, 29, 29, 0.12);
    }
    .brokenScan .catalogTreeLabel,
    .brokenScan .catalogTreeOpen,
    .scanCard.brokenScan button {
      cursor: not-allowed;
      opacity: 0.82;
    }
    .brokenScanMessage,
    .brokenScan .catalogTreeText small:first-of-type,
    .scanCard.brokenScan small:first-of-type {
      color: #ff8b8b;
      font-weight: 700;
    }
    .catalogTreeToggle,
    .catalogTreeOpen,
    .catalogTreeLabel {
      font: inherit;
    }
    .catalogTreeToggle {
      width: 26px;
      min-width: 26px;
      min-height: 26px;
      padding: 0;
      border-radius: 6px;
      font-size: 18px;
      font-weight: 700;
      line-height: 1;
    }
    .catalogTreeSpacer {
      width: 26px;
      height: 26px;
    }
    .catalogTreeLabel {
      min-width: 0;
      min-height: 36px;
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      text-align: left;
      cursor: pointer;
    }
    .catalogTreeLabel:hover,
    .catalogTreeLabel:focus-visible {
      background: transparent;
      box-shadow: none;
    }
    .catalogTreeText {
      min-width: 0;
      display: grid;
      gap: 2px;
    }
    .catalogTreeText b,
    .catalogTreeText small {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .catalogTreeText b {
      font-size: 14px;
      line-height: 1.25;
    }
    .catalogTreeText small {
      color: var(--muted);
      line-height: 1.25;
    }
    .catalogTreeScan .catalogTreeText b {
      font-weight: 600;
    }
    .catalogTreeFolder .folderGlyph {
      width: 23px;
      min-width: 23px;
      height: 17px;
      border-width: 1px;
      border-radius: 4px;
    }
    .catalogTreeFolder .folderGlyph::before {
      left: 3px;
      top: -6px;
      width: 11px;
      height: 6px;
      border-width: 1px;
      border-bottom: 0;
      border-radius: 3px 3px 0 0;
    }
    .catalogTreeOpen {
      min-height: 30px;
      padding: 5px 10px;
      border-radius: 6px;
      white-space: nowrap;
    }
    .catalogTreeScan,
    .catalogTreeFile {
      min-height: 60px;
    }
    .catalogTreeThumb {
      width: 58px;
      min-width: 58px;
      height: 42px;
      border: 1px solid #30373d;
      border-radius: 6px;
      overflow: hidden;
      background: #080a0b;
      display: grid;
      place-items: center;
    }
    .catalogTreeThumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .fileGlyph {
      width: 34px;
      min-width: 34px;
      height: 40px;
      border: 1px solid #4c5965;
      border-radius: 5px;
      background: linear-gradient(180deg, #eef2f5, #cdd5db);
      box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.28);
    }
    @media (max-width: 700px) {
      .catalogTreeRow {
        grid-template-columns: 32px minmax(0, 1fr);
        padding-right: 6px;
      }
      .catalogTreeOpen {
        display: none;
      }
      .catalogTreeText b,
      .catalogTreeText small {
        white-space: normal;
      }
    }
    .scanBrowserControls {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .scanCard {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel-strong);
      padding: 10px;
      display: grid;
      gap: 7px;
      min-height: 122px;
    }
    .folderCard {
      min-height: 156px;
    }
    .scanCard.active {
      border-color: #f2b84b;
    }
    .scanCard b {
      line-height: 1.25;
    }
    .scanCard small {
      color: var(--muted);
      line-height: 1.35;
    }
    .scanCard button {
      justify-self: start;
      margin-top: 2px;
    }
    .scanThumb {
      width: 100%;
      aspect-ratio: 16 / 9;
      border: 1px solid #30373d;
      border-radius: 7px;
      overflow: hidden;
      background: #0b0e10;
      display: grid;
      place-items: center;
    }
    .scanThumb img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }
    .scanThumb.thumbnailUnavailable,
    .scanPickerThumb.thumbnailUnavailable,
    .catalogTreeThumb.thumbnailUnavailable {
      display: none;
    }
    .viewerTopControls {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .layoutSwitch {
      display: inline-flex;
      align-items: stretch;
      border: 1px solid var(--line);
      border-radius: 7px;
      overflow: hidden;
      background: #1a1d20;
    }
    .layoutSwitch button {
      min-width: 38px;
      min-height: 34px;
      padding: 6px 9px;
      border: 0;
      border-right: 1px solid var(--line);
      border-radius: 0;
      background: transparent;
    }
    .layoutSwitch button:last-child {
      border-right: 0;
    }
    .layoutSwitch button.active {
      background: var(--accent-strong);
      color: #fff;
    }
    #viewerWrap.splitMode #viewer,
    .splitSlot {
      position: absolute;
      overflow: hidden;
      background: #080a0b;
      border: 1px solid rgba(241, 245, 244, 0.22);
    }
    #viewerWrap.splitMode #viewer {
      z-index: 1;
    }
    #viewerWrap.split2 #viewer {
      left: 0;
      top: 0;
      width: 50%;
      height: 100%;
    }
    #viewerWrap.split4 #viewer {
      left: 0;
      top: 0;
      width: 50%;
      height: 50%;
    }
    .splitPaneLayer {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
    }
    .splitSlot {
      pointer-events: auto;
    }
    #viewerWrap.split2 .splitSlot[data-pane-index="1"] {
      left: 50%;
      top: 0;
      width: 50%;
      height: 100%;
    }
    #viewerWrap.split4 .splitSlot[data-pane-index="1"] {
      left: 50%;
      top: 0;
      width: 50%;
      height: 50%;
    }
    #viewerWrap.split4 .splitSlot[data-pane-index="2"] {
      left: 0;
      top: 50%;
      width: 50%;
      height: 50%;
    }
    #viewerWrap.split4 .splitSlot[data-pane-index="3"] {
      left: 50%;
      top: 50%;
      width: 50%;
      height: 50%;
    }
    #viewerWrap.splitMode #viewer.activePane,
    .splitSlot.activePane {
      border-color: #f2b84b;
      box-shadow: inset 0 0 0 1px rgba(242, 184, 75, 0.45);
    }
    #viewerWrap.splitMode #viewer.dropReady,
    .splitSlot.dropReady {
      border-color: #42e1c3;
      box-shadow: inset 0 0 0 2px rgba(66, 225, 195, 0.55);
    }
    .splitPaneViewer {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .splitPaneBadge {
      position: absolute;
      left: 8px;
      top: 44px;
      z-index: 5;
      max-width: calc(100% - 16px);
      padding: 5px 7px;
      border: 1px solid rgba(241, 245, 244, 0.28);
      border-radius: 7px;
      background: rgba(17, 19, 21, 0.82);
      color: var(--soft);
      font-size: 12px;
      line-height: 1.25;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      pointer-events: none;
    }
    #viewerWrap.splitMode #primaryPaneBadge {
      max-width: calc(50% - 16px);
    }
    .splitFullscreenBtn {
      position: absolute;
      left: 8px;
      top: 76px;
      z-index: 6;
      width: 28px;
      height: 28px;
      min-width: 28px;
      min-height: 28px;
      padding: 0;
      border: 1px solid rgba(241, 245, 244, 0.28);
      border-radius: 4px;
      background: rgba(17, 19, 21, 0.82);
      color: var(--soft);
      cursor: pointer;
      pointer-events: auto;
      backdrop-filter: blur(6px);
    }
    #viewerWrap.splitMode .splitFullscreenBtn {
      display: grid;
      place-items: center;
    }
    .splitFullscreenBtn:hover,
    .splitFullscreenBtn.active {
      border-color: #42e1c3;
      color: #42e1c3;
      background: rgba(24, 28, 30, 0.95);
    }
    .splitFullscreenIcon {
      position: relative;
      width: 16px;
      height: 16px;
      display: block;
    }
    .splitFullscreenIcon::before,
    .splitFullscreenIcon::after {
      content: "";
      position: absolute;
      inset: 0;
      border-color: currentColor;
      border-style: solid;
    }
    .splitFullscreenIcon::before {
      border-width: 2px 0 0 2px;
      clip-path: polygon(0 0, 8px 0, 8px 2px, 2px 2px, 2px 8px, 0 8px);
    }
    .splitFullscreenIcon::after {
      border-width: 0 2px 2px 0;
      clip-path: polygon(8px 14px, 14px 14px, 14px 8px, 16px 8px, 16px 16px, 8px 16px);
    }
    .splitEmpty {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 16px;
      color: var(--muted);
      font-size: 13px;
      text-align: center;
      pointer-events: none;
    }
    .scanPickerPanel {
      position: absolute;
      right: 14px;
      top: 14px;
      z-index: 7;
      width: min(360px, calc(100% - 28px));
      max-height: min(640px, calc(100% - 28px));
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr);
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(24, 27, 30, 0.96);
      box-shadow: 0 18px 70px rgba(0, 0, 0, 0.48);
      overflow: hidden;
      backdrop-filter: blur(6px);
    }
    .scanPickerHeader {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 10px 12px;
      border-bottom: 1px solid var(--line);
      background: rgba(17, 19, 21, 0.92);
    }
    .scanPickerHeader b {
      font-size: 14px;
      letter-spacing: 0;
    }
    .scanPickerHeader button {
      width: 32px;
      min-width: 32px;
      min-height: 30px;
      padding: 0;
    }
    .scanPickerSearch {
      margin: 10px 12px 0;
      width: calc(100% - 24px);
      min-width: 0;
    }
    .scanPickerList {
      overflow: auto;
      padding: 10px 12px 12px;
      display: grid;
      gap: 8px;
    }
    .scanPickerList.scanTree {
      display: block;
      padding: 8px 10px 12px;
    }
    .scanPickerPanel .catalogTreeRow {
      --tree-indent: calc(var(--tree-depth, 0) * 14px);
      grid-template-columns: 26px minmax(0, 1fr);
      min-height: 38px;
      padding: 3px 6px 3px calc(2px + var(--tree-indent));
    }
    .scanPickerPanel .catalogTreeScan {
      min-height: 56px;
      cursor: grab;
    }
    .scanPickerPanel .catalogTreeScan:active {
      cursor: grabbing;
    }
    .scanPickerPanel .catalogTreeOpen {
      display: none;
    }
    .scanPickerPanel .catalogTreeText b {
      font-size: 13px;
    }
    .scanPickerPanel .catalogTreeText small {
      font-size: 11px;
    }
    .scanPickerPanel .catalogTreeThumb {
      width: 54px;
      min-width: 54px;
      height: 38px;
    }
    .scanPickerCard {
      display: grid;
      grid-template-columns: 86px minmax(0, 1fr);
      gap: 9px;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #111315;
      padding: 7px;
      cursor: grab;
    }
    .scanPickerCard:active {
      cursor: grabbing;
    }
    .scanPickerCard.active {
      border-color: #f2b84b;
    }
    .scanPickerThumb {
      width: 86px;
      aspect-ratio: 16 / 10;
      border-radius: 6px;
      overflow: hidden;
      background: #080a0b;
      border: 1px solid #30373d;
    }
    .scanPickerThumb img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
    }
    .scanPickerCard b,
    .scanPickerCard small {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .scanPickerCard b {
      font-size: 13px;
      line-height: 1.25;
    }
    .scanPickerCard small {
      color: var(--muted);
      font-size: 11px;
      margin-top: 4px;
    }
    .folderGlyph {
      width: 70px;
      height: 50px;
      border: 2px solid #6ad8c3;
      border-radius: 6px;
      position: relative;
      background: rgba(22, 160, 133, 0.13);
    }
    .folderGlyph::before {
      content: "";
      position: absolute;
      left: 8px;
      top: -12px;
      width: 30px;
      height: 14px;
      border: 2px solid #6ad8c3;
      border-bottom: 0;
      border-radius: 5px 5px 0 0;
      background: rgba(22, 160, 133, 0.18);
    }
    #overlay {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 4;
      pointer-events: none;
      overflow: visible;
    }
    aside {
      border-left: 1px solid var(--line);
      padding: 12px;
      overflow: auto;
      background: var(--panel);
    }
    aside.hidden {
      display: none;
    }
    h3 {
      margin: 14px 0 10px;
      font-size: 15px;
      letter-spacing: 0;
    }
    .toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 12px;
    }
    .toolbar button {
      min-width: 42px;
      font-size: 13px;
    }
    .smallToolbar {
      gap: 6px;
      margin-top: 8px;
      margin-bottom: 14px;
    }
    .smallToolbar button {
      min-height: 32px;
      padding: 6px 8px;
      font-size: 12px;
    }
    .layerPanel {
      display: grid;
      gap: 6px;
      margin: 10px 0;
      padding: 10px 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
    .layerPanel label {
      display: grid;
      gap: 6px;
      color: var(--muted);
      font-size: 12px;
    }
    .layerPanel select {
      width: 100%;
      min-width: 0;
      max-width: none;
    }
    .layerControls {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 6px;
      align-items: stretch;
    }
    .layerButtons {
      display: grid;
      grid-template-rows: 1fr 1fr;
      gap: 4px;
    }
    .layerStepBtn {
      width: 38px;
      min-height: 18px;
      padding: 0;
    }
    .layerStepBtn::before {
      content: "";
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
    }
    #layerUpBtn::before {
      border-bottom: 7px solid currentColor;
    }
    #layerDownBtn::before {
      border-top: 7px solid currentColor;
    }
    .zoomPanel {
      margin: 10px 0 12px;
      padding: 10px 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
    .zoomPanelHeader {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 8px;
      font-size: 12px;
      color: var(--soft);
    }
    #zoomDetails {
      color: #8ee4cf;
      text-align: right;
    }
    .zoomReferenceBar {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .zoomReferenceBar button {
      min-height: 30px;
      min-width: 45px;
      padding: 5px 8px;
      font-size: 12px;
    }
    .zoomReferenceBar button.active {
      background: #b7791f;
      border-color: #f2b84b;
      color: #fff7dc;
    }
    .meta {
      font-size: 12px;
      color: var(--soft);
      line-height: 1.5;
      margin-bottom: 10px;
    }
    .hint {
      font-size: 12px;
      color: #8ee4cf;
      line-height: 1.45;
      min-height: 36px;
      margin-bottom: 12px;
    }
    .macroPreview {
      margin: 8px 0 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      background: #080a0b;
    }
    .macroPreview img {
      display: block;
      width: 100%;
      max-height: 180px;
      object-fit: contain;
    }
    .card {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 10px;
      margin-bottom: 10px;
      background: var(--panel-strong);
    }
    .card small {
      display: block;
      color: var(--muted);
      margin-top: 5px;
      line-height: 1.4;
    }
    .card .actions {
      display: flex;
      gap: 6px;
      margin-top: 8px;
    }
    .danger {
      background: var(--danger);
      border-color: #e16f5f;
    }
    .adminPanel {
      position: fixed;
      inset: 78px 24px 24px;
      z-index: 20;
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr);
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #181b1e;
      box-shadow: 0 24px 90px rgba(0, 0, 0, 0.55);
      overflow: hidden;
    }
    .adminHeader {
      padding: 12px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      border-bottom: 1px solid var(--line);
      background: var(--panel-strong);
    }
    .adminHeader h2 {
      margin: 0;
      font-size: 17px;
      letter-spacing: 0;
    }
    .adminTabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 10px 14px;
      border-bottom: 1px solid var(--line);
      background: #202326;
    }
    .adminBody {
      overflow: auto;
      padding: 14px;
    }
    .adminSection {
      display: grid;
      grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
      gap: 14px;
      align-items: start;
    }
    .adminList {
      display: grid;
      gap: 8px;
    }
    .checkGrid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 8px;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #141719;
    }
    .checkGrid label {
      display: flex;
      align-items: center;
      gap: 7px;
    }
    .checkLine {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .licenseAdminInfo {
      display: grid;
      gap: 8px;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #141719;
      color: var(--soft);
      font-size: 12px;
    }
    .licenseAdminInfo div {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      padding-bottom: 7px;
    }
    .licenseAdminInfo div:last-child {
      border-bottom: 0;
      padding-bottom: 0;
    }
    .licenseAdminInfo strong {
      color: var(--text);
      text-align: right;
      overflow-wrap: anywhere;
    }
    .listItem {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel-strong);
      padding: 9px;
      display: grid;
      gap: 6px;
    }
    .listItem.active {
      border-color: #f2b84b;
    }
    .folderHeader {
      background: #182522;
      border-color: #2f7f70;
    }
    .listItem b {
      color: var(--text);
    }
    .listItem small {
      color: var(--muted);
      line-height: 1.35;
    }
    .listActions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .toolIcon,
    .scaleGlyph {
      width: 16px;
      height: 16px;
      display: inline-block;
      position: relative;
      flex: 0 0 auto;
    }
    .toolIcon::before,
    .toolIcon::after,
    .scaleGlyph::before,
    .scaleGlyph::after {
      content: "";
      position: absolute;
      display: block;
    }
    .iconPan::before {
      width: 11px;
      height: 11px;
      border: 2px solid currentColor;
      left: 1px;
      top: 1px;
      transform: rotate(45deg);
    }
    .iconPoint::before {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: currentColor;
      left: 3px;
      top: 3px;
    }
    .iconLine::before {
      width: 15px;
      height: 2px;
      background: currentColor;
      left: 0;
      top: 7px;
      transform: rotate(-32deg);
    }
    .iconCalibrate::before,
    .scaleGlyph::before {
      width: 15px;
      height: 8px;
      border-left: 2px solid currentColor;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      left: 0;
      top: 4px;
    }
    .iconCircle::before {
      width: 13px;
      height: 13px;
      border: 2px solid currentColor;
      border-radius: 50%;
      left: 0;
      top: 0;
    }
    .iconSquare::before {
      width: 12px;
      height: 12px;
      border: 2px solid currentColor;
      left: 1px;
      top: 1px;
    }
    .iconRect::before {
      width: 15px;
      height: 10px;
      border: 2px solid currentColor;
      left: 0;
      top: 2px;
    }
    .iconList::before {
      width: 12px;
      height: 2px;
      left: 3px;
      top: 3px;
      background: currentColor;
      box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor;
    }
    .iconList::after {
      width: 2px;
      height: 2px;
      left: 0;
      top: 3px;
      background: currentColor;
      box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor;
    }
    .point {
      fill: var(--annotation-color, #2563eb);
      stroke: white;
      stroke-width: 2;
      vector-effect: non-scaling-stroke;
    }
    .pendingPoint {
      fill: var(--annotation-color, #2563eb);
      stroke: #111315;
      stroke-width: 2;
      vector-effect: non-scaling-stroke;
    }
    .line {
      stroke: var(--annotation-color, #2563eb);
      stroke-width: 3;
      vector-effect: non-scaling-stroke;
    }
    .draftLine {
      stroke: var(--annotation-color, #2563eb);
      stroke-width: 3;
      stroke-dasharray: 8 5;
      vector-effect: non-scaling-stroke;
    }
    .shape {
      fill: none;
      stroke: var(--annotation-color, #2563eb);
      stroke-width: 3;
      vector-effect: non-scaling-stroke;
    }
    .draftShape {
      fill: none;
      stroke: var(--annotation-color, #2563eb);
      stroke-width: 3;
      stroke-dasharray: 8 5;
      vector-effect: non-scaling-stroke;
    }
    .draftLabel {
      fill: #fff7dc;
      font-size: 14px;
      paint-order: stroke;
      stroke: black;
      stroke-width: 3px;
      stroke-linejoin: round;
    }
    .calibrationLine {
      stroke: #f2b84b;
      stroke-width: 3;
      stroke-dasharray: 8 6;
      vector-effect: non-scaling-stroke;
    }
    .label {
      fill: white;
      font-size: 14px;
      paint-order: stroke;
      stroke: black;
      stroke-width: 3px;
      stroke-linejoin: round;
    }
    #scaleHud {
      position: absolute;
      left: 14px;
      bottom: 14px;
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 8px 10px;
      min-width: 168px;
      background: rgba(17, 19, 21, 0.86);
      border: 1px solid rgba(241, 245, 244, 0.32);
      border-radius: 8px;
      color: var(--text);
      backdrop-filter: blur(4px);
      z-index: 5;
    }
    #scaleHud.hidden {
      display: none;
    }
    #scaleCornerBtn {
      width: 30px;
      height: 30px;
      min-height: 30px;
      padding: 0;
      border-color: rgba(241, 245, 244, 0.28);
      background: rgba(26, 29, 32, 0.92);
      color: #8ee4cf;
    }
    .scaleContent {
      display: grid;
      gap: 4px;
      min-width: 116px;
    }
    #scaleLine {
      height: 10px;
      width: 100px;
      border-left: 2px solid #f1f5f4;
      border-right: 2px solid #f1f5f4;
      border-bottom: 2px solid #f1f5f4;
    }
    .scaleReadout {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      font-size: 12px;
      color: var(--soft);
      white-space: nowrap;
    }
    #zoomText {
      color: #8ee4cf;
      font-weight: 700;
    }
    #zoomLayerText {
      font-size: 11px;
      color: var(--muted);
      white-space: nowrap;
    }
    .mobileLayerStepper {
      display: none;
    }
    .mobileLayerStepper button {
      width: 28px;
      min-width: 28px;
      height: 28px;
      min-height: 28px;
      padding: 0;
      border-radius: 7px;
      font-size: 16px;
      font-weight: 700;
      line-height: 1;
    }
    .mobileLayerStepper span {
      min-width: 24px;
      color: #f1f5f4;
      font-size: 13px;
      font-variant-numeric: tabular-nums;
      font-weight: 700;
      text-align: center;
    }
    .paneScaleHud {
      position: absolute;
      left: 10px;
      bottom: 10px;
      z-index: 8;
      min-width: 142px;
      max-width: calc(100% - 20px);
      display: grid;
      gap: 4px;
      padding: 7px 8px;
      border: 1px solid rgba(241, 245, 244, 0.3);
      border-radius: 7px;
      background: rgba(17, 19, 21, 0.86);
      color: var(--text);
      pointer-events: none;
      backdrop-filter: blur(4px);
    }
    .paneScaleLine {
      height: 9px;
      width: 96px;
      max-width: 100%;
      border-left: 2px solid #f1f5f4;
      border-right: 2px solid #f1f5f4;
      border-bottom: 2px solid #f1f5f4;
    }
    .paneScaleReadout {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      color: var(--soft);
      font-size: 11px;
      white-space: nowrap;
    }
    .paneZoomText {
      color: #8ee4cf;
      font-weight: 700;
    }
    .paneLayerText {
      max-width: 100%;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    @media (max-width: 900px) {
      .layout {
        grid-template-columns: 1fr;
        grid-template-rows: 62vh auto;
      }
      .adminPanel {
        inset: 10px;
      }
      .adminSection {
        grid-template-columns: 1fr;
      }
      .formGrid {
        grid-template-columns: 1fr;
      }
      aside {
        border-left: none;
        border-top: 1px solid var(--line);
      }
      header {
        flex-wrap: wrap;
      }
      select {
        min-width: 0;
        max-width: none;
        flex: 1 1 220px;
      }
    }

    .adminPage .adminPanel {
      position: static;
      inset: auto;
      height: calc(100vh - 58px);
      border-left: 0;
      border-right: 0;
      border-bottom: 0;
      border-radius: 0;
      box-shadow: none;
    }
    .adminPage .adminHeader #adminCloseBtn {
      white-space: nowrap;
    }
    .viewerPage #appShell {
      min-height: 100vh;
    }
    @media (max-width: 900px) {
      .adminPage .adminPanel {
        height: auto;
        min-height: calc(100vh - 58px);
      }
    }

    .viewerPage .layout {
      grid-template-columns: minmax(0, 1fr);
    }
    .viewerPage .layout:not(.catalogMode) {
      grid-template-columns: minmax(0, 1fr);
    }
    .leftDockHotspot {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 26px;
      z-index: 34;
    }
    .rotationDockHotspot {
      position: absolute;
      right: 0;
      top: var(--rotation-drawer-top);
      width: 26px;
      height: 74px;
      min-width: 26px;
      min-height: 74px;
      padding: 0;
      z-index: 36;
      border: 1px solid rgba(241, 245, 244, 0.24);
      border-right: 0;
      border-radius: 8px 0 0 8px;
      background: rgba(17, 19, 21, 0.9);
      transform: translateX(0);
      transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
      backdrop-filter: blur(6px);
      touch-action: none;
    }
    .scanOverlayDockHotspot {
      position: absolute;
      right: 0;
      top: var(--scan-overlay-drawer-top);
      width: 26px;
      height: 74px;
      min-width: 26px;
      min-height: 74px;
      padding: 0;
      z-index: 36;
      border: 1px solid rgba(241, 245, 244, 0.24);
      border-right: 0;
      border-radius: 8px 0 0 8px;
      background: rgba(17, 19, 21, 0.9);
      transform: translateX(0);
      transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
      backdrop-filter: blur(6px);
      touch-action: none;
    }
    #viewer.viewerFullscreenHost .fixedNavigator,
    #viewer:fullscreen .fixedNavigator {
      z-index: 1000 !important;
    }
    #viewer.viewerFullscreenHost .rotationDockHotspot,
    #viewer.viewerFullscreenHost .scanOverlayDockHotspot,
    #viewer:fullscreen .scanOverlayDockHotspot,
    #viewer:fullscreen .rotationDockHotspot {
      z-index: 1002 !important;
    }
    #viewer.viewerFullscreenHost .rotationPanel,
    #viewer.viewerFullscreenHost .scanOverlayPanel,
    #viewer:fullscreen .scanOverlayPanel,
    #viewer:fullscreen .rotationPanel {
      z-index: 1003 !important;
    }
    .rotationDockHotspot::after,
    .scanOverlayDockHotspot::after {
      content: "";
      position: absolute;
      left: 10px;
      top: 50%;
      width: 8px;
      height: 8px;
      border-right: 2px solid #8ee4cf;
      border-bottom: 2px solid #8ee4cf;
      transform: translateY(-50%) rotate(135deg);
    }
    .rotationDockHotspot.drawerOpen {
      transform: translateX(calc(0px - var(--rotation-drawer-width)));
    }
    .scanOverlayDockHotspot.drawerOpen {
      transform: translateX(calc(0px - var(--scan-overlay-drawer-width)));
    }
    .rotationDockHotspot.drawerOpen::after,
    .scanOverlayDockHotspot.drawerOpen::after {
      transform: translateY(-50%) rotate(-45deg);
    }
    .rotationDockHotspot.drawerDragging,
    .scanOverlayDockHotspot.drawerDragging,
    .scanOverlayPanel.drawerDragging,
    .rotationPanel.drawerDragging {
      visibility: visible;
      transition: none;
    }
    .annotationDock {
      position: absolute;
      left: 0;
      top: 50%;
      z-index: 35;
      display: block;
      width: 54px;
      max-height: calc(100% - 24px);
      padding: 0;
      border: 1px solid rgba(241, 245, 244, 0.24);
      border-left: 0;
      border-radius: 0 8px 8px 0;
      background: rgba(17, 19, 21, 0.96);
      box-shadow: 0 18px 70px rgba(0, 0, 0, 0.42);
      transform: translate(-56px, -50%);
      transition: transform 160ms ease;
      overflow: visible;
      backdrop-filter: blur(6px);
    }
    .annotationDock.hidden {
      display: none;
    }
    .leftDockHotspot:hover + .annotationDock,
    .annotationDock:hover,
    .annotationDock:focus-within {
      transform: translate(0, -50%);
    }
    .toolRail {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 7px;
      padding: 10px 7px;
      overflow: visible;
    }
    .toolTile {
      position: relative;
      width: 38px;
      min-width: 38px;
      height: 38px;
      min-height: 38px;
      padding: 0;
      border-radius: 8px;
      color: var(--soft);
      background: #171a1d;
    }
    .toolTile.active {
      color: #fff;
      background: var(--accent-strong);
      border-color: #32d3b2;
    }
    .toolTile:disabled {
      opacity: 0.42;
    }
    .dockDrawer {
      display: none;
    }
    .dockDrawer h3 {
      margin-top: 10px;
    }
    .dockDrawer .card {
      margin-bottom: 8px;
    }
    .dockDrawer .smallToolbar {
      margin-bottom: 10px;
    }
    .floatingPanel {
      position: absolute;
      z-index: 20;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(24, 27, 30, 0.97);
      box-shadow: 0 18px 70px rgba(0, 0, 0, 0.48);
      overflow: hidden;
      backdrop-filter: blur(6px);
    }
    .floatingPanel.hidden {
      display: none;
    }
    .floatingPanelHeader {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: 42px;
      padding: 9px 11px;
      border-bottom: 1px solid var(--line);
      background: rgba(17, 19, 21, 0.95);
      cursor: grab;
      user-select: none;
      touch-action: none;
    }
    .floatingPanel.dragging {
      box-shadow: 0 24px 90px rgba(0, 0, 0, 0.58);
    }
    .floatingPanelHeader:active {
      cursor: grabbing;
    }
    .floatingPanelHeader b {
      font-size: 14px;
      letter-spacing: 0;
    }
    .floatingPanelHeader button {
      width: 32px;
      min-width: 32px;
      min-height: 30px;
      padding: 0;
      cursor: pointer;
    }
    .floatingPanelBody {
      overflow: auto;
      padding: 12px;
    }
    .scanPickerPanel,
    .scanOverlayPickerPanel {
      right: 14px;
      top: 14px;
      width: min(380px, calc(100% - 28px));
      max-height: min(640px, calc(100% - 28px));
    }
    .scanPickerPanel .scanPickerHeader,
    .scanOverlayPickerPanel .scanPickerHeader {
      cursor: grab;
    }
    .infoWindow {
      left: 76px;
      top: 16px;
      width: min(590px, calc(100% - 100px));
      max-height: calc(100% - 32px);
    }
    .macroWindow {
      left: 96px;
      top: 92px;
      width: min(380px, calc(100% - 120px));
      max-height: min(360px, calc(100% - 120px));
    }
    .filePreviewPanel {
      left: 82px;
      top: 72px;
      width: min(900px, calc(100% - 120px));
      height: min(720px, calc(100% - 110px));
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
    }
    .scanOverlayPanel {
      right: 0;
      top: var(--scan-overlay-drawer-top);
      width: var(--scan-overlay-drawer-width);
      max-height: calc(100% - var(--scan-overlay-drawer-top) - 10px);
      z-index: 37;
      transform: translateX(calc(100% + 8px));
      visibility: hidden;
      transition: transform 180ms ease, visibility 0s linear 180ms;
      pointer-events: none;
    }
    .scanOverlayPanel.drawerOpen {
      transform: translateX(0);
      visibility: visible;
      transition-delay: 0s;
      pointer-events: auto;
    }
    .scanOverlayPanel .floatingPanelHeader {
      cursor: default;
    }
    .scanOverlayBody {
      display: grid;
      gap: 12px;
      min-width: 0;
    }
    .scanOverlayBody input[type="number"] {
      width: 100%;
      min-width: 0;
      max-width: none;
    }
    .scanOverlayCurrent {
      min-width: 0;
      display: grid;
      gap: 4px;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(8, 10, 11, 0.34);
    }
    .scanOverlayCurrent span {
      color: var(--soft);
      font-size: 11px;
    }
    .scanOverlayCurrent b {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 13px;
      letter-spacing: 0;
    }
    .scanOverlayActions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .scanOverlayActions button,
    #scanOverlayResetBtn {
      min-width: 0;
      padding-left: 8px;
      padding-right: 8px;
    }
    .scanOverlayRange {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 54px;
      gap: 10px;
      align-items: center;
    }
    .scanOverlayRange input[type="range"] {
      width: 100%;
      min-width: 0;
    }
    .scanOverlayValue {
      color: var(--text);
      text-align: right;
      font-size: 12px;
      font-variant-numeric: tabular-nums;
    }
    .scanOverlayCorrectionGrid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .scanOverlayNudgeRow {
      display: grid;
      grid-template-columns: minmax(90px, 0.9fr) minmax(132px, 1.1fr);
      gap: 12px;
      align-items: end;
    }
    .scanOverlayNudge {
      display: grid;
      grid-template-columns: repeat(3, 38px);
      grid-template-areas:
        ". up ."
        "left . right"
        ". down .";
      gap: 5px;
      justify-content: center;
    }
    .scanOverlayNudge button {
      width: 38px;
      min-width: 38px;
      min-height: 34px;
      padding: 0;
      font-size: 17px;
      line-height: 1;
    }
    .scanOverlayNudge .nudgeUp { grid-area: up; }
    .scanOverlayNudge .nudgeLeft { grid-area: left; }
    .scanOverlayNudge .nudgeRight { grid-area: right; }
    .scanOverlayNudge .nudgeDown { grid-area: down; }
    .scanOverlayStatus {
      min-height: 17px;
      color: var(--soft);
      font-size: 12px;
      line-height: 1.35;
    }
    .filePreviewBody {
      min-height: 0;
      overflow: auto;
      padding: 12px;
      background: #080a0b;
    }
    .filePreviewImage {
      display: block;
      max-width: 100%;
      max-height: 100%;
      margin: 0 auto;
      object-fit: contain;
    }
    .filePreviewFrame {
      width: 100%;
      height: 100%;
      min-height: 520px;
      border: 0;
      background: #fff;
    }
    .filePreviewText {
      margin: 0;
      white-space: pre-wrap;
      word-break: break-word;
      color: #eef7f5;
      font: 13px/1.45 Consolas, "Courier New", monospace;
    }
    .filePreviewEmpty {
      min-height: 220px;
      display: grid;
      place-items: center;
      align-content: center;
      gap: 8px;
      text-align: center;
      color: var(--soft);
    }
    .filePreviewActions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      padding: 10px 12px;
      border-top: 1px solid var(--line);
      background: rgba(17, 19, 21, 0.96);
    }
    .filePreviewActions a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 32px;
      padding: 6px 10px;
      border: 1px solid var(--line);
      border-radius: 6px;
      color: var(--text);
      text-decoration: none;
      background: #1a1f24;
    }
    .macroBody {
      display: grid;
      place-items: center;
      min-height: 220px;
      background: #080a0b;
    }
    .macroBody img {
      display: block;
      max-width: 100%;
      max-height: 300px;
      object-fit: contain;
    }
    .metadataPanel {
      margin: 0;
      color: var(--soft);
    }
    .metadataGrid {
      display: grid;
      grid-template-columns: minmax(120px, 38%) minmax(0, 1fr);
      column-gap: 14px;
      row-gap: 6px;
      font-size: 14px;
      line-height: 1.22;
    }
    .metadataGrid dt {
      color: #dce3e1;
      min-width: 0;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .metadataGrid dd {
      min-width: 0;
      margin: 0;
      color: #c7cfcc;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .metadataRaw {
      margin-top: 14px;
      border-top: 1px solid var(--line);
      padding-top: 10px;
      color: var(--muted);
      font-size: 12px;
    }
    .metadataRaw summary {
      cursor: pointer;
      color: #8ee4cf;
      margin-bottom: 8px;
    }
    .metadataRaw .metadataGrid {
      grid-template-columns: minmax(110px, 42%) minmax(0, 1fr);
      column-gap: 12px;
      font-size: 12px;
    }
    .annotationListWindow {
      left: 86px;
      top: 150px;
      width: min(390px, calc(100% - 112px));
      max-height: min(520px, calc(100% - 40px));
    }
    .annotationEditorWindow {
      left: 86px;
      top: 72px;
      width: min(430px, calc(100% - 112px));
      max-height: min(640px, calc(100% - 32px));
    }
    .annotationEditorForm {
      display: grid;
      gap: 10px;
    }
    .annotationEditorForm input,
    .annotationEditorForm textarea {
      width: 100%;
    }
    .annotationEditorForm textarea {
      min-height: 74px;
    }
    .annotationColorSection {
      display: grid;
      gap: 8px;
      padding-top: 2px;
    }
    .annotationColorSection > span {
      color: var(--soft);
      font-size: 12px;
    }
    .annotationColorChoices {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .annotationColorBtn {
      width: 30px;
      min-width: 30px;
      height: 30px;
      min-height: 30px;
      padding: 0;
      border-radius: 50%;
      border: 2px solid rgba(241, 245, 244, 0.62);
      background: var(--swatch-color);
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.24);
    }
    .annotationColorBtn:hover {
      border-color: #fff;
    }
    .annotationColorBtn.active {
      background: var(--swatch-color);
      border-color: #fff;
      box-shadow: 0 0 0 3px rgba(50, 211, 178, 0.54), inset 0 0 0 1px rgba(0, 0, 0, 0.24);
    }
    .annotationEditorActions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      padding-top: 2px;
    }
    .annotationCard {
      cursor: pointer;
      transition: border-color 120ms ease, background 120ms ease;
    }
    .annotationCardTitle {
      display: flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 5px;
    }
    .annotationCard strong {
      display: block;
      margin: 2px 0 3px;
      font-size: 13px;
    }
    .annotationSwatch {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 1px solid rgba(241, 245, 244, 0.72);
      background: var(--swatch-color);
      flex: 0 0 auto;
    }
    .annotationCard:hover,
    .annotationCard:focus-visible {
      border-color: rgba(66, 225, 195, 0.6);
      background: rgba(66, 225, 195, 0.08);
      outline: none;
    }
    .annotationCard .actions {
      margin-top: 8px;
    }
    .zoomDock {
      position: absolute;
      right: 14px;
      bottom: 14px;
      z-index: 11;
      display: flex;
      align-items: stretch;
      border: 1px solid rgba(241, 245, 244, 0.28);
      border-radius: 8px;
      background: rgba(17, 19, 21, 0.88);
      color: var(--soft);
      transform: translateX(calc(100% - 42px));
      transition: transform 160ms ease;
      overflow: hidden;
      backdrop-filter: blur(4px);
    }
    .zoomDock:hover,
    .zoomDock:focus-within {
      transform: translateX(0);
    }
    .zoomDockHandle {
      width: 42px;
      display: grid;
      place-items: center;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      font-size: 11px;
      color: #8ee4cf;
      border-left: 1px solid rgba(241, 245, 244, 0.16);
      order: 2;
    }
    .zoomDockBody {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px;
    }
    .zoomDock #zoomDetails {
      min-width: 38px;
      color: #8ee4cf;
      text-align: right;
      font-size: 12px;
      font-weight: 700;
    }
    .zoomDock .zoomReferenceBar {
      display: flex;
      flex-wrap: nowrap;
      gap: 6px;
    }
    .zoomDock .zoomReferenceBar button {
      width: 44px;
      min-width: 44px;
      min-height: 34px;
      padding: 5px;
      font-size: 12px;
      border-radius: 7px;
    }
    .zoomPanel {
      display: none;
    }
    .macroPreview {
      display: none;
    }
    .manualSyncCrosshair {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 19;
      width: 54px;
      height: 54px;
      pointer-events: none;
      transform: translate(-50%, -50%);
    }
    .manualSyncCrosshair::before,
    .manualSyncCrosshair::after,
    .manualSyncCrosshair span::before,
    .manualSyncCrosshair span::after {
      content: "";
      position: absolute;
      display: block;
      background: #e11d48;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.62);
    }
    .manualSyncCrosshair::before {
      left: 50%;
      top: 0;
      width: 2px;
      height: 54px;
      transform: translateX(-50%);
    }
    .manualSyncCrosshair::after {
      left: 0;
      top: 50%;
      width: 54px;
      height: 2px;
      transform: translateY(-50%);
    }
    .manualSyncCrosshair span::before {
      left: 50%;
      top: 50%;
      width: 18px;
      height: 18px;
      border: 2px solid #e11d48;
      border-radius: 50%;
      background: transparent;
      transform: translate(-50%, -50%);
    }
    .manualSyncCrosshair span::after {
      left: 50%;
      top: 50%;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }
    .manualSyncPanel {
      position: absolute;
      left: 50%;
      top: 12px;
      z-index: 46;
      display: flex;
      align-items: center;
      gap: 8px;
      max-width: calc(100% - 24px);
      padding: 8px 10px;
      border: 1px solid rgba(241, 245, 244, 0.3);
      border-radius: 8px;
      background: rgba(17, 19, 21, 0.94);
      color: var(--text);
      box-shadow: 0 14px 42px rgba(0, 0, 0, 0.42);
      transform: translateX(-50%);
      backdrop-filter: blur(6px);
    }
    .manualSyncPanel span {
      color: var(--soft);
      font-size: 12px;
      white-space: nowrap;
    }
    .manualSyncPanel button {
      min-height: 32px;
      padding: 5px 9px;
      font-size: 12px;
    }
    .rotationPanel {
      right: 0;
      top: var(--rotation-drawer-top);
      width: var(--rotation-drawer-width);
      max-height: calc(100% - var(--rotation-drawer-top) - 10px);
      z-index: 37;
      transform: translateX(calc(100% + 8px));
      visibility: hidden;
      transition: transform 180ms ease, visibility 0s linear 180ms;
      pointer-events: none;
    }
    .rotationPanel.drawerOpen {
      transform: translateX(0);
      visibility: visible;
      transition-delay: 0s;
      pointer-events: auto;
    }
    .rotationPanel .floatingPanelHeader {
      cursor: default;
    }
    .rotationPanelBody {
      display: grid;
      gap: 10px;
    }
    .rotationPaneLabel {
      color: var(--soft);
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .rotationDial {
      --rotation-angle: 0deg;
      --rotation-dial-size: 142px;
      --rotation-axis-size: 112px;
      --rotation-knob-offset: -58px;
      position: relative;
      width: var(--rotation-dial-size);
      height: var(--rotation-dial-size);
      margin: 2px auto;
      border: 2px solid rgba(142, 228, 207, 0.72);
      border-radius: 50%;
      background: radial-gradient(circle, rgba(142, 228, 207, 0.08), rgba(17, 19, 21, 0.42));
      touch-action: none;
      cursor: crosshair;
    }
    .rotationDialAxis {
      position: absolute;
      left: 50%;
      top: 50%;
      background: rgba(241, 245, 244, 0.22);
      transform: translate(-50%, -50%);
      pointer-events: none;
    }
    .rotationDialAxisVertical {
      width: 1px;
      height: var(--rotation-axis-size);
    }
    .rotationDialAxisHorizontal {
      width: var(--rotation-axis-size);
      height: 1px;
    }
    .rotationKnob {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 15px;
      height: 15px;
      border: 2px solid #fff;
      border-radius: 50%;
      background: #e11d48;
      box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.22);
      transform: translate(-50%, -50%) rotate(var(--rotation-angle)) translateY(var(--rotation-knob-offset));
      transform-origin: center;
      pointer-events: none;
    }
    .rotationResetBtn {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 42px;
      min-width: 42px;
      height: 42px;
      min-height: 42px;
      padding: 0;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
    }
    .rotationPanel input[type="range"] {
      width: 100%;
    }
    .iconInfo::before {
      content: "i";
      left: 3px;
      top: 1px;
      width: 13px;
      height: 13px;
      border: 2px solid currentColor;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-weight: 700;
      font-size: 11px;
      line-height: 12px;
      text-align: center;
    }
    .iconMacro::before {
      width: 15px;
      height: 11px;
      left: 0;
      top: 3px;
      border: 2px solid currentColor;
      border-radius: 3px;
    }
    .iconMacro::after {
      width: 5px;
      height: 5px;
      left: 5px;
      top: 6px;
      border: 1px solid currentColor;
      border-radius: 50%;
    }
    @media (max-width: 900px) {
      .viewerPage .layout {
        grid-template-rows: minmax(0, 1fr);
      }
      .annotationDock {
        width: 54px;
      }
      .infoWindow,
      .macroWindow,
      .filePreviewPanel,
      .scanOverlayPickerPanel,
      .annotationListWindow,
      .annotationEditorWindow {
        left: 50px;
        width: calc(100% - 64px);
      }
      .filePreviewPanel {
        top: 58px;
        height: calc(100% - 72px);
      }
    }

    /* Tablet and phone layout */
    @media (max-width: 700px), (max-width: 1100px) and (pointer: coarse) {
      html {
        min-height: 100%;
      }
      body {
        min-height: 100vh;
        min-height: 100dvh;
        overflow-x: hidden;
      }
      .viewerPage #appShell {
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
      }
      .viewerPage header {
        flex: 0 0 auto;
      }
      .viewerPage .layout {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
      }
      .viewerPage #viewerWrap {
        --rotation-map-top: 8px;
        --rotation-map-width: clamp(96px, 28vw, 168px);
        --rotation-map-height: clamp(64px, 19vw, 104px);
        --rotation-drawer-gap: 8px;
        --rotation-drawer-width: calc(var(--rotation-dial-size) + 24px);
        --scan-overlay-drawer-width: clamp(220px, 56vw, 280px);
        --rotation-dial-size: clamp(96px, min(34vw, 42dvh), 132px);
        --scan-overlay-drawer-top: calc(var(--rotation-drawer-top) + var(--rotation-dial-size) + 132px);
        --rotation-axis-size: clamp(72px, min(25vw, 32dvh), 104px);
        --rotation-knob-offset: clamp(-54px, -14vw, -40px);
        min-height: 0;
      }
      .viewerPage #viewer.viewerFullscreenHost {
        --rotation-map-top: calc(8px + env(safe-area-inset-top));
        --rotation-map-width: clamp(96px, 28vw, 168px);
        --rotation-map-height: clamp(64px, 19vw, 104px);
        --rotation-drawer-gap: 8px;
        --rotation-drawer-width: calc(var(--rotation-dial-size) + 24px);
        --scan-overlay-drawer-width: clamp(220px, 56vw, 280px);
        --rotation-dial-size: clamp(96px, min(34vw, 42dvh), 132px);
        --scan-overlay-drawer-top: calc(var(--rotation-drawer-top) + var(--rotation-dial-size) + 132px);
        --rotation-axis-size: clamp(72px, min(25vw, 32dvh), 104px);
        --rotation-knob-offset: clamp(-54px, -14vw, -40px);
      }
      #viewer,
      .splitPaneViewer,
      #viewer .openseadragon-canvas,
      .splitPaneViewer .openseadragon-canvas {
        touch-action: none;
      }
      .adminPage {
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
      }
      .adminPage header {
        flex: 0 0 auto;
      }
      .adminPage .adminPanel {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
      }
      .viewerPage .layout.catalogMode .leftDockHotspot,
      .viewerPage .layout.catalogMode .annotationDock,
      .viewerPage .layout.catalogMode .zoomDock,
      .viewerPage .layout.catalogMode #scaleHud,
      .viewerPage .layout.catalogMode .manualSyncPanel,
      .viewerPage .layout.catalogMode .scanOverlayPickerPanel,
      .viewerPage .layout.catalogMode .scanOverlayPanel,
      .viewerPage .layout.catalogMode .rotationDockHotspot,
      .viewerPage .layout.catalogMode .scanOverlayDockHotspot,
      .viewerPage .layout.catalogMode .rotationPanel,
      .viewerPage .layout.catalogMode .fixedNavigator,
      .viewerPage .layout.catalogMode .paneScaleHud {
        display: none !important;
      }
      button,
      select,
      input,
      textarea {
        min-height: 40px;
      }
      .adminSection {
        grid-template-columns: minmax(0, 1fr);
      }
      .adminTabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
      }
      .adminTabs button {
        flex: 0 0 auto;
        white-space: nowrap;
      }
      .adminBody {
        padding: 12px;
      }
      .checkGrid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      }
      .viewerPage .fixedNavigator {
        top: 8px;
        right: 8px;
        width: var(--rotation-map-width);
        height: var(--rotation-map-height);
        min-width: 0;
        min-height: 0;
        border: 1px solid rgba(255, 255, 255, 0.26);
        border-radius: 8px;
      }
      .viewerPage .floatingPanel {
        left: 10px !important;
        right: 10px !important;
        top: auto !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        width: auto !important;
        max-height: min(74dvh, 640px) !important;
        z-index: 45 !important;
      }
      .viewerPage .floatingPanelHeader {
        cursor: default;
      }
      .viewerPage .scanPickerPanel {
        max-height: min(64dvh, 560px) !important;
      }
      .viewerPage .rotationPanel {
        left: auto !important;
        right: 0 !important;
        top: var(--rotation-drawer-top) !important;
        bottom: auto !important;
        width: var(--rotation-drawer-width) !important;
        max-height: none !important;
        border-radius: 999px;
        overflow: visible;
        grid-template-rows: minmax(0, 1fr);
      }
      .viewerPage .rotationPanel .floatingPanelHeader,
      .viewerPage .rotationPaneLabel,
      .viewerPage .rotationPanel input[type="range"],
      .viewerPage .rotationPanelBody > label {
        display: none;
      }
      .viewerPage .rotationPanelBody {
        display: block;
        overflow: hidden;
        padding: 10px;
      }
      .viewerPage .rotationDial {
        --rotation-dial-size: inherit;
        --rotation-axis-size: inherit;
        --rotation-knob-offset: inherit;
        margin: 0;
      }
      .viewerPage .rotationResetBtn {
        width: clamp(36px, 10vw, 42px);
        min-width: clamp(36px, 10vw, 42px);
        height: clamp(36px, 10vw, 42px);
        min-height: clamp(36px, 10vw, 42px);
      }
      .viewerPage .rotationDockHotspot {
        top: var(--rotation-drawer-top);
        height: clamp(58px, 16vw, 74px);
        min-height: clamp(58px, 16vw, 74px);
      }
      .manualSyncPanel {
        top: calc(10px + env(safe-area-inset-top));
        flex-wrap: wrap;
        justify-content: center;
      }
      .manualSyncPanel span {
        white-space: normal;
        text-align: center;
      }
      .viewerPage .filePreviewPanel {
        top: calc(10px + env(safe-area-inset-top)) !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        height: auto !important;
        max-height: none !important;
        grid-template-rows: auto minmax(0, 1fr) auto;
      }
      .filePreviewBody {
        min-height: 0;
      }
      .filePreviewFrame {
        min-height: 0;
        height: 100%;
      }
      .filePreviewActions {
        flex-wrap: wrap;
      }
      .filePreviewActions a {
        min-height: 40px;
      }
      .leftDockHotspot {
        --mobile-dock-offset: 0px;
        display: block;
        left: 0;
        top: 50%;
        bottom: auto;
        width: 24px;
        height: 74px;
        z-index: 36;
        border: 1px solid rgba(241, 245, 244, 0.24);
        border-left: 0;
        border-radius: 0 8px 8px 0;
        background: rgba(17, 19, 21, 0.9);
        transform: translate3d(var(--mobile-dock-offset), -50%, 0);
        transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
        backdrop-filter: blur(6px);
        cursor: pointer;
        touch-action: none;
      }
      .leftDockHotspot::after {
        content: "";
        position: absolute;
        left: 7px;
        top: 50%;
        width: 8px;
        height: 8px;
        border-right: 2px solid #8ee4cf;
        border-bottom: 2px solid #8ee4cf;
        transform: translateY(-50%) rotate(-45deg);
      }
      .leftDockHotspot.mobileOpen {
        --mobile-dock-offset: 56px;
        left: 0;
      }
      .leftDockHotspot.mobileOpen::after {
        transform: translateY(-50%) rotate(135deg);
      }
      .annotationDock {
        --mobile-dock-offset: 0px;
        left: 0;
        right: auto;
        top: 50%;
        bottom: auto;
        width: 54px;
        max-height: calc(100% - 24px);
        border: 1px solid rgba(241, 245, 244, 0.24);
        border-left: 0;
        border-radius: 0 8px 8px 0;
        transform: translate3d(calc(-56px + var(--mobile-dock-offset)), -50%, 0);
        transition: transform 160ms ease;
        overflow: visible;
      }
      .leftDockHotspot.drawerDragging,
      .annotationDock.drawerDragging {
        transition: none;
      }
      .annotationDock:hover,
      .leftDockHotspot:hover + .annotationDock,
      .annotationDock:focus-within {
        transform: translate3d(calc(-56px + var(--mobile-dock-offset)), -50%, 0);
      }
      .annotationDock.mobileOpen,
      .annotationDock.mobileOpen:hover,
      .annotationDock.mobileOpen:focus-within {
        --mobile-dock-offset: 56px;
        transform: translate3d(calc(-56px + var(--mobile-dock-offset)), -50%, 0);
      }
      .toolRail {
        flex-direction: column;
        align-items: center;
        gap: 7px;
        max-height: calc(100dvh - 96px);
        padding: 10px 7px;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
      }
      .toolTile {
        width: 42px;
        min-width: 42px;
        height: 42px;
        min-height: 42px;
      }
      .annotationDock .dockDrawer {
        display: none !important;
      }
      .annotationDock .hint {
        display: none;
      }
      .annotationDock .layerPanel {
        flex: 1 0 250px;
        min-width: 250px;
        margin: 0;
        padding: 0;
        border: 0;
      }
      .annotationDock .layerPanel label {
        gap: 5px;
      }
      .annotationDock .smallToolbar {
        flex: 0 0 auto;
        align-content: end;
        margin: 0;
      }
      .zoomDock {
        left: auto;
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        max-width: none;
        transform: translateX(calc(100% - 42px));
        z-index: 34;
      }
      .zoomDock:hover,
      .zoomDock:focus-within {
        transform: translateX(0);
      }
      .zoomDockHandle {
        width: auto;
        min-width: 48px;
        padding: 0 9px;
        writing-mode: horizontal-tb;
        transform: none;
        order: 0;
        border-left: 0;
        border-right: 1px solid rgba(241, 245, 244, 0.16);
      }
      .zoomDockBody {
        min-width: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      .zoomDock .zoomReferenceBar {
        flex: 0 0 auto;
      }
      #scaleHud {
        left: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        min-width: 156px;
        max-width: calc(100% - 20px);
        z-index: 34;
      }
      .mobileLayerStepper:not(.hidden) {
        display: flex;
        align-items: center;
        gap: 4px;
        padding-left: 2px;
      }
      .scanBrowser {
        padding: 14px;
      }
      .scanBrowserHeader {
        align-items: stretch;
      }
      .scanCatalogGrid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      }
      .scanPickerCard {
        grid-template-columns: 74px minmax(0, 1fr);
      }
      .scanPickerThumb {
        width: 74px;
      }
    }

    @media (max-width: 760px) {
      header {
        padding: 8px;
        gap: 8px;
      }
      .viewerPage header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
      }
      .viewerPage .topBrand,
      .viewerPage #viewerTopControls,
      .viewerPage .topActions {
        grid-column: 1 / -1;
      }
      .topBrand {
        align-items: center;
      }
      #topContext {
        max-width: none;
      }
      .viewerPage #showCatalogBtn,
      .viewerPage #reloadBtn {
        justify-self: start;
      }
      .viewerPage #viewerTopControls {
        min-width: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
      }
      .viewerPage #viewerTopControls button,
      .viewerPage .layoutSwitch {
        flex: 0 0 auto;
      }
      .viewerPage .topActions {
        margin-left: 0;
        justify-content: space-between;
      }
      #userBadge {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .scanBrowserHeader {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
      }
      .scanBrowserControls {
        justify-content: stretch;
      }
      .scanBrowserControls input,
      .scanBrowserControls button {
        flex: 1 1 180px;
      }
      .scanCatalogGrid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      }
      .catalogTreeRow {
        --tree-indent: min(calc(var(--tree-depth, 0) * 14px), 64px);
        min-height: 52px;
      }
      .catalogTreeToggle {
        width: 32px;
        min-width: 32px;
        min-height: 32px;
      }
      .catalogTreeLabel {
        min-height: 44px;
      }
      .adminPage header {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
      }
      .adminPage .topActions {
        margin-left: 0;
        justify-content: stretch;
      }
      .adminPage .topActions button {
        flex: 1 1 130px;
      }
      .adminHeader {
        padding: 10px;
      }
      .adminTabs {
        padding: 8px 10px;
      }
      .adminBody {
        padding: 10px;
      }
      .listActions button,
      .toolbar button {
        flex: 1 1 120px;
      }
      .metadataGrid,
      .metadataRaw .metadataGrid {
        grid-template-columns: minmax(104px, 38%) minmax(0, 1fr);
        font-size: 13px;
      }
    }

    @media (max-width: 700px) and (orientation: portrait) {
      #viewerWrap.split2 #viewer {
        left: 0;
        top: 0;
        width: 100%;
        height: 50%;
      }
      #viewerWrap.split2 #primaryPaneBadge {
        max-width: calc(100% - 16px);
      }
      #viewerWrap.split2 .splitSlot[data-pane-index="1"] {
        left: 0;
        top: 50%;
        width: 100%;
        height: 50%;
      }
    }

    @media (max-width: 560px) {
      input,
      select,
      textarea {
        font-size: 16px;
      }
      button {
        min-height: 42px;
        padding: 8px 10px;
        font-size: 13px;
      }
      header h1 {
        font-size: 17px;
      }
      #topContext {
        font-size: 12px;
      }
      .layoutSwitch button {
        min-width: 42px;
        min-height: 40px;
      }
      .viewerPage .fixedNavigator {
        width: var(--rotation-map-width);
        height: var(--rotation-map-height);
        min-width: 0;
        min-height: 0;
      }
      .viewerPage #viewerWrap {
        --rotation-map-width: clamp(92px, 30vw, 128px);
        --rotation-map-height: clamp(60px, 21vw, 86px);
        --rotation-dial-size: clamp(88px, min(36vw, 40dvh), 116px);
        --rotation-axis-size: clamp(66px, min(27vw, 30dvh), 90px);
        --rotation-knob-offset: clamp(-48px, -15vw, -36px);
        --rotation-drawer-width: calc(var(--rotation-dial-size) + 22px);
        --scan-overlay-drawer-width: clamp(214px, 66vw, 268px);
        --scan-overlay-drawer-top: calc(var(--rotation-drawer-top) + var(--rotation-dial-size) + 124px);
      }
      .viewerPage #viewer.viewerFullscreenHost {
        --rotation-map-width: clamp(92px, 30vw, 128px);
        --rotation-map-height: clamp(60px, 21vw, 86px);
        --rotation-dial-size: clamp(88px, min(36vw, 40dvh), 116px);
        --rotation-axis-size: clamp(66px, min(27vw, 30dvh), 90px);
        --rotation-knob-offset: clamp(-48px, -15vw, -36px);
        --rotation-drawer-width: calc(var(--rotation-dial-size) + 22px);
        --scan-overlay-drawer-width: clamp(214px, 66vw, 268px);
        --scan-overlay-drawer-top: calc(var(--rotation-drawer-top) + var(--rotation-dial-size) + 124px);
      }
      .scanBrowser {
        padding: 10px;
      }
      .scanBrowserHeader h2 {
        font-size: 17px;
      }
      .scanCatalogGrid {
        grid-template-columns: minmax(0, 1fr);
      }
      .scanCard {
        min-height: 0;
      }
      .catalogTreeRow {
        --tree-indent: min(calc(var(--tree-depth, 0) * 10px), 42px);
        grid-template-columns: 32px minmax(0, 1fr);
        padding-left: calc(3px + var(--tree-indent));
      }
      .catalogTreeThumb {
        width: 48px;
        min-width: 48px;
        height: 36px;
      }
      .viewerPage .floatingPanel {
        left: 8px !important;
        right: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        max-height: min(82dvh, 680px) !important;
      }
      .viewerPage .rotationPanel {
        left: auto !important;
        right: 0 !important;
        top: var(--rotation-drawer-top) !important;
        bottom: auto !important;
        width: var(--rotation-drawer-width) !important;
        max-height: none !important;
      }
      .viewerPage .filePreviewPanel {
        top: calc(8px + env(safe-area-inset-top)) !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        max-height: none !important;
      }
      .filePreviewActions {
        justify-content: stretch;
      }
      .filePreviewActions a {
        flex: 1 1 150px;
      }
      .metadataGrid,
      .metadataRaw .metadataGrid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 4px;
      }
      .metadataGrid dd {
        padding-bottom: 5px;
      }
      .annotationDock {
        left: 0;
        right: auto;
        top: 50%;
        bottom: auto;
        max-height: calc(100% - 24px);
      }
      .toolRail {
        gap: 6px;
        padding: 7px;
        max-height: calc(100dvh - 92px);
      }
      .toolTile {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
      }
      .annotationDock .dockDrawer {
        padding: 0 7px 7px;
      }
      .annotationDock .layerPanel {
        flex-basis: 220px;
        min-width: 220px;
      }
      .zoomDock {
        left: auto;
        right: 8px;
        bottom: calc(8px + env(safe-area-inset-bottom));
      }
      .zoomDockHandle {
        min-width: 42px;
        padding: 0 7px;
      }
      .zoomDock .zoomReferenceBar button {
        width: 42px;
        min-width: 42px;
      }
      #scaleHud {
        left: 8px;
        bottom: calc(8px + env(safe-area-inset-bottom));
        min-width: 0;
        padding: 7px 8px;
        gap: 7px;
      }
      #scaleCornerBtn {
        width: 28px;
        height: 28px;
        min-height: 28px;
      }
      .scaleContent {
        min-width: 92px;
      }
      #scaleLine {
        width: 86px;
      }
      .mobileLayerStepper button {
        width: 26px;
        min-width: 26px;
        height: 26px;
        min-height: 26px;
      }
      .mobileLayerStepper span {
        min-width: 20px;
      }
      .annotationEditorActions {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }
      .annotationColorBtn {
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;
      }
      .adminPanel {
        border-radius: 0;
      }
      .adminTabs button {
        min-width: max-content;
      }
      .formGrid,
      .checkGrid {
        grid-template-columns: minmax(0, 1fr);
      }
      .listActions,
      .toolbar {
        align-items: stretch;
      }
    }

    .viewerPage .layout.catalogMode .leftDockHotspot,
    .viewerPage .layout.catalogMode .annotationDock,
    .viewerPage .layout.catalogMode .zoomDock,
    .viewerPage .layout.catalogMode #scaleHud,
    .viewerPage .layout.catalogMode .manualSyncPanel,
    .viewerPage .layout.catalogMode .scanOverlayPickerPanel,
    .viewerPage .layout.catalogMode .scanOverlayPanel,
    .viewerPage .layout.catalogMode .rotationDockHotspot,
    .viewerPage .layout.catalogMode .scanOverlayDockHotspot,
    .viewerPage .layout.catalogMode .rotationPanel,
    .viewerPage .layout.catalogMode .fixedNavigator,
    .viewerPage .layout.catalogMode .paneScaleHud {
      display: none !important;
    }

    @media (min-width: 1101px) {
      .viewerPage #appShell {
        display: block;
        min-height: 100vh;
      }
      .viewerPage .layout {
        display: grid;
        height: calc(100vh - 58px);
        min-height: auto;
        flex: none;
      }
      .viewerPage #viewerWrap {
        min-height: auto;
      }
      .adminPage {
        display: block;
        min-height: 100vh;
      }
      .adminPage .adminPanel {
        flex: none;
        min-height: auto;
        height: calc(100vh - 58px);
      }
    }

    .launcherPage {
      min-height: 100vh;
      background: var(--bg);
    }

    .launcherMain {
      width: min(1180px, 100%);
      margin: 0 auto;
      padding: 28px 18px;
    }

    .launcherHeader {
      margin-bottom: 18px;
    }

    .launcherHeader h2 {
      margin: 0 0 8px;
      font-size: 28px;
      letter-spacing: 0;
    }

    .launcherHeader p {
      margin: 0;
      color: var(--muted);
      line-height: 1.45;
    }

    .moduleGrid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 14px;
    }

    .moduleCard {
      min-height: 220px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      color: var(--text);
      text-decoration: none;
      padding: 16px;
      display: grid;
      align-content: space-between;
      gap: 12px;
    }

    .moduleCard:hover {
      border-color: #7a858c;
      background: #24292d;
    }

    .licenseSummary {
      grid-column: 1 / -1;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      padding: 16px;
      display: grid;
      grid-template-columns: minmax(220px, 0.85fr) minmax(260px, 1.15fr);
      gap: 14px;
    }

    .licenseSummary h3 {
      margin: 10px 0 6px;
      font-size: 20px;
      letter-spacing: 0;
    }

    .licenseSummary p {
      margin: 0;
      color: var(--soft);
      line-height: 1.45;
    }

    .licenseSummaryRows {
      display: grid;
      gap: 8px;
      align-content: center;
    }

    .licenseSummaryRow {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      border-bottom: 1px solid var(--line);
      padding-bottom: 8px;
      color: var(--soft);
    }

    .licenseSummaryRow:last-child {
      border-bottom: 0;
      padding-bottom: 0;
    }

    .licenseSummaryRow strong {
      color: var(--text);
      font-weight: 700;
      text-align: right;
    }

    @media (max-width: 700px) {
      .licenseSummary {
        grid-template-columns: minmax(0, 1fr);
      }
      .licenseSummaryRow {
        display: grid;
      }
      .licenseSummaryRow strong {
        text-align: left;
      }
    }

    .moduleBadge,
    .moduleAction {
      width: max-content;
      border: 1px solid var(--line);
      border-radius: 7px;
      padding: 4px 8px;
      color: var(--soft);
      font-size: 12px;
    }

    .moduleCard h3 {
      margin: 0;
      font-size: 22px;
      letter-spacing: 0;
    }

    .moduleCard p {
      margin: 0;
      color: var(--soft);
      line-height: 1.5;
      font-size: 14px;
    }

    .moduleAction {
      color: #d7fff3;
      border-color: #32d3b2;
      background: var(--accent-strong);
    }

    .activationPanel {
      width: min(620px, 100%);
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      color: var(--text);
      padding: 18px;
      display: grid;
      gap: 14px;
    }

    .activationPanel h3 {
      margin: 10px 0 6px;
      font-size: 22px;
      letter-spacing: 0;
    }

    .activationPanel p {
      margin: 0;
      color: var(--soft);
      line-height: 1.5;
    }

    .activationPanel label {
      display: grid;
      gap: 6px;
      color: var(--soft);
    }

    .activationPanel input {
      width: 100%;
      box-sizing: border-box;
      font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
      text-transform: uppercase;
      letter-spacing: 0;
    }

    .warningText {
      border: 1px solid rgba(244, 114, 182, 0.35);
      border-radius: 8px;
      background: rgba(127, 29, 29, 0.22);
      color: #fecdd3 !important;
      padding: 9px 10px;
    }