/* ==========================================================================
   ダークモード専用CSS (#2252 Phase 2: CSS変数化)
   試験機能(Labs)のダークモードがONの場合のみ読み込まれる。
   html.dark でTailwindユーティリティを包括オーバーライドする。

   色値はセマンティック変数 --dm-* に集約。OLEDモードは oled-dark-mode.css が
   この変数を再代入するだけで全体を純黒ベースに切り替える (上書きの上書きを排除)。
   ========================================================================== */

html.dark {
  --dm-c01: #1e293b;               /* .bg-white */
  --dm-c02: #0f172a;               /* .bg-slate-50 */
  --dm-c03: #334155;               /* .bg-slate-200 */
  --dm-c04: #475569;               /* .bg-slate-300 */
  --dm-c05: rgba(30, 41, 59, 0.95); /* .bg-white\/95 */
  --dm-c06: rgba(30, 41, 59, 0.90); /* .bg-white\/90 */
  --dm-c07: rgba(30, 41, 59, 0.80); /* .bg-white\/80 */
  --dm-c08: rgba(30, 41, 59, 0.70); /* .bg-white\/70 */
  --dm-c09: rgba(30, 41, 59, 0.50); /* .bg-white\/50 */
  --dm-c10: rgba(30, 41, 59, 0.40); /* .bg-white\/40 */
  --dm-c11: rgba(30, 41, 59, 0.30); /* .bg-white\/30 */
  --dm-c12: rgba(30, 41, 59, 0.20); /* .bg-white\/20 */
  --dm-c13: #3b1929;               /* .bg-pink-50 */
  --dm-c14: #4a1d2e;               /* .bg-pink-100 */
  --dm-c15: #5c2339;               /* .bg-pink-200 */
  --dm-c16: #3b1520;               /* .bg-red-50 */
  --dm-c17: #4a1d28;               /* .bg-red-100 */
  --dm-c18: #5c2330;               /* .bg-red-200 */
  --dm-c19: #172554;               /* .bg-blue-50 */
  --dm-c20: #1e3a8a;               /* .bg-blue-100 */
  --dm-c21: #1e40af;               /* .bg-blue-200 */
  --dm-c22: #1e1b4b;               /* .bg-indigo-50 */
  --dm-c23: #312e81;               /* .bg-indigo-100 */
  --dm-c24: #0c2d48;               /* .bg-sky-50 */
  --dm-c25: #0c4a6e;               /* .bg-sky-100 */
  --dm-c26: #14332a;               /* .bg-green-50 */
  --dm-c27: #1a3f33;               /* .bg-green-100 */
  --dm-c28: #1a4a3a;               /* .bg-green-200 */
  --dm-c29: #134e4a;               /* .bg-teal-50 */
  --dm-c30: #1a5c57;               /* .bg-teal-100 */
  --dm-c31: #3b3510;               /* .bg-yellow-50 */
  --dm-c32: #4a4310;               /* .bg-yellow-100 */
  --dm-c33: #5c5415;               /* .bg-yellow-200 */
  --dm-c34: #3b2e10;               /* .bg-amber-50 */
  --dm-c35: #4a3910;               /* .bg-amber-100 */
  --dm-c36: #5c4815;               /* .bg-amber-200 */
  --dm-c37: #3b2510;               /* .bg-orange-50 */
  --dm-c38: #4a2e10;               /* .bg-orange-100 */
  --dm-c39: #5c3a15;               /* .bg-orange-200 */
  --dm-c40: #2e1065;               /* .bg-purple-50 */
  --dm-c41: #3b1483;               /* .bg-purple-100 */
  --dm-c42: #0e3a4a;               /* .bg-cyan-50 */
  --dm-c43: rgba(231, 132, 153, 0.15); /* .bg-cd-pink\/10 */
  --dm-c44: rgba(231, 132, 153, 0.20); /* .bg-cd-pink\/20 */
  --dm-c45: rgba(231, 132, 153, 0.08); /* .bg-cd-pink\/5 */
  --dm-c46: #1e293b;               /* .hover\:bg-slate-50:hover */
  --dm-c47: #64748b;               /* .hover\:bg-slate-300:hover */
  --dm-c48: #1e3a5f;               /* .hover\:bg-blue-50:hover */
  --dm-c49: #94a3b8;               /* .text-slate-400 */
  --dm-c50: #cbd5e1;               /* .text-slate-600 */
  --dm-c51: #e2e8f0;               /* .text-slate-700 */
  --dm-c52: #f1f5f9;               /* .text-slate-800 */
  --dm-c53: #f8fafc;               /* .text-slate-900 */
  --dm-c54: #e2e8f0;               /* .text-cd-text */
  --dm-c55: #334155;               /* .border-slate-100 */
  --dm-c56: #9d174d;               /* .border-pink-300 */
  --dm-c57: rgba(74, 29, 46, 0.5); /* .border-pink-100\/50 */
  --dm-c58: #991b1b;               /* .border-red-300 */
  --dm-c59: #166534;               /* .border-green-300 */
  --dm-c60: #a85f7f;               /* .border-cd-pink */
  --dm-c61: #6b3a50;               /* .border-cd-pink-light */
  --dm-c62: rgba(168, 95, 127, 0.3); /* .border-\[\#e78499\]\/30 */
  --dm-c63: rgba(30, 41, 59, 0.3); /* .border-white\/30 */
  --dm-c64: 0 1px 2px 0 rgba(0, 0, 0, 0.3); /* .shadow-sm */
  --dm-c65: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4); /* .shadow */
  --dm-c66: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4); /* .shadow-md */
  --dm-c67: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4); /* .shadow-lg */
  --dm-c68: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4); /* .shadow-xl */
  --dm-c69: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3); /* .shadow-inner */
  --dm-c70: #0369a1;               /* .from-sky-300 */
  --dm-c71: #4c1d95;               /* .from-purple-200 */
  --dm-c72: #1a6b64;               /* .to-teal-200 */
  --dm-c73: #3730a3;               /* .to-indigo-200 */
  --dm-c74: #155e75;               /* .to-cyan-200 */
  --dm-c75: #64748b;               /* .placeholder-slate-400::placeholder */
  --dm-c76: #334155;               /* input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea */
  --dm-c77: 0 10px 40px rgba(0, 0, 0, 0.4); /* .cp-onboarding.driver-popover */
  --dm-c78: #cbd5e1;               /* .prose */
  --dm-c79: #f1f5f9;               /* .prose */
  --dm-c80: #94a3b8;               /* .prose */
  --dm-c81: #e78499;               /* .prose */
  --dm-c82: #475569;               /* .prose */
  --dm-c83: #4a1d2e;               /* .prose :where(h2):not(:where([class~="not-prose"] *)) */
  --dm-c84: rgba(59, 25, 41, 0.5); /* .prose :where(blockquote):not(:where([class~="not-prose"] *)) */
  --dm-c85: #2a2140;               /* 淡ラベンダー背景 (#f0ecf9 等 / LABSバッジ) #2254 */
}

