/* 照妖镜总站 · 镜面赤曜 */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

:root {
  --ink: #080808; --ink-soft: #111112; --paper: #f0eee9; --mist: #b8b7b4;
  --line: rgba(255,255,255,.18); --red: #e7302c; --red-hot: #ff4d46;
  --text: #f8f7f4; --muted: #a4a3a0; --radius: 3px;
}

html { background: var(--ink); scroll-behavior: smooth; }
body { min-width: 320px; color: var(--text); background: var(--ink); font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { cursor: pointer; }
.site-noise { position: fixed; z-index: -2; inset: 0; opacity: .15; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }
.signal-field { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse 80% 42% at 50% -12%, #292929 0%, transparent 67%), linear-gradient(125deg, #0c0c0d 5%, #171718 48%, #060606 100%); }
.signal-field i { position: absolute; width: 1px; height: 120vh; background: linear-gradient(transparent, rgba(231,48,44,.72), transparent); transform: rotate(46deg); transform-origin: top; }
.signal-field i:nth-child(1) { left: 18%; top: 19%; }.signal-field i:nth-child(2) { right: 26%; top: -12%; opacity: .4; }.signal-field i:nth-child(3) { right: 4%; top: 35%; opacity: .22; }

.top-bar { position: sticky; top: 0; z-index: 20; height: 76px; padding: 0 clamp(18px, 4vw, 64px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(8,8,8,.82); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.brand-mark { width: 25px; height: 25px; position: relative; display: block; border: 1px solid #f5f3ef; transform: rotate(45deg); overflow: hidden; }
.brand-mark i { display: block; position: absolute; width: 1px; height: 38px; left: 11px; top: -8px; background: var(--red); transform: rotate(45deg); }.brand-mark i + i { background: #f5f3ef; transform: rotate(-45deg); top: -7px; }
.brand-text { font-size: 18px; font-weight: 750; letter-spacing: .17em; white-space: nowrap; }.brand-edition { padding-left: 10px; border-left: 1px solid #555; color: #8e8d8a; font-size: 9px; font-weight: 700; letter-spacing: .17em; white-space: nowrap; }
.top-right { display: flex; align-items: center; gap: 9px; }.credits-pill, .user-pill { min-height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 11px; color: var(--text); border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.045); transition: border-color .2s, background .2s, transform .2s; }.credits-pill:hover, .user-pill:hover { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.1); }.credits-pill:active, .user-pill:active { transform: scale(.97); }.credits-label { color: var(--muted); font-size: 11px; }.credits-num { color: var(--red-hot); font-size: 14px; font-weight: 800; }.user-icon { width: 13px; height: 13px; border: 1px solid #e8e7e3; border-radius: 50%; position: relative; }.user-icon::after { content: ""; position: absolute; width: 20px; height: 10px; left: -5px; top: 11px; border: 1px solid #e8e7e3; border-bottom: 0; border-radius: 12px 12px 0 0; }.user-name { max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #dddcd8; font-size: 12px; }

.hero { width: min(1220px, calc(100% - 40px)); margin: 0 auto; padding: clamp(55px, 9vw, 122px) 0 64px; display: grid; grid-template-columns: minmax(300px, .94fr) minmax(330px, 1.06fr); gap: clamp(30px, 7vw, 105px); align-items: center; }
.eyebrow, .section-heading p, .cta-kicker { color: var(--red-hot); font-size: 10px; font-weight: 800; letter-spacing: .18em; }.eyebrow span { color: var(--text); padding-right: 14px; margin-right: 12px; border-right: 1px solid #595959; }
.hero-title { max-width: 600px; margin-top: 22px; font-size: clamp(48px, 6.4vw, 88px); line-height: .92; font-weight: 820; letter-spacing: -.1em; }.hero-title span, .hero-title em { display: block; }.hero-title em { margin-top: 8px; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.82); font-style: normal; font-size: .76em; }.hero-tagline { max-width: 340px; margin-top: 28px; color: #e7302c; font-size: clamp(17px, 1.6vw, 22px); font-weight: 750; line-height: 1.3; letter-spacing: .2em; }.hero-actions { margin-top: 36px; display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }.hero-link { color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--red); font-size: 13px; font-weight: 700; letter-spacing: .08em; }.hero-link b { color: var(--red); font-size: 22px; line-height: 11px; }.hero-note { color: #747370; font-size: 9px; letter-spacing: .14em; }
.hero-mirror { min-height: 440px; margin: 0; position: relative; overflow: hidden; background: #111; border: 1px solid #555; clip-path: polygon(7% 0, 100% 4%, 94% 88%, 75% 100%, 0 90%, 3% 21%); box-shadow: 24px 28px 0 -23px var(--red), 0 26px 66px rgba(0,0,0,.54); isolation: isolate; }.hero-fashion-image { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: contrast(1.06) saturate(.9); }.hero-mirror::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(105deg, rgba(0,0,0,.22) 5%, transparent 28%, rgba(0,0,0,.1) 55%, rgba(0,0,0,.5) 100%), linear-gradient(105deg, transparent 14%, rgba(255,255,255,.32) 27%, transparent 30%, transparent 56%, rgba(255,255,255,.14) 62%, transparent 66%); mix-blend-mode: screen; }.hero-mirror::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(50deg, transparent 0 47%, rgba(231,48,44,.82) 47.15% 47.55%, transparent 47.7%), linear-gradient(139deg, transparent 0 79%, rgba(255,255,255,.44) 79.15% 79.36%, transparent 79.5%); }
.mirror-shard { position: absolute; z-index: 0; border: 1px solid rgba(255,255,255,.44); background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(0,0,0,.08) 45%, rgba(255,255,255,.08)); transform: rotate(28deg) skew(-13deg); }.shard-one { width: 47%; height: 76%; left: 25%; top: 8%; }.shard-two { width: 38%; height: 38%; right: -8%; top: 1%; transform: rotate(-28deg) skew(13deg); background: rgba(15,15,15,.35); }.shard-three { width: 45%; height: 31%; bottom: -13%; left: -2%; transform: rotate(-13deg) skew(8deg); }.mirror-orbit { position: absolute; z-index: 0; width: 73%; aspect-ratio: 1; left: 14%; top: 15%; border: 1px solid rgba(255,255,255,.26); border-radius: 50%; box-shadow: inset 0 0 0 17px rgba(0,0,0,.12), 0 0 0 24px rgba(231,48,44,.1); }.mirror-orbit::before, .mirror-orbit::after { content: ""; position: absolute; background: var(--red); }.mirror-orbit::before { height: 1px; width: 150%; top: 51%; left: -25%; transform: rotate(-21deg); }.mirror-orbit::after { width: 6px; height: 6px; border-radius: 50%; top: calc(50% - 3px); right: -4px; }.mirror-copy { position: absolute; z-index: 2; font-weight: 800; letter-spacing: -.07em; line-height: .84; text-shadow: 0 2px 20px #000; }.copy-one { top: 12%; left: 11%; font-size: clamp(32px, 4vw, 54px); }.copy-two { z-index: 3; right: 10%; bottom: 12%; font-size: 9px; color: #e5e3df; letter-spacing: .16em; line-height: 1.5; text-align: right; }.mirror-index { position: absolute; z-index: 3; bottom: 11%; left: 9%; color: var(--red); font: 800 10px/1 monospace; letter-spacing: .17em; }

.mirror-section { grid-column: 1 / -1; margin-top: 22px; }.section-heading { display: flex; align-items: end; justify-content: space-between; padding-bottom: 13px; border-bottom: 1px solid var(--line); }.section-heading span { color: var(--muted); font-size: 11px; }.mirror-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 16px; }
.mirror-card { min-height: 275px; isolation: isolate; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 10px; padding: 25px; color: var(--text); text-align: left; text-decoration: none; background: linear-gradient(138deg, #242424, #111112 65%, #1f1f20); border: 1px solid #414141; transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; }.mirror-card::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(120deg, transparent 0 43%, rgba(255,255,255,.09) 43.2% 43.6%, transparent 44%), linear-gradient(154deg, transparent 0 72%, rgba(231,48,44,.78) 72.2% 72.7%, transparent 73%); }.mirror-card::after { content: ""; position: absolute; z-index: -1; width: 62%; aspect-ratio: 1; right: -10%; top: -21%; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; box-shadow: 0 0 0 17px rgba(255,255,255,.025), 0 0 0 31px rgba(231,48,44,.07); }.mirror-card:nth-child(2) { background: linear-gradient(127deg, #3b1919, #150d0e 62%, #292020); }.mirror-card:nth-child(2)::after { width: 70%; right: -6%; top: -31%; border-radius: 0; transform: rotate(35deg); }.mirror-card-image { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 66% center; opacity: .9; filter: saturate(1.13) contrast(1.04); transition: transform .5s ease, filter .3s ease; }.mirror-card--nail::before { z-index: -1; background: linear-gradient(90deg, rgba(19,7,10,.92) 0%, rgba(20,7,11,.68) 47%, rgba(20,7,11,.14) 100%), linear-gradient(154deg, transparent 0 70%, rgba(255,56,98,.84) 70.2% 70.8%, transparent 71%); }.mirror-card--nail::after { z-index: -1; border-color: rgba(255,122,180,.4); box-shadow: 0 0 0 17px rgba(255,255,255,.04), 0 0 0 31px rgba(255,42,112,.12); }.mirror-card--nail:hover .mirror-card-image { transform: scale(1.045); filter: saturate(1.3) contrast(1.08); }.mirror-card:hover:not(.coming-soon) { transform: translateY(-6px); border-color: #ababaa; box-shadow: 9px 10px 0 -5px var(--red), 0 18px 35px rgba(0,0,0,.32); }.mirror-card.coming-soon { opacity: .56; cursor: not-allowed; }.mirror-emoji { width: 37px; height: 37px; margin-bottom: auto; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; font-size: 19px; filter: grayscale(1); }.mirror-name { font-size: clamp(25px, 3vw, 35px); font-weight: 750; letter-spacing: -.06em; }.mirror-desc { max-width: 250px; color: #b8b6b3; font-size: 12px; line-height: 1.7; }.mirror-badge { position: absolute; right: 20px; bottom: 23px; padding: 5px 0 4px 8px; color: #fbfbf8; border-left: 2px solid var(--red); font-size: 10px; letter-spacing: .14em; }.mirror-badge.coming { color: #93918d; border-color: #777; }.mirror-card.loading { justify-content: center; align-items: center; min-height: 220px; }.mirror-spinner { width: 26px; height: 26px; border: 1px solid #555; border-top-color: var(--red); border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }

.cta-section { grid-column: 1 / -1; margin-top: 30px; padding: 30px; display: flex; align-items: center; justify-content: space-between; gap: 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(255,255,255,.045), transparent); }.cta-section h2 { margin-top: 9px; font-size: clamp(26px, 3.2vw, 42px); line-height: 1.04; letter-spacing: -.07em; }.cta-action { text-align: right; }.btn-primary { min-height: 48px; padding: 0 17px 0 20px; display: inline-flex; align-items: center; gap: 27px; color: #0b0b0b; border: 0; border-radius: 0; background: var(--paper); font-size: 13px; font-weight: 800; letter-spacing: .07em; transition: background .2s, transform .2s; }.btn-primary:hover { background: var(--red-hot); }.btn-primary:active { transform: scale(.98); }.btn-primary b { font-size: 19px; }.cta-sub { margin-top: 10px; color: #8f8d89; font-size: 10px; }

/* Modal and forms preserve the existing interaction model. */
.modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; }.modal.hidden, .toast.hidden { display: none; }.modal-mask { position: absolute; inset: 0; background: rgba(0,0,0,.76); backdrop-filter: blur(5px); }.modal-panel { position: relative; width: min(100%, 440px); max-height: 85vh; overflow-y: auto; color: var(--text); background: #151515; border: 1px solid #5b5b59; box-shadow: 14px 16px 0 -7px var(--red), 0 25px 70px rgba(0,0,0,.6); animation: pop .22s ease; } @keyframes pop { from { opacity: 0; transform: translateY(10px); } }.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 22px 22px 14px; border-bottom: 1px solid var(--line); }.modal-header h2 { font-size: 18px; letter-spacing: -.03em; }.modal-close { color: #fff; border: 0; background: transparent; font-size: 27px; line-height: 1; }.modal-body { padding: 16px 22px 22px; }.loading-text { padding: 30px; text-align: center; color: var(--muted); }
.plan-card { position: relative; display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 16px; margin-bottom: 10px; border: 1px solid #444; background: #202020; }.plan-card.popular { border-color: var(--red); background: #281817; }.plan-tag { position: absolute; top: -9px; right: 10px; padding: 3px 8px; color: white; background: var(--red); font-size: 10px; font-weight: 700; }.plan-info { flex: 1; }.plan-name { font-weight: 750; font-size: 15px; }.plan-desc, .plan-unit { margin-top: 4px; color: var(--muted); font-size: 12px; }.plan-price-block { text-align: right; }.plan-price { font-size: 21px; font-weight: 800; }.plan-price small { font-size: 12px; }.plan-buy { margin-top: 5px; padding: 6px 12px; color: var(--ink); border: 0; background: var(--paper); font-size: 12px; font-weight: 800; }.plan-buy:hover { background: var(--red-hot); }.plan-buy:disabled, .btn-primary:disabled { opacity: .56; cursor: not-allowed; }.plan-note { margin-top: 9px; padding: 11px; color: var(--muted); border-left: 2px solid var(--red); background: #1e1e1e; font-size: 12px; line-height: 1.6; }.plan-note strong { color: #f2f0ec; }
.auth-tabs { display: flex; margin-bottom: 18px; border-bottom: 1px solid var(--line); }.auth-tab { flex: 1; padding: 10px 0; color: var(--muted); border: 0; border-bottom: 2px solid transparent; background: none; }.auth-tab.active { color: white; border-color: var(--red); }.auth-field { margin-bottom: 12px; }.auth-field input, #invite-code-input { width: 100%; padding: 12px; color: var(--text); outline: none; border: 1px solid #4b4b4b; border-radius: 0; background: #202020; }.auth-field input:focus, #invite-code-input:focus { border-color: var(--red); }.auth-code-field { display: flex; gap: 8px; }.btn-send-code { flex-shrink: 0; padding: 0 11px; color: #eee; border: 1px solid #555; background: #272727; font-size: 12px; }.auth-submit, .user-menu-login-btn { width: 100%; padding: 13px; color: #080808; border: 0; background: var(--paper); font-weight: 800; }.auth-link { display: block; margin: 14px auto 0; color: var(--muted); border: 0; background: none; font-size: 12px; text-decoration: underline; }.auth-hint { margin-top: 12px; color: #999; font-size: 12px; text-align: center; line-height: 1.6; }.user-menu-panel { width: min(100%, 360px); }.user-menu-info { display: flex; gap: 13px; align-items: center; margin-bottom: 17px; }.user-menu-avatar { display: grid; width: 44px; height: 44px; place-items: center; background: #252525; border: 1px solid #666; border-radius: 50%; }.user-menu-name { font-weight: 700; }.user-menu-email { margin-top: 3px; color: var(--muted); font-size: 12px; }.user-menu-btn { width: 100%; padding: 12px; margin-top: 7px; color: #eee; text-align: left; border: 1px solid #444; background: #202020; }.user-menu-btn.danger { color: #ff716c; }.toast { position: fixed; z-index: 200; left: 50%; bottom: 30px; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 12px 18px; color: white; background: #292929; border-left: 3px solid var(--red); box-shadow: 0 10px 26px rgba(0,0,0,.44); font-size: 13px; text-align: center; }.toast.success { border-color: #8cce76; }.toast.error { border-color: var(--red); }

.mirror-card-top { width: 100%; margin-bottom: auto; display: flex; align-items: flex-start; justify-content: space-between; }
.mirror-card-image--fashion { object-position: 68% center; }
.mirror-card:not(.mirror-card--nail)::before { z-index: -1; background: linear-gradient(90deg, rgba(10,10,11,.94) 0%, rgba(10,10,11,.7) 48%, rgba(10,10,11,.12) 100%), linear-gradient(154deg, transparent 0 72%, rgba(231,48,44,.78) 72.2% 72.7%, transparent 73%); }
.mirror-card:not(.mirror-card--nail)::after { z-index: -1; }
.mirror-card:not(.mirror-card--nail):hover .mirror-card-image { transform: scale(1.045); filter: saturate(1.08) contrast(1.08); }
.mirror-card-top .mirror-emoji { margin-bottom: 0; }
.mirror-card-index { color: rgba(255,255,255,.58); font: 700 11px/1 monospace; letter-spacing: .12em; }
@media (max-width: 700px) { .top-bar { height: 64px; padding-inline: 16px; }.brand-edition, .user-pill { display: none; }.hero { width: min(100% - 32px, 560px); padding-top: 45px; display: block; }.hero-title { font-size: clamp(55px, 17vw, 80px); }.hero-mirror { min-height: 330px; margin-top: 40px; }.mirror-section { margin-top: 52px; }.mirror-grid { grid-template-columns: 1fr; }.mirror-card { min-height: 220px; }.cta-section { margin-top: 24px; padding: 24px 0; display: block; background: none; }.cta-action { margin-top: 23px; text-align: left; }.cta-sub { max-width: 220px; }.hero-note { display: none; } }
@media (max-width: 390px) { .credits-label { display: none; }.hero { width: calc(100% - 26px); }.section-heading span { font-size: 10px; }.hero-mirror { min-height: 294px; }.copy-one { font-size: 29px; } }

.review-locked { overflow: hidden; }