:root {
    --bg: #f2f5fa;
    --panel: #ffffff;
    --panel-2: #f8fafc;
    --text: #1e293b;
    --muted: #607089;
    --border: #dbe4f0;
    --accent: #1d4ed8;
    --gain: #0f9d58;
    --loss: #d93025;
    --bg-grad-top: #f8fafc;
    --on-accent: #ffffff;
    --accent-strong: #1e40af;
    --text-strong: #0f172a;
    --border-soft: #edf2f8;
    --thead-bg: #f8fbff;
    --gain-soft: #e9f8ef;
    --gain-strong: #0f7a46;
    --loss-strong: #b42318;
    --warn-soft: #fffbeb;
    --warn-border: #f4d48b;
    --warn-text: #7c5a10;
    --info-soft: #eff6ff;
    --info-border: #bfdbfe;
    --info-text: #1e40af;
    --chip-edit-bg: #e7f0ff;
    --chip-edit-border: #bfd4ff;
    --chip-edit-text: #1e3a8a;
    --chip-del-bg: #ffebee;
    --chip-del-border: #f7c8cc;
    --chip-del-text: #9f1239;
    --shadow-menu: rgba(15, 23, 42, 0.16);
    --backdrop: rgba(0, 0, 0, 0.55);
    color-scheme: light dark;
    --space-1: clamp(8px, 1.1vw, 12px);
    --space-2: clamp(10px, 1.6vw, 16px);
    --radius: clamp(10px, 1.2vw, 14px);
    --text-sm: clamp(0.78rem, 1.7vw, 0.92rem);
    --text-md: clamp(0.9rem, 1.9vw, 1rem);
    --text-lg: clamp(1.12rem, 2.4vw, 1.3rem);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: linear-gradient(180deg, var(--bg-grad-top), var(--bg));
    color: var(--text);
}

#app-shell {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-2);
    display: grid;
    gap: var(--space-1);
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-1);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-1);
}

.brand h1 {
    margin: 0;
    font-size: var(--text-lg);
}

.brand p {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: var(--text-sm);
}

.top-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn {
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 2px);
    padding: 9px 12px;
    background: var(--panel-2);
    color: var(--text);
    cursor: pointer;
    font-size: var(--text-md);
    white-space: nowrap;
}

.btn-primary {
    border-color: var(--accent-strong);
    background: var(--accent);
    color: var(--on-accent);
}

.btn-connected {
    border-color: var(--gain);
    background: var(--gain-soft);
    color: var(--gain-strong);
}

.btn-danger {
    border-color: var(--loss-strong);
    background: var(--loss);
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-1);
    position: sticky;
    top: 8px;
    z-index: 3;
}

.summary-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-1);
}

.summary-card h3 {
    margin: 0;
    color: var(--muted);
    font-size: clamp(0.72rem, 1.5vw, 0.8rem);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.summary-card .value {
    margin-top: 6px;
    font-size: clamp(1rem, 2.4vw, 1.2rem);
    font-weight: 650;
}

.controls {
    display: flex;
    justify-content: space-between;
    gap: var(--space-1);
    flex-wrap: wrap;
}

.search-wrap,
.filter-wrap {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.search-wrap {
    flex: 1 1 320px;
}

input,
select {
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 2px);
    background: var(--panel);
    color: var(--text);
    padding: 9px 10px;
    font-size: var(--text-md);
}

#search-input {
    width: 100%;
    min-width: 220px;
}

.account-filter-wrap {
    position: relative;
}

.account-filter-btn {
    min-width: 170px;
    text-align: left;
}

.account-filter-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 6;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px;
    min-width: 220px;
    max-height: 220px;
    overflow: auto;
    box-shadow: 0 10px 30px var(--shadow-menu);
}

.account-filter-menu label {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 5px 4px;
    font-size: var(--text-sm);
    color: var(--text);
}

.summary-subline {
    margin-top: 5px;
    color: var(--muted);
    font-size: clamp(0.72rem, 1.4vw, 0.82rem);
}

.status {
    background: var(--warn-soft);
    border: 1px solid var(--warn-border);
    color: var(--warn-text);
    border-radius: calc(var(--radius) - 2px);
    padding: 8px 10px;
    font-size: var(--text-sm);
}

.undo-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--info-soft);
    border: 1px solid var(--info-border);
    color: var(--info-text);
    border-radius: calc(var(--radius) - 2px);
    padding: 8px 10px;
    font-size: var(--text-sm);
}

.hidden {
    display: none;
}

.table-wrap {
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
}

.positions-table {
    width: 100%;
    min-width: 940px;
    border-collapse: collapse;
}

.positions-table th,
.positions-table td {
    text-align: right;
    padding: clamp(8px, 1.4vw, 10px) clamp(6px, 1.2vw, 8px);
    border-bottom: 1px solid var(--border-soft);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: clamp(0.76rem, 1.55vw, 0.92rem);
}

.positions-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--thead-bg);
    font-size: clamp(0.74rem, 1.45vw, 0.86rem);
    letter-spacing: 0.01em;
}

.positions-table th:first-child,
.positions-table td:first-child {
    text-align: left;
    font-weight: 700;
    color: var(--text-strong);
}

.positions-table th:nth-child(2),
.positions-table td:nth-child(2) {
    text-align: center;
}

.positions-table th:nth-child(3),
.positions-table td:nth-child(3) {
    text-align: left;
    color: var(--muted);
}

