:root{
  --bg:#f7f5f2;
  --bg-soft:#f1eeea;
  --surface:#ffffff;
  --surface-2:#fbfaf8;
  --surface-3:#f6f2ed;
  --text:#161616;
  --muted:#69635d;
  --line:#ddd6ce;
  --line-strong:#c9c0b7;
  --accent:#111111;
  --accent-soft:#f3eee8;
  --success:#e7f0e8;
  --warn:#f7f0de;
  --danger:#f8e4e3;
  --radius:0;
  --radius-sm:0;
  --shadow:none;
  --shell-pad:30px;
  --content-max:1760px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--bg)}
body{
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,Arial,Helvetica,sans-serif;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
button{cursor:pointer}

.shell,
.shell.shell-wide{
  width:min(100%, var(--content-max));
  max-width:none;
  margin:0 auto;
  padding:0 var(--shell-pad) 96px;
}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:0;
  box-shadow:none;
  overflow:hidden;
}
.section{padding:34px}
.stack{display:grid;gap:24px}
.grid-2{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr);gap:24px}
.two-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}

.promo-bar{
  background:#000;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:11px;
  line-height:1;
  text-align:center;
  padding:12px 16px;
}

.store-header{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  margin-bottom:26px;
}
.utility-bar{
  min-height:84px;
  display:grid;
  grid-template-columns:auto minmax(280px, 1fr) auto;
  align-items:center;
  gap:18px;
  border-bottom:1px solid var(--line);
}
.store-brand{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:42px;
  line-height:1;
  letter-spacing:.07em;
  text-transform:uppercase;
  justify-self:start;
  padding:0 0 0 12px;
}
.header-sections{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:34px;
  min-width:0;
}
.header-section-link{
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:500;
  padding-top:3px;
}
.header-section-link.active{color:var(--text);font-weight:600}
.utility-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
}
.utility-auth,
.utility-link,
.header-icon{
  border:0;
  background:none;
  padding:0;
  color:var(--text);
  font-size:13px;
}
.utility-auth{
  text-decoration:underline;
  text-underline-offset:2px;
}

.header-live-status{
  justify-self:center;
  width:min(100%, 520px);
  padding:0 12px;
}
.header-tryon-indicator{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:54px;
  padding:10px 16px;
  border:1px solid transparent;
  background:transparent;
  transition:background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.header-tryon-indicator:hover{transform:translateY(-1px)}
.tryon-indicator-dot{
  width:11px;
  height:11px;
  border-radius:999px;
  flex:0 0 11px;
  background:#bbb1a6;
}
.tryon-indicator-copy{
  display:grid;
  gap:5px;
  min-width:0;
  flex:1 1 auto;
}
.tryon-indicator-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.tryon-indicator-title{
  font-size:13px;
  line-height:1.1;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:700;
}
.tryon-indicator-text{
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tryon-indicator-badge{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--muted);
  white-space:nowrap;
}
.tryon-progress{
  position:relative;
  display:block;
  width:100%;
  height:3px;
  border-radius:999px;
  background:rgba(17,17,17,.08);
  overflow:hidden;
}
.tryon-progress-bar{
  position:absolute;
  inset:0 auto 0 0;
  width:0%;
  border-radius:inherit;
  background:#111;
  transition:width .45s ease, opacity .3s ease, background .25s ease;
}
.tryon-progress-bar::after{
  content:"";
  position:absolute;
  top:0;
  right:-32px;
  width:32px;
  height:100%;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.65), rgba(255,255,255,0));
  opacity:0;
}

.header-tryon-indicator.is-processing{
  background:#fbf7f1;
  border-color:#dfd5ca;
}
.header-tryon-indicator.is-processing .tryon-indicator-dot{
  background:#111;
  animation:tryonPulse 1.4s ease-in-out infinite;
}
.header-tryon-indicator.is-processing .tryon-indicator-badge{color:#111}
.header-tryon-indicator.is-processing .tryon-progress-bar{
  opacity:1;
  animation: tryonProgressGlow 1.8s linear infinite;
}

.header-tryon-indicator .tryon-indicator-text{
  transition: opacity .24s ease, transform .24s ease;
}
.header-tryon-indicator.is-processing .tryon-indicator-text{
  animation: tryonTextPulse 1.8s ease-in-out infinite;
}
@keyframes tryonTextPulse {
  0%, 100% { opacity: .88; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-1px); }
}
.header-tryon-indicator.is-done{
  background:#f4f8f3;
  border-color:#d5e2d2;
}
.header-tryon-indicator.is-done .tryon-indicator-dot{background:#2c6b3f}
.header-tryon-indicator.is-done .tryon-indicator-badge{color:#2c6b3f}
.header-tryon-indicator.is-done .tryon-progress-bar{background:#2c6b3f;width:100%;opacity:1}
.header-tryon-indicator.is-failed{
  background:#fbf1f1;
  border-color:#ead2d2;
}
.header-tryon-indicator.is-failed .tryon-indicator-dot{background:#9d3d3d}
.header-tryon-indicator.is-failed .tryon-indicator-badge{color:#9d3d3d}
.header-tryon-indicator.is-failed .tryon-progress-bar{background:#9d3d3d;width:100%;opacity:.55}
@keyframes tryonPulse{
  0%{transform:scale(.82);opacity:.55}
  45%{transform:scale(1.18);opacity:1}
  100%{transform:scale(.82);opacity:.55}
}
@keyframes tryonProgressGlow{
  0% { filter: saturate(1); }
  100% { filter: saturate(1.15); }
}
.header-tryon-indicator.is-processing .tryon-progress-bar::after{
  opacity:1;
  animation: tryonBarSweep 1.4s linear infinite;
}
@keyframes tryonBarSweep{
  from{ transform:translateX(-180px); }
  to{ transform:translateX(520px); }
}
.utility-divider{
  width:1px;
  height:20px;
  background:var(--line);
}
.header-icons{display:flex;align-items:center;gap:14px}
.header-icon{
  width:18px;height:18px;border:1.25px solid var(--text);border-radius:50%;display:inline-block;opacity:.9;
}
.header-icon.pin{border-radius:12px 12px 12px 2px;transform:rotate(45deg)}
.header-icon.heart{border-radius:0;border:0;position:relative;width:18px;height:16px}
.header-icon.heart::before,
.header-icon.heart::after{content:"";position:absolute;width:10px;height:16px;border:1.25px solid var(--text);border-bottom:none;border-radius:10px 10px 0 0;top:0}
.header-icon.heart::before{left:1px;transform:rotate(-45deg);transform-origin:bottom right}
.header-icon.heart::after{right:1px;transform:rotate(45deg);transform-origin:bottom left}
.header-icon.bag{border-radius:3px;width:17px;height:15px;position:relative}
.header-icon.bag::before{content:"";position:absolute;left:3px;right:3px;top:-5px;height:6px;border:1.25px solid var(--text);border-bottom:none;border-radius:8px 8px 0 0}
.header-icon.search{position:relative}
.header-icon.search::after{content:"";position:absolute;width:7px;height:1.25px;background:var(--text);right:-5px;bottom:-3px;transform:rotate(45deg)}

.category-bar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:26px;
  min-height:46px;
}
.category-links{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:28px;
  min-width:0;
}
.category-link,
.category-search{
  position:relative;
  font-size:14px;
  color:var(--text);
  padding:0 0 12px;
  white-space:nowrap;
}
.category-link.active::after,
.category-link:hover::after,
.category-search::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1.5px;
  background:var(--text);
}
.category-search{
  min-width:128px;
  text-align:left;
}

.eyebrow{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:10px;
}
.title,
.hero-kicker + h1,
.guide-dialog h3,
.auth-editorial-side .title,
.page-intro .title,
.section-head .title{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-weight:600;
  letter-spacing:.015em;
}
.title{font-size:42px;line-height:.98;margin:0}
.small-title{font-family:Inter,Arial,sans-serif;font-size:19px;font-weight:600;letter-spacing:-.01em}
.subtitle{
  color:var(--muted);
  font-size:15px;
  line-height:1.7;
  max-width:72ch;
  margin-top:10px;
}
.section-head,
.compact-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:24px;
}
.inline-divider{height:1px;background:var(--line);margin:30px 0}

.guess-hero,
.page-intro,
.tryon-compact-head{
  position:relative;
  background:linear-gradient(90deg, rgba(250,248,245,.98) 0%, rgba(247,242,236,.96) 56%, rgba(242,236,230,.96) 100%);
  border:1px solid var(--line);
}
.guess-hero{min-height:540px;display:grid;align-items:end;margin-bottom:26px}
.guess-hero::after{
  content:"";
  position:absolute;
  inset:0 0 0 auto;
  width:42%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.05)),
    url('/static/img/hero-home.png') center/cover no-repeat;
  opacity:.92;
}
.guess-hero-overlay{position:relative;z-index:1;padding:56px 58px 64px;width:min(58%, 760px)}
.hero-kicker{
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:14px;
}
.guess-hero h1{
  margin:0;
  font-size:78px;
  line-height:.9;
  max-width:10ch;
}
.guess-hero p{
  margin:20px 0 0;
  font-size:16px;
  line-height:1.7;
  color:#3e3934;
  max-width:58ch;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
.guess-hero-cta,
button,
.button-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 24px;
  border:1px solid #111;
  background:#111;
  color:#fff;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.guess-hero-cta:hover,
button:hover,
.button-link:hover{background:#2a2a2a;border-color:#2a2a2a}
.secondary,
.button-link.secondary,
button.secondary,
button.ghost,
.auth-social-btn{
  background:#fff;
  color:var(--text);
  border:1px solid var(--text);
}
.secondary:hover,
.button-link.secondary:hover,
button.secondary:hover,
button.ghost:hover,
.auth-social-btn:hover{background:#111;color:#fff;border-color:#111}
.hero-link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--text);
}
.hero-link::after{content:"→";font-size:14px}

.dashboard-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(360px,.85fr);gap:24px;margin-bottom:24px}
.dashboard-lower-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:24px}
.dashboard-overview,
.dashboard-latest,
.dashboard-notes,
.editorial-section,
.profile-unified-card,
.payment-result-card,
.history-summary-card{background:var(--surface)}
.dashboard-metrics,
.summary-grid,
.refined-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.metric-tile,
.summary-item,
.balance-box,
.quick-card,
.info-tile,
.benefit-card,
.faq-item,
.note-item,
.u-card,
.preview,
.history-item,
.payment-item,
.package-card,
.soft-gradient,
.soft-info-banner,
.result-wrap,
.payment-result-hero,
.empty,
.auth-modal-dialog,
.auth-card,
.guide-dialog{
  background:var(--surface-2);
  border:1px solid var(--line);
}
.metric-tile,
.summary-item{padding:20px 18px;min-height:110px;display:grid;align-content:space-between}
.metric-tile span,
.summary-item span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.metric-tile strong,
.summary-item strong,
.balance-box strong{font-size:34px;font-weight:600;letter-spacing:-.02em}
.dashboard-callouts,
.notes-list,
.benefits-list,
.faq-list,
.payments-list,
.history-list{display:grid;gap:14px}
.info-tile,
.note-item,
.benefit-card,
.faq-item{padding:18px 20px}
.info-tile strong,
.note-item strong,
.benefit-card strong,
.faq-item strong{display:block;margin-bottom:7px;font-size:15px;font-weight:600}
.info-tile span,
.note-item span,
.benefit-card span,
.faq-item span{color:var(--muted);font-size:14px;line-height:1.7}

.dashboard-uploads,
.preview-grid,
.preview-grid-3,
.result-wrap,
.dashboard-result{display:grid;gap:14px}
.preview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.preview-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.preview,
.result-wrap,
.dashboard-result,
.payment-result-hero{
  min-height:280px;
  padding:14px;
  place-items:center;
}
.result-wrap-large{min-height:840px}
.result-wrap img,
.dashboard-result img,
.preview img{width:100%;height:100%;object-fit:cover}
.empty{width:100%;min-height:200px;display:grid;place-items:center;color:var(--muted);padding:20px;text-align:center}

.page-intro,
.tryon-compact-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px;padding:32px 34px}
.mini-hero-side,.tryon-head-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.soft-chip,
.trust-pill,
.status-chip,
.help-button{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:0 15px;border:1px solid var(--line-strong);background:var(--surface);
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text);
}
.trust-row{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 20px}

.tryon-editorial-grid,
.tryon-editorial-grid-clean{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(420px,.96fr);
  gap:24px;
  align-items:start;
}
.tryon-editorial-left{display:grid;gap:24px}
.tryon-main-card{padding:30px}
.tryon-subgrid-2,
.tryon-subgrid-2-wide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:18px}
.tryon-subgrid-3,
.tryon-subgrid-3-wide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:18px}
.upload-card{padding:22px;display:flex;flex-direction:column}
.upload-card h3{margin:0 0 10px;font-size:18px;font-weight:600;letter-spacing:-.01em}
.upload-card p{margin:0 0 18px;color:var(--muted);font-size:14px;line-height:1.65}
.action-row{display:flex;align-items:center;gap:12px}
.action-row.split>*{flex:1}
.action-row.wrap{flex-wrap:wrap}
.action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.refined-action-grid button:last-child{grid-column:1 / -1}
.full{width:100%}
.runbar-topline{display:flex;justify-content:space-between;gap:18px;margin-bottom:18px}
.runbar-select{display:grid;gap:8px;min-width:260px}
.runbar-select span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tryon-runbar{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.status{
  margin-top:16px;
  padding:15px 16px;
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--muted);
  font-size:14px;
}
.spotlight-card{position:sticky;top:22px}

