/* /Components/AppHeader.razor.rz.scp.css */
.app-header[b-2yix5yiwkn] {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 10px 16px 8px;
    max-width: 480px;
    margin: 0 auto;
    box-sizing: border-box;
}

.header-top[b-2yix5yiwkn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.app-title[b-2yix5yiwkn] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary-dark);
}

.logo[b-2yix5yiwkn] {
    font-size: 1.4rem;
}

.version[b-2yix5yiwkn] {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.header-date[b-2yix5yiwkn] {
    margin-top: 4px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}
/* /Components/BottomNav.razor.rz.scp.css */
/* ==============================
   画面下部ナビゲーション
   ============================== */

.bottom-nav[b-p529t1bpx7] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottom-nav-height);
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
    z-index: 1000;
    max-width: 480px;
    margin: 0 auto;
}

.nav-item[b-p529t1bpx7] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--color-text-muted);
    height: 100%;
    font-size: 0.68rem;
    gap: 2px;
    padding: 0 2px;
}

    .nav-item .icon[b-p529t1bpx7] {
        font-size: 1.15rem;
        line-height: 1;
    }

    .nav-item .label[b-p529t1bpx7] {
        white-space: nowrap;
    }

    .nav-item.active[b-p529t1bpx7] {
        color: var(--color-primary);
        font-weight: 600;
    }
/* /Components/CreatureCard.razor.rz.scp.css */
/*-----------------------------------------------------------------------------
 * プロジェクト名 : なんでも記録 (Nandemo Kiroku)
 * ファイル名     : CreatureCard.razor.css
 * 概要           : 育成キャラクター表示スタイル（Phase 17）
 -----------------------------------------------------------------------------*/

.creature-card[b-pin2ys1ozz] {
    display: flex;
    gap: var(--space-md);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
}

.creature-sprite-wrap[b-pin2ys1ozz] {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
}

.creature-info[b-pin2ys1ozz] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.creature-title-row[b-pin2ys1ozz] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.creature-title[b-pin2ys1ozz] {
    font-weight: 700;
    font-size: 1rem;
}

.creature-rebirth-badge[b-pin2ys1ozz] {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    background: var(--color-bg);
    border-radius: 999px;
    padding: 2px 8px;
}

.creature-dex-link[b-pin2ys1ozz] {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--color-primary);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.creature-stat-list[b-pin2ys1ozz] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.creature-stat-row[b-pin2ys1ozz] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.creature-stat-icon[b-pin2ys1ozz] {
    flex: 0 0 18px;
    font-size: 0.8rem;
}

.creature-stat-bar[b-pin2ys1ozz] {
    flex: 1;
    background: var(--color-bg);
    border-radius: 999px;
    height: 6px;
    overflow: hidden;
}

.creature-stat-bar-fill[b-pin2ys1ozz] {
    background: var(--color-primary);
    height: 100%;
    border-radius: 999px;
    transition: width .2s;
}

.creature-stat-count[b-pin2ys1ozz] {
    flex: 0 0 20px;
    text-align: right;
    font-size: 0.7rem;
    color: var(--color-text-muted);
}

.creature-rebirth-button[b-pin2ys1ozz] {
    margin-top: 4px;
    font-size: 0.8rem;
}
/* /Components/CreatureSprite.razor.rz.scp.css */
/*-----------------------------------------------------------------------------
 * プロジェクト名 : なんでも記録 (Nandemo Kiroku)
 * ファイル名     : CreatureSprite.razor.css
 * 概要           : 育成キャラクタードット絵のスタイル（Phase 17）
 -----------------------------------------------------------------------------*/

.creature-sprite[b-opg6rklvxs] {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-dk7do0zpwb] {
    min-height: 100vh;
    background: var(--color-bg);
}

.main-content[b-dk7do0zpwb] {
    display: block;
    padding: var(--space-md);
    padding-bottom: calc(var(--bottom-nav-height) + var(--space-lg));
    max-width: 480px;
    margin: 0 auto;
    box-sizing: border-box;
}
/* /Pages/BookRecords.razor.rz.scp.css */
/*-----------------------------------------------------------------------------
 * プロジェクト名 : なんでも記録 (Nandemo Kiroku)
 * ファイル名     : BookRecords.razor.css
 * 概要           : 読書記録画面スタイル（Phase 16）
 -----------------------------------------------------------------------------*/

.page-title[b-l2mbrs3c16] {
    font-size: 1.3rem;
    margin: 0 0 var(--space-md);
}

/* ==============================
   追加フォーム
   ============================== */
.book-add-form[b-l2mbrs3c16] {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.book-input[b-l2mbrs3c16] {
    flex: 1;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

/* ==============================
   一覧
   ============================== */
.book-list[b-l2mbrs3c16] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.book-card[b-l2mbrs3c16] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 10px var(--space-md);
}

.book-header[b-l2mbrs3c16] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-sm);
}

.book-title-block[b-l2mbrs3c16] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.book-title[b-l2mbrs3c16] {
    font-weight: 600;
}

