:root { --ink:#17233d; --muted:#71809a; --line:#e7ebf2; --blue:#1967ff; --blue-dark:#084dd4; --blue-soft:#edf4ff; --green:#16a36a; --orange:#f08a24; --surface:#fff; --shadow:0 18px 55px rgba(35,64,117,.10); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#f7f9fd; font-family:"Microsoft YaHei UI","PingFang SC",system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
button { color:inherit; }
.topbar { height:76px; padding:0 max(24px,calc((100vw - 1180px)/2)); display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.92); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; backdrop-filter:blur(14px); }
.brand { display:flex; gap:12px; align-items:center; color:inherit; text-decoration:none; }
.brand-mark { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; color:white; font-size:23px; font-weight:800; background:linear-gradient(145deg,var(--blue),#70a2ff); box-shadow:0 7px 18px #1967ff45; }
.brand strong,.brand small { display:block; }.brand strong { font-size:17px; }.brand small { color:var(--muted); margin-top:2px; font-size:11px; letter-spacing:.12em; }
.connection { display:flex; gap:8px; align-items:center; font-size:13px; color:var(--muted); }.status-dot { width:8px; height:8px; border-radius:50%; background:#aab2c0; }.status-dot.online { background:var(--green); box-shadow:0 0 0 4px #16a36a1f; }.status-dot.error { background:#e34b4b; box-shadow:0 0 0 4px #e34b4b1f; }
.top-actions { display:flex; align-items:center; gap:14px; }.install-button { padding:8px 12px; border:1px solid #bcd0f7; border-radius:9px; color:var(--blue); background:#f3f7ff; font-size:12px; font-weight:700; cursor:pointer; }.install-button.ready { color:white; border-color:var(--blue); background:var(--blue); }
main { width:min(1180px,calc(100% - 40px)); margin:auto; }
.hero { min-height:280px; display:flex; align-items:center; justify-content:space-between; padding:45px 8%; margin:28px 0 20px; overflow:hidden; border-radius:28px; color:#fff; background:radial-gradient(circle at 75% 20%,#427eff 0,transparent 30%),linear-gradient(125deg,#0b45b5,#1765ee 56%,#2a74f8); box-shadow:0 25px 70px #1462df35; position:relative; }
.hero:after { content:""; position:absolute; right:-75px; bottom:-135px; width:380px; height:380px; border:1px solid #ffffff28; border-radius:50%; box-shadow:0 0 0 50px #ffffff0b,0 0 0 100px #ffffff09; }
.eyebrow { display:inline-block; color:var(--blue); font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.hero .eyebrow { color:#bcd4ff; }
.hero h1 { font-size:clamp(34px,5vw,58px); line-height:1.08; margin:15px 0 17px; letter-spacing:-.04em; }.hero h1 em { color:#ffcb69; font-style:normal; }.hero p { color:#dce9ff; font-size:17px; margin:0; }
.hero-badge { width:160px; aspect-ratio:1; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#ffffff12; border:1px solid #ffffff2e; backdrop-filter:blur(8px); z-index:1; }.hero-badge span { font-size:30px; }.hero-badge strong { font-size:25px; }.hero-badge small { color:#cfe0ff; margin-top:5px; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden; margin-bottom:20px; }.step { display:flex; align-items:center; gap:12px; background:white; padding:18px 24px; }.step b { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:#eef1f6; color:#8d98aa; }.step.active b { background:var(--blue); color:white; }.step span>* { display:block; }.step small { color:var(--muted); margin-top:3px; }
.workspace { display:grid; grid-template-columns:330px 1fr; border:1px solid var(--line); border-radius:22px; background:white; min-height:530px; box-shadow:var(--shadow); overflow:hidden; }
.formula-panel { padding:26px 20px; background:#fbfcff; border-right:1px solid var(--line); }.section-title { display:flex; justify-content:space-between; padding:0 8px 17px; font-weight:700; }.section-title small { color:var(--muted); font-weight:400; }
.formula-list { display:grid; gap:10px; }.formula-option { width:100%; display:grid; grid-template-columns:35px 1fr 12px; gap:10px; text-align:left; align-items:start; padding:18px 13px; background:white; border:1px solid var(--line); border-radius:14px; cursor:pointer; transition:.2s ease; }.formula-option:hover { transform:translateY(-1px); border-color:#aac7ff; }.formula-option.active { border-color:var(--blue); box-shadow:0 8px 25px #1967ff18; background:#f7faff; }.option-number { color:#a3adbd; font-size:12px; font-weight:800; }.formula-option strong,.formula-option small { display:block; }.formula-option small { color:var(--muted); font-size:12px; line-height:1.5; margin-top:5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }.formula-option b { font-size:22px; color:#b1b9c7; }
.ghost-button { border:1px solid var(--line); border-radius:10px; padding:10px 15px; background:white; cursor:pointer; }.formula-panel>.ghost-button { width:100%; margin-top:15px; color:var(--muted); }.ghost-button:hover { border-color:#aabfe8; color:var(--blue); }
.calculator { padding:30px 44px 38px; }.calculator-head { display:none; }.formula-tag { display:inline-block; padding:5px 10px; color:var(--blue); background:var(--blue-soft); border-radius:6px; font-size:12px; font-weight:700; }.calculator h2 { margin:13px 0 7px; font-size:28px; }.calculator-head p { margin:0; color:var(--muted); line-height:1.7; }.icon-button { width:34px; height:34px; border:1px solid var(--line); border-radius:50%; background:white; color:var(--muted); cursor:pointer; }
.input-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:28px 0 20px; }.field>span { display:block; font-weight:700; font-size:14px; margin:0 0 9px 3px; }.field input { width:100%; border:1px solid #dce2eb; background:#fbfcfe; padding:14px; border-radius:11px; outline:none; font-size:17px; transition:.2s; }.field input:focus { border-color:var(--blue); background:white; box-shadow:0 0 0 4px #1967ff12; }.field small { display:block; color:var(--muted); line-height:1.45; margin:7px 3px 0; font-size:11px; }
.market-toolbar { display:grid; grid-template-columns:1.05fr 1.2fr 1.3fr auto; gap:10px; align-items:end; margin-top:0; padding:14px; border:1px solid var(--line); border-radius:13px; background:#f8faff; }.market-toolbar label>span,.today>span { display:block; margin:0 0 6px 2px; color:var(--muted); font-size:10px; }.market-toolbar select,.market-toolbar input { width:100%; height:39px; padding:0 10px; border:1px solid #dce2eb; border-radius:8px; background:white; outline:none; }.today strong { font-size:18px; }.today small { margin-left:8px; color:var(--muted); }.primary-button { height:39px; padding:0 15px; border:0; border-radius:8px; background:var(--blue); color:white; font-weight:700; cursor:pointer; }.primary-button:disabled { opacity:.6; cursor:wait; }.auto-status { display:flex; align-items:center; gap:8px; padding:9px 4px 0; color:var(--muted); font-size:11px; }.auto-status label { margin-left:auto; display:flex; align-items:center; gap:5px; }
.market-toolbar.single-market { grid-template-columns:1fr 1fr auto; }.fixed-symbol>span { display:block; margin-bottom:5px; color:var(--muted); font-size:10px; }.fixed-symbol strong { font-size:16px; }.fixed-symbol small { margin-left:7px; color:#ad7610; font-weight:800; }
.market-toolbar.single-market:has(.primary-button[hidden]) { grid-template-columns:1fr 1fr; }.auto-status.manual { padding:11px 13px; border:1px solid #ffd0d0; border-radius:10px; background:#fff3f3; color:#a52b2b; font-weight:700; }
.history-tabs { display:flex; gap:7px; overflow-x:auto; padding:12px 1px 4px; scrollbar-width:none; }.history-tabs::-webkit-scrollbar { display:none; }.history-tab { min-width:67px; padding:8px 11px; border:1px solid #dce4f2; border-radius:10px; color:#66748b; background:#fff; cursor:pointer; }.history-tab strong,.history-tab small { display:block; }.history-tab strong { font-size:12px; }.history-tab small { margin-top:2px; font-size:9px; opacity:.75; }.history-tab.active { color:#fff; border-color:#1967ff; background:#1967ff; box-shadow:0 5px 13px #1967ff35; }
.alert-panel { margin:12px 0 4px; padding:14px; border:1px solid #dce4f2; border-radius:13px; background:#fafcff; }.alert-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }.alert-head strong,.alert-head small { display:block; }.alert-head small { margin-top:3px; color:var(--muted); font-size:10px; }.alert-setting-button { padding:7px 10px; border:1px solid #bcd0f7; border-radius:8px; color:#155edb; background:#edf4ff; font-size:11px; font-weight:800; cursor:pointer; }.current-position { margin-top:10px; padding:9px 11px; border-radius:9px; color:#174caa; background:#eaf2ff; font-size:12px; font-weight:800; }.position-changes { display:grid; gap:6px; margin-top:8px; }.position-changes>span { color:var(--muted); font-size:11px; }.position-change { display:grid; grid-template-columns:auto auto 1fr auto; align-items:center; gap:8px; padding:7px 9px; border-radius:8px; background:#fff; border:1px solid #e7ebf2; font-size:10px; }.position-change time { color:var(--muted); }.position-change strong { color:#155edb; }.position-change span { text-align:right; }.position-change small { color:#6f7c90; }
.bark-dialog { width:min(600px,calc(100% - 24px)); }.switch-row { display:flex; align-items:center; justify-content:space-between; padding:13px; border-radius:10px; background:#f3f7ff; }.switch-row span>* { display:block; }.switch-row small { margin-top:3px; color:var(--muted); font-size:10px; }.switch-row input { width:22px; height:22px; }.setting-field { display:block; margin-top:13px; }.setting-field>span { display:block; margin:0 0 6px 2px; color:#53627a; font-size:11px; font-weight:700; }.setting-field input,.setting-field select { width:100%; height:42px; padding:0 11px; border:1px solid #dce2eb; border-radius:9px; background:#fff; outline:none; }.setting-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.dialog-actions { display:flex; gap:9px; margin-top:18px; }.dialog-actions button { flex:1; height:43px; }.setting-message { margin-top:11px; padding:10px; border-radius:8px; color:#155edb; background:#edf4ff; font-size:12px; }
.treasury-card { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:18px; margin:18px 0 4px; padding:16px 18px; border:1px solid var(--line); border-radius:13px; transition:.2s; }.treasury-card>div>span,.treasury-card>div>small { display:block; }.treasury-card>div>span { font-weight:800; }.treasury-card>div>small { margin-top:4px; color:var(--muted); font-size:10px; }.treasury-card>strong { font-size:28px; }.treasury-card>strong small { margin-left:3px; font-size:13px; }.treasury-card>b { padding:7px 10px; border-radius:99px; font-size:11px; }.treasury-card.high { border-color:#f0aaaa; background:#fff3f3; color:#b32525; }.treasury-card.high b { background:#d93636; color:white; }.treasury-card.low { border-color:#a5dec3; background:#effbf5; color:#08784b; }.treasury-card.low b { background:#14a36a; color:white; }.treasury-card.equal { border-color:#ffd29d; background:#fff7e9; color:#a55a08; }.treasury-card.equal b { background:#ef8a1f; color:white; }.treasury-card.pending b { background:#edf0f5; color:#6d7787; }
.editable-field input { background:#fffbd7; border-color:#d7c600; color:#544c00; font-weight:800; }.editable-field>span:after { content:"行情"; margin-left:7px; padding:2px 6px; border-radius:4px; background:#fff3a5; color:#756a00; font-size:9px; font-weight:700; vertical-align:2px; }
.error-box { padding:12px 14px; border-radius:10px; color:#a93838; background:#fff0f0; border:1px solid #ffd0d0; margin-bottom:15px; }
.live-position { margin:0 0 12px; padding:12px 15px; border:2px solid #1967ff; border-radius:11px; color:#0847bd; background:#edf4ff; font-size:13px; font-weight:800; line-height:1.5; box-shadow:0 0 0 4px #1967ff12; }
.live-position.wait { color:#8a5b09; border-color:#e6a42b; background:#fff7e7; box-shadow:0 0 0 4px #e6a42b18; }.live-position.early { color:#1554a6; border-color:#6b9ee8; background:#eff5ff; }.live-position.confirmed { color:#087249; border-color:#19a56c; background:#edfaf4; box-shadow:0 0 0 4px #19a56c18; }
.result-card { padding:25px 28px; display:flex; align-items:center; justify-content:space-between; gap:30px; color:white; background:linear-gradient(130deg,#123987,#1259d5); border-radius:17px; box-shadow:0 15px 34px #124dae2b; }.result-card.active-target { outline:3px solid #ffca45; box-shadow:0 0 0 6px #ffca4530,0 15px 34px #124dae2b; }.result-card span { display:block; color:#c7dcff; font-size:12px; }.result-card strong { display:inline-block; font-size:38px; margin-top:5px; }.result-card small { margin-left:8px; color:#c7dcff; }.interpretation { max-width:320px; padding:12px 16px; border-radius:10px; background:#ffffff12; line-height:1.5; }
.formula-preview { display:none; align-items:center; gap:14px; margin-top:17px; color:var(--muted); font-size:12px; }.formula-preview code { color:#4f6181; background:#f0f3f8; padding:7px 10px; border-radius:7px; word-break:break-all; }
.gold-factors-section { margin-top:26px; padding-top:24px; border-top:1px solid var(--line); }.gold-factors-head { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:15px; }.factor-kicker { color:#b27a0b; font-size:11px; font-weight:800; letter-spacing:.12em; }.gold-factors-head h2 { margin:5px 0 0; font-size:22px; }.factors-status { padding:6px 9px; border-radius:99px; color:#356098; background:#edf4ff; font-size:10px; font-weight:700; }.gold-factors-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }.factor-card { padding:15px; border:1px solid var(--line); border-left:4px solid #8d98aa; border-radius:13px; background:#fff; }.factor-card.bullish { border-left-color:#dd4a4a; background:#fff6f6; }.factor-card.bearish { border-left-color:#12a36a; background:#f3fcf7; }.factor-card.bullish-soft,.factor-card.bearish-soft { border-left-color:#e39a23; background:#fffaf1; }.factor-title,.factor-quote,.factor-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; }.factor-title span { font-size:13px; font-weight:800; }.factor-title small { color:var(--muted); font-size:9px; font-weight:800; }.factor-quote { margin:9px 0; }.factor-quote>strong { font-size:25px; }.factor-quote>b { padding:4px 7px; border-radius:7px; font-size:11px; }.factor-quote>b.up { color:#d83e3e; background:#ffe8e8; }.factor-quote>b.down { color:#078557; background:#e5f8ef; }.factor-quote>b.flat { color:#66748b; background:#edf0f5; }.factor-impact { min-height:57px; padding:10px; border-radius:9px; background:#ffffffc7; }.factor-impact strong,.factor-impact span { display:block; }.factor-impact strong { font-size:12px; }.factor-card.bullish .factor-impact strong { color:#c53232; }.factor-card.bearish .factor-impact strong { color:#078557; }.factor-card.bullish-soft .factor-impact strong,.factor-card.bearish-soft .factor-impact strong { color:#a66308; }.factor-impact span { margin-top:4px; color:#65728a; font-size:10px; line-height:1.45; }.factor-meta { margin-top:9px; color:#8792a4; font-size:9px; }.factor-meta em { padding:2px 6px; border-radius:99px; font-style:normal; }.factor-meta em.live { color:#087a4d; background:#dcf6e9; }.factor-meta em.delayed { color:#956211; background:#fff0ce; }.factors-notice { margin:11px 2px 0; color:#8792a4; font-size:10px; line-height:1.5; }.factors-empty { grid-column:1 / -1; padding:22px; border:1px dashed #cbd5e5; border-radius:12px; color:#7a879b; text-align:center; font-size:12px; }
.level-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; }.level-card { border:1px solid var(--line); border-radius:15px; overflow:hidden; }.level-head { display:flex; flex-direction:column; gap:3px; padding:14px 16px; }.level-head small { font-size:11px; opacity:.78; }.level-card.support .level-head { background:#c9f1ed; color:#14665f; }.level-card.resistance .level-head { background:#ffe1c8; color:#9b4a0d; }.level-rows { display:grid; grid-template-columns:1fr 1fr; }.level-row { min-height:66px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; border-top:1px solid var(--line); }.level-row:nth-child(odd) { border-right:1px solid var(--line); }.level-row span>* { display:block; }.level-row span>b { font-size:13px; }.level-row span small { color:var(--muted); font-size:9px; margin-top:3px; }.level-row>strong { font-size:15px; white-space:nowrap; }.level-card.support .level-row>strong { color:#07887c; }.level-card.resistance .level-row>strong { color:#d66516; }.level-row.active-target { position:relative; z-index:2; border:3px solid #1967ff!important; background:#e6f0ff; box-shadow:inset 0 0 0 2px #fff,0 0 0 4px #1967ff35; }.level-row.active-target:after { content:"当前目标"; position:absolute; top:-10px; right:7px; padding:2px 7px; border-radius:99px; color:#fff; background:#1967ff; font-size:9px; font-weight:800; }
.data-section { margin:75px 0 35px; }.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:24px; }.section-heading h2 { margin:9px 0 5px; font-size:30px; }.section-heading p { margin:0; color:var(--muted); }.provider-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }.provider-card { display:flex; align-items:center; justify-content:space-between; gap:15px; background:white; border:1px solid var(--line); border-radius:16px; padding:22px; }.provider-card>div { display:flex; align-items:center; gap:14px; }.provider-card strong,.provider-card small { display:block; }.provider-card small { color:var(--muted); margin-top:5px; }.provider-logo { width:48px; height:48px; display:grid; place-items:center; border-radius:12px; color:white; background:#6b7d9e; font-weight:900; }.provider-logo.jd { background:#e1251b; }.provider-status { flex:none; border-radius:99px; padding:6px 10px; font-size:11px; }.provider-status.ready { color:#087e50; background:#e6f8f0; }.provider-status.waiting { color:#8a641b; background:#fff4dc; }
dialog { width:min(560px,calc(100% - 30px)); border:0; border-radius:20px; padding:34px; box-shadow:0 30px 100px #13234055; }dialog::backdrop { background:#10204499; backdrop-filter:blur(3px); }.dialog-close { position:absolute; right:17px; top:14px; border:0; background:none; font-size:27px; color:var(--muted); cursor:pointer; }.dialog-formula { background:#f2f5fa; border-radius:10px; padding:14px; margin-top:20px; }dialog h2 { margin:10px 0; }dialog p { color:var(--muted); line-height:1.7; }
.install-steps { display:grid; gap:10px; margin:22px 0; }.install-steps>div { display:flex; align-items:center; gap:12px; padding:13px; background:#f5f8fd; border-radius:11px; }.install-steps b { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; color:white; background:var(--blue); }.install-tip { padding:12px; border-radius:9px; background:#fff7e9; color:#8c641f; font-size:12px; }
footer { display:flex; justify-content:space-between; gap:20px; padding:22px max(24px,calc((100vw - 1180px)/2)); background:#111e37; color:#9eabc2; font-size:12px; }
@media (max-width:850px) { .hero { min-height:240px; }.hero-badge { display:none; }.steps { grid-template-columns:1fr; }.step:not(.active) { display:none; }.workspace { grid-template-columns:1fr; }.formula-panel { border-right:0; border-bottom:1px solid var(--line); }.formula-list { grid-template-columns:repeat(2,1fr); }.input-grid { grid-template-columns:1fr 1fr; }.calculator { padding:30px 25px; } }
@media (max-width:580px) { body { padding-bottom:env(safe-area-inset-bottom); }.topbar { height:61px; padding:0 12px; }.brand-mark { width:37px; height:37px; border-radius:11px; font-size:19px; }.brand small,.connection { display:none; }.install-button { padding:8px 10px; }.hero,.steps,.formula-panel,.data-section,footer,.calculator-head,.formula-preview { display:none; }main { width:100%; }.workspace { display:block; min-height:calc(100dvh - 61px); border:0; border-radius:0; box-shadow:none; }.calculator { padding:13px 13px 34px; }.market-toolbar,.market-toolbar.single-market { grid-template-columns:1fr 1fr; margin-top:0; padding:11px; }.market-toolbar .today { grid-column:1 / -1; display:flex; align-items:baseline; gap:8px; }.market-toolbar .today>span { margin-right:auto; }.market-toolbar .primary-button { grid-column:1 / -1; height:44px; }.auto-status { flex-wrap:wrap; line-height:1.4; }.auto-status label { width:100%; margin:3px 0 0; }.treasury-card { grid-template-columns:1fr auto; gap:8px; padding:13px; }.treasury-card>b { grid-column:1 / -1; text-align:center; }.treasury-card>strong { font-size:25px; }.input-grid { grid-template-columns:repeat(3,1fr); gap:7px; margin-top:18px; }.field>span { font-size:12px; }.field input { padding:12px 7px; font-size:16px; }.field small { display:none; }.editable-field>span:after { display:none; }.result-card { padding:18px; flex-direction:row; align-items:center; gap:12px; }.result-card strong { font-size:30px; }.interpretation { font-size:12px; padding:9px; max-width:47%; }.level-grid { grid-template-columns:1fr; }.level-rows { grid-template-columns:repeat(2,1fr); }.level-row { min-height:58px; padding:8px 10px; }.gold-factors-head { align-items:start; }.gold-factors-head h2 { font-size:18px; }.gold-factors-grid { grid-template-columns:1fr; }.factor-card { padding:13px; }.install-dialog { padding:28px 20px; } }
@media (display-mode:standalone) { .topbar { padding-top:env(safe-area-inset-top); height:calc(61px + env(safe-area-inset-top)); }.install-button { display:none; } }