/* ═══ SELF-HOSTED FONTS ═══ */

@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/dashboard/fonts/space-mono-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/dashboard/fonts/space-mono-bold.woff2') format('woff2');
}

/* ═══ SPENDING PAGE ═══ */

.sp-page {
    --sp-base: #F7F5F2;
    --sp-surface: #F7F5F2;
    --sp-ink: #2C2C2A;
    --sp-secondary: #8A8580;
    --sp-border: #E0DCD7;
    --sp-tetsu: #3B4F5E;
    --sp-shu: #C45A3C;
    --sp-band-1: #5C5650;
    --sp-band-2: #6A6560;
    --sp-band-3: #767170;
    --sp-band-4: #8A8580;
    --sp-band-5: #9A9590;
    --sp-band-6: #AEA9A2;
    --sp-band-7: #C4BFB8;
    --sp-savings: #3B4F5E;
    font-family: 'Space Mono', monospace;
    background: var(--sp-base);
    color: var(--sp-ink);
    margin: 0;
    min-height: 100vh;
}

/* Navbar */
.sp-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 80px;
    border-bottom: 1px solid var(--sp-border);
}
.sp-nav__brand {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sp-ink);
}
.sp-nav__tabs {
    display: flex;
    gap: 4px;
}
.sp-nav__tab {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--sp-secondary);
    padding: 8px 16px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.sp-nav__tab:hover { color: var(--sp-tetsu); }
.sp-nav__tab--active {
    color: var(--sp-ink);
    border-bottom-color: var(--sp-tetsu);
}
.sp-nav__actions { display: flex; gap: 8px; align-items: center; }
.sp-nav__btn--icon {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
}
.sp-nav__btn--active { color: var(--sp-tetsu); }
.sp-nav__btn {
    background: none;
    border: 1px solid var(--sp-border);
    font-family: inherit;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--sp-secondary);
    padding: 6px 16px;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.sp-nav__btn:hover {
    color: var(--sp-tetsu);
    border-color: var(--sp-tetsu);
}

/* Range tabs */
.sp-range {
    display: flex;
    gap: 4px;
    padding: 16px 80px 0;
}
.sp-range__tab {
    background: none;
    border: 1px solid var(--sp-border);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--sp-secondary);
    padding: 6px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.sp-range__tab:hover {
    color: var(--sp-tetsu);
    border-color: var(--sp-tetsu);
}
.sp-range__tab--active {
    background: var(--sp-ink);
    color: var(--sp-base);
    border-color: var(--sp-ink);
}

/* Figure (hero number) */
.sp-figure {
    padding: 32px 80px 0;
}
.sp-figure__label {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sp-secondary);
    margin-bottom: 2px;
}
.sp-figure__value {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
    color: var(--sp-ink);
}

/* Hero / Flow chart */
.sp-hero { padding: 16px 80px 0; }
.sp-flow { width: 100%; position: relative; }
.sp-flow svg {
    display: block;
    touch-action: manipulation;
}
.sp-flow__link {
    transition: fill 0.4s ease;
    cursor: pointer;
}
.sp-flow__node {
    transition: fill 0.4s ease;
    cursor: pointer;
}
@media (hover: hover) {
    .sp-flow__link:hover { filter: brightness(1.15); }
    .sp-flow__node:hover { filter: brightness(1.15); }
}
.sp-flow__label {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    fill: var(--sp-base);
    pointer-events: none;
}
.sp-flow__amount {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.3px;
    fill: var(--sp-base);
    opacity: 0.8;
    pointer-events: none;
}

/* Tooltip */
.sp-tooltip { display: none; }

/* Subcategory labels (in-chart drill-down) */
.sp-flow__sub-link { cursor: default; }
@media (hover: hover) {
    .sp-flow__sub-link:hover { filter: brightness(1.15); }
}
.sp-flow__sub-label {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.3px;
    fill: var(--sp-ink);
    pointer-events: none;
}
.sp-flow__sub-amount {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.3px;
    fill: var(--sp-secondary);
    opacity: 0.8;
    pointer-events: none;
}

/* KPI strip */
.sp-kpi {
    display: flex;
    gap: 0;
    padding: 12px 130px;
    border-top: 1px solid var(--sp-border);
    font-size: 12px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--sp-secondary);
    justify-content: space-between;
}
.sp-kpi__item {
    display: flex;
    gap: 8px;
    align-items: baseline;
}
.sp-kpi__label {
    font-size: 10px;
    letter-spacing: 1px;
}
.sp-kpi__value {
    font-variant-numeric: tabular-nums;
    font-size: 12px;
}
.sp-kpi__sparkline {
    vertical-align: middle;
    margin-left: 6px;
}

