/* ============================================================
 * chdsx - 页面专属样式
 * 仪表盘、账户、交易、统计、设置
 * ============================================================ */

/* ---------- 仪表盘 ---------- */
.dashboard__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--sp-4);
}

.dashboard__expense-card {
    grid-column: span 4;
    position: relative;
    overflow: hidden;
}
.dashboard__expense-card .ebk-card__content {
    position: relative;
    z-index: 1;
}
.dashboard__expense-card__bg {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 144px;
    height: 144px;
    opacity: 0.06;
    z-index: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    color: var(--color-primary);
}
.dashboard__expense-card__bg .ebk-icon {
    font-size: 128px;
}
.dashboard__expense-amount {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    color: var(--color-primary);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-medium);
    margin-bottom: var(--sp-3);
}

.dashboard__asset-card {
    grid-column: span 8;
}
.dashboard__assets-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
    margin-top: var(--sp-4);
}

.dashboard__asset-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}
.dashboard__asset-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-surface-variant);
    color: var(--text-secondary);
    flex-shrink: 0;
}
.dashboard__asset-icon .ebk-icon {
    font-size: 24px;
}
.dashboard__asset-icon--expense {
    background-color: rgba(212, 63, 63, 0.12);
    color: var(--color-expense);
}
.dashboard__asset-icon--primary {
    background-color: rgba(35, 130, 202, 0.12);
    color: var(--color-primary);
}
.dashboard__asset-label {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
}
.dashboard__asset-value {
    font-size: var(--fs-xl);
    font-weight: var(--fw-medium);
    color: var(--text-primary);
}

.dashboard__period-card {
    grid-column: span 6;
}
.dashboard__period-card .ebk-card__content {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}
.dashboard__period-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--bg-active);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dashboard__period-title {
    font-weight: var(--fw-medium);
    color: var(--text-primary);
    margin-bottom: 2px;
}
.dashboard__period-subtitle {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
}
.dashboard__period-amounts {
    margin-inline-start: auto;
    text-align: right;
    font-size: var(--fs-sm);
}
.dashboard__period-amounts > div + div {
    margin-top: 2px;
}

.dashboard__chart-card {
    grid-column: span 6;
}
.dashboard__chart {
    height: 280px;
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-2);
    border-radius: var(--radius-md);
    background-color: var(--bg-surface-variant);
}
.dashboard__chart-bar-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-1);
    height: 100%;
}
.dashboard__chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 100%;
    width: 100%;
    justify-content: center;
}
.dashboard__chart-bar {
    width: 8px;
    background-color: var(--color-income);
    border-radius: 2px 2px 0 0;
    transition: height var(--transition-base);
}
.dashboard__chart-bar--expense {
    background-color: var(--color-expense);
}
.dashboard__chart-label {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .dashboard__expense-card,
    .dashboard__asset-card,
    .dashboard__period-card,
    .dashboard__chart-card {
        grid-column: span 12;
    }
}
@media (max-width: 767.98px) {
    .dashboard__period-card {
        grid-column: span 6;
    }
}
@media (max-width: 575.98px) {
    .dashboard__period-card {
        grid-column: span 12;
    }
    .dashboard__assets-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- 账户管理 ---------- */
.accounts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-4);
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.accounts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--sp-4);
}