.balance-box{padding:28px 24px;margin-bottom:16px;text-align:center}
.balance-box span{display:block;margin-top:8px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.balance-box small{display:block;margin-top:7px;color:var(--muted)}
.package-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:18px}
.package-card{padding:22px;display:grid;gap:14px;align-content:start}
.package-card strong{font-size:30px;letter-spacing:-.02em}
.package-card .price{font-size:17px;font-weight:600}
.payments-list,.history-list{margin-top:12px}
.history-item,.payment-item{padding:20px}
.quick-card{padding:20px;display:grid;gap:8px;min-height:120px}
.quick-card strong{font-size:17px}
.quick-card span{font-size:14px;color:var(--muted);line-height:1.6}
.quick-card:hover{background:#111;color:#fff;border-color:#111}
.quick-card:hover span{color:#e5e5e5}

.form-grid{display:grid;gap:16px}
.form-grid label{display:grid;gap:8px}
.form-grid label span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
input,select,textarea{
  width:100%;
  min-height:48px;
  border:1px solid var(--line-strong);
  background:#fff;
  color:var(--text);
  padding:0 14px;
  border-radius:0;
}
input[type="file"]{padding:10px 12px;min-height:auto;background:var(--surface)}
input:focus,select:focus,textarea:focus{outline:none;border-color:#8d837a}

.auth-wrap{padding:42px 0 0}
.auth-wrap-wide{max-width:none}
.auth-card,
.auth-card-editorial{display:grid;grid-template-columns:minmax(340px,.95fr) minmax(320px,.75fr)}
.auth-editorial-side{padding:34px;border-right:1px solid var(--line);background:linear-gradient(180deg,#f9f6f2 0%,#f2ede7 100%)}
.auth-editorial-side .title{font-size:56px}
.auth-editorial-visual{margin-top:24px;min-height:360px;border:1px solid var(--line);background-size:cover;background-position:center}
.auth-login-visual{background-image:url('/static/img/hero-profile.png')}
.auth-register-visual{background-image:url('/static/img/hero-account.png')}
.auth-form-side{padding:34px;display:grid;align-content:start;gap:18px}
.auth-socials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.auth-social-btn{min-height:52px;padding:0 18px;justify-content:center;gap:10px;text-transform:none;letter-spacing:0;font-size:14px}
.auth-footer{font-size:14px;color:var(--muted)}
.auth-footer a{text-decoration:underline;text-underline-offset:2px;color:var(--text)}

.auth-modal{position:fixed;inset:0;z-index:100;display:none}
.auth-modal[aria-hidden="false"]{display:block}
.auth-modal-backdrop{position:absolute;inset:0;background:rgba(10,10,10,.48)}
.auth-modal-dialog{position:relative;z-index:1;width:min(980px,calc(100vw - 32px));margin:48px auto;padding:32px;background:#fff}
.auth-modal-close,
.guide-close{position:absolute;top:10px;right:10px;width:40px;height:40px;padding:0;font-size:28px;line-height:1;background:#fff;color:#111;border:1px solid var(--line)}
.auth-tabs{display:flex;gap:8px;border-bottom:1px solid var(--line);margin:18px 0 16px;padding-bottom:10px}
.auth-tab{min-height:40px;padding:0 16px;background:#fff;color:var(--text);border:1px solid var(--line)}
.auth-tab.active{background:#111;color:#fff;border-color:#111}
.auth-panel{display:none}.auth-panel.active{display:block}
.auth-inline-form{margin-top:8px}

.guide-modal{position:fixed;inset:0;z-index:110;display:none}
.guide-modal.open{display:block}
.guide-backdrop{position:absolute;inset:0;background:rgba(12,12,12,.44)}
.guide-dialog{position:relative;z-index:1;width:min(760px,calc(100vw - 28px));margin:60px auto;padding:30px;background:#fff}
.guide-dialog h3{margin:0 0 10px;font-size:42px;line-height:.95}
.guide-dialog p{margin:0 0 20px;color:var(--muted)}
.guide-list{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.guide-list li{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start;padding:14px 0;border-top:1px solid var(--line)}
.guide-list li:first-child{border-top:0;padding-top:0}
.guide-list b{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--text);font-size:13px}
.guide-list span{color:var(--muted);line-height:1.7}

.mobile-dock{display:none}

@media (max-width: 1320px){
  .guess-hero h1{font-size:66px}
  .guess-hero-overlay{width:min(64%,780px)}
  .dashboard-grid,
  .dashboard-lower-grid,
  .tryon-editorial-grid,
  .grid-2{grid-template-columns:1fr}
  .spotlight-card{position:static}
}

@media (max-width: 960px){
  :root{--shell-pad:18px}
  .promo-bar{font-size:10px;padding:10px 12px}
  .utility-bar{grid-template-columns:1fr auto;min-height:auto;padding:18px 0}
  .store-brand{font-size:34px}
  .header-sections{display:none}
  .utility-right{gap:12px}
  .header-icons{display:none}
  .category-bar{grid-template-columns:1fr;gap:12px;padding:12px 0}
  .category-links{gap:18px;overflow:auto;flex-wrap:nowrap;padding-bottom:2px}
  .category-search{display:none}
  .guess-hero{min-height:460px}
  .guess-hero::after{position:absolute;inset:auto 0 0 0;width:100%;height:44%;opacity:.28}
  .guess-hero-overlay{width:100%;padding:36px 28px 38px}
  .guess-hero h1{font-size:48px;max-width:none}
  .page-intro,.tryon-compact-head{padding:26px}
  .section,.tryon-main-card{padding:24px}
  .dashboard-metrics,.summary-grid,.refined-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tryon-subgrid-3,.tryon-subgrid-2,.preview-grid,.preview-grid-3,.two-cols,.auth-card,.auth-card-editorial,.auth-socials,.action-grid{grid-template-columns:1fr}
  .auth-editorial-side{border-right:0;border-bottom:1px solid var(--line)}
  .auth-editorial-side .title{font-size:44px}
  .auth-editorial-visual{min-height:240px}
}

@media (max-width: 640px){
  .shell,.shell.shell-wide{padding-bottom:98px}
  .utility-bar{grid-template-columns:1fr;gap:12px;padding:16px 0}
  .store-brand{font-size:30px}
  .utility-right{justify-content:flex-start}
  .category-link{font-size:13px;padding-bottom:10px}
  .title{font-size:34px}
  .guess-hero h1{font-size:40px}
  .subtitle{font-size:14px;line-height:1.65}
  .section,.page-intro,.tryon-main-card,.tryon-compact-head{padding:20px}
  .metric-tile strong,.summary-item strong,.balance-box strong{font-size:28px}
  .dashboard-metrics,.summary-grid,.refined-summary-grid{grid-template-columns:1fr}
  .tryon-subgrid-2,.tryon-subgrid-3{grid-template-columns:1fr}
  .runbar-select{min-width:0}
  .result-wrap-large{min-height:520px}
  .mobile-dock{
    display:grid;
    position:fixed;
    left:0;right:0;bottom:0;
    grid-auto-flow:column;
    grid-auto-columns:1fr;
    gap:0;
    background:#fff;
    border-top:1px solid var(--line);
    z-index:80;
  }
  .dock-link,.dock-button{
    min-height:62px;
    display:grid;
    place-items:center;
    font-size:11px;
    letter-spacing:.07em;
    text-transform:uppercase;
    color:var(--muted);
    background:#fff;
    border:0;
  }
  .dock-link.active,.dock-button.active{color:var(--text)}
  .dock-link b,.dock-button b{font-weight:600}
}


/* 2026-03-30 refinement */
:root{
  --shell-pad:24px;
}
body{overflow-x:hidden}
.shell,
.shell.shell-wide{
  width:100%;
  max-width:none;
  margin:0;
  padding:0 var(--shell-pad) 96px;
}
.store-header{margin-bottom:24px}
.store-header-fullbleed{margin-left:calc(var(--shell-pad) * -1);margin-right:calc(var(--shell-pad) * -1);padding-left:var(--shell-pad);padding-right:var(--shell-pad)}
.utility-bar.utility-bar-simple{
  grid-template-columns:auto 1fr;
  min-height:92px;
}
.utility-right.utility-right-simple{
  justify-content:flex-end;
}
.utility-auth{
  text-decoration:none;
  font-size:13px;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding-right:12px;
}
.category-bar{
  grid-template-columns:1fr;
  min-height:54px;
}
.category-links{
  gap:34px;
}
.category-links .category-link:first-child{padding-left:12px}
.category-link,
.category-search{
  font-size:13px;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.guess-hero::after{display:none}
.dashboard-hero-simple{
  padding:42px 44px;
  background:linear-gradient(180deg,#fbfaf8 0%, #f4efe9 100%);
}
.dashboard-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(420px,.8fr);
  gap:32px;
  align-items:stretch;
}
.dashboard-sales-copy h1{
  margin:0;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:68px;
  line-height:1.02;
  letter-spacing:.008em;
  max-width:11.8ch;
  text-wrap:balance;
}
.dashboard-sales-copy p{
  margin:22px 0 0;
  max-width:68ch;
  font-size:16px;
  line-height:1.8;
  color:#3f3933;
}
.dashboard-points{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:28px;
}
.dashboard-point{
  padding:18px 18px 20px;
  background:rgba(255,255,255,.72);
  border:1px solid var(--line);
}
.dashboard-point strong{display:block;font-size:14px;margin-bottom:7px;text-transform:uppercase;letter-spacing:.06em}
.dashboard-point span{display:block;font-size:14px;line-height:1.7;color:var(--muted)}
.dashboard-overview-panel{
  background:rgba(255,255,255,.74);
  border:1px solid var(--line);
  padding:26px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:18px;
}
.dashboard-metrics-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.overview-head{margin-bottom:18px}
.overview-copy-block{display:grid;gap:14px;padding:4px 2px 0}
.overview-copy-block p{margin:0;color:#433d37;font-size:15px;line-height:1.75}
.overview-mini-points{display:flex;flex-wrap:wrap;gap:10px}
.overview-mini-points span{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border:1px solid var(--line);background:var(--surface-2);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text)}

.preview,
.result-wrap,
.dashboard-result,
.payment-result-hero{
  background:var(--surface-2);
}
.preview{
  min-height:250px;
  padding:14px;
  gap:12px;
  align-content:start;
}
.preview h4{
  margin:0;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}
.preview img,
.result-wrap img,
.dashboard-result img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
.preview-grid-framed .preview,
.preview-grid-clean .preview,
#historyList .history-item,
#paymentSummary .payment-item,
#paymentsList .payment-item,
#resultWrap,
#latestResultWrap{
  overflow:hidden;
}
.preview-grid-framed .preview{min-height:320px}
.preview-grid-framed .preview img{
  background:#f8f6f3;
  border:1px solid var(--line);
  padding:10px;
  min-height:238px;
}
.upload-card input[type="file"]{margin-top:auto;margin-bottom:14px}
.upload-controls{margin-top:4px}
.spaced-controls{gap:14px}
.upload-card .action-row.split > *{min-width:0}
.upload-card button,
.upload-card .button-link{padding:0 14px}
.tryon-main-card{overflow:hidden}
.tryon-subgrid-2,
.tryon-subgrid-3{align-items:stretch}
.tryon-subgrid-3 .upload-card p{min-height:70px}
.result-wrap-large{
  min-height:840px;
  align-content:stretch;
}
.result-wrap-large .result-image{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
.result-wrap .action-row,
.result-wrap-large .action-row{
  width:100%;
}
.history-item{
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  gap:18px;
  align-items:start;
}
.history-item img{
  width:100%;
  height:220px;
  object-fit:contain;
  background:#f8f6f3;
  border:1px solid var(--line);
  padding:10px;
}
.billing-grid-sticky{
  align-items:start;
  grid-template-columns:minmax(360px,.95fr) minmax(0,1.05fr);
}
.billing-left-panel{
  position:sticky;
  top:22px;
  min-height:var(--billing-panel-height, auto);
}
.billing-right-scroll{
  height:var(--billing-panel-height, auto);
  min-height:var(--billing-panel-height, auto);
  overflow:auto;
  padding-right:6px;
}
.billing-stack-fill{min-height:100%}
.billing-grid-sticky{--billing-panel-height:980px}
.billing-right-scroll::-webkit-scrollbar{width:8px}
.billing-right-scroll::-webkit-scrollbar-thumb{background:#d2cbc3}
.page-intro,
.tryon-compact-head{padding:30px 34px}
@media (min-width: 1500px){
  :root{--shell-pad:30px}
  .dashboard-sales-copy h1{font-size:76px}
}
@media (max-width: 1320px){
  .dashboard-hero-grid,
  .billing-grid-sticky{grid-template-columns:1fr}
  .billing-left-panel{position:static;height:auto}
  .billing-right-scroll{max-height:none;overflow:visible;padding-right:0}
  .dashboard-points{grid-template-columns:1fr}
}
@media (max-width: 960px){
  .utility-bar.utility-bar-simple{grid-template-columns:1fr;gap:10px;padding:18px 0;min-height:auto}
  .utility-right.utility-right-simple{justify-content:flex-start}
  .category-links{gap:18px;overflow:auto;flex-wrap:nowrap;padding-bottom:4px}
  .dashboard-hero-simple{padding:26px}
  .dashboard-sales-copy h1{font-size:46px;max-width:none}
  .dashboard-overview-panel{padding:20px}
  .dashboard-metrics-two{grid-template-columns:1fr 1fr}
  .preview-grid-framed .preview{min-height:280px}
  .history-item{grid-template-columns:1fr}
  .history-item img{height:240px}
}
@media (max-width: 640px){
  :root{--shell-pad:16px}
  .shell,.shell.shell-wide{padding-bottom:98px}
  .dashboard-sales-copy h1{font-size:38px}
  .dashboard-metrics-two{grid-template-columns:1fr}
  .preview-grid-framed .preview img{min-height:190px}
  .upload-card button,
  .upload-card .button-link,
  button,
  .button-link{font-size:12px}
}


/* polish: nav spacing + underline alignment */
.category-links .category-link:first-child{padding-left:0;margin-left:12px}
.category-link{display:inline-flex;align-items:center;justify-content:center}
.store-brand{padding-left:18px}
.utility-bar.utility-bar-simple{padding-left:0;padding-right:0}
.utility-right-simple{padding-right:18px}


/* security/admin polish */
.admin-payments-grid{align-items:start}
.compact-grid{gap:14px}
.admin-pretty-json{margin:0;padding:18px;border:1px solid rgba(17,17,17,.12);background:#faf8f5;color:#111;white-space:pre-wrap;word-break:break-word;max-height:420px;overflow:auto;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.category-link{position:relative}
.category-link::after{left:.35em;right:.35em}

@media (max-width: 900px){

  .header-live-status{
    order:3;
    grid-column:1 / -1;
    width:100%;
    padding:0 16px 14px;
  }
  .header-tryon-indicator{
    min-height:unset;
    padding:11px 14px;
  }
  .tryon-indicator-text{white-space:normal}
  .tryon-indicator-topline{align-items:flex-start;flex-direction:column;gap:4px}

}


.header-live-status{display:none !important}

.tryon-center-status{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  padding:32px;
  pointer-events:none;
  z-index:70;
}
.tryon-center-indicator{
  position:relative;
  width:min(560px, calc(100vw - 32px));
  padding:24px 24px 22px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  box-shadow:0 18px 44px rgba(17,17,17,.08);
  pointer-events:auto;
  display:block;
  overflow:hidden;
}
.tryon-center-glow{
  position:absolute;
  inset:-30% auto auto -10%;
  width:220px;
  height:220px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(17,17,17,.08), rgba(17,17,17,0));
  pointer-events:none;
}
.tryon-center-copy{position:relative;display:grid;gap:10px}
.tryon-center-kicker{
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.tryon-center-title{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:38px;
  line-height:.95;
  letter-spacing:.015em;
}
.tryon-center-text{
  font-size:15px;
  line-height:1.6;
  color:var(--muted);
  max-width:46ch;
}
.tryon-progress-center{height:4px;margin-top:2px}
.tryon-center-badge{
  justify-self:start;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text);
  font-weight:700;
}
.tryon-center-indicator.is-processing{border-color:#dfd5ca}
.tryon-center-indicator.is-processing .tryon-center-badge{color:#111}
.tryon-center-indicator.is-processing .tryon-progress-bar{opacity:1;animation:tryonProgressGlow 1.8s linear infinite}
.tryon-center-indicator.is-done{border-color:#d5e2d2;background:rgba(244,248,243,.98)}
.tryon-center-indicator.is-done .tryon-center-badge{color:#2c6b3f}
.tryon-center-indicator.is-done .tryon-progress-bar{background:#2c6b3f;width:100%;opacity:1}
.tryon-center-indicator.is-failed{border-color:#ead2d2;background:rgba(251,241,241,.98)}
.tryon-center-indicator.is-failed .tryon-center-badge{color:#9d3d3d}
.tryon-center-indicator.is-failed .tryon-progress-bar{background:#9d3d3d;width:100%;opacity:.7}
.single-run-grid{grid-template-columns:minmax(0,1fr)}
.single-run-grid button{width:100%}

/* Center tryon indicator disabled per UX rollback */
#tryonCenterStatus, #tryonCenterIndicator, .tryon-center-status, .tryon-center-indicator { display:none !important; }

.account-menu-wrap{position:relative;display:flex;justify-content:flex-end}
.account-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:180px;padding:10px;background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px rgba(16,16,16,.12);z-index:120}
.account-menu-item{display:block;width:100%;text-align:left;padding:12px 14px;border:0;background:none;color:var(--text);font-size:14px}
.account-menu-item:hover{background:#f6f2ec}
.account-menu-logout{color:#a44a43}
.auth-modal-dialog{width:min(460px,calc(100vw - 32px));margin:80px auto;padding:28px}
.auth-mode-switches{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:4px}
.auth-telegram-block{margin-top:14px}
.auth-telegram-btn{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 16px;border:1px solid var(--line);color:var(--text);text-decoration:none;background:#fff}
.auth-telegram-btn:hover{background:#f6f2ec}


/* v5 ux polish */
.utility-auth,
.category-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  background:transparent;
  outline:none;
  -webkit-tap-highlight-color:transparent;
}

.utility-auth::after,
.category-link::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:0;
  height:2px;
  background:var(--text);
  transform:translateX(-50%);
  transition:width .24s ease;
}

.utility-auth:hover::after,
.utility-auth:focus-visible::after,
.utility-auth[aria-expanded="true"]::after,
.category-link:hover::after,
.category-link:focus-visible::after,
.category-link.active::after{
  width:calc(100% - .7em);
}

.utility-auth:hover,
.utility-auth:focus-visible,
.category-link:hover,
.category-link:focus-visible{
  background:transparent;
  box-shadow:none;
  outline:none;
}

.utility-auth{
  padding:0 0 10px;
}

.category-link{
  padding:0 0 12px;
}


/* v5 underline alignment hotfix */
.utility-auth::after,
.category-link::after{
  left:50% !important;
  right:auto !important;
  width:0 !important;
  transform:translateX(-50%) !important;
}

.utility-auth:hover::after,
.utility-auth:focus-visible::after,
.utility-auth[aria-expanded="true"]::after,
.category-link:hover::after,
.category-link:focus-visible::after,
.category-link.active::after{
  width:100% !important;
}

.utility-auth,
.category-link{
  width:auto !important;
  flex:0 0 auto;
}
/* /v5 underline alignment hotfix */


/* v5 modal + underline final fix */
.category-link::after{
  height:3px !important;
}

.utility-auth::after{
  height:3px !important;
}

.utility-auth:hover::after,
.utility-auth:focus-visible::after,
.utility-auth[aria-expanded="true"]::after,
.category-link:hover::after,
.category-link:focus-visible::after,
.category-link.active::after{
  width:100% !important;
}

.auth-panel .auth-telegram-block{
  margin-top:14px;
}

.auth-panel .auth-telegram-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:48px;
  padding:0 16px;
  border:1px solid var(--line);
  color:var(--text);
  text-decoration:none;
  background:#fff;
}

.auth-panel .auth-telegram-btn:hover{
  background:#f6f2ec;
}
/* /v5 modal + underline final fix */



/* v6 underline weight tune */
.category-link::after,
.utility-auth::after{
  height:2px !important;
}
/* /v6 underline weight tune */


/* v7 underline fine tune */
.category-link::after,
.utility-auth::after{
  height:1.5px !important;
}
/* /v7 underline fine tune */


.guide-dialog-wide{width:min(1180px, calc(100vw - 48px));max-height:min(92vh, 980px);overflow:auto;padding:34px 34px 28px}
.guide-header{display:grid;gap:10px;padding-right:28px}
.guide-header h3{margin:0;font-family:"Cormorant Garamond", Georgia, serif;font-size:46px;line-height:1}
.guide-header p{margin:0;color:var(--muted);max-width:760px}
.guide-block{display:grid;gap:18px;margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
.guide-block:first-of-type{margin-top:18px}
.guide-block-head{display:grid;gap:8px}
.guide-block-head h4{margin:0;font-size:22px;font-family:"Cormorant Garamond", Georgia, serif;font-weight:600}
.guide-block-head p{margin:0;color:var(--muted)}
.guide-examples-grid{display:grid;gap:16px}
.guide-examples-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.guide-example-card{background:var(--surface-2);border:1px solid var(--line);padding:14px;display:grid;gap:12px}
.guide-example-card-bad{background:#fcf6f5;border-color:#e7d6d4}
.guide-example-card img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--surface-3)}
.guide-example-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.45}
.guide-example-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.guide-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;border:1px solid var(--line)}
.guide-badge.good{background:#eef5ef;border-color:#cfdfd1;color:#2c6b3f}
.guide-badge.bad{background:#fbefee;border-color:#ead2d2;color:#9d3d3d}
.guide-cloth-groups{display:grid;gap:18px}
.guide-cloth-group{display:grid;gap:12px}
.guide-cloth-title{font-size:14px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.guide-footer-note{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
@media (max-width: 980px){.guide-examples-grid-2{grid-template-columns:1fr}.guide-dialog-wide{width:min(100vw - 20px, 900px);padding:22px 18px 20px}.guide-header h3{font-size:38px}}


/* safe UX patch 2026-04-14 */
.tryon-subgrid-3 .upload-card input[type="file"]{margin-bottom:10px}
.tryon-subgrid-3 .upload-card .upload-controls{margin-top:0}
.tryon-subgrid-3 .upload-card .action-row.spaced-controls{gap:10px}

.billing-grid-sticky{--billing-panel-height:auto}
.billing-left-panel,
.billing-right-scroll{box-sizing:border-box}
.billing-right-scroll{align-self:start}
.billing-right-scroll > .billing-stack-fill{min-height:100%}

.account-menu-wrap-inline{
  align-items:center;
  gap:12px;
}
.account-menu-inline{
  top:50%;
  right:calc(100% + 12px);
  transform:translateY(-50%);
  min-width:148px;
  padding:8px;
}
.account-menu-inline[hidden]{display:none !important}
.account-menu-inline .account-menu-item{
  white-space:nowrap;
  border-radius:12px;
}
@media (max-width: 960px){
  .account-menu-inline{
    top:calc(100% + 10px);
    right:0;
    transform:none;
  }
}

.profile-hero-polished{
  align-items:start;
}
.profile-layout-polished{
  display:grid;
  gap:24px;
}
.profile-mode-banner{
  padding:18px 20px;
  line-height:1.7;
}
.profile-facts-list{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.profile-facts-list .benefit-card{
  min-height:132px;
  border-radius:0;
  padding:20px 22px;
  box-shadow:none;
}
.profile-facts-list .benefit-card strong{
  font-size:16px;
  margin-bottom:10px;
}
.profile-facts-list .benefit-card span{
  line-height:1.75;
}
.profile-form-card,
.profile-telegram-panel{
  padding:22px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:0;
}
.profile-telegram-panel{
  display:grid;
  gap:16px;
}
.profile-telegram-copy{
  color:var(--muted);
  line-height:1.7;
}
.profile-telegram-actions{
  margin:0;
}
.profile-section-status{
  margin-top:-6px;
}
.profile-simple-form.account-form{
  gap:16px;
}
.profile-simple-form.account-form label{
  display:grid;
  gap:8px;
}
.profile-simple-form.account-form button{
  margin-top:6px;
}
@media (max-width: 960px){
  .profile-facts-list{grid-template-columns:1fr}
}


/* 2026-04-14 phone UX refinement */
@media (max-width: 640px){
  .store-header{margin-bottom:12px}
  .utility-bar,
  .utility-bar.utility-bar-simple{
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:16px;
    min-height:auto;
    padding:14px 16px 12px;
    border-bottom:0;
  }
  .store-brand{
    font-size:30px;
    padding-left:0;
    margin-left:0;
  }
  .utility-right,
  .utility-right.utility-right-simple{
    justify-content:flex-end;
    padding-right:0;
  }
  .utility-auth{padding-right:0}
  .category-bar{display:none}
  .page-intro,
  .guess-hero,
  .tryon-compact-head{margin-top:0}
  .guess-hero{min-height:auto}
  .guess-hero-overlay{padding:24px 20px 26px}
  .overview-mini-points{
    justify-content:center;
    align-items:center;
    gap:10px;
  }
  .overview-mini-points span{
    justify-content:center;
    text-align:center;
    min-width:calc(50% - 5px);
  }
  .tryon-compact-head.tryon-head-clean{
    display:block;
    padding-top:26px;
    padding-bottom:22px;
  }
  .tryon-head-clean .title-wrap{
    width:100%;
    max-width:none;
    margin:0;
    text-align:left;
  }
  .tryon-head-clean .eyebrow,
  .tryon-head-clean .title,
  .tryon-head-clean .subtitle{
    text-align:left;
    margin-left:0;
    margin-right:0;
  }
  .tryon-head-clean .title{
    max-width:none;
    text-wrap:auto;
  }
  .tryon-head-clean .subtitle{
    max-width:none;
    text-wrap:auto;
  }
  .tryon-head-clean .tryon-head-actions{
    width:100%;
    justify-content:center;
    margin-top:18px;
  }
  .tryon-head-clean .help-button{
    margin-left:auto;
    margin-right:auto;
  }
  .result-wrap,
  .result-wrap-large{
    min-height:auto;
    align-content:start;
    gap:10px;
  }
  .result-wrap .action-row,
  .result-wrap-large .action-row{
    justify-content:center;
    gap:12px;
    margin-top:4px;
  }
  .result-wrap .button-link,
  .result-wrap .secondary,
  .result-wrap-large .button-link,
  .result-wrap-large .secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    min-height:52px;
  }
  .profile-hero-refined,
  .profile-hero-polished{
    align-items:start;
  }
  .profile-hero-refined .title,
  .profile-hero-polished .title{
    white-space:nowrap;
  }
}


/* 2026-04-14 tablet hero + result actions final fix */
@media (min-width: 768px) and (max-width: 1180px){
  .dashboard-hero-grid{
    grid-template-columns:1fr !important;
  }
  .dashboard-sales-copy h1{
    font-size:52px !important;
    line-height:1.02 !important;
    max-width:15.5ch !important;
    text-wrap:balance !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    hyphens:none !important;
  }
  .dashboard-sales-copy p{
    max-width:62ch !important;
  }
}

#resultWrap .action-row,
.result-wrap .action-row,
.result-wrap-large .action-row{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center !important;
  gap:12px;
  flex-wrap:wrap;
}

#resultWrap .button-link,
.result-wrap .button-link,
.result-wrap-large .button-link{
  min-width:180px;
}
/* /2026-04-14 tablet hero + result actions final fix */

/* 2026-04-18 full homepage redesign */
body[data-section="dashboard"]{
  background:#000;
  color:#fff;
}
body[data-section="dashboard"] *{box-sizing:border-box}
body[data-section="dashboard"] a{color:inherit;text-decoration:none}
.home-landing{
  min-height:100vh;
  background:#000;
  display:flex;
  flex-direction:column;
}
.home-landing__topbar{
  height:74px;
  background:#000;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 36px 0 18px;
  flex:0 0 74px;
}

.home-landing__brand-wrap{
  display:flex;
  align-items:center;
  gap:18px;
}
.home-landing__avatar-wrap{
  position:relative;
  display:flex;
  align-items:center;
}
.home-landing__avatar-btn{
  width:46px;
  height:46px;
  padding:0;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  display:grid;
  place-items:center;
  overflow:hidden;
  cursor:pointer;
}
.home-landing__avatar-btn:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.40);
}
.home-landing__avatar-btn:focus-visible{
  outline:2px solid rgba(255,255,255,.65);
  outline-offset:2px;
}
.home-landing__avatar-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.home-landing__avatar-placeholder{
  width:18px;
  height:18px;
  border:1.5px solid rgba(255,255,255,.92);
  border-radius:999px;
  position:relative;
}
.home-landing__avatar-placeholder::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;
  width:24px;
  height:14px;
  border:1.5px solid rgba(255,255,255,.92);
  border-top-left-radius:14px;
  border-top-right-radius:14px;
  border-bottom:none;
  transform:translateX(-50%);
}
.home-landing__avatar-menu{
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  min-width:150px;
  padding:8px;
  border:1px solid rgba(255,255,255,.12);
  background:#000;
  box-shadow:0 16px 36px rgba(0,0,0,.22);
  z-index:30;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%, -6px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
}
.home-landing__avatar-menu.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%, 0);
}
.home-landing__avatar-menu-btn{
  width:100%;
  min-height:42px;
  padding:0 14px;
  border:0;
  background:transparent;
  color:#fff;
  text-align:left;
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
}
.home-landing__avatar-menu-btn:hover{
  background:rgba(255,255,255,.08);
}
.home-landing__brand{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:28px;
  font-weight:600;
  letter-spacing:.01em;
}
.home-landing__nav{
  display:flex;
  align-items:center;
  gap:38px;
}
.home-landing__nav-link{
  font-family:Inter,Arial,sans-serif;
  font-size:13px;
  font-weight:500;
  line-height:1;
  opacity:.96;
  cursor:default;
  pointer-events:none;
}
.home-landing__hero{
  position:relative;
  flex:1 1 auto;
  min-height:calc(100vh - 118px);
  background:
    linear-gradient(rgba(0,0,0,.05), rgba(0,0,0,.05)),
    url('/static/img/homepage-hero-bg.png') center center / cover no-repeat;
  overflow:hidden;
}
.home-landing__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.08) 100%);
}
.home-landing__content{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:40px 24px 74px;
  text-align:center;
}
.home-landing__eyebrow{
  margin-bottom:8px;
  font-family:Inter,Arial,sans-serif;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  color:#fff;
}
.home-landing__title{
  margin:0;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:38px;
  line-height:1.34;
  font-weight:600;
  color:#fff;
  text-wrap:balance;
  max-width:900px;
}
.home-landing__footer{
  min-height:44px;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 20px;
  flex:0 0 44px;
}
.home-landing__footer-text{
  font-family:Inter,Arial,sans-serif;
  font-size:13px;
  font-weight:600;
  color:#fff;
  text-align:center;
}
@media (max-width: 1024px){
  .home-landing__topbar{
    padding:0 24px;
  }
  .home-landing__nav{gap:22px}
  .home-landing__title{
    font-size:34px;
    max-width:760px;
  }
}
@media (max-width: 720px){
  .home-landing__topbar{
    height:auto;
    padding:18px 18px 16px;
    gap:16px;
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .home-landing__nav{
    width:100%;
    justify-content:flex-start;
    gap:18px;
    flex-wrap:wrap;
  }
  .home-landing__hero{
    min-height:calc(100vh - 150px);
    background-position:center center;
  }
  .home-landing__content{padding:28px 18px 40px}
  .home-landing__eyebrow{font-size:13px;margin-bottom:10px}
  .home-landing__title{
    font-size:28px;
    line-height:1.28;
    max-width:100%;
  }
}

@media (max-width: 900px){
  .home-landing__topbar{padding:0 20px;gap:18px;height:76px}
  .home-landing__brand-wrap{gap:14px}
  .home-landing__avatar-btn{width:40px;height:40px}
  .home-landing__avatar-menu{left:50%;min-width:138px;transform:translate(-50%, -6px)}
}


/* Recovery nav patch */
.home-landing__nav{display:flex;align-items:center;gap:34px;flex-wrap:nowrap;}
.home-landing__nav-divider{color:rgba(255,255,255,.72);font-size:22px;line-height:1;display:inline-flex;align-items:center;margin:0 -10px;}
.home-landing__avatar-menu-btn{display:flex;align-items:center;justify-content:flex-start;text-decoration:none;}


.history-ref-page{
  min-height:100vh;
  background:#000;
  display:flex;
  flex-direction:column;
}
.history-ref__topbar{flex:0 0 74px}
.history-ref-main{
  position:relative;
  flex:1 1 auto;
  overflow:hidden;
}
.history-ref-bg{
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(0,0,0,.26), rgba(0,0,0,.26)), url('/static/img/homepage-hero-bg.png') center center / cover no-repeat;
}
.history-ref-shell{
  position:relative;
  z-index:1;
  padding:30px 165px 18px;
  display:flex;
  flex-direction:column;
  min-height:100%;
  box-sizing:border-box;
}
.history-ref-controls{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:16px;
}
.history-ref-title{
  margin:0 0 16px;
  font-family:Inter, Arial, sans-serif;
  font-size:27px;
  font-weight:700;
  line-height:1.15;
}
.history-ref-filter{display:block;width:278px;position:relative;}
.history-ref-filter select{
  width:100%;height:54px;padding:0 50px 0 18px;border:1px solid rgba(255,255,255,.6);background:rgba(0,0,0,.16);color:#fff;border-radius:0;appearance:none;font-size:16px;font-weight:600;outline:none;
}
.history-ref-filter::after{content:'⌄';position:absolute;right:18px;top:50%;transform:translateY(-52%);font-size:26px;color:#fff;pointer-events:none}
.history-ref-favorites-btn,.history-ref-openall{
  min-height:54px;
  padding:0 18px;
  border:1px solid rgba(255,255,255,.62);
  background:rgba(0,0,0,.16);
  color:#fff;
  font-size:15px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:14px;
  cursor:pointer;
}
.history-ref-favorites-btn.is-active{background:rgba(255,255,255,.12)}
.history-ref-star{font-size:28px;line-height:1}
.history-ref-board{
  border:1px solid rgba(255,255,255,.56);
  min-height:460px;
  background:rgba(0,0,0,.08);
}
.history-ref-list{display:flex;flex-direction:column;}
.history-ref-row{
  min-height:171px;
  display:grid;
  grid-template-columns: 260px 210px 24px minmax(0,1fr);
  align-items:center;
  column-gap:0;
  border-bottom:1px solid rgba(255,255,255,.42);
  padding:0 14px 0 14px;
  box-sizing:border-box;
}
.history-ref-row:last-child{border-bottom:none}
.history-ref-preview{width:244px;height:144px;object-fit:cover;display:block;background:#111}
.history-ref-preview--empty{background:rgba(255,255,255,.04)}
.history-ref-meta-col{display:flex;flex-direction:column;align-items:flex-start;gap:8px;color:#fff;}
.history-ref-type{padding:4px 10px;border:1px solid rgba(255,255,255,.72);font-size:14px;font-weight:700;line-height:1;border-radius:4px;background:rgba(0,0,0,.22)}
.history-ref-date,.history-ref-time{font-size:18px;font-weight:700;line-height:1.2}
.history-ref-divider{width:1px;height:72px;background:rgba(255,255,255,.66);justify-self:center}
.history-ref-actions-col{
  display:grid;
  grid-template-columns: repeat(4, minmax(92px, 1fr));
  justify-items:center;
  align-items:center;
  column-gap:70px;
  padding:0 40px 0 48px;
}
.history-ref-action{
  color:#fff;
  text-decoration:none;
  border:none;
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  cursor:pointer;
  min-width:92px;
}
.history-ref-action[aria-disabled="true"]{opacity:.32;pointer-events:none}
.history-ref-action-icon{font-size:33px;line-height:1;min-height:34px;display:flex;align-items:center;justify-content:center}
.history-ref-action-label{font-size:15px;font-weight:600;line-height:1.1;text-align:center}
.history-ref-delete-btn .history-ref-action-label{text-transform:none}
.history-ref-favorite-toggle.is-favorite .history-ref-action-icon{color:#fff}
.history-ref-empty{
  min-height:460px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:18px;font-weight:700;color:#fff;padding:20px;
}
.history-ref-bottom-actions{display:flex;justify-content:flex-end;padding-top:14px}
.history-ref-openall[hidden]{display:none !important}
.history-ref__footer{flex:0 0 44px}

@media (max-width: 1500px){
  .history-ref-shell{padding-left:90px;padding-right:90px}
  .history-ref-actions-col{column-gap:44px;padding-left:28px;padding-right:24px}
}

.nav-admin-divider{color:rgba(255,255,255,.72);font-size:22px;line-height:1;display:inline-flex;align-items:center;margin:0 -10px;}


/* 2026-04-18 unified dark storefront */
:root{
  --bg:#000;
  --bg-soft:rgba(255,255,255,.04);
  --surface:rgba(0,0,0,.46);
  --surface-2:rgba(0,0,0,.34);
  --surface-3:rgba(255,255,255,.04);
  --text:#fff;
  --muted:rgba(255,255,255,.72);
  --line:rgba(255,255,255,.48);
  --line-strong:rgba(255,255,255,.72);
  --accent:#fff;
  --accent-soft:rgba(255,255,255,.08);
  --success:rgba(108,255,170,.14);
  --warn:rgba(255,214,102,.14);
  --danger:rgba(255,110,110,.14);
  --shell-pad:28px;
}
html,
body{
  background:#000;
  color:#fff;
}

body.app-dark-shell{
  min-height:100vh;
  background:#000;
  color:#fff;
}

body.app-dark-shell .site-scene{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  position:relative;
  isolation:isolate;
  background:#000;
}

body.app-dark-shell .site-scene__backdrop{
  position:fixed;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.38) 100%),
    url('/static/img/homepage-hero-bg.png') center center / cover no-repeat;
  z-index:-2;
}

body[data-section="dashboard"] .site-scene__backdrop{
  background:
    linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.16) 100%),
    url('/static/img/homepage-hero-bg.png') center center / cover no-repeat;
}

body.app-dark-shell .site-scene::after{
  content:"";
  position:fixed;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.14) 100%);
  pointer-events:none;
  z-index:-1;
}

.site-header{
  padding:0;
  background:#000;
}

.site-header__inner{
  min-height:74px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.site-header__brand-wrap{
  display:flex;
  align-items:center;
  gap:18px;
  position:relative;
}

.site-header__avatar-wrap{
  position:relative;
}

.site-header__avatar-btn{
  width:46px;
  height:46px;
  padding:0;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  display:grid;
  place-items:center;
  overflow:hidden;
  color:#fff;
}

.site-header__avatar-btn:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.44);
}

.site-header__avatar-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.site-header__avatar-placeholder{
  width:18px;
  height:18px;
  border:1.5px solid rgba(255,255,255,.92);
  border-radius:999px;
  position:relative;
}

.site-header__avatar-placeholder::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;
  width:24px;
  height:14px;
  border:1.5px solid rgba(255,255,255,.92);
  border-top-left-radius:14px;
  border-top-right-radius:14px;
  border-bottom:none;
  transform:translateX(-50%);
}

.site-header__brand{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:28px;
  font-weight:600;
  letter-spacing:.01em;
  color:#fff;
}

.site-header__nav{
  display:flex;
  align-items:center;
  gap:34px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.site-header__nav-link{
  font-size:13px;
  font-weight:600;
  line-height:1;
  color:rgba(255,255,255,.94);
}

.site-header__nav-link.is-active{
  color:#fff;
}

.site-header__nav-divider{
  color:rgba(255,255,255,.78);
  font-size:22px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  margin:0 -12px;
}

.site-main{
  flex:1 1 auto;
  padding:18px 0 24px;
}

.shell,
.shell.shell-wide{
  width:100%;
  max-width:none;
  padding:0 68px 28px;
}

.site-footer{
  min-height:44px;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 20px;
}

.site-footer__text{
  font-size:13px;
  font-weight:600;
  color:#fff;
  text-align:center;
}

.card{
  background:rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.50);
  backdrop-filter:blur(2px);
}

.status{
  color:#fff;
  font-size:14px;
  line-height:1.45;
}

.site-account-menu{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:172px;
  padding:8px;
  border:1px solid rgba(255,255,255,.16);
  background:#000;
  box-shadow:0 16px 36px rgba(0,0,0,.32);
  z-index:40;
}

.account-menu-item{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:0 14px;
  border:0;
  background:transparent;
  color:#fff;
  text-align:left;
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
}

.account-menu-item:hover{
  background:rgba(255,255,255,.08);
}

button,
.button-link,
.auth-social-btn,
.auth-telegram-btn{
  border-radius:6px;
}

button,
.button-link{
  background:rgba(255,255,255,.94);
  color:#111;
  border:1px solid rgba(255,255,255,.80);
}

button.secondary,
button.ghost,
.button-link.secondary,
.history-ref-action,
.history-ref-favorites-btn,
.history-ref-openall,
.help-button{
  background:rgba(0,0,0,.18);
  color:#fff;
  border:1px solid rgba(255,255,255,.58);
}

button.secondary:hover,
button.ghost:hover,
.button-link.secondary:hover,
.history-ref-action:hover,
.history-ref-favorites-btn:hover,
.history-ref-openall:hover,
.help-button:hover{
  background:rgba(255,255,255,.08);
}

select,
input,
textarea{
  background:rgba(0,0,0,.22);
  color:#fff;
  border:1px solid rgba(255,255,255,.54);
}

select option{
  color:#111;
}

.auth-modal-dialog.card{
  background:#050505;
  border-color:rgba(255,255,255,.25);
}

.auth-modal .title,
.auth-modal .subtitle,
.auth-modal label span,
.auth-recovery-note,
.auth-panel .status{
  color:#fff;
}

.auth-modal input{
  background:rgba(255,255,255,.05);
  color:#fff;
  border:1px solid rgba(255,255,255,.24);
}

.promo-bar,
.store-header,
.mobile-dock,
.tryon-center-status,
#headerTryonStatus{
  display:none !important;
}

/* dashboard */
body[data-section="dashboard"] .site-main{
  padding:0;
}

body[data-section="dashboard"] .shell.shell-wide{
  padding:0 0 24px;
}

.home-hero-panel{
  min-height:calc(100vh - 74px - 44px);
  display:grid;
  place-items:center;
  padding:70px 24px 54px;
  text-align:center;
}

.home-hero-panel__inner{
  display:grid;
  gap:16px;
}

.home-hero-panel__eyebrow{
  font-size:14px;
  font-weight:700;
  color:#fff;
}

.home-hero-panel__title{
  margin:0;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:66px;
  line-height:1.18;
  font-weight:600;
  color:#fff;
  text-wrap:balance;
  max-width:780px;
}

/* billing */
.billing-ref-page{
  width:min(100%, 1470px);
  margin:0 auto;
  padding-top:18px;
}

.billing-ref-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}

.billing-ref-eyebrow{
  font-size:15px;
  font-weight:700;
  color:#fff;
  opacity:.92;
}

.billing-ref-title{
  margin:12px 0 0;
  font-size:54px;
  line-height:1;
  font-weight:700;
  color:#fff;
}

.billing-ref-balance-box{
  min-width:208px;
  padding:16px 18px;
  border:1px solid rgba(255,255,255,.58);
  background:rgba(18,14,10,.28);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  display:grid;
  gap:6px;
}

.billing-ref-balance-box span{
  font-size:13px;
  font-weight:700;
  opacity:.82;
}

.billing-ref-balance-box strong{
  font-size:28px;
  line-height:1.1;
  font-weight:700;
}

.billing-ref-status{
  margin-bottom:20px;
  color:rgba(255,255,255,.84);
}

.billing-ref-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(216px, 252px));
  gap:28px;
  align-items:stretch;
  justify-content:space-between;
}

.billing-ref-card{
  min-height:560px;
  border:1px solid rgba(255,255,255,.58);
  background:rgba(18,14,10,.28);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  padding:34px 22px 22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.billing-ref-card-icon{
  width:74px;
  height:74px;
  margin-bottom:18px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.billing-ref-card-icon svg{
  width:100%;
  height:100%;
  stroke:#fff;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
  opacity:.96;
}

.billing-ref-card-count{
  font-size:52px;
  line-height:1;
  font-weight:500;
  color:#fff;
  margin-bottom:10px;
}

.billing-ref-card-unit{
  font-size:16px;
  line-height:1.1;
  font-weight:700;
  text-transform:lowercase;
  color:#fff;
}

.billing-ref-card-divider{
  width:96px;
  height:1px;
  background:rgba(255,255,255,.72);
  margin:30px 0 24px;
}

.billing-ref-card-price{
  font-size:46px;
  line-height:1;
  font-weight:500;
  color:#fff;
  margin-bottom:12px;
}

.billing-ref-card-meta{
  font-size:13px;
  line-height:1.35;
  color:rgba(255,255,255,.88);
  margin-bottom:18px;
}

.billing-ref-card-name{
  margin-top:auto;
  margin-bottom:18px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  color:rgba(255,255,255,.74);
  min-height:18px;
}

.billing-ref-buy{
  width:100%;
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
  font-weight:700;
  background:#eceaea;
  color:#1a1a1a;
}

.billing-ref-security{
  display:grid;
  place-items:center;
  gap:18px;
  padding:28px 0 0;
}

.billing-ref-security-text{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:15px;
  font-weight:700;
  color:#fff;
}

.billing-ref-security-text svg{
  width:24px;
  height:24px;
  stroke:#fff;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}

.billing-ref-logos{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:30px;
  flex-wrap:wrap;
  color:rgba(255,255,255,.88);
  font-size:28px;
  font-weight:800;
  letter-spacing:-.03em;
}

.billing-ref-extra-grid{
  display:grid;
  grid-template-columns:minmax(320px, .82fr) minmax(0, 1.18fr);
  gap:24px;
  margin-top:48px;
  align-items:start;
}

.billing-ref-extra-card{
  border:1px solid rgba(255,255,255,.72);
  border-radius:12px;
  background:rgba(18,14,10,.28);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  padding:24px;
}

.billing-ref-extra-card h2{
  margin:0 0 18px;
  font-size:24px;
  line-height:1.1;
  color:#fff;
}

.payment-item{
  border:1px solid rgba(255,255,255,.20);
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  padding:18px;
}

.payment-item + .payment-item{
  margin-top:12px;
}

.payment-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px;
}

.payment-top strong{
  color:#fff;
}

.payment-item .meta{
  color:rgba(255,255,255,.84);
  line-height:1.5;
}

.payment-item .action-row{
  margin-top:14px;
}

.payment-badge{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.24);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.payment-badge.success{
  border-color:rgba(117,255,168,.48);
  color:#a8ffbf;
}

.payment-badge.pending{
  border-color:rgba(255,240,166,.48);
  color:#fff0a8;
}

.payment-badge.failed{
  border-color:rgba(255,154,154,.48);
  color:#ffb1b1;
}

/* profile */
.profile-ref-page{
  width:min(100%, 1400px);
  margin:0 auto;
  max-width:1400px;
  display:grid;
  gap:28px;
  padding-top:12px;
}

.profile-ref-panel{
  border:1px solid rgba(255,255,255,.58);
  background:rgba(18,14,10,.28);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  padding:26px 28px 24px;
}

.profile-ref-panel--hero{
  padding-bottom:34px;
}

.profile-ref-page-title{
  margin:0 0 28px;
  font-size:28px;
  line-height:1;
  font-weight:700;
  color:#fff;
}

.profile-ref-identity{
  display:flex;
  align-items:center;
  gap:26px;
}

.profile-ref-avatar{
  width:120px;
  height:120px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.44);
  overflow:hidden;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.03);
  flex:0 0 120px;
}

.profile-ref-avatar-btn{
  position:relative;
  width:100%;
  height:100%;
  border:0;
  padding:0;
  border-radius:inherit;
  background:transparent;
  overflow:hidden;
  cursor:pointer;
}

.profile-ref-avatar-btn::after{
  content:"Изменить";
  position:absolute;
  left:50%;
  bottom:8px;
  transform:translateX(-50%);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.54);
  background:rgba(0,0,0,.52);
  color:#fff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  opacity:0;
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}

.profile-ref-avatar-btn:hover::after,
.profile-ref-avatar-btn:focus-visible::after{
  opacity:1;
  transform:translateX(-50%) translateY(-1px);
}

.profile-ref-avatar-btn:focus-visible{
  outline:1px solid rgba(255,255,255,.82);
  outline-offset:3px;
}

.profile-ref-avatar-btn.is-uploading{
  cursor:progress;
}

.profile-ref-avatar-btn.is-uploading::after{
  content:"Загрузка…";
  opacity:1;
}

.profile-ref-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.profile-ref-avatar-placeholder{
  width:48px;
  height:48px;
  border:2px solid rgba(255,255,255,.9);
  border-radius:999px;
  position:relative;
}

.profile-ref-avatar-placeholder::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-18px;
  width:66px;
  height:34px;
  border:2px solid rgba(255,255,255,.9);
  border-top-left-radius:34px;
  border-top-right-radius:34px;
  border-bottom:none;
  transform:translateX(-50%);
}

.profile-ref-avatar-note{
  margin-top:10px;
  font-size:13px;
  line-height:1.35;
  color:rgba(255,255,255,.72);
}

.profile-ref-identity-copy{
  display:grid;
  gap:10px;
}

.profile-ref-name{
  font-size:42px;
  line-height:1;
  font-weight:700;
  color:#fff;
}

.profile-ref-handle{
  font-size:30px;
  line-height:1;
  color:rgba(255,255,255,.86);
}

.profile-ref-panel-title{
  margin:0 0 18px;
  font-size:26px;
  line-height:1.05;
  font-weight:700;
  color:#fff;
}

.profile-ref-form{
  display:grid;
  gap:0;
}

.profile-ref-row,
.profile-ref-password-trigger{
  width:100%;
  display:grid;
  grid-template-columns:160px minmax(0, 1fr) 44px;
  align-items:center;
  gap:18px;
  min-height:76px;
  border-bottom:1px solid rgba(255,255,255,.52);
}

.profile-ref-label{
  font-size:16px;
  font-weight:600;
  color:rgba(255,255,255,.88);
}

.profile-ref-row input{
  width:100%;
  min-width:0;
  height:auto;
  padding:0;
  border:0;
  background:transparent;
  color:#fff;
  font-size:18px;
  font-weight:600;
  box-shadow:none;
}

.profile-ref-row input::placeholder{
  color:rgba(255,255,255,.34);
}

.profile-ref-row input:focus{
  outline:none;
}

.profile-ref-edit{
  width:44px;
  height:44px;
  padding:0;
  border:0;
  background:transparent;
  display:grid;
  place-items:center;
  color:#fff;
}

.profile-ref-edit svg{
  width:22px;
  height:22px;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}

.profile-ref-save{
  justify-self:start;
  min-width:240px;
  margin-top:20px;
  min-height:54px;
  padding:0 24px;
  font-size:16px;
  font-weight:700;
}

.profile-ref-status{
  margin-top:16px;
  color:rgba(255,255,255,.82);
}

.profile-ref-password-trigger{
  padding:0;
  border:0;
  background:transparent;
  text-align:left;
  color:#fff;
}

.profile-ref-password-trigger .profile-ref-edit{
  border:0;
}

.profile-ref-password-mask{
  font-size:18px;
  font-weight:600;
  color:#fff;
}

.profile-ref-password-form{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr)) auto;
  gap:16px;
  margin-top:18px;
}

.profile-ref-password-form label{
  display:grid;
  gap:8px;
}

.profile-ref-password-form label span{
  font-size:13px;
  font-weight:700;
  color:rgba(255,255,255,.84);
}

.profile-ref-password-form input{
  height:48px;
  padding:0 14px;
}

.profile-ref-password-form button{
  align-self:end;
  min-height:48px;
  padding:0 20px;
  font-size:15px;
  font-weight:700;
}

.profile-ref-actions{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  margin-top:22px;
}

.profile-ref-action{
  min-width:256px;
  min-height:58px;
  padding:0 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  border:1px solid rgba(255,255,255,.60);
  background:rgba(0,0,0,.12);
  color:#fff;
  font-size:16px;
  font-weight:700;
}

.profile-ref-action svg{
  width:22px;
  height:22px;
  stroke:#fff;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}

/* history */
.history-ref-shell--embedded{
  width:min(100%, 1480px);
  margin:0 auto;
  padding:18px 0 0;
}

.history-ref-controls{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding-top:10px;
}

.history-ref-lefthead{
  display:grid;
  gap:14px;
}

.history-ref-title{
  margin:0;
  font-size:28px;
  line-height:1;
  font-weight:700;
  color:#fff;
}

.history-ref-filter{
  display:block;
  width:344px;
  position:relative;
}

.history-ref-filter select{
  width:100%;
  height:54px;
  padding:0 54px 0 18px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:10px;
  background:rgba(14,11,8,.26);
  color:#fff;
  font-size:17px;
  font-weight:500;
  appearance:none;
}

.history-ref-filter::after{
  content:'';
  position:absolute;
  right:22px;
  top:50%;
  width:10px;
  height:10px;
  border-right:2px solid rgba(255,255,255,.94);
  border-bottom:2px solid rgba(255,255,255,.94);
  transform:translateY(-68%) rotate(45deg);
  pointer-events:none;
}

.history-ref-favorites-btn,
.history-ref-openall{
  min-width:206px;
  min-height:54px;
  padding:0 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:10px;
  background:rgba(14,11,8,.26);
  color:#fff;
  font-size:16px;
  font-weight:700;
}

.history-ref-favorites-btn.is-active{
  background:rgba(255,255,255,.10);
}

.history-ref-star{
  font-size:30px;
  line-height:1;
}

.history-ref-board{
  margin-top:18px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:12px;
  background:rgba(14,11,8,.24);
  backdrop-filter:blur(2px);
  overflow:hidden;
}

.history-ref-list{
  display:flex;
  flex-direction:column;
}

.history-ref-row{
  display:grid;
  grid-template-columns:260px 240px 1px minmax(0, 1fr);
  align-items:center;
  gap:20px;
  padding:12px 10px 12px 12px;
  border-bottom:1px solid rgba(255,255,255,.22);
}

.history-ref-row:last-child{
  border-bottom:none;
}

.history-ref-preview{
  width:244px;
  height:144px;
  object-fit:cover;
  display:block;
  background:#111;
}

.history-ref-preview--empty{
  background:rgba(255,255,255,.04);
}

.history-ref-meta-col{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  color:#fff;
}

.history-ref-type{
  padding:4px 10px;
  border:1px solid rgba(255,255,255,.72);
  font-size:14px;
  font-weight:700;
  line-height:1;
  border-radius:4px;
  background:rgba(0,0,0,.22);
}

.history-ref-date,
.history-ref-time{
  font-size:17px;
  font-weight:700;
  line-height:1.2;
}

.history-ref-divider{
  width:1px;
  height:78px;
  background:rgba(255,255,255,.66);
}

.history-ref-actions-col{
  display:grid;
  grid-template-columns:repeat(4, minmax(112px, 1fr));
  gap:14px;
  align-items:stretch;
}

.history-ref-action{
  min-height:120px;
  padding:12px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  border:0;
  background:transparent;
  color:#fff;
}

.history-ref-action[aria-disabled="true"]{
  opacity:.32;
  pointer-events:none;
}

.history-ref-action-icon{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.history-ref-action-icon svg{
  width:100%;
  height:100%;
  stroke:#fff;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}

.history-ref-favorite-toggle.is-favorite .history-ref-action-icon svg{
  fill:#fff;
  stroke:#fff;
}

.history-ref-action-label{
  font-size:15px;
  font-weight:600;
  line-height:1.1;
  text-align:center;
}

.history-ref-empty{
  padding:28px 24px;
  color:#fff;
}

.history-ref-bottom-actions{
  display:flex;
  justify-content:center;
  padding-top:16px;
}

.history-ref-openall[hidden]{
  display:none !important;
}

/* tryon */
.tryon-ref-page{
  width:min(100%, 1490px);
  margin:0 auto;
  padding-top:6px;
}

.tryon-ref-grid{
  display:grid;
  grid-template-columns:minmax(0, 652px) minmax(0, 1fr);
  gap:24px;
  align-items:stretch;
}

.tryon-ref-left,
.tryon-ref-result-card{
  border:1px solid rgba(255,255,255,.82);
  border-radius:13px;
  background:rgba(14,11,8,.30);
  padding:22px;
  backdrop-filter:blur(2px);
}

.tryon-ref-left{
  display:flex;
  flex-direction:column;
  min-height:100%;
  padding-bottom:20px;
}

.tryon-ref-left-sections{
  display:flex;
  flex:1;
  min-height:0;
  flex-direction:column;
  justify-content:space-between;
}

.tryon-ref-left-footer{
  display:grid;
  gap:14px;
  margin-top:24px;
}

.tryon-ref-step{
  border:0;
  background:transparent;
  padding:0;
}

.tryon-ref-step + .tryon-ref-step{
  padding-top:16px;
}

.tryon-ref-step h2,
.tryon-ref-result-card h2{
  margin:0;
  color:#fff;
  font-size:18px;
  line-height:1.2;
  font-weight:700;
}

.tryon-ref-upload-grid{
  display:grid;
  gap:16px;
  margin-top:16px;
}

.tryon-ref-upload-grid-2{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.tryon-ref-upload-grid-3{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.tryon-ref-drop{
  position:relative;
  overflow:hidden;
  min-height:142px;
  border:1px solid rgba(255,255,255,.74);
  border-radius:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#fff;
  background:rgba(255,255,255,.03);
  cursor:pointer;
  text-align:center;
  padding:16px 10px;
}

.tryon-ref-drop::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--uploaded-preview, none);
  background-position:center center;
  background-size:var(--uploaded-preview-size, contain);
  background-repeat:no-repeat;
  background-color:rgba(16,12,8,.20);
  opacity:0;
  transition:opacity .18s ease;
  pointer-events:none;
}

.tryon-ref-drop.has-preview::before{
  opacity:1;
}

.tryon-ref-drop:hover,
.tryon-ref-drop:focus-visible{
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.90);
  outline:none;
}

.tryon-ref-drop.is-ready{
  background:rgba(255,255,255,.02);
}

.tryon-ref-drop.has-preview > :not(.tryon-ref-delete-chip){
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.tryon-ref-drop > *{
  position:relative;
  z-index:1;
}

.tryon-ref-drop::after{display:none}
.tryon-ref-upload-grid-2 .tryon-ref-drop{
  min-height:176px;
}

.tryon-ref-upload-grid-3 .tryon-ref-drop{
  min-height:142px;
}


.tryon-ref-drop-icon,
.tryon-ref-cloth-icon{
  width:54px;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 6px;
}

.tryon-ref-drop-icon svg,
.tryon-ref-cloth-icon svg{
  width:100%;
  height:100%;
  stroke:#fff;
  stroke-width:2.1;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}

.tryon-ref-drop-title{
  font-size:16px;
  font-weight:700;
  color:#fff;
}

.tryon-ref-drop-sub{
  font-size:13px;
  font-weight:700;
  color:rgba(255,255,255,.90);
}

.tryon-ref-select-wrap{
  margin-top:14px;
}

.tryon-ref-select-wrap select{
  width:100%;
  height:48px;
  padding:0 42px 0 14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.72);
  border-radius:10px;
  color:#fff;
  font-size:15px;
  appearance:none;
}

.tryon-ref-actions{
  display:grid;
  gap:12px;
}

.tryon-ref-primary,
.tryon-ref-secondary{
  width:100%;
  height:58px;
  font-size:17px;
  font-weight:600;
}

.tryon-ref-primary{
  background:#ebe7e7;
  color:#171717;
}

.tryon-ref-secondary{
  background:transparent;
  color:#fff;
}

.tryon-ref-status{
  min-height:22px;
  margin-top:2px;
  color:rgba(255,255,255,.82) !important;
  font-size:13px;
  line-height:1.45;
  position:static !important;
  width:auto !important;
  height:auto !important;
  padding:0 !important;
  overflow:visible !important;
  clip:auto !important;
  white-space:normal !important;
  border:0 !important;
}

.tryon-ref-result-card{
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:16px;
  min-height:0;
  height:100%;
}

.tryon-ref-result-wrap{
  border:0;
  border-radius:10px;
  background:rgba(255,255,255,.045);
  padding:16px;
  min-height:clamp(540px, 64vh, 820px);
  height:clamp(540px, 64vh, 820px);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow:auto;
}

.tryon-ref-result-wrap .empty-card,
.tryon-ref-result-wrap .empty{
  background:transparent;
  border:0;
  color:rgba(255,255,255,.88);
}

.tryon-ref-result-wrap .empty-card{
  display:grid;
  place-items:center;
  text-align:center;
  gap:10px;
}

.tryon-ref-result-wrap .empty-card svg{
  width:56px;
  height:56px;
  opacity:.96;
  stroke:#fff;
  stroke-width:1.8;
  fill:none;
}

.tryon-ref-result-wrap .result-image{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center top;
  border-radius:8px;
  background:transparent;
}

.tryon-ref-result-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.tryon-ref-result-btn{
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:10px;
  background:transparent;
  color:#fff;
}

.tryon-ref-result-btn.is-disabled{
  pointer-events:none;
  opacity:.55;
}

.tryon-ref-hidden-actions,
.tryon-ref-hidden-previews{
  display:none !important;
}

@media (max-width: 1400px){
  .tryon-ref-grid{
    grid-template-columns:minmax(0, 620px) minmax(0, 1fr);
  }
}

@media (max-width: 1500px){
  .shell.shell-wide{
    padding-left:48px;
    padding-right:48px;
  }

  .billing-ref-grid{
    gap:24px;
  }

  .history-ref-row{
    grid-template-columns:236px 220px 1px minmax(0, 1fr);
  }

  .history-ref-preview{
    width:220px;
  }
}

@media (max-width: 1200px){
  .shell.shell-wide{
    padding-left:28px;
    padding-right:28px;
  }

  .home-hero-panel__title{
    font-size:50px;
    max-width:700px;
  }

  .billing-ref-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .billing-ref-card{
    min-height:560px;
  }

  .billing-ref-card-price{
    font-size:48px;
  }

  .profile-ref-name{
    font-size:34px;
  }

  .history-ref-row{
    grid-template-columns:1fr;
    gap:16px;
  }

  .history-ref-divider{
    display:none;
  }

  .history-ref-actions-col{
    grid-template-columns:repeat(4, minmax(100px, 1fr));
  }

  .tryon-ref-grid{
    grid-template-columns:1fr;
    gap:22px;
  }

  .tryon-ref-result-card{
    min-height:640px;
  }
}

@media (max-width: 900px){
  .site-header__inner{
    min-height:auto;
    padding:18px;
    align-items:flex-start;
    flex-wrap:wrap;
  }

  .site-header__nav{
    width:100%;
    justify-content:flex-start;
    gap:18px;
  }

  .site-main{
    padding-top:14px;
  }

  .billing-ref-header{
    flex-direction:column;
    align-items:flex-start;
  }

  .billing-ref-extra-grid{
    grid-template-columns:1fr;
  }

  .profile-ref-identity{
    flex-direction:column;
    align-items:flex-start;
  }

  .profile-ref-row,
  .profile-ref-password-trigger{
    grid-template-columns:1fr 44px;
    gap:12px;
    padding:14px 0;
  }

  .profile-ref-label{
    grid-column:1 / -1;
  }

  .profile-ref-password-form{
    grid-template-columns:1fr;
  }

  .history-ref-controls{
    flex-direction:column;
    align-items:stretch;
  }

  .history-ref-filter{
    width:100%;
  }
}

@media (max-width: 720px){
  .shell.shell-wide{
    padding-left:16px;
    padding-right:16px;
  }

  .home-hero-panel{
    min-height:calc(100vh - 150px);
    padding:30px 18px 40px;
  }

  .home-hero-panel__eyebrow{
    font-size:13px;
  }

  .home-hero-panel__title{
    font-size:34px;
    line-height:1.2;
    max-width:100%;
  }

  .billing-ref-title{
    font-size:38px;
  }

  .billing-ref-grid{
    grid-template-columns:1fr;
  }

  .billing-ref-card{
    min-height:0;
    padding-top:28px;
  }

  .billing-ref-card-count{
    font-size:48px;
  }

  .billing-ref-card-price{
    font-size:42px;
  }

  .billing-ref-logos{
    font-size:22px;
    gap:18px;
  }

  .profile-ref-panel{
    padding:18px 16px;
  }

  .profile-ref-page-title,
  .profile-ref-panel-title,
  .history-ref-title{
    font-size:24px;
  }

  .profile-ref-name{
    font-size:28px;
  }

  .profile-ref-handle{
    font-size:22px;
  }

  .profile-ref-actions{
    gap:14px;
  }

  .profile-ref-action{
    width:100%;
    min-width:0;
  }

  .history-ref-actions-col{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .history-ref-action{
    min-height:96px;
  }

  .tryon-ref-left,
  .tryon-ref-result-card,
  .tryon-ref-step{
    padding:16px;
  }

  .tryon-ref-upload-grid-2,
  .tryon-ref-upload-grid-3,
  .tryon-ref-result-actions{
    grid-template-columns:1fr;
  }
}


.tryon-ref-file-input{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
  opacity:0;
  pointer-events:none;
}

.tryon-ref-primary,
.tryon-ref-secondary,
.billing-ref-buy,
.billing-ref-balance-box,
.billing-ref-card,
.payment-item,
.history-ref-preview,
.history-ref-type{
  border-radius:10px;
}

.tryon-ref-primary,
.tryon-ref-secondary{
  border:1px solid rgba(255,255,255,.72);
  border-radius:10px;
}

.tryon-ref-secondary{
  background:rgba(255,255,255,.02);
}

.history-ref-openall{
  min-width:164px;
  min-height:46px;
  padding:0 18px;
  font-size:15px;
}

.billing-ref-card,
.billing-ref-balance-box,
.billing-ref-buy{
  border-radius:12px;
}

.billing-ref-card{
  border-color:rgba(255,255,255,.72);
  background:rgba(18,14,10,.28);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.billing-ref-buy{
  border:1px solid rgba(255,255,255,.70);
}

.billing-ref-balance-box{
  border-color:rgba(255,255,255,.72);
  background:rgba(18,14,10,.28);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.billing-ref-extra-card--summary{
  max-width:520px;
}

.billing-ref-more-wrap{
  display:flex;
  justify-content:center;
  padding-top:16px;
}

.billing-ref-more{
  min-width:164px;
  min-height:46px;
  padding:0 18px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:10px;
  background:rgba(18,14,10,.28);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  color:#fff;
  font-size:15px;
  font-weight:700;
}

.payment-item{
  border-radius:10px;
}

@media (max-width: 1200px){
  .billing-ref-extra-grid{
    grid-template-columns:1fr;
  }

  .billing-ref-extra-card--summary{
    max-width:none;
  }
}

@media (max-width: 980px){
  .tryon-ref-result-wrap{
    min-height:420px;
    height:420px;
  }
}


/* motion foundation */

html{scrollbar-gutter:stable both-edges;}

:root{
  --motion-ease-main:cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-soft:cubic-bezier(0.25, 0.8, 0.25, 1);
  --motion-fast:180ms;
  --motion-base:260ms;
  --motion-slow:360ms;
}

body.app-dark-shell .site-scene__backdrop{
  transform:none;
  transform-origin:center center;
  transition:opacity .24s var(--motion-ease-soft);
}
body.motion-ready.is-page-leaving .site-scene__backdrop{opacity:1}

.site-page-shell{
  transition:opacity 220ms var(--motion-ease-soft);
  transform:none;
  filter:none;
  opacity:1;
}
body.motion-ready.is-page-entering .site-page-shell{
  opacity:0;
  transform:none;
  filter:none;
}
body.motion-ready.is-page-enter-active .site-page-shell{
  opacity:1;
  transform:none;
  filter:none;
}
body.motion-ready.is-page-leaving .site-page-shell,
.site-page-shell.is-leaving{
  opacity:0;
  transform:none;
  filter:none;
}
body.motion-ready.is-page-enter-soft.is-page-entering .site-page-shell{
  opacity:0;
}
body.motion-ready.is-page-enter-soft.is-page-enter-active .site-page-shell{
  opacity:1;
}
body.motion-ready.is-page-enter-soft.is-page-leaving .site-page-shell,
body.motion-ready.is-page-enter-soft .site-page-shell.is-leaving{
  opacity:0;
}

.async-panel{
  transition:opacity 180ms var(--motion-ease-soft);
  will-change:opacity;
  transform:none;
}
.async-panel.is-loading{
  opacity:0;
  transform:none;
}
.async-panel.is-ready{
  opacity:1;
  transform:none;
}
body.motion-ready.is-page-enter-soft .async-panel.is-loading{
  transform:none;
}
body.motion-ready.is-page-enter-soft .async-panel{
  transition:opacity 160ms var(--motion-ease-soft), transform 0ms linear;
}
body.motion-ready.is-page-enter-soft .async-panel.is-no-motion,
body.motion-ready.is-page-enter-soft .async-panel.is-ready{
  transform:none;
}

.motion-reveal{
  opacity:0;
  transform:translateY(10px);
  transition:opacity var(--motion-slow) var(--motion-ease-main), transform var(--motion-slow) var(--motion-ease-main), border-color var(--motion-base) var(--motion-ease-soft), background-color var(--motion-base) var(--motion-ease-soft), box-shadow var(--motion-base) var(--motion-ease-soft);
  transition-delay:var(--reveal-delay,0ms);
}
.motion-reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

.site-header__nav-link,
.site-header__avatar-btn,
.site-account-menu,
button,
.button-link,
.history-ref-action,
.history-ref-favorites-btn,
.history-ref-openall,
.billing-ref-card,
.billing-ref-buy,
.profile-ref-action,
.profile-ref-edit,
.tryon-ref-drop,
.tryon-ref-result-btn,
.tryon-ref-select-wrap select,
.history-ref-filter select,
.billing-ref-more,
.profile-ref-avatar-btn,
.payment-item,
.history-ref-row,
.auth-modal-dialog,
.auth-social-btn,
.auth-telegram-btn{
  transition:background-color var(--motion-fast) var(--motion-ease-soft), border-color var(--motion-fast) var(--motion-ease-soft), color var(--motion-fast) var(--motion-ease-soft), opacity var(--motion-fast) var(--motion-ease-soft), transform var(--motion-fast) var(--motion-ease-soft), box-shadow var(--motion-fast) var(--motion-ease-soft), filter var(--motion-fast) var(--motion-ease-soft);
}

button:hover,
.button-link:hover,
.tryon-ref-result-btn:hover,
.history-ref-action:hover,
.history-ref-favorites-btn:hover,
.history-ref-openall:hover,
.billing-ref-more:hover,
.profile-ref-action:hover{
  transform:translateY(-1px);
}
button:active,
.button-link:active,
.tryon-ref-result-btn:active,
.history-ref-action:active,
.billing-ref-more:active,
.profile-ref-action:active{
  transform:translateY(0) scale(.992);
}

.site-header__nav-link{
  position:relative;
  padding:10px 0;
  color:rgba(255,255,255,.82);
}
.site-header__nav-link::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:2px;
  height:1px;
  background:rgba(255,255,255,.92);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 220ms var(--motion-ease-main), opacity 220ms var(--motion-ease-soft);
  opacity:.8;
}
.site-header__nav-link:hover{color:#fff}
.site-header__nav-link:hover::after,
.site-header__nav-link.is-active::after{transform:scaleX(1)}
.site-header__nav-link.is-active{color:#fff}
.site-header__nav-divider{transition:opacity var(--motion-base) var(--motion-ease-soft)}

.site-header__avatar-btn:hover{
  transform:translateY(-1px) scale(1.01);
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}
.site-account-menu{
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
}
.site-account-menu:not([hidden]){
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.card,
.profile-ref-panel,
.history-ref-board,
.billing-ref-card,
.billing-ref-extra-card,
.tryon-ref-left,
.tryon-ref-result-card{
  box-shadow:0 18px 50px rgba(0,0,0,.12);
}

.tryon-ref-drop:hover,
.billing-ref-card:hover,
.history-ref-row:hover,
.profile-ref-panel:hover,
.billing-ref-extra-card:hover{
  border-color:rgba(255,255,255,.78);
  background-color:rgba(30,24,18,.34);
}
.history-ref-row:hover .history-ref-preview{transform:scale(1.012)}
.history-ref-action.is-favorite .history-ref-action-icon,
.history-ref-favorites-btn.is-active .history-ref-star{transform:scale(1.06)}

.tryon-ref-primary.is-loading{
  position:relative;
  overflow:hidden;
  pointer-events:none;
}
.tryon-ref-primary.is-loading::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.34) 48%, rgba(255,255,255,0) 100%);
  transform:translateX(-120%);
  animation:buttonShimmer 1.6s linear infinite;
}
@keyframes buttonShimmer{
  to{transform:translateX(120%)}
}

.tryon-ref-result-wrap{
  position:relative;
  transition:background-color var(--motion-base) var(--motion-ease-soft), border-color var(--motion-base) var(--motion-ease-soft), box-shadow var(--motion-base) var(--motion-ease-soft);
}
.tryon-ref-result-wrap.has-result .result-image{
  animation:resultReveal 420ms var(--motion-ease-main);
}
@keyframes resultReveal{
  from{opacity:0;transform:translateY(10px) scale(1.012)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.auth-modal{
  display:block;
  opacity:0;
  pointer-events:none;
  transition:opacity 240ms var(--motion-ease-soft);
}
.auth-modal[hidden]{display:none}
.auth-modal.is-open{
  opacity:1;
  pointer-events:auto;
}
.auth-modal-backdrop{
  opacity:0;
  transition:opacity 240ms var(--motion-ease-soft);
}
.auth-modal-dialog{
  transform:translateY(16px) scale(.986);
  opacity:0;
  transition:transform 320ms var(--motion-ease-main), opacity 240ms var(--motion-ease-soft);
}
.auth-modal.is-open .auth-modal-backdrop{opacity:1}
.auth-modal.is-open .auth-modal-dialog{transform:translateY(0) scale(1);opacity:1}

.toast-root{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:180;
  display:grid;
  gap:10px;
  width:min(360px, calc(100vw - 28px));
}
.app-toast{
  border:1px solid rgba(255,255,255,.22);
  background:rgba(7,7,7,.92);
  color:#fff;
  padding:14px 16px;
  border-radius:12px;
  box-shadow:0 22px 46px rgba(0,0,0,.36);
  backdrop-filter:blur(10px);
  opacity:0;
  transform:translateY(8px);
  transition:opacity 220ms var(--motion-ease-soft), transform 240ms var(--motion-ease-main), border-color 220ms var(--motion-ease-soft);
}
.app-toast.is-visible{opacity:1;transform:translateY(0)}
.app-toast.is-success{border-color:rgba(180, 225, 188, .38)}
.app-toast.is-warn{border-color:rgba(234, 208, 145, .4)}
.app-toast.is-error{border-color:rgba(235, 155, 155, .42)}
.app-toast__body{font-size:14px;line-height:1.45;font-weight:600}

.history-ref-filter select,
.history-ref-favorites-btn,
.history-ref-openall,
.billing-ref-more,
.billing-ref-buy,
.billing-ref-card,
.billing-ref-balance-box,
.tryon-ref-primary,
.tryon-ref-secondary,
.tryon-ref-result-btn,
.profile-ref-panel,
.profile-ref-action,
.profile-ref-avatar-btn,
.payment-item,
.history-ref-row,
.auth-modal-dialog,
.site-account-menu{
  border-radius:12px;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .motion-reveal{opacity:1 !important;transform:none !important}
}


.tryon-ref-delete-chip{
  position:absolute;
  top:8px;
  right:8px;
  width:16px;
  height:16px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:rgba(255,255,255,.94);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transform:translateY(-2px);
  transition:opacity .18s ease, transform .18s ease, color .18s ease;
  z-index:3;
  box-shadow:none;
  backdrop-filter:none;
}
.tryon-ref-delete-chip::after{display:none;}
.tryon-ref-delete-chip svg{
  width:14px;
  height:14px;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.98;
}
.tryon-ref-drop.has-preview .tryon-ref-delete-chip{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.tryon-ref-delete-chip:hover,
.tryon-ref-delete-chip:focus-visible{
  background:transparent;
  color:rgba(255,112,126,.98);
  outline:none;
}
.tryon-ref-delete-chip:active{
  transform:translateY(0) scale(.92);
}
.tryon-ref-delete-chip[hidden]{
  display:none !important;
}


/* stage ux-glass-01: unify frosted panel backgrounds and compact profile pill */
:root{
  --ux-glass-panel-bg: rgba(18,14,10,.28);
  --ux-glass-panel-bg-strong: rgba(18,14,10,.34);
  --ux-glass-panel-bg-hover: rgba(30,24,18,.34);
  --ux-glass-panel-border: rgba(255,255,255,.58);
  --ux-glass-panel-border-strong: rgba(255,255,255,.72);
  --ux-glass-panel-shadow: 0 18px 50px rgba(0,0,0,.12);
  --ux-glass-panel-blur: 16px;
}

body.app-dark-shell .card,
body.app-dark-shell .history-ref-board,
body.app-dark-shell .history-ref-row,
body.app-dark-shell .billing-ref-card,
body.app-dark-shell .billing-ref-extra-card,
body.app-dark-shell .billing-ref-balance-box,
body.app-dark-shell .payment-item,
body.app-dark-shell .tryon-ref-left,
body.app-dark-shell .tryon-ref-result-card,
body.app-dark-shell .tryon-ref-drop,
body.app-dark-shell .auth-modal-dialog,
body.app-dark-shell .admin-pretty-json{
  border-color:var(--ux-glass-panel-border);
  background:var(--ux-glass-panel-bg);
  backdrop-filter:blur(var(--ux-glass-panel-blur));
  -webkit-backdrop-filter:blur(var(--ux-glass-panel-blur));
  box-shadow:var(--ux-glass-panel-shadow);
}

body.app-dark-shell .history-ref-filter select,
body.app-dark-shell .history-ref-favorites-btn,
body.app-dark-shell .history-ref-openall,
body.app-dark-shell .billing-ref-more,
body.app-dark-shell .tryon-ref-select-wrap select{
  border:1px solid var(--ux-glass-panel-border-strong);
  background:var(--ux-glass-panel-bg-strong);
  backdrop-filter:blur(var(--ux-glass-panel-blur));
  -webkit-backdrop-filter:blur(var(--ux-glass-panel-blur));
  box-shadow:0 12px 30px rgba(0,0,0,.10);
}

body.app-dark-shell .admin-pretty-json{
  color:#fff;
}

body.app-dark-shell .admin-pretty-json,
body.app-dark-shell .history-ref-row,
body.app-dark-shell .payment-item,
body.app-dark-shell .tryon-ref-drop,
body.app-dark-shell .billing-ref-card,
body.app-dark-shell .billing-ref-extra-card,
body.app-dark-shell .history-ref-favorites-btn,
body.app-dark-shell .history-ref-openall,
body.app-dark-shell .billing-ref-more,
body.app-dark-shell .tryon-ref-select-wrap select{
  transition:background-color var(--motion-fast) var(--motion-ease-soft), border-color var(--motion-fast) var(--motion-ease-soft), color var(--motion-fast) var(--motion-ease-soft), opacity var(--motion-fast) var(--motion-ease-soft), transform var(--motion-fast) var(--motion-ease-soft), box-shadow var(--motion-fast) var(--motion-ease-soft), filter var(--motion-fast) var(--motion-ease-soft);
}

body.app-dark-shell .history-ref-row:hover,
body.app-dark-shell .payment-item:hover,
body.app-dark-shell .tryon-ref-drop:hover,
body.app-dark-shell .tryon-ref-drop:focus-visible,
body.app-dark-shell .billing-ref-card:hover,
body.app-dark-shell .billing-ref-extra-card:hover,
body.app-dark-shell .history-ref-favorites-btn:hover,
body.app-dark-shell .history-ref-openall:hover,
body.app-dark-shell .billing-ref-more:hover,
body.app-dark-shell .tryon-ref-select-wrap select:hover,
body.app-dark-shell .history-ref-filter select:hover{
  border-color:rgba(255,255,255,.78);
  background-color:var(--ux-glass-panel-bg-hover);
  box-shadow:0 22px 58px rgba(0,0,0,.16);
}

body.app-dark-shell .site-header__avatar-btn{
  position:relative;
  z-index:46;
}

body.app-dark-shell .site-header__avatar-btn[aria-expanded="true"]{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.62);
  box-shadow:0 14px 30px rgba(0,0,0,.26);
  transform:translateY(-1px) scale(1.01);
}

body.app-dark-shell .site-account-menu,
body.app-dark-shell .site-account-menu.site-account-menu--compact{
  top:calc(100% + 12px);
  left:50%;
  min-width:auto;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  transform:translate(-50%, 10px) scale(.96);
  transform-origin:top center;
}

body.app-dark-shell .site-account-menu:not([hidden]),
body.app-dark-shell .site-account-menu.site-account-menu--compact:not([hidden]){
  opacity:1;
  transform:translate(-50%, 0) scale(1);
  pointer-events:auto;
}

body.app-dark-shell .site-account-pill{
  min-height:36px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.58);
  border-radius:999px;
  background:rgba(18,14,10,.40);
  color:#fff;
  font-size:13px;
  font-weight:600;
  letter-spacing:.02em;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 16px 38px rgba(0,0,0,.24);
}

body.app-dark-shell .site-account-pill:hover,
body.app-dark-shell .site-account-pill:focus-visible{
  background:rgba(28,22,16,.46);
  border-color:rgba(255,255,255,.78);
  transform:translateY(-1px);
}

body.app-dark-shell .site-account-pill__label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

@media (max-width: 640px){
  body.app-dark-shell .site-account-menu,
  body.app-dark-shell .site-account-menu.site-account-menu--compact{
    left:0;
    transform:translate(0, 10px) scale(.96);
    transform-origin:top left;
  }

  body.app-dark-shell .site-account-menu:not([hidden]),
  body.app-dark-shell .site-account-menu.site-account-menu--compact:not([hidden]){
    transform:translate(0, 0) scale(1);
  }
}


/* stage ux-glass-02: no-flash glass baseline + refined avatar profile popover */
body.app-dark-shell .card,
body.app-dark-shell .profile-ref-panel,
body.app-dark-shell .history-ref-board,
body.app-dark-shell .history-ref-row,
body.app-dark-shell .billing-ref-card,
body.app-dark-shell .billing-ref-extra-card,
body.app-dark-shell .billing-ref-balance-box,
body.app-dark-shell .payment-item,
body.app-dark-shell .tryon-ref-left,
body.app-dark-shell .tryon-ref-result-card,
body.app-dark-shell .tryon-ref-drop,
body.app-dark-shell .auth-modal-dialog,
body.app-dark-shell .admin-pretty-json{
  background:var(--ux-glass-panel-bg, rgba(18,14,10,.28));
  border-color:var(--ux-glass-panel-border, rgba(255,255,255,.58));
  backdrop-filter:blur(var(--ux-glass-panel-blur,16px));
  -webkit-backdrop-filter:blur(var(--ux-glass-panel-blur,16px));
}

body.app-dark-shell .site-header__avatar-wrap{
  isolation:isolate;
}

body.app-dark-shell .site-account-menu.site-account-menu--compact{
  width:112px;
  min-width:112px;
  top:calc(100% + 11px);
  left:50%;
  padding:6px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:16px;
  background:rgba(16,13,10,.44);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 18px 44px rgba(0,0,0,.30);
  opacity:0;
  transform:translate(-50%,8px) scale(.975);
  transform-origin:top center;
  pointer-events:none;
  transition:opacity 180ms var(--motion-ease-soft), transform 220ms var(--motion-ease-main), border-color 180ms var(--motion-ease-soft), background-color 180ms var(--motion-ease-soft);
}

body.app-dark-shell .site-account-menu.site-account-menu--compact::before{
  content:"";
  position:absolute;
  left:50%;
  top:-5px;
  width:9px;
  height:9px;
  border-left:1px solid rgba(255,255,255,.34);
  border-top:1px solid rgba(255,255,255,.34);
  background:rgba(16,13,10,.44);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  transform:translateX(-50%) rotate(45deg);
}

body.app-dark-shell .site-account-menu.site-account-menu--compact:not([hidden]){
  opacity:1;
  transform:translate(-50%,0) scale(1);
  pointer-events:auto;
}

body.app-dark-shell .site-account-pill{
  position:relative;
  z-index:1;
  width:100%;
  min-height:34px;
  padding:0 12px;
  border:0;
  border-radius:11px;
  background:rgba(255,255,255,.08);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:13px;
  font-weight:700;
  line-height:1;
  letter-spacing:.01em;
  box-shadow:none;
}

body.app-dark-shell .site-account-pill:hover,
body.app-dark-shell .site-account-pill:focus-visible{
  background:rgba(255,255,255,.15);
  border-color:transparent;
  transform:none;
  outline:none;
}

body.app-dark-shell .site-account-pill__label{
  width:100%;
  text-align:center;
}

@media (max-width: 640px){
  body.app-dark-shell .site-account-menu.site-account-menu--compact{
    left:50%;
    transform:translate(-50%,8px) scale(.975);
    transform-origin:top center;
  }
  body.app-dark-shell .site-account-menu.site-account-menu--compact:not([hidden]){
    transform:translate(-50%,0) scale(1);
  }
}


/* stage ux-glass-02: remove page-entry glass flash and align avatar profile popover */
body.app-dark-shell .site-page-shell,
body.motion-ready.is-page-entering .site-page-shell,
body.motion-ready.is-page-enter-soft.is-page-entering .site-page-shell,
body.motion-ready.is-page-enter-active .site-page-shell,
body.motion-ready.is-page-enter-soft.is-page-enter-active .site-page-shell{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
}

body.app-dark-shell .site-header__avatar-wrap{
  overflow:visible;
  isolation:isolate;
}

body.app-dark-shell .site-account-menu.site-account-menu--compact{
  width:96px;
  min-width:96px;
  top:calc(100% + 10px);
  left:0;
  right:auto;
  padding:5px;
  border:1px solid rgba(255,255,255,.38);
  border-radius:14px;
  background:rgba(15,12,9,.54);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 16px 34px rgba(0,0,0,.30);
  opacity:0;
  transform:translateY(7px) scale(.975);
  transform-origin:23px top;
  pointer-events:none;
  overflow:visible;
  transition:opacity 170ms var(--motion-ease-soft), transform 210ms var(--motion-ease-main), border-color 170ms var(--motion-ease-soft), background-color 170ms var(--motion-ease-soft), box-shadow 170ms var(--motion-ease-soft);
}

body.app-dark-shell .site-account-menu.site-account-menu--compact::before{
  content:"";
  position:absolute;
  left:23px;
  top:-5px;
  width:9px;
  height:9px;
  border-left:1px solid rgba(255,255,255,.38);
  border-top:1px solid rgba(255,255,255,.38);
  background:rgba(15,12,9,.54);
  transform:rotate(45deg);
  pointer-events:none;
}

body.app-dark-shell .site-account-menu.site-account-menu--compact:not([hidden]){
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

body.app-dark-shell .site-account-pill{
  width:100%;
  min-height:32px;
  padding:0 10px;
  border:0;
  border-radius:10px;
  background:rgba(255,255,255,.09);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:13px;
  font-weight:700;
  line-height:1;
  letter-spacing:.01em;
  box-shadow:none;
  white-space:nowrap;
}

body.app-dark-shell .site-account-pill:hover,
body.app-dark-shell .site-account-pill:focus-visible{
  background:rgba(255,255,255,.16);
  transform:none;
  outline:none;
}

body.app-dark-shell .site-account-pill__label{
  display:block;
  width:100%;
  text-align:center;
}

@media (max-width: 640px){
  body.app-dark-shell .site-account-menu.site-account-menu--compact{
    left:0;
    transform:translateY(7px) scale(.975);
    transform-origin:23px top;
  }
  body.app-dark-shell .site-account-menu.site-account-menu--compact:not([hidden]){
    transform:translateY(0) scale(1);
  }
}


/* stage 23: premium try-on generation animation */
.tryon-ref-result-wrap.is-processing{
  display:grid;
  place-items:center;
  min-height:520px;
  padding:28px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.10), rgba(255,255,255,0) 34%),
    radial-gradient(circle at 50% 58%, rgba(206,172,102,.13), rgba(206,172,102,0) 44%),
    rgba(12,9,7,.30);
  border-color:rgba(255,255,255,.68);
}

.tryon-generation{
  width:min(420px, 100%);
  min-height:420px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:22px;
  text-align:center;
  color:#fff;
  isolation:isolate;
}

.tryon-generation__visual{
  position:relative;
  width:210px;
  height:244px;
  display:grid;
  place-items:center;
}

.tryon-generation__halo{
  position:absolute;
  inset:20px 0 0;
  border-radius:999px;
  background:
    radial-gradient(circle at 50% 34%, rgba(255,255,255,.13), rgba(255,255,255,0) 40%),
    radial-gradient(circle at 50% 64%, rgba(218,183,112,.18), rgba(218,183,112,0) 55%);
  filter:blur(2px);
  opacity:.95;
  animation:tryonGenerationHalo 3.2s ease-in-out infinite;
}

.tryon-generation__figure{
  position:relative;
  z-index:2;
  width:180px;
  height:220px;
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.26));
}

.tryon-generation__body-line{
  stroke:rgba(255,255,255,.78);
  stroke-width:1.25;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
  stroke-linejoin:round;
  animation:tryonFigurePulse 2.8s ease-in-out infinite;
}

.tryon-generation__atelier-line{
  stroke:rgba(224,190,120,.86);
  stroke-width:1.05;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:9 12;
  animation:tryonAtelierDash 2.4s linear infinite;
}

.tryon-generation__atelier-line--b{animation-duration:2.9s;opacity:.75}
.tryon-generation__atelier-line--c,
.tryon-generation__atelier-line--d{animation-duration:3.3s;opacity:.62}

.tryon-generation__scan{
  position:absolute;
  z-index:4;
  left:17%;
  right:17%;
  height:1px;
  top:42px;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95), rgba(224,190,120,.95), rgba(255,255,255,0));
  box-shadow:0 0 18px rgba(224,190,120,.34), 0 0 36px rgba(255,255,255,.16);
  animation:tryonScan 2.7s cubic-bezier(.45,0,.2,1) infinite;
}

.tryon-generation__spark{
  position:absolute;
  z-index:5;
  width:5px;
  height:5px;
  border-radius:999px;
  background:rgba(235,207,144,.94);
  box-shadow:0 0 16px rgba(235,207,144,.5);
  opacity:.15;
  animation:tryonSpark 2.8s ease-in-out infinite;
}

.tryon-generation__spark--one{left:34px;top:98px;animation-delay:.15s}
.tryon-generation__spark--two{right:38px;top:132px;animation-delay:.72s}
.tryon-generation__spark--three{left:92px;bottom:34px;animation-delay:1.16s}

.tryon-generation__copy{
  display:grid;
  gap:9px;
  justify-items:center;
}

.tryon-generation__eyebrow{
  font-size:10px;
  line-height:1;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(255,255,255,.58);
  font-weight:800;
}

.tryon-generation__title{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:34px;
  line-height:1;
  font-weight:600;
  letter-spacing:.02em;
  color:#fff;
}

.tryon-generation__message{
  min-height:22px;
  max-width:340px;
  font-size:14px;
  line-height:1.45;
  color:rgba(255,255,255,.76);
  font-weight:600;
}

.tryon-generation__bar{
  position:relative;
  width:min(312px, 86%);
  height:2px;
  margin-top:7px;
  overflow:hidden;
  background:rgba(255,255,255,.16);
  border-radius:999px;
}

.tryon-generation__bar span{
  position:absolute;
  inset:0 auto 0 0;
  width:42%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.86), rgba(218,183,112,.90), rgba(255,255,255,.08));
  animation:tryonBarTravel 1.9s ease-in-out infinite;
}

