/* 配色の案。 で切り替える(無指定 = 夜 / ui-v1)。
URL に ?theme=dusk などを付けると、その端末ではその配色を覚える(?theme=night で元に戻す) */
/* 夕焼け: 配信部屋の夜。くすんだ葡萄色に、あたたかい珊瑚色 */
[data-theme="dusk"] {
color-scheme: dark;
--ink:#241B2E; --surface:#2F2439; --raised:#3A2D46; --line:#4A3B57;
--text:#F6EFF6; --sub:#D2C4D6; --mute:#AE9FB4;
--lilac:#FF9E7A; --lilac-ink:#2B140C; --lilac-hover:#FFB698;
--safe:#7EDDB8; --check:#FFD166; --on-check:#2A1F00;
--danger:#FF8396; --danger-bg:#46222F; --danger-line:#6A3344; --danger-hover:#552836; --on-danger:#2A0E14; --strike:rgba(255,131,150,.6);
--on-avatar:#22121A; --badge-line:#8A5A4C; --input:#1D1625; --scrim:rgba(12,8,16,.72);
--av1:#FF9E7A; --av2:#7EDDB8; --av3:#FFD166; --av4:#FF8396; --av5:#9CC8FF; --av6:#E3B3F2;
}
/* 昼: 明るく、ひと目で読める。白地に Twitch 寄りの紫 */
[data-theme="day"] {
color-scheme: light;
--ink:#F4F5F9; --surface:#FFFFFF; --raised:#FFFFFF; --line:#DADDE8;
--text:#1C1F2B; --sub:#4B5165; --mute:#646A80;
--lilac:#5B3FE0; --lilac-ink:#FFFFFF; --lilac-hover:#4A30C9;
--safe:#0E7F57; --check:#A8520A; --on-check:#FFFFFF;
--danger:#C22B42; --danger-bg:#FDECEF; --danger-line:#F1BCC6; --danger-hover:#FADBE1; --on-danger:#FFFFFF; --strike:rgba(194,43,66,.55);
--on-avatar:#1C1F2B; --badge-line:#C4B9F6; --input:#FFFFFF; --scrim:rgba(20,22,32,.45);
--av1:#CFC4FF; --av2:#A8E9CF; --av3:#FFDFA6; --av4:#FFC2CB; --av5:#BFDBFF; --av6:#EFC9F7;
}
/* Twitch紫: 紫を主役にして、ボタンは白で目立たせる */
[data-theme="purple"] {
color-scheme: dark;
--ink:#241A45; --surface:#2F2358; --raised:#3A2D69; --line:#4D3E84;
--text:#F7F4FF; --sub:#D3CAF0; --mute:#AFA5D6;
--lilac:#F4F0FF; --lilac-ink:#2A1B5C; --lilac-hover:#FFFFFF;
--safe:#6FF0C0; --check:#FFD36E; --on-check:#2A1F00;
--danger:#FF93A6; --danger-bg:#4A2350; --danger-line:#6E3570; --danger-hover:#5A2A60; --on-danger:#2A0E14; --strike:rgba(255,147,166,.6);
--on-avatar:#1E1440; --badge-line:#8676CC; --input:#1C1438; --scrim:rgba(14,9,30,.72);
--av1:#C9B8FF; --av2:#6FF0C0; --av3:#FFD36E; --av4:#FF93A6; --av5:#9CC8FF; --av6:#F2B8F0;
}
/* ---------- モダン: 色に加えて形も変える(大きい角丸・丸いボタン・浮いた下タブ) ---------- */
[data-theme="modern"] {
color-scheme: light;
--ink:#F6F6F8; --surface:#FFFFFF; --raised:#FFFFFF; --line:#E6E6EB;
--text:#0B0B10; --sub:#52525C; --mute:#6B6B76;
--lilac:#6D28D9; --lilac-ink:#FFFFFF; --lilac-hover:#5B21B6;
--safe:#047857; --check:#B45309; --on-check:#FFFFFF;
--danger:#BE123C; --danger-bg:#FFF1F3; --danger-line:#FBCFD8; --danger-hover:#FFE4E8; --on-danger:#FFFFFF; --strike:rgba(190,18,60,.5);
--on-avatar:#0B0B10; --badge-line:#DDD6FE; --input:#FFFFFF; --scrim:rgba(10,10,16,.4);
--av1:#DDD6FE; --av2:#A7F3D0; --av3:#FDE68A; --av4:#FECDD3; --av5:#BFDBFE; --av6:#F5D0FE;
--tint-ok:#E9F7F1; --tint-check:#FDF3E6;
}
[data-theme="modern-dark"] {
color-scheme: dark;
--ink:#101014; --surface:#18181D; --raised:#202027; --line:#2B2B33;
--text:#FAFAFA; --sub:#B6B6C0; --mute:#90909B;
--lilac:#A78BFA; --lilac-ink:#130B2B; --lilac-hover:#C4B5FD;
--safe:#34D399; --check:#FBBF24; --on-check:#1F1300;
--danger:#FB7185; --danger-bg:#2A1218; --danger-line:#4C1D27; --danger-hover:#36161E; --on-danger:#1F0A0E; --strike:rgba(251,113,133,.55);
--on-avatar:#101014; --badge-line:#4C3D80; --input:#131317; --scrim:rgba(0,0,0,.6);
--av1:#A78BFA; --av2:#34D399; --av3:#FBBF24; --av4:#FB7185; --av5:#7DB7FF; --av6:#E9A8F5;
--tint-ok:#10241C; --tint-check:#2A2110;
}
[data-theme^="modern"] {
--font:"Segoe UI Variable Text","Segoe UI Variable",-apple-system,"SF Pro Text","Hiragino Sans","Noto Sans JP","Yu Gothic UI",system-ui,sans-serif;
}
[data-theme^="modern"] h1, [data-theme^="modern"] h2 { letter-spacing: -0.01em; }
/* 状態: 左の帯ではなく、色を薄く敷いた大きなカード */
[data-theme^="modern"] .status { border-left: 0; padding: 24px; border-radius: 24px; background: var(--tint-ok); }
[data-theme^="modern"] .status.check { background: var(--tint-check); }
[data-theme^="modern"] .status h1 { font-size: 34px; }
[data-theme^="modern"] .trial { border-radius: 16px; border-style: solid; background: var(--surface); }
/* サブ垢カード: 帯をやめ、大きい角丸+細い枠 */
[data-theme^="modern"] .case { border-left: 1px solid var(--line); border-radius: 24px; padding: 24px; }
[data-theme^="modern"] .case:not(.closed) { box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06); }
[data-theme="modern-dark"] .case:not(.closed) { box-shadow: none; border-color: #34343E; }
[data-theme^="modern"] .why li::before { border-radius: 3px; }
/* ボタン・入力: 丸く */
[data-theme^="modern"] .btn { border-radius: 999px; padding: 0 22px; }
[data-theme^="modern"] input, [data-theme^="modern"] select { border-radius: 14px; }
[data-theme^="modern"] .modal .box { border-radius: 24px; }
[data-theme^="modern"] .toast { border-radius: 16px; }
[data-theme^="modern"] .menu { border-radius: 16px; }
/* 上のバー */
[data-theme^="modern"] .top { border-bottom-color: transparent; }
/* スマホ: 下タブを浮いたバーに */
@media (max-width: 760px) {
[data-theme^="modern"] .tabs { left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); padding: 6px; border-radius: 22px;
border: 1px solid var(--line); background: var(--surface); box-shadow: 0 8px 30px rgba(0,0,0,.12); }
[data-theme="modern-dark"] .tabs { box-shadow: 0 8px 30px rgba(0,0,0,.5); }
[data-theme^="modern"] .tabs button { border-radius: 16px; }
[data-theme^="modern"] .tabs button[aria-current="page"] { background: var(--ink); }
[data-theme^="modern"] .tabs button[aria-current="page"]::after { display: none; }
[data-theme^="modern"] .status h1 { font-size: 28px; }
}
/* 暗い版は色を敷くと濁るので、面は変えずに枠だけ色をのせる */
[data-theme="modern-dark"] .status { background: var(--surface); border: 1px solid rgba(52,211,153,.35); }
[data-theme="modern-dark"] .status.check { background: var(--surface); border-color: rgba(251,191,36,.4); }
[data-theme^="modern"] .status .tally { gap: 4px 16px; }
[data-theme^="modern"] .status.danger { background: var(--danger-bg); }
[data-theme="modern-dark"] .status.danger { background: var(--surface); border-color: rgba(251,113,133,.45); }