:root {
      --bg: #2b2b2b;
      --bg2: #222222;
      --surface: #323232;
      --border: #1a1a1a;
      --cyan: #00e5cc;
      --cyan-dim: rgba(0, 229, 204, .16);
      --amber: #f0a500;
      --danger: #e05050;
      --text: #d8d8d8;
      --muted: #777;
      --btn-h: 26px;
      --radius: 13px;
      --safe-bottom: env(safe-area-inset-bottom, 0px);
      --mobile-tabs-h: calc(40px * var(--font-scale));
      --mobile-nav-h: calc(48px * var(--font-scale));
      --mobile-overlay-gap: 10px;
      --font-scale: 1;
      --sidebar-width: 280px;
      --viewer-bg: linear-gradient(180deg, #1b1b1f 0%, #2a2a30 40%, #4f4f58 100%);
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'Consolas', 'SF Mono', 'Menlo', 'Courier New', monospace;
      font-size: calc(12px * var(--font-scale));
      height: 100dvh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      user-select: none;
    }

    /* ── OUTLINE BUTTON (signature style) ── */
    .btn {
      height: var(--btn-h);
      padding: 0 12px;
      background: transparent;
      border: 1px solid var(--cyan);
      border-radius: var(--radius);
      color: var(--cyan);
      font-family: inherit;
      font-size: calc(11px * var(--font-scale));
      cursor: pointer;
      white-space: nowrap;
      transition: background .12s, box-shadow .12s;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      flex-shrink: 0;
      justify-content: center;
      line-height: 1;
      letter-spacing: .03em;
    }

    .btn:hover {
      background: var(--cyan-dim);
      box-shadow: 0 0 8px rgba(0, 229, 204, .2);
    }

    .btn:active {
      background: rgba(0, 229, 204, .26);
    }

    .btn.active {
      background: var(--cyan-dim);
    }

    .btn:disabled,
    .btn.disabled {
      opacity: .45;
      cursor: default;
      pointer-events: none;
      box-shadow: none;
      background: transparent;
    }

    .btn.demo-disabled {
      opacity: .48;
      cursor: not-allowed;
      box-shadow: none;
    }

    .btn.demo-disabled:hover,
    .btn.demo-disabled:active {
      background: transparent;
      box-shadow: none;
    }

    .btn.danger {
      border-color: var(--danger);
      color: var(--danger);
    }

    .btn.danger:hover {
      background: rgba(224, 80, 80, .14);
      box-shadow: none;
    }

    .btn.amber {
      border-color: var(--amber);
      color: var(--amber);
    }

    .btn.amber:hover {
      background: rgba(240, 165, 0, .14);
      box-shadow: none;
    }

    .btn.sm {
      height: 22px;
      padding: 0 9px;
      font-size: calc(10px * var(--font-scale));
      border-radius: 11px;
    }

    /* ── TOP TOOLBAR ── */
    #topbar {
      height: 40px;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      padding: 0 10px;
      gap: 6px;
      z-index: 100;
      flex-shrink: 0;
    }

    #topbar .brand-wrap {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
      min-width: 0;
    }

    #topbar .brand-icon {
      width: 40px;
      height: 40px;
      object-fit: contain;
      flex-shrink: 0;
      display: block;
    }

    #topbar .logo {
      /* Project / Visualization のタイトルと同じ見え方に揃える */
      font-family: Consolas, 'SF Mono', Menlo, monospace;
      font-size: calc(18px * var(--font-scale));
      font-weight: 700;
      letter-spacing: .08em;
      color: var(--cyan);
      line-height: 1.1;
      text-transform: none;
      white-space: nowrap;
      margin-right: 4px;
    }

    #home-link {
      color: var(--cyan);
      text-decoration: none;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-width: 0;
      height: var(--btn-h);
      border: 1px solid var(--cyan);
      border-radius: var(--radius);
      flex-shrink: 0;
      padding: 0 12px;
      overflow: hidden;
      transition: background .12s, color .12s, box-shadow .12s;
      font-size: calc(11px * var(--font-scale));
      letter-spacing: .03em;
      white-space: nowrap;
    }

    #home-link img {
      width: 14px;
      height: 14px;
      object-fit: contain;
      display: block;
      flex: 0 0 auto;
    }

    #home-link span {
      display: inline-block;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .toolbar-icon {
      width: 14px;
      height: 14px;
      object-fit: contain;
      display: block;
    }

    #home-link:hover {
      background: var(--cyan-dim);
      color: var(--cyan);
      box-shadow: 0 0 8px rgba(0, 229, 204, .2);
    }

    .crumb-sep {
      color: #888;
      flex-shrink: 0;
      font-size: calc(11px * var(--font-scale));
    }

    .sep {
      width: 1px;
      height: 16px;
      background: #444;
      flex-shrink: 0;
      margin: 0 2px;
    }

    #project-name-label,
    #scene-name-label {
      font-size: calc(11px * var(--font-scale));
      color: #ffffff;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #project-name-label {
      flex-shrink: 1;
      max-width: 24vw;
    }

    #scene-name-label {
      flex: 1;
    }

    /* ── MAIN ── */
    #main {
      flex: 1;
      display: flex;
      overflow: hidden;
      position: relative;
    }

    /* ── CANVAS ── */
    #canvas-wrapper {
      flex: 1;
      position: relative;
      overflow: hidden;
      background: var(--viewer-bg);
      touch-action: none;
      overscroll-behavior: none;
    }

    #renderCanvas {
      width: 100%;
      height: 100%;
      display: block;
      touch-action: none;
      outline: none;
    }

    #canvas-wrapper.pick-mode {
      cursor: crosshair;
    }

    /* ── MARKERS ── */
    .marker {
      position: absolute;
      transform: translate(-50%, -50%);
      cursor: pointer;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .marker-ring {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: 1.5px solid #2F6F73;
      background: #2F6F73;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: calc(10px * var(--font-scale));
      font-weight: 700;
      color: #ffffff;
      transition: all .15s;
      box-shadow: 0 0 6px rgba(47, 111, 115, .25);
    }

    .marker:hover .marker-ring {
      border-color: #2F6F73;
      background: #2F6F73;
      color: #ffffff;
      box-shadow: 0 0 12px rgba(47, 111, 115, .45);
      transform: scale(1.15);
    }

    .marker.active .marker-ring {
      border-color: var(--amber);
      color: #ffffff;
      background: var(--amber);
      box-shadow: 0 0 10px rgba(240, 165, 0, .35);
    }

    .marker-label {
      position: absolute;
      left: 50%;
      top: -26px;
      transform: translateX(-50%);
      background: #2F6F73;
      border: 1px solid #2F6F73;
      border-radius: 2px;
      padding: 2px 7px;
      font-size: calc(10px * var(--font-scale));
      color: #ffffff;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transition: opacity .12s;
    }

    .marker:hover .marker-label {
      opacity: 1;
      background: #2F6F73;
      border-color: #2F6F73;
      color: #ffffff;
    }

    .marker.active .marker-label {
      opacity: 1;
      background: #C98500;
      border-color: #C98500;
      color: #ffffff;
    }

    .marker.active {
      cursor: grab;
    }

    .marker.dragging {
      z-index: 40;
      cursor: grabbing;
    }

    .marker.dragging .marker-ring {
      border-color: var(--amber);
      color: #ffffff;
      background: var(--amber);
      box-shadow: 0 0 14px rgba(240, 165, 0, .45);
      transform: scale(1.22);
    }

    #canvas-wrapper.dragging-anno {
      cursor: grabbing;
    }

    /* ── COORD HUD ── */
    #coord-hud {
      position: absolute;
      bottom: 8px;
      left: 8px;
      background: rgba(20, 20, 20, .7);
      border: 1px solid #333;
      border-radius: 2px;
      padding: 3px 8px;
      font-size: calc(9px * var(--font-scale));
      color: #555;
      pointer-events: none;
      letter-spacing: .03em;
    }

    /* ── SCENE TABS (mobile) ── */
    #scene-tabs-bar {
      flex-shrink: 0;
      background: var(--surface);
      border-top: 1px solid var(--border);
      display: flex;
      overflow-x: auto;
      min-height: var(--mobile-tabs-h);
      padding: 6px 8px calc(6px + var(--safe-bottom));
      padding-right: 170px;
      gap: 5px;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    #scene-tabs-bar::-webkit-scrollbar {
      display: none;
    }

    .scene-tab {
      flex-shrink: 0;
      height: 24px;
      padding: 0 12px;
      border-radius: 12px;
      background: transparent;
      border: 1px solid #444;
      color: var(--muted);
      font-family: inherit;
      font-size: calc(10px * var(--font-scale));
      cursor: pointer;
      white-space: nowrap;
      transition: all .12s;
    }

    .scene-tab:hover {
      border-color: var(--cyan);
      color: var(--text);
    }

    .scene-tab.active {
      border-color: var(--cyan);
      color: var(--cyan);
      background: var(--cyan-dim);
    }

    /* ── MOBILE MODE BAR ── */
    #mobile-mode-bar {
      display: none;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 320;
      gap: 8px;
      padding: 8px 10px calc(8px + var(--safe-bottom));
      background: rgba(34, 34, 34, .96);
      border-top: 1px solid var(--border);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .mobile-mode-btn {
      flex: 1;
      min-width: 0;
      height: 40px;
      padding: 0 8px;
      border-radius: 14px;
      border: 1px solid #444;
      background: transparent;
      color: var(--muted);
      font-family: inherit;
      font-size: calc(10px * var(--font-scale));
      cursor: pointer;
      white-space: nowrap;
      transition: all .12s;
    }

    .mobile-mode-btn.active {
      border-color: var(--cyan);
      color: var(--cyan);
      background: var(--cyan-dim);
    }

    .mobile-mode-btn.accent.active {
      border-color: var(--amber);
      color: var(--amber);
      background: rgba(240, 165, 0, .12);
    }

    /* ── BOTTOM PANEL (mobile) ── */
    #bottom-panel {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: var(--surface);
      border-top: 1px solid var(--border);
      z-index: 220;
      transform: translateY(100%);
      transition: transform .25s cubic-bezier(.4, 0, .2, 1);
      max-height: 58dvh;
      display: flex;
      flex-direction: column;
    }

    #bottom-panel.open {
      transform: translateY(0);
    }

    #bp-header {
      display: flex;
      align-items: center;
      padding: 7px 10px;
      border-bottom: 1px solid var(--border);
      gap: 8px;
      flex-shrink: 0;
    }

    #bp-title {
      flex: 1;
      font-size: calc(11px * var(--font-scale));
      color: var(--cyan);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #bp-body {
      overflow-y: auto;
      padding: 8px 10px 24px;
      scrollbar-width: thin;
      scrollbar-color: #3a3a3a transparent;
    }

    .url-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 8px;
      background: #282828;
      border: 1px solid #383838;
      border-radius: 3px;
      margin-bottom: 5px;
      cursor: pointer;
      transition: border-color .12s;
    }

    .url-row:hover {
      border-color: var(--cyan);
    }

    .url-row .icon {
      font-size: calc(13px * var(--font-scale));
      flex-shrink: 0;
    }

    .url-row .url-text {
      flex: 1;
      font-size: calc(10px * var(--font-scale));
      color: var(--muted);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .url-row .arr {
      font-size: calc(9px * var(--font-scale));
      color: #555;
      flex-shrink: 0;
    }

    /* ── MAKE BUTTON (mobile floating) ── */
    #btn-make {
      position: fixed;
      right: 12px;
      bottom: calc(var(--mobile-tabs-h) + 12px + var(--safe-bottom));
      z-index: 300;
      max-width: calc(100vw - 24px);
    }

    #btn-make-inner {
      min-height: 32px;
      padding: 0 14px;
      justify-content: center;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
    }

    /* ── DEBUG CONSOLE ── */
    #debug-console {
      position: fixed;
      bottom: 46px;
      right: 12px;
      width: min(560px, calc(100vw - 24px));
      max-height: min(62dvh, 520px);
      background: rgba(18, 18, 18, .97);
      border: 1px solid var(--cyan);
      border-radius: 10px;
      z-index: 260;
      display: none;
      flex-direction: column;
      box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
      user-select: text;
      -webkit-user-select: text;
    }

    #debug-console.show {
      display: flex;
    }

    #debug-console,
    #debug-console * {
      user-select: text;
      -webkit-user-select: text;
    }

    #debug-hd {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 7px 8px;
      border-bottom: 1px solid #333;
      font-size: calc(10px * var(--font-scale));
      font-weight: 700;
      color: var(--cyan);
      letter-spacing: .08em;
    }

    #debug-hd-left {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }

    #debug-hd-title {
      color: var(--cyan);
    }

    #debug-hd-sub {
      font-size: calc(8px * var(--font-scale));
      color: #6f6f6f;
      letter-spacing: .03em;
      font-weight: 400;
      text-transform: none;
    }

    #debug-hd-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }

    #debug-log {
      max-height: min(52dvh, 430px);
      overflow: auto;
      padding: 8px;
      font-size: calc(9px * var(--font-scale));
      color: #b5b5b5;
      line-height: 1.6;
      scrollbar-width: thin;
      scrollbar-color: #333 transparent;
      overscroll-behavior: contain;
    }

    .debug-entry {
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 8px;
      padding: 7px 8px;
      background: rgba(255, 255, 255, .02);
      margin-bottom: 7px;
    }

    .debug-entry:last-child {
      margin-bottom: 0;
    }

    .debug-entry.ok {
      border-color: rgba(0, 229, 204, .24);
    }

    .debug-entry.err {
      border-color: rgba(224, 80, 80, .28);
    }

    .debug-entry.warn {
      border-color: rgba(240, 165, 0, .26);
    }

    .debug-entry-hd {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 4px;
    }

    .debug-entry-title {
      flex: 1;
      min-width: 0;
      color: #d7d7d7;
      white-space: pre-wrap;
      word-break: break-word;
    }

    .debug-entry.err .debug-entry-title {
      color: #ffb4b4;
    }

    .debug-entry.ok .debug-entry-title {
      color: #9af1e5;
    }

    .debug-entry.warn .debug-entry-title {
      color: #ffd28f;
    }

    .debug-entry-ts {
      flex-shrink: 0;
      color: #666;
      font-size: calc(8px * var(--font-scale));
    }

    .debug-entry-meta {
      margin-top: 4px;
      padding-top: 5px;
      border-top: 1px dashed rgba(255, 255, 255, .08);
      color: #8f8f8f;
      white-space: pre-wrap;
      word-break: break-word;
      font-size: calc(8px * var(--font-scale));
      line-height: 1.55;
    }


    /* ── PDF PAGE TOOLBAR ── */
    #pdf-page-toolbar {
      position: absolute;
      top: 8px;
      right: 8px;
      z-index: 26;
      display: none;
      align-items: center;
      gap: 6px;
      padding: 6px 8px;
      background: rgba(20, 20, 20, .82);
      border: 1px solid #333;
      border-radius: 999px;
      box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }

    #pdf-page-toolbar.show {
      display: flex;
    }

    #pdf-page-label {
      min-width: 82px;
      text-align: center;
      font-size: calc(10px * var(--font-scale));
      color: #d8d8d8;
      letter-spacing: .03em;
      white-space: nowrap;
    }


    /* ── PDF RENDER PANEL ── */
    #pdf-render-panel {
      position: absolute;
      inset: 0;
      z-index: 19;
      display: none;
      background: #101317;
      color: #e2e8f0;
      flex-direction: column;
    }

    #pdf-render-toolbar {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      padding: 8px 10px;
      border-bottom: 1px solid #252b33;
      background: #141920;
    }

    #pdf-render-title {
      font-size: calc(11px * var(--font-scale));
      color: #fff;
      font-weight: 700;
      max-width: 32vw;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #pdf-render-info {
      flex: 1;
      min-width: 120px;
      font-size: calc(10px * var(--font-scale));
      color: #94a3b8;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #pdf-render-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    #pdf-render-page {
      min-width: 74px;
      text-align: center;
      font-size: calc(10px * var(--font-scale));
      color: #d8d8d8;
    }

    #pdf-render-stage {
      position: relative;
      flex: 1;
      overflow: hidden;
      background: #0b0e12;
      cursor: grab;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
    }

    #pdf-render-stage.dragging {
      cursor: grabbing;
    }

    #pdf-render-inner {
      position: absolute;
      left: 0;
      top: 0;
      transform-origin: 0 0;
      will-change: transform;
      user-select: none;
      -webkit-user-select: none;
    }

    #pdf-render-canvas {
      display: none;
      max-width: none;
      max-height: none;
      image-rendering: auto;
      box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
      background: #fff;
      pointer-events: none;
      user-select: none;
      -webkit-user-select: none;
    }

    #pdf-render-status {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      padding: 8px 12px;
      border: 1px solid #333;
      border-radius: 999px;
      background: rgba(14, 18, 24, .9);
      color: #cbd5e1;
      font-size: calc(10px * var(--font-scale));
      pointer-events: none;
    }

    body.pdf-mode #renderCanvas,
    body.pdf-mode #coord-hud,
    body.pdf-mode #pdf-page-toolbar,
    body.pdf-mode #image-render-panel,
    body.pdf-mode #xlsx-render-panel {
      display: none !important;
    }

    body.pdf-mode #pdf-render-panel {
      display: flex;
    }

    body.pdf-mode .marker {
      z-index: 28;
    }

    body.pdf-mode #canvas-wrapper.pick-mode #pdf-render-stage {
      cursor: crosshair;
    }

    /* ── IMAGE RENDER PANEL ── */
    #image-render-panel {
      position: absolute;
      inset: 0;
      z-index: 17;
      display: none;
      background: #0f1216;
      color: #e2e8f0;
      flex-direction: column;
    }

    #image-render-toolbar {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      padding: 8px 10px;
      border-bottom: 1px solid #252b33;
      background: #141920;
    }

    #image-render-title {
      font-size: calc(11px * var(--font-scale));
      color: #fff;
      font-weight: 700;
      max-width: 32vw;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #image-render-info {
      flex: 1;
      min-width: 120px;
      font-size: calc(10px * var(--font-scale));
      color: #94a3b8;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #image-render-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    #image-render-stage {
      position: relative;
      flex: 1;
      overflow: hidden;
      background: #0b0e12;
      cursor: grab;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
    }

    #image-render-stage.dragging {
      cursor: grabbing;
    }

    #image-render-inner {
      position: absolute;
      left: 0;
      top: 0;
      transform-origin: 0 0;
      will-change: transform;
      user-select: none;
      -webkit-user-select: none;
    }

    #image-render-image {
      display: none;
      max-width: none;
      max-height: none;
      image-rendering: auto;
      box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
      background: #fff;
      pointer-events: none;
      user-select: none;
      -webkit-user-select: none;
      -webkit-user-drag: none;
    }

    #image-render-status {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      padding: 8px 12px;
      border: 1px solid #333;
      border-radius: 999px;
      background: rgba(14, 18, 24, .9);
      color: #cbd5e1;
      font-size: calc(10px * var(--font-scale));
      pointer-events: none;
    }

    body.image-mode #renderCanvas,
    body.image-mode #coord-hud,
    body.image-mode #pdf-page-toolbar,
    body.image-mode #xlsx-render-panel {
      display: none !important;
    }

    body.image-mode #image-render-panel {
      display: flex;
    }

    body.image-mode .marker {
      z-index: 28;
    }

    body.image-mode #canvas-wrapper.pick-mode #image-render-stage {
      cursor: crosshair;
    }

    /* ── XLSX RENDER PANEL ── */
    #xlsx-render-panel {
      position: absolute;
      inset: 0;
      z-index: 18;
      display: none;
      background: #101317;
      color: #e2e8f0;
      flex-direction: column;
    }

    #xlsx-render-toolbar {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      padding: 8px 10px;
      border-bottom: 1px solid #252b33;
      background: #141920;
    }

    #xlsx-render-title {
      font-size: calc(11px * var(--font-scale));
      color: #fff;
      font-weight: 700;
      max-width: 32vw;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #xlsx-render-info {
      flex: 1;
      min-width: 120px;
      font-size: calc(10px * var(--font-scale));
      color: #94a3b8;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #xlsx-render-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    #xlsx-render-page {
      min-width: 74px;
      text-align: center;
      font-size: calc(10px * var(--font-scale));
      color: #d8d8d8;
    }

    #xlsx-render-stage {
      position: relative;
      flex: 1;
      overflow: hidden;
      background: #0b0e12;
      cursor: grab;
      touch-action: none;
      user-select: none;
    }

    #xlsx-render-stage.dragging {
      cursor: grabbing;
    }

    #xlsx-render-inner {
      position: absolute;
      left: 0;
      top: 0;
      transform-origin: 0 0;
      will-change: transform;
    }

    #xlsx-render-canvas,
    #xlsx-render-image {
      display: none;
      max-width: none;
      max-height: none;
      image-rendering: auto;
      box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
      background: #fff;
    }

    #xlsx-render-status {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      padding: 8px 12px;
      border: 1px solid #333;
      border-radius: 999px;
      background: rgba(14, 18, 24, .9);
      color: #cbd5e1;
      font-size: calc(10px * var(--font-scale));
      pointer-events: none;
    }

    body.xlsx-mode #renderCanvas,
    body.xlsx-mode #coord-hud,
    body.xlsx-mode #pdf-page-toolbar {
      display: none !important;
    }

    body.xlsx-mode #xlsx-render-panel {
      display: flex;
    }

    /* ── LOADING ── */
    #loading {
      position: fixed;
      inset: 0;
      background: var(--bg2);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 999;
      gap: 14px;
    }

    #loading .logo-lg {
      font-size: calc(14px * var(--font-scale));
      font-weight: 700;
      letter-spacing: .14em;
      color: var(--cyan);
      text-transform: uppercase;
    }

    #progress-bar-wrap {
      width: 200px;
      height: 2px;
      background: #333;
      border-radius: 1px;
      overflow: hidden;
    }

    #progress-bar {
      height: 100%;
      background: var(--cyan);
      border-radius: 1px;
      width: 0%;
      transition: width .2s;
    }

    #progress-label {
      font-size: calc(10px * var(--font-scale));
      color: var(--muted);
    }

    /* ── IFRAME MODAL ── */
    #iframe-modal {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .8);
      z-index: 500;
      display: none;
      flex-direction: column;
    }

    #iframe-modal.open {
      display: flex;
    }

    #iframe-hd {
      height: 36px;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      padding: 0 10px;
      gap: 8px;
    }

    #iframe-url-label {
      flex: 1;
      font-size: calc(10px * var(--font-scale));
      color: var(--muted);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #iframe-modal iframe {
      flex: 1;
      border: none;
      background: #fff;
    }

    #iframe-fallback {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 32px;
    }

    #iframe-fallback p {
      font-size: calc(11px * var(--font-scale));
      color: var(--muted);
      text-align: center;
    }

    #iframe-fallback a {
      padding: 0 14px;
      height: 26px;
      line-height: 24px;
      border: 1px solid var(--cyan);
      border-radius: 13px;
      color: var(--cyan);
      font-family: inherit;
      font-size: calc(10px * var(--font-scale));
      text-decoration: none;
      transition: background .12s;
    }

    #iframe-fallback a:hover {
      background: var(--cyan-dim);
    }

    /* ── ANNO FORM / DETAIL SHEET ── */
    #anno-form-modal {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .65);
      z-index: 400;
      display: none;
      align-items: flex-end;
      justify-content: center;
    }

    #anno-form-modal.open {
      display: flex;
    }

    #anno-form {
      background: var(--surface);
      border: 1px solid var(--border);
      border-bottom: none;
      border-radius: 18px 18px 0 0;
      padding: 16px 16px calc(26px + var(--safe-bottom));
      width: 100%;
      max-width: 560px;
      max-height: min(82dvh, 760px);
      overflow-y: auto;
      transform: translateY(100%);
      transition: transform .25s cubic-bezier(.4, 0, .2, 1);
      box-shadow: 0 -12px 32px rgba(0, 0, 0, .3);
    }

    #anno-form-modal.open #anno-form {
      transform: translateY(0);
    }

    #anno-form h3 {
      font-size: calc(10px * var(--font-scale));
      font-weight: 700;
      color: var(--cyan);
      letter-spacing: .1em;
      text-transform: uppercase;
      margin-bottom: 14px;
    }

    .ff {
      margin-bottom: 10px;
    }

    .ff label {
      display: block;
      font-size: calc(9px * var(--font-scale));
      color: var(--muted);
      margin-bottom: 4px;
      text-transform: uppercase;
      letter-spacing: .07em;
    }

    .ff input,
    .ff textarea {
      width: 100%;
      background: #282828;
      border: 1px solid #383838;
      border-radius: 10px;
      color: var(--text);
      padding: 10px 12px;
      font-family: inherit;
      font-size: calc(11px * var(--font-scale));
      outline: none;
      transition: border-color .12s, box-shadow .12s;
    }

    .ff input:focus,
    .ff textarea:focus {
      border-color: var(--cyan);
      box-shadow: 0 0 0 3px rgba(0, 229, 204, .08);
    }

    .ff textarea {
      min-height: 110px;
      resize: vertical;
    }

    .ff select {
      width: 100%;
      background: #282828;
      border: 1px solid #383838;
      border-radius: 10px;
      color: var(--text);
      padding: 10px 12px;
      font-family: inherit;
      font-size: calc(11px * var(--font-scale));
      outline: none;
      cursor: pointer;
      transition: border-color .12s, box-shadow .12s;
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
    }

    .ff select:focus {
      border-color: var(--cyan);
      box-shadow: 0 0 0 3px rgba(0, 229, 204, .08);
    }

    #new-scene-row {
      margin-top: 6px;
      display: none;
    }

    .form-actions {
      display: flex;
      gap: 8px;
      margin-top: 14px;
    }

    .form-actions .btn {
      flex: 1;
      min-height: 34px;
    }

    .photo-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 8px;
    }

    .photo-row .btn {
      min-width: 120px;
    }

    .photo-preview-wrap {
      margin-top: 8px;
      border: 1px dashed #404040;
      border-radius: 12px;
      padding: 10px;
      background: #282828;
    }

    .photo-preview {
      width: 100%;
      max-height: 220px;
      object-fit: contain;
      display: none;
      border-radius: 10px;
      border: 1px solid #3a3a3a;
      background: #1f1f1f;
    }

    .photo-info {
      margin-top: 6px;
      font-size: calc(10px * var(--font-scale));
      color: #777;
    }

    .sheet-note {
      margin-top: 8px;
      font-size: calc(10px * var(--font-scale));
      color: #666;
      line-height: 1.6;
    }

    .detail-sec {
      margin-bottom: 14px;
    }

    .detail-cap {
      font-size: calc(11px * var(--font-scale));
      color: #dfe7ef;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-bottom: 7px;
    }

    .detail-card {
      background: #282828;
      border: 1px solid #383838;
      border-radius: 10px;
      padding: 10px 12px;
      font-size: calc(11px * var(--font-scale));
      color: var(--text);
      line-height: 1.7;
      white-space: pre-wrap;
      word-break: break-word;
      overflow-wrap: anywhere;
    }

    .detail-card.content-card {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      min-height: 96px;
      height: auto !important;
      max-height: none !important;
      padding: 12px 14px;
      line-height: 1.8;
      white-space: pre-wrap !important;
      overflow: visible !important;
      overflow-wrap: anywhere !important;
      word-break: break-word !important;
      word-wrap: break-word !important;
      line-break: anywhere !important;
      user-select: text;
      -webkit-user-select: text;
    }

    .detail-card.empty {
      color: #666;
    }

    .detail-edit-input,
    .detail-edit-textarea {
      display: block;
      width: 100%;
      background: #d4d4d4;
      border: 1px solid #8e8e8e;
      border-radius: 10px;
      color: #000000;
      padding: 10px 12px;
      font-family: inherit;
      font-size: calc(11px * var(--font-scale));
      line-height: 1.7;
      outline: none;
      transition: border-color .12s, box-shadow .12s;
    }

    .detail-edit-input::placeholder,
    .detail-edit-textarea::placeholder {
      color: #555;
    }

    .detail-edit-input:focus,
    .detail-edit-textarea:focus {
      border-color: var(--cyan);
      box-shadow: 0 0 0 3px rgba(0, 229, 204, .10);
    }

    .detail-edit-textarea {
      min-height: 160px;
      resize: vertical;
      overflow: hidden;
    }

    .detail-edit-textarea.content-textarea {
      min-height: 180px;
      line-height: 1.8;
    }

    .detail-image {
      width: 100%;
      max-height: 260px;
      object-fit: contain;
      display: none;
      border-radius: 10px;
      border: 1px solid #383838;
      background: #1f1f1f;
      cursor: zoom-in;
    }

    .detail-link {
      display: block;
      color: #7fdcff;
      text-decoration: none;
      word-break: break-all;
      line-height: 1.5;
    }

    .detail-link:hover {
      text-decoration: underline;
    }

    .backlinks-sec {
      display: grid;
      gap: 8px;
    }

    .backlinks-scope-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .backlinks-scope-chip {
      min-height: 24px;
      padding: 0 10px;
      border-radius: 999px;
      border: 1px solid #4a4a4a;
      background: transparent;
      color: #aab4b7;
      font-family: inherit;
      font-size: calc(10px * var(--font-scale));
      cursor: pointer;
      transition: border-color .12s, color .12s, background .12s, box-shadow .12s;
    }

    .backlinks-scope-chip:hover {
      border-color: var(--cyan);
      color: var(--cyan);
      background: rgba(0, 229, 204, .08);
    }

    .backlinks-scope-chip.active {
      border-color: var(--cyan);
      color: var(--cyan);
      background: rgba(0, 229, 204, .14);
      box-shadow: 0 0 0 2px rgba(0, 229, 204, .06);
    }

    .backlinks-scope-count {
      opacity: .9;
    }

    .backlinks-list {
      display: grid;
      gap: 8px;
    }

    .backlink-item {
      width: 100%;
      text-align: left;
      cursor: pointer;
      border: 1px solid #3a3a3a;
      border-radius: 10px;
      background: #282828;
      color: var(--text);
      padding: 10px 12px;
      font-family: inherit;
      transition: border-color .12s, box-shadow .12s, background .12s;
    }

    .backlink-item:hover {
      border-color: var(--cyan);
      box-shadow: 0 0 0 3px rgba(0, 229, 204, .08);
      background: #2d3131;
    }

    .backlink-item:disabled {
      cursor: default;
      opacity: .72;
      box-shadow: none;
    }

    .backlink-path {
      color: #8dd9ff;
      font-size: calc(10px * var(--font-scale));
      line-height: 1.55;
      word-break: break-word;
    }

    .detail-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    #image-lightbox {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .88);
      z-index: 13000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    #image-lightbox.open {
      display: flex;
    }

    #image-lightbox-backdrop {
      position: absolute;
      inset: 0;
    }

    #image-lightbox-panel {
      position: relative;
      z-index: 1;
      width: min(96vw, 1400px);
      height: min(94vh, 1000px);
      background: #111;
      border: 1px solid #2b2b2b;
      border-radius: 16px;
      overflow: auto;
      box-shadow: 0 16px 50px rgba(0, 0, 0, .45);
    }

    #image-lightbox-toolbar {
      position: sticky;
      top: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      background: rgba(17, 17, 17, .95);
      border-bottom: 1px solid #2b2b2b;
    }

    #image-lightbox-url {
      color: #9aa2a9;
      font-size: calc(12px * var(--font-scale));
      word-break: break-all;
    }

    #image-lightbox-body {
      padding: 16px;
    }

    #image-lightbox-img {
      display: block;
      width: auto;
      max-width: none;
      height: auto;
      max-height: none;
      margin: 0 auto;
    }

    .anno-dirty-dot {
      color: #ffcc00;
      margin-right: 4px;
    }

    .anno-deleted-note {
      color: #ff8a8a;
      font-size: calc(10px * var(--font-scale));
    }

    .detail-meta {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .meta-chip {
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid #404040;
      background: #282828;
      font-size: calc(9px * var(--font-scale));
      color: #888;
    }

    /* ── STATE.USDA PANEL ── */
    #usda-panel {
      position: fixed;
      top: 40px;
      right: 0;
      width: 300px;
      height: calc(100dvh - 40px);
      background: var(--surface);
      border-left: 1px solid var(--border);
      z-index: 150;
      transform: translateX(100%);
      transition: transform .2s cubic-bezier(.4, 0, .2, 1);
      display: flex;
      flex-direction: column;
    }

    #usda-panel.open {
      transform: translateX(0);
    }

    #usda-panel-hd {
      padding: 6px 10px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    #usda-panel-hd span {
      font-size: calc(9px * var(--font-scale));
      color: var(--muted);
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    #usda-text {
      flex: 1;
      overflow-y: auto;
      padding: 10px 12px;
      font-size: calc(10px * var(--font-scale));
      color: #5ecfbe;
      line-height: 1.65;
      white-space: pre;
      scrollbar-width: thin;
      scrollbar-color: #333 transparent;
    }

    /* ── DESKTOP SIDEBAR ── */
    #desktop-sidebar {
      display: none;
    }

    /* ── MOBILE PORTRAIT RESPONSIVE MODE ── */
    body.mobile-portrait {
      height: 100dvh;
    }

    body.mobile-portrait #topbar {
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 6px;
    }

    body.mobile-portrait #topbar::-webkit-scrollbar {
      display: none;
    }

    body.mobile-portrait #project-name-label,
    body.mobile-portrait #scene-name-label {
      max-width: none;
      flex: 0 0 auto;
    }

    body.mobile-portrait #coord-hud,
    body.mobile-portrait #btn-make {
      display: none !important;
    }

    body.mobile-portrait #mobile-mode-bar {
      display: flex;
    }

    body.mobile-portrait #scene-tabs-bar {
      display: none;
      position: fixed;
      left: 0;
      right: 0;
      bottom: calc(var(--mobile-nav-h) + var(--safe-bottom));
      z-index: 240;
      min-height: auto;
      padding: 8px 10px 10px;
      background: rgba(34, 34, 34, .96);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid rgba(255, 255, 255, .05);
      box-shadow: 0 -8px 24px rgba(0, 0, 0, .25);
    }

    body.mobile-portrait.mobile-pane-scenes #scene-tabs-bar {
      display: flex;
    }

    body.mobile-portrait #bottom-panel {
      bottom: calc(var(--mobile-nav-h) + var(--safe-bottom));
      max-height: 52dvh;
      border-top-left-radius: 18px;
      border-top-right-radius: 18px;
      box-shadow: 0 -12px 28px rgba(0, 0, 0, .32);
    }

    body.mobile-portrait #bottom-panel.open {
      transform: translateY(0);
    }

    body.mobile-portrait.mobile-pane-annotate #pick-indicator {
      top: 56px;
    }

    body.mobile-portrait #anno-form {
      max-width: none;
      width: 100%;
      max-height: min(88dvh, 100%);
      border-radius: 18px 18px 0 0;
      padding-bottom: calc(30px + var(--safe-bottom));
    }

    body.mobile-portrait #debug-console {
      left: 12px;
      right: 12px;
      width: auto;
      bottom: calc(var(--mobile-nav-h) + 16px + var(--safe-bottom));
      max-height: min(48dvh, 420px);
    }

    @media (max-width: 420px) {
      #scene-tabs-bar {
        padding-right: 8px;
        padding-bottom: calc(50px + var(--safe-bottom));
      }

      #btn-make {
        left: 12px;
        right: 12px;
        max-width: none;
      }

      #btn-make-inner {
        width: 100%;
      }
    }

    @media (min-width: 768px) {
      body:not(.mobile-portrait) #desktop-sidebar {
        display: flex;
        width: var(--sidebar-width);
        flex-shrink: 0;
        position: relative;
        transition: width .18s ease, border-color .18s ease;
        background: var(--surface);
        border-left: 1px solid var(--border);
        flex-direction: column;
        overflow: hidden;
        min-height: 0;
      }

      body:not(.mobile-portrait) #scene-tabs-bar {
        display: none;
      }

      body:not(.mobile-portrait) #bottom-panel {
        display: none !important;
      }

      body:not(.mobile-portrait) #btn-make {
        position: absolute;
        left: auto;
        right: 12px;
        bottom: 12px;
        max-width: none;
      }
    }

    .sb-hd {
      padding: 6px 10px 4px;
      font-size: calc(9px * var(--font-scale));
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #fff;
      border-bottom: 1px solid var(--border);
    }

    /* ── Scene行（アコーディオンヘッダー） ── */
    .sb-scene-row {
      padding: 6px 10px;
      font-size: calc(11px * var(--font-scale));
      color: #ffffff;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 7px;
      transition: background .1s, color .1s;
      border-bottom: 1px solid rgba(255, 255, 255, .025);
      user-select: none;
    }

    .sb-scene-row:hover {
      background: rgba(255, 255, 255, .05);
      color: #ffffff;
    }

    .sb-scene-row.active {
      color: #ffffff;
    }

    .sb-scene-row .expand-icon {
      width: 12px;
      flex-shrink: 0;
      color: #ffffff;
      font-size: calc(10px * var(--font-scale));
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .sb-scene-row .scene-label {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* ── アコーディオン内 Anno リスト ── */
    .sb-anno-list {
      overflow: hidden;
      max-height: 0;
      transition: max-height .22s cubic-bezier(.4, 0, .2, 1);
      background: rgba(0, 0, 0, .12);
    }

    .sb-anno-list.open {
      max-height: 600px;
    }

    .sb-anno-item {
      padding: 5px 10px 5px 26px;
      font-size: calc(10px * var(--font-scale));
      color: #d8dfe8;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background .1s, color .1s;
      border-bottom: 1px solid rgba(255, 255, 255, .018);
    }

    .sb-anno-item:hover {
      background: rgba(255, 255, 255, .06);
      color: #f0f4fa;
    }

    .sb-anno-item.active {
      color: var(--amber);
    }

    .sb-anno-item .adot {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #4a4a4a;
      flex-shrink: 0;
    }

    .sb-anno-item.active .adot {
      background: var(--amber);
      box-shadow: 0 0 4px rgba(240, 165, 0, .45);
    }

    /* ── フッターボタン ── */
    #sb-main-scroll {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-width: thin;
      scrollbar-color: #333 transparent;
    }

    #sb-scroll {
      flex: 0 0 auto;
      overflow: visible;
    }

    .sb-footer {
      padding: 8px 10px;
      border-top: 1px solid var(--border);
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: 5px;
      background: var(--surface);
      box-shadow: 0 -8px 14px rgba(0, 0, 0, .12);
    }

    .sb-make-btn {
      width: 100%;
      height: 26px;
      background: transparent;
      border: 1px solid var(--amber);
      border-radius: 13px;
      color: var(--amber);
      font-family: inherit;
      font-size: calc(10px * var(--font-scale));
      font-weight: 600;
      cursor: pointer;
      letter-spacing: .04em;
      transition: background .12s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }

    .sb-make-btn:hover {
      background: rgba(240, 165, 0, .12);
    }

    .sb-make-btn.demo-disabled,
    #sb-save-btn.demo-disabled,
    #btn-make-inner.demo-disabled {
      opacity: .48;
      cursor: not-allowed;
      box-shadow: none;
      animation: none;
    }

    .sb-make-btn.demo-disabled:hover,
    #sb-save-btn.demo-disabled:hover,
    #btn-make-inner.demo-disabled:hover {
      background: transparent;
      box-shadow: none;
    }

    #sb-save-btn.demo-disabled,
    #sb-save-btn.active.demo-disabled {
      border-color: #444;
      color: #777;
      pointer-events: auto;
      animation: none;
      background: transparent;
      box-shadow: none;
    }

    dialog.demo-dialog {
      width: min(560px, calc(100vw - 24px));
      border: none;
      border-radius: 18px;
      padding: 0;
      overflow: hidden;
      background: var(--surface);
      color: var(--text);
      box-shadow: 0 18px 54px rgba(0, 0, 0, .38);
    }

    dialog.demo-dialog::backdrop {
      background: rgba(0, 0, 0, .62);
      backdrop-filter: blur(2px);
    }

    .demo-dialog-hd {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 16px 18px;
      border-bottom: 1px solid var(--border2);
    }

    .demo-dialog-title {
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .06em;
      color: var(--amber);
    }

    .demo-dialog-body {
      padding: 18px;
    }

    .demo-dialog-msg {
      line-height: 1.8;
      color: #d8dee8;
      white-space: pre-wrap;
    }

    .demo-dialog-actions {
      padding: 0 18px 18px;
      display: flex;
      justify-content: flex-end;
    }

    /* Save Annotationボタン — 未保存あり時に活性化 */
    #sb-save-btn {
      width: 100%;
      height: 26px;
      background: transparent;
      border: 1px solid #444;
      border-radius: 13px;
      color: #555;
      font-family: inherit;
      font-size: calc(10px * var(--font-scale));
      font-weight: 600;
      cursor: default;
      letter-spacing: .04em;
      transition: all .18s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      pointer-events: none;
    }

    #sb-save-btn.active {
      border-color: var(--cyan);
      color: var(--cyan);
      cursor: pointer;
      pointer-events: auto;
      animation: savePulse 1.8s ease-in-out infinite;
    }

    #sb-save-btn.active:hover {
      background: var(--cyan-dim);
    }

    #sb-save-btn.saved {
      border-color: #3a3a3a;
      color: #3a3a3a;
      animation: none;
    }

    @keyframes savePulse {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(0, 229, 204, 0);
      }

      50% {
        box-shadow: 0 0 0 4px rgba(0, 229, 204, .18);
      }
    }

    /* ── QR MODAL ── */
    #qr-modal {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .72);
      z-index: 800;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    #qr-modal.open {
      display: flex;
    }

    #qr-panel {
      background: #1a1a1a;
      border: 1px solid var(--border);
      border-radius: 18px;
      box-shadow: 0 20px 52px rgba(0, 0, 0, .5);
      padding: 20px;
      width: min(340px, calc(100vw - 32px));
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
    }

    #qr-panel-hd {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    #qr-panel-title {
      font-size: calc(11px * var(--font-scale));
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--cyan);
    }

    #qr-img-wrap {
      background: #fff;
      border-radius: 10px;
      padding: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 200px;
      min-height: 200px;
    }

    #qr-img-wrap img,
    #qr-img-wrap canvas {
      display: block;
    }

    #qr-url-label {
      font-size: calc(9px * var(--font-scale));
      color: var(--muted);
      word-break: break-all;
      text-align: center;
      line-height: 1.55;
      max-width: 100%;
    }

    #qr-actions {
      display: flex;
      gap: 8px;
      width: 100%;
    }

    #qr-actions .btn {
      flex: 1;
    }

    /* ── TOAST ── */
    #toast {
      position: fixed;
      top: 48px;
      left: 50%;
      transform: translateX(-50%) translateY(-6px);
      background: var(--surface);
      border: 1px solid var(--cyan);
      border-radius: 3px;
      padding: 4px 14px;
      font-size: calc(10px * var(--font-scale));
      color: var(--cyan);
      z-index: 600;
      opacity: 0;
      transition: opacity .18s, transform .18s;
      pointer-events: none;
      white-space: nowrap;
    }

    #toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* ── PICK INDICATOR ── */
    #pick-indicator {
      position: fixed;
      top: 48px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(25, 25, 25, .92);
      border: 1px solid var(--amber);
      border-radius: 3px;
      padding: 4px 14px;
      font-size: calc(10px * var(--font-scale));
      color: var(--amber);
      z-index: 120;
      display: none;
      pointer-events: none;
      letter-spacing: .04em;
    }

    #pick-indicator.show {
      display: block;
    }

    /* ── NO PARAM ── */
    #no-param {
      display: none;
      position: fixed;
      inset: 0;
      background: var(--bg2);
      z-index: 1000;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 32px;
      text-align: center;
    }

    #no-param.show {
      display: flex;
    }

    #no-param .logo-lg {
      font-size: calc(14px * var(--font-scale));
      font-weight: 700;
      letter-spacing: .14em;
      color: var(--cyan);
      text-transform: uppercase;
    }

    #no-param p {
      font-size: calc(11px * var(--font-scale));
      color: var(--muted);
      line-height: 1.9;
    }

    #no-param code {
      background: var(--surface);
      border: 1px solid #383838;
      border-radius: 2px;
      padding: 1px 6px;
      font-family: inherit;
      font-size: calc(10px * var(--font-scale));
      color: var(--cyan);
    }

    /* ── SIDEBAR ANNO DETAIL ── */
    #sb-anno-detail {
      display: none;
      flex-direction: column;
      border-top: 1px solid var(--border);
      flex: 0 0 auto;
      min-height: 0;
      overflow: visible;
    }

    #sb-anno-detail.open {
      display: flex;
    }

    #sb-anno-detail-hd {
      padding: 6px 10px 4px;
      font-size: calc(9px * var(--font-scale));
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #fff;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    #sb-anno-detail-title {
      padding: 8px 10px 4px;
      font-size: calc(11px * var(--font-scale));
      color: #fff;
      line-height: 1.4;
      border-bottom: 1px solid var(--border);
    }

    #sb-anno-detail-body {
      padding: 10px 10px 16px;
      overflow: visible;
    }

    #sb-anno-detail-body .detail-card,
    #sb-anno-detail-body .meta-chip {
      font-size: calc(11px * var(--font-scale));
    }

    #sb-anno-detail-body .detail-card {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      max-height: none !important;
      overflow: visible !important;
      overflow-x: hidden !important;
      white-space: pre-wrap !important;
      overflow-wrap: anywhere !important;
      word-break: break-word !important;
      word-wrap: break-word !important;
      line-break: anywhere !important;
    }

    #sb-anno-detail-body .detail-cap {
      font-size: calc(11px * var(--font-scale));
      color: #edf4fb;
    }

    body.picker-mode #sb-anno-detail-body .detail-card {
      line-height: 1.75;
    }

    .picker-sidebar-empty {
      min-height: 120px;
      display: flex;
      align-items: center;
    }

    #sb-anno-detail-body .detail-image {
      max-height: 220px;
    }

    body.theme-dark {
      --viewer-bg: #1f1f1f;
    }

    body.theme-light {
      --viewer-bg: #f5f5f5;
    }

    body.theme-gradient {
      --viewer-bg: linear-gradient(180deg, #1b1b1f 0%, #2a2a30 40%, #4f4f58 100%);
    }

    body.sidebar-hidden #desktop-sidebar {
      width: 0 !important;
      border-left-color: transparent;
    }

    body.sidebar-hidden #desktop-sidebar>* {
      opacity: 0;
      pointer-events: none;
    }

    #desktop-sidebar>* {
      transition: opacity .15s ease;
    }

    #sidebar-resizer {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 8px;
      transform: translateX(-50%);
      cursor: col-resize;
      z-index: 5;
    }

    #sidebar-resizer::before {
      content: '';
      position: absolute;
      inset: 0;
      background: transparent;
      transition: background .12s;
    }

    #sidebar-resizer:hover::before,
    body.sidebar-resizing #sidebar-resizer::before {
      background: rgba(0, 229, 204, .14);
    }

    #sidebar-toggle {
      position: fixed;
      top: 50%;
      right: calc(var(--sidebar-width) + 10px);
      transform: translateY(-50%);
      z-index: 320;
      width: 14px;
      height: 52px;
      border: 1px solid var(--cyan);
      border-right: none;
      border-radius: 10px 0 0 10px;
      background: rgba(50, 50, 50, .88);
      color: var(--cyan);
      display: none;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
      transition: right .18s ease, background .12s ease, opacity .18s ease;
    }

    #sidebar-toggle:hover {
      background: rgba(0, 229, 204, .12);
    }

    #sidebar-toggle span {
      font-size: 11px;
      line-height: 1;
    }

    body.sidebar-hidden #sidebar-toggle {
      right: 10px;
    }

    body.sidebar-hidden #sidebar-toggle .toggle-open {
      display: block;
    }

    body.sidebar-hidden #sidebar-toggle .toggle-close {
      display: none;
    }

    body:not(.sidebar-hidden) #sidebar-toggle .toggle-open {
      display: none;
    }

    body:not(.sidebar-hidden) #sidebar-toggle .toggle-close {
      display: block;
    }

    #settings-modal {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .64);
      z-index: 900;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    #settings-modal.open {
      display: flex;
    }

    #settings-panel {
      width: min(520px, calc(100vw - 24px));
      max-height: min(86dvh, 760px);
      overflow: auto;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 18px;
      box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
      padding: 18px 18px 20px;
    }

    #settings-panel h3 {
      font-size: calc(12px * var(--font-scale));
      color: var(--cyan);
      letter-spacing: .12em;
      text-transform: uppercase;
      margin-bottom: 14px;
    }

    .settings-group {
      margin-bottom: 16px;
    }

    .settings-cap {
      display: block;
      font-size: calc(10px * var(--font-scale));
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-bottom: 8px;
    }

    .settings-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .settings-note {
      margin-top: 8px;
      font-size: calc(10px * var(--font-scale));
      color: #777;
      line-height: 1.6;
    }

    .settings-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 8px;
    }

    .settings-check {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: calc(12px * var(--font-scale));
      color: #ddd;
      user-select: none;
    }

    .settings-check input[type="checkbox"] {
      width: 16px;
      height: 16px;
      accent-color: var(--cyan);
    }

    @media (min-width: 768px) {
      body:not(.mobile-portrait) #sidebar-toggle {
        display: flex;
      }
    }



    body.readonly-mode #btn-undo,
    body.readonly-mode #btn-redo,
    body.readonly-mode #btn-debug,
    body.readonly-mode #sidebar-toggle,
    body.readonly-mode #usda-panel,
    body.readonly-mode #settings-modal,
    body.readonly-mode #mobile-mode-bar,
    body.readonly-mode #btn-make,
    body.readonly-mode .sb-footer,
    body.readonly-mode #anno-form-modal {
      display: none !important;
    }

    body.picker-mode .picker-hidden {
      display: none !important;
    }

    body.picker-mode #topbar {
      gap: 8px;
    }

    body.picker-mode #topbar .sep {
      flex: 1;
    }

    body.picker-mode #btn-copy-link,
    body.picker-mode #btn-qr,
    body.picker-mode #btn-undo,
    body.picker-mode #btn-redo,
    body.picker-mode #btn-debug,
    body.picker-mode button[onclick="openSettings()"],
    body.picker-mode button[onclick="toggleUsdaPanel()"] {
      display: none !important;
    }

    body.picker-mode #desktop-sidebar {
      display: none !important;
    }

    /* Picker画面では右サイドバーを使わず、リンク先選択パネルを横幅いっぱいに使う。 */
    body.picker-mode #viewer-wrap {
      right: 0 !important;
    }

    body.picker-mode #bottom-panel {
      display: none !important;
    }

    body.picker-mode #sb-anno-detail {
      display: flex !important;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 190px;
      max-height: 42%;
      border-top: 1px solid rgba(182, 197, 204, .24);
      background: rgba(212, 223, 228, .06);
      overflow-y: auto;
      overflow-x: hidden;
    }

    body.picker-mode #sb-anno-detail-hd,
    body.picker-mode #sb-anno-detail-title {
      background: rgba(212, 223, 228, .04);
    }

    body.picker-mode #sb-anno-detail-hd .btn {
      display: none !important;
    }

    body.picker-mode #sb-anno-detail-hd span {
      color: var(--muted);
    }

    body.picker-mode #sb-anno-detail-title {
      min-height: 42px;
    }

    body.picker-mode #sb-anno-detail-body {
      flex: 1;
      min-height: 120px;
      overflow: visible;
    }

    body.picker-mode #picker-annotation-preview {
      display: none !important;
    }

    #anno-link-picker-ui {
      display: grid;
      gap: 8px;
    }

    #anno-link-picker-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    #anno-link-preview {
      min-height: 78px;
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 10px 12px;
      background: rgba(255, 255, 255, .03);
      display: grid;
      gap: 6px;
    }

    #anno-link-preview.empty {
      color: var(--muted);
    }

    .anno-link-preview-cap {
      font-size: 10px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .anno-link-preview-path {
      color: #fff;
      font-size: 12px;
      line-height: 1.6;
      word-break: break-word;
    }

    .anno-link-preview-kind {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .anno-link-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 24px;
      padding: 0 10px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(255, 255, 255, .05);
      color: #dce8e8;
      font-size: 11px;
    }

    .anno-link-chip.active {
      border-color: var(--amber);
      color: var(--amber);
      background: rgba(255, 176, 0, .12);
    }

    #picker-dock {
      position: fixed;
      left: 18px;
      right: 18px;
      bottom: 12px;
      z-index: 340;
      border: 1px solid rgba(0, 229, 204, .35);
      border-radius: 18px;
      background: rgba(18, 22, 24, .96);
      box-shadow: 0 16px 36px rgba(0, 0, 0, .45);
      padding: 12px;
      display: none;
      flex-direction: column;
      gap: 8px;
      max-height: min(620px, calc(100dvh - 28px));
      overflow: hidden;
      backdrop-filter: blur(8px);
    }

    body.picker-mode #picker-dock {
      border-color: rgba(147, 166, 175, .44);
      background: linear-gradient(180deg, rgba(71, 82, 89, .96) 0%, rgba(36, 43, 48, .96) 100%);
    }

    #picker-mode-badge {
      display: none;
      align-self: flex-start;
      min-height: 24px;
      padding: 0 10px;
      border-radius: 999px;
      border: 1px solid rgba(180, 195, 202, .34);
      background: rgba(214, 224, 229, .08);
      color: #e8f1f3;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    body.picker-mode #picker-mode-badge {
      display: inline-flex;
      align-items: center;
    }

    body.sidebar-hidden #picker-dock,
    body.picker-mode #picker-dock {
      right: 18px;
    }

    body.picker-mode #picker-dock {
      display: flex;
    }

    .picker-dock-top,
    .picker-dock-bottom {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .picker-dock-top {
      display: grid;
      grid-template-columns: minmax(380px, .9fr) minmax(620px, 1.6fr);
      align-items: stretch;
      gap: 12px;
      min-height: clamp(420px, 54dvh, 600px);
      min-width: 0;
    }

    .picker-dock-pane {
      min-width: 0;
      min-height: 0;
      border: 1px solid rgba(0, 229, 204, .18);
      border-radius: 14px;
      background: rgba(255, 255, 255, .03);
      padding: 10px;
    }

    body.picker-mode .picker-dock-pane {
      border-color: rgba(182, 197, 204, .24);
      background: rgba(212, 223, 228, .06);
    }

    .picker-dock-pane.project-pane {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 6px;
    }

    /* 旧UIの右側「リンク取得」列が残っている環境でも表示しない。 */
    body.picker-mode .picker-dock-side.action-pane,
    body.picker-mode #picker-link-get {
      display: none !important;
    }

    /* 左下の旧「候補リスト」は、右側の候補一覧と重複して混乱するため表示しない。 */
    body.picker-mode label[for="picker-project-select"],
    body.picker-mode #picker-project-select,
    body.picker-mode .picker-project-actions {
      display: none !important;
    }

    .picker-dock-main {
      /* リンク先ピッカーでは候補一覧を主役にする。 */
      display: grid;
      grid-template-rows: auto auto auto minmax(0, 1fr);
      gap: 4px;
      min-width: 0;
      min-height: 0;
    }

    .picker-dock-cap {
      color: var(--muted);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    #picker-path-text {
      color: #fff;
      font-size: 13px;
      line-height: 1.35;
      word-break: break-word;
      margin: 2px 0 0;
    }

    #picker-selection-meta {
      color: #a7bcbc;
      font-size: 11px;
      line-height: 1.35;
      margin: 0 0 2px;
    }

    #picker-annotation-preview {
      display: none;
      margin-top: 2px;
      padding: 10px 12px;
      border: 1px solid rgba(0, 229, 204, .18);
      border-radius: 12px;
      background: rgba(255, 255, 255, .03);
      min-height: 64px;
    }

    #picker-annotation-preview.show {
      display: grid;
      gap: 6px;
    }

    .picker-preview-cap {
      color: var(--muted);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    #picker-annotation-title {
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.45;
      word-break: break-word;
    }

    #picker-annotation-content {
      color: #d7e4e4;
      font-size: 12px;
      line-height: 1.6;
      white-space: pre-wrap;
      word-break: break-word;
      max-height: 96px;
      overflow: auto;
      scrollbar-width: thin;
    }

    #picker-annotation-content.is-empty {
      color: #8fa8a8;
      font-style: italic;
    }

    .picker-dock-side {
      display: grid;
      gap: 7px;
      min-width: 0;
      min-height: 0;
      overflow: auto;
      scrollbar-width: thin;
    }

    .picker-dock-side label {
      color: var(--muted);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .picker-dock-side select {
      width: 100%;
      min-height: 38px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: #0f1315;
      color: #fff;
      padding: 0 12px;
    }

    .picker-project-search-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: 8px;
      align-items: center;
    }

    .picker-project-search-input {
      width: 100%;
      min-height: 38px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: #0f1315;
      color: #fff;
      padding: 0 12px;
      font-family: inherit;
      font-size: 11px;
      outline: none;
      transition: border-color .12s, box-shadow .12s;
    }

    .picker-project-search-input:focus {
      border-color: var(--cyan);
      box-shadow: 0 0 0 3px rgba(0, 229, 204, .08);
    }

    #picker-project-search-status {
      min-height: 16px;
    }

    .picker-project-help {
      color: #8fa8a8;
      font-size: 11px;
      line-height: 1.45;
    }

    .picker-relation-panel {
      display: grid;
      gap: 7px;
      padding: 9px;
      border: 1px solid rgba(255, 255, 255, .10);
      border-radius: 12px;
      background: rgba(0, 0, 0, .12);
      min-width: 0;
    }

    .picker-relation-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: var(--muted);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .picker-relation-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      min-height: 26px;
      max-height: 86px;
      overflow: auto;
      scrollbar-width: thin;
      color: #8fa8a8;
      font-size: 11px;
      line-height: 1.5;
    }

    .picker-relation-chip {
      min-height: 24px;
      max-width: 100%;
      padding: 0 9px;
      border-radius: 999px;
      border: 1px solid rgba(0, 229, 204, .34);
      background: rgba(0, 229, 204, .07);
      color: #dffafa;
      font-family: inherit;
      font-size: 11px;
      cursor: pointer;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .picker-relation-chip.scene {
      border-color: rgba(135, 206, 250, .38);
      background: rgba(135, 206, 250, .08);
      color: #dff4ff;
    }

    .picker-relation-chip:hover {
      border-color: var(--amber);
      color: var(--amber);
      background: rgba(255, 176, 0, .10);
    }

    .picker-tag-filter-panel {
      display: grid;
      gap: 7px;
      padding: 9px;
      border: 1px solid rgba(255, 176, 0, .18);
      border-radius: 12px;
      background: rgba(255, 176, 0, .045);
      min-width: 0;
    }

    .picker-tag-filter-selected {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      min-height: 22px;
      color: #8fa8a8;
      font-size: 11px;
      line-height: 1.45;
    }

    .picker-tag-filter-list {
      display: grid;
      gap: 7px;
      max-height: 132px;
      overflow: auto;
      scrollbar-width: thin;
      min-width: 0;
      color: #8fa8a8;
      font-size: 11px;
    }

    .picker-tag-filter-section {
      display: grid;
      gap: 6px;
      min-width: 0;
    }

    .picker-tag-filter-section-title {
      color: #d7e4e4;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .picker-tag-filter-group {
      display: grid;
      gap: 5px;
      padding: 7px;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 10px;
      background: rgba(0, 0, 0, .12);
      min-width: 0;
    }

    .picker-tag-filter-group-title {
      color: #c8d8d8;
      font-size: 10px;
      font-weight: 700;
    }

    .picker-tag-filter-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      min-width: 0;
    }

    .picker-tag-filter-chip,
    .picker-tag-filter-selected-chip {
      min-height: 22px;
      max-width: 100%;
      padding: 0 8px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, .16);
      background: rgba(255, 255, 255, .06);
      color: #d7e4e4;
      font-family: inherit;
      font-size: 10px;
      cursor: pointer;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .picker-tag-filter-chip.scene {
      border-color: rgba(135, 206, 250, .34);
      background: rgba(135, 206, 250, .08);
      color: #dff4ff;
    }

    .picker-tag-filter-chip.active,
    .picker-tag-filter-selected-chip {
      border-color: rgba(255, 176, 0, .66);
      background: rgba(255, 176, 0, .12);
      color: var(--amber);
      font-weight: 700;
    }

    .picker-tag-filter-chip:hover,
    .picker-tag-filter-selected-chip:hover {
      border-color: var(--cyan);
      color: var(--cyan);
      background: rgba(0, 229, 204, .08);
    }

    #picker-candidate-panel {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 7px;
      margin-top: 4px;
      padding: 10px 12px;
      border: 1px solid rgba(0, 229, 204, .18);
      border-radius: 12px;
      background: rgba(255, 255, 255, .03);
      min-height: 230px;
      min-width: 0;
      overflow: hidden;
    }

    .picker-candidate-list {
      display: grid;
      align-content: start;
      gap: 7px;
      min-height: 0;
      max-height: none;
      overflow: auto;
      scrollbar-width: thin;
      min-width: 0;
    }

    .picker-candidate-card {
      display: grid;
      grid-template-columns: 112px minmax(0, 1fr);
      gap: 10px;
      width: 100%;
      text-align: left;
      border: 1px solid rgba(255, 255, 255, .11);
      border-radius: 12px;
      background: rgba(0, 0, 0, .16);
      color: #d7e4e4;
      padding: 9px 10px;
      font-family: inherit;
      cursor: default;
      align-items: start;
    }

    .picker-candidate-card:hover {
      border-color: rgba(255, 176, 0, .55);
      background: rgba(255, 176, 0, .08);
    }

    .picker-candidate-thumb {
      position: relative;
      width: 112px;
      height: 82px;
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .12);
      background: rgba(0, 0, 0, .22);
      display: grid;
      place-items: center;
      flex: 0 0 auto;
    }

    .picker-candidate-thumb img {
      position: absolute;
      inset: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      background: rgba(0, 0, 0, .18);
    }

    .picker-candidate-thumb img.hidden {
      display: none;
    }

    .picker-candidate-thumb-fallback {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: grid;
      place-items: center;
      width: 100%;
      height: 100%;
      color: #d7e4e4;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .08em;
      background: linear-gradient(135deg, rgba(0, 229, 204, .10), rgba(255, 255, 255, .04));
    }

    .picker-candidate-thumb-fallback.hidden {
      display: none;
    }

    .picker-candidate-body {
      display: grid;
      gap: 6px;
      min-width: 0;
    }

    .picker-candidate-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      align-items: center;
      color: #8fa8a8;
      font-size: 10px;
      line-height: 1.35;
    }


    .picker-candidate-title {
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.35;
      word-break: break-word;
    }

    .picker-candidate-id {
      color: #8fa8a8;
      font-size: 10px;
      word-break: break-all;
    }

    .picker-candidate-reasons {
      display: flex;
      gap: 5px;
      flex-wrap: wrap;
      align-items: center;
    }

    .picker-candidate-reason {
      min-height: 20px;
      padding: 0 7px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, .13);
      background: rgba(255, 255, 255, .06);
      color: #c8d8d8;
      font-size: 10px;
      line-height: 19px;
    }


    .picker-candidate-actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 2px;
    }

    .picker-candidate-action {
      min-height: 24px;
      padding: 0 9px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, .16);
      background: rgba(255, 255, 255, .06);
      color: #d7e4e4;
      font-family: inherit;
      font-size: 10px;
      cursor: pointer;
    }

    .picker-candidate-action.primary {
      border-color: rgba(255, 176, 0, .62);
      background: rgba(255, 176, 0, .10);
      color: var(--amber);
      font-weight: 700;
    }

    .picker-candidate-action:hover {
      border-color: var(--cyan);
      color: var(--cyan);
      background: rgba(0, 229, 204, .08);
    }

    .picker-candidate-empty {
      color: #8fa8a8;
      font-size: 12px;
      line-height: 1.6;
      padding: 8px 2px;
    }

    .picker-project-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
    }

    .picker-kind-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .picker-dock-footer {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 8px;
      grid-column: 1 / -1;
      padding: 2px 0 0;
    }

    .picker-dock-footer .btn {
      min-height: 36px;
      min-width: 116px;
    }

    .picker-kind-btn.active {
      border-color: var(--amber);
      color: var(--amber);
      background: rgba(255, 176, 0, .12);
    }

    #picker-link-get[disabled],
    .picker-kind-btn[disabled] {
      opacity: .45;
      cursor: not-allowed;
    }

    /* vvvv ここから 右サイドバー注釈本文折り返し補正 v3 vvvv */
    #sb-anno-detail-body .detail-card,
    #bp-body .detail-card {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;
      overflow: visible !important;
      white-space: pre-wrap !important;
      overflow-wrap: anywhere !important;
      word-break: break-word !important;
      line-break: anywhere;
      box-sizing: border-box !important;
    }

    #sb-anno-detail-body .detail-link,
    #sb-anno-detail-body .backlink-path,
    #sb-anno-detail-body .anno-link-preview-path,
    #bp-body .detail-link,
    #bp-body .backlink-path {
      white-space: normal !important;
      overflow-wrap: anywhere !important;
      word-break: break-word !important;
    }

    #sb-anno-detail-body .detail-edit-textarea,
    #bp-body .detail-edit-textarea {
      width: 100% !important;
      max-width: 100% !important;
      min-height: 180px !important;
      height: auto !important;
      overflow-y: hidden !important;
      white-space: pre-wrap !important;
      overflow-wrap: anywhere !important;
      word-break: break-word !important;
      box-sizing: border-box !important;
    }

    #picker-annotation-content {
      max-height: none !important;
      overflow: visible !important;
      white-space: pre-wrap !important;
      overflow-wrap: anywhere !important;
      word-break: break-word !important;
    }
    /* ^^^ ここまで 右サイドバー注釈本文折り返し補正 v3 ^^^ */

    @media (max-width: 980px) {
      body.picker-mode #desktop-sidebar {
        display: none !important;
      }

      #picker-dock {
        left: 10px;
        right: 10px;
        bottom: 10px;
        max-height: min(72dvh, calc(100dvh - 20px));
        overflow: auto;
      }

      .picker-dock-top {
        grid-template-columns: 1fr;
        min-height: 0;
      }

      .picker-candidate-card {
        grid-template-columns: 86px minmax(0, 1fr);
      }

      .picker-candidate-thumb {
        width: 86px;
        height: 66px;
      }

      #picker-candidate-panel {
        min-height: 160px;
      }

      .picker-relation-tags {
        max-height: 72px;
      }

      .picker-tag-filter-list {
        max-height: 96px;
      }
    }


