:root {
    --color-bg-main: #fff4ee;
    --color-bg-surface: #ffffff;
    --color-bg-soft: #fff8f4;
    --color-border: #edd9cc;
    --color-text-main: #221612;
    --color-text-strong: #140d0b;
    --color-text-muted: #7a655b;
    --color-accent: #ff5c00;
    --color-accent-strong: #e55300;
    --color-accent-soft: rgba(255, 92, 0, 0.12);
    --color-positive: #10b981;
    --color-positive-soft: rgba(16, 185, 129, 0.12);
    --color-danger: #ef4444;
    --color-danger-soft: rgba(239, 68, 68, 0.12);
    --color-info: #3b82f6;
    --color-neutral: #53615a;
    --color-warning: #c77b00;
    --shadow-sm: 0 2px 8px rgba(65, 27, 10, 0.08);
    --shadow-md: 0 12px 26px rgba(65, 27, 10, 0.14);
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --motion-fast: 160ms;
    --motion-base: 240ms;
    --z-toast: 1000;
    --z-modal: 1100;
    --accent-gradient: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
}

body[data-theme='dark'] {
    --color-bg-main: #12100f;
    --color-bg-surface: #1d1918;
    --color-bg-soft: #272222;
    --color-border: #3e3533;
    --color-text-main: #f6e8df;
    --color-text-strong: #fff5ee;
    --color-text-muted: #c3a89d;
    --color-accent: #ff7a33;
    --color-accent-strong: #ff8f57;
    --color-accent-soft: rgba(255, 122, 51, 0.16);
    --color-positive: #34d399;
    --color-positive-soft: rgba(52, 211, 153, 0.14);
    --color-danger: #ff6b6b;
    --color-danger-soft: rgba(255, 107, 107, 0.14);
    --color-neutral: #ddc0b3;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 12px 26px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'IBM Plex Sans', sans-serif;
    background:
        radial-gradient(900px 480px at -10% -15%, #ffe0ce 0%, transparent 62%),
        radial-gradient(760px 420px at 110% 0%, #ffefdc 0%, transparent 65%),
        var(--color-bg-main);
    color: var(--color-text-main);
    min-height: 100vh;
    line-height: 1.5;
}

body[data-theme='dark'] {
    background:
        radial-gradient(900px 480px at -10% -15%, #38271f 0%, transparent 62%),
        radial-gradient(760px 420px at 110% 0%, #2e201a 0%, transparent 65%),
        var(--color-bg-main);
}

.app-container {
    width: min(1380px, calc(100% - 24px));
    margin: 18px auto 24px;
}

.app-container > * {
    animation: riseIn 560ms ease both;
}

.app-container > *:nth-child(2) { animation-delay: 80ms; }
.app-container > *:nth-child(3) { animation-delay: 160ms; }
.app-container > *:nth-child(4) { animation-delay: 240ms; }
.app-container > *:nth-child(5) { animation-delay: 320ms; }

@keyframes riseIn {
    from { transform: translateY(10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.header,
.side-nav,
.hero-main,
.hero-metrics,
.total-value-card,
.performance-section,
.transactions-section,
.risk-section,
.alerts-section,
.settings-section,
.add-asset-section,
.assets-section {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    margin-bottom: 14px;
}

.app-shell {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    transition: grid-template-columns var(--motion-base);
}

.app-shell.nav-collapsed {
    grid-template-columns: 84px minmax(0, 1fr);
}

.main-content {
    min-width: 0;
}

.logo { display: flex; align-items: center; gap: 12px; }
.logo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 0.86rem;
    font-weight: 700;
    background: linear-gradient(145deg, #ffd6be, #ffefdf);
    border: 1px solid #eccdbb;
    color: #823915;
}
.logo-copy h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.24rem;
    color: var(--color-text-strong);
}
.logo-copy p {
    color: var(--color-text-muted);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.76rem;
}

.header-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.market-status,
.last-update {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-family: 'IBM Plex Mono', monospace;
}

.demo-mode-badge {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #ff9c67;
    background: var(--color-accent-soft);
    color: var(--color-accent-strong);
    font-size: 0.78rem;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
}

.header-icon-btn,
.theme-toggle-btn,
.refresh-btn {
    border: 1px solid var(--color-border);
    background: var(--color-bg-soft);
    color: var(--color-text-main);
    border-radius: 10px;
    height: 38px;
    min-width: 38px;
    padding: 0 10px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--motion-fast), box-shadow var(--motion-fast), border-color var(--motion-fast);
}

.refresh-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 38px;
    padding: 0;
}

.header-icon-btn:hover,
.theme-toggle-btn:hover,
.refresh-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    border-color: #ffbe9c;
}

.refresh-btn.loading svg { animation: spin 900ms linear infinite; }
.refresh-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
@keyframes spin { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }

.side-nav {
    position: sticky;
    top: 14px;
    min-height: calc(100vh - 40px);
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nav-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-group-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    padding: 4px 8px;
    font-family: 'IBM Plex Mono', monospace;
}

.nav-link {
    text-decoration: none;
    color: var(--color-text-main);
    border-radius: 10px;
    border: 1px solid transparent;
    padding: 8px 10px;
    font-size: 0.84rem;
    font-weight: 700;
    transition: all var(--motion-fast);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-link:hover { background: var(--color-bg-soft); color: var(--color-text-main); border-color: var(--color-border); }
.nav-link.active {
    background: var(--accent-gradient);
    color: #fff;
    border-color: #e55300;
}

.app-shell.nav-collapsed .nav-group-title {
    display: none;
}

.app-shell.nav-collapsed .nav-link {
    text-align: center;
    padding-inline: 6px;
}

.side-nav-overlay {
    display: none;
}

.error-banner {
    margin-bottom: 12px;
    border: 1px solid #e7b4a5;
    background: #fff2ed;
    color: #8d3428;
    border-radius: var(--radius-md);
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}
.error-banner button {
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    border-radius: 8px;
    padding: 4px 8px;
    cursor: pointer;
}

.hidden { display: none !important; }
.view-section.is-hidden { display: none !important; }

.lab-result-highlight {
    animation: labPulse 2s ease;
}

@keyframes labPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 122, 58, 0.45);
        border-color: rgba(255, 122, 58, 0.45);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 122, 58, 0);
        border-color: rgba(245, 202, 177, 0.85);
    }
}

