/* /static/theme-light.css - ライトモード洗練テーマ v2
   基調: オレンジ (#f28c00) + グリーン (#6fa000)
   設計思想:
   - オレンジ = アクション、アクセント、CTA
   - グリーン = 装飾、サブアクセント、完了状態
   - グレー系 = テキスト、ボーダー、背景
   - 見出し背景は全て統一的な soft green (#eef6d6)
   - ボーダーは3段階のみ使用し一貫性を持たせる
*/

/* =============================================
   1. カラーパレット（デザイントークン上書き）
   ============================================= */
[data-theme="light"] {
    /* === 背景色 === */
    --bg: #f7f8fa;
    --card: #ffffff;
    --pill: #f2f3f6;

    /* === テキスト色 — WCAG AA 準拠 === */
    --fg: #1a1d23;
    --muted: #555d6b;

    /* === メインアクセント — オレンジ（鮮やか） === */
    --acc: #ff8800;
    --acc-light: #ffab40;
    --acc-hover: #e67700;
    --acc-soft: rgba(255, 136, 0, 0.08);
    --acc-border: rgba(255, 136, 0, 0.28);

    /* === サブアクセント — グリーン（ビビッドライム） === */
    --green: #7fbf00;
    --green-light: #9adf00;
    --green-soft: #DEFB8E;
    --green-border: rgba(127, 191, 0, 0.4);

    /* === 見出し背景 — ライムグリーン === */
    --heading-bg: #DEFB8E;
    --heading-border: #a8e600;

    /* === 状態色 === */
    --red: #e53935;
    --yellow: #f5a623;
    --orange: #ff8800;
    --orange-light: #ffab40;
    --orange-hover: #e67700;

    /* === バッジ === */
    --badge-bg: #eceef2;
    --badge-ai: #ff8800;
    --badge-assumed: #e09800;
    --badge-db: #0095b8;

    /* === ボーダー（3段階のみ） === */
    --border-light: rgba(0, 0, 0, 0.06);
    --border-medium: rgba(0, 0, 0, 0.12);
    --border-heavy: rgba(0, 0, 0, 0.20);

    /* === シャドウ（より立体的に） === */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.04);
}

/* =============================================
   2. 基本レイアウト
   ============================================= */
[data-theme="light"] body {
    background: var(--bg);
    color: var(--fg);
}

/* =============================================
   3. ナビゲーション
   ============================================= */
[data-theme="light"] .fixed-nav {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-medium);
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .nav-title {
    color: var(--orange) !important;
}

[data-theme="light"] .nav-title .nav-icon {
    color: var(--green);
}

[data-theme="light"] .nav-btn {
    background: var(--pill);
    color: var(--fg);
    border: 1px solid var(--border-medium);
}

[data-theme="light"] .nav-btn .nav-icon {
    color: var(--acc);
}

[data-theme="light"] .nav-btn:hover {
    background: #e6e8ec;
    border-color: var(--acc);
    box-shadow: 0 2px 6px rgba(255, 136, 0, 0.15);
}

[data-theme="light"] .nav-btn:hover .nav-icon {
    color: var(--green);
}

[data-theme="light"] .nav-btn.active {
    border-color: var(--orange);
    color: var(--orange);
    background: var(--acc-soft);
    box-shadow: 0 0 0 3px rgba(255, 136, 0, 0.1);
}

[data-theme="light"] .nav-btn.active .nav-icon {
    color: var(--green);
}

/* アイコン色 — ライトモード（背景色との対比） */
[data-theme="light"] .icon {
    color: var(--orange);
}

[data-theme="light"] .card-title .icon,
[data-theme="light"] .accordion-header .icon,
[data-theme="light"] .main-title .icon,
[data-theme="light"] .section-title .icon {
    color: var(--orange);
}

[data-theme="light"] .stat-icon .icon {
    color: var(--orange);
}

