/* 炫彩配色模拟与原色对照 */
.hero .chroma-disclaimer{max-width:none;margin-top:20px;padding:14px 16px;border:1px solid #e6d6b6;border-radius:var(--r-m);background:var(--gold-soft);font-size:12px;color:#725529}
.chroma-disclaimer b{display:block;margin-bottom:4px;color:var(--orange-deep)}
.chroma-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.preview-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;min-width:0}
@media(min-width:921px){.preview-pair{position:sticky;top:calc(var(--header-h,80px) + 20px)}}
.chroma-figure{min-width:0;margin:0;padding:12px;border:1px solid var(--line);border-radius:var(--r-l);background:#fff}
.chroma-figure.is-preview{border-color:#b8cbbb;background:linear-gradient(160deg,#fff,#f4f8ee)}
.chroma-figure figcaption{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 10px;margin-bottom:12px}
.chroma-figure figcaption strong{font-size:14px;color:var(--green-deep)}
.chroma-figure figcaption span{font-size:11px;color:var(--muted)}
.chroma-art{position:relative;display:grid;place-items:center;min-width:0;min-height:220px;aspect-ratio:1;overflow:hidden;border-radius:var(--r-m);background:repeating-conic-gradient(#f0f3ec 0% 25%,#fff 0% 50%) 50% / 24px 24px}
.chroma-art.is-error{aspect-ratio:auto;min-height:220px;overflow:visible}
.chroma-art>img{display:block;width:100%;height:100%;object-fit:contain;min-width:0;min-height:0}
.chroma-art>img[data-chroma-mode="chroma"]{filter:hue-rotate(var(--chroma-hue,60deg)) saturate(var(--chroma-saturation,1.15)) brightness(var(--chroma-brightness,1.05))}
.chroma-art>canvas.chroma-canvas{display:block;width:100%;height:100%;object-fit:contain;min-width:0;min-height:0}
.chroma-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.chroma-spark{position:absolute;left:var(--x,50%);bottom:-6%;width:13px;height:13px;opacity:0;animation:chroma-float var(--d,8s) ease-in-out var(--delay,0s) infinite;will-change:transform,opacity}
.chroma-spark svg{display:block;width:100%;height:100%;fill:hsl(var(--hue,40) 92% 64%);filter:drop-shadow(0 0 5px hsl(var(--hue,40) 100% 62% / .85))}
@keyframes chroma-float{
  0%{transform:translate3d(0,0,0) rotate(0deg) scale(var(--scale,1));opacity:0}
  10%{opacity:.95}
  50%{transform:translate3d(calc(var(--drift,10px)*-1),calc(var(--rise,200px)*.55),0) rotate(160deg) scale(var(--scale,1));opacity:.95}
  85%{opacity:.8}
  100%{transform:translate3d(var(--drift,10px),calc(var(--rise,200px)*-1),0) rotate(340deg) scale(var(--scale,1));opacity:0}
}
@media(prefers-reduced-motion:reduce){.chroma-particles{display:none}}
.chroma-art>p{padding:20px;margin:0;font-size:12px;color:var(--muted);text-align:center}
.chroma-art .empty{width:100%;padding:24px 12px;background:#ffffffd9;font-size:12px;border:0;border-radius:0}
.chroma-art .empty b{font-size:15px}.chroma-art .empty-symbol{width:36px;height:36px;font-size:20px}
.chroma-controls{min-width:0}
.chroma-fieldset{min-width:0;margin:0 0 18px;padding:0;border:0}
.chroma-fieldset legend{margin-bottom:10px;padding:0;font-size:13px;font-weight:700;color:var(--green-deep)}
.chroma-fieldset:disabled{opacity:.6}
.mode-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.mode-options label{position:relative;min-width:0;cursor:pointer}
.mode-options input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.mode-options span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 4px;border:1px solid var(--line);border-radius:var(--r-s);background:#fff;font-size:12px;text-align:center}
.mode-options input:checked+span{border-color:var(--green);background:var(--green-soft);color:var(--green-deep);font-weight:700}
.mode-options input:focus-visible+span{outline:3px solid var(--green);outline-offset:3px}
.mode-options input:disabled+span{opacity:.5;cursor:not-allowed}
.control-hint{margin:10px 0 0;color:var(--muted);font-size:12px;line-height:1.8;overflow-wrap:anywhere}
.chroma-sub{display:block;margin-top:16px;font-size:12px;font-weight:700;color:var(--green-deep)}
.chroma-sub+#shapeControls,.chroma-sub+.mode-options{margin-top:8px}
.chroma-legend{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 8px;font-size:13px;font-weight:700;color:var(--green-deep)}
.chroma-legend span{font-size:11px;font-weight:400;color:var(--muted)}
.prob-table{width:100%;border-collapse:collapse;margin-top:2px;font-size:12px}
.prob-table th,.prob-table td{padding:6px 8px;border:1px solid var(--line-soft);text-align:left;font-variant-numeric:tabular-nums}
.prob-table th{background:var(--green-soft);color:var(--green-deep)}
.prob-table td:not(:first-child){text-align:right}
.chroma-range{display:block;margin-top:14px}
.chroma-range>span{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px}
.chroma-range output{font-weight:700;font-variant-numeric:tabular-nums;color:var(--green-deep)}
.chroma-range input{display:block;width:100%;min-width:0;height:36px;margin:0;padding:0;accent-color:var(--green);cursor:pointer}
.chroma-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:12px}
.chroma-presets button{min-width:0;min-height:44px;padding:8px 4px;border:1px solid var(--line);border-radius:var(--r-s);background:#fff;font-size:11px}
.chroma-presets button[aria-pressed="true"]{border-color:var(--green);background:var(--green-soft);color:var(--green-deep);font-weight:700}
.chroma-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.chroma-actions .btn{flex:1;padding:10px;font-size:12px}
.chroma-share{border-top:1px solid var(--line-soft);margin-top:22px;padding-top:18px}
.chroma-share>label{display:block;font-size:12px;color:var(--muted);margin-bottom:8px}
.chroma-share>div{display:flex;gap:10px;min-width:0}.chroma-share input{flex:1;min-width:0;font-size:12px;background:var(--green-soft)}
.chroma-picker{margin-top:24px}
.chroma-search{display:flex;gap:8px;align-items:center}.chroma-search>.input{flex:1;min-width:0}
.pet-choices{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:16px}
.pet-choice{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;min-height:140px;padding:12px 8px;border:1px solid var(--line);border-radius:var(--r-m);background:#fff;text-align:center}
.pet-choice:hover,.pet-choice[aria-pressed="true"]{border-color:var(--green);background:var(--green-soft)}
.pet-choice img,.pet-choice .pet-choice-fallback{width:64px;height:64px;object-fit:contain}.pet-choice .pet-choice-fallback{display:grid;place-items:center;font-size:26px;color:var(--green)}
.pet-choice strong{font-size:13px;overflow-wrap:anywhere}.pet-choice small{font-size:10px;color:var(--muted);overflow-wrap:anywhere}
.chroma-pager{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft)}
.chroma-pager>span{font-size:12px;color:var(--muted);text-align:center}
@media(max-width:1100px){.chroma-layout{grid-template-columns:minmax(0,1fr) 270px;gap:18px}.chroma-art{min-height:170px}.pet-choices{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:920px){.chroma-layout{grid-template-columns:minmax(0,1fr)}.chroma-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:20px}.chroma-fieldset{margin-bottom:0}.chroma-art{min-height:0}.chroma-preview .section-heading{flex-wrap:wrap}}
@media(max-width:600px){.preview-pair{gap:10px}.chroma-figure{padding:8px;border-radius:12px}.chroma-figure figcaption{display:block;margin-bottom:8px}.chroma-figure figcaption strong,.chroma-figure figcaption span{display:block}.chroma-figure figcaption strong{font-size:13px}.chroma-figure figcaption span{font-size:10px;margin-top:4px}.chroma-controls{grid-template-columns:minmax(0,1fr);gap:20px}.chroma-art .empty{padding:16px 8px}.chroma-art .empty b{font-size:13px}.chroma-art .empty p{font-size:11px}.chroma-art .empty .btn{padding:8px;font-size:11px}.chroma-search{flex-wrap:wrap}.chroma-search>.input{flex-basis:100%}.chroma-search>.btn-primary{flex:1}.chroma-share>div{flex-direction:column}.chroma-share input{font-size:16px}.chroma-range input{height:44px}.pet-choices{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.pet-choice{padding:10px 6px;min-height:134px}.pet-choice strong{font-size:12px}.pet-choice img,.pet-choice .pet-choice-fallback{width:54px;height:54px}.chroma-pager{gap:8px;justify-content:space-between}.chroma-pager .btn{padding:10px;font-size:12px}}
@media(max-width:360px){.preview-pair{grid-template-columns:minmax(0,1fr)}.chroma-figure figcaption{display:flex}.pet-choices{grid-template-columns:repeat(2,minmax(0,1fr))}}