.header-icon-btn.is-running {
    opacity: 0.72;
    cursor: wait;
}

.desktop-pet {
    position: fixed;
    left: calc(100vw - 96px);
    top: calc(100vh - 128px);
    z-index: 45;
}

.desktop-pet-body {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: linear-gradient(140deg, rgba(255, 147, 71, 0.95), rgba(255, 107, 53, 0.95));
    color: #fff;
    font-size: 1.35rem;
    cursor: grab;
    box-shadow: 0 10px 20px rgba(17, 12, 10, 0.24);
    animation: petGlow 3.8s ease-in-out infinite;
}

.desktop-pet.is-dragging .desktop-pet-body {
    cursor: grabbing;
    animation: none;
}

.desktop-pet-menu {
    position: absolute;
    right: 0;
    bottom: 68px;
    min-width: 150px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 16px 30px rgba(20, 12, 8, 0.2);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.desktop-pet-menu button {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-soft);
    color: var(--text-main);
    font-weight: 600;
    padding: 8px 10px;
    cursor: pointer;
}

.desktop-pet-menu button:hover {
    border-color: rgba(255, 122, 58, 0.65);
    transform: translateY(-1px);
}

@keyframes petGlow {
    0%, 100% { box-shadow: 0 10px 20px rgba(17, 12, 10, 0.24); }
    50% { box-shadow: 0 14px 24px rgba(255, 107, 53, 0.33); }
}

@media (max-width: 980px) {
    .desktop-pet {
        display: none !important;
    }
}

.hero-section {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 12px;
    margin-bottom: 14px;
}
.hero-main,
.hero-metrics { padding: 18px; }
.hero-eyebrow {
    color: var(--color-accent-strong);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}
.hero-main h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.3rem, 2.6vw, 2rem);
    line-height: 1.2;
    color: var(--color-text-strong);
    margin-bottom: 10px;
}
.hero-desc { color: var(--color-text-muted); font-size: 0.92rem; max-width: 60ch; }
.hero-kpi-strip { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.hero-chip {
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.74rem;
    color: var(--color-text-muted);
    background: var(--color-bg-soft);
}

.hero-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.hero-metric {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
    padding: 10px;
}
.hero-metric-label { color: var(--color-text-muted); font-size: 0.76rem; }
.hero-metric-value {
    margin-top: 4px;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-text-strong);
}
.hero-metric-value.positive { color: var(--color-positive); }
.hero-metric-value.negative { color: var(--color-danger); }
.hero-metric-value.neutral { color: var(--color-neutral); }

