/* WEWIN 全站共用五色层（2026-10-06）。规范：WEWIN全站UI与动效统一规则_现行.md 第2、5、6节。
   在 styles.css、site.css 之后加载，供首页与精选产品页以外的页面接入；首页、精选产品页不加载本文件。
   五色：黑 #1f2d29 ｜ 白 #ffffff/#f7fbf9 ｜ 青绿 #1a7063/#0b5f5a ｜ 薄荷 #9fe1cb/#e3f6ee ｜ 橙 #ff6801（与 Logo 同色，只作提醒与少量点缀；10-06 取代淡紫） */
:root{
  --c-ink:#1f2d29;--c-text:#26302a;--c-muted:#586862;--c-line:#dfeae6;--c-page:#f7fbf9;--c-card:#ffffff;
  --c-teal:#1a7063;--c-teal-deep:#0b5f5a;--c-mint:#9fe1cb;--c-mint-soft:#e3f6ee;
  --c-coral:#ff6801;--c-coral-bg:#fff0e6;--c-coral-line:rgba(255,104,1,.35);--c-coral-soft:#ff6801;--c-neutral-bg:#eef3f1;
  --c-panel-1:#effaf4;--c-panel-2:#dff3ea;--c-panel-line:rgba(26,112,99,.2);
  --c-ease:cubic-bezier(.16,1,.3,1);--c-font:"Inter","Microsoft YaHei UI","Microsoft YaHei","PingFang SC","Segoe UI",sans-serif;
  /* 旧变量名映射到五色（site.css 各组件仍引用它们；新代码请用 --c-*） */
  --blue:var(--c-teal);--red:var(--c-teal-deep);--violet:var(--c-mint);--ink:var(--c-text);--muted:var(--c-muted);
  --paper:var(--c-page);--white:var(--c-card);--line:var(--c-line);--night:var(--c-teal-deep);
  --blue-soft:var(--c-mint-soft);--red-soft:var(--c-mint-soft);--violet-soft:var(--c-mint-soft);
  --sans:var(--c-font);--serif:var(--c-font);--ease:var(--c-ease);
}
body{background:var(--c-page);color:var(--c-text);font-family:var(--c-font);-webkit-font-smoothing:antialiased}
h1,h2,h3,html[lang] h1,html[lang] h2,html[lang] h3{font-family:var(--c-font)}
:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--c-teal);outline-offset:3px}

/* 阅读进度线（wewin-base.js 插入） */
.wb-progress{position:fixed;left:0;top:0;z-index:60;width:100%;height:3px;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--c-teal),#6ee7b7)}