/* ボタン内のアイコンはボタンのテキスト色を継承 */
[data-theme="light"] .btn .icon,
[data-theme="light"] .btn-primary .icon,
[data-theme="light"] .btn-secondary .icon,
[data-theme="light"] button[class] .icon {
    color: inherit !important;
}

/* =============================================
   4. カード & コンテナ
   ============================================= */
[data-theme="light"] .card {
    background: var(--card);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .stat-card {
    background: var(--card);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
}

/* =============================================
   5. 見出し — 統一デザイン
   背景: 淡いグリーン (#eef6d6)
   左ボーダー: グリーンアクセント (#b5d44c)
   テキスト: ダーク (#1a1d23)
   ============================================= */

/* h2 — セクション見出し */
[data-theme="light"] h2 {
    color: var(--fg);
    font-weight: 700;
    background: var(--heading-bg);
    padding: 10px 16px;
    border-left: 4px solid var(--heading-border);
    border-radius: 0 8px 8px 0;
    margin-left: -8px;
    margin-right: -8px;
}

/* h3 — サブ見出し */
[data-theme="light"] h3 {
    color: var(--fg);
    font-weight: 600;
    background: var(--heading-bg);
    padding: 8px 14px;
    border-left: 3px solid var(--heading-border);
    border-radius: 0 6px 6px 0;
    margin-left: -6px;
    margin-right: -6px;
}

/* カードタイトル */
[data-theme="light"] .card-title {
    color: var(--fg);
    font-weight: 600;
    background: var(--heading-bg);
    padding: 8px 14px;
    border-left: 3px solid var(--heading-border);
    border-radius: 0 6px 6px 0;
}

/* セクションタイトル（ダッシュボード） */
[data-theme="light"] .section-title {
    color: var(--fg);
    font-weight: 700;
    background: var(--heading-bg);
    padding: 10px 16px;
    border-left: 4px solid var(--heading-border);
    border-radius: 0 8px 8px 0;
}

/* モーダルセクションタイトル */
[data-theme="light"] .modal-section-title {
    color: var(--fg);
    font-weight: 700;
    background: var(--heading-bg);
    padding: 10px 16px;
    border-left: 4px solid var(--heading-border);
    border-radius: 0 8px 8px 0;
    margin-left: -8px;
    margin-right: -8px;
}

/* メインタイトル */
[data-theme="light"] .main-title {
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: var(--orange);
    background-clip: unset;
    color: var(--orange);
    font-weight: 700;
}

/* =============================================
   6. アップロード / 写真撮影
   ============================================= */
[data-theme="light"] .upload-box {
    border: 2px dashed var(--border-heavy);
    background: var(--pill);
}

[data-theme="light"] .upload-box:hover,
[data-theme="light"] .upload-box.dragover {
    border-color: var(--acc);
    background: var(--acc-soft);
}

/* =============================================
   7. ボタン
   ============================================= */

/* プライマリ（撮影・送信） */
[data-theme="light"] .btn-camera {
    background: linear-gradient(135deg, var(--acc), var(--acc-light));
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(255, 136, 0, 0.25);
}

[data-theme="light"] .btn-camera:hover {
    background: linear-gradient(135deg, var(--acc-hover), var(--acc));
    box-shadow: 0 4px 16px rgba(255, 136, 0, 0.35);
}

/* セカンダリ */
[data-theme="light"] .btn-secondary {
    background: var(--pill);
    color: var(--fg);
    border: 1px solid var(--border-medium);
}

[data-theme="light"] .btn-secondary:hover {
    background: #e6e8ec;
    border-color: var(--border-heavy);
}

/* ドリンク追加ボタン */
[data-theme="light"] .add-drink-btn {
    background: linear-gradient(135deg, var(--acc), var(--acc-light));
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(255, 136, 0, 0.2);
}

[data-theme="light"] .add-drink-btn:hover {
    background: linear-gradient(135deg, var(--acc-hover), var(--acc));
    box-shadow: 0 4px 14px rgba(255, 136, 0, 0.35);
}

/* 砂糖量ボタン */
[data-theme="light"] .sugar-btn {
    background: linear-gradient(135deg, var(--acc), var(--acc-light));
    color: #ffffff;
    font-weight: 600;
}

[data-theme="light"] .sugar-btn:hover {
    box-shadow: 0 3px 10px rgba(255, 136, 0, 0.35);
}

/* 食材追加ボタン */
[data-theme="light"] .add-ingredient-btn {
    background: var(--green);
    color: #ffffff;
}

[data-theme="light"] .add-ingredient-btn:hover {
    background: #5d8800;
}

/* 保存ボタン */
[data-theme="light"] .save-changes-btn {
    background: var(--acc);
    color: #ffffff;
}

[data-theme="light"] .save-changes-btn:hover {
    background: var(--acc-hover);
}

/* キャンセルボタン */
[data-theme="light"] .btn-cancel-record {
    background: transparent;
    color: #9ca3af;
    border: none;
}

[data-theme="light"] .btn-cancel-record:hover {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.06);
}

