/* Light by default, in the spirit of Swiss design and Pixel phones: monochrome surfaces and hairlines.
   Color only where it means something: the Nemeris purple (exact brand colors) for the main action, focus and
   progress; green and red for gains and losses.
   The dark theme keeps the original Nemeris night look. */
:root {
    color-scheme: light;
    --bg: #F5F5F7;
    --bg-2: #FFFFFF;
    --surface: #FFFFFF;
    --surface-2: #F0F0F3;
    --surface-3: #E3E3E9;
    --line: #E7E7EC;
    --line-2: #D7D7DF;
    --line-3: #B8B8C4;
    --text: #141318;
    --text-2: #33323A;
    --muted: #62616C;
    --faint: #8A8994;
    --accent: #8B7BFF;
    --accent-strong: #8B7BFF;
    --accent-soft: #F1EFFF;
    --accent-grad: linear-gradient(135deg, #8B7BFF, #B7A5FF);
    --on-accent: #120E1D;
    --pos: #0E7A54;
    /* Bars, dots and charts take the bright tones; the dark ones above are for text, which needs the contrast. */
    --pos-fill: #2FC48D;
    --neg-fill: #FF5C7C;
    --warn-fill: #FFC23D;
    --pos-soft: #E3F3EC;
    --neg: #C22D4A;
    --neg-soft: #FBE7EB;
    --warn: #8C5D00;
    --warn-soft: #FCF1D9;
    --info: #1F6FD6;
    --info-soft: #E5EFFC;
    --inverse: #1D1C22;
    --on-inverse: #F3F3F6;
    --grid: rgba(20, 19, 24, .07);
    --scrim: rgba(20, 19, 24, .32);
    --glass: rgba(255, 255, 255, .88);
    --shadow: 0 1px 2px rgba(20, 19, 24, .05), 0 12px 32px rgba(20, 19, 24, .10);
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2362616C' d='M12 14.95q-.2 0-.375-.062t-.325-.213l-4.6-4.6q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l3.9 3.9l3.9-3.9q.275-.275.7-.275t.7.275t.275.7t-.275.7l-4.6 4.6q-.15.15-.325.213T12 14.95'/%3E%3C/svg%3E");
    /* the voice orb: a pale pearl on white (a light --orb-deep switches its shader to light mode) */
    --orb-a: #8B7BFF;
    --orb-b: #2FBF8A;
    --orb-c: #B3A8FF;
    --orb-deep: #F3F0FF;
    --r-xs: 4px;
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-ctl: 999px;
    --r-bar: 2px;
    --r-pill: 999px;
    --r-circle: 50%;
    --r-bubble: 22px 22px 22px 6px;
    --r-bubble-user: 22px 22px 6px 22px;
    --font: 'Space Grotesk', ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;
    --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sidebar-w: 280px;
    --asst-w: 420px;
    --content-max: 1080px;
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0B0912;
    --bg-2: #0E0B17;
    --surface: #15111F;
    --surface-2: #1C1729;
    --surface-3: #272038;
    --line: rgba(196, 184, 255, .085);
    --line-2: rgba(196, 184, 255, .16);
    --line-3: rgba(196, 184, 255, .32);
    --text: #F5F3FF;
    --text-2: #DCD7EF;
    --muted: #A29CBB;
    --faint: #726B8C;
    --accent: #A99CFF;
    --accent-strong: #8B7BFF;
    --accent-soft: rgba(169, 156, 255, .14);
    --accent-grad: linear-gradient(135deg, #8B7BFF, #B7A5FF);
    --on-accent: #120E1D;
    --pos: #4FE0A3;
    --pos-fill: #4FE0A3;
    --neg-fill: #FF6B8E;
    --warn-fill: #F2C94C;
    --pos-soft: rgba(79, 224, 163, .12);
    --neg: #FF6B8E;
    --neg-soft: rgba(255, 107, 142, .12);
    --warn: #F2C94C;
    --warn-soft: rgba(242, 201, 76, .14);
    --info: #6CB6FF;
    --info-soft: rgba(108, 182, 255, .14);
    --inverse: #272038;
    --on-inverse: #F5F3FF;
    --grid: rgba(196, 184, 255, .06);
    --scrim: rgba(4, 2, 10, .55);
    --glass: rgba(14, 11, 23, .92);
    --shadow: 0 18px 48px rgba(5, 3, 12, .5);
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23A29CBB' d='M12 14.95q-.2 0-.375-.062t-.325-.213l-4.6-4.6q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l3.9 3.9l3.9-3.9q.275-.275.7-.275t.7.275t.275.7t-.275.7l-4.6 4.6q-.15.15-.325.213T12 14.95'/%3E%3C/svg%3E");
    --orb-a: #A99CFF;
    --orb-b: #4FE0A3;
    --orb-c: #DCD7EF;
    --orb-deep: #2D2659;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.i18n-wait body { visibility: hidden; }
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }

html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text-2);
    font: 400 15px/1.55 var(--body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body.is-resizing { cursor: col-resize; user-select: none; }

h1, h2, h3, h4 { margin: 0; color: var(--text); font-family: var(--font); font-weight: 600; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
strong, b { color: var(--text); font-weight: 600; }
em { font-style: italic; font-weight: 500; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border-radius: var(--r-pill); }
ul, ol { margin: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:disabled, [aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.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; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 300; padding: 10px 14px; border-radius: var(--r-sm); background: var(--surface-3); color: var(--text); }
.skip-link:focus { top: 12px; }

.view-title { font-size: 30px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; }
.panel-title { font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.sub-title { font-size: 15px; line-height: 1.35; font-weight: 600; }
.muted { color: var(--muted); }
.meta { font-size: 13px; line-height: 1.45; font-weight: 500; color: var(--muted); }
.empty { color: var(--muted); font-size: 14px; padding: 6px 2px; }
.positive { color: var(--pos); }
.negative { color: var(--neg); }

p.muted, .empty, .vd-summary, .vd-reasons, .aio-thesis, .aio-col, .aio-inval, .opinion-thesis, .news-summary, .for-you, .risk-tip, .risk-verdict, .comfort, .notice, .bubble {
    font-weight: 400;
    line-height: 1.6;
}
/* Big numbers and headings in the brand face; everything else in Inter. */
.kpi-value, .me-worth, .tk-price, .scenario-value, .coach-hello, .sheet-title, .aio-stance, .aio-pct, .vd-signal, .rng-labels, .risk-level strong { font-family: var(--font); }
.noscript { padding: 20px; }

.i {
    display: inline-block;
    flex: none;
    width: 1.25em;
    height: 1.25em;
    vertical-align: -.28em;
    background: currentColor;
    -webkit-mask: var(--i) center / contain no-repeat;
    mask: var(--i) center / contain no-repeat;
}

.card.active { animation: cardIn .3s ease both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(12px); } }
.card-tab-pane.active { animation: cardIn .22s ease both; }
.btn:active, .pill:active, .chip:active, .toggle:active, .card-tab-btn:active { transform: scale(.97); }
.btn, .pill, .chip, .toggle, .card-tab-btn { transition: background .15s, color .15s, border-color .15s, transform .1s; }
.tab:active, .explorer-item:active, .opinion:active, .bottom-nav-btn:active { transform: scale(.985); }