.account-card {
    background-color: var(--bg-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: box-shadow var(--transition-base);
}
.account-card:hover {
    box-shadow: var(--shadow-2);
}
.account-card__header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border-bottom: 1px solid var(--divider);
}
.account-card__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    font-size: 20px;
}
.account-card__title {
    font-weight: var(--fw-medium);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.account-card__subtitle {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
}
.account-card__balance {
    margin-inline-start: auto;
    text-align: right;
}
.account-card__balance-value {
    font-weight: var(--fw-bold);
    font-size: var(--fs-lg);
}
.account-card__balance-label {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
}

.account-card__stats {
    display: flex;
    padding: var(--sp-3) var(--sp-4);
    background-color: var(--bg-surface-variant);
    border-top: 1px solid var(--divider);
    gap: var(--sp-4);
}
.account-card__stat {
    flex: 1;
}
.account-card__stat-label {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    margin-bottom: 2px;
}
.account-card__stat-value {
    font-weight: var(--fw-medium);
    color: var(--text-primary);
    font-size: var(--fs-sm);
}
.account-card__actions {
    display: flex;
    padding: var(--sp-2);
    gap: var(--sp-1);
}
.account-card__action {
    flex: 1;
    text-align: center;
    padding: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--color-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.account-card__action:hover {
    background-color: var(--bg-active);
}

/* ---------- 交易记录 ---------- */
.transactions-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--sp-4);
}

.transactions-filter {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--sp-4);
    height: fit-content;
    position: sticky;
    top: calc(var(--navbar-height) + var(--sp-4));
}
.transactions-filter__group {
    margin-bottom: var(--sp-4);
}
.transactions-filter__label {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin-bottom: var(--sp-2);
    font-weight: var(--fw-medium);
}
.transactions-filter__options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
}
.transactions-filter__option {
    padding: 4px var(--sp-2);
    font-size: var(--fs-xs);
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.transactions-filter__option:hover:not(.is-active) {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background-color: var(--bg-active);
}
.transactions-filter__option:active:not(.is-active) {
    transform: scale(0.96);
    background-color: var(--bg-hover);
}
.transactions-filter__option.is-active {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    border-color: var(--color-primary);
}

.transactions-list {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.transactions-toolbar {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--divider);
    flex-wrap: wrap;
}
.transactions-toolbar__title {
    font-weight: var(--fw-medium);
    color: var(--text-primary);
}
.transactions-toolbar__spacer {
    flex: 1;
}

.transaction-row {
    display: grid;
    grid-template-columns: 40px 1fr auto auto;
    gap: var(--sp-3);
    align-items: center;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--divider);
    transition: background-color var(--transition-fast);
    cursor: pointer;
}
.transaction-row:hover {
    background-color: var(--bg-hover);
}
.transaction-row:last-child {
    border-bottom: none;
}

.transaction-row__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--bg-surface-variant);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.transaction-row__icon .ebk-icon {
    font-size: 20px;
}
.transaction-row__icon--expense {
    background-color: rgba(212, 63, 63, 0.12);
    color: var(--color-expense);
}
.transaction-row__icon--income {
    background-color: rgba(0, 150, 136, 0.12);
    color: var(--color-income);
}

.transaction-row__content {
    min-width: 0;
}
.transaction-row__title {
    font-weight: var(--fw-medium);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.transaction-row__subtitle {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}
.transaction-row__amount {
    font-weight: var(--fw-bold);
    font-size: var(--fs-lg);
    text-align: right;
    white-space: nowrap;
}
.transaction-row__time {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    text-align: right;
}

@media (max-width: 991.98px) {
    .transactions-layout {
        grid-template-columns: 1fr;
    }
    .transactions-filter {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .transaction-row {
        grid-template-columns: 36px 1fr auto;
    }
    .transaction-row__time {
        display: none;
    }
}

/* ---------- 统计 ---------- */
.statistics-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--sp-4);
}
.statistics-filter {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--sp-4);
    height: fit-content;
    position: sticky;
    top: calc(var(--navbar-height) + var(--sp-4));
}

.statistics-overview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
}
.statistics-overview-card {
    padding: var(--sp-4);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}
.statistics-overview-card__label {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin-bottom: var(--sp-2);
}
.statistics-overview-card__value {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
}

.chart-container {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--sp-4);
    margin-bottom: var(--sp-4);
}
.chart-container__title {
    font-weight: var(--fw-medium);
    margin-bottom: var(--sp-4);
    color: var(--text-primary);
}