.tryon-generation__steps{
  width:min(330px, 92%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:4px;
  color:rgba(255,255,255,.52);
  font-size:10px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:800;
}

.tryon-generation__steps span{
  position:relative;
  padding-top:12px;
}

.tryon-generation__steps span::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:4px;
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.46);
  transform:translateX(-50%);
  animation:tryonStepBlink 4s ease-in-out infinite;
}

.tryon-generation__steps span:nth-child(2)::before{animation-delay:.7s}
.tryon-generation__steps span:nth-child(3)::before{animation-delay:1.4s}
.tryon-generation__steps span:nth-child(4)::before{animation-delay:2.1s}

@keyframes tryonGenerationHalo{
  0%,100%{opacity:.72;transform:scale(.985)}
  50%{opacity:1;transform:scale(1.018)}
}

@keyframes tryonFigurePulse{
  0%,100%{opacity:.62}
  50%{opacity:.95}
}

@keyframes tryonAtelierDash{
  to{stroke-dashoffset:-42}
}

@keyframes tryonScan{
  0%{transform:translateY(0);opacity:0}
  12%{opacity:.9}
  72%{opacity:.95}
  100%{transform:translateY(154px);opacity:0}
}

@keyframes tryonSpark{
  0%,100%{opacity:.12;transform:scale(.74)}
  45%{opacity:.92;transform:scale(1.18)}
}

