:root{
  --bg0:#07130e; --bg1:#0d2418; --bg2:#123322;
  --ink:#f2fbf6; --ink-soft:rgba(233,247,240,.80); --ink-dim:rgba(214,236,225,.54);
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --card:rgba(255,255,255,.045); --card-hi:rgba(255,255,255,.075);
  --accent:#5fe0a0; --accent-2:#9ff5c9;
  --up:#ff5d5d; --down:#31c98a; --flat:#9fb3a9;
  --r:20px; --maxw:760px;
  --island-h:46px;
}
html[data-theme="light"]{
  --bg0:#f2f7f3; --bg1:#e6f0e9; --bg2:#dcebe1;
  --ink:#0d2118; --ink-soft:rgba(18,45,33,.84); --ink-dim:rgba(24,54,40,.58);
  --line:rgba(12,40,26,.10); --line-2:rgba(12,40,26,.16);
  --card:rgba(255,255,255,.74); --card-hi:rgba(255,255,255,.92);
  --accent:#0f9b62; --accent-2:#0b7a4c;
  --up:#d92b2b; --down:#0f8f5f; --flat:#6b7d74;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg0); color:var(--ink-soft);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro SC","PingFang SC",
    "HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;
  font-size:16px; line-height:1.68; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* ---------- 背景：渐变统一 + 点阵 ---------- */
.bg{position:fixed; inset:0; z-index:-1; overflow:hidden;
  background:
    radial-gradient(1200px 700px at 78% -12%, var(--bg2) 0%, transparent 62%),
    radial-gradient(900px 620px at 8% 8%, var(--bg1) 0%, transparent 58%),
    linear-gradient(176deg, var(--bg1) 0%, var(--bg0) 46%, var(--bg0) 100%);
}
.bg .blob{position:absolute; border-radius:50%; filter:blur(70px); opacity:.30}
.bg .b1{width:520px;height:520px;left:-160px;top:-120px;
  background:radial-gradient(circle,#2fbf85 0%,transparent 68%)}
.bg .b2{width:620px;height:620px;right:-200px;top:14%;
  background:radial-gradient(circle,#1d7f66 0%,transparent 70%);opacity:.24}
.bg .dots{position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(var(--line-2) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 62%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 62%,transparent 100%);
}
.bg .grain{position:absolute;inset:0;opacity:.16;mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.35) .5px, transparent .5px);
  background-size:3px 3px}
html[data-theme="light"] .bg .blob{opacity:.18}

/* ---------- 头部 ---------- */
.hero{max-width:var(--maxw); margin:0 auto; padding:56px 22px 26px;}
.hero-top{display:flex; justify-content:space-between; align-items:baseline;
  color:var(--ink-dim); font-size:13.5px; letter-spacing:.06em}
.hero-title{margin:10px 0 0; font-size:clamp(34px,9vw,46px); line-height:1.1;
  font-weight:700; letter-spacing:-.02em; color:var(--ink)}
.oneline{margin:16px 0 0; font-size:17px; line-height:1.7; color:var(--ink-soft);
  max-width:34em}
.hero-meta{margin-top:14px; color:var(--ink-dim); font-size:12.5px; letter-spacing:.04em}

/* ---------- 灵动岛 ---------- */
.island{position:fixed; top:calc(env(safe-area-inset-top,0px) + 10px);
  left:50%; transform:translateX(-50%); z-index:40;
  display:flex; align-items:center; gap:10px;
  height:var(--island-h); padding:0 8px 0 16px;
  border-radius:999px; border:1px solid var(--line-2);
  background:color-mix(in srgb, var(--bg0) 72%, transparent);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
  box-shadow:0 10px 34px rgba(0,0,0,.34);
  transition:transform .5s cubic-bezier(.22,1,.36,1), opacity .4s, box-shadow .4s;
  opacity:0; transform:translate(-50%,-16px) scale(.96); pointer-events:none;
  max-width:calc(100vw - 24px);
}
.island.on{opacity:1; transform:translate(-50%,0) scale(1); pointer-events:auto}
.island-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent);
  animation:pulse 2.4s ease-out infinite; flex:none}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}
  70%{box-shadow:0 0 0 9px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
.island-label{color:var(--ink); font-size:14.5px; font-weight:600;
  letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:44vw}
.island-bar{position:relative;width:56px;height:3px;border-radius:2px;
  background:var(--line-2); overflow:hidden; flex:none}
.island-bar i{position:absolute;inset:0;transform-origin:left center;
  transform:scaleX(0); background:linear-gradient(90deg,var(--accent),var(--accent-2));
  border-radius:2px}
.island-theme{border:0;background:transparent;color:var(--ink-dim);
  font-size:15px;cursor:pointer;padding:6px 8px;border-radius:999px;line-height:1;flex:none}
.island-theme:hover{color:var(--ink);background:var(--card-hi)}

/* ---------- 区块 ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:8px 22px 40px}
.sec{margin:40px 0 0}
.sec-head{display:flex; align-items:center; gap:9px; margin:0 0 16px;
  font-size:19px; font-weight:650; letter-spacing:.01em; color:var(--ink)}
.sec-icon{font-size:19px; line-height:1; filter:saturate(1.1)}
.sec-head::after{content:""; flex:1; height:1px;
  background:linear-gradient(90deg,var(--line-2),transparent)}

.items{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.card{position:relative; padding:17px 18px 15px 20px; border-radius:var(--r);
  border:1px solid var(--line); background:var(--card);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  /* 左图右文。头条除外（.card.hl 走 block，大图铺顶） */
  display:flex; gap:13px; align-items:flex-start;
  transition:background .3s, border-color .3s, transform .5s cubic-bezier(.22,1,.36,1)}