/* Category trend delta badge */
.sp-flow__trend-delta {
    font-size: 9px;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

/* Detail section */
.sp-detail { padding: 48px 130px; }
.sp-detail__section { margin-bottom: 48px; }
.sp-detail__section--fading {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.sp-detail__title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sp-secondary);
    margin-bottom: 16px;
}

/* Table */
.sp-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.sp-table th {
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--sp-secondary);
    padding: 8px 12px 8px 0;
    border-bottom: 1px solid var(--sp-border);
}
.sp-table td {
    padding: 10px 12px 10px 0;
    border-bottom: 1px solid var(--sp-border);
    vertical-align: top;
}
.sp-table tr:hover td { background: rgba(0,0,0,0.015); }
.sp-tabnum { font-variant-numeric: tabular-nums; }
.sp-muted { color: var(--sp-secondary); }
.sp-bold { font-weight: 700; }

/* Budget bars */
.sp-budget__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}
.sp-budget__label {
    font-size: 13px;
    letter-spacing: 0.3px;
    min-width: 160px;
}
.sp-budget__bar {
    flex: 1;
    height: 10px;
    background: var(--sp-border);
    position: relative;
}
.sp-budget__fill {
    height: 100%;
    transition: width 0.6s ease;
}
.sp-budget__fill--ok { background: var(--sp-band-5); }
.sp-budget__fill--warn { background: var(--sp-band-2); }
.sp-budget__fill--over { background: var(--sp-shu); }
.sp-budget__amount {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--sp-secondary);
    min-width: 120px;
    text-align: right;
}

/* Pending section */
.sp-pending__input,
.sp-pending__select {
    font-family: inherit;
    font-size: 13px;
    padding: 6px 10px;
    border: 1px solid var(--sp-border);
    background: var(--sp-surface);
    color: var(--sp-ink);
    transition: border-color 0.2s ease;
}
.sp-pending__input:focus,
.sp-pending__select:focus {
    outline: none;
    border-color: var(--sp-tetsu);
}

/* Search input */
.sp-search {
    font-family: inherit;
    font-size: 13px;
    padding: 8px 12px;
    border: 1px solid var(--sp-border);
    background: var(--sp-surface);
    color: var(--sp-ink);
    width: 240px;
    transition: border-color 0.2s ease;
}
.sp-search:focus {
    outline: none;
    border-color: var(--sp-tetsu);
}

