/* shared.css — 跨页面公用样式：变量/日期栏/顶部导航栏/卡片网格/详情弹层/页脚 */
* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --blue:#0071e3; --text:#1d1d1f; --secondary:#6e6e73;
  --bg:#f5f5f7; --white:#fff; --border:#d2d2d7; --r:16px;
}
body { font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Helvetica Neue',sans-serif; background:var(--bg); color:var(--text); }
a { color:inherit; text-decoration:none; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* DATE NAV — iOS dock style */
.date-nav {
  position:fixed; left:0; top:50%; transform:translateY(-50%); z-index:60;
  display:flex; flex-direction:column; align-items:center;
  padding:12px 6px 10px;
  background:rgba(18,18,26,.82);
  backdrop-filter:blur(24px) saturate(1.8);
  -webkit-backdrop-filter:blur(24px) saturate(1.8);
  border:1px solid rgba(255,255,255,.1); border-left:none;
  border-radius:0 20px 20px 0;
  box-shadow:4px 0 32px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.07);
  gap:2px;
}
.dn-lbl {
  font-size:7.5px; font-weight:700; color:rgba(255,255,255,.28);
  letter-spacing:.8px; text-transform:uppercase; margin-bottom:6px;
}
.dn-item {
  width:50px; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:8px 4px; cursor:pointer; border-radius:12px; text-decoration:none;
  transform-origin:left center; position:relative;
  transition:transform .25s cubic-bezier(.34,1.4,.64,1), background .15s;
}
.dn-item:hover { background:rgba(255,255,255,.09); }
.dn-item.dn-active { background:rgba(0,113,227,.22); }
.dn-item.dn-active::after {
  content:''; position:absolute; left:-6px; top:50%; transform:translateY(-50%);
  width:3px; height:22px;
  background:linear-gradient(180deg,#00c8ff,#0071e3);
  border-radius:0 3px 3px 0;
  box-shadow:0 0 8px rgba(0,113,227,.8);
}
.dn-day { font-size:16px; font-weight:700; color:rgba(255,255,255,.88); line-height:1; }
.dn-mon { font-size:8px; color:rgba(255,255,255,.32); font-weight:500; }
.dn-item.dn-active .dn-day { color:#4db8ff; }
.dn-item.dn-active .dn-mon { color:rgba(77,184,255,.55); }
.dn-tip {
  position:absolute; left:calc(100% + 12px); top:50%; transform:translateY(-50%);
  background:rgba(18,18,26,.96); color:rgba(255,255,255,.9);
  font-size:11px; font-weight:600; padding:5px 11px; border-radius:9px;
  white-space:nowrap; pointer-events:none; opacity:0;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 4px 20px rgba(0,0,0,.4);
  transition:opacity .12s; z-index:70;
}
.dn-item:hover .dn-tip { opacity:1; }
.dn-sep { width:28px; height:1px; background:rgba(255,255,255,.06); margin:2px 0; }
@media(max-width:900px){ .date-nav{display:none;} }

/* SECTION NAV BAR */
#sec-bar {
  position:sticky; top:0; z-index:100;
  background:rgba(8,10,22,.97);
  border-bottom:1px solid rgba(255,255,255,.1);
  box-shadow:0 1px 0 rgba(255,255,255,.05), 0 4px 32px rgba(0,0,0,.5);
  overflow-x:auto; scrollbar-width:none;
}
#sec-bar::-webkit-scrollbar { display:none; }
#sec-bar-inner {
  display:flex; align-items:center; min-width:max-content;
  padding:0 28px; height:54px; gap:0;
}
#sec-bar-logo {
  display:flex; align-items:center; gap:9px;
  padding-right:24px; margin-right:8px;
  border-right:1px solid rgba(255,255,255,.1);
  flex-shrink:0; text-decoration:none;
}
#sec-bar-logo-icon {
  width:30px; height:30px; border-radius:9px; flex-shrink:0;
  background:linear-gradient(135deg,#0071e3,#30d158);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(0,113,227,.4);
}
#sec-bar-logo-ai { font-size:15px; font-weight:800; letter-spacing:-.3px; background:linear-gradient(135deg,#4db8ff,#30d158); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
#sec-bar-logo-radar { font-size:15px; font-weight:600; color:rgba(255,255,255,.85); letter-spacing:-.2px; }
#sec-bar-inner a {
  display:flex; align-items:center; gap:8px;
  padding:0 16px; height:54px; text-decoration:none;
  font-size:14px; font-weight:700; color:rgba(255,255,255,.38);
  letter-spacing:.4px; white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color .18s;
  position:relative;
}
#sec-bar-inner a::after {
  content:''; position:absolute; bottom:-1px; left:16px; right:16px; height:2px;
  border-radius:1px; background:currentColor; opacity:0;
  transition:opacity .18s, transform .18s;
  transform:scaleX(.4);
}
#sec-bar-inner a:hover { color:rgba(255,255,255,.78); }
#sec-bar-inner a:hover::after { opacity:.35; transform:scaleX(1); }
#sec-bar-inner a.sb-active { color:#fff; }
#sec-bar-inner a.sb-active::after { opacity:1; transform:scaleX(1); }
#sec-bar-inner a.sb-active .sb-dot { opacity:1; transform:scale(1.4); box-shadow:0 0 8px currentColor; }
.sb-dot {
  width:6px; height:6px; border-radius:50%; opacity:.3; flex-shrink:0;
  transition:opacity .18s, transform .18s, box-shadow .18s;
}

