/* Small visual refinements shared by the existing generation and login pages. */
:root{--muted:#aaa2b5;--line:rgba(231,219,255,.13);--card:rgba(255,255,255,.045);color-scheme:dark}
.login-mode-heading{font-size:13px;color:#d8cfdf;margin:20px 0 8px}
.login-mode-buttons{display:flex;gap:6px;background:rgba(0,0,0,.18);padding:5px;border:1px solid var(--line);border-radius:12px}
.login-mode-buttons button{flex:1;min-height:44px;border:1px solid transparent;border-radius:8px;color:var(--muted);background:transparent;font:inherit;font-size:13px;cursor:pointer}
.login-mode-buttons button.active{color:#ffe2a0;background:rgba(255,215,106,.1);border-color:rgba(255,215,106,.28)}
.login-recovery{display:flex;justify-content:flex-end;margin-top:10px}
#forgotPassword{border:0;background:transparent;color:var(--muted);padding:8px 0;font-size:12px;cursor:pointer;min-height:36px}
dialog option{background:#211b2c;color:#f4f0ea}
html{scrollbar-gutter:stable}
body{line-height:1.5}
.wrap{padding-top:28px;padding-bottom:calc(40px + env(safe-area-inset-bottom))}
.hero{margin-bottom:22px}.hero h1{font-size:28px;letter-spacing:-.04em;margin:10px 0 8px}
.tagline{line-height:1.7}.banner{color:#c9bfd7;background:rgba(130,102,178,.1);font-size:12px;line-height:1.6}
.banner strong{color:#eadbb3}.banner a{text-decoration:none;font-size:12px}
.card{padding:22px;border-radius:20px;background:linear-gradient(150deg,rgba(255,255,255,.055),rgba(255,255,255,.025));box-shadow:0 16px 42px rgba(0,0,0,.16)}
.field{margin-bottom:22px}.field-label{color:#e9e3ef;letter-spacing:.02em}.hint{line-height:1.65}
button,a,input,select,summary,.upload{-webkit-tap-highlight-color:transparent}
button,.pill,.upload,.history-item summary{transition:background .16s,border-color .16s,box-shadow .16s,transform .16s}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,.upload:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.pill{min-height:42px;padding:9px 16px;background:rgba(255,255,255,.025)}
.pill.active{background:rgba(255,215,106,.11);border-color:rgba(255,215,106,.55);box-shadow:inset 0 0 0 1px rgba(255,215,106,.08)}
.upload{padding:24px 16px;border-color:rgba(180,156,219,.35);background:rgba(167,139,250,.035);border-radius:16px}
.upload strong{font-size:15px;margin:8px 0 4px}.preview-row{padding:10px;background:rgba(255,255,255,.025);border-radius:12px}
.cta{min-height:52px;background:linear-gradient(125deg,#ffe5a8,#eeb44f);box-shadow:0 7px 20px rgba(238,180,79,.12);font-size:15px;letter-spacing:.02em}
.cta.loading::before{content:'';display:inline-block;vertical-align:-2px;width:14px;height:14px;margin-right:8px;border:2px solid rgba(26,18,8,.25);border-top-color:#39270d;border-radius:50%;animation:polish-spin .8s linear infinite}
@keyframes polish-spin{to{transform:rotate(360deg)}}
.status{padding:13px 14px;background:rgba(255,255,255,.02);font-size:12px;line-height:1.7;overflow-wrap:anywhere}
.account-bar{padding:10px 12px;border:1px solid var(--line);background:rgba(255,255,255,.025);border-radius:14px;gap:6px}
.account-bar span{min-width:100%;font-size:12px;color:var(--muted)}
.account-bar button,.history-controls button{min-height:40px;padding:8px 12px;font-size:12px;background:transparent}
#historyOpen{border-color:rgba(255,215,106,.3);color:#f3d99e;background:rgba(255,215,106,.06)}
#logout{color:var(--muted)}
dialog{border-color:rgba(219,202,248,.18);border-radius:20px;background:linear-gradient(150deg,#211b2c,#15121d);box-shadow:0 24px 90px rgba(0,0,0,.5);padding:26px}
dialog::backdrop{background:rgba(6,5,12,.76);backdrop-filter:blur(5px)}
dialog h2{font-size:22px;letter-spacing:-.03em;margin:0 0 8px}
dialog label{font-size:13px;color:#d8cfdf;margin-top:18px}
dialog input,dialog select{min-height:46px;font-size:16px;background:rgba(255,255,255,.035);border-radius:10px;transition:border-color .16s}
dialog input::placeholder{color:#887f96;font-size:13px}
.dialog-close{width:40px;height:40px;line-height:1;border-radius:10px;font-size:25px;padding:0;flex-shrink:0}
.error-text:empty{display:none}.error-text{line-height:1.6;overflow-wrap:anywhere;margin:12px 0}
#smsFields{display:grid;grid-template-columns:1fr auto;column-gap:8px;align-items:center}
#smsFields label{grid-column:1/-1}#smsCode{min-width:0;letter-spacing:.12em}
#sendCode{margin-top:0!important;min-height:46px;font-size:12px;padding:10px 12px;border-radius:10px}
[data-page=login] #loginDialog{margin:clamp(36px,11vh,100px) auto 32px;padding:30px 26px}
[data-page=login] #loginTitle::before{content:'FASHIONSHOW';display:block;font-size:10px;letter-spacing:.22em;font-weight:500;color:var(--gold2);margin-bottom:12px}
[data-page=login] #loginSubmit{margin-top:18px}
.history-header{padding:14px 18px;background:rgba(255,255,255,.02)}
.history-item summary{padding:14px 0;border-radius:10px}.history-item summary>div:last-child{min-width:0}
.history-item summary span{overflow-wrap:anywhere}.history-meta{margin-top:5px}
.history-preview{border:1px solid var(--line);background:rgba(167,139,250,.045);border-radius:10px}
.history-item[open] .history-content{padding:0 0 18px}.history-content>a{display:inline-flex;align-items:center;min-height:42px;padding:8px 12px;border:1px solid rgba(255,215,106,.25);border-radius:10px;text-decoration:none;font-size:12px;margin-top:10px}
.history-scroll{scrollbar-width:thin;scrollbar-color:#544660 transparent}
@media(hover:hover){button:not(:disabled):hover,.pill:not(:disabled):hover{border-color:rgba(255,215,106,.45);background:rgba(255,215,106,.07)}.cta:not(:disabled):hover{background:linear-gradient(125deg,#ffeab8,#f6bf60);box-shadow:0 9px 24px rgba(238,180,79,.2)}.history-item summary:hover{background:rgba(255,255,255,.03)}}
button:not(:disabled):active,.pill:not(:disabled):active{transform:translateY(1px)}
@media(max-width:380px){.card{padding:18px}.wrap{padding-left:12px;padding-right:12px}.banner{font-size:11px}.account-bar button{padding:8px 10px}.history-preview{width:56px;height:68px}dialog{padding:22px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}