/* Buttons */
.sp-btn {
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 6px 16px;
    border: 1px solid var(--sp-border);
    background: none;
    color: var(--sp-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}
.sp-btn:hover {
    color: var(--sp-tetsu);
    border-color: var(--sp-tetsu);
}
.sp-btn--primary {
    background: var(--sp-ink);
    color: var(--sp-base);
    border-color: var(--sp-ink);
}
.sp-btn--primary:hover {
    background: var(--sp-tetsu);
    border-color: var(--sp-tetsu);
}
.sp-btn--danger {
    color: var(--sp-shu);
    border-color: var(--sp-shu);
}
.sp-btn--danger:hover {
    background: var(--sp-shu);
    color: var(--sp-base);
}

/* Badges */
.sp-badge {
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 8px;
    display: inline-block;
}
.sp-badge--success { background: var(--sp-band-5); color: var(--sp-base); }
.sp-badge--warning { background: var(--sp-band-2); color: var(--sp-base); }
.sp-badge--error { background: var(--sp-shu); color: var(--sp-base); }
.sp-badge--info { background: var(--sp-tetsu); color: var(--sp-base); }

/* Settings page */
.sp-settings__add-form {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.sp-settings__add-form .sp-input--sm { flex: 1; min-width: 160px; }
.sp-settings__add-form .sp-select { flex: 1; min-width: 200px; }
.sp-settings__cat-label {
    color: var(--sp-ink);
    text-decoration: underline;
    text-decoration-color: var(--sp-border);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s ease;
}
.sp-settings__cat-label:hover {
    text-decoration-color: var(--sp-tetsu);
}

/* Toast */
.sp-toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sp-toast {
    background: var(--sp-tetsu);
    color: var(--sp-base);
    padding: 12px 20px;
    font-size: 13px;
    letter-spacing: 0.3px;
    animation: sp-fade-in 0.3s ease;
    transition: opacity 0.3s ease;
}
.sp-toast--error { background: var(--sp-shu); }
.sp-toast--success { background: var(--sp-band-3); }

/* Login */
.sp-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
.sp-login__card {
    width: 360px;
    border: 1px solid var(--sp-border);
    padding: 40px;
}
.sp-login__title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.sp-login__subtitle {
    font-size: 10px;
    color: var(--sp-secondary);
    letter-spacing: 0.5px;
    margin-bottom: 24px;
}
.sp-login__error {
    font-size: 11px;
    color: var(--sp-shu);
    margin-bottom: 12px;
}
.sp-login__field { margin-bottom: 16px; }
.sp-login__label {
    display: block;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--sp-secondary);
    margin-bottom: 6px;
}
.sp-login__input {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 13px;
    padding: 10px 12px;
    border: 1px solid var(--sp-border);
    background: var(--sp-surface);
    color: var(--sp-ink);
    transition: border-color 0.2s ease;
}
.sp-login__input:focus {
    outline: none;
    border-color: var(--sp-tetsu);
}
.sp-login__btn {
    width: 100%;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 12px;
    border: 1px solid var(--sp-ink);
    background: var(--sp-ink);
    color: var(--sp-base);
    cursor: pointer;
    transition: all 0.2s ease;
}
.sp-login__btn:hover {
    background: var(--sp-tetsu);
    border-color: var(--sp-tetsu);
}

/* Empty states */
.sp-empty {
    text-align: center;
    padding: 48px 0;
    color: var(--sp-secondary);
    font-size: 13px;
    letter-spacing: 0.5px;
}

/* Skeleton loading */
.sp-skeleton {
    padding: 16px 0;
}

/* Footer */
.sp-footer {
    padding: 16px 130px;
    font-size: 10px;
    letter-spacing: 0.5px;
    color: var(--sp-secondary);
    border-top: 1px solid var(--sp-border);
}

/* Category filter indicator */
.sp-filter-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: var(--sp-tetsu);
    color: var(--sp-base);
    margin-top: 8px;
}
.sp-filter-indicator__clear {
    background: none;
    border: none;
    color: var(--sp-base);
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    padding: 0 0 0 4px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}
.sp-filter-indicator__clear:hover { opacity: 1; }

/* Main content area */
.sp-main { min-height: 50vh; }

/* Detail header (title + controls row) */
.sp-detail__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.sp-detail__controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Generic input */
.sp-input {
    font-family: inherit;
    font-size: 13px;
    padding: 8px 12px;
    border: 1px solid var(--sp-border);
    background: var(--sp-surface);
    color: var(--sp-ink);
    transition: border-color 0.2s ease;
}
.sp-input:focus {
    outline: none;
    border-color: var(--sp-tetsu);
}
.sp-input--sm {
    font-size: 12px;
    padding: 6px 10px;
    width: 180px;
}
.sp-input--inline {
    font-size: 12px;
    padding: 4px 8px;
    width: 100%;
    min-width: 80px;
}
.sp-input--right { text-align: right; }

/* Hide number input spinners */
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Generic select */
.sp-select {
    font-family: inherit;
    font-size: 13px;
    padding: 6px 10px;
    border: 1px solid var(--sp-border);
    background: var(--sp-surface);
    color: var(--sp-ink);
    transition: border-color 0.2s ease;
}
.sp-select:focus {
    outline: none;
    border-color: var(--sp-tetsu);
}
.sp-select--sm { font-size: 12px; padding: 4px 8px; }

/* Button variants */
.sp-btn--sm { padding: 4px 10px; font-size: 11px; }
.sp-btn--ghost {
    background: none;
    border-color: transparent;
    color: var(--sp-secondary);
    text-decoration: none;
}
.sp-btn--ghost:hover {
    color: var(--sp-tetsu);
    border-color: var(--sp-border);
}

/* Action button group (confirm/reject) */
.sp-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

/* Budget section */
.sp-budget { margin-bottom: 12px; }
.sp-budget__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.sp-budget__label {
    font-size: 13px;
    letter-spacing: 0.3px;
}
.sp-budget__amounts {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--sp-secondary);
}
.sp-budget__bar-wrap {
    height: 6px;
    background: var(--sp-border);
    position: relative;
    width: 100%;
}
.sp-budget__bar {
    height: 100%;
    transition: width 0.6s ease;
}
.sp-budget__bar--ok { background: var(--sp-band-5); }
.sp-budget__bar--warn { background: var(--sp-band-2); }
.sp-budget__bar--over { background: var(--sp-shu); }