@keyframes tryonBarTravel{
  0%{transform:translateX(-105%)}
  55%{transform:translateX(75%)}
  100%{transform:translateX(250%)}
}

@keyframes tryonStepBlink{
  0%,100%{background:rgba(255,255,255,.34);box-shadow:none}
  35%{background:rgba(232,200,136,.92);box-shadow:0 0 14px rgba(232,200,136,.44)}
}

@media (max-width: 980px){
  .tryon-ref-result-wrap.is-processing{
    min-height:420px;
  }
  .tryon-generation{
    min-height:360px;
  }
  .tryon-generation__visual{
    width:182px;
    height:212px;
    transform:scale(.88);
  }
  .tryon-generation__title{
    font-size:30px;
  }
}

@media (prefers-reduced-motion: reduce){
  .tryon-generation *,
  .tryon-generation *::before,
  .tryon-generation *::after{
    animation:none !important;
  }
}
/* stage 25: profile-based loader silhouette setting */
.profile-ref-panel--settings{
  display:grid;
  gap:18px;
}

.profile-ref-setting-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(240px, 340px);
  align-items:center;
  gap:24px;
  min-height:92px;
  padding-top:4px;
}

.profile-ref-setting-title{
  color:#fff;
  font-size:18px;
  font-weight:700;
  line-height:1.2;
}

