/* ★新デザイン・トークン（2026-07-16 追加。濃い電気ブルー×ガラス×グラデ×淡い発光／LiveSpark系イージング）。 ★prefix は --nd-* で既存/core変数(--home-* 等)と衝突しない。streamer.html 内のみ＝core非該当・Web側フロー無し。 */ :root{ --nd-c1:#1e5cff; --nd-c2:#3aa0ff; /* ★マイ画面テーマ色＝紫（2026-07-27）。マイ画面系の枠/線/アイコン/ボタンは全部これ。 */ --ms:#a78bfa; --ms-soft:rgba(167,139,250,.18); --ms-border:rgba(167,139,250,.5); --nd-grad:linear-gradient(120deg,#1e5cff,#3aa0ff); --nd-grad-soft:linear-gradient(120deg,rgba(30,92,255,.22),rgba(58,160,255,.10)); --nd-glass:rgba(255,255,255,.045); --nd-glass2:rgba(255,255,255,.07); --nd-line:rgba(255,255,255,.08); --nd-line2:rgba(255,255,255,.15); --nd-glow:0 4px 20px rgba(30,92,255,.5); --nd-glow-soft:0 2px 14px rgba(30,92,255,.34); --nd-ease:cubic-bezier(.25,.8,.25,1); } *{box-sizing:border-box;margin:0;padding:0} /* 設定ボタン風の details summary（マイクラチャット設定 / ゲーム内設定）。見た目だけボタン化・開閉は details のまま */ .settings-row{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#1e1e1e;border:1px solid #3a3a3a;border-radius:8px;padding:9px 12px;cursor:pointer;font-size:13px;color:#f0f0f0;user-select:none;list-style:none} .settings-row::-webkit-details-marker{display:none} .settings-row::marker{content:''} .settings-row .chev{color:#9ca3af;font-size:14px;line-height:1;transition:transform .15s ease} details[open] > .settings-row .chev{transform:rotate(90deg)} body{font-family:sans-serif;background:radial-gradient(1100px 560px at 88% -12%,rgba(30,92,255,.16),transparent 55%),radial-gradient(820px 480px at 3% 4%,rgba(58,160,255,.08),transparent 52%),#0f1118;background-attachment:fixed;color:#f0f0f0;padding:20px;max-width:1100px;margin:0 auto} h1{color:#ffffff} h2{color:#888888;font-size:15px;margin:18px 0 8px} input,select,textarea{padding:6px 10px;border-radius:6px;border:1px solid #2a2f3a;background:#1e2029;color:#f0f0f0;font-size:13px} input:focus,select:focus,textarea:focus{outline:none;border-color:#1e5cff} select{cursor:pointer} button{padding:6px 13px;border-radius:6px;border:none;background:var(--nd-c1);color:#fff;cursor:pointer;font-size:13px;transition:all .18s var(--nd-ease)} button:hover{opacity:.85} button:disabled{opacity:.4;cursor:not-allowed} button.off{background:#1e2029;color:#aaaaaa;border:1px solid #2a2f3a} button.sm{background:#1e2029;color:#aaaaaa;border:1px solid #2a2f3a;padding:6px 14px;font-size:14px} button.ghost{background:transparent;border:1px solid #2a2f3a;color:#888888} button.ghost:hover{border-color:#1e5cff;color:#f0f0f0} button.danger{background:#7f1d1d;color:#fff} button.sm.reset-outline{background:#1e2029;border-color:#7f1d1d;color:#d98a8a} button.sm.sm-testsend{background:#172040;border-color:#1e5cff;color:#cfe0ff;flex-shrink:0} button.sm.sm-testsend:hover{background:#1d2a52;border-color:#3b82f6;color:#ffffff} button.sm.fav-on{background:#172040;border-color:#1e5cff;color:#cfe0ff} /* お気に入りON：sm-testsend に倣う青点灯 */ button.sm.sb-step{width:34px;height:34px;padding:0;font-size:18px;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0} /* ★position:relative + z-index：backdrop-filter が作る stacking context の中でヘッダー全体（＝アカウントパネル等のドロップダウン）を 右列(.ov-right position:absolute)より上に持ち上げる。これが無いと backdrop-filter の入れ子にパネルが閉じ込められ、後から描かれる .ov-right に潜って透ける。z-index はモーダル(1000+)より下。 */ .header{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:nowrap;margin-bottom:10px;background:var(--nd-glass);border:1px solid var(--nd-line);border-radius:14px;padding:10px 16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 30px rgba(0,0,0,.22);backdrop-filter:blur(16px);position:relative;z-index:100} .empty{color:#555;font-size:13px;padding:6px 0} /* ── ヘッダー一段化：左(ロゴ＋タブ) / 余白 / 右(接続｜区切り｜アイコン＋@ID) ── */ .hdr-left{display:flex;align-items:center;gap:16px;min-width:0} /* ★ロゴ（2026-07-28）＝画像1枚（旧アイコン＋文字を廃止）。h1 のままだがテキストは持たない。 高さで揃え、幅は比率なり（透過PNG・余白は画像側で切り詰め済み）。 */ .hdr-logo{margin:0;line-height:0;cursor:pointer;flex-shrink:0;display:inline-flex;align-items:center} /* ★ロゴは「ILStudio」フルスペル＝横長(約4.3:1)。高さ42pxだと文字が小さく見えるため48pxに（2026-07-29 差し替え時）。 */ .hdr-logo img{height:48px;width:auto;display:block;transition:filter .2s var(--nd-ease)} .hdr-logo:hover img{filter:brightness(1.12) drop-shadow(0 0 10px rgba(120,110,255,.35))} @media (max-width:720px){ .hdr-logo img{height:34px} } .hdr-right{display:flex;align-items:center;gap:12px;flex-shrink:0} .hdr-left .top-tabs{margin-bottom:0} /* 接続エリア（ヘッダー内）：左に情報ブロック(縦2段)・右にボタンの横並び。 statusUpdate が b.className を 'av-state-btn state-xxx' に完全置換するため、横幅は親で上書きする。 */ .hdr-conn{display:flex;flex-direction:row;align-items:center;gap:10px} .hdr-conn-info{display:flex;flex-direction:column;align-items:flex-end;gap:2px} .hdr-conn .av-state-btn{width:auto;padding:6px 16px;font-size:12px} .av-state-btn:disabled{opacity:.45;cursor:not-allowed} .hdr-conn-set{font-size:11px;color:#888888;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hdr-divider{width:1px;height:28px;background:#2a2f3a;flex-shrink:0} .hdr-tiktok-id{font-size:13px;color:#f0f0f0;cursor:pointer;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ── トップ3タブ（器のみ。audio用 .ttab とは別名で衝突回避） ── */ .top-tabs{display:flex;gap:6px;margin-bottom:16px} .top-tabs .ticon{margin-right:5px} /* ★2段ヘッダー：トップ3タブを header から分離した下段の専用バー（2026-07-27）。タブが増えても header が詰まらない・溢れは横スクロール。 */ .top-tabbar{display:flex;align-items:center;gap:6px;margin-bottom:20px;background:var(--nd-glass);border:1px solid var(--nd-line);border-radius:12px;padding:6px 10px;backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 20px rgba(0,0,0,.18);overflow-x:auto} .top-tabbar .top-tabs{margin-bottom:0} .toptab{position:relative;padding:8px 15px;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;background:transparent;color:#9aa0b0;border:1px solid transparent;transition:all .28s var(--nd-ease);white-space:nowrap;flex-shrink:0} .toptab:hover:not(.active){color:#f0f0f0;background:rgba(255,255,255,.09);transform:translateY(-1px)} .toptab.active{background:var(--nd-grad-soft);color:#fff;border-color:rgba(47,140,255,.4)} .toptab.active::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:2px;background:var(--nd-grad)} .toptab.active .ticon{color:var(--nd-c2)} /* ★2026-07-28（案A）ホームタブと編集タブの区切り線＝「情報」と「編集」を視覚的に分ける細い縦線。 */ .toptab-div{width:1px;align-self:stretch;background:var(--nd-line);margin:4px 5px;flex-shrink:0} /* ★未読バッジ＝タブの緑点（新しいお知らせがある間だけ表示・見たら消える）。 */ .toptab-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#34d399;margin-left:6px;vertical-align:middle;box-shadow:0 0 6px rgba(52,211,153,.7)} /* ═══ ホームタブ（2026-07-28 案A）＝左サイドバー＋情報カード＋HOMEガイド＋情報ビュー ═══ */ /* サイドバーはオーバーレイ(.ovcat-item)を流用。選択色はホーム＝青系で統一（--cat 既定値をそのまま使う）。 */ .home-side .ovcat-item{display:flex;align-items:center;gap:2px} .home-dot{width:7px;height:7px;border-radius:50%;background:#34d399;margin-left:auto;flex-shrink:0;box-shadow:0 0 6px rgba(52,211,153,.7)} /* ★情報カード（.home-info/.hcard）は撤去済み（2026-07-28）＝サイドバーと役割が重複していたため。 */ /* 情報ビュー（更新情報／プラン／使い方）＝ホームガイドと入れ替えで表示。戻るボタンで元へ。 */ .hinfo{background:var(--nd-glass);border:1px solid var(--nd-line);border-radius:12px;padding:20px 22px} .hinfo-back{background:transparent;border:1px solid var(--nd-line);color:#c7cdd7;border-radius:8px;font-size:12px;font-weight:600;padding:5px 11px;cursor:pointer;margin-bottom:14px} .hinfo-back:hover{background:var(--nd-glass2);color:#fff} .hinfo-title{margin:0 0 4px;font-size:19px;font-weight:800;color:#f0f0f0} .hinfo-desc{margin:0 0 18px;font-size:13px;color:#8f96a3} /* 更新情報の行（日付／種別タグ／見出し） */ .hnews-row{display:flex;gap:15px;padding:13px 0;border-bottom:1px solid var(--nd-line)} .hnews-row:last-child{border-bottom:none} .hnews-when{width:92px;flex-shrink:0;font-size:12px;color:#7a828e;font-variant-numeric:tabular-nums} .hnews-tag{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 8px;border-radius:6px;margin-bottom:4px} .hnews-tag--new{background:rgba(52,211,153,.16);color:#4ade80} .hnews-tag--imp{background:rgba(47,140,255,.16);color:#7fb0ff} .hnews-tag--fix{background:rgba(245,197,24,.16);color:#f5b45c} .hnews-body h4{margin:0;font-size:14px;font-weight:600;color:#eef1f6;line-height:1.5} /* プラン3枚（FREE/STANDARD/PRO）＝価格の正本は plan-tiers.js。ここは見た目だけ。 */ .hplan{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} @media (max-width:900px){ .hplan{grid-template-columns:1fr} } .hplan-card{position:relative;display:flex;flex-direction:column;background:#171922;border:1px solid var(--nd-line);border-radius:13px;padding:20px} /* ★プランの色は「その段の固有色」で固定する（2026-07-28 オーナー指示）： FREE=白 ／ STANDARD(いちばん人気)=青 ／ PRO(最上位)=金。 ★「利用中」で緑に塗り替える方式は廃止＝選んだ瞬間に PRO の金が緑に変わって格が下がって見えたため。 利用中は "色を奪わない" 示し方（内側の細いリング＋バッジ＋ボタン文言）にする。 */ .hplan-card--free{border-color:rgba(255,255,255,.42);background:linear-gradient(180deg,rgba(255,255,255,.05),#171922)} .hplan-card--best{border-color:rgba(47,140,255,.55);background:linear-gradient(180deg,rgba(47,140,255,.08),#171922);box-shadow:0 10px 26px rgba(30,92,255,.12)} .hplan-card--pro{border-color:rgba(245,197,24,.60);background:linear-gradient(180deg,rgba(245,197,24,.11),rgba(245,197,24,.02) 42%,#171922);box-shadow:0 10px 28px rgba(245,197,24,.13)} .hplan-card--pro .hplan-amt{color:#ffe6a3} .hplan-card--pro li::before{color:#f5c518} /* :not(--cur) ＝利用中は「押せないボタン」なので金グラデで塗らない */ .hplan-card--pro .hplan-btn:not(.hplan-btn--cur){background:linear-gradient(120deg,#f7d046,#f0a020);color:#3a2a00;box-shadow:0 4px 16px rgba(245,197,24,.30)} /* 利用中＝枠色はそのまま。内側の薄いリングだけ足して「今これ」を示す（レイアウトはずらさない） */ .hplan-card--cur{box-shadow:inset 0 0 0 1px rgba(255,255,255,.20),0 10px 26px rgba(0,0,0,.25)} .hplan-tag{position:absolute;top:-9px;right:16px;font-size:10.5px;font-weight:800;letter-spacing:.02em;color:#fff;background:var(--nd-grad);border-radius:999px;padding:2px 10px} .hplan-tag--free{background:#e9edf4;color:#1a1c22} .hplan-tag--pro{background:linear-gradient(120deg,#f7d046,#f0a020);color:#3a2a00} .hplan-card h3{margin:0;font-size:15px;font-weight:800;color:#f0f0f0;letter-spacing:.02em} .hplan-lead{margin:3px 0 0;font-size:12px;color:#8f96a3} .hplan-amt{font-size:27px;font-weight:850;color:#dbe6ff;margin:10px 0 2px;font-variant-numeric:tabular-nums} .hplan-amt small{font-size:12.5px;font-weight:600;color:#8f96a3} .hplan-card ul{list-style:none;padding:0;margin:12px 0 16px;flex:1} .hplan-card li{position:relative;padding:4px 0 4px 20px;font-size:13px;color:#aeb6c2} .hplan-card li::before{content:"✓";position:absolute;left:0;color:var(--nd-c2);font-weight:800} /* CTA＝a / button / form内button のどれでも同じ見た目になるようにする（決済はformでPOSTするため）。 */ .hplan-btn{display:block;width:100%;text-align:center;background:var(--nd-grad);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:700;padding:9px 16px;text-decoration:none;cursor:pointer;font-family:inherit;transition:filter .18s var(--nd-ease)} .hplan-btn:hover{filter:brightness(1.12)} /* 利用中ボタン＝押せない表示。枠線の色は「そのプランの色」に合わせる（緑には塗らない）。 */ .hplan-btn--cur{background:transparent;border:1px solid rgba(255,255,255,.35);color:#c7cdd7;cursor:default} .hplan-btn--cur:hover{filter:none} .hplan-card--best .hplan-btn--cur{border-color:rgba(47,140,255,.55);color:#9dc4ff} .hplan-card--pro .hplan-btn--cur{border-color:rgba(245,197,24,.55);color:#f7d046} /* 控えめCTA＝「解約はこちら」「プランを変更する」＝口座パネルを開くだけ（購入ではない）。 */ .hplan-btn--quiet{background:transparent;border:1px solid var(--nd-line);color:#9aa0ab} .hplan-btn--quiet:hover{filter:none;background:var(--nd-glass2);color:#c7cdd7} .hplan-note{margin:16px 0 0;font-size:12px;color:#7a828e;line-height:1.7} .hplan-note b{color:#c7cdd7} /* できることの比較表＝「本番配信で使えるか」だけを示す（試すのは全段タダ＝ADR-0006）。 */ .hplan-cmp-ttl{margin:26px 0 4px;font-size:15px;font-weight:750;color:#e4e8ee} .hplan-cmp-desc{margin:0 0 12px;font-size:12px;color:#7a828e} .hplan-cmp-wrap{overflow-x:auto} /* ★2026-07-28 参考サイトに倣ってフラット化：グループ見出し行なし・○×は丸バッジ・補足は項目名の下に小さく。 */ .hplan-cmp{width:100%;border-collapse:collapse;font-size:13px;min-width:460px} .hplan-cmp th,.hplan-cmp td{padding:11px 12px;text-align:center;border-bottom:1px solid var(--nd-line);vertical-align:middle} .hplan-cmp th:first-child,.hplan-cmp td:first-child{text-align:left} .hplan-cmp thead th{font-size:12.5px;font-weight:800;letter-spacing:.04em;white-space:nowrap; background:rgba(255,255,255,.04);border-bottom:1px solid var(--nd-line2)} .hplan-cmp thead th:first-child{color:#8f96a3;font-weight:700} /* プラン名はカードの枠色と揃える＝どの列が何かが一目で分かる */ .hpt-h-free{color:#e6eaf1} .hpt-h-std{color:#7fb0ff} .hpt-h-pro{color:#f5c518} .hplan-cmp tbody tr:last-child td{border-bottom:none} .hplan-cmp tbody tr:hover td{background:rgba(255,255,255,.022)} .hpt-name{display:block;font-size:13.5px;color:#e2e7ee;font-weight:600;line-height:1.45} .hpt-sub{display:block;font-size:11.5px;color:#79818e;line-height:1.5;margin-top:1px} /* ○×＝丸バッジ（テキストの✓/—より視認性が高く、表が締まって見える） */ .hpt-mark{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%; font-size:12px;font-weight:800;line-height:1} .hpt-y{background:#4ade80;color:#06301d} .hpt-n{background:rgba(255,255,255,.06);color:#5b6470;font-size:11px} /* 使い方の一覧 */ .hguide{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:660px} @media (max-width:680px){ .hguide{grid-template-columns:1fr} } .hguide-item{background:#171922;border:1px solid var(--nd-line);border-radius:11px;padding:14px 15px;cursor:pointer;transition:all .2s var(--nd-ease)} .hguide-item:hover{border-color:rgba(47,140,255,.4);transform:translateX(3px)} .hguide-k{font-size:11px;font-weight:700;color:var(--nd-c2)} .hguide-item h4{margin:4px 0 0;font-size:14px;font-weight:600;color:#eef1f6} /* オーバーレイタブのカタログ器（左カテゴリ列＋右カードエリアの空枠） */ .ovcat-layout{display:flex;gap:16px;align-items:flex-start} .ovcat-side{width:160px;flex-shrink:0;display:flex;flex-direction:column;gap:6px} /* ★各カテゴリの「選択色」＝そのアイコン色に連動（--cat）。HOMEは既定=青のまま。2026-07-27 */ .ovcat-item{--cat:#3aa0ff;position:relative;background:transparent;border:1px solid transparent;border-radius:9px;padding:9px 11px;font-size:13px;color:#cfcfcf;cursor:pointer;transition:all .22s var(--nd-ease)} .ovcat-item[data-cat="gift"]{--cat:#f5c518} .ovcat-item[data-cat="like"]{--cat:#ff5b81} .ovcat-item[data-cat="follow"]{--cat:#7ee787} .ovcat-item[data-cat="comment"]{--cat:#4da3ff} .ovcat-item[data-cat="myscreen"]{--cat:var(--ms)} .ovcat-item:hover:not(.active){color:#f0f0f0;background:var(--nd-glass2);transform:translateX(3px)} .ovcat-item.active{background:color-mix(in srgb,var(--cat) 15%,transparent);border-color:color-mix(in srgb,var(--cat) 45%,transparent);color:#fff} .ovcat-item.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--cat);box-shadow:0 0 8px color-mix(in srgb,var(--cat) 60%,transparent)} .ovcat-item.active .ticon{color:var(--cat)} .ovcat-coming{color:#888888;font-size:14px;padding:48px 0;text-align:center} .ovcat-main{flex:1;min-width:0} /* 右カード領域を残り幅いっぱいに＝右端が #log(=.main-left全幅)に揃う */ .ovcat-cards{flex:1;min-width:0} /* ギフトランキングカード（Phase 4-B・専用接頭辞 .rankcard- で ov-/sb- と衝突回避） */ /* 横並び一列：タイトル上／左プレビュー固定・右設定。カードは右端を #log に揃える（max-width撤廃で領域いっぱい） */ .rankcard{background:#171922;border:0.5px solid #2a2f3a;border-radius:12px;padding:14px} .rankcard-body{display:flex;gap:14px;align-items:flex-start;margin-top:12px} /* プレビュー枠＝固定サイズ（全オーバーレイカード共通の器）。スクロールなし＝中身が枠ぴったりに収まる。 */ .rankcard-preview{width:500px;height:375px;flex-shrink:0;border-radius:8px;overflow:hidden;background:#0c0c10;border:0.5px solid #2a2f3a} /* iframe は枠ぴったり。中身（ranking.html preview）が流体で width/height 100% に収まる＝行が人数で伸縮しスクロールしない。 */ .rankcard-preview iframe{width:100%;height:100%;border:0;display:block} /* 右設定エリア＝左プレビュー(500×375)と同じ高さに固定。縦スクロールは内側の設定パネルが担当し、 ボタン行(.rankcard-actions)は最下部に固定（スクロールに巻き込まれない）。 */ .rankcard-right{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px;height:375px;overflow:hidden} .rankcard-title{font-size:15px;font-weight:600;color:#f0f0f0;display:flex;align-items:center;gap:8px} .rankcard-badge{font-size:11px;font-weight:500;color:#22c55e;background:rgba(34,197,94,0.12);border:1px solid rgba(34,197,94,0.4);border-radius:10px;padding:1px 8px} .rankcard-desc{font-size:12px;font-weight:400;color:#888888} /* 設定欄＝1列縦並び（案B）。各項目フル幅・スライダーもフル幅。色2つだけ .rankcard-colorrow で横並び。 この設定パネルだけが縦スクロール（flex:1+min-height:0）。ボタン行は外（固定）。 */ .rankcard-panel{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0;overflow-y:auto} .rankcard-panel::-webkit-scrollbar{width:8px} .rankcard-panel::-webkit-scrollbar-thumb{background:#3a3a40;border-radius:4px} .rankcard-panel::-webkit-scrollbar-track{background:transparent} /* 「行カードの色」「文字色」だけを横並びにまとめる1サブ行。 */ .rankcard-colorrow{display:flex;gap:18px;align-items:flex-end} .rankcard-row{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#cfcfcf} .rankcard-row input[type=range]{width:100%} .rankcard-row input[type=text]{background:#1e2029;border:1px solid #2a2f3a;border-radius:6px;padding:6px 8px;color:#f0f0f0;font-size:13px} .rankcard-row input[type=color]{width:48px;height:28px;background:#1e2029;border:1px solid #2a2f3a;border-radius:6px;padding:2px;cursor:pointer} .rankcard-val{color:#888888} .rankcard-check{display:flex;align-items:center;gap:6px;font-size:13px;color:#cfcfcf;cursor:pointer} /* ボタン行＝カード下部に固定（パネル外）・上端は控えめな区切り線。 ★2026-07-28 方式＝2×2グリッド（オーナー選択・案2）：1段目 [URL][コピー]／ 2段目 4操作を [テスト送信][マイ画面に配置] ／ [設定を初期化][集計をリセット] の均等タイルに。 旧・横1列(wrap)＝プレビュー拡大で右カラムが狭くなりボタンが溢れた問題を、等幅グリッドで解消（幅が変わっても崩れない）。 */ .rankcard-actions{display:flex;flex-direction:column;align-items:stretch;gap:8px;flex-shrink:0;padding-top:10px;border-top:1px solid #2a2f3a} .rankcard-actions-row{display:flex;align-items:center;gap:6px;min-width:0} /* 1段目＝URL欄＋コピー（2要素・nowrap） */ .rankcard-actions .rankcard-urlinput{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 2段目＝4操作の2×2グリッド。各ボタンは等幅(1fr)・中身は中央寄せ。文字はフル表示のまま（潰さない）。 */ .rankcard-actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px} .rankcard-actions-grid button{width:100%;display:inline-flex;align-items:center;justify-content:center;padding:7px 8px} /* 保存状態（即時保存の「…保存中/✓反映」＝.ov-savestate）は薄く右寄せの細い行に。savemsg は従来枠（現状未使用）。 */ .rankcard-actions-status{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-height:15px} .rankcard-actions button{white-space:nowrap;flex-shrink:0;font-size:11px;padding:5px 6px} .rankcard-actions .ticon-lead{margin-right:3px} /* アイコンと文字の間を詰める */ /* 保存確認は非表示時に横幅を占有しない（display:none）＝リセットと保存の間に隙間を作らない。DOM順どおり保存ボタンの左に出る。 */ .rankcard-savemsg{font-size:12px;color:#22c55e;opacity:0;transition:opacity 0.2s;flex-shrink:0;display:none} .rankcard-savemsg.show{opacity:1;display:inline-block} /* ★.rankcard-savebtn（ランキングカードの保存ボタン）は廃止（即時保存）＝クラスごと削除。状態表示は .ov-savestate。 */ /* 設定を初期化（横長・赤系・パネル末尾）。クリックで RANK_DEFAULTS をUIへ反映（保存は別途）。 */ .rankcard-reset-settings{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;background:rgba(239,68,68,0.10);color:#f87171;border:1px solid rgba(239,68,68,0.45);border-radius:8px;padding:7px 12px;font-size:13px;cursor:pointer;transition:background 0.15s,color 0.15s,border-color 0.15s} .rankcard-reset-settings:hover{background:rgba(239,68,68,0.85);color:#fff;border-color:rgba(239,68,68,0.85)} /* ── セット選択画面 ── */ #setView { display: block; } #actionView { display: none; } .set-grid{display:flex;flex-direction:column;gap:8px;margin-bottom:16px} .set-card{background:#171922;border-radius:10px;padding:12px 16px;cursor:pointer;border:2px solid #2a2f3a;display:flex;align-items:center;gap:12px;height:120px;box-sizing:border-box} .set-card:hover{border-color:#1e5cff} /* 色の軸を分ける：MC起動中=シアン(#06b6d4) / TikTok接続中=緑(#22c55e)。ドットは別spanで同時表示可。 */ /* ★定義順依存：両方付与時はボーダーが1本しか引けないため、後勝ちで接続中(緑)を優先している。 下の .set-card.tiktok-connected は必ず .set-card.mc-running より後に置くこと（順序を変えると緑/シアンが黙って逆転する）。 */ .set-card.mc-running{border:1.5px solid #06b6d4} .mc-running-dot{display:none;color:#06b6d4;font-size:12px;line-height:1;flex-shrink:0} .set-card.mc-running .mc-running-dot{display:inline} .set-card.tiktok-connected{border:1.5px solid #22c55e} /* ↑ mc-running より後に定義：両方時に緑が勝つ（順序変更禁止） */ .tiktok-dot{display:none;color:#22c55e;font-size:12px;line-height:1;flex-shrink:0} .set-card.tiktok-connected .tiktok-dot{display:inline} .set-card-name{font-size:15px;font-weight:500;color:#f0f0f0;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .set-card-meta{font-size:13px;color:#888888} .set-card-cat-icon{width:16px;height:16px;object-fit:contain;border-radius:3px;vertical-align:-3px;margin-right:5px} /* ── Bedrock Box風カード（表示部のみ） ── */ .sc-thumb{width:52px;height:52px;flex-shrink:0;border-radius:8px;background:#2a2f3a;display:flex;align-items:center;justify-content:center;overflow:hidden} .sc-thumb-img{width:100%;height:100%;object-fit:cover} .sc-thumb-ph{font-size:26px;line-height:1} .sc-game{color:#a0a0a8;font-weight:600} .sc-evt-badge{display:inline-flex;align-items:center;gap:3px;font-size:12px;padding:2px 8px;border-radius:10px;background:#1f2937;color:#cbd5e1} .sc-left{width:180px;flex-shrink:0} .sc-center{flex:1;display:flex;flex-wrap:wrap;gap:4px;align-items:center;min-width:0} .sc-icon{width:48px;height:48px;background:transparent;display:inline-flex;align-items:center;justify-content:center;font-size:40px} .sc-right{width:140px;flex-shrink:0;display:flex;gap:4px;justify-content:flex-end;align-items:center} /* ── プランロック表示 ── */ .lock-badge{display:inline-flex;align-items:center;gap:3px;font-size:10px;padding:2px 7px;border-radius:10px;background:#2a2410;color:#f59e0b;white-space:nowrap} .set-card.locked{opacity:.55} .set-card.locked:hover{border-color:#2a2f3a} .ac.locked{opacity:.55} .ac.locked .aimg-box.locked-box{cursor:default} .ac.locked .aimg-box.locked-box:hover{border-color:#2a2f3a} .dtab.locked{opacity:.7} .exec-btn:disabled{background:#171922;color:#555;cursor:not-allowed;border:1px solid #2a2f3a} /* ── アクション設定画面ヘッダー ── */ .action-header{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap} .back-btn{background:#1e2029;color:#aaaaaa;border:1px solid #2a2f3a;padding:5px 12px;font-size:13px} .back-btn:hover{background:#2a2f3a} .set-title{font-size:18px;font-weight:700;color:#f0f0f0} .conn-area{margin-left:auto;display:flex;align-items:center;gap:8px} .conn-status{font-size:13px} /* 開いた画面：本文（左）＋接続/リセットパネル（右）の2カラム */ .av-body{display:flex;gap:16px;align-items:flex-start} .av-main{flex:1;min-width:0} .av-side{width:210px;flex-shrink:0;background:#171922;border:0.5px solid #2a2f3a;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px;align-items:stretch} .av-side-title{font-size:13px;color:#888888;font-weight:600} .av-side button{width:100%} /* ID欄（上段ラベル／下段＝値＋鉛筆）を2段表示にする */ .av-id-row{display:flex;flex-direction:column;align-items:stretch;gap:3px} .av-id-label{font-size:11px;color:#888888} .av-id-valrow{display:flex;align-items:center;gap:6px} .av-side #tiktokIdLabel,.av-side #mcIdLabel{font-size:13px;color:#f0f0f0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 詳細度を 0,2,0 にして .av-side button{width:100%}(0,1,1) に勝たせる（鉛筆を自然幅に） */ .av-side .av-edit-btn{width:auto;flex-shrink:0;background:transparent;border:none;color:#888888;padding:2px 4px;font-size:13px} .av-side .av-edit-btn:hover{color:#f0f0f0;opacity:1} .av-divider{border:none;border-top:0.5px solid #2a2f3a;width:100%;margin:3px 0} /* サービス見出し（ランプ＋ラベル） */ .av-svc-row{display:flex;align-items:center;gap:7px;margin-top:2px} .av-svc-label{font-size:13px;color:#888888;font-weight:600} .av-lamp{width:9px;height:9px;border-radius:50%;background:#555555;flex-shrink:0;display:inline-block} .av-lamp.idle{background:#555555} .av-lamp.pending{background:#f59e0b} .av-lamp.active{background:#22c55e} /* プレイヤー名検証：サイドバーの不一致(C)警告行／アカウントメニューの結果表示 */ .av-mc-warn{font-size:11px;color:#f59e0b;margin-top:3px;line-height:1.35;word-break:break-word;white-space:normal} .mc-resolve-result{font-size:12px;margin-top:5px;line-height:1.4;word-break:break-word;white-space:normal} /* C の候補名：縦並びリスト＋ボタン風チップ（枠線+角丸・ホバーで背景変化・長名は折り返し） */ .mc-pick-list{margin-top:2px} .mc-pick-row{display:flex;align-items:flex-start;gap:4px;margin-top:3px} .mc-pick-row .mc-bullet{flex-shrink:0;opacity:.7} .mc-name-pick{display:inline-block;border:1px solid #4b5563;border-radius:5px;padding:1px 7px;cursor:pointer;color:#fbbf24;background:transparent;max-width:100%;word-break:break-word;white-space:normal;box-sizing:border-box} .mc-name-pick:hover{background:#374151;color:#fff;border-color:#6b7280} /* 状態連動ボタン（青=待機 / 黄=処理中 / 赤=稼働中） */ .av-state-btn{width:100%;border:none;border-radius:6px;font-weight:700;padding:8px;font-size:13px} .av-state-btn.state-idle{background:#1e5cff;color:#ffffff} .av-state-btn.state-pending{background:#f59e0b;color:#171922} .av-state-btn.state-active{background:#dc2626;color:#ffffff} /* ── Action card (same as admin) ── */ .user-card{background:#171922;border-radius:10px;padding:14px;margin-bottom:12px;border:1px solid #2a2f3a} .tabs{display:flex;gap:4px;margin-bottom:8px;flex-wrap:wrap} .tab{padding:3px 10px;border-radius:20px;font-size:12px;cursor:pointer;background:#1e2029;color:#888888;border:1px solid #2a2f3a} .tab.active{background:#1e5cff;color:#fff;border-color:#1e5cff} .tab:hover:not(.active){border-color:#1e5cff;color:#f0f0f0} /* タブ行末尾の「＋アクションを追加」（カスタムの横）。openNew() を呼ぶだけ。 絞り込みタブ(.tab)ではなく操作ボタンなので四角い見た目（小角丸）にする。高さは .tab と揃える （padding/font-size は踏襲・横paddingだけテキスト分広がる）。青アクセントは sm-testsend に倣う。 */ .tab-add{padding:3px 10px;border-radius:5px;font-size:12px;cursor:pointer;background:#172040;color:#cfe0ff;border:1px solid #1e5cff} .tab-add:hover:not(:disabled){background:#1d2a52;color:#fff} .tab-add:disabled{background:#111112;border-color:#2a2f3a;color:#444;cursor:default} .ac{display:grid;grid-template-columns:34px 150px 52px minmax(0,1fr) 128px 100px auto;align-items:center;column-gap:6px;background:#1e2029;border-radius:8px;margin-bottom:5px;padding:5px 8px;min-height:62px} /* 編集クリック領域：トリガー/画像/名前（カラム2〜4）をまとめて openEdit へ。subgrid で親トラックを継承し配置は不変。 */ .ac-edit{display:grid;grid-column:2 / 5;grid-template-columns:subgrid;align-items:center;column-gap:6px;border-radius:6px;cursor:pointer} .ac-edit.locked{cursor:default} .ac-edit:not(.locked):hover{background:rgba(255,255,255,.05)} .ac-sort{display:flex;flex-direction:column;align-items:center;gap:1px;flex-shrink:0} .ac-sort button{background:#2a2f3a;color:#888888;border:none;padding:1px 5px;font-size:11px;border-radius:3px;line-height:1.4} .ac-sort .hdl{color:#555;font-size:17px;line-height:1;user-select:none;cursor:grab} .ac-sort .hdl:active{cursor:grabbing} .ac-sort .step-hdl{cursor:grab;color:#666;font-size:15px;line-height:1;user-select:none} .ac-sort .step-hdl:active{cursor:grabbing} .step-dragover{outline:2px dashed #1e5cff;outline-offset:-2px} /* ドラッグ中だけ行(.sdrop)の子要素にイベントを通さない＝dragover/leave が行ラッパーだけで発火し、 入れ子(コマンド行=wrapper+1行目+2行目)の子境界を跨いでも青枠がちらつかない。行自体は受ける（drop可）。 */ body.step-dragging .sdrop *{pointer-events:none} .ac-gimg{width:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center} .ac-gimg img{width:36px;height:36px;object-fit:contain;border-radius:4px} .ac-gimg .no-gimg{width:36px;height:36px;background:transparent;display:flex;align-items:center;justify-content:center;font-size:30px} .ac-trig{display:flex;align-items:center;gap:6px;min-width:0} .ac-trig-body{min-width:0;flex:1} .tbadge{display:inline-block;font-size:10px;padding:2px 7px;border-radius:10px;white-space:nowrap;margin-bottom:3px} .tbadge.gift {background:#2c1810;color:#f5c518} .tbadge.like {background:#1c1410;color:#ff5b81} .tbadge.follow{background:#0f1f10;color:#7ee787} .tbadge.chat {background:#172040;color:#4da3ff} .tbadge.custom{background:#1e1e2a;color:#fbbf24} /* 種別アイコン（Tabler Icons MIT・インラインSVG）。色は .ticon- が currentColor で担う。 */ .ticon{width:1em;height:1em;display:inline-block;vertical-align:-0.15em} .tbadge .ticon,.tab .ticon,.ttab .ticon,.ovcat-item .ticon{margin-right:4px} .ticon-like{color:#ff5b81} .ticon-follow{color:#7ee787} .ticon-chat{color:#4da3ff} .ticon-gift{color:#f5c518} .ticon-custom{color:#fbbf24} /* ★マイ画面＝紫で統一（ギフト金/いいねピンク/フォロー緑/コメント青と被らない・2026-07-27）。以後マイ画面系は var(--ms) を使う。 */ .ticon-myscreen{color:var(--ms)} /* マイ画面のアクティブ枠色は .ovcat-item[data-cat="myscreen"]{--cat:var(--ms)} が担う（各カテゴリと同じ仕組み・上の --cat 定義参照）。 */ /* ランキングの「マイ画面に配置」＝配置済み(.on)は紫。マイ画面5枠タブ(.ms-slot)も紫。 */ #rankcard-msplace.on, #likecard-msplace.on{background:var(--ms-soft);border-color:var(--ms-border);color:#e9deff} /* 絵文字→SVGアイコン置換で、文字の前に置くアイコンの余白。ボタン/見出し共通。 */ .ticon-lead{margin-right:5px} .trig-name{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .trig-coins{font-size:11px;color:#888888} /* giftId 未保持のギフトトリガーに出す注意バッジ（lock-badge と同系のアンバー小ピル）。表示のみ・保存データは触らない。 */ .upd-badge{display:inline-flex;align-items:center;gap:3px;font-size:10px;padding:1px 6px;border-radius:10px;background:#2a2410;color:#f59e0b;white-space:nowrap;margin-top:2px;cursor:help} .ac-aimg{display:flex;justify-content:flex-start;align-items:flex-start;min-width:0} .aimg-box{width:52px;height:52px;border:1px dashed #2a2f3a;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#555;font-size:20px;overflow:hidden} .aimg-box:hover{border-color:#1e5cff} .aimg-box img{width:100%;height:100%;object-fit:cover;border-radius:5px} .ac-settings{min-width:0} .ac-name{font-size:13px;font-weight:500;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ac-meta{font-size:11px;color:#888888;display:flex;flex-wrap:wrap;gap:5px} .ac-meta span{background:#171922;padding:1px 5px;border-radius:3px} .ac-audio{min-width:0} .ac-audio-add{font-size:11px;white-space:normal;line-height:1.2} .ac-audio-set{background:#171922;border:1px solid #2a2f3a;border-radius:6px;padding:4px 6px;width:100%;text-align:left;cursor:pointer} .ac-audio-set:hover{border-color:#1e5cff} .ac-audio-name{font-size:11px;color:#dddddd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ac-audio-vol{font-size:10px;color:#888888} /* ── フラグ（分類見出し）UI ── */ /* 行内プルダウン列（ac-settings と ac-audio の間） */ .ac-flag{display:flex;align-items:center;gap:5px;min-width:0} .ac-flag.unset:not(.ac-flag-col){opacity:.85} /* 非giftカード：列全体を淡色化 */ .ac-flag.ac-flag-col.unset > .ac-flag-row:first-child{opacity:.85} /* giftカード：フラグ選択行だけ淡色化（下段rtag/メニューは不透明維持＝祖先opacityで透けない） */ .ac-flag-sw{width:12px;height:12px;border-radius:3px;flex-shrink:0;border:1px solid #3a3a40} .ac-flag.unset .ac-flag-sw{background:transparent!important;border:1px dashed #555} .ac-flag select{flex:1;min-width:0;background:#171922;color:#dddddd;border:1px solid #2a2f3a;border-radius:6px;font-size:11px;padding:3px 4px} .ac-flag.unset select{border-style:dashed;color:#888888} /* 管理モーダル：フラグ一覧の行 */ .flag-row{display:flex;align-items:center;gap:8px;padding:7px 8px;border:1px solid #2a2f3a;border-radius:8px;background:#161619;margin-bottom:6px} .flag-drag{color:#555;font-size:16px;cursor:grab;user-select:none;flex-shrink:0} .flag-swatch{width:20px;height:20px;border-radius:5px;flex-shrink:0;border:1px solid #3a3a40} .flag-name{flex:1;min-width:0;font-size:13px;color:#f0f0f0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .flag-row input.flag-name-edit{flex:1;min-width:0;background:#1e2029;color:#f0f0f0;border:1px solid #2a2f3a;border-radius:6px;font-size:13px;padding:4px 6px} .flag-row input[type=color].flag-color-edit{width:34px;height:28px;padding:0;border:1px solid #2a2f3a;border-radius:6px;background:#1e2029;cursor:pointer;flex-shrink:0} .flag-presets{display:flex;gap:6px;flex-shrink:0} .flag-preset{width:20px;height:20px;border-radius:5px;cursor:pointer;border:1px solid #3a3a40} .flag-preset:hover{transform:scale(1.12)} .flag-empty{color:#888888;text-align:center;padding:18px;font-size:13px} /* ── ルーレットタグ管理（flag-row 等を流用。固有は件数バッジとギフトチェック群のみ）── */ .rl-count{font-size:11px;color:#9bd49b;background:#1d241d;border:1px solid #2c3a2c;border-radius:10px;padding:2px 8px;flex-shrink:0} /* ギフト行：フラグ select の下にルーレットタグ選択を縦積み（gift のときだけ ac-flag-col） */ .ac-flag.ac-flag-col{flex-direction:column;align-items:stretch;gap:4px} .ac-flag-row{display:flex;align-items:center;gap:5px} /* ルーレットタグ行の左端アイコン（上段の色スウォッチ .ac-flag-sw と同じ12×12の箱で縦に揃える） */ .ac-rtag-ico{width:12px;height:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1} /* 閉じドロップダウン式 ルーレットタグ選択（複数選択） */ .rtag{position:relative;flex:1;min-width:0} .rtag-label{width:100%;box-sizing:border-box;text-align:left;background:#171922;color:#e0c9ef;border:1px solid #3a2f45;border-radius:6px;font-size:11px;padding:3px 6px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rtag-label.empty{color:#888888;border-style:dashed} .rtag-label:hover{border-color:#9b59b6} .rtag-menu{position:absolute;top:100%;left:0;z-index:60;margin-top:3px;min-width:160px;max-height:220px;overflow-y:auto;background:#1c1c20;border:1px solid #3a3a40;border-radius:8px;padding:4px;box-shadow:0 4px 12px rgba(0,0,0,.45)} .rtag-item{display:flex;align-items:center;gap:6px;font-size:12px;color:#dddddd;padding:4px 6px;border-radius:5px;cursor:pointer;white-space:nowrap} .rtag-item:hover{background:#26262c} .rtag-item input{margin:0} .rtag-dot{width:11px;height:11px;border-radius:3px;flex-shrink:0;border:1px solid #3a3a40} .rtag-empty{font-size:11px;color:#888888;padding:6px} .rtag-manage{font-size:11px;color:#d9a6ef;padding:5px 6px;margin-top:3px;border-top:1px solid #3a3a40;cursor:pointer;white-space:nowrap} .rtag-manage:hover{background:#26262c} .audio-ftr{display:flex;gap:8px;justify-content:flex-end;margin-top:14px} .audio-tabpane{padding:6px 0} /* オーディオモーダルだけ高さ固定。タブ位置・外枠を動かさない（方針A） */ #audioModal .modal-box{height:min(680px,90vh);overflow:hidden} #audioModal .ttabs{flex-shrink:0} #audioModal .audio-tabpane{flex:1 1 auto;min-height:0;overflow-y:auto} #audioModal .audio-ftr{flex-shrink:0} .audio-soon{color:#888888;padding:28px;text-align:center;font-size:13px} .sound-list{max-height:46vh;overflow-y:auto;border:1px solid #2a2f3a;border-radius:8px;background:#161619} .sound-row{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid #1e2029} .sound-row:last-child{border-bottom:none} .sound-row .snm{flex:1;font-size:13px;color:#f0f0f0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sound-row .sm{flex-shrink:0} .sound-attr{color:#777;font-size:11px;text-align:right;margin-top:6px} .sound-more{color:#888;font-size:12px;text-align:center;padding:8px} .ac-btns{display:flex;gap:4px;align-items:center} .exec-btn{background:#14532d;color:#fff;font-size:12px;padding:3px 9px;min-width:56px} .exec-btn.counting{background:#78350f} .icon-btn2{background:#1e2029;border:1px solid #2a2f3a;color:#aaaaaa;padding:3px 8px;font-size:14px} .icon-btn2:hover{border-color:#1e5cff;color:#f0f0f0} .add-btn{width:100%;margin-top:6px;background:#171922;border:1px dashed #2a2f3a;color:#888888;padding:7px;border-radius:6px;font-size:13px} .add-btn:hover:not(:disabled){border-color:#1e5cff;color:#f0f0f0} .add-btn:disabled{background:#111112;border-color:#2a2f3a;color:#444} #log{background:#171922;padding:14px;height:200px;overflow-y:auto;border-radius:8px;font-size:12px;font-family:monospace;color:#aaaaaa;border:0.5px solid #2a2f3a} /* ── 2カラムレイアウト ── */ .main-layout{display:flex;gap:16px;align-items:flex-start} .main-left{flex:1;min-width:0} .main-sidebar{width:220px;flex-shrink:0;background:#171922;border:0.5px solid #2a2f3a;border-radius:12px;padding:16px} .sidebar-label{color:#888888;font-size:13px;margin-bottom:8px;display:block} .sidebar-label[hidden]{display:none} .sidebar-btn{background:#1e5cff;width:100%;margin-bottom:6px;padding:8px 12px;border-radius:8px;text-align:left;color:#fff;border:none;cursor:pointer;font-size:13px} .sidebar-btn:hover{opacity:.85} .sidebar-btn.green{background:#16a34a} /* ── MCサーバー ── */ .mc-section{background:#171922;border-radius:10px;padding:16px;margin-bottom:20px;border:1px solid #2a2f3a} .mc-section h2{color:#888888;font-size:14px;margin:0 0 12px;display:flex;align-items:center;gap:6px} .mc-btns{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px} .mc-btn-dl{background:#1e2029;color:#aaaaaa;border:1px solid #2a2f3a} .mc-btn-start{background:#1e5cff;color:#fff} .mc-btn-stop{background:#1e2029;color:#aaaaaa;border:1px solid #2a2f3a} .mc-prog{margin-top:8px;display:none} .mc-prog-bar-wrap{background:#1e2029;border-radius:4px;height:10px;overflow:hidden;margin-bottom:4px} .mc-prog-bar{height:100%;background:#1e5cff;width:0%;transition:width 0.4s ease} .mc-prog-text{font-size:11px;color:#888888} .mc-console{background:#0a0a0c;border-radius:6px;padding:10px;height:160px;overflow-y:auto;font-size:12px;font-family:monospace;color:#9fcc9f;margin-top:8px;display:none} .mc-console-hdr{display:flex;justify-content:space-between;align-items:center;margin-top:10px;margin-bottom:4px;display:none} .mc-console-hdr span{font-size:12px;color:#888888} .mc-console-hdr button{font-size:11px;padding:2px 8px;background:#1e2029;border:1px solid #2a2f3a;color:#aaaaaa} /* ── アカウントパネル ── */ .avatar-wrap{position:relative;display:flex;align-items:center;gap:8px} .avatar-icon{width:40px;height:40px;border-radius:50%;background:#1e2029;border:1px solid #2a2f3a;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#888888} .avatar-icon:hover{border-color:#1e5cff;color:#f0f0f0} .account-panel{display:none;position:absolute;top:48px;right:0;width:280px;background:#171922;border:1px solid #2a2f3a;border-radius:12px;z-index:200;padding:16px} .account-panel.open{display:block} .panel-user-info{display:flex;align-items:center;gap:10px;margin-bottom:4px} .panel-avatar{width:36px;height:36px;border-radius:50%;background:#1e2029;border:1px solid #2a2f3a;display:flex;align-items:center;justify-content:center;color:#888888;flex-shrink:0} .panel-username{font-size:14px;font-weight:600;color:#f0f0f0} .panel-tiktok{font-size:12px;color:#888888} .panel-email-row{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;color:#888888;overflow:hidden} .panel-email-row svg{flex-shrink:0;color:#666666} .panel-email{color:#aaaaaa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .panel-divider{border:none;border-top:1px solid #2a2f3a;margin:12px 0} .panel-manage-btn{width:100%;background:#1e2029;color:#aaaaaa;border:1px solid #2a2f3a;border-radius:6px;padding:7px;font-size:13px;cursor:pointer;text-align:left} .panel-manage-btn:hover{border-color:#1e5cff;color:#f0f0f0} .panel-field{margin-bottom:10px} .panel-field label{font-size:11px;color:#888888;display:block;margin-bottom:4px} .panel-field .req{color:#e05;margin-left:2px;font-size:10px} .panel-field input{width:100%;background:#1e2029;border:1px solid #2a2f3a;border-radius:6px;padding:6px 10px;color:#f0f0f0;font-size:13px} .panel-field input:focus{outline:none;border-color:#1e5cff} .panel-val{font-size:13px;color:#f0f0f0;word-break:break-all} .at-input-wrap{display:flex;align-items:center;background:#1e2029;border-radius:6px;overflow:hidden;width:100%;border:1px solid #2a2f3a} .at-input-wrap:focus-within{border-color:#1e5cff} .at-prefix{padding:0 2px 0 10px;color:#888888;font-size:14px;user-select:none} .at-input-wrap input{background:transparent;border-radius:0;border:none;padding-left:2px;flex:1;min-width:0;outline:none!important} .panel-save-btn{width:100%;background:#1e5cff;color:#fff;border:none;border-radius:6px;padding:7px;font-size:13px;cursor:pointer;margin-bottom:6px} .panel-save-btn:hover{opacity:.85} .panel-logout-btn{width:100%;background:transparent;border:none;color:#666666;font-size:13px;cursor:pointer;padding:4px;text-align:center} .panel-logout-btn:hover{color:#aaaaaa} .panel-recheck-btn{width:100%;background:#1e2029;color:#aaaaaa;border:1px solid #2a2f3a;border-radius:6px;padding:7px;font-size:13px;cursor:pointer;margin-bottom:6px} .panel-recheck-btn:hover:not(:disabled){border-color:#1e5cff;color:#f0f0f0} .panel-recheck-btn:disabled{opacity:.4;cursor:not-allowed} /* 不具合報告モーダルの送信中スピナー */ .bug-spin{display:inline-block;width:12px;height:12px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:bugspin .8s linear infinite;vertical-align:-2px;margin-right:6px} @keyframes bugspin{to{transform:rotate(360deg)}} /* 不具合報告ボタン（アンバー系・danger赤と区別・2箇所共通）。.panel-recheck-btn と併用時は こちらが後勝ちで配色だけ上書きする（幅・余白はパネル側の定義を活かす）。 */ .bug-report-btn{background:rgba(245,158,11,.12);color:#fbbf24;border:1px solid rgba(245,158,11,.45);border-radius:6px;padding:7px;font-size:13px;cursor:pointer} .bug-report-btn:hover:not(:disabled){background:rgba(245,158,11,.22);border-color:#f59e0b;color:#fcd34d} .recheck-msg{display:block;font-size:12px;color:#aaaaaa;text-align:center;margin-bottom:6px;min-height:16px;line-height:1.4} /* Modals */ .modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.87);z-index:1000;align-items:center;justify-content:center} .modal-overlay.open{display:flex} /* ポスター壁（All Game mods）：縦長タイルを自動折り返しで並べる最小グリッド */ #posterWallGrid{display:flex;flex-wrap:wrap;gap:12px;padding:16px;overflow-y:auto;align-content:flex-start} .pw-tile{width:140px;aspect-ratio:3/4;cursor:pointer;border-radius:8px;overflow:hidden;position:relative;transition:transform .15s ease} .pw-tile:hover{transform:scale(1.04);z-index:1} .pw-tile img{width:100%;height:100%;object-fit:cover;display:block} /* カテゴリ名オーバーレイ：普段は透明、ホバー時に下部の黒帯＋白文字を表示 */ .pw-name{position:absolute;left:0;right:0;bottom:0;padding:18px 8px 8px;color:#fff;font-size:12px;font-weight:600;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0));opacity:0;transition:opacity .15s ease;pointer-events:none} .pw-tile:hover .pw-name{opacity:1} .modal-box{background:#171922;border-radius:12px;padding:20px;width:92%;max-width:640px;max-height:92vh;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;border:1px solid #2a2f3a} .modal-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;color:#f0f0f0;font-size:15px;font-weight:700;flex-shrink:0} .modal-close{background:none;border:none;color:#888888;font-size:22px;cursor:pointer;padding:0 4px;line-height:1} .modal-close:hover{color:#f0f0f0} .modal-sec{margin-bottom:14px} .modal-lbl{font-size:12px;color:#888888;display:block;margin-bottom:5px} .ef{display:flex;flex-direction:column;gap:3px} .ef label{font-size:12px;color:#888888} .ef input,.ef select{background:#1e2029;border:1px solid #2a2f3a} .erow{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end} .ttabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px} .ttab{padding:4px 13px;border-radius:20px;font-size:12px;cursor:pointer;background:#1e2029;color:#888888;border:1px solid #2a2f3a} .ttab:hover:not(.active){border-color:#1e5cff;color:#f0f0f0} .ttab.active.gift {background:#2c1810;color:#f5c518;border:1px solid #f5c518} .ttab.active.like {background:#1c1410;color:#ff5b81;border:1px solid #ff5b81} .ttab.active.follow{background:#0f1f10;color:#7ee787;border:1px solid #7ee787} .ttab.active.chat {background:#172040;color:#4da3ff;border:1px solid #4da3ff} .ttab.active.custom{background:#1e1e2a;color:#fbbf24;border:1px solid #fbbf24} .dtab{padding:4px 13px;border-radius:20px;font-size:12px;cursor:pointer;background:#1e2029;color:#888888;border:1px solid #2a2f3a} .dtab:hover:not(.active){border-color:#1e5cff;color:#f0f0f0} .dtab.active{background:#172040;color:#60a5fa;border:1px solid #60a5fa} .cmd-list{display:flex;flex-direction:column;gap:5px;margin-bottom:6px} .cmd-row{display:flex;gap:4px;align-items:center} .cmd-row input{flex:1;background:#1e2029;border:1px solid #2a2f3a;min-width:0} .cmd-row button{padding:4px 8px;background:#7f1d1d;color:#fff;font-size:13px;flex-shrink:0} .adv-toggle{font-size:12px;color:#888888;cursor:pointer;background:none;border:none;padding:1px 0;display:block} .adv-toggle:hover{color:#f0f0f0} .adv-panel{display:none;flex-wrap:wrap;gap:8px;margin-top:8px;padding:10px;background:#121214;border-radius:6px;border:1px solid #2a2f3a} .adv-panel.open{display:flex} .adv-f label{font-size:11px;color:#888888;display:block;margin-bottom:3px} .adv-f input{width:86px;background:#1e2029;border:1px solid #2a2f3a} .gift-modal-box{max-width:920px;max-height:88vh} .gift-search{width:100%;margin:0 0 12px 0;background:#1e2029;border:1px solid #2a2f3a} .gift-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;overflow-y:auto;flex:1;min-height:0} .gift-card{background:#1e2029;border-radius:8px;padding:8px 4px;text-align:center;cursor:pointer;transition:background .15s;border:1px solid #2a2f3a} .gift-card:hover,.gift-card.selected{background:#2a2f3a} .gift-card.selected{outline:2px solid #1e5cff} .gift-card img{width:64px;height:64px;object-fit:contain} .gift-card .gname{font-size:11px;color:#f0f0f0;margin-top:4px;word-break:break-word;line-height:1.3} .gift-card .gprice{font-size:11px;color:#888888;margin-top:2px} .gifts-footer{font-size:12px;color:#555;text-align:right;margin-top:10px;flex-shrink:0} /* ── 同梱画像ピッカー ── */ .img-picker-group-label{font-size:12px;color:#888888;margin:10px 0 6px;font-weight:600} .img-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;margin-bottom:8px} .img-picker-card{background:#1e2029;border:1px solid #2a2f3a;border-radius:6px;padding:6px;text-align:center;cursor:pointer} .img-picker-card:hover{border-color:#1e5cff} .img-picker-card img{width:60px;height:60px;object-fit:contain;display:block;margin:0 auto 4px} .img-picker-card .ipc-label{font-size:10px;color:#aaaaaa;word-break:break-word;line-height:1.3} /* ── ゲームプリセットモーダル ── */ .game-modal-box{width:860px;max-width:96vw;height:580px;max-height:92vh;padding:0;overflow:hidden;display:flex;flex-direction:column} .gm-hdr{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:0.5px solid #2a2f3a;flex-shrink:0} .gm-hdr-title{font-size:15px;font-weight:700;color:#f0f0f0} .gm-body{display:flex;flex:1;overflow:hidden} .gm-left{width:220px;flex-shrink:0;border-right:0.5px solid #2a2f3a;display:flex;flex-direction:column;overflow:hidden} .gm-left-inner{flex:1;overflow-y:auto;padding:8px} .gm-new-btn{background:#1e5cff;width:100%;padding:8px 12px;border-radius:8px;color:#fff;border:none;cursor:pointer;font-size:13px;margin-bottom:8px;text-align:left} .gm-new-btn:hover{opacity:.85} .gm-preset-row{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;cursor:pointer;margin-bottom:2px} .gm-preset-row:hover{background:#1e2029} .gm-preset-row.selected{background:#1e5cff} .gm-preset-icon{width:32px;height:32px;background:#1e2029;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0} .gm-preset-row.selected .gm-preset-icon{background:rgba(255,255,255,.15)} .gm-preset-info{flex:1;min-width:0} .gm-preset-name{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f0f0f0} .gm-preset-meta{font-size:11px;color:#888888;display:flex;gap:6px;margin-top:2px} .gm-preset-row.selected .gm-preset-name,.gm-preset-row.selected .gm-preset-meta{color:#fff} .gm-plan-free{color:#4ade80} .gm-plan-pro{color:#f59e0b} .gm-right{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column} .gm-right-title{display:flex;align-items:center;gap:10px;margin-bottom:14px} .gm-right-icon{width:36px;height:36px;background:#1e2029;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0} .gm-right-name{font-size:18px;font-weight:500;color:#f0f0f0} .gm-events{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px} .gm-event-icon{width:32px;height:32px;background:#1e2029;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:16px} .gm-video{margin-bottom:14px} .gm-video iframe{width:100%;height:200px;border:none;border-radius:8px} .gm-desc{font-size:13px;color:#aaaaaa;line-height:1.6;margin-bottom:16px;flex:1} .gm-footer{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:auto;padding-top:12px} .gm-btn-detail{background:#1e2029;color:#f0f0f0;border:none;border-radius:6px;padding:7px 14px;cursor:pointer;font-size:13px} .gm-btn-detail:hover{opacity:.85} .gm-btn-create{background:#1e5cff;color:#fff;border:none;border-radius:6px;padding:7px 14px;cursor:pointer;font-size:13px} .gm-btn-create:hover{opacity:.85} .gm-btn-copy{background:#16a34a;color:#fff;border:none;border-radius:6px;padding:7px 14px;cursor:pointer;font-size:13px} .gm-btn-copy:hover{opacity:.85} .gm-empty{color:#555;font-size:13px;padding:20px;text-align:center} /* ── テンプレートから作成モーダル ── */ .tpl-row{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;cursor:pointer;margin-bottom:2px} .tpl-row:hover{background:#1e2029} .tpl-row.selected{background:#1e5cff} .tpl-thumb{width:40px;height:40px;border-radius:6px;object-fit:cover;background:#1e2029;flex-shrink:0} .tpl-thumb-ph{width:40px;height:40px;border-radius:6px;background:#1e2029;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0} .tpl-info{flex:1;min-width:0} .tpl-name{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f0f0f0} .tpl-meta{font-size:11px;color:#888888;display:flex;gap:6px;margin-top:2px;align-items:center} .tpl-row.selected .tpl-name,.tpl-row.selected .tpl-meta{color:#fff} .tpl-badge-pro{color:#f59e0b;font-weight:600} .tpl-badge-lock{color:#f59e0b} /* ── コマンド部品ギャラリー（gallery〜） ── */ .gallery-search-wrap{padding:10px 16px;border-bottom:0.5px solid #2a2f3a;flex-shrink:0} .gallery-search-wrap input{width:100%} .gpart-row{display:flex;align-items:center;gap:10px;padding:10px;border-radius:8px;margin-bottom:6px;background:#1f1f23;border:1px solid #2a2f3a} .gpart-thumb{width:48px;height:48px;border-radius:6px;object-fit:cover;background:#1e2029;flex-shrink:0} .gpart-thumb-ph{width:48px;height:48px;border-radius:6px;background:#1e2029;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0} .gpart-mid{flex:1;min-width:0} .gpart-name{font-size:14px;font-weight:600;color:#f0f0f0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gpart-meta{font-size:11px;color:#888;margin-top:2px} .gpart-cmd{font-size:12px;color:#aaa;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:monospace} .gpart-desc{font-size:12px;color:#cfcf9f;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gpart-desc.faint{color:#777;font-family:monospace} .gpart-btns{display:flex;gap:6px;flex-shrink:0} .gpart-exec{background:#14532d;color:#fff;font-size:12px;padding:6px 12px} .gpart-exec.counting{background:#78350f} .gpart-add{background:#1e5cff;color:#fff;font-size:12px;padding:6px 12px} .tpl-detail-thumb{width:100%;max-height:200px;object-fit:cover;border-radius:8px;margin-bottom:14px;background:#1e2029} .tpl-yt{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#1e5cff;text-decoration:none;margin-bottom:14px} .tpl-yt:hover{text-decoration:underline} .tpl-progress{font-size:13px;color:#aaaaaa;margin-top:auto;padding-top:12px;display:none} .tpl-progress.active{display:block} .tpl-err{font-size:12px;color:#ef4444;margin-top:8px;display:none} /* ── プランLimit モーダル ── */ .plan-modal-box{background:#171922;border:1px solid #2a2f3a;border-radius:12px;padding:24px;width:360px;max-width:92vw} .plan-modal-title{color:#f0f0f0;font-size:16px;font-weight:600;margin-bottom:10px} .plan-modal-msg{color:#aaaaaa;font-size:14px;line-height:1.6;margin-bottom:20px} .plan-modal-btns{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap} .plan-limit-hint{font-size:12px;color:#888888;margin-top:6px} /* ── 共有コードモーダル ── */ .share-code-ta{width:100%;height:140px;background:#1e2029;border:1px solid #2a2f3a;border-radius:8px;color:#f0f0f0;font-size:12px;font-family:monospace;padding:10px;resize:none;word-break:break-all} .share-code-ta:focus{outline:none;border-color:#1e5cff} .share-code-note{font-size:12px;color:#f59e0b;margin-top:8px} .import-code-err{font-size:12px;color:#ef4444;margin-top:8px;display:none} /* 共有コード取込の world/plugins 自動DL進捗（非ブロッキングの固定バナー）。既定は非表示。 */ .import-asset-prog{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:9999; background:#1f2937;color:#e4e4e7;border:1px solid #374151;border-top:none;border-radius:0 0 8px 8px; padding:8px 16px;font-size:13px;box-shadow:0 4px 14px rgba(0,0,0,.4);display:none;max-width:80vw} /* 自動更新の「準備できました」バナー（画面上部・非ブロッキング）。既定は非表示。再起動はユーザー操作のみ。 */ .update-banner{position:fixed;top:0;left:0;right:0;z-index:100001;display:none;align-items:center; justify-content:center;gap:14px;background:#1d4ed8;color:#fff;padding:10px 16px;font-size:13px; box-shadow:0 4px 14px rgba(0,0,0,.4)} .update-restart-btn{background:#fff;color:#1d4ed8;border:none;border-radius:6px;padding:6px 14px; font-size:13px;font-weight:bold;cursor:pointer;white-space:nowrap;flex-shrink:0} .update-restart-btn:disabled{opacity:.6;cursor:default} /* ── オーバーレイ設定パネル（セット詳細にインライン展開）── */ .ov-panel{background:#171922;border:1px solid #2a2f3a;border-radius:12px;padding:16px;margin-bottom:16px;position:relative} /* 広い画面：左＝プレビュー(通常フロー)／右＝プロファイル枠＋設定パネル(absoluteで右に固定)。 iframe を含む .ov-top / .ov-sb-block は通常フローのまま（reparentしない＝リロードなし）。 */ @media (min-width:1101px){ #overlayPanel{padding-right:282px} /* 右カラム分の余白を確保（左がかぶらない）。282 = width250 + 32(右offset16+gap16) */ .ov-right{position:absolute;top:16px;right:16px;bottom:16px;width:250px;overflow-y:auto} .ov-right .ov-prof-col{width:100%} /* 旧 width:280px を上書き */ /* 設定パネルを右カラム内にかぶせる（プロファイル枠の上）。縦長はパネル内だけスクロール。 padding-right はスクロールバー(8px)と本文（スライダー右端の数値）・ヘッダーの✕の重なりを逃がす。 */ #ovFormSection{position:absolute;inset:0;background:#171922;z-index:5;overflow-y:auto;padding-right:12px;overscroll-behavior:contain} /* フォーム展開中は背後 .ov-right の白バーを幅0で隠す。overflow は auto のまま＝ 被覆・高さ・重なりを一切変えないため、パネル被覆を崩さない（overflow:hidden は不可）。 */ .ov-right.formOpen::-webkit-scrollbar{width:0;height:0} /* フォーム展開中は覆い隠れている .ov-prof-col をレイアウトから外し、.ov-right の スクロール範囲を消す（短いペインで親 .ov-right がスクロール＝パネル移動＝背後カード露出、を断つ）。 overflow/position 不変・元々覆われて不可視なので可視レイアウトは変わらない。 */ .ov-right.formOpen .ov-prof-col{display:none} /* ヘッダー（見出し＋保存＋✕）をスクロールしても上部に固定。背景でスクロール透けを隠す。 */ #ovFormSection .ov-formsec-hdr{position:sticky;top:0;z-index:6;background:#171922;margin:0;padding:12px 0 10px;border-top:none;border-bottom:1px solid #2a2f3a} /* sticky ヘッダーの border-bottom と pane 先頭要素の border-top が重なり2重線になるのを防ぐ。 ヘッダー側の線を区切りとして残し、本文（各 pane の先頭要素）の上罫線だけ消す。 */ #ovForm .ov-tab-pane > :first-child{border-top:none} } /* 狭い画面（≤1100px）：従来どおり1カラム縦積み。右カラムは下へ流し、設定は下に展開。 */ @media (max-width:1100px){ #overlayPanel{padding-right:16px} .ov-right{position:static;width:auto;margin-top:16px} #ovFormSection{position:static;overflow:visible} } /* 設定パネルのヘッダー見出し（旧タブボタンの置き換え。ovActiveTab に応じてテキスト出し分け）。 */ .ov-formsec-title{font-size:14px;font-weight:700;color:#f0f0f0;display:flex;align-items:center;gap:6px;flex:1;min-width:0;white-space:nowrap} /* スクロールバーを黒基調にグローバル統一（Electron=Chromium。iframe は別ドキュメントのため非波及）。 */ *::-webkit-scrollbar{width:8px;height:8px} *::-webkit-scrollbar-track{background:transparent} *::-webkit-scrollbar-thumb{background:#3a3a40;border-radius:4px} *::-webkit-scrollbar-thumb:hover{background:#4a4a52} .ov-panel-hdr{display:flex;justify-content:space-between;align-items:center;color:#f0f0f0;font-size:14px;font-weight:700;margin-bottom:12px} .ov-sub{font-size:12px;color:#888888;margin:0 0 8px;font-weight:600} /* 上段：左プレビュー＋右プロファイル管理 */ .ov-top{display:flex;gap:16px;margin-bottom:4px;flex-wrap:wrap} .ov-preview-col{flex:1;min-width:300px;display:flex;flex-direction:column;gap:6px} /* プレビュー枠：iframe を 1920px 幅で高精細に実描画し、外側 CSS transform:scale で枠幅へ縮小する。 iframe は position:absolute で枠の高さ計算から切り離し（縮小後高さは枠側に JS が持たせる）、 transform-origin:top left で左上基準に縮めて横はみ出しを防ぐ。width/height/transform は JS 設定。 */ .ov-preview-wrap{width:100%;border:1px solid #2a2f3a;background:#0b0b0d;overflow:hidden;position:relative} .ov-preview{border:none;display:block;position:absolute;top:0;left:0;transform-origin:top left} .ov-prof-col{width:280px;flex-shrink:0;display:flex;flex-direction:column;gap:8px} .ov-newbtn{background:#1e2029;border:1px solid #2a2f3a;color:#ccc;border-radius:8px;padding:9px 11px;font-size:13px;text-align:left;cursor:pointer} .ov-newbtn:hover:not(:disabled){border-color:#1e5cff;color:#fff} .ov-prof-list{display:flex;flex-direction:column;gap:3px} .ov-prof{display:flex;align-items:center;gap:6px;background:#15151a;border:1px solid #202024;border-radius:8px;padding:7px 10px;cursor:pointer;font-size:13px;color:#ccc} .ov-prof:hover{border-color:#1e5cff} .ov-prof.active{border-color:#1e5cff;background:#172040;color:#fff} /* 末尾の「＋ プロファイルを追加」行（5枠未満のときだけ表示）。点線の控えめ導線。 */ .ov-prof-add{display:block;border:1px dashed #3a3a40;border-radius:8px;padding:7px 10px;cursor:pointer;font-size:13px;color:#888;background:transparent;text-align:center} .ov-prof-add:hover{border-color:#1e5cff;color:#f0f0f0} .ov-prof .ov-prof-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ov-prof-name-input{flex:1;min-width:0;background:#171922;border:1px solid #1e5cff;border-radius:5px;color:#fff;font-size:13px;padding:3px 6px;outline:none} .ov-prof-edit{background:none;border:none;color:#888;font-size:13px;padding:2px 4px;cursor:pointer;flex-shrink:0} .ov-prof-edit:hover{color:#f0f0f0} .ov-prof-del{background:none;border:none;color:#ef4444;font-size:14px;padding:2px 4px;cursor:pointer;flex-shrink:0} .ov-prof-del:hover{color:#f87171} /* 配信用URL（ローカル / VPS中継オンライン）セクション */ .ov-urls{display:flex;flex-direction:column;gap:8px;margin-top:12px;padding-top:0} .ov-url-row{display:flex;align-items:flex-end;gap:8px} .ov-url-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px} .ov-url-label{font-size:12px;color:#aaa;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .ov-url-title{min-width:0} .ov-url-input{width:100%;background:#1e2029;border:1px solid #2a2f3a;border-radius:6px;color:#ccc;font-size:12px;padding:7px 9px;font-family:monospace} .ov-relay-status{font-size:11px;font-weight:600;color:#888;white-space:nowrap} /* マイ画面の枠タブ（枠1〜5）。★.av-side button{width:100%} を継承しないよう width:auto を明示（既存 .av-edit-btn と同じ回避）。 */ .ms-slots{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px} .ms-slots button{width:auto} .ms-slot{background:#171922;border:0.5px solid #2a2f3a;border-radius:6px;color:#cfcfcf;padding:6px 12px;font-size:12px;cursor:pointer;line-height:1} .ms-slot:hover{border-color:var(--ms);color:#fff} .ms-slot.sel{background:var(--ms-soft);border-color:var(--ms-border);color:#fff} .ms-live-badge{font-size:10px;color:#4ade80;margin-left:4px} .ms-use-btn{background:#1e5cff;border:0.5px solid #1e5cff;border-radius:6px;color:#fff;padding:6px 12px;font-size:12px;cursor:pointer;line-height:1;margin-left:auto} .ms-use-btn:disabled{background:#171922;border-color:#2a2f3a;color:#666;cursor:default} .ov-url-row .sm{flex-shrink:0;white-space:nowrap;padding:6px 13px;font-size:13px} /* 設定フォームセクション（ヘッダーボタンで開閉する部分）*/ .ov-formsec-hdr{display:flex;justify-content:space-between;align-items:center;color:#f0f0f0;font-size:13px;font-weight:700;margin:14px 0 4px;padding-top:12px;border-top:1px solid #2a2f3a} .ov-prof-hint{font-size:11px;color:#666} /* 下段：設定フォーム 3カラム（かんたん設定ブロック。先頭の罫線でヘッダーと区切る） */ .ov-form-cols{display:flex;gap:20px;flex-wrap:wrap;border-top:1px solid #2a2f3a;margin-top:14px;padding-top:14px} .ov-col{flex:1;min-width:200px;display:flex;flex-direction:column;gap:12px} /* 詳細設定トグルバー（かんたん設定との区切り罫線を兼ねる）＋ 詳細設定の3カラム */ .ov-adv-toggle{display:block;width:100%;margin-top:16px;padding:10px 12px;border:none;border-top:1px solid #2a2f3a;background:transparent;color:#888;font-size:12px;font-weight:600;text-align:left;cursor:pointer} .ov-adv-toggle:hover{color:#f0f0f0;background:#1d1d22} .ov-adv-cols{display:flex;gap:20px;flex-wrap:wrap;margin-top:10px} /* 上部の2ブロック見出し（🎁ギフト一覧 / 🏆スマートバー）。各オーバーレイの存在を明示。 */ .ov-block-hdr{font-size:15px;padding-bottom:0} /* スマートバーブロック：ギフトブロックと視覚的に分ける上区切り。 */ .ov-sb-block{margin-top:16px;padding-top:16px;border-top:2px solid #2a2f3a} /* 設定パネル内タブ（ギフト一覧／スマートバー）。フォームは1枚のまま pane の display 出し分けのみ。 */ /* タブ群はヘッダー左側に配置（旧 in-form 用の下線・下余白は解除）。 */ .ov-tabs{display:flex;gap:6px} /* ヘッダー右側のアクション群（保存メッセージ／保存／✖）。 */ .ov-formsec-hdr-actions{display:flex;align-items:center;gap:8px;flex-shrink:0} .ov-tab{appearance:none;background:transparent;border:1px solid transparent;border-radius:8px;color:#aaa;font-size:13px;font-weight:600;padding:7px 14px;cursor:pointer} .ov-tab:hover{color:#f0f0f0;background:rgba(255,255,255,.04)} .ov-tab.is-active{color:#fff;background:#1e293b;border-color:#1e5cff} .ov-tab-pane{} /* 背景セクション（詳細設定 最下部・全幅） */ .ov-bg-sec{margin-top:16px;border-top:1px solid #2a2f3a;padding-top:12px} .ov-bg-grid{display:flex;gap:20px;flex-wrap:wrap} .ov-bg-status{font-size:12px;color:#888;word-break:break-all;min-height:0} .ov-bg-status:empty{display:none} .ov-bg-actions{margin-top:6px} .ov-bg-note{font-size:11px;color:#666;margin-top:6px} /* カスタムファイル選択（input は隠し、ボタン＋ファイル名ラベルで代替） */ .ov-filepick{display:flex;align-items:center;gap:8px;cursor:pointer;min-width:0} .ov-filepick input[type=file]{display:none} .ov-filepick-btn{flex-shrink:0;background:#1e2029;border:1px solid #2a2f3a;border-radius:6px;color:#ccc;font-size:12px;padding:6px 10px} .ov-filepick:hover .ov-filepick-btn{border-color:#1e5cff;color:#fff} .ov-filepick-name{font-size:12px;color:#888;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} /* プレビュー見出し（左:タイトル／右:実描画サイズ＋現在ページ） */ .ov-prev-hdr{display:flex;justify-content:space-between;align-items:center} .ov-prev-hdr-meta{display:flex;align-items:center;gap:14px} .ov-size{display:inline-flex;align-items:center;gap:4px} .ov-size-label{color:#666;font-weight:400;font-size:11px} .ov-real-size{color:#666;font-weight:400;font-size:11px;font-variant-numeric:tabular-nums} .ov-page-ind{color:#888;font-weight:400;font-variant-numeric:tabular-nums} .ov-row{display:flex;flex-direction:column;gap:4px} .ov-row label{font-size:12px;color:#aaa;display:flex;justify-content:space-between;align-items:center;gap:6px} .ov-row label .ov-val{color:#1e5cff;font-variant-numeric:tabular-nums} .ov-row input[type=range]{width:100%} /* スライダー＋数値ステッパー（−/数値/＋） */ .ov-slider-wrap{display:flex;align-items:center;gap:8px} .ov-slider-wrap input[type=range]{flex:1;min-width:0} .ov-stepper{display:flex;align-items:stretch;flex:0 0 auto} .ov-stepper .ov-num{width:50px;text-align:center;padding:4px 2px;border-radius:0;border-left:none;border-right:none;background:#171922;-moz-appearance:textfield;appearance:textfield} .ov-stepper .ov-num::-webkit-outer-spin-button,.ov-stepper .ov-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .ov-step{padding:0;width:28px;font-size:16px;line-height:1;background:#1e2029;color:#ccc;border:1px solid #2a2f3a;display:flex;align-items:center;justify-content:center} .ov-step:hover{background:#2a2f3a;color:#fff} .ov-step:first-child{border-radius:6px 0 0 6px} .ov-step:last-child{border-radius:0 6px 6px 0} /* カラーピッカー行 */ .ov-color{width:100%;height:32px;padding:2px;cursor:pointer} /* チェックボックス＋カラーバーの複合行（OFF時はバーを淡色化） */ .ov-checkcolor.off .ov-color{opacity:.4} /* レイアウト非該当の行は淡色＋操作不可 */ .ov-row.ov-disabled,.ov-check.ov-disabled{opacity:.4} .ov-check{display:flex;align-items:center;gap:6px;font-size:12px;color:#ccc;cursor:pointer} .ov-check input{width:auto} /* スマートバー：表示指標の並べ替えリスト＋追加パネル（第1段-B） */ .sb-list{display:flex;flex-direction:column;gap:6px;margin-bottom:10px} .sb-item{display:flex;align-items:center;gap:8px;padding:6px 8px;background:#2a2a2a;border:1px solid #3a3a3a;border-radius:6px;font-size:13px;color:#eee} .sb-item.dragging{opacity:.4} .sb-item.drag-over{border-color:#22c55e} .sb-grip{cursor:grab;color:#888;font-size:14px;line-height:1;user-select:none;flex:0 0 auto} .sb-chip{width:12px;height:12px;border-radius:3px;flex:0 0 auto} .sb-name{flex:1 1 auto;min-width:0} .sb-del{flex:0 0 auto;background:transparent;border:none;color:#e57373;cursor:pointer;font-size:15px;line-height:1;padding:2px 4px} .sb-del:hover{color:#ff5252} .sb-add-label{font-size:11px;color:#888;margin:4px 0} .sb-add-panel{display:flex;flex-wrap:wrap;gap:6px} .sb-add-btn{background:#333;border:1px dashed #555;color:#ddd;border-radius:6px;padding:4px 10px;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:6px} .sb-add-btn:hover{border-color:#22c55e;color:#fff} .sb-add-empty{font-size:11px;color:#666} .ov-pro-badge{display:inline-block;font-size:9px;font-weight:700;color:#fff;background:#7c3aed;border-radius:4px;padding:1px 5px;vertical-align:middle} /* 下段右下：保存＋URL */ .ov-actions{display:flex;align-items:center;gap:8px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap} .ov-actions input{flex:0 1 300px;min-width:0;font-size:11px;font-family:monospace} /* ★.ov-savebtn（オーバーレイ設定の保存ボタン）は廃止（即時保存）＝クラスごと削除。 */ /* ★保存ボタン廃止（即時保存）。跡地に出す「今の変更が届いたか」の状態表示。押せない＝ただの表示。 */ .ov-savestate{font-size:12px;color:#9a9aa2;flex-shrink:0;white-space:nowrap;min-width:82px;text-align:right;line-height:1} .ov-savestate.ok{color:#22c55e} .ov-savestate.err{color:#ef4444} .ov-divider{border:none;border-top:1px solid #2a2f3a;margin:4px 0} /* ★プレビュー枠の市松（透明チェッカー）＝編集画面専用。部品の背景が「透明」なのか「黒く塗ってある」のかを 編集中に見分けるためのもの。iframe の中身(core)は全部 html,body{background:transparent} なので、 外側のこのコンテナに敷いた市松がそのまま透けて見える。 ★単品URL（OBSに貼る配信URL）には一切関与しない。core も1バイトも触っていない。 ★#ovCatMyScreen .msed-canvas：マイ画面エディタのキャンバスは core(my-screen-core.js) が DOM ごと生成し、.msed-canvas{background:#000} を