:root {
  font-family: "Be Vietnam Pro", "SF Pro Display", "Segoe UI", sans-serif;
}

[hidden] { display: none !important; }

.primary-nav { display: flex; gap: 0.25rem; margin-left: 2rem; }
.primary-nav button { min-height: 2.25rem; padding: 0 0.75rem; border: 0; background: transparent; color: var(--muted); font-size: 0.75rem; font-weight: 750; cursor: pointer; }
.primary-nav button:hover { color: var(--ink); }
.primary-nav button[aria-current="page"] { background: var(--ink); color: #fff; }
.primary-nav button:focus-visible { outline: 3px solid rgba(8,122,85,.25); outline-offset: 0.15rem; }

.portfolio-switcher { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding: 1rem; border: 1px solid var(--line); background: var(--surface); }
.portfolio-switcher label { display: block; margin-bottom: 0.3rem; color: var(--muted); font-size: 0.6875rem; }
.portfolio-switcher select { min-width: min(22rem, 60vw); height: 2.5rem; border: 1px solid var(--line); background: #fff; padding: 0 2.25rem 0 0.75rem; color: var(--ink); font: inherit; font-weight: 700; }
.portfolio-switcher select:focus-visible { outline: 3px solid rgba(8,122,85,.25); outline-offset: 0.15rem; }
.empty-row { padding: 2rem; color: var(--muted); text-align: center !important; white-space: normal; }
.empty-copy { margin: 0; color: var(--muted); font-size: 0.75rem; line-height: 1.5; }
.dialog-copy { margin: 1rem 0; color: var(--muted); font-size: 0.8125rem; line-height: 1.5; }
#portfolio-dialog .dialog-actions { margin-top: 1.25rem; }

.indicators { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.intro h1,
h2 {
  font-family: "Be Vietnam Pro", "SF Pro Display", "Segoe UI", sans-serif;
}

.chart-header {
  gap: 1.25rem;
}

.recommendations-panel {
  margin-bottom: 1.25rem;
  border: 1px solid var(--line);
  background: var(--surface);
}

.stock-lookup {
  margin-bottom: 1.25rem;
  border: 1px solid var(--line);
  background: var(--surface);
}

.lookup-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  padding: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.lookup-heading h2 { margin-bottom: 0.4rem; }
.lookup-heading p:not(.eyebrow) { max-width: 42rem; margin: 0; color: var(--muted); font-size: 0.8125rem; line-height: 1.5; }
.stock-search { flex: 0 0 min(24rem, 42%); }
.stock-search > label { display: block; margin-bottom: 0.35rem; color: var(--muted); font-size: 0.6875rem; font-weight: 700; }
.stock-search > div { display: flex; }
.stock-search input { min-width: 0; height: 2.625rem; flex: 1; border: 1px solid var(--line); border-right: 0; padding: 0 0.75rem; font: inherit; text-transform: uppercase; }
.stock-search .button { min-height: 2.625rem; white-space: nowrap; }
.lookup-filterbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--line); background: #f0f1ed; }
.lookup-filterbar > div:first-child { min-width: 11rem; }
.lookup-filterbar strong, .lookup-filterbar span { display: block; }
.lookup-filterbar strong { font-size: 0.75rem; }
.lookup-filterbar span { margin-top: 0.2rem; color: var(--muted); font-size: 0.625rem; }
.filter-options { display: flex; justify-content: flex-end; gap: 0.4rem; flex-wrap: wrap; }
.filter-options label { display: inline-flex; align-items: center; min-height: 2rem; gap: 0.35rem; padding: 0 0.55rem; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 0.65rem; font-weight: 700; cursor: pointer; }
.filter-options label.filter-passed { border-color: var(--green); color: var(--green); }
.filter-options input { accent-color: var(--green); }
.lookup-result { padding: 1.25rem; scroll-margin-top: 5.5rem; }
.lookup-result[hidden] { display: none; }
.lookup-result-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lookup-result-head > div { display: flex; align-items: baseline; gap: 0.75rem; }
.lookup-result-head strong { font-size: 1.6rem; }
.lookup-result-head span:not(.sepa-status) { color: var(--muted); }
.lookup-updated { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.6875rem; }
.lookup-action { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 0.6rem 0.75rem; margin-top: 0.85rem; padding: 0.75rem; border: 1px solid var(--line); }
.lookup-action > span { color: var(--muted); font-size: 0.625rem; font-weight: 750; }
.lookup-action > strong { font-size: 0.8rem; }
.lookup-action > p { margin: 0; color: var(--muted); font-size: 0.72rem; line-height: 1.45; }
.lookup-action.buy { border-color: var(--green); background: var(--green-soft); }
.lookup-action.buy > strong { color: var(--green); }
.lookup-action.sell { border-color: var(--amber); background: var(--amber-soft); }
.lookup-action.sell > strong { color: var(--amber); }
#lookup-chart { display: block; width: 100%; height: auto; min-height: 18rem; margin-top: 0.75rem; }

.stock-chart-embed {
  position: relative;
  width: 100%;
  height: 520px !important;
  min-height: 520px !important;
  margin-top: 0.75rem;
  overflow: hidden;
  background: #fff;
}

.chart-provider { color: var(--muted); font-size: 0.6875rem; font-weight: 700; }
.chart-embed-error { display: grid; height: 100%; place-items: center; color: var(--muted); font-size: 0.875rem; }
.chart-embed-error a { color: var(--green); }
.chart-loading { display: grid; height: 100%; place-items: center; color: var(--muted); font-size: 0.8125rem; }
.chart-tooltip { position: absolute; z-index: 3; max-width: calc(100% - 1rem); padding: 0.4rem 0.55rem; background: rgba(23,32,28,.9); color: #fff; font-size: 0.6875rem; pointer-events: none; white-space: nowrap; }
.strategy-legend { position: absolute; z-index: 3; top: 0.5rem; left: 0.5rem; display: flex; align-items: center; gap: 0.75rem; padding: 0.4rem 0.55rem; border: 1px solid rgba(217,221,216,.8); background: rgba(255,255,255,.9); color: var(--muted); font-size: 0.65rem; pointer-events: none; }
.strategy-legend strong { color: var(--ink); }
.strategy-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.strategy-legend span::before { content: ""; width: 0.9rem; height: 2px; background: currentColor; }
.strategy-buy { color: var(--green); }
.strategy-mid { color: #2d62a8; }
.strategy-sell { color: var(--red); }
.lookup-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.lookup-facts > div { min-width: 0; padding: 0.75rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lookup-facts span, .lookup-facts strong { display: block; }
.lookup-facts span { margin-bottom: 0.3rem; color: var(--muted); font-size: 0.625rem; }
.lookup-facts strong { overflow-wrap: anywhere; font-size: 0.75rem; }
.lookup-sepa-detail { margin-top: 1rem; border: 1px solid var(--line); }
.lookup-sepa-detail[hidden] { display: none; }
.lookup-sepa-head { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #f0f1ed; }
.lookup-sepa-head > div { padding: 0.75rem; border-right: 1px solid var(--line); }
.lookup-sepa-head > div:last-child { border: 0; }
.lookup-sepa-head span, .lookup-sepa-head strong { display: block; }
.lookup-sepa-head span { margin-bottom: 0.3rem; color: var(--muted); font-size: 0.625rem; }
.lookup-sepa-head strong { font-size: 0.75rem; }
.lookup-sepa-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lookup-sepa-list > div { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.5rem; padding: 0.7rem 0.75rem; border-top: 1px solid var(--line); }
.lookup-sepa-list > div:nth-child(odd) { border-right: 1px solid var(--line); }
.lookup-sepa-list span { display: grid; place-items: center; width: 1.125rem; height: 1.125rem; border: 1px solid currentColor; border-radius: 50%; font-size: 0.625rem; }
.lookup-sepa-list p { margin: 0; font-size: 0.72rem; }
.lookup-sepa-list strong { color: var(--muted); font-size: 0.625rem; }
.lookup-sepa-list .passed { color: var(--green); }
.lookup-sepa-list .passed p { color: var(--ink); }
.lookup-analysis { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.25rem; }
.lookup-analysis h3 { margin: 0 0 0.75rem; font-size: 0.875rem; }
.lookup-analysis dl { margin: 0; border-top: 1px solid var(--line); }
.lookup-analysis dl > div { display: grid; grid-template-columns: minmax(8rem, 0.4fr) 1fr; gap: 1rem; padding: 0.65rem 0; border-bottom: 1px solid var(--line); font-size: 0.75rem; line-height: 1.45; }
.lookup-analysis dt { color: var(--muted); }
.lookup-analysis dd { margin: 0; font-weight: 650; }
.lookup-analysis .level-action { padding-right: 0.5rem; padding-left: 0.5rem; background: #f4f4ef; }
.lookup-analysis .level-action.buy dd { color: var(--green); }
.lookup-analysis .level-action.sell dd { color: var(--red); }
.lookup-source-note { margin: 1rem 0 0; padding: 0.75rem; background: #f0f1ed; color: var(--muted); font-size: 0.6875rem; line-height: 1.5; }

.section-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.recommendation-reason {
  max-width: 27.5rem;
  white-space: normal;
  color: var(--muted);
  line-height: 1.45;
}

.action-badge {
  display: inline-flex;
  padding: 0.3125rem 0.5rem;
  border: 1px solid var(--line);
  font-size: 0.6875rem;
  font-weight: 800;
  white-space: nowrap;
}

.action-badge.positive { border-color: var(--green); background: var(--green-soft); }
.action-badge.negative { border-color: var(--red); background: var(--red-soft); }
.action-badge.warning { border-color: var(--amber); background: var(--amber-soft); color: var(--amber); }

.recommendation-disclaimer {
  margin: 0;
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--line);
  background: #f0f1ed;
  color: var(--muted);
  font-size: 0.6875rem;
  line-height: 1.5;
}

.sort-button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

th:first-child .sort-button { justify-content: flex-start; }
.sort-button:hover { color: var(--ink); }
.sort-button:focus-visible { outline: 3px solid rgba(8,122,85,.25); outline-offset: 0.25rem; }
.sort-indicator { min-width: 0.75rem; color: var(--green); font-size: 0.75rem; }

.chart-header > div:first-child,
.chart-meta,
.chart-legend {
  display: flex;
  align-items: center;
}

.chart-tools {
  display: flex;
  gap: 0.375rem;
}

.chart-navigation {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
  margin-top: 0.75rem;
}

.chart-range { margin-right: auto; color: var(--ink); font-size: 0.75rem; font-weight: 750; }
.chart-hint { color: var(--muted); font-size: 0.6875rem; }

.chart-tool {
  min-height: 2rem;
  padding: 0 0.625rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 750;
  cursor: pointer;
}

.chart-tool:hover,
.chart-tool:focus-visible,
.chart-tool[aria-pressed="true"] {
  border-color: #2d78bd;
  color: #2d78bd;
}

.chart-tool.danger:hover,
.chart-tool.danger:focus-visible { border-color: var(--red); color: var(--red); }

.chart-header > div:first-child {
  gap: 0.75rem;
  align-items: baseline;
}

.chart-meta,
.chart-legend {
  gap: 0.75rem;
}

.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.625rem;
  font-weight: 750;
}

.chart-legend span::before {
  content: "";
  display: block;
  width: 0.875rem;
  height: 0.1875rem;
  background: currentColor;
}

.legend-up { color: var(--green) !important; }
.legend-down { color: var(--red) !important; }
.legend-ma50 { color: #2d62a8 !important; }
.legend-ma150 { color: #8a5a10 !important; }
.legend-ma200 { color: #7251a5 !important; }

#price-chart {
  min-height: 300px;
  margin-top: 0.625rem;
  overflow: visible;
}

#price-chart, #lookup-chart { cursor: grab; touch-action: pan-y; user-select: none; }
#price-chart.is-panning, #lookup-chart.is-panning { cursor: grabbing; }
#price-chart:focus-visible, #lookup-chart:focus-visible { outline: 3px solid rgba(8,122,85,.25); outline-offset: 2px; }

#price-chart.drawing-wave { cursor: crosshair; }

.wave-path {
  fill: none;
  stroke: #2484d8;
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.wave-anchor { fill: #fff; stroke: #2484d8; stroke-width: 2; vector-effect: non-scaling-stroke; }
.wave-label { fill: #176daf; font-size: 14px; font-weight: 800; paint-order: stroke; stroke: #fff; stroke-width: 4px; }

.chart-label {
  fill: var(--muted);
  font-size: 10px;
}

.chart-section-label {
  fill: var(--muted);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.1em;
}

.wick {
  stroke: currentColor;
  stroke-width: 1.3;
  vector-effect: non-scaling-stroke;
}

.candle.up { color: var(--green); }
.candle.down { color: var(--red); }
.candle .body { fill: currentColor; }
.volume-bar { fill: currentColor; opacity: 0.28; }
.volume-baseline { stroke: var(--line); }

.ma-line {
  fill: none;
  stroke-width: 1.7;
  vector-effect: non-scaling-stroke;
}

.ma-line.ma50 { stroke: #2d62a8; }
.ma-line.ma150 { stroke: #8a5a10; }
.ma-line.ma200 { stroke: #7251a5; stroke-dasharray: 5 3; }

.buy-zone { fill: rgba(8, 122, 85, 0.09); }
.pivot-line { stroke: var(--green); stroke-width: 1.25; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.pivot-label { fill: var(--green); font-size: 10px; font-weight: 800; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }

.sepa-panel { border-top: 1px solid var(--line); padding: 1.25rem 0 0; }
.sepa-summary { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.sepa-kicker { display: block; margin-bottom: 0.35rem; color: var(--green); font-size: 0.625rem; font-weight: 800; letter-spacing: 0.08em; }
.sepa-summary h3 { margin: 0; font-size: 1rem; }
.sepa-score { display: flex; align-items: center; gap: 0.625rem; }
.sepa-score > strong { font-size: 1.35rem; letter-spacing: -0.04em; }
.sepa-status { padding: 0.3rem 0.5rem; background: var(--amber-soft); color: var(--amber); font-size: 0.6875rem; font-weight: 800; }
.sepa-status.status-good { background: var(--green-soft); color: var(--green); }
.sepa-status.status-bad { background: var(--red-soft); color: var(--red); }
.sepa-toggle { border: 1px solid currentColor; cursor: pointer; }
.sepa-toggle::after { content: " +"; }
.sepa-toggle[aria-expanded="true"]::after { content: " −"; }
.sepa-toggle:focus-visible { outline: 3px solid rgba(8,122,85,.25); outline-offset: 0.2rem; }
.sepa-progress { height: 0.375rem; margin: 0.875rem 0 1rem; background: #e5e8e5; overflow: hidden; }
.sepa-progress span { display: block; height: 100%; background: var(--green); transition: width 200ms ease-out; }
.sepa-criteria { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.sepa-criterion { display: flex; gap: 0.5rem; min-height: 4rem; padding: 0.75rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); }
.sepa-criterion > span { display: grid; flex: 0 0 auto; place-items: center; width: 1.125rem; height: 1.125rem; border: 1px solid currentColor; border-radius: 50%; font-size: 0.6875rem; font-weight: 800; }
.sepa-criterion.passed { color: var(--green); }
.sepa-criterion p { margin: 0; color: var(--ink); font-size: 0.75rem; line-height: 1.45; }
.vcp-readout { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 1rem; background: #f0f1ed; }
.vcp-readout > div { padding: 0.75rem; border-right: 1px solid var(--line); }
.vcp-readout > div:last-child { border: 0; }
.vcp-readout span, .vcp-readout strong { display: block; }
.vcp-readout span { margin-bottom: 0.3rem; color: var(--muted); font-size: 0.625rem; }
.vcp-readout strong { font-size: 0.75rem; }

.last-price-line {
  stroke-width: 1;
  stroke-dasharray: 4 4;
  opacity: 0.72;
}

.last-price-line.up { stroke: var(--green); }
.last-price-line.down { stroke: var(--red); }
.last-price-tag.up { fill: var(--green); }
.last-price-tag.down { fill: var(--red); }
.last-price-text { fill: #fff; font-size: 10px; font-weight: 800; }

@media (max-width: 900px) {
  .primary-nav { order: 3; width: 100%; margin: 0; }
  .topbar { height: auto; min-height: 4.25rem; flex-wrap: wrap; gap: 0.5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .primary-nav button { flex: 1; }
  .chart-meta { align-items: flex-end; flex-direction: column-reverse; gap: 0.5rem; }
  .chart-legend { gap: 0.5rem; }
  .sepa-criteria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vcp-readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vcp-readout > div:nth-child(2) { border-right: 0; }
  .lookup-heading { align-items: stretch; flex-direction: column; gap: 1rem; }
  .lookup-filterbar { align-items: flex-start; flex-direction: column; }
  .filter-options { justify-content: flex-start; }
  .stock-search { flex-basis: auto; width: 100%; }
  .lookup-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lookup-sepa-head { grid-template-columns: 1fr; }
  .lookup-sepa-head > div { border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 620px) {
  .portfolio-switcher { align-items: stretch; flex-direction: column; }
  .portfolio-switcher select { width: 100%; min-width: 0; }
  .chart-header { align-items: flex-start; }
  .chart-legend { display: none; }
  .chart-tools { width: 100%; }
  .chart-tool { flex: 1; }
  .chart-navigation { flex-wrap: wrap; }
  .chart-navigation .chart-tool { flex: 0 0 auto; min-width: 2.25rem; }
  .chart-hint { order: 3; width: 100%; text-align: left; }
  #price-chart { min-height: 230px; }
  .sepa-summary { align-items: flex-start; flex-direction: column; }
  .sepa-criteria, .vcp-readout { grid-template-columns: 1fr; }
  .vcp-readout > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .lookup-result-head { align-items: flex-start; flex-direction: column; }
  .lookup-action { grid-template-columns: 1fr; gap: 0.25rem; }
  .lookup-analysis { grid-template-columns: 1fr; }
  .lookup-analysis dl > div { grid-template-columns: 1fr; gap: 0.2rem; }
  #lookup-chart { min-height: 14rem; }
  .stock-chart-embed { height: 430px !important; min-height: 430px !important; }
  .strategy-legend { right: 0.5rem; flex-wrap: wrap; gap: 0.35rem 0.65rem; }
  .lookup-sepa-list { grid-template-columns: 1fr; }
  .lookup-sepa-list > div:nth-child(odd) { border-right: 0; }
}

/* Symbol tabs stay tappable and scroll horizontally on narrow screens. */
.detail .section-heading { min-width: 0; }
.detail .tabs {
  max-width: min(100%, 52rem);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.detail .tabs button {
  flex: 0 0 auto;
  min-width: 3.25rem;
  min-height: 2.75rem;
  scroll-snap-align: center;
  touch-action: manipulation;
}

@media (max-width: 620px) {
  .detail .section-heading { width: 100%; overflow: hidden; }
  .detail .section-heading > div:first-child { flex: 0 0 auto; }
  .detail .tabs { width: 100%; max-width: 100%; padding-bottom: 0.25rem; }
  .detail .tabs button { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .sepa-progress span { transition: none; }
}

.position-row {
  grid-template-columns: 3.75rem minmax(0, 1fr) minmax(0, 1fr) auto;
}

.remove-symbol {
  min-height: 2.625rem;
  padding: 0 0.65rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--red);
  font-size: 0.75rem;
  font-weight: 750;
  cursor: pointer;
}

.add-symbol-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: end;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.add-symbol-row input {
  text-transform: uppercase;
}

@media (max-width: 620px) {
  .position-row {
    grid-template-columns: 1fr 1fr auto;
  }

  .position-row > strong {
    grid-column: 1 / -1;
  }

  .add-symbol-row {
    grid-template-columns: 1fr;
  }
}