:root {
  color-scheme: dark;
  --page: #0b1010;
  --sidebar: #0d1313;
  --panel: #111919;
  --panel-raised: #151f1e;
  --line: #202b29;
  --line-soft: #1a2422;
  --text: #edf3ef;
  --muted: #82908a;
  --subtle: #596762;
  --mint: #73d8ac;
  --mint-bright: #8ce8bb;
  --mint-dark: #1b4233;
  --amber: #e9bd72;
  --red: #f28f83;
  font-family: "DM Sans", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

html { min-width: 360px; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--page);
  color: var(--text);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }

.app-shell { min-height: 100vh; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 5;
  display: flex;
  width: 232px;
  flex-direction: column;
  padding: 29px 17px 19px;
  border-right: 1px solid var(--line-soft);
  background: var(--sidebar);
}

.brand, .footer-brand {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 10px;
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -1px;
}

.brand-name span, .footer-brand > span:last-child { color: var(--mint); }
.brand-mark { display: flex; height: 23px; align-items: end; gap: 3px; }
.brand-mark span { display: block; width: 5px; border-radius: 3px; background: var(--mint); }
.brand-mark span:nth-child(1) { height: 11px; opacity: .64; }
.brand-mark span:nth-child(2) { height: 17px; opacity: .82; }
.brand-mark span:nth-child(3) { height: 23px; }

.nav-label {
  margin: 52px 0 11px 11px;
  color: #65736d;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 1.25px;
}