.book-author[b-l2mbrs3c16] {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.book-by[b-l2mbrs3c16] {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.book-controls[b-l2mbrs3c16] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.book-status-select[b-l2mbrs3c16],
.book-rating-select[b-l2mbrs3c16] {
    box-sizing: border-box;
    padding: 6px 8px;
    font-size: 13px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.book-memo-input[b-l2mbrs3c16] {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    resize: vertical;
    padding: 8px 10px;
    font-size: 14px;
    font-family: inherit;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}
/* /Pages/CreatureDex.razor.rz.scp.css */
/*-----------------------------------------------------------------------------
 * プロジェクト名 : なんでも記録 (Nandemo Kiroku)
 * ファイル名     : CreatureDex.razor.css
 * 概要           : 育成キャラクター図鑑画面スタイル（Phase 17b）
 -----------------------------------------------------------------------------*/

.page-title[b-3s87mizvww] {
    font-size: 1.3rem;
    margin: 0 0 var(--space-md);
}

.dex-empty[b-3s87mizvww] {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    text-align: center;
    padding: var(--space-lg) 0;
}

.dex-section-title[b-3s87mizvww] {
    font-size: 0.95rem;
    font-weight: 700;
    margin: var(--space-lg) 0 var(--space-xs);
}

.dex-section-desc[b-3s87mizvww] {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-sm);
}

.dex-category-grid[b-3s87mizvww] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
}

.dex-category-card[b-3s87mizvww] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--space-sm);
}

.dex-category-card.undiscovered[b-3s87mizvww] {
    opacity: 0.55;
}

.dex-category-sprite[b-3s87mizvww] {
    width: 56px;
    height: 56px;
}

.dex-category-card.undiscovered .dex-category-sprite[b-3s87mizvww] {
    filter: grayscale(100%);
}

.dex-category-icon[b-3s87mizvww] {
    font-size: 0.9rem;
}

.dex-category-label[b-3s87mizvww] {
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

.dex-family-list[b-3s87mizvww] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.dex-family-row[b-3s87mizvww] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--space-sm) var(--space-md);
}

.dex-family-sprite[b-3s87mizvww] {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
}

.dex-family-info[b-3s87mizvww] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.dex-family-name[b-3s87mizvww] {
    font-weight: 700;
    font-size: 0.85rem;
}

.dex-family-title[b-3s87mizvww] {
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

.dex-family-stage[b-3s87mizvww] {
    font-size: 0.78rem;
    color: var(--color-primary);
    font-weight: 700;
}
/* /Pages/Home.razor.rz.scp.css */
/*-----------------------------------------------------------------------------
 * プロジェクト名 : なんでも記録 (Nandemo Kiroku)
 * ファイル名     : Home.razor.css
 * 概要           : ホーム画面（今月の収支ダッシュボード）スタイル
 -----------------------------------------------------------------------------*/

/* 今月の収支カード */
.home-summary-card[b-xiudz4iuaa] {
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-md);
    margin-bottom: var(--space-lg);
    box-shadow: var(--shadow-card);
    text-align: center;
}

.home-summary-title[b-xiudz4iuaa] {
    font-size: 0.9rem;
    opacity: 0.85;
    margin-bottom: 4px;
}

.home-summary-balance[b-xiudz4iuaa] {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: var(--space-md);
}

.home-summary-card:has(.home-summary-balance.negative)[b-xiudz4iuaa] {
    background: var(--color-expense);
}

.home-summary-row[b-xiudz4iuaa] {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
}

.home-summary-item[b-xiudz4iuaa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

    .home-summary-item .label[b-xiudz4iuaa] {
        font-size: 0.75rem;
        opacity: 0.85;
    }

    .home-summary-item .value[b-xiudz4iuaa] {
        font-size: 1.05rem;
        font-weight: 600;
    }

/* モチベーション表示（連続記録・家族共有、Phase 12） */
.home-motivation-row[b-xiudz4iuaa] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.home-streak-badge[b-xiudz4iuaa],
.home-family-badge[b-xiudz4iuaa] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    box-shadow: var(--shadow-card);
}

/* 予算超過アラート（Phase 12） */
.home-alert-card[b-xiudz4iuaa] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #fdecea;
    border-left: 4px solid var(--color-expense);
    border-radius: var(--radius-md);
    padding: 10px var(--space-md);
    margin-bottom: var(--space-md);
}

.home-alert-title[b-xiudz4iuaa] {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-expense);
}

.home-alert-body[b-xiudz4iuaa] {
    font-size: 0.8rem;
    color: var(--color-text);
}

/* 貯金目標の進捗（Phase 12） */
.home-goal-list[b-xiudz4iuaa] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.home-goal-card[b-xiudz4iuaa] {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 10px var(--space-md);
}

.home-goal-header[b-xiudz4iuaa] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}

.home-goal-title[b-xiudz4iuaa] {
    font-weight: 600;
    font-size: 0.9rem;
}

.home-goal-fraction[b-xiudz4iuaa] {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.home-goal-bar[b-xiudz4iuaa] {
    background: var(--color-bg);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}

.home-goal-bar-fill[b-xiudz4iuaa] {
    background: var(--color-primary);
    height: 100%;
    border-radius: 999px;
    transition: width .2s;
}

    .home-goal-bar-fill.achieved[b-xiudz4iuaa] {
        background: var(--color-income);
    }

.home-goal-date[b-xiudz4iuaa] {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 4px;
}

/* クイックアクション */
.home-quick-actions[b-xiudz4iuaa] {
    margin-bottom: var(--space-lg);
}

/* セクション見出し */
.home-section-title[b-xiudz4iuaa] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 var(--space-sm);
}

.home-empty[b-xiudz4iuaa] {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    text-align: center;
    padding: var(--space-lg) 0;
}

/* 最近の記録リスト */
.home-recent-list[b-xiudz4iuaa] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.home-recent-item[b-xiudz4iuaa] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: 12px var(--space-md);
    box-shadow: var(--shadow-card);
    cursor: pointer;
}

