.beauty-page{max-width:1500px;margin:auto}.beauty-heading,.beauty-section-heading{display:flex;align-items:center;justify-content:space-between;gap:24px}.beauty-heading{margin-bottom:36px}.beauty-heading h1{margin:12px 0 18px}.beauty-heading p{max-width:700px;line-height:1.8}.beauty-count{white-space:nowrap;color:#d9f795;border:1px solid #343932;border-radius:24px;padding:12px 20px}.beauty-page .s-panel{padding:32px;margin-bottom:28px}.beauty-upload{display:grid;grid-template-columns:1fr 300px;align-items:center;gap:40px}.beauty-upload-copy h2{margin:16px 0}.beauty-upload-copy p{line-height:1.8}.beauty-upload-copy .s-button{margin:14px 8px 16px 0}.beauty-photo{height:260px;border:1px dashed #3a3e3b;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:#111413;color:#8d9690}.beauty-photo>span:first-child{font-size:48px;font-weight:200}.beauty-photo img{width:100%;height:calc(100% - 32px);object-fit:contain}.beauty-photo img+span{font-size:12px;max-width:90%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding:8px}.beauty-section-heading h2{margin:10px 0 20px}.beauty-filters{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 26px}.beauty-filters .is-active{background:#d9f795;color:#151914}.beauty-rail{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x proximity;padding:5px 3px 24px;scrollbar-color:#505b3d #171b19}.beauty-card{flex:0 0 180px;scroll-snap-align:start;color:#bcc3bf;background:transparent;padding:5px;border:1px solid transparent;border-radius:20px;text-align:left;cursor:pointer}.beauty-card.is-selected{border-color:#d9f795;color:#d9f795}.beauty-card strong,.beauty-card>small{display:block;margin:14px 8px 0}.beauty-card strong{font-size:18px}.beauty-card>small{font-size:12px;margin-top:6px;margin-bottom:10px;color:#8c9790}.beauty-card:focus-visible{outline:3px solid #d9f795;outline-offset:2px}.beauty-compare,.beauty-custom{display:block;position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:#282d2a}.beauty-before,.beauty-after{position:absolute;inset:0;background-image:var(--beauty-image);background-size:200% 100%;background-repeat:no-repeat}.beauty-before{background-position:left center}.beauty-after{background-position:right center;clip-path:inset(0 0 0 50%);animation:beauty-wipe 5.6s ease-in-out infinite;animation-delay:var(--beauty-delay)}.beauty-divider{position:absolute;top:0;bottom:0;width:2px;background:#fff9;left:50%;animation:beauty-line 5.6s ease-in-out infinite;animation-delay:var(--beauty-delay)}.beauty-sample{position:absolute;top:10px;left:10px;background:#101511b3;color:#fff;border-radius:6px;font-size:10px;padding:5px 7px}.beauty-custom{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:54px;color:#eee}.beauty-custom small{font-size:12px;margin-top:24px;color:#aab2ac}.beauty-reference-note{font-size:13px;line-height:1.8;color:#929d95;margin:20px 0 0}.beauty-compose{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:42px;align-items:end}.beauty-compose h2{margin:12px 0}.beauty-compose p{line-height:1.8;color:#a7b0aa}.beauty-compose label{display:block;margin:24px 0 12px;color:#acb7af}.beauty-compose textarea{box-sizing:border-box;width:100%;min-height:160px;border:1px solid #303831;border-radius:14px;background:#0f1310;color:#edf2ee;padding:20px;font:inherit;line-height:1.8;resize:vertical}.beauty-compose textarea:focus{outline:1px solid #d9f795}.beauty-actions{display:flex;flex-direction:column;gap:12px}.beauty-actions .s-button{text-align:center}.beauty-actions p{font-size:13px;margin:2px 0}.beauty-actions [hidden]{display:none}.beauty-paused .beauty-after,.beauty-paused .beauty-divider{animation-play-state:paused}.beauty-card:hover{background:#212820}.beauty-card:hover .beauty-after,.beauty-card:hover .beauty-divider{animation-duration:3.6s}@keyframes beauty-wipe{0%,15%,100%{clip-path:inset(0 0 0 98%)}45%,60%{clip-path:inset(0 0 0 2%)}}@keyframes beauty-line{0%,15%,100%{left:98%}45%,60%{left:2%}}@media(max-width:900px){.beauty-upload{grid-template-columns:1fr 230px}.beauty-compose{grid-template-columns:1fr}.beauty-actions{display:grid;grid-template-columns:1fr 1fr}.beauty-actions p{grid-column:1/-1}.beauty-page .s-panel{padding:24px}}@media(max-width:600px){.beauty-heading{align-items:flex-start}.beauty-count{padding:8px 12px;font-size:12px}.beauty-upload{grid-template-columns:1fr;gap:12px}.beauty-photo{height:200px}.beauty-page .s-panel{padding:20px}.beauty-section-heading{align-items:flex-start;gap:12px}.beauty-section-heading .s-button{font-size:12px;white-space:nowrap;padding:10px}.beauty-card{flex-basis:156px}.beauty-rail{gap:16px}.beauty-actions{display:flex}.beauty-compose{gap:24px}.beauty-heading h1{font-size:36px}.beauty-filters .s-button{padding:9px 14px}.beauty-filters{gap:8px}}

.suite-shell .beauty-heading{position:static;height:auto;min-height:0;padding:0;background:transparent;border:0;flex-wrap:nowrap}.beauty-heading>div{min-width:0}.beauty-heading p{margin-top:16px}.beauty-page .beauty-upload{margin-top:0}.beauty-card:hover .beauty-after,.beauty-card:hover .beauty-divider{animation-duration:5.6s}

/* Readable Chinese type and high-contrast selected filters. */
.beauty-page .beauty-upload-stage{height:clamp(360px,38vw,560px);margin-top:0;padding:20px;display:flex;align-items:center;justify-content:center;background:#191b1d;border:1px solid #292d2a;border-radius:20px;overflow:hidden}
.beauty-upload-stage>img{display:block;width:100%;height:100%;object-fit:contain}
.beauty-page .beauty-upload-empty{width:100%;height:100%;border:0;background:transparent;color:#c4ccc7;display:flex;flex-direction:column;gap:20px;align-items:center;justify-content:center;cursor:pointer;border-radius:14px}
.beauty-upload-empty>span{font-size:48px;color:#d9f795;line-height:1}
.beauty-upload-empty>strong{font-size:24px;color:#f0f3f1;font-weight:650}
.beauty-upload-empty>small{font-size:14px;color:#bdc7c0}
.beauty-upload-empty:hover{box-shadow:inset 0 0 0 1px #d9f79560}
.beauty-upload-top{flex:none;white-space:nowrap}
.beauty-upload-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0 0;min-height:44px}
.beauty-upload-footer p{overflow-wrap:anywhere;min-width:0}
.beauty-upload-footer .s-button{flex:none}
@media(max-width:600px){.beauty-page .beauty-upload-stage{height:340px;padding:12px;border-radius:16px}.beauty-heading{gap:14px}.beauty-upload-empty>strong{font-size:22px}.beauty-upload-empty>small{font-size:13px}.beauty-upload-footer p{font-size:13px!important}}
.beauty-page{font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif}
.beauty-page .s-kicker{font-size:13px;letter-spacing:.04em}
.beauty-page p,.beauty-page label,.beauty-page .beauty-reference-note{font-size:15px;color:#c4ccc7;line-height:1.85}
.beauty-page .s-button{font-size:15px!important;font-weight:500;min-height:44px}
.beauty-page .beauty-filters .s-button{color:#f0f3f1!important}
.beauty-page .beauty-filters .s-button.is-active{background:#d9f795;color:#19220f!important;font-weight:650;border-color:#d9f795}
.beauty-page .beauty-card strong{font-size:20px;line-height:1.5;color:#f0f3f1;font-weight:650}
.beauty-page .beauty-card.is-selected strong{color:#d9f795}
.beauty-page .beauty-card>small,.beauty-page .beauty-custom small{font-size:14px;line-height:1.6;color:#bdc7c0}
.beauty-page .beauty-sample{font-size:12px;font-weight:500;background:#111a14de}
.beauty-page .beauty-compose textarea{font-size:16px;color:#f2f5f3}
.beauty-page .beauty-compose textarea::placeholder{color:#aebbb2}
@media(max-width:600px){.beauty-page .s-button{font-size:14px!important}.beauty-page p,.beauty-page label{font-size:14px}.beauty-page .beauty-card strong{font-size:18px}.beauty-page .beauty-card>small{font-size:13px}}
.beauty-page.beauty-paused .beauty-card{flex-basis:300px}
.beauty-paused .beauty-compare,.beauty-paused .beauty-custom{aspect-ratio:3/2}
.beauty-paused .beauty-before{width:50%;right:auto}
.beauty-paused .beauty-after{left:50%;width:50%;clip-path:none;animation:none}
.beauty-paused .beauty-divider{left:50%;animation:none}
.beauty-label{position:absolute;bottom:10px;padding:5px 9px;border-radius:6px;background:#101511de;color:#fff;font-size:12px;font-weight:600;z-index:2}
.beauty-label-before{left:10px}.beauty-label-after{right:10px;background:#d9f795;color:#182014}
@media(max-width:600px){.beauty-page.beauty-paused .beauty-card{flex-basis:280px}}