/* ============ 半透明二次元手账 · 翠绿森林主题 ============ */
:root{
  --green:#10b981; --green-soft:#a7f3d0;
  --teal:#2dd4bf; --sky:#38bdf8;
  --ink:#1b5942; --muted:#5f9480;
  --glass:rgba(255,255,255,.55);
  --glass-border:rgba(255,255,255,.8);
  --shadow:0 8px 28px rgba(20,110,80,.14);
  --radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC",sans-serif;
  color:var(--ink);min-height:100vh;line-height:1.7;
  background:url('/bg.svg?v=3') no-repeat center top fixed;
  background-size:cover;
}
::selection{background:var(--green-soft)}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--green),var(--sky));border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

.glass{
  background:var(--glass);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow);
  border-radius:var(--radius);
}

/* 飘落的叶子 */
#leaves{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.leaf{
  position:absolute;top:-30px;
  border-radius:0 100% 0 100%;
  background:linear-gradient(135deg,#86efac,var(--green));
  box-shadow:0 0 6px rgba(16,185,129,.3);
  animation:leaf-fall linear infinite;
}
@keyframes leaf-fall{
  0%{transform:translate(0,-30px) rotate(0deg)}
  100%{transform:translate(var(--sx,60px),110vh) rotate(620deg)}
}

/* 云端漂移 */
@keyframes cloud{from{transform:translateX(0)}to{transform:translateX(70px)}}
.d1{animation:cloud 70s ease-in-out infinite alternate}
.d2{animation:cloud 95s ease-in-out infinite alternate}
.d3{animation:cloud 60s ease-in-out infinite alternate}
.d4{animation:cloud 85s ease-in-out infinite alternate}
.d5{animation:cloud 110s ease-in-out infinite alternate}

.wrap{max-width:1800px;margin:0 auto;padding:22px 14px 0;position:relative;z-index:2}