.home-recent-main[b-xiudz4iuaa] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.home-recent-category[b-xiudz4iuaa] {
    font-weight: 600;
    color: var(--color-text);
}

.home-recent-date[b-xiudz4iuaa] {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.home-recent-amount[b-xiudz4iuaa] {
    font-weight: 700;
    font-size: 1rem;
}

    .home-recent-amount.income[b-xiudz4iuaa] {
        color: var(--color-income);
    }

    .home-recent-amount.expense[b-xiudz4iuaa] {
        color: var(--color-expense);
    }
/* /Pages/Import.razor.rz.scp.css */
/*-----------------------------------------------------------------------------
 * プロジェクト名 : なんでも記録 (Nandemo Kiroku)
 * ファイル名     : Import.razor.css
 * 概要           : 取込確認画面スタイル（カード型、スマホ向け、Phase 11でSettings.razor.cssから分離）
 -----------------------------------------------------------------------------*/

.page-title[b-o97l5ry04i] {
    font-size: 1.3rem;
    margin: 0 0 var(--space-md);
}

.section-description[b-o97l5ry04i] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-sm);
}

input[b-o97l5ry04i],
select[b-o97l5ry04i] {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    font-size: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
}

/* ==============================
   取込確認（カード）
   ============================== */
.import-list[b-o97l5ry04i] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.import-upload[b-o97l5ry04i] {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}

.import-upload-label[b-o97l5ry04i] {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.import-upload-message[b-o97l5ry04i] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: var(--space-sm) 0 0;
}

    .import-upload-message.error[b-o97l5ry04i] {
        color: var(--color-expense);
    }

.import-bulk-bar[b-o97l5ry04i] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 10px var(--space-md);
    margin-bottom: var(--space-sm);
}

.import-select-all[b-o97l5ry04i] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
}

.import-bulk-actions[b-o97l5ry04i] {
    display: flex;
    gap: var(--space-sm);
}

    .import-bulk-actions .app-btn[b-o97l5ry04i] {
        width: auto;
        min-height: 36px;
        padding: 8px 14px;
        font-size: 0.85rem;
    }

.import-item[b-o97l5ry04i] {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 10px var(--space-md);
    border-left: 4px solid var(--color-primary);
}

.import-item-main[b-o97l5ry04i] {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
}

.import-item-checkbox[b-o97l5ry04i] {
    display: flex;
    align-items: center;
}

.import-item-merchant[b-o97l5ry04i] {
    flex: 1;
    font-weight: 700;
}

.import-item-amount[b-o97l5ry04i] {
    font-weight: 700;
    color: var(--color-expense);
}

    .import-item-amount.income[b-o97l5ry04i] {
        color: var(--color-income);
    }

.import-item-date[b-o97l5ry04i] {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

.import-item-actions[b-o97l5ry04i] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

    .import-item-actions select[b-o97l5ry04i] {
        flex: 1;
        min-width: 120px;
        padding: 8px;
        font-size: 0.9rem;
    }

    .import-item-actions .app-btn[b-o97l5ry04i] {
        width: auto;
        min-height: 36px;
        padding: 8px 14px;
        font-size: 0.85rem;
    }

.import-empty[b-o97l5ry04i] {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin-bottom: var(--space-lg);
}
/* /Pages/Login.razor.rz.scp.css */
/* ============================================================================
 * ログイン画面 スタイル（スマホ向け）
 * ============================================================================ */

.login-page[b-4z5qzmitrj] {
    max-width: 400px;
    margin: 15vh auto 0;
    padding: 0 var(--space-md);
    box-sizing: border-box;
}

.login-logo[b-4z5qzmitrj] {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: var(--space-sm);
}

.login-title[b-4z5qzmitrj] {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin: 0 0 var(--space-lg);
}

/* 画面全体の中央寄せ（EditFormを包むベーススタイル） */
form[b-4z5qzmitrj] {
    padding: 24px;
    box-sizing: border-box;
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

/* サーバー側のエラーメッセージ表示 */
.login-error[b-4z5qzmitrj] {
    background-color: var(--color-danger-bg);
    color: var(--color-expense);
    padding: 12px;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
    font-size: 0.9rem;
    font-weight: bold;
    border: 1px solid #ffcdd2;
}

/* 各入力項目のブロック（上下の余白） */
.Username[b-4z5qzmitrj],
.Password[b-4z5qzmitrj] {
    display: flex;
    flex-direction: column; /* スマホ用に縦並びにする */
    margin-bottom: 20px;
}

    /* ラベルのスタイル */
    .Username label[b-4z5qzmitrj],
    .Password label[b-4z5qzmitrj] {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--color-text);
        margin-bottom: 6px;
    }

    /* 入力ボックス（InputText）のスタイル */
    .Username input[b-4z5qzmitrj],
    .Password input[b-4z5qzmitrj] {
        width: 100%;
        padding: 12px; /* 指でタップしやすい高さにする */
        font-size: 1rem; /* iOSでズームされないための最小サイズ */
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        box-sizing: border-box;
        outline: none;
        transition: border-color 0.2s;
    }

        /* 入力ボックスのフォーカス時 */
        .Username input:focus[b-4z5qzmitrj],
        .Password input:focus[b-4z5qzmitrj] {
            border-color: var(--color-primary);
        }

/* バリデーションエラーメッセージ */
.validation-message[b-4z5qzmitrj] {
    color: var(--color-expense);
    font-size: 0.8rem;
    margin-top: 4px;
    font-weight: 500;
}
/* /Pages/ScheduleEdit.razor.rz.scp.css */
/*-----------------------------------------------------------------------------
 * プロジェクト名 : なんでも記録 (Nandemo Kiroku)
 * ファイル名     : ScheduleEdit.razor.css
 * 概要           : 予定の追加/編集画面スタイル（Phase 13、TransactionEdit.razor.cssを踏襲）
 *----------------------------------------------------------------------------*/

.page-title[b-8wdhj906b7] {
    text-align: center;
    font-size: 1.3rem;
    margin-bottom: var(--space-lg);
}

form[b-8wdhj906b7] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 480px;
    margin: 0 auto;
    padding: 20px;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

label[b-8wdhj906b7] {
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 4px;
}

input[b-8wdhj906b7],
select[b-8wdhj906b7],
textarea[b-8wdhj906b7] {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    font-size: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
}

input:focus[b-8wdhj906b7],
select:focus[b-8wdhj906b7],
textarea:focus[b-8wdhj906b7] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 4px rgba(46, 125, 50, .3);
}