html.dark  { scrollbar-color: #334155 transparent; }
html.dark ::-webkit-scrollbar-thumb { background: #334155; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #475569; }
html.dark .bg-white { background-color: var(--dm-c01); }
html.dark .bg-slate-50 { background-color: var(--dm-c02); }
html.dark .bg-slate-100 { background-color: var(--dm-c01); }
html.dark .bg-slate-200 { background-color: var(--dm-c03); }
html.dark .bg-slate-300 { background-color: var(--dm-c04); }
html.dark .bg-gray-50 { background-color: var(--dm-c02); }
html.dark .bg-gray-100 { background-color: var(--dm-c01); }
html.dark .bg-gray-200 { background-color: var(--dm-c03); }
html.dark .bg-white\/95 { background-color: var(--dm-c05); }
html.dark .bg-white\/90 { background-color: var(--dm-c06); }
html.dark .bg-white\/80 { background-color: var(--dm-c07); }
html.dark .bg-white\/70 { background-color: var(--dm-c08); }
html.dark .bg-white\/50 { background-color: var(--dm-c09); }
html.dark .bg-white\/40 { background-color: var(--dm-c10); }
html.dark .bg-white\/30 { background-color: var(--dm-c11); }
html.dark .bg-white\/20 { background-color: var(--dm-c12); }
html.dark .bg-pink-50 { background-color: var(--dm-c13); }
html.dark .bg-pink-100 { background-color: var(--dm-c14); }
html.dark .bg-pink-200 { background-color: var(--dm-c15); }
html.dark .bg-red-50 { background-color: var(--dm-c16); }
html.dark .bg-red-100 { background-color: var(--dm-c17); }
html.dark .bg-red-200 { background-color: var(--dm-c18); }
html.dark .bg-rose-50 { background-color: var(--dm-c16); }
html.dark .bg-rose-100 { background-color: var(--dm-c17); }
html.dark .bg-blue-50 { background-color: var(--dm-c19); }
html.dark .bg-blue-100 { background-color: var(--dm-c20); }
html.dark .bg-blue-200 { background-color: var(--dm-c21); }
html.dark .bg-indigo-50 { background-color: var(--dm-c22); }
html.dark .bg-indigo-100 { background-color: var(--dm-c23); }
html.dark .bg-sky-50 { background-color: var(--dm-c24); }
html.dark .bg-sky-100 { background-color: var(--dm-c25); }
html.dark .bg-green-50 { background-color: var(--dm-c26); }
html.dark .bg-green-100 { background-color: var(--dm-c27); }
html.dark .bg-green-200 { background-color: var(--dm-c28); }
html.dark .bg-emerald-50 { background-color: var(--dm-c26); }
html.dark .bg-emerald-100 { background-color: var(--dm-c27); }
html.dark .bg-teal-50 { background-color: var(--dm-c29); }
html.dark .bg-teal-100 { background-color: var(--dm-c30); }
html.dark .bg-yellow-50 { background-color: var(--dm-c31); }
html.dark .bg-yellow-100 { background-color: var(--dm-c32); }
html.dark .bg-yellow-200 { background-color: var(--dm-c33); }
html.dark .bg-amber-50 { background-color: var(--dm-c34); }
html.dark .bg-amber-100 { background-color: var(--dm-c35); }
html.dark .bg-amber-200 { background-color: var(--dm-c36); }
html.dark .bg-orange-50 { background-color: var(--dm-c37); }
html.dark .bg-orange-100 { background-color: var(--dm-c38); }
html.dark .bg-orange-200 { background-color: var(--dm-c39); }
html.dark .bg-purple-50 { background-color: var(--dm-c40); }
html.dark .bg-purple-100 { background-color: var(--dm-c41); }
html.dark .bg-violet-50 { background-color: var(--dm-c40); }
html.dark .bg-violet-100 { background-color: var(--dm-c41); }
html.dark .bg-cyan-50 { background-color: var(--dm-c42); }
html.dark .bg-cd-pink-pale { background-color: var(--dm-c13); }
html.dark .bg-cd-blue-pale { background-color: var(--dm-c19); }
html.dark .bg-cd-orange-pale { background-color: var(--dm-c37); }
html.dark .bg-cd-pink\/10 { background-color: var(--dm-c43); }
html.dark .bg-cd-pink\/20 { background-color: var(--dm-c44); }
html.dark .bg-cd-pink\/5 { background-color: var(--dm-c45); }
html.dark .bg-\[\#e78499\] { background-color: #c06a80; }
html.dark .bg-\[\#d06b82\] { background-color: #a8546a; }
html.dark .hover\:bg-white:hover { background-color: var(--dm-c03); }
html.dark .hover\:bg-slate-50:hover { background-color: var(--dm-c46); }
html.dark .hover\:bg-slate-100:hover { background-color: var(--dm-c03); }
html.dark .hover\:bg-slate-200:hover { background-color: var(--dm-c04); }
html.dark .hover\:bg-slate-300:hover { background-color: var(--dm-c47); }
html.dark .hover\:bg-gray-50:hover { background-color: var(--dm-c46); }
html.dark .hover\:bg-gray-100:hover { background-color: var(--dm-c03); }
html.dark .hover\:bg-gray-200:hover { background-color: var(--dm-c04); }
html.dark .hover\:bg-pink-50:hover { background-color: var(--dm-c14); }
html.dark .hover\:bg-red-50:hover { background-color: var(--dm-c17); }
html.dark .hover\:bg-blue-50:hover { background-color: var(--dm-c48); }
html.dark .hover\:bg-green-200:hover { background-color: var(--dm-c28); }
html.dark .text-slate-400 { color: var(--dm-c49); }
html.dark .text-slate-500 { color: var(--dm-c49); }
html.dark .text-slate-600 { color: var(--dm-c50); }
html.dark .text-slate-700 { color: var(--dm-c51); }
html.dark .text-slate-800 { color: var(--dm-c52); }
html.dark .text-slate-900 { color: var(--dm-c53); }
html.dark .text-gray-400 { color: var(--dm-c49); }
html.dark .text-gray-500 { color: var(--dm-c49); }
html.dark .text-gray-600 { color: var(--dm-c50); }
html.dark .text-gray-700 { color: var(--dm-c51); }
html.dark .text-gray-800 { color: var(--dm-c52); }
html.dark .text-gray-900 { color: var(--dm-c53); }
html.dark .text-white { color: var(--dm-c53); }
html.dark .text-cd-text { color: var(--dm-c54); }
html.dark .text-cd-text-secondary { color: var(--dm-c49); }
html.dark .text-cd-pink { color: #f472b6; }
html.dark .text-cd-blue { color: #7dd3fc; }
html.dark .text-cd-orange { color: #fdba74; }
html.dark .text-cd-purple { color: #c4b5fd; }
html.dark .text-cd-green { color: #86efac; }
html.dark .text-\[\#3d3535\] { color: var(--dm-c54); }
html.dark .text-\[\#7a6466\] { color: var(--dm-c49); }
html.dark .text-\[\#695658\] { color: var(--dm-c49); }
html.dark .text-\[\#e78499\] { color: #f472b6; }
html.dark .text-\[\#85b8d4\] { color: #7dd3fc; }
html.dark .text-blue-500 { color: #60a5fa; }
html.dark .text-blue-600 { color: #60a5fa; }
html.dark .text-blue-700 { color: #93c5fd; }
html.dark .text-blue-800 { color: #93c5fd; }
html.dark .text-green-500 { color: #4ade80; }
html.dark .text-green-600 { color: #4ade80; }
html.dark .text-green-700 { color: #86efac; }
html.dark .text-green-800 { color: #86efac; }
html.dark .text-red-400 { color: #f87171; }
html.dark .text-red-500 { color: #f87171; }
html.dark .text-red-600 { color: #fca5a5; }
html.dark .text-red-700 { color: #fca5a5; }
html.dark .text-pink-200 { color: #f9a8d4; }
html.dark .text-pink-300 { color: #f472b6; }
html.dark .text-pink-400 { color: #f472b6; }
html.dark .text-pink-500 { color: #ec4899; }
html.dark .text-pink-600 { color: #ec4899; }
html.dark .text-pink-700 { color: #f472b6; }
html.dark .text-rose-400 { color: #fb7185; }
html.dark .text-rose-500 { color: #fb7185; }
html.dark .text-rose-600 { color: #fb7185; }
html.dark .text-rose-700 { color: #fda4af; }
html.dark .text-amber-400 { color: #fbbf24; }
html.dark .text-amber-500 { color: #fbbf24; }
html.dark .text-amber-600 { color: #fcd34d; }
html.dark .text-amber-700 { color: #fde68a; }
html.dark .text-amber-800 { color: #fde68a; }
html.dark .text-orange-400 { color: #fb923c; }
html.dark .text-orange-500 { color: #fb923c; }
html.dark .text-orange-600 { color: #fdba74; }
html.dark .text-orange-700 { color: #fed7aa; }
html.dark .text-yellow-300 { color: #fde047; }
html.dark .text-yellow-400 { color: #fde047; }
html.dark .text-yellow-500 { color: #fde047; }
html.dark .text-yellow-600 { color: #fef08a; }
html.dark .text-yellow-700 { color: #fef9c3; }
html.dark .text-indigo-600 { color: #818cf8; }
html.dark .text-indigo-700 { color: #a5b4fc; }
html.dark .text-indigo-800 { color: #a5b4fc; }
html.dark .text-purple-600 { color: #a78bfa; }
html.dark .text-purple-700 { color: #c4b5fd; }
html.dark .text-violet-600 { color: #a78bfa; }
html.dark .text-teal-600 { color: #2dd4bf; }
html.dark .text-teal-700 { color: #5eead4; }
html.dark .text-emerald-600 { color: #34d399; }
html.dark .text-emerald-700 { color: #6ee7b7; }
html.dark .hover\:text-slate-600:hover { color: var(--dm-c50); }
html.dark .hover\:text-slate-700:hover { color: var(--dm-c51); }
html.dark .hover\:text-slate-800:hover { color: var(--dm-c52); }
html.dark .hover\:text-slate-900:hover { color: var(--dm-c53); }
html.dark .hover\:text-gray-600:hover { color: var(--dm-c50); }
html.dark .hover\:text-gray-700:hover { color: var(--dm-c51); }
html.dark .hover\:text-gray-900:hover { color: var(--dm-c53); }
html.dark .hover\:text-blue-700:hover { color: #93c5fd; }
html.dark .hover\:text-blue-800:hover { color: #bfdbfe; }
html.dark .hover\:text-pink-600:hover { color: #f472b6; }
html.dark .hover\:text-red-700:hover { color: #fca5a5; }
html.dark .border-slate-100 { border-color: var(--dm-c55); }
html.dark .border-slate-200 { border-color: var(--dm-c04); }
html.dark .border-slate-300 { border-color: var(--dm-c47); }
html.dark .border-gray-100 { border-color: var(--dm-c55); }
html.dark .border-gray-200 { border-color: var(--dm-c04); }
html.dark .border-gray-300 { border-color: var(--dm-c47); }
html.dark .border-white { border-color: var(--dm-c55); }
html.dark .border-pink-100 { border-color: var(--dm-c14); }
html.dark .border-pink-200 { border-color: var(--dm-c15); }
html.dark .border-pink-300 { border-color: var(--dm-c56); }
html.dark .border-pink-100\/50 { border-color: var(--dm-c57); }
html.dark .border-rose-100 { border-color: var(--dm-c17); }
html.dark .border-rose-200 { border-color: var(--dm-c18); }
html.dark .border-red-200 { border-color: var(--dm-c18); }
html.dark .border-red-300 { border-color: var(--dm-c58); }
html.dark .border-blue-200 { border-color: var(--dm-c21); }
html.dark .border-green-200 { border-color: var(--dm-c28); }
html.dark .border-green-300 { border-color: var(--dm-c59); }
html.dark .border-yellow-200 { border-color: var(--dm-c33); }
html.dark .border-amber-200 { border-color: var(--dm-c36); }
html.dark .border-orange-200 { border-color: var(--dm-c39); }
html.dark .border-indigo-200 { border-color: var(--dm-c23); }
html.dark .border-cd-pink { border-color: var(--dm-c60); }
html.dark .border-cd-pink-light { border-color: var(--dm-c61); }
html.dark .border-\[\#e78499\] { border-color: var(--dm-c60); }
html.dark .border-\[\#e78499\]\/30 { border-color: var(--dm-c62); }
html.dark .border-white\/30 { border-color: var(--dm-c63); }
html.dark .divide-slate-100 > :not(:first-child) { border-color: var(--dm-c55); }
html.dark .divide-slate-200 > :not(:first-child) { border-color: var(--dm-c04); }
html.dark .divide-gray-200 > :not(:first-child) { border-color: var(--dm-c04); }
html.dark .ring-slate-200 { --tw-ring-color: var(--dm-c04); }
html.dark .ring-slate-300 { --tw-ring-color: var(--dm-c47); }
html.dark .ring-gray-200 { --tw-ring-color: var(--dm-c04); }
html.dark .focus\:ring-\[\#e78499\]\/20:focus { --tw-ring-color: rgba(244, 114, 182, 0.2); }
html.dark .focus\:border-\[\#e78499\]:focus { border-color: #f472b6; }
html.dark .shadow-sm { box-shadow: var(--dm-c64); }
html.dark .shadow { box-shadow: var(--dm-c65); }
html.dark .shadow-md { box-shadow: var(--dm-c66); }
html.dark .shadow-lg { box-shadow: var(--dm-c67); }
html.dark .shadow-xl { box-shadow: var(--dm-c68); }
html.dark .shadow-inner { box-shadow: var(--dm-c69); }
html.dark .hover\:shadow:hover { box-shadow: var(--dm-c65); }
html.dark .hover\:shadow-md:hover { box-shadow: var(--dm-c66); }
html.dark .hover\:shadow-lg:hover { box-shadow: var(--dm-c67); }
html.dark .from-white { --tw-gradient-from: var(--dm-c01); }
html.dark .from-slate-50 { --tw-gradient-from: var(--dm-c02); }
html.dark .from-pink-50 { --tw-gradient-from: var(--dm-c13); }
html.dark .from-pink-100 { --tw-gradient-from: var(--dm-c14); }
html.dark .from-rose-50 { --tw-gradient-from: var(--dm-c16); }
html.dark .from-rose-100 { --tw-gradient-from: var(--dm-c17); }
html.dark .from-red-50 { --tw-gradient-from: var(--dm-c16); }
html.dark .from-emerald-50 { --tw-gradient-from: var(--dm-c26); }
html.dark .from-emerald-100 { --tw-gradient-from: var(--dm-c27); }
html.dark .from-blue-50 { --tw-gradient-from: var(--dm-c19); }
html.dark .from-blue-100 { --tw-gradient-from: var(--dm-c20); }
html.dark .from-blue-200 { --tw-gradient-from: var(--dm-c21); }
html.dark .from-sky-50 { --tw-gradient-from: var(--dm-c24); }
html.dark .from-sky-100 { --tw-gradient-from: var(--dm-c25); }
html.dark .from-sky-300 { --tw-gradient-from: var(--dm-c70); }
html.dark .from-indigo-50 { --tw-gradient-from: var(--dm-c22); }
html.dark .from-indigo-100 { --tw-gradient-from: var(--dm-c23); }
html.dark .from-violet-50 { --tw-gradient-from: var(--dm-c40); }
html.dark .from-violet-100 { --tw-gradient-from: var(--dm-c41); }
html.dark .from-purple-50 { --tw-gradient-from: var(--dm-c40); }
html.dark .from-purple-100 { --tw-gradient-from: var(--dm-c41); }
html.dark .from-purple-200 { --tw-gradient-from: var(--dm-c71); }
html.dark .from-teal-50 { --tw-gradient-from: var(--dm-c29); }
html.dark .from-teal-100 { --tw-gradient-from: var(--dm-c30); }
html.dark .from-cyan-50 { --tw-gradient-from: var(--dm-c42); }
html.dark .from-green-50 { --tw-gradient-from: var(--dm-c26); }
html.dark .from-green-100 { --tw-gradient-from: var(--dm-c27); }
html.dark .from-yellow-50 { --tw-gradient-from: var(--dm-c31); }
html.dark .from-amber-50 { --tw-gradient-from: var(--dm-c34); }
html.dark .from-orange-50 { --tw-gradient-from: var(--dm-c37); }
html.dark .to-white { --tw-gradient-to: var(--dm-c01); }
html.dark .to-slate-50 { --tw-gradient-to: var(--dm-c02); }
html.dark .to-pink-50 { --tw-gradient-to: var(--dm-c13); }
html.dark .to-pink-100 { --tw-gradient-to: var(--dm-c14); }
html.dark .to-rose-50 { --tw-gradient-to: var(--dm-c16); }
html.dark .to-rose-100 { --tw-gradient-to: var(--dm-c17); }
html.dark .to-purple-50 { --tw-gradient-to: var(--dm-c40); }
html.dark .to-purple-100 { --tw-gradient-to: var(--dm-c41); }
html.dark .to-purple-200 { --tw-gradient-to: var(--dm-c71); }
html.dark .to-teal-50 { --tw-gradient-to: var(--dm-c29); }
html.dark .to-teal-100 { --tw-gradient-to: var(--dm-c30); }
html.dark .to-teal-200 { --tw-gradient-to: var(--dm-c72); }
html.dark .to-orange-50 { --tw-gradient-to: var(--dm-c37); }
html.dark .to-blue-50 { --tw-gradient-to: var(--dm-c19); }
html.dark .to-blue-100 { --tw-gradient-to: var(--dm-c20); }
html.dark .to-blue-200 { --tw-gradient-to: var(--dm-c21); }
html.dark .to-sky-50 { --tw-gradient-to: var(--dm-c24); }
html.dark .to-sky-100 { --tw-gradient-to: var(--dm-c25); }
html.dark .to-indigo-50 { --tw-gradient-to: var(--dm-c22); }
html.dark .to-indigo-100 { --tw-gradient-to: var(--dm-c23); }
html.dark .to-indigo-200 { --tw-gradient-to: var(--dm-c73); }
html.dark .to-violet-50 { --tw-gradient-to: var(--dm-c40); }
html.dark .to-violet-100 { --tw-gradient-to: var(--dm-c41); }
html.dark .to-emerald-50 { --tw-gradient-to: var(--dm-c26); }
html.dark .to-emerald-100 { --tw-gradient-to: var(--dm-c27); }
html.dark .to-green-50 { --tw-gradient-to: var(--dm-c26); }
html.dark .to-cyan-50 { --tw-gradient-to: var(--dm-c42); }
html.dark .to-cyan-200 { --tw-gradient-to: var(--dm-c74); }
html.dark .to-yellow-50 { --tw-gradient-to: var(--dm-c31); }
html.dark .to-amber-50 { --tw-gradient-to: var(--dm-c34); }
html.dark .to-transparent { --tw-gradient-to: transparent; }
html.dark .via-white { --tw-gradient-via: var(--dm-c01); }
html.dark .via-rose-50 { --tw-gradient-via: var(--dm-c16); }
html.dark .via-pink-50 { --tw-gradient-via: var(--dm-c13); }
html.dark .via-blue-50 { --tw-gradient-via: var(--dm-c19); }
html.dark .via-purple-50 { --tw-gradient-via: var(--dm-c40); }
html.dark .via-violet-50 { --tw-gradient-via: var(--dm-c40); }
html.dark .via-sky-50 { --tw-gradient-via: var(--dm-c24); }
html.dark .via-teal-50 { --tw-gradient-via: var(--dm-c29); }
html.dark .via-emerald-50 { --tw-gradient-via: var(--dm-c26); }
html.dark .via-indigo-50 { --tw-gradient-via: var(--dm-c22); }
html.dark .placeholder-slate-400::placeholder { color: var(--dm-c75); }
html.dark .placeholder\:text-slate-400::placeholder { color: var(--dm-c75); }
html.dark .placeholder\:text-gray-400::placeholder { color: var(--dm-c75); }
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html.dark select,
html.dark textarea { background-color: var(--dm-c02); color: var(--dm-c54); border-color: var(--dm-c76); }
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus,
html.dark select:focus,
html.dark textarea:focus { border-color: #e78499; }
html.dark th { color: var(--dm-c54); }
html.dark td { color: var(--dm-c50); }
html.dark tr:hover { background-color: #1e293b; }
html.dark .cp-onboarding.driver-popover { background: var(--dm-c01); border-color: var(--dm-c76); box-shadow: var(--dm-c77); }
html.dark .cp-onboarding .driver-popover-description { color: var(--dm-c54); }
html.dark .cp-onboarding .driver-popover-prev-btn { color: var(--dm-c49); border-color: var(--dm-c76); }
html.dark .cp-onboarding .driver-popover-prev-btn:hover { background: var(--dm-c03); color: var(--dm-c54); }
html.dark .prose { --tw-prose-body: var(--dm-c78); --tw-prose-headings: var(--dm-c79); --tw-prose-lead: var(--dm-c80); --tw-prose-links: var(--dm-c81); --tw-prose-bold: var(--dm-c79); --tw-prose-counters: var(--dm-c80); --tw-prose-bullets: var(--dm-c82); --tw-prose-hr: var(--dm-c76); --tw-prose-quotes: var(--dm-c54); --tw-prose-quote-borders: var(--dm-c81); --tw-prose-captions: var(--dm-c80); --tw-prose-code: var(--dm-c79); --tw-prose-pre-code: var(--dm-c54); --tw-prose-pre-bg: var(--dm-c02); --tw-prose-th-borders: var(--dm-c76); --tw-prose-td-borders: var(--dm-c46); }
html.dark .prose :where(h2):not(:where([class~="not-prose"] *)) { border-color: var(--dm-c83); }
html.dark .prose :where(blockquote):not(:where([class~="not-prose"] *)) { background-color: var(--dm-c84); }
html.dark .prose :where(figcaption):not(:where([class~="not-prose"] *)) { color: var(--dm-c80); }

/* ==========================================================================
   #2254 ダークモード可読性監査の追加分
   上書きマップ未収録だった任意HEX・漏れシェードをダーク化する。
   ========================================================================== */

/* --- 未収録の淡色HEX背景 (ダークで白く浮くのを防ぐ。色相を保った暗色面へ) --- */
html.dark .bg-\[\#f0ecf9\] { background-color: var(--dm-c85); }
html.dark .bg-\[\#f3eef9\] { background-color: var(--dm-c85); }
html.dark .bg-\[\#faf8ff\] { background-color: var(--dm-c85); }
html.dark .bg-\[\#fae8ff\] { background-color: var(--dm-c85); }
html.dark .bg-\[\#f3edee\] { background-color: var(--dm-c13); }
html.dark .bg-\[\#fde8ee\] { background-color: var(--dm-c13); }
html.dark .bg-\[\#faf4f6\] { background-color: var(--dm-c13); }
html.dark .bg-\[\#fdf2f5\] { background-color: var(--dm-c13); }
html.dark .bg-\[\#fff5f5\] { background-color: var(--dm-c16); }
html.dark .bg-\[\#f8a8b8\] { background-color: var(--dm-c15); }
html.dark .bg-\[\#e8f5ef\] { background-color: var(--dm-c26); }
html.dark .bg-\[\#f0fdf4\] { background-color: var(--dm-c26); }
html.dark .bg-\[\#9cd4b4\] { background-color: var(--dm-c28); }
html.dark .bg-\[\#fafbfc\] { background-color: var(--dm-c01); }
html.dark .bg-\[\#f0f2f5\] { background-color: var(--dm-c01); }
html.dark .bg-\[\#faf7f5\] { background-color: var(--dm-c01); }
html.dark .bg-\[\#e3e3e3\] { background-color: var(--dm-c03); }
html.dark .bg-\[\#f7d088\] { background-color: var(--dm-c35); }
html.dark .bg-\[\#6a9cb8\] { background-color: var(--dm-c48); }
html.dark .bg-\[\#d4637a\] { background-color: #a8546a; }
html.dark .bg-\[\#d4738a\] { background-color: #a8546a; }

/* --- 未収録のHEXグラデーション端点 --- */
html.dark .from-\[\#faf8ff\] { --tw-gradient-from: var(--dm-c85); }
html.dark .from-\[\#fff5f7\] { --tw-gradient-from: var(--dm-c13); }
html.dark .to-\[\#f5f0ff\] { --tw-gradient-to: var(--dm-c85); }
html.dark .to-\[\#f0ebff\] { --tw-gradient-to: var(--dm-c85); }
html.dark .to-\[\#f5eef8\] { --tw-gradient-to: var(--dm-c85); }
html.dark .from-cd-pink-pale { --tw-gradient-from: var(--dm-c13); }
html.dark .to-cd-pink-pale { --tw-gradient-to: var(--dm-c13); }

/* --- 未収録のHEX枠線 (淡色ハイライト線→暗背景で見える暗色枠へ統一) --- */
html.dark .border-\[\#f5eef0\],
html.dark .border-\[\#f8fafc\],
html.dark .border-\[\#ece0e3\],
html.dark .border-\[\#f0d8de\],
html.dark .border-\[\#f0e2e6\],
html.dark .border-\[\#f0e6e3\],
html.dark .border-\[\#f0e6e9\],
html.dark .border-\[\#f1e6e9\],
html.dark .border-\[\#f3dfe4\],
html.dark .border-\[\#f3e5e9\],
html.dark .border-\[\#f5ebed\],
html.dark .border-\[\#f6d6de\],
html.dark .border-\[\#f6dde3\],
html.dark .border-\[\#f6e4d6\],
html.dark .border-\[\#f8d8e1\],
html.dark .border-\[\#f9e4ea\],
html.dark .border-\[\#d3e6f2\],
html.dark .border-\[\#c8a4a5\] { border-color: var(--dm-c55); }

/* --- 未収録のHEX文字色 (暗背景で読める明色へ。色相は維持) --- */
html.dark .text-\[\#6d5bab\],
html.dark .text-\[\#7c6db8\],
html.dark .text-\[\#8b7bc7\],
html.dark .text-\[\#8a6ec0\],
html.dark .text-\[\#a094c2\] { color: #c4b5fd; }
html.dark .text-\[\#86198f\] { color: #e879f9; }
html.dark .text-\[\#4a4158\] { color: var(--dm-c54); }
html.dark .text-\[\#d85c6f\],
html.dark .text-\[\#d06578\],
html.dark .text-\[\#d4718a\],
html.dark .text-\[\#d4738a\],
html.dark .text-\[\#c64966\] { color: #f472b6; }
html.dark .text-\[\#c79da5\] { color: #f9a8d4; }
html.dark .text-\[\#4a7a9e\],
html.dark .text-\[\#6a9ab8\] { color: #7dd3fc; }
html.dark .text-\[\#c87a4a\],
html.dark .text-\[\#c9824f\] { color: #fdba74; }
html.dark .text-\[\#5a9a75\] { color: #86efac; }
html.dark .text-\[\#22c55e\] { color: #4ade80; }
html.dark .text-\[\#a18d91\],
html.dark .text-\[\#98868a\],
html.dark .text-\[\#b3a1a5\],
html.dark .text-\[\#cbbcbf\],
html.dark .text-\[\#cbb6ba\],
html.dark .text-\[\#c8a4a5\] { color: var(--dm-c49); }
html.dark .hover\:text-\[\#d85c6f\]:hover,
html.dark .hover\:text-\[\#d06578\]:hover,
html.dark .hover\:text-\[\#d4718a\]:hover { color: #f472b6; }
html.dark .hover\:text-\[\#6a9ab8\]:hover,
html.dark .hover\:text-\[\#6a9cb8\]:hover { color: #7dd3fc; }

/* --- 未収録の色シェード/ファミリ --- */
html.dark .text-emerald-500 { color: #34d399; }
html.dark .text-violet-500 { color: #a78bfa; }
html.dark .bg-emerald-500\/10 { background-color: var(--dm-c26); }
html.dark .border-emerald-200 { border-color: var(--dm-c28); }
html.dark .border-slate-500 { border-color: var(--dm-c04); }
html.dark .bg-slate-700\/10 { background-color: var(--dm-c03); }
html.dark .hover\:bg-yellow-200:hover { background-color: var(--dm-c33); }
html.dark .hover\:bg-red-100:hover { background-color: var(--dm-c17); }
html.dark .hover\:bg-blue-100:hover { background-color: var(--dm-c20); }

/* --- カテゴリC: Rechartsチャートのグリッド線/軸 (SVG presentation属性はCSSのstrokeで上書き可能) --- */
html.dark .recharts-cartesian-grid line { stroke: var(--dm-c03); }
html.dark .recharts-cartesian-axis-line { stroke: var(--dm-c04); }

/* --- カテゴリC: グラデの不透明度修飾子付きユーティリティ(淡色)を暗色化 ---
   from-white/80 や via-pink-50/10 等は不透明度付きで上書きマップ未収録だった。
   両端が暗色になる一方この中間色だけライトのまま残り「暗→淡色→暗」の変な帯になるため、
   基底色と同じ --dm-* に合わせる。濃色(*-500/90)は視認可なので据え置き。 */
html.dark .from-white\/80 { --tw-gradient-from: var(--dm-c01); }
html.dark .from-pink-50\/60,
html.dark .from-pink-50\/50 { --tw-gradient-from: var(--dm-c13); }
html.dark .from-rose-50\/50 { --tw-gradient-from: var(--dm-c16); }
html.dark .from-purple-50\/50,
html.dark .from-violet-50\/50 { --tw-gradient-from: var(--dm-c40); }
html.dark .from-emerald-50\/50,
html.dark .from-emerald-50\/70 { --tw-gradient-from: var(--dm-c26); }
html.dark .from-sky-50\/60 { --tw-gradient-from: var(--dm-c24); }
html.dark .from-orange-50\/40 { --tw-gradient-from: var(--dm-c37); }
html.dark .from-cd-pink\/5 { --tw-gradient-from: var(--dm-c45); }
html.dark .from-cd-purple\/10 { --tw-gradient-from: var(--dm-c40); }
html.dark .via-pink-50\/10 { --tw-gradient-via: var(--dm-c13); }
html.dark .via-pink-100\/50 { --tw-gradient-via: var(--dm-c14); }
html.dark .via-cd-pink-pale\/30 { --tw-gradient-via: var(--dm-c13); }
html.dark .to-purple-50\/30 { --tw-gradient-to: var(--dm-c40); }
html.dark .to-teal-50\/50 { --tw-gradient-to: var(--dm-c29); }
html.dark .to-pink-50\/40 { --tw-gradient-to: var(--dm-c13); }
html.dark .to-blue-50\/40 { --tw-gradient-to: var(--dm-c19); }

/* --- カテゴリA: タブ/セグメントのアクティブ指標 ---
   bg-white は html.dark で #1e293b に固定されコンテナ(bg-slate-100/gray-100=#1e293b)と
   同化する。アクティブピルに cp-seg-active を付与し、ここ(ファイル末尾=同詳細度なら後勝ち)で
   コンテナより明るい面＋インセットの薄いリングで縁を明示し、ピルを確実に浮き上がらせる
   (OLEDでは背景差が小さいためリングが効く)。ライトモードには影響しない。 */
html.dark .cp-seg-active { background-color: var(--dm-c47); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }