/* 毕设选题库 · 移动优先，浅色但有层次 */
:root {
  --ink:#16161a; --soft:#3f4048; --muted:#71727c; --faint:#9a9ba5;
  --line:#e6e4ee; --hair:#f0eef6;
  --paper:#fff; --bg:#f7f6fb; --wash:#f3f2f8;
  --blue:#2f5bd6; --blue-soft:#eaf0ff;
  --berry:#c92a63; --berry-soft:#fdecf3;
  --green:#1a7a4c; --green-soft:#e7f6ee;
  --amber:#a8690d; --amber-soft:#fdf1e0;
  --violet:#6243c9; --violet-soft:#efebff;
  --radius:16px;
  --shadow-s:0 1px 2px rgba(22,22,26,.04), 0 10px 24px rgba(22,22,26,.05);
  --shadow-m:0 2px 6px rgba(22,22,26,.06), 0 22px 44px rgba(22,22,26,.09);
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; color:var(--ink); background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(42rem 26rem at 6% -6%, rgba(98,67,201,.16), transparent 62%),
    radial-gradient(38rem 24rem at 102% 4%, rgba(201,42,99,.14), transparent 60%),
    radial-gradient(46rem 30rem at 50% 108%, rgba(47,91,214,.12), transparent 64%);
}
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; }
h1,h2,h3,p,ol,ul { margin:0; padding:0; }
li { list-style:none; }
.wrap { width:min(960px, calc(100% - 32px)); margin-inline:auto; }