.validation-message[b-8wdhj906b7] {
    color: var(--color-expense);
    font-size: 0.85rem;
}

/* ==============================
   繰り返しトグル
   ============================== */
.type-toggle[b-8wdhj906b7] {
    display: flex;
    gap: var(--space-sm);
}

.type-toggle-btn[b-8wdhj906b7] {
    flex: 1;
    padding: 12px;
    font-size: 1rem;
    font-weight: 700;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all .15s;
}

    .type-toggle-btn.active[b-8wdhj906b7] {
        border-color: var(--color-primary);
        background: var(--color-primary-light);
        color: var(--color-primary-dark);
    }

/* ==============================
   曜日チップ
   ============================== */
.weekday-chips[b-8wdhj906b7] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.weekday-chip[b-8wdhj906b7] {
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: #fff;
    color: var(--color-text);
    cursor: pointer;
    transition: all .15s;
}

    .weekday-chip.active[b-8wdhj906b7] {
        border-color: var(--color-primary);
        background: var(--color-primary);
        color: #fff;
        font-weight: 600;
    }

/* 保存・キャンセルボタン */
.button-group[b-8wdhj906b7] {
    display: flex;
    gap: var(--space-sm);
    margin-top: 12px;
}

.delete-schedule-btn[b-8wdhj906b7] {
    display: block;
    width: 100%;
    max-width: 480px;
    margin: var(--space-md) auto 0;
    padding: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    border: 1px solid var(--color-expense);
    border-radius: var(--radius-sm);
    background: var(--color-danger-bg);
    color: var(--color-expense);
    cursor: pointer;
}

@media (max-width: 768px) {
    form[b-8wdhj906b7] {
        margin: 12px;
        padding: 16px;
        border-radius: 10px;
        box-shadow: none;
    }

    input[b-8wdhj906b7],
    select[b-8wdhj906b7],
    textarea[b-8wdhj906b7] {
        font-size: 16px;
    }
}

.form-group[b-8wdhj906b7] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
/* /Pages/Schedules.razor.rz.scp.css */
/*-----------------------------------------------------------------------------
 * プロジェクト名 : なんでも記録 (Nandemo Kiroku)
 * ファイル名     : Schedules.razor.css
 * 概要           : 予定共有画面スタイル（Phase 13）
 *----------------------------------------------------------------------------*/

.page-title[b-iuehmetdp1] {
    font-size: 1.3rem;
    margin: 0 0 var(--space-md);
}

.show-past-toggle[b-iuehmetdp1] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

    .show-past-toggle input[type="checkbox"][b-iuehmetdp1] {
        width: 18px;
        height: 18px;
        accent-color: var(--color-primary);
    }

.list-empty[b-iuehmetdp1] {
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--space-lg) 0;
}

/* ==============================
   日付見出し
   ============================== */
.schedule-date-header[b-iuehmetdp1] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin: var(--space-md) 0 var(--space-xs);
}

    .schedule-date-header.past[b-iuehmetdp1] {
        color: var(--color-text-muted);
    }

/* ==============================
   予定カードリスト
   ============================== */
.schedule-list[b-iuehmetdp1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.schedule-card[b-iuehmetdp1] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 12px var(--space-md);
    cursor: pointer;
}

    .schedule-card.past[b-iuehmetdp1] {
        opacity: 0.6;
    }

.schedule-card-main[b-iuehmetdp1] {
    flex: 1;
    min-width: 0;
}

.schedule-title[b-iuehmetdp1] {
    font-weight: 700;
    color: var(--color-text);
    overflow-wrap: break-word;
}

.schedule-memo[b-iuehmetdp1] {
    margin-top: 2px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    overflow-wrap: break-word;
}

.schedule-by[b-iuehmetdp1] {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}
/* /Pages/Settings.razor.rz.scp.css */
/*-----------------------------------------------------------------------------
 * プロジェクト名 : なんでも記録 (Nandemo Kiroku)
 * ファイル名     : Settings.razor.css
 * 概要           : 設定画面スタイル（カード型、スマホ向け）
 -----------------------------------------------------------------------------*/

.page-title[b-gavh6z2f6u] {
    font-size: 1.3rem;
    margin: 0 0 var(--space-md);
}

.section-title[b-gavh6z2f6u] {
    font-size: 1rem;
    font-weight: 700;
    margin: var(--space-lg) 0 var(--space-sm);
}

.subsection-title[b-gavh6z2f6u] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text-muted);
    margin: var(--space-md) 0 var(--space-sm);
}

