:root {
    --bg: #070b10;
    --bg-grid: #0b141d;
    --panel: #0a1118;
    --panel-2: #0e1822;
    --text: #d3e4f2;
    --muted: #7c93a8;
    --line: #1c2b3a;
    --line-strong: #254259;
    --header: #0e1d2a;
    --header-text: #b8f7df;
    --accent: #22e3a4;
    --accent-soft: rgba(34, 227, 164, 0.12);
    --danger: #ff7a7a;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--text);
    font-family: "JetBrains Mono", "SFMono-Regular", "Menlo", monospace;
    min-height: 100vh;
    background:
        linear-gradient(rgba(20, 40, 55, 0.2) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20, 40, 55, 0.18) 1px, transparent 1px),
        radial-gradient(circle at 18% 8%, rgba(34, 227, 164, 0.1) 0%, transparent 30%),
        radial-gradient(circle at 85% 90%, rgba(73, 160, 255, 0.08) 0%, transparent 30%),
        linear-gradient(160deg, var(--bg) 0%, var(--bg-grid) 100%);
    background-size: 32px 32px, 32px 32px, auto, auto, auto;
}

.page {
    padding: 2rem 1rem;
}

.panel {
    max-width: 1240px;
    margin: 0 auto;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    background: linear-gradient(180deg, #0a131d 0%, #0a1118 100%);
    box-shadow:
        0 0 0 1px rgba(34, 227, 164, 0.08),
        0 24px 60px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(184, 247, 223, 0.08);
    overflow: hidden;
}

.panel-header {
    padding: 1.2rem 1.4rem 1.15rem;
    border-bottom: 1px solid var(--line-strong);
    background: linear-gradient(180deg, #0f1f2e 0%, #0c1824 100%);
}

.panel-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}

.panel-title-block {
    min-width: 0;
    max-width: 620px;
}

.eyebrow {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #85f4ce;
}

.panel-header h1 {
    margin: 0.5rem 0 0;
    font-size: clamp(1.2rem, 2.1vw, 1.75rem);
    color: #dcfff1;
    text-shadow: 0 0 14px rgba(34, 227, 164, 0.25);
}

.subtitle {
    margin: 0.35rem 0 0;
    font-size: 0.88rem;
    color: var(--muted);
}

.status-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.9rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(139, 195, 255, 0.12);
}

.auth-panel {
    min-width: 300px;
    max-width: 360px;
    padding: 0.85rem 0.95rem 0.8rem;
    border: 1px solid rgba(139, 195, 255, 0.18);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(8, 18, 28, 0.84) 0%, rgba(7, 13, 20, 0.76) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.auth-state {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
}

.auth-panel-head {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}

.auth-panel-label {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8bc3ff;
}

.auth-panel-copy {
    margin: 0;
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.4;
}

.auth-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.55rem;
}

.auth-actions > div {
    width: 250px;
    max-width: 100%;
}

.auth-helper {
    margin: 0;
    font-size: 0.73rem;
    line-height: 1.45;
    color: var(--muted);
    text-align: right;
}

.auth-state-hidden {
    display: none;
}

.auth-user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.auth-user-name,
.auth-user-email {
    margin: 0;
}

.auth-user-name {
    color: #dcfff1;
    font-size: 0.88rem;
}

.auth-user-email {
    margin-top: 0.25rem;
    color: var(--muted);
    font-size: 0.76rem;
    word-break: break-word;
}

.auth-signout-btn {
    border: 1px solid rgba(255, 122, 122, 0.35);
    background: rgba(255, 122, 122, 0.12);
    color: #ffd5d5;
    border-radius: 9px;
    padding: 0.68rem 0.95rem;
    font: inherit;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.auth-signout-btn:hover {
    background: rgba(255, 122, 122, 0.18);
    border-color: rgba(255, 122, 122, 0.55);
    transform: translateY(-1px);
}

.auth-signout-btn:disabled {
    opacity: 0.6;
    cursor: wait;
    transform: none;
}

.market-status {
    font-size: 0.78rem;
    color: #8bc3ff;
}

.market-status.error {
    color: #ff9f9f;
}

.market-footer {
    border-top: 1px solid var(--line-strong);
    background: #09131d;
    padding: 0.75rem 1rem 0.9rem;
}

#marketDataFooter {
    margin: 0;
    color: #8bc3ff;
    font-size: 0.78rem;
    line-height: 1.4;
    word-break: break-word;
}

table {
    width: 100%;
    min-width: 920px;
    border-collapse: collapse;
    font-size: 0.9rem;
    border: 1px solid var(--line-strong);
    background: var(--panel-2);
}

caption {
    caption-side: top;
    text-align: left;
    padding: 0.3rem 0 0.7rem;
    color: var(--muted);
    font-weight: 600;
    letter-spacing: 0.03em;
}

th,
td {
    border: 1px solid var(--line);
    padding: 0.72rem 0.64rem;
    white-space: nowrap;
}

