/* Cintre-inspired presentation for Vestia's existing application. */
:root {
  color-scheme: light;
  --paper: #F6F6F4;
  --surface: #FFFFFF;
  --white: var(--surface);
  --ink: #0B0B0F;
  --muted: #6B6B73;
  --line: #E4E4E0;
  --accent: #4F46E5;
  --accent-hover: #4338CA;
  --selected: #EEEDFD;
  --sunk: #ECECE8;
  --swatch: #F1F1EE;
  --color-1: var(--paper);
  --color-2: var(--accent);
  --color-3: var(--ink);
  --color-4: var(--ink);
  --color-5: var(--ink);
  --green: var(--accent);
  --green-dark: var(--ink);
  --sage: var(--selected);
  --orange: var(--accent);
  --shadow: #1010180C;
  --overlay: #09090B6B;
  --focus-halo: #4F46E526;
  --sans: "Geist", "SF Pro Text", system-ui, sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --card-shadow: 0 1px 2px #1010180A, 0 8px 24px -12px #1010181F;
}
html { min-height: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.5 var(--sans);
  letter-spacing: -.006em;
}
button, input, select, textarea { font-family: var(--sans); }
button { -webkit-tap-highlight-color: transparent; }
h1, h2, h3 { text-wrap: balance; }
.main {
  width: calc(100% - 248px);
  max-width: 1420px;
  margin-left: 248px;
  padding: 0 clamp(24px, 4vw, 60px) 64px;
}
.sidebar {
  width: 248px;
  padding: 30px 16px 24px;
  border: 0;
  background: var(--paper);
}
.brand { margin: 0 12px 36px; gap: 10px; font: 800 25px var(--sans); letter-spacing: -1px; }
.brand small { margin-top: 4px; font: 500 9px var(--sans); letter-spacing: .08em; color: var(--muted); }
.brand-mark {
  border-radius: 13px;
  background: var(--ink);
  color: var(--surface);
  font: italic 30px var(--serif);
}
.side-label { font-size: 10px; letter-spacing: .12em; color: var(--muted); }
.main-nav { gap: 5px; }
.nav-item { height: 46px; font-size: 14px; border-radius: 999px; color: var(--muted); }
.nav-item:hover { background: var(--sunk); }
.nav-item.active { background: var(--ink); color: var(--surface); }
.nav-icon, .nav-icon svg { width: 21px; height: 21px; flex-shrink: 0; }
.nav-icon { display: grid; place-items: center; font-size: 20px; }
.nav-count { background: var(--sunk); color: var(--muted); font-size: 11px; }
.nav-item.active .nav-count { background: #FFFFFF24; color: var(--surface); }
.mini-profile { padding: 14px 10px; border-top: 1px solid var(--line); }
.mini-profile b { font-size: 13px; }
.mini-profile span, .storage-note { font-size: 11px; }
.mini-profile:hover { background: var(--sunk); border-radius: 16px; }
.avatar, .top-avatar, .mini-profile .avatar { background: var(--sunk); color: var(--ink); }
.green-dot { background: var(--accent); }
.topbar { height: 88px; border: 0; }
.topbar .app-name { font: 800 18px var(--sans); letter-spacing: -.06em; color: var(--ink); }
.top-brand-mark { width: 34px; height: 34px; font-size: 27px; }
.top-avatar { width: 40px; height: 40px; flex-basis: 40px; box-shadow: none; font-size: 14px; }
.today { color: var(--muted); font-size: 12px; }
.welcome-row, .page-heading, .vestia-heading { margin: 26px 0 25px; gap: 16px; flex-wrap: wrap; }
.welcome-row h1, .page-heading h1, .vestia-heading h1 {
  margin: 0 0 10px;
  font: 700 clamp(34px, 4vw, 52px)/1.05 var(--sans);
  letter-spacing: -.045em;
}
.title-serif, .greeting-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.eyebrow { color: var(--muted); font-size: 10px; letter-spacing: .12em; margin-bottom: 10px; }
.subheading { color: var(--muted); font-size: 14px; line-height: 1.5; }
.sun { color: var(--accent); font-size: 22px; vertical-align: 3px; }
.primary-button, .secondary-button, .light-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 999px;
  padding: 11px 18px;
  font: 600 13px/1.4 var(--sans);
  box-shadow: none;
  min-height: 42px;
}
.primary-button { background: var(--ink); color: var(--surface); }
.primary-button:hover { background: #29292F; color: var(--surface); transform: none; }
.secondary-button, .light-button { background: var(--sunk); color: var(--ink); }
.secondary-button:hover, .light-button:hover { background: #E1E1DC; }
.primary-button:active, .secondary-button:active, .light-button:active { transform: scale(.98); }
.primary-button span { margin: 0; font-size: 18px; }
.piece-add-actions .piece-express-entry { background: var(--selected); color: var(--accent); font-size: 13px; }
.piece-add-actions .piece-express-entry:hover { background: #E0DEFC; }
.hero-card {
  height: auto;
  min-height: 220px;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 24px;
  padding: 28px;
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--card-shadow);
}
.hero-copy { width: auto; padding: 0; }
.hero-copy .pill { display: inline-block; padding: 5px 10px; background: var(--selected); color: var(--accent); }
.hero-copy h2 { margin: 15px 0 9px; font: 650 29px/1.12 var(--sans); letter-spacing: -.035em; }
.hero-copy h2 em { font: italic 1.12em var(--serif); color: var(--accent); }
.hero-copy p { margin-bottom: 18px; color: var(--muted); font-size: 13px; }
.home-overview { display: grid; align-content: center; gap: 10px; }
.home-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  background: var(--paper);
  border: 0;
  border-radius: 16px;
  text-align: left;
  cursor: pointer;
}
.home-stat b { min-width: 37px; color: var(--accent); font: 700 27px/1 var(--sans); letter-spacing: -.04em; }
.home-stat span { flex: 1; font-size: 13px; color: var(--ink); }
.home-stat i { color: var(--muted); font-style: normal; }
.home-stat:hover { background: var(--selected); }
.section-heading { margin-top: 30px; gap: 12px; }
.section-heading h2, .wishlist-section .section-heading h2 { font: 650 22px var(--sans); letter-spacing: -.035em; }
.section-heading p { margin-top: 4px; font-size: 12px; color: var(--muted); }
.text-link { font: 600 12px var(--sans); color: var(--accent); padding: 6px 0; }
.outfit-grid { gap: 16px; }
.outfit-card, .wardrobe-item, .wishlist-card, .wishlist-look-card {
  border: 0;
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--card-shadow);
}
.outfit-card:hover, .wishlist-look-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -12px #10101833; }
.outfit-card .outfit-image {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  height: 235px;
  margin: 7px;
  padding: 0;
  gap: 4px;
  background: var(--swatch);
  border-radius: 16px;
}
.outfit-piece { position: relative; min-width: 0; min-height: 0; width: 100%; height: 100%; border-radius: 4px; }
.outfit-piece:first-child:nth-last-child(3) { grid-row: span 2; }
.outfit-piece:only-child { grid-column: span 2; grid-row: span 2; }
.outfit-piece:first-child:nth-last-child(2), .outfit-piece:first-child:nth-last-child(2) ~ .outfit-piece { grid-row: span 2; }
.outfit-piece img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.outfit-info { padding: 7px 16px 17px; }
.outfit-info h3 { font: 650 16px var(--sans); letter-spacing: -.025em; margin-bottom: 5px; }
.outfit-info p, .outfit-info .pieces-num { font-size: 12px; color: var(--muted); }
.heart, .item-menu, .wishlist-edit, .wishlist-look-edit, .wishlist-look-remove {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #FFFFFFE8;
  color: var(--ink);
  box-shadow: 0 1px 5px #10101812;
}
.outfit-menu { right: 49px !important; }
.heart.selected { color: var(--accent); }
.wardrobe-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.wardrobe-photo { margin: 6px; border-radius: 16px; }
.wardrobe-photo img, .mini-item-photo img, .outfit-piece img { mix-blend-mode: multiply; }
.wardrobe-item-info { padding: 7px 14px 15px; }
.wardrobe-item-info h3 { font-size: 14px; letter-spacing: -.015em; }
.item-category-badge { font-size: 10px; padding: 6px 9px; background: #FFFFFFD9; color: var(--ink); }
.item-tag { background: var(--sunk); color: var(--muted); font-size: 10px; }
.item-actions { border: 0; padding: 6px; border-radius: 16px; box-shadow: 0 8px 24px #10101826; }
.item-actions button { min-height: 40px; font-size: 13px; border-radius: 10px; }
.item-actions button:hover { background: var(--selected); color: var(--accent); }
.mini-item { width: 140px; min-width: 140px; }
.mini-item-photo { height: 145px; border-radius: 18px; }
.mini-item b { font-size: 13px; margin-top: 9px; }
.mini-item span { font-size: 11px; }
.toolbar { flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.search-wrap, .toolbar select, .wishlist-category-filter select {
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--card-shadow);
  color: var(--ink);
}
.search-wrap { width: min(310px, 100%); padding: 0 15px; }
.search-wrap input, .toolbar select, .wishlist-category-filter select { font-size: 13px; }
.result-count { color: var(--muted); font-size: 12px; }
.wishlist-toolbar .search-wrap:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
#wishlist-reset-filters { margin-top: 12px; }
.filter-chip { border: 0; padding: 9px 15px; font-size: 13px; background: var(--surface); box-shadow: var(--card-shadow); }
.filter-chip.selected { background: var(--ink); color: var(--surface); box-shadow: none; }
.filter-chip.selected span { background: #FFFFFF24; color: inherit; }
.empty-state { padding: 40px 22px; border: 0; border-radius: 22px; background: var(--surface); box-shadow: var(--card-shadow); }
.empty-icon { background: var(--sunk); color: var(--ink); width: 60px; height: 60px; font-size: 27px; }
.empty-state h3 { font: 650 23px var(--sans); letter-spacing: -.035em; }
.empty-state p { color: var(--muted); font-size: 14px; }
.coming-soon-card { border: 0; border-radius: 24px; box-shadow: var(--card-shadow); padding: 40px; }
.coming-soon-card h1 { font: 650 30px var(--sans); letter-spacing: -.035em; }
.coming-soon-icon { background: var(--selected); color: var(--accent); border-radius: 18px; }
.wishlist-photo { margin: 6px; border-radius: 16px; }
.wishlist-card-info { padding: 8px 14px 62px; }
.wishlist-card-info h3 { font-size: 14px; }
.wishlist-card-info p, .wishlist-card-info .wishlist-brand, .wishlist-price { font-size: 12px; }
.wishlist-price { color: var(--ink); }
.wishlist-card a, .wardrobe-product-link { color: var(--accent); font-size: 12px; }
.wishlist-to-dressing, .wishlist-actions .wishlist-remove { min-height: 36px; padding: 7px 11px; border-radius: 999px; font-size: 11px; }
.wishlist-to-dressing { background: var(--selected); color: var(--accent); }
.wishlist-actions .wishlist-remove { background: var(--sunk); color: var(--muted); }
.wishlist-look-preview { margin: 7px; padding: 0; gap: 4px; border-radius: 16px; background: var(--swatch); }
.wishlist-look-piece { border-radius: 4px; }
.wishlist-look-info { padding: 6px 15px 16px; }
.wishlist-look-info h3 { font-size: 16px; letter-spacing: -.025em; }
.wishlist-look-info p, .wishlist-look-info span { font-size: 12px; }
.modal-backdrop { background: var(--overlay); backdrop-filter: blur(4px); }
.modal {
  background: var(--paper);
  border: 0;
  border-radius: 28px;
  box-shadow: 0 24px 60px -20px #10101859;
  padding: 28px;
  max-height: 92dvh;
}
.modal-head { gap: 14px; margin-bottom: 22px; }
.modal-head h2 { font: 700 26px/1.1 var(--sans); letter-spacing: -.035em; }
.close-button { flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; }
.form-fields label, .outfit-meta label, .wishlist-form-fields > label,
.wishlist-form-fields .form-row > label, .sync-modal form label,
.login-gate-card label { font-size: 13px; color: var(--ink); }
.form-fields input, .form-fields select, .outfit-meta input, .outfit-meta select,
.wishlist-form-fields input, .wishlist-form-fields select, .wishlist-form-fields textarea,
.sync-modal form input, .login-gate-card input, .piece-link-import input {
  min-height: 44px;
  height: auto;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--card-shadow);
  font-size: 14px;
}
.form-fields input:focus, .form-fields select:focus, .outfit-meta input:focus,
.outfit-meta select:focus, .wishlist-form-fields :is(input,select,textarea):focus,
.piece-link-import input:focus, .sync-modal form input:focus, .login-gate-card input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-halo);
}
.modal-footer { border-color: var(--line); gap: 9px; }
.modal-footer .primary-button { padding: 11px 18px; }
.upload-box, .wishlist-upload { border-color: var(--line); border-radius: 18px; background: var(--surface); }
.upload-box:hover, .wishlist-upload:not(.has-photo):hover { border-color: var(--accent); background: var(--surface); }
.upload-icon, .wishlist-upload:not(.has-photo) .upload-icon { background: var(--sunk); color: var(--ink); }
.upload-box b { font-size: 13px; }
.upload-box > div, #wishlist-upload-prompt { min-width: 0; width: 100%; padding: 10px 6px; }
.piece-photo-editor { min-width: 0; }
#upload-box { width: 100%; height: auto; aspect-ratio: 4 / 5; touch-action: none; user-select: none; }
#upload-box.has-photo { cursor: grab; }
#upload-box.is-dragging { cursor: grabbing; }
#photo-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.item-crop-hint { position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 5px; border-radius: 7px; background: #FFFFFFE8; color: var(--ink); font-size: 10px; pointer-events: none; }
#upload-box .remove-photo { z-index: 1; }
.upload-box small, .wishlist-upload small, .photo-background-controls p { font-size: 11px; color: var(--muted); }
.photo-background-controls button { font-size: 12px; }
.piece-import-buttons .piece-import-trigger { background: var(--selected); color: var(--accent); font-size: 12px; min-height: 36px; padding: 6px 12px; }
.piece-import-trigger:hover:not(:disabled) { background: #E0DEFC; }
.piece-import-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.piece-link-import input { min-height: 38px; padding: 7px 10px; }
.piece-link-import p { font-size: 12px; }
.piece-method-menu { display: grid; gap: 10px; }
.piece-method-menu[hidden], .piece-method-back[hidden], :is(#item-form, #wishlist-form)[hidden] { display: none; }
:is(#item-modal, #wishlist-modal) .modal:has(> .piece-method-menu:not([hidden])) { width: min(480px, 100%); }
.piece-method-option { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; min-height: 62px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); text-align: left; font: 600 14px/1.35 var(--sans); cursor: pointer; }
.piece-method-option:hover { background: var(--selected); }
.piece-method-option:focus-visible, .piece-method-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.piece-method-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--selected); color: var(--accent); font-size: 16px; }
.piece-method-arrow { color: var(--accent); }
.piece-method-back { min-height: 36px; margin: 0 0 8px; padding: 0 4px; color: var(--accent); font-size: 12px; }
[data-add-method="manual"] .piece-link-import,
[data-add-method="capture"] .piece-import-buttons,
[data-add-method="link"] [data-capture-toggle] { display: none; }
[data-add-method="link"] .piece-link-fields { order: -1; }
.capture-import-panel { width: min(100%, 460px); margin: 4px auto 0; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.capture-import-help, .capture-import-status { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.capture-import-status:not(:empty) { margin-top: 10px; }
.capture-import-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.capture-import-actions button { min-height: 44px; }
.capture-import-manual { min-height: 40px; padding: 5px; color: var(--accent); font-size: 12px; }
.capture-import-panel[hidden], .capture-import-manual[hidden] { display: none; }
.piece-vestia-advice { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; margin: 4px 0 0; padding: 3px 0; border: 0; background: transparent; color: var(--accent); font: 600 11px/1.4 var(--sans); text-align: left; cursor: pointer; }
.piece-vestia-advice:hover { text-decoration: underline; }
.wishlist-photo-select { color: var(--accent); font-size: 12px; min-height: 32px; }
.photo-paste-button { margin-top: 0; min-height: 36px; }
.photo-paste-button:disabled { opacity: .55; cursor: wait; }
.photo-paste-panel { margin: 4px 0 8px; }
.photo-paste-panel[hidden] { display: none; }
.photo-paste-panel input { width: 100%; min-height: 40px; border: 1px solid var(--line); border-radius: 12px; padding: 8px; background: var(--surface); color: var(--ink); font: 16px var(--sans); }
.photo-paste-panel input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.photo-paste-panel p { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.wishlist-scale-control, .wishlist-category-filter, .picker-title { font-size: 12px; color: var(--muted); }
.picker-title span { font-size: 12px; color: var(--muted); }
.picker-grid { gap: 9px; max-height: 300px; }
.picker-item, .wishlist-picker-item { border: 2px solid transparent; padding: 5px; border-radius: 16px; background: var(--surface); box-shadow: var(--card-shadow); }
.picker-item.selected, .wishlist-picker-item.selected { border: 2px solid var(--accent); padding: 5px; background: var(--surface); }
.picker-photo, .wishlist-picker-photo { border-radius: 11px; }
.picker-item span, .wishlist-picker-item > span { font-size: 11px; color: var(--ink); }
.picker-check { background: var(--accent); color: var(--surface); }
.selected-preview { background: var(--sunk); border-radius: 18px; padding: 7px; }
.preview-piece { border-radius: 10px; }
.preview-empty { font-size: 12px; color: var(--muted); }
.favorite-label span { color: var(--accent); }
.favorite-label input { accent-color: var(--accent); box-shadow: none; }
.saved-look-photo { background: var(--surface); }
.saved-look-piece { border: 0; border-radius: 18px; font: 600 14px var(--sans); box-shadow: var(--card-shadow); }
.saved-look-piece-name { border-color: var(--paper); padding: 10px 12px; }
.saved-look-favorite { border: 0; background: var(--sunk); color: var(--ink); }
.saved-look-favorite[aria-pressed="true"] { background: var(--selected); color: var(--accent); }
.saved-look-meta, .look-piece-facts dt, .look-share-status { font-size: 13px; color: var(--muted); }
.saved-look-footer, .look-share-footer { background: var(--paper); }
.look-piece-facts dd { font-size: 14px; }
.look-share-name { font-size: 13px; }
.look-share-name input { accent-color: var(--accent); }
.look-share-preview { border: 0; border-radius: 16px; box-shadow: var(--card-shadow); }
.sync-status { background: var(--selected); color: var(--ink); border-radius: 14px; font-size: 13px; }
.sync-help, .login-gate-status { font-size: 12px; color: var(--muted); }
.login-gate { background: var(--paper); }
.login-gate-card { border: 0; border-radius: 28px; padding: 36px; background: var(--surface); box-shadow: var(--card-shadow); }
.login-gate-brand { justify-content: center; margin-bottom: 32px; font: 800 19px var(--sans); letter-spacing: -.04em; }
.login-gate-brand .brand-mark { color: var(--surface); background: var(--ink); font-size: 31px; }
.login-gate-card h1 { font: 700 32px/1.05 var(--sans); letter-spacing: -.045em; }
.login-gate-intro { font-size: 14px; margin: 12px 0 24px; }
.login-gate-card input { background: var(--paper); box-shadow: none; }
.login-gate { overflow-y: auto; }
.first-name-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 16px; }
.first-name-actions .text-link { min-height: 36px; font-size: 12px; }
.first-name-actions .text-link:disabled { opacity: .55; cursor: wait; }
.vestia-legal-access { margin: 12px 0 0; text-align: center; }
.vestia-legal-access a { display: inline-flex; align-items: center; min-height: 36px; color: var(--muted); font-size: 12px; text-underline-offset: 3px; }
.vestia-legal-access a:hover { color: var(--accent); }
.sync-modal.show-personal > .account-legal-access { display: none; }
.legal-page { min-height: 100vh; }
.legal-header { padding: 16px clamp(20px, 5vw, 58px); border-bottom: 1px solid var(--line); background: var(--surface); }
.legal-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 19px; font-weight: 800; letter-spacing: -.04em; }
.legal-content { width: min(100%, 700px); margin: 0 auto; padding: clamp(32px, 7vw, 70px) 20px 48px; }
.legal-back, .legal-card a { color: var(--accent); font-size: 13px; font-weight: 600; text-underline-offset: 3px; }
.legal-content h1 { margin: 20px 0 26px; font-size: clamp(32px, 6vw, 48px); line-height: 1.1; letter-spacing: -.055em; }
.legal-draft { margin: 0 0 16px; padding: 14px 18px; border-radius: 12px; background: var(--selected); color: var(--ink); line-height: 1.5; }
.legal-card { padding: clamp(20px, 5vw, 32px); border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.legal-card + .legal-card { margin-top: 16px; }
.legal-card h2 { margin: 0 0 14px; font-size: 17px; }
.legal-card address { margin-bottom: 16px; color: var(--muted); font-style: normal; line-height: 1.65; }
.legal-card address strong { color: var(--ink); }
.legal-details { margin: 0; line-height: 1.5; }
.legal-details dt { font-weight: 600; }
.legal-details dd { margin: 0 0 12px; color: var(--muted); }
.legal-details dd:last-child { margin-bottom: 0; }
.vestia-chat { border: 0; border-radius: 24px; box-shadow: var(--card-shadow); }
.vestia-status { border: 0; background: var(--selected); color: var(--accent); font-size: 11px; }
.vestia-status i { background: var(--accent); }
.vestia-welcome h2 { font: 650 29px var(--sans); letter-spacing: -.035em; }
.vestia-welcome > p { font-size: 14px; color: var(--muted); }
.vestia-mark { background: var(--selected); color: var(--accent); font: italic 36px var(--serif); box-shadow: none; }
.vestia-prompt { border: 0; border-radius: 999px; background: var(--sunk); color: var(--ink); font-size: 12px; padding: 11px 15px; }
.vestia-prompt span { color: var(--accent); }
.vestia-prompt:hover { background: var(--selected); }
.vestia-message { font-size: 14px; border-radius: 18px; }
.vestia-message.user { background: var(--ink); color: var(--surface); }
.vestia-message.assistant { border: 0; background: var(--paper); color: var(--ink); }
.vestia-composer { border-color: var(--line); border-radius: 20px; box-shadow: none; padding-bottom: 12px; }
.vestia-composer textarea { font-size: 14px; }
.vestia-composer > button { background: var(--ink); color: var(--surface); border-radius: 50%; }
.toast { border-radius: 999px; padding: 12px 18px; font-size: 13px; background: var(--ink); color: var(--surface); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline-color: var(--accent); }

@media (max-width: 1100px) and (min-width: 900px) {
  .wardrobe-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .outfit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .sidebar { display: flex; position: fixed; inset: 0 auto 0 0; height: 100dvh; overflow-y: auto; z-index: 5; }
  .sidebar > .brand { display: flex; }
  .sidebar > .side-label { display: block; }
  .sidebar > .main-nav { display: grid; }
  .sidebar > .sidebar-bottom { display: block; }
  .mobile-nav { display: none; }
}
@media (max-width: 899px) {
  .app-shell { display: block; }
  .sidebar { display: none; }
  .main { width: 100%; max-width: 900px; margin: 0 auto; padding: 0 max(18px, env(safe-area-inset-left)) calc(116px + env(safe-area-inset-bottom)); }
  .topbar { height: 72px; }
  .today { display: none; }
  .welcome-row, .page-heading, .vestia-heading { margin: 18px 0 22px; align-items: flex-start; }
  .welcome-row h1, .page-heading h1, .vestia-heading h1 { font-size: clamp(34px, 7.5vw, 46px); }
  .welcome-row .primary-button, .page-heading .primary-button { font-size: 13px; padding: 10px 15px; }
  .welcome-row .primary-button span, .page-heading .primary-button span { font-size: 18px; }
  .subheading { font-size: 14px; }
  .mobile-nav {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    position: fixed;
    z-index: 15;
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: auto;
    transform: none;
    max-width: 480px;
    min-height: 68px;
    margin: 0 auto;
    gap: 2px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #FFFFFFC7;
    -webkit-backdrop-filter: saturate(1.6) blur(18px);
    backdrop-filter: saturate(1.6) blur(18px);
    box-shadow: 0 14px 40px -15px #10101859;
  }
  .mobile-nav-item { min-width: 0; min-height: 54px; gap: 3px; padding: 5px 0; border: 0; border-radius: 999px; color: var(--muted); font: 600 9px var(--sans); }
  .mobile-nav-item .nav-icon, .mobile-nav-item .nav-icon svg { width: 20px; height: 20px; font-size: 20px; }
  .mobile-nav-item { --tab-accent: #4338CA; --tab-tint: #EEEDFD; }
  .mobile-nav-item.active { background: var(--tab-tint); color: var(--tab-accent); box-shadow: 0 2px 8px #1010180A; }
  .mobile-nav-item.active .nav-icon { color: var(--tab-accent); }
  .mobile-nav-count, .mobile-wishlist-count { min-width: 14px; left: auto; right: 1px; top: 1px; font-size: 8px; padding: 1px 3px; background: var(--selected); color: var(--accent); }
  .mobile-nav-item.active :is(.mobile-nav-count, .mobile-wishlist-count) { background: var(--surface); color: var(--tab-accent); }
  .hero-card { padding: 22px; gap: 18px; }
  .hero-copy { width: auto; padding: 0; }
  .hero-copy p { max-width: none; }
  .wardrobe-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .outfit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .outfit-card .outfit-image { height: 200px; }
  .wishlist-card-info { padding-bottom: 60px; }
  .toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
  .vestia-heading { flex-direction: column; gap: 12px; }
  .vestia-chat { min-height: calc(100dvh - 270px); }
}
@media (max-width: 600px) {
  .hero-card { grid-template-columns: 1fr; padding: 20px; }
  .hero-copy h2 { font-size: 27px; }
  .home-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .home-stat { display: grid; gap: 5px; padding: 12px 9px; border-radius: 14px; }
  .home-stat b { font-size: 25px; min-width: 0; }
  .home-stat span { font-size: 11px; }
  .home-stat i { display: none; }
  .wardrobe-grid, .wishlist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .outfit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .outfit-card .outfit-image { height: 175px; }
  .outfit-info { padding: 6px 11px 14px; }
  .outfit-info h3 { font-size: 14px; }
  .outfit-info .pieces-num { float: none; display: block; margin-bottom: 5px; font-size: 11px; }
  .outfit-info p { font-size: 11px; }
  .wardrobe-item-info { padding: 6px 10px 13px; }
  .wardrobe-item-info h3, .wishlist-card-info h3 { font-size: 13px; }
  .item-category-badge { left: 6px; top: 6px; font-size: 9px; }
  .wardrobe-photo .item-menu { top: 5px; right: 5px; }
  .heart, .item-menu { width: 30px; height: 30px; }
  .outfit-menu { right: 45px !important; }
  .section-heading h2, .wishlist-section .section-heading h2 { font-size: 21px; }
  .section-heading p { font-size: 12px; }
  .toolbar .search-wrap { width: 100%; }
  .toolbar select { flex: 1; min-width: 0; }
  .result-count { font-size: 11px; }
  .wishlist-toolbar .result-count { flex-basis: 100%; padding-left: 4px; }
  .wishlist-section > .section-heading { align-items: flex-start; }
  .wishlist-category-filter { gap: 5px; align-items: stretch; }
  .wishlist-category-filter select { max-width: 155px; font-size: 11px; }
  .wishlist-card-info { padding: 6px 10px 65px; }
  .wishlist-actions { flex-wrap: wrap; }
  .wishlist-to-dressing, .wishlist-actions .wishlist-remove { min-height: 32px; padding: 6px 8px; font-size: 10px; }
  .wishlist-look-info h3 { font-size: 14px; }
  .modal-backdrop { padding: 0; align-items: end; }
  .modal { max-height: 92dvh; width: 100%; border-radius: 28px 28px 0 0; padding: 28px 18px calc(20px + env(safe-area-inset-bottom)); }
  .modal::before { content: ""; display: block; width: 38px; height: 5px; margin: -16px auto 17px; border-radius: 99px; background: var(--line); }
  .modal-head h2 { font-size: 25px; }
  .form-layout { grid-template-columns: minmax(90px, .8fr) minmax(0, 1.5fr); gap: 12px; }
  .wishlist-form-layout { grid-template-columns: minmax(96px, .8fr) minmax(0, 1.5fr); gap: 12px; }
  .form-fields, .wishlist-form-fields { gap: 12px; min-width: 0; }
  .form-row { grid-template-columns: 1fr; }
  .form-fields label, .wishlist-form-fields > label, .wishlist-form-fields .form-row > label { font-size: 12px; }
  .form-fields input, .form-fields select, .outfit-meta input, .outfit-meta select,
  .wishlist-form-fields input, .wishlist-form-fields select, .wishlist-form-fields textarea,
  .sync-modal form input, .login-gate-card input, .piece-link-import input, .vestia-composer textarea { font-size: 16px; }
  .piece-link-import input { min-height: 38px; padding: 7px 10px; }
  .photo-background-controls button { font-size: 11px; padding: 8px; }
  .outfit-form-main { grid-template-columns: 1fr; }
  .selected-preview { height: 170px; flex-direction: row; }
  .picker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 250px; }
  .picker-photo { height: 90px; }
  .modal-footer { flex-wrap: wrap; }
  .saved-look-footer .primary-button { width: auto; flex: 1; }
  .look-share-footer button { flex: 1 1 auto; }
  .saved-look-grid { gap: 10px; }
  .saved-look-piece { font-size: 13px; }
  .login-gate { padding: 18px; }
  .login-gate-card { padding: 28px 22px; border-radius: 24px; }
  .login-gate-card h1 { font-size: 30px; }
  .vestia-welcome { padding: 30px 18px; }
  .vestia-welcome h2 { font-size: 25px; }
  .vestia-welcome > p { font-size: 13px; }
  .vestia-suggestions { flex-direction: column; }
  .vestia-prompt { text-align: left; }
  .vestia-message { max-width: 94%; font-size: 14px; }
}
@media (prefers-reduced-motion: no-preference) {
  .modal { animation: cintre-sheet-enter .22s ease-out; }
}
@keyframes cintre-sheet-enter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Personal information, scoped to the signed-in account. */
.account-personal { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.account-personal h3 { margin: 0 0 18px; font-size: 18px; letter-spacing: -.025em; }
.sync-modal #personal-form { gap: 16px; }
.personal-form-section { min-width: 0; margin: 0; padding: 0; border: 0; }
.personal-form-section > label, .personal-form-section > legend { font-size: 13px; font-weight: 600; color: var(--ink); }
.personal-form-section > p { margin: 4px 0 8px; color: var(--muted); font-size: 12px; line-height: 1.45; }
#personal-style { display: block; width: 100%; min-height: 88px; padding: 10px 12px; border: 1px solid transparent; border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: var(--card-shadow); font: 14px/1.5 var(--sans); resize: vertical; }
#personal-style:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.personal-size-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 7px; }
.personal-size-fields input { width: 100%; min-width: 0; }
.wishlist-size-hint { margin: 0; padding: 9px 12px; border-radius: 12px; background: var(--selected); color: var(--accent); font-size: 12px; overflow-wrap: anywhere; }
.wishlist-size-hint strong { margin-inline-start: 6px; }
@media (max-width: 760px) { #personal-style { font-size: 16px; } }
.personal-status { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.personal-status:empty { display: none; }
#personal-save:disabled { cursor: wait; opacity: .6; }
.account-menu-button { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 18px 16px; margin-top: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.account-menu-icon { width: 18px; height: 18px; flex: none; color: var(--accent); }
.account-menu-button:hover { background: var(--selected); }
.account-menu-button.sync-signout { color: #be343d; margin-top: 20px; }
.sync-signout .account-menu-icon { color: inherit; }
.account-menu-button.sync-signout:hover { background: #fff1f2; border-color: #f4cdd0; }
.account-menu-button.sync-signout:focus-visible { outline: 2px solid #be343d; outline-offset: 3px; }
.sync-modal.show-personal > :is(.sync-status, .sync-help, #sync-form, .sync-signout) { display: none !important; }
.show-personal .account-personal { margin-top: 0; padding-top: 0; border-top: 0; }
.personal-back { display: inline-block; margin-bottom: 20px; min-height: 40px; }
.account-data h3 { margin: 0 0 18px; font-size: 20px; }
.data-action { padding: 18px 0; border-top: 1px solid var(--line); }
.data-action h4 { margin: 0 0 8px; font-size: 14px; }
.data-action p { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.danger-button { border: 0; border-radius: 999px; background: #B91C1C; color: #fff; padding: 12px 18px; font-size: 13px; font-weight: 600; cursor: pointer; }
.danger-button:hover { background: #991B1B; }
.data-danger h4 { color: #B91C1C; }
#data-import:disabled { opacity: .6; cursor: wait; }
/* Outfit planner */
.calendar-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.calendar-modes { display: flex; gap: 4px; padding: 4px; border-radius: 99px; background: var(--sunk); }
.calendar-modes button, .calendar-arrows button { border: 0; border-radius: 99px; padding: 11px 16px; background: transparent; color: var(--muted); font-weight: 600; cursor: pointer; }
.calendar-modes button[aria-pressed="true"] { background: var(--surface); color: var(--accent); box-shadow: var(--card-shadow); }
.calendar-arrows { margin-left: auto; display: flex; gap: 6px; }
.calendar-arrows button { background: var(--surface); color: var(--ink); min-width: 44px; }
#calendar-period { font-size: 23px; margin: 24px 0 18px; text-transform: capitalize; }
.calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.calendar-weekday { text-align: center; font-size: 12px; color: var(--muted); padding: 5px; }
.calendar-day { min-width: 0; min-height: 86px; display: grid; place-content: center; gap: 9px; border-radius: 16px; border: 1px solid transparent; background: var(--surface); color: var(--ink); cursor: pointer; }
.calendar-day span { font-weight: 600; font-size: 18px; }
.calendar-day small { color: var(--accent); font-size: 10px; min-height: 12px; }
.calendar-day.is-today { border-color: var(--accent); }
.calendar-day[aria-pressed="true"] { background: var(--selected); color: var(--accent); border-color: var(--accent); }
.calendar-day.other-month:not([aria-pressed="true"]) { opacity: .5; }
.calendar-agenda { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 14px; }
.calendar-look { min-width: 0; border-radius: 22px; padding: 16px; background: var(--surface); box-shadow: var(--card-shadow); }
.calendar-look-open { display: block; width: 100%; background: transparent; border: 0; text-align: left; color: var(--ink); padding: 0; cursor: pointer; }
.calendar-look-open strong, .calendar-look-open > span { display: block; margin: 10px 0; }
.calendar-look-open > span { color: var(--muted); font-size: 13px; }
.calendar-preview { display: flex; gap: 6px; height: 145px; }
.calendar-preview:empty { display: none; }
.calendar-preview > div { flex: 1; min-width: 0; display: grid; place-items: center; background: var(--paper); border-radius: 12px; overflow: hidden; }
.calendar-preview img { width: 100%; height: 145px; object-fit: contain; }
.calendar-preview .piece-emoji { font-size: 32px; }
.calendar-look-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.calendar-look-actions .filter-chip { background: var(--paper); font-size: 12px; box-shadow: none; }
.calendar-look-actions .filter-chip.selected { background: var(--selected); color: var(--accent); }
.calendar-look-actions button:disabled { opacity: .5; cursor: default; }
.calendar-empty { padding: 24px; background: var(--surface); border-radius: 22px; }
.calendar-empty p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0 0 15px; }
.calendar-modal { width: min(480px, 100%); }
.calendar-modal .form-fields input, .calendar-modal .form-fields select { width: 100%; min-width: 0; }
#calendar-day-title { text-transform: capitalize; }
@media (max-width: 600px) {
  .calendar-days { gap: 4px; }
  .calendar-day { min-height: 65px; border-radius: 12px; }
  .calendar-day span { font-size: 16px; }
  .calendar-month .calendar-day { min-height: 55px; gap: 3px; }
  .calendar-toolbar { gap: 6px; }
  .calendar-toolbar .secondary-button, .calendar-modes button { padding: 10px 12px; font-size: 12px; }
  .calendar-arrows button { padding: 10px; }
  #calendar-day-title { font-size: 19px; }
}
#sidebar-account-status { display: block; white-space: normal; }

#sidebar-account-status .account-connection { display: inline-flex; align-items: center; gap: 6px; }
#sidebar-account-status .account-connected-dot { display: inline-block; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: #16A34A; box-shadow: 0 0 0 3px #16A34A18, 0 0 7px #16A34A55; }
#sidebar-account-status .account-settings-label { display: block; }
.account-language h3 { margin: 0 0 12px; font-size: 20px; }
.account-language > p { color: var(--muted); font-size: 13px; line-height: 1.6; }
.language-options { display: grid; gap: 10px; margin: 20px 0; }
.language-options button { display: flex; justify-content: space-between; padding: 18px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; font-size: 15px; }
.language-options button[aria-pressed="true"] { background: var(--selected); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.language-options span { font-size: 12px; }

.vestia-look-card{white-space:normal;background:white;border:1px solid #e5e7eb;border-radius:18px;padding:16px;margin-top:16px;color:#171721}.vestia-look-card strong,.vestia-look-card small{display:block;margin-bottom:8px}.vestia-look-photos{display:flex;gap:8px;overflow:auto;margin:12px 0}.vestia-look-photos>div{flex:0 0 100px;position:relative}.vestia-look-photos img{width:100px;height:125px;object-fit:cover;border-radius:10px}.vestia-look-photos span{display:block;font-size:12px}.vestia-look-card button{margin:4px}

#vestia-preferences,#vestia-preferences+button{margin:8px 6px 12px 0;padding:9px 12px;font-size:12px}.vestia-look-card button{font-size:12px;padding:9px 12px}.vestia-look-card button:disabled{opacity:.55}

#vestia-settings-modal textarea{width:100%;box-sizing:border-box;resize:vertical;min-height:150px;padding:12px;border:1px solid #ddd;border-radius:12px;font:inherit}#vestia-settings-modal [hidden]{display:none}

/* Vest iA: one conversation surface, compact tools, readable outfit cards. */
.vestia-view{max-width:1040px;margin-inline:auto;min-width:0}
.vestia-heading{align-items:center}.vestia-heading .subheading{max-width:520px;line-height:1.6}
.vestia-chat{height:clamp(540px,72dvh,860px);min-height:0;max-width:none;position:relative;border:1px solid var(--line);overflow:visible;box-shadow:none}
.vestia-chat-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line);flex:none;border-radius:24px 24px 0 0;background:var(--surface);z-index:2}
.vestia-chat-label{font-size:12px;font-weight:600;display:flex;align-items:center;gap:8px}.vestia-chat-label>span{color:var(--accent);font-size:19px}
.vestia-toolbar-actions{display:flex;align-items:center;gap:8px}.vestia-chat-toolbar .vestia-new-chat{margin:0;min-height:36px;padding:8px 12px;font-size:11px;background:var(--sunk);white-space:nowrap}.vestia-new-chat[hidden]{display:none}
.vestia-tools{position:relative}.vestia-tools summary{cursor:pointer;list-style:none;font-size:12px;font-weight:500;display:flex;align-items:center;gap:6px;padding:9px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}.vestia-tools summary::-webkit-details-marker{display:none}.vestia-tools[open] summary{background:var(--selected);color:var(--accent);border-color:transparent}
.vestia-tools-menu{position:absolute;right:0;top:calc(100% + 8px);width:220px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 32px #0b0b0f14;display:grid;gap:4px;z-index:4}
#vestia-tools-menu button{margin:0;width:100%;justify-content:flex-start;padding:12px;font-size:12px;border:0;background:transparent;border-radius:10px;text-align:left}#vestia-tools-menu button:hover{background:var(--selected);color:var(--accent)}
.vestia-welcome{flex:1;min-height:0;overflow:auto;margin:0 auto;padding:36px 24px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}.vestia-welcome.hidden{display:none}.vestia-suggestions{gap:8px}.vestia-prompt{line-height:1.4}
.vestia-messages{flex:1 1 0;min-height:0;max-height:none;padding:24px;gap:20px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d6d4e2 transparent}.vestia-messages.hidden{display:none}
.vestia-message{flex:0 0 auto;width:fit-content;max-width:88%;padding:14px 16px;box-sizing:border-box;line-height:1.65;font-size:14px;white-space:normal}.vestia-message-text{white-space:pre-wrap}.vestia-message.assistant{width:100%;max-width:100%;background:transparent;padding:0}.vestia-message.user{background:var(--selected);color:var(--ink);border:0}.vestia-message.pending{padding:12px 0;color:var(--muted)}
.vestia-look-card{padding:18px;margin:14px 0 0;border:1px solid var(--line);background:var(--surface);border-radius:20px;color:var(--ink)}.vestia-look-card strong{font-size:15px;line-height:1.4;margin-bottom:4px}.vestia-look-card small{color:var(--muted);font-size:11px;margin:0}
.vestia-look-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0;overflow:visible}.vestia-look-photos>div{min-width:0;flex:initial}.vestia-look-photos img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;background:var(--paper);border-radius:12px}.vestia-look-photos span{font-size:11px;line-height:1.4;margin-top:7px;overflow-wrap:anywhere}.vestia-look-photos .piece-emoji{aspect-ratio:4/5;display:grid;place-items:center;background:var(--paper);border-radius:12px;font-size:36px}
.vestia-look-actions{display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid var(--line);padding-top:14px}.vestia-look-actions button{margin:0;padding:10px 13px;min-height:40px;font-size:11px;line-height:1.3}.vestia-look-actions .primary-button{background:var(--accent);color:white}.vestia-look-actions .secondary-button{background:var(--sunk);border:0}.vestia-look-actions button:disabled{opacity:.6;cursor:default}
.vestia-composer{flex:none;margin:4px 20px 20px;padding:13px 60px 13px 16px;min-height:62px;box-sizing:border-box;background:var(--paper);border:1px solid transparent;border-radius:18px}.vestia-composer textarea{min-height:34px;line-height:1.5;font-size:14px}.vestia-composer>button{top:12px;right:12px;width:38px;height:38px;background:var(--accent);color:white;border-radius:13px}.vestia-composer:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--selected)}
.vestia-chat button:focus-visible,.vestia-tools summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:899px){.vestia-heading{flex-direction:row;gap:8px;margin:12px 0 18px}.vestia-heading h1{font-size:34px;margin-top:4px}.vestia-heading .eyebrow{font-size:9px}.vestia-heading .subheading{font-size:12px;max-width:300px;margin-bottom:0}.vestia-status{display:none}.vestia-chat{height:clamp(330px,calc(100dvh - 320px),760px);min-height:0;border-radius:22px}.vestia-chat-toolbar{padding:12px;border-radius:22px 22px 0 0}.vestia-chat-label{font-size:11px}.vestia-chat-toolbar .vestia-new-chat{font-size:0;padding:6px 9px;min-width:34px;min-height:34px}.vestia-chat-toolbar .vestia-new-chat span{font-size:18px;margin:0}.vestia-tools summary{font-size:11px;padding:8px 10px}.vestia-messages{padding:16px 12px;gap:18px}.vestia-message{font-size:13px}.vestia-look-card{padding:12px;border-radius:16px}.vestia-look-photos{gap:7px;margin:12px 0}.vestia-look-photos span{font-size:10px}.vestia-look-actions{gap:6px;padding-top:12px}.vestia-look-actions button{flex:1;padding:9px 8px;font-size:10px;min-height:40px;white-space:normal}.vestia-composer{margin:4px 10px 10px;padding-left:12px;border-radius:16px}.vestia-composer textarea{font-size:16px}.vestia-welcome{padding:22px 16px;justify-content:flex-start}.vestia-mark{flex:none;width:42px;height:42px;margin-bottom:12px}.vestia-welcome h2{font-size:23px}.vestia-welcome>p{font-size:12px}.vestia-suggestions{margin-top:18px;gap:7px}.vestia-prompt{font-size:11px;padding:10px 12px}}

/* Shared outfit composer */
.modal.outfit-composer{width:min(880px,100%);height:min(850px,92dvh);max-height:92dvh;padding:24px;display:flex;flex-direction:column;overflow:hidden}
.outfit-composer .modal-head{flex:none;margin-bottom:18px}.outfit-composer .modal-head h2{font-size:27px}.outfit-composer form{display:flex;flex-direction:column;min-height:0;flex:1;overflow:hidden}
.composer-meta{display:grid;grid-template-columns:1.4fr 1fr auto;gap:12px;align-items:end;flex:none;margin-bottom:18px}.composer-meta label{display:grid;gap:6px;font-size:11px;font-weight:500;color:var(--muted);min-width:0}.composer-meta input:not([type=checkbox]),.composer-meta select,.composer-search input{width:100%;min-width:0;background:var(--paper);border:1px solid transparent;border-radius:12px;padding:12px;font:13px var(--sans);color:var(--ink);min-height:43px}.composer-meta .composer-favorite{display:flex;align-items:center;gap:7px;padding-bottom:13px;white-space:nowrap}.composer-favorite input{accent-color:var(--accent)}
.composer-controls{flex:none;border-top:1px solid var(--line);padding-top:14px}.composer-search{display:block;margin-bottom:12px}.composer-search input:focus,.composer-meta :is(input,select):focus{outline:2px solid var(--selected);border-color:var(--accent)}
.composer-categories{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin;flex-wrap:nowrap}.composer-chip{border:0;background:var(--paper);border-radius:999px;font:500 11px var(--sans);padding:9px 12px;white-space:nowrap;cursor:pointer;color:var(--muted)}.composer-chip span{margin-left:5px;font-size:10px;opacity:.75}.composer-chip.selected{background:var(--selected);color:var(--accent)}.composer-results{font-size:11px;color:var(--muted);margin:5px 0 12px}
.composer-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;overflow:auto;min-height:0;flex:1;align-content:start;padding:2px 4px 16px 2px;overscroll-behavior:contain;scrollbar-width:thin}
.composer-piece{position:relative;min-width:0;background:white;border:2px solid transparent;border-radius:16px;padding:6px;text-align:left;cursor:pointer;align-self:start}.composer-piece.selected{border-color:var(--accent);background:var(--selected)}.composer-photo{aspect-ratio:4/5;background:var(--paper);border-radius:11px;overflow:hidden;position:relative;display:grid;place-items:center}.composer-photo img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.composer-photo .piece-emoji{font-size:36px}.composer-tick{display:none;position:absolute;top:7px;right:7px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:white;text-align:center;font-size:13px;line-height:22px}.selected .composer-tick{display:block}.composer-piece-name{display:block;font:500 12px/1.4 var(--sans);margin:8px 2px 3px;overflow-wrap:anywhere}.composer-brand{display:block;color:var(--muted);font:10px/1.4 var(--sans);padding:0 2px 4px}
.composer-bottom{flex:none;border-top:1px solid var(--line);background:var(--surface);padding-top:12px}.composer-selection-heading{display:flex;align-items:center;justify-content:space-between;font-size:11px;margin-bottom:8px}.composer-selection-heading span{color:var(--accent)}
.composer-selection,#selected-preview.composer-selection{display:flex;align-items:center;gap:8px;min-height:64px;height:64px;overflow-x:auto;padding:0;border:0;background:transparent;flex-wrap:nowrap;scrollbar-width:thin}.composer-selected-piece{position:relative;flex:0 0 48px;height:60px;border:1px solid var(--line);border-radius:9px;background:var(--paper);padding:3px;cursor:pointer}.composer-selected-piece img{width:100%;height:100%;object-fit:contain}.composer-selected-piece>span:last-child{position:absolute;right:-1px;top:-1px;display:grid;place-items:center;width:18px;height:18px;background:var(--ink);color:white;border-radius:50%;font-size:12px}.composer-selection-empty{font-size:11px;color:var(--muted);margin:0}.composer-footer{display:flex;justify-content:flex-end;gap:10px;padding-top:12px}.composer-footer button{min-height:44px;font-size:12px}.composer-footer .primary-button{background:var(--accent);color:white}.composer-footer button:disabled{opacity:.4;cursor:default}.composer-empty{grid-column:1/-1;text-align:center;padding:32px 16px;font-size:13px}.composer-empty p{font-size:12px;color:var(--muted)}.outfit-composer button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:760px){.modal.outfit-composer{height:94dvh;max-height:94dvh;padding:20px 16px max(16px,env(safe-area-inset-bottom));border-radius:24px 24px 0 0}.outfit-composer .modal-head{margin-bottom:14px}.outfit-composer .modal-head h2{font-size:24px}.composer-meta{grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}.composer-meta .composer-favorite{grid-column:1/-1;padding-bottom:0;font-size:10px}.composer-meta :is(input:not([type=checkbox]),select),.composer-search input{font-size:16px;padding:10px;min-height:42px}.composer-controls{padding-top:10px}.composer-search{margin-bottom:9px}.composer-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.composer-piece{padding:4px;border-radius:12px}.composer-piece-name{font-size:10px;margin-top:6px}.composer-brand{font-size:9px}.composer-chip{font-size:11px;padding:8px 11px}.composer-results{margin-bottom:8px}.composer-selection,#selected-preview.composer-selection{height:56px;min-height:56px}.composer-selected-piece{flex-basis:42px;height:52px}.composer-footer{padding-top:10px}.composer-footer .primary-button{flex:1;justify-content:center}.composer-footer button{font-size:12px}.composer-bottom{padding-top:10px}}

.outfit-card .outfit-menu{z-index:3;opacity:1;pointer-events:auto}.outfit-card .heart{z-index:3}

/* Photo-first outfit creation: gallery first, details second. */
.modal.outfit-composer{width:min(1100px,100%);height:min(960px,94dvh);max-height:94dvh;padding:22px 24px}.outfit-composer .modal-head{margin-bottom:5px}.outfit-composer .modal-head h2{font-size:26px}.composer-stepbar{flex:none;color:var(--muted);font-size:11px;margin:0 0 14px}.outfit-composer[data-step="pieces"] .composer-meta,.outfit-composer[data-step="pieces"] .composer-review{display:none}.outfit-composer[data-step="details"] .composer-controls,.outfit-composer[data-step="details"] .composer-grid,.outfit-composer[data-step="details"] .composer-selection-heading,.outfit-composer[data-step="details"] .composer-selection{display:none!important}
.composer-controls{border:0;padding:0}.composer-search{margin-bottom:10px}.composer-search input{padding:10px 14px;min-height:40px}.composer-categories{padding-bottom:8px}.composer-chip{min-height:36px}.composer-results{margin:2px 0 10px;font-size:11px}
.composer-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:2px 4px 18px 2px}.composer-piece{padding:4px;border-radius:16px}.composer-photo{aspect-ratio:1/1.15;border-radius:12px}.composer-piece-name{font-size:12px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:7px}.composer-brand{padding-bottom:4px}.composer-tick{width:25px;height:25px;line-height:25px;font-size:14px}
.composer-bottom{padding-top:10px}.composer-selection-heading{border:0;width:100%;background:transparent;color:var(--ink);font:12px var(--sans);display:flex;align-items:center;justify-content:space-between;min-height:32px;padding:0;text-align:left;cursor:pointer;margin:0}.composer-selection-heading strong{font-weight:500}.composer-selection-heading strong span{display:inline-block;color:var(--muted);margin-left:6px;transform:rotate(180deg)}.selection-expanded .composer-selection-heading strong span{transform:none}.composer-selection-heading[hidden]{display:none!important}
.composer-selection,#selected-preview.composer-selection{display:none;height:60px;min-height:60px;margin-top:8px}.selection-expanded .composer-selection,.selection-expanded #selected-preview.composer-selection{display:flex}.composer-footer{padding-top:8px}.composer-footer button{min-height:44px}.composer-footer .primary-button{min-width:160px}.composer-review{min-height:0;flex:1;overflow:auto;padding:12px 0;scrollbar-width:thin}.composer-review>p{font-size:12px;color:var(--muted);margin:0 0 12px}.composer-review>div{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.composer-review figure{margin:0;min-width:0}.composer-review img{width:100%;aspect-ratio:4/5;object-fit:contain;background:var(--paper);border-radius:12px}.composer-review .piece-emoji{display:grid;place-items:center;aspect-ratio:4/5;background:var(--paper);border-radius:12px;font-size:30px}.composer-meta{margin:12px 0 4px;gap:16px}.outfit-composer[data-step="details"] .composer-bottom{margin-top:12px}
@media(max-width:760px){#outfit-modal,#wishlist-outfit-modal{padding:0;align-items:stretch}.modal.outfit-composer{height:100dvh;max-height:100dvh;width:100%;border-radius:0;padding:max(14px,env(safe-area-inset-top)) 16px max(12px,env(safe-area-inset-bottom));box-sizing:border-box}.outfit-composer:before{display:none!important}.outfit-composer .modal-head{margin-bottom:4px}.outfit-composer .modal-head h2{font-size:23px}.outfit-composer .modal-head .eyebrow{font-size:8px;margin-bottom:4px}.composer-stepbar{font-size:10px;margin-bottom:12px}.composer-search input{font-size:16px;min-height:40px;padding:9px 12px}.composer-search{margin-bottom:8px}.composer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-bottom:14px}.composer-photo{aspect-ratio:1/1.1}.composer-piece-name{font-size:12px;margin-top:7px}.composer-brand{font-size:10px}.composer-results{margin:1px 0 8px}.composer-chip{font-size:11px;padding:8px 11px;min-height:34px}.composer-bottom{padding-top:7px}.composer-selection-heading{font-size:11px;min-height:30px}.composer-footer{padding-top:6px;gap:10px}.composer-footer button{font-size:13px;min-height:46px}.composer-selection,#selected-preview.composer-selection{height:54px;min-height:54px}.composer-review>div{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.composer-meta{grid-template-columns:1fr;margin-top:8px;gap:14px}.composer-meta .composer-favorite{grid-column:auto;font-size:12px;padding:2px 0 6px}.composer-meta :is(input:not([type=checkbox]),select){min-height:46px;font-size:16px}}
@media(max-width:760px) and (orientation:landscape){.composer-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.composer-stepbar{display:none}.outfit-composer .modal-head{margin-bottom:8px}.composer-photo{aspect-ratio:1/1}.composer-piece-name{-webkit-line-clamp:1}.composer-selection-heading{min-height:24px}}

/* A live outfit on the left, a clothing catalogue on the right. */
.composer-workspace{display:grid;grid-template-columns:minmax(230px,.8fr) minmax(0,2fr);gap:24px;flex:1;min-height:0;overflow:hidden;margin-top:4px}.composer-outfit-panel{min-width:0;min-height:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;padding:14px;background:var(--paper)}.composer-catalog{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}.composer-catalog .composer-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.composer-outfit-panel .composer-selection-heading{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;font-size:12px;min-height:36px;cursor:default}.composer-selection-heading strong{font-size:14px;font-weight:600}.composer-selection-heading>span{font-size:10px;text-align:right}.composer-outfit-panel .composer-selection,.composer-outfit-panel #selected-preview.composer-selection{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;align-items:start;gap:10px;height:auto;min-height:0;margin:4px 0 0;overflow:auto;flex:1;padding:2px;overscroll-behavior:contain}.composer-outfit-panel .composer-selected-piece{width:100%;height:auto;min-width:0;flex:initial;padding:6px;border:1px solid var(--line);border-radius:13px;background:var(--surface);text-align:left}.composer-selected-photo{aspect-ratio:4/5;display:grid;place-items:center;overflow:hidden;background:var(--paper);border-radius:9px}.composer-selected-photo img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.composer-selected-photo .piece-emoji{font-size:34px}.composer-selected-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:500 11px/1.4 var(--sans);margin:7px 1px 2px;color:var(--ink);overflow-wrap:anywhere}.composer-selected-piece .composer-remove{width:24px!important;height:24px!important;right:3px!important;top:3px!important;font:16px var(--sans);box-shadow:0 2px 8px #0001}.composer-selection-empty{grid-column:1/-1;margin:30px 8px;text-align:center;font-size:12px;line-height:1.7}.composer-bottom{margin-top:12px}.outfit-composer[data-step="details"] .composer-workspace{display:none}.composer-catalog .composer-search{margin-bottom:9px}.composer-catalog .composer-results{margin-bottom:10px}.composer-catalog .composer-photo{aspect-ratio:4/5}
@media(max-width:760px){.composer-workspace{grid-template-columns:minmax(0,1fr);gap:10px}.composer-outfit-panel{display:none}.has-selection .composer-workspace{grid-template-columns:minmax(104px,.9fr) minmax(0,1.8fr)}.has-selection .composer-outfit-panel{display:flex;padding:7px;border-radius:13px}.composer-outfit-panel .composer-selection-heading{display:block;min-height:46px;padding:2px}.composer-selection-heading strong{display:block;font-size:11px;line-height:1.4}.composer-selection-heading>span{display:block;font-size:9px;text-align:left;margin-top:4px}.composer-outfit-panel .composer-selection,.composer-outfit-panel #selected-preview.composer-selection{grid-template-columns:minmax(0,1fr);gap:10px;padding:0;margin-top:6px}.composer-outfit-panel .composer-selected-piece{padding:4px;border-radius:10px}.composer-selected-name{font-size:10px;line-height:1.4;margin:5px 1px 2px}.composer-selected-photo{aspect-ratio:4/5;border-radius:7px}.composer-catalog .composer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.has-selection .composer-catalog .composer-grid{grid-template-columns:minmax(0,1fr)}.composer-catalog .composer-search input{font-size:16px;padding:10px;min-width:0}.composer-catalog .composer-categories{gap:6px}.composer-catalog .composer-chip{font-size:10px;padding:8px 10px}.composer-catalog .composer-results{font-size:10px;margin:2px 0 9px}.composer-catalog .composer-photo{aspect-ratio:1/1.08}.composer-bottom{margin-top:10px;padding-top:6px}.composer-footer{padding-top:4px}.has-selection .composer-catalog .composer-piece-name{font-size:11px}.has-selection .composer-catalog .composer-brand{font-size:10px}}
@media(max-width:760px) and (orientation:landscape){.has-selection .composer-workspace{grid-template-columns:minmax(140px,1fr) minmax(0,3fr)}.has-selection .composer-catalog .composer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.composer-outfit-panel .composer-selection,.composer-outfit-panel #selected-preview.composer-selection{grid-template-columns:repeat(2,minmax(0,1fr))}}

.composer-sources {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  margin-bottom: 8px;
  padding: 3px;
  background: var(--paper);
  border-radius: 12px;
}
.composer-sources .composer-chip { padding-inline: 4px; border-radius: 9px; background: transparent; font-weight: 600; white-space: normal; overflow-wrap: anywhere; }
.composer-sources .composer-chip.selected { background: var(--selected); color: var(--accent); }
.wishlist-piece-badge {
  display: inline-block;
  width: fit-content;
  margin: 3px 2px;
  padding: 3px 7px;
  border-radius: 7px;
  background: var(--selected);
  color: var(--accent);
  font: 600 10px/1.4 var(--sans);
}
.composer-piece.selected .wishlist-piece-badge { background: var(--surface); }
.wishlist-look-info .wishlist-piece-badge { margin-left: 6px; }
.saved-look-piece .wishlist-piece-badge { margin: 0 10px 8px; }
.calendar-look-open .wishlist-piece-badge { margin: 0; }