:root {
    --blue: #1594d0;
    --blue-dark: #087fb9;
    --red: #d7373f;
    --green: #22b985;
    --orange: #ff831c;
    --yellow: #f7b714;
    --text: #32373c;
    --muted: #8a9299;
    --line: #e2e5e8;
    --bg: #f2f3f6;
}
[data-countdown].is-updating { min-width: 0; font-size: 10px !important; letter-spacing: 0; white-space: nowrap; }
[data-countdown].is-updating .updating-dots { width: 1.5em; display: inline-block; text-align: left; }

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-width: 320px; color: var(--text); background: var(--bg); font-family: "Microsoft YaHei", "PingFang SC", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

.m-header { position: relative; height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-bottom: 1px solid #e2e4e6; background: #fff; }
.m-brand { display: flex; align-items: center; gap: 8px; height: 100%; color: #075d89; }
.m-brand-mark { display: grid; width: 36px; height: 36px; overflow: hidden; place-items: center; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(7,84,126,.14); }
.m-brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.m-brand strong { font-size: 17px; letter-spacing: .02em; }
.brand-logo { display: block; width: 116px; height: 36px; }
.m-more { position: relative; z-index: 20; }
.m-more summary { width: 32px; height: 35px; display: grid; align-content: center; gap: 4px; padding: 6px 4px; cursor: pointer; list-style: none; }
.m-more summary::-webkit-details-marker { display: none; }
.m-more summary i { display: block; height: 2px; border-radius: 2px; background: #a0a3a6; }
.m-more div { position: absolute; top: 38px; right: 0; width: 105px; overflow: hidden; border: 1px solid #d9dde0; background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,.12); }
.m-more div a { display: block; padding: 11px 13px; border-bottom: 1px solid #eee; color: #555; font-size: 12px; }
.m-more div a:last-child { border-bottom: 0; }

.m-market-tabs { display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; }
.top-market-tabs { height: 42px; margin: 0; border-bottom: 1px solid #dfe2e4; }
.m-market-tabs button, .m-market-tabs a, .m-segment button { border: 0; color: #444; background: #fff; cursor: pointer; }
.top-market-tabs button, .top-market-tabs a { position: relative; display: grid; place-items: center; padding: 0 2px; border-right: 1px solid #e2e4e6; font-size: 14px; letter-spacing: .02em; }
.top-market-tabs button:last-child, .top-market-tabs a:last-child { border-right: 0; }
.top-market-tabs .is-active { color: #078bc9; font-weight: 600; }
.top-market-tabs .is-active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; content: ""; background: #159bd7; }

.m-feature-nav { height: 102px; display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid #e0e3e5; background: #fff; }
.m-feature-nav a { position: relative; display: grid; justify-items: center; align-content: center; gap: 8px; color: #3f4448; font-size: 11px; }
.m-feature-nav a > i { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; color: #fff; font-style: normal; box-shadow: inset 0 -2px 0 rgba(0,0,0,.08), 0 2px 5px rgba(32,52,68,.08); }
.m-feature-nav a > i svg { width: 29px; height: 29px; overflow: visible; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.m-feature-nav a > i.ico-guide svg circle { fill: none; }
.m-feature-nav a > i.ico-guide svg circle { fill: #fff; stroke: none; }
.m-feature-nav a.is-active::after { position: absolute; bottom: 0; width: 24px; height: 2px; content: ""; background: var(--blue); }
.ico-guide { background: #f7b711; }
.ico-forecast { background: #27bd83; }
.ico-trends { background: #f45564; }
.ico-intervals { background: #159edc; }
.ico-history { background: #ff831f; }

.m-main { width: 100%; padding: 12px 0 0; }
.m-market { display: none; border-top: 1px solid #e0e3e5; border-bottom: 1px solid #d9dde0; background: #fff; }
.m-market.is-active { display: block; }
.m-market-title { position: relative; min-height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px 0 17px; border-bottom: 2px solid var(--blue); background: #fff; }
.m-market-title::before { position: absolute; top: 13px; bottom: 13px; left: 9px; width: 3px; border-radius: 3px; content: ""; background: var(--blue); }
.m-market-title h1 { margin: 0; color: #333a3f; font-size: 15px; font-weight: 600; }
.m-market-title p { margin: 0; color: #888; font-size: 10px; }
.m-market-title p b { min-width: 22px; display: inline-block; color: #ef5960; font-size: 13px; font-variant-numeric: tabular-nums; text-align: center; }
.m-market-title.cyan { border-bottom-color: var(--green); }.m-market-title.cyan::before { background: var(--green); }
.m-market-title.amber { border-bottom-color: var(--orange); }.m-market-title.amber::before { background: var(--orange); }
.m-latest { padding: 13px 10px 14px; text-align: center; background: linear-gradient(#fff, #fcfdfe); }
.m-latest > p { display: flex; justify-content: center; gap: 14px; margin: 0 0 11px; color: #9aa0a5; font-size: 10px; }
.m-latest > p strong { color: #555; font-weight: 500; }
.m-equation { display: flex; align-items: center; justify-content: center; gap: 7px; }
.m-equation > span, .number-pill { display: grid; width: 34px; height: 34px; place-items: center; border: 2px solid rgba(255,255,255,.85); border-radius: 50%; color: #fff; background: #249bdd; box-shadow: 0 1px 3px rgba(23,56,77,.18); font-size: 14px; font-weight: 700; }
.m-equation > span:nth-of-type(2) { background: #34b88a; }
.m-equation > span:nth-of-type(3) { background: #ff9b2f; }
.m-equation i { color: #999; font-size: 14px; font-style: normal; }
.m-total, .total-pill { display: grid; width: 36px; height: 36px; place-items: center; border: 2px solid rgba(255,255,255,.85); border-radius: 50%; color: #fff; box-shadow: 0 1px 3px rgba(23,56,77,.18); font-size: 14px; }
.blue { background: #168fce; }.green { background: #28ae79; }.orange { background: #ef8522; }
.m-tags { display: flex; justify-content: center; gap: 7px; margin-top: 9px; }
.m-tags span { padding: 2px 7px; border: 1px solid #e3e5e7; border-radius: 2px; color: #777; background: #fafafa; font-size: 9px; }
.m-result-head, .m-result-row { display: grid; grid-template-columns: 28% 31% 41%; align-items: center; text-align: center; }
.m-result-head { min-height: 36px; border-top: 1px solid #e3e6e8; border-bottom: 1px solid #d9dde0; color: #59636a; background: #f3f5f6; font-size: 11px; font-weight: 600; }
.m-result-row { min-height: 40px; border-bottom: 1px solid #eaedef; color: #687078; background: #fff; font-size: 10px; font-variant-numeric: tabular-nums; }
.m-result-row:nth-child(odd) { background: #fbfcfc; }
.m-result-row:last-child { border-bottom: 0; }
.m-result-row > span { min-width: 0; padding: 5px 2px; white-space: nowrap; }
.m-result-row > span:last-child { display: inline-flex; align-items: center; justify-content: center; gap: 3px; }
.m-dot { display: inline-grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: #fff; font-size: 9px; }

.m-page-card { border-top: 1px solid #dadde0; border-bottom: 1px solid #dadde0; background: #fff; }
.m-page-title { padding: 14px 13px 12px; border-bottom: 2px solid var(--blue); }
.m-page-title small { color: #aaa; font-size: 8px; font-weight: 700; letter-spacing: .15em; }
.m-page-title h1 { margin: 3px 0 0; color: #3e4448; font-size: 18px; font-weight: 500; }
.m-page-title p { margin: 5px 0 0; color: #999; font-size: 10px; }
.m-rule { display: grid; grid-template-columns: 37px 1fr; gap: 10px; padding: 14px 13px; border-bottom: 1px solid #eceeef; }
.m-rule > b { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; color: #fff; background: var(--blue); font-size: 10px; }
.m-rule h2 { margin: 0 0 4px; color: #444; font-size: 13px; }.m-rule p { margin: 0; color: #777; font-size: 10px; line-height: 1.7; }
.m-tip-box { margin: 12px; padding: 10px 11px; border-left: 3px solid var(--blue); color: #617786; background: #f2f8fb; font-size: 10px; line-height: 1.65; }
.m-tip-box.warning { border-color: #efa526; color: #7d6c50; background: #fff9ec; }
.m-analysis { margin: 0 12px; padding: 13px 2px; border-bottom: 1px solid #e8eaec; }
.m-analysis > div:first-child { display: inline-block; }.m-analysis h2 { margin: 0 0 3px; font-size: 13px; font-weight: 500; }.m-analysis small { color: #999; font-size: 9px; }.m-analysis > strong { float: right; color: var(--blue); font-size: 24px; }
.m-analysis-grid { clear: both; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 11px; padding-top: 10px; background: #f7f8f9; }.m-analysis-grid span { padding-bottom: 9px; color: #92989d; font-size: 9px; text-align: center; }.m-analysis-grid span + span { border-left: 1px solid #e1e4e6; }.m-analysis-grid b { display: block; margin-top: 3px; color: #444; font-size: 12px; }
.m-segment { display: grid; grid-template-columns: repeat(3, 1fr); height: 38px; margin: 12px; border: 1px solid #dadddf; }.m-segment button { border-right: 1px solid #ddd; font-size: 11px; }.m-segment button:last-child { border-right: 0; }.m-segment button.is-active { color: #fff; background: var(--blue); }
.m-chart { height: 230px; margin: 12px; padding: 10px; border: 1px solid #dfe2e4; background: repeating-linear-gradient(to bottom, #fff 0, #fff calc(33.333% - 1px), #e6e8e9 33.333%, #e6e8e9 calc(33.333% + 1px)); }.m-chart svg { width: 100%; height: 100%; overflow: visible; }
.m-chart-summary { display: grid; grid-template-columns: repeat(3, 1fr); margin: 12px; padding: 10px 3px; background: #f3f4f5; }.m-chart-summary span { color: #92989d; font-size: 9px; text-align: center; }.m-chart-summary span + span { border-left: 1px solid #dfe2e4; }.m-chart-summary b { display: block; margin-top: 3px; color: #444; font-size: 12px; }
.m-interval-list { padding: 13px; }.interval-row { display: grid; grid-template-columns: 30px 1fr 68px; gap: 8px; align-items: center; margin-bottom: 11px; }.interval-number { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: #fff; background: var(--blue); font-size: 10px; }.interval-track { height: 6px; overflow: hidden; background: #eceeef; }.interval-track i { display: block; height: 100%; background: var(--blue); }.interval-row > span:last-child { color: #888; font-size: 9px; text-align: right; }
.m-query { padding: 13px; }.query-input { display: flex; gap: 6px; }.query-input input { min-width: 0; height: 40px; flex: 1; padding: 0 10px; border: 1px solid #d5d9dc; border-radius: 0; outline: 0; background: #fff; }.query-input button { width: 68px; border: 0; color: #fff; background: var(--blue); }
.m-quick { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }.m-quick button { padding: 5px 7px; border: 1px solid #d9dcde; color: #777; background: #fff; font-size: 8px; }
.query-result { min-height: 220px; display: grid; place-items: center; margin: 0 13px 13px; padding: 17px; border: 1px solid #dfe2e4; background: #fafafa; }.empty-state { color: #999; text-align: center; }.empty-state > span { font-size: 33px; }.empty-state h3 { margin: 7px 0 4px; color: #555; font-size: 13px; }.empty-state p { margin: 0; font-size: 9px; }
.query-found { width: 100%; }.found-market { color: var(--blue); font-size: 9px; font-weight: 700; }.query-found h3 { margin: 5px 0 3px; font-size: 18px; }.query-found > p { margin: 0; color: #999; font-size: 9px; }.result-row { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 18px 0; }.result-row i { color: #999; font-style: normal; }
.found-meta { display: grid; grid-template-columns: repeat(3, 1fr); padding: 10px 3px; background: #f0f1f2; }.found-meta span { text-align: center; }.found-meta span + span { border-left: 1px solid #dadddf; }.found-meta small { display: block; color: #999; font-size: 8px; }.found-meta b { display: block; margin-top: 3px; font-size: 11px; }
.history-tabs { height: 38px; margin: 12px; border: 1px solid #dadddf; }.history-tabs button { border-right: 1px solid #ddd; font-size: 11px; }.history-tabs button:last-child { border-right: 0; }.history-tabs button.is-active { color: #fff; background: var(--blue); }
.m-history-panel { display: none; margin: 0 12px 12px; border: 1px solid #dfe2e4; }.m-history-panel.is-active { display: block; }

.m-footer { margin-top: 8px; padding: 18px 12px max(22px, env(safe-area-inset-bottom)); border-top: 7px solid #f0f2f4; color: #9aa2a8; background: #fff; text-align: center; }
.m-footer nav { display: flex; align-items: center; justify-content: center; gap: 14px; }
.m-footer nav a { color: #557080; font-size: 10px; }
.m-footer nav i { width: 1px; height: 10px; background: #d8dee2; }
.m-footer > p { margin: 13px 0 4px; color: #717d84; font-size: 9px; }
.m-footer > small { color: #a1a9ae; font-size: 8px; line-height: 1.6; }

@media (min-width: 641px) { body { max-width: 640px; margin-inline: auto; border-inline: 1px solid #d8dcdf; box-shadow: 0 0 25px rgba(0,0,0,.06); } }
@media (max-width: 359px) { .m-feature-nav a > i { width: 36px; height: 36px; font-size: 20px; }.m-feature-nav a { font-size: 10px; }.top-market-tabs button, .top-market-tabs a { font-size: 14px; } }

/* Independent mobile tool pages */
.m-tool-header { position: relative; height: 43px; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; border-bottom: 1px solid #d9dde0; background: #fff; }
.m-tool-header h1 { margin: 0; color: #2f3438; font-size: 16px; font-weight: 500; text-align: center; }
.m-back { display: grid; height: 43px; place-items: center; color: #92989d; font-family: Arial, sans-serif; font-size: 31px; font-weight: 200; line-height: 1; }
.m-calendar { display: grid; height: 43px; place-items: center; padding: 0; border: 0; cursor: pointer; background: transparent; }
.m-calendar svg { width: 27px; height: 27px; fill: none; stroke: #1496d1; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.m-date-popover { position: fixed; z-index: 80; inset: 0; display: grid; place-items: start center; padding: 53px 12px 12px; }
.m-date-popover[hidden] { display: none; }
.m-date-backdrop { position: absolute; inset: 0; border: 0; background: rgba(17, 31, 42, .36); backdrop-filter: blur(1px); }
.m-date-dialog { position: relative; width: min(100%, 370px); overflow: hidden; border: 1px solid #d4e0e7; border-radius: 8px; background: #fff; box-shadow: 0 12px 35px rgba(24, 53, 70, .24); }
.m-date-dialog > header { height: 48px; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; border-bottom: 1px solid #e4eaee; background: #f7fafc; }
.m-date-dialog > header strong { color: #354b5a; font-size: 14px; font-weight: 600; text-align: center; }
.m-date-dialog > header button { height: 48px; border: 0; color: #168fcf; background: transparent; font-size: 24px; }
.m-date-dialog > header button:disabled { color: #c9d1d6; }
.m-date-weekdays, .m-date-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.m-date-weekdays { padding: 10px 10px 4px; color: #96a3ab; font-size: 9px; }
.m-date-grid { gap: 4px; padding: 5px 10px 12px; }
.m-date-grid > * { height: 35px; display: grid; place-items: center; border-radius: 50%; font-size: 11px; }
.m-date-grid a { color: #1879ad; background: #eef8fd; font-weight: 600; }
.m-date-grid a.is-selected { color: #fff; background: #168fd0; box-shadow: 0 3px 9px rgba(22, 143, 208, .28); }
.m-date-grid .is-disabled { color: #c5cdd2; }
.m-date-grid .is-empty { visibility: hidden; }
.m-date-dialog > footer { min-height: 47px; display: flex; align-items: center; justify-content: flex-end; gap: 18px; padding: 0 15px; border-top: 1px solid #e5eaed; background: #fafcfd; }
.m-date-dialog > footer a, .m-date-dialog > footer button { padding: 7px 2px; border: 0; color: #168fcf; background: transparent; font-size: 10px; }
body:not([data-page="home"]) { background: #fff; }
body:not([data-page="home"]) .m-main { padding: 0; background: #fff; }
.m-tool-page { min-height: calc(100vh - 43px); background: #fff; }
.m-subbar { min-height: 36px; display: flex; align-items: center; padding: 0 11px; border-bottom: 1px solid #e2e9ed; color: #3e515d; background: #eef8fe; font-size: 12px; }
.m-plain-note { margin: 12px 10px; padding: 9px 10px; border-left: 3px solid #1598d3; color: #61717b; background: #f1f8fc; font-size: 10px; line-height: 1.7; }
.m-plain-note.warning { border-color: #ef9e25; color: #78684f; background: #fff9ed; }

.m-guide-page { padding: 0 9px 24px; color: #4f555a; background: #fff; }
.m-guide-page section { padding: 11px 0 8px; border-bottom: 1px solid #edf0f2; }
.m-guide-page h2 { display: flex; align-items: center; gap: 5px; margin: 0 0 7px; color: #353b40; font-size: 13px; font-weight: 500; }
.m-guide-page h2 span { color: #1596d0; }
.m-guide-page h2 i { display: grid; width: 21px; height: 21px; place-items: center; border-radius: 50%; color: #fff; background: #1596d0; font-size: 11px; font-style: normal; }
.m-guide-page p { margin: 0 0 4px; font-size: 11px; line-height: 1.75; }
.m-guide-page p b { color: #3e464c; }.m-guide-page p em { color: #1496d1; font-style: normal; font-weight: 700; }
.m-guide-page .guide-result { color: #d84343; font-weight: 700; }
.m-guide-page ol { margin: 0; padding-left: 19px; font-size: 11px; line-height: 1.9; }
.m-guide-page .guide-market-tabs { margin: 0 -9px; }
.m-guide-page .guide-example { padding-bottom: 12px; }
.example-numbers { padding: 7px 8px; border-radius: 4px; color: #647680; background: #f2f7fa; word-break: break-all; }
.guide-zone { margin-top: 8px; padding: 9px; border: 1px solid #e3ebef; border-radius: 5px; background: #fbfdfe; }
.guide-zone h3 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 5px; color: #168fc8; font-size: 11px; }.guide-zone h3 small { color: #8d989e; font-size: 8px; font-weight: 400; }
.guide-zone p { margin-bottom: 2px; }.guide-zone > strong { color: #e44953; font-size: 10px; }
.guide-definitions { margin-top: 7px; overflow: hidden; border: 1px solid #e5eaed; border-radius: 5px; }.guide-definitions p { display: grid; grid-template-columns: 66px 1fr; margin: 0; padding: 7px 8px; border-bottom: 1px solid #edf0f2; background: #fbfcfd; }.guide-definitions p:last-child { border-bottom: 0; }.guide-definitions b { color: #168fc8; }
.m-guide-page .guide-probability { border-bottom: 0; }
.probability-scroll { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.guide-probability table { min-width: 930px; border-collapse: collapse; color: #53616a; font-size: 9px; text-align: center; }
.guide-probability th, .guide-probability td { min-width: 31px; height: 30px; border: 1px solid #e1e8ec; font-weight: 400; }.guide-probability th { color: #fff; background: #168fc8; }.guide-probability td { background: #f7fbfd; }

.forecast-market-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 8px solid #f1f3f5; background: #fff; }
.forecast-market-tabs a { position: relative; padding: 12px 4px 10px; color: #5f6c74; font-size: 11px; text-align: center; }
.forecast-market-tabs a::after { position: absolute; right: 18%; bottom: 0; left: 18%; height: 2px; border-radius: 2px; content: ""; background: transparent; }
.forecast-market-tabs a.is-active { color: #128fcf; font-weight: 700; }.forecast-market-tabs a.is-active::after { background: #1597d3; }
.forecast-result-card, .forecast-probability, .prediction-card { border-bottom: 8px solid #f1f3f5; background: #fff; }
.forecast-result-card > header, .prediction-card > header { min-height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-bottom: 1px solid #e5e9eb; }
.forecast-result-card h2, .prediction-card h2, .forecast-probability h2 { margin: 0; color: #35434c; font-size: 13px; font-weight: 600; }
.forecast-result-card header span, .prediction-card header span { color: #89959d; font-size: 9px; }.prediction-card header button { padding: 5px 0; border: 0; color: #168fcf; background: transparent; font-size: 9px; }.prediction-card header button.is-active { color: #e24b57; }
.forecast-equation { min-height: 66px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #52616a; font-size: 16px; }
.forecast-equation b { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: #fff; font-size: 14px; }
.forecast-classify { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #edf0f2; background: #f8fafb; }
.forecast-classify span { padding: 8px 3px; border-right: 1px solid #e6eaed; color: #8a959c; font-size: 9px; text-align: center; }.forecast-classify span:last-child { border-right: 0; }
.forecast-classify b { display: block; margin-top: 3px; color: #258fbe; font-size: 12px; }
.forecast-probability { padding-bottom: 8px; }.forecast-probability > h2 { padding: 12px; border-bottom: 1px solid #e5e9eb; }
.probability-group { display: grid; grid-template-columns: 40px repeat(2, 1fr); gap: 6px; align-items: center; padding: 7px 10px 0; }
.probability-group.probability-four { grid-template-columns: 40px repeat(4, 1fr); }
.probability-group h3 { margin: 0; color: #6d7b83; font-size: 10px; font-weight: 500; }
.probability-group span { position: relative; min-width: 0; padding: 5px 5px 8px; overflow: hidden; border-radius: 4px; color: #66757e; background: #f3f7f9; font-size: 9px; }
.probability-group span b { font-weight: 600; }.probability-group span em { float: right; color: #e64d58; font-style: normal; font-weight: 700; }
.probability-group span i { position: absolute; left: 0; bottom: 0; width: var(--rate); height: 2px; background: #1597d3; }
.forecast-rate-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; padding: 9px 10px 2px; background: #e6edf1; }
.forecast-rate-grid span { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 3px; min-height: 34px; padding: 5px 6px; color: #687780; background: #fff; font-size: 9px; }
.forecast-rate-grid b { min-width: 31px; height: 22px; display: inline-grid; place-items: center; padding: 0 6px; border-radius: 12px; color: #fff; background: #ef4654; font-size: 9px; }
.forecast-rate-grid span:nth-child(even) b { background: var(--blue); }
.forecast-rate-grid em { color: #e34854; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.forecast-prediction-list { background: #f1f3f5; }
.prediction-values { display: grid; grid-template-columns: 37px minmax(0,1fr) 34px; row-gap: 7px; align-items: center; padding: 10px 12px; }
.prediction-values p { margin: 0; color: #7b878e; font-size: 10px; }.prediction-values > div { display: flex; flex-wrap: wrap; gap: 5px; }
.prediction-values b { min-width: 26px; height: 26px; display: inline-grid; place-items: center; padding: 0 7px; border: 1px solid #dce4e8; border-radius: 14px; color: #627079; background: #f8fafb; font-size: 10px; }
.prediction-values b.is-current { border-color: #8ed0ee; color: #fff; background: var(--blue); }
.prediction-values b.is-hit-value { border-color: #8edbbf; color: #fff; background: #1caf77; }
.prediction-stats { border-top: 1px solid #edf0f2; background: #f8fafb; }
.prediction-stats p { display: grid; grid-template-columns: 43% 57%; margin: 0; border-bottom: 1px solid #e9edef; color: #7d8990; font-size: 9px; }.prediction-stats p:last-child { border-bottom: 0; }
.prediction-stats span { padding: 7px 10px; }.prediction-stats span + span { border-left: 1px solid #e2e7ea; }
.prediction-stats b { color: #e34651; }
.prediction-history[hidden] { display: none; }.prediction-history { max-height: 330px; overflow: auto; border-top: 1px solid #dfe6ea; background: #fff; }.prediction-history > div { display: grid; grid-template-columns: 28% 38% 20% 14%; min-height: 31px; align-items: center; border-bottom: 1px solid #edf1f3; color: #697780; font-size: 9px; text-align: center; }.prediction-history .prediction-history-head { position: sticky; top: 0; z-index: 1; color: #fff; background: #168fce; }.prediction-history b { font-weight: 600; }.prediction-history .is-hit { color: #13a56f; }.prediction-history .is-miss { color: #e24b57; }

.m-forecast-page .forecast-probability > h2 { display: flex; align-items: center; justify-content: space-between; }
.m-forecast-page .forecast-probability > h2 small { color: #8a959c; font-size: 9px; font-weight: 400; }
.m-forecast-page .forecast-probability > h2 small b { color: #168fcf; font-size: 11px; }
.m-forecast-page .prediction-outcome { width: 23px; height: 20px; display: block; justify-self: center; }
.m-forecast-page .prediction-outcome img,
.m-forecast-page .history-result-icon img { display: block; width: 23px; height: 20px; object-fit: contain; }
.m-forecast-page .history-result-icon { width: 23px; height: 20px; display: block; margin: auto; }
.m-forecast-page .history-result-icon.is-hit,
.m-forecast-page .history-result-icon.is-miss { color: inherit; background: transparent; }
.m-forecast-page .prediction-operator { align-self: center; color: #59656d; font-style: normal; }
.m-forecast-page .kill-prefix { align-self: center; color: #ed4d56; font-style: normal; font-weight: 700; }
.m-forecast-page .prediction-values { padding-right: 10px; border-top: 1px solid #edf0f2; background: #fff; }

.m-tool-filter { min-height: 34px; display: flex; align-items: center; gap: 10px; padding: 4px 9px; border-bottom: 1px solid #dce7ed; color: #3d515d; background: #cfeafb; font-size: 10px; }
.m-tool-filter > div { display: flex; gap: 3px; }.m-tool-filter button { padding: 3px 7px; border: 1px solid #9ed2ed; color: #237ea9; background: rgba(255,255,255,.65); font-size: 9px; }.m-tool-filter button.is-active { color: #fff; background: #158fd0; }
.m-tool-filter time { margin-left: auto; color: #536d7c; font-size: 9px; }
.trend-scroll { width: 100%; overflow: auto; overscroll-behavior-inline: contain; background: #fff; }
.trend-scroll .trend-section-label { position: sticky; left: 0; z-index: 3; width: 100vw; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; padding: 8px 10px; color: #315b70; background: #e4f3f7; font-size: 10px; }
.trend-scroll .trend-section-label strong { color: #1179a6; font-size: 12px; }
.trend-scroll .trend-data-label { border-top: 1px solid #d4e6ed; background: #eef7f9; }
.trend-scroll table { border-collapse: collapse; table-layout: fixed; color: #46535c; font-size: 9px; text-align: center; white-space: nowrap; }
.trend-scroll th, .trend-scroll td { height: 27px; padding: 0 3px; border-right: 1px solid #fff; border-bottom: 1px solid #e9eef1; font-weight: 400; }
.trend-stats { min-width: 1180px; background: #d9effc; }.trend-stats.is-numeric { min-width: 1900px; }.trend-stats th { position: sticky; left: 0; z-index: 2; width: 78px; color: #435966; background: #d0eafa; }.trend-stats td { width: 38px; }
.trend-grid { min-width: 1370px; }.trend-grid-numeric { min-width: 1900px; }.trend-grid thead th { height: 29px; color: #fff; background: #168fce; }.trend-grid th:first-child { width: 78px; }.trend-grid th:nth-child(2) { width: 31px; }.trend-grid th:nth-child(n+3):nth-child(-n+11) { width: 38px; }.trend-grid th:nth-child(n+12) { width: 32px; }
.trend-grid tbody tr:nth-child(even) { background: #f2f6f8; }.trend-grid tbody tr:nth-child(odd) { background: #fff; }.trend-grid .issue-cell { position: sticky; left: 0; z-index: 1; color: #42515a; background: inherit; }
.trend-scroll .trend-load-more { position: sticky; left: 0; display: flex; width: 100vw; align-items: center; justify-content: center; gap: 12px; padding: 14px 10px; color: #7b8d99; background: #fff; font-size: 10px; }
.trend-scroll .trend-load-more b { color: #147da9; }
.trend-scroll .trend-load-more button { height: 34px; padding: 0 16px; border: 1px solid #79b9d4; border-radius: 18px; color: #147da9; background: #f2fbff; font-size: 10px; font-weight: 600; }
.trend-scroll .trend-load-more button:disabled { color: #9aa8b1; border-color: #d8e1e6; background: #f6f8f9; }
.trend-category-hit { display: inline-grid; min-width: 18px; height: 18px; place-items: center; padding: 0 2px; border-radius: 3px; color: #1877a3; background: #e1f1f7; font-size: 8px; }.trend-category-hit:empty { visibility: hidden; }.combo-hit { color: #6653a5; background: #efedfa; }.extreme-hit { color: #b74f60; background: #fbeaec; }.zone-hit { color: #a66a20; background: #fbefdc; }.tail-hit { color: #247b6d; background: #e2f3ee; }
.trend-value { display: inline-grid; width: 18px; height: 18px; place-items: center; border-radius: 3px; color: #fff; background: #1993c2; font-size: 8px; }
.mark { display: inline-grid; min-width: 17px; height: 17px; place-items: center; padding: 0 2px; border-radius: 2px; color: #fff; font-size: 8px; font-style: normal; }.blue-mark { background: #256dd8; }.red-mark { background: #ef3345; }.purple-mark { background: #4d46df; }.combo-mark { background: #3364cf; }.extreme-mark { background: #7a55c8; }.zone-mark { background: #f08a16; }
.trend-hit { display: inline-grid; width: 18px; height: 18px; place-items: center; border-radius: 4px; color: #fff; font-size: 8px; }
.scroll-tip { margin: 0; padding: 9px; color: #89949b; background: #f6f8f9; font-size: 9px; text-align: center; }

.interval-latest { min-height: 42px; display: flex; align-items: center; padding: 0 12px; border-bottom: 1px solid #e5edf2; color: #65747e; font-size: 12px; }.interval-latest::before { margin-right: 7px; color: #1597d3; content: "◖))"; font-weight: 700; }.interval-latest b { margin: 0 3px; color: #1597d3; }
.interval-group { margin: 0; border-bottom: 1px solid #dce7ed; }.interval-group h2 { width: 86px; height: 29px; display: grid; align-items: center; margin: 0; padding-left: 12px; border-radius: 0 14px 0 0; color: #fff; background: #168fd0; font-size: 12px; font-weight: 500; }
.interval-pairs { display: grid; grid-template-columns: repeat(2, 1fr); }.interval-pairs > div { min-height: 35px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #47535b; background: #f0f8fd; font-size: 11px; }.interval-pairs > div:nth-child(4n+3), .interval-pairs > div:nth-child(4n+4) { background: #fff; }.interval-pairs b { color: #e73f47; font-size: 12px; }.interval-pairs em { font-style: normal; }.interval-numbers .interval-pairs > div { gap: 7px; }.interval-numbers .interval-pairs i { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: #fff; background: #1797d3; font-size: 9px; font-style: normal; }

.m-history-page .history-tabs { height: 37px; margin: 0; border: 0; border-bottom: 1px solid #d8e0e5; }.m-history-page .m-history-panel { margin: 0; border: 0; }.m-history-page .m-result-head { color: #fff; background: #168fd0; }.m-history-page .m-result-row { min-height: 38px; }
.m-history-filter { min-height: 48px; display: grid; grid-template-columns: minmax(0, 1fr) 52px 45px; gap: 7px; align-items: center; padding: 7px 10px; border-bottom: 1px solid #dbe5ea; background: #f5fbfe; }
.m-history-filter label { min-width: 0; height: 33px; display: flex; align-items: center; overflow: hidden; border: 1px solid #cddce4; border-radius: 4px; color: #687b87; background: #fff; }
.m-history-filter label span { flex: 0 0 auto; padding-left: 9px; font-size: 10px; }
.m-history-filter input[type="date"] { min-width: 0; width: 100%; height: 31px; padding: 0 6px; border: 0; outline: 0; color: #3b4d58; background: transparent; font-size: 11px; }
.m-history-filter button, .m-history-filter > a { height: 33px; display: grid; place-items: center; padding: 0; border: 1px solid #168fd0; border-radius: 4px; color: #fff; background: #168fd0; font-size: 10px; }
.m-history-filter > a { border-color: #cbd9e1; color: #5f707a; background: #fff; }
.m-history-day-nav { min-height: 51px; display: grid; grid-template-columns: 82px 1fr 82px; align-items: center; border-bottom: 1px solid #dce7ec; background: #fff; text-align: center; }
.m-history-day-nav > a, .m-history-day-nav > span { color: #168fcf; font-size: 10px; }
.m-history-day-nav > span { color: #bdc5ca; }
.m-history-day-nav strong { color: #37454e; font-size: 12px; font-weight: 500; }
.m-history-day-nav small { display: block; margin-top: 3px; color: #97a1a7; font-size: 8px; font-weight: 400; }
.m-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; padding: 14px 8px 8px; border-top: 1px solid #e5eaed; background: #fff; }
.m-pager a, .m-pager span { min-width: 29px; height: 29px; display: grid; place-items: center; padding: 0 8px; border: 1px solid #d7e0e5; border-radius: 3px; color: #64727b; background: #fff; font-size: 9px; }
.m-pager a.is-active { border-color: #168fd0; color: #fff; background: #168fd0; }
.m-pager span { color: #b5bdc2; background: #f6f7f8; }
.m-page-jump { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 10px 18px; color: #8a949a; background: #fff; font-size: 9px; }
.m-page-jump input[type="number"] { width: 43px; height: 27px; padding: 0 4px; border: 1px solid #d5dde2; border-radius: 3px; color: #4f5d66; text-align: center; }
.m-page-jump button { height: 27px; padding: 0 10px; border: 0; border-radius: 3px; color: #fff; background: #168fd0; font-size: 9px; }
.m-history-issue-search { display: grid; grid-template-columns: minmax(0,1fr) 56px; gap: 7px; padding: 8px 10px; border-bottom: 1px solid #dce7ec; background: #f5fbfe; }
.m-history-issue-search input { min-width: 0; height: 33px; padding: 0 10px; border: 1px solid #cddce4; border-radius: 4px; outline: 0; color: #3b4d58; background: #fff; font-size: 11px; }
.m-history-issue-search button { height: 33px; border: 0; border-radius: 4px; color: #fff; background: #168fd0; font-size: 10px; }
.m-history-empty { padding: 32px 10px; color: #8b989f; text-align: center; font-size: 11px; }
.m-query-page .query-result { min-height: 210px; }

@media (min-width: 641px) {
    body:not([data-page="home"]) { max-width: none; border-inline: 0; box-shadow: none; }
    body:not([data-page="home"]) .m-tool-header { width: 100%; }
    .m-guide-page { padding-inline: 10px; }
    .m-guide-page p, .m-guide-page ol { font-size: 12px; }
}