:root {
  --ink: #0b0d0c; --ink-soft: #151917; --paper: #f3f4ef; --white: #ffffff;
  --muted: #798079; --line: rgba(11,13,12,.14); --green: #22c55e;
  --red: #ef5b4c; --amber: #f2b94b; --cyan: #73d2de; --radius: 6px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; letter-spacing: 0; }
button, input { font: inherit; letter-spacing: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
.hidden { display: none !important; }
.topbar { position: fixed; inset: 0 0 auto; height: 64px; padding: 0 4vw; display: flex; align-items: center; z-index: 50; border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(11,13,12,.72); backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 10px; color: white; text-decoration: none; font-size: 17px; font-weight: 700; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; background: var(--green); color: var(--ink); border-radius: 3px; }
.brand-mark svg { width: 19px; }
.topbar nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 0; padding: 4px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.06); }
.topbar nav a { color: #aeb4ae; text-decoration: none; font-size: 12px; padding: 8px 16px; border-radius: 999px; white-space: nowrap; }
.topbar nav a:first-child { color: white; background: rgba(255,255,255,.12); }.topbar nav a:hover { color: white; background: rgba(255,255,255,.1); }
.icon-button { border: 0; background: transparent; color: inherit; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; }
.icon-button svg { width: 19px; }
.notification-button { position: relative; margin-left: 28px; color: white; }
.theme-toggle { margin-left: auto; height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0 15px; border: 1px solid var(--green); border-radius: 999px; color: white; background: rgba(34,197,94,.13); font-size: 11px; }
.theme-toggle svg { width: 15px; }.theme-toggle:hover { background: var(--green); color: var(--ink); }
.notification-count { position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; background: var(--red); border: 2px solid var(--ink); border-radius: 10px; font-size: 9px; font-weight: 800; }

.story { height: 400vh; position: relative; background: var(--ink); }
.story-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; isolation: isolate; }
#heroChart { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.story-stage::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11,13,12,.85) 0%, rgba(11,13,12,.24) 55%, rgba(11,13,12,.6) 100%); pointer-events: none; }
.market-tape { position: absolute; top: 88px; right: 4vw; display: flex; gap: 9px; align-items: center; font: 11px ui-monospace, monospace; color: #737a74; }
.market-tape strong { margin-right: 16px; font-weight: 600; }.up { color: var(--red); }.down { color: var(--green); }
.story-progress { position: absolute; right: 4vw; top: 50%; width: 2px; height: 180px; background: rgba(255,255,255,.14); transform: translateY(-50%); }
.story-progress span { display: block; width: 100%; height: 0; background: var(--green); }
.chapter { position: absolute; inset: 0; padding: 0 10vw; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(36px); pointer-events: none; transition: opacity .25s linear, transform .25s linear; }
.chapter.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.chapter-two, .chapter-four { align-items: flex-end; text-align: right; padding-right: 12vw; }
.chapter-three { padding-left: 13vw; }
.eyebrow { margin: 0 0 18px; color: var(--green); font: 600 11px/1.2 ui-monospace, monospace; text-transform: uppercase; }
.eyebrow.dark { color: #38714a; }
.chapter h1 { margin: 0; font-size: clamp(70px, 11vw, 168px); line-height: .84; font-weight: 800; }
.hero-title { display: block; width: 118%; transform: scaleX(.84); transform-origin: left center; font-family: "DIN Condensed", "Arial Narrow", "Roboto Condensed", "Microsoft YaHei UI", "Noto Sans SC", sans-serif; font-stretch: condensed; font-weight: 900; }
.chapter .lead { margin: 30px 0 0; font-size: clamp(19px, 2vw, 30px); color: #bec4be; }
.chapter h2 { margin: 0; max-width: 760px; font-size: clamp(44px, 6vw, 92px); line-height: 1.04; font-weight: 700; }
.chapter > p:last-child { margin-top: 24px; color: #a4aaa4; font-size: 16px; }
.chapter-index { color: var(--green); font: 12px ui-monospace, monospace; margin-bottom: 22px; }
.primary-link { margin-top: 30px; display: inline-flex; align-items: center; gap: 10px; padding: 14px 18px; color: var(--ink); background: var(--green); text-decoration: none; border-radius: 3px; font-weight: 700; }
.primary-link svg { width: 18px; }
.scroll-cue { position: absolute; bottom: 28px; left: 4vw; display: flex; gap: 10px; align-items: center; color: #7a817a; font: 9px ui-monospace, monospace; }
.scroll-cue span { display: block; width: 36px; height: 1px; background: var(--green); animation: cue 1.6s ease-in-out infinite; transform-origin: left; }
@keyframes cue { 50% { transform: scaleX(.35); opacity: .45; } }

.workspace-band, .analysis-band { background: var(--ink); color: var(--paper); padding: 110px 0 130px; scroll-margin-top: 60px; }
.analysis-band { padding-bottom: 120px; }
.section-shell { width: min(1420px, 92vw); margin: 0 auto; }
.section-heading { display: flex; justify-content: space-between; align-items: end; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.section-heading h2 { font-size: clamp(38px, 5vw, 72px); margin: 0; line-height: 1; }
.section-heading > p { max-width: 360px; color: #697069; margin: 0; text-align: right; }
.light-heading { border-color: rgba(255,255,255,.14); }.light-heading > p { color: #8f9690; }
.scanner-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 56px; margin-top: 46px; }
.scan-control-panel { border-right: 1px solid var(--line); padding-right: 42px; }
.control-header { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-bottom: 34px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #9ca39d; box-shadow: 0 0 0 5px rgba(11,13,12,.05); }
.status-dot.running { background: var(--amber); animation: pulse 1s infinite; }.status-dot.done { background: var(--green); }
@keyframes pulse { 50% { opacity: .35; } }
.scan-control-panel label { display: block; color: #697069; font-size: 12px; margin-bottom: 10px; }
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.segment { height: 40px; border: 0; border-right: 1px solid var(--line); background: transparent; color: inherit; font-size: 12px; white-space: nowrap; }
.segment:last-child { border-right: 0; }.segment.active { background: var(--ink); color: white; }
.primary-button, .accent-button { border: 0; display: flex; align-items: center; justify-content: center; gap: 9px; font-weight: 700; border-radius: 4px; }
.primary-button { width: 100%; height: 52px; margin-top: 16px; background: var(--green); color: var(--ink); }
.primary-button:disabled, .accent-button:disabled { opacity: .48; cursor: wait; }
.primary-button svg, .accent-button svg { width: 18px; }
.scan-progress-block { margin-top: 34px; }.progress-meta { display: flex; justify-content: space-between; gap: 12px; color: #777e77; font-size: 11px; }.progress-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.progress-meta strong { color: var(--ink); }
.progress-track { height: 3px; background: #d9dcd6; margin-top: 10px; }.progress-track span { display: block; height: 100%; width: 0; background: var(--green); transition: width .25s; }
.scan-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 34px 0 0; border-top: 1px solid var(--line); padding-top: 24px; }.scan-stats div { display: flex; flex-direction: column-reverse; }.scan-stats dt { color: #7b827b; font-size: 11px; }.scan-stats dd { margin: 0 0 7px; font: 600 24px ui-monospace, monospace; }
.data-note { margin-top: 32px; color: #8a908a; font-size: 10px; line-height: 1.6; }
.results-panel { min-width: 0; }.results-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }.results-toolbar h3 { margin: 0 0 5px; font-size: 19px; }.results-toolbar > div span { color: #818781; font-size: 11px; }.strategy-chip, .mode-badge { border: 1px solid var(--line); padding: 6px 9px; border-radius: 3px; font: 10px ui-monospace, monospace; }
.empty-state { height: 350px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: #8d938d; }.empty-state svg { width: 42px; height: 42px; margin-bottom: 16px; stroke-width: 1; }.empty-state strong { color: #3a3f3b; margin-bottom: 7px; }.empty-state span { font-size: 12px; }
.table-wrap { width: 100%; overflow-x: auto; }.results-viewport { height: 520px; overflow: auto; overscroll-behavior: contain; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); scrollbar-width: thin; scrollbar-color: #aab2aa transparent; }.results-viewport table { border-top: 0; }table { width: 100%; border-collapse: collapse; }th { color: #858b85; font-size: 10px; font-weight: 500; text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; position: sticky; top: 0; background: var(--ink); z-index: 1; }td { padding: 16px 14px; border-bottom: 1px solid var(--line); font-size: 12px; white-space: nowrap; }td strong { display: block; font-size: 13px; }td small { color: #858b85; }.table-action { width: 32px; height: 32px; border: 1px solid var(--line); background: transparent; color: inherit; border-radius: 3px; display: grid; place-items: center; }.table-action svg { width: 15px; }.candidate-row { animation: candidate-in .42s ease both; }@keyframes candidate-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

.analysis-toolbar { margin-top: 42px; display: flex; align-items: center; gap: 12px; }.stock-search { width: 280px; height: 48px; display: flex; align-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 4px; padding-left: 14px; }.stock-search > svg { width: 16px; color: #747b75; }.stock-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: white; background: transparent; padding: 0 10px; }.dark-segmented { width: 230px; border-color: rgba(255,255,255,.18); }.dark-segmented .segment { border-color: rgba(255,255,255,.18); color: #aeb4ae; }.dark-segmented .segment.active { background: white; color: var(--ink); }.accent-button { height: 48px; padding: 0 20px; background: var(--green); color: var(--ink); }
.quote-line { margin-top: 52px; display: flex; align-items: end; gap: 22px; }.quote-line > div:first-child span { display: block; font-size: 22px; font-weight: 700; }.quote-line > div:first-child strong { color: #717872; font: 11px ui-monospace, monospace; }.quote-price { margin-left: auto; display: flex; align-items: baseline; gap: 12px; }.quote-price strong { font: 500 38px ui-monospace, monospace; }.quote-price span { font: 12px ui-monospace, monospace; }.mode-badge { border-color: #856c2f; color: var(--amber); }
.chart-and-metrics { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr) 240px; border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }.chart-surface { min-width: 0; padding: 20px 26px 18px 0; border-right: 1px solid rgba(255,255,255,.14); }.chart-caption { display: flex; justify-content: space-between; color: #747b75; font: 10px ui-monospace, monospace; margin-bottom: 10px; }.chart-surface canvas { display: block; width: 100%; height: 390px; }.metric-rail { display: grid; grid-template-rows: repeat(4, 1fr); }.metric { padding: 22px; border-bottom: 1px solid rgba(255,255,255,.14); display: flex; flex-direction: column; justify-content: center; }.metric:last-child { border: 0; }.metric span { color: #7f8680; font-size: 11px; }.metric strong { margin-top: 7px; font: 500 26px ui-monospace, monospace; }
.backtest-detail { margin-top: 64px; }.subheading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }.subheading h3 { margin: 0; font-size: 18px; }.subheading span { color: #7e857f; font-size: 10px; }.equity-section canvas { width: 100%; height: 220px; display: block; border-bottom: 1px solid rgba(255,255,255,.14); }.trades-section { margin-top: 56px; }.dark-table th, .dark-table td { border-color: rgba(255,255,255,.12); }.dark-table td { color: #c3c8c3; }.positive { color: var(--red) !important; }.negative { color: var(--green) !important; }
.period-notice { margin: 0 0 18px; color: var(--amber); font-size: 11px; line-height: 1.6; }
.chart-surface canvas { cursor: grab; touch-action: none; }.chart-surface canvas.dragging { cursor: grabbing; }
.indicator-caption { display: flex; justify-content: space-between; margin: 10px 0 4px; color: #737b74; font: 9px ui-monospace, monospace; }.indicator-chart { display: block; width: 100%; height: 92px !important; cursor: default !important; border-bottom: 1px solid rgba(255,255,255,.08); }.macd-chart { height: 118px !important; }
body.light-theme .indicator-chart { border-color: var(--line); }
.selected-data { display: grid; grid-template-columns: 1.25fr repeat(7, 1fr); gap: 10px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--paper) 16%, transparent); background: color-mix(in srgb, var(--paper) 4%, var(--ink)); border-radius: 3px; }.selected-data div { min-width: 0; }.selected-data span { display: block; color: #737b74; font: 9px ui-monospace, monospace; }.selected-data strong { display: block; margin-top: 5px; overflow: hidden; color: var(--paper); font: 500 12px ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
body.light-theme .selected-data { border-color: var(--line); background: color-mix(in srgb, var(--paper) 4%, var(--ink)); }
@media (max-width: 900px) { .selected-data { grid-template-columns: repeat(4, 1fr); row-gap: 12px; } }
@media (max-width: 600px) { .selected-data { grid-template-columns: repeat(2, 1fr); } }

.notification-drawer { position: fixed; z-index: 80; top: 0; right: 0; width: min(420px, 100%); height: 100vh; padding: 28px; color: var(--ink); background: var(--paper); transform: translateX(102%); transition: transform .28s ease; box-shadow: -16px 0 60px rgba(0,0,0,.28); }.notification-drawer.open { transform: translateX(0); }.drawer-header { display: flex; justify-content: space-between; align-items: start; border-bottom: 1px solid var(--line); padding-bottom: 20px; }.drawer-header h2 { margin: 0; }.notification-list { margin-top: 12px; }.notification-item { padding: 18px 2px; border-bottom: 1px solid var(--line); }.notification-item strong { display: block; font-size: 13px; }.notification-item p { color: #6f766f; margin: 7px 0; font-size: 12px; }.notification-item time { color: #989e98; font: 9px ui-monospace, monospace; }.drawer-empty { padding: 80px 0; color: #8d938d; text-align: center; font-size: 12px; }.drawer-scrim { position: fixed; z-index: 70; inset: 0; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .25s; }.drawer-scrim.open { opacity: 1; pointer-events: auto; }.toast { position: fixed; z-index: 100; left: 50%; bottom: 28px; max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: 4px; color: var(--ink); background: white; box-shadow: 0 8px 40px rgba(0,0,0,.3); transform: translate(-50%, 30px); opacity: 0; pointer-events: none; transition: .22s; font-size: 12px; }.toast.show { transform: translate(-50%, 0); opacity: 1; }
footer { min-height: 92px; display: flex; align-items: center; justify-content: space-between; padding: 0 4vw; color: #656c66; background: #070908; border-top: 1px solid rgba(255,255,255,.08); font: 9px ui-monospace, monospace; }

@media (max-width: 900px) {
  .topbar nav { left: 50%; }.notification-button { margin-left: 8px; }.theme-toggle { padding: 0 11px; }.theme-toggle span { display: none; }
  .chapter { padding: 0 7vw; }.chapter-two, .chapter-four { align-items: flex-start; text-align: left; }.market-tape { display: none; }.story-progress { right: 3vw; }
  .scanner-layout { grid-template-columns: 1fr; gap: 44px; }.scan-control-panel { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 38px; }
  .analysis-toolbar { flex-wrap: wrap; }.stock-search { width: 100%; }.dark-segmented { flex: 1; min-width: 200px; }.accent-button { flex: 1; }
  .chart-and-metrics { grid-template-columns: 1fr; }.chart-surface { padding-right: 0; border-right: 0; }.metric-rail { grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; border-top: 1px solid rgba(255,255,255,.14); }.metric { border-bottom: 0; border-right: 1px solid rgba(255,255,255,.14); padding: 18px 12px; }.metric strong { font-size: 20px; }
}
@media (max-width: 600px) {
  .topbar { height: 56px; padding: 0 18px; }.brand { font-size: 15px; }.brand-mark { width: 29px; height: 29px; }
  .chapter h1 { font-size: clamp(58px, 21vw, 92px); }.chapter h2 { font-size: 42px; }.chapter > p:last-child { max-width: 290px; font-size: 14px; }.scroll-cue { left: 7vw; }
  .workspace-band, .analysis-band { padding: 80px 0; }.section-shell { width: calc(100vw - 32px); }.section-heading { display: block; }.section-heading > p { margin-top: 16px; text-align: left; }.section-heading h2 { font-size: 44px; }
  .segmented .segment { font-size: 10px; }.results-toolbar { align-items: flex-start; }.strategy-chip { margin-top: 2px; }
  th, td { padding: 13px 10px; }.quote-line { flex-wrap: wrap; gap: 10px; }.quote-price { order: 3; width: 100%; margin: 10px 0 0; }.mode-badge { margin-left: auto; }.chart-surface canvas { height: 300px; }.chart-caption span:last-child { display: none; }
  .metric-rail { grid-template-columns: repeat(2, 1fr); }.metric { border-bottom: 1px solid rgba(255,255,255,.14); }.metric:nth-child(2n) { border-right: 0; }.subheading { display: block; }.subheading span { display: block; margin-top: 8px; line-height: 1.6; }.equity-section canvas { height: 180px; }
  .results-viewport { height: 430px; }
  footer { padding: 24px 18px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition-duration: .01ms !important; } }

body.light-theme { --ink: #f3f4ef; --ink-soft: #e8ebe5; --paper: #111512; --line: rgba(11,13,12,.16); }
body.light-theme .topbar { background: rgba(243,244,239,.84); border-color: rgba(11,13,12,.14); }
body.light-theme .brand { color: var(--paper); }
body.light-theme .topbar nav { border-color: rgba(11,13,12,.2); background: rgba(11,13,12,.06); }
body.light-theme .topbar nav a { color: #5e665f; }.light-theme .topbar nav a:first-child, body.light-theme .topbar nav a:hover { color: white; background: var(--paper); }
body.light-theme .theme-toggle { color: var(--paper); background: rgba(34,197,94,.16); }
body.light-theme .notification-button { color: var(--paper); }
body.light-theme .story-stage::after { background: linear-gradient(90deg, rgba(243,244,239,.84) 0%, rgba(243,244,239,.22) 55%, rgba(243,244,239,.62) 100%); }
body.light-theme .chapter .lead, body.light-theme .chapter > p:last-child { color: #505950; }
body.light-theme .market-tape { color: #5e665f; }
body.light-theme .workspace-band, body.light-theme .analysis-band { background: var(--ink); color: var(--paper); }
body.light-theme .section-heading, body.light-theme .chart-and-metrics, body.light-theme .dark-table th, body.light-theme .dark-table td { border-color: var(--line); }
body.light-theme .light-heading > p, body.light-theme .metric span, body.light-theme .subheading span, body.light-theme .chart-caption { color: #697269; }
body.light-theme .stock-search { border-color: var(--line); }.light-theme .stock-search input { color: var(--paper); }
body.light-theme .dark-segmented { border-color: var(--line); }.light-theme .dark-segmented .segment { color: #5e665f; border-color: var(--line); }.light-theme .dark-segmented .segment.active { background: var(--paper); color: var(--ink); }
body.light-theme .chart-surface, body.light-theme .metric { border-color: var(--line); }.light-theme .metric { color: var(--paper); }
body.light-theme .dark-table td { color: #3f4840; }

/* Dense workstation rhythm and clear interactive states. */
.workspace-band, .analysis-band { padding-top: 76px; padding-bottom: 86px; }
.analysis-band { padding-bottom: 88px; }
.scan-control-panel { border-right-color: color-mix(in srgb, var(--paper) 25%, transparent); }
.results-panel { padding: 22px 24px 24px; border: 1px solid color-mix(in srgb, var(--paper) 22%, transparent); border-radius: var(--radius); background: color-mix(in srgb, var(--paper) 6%, var(--ink)); }
.results-viewport { border: 1px solid color-mix(in srgb, var(--paper) 20%, transparent); border-radius: 4px; }
#scanLimit .segment { background: color-mix(in srgb, var(--ink) 88%, var(--paper)); }
#scanLimit .segment.active { background: var(--green); color: var(--ink); font-weight: 800; box-shadow: inset 0 0 0 2px rgba(11,13,12,.24); }
.empty-state { border: 1px solid color-mix(in srgb, var(--paper) 16%, transparent); background: color-mix(in srgb, var(--paper) 3%, var(--ink)); }
@media (max-width: 900px) { .scanner-layout { gap: 32px; }.scan-control-panel { padding-bottom: 32px; } }
@media (max-width: 600px) { .workspace-band, .analysis-band { padding-top: 62px; padding-bottom: 72px; }.results-panel { padding: 16px 12px 14px; } }

/* Compact help archive and contact line. */
.help-layout { display: block; margin-top: 34px; }
.faq-list { border-top: 1px solid color-mix(in srgb, var(--paper) 24%, transparent); }
.faq-row { min-height: 76px; display: grid; grid-template-columns: 58px minmax(150px, .6fr) minmax(0, 1.4fr) 20px; gap: 20px; align-items: center; border-bottom: 1px solid color-mix(in srgb, var(--paper) 17%, transparent); transition: background .2s, padding .2s; }
.faq-row:hover { padding-left: 10px; background: color-mix(in srgb, var(--paper) 5%, transparent); }
.faq-row h3 { margin: 0; font-size: 15px; font-weight: 650; }.faq-row p { margin: 0; color: #858d86; font-size: 12px; }.faq-row > svg { width: 16px; color: var(--green); opacity: .6; }.faq-index { color: var(--green); font: 11px ui-monospace, monospace; }
.contact-strip { display: flex; align-items: center; justify-content: space-between; margin-top: 42px; padding: 20px 0; border-top: 1px solid color-mix(in srgb, var(--paper) 24%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--paper) 17%, transparent); }.contact-label { display: block; color: var(--green); font: 10px ui-monospace, monospace; margin-bottom: 5px; }.contact-strip strong { font-size: 14px; }.contact-strip a { display: inline-flex; align-items: center; gap: 10px; color: var(--paper); text-decoration: none; font: 500 22px ui-monospace, monospace; }.contact-strip a:hover { color: var(--green); }.contact-strip a svg { width: 16px; }
body.light-theme .faq-row, body.light-theme .faq-list, body.light-theme .contact-strip { border-color: var(--line); } body.light-theme .faq-row p { color: #697269; }
.contact-links { display: flex; align-items: center; gap: 30px; }
.contact-strip .wechat { display: inline-flex; align-items: center; gap: 10px; color: var(--paper); font: 500 22px ui-monospace, monospace; }
.contact-strip .wechat svg { width: 16px; }
.disclaimer-text { margin-top: 24px; text-align: center; color: #858d86; font-size: 13px; line-height: 1.6; }
@media (max-width: 900px) { .help-layout { display: block; } }
@media (max-width: 600px) { .faq-row { min-height: 68px; grid-template-columns: 34px minmax(70px, .55fr) minmax(0, 1.45fr) 16px; gap: 9px; }.faq-row h3, .faq-row p { font-size: 11px; }.contact-strip a, .contact-strip .wechat { font-size: 15px; gap: 6px; }.contact-links { gap: 18px; } }

/* Scanner hierarchy: compact page rhythm and a visibly framed result window. */
.workspace-band, .analysis-band { padding-top: 76px; padding-bottom: 86px; }
.analysis-band { padding-bottom: 88px; }
.scan-control-panel { border-right-color: color-mix(in srgb, var(--paper) 25%, transparent); }
.results-panel { padding: 22px 24px 24px; border: 1px solid color-mix(in srgb, var(--paper) 22%, transparent); border-radius: var(--radius); background: color-mix(in srgb, var(--paper) 6%, var(--ink)); }
.results-viewport { border: 1px solid color-mix(in srgb, var(--paper) 20%, transparent); border-radius: 4px; }
#scanLimit .segment { background: color-mix(in srgb, var(--ink) 88%, var(--paper)); }
#scanLimit .segment.active { background: var(--green); color: var(--ink); font-weight: 800; box-shadow: inset 0 0 0 2px rgba(11,13,12,.24); }
.empty-state { border: 1px solid color-mix(in srgb, var(--paper) 16%, transparent); background: color-mix(in srgb, var(--paper) 3%, var(--ink)); }

.help-band { background: var(--ink); color: var(--paper); padding: 86px 0 110px; scroll-margin-top: 60px; }
.help-layout { display: block; margin-top: 48px; }
.help-placeholder { display: flex; align-items: center; gap: 18px; min-height: 150px; padding: 28px 0; border-bottom: 1px solid color-mix(in srgb, var(--paper) 17%, transparent); }.help-placeholder svg { width: 34px; height: 34px; color: var(--green); stroke-width: 1.2; }.help-placeholder h3 { margin: 0 0 8px; font-size: 17px; }.help-placeholder p { margin: 0; color: #858d86; font-size: 12px; line-height: 1.8; }
.faq-item { display: grid; grid-template-columns: 42px 1fr; gap: 20px; padding: 24px 0; border-bottom: 1px solid color-mix(in srgb, var(--paper) 17%, transparent); }
.faq-item > span { color: var(--green); font: 11px ui-monospace, monospace; padding-top: 4px; }.faq-item h3 { margin: 0 0 8px; font-size: 17px; }.faq-item p { margin: 0; max-width: 560px; color: #858d86; font-size: 12px; line-height: 1.8; }
.feedback-form { max-width: 680px; margin-top: 38px; padding: 24px; border: 1px solid color-mix(in srgb, var(--paper) 20%, transparent); border-radius: var(--radius); background: color-mix(in srgb, var(--paper) 5%, var(--ink)); }.form-kicker { color: var(--green); font: 600 10px ui-monospace, monospace; margin-bottom: 28px; }.feedback-form label { display: block; margin-top: 18px; color: #858d86; font-size: 11px; }.feedback-form select, .feedback-form input, .feedback-form textarea { width: 100%; margin-top: 8px; border: 1px solid color-mix(in srgb, var(--paper) 22%, transparent); border-radius: 3px; outline: 0; color: var(--paper); background: color-mix(in srgb, var(--ink) 86%, var(--paper)); padding: 12px; font-size: 12px; }.feedback-form textarea { resize: vertical; min-height: 120px; line-height: 1.6; }.feedback-form .accent-button { width: 100%; margin-top: 18px; }.form-status { min-height: 16px; margin: 12px 0 0; color: var(--green); font-size: 11px; }
body.light-theme .faq-item, body.light-theme .feedback-form, body.light-theme .feedback-form select, body.light-theme .feedback-form input, body.light-theme .feedback-form textarea { border-color: var(--line); }
body.light-theme .faq-item p, body.light-theme .feedback-form label { color: #697269; }
body.light-theme .feedback-form select, body.light-theme .feedback-form input, body.light-theme .feedback-form textarea { background: color-mix(in srgb, var(--ink) 75%, var(--paper)); }

@media (max-width: 900px) { .help-layout { display: block; } }
@media (max-width: 600px) { .topbar nav a { padding: 8px 9px; font-size: 10px; }.workspace-band, .analysis-band { padding-top: 62px; padding-bottom: 72px; }.help-band { padding: 72px 0 86px; }.results-panel { padding: 16px 12px 14px; } }