/* === tokens.css === */
:root {
  --color-brand: #e63946;
  --color-brand-dark: #b32836;
  --color-accent: #ffb703;
  --color-ink: #14181f;
  --color-ink-soft: #4a5568;
  --color-bg: #ffffff;
  --color-bg-soft: #f5f6f8;
  --color-line: #e4e7eb;
  --color-success: #1f9d55;
  --color-warn: #f0a020;
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 20px;
  --fs-xl: 28px; --fs-2xl: 36px; --fs-3xl: 48px;
  --fw-regular: 400; --fw-medium: 500; --fw-bold: 700;
  --lh-tight: 1.25; --lh-normal: 1.6;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(20,24,31,.06), 0 1px 3px rgba(20,24,31,.08);
  --shadow-2: 0 4px 12px rgba(20,24,31,.10);
  --container: 1200px; --container-narrow: 760px;
  --header-h: 64px; --touch-min: 44px;
  --dur: 160ms; --ease: cubic-bezier(.2,.7,.3,1);
}
/* === base.css === */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);font-size:var(--fs-md);line-height:var(--lh-normal);color:var(--color-ink);background:var(--color-bg)}
img{max-width:100%;height:auto;display:block}
a{color:var(--color-brand-dark);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:var(--lh-tight);margin:0 0 var(--sp-4)}
h1{font-size:clamp(28px,4vw,48px);letter-spacing:-.02em}
h2{font-size:clamp(22px,2.6vw,32px);margin-top:var(--sp-7)}
h3{font-size:var(--fs-lg)}
p{margin:0 0 var(--sp-4)}
ul,ol{margin:0 0 var(--sp-4);padding-left:1.2em}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--color-bg-soft);padding:0 .3em;border-radius:var(--radius-sm)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--color-brand);color:#fff;padding:var(--sp-3)}
.skip-link:focus{left:var(--sp-3);top:var(--sp-3);z-index:50}
.kicker{text-transform:uppercase;letter-spacing:.08em;font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--color-brand)}
.lede{font-size:var(--fs-lg);color:var(--color-ink-soft)}
.section-note,.table-note,.grid-note{font-size:var(--fs-sm);color:var(--color-ink-soft)}
.status-banner{font-size:var(--fs-sm);color:var(--color-ink-soft);border-left:3px solid var(--color-success);padding-left:var(--sp-3);margin:0 0 var(--sp-5)}
.count{display:inline-block;min-width:2.4em;text-align:right;color:var(--color-ink-soft);font-size:var(--fs-sm)}
.tag{display:inline-block;background:var(--color-bg-soft);border:1px solid var(--color-line);border-radius:var(--radius-pill);padding:0 var(--sp-2);font-size:var(--fs-xs);color:var(--color-ink-soft);margin:0 var(--sp-1) var(--sp-1) 0}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}
/* === layout.css === */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--sp-4)}
main{padding-bottom:var(--sp-8)}
section{margin:var(--sp-7) 0}
.grid{display:grid;gap:var(--sp-4)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.dual-nav{display:grid;gap:var(--sp-5);grid-template-columns:1fr 1fr}
.site-header{position:sticky;top:0;z-index:30;background:var(--color-bg);border-bottom:1px solid var(--color-line)}
.site-header__bar{display:flex;align-items:center;gap:var(--sp-4);height:var(--header-h)}
.site-header__brand{display:flex;align-items:center;gap:var(--sp-2);font-weight:var(--fw-bold);color:var(--color-ink)}
.brand-dot{width:12px;height:12px;border-radius:50%;background:var(--color-brand);display:inline-block}
.site-header__nav{display:flex;gap:var(--sp-4);align-items:center;flex:1;font-size:var(--fs-sm)}
.site-header__promo{margin-left:auto}
.site-footer{margin-top:var(--sp-8);border-top:1px solid var(--color-line);background:var(--color-bg-soft);padding:var(--sp-6) 0}
.site-footer__grid{display:grid;gap:var(--sp-5);grid-template-columns:2fr 1fr 1fr 1fr}
.site-footer__col a{display:block;padding:var(--sp-1) 0;font-size:var(--fs-sm)}
.site-footer__head{font-weight:var(--fw-bold);margin-bottom:var(--sp-2)}
.site-footer__bottom{display:flex;justify-content:space-between;gap:var(--sp-4);align-items:center;margin-top:var(--sp-5);flex-wrap:wrap;font-size:var(--fs-sm);color:var(--color-ink-soft)}
.breadcrumb ol{display:flex;gap:var(--sp-2);list-style:none;padding:0;margin:var(--sp-4) 0;font-size:var(--fs-sm);color:var(--color-ink-soft);flex-wrap:wrap}
.filter-sidebar{float:none}
.toc-sidebar{display:none}
@media (max-width:768px){
  .grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dual-nav{grid-template-columns:1fr}
  .site-header__nav{display:none}
  .site-footer__grid{grid-template-columns:1fr 1fr}
  .site-footer__bottom{flex-direction:column;align-items:flex-start}
}
@media (min-width:769px){
  .nav-toggle,.mobile-nav{display:none}
}
@media (min-width:1024px){
  .layout--cat-grid{display:grid;grid-template-columns:260px 1fr;gap:var(--sp-6)}
  .layout--cat-grid .breadcrumb,.layout--cat-grid .page-head,.layout--cat-grid .cta-bar,.layout--cat-grid .buying-tips,.layout--cat-grid .faq{grid-column:1 / -1}
  .layout--guide-article{display:grid;grid-template-columns:1fr 260px;gap:var(--sp-6)}
  .layout--guide-article .guide-hero,.layout--guide-article .cta-bar{grid-column:1 / -1}
  .toc-sidebar{display:block;position:sticky;top:calc(var(--header-h) + var(--sp-4));align-self:start}
  .filter-sidebar{position:sticky;top:calc(var(--header-h) + var(--sp-4));height:max-content}
}
/* === components.css === */
.promo-btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch-min);padding:0 var(--sp-5);border-radius:var(--radius-pill);background:var(--color-brand);color:#fff;font-weight:var(--fw-medium);border:1px solid var(--color-brand);transition:background var(--dur) var(--ease)}
.promo-btn:hover{background:var(--color-brand-dark);border-color:var(--color-brand-dark);text-decoration:none}
.promo-btn--ghost{background:transparent;color:var(--color-brand-dark);border-color:var(--color-line)}
.promo-btn--footer{background:var(--color-brand);color:#fff}
.promo-link{display:inline-block;padding:var(--sp-2) 0;font-weight:var(--fw-medium)}
.btn--ghost{display:inline-flex;align-items:center;min-height:var(--touch-min);padding:0 var(--sp-5);border-radius:var(--radius-pill);border:1px solid var(--color-line);color:var(--color-ink)}
.product-card{border:1px solid var(--color-line);border-radius:var(--radius-md);overflow:hidden;background:var(--color-bg);box-shadow:var(--shadow-1);transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.product-card:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
.product-card__link{display:block;color:inherit}
.product-card__link:hover{text-decoration:none}
.product-card img{aspect-ratio:1/1;object-fit:cover;width:100%;height:auto;background:var(--color-bg-soft)}
.product-card__title{font-size:var(--fs-sm);margin:var(--sp-3) var(--sp-3) var(--sp-1)}
.product-card__price{margin:0 var(--sp-3);font-size:var(--fs-sm);color:var(--color-ink-soft)}
.product-card__cta{display:block;margin:var(--sp-2) var(--sp-3) var(--sp-3);font-size:var(--fs-xs);color:var(--color-brand-dark);font-weight:var(--fw-medium)}
.qc-card{border:1px solid var(--color-line);border-radius:var(--radius-md);overflow:hidden;background:var(--color-bg)}
.qc-card__thumb{padding:0;border:0;background:none;cursor:pointer;width:100%}
.qc-card__body{padding:var(--sp-3)}
.qc-card__title{font-size:var(--fs-sm);margin:0 0 var(--sp-1)}
.qc-card__meta{margin:0 0 var(--sp-2);font-size:var(--fs-xs);color:var(--color-ink-soft)}
.tool-card{border:1px solid var(--color-line);border-radius:var(--radius-md);padding:var(--sp-4);background:var(--color-bg-soft)}
.chip-list{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.chip-list a{display:inline-block;border:1px solid var(--color-line);border-radius:var(--radius-pill);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm);background:var(--color-bg)}
.cat-list{list-style:none;padding:0}
.cat-list li{display:flex;justify-content:space-between;border-bottom:1px solid var(--color-line);padding:var(--sp-2) 0}
.cat-cards{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.cat-card{display:block;border:1px solid var(--color-line);border-radius:var(--radius-md);padding:var(--sp-4);background:var(--color-bg-soft);color:inherit}
.cat-card__name{display:block;font-weight:var(--fw-bold)}
.brand-matrix__grid{display:grid;gap:var(--sp-2);grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.brand-tile{display:flex;justify-content:space-between;border:1px solid var(--color-line);border-radius:var(--radius-sm);padding:var(--sp-3);background:var(--color-bg)}
.coupon-cards{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.coupon-card{border:1px dashed var(--color-brand);border-radius:var(--radius-md);padding:var(--sp-4);background:var(--color-bg-soft)}
.coupon-card__code{font-weight:var(--fw-bold);font-size:var(--fs-lg);color:var(--color-brand-dark);margin:0}
.coupon-card__scope{font-size:var(--fs-xs);color:var(--color-ink-soft);margin:var(--sp-2) 0 0}
.steps__list{list-style:none;padding:0;counter-reset:s}
.steps__list li{border-left:3px solid var(--color-line);padding:0 0 var(--sp-4) var(--sp-4);margin-bottom:var(--sp-4)}
.steps__n{display:inline-flex;width:28px;height:28px;border-radius:50%;background:var(--color-brand);color:#fff;align-items:center;justify-content:center;font-size:var(--fs-sm);font-weight:var(--fw-bold);margin-right:var(--sp-2)}
.timeline{list-style:none;padding:0}
.timeline li{border-left:2px solid var(--color-brand);padding:0 0 var(--sp-4) var(--sp-4);position:relative}
.timeline li::before{content:"";position:absolute;left:-6px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--color-brand)}
.faq__list details{border:1px solid var(--color-line);border-radius:var(--radius-sm);margin-bottom:var(--sp-2);background:var(--color-bg)}
.faq__list summary{cursor:pointer;padding:var(--sp-3);font-weight:var(--fw-medium)}
.faq__a{padding:0 var(--sp-3) var(--sp-3)}
.faq__a p{margin:0}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
th,td{text-align:left;padding:var(--sp-3);border-bottom:1px solid var(--color-line)}
tbody tr:nth-child(odd){background:var(--color-bg-soft)}
.fee-breakdown details{margin-bottom:var(--sp-2);border:1px solid var(--color-line);border-radius:var(--radius-sm);padding:var(--sp-3)}
.calculator{display:grid;gap:var(--sp-4);border:1px solid var(--color-line);border-radius:var(--radius-md);padding:var(--sp-5);background:var(--color-bg-soft);box-shadow:var(--shadow-1)}
.calculator__field{display:grid;gap:var(--sp-1)}
.calculator select,.calculator input,.qc-finder input,.link-converter textarea{min-height:var(--touch-min);padding:var(--sp-2) var(--sp-3);border:1px solid var(--color-line);border-radius:var(--radius-sm);font-size:var(--fs-md);width:100%}
.calculator__error{color:var(--color-brand-dark);margin:0}
.result-panel__out{border:1px solid var(--color-line);border-radius:var(--radius-md);padding:var(--sp-4);background:var(--color-bg);min-height:72px}
.evidence__card{border:1px solid var(--color-line);border-radius:var(--radius-md);padding:var(--sp-4);background:var(--color-bg)}
.verdict{border-left:4px solid var(--color-brand);background:var(--color-bg-soft);padding:var(--sp-5);border-radius:var(--radius-sm)}
.prose--guide{max-width:var(--container-narrow)}
.mini-block{border:1px solid var(--color-line);border-radius:var(--radius-md);padding:var(--sp-4);background:var(--color-bg-soft)}
.cta-bar{background:var(--color-ink);color:#fff;border-radius:var(--radius-lg);padding:var(--sp-6);text-align:center}
.cta-bar__inner{display:flex;flex-direction:column;gap:var(--sp-3);align-items:center}
.cta-bar .promo-link{color:var(--color-accent)}
.promo-footer{margin-top:var(--sp-3)}
.promo-footer__note{font-size:var(--fs-xs);color:var(--color-ink-soft)}
.mobile-nav{display:block;padding:var(--sp-4);border-top:1px solid var(--color-line)}
.mobile-nav a{display:block;padding:var(--sp-3) 0;border-bottom:1px solid var(--color-line)}
.nav-toggle{display:inline-flex;flex-direction:column;gap:4px;background:none;border:0;padding:var(--sp-2);cursor:pointer}
.nav-toggle span{width:22px;height:2px;background:var(--color-ink)}
.lang-switch{display:flex;gap:var(--sp-1);font-size:var(--fs-xs);text-transform:uppercase}
.lang-switch a{padding:6px;color:var(--color-ink-soft)}
.nav-more{position:relative}
.nav-more summary{cursor:pointer;list-style:none}
.nav-more__panel{position:absolute;background:var(--color-bg);border:1px solid var(--color-line);border-radius:var(--radius-sm);padding:var(--sp-3);min-width:200px;box-shadow:var(--shadow-2);z-index:20}
.nav-more__panel a{display:block;padding:var(--sp-1) 0}
[dir="rtl"] .site-header__bar{flex-direction:row-reverse}
[dir="rtl"] .timeline li,[dir="rtl"] .steps__list li{border-left:0;border-right:2px solid var(--color-brand);padding:0 var(--sp-4) var(--sp-4) 0}
/* === pages.css === */
/* 页面配方专属视觉：仅改变组合与排布，不偏离令牌 */
.layout--home .hero{margin-top:var(--sp-6)}
.hero{background:linear-gradient(160deg,var(--color-bg-soft),#fff 60%);border-radius:var(--radius-lg);padding:var(--sp-7) var(--sp-5)}
.hero__actions{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-4)}
.dual-nav__col{background:var(--color-bg-soft);border-radius:var(--radius-lg);padding:var(--sp-5)}
.dual-nav__col--brands{border-top:4px solid var(--color-brand)}
.dual-nav__col--cats{border-top:4px solid var(--color-accent)}

.layout--cat-grid .product-grid-wrap{margin-top:0}
.filter-sidebar{background:var(--color-bg-soft);border-radius:var(--radius-md);padding:var(--sp-4)}
.filter-sidebar ul{list-style:none;padding:0;margin:0 0 var(--sp-4)}
.filter-sidebar li{display:flex;justify-content:space-between;padding:var(--sp-1) 0}
.filter-sidebar .is-current a{font-weight:var(--fw-bold);color:var(--color-brand-dark)}

.layout--brand-wall .brand-banner{border-bottom:1px solid var(--color-line);padding-bottom:var(--sp-5)}
.layout--brand-wall .hot-list{margin-top:var(--sp-5)}
.layout--brand-wall .brand-tile:hover{background:#fff}

.layout--tool-dark .tool-mount{background:var(--color-ink);border-radius:var(--radius-lg);padding:var(--sp-6);color:#fff}
.layout--tool-dark .qc-finder input{color:var(--color-ink)}
.qc-grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}

.layout--shipping-table .quote-table table{min-width:640px}
.layout--shipping-table .fee-breakdown details[open]{background:var(--color-bg-soft)}

.layout--calculator .calculator{max-width:640px;margin:0 auto}
.layout--calculator .result-panel__cta{margin-top:var(--sp-4);text-align:center}

.layout--guide-article .guide-hero{border-bottom:1px solid var(--color-line);padding-bottom:var(--sp-4)}
.layout--guide-article .related-links ul{list-style:none;padding:0}

.layout--verdict .verdict{font-size:var(--fs-lg)}
.layout--verdict .evidence__card{border-left:4px solid var(--color-success)}
.layout--verdict .disclosure{border:1px solid var(--color-line);border-radius:var(--radius-md);padding:var(--sp-4)}

.layout--tool-index .tool-grid .grid{gap:var(--sp-4)}
.layout--tool-compact section{margin:var(--sp-5) 0}

.layout--coupons .coupon-card{transform:rotate(-.4deg)}
.layout--coupons .coupon-card:nth-child(even){transform:rotate(.4deg)}

.layout--finds .product-grid-wrap .grid{gap:var(--sp-3)}

.layout--hub .brand-matrix{background:var(--color-bg-soft);border-radius:var(--radius-lg);padding:var(--sp-5)}

.layout--blog .blog-list ul{list-style:none;padding:0}
.layout--blog .blog-list li{border-bottom:1px solid var(--color-line);padding:var(--sp-3) 0}

.layout--legal .prose{max-width:var(--container-narrow)}

.layout--cat-index .category-nav{margin-top:var(--sp-5)}
.layout--brand-index .brand-matrix__grid{gap:var(--sp-3)}
.layout--guide-index .guide-list ul{list-style:none;padding:0}
.layout--guide-index .guide-list li{border:1px solid var(--color-line);border-radius:var(--radius-md);padding:var(--sp-4);margin-bottom:var(--sp-3)}
.layout--qc-guide .qc-gallery{margin-top:var(--sp-5)}