:root{--primary:#595893;--primary-container:#e2dfff;--primary-container-dim:#a7a6e6;--on-primary:#fff;--on-primary-container:#3a3a72;--secondary:#4a6458;--secondary-container:#c9e6d7;--on-secondary-container:#4e685c;--surface:#fff8f6;--surface-bright:#fff8f6;--surface-container-lowest:#fff;--surface-container-low:#fbf2ef;--surface-container:#f5ece9;--surface-container-high:#efe6e3;--on-surface:#1e1b19;--on-surface-variant:#47464f;--outline:#777680;--outline-variant:#c8c5d1;--error:#ba1a1a;--error-container:#ffdad6;--font-display:"Playfair Display", Georgia, serif;--font-body:"DM Sans", system-ui, sans-serif;--soft-shadow:0 20px 50px -15px #59589314;--soft-shadow-md:0 8px 24px -8px #5958931f;font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-size:16px}*{box-sizing:border-box}body{background:var(--surface);color:var(--on-surface);min-height:100dvh;margin:0;padding:0}#root{min-height:100dvh}.material-symbols-outlined{font-variation-settings:"FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;direction:ltr;font-family:Material Symbols Outlined;font-style:normal;line-height:1;display:inline-block}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.animate-in{animation:.7s ease-out both fadeIn}@keyframes spin{to{transform:rotate(360deg)}}.page{background:var(--surface);flex-direction:column;min-height:100dvh;display:flex}.header{z-index:50;-webkit-backdrop-filter:blur(12px);background:#fff8f6d9;justify-content:space-between;align-items:center;height:64px;padding:0 24px;display:flex;position:fixed;top:0;left:0;right:0;box-shadow:0 10px 40px -15px #59589314}.header-icon-btn{cursor:pointer;color:var(--primary);background:0 0;border:none;align-items:center;padding:4px;transition:transform .2s;display:flex}.header-icon-btn:active{transform:scale(.9)}.header-logo{font-family:var(--font-display);letter-spacing:.18em;color:var(--primary);font-size:18px;font-weight:500}.header-avatar{width:32px;height:32px;color:var(--primary);background:#a2a2e640;border-radius:50%;justify-content:center;align-items:center;display:flex;overflow:hidden}.main{flex:1;width:100%;max-width:512px;margin:0 auto;padding:88px 24px 96px}.bottom-nav{z-index:50;padding:10px 24px max(12px, env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(12px);background:#fff8f6eb;border-radius:20px 20px 0 0;justify-content:space-around;align-items:center;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -10px 40px -15px #5958931f}.nav-item{color:var(--outline);letter-spacing:.04em;cursor:pointer;font-size:11px;font-weight:600;font-family:var(--font-body);background:0 0;border:none;border-radius:999px;flex-direction:column;align-items:center;gap:2px;padding:4px 12px;text-decoration:none;transition:color .2s;display:flex}.nav-item:hover{color:var(--primary)}.nav-item.active{color:var(--primary);background:#a2a2e633}.bg-blob-1{filter:blur(80px);pointer-events:none;z-index:0;background:#5958930d;border-radius:50%;width:260px;height:260px;position:fixed;top:80px;right:-10%}.bg-blob-2{filter:blur(100px);pointer-events:none;z-index:0;background:#4a64580d;border-radius:50%;width:320px;height:320px;position:fixed;bottom:80px;left:-10%}.label-tag{letter-spacing:.1em;text-transform:uppercase;color:var(--primary);margin-bottom:8px;font-size:12px;font-weight:600;display:block}.input-hero{margin-bottom:28px}.input-hero h2{font-family:var(--font-display);color:var(--on-surface);margin:0;font-size:28px;font-weight:500;line-height:1.3}.input-card{background:var(--surface-container-lowest);box-shadow:var(--soft-shadow);border-radius:24px;padding:28px 24px}.upload-area{aspect-ratio:3/4;border:2px dashed var(--outline-variant);cursor:pointer;background:var(--surface-container-low);border-radius:20px;width:100%;max-height:320px;margin-bottom:20px;transition:border-color .2s,background .2s;position:relative;overflow:hidden}.upload-area:hover,.upload-area.dragging{border-color:var(--primary);background:#5958930a}.upload-area.has-photo{border-style:solid;border-color:var(--primary)}.file-input{display:none}.upload-placeholder{flex-direction:column;justify-content:center;align-items:center;gap:8px;width:100%;height:100%;padding:24px;display:flex}.upload-icon-wrap{background:var(--surface-container);width:56px;height:56px;color:var(--primary);border-radius:50%;justify-content:center;align-items:center;margin-bottom:4px;display:flex}.upload-text{color:var(--on-surface);margin:0;font-size:15px;font-weight:500}.upload-hint{color:var(--outline);text-align:center;margin:0;font-size:13px;line-height:1.6}.photo-preview{width:100%;height:100%;position:relative}.photo-preview img{object-fit:cover;width:100%;height:100%;display:block}.photo-overlay{opacity:0;background:#00000059;justify-content:center;align-items:center;transition:opacity .2s;display:flex;position:absolute;inset:0}.photo-preview:hover .photo-overlay{opacity:1}.photo-overlay span{color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#fff3;border-radius:999px;padding:8px 20px;font-size:14px;font-weight:500}.body-inputs{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;display:grid}.input-group{flex-direction:column;gap:6px;display:flex}.input-label{letter-spacing:.05em;text-transform:uppercase;color:var(--on-surface-variant);font-size:12px;font-weight:600}.input-wrapper{border:1.5px solid var(--outline-variant);background:var(--surface-container-low);border-radius:12px;align-items:center;transition:border-color .2s;display:flex;overflow:hidden}.input-wrapper:focus-within{border-color:var(--primary)}.input{color:var(--on-surface);font-size:16px;font-family:var(--font-body);background:0 0;border:none;outline:none;flex:1;width:0;padding:12px 14px}.input::placeholder{color:var(--outline-variant)}.input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-unit{color:var(--outline);flex-shrink:0;padding-right:14px;font-size:13px;font-weight:500}.analyze-btn{letter-spacing:.1em;text-transform:uppercase;width:100%;font-size:13px;font-weight:700;font-family:var(--font-body);cursor:not-allowed;background:var(--surface-container-high);color:var(--outline);border:none;border-radius:999px;justify-content:center;align-items:center;gap:8px;margin-bottom:16px;padding:16px;transition:all .3s;display:flex}.analyze-btn.ready{background:var(--primary);color:var(--on-primary);cursor:pointer;box-shadow:0 8px 24px #5958934d}.analyze-btn.ready:hover{transform:translateY(-1px);box-shadow:0 12px 32px #59589366}.analyze-btn.ready:active{transform:scale(.97)}.checklist{justify-content:center;gap:16px;margin:0;padding:0;list-style:none;display:flex}.checklist li{color:var(--outline-variant);align-items:center;gap:4px;font-size:12px;font-weight:500;transition:color .2s;display:flex}.checklist li.done{color:var(--primary)}.check-icon{font-size:13px;font-weight:700}.error-msg{background:var(--error-container);color:var(--error);border-radius:12px;margin-bottom:16px;padding:12px 16px;font-size:14px}.loading-main{justify-content:center;align-items:center;display:flex}.loading-card{background:var(--surface-container-lowest);box-shadow:var(--soft-shadow);text-align:center;border-radius:24px;flex-direction:column;align-items:center;gap:20px;width:100%;padding:64px 40px;display:flex}.spinner{border:3px solid var(--primary-container);border-top-color:var(--primary);border-radius:50%;width:48px;height:48px;animation:.9s linear infinite spin}.loading-title{font-family:var(--font-display);color:var(--on-surface);margin:0;font-size:20px;font-style:italic;font-weight:500}.loading-sub{color:var(--on-surface-variant);margin:0;font-size:14px;line-height:1.6}.report-hero{margin-bottom:28px}.report-hero-card{box-shadow:var(--soft-shadow);background:#c9e6d74d;border:1px solid #ffffff80;border-radius:24px;margin-top:16px;padding:24px}.body-type-label{color:var(--on-secondary-container,#4e685c);margin:0 0 6px;font-size:14px;font-weight:500}.body-type-name{font-family:var(--font-display);color:var(--on-surface);margin:0 0 12px;font-size:22px;font-style:italic;font-weight:500}.body-type-summary{color:var(--on-surface-variant);margin:0;font-size:15px;line-height:1.7}.report-section{margin-bottom:28px}.section-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.section-title{font-family:var(--font-display);color:var(--on-surface);margin:0;font-size:22px;font-weight:500}.style-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.style-card{background:var(--surface-container-lowest);box-shadow:var(--soft-shadow);text-align:center;border-radius:24px;flex-direction:column;align-items:center;gap:10px;padding:20px 16px;transition:transform .2s;display:flex}.style-card:active{transform:scale(.97)}.style-card-icon{background:var(--surface-container);width:48px;height:48px;color:var(--primary);border-radius:50%;justify-content:center;align-items:center;display:flex}.style-card-cat{letter-spacing:.08em;text-transform:uppercase;color:var(--primary);font-size:10px;font-weight:700}.style-card-name{color:var(--on-surface);font-size:13px;font-weight:500;line-height:1.4}.color-palette-card{background:var(--surface-container-lowest);box-shadow:var(--soft-shadow);border-radius:24px;padding:24px}.color-swatches{flex-wrap:wrap;justify-content:space-around;align-items:flex-end;gap:12px;margin-bottom:16px;display:flex}.color-swatch{flex-direction:column;align-items:center;gap:8px;display:flex}.color-circle{border-radius:50%;width:52px;height:52px;box-shadow:inset 0 2px 6px #0000001a,0 2px 8px #0000000f}.color-name{letter-spacing:.04em;color:var(--outline);text-transform:uppercase;font-size:11px;font-weight:600}.color-caption{color:var(--on-surface-variant);text-align:center;margin:0;font-size:14px;font-style:italic;line-height:1.5}.tip-list{flex-direction:column;gap:10px;display:flex}.tip-item{border-left:4px solid var(--primary);background:#ffffff8c;border-radius:14px;align-items:flex-start;gap:14px;padding:14px 16px;display:flex}.tip-item.avoid{border-left-color:var(--error)}.tip-icon{color:var(--primary);flex-shrink:0;margin-top:1px;font-size:18px}.tip-icon.avoid{color:var(--error)}.tip-text{color:var(--on-surface);margin:0;font-size:14px;line-height:1.6}.retake-section{flex-direction:column;align-items:center;padding-top:8px;display:flex}.retake-btn{background:var(--primary);color:var(--on-primary);letter-spacing:.1em;text-transform:uppercase;font-size:13px;font-weight:700;font-family:var(--font-body);cursor:pointer;border:none;border-radius:999px;justify-content:center;align-items:center;gap:10px;padding:16px 40px;transition:all .3s;display:flex;box-shadow:0 8px 24px #5958934d}.retake-btn:hover{transform:translateY(-1px);box-shadow:0 12px 32px #59589366}.retake-btn:active{transform:scale(.96)}.retake-btn .material-symbols-outlined{transition:transform .5s}.retake-btn:hover .material-symbols-outlined{transform:rotate(180deg)}.retake-caption{letter-spacing:.04em;color:var(--outline);margin-top:20px;font-size:12px;font-weight:600}@media (width<=480px){.main{padding:80px 20px 96px}.header{padding:0 20px}}