:root{
    --canvas:#ffffff;
    --surface-soft:#f7f7f7;
    --surface-strong:#eef0f3;
    --surface-dark:#0a0b0d;
    --ink:#0a0b0d;
    --body:#5b616e;
    --muted:#7c828a;
    --muted-soft:#a8acb3;
    --hairline:#dee1e6;
    --hairline-soft:#eef0f3;
    --brand:#C8102E;
    --brand-active:#a00d24;
    --brand-tint:#fdf2f4;
    --on-brand:#ffffff;
    --up:#05b169;
    --down:#cf202f;
    --warn:#c77800;
    --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:100px;
    --shadow:0 4px 12px rgba(0,0,0,.04);
    --shadow-lg:0 20px 60px rgba(0,0,0,.25);
    --paper:var(--surface-soft); --ink-soft:var(--body); --good:var(--up); --bad:var(--down);
    --good-tint:#eaf6f1; --bad-tint:#fbedef; --warn-tint:#fcf3e3;
    --border:var(--hairline); --cell:var(--canvas); --head:var(--canvas);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  a,button{-webkit-tap-highlight-color:transparent}
  a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
  body{font-family:'Inter',-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;background:var(--canvas);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
  h1,h2,h3{text-wrap:balance}
  p{text-wrap:pretty}
  .wrap{max-width:1200px;margin:0 auto;padding:0 16px}

  header.brand{background:var(--surface-dark);color:#fff;padding:18px 0 16px}
  .brand-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .logo-mark{width:40px;height:40px;border-radius:var(--r-md);background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:20px;flex:none}
  .brand-name{font-size:20px;font-weight:600;letter-spacing:-.4px}
  .brand-sub{font-size:12.5px;color:var(--muted-soft);margin-top:2px}
  .trust-chips{margin-inline-start:auto;display:flex;gap:8px;flex-wrap:wrap}
  .chip{font-size:12px;padding:5px 12px;border-radius:var(--r-pill);background:rgba(255,255,255,.1);color:var(--muted-soft);border:1px solid rgba(255,255,255,.18);text-decoration:none}
  .demo-banner{background:var(--surface-strong);color:var(--body);font-size:12.5px;text-align:center;padding:7px 16px;border-bottom:1px solid var(--hairline)}
  .demo-banner b{color:var(--warn)}

  .filter-bar{position:sticky;top:0;z-index:50;background:var(--canvas);border-bottom:1px solid var(--hairline);box-shadow:var(--shadow);padding:10px 0}
  .filters{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
  .f-group{display:flex;flex-direction:column;gap:3px}
  .f-label{font-size:11px;color:var(--body);font-weight:600;letter-spacing:.3px}
  .f-control{font-size:13.5px;padding:8px 12px;border:1px solid var(--hairline);border-radius:var(--r-md);background:var(--canvas);color:var(--ink);min-width:74px;font-family:inherit}
  .f-control:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:transparent}
  input.f-control{width:84px}
  select.f-control{cursor:pointer}
  .toggle-wrap{display:flex;gap:2px;background:var(--surface-strong);border-radius:var(--r-sm);padding:3px}
  .toggle-btn{font-size:12.5px;padding:5px 12px;border-radius:calc(var(--r-sm) - 3px);border:none;cursor:pointer;background:transparent;color:var(--body)}
  .toggle-btn.active{background:var(--canvas);color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.08)}

  .page-head{padding:26px 0 6px}
  .page-head h1{font-size:28px;font-weight:600;letter-spacing:-.4px}
  .page-head p{font-size:14px;color:var(--body);margin-top:6px;max-width:760px}
  .legend-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;font-size:12px;color:var(--body)}
  .legend{display:inline-flex;align-items:center;gap:6px}
  .sw{width:14px;height:14px;border-radius:var(--r-xs);flex:none}
  .sw.good{background:var(--up)}.sw.bad{background:var(--down)}.sw.warn{background:var(--warn)}
  .hl-toggle{margin-inline-start:auto;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:12.5px;color:var(--ink);font-weight:600}
  .hl-toggle input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer}

  /* 场景短名单（D14 场景化首页） */
  .scenario-bar{margin-top:20px}
  .sc-head h2{font-size:20px;font-weight:600;letter-spacing:-.3px}
  .sc-head p{font-size:13.5px;color:var(--body);margin-top:5px}
  .sc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:12px;margin-top:14px}
  .sc-card{background:var(--canvas);border:1.5px solid var(--hairline);border-radius:var(--r-lg);padding:16px;cursor:pointer;text-align:start;transition:border-color .15s ease-out,box-shadow .15s ease-out;display:flex;flex-direction:column;gap:7px;font-family:inherit}
  @media(hover:hover){
    .sc-card:hover{border-color:var(--muted);box-shadow:var(--shadow)}
  }
  .sc-card.active{border-color:var(--brand);background:var(--brand-tint)}
  .sc-icon{font-size:22px;line-height:1.2}
  .sc-title{display:block;font-size:15px;font-weight:600;color:var(--ink)}
  .sc-desc{display:block;font-size:12.5px;color:var(--body);line-height:1.55}
  .sc-why{display:block;font-size:11.5px;color:var(--warn);font-weight:600}
  .sc-picks{display:block;font-size:12px;color:var(--ink-soft)}
  .sc-btn{margin-top:4px;align-self:flex-start;font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:var(--r-pill);border:1.5px solid var(--brand);background:var(--canvas);color:var(--brand);cursor:pointer}
  @media(hover:hover){
    .sc-card:hover .sc-btn{background:var(--brand);color:var(--on-brand)}
  }
  .sc-card.active .sc-btn{background:var(--brand);color:var(--on-brand)}
  .sc-note{margin-top:12px;font-size:12.5px;color:var(--body);background:var(--surface-strong);border-radius:var(--r-sm);padding:8px 14px;display:inline-block}
  .sc-reset{border:none;background:none;color:var(--brand);font-weight:600;font-size:12.5px;cursor:pointer;padding:0}

  .prod-selector{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 0;padding:12px 14px;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-xl)}
  .ps-label{font-size:12.5px;font-weight:600;color:var(--ink);flex:none}
  .ps-chips{display:flex;gap:8px;flex-wrap:wrap}
  .ps-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:var(--r-pill);border:1.5px solid var(--hairline);background:var(--canvas);font-size:12.5px;font-weight:600;cursor:pointer;user-select:none;transition-property:background-color,color,border-color,opacity,scale;transition-duration:.15s;transition-timing-function:ease-out}
  @media(hover:hover){
    .ps-chip:hover{border-color:var(--muted)}
  }
  .ps-chip.on{background:var(--brand-tint);border-color:var(--brand);color:var(--brand)}
  .ps-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--hairline);flex:none;transition:background .15s ease}
  .ps-chip.on .dot{background:var(--brand)}
  .ps-chip .tick{font-weight:600;font-size:13px}
  .ps-chip.on .tick{color:var(--brand)}
  .ps-chip .tick.off{color:var(--body)}
  .ps-chip.disabled{opacity:.5;cursor:not-allowed}
  .ps-hint{font-size:11.5px;color:var(--body);flex-basis:100%;margin-top:2px}

  .table-scroll{overflow-x:auto;margin:12px 0 90px;border-radius:var(--r-xl);border:1px solid var(--hairline);background:var(--canvas);box-shadow:var(--shadow);scroll-margin-top:76px}
  table.cmp{border-collapse:collapse;width:100%;min-width:860px;font-size:13px}
  .cmp th,.cmp td{border-bottom:1px solid var(--hairline-soft);padding:11px 14px;text-align:start;vertical-align:top}
  .cmp th.row-label,.cmp td.row-label{position:sticky;inset-inline-start:0;z-index:5;background:var(--canvas);min-width:168px;max-width:168px;font-size:12.5px;color:var(--body);font-weight:600;border-inline-end:1px solid var(--hairline)}
  .cmp th.prod{min-width:168px;max-width:168px;text-align:center;vertical-align:top;padding:14px 10px;background:var(--canvas);position:sticky;top:0;z-index:4}
  .cmp td.prod{text-align:center;background:var(--canvas)}
  .prod-cell{display:flex;flex-direction:column;align-items:center;gap:8px}
  .prod-check{display:flex;align-items:center;justify-content:center;gap:6px;width:100%}
  .prod-check input{width:15px;height:15px;accent-color:var(--brand);cursor:pointer}
  .prod-check label{font-size:11px;color:var(--body);cursor:pointer}
  .prod-logo{width:38px;height:38px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:15px;margin:2px auto 0}
  .prod-name{font-weight:600;font-size:14px}
  .prod-under{font-size:11px;color:var(--body)}
  .badge{font-size:11px;font-weight:600;padding:3px 10px;border-radius:var(--r-pill)}
  .badge.best{background:var(--surface-strong);color:var(--up);border:1px solid var(--hairline)}
  .badge.excl{background:var(--surface-strong);color:var(--down);border:1px solid var(--hairline)}
  .badge.manual{background:var(--surface-strong);color:var(--warn);border:1px solid var(--hairline)}
  .badge.age{background:var(--surface-strong);color:var(--body);border:1px solid var(--hairline)}
  .prod-price{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px}
  .prod-price .cur{font-size:12px;color:var(--body);font-weight:600;margin-right:1px}
  .prod-price small{font-size:11px;color:var(--body);font-weight:500}
  .btn-buy{margin-top:2px;font-size:12.5px;font-weight:600;padding:8px 18px;border-radius:var(--r-pill);border:none;cursor:pointer;background:var(--brand);color:var(--on-brand)}
  .btn-buy:disabled{background:var(--surface-strong);color:var(--muted-soft);cursor:not-allowed}
  .btn-consult{font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:var(--r-pill);border:1.5px solid var(--warn);background:var(--canvas);color:var(--warn);cursor:pointer}
  .age-note{font-size:10.5px;color:var(--down);font-weight:600}
  .cmp th.group,.cmp td.group{background:var(--surface-strong);color:var(--ink);font-weight:600;font-size:12.5px;letter-spacing:.3px;padding:9px 14px;border-bottom:1px solid var(--hairline)}
  .cmp th.group{position:sticky;inset-inline-start:0;z-index:6}
  .cmp td.prod .cell-val{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap}
  .cell-val .check{font-weight:600}
  .cell-val .check.yes{color:var(--up)}
  .cell-val .check.no{color:var(--down)}
  .diff-row .row-label{background:var(--surface-soft)}
  .cell-hl.attn{color:var(--warn);font-weight:600}
  .cell-hl.good{color:var(--up);font-weight:600}
  .cell-hl.bad{color:var(--down);font-weight:600}
  .cell-hl .tag{display:inline-block;font-size:10px;font-weight:600;padding:1px 6px;border-radius:var(--r-xs);margin-inline-start:4px}
  .tag.min{background:var(--up);color:#fff}
  .tag.max{background:var(--down);color:#fff}
  .tag.best{background:var(--up);color:#fff}
  .tag.worst{background:var(--down);color:#fff}
  .row-note{grid-column:1/-1;display:none;font-size:11.5px;color:var(--warn);background:var(--surface-strong);padding:6px 14px;border-top:1px dashed var(--hairline)}
  tr.diff-row .row-note{display:block}
  .row-note.help{display:block;background:var(--brand-tint);color:var(--body);line-height:1.7}
  .q{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-inline-start:6px;border:1px solid var(--hairline);border-radius:50%;background:var(--canvas);color:var(--muted);font-size:11px;font-weight:600;cursor:pointer;vertical-align:middle;flex:none;transition-property:color,border-color,background-color;transition-duration:.15s;transition-timing-function:ease-out}  @media(hover:hover){
    .q:hover{border-color:var(--brand);color:var(--brand)}
  }
  .q.active{background:var(--brand);border-color:var(--brand);color:#fff}
  .prod-col.hidden{display:none}

  .buy-bar{position:fixed;bottom:0;left:0;right:0;z-index:60;background:var(--canvas);border-top:1px solid var(--hairline);box-shadow:0 -4px 12px rgba(0,0,0,.04);padding:12px 0}
  .buy-bar .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .buy-summary{font-size:13px;color:var(--body)}
  .buy-summary b{color:var(--ink);font-weight:600}
  .buy-actions{margin-inline-start:auto;display:flex;gap:10px}
  .buy-actions .btn-buy{padding:10px 24px;font-size:13.5px}
  .buy-actions .btn-consult{padding:10px 18px;font-size:13.5px}
  footer{background:var(--surface-dark);color:var(--muted-soft);padding:32px 0;text-align:center;font-size:12px}
  footer a{color:var(--muted-soft);text-decoration:none}
  @media(hover:hover){
    footer a:hover{color:#fff}
  }

  /* FAQ */
  .faq{padding:0 0 40px}
  .faq h2{font-size:19px;font-weight:600;margin:8px 0 14px}
  .faq details{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-md);padding:14px 16px;margin-bottom:10px}
  .faq summary{font-weight:600;font-size:14px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:10px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";color:var(--brand);font-size:18px;font-weight:600}
  .faq details[open] summary::after{content:"–"}
  .faq p{font-size:13px;color:var(--body);margin-top:8px;line-height:1.7}
  .src-note{font-size:11px;color:var(--body);margin:8px 0 0}
  .source-link{font-size:10.5px;color:var(--brand);text-decoration:none;font-weight:600}
  @media(hover:hover){
    .source-link:hover{text-decoration:underline}
  }

  /* Provenance */
  .provenance{margin:-76px 0 92px;padding:14px 16px;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-md);font-size:12px;color:var(--body);line-height:1.7}
  .provenance b{color:var(--ink)}
  .provenance a{color:var(--brand);text-decoration:none}
  @media(hover:hover){
    .provenance a:hover{text-decoration:underline}
  }
  .provenance code{font-size:11px;background:var(--surface-strong);padding:1px 5px;border-radius:var(--r-xs)}

  /* Modal / checkout dialog（进出均用可中断过渡：exit 更快更柔和） */
  .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease-out,visibility 0s linear .15s}
  .modal-overlay.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .2s ease-out}
  .modal{background:var(--canvas);border-radius:var(--r-lg);max-width:520px;width:100%;padding:26px 26px 22px;box-shadow:var(--shadow-lg);max-height:calc(100dvh - 40px);overflow-y:auto;transform:translateY(10px) scale(.98);transition:transform .15s ease-out}
  .modal-overlay.open .modal{transform:translateY(0) scale(1);transition:transform .2s ease-out}
  body.modal-open{overflow:hidden}
  .modal h3{font-size:18px;font-weight:600;margin-bottom:4px}
  .modal .sub{font-size:12.5px;color:var(--body);margin-bottom:18px}
  .steps{display:flex;gap:6px;margin-bottom:20px}
  .step{flex:1;text-align:center;font-size:11px;color:var(--body);position:relative;padding-top:24px}
  .step::before{content:attr(data-n);position:absolute;top:0;left:50%;transform:translateX(-50%);width:20px;height:20px;border-radius:50%;background:var(--surface-strong);color:var(--body);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:11px}
  .step.active{color:var(--ink);font-weight:600}
  .step.active::before{background:var(--brand);color:#fff}
  .step.done{color:var(--up)}
  .step.done::before{background:var(--up);color:#fff;content:"✓"}
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .form-grid .full{grid-column:1/-1}
  .fld label{display:block;font-size:12px;color:var(--body);margin-bottom:4px;font-weight:600}
  .fld input,.fld select{width:100%;font-size:13.5px;padding:9px 11px;border:1px solid var(--hairline);border-radius:var(--r-md);font-family:inherit;background:var(--canvas);color:var(--ink)}
  .fld input:focus,.fld select:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:transparent}
  .modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
  .btn-ghost{font-size:13.5px;padding:10px 18px;border-radius:var(--r-md);border:1px solid var(--hairline);background:var(--canvas);color:var(--ink);cursor:pointer;font-weight:600}
  .btn-primary{font-size:14px;font-weight:600;padding:11px 26px;border-radius:var(--r-md);border:none;cursor:pointer;background:var(--brand);color:var(--on-brand)}
  .btn-primary:disabled{background:var(--surface-strong);color:var(--muted-soft);cursor:not-allowed}

  /* 共享按压反馈与过渡（显式属性，禁 transition:all） */
  .btn-buy,.btn-primary,.btn-ghost,.sc-btn,.toggle-btn,.ps-chip{
    transition-property:background-color,color,border-color,box-shadow,scale;
    transition-duration:.15s;transition-timing-function:ease-out}
  @media(hover:hover){
    .btn-buy:hover,.btn-primary:hover{background:var(--brand-active)}
  }
  .btn-buy:active,.btn-primary:active,.btn-ghost:active,.sc-btn:active,.toggle-btn:active,.ps-chip:active{scale:.96}
  .btn-primary.small{font-size:13.5px;padding:10px 20px}
  .issuing{text-align:center;padding:26px 0 8px}
  .issuing .spin{width:44px;height:44px;border-radius:50%;border:4px solid var(--hairline);border-top-color:var(--brand);margin:0 auto 14px;animation:spin 1s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .issuing .st{font-size:15px;font-weight:600}
  .issuing .st2{font-size:12.5px;color:var(--body);margin-top:4px}
  .done-box{text-align:center;padding:18px 0 6px}
  .done-box .tick{width:54px;height:54px;border-radius:50%;background:var(--good-tint);color:var(--up);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:600;margin:0 auto 12px}
  .done-box .pn{font-size:14px;background:var(--surface-strong);border:1px dashed var(--hairline);border-radius:var(--r-md);padding:8px 12px;margin:10px auto 0;display:inline-block;font-variant-numeric:tabular-nums}
  .done-box .em{font-size:12.5px;color:var(--body);margin-top:10px;line-height:1.7}
  .modal .footnote{font-size:11px;color:var(--body);margin-top:14px;text-align:center}

  /* Buy bar inner layout */
  .buy-inner{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .buy-prod{font-size:13.5px}
  .buy-prod b{font-size:15px;font-weight:600}
  .buy-prod .muted{color:var(--body);font-size:12.5px}
  .buy-price{margin-inline-start:auto;font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
  .buy-price small{font-size:12px;color:var(--body);font-weight:500}
  .buy-hint{font-size:12px;color:var(--body);flex-basis:100%}

  @media(max-width:680px){
    .brand-row{gap:8px}
    .trust-chips{margin-inline-start:0;width:100%}
    .page-head h1{font-size:22px}
    .filters{gap:8px}
    .f-control{min-width:60px;font-size:12px}
    .ps-chips{gap:6px}
    .ps-chip{padding:5px 10px;font-size:11.5px}
    .buy-bar .wrap{flex-direction:column;align-items:stretch;gap:8px}
    .buy-actions{margin-inline-start:0;justify-content:center}
  }

  /* 轻提示浮层（替代原生 alert；桌面悬于购买条上方，移动端置于筛选条下方顶部） */
  .toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(8px);background:var(--surface-dark);color:#fff;font-size:13px;font-weight:600;padding:10px 18px;border-radius:var(--r-pill);z-index:120;opacity:0;pointer-events:none;box-shadow:var(--shadow-lg);max-width:calc(100vw - 40px);text-align:center;transition:opacity .15s ease-out,transform .15s ease-out}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  @media(max-width:680px){
    .toast{bottom:auto;top:86px;transform:translateX(-50%) translateY(-8px)}
    .toast.show{transform:translateX(-50%) translateY(0)}
  }

  /* 方向性箭头由 CSS 供给（文案源保持无箭头），RTL 自动反向 */
  .demo-banner a::after{content:"→";margin-inline-start:4px}
  .sc-btn::after{content:"→";margin-inline-start:6px}
  [dir="rtl"] .demo-banner a::after,[dir="rtl"] .sc-btn::after{content:"←"}

  /* RTL（ar/fa）：物理属性已全部换用逻辑属性，此处只重置会破坏阿拉伯/波斯字母连写的字距 */
  [dir="rtl"] .brand-name,[dir="rtl"] .f-label,[dir="rtl"] .cmp th.group,[dir="rtl"] .page-head h1,[dir="rtl"] .sc-head h2{letter-spacing:0}

  /* 触控设备：提升小控件的命中区（≥40px），桌面密度不受影响 */
  @media(pointer:coarse){
    .chip{padding:9px 14px}
    .toggle-btn{padding:9px 16px}
    .f-control{padding:11px 12px}
    .ps-chip{padding:10px 16px}
    .btn-buy{padding:12px 20px}
    .btn-consult{padding:12px 16px}
    .prod-check input{width:18px;height:18px}
    .hl-toggle input{width:20px;height:20px}
    .q{width:30px;height:30px;font-size:13px}
    .sc-reset{padding:8px 0}
    .faq summary{padding:6px 0}
  }

  /* 尊重减弱动态偏好：关闭平滑滚动与装饰动效，保留静态状态提示（颜色/图标/文案） */
  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  }