/* ゲーム枠のパネル (/hub/chat/?game=<slug>)。見た目の正は docs/見本-チャットパネル/panel.html (2026-10-18 作者OK)。
 * タブ4つ (チャット・ランキング・情報・要望) と ⛶・»。チャットは「トーク一覧 → トーク画面」の2段 */
:root { --nc-fg: #dfe8ff; --nc-mut: #8fa3c8; --nc-cy: #1ee3ff; --nc-gd: #ffd24a; --nc-gr: #2effa8; --bg: #0a0d1a; --card: #0f1428; --line: #1d2740; --ink: #dfe7ff; --dim: #8d9bc2; --mute: #5d6b92; --acc: #1ee3ff; --acc-ink: #061018; --gold: #ffd166; --new: #36d399; --bad: #ff8a7a; color-scheme: dark; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 14px/1.45 system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; }
button { font: inherit; color: inherit; cursor: pointer; }
.app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; position: relative; }
/* いちばん上: 小さめのタブ4つ + 全画面・閉じる (スマホは親の枠がタブを持つので隠す) */
.tabs { flex: 0 0 40px; display: flex; align-items: stretch; gap: 2px; padding: 0 4px; border-bottom: 1px solid var(--line); background: #080b16; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
body.mobile .tabs { display: none; }
.tab { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--dim); font-size: 13px; font-weight: 700; padding: 0 8px; white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--acc); border-bottom-color: var(--acc); }
.nwtab { display: inline-block; vertical-align: 1px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: rgba(54,211,153,.16); color: var(--new); border: 1px solid rgba(54,211,153,.5); font-size: 10px; line-height: 15px; }
.sp { flex: 1; }
.ib { flex-shrink: 0; background: none; border: 0; color: var(--dim); font-size: 16px; padding: 0 8px; border-radius: 8px; min-height: 30px; }
.ib:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
/* 画面の上の細い帯 (一覧の見出し / トーク画面の ← と題) */
.bar { flex: 0 0 42px; display: flex; align-items: center; gap: 6px; padding: 0 8px; border-bottom: 1px solid var(--line); min-width: 0; }
.bar h2 { margin: 0; font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.chip { flex-shrink: 0; font-size: 11px; color: var(--dim); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.btn { flex-shrink: 0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 8px; padding: 4px 9px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.btn:hover { border-color: var(--acc); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.go { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); }
.scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.empty { color: var(--dim); text-align: center; margin: 24px 12px; font-size: 13px; }
/* トーク画面 */
.msgs { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 4px 8px 8px; }
.rule { margin: 4px 0 6px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--dim); font-size: 12px; }
.older { display: block; margin: 4px auto 8px; }
.acts { display: flex; gap: 6px; margin: 4px 0 2px; flex-wrap: wrap; }
.acts .btn { font-size: 11.5px; padding: 2px 8px; }
.pill { position: absolute; left: 50%; transform: translateX(-50%); bottom: 70px; z-index: 2; background: var(--acc); color: var(--acc-ink); border: 0; border-radius: 999px; padding: 4px 12px; font-weight: 800; font-size: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.note { flex: 0 0 auto; padding: 4px 10px; font-size: 12px; color: var(--dim); }
.note.bad { color: var(--bad); }
.note:empty { display: none; }
.reply { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--dim); padding: 4px 10px 0; border-top: 1px solid var(--line); background: #080b16; min-width: 0; }
.reply span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.input { flex: 0 0 auto; display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--line); background: #080b16; }
.reply:not([hidden]) + .input { border-top: 0; }
.input textarea { flex: 1; min-width: 0; resize: none; height: 38px; max-height: 96px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit; line-height: 1.4; }
.input textarea:focus { outline: none; border-color: var(--acc); }
.input textarea:disabled { opacity: .6; }
.send { flex-shrink: 0; background: var(--acc); color: var(--acc-ink); border: 0; border-radius: 10px; padding: 0 14px; font-weight: 800; }
.send:disabled { opacity: .5; cursor: default; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* 要望 */
.filters { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; padding: 8px 8px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.f { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px; font-size: 11.5px; color: var(--dim); white-space: nowrap; }
.f[aria-pressed="true"] { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); font-weight: 800; }
/* ランキング・情報 (ゲームのページ) */
iframe.full { flex: 1; width: 100%; border: 0; background: transparent; }
/* スレ・要望を書く */
.form { padding: 12px; }
.form label { display: block; font-size: 12px; color: var(--dim); margin: 0 0 3px; }
.form input[type=text], .form textarea { width: 100%; font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 0 0 10px; resize: vertical; }
.form .choice { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.form .choice label { display: flex; gap: 5px; align-items: center; color: var(--ink); font-size: 13px; margin: 0; }
.form .choice.col { flex-direction: column; gap: 6px; }
.form .acts { justify-content: flex-end; }
/* メニュー・知らせ・ルール */
.menu { position: absolute; right: 8px; top: 44px; background: #121831; border: 1px solid var(--line); border-radius: 10px; padding: 4px; z-index: 5; min-width: 180px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.menu button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 7px 10px; border-radius: 8px; font-size: 13px; }
.menu button:hover { background: rgba(255,255,255,.06); }
.toast { position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%); background: #121831; border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px; font-size: 12px; color: var(--dim); z-index: 6; max-width: 90%; }
.sheet { position: absolute; inset: 0; background: rgba(0,0,0,.55); z-index: 7; display: flex; align-items: center; justify-content: center; padding: 16px; }
.sheet > div { background: #121831; border: 1px solid var(--line); border-radius: 12px; padding: 14px; max-width: 420px; width: 100%; max-height: 90%; overflow-y: auto; }
.sheet h3 { margin: 0 0 8px; font-size: 15px; }
.sheet ul { margin: 0 0 10px; padding-left: 1.2em; font-size: 13px; color: var(--dim); }
.sheet li { margin: 0 0 4px; }
@media (max-width: 380px) { .tab { padding: 0 6px; font-size: 12.5px; } }

/* ---------- サバイバーの前のチャットの見た目 (2026-10-18 作者指示「前の方がパッと見で見やすかった」。もとは シバリサバイバー/src/comments.tpl.html) ---------- */
.btn.pfb { color: var(--nc-cy); border-color: rgba(30,227,255,.45); }
/* スレの一覧: 1行 = 題 / 最後の書き込み / 件数・いつ の3段 */
.nc-list { background: rgba(0,0,0,.2); }
.nc-t { display: block; width: 100%; text-align: left; font: inherit; color: var(--nc-fg); background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.06); padding: 10px 12px; cursor: pointer; }
.nc-t:hover { background: rgba(255,255,255,.03); }
.nc-t.pin { background: rgba(30,227,255,.06); }
.nc-t.arch { opacity: .62; }
.nc-t.slp { opacity: .78; }
.nc-t.more .nc-tt { color: var(--nc-mut); font-weight: 700; font-size: 12px; }
.nc-tt { font-size: 13px; font-weight: 800; color: var(--nc-fg); line-height: 1.4; display: flex; align-items: baseline; gap: 5px; }
.nc-tt > span { flex: none; font-size: 11px; }
.nc-tt b { font-weight: 800; min-width: 0; flex: 1; overflow-wrap: anywhere; }
.nc-tl { font-size: 11px; color: var(--nc-mut); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-tl i { font-style: normal; color: var(--nc-fg); opacity: .75; }
.nc-tm { font-size: 10.5px; color: var(--nc-mut); opacity: .8; margin-top: 2px; font-variant-numeric: tabular-nums; }
.nc-tn { color: #05060f; background: var(--nc-gr); border-radius: 999px; padding: 1px 7px; font-weight: 900; margin-left: 6px; font-size: 10px; }
.nc-tg { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.nc-tg i { font-style: normal; font-size: 10px; font-weight: 800; border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.nc-tg i.k-req { color: var(--nc-cy); background: rgba(30,227,255,.1); }
.nc-tg i.k-bug { color: #ff8090; background: rgba(255,128,144,.13); }
.nc-tg i.s-new { color: var(--nc-mut); background: rgba(255,255,255,.05); }
.nc-tg i.s-todo { color: var(--nc-fg); background: rgba(255,255,255,.08); }
.nc-tg i.s-wip { color: var(--nc-gd); background: rgba(255,210,74,.12); }
.nc-tg i.s-done { color: var(--nc-gr); background: rgba(46,255,168,.12); }
.nc-tg i.s-no { color: var(--nc-mut); background: rgba(255,255,255,.06); }
.nc-arh { font-size: 10.5px; font-weight: 800; color: var(--nc-mut); letter-spacing: .04em; padding: 9px 12px 6px; background: rgba(255,255,255,.02); }
/* 群の見出し (押すと開閉。件数を必ず横に出す) */
.nc-gh { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left; font: inherit; font-size: 11.5px; font-weight: 800; color: var(--nc-fg); letter-spacing: .03em; padding: 9px 12px; border: 0; border-top: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); cursor: pointer; }
.nc-gh:hover { background: rgba(255,255,255,.06); }
.nc-gh .a { flex: none; width: 11px; color: var(--nc-mut); font-size: 9px; }
.nc-gh b { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-gh .n { flex: none; color: var(--nc-mut); font-weight: 900; font-variant-numeric: tabular-nums; }
.nc-gh .d { min-width: 0; flex: 1; font-size: 10px; font-weight: 600; color: var(--nc-mut); opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.nc-g.sub .nc-gh { padding-left: 22px; background: rgba(255,255,255,.015); }
.nc-gi { display: none; }
.nc-gi.on { display: block; }
.nc-gz { font-size: 11px; color: var(--nc-mut); padding: 10px 12px; opacity: .7; }
.nc-msg { padding: 24px 10px; text-align: center; color: var(--nc-mut); font-size: 12.5px; line-height: 1.9; white-space: pre-line; }
/* 1発言。連投は .grp が付いて名前の行が消える。吹き出しは中身の幅に縮む */
.nc-m { margin: 9px 2px 0; max-width: 88%; width: -moz-fit-content; width: fit-content; }
.nc-m.grp { margin-top: 2px; }
.nc-mh { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; flex-wrap: wrap; }
.nc-m.grp .nc-mh { display: none; }
.nc-mn { font-size: 12.5px; font-weight: 800; color: var(--nc-cy); }
.nc-mn.pf { cursor: pointer; background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--nc-fg); }
.nc-mn.pf:hover { color: var(--nc-cy); }
.nc-mn.pf.fw { color: var(--nc-gr); }   /* フォローしている人は名前の文字の色だけ変える */
.nc-mg { font-size: 10px; color: var(--nc-mut); opacity: .7; font-variant-numeric: tabular-nums; }
.nc-mg.pf { cursor: pointer; background: none; border: 0; padding: 0; font: inherit; font-size: 10px; color: var(--nc-mut); }
.nc-mg.pf:hover { color: var(--nc-cy); opacity: 1; }
.nc-mn.nl { color: var(--nc-fg); }   /* ブログのコメントから移した発言の名前 (押せない) */
.nc-mt { font-size: 10.5px; color: var(--nc-mut); }
.nc-au { font-size: 10px; font-weight: 700; color: var(--nc-gd); background: rgba(255,210,74,.1); border-radius: 5px; padding: 1px 6px; }
.nc-ai { font-size: 10px; font-weight: 700; color: #c9b6ff; background: rgba(167,139,250,.14); border-radius: 5px; padding: 1px 6px; }
.nc-rk { font-size: 10px; font-weight: 700; color: var(--nc-mut); background: rgba(255,255,255,.06); border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.nc-rk.r1 { color: #ffe1a0; background: rgba(255,210,74,.11); }
.nc-rk.r2 { color: #dde7f3; background: rgba(255,255,255,.09); }
.nc-rk.r3 { color: #f3bb92; background: rgba(224,152,122,.11); }
.nc-brow { display: flex; align-items: flex-end; gap: 3px; }
.nc-m.me .nc-brow { flex-direction: row-reverse; }
.nc-brow .nc-b { flex: 1; min-width: 0; }
.nc-b { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); border-radius: 4px 12px 12px 12px; padding: 7px 11px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.nc-m.me { margin-left: auto; }
.nc-m.me .nc-mh { justify-content: flex-end; }
.nc-m.me .nc-b { background: rgba(30,227,255,.1); border-color: rgba(30,227,255,.25); border-radius: 12px 4px 12px 12px; }
/* 返信の引用: 発言者の名前より弱く見せる (引用元の人が喋っていると読み違えないように) */
.nc-q { display: block; width: 100%; text-align: left; font: inherit; font-size: 10px; color: var(--nc-mut); background: rgba(255,255,255,.03); border: 0; border-left: 2px solid rgba(255,255,255,.15); border-radius: 0 6px 6px 0; padding: 3px 8px; margin-bottom: 3px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.nc-q:hover { background: rgba(30,227,255,.08); border-left-color: var(--nc-cy); opacity: 1; }
.nc-q b { color: inherit; font-weight: 700; }
.nc-m.hit .nc-b { border-color: var(--nc-cy); box-shadow: 0 0 0 2px rgba(30,227,255,.33), 0 0 18px rgba(30,227,255,.2); transition: box-shadow .35s, border-color .35s; }
.nc-rb { flex: none; font-size: 11px; line-height: 1; color: var(--nc-mut); background: none; border: 0; padding: 5px 4px; opacity: .4; border-radius: 6px; cursor: pointer; }
.nc-rb:hover { opacity: 1; color: var(--nc-cy); background: rgba(255,255,255,.05); }
.nc-act { display: none; gap: 6px; margin-top: 4px; }
.nc-act.on { display: flex; }
.nc-m.me .nc-act { justify-content: flex-end; }
.nc-act button { font-size: 10.5px; color: var(--nc-mut); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.nc-act button:hover { color: var(--nc-fg); border-color: rgba(255,255,255,.2); }
.nc-act button.del:hover { color: #ff8090; border-color: rgba(255,128,144,.33); }
.nc-sep { display: flex; align-items: center; gap: 8px; margin: 14px 6px 4px; font-size: 10.5px; color: var(--nc-mut); }
.nc-sep::before, .nc-sep::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.08); }
/* 記録カードの文字の形 (ゲームの部品が読めないあいだ) */
.card { margin-top: 5px; border: 1px solid rgba(255,210,74,.3); background: rgba(255,210,74,.05); border-radius: 10px; padding: 8px 10px; font-size: 12px; }
.card b { color: var(--nc-gd); }
/* ---------- プロフィール (パネルに重ねて開く。見た目はサバイバーのプロフィール) ---------- */
.prof { position: absolute; left: 0; right: 0; top: 40px; bottom: 0; z-index: 4; background: var(--bg); display: flex; flex-direction: column; }
body.mobile .prof { top: 0; }
.pfwrap { padding: 10px; }
.pf { color: var(--nc-fg); font-size: 13px; line-height: 1.6; }
.pf-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pf-nm { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pf-nm b { font-size: 16px; font-weight: 900; word-break: break-all; }
.pf-tag { font-size: 11px; font-weight: 800; color: var(--nc-mut); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: 2px 7px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pf-au { font-size: 10px; font-weight: 700; color: var(--nc-gd); background: rgba(255,210,74,.1); border: 1px solid rgba(255,210,74,.33); border-radius: 999px; padding: 2px 7px; white-space: nowrap; }
.pf-ai { font-size: 10px; font-weight: 700; color: #c9b6ff; background: rgba(167,139,250,.12); border: 1px solid rgba(167,139,250,.35); border-radius: 999px; padding: 2px 7px; white-space: nowrap; }
.pf-rk { font-size: 11px; font-weight: 800; color: var(--nc-gd); background: rgba(255,210,74,.08); border: 1px solid rgba(255,210,74,.27); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.pf-bd { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.pf-fw { flex: none; font: inherit; font-size: 11.5px; font-weight: 800; color: var(--nc-gr); background: rgba(46,255,168,.08); border: 1px solid rgba(46,255,168,.33); border-radius: 999px; padding: 4px 10px; white-space: nowrap; cursor: pointer; }
.pf-fw.on { color: #05060f; background: var(--nc-gr); border-color: var(--nc-gr); }
.pf-fw:disabled { opacity: .55; cursor: default; }
.pf-fb { font-size: 10.5px; font-weight: 700; color: var(--nc-gr); background: rgba(46,255,168,.06); border: 1px solid rgba(46,255,168,.25); border-radius: 999px; padding: 2px 7px; white-space: nowrap; }
.pf-msg { font-size: 11px; color: #ff9a8a; margin: -4px 0 8px; }
.pf-msg:empty { display: none; }
.pf-fl { display: block; width: 100%; text-align: left; font: inherit; font-size: 12px; font-weight: 700; color: var(--nc-fg); background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 7px 10px; margin-bottom: 10px; cursor: pointer; }
.pf-fl:hover { border-color: rgba(46,255,168,.33); }
.pf-fl b { color: var(--nc-gr); font-weight: 900; }
.pf-fl i { font-style: normal; color: var(--nc-mut); margin: 0 6px; }
/* ゲームごとの欄 (アコーディオン) */
.pf-gh { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--nc-fg); padding: 9px 10px; margin-top: 6px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(255,255,255,.03); cursor: pointer; }
.pf-gh.on { border-color: rgba(30,227,255,.35); background: rgba(30,227,255,.06); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.pf-gh .a { flex: none; width: 11px; color: var(--nc-mut); font-size: 9px; }
.pf-gh .d { margin-left: auto; font-size: 10px; font-weight: 600; color: var(--nc-mut); }
.pf-gb { border: 1px solid rgba(30,227,255,.35); border-top: 0; border-radius: 0 0 10px 10px; padding: 10px 8px 8px; }
.pf-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 6px; margin-bottom: 10px; }
.pf-sum div { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 7px 9px; min-width: 0; }
.pf-sum i { display: block; font-style: normal; font-size: 10.5px; color: var(--nc-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-sum b { display: block; font-size: 15px; font-weight: 900; line-height: 1.3; overflow-wrap: anywhere; }
.pf-sum b s { text-decoration: none; font-size: 10.5px; font-weight: 700; color: var(--nc-mut); margin-left: 3px; }
.pf-sum div.w { grid-column: span 2; }
.pf-sum div.w b { font-size: 13.5px; color: var(--nc-cy); }
.pf-sec { margin-bottom: 10px; }
.pf-t { font-size: 11.5px; font-weight: 900; color: var(--nc-cy); letter-spacing: .04em; margin: 0 0 6px; }
.pf-tg { display: flex; flex-wrap: wrap; gap: 5px; }
.pf-tg i { font-style: normal; font-size: 11px; font-weight: 700; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
.pf-tg i.m1 { color: var(--nc-gd); background: rgba(255,210,74,.1); border-color: rgba(255,210,74,.33); }
.pf-tg i.m2 { color: #dbe6ff; background: rgba(219,230,255,.08); border-color: rgba(219,230,255,.27); }
.pf-tg i.m3 { color: #f0b184; background: rgba(224,153,85,.08); border-color: rgba(224,153,85,.33); }
.pf-rec { font-size: 12px; color: var(--nc-fg); background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 7px 10px; margin-bottom: 5px; }
.pf-rec b { color: var(--nc-mut); font-weight: 700; }
.pf-note { font-size: 10.5px; color: var(--nc-mut); line-height: 1.5; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08); }
.pf-load { text-align: center; color: var(--nc-mut); font-size: 12px; padding: 22px 0; white-space: pre-line; }
.pf-ft { display: flex; gap: 6px; margin-bottom: 10px; }
.pf-ft button { flex: 1; font: inherit; font-size: 12px; font-weight: 800; color: var(--nc-mut); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 7px 4px; cursor: pointer; }
.pf-ft button.on { color: #05060f; background: var(--nc-gr); border-color: var(--nc-gr); }
.pf-frw { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.pf-fr { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; text-align: left; font: inherit; color: var(--nc-fg); background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.pf-fr:hover { border-color: rgba(46,255,168,.33); }
.pf-fr b { font-size: 13.5px; font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-fr b.g { color: var(--nc-gr); }
.pf-fr .x { margin-left: auto; color: var(--nc-mut); font-size: 12px; }
@media (max-width: 560px) { .nc-m { max-width: 93%; } .nc-b { font-size: 13px; } }