/* 顶部导航（占满整行） */
.nav{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;margin:0;padding:8px 16px;border-radius:0;
  border-left:none;border-right:none;border-top:none;
  box-shadow:0 2px 10px rgba(20,110,80,.07);  /* 覆盖 glass 大阴影，避免投射到下方内容 */
}
.brand{
  font-weight:800;font-size:15.5px;letter-spacing:.3px;text-decoration:none;white-space:nowrap;
  background:linear-gradient(90deg,#059669,#14b8a6,#0ea5e9);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand .sakura{font-size:16px}
.nav-tag{font-size:11.5px;color:var(--muted);white-space:nowrap}
.nav .back{font-size:12.5px;color:var(--ink);text-decoration:none;font-weight:600;margin-right:10px;white-space:nowrap}
.nav .back:hover{color:#059669}

/* 栏目标签 */
.tabs{display:flex;gap:2px;overflow-x:auto;padding-bottom:1px}
.tabs::-webkit-scrollbar{height:3px}
.tab{
  padding:3px 9px;border-radius:8px;font-size:12.5px;color:var(--muted);
  text-decoration:none;white-space:nowrap;border:1px solid transparent;transition:all .18s;
}
.tab i{font-style:normal;font-size:10.5px;opacity:.75;margin-left:2px}
.tab:hover{color:#059669;background:rgba(16,185,129,.12)}
.tab.active{
  background:linear-gradient(90deg,rgba(16,185,129,.26),rgba(14,165,233,.22));
  color:#067a4f;border-color:rgba(16,185,129,.5);font-weight:700;
}

/* Hero（紧凑） */
.hero{padding:16px 22px;margin-bottom:14px;text-align:center;position:relative;overflow:hidden}

/* 纯文字页头（无卡片样式） */
.ptitle{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:2px 2px 14px;font-size:16px;font-weight:800;
}
.ptitle .dim{font-size:12px;color:var(--muted);font-weight:500}
.ptitle .right{margin-left:auto;font-size:11.5px;color:var(--muted);font-weight:500;white-space:nowrap}

/* 财经数据看板 */
.dash{margin-bottom:26px}
.idx-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:10px}
@media (max-width:900px){.idx-cards{grid-template-columns:repeat(2,1fr)}}
.idx-card{padding:11px 14px 8px;border-radius:13px;display:flex;flex-direction:column}
.idx-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:2px}
.idx-name{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.idx-pct{font-size:12px;font-weight:800;white-space:nowrap}
.idx-price{font-size:22px;font-weight:900;line-height:1.25;margin-bottom:4px}
.up{color:#059669}
.down{color:#ef4444}
.spark{width:100%;height:32px;display:block;margin-top:auto}
.spark-empty{font-size:11px;color:var(--muted);padding:8px 0;text-align:center}
.dash-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:1100px){.dash-row{grid-template-columns:1fr}}
.dash-card{padding:14px 16px;border-radius:13px;min-width:0}
.dash-card h3{font-size:13px;font-weight:800;margin-bottom:10px;color:#0b7a4e}
.donut-wrap{display:flex;align-items:center;gap:16px}
.donut{width:92px;height:92px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.donut-hole{width:58px;height:58px;border-radius:50%;background:#f6fffb;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:16px;font-weight:900;color:var(--ink)}
.donut-hole small{font-size:10px;color:var(--muted)}
.legend{display:flex;flex-direction:column;gap:7px;font-size:12.5px}
.legend .lg{display:flex;align-items:center;gap:6px;font-weight:600}
.lg-up{color:#059669}.lg-down{color:#ef4444}.lg-flat{color:#6b7a74}
.bar-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:12px}
.bar-name{width:80px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink);font-weight:600;flex-shrink:0}
.bar-track{flex:1;height:9px;border-radius:6px;background:rgba(120,140,132,.15);overflow:hidden}
.bar-fill{height:100%;border-radius:6px}
.bar-fill.up{background:linear-gradient(90deg,#34d399,#10b981)}
.bar-fill.down{background:linear-gradient(90deg,#f87171,#ef4444)}
.bar-pct{width:66px;text-align:right;font-weight:800;flex-shrink:0}
.bar-pct.up{color:#059669}.bar-pct.down{color:#ef4444}
.sec-title{font-size:14px;font-weight:800;margin:6px 2px 10px;color:#0b7a4e}
.sec-title::before{content:"▍"}
.hero-icon{font-size:34px;line-height:1;margin-bottom:4px}
.grad-title{
  font-size:clamp(20px,3vw,29px);font-weight:900;letter-spacing:.5px;
  background:linear-gradient(90deg,#059669 5%,#14b8a6 50%,#0ea5e9 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:4px;
}
.hero-sub{color:var(--muted);font-size:13px;margin-bottom:6px}
.hero-meta{display:inline-block;font-size:11.5px;color:#067a4f;background:rgba(16,185,129,.14);border:1px solid rgba(16,185,129,.35);padding:2px 12px;border-radius:999px}

/* 卡片流（按浏览器宽度自适应 2~6 列） */
.cards{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:26px;
  container-type:inline-size;
}
@media (min-width:600px){.cards{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px){.cards{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1200px){.cards{grid-template-columns:repeat(5,1fr)}}
@media (min-width:1500px){.cards{grid-template-columns:repeat(6,1fr)}}
@media (min-width:1500px){.card-cover,.card-cover-placeholder{height:150px}}
.card{
  display:block;text-decoration:none;color:inherit;overflow:hidden;border-radius:13px;
  transition:transform .2s ease,box-shadow .2s ease;animation:rise .5s ease both;
}
.cards .card:nth-child(2){animation-delay:.04s}
.cards .card:nth-child(3){animation-delay:.08s}
.cards .card:nth-child(4){animation-delay:.12s}
.cards .card:nth-child(5){animation-delay:.16s}
.cards .card:nth-child(6){animation-delay:.2s}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(20,110,80,.22)}
.card-cover{width:100%;height:104px;object-fit:cover;display:block}
.card-cover-placeholder{width:100%;height:104px;display:flex;align-items:center;justify-content:center;font-size:34px;background:linear-gradient(135deg,#d1fae5,#dbeafe,#cffafe)}
.card-body{padding:9px 10px 11px}
.card-body h2{font-size:13px;font-weight:700;line-height:1.4;margin-bottom:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card:hover .card-body h2{color:#059669}
.meta{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);margin-bottom:5px;flex-wrap:wrap}
.pill{background:linear-gradient(90deg,rgba(16,185,129,.2),rgba(14,165,233,.18));color:#067a4f;border:1px solid rgba(16,185,129,.4);padding:0 8px;border-radius:999px;font-size:10px;font-weight:700}
/* 分类彩色标签 */
.pill.c-anime{background:rgba(255,143,199,.2);color:#c04a94;border-color:rgba(255,143,199,.5)}
.pill.c-manga{background:rgba(167,139,250,.2);color:#7c5cd6;border-color:rgba(167,139,250,.55)}
.pill.c-novel{background:rgba(94,169,255,.18);color:#3f7fd6;border-color:rgba(94,169,255,.5)}
.pill.c-music{background:rgba(72,199,180,.18);color:#0f9d8a;border-color:rgba(72,199,180,.5)}
.pill.c-finance{background:rgba(255,170,86,.2);color:#d97f1f;border-color:rgba(255,170,86,.55)}
.pill.c-other{background:rgba(150,150,160,.18);color:#6d6d7d;border-color:rgba(150,150,160,.4)}
.snip{font-size:11.5px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@container (max-width:210px){.snip{display:none}}

/* 列表布局（财经等无封面栏目） */
.list-panel{overflow:hidden;margin-bottom:26px}
.list-row{
  display:flex;align-items:center;gap:10px;padding:8px 16px;
  border-bottom:1px dashed rgba(46,158,99,.22);transition:background .15s;
}
.list-row:last-child{border-bottom:none}
.list-row:hover{background:rgba(16,185,129,.07)}
.li-rank{font-size:11px;color:var(--muted);min-width:22px;text-align:right;font-weight:700}
.list-row a.li-title{flex:1;min-width:0;text-decoration:none;color:var(--ink);font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-row a.li-title:hover{color:#059669}
.li-date{font-size:11.5px;color:var(--muted);white-space:nowrap}

/* 分页条 */
.pager{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;padding:9px 14px;margin-bottom:26px}
.pg{display:inline-block;min-width:30px;padding:4px 10px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--ink);text-decoration:none;background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.7);text-align:center;transition:all .15s}
.pg:hover{border-color:rgba(16,185,129,.55);color:#059669}
.pg.active{background:linear-gradient(90deg,#10b981,#38bdf8);color:#fff;border-color:transparent}
.pg.disabled{opacity:.35;pointer-events:none}
.pg.dots{border:none;background:none;min-width:auto;padding:4px 2px}
.pg-info{font-size:11.5px;color:var(--muted);margin-left:8px}

/* 实用工具页 */
.tools-sec{padding:15px 18px 17px;margin-bottom:13px}
.tools-sec h2{font-size:15.5px;display:flex;gap:7px;align-items:center;margin-bottom:11px}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px}
@media (min-width:1500px){.tools-grid{grid-template-columns:repeat(6,1fr)}}

/* 财经页双列（个股行情 | 财经快讯） */
.fin-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;margin-bottom:26px}
.fin-col{min-width:0}
@media (max-width:900px){.fin-cols{grid-template-columns:1fr}}
.tool{
  display:flex;gap:8px;align-items:center;padding:8px 10px;border-radius:11px;
  text-decoration:none;color:var(--ink);background:rgba(255,255,255,.42);
  border:1px solid rgba(255,255,255,.75);transition:all .18s;min-width:0;
}
.tool:hover{transform:translateY(-2px);border-color:rgba(16,185,129,.55);background:rgba(255,255,255,.8)}
.tool .t-icon{font-size:17px;flex-shrink:0}
.tool .t-txt{min-width:0}
.tool b{font-size:12.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tool p{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 文章页 */
.article-wrap{max-width:820px}
.article{padding:26px 32px 24px;margin-bottom:26px}
.article > h1{font-size:clamp(19px,2.6vw,25px);line-height:1.4;margin-bottom:10px}
.article .content{margin-top:14px;font-size:15px}
.article .content h1{font-size:22px;margin:20px 0 9px}
.article .content h2{font-size:18.5px;margin:20px 0 9px;padding-left:9px;border-left:4px solid var(--green)}
.article .content h3{font-size:16px;margin:16px 0 7px}
.article .content p{margin:9px 0}
.article .content img{max-width:100%;border-radius:12px;box-shadow:var(--shadow);margin:8px 0}
.article .content a{color:#067a4f;text-decoration:underline;text-decoration-color:rgba(6,122,79,.35)}
.article .content blockquote{border-left:4px solid var(--green);background:rgba(16,185,129,.08);padding:9px 15px;border-radius:0 11px 11px 0;margin:11px 0;color:#5f9480;font-size:13.5px}
.article .content code{background:rgba(45,212,191,.14);color:#0d9488;padding:1px 6px;border-radius:6px;font-size:13px}
.article .content pre{background:rgba(16,70,55,.92);color:#e6fff4;padding:14px;border-radius:12px;overflow-x:auto;margin:11px 0}
.article .content pre code{background:none;color:inherit;padding:0}
.article .content li{margin:4px 0 4px 20px}
.article .content hr{border:none;border-top:1px dashed rgba(45,212,191,.4);margin:16px 0}
.article .content strong{color:#047857}
.source-btn{display:inline-block;margin-top:16px;padding:8px 20px;border-radius:999px;font-size:13.5px;font-weight:600;color:#fff;text-decoration:none;background:linear-gradient(90deg,#10b981,#38bdf8);box-shadow:0 5px 16px rgba(16,185,129,.4);transition:transform .18s}
.source-btn:hover{transform:translateY(-2px)}

/* 页脚 */
.foot{margin:0 auto 22px;max-width:1800px;text-align:center;padding:12px;font-size:11.5px;color:var(--muted);border-radius:13px}
.foot .heart{color:#059669}

@media (max-width:720px){
  .nav{top:0;margin:0;padding:6px 10px;flex-wrap:wrap}
  .hero{padding:13px 14px}
  .article{padding:20px 16px}
  .wrap{padding:16px 8px 0}
  .list-row{padding:7px 10px}
  .card-cover{height:92px}
  .foot{margin:0 8px 14px}
}