/* Table text alignment helpers */
.sp-table th.text-right,
.sp-table td.text-right { text-align: right; }
.sp-table tr:last-child td { border-bottom: none; }

/* Skeleton loading variants */
.sp-skeleton__hero {
    height: 280px;
    background: linear-gradient(90deg, var(--sp-border) 25%, #E8E5E1 50%, var(--sp-border) 75%);
    background-size: 200% 100%;
    animation: sp-shimmer 1.5s ease infinite;
    margin-bottom: 24px;
}
.sp-skeleton__bar {
    height: 12px;
    background: linear-gradient(90deg, var(--sp-border) 25%, #E8E5E1 50%, var(--sp-border) 75%);
    background-size: 200% 100%;
    animation: sp-shimmer 1.5s ease infinite;
    margin-bottom: 12px;
}

/* Flow chart SVG text override for ink color */
.sp-flow__label {
    fill: var(--sp-ink);
}
.sp-flow__amount {
    fill: var(--sp-secondary);
}
.sp-flow__savings-rate {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    fill: var(--sp-savings);
    pointer-events: none;
}

/* Login error toggle */
.sp-login__error { display: none; }
.sp-login__error--visible { display: block; }

/* Toast info variant */
.sp-toast--info { background: var(--sp-tetsu); }

/* Animations */
@keyframes sp-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes sp-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Responsive */
@media (max-width: 768px) {
    /* Padding reduction */
    .sp-nav { padding: 12px 20px; flex-wrap: wrap; gap: 8px; }
    .sp-nav__brand { font-size: 13px; letter-spacing: 1px; }
    .sp-nav__tabs { order: 3; width: 100%; }
    .sp-nav__tab { font-size: 13px; padding: 8px 12px; }
    .sp-nav__btn { min-height: 44px; padding: 10px 14px; }
    .sp-range { padding: 12px 20px 0; flex-wrap: wrap; }
    .sp-range__tab { min-height: 44px; padding: 10px 16px; }
    .sp-figure { padding: 24px 20px 0; }
    .sp-hero { padding: 12px 20px 0; }

    .sp-kpi { padding: 10px 20px; flex-direction: column; gap: 6px; }
    .sp-detail { padding: 32px 20px; }
    .sp-detail__section { margin-bottom: 32px; }
    .sp-footer { padding: 16px 20px; }
    .sp-figure__value { font-size: 28px; }
    .sp-search { width: 100%; }

    /* Touch targets */
    .sp-btn { min-height: 44px; padding: 10px 16px; }
    .sp-btn--sm { min-height: 44px; padding: 8px 12px; }

    /* Tooltip: constrain to viewport */
    .sp-tooltip { font-size: 12px; max-width: calc(100vw - 40px); white-space: normal; }

    /* Skeleton: shorter on mobile */
    .sp-skeleton__hero { height: 180px; }

    /* Tables: scroll horizontally on overflow */
    .sp-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }



    /* Flow chart: smaller labels on mobile */
    .sp-flow__label { font-size: 10px; }
    .sp-flow__amount { font-size: 9px; }
    .sp-flow__sub-label { font-size: 10px; }
    .sp-flow__sub-amount { font-size: 9px; }

    /* Budget bars: full width */
    .sp-budget__label { min-width: auto; }
    .sp-budget__bar-wrap { width: 100%; }

    /* Detail header: stack controls below title */
    .sp-detail__header { flex-direction: column; align-items: flex-start; }
    .sp-detail__controls { width: 100%; }
    .sp-input--sm { width: 100%; }

    /* Pending table: card layout on mobile */
    .sp-pending-table thead { display: none; }
    .sp-pending-table tbody { display: flex; flex-direction: column; gap: 12px; }
    .sp-pending-table tr {
        display: flex;
        flex-direction: column;
        gap: 8px;
        border: 1px solid var(--sp-border);
        padding: 12px;
    }
    .sp-pending-table td {
        display: flex;
        align-items: center;
        border-bottom: none;
        padding: 0;
    }
    .sp-pending-table td[data-label]::before {
        content: attr(data-label);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--sp-secondary);
        min-width: 90px;
        flex-shrink: 0;
    }
    .sp-pending-table td.text-right { text-align: left; }
    .sp-pending-table .sp-input--inline,
    .sp-pending-table .sp-select--sm { width: 100%; flex: 1; }
    .sp-pending-table .sp-actions { width: 100%; }
    .sp-pending-table .sp-btn--sm { flex: 1; min-height: 44px; }

    /* Settings table: card layout on mobile */
    .sp-settings-table thead { display: none; }
    .sp-settings-table tbody { display: flex; flex-direction: column; gap: 12px; }
    .sp-settings-table tr {
        display: flex;
        flex-direction: column;
        gap: 8px;
        border: 1px solid var(--sp-border);
        padding: 12px;
    }
    .sp-settings-table td {
        display: flex;
        align-items: center;
        border-bottom: none;
        padding: 0;
    }
    .sp-settings-table td[data-label]::before {
        content: attr(data-label);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--sp-secondary);
        min-width: 70px;
        flex-shrink: 0;
    }
    .sp-settings-table td.text-right { text-align: left; }
    .sp-settings-table .sp-btn--sm { min-height: 44px; }

    /* Settings add form: stack on mobile */
    .sp-settings__add-form { flex-direction: column; align-items: stretch; }
    .sp-settings__add-form .sp-input--sm,
    .sp-settings__add-form .sp-select { width: 100%; }

    /* Login card: don't overflow on very narrow screens */
    .sp-login__card { width: auto; max-width: 360px; margin: 0 20px; }
}