.row-actions {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.chip {
    padding: 6px 8px;
    border-radius: 8px;
    font-size: clamp(0.74rem, 1.6vw, 0.82rem);
    border: 1px solid transparent;
    cursor: pointer;
    min-height: 32px;
}

.chip-edit {
    background: var(--chip-edit-bg);
    border-color: var(--chip-edit-border);
    color: var(--chip-edit-text);
    font-weight: 600;
}

.chip-delete {
    background: var(--chip-del-bg);
    border-color: var(--chip-del-border);
    color: var(--chip-del-text);
    font-weight: 600;
}

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

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

.modal {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel);
    color: var(--text);
    width: min(420px, calc(100vw - 24px));
}

.modal::backdrop {
    background: var(--backdrop);
}

#position-form {
    padding: 14px;
    display: grid;
    gap: 10px;
}

#position-form h2 {
    margin: 0 0 6px;
    font-size: 1rem;
}

#position-form label {
    display: grid;
    gap: 5px;
    font-size: 0.88rem;
    color: var(--muted);
}

#position-form menu {
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.ticker-cell {
    font-weight: 800;
    letter-spacing: 0.02em;
    font-size: clamp(0.82rem, 1.75vw, 0.97rem);
}

.expand-indicator {
    display: none;
    margin-right: 6px;
    color: var(--muted);
}

.expand-indicator.open {
    transform: rotate(90deg);
    display: inline-block;
}

.mobile-detail-row {
    display: none;
}

.mobile-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    background: var(--panel-2);
}

.mobile-detail-grid div {
    font-size: 0.82rem;
    color: var(--muted);
}

.mobile-detail-grid strong {
    display: block;
    margin-top: 2px;
    color: var(--text);
    font-size: 0.92rem;
}

@media (max-width: 900px) {
    .summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .top-actions .btn {
        min-height: 42px;
    }
}

@media (max-width: 600px) {
    #app-shell {
        padding: 10px;
    }

    .summary-grid {
        grid-template-columns: 1fr;
        top: 0;
    }

    .table-wrap {
        border-radius: 10px;
    }

    .positions-table {
        min-width: 100%;
    }

    .positions-table thead th:nth-child(3),
    .positions-table thead th:nth-child(4),
    .positions-table thead th:nth-child(5),
    .positions-table thead th:nth-child(6),
    .positions-table thead th:nth-child(7) {
        display: none;
    }

    .positions-table tbody td:nth-child(3),
    .positions-table tbody td:nth-child(4),
    .positions-table tbody td:nth-child(5),
    .positions-table tbody td:nth-child(6),
    .positions-table tbody td:nth-child(7) {
        display: none;
    }

    .positions-table th,
    .positions-table td {
        padding: 10px 6px;
    }

    .positions-table td:first-child {
        cursor: pointer;
    }

    .mobile-detail-row.show {
        display: table-row;
    }

    .search-wrap,
    .filter-wrap {
        width: 100%;
    }

    .filter-wrap select {
        flex: 1 1 140px;
    }

    #search-input {
        min-width: 0;
    }

    .account-filter-btn {
        min-width: 0;
        width: 100%;
    }

    .account-filter-wrap {
        width: 100%;
    }

    .account-filter-menu {
        left: 0;
        right: auto;
        width: 100%;
    }

    .expand-indicator {
        display: inline-block;
    }

    .topbar {
        align-items: flex-start;
    }

    .top-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .top-actions .btn {
        width: 100%;
    }
}

@media (orientation: landscape) and (max-width: 950px) {
    .positions-table {
        min-width: 760px;
    }

    .positions-table th:nth-child(3),
    .positions-table td:nth-child(3),
    .positions-table th:nth-child(4),
    .positions-table td:nth-child(4) {
        display: none;
    }

    .top-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .top-actions .btn {
        width: 100%;
    }

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

/* Dark palette. The document already advertises a dark theme-color in its
   meta tags; this is the stylesheet finally honouring it. Structure is
   untouched -- only the token values change. */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0f1218;
        --bg-grad-top: #141924;
        --panel: #171c25;
        --panel-2: #1d232e;
        --text: #e8edf5;
        --text-strong: #ffffff;
        --muted: #8b9ab0;
        --border: #28303d;
        --border-soft: #222937;
        --thead-bg: #1d232e;
        --accent: #6b93ff;
        --accent-strong: #8fb0ff;
        --on-accent: #0b0f16;
        --gain: #3ecf8e;
        --gain-soft: #10281f;
        --gain-strong: #6fe0ae;
        --loss: #ff6b5e;
        --loss-strong: #ff9086;
        --warn-soft: #2a2313;
        --warn-border: #574a1f;
        --warn-text: #e8c977;
        --info-soft: #14213a;
        --info-border: #2b4270;
        --info-text: #9dbcff;
        --chip-edit-bg: #17223b;
        --chip-edit-border: #2b4270;
        --chip-edit-text: #a8c4ff;
        --chip-del-bg: #2c1719;
        --chip-del-border: #5a2a2f;
        --chip-del-text: #ff9aa4;
        --shadow-menu: rgba(0, 0, 0, 0.55);
        --backdrop: rgba(0, 0, 0, 0.7);
    }
}

.group-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 2px);
    background: var(--panel-2);
    color: var(--text);
    font-size: var(--text-sm);
    cursor: pointer;
    white-space: nowrap;
}

.agg-note {
    color: var(--muted);
    font-size: var(--text-sm);
    white-space: nowrap;
}