.hto-page{--hto-gold:#C6AC73;--hto-gold-dim:rgba(198,172,115,0.15);--hto-surface:#1a1d22;--hto-border:rgba(255,255,255,0.08);--hto-border-gold:rgba(198,172,115,0.3);--hto-text-dim:rgba(255,255,255,0.4);--hto-radius:4px;--hto-radius-lg:8px;--hto-transition:0.25s ease}
.hto-hero{padding:80px 0 60px;text-align:center;position:relative;overflow:hidden}
.hto-hero__title{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:400;color:rgba(255,255,255,.95);margin:0 0 20px}
.hto-hero__title em{font-style:italic;color:var(--hto-gold)}
.hto-hero__subtitle{font-size:1rem;color:var(--hto-text-dim);max-width:480px;margin:0 auto;line-height:1.7}
.hto-tool{padding:0 0 80px}
.hto-layout{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
@media(max-width:900px){.hto-layout{grid-template-columns:1fr}}
.hto-step__header{display:flex;align-items:baseline;gap:14px;margin-bottom:20px}
.hto-step__number{font-size:11px;font-weight:600;color:var(--hto-gold);opacity:.7}
.hto-step__title{font-size:1.1rem;color:rgba(255,255,255,.9);margin:0}
.hto-upload-zone{position:relative;border:1px solid var(--hto-border);border-radius:var(--hto-radius-lg);background:var(--hto-surface);min-height:240px;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden}
.hto-upload-zone:hover,.hto-upload-zone.drag-over{border-color:var(--hto-border-gold)}
.hto-upload-zone.drag-over{border-style:dashed}
.hto-upload-input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;z-index:2}
.hto-upload-content{text-align:center;padding:40px 24px;pointer-events:none}
.hto-upload-icon{color:var(--hto-gold);margin-bottom:16px}
.hto-upload-text{font-size:.95rem;color:rgba(255,255,255,.7);margin:0 0 8px}
.hto-upload-sub{font-size:.85rem;color:var(--hto-text-dim);margin:0 0 12px}
.hto-upload-link{color:var(--hto-gold)}
.hto-upload-hint{font-size:.75rem;color:var(--hto-text-dim);margin:0}
.hto-upload-preview{position:relative;width:100%;height:100%;min-height:240px}
.hto-preview-image{width:100%;height:100%;min-height:240px;object-fit:cover;display:block;border-radius:var(--hto-radius-lg)}
.hto-preview-remove{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3}
.hto-privacy-note{display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--hto-text-dim);margin:12px 0 0}
.hto-style-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.hto-filter{font-size:11px;text-transform:uppercase;padding:6px 14px;border-radius:20px;border:1px solid var(--hto-border);background:transparent;color:var(--hto-text-dim);cursor:pointer}
.hto-filter:hover{border-color:var(--hto-border-gold);color:var(--hto-gold)}
.hto-filter.active{border-color:var(--hto-gold);background:var(--hto-gold-dim);color:var(--hto-gold)}
.hto-style-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-height:480px;overflow-y:auto;padding-right:4px;scrollbar-width:thin}
@media(max-width:600px){.hto-style-grid{grid-template-columns:repeat(2,1fr);max-height:360px}}
.hto-style-card{position:relative;border-radius:var(--hto-radius);overflow:hidden;cursor:pointer;border:2px solid transparent;aspect-ratio:3/4;background:var(--hto-surface)}
.hto-style-card:hover{transform:translateY(-2px);border-color:rgba(198,172,115,.4)}
.hto-style-card.selected{border-color:var(--hto-gold)}
.hto-style-card img{width:100%;height:100%;object-fit:cover;display:block}
.hto-style-card__overlay{position:absolute;bottom:0;left:0;right:0;padding:24px 10px 10px;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);opacity:0;transition:opacity var(--hto-transition)}
.hto-style-card:hover .hto-style-card__overlay{opacity:1}
.hto-style-card__name{font-size:.7rem;font-weight:500;color:rgba(255,255,255,.9);line-height:1.3}
.hto-style-cta{margin-top:20px;padding-top:20px;border-top:1px solid var(--hto-border);display:flex;align-items:center;justify-content:space-between;gap:12px}
.hto-style-cta__text{font-size:.8rem;color:var(--hto-text-dim);margin:0}
.hto-style-cta__link{font-size:.8rem;color:var(--hto-gold);text-decoration:none}
.hto-loading{border:1px solid var(--hto-border);border-radius:var(--hto-radius-lg);padding:60px 24px;text-align:center;background:var(--hto-surface)}
.hto-spinner{width:40px;height:40px;border:2px solid rgba(198,172,115,.15);border-top-color:var(--hto-gold);border-radius:50%;animation:hto-spin .9s linear infinite;margin:0 auto 20px}
@keyframes hto-spin{to{transform:rotate(360deg)}}
.hto-result{border:1px solid var(--hto-border-gold);border-radius:var(--hto-radius-lg);padding:24px;background:var(--hto-surface)}
.hto-result__images{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.hto-result__before,.hto-result__after{flex:1;position:relative}
.hto-result__img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--hto-radius);display:block}
.hto-result__label{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font-size:10px;text-transform:uppercase;color:rgba(255,255,255,.7);background:rgba(0,0,0,.5);padding:3px 10px;border-radius:10px}
.hto-result__divider{color:var(--hto-gold);flex-shrink:0}
.hto-result__style-name{font-size:.85rem;color:var(--hto-gold);text-align:center;margin-bottom:20px;font-style:italic}
.hto-result__actions{display:flex;flex-direction:column;gap:10px}
.hto-book-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px 24px;background:var(--hto-gold);color:#14161A;font-size:12px;font-weight:600;text-transform:uppercase;text-decoration:none;border-radius:var(--hto-radius);border:none;cursor:pointer}
.hto-try-another{width:100%;padding:12px 24px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.hto-how{padding:80px 0;border-top:1px solid var(--hto-border)}
.hto-how__title{text-align:center;font-size:1.5rem;color:rgba(255,255,255,.9);margin:0 0 48px}
.hto-steps-row{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
@media(max-width:700px){.hto-steps-row{grid-template-columns:1fr;gap:32px;max-width:320px;margin:0 auto}}
.hto-how__step{text-align:center}
.hto-how__icon{width:60px;height:60px;border-radius:50%;border:1px solid var(--hto-border-gold);background:var(--hto-gold-dim);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;color:var(--hto-gold)}
.hto-how__step-title{font-size:1rem;color:rgba(255,255,255,.85);margin:0 0 10px}
.hto-how__step-desc{font-size:.85rem;color:var(--hto-text-dim);line-height:1.7;margin:0}
.hto-premium{padding:0 0 100px}
.hto-premium__inner{background:var(--hto-surface);border:1px solid var(--hto-border-gold);border-radius:var(--hto-radius-lg);padding:56px 48px;text-align:center;position:relative;overflow:hidden}
.hto-premium__badge{font-size:10px;text-transform:uppercase;color:var(--hto-gold);border:1px solid var(--hto-border-gold);padding:4px 12px;border-radius:20px;margin-bottom:20px;display:inline-block}
.hto-premium__title{font-size:clamp(1.3rem,3vw,1.8rem);color:rgba(255,255,255,.92);margin:0 0 16px}
.hto-premium__desc{font-size:.95rem;color:var(--hto-text-dim);max-width:520px;margin:0 auto 32px;line-height:1.75}
.hto-premium__desc em{color:var(--hto-gold);font-style:normal}
.hto-result-step{animation:hto-fade-in .4s ease}
@keyframes hto-fade-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.hto-hero{padding:48px 0 40px}.hto-result__images{flex-direction:column;gap:10px}}