.pie-chart {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    flex-wrap: wrap;
}
.pie-chart__visual {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: conic-gradient(
        var(--chart-color-1) 0% 32%,
        var(--chart-color-2) 32% 56%,
        var(--chart-color-3) 56% 74%,
        var(--chart-color-4) 74% 86%,
        var(--chart-color-5) 86% 94%,
        var(--chart-color-6) 94% 100%
    );
    position: relative;
    flex-shrink: 0;
}
.pie-chart__visual::after {
    content: "";
    position: absolute;
    inset: 22%;
    background-color: var(--bg-surface);
    border-radius: 50%;
}
.pie-chart__legend {
    flex: 1;
    min-width: 180px;
}
.pie-chart__legend-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) 0;
    font-size: var(--fs-sm);
}
.pie-chart__legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}
.pie-chart__legend-label {
    flex: 1;
    color: var(--text-primary);
}
.pie-chart__legend-value {
    color: var(--text-secondary);
    font-weight: var(--fw-medium);
}

.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: var(--sp-3);
    height: 240px;
    padding: var(--sp-3) var(--sp-2);
    background-color: var(--bg-surface-variant);
    border-radius: var(--radius-md);
}
.bar-chart__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    height: 100%;
}
.bar-chart__bar-wrap {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
}
.bar-chart__bar {
    width: 16px;
    background-color: var(--chart-color-3);
    border-radius: 4px 4px 0 0;
    min-height: 4px;
    transition: height var(--transition-base);
}
.bar-chart__bar--income {
    background-color: var(--color-income);
}
.bar-chart__bar--expense {
    background-color: var(--color-expense);
}
.bar-chart__label {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
}

@media (max-width: 991.98px) {
    .statistics-layout {
        grid-template-columns: 1fr;
    }
    .statistics-filter {
        position: static;
    }
    .statistics-overview {
        grid-template-columns: 1fr;
    }
}

/* ---------- 设置 ---------- */
.settings-tabs {
    margin-bottom: var(--sp-4);
}

.settings-section {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--sp-4);
}
.settings-section__header {
    padding: var(--sp-4);
    border-bottom: 1px solid var(--divider);
    background-color: var(--bg-surface-variant);
    font-weight: var(--fw-medium);
    color: var(--text-primary);
}
.settings-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border-bottom: 1px solid var(--divider);
    transition: background-color var(--transition-fast);
}
.settings-item:last-child {
    border-bottom: none;
}
.settings-item:hover {
    background-color: var(--bg-hover);
}
.settings-item__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--bg-surface-variant);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.settings-item__content {
    flex: 1;
    min-width: 0;
}
.settings-item__title {
    font-weight: var(--fw-medium);
    color: var(--text-primary);
}
.settings-item__subtitle {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin-top: 2px;
}
.settings-item__action {
    flex-shrink: 0;
}

/* ---------- 用户中心 ---------- */
.profile-header {
    background: linear-gradient(135deg, var(--color-primary), #e89c6a);
    color: #fff;
    padding: var(--sp-8) var(--sp-4);
    border-radius: var(--radius-lg);
    text-align: center;
    margin-bottom: var(--sp-4);
    position: relative;
    overflow: hidden;
}
.profile-header::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -10%;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}
.profile-header__avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--sp-3);
    position: relative;
    z-index: 1;
}
.profile-header__avatar .ebk-icon {
    font-size: 40px;
}
.profile-header__name {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    position: relative;
    z-index: 1;
}
.profile-header__email {
    font-size: var(--fs-sm);
    opacity: 0.85;
    margin-top: var(--sp-1);
    position: relative;
    z-index: 1;
}

.profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}
.profile-stat {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--sp-4);
    text-align: center;
}
.profile-stat__value {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    color: var(--color-primary);
}
.profile-stat__label {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    margin-top: var(--sp-1);
}

