/* ============================================================
   late. 学习模块 · 样式 v2
   布局：左侧粘性目录 + 右侧内容；内容为「路径 → 主题 → 卡片」三层
   学习模块强调色 = 琥珀；投资主题绿、技术主题蓝（与站点类别语义一致）
   ============================================================ */
:root{
  --bg:#F7F8FA; --surface:#FFFFFF; --line:#E5E9F0; --line-2:#EDF0F5;
  --ink:#1C2536; --ink-2:#3E4A5F; --muted:#8A93A6; --faint:#A6AEBD;
  --blue:#2563EB; --blue-soft:#EAF1FE;
  --green:#0B8A63; --green-soft:#E5F4EE;
  --amber:#C2730D; --amber-soft:#FBF0DF;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --num:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink-2);background:var(--bg);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}

/* ---------- 导航 ---------- */
.nav{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px}
.brand{font-size:20px;font-weight:750;color:var(--ink);letter-spacing:-.01em;display:flex;align-items:baseline;gap:1px}
.brand .dot{color:var(--blue)}
.brand:hover{color:var(--blue)}
.nav-links{display:flex;gap:26px;font-size:15.5px;color:var(--ink-2)}
.nav-links a{transition:color .18s ease}
.nav-links a:hover{color:var(--blue)}
.nav-links a.on{color:var(--blue);font-weight:600}
.nav-mail{font-size:14px;color:var(--muted);white-space:nowrap}

/* ---------- 页头 ---------- */
.page-head{padding:68px 0 0}
.eyebrow{font-size:12px;letter-spacing:3px;color:var(--amber);font-weight:600;margin-bottom:10px}
h1{font-size:clamp(2rem,4vw,2.85rem);line-height:1.14;font-weight:760;color:var(--ink);letter-spacing:-.022em}
.lede{margin-top:16px;color:var(--ink-2);font-size:1.06rem;max-width:42em}
.intro{margin-top:14px;color:var(--muted);font-size:.97rem;max-width:48em;line-height:1.85}
.intro b{color:var(--ink-2)}

/* 进度条 */
.progress{margin:26px 0 0;padding:15px 20px;background:var(--surface);border:1px solid var(--line);border-radius:14px}
.p-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.88rem;color:var(--muted)}
.p-row b{color:var(--ink);font-family:var(--num);font-size:1.02rem}
.p-bar{margin-top:11px;height:6px;border-radius:4px;background:var(--line-2);overflow:hidden;display:flex}
.p-bar i{display:block;height:100%}

