.app-shell {
    display:flex;
    min-height:100vh
}
.sidebar {
    width:250px;
    background:#10231e;
    color:#dcece5;
    padding:28px 18px;
    display:flex;
    flex-direction:column
}
.brand {
    font-size:21px;
    font-weight:800;
    letter-spacing:-.8px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 10px 48px
}
.brand-mark {
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    background:#29bf8e;
    border-radius:11px;
    color:#10231e;
    font-weight:900
}
.accent,.positive {
    color:var(--green)
}
.sidebar nav {
    display:grid;
    gap:7px
}
.sidebar nav a {
    color:#99b0a8;
    text-decoration:none;
    padding:13px 12px;
    border-radius:10px;
    display:flex;
    gap:12px;
    align-items:center;
    font-size:14px
}
.sidebar nav a.active,.sidebar nav a:hover {
    background:#1d3a31;
    color:#fff
}
.sidebar-footer {
    margin-top:auto;
    color:#718f84;
    font-size:12px;
    display:grid;
    gap:16px;
    padding:12px
}
.mini-status {
    color:#a4c4b6
}
.pulse {
    display:inline-block;
    width:7px;
    height:7px;
    background:#27c78d;
    border-radius:50%;
    margin-right:6px;
    box-shadow:0 0 0 4px rgba(39,199,141,.12)
}
.main-content {
    flex:1;
    min-width:0
}
.topbar {
    height:76px;
    background:#fff;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 5%;
    color:var(--muted);
    font-size:13px
}
.breadcrumb span {
    margin:0 10px;
    color:#c2cec9
}
.breadcrumb strong {
    color:var(--ink)
}
.top-actions {
    display:flex;
    gap:18px;
    align-items:center
}
.ui-button-icon,.nav-mobile-toggle {
    border:0;
    background:none;
    font-size:23px;
    color:var(--muted)
}
.nav-mobile-toggle {
    display:none
}
.avatar {
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#dff4eb;
    color:var(--green);
    font-size:11px;
    font-weight:800
}
.page-content {
    max-width:1240px;
    margin:0 auto;
    padding:48px 5% 70px
}
.welcome-row,.section-heading,.detail-header {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px
}
h1 {
    font-size:34px;
    letter-spacing:-1.5px;
    margin:0 0 8px
}
h2 {
    font-size:23px;
    letter-spacing:-.7px;
    margin:0
}
.muted {
    color:var(--muted);
    margin:0;
    font-size:14px
}
.ui-control-primary {
    background:var(--green);
    color:#fff;
    border:0;
    border-radius:9px;
    padding:12px 17px;
    font-weight:700;
    box-shadow:0 7px 14px rgba(13,139,103,.16)
}
.metric-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin:38px 0
}
.fund-card,.chart-card,.decision-card {
    background:var(--card);
    border:1px solid var(--line);
    border-radius:15px;
    box-shadow:var(--shadow)
}
.section-heading {
    margin:38px 0 18px
}
.section-heading a {
    font-size:13px;
    color:var(--green);
    font-weight:700;
    text-decoration:none
}
.fund-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px
}
.fund-grid.full {
    margin-top:30px
}
.fund-results-shell {
    position:relative;
    min-height:180px
}
.fund-results-shell.is-filtering .fund-grid,
.fund-results-shell.is-filtering .result-heading,
.fund-results-shell.is-filtering .pagination {
    opacity:.42;
    transform:translateY(3px);
    filter:blur(1px);
    transition:opacity var(--ui-motion-normal) var(--ui-ease-standard),transform var(--ui-motion-normal) var(--ui-ease-standard),filter var(--ui-motion-normal) var(--ui-ease-standard)
}
.filtering-surface {
    position:relative
}
.filtering-surface.is-filtering > table,
.filtering-surface.is-filtering > .admin-table {
    opacity:.42;
    filter:blur(1px);
    transition:opacity var(--ui-motion-normal) var(--ui-ease-standard),filter var(--ui-motion-normal) var(--ui-ease-standard)
}
@media (prefers-reduced-motion: reduce) {
    .fund-results-shell.is-filtering .fund-grid,
    .fund-results-shell.is-filtering .result-heading,
    .fund-results-shell.is-filtering .pagination { transition:none }
}

