:root{
    --bg:#0b0b0f;--panel:#15151b;--panel-2:#1b1b22;--text:#f5f5f6;--muted:#b3b3bd;
    --accent:#e11d48;--accent-2:#9f1239;--border:#2a2a36;
    --shadow:0 6px 24px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.5)
  }
  *{box-sizing:border-box}html,body{height:100%}
  body{
    margin:0;background:
      radial-gradient(1200px 600px at 20% -10%, rgba(225,29,72,.08), transparent 60%),
      radial-gradient(800px 500px at 100% 0%, rgba(225,29,72,.08), transparent 55%),
      var(--bg);
    color:var(--text);
    font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,"Segoe UI",Roboto,"Helvetica Neue",Arial;
    line-height:1.6
  }
  h1,h2,h3{margin:0 0 .5rem}h1{font-size:1.7rem}h2{font-size:1.2rem}
  .container{max-width:none;margin:24px 0 64px;padding:0 16px}

/* iOS の自動文字拡大を抑止 */
html { -webkit-text-size-adjust: 100%; }

/* クリック系要素でのダブルタップ拡大を抑止（対応ブラウザで有効） */
button, a, [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* 入力フォーカス時の“勝手に拡大”回避（iOSは16px未満で拡大が発動）*/

  /* Buttons */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    font-size:1rem;line-height:1;min-height:42px;padding:.7rem 1rem;border-radius:10px;
    appearance:none;border:1px solid var(--accent);
    background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#fff;
    font-weight:700;letter-spacing:.02em;cursor:pointer;box-shadow:var(--shadow);
    transition:transform .05s,filter .2s
  }
  .btn:active{transform:translateY(1px) scale(.995)}
  .btn.subtle{background:var(--panel-2);color:var(--text);border-color:var(--border);font-weight:600}
  .btn.ghost{background:transparent;border:1px solid var(--border);color:var(--muted)}
  .btn.small{min-height:32px;padding:.45rem .7rem;font-size:.9rem}
  .btn[disabled]{opacity:.55;cursor:not-allowed;filter:saturate(.6)}

  .tag{display:inline-flex;align-items:center;gap:.45rem;background:#23232b;border:1px solid var(--border);color:#9aa;font-size:.85rem;padding:.2rem .55rem;border-radius:999px}
  .toolbar{background:linear-gradient(180deg, rgba(225,29,72,.12), rgba(225,29,72,.04) 40%, transparent);border:1px solid var(--border);border-radius:16px;padding:16px;display:grid;gap:12px;box-shadow:var(--shadow)}
  .toolbar{
  max-width:1200px;
  width:100%;
  margin:24px auto;      /* 中央寄せ */
  padding-left:16px;     /* container の左右パディングと整合 */
  padding-right:16px;
  box-sizing:border-box; /* 余白計算のズレ防止 */
}
  .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
  .file-drop{display:flex;gap:12px;align-items:center;flex-wrap:wrap;border:2px dashed rgba(225,29,72,.45);border-radius:12px;padding:12px;background:rgba(225,29,72,.06)}
  .file-drop.dragover{background:rgba(225,29,72,.12)}
  input[type="file"]::file-selector-button{appearance:none;border:1px solid var(--accent);background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#fff;padding:.55rem .9rem;border-radius:10px;cursor:pointer;font-weight:700;line-height:1;margin-right:.6rem}
  input[type="file"]{color:var(--muted)}
  select{appearance:none;background:#0f1016;color:var(--text);border:1px solid var(--border);border-radius:10px;padding:.55rem 2rem .55rem .7rem;font-weight:600;line-height:1;min-height:42px;
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 20 20" fill="none" stroke="%23b3b3bd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 8 10 12 14 8"/></svg>');
    background-repeat:no-repeat;background-position:right .6rem center;background-size:12px}
  select:focus{outline:2px solid rgba(225,29,72,.4);outline-offset:2px}
  /* 複数選択セレクトの矢印アイコンを消し、余白を調整 */
  select[multiple]{background-image: none; padding-right: .7rem; min-width: 220px; /* 狭すぎ防止：必要なら調整 */}

  .panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
  .grid{display:grid;gap:16px}.two-col{grid-template-columns:1fr}@media(min-width:980px){.two-col{grid-template-columns:1fr 1fr;align-items:start;}}
  .kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:#0f1014;padding:.1rem .35rem;border-radius:6px;border:1px solid var(--border);color:#d1d5db}
  .muted{color:var(--muted)}.sep{height:1px;background:var(--border);margin:.75rem 0 1rem}
  .visually-hidden{position:absolute!important;inset:0 auto auto 0;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
  /* Tabs + item grid */
  .tabs{display:flex;gap:8px;border-bottom:1px solid var(--border);margin-bottom:12px;flex-wrap:wrap}
  .tab{padding:.45rem .75rem;border:1px solid var(--border);border-bottom:none;border-top-left-radius:10px;border-top-right-radius:10px;background:#121218;color:var(--muted);cursor:pointer;user-select:none; touch-action: manipulation; position: relative; }
  .tab.active{background:#191922;color:#fff;border-color:var(--accent)}
  .tab:hover{ background:#1f1f27; color:#fff; border-color: var(--accent); }
  .item-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .item-card{background:var(--panel-2);border:1px solid var(--border);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:190px;position:relative}
  .item-thumb{aspect-ratio:1/1;background:#0e0f14;border:1px dashed var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden}
  .item-thumb img{width:100%;height:100%;object-fit:contain;display:block}
  .item-code{font-weight:800;font-size:1.15rem;letter-spacing:.03em}
  .rarity{font-weight:700}
  .card-actions{display:flex;gap:8px;flex-wrap:wrap}
  .card-actions .btn[data-action="primary"]{width:100%}
  .badge{font-size:.75rem;padding:.1rem .4rem;border-radius:.5rem;border:1px solid var(--border);background:#0e0f14;color:#a6a6b3}
  .flag{position:absolute;top:8px;right:10px;display:flex;gap:6px}
  .flag .skip{border-color:#e11d48;color:#fff;background:linear-gradient(180deg,#e11d48,#9f1239)}

  /* Users panel */
  .user-card{ margin-bottom:16px; position:relative; padding:0 }
  .user-header{display:flex; align-items:center; justify-content:space-between; padding:16px; margin:0; border-bottom:1px solid var(--border);}
  /* 見出し全体を“押せる”感じに */
  .user-header.clickable{ cursor:pointer; user-select:none; border-radius:10px }
  .user-header.clickable:hover{ background:#191922 }
  .user-actions{ display:flex; gap:8px; align-items:center }
  .user-actions .btn.small{ min-width:110px }

  .gacha-box{ background:var(--panel-2); border:1px dashed var(--border); border-radius:12px; padding:12px }
  .rarity-row{ display:grid; grid-template-columns:3.6rem 1fr; column-gap:.6rem; align-items:start; margin-top:.25rem }
  .rarity-label{ display:flex; align-items:center; font-weight:800; line-height:1.2; min-height:32px }
  .rarity-items{ display:flex; flex-wrap:wrap; gap:.3rem .45rem }
  .item-pill{ display:inline-flex; align-items:center; gap:.4rem; padding:.25rem .6rem; border-radius:999px; background:#23232b; border:1px solid var(--border) }
  .item-pill img{ width:20px; height:20px; object-fit:contain; border-radius:4px; display:block }
  .item-pill.no-img{ justify-content:center; padding:.25rem .8rem }

  /* --- user-card 折りたたみ --- */
  .icon-btn{width:32px; height:32px; border-radius:8px; border:1px solid var(--border);background:transparent; color:var(--muted); display:inline-grid; place-items:center;cursor:pointer; box-shadow:none; line-height:1; font-weight:800}
  .icon-btn:active{ transform:translateY(1px) scale(.995) }
  .collapse-btn::after{ content:'▾' }
  .user-card.collapsed .collapse-btn::after{ content:'▸' }
  /* 高さアニメは JS で数値指定、CSS はトランジションのみ */
  .user-body{overflow:hidden; height:auto; opacity:1;transition:height .22s ease, opacity .22s ease; will-change:height, opacity;}
  .user-card.collapsed .user-body{ opacity:0 }
  .user-card .user-body{padding: 0 16px 16px 16px;}/* 開いている時の user-body パディング */
  .user-card.collapsed .user-body{padding: 0 16px 0 16px;}/* 閉じた時は下パディングを 0 に */
  .user-card .user-header{border-bottom: 1px solid var(--border); padding-bottom: 8px; }/* デフォルトで header 下に1px線を引く（閉じた時の見切り線用） */
  .user-card:not(.collapsed) .user-header{border-bottom: none; padding-bottom: 0;}/* 開いている時は header 下ボーダーを消す */


  /* 本文の余白は内側ラッパに逃がす（height:0時に隙間を残さない） */
  .user-body-inner{ padding:12px 16px 16px }

  /* All modals */
  .modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.65);padding:20px;z-index:50}
  .modal.show{display:grid}
  .dialog{width:min(880px,96vw);background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--shadow);max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 24px);margin: 0 auto;}
  .dialog h3{margin:0 0 .5rem}
  .dialog .grid-2{display:grid;gap:12px;grid-template-columns:1fr}@media(min-width:860px){.dialog .grid-2{grid-template-columns:1fr 1fr}}

  /* Start splash */
  .splash{display:grid;place-items:center;min-height:60vh}
  .info-btn{width:26px;height:26px;border-radius:999px;border:1px solid var(--border);background:#0f1016;color:#cbd5e1;display:inline-flex;align-items:center;justify-content:center;font-weight:800;cursor:pointer}
  .hint{color:#a1a1aa;font-size:.95rem}

  /* Paste areas */
  textarea{width:100%;min-height:180px;background:#0f1016;color:#f5f5f6;border:1px solid var(--border);border-radius:12px;padding:10px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
  input[type="text"]{width:100%;padding:.6rem .7rem;border-radius:10px;border:1px solid var(--border);background:#0f1016;color:#f5f5f6}

  /* 画像プレビューの収まりを強制（モーダル） */
  #modalPreview{width:100%;height:100%; object-fit:contain;image-rendering:auto;}

  /* ユーザー内訳の個数表示 */
  .item-pill .count{font-weight:700;color:#e5e7eb;margin-left:.15rem;}

  /* タブ右上の×ボタン */
  .tab .close{position:absolute; top:-8px; right:-8px; width:20px; height:20px; display:flex; align-items:center; justify-content:center; border-radius:999px; background:#2a2a36; color:#cbd5e1; border:1px solid var(--border); font-weight:800; cursor:pointer;}
  .tab .close:hover{ background:#e11d48; color:#fff; border-color:#e11d48; }
  .tab { position: relative; }
  .tab .close{opacity: 0; pointer-events: none; transition: opacity .15s ease;}
  .tab:hover .close{ opacity: 1; pointer-events: auto; }

  /* アイテムカード右上の×ボタン */
.item-card .close{
  position:absolute; top:-8px; right:-8px;
  width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  border-radius:999px; background:#2a2a36; color:#cbd5e1;
  border:1px solid var(--border); font-weight:800; cursor:pointer;
  opacity:0; pointer-events:none; transition:opacity .15s ease;
}
.item-card:hover .close{ opacity:1; pointer-events:auto; }
.item-card .close:hover{ background:#e11d48; color:#fff; border-color:#e11d48; }

  /* 再設計トグル（スライド式） */
  .toggle{display:inline-flex; align-items:center;gap:.5rem; padding: 0; background: transparent; border-radius: 0; box-shadow: none; }
  .toggle input.switch{appearance:none; width:44px; height:24px; border-radius:999px;background:#0f1016; border:1px solid var(--border);position:relative; outline:none; cursor:pointer;transition:background .2s,border-color .2s;}
  .toggle input.switch::after{content:""; position:absolute; top:2px; left:2px; width:18px; height:18px;border-radius:50%; background:#9ca3af; transition:left .2s, background .2s;}
  .toggle input.switch:checked{ background:#e11d48; border-color:#e11d48; }
  .toggle input.switch:checked::after{ left:24px; background:#fff; }
  .toggle .label{ font-weight:700; color:#cbd5e1; }

  /* JS が #mainUI に .mobile-views を付与した時だけモバイルUIにする */
  /* JS が #mainUI に .mobile-views を付与した時だけモバイルUIにする */
  #mainUI.mobile-views { padding-bottom: 98px; } /* ボトムタブ分の余白 */

  #mainUI.mobile-views [data-page]{ display:none; }
  /* controls はドロワーに移すため、モバイルでは常に非表示 */
  #mainUI.mobile-views #controlsPage{ display:none; }
  #mainUI.mobile-views[data-view="items"]    #itemsPanel{ display:block; }
  #mainUI.mobile-views[data-view="users"]    #usersPanel{ display:block; }
  #mainUI.mobile-views[data-view="riagu"]    #skipPanel { display:block; } /* NEW */

  /* --- ハンバーガー（モバイルのみ表示） --- */
  .menu-btn{display:none; align-items:center; justify-content:center;
    width:40px; height:40px; border:1px solid var(--border); border-radius:10px;
    background:#15151b; color:#cbd5e1; margin-right:8px;
  }
  #mainUI.mobile-views .menu-btn, body.mobile-views .menu-btn{display:inline-flex;}
  .menu-btn .menu-icon{ display:inline-block; width:20px; height:16px; position:relative; }
  .menu-btn .menu-icon span{ position:absolute; left:0; right:0; height:2px; background:#cbd5e1; }
  .menu-btn .menu-icon span:nth-child(1){ top:0; }
  .menu-btn .menu-icon span:nth-child(2){ top:7px; }
  .menu-btn .menu-icon span:nth-child(3){ bottom:0; }

  /* --- ドロワー --- */
  .drawer{ position:fixed; inset:0; z-index:80; pointer-events:none; }
  .drawer .drawer-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.45); opacity:0; transition:opacity .2s; }
  .drawer .drawer-panel{
    position:absolute; left:0; top:0; bottom:0; width:min(86vw, 360px);
    transform:translateX(-100%); transition:transform .2s ease;
    background:#0f1016; border-right:1px solid var(--border);
    padding:16px 12px 12px; padding-bottom:calc(12px + env(safe-area-inset-bottom));
    overflow:auto;
  }
  .drawer.open{ pointer-events:auto; }
  .drawer.open .drawer-overlay{ opacity:1; }
  .drawer.open .drawer-panel{ transform:translateX(0); }
  .drawer .drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }

  /* ツールバーを縦積みに最適化 */
  .drawer .toolbar .row{ display:flex; flex-direction:column; align-items:stretch; gap:10px; }
  .drawer .toolbar .row .btn,
  .drawer .toolbar .row .toggle,
  .drawer .toolbar .row .user-search{ width:100%; }

  /* ドロワー開時は背面スクロールを抑止 */
  body.drawer-open{ overflow:hidden; }

  /* モバイル時：ヘッダーを横並びに（ハンバーガー+タイトル） */
  #mainUI.mobile-views header,
  body.mobile-views header{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  }

  /* 説明文は次の行に回して全幅表示（タイトルの下に来る） */
  body.mobile-views header > p{
    flex-basis:100%;
    margin: 0.25rem 0 0;
  }

  /* ボトムタブ：通常は非表示、mobile-views 時のみ表示 */
  .mobile-tabs{ display:none; }
  #mainUI.mobile-views .mobile-tabs{
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display:flex; gap:8px; padding:10px env(safe-area-inset-right) calc(10px + env(safe-area-inset-bottom)) env(safe-area-inset-left);
    background: rgba(10,10,14,.9); backdrop-filter: blur(6px);
    border-top: 1px solid var(--border);
  }
  #mainUI.mobile-views .mobile-tabs button{
    flex:1 1 0; min-height:56px; border-radius:12px; border:1px solid var(--border);
    background:#15151b; color:#cbd5e1; font-weight:700;
  }
  #mainUI.mobile-views .mobile-tabs button.active{ border-color: var(--accent); color:#fff; }

  /* --- モバイル時：アイテムカードを横長に --- */
  #mainUI.mobile-views #itemGrid{ grid-template-columns: 1fr; gap:12px; }
  #mainUI.mobile-views .item-card{
    /* 2カラムの横長グリッド。左に正方形サムネ、右に情報 */
    display:grid;
    grid-template-columns:110px 1fr;
    grid-template-rows:auto auto auto auto;
    grid-template-areas:
      "thumb flag"    /* ← 右上にバッジ（重ならない専用行） */
      "thumb title"
      "thumb rarity"
      "thumb actions";
    align-items:center;
    gap:8px;
    padding:8px;
    min-height:110px;   /* サムネと高さを合わせる */
  }
  /* サムネ（左） */
  #mainUI.mobile-views .item-card .item-thumb{grid-area:thumb; width:100%; max-width:110px; aspect-ratio:1/1;}

  /* 右上のバッジ行：absolute を解除して専用セルに置く（重なり防止） */
  #mainUI.mobile-views .item-card .flag{ grid-area:flag; position:static !important; justify-self:end; align-self:start; margin:0;}
  #mainUI.mobile-views .item-card .badge{ font-size:.72rem; padding:.05rem .35rem; border-radius:.4rem;}

  /* タイトル（item-code）を省略記号で1行に */
  #mainUI.mobile-views .item-card .item-code{ grid-area:title; font-size:1.05rem; line-height:1.2; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

  /* レアリティの行を少し小さくタイトに */
  #mainUI.mobile-views .item-card > .muted{ grid-area:rarity; margin-top:2px; }
  #mainUI.mobile-views .item-card .rarity{ font-size:.9rem; }

  /* アクション（画像設定 / リアグ）は横並び・コンパクトに */
  #mainUI.mobile-views .item-card .card-actions{ grid-area:actions; display:flex; gap:6px; margin-top:2px;}
  #mainUI.mobile-views .item-card .card-actions .btn{ flex:1 1 0; min-height:36px; padding:.45rem .7rem; font-size:.95rem; border-radius:10px;}
  #mainUI.mobile-views .item-card .card-actions .btn.ghost{ font-size:.9rem;}

  /* 正方形タイル配置：PC 4列 / モバイル 2x2 */
  .start-grid{
    display:grid; gap:12px;
    grid-template-columns: repeat(4, minmax(0,1fr));
  }
  
  .start-tile{
    position:relative; aspect-ratio:1/1;
    border:1px solid var(--accent); border-radius:16px;
    background:linear-gradient(180deg,var(--accent),var(--accent-2));
    color:#fff;
    box-shadow: var(--shadow);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:6px; cursor:pointer; transition:filter .15s, transform .05s;
  }
  .start-tile .title{ font-weight:800; font-size:1.05rem; color:#fff; }
  .start-tile .sub{ font-size:.85rem; color:#ffe6ec; text-align:center; line-height:1.3 }
  .start-tile .info{
    position:absolute; top:8px; right:8px; width:22px; height:22px;
    border-radius:999px; background:rgba(0,0,0,.28); color:#fff;
    display:flex; align-items:center; justify-content:center; font-weight:800;
    border:1px solid rgba(255,255,255,.25);
  }
  .start-tile:hover{ filter:brightness(1.06); transform:translateY(1px); outline:none; }

    /* PWA（standalone）かつモバイル相当のときだけ適用 */
  
  @media (min-width: 1400px){
  #mainUI .grid.two-col{
    /* ←2カラムを3カラムに拡張 */
    grid-template-columns: minmax(420px, 1.0fr) minmax(620px, 1.4fr) minmax(520px, 1fr) minmax(360px, .9fr);
    grid-auto-flow: row dense;
  }
  #rarityPanel{ 
    grid-column: 1; 
    grid-row: 1;
    align-self: start;}
  #itemsPanel{ grid-column: 2; }  /* 左：アイテム画像 */
  #usersPanel{ grid-column: 3; }  /* 中：ユーザー内訳 */
  #skipPanel {                    /* 右：リアグ（上詰め） */
    grid-column: 4;
    grid-row: 1;
    align-self: start;
  }
}

  .image-actions .btn{ flex:1 1 0; }

  /* === Gacha Multi-Select (Popover) === */
  /* === Multi-Select (ガチャ/レア度) 共通スタイル === */
  .gacha-filter, .rarity-filter{
    position:relative; display:flex; align-items:center; gap:8px; flex-wrap:nowrap; min-width:0;
    --gf-font:.95rem; --gf-line:1.1;
  }
  .gacha-filter .gf-label, .rarity-filter .gf-label{
    white-space:nowrap; font-weight:700; font-size:var(--gf-font); line-height:var(--gf-line);
  }
  .gacha-filter .gf-btn, .rarity-filter .gf-btn{
    min-width:160px; max-width:60vw; text-overflow:ellipsis; overflow:hidden;
    min-height:0; height:auto; padding:2px 12px; font-size:var(--gf-font); line-height:var(--gf-line); font-weight:600;
  }
  

  /* Popover 共通（既存） */
  .gf-popover{ position:absolute; inset:auto auto auto 0; top:calc(100% + 8px); width:min(420px,92vw); max-height:320px; overflow:auto; display:none; background:var(--panel); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); padding:8px; z-index:90; }
  .gacha-filter.open .gf-popover, .rarity-filter.open .gf-popover{ display:block; animation:gfFade .12s ease-out; }
  @keyframes gfFade{ from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none} }
  .gf-item{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:10px; cursor:pointer; user-select:none; }
  .gf-item:hover{ background:#1b1b22; }
  .gf-item[aria-selected="true"]{ background:rgba(225,29,72,.12); border:1px solid var(--border); }
  .gf-check{ width:20px; height:20px; border-radius:6px; flex:0 0 20px; border:1px solid var(--border); background:#0f1016; display:inline-grid; place-items:center; font-weight:900; color:#fff; font-size:.85rem; }
  .gf-item[aria-selected="true"] .gf-check{ background:linear-gradient(180deg,#ef335d,#9f1239); border-color:#e11d48; }
  .gf-name{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .gf-all{ font-weight:800; color:#f5f5f6; }
  .gf-popover{ scrollbar-width:thin; }
  .gf-popover::-webkit-scrollbar{ height:8px; width:8px }
  .gf-popover::-webkit-scrollbar-thumb{ background:#2a2a36; border-radius:999px }
  .gf-popover.floating{position: fixed;/* 祖先の overflow を無視 */ left: 0; top: 0;/* JavaScriptで配置を上書き */ width: auto; max-width: min(420px, 92vw); max-height: min(320px, 70vh); display: block;/* JSで開閉制御 */ z-index: 999; /* 他UIより上 */}

  /* Users サブコントロール行 */
  .user-subcontrols{display:flex; flex-direction: column;/* ← 縦積み */ align-items: flex-start; gap: 10px; margin: 2px 0 10px;}
  .user-subcontrols #userSearch{ max-width:280px; flex:0 1 280px; }
  .user-subcontrols .user-search-label{ white-space:nowrap; }
  .user-search{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; min-width:220px; flex-wrap: nowrap; }
  .user-search input{ flex:1 1 auto; min-width:120px; max-width:100%; min-inline-size:0; padding: .4rem .6rem;/* 既定より小さめ */ min-height: 34px;/* 背を低く */ line-height: 1.2; }
  .user-search label{ white-space:nowrap; }

  /* サブコントロールの折りたたみ容器 */
  .subcontrols-body{ overflow:hidden; height:auto; opacity:1; transition:height .22s ease, opacity .22s ease; }

  /* 検索欄は行内で収まりよく。デスクトップは程よい幅、モバイルは横幅を譲る */
  .user-subcontrols #userSearch{ max-width: 280px; flex: 0 1 280px; }
  .user-subcontrols .user-search-label{ white-space:nowrap; }

  /* ---- Users サブコントロール: 2カラム化 --------------------- */
  .user-subcontrols.usc-grid{
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 12px;
    row-gap: 10px;
    align-items: center;
  }

  .user-subcontrols .usc-label{
    white-space: nowrap;
    font-weight: 700;
    /* 既存のフィルタラベルとトーンを合わせる */
    font-size: var(--gf-font, .95rem);
    line-height: var(--gf-line, 1.1);
    color: var(--text, #f5f5f6);
  }

  .user-subcontrols .usc-ctrl{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0; /* ボタンのellipsis維持 */
  }

  /* リアグサマリー */
  #riaguSummary{ display:grid; gap:12px; }
  .riagu-group{ border:1px solid var(--border); border-radius:12px; padding:12px; background:var(--panel-2); }
  .riagu-group h3{ margin:0 0 .5rem; font-size:1.05rem; }
  .riagu-item{ border:1px solid var(--border); border-radius:10px; padding:10px; background:#121218; margin-top:8px; }
  .riagu-head{ display:flex; gap:8px; align-items:center; justify-content:space-between; }
  .riagu-title{ display:flex; gap:8px; align-items:center; font-weight:800; }
  .riagu-meta{ display:flex; gap:6px; flex-wrap:wrap; color:#cbd5e1; }
  .riagu-stats{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
  .riagu-winners{ display:flex; gap:.35rem .45rem; flex-wrap:wrap; margin-top:6px; }
  .riagu-chip{ background:#23232b; border:1px solid var(--border); border-radius:999px; padding:.2rem .55rem; }
  .riagu-actions{ display:flex; gap:6px; justify-content:flex-end; margin-top:6px; }
  .riagu-total{ text-align:right; margin-top:10px; padding-top:8px; border-top:1px solid var(--border); font-weight:800; }

  /* --- リアグの見出しを読みやすく --- */
  .riagu-title { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
  .riagu-title .rarity { font-weight:900; }          /* 既存の .rarity SSR/SR... の色を適用 */
  .riagu-title .item-name { font-weight:900; font-size:1.05rem; }

  /* タブの横スクロール（ガチャが多い時） */
  #riaguTabs { overflow:auto hidden; white-space:nowrap; padding-bottom:2px; }
  #riaguTabs .tab { display:inline-flex; }

  /* === Gacha FAB：PCの中央下に浮く === */
  .gacha-fab{
    position: fixed;
    left: 50%; bottom: max(24px, env(safe-area-inset-bottom) + 16px);
    transform: translateX(-50%) scale(.98);
    z-index: 70; /* モーダル(50)より上に出したいなら 60～70帯を使用 */
    min-width: 220px; min-height: 56px;
    border-radius: 999px;
    opacity: 0; pointer-events: none;
    transition: opacity .24s ease, transform .24s ease;
  }
  .gacha-fab.visible{ opacity: 1; pointer-events: auto; transform: translateX(-50%) scale(1); }
  /* モーダル中は常に消す */
  body.modal-open .gacha-fab{ opacity:0 !important; pointer-events:none !important; }
  /* モバイルUI時はFABは使わない（下部タブで操作するため） */
  #mainUI.mobile-views ~ .gacha-fab{ display:none; }

  /* === ガチャの“下からスライドイン”ページ === */
  .gacha-panel{
    position: fixed; left:0; right:0; top:0; bottom:0;
    z-index: 60; /* モーダル(50)より下/上は用途に応じて調整。メインUIより上 */
    background: var(--panel);
    border-top-left-radius: 16px; border-top-right-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    /* 常時レンダリング：translate だけを切替（display切替はしない） */
    transform: translateY(100%);
    opacity: 0; pointer-events: none;
    transition: transform .28s ease, opacity .28s ease;
  }
  #mainUI[data-gacha-open="1"] ~ #gachaPanel{
    transform: translateY(0);
    opacity: 1; pointer-events: auto;
  }

  /* モバイルタブ：「ガチャ」だけ赤背景 */
  #mainUI.mobile-views .mobile-tabs button[data-view="gacha"]{
    background: linear-gradient(180deg, var(--accent), var(--accent-2));
    color: #fff;
    border-color: var(--accent);
  }

  /* モバイル：レアリティ設定ページ表示切替 */
  #mainUI.mobile-views[data-view="rarity"] #rarityPanel { display:block; }

  /* レアリティ設定テーブル体裁 */
  .rarity-wrap{ overflow:auto; }
  .rarity-table{ width:100%; border-collapse:collapse; }
  .rarity-table th, .rarity-table td{ padding:8px 3px; border-bottom:1px solid var(--border); text-align:left; }
  .rarity-table thead th{ font-size:.9rem; color:#cbd5e1; font-weight:700; }
  .rarity-table .emit-cell{ white-space:nowrap; }
  .rarity-table .emit-cell .unit{ margin-left:4px; color:#9ca3af; }
  .rarity-table .ops{ width:1%; }
    /* NEW: number入力をダークUIに統一 */
  .rarity-table input[type="number"]{
    width:100%;
    max-width:120px;
    /* ルック&フィール */
    background:#0f1016;
    color:#f5f5f6;
    border:1px solid var(--border);
    border-radius:10px;
    padding:.4rem .6rem;
    line-height:1.2;
    min-height:34px;
    font-weight:600;
    text-align:right;           /* ％などの数値は右寄せの方が見やすい */
    /* 各ブラウザのスピンボタンを消してスッキリ */
    appearance: textfield;
    -moz-appearance: textfield;
  }
  .rarity-table input[type="number"]::-webkit-outer-spin-button,
  .rarity-table input[type="number"]::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin:0;
  }
  /* フォーカス時のアクセント（全体トーンに合わせる） */
  .rarity-table input[type="number"]:focus{
    outline:2px solid rgba(225,29,72,.35);
    outline-offset:2px;
    box-shadow:none;
  }
  .rarity-table input[type="color"]{ width:44px; height:32px; padding:0; border:none; background:transparent; }

  /* レアリティUI内タブ（「ガチャごとのタブ」に揃える） */
  #rarityGachaTabs.tabs{ margin: 8px 0 4px; }
  #rarityGachaTabs .tab{ white-space:nowrap; }

  /* 単位%の並びを崩さない（行高が伸びない） */
  .rarity-table .emit-cell{
    display:flex;
    align-items:center;
    gap:6px;
  }
  .rarity-table .emit-cell .unit{
    margin-left:0;
    color:#9ca3af;
    white-space:nowrap;
  }

  /* 削除ボタンが“縦書き風”になるのを強制横書きで矯正 + コンパクト化 */
  .rarity-table .ops{
    width:1%;
    white-space:nowrap;
  }
  .rarity-table .ops .btn{
    writing-mode: horizontal-tb !important;
    transform: none !important;
    white-space: nowrap;
    min-height:28px;
    padding:.35rem .6rem;
    font-size:.9rem;
    border-radius:10px;
  }
  /* 画像モーダル：サブタイトル行のインライン編集UI */
  #imageModal #modalSubtitle.modal-subtitle-row{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  }

  /* 左右のラベルをやや強調（既存Muted上に乗せる） */
  #imageModal #modalSubtitle .inline-label{
    font-weight:700; color:#cbd5e1;
  }

  /* 対象名のテキスト入力は可変幅（モバイルで折返し優先） */
  #imageModal #modalSubtitle .inline-input{
    flex:1 1 340px; min-width:160px;
  }

  /* 右側ブロックは右寄せ配置 */
  #imageModal #modalSubtitle .inline-right{
    display:flex; align-items:center; gap:8px; margin-left:auto;
  }

  /* セレクトの最小幅を少し確保 */
  #imageModal #modalSubtitle .inline-select{
    min-width:160px;
  }

  /* モバイル時は自然に折り返す（既存の16pxフォント適用あり） */
  @media (max-width: 600px){
    #imageModal #modalSubtitle .inline-input { flex:1 1 100%; }
    #imageModal #modalSubtitle .inline-right { width:100%; justify-content:flex-start; margin-left:0; }
  }

  /* ===== PT課金フォーム（.pt-controls） ===== */

.pt-controls input.pt-input,
.pt-controls select.pt-select {
  height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: inherit;
  font: inherit;
  outline: none;
  box-sizing: border-box;
}

/* 数値は右寄せ（レアリティ表の数値入力と整合） */
.pt-controls input.pt-input[type="number"] {
  text-align: right;
}

/* セレクトの行間を合わせる */
.pt-controls select.pt-select {
  line-height: 34px;
}

/* フォーカス表現（表と同系色） */
.pt-controls input.pt-input:focus,
.pt-controls select.pt-select:focus {
  border-color: var(--accent, #60a5fa);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #60a5fa) 20%, transparent);
}

/* 連結チップ内の余白調整（横スクロール時の詰まり防止） */
.pt-controls .nowrap .pt-item-row > input.pt-input,
.pt-controls .nowrap .pt-item-row > select.pt-select {
  margin: 2px 0;
}
/* ===== PT課金フォーム（.pt-controls）常設スタイル ===== */

/* 2カラム：左ラベルは現在幅のまま、右フォームは伸ばす */
.pt-controls .pt-controls-row {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  column-gap: 12px;
  row-gap: 10px;
  height: 34px;      /* ラベル行は固定でOK */
  margin: 6px 0;
}

/* ラベル直下に置く“全幅”のサブ行（バンドル/保証の本体） */
.pt-controls .pt-controls-row-sub {
  display: block;
  min-height: 34px;  /* 下限は34px */
  height: auto;      /* 中身に合わせて伸びる */
  margin: 6px 0;
  overflow: visible;
}

/* 既存の fullspan 指定を新クラスに対応 */
.pt-controls .pt-controls-row-sub.fullspan {
  grid-column: 1 / -1;
}

/* ラベルの体裁（既存 .usc-label を流用） */
.pt-controls .pt-controls-row .usc-label {
  white-space: nowrap;
  font-weight: 700;
  font-size: var(--gf-font, .95rem);
  line-height: var(--gf-line, 1.1);
  color: var(--text, #f5f5f6);
}

/* 右カラム側の内側ラッパ */
.pt-controls .pt-controls-row > .inline {
  display: flex;
  align-items: center;
  gap: .5rem;
  justify-content: flex-end;
}

/* 横スクロール可能な行アイテム（バンドル/保証の本体） */
.pt-controls .nowrap {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .5rem;
  overflow: auto;
}

/* 行内の小要素（既存） */
.pt-controls .pt-item-row { display:flex; align-items:center; gap:.35rem; }
.pt-controls .pt-item-row .btn-inline {
  height: 28px;
  line-height: 28px;
  padding: 0 .6rem;
  margin-left: auto;       /* ← 右端に寄せる */
}

#rarityPanel .subcontrols {
  display: block;
  width: 100%;
}

/* 入力・セレクトの“箱”の見た目（index全体トーンと整合） */
.pt-controls input.pt-input,
.pt-controls select.pt-select {
  height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: inherit;
  font: inherit;
  outline: none;
  box-sizing: border-box;
}

/* 数値入力は右寄せ（レア表と整合） */
.pt-controls input.pt-input[type="number"] {
  text-align: right;
}

/* セレクトは高さ・最小幅を合わせる */
.pt-controls select.pt-select {
  line-height: 34px;
  min-width: 7ch;
}

/* “約6桁+余白”の幅感 */
.pt-controls input.pt-input[type="number"] {
  width: 10ch;
}

/* フォーカス表現（アクセント色を利用） */
.pt-controls input.pt-input:focus,
.pt-controls select.pt-select:focus {
  border-color: var(--accent, #60a5fa);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #60a5fa) 20%, transparent);
}

/* 連結チップ内の間詰まり防止 */
.pt-controls .nowrap .pt-item-row > input.pt-input,
.pt-controls .nowrap .pt-item-row > select.pt-select {
  margin: 2px 0;
}

/* 小さめボタン */
.pt-controls .btn-inline {
  height: 28px;
  line-height: 28px;
  padding: 0 .6rem;
}


/* 下部のアクション群の余白 */
.pt-controls .pt-actions { margin-top: .5rem; }
/* pt-controls: 右カラムのフォームを右寄せ */
.pt-controls .row > .inline { justify-content: flex-end; }

/* ラベル直下に置くサブ行を2カラム全幅に拡張 */
.pt-controls .row-sub.fullspan { grid-column: 1 / -1; }

/* --- number入力のスピンボタンを消す（WebKit系: Chrome/Edge/Safari） --- */
#rarityPanel input[type="number"]::-webkit-outer-spin-button,
#rarityPanel input[type="number"]::-webkit-inner-spin-button,
.pt-controls   input[type="number"]::-webkit-outer-spin-button,
.pt-controls   input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* --- Firefox 向け（スピンをテキスト風に） --- */
#rarityPanel input[type="number"],
.pt-controls   input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* 追加行を“縦積み”で下に並べる */
.pt-controls #ptBundles.stack,
.pt-controls #ptGuarantees.stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Discord login button */
.btn.discord{
  /* Discord Blurple from official brand guide */
  background: linear-gradient(180deg, #5865F2, #4752C4);
  border-color: #5865F2;
  color: #fff;
}
.btn.discord:hover{ filter: brightness(.96); }
.btn.discord .bi-discord{ display:inline-block; }

/* ===== Discord Login Button ===== */
.btn.dlb {
  /* 他ボタンとサイズ感を揃える（必要なら値を微調整） */
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  border: none;
  cursor: pointer;
}

/* Discordブランドカラー */
.btn.dlb.dlb--discord {
  background: #5865F2;           /* blurple */
  color: #fff;
}
.btn.dlb.dlb--discord:hover { background: #4752C4; }
.btn.dlb.dlb--discord:active { background: #3C45A5; }
.btn.dlb.dlb--discord:focus-visible {
  outline: 2px solid #99A2FF;    /* 明度高いアウトライン */
  outline-offset: 2px;
}

/* ログイン済みでも色はDiscordに統一 */
.btn.dlb.dlb--discord.dlb--loggedin { background: #5865F2; }

/* 中身のレイアウト */
.dlb-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.dlb-label,
.dlb-username {
  font-size: 14px;
}

/* アバターを円形に切り抜き */
.dlb-avatar {
  width: 28px;
  height: 28px;
  border-radius: 9999px; /* 完全な円 */
  object-fit: cover;     /* 四角画像でもはみ出さず中央トリミング */
  background: rgba(255,255,255,0.2);
  display: inline-block;
}

/* ログインメニューの簡易スタイル（必要に応じて調整） */
.dlb-menu {
  position: absolute;
  margin-top: 8px;
  padding: 6px;
  background: #1f1f25;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  z-index: 30;
}
.dlb-menu__item {
  display: block;
  width: 100%;
  min-width: 140px;
  text-align: left;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
}
.dlb-menu__item:hover { background: rgba(255,255,255,0.06); }