/* 导航：冷白毛玻璃，滚动后收窄 */
.site-header{position:sticky;top:0;z-index:50;background:rgba(247,251,249,.78);border-bottom:1px solid transparent;backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);transition:box-shadow .4s var(--c-ease)}
.site-header .header-row{height:88px;gap:14px;transition:height .45s var(--c-ease)}
.site-header .brand img{transition:transform .45s var(--c-ease)}
.site-header.wb-scrolled{box-shadow:0 1px 0 rgba(15,40,36,.06),0 10px 30px -18px rgba(15,40,36,.35)}
.site-header.wb-scrolled .header-row{height:66px}
.site-header.wb-scrolled .brand img{transform:scale(.86)}
.site-header .nav{gap:12px}
.site-header .nav a{font-size:14px;font-weight:500;color:#3f5650;border-bottom-color:transparent}
.site-header .nav a:hover{color:var(--c-teal)}
.site-header .nav a[aria-current=page]{color:var(--c-teal);border-color:var(--c-teal)}
.site-header .link-btn{font-size:14px;color:#3f5650}
.site-header .link-btn:hover{color:var(--c-teal)}
.site-header .header-actions{gap:12px}
.site-header .header-actions .btn{font-size:15px;padding-inline:16px}
.motion-toggle{font-size:12px;padding-inline:10px;color:var(--c-muted);border-color:var(--c-line);background:rgba(255,255,255,.6)}
.motion-toggle:hover{background:var(--c-mint-soft);color:var(--c-teal-deep)}
.motion-toggle[aria-pressed=true]{background:var(--c-mint);border-color:var(--c-mint);color:var(--c-teal-deep)}
.motion-dot{background:var(--c-teal)}
.mobile-nav a[aria-current=page]{color:var(--c-teal)}

/* 按钮 */
.btn{font-weight:600;border-radius:999px;translate:var(--mx,0) var(--my,0);transition:translate .35s var(--c-ease),background-color .25s,color .25s,border-color .25s,box-shadow .3s}
.btn-solid{background-color:var(--c-teal);border-color:var(--c-teal);color:#fff;box-shadow:0 6px 16px -10px rgba(26,112,99,.8);background-image:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);background-size:250% 100%;background-position:130% 0;background-repeat:no-repeat}
.btn-solid::after{content:"→";display:inline-block;margin-left:8px;transition:transform .35s var(--c-ease)}
.btn-solid:hover{background-color:var(--c-teal-deep);border-color:var(--c-teal-deep);color:#fff;animation:wb-shine .9s ease}
.btn-solid:hover::after{transform:translateX(4px)}
.btn-solid:hover{box-shadow:0 10px 22px -10px rgba(11,95,90,.7)}
.btn:focus-visible,.dark-block :focus-visible,.done-card :focus-visible{outline-color:var(--c-teal)}
.site-header .btn-solid::after{content:none}
.btn-line{color:var(--c-ink);border-color:rgba(38,48,42,.35);background:rgba(255,255,255,.5)}
.btn-line:hover{background:var(--c-ink);border-color:var(--c-ink);color:#fff}

/* 小标签 eyebrow：深青绿字 + 浅青绿底胶囊 + 圆点 */
.eyebrow,html[lang] .eyebrow,html[lang] .eyebrow-light{display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;padding:6px 12px 6px 10px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--c-teal-deep);background:rgba(26,112,99,.09);border:1px solid rgba(26,112,99,.18)}
.eyebrow::before,.eyebrow-light::before{content:"";display:block;width:6px;height:6px;border-radius:50%;background:var(--c-teal-deep);box-shadow:0 0 0 3px rgba(26,112,99,.18)}

/* 面包屑、区块标题线 */
.crumbs,.crumbs a{color:var(--c-muted)}
.crumbs a:hover{color:var(--c-teal)}
.kicker-line{border-top:1px solid var(--c-line)}

/* 小胶囊：青绿 / 薄荷 / 中性青灰（说明类：未定、示意、可选）；提醒类用 .chip.alert 橙 */
.chip.blue,.chip.red{background:var(--c-mint-soft);color:var(--c-teal-deep)}
.chip.violet{background:var(--c-neutral-bg);color:var(--c-muted)}
.chip.alert{background:var(--c-coral-bg);border-color:var(--c-coral-line);color:var(--c-ink)}

/* 行动带（页尾联系） */
.wb-cta{position:relative;overflow:hidden;isolation:isolate;margin-top:24px;padding:56px 56px 60px;border-radius:24px;border:1px solid var(--c-panel-line);background:linear-gradient(180deg,var(--c-panel-1),var(--c-panel-2));box-shadow:0 30px 60px -44px rgba(38,48,42,.45)}
.wb-cta::before{content:"";position:absolute;inset:-40%;z-index:-1;pointer-events:none;background:radial-gradient(38% 34% at 18% 22%,rgba(110,215,180,.45),transparent 70%),radial-gradient(34% 30% at 82% 72%,rgba(60,175,165,.28),transparent 70%),radial-gradient(32% 30% at 62% 12%,rgba(120,215,195,.42),transparent 70%);animation:wb-drift 14s ease-in-out infinite alternate}
.wb-cta-title{margin:0 0 12px;font-size:40px;line-height:1.25;font-weight:650;letter-spacing:-.02em;color:var(--c-ink)}
.wb-cta p{margin:0 0 28px;font-size:18px;line-height:1.7;color:var(--c-muted);max-width:34em}
.wb-cta-actions{display:flex;flex-wrap:wrap;gap:12px}

/* 页脚：浅薄荷渐变 */
.site-foot,.site-footer{background:linear-gradient(180deg,#eaf8f2 0%,#d3efe4 100%);border-top:1px solid rgba(26,112,99,.18);color:#4a5e58}
.site-foot .foot-h,.site-footer .foot-h{color:var(--c-teal-deep)}
.site-foot .foot-col a,.site-foot p,.site-footer .foot-col a{color:#3f5650}
.site-foot .foot-col a:hover,.site-foot .foot-col a:focus-visible{color:var(--c-teal)}
.site-foot .foot-note{border-top-color:rgba(26,112,99,.18)}

/* 折叠问答：悬停浅薄荷；点开 = 标题条薄荷底深青绿字、内容区 #f1faf6；内容高度展开动画 */
:root{interpolate-size:allow-keywords}
.faq-list details{border-radius:12px;border-bottom:1px solid var(--c-line);transition:background .35s,box-shadow .35s}
.faq-list summary{border-radius:12px;color:var(--c-ink);font-weight:600}
.faq-list summary::after{color:var(--c-teal)}
.faq-list summary:hover,.faq-list summary:focus-visible{background:var(--c-mint-soft);color:var(--c-teal-deep)}
.faq-list details[open]{background:#f1faf6;box-shadow:0 12px 28px rgba(15,40,36,.08)}
.faq-list details[open] summary{background:var(--c-mint);color:var(--c-teal-deep)}
.faq-list details[open] summary::after{color:var(--c-teal-deep)}
.faq-list details p{color:#3f5650}
.faq-list details::details-content{block-size:0;overflow:hidden;transition:block-size .45s var(--c-ease),content-visibility .45s allow-discrete}
.faq-list details[open]::details-content{block-size:auto}

/* 提示条 */
.notice{background:var(--c-mint-soft);color:var(--c-text);border-radius:14px}
.notice::before{background:var(--c-teal)}
.notice.warn{background:var(--c-mint-soft);color:var(--c-text);border:1px solid rgba(26,112,99,.2)}
.notice.warn::before{background:var(--c-teal-deep)}
.notice strong{color:var(--c-teal-deep)}
.transfer{border-left-color:var(--c-teal);background:var(--c-mint-soft);color:var(--c-text);border-radius:0 10px 10px 0}
.transfer b{color:var(--c-teal-deep)}

/* 表单：输入框、单选胶囊、必填、错误（错误红仅作语义色，必配文字） */
:root{--c-error:#b42339;--c-error-soft:#fdecef}
.input,.select,.textarea,.search{border-color:#c9d8d3;border-radius:12px}
.input:hover,.select:hover,.textarea:hover,.search:hover{border-color:#9fbfb6}
.input:focus,.select:focus,.textarea:focus,.search:focus{outline:none;border-color:var(--c-teal);box-shadow:0 0 0 3px rgba(26,112,99,.2)}
.input:disabled{background:var(--c-page)}
.input[aria-invalid="true"],.select[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--c-error)}
.err-text{color:var(--c-error)}
.req{color:var(--c-teal-deep);background:var(--c-mint-soft);font-weight:600}
.choice span{border-color:#c9d8d3;transition:border-color .2s,background .2s,color .2s,transform .2s var(--c-ease)}
.choice span:hover{border-color:var(--c-teal);background:var(--c-mint-soft);color:var(--c-teal-deep)}
.choice input:checked+span{background:var(--c-mint);border-color:var(--c-mint);color:var(--c-teal-deep);font-weight:600}
.choice input:focus-visible+span{outline-color:var(--c-teal)}
.choice span:active{transform:scale(.97)}
.undecided input,.ack input,input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--c-teal)}
/* 状态点与状态胶囊：已填 青绿实心 / 未定 青绿空心 / 必填未完成与有误 语义红 */
.dot{border-color:#c9d8d3}
.dot.done{background:var(--c-teal);border-color:var(--c-teal)}
.dot.open{background:#fff;border-color:var(--c-teal)}
.dot.miss,.dot.bad{background:var(--c-error);border-color:var(--c-error)}
.chip.ok{background:var(--c-mint-soft);color:var(--c-teal-deep)}
.chip.warn{background:var(--c-neutral-bg);color:var(--c-muted)}
.demo-badge{background:var(--c-neutral-bg);color:var(--c-muted);border-color:var(--c-line)}

/* 旧冷灰蓝统一为青灰（site.css / styles.css 里的 #c4cdd9、#b4bfcf、#eef1f5、#f4f6f9、蓝色阴影等） */
.site-header.is-scrolled{border-bottom-color:transparent;box-shadow:0 8px 24px -22px rgba(15,40,36,.55)}
.mobile-nav:not([hidden]){box-shadow:0 18px 30px -24px rgba(15,40,36,.5)}
.chip,.opt,.seg,.bar{background:var(--c-page)}
.chip.violet{color:var(--c-muted)}
.pick-body,.att,.upload-off,.mini-grid button{border-color:#c9d8d3}
.att,.upload-off,.review-style>h3,.ver.superseded{background:#f1f8f5}
.pick-body{transition:border-color .2s,box-shadow .2s,background .2s}
.pick-body:hover{border-color:var(--c-teal)}
.pick input:checked+.pick-body{border-color:var(--c-teal);box-shadow:inset 0 0 0 1px var(--c-teal);background:var(--c-mint-soft)}
.add-style,.btn-add-next{border-color:var(--c-teal);color:var(--c-teal-deep)}
.add-style:hover{background:var(--c-mint-soft)}
.progress{background:var(--c-line)}
.progress span{background:linear-gradient(90deg,var(--c-teal),#6ee7b7)}
.cat-visual,.style-visual,.place-stage,.slot,.product-placeholder{border-color:#c9d8d3;background:radial-gradient(rgba(26,112,99,.16) 1px,transparent 1.2px) 0 0/18px 18px,linear-gradient(180deg,#f3faf7,#e4f3ec)}
.cat-index a:hover,.cat-index a:focus-visible,.cat-card:hover,.cat-card:focus-within,.style-card:hover,.style-card:focus-within{border-color:rgba(26,112,99,.35);box-shadow:0 16px 32px -26px rgba(15,40,36,.5)}
.done-card{background:linear-gradient(180deg,var(--c-panel-1),var(--c-panel-2));color:var(--c-text);border:1px solid var(--c-panel-line);border-radius:24px}
.done-card h2{color:var(--c-ink)}.done-card p,.done-card ol{color:var(--c-muted)}
.done-card .btn-line{color:var(--c-ink);border-color:rgba(38,48,42,.35)}.done-card .btn-line:hover{background:var(--c-ink);color:#fff}

/* 共用动效（wewin-base.js 挂类；暂停/减少动态时 JS 不挂，内容直接可见） */
.wb-rise{transition:opacity .9s ease,transform 1.1s var(--c-ease)!important;transition-delay:calc(var(--i,0) * 110ms)!important}
.wb-rise:not(.wb-in){opacity:0;transform:translateY(64px) scale(.94)}
.wb-title-pre{transition:opacity 1s ease,transform 1.1s var(--c-ease)}
.wb-title-pre:not(.wb-title-in){opacity:0;transform:translateY(30px)}
.wb-loaded .wb-load{animation:wb-up 1s var(--c-ease) backwards}
.wb-loaded .wb-load:nth-child(2){animation-delay:.12s}.wb-loaded .wb-load:nth-child(3){animation-delay:.26s}
.wb-loaded figure.wb-load{animation-delay:.36s}
.wb-spot.wb-spot:hover{background-image:radial-gradient(360px circle at var(--sx,50%) var(--sy,50%),rgba(110,231,183,.2),transparent 60%)}
[data-tilt]{transition:transform .5s var(--c-ease),box-shadow .4s;will-change:transform}
.wb-pulse::before{animation:wb-pulse 2.4s ease-in-out infinite}
@keyframes wb-up{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes wb-pulse{0%,100%{box-shadow:0 0 0 3px rgba(26,112,99,.18)}50%{box-shadow:0 0 0 7px rgba(26,112,99,0)}}
@keyframes wb-shine{from{background-position:130% 0}to{background-position:-30% 0}}
@keyframes wb-drift{from{transform:translate3d(-4%,-3%,0) rotate(0)}to{transform:translate3d(5%,4%,0) rotate(8deg)}}

@media(max-width:760px){
  .site-header .header-row{height:76px}
  .wb-cta{padding:32px 24px}.wb-cta-title{font-size:30px}
}
.motion-paused .wb-cta::before,.motion-paused .btn-solid:hover,.motion-paused .wb-pulse::before{animation:none}
.motion-paused .wb-rise,.motion-paused .wb-title-pre{opacity:1!important;transform:none!important}
.motion-paused .btn{translate:none}
@media(prefers-reduced-motion:reduce){
  .wb-cta::before,.btn-solid:hover,.wb-load,.wb-pulse::before{animation:none!important}
  .btn{translate:none}[data-tilt]{transform:none!important}
}

/* 2026-10-06 提需求页：具体款式用真实产品图（1:1 白底），完整显示不裁切 */
.pick-style .style-visual:has(> img){border-style:solid;border-color:var(--c-line,#dfeae6);background:#fff}
.pick-style .style-visual > img{object-fit:contain;padding:6px}
.pick-grid.styles:has(.style-visual > img){grid-template-columns:repeat(3,minmax(0,1fr))}
.pick-style .style-visual:has(> img){aspect-ratio:1/1}
.pick-style .style-visual:has(> img) .style-no{z-index:1;left:8px;top:8px;padding:0 7px;border-radius:999px;background:rgba(255,255,255,.92);font-size:13px;line-height:22px}
.pick-style .sku{white-space:nowrap}
@media(max-width:640px){.pick-grid.styles:has(.style-visual > img){grid-template-columns:repeat(2,minmax(0,1fr))}.pick-style .sku{white-space:normal}}
.pick-style:has(.style-visual > img) .pick-check{top:10px;right:10px;bottom:auto;z-index:1}
/* 需求表“添加参考文件”与缩略图的焦点框：旧变量 --violet 现为浅薄荷，白底上太淡，改用青绿（10-07） */
.att-add:focus-within,.att-thumb:focus-visible{outline-color:var(--c-teal)}
/* 10-07：首屏右侧光晕（.hero-split::before，right:-6%）在 390 宽时伸出屏幕，造成几像素横向滚动；裁掉屏幕外部分，外观不变（clip 不影响吸顶） */
main{overflow-x:clip}