/* Keyboard focus indicators (spending) */
.sp-nav__tab:focus-visible,
.sp-nav__btn:focus-visible,
.sp-range__tab:focus-visible,
.sp-btn:focus-visible,
.sp-input:focus-visible,
.sp-select:focus-visible,
.sp-search:focus-visible,
.sp-login__input:focus-visible,
.sp-login__btn:focus-visible {
    outline: 2px solid var(--sp-tetsu);
    outline-offset: 2px;
}

/* ── Net Worth Dashboard ─────────────────────────────────────────── */

.nw-page {
    --nw-base: #F7F5F2;
    --nw-surface: #F7F5F2;
    --nw-ink: #2C2C2A;
    --nw-secondary: #8A8580;
    --nw-border: #E0DCD7;
    --nw-tetsu: #3B4F5E;
    --nw-shu: #C45A3C;
    --nw-gain: #4A7C5E;
    --nw-band-stocks: #5C5650;
    --nw-band-etfs: #767170;
    --nw-band-super: #9A9590;
    --nw-band-managed: #C4BFB8;
    --nw-band-other: #E0DCD7;

    font-family: 'Space Mono', monospace;
    background: var(--nw-base);
    color: var(--nw-ink);
    margin: 0;
    min-height: 100vh;
    scrollbar-gutter: stable;
}

/* ── Navbar ── */

.nw-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 80px;
    border-bottom: 1px solid var(--nw-border);
}

.nw-nav__brand {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.nw-nav__tabs {
    display: flex;
    gap: 4px;
}

.nw-nav__tab {
    font-family: 'Space Mono', monospace;
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--nw-secondary);
    padding: 8px 16px;
    border: 1px solid transparent;
    background: none;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.nw-nav__tab:hover {
    color: var(--nw-tetsu);
}

.nw-nav__tab--active {
    color: var(--nw-ink);
    border-bottom: 2px solid var(--nw-tetsu);
}

.nw-nav__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nw-nav__btn {
    font-family: 'Space Mono', monospace;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--nw-secondary);
    background: none;
    border: 1px solid var(--nw-border);
    padding: 6px 14px;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.nw-nav__btn:hover {
    color: var(--nw-tetsu);
    border-color: var(--nw-tetsu);
}

.nw-nav__btn--icon {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
}

/* ── Figure ── */

.nw-figure {
    padding: 32px 80px 0;
}

.nw-figure__label {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--nw-secondary);
    margin-bottom: 2px;
    transition: opacity 0.15s ease;
    cursor: pointer;
}

.nw-figure__value {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
}

/* ── Hero / Streamgraph ── */

.nw-hero {
    padding: 16px 80px 0;
    position: relative;
}

.nw-stream {
    width: 100%;
    position: relative;
}

.nw-stream svg {
    display: block;
    width: 100%;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.nw-band {
    cursor: pointer;
}

@media (hover: hover) {
    .nw-band:hover {
        filter: brightness(1.15);
    }
}

/* ── Legend ── */

.nw-legend {
    display: flex;
    gap: 20px;
    padding: 12px 130px 0;
    flex-wrap: wrap;
}

.nw-legend__item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    letter-spacing: 0.5px;
    color: var(--nw-secondary);
    cursor: pointer;
    transition: color 0.2s ease;
}