.total-value-card,
.performance-section,
.transactions-section,
.risk-section,
.alerts-section,
.settings-section,
.add-asset-section,
.assets-section {
    padding: 22px;
    margin-bottom: 14px;
}

.total-value-card {
    display: grid;
    grid-template-columns: 1fr 250px;
    gap: 16px;
    align-items: center;
}
.total-value-content .label {
    font-size: 0.76rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: 'IBM Plex Mono', monospace;
}
.total-value-main { display: flex; align-items: center; gap: 12px; margin: 8px 0 12px; }
.total-value-content .value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    color: var(--color-text-strong);
}
.sparkline-wrap {
    width: 100px;
    height: 36px;
    padding: 4px;
    border-radius: 9px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-soft);
}
.profit-loss {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-bg-soft);
    padding: 7px 11px;
}
.profit-loss.positive .profit-value,
.profit-loss.positive .profit-percent { color: var(--color-positive); }
.profit-loss.negative .profit-value,
.profit-loss.negative .profit-percent { color: var(--color-danger); }
.chart-container { position: relative; width: 230px; height: 230px; margin-left: auto; }

.kpi-section {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
.kpi-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 13px;
    box-shadow: var(--shadow-sm);
}
.kpi-label { color: var(--color-text-muted); font-size: 0.75rem; margin-bottom: 8px; }
.kpi-value { font-size: 1.06rem; font-weight: 700; }
.kpi-value.positive { color: var(--color-positive); }
.kpi-value.negative { color: var(--color-danger); }
.kpi-value.neutral { color: var(--color-neutral); }

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 10px;
    flex-wrap: wrap;
}
.section-header h3,
.add-asset-section h3,
.assets-section h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.08rem;
    color: var(--color-text-strong);
}
.section-meta,
.method-label,
.tx-time,
.alert-rule-meta,
.alert-history-time {
    font-size: 0.76rem;
    color: var(--color-text-muted);
    font-family: 'IBM Plex Mono', monospace;
}

.meta-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 8px 0 2px;
    border-top: 1px solid var(--color-border);
    margin-top: 8px;
}

.meta-strip .section-meta {
    font-size: 0.72rem;
    line-height: 1.2;
}

.section-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.range-switch { border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; display: inline-flex; }
.range-btn {
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    padding: 6px 10px;
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
}
.range-btn.active { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.method-select {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-bg-soft);
    color: var(--color-text-main);
    padding: 6px 10px;
}
.performance-chart-container { position: relative; height: 320px; }

.macro-section {
    padding: 22px;
    margin-bottom: 14px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}
.macro-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 12px;
}
.macro-chart-wrap {
    position: relative;
    height: 280px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
    padding: 8px;
}
.macro-analysis {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
    padding: 12px;
}
.macro-score {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    margin-bottom: 4px;
}
.macro-regime {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    padding: 5px 10px;
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 10px;
}
.macro-factor-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}
.macro-pro-details {
    margin-top: 8px;
    padding: 8px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-surface);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.macro-factor-row {
    display: grid;
    grid-template-columns: 95px 1fr;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}
.macro-factor-bar {
    position: relative;
    height: 8px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-surface);
    overflow: hidden;
}
.macro-factor-bar > span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    background: var(--accent-gradient);
    border-radius: 999px;
    transition: width var(--motion-base);
}
.macro-regime.positive { color: var(--color-positive); background: var(--color-positive-soft); border-color: rgba(16,185,129,.35); }
.macro-regime.neutral { color: var(--color-neutral); background: rgba(83,97,90,.12); border-color: rgba(83,97,90,.3); }
.macro-regime.negative { color: var(--color-danger); background: var(--color-danger-soft); border-color: rgba(239,68,68,.35); }
.macro-insights {
    list-style: disc;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--color-text-main);
    margin-bottom: 10px;
}

.add-asset-form,
.transaction-form,
.alert-form {
    display: grid;
    gap: 10px;
    align-items: end;
}
.add-asset-form { grid-template-columns: repeat(4, 1fr); }
.transaction-form { grid-template-columns: repeat(6, 1fr); }
.alert-form { grid-template-columns: repeat(4, 1fr); margin-bottom: 10px; }