/* =============================================
   8. プログレス表示
   ============================================= */
[data-theme="light"] .progress-ring-circle {
    stroke: var(--pill);
}

[data-theme="light"] .progress-ring-fill {
    stroke: var(--acc);
}

[data-theme="light"] .progress-text {
    color: var(--orange);
}

/* ステージ（認識中） */
[data-theme="light"] .stage-item {
    background: var(--pill);
    border: 1px solid var(--border-light);
}

[data-theme="light"] .stage-item.active {
    border-color: var(--green-border);
    background: var(--green-soft);
}

[data-theme="light"] .stage-item.completed {
    border-color: var(--green);
    background: var(--green-soft);
    box-shadow: 0 0 0 3px rgba(111, 160, 0, 0.1);
}

/* =============================================
   9. アコーディオン — 統一見出しスタイル
   ============================================= */
[data-theme="light"] .accordion-section {
    background: var(--card);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-xs);
}

[data-theme="light"] .accordion-header,
[data-theme="light"] .accordion-section.empty .accordion-header,
[data-theme="light"] .accordion-section.filled .accordion-header {
    background: var(--heading-bg) !important;
    border-bottom: 2px solid var(--heading-border) !important;
    color: var(--fg) !important;
}

[data-theme="light"] .accordion-header:hover,
[data-theme="light"] .accordion-section.empty .accordion-header:hover,
[data-theme="light"] .accordion-section.filled .accordion-header:hover {
    background: #e6f0c8 !important;
}

[data-theme="light"] .accordion-badge {
    background: rgba(0, 0, 0, 0.06);
    color: var(--muted);
}

[data-theme="light"] .accordion-section.filled .accordion-badge {
    background: rgba(255, 136, 0, 0.12);
    color: var(--orange);
    font-weight: 600;
}

/* =============================================
   10. 食事入力UI
   ============================================= */

/* 食事タイプボタン */
[data-theme="light"] .meal-type-btn {
    background: var(--pill);
    border: 2px solid var(--border-medium);
    color: var(--fg);
}

[data-theme="light"] .meal-type-btn:hover {
    border-color: var(--acc);
    background: var(--acc-soft);
}

[data-theme="light"] .meal-type-btn.active {
    border-color: var(--orange);
    background: rgba(255, 136, 0, 0.1);
    color: var(--orange);
    box-shadow: 0 0 0 3px rgba(255, 136, 0, 0.1);
    font-weight: 600;
}

/* スライダー */
[data-theme="light"] .consumed-slider {
    background: linear-gradient(to right,
            rgba(217, 48, 37, 0.15) 0%,
            rgba(240, 165, 0, 0.15) 50%,
            rgba(111, 160, 0, 0.18) 100%);
}