/* ── CONTENT TAG ASSIGNMENT ── */
.content-tags-panel {
  border-bottom: 1px solid rgba(0, 229, 204, .12);
  padding: 8px;
  background: rgba(0, 0, 0, .12);
}
.content-tags-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--cyan);
  font-size: calc(11px * var(--font-scale));
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.content-tags-hd-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.content-tags-status {
  color: var(--muted);
  font-size: calc(10px * var(--font-scale));
  line-height: 1.35;
  margin-bottom: 6px;
}
.content-tags-status[data-kind="ok"] { color: var(--cyan); }
.content-tags-status[data-kind="warn"] { color: var(--amber); }
.content-tags-status[data-kind="error"] { color: var(--danger); }
.content-tags-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 260px;
  overflow: auto;
  padding-right: 2px;
}
.content-tag-selected-row {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  padding: 6px;
  background: rgba(255, 255, 255, .03);
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.content-tag-selected-label {
  color: var(--muted);
  font-size: calc(10px * var(--font-scale));
  margin-right: 3px;
}
.content-tag-summary {
  border: 1px solid rgba(0, 229, 204, .22);
  border-radius: 10px;
  padding: 7px;
  background: rgba(0, 229, 204, .045);
}
.content-tag-summary-title {
  color: var(--cyan);
  font-size: calc(10px * var(--font-scale));
  margin-bottom: 6px;
}
.content-tag-summary + .content-tag-summary {
  margin-top: 7px;
}
.content-tag-template-context.warn {
  border-color: rgba(240, 165, 0, .36);
  background: rgba(240, 165, 0, .06);
}
.content-tag-template-id {
  color: var(--muted);
  font-size: calc(9px * var(--font-scale));
  margin-left: 4px;
}
.content-tag-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  margin-top: 5px;
}
.content-tag-summary-label {
  color: var(--muted);
  font-size: calc(10px * var(--font-scale));
  margin-right: 3px;
}
.content-tag-chip.ai-tag {
  border-color: rgba(240, 165, 0, .48);
  color: var(--amber);
  background: rgba(240, 165, 0, .08);
}
.content-tag-chip.scene-tag {
  border-color: rgba(135, 206, 250, .45);
  color: #9edfff;
  background: rgba(135, 206, 250, .08);
}
.content-tag-chip.manual-tag {
  border-color: rgba(255, 255, 255, .22);
  color: var(--text);
  background: rgba(255, 255, 255, .06);
}
.content-tags-divider {
  color: var(--muted);
  font-size: calc(10px * var(--font-scale));
  margin-top: 2px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.content-tag-chip {
  border: 1px solid rgba(0, 229, 204, .45);
  color: var(--cyan);
  background: rgba(0, 229, 204, .08);
  border-radius: 999px;
  padding: 2px 7px;
  font-size: calc(10px * var(--font-scale));
  line-height: 1.25;
}
.content-tag-empty {
  color: var(--muted);
  font-size: calc(10px * var(--font-scale));
}
.content-tags-empty,
.content-tags-empty-small {
  color: var(--muted);
  font-size: calc(10px * var(--font-scale));
  line-height: 1.45;
}
.content-tag-group {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  padding: 7px;
  background: rgba(255, 255, 255, .025);
}
.content-tag-group.depth-1 {
  margin-top: 6px;
  background: rgba(0, 0, 0, .13);
}
.content-tag-group-title {
  color: #fff;
  font-size: calc(10px * var(--font-scale));
  margin-bottom: 5px;
}
.content-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.content-tag-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--text);
  cursor: pointer;
  font-size: calc(10px * var(--font-scale));
  background: rgba(0, 0, 0, .12);
}
.content-tag-check:hover {
  border-color: rgba(0, 229, 204, .45);
  background: rgba(0, 229, 204, .06);
}
.content-tag-check input {
  accent-color: var(--cyan);
}
.content-tag-children {
  margin-left: 8px;
}
.content-tags-actions {
  display: none;
}
.content-tags-panel.is-loading #content-tags-reai,
.content-tags-panel.is-loading #content-tags-save,
.content-tags-panel.is-loading .content-tags-hd-actions .btn {
  opacity: .65;
  pointer-events: none;
}
@media (max-width: 760px) {
  .content-tags-hd {
    align-items: flex-start;
    flex-direction: column;
  }
  .content-tags-hd-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}