@media (max-width: 575.98px) {
    .profile-stats {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
 * 扩展组件：分段选择/颜色选择/图标选择/雷达图/桑基图/对话框表单
 * ============================================================ */

/* 分段按钮组（支出/收入/转账切换） */
.ebk-segment-group {
    display: flex;
    background-color: var(--bg-surface-variant);
    border-radius: var(--radius-md);
    padding: 4px;
    gap: 4px;
}
.ebk-segment {
    flex: 1;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
    background: transparent;
}
.ebk-segment:hover {
    color: var(--text-primary);
}
.ebk-segment.is-active {
    background-color: var(--bg-surface);
    color: var(--color-primary);
    box-shadow: var(--shadow-1);
}
.ebk-segment.is-active--expense { color: var(--color-expense); }
.ebk-segment.is-active--income { color: var(--color-income); }

/* 颜色选择器 */
.ebk-color-picker {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}
.ebk-color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--transition-fast);
    position: relative;
}
.ebk-color-swatch:hover {
    transform: scale(1.1);
}
.ebk-color-swatch.is-selected {
    border-color: var(--text-primary);
}
.ebk-color-swatch.is-selected::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
}

/* 图标选择网格 */
.ebk-icon-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: var(--sp-2);
    max-height: 200px;
    overflow-y: auto;
    padding: var(--sp-2);
    background-color: var(--bg-surface-variant);
    border-radius: var(--radius-md);
}
.ebk-icon-option {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    border: 2px solid transparent;
    background-color: var(--bg-surface);
    transition: all var(--transition-fast);
}
.ebk-icon-option:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.ebk-icon-option.is-selected {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background-color: var(--bg-active);
}

/* 雷达图（纯CSS） */
.radar-chart {
    position: relative;
    width: 320px;
    height: 320px;
    margin: 0 auto;
}
.radar-chart__grid {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at center,
            transparent 0%,
            transparent 19%,
            var(--border-color) 19%,
            var(--border-color) 20%,
            transparent 20%,
            transparent 39%,
            var(--border-color) 39%,
            var(--border-color) 40%,
            transparent 40%,
            transparent 59%,
            var(--border-color) 59%,
            var(--border-color) 60%,
            transparent 60%,
            transparent 79%,
            var(--border-color) 79%,
            var(--border-color) 80%,
            transparent 80%);
    border-radius: 50%;
}
.radar-chart__axes {
    position: absolute;
    inset: 0;
}
.radar-chart__axis {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 1px;
    background-color: var(--border-color);
    transform-origin: left center;
}
.radar-chart__shape {
    position: absolute;
    inset: 10%;
    background-color: rgba(35, 130, 202, 0.25);
    border: 2px solid var(--color-primary);
    clip-path: polygon(
        50% 0%,
        82% 18%,
        100% 50%,
        82% 82%,
        50% 100%,
        18% 82%,
        0% 50%,
        18% 18%
    );
    transition: clip-path var(--transition-base);
}
.radar-chart__labels {
    position: absolute;
    inset: 0;
}
.radar-chart__label {
    position: absolute;
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    font-weight: var(--fw-medium);
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

/* 桑基图（CSS flow 模拟） */
.sankey-chart {
    display: flex;
    align-items: stretch;
    gap: var(--sp-1);
    height: 320px;
    padding: var(--sp-3);
}
.sankey-chart__col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-1);
}
.sankey-chart__node {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: opacity var(--transition-fast);
}
.sankey-chart__node:hover {
    opacity: 0.85;
}
.sankey-chart__flows {
    flex: 1.5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 var(--sp-1);
    gap: 2px;
}
.sankey-chart__flow {
    height: 24px;
    position: relative;
    border-radius: var(--radius-pill);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--sp-3);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    transition: all var(--transition-fast);
}
.sankey-chart__flow:hover {
    transform: scaleY(1.15);
    box-shadow: var(--shadow-2);
}