.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 0.77rem; color: var(--color-text-muted); }
.form-group input,
.form-group select,
.tx-filters select {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-bg-soft);
    color: var(--color-text-main);
    padding: 10px 12px;
    font-size: 0.9rem;
}
.form-group input:focus,
.form-group select:focus,
.tx-filters select:focus {
    outline: none;
    border-color: #ff9c67;
    box-shadow: 0 0 0 3px rgba(255, 92, 0, 0.12);
}

.add-btn,
.cancel-btn,
.tx-delete-btn,
.alert-delete-btn,
.edit-btn,
.delete-btn,
.ghost-btn,
.danger-btn,
.empty-cta-btn {
    font-family: 'IBM Plex Sans', sans-serif;
}

.add-btn {
    border: 1px solid #e55300;
    background: var(--accent-gradient);
    color: #fff;
    border-radius: 11px;
    padding: 10px 12px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}
.add-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.add-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cancel-btn {
    border: 1px solid var(--color-border);
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.inline-error {
    margin-top: 6px;
    color: var(--color-danger);
    font-size: 0.8rem;
}

.tx-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tx-list,
.alert-rules-list,
.alert-history,
.assets-list { display: flex; flex-direction: column; gap: 8px; }

.tx-item,
.alert-rule-item,
.alert-history-item,
.asset-card {
    border: 1px solid var(--color-border);
    background: var(--color-bg-soft);
    border-radius: var(--radius-md);
}

.tx-item {
    display: grid;
    grid-template-columns: 1fr auto auto auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}
.tx-main { display: flex; flex-direction: column; gap: 2px; }
.tx-coin { font-weight: 700; }
.tx-type {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
}
.tx-type.buy { color: var(--color-positive); background: var(--color-positive-soft); }
.tx-type.sell { color: var(--color-danger); background: var(--color-danger-soft); }

.tx-delete-btn,
.alert-delete-btn,
.delete-btn,
.edit-btn,
.ghost-btn,
.danger-btn,
.empty-cta-btn {
    border: 1px solid var(--color-border);
    background: var(--color-bg-surface);
    color: var(--color-text-main);
    border-radius: 8px;
    padding: 6px 9px;
    cursor: pointer;
}
.tx-delete-btn:hover,
.alert-delete-btn:hover,
.delete-btn:hover,
.danger-btn:hover {
    color: var(--color-danger);
    border-color: #e1b2ac;
    background: #fff5f5;
}
.edit-btn:hover {
    color: var(--color-info);
    border-color: #bad0f1;
    background: #f5f9ff;
}

.alert-rule-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
}
.alert-rule-main { display: flex; flex-direction: column; gap: 2px; }
.alert-rule-title { font-weight: 700; }
.alert-toggle { font-size: 0.82rem; color: var(--color-text-muted); display: inline-flex; gap: 6px; align-items: center; }
.alert-history-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 9px 12px;
}

.assets-table-head,
.asset-card {
    display: grid;
    grid-template-columns: 2.2fr 0.95fr 0.75fr 1fr 1fr 1.2fr 0.85fr 1fr auto;
    gap: 8px;
    align-items: center;
}
.assets-table-head {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    padding: 4px 8px 10px;
    margin-bottom: 8px;
    font-family: 'IBM Plex Mono', monospace;
}
.asset-card { padding: 11px 12px; transition: transform var(--motion-fast), box-shadow var(--motion-fast); }
.asset-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.asset-token-cell { display: flex; align-items: center; gap: 10px; }
.asset-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--color-border);
    background: #fff;
}
.asset-info,
.asset-value-info,
.asset-amount-info,
.asset-price-info,
.asset-cost-info,
.asset-contrib-info,
.asset-position-info { display: flex; flex-direction: column; gap: 2px; }
.asset-name { font-weight: 700; }
.asset-symbol,
.asset-holdings { color: var(--color-text-muted); font-size: 0.78rem; }
.current-price,
.asset-value,
.asset-cost,
.asset-position { font-weight: 700; }
.asset-profit { font-size: 0.8rem; }
.asset-profit.positive { color: var(--color-positive); }
.asset-profit.negative { color: var(--color-danger); }
.price-change { font-size: 0.78rem; font-family: 'IBM Plex Mono', monospace; }
.price-change.positive { color: var(--color-positive); }
.price-change.negative { color: var(--color-danger); }
.asset-contrib { font-size: 0.78rem; }
.asset-contrib.positive { color: var(--color-positive); }
.asset-contrib.negative { color: var(--color-danger); }
.asset-actions { display: inline-flex; gap: 6px; justify-content: flex-end; }