.main-nav { display: grid; gap: 5px; }
.nav-item {
  display: flex;
  height: 42px;
  align-items: center;
  gap: 12px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #8a9791;
  font-size: 12px;
  transition: color .15s, background .15s, border-color .15s;
}
.nav-item:hover { color: var(--text); background: #141d1c; }
.nav-item.active { border-color: #21352d; background: #14211c; color: var(--mint-bright); }
.nav-item svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.nav-count {
  display: grid;
  width: 21px;
  height: 19px;
  margin-left: auto;
  place-items: center;
  border-radius: 4px;
  background: #202b28;
  color: #a6b3ad;
  font: 10px "DM Mono", monospace;
}

.sidebar-bottom { margin-top: auto; }
.sidebar-note {
  position: relative;
  overflow: hidden;
  padding: 17px 14px 14px;
  border: 1px solid #23332d;
  border-radius: 8px;
  background: linear-gradient(145deg, #17231f, #111918 70%);
}
.note-spark { color: var(--mint); font-size: 17px; }
.sidebar-note p { margin: 13px 0 16px; color: #aeb9b3; font-size: 12px; line-height: 1.65; }
.sidebar-note strong { color: #e7efe9; font-weight: 600; }
.note-caption { color: #67756e; font: 8px "DM Mono", monospace; letter-spacing: 1.1px; }
.privacy-note { display: flex; align-items: center; gap: 8px; margin: 17px 2px 0; color: #75827c; font-size: 10px; }
.privacy-dot, .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 9px #73d8ac55; }

.main-content { width: min(1600px, calc(100% - 232px)); margin-left: 232px; padding: 0 42px 24px; }
.topbar { display: flex; height: 64px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-soft); }
.breadcrumb { color: #7f8d86; font-size: 11px; }
.breadcrumb span { margin: 0 9px; color: #45534d; }
.topbar-right { display: flex; align-items: center; gap: 18px; }
.market-status { display: flex; align-items: center; gap: 7px; color: #86958d; font: 9px "DM Mono", monospace; letter-spacing: .8px; }
.market-status .live-dot { width: 5px; height: 5px; }
.avatar { width: 28px; height: 28px; border: 1px solid #32503f; border-radius: 50%; background: #1a2b22; color: var(--mint-bright); font: 600 11px "Manrope", sans-serif; }

.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 35px 0 22px; }
.eyebrow { display: flex; align-items: center; gap: 8px; color: #85938c; font: 9px "DM Mono", monospace; letter-spacing: 1px; }
.eyebrow-line { width: 14px; height: 1px; background: var(--mint); }
h1, h2 { font-family: "Manrope", sans-serif; letter-spacing: -1.05px; }
h1 { margin: 9px 0 4px; font-size: clamp(26px, 3vw, 34px); font-weight: 600; line-height: 1.2; }
.heading-period { color: var(--mint); }
.page-subtitle { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.button { display: inline-flex; min-height: 37px; align-items: center; justify-content: center; gap: 9px; padding: 0 15px; border: 1px solid transparent; border-radius: 5px; cursor: pointer; font-size: 11px; font-weight: 700; transition: background .15s, transform .15s; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--mint); color: #0c1913; }
.button-primary:hover { background: var(--mint-bright); }
.button-plus { font-size: 18px; font-weight: 400; line-height: 0; }

.quote-strip { position: relative; display: grid; min-height: 57px; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 0 15px; border: 1px solid var(--line); border-radius: 6px; background: #101716; }
.quote-strip-label { display: flex; align-items: center; gap: 7px; color: #91a098; font: 9px "DM Mono", monospace; letter-spacing: .7px; }
.quote-strip-label .live-dot { width: 5px; height: 5px; }
.quote-widget { position: relative; min-width: 0; height: 39px; }
.quote-widget__widget { width: 100%; }
.quote-fallback { position: absolute; inset: 11px 0 auto; z-index: 0; color: #66736d; font-size: 10px; pointer-events: none; }
.quote-disclaimer { color: #65736d; font-size: 9px; white-space: nowrap; }

.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.summary-card { position: relative; min-height: 111px; overflow: hidden; padding: 15px 16px 12px; border: 1px solid var(--line); border-radius: 6px; background: #101716; }
.summary-feature { border-color: #263c31; background: linear-gradient(135deg, #16231d, #101716 80%); }
.summary-label { position: relative; z-index: 1; color: #839089; font: 9px "DM Mono", monospace; letter-spacing: .55px; }
.info-mark { display: inline-grid; width: 12px; height: 12px; margin-left: 3px; place-items: center; border: 1px solid #52615a; border-radius: 50%; color: #8c9992; font: 8px Georgia, serif; }
.summary-value { position: relative; z-index: 1; margin-top: 10px; font: 600 24px "Manrope", sans-serif; letter-spacing: -.7px; }
.summary-feature .summary-value { color: #9ce5bd; }
.value-suffix { color: #8f9b94; font-size: 12px; font-weight: 500; letter-spacing: 0; }
.summary-foot { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px; margin-top: 7px; color: #85928b; font-size: 9px; }
.summary-icon { font-size: 12px; }
.mint-icon { color: var(--mint); }
.neutral-icon { color: #9ba8a1; }
.card-decoration { position: absolute; top: -22px; right: -15px; width: 130px; height: 130px; border: 1px solid #4a806033; border-radius: 50%; }
.card-decoration::before, .card-decoration::after { position: absolute; content: ""; border: 1px solid #4a806025; border-radius: 50%; }
.card-decoration::before { inset: 13px; }
.card-decoration::after { inset: 27px; }

.section-block { margin-top: 32px; }
.section-heading, .panel-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.section-heading h2, .panel-heading h2 { margin: 7px 0 0; font-size: 19px; font-weight: 600; }
.section-meta { padding-bottom: 4px; color: #85928b; font: 9px "DM Mono", monospace; letter-spacing: .6px; white-space: nowrap; }
.meta-separator { margin: 0 6px; color: #47564f; }
.stock-search { position: relative; z-index: 3; max-width: 520px; margin-top: 15px; }
.stock-search-box { display: flex; height: 41px; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid #293631; border-radius: 5px; background: #101716; color: #87958d; transition: border-color .15s; }
.stock-search-box:focus-within { border-color: #528267; }
.stock-search-box svg { width: 15px; height: 15px; flex: 0 0 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.7; }
.stock-search-box input { width: 100%; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: #e1ebe4; font-size: 11px; }
.stock-search-box input::placeholder { color: #6f7d75; }
.stock-search-box input::-webkit-search-cancel-button { cursor: pointer; }
.stock-search-box kbd { padding: 2px 6px; border: 1px solid #35423b; border-radius: 3px; color: #77847c; font: 9px "DM Mono", monospace; }
.stock-search-results { position: absolute; top: calc(100% + 5px); right: 0; left: 0; overflow: hidden; border: 1px solid #2a3931; border-radius: 5px; background: #121a17; box-shadow: 0 12px 28px #0008; }
.stock-search-results[hidden] { display: none; }
.stock-search-option { display: grid; width: 100%; min-height: 54px; grid-template-columns: minmax(65px, .55fr) minmax(0, 2fr) auto; align-items: center; gap: 11px; padding: 7px 12px; border: 0; border-bottom: 1px solid #222d27; background: transparent; color: #d9e5dc; cursor: pointer; text-align: left; }
.stock-search-option:last-child { border-bottom: 0; }
.stock-search-option:hover, .stock-search-option[aria-selected="true"] { background: #1a2821; }
.search-option-symbol { color: var(--mint-bright); font: 600 11px "DM Mono", monospace; }
.search-option-details { display: grid; min-width: 0; gap: 3px; }
.search-option-details strong { overflow: hidden; color: #dce6df; font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.search-option-details > span { color: #78877e; font-size: 9px; }
.search-option-action { color: #8ab99b; font-size: 9px; white-space: nowrap; }
.stock-search-status { min-height: 0; padding: 0; color: #829087; font-size: 9px; }
.stock-search-status:not(:empty) { padding: 7px 2px 0; }
.stock-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin-top: 15px; }
.stock-card { position: relative; min-width: 0; padding: 14px 14px 12px; border: 1px solid var(--line); border-radius: 6px; background: #101716; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.stock-card:hover { transform: translateY(-2px); border-color: #3b5448; }
.stock-card.selected { border-color: #47775e; background: linear-gradient(135deg, #17221d, #101716 85%); }
.stock-card-head { display: flex; align-items: center; gap: 9px; }
.stock-card-select { display: flex; min-width: 0; flex: 1; align-items: center; gap: 9px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; }
.stock-card-select:focus-visible { outline: 1px solid var(--mint); outline-offset: 3px; border-radius: 3px; }
.company-logo { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border: 1px solid #2a3632; border-radius: 5px; background: #18211f; color: #e2ebe5; font: 700 10px "Manrope", sans-serif; letter-spacing: -.4px; }
.company-logo.logo-google { color: #82aeff; }
.company-logo.logo-hood { color: #9bdaa6; }
.company-logo.logo-zeta { color: #b6a1ff; }
.stock-identity { min-width: 0; }
.stock-symbol { display: block; color: #e7eee9; font: 600 12px "DM Mono", monospace; letter-spacing: .1px; }
.stock-name { display: block; overflow: hidden; max-width: 130px; margin-top: 3px; color: #79877f; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.stock-menu { display: grid; width: 24px; height: 25px; margin-left: auto; place-items: center; border: 0; background: none; color: #728078; cursor: pointer; font-size: 18px; }
.stock-card-main { display: flex; align-items: end; justify-content: space-between; margin-top: 17px; gap: 5px; }
.stock-shares { color: #e9f0eb; font: 600 18px "Manrope", sans-serif; letter-spacing: -.4px; }
.stock-shares-label { margin-top: 4px; color: #718078; font-size: 9px; }
.stock-allocation { color: #9bada2; font: 11px "DM Mono", monospace; text-align: right; white-space: nowrap; }
.stock-allocation-label { display: block; margin-top: 4px; color: #718078; font: 9px "DM Sans", sans-serif; }
.stock-progress { height: 3px; margin-top: 12px; overflow: hidden; border-radius: 3px; background: #26312c; }
.stock-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--mint); transition: width .25s; }
.stock-progress-caption { display: flex; justify-content: space-between; gap: 8px; margin-top: 7px; color: #74827a; font-size: 9px; }
.stock-progress-caption strong { color: #a0b0a5; font-weight: 500; }

.content-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(270px, 1fr); gap: 13px; margin-top: 25px; }
.panel { min-width: 0; border: 1px solid var(--line); border-radius: 6px; background: #101716; }
.chart-panel, .plan-panel { padding: 17px 17px 13px; }
.chart-heading { align-items: center; }
.chart-heading h2 { font-size: 17px; }
.chart-symbol { color: #dce7df; font: 11px "DM Mono", monospace; }
.chart-symbol span { color: #77857c; }
.signal-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 15px; }
.signal-loading { grid-column: 1 / -1; padding: 13px; border: 1px solid #26332d; border-radius: 4px; color: #839188; font-size: 10px; }
.signal-current-card { display: grid; min-width: 0; gap: 5px; padding: 11px 12px; border: 1px solid #28342e; border-radius: 4px; background: #111917; }
.signal-current-card.is-buy { border-color: #345a42; background: linear-gradient(135deg, #16231c, #111917); }
.signal-current-card.is-sell { border-color: #583d35; background: linear-gradient(135deg, #271a17, #111716); }
.signal-current-label { color: #829087; font: 8px "DM Mono", monospace; letter-spacing: .65px; }
.signal-current-card > strong { overflow: hidden; color: #dce9df; font: 600 15px "Manrope", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.signal-current-card.is-buy > strong { color: var(--mint-bright); }
.signal-current-card.is-sell > strong { color: #f0aa8c; }
.signal-current-card > span:last-child { color: #829087; font-size: 9px; line-height: 1.45; }
.signal-current-meta { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 10px 0 0; }
.signal-current-meta > span { display: grid; min-width: 0; gap: 4px; }
.signal-current-meta small { overflow: hidden; color: #718078; font: 7px "DM Mono", monospace; letter-spacing: .4px; text-overflow: ellipsis; white-space: nowrap; }
.signal-current-meta strong { overflow: hidden; color: #d0ddd4; font: 10px "DM Mono", monospace; text-overflow: ellipsis; white-space: nowrap; }
.signal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 13px; margin-top: 15px; color: #849188; font-size: 8px; }
.signal-legend > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.signal-legend i { display: inline-block; width: 8px; height: 3px; border-radius: 2px; }
.legend-candles { background: #a0b1a7; }
.legend-ma21 { background: #76aaff; }
.legend-ma50 { background: #d6b86e; }
.legend-ma200 { background: #d48be8; }
.legend-ma365 { background: #ec916b; }
.legend-buy { background: #70dda2; }
.legend-sell { background: #f08372; }
.signal-chart-container { position: relative; height: 310px; margin-top: 8px; overflow: hidden; border-radius: 4px; background: #0c1211; }
.chart-widget, #tradingview-chart { width: 100%; height: 100%; }
.signal-chart-container #signal-chart { display: block; width: 100%; height: 100%; }
.chart-grid-line { stroke: #26302c; stroke-width: 1; }
.chart-axis-label { fill: #78867e; font: 9px "DM Mono", monospace; }
.candle-wick-up, .candle-wick-down { stroke-width: 1; }
.candle-wick-up { stroke: #71d5a0; }
.candle-wick-down { stroke: #eb8075; }
.candle-body-up { fill: #4d9b70; }
.candle-body-down { fill: #bd625d; }
.chart-ma-21, .chart-ma-50, .chart-ma-200, .chart-ma-365 { fill: none; stroke-width: 1.4; opacity: .9; }
.chart-ma-21 { stroke: #76aaff; }
.chart-ma-50 { stroke: #d6b86e; }
.chart-ma-200 { stroke: #d48be8; }
.chart-ma-365 { stroke: #ec916b; }
.signal-buy-dot { fill: #70dda2; stroke: #0c1211; stroke-width: 1; }
.signal-sell-dot { fill: #f08372; stroke: #0c1211; stroke-width: 1; }
.signal-buy-label, .signal-sell-label { font: 8px "DM Mono", monospace; paint-order: stroke; stroke: #0c1211; stroke-linejoin: round; stroke-width: 3px; }
.signal-buy-label { fill: #86e6ad; }
.signal-sell-label { fill: #f39a83; }
.chart-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: #0c1211; color: #89968f; font-size: 10px; pointer-events: none; }
.chart-fallback strong { color: #cbd7ce; font-size: 12px; font-weight: 600; }
.fallback-mark { color: var(--mint); font-size: 21px; }
.chart-container.loaded .chart-fallback { display: none; }
.signal-details { display: grid; gap: 8px; margin-top: 12px; }
.signal-reason { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: #859188; font-size: 8px; line-height: 1.5; }
.signal-reason strong { flex: 0 0 auto; color: #b9c9bf; font: 9px "DM Mono", monospace; }
.signal-reason span { text-align: right; }
.signal-ma-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 10px 0 0; border-top: 1px solid #232e29; }
.signal-ma-list > span { display: grid; min-width: 0; gap: 4px; }
.signal-ma-list small { color: #748178; font: 8px "DM Mono", monospace; }
.signal-ma-list strong { overflow: hidden; color: #b9c7bd; font: 9px "DM Mono", monospace; text-overflow: ellipsis; white-space: nowrap; }
.signal-data-note { color: #65736b; font-size: 8px; }
.chart-footnote { display: flex; align-items: center; gap: 6px; margin-top: 10px; color: #738078; font-size: 9px; }
.chart-footnote-mark { display: inline-grid; width: 12px; height: 12px; place-items: center; border: 1px solid #52615a; border-radius: 50%; font: 8px Georgia, serif; }

.plan-panel { padding-bottom: 12px; }
.plan-panel .panel-heading { align-items: center; }
.plan-panel .panel-heading h2 { font-size: 16px; }
.plan-icon { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid #293d32; border-radius: 5px; color: var(--mint); font-size: 15px; }
.panel-description { margin: 10px 0 13px; color: #829087; font-size: 10px; line-height: 1.6; }
.plan-list { display: grid; gap: 0; }
.plan-row { display: grid; min-height: 42px; grid-template-columns: 1fr 72px; align-items: center; gap: 10px; border-top: 1px solid #202a27; }
.plan-stock { display: flex; align-items: center; gap: 8px; min-width: 0; }
.plan-ticker-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--mint); }
.plan-row:nth-child(2) .plan-ticker-dot { background: #80a8ee; }
.plan-row:nth-child(3) .plan-ticker-dot { background: #85c98f; }
.plan-row:nth-child(4) .plan-ticker-dot { background: #ac95f0; }
.plan-stock strong { color: #d8e2da; font: 11px "DM Mono", monospace; }
.plan-stock span { overflow: hidden; color: #748178; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.plan-input-wrap { display: flex; align-items: center; justify-content: end; gap: 3px; color: #7e8c83; font: 10px "DM Mono", monospace; }
.plan-input { width: 55px; padding: 5px 0 5px 3px; border: 0; border-bottom: 1px solid transparent; outline: 0; background: transparent; color: #dce8df; font: 11px "DM Mono", monospace; text-align: right; }
.plan-input:hover, .plan-input:focus { border-bottom-color: #47775e; }
.plan-total-row { display: flex; justify-content: space-between; margin-top: 5px; padding-top: 12px; border-top: 1px solid #2a3530; color: #98a69e; font-size: 10px; }
.plan-total-row strong { color: var(--mint-bright); font: 600 13px "DM Mono", monospace; }
.plan-disclaimer { margin-top: 11px; color: #68766e; font-size: 9px; }

.calculator-panel { margin-top: 14px; padding: 20px; }
.calculator-heading { display: flex; align-items: start; justify-content: space-between; gap: 15px; }
.calculator-heading h2 { margin: 7px 0 0; font-size: 19px; font-weight: 600; }
.calculator-heading .panel-description { margin: 7px 0 0; }
.calculator-icon { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid #293d32; border-radius: 5px; color: var(--mint); font: 17px "DM Mono", monospace; }
.calculator-layout { display: grid; grid-template-columns: minmax(220px, .85fr) minmax(0, 1.45fr); gap: 26px; margin-top: 18px; }
.calculator-inputs { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 14px 12px; }
.calculator-field { display: grid; align-content: start; gap: 7px; color: #aab8af; font-size: 9px; }
.calculator-input-wrap { display: flex; height: 37px; align-items: center; gap: 5px; padding: 0 9px; border: 1px solid #2a3731; border-radius: 5px; background: #0d1412; color: #849188; font: 10px "DM Mono", monospace; }
.calculator-input-wrap:focus-within { border-color: #528267; }
.calculator-input-wrap input { width: 100%; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: #e3ece5; font: 11px "DM Mono", monospace; }
.calculator-input-note { grid-column: 1 / -1; margin: 0; color: #77857c; font-size: 9px; line-height: 1.6; }
.calculator-results { min-width: 0; padding: 15px 17px 12px; border: 1px solid #293932; border-radius: 5px; background: linear-gradient(135deg, #14201a, #101716 80%); }
.calculator-total-label { color: #85938b; font: 8px "DM Mono", monospace; letter-spacing: .65px; }
.calculator-total { margin-top: 7px; color: #a0e6bd; font: 600 clamp(24px, 3vw, 34px) "Manrope", sans-serif; letter-spacing: -1px; }
.calculator-result-caption { margin-top: 2px; color: #7c8b82; font-size: 9px; }
.calculator-bars { display: flex; height: 103px; align-items: end; justify-content: space-around; gap: 12px; margin-top: 14px; padding: 0 4px; border-bottom: 1px solid #2b3931; }
.calculator-bar-group { display: flex; height: 100%; min-width: 23px; flex: 1; flex-direction: column; align-items: center; justify-content: end; gap: 6px; }
.calculator-bar { display: flex; width: min(33px, 68%); height: calc(100% - 18px); flex-direction: column; justify-content: end; overflow: hidden; border-radius: 3px 3px 0 0; background: transparent; }
.calculator-bar-invested { display: block; min-height: 0; background: #438263; }
.calculator-bar-growth { display: block; min-height: 0; background: #91dcb0; }
.calculator-bar-label { color: #77867d; font: 8px "DM Mono", monospace; }
.calculator-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 11px; color: #8d9b92; font-size: 9px; }
.calculator-legend > span { display: flex; align-items: center; gap: 6px; }
.calculator-legend i { width: 7px; height: 7px; border-radius: 2px; }
.legend-invested { background: #438263; }
.legend-growth { background: #91dcb0; }
.calculator-breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; padding-top: 11px; border-top: 1px solid #28352e; }
.calculator-breakdown > div { display: grid; gap: 5px; }
.calculator-breakdown span { color: #849188; font-size: 9px; }
.calculator-breakdown strong { color: #d6e2d9; font: 500 12px "DM Mono", monospace; }
.calculator-disclaimer { margin: 13px 0 0; color: #69776f; font-size: 9px; line-height: 1.6; }

.alerts-panel { margin-top: 14px; padding: 19px; }
.alerts-panel .panel-heading { align-items: center; }
.alerts-panel .panel-heading h2 { font-size: 17px; }
.alerts-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid #2c4035; border-radius: 4px; color: #9db0a3; font: 8px "DM Mono", monospace; letter-spacing: .5px; }
.alerts-badge .privacy-dot { width: 5px; height: 5px; }
.alerts-panel > .panel-description { max-width: 650px; margin: 10px 0 15px; line-height: 1.6; }
.alerts-form { display: grid; grid-template-columns: minmax(210px, 1fr); gap: 11px; }
.alerts-email-field { display: grid; max-width: 370px; gap: 6px; color: #aab8af; font-size: 9px; }
.alerts-email-field input { width: 100%; height: 36px; padding: 0 10px; border: 1px solid #2a3731; border-radius: 5px; outline: 0; background: #0d1412; color: #e3ece5; font: 11px "DM Sans", sans-serif; }
.alerts-email-field input:focus { border-color: #528267; }
.alerts-consent { display: flex; max-width: 760px; align-items: start; gap: 8px; color: #829087; font-size: 9px; line-height: 1.55; cursor: pointer; }
.alerts-consent input { width: 13px; height: 13px; flex: 0 0 13px; margin: 1px 0 0; accent-color: var(--mint); }
.alerts-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.alerts-actions .button { min-height: 34px; font-size: 10px; }
.alerts-actions .button:disabled { transform: none; cursor: default; opacity: .6; }
.alerts-disable { border-color: #39453e; background: #171e1b; color: #b2beb5; }
.alerts-disable:hover { background: #202a24; }
.alerts-disable[hidden] { display: none; }
.alerts-status { color: #829087; font-size: 9px; line-height: 1.5; }
.alerts-status.is-success { color: #90d8aa; }
.alerts-status.is-error { color: #f09b8e; }
.alerts-status.is-pending { color: #dec38b; }
.alerts-disclaimer { margin: 11px 0 0; color: #69776f; font-size: 9px; line-height: 1.6; }

.activity-panel { margin-top: 14px; padding: 16px 17px 12px; }
.activity-heading { align-items: center; }
.activity-heading h2 { font-size: 16px; }
.activity-subtitle { color: #78867e; font-size: 9px; }
.activity-table-wrap { position: relative; min-height: 117px; margin-top: 12px; }
.activity-table { width: 100%; border-collapse: collapse; text-align: left; }
.activity-table thead { border-top: 1px solid #242e2a; border-bottom: 1px solid #242e2a; }
.activity-table th { padding: 10px 8px; color: #728078; font: 8px "DM Mono", monospace; letter-spacing: .5px; }
.activity-table th:first-child, .activity-table td:first-child { padding-left: 2px; }
.activity-table td { padding: 10px 8px; border-bottom: 1px solid #1d2723; color: #bbc8bf; font-size: 10px; }
.activity-table tbody tr:last-child td { border-bottom: 0; }
.activity-table td:not(:first-child) { color: #9aa79f; font: 10px "DM Mono", monospace; }
.activity-ticker { display: flex; align-items: center; gap: 8px; color: #dce6df; font: 11px "DM Mono", monospace; }
.activity-logo { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 4px; background: #1c2822; color: var(--mint); font: 700 8px "Manrope", sans-serif; }
.remove-buy { padding: 3px 6px; border: 0; background: transparent; color: #69766f; cursor: pointer; font-size: 15px; }
.remove-buy:hover { color: var(--red); }
.activity-empty { display: none; min-height: 115px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #75837a; font-size: 10px; }
.activity-empty.visible { display: flex; }
.activity-empty strong { color: #cbd6cd; font-size: 11px; font-weight: 600; }
.empty-icon { color: var(--mint); font-size: 17px; }
.text-button { margin-top: 2px; padding: 2px 0; border: 0; background: transparent; color: var(--mint); cursor: pointer; font-size: 10px; }
.text-button:hover { color: var(--mint-bright); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }

.footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 19px; padding: 12px 0 0; border-top: 1px solid var(--line-soft); color: #718078; font-size: 9px; }
.footer-brand { gap: 6px; font-size: 12px; }
.footer-brand .small-mark { height: 15px; gap: 2px; }
.small-mark span { width: 3px; }
.small-mark span:nth-child(1) { height: 7px; }
.small-mark span:nth-child(2) { height: 11px; }
.small-mark span:nth-child(3) { height: 15px; }
.footer-divider { padding: 0 4px; color: #4b5a51; }

.buy-dialog { width: min(450px, calc(100% - 28px)); max-width: none; padding: 0; border: 1px solid #314139; border-radius: 9px; background: #111918; color: var(--text); box-shadow: 0 24px 90px #000a; }
.buy-dialog::backdrop { background: #030706bf; backdrop-filter: blur(3px); }
.buy-dialog form { padding: 24px; }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; }
.dialog-heading h2 { margin: 8px 0 0; font-size: 22px; }
.dialog-close { width: 29px; height: 29px; border: 1px solid #2b3832; border-radius: 5px; background: #18211e; color: #afbbb3; cursor: pointer; font-size: 20px; line-height: 1; }
.dialog-description { margin: 11px 0 19px; color: #89968d; font-size: 11px; line-height: 1.6; }
.form-field { display: grid; gap: 7px; margin-top: 14px; color: #c0ccc3; font-size: 10px; font-weight: 600; }
.form-field input, .form-field select { width: 100%; height: 38px; padding: 0 10px; border: 1px solid #2a3731; border-radius: 5px; outline: 0; background: #0d1412; color: #e3ece5; font-size: 11px; color-scheme: dark; }
.form-field input:focus, .form-field select:focus { border-color: #5ba87b; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.input-with-prefix { display: flex; height: 38px; align-items: center; padding-left: 10px; border: 1px solid #2a3731; border-radius: 5px; background: #0d1412; color: #849188; }
.input-with-prefix:focus-within { border-color: #5ba87b; }
.input-with-prefix > span { font: 11px "DM Mono", monospace; }
.input-with-prefix input { height: 36px; padding-left: 5px; border: 0; background: transparent; }
.input-with-prefix input:focus { border: 0; }
.field-hint { color: #77857c; font-size: 9px; font-weight: 400; }
.form-error { min-height: 16px; margin-top: 11px; color: var(--red); font-size: 10px; }
.dialog-submit { width: 100%; margin-top: 2px; }
.dialog-submit span { font-size: 14px; }
.dialog-disclaimer { margin: 13px 0 0; color: #718078; font-size: 9px; text-align: center; }
.toast { position: fixed; right: 24px; bottom: 22px; z-index: 10; padding: 11px 16px; transform: translateY(12px); border: 1px solid #345440; border-radius: 5px; background: #17231d; color: #b9e7ca; font-size: 11px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.visible { transform: translateY(0); opacity: 1; }

@media (min-width: 1500px) {
  .main-content { margin-right: auto; }
  .summary-card { min-height: 122px; padding: 18px 19px 14px; }
  .stock-card { padding: 16px 17px 14px; }
  .chart-container { height: 320px; }
}

@media (max-width: 1180px) {
  .main-content { padding-right: 27px; padding-left: 27px; }
  .sidebar { width: 205px; }
  .main-content { width: calc(100% - 205px); margin-left: 205px; }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stock-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-grid { grid-template-columns: minmax(0, 1.4fr) minmax(255px, 1fr); }
}

@media (max-width: 820px) {
  .sidebar { width: 61px; align-items: center; padding: 20px 8px 14px; }
  .brand { width: 27px; overflow: hidden; gap: 0; }
  .brand-name, .nav-label, .nav-item:not(.active), .nav-item.active { font-size: 0; }
  .main-nav { width: 44px; margin-top: 42px; }
  .nav-item { justify-content: center; padding: 0; }
  .nav-item svg { width: 18px; height: 18px; }
  .nav-count, .sidebar-note, .privacy-note { display: none; }
  .main-content { width: calc(100% - 61px); margin-left: 61px; padding-right: 20px; padding-left: 20px; }
  .content-grid { grid-template-columns: 1fr; }
  .calculator-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .signal-chart-container { height: 330px; }
  .plan-panel { padding: 17px; }
  .plan-row { min-height: 46px; }
}

@media (max-width: 560px) {
  html { min-width: 360px; }
  .sidebar { width: 49px; padding-right: 5px; padding-left: 5px; }
  .main-nav { width: 39px; }
  .nav-item { height: 38px; }
  .main-content { width: calc(100% - 49px); margin-left: 49px; padding-right: 13px; padding-left: 13px; }
  .topbar { height: 53px; }
  .market-status { font-size: 8px; }
  .topbar-right { gap: 10px; }
  .page-heading { align-items: start; padding: 27px 0 17px; }
  h1 { font-size: 25px; }
  .page-subtitle { max-width: 210px; font-size: 10px; line-height: 1.5; }
  .page-heading .button { min-height: 34px; gap: 6px; padding: 0 9px; font-size: 9px; white-space: nowrap; }
  .quote-strip { grid-template-columns: 1fr auto; gap: 4px 9px; padding: 9px 10px; }
  .quote-strip-label { grid-column: 1 / -1; }
  .quote-widget { height: 31px; }
  .quote-disclaimer { font-size: 8px; }
  .summary-grid { gap: 8px; margin-top: 10px; }
  .summary-card { min-height: 102px; padding: 12px 10px 10px; }
  .summary-label { font-size: 8px; letter-spacing: .1px; }
  .summary-value { margin-top: 11px; font-size: 20px; }
  .summary-foot { align-items: start; gap: 5px; font-size: 8px; line-height: 1.35; }
  .summary-icon { font-size: 10px; }
  .section-block { margin-top: 25px; }
  .section-heading h2, .panel-heading h2 { font-size: 16px; letter-spacing: -.6px; }
  .section-meta { font-size: 7px; }
  .stock-search { margin-top: 11px; }
  .stock-search-box { height: 38px; gap: 8px; padding: 0 9px; }
  .stock-search-box input { font-size: 10px; }
  .stock-search-box kbd { display: none; }
  .stock-grid { gap: 8px; margin-top: 11px; }
  .stock-card { padding: 11px 9px; }
  .stock-card-head, .stock-card-select { gap: 6px; }
  .company-logo { width: 26px; height: 26px; flex-basis: 26px; font-size: 9px; }
  .stock-symbol { font-size: 10px; }
  .stock-name { max-width: 95px; font-size: 8px; }
  .stock-menu { width: 17px; }
  .stock-card-main { align-items: start; flex-direction: column; gap: 7px; margin-top: 13px; }
  .stock-shares { font-size: 16px; }
  .stock-shares-label, .stock-allocation-label { font-size: 8px; }
  .stock-allocation { font-size: 10px; text-align: left; }
  .stock-progress-caption { font-size: 8px; }
  .content-grid { gap: 10px; margin-top: 19px; }
  .alerts-panel { padding: 14px 11px; }
  .alerts-panel .panel-heading h2 { font-size: 15px; }
  .alerts-badge { padding: 5px; font-size: 7px; }
  .alerts-actions { align-items: start; flex-direction: column; }
  .calculator-panel { padding: 14px 11px; }
  .calculator-heading h2 { font-size: 16px; }
  .calculator-layout { gap: 13px; margin-top: 13px; }
  .calculator-inputs { gap: 10px 8px; }
  .calculator-field { font-size: 8px; }
  .calculator-input-wrap { height: 34px; padding: 0 7px; }
  .calculator-results { padding: 12px 10px 10px; }
  .calculator-bars { gap: 6px; }
  .chart-panel, .plan-panel, .activity-panel { padding-right: 11px; padding-left: 11px; }
  .signal-chart-container { height: 255px; }
  .signal-overview { gap: 6px; margin-top: 11px; }
  .signal-current-card { padding: 9px 7px; }
  .signal-current-card > strong { font-size: 12px; }
  .signal-current-card > span:last-child { font-size: 8px; }
  .signal-current-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .signal-legend { gap: 7px 9px; font-size: 7px; }
  .signal-legend > span { gap: 3px; }
  .signal-legend i { width: 6px; }
  .signal-reason { align-items: start; flex-direction: column; gap: 2px; }
  .signal-reason span { text-align: left; }
  .signal-ma-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart-symbol { font-size: 9px; }
  .chart-heading h2 { font-size: 14px; }
  .chart-footnote { align-items: start; font-size: 8px; line-height: 1.5; }
  .activity-panel { margin-top: 10px; }
  .activity-subtitle { font-size: 8px; }
  .activity-table { min-width: 485px; }
  .activity-table-wrap { overflow-x: auto; }
  .activity-table th { padding: 9px 5px; font-size: 7px; }
  .activity-table td { padding: 9px 5px; font-size: 9px; }
  .footer { justify-content: start; gap: 8px 15px; font-size: 8px; }
  .footer > span:nth-child(2) { display: none; }
  .footer-brand { font-size: 10px; }
  .buy-dialog form { padding: 18px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}