.profile-ref-setting-subtitle{
  margin-top:8px;
  color:rgba(255,255,255,.66);
  font-size:14px;
  line-height:1.45;
}

.profile-ref-segmented{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}

.profile-ref-segment{
  position:relative;
  display:block;
}

.profile-ref-segment input{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
}

.profile-ref-segment span{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.045);
  color:rgba(255,255,255,.84);
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
  transition:border-color .22s var(--motion-ease-soft), background .22s var(--motion-ease-soft), transform .22s var(--motion-ease-soft), box-shadow .22s var(--motion-ease-soft);
  cursor:pointer;
}

.profile-ref-segment span:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.40);
}

.profile-ref-segment input:checked + span{
  border-color:rgba(215,182,115,.58);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(215,182,115,.12));
  color:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.10);
}

.profile-ref-segment input:focus-visible + span{
  outline:1px solid rgba(255,255,255,.72);
  outline-offset:3px;
}

@media (max-width: 760px){
  .profile-ref-setting-row{
    grid-template-columns:1fr;
    align-items:start;
    gap:16px;
  }
}


/* stage28 legal pages + footer */
.site-footer{
  min-height:64px;
  padding:14px 68px;
  background:rgba(0,0,0,.96);
  border-top:1px solid rgba(255,255,255,.10);
}

