:root {
    color-scheme: light;
    --ink: #1c1915;
    --muted: #5e584f;
    --line: #e4dcd0;
    --paper: #f6f1e8;
    --card: #fffdf9;
    --sidebar: #1c2824;
    --sidebar-text: #e7efe9;
    --accent: #0f6b4c;
    --accent-soft: #e5f4ec;
    --gain: #0d7a4f;
    --loss: #9d2c2c;
    --warn: #8a5a12;
    --warn-bg: #fff4df;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", "Helvetica Neue", sans-serif;
    color: var(--ink);
    background: var(--paper);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.layout { display: flex; min-height: 100vh; }

.sidebar {
    width: 240px;
    flex: none;
    background: var(--sidebar);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    padding: 22px 14px;
}

.brand { font-weight: 700; letter-spacing: 0.01em; margin: 0 8px 22px; font-size: 18px; }
.brand span { display: block; font-weight: 500; color: #b7c7be; font-size: 12px; margin-top: 4px; }

.nav { display: flex; flex-direction: column; gap: 4px; }
.nav a, .nav-bottom a {
    color: var(--sidebar-text);
    padding: 9px 10px;
    border-radius: 8px;
    text-decoration: none;
}
.nav a.active, .nav a:hover, .nav-bottom a:hover { background: #2a3b35; }

.nav-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 4px; }
.logout { color: #d7c3b2 !important; }

.main { flex: 1; min-width: 0; padding: 28px 32px 48px; }

.top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 22px;
}

h1 { font-size: 28px; margin: 0; font-weight: 650; }
h2 { font-size: 18px; margin: 28px 0 12px; }
h3 { font-size: 16px; margin: 0 0 8px; }

.muted { color: var(--muted); }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.card, .panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 18px;
}
.card .label { color: var(--muted); font-size: 13px; }
.card strong { display: block; margin-top: 6px; font-size: 22px; font-variant-numeric: tabular-nums; }
.gain { color: var(--gain); }
.loss { color: var(--loss); }
.flat { color: var(--ink); }

.bar { height: 12px; background: #efe6d8; border-radius: 99px; overflow: hidden; margin: 8px 0; }
.bar span { display: block; height: 100%; background: var(--accent); }

.callout {
    background: var(--warn-bg);
    color: var(--warn);
    border-radius: 12px;
    padding: 12px 14px;
    margin-top: 12px;
}

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; color: var(--muted); font-weight: 600; }
td.num, th.num { text-align: right; }

.filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
input, select, textarea, button {
    font: inherit;
    color: var(--ink);
}
input, select, textarea {
    background: white;
    border: 1px solid #d9d0c3;
    border-radius: 8px;
    padding: 8px 10px;
}
textarea { min-height: 110px; }

button, .button {
    background: var(--accent);
    color: white;
    border: 0;
    border-radius: 8px;
    padding: 9px 14px;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
}
button.secondary, .button.secondary { background: #e7efe9; color: var(--ink); }
button:hover, .button:hover { text-decoration: none; filter: brightness(1.05); }

.flash { padding: 10px 12px; border-radius: 10px; margin-bottom: 12px; }
.flash.success { background: var(--accent-soft); }
.flash.error { background: #fde8e6; color: var(--loss); }

.badge { display: inline-block; padding: 2px 8px; border-radius: 99px; background: #efe6d8; font-size: 12px; }
.badge.ok { background: var(--accent-soft); color: var(--gain); }
.badge.bad { background: #fde8e6; color: var(--loss); }

.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login { width: min(420px, 100%); }

.pager { display: flex; gap: 8px; margin-top: 14px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.note { font-size: 14px; line-height: 1.45; }

.theme-book { background: #101214; color: #eef1f4; }
.theme-book .main { color: #eef1f4; }
.theme-book h1 { color: #fff; font-size: 22px; }
.theme-book .muted { color: #9aa3ad; }
.theme-book .top label { color: #9aa3ad; }
.theme-book select {
    background: #1c2126;
    color: #fff;
    border-color: #343a40;
}

.book-wrap { overflow-x: auto; margin: 0 -8px; }
.book {
    min-width: 920px;
    border-collapse: collapse;
    font-size: 13px;
}
.book th {
    color: #8b939c;
    font-size: 12px;
    font-weight: 500;
    border-bottom: 1px solid #2a3036;
    padding: 10px 12px;
    white-space: nowrap;
}
.book td {
    border-bottom: 1px solid #23282d;
    padding: 11px 12px;
    vertical-align: middle;
    white-space: nowrap;
}
.book .pos td { background: #14181c; }
.book .leg td { background: #101214; color: #c5ccd3; }
.book .empty { color: #9aa3ad; text-align: left; }
.book .ticker { color: #d5dbe1; }
.book .num { font-variant-numeric: tabular-nums; }
.theme-book .gain { color: #3dcc7a; }
.theme-book .loss { color: #ff5c6c; }
.theme-book .flat { color: #eef1f4; }

.book .pos td:first-child, .book .leg td:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
}
.chev {
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 4px;
    background: transparent;
    color: #9aa3ad;
    display: grid;
    place-items: center;
}
.chev .mark {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid currentColor;
}
.chev[aria-expanded="true"] .mark { transform: rotate(90deg); }
.avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: hsl(var(--hue), 55%, 42%);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    flex: none;
}
.iname { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.iname a { color: #fff; font-weight: 650; }
.iname a:hover { text-decoration: underline; }
.kind { color: #8b939c; font-size: 12px; }
.leg-id { color: #8b939c; margin-left: 60px; }
.side { font-weight: 650; }
.side.buy { color: #3dcc7a; }
.side.sell { color: #ff5c6c; }

@media (max-width: 980px) {
    .layout { flex-direction: column; }
    .sidebar { width: auto; }
    .nav, .nav-bottom { flex-direction: row; flex-wrap: wrap; }
    .nav-bottom { margin-top: 12px; }
    .cards, .filters, .detail-grid { grid-template-columns: 1fr 1fr; }
    .main { padding: 18px 14px 32px; }
}

@media (max-width: 640px) {
    .cards, .filters, .detail-grid { grid-template-columns: 1fr; }
}

/* Public Investio sign-in */
.login-page {
    min-width: 320px;
    background: #f7f9f7;
    color: #14201c;
}

.login-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(440px, 0.82fr);
}

.login-showcase {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: clamp(28px, 4vw, 58px) clamp(34px, 6vw, 96px) 30px;
    color: #f5fffb;
    background:
        radial-gradient(circle at 86% 16%, rgba(34, 197, 139, .2), transparent 28%),
        linear-gradient(145deg, #071f1b 0%, #0b322a 52%, #0b2823 100%);
}

.login-showcase::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .17;
    background-image:
        linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
}

.login-showcase-glow {
    position: absolute;
    z-index: -1;
    width: 480px;
    height: 480px;
    right: -260px;
    bottom: -210px;
    border-radius: 50%;
    background: rgba(43, 214, 153, .13);
    filter: blur(2px);
}

.investio-logo,
.login-mobile-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: max-content;
    color: inherit;
    text-decoration: none;
}

.investio-logo:hover { text-decoration: none; }
.investio-logo img,
.login-mobile-brand img { display: block; }

.investio-logo span,
.login-mobile-brand span {
    font-size: 24px;
    font-weight: 750;
    letter-spacing: -.045em;
}

.login-hero {
    width: min(700px, 100%);
    margin: auto 0;
    padding: clamp(58px, 9vh, 110px) 0 42px;
}

.login-eyebrow {
    margin: 0 0 16px;
    color: #18b985;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.login-showcase .login-eyebrow { color: #6ee7b7; }

.login-showcase h1 {
    max-width: 670px;
    margin: 0;
    color: #fff;
    font-size: clamp(42px, 5vw, 70px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.055em;
}

.login-lead {
    max-width: 590px;
    margin: 24px 0 34px;
    color: #b9cec7;
    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.65;
}

.portfolio-preview {
    width: min(650px, 100%);
    padding: 24px 24px 20px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 22px;
    background: rgba(255, 255, 255, .075);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .2);
    backdrop-filter: blur(18px);
}

.preview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.preview-head > div { display: flex; flex-direction: column; }
.preview-head span,
.preview-stats span { color: #9cb7ae; font-size: 11px; }

.preview-head strong {
    margin-top: 5px;
    color: #fff;
    font-size: clamp(24px, 2.6vw, 34px);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.035em;
}

.preview-period {
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    background: rgba(255, 255, 255, .05);
}

.preview-chart { height: 132px; margin: 12px -7px 5px; }
.preview-chart svg { width: 100%; height: 100%; overflow: visible; }
.chart-area { fill: url(#chartArea); }
.chart-line {
    fill: none;
    stroke: #6ee7b7;
    stroke-width: 3;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.preview-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding-top: 17px;
    border-top: 1px solid rgba(255, 255, 255, .09);
}

.preview-stats > div { display: flex; flex-direction: column; gap: 5px; }
.preview-stats strong { color: #eef9f5; font-size: 13px; font-variant-numeric: tabular-nums; }
.preview-stats .positive { color: #6ee7b7; }
.status-ready { display: inline-flex; align-items: center; gap: 6px; }
.status-ready i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6ee7b7;
    box-shadow: 0 0 0 4px rgba(110, 231, 183, .1);
}

.login-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: 25px;
    color: #c6d9d3;
    font-size: 12px;
}

.login-benefits span { display: flex; align-items: center; gap: 8px; }
.login-benefits i {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #6ee7b7;
    background: rgba(110, 231, 183, .1);
    font-size: 10px;
    font-style: normal;
}

.showcase-foot {
    margin: auto 0 0;
    color: #75978d;
    font-size: 11px;
}

.showcase-foot span,
.login-legal span { padding: 0 8px; color: #3d665b; }

.login-access {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px clamp(38px, 7vw, 105px) 24px;
    background: #f7f9f7;
}

.login-access-inner { width: min(430px, 100%); margin: auto; }
.login-mobile-brand { display: none; margin-bottom: 52px; }

.login-heading { margin-bottom: 32px; }
.login-heading .login-eyebrow { margin-bottom: 12px; }
.login-heading h2 {
    margin: 0;
    color: #11211b;
    font-size: clamp(29px, 3vw, 39px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.04em;
}

.login-heading > p:last-child {
    margin: 12px 0 0;
    color: #6b7c75;
    font-size: 14px;
    line-height: 1.55;
}

.login-error {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: -10px 0 22px;
    padding: 11px 13px;
    border: 1px solid #f1c5be;
    border-radius: 10px;
    color: #963e32;
    background: #fff0ed;
    font-size: 13px;
}

.login-error span {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #fff;
    background: #b44b3d;
    font-weight: 750;
}

.login-form { display: flex; flex-direction: column; }
.login-form label {
    display: block;
    margin: 0 0 8px;
    color: #25372f;
    font-size: 12px;
    font-weight: 700;
}

.login-form input {
    width: 100%;
    height: 51px;
    margin: 0 0 20px;
    padding: 0 15px;
    border: 1px solid #cfd9d4;
    border-radius: 11px;
    outline: 0;
    color: #15231d;
    background: #fff;
    font-size: 14px;
    box-shadow: 0 1px 2px rgba(13, 46, 36, .025);
    transition: border-color .15s, box-shadow .15s;
}

.login-form input::placeholder { color: #9aa8a2; }
.login-form input:focus {
    border-color: #12a779;
    box-shadow: 0 0 0 4px rgba(18, 167, 121, .11);
}

.login-submit {
    width: 100%;
    height: 52px;
    margin-top: 4px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #fff;
    background: #0e8b66;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 12px 26px rgba(14, 139, 102, .18);
    transition: transform .15s, background .15s, box-shadow .15s;
}

.login-submit:hover {
    filter: none;
    transform: translateY(-1px);
    background: #0b7657;
    box-shadow: 0 15px 30px rgba(14, 139, 102, .22);
}

.login-submit:focus-visible {
    outline: 3px solid rgba(18, 167, 121, .25);
    outline-offset: 3px;
}

.login-submit svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.login-trust {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid #dfe6e2;
}

.login-trust > svg {
    width: 23px;
    height: 23px;
    flex: none;
    fill: none;
    stroke: #0e8b66;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.login-trust p { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.login-trust strong { color: #2b3b34; font-size: 12px; }
.login-trust span { color: #7c8c85; font-size: 11px; line-height: 1.45; }

.login-legal {
    margin: 54px auto 0;
    color: #94a09b;
    font-size: 10px;
    text-align: center;
}

@media (max-width: 1080px) {
    .login-shell { grid-template-columns: minmax(0, 1fr) 430px; }
    .login-showcase { padding-left: 46px; padding-right: 46px; }
    .login-showcase h1 { font-size: 48px; }
    .login-benefits span:last-child { display: none; }
    .login-access { padding-left: 45px; padding-right: 45px; }
}

@media (max-width: 820px) {
    .login-shell { display: block; }
    .login-showcase { display: none; }
    .login-access {
        min-height: 100svh;
        padding: 38px 24px 22px;
    }
    .login-mobile-brand { display: inline-flex; }
    .login-access-inner { margin: auto; }
}

@media (max-width: 480px) {
    .login-access { justify-content: flex-start; }
    .login-access-inner { margin-top: 0; }
    .login-mobile-brand { margin-bottom: 66px; }
    .login-heading { margin-bottom: 27px; }
    .login-heading h2 { font-size: 29px; }
    .login-legal { margin-top: auto; padding-top: 46px; }
}