@media (hover: hover) {
    .nw-legend__item:hover {
        color: var(--nw-ink);
    }
}

.nw-legend__dot {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

/* ── Tooltip ── */

.nw-tooltip {
    position: fixed;
    background: var(--nw-tetsu);
    color: var(--nw-base);
    padding: 10px 14px;
    font-family: 'Space Mono', monospace;
    font-size: 14px;
    letter-spacing: 0.3px;
    line-height: 1.6;
    pointer-events: none;
    z-index: 100;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.nw-tooltip--visible {
    opacity: 1;
}

/* ── Zoom overlay ── */

.nw-zoom-dot {
    pointer-events: none;
}

.nw-zoom-axis text {
    fill: #8A8580;
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.5px;
}

.nw-zoom-axis .domain {
    display: none;
}

.nw-zoom-axis .tick line {
    stroke: #E0DCD7;
    stroke-width: 0.5;
}

.nw-zoom-label {
    fill: #8A8580;
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.nw-band--inactive {
    pointer-events: none;
}

/* ── Tables ── */

.nw-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.nw-table th {
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--nw-secondary);
    padding: 8px 12px 8px 0;
    border-bottom: 1px solid var(--nw-border);
}

.nw-table td {
    padding: 10px 12px 10px 0;
    border-bottom: 1px solid var(--nw-border);
    vertical-align: top;
}

.nw-table th.text-right,
.nw-table td.text-right {
    text-align: right;
}

.nw-table th.text-right + th,
.nw-table td.text-right + td {
    padding-left: 24px;
}

.nw-table .nw-tabnum {
    font-variant-numeric: tabular-nums;
}

.nw-table .nw-ticker {
    font-weight: 700;
}

.nw-table .nw-muted {
    color: var(--nw-secondary);
}

.nw-table tr:last-child td {
    border-bottom: none;
}

.nw-empty {
    text-align: center;
    color: var(--nw-secondary);
    padding: 32px 0;
    font-size: 15px;
}

/* ── Drill-down ── */

.nw-drilldown {
    padding: 24px 130px;
    border-top: 1px solid var(--nw-border);
    opacity: 1;
    animation: nw-fade-in 0.3s ease;
}

.nw-drilldown--fading {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.nw-drilldown__title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--nw-secondary);
    margin-bottom: 12px;
}

.nw-drilldown__row {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--nw-border);
    font-size: 13px;
}

.nw-drilldown__row:last-child {
    border-bottom: none;
}

.nw-drilldown__ticker {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
    min-width: 48px;
    flex-shrink: 0;
}

.nw-drilldown__name {
    color: var(--nw-secondary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nw-drilldown__notes {
    flex: 0 1 auto;
    font-size: 11px;
}

.nw-drilldown__stat {
    font-variant-numeric: tabular-nums;
    color: var(--nw-ink);
    font-size: 12px;
    white-space: nowrap;
    margin-left: auto;
}

.nw-drilldown__stat + .nw-drilldown__stat {
    margin-left: 0;
}

.nw-drilldown__pl--pos {
    color: var(--nw-gain);
}

.nw-drilldown__pl--neg {
    color: var(--nw-shu);
}

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

/* ── CGT Stats Row ── */

.nw-cgt {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 130px;
    border-top: 1px solid var(--nw-border);
    flex-wrap: wrap;
}

.nw-cgt__stat {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.nw-cgt__label {
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--nw-secondary);
}

.nw-cgt__value {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--nw-ink);
    letter-spacing: 0;
}

.nw-cgt__value--loss {
    color: var(--nw-shu);
}

.nw-select--sm {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--nw-secondary);
    background: transparent;
    border: 1px solid var(--nw-border);
    padding: 4px 8px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease, color 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%238A8580'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
}

.nw-select--sm:hover,
.nw-select--sm:focus {
    border-color: var(--nw-tetsu);
    color: var(--nw-ink);
}

/* ── Login ── */

.nw-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.nw-login__card {
    width: 360px;
    border: 1px solid var(--nw-border);
    padding: 40px;
}

.nw-login__title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 4px;
}

.nw-login__subtitle {
    font-size: 10px;
    color: var(--nw-secondary);
    text-align: center;
    margin-bottom: 24px;
}

.nw-login__error {
    font-size: 11px;
    color: var(--nw-shu);
    text-align: center;
    margin-bottom: 16px;
    display: none;
}

.nw-login__error--visible {
    display: block;
}

.nw-login__field {
    margin-bottom: 16px;
}