/* ── Phase5i: Editor AI / DB analysis panel ── */
.editor-analysis-panel {
  border-top: 1px solid rgba(0, 229, 204, .16);
  border-bottom: 1px solid rgba(0, 229, 204, .10);
  padding: 8px;
  background: rgba(0, 0, 0, .14);
}
.editor-analysis-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--cyan);
  font-size: calc(11px * var(--font-scale));
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: 8px;
}
.editor-analysis-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.editor-analysis-section {
  border: 1px solid rgba(0, 229, 204, .22);
  border-radius: 12px;
  padding: 9px 10px;
  background: rgba(255, 255, 255, .035);
}
.editor-analysis-cap,
.editor-analysis-subcap {
  color: var(--cyan);
  font-size: calc(10px * var(--font-scale));
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.editor-analysis-subcap {
  color: var(--muted);
  margin-top: 9px;
  margin-bottom: 5px;
}
.editor-analysis-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 7px;
}
.editor-analysis-metric {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(0, 229, 204, .28);
  border-radius: 999px;
  padding: 2px 7px;
  color: #dff;
  background: rgba(0, 229, 204, .06);
  font-size: calc(10px * var(--font-scale));
  line-height: 1.5;
}
.editor-analysis-row {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 9px;
  padding: 7px 8px;
  margin-top: 5px;
  background: rgba(0, 0, 0, .14);
  font-size: calc(10px * var(--font-scale));
  line-height: 1.55;
}
.editor-analysis-row span {
  display: inline-block;
  min-width: 48px;
  color: var(--muted);
}
.editor-analysis-row b {
  color: #fff;
  font-weight: 700;
}
.editor-analysis-row em {
  display: block;
  margin-top: 2px;
  color: #a8c2c2;
  font-style: normal;
  font-size: calc(9px * var(--font-scale));
  word-break: break-all;
}
.editor-analysis-row p,
.editor-analysis-summary {
  margin: 5px 0 0;
  color: var(--text);
  font-size: calc(10px * var(--font-scale));
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.editor-analysis-summary {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  padding: 8px 9px;
  background: rgba(0, 0, 0, .12);
}
.editor-analysis-muted {
  color: var(--muted) !important;
  font-size: calc(9px * var(--font-scale));
}
.editor-analysis-empty {
  color: var(--muted);
  font-size: calc(10px * var(--font-scale));
  line-height: 1.55;
  padding: 6px 2px;
}
.editor-analysis-empty.warn {
  color: var(--amber);
}


.picker-action-help,
.picker-selection-help {
  display: block;
  color: #9fb1b5;
  font-size: 11px;
  line-height: 1.6;
  margin: 8px 0 14px;
}