.section-description[b-gavh6z2f6u] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-sm);
}

/* ==============================
   ユーザー情報カード
   ============================== */
.user-card[b-gavh6z2f6u] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}

    .user-card .app-btn[b-gavh6z2f6u] {
        width: auto;
        min-height: 36px;
        padding: 8px 16px;
        font-size: 0.85rem;
        flex-shrink: 0;
    }

.user-name[b-gavh6z2f6u] {
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* ==============================
   カテゴリ編集フォーム
   ============================== */
form[b-gavh6z2f6u] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 16px 0;
    padding: 20px;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.form-group[b-gavh6z2f6u] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

label[b-gavh6z2f6u] {
    font-weight: 600;
    color: var(--color-text);
}

input[b-gavh6z2f6u],
select[b-gavh6z2f6u] {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    font-size: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
}

.validation-message[b-gavh6z2f6u] {
    color: var(--color-expense);
    font-size: 0.85rem;
}

.button-group[b-gavh6z2f6u] {
    display: flex;
    gap: var(--space-sm);
}

/* ==============================
   取込確認（Import.razorへのリンク・空状態）
   ============================== */
.import-empty[b-gavh6z2f6u] {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin-bottom: var(--space-lg);
}

/* ==============================
   店ごとのデフォルトカテゴリ（カード）
   ============================== */
.merchant-default-list[b-gavh6z2f6u] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.merchant-default-item[b-gavh6z2f6u] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 10px var(--space-md);
    flex-wrap: wrap;
}

.merchant-default-name[b-gavh6z2f6u] {
    flex: 1 1 100%;
    font-weight: 600;
}

    .merchant-default-item select[b-gavh6z2f6u] {
        flex: 1;
        min-width: 120px;
        padding: 8px;
        font-size: 0.9rem;
    }

.merchant-default-delete-btn[b-gavh6z2f6u] {
    width: auto;
    min-height: 36px;
    padding: 8px 14px;
    font-size: 0.85rem;
}

/* ==============================
   カテゴリ一覧（カード）
   ============================== */
.category-list[b-gavh6z2f6u] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.category-item[b-gavh6z2f6u] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 10px var(--space-md);
}

.category-item-name[b-gavh6z2f6u] {
    flex: 1;
    font-weight: 600;
}

.category-item-order[b-gavh6z2f6u] {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.category-item-actions[b-gavh6z2f6u] {
    display: flex;
    gap: 2px;
}

/* ==============================
   予算一覧（カード）
   ============================== */
.budget-list[b-gavh6z2f6u] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.budget-item[b-gavh6z2f6u] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 10px var(--space-md);
    flex-wrap: wrap;
}

.budget-item-name[b-gavh6z2f6u] {
    flex: 1 1 100%;
    font-weight: 600;
}

.budget-item-input[b-gavh6z2f6u] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}

    .budget-item-input input[b-gavh6z2f6u] {
        width: 100px;
        padding: 8px;
        font-size: 0.95rem;
    }

.budget-save-btn[b-gavh6z2f6u] {
    width: auto;
    min-height: 36px;
    padding: 8px 14px;
    font-size: 0.85rem;
}

/* ==============================
   貯金目標（カード、Phase 12）
   ============================== */
.savings-goal-list[b-gavh6z2f6u] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.savings-goal-item[b-gavh6z2f6u] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 10px var(--space-md);
    flex-wrap: wrap;
}

.savings-goal-label[b-gavh6z2f6u] {
    flex: 1 1 100%;
    font-weight: 600;
}

.savings-goal-input[b-gavh6z2f6u] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}

    .savings-goal-input input[b-gavh6z2f6u] {
        width: 100px;
        padding: 8px;
        font-size: 0.95rem;
    }

.savings-goal-text[b-gavh6z2f6u] {
    flex: 1 1 100%;
    padding: 8px;
    font-size: 0.9rem;
}

.savings-goal-date[b-gavh6z2f6u] {
    flex: 1;
    min-width: 140px;
    padding: 8px;
    font-size: 0.9rem;
}

.savings-goal-save-btn[b-gavh6z2f6u] {
    width: auto;
    min-height: 36px;
    padding: 8px 14px;
    font-size: 0.85rem;
}

/* ==============================
   固定費テンプレート（カード、Phase 12）
   ============================== */
.recurring-template-list[b-gavh6z2f6u] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.recurring-template-item[b-gavh6z2f6u] {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 10px var(--space-md);
    border-left: 4px solid var(--color-primary);
}

    .recurring-template-item.inactive[b-gavh6z2f6u] {
        border-left-color: var(--color-text-muted);
        opacity: 0.6;
    }

.recurring-template-main[b-gavh6z2f6u] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.recurring-template-name[b-gavh6z2f6u] {
    font-weight: 700;
}

.recurring-template-amount[b-gavh6z2f6u] {
    font-weight: 700;
    color: var(--color-expense);
}

    .recurring-template-amount.income[b-gavh6z2f6u] {
        color: var(--color-income);
    }

.recurring-template-sub[b-gavh6z2f6u] {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

.recurring-template-actions[b-gavh6z2f6u] {
    display: flex;
    gap: 2px;
}

.recurring-template-apply[b-gavh6z2f6u] {
    margin-bottom: var(--space-lg);
}

.recurring-template-apply-message[b-gavh6z2f6u] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: var(--space-sm) 0 0;
}

/* ==============================
   データ出力・ドキュメント・今後の予定
   ============================== */