.nw-login__label {
    display: block;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--nw-secondary);
    margin-bottom: 6px;
}

.nw-login__input {
    width: 100%;
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    padding: 10px 12px;
    border: 1px solid var(--nw-border);
    background: var(--nw-surface);
    color: var(--nw-ink);
    outline: none;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.nw-login__input:focus {
    border-color: var(--nw-tetsu);
}

.nw-login__btn {
    width: 100%;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 12px;
    margin-top: 8px;
    background: var(--nw-ink);
    color: var(--nw-base);
    border: 1px solid var(--nw-ink);
    cursor: pointer;
    transition: background 0.2s ease;
}

.nw-login__btn:hover {
    background: var(--nw-tetsu);
    border-color: var(--nw-tetsu);
}

/* ── Net Worth Responsive ── */
@media (max-width: 768px) {
    .nw-nav { padding: 12px 20px; flex-wrap: wrap; gap: 8px; }
    .nw-nav__tabs { order: 3; width: 100%; }
    .nw-nav__tab { font-size: 13px; padding: 8px 12px; }
    .nw-nav__btn { min-height: 44px; padding: 10px 14px; }
    .nw-figure { padding: 24px 20px 0; }
    .nw-figure__value { font-size: 28px; }
    .nw-hero { padding: 12px 20px 0; }
    .nw-legend { padding: 8px 20px 0; gap: 12px; }
    .nw-legend__item { min-height: 44px; padding: 8px 4px; }
    .nw-table { display: block; overflow-x: auto; }
    .nw-tooltip { font-size: 12px; max-width: calc(100vw - 40px); white-space: normal; }
    .nw-drilldown { padding: 16px 20px; }
    .nw-cgt { padding: 10px 20px; gap: 16px; }
    .nw-login__card { width: calc(100% - 40px); max-width: 360px; }
}

/* ── Trends chart ───────────────────────────────────────────────── */

.sp-trends { width: 100%; position: relative; }

.sp-trends svg {
    display: block;
    touch-action: manipulation;
}

.sp-trends__x-axis text,
.sp-trends__y-axis text {
    fill: var(--sp-secondary);
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.5px;
}

.sp-trends__x-axis .domain,
.sp-trends__y-axis .domain { display: none; }

.sp-trends__x-axis .tick line,
.sp-trends__y-axis .tick line {
    stroke: var(--sp-border);
    stroke-width: 0.5;
}

.sp-trends__area { cursor: pointer; }

@media (hover: hover) {
    .sp-trends__area:hover { filter: brightness(1.12); }
    .sp-trends__area--dimmed:hover { filter: none; }
}

.sp-trends__area--dimmed { pointer-events: none; }

.sp-trends__crosshair-line {
    pointer-events: none;
}

.sp-trends__tooltip {
    position: fixed;
    background: var(--sp-tetsu);
    color: var(--sp-base);
    padding: 10px 14px;
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    letter-spacing: 0.3px;
    line-height: 1.7;
    pointer-events: none;
    z-index: 100;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.sp-trends__tooltip--visible { opacity: 1; }

.sp-trends__legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.sp-trends__legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--sp-secondary);
    cursor: pointer;
    transition: color 0.2s ease;
    user-select: none;
}

@media (hover: hover) {
    .sp-trends__legend-item:hover { color: var(--sp-ink); }
}

.sp-trends__legend-item--active { color: var(--sp-ink); }

.sp-trends__legend-dot {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

.sp-trends__granularity {
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--sp-secondary);
}

@media (max-width: 768px) {
    .sp-trends__tooltip { font-size: 11px; max-width: calc(100vw - 40px); white-space: normal; }
    .sp-trends__legend { gap: 10px; }
    .sp-trends__legend-item { font-size: 9px; }
}

/* ── Dark Mode ──────────────────────────────────────────────────── */

.dark.sp-page {
    --sp-base:      #1C1B19;
    --sp-surface:   #242320;
    --sp-ink:       #E8E5E1;
    --sp-secondary: #8A8580;
    --sp-border:    #333130;
    --sp-tetsu:     #6B8B9E;
    --sp-shu:       #D06A4C;
    --sp-band-1:    #C4BFB8;
    --sp-band-2:    #AEA9A2;
    --sp-band-3:    #9A9590;
    --sp-band-4:    #8A8580;
    --sp-band-5:    #767170;
    --sp-band-6:    #6A6560;
    --sp-band-7:    #5C5650;
    --sp-savings:   #6B8B9E;
}