/* PAGE HEAD — per-page intro + relatedness links */
.page-head { max-width:1280px; margin:0 auto; padding:36px 40px 4px; }
.page-head h1 { font-size:clamp(24px,3vw,32px); font-weight:700; letter-spacing:-.6px; margin-bottom:8px; }
.page-head p { font-size:14px; color:var(--secondary); line-height:1.7; max-width:660px; }
.page-related { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.page-related a { display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--text); background:var(--white); border:1px solid var(--border); border-radius:20px; padding:6px 14px 6px 10px; transition:transform .15s,box-shadow .15s; }
.page-related a:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.08); }
.page-related .pr-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
@media(max-width:680px){ .page-head{padding:26px 20px 4px;} }

/* PAGE TABS — in-page section quick-jump (multi-section pages) */
.page-tabs { max-width:1280px; margin:0 auto; padding:20px 40px 0; display:flex; gap:14px; flex-wrap:wrap; }
.page-tab {
  display:flex; align-items:center; gap:10px; flex:1; min-width:150px;
  font-size:15px; font-weight:700; color:var(--text);
  background:var(--white); border:1px solid var(--border); border-radius:var(--r);
  padding:16px 20px; transition:transform .18s,box-shadow .18s,border-color .15s,background .15s;
}
.page-tab:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(0,0,0,.08); }
.pt-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; opacity:.75; }
.page-tab.pt-active {
  background:var(--text); border-color:var(--text); color:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.14);
}
.page-tab.pt-active .pt-dot { opacity:1; box-shadow:0 0 8px currentColor; }
@media(max-width:680px){ .page-tabs{padding:16px 20px 0; gap:10px;} .page-tab{min-width:120px; padding:13px 16px; font-size:14px;} }