.export-section[b-gavh6z2f6u] {
    margin-bottom: var(--space-lg);
}

.doc-link-btn[b-gavh6z2f6u] {
    text-decoration: none;
}

.future-section[b-gavh6z2f6u] {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}
/* /Pages/ShoppingList.razor.rz.scp.css */
/*-----------------------------------------------------------------------------
 * プロジェクト名 : なんでも記録 (Nandemo Kiroku)
 * ファイル名     : ShoppingList.razor.css
 * 概要           : 買い物メモ画面スタイル（Phase 13）
 *----------------------------------------------------------------------------*/

.page-title[b-cz3cxzr0ao] {
    font-size: 1.3rem;
    margin: 0 0 var(--space-md);
}

.section-title[b-cz3cxzr0ao] {
    font-size: 1.05rem;
    margin: var(--space-lg) 0 var(--space-sm);
}

/* ==============================
   追加フォーム
   ============================== */
.shopping-add-form[b-cz3cxzr0ao] {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.shopping-add-input[b-cz3cxzr0ao] {
    flex: 1;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

/* ==============================
   買い物メモリスト
   ============================== */
.shopping-list[b-cz3cxzr0ao] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.shopping-item-card[b-cz3cxzr0ao] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 10px var(--space-md);
}

    .shopping-item-card.purchased[b-cz3cxzr0ao] {
        opacity: 0.6;
    }

.shopping-item-main[b-cz3cxzr0ao] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
}

    .shopping-item-main input[type="checkbox"][b-cz3cxzr0ao] {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        accent-color: var(--color-primary);
    }

.shopping-item-name[b-cz3cxzr0ao] {
    overflow-wrap: break-word;
}

.purchased .shopping-item-name[b-cz3cxzr0ao] {
    text-decoration: line-through;
    color: var(--color-text-muted);
}

.shopping-item-by[b-cz3cxzr0ao] {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}
/* /Pages/StudyGoals.razor.rz.scp.css */
/*-----------------------------------------------------------------------------
 * プロジェクト名 : なんでも記録 (Nandemo Kiroku)
 * ファイル名     : StudyGoals.razor.css
 * 概要           : 目標・試験管理画面スタイル（Phase 15）
 -----------------------------------------------------------------------------*/

.page-title[b-zepaksko66] {
    font-size: 1.3rem;
    margin: 0 0 var(--space-md);
}

/* ==============================
   追加フォーム
   ============================== */