.site-footer__inner{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.site-footer__text{
  font-size:12px;
  line-height:1.45;
  font-weight:600;
  color:rgba(255,255,255,.78);
  text-align:left;
}

.site-footer__links{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  flex-wrap:wrap;
  color:rgba(255,255,255,.86);
  font-size:12px;
  font-weight:700;
}

.site-footer__links a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .18s ease, border-color .18s ease, opacity .18s ease;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible{
  color:#fff;
  border-color:rgba(255,255,255,.55);
  outline:none;
}

.legal-page{
  width:min(100%, 980px);
  margin:0 auto;
  padding:24px 0 44px;
}

.legal-card{
  border:1px solid rgba(255,255,255,.60);
  border-radius:18px;
  background:rgba(18,14,10,.34);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 24px 58px rgba(0,0,0,.18);
  padding:42px 46px;
  color:#fff;
}

.legal-eyebrow{
  font-size:12px;
  line-height:1;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:800;
  color:rgba(255,255,255,.62);
  margin-bottom:14px;
}

.legal-card h1{
  margin:0 0 12px;
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:54px;
  line-height:.96;
  font-weight:600;
  letter-spacing:.01em;
}

.legal-card h2{
  margin:30px 0 10px;
  font-size:20px;
  line-height:1.2;
  font-weight:800;
}

.legal-card p,
.legal-card li{
  color:rgba(255,255,255,.82);
  font-size:15px;
  line-height:1.65;
}

.legal-card p{
  margin:0 0 12px;
}

.legal-card a{
  color:#fff;
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:3px;
}

.legal-date{
  color:rgba(255,255,255,.58) !important;
  font-weight:700;
}

.legal-card ul{
  margin:0 0 14px 18px;
  padding:0;
}

.legal-table{
  width:100%;
  border-collapse:collapse;
  margin:14px 0 18px;
  overflow:hidden;
  border-radius:12px;
}

.legal-table th,
.legal-table td{
  border:1px solid rgba(255,255,255,.22);
  padding:12px 14px;
  color:rgba(255,255,255,.84);
  text-align:left;
}

.legal-table th{
  color:#fff;
  background:rgba(255,255,255,.08);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.legal-contact-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:18px;
  margin:18px 0 22px;
}

.legal-contact-card{
  border:1px solid rgba(255,255,255,.28);
  border-radius:14px;
  background:rgba(255,255,255,.05);
  padding:20px;
}

.legal-contact-card h2{
  margin-top:0;
}

.auth-legal-note{
  margin-top:-4px;
  color:rgba(255,255,255,.58);
  font-size:12px;
  line-height:1.45;
}

.auth-legal-note a{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:2px;
}

/* stage27b billing page layout polish */
.billing-ref-status[hidden]{
  display:none !important;
}

.billing-ref-status{
  width:min(100%, 1120px);
  margin:0 auto 20px;
  padding:14px 18px;
  border:1px solid rgba(255,255,255,.58);
  border-radius:12px;
  background:rgba(18,14,10,.30);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.billing-ref-grid{
  width:min(100%, 1220px);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, minmax(300px, 360px));
  justify-content:center;
  gap:32px;
}

.billing-ref-card{
  width:100%;
  max-width:360px;
  min-height:500px;
  padding:30px 26px 24px;
  border:1px solid rgba(255,255,255,.72);
  background:rgba(18,14,10,.34);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 24px 56px rgba(0,0,0,.16);
}

.billing-ref-card-icon{width:68px;height:68px;margin-bottom:16px}
.billing-ref-card-count{font-size:58px;margin-bottom:8px}
.billing-ref-card-divider{width:112px;margin:26px 0 20px}
.billing-ref-card-price{font-size:52px;margin-bottom:10px}
.billing-ref-card-meta{margin-bottom:16px}
.billing-ref-card-name{margin-bottom:20px}
.billing-ref-buy{min-height:54px}

body.app-dark-shell .billing-ref-card,
body.app-dark-shell .billing-ref-extra-card,
body.app-dark-shell .billing-ref-balance-box,
body.app-dark-shell .billing-ref-status,
body.app-dark-shell .payment-item{
  border-color:var(--ux-glass-panel-border-strong, rgba(255,255,255,.72));
  background:var(--ux-glass-panel-bg-strong, rgba(18,14,10,.34));
  backdrop-filter:blur(var(--ux-glass-panel-blur, 16px));
  -webkit-backdrop-filter:blur(var(--ux-glass-panel-blur, 16px));
  box-shadow:0 20px 52px rgba(0,0,0,.16);
}

@media (max-width: 1180px){
  .billing-ref-grid{width:min(100%, 900px);grid-template-columns:repeat(2, minmax(280px, 360px))}
}

@media (max-width: 760px){
  .site-footer{padding:16px 20px}
  .site-footer__inner{display:grid;justify-items:center;text-align:center}
  .site-footer__text{text-align:center}
  .site-footer__links{justify-content:center;gap:12px}
  .legal-card{padding:30px 24px;border-radius:16px}
  .legal-card h1{font-size:42px}
  .legal-contact-grid{grid-template-columns:1fr}
  .legal-table{font-size:13px}
  .billing-ref-grid{width:min(100%, 400px);grid-template-columns:minmax(0, 1fr);gap:22px}
  .billing-ref-card{max-width:none;min-height:470px}
}


/* stage29: premium segmented controls for quality and history filters */
.tryon-ref-native-select,
.history-ref-native-select{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.tryon-ref-quality-toggle{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.tryon-ref-quality-btn,
.history-ref-type-tab{
  border:1px solid rgba(255,255,255,.58);
  background:rgba(18,14,10,.30);
  color:#fff;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 12px 30px rgba(0,0,0,.10);
  transition:background-color var(--motion-fast,180ms) var(--motion-ease-soft,ease), border-color var(--motion-fast,180ms) var(--motion-ease-soft,ease), transform var(--motion-fast,180ms) var(--motion-ease-soft,ease), box-shadow var(--motion-fast,180ms) var(--motion-ease-soft,ease), opacity var(--motion-fast,180ms) var(--motion-ease-soft,ease);
}

.tryon-ref-quality-btn{
  min-height:58px;
  padding:10px 12px;
  border-radius:14px;
  display:grid;
  place-items:center;
  gap:4px;
  text-align:center;
}

.tryon-ref-quality-btn span{
  font-size:15px;
  line-height:1;
  font-weight:800;
  letter-spacing:.01em;
}

.tryon-ref-quality-btn small{
  font-size:11px;
  line-height:1;
  font-weight:700;
  color:rgba(255,255,255,.58);
}

.tryon-ref-quality-btn:hover,
.history-ref-type-tab:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.76);
  background:rgba(30,24,18,.36);
  box-shadow:0 18px 42px rgba(0,0,0,.14);
}

.tryon-ref-quality-btn.is-active,
.history-ref-type-tab.is-active{
  border-color:rgba(230,199,134,.80);
  background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(218,183,112,.18));
  box-shadow:0 18px 44px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.16);
}

