/* site/assets/css/support.css —— R7 T1 支持中心：首屏搜索 / 分段筛选 + 资源网格 / 联系条。只用逻辑属性（插画 .ill 固定 LTR）；
   铜只做细线、下划线、小图标与深底大数字；动效只在 prefers-reduced-motion: no-preference 下；无 JS 时 .jsonly 隐藏 */
.sxpage .foot{margin-top:0}

/* ---------- 1. 首屏：搜索框是主角，右侧支持主题等轴测大图 ---------- */
.sxhero{background:var(--bg-2);border-block-end:1px solid var(--line);padding-block-end:var(--sp-6)}
.sxhero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);column-gap:var(--sp-5);align-items:center;padding-block-start:var(--sp-4)}
.sxhero-t{min-width:0}
.sxhero h1{font-size:clamp(var(--fs-5),4.6vw,3.75rem);letter-spacing:-.02em;margin-block-end:var(--sp-2)}
.sxhero .lead{max-inline-size:56ch;margin-block-end:var(--sp-4);text-wrap:pretty}
.sxhero-art{justify-self:end;inline-size:100%;max-inline-size:420px}
.sxhero-ill{inline-size:100%}
.sxsearch{position:relative;max-inline-size:760px}
.sxfield{position:relative}
.sxfield>.sico{position:absolute;inset-inline-start:24px;inset-block-start:50%;inline-size:26px;block-size:26px;margin-block-start:-13px;color:var(--navy);pointer-events:none}
.sxfield input{display:block;inline-size:100%;block-size:76px;padding-inline:66px 72px;font:inherit;font-size:1.3125rem;color:var(--ink);background:#fff;border:1.5px solid var(--navy);border-radius:16px;box-shadow:0 1px 0 rgba(27,30,34,.04);-webkit-appearance:none;appearance:none}
.sxfield input::placeholder{color:var(--mist);opacity:1}
[dir=rtl] .sxfield input:placeholder-shown{direction:rtl}
.sxfield input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(181,119,74,.16),0 16px 40px rgba(27,30,34,.12)}
.sxclear{position:absolute;inset-inline-end:14px;inset-block-start:50%;margin-block-start:-21px;inline-size:42px;block-size:42px;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:var(--navy);cursor:pointer}
.sxclear:hover{background:var(--bg-2)}.sxclear .sico{inline-size:20px;block-size:20px}
.sxkbd{position:absolute;inset-inline-end:22px;inset-block-start:50%;transform:translateY(-50%);font:600 13px/1 var(--font);padding:5px 9px;border:1px solid var(--line);border-block-end-width:2px;border-radius:6px;color:var(--mist);background:var(--bg-2)}
.sxsearch.has-q .sxkbd{display:none}
@media (hover:none),(max-width:600px){.sxkbd{display:none}}
.sxscope{margin:var(--sp-2) 0 0;font-size:var(--fs-0);color:var(--mist)}.sxscope b{font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums}
.sxpop{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);margin-block-start:var(--sp-4);max-inline-size:760px}
.sxpop>span{font-size:var(--fs-0);font-weight:600;color:var(--navy)}
.sxpop ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.sxpill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 10px;background:#fff;border:1px solid var(--line);border-radius:999px;font-size:var(--fs-0);line-height:1.35;color:var(--ink)}
.sxpill .sico{flex:none;inline-size:18px;block-size:18px;color:var(--gold)}
.sxpill:hover{border-color:var(--navy)}

