:root {
    --color-paper: #F6F4EF;
    --color-surface: #FFFFFF;
    --color-ink: #1B211D;
    --color-ink-soft: #5B6259;
    --color-line: #DEDACC;
    --color-gain: #2E6B52;
    --color-loss: #A6402F;
    --color-header: #1B211D;
    --color-header-text: #F6F4EF;

    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

.header-bar {
    background: var(--color-header);
    color: var(--color-header-text);
    padding: 28px 32px;
}

.header-bar h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 28px;
    margin: 0 0 4px 0;
    letter-spacing: 0.2px;
}

.header-meta {
    font-family: var(--font-mono);
    font-size: 12px;
    color: #B9C2BC;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.page {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 24px 64px 24px;
}

.watchlist-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
}

.watchlist-table th {
    text-align: left;
    font-family: var(--font-body);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-ink-soft);
    font-weight: 600;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-line);
}

.watchlist-table td {
    padding: 16px;
    border-bottom: 1px solid var(--color-line);
    vertical-align: middle;
}

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

.watchlist-table tbody tr:hover {
    background: #FBFAF7;
}

.etf-label {
    font-weight: 600;
    font-size: 15px;
}

.etf-ticker {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-ink-soft);
}

.price-cell {
    font-family: var(--font-mono);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.change-cell {
    font-family: var(--font-mono);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.change-gain {
    color: var(--color-gain);
}

.change-loss {
    color: var(--color-loss);
}

.change-na {
    color: var(--color-ink-soft);
}

.updated-cell {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-ink-soft);
    text-align: right;
    white-space: nowrap;
}

.empty-state {
    padding: 48px 16px;
    text-align: center;
    color: var(--color-ink-soft);
    font-family: var(--font-mono);
    font-size: 13px;
}

.footnote {
    margin-top: 16px;
    font-size: 12px;
    color: var(--color-ink-soft);
}

.section-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 20px;
    margin: 40px 0 16px 0;
}

.sparkline-cell {
    width: 110px;
}

.sparkline {
    width: 100px;
    height: 28px;
    display: block;
}

.sparkline-gain {
    color: var(--color-gain);
}

.sparkline-loss {
    color: var(--color-loss);
}

.sparkline-na {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-ink-soft);
}

.alerts-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
}

.alerts-table th {
    text-align: left;
    font-family: var(--font-body);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-ink-soft);
    font-weight: 600;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-line);
}

.alerts-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-line);
    vertical-align: middle;
}

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

.alerts-table tbody tr:hover {
    background: #FBFAF7;
}

@media (max-width: 640px) {
    .header-bar {
        padding: 20px;
    }

    .page {
        padding: 20px 12px 48px 12px;
    }

    .watchlist-table, .watchlist-table thead, .watchlist-table tbody, .watchlist-table th, .watchlist-table td, .watchlist-table tr,
    .alerts-table, .alerts-table thead, .alerts-table tbody, .alerts-table th, .alerts-table td, .alerts-table tr {
        display: block;
    }

    .watchlist-table thead, .alerts-table thead {
        display: none;
    }

    .watchlist-table tr, .alerts-table tr {
        border-bottom: 1px solid var(--color-line);
        padding: 12px 16px;
    }

    .watchlist-table td, .alerts-table td {
        border-bottom: none;
        padding: 4px 0;
        text-align: left;
    }

    .price-cell, .change-cell, .updated-cell {
        text-align: left;
    }

    .change-cell::before, .price-cell::before, .updated-cell::before {
        content: attr(data-label);
        display: inline-block;
        width: 110px;
        color: var(--color-ink-soft);
        font-family: var(--font-body);
        font-size: 11px;
        text-transform: uppercase;
    }

    .sparkline-cell {
        width: 100%;
        padding: 8px 0 !important;
    }

    .sparkline, .sparkline-cell svg {
        width: 100%;
        height: 32px;
    }
}