.card.hl{display:block}
.card:hover{background:var(--card-hi); border-color:var(--line-2)}
.card .lead{position:absolute; left:0; top:16px; bottom:16px; width:2px;
  border-radius:2px; background:linear-gradient(180deg,var(--accent),transparent);
  opacity:.5}
.card.hl .lead{opacity:1; background:linear-gradient(180deg,var(--accent),var(--accent-2))}

/* 缩略图方块。没图时用栏目图标占位——约一半条目拿不到图，
   占位能保住左右对齐的节奏，不至于看起来像"图挂了"。 */
.thumb{flex:none; width:68px; height:68px; border-radius:11px; overflow:hidden;
  display:block; border:1px solid var(--line-2); background:var(--card-hi);
  transition:border-color .3s, transform .4s cubic-bezier(.22,1,.36,1)}
a.thumb:hover{border-color:var(--accent); transform:scale(1.03)}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}
/* 没图时的占位。约八成条目拿不到图（Google News 一家就占四成五，
   而它按设计就不给图），所以这个占位会经常出现，必须做得像"设计"
   而不是像"图挂了"——所以用实心渐变块 + 栏目图标，不用虚线和灰底。 */
.thumb-ph{display:flex; align-items:center; justify-content:center;
  font-size:23px; line-height:1; border-color:transparent; opacity:.66;
  background:linear-gradient(145deg,
    color-mix(in srgb, var(--accent) 18%, var(--card-hi)),
    color-mix(in srgb, var(--accent-2) 8%, var(--card-hi)))}
html[data-theme="light"] .thumb-ph{opacity:.5}
.card-main{flex:1; min-width:0}  /* min-width:0：否则长标题不肯换行，会撑破卡片 */

/* 头条大图：负 margin 铺满卡片顶部，圆角跟着卡片走。
   这里**不强制 16:9**——实测硬裁 16:9 会把图片自带的标题横幅砍掉一半，
   露出半截文字反而像渲染坏了。改成完整显示、只限最高。 */
.card.hl .fig{display:block; margin:-17px -18px 14px -20px;
  border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;
  overflow:hidden; background:var(--card-hi)}
.card.hl .fig img{width:100%; height:auto; max-height:340px;
  object-fit:cover; object-position:center; display:block}
.card.hl.has-fig .lead{display:none}  /* 有图时左侧竖线会压在图上 */

.ttl{margin:0; font-size:16.5px; line-height:1.5; font-weight:620;
  letter-spacing:-.005em; color:var(--ink);
  /* flex 让编号徽章和标题首行精确对齐；标题换行时文字会自动缩进，
     不会跑到徽章下面去（用 vertical-align 做不到这一点）。 */
  display:flex; align-items:flex-start; gap:9px}
.card.hl .ttl{font-size:18px}
.body{margin:9px 0 0; font-size:14.6px; line-height:1.7; color:var(--ink-soft)}
.src{margin-top:11px; display:inline-flex; align-items:center; gap:5px;
  font-size:12.6px; letter-spacing:.03em; color:var(--ink-dim);
  text-decoration:none; border-bottom:1px solid transparent; transition:color .2s,border-color .2s}
.src:hover{color:var(--accent); border-color:currentColor}
.src .arrow{font-size:11px; opacity:.7}
.idx{flex:none; display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; padding:0 6px; margin-top:1px;
  border-radius:7px; font-size:12.5px; font-weight:660; color:var(--bg0);
  background:linear-gradient(135deg,var(--accent),var(--accent-2))}

/* ---------- 行情 ---------- */
.mkt{display:grid; gap:12px}
.mgrid{padding:15px 17px; border-radius:var(--r); border:1px solid var(--line);
  background:var(--card); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px)}
.mlabel{font-size:12.4px; letter-spacing:.1em; color:var(--ink-dim); margin-bottom:9px}
.mrow{display:grid; grid-template-columns:1fr auto auto; gap:12px;
  align-items:baseline; padding:5px 0; border-top:1px solid var(--line)}
