.status-line {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 9px;
    color: var(--success);
    font-size: 0.9rem;
    font-weight: 680;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 5px rgba(22, 163, 74, 0.09);
}

.coach-card {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #1d4ed8, #2563eb 60%, #3b82f6);
    color: #ffffff;
    box-shadow: 0 20px 48px rgba(37, 99, 235, 0.2);
}

.coach-icon {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.14);
}

.coach-copy p {
    margin: 0 0 2px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.8rem;
    font-weight: 680;
}

.coach-card h2 {
    margin: 0;
    font-size: clamp(1.28rem, 2.2vw, 1.72rem);
    letter-spacing: -0.04em;
}

.coach-copy span {
    display: block;
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.82);
}

.coach-copy span strong {
    color: #ffffff;
}

.coach-button {
    min-height: 42px;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    background: #ffffff;
    color: var(--primary-dark);
    font-weight: 720;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 258px;
    gap: 17px;
    margin-top: 18px;
}

.spending-card,
.summary-card,
.activity-card,
.goal-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}

.spending-card,
.activity-card,
.goal-card {
    padding: 25px;
}

.spending-layout {
    display: grid;
    grid-template-columns: 194px minmax(0, 1fr);
    align-items: center;
    gap: 32px;
    margin-top: 25px;
}

.donut {
    position: relative;
    display: grid;
    width: 186px;
    height: 186px;
    place-items: center;
    border-radius: 50%;
    background:
        conic-gradient(
            #2563eb 0deg 118deg,
            #7aa2ff 118deg 285deg,
            #f59e0b 285deg 325deg,
            #dbe3f0 325deg 360deg
        );
}

.donut::after {
    position: absolute;
    width: 122px;
    height: 122px;
    border-radius: 50%;
    background: var(--surface-solid);
    content: "";
}

.donut-center {
    position: relative;
    z-index: 1;
    display: grid;
    text-align: center;
}

.donut-center strong {
    font-size: 1.42rem;
}

.donut-center span {
    color: var(--muted);
    font-size: 0.8rem;
}

.category-list {
    display: grid;
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.category-list li {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.category-copy {
    display: grid;
}

.category-copy small {
    color: var(--muted);
}

.category-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.category-food { background: #2563eb; }
.category-housing { background: #7aa2ff; }
.category-transport { background: #f59e0b; }
.category-other { background: #dbe3f0; }

.summary-column {
    display: grid;
    gap: 12px;
}

.summary-card {
    display: grid;
    gap: 4px;
    padding: 19px;
}

.summary-card span,
.summary-card small {
    color: var(--muted);
}

.summary-card strong {
    font-size: 1.82rem;
}

.summary-card small.positive {
    color: var(--success);
}

.lower-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 17px;
    margin-top: 17px;
}

.purchase-list {
    display: grid;
    margin-top: 14px;
}

.purchase-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    width: 100%;
    padding: 14px 0;
    border: 0;
    border-top: 1px solid var(--border);
    background: transparent;
    text-align: left;
}

.purchase-row:first-child {
    border-top: 0;
}

.goal-value {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 30px;
}

.goal-value strong {
    font-size: 2.25rem;
}

.goal-value span,
.goal-note {
    color: var(--muted);
}

.progress-track {
    height: 10px;
    margin-top: 16px;
    overflow: hidden;
    border-radius: 999px;
    background: #e7edf6;
}

.progress-value {
    width: 61%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
}

.goal-note {
    margin: 16px 0 20px;
}


/* v0.5 dashboard refinement */

.spending-card {
    overflow: hidden;
}

.spending-layout {
    grid-template-columns: 166px minmax(0, 1fr);
    gap: 26px;
    min-height: 210px;
}

.donut {
    width: 156px;
    height: 156px;
}

.donut::after {
    width: 106px;
    height: 106px;
}

.donut-center {
    width: 94px;
    justify-items: center;
}

.donut-center strong {
    max-width: 94px;
    overflow: hidden;
    font-size: clamp(0.92rem, 1.55vw, 1.16rem);
    line-height: 1.1;
    letter-spacing: -0.045em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.donut-center span {
    margin-top: 5px;
    font-size: 0.72rem;
}

.category-list {
    align-content: center;
}

.category-list li {
    min-height: 38px;
    padding: 3px 0;
}

.summary-card {
    min-height: 102px;
    align-content: center;
}

.summary-card strong {
    font-size: clamp(1.42rem, 2.3vw, 1.82rem);
    line-height: 1.08;
}

@media (max-width: 700px) {
    .spending-layout {
        grid-template-columns: 1fr;
        min-height: 0;
    }
}


/* v0.5.1 dashboard presentation modes */

.dashboard-table-view {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 258px;
    gap: 17px;
    margin-top: 18px;
}

.dashboard-table-card {
    padding: 25px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.dashboard-table-total {
    color: var(--primary-dark);
    font-size: 1.15rem;
    font-weight: 760;
}

.dashboard-table-wrap {
    margin-top: 20px;
    overflow-x: auto;
}

.dashboard-data-table {
    width: 100%;
    border-collapse: collapse;
}

.dashboard-data-table th,
.dashboard-data-table td {
    padding: 14px 12px;
    border-top: 1px solid var(--border);
    text-align: left;
}

.dashboard-data-table th {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 720;
}

.dashboard-data-table th:nth-child(2),
.dashboard-data-table th:nth-child(3),
.dashboard-data-table td:nth-child(2),
.dashboard-data-table td:nth-child(3) {
    text-align: right;
}

.dashboard-data-table td:last-child {
    font-weight: 720;
}

.dashboard-table-summary {
    display: grid;
    gap: 12px;
}

html[data-dashboard-style="graphs"] .summary-column {
    display: none;
}

html[data-dashboard-style="graphs"] .dashboard-grid {
    grid-template-columns: 1fr;
}

html[data-dashboard-style="graphs"] .spending-layout {
    grid-template-columns: 190px minmax(0, 1fr);
}

html[data-dashboard-style="tables"] .dashboard-grid {
    display: none;
}

html[data-dashboard-style="tables"] .dashboard-table-view {
    display: grid !important;
}

html[data-dashboard-style="compact"] .coach-card {
    padding: 14px 17px;
}

html[data-dashboard-style="compact"] .coach-icon {
    width: 40px;
    height: 40px;
}

html[data-dashboard-style="compact"] .dashboard-grid,
html[data-dashboard-style="compact"] .lower-grid {
    gap: 12px;
    margin-top: 12px;
}

html[data-dashboard-style="compact"] .spending-card,
html[data-dashboard-style="compact"] .activity-card,
html[data-dashboard-style="compact"] .goal-card {
    padding: 19px;
}

html[data-dashboard-style="compact"] .spending-layout {
    min-height: 170px;
    margin-top: 18px;
}

html[data-dashboard-style="compact"] .donut {
    width: 132px;
    height: 132px;
}

html[data-dashboard-style="compact"] .donut::after {
    width: 90px;
    height: 90px;
}

html[data-dashboard-style="compact"] .dashboard-table-view {
    display: none !important;
}

html[data-dashboard-style="balanced"] .dashboard-table-view,
html[data-dashboard-style="graphs"] .dashboard-table-view {
    display: none !important;
}

@media (max-width: 1050px) {
    .dashboard-table-view {
        grid-template-columns: 1fr;
    }

    .dashboard-table-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .dashboard-table-summary {
        grid-template-columns: 1fr;
    }

    html[data-dashboard-style="graphs"] .spending-layout {
        grid-template-columns: 1fr;
    }
}