.skeleton-row {
    height: 62px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, rgba(255,255,255,0.2) 25%, rgba(255,255,255,0.65) 50%, rgba(255,255,255,0.2) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.empty-state { text-align: center; color: var(--color-text-muted); padding: 30px 14px; }
.empty-icon { font-size: 1.8rem; display: block; margin-bottom: 8px; }
.empty-cta-btn {
    margin-top: 10px;
    background: var(--color-accent-soft);
    color: var(--color-accent-strong);
    border-color: #ffbf9c;
    font-weight: 700;
}
.empty-cta-btn:hover { background: rgba(255, 92, 0, 0.2); }

.risk-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.risk-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px;
    background: var(--color-bg-soft);
}
.risk-label { color: var(--color-text-muted); font-size: 0.76rem; margin-bottom: 6px; }
.risk-value { font-size: 1.05rem; font-weight: 700; }
.risk-hint { margin-top: 4px; font-size: 0.74rem; color: var(--color-text-muted); }
.risk-value.positive { color: var(--color-positive); }
.risk-value.negative { color: var(--color-danger); }
.risk-value.neutral { color: var(--color-neutral); }

.settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.setting-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 14px;
    background: var(--color-bg-soft);
}
.setting-title { font-family: 'Space Grotesk', sans-serif; font-size: 1rem; margin-bottom: 4px; }
.setting-desc { color: var(--color-text-muted); font-size: 0.85rem; margin-bottom: 8px; }
.setting-meta { font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem; }
.toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.85rem;
}
.toggle-label input {
    width: 16px;
    height: 16px;
}

.footer {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    line-height: 1.35;
    padding: 8px 4px 4px;
}
.made-with { margin-top: 4px; }

.toast {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translate(-50%, 20px);
    opacity: 0;
    background: var(--color-bg-surface);
    color: var(--color-text-main);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.84rem;
    box-shadow: var(--shadow-md);
    transition: all var(--motion-base);
    z-index: var(--z-toast);
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast.success { border-color: var(--color-positive); background: var(--color-positive-soft); }
.toast.error { border-color: var(--color-danger); background: var(--color-danger-soft); }

.command-palette {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
}
.command-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
}
.command-dialog {
    position: relative;
    width: min(720px, calc(100% - 24px));
    margin: 10vh auto 0;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-bg-surface);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 16px 16px;
}
#confirmTitle {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.05rem;
    padding: 14px 16px 6px;
}
#confirmMessage {
    color: var(--color-text-muted);
    padding: 0 16px 8px;
}
#commandInput {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--color-border);
    padding: 14px 16px;
    background: var(--color-bg-soft);
    color: var(--color-text-main);
    font-size: 0.95rem;
}
#commandInput:focus { outline: none; }
#commandList {
    list-style: none;
    max-height: 320px;
    overflow: auto;
}
.command-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
}
.command-item:last-child { border-bottom: none; }
.command-item:hover,
.command-item.active { background: var(--color-accent-soft); }
.command-hint { font-size: 0.74rem; color: var(--color-text-muted); }

.strategy-section,
.stress-section,
.attribution-section {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: 18px;
    margin-bottom: 14px;
}

.lab-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
    align-items: end;
}

.lab-targets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.lab-target-item {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 8px 10px;
    background: var(--color-bg-soft);
}

.lab-target-item label {
    display: block;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-bottom: 6px;
}

.lab-target-item input {
    width: 100%;
}

.lab-target-item select {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg-panel);
    color: var(--color-text-primary);
    padding: 8px;
    margin-bottom: 6px;
}

.lab-target-item.is-manual {
    border-style: dashed;
}

.mini-btn {
    margin-top: 8px;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-muted);
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 0.75rem;
    cursor: pointer;
}