/* SUPPORT BOX (shared, rendered via renderSupportBox) */
.support-box { background:linear-gradient(150deg,#09090f,#111827); border-radius:24px; padding:60px 40px; text-align:center; }
.support-box h2 { font-size:34px; font-weight:700; letter-spacing:-1px; color:#fff; margin-bottom:10px; }
.support-box > p { font-size:16px; color:rgba(255,255,255,.55); margin-bottom:44px; }
.qr-row { display:flex; justify-content:center; gap:44px; flex-wrap:wrap; }
.qr-item { display:flex; flex-direction:column; align-items:center; gap:14px; }
.qr-item img { width:160px; height:160px; border-radius:14px; object-fit:contain; background:#fff; box-shadow:0 8px 32px rgba(0,0,0,.5); border:2px solid rgba(255,255,255,.08); padding:4px; }
.qr-label { font-size:13px; font-weight:600; color:rgba(255,255,255,.75); display:flex; align-items:center; gap:6px; }
.support-note { font-size:12px; color:rgba(255,255,255,.25); margin-top:30px; }
@media(max-width:680px){ .support-box{padding:44px 24px;} .qr-row{gap:28px;} }

/* LAYOUT */
.wrap { max-width:1280px; margin:0 auto; padding:60px 40px; }
.sec-head { margin-bottom:28px; display:flex; align-items:baseline; gap:14px; }
.sec-label { font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; border-radius:6px; padding:3px 10px; }
.label-chip  { background:#e8f0fe; color:#1a73e8; }
.label-model { background:#fce8e6; color:#c5221f; }
.label-app   { background:#e6f4ea; color:#137333; }
.label-stock { background:#fef7e0; color:#b06000; }
.label-bazi  { background:#f3e8fd; color:#8430ce; }
.sec-title { font-size:clamp(22px,3vw,30px); font-weight:700; letter-spacing:-.6px; }
.sec-sub { font-size:14px; color:var(--secondary); margin-left:auto; }

/* CARD GRID */
.grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid2 { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media(max-width:1100px){ .grid4{grid-template-columns:repeat(2,1fr);} .grid3{grid-template-columns:repeat(2,1fr);} }
@media(max-width:680px){ .grid4,.grid3,.grid2{grid-template-columns:1fr;} .wrap{padding:40px 20px;} .sec-sub{display:none;} }

/* CARD */
.card {
  background:var(--white); border-radius:var(--r);
  padding:22px; border:1px solid var(--border);
  transition:transform .18s,box-shadow .18s; display:flex; flex-direction:column;
}
.card:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(0,0,0,.07); }
.card-tag { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; border-radius:5px; padding:2px 8px; margin-bottom:11px; align-self:flex-start; }
.tag-chip  { background:#e8f0fe; color:#1a73e8; }
.tag-model { background:#fce8e6; color:#c5221f; }
.tag-app   { background:#e6f4ea; color:#137333; }
.tag-bull  { background:#e6f4ea; color:#137333; }
.tag-bear  { background:#fce8e6; color:#c5221f; }
.tag-watch { background:#fef7e0; color:#b06000; }
.card h3 { font-size:15px; font-weight:600; line-height:1.4; margin-bottom:9px; letter-spacing:-.2px; flex:1; }
.card p { font-size:13px; color:var(--secondary); line-height:1.65; }
.card-meta { display:flex; justify-content:space-between; margin-top:14px; font-size:11px; color:#aeaeb2; }
.card-src { font-weight:600; }
.card-dark { background:linear-gradient(140deg,#0d0d0d,#1a1f35); border-color:transparent; }
.card-dark .card-tag { background:rgba(255,255,255,.12); color:#fff; }
.card-dark h3 { color:#fff; }
.card-dark p { color:rgba(255,255,255,.62); }
.card-dark .card-meta { color:rgba(255,255,255,.3); }
.span2 { grid-column:span 2; }

/* DIVIDER */
.divider { height:1px; background:var(--border); max-width:1280px; margin:0 auto 0; }

footer { text-align:center; padding:36px 24px; font-size:12px; color:#aeaeb2; border-top:1px solid var(--border); }

/* DETAIL OVERLAY */
#detail-overlay {
  position:fixed; inset:0; z-index:200;
  background:#f5f5f7;
  transform:translateY(100%);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
  overflow-y:auto; overscroll-behavior:contain;
  pointer-events:none;
}
#detail-overlay.open { transform:translateY(0); pointer-events:auto; }
.detail-topbar {
  position:sticky; top:0; z-index:10;
  background:rgba(245,245,247,.94); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(0,0,0,.08);
  display:flex; align-items:center; gap:12px;
  padding:0 24px; height:52px;
}
.detail-back {
  display:flex; align-items:center; gap:5px;
  font-size:15px; font-weight:600; color:#0071e3;
  background:none; border:none; cursor:pointer; padding:0; flex-shrink:0;
}
.detail-crumb { font-size:13px; color:rgba(0,0,0,.38); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.detail-hero { padding:36px 28px 28px; background:linear-gradient(145deg,#060c1a,#0e1830); }
.detail-hero-tag { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; border-radius:20px; padding:3px 12px; margin-bottom:14px; background:rgba(255,255,255,.1); color:rgba(255,255,255,.65); }
.detail-hero h1 { font-size:clamp(19px,3.5vw,26px); font-weight:700; color:#fff; line-height:1.3; letter-spacing:-.4px; margin-bottom:12px; }
.detail-hero-meta { display:flex; flex-wrap:wrap; gap:12px; font-size:12px; color:rgba(255,255,255,.38); }
.detail-body { max-width:780px; margin:0 auto; padding:28px 28px 72px; }
.dt-label { font-size:10px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:rgba(0,0,0,.3); margin-bottom:10px; margin-top:24px; }
.dt-text { font-size:15px; color:#1d1d1f; line-height:1.8; }
.dt-divider { height:1px; background:rgba(0,0,0,.07); margin:22px 0; }
.dt-pills { display:flex; flex-direction:column; gap:8px; }
.dt-pill { display:flex; align-items:flex-start; gap:10px; background:#fff; border:1px solid #e8e8e8; border-radius:12px; padding:12px 16px; font-size:13px; line-height:1.55; color:#1d1d1f; }
.dt-pill-icon { font-size:15px; flex-shrink:0; margin-top:1px; }
.dt-kline { width:100%; border-radius:14px; display:block; border:1px solid rgba(0,0,0,.06); margin-bottom:4px; }
.dt-rating-row { display:flex; align-items:center; gap:12px; margin:16px 0; flex-wrap:wrap; }
.dt-rating-big { font-size:22px; font-weight:800; border-radius:10px; padding:6px 18px; }
.dt-conf { font-size:13px; font-weight:600; padding:5px 12px; border-radius:8px; background:rgba(0,0,0,.05); color:#555; }
.dt-impact { display:inline-block; font-size:11px; font-weight:700; border-radius:6px; padding:3px 10px; margin-bottom:14px; }
.dt-stocks-grid { display:flex; flex-wrap:wrap; gap:8px; }
.dt-stock-chip { display:flex; align-items:center; gap:6px; border-radius:8px; padding:6px 12px; font-size:13px; font-weight:700; }
.dt-model-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid rgba(0,0,0,.05); }
.dt-model-row:last-child { border-bottom:none; }
.dt-model-name { font-size:14px; font-weight:600; min-width:100px; }
.dt-model-bar-wrap { flex:1; height:6px; background:rgba(0,0,0,.07); border-radius:3px; overflow:hidden; }
.dt-model-bar { height:100%; border-radius:3px; background:linear-gradient(90deg,#0071e3,#30d158); }
.dt-model-score { font-size:12px; font-weight:700; min-width:26px; text-align:right; }
.dt-model-badge { font-size:10px; font-weight:700; border-radius:4px; padding:2px 6px; }
.dt-eco-wrap { display:flex; flex-wrap:wrap; gap:7px; }
.dt-eco-tag { font-size:12px; background:rgba(0,0,0,.05); color:#555; border-radius:7px; padding:4px 10px; }

/* clickable elements */
.card,.cs,.co-card,.scan-row { cursor:pointer; }
.card:active,.cs:active { transform:scale(.985); }