.mrow:first-of-type{border-top:0}
.mname{font-size:14.6px; color:var(--ink-soft)}
.mprice{font-size:15px; font-weight:620; color:var(--ink);
  font-variant-numeric:tabular-nums; letter-spacing:.01em}
.mpct{font-size:13.6px; font-weight:640; font-variant-numeric:tabular-nums;
  min-width:74px; text-align:right}
.mpct.up{color:var(--up)} .mpct.down{color:var(--down)} .mpct.flat{color:var(--flat)}
.mood{padding:16px 17px; border-radius:var(--r); border:1px solid var(--line);
  background:linear-gradient(135deg,var(--card-hi),var(--card));
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px)}
.mood-main{font-size:15px; color:var(--ink-soft); display:flex; align-items:baseline;
  gap:7px; flex-wrap:wrap}
.mood .big{font-size:24px; font-weight:700; color:var(--ink);
  font-variant-numeric:tabular-nums; line-height:1}
.mood .sep{color:var(--ink-dim)}
.zt-hot{margin-top:9px; font-size:13.8px; color:var(--ink-soft)}.zt-boards{margin-top:11px; display:flex; flex-wrap:wrap; gap:7px}
.chip{display:inline-flex; align-items:baseline; gap:3px; padding:4px 9px;
  border-radius:999px; font-size:12.6px; color:var(--ink-soft);
  border:1px solid var(--line-2); background:var(--card)}
.chip b{color:var(--up); font-weight:700; margin:0 1px}
.mnote{margin:11px 2px 0; font-size:12.2px; color:var(--ink-dim); letter-spacing:.02em}

/* ---------- 归档 ---------- */
.arc-wrap{margin:52px 0 0}
.arc-title{margin:0 0 14px; font-size:15px; font-weight:620; color:var(--ink-dim);
  letter-spacing:.12em}
.arc-list{display:flex; flex-wrap:wrap; gap:8px}
.arc{padding:7px 13px; border-radius:999px; font-size:13px; text-decoration:none;
  color:var(--ink-soft); border:1px solid var(--line); background:var(--card);
  transition:color .2s,border-color .2s,background .2s}
.arc:hover{color:var(--ink); border-color:var(--line-2); background:var(--card-hi)}
.arc.cur{color:var(--bg0); border-color:transparent;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); font-weight:640}

/* ---------- 页脚 ---------- */
.foot{max-width:var(--maxw); margin:0 auto; padding:26px 22px 60px;
  border-top:1px solid var(--line); font-size:12.6px; color:var(--ink-dim);
  letter-spacing:.03em}
.foot-dim{margin-top:6px; opacity:.72}

/* ---------- 滚动显现（双向） ---------- */
.reveal,.reveal-sec{opacity:0; transform:translateY(20px);
  transition:opacity .72s cubic-bezier(.22,1,.36,1),
             transform .72s cubic-bezier(.22,1,.36,1)}
.reveal.in,.reveal-sec.in{opacity:1; transform:none}
.items .card:nth-child(2){transition-delay:.05s}
.items .card:nth-child(3){transition-delay:.1s}
.items .card:nth-child(4){transition-delay:.15s}
.items .card:nth-child(5){transition-delay:.2s}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-sec{opacity:1!important; transform:none!important; transition:none!important}
}

@media (max-width:430px){
  .hero{padding:44px 18px 22px}
  .wrap{padding:6px 18px 32px}
  /* 行情保持「名称 价格 涨跌」一行：390px 实测放得下（最长的组合
     也就 260px 左右），折成两行会让每组行情高度翻倍，反而更难扫。
     这里只收窄字号，不改变列结构。 */
  .mname{font-size:14px}
  .mprice{font-size:14.6px}
  .mpct{font-size:13px; min-width:66px}
  .mood .big{font-size:22px}
  /* 卡片跟着收窄：缩略图太大就会把标题挤成竖排 */
  .card{padding:15px 15px 13px 17px; gap:11px}
  .thumb{width:58px; height:58px; border-radius:9px}
  .thumb-ph{font-size:20px}
  .card.hl .fig{margin:-15px -15px 12px -17px}
  .ttl{font-size:15.8px}
  .card.hl .ttl{font-size:17px}
  .body{font-size:14.2px}
}
/* 只有窄到 340px（老机型/分屏）才真的放不下，这时才折行 */
@media (max-width:340px){
  .mrow{grid-template-columns:1fr auto; row-gap:1px}
  .mpct{grid-column:2; text-align:right}
  /* 极窄屏索性不要缩略图，把宽度全留给标题 */
  .thumb{display:none}
}
@media print{
  .bg,.island,.arc-wrap{display:none}
  body{background:#fff;color:#111}
  .card,.mgrid,.mood{border-color:#ddd;background:#fff}
}