.mini-btn:hover {
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.lab-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.lab-table-wrap {
    overflow: auto;
}

.lab-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.lab-table th,
.lab-table td {
    border-bottom: 1px solid var(--color-border);
    padding: 8px 10px;
    text-align: left;
}

.lab-table th {
    color: var(--color-text-muted);
    font-weight: 700;
    font-size: 0.78rem;
}

.lab-status-text {
    min-height: 28px;
    margin-bottom: 10px;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px dashed var(--color-border);
    background: var(--color-bg-soft);
    font-size: 0.82rem;
    color: var(--color-text-muted);
    font-family: 'IBM Plex Mono', monospace;
}

.lab-status-text.is-running {
    color: var(--color-warning);
    border-style: solid;
    background: color-mix(in srgb, var(--color-warning) 10%, var(--color-bg-soft));
}

.lab-status-text.is-success {
    color: var(--color-positive);
    border-style: solid;
    background: color-mix(in srgb, var(--color-positive) 12%, var(--color-bg-soft));
}

.lab-status-text.is-error {
    color: var(--color-danger);
    border-style: solid;
    background: color-mix(in srgb, var(--color-danger) 12%, var(--color-bg-soft));
}

.lab-status-text.is-empty {
    color: var(--color-text-muted);
    border-style: solid;
}

.news-empty-card {
    border: 1px dashed var(--color-border);
    border-radius: 10px;
    padding: 12px;
    background: var(--color-bg-surface);
}

@media (max-width: 1140px) {
    .assets-table-head,
    .asset-card {
        grid-template-columns: 2fr 1fr 0.75fr 1fr 1fr 1.1fr 0.9fr 1fr auto;
    }
}

@media (max-width: 980px) {
    .app-shell {
        grid-template-columns: 1fr;
    }
    .side-nav {
        position: fixed;
        top: 12px;
        left: 12px;
        bottom: 12px;
        width: min(280px, calc(100vw - 24px));
        z-index: 1100;
        transform: translateX(-112%);
        transition: transform var(--motion-base);
    }
    .app-shell.nav-open-mobile .side-nav {
        transform: translateX(0);
    }
    .side-nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        border: none;
        background: rgba(0, 0, 0, 0.36);
        z-index: 1090;
        cursor: pointer;
    }
    .app-shell.nav-collapsed {
        grid-template-columns: 1fr;
    }
    .hero-section,
    .total-value-card,
    .settings-grid { grid-template-columns: 1fr; }
    .chart-container { margin: 0 auto; }
    .kpi-section { grid-template-columns: repeat(2, 1fr); }
    .risk-grid { grid-template-columns: repeat(2, 1fr); }
    .macro-grid { grid-template-columns: 1fr; }
    .transaction-form,
    .alert-form,
    .add-asset-form { grid-template-columns: repeat(2, 1fr); }
    .transaction-form .add-btn,
    .alert-form .add-btn,
    .add-asset-form .add-btn,
    .add-asset-form .cancel-btn { grid-column: span 2; }
}

@media (max-width: 760px) {
    .header { flex-direction: column; align-items: flex-start; gap: 10px; }
    .hero-metrics { grid-template-columns: 1fr; }

    .assets-table-head { display: none; }
    .asset-card,
    .tx-item,
    .alert-rule-item,
    .alert-history-item {
        grid-template-columns: 1fr;
    }
    .asset-actions { justify-content: flex-start; }
    .tx-filters { width: 100%; }
    .tx-filters select { flex: 1 1 0; min-width: 120px; }
}

@media (max-width: 540px) {
    .app-container { width: min(100% - 16px, 1240px); margin-top: 10px; }
    .kpi-section,
    .risk-grid,
    .transaction-form,
    .alert-form,
    .add-asset-form,
    .settings-grid { grid-template-columns: 1fr; }
    .transaction-form .add-btn,
    .alert-form .add-btn,
    .add-asset-form .add-btn,
    .add-asset-form .cancel-btn { grid-column: 1; }
    .section-header { align-items: flex-start; }
}
.news-section {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: 18px;
    margin-bottom: 14px;
}

.news-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 14px;
    margin-bottom: 10px;
}

.news-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 85% 10%, rgba(255, 140, 66, 0.14) 0%, transparent 50%),
        radial-gradient(circle at 10% 80%, rgba(255, 200, 120, 0.08) 0%, transparent 45%),
        var(--color-bg-surface);
}

.news-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.12;
    background-image:
        linear-gradient(0deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 24px 24px;
}

.news-topline {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.news-filter-state,
.news-mode-hint {
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.74rem;
    background: var(--color-bg-soft);
}

.news-mode-hint {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.news-mode-hint.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.news-feed-panel,
.news-insight-panel {
    border: 1px solid var(--color-border);
    background: var(--color-bg-soft);
    border-radius: var(--radius-md);
    padding: 12px;
    min-height: 280px;
    position: relative;
    z-index: 1;
}

.news-item {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-bg-surface);
    padding: 10px;
    margin-bottom: 10px;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
    animation: newsCardIn 260ms ease both;
}

.news-item:hover {
    transform: translateY(-2px);
    border-color: var(--color-accent);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
}

.news-item.featured {
    border-color: var(--color-accent);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent), var(--color-bg-surface);
}