.head-row th {
    background: var(--header);
    color: var(--header-text);
    text-align: left;
    font-weight: 600;
    border-bottom: 1px solid var(--line-strong);
}

.head-row th:nth-child(5),
td:nth-child(5) {
    text-align: right;
}

td {
    text-align: right;
    background: rgba(8, 15, 23, 0.9);
    font-variant-numeric: tabular-nums;
}

td:nth-child(1),
td:nth-child(2) {
    text-align: left;
}

tr:not(.head-row):not(.total-row):hover td {
    background: rgba(34, 227, 164, 0.08);
}

tr.selected-asset-row td {
    background: rgba(75, 160, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(139, 195, 255, 0.35);
}

.usd,
.cny {
    color: #c1ffe6;
}

.price {
    color: #a8ceff;
}

.currency-select {
    border: 1px solid #2b4358;
    border-radius: 6px;
    background: #0c1824;
    color: #d5ebfa;
    padding: 0.32rem 0.45rem;
    font-size: 0.86rem;
    font-family: inherit;
}

.currency-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(34, 227, 164, 0.2);
}

.total-row td {
    font-weight: 700;
    background: var(--accent-soft);
    color: #d6ffef;
    border-top: 1px solid var(--line-strong);
}

#usdTotal,
#cnyTotal {
    color: var(--accent);
    text-shadow: 0 0 10px rgba(34, 227, 164, 0.22);
    text-align: right;
}

@media (max-width: 768px) {
    .page {
        padding: 0.85rem 0.55rem;
    }

    .panel {
        border-radius: 10px;
    }

    .panel-header {
        padding: 1rem 0.9rem;
    }

    .panel-header-top {
        flex-direction: column;
    }

    .status-strip {
        flex-direction: column;
        align-items: flex-start;
    }

    .auth-panel {
        min-width: 0;
        width: 100%;
    }

    .auth-actions {
        align-items: stretch;
    }

    .auth-helper {
        text-align: left;
    }

    .auth-actions > div {
        width: 100%;
    }

    .auth-user-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .action-tabs {
        grid-template-columns: 1fr;
    }

    .subtitle {
        font-size: 0.82rem;
    }

    .table-wrap {
        padding: 0.65rem;
    }
}

.overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
    padding: 1rem 0.9rem 0;
}

.summary-card {
    padding: 0.95rem 1rem 1rem;
    border: 1px solid var(--line-strong);
    background: linear-gradient(180deg, rgba(10, 20, 31, 0.98) 0%, rgba(9, 16, 24, 0.96) 100%);
    border-radius: 12px;
    min-height: 150px;
}

.summary-card-accent {
    background: linear-gradient(180deg, rgba(17, 44, 45, 0.96) 0%, rgba(10, 24, 27, 0.98) 100%);
    box-shadow: inset 0 0 0 1px rgba(34, 227, 164, 0.08);
}

.summary-label {
    margin: 0;
    font-size: 0.73rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8bc3ff;
}

.summary-value {
    margin: 0.7rem 0 0;
    font-size: clamp(1.45rem, 2.4vw, 2.15rem);
    color: #e7fff5;
    line-height: 1.05;
}

.summary-footnote {
    margin: 0.75rem 0 0;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

.workspace-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(320px, 0.95fr);
    gap: 0.9rem;
    padding: 0.95rem 0.9rem 1rem;
    align-items: start;
}

.workspace-main,
.workspace-sidebar {
    display: grid;
    gap: 0.9rem;
}

.action-stack {
    display: grid;
}

.action-stack-head {
    border-bottom: 0;
    padding-bottom: 0.7rem;
}

.action-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0 1rem 0.95rem;
}

.action-tab {
    border: 1px solid rgba(139, 195, 255, 0.18);
    background: rgba(8, 18, 28, 0.78);
    color: #b7d3e8;
    border-radius: 10px;
    padding: 0.7rem 0.55rem;
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.action-tab:hover {
    border-color: rgba(139, 195, 255, 0.36);
    background: rgba(12, 28, 42, 0.92);
    transform: translateY(-1px);
}

.action-tab.is-active {
    border-color: rgba(34, 227, 164, 0.4);
    background: rgba(15, 49, 43, 0.9);
    color: #dcfff1;
}

.action-tab.action-tab-danger.is-active {
    border-color: rgba(255, 122, 122, 0.42);
    background: rgba(56, 20, 24, 0.88);
    color: #ffd5d5;
}

.action-panels {
    display: grid;
}

.action-panel {
    border-top: 1px solid var(--line);
}

.action-panel:not(.is-active) {
    display: none;
}

.workspace-card {
    border: 1px solid var(--line-strong);
    background: linear-gradient(180deg, #0b1520 0%, #0a1118 100%);
    border-radius: 12px;
    overflow: hidden;
}

.danger-card {
    box-shadow: inset 0 0 0 1px rgba(255, 122, 122, 0.06);
}

.section-head,
.breakdown-head,
.position-editor-head,
.create-asset-head,
.delete-asset-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--line);
}