[data-theme="light"] .consumed-slider::-webkit-slider-thumb {
    background: var(--acc);
    box-shadow: 0 2px 8px rgba(255, 136, 0, 0.35);
}

[data-theme="light"] .consumed-slider::-moz-range-thumb {
    background: var(--acc);
    box-shadow: 0 2px 8px rgba(255, 136, 0, 0.35);
}

[data-theme="light"] .consumed-display {
    background: var(--acc-soft);
}

/* ドリンクアイテム */
[data-theme="light"] .drink-item {
    background: var(--pill);
    border: 1px solid var(--border-light);
}

[data-theme="light"] .drink-type-item {
    background: var(--card);
    border: 2px solid var(--border-medium);
}

[data-theme="light"] .drink-type-item:hover {
    border-color: var(--acc);
}

[data-theme="light"] .drink-type-item.selected {
    border-color: var(--acc);
    background: var(--acc-soft);
}

[data-theme="light"] .drink-volume-btn {
    background: var(--card);
    border: 2px solid var(--border-medium);
    color: var(--fg);
}

[data-theme="light"] .drink-volume-btn:hover {
    border-color: var(--acc);
}

[data-theme="light"] .drink-volume-btn.selected {
    border-color: var(--orange);
    background: rgba(255, 136, 0, 0.08);
    color: var(--orange);
}

/* 入力フィールド */
[data-theme="light"] .custom-input {
    background: #ffffff;
    border: 1px solid var(--border-medium);
    color: var(--fg);
}

[data-theme="light"] .custom-input:focus {
    border-color: var(--acc);
    box-shadow: 0 0 0 3px rgba(255, 136, 0, 0.08);
}

[data-theme="light"] .sugar-input {
    background: #ffffff;
    border: 1px solid var(--border-medium);
    color: var(--fg);
}

[data-theme="light"] .sugar-input:focus {
    border-color: var(--acc);
}

/* 乳製品アイテム */
[data-theme="light"] .dairy-product-item {
    background: var(--card);
    border: 2px solid var(--border-medium);
}

[data-theme="light"] .dairy-product-item:hover {
    border-color: var(--acc);
}

[data-theme="light"] .dairy-product-item.selected {
    border-color: var(--acc);
    background: var(--acc-soft);
}

[data-theme="light"] .dairy-product-item:focus-within {
    box-shadow: 0 0 0 3px rgba(255, 136, 0, 0.08);
}

/* 使用理由 */
[data-theme="light"] .usage-reason-item {
    background: var(--card);
    border: 2px solid var(--border-medium);
}

[data-theme="light"] .usage-reason-item:hover {
    border-color: var(--acc);
}

[data-theme="light"] .usage-reason-item.selected {
    border-color: var(--acc);
    background: var(--acc-soft);
}

/* ジュースサブタイプ */
[data-theme="light"] .juice-subtype-btn.selected {
    background: rgba(255, 136, 0, 0.12);
}

[data-theme="light"] .juice-subtype-btn:hover {
    background: var(--acc-soft);
}

/* 削除ボタン */
[data-theme="light"] .drink-remove-btn {
    background: rgba(217, 48, 37, 0.06);
    color: var(--red);
    border: 1px solid rgba(217, 48, 37, 0.2);
}

[data-theme="light"] .drink-remove-btn:hover {
    background: rgba(217, 48, 37, 0.12);
}

[data-theme="light"] .drink-item:focus-within {
    box-shadow: 0 0 0 3px rgba(255, 136, 0, 0.08);
}

/* =============================================
   11. レコード一覧
   ============================================= */
[data-theme="light"] .record-item {
    background: var(--card);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-xs);
}

