:root { color-scheme: dark; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #edf3ef; background: #0b0f0d; font-variant-numeric: tabular-nums; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #0b0f0d; }
button, input { font: inherit; }
button { cursor: pointer; }
main { width: min(1180px, 100%); margin: auto; padding: max(28px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
.masthead { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.eyebrow { margin: 0 0 9px; color: #6ee7a6; letter-spacing: .16em; font-size: .68rem; font-weight: 800; }
h1 { margin: 0; font-size: clamp(1.8rem, 5vw, 3.6rem); line-height: 1; letter-spacing: -.045em; }
.promise { margin: 12px 0 0; color: #8c9992; font-size: .94rem; }
.icon-button { width: 42px; height: 42px; border: 1px solid #29332e; border-radius: 50%; color: #cbd5d0; background: #121814; font-size: 1.35rem; }
nav { display: flex; gap: 4px; width: fit-content; margin: 28px 0 20px; padding: 4px; border: 1px solid #26302b; border-radius: 10px; background: #101512; overflow-x: auto; }
.nav-item { padding: 9px 13px; border: 0; border-radius: 7px; color: #859189; background: transparent; white-space: nowrap; font-size: .79rem; font-weight: 650; }
.nav-item.active { color: #eef4f0; background: #26322c; }
[hidden] { display: none !important; }
.onboarding nav, .onboarding #refresh, .onboarding footer { display: none; }
#welcome-view { max-width: 440px; padding: 24px 0; }
#auth-view { max-width: 440px; margin-top: 28px; padding: 24px; border: 1px solid #29332e; border-radius: 16px; background: #111713; }
#auth-view p { color: #64758b; line-height: 1.5; }
.account-gate nav, .account-gate #refresh, .account-gate footer { display: none; }
[data-theme="light"] #auth-view { background: #fff; border-color: #d9e5f1; box-shadow: 0 8px 24px #1769b508; }
#welcome-view p { color: #64758b; line-height: 1.5; margin: 8px 0 24px; }
.eyebrow { display: flex; align-items: center; gap: 9px; }
.brand-mark { width: 23px; height: 26px; flex-shrink: 0; }
.onboarding:has(#welcome-view.active) .masthead { margin-bottom: 0; }
.onboarding:has(#welcome-view.active) .eyebrow { font-size: .85rem; letter-spacing: .12em; margin-bottom: 24px; }
.onboarding:has(#welcome-view.active) .brand-mark { width: 32px; height: 36px; }
.onboarding:has(#welcome-view.active) #notice:empty { display: none; }
.onboarding #welcome-view { margin-top: 28px; padding: 24px; border: 1px solid #29332e; border-radius: 16px; background: #111713; }
#welcome-view h2 { font-size: 1.4rem; letter-spacing: -.035em; }
#welcome-view .primary { width: 100%; min-height: 46px; }
[data-theme="light"] .onboarding #welcome-view { background: #fff; border-color: #d9e5f1; box-shadow: 0 8px 24px #1769b508; }
.onboarding .masthead { margin-bottom: 24px; }
.stock-search-results { display: grid; gap: 4px; margin-top: 8px; }
.starting-stock-row { display: flex; gap: 6px; margin-top: 6px; }
.starting-stock-row .secondary { white-space: nowrap; padding-inline: 12px; font-size: clamp(.72rem, 3.4vw, .9rem); }
.search-result { display: flex; gap: 12px; align-items: center; text-align: left; padding: 12px; border: 1px solid #d9e5f1; border-radius: 8px; color: #214568; background: #fff; }
.search-result strong { min-width: 56px; color: #1769b5; }
.search-result span { overflow-wrap: anywhere; font-size: .8rem; }
.metric-presets { display: grid; grid-template-columns: 1fr; max-width: 620px; gap: 8px; margin-bottom: 20px; }
.preset-instruction { margin: 0 0 4px; font-size: .75rem; line-height: 1.4; color: #829088; }
.metric-presets button { position: relative; display: block; padding: 14px 42px 14px 16px; border: 1px solid #426653; border-radius: 10px; white-space: normal; text-align: left; }
.metric-presets button::after { content: ""; position: absolute; right: 14px; top: 17px; width: 17px; height: 17px; border: 1.5px solid currentColor; border-radius: 50%; }
.metric-presets button[aria-pressed="true"]::after { background: currentColor; box-shadow: inset 0 0 0 4px #e6f1fc; }
.metric-presets button:focus-visible { outline: 2px solid #1769b5; outline-offset: 3px; }
.metric-presets small { display: block; font-size: .72rem; line-height: 1.4; margin-top: 5px; font-weight: 400; }
[data-theme="light"] .preset-instruction { color: #526b86; }
[data-theme="light"] .metric-presets button { background: #fff; border-color: #bdcfe2; }
[data-theme="light"] .metric-presets button:hover { border-color: #1769b5; background: #f0f6fd; }
[data-theme="light"] .metric-presets [aria-pressed="true"] { border-color: #1769b5; background: #e6f1fc; color: #10599c; }
#setup-back { margin-top: 8px; }
#metric-customization > summary { display: none; }
.onboarding #metric-customization > summary { display: list-item; cursor: pointer; padding: 12px 0; color: #1769b5; font-weight: 600; }
.onboarding .metric-presets { grid-template-columns: 1fr; }
.onboarding .save-notice:empty { display: none; }
#metric-draft-notice:empty { display: none; }
.add-row input { min-width: 0; }
.nav-item[data-view="watchlist"] { font-size: .94rem; font-weight: 800; padding-inline: 20px; margin-right: 8px; }
[data-theme="light"] .nav-item[data-view="watchlist"] { color: #1769b5; background: #dceafa; }
[data-theme="light"] .nav-item[data-view="watchlist"].active { color: white; background: #1769b5; }
#notice { min-height: 20px; margin: 0 0 8px; color: #efb26e; font-size: .8rem; }
.update-notice { padding: 10px 12px; border: 1px solid #426b8e; border-radius: 9px; color: #245378; background: #e7f1fb; font-size: .85rem; }
#apply-update { margin-left: 4px; padding: 0; border: 0; color: #176fba; background: transparent; font: inherit; font-weight: 700; text-decoration: underline; }
.view { display: none; }.view.active { display: block; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 17px; }
h2 { margin: 0; font-size: 1.18rem; letter-spacing: -.015em; }.section-heading p { margin: 5px 0 0; color: #758179; font-size: .76rem; }
.section-heading .save-notice:not(.success) { color: #efb26e; }
.watchlist-info #as-of { margin: 0 0 5px; color: #758179; font-size: .76rem; }
#watchlist-view.active { display: flex; flex-direction: column; }
#watchlist-view .section-heading { order: 0; margin-bottom: 6px; }
#watchlist-view .watchlist-info { order: 1; }
#watchlist-view .table-shell { order: 2; }
.quote-freshness::before { content: " · "; white-space: pre; }
.count { color: #6ee7a6; font-size: .72rem; }
.table-shell { max-height: calc(100vh - 270px); overflow: auto; border: 1px solid #28322d; border-radius: 9px; background: #101512; touch-action: pan-x pan-y; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; }
th, td { min-width: 114px; padding: 13px 14px; border-bottom: 1px solid #222b27; text-align: right; white-space: nowrap; }
thead th { position: sticky; top: 0; z-index: 2; color: #7e8b84; background: #121815; font-size: .64rem; text-transform: uppercase; letter-spacing: .09em; }
thead th:first-child, tbody th { position: sticky; left: 0; min-width: 126px; text-align: left; box-shadow: 8px 0 10px -10px #000; }
thead th:first-child { z-index: 4; } tbody th { z-index: 1; background: #101512; }
.sort-button { display: inline-flex; justify-content: flex-end; align-items: center; gap: 5px; width: 100%; padding: 4px 0; border: 0; color: inherit; background: transparent; font: inherit; font-weight: 700; text-transform: inherit; letter-spacing: inherit; }
.sort-button:hover, .sort-button:focus-visible, th[aria-sort]:not([aria-sort="none"]) .sort-button { color: #dce8e1; }
.sort-button:focus-visible { outline: 2px solid #6ee7a6; outline-offset: 3px; }
.sort-indicator { min-width: .8em; color: #6ee7a6; font-size: .85rem; }
tbody tr:last-child td { border-bottom: 0; }
.ticker { font-weight: 800; letter-spacing: .015em; }.company { display: block; max-width: 108px; margin-top: 3px; overflow: hidden; color: #718078; font-size: .65rem; text-overflow: ellipsis; }
.positive { color: #6ee7a6; }.negative { color: #ff837a; }.muted { color: #657169; }
.ordered-list { display: grid; gap: 7px; max-width: 620px; }
.order-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 52px; padding: 7px 9px; border: 1px solid #29332e; border-radius: 8px; background: #111713; }
.position, .drag-handle { color: #647169; text-align: center; font-size: .8rem; }
.drag-handle { cursor: grab; touch-action: none; }.order-row.dragging { opacity: .45; }
.order-row input, .add-row input { min-width: 0; padding: 9px 10px; border: 1px solid #303b35; border-radius: 6px; outline: 0; color: #eef4f0; background: #0d120f; text-transform: uppercase; }
.order-row input:focus, .add-row input:focus { border-color: #6ee7a6; }
.row-actions { display: flex; gap: 3px; }.row-actions button { width: 31px; height: 31px; border: 0; border-radius: 5px; color: #8f9c95; background: #1a221e; }.row-actions button:hover { color: #fff; }
.add-row { display: flex; gap: 8px; max-width: 620px; margin-top: 12px; }.add-row input { flex: 1; }
.primary, .secondary { padding: 10px 15px; border: 0; border-radius: 7px; font-weight: 750; }.primary { color: #07110c; background: #6ee7a6; }.secondary { color: #dfe8e3; background: #26322c; }
.save { width: min(100%, 620px); margin-top: 20px; }.hint { color: #6f7d75; font-size: .72rem; }
h3 { margin: 25px 0 10px; color: #829088; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.metric-name { min-width: 0; }.metric-name strong { display: block; font-size: .84rem; }.metric-name span { color: #6f7c74; font-size: .68rem; }
.metric-guide { display: grid; gap: 7px; max-width: 720px; }
.guide-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: start; padding: 11px 12px; border: 1px solid #26302b; border-radius: 7px; background: #111713; }
.guide-row strong { font-size: .8rem; color: #eaf2ed; }
.guide-row span { color: #7d8a83; font-size: .76rem; line-height: 1.35; }
.metric-group { max-width: 620px; margin: 0 0 18px; padding: 0; border: 0; }.metric-group legend { margin: 0 0 7px; color: #aeb9b3; font-size: .8rem; font-weight: 700; text-transform: capitalize; }
.metric-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }.metric-option { display: flex; gap: 9px; align-items: center; padding: 10px; border: 1px solid #26302b; border-radius: 7px; color: #b9c3be; font-size: .76rem; }.metric-option:has(input:checked) { border-color: #426653; color: #eef5f1; background: #132019; }.metric-option input { accent-color: #6ee7a6; }.metric-option small { display: block; margin-top: 2px; color: #6f7c74; }
.account-bar { margin-top: 40px; padding-top: 12px; border-top: 1px solid #26302b; font-size: .78rem; }
.account-row { display: flex; align-items: center; gap: 5px; }
.account-email { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #9aa89f; font-size: .72rem; letter-spacing: -.01em; }
.mini { padding: 4px 7px; border: 1px solid #34413a; border-radius: 6px; color: #dfe8e3; background: #26322c; font-size: .66rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
.mini.danger { color: #ffb4a8; border-color: #6b3a33; }
.mini:disabled { opacity: .5; cursor: not-allowed; }
.account-panel { display: grid; justify-items: start; gap: 8px; margin-top: 12px; }
.account-delete { display: flex; gap: 6px; width: 100%; }
.account-delete input, .invite-row input { flex: 1; min-width: 0; padding: 5px 8px; border: 1px solid #34413a; border-radius: 6px; font-size: .78rem; }
.on-account .account-bar { display: none; }
.account-page { display: grid; gap: 14px; max-width: 620px; }
.account-card { padding: 14px; border: 1px solid #26302b; border-radius: 10px; }
.account-card h3 { margin: 14px 0 8px; font-size: .92rem; }
.account-card h3:first-child { margin-top: 0; }
.account-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.invite-row { display: flex; gap: 6px; }
.invite-result { margin-top: 10px; }
.invite-url { display: block; margin: 6px 0 8px; padding: 8px; border-radius: 6px; overflow-wrap: anywhere; background: #0d120f; font-size: .72rem; user-select: all; }
.invitation-list { display: grid; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.invitation-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .78rem; }
.invitation-list .status { color: #8b9a92; font-size: .68rem; }
.danger-zone summary { cursor: pointer; color: #ffb4a8; font-size: .8rem; }
.danger-zone[open] summary { margin-bottom: 8px; }
.onboarding .account-bar, .account-gate .account-bar { display: none; }
footer { margin-top: 56px; color: #59655f; font-size: .68rem; }a { color: #72c997; }
@media (max-width: 600px) { main { padding-top: 24px; } .guide-row { grid-template-columns: 1fr; gap: 4px; } .promise { max-width: 290px; } nav { width: 100%; }.nav-item { flex: 1; padding-inline: 8px; } .table-shell { margin-inline: -18px; border-left: 0; border-right: 0; border-radius: 0; } th, td { min-width: 106px; padding: 12px; } thead th:first-child, tbody th { min-width: 82px; } .company { max-width: 90px; white-space: nowrap; } .metric-options { grid-template-columns: 1fr; } .row-actions button { width: 29px; } }

.save-notice { max-width: 620px; min-height: 20px; margin: 10px 0 0; color: #efb26e; font-size: .85rem; }

.watchlist-key { margin: -5px 0 10px; color: #a7b5ac; font-size: .75rem; }
.metric-unavailable summary { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; cursor: pointer; list-style: none; }
.cue-mobile { display: none; }
.unavailable-info { color: #6ee7a6; font-size: .9rem; }
.metric-unavailable summary::-webkit-details-marker { display: none; }
.metric-unavailable summary:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.metric-unavailable p { white-space: normal; min-width: 180px; max-width: 260px; font-size: 12px; line-height: 1.5; text-align: left; }

#notice.success, .save-notice.success { color: #6ee7a6; }

@media (max-width: 600px) {
  .masthead { position: relative; display: block; }
  .masthead .icon-button { position: absolute; top: 0; right: 0; }
  .masthead h1 { font-size: clamp(1.3rem, 6vw, 1.65rem); white-space: nowrap; }
  .masthead .promise { max-width: none; font-size: clamp(.58rem, 2.7vw, .72rem); white-space: nowrap; letter-spacing: -.015em; }
  .quote-freshness { display: block; }
  .quote-freshness::before { content: none; }
  nav { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 2px; margin: 25px 0 18px; overflow: visible; }
  .nav-item[data-view="watchlist"] { font-size: .8rem; padding-inline: 4px; margin-right: 4px; }
  .nav-item { min-width: 0; min-height: 44px; padding: 6px 3px; white-space: normal; line-height: 1.15; font-size: .72rem; }
  #notice:empty { min-height: 0; margin: 0; }
  #watchlist-view .section-heading { margin-bottom: 12px; }
  #watchlist-view .table-shell { order: 1; max-height: calc(100dvh - 330px); }
  #watchlist-view .watchlist-info {
    position: sticky;
    z-index: 10;
    bottom: 0;
    order: 2;
    margin-inline: -18px;
    padding: 9px 18px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid #28322d;
    background: #101512;
    box-shadow: 0 -5px 18px #0002;
  }
  #watchlist-view .watchlist-info #as-of { margin-bottom: 5px; line-height: 1.3; }
  #watchlist-view .watchlist-key { margin: 0; line-height: 1.3; }
  footer { display: none; }
  .table-shell table { min-width: 100%; table-layout: auto; }
  .table-shell th, .table-shell td { width: auto; min-width: 0; max-width: none; padding: 4px 16px 4px 7px; text-align: left; font-size: .79rem; }
  .table-shell thead th { height: 44px; padding-block: 4px; font-size: .6rem; letter-spacing: .04em; }
  .table-shell thead th:first-child, .table-shell tbody th { width: auto; min-width: 0; max-width: none; padding-left: 8px; padding-right: 16px; }
  .table-shell tbody tr { height: 48px; }
  .sort-button { min-height: 36px; justify-content: flex-start; }
  .sort-indicator:empty { display: none; }
}

.metric-unavailable summary:has(.alternative-cue) { color: #6ee7a6; font-size: .75rem; font-weight: 700; }
@media (max-width: 600px) {
  .cue-desktop { display: none; }
  .cue-mobile { display: inline; }
  .metric-unavailable summary:has(.alternative-cue) {
    align-items: center;
    gap: 4px;
    min-height: 36px;
  }
  .metric-unavailable .alternative-cue { white-space: nowrap; }
  .metric-unavailable summary:has(.alternative-cue) .unavailable-info { font-size: .8rem; line-height: 1; }
  .metric-unavailable[open] p {
    position: fixed;
    z-index: 20;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 12px;
    min-width: 0;
    max-width: none;
    max-height: 40vh;
    margin: 0;
    padding: 14px 16px;
    overflow: auto;
    border: 1px solid #426653;
    border-radius: 10px;
    color: #edf3ef;
    background: #17211b;
    box-shadow: 0 10px 35px #0008;
  }
}