/* 结果面板：listbox → group → option；当前项 .on，匹配处铜色下划线 */
.sxres{position:absolute;inset-inline:0;inset-block-start:calc(100% + 10px);z-index:30;max-block-size:min(66vh,580px);overflow-y:auto;overscroll-behavior:contain;padding:var(--sp-1);background:#fff;border:1px solid var(--line);border-radius:var(--r-2);box-shadow:0 22px 56px rgba(27,30,34,.18)}
.sxgrp+.sxgrp{margin-block-start:4px;padding-block-start:4px;border-block-start:1px solid var(--line)}
.sxgh{margin:8px 10px 4px;font-size:var(--fs-0);font-weight:600;color:var(--mist)}
.sxhit{display:flex;align-items:flex-start;gap:12px;padding:10px;border-radius:var(--r-1);color:var(--ink)}
.sxhit:hover,.sxhit.on{background:var(--bg-2)}
.sxhit.on{box-shadow:inset 2px 0 0 var(--navy)}
[dir=rtl] .sxhit.on{box-shadow:inset -2px 0 0 var(--navy)}
.sxhit .supic{flex:none;display:grid;place-items:center;inline-size:32px;block-size:32px;border-radius:8px;background:var(--bg-2);color:var(--navy)}
.sxhit:hover .supic,.sxhit.on .supic{background:var(--navy);color:#fff}
.sxhit .supic .sico{inline-size:18px;block-size:18px}
.sxhit-t{min-width:0}
.sxhit b{display:block;font-weight:600;line-height:1.35;color:var(--navy)}
.sxhit small{display:block;margin-block-start:2px;font-size:var(--fs-0);line-height:1.45;color:var(--mist)}
.sxhit mark{background:none;color:inherit;box-shadow:inset 0 -2px 0 var(--gold)}
.sxtags{display:flex;flex-wrap:wrap;gap:4px;margin-block-start:6px}.sxtags i{font-style:normal;font-size:12px;line-height:1.6;padding:0 8px;border:1px solid var(--line);border-radius:999px;color:var(--mist);background:#fff}
.sxnone{padding:var(--sp-3)}.sxnone p{margin:0 0 var(--sp-2);color:var(--ink)}
.sxnone a{font-weight:600;color:var(--navy);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:5px}

/* ---------- 2. 从选型到售后：分段筛选条紧贴资源网格 ---------- */
.sxbody{padding-block-start:var(--sp-6)}
.sxhead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--sp-1) var(--sp-4);margin-block-end:var(--sp-3)}
.sxhead h2{margin:0}.sxhead p{margin:0;color:var(--mist)}
.sxbar{display:grid;grid-template-columns:auto repeat(4,minmax(0,1fr));gap:4px;padding:4px;background:var(--bg-2);border:1px solid var(--line);border-radius:14px}
.sxstage{display:flex;align-items:flex-start;gap:10px;min-width:0;padding:12px 14px;background:none;border:0;border-radius:10px;font:inherit;text-align:start;color:var(--ink);cursor:pointer}
.sxstage:disabled{cursor:default;color:var(--ink)}
.sxstage i{flex:none;display:grid;place-items:center;inline-size:28px;block-size:28px;border:1px solid var(--navy);border-radius:50%;background:#fff;font-style:normal;font-weight:600;font-size:var(--fs-0);font-variant-numeric:tabular-nums;color:var(--navy)}
.sxstage span{min-width:0}
.sxstage b{display:block;font-weight:600;line-height:1.3;color:var(--navy)}
.sxstage small{display:block;margin-block-start:2px;font-size:13px;line-height:1.45;color:var(--mist)}
.sxall{align-items:center;padding-inline:20px}
.sxstage:not(:disabled):hover{background:rgba(255,255,255,.6)}
.sxstage[aria-pressed=true]:not(:disabled){background:#fff;box-shadow:inset 0 -2px 0 var(--gold),0 1px 2px rgba(27,30,34,.08)}
.sxstage[aria-pressed=true]:not(:disabled) i{background:var(--navy);color:#fff}
.sxstage:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

.sxgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp-3);margin-block-start:var(--sp-3)}
.sxcalc{grid-column:1/5;grid-row:1/3}
.sx-downloads{grid-column:5/7;grid-row:1}.sx-support-faq{grid-column:5/7;grid-row:2}
.sx-support-installation{grid-column:1/3}.sx-support-app-guide{grid-column:3/5}.sx-support-warranty{grid-column:5/7}

/* 资源卡：上为标题说明，下为数字 + 插画 */
.sxcard{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;gap:var(--sp-2) var(--sp-2);padding:var(--sp-4) var(--sp-3) var(--sp-3) var(--sp-4);background:#fff;border:1px solid var(--line);border-radius:var(--r-2);color:inherit}
.sxcard::before{content:"";position:absolute;inset-inline:var(--sp-4);inset-block-start:0;block-size:2px;background:var(--gold);transform:scaleX(0);transform-origin:0 50%}
[dir=rtl] .sxcard::before{transform-origin:100% 50%}
.sxcard:hover{border-color:#C9C7C1}
.sxcard:hover::before,.sxgrid.filtered .sxcard.hl::before{transform:scaleX(1)}
.sxcard:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.sxcard-t{grid-column:1/-1;grid-row:1;min-width:0;padding-inline-end:var(--sp-2)}
.sxcard-t b{display:block;font-size:var(--fs-3);font-weight:600;line-height:1.2;color:var(--navy);hyphens:auto}
.sxcard-t small{display:block;margin-block-start:8px;max-inline-size:46ch;font-size:var(--fs-0);line-height:1.5;color:var(--mist)}
.sxnum{grid-column:1;grid-row:2;align-self:end;display:flex;flex-direction:column;gap:4px;padding-block-end:var(--sp-1);min-width:0}
.sxnum b{font-size:var(--fs-5);font-weight:600;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--navy)}
.sxnum span{font-size:var(--fs-0);line-height:1.35;color:var(--mist);text-wrap:balance}:lang(ja) .sxnum span{word-break:auto-phrase}
.sxcard .ill{grid-column:2;grid-row:2;align-self:end;inline-size:180px;margin-block:-8px -6px}

/* 筛选：命中卡石墨描边 + 铜顶线；未命中只淡化插画，不降文字对比度 */
.sxgrid.filtered .sxcard.hl{border-color:var(--navy)}
.sxgrid.filtered .sxcalc.hl{box-shadow:inset 0 2px 0 var(--gold),0 0 0 1px var(--navy)}
.sxgrid.filtered [data-stages]:not(.hl) .ill{opacity:.35;filter:grayscale(1)}
.sxgrid.filtered .sxcard:not(.hl) :is(.sxcard-t b,.sxnum b){color:var(--mist)}

/* 迷你计算器大卡（石墨底；铜色大数字） */
.sxcalc{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:1fr auto;gap:var(--sp-4) var(--sp-5);padding:var(--sp-5);background:var(--navy);border-radius:var(--r-3);color:#F2F1EE}
.sxcalc-q h2{margin:var(--sp-3) 0 var(--sp-2);font-size:var(--fs-4);color:#fff}
.sxcalc-q>p{margin:0;color:#A9AFB6}
.sxcalc-ic{display:grid;place-items:center;inline-size:44px;block-size:44px;border:1px solid rgba(169,175,182,.35);border-radius:12px;color:var(--gold)}.sxcalc-ic .sico{inline-size:24px;block-size:24px}
.sxctl{display:grid;gap:var(--sp-3);margin-block-start:var(--sp-4)}
.sxcity>span,.sxpn>span{display:block;margin-block-end:6px;font-size:var(--fs-0);font-weight:600;color:#F2F1EE}
.sxcity select{display:block;inline-size:100%;max-inline-size:320px;block-size:48px;padding-inline:14px 40px;font:inherit;color:#fff;background:#2A2E34 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23A9AFB6' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat;background-size:12px 8px;background-position:right 14px center;border:1px solid rgba(169,175,182,.45);border-radius:var(--r-1);-webkit-appearance:none;appearance:none;cursor:pointer}
[dir=rtl] .sxcity select{background-position:left 14px center}
.sxcity select option{color:#1B1E22;background:#fff}
.sxpn-ctl{display:inline-flex;align-items:stretch;border:1px solid rgba(169,175,182,.45);border-radius:var(--r-1);overflow:hidden}
.sxpn-ctl button{display:grid;place-items:center;inline-size:48px;block-size:48px;padding:0;border:0;background:#2A2E34;color:#fff;cursor:pointer}
.sxpn-ctl button:hover{background:#353A41}.sxpn-ctl button:disabled{color:#5E646B;cursor:not-allowed}
.sxpn-ctl .sico{inline-size:18px;block-size:18px}
.sxpn-ctl input{inline-size:64px;padding:0;border:0;border-inline:1px solid rgba(169,175,182,.45);background:var(--navy);font:600 var(--fs-2)/1 var(--font);font-variant-numeric:tabular-nums;color:#fff;text-align:center;-moz-appearance:textfield;appearance:textfield}
.sxpn-ctl input::-webkit-inner-spin-button,.sxpn-ctl input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.sxcalc :focus-visible{outline:2px solid #fff;outline-offset:2px}
.sxcalc-ex{margin:var(--sp-3) 0 0;font-weight:600;color:#F2F1EE}
.js .sxcalc-ex{display:none}
.sxcalc-a{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:var(--sp-2);min-width:0}
.sxpanels{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;inline-size:100%;max-inline-size:320px;margin-block-end:var(--sp-3);direction:ltr}
.sxpanels i{aspect-ratio:3/4.6;border:1px dashed rgba(169,175,182,.32);border-radius:3px}
.sxpanels i.on{border:1px solid #A9AFB6;background-color:#30353C;background-image:linear-gradient(90deg,transparent calc(50% - .5px),rgba(169,175,182,.5) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px)),linear-gradient(transparent calc(33% - .5px),rgba(169,175,182,.5) calc(33% - .5px) calc(33% + .5px),transparent calc(33% + .5px) calc(66% - .5px),rgba(169,175,182,.5) calc(66% - .5px) calc(66% + .5px),transparent calc(66% + .5px))}
.sxsave{display:flex;flex-direction:column;gap:6px;margin:0}
.sxsave>span{font-size:var(--fs-0);font-weight:600;color:#A9AFB6}
.sxsave b{font-size:clamp(2.75rem,5.2vw,4.25rem);font-weight:600;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--gold)}
.sxsave b bdi{white-space:nowrap}
.sxyield{margin:0;font-size:var(--fs-0);color:#A9AFB6}.sxyield b{font-weight:600;color:#fff;white-space:nowrap}
.sxrate{margin:0;font-size:12px;color:#A9AFB6}
.sxcalc .btn{margin-block-start:var(--sp-2)}
.sxcalc .btn.gold{background:var(--bg-2);border-color:var(--bg-2);color:var(--navy)}
.sxnote{grid-column:1/-1;margin:0;padding-block-start:var(--sp-3);border-block-start:1px solid rgba(169,175,182,.2);font-size:13px;color:#A9AFB6}

/* ---------- 3. 联系条（珍珠白，贴页脚） ---------- */
.sxcontact{margin-block-start:var(--sp-7);background:var(--bg-2);border-block-start:1px solid var(--line)}
.sxcontact-in{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:var(--sp-4);padding-block:var(--sp-5)}
.sxcontact-t h2{margin:0 0 4px}.sxcontact-t p{margin:0;color:var(--mist)}
.sxch{display:flex;flex-wrap:wrap;gap:var(--sp-2);list-style:none;margin:0;padding:0}
.sxch a{display:flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;background:#fff;border:1px solid var(--line);border-radius:var(--r-1);color:var(--ink)}
.sxch a:hover{border-color:var(--navy)}
.sxch-ic{display:grid;place-items:center;flex:none;inline-size:36px;block-size:36px;border-radius:50%;background:var(--navy);color:#fff}.sxch-ic svg{inline-size:18px;block-size:18px}
.sxch-t small{display:block;font-size:12px;line-height:1.3;color:var(--mist)}.sxch-t bdi{display:block;font-weight:600;line-height:1.35;white-space:nowrap}

/* ---------- 动效：只在用户没有要求减少动态效果时 ---------- */
@media (prefers-reduced-motion:no-preference){
  .sxfield input{transition:border-color .2s,box-shadow .25s}
  .sxcard{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .2s}
  .sxcard:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(27,30,34,.10)}
  .sxgrid.filtered .sxcard.hl,.sxgrid.filtered .sxcalc.hl{transform:translateY(-4px)}
  .sxgrid.filtered .sxcard.hl{box-shadow:0 18px 40px rgba(27,30,34,.12)}
  .sxcalc{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
  .sxcard::before{transition:transform .35s ease}
  .sxgrid .ill{transition:opacity .3s,filter .3s}
  .sxstage{transition:background-color .2s,box-shadow .2s}.sxstage i{transition:background-color .2s,color .2s}
  .sxpanels i{transition:background-color .3s,border-color .3s,transform .3s}
  .sxpanels i.pop{transform:translateY(-4px)}
  .sxcard .ill :is(.sxa0,.sxa1,.sxa2,.sxa3){transition:transform .5s cubic-bezier(.2,.7,.2,1),stroke-dasharray .7s ease}
  .sx-downloads:hover .sxa1{transform:translate(5px,-6px)}.sx-downloads:hover .sxa2{transform:translate(10px,-12px)}.sx-downloads:hover .sxa3{transform:translateY(-6px)}
  .sx-support-faq:hover .sxa1{transform:translateY(-6px)}.sx-support-faq:hover .sxa2{transform:translateY(5px)}
  .sx-support-app-guide:hover .sxa1{stroke-dasharray:100 100}.sx-support-app-guide:hover .sxa2{transform:translateY(-6px)}
  .sx-support-installation .sxa1{transform-box:fill-box;transform-origin:12% 50%}.sx-support-installation:hover .sxa1{transform:rotate(-18deg)}
  .sx-support-warranty .sxa1{transition:stroke-dasharray .8s ease}
  .sxhero-ill :is(.sxp1,.sxp2,.sxp3){transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .sxhero-ill .sxp1{transform:translate(calc(var(--px,0) * -4px),calc(var(--py,0) * -3px))}
  .sxhero-ill .sxp2{transform:translate(calc(var(--px,0) * 5px),calc(var(--py,0) * 4px))}
  .sxhero-ill .sxp3{transform:translate(calc(var(--px,0) * 10px),calc(var(--py,0) * 8px))}
}
.sx-support-warranty .ill .sxa1{stroke-width:2.4;stroke-dasharray:0 100}
.sx-support-warranty:hover .ill .sxa1,.sxgrid.filtered .sx-support-warranty.hl .ill .sxa1{stroke-dasharray:100 0}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .sxhero-in{grid-template-columns:minmax(0,1fr) minmax(0,300px)}
  .sxgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sxcalc{grid-column:1/-1;grid-row:auto}
  .sx-downloads,.sx-support-faq,.sx-support-installation,.sx-support-app-guide{grid-column:auto;grid-row:auto}
  .sx-support-warranty{grid-column:1/-1}
  .sxstage small{display:none}
  .sxcontact-in{grid-template-columns:minmax(0,1fr) auto}.sxch{grid-column:1/-1;grid-row:2}
}
@media (max-width:760px){
  .sxhero-in{grid-template-columns:minmax(0,1fr)}.sxhero-art{display:none}
  .sxbar{position:sticky;inset-block-start:60px;z-index:20;display:flex;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--sp-4) * -1);padding:6px var(--sp-4);border-radius:0;border-inline:0;background:rgba(242,241,238,.96);backdrop-filter:blur(8px)}
  .sxbar::-webkit-scrollbar{display:none}
  .sxstage{flex:none;align-items:center;padding:8px 12px}.sxstage i{inline-size:24px;block-size:24px}
  .sxcalc{grid-template-columns:minmax(0,1fr);padding:var(--sp-4);gap:var(--sp-3)}
  .sxcontact-in{grid-template-columns:minmax(0,1fr)}.sxch{grid-row:auto}
}
@media (max-width:600px){
  .sxhero{padding-block-end:var(--sp-5)}.sxhero-in{padding-block-start:var(--sp-3)}
  .sxfield input{block-size:60px;padding-inline:52px 52px;font-size:var(--fs-1);border-radius:14px}.sxfield>.sico{inset-inline-start:18px;inline-size:22px;block-size:22px;margin-block-start:-11px}
  .sxfield input:placeholder-shown{padding-inline-end:16px}
  .sxbody{padding-block-start:var(--sp-5)}
  .sxgrid{grid-template-columns:minmax(0,1fr)}.sxgrid>*{grid-column:1/-1}
  .sxcard{padding:var(--sp-3)}.sxcard .ill{inline-size:140px}
  .sxch{flex-direction:column}.sxch a{inline-size:100%}
  .sxcontact-in .btn{justify-content:center}
}