:root {
  --navy: #203b69;
  --navy-deep: #172c52;
  --ink: #1d293d;
  --muted: #788195;
  --line: #e5e2db;
  --paper: #f8f7f3;
  --panel: #ffffff;
  --warm: #ece8dc;
  --gold: #b98a4f;
  --olive: #687257;
  --tobacco: #8f6a4d;
  --teal: #2c6268;
  --rose: #b98783;
  --shadow: 0 18px 42px rgba(30, 44, 68, 0.07);
  --radius: 20px;
  --sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Playfair Display", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.5; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 256px; min-height: 100vh; background: var(--navy); color: #f5f4ef; padding: 31px 20px 22px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 20; }
.brand-lockup { display: flex; align-items: center; gap: 10px; padding: 0 10px 41px; color: inherit; text-decoration: none; }
.brand-logo { width: 38px; height: 31px; object-fit: contain; object-position: center; padding: 2px 1px; background: #f7f3ea; border-radius: 4px; opacity: .98; }
.brand-mark { width: 31px; height: 31px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 18px; font-style: italic; }
.brand-name { font-size: 15px; font-weight: 700; letter-spacing: .01em; }
.brand-subtitle { color: #b5c2d9; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; margin-top: 1px; }
.sidebar-label { color: #9baecb; font-size: 10px; text-transform: uppercase; letter-spacing: .17em; margin: 0 12px 14px; }
.main-nav { display: grid; gap: 5px; }
.nav-item { width: 100%; border: 0; background: transparent; border-radius: 10px; color: #bfcce1; display: flex; align-items: center; gap: 12px; padding: 12px 12px; text-align: left; font-weight: 500; transition: .2s ease; position: relative; }
.nav-item:hover { background: rgba(255,255,255,.08); color: white; }
.nav-item.is-active { color: white; background: rgba(255,255,255,.14); box-shadow: inset 3px 0 0 #d4b17d; }
.nav-icon { font-size: 18px; width: 20px; text-align: center; color: #d7e0ed; }
.nav-dot { width: 4px; height: 4px; border-radius: 50%; background: #d9b47b; margin-left: auto; }
.beta-pill { background: rgba(229, 207, 166, .16); color: #eed5a5; text-transform: uppercase; font-size: 8px; line-height: 1; letter-spacing: .12em; padding: 5px 5px 4px; border-radius: 4px; margin-left: auto; }
.beta-pill.inline { display: inline-block; vertical-align: middle; margin-left: 6px; font-size: 9px; padding: 6px 7px; }
.sidebar-spacer { flex: 1; }
.membership-card { border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.08); padding: 15px; border-radius: 13px; margin: 16px 2px 17px; position: relative; overflow: hidden; }
.membership-card::after { content: ""; position: absolute; width: 100px; height: 100px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; right: -44px; top: -40px; }
.membership-spark { color: #e2c08b; font-size: 18px; }
.membership-card strong { display: block; font-size: 12px; margin: 4px 0; }
.membership-card p { color: #aebbd0; font-size: 11px; line-height: 1.45; margin: 0 0 12px; }
.text-button { background: none; border: 0; color: #ead1a7; font-size: 11px; font-weight: 600; padding: 0; }
.text-button span { margin-left: 5px; }
.sidebar-profile { display: flex; align-items: center; gap: 9px; border-top: 1px solid rgba(255,255,255,.12); padding: 18px 4px 0; }
.profile-avatar, .top-avatar { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 50%; background: #d8b995; color: #604a37; font-weight: 700; }
.profile-copy { min-width: 0; flex: 1; }
.profile-copy strong, .profile-copy span { display: block; }
.profile-copy strong { font-size: 12px; }
.profile-copy span { color: #9fb0c9; font-size: 10px; margin-top: 2px; }
.icon-button { border: 0; background: transparent; color: inherit; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; font-size: 18px; position: relative; }
.icon-button:hover { background: rgba(255,255,255,.09); }
.icon-button.small { color: #9fb0c9; font-size: 12px; width: 26px; }
.mobile-menu { display: none; }
.mobile-brand { display: none; align-items: center; gap: 6px; color: var(--navy); font-size: 12px; font-weight: 700; letter-spacing: .01em; }
.mobile-brand img { width: 30px; height: 23px; object-fit: contain; padding: 1px; background: #f7f3ea; border-radius: 3px; }

.main-content { flex: 1; min-width: 0; padding: 0 42px 28px; }
.topbar { height: 79px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(214, 212, 205, .75); margin-bottom: 45px; }
.topbar-context { display: flex; gap: 9px; align-items: center; color: var(--muted); font-size: 11px; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #a9b897; box-shadow: 0 0 0 4px #e8ede4; }
.topbar-actions { display: flex; align-items: center; gap: 18px; }
.top-search { display: flex; align-items: center; gap: 9px; color: #9aa2af; border-bottom: 1px solid #d8d7d2; padding: 7px 3px; width: 195px; }
.top-search input, .mini-search input, .explore-search input { border: 0; outline: 0; min-width: 0; background: transparent; color: var(--ink); width: 100%; font-size: 12px; }
.top-search input::placeholder, .mini-search input::placeholder, .explore-search input::placeholder { color: #aab0b8; }
.notification-button { color: #6f7887; font-size: 21px; }
.notification-badge { position: absolute; top: 3px; right: 3px; width: 14px; height: 14px; display: grid; place-items: center; border-radius: 50%; background: var(--rose); color: white; font-size: 8px; font-weight: 700; border: 2px solid var(--paper); }
.top-avatar { border: 0; width: 32px; height: 32px; font-size: 12px; }

.view { display: none; max-width: 1320px; margin: 0 auto; animation: fadeIn .35s ease; }
.view.is-active { display: block; }
/* Hash navigation keeps the main app entry points usable in static previews too. */
.view:target { display: block; }
body:has(.view:target) .view.is-active:not(:target) { display: none; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 35px; }
.page-heading h1 { margin: 8px 0 9px; font-family: var(--serif); font-size: clamp(34px, 4.1vw, 58px); line-height: .98; letter-spacing: -.038em; font-weight: 600; color: var(--navy-deep); }
.page-heading h1 em, h2 em, h3 em { font-style: italic; font-weight: 500; }
.heading-copy { max-width: 520px; color: var(--muted); font-size: 14px; line-height: 1.65; margin: 0; }
.eyebrow { color: #8f938c; font-size: 10px; text-transform: uppercase; letter-spacing: .19em; font-weight: 700; }
.eyebrow-line { display: inline-block; width: 31px; border-top: 1px solid #b5b7af; margin-left: 7px; vertical-align: middle; }
.button { border: 0; border-radius: 6px; min-height: 45px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 12px; font-weight: 700; transition: .2s ease; white-space: nowrap; }
.button span { font-size: 16px; line-height: 1; font-weight: 400; }
.button-primary { background: var(--navy); color: white; box-shadow: 0 8px 18px rgba(32,59,105,.17); }
.button-primary:hover { background: #172c52; transform: translateY(-1px); }
.button-dark { background: var(--ink); color: #fff; }
.button-dark:hover { background: #2c3c55; transform: translateY(-1px); }
.button-light { background: #f0eee8; color: var(--ink); }
.button-light:hover { background: #e6e3da; }
.full-width { width: 100%; }
.link-button, .tiny-link { background: none; border: 0; padding: 0; font-size: 11px; color: var(--navy); font-weight: 700; }
.link-button span { margin-left: 6px; font-size: 15px; }
.text-button:hover, .link-button:hover, .tiny-link:hover { text-decoration: underline; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .82fr); gap: 20px; }
.ootd-card { min-height: 410px; display: grid; grid-template-columns: minmax(280px, .94fr) minmax(260px, 1.06fr); overflow: hidden; background: #f4f1ea; }
.ootd-content { padding: 35px 35px 31px; display: flex; flex-direction: column; align-items: flex-start; }
.card-kicker { color: var(--navy); font-size: 10px; text-transform: uppercase; letter-spacing: .15em; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.kicker-mark { color: #c59c5e; font-size: 18px; line-height: .6; }
.date-chip { color: #a0a29c; border-left: 1px solid #d3d0c7; padding-left: 9px; font-size: 9px; letter-spacing: .09em; }
.ootd-card h2 { color: var(--navy-deep); font-family: var(--serif); font-weight: 600; font-size: clamp(29px, 3vw, 42px); line-height: 1.03; letter-spacing: -.04em; margin: 25px 0 17px; }
.ootd-description { color: #727b7c; max-width: 330px; line-height: 1.65; margin: 0 0 18px; font-size: 12px; }
.context-row { display: flex; align-items: center; gap: 8px; color: #7a817e; font-size: 10px; margin-bottom: auto; }
.context-icon { color: #ac7b42; font-size: 15px; }
.context-divider { height: 12px; width: 1px; background: #d1cec5; margin: 0 2px; }
.ootd-actions { display: flex; align-items: center; gap: 8px; padding-top: 27px; }
.round-action { display: grid; place-items: center; border: 1px solid #ddd9cf; border-radius: 50%; width: 40px; height: 40px; background: white; color: #606a72; font-size: 17px; transition: .2s ease; }
.round-action:hover { background: var(--navy); color: white; border-color: var(--navy); }
.ootd-visual { min-height: 410px; position: relative; overflow: hidden; background: #d9d6c8; isolation: isolate; }
.ootd-visual::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(248,246,237,.78), rgba(206,205,190,.3)); z-index: -2; }
.ootd-visual::after { content: ""; position: absolute; left: 13%; right: 10%; bottom: -33%; height: 70%; border-radius: 50% 50% 0 0; background: rgba(229,224,209,.75); transform: rotate(-8deg); z-index: -1; }
.visual-label { position: absolute; top: 20px; right: 20px; background: rgba(255,255,255,.57); border: 1px solid rgba(255,255,255,.55); border-radius: 30px; padding: 7px 10px; color: #6e776f; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; z-index: 3; }
.visual-pulse, .viewer-badge i, .result-status i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #8eae89; margin-right: 6px; box-shadow: 0 0 0 4px rgba(142,174,137,.14); }
.editorial-sun { position: absolute; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,248,218,.42); right: 10%; top: 25%; filter: blur(2px); }
.editorial-arch { position: absolute; width: 200px; height: 310px; border: 1px solid rgba(141, 139, 125, .3); border-bottom: 0; border-radius: 110px 110px 0 0; left: 14%; bottom: 0; }
.floating-note { position: absolute; z-index: 4; font-size: 9px; color: #5e6a68; text-transform: uppercase; letter-spacing: .1em; display: flex; align-items: center; gap: 7px; }
.floating-note span { color: #b27f45; font-size: 9px; font-weight: 700; }
.note-one { left: 14%; top: 27%; }
.note-two { right: 10%; bottom: 25%; }
.visual-caption { position: absolute; bottom: 20px; left: 22px; right: 20px; display: flex; align-items: flex-end; justify-content: space-between; color: #6b726b; font-size: 9px; text-transform: uppercase; letter-spacing: .12em; z-index: 4; }
.visual-caption strong { font-size: 9px; font-weight: 700; }

.avatar-figure { position: relative; transform-style: preserve-3d; transform: rotateY(var(--rotation, 0deg)); transition: transform .6s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 22px 15px rgba(49,50,39,.18)); }
.avatar-small { position: absolute; z-index: 2; width: 178px; height: 310px; left: 50%; bottom: 46px; transform: translateX(-50%) rotateY(var(--rotation, 0deg)); }
.avatar-tiny { width: 85px; height: 145px; transform: scale(.92); transform-origin: center bottom; }
.avatar-large { width: 255px; height: 435px; position: absolute; left: 50%; bottom: 43px; transform: translateX(-50%) rotateY(var(--rotation, 0deg)); }
.avatar-shadow { position: absolute; height: 28px; width: 170px; border-radius: 50%; left: 50%; bottom: -10px; transform: translateX(-50%) rotateX(65deg) translateZ(-1px); background: rgba(48,49,40,.22); filter: blur(6px); }
.avatar-head { position: absolute; width: 53px; height: 65px; border-radius: 48% 48% 45% 45%; top: 2px; left: 50%; transform: translateX(-50%) translateZ(18px); background: linear-gradient(110deg, #8e5f49 0%, #a8795b 48%, #6a493c 100%); box-shadow: inset -8px -2px 0 rgba(57,38,34,.12); z-index: 5; }
.avatar-large .avatar-head { width: 73px; height: 87px; }
.avatar-tiny .avatar-head { width: 27px; height: 33px; }
.avatar-hair { position: absolute; top: -8px; left: -3px; width: 60px; height: 42px; border-radius: 52% 55% 30% 30%; background: #2b2827; transform: rotate(-5deg); }
.avatar-large .avatar-hair { width: 81px; height: 54px; left: -4px; top: -10px; }
.avatar-tiny .avatar-hair { width: 31px; height: 22px; top: -4px; left: -2px; }
.avatar-hair::after { content: ""; position: absolute; width: 14px; height: 46px; right: -7px; top: 16px; background: #282523; border-radius: 0 0 50% 50%; transform: rotate(-5deg); }
.avatar-large .avatar-hair::after { width: 18px; height: 62px; top: 22px; right: -9px; }
.avatar-tiny .avatar-hair::after { width: 7px; height: 23px; top: 9px; right: -4px; }
.avatar-face-mark { position: absolute; width: 5px; height: 2px; border-radius: 50%; background: rgba(42,30,28,.65); right: 11px; top: 35px; }
.avatar-neck { position: absolute; width: 20px; height: 28px; left: 50%; top: 52px; transform: translateX(-50%) translateZ(8px); background: #8a5b47; z-index: 3; }
.avatar-large .avatar-neck { width: 28px; height: 37px; top: 70px; }
.avatar-tiny .avatar-neck { width: 10px; height: 14px; top: 27px; }
.avatar-torso { position: absolute; top: 67px; left: 50%; width: 105px; height: 127px; transform: translateX(-50%) translateZ(5px); background: var(--top-color, #e9e2d2); clip-path: polygon(20% 0, 80% 0, 94% 12%, 88% 100%, 12% 100%, 6% 12%); z-index: 2; box-shadow: inset 0 -6px 0 rgba(54,53,43,.05); }
.avatar-large .avatar-torso { top: 95px; width: 145px; height: 178px; }
.avatar-tiny .avatar-torso { top: 34px; width: 52px; height: 63px; }
.avatar-torso::before { content: ""; position: absolute; left: 50%; top: 0; height: 40px; width: 2px; background: rgba(87,85,72,.25); }
.avatar-torso::after { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 17px solid #f4f0e6; opacity: .7; }
.avatar-arm { position: absolute; top: 73px; width: 26px; height: 132px; border-radius: 20px; background: linear-gradient(90deg, var(--top-color, #e9e2d2), #c9c1ae); z-index: 1; }
.avatar-arm-left { left: 22px; transform: rotate(7deg); }
.avatar-arm-right { right: 22px; transform: rotate(-7deg); }
.avatar-large .avatar-arm { top: 103px; width: 34px; height: 182px; }
.avatar-large .avatar-arm-left { left: 32px; }
.avatar-large .avatar-arm-right { right: 32px; }
.avatar-tiny .avatar-arm { top: 37px; width: 13px; height: 66px; }
.avatar-tiny .avatar-arm-left { left: 11px; }
.avatar-tiny .avatar-arm-right { right: 11px; }
.avatar-waist { position: absolute; top: 177px; left: 50%; width: 83px; height: 34px; transform: translateX(-50%) translateZ(7px); background: var(--bottom-color, #59634a); z-index: 3; }
.avatar-large .avatar-waist { top: 260px; width: 115px; height: 43px; }
.avatar-tiny .avatar-waist { top: 87px; width: 42px; height: 17px; }
.avatar-leg { position: absolute; top: 196px; width: 39px; height: 107px; background: var(--bottom-color, #59634a); border-radius: 3px 3px 9px 9px; z-index: 1; }
.avatar-leg-left { left: 48px; transform: rotate(1.5deg); }
.avatar-leg-right { right: 48px; transform: rotate(-1.5deg); }
.avatar-large .avatar-leg { top: 300px; width: 52px; height: 150px; }
.avatar-large .avatar-leg-left { left: 70px; }
.avatar-large .avatar-leg-right { right: 70px; }
.avatar-tiny .avatar-leg { top: 96px; width: 20px; height: 51px; }
.avatar-tiny .avatar-leg-left { left: 24px; }
.avatar-tiny .avatar-leg-right { right: 24px; }
.avatar-shoe { position: absolute; bottom: 0; width: 53px; height: 17px; border-radius: 50% 60% 28% 28%; background: #513a2e; z-index: 3; }
.avatar-shoe-left { left: 27px; transform: rotate(4deg); }
.avatar-shoe-right { right: 27px; transform: rotate(-4deg); }
.avatar-large .avatar-shoe { width: 70px; height: 22px; }
.avatar-large .avatar-shoe-left { left: 47px; }
.avatar-large .avatar-shoe-right { right: 47px; }
.avatar-tiny .avatar-shoe { width: 27px; height: 9px; }
.avatar-tiny .avatar-shoe-left { left: 13px; }
.avatar-tiny .avatar-shoe-right { right: 13px; }
.avatar-bag { position: absolute; right: 2px; top: 157px; width: 33px; height: 45px; background: #8d6749; border-radius: 5px; transform: rotate(-6deg) translateZ(14px); z-index: 5; }
.avatar-bag::before { content: ""; position: absolute; width: 24px; height: 22px; left: 4px; top: -13px; border: 3px solid #8d6749; border-bottom: 0; border-radius: 20px 20px 0 0; }
.avatar-large .avatar-bag { right: -1px; top: 217px; width: 43px; height: 58px; }
.avatar-large .avatar-bag::before { width: 31px; height: 28px; left: 4px; top: -18px; }
.avatar-tiny .avatar-bag { right: -1px; top: 78px; width: 16px; height: 22px; }
.avatar-tiny .avatar-bag::before { width: 12px; height: 11px; left: 1px; top: -8px; border-width: 1px; }
.avatar-figure[data-look="teal"] { --top-color: #d8d1be; --bottom-color: #2c6268; }
.avatar-figure[data-look="charcoal"] { --top-color: #f1eee7; --bottom-color: #3c4248; }
.avatar-figure[data-look="olive"] { --top-color: #e8e2d3; --bottom-color: #687257; }
.avatar-figure[data-look="warm"] { --top-color: #e9c5aa; --bottom-color: #9a644f; }
.avatar-figure[data-look="cool"] { --top-color: #e6e9e7; --bottom-color: #354967; }
.avatar-figure.is-spinning { animation: fullSpin 1.1s ease-in-out; }
@keyframes fullSpin { 0% { transform: translateX(-50%) rotateY(0); } 100% { transform: translateX(-50%) rotateY(360deg); } }
.avatar-small.is-spinning { animation-name: fullSpinSmall; }
@keyframes fullSpinSmall { 0% { transform: translateX(-50%) rotateY(0); } 100% { transform: translateX(-50%) rotateY(360deg); } }

.side-stack { display: grid; gap: 20px; }
.mini-card { padding: 24px 23px; min-height: 195px; }
.mini-card-heading { display: flex; justify-content: space-between; gap: 12px; }
.mini-card h3 { font-family: var(--serif); color: var(--navy-deep); font-size: 22px; line-height: 1.03; margin: 9px 0 0; letter-spacing: -.03em; }
.mini-card p { color: var(--muted); font-size: 11px; line-height: 1.55; margin: 14px 0 16px; }
.palette-orbit { width: 65px; height: 65px; display: block; border: 1px solid #d9d9d0; border-radius: 50%; position: relative; }
.palette-orbit::before, .palette-orbit::after, .palette-orbit i { content: ""; position: absolute; border-radius: 50%; }
.palette-orbit::before { width: 25px; height: 25px; background: #6c7559; left: 9px; top: 9px; }
.palette-orbit::after { width: 22px; height: 22px; background: #b88b5b; right: 9px; bottom: 10px; }
.palette-orbit i:nth-child(1) { width: 15px; height: 15px; background: #f0e7d5; right: 13px; top: 8px; }
.palette-orbit i:nth-child(2) { width: 10px; height: 10px; background: #2e5f64; left: 16px; bottom: 9px; }
.palette-orbit i:nth-child(3) { width: 5px; height: 5px; background: #243c68; left: 29px; top: 29px; }
.answer-icon { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid #ddd9d0; border-radius: 50%; color: var(--navy); font-family: var(--serif); font-size: 22px; font-style: italic; }
.mini-search { border: 1px solid #e2dfd7; background: #fbfaf7; display: flex; align-items: center; gap: 9px; padding: 11px 12px; margin: 13px 0 10px; color: #a7a8a1; }
.answer-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.answer-tags button { border: 0; background: #f0ede5; color: #747067; border-radius: 4px; padding: 6px 8px; font-size: 9px; }
.answer-tags button:hover { background: #e6e1d5; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin: 52px 0 20px; }
.section-heading h2 { font-family: var(--serif); color: var(--navy-deep); font-size: 27px; margin: 7px 0 0; letter-spacing: -.03em; }
.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.quick-card { border: 1px solid var(--line); background: white; border-radius: 13px; text-align: left; padding: 21px 22px; min-height: 139px; position: relative; transition: .2s ease; color: var(--ink); }
.quick-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #d6d0c3; }
.quick-number { color: #acaca4; position: absolute; right: 18px; top: 19px; font-size: 10px; letter-spacing: .1em; }
.quick-icon { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--navy); background: #f0eee8; font-size: 18px; margin-bottom: 16px; }
.quick-card strong, .quick-card small { display: block; }
.quick-card strong { font-size: 12px; }
.quick-card small { color: var(--muted); font-size: 10px; margin-top: 5px; }
.quick-arrow { position: absolute; right: 18px; bottom: 18px; color: var(--navy); font-size: 17px; }

.compact-heading { align-items: center; }
.saved-count { color: var(--muted); font-size: 11px; }
.saved-count span { color: var(--navy); font-family: var(--serif); font-size: 24px; margin-right: 4px; }
.fit-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; }
.fit-prompt-card, .fit-result-card { min-height: 495px; padding: 33px; }
.prompt-top { display: flex; gap: 12px; align-items: center; margin-bottom: 42px; }
.prompt-number { color: var(--gold); font-family: var(--serif); font-size: 28px; font-style: italic; }
.fit-prompt-card h2 { font-family: var(--serif); font-size: 31px; line-height: 1.06; letter-spacing: -.04em; color: var(--navy-deep); margin: 0 0 14px; }
.muted-copy { color: var(--muted); font-size: 12px; line-height: 1.65; }
.fit-prompt-card textarea { resize: vertical; width: 100%; min-height: 126px; border: 1px solid #dedbd3; background: #faf9f6; color: var(--ink); padding: 14px; outline: none; margin: 23px 0 13px; font-size: 12px; line-height: 1.6; }
.fit-prompt-card textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(32,59,105,.08); }
.prompt-suggestions { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; color: #a1a39e; font-size: 10px; margin-bottom: 21px; }
.suggestion-chip { border: 0; border-radius: 4px; background: #f0eee8; color: #747067; font-size: 9px; padding: 6px 8px; }
.suggestion-chip:hover { background: #e5e1d5; color: var(--ink); }
.find-button { width: 100%; }
.privacy-note { color: #999c97; font-size: 9px; margin-top: 17px; text-align: center; }
.privacy-note span { color: #a5835a; margin-right: 4px; }
.fit-result-card { background: #f4f1e9; position: relative; overflow: hidden; }
.result-empty { height: 100%; min-height: 425px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 25px; }
.result-orbit { width: 67px; height: 67px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #cfcabf; color: #b68a50; font-size: 25px; margin-bottom: 22px; position: relative; }
.result-orbit::after { content: ""; position: absolute; inset: 8px; border: 1px dashed #d6d2c7; border-radius: 50%; }
.result-empty h3 { font-family: var(--serif); color: var(--navy-deep); font-size: 27px; line-height: 1; margin: 12px 0; }
.result-empty p { color: var(--muted); max-width: 260px; font-size: 11px; line-height: 1.6; }
.result-filled { animation: fadeIn .3s ease; }
.result-topline { display: flex; justify-content: space-between; align-items: center; }
.result-status { color: #7e927d; font-size: 10px; }
.result-status i { margin-right: 4px; }
.result-filled h2 { font-family: var(--serif); font-size: 34px; line-height: 1; letter-spacing: -.04em; color: var(--navy-deep); margin: 19px 0 5px; }
.result-filled .muted-copy { margin-top: 0; }
.result-look-row { display: flex; align-items: center; gap: 20px; margin: 18px 0; }
.result-mini-visual { height: 166px; width: 145px; border: 1px solid #dfd9cc; background: #e3ded1; border-radius: 11px; position: relative; overflow: hidden; flex: 0 0 auto; }
.result-mini-visual::after { content: ""; position: absolute; width: 100px; height: 60px; bottom: -19px; left: 20px; border-radius: 50%; background: #d4cfbf; }
.result-mini-visual .avatar-figure { position: absolute; left: 50%; bottom: 9px; z-index: 2; }
.result-items { display: grid; gap: 10px; }
.result-item { display: flex; align-items: center; gap: 9px; font-size: 11px; }
.result-item::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--item-color, #6e785f); flex: 0 0 auto; }
.result-item small { display: block; color: #8b8c87; font-size: 9px; margin-top: 2px; }
.why-box { display: flex; gap: 10px; border-top: 1px solid #ded9ce; border-bottom: 1px solid #ded9ce; padding: 16px 0; }
.why-icon { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #d2c8b6; border-radius: 50%; color: var(--gold); font-size: 12px; flex: 0 0 auto; }
.why-box strong { font-size: 11px; }
.why-box p { color: #777a76; font-size: 10px; line-height: 1.5; margin: 4px 0 0; }
.result-actions { display: flex; gap: 7px; margin-top: 16px; }
.result-actions .button { min-height: 40px; padding: 0 13px; font-size: 10px; }
.guide-link { display: block; color: var(--navy); font-size: 10px; font-weight: 700; margin-top: 18px; }
.guide-link span { margin-left: 5px; }
.occasion-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.occasion-card { min-height: 154px; border: 0; border-radius: 14px; text-align: left; padding: 20px; position: relative; transition: .2s ease; overflow: hidden; }
.occasion-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.occasion-card span, .occasion-card strong, .occasion-card small { display: block; }
.occasion-card span { font-size: 9px; text-transform: uppercase; letter-spacing: .15em; opacity: .65; margin-bottom: 26px; }
.occasion-card strong { font-family: var(--serif); font-size: 23px; letter-spacing: -.03em; font-weight: 600; }
.occasion-card small { font-size: 10px; margin-top: 5px; opacity: .7; }
.occasion-card b { position: absolute; right: 19px; bottom: 17px; font-size: 16px; font-weight: 400; }
.occasion-dark { background: var(--navy); color: white; }
.occasion-sand { background: #e6d4bb; color: #514b41; }
.occasion-rose { background: #d9b9b4; color: #564443; }
.occasion-olive { background: #bcc3a9; color: #404c3c; }

.look-lab-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 20px; }
.avatar-panel { padding: 25px; }
.viewer-toolbar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 17px; }
.viewer-badge { font-size: 9px; color: #79817a; text-transform: uppercase; letter-spacing: .09em; }
.avatar-stage { position: relative; height: 550px; overflow: hidden; background: #e4e1d8; border-radius: 13px; isolation: isolate; perspective: 1100px; }
.avatar-stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 35%, rgba(255,252,238,.75), transparent 37%), linear-gradient(135deg, #eeeae0, #d7d3c7); z-index: -4; }
.stage-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(133,132,119,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(133,132,119,.1) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.7) 40%, rgba(0,0,0,.9)); z-index: -3; }
.stage-light { position: absolute; width: 220px; height: 470px; border-radius: 50%; filter: blur(20px); z-index: -2; opacity: .3; }
.stage-light-left { left: -110px; top: 60px; background: #f8efd4; transform: rotate(25deg); }
.stage-light-right { right: -120px; top: 20px; background: #ccd8ca; transform: rotate(-25deg); }
.avatar-stage .avatar-large { bottom: 51px; }
.stage-annotation { position: absolute; color: #6f746f; font-size: 9px; text-transform: uppercase; letter-spacing: .15em; z-index: 4; }
.stage-annotation span { color: #b17c45; font-weight: 700; margin-right: 6px; }
.annotation-top { left: 25px; top: 30%; }
.annotation-bottom { right: 25px; bottom: 29%; }
.stage-caption { position: absolute; left: 25px; right: 25px; bottom: 19px; display: flex; justify-content: space-between; align-items: center; z-index: 4; color: #626c69; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.stage-caption strong { font-size: 9px; }
.viewer-controls { display: flex; justify-content: center; align-items: center; gap: 15px; margin: 16px 0 13px; }
.rotate-button { background: none; border: 0; color: var(--navy); font-size: 11px; font-weight: 700; }
.rotate-button span { font-size: 20px; vertical-align: -2px; margin-right: 5px; font-weight: 400; }
.viewer-disclaimer { border-top: 1px solid var(--line); padding-top: 14px; color: #90948f; font-size: 9px; text-align: center; }
.viewer-disclaimer span { color: var(--gold); font-size: 12px; margin-right: 3px; }
.look-controls { padding: 29px; }
.control-section h2 { font-family: var(--serif); color: var(--navy-deep); font-size: 28px; line-height: 1.04; letter-spacing: -.04em; margin: 9px 0 7px; }
.look-choice-list { display: grid; gap: 8px; margin-top: 22px; }
.look-choice { width: 100%; display: flex; align-items: center; gap: 11px; padding: 11px; background: #fbfaf7; border: 1px solid #e4e1da; border-radius: 8px; text-align: left; color: var(--ink); }
.look-choice:hover, .look-choice.is-selected { border-color: #9fa99a; background: #f7f7f1; }
.choice-swatch { width: 31px; height: 31px; border-radius: 5px; flex: 0 0 auto; }
.swatch-olive { background: linear-gradient(135deg, #e8e2d3 0 45%, #687257 46% 73%, #8f6a4d 74%); }
.swatch-teal { background: linear-gradient(135deg, #d8d1be 0 45%, #2c6268 46% 73%, #4b342c 74%); }
.swatch-charcoal { background: linear-gradient(135deg, #f1eee7 0 45%, #3c4248 46% 73%, #1f2329 74%); }
.swatch-ivory { background: #eee6d6; }
.swatch-tobacco { background: #8f6a4d; }
.swatch-gold { background: #c39b5c; }
.look-choice strong, .look-choice small { display: block; }
.look-choice strong { font-size: 11px; }
.look-choice small { color: #92958e; font-size: 9px; margin-top: 3px; }
.choice-check { color: var(--navy); margin-left: auto; opacity: 0; font-size: 13px; }
.look-choice.is-selected .choice-check { opacity: 1; }
.control-divider { border-top: 1px solid var(--line); margin: 25px 0; }
.control-heading { display: flex; justify-content: space-between; align-items: center; }
.color-row { display: flex; align-items: center; gap: 7px; margin-top: 14px; }
.color-swatch { width: 24px; height: 24px; border: 2px solid white; outline: 1px solid #d9d6cd; border-radius: 50%; }
.color-swatch.active { outline: 2px solid var(--navy); }
.color-note { color: #8d918b; font-size: 9px; margin-left: 5px; }
.control-actions { display: grid; gap: 8px; }

.palette-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; }
.palette-profile-card, .palette-options-card { padding: 30px; }
.palette-profile-card { background: #f3f0e8; }
.palette-card-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.palette-profile-card h2, .palette-options-card h2 { font-family: var(--serif); color: var(--navy-deep); font-size: 30px; line-height: 1.02; letter-spacing: -.04em; margin: 10px 0 16px; }
.profile-swatch-large { width: 118px; height: 118px; position: relative; flex: 0 0 auto; border-radius: 50%; border: 1px solid #d9d5ca; }
.swatch-orbit { position: absolute; border: 1px solid #cfc9ba; border-radius: 50%; }
.orbit-a { inset: 10px 19px; transform: rotate(48deg); }
.orbit-b { inset: 19px 10px; transform: rotate(-48deg); }
.swatch-core { position: absolute; width: 41px; height: 41px; border-radius: 50%; left: 38px; top: 38px; background: linear-gradient(135deg, #f0e7d5 0 33%, #6b7657 34% 66%, #976b4d 67%); box-shadow: 0 0 0 7px #f3f0e8; }
.profile-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 23px 0; }
.profile-tags span { background: #e7e2d6; color: #6f736e; border-radius: 4px; padding: 7px 9px; font-size: 9px; }
.palette-options-card .control-heading { align-items: flex-start; }
.palette-help { color: #9c9d95; font-size: 13px; }
.palette-option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 22px; }
.palette-option { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid #e4e1d9; background: #fbfaf7; border-radius: 9px; text-align: left; color: var(--ink); }
.palette-option.is-selected { border-color: #9fa99a; background: #f5f6f0; }
.palette-option i { margin-left: auto; opacity: 0; color: var(--navy); font-style: normal; }
.palette-option.is-selected i { opacity: 1; }
.palette-swatch { width: 35px; height: 35px; border-radius: 6px; flex: 0 0 auto; }
.palette-neutral { background: linear-gradient(135deg, #f0e5d3 0 25%, #788060 26% 50%, #9a6c4d 51% 75%, #c29b61 76%); }
.palette-warm { background: linear-gradient(135deg, #e6b293 0 25%, #b8654d 26% 50%, #c89957 51% 75%, #f2ddbc 76%); }
.palette-cool { background: linear-gradient(135deg, #f0f1ee 0 25%, #3b4b6d 26% 50%, #4d7890 51% 75%, #4b4e62 76%); }
.palette-olive { background: linear-gradient(135deg, #c1b282 0 25%, #697452 26% 50%, #9a5d43 51% 75%, #4b3931 76%); }
.palette-option strong, .palette-option small { display: block; }
.palette-option strong { font-size: 11px; }
.palette-option small { color: #8c9089; font-size: 9px; margin-top: 3px; }
.palette-example { display: flex; align-items: center; gap: 16px; border-top: 1px solid var(--line); margin-top: 24px; padding-top: 18px; }
.example-colors { display: flex; flex: 0 0 auto; }
.example-swatch { width: 28px; height: 52px; margin-left: -4px; border: 2px solid #fff; transform: skewY(-10deg); }
.example-swatch:first-child { margin-left: 0; }
.ex-one { background: #eee5d5; }.ex-two { background: #727c5c; }.ex-three { background: #906b4f; }.ex-four { background: #c5a269; }
.palette-example strong { font-size: 11px; }.palette-example p { color: var(--muted); font-size: 10px; line-height: 1.45; margin: 4px 0 0; }
.color-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.color-card { min-height: 145px; border: 0; border-radius: 13px; padding: 18px; color: white; text-align: left; position: relative; transition: .2s ease; }
.color-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.color-name, .color-card small, .color-card b { display: block; }.color-name { font-family: var(--serif); font-size: 20px; }.color-card small { opacity: .75; font-size: 10px; margin-top: 5px; }.color-card b { position: absolute; bottom: 17px; font-size: 9px; font-weight: 600; letter-spacing: .03em; }
.color-card-ivory { background: #c8b79d; color: #423c34; }.color-card-olive { background: #687257; }.color-card-teal { background: #2e6268; }.color-card-tobacco { background: #8f6a4d; }

.guide-total { display: flex; align-items: center; gap: 9px; color: #8e918a; font-size: 10px; line-height: 1.2; text-transform: uppercase; letter-spacing: .1em; }.guide-total strong { font-family: var(--serif); color: var(--navy); font-size: 35px; font-weight: 500; letter-spacing: -.05em; }
.explore-search { height: 58px; display: flex; align-items: center; gap: 13px; padding: 0 19px; color: #a1a39d; }.explore-search input { font-size: 13px; }.search-shortcut { color: #a8aaa4; font-size: 10px; background: #f2f0eb; padding: 5px 6px; border-radius: 3px; }
.topic-pills { display: flex; gap: 6px; flex-wrap: wrap; margin: 19px 0 22px; }.topic-pill { background: #efede7; border: 0; color: #787b75; padding: 9px 12px; border-radius: 5px; font-size: 10px; }.topic-pill.is-active, .topic-pill:hover { background: var(--navy); color: white; }
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.guide-card { border: 1px solid var(--line); background: white; border-radius: 13px; overflow: hidden; transition: .2s ease; }.guide-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }.guide-art { height: 165px; position: relative; overflow: hidden; }.guide-art > span { position: absolute; left: 15px; top: 14px; z-index: 2; font-size: 8px; letter-spacing: .15em; color: rgba(36,46,54,.65); }.art-funeral { background: #d6d8d3; }.art-capsule { background: #d9c8ae; }.art-leather { background: #d2c1a5; }.art-date { background: #d2b7aa; }.art-shoes { background: #cfc9bc; }.art-menswear { background: #abb5b0; }.art-shape { position: absolute; }.shape-blazer { width: 117px; height: 140px; left: 78px; bottom: -14px; background: #343b42; clip-path: polygon(25% 0, 75% 0, 100% 21%, 82% 100%, 18% 100%, 0 21%); }.shape-blazer::after { content: ""; position: absolute; width: 35px; height: 70px; left: 41px; top: 0; background: #dadecf; clip-path: polygon(0 0, 100% 0, 65% 100%, 35% 100%); }.shape-pumps { width: 80px; height: 17px; background: #252a30; border-radius: 70% 40% 20% 60%; bottom: 27px; right: 20px; transform: rotate(-8deg); }.shape-shirt { width: 103px; height: 126px; background: #eeeadc; left: 20px; bottom: -8px; clip-path: polygon(21% 0, 79% 0, 100% 18%, 88% 100%, 12% 100%, 0 18%); transform: rotate(-7deg); }.shape-knit { width: 114px; height: 128px; background: #a67d64; right: 16px; bottom: -16px; border-radius: 45% 45% 3px 3px; transform: rotate(6deg); }.shape-pants { width: 65px; height: 130px; background: #3e4a52; left: 100px; bottom: -12px; transform: rotate(1deg); clip-path: polygon(0 0, 100% 0, 84% 100%, 55% 100%, 49% 38%, 42% 100%, 14% 100%); }.leather-swatch { position: absolute; width: 112px; height: 95px; transform: rotate(-24deg); box-shadow: 0 13px 13px rgba(78,54,40,.16); }.ls-one { background: #6e4430; left: 15px; bottom: 8px; }.ls-two { background: #a47554; left: 78px; bottom: 31px; }.ls-three { background: #c49a68; left: 140px; bottom: 9px; }.shape-dress { width: 95px; height: 142px; left: 93px; bottom: -10px; background: #465a55; clip-path: polygon(38% 0, 62% 0, 72% 16%, 100% 100%, 0 100%, 28% 16%); }.shape-earrings { width: 26px; height: 42px; border: 3px solid #b67d4a; border-radius: 50%; right: 33px; top: 47px; }.shape-shoe { width: 119px; height: 28px; background: #3c342e; border-radius: 78% 35% 30% 60%; left: 41px; bottom: 37px; transform: rotate(-7deg); }.shape-brush { width: 19px; height: 95px; background: #8a674f; right: 46px; bottom: 20px; transform: rotate(29deg); border-radius: 5px; }.shape-brush::after { content: ""; position: absolute; width: 28px; height: 18px; background: #c7a98a; top: -9px; left: -4px; border-radius: 50%; }.shape-overshirt { width: 120px; height: 135px; background: #64705d; right: 55px; bottom: -10px; clip-path: polygon(20% 0, 80% 0, 100% 16%, 84% 100%, 16% 100%, 0 16%); }.shape-watch { width: 47px; height: 47px; border: 8px solid #303842; border-radius: 50%; right: 39px; top: 43px; background: #c2a56e; }.guide-copy { padding: 16px 17px 17px; }.guide-copy > span { color: #9a9b94; text-transform: uppercase; letter-spacing: .13em; font-size: 8px; }.guide-copy h3 { font-family: var(--serif); font-size: 20px; line-height: 1.08; color: var(--navy-deep); margin: 8px 0 7px; letter-spacing: -.03em; }.guide-copy p { color: var(--muted); font-size: 10px; line-height: 1.5; min-height: 31px; margin: 0 0 12px; }.guide-copy a { color: var(--navy); font-size: 10px; font-weight: 700; }.empty-search { text-align: center; padding: 65px 20px; }.empty-search > span { font-size: 30px; color: var(--gold); }.empty-search h3 { font-family: var(--serif); color: var(--navy-deep); font-size: 27px; margin: 9px 0; }.empty-search p { color: var(--muted); font-size: 11px; }

.closet-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }.stat-card { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 19px; min-height: 120px; }.stat-label, .stat-card small { display: block; }.stat-label { color: #92958f; text-transform: uppercase; letter-spacing: .13em; font-size: 9px; }.stat-card strong { color: var(--navy); font-family: var(--serif); font-size: 32px; font-weight: 500; display: block; margin: 10px 0 1px; }.stat-card small { color: var(--muted); font-size: 10px; }.stat-card-highlight { background: var(--navy); color: white; }.stat-card-highlight .stat-label, .stat-card-highlight small { color: #afbed3; }.stat-card-highlight strong { color: #f6f1e7; }.stat-card-highlight button { border: 0; background: none; color: #e4c493; font-size: 10px; font-weight: 700; padding: 0; margin-top: 8px; }.closet-heading { margin-top: 45px; }.closet-filters { display: flex; gap: 5px; }.filter-button { border: 0; background: #efede7; border-radius: 4px; color: #777b75; padding: 7px 10px; font-size: 9px; }.filter-button.is-active { background: var(--navy); color: white; }.closet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }.closet-item { background: white; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; position: relative; }.item-visual { height: 155px; position: relative; overflow: hidden; }.item-visual::after { position: absolute; top: 12px; left: 14px; color: rgba(30,46,62,.52); content: ""; font-size: 8px; letter-spacing: .16em; }.item-shirt { background: #e9e3d7; }.item-shirt::before { content: ""; position: absolute; width: 110px; height: 125px; background: #f3eee3; left: 50%; bottom: -16px; transform: translateX(-50%); clip-path: polygon(20% 0, 80% 0, 100% 20%, 85% 100%, 15% 100%, 0 20%); }.item-trouser { background: #abb39b; }.item-trouser::before { content: ""; position: absolute; width: 84px; height: 150px; background: #687257; left: 50%; bottom: -20px; transform: translateX(-50%); clip-path: polygon(0 0, 100% 0, 83% 100%, 58% 100%, 48% 40%, 38% 100%, 13% 100%); }.item-bag { background: #d9c6a7; }.item-bag::before { content: ""; position: absolute; width: 94px; height: 87px; background: #956c4c; left: 50%; bottom: 12px; transform: translateX(-50%); border-radius: 8px; }.item-bag::after { content: ""; position: absolute; width: 68px; height: 60px; left: 50%; bottom: 93px; transform: translateX(-50%); border: 7px solid #956c4c; border-bottom: 0; border-radius: 50px 50px 0 0; }.item-hoops { background: #e5d7b9; }.item-hoops::before, .item-hoops::after { content: ""; position: absolute; width: 47px; height: 47px; border: 9px solid #c49b5b; border-radius: 50%; top: 48px; }.item-hoops::before { left: 64px; }.item-hoops::after { right: 64px; }.item-visual span { position: absolute; top: 12px; left: 14px; z-index: 2; color: rgba(30,46,62,.52); font-size: 8px; letter-spacing: .16em; }.closet-item > div:last-of-type { padding: 14px; }.closet-item strong, .closet-item small { display: block; }.closet-item strong { font-size: 11px; }.closet-item small { color: #92958e; font-size: 9px; margin-top: 4px; }.item-more { position: absolute; right: 11px; bottom: 12px; border: 0; background: none; color: #90938e; font-size: 11px; }

.app-footer { display: flex; justify-content: space-between; gap: 20px; align-items: center; border-top: 1px solid var(--line); margin-top: 70px; padding: 22px 2px 0; color: #9b9d97; font-size: 9px; }.app-footer span:first-child { color: var(--navy); font-size: 12px; font-weight: 700; }.app-footer a { color: var(--navy); font-weight: 700; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: var(--ink); color: white; padding: 12px 16px; border-radius: 6px; font-size: 11px; box-shadow: 0 12px 30px rgba(21,30,45,.22); opacity: 0; pointer-events: none; z-index: 100; transition: .25s ease; }.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.modal-backdrop { position: fixed; inset: 0; background: rgba(18,29,48,.48); display: grid; place-items: center; z-index: 80; padding: 20px; backdrop-filter: blur(4px); }.modal-backdrop[hidden], [hidden] { display: none !important; }.modal-card { max-width: 390px; background: #fbfaf7; border-radius: 16px; padding: 31px; box-shadow: 0 25px 70px rgba(14,26,46,.26); position: relative; }.modal-card h2 { font-family: var(--serif); color: var(--navy-deep); font-size: 34px; line-height: .98; letter-spacing: -.04em; margin: 12px 0 13px; }.modal-card p { color: var(--muted); font-size: 12px; line-height: 1.65; margin-bottom: 23px; }.modal-close { position: absolute; right: 15px; top: 13px; background: none; border: 0; color: #858b88; font-size: 23px; }

@media (max-width: 1120px) {
  .main-content { padding: 0 28px 28px; }
  .ootd-card { grid-template-columns: 1fr 1fr; }
  .ootd-content { padding: 28px; }
  .look-lab-layout, .fit-layout { grid-template-columns: minmax(0, 1fr) 330px; }
  .guide-grid { grid-template-columns: repeat(2, 1fr); }
  .closet-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .sidebar { position: fixed; left: 0; transform: translateX(-105%); transition: .28s ease; box-shadow: 20px 0 50px rgba(21,32,55,.18); }.sidebar.is-open { transform: translateX(0); }.mobile-menu { display: grid; color: var(--navy); }.mobile-brand { display: flex; }.main-content { padding: 0 20px 28px; }.topbar { height: 70px; margin-bottom: 32px; }.topbar-context { display: none; }.top-search { width: min(230px, 46vw); }.topbar-actions { gap: 8px; }.page-heading { align-items: flex-start; flex-direction: column; gap: 21px; }.compact-heading { flex-direction: row; align-items: center; }.dashboard-grid, .look-lab-layout, .fit-layout, .palette-layout { grid-template-columns: 1fr; }.side-stack { grid-template-columns: 1fr 1fr; }.avatar-stage { height: 520px; }.quick-grid, .occasion-grid { grid-template-columns: 1fr 1fr; }.closet-stats { grid-template-columns: repeat(2, 1fr); }.app-footer { flex-wrap: wrap; }
}
@media (max-width: 560px) {
  body { font-size: 13px; }.main-content { padding: 0 13px 20px; }.topbar { margin-bottom: 25px; }.top-search { display: none; }.topbar-actions { margin-left: auto; }.page-heading h1 { font-size: 39px; }.heading-copy { font-size: 12px; }.ootd-card { display: flex; flex-direction: column; }.ootd-content { min-height: 330px; padding: 25px; }.ootd-card h2 { font-size: 33px; }.ootd-visual { min-height: 330px; }.avatar-small { bottom: 38px; }.side-stack { grid-template-columns: 1fr; }.mini-card { min-height: auto; }.section-heading { align-items: flex-start; flex-direction: column; gap: 10px; margin-top: 38px; }.quick-grid, .occasion-grid, .color-cards, .guide-grid, .closet-grid { grid-template-columns: 1fr; }.quick-card { min-height: 125px; }.compact-heading { flex-direction: column; align-items: flex-start; }.fit-prompt-card, .fit-result-card, .palette-profile-card, .palette-options-card, .avatar-panel, .look-controls { padding: 23px; }.fit-prompt-card h2 { font-size: 29px; }.result-look-row { gap: 13px; }.result-mini-visual { width: 112px; }.look-controls { order: -1; }.avatar-stage { height: 480px; }.avatar-large { transform: translateX(-50%) scale(.87) rotateY(var(--rotation, 0deg)); transform-origin: center bottom; }.stage-annotation { display: none; }.palette-option-grid { grid-template-columns: 1fr; }.palette-card-top { align-items: flex-start; }.profile-swatch-large { width: 86px; height: 86px; }.swatch-core { width: 31px; height: 31px; left: 27px; top: 27px; }.app-footer { display: grid; gap: 9px; margin-top: 45px; }.modal-card { padding: 25px; }.membership-card { margin-top: 10px; }
}

/* Match Lab */
.match-intro { display: flex; align-items: center; justify-content: space-between; gap: 35px; padding: 29px 32px; background: #f1eee5; overflow: hidden; position: relative; }
.match-intro h2 { font-family: var(--serif); color: var(--navy-deep); font-size: 31px; line-height: 1; letter-spacing: -.04em; margin: 10px 0 12px; }
.match-intro p { color: var(--muted); font-size: 11px; line-height: 1.6; max-width: 590px; margin: 0; }
.match-symbol { width: 135px; height: 100px; position: relative; flex: 0 0 auto; transform: rotate(-13deg); }
.match-symbol::before, .match-symbol::after, .match-symbol span { content: ""; position: absolute; border: 1px solid #bba983; border-radius: 50%; }
.match-symbol::before { width: 90px; height: 90px; left: 18px; top: 3px; }
.match-symbol::after { width: 65px; height: 65px; left: 31px; top: 16px; border-color: #82907a; }
.match-symbol span:nth-child(1) { width: 10px; height: 10px; background: #ba805b; border: 0; left: 4px; top: 34px; }
.match-symbol span:nth-child(2) { width: 14px; height: 14px; background: #263c68; border: 0; right: 2px; bottom: 8px; }
.match-symbol span:nth-child(3) { width: 6px; height: 6px; background: #b99b61; border: 0; left: 62px; top: 47px; }
.match-tabs { display: flex; gap: 5px; margin: 21px 0 14px; }
.match-tab { border: 0; background: #efede7; color: #777b75; border-radius: 5px; min-height: 37px; padding: 0 14px; font-size: 10px; font-weight: 700; }
.match-tab span { color: var(--navy); font-size: 15px; margin-right: 5px; }
.match-tab.is-active, .match-tab:hover { background: var(--navy); color: white; }
.match-tab.is-active span { color: #e1c18f; }
.match-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 20px; }
.match-picker, .match-result { padding: 28px; }
.match-step { color: #a1a39d; font-size: 10px; }
.match-picker h2 { font-family: var(--serif); color: var(--navy-deep); font-size: 29px; line-height: 1; letter-spacing: -.04em; margin: 9px 0 0; }
.match-choices { display: grid; gap: 8px; margin: 21px 0 19px; }
.match-choice { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 57px; text-align: left; border: 1px solid #e3e0d8; background: #fbfaf7; border-radius: 8px; padding: 9px; color: var(--ink); }
.match-choice:hover, .match-choice.is-selected { background: #f4f5ef; border-color: #9ca897; }
.match-choice-swatch { width: 38px; height: 38px; border-radius: 6px; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.match-choice strong, .match-choice small { display: block; }
.match-choice strong { font-size: 11px; }
.match-choice small { font-size: 9px; color: #90938d; margin-top: 3px; }
.match-choice i { margin-left: auto; color: var(--navy); font-style: normal; opacity: 0; }
.match-choice.is-selected i { opacity: 1; }
.match-swatch-black { background: linear-gradient(135deg, #20262d, #565e68); }
.match-swatch-cream { background: linear-gradient(135deg, #f5f0e5, #d1c9ba); }
.match-swatch-steel { background: linear-gradient(135deg, #cdd2d4, #727e86); }
.match-swatch-midnight { background: linear-gradient(135deg, #111c31, #303a52); }
.match-swatch-tan { background: linear-gradient(135deg, #c5a278, #79553d); }
.match-swatch-silver { background: linear-gradient(135deg, #e6e7e2, #a6abae); }
.match-swatch-white { background: linear-gradient(135deg, #fffef8, #d7d8d2); }
.match-swatch-runner { background: linear-gradient(135deg, #ece4d4 0 48%, #55747a 49% 67%, #c9825e 68%); }
.match-swatch-trail { background: linear-gradient(135deg, #707a5c 0 48%, #8f6a4d 49% 67%, #283f44 68%); }
.match-result { background: #f4f1e9; }
.match-result-hero { display: flex; align-items: center; gap: 26px; padding: 21px 0 17px; }
.match-avatar-wrap { width: 190px; height: 230px; background: #e2ded2; border-radius: 11px; position: relative; overflow: hidden; flex: 0 0 auto; }
.match-avatar-wrap::after { content: ""; position: absolute; width: 145px; height: 70px; left: 23px; bottom: -23px; border-radius: 50%; background: #d1ccbd; }
.match-ring { width: 150px; height: 150px; border: 1px solid rgba(92,105,91,.4); border-radius: 50%; position: absolute; left: 20px; top: 24px; transform: rotateX(65deg); }
.match-avatar-wrap .avatar-small { bottom: 28px; transform: translateX(-50%) scale(.65) rotateY(var(--rotation, 0deg)); transform-origin: center bottom; z-index: 2; }
.match-anchor { position: absolute; left: 10px; right: 10px; bottom: 9px; text-align: center; color: #6c746e; font-size: 8px; text-transform: uppercase; letter-spacing: .11em; z-index: 4; }
.match-result-copy { min-width: 0; }
.match-result-copy h2 { font-family: var(--serif); color: var(--navy-deep); font-size: 30px; line-height: 1; letter-spacing: -.04em; margin: 9px 0 8px; }
.match-result-copy .muted-copy { margin-top: 0; }
.match-recipe { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; }
.match-recipe span { border-radius: 4px; background: #e7e2d6; color: #70756e; font-size: 9px; padding: 6px 7px; }
.match-disclosure { color: #999d97; font-size: 9px; text-align: center; margin-top: 15px; }
.match-disclosure span { color: var(--gold); font-size: 12px; margin-right: 4px; }

/* Weekly planner */
.planner-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 23px; }
.planner-week-label strong, .planner-week-label small { display: block; }
.planner-week-label strong { font-family: var(--serif); color: var(--navy-deep); font-size: 21px; margin: 6px 0 2px; }
.planner-week-label small { color: var(--muted); font-size: 10px; }
.planner-actions { display: flex; gap: 7px; }
.planner-actions .button { min-height: 38px; font-size: 10px; }
.planner-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.day-card { min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; transition: .2s ease; }
.day-card:hover, .day-card.is-selected { transform: translateY(-2px); border-color: #a3ad9d; box-shadow: 0 10px 23px rgba(30,44,68,.08); }
.day-head { display: grid; grid-template-columns: 1fr auto; gap: 3px; padding: 12px 11px 10px; border-bottom: 1px solid #eeeae2; }
.day-head span { color: #92958f; font-size: 8px; letter-spacing: .15em; font-weight: 700; }
.day-head strong { grid-column: 1 / 2; font-family: var(--serif); color: var(--navy); font-size: 27px; line-height: .9; font-weight: 500; }
.day-head i { grid-column: 2; grid-row: 1 / span 2; color: #9dad97; font-size: 8px; font-style: normal; align-self: center; }
.day-card.is-today .day-head { background: #f1eee5; }
.day-card.is-today .day-head i::after { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #a3b497; margin-left: 3px; }
.day-look { min-height: 144px; padding: 12px 11px; position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.day-look::before { content: ""; position: absolute; width: 105px; height: 105px; border-radius: 50%; right: -42px; top: -28px; background: rgba(255,255,255,.18); }
.day-look-label, .day-look strong, .day-look small { position: relative; z-index: 1; display: block; }
.day-look-label { color: rgba(24,42,53,.58); text-transform: uppercase; letter-spacing: .11em; font-size: 7px; margin-bottom: auto; }
.day-look strong { color: #243445; font-family: var(--serif); font-size: 17px; line-height: 1; letter-spacing: -.03em; }
.day-look small { color: rgba(36,52,59,.67); font-size: 8px; margin-top: 5px; }
.day-look-olive { background: #bfc5ad; }.day-look-teal { background: #a5c2bf; }.day-look-sand { background: #dfcdb2; }.day-look-charcoal { background: #b7bec0; }.day-look-rose { background: #d8b4b0; }.day-look-cream { background: #e8ded0; }
.day-footer { display: flex; align-items: center; justify-content: space-between; gap: 3px; padding: 9px 10px; color: #9a9c96; font-size: 8px; }
.day-footer button { border: 0; background: none; color: var(--navy); font-size: 8px; font-weight: 700; padding: 0; }
.planner-bottom { display: grid; grid-template-columns: .9fr 1.1fr; gap: 14px; margin-top: 20px; }
.planner-insight { background: var(--navy); color: white; padding: 24px; }
.planner-insight .eyebrow { color: #aebbd0; }
.planner-insight h2 { color: #f7f2e8; font-family: var(--serif); font-size: 28px; line-height: 1; letter-spacing: -.04em; margin: 9px 0 12px; }
.planner-insight .muted-copy { color: #b2bfd1; max-width: 390px; }
.planner-insight .link-button { color: #e4c493; }
.planner-note { padding: 24px; display: flex; gap: 15px; align-items: flex-start; }
.note-number { color: var(--gold); font-family: var(--serif); font-size: 27px; font-style: italic; }
.planner-note h3 { font-family: var(--serif); color: var(--navy-deep); font-size: 22px; line-height: 1.04; margin: 8px 0; }
.planner-note .round-action { margin-left: auto; flex: 0 0 auto; }

@media (max-width: 1120px) {
  .match-layout { grid-template-columns: minmax(0, 1fr) 1fr; }
  .planner-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .match-intro { align-items: flex-start; }
  .match-layout { grid-template-columns: 1fr; }
  .planner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planner-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .match-intro { padding: 23px; }
  .match-symbol { width: 90px; transform: scale(.75) rotate(-13deg); transform-origin: right center; margin-right: -15px; }
  .match-tabs { overflow-x: auto; padding-bottom: 3px; }
  .match-tab { flex: 0 0 auto; }
  .match-picker, .match-result { padding: 23px; }
  .match-result-hero { align-items: flex-start; flex-direction: column; }
  .match-avatar-wrap { width: 100%; height: 218px; }
  .match-avatar-wrap .avatar-small { left: 50%; }
  .planner-toolbar { align-items: flex-start; flex-direction: column; }
  .planner-actions { width: 100%; }
  .planner-actions .button { flex: 1; }
  .planner-grid { grid-template-columns: 1fr; }
}

/* Pricing and revenue-first launch */
.pricing-note { color: #8c9387; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.revenue-banner { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 29px 32px; background: var(--navy); color: white; overflow: hidden; }
.revenue-banner .eyebrow { color: #b3c0d3; }
.revenue-banner h2 { color: #faf7ef; font-family: var(--serif); font-size: 33px; line-height: .98; letter-spacing: -.04em; margin: 10px 0 12px; }
.revenue-banner p { color: #bdc8d8; font-size: 11px; line-height: 1.6; max-width: 590px; margin: 0; }
.revenue-orbit { width: 128px; height: 128px; border: 1px solid rgba(234,213,171,.36); border-radius: 50%; position: relative; display: grid; place-items: center; flex: 0 0 auto; }
.revenue-orbit::before { content: ""; position: absolute; inset: 13px; border: 1px dashed rgba(234,213,171,.4); border-radius: 50%; }
.revenue-orbit span { color: #e7c58c; font-family: var(--serif); font-size: 38px; font-style: italic; position: relative; z-index: 1; }
.revenue-orbit i { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #ddb675; }
.revenue-orbit i:nth-of-type(1) { left: 12px; top: 53px; }.revenue-orbit i:nth-of-type(2) { right: 19px; top: 22px; background: #8da18a; }.revenue-orbit i:nth-of-type(3) { right: 26px; bottom: 15px; background: #d29176; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }
.price-card { background: white; border: 1px solid var(--line); border-radius: 14px; padding: 24px; min-height: 360px; position: relative; display: flex; flex-direction: column; }
.price-card-pack { border-color: #a8b39f; box-shadow: 0 13px 30px rgba(79,97,70,.1); }.price-card-plus { background: #f0eee7; border-color: #d9c6a2; }
.price-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.price-label { color: var(--navy); font-family: var(--serif); font-size: 25px; }.price-label span { color: #8e928b; font-family: var(--sans); font-size: 9px; margin-left: 2px; }
.price-card h2 { font-family: var(--serif); color: var(--navy-deep); font-size: 27px; line-height: 1; letter-spacing: -.04em; margin: 21px 0 8px; }.price-card p { color: var(--muted); font-size: 11px; line-height: 1.55; min-height: 50px; margin: 0; }.price-card ul { display: grid; gap: 9px; padding: 0; margin: 21px 0; list-style: none; color: #646d6e; font-size: 10px; }.price-card li::before { content: "✓"; color: #7f966e; margin-right: 8px; font-weight: 700; }.price-card .button { margin-top: auto; min-height: 42px; font-size: 10px; }.popular-ribbon { position: absolute; top: 14px; right: 14px; color: #917143; background: #ead7b5; border-radius: 4px; padding: 5px 7px; font-size: 8px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.revenue-rails { display: grid; grid-template-columns: .7fr 1.3fr; align-items: start; gap: 25px; margin-top: 48px; }.revenue-rails h2 { font-family: var(--serif); color: var(--navy-deep); font-size: 28px; line-height: 1; letter-spacing: -.04em; margin: 9px 0 0; }.rail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.rail-grid article { background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 17px; min-height: 150px; }.rail-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: #f0eee8; color: var(--navy); font-size: 16px; margin-bottom: 13px; }.rail-grid strong { display: block; font-size: 11px; }.rail-grid p { color: var(--muted); font-size: 10px; line-height: 1.45; margin: 6px 0; }.rail-grid small { color: #9a9e96; font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }.pricing-disclosure { color: #999d97; text-align: center; font-size: 9px; margin-top: 24px; }.pricing-disclosure span { color: var(--gold); font-size: 12px; margin-right: 4px; }
@media (max-width: 860px) { .pricing-grid { grid-template-columns: 1fr; }.price-card { min-height: auto; }.revenue-rails { grid-template-columns: 1fr; }.rail-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .revenue-banner { padding: 24px; }.revenue-orbit { width: 92px; height: 92px; }.revenue-orbit span { font-size: 28px; }.rail-grid { grid-template-columns: 1fr; }.pricing-note { align-self: flex-start; } }