.dark.nw-page {
    --nw-base:         #1C1B19;
    --nw-surface:      #242320;
    --nw-ink:          #E8E5E1;
    --nw-secondary:    #8A8580;
    --nw-border:       #333130;
    --nw-tetsu:        #6B8B9E;
    --nw-shu:          #D06A4C;
    --nw-gain:         #6DB892;
    --nw-band-stocks:  #C4BFB8;
    --nw-band-etfs:    #9A9590;
    --nw-band-super:   #767170;
    --nw-band-managed: #5C5650;
    --nw-band-other:   #3A3835;
}

/* Theme toggle */
.theme-toggle {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 14px;
    cursor: pointer;
    border: 1px solid var(--sp-tetsu, var(--nw-tetsu, #3B4F5E));
    background: transparent;
    color: var(--sp-tetsu, var(--nw-tetsu, #3B4F5E));
    transition: all 0.3s ease;
}
.theme-toggle:hover {
    background: var(--sp-tetsu, var(--nw-tetsu, #3B4F5E));
    color: var(--sp-base, var(--nw-base, #F7F5F2));
}

/* Smooth theme transition */
.sp-page, .nw-page {
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* Keyboard focus indicators (net worth) */
.nw-nav__tab:focus-visible,
.nw-legend__item:focus-visible,
.nw-login__input:focus-visible,
.nw-login__btn:focus-visible {
    outline: 2px solid var(--nw-tetsu);
    outline-offset: 2px;
}

/* ── Mobile page indicator ───────────────────────────────────────── */

.sp-page-dots,
.nw-page-dots {
    display: none;
}

@media (max-width: 768px) {
    .sp-page-dots,
    .nw-page-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 8px 0 4px;
    }

    .sp-page-dots__dot,
    .nw-page-dots__dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--sp-border, var(--nw-border, #E0DCD7));
        transition: background 0.2s ease;
        flex-shrink: 0;
    }

    .sp-page-dots__dot--active {
        background: var(--sp-tetsu, #3B4F5E);
    }

    .nw-page-dots__dot--active {
        background: var(--nw-tetsu, #3B4F5E);
    }
}

/* ── Goals section ───────────────────────────────────────────────── */

.sp-goal {
    border: 1px solid var(--sp-border);
    margin-bottom: 16px;
}

.sp-goal__summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
}

.sp-goal__name {
    font-size: 13px;
    font-weight: 700;
    min-width: 180px;
}

.sp-goal__bar-wrap {
    flex: 1;
    height: 6px;
    background: var(--sp-border);
}

.sp-goal__bar {
    height: 100%;
    transition: width 0.6s ease;
}

.sp-goal__bar--ok { background: var(--sp-tetsu); }
.sp-goal__bar--warn { background: var(--sp-shu); }
.sp-goal__bar--done { background: var(--sp-band-5); }

.sp-goal__meta {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--sp-secondary);
    white-space: nowrap;
}

.sp-goal__pill {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 8px;
    color: var(--sp-base);
    white-space: nowrap;
}

.sp-goal__pill--ok { background: var(--sp-tetsu); }
.sp-goal__pill--warn { background: var(--sp-shu); }
.sp-goal__pill--done { background: var(--sp-band-5); }

.sp-goal__detail {
    display: none;
    padding: 12px;
    border-top: 1px solid var(--sp-border);
}

.sp-goal__detail--open {
    display: block;
}

.sp-goal__contrib-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--sp-border);
}

.sp-goal__actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.sp-goal__add-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    padding: 16px 0;
}

@media (max-width: 768px) {
    .sp-goal__name { min-width: auto; }
    .sp-goal__summary { flex-wrap: wrap; }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .sp-flow__link, .sp-flow__node, .sp-toast,
    .sp-skeleton__hero, .sp-skeleton__bar {
        transition: none !important;
        animation: none !important;
    }
    .nw-band, .nw-toast {
        transition: none !important;
        animation: none !important;
    }
    .sp-page-dots__dot,
    .nw-page-dots__dot {
        transition: none !important;
    }
}

/* Demo badge */
.sp-nav__demo-badge,
.nw-nav__demo-badge {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--sp-secondary, var(--nw-secondary, #888));
    border: 1px solid var(--sp-border, var(--nw-border, #444));
    padding: 4px 12px;
    border-radius: 2px;
}

/* High contrast support */
@media (forced-colors: active) {
    .sp-flow__link, .sp-flow__node, .sp-flow__sub-link,
    .nw-band {
        forced-color-adjust: none;
    }
}