:root {
    color-scheme: dark;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #e7edf5;
    background: #070b11;
    font-synthesis: none;
    --bg: #070b11;
    --surface: #0d131d;
    --surface-raised: #121a26;
    --surface-hover: #162130;
    --border: #202c3b;
    --border-strong: #304158;
    --text: #e7edf5;
    --muted: #8795a8;
    --green: #32d583;
    --green-bright: #5cf2a9;
    --green-soft: rgb(50 213 131 / 11%);
    --red: #ff6b75;
    --red-soft: rgb(255 107 117 / 10%);
    --amber: #f5b942;
    --blue: #55a6ff;
    --shadow: 0 22px 60px rgb(0 0 0 / 28%);
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 85% -10%, rgb(50 213 131 / 8%), transparent 32rem),
        linear-gradient(rgb(255 255 255 / 1.5%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / 1.5%) 1px, transparent 1px),
        var(--bg);
    background-size: auto, 40px 40px, 40px 40px, auto;
}

a { color: inherit; }

.app-header {
    position: sticky;
    z-index: 50;
    top: 0;
    min-height: 68px;
    padding: 0 max(24px, calc((100vw - 1240px) / 2));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: rgb(7 11 17 / 88%);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(18px);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: #f4f8fb;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

.brand::before {
    width: 26px;
    height: 26px;
    content: "";
    background:
        linear-gradient(135deg, transparent 46%, var(--green) 47% 56%, transparent 57%),
        linear-gradient(90deg, var(--green) 3px, transparent 3px) 4px 14px / 5px 8px no-repeat,
        linear-gradient(90deg, var(--green) 3px, transparent 3px) 10px 10px / 5px 12px no-repeat,
        linear-gradient(90deg, var(--green) 3px, transparent 3px) 16px 5px / 5px 17px no-repeat,
        #101c19;
    border: 1px solid rgb(50 213 131 / 36%);
    border-radius: 7px;
    box-shadow: 0 0 20px rgb(50 213 131 / 12%);
}

.header-actions { display: flex; align-items: center; gap: 8px; }

.header-link {
    padding: 8px 11px;
    color: #aab6c5;
    font-size: 0.82rem;
    font-weight: 650;
    text-decoration: none;
    border-radius: 7px;
    transition: color 150ms ease, background 150ms ease;
}

.header-link:hover { color: #fff; background: var(--surface-hover); }

.logout-button {
    min-height: auto;
    padding: 8px 11px;
    color: #aab6c5;
    background: transparent;
    border: 0;
}

.page {
    width: min(1240px, calc(100% - 48px));
    margin: 0 auto;
    padding: 48px 0 80px;
}

.page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 34px;
}

.eyebrow {
    margin: 0 0 8px;
    color: var(--green);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

h1, h2 { letter-spacing: -0.02em; }
h1 { margin: 0; color: #f5f8fb; font-size: clamp(1.8rem, 4vw, 2.7rem); line-height: 1.05; }
h2 { margin: 0 0 17px; color: #dce4ed; font-size: 0.82rem; letter-spacing: 0.09em; text-transform: uppercase; }

section { margin-top: 38px; }

.heading-metric {
    min-width: 310px;
    padding: 16px 20px;
    text-align: right;
    background: linear-gradient(145deg, rgb(50 213 131 / 9%), rgb(18 26 38 / 80%));
    border: 1px solid rgb(50 213 131 / 22%);
    border-radius: 12px;
    box-shadow: inset 0 1px rgb(255 255 255 / 3%);
}

.heading-metric span, .heading-metric strong, .heading-metric small { display: block; }
.heading-metric span { margin-bottom: 6px; color: var(--muted); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.heading-metric strong { color: #f7fafc; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.35rem; }
.heading-metric small { margin-top: 5px; color: var(--amber); font-size: 0.7rem; }
.heading-result { margin-left: 8px; font: inherit; }

.form-band {
    position: relative;
    z-index: 2;
    padding: 22px;
    overflow: visible;
    background: linear-gradient(145deg, rgb(18 26 38 / 96%), rgb(13 19 29 / 96%));
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.inline-form, .transaction-form, .crypto-transaction-form { display: grid; gap: 14px; align-items: start; }
.inline-form { grid-template-columns: minmax(220px, 1fr) 120px minmax(170px, auto) auto; }
.transaction-form, .crypto-transaction-form { position: relative; grid-template-columns: repeat(6, minmax(110px, 1fr)); overflow: visible; }

label, .form-field {
    display: grid;
    min-width: 0;
    gap: 7px;
    color: #98a7b9;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.025em;
}
.form-field > label { display: block; }

input, select, button { min-height: 42px; border: 1px solid var(--border-strong); border-radius: 7px; font: inherit; }
input, select {
    width: 100%;
    padding: 9px 11px;
    color: var(--text);
    background: #090f17;
    transition: border 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
input:hover, select:hover { background: #0c131d; border-color: #41536b; }
input:focus, select:focus { outline: 0; border-color: var(--green); box-shadow: 0 0 0 3px rgb(50 213 131 / 13%); }

button, .row-link { font-weight: 750; }
button {
    align-self: end;
    padding: 8px 17px;
    color: #04120b;
    background: var(--green);
    border-color: var(--green);
    cursor: pointer;
    transition: transform 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
button:hover { background: var(--green-bright); box-shadow: 0 8px 24px rgb(50 213 131 / 18%); transform: translateY(-1px); }
button:active { transform: translateY(0); }

.secondary-button { color: #c9d5e1; background: var(--surface); border-color: var(--border-strong); }
.secondary-button:hover { color: #fff; background: var(--surface-hover); box-shadow: none; }

.table-wrap {
    overflow: hidden;
    overflow-x: auto;
    background: rgb(13 19 29 / 94%);
    border: 1px solid var(--border);
    border-radius: 11px;
    box-shadow: 0 14px 40px rgb(0 0 0 / 18%);
}

table { width: 100%; border-collapse: collapse; background: transparent; }
th, td { padding: 14px 16px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--border); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background 130ms ease; }
tbody tr:hover { background: rgb(85 166 255 / 5%); }
.clickable-row { cursor: pointer; }
.clickable-row:hover { background: rgb(50 213 131 / 6%); }
.clickable-row:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; background: rgb(50 213 131 / 7%); }
th { color: #738398; background: #0a1018; font-size: 0.66rem; font-weight: 750; letter-spacing: 0.09em; text-transform: uppercase; }
td { color: #b7c2cf; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.79rem; }
th:first-child, td:first-child, .primary-cell { text-align: left; }
.primary-cell { color: #edf3f8; font-family: inherit; font-weight: 750; }
.action-column { width: 1%; }
.portfolio-name-cell { display: flex; align-items: center; gap: 12px; }
.portfolio-type-icon { display: inline-grid; flex: 0 0 auto; width: 30px; height: 30px; place-items: center; border: 1px solid; border-radius: 8px; box-shadow: inset 0 1px rgb(255 255 255 / 4%); }
.portfolio-type-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.portfolio-type-icon.crypto { color: var(--amber); background: rgb(245 185 66 / 9%); border-color: rgb(245 185 66 / 24%); }
.portfolio-type-icon.securities { color: var(--blue); background: rgb(85 166 255 / 9%); border-color: rgb(85 166 255 / 24%); }
.row-link { display: inline-flex; padding: 6px 10px; color: var(--green); font-family: inherit; font-size: 0.75rem; text-decoration: none; background: var(--green-soft); border-radius: 6px; }
.row-link:hover { color: var(--green-bright); }
.portfolio-result { margin-left: 8px; font-weight: 750; }

.metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    gap: 1px;
    overflow: hidden;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 16px 44px rgb(0 0 0 / 18%);
}
.metrics > div { min-width: 0; padding: 19px 20px; background: linear-gradient(145deg, var(--surface-raised), var(--surface)); }
.metrics span, .metrics strong { display: block; }
.metrics span { margin-bottom: 9px; color: var(--muted); font-size: 0.69rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; }
.metrics strong { overflow-wrap: anywhere; color: #edf3f8; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.05rem; }
.positive { color: var(--green) !important; }
.negative, .field-error, .form-error { color: var(--red) !important; }
.valuation-unavailable { color: var(--amber); }

.field-error { min-height: 1em; font-size: 0.69rem; font-weight: 500; }
.form-error { grid-column: 1 / -1; padding: 10px 12px; font-size: 0.8rem; background: var(--red-soft); border: 1px solid rgb(255 107 117 / 22%); border-radius: 7px; }

.alert { padding: 12px 14px; color: #b9c6d3; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid; border-radius: 7px; }
.alert.success { color: #9beac0; background: var(--green-soft); border-color: rgb(50 213 131 / 28%); border-left-color: var(--green); }
.alert.error { color: #ffabb1; background: var(--red-soft); border-color: rgb(255 107 117 / 25%); border-left-color: var(--red); }
.empty-state { margin: 0; padding: 28px 18px; color: var(--muted); background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 10px; }

.chart-panel { padding: 22px 22px 16px; background: linear-gradient(145deg, rgb(18 26 38 / 96%), rgb(10 16 24 / 96%)); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
.chart-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.chart-heading h2 { margin-bottom: 0; font-size: 0.9rem; }
.chart-heading .eyebrow { margin-bottom: 6px; }
.chart-legend { display: flex; gap: 18px; color: var(--muted); font-size: 0.7rem; font-weight: 650; }
.chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.chart-legend span::before { width: 20px; height: 2px; content: ""; background: currentColor; border-radius: 2px; }
.chart-legend .value-series { color: var(--green); }
.chart-legend .cost-series { color: #718096; }
.chart-legend .cost-series::before { background: repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 8px); }
.investment-chart { position: relative; min-height: 260px; margin-top: 12px; }
.investment-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-grid-line { stroke: #243142; stroke-width: 1; stroke-dasharray: 3 6; }
.chart-axis-label { fill: #718096; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; }
.chart-line { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart-line-value { stroke: var(--green); stroke-width: 2.5; filter: drop-shadow(0 0 5px rgb(50 213 131 / 25%)); }
.chart-line-secondary { stroke: #718096; stroke-width: 1.5; stroke-dasharray: 6 6; }
.chart-focus-line { visibility: hidden; stroke: #63758b; stroke-width: 1; stroke-dasharray: 3 4; }
.chart-dot { visibility: hidden; vector-effect: non-scaling-stroke; }
.chart-dot-value { fill: #07110c; stroke: var(--green); stroke-width: 3; }
.chart-dot-secondary { fill: #0d131d; stroke: #9aa9ba; stroke-width: 2; }
.investment-chart svg.is-focused .chart-focus-line, .investment-chart svg.is-focused .chart-dot { visibility: visible; }
.chart-interaction { fill: transparent; cursor: crosshair; touch-action: pan-y; }
.chart-tooltip { position: absolute; z-index: 4; top: 24px; min-width: 185px; padding: 10px 12px; pointer-events: none; color: #dfe7ef; background: rgb(7 11 17 / 94%); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: 0 12px 30px rgb(0 0 0 / 35%); transform: translateX(-50%); }
.chart-tooltip strong, .chart-tooltip span { display: block; }
.chart-tooltip strong { margin-bottom: 6px; color: #fff; font-size: 0.74rem; }
.chart-tooltip span { margin-top: 3px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.7rem; }
.chart-tooltip span:first-of-type { color: var(--green); }
.chart-tooltip span:last-of-type { color: #a4b1c0; }
.chart-empty { display: grid; min-height: 220px; margin: 0; place-items: center; color: var(--muted); font-size: 0.82rem; text-align: center; border: 1px dashed var(--border); border-radius: 9px; }

.instrument-autocomplete { position: relative; z-index: 100; }
.instrument-suggestions { position: absolute; z-index: 1000; top: calc(100% + 5px); left: 0; width: min(440px, calc(100vw - 40px)); max-height: 248px; overflow-y: auto; color: var(--text); font-size: 0.75rem; font-weight: 500; line-height: 1.25; background: #0b111a; border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: var(--shadow); }
.instrument-option { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 2px 10px; width: 100%; min-height: 0; padding: 9px 11px; color: var(--text); font-family: inherit; font-size: 0.75rem; font-weight: 500; line-height: 1.25; text-align: left; background: #0b111a; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; }
.instrument-option:last-child { border-bottom: 0; }
.instrument-option:hover, .instrument-option.active { color: #fff; background: var(--surface-hover); transform: none; box-shadow: none; }
.instrument-symbol { grid-row: 1 / span 2; align-self: center; color: var(--green); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.76rem; font-weight: 800; }
.instrument-name, .instrument-meta { min-width: 0; overflow-wrap: anywhere; }
.instrument-name { overflow: hidden; font-size: 0.75rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.instrument-meta { color: var(--muted); font-size: 0.68rem; font-weight: 500; }

.auth-page { display: grid; min-height: 100vh; place-items: center; padding: 28px; }
.auth-card { position: relative; width: min(100%, 430px); padding: 38px; overflow: hidden; background: rgb(13 19 29 / 96%); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 30px 90px rgb(0 0 0 / 46%); }
.auth-card::before { position: absolute; top: 0; right: 0; left: 0; height: 2px; content: ""; background: linear-gradient(90deg, transparent, var(--green), transparent); }
.auth-card h1 { margin-top: 4px; }
.auth-card .eyebrow { display: flex; align-items: center; gap: 8px; }
.auth-card .eyebrow::before { width: 7px; height: 7px; content: ""; background: var(--green); border-radius: 50%; box-shadow: 0 0 12px var(--green); }
.auth-form { display: grid; gap: 18px; margin: 26px 0 0; }
.auth-form label { display: grid; gap: 7px; }
.auth-form input { width: 100%; }
.profile-page { max-width: 680px; }
.profile-page > h1 { margin-bottom: 32px; }
.profile-form { max-width: 460px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 900px) {
    .transaction-form, .crypto-transaction-form { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
    .metrics { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
}

@media (max-width: 620px) {
    .app-header { min-height: 60px; padding: 0 14px; }
    .brand { font-size: 0.75rem; }
    .brand::before { width: 23px; height: 23px; }
    .header-actions { gap: 0; }
    .header-link { padding: 8px 7px; font-size: 0.74rem; }
    .page { width: min(100% - 28px, 1240px); padding-top: 30px; }
    .page-heading { align-items: stretch; flex-direction: column; }
    .heading-metric { min-width: 0; text-align: left; }
    .inline-form, .transaction-form, .crypto-transaction-form, .metrics { grid-template-columns: 1fr; }
    .form-band { padding: 18px; }
    .chart-panel { padding: 18px 12px 12px; }
    .chart-heading { padding: 0 6px; flex-direction: column; }
    .investment-chart { min-height: 210px; }
    .chart-tooltip { top: 10px; }
    .instrument-suggestions { width: min(420px, calc(100vw - 28px)); }
    .instrument-option { grid-template-columns: 76px minmax(0, 1fr); }
    .auth-card { padding: 30px 24px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}