.section-head h2,
.breakdown-head h2,
.position-editor-head h2,
.create-asset-head h2,
.delete-asset-head h2 {
    margin: 0;
    font-size: 0.96rem;
    color: #dcfff1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.section-head p,
.breakdown-head p,
.position-editor-head p,
.create-asset-head p,
.delete-asset-head p {
    margin: 0.22rem 0 0;
    font-size: 0.8rem;
    color: var(--muted);
}

.position-editor-form {
    padding: 0.9rem 1rem 1rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
    align-items: stretch;
}

.position-editor-form label {
    font-size: 0.82rem;
    color: var(--muted);
}

.position-editor-form select,
.position-editor-form input {
    border: 1px solid #2b4358;
    border-radius: 6px;
    background: #0c1824;
    color: #d5ebfa;
    padding: 0.42rem 0.5rem;
    font-size: 0.86rem;
    font-family: inherit;
}

.position-editor-form select:disabled,
.position-editor-form input:disabled,
.position-editor-form button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.position-editor-form select:focus,
.position-editor-form input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(34, 227, 164, 0.2);
}

.position-editor-form button {
    border: 1px solid #33cc98;
    border-radius: 6px;
    background: linear-gradient(180deg, #29d79f 0%, #1ab17f 100%);
    color: #072018;
    font-weight: 700;
    font-family: inherit;
    padding: 0.46rem 0.62rem;
    cursor: pointer;
    margin-top: 0.2rem;
}

.position-editor-form button:hover {
    filter: brightness(1.05);
}

.create-asset-form {
    padding: 0.9rem 1rem 1rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    align-items: end;
}

.create-asset-field {
    min-width: 0;
}

.create-asset-form label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.82rem;
    color: var(--muted);
}

.create-asset-form input,
.create-asset-form select {
    width: 100%;
    min-width: 0;
    border: 1px solid #2b4358;
    border-radius: 6px;
    background: #0c1824;
    color: #d5ebfa;
    padding: 0.42rem 0.5rem;
    font-size: 0.86rem;
    font-family: inherit;
}

.create-asset-form input:focus,
.create-asset-form select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(34, 227, 164, 0.2);
}

.create-asset-form button {
    border: 1px solid #33cc98;
    border-radius: 6px;
    background: linear-gradient(180deg, #29d79f 0%, #1ab17f 100%);
    color: #072018;
    font-weight: 700;
    font-family: inherit;
    padding: 0.46rem 0.62rem;
    cursor: pointer;
    margin-top: 0.1rem;
}

.create-asset-form button:hover {
    filter: brightness(1.05);
}

.delete-asset-form {
    padding: 0.9rem 1rem 1rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
    align-items: stretch;
}

.delete-asset-form label {
    font-size: 0.82rem;
    color: var(--muted);
}

.delete-asset-form select {
    border: 1px solid #2b4358;
    border-radius: 6px;
    background: #0c1824;
    color: #d5ebfa;
    padding: 0.42rem 0.5rem;
    font-size: 0.86rem;
    font-family: inherit;
}

.delete-asset-form select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(34, 227, 164, 0.2);
}

.delete-asset-form button {
    border: 1px solid #d86262;
    border-radius: 6px;
    background: linear-gradient(180deg, #ff8c8c 0%, #df5d5d 100%);
    color: #2a0909;
    font-weight: 700;
    font-family: inherit;
    padding: 0.46rem 0.62rem;
    cursor: pointer;
}

.delete-asset-form button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.delete-asset-form button:hover:not(:disabled) {
    filter: brightness(1.05);
}

tr.position-edit-success td {
    animation: positionEditFlash 0.9s ease;
}

@keyframes positionEditFlash {
    0% {
        background: rgba(34, 227, 164, 0.36);
        box-shadow: inset 0 0 0 1px rgba(159, 255, 216, 0.5);
    }
    100% {
        background: rgba(75, 160, 255, 0.16);
        box-shadow: inset 0 0 0 1px rgba(139, 195, 255, 0.35);
    }
}

.breakdown-content {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
}

#allocationChart {
    width: 320px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
}

.allocation-legend {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.45rem;
    align-content: start;
}

.legend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    border: 1px solid var(--line);
    background: rgba(8, 15, 23, 0.8);
    padding: 0.45rem 0.55rem;
}

.legend-left {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: none;
}

.legend-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #d3e4f2;
    font-size: 0.85rem;
}

.legend-right {
    color: #9fffd8;
    font-size: 0.85rem;
}

.legend-empty {
    color: var(--muted);
    font-size: 0.86rem;
}

.portfolio-table-card .table-wrap {
    overflow-x: auto;
    padding: 0.9rem;
}

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

    .workspace-grid {
        grid-template-columns: 1fr;
    }

    .breakdown-content {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .allocation-legend {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .overview-grid {
        grid-template-columns: 1fr;
    }

    .workspace-grid {
        padding: 0.85rem 0.65rem 0.9rem;
    }

    .overview-grid {
        padding: 0.85rem 0.65rem 0;
    }
}