.tryon-ref-quality-btn.is-active small{
  color:rgba(255,255,255,.76);
}

.history-ref-type-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  max-width:min(100%,760px);
}

.history-ref-type-tab{
  min-height:44px;
  padding:0 18px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  line-height:1;
  font-weight:800;
  letter-spacing:.01em;
}

.history-ref-lefthead{
  gap:16px;
}

@media (max-width:760px){
  .history-ref-type-tabs{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
  }

  .history-ref-type-tab{
    width:100%;
    padding:0 12px;
  }
}


/* stage30 auth modal polish + direct avatar profile */
.site-header__avatar-link{
  text-decoration:none;
}

.auth-panel .status[hidden]{
  display:none !important;
}

.auth-mode-switches{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.auth-mode-switches .auth-social-btn{
  min-height:54px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.32);
  background:rgba(255,255,255,.08);
  color:#f7f1ea;
  font-weight:700;
  box-shadow:0 14px 34px rgba(0,0,0,.14);
}

.auth-mode-switches .auth-social-btn span{
  color:inherit;
  font-weight:700;
  font-size:15px;
  letter-spacing:.01em;
}

.auth-mode-switches .auth-social-btn:hover{
  background:rgba(255,255,255,.12);
  color:#fff;
  border-color:rgba(255,255,255,.54);
}

.auth-mode-switches .auth-social-btn.active{
  background:rgba(255,255,255,.92);
  color:#14110f;
  border-color:rgba(255,255,255,.92);
  box-shadow:0 18px 38px rgba(0,0,0,.18);
}

.auth-telegram-block{
  margin-top:14px;
}

.auth-panel .auth-telegram-btn,
.auth-telegram-btn{
  width:100%;
  min-height:50px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.36);
  background:linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.06) 100%);
  color:#fff;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 16px 36px rgba(0,0,0,.16);
}

.auth-panel .auth-telegram-btn span,
.auth-telegram-btn span{
  color:inherit;
}

.auth-panel .auth-telegram-btn:hover,
.auth-telegram-btn:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.10) 100%);
  border-color:rgba(255,255,255,.58);
  color:#fff;
}

.auth-modal .auth-recovery-note{
  margin-top:4px;
  line-height:1.5;
}

body.app-dark-shell .auth-mode-switches .auth-social-btn{
  background:rgba(255,255,255,.08);
  color:#f7f1ea;
  border-color:rgba(255,255,255,.32);
}

body.app-dark-shell .auth-mode-switches .auth-social-btn:hover{
  background:rgba(255,255,255,.12);
  color:#fff;
  border-color:rgba(255,255,255,.56);
}

body.app-dark-shell .auth-mode-switches .auth-social-btn.active{
  background:rgba(255,255,255,.96);
  color:#16120f;
  border-color:rgba(255,255,255,.96);
}

body.app-dark-shell .auth-panel .auth-telegram-btn,
body.app-dark-shell .auth-telegram-btn{
  background:linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.05) 100%);
  color:#fff;
  border-color:rgba(255,255,255,.34);
}

body.app-dark-shell .auth-panel .auth-telegram-btn:hover,
body.app-dark-shell .auth-telegram-btn:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.09) 100%);
  border-color:rgba(255,255,255,.56);
}


/* stage30b auth modal hard fix */
.site-header__avatar-link{
  text-decoration:none;
}

.auth-modal-status[hidden],
.auth-panel .status[hidden]{
  display:none !important;
}

.auth-mode-switches{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:4px;
}

.auth-mode-tab,
body.app-dark-shell .auth-mode-tab{
  display:flex !important;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:0 18px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.42) !important;
  background:rgba(255,255,255,.08) !important;
  color:#fff !important;
  font-size:15px;
  font-weight:800;
  letter-spacing:.01em;
  text-align:center;
  box-shadow:0 14px 34px rgba(0,0,0,.14);
}

.auth-mode-tab:hover,
body.app-dark-shell .auth-mode-tab:hover{
  background:rgba(255,255,255,.14) !important;
  border-color:rgba(255,255,255,.64) !important;
  color:#fff !important;
}

.auth-mode-tab.active,
.auth-mode-tab.is-active,
body.app-dark-shell .auth-mode-tab.active,
body.app-dark-shell .auth-mode-tab.is-active{
  background:rgba(255,255,255,.94) !important;
  border-color:rgba(255,255,255,.94) !important;
  color:#14110f !important;
}

.auth-telegram-block:empty{
  display:none !important;
}

.auth-panel .auth-telegram-btn,
.auth-telegram-btn,
body.app-dark-shell .auth-panel .auth-telegram-btn,
body.app-dark-shell .auth-telegram-btn{
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:50px;
  padding:0 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.42) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.06) 100%) !important;
  color:#fff !important;
  font-size:15px;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 16px 36px rgba(0,0,0,.16);
}

.auth-panel .auth-telegram-btn:hover,
.auth-telegram-btn:hover,
body.app-dark-shell .auth-panel .auth-telegram-btn:hover,
body.app-dark-shell .auth-telegram-btn:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,.10) 100%) !important;
  border-color:rgba(255,255,255,.66) !important;
  color:#fff !important;
}

.auth-panel .auth-telegram-btn span,
.auth-telegram-btn span{
  color:inherit !important;
}

/* stage31: mobile-first adaptive layout polish */
html,
body{
  max-width:100%;
  overflow-x:hidden;
}

img,
video,
canvas,
svg{
  max-width:100%;
}

.site-header__nav{
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.site-header__nav::-webkit-scrollbar{display:none;}

@media (max-width: 820px){
  :root{
    --shell-pad:14px;
  }

  body.app-dark-shell .site-scene__backdrop{
    background-position:center top;
  }

  .site-header{
    position:relative;
    z-index:80;
  }

  .site-header__inner{
    min-height:auto;
    padding:12px 14px 10px;
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
  }

  .site-header__brand-wrap{
    width:100%;
    justify-content:flex-start;
    gap:12px;
  }

  .site-header__avatar-btn{
    width:42px;
    height:42px;
    flex:0 0 42px;
  }

  .site-header__brand{
    font-size:26px;
    line-height:1;
  }

  .site-header__nav{
    width:100%;
    display:flex;
    flex-wrap:nowrap;
    justify-content:flex-start;
    gap:8px;
    overflow-x:auto;
    padding:2px 2px 4px;
    margin:0 -2px;
  }

  .site-header__nav-link{
    flex:0 0 auto;
    min-height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 13px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
    background:rgba(255,255,255,.045);
    font-size:12px;
    line-height:1;
    white-space:nowrap;
  }

  .site-header__nav-link.is-active{
    background:rgba(255,255,255,.14);
    border-color:rgba(255,255,255,.46);
  }

  .site-header__nav-link::after,
  .site-header__nav-divider{
    display:none !important;
  }

  .site-main{
    padding-top:12px;
    padding-bottom:18px;
  }

  .shell,
  .shell.shell-wide{
    padding-left:14px;
    padding-right:14px;
    padding-bottom:22px;
  }

  .site-footer{
    padding:16px 14px calc(16px + env(safe-area-inset-bottom));
  }

  .site-footer__inner{
    width:100%;
    display:grid;
    justify-items:center;
    gap:10px;
    text-align:center;
  }

  .site-footer__text{
    font-size:11px;
    line-height:1.45;
    max-width:340px;
  }

  .site-footer__links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px 12px;
  }

  .site-footer__links a{
    font-size:11px;
    line-height:1.25;
  }

  .auth-modal-dialog{
    width:calc(100vw - 24px) !important;
    max-height:calc(100dvh - 24px);
    margin:12px auto !important;
    padding:22px 18px 20px !important;
    overflow:auto;
  }

  .auth-modal .title{
    font-size:36px;
    line-height:1;
  }

  .auth-modal .subtitle{
    font-size:14px;
    line-height:1.45;
  }

  .auth-mode-switches{
    gap:8px;
  }

  .auth-mode-tab,
  body.app-dark-shell .auth-mode-tab{
    min-height:48px;
    padding:0 12px;
    font-size:14px;
    border-radius:12px;
  }

  .auth-inline-form,
  .form-grid{
    gap:12px;
  }

  .auth-modal input,
  input,
  select,
  textarea{
    min-height:46px;
    font-size:16px;
  }

  .auth-recovery-note,
  .auth-legal-note{
    font-size:13px;
    line-height:1.45;
  }
}