/* Keep the single sidebar control visually attached to the navigation edge. */
@media (min-width: 801px) {
    .topbar {
        justify-content: flex-start;
        gap: 24px;
        padding-left: 24px;
    }

    .topbar .top-actions {
        margin-left: auto;
    }
}
.fund-card {
    padding:20px;
    text-decoration:none;
    color:var(--ink);
    position:relative;
    overflow:hidden
}
.fund-card.green {
    border-top:3px solid var(--green)
}
.fund-card.blue {
    border-top:3px solid var(--blue)
}
.fund-card.gold {
    border-top:3px solid var(--gold)
}
.fund-card-top,.fund-card-bottom,.decision-row {
    display:flex;
    justify-content:space-between;
    align-items:center
}
.fund-symbol {
    font-weight:900;
    font-size:15px;
    letter-spacing:.5px
}
.fund-symbol.large {
    font-size:28px;
    color:var(--green);
    margin-bottom:10px
}
.signal-pill {
    font-size:10px;
    font-weight:800;
    background:var(--green-soft);
    color:var(--green);
    padding:5px 8px;
    border-radius:5px
}
.fund-card h3 {
    font-size:13px;
    color:var(--muted);
    font-weight:500;
    margin:19px 0 12px
}
.fund-price {
    font-size:22px;
    font-weight:800;
    letter-spacing:-.7px
}
.fund-card-bottom {
    font-size:12px;
    margin-top:12px
}
.negative {
    color:#c56e5d
}
.fund-card-bottom span:last-child {
    color:#a3b0aa
}
.mini-chart {
    height:29px;
    margin:17px -5px -5px;
    background:linear-gradient(168deg,transparent 39%,#a9dfcd 41%,#0d8b67 45%,transparent 47%)
}
.insight-card {
    margin-top:28px;
    background:#e9f7f1;
    border:1px solid #d4efe4;
    border-radius:15px;
    padding:23px;
    display:flex;
    align-items:flex-start;
    gap:15px
}
.insight-icon {
    background:#c6ecdd;
    color:var(--green);
    border-radius:10px;
    padding:10px
}
.insight-card h3 {
    margin:0 0 7px;
    font-size:16px
}
.insight-card p {
    color:#537268;
    font-size:13px;
    line-height:1.6;
    margin:0;
    max-width:730px
}
.insight-card a {
    margin-left:auto;
    color:var(--green);
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
    text-decoration:none
}
.page-title {
    align-items:center;
    margin-top:7px
}
.detail-header {
    align-items:flex-start;
    margin:20px 0 35px
}
.detail-price {
    text-align:right
}
.detail-price {
    min-width:220px;
}
.detail-price .data-pending-compact {
    width:min(100%, 240px);
    min-width:190px;
    margin-left:auto;
}
.detail-price .data-pending-compact strong,
.detail-price .data-pending-compact div span {
    white-space:nowrap;
}
.detail-price span,.detail-price em {
    display:block;
    font-size:12px;
    color:var(--muted);
    font-style:normal
}
.detail-price strong {
    display:block;
    font-size:30px;
    margin:8px 0
}
.detail-grid {
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:18px
}
.chart-card,.decision-card {
    padding:23px
}
.card-header {
    display:flex;
    justify-content:space-between;
    align-items:center
}
.card-header h3 {
    margin:0;
    font-size:15px
}
.decision-card {
    background:#102a23;
    color:#e9f7f1
}
.decision-title {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:16px 0
}
.decision-title strong {
    font-size:32px;
    color:#5bd2a8
}
.decision-title span {
    font-size:13px;
    color:#a5cabc
}
.decision-card p {
    color:#aac9bd;
    font-size:13px;
    line-height:1.6
}
.decision-row {
    border-top:1px solid #28473e;
    padding:13px 0;
    font-size:12px;
    color:#9fbcb0
}
.decision-row strong {
    color:#fff
}
.decision-row small {
    color:#7fa393;
    font-weight:400
}
.bottom-nav {
    display:none
}
.empty-state {
    text-align:center;
    padding:100px;
    color:var(--muted)
}
.loading {
    display:grid;
    place-items:center;
    height:100vh;
    font-size:28px;
    font-weight:900
}
.loading span {
    color:var(--green)
}
@media(max-width:800px) {
    .sidebar {
        display:none
    }
    .topbar {
        height:64px;
        padding:0 18px
    }
    .nav-mobile-toggle {
        display:block
    }
    .breadcrumb {
        font-size:12px
    }
    .page-content {
        padding:30px 18px 90px
    }
    .welcome-row {
        align-items:flex-start;
        display:block
    }
    .welcome-row .ui-control-primary {
        margin-top:20px;
        width:100%
    }
    h1 {
        font-size:29px
    }
    .metric-grid {
        grid-template-columns:1fr;
        gap:10px;
        margin:25px 0
    }
    .metric-card {
        min-height:110px;
        padding:17px
    }
    .metric-card strong {
        font-size:22px;
        margin:9px 0 4px
    }
    .sparkline {
        position:absolute;
        right:20px;
        bottom:20px;
        width:100px
    }
    .fund-grid {
        grid-template-columns:1fr;
        gap:12px
    }
    .section-heading {
        margin-top:30px
    }
    .insight-card {
        display:block
    }
    .insight-card a {
        display:block;
        margin:16px 0 0
    }
    .detail-header {
        display:block
    }
    .detail-price {
        text-align:left;
        margin-top:20px;
        min-width:0
    }
    .detail-price .data-pending-compact {
        margin-left:0
    }
    .detail-grid {
        grid-template-columns:1fr
    }
    .detail-price strong {
        font-size:27px
    }
    .bottom-nav {
        position:fixed;
        display:flex;
        z-index:10;
        bottom:0;
        left:0;
        right:0;
        height:65px;
        background:#fff;
        border-top:1px solid var(--line);
        justify-content:space-around;
        padding-top:9px
    }
    .bottom-nav a {
        color:#94a39d;
        text-decoration:none;
        text-align:center;
        font-size:20px
    }
    .bottom-nav a.active {
        color:var(--green)
    }
    .bottom-nav small {
        display:block;
        font-size:10px;
        margin-top:3px
    }
    .page-title {
        display:block
    }
    .page-title .ui-control-primary {
        margin-top:15px;
        width:100%
    }
}
.ui-field {
    display:grid;
    gap:8px;
    margin:16px 0
}
.ui-field label {
    font-size:13px;
    font-weight:700
}
.ui-field input {
    width:100%;
    border:1px solid var(--line);
    border-radius:12px;
    padding:13px 14px;
    font:inherit;
    background:#fff;
    outline:none
}
.ui-field input:focus {
    border-color:var(--green);
    box-shadow:0 0 0 4px #16a67318
}
.ui-control-primary {
    border:0;
    border-radius:12px;
    background:var(--green);
    color:#fff;
    padding:14px 18px;
    font:inherit;
    font-weight:750;
    cursor:pointer
}
.ui-control-primary:disabled {
    opacity:.65;
    cursor:wait
}
.full-width {
    width:100%;
    margin-top:10px
}
.analysis-data-quality {
    display: grid;
    gap: .3rem;
    margin: .8rem 0 1rem;
    padding: .75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: .75rem;
    background: var(--surface-muted);
    color: var(--text-color);
}
.analysis-data-quality span,
.analysis-data-quality small { color: var(--text-muted); }
.analysis-data-quality ul { margin: .2rem 0 0 .35rem; padding-left: 1rem; color: var(--text-muted); }
.analysis-data-quality li.is-attention { color: #bb7211; font-weight: 700; }
.theme-dark .analysis-data-quality li.is-attention { color: #ffc15a; }
.analysis-data-components { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .45rem; margin-top: .15rem; }
.analysis-data-component { display: grid; gap: .12rem; padding: .5rem .6rem; border: 1px solid var(--border-color); border-radius: .55rem; background: color-mix(in srgb, var(--surface-color) 78%, transparent); }
.analysis-data-component strong { font-size: .82rem; }
.analysis-data-component span { font-size: .8rem; font-weight: 700; }
.analysis-data-component small { font-size: .72rem; }
.analysis-data-quality.is-ready { border-color: rgba(18, 161, 121, .45); }
.analysis-data-quality.is-limited,
.analysis-data-quality.is-enrichment-missing { border-color: rgba(210, 150, 44, .55); }
.analysis-data-quality.is-stale { border-color: rgba(200, 70, 70, .6); }
.analysis-data-component.is-limited,
.analysis-data-component.is-enrichment-missing { border-color: rgba(210, 150, 44, .62); background: color-mix(in srgb, #f4a623 10%, var(--surface-color)); }
.analysis-data-component.is-stale { border-color: rgba(200, 70, 70, .65); background: color-mix(in srgb, #c84646 10%, var(--surface-color)); }

.form-error {
    color:#a33b3b;
    background:#fff1f1;
    border:1px solid #f3caca;
    border-radius:10px;
    padding:11px 12px;
    font-size:13px
}
.page-error {
    margin-top:28px
}
.form-success {
    color:#176d50;
    background:#e9f7f1;
    border:1px solid #c5e8da;
    border-radius:10px;
    padding:11px 12px;
    font-size:13px
}
.sidebar-logout,.ui-control-secondary,.ui-button-close {
    border:1px solid var(--line);
    border-radius:9px;
    background:#fff;
    color:var(--green);
    padding:9px 12px;
    font:inherit;
    font-size:12px;
    font-weight:700;
    cursor:pointer
}
.sidebar-logout {
    background:transparent;
    border-color:#33574b;
    color:#b7d0c6;
    text-align:left
}
.form-card {
    background:var(--card);
    border:1px solid var(--line);
    border-radius:15px;
    padding:22px;
    box-shadow:var(--shadow)
}
.form-card {
    margin-top:24px;
    max-width:620px
}
.form-card h2 {
    margin-bottom:20px
}
.form-card .section-heading {
    margin:0 0 12px
}
.form-card select,.form-card input {
    width:100%;
    border:1px solid var(--line);
    border-radius:10px;
    padding:12px;
    font:inherit;
    background:#fff
}
.form-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px
}
.ui-button-close {
    font-size:20px;
    padding:2px 10px;
    color:var(--muted)
}
.status-badge {
    font-size:11px;
    font-weight:700;
    border-radius:7px;
    padding:6px 8px
}
.status-active {
    background:var(--green-soft);
    color:var(--green)
}
.status-passive {
    background:#fff0ed;
    color:#a95a4b
}
.real-chart {
    height:250px;
    margin-top:25px;
    background:repeating-linear-gradient(0deg,transparent 0,transparent 48px,#edf3ef 49px)
}
.real-chart svg {
    width:100%;
    height:100%;
    overflow:visible
}
.watch-add {
    display:flex;
    gap:8px
}
.watch-add select {
    border:1px solid var(--line);
    border-radius:9px;
    padding:10px;
    background:#fff;
    max-width:260px
}
.watchlist-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-top:30px
}
.watch-item {
    background:var(--card);
    border:1px solid var(--line);
    border-radius:15px;
    padding:20px;
    box-shadow:var(--shadow)
}
.watch-item {
    display:flex;
    align-items:center;
    justify-content:space-between;
    text-decoration:none;
    color:var(--ink)
}
.watch-item strong {
    font-size:18px;
    color:var(--green)
}
.watch-item p {
    margin:6px 0 0;
    color:var(--muted);
    font-size:13px
}
@media(max-width:800px) {
    .watch-add {
        margin-top:18px
    }
    .watch-add select {
        flex:1;
        max-width:none
    }
    .watchlist-grid {
        grid-template-columns:1fr
    }
    .real-chart {
        height:190px
    }
}
/* Shared interaction patterns */
.theme-dark .topbar,.theme-dark .bottom-nav {
    background:#10231e;
    color:var(--muted)
}
.theme-dark input,.theme-dark select,.theme-dark .search-panel {
    background:#19342c;
    color:var(--ink);
    border-color:var(--line)
}
.theme-dark .empty-state h2,.theme-dark .breadcrumb a,.theme-dark .profile-name {
    color:var(--ink)
}
.theme-dark .real-chart {
    background:repeating-linear-gradient(0deg,transparent 0,transparent 48px,#244138 49px)
}
.shell-theme-switch,.ui-button-icon {
    border:1px solid var(--line);
    background:var(--card);
    color:var(--ink);
    border-radius:10px;
    min-width:38px;
    height:36px;
    cursor:pointer;
    font-size:18px
}
.shell-theme-switch:hover,.ui-button-icon:hover {
    border-color:var(--green);
    color:var(--green)
}
.welcome-actions {
    display:flex;
    align-items:center;
    gap:10px
}
.ui-control-secondary {
    border:1px solid var(--line);
    background:var(--card);
    color:var(--ink);
    border-radius:10px;
    padding:11px 14px;
    font-weight:700;
    cursor:pointer;
    text-decoration:none
}
.ui-control-secondary:hover {
    border-color:var(--green);
    color:var(--green)
}
.overlay {
    position:fixed;
    z-index:100;
    inset:0;
    display:grid;
    place-items:center;
    padding:20px;
    background:rgba(8,24,19,.48);
    backdrop-filter:blur(6px)
}
@media(max-width:800px) {
    .form-row {
        grid-template-columns:1fr
    }
}
.service-warning {
    margin:14px 5% 0;
    padding:12px 16px;
    border:1px solid #f0d59b;
    border-radius:10px;
    background:#fff8e8;
    color:#8a6416;
    font-size:13px
}
.ui-control-primary,.ui-control-secondary,.sidebar-logout,.ui-button-close,.ui-button-icon,.nav-mobile-toggle {
    transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease
}
.ui-control-primary:hover {
    transform:translateY(-1px);
    box-shadow:0 10px 22px rgba(13,139,103,.2)
}
.ui-control-secondary:hover {
    background:var(--green-soft);
    border-color:#bde4d5;
    transform:translateY(-1px)
}
.search-panel {
    display:grid;
    grid-template-columns:1fr 1.35fr;
    gap:16px;
    margin-top:24px;
    padding:22px;
    background:rgba(255,255,255,.72);
    border:1px solid var(--line);
    border-radius:22px;
    box-shadow:0 16px 40px rgba(23,55,43,.055);
    backdrop-filter:blur(14px)
}
.inline-loading {
    display:flex;
    align-items:center;
    gap:10px;
    margin:22px 0;
    padding:16px 18px;
    border:1px solid #dcebe4;
    border-radius:14px;
    background:#f2faf6;
    color:#54766a;
    font-size:13px
}
.spinner {
    width:17px;
    height:17px;
    border:2px solid #cde7dc;
    border-top-color:var(--green);
    border-radius:50%;
    animation:spin .7s linear infinite
}
@keyframes spin {
    to {
        transform:rotate(360deg)
    }
}
.risk-badge {
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    padding:5px 9px;
    font-size:10px;
    font-weight:800;
    white-space:nowrap
}
.risk-low {
    background:#e8f7ef;
    color:#17845d
}
.risk-medium {
    background:#fff4dc;
    color:#a96c10
}
.risk-high {
    background:#ffebe8;
    color:#b34d42
}
.signal-up {
    background:#e5f7ef;
    color:#16855e
}
.signal-flat {
    background:#fff4dc;
    color:#9b6a18
}
.signal-down {
    background:#ffebe8;
    color:#b34d42
}
.empty-icon {
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    margin:0 auto 16px;
    border-radius:15px;
    background:var(--green-soft);
    color:var(--green);
    font-size:24px
}
.empty-state h2 {
    color:var(--ink)
}
.real-chart {
    position:relative;
    overflow:hidden;
    border-radius:12px;
    background:repeating-linear-gradient(0deg,transparent 0,transparent 48px,#edf3ef 49px)
}
.real-chart:after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(90deg,rgba(255,255,255,.5),transparent 18%,transparent 82%,rgba(255,255,255,.35))
}
.real-chart svg {
    position:relative;
    z-index:1
}
.fund-card .portfolio-actions {
    margin-top:17px
}
.fund-card .ui-control-secondary,.fund-card .ui-control-primary {
    font-size:12px;
    padding:9px 13px;
    box-shadow:none;
    text-decoration:none
}
.decision-card .risk-badge {
    font-size:11px
}
@media(max-width:800px) {
    .search-panel {
        grid-template-columns:1fr;
        padding:17px;
        border-radius:18px
    }
    .search-panel .ui-field {
        margin:0
    }
    .fund-card:hover {
        transform:none
    }
}
.chart-periods {
    display:flex;
    align-items:center;
    gap:6px;
    margin-top:14px;
    padding:4px;
    width:max-content;
    background:#f1f7f4;
    border:1px solid #e1eee8;
    border-radius:12px
}
.chart-period {
    min-width:42px;
    padding:8px 10px;
    border:0;
    border-radius:9px;
    background:transparent;
    color:#6b8379;
    font:600 12px inherit;
    cursor:pointer;
    transition:background .18s,color .18s,box-shadow .18s
}
.chart-period:hover {
    color:#0d765c;
    background:#fff
}
.chart-period.active {
    color:#fff;
    background:#0d765c;
    box-shadow:0 5px 12px rgba(13,118,92,.2)
}
.chart-period:disabled {
    opacity:.6;
    cursor:wait
}
.empty-inline {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:5px;
    padding:22px 0;
    color:#88a097
}
.empty-inline strong {
    color:#d6eee5;
    font-size:15px
}
.empty-inline span {
    font-size:13px
}
.data-freshness {
    display:block;
    margin-top:8px;
    color:#789187;
    font-size:12px
}
.decision-note {
    margin-top:14px;
    padding:12px 14px;
    border-radius:12px;
    background:#f5faf7;
    color:#6f877d;
    font-size:12px;
    line-height:1.55
}
.app-splash {
    position:fixed;
    inset:0;
    display:grid;
    place-items:center;
    overflow:hidden;
    background:radial-gradient(circle at 15% 15%,#d7f2e8 0,transparent 34%),radial-gradient(circle at 85% 85%,#cdebe0 0,transparent 32%),linear-gradient(135deg,#f8fcfa,#edf7f2);
    color:#0b2d24
}
.splash-content {
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px
}
.splash-mark {
    display:grid;
    place-items:center;
    width:64px;
    height:64px;
    border-radius:20px;
    background:linear-gradient(145deg,#13a67d,#08735c);
    color:#fff;
    font-size:31px;
    font-weight:800;
    box-shadow:0 18px 40px rgba(13,118,92,.22)
}
.splash-title {
    font-size:30px;
    font-weight:800;
    letter-spacing:-1px
}
.splash-title span {
    color:#0d9572
}
.splash-content p {
    margin:0;
    color:#6c857a;
    font-size:14px
}
.splash-loader {
    width:120px;
    height:4px;
    overflow:hidden;
    border-radius:99px;
    background:#dceee7
}
.splash-loader i {
    display:block;
    width:45%;
    height:100%;
    border-radius:inherit;
    background:#0d9572;
    animation:splash-slide 1.1s ease-in-out infinite
}
@keyframes splash-slide {
    0% {
        transform:translateX(-110%)
    }
    100% {
        transform:translateX(250%)
    }
}
.splash-content small {
    color:#91a79e;
    font-size:11px
}
.splash-orb {
    position:absolute;
    border-radius:50%;
    filter:blur(1px);
    opacity:.65
}
.splash-orb-one {
    width:260px;
    height:260px;
    top:-100px;
    right:12%;
    background:rgba(65,190,151,.16)
}
.splash-orb-two {
    width:340px;
    height:340px;
    bottom:-170px;
    left:8%;
    background:rgba(35,143,112,.12)
}
@media(max-width:800px) {
    .chart-periods {
        width:100%;
        justify-content:space-between
    }
    .chart-period {
        flex:1;
        min-width:0;
        padding-left:6px;
        padding-right:6px
    }
}
.user-filters {
    display:grid;
    grid-template-columns:2fr repeat(3,1fr) auto;
    gap:9px;
    margin:0 0 18px
}
.user-filters input,.user-filters select {
    min-width:0;
    width:100%;
    border:1px solid var(--line);
    border-radius:10px;
    padding:11px;
    font:inherit;
    background:#fff
}
.user-filters .ui-control-primary {
    padding:10px 14px;
    font-size:12px;
    white-space:nowrap
}
@media(max-width:800px) {
    .user-filters {
        grid-template-columns:1fr 1fr
    }
    .user-filters input,.user-filters .ui-control-primary {
        grid-column:span 2
    }
    .session-row {
        align-items:flex-start;
        flex-direction:column
    }
    .session-row .ui-control-secondary {
        width:100%
    }
}
.user-filters {
    display:grid;
    grid-template-columns:2fr repeat(3,1fr) auto;
    gap:9px;
    margin:0 0 18px
}
.user-filters input,.user-filters select {
    min-width:0;
    width:100%;
    border:1px solid var(--line);
    border-radius:10px;
    padding:11px;
    font:inherit;
    background:#fff
}
.user-filters .ui-control-primary {
    padding:10px 14px;
    font-size:12px;
    white-space:nowrap
}
.chart-hit-area {
    cursor:crosshair
}
.chart-hover-point {
    pointer-events:none;
    filter:drop-shadow(0 0 5px rgba(8,120,91,.35))
}
.chart-tooltip {
    position:absolute;
    z-index:5;
    transform:translate(-50%,-115%);
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:104px;
    padding:9px 11px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:10px;
    background:rgba(8,48,38,.94);
    color:#fff;
    box-shadow:0 10px 24px rgba(5,38,29,.2);
    pointer-events:none;
    white-space:nowrap
}
.chart-tooltip strong {
    font-size:11px;
    font-weight:700;
    color:#bfe9d9
}
.chart-tooltip span {
    font-size:13px;
    font-weight:800
}
.chart-tooltip:after {
    content:"";
    position:absolute;
    left:50%;
    bottom:-5px;
    width:9px;
    height:9px;
    background:rgba(8,48,38,.94);
    transform:translateX(-50%) rotate(45deg)
}
.breadcrumb {
    display:flex;
    align-items:center;
    gap:10px
}
.breadcrumb a {
    color:var(--muted);
    text-decoration:none;
    transition:color .18s ease
}
.breadcrumb a:hover {
    color:var(--green)
}
.breadcrumb a.active {
    color:var(--ink);
    font-weight:700
}
.profile-link {
    display:flex;
    align-items:center;
    gap:9px;
    color:var(--ink);
    text-decoration:none
}
.profile-link:hover .profile-name {
    color:var(--green)
}
.profile-name {
    font-size:12px;
    font-weight:700;
    max-width:150px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.password-validation-field {
    display:flex;
    align-items:center;
    gap:10px;
    max-width:520px
}
.password-validation-field .ui-input-shell {
    flex:1 1 auto;
    min-width:0
}
.password-validation-status {
    display:inline-flex;
    align-items:center;
    gap:5px;
    flex:0 0 auto;
    font-size:11px;
    font-weight:750;
    white-space:nowrap
}
.password-validation-status.is-checking {
    color:var(--muted)
}
.password-validation-status.is-valid {
    color:#0b8b68
}
.password-validation-status.is-invalid {
    color:#bd514d
}
.detail-user-account-state {
    display:flex;
    flex-direction:column;
    gap:4px;
    margin:0 0 22px;
    padding:12px 14px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--card-soft, var(--green-soft));
    color:var(--muted);
    font-size:12px
}
.detail-user-account-state strong {
    color:var(--ink);
    font-size:12px
}
.detail-user-account-state.is-active {
    border-color:rgba(13,139,103,.35)
}
.detail-user-account-state.is-passive {
    border-color:rgba(190,112,65,.4);
    background:color-mix(in srgb, var(--card) 88%, #d47732)
}
@media(max-width:600px) {
    .password-validation-field {
        align-items:flex-start;
        flex-direction:column;
    }
}
.status-worker-active {
    color:#a4c4b6
}
.status-worker-idle {
    color:#d0a28d
}
.status-worker-idle .pulse {
    background:#d18a63;
    box-shadow:0 0 0 4px rgba(209,138,99,.12)
}
@media(max-width:800px) {
    .profile-name {
        display:none
    }
    .profile-form {
        display:block
    }
}
.avatar-colors {
    display:flex;
    gap:10px;
    flex-wrap:wrap
}
.avatar-color {
    width:30px;
    height:30px;
    border:3px solid var(--card);
    border-radius:50%;
    box-shadow:0 0 0 1px var(--line);
    cursor:pointer
}
.avatar-color .ui-button-content {
    font-size:11px;
    font-weight:850;
    letter-spacing:.02em;
}
.avatar-color.selected {
    box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--card)
}
.sessions-list {
    display:grid;
    gap:10px
}
.session-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    padding:13px 0;
    border-bottom:1px solid #eef3f0
}
.session-row:last-child {
    border-bottom:0
}
.session-row strong,.session-row small {
    display:block
}
.session-row small {
    margin-top:5px;
    color:var(--muted);
    font-size:11px
}
.danger-card {
    border-color:#f0d7d1
}
.ui-control-danger {
    border:1px solid #d99a8e;
    border-radius:9px;
    background:#fff3f0;
    color:#a33b3b;
    padding:11px 14px;
    font:inherit;
    font-size:12px;
    font-weight:700;
    cursor:pointer
}
.ui-control-danger:disabled {
    opacity:.55;
    cursor:not-allowed
}
.confirm-check {
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 15px;
    color:var(--muted);
    font-size:12px
}
.confirm-check input {
    accent-color:var(--green)
}
.watch-add .smooth-select {
    min-width:260px
}
.admin-table .smooth-select {
    min-width:145px
}
.ui-field .smooth-select {
    width:100%
}
@media(max-width:800px) {
    .smooth-select {
        min-width:0;
        width:100%
    }
    .watch-add .smooth-select {
        min-width:0
    }
    .smooth-select-menu {
        position:fixed;
        left:18px;
        right:18px;
        top:auto;
        margin-top:8px;
        max-height:55vh
    }
}
.menu-backdrop {
    display:none
}
.sidebar nav a {
    position:relative;
    overflow:hidden
}
.sidebar nav a:after {
    content:"";
    position:absolute;
    left:0;
    top:10px;
    bottom:10px;
    width:3px;
    border-radius:4px;
    background:#5bd2a8;
    transform:scaleY(0);
    transition:transform .2s ease
}
.sidebar nav a.active:after {
    transform:scaleY(1)
}
.page-content {
    animation:page-in .24s ease-out
}
@keyframes page-in {
    from {
        opacity:0;
        transform:translateY(4px)
    }
    to {
        opacity:1;
        transform:translateY(0)
    }
}
.empty-state {
    background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(234,247,241,.72));
    border:1px solid var(--line);
    border-radius:22px
}
.ui-control-primary {
    cursor:pointer
}
.ui-control-primary:disabled {
    opacity:.58;
    cursor:wait;
    transform:none;
    box-shadow:none
}
@media(max-width:800px) {
    .app-shell.menu-open .sidebar {
        display:flex;
        position:fixed;
        z-index:30;
        inset:0 auto 0 0;
        width:min(82vw,310px);
        box-shadow:18px 0 50px rgba(10,38,29,.22);
        animation:menu-in .22s ease-out
    }
    .menu-backdrop {
        display:block;
        position:fixed;
        z-index:25;
        inset:0;
        border:0;
        background:rgba(9,31,24,.38);
        backdrop-filter:blur(3px)
    }
    @keyframes menu-in {
        from {
            transform:translateX(-100%)
        }
        to {
            transform:translateX(0)
        }
    }
    .sidebar-footer {
        padding-bottom:28px
    }
    .topbar {
        position:sticky;
        top:0;
        z-index:20
    }
    .page-content {
        padding-top:28px
    }
    .empty-state {
        padding:64px 22px
    }
}
.theme-dark .topbar,.theme-dark .bottom-nav {
    background:#10231e;
    color:var(--muted)
}
.theme-dark input,.theme-dark select {
    background:#19342c;
    color:var(--ink);
    border-color:var(--line)
}
.theme-dark .empty-state {
    background:linear-gradient(145deg,#142b24,#193a30)
}
.shell-theme-switch,.ui-button-icon {
    border:1px solid var(--line);
    background:var(--card);
    color:var(--ink);
    border-radius:10px;
    min-width:38px;
    height:36px;
    cursor:pointer;
    font-size:18px
}
.shell-theme-switch:hover,.ui-button-icon:hover {
    border-color:var(--green);
    color:var(--green)
}
.welcome-actions {
    display:flex;
    align-items:center;
    gap:10px
}
.ui-control-secondary {
    border:1px solid var(--line);
    background:var(--card);
    color:var(--ink);
    border-radius:10px;
    padding:11px 14px;
    font-weight:700;
    cursor:pointer;
    text-decoration:none
}
.ui-control-secondary:hover {
    border-color:var(--green);
    color:var(--green)
}
.overlay {
    position:fixed;
    z-index:100;
    inset:0;
    display:grid;
    place-items:center;
    padding:20px;
    background:rgba(8,24,19,.48);
    backdrop-filter:blur(6px)
}
.chart-date-filter {
    display:flex;
    gap:12px;
    margin-top:12px;
    color:var(--muted);
    font-size:11px
}
.chart-date-filter label {
    display:grid;
    gap:5px
}
.chart-date-filter input {
    border:1px solid var(--line);
    border-radius:8px;
    padding:7px;
    background:var(--card);
    color:var(--ink)
}
.chart-divider {
    width:1px;
    background:var(--line);
    margin:4px 5px
}
.chart-zoom {
    font-size:11px;
    color:var(--muted);
    align-self:center
}
@media(max-width:800px) {
    .welcome-actions {
        display:grid;
        grid-template-columns:1fr 1fr;
        margin-top:18px
    }
    .admin-table-wrap {
        overflow:visible
    }
    .admin-table,.admin-table tbody,.admin-table tr,.admin-table td {
        display:block;
        width:100%
    }
    .admin-table thead {
        display:none
    }
    .admin-table tr {
        margin-bottom:12px;
        padding:12px;
        border:1px solid var(--line);
        border-radius:13px;
        background:var(--card)
    }
    .admin-table td {
        display:flex!important;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        padding:9px 2px;
        border-bottom:1px solid var(--line);
        white-space:normal
    }
    .admin-table td:first-child {
        display:grid!important;
        justify-content:initial
    }
    .admin-table td:last-child {
        border-bottom:0
    }
    .toast-stack {
        right:14px;
        bottom:78px;
        width:calc(100vw - 28px)
    }
    .chart-date-filter {
        flex-wrap:wrap
    }
}
.brand-logo {
    display:block;
    width:194px;
    height:54px;
    object-fit:contain;
    object-position:left center
}
.splash-logo {
    display:block;
    width:min(78vw,320px);
    height:auto;
    max-height:120px;
    object-fit:contain
}
.splash-logo-dark {
    display:none
}
.brand {
    min-height:58px
}
.nav-language-toggle {
    border:1px solid var(--line);
    background:var(--card);
    color:var(--ink);
    border-radius:10px;
    min-width:42px;
    height:36px;
    cursor:pointer;
    font-size:11px;
    font-weight:800;
    letter-spacing:.04em
}
.nav-language-toggle:hover {
    border-color:var(--green);
    color:var(--green)
}
.brand-logo {
    width:194px;
    height:54px
}
.brand-mark-logo {
    display:none;
    width:42px;
    height:42px
}
.brand {
    justify-content:flex-start
}
.nav-icon {
    display:inline-grid;
    place-items:center;
    width:20px;
    height:20px;
    flex:none
}
.nav-icon svg {
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round
}
.nav-mobile-toggle svg,
.nav-desktop-toggle svg {
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round
}
.bottom-nav .nav-icon {
    display:grid;
    margin:0 auto
}
.title-spark {
    color:var(--brand-mint);
    font-size:.75em
}
.insight-icon {
    display:grid;
    place-items:center
}
.insight-icon svg {
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round
}
@media(max-width:800px) {
    .brand-logo {
        display:none
    }
    .brand-mark-logo {
        display:block
    }
    .brand {
        justify-content:center;
        padding-left:0;
        padding-right:0
    }
}
.sidebar {
    background:linear-gradient(180deg,var(--sidebar-top) 0%,var(--sidebar-mid) 46%,var(--sidebar-bottom) 100%);
    color:#164737;
    border-right:1px solid rgba(22,143,103,.12);
    box-shadow:inset -1px 0 rgba(255,255,255,.72)
}
.brand {
    position:relative;
    padding-top:0;
    margin-bottom:8px
}
.brand:after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:18px;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(15,175,130,.25),transparent)
}
.brand-logo {
    mix-blend-mode:multiply;
    filter:saturate(1.04);
    border-radius:0
}
.sidebar nav a {
    color:#3d6d5a;
    transition:color .2s ease,background-color .2s ease,transform .2s ease,box-shadow .2s ease
}
.sidebar nav a:hover {
    background:rgba(255,255,255,.64);
    color:#08785b;
    transform:translateX(3px);
    box-shadow:0 8px 18px rgba(22,143,103,.08)
}
.sidebar nav a.active {
    background:linear-gradient(100deg,rgba(255,255,255,.78),rgba(213,247,230,.92));
    color:#08785b;
    box-shadow:0 8px 18px rgba(22,143,103,.11)
}
.sidebar nav a:after {
    background:linear-gradient(180deg,var(--brand-mint),var(--brand-blue))
}
.sidebar-footer {
    color:#4c806c
}
.sidebar-logout {
    background:rgba(255,255,255,.42);
    border-color:rgba(22,143,103,.22);
    color:#256149;
    transition:all .2s ease
}
.sidebar-logout:hover {
    background:#fff;
    color:#08785b;
    border-color:#80d6b0;
    box-shadow:0 8px 18px rgba(22,143,103,.12);
    transform:translateY(-1px)
}
.mini-status {
    display:grid;
    grid-template-columns:auto 1fr;
    column-gap:7px;
    align-items:center
}
.mini-status .heartbeat-time {
    grid-column:2;
    color:#689782;
    font-size:10px;
    margin-top:2px
}
.pulse {
    grid-row:span 2
}
.topbar {
    background:linear-gradient(105deg,#fff 0%,var(--topbar-green) 58%,#ddf7e9 100%);
    border-bottom-color:#ccebdd;
    box-shadow:0 4px 18px rgba(22,143,103,.06)
}
.breadcrumb a,.breadcrumb strong {
    transition:color .2s ease
}
.breadcrumb a:hover {
    color:#08785b
}
.top-actions button,.profile-link {
    transition:transform .2s ease,background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease
}
.top-actions button:hover,.profile-link:hover {
    transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(22,143,103,.12)
}
.shell-theme-switch,.nav-language-toggle {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px
}
.shell-theme-switch svg {
    width:19px;
    height:19px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.35;
    stroke-linecap:round;
    stroke-linejoin:round
}
.shell-theme-switch .moon-icon {
    stroke-width:2.8
}
.nav-language-toggle:hover {
    background:var(--hover-green);
    border-color:#7fd6af;
    color:#08785b
}
.profile-link:hover {
    background:rgba(255,255,255,.68);
    border-radius:12px;
    padding:4px 8px;
    margin:-4px -8px
}
.profile-link:hover .profile-name {
    color:#08785b
}
.nav-mobile-toggle:hover {
    color:#08785b;
    background:var(--hover-green);
    border-radius:10px
}
.ui-control-primary,.ui-control-secondary,.ui-button-icon,.shell-theme-switch,.nav-language-toggle {
    transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease,color .2s ease
}
.ui-control-primary:hover {
    box-shadow:0 10px 24px rgba(15,175,130,.28)
}
.ui-control-secondary:hover,.ui-button-icon:hover {
    background:var(--hover-green);
    border-color:#7fd6af;
    color:#08785b;
    box-shadow:0 8px 18px rgba(22,143,103,.12)
}
.theme-dark .sidebar {
    background:linear-gradient(180deg,#142d25,#10231e 68%,#0d1c18);
    color:#dcece5;
    border-right-color:#29443c
}
.theme-dark .sidebar nav a {
    color:#9bb9ad
}
.theme-dark .sidebar nav a:hover,.theme-dark .sidebar nav a.active {
    background:#1d3a31;
    color:#fff
}
.theme-dark .topbar {
    background:linear-gradient(105deg,#10231e,#16392d);
    border-bottom-color:#29443c
}
.theme-dark .brand-logo {
    mix-blend-mode:normal
}
.theme-dark .sidebar-logout {
    background:transparent;
    color:#b7d0c6
}
@media(max-width:800px) {
    .topbar {
        padding:0 14px
    }
    .nav-language-toggle {
        min-width:58px
    }
    .profile-link:hover {
        padding:0;
        margin:0;
        background:transparent;
        box-shadow:none
    }
    .sidebar .brand-logo {
        display:none
    }
    .sidebar .brand-mark-logo {
        display:block
    }
}
.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
}
.chart-empty-label {
    color:var(--muted);
    text-align:center;
    font-size:12px;
    padding:2px
}
.chart-hit-area {
    cursor:crosshair;
    outline:none;
    pointer-events:all
}
.chart-hit-area:focus {
    stroke:#0d8b67;
    stroke-width:1
}
.fund-tags {
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    margin:12px 0
}
.fund-tag {
    display:inline-flex;
    padding:7px 10px;
    border:1px solid #b9e7d3;
    border-radius:999px;
    background:#effbf5;
    color:#08785b;
    font-size:11px;
    font-weight:700
}
.fund-tag.asset {
    background:#edf7ff;
    border-color:#b8ddf2;
    color:#126d9e
}
.fund-tag.risk {
    background:#fff5e9;
    border-color:#f0d2a8;
    color:#9b5b16
}
.theme-dark .fund-tag {
    background:#1d493b;
    border-color:#3b7760;
    color:#bcebd8
}
.theme-dark .fund-tag.asset {
    background:#183b4b;
    border-color:#2d6a82;
    color:#a7dff7
}
.theme-dark .fund-tag.risk {
    background:#4a3721;
    border-color:#825d30;
    color:#f0c98f
}
.comparison-chart-card {
    margin:26px 0 24px;
    padding:22px;
    border:1px solid var(--line);
    border-radius:20px;
    background:var(--card);
    box-shadow:var(--shadow)
}
.comparison-chart {
    display:block;
    width:100%;
    height:260px;
    margin:18px 0 10px;
    overflow:visible;
    background:linear-gradient(180deg,rgba(234,248,241,.3),transparent);
    border-radius:12px
}
.comparison-grid-line {
    stroke:var(--line);
    stroke-width:.35;
    stroke-dasharray:2 2
}
.comparison-line {
    fill:none;
    stroke-width:1.8;
    vector-effect:non-scaling-stroke
}
.comparison-line-0 {
    stroke:#0faf82
}
.comparison-line-1 {
    stroke:#168fc7
}
.comparison-line-2 {
    stroke:#d18a3e
}
.comparison-line-3 {
    stroke:#9259bf
}
.comparison-line-4 {
    stroke:#d15f78
}
.comparison-legend {
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    font-size:11px;
    color:var(--muted)
}
.comparison-legend span {
    display:inline-flex;
    align-items:center;
    gap:6px
}
.legend-dot {
    width:8px;
    height:8px;
    display:inline-block;
    border-radius:50%
}
.comparison-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:16px
}
.comparison-card {
    padding:20px;
    border:1px solid var(--line);
    border-radius:18px;
    background:var(--card);
    box-shadow:var(--shadow)
}
.comparison-card-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px
}
.comparison-card h3 {
    margin:13px 0 5px;
    font-size:16px;
    line-height:1.3
}
.comparison-metrics {
    display:grid;
    gap:0;
    margin:17px 0 0
}
.comparison-metrics div {
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:11px 0;
    border-top:1px solid var(--line)
}
.comparison-metrics dt {
    color:var(--muted);
    font-size:11px
}
.comparison-metrics dd {
    margin:0;
    font-size:12px;
    font-weight:800;
    text-align:right
}
.theme-dark .comparison-chart {
    background:linear-gradient(180deg,rgba(32,84,66,.35),transparent)
}
.page-content>*,.metric-grid>*,.fund-grid>*,.comparison-grid>*,.notification-panel,.insight-card,.settings-card,.admin-section,.chart-card,.decision-card {
    animation:fundbot-reveal-up .46s cubic-bezier(.2,.75,.25,1) backwards
}
.metric-grid>*:nth-child(2),.fund-grid>*:nth-child(2),.comparison-grid>*:nth-child(2) {
    animation-delay:70ms
}
.metric-grid>*:nth-child(3),.fund-grid>*:nth-child(3),.comparison-grid>*:nth-child(3) {
    animation-delay:140ms
}
.metric-grid>*:nth-child(4),.fund-grid>*:nth-child(4),.comparison-grid>*:nth-child(4) {
    animation-delay:210ms
}
.metric-grid>*:nth-child(5),.fund-grid>*:nth-child(5),.comparison-grid>*:nth-child(5) {
    animation-delay:280ms
}
.metric-grid>*:nth-child(6),.fund-grid>*:nth-child(6),.comparison-grid>*:nth-child(6) {
    animation-delay:350ms
}
@keyframes fundbot-reveal-up {
    from {
        opacity:0;
        transform:translate3d(0,14px,0);
        filter:blur(2px)
    }
    to {
        opacity:1;
        transform:translate3d(0,0,0);
        filter:blur(0)
    }
}
@media(prefers-reduced-motion:reduce) {
    .page-content>*,.metric-grid>*,.fund-grid>*,.comparison-grid>*,.notification-panel,.insight-card,.settings-card,.admin-section,.chart-card,.decision-card {
        animation:none
    }
}
.discovery-categories {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin:20px 0 24px
}
.category-chip {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    border:1px solid var(--line);
    border-radius:999px;
    background:var(--card);
    color:var(--ink);
    font:inherit;
    font-size:12px;
    cursor:pointer;
    transition:transform .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease
}
.category-chip:hover,.category-chip.selected {
    background:#e3f7ed;
    border-color:#79d2ac;
    color:#08785b;
    transform:translateY(-1px)
}
.category-chip span {
    color:var(--muted);
    font-size:11px
}
.pagination {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin:24px 0
}
.theme-dark .category-chip:hover,.theme-dark .category-chip.selected {
    background:#1d493b;
    color:#bcebd8;
    border-color:#4f9d7d
}
.page-content button:focus-visible,.page-content a:focus-visible,.page-content input:focus-visible,.page-content select:focus-visible,.smooth-select:focus-visible {
    outline:3px solid rgba(13,139,103,.35);
    outline-offset:3px
}
.category-chip,.view-toggle button,.range-tabs button {
    cursor:pointer
}
.category-chip:focus-visible,.view-toggle button:focus-visible,.range-tabs button:focus-visible {
    outline:3px solid rgba(13,139,103,.3);
    outline-offset:2px
}
.admin-table .smooth-select {
    font-size:12px
}
.admin-table .smooth-select-trigger {
    padding:8px 10px;
    border-radius:10px
}
.admin-table .smooth-select-menu {
    min-width:150px
}
@media(max-width:800px) {
    .section-loading-grid {
        grid-template-columns:1fr
    }
}
.splash-content.splash-failed {
    width:min(25rem, calc(100vw - 2rem));
    padding:1.25rem;
    border:1px solid var(--ui-card-border, var(--line));
    border-radius:1rem;
    background:var(--card);
    box-shadow:var(--shadow);
}
.splash-content.splash-failed small {
    max-width:32ch;
    color:var(--muted);
    line-height:1.5;
}
.splash-retry {
    min-height:2.5rem;
    padding:0 .9rem;
    border:1px solid var(--green);
    border-radius:.7rem;
    background:var(--green);
    color:#fff;
    font:inherit;
    font-size:.82rem;
    font-weight:750;
    cursor:pointer;
}
.splash-retry:hover { background:var(--green-strong); border-color:var(--green-strong); }
@media(prefers-reduced-motion:reduce) {
    .notification-row {
        transition:none
    }
    .notification-row:hover {
        transform:none
    }
}
.user-filters .smooth-select {
    min-width:0;
    width:100%
}
@media(max-width:800px) {
    .user-filters .smooth-select {
        grid-column:span 1
    }
    .user-filters .smooth-select-menu {
        position:fixed
    }
}
.page-header-standard {
    margin:7px 0 30px
}
.page-header-row {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px
}
.page-header-row h1 {
    margin-bottom:8px
}
.page-header-actions {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px
}
.page-header-actions .ui-control-primary,.page-header-actions .ui-control-secondary {
    white-space:nowrap
}
.empty-state .empty-icon+ h2 {
    margin-top:0
}
.empty-state .ui-control-primary {
    display:inline-flex;
    margin-top:18px;
    text-decoration:none
}
@media(max-width:800px) {
    .page-header-row {
        display:block
    }
    .page-header-actions {
        display:grid;
        grid-template-columns:1fr;
        margin-top:18px
    }
    .page-header-actions .ui-control-primary,.page-header-actions .ui-control-secondary {
        width:100%;
        justify-content:center
    }
    .page-header-standard {
        margin-bottom:24px
    }
}
.route-guard {
    position:fixed;
    z-index:500;
    inset:0;
    display:grid;
    place-items:center;
    padding:24px;
    background:var(--paper)
}
.route-guard .section-loading {
    width:min(100%,560px)
}
.route-guarded {
    visibility:hidden;
    pointer-events:none
}
.mini-status {
    color:#295d49;
    font-weight:750
}
.mini-status .heartbeat-time {
    color:#4d7b68
}
.discover-panel {
    background:linear-gradient(135deg,#f4fcf8 0%,#edf8f3 55%,#f4f8ff 100%);
    border-color:#cdeade
}
.discovery-categories {
    padding:5px;
    border-radius:18px;
    background:linear-gradient(90deg,#e8f8f0,#f0f7ff);
    border:1px solid #d5ece1
}
.category-chip {
    background:rgba(255,255,255,.72);
    box-shadow:0 4px 12px rgba(20,90,65,.05)
}
.category-chip:nth-child(3n+1) {
    --chip-color:#0faf82
}
.category-chip:nth-child(3n+2) {
    --chip-color:#3184c6
}
.category-chip:nth-child(3n) {
    --chip-color:#c18a28
}
.category-chip:hover,.category-chip.selected {
    background:var(--chip-color,#0faf82);
    border-color:transparent;
    color:#fff;
    box-shadow:0 8px 18px color-mix(in srgb,var(--chip-color,#0faf82) 24%,transparent)
}
.category-chip:hover span,.category-chip.selected span {
    color:rgba(255,255,255,.82)
}
.discover-panel+.discovery-categories {
    margin-top:22px
}
.discover-panel~.ui-section-state .fund-grid .fund-card {
    background:linear-gradient(145deg,#fff 0%,#f3fbf7 100%);
    border-color:#d4ebe1;
    box-shadow:0 14px 30px rgba(18,104,76,.08)
}
.discover-panel~.ui-section-state .fund-grid .fund-card:nth-child(3n+2) {
    background:linear-gradient(145deg,#fff 0%,#f1f8ff 100%);
    border-top-color:#3184c6
}
.discover-panel~.ui-section-state .fund-grid .fund-card:nth-child(3n) {
    background:linear-gradient(145deg,#fff 0%,#fff8ed 100%);
    border-top-color:#c18a28
}
.view-toggle {
    display:inline-flex;
    align-items:center;
    gap:3px;
    padding:4px;
    border:1px solid #cde5db;
    border-radius:13px;
    background:linear-gradient(135deg,#effaf5,#f7fbf9);
    box-shadow:0 5px 14px rgba(20,90,65,.07)
}
.view-toggle button {
    width:36px;
    height:32px;
    border:0;
    border-radius:9px;
    background:transparent;
    color:#6c887c;
    font-size:17px;
    line-height:1;
    cursor:pointer
}
.view-toggle button:hover {
    color:#08785b;
    background:#dff5e9
}
.view-toggle button.active {
    color:#fff;
    background:linear-gradient(135deg,#0faf82,#08785b);
    box-shadow:0 5px 12px rgba(13,139,103,.22)
}
.theme-dark .view-toggle {
    border-color:#3d705e;
    background:linear-gradient(135deg,#16372c,#102820);
    box-shadow:0 5px 14px rgba(0,0,0,.22);
}
.theme-dark .view-toggle button {
    color:#a9c8bb;
}
.theme-dark .view-toggle button:hover {
    color:#eaf8f1;
    background:#1d493b;
}
.theme-dark .view-toggle button.active {
    color:#f1fff9;
    background:linear-gradient(135deg,#0faf82,#08785b);
    box-shadow:0 5px 12px rgba(13,139,103,.28);
}
.page-content > *:has(.smooth-select.is-open) {
    position:relative;
    z-index:100
}
.page-header-standard:has(.smooth-select.is-open),.search-panel:has(.smooth-select.is-open),.form-card:has(.smooth-select.is-open),.admin-section:has(.smooth-select.is-open) {
    z-index:120
}
.smooth-select {
    z-index:1
}
.smooth-select.is-open {
    z-index:200
}
.smooth-select-menu {
    z-index:210
}
.discover-actions {
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap
}
.discover-actions .ui-control-primary,.discover-actions .ui-control-secondary {
    min-width:132px;
    text-align:center
}
.analysis-builder {
    max-width:none
}
.analysis-builder .form-row {
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:end
}
.analysis-builder .ui-control-primary {
    margin-top:8px
}
.compare-picker.ui-filter-bar .ui-filter-bar-content {
    grid-template-columns:minmax(0, 434px) auto;
    align-items:end;
    gap:12px 14px;
    margin-bottom:0
}
.compare-picker-actions {
    align-self:end;
}
.compare-picker .compare-fund-picker {
    min-width:0;
}
.compare-picker.ui-filter-bar {
      padding:12px 16px;
      margin-bottom:22px;
      border-color:color-mix(in srgb,var(--green) 30%,var(--line));
  }

.compare-picker-actions {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:nowrap;
}

.compare-picker-actions > * {
    min-width:120px;
}

.compare-picker + .empty-state {
    margin-top:0;
    padding:54px 24px;
}

.compare-picker .smooth-select-trigger,
.compare-picker-actions .ui-control-primary {
    min-height:46px;
}

.compare-picker .compare-fund-picker small {
    display:block;
    margin-top:6px;
    line-height:1.3;
}

.compare-picker .selected-funds {
    min-height:28px;
    margin-top:0;
}

.compare-picker-selection {
    grid-column:1 / -1;
    display:grid;
    gap:6px;
    min-width:0;
}

.compare-picker-actions .ui-control-primary {
    min-width:136px;
    padding-inline:18px;
}
.comparison-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin:-10px 0 18px;
    color:var(--muted);
}
.comparison-selection-summary {
    font-size:.86rem;
    font-weight:600;
}
.comparison-periods {
    display:flex;
    gap:4px;
    padding:4px;
    border:1px solid color-mix(in srgb,var(--green) 24%,var(--line));
    border-radius:12px;
    background:color-mix(in srgb,var(--green-soft) 45%,var(--card));
}
.comparison-periods .ui-button {
    min-height:32px;
    padding:4px 12px;
    border-radius:8px;
}
.comparison-periods .ui-button.is-selected {
    color:#fff;
    background:var(--green);
}
  .compare-picker + .empty-state {
      border-color:color-mix(in srgb,var(--green) 28%,var(--line));
  }

  .fund-search-results-state {
      margin-top:22px;
  }

  .fund-search-results-state > .empty-state {
      border-color:color-mix(in srgb,var(--green) 28%,var(--line));
      box-shadow:0 12px 28px color-mix(in srgb,var(--green) 8%,transparent);
  }

.comparison-table-wrap {
    margin-top:18px;
    overflow-x:auto;
    border:1px solid color-mix(in srgb,var(--green) 18%,var(--line));
    border-radius:12px;
}
.comparison-table {
    width:100%;
    min-width:620px;
    border-collapse:collapse;
    font-size:.82rem;
}
.comparison-table th,
.comparison-table td {
    padding:10px 12px;
    border-bottom:1px solid var(--line);
    text-align:left;
    white-space:nowrap;
}
.comparison-table thead th {
    color:var(--muted);
    font-size:.72rem;
    font-weight:700;
}
.comparison-table tbody tr:last-child th,
.comparison-table tbody tr:last-child td { border-bottom:0; }
.comparison-highlights {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px;
}
.comparison-highlights span {
    padding:7px 10px;
    border:1px solid color-mix(in srgb,var(--green) 22%,var(--line));
    border-radius:999px;
    background:color-mix(in srgb,var(--green-soft) 38%,var(--card));
    font-size:.76rem;
}
.selected-funds {
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    min-height:28px;
    margin-top:9px
}
.selected-fund-chip {
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:6px 9px;
    border-radius:999px;
    background:#e3f7ed;
    color:#08785b;
    font-size:11px;
    font-weight:750
}
.selected-fund-chip button {
    border:0;
    background:transparent;
    color:inherit;
    font-size:16px;
    line-height:1;
    cursor:pointer
}
.user-detail-actions,.job-actions {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin:22px 0;
    padding:16px 18px;
    border:1px solid var(--line);
    border-radius:16px;
    background:color-mix(in srgb, var(--ui-surface-subtle, var(--paper)) 88%, var(--green-soft))
}
.user-detail-actions .ui-control-secondary,.job-actions .ui-control-secondary {
    margin:0
}
.user-detail-action {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px
}
.job-actions {
    margin-top:12px
}
.admin-table-wrap {
    overflow:visible
}
.admin-table tr:has(.smooth-select.is-open),.admin-table td:has(.smooth-select.is-open) {
    position:relative;
    z-index:250
}
.admin-table .smooth-select-menu {
    z-index:300
}
.change-list {
    display:grid;
    gap:10px;
    margin-top:18px
}
.change-row {
    display:grid;
    grid-template-columns:minmax(90px,.35fr) minmax(160px,1fr);
    gap:5px 16px;
    padding:13px 0;
    border-top:1px solid var(--line)
}
.change-row strong {
    color:var(--ink)
}
.change-row span,.change-row small {
    color:var(--muted);
    font-size:12px
}
.change-row small {
    grid-column:1 / -1
}
.snapshot-history-list {
    max-height: 360px;
    overflow-y: auto;
    padding-right: 6px;
}
.history-more-actions {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}
.report-actions {
    margin-top:34px
}
.export-options {
    top:auto;
    bottom:calc(100% + 8px)
}
@media(max-width:1000px) {
    .analysis-builder .form-row {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
}
@media(max-width:800px) {
    .analysis-builder .form-row {
        grid-template-columns:1fr
    }
    .compare-picker.ui-filter-bar .ui-filter-bar-content {
        grid-template-columns:1fr
    }
    .compare-picker .ui-filter-bar-content > .ui-control-primary {
        width:100%
    }
    .discover-actions {
        gap:12px
    }
    .discover-actions .ui-control-primary,.discover-actions .ui-control-secondary {
        flex:1;
        min-width:0
    }
    .user-detail-actions,.job-actions {
        align-items:stretch;
        flex-direction:column
    }
    .user-detail-actions .ui-control-secondary,.job-actions .ui-control-secondary {
        width:100%;
        text-align:left
    }
    .export-options {
        top:auto;
        bottom:calc(100% + 8px)
    }
}
.report-actions {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    margin:28px 0
}
.export-menu {
    position:relative
}
.export-options {
    position:absolute;
    z-index:50;
    right:0;
    top:calc(100% + 8px);
    display:grid;
    min-width:180px;
    padding:7px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--card);
    box-shadow:0 18px 42px rgba(23,55,43,.16)
}
.export-options button {
    padding:11px 12px;
    border:0;
    border-radius:9px;
    background:transparent;
    color:var(--ink);
    font:inherit;
    font-size:12px;
    text-align:left;
    cursor:pointer
}
.export-options button:hover,.export-options button:focus-visible {
    background:var(--green-soft);
    color:var(--green);
    outline:none
}
@media(max-width:800px) {
    .report-actions {
        justify-content:stretch;
        align-items:stretch;
        flex-direction:column
    }
    .report-actions .export-menu,.report-actions .ui-control-secondary {
        width:100%
    }
    .export-options {
        left:0;
        right:0
    }
}
.ui-interaction-guardrails {
    display:block
}
.smooth-select-menu {
    max-height:min(300px,55vh)
}
.portfolio-actions {
    gap:10px 12px
}
.chart-tooltip {
    max-width:min(190px,calc(100% - 16px));
    white-space:normal;
    text-align:center
}
.comparison-chart {
    padding:0 2px
}
@media(max-width:800px) {
    .smooth-select-menu,.user-filters .smooth-select-menu {
        position:absolute;
        left:0;
        right:0;
        top:calc(100% + 8px);
        bottom:auto;
        margin:0;
        max-height:min(300px,55vh)
    }
    .smooth-select.is-open {
        z-index:400
    }
    .page-content > *:has(.smooth-select.is-open) {
        z-index:400
    }
    .portfolio-actions {
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px
    }
    .portfolio-actions > * {
        min-width:0;
        text-align:center
    }
    .chart-tooltip {
        font-size:11px
    }
}
button[aria-busy="true"] {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    cursor:wait
}
button[aria-busy="true"]:before {
    content:"";
    width:14px;
    height:14px;
    flex:0 0 14px;
    border:2px solid currentColor;
    border-right-color:transparent;
    border-radius:50%;
    animation:spin .7s linear infinite
}
@media(prefers-reduced-motion:reduce) {
    button[aria-busy="true"]:before {
        animation:none
    }
}
.mini-chart {
    position:relative;
    height:40px;
    margin:16px 0 0;
    overflow:hidden;
    border-radius:12px;
    background:linear-gradient(180deg,#f0faf6,#fbfefd)
}
.mini-chart:before {
    content:"";
    position:absolute;
    inset:8px 8px 6px;
    background:linear-gradient(180deg,rgba(22,166,120,.25),rgba(22,166,120,.03));
    clip-path:polygon(0 78%,12% 70%,25% 73%,38% 47%,50% 56%,63% 31%,75% 40%,87% 18%,100% 8%,100% 100%,0 100%)
}
.mini-chart:after {
    content:"";
    position:absolute;
    inset:8px 8px 6px;
    background:linear-gradient(155deg,transparent 0 18%,#16a678 19% 22%,transparent 23% 35%,#16a678 36% 39%,transparent 40% 51%,#16a678 52% 55%,transparent 56% 68%,#16a678 69% 72%,transparent 73%);
    clip-path:polygon(0 78%,12% 70%,25% 73%,38% 47%,50% 56%,63% 31%,75% 40%,87% 18%,100% 8%,100% 14%,87% 25%,75% 47%,63% 38%,50% 63%,38% 54%,25% 80%,12% 77%,0 85%)
}
.scenario-table {
    display:grid;
    margin-top:14px
}
.scenario-explanation {
    display:grid;
    gap:6px;
    margin-top:14px;
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--green-soft);
    color:var(--muted);
    font-size:11px;
    line-height:1.45
}
.scenario-explanation strong {
    color:var(--green)
}
.kap-analysis-metrics {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin:16px 0 10px
}
.kap-analysis-metrics > span {
    display:grid;
    gap:4px;
    padding:11px 12px;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--green-soft)
}
.kap-analysis-metrics strong {
    color:var(--ink)
}
.kap-analysis-metrics small {
    color:var(--muted);
    font-size:11px
}
.theme-dark .scenario-explanation,
.theme-dark .kap-analysis-metrics > span {
    background:#17382d;
    border-color:#376653
}
.chart-card {
    position:relative;
    z-index:4;
    overflow:visible
}
.chart-date-filter {
    position:relative;
    z-index:20
}
.chart-date-filter .date-picker-popover {
    z-index:2000
}
.scenario-row {
    display:grid;
    grid-template-columns:minmax(54px,.55fr) minmax(90px,1fr) minmax(90px,1fr);
    gap:14px;
    align-items:center;
    padding:11px 0;
    border-top:1px solid #28473e;
    font-size:11px;
    color:#d8eee6
}
.decision-card .scenario-row span { color:inherit; }
.scenario-row strong {
    text-align:right;
    font-size:11px;
    white-space:nowrap
}
.scenario-head {
    color:#91b8a9;
    font-size:10px;
    font-weight:700
}
.scenario-head span:not(:first-child) {
    text-align:right
}
.scenario-row .positive {
    color:#fff
}
.empty-inline {
    gap:7px
}
.empty-inline strong {
    line-height:1.35
}
.empty-inline span {
    line-height:1.5
}
.mini-chart.signal-down:before {
    transform:scaleY(-1);
    transform-origin:center
}
.mini-chart.signal-down:after {
    filter:hue-rotate(305deg);
    transform:scaleY(-1);
    transform-origin:center
}
.mini-chart.signal-flat:before {
    transform:scaleY(.35);
    transform-origin:center
}
.mini-chart.signal-flat:after {
    opacity:.55;
    transform:scaleY(.35);
    transform-origin:center
}
.category-rank-card em {
    display:block;
    margin-top:3px;
    color:var(--green);
    font-size:13px;
    font-style:normal;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
.category-rank-card small {
    display:block;
    margin-top:4px;
    color:var(--muted);
    font-size:13px;
    line-height:1.35
}
.kap-summary-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin-top:18px;
}
.kap-summary-grid > div {
    display:grid;
    align-content:start;
    gap:5px;
    min-width:0;
    padding:14px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--green-soft);
}
.kap-summary-grid span {
    color:var(--muted);
    font-size:11px;
    font-weight:700;
}
.kap-summary-grid strong {
    overflow-wrap:anywhere;
    color:var(--ink);
    font-size:14px;
    line-height:1.3;
}
.kap-summary-grid small {
    color:var(--muted);
    font-size:12px;
    line-height:1.4;
}
.theme-dark .kap-summary-grid > div {
    background:#17382d;
    border-color:#376653;
}
.chart-periods {
    gap:5px;
    padding:5px;
    background:linear-gradient(135deg,#e9f8f1,#f1f8f5);
    border:1px solid #cfe9dd;
    border-radius:14px;
    box-shadow:0 6px 16px rgba(20,90,65,.06)
}
.chart-period {
    min-width:40px;
    padding:8px 11px;
    border-radius:9px;
    color:#5d7c70
}
.chart-period:hover:not(:disabled) {
    background:#fff;
    color:var(--green);
    box-shadow:0 4px 10px rgba(13,139,103,.1)
}
.chart-period.active {
    background:linear-gradient(135deg,#0faf82,#08785b);
    color:#fff;
    box-shadow:0 6px 14px rgba(13,139,103,.22)
}
.chart-period:disabled {
    opacity:.42;
    cursor:not-allowed
}
.chart-zoom {
    min-width:42px;
    padding:7px 5px;
    border-radius:8px;
    background:rgba(255,255,255,.7);
    color:var(--green);
    font-size:11px;
    font-weight:800;
    text-align:center
}
.chart-zoom-control {
    width:30px;
    min-width:30px;
    padding:7px 0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1
}
.theme-dark .chart-zoom {
    background:rgba(25,58,47,.78);
    color:#8ce4c0
}
.chart-divider {
    width:1px;
    height:20px;
    background:#cfe5db;
    margin:0 3px
}
.chart-date-filter {
    position:relative;
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:16px
}
@media(max-width:800px) {
    .chart-periods {
        width:100%;
        justify-content:space-between
    }
    .chart-period {
        min-width:0;
        flex:1;
        padding:8px 7px
    }
    .chart-zoom {
        min-width:42px
    }
    .date-picker-popover {
        left:0;
        right:0;
        width:min(272px,calc(100vw - 36px))
    }
}
.decision-card .decision-note {
    background:#e5f6ef;
    color:#245d4c;
    border:1px solid #9fd7c0;
    font-weight:600
}
.decision-card .risk-badge.risk-high {
    background:#ffd9d2;
    color:#8f2f29;
    border:1px solid #ffaea2
}
.decision-card .risk-badge.risk-medium {
    background:#ffe7ad;
    color:#754900;
    border:1px solid #e6b85a
}
.decision-card .risk-badge.risk-low {
    background:#c9f3dc;
    color:#075c42;
    border:1px solid #83d4ac
}
.decision-card .risk-badge {
    font-size:11px;
    font-weight:800;
    text-shadow:none
}
.nav-language-toggle {
    min-width:68px;
    padding:7px 10px!important;
    border-radius:11px!important;
    background:rgba(255,255,255,.52)!important;
    border:1px solid rgba(111,174,148,.28)!important;
    color:#245d4c!important;
    font-weight:800
}
.profile-link {
    min-height:42px;
    padding:4px 10px;
    border:1px solid rgba(111,174,148,.2);
    border-radius:13px;
    background:rgba(255,255,255,.46);
    box-shadow:0 4px 12px rgba(23,75,55,.06)
}
.profile-name {
    font-size:13px;
    font-weight:850;
    letter-spacing:-.15px;
    color:#163d31;
    max-width:170px
}
.profile-link .avatar {
    width:36px;
    height:36px;
    font-size:12px;
    box-shadow:0 0 0 3px rgba(255,255,255,.72)
}
.profile-link:hover {
    padding:4px 10px;
    margin:0;
    background:rgba(255,255,255,.78);
    border-color:#8bcdb2
}
.external-link-disabled {
    color:#9aa9a3!important;
    background:#f1f5f3!important;
    border-color:#dbe5e0!important;
    cursor:not-allowed;
    opacity:.86
}
.external-links {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:12px
}
.external-links .ui-control-secondary {
    white-space:nowrap
}
@media(max-width:800px) {
    .profile-name {
        max-width:110px
    }
    .profile-link {
        padding:3px 6px
    }
    .nav-language-toggle {
        min-width:64px
    }
}
.discover-panel {
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:start
}
.discover-panel .ui-field {
    min-width:0
}
.discover-panel .ui-field small {
    display:block;
    margin-top:9px;
    padding-left:2px;
    line-height:1.4
}
.discover-actions {
    grid-column:1 / -1;
    justify-content:flex-end;
    padding-top:4px;
    border-top:1px solid rgba(205,234,222,.7)
}
.discover-actions .ui-control-primary,.discover-actions .ui-control-secondary {
    min-width:150px
}

/* Shared page rhythm: keep controls away from separators and related text readable. */
.discover-panel .discover-actions {
    margin-top:4px;
    padding-top:16px;
    padding-bottom:2px;
    gap:14px
}
.section-heading,
.health-heading,
.ui-filter-bar-header,
.card-header {
    row-gap:10px
}
.section-heading h2,
.section-heading h3,
.health-heading h2,
.card-header h2,
.card-header h3 {
    margin-bottom:6px
}
.section-heading .muted,
.health-heading .muted,
.card-header .muted {
    margin-top:5px
}

/* Select options can communicate meaning without relying on a bare number. */
.smooth-select-option-content {
    display:flex;
    align-items:flex-start;
    gap:9px;
    min-width:0;
    text-align:left
}
.smooth-select-option-dot {
    flex:0 0 auto;
    width:9px;
    height:9px;
    margin-top:5px;
    border-radius:50%;
    background:currentColor;
    box-shadow:0 0 0 3px color-mix(in srgb,currentColor 16%,transparent)
}
.smooth-select-option-label {
    display:grid;
    gap:3px;
    min-width:0
}
.smooth-select-option-label small {
    color:var(--muted);
    font-size:11px;
    font-weight:600;
    line-height:1.25
}
.smooth-select-option.risk-low { color:#16855e }
.smooth-select-option.risk-medium { color:#a96c10 }
.smooth-select-option.risk-high { color:#b34d42 }
.smooth-select-option.risk-low .smooth-select-option-label > span,
.smooth-select-option.risk-medium .smooth-select-option-label > span,
.smooth-select-option.risk-high .smooth-select-option-label > span { color:var(--ink) }
.theme-dark .smooth-select-option.risk-low { color:#7de0b5 }
.theme-dark .smooth-select-option.risk-medium { color:#f0c98f }
.theme-dark .smooth-select-option.risk-high { color:#ffc2b8 }

/* History rows use a semantic <time> element for the first column. Keep it
   explicit so link inheritance cannot make the date disappear in dark mode. */
.change-row time {
    display:block;
    color:var(--muted);
    font-size:12px;
    line-height:1.35
}
.theme-dark .change-row time {
    color:#b4d0c3
}

/* Card content must keep a real reading column when the shared card contract
   applies flex/grid sizing to its siblings. */
.insight-card > div:not(.insight-icon),
.kap-analysis-card > div {
    flex:1 1 auto;
    width:100%;
    min-width:0
}
/* Detail-page insight cards do not have the optional icon/link columns. */
.insight-card:not(:has(.insight-icon)) {
    grid-template-columns:minmax(0, 1fr);
}
.insight-card > div:not(.insight-icon) > p,
.kap-analysis-card p {
    width:100%;
    max-width:none;
    overflow-wrap:anywhere
}
.kap-summary-card > .section-heading > div,
.kap-summary-card .kap-summary-grid {
    min-width:0;
    width:100%
}

/* Light theme control surfaces: keep every interactive boundary visible on
   the pale page without making the controls visually heavy. */
.app-shell:not(.theme-dark) .smooth-select-trigger {
    background:linear-gradient(180deg,#f8fffb,#eef9f4);
    border-color:#b9e2d0;
    box-shadow:0 2px 8px rgba(24,109,77,.05)
}
.app-shell:not(.theme-dark) .smooth-select-trigger:hover,
.app-shell:not(.theme-dark) .smooth-select.is-open .smooth-select-trigger {
    background:#e9f8f1;
    border-color:#72c9a4;
    box-shadow:0 0 0 4px rgba(22,166,120,.11)
}
.app-shell:not(.theme-dark) .ui-button-secondary,
.app-shell:not(.theme-dark) .ui-link-secondary,
.app-shell:not(.theme-dark) .sidebar-logout,
.app-shell:not(.theme-dark) .ui-button-icon,
.app-shell:not(.theme-dark) .shell-theme-switch {
    background:#f0faf5;
    border-color:#b7e0ce;
    color:#164737;
    box-shadow:0 2px 8px rgba(24,109,77,.045)
}
.app-shell:not(.theme-dark) .ui-button-secondary:hover:not(:disabled),
.app-shell:not(.theme-dark) .ui-link-secondary:hover,
.app-shell:not(.theme-dark) .sidebar-logout:hover:not(:disabled),
.app-shell:not(.theme-dark) .ui-button-icon:hover:not(:disabled),
.app-shell:not(.theme-dark) .shell-theme-switch:hover:not(:disabled) {
    background:#e0f5eb;
    border-color:#73caa5;
    color:#08785b;
    box-shadow:0 8px 18px rgba(22,143,103,.12)
}
.app-shell:not(.theme-dark) .ui-input-shell input,
.app-shell:not(.theme-dark) .smooth-select-search input {
    background:#fbfffd;
    border-color:#c0e3d3;
}
.app-shell:not(.theme-dark) .ui-input-shell input:focus,
.app-shell:not(.theme-dark) .smooth-select-search input:focus {
    border-color:#72c9a4;
    box-shadow:0 0 0 3px rgba(22,166,120,.1)
}
.fund-card-tags {
    display:flex;
    gap:7px;
    margin-top:12px
}
.fund-tax-badge {
    display:inline-flex;
    align-items:center;
    padding:5px 9px;
    border-radius:999px;
    font-size:10px;
    font-weight:800
}
.fund-tax-badge.taxable {
    background:#fff0e8;
    color:#b35e2f
}
.fund-tax-badge.tax-free {
    background:#e6f7ef;
    color:#16855e
}
.fund-tax-badge.tax-unknown {
    background:#edf3f1;
    color:#71807b
}
@media(max-width:800px) {
    .discover-panel {
        grid-template-columns:1fr
    }
    .discover-actions {
        grid-column:auto;
        justify-content:stretch
    }
    .discover-actions .ui-control-primary,.discover-actions .ui-control-secondary {
        flex:1
    }
}
.sidebar {
    position:sticky;
    top:0;
    align-self:flex-start;
    height:100vh;
    min-height:100vh;
    overflow-y:auto
}
.category-chip:hover,.category-chip.selected {
    transform:none
}
.form-row {
    column-gap:18px;
    row-gap:22px
}
.analysis-builder .form-row {
    column-gap:18px;
    row-gap:22px
}
.form-card>h2 {
    margin-bottom:28px
}
.form-card .form-row+button,.form-card .form-row+.ui-control-primary {
    margin-top:22px
}
.form-card .section-heading {
    margin-bottom:22px
}
.portfolio-actions {
    column-gap:14px;
    row-gap:12px
}
.admin-table td:last-child {
    display:flex;
    align-items:center;
    gap:10px
}
.admin-table td:last-child button {
    margin:0
}
.report-actions {
    position:relative;
    justify-content:flex-start
}
.report-actions> .muted {
    white-space:nowrap
}
.export-menu {
    position:relative;
    display:inline-block;
    width:190px;
    min-width:190px
}
.export-menu>.ui-control-secondary {
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    min-height:44px;
    padding:11px 14px
}
.export-options {
    left:0;
    right:auto;
    top:calc(100% + 8px);
    bottom:auto;
    width:100%;
    min-width:100%;
    padding:6px;
    background:#fff;
    border:1px solid #cfe5db;
    border-radius:14px;
    box-shadow:0 16px 34px rgba(23,75,55,.16)
}
.export-options button {
    display:block;
    width:100%;
    min-height:38px;
    padding:10px 12px
}
.export-options button+button {
    margin-top:2px
}
@media(max-width:800px) {
    .report-actions {
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:flex-start;
        gap:12px
    }
    .export-menu {
        width:190px;
        min-width:190px
    }
    .report-actions .export-menu {
        width:190px
    }
    .report-actions .ui-control-secondary {
        width:100%
    }
}
.export-hint {
    display:block;
    flex-basis:100%;
    padding:10px 13px;
    border:1px solid #f0d59b;
    border-radius:10px;
    background:#fff8e8;
    color:#8a6416;
    font-size:12px;
    line-height:1.45
}
.export-hint strong {
    font-weight:800
}
input[type=number] {
    -moz-appearance:textfield;
    appearance:textfield
}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance:none;
    margin:0
}
.confirm-toggle {
    position:relative;
    display:grid;
    grid-template-columns:0 38px 1fr;
    align-items:center;
    column-gap:10px;
    min-height:42px;
    margin:8px 0 18px;
    padding:9px 12px;
    border:1px solid #e6d5d0;
    border-radius:14px;
    background:linear-gradient(135deg,#fff8f6,#fff);
    color:#7b6a66;
    cursor:pointer;
    transition:border-color .18s,background .18s,box-shadow .18s
}
.confirm-toggle:hover {
    border-color:#e0a79a;
    background:#fff5f2;
    box-shadow:0 6px 16px rgba(163,59,59,.08)
}
.confirm-toggle input {
    position:absolute;
    width:1px;
    height:1px;
    opacity:0
}
.toggle-track {
    width:38px;
    height:22px;
    padding:3px;
    border-radius:999px;
    background:#d9e3df;
    transition:background .18s,box-shadow .18s
}
.toggle-track span {
    display:block;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 1px 4px rgba(23,55,43,.2);
    transition:transform .18s
}
.confirm-toggle input:checked~.toggle-track {
    background:#d4776d;
    box-shadow:0 0 0 3px rgba(212,119,109,.12)
}
.confirm-toggle input:checked~.toggle-track span {
    transform:translateX(16px)
}
.confirm-toggle input:focus-visible~.toggle-track {
    outline:3px solid rgba(163,59,59,.25);
    outline-offset:3px
}
.delete-confirmation-field {
    max-width:360px;
    margin-top:4px
}
.delete-confirmation-field strong {
    color:#a33b3b;
    letter-spacing:.4px
}
.danger-card .ui-control-danger {
    margin-top:8px
}
.comparison-chart {
    padding:12px 8px 10px;
    overflow:hidden
}
.comparison-chart-caption {
    margin:0 8px 12px;
    color:var(--muted);
    font-size:.76rem;
    line-height:1.45;
}
.comparison-chart-empty {
    display:grid;
    place-items:center;
    min-height:180px;
    margin:18px 0 10px;
    padding:18px;
    border:1px dashed color-mix(in srgb,var(--green) 28%,var(--line));
    border-radius:12px;
    color:var(--muted);
    text-align:center;
    background:color-mix(in srgb,var(--green-soft) 24%,var(--card));
}
.comparison-legend-item {
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:7px 10px;
    border:1px solid transparent;
    border-radius:10px;
    background:transparent;
    color:var(--muted);
    font:inherit;
    font-size:11px;
    cursor:pointer;
    transition:background .18s,border-color .18s,color .18s,box-shadow .18s
}
.comparison-legend-item:hover,.comparison-legend-item:focus-visible {
    background:var(--green-soft);
    border-color:#bfe4d4;
    color:var(--green);
    outline:none
}
.comparison-legend-item.active {
    background:#e2f7ed;
    border-color:#82d5b2;
    color:#08785b;
    font-weight:800;
    box-shadow:0 5px 12px rgba(13,139,103,.1)
}
.comparison-code {
    display:inline-flex;
    align-items:center;
    padding:7px 11px;
    border-radius:10px;
    background:linear-gradient(135deg,#e7f8f0,#eff8ff);
    color:#08785b;
    font-size:16px;
    letter-spacing:.5px
}
.comparison-detail-link {
    display:inline-flex;
    margin-top:18px;
    color:var(--green);
    font-size:12px;
    font-weight:800;
    text-decoration:none
}
.comparison-detail-link:hover {
    color:#075c47;
    text-decoration:underline
}
.comparison-card .comparison-metrics div {
    min-height:38px
}
.comparison-card .comparison-metrics dd {
    max-width:58%;
    white-space:nowrap
}
.language-flag-image {
    display:inline-block;
    width:22px;
    height:15px;
    object-fit:cover;
    border-radius:3px;
    box-shadow:0 0 0 1px rgba(20,60,45,.18)
}
.main-content {
    background:linear-gradient(135deg,#f3faf7 0%,#edf8f2 48%,#f6fbf8 100%)
}
.topbar {
    background:rgba(255,255,255,.72);
    backdrop-filter:blur(14px)
}
.chart-date-filter {
    z-index:120
}
.date-picker-popover {
    z-index:1000
}
.chart-tooltip-object {
    overflow:visible
}
.chart-tooltip.svg-tooltip {
    width:100%;
    height:100%;
    min-width:0;
    padding:4px 6px;
    gap:2px;
    border-radius:7px;
    font-size:8px
}
.chart-tooltip.svg-tooltip strong {
    font-size:8px
}
.chart-tooltip.svg-tooltip span {
    font-size:10px
}
.analysis-builder .form-row {
    column-gap:24px
}
.analysis-builder .smooth-select {
    min-width:0
}
.health-score small {
    display:block;
    margin-top:2px;
    font-size:9px;
    line-height:1.15;
    text-align:center
}
.health-explanation {
    grid-column:1 / -1;
    margin:7px 0 0;
    color:var(--muted);
    font-size:10px;
    line-height:1.4
}
.remember-me {
    display:flex;
    align-items:center;
    gap:9px;
    margin:4px 0 18px;
    color:var(--muted);
    font-size:12px;
    font-weight:650;
    cursor:pointer;
    user-select:none
}
.remember-me input {
    position:absolute;
    width:1px;
    height:1px;
    opacity:0
}
.remember-check {
    display:grid;
    place-items:center;
    width:19px;
    height:19px;
    border:1px solid #c9ded5;
    border-radius:6px;
    background:#f7fcf9;
    color:transparent;
    font-size:12px;
    font-weight:900;
    transition:background .18s,border-color .18s,color .18s,box-shadow .18s
}
.remember-me:hover .remember-check {
    border-color:#75cbae
}
.remember-me input:checked+.remember-check {
    border-color:var(--green);
    background:var(--green);
    color:#fff;
    box-shadow:0 4px 10px rgba(13,139,103,.18)
}
.remember-me input:focus-visible+.remember-check {
    outline:3px solid rgba(13,139,103,.22);
    outline-offset:3px
}
.chart-tooltip-svg rect {
    fill:rgba(8,48,38,.94);
    stroke:rgba(255,255,255,.2);
    stroke-width:.25
}
.chart-tooltip-svg path {
    fill:rgba(8,48,38,.94)
}
.chart-tooltip-svg text {
    fill:#bfe9d9;
    font-size:2.15px;
    font-weight:700;
    font-family:Inter,ui-sans-serif,system-ui,sans-serif
}
.chart-tooltip-svg .chart-tooltip-price {
    fill:#fff;
    font-size:2.7px;
    font-weight:850
}
.analysis-result-actions {
    display:flex;
    align-items:center;
    gap:10px
}
.analysis-summary-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin:22px 0 18px
}
.analysis-summary-item {
    display:grid;
    gap:8px;
    padding:15px;
    border:1px solid var(--line);
    border-radius:14px;
    background:linear-gradient(145deg,#f8fcfa,#edf8f3)
}
.analysis-summary-item span {
    color:var(--muted);
    font-size:11px
}
.analysis-summary-item strong {
    font-size:16px;
    line-height:1.25
}
.analysis-reason {
    margin:12px 0;
    font-size:15px;
    line-height:1.6
}
.analysis-next-step {
    display:grid;
    gap:5px;
    margin:16px 0;
    padding:15px 16px;
    border-radius:14px;
    background:var(--green-soft);
    color:var(--ink)
}
.analysis-next-step strong {
    font-size:12px;
    color:var(--green)
}
.analysis-next-step span {
    font-size:13px;
    line-height:1.5
}
.analysis-notes {
    margin:14px 0;
    padding-left:20px;
    color:var(--muted);
    line-height:1.6
}
.modal-backdrop {
    position:fixed;
    inset:0;
    z-index:1000;
    display:grid;
    place-items:center;
    padding:24px;
    background:rgba(8,30,24,.52);
    backdrop-filter:blur(7px)
}
.analysis-detail-modal {
    width:min(720px,100%);
    max-height:min(88vh,760px);
    overflow:auto;
    padding:26px;
    border:1px solid var(--line);
    border-radius:22px;
    background:var(--card);
    color:var(--ink);
    box-shadow:0 30px 80px rgba(8,40,30,.28)
}
.analysis-detail-modal .modal-header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px
}
.analysis-detail-modal .modal-header h2 {
    margin-top:7px
}
.analysis-detail-section {
    margin-top:20px;
    padding-top:18px;
    border-top:1px solid var(--line)
}
.analysis-detail-section h3 {
    margin:0 0 12px;
    font-size:15px
}
.analysis-detail-row {
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:11px 0;
    border-top:1px solid var(--line);
    font-size:13px
}
.analysis-detail-row span {
    color:var(--muted)
}
.analysis-detail-row strong {
    text-align:right
}
.scenario-highlight {
    padding:18px;
    border:1px solid #b9e7d3;
    border-radius:16px;
    background:linear-gradient(145deg,#edf9f3,#f5fbf8)
}
.scenario-highlight .analysis-detail-row:first-of-type {
    border-top:0
}
.theme-dark .analysis-summary-item,.theme-dark .scenario-highlight {
    background:linear-gradient(145deg,#183a2f,#153126);
    border-color:#376653
}
.theme-dark .analysis-detail-modal {
    background:linear-gradient(145deg,#142f26,#10251f)
}

/* The detail dialog uses secondary labels heavily. Keep them readable on the
   light surface without changing the established dark-theme palette. */
.app-shell:not(.theme-dark) .analysis-detail-modal .muted,
.app-shell:not(.theme-dark) .analysis-detail-modal .analysis-detail-row span,
.app-shell:not(.theme-dark) .analysis-detail-modal .analysis-structure-card span,
.app-shell:not(.theme-dark) .analysis-detail-modal .analysis-structure-card small {
    color:#4f675f;
}
.app-shell:not(.theme-dark) .analysis-detail-modal .analysis-detail-section {
    border-top-color:#d3e2dc;
}
.app-shell:not(.theme-dark) .analysis-detail-modal .scenario-highlight {
    border-color:#a9d8c3;
    background:linear-gradient(145deg,#e6f6ee,#f2faf6);
}
@media(max-width:800px) {
    .analysis-result-actions {
        width:100%;
        flex-wrap:wrap
    }
    .analysis-result-actions>* {
        flex:1
    }
    .analysis-summary-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .analysis-detail-modal {
        padding:20px
    }
    .analysis-detail-row {
        display:grid;
        gap:5px
    }
    .analysis-detail-row strong {
        text-align:left
    }
    .modal-backdrop {
        padding:12px
    }
}
.analysis-structure-card {
    display:grid;
    gap:8px;
    margin:16px 0;
    padding:16px;
    border:1px solid #b8e5d2;
    border-radius:16px;
    background:linear-gradient(145deg,#edf9f3,#f5fbf8)
}
.analysis-structure-card>div {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px
}
.analysis-structure-card span,.analysis-structure-card small {
    color:var(--muted);
    font-size:11px
}
.analysis-structure-card strong {
    color:var(--green);
    font-size:15px
}
.analysis-structure-card p {
    margin:0;
    color:var(--ink);
    font-size:13px;
    line-height:1.55
}
.theme-dark .analysis-structure-card {
    background:linear-gradient(145deg,#183a2f,#153126);
    border-color:#376653
}
.analysis-job-progress {
    display:grid;
    align-content:start;
    gap:9px;
    margin-top:18px;
    padding:20px;
    border:1px solid #b8e5d2;
    border-radius:18px;
    background:linear-gradient(145deg,#edf9f3,#f5fbf8)
}
.analysis-job-progress>div {
    display:flex;
    justify-content:space-between;
    gap:16px
}
.analysis-job-progress span {
    color:var(--green);
    font-weight:800
}
.analysis-job-progress p {
    margin:0;
    color:var(--muted);
    font-size:13px
}
.analysis-progress-track {
    height:8px;
    overflow:hidden;
    border-radius:999px;
    background:#dcefe7
}
.analysis-progress-track span {
    display:block;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,#0faf82,#168fc7);
    transition:width .3s ease
}
.analysis-progress-stage {
    display:block;
    margin-top:6px;
    color:var(--muted);
    font-size:11px;
    line-height:1.35;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
.theme-dark .analysis-job-progress {
    background:linear-gradient(145deg,#183a2f,#153126);
    border-color:#376653
}
.theme-dark .analysis-progress-track {
    background:#254d40
}
.chart-empty-svg-label {
    fill:var(--muted);
    font-size:3.2px;
    font-weight:800;
    letter-spacing:.04px
}
.chart-empty-svg-hint {
    fill:var(--muted);
    font-size:2px;
    font-weight:600
}
.watch-item {
    display:grid;
    gap:14px;
    align-content:start
}
.watch-item-header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px
}
.watch-item-main {
    min-width:0;
    color:var(--ink);
    text-decoration:none
}
.watch-item-main strong {
    display:block;
    color:var(--green);
    font-size:20px;
    letter-spacing:.4px
}
.watch-item-main p {
    margin:7px 0 0;
    line-height:1.35
}
.watch-item-tags {
    display:flex;
    gap:7px;
    flex-wrap:wrap
}
.watch-item-metrics {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:13px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line)
}
.watch-item-metrics div {
    display:grid;
    gap:5px
}
.watch-item-metrics span,.watch-item-footer>span {
    color:var(--muted);
    font-size:11px
}
.watch-item-metrics strong {
    font-size:16px
}
.watch-item-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px
}
.watch-item-footer>span {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.watch-item-footer>div {
    display:flex;
    gap:7px;
    flex:0 0 auto
}
.watch-action {
    padding:7px 9px;
    border:1px solid var(--line);
    border-radius:9px;
    color:var(--green);
    font-size:11px;
    font-weight:800;
    text-decoration:none;
    background:#fff
}
.watch-action.primary {
    border-color:#b9e5d2;
    background:var(--green-soft)
}
.watch-action:hover {
    border-color:#75cbae;
    background:#fff;
    color:#08785b
}
@media(max-width:800px) {
    .watch-item-footer {
        align-items:flex-start;
        flex-direction:column
    }
    .watch-item-footer>div {
        width:100%
    }
    .watch-action {
        flex:1;
        text-align:center
    }
}
.discover-category-filter {
    grid-column:1 / -1;
    display:grid;
    gap:9px;
    padding-top:4px
}
.filter-caption {
    color:var(--muted);
    font-size:12px;
    font-weight:750
}
.discover-category-filter .discovery-categories {
    margin:0;
    min-width:0
}
.discover-panel .discovery-categories {
    display:flex;
    overflow-x:auto;
    flex-wrap:nowrap;
    scrollbar-width:none
}
.discover-panel .discovery-categories::-webkit-scrollbar {
    display:none
}
.discover-panel .category-chip {
    flex:0 0 auto
}
.search-field input {
    padding-right:42px;
    background-image:linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2371807b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 16px center
}
.real-chart {
    height:300px;
    min-height:300px;
    margin-top:22px;
    border:1px solid var(--line);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)
}
.real-chart svg {
    display:block;
    width:100%;
    height:100%;
    shape-rendering:geometricPrecision
}
.chart-tooltip-svg text {
    paint-order:stroke;
    stroke:transparent
}
.theme-dark .main-content {
    background:radial-gradient(circle at 78% 8%,rgba(35,102,78,.16),transparent 34%),var(--paper)
}
.theme-dark .topbar {
    background:linear-gradient(105deg,#0d211a,#163b2e);
    border-bottom-color:var(--line);
    color:var(--muted)
}
.theme-dark .breadcrumb strong,.theme-dark .breadcrumb a,.theme-dark h1,.theme-dark h2,.theme-dark h3,.theme-dark .metric-card strong,.theme-dark .fund-card,.theme-dark .fund-card h3,.theme-dark .comparison-card,.theme-dark .comparison-card h3 {
    color:var(--ink)
}
.theme-dark .ui-card,.theme-dark .metric-card,.theme-dark .fund-card,.theme-dark .chart-card,.theme-dark .decision-card,.theme-dark .portfolio-card,.theme-dark .form-card,.theme-dark .settings-card,.theme-dark .admin-section,.theme-dark .history-card,.theme-dark .analysis-card,.theme-dark .watch-item,.theme-dark .comparison-card,.theme-dark .comparison-chart-card {
    background:linear-gradient(145deg,#142f26,#10251f);
    border-color:var(--line);
    color:var(--ink);
    box-shadow:var(--shadow)
}
.theme-dark .search-panel,.theme-dark .discover-panel {
    background:linear-gradient(135deg,#15352a,#122b24 58%,#153044);
    border-color:#326b57;
    box-shadow:var(--shadow)
}
.theme-dark .discover-panel~.ui-section-state .fund-grid .fund-card,.theme-dark .discover-panel~.ui-section-state .fund-grid .fund-card:nth-child(3n+2),.theme-dark .discover-panel~.ui-section-state .fund-grid .fund-card:nth-child(3n) {
    background:linear-gradient(145deg,#142f26,#10251f);
    border-color:var(--line)
}
.theme-dark input,.theme-dark select,.theme-dark .smooth-select-trigger,.theme-dark .smooth-select-menu,.theme-dark .smooth-select-search,.theme-dark .date-picker-trigger,.theme-dark .date-picker-popover,.theme-dark .export-options {
    background:#193a2f;
    color:var(--ink);
    border-color:#396653
}
.theme-dark input::placeholder {
    color:#8da99e
}
.theme-dark .smooth-select-option:hover,.theme-dark .smooth-select-option.selected,.theme-dark .date-picker-day:hover {
    background:#245441;
    color:#edfff7
}
.theme-dark .smooth-select-option,.theme-dark .date-picker-day,.theme-dark .date-picker-header,.theme-dark .date-picker-weekdays {
    color:var(--ink)
}
.theme-dark .discovery-categories {
    background:linear-gradient(90deg,#183f32,#1a3448);
    border-color:#315e50
}
.theme-dark .category-chip {
    background:#193a30;
    border-color:#376653;
    color:var(--ink);
    box-shadow:none
}
.theme-dark .category-chip:hover,.theme-dark .category-chip.selected {
    background:#168f69;
    border-color:#55d8ac;
    color:#fff
}
.theme-dark .real-chart {
    background:repeating-linear-gradient(0deg,transparent 0,transparent 58px,#284b40 59px),linear-gradient(180deg,#17372c,#10251f)
}
.theme-dark .real-chart:after {
    background:linear-gradient(90deg,rgba(24,67,52,.35),transparent 18%,transparent 82%,rgba(24,67,52,.3))
}
.theme-dark .chart-periods,.theme-dark .range-tabs {
    background:#193a30;
    border-color:#376653
}
.theme-dark .chart-periods button,.theme-dark .range-tabs button {
    color:#a8c6b9
}
.theme-dark .decision-card {
    background:linear-gradient(145deg,#0d3025,#0b211b);
    color:var(--ink)
}
.theme-dark .decision-card:hover {
    background:#123b2e
}

/* Legacy decision cards originally owned a permanently dark surface. UiCard now
   supplies the light surface, so their old pale foregrounds need a matching
   light-theme contract instead of being left nearly invisible on white. */
.app-shell:not(.theme-dark) .decision-card {
    color:var(--ink)
}
.app-shell:not(.theme-dark) .decision-card p,
.app-shell:not(.theme-dark) .decision-card .muted,
.app-shell:not(.theme-dark) .decision-title span,
.app-shell:not(.theme-dark) .decision-row,
.app-shell:not(.theme-dark) .decision-row small {
    color:#526a62
}
.app-shell:not(.theme-dark) .decision-row,
.app-shell:not(.theme-dark) .scenario-row {
    border-top-color:#c9dbd4
}
.app-shell:not(.theme-dark) .decision-row strong,
.app-shell:not(.theme-dark) .scenario-row,
.app-shell:not(.theme-dark) .scenario-row .positive {
    color:var(--ink)
}
.app-shell:not(.theme-dark) .scenario-head {
    color:#526a62
}
.app-shell:not(.theme-dark) .decision-title strong {
    color:var(--green-strong)
}
.theme-dark .insight-card {
    background:#173d31;
    border-color:#2d6853
}
.theme-dark .insight-card p,.theme-dark .muted,.theme-dark .metric-card span,.theme-dark .metric-card em,.theme-dark .metric-card small {
    color:var(--muted)
}
.theme-dark .empty-state {
    background:linear-gradient(145deg,#142f26,#193c31);
    color:var(--muted)
}
.theme-dark .ui-control-secondary,.theme-dark .ui-button-icon,.theme-dark .shell-theme-switch {
    background:#17372c;
    color:var(--ink);
    border-color:#396653
}
.theme-dark .ui-control-primary {
    color:#06271b
}
.theme-dark .fund-tag {
    background:#1d493b;
    border-color:#43856b;
    color:#bcebd8
}
.theme-dark .fund-tax-badge.taxable {
    background:#4b3027;
    color:#ffc0a5
}
.theme-dark .fund-tax-badge.tax-free {
    background:#1c4b3b;
    color:#bcebd8
}
.theme-dark .form-error,.theme-dark .page-error {
    background:#422b2b;
    border-color:#8b514e;
    color:#ffd1c9
}
.theme-dark .search-field input {
    background-color:#193a2f
}
.theme-dark .search-field input {
    background-image:linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23a4bdb3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E")
}
@media(max-width:800px) {
    .real-chart {
        height:250px;
        min-height:250px
    }
    .discover-category-filter {
        grid-column:auto
    }
    .discover-panel .discovery-categories {
        margin:0 -3px;
        padding:5px
    }
}
.chart-tooltip-object {
    overflow:visible;
    pointer-events:none
}
.chart-tooltip.svg-tooltip {
    position:static;
    transform:none;
    width:20px;
    min-width:0;
    box-sizing:border-box;
    align-items:flex-start;
    padding:5px 6px;
    white-space:nowrap
}
.chart-tooltip.svg-tooltip:after {
    left:50%
}
.mini-chart {
    height:52px;
    margin:18px 0 0;
    padding:8px 9px;
    overflow:hidden;
    border:1px solid #e2efe9;
    border-radius:12px;
    background:linear-gradient(180deg,#f2faf6,#fbfefd);
    box-shadow:inset 0 1px rgba(255,255,255,.8)
}
.mini-chart svg {
    display:block;
    width:100%;
    height:100%;
    overflow:visible
}
.mini-chart:before,.mini-chart:after {
    content:none
}
.mini-chart-line {
    fill:none;
    stroke:#0faf82;
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke
}
.mini-chart-area {
    fill:rgba(15,175,130,.14);
    stroke:none
}
.mini-chart.signal-down .mini-chart-line {
    stroke:#c56e5d
}
.mini-chart.signal-down .mini-chart-area {
    fill:rgba(197,110,93,.14)
}
.mini-chart.signal-flat .mini-chart-line {
    stroke:#c18a28
}
.mini-chart.signal-flat .mini-chart-area {
    fill:rgba(193,138,40,.12)
}
.theme-dark-preload {
    color-scheme:dark;
    background:#0a1713
}
.theme-dark-preload body {
    background:#0a1713;
    color:#eaf8f1
}
.theme-dark-preload .app-splash {
    background:radial-gradient(circle at 15% 15%,#183f32 0,transparent 34%),radial-gradient(circle at 85% 85%,#153b30 0,transparent 32%),linear-gradient(135deg,#0a1713,#10251f);
    color:#eaf8f1
}
.theme-dark-preload .splash-logo-light {
    display:none
}
.theme-dark-preload .splash-logo-dark {
    display:block
}
.theme-dark-preload .splash-content p {
    color:#a4bdb3
}
.theme-dark-preload .splash-loader {
    background:#2c4e42
}
.theme-dark-preload .splash-content small {
    color:#8da99e
}
.theme-dark-preload .splash-orb-one {
    background:rgba(91,210,168,.16)
}
.theme-dark-preload .splash-orb-two {
    background:rgba(35,143,112,.2)
}
.theme-dark-preload .app-shell,
.theme-dark-preload .auth-layout {
    background:#0a1713;
    color:#eaf8f1;
}
.theme-dark-preload .main-content {
    background:radial-gradient(circle at 78% 8%,rgba(35,102,78,.16),transparent 34%),#0a1713;
}
.theme-dark-preload .brand-logo,
.theme-dark-preload .auth-logo,
.theme-dark-preload .branded-loading-logo {
    content:url("../images/fonigeo-logo-dark.png");
}
.theme-dark-preload .auth-shell {
    background:radial-gradient(circle at 80% 10%,rgba(35,102,78,.24) 0,transparent 35%),#0a1713;
}
.theme-dark-preload .auth-card {
    background:linear-gradient(145deg,#142f26,#10251f);
    border-color:#396653;
    box-shadow:0 24px 70px rgba(0,0,0,.38);
}
.theme-dark-preload .auth-card h1,
.theme-dark-preload .auth-card .ui-field label,
.theme-dark-preload .auth-card .remember-me {
    color:#d9eee5;
}
.theme-dark-preload .auth-card .auth-copy,
.theme-dark-preload .auth-card .auth-footer {
    color:#a4bdb3;
}
.theme-dark-preload .auth-card .ui-field input {
    background:#193a2f;
    border-color:#396653;
    color:#eaf8f1;
}
.theme-dark-preload .auth-card .ui-field input::placeholder {
    color:#a4bdb3;
}
.analysis-detail-modal>.muted {
    margin:18px 0 0;
    line-height:1.55
}
.analysis-detail-modal .analysis-detail-section:first-of-type {
    margin-top:24px
}
.analysis-job-fund-info {
    display:grid!important;
    gap:4px!important;
    min-width:240px
}
.analysis-job-fund-info strong {
    font-size:16px
}
.analysis-job-fund-info span {
    color:var(--ink);
    font-size:13px;
    line-height:1.35
}
.analysis-job-fund-info small,.analysis-job-fund-info em {
    color:var(--muted);
    font-size:11px;
    font-style:normal;
    line-height:1.4
}
.analysis-job-open {
    padding:9px 13px;
    font-size:12px;
    white-space:nowrap
}
.table-select-cell {
    width:42px;
    text-align:center
}
.table-select-cell input {
    accent-color:var(--green);
    width:17px;
    height:17px;
    cursor:pointer
}
.modal-actions {
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:22px
}
.confirm-copy {
    margin:0;
    color:var(--muted);
    line-height:1.6
}
.ui-control-danger {
    border:1px solid #e6aaa0;
    border-radius:11px;
    padding:10px 16px;
    background:#fff0ed;
    color:#b34d42;
    font:inherit;
    font-weight:750;
    cursor:pointer
}
.ui-control-danger:hover {
    background:#ffe1db
}
.theme-dark .ui-control-danger {
    background:#4b2d2b;
    border-color:#98544e;
    color:#ffc2b8
}
.theme-dark .ui-control-danger:hover {
    background:#623b37
}
.theme-dark .analysis-job-fund-info span {
    color:var(--ink)
}
.analysis-job-progress>.analysis-job-list {
    display:grid!important;
    grid-template-columns:1fr;
    min-width:0
}
.analysis-job-progress>.section-heading {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin:0 0 6px;
}

.analysis-job-progress>.section-heading h2,
.analysis-job-progress>.section-heading p {
    margin-top:0;
}

.analysis-job-progress>.section-heading h2 {
    margin-bottom:4px;
}

.analysis-job-progress>.section-heading > div {
    min-width:0;
}
.analysis-job-list>.analysis-job-row {
    min-width:0;
    overflow:hidden
}
.analysis-job-fund-info {
    flex:1 1 auto;
    min-width:0;
    overflow-wrap:anywhere
}
.analysis-job-fund-info span,.analysis-job-fund-info small,.analysis-job-fund-info em {
    overflow-wrap:anywhere
}
.analysis-job-actions {
    flex:0 0 auto;
    min-width:0;
    max-width:100%
}
@media(max-width:800px) {
    .analysis-job-actions {
        width:100%;
        max-width:none
    }
    .analysis-job-open {
        flex:1 1 auto
    }
}
.analysis-submit-locked:disabled {
    cursor:not-allowed!important
}
.ui-control-primary:disabled:not([aria-busy="true"]),.ui-control-primary:disabled:not([aria-busy="true"]),.ui-control-secondary:disabled:not([aria-busy="true"]),.ui-control-danger:disabled:not([aria-busy="true"]),.ui-button-icon:disabled:not([aria-busy="true"]),button:disabled:not([aria-busy="true"]) {
    cursor:not-allowed!important
}
.branded-route-guard {
    background:var(--paper)
}
.branded-route-guard .branded-loading {
    width:min(520px,100%);
    min-height:390px;
    margin:0;
    border-color:var(--line);
    box-shadow:var(--shadow)
}
.analysis-pagination {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin-top:20px
}
.analysis-pagination span {
    min-width:45px;
    text-align:center;
    color:var(--muted);
    font-size:12px;
    font-weight:700
}
.analysis-pagination .ui-control-secondary {
    padding:8px 12px;
    font-size:12px
}
.reports-list {
    display:grid;
    gap:14px
}
.report-select-all {
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 12px 10px;
    color:var(--muted);
    font-size:12px;
    font-weight:700
}
.report-select-all input,.report-selection input {
    accent-color:var(--green);
    width:18px;
    height:18px;
    cursor:pointer
}
.report-row {
    display:grid;
    grid-template-columns:28px minmax(220px,2fr) repeat(4,minmax(105px,1fr)) minmax(130px,auto);
    align-items:center;
    gap:16px;
    padding:18px 16px;
    border:1px solid var(--line);
    border-left:3px solid var(--green);
    border-radius:15px;
    background:linear-gradient(135deg,var(--card),color-mix(in srgb,var(--green-soft) 38%,var(--card)));
    min-width:0;
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease
}
.report-row:hover {
    transform:translateY(-2px);
    border-color:#9bd9c0;
    box-shadow:var(--shadow)
}
.report-main {
    min-width:0
}
.report-main:after {
    content:"";
    display:block;
    width:36px;
    height:3px;
    margin-top:12px;
    border-radius:999px;
    background:var(--green)
}
.report-heading {
    display:flex;
    align-items:center;
    gap:9px;
    min-width:0
}
.report-heading strong {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.report-heading span {
    flex:0 0 auto;
    padding:4px 7px;
    border-radius:7px;
    background:var(--green-soft);
    color:var(--green);
    font-size:10px;
    font-weight:800
}
.report-main p {
    margin:5px 0;
    color:var(--muted);
    font-size:12px;
    line-height:1.35;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.report-main small,.report-stat span {
    display:block;
    color:var(--muted);
    font-size:10px
}
.report-stat {
    min-width:0;
    padding-left:14px;
    border-left:1px solid var(--line)
}
.report-stat strong {
    display:block;
    margin-top:5px;
    font-size:12px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.report-actions {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-items:stretch;
    gap:8px;
    min-width:136px
}
.report-actions .ui-control-secondary {
    width:100%;
    padding:9px 10px;
    font-size:11px;
    white-space:nowrap
}
.report-actions .ui-control-secondary:first-child,
.report-actions .ui-control-secondary:nth-child(2) {
    grid-column:1
}
.report-actions .ui-button-close {
    grid-column:1;
    grid-row:auto;
    width:100%;
    height:30px;
    margin:0;
    border-radius:8px;
    font-size:17px;
    line-height:1
}
/* Light-theme controls use the same soft green surface as the cards. */
.app-shell:not(.theme-dark) .ui-control-secondary,
.app-shell:not(.theme-dark) .ui-button-icon,
.app-shell:not(.theme-dark) .ui-button-close,
.app-shell:not(.theme-dark) .shell-theme-switch,
.app-shell:not(.theme-dark) .nav-language-toggle {
    background:linear-gradient(145deg,#f4fbf7,#eaf7f0);
    border-color:#b9dfce;
    color:#236650;
    box-shadow:0 3px 10px rgba(24,109,77,.06)
}
.app-shell:not(.theme-dark) .ui-control-secondary:hover:not(:disabled),
.app-shell:not(.theme-dark) .ui-button-icon:hover:not(:disabled),
.app-shell:not(.theme-dark) .ui-button-close:hover:not(:disabled),
.app-shell:not(.theme-dark) .shell-theme-switch:hover:not(:disabled),
.app-shell:not(.theme-dark) .nav-language-toggle:hover:not(:disabled) {
    background:linear-gradient(145deg,#e5f7ee,#d8f0e4);
    border-color:#7fc9ab;
    color:#08785b;
    box-shadow:0 8px 18px rgba(22,143,103,.14)
}
.theme-dark .report-row {
    background:linear-gradient(135deg,#16382c,#10251f 72%,#102c3b);
    border-color:var(--line)
}
.theme-dark .report-heading span {
    background:#1d493b;
    color:#bcebd8
}

/* Saved report card: keep information first and place its actions in one
   compact row underneath instead of reserving a tall right-side column. */
.report-row {
    grid-template-columns:28px minmax(0,1fr);
    align-items:start;
    row-gap:12px
}
.report-row > .report-selection {
    grid-column:1;
    grid-row:1 / span 3;
    align-self:center
}
.report-row > .report-main,
.report-row > .report-metrics,
.report-row > .report-actions {
    grid-column:2;
    min-width:0
}
.report-row > .report-metrics {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    width:100%
}
.report-row > .report-actions {
    display:flex;
    align-items:stretch;
    flex-wrap:wrap;
    gap:8px;
    min-width:0;
    width:100%;
    margin:2px 0 0;
    padding-top:12px;
    border-top:1px solid var(--line)
}
.report-row > .report-actions .ui-control-secondary {
    flex:1 1 180px;
    width:auto;
    min-width:0
}
.report-row > .report-actions .ui-button-close {
    flex:0 0 40px;
    width:40px;
    min-width:40px;
    height:auto
}
@media(max-width:700px) {
    .report-row > .report-metrics {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .report-row > .report-actions .ui-control-secondary {
        flex-basis:150px
    }
}
@media(max-width:480px) {
    .report-row > .report-metrics {
        grid-template-columns:1fr
    }
    .report-row > .report-actions .ui-control-secondary {
        flex-basis:100%
    }
}

/* Saved report card actions are separate from the page-level export actions. */
.report-row > .report-card-actions {
    grid-area:actions;
    display:flex!important;
    align-items:stretch;
    justify-self:end;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:8px;
    width:min(100%, 680px);
    min-width:0;
    margin:2px 0 0;
    padding-top:12px;
    border-top:1px solid var(--line);
}
.report-row > .report-card-actions > .ui-control-secondary {
    flex:1 1 210px;
    width:auto;
    min-width:0;
    max-width:260px;
    min-height:36px;
    white-space:normal;
    overflow-wrap:anywhere;
    line-height:1.25;
}
.report-row > .report-card-actions > .ui-button-close {
    flex:0 0 40px;
    width:40px;
    min-width:40px;
    height:auto;
}
@media(max-width:700px) {
    .report-row > .report-card-actions {
        justify-self:stretch;
        width:100%;
    }
    .report-row > .report-card-actions > .ui-control-secondary {
        flex-basis:150px;
    }
}
@media(max-width:480px) {
    .report-row > .report-card-actions > .ui-control-secondary {
        flex-basis:100%;
        max-width:none;
    }
}

/* The export control sits below the reports card, so its menu must open into
   the available card space rather than pushing visually farther downward. */
.report-actions > .export-menu {
    z-index:80
}
.report-actions > .export-menu > .export-options {
    top:auto;
    bottom:calc(100% + 8px);
    z-index:90
}

/* Mobile navigation drawer: use transform/visibility so open and close are
   real state transitions instead of a small header translation. */
@media(max-width:800px) {
    .app-shell .sidebar {
        display:flex;
        position:fixed;
        z-index:30;
        inset:0 auto 0 0;
        width:min(82vw,310px);
        transform:translateX(-105%);
        visibility:hidden;
        pointer-events:none;
        transition:transform .24s cubic-bezier(.2,.75,.25,1), visibility 0s linear .24s;
        box-shadow:18px 0 50px rgba(10,38,29,.22)
    }
    .app-shell.menu-open .sidebar {
        transform:translateX(0);
        visibility:visible;
        pointer-events:auto;
        animation:none;
        transition:transform .24s cubic-bezier(.2,.75,.25,1), visibility 0s linear 0s
    }
    .app-shell.menu-open .menu-backdrop {
        opacity:1;
        visibility:visible
    }
    .nav-mobile-toggle {
        position:relative;
        z-index:40
    }
    .menu-backdrop {
        opacity:0;
        visibility:hidden;
        transition:opacity .2s ease, visibility 0s linear .2s
    }
}
@media(max-width:1000px) {
    .report-row {
        grid-template-columns:28px minmax(200px,2fr) repeat(2,minmax(100px,1fr)) minmax(120px,auto)
    }
    .report-stat:nth-of-type(3) {
        display:none
    }
}
@media(max-width:700px) {
    .report-row {
        grid-template-columns:28px minmax(0,1fr) auto;
        gap:10px
    }
    .report-stat {
        display:none!important
    }
    .report-main p {
        white-space:normal
    }
    .report-actions {
        grid-column:2 / -1;
        justify-content:flex-start
    }
    .report-select-all {
        padding-left:4px
    }
}
.modal-shell {
    color:var(--ink)
}
.modal-shell .muted {
    color:var(--muted)
}
.theme-dark .modal-shell {
    background:linear-gradient(145deg,#142f26,#10251f);
    border-color:#396653;
    color:var(--ink);
    box-shadow:0 30px 80px rgba(0,0,0,.48)
}
.theme-dark .modal-header {
    border-bottom-color:#396653
}
/* Shared final layout safeguards. These rules keep the shell, cards and controls
   stable when content is long or the page is scrolled. */
.app-shell  {
    min-height: 100dvh;
    align-items: stretch;
}
.sidebar  {
    flex: 0 0 250px;
    align-self: stretch;
    height: auto;
    min-height: 100dvh;
    background-color: #0d1c18;
}

/* Dashboard actions are links semantically, but should read as controls. */
.ui-control-primary {
    text-decoration: none;
}
.report-select-all input,
.report-selection input,
.table-select-cell input,
.confirm-check input  {
    appearance: none;
    -webkit-appearance: none;
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    margin: 0;
    border: 1px solid #a9c9bc;
    border-radius: 6px;
    background: var(--card);
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.report-select-all input:hover,
.report-selection input:hover,
.table-select-cell input:hover,
.confirm-check input:hover  {
    border-color: var(--green);
    box-shadow: 0 0 0 4px rgba(15, 175, 130, .12);
}
.report-select-all input:checked,
.report-selection input:checked,
.table-select-cell input:checked,
.confirm-check input:checked  {
    border-color: var(--green);
    background-color: var(--green);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8 3 3 7-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 13px;
}
.report-select-all input:focus-visible,
.report-selection input:focus-visible,
.table-select-cell input:focus-visible,
.confirm-check input:focus-visible  {
    outline: 3px solid rgba(15, 175, 130, .24);
    outline-offset: 2px;
}
.analysis-job-row  {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
    padding: 18px 18px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--card);
    color: var(--ink);
}
.analysis-job-row strong,
.analysis-job-row span  {
    color: var(--ink);
}
.analysis-job-row small,
.analysis-job-row em  {
    color: var(--muted);
}
.theme-dark .analysis-job-row  {
    background: linear-gradient(145deg, #142f26, #10251f);
    border-color: var(--line);
    color: var(--ink);
}
.theme-dark .analysis-job-row strong,
.theme-dark .analysis-job-row span  {
    color: var(--ink);
}
.watch-item-footer,
.watch-item-footer > div  {
    min-width: 0;
    flex-wrap: wrap;
}
.watch-item-footer > div  {
    justify-content: flex-end;
}
.watch-action  {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 800px)  {
    .sidebar  {
        height: 100dvh;
        min-height: 100dvh;
    }
    .analysis-job-row  {
        align-items: stretch;
        flex-direction: column;
    }
    .watch-item-footer > div  {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Keep confirmation and detail dialogs compact, centered and consistent. */
.modal-shell {
    width: min(680px, calc(100vw - 40px));
    max-width: 680px;
    max-height: min(680px, calc(100dvh - 64px));
}
.modal-shell .detail-user-header {
    display:flex;
    flex-direction:column;
    gap:5px;
    padding:14px 16px;
    margin-bottom:20px;
    border:1px solid var(--line);
    border-radius:14px;
    background:linear-gradient(135deg, var(--green-soft), var(--card));
}
.detail-user-header strong {
    color:var(--ink);
    font-size:18px;
}
.detail-user-header span {
    color:var(--muted);
    font-size:13px;
}
.detail-user-statusbar {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin:0 0 22px;
    padding:0 2px 18px;
    border-bottom:1px solid var(--line);
}
.detail-role,
.detail-member-since {
    padding:6px 9px;
    border:1px solid var(--line);
    border-radius:999px;
    color:var(--muted);
    font-size:11px;
    font-weight:700;
}
.detail-fund-tags .risk-tag {
    gap:6px;
    border-color:transparent;
}
.detail-fund-tags .risk-tag small {
    font-size:10px;
    opacity:.72;
}
.detail-fund-tags .risk-tag.risk-low {
    background:#e4f7ef;
    color:#137955;
}
.detail-fund-tags .risk-tag.risk-medium {
    background:#fff2d9;
    color:#9b6918;
}
.detail-fund-tags .risk-tag.risk-high {
    background:#ffe5e1;
    color:#ae4b40;
}
.theme-dark .detail-fund-tags .risk-tag.risk-low {
    background:#1c4b3b;
    color:#bcebd8;
}
.theme-dark .detail-fund-tags .risk-tag.risk-medium {
    background:#4b3a22;
    color:#f0c98f;
}
.theme-dark .detail-fund-tags .risk-tag.risk-high {
    background:#4b2d2b;
    color:#ffc2b8;
}
.detail-user-meta {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:7px 12px;
    margin-bottom:22px;
    padding-bottom:18px;
    border-bottom:1px solid var(--line);
}
.detail-user-meta span {
    color:var(--muted);
    font-size:11px;
}
.detail-user-meta strong {
    color:var(--ink);
    font-size:13px;
}
.modal-shell h3 {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:18px 0 12px;
}
.detail-count {
    color:var(--muted);
    font-size:11px;
    font-weight:600;
}
.detail-fund-tags {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.detail-fund-tags .tag {
    display:inline-flex;
    align-items:center;
    min-height:32px;
    padding:6px 11px;
    border:1px solid var(--line);
    border-radius:999px;
    background:var(--green-soft);
    color:var(--green);
    font-size:12px;
    font-weight:800;
    text-decoration:none;
    transition:transform .18s ease, border-color .18s ease, background-color .18s ease;
}
.detail-fund-tags .tag:hover {
    transform:translateY(-1px);
    border-color:var(--green);
    background:var(--card);
}
.user-analysis-row {
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    gap:4px 14px;
}
.user-analysis-row strong { grid-column:1 / -1; }
.user-analysis-row span,
.user-analysis-row small,
.user-analysis-row em {
    color:var(--muted);
    font-size:11px;
    font-style:normal;
}
.user-analysis-row em { grid-column:1 / -1; }
.job-actions {
    display:block;
}
.job-actions-header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    margin-bottom:16px;
}
.job-actions-header strong {
    display:block;
    color:var(--ink);
    font-size:15px;
}
.job-actions-header p {
    margin-top:5px;
    max-width:680px;
    line-height:1.5;
}

.worker-live-progress {
    margin-top: 1rem;
    padding: .9rem 1rem;
    border: 1px solid var(--ui-card-border);
    border-radius: var(--ui-radius-sm, .75rem);
    background: color-mix(in srgb, var(--ui-card-bg) 84%, var(--ui-live-color) 16%);
}

.worker-live-progress-heading {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--ui-text);
    font-size: .88rem;
}

.worker-live-progress-heading strong {
    color: var(--ui-live-color);
}

.worker-live-progress-track {
    height: .45rem;
    margin: .6rem 0 .4rem;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ui-live-color) 16%, transparent);
}

.worker-live-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ui-live-color);
    transition: width .45s ease, background-color .25s ease;
}

.worker-live-progress.is-running .worker-live-progress-track span {
    animation: live-progress-shimmer 1.8s ease-in-out infinite;
}

.worker-live-progress small {
    color: var(--ui-muted);
}

.analysis-edit-fields {
    margin: 1rem 0 1.25rem;
    padding: 1rem;
    border: 1px solid var(--ui-card-border);
    border-radius: var(--ui-radius-sm, .75rem);
    background: color-mix(in srgb, var(--ui-card-bg) 90%, var(--ui-live-color) 10%);
}

.analysis-edit-fields .section-heading {
    margin-bottom: .75rem;
}

.worker-job-monitor .section-heading {
    align-items: center;
}
.worker-job-list {
    display: grid;
    gap: .75rem;
}
.worker-job-card,
.worker-job-history-group {
    border: 1px solid var(--ui-card-border);
    border-radius: var(--ui-radius-sm, .75rem);
    background: color-mix(in srgb, var(--ui-card-bg) 92%, var(--ui-live-color) 8%);
}
.worker-job-card {
    padding: 1rem 1.1rem;
}
.worker-job-card.is-running {
    border-color: color-mix(in srgb, var(--ui-live-color) 55%, var(--ui-card-border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-live-color) 12%, transparent);
}
.worker-job-tabs {
    display: inline-flex;
    gap: .55rem;
    margin: .9rem 0 .85rem;
    padding: .25rem;
    border: 1px solid var(--ui-card-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--ui-card-bg) 88%, var(--ui-live-color) 12%);
}
.worker-job-tabs .ui-button {
    min-width: 92px;
    min-height: 34px;
    padding: .45rem .85rem;
    border: 0;
    border-radius: 999px;
    color: var(--ui-muted);
    background: transparent;
    justify-content: space-between;
}
.worker-job-tabs .ui-button.is-selected {
    color: var(--ui-text);
    background: var(--ui-card-bg);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--ui-live-color) 15%, transparent);
}
.worker-job-tabs .ui-button small {
    color: var(--ui-live-color);
    font-size: .7rem;
}
.worker-service-errors {
    display: grid;
    gap: .55rem;
    flex: 1 1 100%;
    margin-top: .7rem;
    padding-top: .75rem;
    border-top: 1px solid var(--ui-card-border);
}
.worker-service-errors > strong {
    color: var(--ui-text);
    font-size: .8rem;
}
.worker-service-error {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .25rem .7rem;
    padding-top: .45rem;
    border-top: 1px solid var(--ui-card-border);
}
.worker-service-error > div:first-child strong,
.worker-service-error-summary {
    display: block;
    color: var(--ui-text);
    font-size: .76rem;
}
.worker-service-error > div:first-child small {
    display: block;
    margin-top: .2rem;
    color: var(--ui-muted);
    font-size: .7rem;
}
.worker-service-error-summary {
    grid-column: 1 / -1;
    color: var(--ui-muted);
    line-height: 1.4;
}
.worker-job-card-heading,
.worker-job-history-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}
.worker-job-name,
.worker-job-history-item strong {
    display: block;
    color: var(--ui-text);
    font-weight: 750;
}
.worker-job-card-heading small,
.worker-job-history-item small {
    display: block;
    margin-top: .25rem;
    color: var(--ui-muted);
    font-size: .76rem;
}
.worker-job-card-heading > strong {
    color: var(--ui-live-color);
    white-space: nowrap;
}
.worker-job-stage {
    margin: .8rem 0 .55rem;
    color: var(--ui-text);
    line-height: 1.45;
}
.worker-job-progress {
    height: .5rem;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ui-live-color) 16%, transparent);
}
.worker-job-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ui-live-color);
    transition: width .45s ease;
}
.worker-job-progress.is-indeterminate span {
    width: 35%;
    animation: worker-job-progress 1.4s ease-in-out infinite;
}

/* Primary actions inside the watchlist must retain their solid contrast.
   The generic link-primary rule used to turn the text white while the
   watchlist's pale background remained active. */
.watch-action.primary {
    color: #fff;
    background: var(--green);
    border-color: var(--green);
}
.watch-action.primary:hover {
    color: #fff;
    background: var(--green-strong);
    border-color: var(--green-strong);
}

/* Fund discovery is a browsing screen: keep its controls compact so the
   result grid gets visual priority. */
.search-panel.ui-filter-bar.discover-panel {
    margin-top: 12px;
    padding: 14px 16px;
    border-radius: 18px;
}
.search-panel.ui-filter-bar.discover-panel .ui-filter-bar-content {
    gap: 8px 12px;
}
.search-panel.ui-filter-bar.discover-panel .ui-field {
    margin: 0;
}
.search-panel.ui-filter-bar.discover-panel .ui-field label {
    margin-bottom: 5px;
    font-size: 12px;
}
.search-panel.ui-filter-bar.discover-panel .ui-input-shell input,
.search-panel.ui-filter-bar.discover-panel .smooth-select-trigger {
    min-height: 40px;
    padding: 9px 12px;
    border-radius: 11px;
}
.search-panel.ui-filter-bar.discover-panel .discover-category-filter {
    gap: 5px;
    padding-top: 1px;
}
.search-panel.ui-filter-bar.discover-panel .discovery-categories {
    gap: 6px;
    max-height: 82px;
    overflow-y: auto;
    padding-right: 2px;
}
.search-panel.ui-filter-bar.discover-panel .category-chip {
    min-height: 36px;
    padding: 8px 11px;
    font-size: 11px;
}
.search-panel.ui-filter-bar.discover-panel .discover-actions {
    margin-top: 1px;
    padding-top: 8px;
}
.search-panel.ui-filter-bar.discover-panel .discover-actions .ui-button {
    min-height: 38px;
    padding: 8px 14px;
}

.search-panel.ui-filter-bar.discover-panel .discover-advanced-toggle {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-start;
    margin-top: 2px;
    padding-top: 4px;
    border-top: 1px solid var(--line);
}
.search-panel.ui-filter-bar.discover-panel .discover-advanced-toggle .ui-button {
    min-height: 34px;
    padding: 6px 2px;
    color: var(--green-strong);
}
.search-panel.ui-filter-bar.discover-panel .discover-advanced-filters {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 72%, var(--green-soft));
    animation: filter-panel-in 180ms ease-out both;
}
.search-panel.ui-filter-bar.discover-panel .active-filter-chips {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 2px;
}
.search-panel.ui-filter-bar.discover-panel .active-filter-chip {
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid var(--ui-card-border);
    border-radius: 999px;
    font-size: 11px;
}
@keyframes filter-panel-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 1000px) {
    .search-panel.ui-filter-bar.discover-panel .discover-advanced-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .search-panel.ui-filter-bar.discover-panel .discover-advanced-filters { grid-template-columns: 1fr; }
}

/* Keep tag rows visually separate from metric separators. */
.watch-item-tags {
    padding-bottom: 4px;
}
.watch-item-tags + .watch-item-metrics {
    margin-top: 2px;
}

/* Compact assessment builder: the fund results below are the primary
   content, so the form should stay a focused control surface. */
.analysis-builder {
    padding: 18px 22px;
}
.analysis-builder > h2 {
    margin: 0 0 14px;
}
.analysis-builder .analysis-quick-funds {
    gap: 7px;
    margin: 0 0 12px;
}
.analysis-builder .analysis-quick-fund {
    min-height: 38px;
    gap: 6px;
    padding: 8px 12px;
}
.analysis-quick-fund-selected {
    color: var(--green-strong);
    font-size: 10px;
    font-weight: 800;
}
.analysis-builder .form-row {
    column-gap: 14px;
    row-gap: 10px;
}
.analysis-builder .ui-field {
    margin: 0;
}
.analysis-builder .ui-field label {
    margin-bottom: 5px;
    font-size: 12px;
}
.analysis-builder .form-row + .ui-control-primary {
    margin-top: 14px;
}
.worker-job-meta,
.worker-empty-message {
    display: block;
    margin: .35rem 0 .7rem;
    color: var(--ui-muted);
    font-size: .78rem;
    line-height: 1.45;
}
.worker-job-history-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin-top: .9rem;
}
.worker-job-history-group {
    overflow: hidden;
}
.worker-job-history-group summary {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1rem;
    cursor: pointer;
    color: var(--ui-text);
    font-weight: 700;
    list-style: none;
}
.worker-job-history-group summary::-webkit-details-marker { display: none; }
.worker-job-history-group summary strong { color: var(--ui-live-color); }
.worker-job-history-list {
    display: grid;
    gap: .65rem;
    padding: 0 1rem 1rem;
}
.worker-job-history-item {
    flex-wrap: wrap;
    padding-top: .65rem;
    border-top: 1px solid var(--ui-card-border);
}
.worker-job-history-item > span {
    flex: 1 1 100%;
    color: var(--ui-muted);
    font-size: .78rem;
    line-height: 1.4;
}
.worker-job-history-item.is-failed strong { color: var(--ui-danger, #d75a5a); }
.worker-job-error-toggle { margin-left: auto; padding: .35rem .6rem; font-size: .75rem; }
.worker-job-error-detail {
    display: block;
    flex: 1 1 100%;
    max-height: 9rem;
    overflow: auto;
    padding: .7rem;
    border-radius: .55rem;
    background: color-mix(in srgb, var(--ui-card-bg) 82%, var(--ui-danger, #d75a5a) 18%);
    color: var(--ui-text);
    white-space: pre-wrap;
    font-size: .75rem;
    line-height: 1.45;
}
@keyframes worker-job-progress { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
@media (max-width: 720px) {
    .worker-job-history-grid { grid-template-columns: 1fr; }
}

/* Analysis result is a real viewport modal. Its edit select opens upward so
   the menu never pushes the report into the page flow or hides behind cards. */
#app .analysis-result-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2000 !important;
    width: 100vw;
    height: 100dvh;
    overflow: hidden !important;
    padding: clamp(12px, 3vh, 32px);
    isolation: isolate;
}
#app .analysis-result-card {
    width: min(900px, calc(100vw - 48px));
    max-width: 900px;
    max-height: min(88dvh, 860px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}
#app .analysis-result-card .smooth-select-menu {
    top: auto;
    bottom: calc(100% + 8px);
    max-height: min(260px, 42dvh);
}
#app .analysis-result-card .smooth-select.is-open {
    z-index: 3000;
}

.analysis-edit-fields h3 {
    margin: 0;
    font-size: 1rem;
}

.analysis-edit-fields .form-row {
    gap: 12px;
}

/* Select popovers inside the result modal must stay above the modal content. */
.analysis-result-card:has(.smooth-select.is-open) {
    overflow: visible;
}

.analysis-result-backdrop {
    overflow: auto;
}

.analysis-result-card {
    overflow: visible;
}

.analysis-edit-fields:has(.smooth-select.is-open) {
    position: relative;
    z-index: 4000;
}

.analysis-edit-fields .ui-field:has(.smooth-select.is-open) {
    position: relative;
    z-index: 4010;
}

.analysis-result-card .smooth-select {
    position: relative;
    z-index: 20;
}

.analysis-result-card .smooth-select.is-open {
    z-index: 3000;
}

.analysis-result-card .smooth-select-menu {
    z-index: 3010;
}

/* The detail dialog can be opened from inside the result dialog. Keep its
   backdrop above the result card instead of rendering it behind the parent. */
#app .analysis-detail-backdrop {
    z-index: 5000 !important;
}

#app .analysis-detail-backdrop .analysis-detail-modal {
    position: relative;
    z-index: 5010;
}

.live-connection-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    opacity: .82;
}

.live-connection-indicator i {
    width: .42rem;
    height: .42rem;
    border-radius: 50%;
    background: var(--ui-muted);
    transition: background-color .25s ease, box-shadow .25s ease;
}

.live-connection-connected i {
    background: var(--ui-live-color);
    box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--ui-live-color) 15%, transparent);
}

.live-connection-reconnecting i {
    background: #d39a32;
    animation: live-connection-pulse 1s ease-in-out infinite;
}

.worker-live-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    max-width: min(100%, 25rem);
    min-height: 1.25rem;
    color: var(--ui-muted);
    font-size: .78rem;
    line-height: 1.3;
    white-space: nowrap;
}

.worker-live-status > i {
    width: .42rem;
    height: .42rem;
    flex: 0 0 .42rem;
    border-radius: 50%;
    background: var(--ui-muted);
}

.worker-live-status.is-connected {
    color: color-mix(in srgb, var(--ui-live-color) 72%, var(--ui-text));
}

.worker-live-status.is-connected > i {
    background: var(--ui-live-color);
    box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--ui-live-color) 15%, transparent);
}

.worker-live-status > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes live-connection-pulse {
    50% { opacity: .38; transform: scale(.72); }
}

@keyframes live-progress-shimmer {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.18); }
}
.job-status-badge {
    flex:0 0 auto;
    padding:7px 10px;
    border:1px solid var(--line);
    border-radius:999px;
    background:var(--card);
    color:var(--muted);
    font-size:11px;
    font-weight:800;
}
.job-action-grid {
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px;
}
.job-action-button {
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    min-height:92px;
    padding:13px;
    border:1px solid var(--line);
    border-radius:13px;
    background:var(--card);
    color:var(--ink);
    font:inherit;
    text-align:left;
    cursor:pointer;
    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.job-action-button:hover:not(:disabled) {
    transform:translateY(-2px);
    border-color:var(--green);
    background:var(--green-soft);
    box-shadow:0 8px 18px rgba(22,143,103,.12);
}
.job-action-button strong { font-size:12px; }
.job-action-button small { color:var(--muted); font-size:10px; line-height:1.35; }
.job-action-button .ui-button-content {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:5px;
    width:100%;
    min-width:0;
    line-height:1.25
}
.job-action-button .ui-button-content strong,
.job-action-button .ui-button-content small {
    display:block;
    max-width:100%;
    overflow-wrap:anywhere
}
.job-action-button[aria-busy="true"] { border-color:var(--green); background:var(--green-soft); }
.job-action-button[aria-busy="true"]::after {
    content:"";
    position:absolute;
    top:12px;
    right:12px;
    width:12px;
    height:12px;
    border:2px solid rgba(13,139,103,.24);
    border-top-color:var(--green);
    border-radius:50%;
    animation:spin .7s linear infinite;
}
.theme-dark .job-action-button,
.theme-dark .job-status-badge {
    background:#17372c;
    border-color:#396653;
}
.theme-dark .job-action-button:hover:not(:disabled) {
    background:#1d493b;
    border-color:#55b996;
}
@media (max-width: 720px) {
    .job-action-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .modal-shell { width:calc(100vw - 24px); max-height:calc(100dvh - 32px); }
    .detail-user-meta { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .job-actions-header { flex-direction:column; }
    .job-status-badge { align-self:flex-start; }
    .job-action-grid { grid-template-columns:1fr; }
}
/* Responsive safety net
   Keep layout children shrinkable, prevent accidental viewport overflow and
   give complex sections a predictable mobile layout. */
.page-content,
.topbar,
.welcome-row,
.section-heading,
.detail-header,
.detail-grid,
.metric-grid,
.fund-grid,
.comparison-grid,
.portfolio-grid,
.watchlist-grid,
.analysis-job-row,
.report-row,
.kap-summary-grid,
.kap-analysis-metrics  {
    min-width: 0;
}
.welcome-row > *,
.section-heading > *,
.detail-header > *,
.detail-grid > *,
.metric-grid > *,
.fund-grid > *,
.comparison-grid > *,
.portfolio-grid > *,
.watchlist-grid > *,
.analysis-job-row > *,
.report-row > *,
.kap-summary-grid > *,
.kap-analysis-metrics > *  {
    min-width: 0;
}
.fund-card h3,
.fund-card p,
.comparison-card h3,
.watch-item-main p,
.report-main p,
.analysis-job-fund-info span,
.analysis-job-fund-info small,
.kap-summary-card,
.kap-analysis-card  {
    overflow-wrap: anywhere;
}
.topbar,
.breadcrumb,
.top-actions,
.page-header-row,
.page-header-actions,
.detail-header,
.card-header,
.analysis-result-actions,
.report-actions,
.user-detail-actions,
.job-actions  {
    min-width: 0;
}
.breadcrumb,
.top-actions,
.page-header-actions,
.analysis-result-actions,
.report-actions  {
    flex-wrap: wrap;
}
.real-chart,
.comparison-chart-card,
.comparison-chart,
.chart-card,
.chart-date-filter,
.chart-periods,
.analysis-result-card,
.analysis-detail-modal,
.modal-shell,
.drawer-shell  {
    min-width: 0;
}
.comparison-chart,
.real-chart svg  {
    max-width: 100%;
}
.smooth-select-menu,
.date-picker-popover,
.export-options  {
    max-width: min(calc(100vw - 24px), 420px);
}
.smooth-select-option  {
    overflow-wrap: anywhere;
}
.modal-shell,
.drawer-shell,
.analysis-detail-modal,
.analysis-result-card  {
    width: min(100%, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    overflow-x: hidden;
    overflow-y: auto;
}
.modal-body,
.analysis-detail-modal,
.analysis-result-card  {
    overflow-wrap: anywhere;
}
.modal-actions,
.analysis-result-actions,
.analysis-job-actions,
.portfolio-actions  {
    flex-wrap: wrap;
}
.modal-actions > *,
.analysis-result-actions > *,
.analysis-job-actions > *  {
    min-width: 0;
}
.admin-table-wrap  {
    max-width: 100%;
}
.admin-table  {
    min-width: 620px;
}
.theme-dark .chart-date-filter input,
.theme-dark .form-card input,
.theme-dark .form-card select,
.theme-dark .admin-table select,
.theme-dark .watch-add select  {
    background: #193a2f;
    color: var(--ink);
    border-color: #396653;
}
.theme-dark .comparison-chart-card,
.theme-dark .comparison-card,
.theme-dark .history-card,
.theme-dark .kap-summary-card,
.theme-dark .kap-analysis-card  {
    background: linear-gradient(145deg, #142f26, #10251f);
    border-color: var(--line);
    color: var(--ink);
}
@media (max-width: 1100px)  {
    .page-content  {
        padding-left: 3.5%;
        padding-right: 3.5%;
    }
    .metric-grid,
    .fund-grid,
    .watchlist-grid  {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .detail-grid  {
        grid-template-columns: minmax(0, 1.25fr) minmax(280px, 1fr);
    }
    .analysis-builder .form-row  {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .comparison-chart  {
        height: 240px;
    }
}
@media (max-width: 800px)  {
    .topbar  {
        gap: 10px;
    }
    .breadcrumb  {
        flex: 1 1 auto;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .top-actions  {
        flex: 0 0 auto;
        gap: 7px;
    }
    .metric-grid,
    .fund-grid,
    .watchlist-grid,
    .portfolio-grid,
    .detail-grid  {
        grid-template-columns: minmax(0, 1fr);
    }
    .section-heading,
    .detail-header,
    .card-header  {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .section-heading > :last-child  {
        margin-left: auto;
    }
    .search-panel,
    .analysis-builder .form-row,
    .compare-picker.ui-filter-bar .ui-filter-bar-content  {
        grid-template-columns: minmax(0, 1fr);
    }
    .discover-actions,
    .watch-add,
    .chart-date-filter,
    .modal-actions,
    .analysis-result-actions  {
        width: 100%;
    }
    .discover-actions > *,
    .watch-add > *,
    .chart-date-filter > *,
    .modal-actions > *  {
        flex: 1 1 160px;
        min-width: 0;
    }
    .chart-date-filter input,
    .date-picker-field,
    .date-picker-trigger  {
        width: 100%;
        min-width: 0;
    }
    .chart-periods  {
        max-width: 100%;
        overflow-x: auto;
    }
    .comparison-chart-card  {
        padding: 16px;
    }
    .comparison-toolbar {
        align-items: flex-start;
        flex-direction: column;
        margin-top: 0;
    }
    .comparison-periods {
        width: 100%;
        overflow-x: auto;
    }
    .comparison-periods .ui-button {
        flex: 1 0 auto;
    }
    .comparison-chart  {
        height: 210px;
        margin-top: 14px;
    }
    .comparison-legend  {
        gap: 8px;
    }
    .comparison-legend-item  {
        max-width: 100%;
    }
    .analysis-job-row  {
        display: grid;
        gap: 12px;
    }
    .admin-table  {
        min-width: 0;
    }
    .analysis-job-progress > div,
    .analysis-job-progress > .section-heading  {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .analysis-job-actions  {
        width: 100%;
        justify-content: flex-start;
    }
    .analysis-job-actions > *  {
        flex: 1 1 140px;
    }
    .kap-summary-grid,
    .kap-analysis-metrics  {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .modal-backdrop,
    .overlay  {
        padding: 12px;
    }
    .modal-shell,
    .analysis-detail-modal,
    .analysis-result-card  {
        border-radius: 16px;
    }
}
@media (max-width: 520px)  {
    .page-content  {
        padding: 24px 12px 88px;
    }
    h1  {
        font-size: 27px;
    }
    h2  {
        font-size: 21px;
    }
    .topbar  {
        padding: 0 10px;
    }
    .breadcrumb span  {
        margin: 0 4px;
    }
    .nav-language-toggle  {
        min-width: 44px;
        padding: 0 7px;
    }
    .profile-name  {
        display: none;
    }
    .metric-card,
    .fund-card,
    .chart-card,
    .decision-card,
    .comparison-card,
    .portfolio-card,
    .form-card,
    .admin-section,
    .history-card,
    .analysis-job-progress,
    .settings-card  {
        padding: 16px;
    }
    .fund-card .portfolio-actions,
    .portfolio-actions,
    .analysis-result-actions,
    .modal-actions  {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }
    .fund-card .portfolio-actions > *,
    .portfolio-actions > *,
    .analysis-result-actions > *,
    .modal-actions > *  {
        width: 100%;
    }
    .report-row  {
        grid-template-columns: 24px minmax(0, 1fr);
        padding: 13px 10px;
    }
    .report-actions  {
        grid-column: 2;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
    }
    .report-actions > *  {
        min-width: 0;
    }
    .analysis-detail-row  {
        gap: 6px;
    }
    .analysis-detail-row strong  {
        overflow-wrap: anywhere;
    }
    .toast-stack  {
        width: calc(100vw - 20px);
        right: 10px;
    }
}
@media (max-width: 360px)  {
    .top-actions  {
        gap: 4px;
    }
    .shell-theme-switch,
    .nav-language-toggle,
    .ui-button-icon  {
        min-width: 34px;
        width: 34px;
        padding: 0;
    }
    .auth-card  {
        padding: 24px 18px;
    }
    .modal-body,
    .modal-header  {
        padding: 16px;
    }
}
.data-pending  {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px 12px;
    align-items: center;
    margin-top: 16px;
    padding: 15px 16px;
    border: 1px solid #cde9dc;
    border-radius: 14px;
    background: linear-gradient(135deg, #effaf5, #e5f5ee);
    color: #256451;
}
.data-pending strong,
.data-pending div span  {
    display: block;
}
.data-pending strong  {
    font-size: 13px;
}
.data-pending div span  {
    margin-top: 4px;
    color: #64847a;
    font-size: 11px;
    line-height: 1.45;
}
.data-pending-spinner  {
    width: 18px;
    height: 18px;
    border: 2px solid #bfe4d5;
    border-top-color: var(--green);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
.data-pending-progress  {
    grid-column: 1 / -1;
    width: 100%;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: #cfe9de;
}
.data-pending-progress span  {
    display: block;
    width: 38%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #16a678, #2c98c7);
    animation: data-pending-progress 1.6s ease-in-out infinite;
}
.data-pending-compact  {
    grid-template-columns: auto minmax(0, 1fr);
    margin-top: 12px;
    padding: 10px 11px;
}
.data-pending-compact .data-pending-progress  {
    display: none;
}
.data-pending-compact strong  {
    font-size: 11px;
}
.data-pending-compact div span  {
    font-size: 10px;
}
@keyframes data-pending-progress  {
    0%  {
        transform: translateX(-110%);
    }
    100%  {
        transform: translateX(290%);
    }
}
.theme-dark .data-pending  {
    border-color: #326a55;
    background: linear-gradient(135deg, #173d30, #153329);
    color: #bdebd8;
}
.theme-dark .data-pending div span  {
    color: #91b9aa;
}
.theme-dark .data-pending-progress  {
    background: #285443;
}
@media (prefers-reduced-motion: reduce)  {
    .data-pending-spinner,
    .data-pending-progress span  {
        animation: none;
    }
}

:where(.ui-control-primary, .ui-control-secondary, .sidebar-logout, .ui-button-close, .ui-button-icon, .nav-mobile-toggle, .ui-button-icon, .shell-theme-switch, .nav-language-toggle) {
    min-height: var(--ui-control-height);
    transition: color var(--ui-transition), background-color var(--ui-transition), border-color var(--ui-transition), box-shadow var(--ui-transition), transform var(--ui-transition);
}

:where(.ui-control-primary, .ui-control-secondary, .sidebar-logout, .ui-button-close, .ui-button-icon, .nav-mobile-toggle, .ui-button-icon, .shell-theme-switch, .nav-language-toggle):focus-visible,
:where(input, select, textarea, .smooth-select-trigger, .date-picker-trigger):focus-visible {
    outline: 0;
    box-shadow: var(--ui-focus-ring);
}

:where(button, a, input, select, textarea):disabled,
:where(button, a)[aria-disabled="true"] {
    cursor: not-allowed;
}

:where(.ui-control-primary, .ui-control-secondary, .sidebar-logout, .ui-button-close):disabled {
    opacity: .62;
    box-shadow: none;
}

/* Short, low-contrast feedback for values received from the live data stream. */
.live-updated {
    animation: live-data-pulse 900ms ease-out;
}

@keyframes live-data-pulse {
    0% {
        border-color: var(--ui-card-border);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--ui-live-color) 0%, transparent);
    }
    28% {
        border-color: color-mix(in srgb, var(--ui-live-color) 70%, var(--ui-card-border));
        box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--ui-live-color) 5%, transparent), 0 0 0 4px color-mix(in srgb, var(--ui-live-color) 16%, transparent), 0 10px 28px color-mix(in srgb, var(--ui-live-color) 9%, transparent);
    }
    100% {
        border-color: var(--ui-card-border);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--ui-live-color) 0%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .live-updated {
        animation: none;
        border-color: color-mix(in srgb, var(--ui-live-color) 45%, var(--ui-card-border));
    }
}

/* Comparison picker: the label belongs to the select column, while the
   actions align with the select trigger. Keeping the picker marginless also
   prevents selected chips from changing the first-row button position. */
.compare-picker.ui-filter-bar .ui-filter-bar-content {
    grid-template-columns: minmax(0, 434px) auto;
    align-items: end;
}

.compare-picker .compare-fund-picker {
    min-width: 0;
    margin: 0;
}

.compare-picker .compare-fund-picker > label {
    display: block;
    margin: 0 0 8px;
}

.compare-picker .compare-fund-picker .smooth-select,
.compare-picker .compare-fund-picker .smooth-select-trigger {
    width: 100%;
}

.compare-picker-actions {
    align-self: end;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
}

.compare-picker-actions > .ui-button {
    flex: 0 1 auto;
    min-width: 136px;
    white-space: nowrap;
}

.compare-picker-selection {
    grid-column: 1 / -1;
    min-width: 0;
    margin-top: 2px;
}

@media (max-width: 800px) {
    .compare-picker.ui-filter-bar .ui-filter-bar-content {
        grid-template-columns: minmax(0, 1fr);
    }

    .compare-picker-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .compare-picker-actions > .ui-button {
        flex: 1 1 0;
        min-width: 0;
    }
}

.theme-dark :where(.ui-card, .metric-card, .fund-card, .chart-card, .decision-card, .portfolio-card, .form-card, .settings-card, .admin-section, .history-card, .analysis-card, .watch-item, .comparison-card) {
    color: var(--ink);
}

/* Legacy surface sizing only. Interactive motion belongs to UiCard and interaction-contract.css. */
:where(.ui-card,.metric-card,.fund-card,.chart-card,.decision-card,.portfolio-card,.form-card,.settings-card,.admin-section,.history-card,.analysis-card,.watch-item,.comparison-card,.comparison-chart-card,.analysis-job-progress,.report-row,.kap-summary-card,.kap-analysis-card,.search-panel,.discover-panel) {
    min-width:0;
    border-radius:var(--ui-radius-lg);
    border:1px solid var(--ui-card-border);
}
@media (max-width:800px) {
    :where(.ui-card,.metric-card,.fund-card,.chart-card,.decision-card,.portfolio-card,.form-card,.settings-card,.admin-section,.history-card,.analysis-card,.watch-item,.comparison-card,.comparison-chart-card,.analysis-job-progress,.report-row,.kap-summary-card,.kap-analysis-card,.search-panel,.discover-panel) {
        max-width:100%;
    }
}
.analysis-job-ready {
    border-left: 3px solid var(--green);
}
.analysis-job-ready .analysis-job-fund-info strong,
.analysis-job-ready .analysis-job-fund-info span {
    font-size: 15px;
}
.analysis-job-ready .analysis-job-fund-info strong {
    color: var(--green);
}
.analysis-job-ready .analysis-job-fund-info em {
    display: inline-flex;
    width: max-content;
    margin-top: 5px;
    padding: 5px 8px;
    border: 1px solid color-mix(in srgb, var(--green) 32%, var(--line));
    border-radius: 999px;
    color: var(--green);
    font-weight: 750;
}

/* Section headings inside cards must use the card's own rhythm. The page-level
   heading margin is intentionally larger, but would create empty space when
   the same component is rendered as the first child of a card. */
:where(
    .ui-card,
    .admin-section,
    .form-card,
    .history-card,
    .settings-card,
    .notification-panel,
    .analysis-job-progress,
    .search-panel,
    .discover-panel
) > .section-heading {
    margin: 0 0 18px;
    align-items: flex-start;
}

.analysis-edit-fields > .section-heading {
    margin: 0 0 .75rem;
}

.analysis-job-progress > .section-heading {
    margin-bottom: 6px;
}

@media (max-width: 800px) {
    :where(.metric-card, .fund-card, .chart-card, .decision-card, .portfolio-card, .form-card, .settings-card, .admin-section, .history-card, .analysis-card, .watch-item, .comparison-card) {
        overflow-wrap: anywhere;
    }
}

/* Final dark-topbar controls: keep language and profile surfaces in the same dark system. */
.theme-dark .top-actions .nav-language-toggle {
    background:#17372c !important;
    border-color:#396653 !important;
    color:#d9eee5 !important;
    box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.theme-dark .top-actions .nav-language-toggle:hover {
    background:#1d493b !important;
    border-color:#55b996 !important;
    color:#6ee0b9 !important;
    box-shadow:0 10px 22px rgba(0,0,0,.28);
}
.theme-dark .top-actions .profile-link {
    background:#17372c;
    border:1px solid #396653;
    border-radius:13px;
    color:#eaf8f1;
    box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.theme-dark .top-actions .profile-link:hover {
    background:#1d493b;
    border-color:#55b996;
    box-shadow:0 10px 22px rgba(0,0,0,.28);
}
.theme-dark .top-actions .profile-name {
    color:#d9eee5;
}
.theme-dark .ui-button-close {
    background:#17372c;
    border-color:#396653;
    color:#bcebd8;
    transition:color var(--ui-transition), background-color var(--ui-transition), border-color var(--ui-transition), box-shadow var(--ui-transition), transform var(--ui-transition);
}
.theme-dark .ui-button-close:hover:not(:disabled) {
    background:#4b2d2b;
    border-color:#c06b5e;
    color:#ffd0c7;
    box-shadow:0 8px 18px rgba(0,0,0,.24);
    transform:translateY(-2px) scale(1.02);
}
.theme-dark .ui-control-danger {
    transition:color var(--ui-transition), background-color var(--ui-transition), border-color var(--ui-transition), box-shadow var(--ui-transition), transform var(--ui-transition);
}
.theme-dark .ui-control-danger:hover:not(:disabled) {
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(0,0,0,.28);
}

/* Shared card contract: content first, actions below, no clipped controls. */
.report-row {
    display:grid!important;
    grid-template-columns:28px minmax(0,1fr)!important;
    grid-template-areas:
        "selection main"
        "selection metrics"
        "selection actions";
    align-items:start;
    column-gap:16px;
    row-gap:14px;
    min-height:0;
}
.report-selection {
    grid-area:selection;
    align-self:center;
}
.report-main {
    grid-area:main;
}
.report-main:after {
    display:none;
}
.report-metrics {
    display:grid;
    grid-area:metrics;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0;
    min-width:0;
}
.report-metrics .report-stat {
    min-width:0;
    padding:0 14px;
    border-left:1px solid var(--line);
}
.report-metrics .report-stat:first-child {
    padding-left:0;
    border-left:0;
}
.report-metrics .report-stat strong,
.report-metrics .report-stat span {
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.report-actions {
    grid-area:actions;
    display:grid!important;
    grid-template-columns:minmax(0,240px)!important;
    justify-self:end;
    width:min(100%,240px);
    min-width:0!important;
    gap:7px;
}
.report-actions > * {
    min-width:0;
    max-width:100%;
    min-height:36px!important;
    white-space:normal!important;
    overflow-wrap:anywhere;
    line-height:1.25;
}
.report-actions .ui-button-close {
    width:100%;
    height:36px;
    font-size:15px;
}
:where(.portfolio-actions,.analysis-result-actions,.analysis-job-actions,.job-action-grid,.report-actions) > button,
:where(.portfolio-actions,.analysis-result-actions,.analysis-job-actions,.job-action-grid,.report-actions) > a {
    min-width:0;
    max-width:100%;
    overflow-wrap:anywhere;
}
@media (max-width:700px) {
    .report-row {
        grid-template-columns:24px minmax(0,1fr)!important;
        column-gap:10px;
    }
    .report-metrics {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px 0;
    }
    .report-metrics .report-stat:nth-child(odd) {
        padding-left:0;
        border-left:0;
    }
    .report-metrics .report-stat:nth-child(even) {
        padding-right:0;
    }
    .report-actions {
        justify-self:stretch;
        width:100%;
        grid-template-columns:minmax(0,1fr)!important;
    }
}
.theme-dark .top-actions .profile-link:hover .profile-name {
    color:#6ee0b9;
}
.theme-dark .top-actions .profile-link .avatar {
    background:#245441;
    color:#bcebd8;
    box-shadow:0 0 0 3px rgba(91,210,168,.18);
}

/* Final modal sizing guard: dialogs stay centered instead of expanding to page width. */
#app .modal-shell {
    width: min(680px, calc(100vw - 40px));
    max-width: 680px;
    max-height: min(680px, calc(100dvh - 64px));
}
@media (max-width: 520px) {
    #app .modal-shell {
        width: calc(100vw - 24px);
        max-height: calc(100dvh - 32px);
    }
}

/* Animated technical detail disclosure and theme-aware notifications. */
.technical-detail-toggle {
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:8px;
    padding:0;
    border:0;
    background:transparent;
    color:var(--ink);
    font:inherit;
    font-size:13px;
    cursor:pointer;
}
.technical-detail-toggle:hover { color:var(--green); }
.technical-detail-chevron {
    display:inline-block;
    font-size:16px;
    line-height:1;
    transform:rotate(-90deg);
    transition:transform .22s ease;
}
.technical-detail-toggle[aria-expanded="true"] .technical-detail-chevron { transform:rotate(0); }
.technical-detail-content {
    display:grid;
    grid-template-rows:0fr;
    max-height:0;
    opacity:0;
    margin-top:0;
    padding:0 12px;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--paper);
    transition:grid-template-rows .24s ease, max-height .24s ease, opacity .2s ease, margin-top .24s ease, padding .24s ease;
}
.technical-detail-content.is-open {
    grid-template-rows:1fr;
    max-height:190px;
    opacity:1;
    margin-top:8px;
    padding:10px 12px;
}
.technical-detail-inner { min-height:0; }
.technical-detail-content code {
    display:block;
    overflow:auto;
    max-height:150px;
    color:var(--muted);
    font:11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
}
/* One control baseline for every action button and button-like link. */
:where(.ui-control-primary,.ui-control-secondary,.sidebar-logout,.ui-button-close,.ui-button-icon,.shell-theme-switch,.nav-language-toggle) {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    vertical-align:middle;
    line-height:1.2;
    text-align:center;
}
:where(.ui-control-primary,.ui-control-secondary,.sidebar-logout,.ui-button-close) {
    padding-block:10px;
}
:where(.ui-control-primary,.ui-control-secondary,.sidebar-logout,.ui-button-close) > span,
:where(.ui-control-primary,.ui-control-secondary,.sidebar-logout,.ui-button-close) > strong {
    line-height:1.2;
}
.sidebar-logout {
    justify-content:flex-start;
}

.ui-button {
    min-height:var(--ui-control-height);
    box-sizing:border-box;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--ui-control-gap);
    border:1px solid transparent;
    border-radius:var(--ui-control-radius);
    padding:10px 16px;
    font:inherit;
    font-size:13px;
    font-weight:700;
    line-height:1.2;
    text-align:center;
    text-decoration:none;
    white-space:normal;
    overflow-wrap:anywhere;
    cursor:pointer;
    transition:transform var(--ui-transition), background-color var(--ui-transition), border-color var(--ui-transition), color var(--ui-transition), box-shadow var(--ui-transition);
}

.ui-button:hover:not(:disabled) {
    transform:translateY(-1px);
}

.ui-button:focus-visible {
    outline:none;
    box-shadow:var(--ui-control-focus);
}

.ui-button:disabled {
    cursor:not-allowed;
    opacity:.56;
    transform:none;
}

.ui-button-primary {
    color:#fff;
    background:var(--green);
    border-color:var(--green);
    box-shadow:0 8px 18px rgba(14,170,132,.14);
}

.ui-button-primary:hover:not(:disabled) {
    color:#fff;
    background:var(--green-strong);
    border-color:var(--green-strong);
    box-shadow:0 12px 24px rgba(14,170,132,.2);
}

.ui-button-secondary {
    color:var(--ink);
    background:var(--ui-surface-subtle);
    border-color:var(--ui-card-border);
}

.ui-button-secondary:hover:not(:disabled) {
    color:var(--ink);
    background:var(--green-soft);
    border-color:var(--ui-card-border-hover);
}

.ui-button-danger {
    color:var(--danger, #b53c47);
    background:color-mix(in srgb, var(--danger, #b53c47) 8%, var(--ui-surface-subtle));
    border-color:color-mix(in srgb, var(--danger, #b53c47) 28%, var(--ui-card-border));
}

.ui-button-danger:hover:not(:disabled) {
    color:#fff;
    background:var(--danger, #b53c47);
    border-color:var(--danger, #b53c47);
}

.ui-button-ghost {
    color:var(--ink);
    background:transparent;
    border-color:transparent;
}

.ui-button-ghost:hover:not(:disabled) {
    background:var(--green-soft);
    border-color:var(--ui-card-border);
}

/* Category chips use their own semantic hover colors. Keep the generic ghost
   button hover from washing out the label in the light theme. */
.app-shell:not(.theme-dark) .category-chip.ui-button-ghost:hover:not(:disabled),
.app-shell:not(.theme-dark) .category-chip.ui-button-ghost.selected {
    background:var(--chip-color, #0faf82);
    border-color:var(--chip-color, #0faf82);
    color:#fff;
    box-shadow:0 8px 18px color-mix(in srgb, var(--chip-color, #0faf82) 24%, transparent);
}

.app-shell:not(.theme-dark) .category-chip.ui-button-ghost:hover:not(:disabled) span,
.app-shell:not(.theme-dark) .category-chip.ui-button-ghost.selected span {
    color:rgba(255,255,255,.86);
}

.ui-button-icon {
    width:var(--ui-control-height);
    min-width:var(--ui-control-height);
    padding:8px;
    border-radius:10px;
}

.ui-button-close {
    width:var(--ui-control-height);
    min-width:var(--ui-control-height);
    min-height:var(--ui-control-height);
    padding:2px 10px;
    border-radius:10px;
    color:var(--muted);
    background:var(--ui-surface-subtle);
    border-color:var(--ui-card-border);
    font-size:20px;
}
.ui-button-close:hover:not(:disabled) {
    color:#fff;
    background:var(--danger, #b53c47);
    border-color:var(--danger, #b53c47);
}

.ui-button-spinner {
    width:14px;
    height:14px;
    flex:0 0 auto;
    border:2px solid currentColor;
    border-right-color:transparent;
    border-radius:50%;
    animation:spin .7s linear infinite;
}

.ui-button-content { min-width:0; }

.ui-field { min-width:0; }
.ui-field label {
    display:block;
    margin-bottom:8px;
    color:var(--ink);
    font-size:13px;
    font-weight:700;
}
.ui-field-help,
.ui-field-error {
    display:block;
    margin-top:6px;
    font-size:12px;
    line-height:1.4;
}
.ui-field-help { color:var(--muted); }
.ui-field-error { color:var(--danger, #b53c47); }

.search-panel.ui-filter-bar {
    display:block;
}
.search-panel.ui-filter-bar .ui-filter-bar-content {
    grid-template-columns:1fr 1.35fr;
}
.search-panel.ui-filter-bar .discover-category-filter,
.search-panel.ui-filter-bar .discover-actions {
    grid-column:1 / -1;
}
.user-filters.ui-filter-bar {
    display:block;
    margin:0 0 18px;
    padding:0;
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
}
.user-filters.ui-filter-bar .ui-filter-bar-content {
    grid-template-columns:2fr repeat(3,1fr) auto;
    gap:9px;
}
.user-filters.ui-filter-bar input { min-width:0; width:100%; }

@media (max-width:640px) {
    .ui-button { width:100%; }
    .ui-button-icon { width:var(--ui-control-height); }
    .ui-filter-bar-header { flex-direction:column; }
    .ui-filter-bar-actions { width:100%; }
}

/* Fund discovery: keep every investment category reachable without a hidden
   horizontal strip while keeping the filter surface compact. */
.search-panel.ui-filter-bar {
    padding: clamp(1rem, 2vw, 1.35rem);
}

.search-panel.ui-filter-bar .ui-filter-bar-content {
    gap: 12px;
}

.search-panel.ui-filter-bar .discover-category-filter {
    gap: 7px;
    padding-top: 2px;
}

.search-panel.ui-filter-bar .discover-panel .discovery-categories,
.search-panel.ui-filter-bar .discovery-categories {
    display: flex;
    flex-wrap: wrap;
    overflow: visible;
    gap: 8px;
    align-items: stretch;
}

.search-panel.ui-filter-bar .category-chip {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

.search-panel.ui-filter-bar .discover-actions {
    margin-top: 2px;
    padding-top: 12px;
}

@media (min-width: 900px) {
    .search-panel.ui-filter-bar .ui-filter-bar-content {
        gap: 10px 14px;
    }
}

.theme-dark .ui-button-secondary {
    color:var(--ink);
    background:var(--ui-surface-subtle);
    border-color:var(--ui-card-border);
}
.theme-dark .ui-button-secondary:hover:not(:disabled) {
    background:var(--green-soft);
    border-color:var(--ui-card-border-hover);
}
.theme-dark .ui-button-danger {
    color:#ffb3b9;
    background:rgba(181,60,71,.12);
    border-color:rgba(255,140,151,.4);
}
.theme-dark .ui-button-danger:hover:not(:disabled) {
    color:#fff;
    background:#b53c47;
}

@media (prefers-reduced-motion:reduce) {
    .ui-button,
    .ui-card,
    .ui-filter-bar { transition:none; }
    .ui-button:hover:not(:disabled),
    .ui-card:hover { transform:none; }
    .ui-button-spinner { animation:none; }
}

.ui-checkbox.confirm-toggle .ui-checkbox-box {
    width:38px;
    height:22px;
    border-radius:999px;
    position:relative;
    background:var(--line);
    border-color:var(--line);
}
.ui-checkbox.confirm-toggle .ui-checkbox-box::after {
    content:'';
    width:16px;
    height:16px;
    position:absolute;
    left:2px;
    top:2px;
    border-radius:50%;
    background:var(--card);
    transition:transform var(--ui-transition), background-color var(--ui-transition);
}
.ui-checkbox.confirm-toggle input:checked + .ui-checkbox-box {
    background:var(--green);
    border-color:var(--green);
}
.ui-checkbox.confirm-toggle input:checked + .ui-checkbox-box::after {
    content:'';
    transform:translateX(16px);
    background:#fff;
}
@media (prefers-reduced-motion:reduce) {
    .ui-input-spinner,
    .ui-loading-spinner,
    .ui-checkbox.confirm-toggle .ui-checkbox-box::after { animation:none; transition:none; }
}

.theme-dark .ui-button-secondary,
.theme-dark .sidebar-logout,
.theme-dark .ui-button-icon,
.theme-dark .shell-theme-switch {
    background:#17372c;
    border-color:#396653;
    color:#eaf8f1;
}
.theme-dark .ui-button-secondary:hover:not(:disabled),
.theme-dark .sidebar-logout:hover:not(:disabled),
.theme-dark .ui-button-icon:hover:not(:disabled),
.theme-dark .shell-theme-switch:hover:not(:disabled) {
    background:#1d493b;
    border-color:#55b996;
    color:#eaf8f1;
}

.nav-language-toggle .ui-button-content {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
}
.nav-language-toggle .language-flag-image {
    display:inline-block;
    flex:0 0 auto;
    vertical-align:middle;
}

.theme-dark .smooth-select-search input {
    background:#193a2f;
    border-color:#396653;
    color:var(--ink);
}
.theme-dark .smooth-select-search input::placeholder {
    color:#8da99e;
}
.theme-dark .smooth-select-search:focus-within input {
    border-color:#55b996;
    box-shadow:0 0 0 3px rgba(91,210,168,.2);
}

.chart-date-filter {
    position:relative;
    z-index:1200;
}
.chart-date-filter .date-picker-popover {
    z-index:1300;
}

.risk-badge {
    border:1px solid transparent;
}
.risk-badge.risk-low {
    background:#dff5ea;
    border-color:#a7dfc5;
    color:#137955;
}
.risk-badge.risk-medium {
    background:#fff0cf;
    border-color:#e9c878;
    color:#956315;
}
.risk-badge.risk-high {
    background:#ffe2de;
    border-color:#efa79c;
    color:#a3443a;
}
.risk-badge.risk-unknown {
    background:#eef3f1;
    border-color:#cbdad4;
    color:#60766d;
}
.theme-dark .risk-badge.risk-low {
    background:#1c4b3b;
    border-color:#43856b;
    color:#bcebd8;
}
.theme-dark .risk-badge.risk-medium {
    background:#4b3a22;
    border-color:#9a7137;
    color:#f0c98f;
}
.theme-dark .risk-badge.risk-high {
    background:#4b2d2b;
    border-color:#98544e;
    color:#ffc2b8;
}
.theme-dark .risk-badge.risk-unknown {
    background:#263b35;
    border-color:#4d6b60;
    color:#b7cfc5;
}

.insight-card {
    display:grid;
    grid-template-columns:40px minmax(0,1fr) auto;
    align-items:start;
    gap:15px;
}
.insight-card .insight-icon {
    width:40px;
    height:40px;
    box-sizing:border-box;
    display:grid;
    place-items:center;
    flex:0 0 40px;
    padding:10px;
}
.insight-card > div:nth-child(2) {
    min-width:0;
}
.insight-card > .ui-link-text {
    align-self:center;
}

@media (max-width:700px) {
    .insight-card {
        grid-template-columns:40px minmax(0,1fr);
    }
    .insight-card > .ui-link-text {
        grid-column:2;
        justify-self:start;
        margin:4px 0 0;
    }
}
.detail-pagination { display:flex; align-items:center; justify-content:flex-end; gap:.6rem; margin:.8rem 0 1.1rem; color:var(--text-muted); font-size:.82rem; }
.detail-pagination .ui-control { min-height:2rem; padding:.35rem .7rem; }
.security-attempt-list {
    display: grid;
    gap: .55rem;
    transition: opacity .18s ease;
}

.security-attempt-list.is-loading {
    opacity: .55;
    pointer-events: none;
}

.security-attempt-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: .75rem 0;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.security-attempt-row:last-child {
    border-bottom: 0;
}

.security-attempt-row > div {
    display: grid;
    gap: .2rem;
}

.security-attempt-row > div:last-child {
    text-align: right;
}

.security-attempt-row small {
    color: var(--text-secondary);
}

.security-attempt-row.is-failed strong {
    color: var(--danger-color, #c94f55);
}

.security-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
    padding-top: .9rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: .82rem;
}

.security-pagination .ui-control {
    min-height: 2.1rem;
    padding: .38rem .75rem;
}

.theme-dark .security-attempt-row,
.theme-dark .security-pagination {
    border-color: var(--border-color-dark, var(--border-color));
}

@media (max-width: 640px) {
    .security-attempt-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .security-attempt-row > div:last-child {
        text-align: left;
    }

    .security-pagination {
        justify-content: space-between;
    }

    .security-pagination span {
        text-align: center;
    }
}

.theme-dark .smooth-select-option.is-active {
    background: #1d493b;
    color: #eaf8f1;
}

@media (prefers-reduced-motion: reduce) {
    .smooth-select-trigger,
    .smooth-select-option {
        transition: none;
    }
}

/* Admin, profile and shell finishing layer. Keep this block last: the file
   contains legacy theme rules above and these selectors intentionally provide
   the final state/contrast contract without changing component markup. */
.service-warning {
    width: fit-content;
    max-width: calc(100% - 32px);
    min-height: 0;
    margin: 10px 16px;
    padding: 8px 12px;
    border: 1px solid #e8c66d;
    border-radius: 9px;
    background: #fff8e6;
    color: #785617;
    box-shadow: none;
    font-size: 12px;
    line-height: 1.4;
}

.job-actions > .service-warning,
.worker-job-monitor > .service-warning {
    margin: 0 0 12px;
    max-width: 100%;
}

.worker-job-list-active {
    position: relative;
    margin-top: 4px;
    padding-left: 11px;
}

.worker-job-list-active::before {
    content: "";
    position: absolute;
    inset: 7px auto 7px 0;
    width: 3px;
    border-radius: 999px;
    background: var(--ui-live-color);
    box-shadow: 0 0 12px color-mix(in srgb, var(--ui-live-color) 58%, transparent);
}

.worker-job-card.is-running {
    background: linear-gradient(110deg, color-mix(in srgb, var(--ui-live-color) 10%, var(--ui-card-bg)) 0%, var(--ui-card-bg) 72%);
}

.worker-job-card.is-running .worker-job-name::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--ui-live-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-live-color) 14%, transparent);
    vertical-align: 1px;
}

.worker-job-monitor > .worker-partial-failure {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.worker-job-monitor > .worker-partial-failure::before {
    content: "!";
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 50%;
    background: #dca83b;
    color: #fff;
    font-size: 11px;
    font-weight: 850;
}

.theme-dark .service-warning {
    border-color: #7d642c;
    background: #302817;
    color: #f5d993;
}

/* The first metric grid on Admin follows PageHeader; only that overview is
   compacted, leaving dashboard and analysis metric cards untouched. */
.page-header-standard + .metric-grid:has(+ .admin-section) {
    gap: 10px;
    margin: 20px 0 24px;
}

.page-header-standard + .metric-grid:has(+ .admin-section) .metric-card {
    min-height: 0;
    padding: 14px 16px;
    box-shadow: none;
}

.page-header-standard + .metric-grid:has(+ .admin-section) .metric-card strong {
    margin: 6px 0 3px;
    font-size: 21px;
}

.security-overview .section-heading > .muted:last-child {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border: 1px solid color-mix(in srgb, var(--ui-danger) 34%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--ui-danger) 9%, transparent);
    color: var(--ui-danger);
    font-weight: 800;
}

.security-attempt-row.is-failed {
    margin-inline: -9px;
    padding-inline: 9px;
    border-radius: 9px;
    border-bottom-color: transparent;
    background: color-mix(in srgb, var(--ui-danger) 8%, transparent);
    box-shadow: inset 3px 0 var(--ui-danger);
}

.security-attempt-row.is-failed :where(strong, small) {
    color: var(--ui-danger);
}

.security-attempt-row.is-success {
    margin-inline: -9px;
    padding-inline: 9px;
    border-radius: 9px;
    border-bottom-color: transparent;
    background: color-mix(in srgb, var(--ui-live-color) 9%, transparent);
    box-shadow: inset 3px 0 var(--ui-live-color);
}

.security-attempt-row.is-success :where(strong, small) {
    color: color-mix(in srgb, var(--ui-live-color) 78%, var(--ui-text));
}

.theme-dark .security-attempt-row.is-success {
    background: color-mix(in srgb, var(--ui-live-color) 16%, var(--ui-card-bg));
}

/* Shell motion contract. MainLayout currently owns the state class; these
   rules support both the class and data-attribute forms without requiring a
   markup rewrite. */
.nav-desktop-toggle {
    display: inline-flex;
}

@media (min-width: 801px) {
    .app-shell.sidebar-expanded .sidebar {
        width: 250px;
        flex-basis: 250px;
    }

    .app-shell,
    .app-shell .sidebar,
    .app-shell .main-content,
    .app-shell .sidebar :where(.brand-logo, nav a, .sidebar-footer) {
        transition: width .28s cubic-bezier(.2, .75, .25, 1), flex-basis .28s cubic-bezier(.2, .75, .25, 1), opacity .18s ease, transform .28s cubic-bezier(.2, .75, .25, 1);
    }

    .app-shell.sidebar-collapsed .sidebar,
    .app-shell[data-sidebar-collapsed="true"] .sidebar {
        width: 76px;
        flex-basis: 76px;
        padding-inline: 12px;
    }

    .app-shell.sidebar-collapsed .sidebar .brand-logo,
    .app-shell.sidebar-collapsed .sidebar .sidebar-footer,
    .app-shell[data-sidebar-collapsed="true"] .sidebar .brand-logo,
    .app-shell[data-sidebar-collapsed="true"] .sidebar .sidebar-footer {
        opacity: 0;
        pointer-events: none;
    }

    .app-shell .sidebar .brand-mark-logo,
    .app-shell.sidebar-collapsed .sidebar .brand-wordmark-logo,
    .app-shell[data-sidebar-collapsed="true"] .sidebar .brand-wordmark-logo {
        display: none;
    }

    .app-shell.sidebar-collapsed .sidebar .brand-mark-logo,
    .app-shell[data-sidebar-collapsed="true"] .sidebar .brand-mark-logo {
        display: block;
        width: 44px;
        height: 44px;
        opacity: 1;
        pointer-events: auto;
    }

    .app-shell.sidebar-collapsed .sidebar .brand,
    .app-shell[data-sidebar-collapsed="true"] .sidebar .brand {
        justify-content: center;
        padding-inline: 0;
    }

    .app-shell.sidebar-collapsed .sidebar nav a,
    .app-shell[data-sidebar-collapsed="true"] .sidebar nav a {
        position: relative;
    }

    .app-shell.sidebar-collapsed .sidebar nav a::before,
    .app-shell[data-sidebar-collapsed="true"] .sidebar nav a::before {
        content: attr(aria-label);
        position: absolute;
        left: calc(100% + 12px);
        top: 50%;
        z-index: 60;
        width: max-content;
        max-width: 220px;
        padding: 7px 9px;
        border: 1px solid var(--ui-card-border);
        border-radius: 8px;
        background: var(--ui-surface-raised, var(--card));
        box-shadow: var(--shadow);
        color: var(--ui-text, var(--ink));
        font-size: 12px;
        line-height: 1.2;
        opacity: 0;
        pointer-events: none;
        transform: translate(-5px, -50%);
        transition: opacity .16s ease, transform .16s ease;
    }

    .app-shell.sidebar-collapsed .sidebar nav a:hover::before,
    .app-shell.sidebar-collapsed .sidebar nav a:focus-visible::before,
    .app-shell[data-sidebar-collapsed="true"] .sidebar nav a:hover::before,
    .app-shell[data-sidebar-collapsed="true"] .sidebar nav a:focus-visible::before {
        opacity: 1;
        transform: translate(0, -50%);
    }

    .app-shell.sidebar-collapsed .sidebar nav a,
    .app-shell[data-sidebar-collapsed="true"] .sidebar nav a {
        justify-content: center;
        gap: 0;
        padding-inline: 10px;
        font-size: 0;
    }

    .app-shell.sidebar-collapsed .sidebar nav a .nav-icon,
    .app-shell[data-sidebar-collapsed="true"] .sidebar nav a .nav-icon {
        font-size: initial;
    }
}

@media (max-width: 800px) {
    .nav-desktop-toggle {
        display: none;
    }

    .app-shell .sidebar {
        will-change: transform;
        transition: transform .28s cubic-bezier(.2, .75, .25, 1), visibility 0s linear .28s;
    }

    .app-shell.menu-open .sidebar {
        transition: transform .28s cubic-bezier(.2, .75, .25, 1), visibility 0s linear 0s;
    }

    .menu-backdrop {
        will-change: opacity;
        transition: opacity .24s ease, visibility 0s linear .24s;
    }

}

@media (prefers-reduced-motion: reduce) {
    .app-shell,
    .app-shell .sidebar,
    .app-shell .main-content,
    .app-shell .sidebar :where(.brand-logo, nav a, .sidebar-footer),
    .menu-backdrop,
    .worker-job-progress span {
        transition: none !important;
        animation: none !important;
    }
}