/* ---------- 主布局：侧栏 + 内容 ---------- */
.shell{display:grid;grid-template-columns:236px 1fr;gap:44px;align-items:start;margin-top:36px}
.side{position:sticky;top:84px}
.side-block + .side-block{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.side-title{font-size:.76rem;font-weight:700;letter-spacing:.08em;color:var(--faint);margin-bottom:11px}
.toc{display:flex;flex-direction:column;gap:2px}
.toc a{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:9px;
       padding:8px 10px;border-radius:9px;font-size:.9rem;color:var(--ink-2);transition:.15s ease}
.toc a:hover{background:var(--surface)}
.toc a .tno{font-family:var(--num);font-size:.74rem;color:#C0C8D6;font-weight:600}
.toc a .tn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toc a .tp{font-family:var(--num);font-size:.72rem;color:var(--faint)}
.toc a.on{background:var(--surface);color:var(--ink);font-weight:620;box-shadow:inset 3px 0 0 var(--amber)}
.toc a.on .tno{color:var(--amber)}

.search{width:100%;height:36px;padding:0 12px;border:1px solid #D7DEE9;border-radius:9px;
        font-family:inherit;font-size:14px;color:var(--ink);background:var(--surface)}
.search:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.search::placeholder{color:#B4BCCB}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.chip{border:1px solid #D7DEE9;background:var(--surface);color:var(--muted);height:28px;padding:0 11px;
      border-radius:999px;font-family:inherit;font-size:12.5px;cursor:pointer;transition:.15s ease}
.chip:hover{border-color:#C3CDDC;color:var(--ink-2)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.side-hint{font-size:.76rem;color:var(--faint);margin-top:9px;line-height:1.6}
.empty{display:none;padding:36px 4px;color:var(--muted);font-size:.95rem}
.empty.show{display:block}

/* ---------- 学习路径 ---------- */
.sec-title{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.sec-title h2{font-size:1.35rem;font-weight:730;color:var(--ink);letter-spacing:-.015em}
.sec-title .hint{font-size:.86rem;color:var(--muted)}
.paths{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.track{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.t-head{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:5px}
.t-name{font-size:1.04rem;font-weight:700;color:var(--ink)}
.t-en{font-size:.8rem;color:var(--muted)}
.t-desc{font-size:.89rem;color:var(--muted);margin-bottom:14px;line-height:1.68}
.chain{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.node{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;
      font-size:.85rem;font-weight:600;border:1px solid transparent;transition:.15s ease}
.node:hover{transform:translateY(-1px)}
.node .no{font-family:var(--num);font-size:.74rem;opacity:.7}
.node.g{color:#0A6B4D;background:var(--green-soft);border-color:#CBE6DA}
.node.b{color:#1D4ED8;background:var(--blue-soft);border-color:#DBE7FD}
.arrow{color:#C7CFDB;font-size:.88rem}

/* 跨模块入口（英语备考这类形态不同的模块） */
.cross-link{margin-top:16px}
.cross-link a{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 22px;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.cross-link a:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(23,32,56,.07);border-color:#D5DCEA}
.cross-link .cl-t{font-size:1.04rem;font-weight:700;color:var(--ink);white-space:nowrap}
.cross-link .cl-tag{font-size:.72rem;font-weight:600;padding:2px 9px;border-radius:999px;color:#1D4ED8;background:var(--blue-soft);white-space:nowrap}
.cross-link .cl-d{flex:1;min-width:220px;font-size:.89rem;color:var(--muted);line-height:1.7}
.cross-link .cl-g{font-size:.9rem;font-weight:600;color:var(--blue);white-space:nowrap}

/* ---------- 主题 ---------- */
.topic{margin-top:52px;scroll-margin-top:84px}
.topic-panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 24px 20px}
.tp-top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.tp-no{font-family:var(--num);font-size:.82rem;font-weight:700;color:var(--amber);letter-spacing:.04em}
.tp-top h2{font-size:1.42rem;font-weight:740;color:var(--ink);letter-spacing:-.015em}
.tp-en{font-size:.84rem;color:var(--muted)}
.pill{font-size:.74rem;font-weight:600;padding:3px 10px;border-radius:999px}
.pill.g{color:#0A6B4D;background:var(--green-soft)}
.pill.b{color:#1D4ED8;background:var(--blue-soft)}
.tp-intro{font-size:.95rem;color:var(--muted);line-height:1.82;margin-bottom:18px}
.tp-goals{margin-bottom:18px}
.tp-goals .gl{font-size:.76rem;font-weight:700;letter-spacing:.06em;color:var(--faint);margin-bottom:9px}
.tp-goals ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:7px 22px}
.tp-goals li{font-size:.9rem;color:var(--ink-2);padding-left:16px;position:relative;line-height:1.6}
.tp-goals li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:2px;background:var(--green)}
.tp-goals.b li::before{background:var(--blue)}
.tp-meta{display:flex;gap:8px 20px;flex-wrap:wrap;font-size:.84rem;color:var(--muted);
         padding-top:15px;border-top:1px solid var(--line-2)}
.tp-meta b{color:var(--ink-2);font-weight:600}
.tp-kw{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.tp-kw span{font-size:.76rem;color:var(--muted);background:#F2F4F8;border-radius:6px;padding:2px 9px}

/* ---------- 卡片 ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px;margin-top:20px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px 15px;
      transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(23,32,56,.07);border-color:#D5DCEA}
.card.hide{display:none}
.card:target{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.c-head{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.c-head .no{font-family:var(--num);font-size:.78rem;color:#C0C8D6;font-weight:600;min-width:19px}
.c-head h3{flex:1;font-size:.99rem;font-weight:650;color:var(--ink);line-height:1.5;letter-spacing:-.005em}
.c-head h3 a{transition:color .15s ease}
.c-head h3 a:hover{color:var(--blue)}
.st{font-size:.71rem;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap;flex:0 0 auto}
.st-p{color:#6B7480;background:#EEF0F4}
.st-d{color:#8A5308;background:var(--amber-soft)}
.st-y{color:#0A6B4D;background:var(--green-soft)}
.card .s{font-size:.87rem;color:var(--muted);line-height:1.68;margin-bottom:10px;padding-left:29px}
.pts{list-style:none;padding-left:29px;margin-bottom:11px}
.pts li{font-size:.82rem;color:#7E8798;line-height:1.62;padding-left:13px;position:relative}
.pts li + li{margin-top:3px}
.pts li::before{content:"";position:absolute;left:1px;top:.62em;width:4px;height:4px;border-radius:50%;background:#D3DAE5}
.c-foot{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding-left:29px;
        padding-top:11px;border-top:1px solid var(--line-2);font-size:.76rem;color:var(--faint)}
.c-foot .rel a{color:var(--muted);border-bottom:1px solid #DDE3EC;transition:.15s ease}
.c-foot .rel a:hover{color:var(--blue);border-color:var(--blue)}
.c-foot .go{color:var(--blue);font-weight:600}
.c-foot .go:hover{text-decoration:underline}

/* 卡片标签（搜索用，视觉上不显示）*/
.card[data-hide="1"]{display:none}

/* ---------- 说明 ---------- */
.howto{margin-top:60px;padding:22px 24px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.howto h3{font-size:1.02rem;font-weight:700;color:var(--ink);margin-bottom:10px}
.howto p{font-size:.93rem;color:var(--muted);line-height:1.85}
.howto p + p{margin-top:10px}
.howto b{color:var(--ink-2)}
.howto a{color:var(--blue)}

/* ---------- 页脚 ---------- */
.foot{border-top:1px solid var(--line);background:var(--surface);padding:42px 0 52px;margin-top:60px}
.foot-inner{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
.f-brand{font-weight:700;color:var(--ink);font-size:15px}
.f-brand .dot{color:var(--blue)}
.f-mail{color:var(--muted);font-size:.92rem}
.f-mail:hover{color:var(--blue)}
.f-copy{color:var(--muted);font-size:.84rem}

/* ---------- 卡片正文页（打样用） ---------- */
.art{max-width:720px;padding:0 24px 40px;margin:0 auto}
.art-head{padding:56px 0 0}
.art-crumb{font-size:.85rem;color:var(--muted);margin-bottom:20px}
.art-crumb a:hover{color:var(--blue)}
.art-kicker{font-size:.76rem;font-weight:700;letter-spacing:.08em;color:var(--amber);margin-bottom:10px}
.art h1{font-size:clamp(1.7rem,3.4vw,2.35rem);line-height:1.25;font-weight:750;color:var(--ink);letter-spacing:-.02em;margin-bottom:16px}
.art-dek{font-size:1.05rem;color:var(--ink-2);line-height:1.85}
.art-meta{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:.84rem;color:var(--muted);
          display:flex;gap:16px;flex-wrap:wrap}
.art-body{padding:36px 0 0;font-size:1.02rem;line-height:1.95;color:var(--ink-2)}
.art-body h2{font-size:1.18rem;font-weight:700;color:var(--ink);margin:38px 0 12px;letter-spacing:-.01em}
.art-body h2:first-child{margin-top:0}
.art-body h3{font-size:1.03rem;font-weight:650;color:var(--ink);margin:24px 0 8px}
.art-body p{margin-bottom:16px}
.art-body ul,.art-body ol{margin:0 0 16px;padding-left:22px}
.art-body li{margin-bottom:7px}
.art-body strong{color:var(--ink);font-weight:650}
.art-body code{font-family:var(--num);font-size:.9em;background:#F2F4F8;padding:1.5px 6px;border-radius:4px}
.art-body .art-note{font-size:.85rem;color:var(--faint);margin:-10px 0 16px;line-height:1.7}
/* 图示 */
.fig-wrap{margin:26px 0 30px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px 18px 14px}
.fig-wrap .fig{width:100%;height:auto;display:block}
.fig-wrap figcaption{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-2);
                     font-size:.85rem;color:var(--muted);line-height:1.75}
.fig-wrap figcaption b{color:var(--ink-2)}
.art-body .callout{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--amber);
                   border-radius:0 10px 10px 0;padding:14px 18px;margin:20px 0;font-size:.95rem;color:var(--ink-2)}
.art-body .callout b{color:var(--ink)}
.art-body table{border-collapse:collapse;width:100%;margin:18px 0;font-size:.92rem}
.art-body th,.art-body td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.art-body th{background:#F7F8FA;font-weight:600;color:var(--ink)}
.art-end{margin-top:44px;padding-top:22px;border-top:1px solid var(--line)}
.art-end .el{font-size:.76rem;font-weight:700;letter-spacing:.08em;color:var(--faint);margin-bottom:10px}
.art-end ul{list-style:none}
.art-end li{font-size:.92rem;color:var(--muted);padding-left:16px;position:relative;margin-bottom:6px;line-height:1.7}
.art-end li::before{content:"";position:absolute;left:2px;top:.66em;width:5px;height:5px;border-radius:50%;background:#D3DAE5}
.art-nav{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:30px;
         padding-top:20px;border-top:1px solid var(--line);font-size:.9rem}
.art-nav a{color:var(--blue);font-weight:600}
.art-nav a:hover{text-decoration:underline}

@media (max-width:1000px){
  .shell{grid-template-columns:1fr;gap:0}
  .side{position:static;margin-bottom:34px;display:grid;grid-template-columns:1fr 1fr;gap:0 24px;align-items:start}
  .side-block + .side-block{margin-top:0;padding-top:0;border-top:none}
  .paths{grid-template-columns:1fr}
}
@media (max-width:700px){
  .side{grid-template-columns:1fr;gap:18px}
  .tp-goals ul{grid-template-columns:1fr}
}
@media (max-width:640px){
  .nav-mail{display:none}
  .nav-links{gap:14px;font-size:14px}
  .cards{grid-template-columns:1fr}
  .c-head .no{display:none}
  .card .s,.pts,.c-foot{padding-left:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}