/* ============ 异动标尺 · 浅色小程序风 ============ */
:root{
  --bg:#f4f5f7;
  --card:#ffffff;
  --text:#171a20;
  --muted:#8b909a;
  --dim:#b3b7bf;
  --line:#eef0f3;
  --line-2:#e3e6ea;
  --red:#e53935;
  --red-dark:#c62828;
  --red-bg:#ffecec;
  --green:#16a06a;
  --green-bg:#e9f8f1;
  --amber:#d98b00;
  --amber-bg:#fff6e5;
  --radius:14px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{
  min-height:100dvh;
  color:var(--text);
  background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro SC","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}
input{font:inherit}
a{color:inherit;text-decoration:none}
svg{display:block}
.hidden{display:none !important}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.up{color:var(--red)}
.down{color:var(--green)}
.flat{color:var(--muted)}

.app{
  width:100%;max-width:560px;margin:0 auto;
  min-height:100dvh;background:var(--bg);
  padding-bottom:calc(18px + env(safe-area-inset-bottom));
  position:relative;
}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;
  height:calc(48px + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-title{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  height:48px;width:62%;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:650;letter-spacing:.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  pointer-events:none;
}
.nav-back,.nav-icon{
  width:44px;height:44px;display:grid;place-items:center;color:#3d434d;flex:none;
  position:relative;z-index:1;
}
.nav-back svg{width:22px;height:22px}
.nav-icon svg{width:19px;height:19px}
.nav-icon{margin-left:auto}

/* ---------- demo ---------- */
.demo-banner{
  display:flex;align-items:center;gap:8px;
  margin:8px 12px 0;padding:8px 10px;
  border-radius:10px;
  background:var(--amber-bg);color:#9a6200;
  font-size:11px;border:1px solid #f5e2bb;
}
.demo-banner button{
  margin-left:auto;flex:none;color:#9a6200;font-size:11px;
  padding:2px 8px;border-radius:6px;background:#fff3d6;
}

/* ---------- home ---------- */
.home-hero{
  background:var(--card);padding:20px 16px 16px;
}
.hero-kicker{
  font-size:10px;font-weight:600;letter-spacing:1px;color:var(--red);
}
.home-hero h1{
  margin-top:6px;font-size:23px;line-height:1.25;font-weight:750;letter-spacing:-.3px;
}
.home-hero p{
  margin-top:5px;font-size:12px;color:var(--muted);
}
.search-trigger{
  margin-top:15px;width:100%;height:44px;
  display:flex;align-items:center;gap:8px;padding:0 12px;
  background:#f4f5f7;border:1px solid #f0f1f3;border-radius:11px;
  color:#9aa0aa;font-size:13px;text-align:left;
}
.search-trigger svg{width:16px;height:16px;color:#a0a6af}
.search-trigger:active{background:#eef0f3}

.index-strip{
  display:flex;gap:18px;overflow-x:auto;
  background:var(--card);padding:0 16px 14px;
  scrollbar-width:none;
}
.index-strip::-webkit-scrollbar{display:none}
.idx{flex:none;min-width:82px}
.idx .n{font-size:10px;color:var(--muted)}
.idx .v{font-size:13px;font-weight:700;margin-top:1px;letter-spacing:.2px}
.idx .p{font-size:10px;font-weight:600;margin-top:1px}

.list-head{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:16px 16px 8px;
}
.list-head h2{font-size:16px;font-weight:700}
.list-head span{font-size:11px;color:var(--muted)}

.watch-list{padding:0 12px}
.stock-card{
  background:var(--card);border-radius:var(--radius);
  padding:14px;margin-bottom:10px;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 0 0 1px rgba(16,24,40,.02);
  animation:rise .3s both;
  animation-delay:calc(var(--i,0) * 25ms);
}
.stock-card:active{background:#fcfcfd}
.sc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.sc-id{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.sc-name{font-size:17px;font-weight:700;letter-spacing:.1px}
.sc-code{font-size:11px;color:var(--dim)}
.tag{
  display:inline-flex;align-items:center;
  font-size:10px;line-height:1.3;padding:2px 6px;border-radius:5px;
  background:#f2f3f5;color:#7d838d;font-weight:500;white-space:nowrap;
}
.tag.danger{background:var(--red-bg);color:var(--red)}
.tag.warn{background:var(--amber-bg);color:var(--amber)}
.tag.safe{background:var(--green-bg);color:var(--green)}
.sc-price{text-align:right;flex:none;line-height:1.2}
.sc-price b{font-size:17px;font-weight:750}
.sc-pct{display:block;font-size:11px;font-weight:600;margin-top:2px}

.metric{margin-top:11px}
.metric-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.metric-label{font-size:11px;color:var(--muted)}
.metric-val{font-size:13px;font-weight:700;color:var(--red)}
.metric-val.green{color:var(--green)}
.metric-val.muted{color:var(--muted)}
.metric-val.muted{color:var(--muted)}
.metric-bar{height:4px;background:#f0f1f3;border-radius:3px;margin-top:5px;overflow:hidden}
.metric-bar i{display:block;height:100%;border-radius:3px;background:var(--red);transition:width .4s ease}
.metric-bar i.green{background:var(--green)}
.metric-bar i.amber{background:var(--amber)}
.sc-foot{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:11px;padding-top:9px;border-top:1px solid var(--line);
  font-size:10px;color:var(--muted);
}
.sc-foot b{font-weight:650;color:#5d636d}
.sc-foot .arrow{color:#b0b4bb}

/* skeleton */
.skel-card{
  height:146px;border-radius:var(--radius);margin-bottom:10px;
  background:linear-gradient(100deg,#eef0f3 20%,#f7f8fa 38%,#eef0f3 56%);
  background-size:200% 100%;animation:shimmer 1.3s infinite linear;
}

/* empty */
.empty{
  margin:0 12px;padding:36px 20px;text-align:center;
  background:var(--card);border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(16,24,40,.03);
}
.empty .ic{font-size:30px;line-height:1;margin-bottom:10px}
.empty h3{font-size:14px;font-weight:700;margin-bottom:5px}
.empty p{font-size:11px;color:var(--muted);line-height:1.7;margin-bottom:14px}
.empty button{
  height:36px;padding:0 18px;border-radius:9px;font-size:12px;
  color:#fff;background:var(--red);
}

.foot{
  padding:24px 16px 8px;text-align:center;
  font-size:9.5px;line-height:1.8;color:#b0b4bb;
}

/* ---------- detail ---------- */
#detailView{padding-bottom:6px}
.detail-head{
  background:var(--card);padding:16px;
}
.dh-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.dh-name{
  display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;
  font-size:23px;font-weight:750;letter-spacing:-.2px;line-height:1.3;
}
.dh-name span{font-size:13px;font-weight:400;color:var(--dim);letter-spacing:0}
.dh-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px}
.dh-price{font-size:11px;color:var(--muted)}
.dh-price b{font-size:13px;color:var(--text);font-weight:650;margin-left:2px}
.dh-actions{display:flex;gap:6px;flex:none}
.mini-btn{
  height:32px;padding:0 10px;border-radius:8px;font-size:11px;font-weight:600;
  display:inline-flex;align-items:center;gap:3px;
}
.mini-btn.red{background:var(--red);color:#fff}
.mini-btn.line{background:#fff;color:var(--red);border:1px solid #f2b8b6}
.mini-btn.gray{background:#f4f5f7;color:#5d636d}
.dh-note{
  font-size:10px;color:var(--muted);line-height:1.7;margin-top:12px;
  padding-top:10px;border-top:1px solid var(--line);
}
.dh-note b{color:#5d636d;font-weight:600}
.reset-note{
  margin:0 12px 10px;padding:10px 12px;border-radius:10px;
  background:#f0f7ff;border:1px solid #d6e8ff;
  font-size:10.5px;line-height:1.7;color:#3b5b80;
}
.reset-note b{display:block;color:#1f4f82;font-size:11px;margin-bottom:2px}
.reset-note.warn{background:#fff7e8;border-color:#f5e2bb;color:#8a5a00}
.reset-note.warn b{color:#8a5a00}

.card{
  background:var(--card);border-radius:var(--radius);
  margin:10px 12px;padding:16px;
  box-shadow:0 1px 2px rgba(16,24,40,.03);
}
.card-title{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
}
.card-title h2{font-size:16px;font-weight:700;letter-spacing:.1px}
.card-title span{font-size:10px;color:var(--muted);font-weight:400}
.card-sub{font-size:10px;color:var(--muted);margin-top:4px;line-height:1.6}

/* trigger table */
.trigger-table{margin-top:10px}
.tt-head,.tt-row{
  display:grid;grid-template-columns:74px 76px 1fr;gap:8px;align-items:center;
}
.tt-head{
  padding:8px 0;border-bottom:1px solid var(--line);
  font-size:10.5px;color:var(--muted);
}
.tt-row{
  padding:12px 0;border-bottom:1px solid #f5f6f8;
}
.tt-row:last-child{border-bottom:0}
.tt-day b{display:block;font-size:14px;font-weight:700;line-height:1.2}
.tt-day span{display:block;font-size:9.5px;color:var(--dim);margin-top:2px}
.tt-pct{font-size:20px;font-weight:750;color:var(--red);letter-spacing:-.3px;line-height:1.1}
.tt-pct.hit{color:var(--red-dark)}
.tt-pct small{font-size:11px;font-weight:600}
.tt-rule{font-size:10.5px;color:#7d838d;line-height:1.55}
.tt-rule div{display:flex;gap:4px;white-space:nowrap}
.tt-rule b{font-weight:650;color:#5d636d}
.tt-rule .bind b,.tt-rule .bind{color:var(--red)}
.tt-rule .muted{color:#aeb2b9}

/* gauge */
.gauge-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.gauge-title{font-size:16px;font-weight:700}
.badge{font-size:10px;font-weight:650;padding:3px 8px;border-radius:5px;white-space:nowrap}
.badge.safe{background:var(--green-bg);color:var(--green)}
.badge.warn{background:var(--amber-bg);color:var(--amber)}
.badge.danger{background:var(--red-bg);color:var(--red)}
.gauge-val{
  font-size:34px;font-weight:750;letter-spacing:-1px;line-height:1.15;
  color:var(--red);margin-top:10px;
}
.gauge-val.green{color:var(--green)}
.gauge-val small{font-size:16px;font-weight:650;letter-spacing:0;margin-left:1px}
.gauge-bar{height:6px;background:#f0f1f3;border-radius:4px;margin-top:9px;overflow:hidden}
.gauge-bar i{display:block;height:100%;border-radius:4px;background:var(--red);transition:width .5s ease}
.gauge-gap{font-size:12px;font-weight:650;margin-top:7px;color:var(--text)}
.gauge-gap span{color:var(--red)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:11px}
.stat{background:#f7f8fa;border-radius:8px;padding:8px 9px}
.stat span{display:block;font-size:9.5px;color:var(--muted);white-space:nowrap}
.stat b{display:block;font-size:13px;font-weight:700;margin-top:2px}
.range{font-size:9.5px;color:var(--dim);margin-top:9px}

/* event */
.event-big{font-size:34px;font-weight:750;letter-spacing:-.5px;margin-top:8px;line-height:1.1}
.event-big small{font-size:18px;font-weight:600;color:#aeb2b9;margin-left:2px}
.event-desc{font-size:12px;font-weight:600;margin-top:5px}
.event-desc b{color:var(--red)}
.event-rule{
  margin-top:8px;padding:8px 9px;border-radius:7px;background:#f7f8fa;
  font-size:10px;color:#7d838d;line-height:1.6;
}
.event-last{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--line);
  font-size:10.5px;color:var(--muted);
}
.event-last b{font-weight:650;color:var(--red)}

/* notes */
.notes{font-size:10.5px;color:#6f7580;line-height:1.9}
.notes p{margin-top:8px}
.notes p:first-child{margin-top:0}
.notes b{color:#3d434d;font-weight:650}
.risk{font-size:10px;color:#9aa0aa;line-height:1.8}

/* ---------- search overlay ---------- */
.search-overlay{
  position:fixed;inset:0;z-index:80;background:#fff;
  display:flex;flex-direction:column;
  transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.7,.2,1);
  visibility:hidden;
}
.search-overlay.open{transform:translateY(0);visibility:visible}
.search-top{
  display:flex;align-items:center;gap:6px;flex:none;
  padding:calc(8px + env(safe-area-inset-top)) 10px 8px;
  border-bottom:1px solid var(--line);
}
.back-btn,.search-clear{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  color:#3d434d;flex:none;
}
.back-btn svg{width:20px;height:20px}
.search-input-wrap{
  flex:1;display:flex;align-items:center;gap:7px;
  height:38px;padding:0 11px;background:#f4f5f7;border-radius:9px;
}
.search-input-wrap svg{width:15px;height:15px;color:#a0a6af;flex:none}
.search-input-wrap input{
  flex:1;min-width:0;border:0;outline:0;background:none;
  font-size:16px;color:var(--text);
}
.search-input-wrap input::placeholder{color:#a0a6af}
.search-input-wrap input::-webkit-search-cancel-button{display:none}
.search-clear{width:24px;height:24px;background:#e5e7eb;color:#7d838d;font-size:10px;border-radius:50%}
.search-body{flex:1;overflow-y:auto;padding:4px 16px calc(24px + env(safe-area-inset-bottom))}
.sec-label{font-size:10.5px;color:var(--muted);margin:16px 0 8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{
  height:32px;padding:0 12px;border-radius:8px;
  background:#f4f5f7;color:#5d636d;font-size:12px;
}
.sr-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:12px 2px;border-bottom:1px solid var(--line);text-align:left;
}
.sr-main{flex:1;min-width:0}
.sr-main b{display:block;font-size:14px;font-weight:650}
.sr-main span{display:block;font-size:10px;color:var(--muted);margin-top:1px}
.sr-go{
  flex:none;font-size:10.5px;color:var(--red);
  padding:3px 8px;border-radius:6px;background:var(--red-bg);
}
.sr-hint{padding:18px 0;font-size:11px;color:var(--muted);text-align:center}

/* ---------- sheet ---------- */
.sheet-backdrop{
  position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.35);
  opacity:0;pointer-events:none;transition:opacity .24s;
}
.sheet-backdrop.show{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:50%;bottom:0;z-index:75;
  width:min(560px,100%);max-height:82vh;max-height:82dvh;
  display:flex;flex-direction:column;
  background:#fff;border-radius:18px 18px 0 0;
  transform:translate(-50%,103%);
  transition:transform .32s cubic-bezier(.2,.7,.2,1);
  visibility:hidden;
}
.sheet.open{transform:translate(-50%,0);visibility:visible}
.grab{width:36px;height:4px;border-radius:2px;background:#e0e3e8;margin:8px auto 0;flex:none}
.sheet-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding:10px 18px 12px;flex:none;
}
.sheet-head h2{font-size:16px;font-weight:700}
.sheet-head p{font-size:10px;color:var(--muted);margin-top:2px}
.close-btn{
  width:30px;height:30px;border-radius:50%;background:#f4f5f7;
  color:#7d838d;font-size:12px;display:grid;place-items:center;flex:none;
}
.sheet-body{overflow-y:auto;padding:0 18px calc(24px + env(safe-area-inset-bottom))}
.switch-row{
  display:flex;align-items:center;gap:10px;
  padding:12px 13px;border-radius:10px;margin-bottom:8px;
  background:#f8f9fa;cursor:pointer;
}
.switch-row span:first-child{flex:1}
.switch-row b{display:block;font-size:12.5px;font-weight:650}
.switch-row i{display:block;font-size:9.5px;color:var(--muted);font-style:normal;margin-top:2px}
.switch-row input{position:absolute;opacity:0;pointer-events:none}
.switch{
  width:38px;height:22px;border-radius:99px;background:#e0e3e8;
  position:relative;flex:none;transition:.2s;
}
.switch::after{
  content:"";position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.2s;
}
.switch-row input:checked ~ .switch{background:var(--red)}
.switch-row input:checked ~ .switch::after{left:18px}
.row-btn{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:12px 13px;border-radius:10px;background:#f8f9fa;font-size:12px;color:#3d434d;
}
.row-btn i{font-style:normal;font-size:10px;color:var(--muted)}
.setting-title{font-size:10px;color:var(--muted);margin:18px 0 7px}
.rule-note{font-size:10px;color:#7d838d;line-height:1.8}
.toast{
  position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));z-index:120;
  transform:translate(-50%,12px);opacity:0;pointer-events:none;
  padding:8px 14px;border-radius:99px;background:rgba(23,26,32,.9);color:#fff;
  font-size:12px;white-space:nowrap;transition:.22s;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important}}
@media (min-width:600px){
  body{padding:18px 0}
  .app{border-radius:20px;overflow:hidden;box-shadow:0 20px 60px rgba(16,24,40,.12);min-height:calc(100dvh - 36px)}
  .nav{border-radius:20px 20px 0 0}
}