.news-item.featured .news-title {
    font-size: 1.25rem;
}

.news-status-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--color-text-muted);
    font-size: 0.74rem;
}

.news-item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.news-title {
    color: var(--color-text-strong);
    font-weight: 700;
    text-decoration: none;
}

.news-title:hover {
    color: var(--color-accent-strong);
}

.news-summary {
    margin-top: 6px;
    color: var(--color-text-muted);
    font-size: 0.86rem;
}

.news-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    align-items: center;
}

.news-chip,
.news-sentiment,
.news-symbol-btn,
.news-quality,
.news-regime,
.news-confidence,
.news-mode {
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.72rem;
    background: var(--color-bg-surface);
}

.news-symbol-btn {
    cursor: pointer;
    color: var(--color-text-main);
}

.news-symbol-btn:hover {
    border-color: var(--color-accent);
}

.news-local-view-btn {
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    padding: 2px 8px;
    cursor: pointer;
}

.news-local-view-btn:hover {
    border-color: var(--color-accent-strong);
    color: var(--color-accent-strong);
}

.news-positive { color: var(--color-positive); }
.news-negative { color: var(--color-danger); }
.news-neutral { color: var(--color-neutral); }

.news-insight-summary {
    color: var(--color-text-strong);
    font-weight: 600;
    margin-bottom: 10px;
}

.news-insight-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.news-insight-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.news-insight-limitations {
    margin-top: 10px;
}

.news-brief-quick-take {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: rgba(255, 179, 108, 0.08);
    padding: 8px 10px;
}

.news-pro-driver-matrix,
.news-pro-evidence,
.news-pro-timeline {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 9px 10px;
    background: rgba(255, 179, 108, 0.06);
    margin-bottom: 8px;
}

.news-pro-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.news-pro-table th,
.news-pro-table td {
    text-align: left;
    padding: 6px 4px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.news-pro-table th {
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 0.72rem;
}

.news-local-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
}

.news-local-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 20, 0.42);
}

.news-local-modal-panel {
    position: relative;
    width: min(760px, calc(100vw - 32px));
    margin: 8vh auto 0;
    border-radius: 14px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-surface);
    box-shadow: var(--shadow-lg);
    padding: 16px;
}

.news-local-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.news-local-modal-body {
    display: grid;
    gap: 8px;
}

.news-local-headline {
    margin: 0;
    font-size: 1.2rem;
}

.news-local-summary {
    margin: 0;
    line-height: 1.6;
}

.news-evidence-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 10px;
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.news-timeline-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.news-timeline-item {
    display: grid;
    grid-template-columns: 86px 1fr auto;
    gap: 8px;
    align-items: start;
    padding: 6px 0;
    border-bottom: 1px dashed var(--color-border);
    font-size: 0.78rem;
}

.news-timeline-item:last-child {
    border-bottom: none;
}

.news-timeline-time {
    color: var(--color-text-muted);
}

.news-timeline-source {
    color: var(--color-text-muted);
    white-space: nowrap;
}

.news-list {
    margin: 6px 0 0 16px;
    color: var(--color-text-muted);
    font-size: 0.84rem;
}

.news-skeleton {
    height: 70px;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.4) 100%);
    background-size: 200% 100%;
    animation: newsShimmer 1.2s linear infinite;
    margin-bottom: 8px;
}

@keyframes newsShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes newsCardIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 980px) {
    .news-grid {
        grid-template-columns: 1fr;
    }
    .news-insight-grid {
        grid-template-columns: 1fr;
    }
    .news-evidence-grid {
        grid-template-columns: 1fr;
    }
    .news-timeline-item {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}

.calendar-section,
.decision-section {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: 18px;
    margin-bottom: 14px;
}

.calendar-item {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-bg-soft);
    padding: 10px;
    margin-bottom: 8px;
}

.calendar-title {
    margin: 0 0 4px;
    font-weight: 700;
    color: var(--color-text-strong);
}

.calendar-meta,
.calendar-sub {
    margin: 2px 0;
    color: var(--color-text-muted);
    font-size: 0.84rem;
}

.calendar-assets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-start;
}

.decision-card {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-bg-soft);
    padding: 12px;
}

.decision-head {
    margin-bottom: 8px;
}