/* 顶栏 */
.bar { position:sticky; top:0; z-index:30; background:rgba(247,246,251,.78); backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid transparent; transition:border-color .25s, background .25s; }
.bar.stuck { border-bottom-color:var(--line); background:rgba(247,246,251,.93); }
.bar-in { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:56px; }
.bar-back { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; }
.bar-back img { width:26px; height:26px; border-radius:50%; border:1px solid var(--line); object-fit:cover; }
.bar-back i { font-style:normal; color:var(--faint); }
.bar-wechat { padding:8px 15px; border:0; border-radius:999px; color:#fff; font-size:13px; font-weight:600; cursor:pointer;
  background:linear-gradient(120deg,#20212a,#3a2b4d); box-shadow:0 6px 16px rgba(22,22,26,.22); }

/* 头部 */
.head { position:relative; padding:34px 0 24px; }
.eyebrow { display:inline-flex; align-items:center; gap:7px; padding:5px 12px 5px 9px; border:1px solid rgba(201,42,99,.22); border-radius:999px;
  background:linear-gradient(120deg,#fff,var(--berry-soft)); color:var(--berry); font-size:12.5px; font-weight:700; }
.eyebrow::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--berry); box-shadow:0 0 0 3px rgba(201,42,99,.16); }
.head h1 { margin:16px 0 14px; font-size:clamp(30px,8vw,46px); line-height:1.14; letter-spacing:-.02em; }
.head h1 b { font-weight:inherit; background:linear-gradient(100deg,var(--violet),var(--berry)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.head p { color:var(--soft); font-size:15px; line-height:1.86; }
.head .head-sub { margin-top:12px; color:var(--muted); font-size:14.5px; }
.head-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:22px; }
.head-stats div { position:relative; padding:14px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.9); box-shadow:var(--shadow-s); overflow:hidden; }
.head-stats div::after { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,var(--violet),var(--berry)); }
.head-stats div:nth-child(2)::after { background:linear-gradient(90deg,var(--berry),#f08a3c); }
.head-stats div:nth-child(3)::after { background:linear-gradient(90deg,var(--blue),var(--violet)); }
.head-stats strong { display:block; font-size:21px; letter-spacing:-.01em; }
.head-stats span { display:block; margin-top:3px; color:var(--muted); font-size:11.5px; }

/* 区块标题 */
.sec { padding:30px 0 0; }
.sec-top { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:16px; }
.sec-top h2 { position:relative; padding-left:13px; font-size:20px; letter-spacing:-.015em; }
.sec-top h2::before { content:""; position:absolute; left:0; top:.22em; bottom:.22em; width:4px; border-radius:3px; background:linear-gradient(180deg,var(--violet),var(--berry)); }
.sec-top span { color:var(--faint); font-size:12.5px; }
.note { margin-top:14px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.72); color:var(--muted); font-size:13px; line-height:1.8; }

/* 导读正文 */
.prose p { color:var(--soft); font-size:15px; line-height:1.9; }
.prose p + p { margin-top:14px; }
.prose h3 { position:relative; margin:28px 0 12px; padding-left:14px; font-size:17px; letter-spacing:-.01em; }
.prose h3::before { content:""; position:absolute; left:0; top:.3em; width:6px; height:6px; border-radius:50%; background:var(--berry); }
.prose h3:first-child { margin-top:0; }
.prose a { color:var(--blue); border-bottom:1px solid rgba(47,91,214,.32); }
.prose > div, .prose > ul { margin:16px 0; }

.three { display:grid; gap:9px; }
.three div { position:relative; padding:16px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.92); box-shadow:var(--shadow-s); }
.three div:nth-child(1) { background:linear-gradient(150deg,#fff,var(--blue-soft)); }
.three div:nth-child(2) { background:linear-gradient(150deg,#fff,var(--violet-soft)); }
.three div:nth-child(3) { background:linear-gradient(150deg,#fff,var(--green-soft)); }
.three b { display:block; margin-bottom:6px; font-size:14.5px; }
.three p { color:var(--soft); font-size:13.5px; line-height:1.78; }

.vs { display:grid; gap:9px; }
.vs div { padding:17px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.92); box-shadow:var(--shadow-s); }
.vs div:first-child { background:linear-gradient(150deg,#fff,var(--blue-soft)); border-color:#dce5fb; }
.vs div:last-child { background:linear-gradient(150deg,#fff,var(--berry-soft)); border-color:#f6dbe6; }
.vs b { display:block; margin-bottom:7px; font-size:14.5px; }
.vs p { color:var(--soft); font-size:13.5px; line-height:1.78; }

.chain { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:16px; border:1px solid var(--line); border-radius:14px;
  background:linear-gradient(120deg,rgba(255,255,255,.95),rgba(239,235,255,.9)); box-shadow:var(--shadow-s); }
.chain span { padding:6px 11px; border-radius:9px; background:#fff; border:1px solid var(--line); color:var(--soft); font-size:12.5px; font-weight:600; }
.chain i { color:var(--violet); font-style:normal; font-size:13px; }

.levels3 { display:grid; gap:9px; }
.levels3 div { display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:start; padding:15px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.92); box-shadow:var(--shadow-s); }
.levels3 .lv { padding:4px 10px; border-radius:7px; font-size:11.5px; font-weight:700; white-space:nowrap; }
.levels3 p { color:var(--soft); font-size:13.5px; line-height:1.78; }
.lv[data-lv="入门"] { background:var(--green-soft); color:var(--green); }
.lv[data-lv="适中"] { background:var(--blue-soft); color:var(--blue); }
.lv[data-lv="进阶"] { background:var(--berry-soft); color:var(--berry); }

.pit { display:grid; gap:10px; padding:16px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.88); }
.pit li { position:relative; padding-left:18px; color:var(--muted); font-size:13.5px; line-height:1.8; }
.pit li::before { content:""; position:absolute; left:2px; top:.72em; width:6px; height:6px; border-radius:2px; transform:rotate(45deg); background:linear-gradient(135deg,var(--berry),var(--violet)); }
.pit b { color:var(--ink); font-weight:650; }

/* 树莓派专题 */
.pi-intro { position:relative; padding:18px; margin-bottom:11px; border:1px solid rgba(201,42,99,.18); border-radius:16px; overflow:hidden;
  background:linear-gradient(140deg,#fff 30%,var(--berry-soft) 78%,#f2ecff); box-shadow:var(--shadow-s); }
.pi-intro p { color:var(--soft); font-size:14px; line-height:1.86; }
.pi-intro p + p { margin-top:10px; }
.pi-stack { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.pi-stack span { padding:5px 10px; border:1px solid rgba(201,42,99,.18); border-radius:999px; background:rgba(255,255,255,.86); color:var(--berry); font-size:11.5px; font-weight:600; }
.picks { display:grid; gap:9px; }
.pick { position:relative; padding:17px 16px 15px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.95); box-shadow:var(--shadow-s); overflow:hidden; transition:transform .22s, box-shadow .22s; }
.pick::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--berry),var(--violet)); }
.pick:hover { transform:translateY(-3px); box-shadow:var(--shadow-m); }
.pick-no { display:inline-block; padding:2px 8px; border-radius:6px; background:linear-gradient(120deg,var(--berry-soft),var(--violet-soft)); color:var(--berry); font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; }
.pick h3 { margin:9px 0 8px; font-size:15px; line-height:1.56; font-weight:650; }
.pick > p { color:var(--muted); font-size:13px; line-height:1.78; }
.pick-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; padding-top:11px; border-top:1px dashed var(--hair); }
.pick-meta span { padding:3px 9px; border-radius:7px; background:var(--wash); color:var(--muted); font-size:11px; }
.pick-meta .hw { background:var(--blue-soft); color:var(--blue); }
.pick-meta .lv { background:var(--berry-soft); color:var(--berry); font-weight:700; }
.more-line { display:flex; justify-content:center; margin-top:14px; }
.more-line button, .load {
  min-height:44px; padding:0 22px; border:1px solid var(--line); border-radius:999px;
  background:rgba(255,255,255,.94); font-size:14px; font-weight:650; cursor:pointer;
  box-shadow:var(--shadow-s); transition:transform .2s, border-color .2s;
}
.more-line button:hover, .load:hover { transform:translateY(-2px); border-color:var(--violet); color:var(--violet); }

/* 筛选条 */
.filter { position:sticky; top:56px; z-index:20; margin:0 -16px; padding:10px 16px 9px; background:rgba(247,246,251,.94); backdrop-filter:blur(16px); }
.search { display:flex; align-items:center; gap:10px; padding:0 15px; border:1px solid var(--line); border-radius:999px; background:#fff; box-shadow:var(--shadow-s); transition:border-color .2s; }
.search:focus-within { border-color:var(--violet); }
.search svg { width:16px; height:16px; color:var(--faint); flex:none; }
.search input { flex:1; min-width:0; padding:12px 0; border:0; outline:0; background:none; font-size:15px; }
.search input::placeholder { color:var(--faint); }
.search button { padding:4px; border:0; background:none; color:var(--faint); font-size:17px; line-height:1; cursor:pointer; }
.chips { display:flex; gap:6px; margin-top:9px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.chips::-webkit-scrollbar { display:none; }
.chips button { flex:0 0 auto; padding:7px 13px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--soft); font-size:13px; cursor:pointer; white-space:nowrap; transition:.18s; }
.chips button:hover { border-color:var(--violet); color:var(--violet); }
.chips button[aria-pressed="true"] { border-color:transparent; color:#fff; background:linear-gradient(120deg,#26232e,#40304f); box-shadow:0 6px 14px rgba(22,22,26,.18); }
.chips button.pi[aria-pressed="true"] { background:linear-gradient(120deg,var(--berry),#e0538b); box-shadow:0 6px 14px rgba(201,42,99,.28); }
.count { padding:12px 2px 9px; color:var(--muted); font-size:12.5px; }
.count b { color:var(--ink); font-variant-numeric:tabular-nums; }

/* 选题列表 */
.list { display:grid; gap:7px; }
.list li {
  position:relative; padding:13px 14px 12px 17px; border:1px solid var(--line); border-radius:13px;
  background:rgba(255,255,255,.94); box-shadow:var(--shadow-s); overflow:hidden;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.list li::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--c,var(--violet)); }
.list li:hover { transform:translateY(-2px); box-shadow:var(--shadow-m); border-color:#dcd8ea; }
.list li.pi { background:linear-gradient(115deg,rgba(255,255,255,.96) 55%,var(--berry-soft)); }
.row-t { display:flex; gap:10px; align-items:flex-start; }
.row-no { flex:none; width:32px; padding-top:1px; color:var(--faint); font-size:11px; font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.row-t h3 { flex:1; font-size:14.5px; line-height:1.6; font-weight:640; }
.row-t h3 mark { background:linear-gradient(transparent 62%, rgba(255,214,0,.55) 0); color:inherit; }
.row-m { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:7px 0 0 42px; color:var(--muted); font-size:11.5px; }
.row-m .lv { padding:2px 8px; border-radius:6px; font-size:10.5px; font-weight:700; }
.row-m .cat { padding:2px 8px; border-radius:6px; color:var(--c,var(--violet)); background:color-mix(in srgb, var(--c,#6243c9) 12%, #fff); font-weight:600; }
.row-m i { color:#cfcdd9; font-style:normal; }
.empty { padding:44px 18px; text-align:center; color:var(--muted); font-size:13.5px; border:1px dashed var(--line); border-radius:16px; background:rgba(255,255,255,.7); }
.empty b { display:block; margin-bottom:6px; color:var(--ink); font-size:15px; }
.load-wrap { display:flex; flex-direction:column; align-items:center; gap:9px; margin-top:18px; }
.load-wrap p { color:var(--faint); font-size:12px; }

/* 常见问题 */
.faq { display:grid; gap:9px; }
.faq details { padding:15px 17px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.92); box-shadow:var(--shadow-s); }
.faq details[open] { background:linear-gradient(150deg,#fff,var(--violet-soft)); }
.faq summary { display:flex; justify-content:space-between; gap:12px; align-items:center; font-size:14.5px; font-weight:640; cursor:pointer; list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--violet); font-size:18px; font-weight:400; }
.faq details[open] summary::after { content:"–"; }
.faq p { margin-top:11px; color:var(--soft); font-size:13.5px; line-height:1.84; }

/* 服务说明 */
.policy { display:grid; gap:10px; }
.policy > div { padding:18px; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-s); }
.policy b { display:block; margin-bottom:10px; font-size:15.5px; letter-spacing:-.01em; }
.policy p { color:var(--soft); font-size:13.5px; line-height:1.84; }
.policy p + p { margin-top:10px; }
.policy-no { background:linear-gradient(150deg,#fff 30%,#fdeeee); border-color:#f3dada !important; }
.policy-no b { color:#b3261e; }
.policy-yes { background:linear-gradient(150deg,#fff 30%,var(--green-soft)); border-color:#d6ecdf !important; }
.policy-yes b { color:var(--green); }
.policy ul { display:grid; gap:9px; margin-bottom:12px; }
.policy li { padding:11px 13px; border-radius:11px; background:rgba(255,255,255,.85); color:var(--muted); font-size:13px; line-height:1.7; }
.policy li span { display:block; margin-bottom:2px; color:var(--ink); font-size:13.5px; font-weight:650; }

/* 底部 CTA */
.cta {
  position:relative; margin:30px auto 0; padding:30px 22px; border:1px solid var(--line); border-radius:20px; overflow:hidden; text-align:center;
  background:linear-gradient(145deg,#fff 20%,var(--violet-soft) 70%,var(--berry-soft));
  box-shadow:var(--shadow-m);
}
.cta h2 { font-size:23px; line-height:1.34; letter-spacing:-.015em; }
.cta > p { max-width:48ch; margin:11px auto 0; color:var(--muted); font-size:13.5px; line-height:1.84; }
.cta-links { display:grid; gap:9px; margin-top:20px; text-align:left; }
.cta-links a, .cta-links button {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.95);
  cursor:pointer; transition:transform .2s, box-shadow .2s;
}
.cta-links a:hover, .cta-links button:hover { transform:translateY(-2px); box-shadow:var(--shadow-s); }
.cta-links .main { border-color:transparent; color:#fff; background:linear-gradient(120deg,#26232e,#4a2f4e); box-shadow:0 10px 24px rgba(22,22,26,.24); }
.cta-links span { font-size:14px; font-weight:640; }
.cta-links em { font-style:normal; color:var(--faint); font-size:12.5px; }
.cta-links .main em { color:rgba(255,255,255,.66); }
.foot { padding:26px 0 38px; color:var(--faint); font-size:12px; text-align:center; line-height:1.9; }
.foot a { color:var(--muted); }
.foot a:hover { color:var(--violet); }

/* 微信弹窗 */
dialog.qr { width:min(320px,calc(100% - 40px)); padding:24px 20px 18px; border:1px solid var(--line); border-radius:18px; background:#fff; text-align:center; box-shadow:var(--shadow-m); }
dialog.qr::backdrop { background:rgba(20,18,28,.55); backdrop-filter:blur(3px); }
dialog.qr strong { font-size:15px; }
dialog.qr img { display:block; width:210px; height:210px; margin:14px auto 10px; object-fit:contain; }
dialog.qr p { color:var(--muted); font-size:12.5px; }
dialog.qr button { min-height:42px; margin-top:14px; padding:0 20px; border:1px solid var(--line); border-radius:999px; background:#fff; font-weight:650; cursor:pointer; }

/* 平板与桌面 */
@media (min-width:700px) {
  .wrap { width:min(960px, calc(100% - 48px)); }
  .bar-in { min-height:64px; }
  .filter { top:64px; margin:0 -48px; padding-inline:48px; }
  .head { padding:48px 0 28px; }
  .head p { font-size:16.5px; max-width:66ch; }
  .head-stats { gap:12px; max-width:600px; }
  .head-stats div { padding:17px 18px; }
  .head-stats strong { font-size:25px; }
  .head-stats span { font-size:12.5px; }
  .sec { padding-top:44px; }
  .sec-top h2 { font-size:25px; }
  .prose p { font-size:15.5px; }
  .prose h3 { margin-top:34px; font-size:19.5px; }
  .three { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .vs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .levels3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .levels3 div { grid-template-columns:1fr; gap:9px; }
  .levels3 .lv { justify-self:start; }
  .pit { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 22px; padding:20px; }
  .picks { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .list li { padding:15px 18px 14px 21px; }
  .row-t h3 { font-size:15px; }
  .faq { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .policy { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .policy > div { padding:24px; }
  .cta { padding:44px 40px; }
  .cta h2 { font-size:30px; }
  .cta > p { font-size:15px; }
  .cta-links { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:660px; margin-inline:auto; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }