/* 刷题包指南页样式 —— 与首页同一套设计系统（brand #5f9bf7 / ink #1e2d4f / mist #f4f7fd，Soft UI） */
:root{--brand-50:#eef3fb;--brand-100:#e0ebfc;--brand-200:#c3d9fb;--brand-300:#9cc2f9;--brand-400:#7eb5ff;--brand-500:#5f9bf7;--brand-600:#5c8af0;--brand-700:#4a71d6;--brand-800:#3a58ab;--ink:#1e2d4f;--mist:#f4f7fd;--slate-500:#64748b;--slate-600:#475569;--slate-700:#334155;--shadow-soft:0 4px 24px rgba(30,45,79,.08);--shadow-lift:0 12px 40px rgba(95,155,247,.25);--radius:1.25rem}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;color:var(--ink);background:var(--mist);line-height:1.75;font-size:16px;-webkit-font-smoothing:antialiased}
a{color:var(--brand-700);text-decoration:none}a:hover{color:var(--brand-800)}
img{max-width:100%;height:auto;display:block}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;background:#eef3fb;color:var(--brand-800);padding:.1em .4em;border-radius:.4em}
pre{background:#1e2d4f;color:#e2e8f0;padding:16px 18px;border-radius:14px;overflow:auto;font-size:14px;line-height:1.6}pre code{background:none;color:inherit;padding:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* 导航 */
.g-header{position:fixed;top:16px;left:16px;right:16px;z-index:50}
.g-nav{max-width:72rem;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;border-radius:1rem;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow-soft);border:1px solid rgba(255,255,255,.6);padding:12px 20px}
.g-brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:700;font-size:18px;letter-spacing:.02em}
.g-brand img{width:36px;height:36px;border-radius:12px}
.g-brand .tag{display:none;font-size:12px;font-weight:500;color:var(--brand-600);background:var(--brand-50);border:1px solid var(--brand-100);border-radius:999px;padding:2px 8px}
@media(min-width:640px){.g-brand .tag{display:inline-block}}
.g-links{display:none;align-items:center;gap:28px;font-size:14px;font-weight:500;color:var(--slate-600)}
.g-links a{color:inherit;transition:color .2s}.g-links a:hover,.g-links a[aria-current]{color:var(--brand-600)}
@media(min-width:768px){.g-links{display:flex}}
.g-cta{display:inline-flex;align-items:center;gap:8px;border-radius:.75rem;background:var(--brand-500);color:#fff!important;font-size:14px;font-weight:600;padding:10px 16px;box-shadow:var(--shadow-lift);transition:background .2s;white-space:nowrap}
.g-cta:hover{background:var(--brand-600)}.g-cta svg{width:16px;height:16px}
.g-cta .short{display:none}@media(max-width:480px){.g-cta .full{display:none}.g-cta .short{display:inline}}

/* 页面骨架 */
.g-main{padding-top:104px}
.g-wrap{max-width:72rem;margin:0 auto;padding:0 16px}@media(min-width:640px){.g-wrap{padding:0 24px}}
.g-hero{padding:24px 0 8px}
.crumbs{font-size:13px;color:var(--slate-500);display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 16px}
.crumbs a{color:var(--slate-500)}.crumbs a:hover{color:var(--brand-600)}.crumbs span[aria-current]{color:var(--slate-700)}
.g-kicker{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--brand-600);background:var(--brand-50);border:1px solid var(--brand-100);border-radius:999px;padding:4px 12px;margin-bottom:14px}
.g-hero h1{font-size:clamp(28px,4.2vw,42px);line-height:1.25;font-weight:900;letter-spacing:-.01em;margin:0 0 14px;max-width:52rem}
.g-lead{font-size:17px;color:var(--slate-600);max-width:46rem;margin:0 0 18px;line-height:1.8}
.g-meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--slate-500);margin-bottom:22px}
.g-meta span{display:inline-flex;align-items:center;gap:6px}.g-meta svg{width:14px;height:14px}
.g-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:.875rem;padding:12px 20px;font-weight:600;font-size:15px;transition:all .2s;cursor:pointer;border:1px solid transparent}
.btn svg{width:18px;height:18px;flex-shrink:0}
.btn-primary{background:var(--brand-500);color:#fff!important;box-shadow:var(--shadow-lift)}.btn-primary:hover{background:var(--brand-600)}
.btn-ghost{background:#fff;color:var(--ink)!important;border-color:var(--brand-100);box-shadow:var(--shadow-soft)}.btn-ghost:hover{border-color:var(--brand-300);color:var(--brand-700)!important}
.btn-sm{padding:9px 14px;font-size:14px;border-radius:.75rem}

.g-layout{display:grid;grid-template-columns:1fr;gap:32px;padding:16px 0 64px}
@media(min-width:1024px){.g-layout{grid-template-columns:minmax(0,1fr) 300px;gap:48px}}
.g-article{min-width:0}
.g-aside{display:none}@media(min-width:1024px){.g-aside{display:block}}
.g-aside-inner{position:sticky;top:104px;display:flex;flex-direction:column;gap:16px}

/* 正文排版 */
.prose{background:#fff;border:1px solid var(--brand-50);border-radius:1.5rem;box-shadow:var(--shadow-soft);padding:28px 22px}
@media(min-width:640px){.prose{padding:40px 44px}}
.prose>*:first-child{margin-top:0}
.prose h2{font-size:24px;line-height:1.35;font-weight:800;margin:44px 0 14px;padding-top:8px;scroll-margin-top:110px;letter-spacing:-.01em}
.prose h2::before{content:"";display:block;width:36px;height:4px;border-radius:999px;background:linear-gradient(90deg,var(--brand-400),var(--brand-600));margin-bottom:12px}
.prose h3{font-size:18px;font-weight:700;margin:28px 0 8px;scroll-margin-top:110px}
.prose h4{font-size:16px;font-weight:700;margin:20px 0 6px}
.prose p,.prose li{color:var(--slate-700)}.prose p{margin:0 0 14px}
.prose ul,.prose ol{padding-left:1.4em;margin:0 0 16px}.prose li{margin:6px 0}.prose li::marker{color:var(--brand-500);font-weight:700}
.prose strong{color:var(--ink);font-weight:700}
.prose blockquote{margin:18px 0;padding:14px 18px;border-left:4px solid var(--brand-300);background:var(--brand-50);border-radius:0 14px 14px 0;color:var(--slate-700)}
.prose blockquote p:last-child{margin:0}
.prose hr{border:0;border-top:1px solid var(--brand-100);margin:32px 0}
.prose table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;margin:18px 0;border:1px solid var(--brand-100);border-radius:14px;overflow:hidden}
.prose thead th{background:var(--brand-50);color:var(--ink);font-weight:700;text-align:left;padding:11px 14px;border-bottom:1px solid var(--brand-100)}
.prose td{padding:11px 14px;border-bottom:1px solid var(--brand-50);vertical-align:top;color:var(--slate-700)}
.prose tr:last-child td{border-bottom:0}.prose tbody tr:nth-child(even) td{background:#fafcff}
.table-scroll{overflow-x:auto;margin:18px 0;-webkit-overflow-scrolling:touch}.table-scroll table{margin:0;min-width:520px}

/* 提示框 */
.callout{display:flex;gap:12px;padding:16px 18px;border-radius:16px;margin:20px 0;font-size:15px;border:1px solid}
.callout svg{width:20px;height:20px;flex-shrink:0;margin-top:3px}
.callout p{margin:0 0 6px}.callout p:last-child{margin:0}.callout strong{display:block;margin-bottom:2px}
.callout-tip{background:#f0f9ff;border-color:#bae6fd;color:#0c4a6e}.callout-tip svg{color:#0284c7}
.callout-warn{background:#fffbeb;border-color:#fde68a;color:#78350f}.callout-warn svg{color:#d97706}
.callout-ok{background:#f0fdf4;border-color:#bbf7d0;color:#14532d}.callout-ok svg{color:#16a34a}

/* 步骤 */
.steps{counter-reset:step;list-style:none;padding:0;margin:20px 0}
.steps>li{position:relative;padding:0 0 22px 52px;margin:0}
.steps>li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--brand-400),var(--brand-600));color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lift);font-size:15px}
.steps>li:not(:last-child)::after{content:"";position:absolute;left:17px;top:40px;bottom:0;width:2px;background:var(--brand-100)}
.steps>li>p:first-child,.steps>li>strong:first-child{font-weight:700;color:var(--ink);display:block;margin:6px 0 4px;font-size:16px}
.steps>li p{margin:0 0 8px}

/* 截图 */
.shots{display:grid;gap:18px;margin:24px 0;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.shots.cols-2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.shots.cols-1{grid-template-columns:1fr}
.shot{margin:0;display:flex;flex-direction:column;gap:10px}
.shot .frame{position:relative;border-radius:22px;padding:8px;background:linear-gradient(160deg,#eef3fb,#dbe7fb);border:1px solid var(--brand-100);box-shadow:var(--shadow-soft)}
.shot .frame img{border-radius:16px;width:100%;background:#fff}
.shot.desktop .frame{border-radius:16px;padding:6px}
.shot.desktop .frame img{border-radius:12px}
.shot figcaption{font-size:13px;color:var(--slate-500);text-align:center;line-height:1.5;padding:0 6px}
.shot figcaption b{color:var(--slate-700);font-weight:600}
.shot .frame::after{content:"真实界面";position:absolute;top:14px;right:14px;font-size:10px;font-weight:600;color:var(--brand-700);background:rgba(255,255,255,.92);border:1px solid var(--brand-100);border-radius:999px;padding:2px 8px;letter-spacing:.04em}

/* 模板卡 */
.tpl-card{display:block;padding:20px;border-radius:20px;background:linear-gradient(135deg,#f0fdf4,#ecfdf5);border:1px solid #bbf7d0;margin:24px 0}
.tpl-card .ico{width:48px;height:48px;border-radius:14px;background:#16a34a;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 8px 24px rgba(22,163,74,.25)}
.tpl-card .ico svg{width:24px;height:24px}
.tpl-card h3{margin:0 0 4px!important;font-size:17px!important;color:#14532d}
.tpl-card p{margin:0 0 10px;font-size:14px;color:#166534}
.tpl-card .meta{font-size:12px;color:#15803d;margin-top:8px;display:flex;flex-wrap:wrap;gap:12px}
.btn-green{background:#16a34a;color:#fff!important;box-shadow:0 8px 24px rgba(22,163,74,.25)}.btn-green:hover{background:#15803d}

/* 侧栏卡片 */
.side-card{background:#fff;border:1px solid var(--brand-50);border-radius:1.25rem;box-shadow:var(--shadow-soft);padding:20px}
.side-card h4{margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--slate-500);text-transform:uppercase}
.toc{list-style:none;padding:0;margin:0;font-size:14px}
.toc li{margin:0}.toc a{display:block;padding:6px 10px;border-radius:8px;color:var(--slate-600);border-left:2px solid transparent}
.toc a:hover{background:var(--brand-50);color:var(--brand-700)}.toc a.active{color:var(--brand-700);border-left-color:var(--brand-500);background:var(--brand-50)}
.side-cta{background:linear-gradient(135deg,var(--brand-500),var(--brand-700));color:#fff;border:0}
.side-cta h4{color:rgba(255,255,255,.75)}.side-cta p{margin:0 0 14px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.95)}
.side-cta .btn{width:100%;background:#fff;color:var(--brand-700)!important;box-shadow:none}
.side-cta .btn:hover{background:var(--brand-50)}
.side-cta .sub{display:block;margin-top:10px;font-size:12px;color:rgba(255,255,255,.8);text-align:center}

/* FAQ */
.faq{margin:20px 0}
.faq details{border:1px solid var(--brand-100);border-radius:14px;background:#fff;margin:0 0 10px;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:14px 18px;font-weight:600;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:20px;color:var(--brand-500);font-weight:400;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] summary{border-bottom:1px solid var(--brand-50)}
.faq .a{padding:12px 18px 16px;color:var(--slate-700);font-size:15px}.faq .a p{margin:0 0 8px}.faq .a p:last-child{margin:0}

/* 相关阅读 / 底部 CTA */
.related{margin:32px 0 0}
.related h2{font-size:20px;font-weight:800;margin:0 0 14px}
.related-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.related-grid a{display:block;background:#fff;border:1px solid var(--brand-50);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow-soft);color:var(--ink);transition:all .2s}
.related-grid a:hover{transform:translateY(-2px);border-color:var(--brand-200);box-shadow:var(--shadow-lift)}
.related-grid .k{font-size:11px;font-weight:600;color:var(--brand-600);letter-spacing:.05em;display:block;margin-bottom:6px}
.related-grid .t{font-weight:700;font-size:15px;line-height:1.45;display:block}
.related-grid .d{font-size:13px;color:var(--slate-500);margin-top:6px;display:block;line-height:1.5}
.g-bottom{margin:40px 0 0;border-radius:1.5rem;background:linear-gradient(135deg,var(--brand-500),var(--brand-700));color:#fff;padding:36px 28px;text-align:center;box-shadow:var(--shadow-lift)}
.g-bottom h2{margin:0 0 10px;font-size:26px;font-weight:900}.g-bottom p{margin:0 auto 22px;max-width:36rem;color:rgba(255,255,255,.9)}
.g-bottom .btn-primary{background:#fff;color:var(--brand-700)!important;box-shadow:none}.g-bottom .btn-primary:hover{background:var(--brand-50)}
.g-bottom .btn-ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);color:#fff!important}.g-bottom .btn-ghost:hover{background:rgba(255,255,255,.2)}
.g-bottom .g-actions{justify-content:center;margin:0}

/* 目录页 */
.hub-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin:20px 0}
.hub-grid a{background:#fff;border:1px solid var(--brand-50);border-radius:18px;padding:18px 20px;box-shadow:var(--shadow-soft);color:var(--ink);display:flex;flex-direction:column;gap:6px;transition:all .2s}
.hub-grid a:hover{transform:translateY(-2px);border-color:var(--brand-200)}
.hub-grid .t{font-weight:700;font-size:16px}.hub-grid .d{font-size:13px;color:var(--slate-500);line-height:1.55}
.hub-grid .k{font-size:11px;color:var(--brand-600);font-weight:600;letter-spacing:.05em}

/* 页脚 */
.g-footer{border-top:1px solid var(--brand-100);background:#fff;margin-top:24px}
.g-footer .cols{max-width:72rem;margin:0 auto;padding:48px 16px;display:grid;gap:36px;grid-template-columns:1fr}
@media(min-width:640px){.g-footer .cols{padding:48px 24px}}@media(min-width:768px){.g-footer .cols{grid-template-columns:2fr 1fr 1fr 1fr}}
.g-footer p{margin:0}.g-footer .brand{display:flex;align-items:center;gap:10px;font-weight:700;margin-bottom:14px}.g-footer .brand img{width:32px;height:32px;border-radius:10px}
.g-footer .desc{font-size:14px;color:var(--slate-600);max-width:24rem;line-height:1.7}
.g-footer h5{margin:0 0 14px;font-size:14px;font-weight:700}
.g-footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;font-size:14px}.g-footer ul a{color:var(--slate-600)}.g-footer ul a:hover{color:var(--brand-600)}
.g-footer .legal{border-top:1px solid var(--brand-50)}
.g-footer .legal div{max-width:72rem;margin:0 auto;padding:20px 16px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;font-size:12px;color:var(--slate-500);text-align:center}
.g-footer .legal a{color:inherit;display:inline-flex;align-items:center;gap:4px}.g-footer .legal a:hover{color:var(--brand-600)}
.g-footer .legal img{width:14px;height:14px;display:inline}

/* 动效 */
@media(prefers-reduced-motion:no-preference){.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}.reveal.in{opacity:1;transform:none}}

/* 首屏截图条：手机截图限制高度，桌面端横排 */
.g-heroshots .shots{margin:8px 0 0;grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:640px){.g-heroshots .shots{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.g-heroshots .shot figcaption{font-size:11px}.g-heroshots .shot .frame{padding:4px;border-radius:14px}.g-heroshots .shot .frame img{border-radius:10px}.g-heroshots .shot .frame::after{display:none}}
@media(min-width:1024px){.g-heroshots .shots{grid-template-columns:repeat(3,260px);justify-content:start}}
.prose .shots{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
@media(min-width:640px){.prose .shots{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}}
.prose .shots.cols-2{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.prose .shots.cols-1{grid-template-columns:1fr}
@media(max-width:480px){.shots{gap:10px}.shot .frame{padding:5px;border-radius:16px}.shot .frame img{border-radius:12px}.shot .frame::after{font-size:9px;top:9px;right:9px;padding:1px 6px}.shot figcaption{font-size:12px}}
/* tables: shrink to fit on phones, only scroll when truly too wide */
.table-scroll table{min-width:0}
@media (max-width:720px){.prose table{font-size:12.5px}.prose th,.prose td{padding:8px 9px;word-break:break-word}.table-scroll{margin-left:-4px;margin-right:-4px}}

/* template card: header row + real spreadsheet preview */
.tpl-card .tpl-head{display:flex;gap:16px;align-items:flex-start}
.tpl-card .tpl-shot{display:block;margin:16px -6px -6px;border-radius:12px;overflow:hidden;border:1px solid #bbf7d0;box-shadow:0 10px 30px rgba(22,163,74,.12);background:#fff}
.tpl-card .tpl-shot img{display:block;width:100%;height:auto}
@media (max-width:720px){.tpl-card .tpl-shot{margin:14px 0 0}}

/* updates: live latest-version card (filled from version.json) */
.ver-box{background:linear-gradient(135deg,#f0f9ff,#fff);border:1px solid var(--brand-100);border-radius:18px;padding:18px 20px;margin:4px 0 24px;box-shadow:var(--shadow-soft)}
.ver-box .ver-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.ver-box .ver-k{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--brand-600);letter-spacing:.04em}.ver-box .ver-k svg{width:14px;height:14px}
.ver-box strong{font-size:22px;font-weight:800;letter-spacing:-.01em}.ver-box .ver-date{font-size:13px;color:var(--slate-500)}
.ver-box .ver-lines{margin:10px 0 0;padding-left:18px;font-size:14px;color:var(--slate-600);line-height:1.7}.ver-box .ver-lines[hidden]{display:none}
.ver-box .ver-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ver-box .ver-note{margin:12px 0 0;font-size:12px;color:var(--slate-500);line-height:1.6}
.prose h2 .ver-tag{display:inline-block;vertical-align:middle;margin-left:10px;font-size:12px;font-weight:600;color:#14532d;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:999px;padding:2px 10px}