:root {
      --primary-color: #4a90e2;
      --success-color: #47c9a2;
      --bg-color: #f8f9fa;
      --panel-bg: #ffffff;
      --content-max-width: 1000px;
    }

    body {
      background-color: var(--bg-color);
      margin: 0;
      display: flex;
      flex-direction: column;
      min-height: 100vh; /* height指定は削除し、これだけにします */
      font-family: sans-serif;
      overflow-y: auto;
      align-items: stretch; 
    }
    
    /* --- 修正後の .app-container --- */
    .app-container {
      /* flex: 1 0 auto; を削除 */
      /* justify-content: center; を削除 */
      display: flex;
      flex-direction: column;
    }

    /* 説明セクションのスタイル */
    .info-section {
      padding: 40px 15px;
      background: white;
      width: 95%;
      max-width: var(--content-max-width);
      margin: 0 auto;
      line-height: 1.8;
      box-sizing: border-box;
    }

    footer {
      padding: 20px;
      text-align: center;
      border-top: 1px solid #eee;
    }

    /* タイトルデザイン（調整済みを維持） */
    h1 {
      font-size: 1.8rem;
      padding: 1rem 1.5rem;
      margin: 0;
      background: white;
      border-bottom: 2px solid var(--primary-color);
      color: #333;
      letter-spacing: 0.05em;
      font-weight: 800;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    /* h1 は「ロゴ＋サブタイトル」と「ヘッダー右側」の2カラム。
       サブタイトルは検索向けのキーワードを兼ねるので実表示（隠しテキストにしない）。 */
    .h1-title {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }

    .h1-sub {
      font-size: 0.78rem;
      font-weight: 400;
      color: #666;
      letter-spacing: 0;
      line-height: 1.35;
    }

    @media (max-width: 640px) {
      .h1-sub { font-size: 0.68rem; }
    }

    /* 言語切り替えボタンのスタイル */
    .lang-switcher {
      display: flex;
      gap: 5px;
    }

    .lang-btn {
      font-size: 0.75rem;
      padding: 4px 8px;
      border: 1px solid #ddd;
      background: #fdfdfd;
      color: #666;
      cursor: pointer;
      border-radius: 4px;
      font-weight: normal;
    }

    .lang-btn.active {
      background: var(--primary-color);
      color: white;
      border-color: var(--primary-color);
    }

    /* 言語切替は言語ごとの独立URL（/poseMirror・/poseMirror/en・/poseMirror/zh）への
       リンクなので <a>。button と同じ見た目に揃える。 */
    a.lang-btn {
      display: inline-block;
      text-decoration: none;
      line-height: 1.25;
    }

    /* ヘッダー右側（アカウント導線＋言語切替） */
    .header-actions { display: flex; align-items: center; gap: 12px; }
    .account-widget { display: flex; align-items: center; gap: 8px; }
    /* 既定は全部非表示。body.pm-auth-state="out"|"free"|"pro" のときだけ該当ボタンを表示 */
    .account-only { display: none; }
    body[data-pm-auth-state="out"] .account-only.logged-out { display: inline-flex; }
    body[data-pm-auth-state="free"] .account-only.logged-in-free { display: inline-flex; }
    body[data-pm-auth-state="pro"] .account-only.logged-in-pro { display: inline-flex; }
    #loginBtn, #upgradeBtn, #manageBillingBtn {
      font-size: 0.75rem; font-weight: bold; padding: 5px 10px;
      border: 1px solid #d3dae4; border-radius: 6px; background: #fdfdfd; color: #666; cursor: pointer;
    }
    #upgradeBtn.primary { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
    .pro-badge {
      font-size: 0.68rem; font-weight: bold; color: #fff; background: #b45309;
      padding: 2px 7px; border-radius: 999px; letter-spacing: 0.03em;
    }

    /* 言語別ブロック（リッチHTMLを含む説明文の切り替え用） */
    .lang-block { display: none; }
    .lang-block.active { display: block; }

    /* --- (オプション) メインレイアウトの調整 --- */
    .main-layout {
      display: flex;
      flex-direction: column;
      flex: 0 1 auto; /* ここも固定ではなくコンテンツに合わせる */
      padding: 15px;
      gap: 15px;
      width: 95%;
      max-width: var(--content-max-width);
      margin: 0 auto;
      box-sizing: border-box;
    }

    /* --- preview-area の修正 --- */
    .preview-area {
      flex: 0 1 auto;
      display: flex;
      flex-direction: column;
      gap: 15px;
      min-width: 0;
    }

    #controls,
    #controlsBottom {
      background: var(--panel-bg);
      padding: 15px;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex-shrink: 0;
    }

    .control-group {
      border: 1px solid #eee;
      padding: 10px 15px;
      border-radius: 8px;
      background: #fff;
    }

    .section-title {
      font-size: 0.75rem;
      font-weight: bold;
      color: #555;
      margin-bottom: 5px;
      display: block;
      border-bottom: 1px solid #eee;
    }

    .button-row {
      display: flex;
      gap: 10px;
      margin-top: 5px;
      flex-wrap: wrap;
    }

    @media (max-width: 600px) {
      .button-row input[type="file"] {
        flex: 1 0 100%;
        min-width: 0;
      }
      .button-row button {
        min-width: 0;
      }
    }

    .error-message {
        color: #d9534f;
        background: #fdf7f7;
        border: 1px solid #d9534f;
        padding: 10px;
        border-radius: 5px;
        margin-top: 15px;
        display: none; /* 初期状態は非表示 */
        font-size: 0.9rem;
        font-weight: bold;
    }

    button {
      flex: 1;
      padding: 8px;
      border: none;
      border-radius: 4px;
      font-weight: bold;
      cursor: pointer;
    }    

    #detectBtn {
      background: var(--primary-color);
      color: white;
    }

    #savePhotoBtn {
      background: var(--success-color);
      color: white;
    }
    #sendBtn { background: var(--success-color); color: white; }
    #sendBtn:disabled { background: #ccc; }

    /* --- preview-item 全体の調整 --- */
    .preview-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  min-width: 0;
  height: auto; /* fit-content より auto の方が flex-start 下では安定します */
}
    /* --- 画像プレビュー側の Canvas 調整 --- */
    canvas.mediapipe {
      width: auto;
      max-width: 100%;
      max-height: 220px;
      display: block;
      background: #000;
      border-radius: 6px;
      object-fit: contain;
    }

    /* Model Viewer 見出し行（タイトル＋全画面ボタン） */
    .viewer-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 5px;
    }
    .fullscreen-btn {
      flex: none;
      font-size: 0.72rem;
      padding: 3px 10px;
      border: 1px solid #d3dae4;
      background: #fff;
      color: #555;
      border-radius: 6px;
      cursor: pointer;
      font-weight: normal;
    }
    .fullscreen-btn:hover { border-color: var(--primary-color); color: var(--primary-color); }

    /* 魚眼スライダー行 */
    /* 反転／性別／移動／回転のボタンが並ぶ行。狭い画面では折り返さないと
       右へはみ出して横スクロールが出る（mobile-375 で 454px まで伸びていた）。 */
    .fisheye-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 8px; font-size: 0.78rem; color: #555; }
    .fisheye-row input[type="range"] { flex: 1 1 120px; min-width: 0; }

    /* --- Unityコンテナ：パネル幅いっぱいに広げる。縦長維持、PCで高くなりすぎないよう上限 --- */
    /* Browseでポーズ選択→Home遷移時、ここへスクロールさせる（上に少し余白） */
    #modelViewerSection { scroll-margin-top: 12px; }

    #unity-container {
      width: 100%;             /* パネル（外枠）いっぱいに広げる */
      aspect-ratio: 3 / 4;     /* 縦長（PoseManiacs風）。立ちポーズが大きく見える */
      max-height: 80vh;        /* PCで全幅×縦長だと高すぎるため上限 */
      position: relative !important;
      background: #000;
      border-radius: 6px;
      overflow: hidden;
      flex: none;
    }

    /* iOS Safari等、Fullscreen API非対応端末向けのCSS擬似フルスクリーン */
    #unity-container.pseudo-fullscreen {
      position: fixed !important;
      top: 0; left: 0;
      width: 100vw;
      width: 100dvw;
      height: 100vh;
      height: 100dvh;
      max-height: none;
      aspect-ratio: auto;
      border-radius: 0;
      z-index: 99999;
    }
    /* 擬似フルスクリーン中の終了ボタン（×） */
    #pseudoFsExit {
      position: absolute;
      top: 10px; right: 10px;
      z-index: 100000;
      display: none;
      width: 40px; height: 40px;
      border: none;
      border-radius: 50%;
      background: rgba(0,0,0,0.55);
      color: #fff;
      font-size: 1.4rem;
      line-height: 40px;
      text-align: center;
      cursor: pointer;
    }
    #unity-container.pseudo-fullscreen #pseudoFsExit { display: block; }

    /* --- 修正箇所 3: キャンバス自体はコンテナいっぱいに広げる --- */
    #unity-canvas {
      width: 100% !important;
      height: 100% !important;
      display: block;
      object-fit: contain; /* 歪みを防止 */
      touch-action: none;  /* モバイルのピンチをUnityへ渡す（ページズームに奪わせない） */
    }

    #unity-loading-overlay {
      position: absolute;
      inset: 0;
      background: #111;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      border-radius: 6px;
      transition: opacity 0.5s ease;
      z-index: 10;
    }
    #loading-bar-bg {
      width: 60%;
      height: 8px;
      background: #333;
      border-radius: 4px;
      overflow: hidden;
    }
    #loading-bar {
      height: 100%;
      width: 0%;
      background: var(--primary-color);
      border-radius: 4px;
      transition: width 0.2s ease;
    }
    #loading-text {
      color: #aaa;
      font-size: 0.85rem;
    }

    /* --- 画像プレビューの解析中スピナー --- */
    .canvas-wrap {
      position: relative;
      align-self: center;
      max-width: 100%;
      line-height: 0;
    }
    .detect-spinner {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: rgba(0, 0, 0, 0.55);
      border-radius: 6px;
      z-index: 5;
    }
    .detect-spinner[hidden] { display: none; }
    .spinner {
      width: 42px;
      height: 42px;
      border: 4px solid rgba(255, 255, 255, 0.25);
      border-top-color: var(--primary-color);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    .spinner-text {
      color: #fff;
      font-size: 0.85rem;
      line-height: 1.2;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* --- ポーズプリセットギャラリー --- */
    .preset-hint {
      font-size: 0.8rem;
      color: #666;
      margin: 4px 0 10px;
      line-height: 1.5;
    }
    .preset-gallery {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 12px;
    }
    .preset-card {
      flex: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 6px;
      background: #fff;
      border: 1px solid #e3e8ef;
      border-radius: 8px;
      font-weight: normal;
      cursor: pointer;
      transition: border-color 0.15s, box-shadow 0.15s, transform 0.05s;
    }
    .preset-card:hover:not(:disabled) {
      border-color: var(--primary-color);
      box-shadow: 0 2px 8px rgba(74, 144, 226, 0.18);
    }
    .preset-card:active:not(:disabled) { transform: scale(0.97); }
    .preset-card:disabled { opacity: 0.5; cursor: default; }
    .preset-card img {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      background: #eef2f7;
      border-radius: 6px;
      pointer-events: none;
    }
    .preset-card span {
      font-size: 0.72rem;
      color: #444;
      text-align: center;
      line-height: 1.2;
      word-break: break-word;
      pointer-events: none;
    }

    /* --- タブバー（ホーム / 探す） --- */
    .tab-bar {
      display: flex;
      gap: 6px;
      width: 95%;
      max-width: var(--content-max-width);
      margin: 10px auto 0;
      box-sizing: border-box;
    }
    .tab-btn {
      flex: none;
      font-size: 0.85rem;
      font-weight: bold;
      padding: 8px 20px;
      border: 1px solid #d3dae4;
      border-bottom: none;
      background: #eef2f7;
      color: #666;
      cursor: pointer;
      border-radius: 8px 8px 0 0;
    }
    .tab-btn.active {
      background: #fff;
      color: var(--primary-color);
      border-color: var(--primary-color);
      border-bottom: 2px solid #fff;
    }
    .tab-pane { display: none; }
    .tab-pane.active { display: block; }

    /* --- 探すタブ：タグ ドロップダウン --- */
    .browse-panel {
      width: 95%;
      max-width: var(--content-max-width);
      margin: 0 auto;
      padding: 15px;
      box-sizing: border-box;
    }
    .tag-select-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
      font-size: 0.85rem;
      color: #555;
    }
    #tagSelect {
      padding: 6px 10px;
      border: 1px solid #d3dae4;
      border-radius: 6px;
      background: #fff;
      color: #333;
      font-size: 0.85rem;
      cursor: pointer;
    }
    .preset-card.is-hidden { display: none; }

    /* ===== 管理モード（?admin=1 のときだけ表示）===== */
    .admin-only { display: none; }                 /* 既定は完全非表示 */
    body.admin-on .admin-only.row { display: flex; }
    body.admin-on .admin-only.block { display: block; }
    body.admin-on .admin-only.inline { display: inline-block; }

    .admin-bar {
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      padding: 10px 12px;
      background: #fff7ed;
      border: 1px solid #fdba74;
      border-radius: 8px;
      font-size: 0.82rem;
      color: #7c2d12;
    }
    .admin-bar .spacer { flex: 1 1 auto; }
    .admin-bar button {
      font-size: 0.8rem;
      font-weight: bold;
      padding: 6px 12px;
      border: 1px solid #d3dae4;
      border-radius: 6px;
      background: #fff;
      color: #333;
      cursor: pointer;
    }
    .admin-bar button.primary { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
    .admin-bar button.danger  { color: #b91c1c; border-color: #fca5a5; }
    .admin-bar button.on      { background: #fde68a; border-color: #f59e0b; }
    .admin-bar .count { font-weight: bold; }
    .admin-bar label.untagged-toggle { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }

    /* カードのバッジ（編集状態） */
    .preset-card { position: relative; }
    .preset-card .badges { position: absolute; top: 4px; left: 4px; display: flex; gap: 3px; pointer-events: none; }
    .preset-card .badge {
      font-size: 0.6rem; font-weight: bold; line-height: 1;
      padding: 2px 4px; border-radius: 4px; color: #fff;
    }
    .badge.edited  { background: #2563eb; }
    .badge.posed   { background: #7c3aed; }
    .badge.untag   { background: #9ca3af; }
    .badge.pro     { background: #b45309; font-size: 0.62rem; padding: 3px 5px; }
    .preset-card.is-locked img { filter: grayscale(35%) brightness(0.9); }
    .preset-card.is-selected { outline: 3px solid var(--primary-color); outline-offset: 1px; }

    /* ===== お気に入り（端末内保存: 無料1体 / PRO 100体） ===== */
    .viewer-head-btns { display: flex; gap: 6px; }
    #favSaveBtn:not(:disabled) { color: #b45309; border-color: #e8c9a0; }
    #favSaveBtn:not(:disabled):hover { border-color: #b45309; color: #92400e; }
    #favSaveBtn:disabled { opacity: 0.5; cursor: default; }
    .fav-origin { display: flex; align-items: center; gap: 8px; margin: 6px 0 8px; }
    .fav-origin img {
      width: 48px; height: 48px; object-fit: cover;
      border-radius: 6px; background: #eef2f7;
    }
    .fav-origin span { font-size: 0.85rem; color: #444; font-weight: bold; word-break: break-word; }
    .my-pose-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
      gap: 10px;
      margin-top: 8px;
    }
    .my-pose-card {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 3px;
      padding: 4px;
      background: #fff;
      border: 1px solid #e3e8ef;
      border-radius: 8px;
      cursor: pointer;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .my-pose-card:hover { border-color: var(--primary-color); box-shadow: 0 2px 8px rgba(74, 144, 226, 0.18); }
    .my-pose-card.is-disabled { opacity: 0.5; cursor: default; }
    .my-pose-card img {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      background: #eef2f7;
      border-radius: 6px;
      pointer-events: none;
    }
    .my-pose-card .mp-name {
      font-size: 0.68rem; color: #444; text-align: center;
      line-height: 1.2; word-break: break-word; pointer-events: none;
    }
    .my-pose-card.is-locked img { filter: grayscale(35%) brightness(0.9); }
    .my-pose-card .badges { position: absolute; top: 3px; left: 3px; display: flex; pointer-events: none; }
    .my-pose-card .badge {
      font-size: 0.6rem; font-weight: bold; line-height: 1;
      padding: 3px 5px; border-radius: 4px; color: #fff; background: #b45309;
    }
    .my-pose-card .mp-del {
      position: absolute; top: 2px; right: 2px;
      width: 20px; height: 20px; padding: 0; flex: none;
      display: flex; align-items: center; justify-content: center;
      border-radius: 50%; background: rgba(0,0,0,0.45); color: #fff; font-size: 0.7rem;
    }
    .my-pose-card .mp-del:hover { background: #b91c1c; }
    body[data-pm-auth-state="pro"] #myPoseUpsellHint { display: none; }

    /* 編集ポップオーバー */
    .admin-overlay {
      position: fixed; inset: 0; z-index: 1000;
      background: rgba(0,0,0,0.45);
      display: none; align-items: center; justify-content: center;
      padding: 16px;
    }
    .admin-overlay.open { display: flex; }
    .admin-popover {
      width: 100%; max-width: 420px; max-height: 88vh; overflow-y: auto;
      background: #fff; border-radius: 12px; padding: 16px 18px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.3);
      font-size: 0.88rem; color: #333;
    }
    .admin-popover h3 { margin: 0 0 4px; font-size: 1rem; }
    .admin-popover .sub { color: #888; font-size: 0.75rem; margin: 0 0 12px; word-break: break-all; }
    .admin-popover .grp-title { font-weight: bold; margin: 12px 0 6px; font-size: 0.8rem; color: #555; }
    .admin-popover .opt-grid { display: flex; flex-wrap: wrap; gap: 6px; }
    .admin-popover label.chip {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 5px 9px; border: 1px solid #d3dae4; border-radius: 999px;
      cursor: pointer; user-select: none;
    }
    .admin-popover label.chip:has(input:checked) { background: #e0edff; border-color: var(--primary-color); }
    .admin-popover .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
    .admin-popover .actions button {
      font-size: 0.82rem; font-weight: bold; padding: 8px 12px;
      border: 1px solid #d3dae4; border-radius: 8px; background: #fff; cursor: pointer;
    }
    .admin-popover .actions button.primary { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
    .admin-popover .actions button.edit3d  { background: #7c3aed; border-color: #7c3aed; color: #fff; }
    .admin-popover .actions .spacer { flex: 1 1 auto; }

    /* 申請レビュー一覧 */
    .review-list { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }
    .review-row {
      display: flex; gap: 10px; align-items: center;
      border: 1px solid #e3e8ef; border-radius: 10px; padding: 8px;
    }
    .review-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; background: #f0f2f5; flex: 0 0 auto; }
    .review-info { flex: 1 1 auto; min-width: 0; }
    .review-title { font-weight: bold; font-size: 0.85rem; }
    .review-meta { color: #888; font-size: 0.72rem; word-break: break-all; }
    .review-actions { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
    .review-actions button {
      font-size: 0.74rem; font-weight: bold; padding: 5px 8px;
      border: 1px solid #d3dae4; border-radius: 6px; background: #fff; cursor: pointer; white-space: nowrap;
    }
    .review-actions button.primary { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
    .review-actions button.danger { background: #fff0f0; border-color: #e7a3a3; color: #c0392b; }

    /* 投稿ボタン */
    #submitPoseBtn {
      width: 100%; font-size: 0.85rem; font-weight: bold; padding: 9px;
      border: 1px solid #0a7d33; border-radius: 6px; background: #0a7d33; color: #fff; cursor: pointer;
    }
    #submitPoseBtn:hover { background: #0b8d39; }

    /* クリスタ用BVH書き出し（PRO・Beta） */
    #exportBvhBtn {
      width: 100%; font-size: 0.85rem; font-weight: bold; padding: 9px;
      border: 1px solid #b45309; border-radius: 6px; background: #fff7ed; color: #b45309; cursor: pointer;
      display: flex; align-items: center; justify-content: center; gap: 6px;
    }
    #exportBvhBtn:hover { background: #ffedd5; }
    #exportBvhBtn:disabled { opacity: 0.6; cursor: default; }
    #exportBvhBtn .beta-tag {
      font-size: 0.62rem; font-weight: bold; color: #fff; background: #b45309;
      padding: 1px 5px; border-radius: 999px; letter-spacing: 0.03em;
    }
    /* 非PROのときだけ鍵を出す（PRO判定は body[data-pm-auth-state] に追従） */
    #exportBvhBtn .lock-tag { display: none; }
    body:not(.pro-user) #exportBvhBtn .lock-tag { display: inline; }
    #adminLoginBtn, #adminReviewBtn { font-size: 0.78rem; padding: 5px 9px; }

    /* R-18表示中はAdSense自動広告を非表示（ポリシーリスク低減） */
    body.r18-mode ins.adsbygoogle,
    body.r18-mode .google-auto-placed { display: none !important; }

    /* Proユーザーは広告非表示（A8アフィリ＝.kt-ad/.kt-rail、将来のAdSense再開時も同条件で隠す） */
    body.pro-user .kt-ad,
    body.pro-user .kt-rail,
    body.pro-user ins.adsbygoogle,
    body.pro-user .google-auto-placed { display: none !important; }

    /* ホームタブ：ポーズ取り込みボタン */
    #poseCaptureRow { margin-top: 8px; }
    #poseCaptureBtn {
      width: 100%; font-size: 0.82rem; font-weight: bold; padding: 8px;
      border: 1px solid #7c3aed; border-radius: 6px; background: #7c3aed; color: #fff; cursor: pointer;
    }
    #poseCaptureBtn:disabled { opacity: 0.5; cursor: default; }
    #poseCaptureRow .cap-hint { font-size: 0.72rem; color: #7c3aed; margin: 6px 0 0; }

    /* スマホでは2列固定 */
    @media (max-width: 600px) {
      .preset-gallery { grid-template-columns: repeat(2, 1fr); }
    }

    /* ===== ファイル ドラッグ&ドロップ オーバーレイ ===== */
    /* POSE DETECTION エリアだけを点線枠で囲む（サイト全体ではない） */
    #poseDetectionGroup { position: relative; }
    .drop-overlay {
      position: absolute;
      inset: 0;
      background: rgba(74, 144, 226, 0.12);
      border: 4px dashed var(--primary-color);
      border-radius: 8px;
      display: none;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 1rem;
      font-weight: 700;
      color: var(--primary-color);
      pointer-events: none;
      z-index: 50;
      padding: 12px;
    }
    body.is-dragging .drop-overlay { display: flex; }