[data-theme="light"] .record-item:hover {
    border-color: var(--acc-border);
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .record-title {
    color: var(--fg) !important;
}

[data-theme="light"] .record-meta {
    color: var(--muted) !important;
}

[data-theme="light"] .record-image {
    border: 1px solid var(--border-medium);
}

[data-theme="light"] .record-image:hover {
    box-shadow: 0 3px 10px rgba(255, 136, 0, 0.25);
    border-color: var(--acc);
}

[data-theme="light"] .nutrition-pill {
    background: rgba(255, 136, 0, 0.08);
    color: var(--orange);
    border: 1px solid var(--acc-border);
    font-weight: 600;
}

/* =============================================
   12. チャート・タブ
   ============================================= */
[data-theme="light"] .chart-tab {
    background: var(--pill);
    border: 1px solid var(--border-medium);
    color: var(--fg);
}

[data-theme="light"] .chart-tab:hover {
    background: var(--acc-soft);
    border-color: var(--acc);
}

[data-theme="light"] .chart-tab.active {
    background: rgba(255, 136, 0, 0.1);
    border-color: var(--orange);
    color: var(--orange);
    font-weight: 600;
}

[data-theme="light"] .chart-main-tab.active {
    color: var(--orange);
    border-bottom-color: var(--orange);
}

[data-theme="light"] .stats-toggle-tab.active {
    color: var(--orange);
    border-bottom-color: var(--orange);
}

/* カロリー配分チャート */
[data-theme="light"] .dist-bar-track {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .dist-total-row {
    border-top-color: var(--border-light);
}

[data-theme="light"] .dist-ideal-line {
    background: rgba(0, 0, 0, 0.25);
}

/* =============================================
   13. ページネーション
   ============================================= */
[data-theme="light"] .pagination-btn {
    background: var(--pill);
    border: 1px solid var(--border-medium);
    color: var(--fg);
}

[data-theme="light"] .pagination-btn:hover {
    background: var(--acc-soft);
    border-color: var(--acc);
}

[data-theme="light"] .pagination-btn.active {
    background: var(--acc);
    border-color: var(--acc);
    color: #ffffff;
    font-weight: 700;
}

/* =============================================
   14. モーダル
   ============================================= */
[data-theme="light"] .modal {
    background: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .modal-content {
    background: #ffffff;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-lg);
}

[data-theme="light"] .modal-header {
    border-bottom: 1px solid var(--border-light);
}

[data-theme="light"] .modal-close {
    background: var(--pill);
    border: 1px solid var(--border-medium);
    color: var(--muted);
}

[data-theme="light"] .modal-close:hover {
    background: #e6e8ec;
    color: var(--fg);
}

[data-theme="light"] .modal-edit-btn {
    background: var(--acc);
    color: #ffffff;
    font-weight: 600;
}

[data-theme="light"] .modal-edit-btn:hover {
    background: var(--acc-hover);
}

[data-theme="light"] .modal-edit-btn.editing {
    background: var(--orange);
    color: #ffffff;
}

[data-theme="light"] .modal-delete-btn {
    background: rgba(217, 48, 37, 0.05);
    color: var(--red);
    border: 1px solid rgba(217, 48, 37, 0.2);
}

[data-theme="light"] .modal-delete-btn:hover {
    background: rgba(217, 48, 37, 0.1);
    border-color: var(--red);
}

[data-theme="light"] .modal-info-item {
    background: var(--pill);
    border: 1px solid var(--border-light);
}

[data-theme="light"] .modal-tag {
    background: rgba(255, 136, 0, 0.08);
    color: var(--orange);
    border: 1px solid var(--acc-border);
}

[data-theme="light"] .modal-image {
    background: #ffffff;
}

/* =============================================
   15. テーブル
   ============================================= */
[data-theme="light"] .edit-table th {
    background: var(--heading-bg);
    color: var(--fg);
    font-weight: 600;
}

[data-theme="light"] .edit-table th,
[data-theme="light"] .edit-table td {
    border-bottom: 1px solid var(--border-light);
}

[data-theme="light"] .edit-table input {
    background: #ffffff;
    border: 1px solid var(--border-medium);
    color: var(--fg);
}

[data-theme="light"] .edit-table input:focus {
    border-color: var(--acc);
    box-shadow: 0 0 0 3px rgba(255, 136, 0, 0.08);
}

[data-theme="light"] .dish-name-input {
    background: var(--pill);
    border: 1px solid var(--border-medium);
    color: var(--fg);
}

[data-theme="light"] .dish-name-input:focus {
    border-color: var(--acc);
    box-shadow: 0 0 0 3px rgba(255, 136, 0, 0.08);
}

[data-theme="light"] .edit-table .delete-btn {
    background: rgba(217, 48, 37, 0.06);
    color: var(--red);
    border: 1px solid rgba(217, 48, 37, 0.2);
}

[data-theme="light"] .edit-table .delete-btn:hover {
    background: rgba(217, 48, 37, 0.12);
    border-color: var(--red);
}

/* =============================================
   16. カレンダー
   ============================================= */
[data-theme="light"] .cal-date-input {
    background: var(--pill);
    color: var(--fg);
    border: 1px solid var(--border-medium);
}

[data-theme="light"] .cal-nav-btn {
    background: var(--pill);
    color: var(--fg);
    border: 1px solid var(--border-medium);
}

[data-theme="light"] .cal-nav-btn:hover {
    background: #e6e8ec;
    border-color: var(--border-heavy);
}

[data-theme="light"] .cal-weekday {
    color: var(--muted);
    background: var(--pill);
    border: 1px solid var(--border-light);
}

[data-theme="light"] .cal-day {
    background: var(--pill);
    border: 1px solid var(--border-light);
}

[data-theme="light"] .cal-day.today {
    outline: 2px solid var(--orange);
    background: var(--acc-soft);
}

[data-theme="light"] .cal-month {
    color: var(--orange);
}

[data-theme="light"] .cal-dot {
    background: var(--orange);
    box-shadow: 0 0 4px rgba(255, 136, 0, 0.5);
}

/* =============================================
   17. バッジ
   ============================================= */
[data-theme="light"] .badge {
    background: var(--badge-bg);
    border: 1px solid var(--border-medium);
    color: var(--fg);
}

[data-theme="light"] .badge-ai {
    border-color: var(--acc-border);
    color: var(--orange);
}

[data-theme="light"] .badge-assumed {
    border-color: rgba(212, 146, 0, 0.4);
    color: var(--badge-assumed);
}

[data-theme="light"] .badge-db {
    border-color: rgba(0, 136, 168, 0.4);
    color: var(--badge-db);
}

/* =============================================
   18. テーマ切替ボタン
   ============================================= */
.theme-toggle-btn {
    position: relative;
    width: 60px;
    height: 32px;
    background: var(--pill);
    border: 1px solid var(--border-medium);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    padding: 0 4px;
    -webkit-tap-highlight-color: transparent;
}

.theme-toggle-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.theme-toggle-btn::before {
    content: '\1F319';
    position: absolute;
    right: 8px;
    left: auto;
    font-size: 14px;
    transition: all 0.3s;
    pointer-events: none;
}

[data-theme="light"] .theme-toggle-btn::before {
    content: '\2600\FE0F';
    left: 8px;
    right: auto;
}

.theme-toggle-slider {
    width: 24px;
    height: 24px;
    background: var(--acc);
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    z-index: 1;
}

[data-theme="light"] .theme-toggle-slider {
    transform: translateX(28px);
    background: #495057;
}

[data-theme="light"] .theme-toggle-btn {
    background: #e6e8ec;
    border-color: var(--border-medium);
}

.theme-toggle-btn:hover .theme-toggle-slider {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}

/* =============================================
   19. 日時編集（index）
   ============================================= */
[data-theme="light"] .datetime-row {
    background: var(--pill);
    border-color: var(--border-light);
}

[data-theme="light"] .datetime-row:hover {
    background: #e6e8ec;
    border-color: var(--acc-border);
}

[data-theme="light"] .datetime-edit-btn {
    border-color: var(--border-medium);
    color: var(--muted);
}

[data-theme="light"] .datetime-edit-btn:hover {
    border-color: var(--acc);
    color: var(--acc);
    background: var(--acc-soft);
}

[data-theme="light"] .datetime-input-wrapper {
    background: var(--pill);
    border-color: var(--acc-border);
}

[data-theme="light"] .datetime-input-wrapper input[type="datetime-local"] {
    background: white;
    color: var(--fg);
    border-color: var(--border-medium);
}

/* =============================================
   20. 乳製品プレゼンスボタン
   ============================================= */
[data-theme="light"] .dairy-presence-btn {
    border-color: var(--border-medium);
    background: var(--pill);
    color: var(--fg);
}

[data-theme="light"] .dairy-presence-btn:hover {
    border-color: var(--acc);
    background: var(--acc-soft);
}

[data-theme="light"] .dairy-presence-btn.selected[data-value="yes"] {
    border-color: var(--green);
    background: var(--green-soft);
    color: #4a7a00;
}

[data-theme="light"] .dairy-presence-btn.selected[data-value="no"] {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.08);
    color: #2563eb;
}

[data-theme="light"] .dairy-presence-btn.selected[data-value="unknown"] {
    border-color: var(--yellow);
    background: rgba(240, 165, 0, 0.08);
    color: #b07800;
}

/* =============================================
   21. PFC 栄養サマリ
   ============================================= */
[data-theme="light"] .stat-value {
    color: var(--orange);
}

[data-theme="light"] .pfc-goal-btn.active {
    background: rgba(255, 136, 0, 0.12);
    border-color: var(--acc);
    color: var(--orange);
}

[data-theme="light"] .nh-item {
    background: var(--pill);
    border-color: var(--border-light);
}

/* =============================================
   22. 写真関連
   ============================================= */
[data-theme="light"] .modal-sub-image {
    border-color: var(--border-medium);
}

[data-theme="light"] .modal-sub-image:hover {
    border-color: var(--acc);
    box-shadow: 0 3px 10px rgba(255, 136, 0, 0.2);
}

[data-theme="light"] .modal-sub-image.active {
    border-color: var(--acc);
    box-shadow: 0 0 0 3px rgba(255, 136, 0, 0.15);
}

/* =============================================
   23. ログイン / コンタクト / 登録ページ（login-page.css 上書き）
   ============================================= */

/* カード — ダーク背景をライトに */
[data-theme="light"] .card {
    background: var(--card) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: var(--shadow-md);
}

/* 入力フィールド */
[data-theme="light"] input {
    background: #f2f3f6 !important;
    border: 1px solid var(--border-medium) !important;
    color: var(--fg) !important;
}

[data-theme="light"] input:focus {
    border-color: var(--acc) !important;
    box-shadow: 0 0 0 3px rgba(255, 136, 0, 0.1) !important;
}

[data-theme="light"] input::placeholder {
    color: #999 !important;
}

/* textarea も同様 */
[data-theme="light"] textarea {
    background: #f2f3f6 !important;
    border: 1px solid var(--border-medium) !important;
    color: var(--fg) !important;
}

[data-theme="light"] textarea:focus {
    border-color: var(--acc) !important;
    box-shadow: 0 0 0 3px rgba(255, 136, 0, 0.1) !important;
}

[data-theme="light"] textarea::placeholder {
    color: #999 !important;
}

/* 仕切り線 */
[data-theme="light"] .divider {
    border-top-color: var(--border-medium) !important;
}

/* ラベル */
[data-theme="light"] label {
    color: var(--fg);
}

/* h1 — ページタイトル（オレンジ維持） */
[data-theme="light"] h1 {
    color: var(--acc);
}