:root {
  color-scheme: dark;
  --ink: #edf7ff;
  --muted: #7891ad;
  --line: #173857;
  --panel: #0a2643;
  --mint: #53ebc2;
  --red: #ff696d;
  --green: #43d68f;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #061020; }
body {
  min-height: 100%; margin: 0; background: #061020; color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased; overscroll-behavior-y: none;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }

.app-shell {
  min-height: 100dvh; width: min(100%, 980px); margin: 0 auto;
  padding: max(15px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(26px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 14% -4%, rgba(20, 180, 226, .19), transparent 35%),
    radial-gradient(circle at 91% 4%, rgba(54, 237, 181, .12), transparent 29%),
    linear-gradient(180deg, #07172e 0%, #071326 46%, #050d1a 100%);
}
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand-lockup { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-icon { width: 48px; height: 48px; border-radius: 15px; box-shadow: 0 8px 28px rgba(20, 238, 191, .16); }
.brand-lockup h1 { margin: 0; font-size: 22px; letter-spacing: -.03em; }
.brand-lockup p { margin: 3px 0 0; color: #7890ad; font-size: 9px; letter-spacing: .1em; }
.sync-pill { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; border: 1px solid #1b3c5f; border-radius: 999px; padding: 7px 10px; background: rgba(7, 27, 51, .83); color: #9eb2c9; font-size: 11px; }
.sync-pill span { width: 7px; height: 7px; border-radius: 50%; background: #73869e; }
.sync-pill b { font-weight: 600; }
.sync-pill.complete span { background: #39e5b5; box-shadow: 0 0 12px #39e5b5; }
.sync-pill.running span { background: #56b8ff; box-shadow: 0 0 12px #56b8ff; }
.sync-pill.failed span { background: #ff6b6b; box-shadow: 0 0 12px #ff6b6b; }

.account-strip { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 1px 12px; color: var(--muted); font-size: 11px; }
.account-strip strong { color: #a9bdd1; font-weight: 600; }
.top-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; width: 100%; padding: 4px; border: 1px solid #183858; border-radius: 16px; background: rgba(5, 21, 40, .86); }
.tab-button { min-width: 0; height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px; border: 0; border-radius: 12px; background: transparent; color: #7891ad; font-size: 10px; cursor: pointer; }
.tab-button span { height: 17px; font-size: 17px; line-height: 1; }
.tab-button.active { color: #dffdf5; background: linear-gradient(145deg, rgba(31, 128, 138, .55), rgba(14, 67, 91, .62)); box-shadow: inset 0 0 0 1px rgba(64, 232, 187, .21); }
.tab-page { display: none; margin-top: 13px; }
.tab-page.active { display: block; }

.search-card, .chart-card, .panel-card, .prediction-card, .reason-card, .record-list article, .status-grid > div {
  border: 1px solid var(--line); background: linear-gradient(155deg, rgba(12, 37, 64, .96), rgba(6, 24, 44, .96)); box-shadow: 0 14px 32px rgba(0, 0, 0, .16);
}
.search-card { position: relative; z-index: 10; padding: 16px; border-radius: 20px; }
.section-kicker { margin-bottom: 12px; color: #80d8c4; font-size: 11px; }
.search-row { display: flex; gap: 8px; }
.search-input-wrap { flex: 1; min-width: 0; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid #275177; border-radius: 13px; background: #071a31; color: #6d89a7; }
.search-input-wrap:focus-within { border-color: #32c9aa; box-shadow: 0 0 0 3px rgba(50, 201, 170, .12); }
.search-input-wrap input { width: 100%; min-width: 0; height: 40px; padding: 0; border: 0; outline: 0; background: transparent; color: #eef8ff; }
.search-input-wrap input::placeholder { color: #607791; }
.primary-button { min-height: 44px; padding: 0 17px; border: 1px solid #37ceb0; border-radius: 13px; background: linear-gradient(135deg, #18a994, #177fa0); color: #fff; cursor: pointer; }
.primary-button:disabled { opacity: .58; cursor: wait; }
.suggestion-list { position: absolute; top: 91px; left: 16px; right: 16px; overflow: hidden; border: 1px solid #275177; border-radius: 14px; background: #071a30; box-shadow: 0 18px 38px rgba(0,0,0,.45); }
.suggestion-list button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 13px; border: 0; border-bottom: 1px solid #123552; background: transparent; color: #edf6ff; text-align: left; cursor: pointer; }
.suggestion-list button:last-child { border-bottom: 0; }
.suggestion-list strong { display: block; font-size: 13px; }
.suggestion-list small { display: block; margin-top: 2px; color: #718aa5; font-size: 9px; }
.suggestion-list em { color: #86a0ba; font-size: 11px; font-style: normal; }
.inline-error { margin-top: 11px; color: #ffb7b7; font-size: 11px; line-height: 1.5; }
.empty-sync { min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: #7290ad; text-align: center; }
.empty-sync strong { color: #c7d8e9; font-size: 14px; }
.empty-sync span { max-width: 310px; font-size: 11px; line-height: 1.6; }
.empty-symbol { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 12px; background: #102e4a; color: #59d8ba; font-size: 20px; }

.stock-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 17px 2px 10px; }
.stock-heading p { margin: 0 0 4px; color: #6f8aa6; font-size: 10px; }
.stock-heading h2 { margin: 0; font-size: 21px; letter-spacing: -.02em; }
.stock-heading h2 small { margin-left: 8px; color: #7892ad; font-size: 12px; font-weight: 500; }
.data-badge { border: 1px solid #25695e; border-radius: 999px; padding: 5px 8px; color: #6fe6c5; font-size: 9px; }
.horizon-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.prediction-card { min-width: 0; padding: 14px; border-radius: 18px; overflow: hidden; }
.prediction-title { display: flex; align-items: baseline; gap: 5px; }
.prediction-title span { color: #6ee8c7; font-size: 17px; font-weight: 800; }
.prediction-title small { color: #7890aa; font-size: 9px; }
.probability-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 13px; }
.probability-row > div { min-width: 0; }
.probability-row small { display: block; margin-bottom: 3px; color: #6f88a3; font-size: 9px; }
.probability-row strong { display: block; overflow: hidden; font-size: clamp(16px, 4.8vw, 24px); letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
.up { color: var(--red); } .down { color: var(--green); }
.confidence-line { margin-top: 13px; }
.confidence-line label { display: block; margin-bottom: 6px; color: #91a5ba; font-size: 9px; }
.progress { height: 6px; overflow: hidden; border-radius: 99px; background: #173b55; }
.progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1aa287, #51ecc1); transition: width .25s ease; }
.price-range { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; color: #768da7; font-size: 8px; }

.chart-card { margin-top: 10px; padding: 14px 9px 11px; border-radius: 18px; }
.card-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 6px 9px; }
.card-title > div { display: flex; align-items: center; gap: 7px; }
.card-title strong { font-size: 13px; }
.card-title small { color: #7189a2; font-size: 8px; }
.card-glyph { color: #62e6c3; font-size: 18px; }
.chart-wrap { width: 100%; min-height: 220px; }
.chart-wrap svg { display: block; width: 100%; height: auto; }
.chart-note { margin: 4px 7px 0; color: #667f99; font-size: 8px; line-height: 1.5; }
.reason-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.reason-card { min-width: 0; padding: 13px; border-radius: 17px; }
.reason-card h3 { margin: 0 0 8px; font-size: 12px; }
.reason-positive h3 { color: #ff7d80; } .reason-risk h3 { color: #54df99; }
.reason-card ul { margin: 0; padding-left: 16px; color: #9cb0c4; font-size: 9px; line-height: 1.7; }
.reason-card p { margin: 0; color: #6e859f; font-size: 9px; line-height: 1.6; }

.sentiment-hero { display: flex; align-items: center; gap: 18px; min-height: 176px; padding: 18px; border: 1px solid #1a4564; border-radius: 22px; background: radial-gradient(circle at 24% 45%, rgba(48, 238, 182, .12), transparent 42%), linear-gradient(135deg, #0b2a49, #071a31); }
.sentiment-ring { --score: 0deg; width: 118px; height: 118px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#48e8ba var(--score), #143b54 0); box-shadow: 0 0 35px rgba(63, 226, 181, .13); }
.sentiment-ring::before { content: ""; grid-area: 1/1; width: 94px; height: 94px; border-radius: 50%; background: #08213a; }
.sentiment-ring > div { z-index: 1; grid-area: 1/1; text-align: center; }
.sentiment-ring strong { display: block; color: #57edc2; font-size: 30px; }
.sentiment-ring span { color: #7590aa; font-size: 9px; }
.sentiment-hero > div:last-child p { margin: 0 0 5px; color: #7e9bb5; font-size: 10px; }
.sentiment-hero h2 { margin: 0 0 7px; font-size: 22px; }
.sentiment-hero > div:last-child span { color: #a0b5c8; font-size: 11px; }
.panel-card { margin-top: 10px; padding: 14px; border-radius: 18px; }
.probability-bars { display: grid; gap: 13px; }
.probability-bars > div > div:first-child { display: flex; justify-content: space-between; margin-bottom: 6px; color: #98aec2; font-size: 10px; }
.layer-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.layer-grid > div { display: flex; justify-content: space-between; align-items: center; padding: 11px; border-radius: 12px; background: rgba(9, 29, 50, .8); }
.layer-grid span { color: #7891ab; font-size: 10px; }
.layer-grid strong { color: #dcebf8; font-size: 12px; }
.empty-mini { grid-column: 1 / -1; padding: 24px; color: #6f89a4; text-align: center; font-size: 11px; }
.disclaimer { color: #59738e; font-size: 9px; text-align: center; }

.records-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 5px 2px 10px; }
.records-head p { margin: 0 0 3px; color: #6f8aa6; font-size: 9px; }
.records-head h2 { margin: 0; font-size: 19px; }
.outline-button, .wide-button { border: 1px solid #276273; border-radius: 11px; background: #0a2c43; color: #6ce6c6; cursor: pointer; }
.outline-button { padding: 9px 11px; font-size: 10px; }
.legend { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; }
.legend span { padding: 4px 8px; border-radius: 99px; font-size: 8px; }
.legend-red { background: #5a2b34; color: #ffadb0; } .legend-green { background: #174c3a; color: #76e3ae; }
.legend-yellow { background: #51461d; color: #f6d96b; } .legend-gray { background: #293848; color: #a7b7c8; }
.record-list { display: grid; gap: 9px; }
.record-list article { padding: 13px; border-radius: 16px; }
.record-list article.record-match { border-color: #7e353e; background: linear-gradient(155deg, rgba(84, 32, 42, .8), rgba(31, 22, 35, .93)); }
.record-list article.record-mismatch { border-color: #23654e; background: linear-gradient(155deg, rgba(22, 73, 54, .75), rgba(12, 34, 36, .94)); }
.record-list article.record-low { border-color: #665d25; background: linear-gradient(155deg, rgba(74, 63, 25, .75), rgba(31, 31, 29, .94)); }
.record-list article.record-intraday { border-color: #44556a; background: linear-gradient(155deg, rgba(45, 60, 78, .75), rgba(22, 30, 42, .94)); }
.record-title { display: flex; justify-content: space-between; gap: 10px; }
.record-title strong { display: block; font-size: 13px; }
.record-title span { color: #8298ae; font-size: 9px; }
.record-title b { font-size: 10px; }
.record-values { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 7px; margin-top: 12px; }
.record-values span { min-width: 0; overflow: hidden; font-size: 11px; text-overflow: ellipsis; }
.record-values small { display: block; margin-bottom: 2px; color: #7188a1; font-size: 7px; }
.record-date { margin-top: 10px; color: #657c96; font-size: 8px; }

.status-summary { display: flex; align-items: center; gap: 13px; min-height: 118px; padding: 18px; border: 1px solid #1a4564; border-radius: 20px; background: linear-gradient(145deg, #0a2948, #071a30); }
.status-symbol { width: 54px; height: 54px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 16px; background: #123b54; color: #5fe7c4; font-size: 28px; }
.status-symbol.failed { color: #ff7a7d; background: #492938; }
.status-summary p { margin: 0 0 4px; color: #7d96af; font-size: 9px; }
.status-summary h2 { margin: 0 0 5px; font-size: 15px; line-height: 1.35; }
.status-summary span { color: #7188a2; font-size: 8px; }
#update-progress { margin: 10px 0; }
.status-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin-top: 10px; }
.status-grid > div { min-height: 74px; display: flex; flex-direction: column; justify-content: center; padding: 12px; border-radius: 15px; }
.status-grid span { color: #6d87a1; font-size: 8px; }
.status-grid strong { margin-top: 5px; color: #dce9f6; font-size: 11px; overflow-wrap: anywhere; }
.security-card { display: flex; gap: 11px; margin-top: 10px; padding: 14px; border: 1px solid #173857; border-radius: 16px; background: linear-gradient(155deg, rgba(12, 37, 64, .95), rgba(6, 24, 44, .95)); color: #61e1c0; }
.security-card > span { font-size: 22px; }
.security-card strong { display: block; margin-bottom: 3px; color: #d9eaf6; font-size: 11px; }
.security-card small { display: block; color: #7690aa; font-size: 9px; line-height: 1.55; }
.wide-button { width: 100%; margin-top: 10px; padding: 11px; color: #9ab0c5; }
.app-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 12px 3px 4px; color: #4f6984; font-size: 8px; }
.app-footer button { padding: 0; border: 0; background: transparent; color: #6d89a5; font-size: 8px; }

.login-body { display: grid; min-height: 100dvh; place-items: center; padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom)); background: radial-gradient(circle at 50% -10%, rgba(28, 190, 225, .18), transparent 40%), radial-gradient(circle at 88% 90%, rgba(47, 226, 173, .11), transparent 35%), #061226; }
.login-shell { width: min(100%, 420px); }
.login-brand { text-align: center; }
.login-brand img { border-radius: 25px; box-shadow: 0 18px 46px rgba(31, 230, 184, .17); }
.login-brand p { margin: 15px 0 5px; color: #58d8ba; font-size: 9px; letter-spacing: .2em; }
.login-brand h1 { margin: 0; font-size: 27px; letter-spacing: -.04em; }
.login-brand span { display: block; margin-top: 8px; color: #7690aa; font-size: 11px; }
.login-card { display: grid; gap: 15px; margin-top: 26px; padding: 20px; border: 1px solid #1d4464; border-radius: 22px; background: linear-gradient(155deg, rgba(12, 38, 66, .96), rgba(6, 23, 43, .97)); box-shadow: 0 22px 50px rgba(0,0,0,.28); }
.login-card label span { display: block; margin: 0 0 7px 2px; color: #88a1b9; font-size: 10px; }
.login-card input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid #275177; border-radius: 13px; outline: 0; background: #061a31; color: #eff8ff; }
.login-card input:focus { border-color: #39c7a9; box-shadow: 0 0 0 3px rgba(50,201,170,.12); }
.login-button { width: 100%; margin-top: 2px; }
.login-note { max-width: 330px; margin: 16px auto 0; color: #526d88; font-size: 9px; line-height: 1.65; text-align: center; }

@media (min-width: 700px) {
  .app-shell { padding-left: 28px; padding-right: 28px; }
  .tab-button { flex-direction: row; font-size: 11px; }
  .search-card { padding: 20px; }
  .suggestion-list { left: 20px; right: 20px; top: 95px; }
  .horizon-grid { gap: 14px; }
  .prediction-card { padding: 18px; }
  .price-range { flex-direction: row; justify-content: space-between; font-size: 9px; }
  .status-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}