/* Reef — ライトモード（v2.9.0）。<html data-theme="light"> の時だけ効く（data-theme は theme.js が付ける・既定はダーク）。
   色は app.css と同じ変数を入れ替え、ダーク向けに直に書いた色（淡い字・白い光・黒い影）だけをここで直す。
   コンソール・ファイルの編集・起動コマンドの見本・コードの塊は、色付きの字のために暗いまま（「コードの島」）。
   Token と Shard は同じ色の系統のまま、白地で読める濃さにする。光らせない・グラデーションの飾りを使わない（v2.6.0 の決め）。 */

:root { color-scheme: dark; }
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f5f3;
  --bg2: #efede9;
  --panel: #ffffff;
  --panel2: #f4f2ef;
  --panel3: #e9e6e1;
  --panel-hover: #faf9f7;
  --line: #e4e1db;
  --line2: #d5d1ca;
  --line3: #bdb8b0;
  --text: #1d1e21;
  --muted: #53565c;
  --dim: #6c6f76;
  --accent: #cf5a3d;
  --accent-hover: #bb4e33;
  --accent-2: #b24a30;
  --accent-ink: #ffffff;
  --accent-rgb: 207, 90, 61;
  --gold: #9a7200;
  --token: #c4930c;
  --shard: #7457d6;
  --boost: #c56a24;
  --ok: #24935d;
  --warn: #b97c12;
  --err: #cc3d35;
  --info: #2f6fc0;
  --shadow: 0 8px 24px rgba(30, 28, 24, .12);
  /* グラフの色（app.js の themeColor で読む） */
  --chart-cpu: #cf5a3d;
  --chart-mem: #4f74d8;
  --chart-req: rgba(207, 90, 61, .5);
  --chart-vis: #b8860b;
  --chart-grid: rgba(60, 64, 72, .1);
  --chart-label: rgba(60, 64, 72, .62);
}
/* ダークのグラフの色（前の直書きと同じ値） */
:root {
  --chart-cpu: #e8745b;
  --chart-mem: #8fb3ff;
  --chart-req: rgba(232, 116, 91, .55);
  --chart-vis: #f2c94c;
  --chart-mem2: #a9b8f5;
  --chart-grid: rgba(148, 163, 180, .12);
  --chart-label: rgba(148, 163, 180, .55);
}
html[data-theme="light"] { --chart-mem2: #5b6fd1; }

/* ── コードの島（ライトでも暗いまま）: 中で使う変数をダークの値に戻す ── */
html[data-theme="light"] :is(.term, .editor, .cmd-preview, pre.codes-out, .md pre.codeblock) {
  color-scheme: dark;
  --text: #ececee; --muted: #a4a7ad; --dim: #8c9097;
  --line: #2a2c31; --line2: #34373d; --line3: #464a51;
  --panel2: #202227; --panel3: #282a30;
  --accent: #e8745b; --accent-2: #f3a993; --accent-rgb: 232, 116, 91;
  --gold: #f2c94c;
  color: var(--text);
}
html[data-theme="light"] .term { border-color: #2a2c31; }
html[data-theme="light"] .editor { border-color: #34373d; }

/* ── 上の帯・ナビ・ダイアログ・知らせ ── */
html[data-theme="light"] .topbar { background: rgba(246, 245, 243, .92); }
@media (max-width: 720px) {
  html[data-theme="light"] .topbar { background: var(--bg); }
  html[data-theme="light"] .nav { box-shadow: 0 -6px 18px rgba(30, 28, 24, .07); }
}
html[data-theme="light"] .modal-back { background: rgba(28, 26, 22, .34); }
html[data-theme="light"] .toast { background: var(--panel); box-shadow: 0 8px 24px rgba(30, 28, 24, .14); }
html[data-theme="light"] .tbl tbody tr:hover td { background: rgba(0, 0, 0, .025); }
html[data-theme="light"] .btn.primary { color: var(--accent-ink); }
html[data-theme="light"] .who .avatar { color: var(--accent-2); }
/* 入力欄は白（白い板の上で灰色だと、押せない欄に見える）・押せない欄だけ灰色 */
html[data-theme="light"] :is(.input, select.input, textarea.input) { background: #ffffff; }
html[data-theme="light"] :is(.input, select.input, textarea.input):disabled { background: var(--bg2); }

/* ── 状態の色（ダーク向けの淡い字を、白地で読める濃さに） ── */
html[data-theme="light"] .btn.ok { background: rgba(36, 147, 93, .1); border-color: rgba(36, 147, 93, .4); color: #1c7a4c; }
html[data-theme="light"] .btn.ok:hover:not(:disabled) { background: rgba(36, 147, 93, .17); }
html[data-theme="light"] .btn.warn { background: rgba(185, 124, 18, .1); border-color: rgba(185, 124, 18, .42); color: #8a5d0c; }
html[data-theme="light"] .btn.warn:hover:not(:disabled) { background: rgba(185, 124, 18, .17); }
html[data-theme="light"] .btn.danger { background: rgba(204, 61, 53, .08); border-color: rgba(204, 61, 53, .4); color: #b0322b; }
html[data-theme="light"] .btn.danger:hover:not(:disabled) { background: rgba(204, 61, 53, .15); }
html[data-theme="light"] .btn.ghost.danger-ic:hover:not(:disabled) { color: #b0322b; background: rgba(204, 61, 53, .1); }
html[data-theme="light"] .note.warn { border-color: rgba(185, 124, 18, .38); background: rgba(185, 124, 18, .08); color: #7d550b; }
html[data-theme="light"] .note.err { border-color: rgba(204, 61, 53, .35); background: rgba(204, 61, 53, .06); color: #a12f29; }
html[data-theme="light"] .note.ok { border-color: rgba(36, 147, 93, .35); background: rgba(36, 147, 93, .07); color: #1c6e45; }
html[data-theme="light"] .note.info { border-color: rgba(47, 111, 192, .35); background: rgba(47, 111, 192, .07); color: #285d9f; }
html[data-theme="light"] .badge.ok { background: rgba(36, 147, 93, .12); color: #1c7a4c; }
html[data-theme="light"] .badge.err { background: rgba(204, 61, 53, .1); color: #b0322b; }
html[data-theme="light"] .badge.warn { background: rgba(185, 124, 18, .12); color: #8a5d0c; }
html[data-theme="light"] .badge.info { background: rgba(47, 111, 192, .1); color: #285d9f; }
html[data-theme="light"] .badge.admin { background: rgba(154, 114, 0, .12); color: var(--gold); }
html[data-theme="light"] .dot.offline { background: #a3a6ac; }
html[data-theme="light"] .tbl td.plus, html[data-theme="light"] b.plus { color: #1c7a4c; }
html[data-theme="light"] .tbl td.minus, html[data-theme="light"] b.minus { color: #b0322b; }

/* 種類の札 */
html[data-theme="light"] :is(.badge.mc, .badge.k-minecraft) { background: rgba(92, 150, 20, .12); color: #4c7a10; }
html[data-theme="light"] :is(.mode .ic.mc, .mode .ic.k-minecraft) { background: rgba(92, 150, 20, .13); color: #4c7a10; }
html[data-theme="light"] .badge.k-bedrock { background: rgba(28, 130, 186, .11); color: #1d6f9e; }
html[data-theme="light"] .mode .ic.k-bedrock { background: rgba(28, 130, 186, .12); color: #1d6f9e; }
html[data-theme="light"] :is(.badge.bot, .badge.k-discordbot) { background: rgba(84, 101, 196, .11); color: #4554ad; }
html[data-theme="light"] :is(.mode .ic.bot, .mode .ic.k-discordbot) { background: rgba(84, 101, 196, .12); color: #4554ad; }
html[data-theme="light"] .badge.k-nodejs { background: rgba(62, 122, 57, .12); color: #3a7235; }
html[data-theme="light"] .mode .ic.k-nodejs { background: rgba(62, 122, 57, .13); color: #3a7235; }
html[data-theme="light"] .badge.k-javaapp { background: rgba(160, 108, 24, .12); color: #84571a; }
html[data-theme="light"] .mode .ic.k-javaapp { background: rgba(160, 108, 24, .13); color: #84571a; }
html[data-theme="light"] .badge.k-website { background: rgba(140, 70, 160, .11); color: #7a3b8f; }
html[data-theme="light"] .mode .ic.k-website { background: rgba(140, 70, 160, .12); color: #7a3b8f; }
html[data-theme="light"] .ip-chip.site { background: rgba(140, 70, 160, .06); border-color: rgba(140, 70, 160, .28); }
html[data-theme="light"] .ip-chip.site b { color: #6c2f80; }

/* サーバー IP・小さな札・報酬 */
html[data-theme="light"] .ip-chip { background: rgba(92, 150, 20, .07); border-color: rgba(92, 150, 20, .3); }
html[data-theme="light"] .ip-chip b { color: #3f6a0c; }
html[data-theme="light"] .ip-chip.inside { background: rgba(47, 111, 192, .07); border-color: rgba(47, 111, 192, .3); }
html[data-theme="light"] .ip-chip.inside b { color: #285d9f; }
html[data-theme="light"] .chip.boost { background: rgba(197, 106, 36, .09); border-color: rgba(197, 106, 36, .35); color: #9a4f16; }
html[data-theme="light"] .chip.rental { background: rgba(116, 87, 214, .08); border-color: rgba(116, 87, 214, .32); color: #5a41b3; }
html[data-theme="light"] .reward.tok { background: rgba(196, 147, 12, .12); color: #7a5800; }
html[data-theme="light"] .reward.shd { background: rgba(116, 87, 214, .1); color: #5638b0; }
html[data-theme="light"] :is(.reward.cpn, .ic.cpn) { background: rgba(197, 106, 36, .1); color: #9a4f16; }
html[data-theme="light"] .notice.pinned { border-top-color: rgba(154, 114, 0, .5); }
html[data-theme="light"] .code-big, html[data-theme="light"] .copy.big { color: var(--gold); }

/* 財布（Token / Shard の数は白地で読める濃さ・絵の色の系統は同じ） */
html[data-theme="light"] .who .purse { box-shadow: 0 1px 2px rgba(30, 28, 24, .08); }
html[data-theme="light"] .who .purse:hover { border-color: var(--line3); box-shadow: 0 4px 12px rgba(30, 28, 24, .1); }
html[data-theme="light"] .who .purse .seg + .seg { border-left-color: rgba(0, 0, 0, .08); }
html[data-theme="light"] .who .purse .seg.token { background: rgba(196, 147, 12, .1); }
html[data-theme="light"] .who .purse .seg.shard { background: rgba(116, 87, 214, .09); }
html[data-theme="light"] .who .purse .seg.token b, html[data-theme="light"] .stat.cur-stat.token .v { color: #7a5800; }
html[data-theme="light"] .who .purse .seg.shard b, html[data-theme="light"] .stat.cur-stat.shard .v { color: #5638b0; }

/* 文字装飾（md.css）のダーク向けの色 */
html[data-theme="light"] .md .spoiler.shown { background: rgba(0, 0, 0, .05); }
html[data-theme="light"] .md .mention.everyone { background: rgba(154, 114, 0, .12); }

/* ── 設定タブ（この端末の表示の設定・v2.9.0） ─────────────────────────── */
.prefs-card h2 { margin-bottom: 4px; }
.prefs-lead { margin: 0 0 14px; font-size: 13px; }
.prefs-foot { font-size: 12.5px; margin: 14px 2px 0; }
.prefs-notes:empty { display: none; }
.prefs-notes { margin-top: 14px; gap: 8px; }
.prefs-replay { margin-top: -4px; }
/* 速さの丸い札は中身の幅だけ（欄の幅いっぱいに伸ばさない） */
.prefs-card .field > .pill-tabs { align-self: flex-start; }
/* テーマ: 3 つの見本（見本の色は、そのテーマの色をそのまま描く＝いまのテーマに関係なく同じ見え方） */
.theme-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.theme-opt { display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: var(--radius); border: 1px solid var(--line2); background: var(--bg2); cursor: pointer; text-align: left; color: var(--text); font: inherit; transition: border-color .15s, background .15s; }
.theme-opt:hover { border-color: var(--line3); }
.theme-opt.on { border-color: var(--accent); background: rgba(var(--accent-rgb), .06); }
.theme-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-swatch { position: relative; display: block; height: 78px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(128, 128, 128, .25); }
.theme-swatch i { position: absolute; display: block; border-radius: 3px; }
.theme-swatch .sw-bar { left: 0; right: 0; top: 0; height: 16px; border-radius: 0; }
.theme-swatch .sw-line { left: 10px; height: 7px; }
.theme-swatch .sw-line.a { top: 28px; width: 58%; }
.theme-swatch .sw-line.b { top: 42px; width: 40%; }
.theme-swatch .sw-btn { left: 10px; top: 56px; width: 30%; height: 12px; background: #e8745b; }
.theme-swatch.dark { background: #111214; }
.theme-swatch.dark .sw-bar { background: #1a1b1f; border-bottom: 1px solid #2a2c31; }
.theme-swatch.dark .sw-line { background: #34373d; }
.theme-swatch.light { background: #f6f5f3; }
.theme-swatch.light .sw-bar { background: #ffffff; border-bottom: 1px solid #e4e1db; }
.theme-swatch.light .sw-line { background: #d5d1ca; }
.theme-swatch.light .sw-btn { background: #cf5a3d; }
/* 端末に合わせる: 左半分がダーク・右半分がライト（斜めに切る＝グラデーションは使わない） */
.theme-swatch.system { background: #f6f5f3; }
.theme-swatch.system::before { content: ""; position: absolute; inset: 0; background: #111214; clip-path: polygon(0 0, 62% 0, 38% 100%, 0 100%); }
.theme-swatch.system .sw-bar { background: transparent; border-bottom: 1px solid rgba(128, 128, 128, .3); }
.theme-swatch.system .sw-line { background: #8a8d93; }
.theme-name { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; }
.theme-radio { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line3); flex: none; position: relative; }
.theme-opt.on .theme-radio { border-color: var(--accent); }
.theme-opt.on .theme-radio::after { content: ""; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--accent); }
/* 切り替えのスイッチ（中身はチェックボックス＝キーボードと読み上げはそのまま） */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; padding: 4px 0; }
.switch-row .sw-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.switch-row .sw-text b { font-weight: 600; }
.switch-row .sw-text small { color: var(--dim); font-size: 12px; }
.switch { position: relative; flex: none; width: 42px; height: 24px; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.switch i { position: absolute; inset: 0; border-radius: 999px; background: var(--panel3); border: 1px solid var(--line2); transition: background .18s, border-color .18s; }
.switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform calc(.22s * var(--reef-k, 1)) cubic-bezier(.3, .8, .3, 1.2); }
.switch input:checked + i { background: var(--accent); border-color: var(--accent); }
.switch input:checked + i::after { transform: translateX(18px); }
.switch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch input:disabled + i { opacity: .45; }
.switch input:disabled { cursor: not-allowed; }
@media (max-width: 720px) {
  .theme-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .theme-opt { padding: 8px; gap: 8px; }
  .theme-swatch { height: 60px; }
  .theme-swatch .sw-bar { height: 12px; }
  .theme-swatch .sw-line.a { top: 21px; }
  .theme-swatch .sw-line.b { top: 32px; }
  .theme-swatch .sw-btn { top: 43px; height: 9px; }
  .theme-name { font-size: 12.5px; gap: 6px; }
}
@media (max-width: 400px) {
  .theme-name { font-size: 11.5px; }
  .theme-radio { display: none; }
}