/* 图表切换容器 */
.chart-switcher {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.chart-switcher__option {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    background-color: var(--bg-surface-variant);
    cursor: pointer;
    border: 1px solid transparent;
    transition: all var(--transition-fast);
}
.chart-switcher__option:hover {
    color: var(--color-primary);
}
.chart-switcher__option:active {
    transform: scale(0.92);
    background-color: var(--bg-hover);
}
.chart-switcher__option.is-active {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background-color: var(--bg-active);
}

.chart-pane {
    display: none;
}
.chart-pane.is-active {
    display: block;
    animation: ebk-fade-in var(--transition-base);
}

@keyframes ebk-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 对话框表单专用 */
.ebk-dialog__content .ebk-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
}
.ebk-dialog__content .ebk-form-grid .ebk-form-group--full {
    grid-column: 1 / -1;
}
@media (max-width: 575.98px) {
    .ebk-dialog__content .ebk-form-grid {
        grid-template-columns: 1fr;
    }
    .radar-chart {
        width: 260px;
        height: 260px;
    }
    .sankey-chart {
        height: 240px;
    }
}

/* 金额输入大字体 */
.amount-input {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    text-align: center;
    height: 56px;
    color: var(--text-primary);
}
.amount-input--expense {
    color: var(--color-expense);
}
.amount-input--income {
    color: var(--color-income);
}

/* 表单错误提示 */
.ebk-form-error {
    color: var(--color-error);
    font-size: var(--fs-xs);
    margin-top: var(--sp-1);
    padding-inline-start: var(--sp-1);
    display: none;
}
.ebk-input.is-error {
    border-color: var(--color-error);
}
.ebk-input.is-error + .ebk-form-error,
.ebk-form-group.has-error .ebk-form-error {
    display: block;
}

/* ============================================================
 * 表单行 / 大尺寸对话框 / 金额输入 / 折线图 / 面积图
 * ============================================================ */

/* 大尺寸对话框（交易/日程等多字段表单） */
.ebk-dialog--lg {
    max-width: 640px;
}

/* 表单行：两列布局 */
.ebk-form-row {
    display: flex;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}
.ebk-form-row .ebk-form-group--col {
    flex: 1;
    margin-bottom: 0;
}
@media (max-width: 575.98px) {
    .ebk-form-row {
        flex-direction: column;
    }
}

/* 金额输入：右对齐、稍大字体 */
.ebk-input--amount {
    text-align: end;
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
}

/* 折线图（SVG） */
.line-chart,
.area-chart {
    width: 100%;
}
.line-chart__svg,
.area-chart__svg {
    width: 100%;
    height: 240px;
    display: block;
    overflow: visible;
}
.line-chart__line,
.area-chart__line {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    transition: stroke-width var(--transition-fast);
}
.line-chart__line--income,
.area-chart__line--income {
    stroke: rgb(var(--chart-rgb-income));
}
.line-chart__line--expense,
.area-chart__line--expense {
    stroke: rgb(var(--chart-rgb-expense));
}
.line-chart__point--income { fill: rgb(var(--chart-rgb-income)); }
.line-chart__point--expense { fill: rgb(var(--chart-rgb-expense)); }
.line-chart__points circle {
    transition: r var(--transition-fast);
}
.line-chart__points circle:hover {
    r: 5;
}
.line-chart__labels {
    display: flex;
    justify-content: space-between;
    margin-top: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--text-secondary);
}
.area-chart__fill--income { fill: rgb(var(--chart-rgb-income)); }
.area-chart__fill--expense { fill: rgb(var(--chart-rgb-expense)); }

/* 分段按钮组带图标对齐修正 */
.ebk-segment [data-icon] {
    display: inline-flex;
    vertical-align: middle;
}

/* 图标选择网格 - 选中态加柔和阴影 */
.ebk-icon-option.is-selected {
    box-shadow: 0 0 0 1px var(--color-primary) inset;
}

/* 对话框头部关闭按钮 hover */
.ebk-dialog__header .ebk-btn--icon {
    margin-inline-start: auto;
}

/* 颜色/图标选择器 - 在表单分组中紧凑显示 */
.ebk-dialog__content .ebk-color-picker,
.ebk-dialog__content .ebk-icon-picker {
    margin-top: var(--sp-1);
}