:root{--product-gold:#edc67d;
--product-text:#e9eff8;
--product-muted:#becddd;
--product-title:"STKaiti","KaiTi","Songti SC","Noto Serif CJK SC",SimSun,serif}

.product-page{margin:0;
min-width:320px;
min-height:100vh;
background:radial-gradient(ellipse at 50% 0,#15395366,transparent 65%),#071329;
color:var(--product-text);
font:16px/1.7 "PingFang SC","Microsoft YaHei",sans-serif}

.product-page *,.product-nav *{box-sizing:border-box}
.product-page a{color:#b7dcff;
text-underline-offset:5px}
.product-page button,.product-page input,.product-page select{font:inherit}
.product-page button,.product-page select{cursor:pointer}

.product-nav{max-width:1568px;
min-height:76px;
margin:auto;
padding:12px 34px;
display:flex;
justify-content:space-between;
align-items:center;
gap:24px;
border-bottom:1px solid #c69b505c;
color:var(--product-text);
font:16px/1.4 "PingFang SC","Microsoft YaHei",sans-serif}

.product-nav a{text-decoration:none}
.product-brand{color:#f3d693!important;
font:700 clamp(22px,2.2vw,32px)/1.3 var(--product-title);
white-space:nowrap}
.product-brand span{padding:0 7px}
.product-nav-links{display:flex;
gap:18px}
.product-nav-links a{min-height:44px;
padding:10px 22px;
border:1px solid transparent;
border-radius:14px 5px;
color:#e9eff8;
white-space:nowrap}
.product-nav-links a:hover{background:#183650}
.product-nav-links a[aria-current=page]{color:#ffe4a4;
border-color:#d4ad60;
background:linear-gradient(#c19a401f,#c19a400a);
box-shadow:inset 0 0 9px #d4a75514}

.product-main{width:min(1180px,calc(100% - 48px));
margin:auto}
.product-hero{text-align:center;
padding:32px 0 28px}
.product-eyebrow{font:600 19px/1.5 var(--product-title);
color:#e8c77f;
margin:0 0 8px;
letter-spacing:3px}
.product-hero h1{color:#ffe4ac;
font:700 clamp(30px,4vw,48px)/1.35 var(--product-title);
letter-spacing:3px;
margin:0 0 10px}
.product-hero>p:last-child{color:#e8dfcd;
margin:0;
font-size:18px}

.product-frame{position:relative;
border:1.5px solid #e0b86c;
border-radius:15px;
background:linear-gradient(120deg,#12345166,transparent 70%),#0a1e33;
box-shadow:inset 0 0 0 3px #08172b,inset 0 0 0 4px #a87a354d,0 7px 20px #0003}
.product-frame:before,.product-frame:after{content:"◇";
position:absolute;
top:4px;
color:#e4bb6d;
font-size:18px;
line-height:1;
pointer-events:none}
.product-frame:before{left:7px}
.product-frame:after{right:7px}

.search-form{padding:30px 42px 20px}
.search-filters{display:grid;
grid-template-columns:1fr 1fr;
gap:44px;
margin-bottom:26px}
.search-filters label{display:grid;
grid-template-columns:auto 1fr;
align-items:center;
gap:20px;
min-width:0;
font-weight:600}
.search-filters select{width:100%;
min-width:0;
height:46px;
padding:0 15px;
background:#183650;
color:#f1f5fc;
border:1px solid #7895b3;
border-radius:7px;
color-scheme:dark;
font-weight:400}
.search-filters option{background:#102b46;
color:#f1f5fc}
.search-filters option:checked{background:#285273;
color:#fff0bc}
.search-filters select:disabled{color:#bdcbdd;
background-color:#203249;
opacity:1}

.search-input-row{display:flex;
gap:20px}
.search-input-row input{width:100%;
min-width:0;
min-height:62px;
padding:12px 22px;
border:1.5px solid #dfbf78;
border-radius:10px;
background:linear-gradient(110deg,#173c5c,#102b43);
color:#f4f6ff;
font-size:23px}
.search-input-row input::placeholder{color:#bacbdd;
font-size:18px}
.product-primary,.product-secondary{display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
text-decoration:none!important;
white-space:nowrap;
min-height:44px;
border-radius:7px;
padding:9px 18px;
font-weight:600}
.product-primary{color:#32210b!important;
border:1px solid #ffe6a1;
background:linear-gradient(#ffe9a4,#efb94e);
box-shadow:inset 0 0 0 2px #fff0bb55,0 3px 0 #90622255;
font:700 24px/1.3 var(--product-title);
min-width:190px}
.product-primary:hover:not(:disabled){background:linear-gradient(#fff2c5,#ffd277)}
.product-primary:disabled,.product-secondary:disabled{background:#203249;
color:#bdcbdd!important;
border-color:#607792;
box-shadow:none;
cursor:not-allowed;
opacity:1}
.product-secondary{color:#ecf4ff!important;
background:linear-gradient(#214a69,#14324c);
border:1px solid #7895b3;
font-size:15px}
.product-secondary:hover:not(:disabled){border-color:#e6c481;
background:#28506c}
.search-input-help{display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:8px;
color:#becddd;
font-size:14px}
.search-input-help p{margin:0}
.example-link{min-height:36px;
border:0;
padding:4px 0;
background:none;
color:#b7dcff;
text-decoration:underline;
text-underline-offset:4px}
.example-link:disabled{color:#bdcbdd;
text-decoration:none;
cursor:not-allowed}

.product-section-heading{display:flex;
align-items:center;
justify-content:center;
gap:24px;
margin:22px 0 18px;
color:#edc67d}
.product-section-heading h2{font:700 27px/1.5 var(--product-title);
margin:0;
letter-spacing:3px}
.product-section-heading>span{width:90px;
height:1px;
background:linear-gradient(90deg,transparent,#c6a569)}
.product-section-heading>span:last-child{transform:rotate(180deg)}
.search-result{padding:22px 32px 18px;
margin:0 0 20px}
.activity-pill{display:inline-block;
color:#f2d796;
border:1px solid #c9aa65;
border-radius:20px;
padding:1px 20px;
font-size:15px}
.search-result h3{display:flex;
align-items:baseline;
gap:12px;
font-size:20px;
line-height:1.7;
font-weight:500;
margin:12px 0 16px;
overflow-wrap:anywhere}
.search-result h3>span{color:#edc67d;
flex-shrink:0}
.search-answer{display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:14px 20px;
border:1px solid #73d991;
border-radius:10px;
background:linear-gradient(110deg,#0b5037,#092b32)}
.search-answer>div{display:flex;
align-items:center;
gap:13px;
min-width:0}
.answer-check{width:30px;
height:30px;
display:grid;
place-items:center;
flex-shrink:0;
border-radius:50%;
background:#7de79d;
color:#06371f;
font-weight:700}
.answer-label{font-size:17px;
white-space:nowrap;
color:#dbf5df}
.search-answer strong{font:700 29px/1.5 var(--product-title);
color:#f0fff2;
overflow-wrap:anywhere;
min-width:0}
.copy-status{display:block;
min-height:0;
font-size:13px;
color:#b8dfc5}
.copy-status:not(:empty){margin-top:10px}
.search-summary{text-align:right;
font-size:14px;
color:#becddd;
margin:0 4px 12px}
.search-empty{text-align:center;
color:#becddd;
padding:30px 20px 34px;
min-height:170px}
.search-empty>svg{color:#d8b46f}
.search-empty h3{font-size:19px;
color:#e5d3aa;
margin:8px 0}
.search-empty p{font-size:15px;
margin:4px auto;
max-width:650px}
.product-feedback{text-align:center;
padding:24px;
margin:16px 0;
border:1px solid #c9a96766;
border-radius:12px;
background:#102b42;
color:#e3ecf8}
.product-feedback h3{margin:0 0 8px;
font-size:20px}
.product-feedback p{margin:0 0 14px}
.product-feedback button+button{margin-left:12px}
.product-feedback.error{border-color:#d59b79;
color:#ffe5d7}
.search-spinner{display:block;
width:28px;
height:28px;
border:2px solid #38536d;
border-top-color:#edc67d;
border-radius:50%;
margin:0 auto 16px;
animation:search-spin .8s linear infinite}
@keyframes search-spin{to{transform:rotate(360deg)}
}

.product-alternative{display:flex;
align-items:center;
justify-content:center;
gap:24px;
margin:28px auto 14px;
padding:18px 24px;
width:min(930px,100%);
border:1px solid #7895b3;
border-radius:11px;
background:linear-gradient(110deg,#173956,#10283f)}
.product-alternative>svg{color:#ebc976}
.product-alternative strong{font:600 22px/1.5 var(--product-title);
color:#f4e1b5}
.product-alternative a{font-size:17px}
.product-alternative a+a{border-left:1px solid #7895b3;
padding-left:24px}
.search-scope{text-align:center;
font-size:13px;
color:#afc2d6;
margin:12px 0 24px}
.product-footer{text-align:center;
padding:20px 24px 28px;
color:#d7e0ed;
font-size:14px}
.product-footer:before,.product-footer:after{content:"◇";
padding:0 18px;
color:#d4ad60}

.guide-modes{display:grid;
grid-template-columns:1fr 1fr;
gap:24px}
.guide-mode{padding:26px 30px;
display:flex;
align-items:center;
gap:28px}
.guide-mode-icon{width:60px;
height:60px;
color:#edc67d;
flex-shrink:0}
.guide-mode>div{min-width:0}
.guide-mode .product-primary{font-size:20px;
min-width:0}
.guide-search-flow p{font-size:14px;
color:#cbd9e8;
margin:12px 0 0}
.guide-mode h2{font:700 26px/1.4 var(--product-title);
color:#f5d590;
margin:0 0 8px}
.guide-mode p{color:#cbd9e8;
margin:0 0 18px}
.guide-steps{display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
padding:0;
margin:0;
list-style:none;
counter-reset:steps}
.guide-step{padding:22px 24px}
.guide-step>span{font:32px/1.2 var(--product-title);
color:#e8c77f}
.guide-step h3{margin:10px 0 8px;
color:#f1d69f;
font:600 23px/1.5 var(--product-title)}
.guide-step p{margin:0;
color:#c6d5e5;
font-size:15px}
.guide-search-flow{margin:24px 0;
padding:18px 24px;
border:1px solid #7895b3;
border-radius:10px;
background:#13314a;
color:#e2eaf3}
.guide-search-flow strong{color:#f3d693}
.guide-search-flow a{margin-left:12px}
.guide-faq{margin:0 0 24px}
.guide-faq details{padding:16px 22px;
border-bottom:1px solid #d0a95c55;
background:#10263b}
.guide-faq details:first-child{border-radius:10px 10px 0 0}
.guide-faq details:last-child{border-radius:0 0 10px 10px}
.guide-faq summary{cursor:pointer;
color:#efdab0;
font-size:17px;
min-height:30px;
line-height:1.8}
.guide-faq details p{margin:12px 0 0;
color:#cfdae8;
line-height:1.9}
.guide-note{font-size:14px;
color:#bfcfe0;
padding:14px 0;
line-height:1.9}
.guide-scope{scroll-margin-top:20px;
color:#c6d5e5;
padding:20px 24px;
border:1px solid #617b9466;
border-radius:10px;
background:#0c2236}
.guide-scope h2{font-size:20px;
color:#e7d1a3;
margin:0 0 10px}
.guide-scope p{margin:8px 0}
.visually-hidden{position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0}
.product-page :focus-visible,.product-nav :focus-visible{outline:2px solid #ffe0a3;
outline-offset:4px}

@media(min-width:1600px){.product-main{width:min(1240px,calc(100% - 80px))}
.product-hero{padding:44px 0 36px}
}

@media(max-width:900px){.product-nav{padding:12px 20px;
gap:16px}
.product-nav-links{gap:5px}
.product-nav-links a{padding:10px 12px}
.search-form{padding:26px}
.search-filters{gap:20px}
.search-filters label{display:flex;
flex-direction:column;
align-items:stretch;
gap:8px}
.guide-step{padding:20px}
.product-alternative{gap:16px}
.product-alternative strong{font-size:20px}
}

@media(max-width:600px){.product-nav{flex-direction:column;
padding:12px 16px;
gap:10px}
.product-nav-links{width:100%;
justify-content:center;
gap:6px}
.product-nav-links a{padding:10px 12px;
font-size:14px;
flex:1;
text-align:center}
.product-main{width:calc(100% - 28px)}
.product-hero{padding:28px 0 22px}
.product-hero h1{font-size:30px;
letter-spacing:1px}
.product-hero>p:last-child{font-size:15px}
.product-eyebrow{font-size:16px}
.search-form{padding:22px 18px 16px}
.search-filters{gap:14px;
margin-bottom:20px;
font-size:14px}
.search-filters select{padding:0 8px;
font-size:15px}
.search-input-row{flex-direction:column;
gap:14px}
.search-input-row input{min-height:54px;
font-size:20px;
padding:10px 14px}
.search-input-row input::placeholder{font-size:15px}
.product-primary{min-height:52px;
font-size:23px}
.search-input-help{font-size:12px;
gap:8px}
.search-result{padding:20px 18px}
.search-result h3{font-size:17px;
gap:8px}
.search-answer{padding:12px;
gap:12px;
flex-wrap:wrap}
.search-answer strong{font-size:26px}
.search-answer .product-secondary{margin-left:auto}
.answer-label{font-size:15px}
.product-section-heading{gap:14px}
.product-section-heading>span{width:45px}
.product-section-heading h2{font-size:24px}
.search-summary{text-align:left}
.product-alternative{padding:18px 14px;
gap:14px;
flex-wrap:wrap}
.product-alternative strong{font-size:20px}
.product-alternative a{font-size:15px}
.product-alternative a+a{padding-left:14px}
.product-footer{font-size:12px;
padding:18px 10px}
.product-footer:before,.product-footer:after{padding:0 8px}
.guide-modes,.guide-steps{grid-template-columns:1fr;
gap:16px}
.guide-mode{padding:24px}
.guide-step{padding:20px 24px}
.guide-search-flow{font-size:15px;
padding:18px}
.guide-search-flow a{display:inline-block;
margin-left:0;
margin-top:8px}
.guide-faq details{padding:16px}
.guide-note{padding:12px 4px}
}

@media(prefers-reduced-motion:reduce){.search-spinner{animation:none}
}


.guide-section-title,.guide-faq>h2{text-align:center;
color:#edc67d;
font:700 27px/1.5 var(--product-title);
margin:24px 0}
.guide-note a{margin-left:8px}


/* Compact desktop search keeps the query and first answers above the fold. */
.search-page .product-hero{padding:18px 0 14px;text-align:left}
.search-page .product-hero h1{font-size:32px;letter-spacing:1px;margin-bottom:2px}
.search-page .product-hero>p:last-child{font-size:15px;color:#becddd}
.search-page .search-form{padding:18px 24px 10px}
.search-page .search-filters{margin-bottom:14px;gap:24px}
.search-page .search-input-row input{min-height:48px;font-size:18px;padding:10px 14px}
.search-page .product-primary{min-height:48px;font-size:20px}
.search-page .product-section-heading{margin:16px 0 10px;justify-content:flex-start;gap:14px}
.search-page .product-section-heading h2{font-size:21px;letter-spacing:1px}
.search-page .product-section-heading>span{display:none}
.search-page .search-summary{text-align:left;margin:0 0 10px}
.search-page .search-result{padding:16px 24px 14px;margin-bottom:14px}
.search-page .search-result h3{font-size:18px;margin:8px 0 12px}
.search-page .search-answer{padding:10px 14px}
.search-page .search-answer strong{font-size:24px}
.search-page .search-empty{padding:20px;min-height:130px}
.search-page .product-alternative{padding:12px 18px;margin-top:20px}
.search-page .product-alternative strong{font-size:18px}
.search-page .product-alternative a{font-size:15px}
.search-filters select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23edc67d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
@media(max-width:600px){.search-page .search-form{padding:18px 16px 10px}.search-page .product-hero h1{font-size:27px}.search-page .search-filters{gap:14px}.search-page .search-result{padding:16px}.search-filters select{padding-right:32px;background-position:right 8px center}.search-page .search-input-row{gap:10px}}

.automatic-search-input{position:relative}.automatic-search-input>svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#edc67d;pointer-events:none}.search-page .automatic-search-input input{padding-left:48px}
