/* ビジュアルタイマーのテーマ。 で切り替える（標準は属性なし）。
暗い配色のテーマ（dark / chalk）は JS が data-theme="dark" も付ける。明るいテーマはサイトの暗い設定より優先する。
共通で使う変数: --vt-ok/--vt-warn/--vt-done（残り時間の色）, --pt-r（ボタン・入力の角丸）, --vt-rc（ポップアップ等の角丸）,
--vt-al-*（時間になったときの帯）, --sw-on/--sw-off（スイッチの色） */
input[type="range"], input[type="checkbox"], input[type="radio"] { accent-color: var(--pt-accent); }
input:focus, select:focus, textarea:focus { border-color: var(--pt-accent); }
/* ---------- テーマの選択（設定ポップアップ） ---------- */
.vt-themes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.vt-th { position: relative; display: flex; flex-direction: column; gap: 0.35rem; margin: 0; padding: 0.4rem; border: 1.5px solid var(--border); border-radius: min(var(--pt-r), 14px); background: var(--surface); color: var(--text); cursor: pointer; min-width: 0; }
.vt-th:hover { border-color: var(--pt-accent); }
.vt-th input { position: absolute; opacity: 0; pointer-events: none; }
.vt-th:has(input:checked) { border-color: var(--pt-accent); box-shadow: inset 0 0 0 1px var(--pt-accent); }
.vt-th:has(input:focus-visible) { outline: 2px solid var(--pt-accent); outline-offset: 2px; }
.vt-th-n { font-size: 0.82rem; font-weight: 600; text-align: center; line-height: 1.3; }
.vt-sw { position: relative; display: block; height: 2.4rem; overflow: hidden; background: var(--s-bg); border: 1px solid rgba(120, 120, 130, 0.35); border-radius: var(--s-r); }
.vt-sw::before { content: ""; position: absolute; inset: 0.3rem; background: var(--s-sf); border-radius: calc(var(--s-r) * 0.7); border: 1px solid rgba(120, 120, 130, 0.25); }
.vt-sw i { position: absolute; left: 0.65rem; bottom: 0.62rem; width: 42%; height: 0.3rem; border-radius: 99px; background: var(--s-ac); }
.vt-sw::after { content: ""; position: absolute; left: 0.65rem; top: 0.62rem; width: 28%; height: 0.22rem; border-radius: 99px; background: var(--s-tx); opacity: 0.7; }
/* 全画面・小窓ではカードの角丸・枠・影・背景の飾りを付けない（どのテーマでも） */
html[data-vt-theme] .vt-card.pt-fs, html[data-vt-theme] .vt-card.in-pip { border-radius: 0; border: 0; box-shadow: none; }
/* ---------- スイッチ風のチェック（iPhone風・Android風・リキッドグラスで共有） ---------- */
html:is([data-vt-theme="ios"], [data-vt-theme="material"], [data-vt-theme="glass"]) .pt-check input[type="checkbox"] {
appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 2.9rem; height: 1.75rem; margin: 0 0.1rem 0 0; padding: 0; cursor: pointer;
border-radius: 999px; border: 0; background: var(--sw-off); transition: background-color 0.2s;
}
html:is([data-vt-theme="ios"], [data-vt-theme="material"], [data-vt-theme="glass"]) .pt-check input[type="checkbox"]::after {
content: ""; position: absolute; top: 0.125rem; left: 0.125rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.28); transition: transform 0.2s;
}
html:is([data-vt-theme="ios"], [data-vt-theme="material"], [data-vt-theme="glass"]) .pt-check input[type="checkbox"]:checked { background: var(--sw-on); }
html:is([data-vt-theme="ios"], [data-vt-theme="material"], [data-vt-theme="glass"]) .pt-check input[type="checkbox"]:checked::after { transform: translateX(1.15rem); }
html:is([data-vt-theme="ios"], [data-vt-theme="material"], [data-vt-theme="glass"]) .pt-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--pt-accent); outline-offset: 2px; }
html:is([data-vt-theme="ios"], [data-vt-theme="material"], [data-vt-theme="glass"]) .pt-check { align-items: center; }
@media (prefers-reduced-motion: reduce) {
html:is([data-vt-theme="ios"], [data-vt-theme="material"], [data-vt-theme="glass"]) .pt-check input[type="checkbox"], html:is([data-vt-theme="ios"], [data-vt-theme="material"], [data-vt-theme="glass"]) .pt-check input[type="checkbox"]::after { transition: none; }
}
/* =====================================================================
ダーク
===================================================================== */
html[data-vt-theme="dark"] {
--bg: #090d18; --surface: #121a2b; --border: #243049; --text: #e6ecf7; --text-sub: #93a1bb;
--vt-edge: #33425f; --vt-ok: #34d399; --vt-warn: #fbbf24; --vt-done: #f87171;
--vt-al-bg: #3a1417; --vt-al-bd: #7f1d1d; --vt-al-tx: #fecaca;
--pt-r: 8px; --vt-rc: 12px;
}
html[data-vt-theme="dark"] .tool-header { background: #0e1424; border-bottom-color: #1d2740; }
html[data-vt-theme="dark"] .vt-card { background: linear-gradient(180deg, #151e33, #101828); border-color: #1f2b46; }
html[data-vt-theme="dark"] .vt-digits { font-weight: 600; letter-spacing: 0.01em; }
html[data-vt-theme="dark"] .vt-rail-b { background: #121a2b; }
html[data-vt-theme="dark"] .vt-pop { background: #131b2d; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55); }
html[data-vt-theme="dark"] .vt-toast { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }
/* =====================================================================
iPhone風
===================================================================== */
html[data-vt-theme="ios"] {
--font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hiragino Sans", "Noto Sans JP", sans-serif;
--bg: #f2f2f7; --surface: #ffffff; --text: #000000; --text-sub: #6c6c70; --border: #e5e5ea;
--pt-accent: #007aff; --pt-accent-hover: #0062cc; --pt-accent-soft: #e5f1ff;
--vt-edge: #d1d1d6; --vt-plus: #248a3d; --vt-minus: #d70015;
--vt-ok: #34c759; --vt-warn: #ff9500; --vt-done: #ff3b30;
--vt-al-bg: #fff1f0; --vt-al-bd: transparent; --vt-al-tx: #3a3a3c;
--sw-on: #34c759; --sw-off: #e9e9ea;
--pt-r: 12px; --vt-rc: 20px;
}
html[data-vt-theme="ios"] body { font-family: var(--font); }
html[data-vt-theme="ios"] .tool-header { background: rgba(249, 249, 249, 0.82); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 0.5px solid rgba(60, 60, 67, 0.29); }
html[data-vt-theme="ios"][data-performance="low"] .tool-header { background: #f9f9f9; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-vt-theme="ios"] .vt-h1 { font-weight: 600; }
html[data-vt-theme="ios"] .vt-head .backmenu-button, html[data-vt-theme="ios"] .vt-head .help-btn { border-color: transparent; background: transparent; color: var(--pt-accent); font-weight: 400; font-size: 1rem; }
html[data-vt-theme="ios"] .vt-head .backmenu-button::before { content: "‹"; font-size: 1.9em; font-weight: 300; line-height: 0.5; margin-right: 0.25em; position: relative; top: 0.04em; }
html[data-vt-theme="ios"] .vt-head .backmenu-button:hover, html[data-vt-theme="ios"] .vt-head .help-btn:hover { border-color: transparent; background: transparent; opacity: 0.6; color: var(--pt-accent); }
html[data-vt-theme="ios"] .vt-card { border: 0; border-radius: 26px; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.04); }
html[data-vt-theme="ios"] .vt-card[data-style="ring"] .vt-svg #arc { stroke-linecap: round; }
html[data-vt-theme="ios"] .vt-card[data-style="ring"] .vt-svg #track { stroke: #e9e9ee; opacity: 1; }
html[data-vt-theme="ios"] .vt-card[data-style="pie"] .vt-svg #track { fill: #ececf1; opacity: 1; }
html[data-vt-theme="ios"] .vt-card[data-style="bar"] .vt-bar { background: #ececf1; border: 0; border-radius: 999px; }
html[data-vt-theme="ios"] .vt-bar i { border-radius: 999px; }
html[data-vt-theme="ios"] .vt-digits { font-weight: 200; letter-spacing: -0.01em; }
html[data-vt-theme="ios"] .vt-title { font-weight: 600; }
html[data-vt-theme="ios"] .btn { font-weight: 600; padding: 0.7rem 1.1rem; }
html[data-vt-theme="ios"] .btn-secondary, html[data-vt-theme="ios"] .btn-secondary:hover:not(:disabled) { background: #eeeef3; border-color: transparent; color: var(--text); }
html[data-vt-theme="ios"] .btn-secondary:hover:not(:disabled) { background: #e2e2e8; }
html[data-vt-theme="ios"] .btn.btn-secondary.vt-plus:hover:not(:disabled), html[data-vt-theme="ios"] .btn.btn-secondary.vt-minus:hover:not(:disabled) { border-color: transparent; }
html[data-vt-theme="ios"] .btn:active:not(:disabled) { opacity: 0.6; }
html[data-vt-theme="ios"] .vt-start, html[data-vt-theme="ios"] .vt-start:hover:not(:disabled) { background: #34c759; color: #fff; }
html[data-vt-theme="ios"] .vt-start:hover:not(:disabled) { background: #2eb350; }
html[data-vt-theme="ios"] .vt-rail-b { background: #e9e9ee; border-color: transparent; color: var(--pt-accent); }
html[data-vt-theme="ios"] .vt-rail-b:hover { border-color: transparent; background: #dcdce2; }
html[data-vt-theme="ios"] .vt-rail-b[aria-expanded="true"] { background: var(--pt-accent); color: #fff; }
html[data-vt-theme="ios"] .vt-pop { border: 0; border-radius: 22px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2), 0 0 0 0.5px rgba(0, 0, 0, 0.06); }
html[data-vt-theme="ios"] .vt-pop-h { border-bottom: 0.5px solid #d1d1d6; padding-top: 0.75rem; padding-bottom: 0.75rem; }
html[data-vt-theme="ios"] .vt-pop-n { font-weight: 600; font-size: 1.02rem; }
html[data-vt-theme="ios"] .vt-pop-x { width: 1.9rem; height: 1.9rem; border-radius: 50%; background: #e9e9ee; color: #8e8e93; font-size: 1.15rem; }
html[data-vt-theme="ios"] .vt-pop-x:hover { background: #dcdce2; color: var(--text); }
html[data-vt-theme="ios"] .vt-toast { background: rgba(250, 250, 252, 0.92); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 0; border-radius: 18px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18); }
html[data-vt-theme="ios"] .vt-toast-bar { height: 3px; border-radius: 3px; left: 0.9rem; right: 0.9rem; bottom: 0.3rem; }
html[data-vt-theme="ios"] .vt-pending { border: 0; background: #eeeef3; }
html[data-vt-theme="ios"] .pt-seg { background: #e9e9ee; border: 0; padding: 2px; gap: 2px; border-radius: 9px; }
html[data-vt-theme="ios"] .pt-seg label { border: 0; border-radius: 7px; color: var(--text); }
html[data-vt-theme="ios"] .pt-seg label:has(input:checked) { background: #fff; color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16), 0 0 0 0.5px rgba(0, 0, 0, 0.04); }
html[data-vt-theme="ios"] .pt-seg input:checked + span { color: var(--text); }
html[data-vt-theme="ios"] .vt-presets .btn[aria-pressed="true"] { background: var(--pt-accent); border-color: transparent; color: #fff; }
html[data-vt-theme="ios"] .vt-my { border: 0; background: #eeeef3; border-radius: 10px; }
html[data-vt-theme="ios"] .vt-my .vt-my-x { border-left-color: #d1d1d6; }
html[data-vt-theme="ios"] .vt-flow span { border: 0; background: #eeeef3; border-radius: 999px; }
html[data-vt-theme="ios"] .vt-flow span.is-now { background: var(--pt-accent); color: #fff; }
html[data-vt-theme="ios"] :is(input[type="text"], input[type="number"], input[type="date"], input[type="time"], select, textarea) { background: #f2f2f7; border-color: transparent; border-radius: 10px; }
html[data-vt-theme="ios"] :is(input[type="text"], input[type="number"], input[type="date"], input[type="time"], select, textarea):focus { border-color: var(--pt-accent); background: #fff; }
html[data-vt-theme="ios"] .vt-alert { border-radius: 18px; }
html[data-vt-theme="ios"] .vt-fs-exit { border-radius: 999px; }
/* =====================================================================
Android風（Material Design 3）
===================================================================== */
html[data-vt-theme="material"] {
--font: Roboto, "Noto Sans JP", "Hiragino Sans", sans-serif;
--bg: #fef7ff; --surface: #fffbfe; --text: #1d1b20; --text-sub: #49454f; --border: #cac4d0;
--pt-accent: #6750a4; --pt-accent-hover: #553f94; --pt-accent-soft: #eaddff;
--vt-edge: #cac4d0; --vt-plus: #146c2e; --vt-minus: #ba1a1a;
--vt-ok: #3a8f3f; --vt-warn: #e08a00; --vt-done: #d32f2f;
--vt-al-bg: #f9dedc; --vt-al-bd: transparent; --vt-al-tx: #410e0b;
--sw-on: #6750a4; --sw-off: #e6e0e9;
--pt-r: 12px; --vt-rc: 28px;
}
html[data-vt-theme="material"] body { font-family: var(--font); }
html[data-vt-theme="material"] .tool-header { background: var(--bg); border-bottom: 0; }
html[data-vt-theme="material"] .vt-h1 { font-weight: 500; font-size: 1.15rem; }
html[data-vt-theme="material"] .vt-head .backmenu-button, html[data-vt-theme="material"] .vt-head .help-btn { border: 0; border-radius: 999px; background: transparent; color: var(--pt-accent); font-weight: 500; }
html[data-vt-theme="material"] .vt-head .backmenu-button:hover, html[data-vt-theme="material"] .vt-head .help-btn:hover { background: rgba(103, 80, 164, 0.1); color: var(--pt-accent); }
html[data-vt-theme="material"] .vt-card { background: #f7f2fa; border: 0; border-radius: 28px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15); }
html[data-vt-theme="material"] .vt-card[data-style="ring"] .vt-svg #arc { stroke-linecap: round; }
html[data-vt-theme="material"] .vt-card[data-style="ring"] .vt-svg #track { stroke: #e7e0ec; opacity: 1; }
html[data-vt-theme="material"] .vt-card[data-style="pie"] .vt-svg #track { fill: #e7e0ec; opacity: 1; }
html[data-vt-theme="material"] .vt-card[data-style="bar"] .vt-bar { background: #e7e0ec; border: 0; border-radius: 999px; }
html[data-vt-theme="material"] .vt-bar i { border-radius: 999px; }
html[data-vt-theme="material"] .vt-digits { font-weight: 400; }
html[data-vt-theme="material"] .vt-title { font-weight: 500; }
html[data-vt-theme="material"] .btn { font-weight: 500; border-radius: 999px; padding: 0.65rem 1.3rem; letter-spacing: 0.01em; }
html[data-vt-theme="material"] .btn-secondary, html[data-vt-theme="material"] .btn-secondary:hover:not(:disabled) { background: #e8def8; border-color: transparent; color: #1d192b; }
html[data-vt-theme="material"] .btn-secondary:hover:not(:disabled) { background: #ddd0f4; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15); }
html[data-vt-theme="material"] .btn.btn-secondary.vt-plus:hover:not(:disabled), html[data-vt-theme="material"] .btn.btn-secondary.vt-minus:hover:not(:disabled) { border-color: transparent; }
html[data-vt-theme="material"] .vt-start { border-radius: 16px; padding: 0.85rem 1.8rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); }
html[data-vt-theme="material"] .vt-start:hover:not(:disabled) { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 6px 12px 4px rgba(0, 0, 0, 0.15); }
html[data-vt-theme="material"] .vt-rail-b { background: transparent; border-color: transparent; color: #49454f; border-radius: 16px; }
html[data-vt-theme="material"] .vt-rail-b:hover { background: rgba(103, 80, 164, 0.1); border-color: transparent; color: #1d192b; }
html[data-vt-theme="material"] .vt-rail-b[aria-expanded="true"] { background: #e8def8; color: #1d192b; }
html[data-vt-theme="material"] .vt-pop { background: #f3edf7; border: 0; box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3); }
html[data-vt-theme="material"] .vt-pop-h { border-bottom: 0; padding: 1rem 0.6rem 0.4rem 1.4rem; }
html[data-vt-theme="material"] .vt-pop-n { font-weight: 400; font-size: 1.4rem; }
html[data-vt-theme="material"] .vt-pop-b { padding-left: 1.4rem; padding-right: 1.4rem; }
html[data-vt-theme="material"] .vt-pop-x { border-radius: 50%; }
html[data-vt-theme="material"] .vt-pop-x:hover { background: rgba(103, 80, 164, 0.12); }
html[data-vt-theme="material"] .vt-toast { --tc: #d0bcff; background: #322f35; color: #f5eff7; border: 0; border-radius: 12px; box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3); }
html[data-vt-theme="material"] .vt-toast.ok { --tc: #6dd58c; }
html[data-vt-theme="material"] .vt-toast.warn { --tc: #fbbf24; }
html[data-vt-theme="material"] .vt-toast.error { --tc: #ffb4ab; }
html[data-vt-theme="material"] .vt-toast-x { color: #cac4d0; }
html[data-vt-theme="material"] .vt-toast-x:hover { color: #fff; }
html[data-vt-theme="material"] .vt-pending { background: #e8def8; border: 0; }
html[data-vt-theme="material"] .pt-seg { border: 1px solid #79747e; border-radius: 999px; }
html[data-vt-theme="material"] .pt-seg label { border-right-color: #79747e; }
html[data-vt-theme="material"] .vt-presets .btn[aria-pressed="true"] { background: #e8def8; color: #1d192b; border-color: transparent; }
html[data-vt-theme="material"] .vt-my { border: 1px solid #79747e; border-radius: 8px; background: transparent; }
html[data-vt-theme="material"] .vt-flow span { border-color: #79747e; border-radius: 8px; background: transparent; }
html[data-vt-theme="material"] .vt-flow span.is-now { background: #e8def8; color: #1d192b; border-color: transparent; }
html[data-vt-theme="material"] :is(input[type="text"], input[type="number"], input[type="date"], input[type="time"], select, textarea) { background: transparent; border: 1px solid #79747e; border-radius: 8px; }
html[data-vt-theme="material"] :is(input[type="text"], input[type="number"], input[type="date"], input[type="time"], select, textarea):focus { border: 2px solid var(--pt-accent); padding: calc(0.6rem - 1px) calc(0.8rem - 1px); }
html[data-vt-theme="material"] .vt-alert { border-radius: 16px; }
html[data-vt-theme="material"] .vt-fs-exit { border-radius: 999px; }
/* M3のスイッチ: OFFは枠線＋小さい丸、ONは塗り＋大きい丸 */
html[data-vt-theme="material"] .pt-check input[type="checkbox"] { width: 3.25rem; height: 2rem; background: #e6e0e9; border: 2px solid #79747e; box-sizing: border-box; }
html[data-vt-theme="material"] .pt-check input[type="checkbox"]::after { top: 50%; left: 0.4rem; width: 1rem; height: 1rem; margin-top: -0.5rem; background: #79747e; box-shadow: none; }
html[data-vt-theme="material"] .pt-check input[type="checkbox"]:checked { background: var(--pt-accent); border-color: var(--pt-accent); }
html[data-vt-theme="material"] .pt-check input[type="checkbox"]:checked::after { width: 1.5rem; height: 1.5rem; margin-top: -0.75rem; left: 0.15rem; background: #fff; transform: translateX(1.2rem); }
/* =====================================================================
リキッドグラス
===================================================================== */
html[data-vt-theme="glass"] {
--font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Hiragino Sans", "Noto Sans JP", sans-serif;
--g-bg: radial-gradient(55% 50% at 10% 6%, #ffc9ea 0, transparent 64%), radial-gradient(50% 55% at 94% 14%, #a9ccff 0, transparent 64%), radial-gradient(60% 60% at 78% 100%, #b8f2db 0, transparent 64%), radial-gradient(45% 45% at 2% 94%, #ffdcab 0, transparent 64%), radial-gradient(40% 40% at 50% 50%, #e3dcff 0, transparent 70%), #e6eaff;
--g-card: rgba(255, 255, 255, 0.38); --g-pop: rgba(255, 255, 255, 0.58); --g-ctl: rgba(255, 255, 255, 0.5);
--bg: #e6eaff; --surface: rgba(255, 255, 255, 0.5); --text: #1b1b2f; --text-sub: #4b4b6a; --border: rgba(255, 255, 255, 0.75);
--pt-accent: #4f46e5; --pt-accent-hover: #4338ca; --pt-accent-soft: rgba(79, 70, 229, 0.14);
--vt-edge: rgba(255, 255, 255, 0.85); --vt-plus: #15803d; --vt-minus: #b91c1c;
--vt-ok: #22c55e; --vt-warn: #f59e0b; --vt-done: #ef4444;
--vt-al-bg: rgba(255, 255, 255, 0.55); --vt-al-bd: rgba(255, 255, 255, 0.9); --vt-al-tx: #4a1d1d;
--sw-on: #34c759; --sw-off: rgba(120, 120, 160, 0.3);
--pt-r: 999px; --vt-rc: 28px;
--g-blur: blur(26px) saturate(180%);
--g-line: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.35), inset 1px 0 0 rgba(255, 255, 255, 0.5);
--g-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.06) 38%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, 0.28));
}
html[data-vt-theme="glass"][data-performance="low"] { --g-card: rgba(255, 255, 255, 0.88); --g-pop: rgba(255, 255, 255, 0.95); --g-ctl: rgba(255, 255, 255, 0.92); --g-blur: none; --g-sheen: none; }
html[data-vt-theme="glass"] body { font-family: var(--font); background: var(--g-bg); background-attachment: fixed; }
html[data-vt-theme="glass"] .tool-header { background: var(--g-card); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); border-bottom: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset; }
html[data-vt-theme="glass"] .vt-h1 { font-weight: 600; }
html[data-vt-theme="glass"] .vt-head .backmenu-button, html[data-vt-theme="glass"] .vt-head .help-btn { background: var(--g-ctl); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.9); color: var(--text); box-shadow: 0 2px 8px rgba(70, 70, 150, 0.1), var(--g-line); }
html[data-vt-theme="glass"] .vt-head .backmenu-button:hover, html[data-vt-theme="glass"] .vt-head .help-btn:hover { background: rgba(255, 255, 255, 0.8); color: var(--text); border-color: #fff; }
html[data-vt-theme="glass"] .vt-card { background: var(--g-sheen), var(--g-card); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 36px; box-shadow: 0 18px 50px rgba(70, 70, 150, 0.18), 0 2px 6px rgba(70, 70, 150, 0.08), var(--g-line); --vt-track: rgba(110, 110, 170, 0.3); }
html[data-vt-theme="glass"] .vt-card.pt-fs { background: var(--g-bg); }
html[data-vt-theme="glass"] .vt-card[data-style="ring"] .vt-svg #arc { stroke-linecap: round; }
html[data-vt-theme="glass"] .vt-card[data-style="ring"] .vt-svg #track { stroke: rgba(255, 255, 255, 0.55); opacity: 1; }
html[data-vt-theme="glass"] .vt-card[data-style="pie"] .vt-svg #track { fill: rgba(255, 255, 255, 0.5); opacity: 1; }
html[data-vt-theme="glass"] .vt-digits { font-weight: 600; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), 0 6px 18px rgba(79, 70, 229, 0.12); }
html[data-vt-theme="glass"] .vt-bar { background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 999px; box-shadow: inset 0 2px 6px rgba(70, 70, 150, 0.12); }
html[data-vt-theme="glass"] .vt-bar i { border-radius: 999px; background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.45), transparent 55%); background-color: var(--vt); }
html[data-vt-theme="glass"] .btn { background: linear-gradient(180deg, #7a75f5, #4f46e5); border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 6px 16px rgba(79, 70, 229, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.55); font-weight: 600; }
html[data-vt-theme="glass"] .btn:hover:not(:disabled) { background: linear-gradient(180deg, #6b66ee, #4338ca); }
html[data-vt-theme="glass"] .btn:disabled { background: rgba(255, 255, 255, 0.35); box-shadow: none; color: var(--text-sub); border-color: rgba(255, 255, 255, 0.6); }
html[data-vt-theme="glass"] .vt-start { background: linear-gradient(180deg, #4ade80, #16a34a); box-shadow: 0 6px 16px rgba(22, 163, 74, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
html[data-vt-theme="glass"] .vt-start:hover:not(:disabled) { background: linear-gradient(180deg, #3fd374, #15934a); }
html[data-vt-theme="glass"] .btn-secondary, html[data-vt-theme="glass"] .btn-secondary:hover:not(:disabled) { background: var(--g-ctl); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.9); color: var(--text); box-shadow: 0 2px 10px rgba(70, 70, 150, 0.1), var(--g-line); }
html[data-vt-theme="glass"] .btn-secondary:hover:not(:disabled) { background: rgba(255, 255, 255, 0.82); }
html[data-vt-theme="glass"] .btn.btn-secondary.vt-plus:hover:not(:disabled), html[data-vt-theme="glass"] .btn.btn-secondary.vt-minus:hover:not(:disabled) { border-color: #fff; }
html[data-vt-theme="glass"] .vt-alert .vt-stop, html[data-vt-theme="glass"] .vt-alert .vt-stop:hover:not(:disabled) { background: linear-gradient(180deg, #f87171, #dc2626); border-color: rgba(255, 255, 255, 0.6); box-shadow: 0 6px 16px rgba(220, 38, 38, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
html[data-vt-theme="glass"][data-performance="low"] :is(.btn-secondary, .vt-rail-b, .vt-head .backmenu-button, .vt-head .help-btn) { -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-vt-theme="glass"] .vt-rail-b { background: var(--g-ctl); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.9); color: var(--text-sub); box-shadow: 0 2px 10px rgba(70, 70, 150, 0.12), var(--g-line); }
html[data-vt-theme="glass"] .vt-rail-b:hover { background: rgba(255, 255, 255, 0.82); border-color: #fff; color: var(--pt-accent); }
html[data-vt-theme="glass"] .vt-rail-b[aria-expanded="true"] { background: linear-gradient(180deg, #7a75f5, #4f46e5); color: #fff; border-color: rgba(255, 255, 255, 0.55); box-shadow: 0 6px 16px rgba(79, 70, 229, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
html[data-vt-theme="glass"] .vt-pop, html[data-vt-theme="glass"] .vt-toast, html[data-vt-theme="glass"] .vt-pending { background: var(--g-sheen), var(--g-pop); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 20px 56px rgba(70, 70, 150, 0.24), var(--g-line); }
html[data-vt-theme="glass"] .vt-pop-h { border-bottom-color: rgba(255, 255, 255, 0.7); }
html[data-vt-theme="glass"] .vt-pop-x { border-radius: 50%; }
html[data-vt-theme="glass"] .vt-pop-x:hover { background: rgba(255, 255, 255, 0.75); }
html[data-vt-theme="glass"] .pt-seg { background: var(--g-ctl); border: 1px solid rgba(255, 255, 255, 0.9); }
html[data-vt-theme="glass"] .pt-seg label { border-right-color: rgba(255, 255, 255, 0.7); }
html[data-vt-theme="glass"] .pt-seg label:has(input:checked) { background: rgba(255, 255, 255, 0.95); box-shadow: 0 1px 4px rgba(70, 70, 150, 0.2); }
html[data-vt-theme="glass"] :is(input[type="text"], input[type="number"], input[type="date"], input[type="time"], select, textarea) { background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(110, 110, 170, 0.28); border-radius: 14px; }
html[data-vt-theme="glass"] .vt-flow span, html[data-vt-theme="glass"] .vt-my, html[data-vt-theme="glass"] .vt-th { background: var(--g-ctl); border-color: rgba(255, 255, 255, 0.9); }
html[data-vt-theme="glass"] .vt-th { border-radius: 16px; }
html[data-vt-theme="glass"] .vt-th:has(input:checked) { border-color: var(--pt-accent); }
html[data-vt-theme="glass"] .vt-presets .btn[aria-pressed="true"] { background: rgba(255, 255, 255, 0.95); color: var(--pt-accent); border-color: var(--pt-accent); }
html[data-vt-theme="glass"] .vt-alert { border-radius: 24px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--g-line); }
html[data-vt-theme="glass"] .vt-alert-t { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); }
html[data-vt-theme="glass"] .vt-fs-exit { background: var(--g-pop); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
html[data-vt-theme="glass"] { --g-card: rgba(255, 255, 255, 0.88); --g-pop: rgba(255, 255, 255, 0.95); --g-ctl: rgba(255, 255, 255, 0.92); }
}
/* =====================================================================
色のテーマ（森・海・桜・夕焼け）：背景・面・文字・ヘッダー・カードの色合いをそろえる
変数: --th-head（ヘッダー）, --th-card（カードの背景）, --th-rail（レールの丸）, --th-digit（数字の色）
===================================================================== */
html[data-vt-theme="forest"] {
--bg: #edf4ee; --surface: #fcfefc; --text: #17301f; --text-sub: #4f6757; --border: #cbdccf; --vt-edge: #a8c4af;
--pt-accent: #2e7d4f; --pt-accent-hover: #236640; --pt-accent-soft: #e0f0e5;
--vt-ok: #43a047; --vt-warn: #e5a50a; --vt-done: #d9382b; --vt-plus: #2e7d32; --vt-minus: #c62828;
--vt-al-bg: #fdeeeb; --vt-al-bd: #f0b7ae; --vt-al-tx: #7a231a;
--th-head: #e3efe6; --th-card: linear-gradient(180deg, #ffffff, #eef7f0); --th-rail: #e0f0e5; --th-digit: #14391f;
--pt-r: 8px; --vt-rc: 14px;
}
html[data-vt-theme="ocean"] {
--bg: #e9f4f9; --surface: #fcfeff; --text: #0c2a3b; --text-sub: #46667a; --border: #c5dfea; --vt-edge: #9fc4d6;
--pt-accent: #0e7490; --pt-accent-hover: #155e75; --pt-accent-soft: #dcf1f7;
--vt-ok: #10a37f; --vt-warn: #e8a317; --vt-done: #dc3a3a; --vt-plus: #0f8a5f; --vt-minus: #c62828;
--vt-al-bg: #fdeeee; --vt-al-bd: #f1b8b8; --vt-al-tx: #7a2222;
--th-head: #dcedf5; --th-card: linear-gradient(180deg, #ffffff, #e6f3f9); --th-rail: #dcf1f7; --th-digit: #0b3347;
--pt-r: 10px; --vt-rc: 16px;
}
html[data-vt-theme="sakura"] {
--bg: #fdf1f5; --surface: #fffafc; --text: #3b1c2a; --text-sub: #7a5666; --border: #f1d2de; --vt-edge: #e5b5c7;
--pt-accent: #be185d; --pt-accent-hover: #9d174d; --pt-accent-soft: #fce4ee;
--vt-ok: #3ea76d; --vt-warn: #e8920f; --vt-done: #dc2626; --vt-plus: #2e8b57; --vt-minus: #c2262e;
--vt-al-bg: #fff0f0; --vt-al-bd: #f4b9b9; --vt-al-tx: #7a2020;
--th-head: #fbe3ec; --th-card: linear-gradient(180deg, #ffffff, #fff0f5); --th-rail: #fce4ee; --th-digit: #4a1a31;
--pt-r: 14px; --vt-rc: 22px;
}
html[data-vt-theme="sunset"] {
--bg: #fff3e8; --surface: #fffdfb; --text: #3a1d0e; --text-sub: #7d5a45; --border: #f0d2ba; --vt-edge: #e3bc9f;
--pt-accent: #c2410c; --pt-accent-hover: #9a3412; --pt-accent-soft: #ffe8d6;
--vt-ok: #3d9a54; --vt-warn: #e0a000; --vt-done: #d92d20; --vt-plus: #2f8a4a; --vt-minus: #c2262e;
--vt-al-bg: #fff0ec; --vt-al-bd: #f3b3a8; --vt-al-tx: #7a2218;
--th-head: linear-gradient(90deg, #ffe4cd, #ffd7dc); --th-card: linear-gradient(180deg, #fffefd, #ffe8d3); --th-rail: #ffe8d6; --th-digit: #4a1f0a;
--pt-r: 10px; --vt-rc: 18px;
}
html:is([data-vt-theme="forest"], [data-vt-theme="ocean"], [data-vt-theme="sakura"], [data-vt-theme="sunset"]) .tool-header { background: var(--th-head); border-bottom-color: var(--border); }
html:is([data-vt-theme="forest"], [data-vt-theme="ocean"], [data-vt-theme="sakura"], [data-vt-theme="sunset"]) .vt-card { background: var(--th-card); border-color: var(--border); }
html:is([data-vt-theme="forest"], [data-vt-theme="ocean"], [data-vt-theme="sakura"], [data-vt-theme="sunset"]) .vt-digits { color: var(--th-digit); }
html:is([data-vt-theme="forest"], [data-vt-theme="ocean"], [data-vt-theme="sakura"], [data-vt-theme="sunset"]) .vt-card[data-phase="done"] .vt-digits { color: var(--vt-done); }
html:is([data-vt-theme="forest"], [data-vt-theme="ocean"], [data-vt-theme="sakura"], [data-vt-theme="sunset"]) .vt-card[data-style="ring"] .vt-svg #arc { stroke-linecap: round; }
html:is([data-vt-theme="forest"], [data-vt-theme="ocean"], [data-vt-theme="sakura"], [data-vt-theme="sunset"]) .vt-rail-b { background: var(--th-rail); border-color: transparent; color: var(--pt-accent); }
html:is([data-vt-theme="forest"], [data-vt-theme="ocean"], [data-vt-theme="sakura"], [data-vt-theme="sunset"]) .vt-rail-b:hover { border-color: var(--pt-accent); }
html:is([data-vt-theme="forest"], [data-vt-theme="ocean"], [data-vt-theme="sakura"], [data-vt-theme="sunset"]) .vt-rail-b[aria-expanded="true"] { background: var(--pt-accent); color: #fff; }
html:is([data-vt-theme="forest"], [data-vt-theme="ocean"], [data-vt-theme="sakura"], [data-vt-theme="sunset"]) .vt-pop { box-shadow: 0 10px 30px rgba(40, 40, 40, 0.12); }
html:is([data-vt-theme="forest"], [data-vt-theme="ocean"], [data-vt-theme="sakura"], [data-vt-theme="sunset"]) .vt-pop-h { background: var(--th-rail); border-radius: var(--vt-rc) var(--vt-rc) 0 0; }
html:is([data-vt-theme="forest"], [data-vt-theme="ocean"], [data-vt-theme="sakura"], [data-vt-theme="sunset"]) .vt-head .backmenu-button, html:is([data-vt-theme="forest"], [data-vt-theme="ocean"], [data-vt-theme="sakura"], [data-vt-theme="sunset"]) .vt-head .help-btn { background: rgba(255, 255, 255, 0.7); }
html:is([data-vt-theme="forest"], [data-vt-theme="ocean"], [data-vt-theme="sakura"], [data-vt-theme="sunset"]) .btn { font-weight: 600; }
html:is([data-vt-theme="forest"], [data-vt-theme="ocean"], [data-vt-theme="sakura"], [data-vt-theme="sunset"]) .vt-presets .btn[aria-pressed="true"] { background: var(--pt-accent); color: #fff; }
html:is([data-vt-theme="forest"], [data-vt-theme="ocean"], [data-vt-theme="sakura"], [data-vt-theme="sunset"]) .pt-seg label:has(input:checked) { background: var(--pt-accent); color: #fff; }
html:is([data-vt-theme="forest"], [data-vt-theme="ocean"], [data-vt-theme="sakura"], [data-vt-theme="sunset"]) .pt-seg input:checked + span { color: #fff; }
html[data-vt-theme="sakura"] .vt-card, html[data-vt-theme="sakura"] .vt-pop { border-width: 1.5px; }
html[data-vt-theme="sakura"] .btn { border-radius: 999px; }
html[data-vt-theme="sakura"] .btn-secondary { border-width: 1.5px; }
html[data-vt-theme="ocean"] .vt-card { border-radius: 20px; }
html[data-vt-theme="sunset"] .vt-card { border-radius: 18px; }
/* =====================================================================
黒板
===================================================================== */
html[data-vt-theme="chalk"] {
--font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", Meiryo, sans-serif;
--bg: #16261f; --surface: #1f382d; --text: #f6f3e8; --text-sub: #c3d1c6; --border: #416453;
--pt-accent: #f6e7a2; --pt-accent-hover: #fff3bd; --pt-accent-soft: #2f5444;
--vt-edge: #5f8a76; --vt-plus: #9be3a8; --vt-minus: #ffa79b;
--vt-ok: #a3e6ae; --vt-warn: #ffe08a; --vt-done: #ff9b8f;
--vt-al-bg: #4a2a2a; --vt-al-bd: #ff9b8f; --vt-al-tx: #ffd9d3;
--pt-r: 5px; --vt-rc: 6px;
}
html[data-vt-theme="chalk"] body { font-family: var(--font); background: radial-gradient(120% 90% at 50% 0%, #1d342a, #121f19); }
html[data-vt-theme="chalk"] .tool-header { background: #5a3f27; border-bottom: 3px solid #3d2a19; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }
html[data-vt-theme="chalk"] .vt-head .backmenu-button, html[data-vt-theme="chalk"] .vt-head .help-btn { background: transparent; border-color: rgba(246, 243, 232, 0.45); color: #f6f3e8; }
html[data-vt-theme="chalk"] .vt-card { background: radial-gradient(120% 100% at 30% 10%, #335a49, #274638 60%, #223d31); border: 9px solid #a47a4c; border-radius: 6px; box-shadow: inset 0 0 0 2px #7d5a35, inset 0 0 40px rgba(0, 0, 0, 0.35), 0 4px 0 #3d2a19; --vt-track: rgba(246, 243, 232, 0.22); }
html[data-vt-theme="chalk"] .vt-card .vt-svg #arc { fill-opacity: 0.93; }
html[data-vt-theme="chalk"] .vt-card[data-style="ring"] .vt-svg #arc { stroke-linecap: round; stroke-opacity: 0.93; }
html[data-vt-theme="chalk"] .vt-card[data-style="ring"] .vt-svg #track { stroke-dasharray: 2 3; opacity: 0.8; }
html[data-vt-theme="chalk"] .vt-digits, html[data-vt-theme="chalk"] .vt-title { text-shadow: none; font-weight: 700; }
html[data-vt-theme="chalk"] .vt-card[data-phase="done"] .vt-digits { text-shadow: 0 0 10px rgba(255, 155, 143, 0.35); }
html[data-vt-theme="chalk"] .vt-card[data-style="bar"] .vt-bar { border: 2px solid rgba(246, 243, 232, 0.5); background: transparent; }
html[data-vt-theme="chalk"] .btn { background: #f6e7a2; color: #1c2e25; border: 2px solid #f6e7a2; font-weight: 700; }
html[data-vt-theme="chalk"] .btn:hover:not(:disabled) { background: #fff3bd; }
html[data-vt-theme="chalk"] .btn:disabled { background: transparent; color: rgba(246, 243, 232, 0.4); border-color: rgba(246, 243, 232, 0.25); }
html[data-vt-theme="chalk"] .btn-secondary, html[data-vt-theme="chalk"] .btn-secondary:hover:not(:disabled) { background: transparent; color: var(--text); border: 2px solid rgba(246, 243, 232, 0.65); }
html[data-vt-theme="chalk"] .btn-secondary:hover:not(:disabled) { background: rgba(246, 243, 232, 0.12); }
html[data-vt-theme="chalk"] .btn.btn-secondary.vt-plus { color: var(--vt-plus); }
html[data-vt-theme="chalk"] .btn.btn-secondary.vt-minus { color: var(--vt-minus); }
html[data-vt-theme="chalk"] .vt-alert .vt-stop, html[data-vt-theme="chalk"] .vt-alert .vt-stop:hover:not(:disabled) { background: var(--vt-done); border-color: var(--vt-done); color: #2a1210; }
html[data-vt-theme="chalk"] .vt-alert { border-width: 2px; border-style: dashed; }
html[data-vt-theme="chalk"] .vt-rail-b { background: #274638; border: 2px solid rgba(246, 243, 232, 0.45); color: #f6f3e8; }
html[data-vt-theme="chalk"] .vt-rail-b:hover { border-color: #f6e7a2; color: #f6e7a2; }
html[data-vt-theme="chalk"] .vt-rail-b[aria-expanded="true"] { background: #f6e7a2; color: #1c2e25; border-color: #f6e7a2; }
html[data-vt-theme="chalk"] .vt-pop { background: #223d31; border: 3px solid #a47a4c; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }
html[data-vt-theme="chalk"] .vt-pop-h { border-bottom: 2px dashed rgba(246, 243, 232, 0.3); }
html[data-vt-theme="chalk"] .vt-toast { background: #223d31; border: 2px solid #a47a4c; }
html[data-vt-theme="chalk"] .vt-pending { background: #223d31; border: 2px dashed rgba(246, 243, 232, 0.4); }
html[data-vt-theme="chalk"] .pt-seg { background: transparent; border: 2px solid rgba(246, 243, 232, 0.55); }
html[data-vt-theme="chalk"] .pt-seg label { border-right-color: rgba(246, 243, 232, 0.4); color: var(--text); }
html[data-vt-theme="chalk"] .pt-seg label:has(input:checked) { background: #f6e7a2; color: #1c2e25; }
html[data-vt-theme="chalk"] .pt-seg input:checked + span { color: #1c2e25; }
html[data-vt-theme="chalk"] :is(input[type="text"], input[type="number"], input[type="date"], input[type="time"], select, textarea) { background: #1b3025; border: 2px solid rgba(246, 243, 232, 0.5); color: var(--text); }
html[data-vt-theme="chalk"] .vt-presets .btn[aria-pressed="true"] { background: #f6e7a2; color: #1c2e25; border-color: #f6e7a2; }
html[data-vt-theme="chalk"] .vt-my, html[data-vt-theme="chalk"] .vt-flow span { background: transparent; border: 2px solid rgba(246, 243, 232, 0.45); }
html[data-vt-theme="chalk"] .vt-flow span.is-now { background: #f6e7a2; color: #1c2e25; border-color: #f6e7a2; }
html[data-vt-theme="chalk"] .vt-th { background: #223d31; border-width: 2px; }
html[data-vt-theme="chalk"] .vt-fs-exit { background: #223d31; border: 2px solid rgba(246, 243, 232, 0.6); color: var(--text); }
/* =====================================================================
高コントラスト
===================================================================== */
html[data-vt-theme="contrast"] {
--bg: #ffffff; --surface: #ffffff; --text: #000000; --text-sub: #333333; --border: #555555;
--pt-accent: #000000; --pt-accent-hover: #262626; --pt-accent-soft: #e6e6e6;
--vt-edge: #000000; --vt-plus: #006400; --vt-minus: #a00000;
--vt-ok: #00700a; --vt-warn: #a85a00; --vt-done: #c00000;
--vt-al-bg: #ffffff; --vt-al-bd: #000000; --vt-al-tx: #000000;
--pt-r: 2px; --vt-rc: 2px;
}
html[data-vt-theme="contrast"] .tool-header { border-bottom: 2px solid #000; }
html[data-vt-theme="contrast"] .vt-card { --vt-track: #d4d4d4; border: 3px solid #000; }
html[data-vt-theme="contrast"] .vt-card[data-colors="off"] { --vt: #000; }
html[data-vt-theme="contrast"] .vt-svg #track { stroke: #bdbdbd; opacity: 1; }
html[data-vt-theme="contrast"] .vt-digits { font-weight: 800; }
html[data-vt-theme="contrast"] .vt-sub { color: #000; font-weight: 600; }
html[data-vt-theme="contrast"] .btn { font-weight: 700; border: 2px solid #000; }
html[data-vt-theme="contrast"] .btn:disabled { background: #e6e6e6; color: #555; border: 2px solid #777; }
html[data-vt-theme="contrast"] .btn-secondary { border: 2px solid #000; }
html[data-vt-theme="contrast"] .btn-secondary:hover:not(:disabled) { background: #000; color: #fff; border-color: #000; }
html[data-vt-theme="contrast"] .btn.btn-secondary.vt-plus:hover:not(:disabled), html[data-vt-theme="contrast"] .btn.btn-secondary.vt-minus:hover:not(:disabled) { background: #000; color: #fff; border-color: #000; }
html[data-vt-theme="contrast"] .vt-alert { border-width: 3px; }
html[data-vt-theme="contrast"] .vt-alert-t { color: #c00000; font-weight: 800; }
html[data-vt-theme="contrast"] .vt-rail-b, html[data-vt-theme="contrast"] .vt-head .backmenu-button, html[data-vt-theme="contrast"] .vt-head .help-btn { border: 2px solid #000; color: #000; }
html[data-vt-theme="contrast"] .vt-rail-b:hover { background: #000; color: #fff; }
html[data-vt-theme="contrast"] .vt-pop, html[data-vt-theme="contrast"] .vt-toast, html[data-vt-theme="contrast"] .vt-pending { border-width: 3px; }
html[data-vt-theme="contrast"] .vt-pop-h { border-bottom: 2px solid #000; }
html[data-vt-theme="contrast"] .vt-toast-bar { height: 6px; }
html[data-vt-theme="contrast"] .pt-seg { border: 2px solid #000; }
html[data-vt-theme="contrast"] .pt-seg label:has(input:checked) { background: #000; color: #fff; }
html[data-vt-theme="contrast"] .pt-seg input:checked + span { color: #fff; }
html[data-vt-theme="contrast"] .vt-presets .btn[aria-pressed="true"] { background: #000; color: #fff; }
html[data-vt-theme="contrast"] :is(input[type="text"], input[type="number"], input[type="date"], input[type="time"], select, textarea) { border: 2px solid #000; }
html[data-vt-theme="contrast"] :focus-visible { outline: 3px solid #000; outline-offset: 2px; }
html[data-vt-theme="contrast"] .vt-th:has(input:checked) { box-shadow: inset 0 0 0 2px #000; border-color: #000; }
/* =====================================================================
時間になったとき：テーマ固有の円・棒の色より、赤の表示を優先する
===================================================================== */
html[data-vt-theme] .vt-card[data-phase="done"][data-style="pie"] .vt-svg #track { fill: var(--vt-done); stroke: none; opacity: 1; }
html[data-vt-theme] .vt-card[data-phase="done"][data-style="ring"] .vt-svg #track { fill: none; stroke: var(--vt-done); stroke-dasharray: none; opacity: 1; }
html[data-vt-theme] .vt-card[data-phase="done"][data-style="bar"] .vt-bar { background: var(--vt-done); border-color: var(--vt-done); }