@media (max-width: 760px){
  .billing-ref-page,
  .tryon-ref-page,
  .profile-ref-page,
  .history-ref-shell--embedded,
  .legal-page{
    width:100%;
    padding-top:4px;
  }

  .billing-ref-header{
    gap:14px;
    margin-bottom:14px;
  }

  .billing-ref-title,
  .home-hero-panel__title{
    font-size:36px;
    line-height:1.04;
  }

  .billing-ref-balance-box{
    width:100%;
    min-width:0;
    padding:14px 16px;
  }

  .billing-ref-balance-box strong{
    font-size:25px;
  }

  .billing-ref-status{
    width:100%;
  }

  .billing-ref-grid{
    width:min(100%, 390px);
    grid-template-columns:1fr !important;
    gap:16px;
  }

  .billing-ref-card{
    max-width:none;
    min-height:0 !important;
    padding:24px 20px 18px;
  }

  .billing-ref-card-icon{
    width:54px;
    height:54px;
    margin-bottom:10px;
  }

  .billing-ref-card-count{
    font-size:46px;
  }

  .billing-ref-card-price{
    font-size:40px;
  }

  .billing-ref-card-divider{
    margin:20px 0 16px;
  }

  .billing-ref-security{
    padding-top:20px;
  }

  .billing-ref-security-text{
    align-items:flex-start;
    text-align:center;
    font-size:13px;
    line-height:1.4;
  }

  .billing-ref-logos{
    gap:14px 18px;
    font-size:18px;
  }

  .billing-ref-extra-grid{
    grid-template-columns:1fr;
    gap:16px;
    margin-top:24px;
  }

  .billing-ref-extra-card{
    padding:18px 16px;
  }

  .tryon-ref-grid{
    grid-template-columns:1fr;
    gap:16px;
  }

  .tryon-ref-left,
  .tryon-ref-result-card{
    padding:16px;
    border-radius:14px;
  }

  .tryon-ref-left-sections{
    gap:20px;
  }

  .tryon-ref-step + .tryon-ref-step{
    padding-top:14px;
  }

  .tryon-ref-step h2,
  .tryon-ref-result-card h2{
    font-size:16px;
  }

  .tryon-ref-upload-grid{
    gap:12px;
    margin-top:12px;
  }

  .tryon-ref-upload-grid-2,
  .tryon-ref-upload-grid-3,
  .tryon-ref-result-actions,
  .tryon-quality-segments,
  .tryon-ref-segmented{
    grid-template-columns:1fr !important;
  }

  .tryon-ref-drop,
  .tryon-ref-upload-grid-2 .tryon-ref-drop,
  .tryon-ref-upload-grid-3 .tryon-ref-drop{
    min-height:132px;
    padding:14px 10px;
  }

  .tryon-ref-drop-icon,
  .tryon-ref-cloth-icon{
    width:44px;
    height:44px;
  }

  .tryon-ref-drop-title{
    font-size:15px;
  }

  .tryon-ref-drop-sub{
    font-size:12px;
  }

  .tryon-ref-left-footer{
    margin-top:18px;
  }

  .tryon-ref-primary,
  .tryon-ref-secondary,
  .tryon-ref-result-btn{
    min-height:52px;
    height:auto;
    font-size:16px;
  }

  .tryon-ref-result-card{
    min-height:0 !important;
    height:auto;
  }

  .tryon-ref-result-wrap{
    min-height:360px !important;
    height:360px !important;
    padding:12px;
    align-items:center;
  }

  .tryon-ref-result-wrap.is-processing{
    min-height:360px !important;
    height:360px !important;
  }

  .tryon-generation{
    min-height:320px;
    gap:12px;
    transform:scale(.86);
    transform-origin:center center;
  }

  .tryon-generation__title{
    font-size:30px;
  }

  .history-ref-controls{
    display:grid;
    gap:14px;
    align-items:stretch;
  }

  .history-ref-lefthead{
    gap:10px;
  }

  .history-ref-title{
    font-size:24px;
  }

  .history-ref-filter,
  .history-type-filter,
  .history-ref-filter select{
    width:100% !important;
  }

  .history-type-segments,
  .history-ref-segmented{
    width:100%;
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding-bottom:2px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .history-type-segments::-webkit-scrollbar,
  .history-ref-segmented::-webkit-scrollbar{display:none;}

  .history-type-segments button,
  .history-ref-segmented button,
  .history-ref-favorites-btn,
  .history-ref-openall{
    flex:0 0 auto;
    min-height:44px;
    min-width:auto;
    padding:0 14px;
    font-size:13px;
    border-radius:999px;
  }

  .history-ref-board{
    margin-top:14px;
    border-radius:14px;
  }

  .history-ref-row{
    display:grid;
    grid-template-columns:1fr !important;
    gap:12px;
    padding:14px;
  }

  .history-ref-preview{
    width:100% !important;
    height:auto;
    max-height:280px;
    aspect-ratio:4/3;
    object-fit:cover;
  }

  .history-ref-meta-col{
    gap:8px;
  }

  .history-ref-date,
  .history-ref-time{
    font-size:15px;
  }

  .history-ref-actions-col{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px;
  }

  .history-ref-action{
    min-height:78px;
    padding:10px 8px;
    gap:8px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:12px;
    background:rgba(255,255,255,.035);
  }

  .history-ref-action-icon{
    width:28px;
    height:28px;
  }

  .history-ref-action-label{
    font-size:12px;
  }

  .profile-ref-page{
    gap:16px;
  }

  .profile-ref-panel{
    padding:18px 16px;
    border-radius:14px;
  }

  .profile-ref-identity{
    align-items:center;
    text-align:center;
    gap:14px;
  }

  .profile-ref-avatar{
    width:104px;
    height:104px;
    flex-basis:104px;
  }

  .profile-ref-page-title,
  .profile-ref-panel-title{
    font-size:22px;
  }

  .profile-ref-name{
    font-size:27px;
  }

  .profile-ref-handle{
    font-size:19px;
  }

  .profile-ref-row,
  .profile-ref-password-trigger{
    grid-template-columns:1fr 40px;
    min-height:auto;
    gap:10px;
    padding:14px 0;
  }

  .profile-ref-label{
    grid-column:1 / -1;
    font-size:13px;
  }

  .profile-ref-row input,
  .profile-ref-password-mask{
    font-size:16px;
  }

  .profile-ref-save,
  .profile-ref-action{
    width:100%;
    min-width:0;
  }

  .profile-ref-password-form{
    grid-template-columns:1fr;
  }

  .legal-card{
    padding:22px 16px !important;
    border-radius:14px !important;
  }

  .legal-card h1{
    font-size:32px !important;
    line-height:1.05;
  }

  .legal-card h2{
    font-size:20px;
  }

  .legal-card p,
  .legal-card li{
    font-size:14px;
  }

  .legal-table{
    display:block;
    width:100%;
    overflow-x:auto;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
  }
}

@media (max-width: 430px){
  .shell,
  .shell.shell-wide{
    padding-left:10px;
    padding-right:10px;
  }

  .site-header__inner{
    padding-left:10px;
    padding-right:10px;
  }

  .site-header__nav-link{
    min-height:36px;
    padding:0 11px;
    font-size:11px;
  }

  .site-header__brand{
    font-size:24px;
  }

  .auth-modal-dialog{
    width:calc(100vw - 16px) !important;
    max-height:calc(100dvh - 16px);
    margin:8px auto !important;
    padding:20px 14px 18px !important;
  }

  .auth-modal .title{
    font-size:32px;
  }

  .auth-mode-tab,
  body.app-dark-shell .auth-mode-tab{
    min-height:46px;
    padding:0 10px;
    font-size:13px;
  }

  .billing-ref-title{
    font-size:33px;
  }

  .billing-ref-card-count{
    font-size:42px;
  }

  .billing-ref-card-price{
    font-size:36px;
  }

  .tryon-ref-left,
  .tryon-ref-result-card,
  .profile-ref-panel,
  .billing-ref-card,
  .billing-ref-extra-card{
    padding-left:14px;
    padding-right:14px;
  }

  .tryon-ref-result-wrap,
  .tryon-ref-result-wrap.is-processing{
    height:330px !important;
    min-height:330px !important;
  }

  .history-ref-row{
    padding:12px;
  }

  .history-ref-actions-col{
    gap:8px;
  }

  .site-footer__links{
    gap:7px 10px;
  }
}

/* stage31b: mobile fixes for actual segmented control class names */
@media (max-width: 760px){
  .tryon-ref-quality-toggle{
    grid-template-columns:1fr !important;
    gap:10px;
  }

  .tryon-ref-quality-btn{
    min-height:56px;
    width:100%;
  }

  .history-ref-type-tabs{
    width:100%;
    display:flex !important;
    gap:8px;
    overflow-x:auto;
    padding-bottom:2px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .history-ref-type-tabs::-webkit-scrollbar{display:none;}

  .history-ref-type-tab{
    flex:0 0 auto;
    min-height:44px;
    min-width:auto;
    padding:0 14px;
    font-size:13px;
    border-radius:999px;
  }
}

/* 2026-05-04 mobile auth/layout polish */
@media (max-width: 900px){
  html{
    -webkit-text-size-adjust:100%;
  }
  body.app-dark-shell .site-scene__backdrop{
    background-position:center top;
  }
  .site-header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(0,0,0,.86);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .site-header__inner{
    min-height:auto;
    padding:10px max(12px, env(safe-area-inset-left)) 10px max(12px, env(safe-area-inset-right));
    gap:10px;
    align-items:center;
  }
  .site-header__brand-wrap{
    width:100%;
    gap:12px;
  }
  .site-header__avatar-btn{
    width:38px;
    height:38px;
  }
  .site-header__brand{
    font-size:25px;
  }
  .site-header__nav{
    width:100%;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    justify-content:flex-start;
    gap:8px;
    padding:2px 2px 4px;
    margin:0 -2px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .site-header__nav::-webkit-scrollbar{
    display:none;
  }
  .site-header__nav-link{
    flex:0 0 auto;
    min-height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 12px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    background:rgba(255,255,255,.045);
    font-size:12px;
    letter-spacing:.01em;
    white-space:nowrap;
  }
  .site-header__nav-link.is-active{
    border-color:rgba(255,255,255,.62);
    background:rgba(255,255,255,.13);
  }
  .site-header__nav-divider{
    display:none;
  }
  .site-main{
    padding:12px 0 18px;
  }
  .shell.shell-wide{
    padding-left:12px;
    padding-right:12px;
    padding-bottom:18px;
  }
  .site-footer{
    padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  }
  .site-footer__inner{
    gap:8px;
  }
  .site-footer__text{
    font-size:11px;
    line-height:1.35;
    opacity:.78;
  }
  .site-footer__links{
    gap:10px;
    justify-content:center;
  }
  .site-footer__links a{
    font-size:11px;
  }
  .auth-modal-dialog{
    width:min(100% - 20px, 440px);
    max-height:min(88vh, 720px);
    overflow:auto;
    padding:18px 16px;
    border-radius:18px;
  }
  .auth-mode-switches{
    gap:8px;
  }
  .auth-mode-tab,
  .auth-inline-form button,
  .auth-telegram-btn{
    min-height:44px;
  }
}

@media (max-width: 720px){
  .home-hero-panel{
    min-height:calc(100svh - 118px);
    padding:34px 18px 42px;
  }
  .home-hero-panel__inner{
    gap:12px;
  }
  .home-hero-panel__title{
    font-size:clamp(32px, 9.4vw, 42px);
    line-height:1.12;
  }

  .billing-ref-page,
  .profile-ref-page,
  .history-ref-shell--embedded,
  .tryon-ref-page{
    padding-top:0;
  }
  .billing-ref-header{
    flex-direction:row;
    align-items:center;
    margin-bottom:14px;
  }
  .billing-ref-eyebrow{
    font-size:12px;
  }
  .billing-ref-title{
    margin-top:6px;
    font-size:30px;
  }
  .billing-ref-balance-box{
    min-width:128px;
    padding:10px 12px;
    gap:3px;
  }
  .billing-ref-balance-box span{
    font-size:11px;
  }
  .billing-ref-balance-box strong{
    font-size:18px;
  }
  .billing-ref-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }
  .billing-ref-card{
    min-height:242px;
    padding:14px 10px 10px;
    border-radius:14px;
  }
  .billing-ref-card-icon{
    width:38px;
    height:38px;
    margin-bottom:10px;
  }
  .billing-ref-card-count{
    font-size:30px;
    margin-bottom:5px;
  }
  .billing-ref-card-unit,
  .billing-ref-card-name{
    font-size:12px;
  }
  .billing-ref-card-divider{
    width:52px;
    margin:14px 0 12px;
  }
  .billing-ref-card-price{
    font-size:25px;
    margin-bottom:6px;
  }
  .billing-ref-card-meta{
    min-height:30px;
    margin-bottom:10px;
    font-size:11px;
  }
  .billing-ref-card-name{
    min-height:16px;
    margin-bottom:10px;
  }
  .billing-ref-buy{
    min-height:42px;
    font-size:14px;
  }
  .billing-ref-security{
    gap:12px;
    padding-top:18px;
  }
  .billing-ref-security-text{
    font-size:12px;
    text-align:center;
    justify-content:center;
  }
  .billing-ref-logos{
    gap:10px 14px;
    font-size:15px;
  }
  .billing-ref-extra-grid{
    gap:12px;
    margin-top:22px;
  }
  .billing-ref-extra-card{
    padding:16px 14px;
    border-radius:14px;
  }
  .billing-ref-extra-card h2{
    font-size:19px;
  }
  .payment-item{
    padding:14px;
    border-radius:14px;
  }
  .payment-top{
    flex-direction:column;
    gap:8px;
  }

  .tryon-ref-grid{
    gap:12px;
  }
  .tryon-ref-left,
  .tryon-ref-result-card{
    padding:14px;
    border-radius:16px;
  }
  .tryon-ref-left-sections{
    gap:14px;
  }
  .tryon-ref-step{
    padding:0 !important;
  }
  .tryon-ref-step + .tryon-ref-step{
    padding-top:0 !important;
  }
  .tryon-ref-step h2,
  .tryon-ref-result-card h2{
    font-size:16px;
  }
  .tryon-ref-upload-grid{
    gap:8px;
    margin-top:10px;
  }
  .tryon-ref-upload-grid-2{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .tryon-ref-upload-grid-3{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
  .tryon-ref-upload-grid-2 .tryon-ref-drop,
  .tryon-ref-upload-grid-3 .tryon-ref-drop{
    min-height:104px;
  }
  .tryon-ref-drop{
    gap:4px;
    padding:10px 6px;
    border-radius:14px;
  }
  .tryon-ref-drop-icon,
  .tryon-ref-cloth-icon{
    width:32px;
    height:32px;
    margin-bottom:3px;
  }
  .tryon-ref-drop-title{
    font-size:13px;
  }
  .tryon-ref-drop-sub{
    font-size:10px;
  }
  .tryon-ref-left-footer{
    gap:10px;
    margin-top:14px;
  }
  .tryon-ref-actions{
    grid-template-columns:1fr .72fr;
    gap:8px;
  }
  .tryon-ref-primary,
  .tryon-ref-secondary{
    height:46px;
    min-height:46px;
    font-size:14px;
    border-radius:14px;
  }
  .tryon-ref-status{
    font-size:12px;
    line-height:1.35;
  }
  .tryon-ref-result-card{
    min-height:0;
    gap:12px;
  }
  .tryon-ref-result-wrap{
    min-height:clamp(310px, 54svh, 560px);
    height:clamp(310px, 54svh, 560px);
    padding:10px;
    border-radius:14px;
  }
  .tryon-ref-result-actions{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
  }
  .tryon-ref-result-btn{
    min-height:44px;
    font-size:14px;
    border-radius:14px;
  }

  .profile-ref-page{
    gap:12px;
  }
  .profile-ref-panel{
    padding:16px 14px;
    border-radius:16px;
  }
  .profile-ref-panel--hero{
    padding-bottom:18px;
  }
  .profile-ref-page-title,
  .profile-ref-panel-title{
    margin-bottom:14px;
    font-size:22px;
  }
  .profile-ref-identity{
    flex-direction:row;
    align-items:center;
    gap:14px;
  }
  .profile-ref-avatar{
    width:78px;
    height:78px;
    flex-basis:78px;
  }
  .profile-ref-avatar-placeholder{
    width:32px;
    height:32px;
  }
  .profile-ref-avatar-placeholder::after{
    width:46px;
    height:24px;
    bottom:-13px;
  }
  .profile-ref-name{
    font-size:24px;
  }
  .profile-ref-handle{
    font-size:17px;
  }
  .profile-ref-avatar-note{
    margin-top:2px;
    font-size:11px;
  }
  .profile-ref-row,
  .profile-ref-password-trigger{
    min-height:64px;
    grid-template-columns:1fr 38px;
    gap:8px;
  }
  .profile-ref-label{
    grid-column:1 / -1;
    font-size:13px;
  }
  .profile-ref-row input,
  .profile-ref-password-mask{
    font-size:16px;
  }
  .profile-ref-edit{
    width:38px;
    height:38px;
  }
  .profile-ref-save,
  .profile-ref-password-form button{
    width:100%;
    min-width:0;
    min-height:46px;
    border-radius:14px;
  }
  .profile-ref-password-form{
    grid-template-columns:1fr;
    gap:12px;
  }
  .profile-ref-password-form input{
    height:46px;
  }
  .profile-ref-actions{
    gap:10px;
    margin-top:16px;
  }
  .profile-ref-action{
    min-height:48px;
    width:100%;
    border-radius:14px;
    font-size:14px;
  }

  .history-ref-controls{
    gap:12px;
    padding-top:0;
  }
  .history-ref-lefthead{
    gap:10px;
  }
  .history-ref-title{
    font-size:22px;
  }
  .history-ref-type-tabs{
    width:100%;
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding-bottom:2px;
    scrollbar-width:none;
  }
  .history-ref-type-tabs::-webkit-scrollbar{
    display:none;
  }
  .history-ref-type-tab{
    flex:0 0 auto;
    min-height:36px;
    padding:0 12px;
    border-radius:999px;
    font-size:12px;
  }
  .history-ref-favorites-btn,
  .history-ref-openall{
    width:100%;
    min-height:44px;
    min-width:0;
    border-radius:14px;
    font-size:14px;
  }
  .history-ref-board{
    margin-top:12px;
    border-radius:16px;
  }
  .history-ref-row{
    grid-template-columns:112px minmax(0, 1fr);
    gap:10px;
    padding:10px;
    align-items:start;
  }
  .history-ref-preview{
    width:112px;
    height:148px;
    border-radius:12px;
  }
  .history-ref-meta-col{
    gap:6px;
  }
  .history-ref-type{
    font-size:11px;
  }
  .history-ref-date,
  .history-ref-time{
    font-size:13px;
  }
  .history-ref-actions-col{
    grid-column:1 / -1;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:6px;
  }
  .history-ref-action{
    min-height:66px;
    padding:8px 4px;
    gap:6px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    background:rgba(255,255,255,.025);
  }
  .history-ref-action-icon{
    width:24px;
    height:24px;
  }
  .history-ref-action-label{
    font-size:10px;
  }
}

@media (max-width: 380px){
  .billing-ref-grid{
    gap:8px;
  }
  .billing-ref-card{
    padding-left:8px;
    padding-right:8px;
  }
  .billing-ref-card-price{
    font-size:22px;
  }
  .tryon-ref-actions{
    grid-template-columns:1fr;
  }
  .history-ref-actions-col{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

/* 2026-05-06 safe navigation transition overlay.
   This does not change opacity/background of glass cards or page blocks. */
.site-transition-shade{
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 42%, rgba(232,205,142,.24), transparent 0 26%, rgba(0,0,0,0) 44%),
    linear-gradient(180deg, rgba(0,0,0,.992), rgba(10,7,4,.998));
  opacity:0;
  transform:scale(1.012);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:
    opacity 980ms cubic-bezier(.22,.8,.24,1),
    transform 980ms cubic-bezier(.22,.8,.24,1);
}
.site-transition-shade::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:min(56vw, 360px);
  height:1px;
  transform:translate(-50%, 28px) scaleX(.18);
  border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(232,205,142,.95), transparent);
  opacity:0;
  transition:
    opacity 760ms ease,
    transform 1050ms cubic-bezier(.22,.8,.24,1);
}
.site-transition-mark{
  position:relative;
  z-index:1;
  font-family:"Cormorant Garamond", serif;
  font-size:clamp(36px, 6.4vw, 74px);
  font-weight:700;
  letter-spacing:.045em;
  color:rgba(255,247,225,.96);
  text-shadow:
    0 0 32px rgba(232,205,142,.25),
    0 14px 46px rgba(0,0,0,.55);
  opacity:0;
  transform:translateY(10px) scale(.985);
  transition:
    opacity 820ms ease,
    transform 1050ms cubic-bezier(.22,.8,.24,1);
}
html.pre-nav-transition .site-transition-shade,
body.motion-ready.is-page-leaving .site-transition-shade{
  opacity:1;
  transform:scale(1);
}
html.pre-nav-transition .site-transition-shade::before,
body.motion-ready.is-page-leaving .site-transition-shade::before{
  opacity:1;
  transform:translate(-50%, 28px) scaleX(1);
}
html.pre-nav-transition .site-transition-mark,
body.motion-ready.is-page-leaving .site-transition-mark{
  opacity:1;
  transform:translateY(0) scale(1);
}
html.pre-nav-transition.transition-release .site-transition-shade,
body.motion-ready.is-page-enter-active .site-transition-shade{
  opacity:0;
  transform:scale(1.012);
}
html.pre-nav-transition.transition-release .site-transition-shade::before,
body.motion-ready.is-page-enter-active .site-transition-shade::before{
  opacity:0;
}
html.pre-nav-transition.transition-release .site-transition-mark,
body.motion-ready.is-page-enter-active .site-transition-mark{
  opacity:0;
  transform:translateY(-8px) scale(1.012);
}
@media (prefers-reduced-motion: reduce){
  .site-transition-shade{display:none !important;}
}


/* History retention note */
.history-ref-retention{
  margin-top:4px;
  font-size:12px;
  line-height:1.25;
  color:rgba(245,229,190,.70);
}
.history-ref-favorite-toggle.is-favorite .history-ref-action-icon{
  color:#e8cd8e;
  fill:#e8cd8e;
}


/* Advertising try-on funnel — 20260511adfunnel1 */
.tryon-funnel-hero{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(260px,.55fr);
  gap:18px;
  align-items:stretch;
  margin-bottom:18px;
}

.tryon-funnel-hero__content,
.tryon-funnel-trust,
.tryon-ref-trust-note{
  border:1px solid rgba(255,255,255,.46);
  background:rgba(18,14,10,.28);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 24px 70px rgba(0,0,0,.18);
}

.tryon-funnel-hero__content{
  position:relative;
  overflow:hidden;
  border-radius:30px;
  padding:clamp(28px,4.4vw,58px);
}

.tryon-funnel-hero__content::after{
  content:"";
  position:absolute;
  inset:auto -12% -42% auto;
  width:min(520px,70vw);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(232,205,142,.18), transparent 64%);
  pointer-events:none;
}

.tryon-funnel-hero__eyebrow{
  position:relative;
  z-index:1;
  margin-bottom:12px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,247,225,.72);
}

.tryon-funnel-hero__title{
  position:relative;
  z-index:1;
  max-width:920px;
  margin:0;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(42px,6.8vw,90px);
  line-height:.92;
  letter-spacing:-.045em;
  color:rgba(255,250,238,.98);
  text-wrap:balance;
}

.tryon-funnel-hero__lead{
  position:relative;
  z-index:1;
  max-width:720px;
  margin:22px 0 0;
  font-size:clamp(15px,1.8vw,20px);
  line-height:1.7;
  color:rgba(255,255,255,.78);
}

.tryon-funnel-hero__pain{
  position:relative;
  z-index:1;
  max-width:760px;
  margin:14px 0 0;
  font-size:15px;
  line-height:1.65;
  color:rgba(255,255,255,.68);
}

.tryon-funnel-hero__cta{
  position:relative;
  z-index:1;
  margin-top:28px;
  min-height:50px;
  padding:0 24px;
  border-radius:999px;
  border:1px solid rgba(232,205,142,.62);
  background:linear-gradient(135deg,rgba(247,230,184,.98),rgba(215,173,91,.94));
  color:#17110a;
  font-weight:850;
  letter-spacing:.02em;
  text-transform:none;
  box-shadow:0 18px 42px rgba(0,0,0,.24);
}

.tryon-funnel-trust{
  border-radius:30px;
  padding:24px;
  display:grid;
  align-content:center;
  gap:10px;
}

.tryon-funnel-trust strong,
.tryon-ref-trust-note strong{
  color:rgba(255,250,238,.96);
  font-size:16px;
}

.tryon-funnel-trust span,
.tryon-ref-trust-note span{
  color:rgba(255,255,255,.72);
  font-size:14px;
  line-height:1.55;
}

.tryon-ref-trust-note{
  border-radius:22px;
  padding:16px 18px;
  display:grid;
  gap:6px;
}

.tryon-ref-drop-sub{
  max-width:260px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.45;
}

#runTryonBtn.tryon-ref-primary{
  min-height:52px;
  font-size:15px;
  font-weight:850;
  text-transform:none;
  letter-spacing:.02em;
}

@media (max-width: 920px){
  .tryon-funnel-hero{
    grid-template-columns:1fr;
  }
}

@media (max-width: 640px){
  .tryon-funnel-hero__content,
  .tryon-funnel-trust{
    border-radius:24px;
  }

  .tryon-funnel-hero__content{
    padding:28px 20px;
  }

  .tryon-funnel-hero__title{
    font-size:clamp(40px,13vw,62px);
  }

  .tryon-funnel-hero__cta{
    width:100%;
  }
}