.study-goal-add-form[b-zepaksko66] {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.study-goal-input[b-zepaksko66] {
    flex: 1;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.study-goal-input-date[b-zepaksko66] {
    flex: 0 0 150px;
}

/* ==============================
   目標一覧
   ============================== */
.study-goal-list[b-zepaksko66] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.study-goal-card[b-zepaksko66] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 10px var(--space-md);
}

    .study-goal-card.study-goal-status-achieved[b-zepaksko66] {
        opacity: 0.7;
    }

.study-goal-main[b-zepaksko66] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.study-goal-title[b-zepaksko66] {
    font-weight: 600;
}

    .study-goal-status-achieved .study-goal-title[b-zepaksko66] {
        text-decoration: line-through;
        color: var(--color-text-muted);
    }

.study-goal-date[b-zepaksko66] {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.study-goal-memo[b-zepaksko66] {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.study-goal-status-select[b-zepaksko66] {
    box-sizing: border-box;
    padding: 6px 8px;
    font-size: 13px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}
/* /Pages/StudyLogs.razor.rz.scp.css */
/*-----------------------------------------------------------------------------
 * プロジェクト名 : なんでも記録 (Nandemo Kiroku)
 * ファイル名     : StudyLogs.razor.css
 * 概要           : 学習時間ログ画面スタイル（Phase 15）
 -----------------------------------------------------------------------------*/

.page-title[b-ussroch7c9] {
    font-size: 1.3rem;
    margin: 0 0 var(--space-md);
}

.study-log-total-card[b-ussroch7c9] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
}

.study-log-total-label[b-ussroch7c9] {
    font-size: 0.85rem;
    opacity: 0.9;
}

.study-log-total-value[b-ussroch7c9] {
    font-size: 1.2rem;
    font-weight: 700;
}

/* ==============================
   追加フォーム
   ============================== */
.study-log-add-form[b-ussroch7c9] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.study-log-input[b-ussroch7c9] {
    flex: 1;
    min-width: 100px;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.study-log-input-minutes[b-ussroch7c9] {
    flex: 0 0 70px;
    min-width: 0;
}

/* ==============================
   ログ一覧
   ============================== */
.study-log-list[b-ussroch7c9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.study-log-card[b-ussroch7c9] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 10px var(--space-md);
}

.study-log-main[b-ussroch7c9] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.study-log-subject[b-ussroch7c9] {
    font-weight: 600;
}

.study-log-date[b-ussroch7c9] {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.study-log-memo[b-ussroch7c9] {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.study-log-minutes[b-ussroch7c9] {
    font-weight: 700;
    white-space: nowrap;
}
/* /Pages/StudyMaterials.razor.rz.scp.css */
/*-----------------------------------------------------------------------------
 * プロジェクト名 : なんでも記録 (Nandemo Kiroku)
 * ファイル名     : StudyMaterials.razor.css
 * 概要           : 教材・コース進捗管理画面スタイル（Phase 15）
 -----------------------------------------------------------------------------*/

.page-title[b-p4xie21uaz] {
    font-size: 1.3rem;
    margin: 0 0 var(--space-md);
}

/* ==============================
   追加フォーム
   ============================== */
.study-material-add-form[b-p4xie21uaz] {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.study-material-input[b-p4xie21uaz] {
    flex: 1;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.study-material-input-total[b-p4xie21uaz] {
    flex: 0 0 110px;
}

/* ==============================
   教材一覧
   ============================== */
.study-material-list[b-p4xie21uaz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.study-material-card[b-p4xie21uaz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 10px var(--space-md);
}

.study-material-header[b-p4xie21uaz] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-sm);
}

.study-material-name[b-p4xie21uaz] {
    font-weight: 600;
}

.study-material-status[b-p4xie21uaz] {
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--color-text-muted);
}

    .study-material-status-in_progress[b-p4xie21uaz] {
        color: var(--color-primary);
    }

    .study-material-status-completed[b-p4xie21uaz] {
        color: var(--color-income);
    }

.study-material-progress-bar[b-p4xie21uaz] {
    background: var(--color-bg);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}

.study-material-progress-fill[b-p4xie21uaz] {
    background: var(--color-primary);
    height: 100%;
    border-radius: 999px;
    transition: width .2s;
}

.study-material-footer[b-p4xie21uaz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.study-material-progress-input-label[b-p4xie21uaz] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.study-material-progress-input[b-p4xie21uaz] {
    width: 64px;
    box-sizing: border-box;
    padding: 6px 8px;
    font-size: 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}
/* /Pages/Summary.razor.rz.scp.css */
/*-----------------------------------------------------------------------------
 * プロジェクト名 : なんでも記録 (Nandemo Kiroku)
 * ファイル名     : Summary.razor.css
 * 概要           : 詳細集計画面スタイル（スマホ向け）
 *----------------------------------------------------------------------------*/

.page-title[b-b9yncokh8m] {
    font-size: 1.3rem;
    text-align: center;
    margin: 0 0 var(--space-md);
}

/* ==============================
   月・期間セレクタ
   ============================== */
.month-selector[b-b9yncokh8m] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

    .month-selector input[b-b9yncokh8m] {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        padding: 8px 12px;
        font-size: 1rem;
        background: var(--color-surface);
    }

.month-nav-btn[b-b9yncokh8m] {
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-primary-dark);
    font-size: 1rem;
    cursor: pointer;
}

.period-selector[b-b9yncokh8m] {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-md);
}

    .period-selector select[b-b9yncokh8m] {
        width: 100%;
        max-width: 320px;
        padding: 10px 12px;
        font-size: 0.95rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        background: var(--color-surface);
    }

.period-label[b-b9yncokh8m] {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin-bottom: var(--space-md);
}

.year-selector-value[b-b9yncokh8m] {
    font-size: 1rem;
    min-width: 5em;
    text-align: center;
}

.custom-range-selector[b-b9yncokh8m] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    flex-wrap: wrap;
}

    .custom-range-selector input[b-b9yncokh8m] {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        padding: 8px 12px;
        font-size: 1rem;
        background: var(--color-surface);
    }

.period-error[b-b9yncokh8m] {
    text-align: center;
    color: var(--color-expense);
    font-size: 0.85rem;
    margin-bottom: var(--space-md);
}

/* ==============================
   収支サマリカード
   ============================== */
.summary-cards[b-b9yncokh8m] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.summary-card[b-b9yncokh8m] {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: var(--space-md);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.summary-card-title[b-b9yncokh8m] {
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.summary-card-value[b-b9yncokh8m] {
    font-size: 1.4rem;
    font-weight: 700;
}

    .summary-card-value.income[b-b9yncokh8m] {
        color: var(--color-income);
    }

    .summary-card-value.expense[b-b9yncokh8m] {
        color: var(--color-expense);
    }

.summary-card-count[b-b9yncokh8m] {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* ==============================
   グラフ
   ============================== */
.section-title[b-b9yncokh8m] {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 var(--space-sm);
}

.chart-container[b-b9yncokh8m] {
    max-width: 100%;
    margin: 0 auto var(--space-lg);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: var(--space-md);
    box-sizing: border-box;
}

/* ==============================
   カテゴリ別カードリスト
   ============================== */
.list-empty[b-b9yncokh8m] {
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--space-lg) 0;
}

.category-list[b-b9yncokh8m] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.category-card[b-b9yncokh8m] {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 12px var(--space-md);
}

.category-card-top[b-b9yncokh8m] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.category-name[b-b9yncokh8m] {
    font-weight: 700;
    color: var(--color-text);
}

.category-amount[b-b9yncokh8m] {
    font-weight: 700;
    color: var(--color-expense);
}

.category-card-bottom[b-b9yncokh8m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
    flex-wrap: wrap;
    gap: 4px;
}

.category-meta[b-b9yncokh8m] {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.category-budget[b-b9yncokh8m] {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

    .category-budget.over[b-b9yncokh8m] {
        color: var(--color-expense);
        font-weight: 600;
    }
/* /Pages/TransactionEdit.razor.rz.scp.css */
/*-----------------------------------------------------------------------------
 * プロジェクト名 : なんでも記録 (Nandemo Kiroku)
 * ファイル名     : TransactionEdit.razor.css
 * 概要           : 収支登録画面スタイル（スマホ向け）
 -----------------------------------------------------------------------------*/

.page-title[b-m1pxt0d772] {
    text-align: center;
    font-size: 1.3rem;
    margin-bottom: var(--space-lg);
}

form[b-m1pxt0d772] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 480px;
    margin: 0 auto;
    padding: 20px;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

label[b-m1pxt0d772] {
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 4px;
}

/* Blazor Input系 */
input[b-m1pxt0d772],
select[b-m1pxt0d772],
textarea[b-m1pxt0d772] {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    font-size: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
}

input:focus[b-m1pxt0d772],
select:focus[b-m1pxt0d772],
textarea:focus[b-m1pxt0d772] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 4px rgba(46, 125, 50, .3);
}

.amount-input[b-m1pxt0d772] {
    font-size: 1.3rem;
    font-weight: 700;
    text-align: right;
}

.validation-message[b-m1pxt0d772] {
    color: var(--color-expense);
    font-size: 0.85rem;
}

/* ==============================
   収支種別トグル
   ============================== */
.type-toggle[b-m1pxt0d772] {
    display: flex;
    gap: var(--space-sm);
}

.type-toggle-btn[b-m1pxt0d772] {
    flex: 1;
    padding: 12px;
    font-size: 1rem;
    font-weight: 700;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all .15s;
}

    .type-toggle-btn.income.active[b-m1pxt0d772] {
        border-color: var(--color-income);
        background: var(--color-primary-light);
        color: var(--color-income);
    }

    .type-toggle-btn.expense.active[b-m1pxt0d772] {
        border-color: var(--color-expense);
        background: var(--color-danger-bg);
        color: var(--color-expense);
    }

/* ==============================
   カテゴリチップ
   ============================== */
.category-chips[b-m1pxt0d772] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.category-chip[b-m1pxt0d772] {
    padding: 8px 14px;
    font-size: 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #fff;
    color: var(--color-text);
    cursor: pointer;
    transition: all .15s;
}

    .category-chip.active[b-m1pxt0d772] {
        border-color: var(--color-primary);
        background: var(--color-primary);
        color: #fff;
        font-weight: 600;
    }

/* 保存・キャンセルボタン */
.button-group[b-m1pxt0d772] {
    display: flex;
    gap: var(--space-sm);
    margin-top: 12px;
}

/* スマホ対応 */
@media (max-width: 768px) {

    form[b-m1pxt0d772] {
        margin: 12px;
        padding: 16px;
        border-radius: 10px;
        box-shadow: none;
    }

    input[b-m1pxt0d772],
    select[b-m1pxt0d772],
    textarea[b-m1pxt0d772] {
        font-size: 16px; /* iPhoneのズーム防止 */
    }
}

.form-group[b-m1pxt0d772] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
/* /Pages/Transactions.razor.rz.scp.css */
/*-----------------------------------------------------------------------------
 * プロジェクト名 : なんでも記録 (Nandemo Kiroku)
 * ファイル名     : Transactions.razor.css
 * 概要           : 収支一覧スタイル（カードリスト、スマホ向け）
 *----------------------------------------------------------------------------*/

.page-title[b-amdr4usm59] {
    font-size: 1.3rem;
    margin: 0 0 var(--space-md);
}

/* ==============================
   月セレクタ
   ============================== */
.month-selector[b-amdr4usm59] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

    .month-selector input[b-amdr4usm59] {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        padding: 8px 12px;
        font-size: 1rem;
        background: var(--color-surface);
    }

.month-nav-btn[b-amdr4usm59] {
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-primary-dark);
    font-size: 1rem;
    cursor: pointer;
}

/* ==============================
   サマリカード
   ============================== */
.list-summary-card[b-amdr4usm59] {
    display: flex;
    justify-content: space-around;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}

.list-summary-item[b-amdr4usm59] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

    .list-summary-item .label[b-amdr4usm59] {
        font-size: 0.75rem;
        color: var(--color-text-muted);
    }

    .list-summary-item .value[b-amdr4usm59] {
        font-size: 1.1rem;
        font-weight: 700;
    }

.income[b-amdr4usm59] {
    color: var(--color-income);
}

.expense[b-amdr4usm59] {
    color: var(--color-expense);
}

/* ==============================
   ツールバー
   ============================== */
.toolbar[b-amdr4usm59] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.search-input[b-amdr4usm59] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.toolbar-row[b-amdr4usm59] {
    display: flex;
    gap: var(--space-sm);
}

.filter-select[b-amdr4usm59] {
    flex: 1;
    padding: 10px 8px;
    font-size: 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.import-link[b-amdr4usm59] {
    align-self: flex-start;
    font-size: 0.85rem;
    color: var(--color-primary);
    text-decoration: none;
}

/* ==============================
   記録カードリスト
   ============================== */
.list-empty[b-amdr4usm59] {
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--space-lg) 0;
}

.transaction-list[b-amdr4usm59] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.transaction-card[b-amdr4usm59] {
    display: flex;
    align-items: stretch;
    gap: 4px;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 12px var(--space-md);
}

.transaction-card-main[b-amdr4usm59] {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.transaction-card-top[b-amdr4usm59] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-sm);
}

.transaction-category[b-amdr4usm59] {
    font-weight: 700;
    color: var(--color-text);
}

.transaction-amount[b-amdr4usm59] {
    font-weight: 700;
    font-size: 1.05rem;
    white-space: nowrap;
}

.transaction-card-bottom[b-amdr4usm59] {
    margin-top: 2px;
}

.transaction-date[b-amdr4usm59] {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.transaction-memo[b-amdr4usm59] {
    margin-top: 4px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    overflow-wrap: break-word;
}

.transaction-card-actions[b-amdr4usm59] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.scroll-sentinel[b-amdr4usm59] {
    display: flex;
    justify-content: center;
    padding: var(--space-md) 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}