/* A quiet, private fashion journal layer. Loaded after page styles intentionally. */
:root {
  --paper: #f6f1e9;
  --paper-deep: #eee5d9;
  --surface: #fffdf9;
  --ink: #32261f;
  --ink-soft: #55483e;
  --taupe: #8c7a6b;
  --terracotta: #9c6248;
  --terracotta-dark: #754430;
  --line: #ded2c5;
  --line-strong: #c8b7a6;
  --muted: #76685d;
  --warm: #f0e6da;
  --moss: #6c6955;
  --danger: #9b433a;
  --shadow: 0 20px 46px rgba(71, 50, 35, .11);
  --serif: "Noto Serif SC", "Songti SC", STSong, SimSun, serif;
  --sans: "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --radius-sm: 3px;
  --radius-md: 8px;
  --radius-lg: 14px;
  color-scheme: light;
}

* { scrollbar-color: var(--line-strong) transparent; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .38;
  background-image: radial-gradient(rgba(70, 48, 32, .10) .45px, transparent .6px);
  background-size: 5px 5px;
}
.grain { display: block; position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .035; background: repeating-radial-gradient(circle at 20% 40%, #402d20 0 1px, transparent 1px 4px); mix-blend-mode: multiply; }
.skip-link { position: fixed; z-index: 50; top: 10px; left: 12px; padding: 9px 12px; color: var(--surface); background: var(--ink); transform: translateY(-160%); transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); outline: 3px solid #d7ad83; outline-offset: 2px; }

main { max-width: 1400px; padding: clamp(36px, 5vw, 78px) clamp(18px, 4vw, 58px) clamp(70px, 8vw, 120px); }
h1, h2, h3 { color: var(--ink); font-family: var(--serif); font-weight: 500; text-wrap: balance; }
h1 { font-size: clamp(3rem, 7vw, 6.25rem); line-height: .98; letter-spacing: -.075em; }
h1 em { color: var(--terracotta); font-family: inherit; }
h2 { font-size: clamp(1.8rem, 3.5vw, 3.15rem); line-height: 1.06; letter-spacing: -.055em; }
h3 { letter-spacing: -.025em; }
p { color: var(--muted); }
.eyebrow, .detail-label { color: var(--terracotta); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
button, input, textarea, select { font-family: var(--sans); }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(156, 98, 72, .34); outline-offset: 3px; }

.topbar { height: 74px; padding: 0 clamp(18px, 4vw, 58px); border-bottom: 1px solid var(--line); background: rgba(246, 241, 233, .86); backdrop-filter: blur(14px); }
.wordmark { display: flex; align-items: center; gap: 11px; }
.wordmark::after { content: "PRIVATE WARDROBE"; color: var(--ink); font: 700 10px var(--mono); letter-spacing: .17em; }
.brand-logo--nav { width: 35px; height: 35px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-strong); }
.navigation-menu { margin-left: auto; }
.nav-trigger { min-height: 36px; padding: 0 0 0 11px; color: var(--ink); border-left: 1px solid var(--line); border-radius: 0; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; }
.nav-trigger:hover, .navigation-menu[data-open="true"] .nav-trigger { color: var(--terracotta); border-color: var(--line-strong); background: transparent; }
.navigation-panel { top: calc(100% + 9px); right: 0; left: auto; min-width: 303px; padding: 15px; border-color: var(--line); border-radius: 2px; background: var(--surface); box-shadow: var(--shadow); }
.navigation-panel::before { content: "目录 / INDEX"; display: block; padding: 14px 16px 18px; color: var(--taupe); font: 15px var(--mono); letter-spacing: .13em; border-bottom: 1px solid var(--line); }
.navigation-panel a, .navigation-panel .text-button { min-height: 63px; border-radius: 2px; color: var(--ink-soft); font-size: 21px; }
.navigation-panel a:hover, .navigation-panel .text-button:hover, .navigation-panel a[aria-current="page"] { color: var(--terracotta-dark); background: #f5ede4; }
.navigation-panel a[aria-current="page"]::after { content: "●"; margin-left: auto; font-size: 7px; }
.navigation-panel .nav-logout { color: var(--taupe); }

.primary, .secondary { border-radius: 2px; font-weight: 700; transition: color .2s, background .2s, border-color .2s, transform .2s, box-shadow .2s; }
.primary { color: #fffaf3; background: var(--ink); box-shadow: 0 7px 14px rgba(63, 43, 29, .10); }
.primary:hover:not(:disabled) { background: var(--terracotta-dark); box-shadow: 0 10px 20px rgba(104, 62, 41, .18); }
.secondary { color: var(--ink-soft); border-color: var(--line-strong); background: transparent; }
.secondary:hover:not(:disabled) { color: var(--terracotta-dark); border-color: var(--terracotta); background: #f8efe6; }
button:active, .primary:active:not(:disabled), .secondary:active:not(:disabled) { transform: translateY(1px) scale(.985); }
input, textarea, select { color: var(--ink); border-color: var(--line-strong); border-radius: var(--radius-sm); background: rgba(255, 253, 249, .83); }
input:focus, textarea:focus, select:focus { border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(156, 98, 72, .13); }
dialog::backdrop { background: rgba(51, 37, 27, .46); backdrop-filter: blur(4px); }
.empty-card { min-height: 220px; color: var(--taupe); border: 1px dashed var(--line-strong); border-radius: 0; background: rgba(255, 253, 249, .42); }
.empty-card a { color: var(--terracotta-dark); font-weight: 700; }
.toast { border-radius: 2px; background: var(--ink); box-shadow: var(--shadow); }

/* Cover / home */
.home-cover { display: flex; flex-direction: column; min-height: calc(100svh - 74px - clamp(36px, 5vw, 78px)); }
.home-cover .masthead { flex: 1 0 auto; }
.masthead { grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr); gap: clamp(30px, 7vw, 115px); min-height: 490px; padding: clamp(22px, 4vw, 56px) 0 24px; border-bottom: 1px solid var(--line); }
.masthead > div { position: relative; padding-bottom: 24px; }
.masthead > div::after { content: "VOL. 01 — PERSONAL EDIT"; position: absolute; right: 0; bottom: 0; color: var(--taupe); font: 9px var(--mono); letter-spacing: .12em; }
.masthead h1 { max-width: 730px; margin-bottom: 25px; }
.masthead > div > p { max-width: 470px; font-size: 15px; }
.quote-card { align-self: center; padding: 32px 31px 30px; color: var(--ink); background: #e9ddd0; border: 1px solid #d5c1ad; box-shadow: 10px 10px 0 rgba(156, 98, 72, .12); transform: rotate(1.4deg); }
.quote-card::before { content: "EDITOR'S NOTE"; display: block; margin-bottom: 31px; color: var(--terracotta); font: 10px var(--mono); letter-spacing: .12em; }
.quote-card span { color: var(--terracotta); font-family: var(--serif); }
.quote-card p { color: var(--ink); font-family: var(--serif); font-size: 23px; }
.quote-card small { color: var(--taupe); font-family: var(--mono); }
.section-heading { margin-top: clamp(48px, 8vw, 94px); padding-top: 19px; border-top-color: var(--line); }
.section-heading h2 { margin-bottom: 26px; }
.outfit-grid { grid-template-columns: 1.25fr .8fr .8fr; gap: 1px; background: var(--line); }
.outfit-card { min-height: 226px; padding: 25px; border: 0; border-radius: 0; background: var(--surface); box-shadow: none; }
.outfit-card:first-child { min-height: 300px; background: #ede1d5; }
.outfit-card:hover { box-shadow: none; transform: translateY(-3px); z-index: 1; }
.outfit-card>p { color: var(--terracotta); font-family: var(--mono); }
.outfit-card h3 { max-width: 22ch; font-size: 22px; line-height: 1.18; }

/* Home lookbook: a compact outfit index, with the detail kept one click away. */
.recent-lookbook-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.recent-lookbook-heading h2 { margin-bottom: 26px; }
.recent-lookbook-all { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 29px; color: var(--terracotta-dark); font: 700 12px var(--mono); letter-spacing: .06em; text-decoration: none; }
.recent-lookbook-all:hover { color: var(--ink); }
.recent-lookbook { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.recent-lookbook-card { display: grid; min-width: 0; min-height: 226px; grid-template-rows: 124px minmax(0, 1fr); color: inherit; text-decoration: none; background: var(--surface); transition: background .25s ease, transform .25s ease; }
.recent-lookbook-card:nth-child(3n + 1) { background: #f1e7dd; }
.recent-lookbook-card:hover { z-index: 1; background: #f7ede4; transform: translateY(-3px); }
.recent-lookbook-visual { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; padding: 10px; background: #e9ded3; }
.recent-lookbook-piece { display: grid; min-width: 0; margin: 0; place-items: center; overflow: hidden; background: rgba(255, 253, 249, .72); }
.recent-lookbook-piece img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; filter: drop-shadow(0 6px 7px rgba(66, 44, 29, .12)); transition: transform .3s ease; }
.recent-lookbook-card:hover .recent-lookbook-piece img { transform: scale(1.05); }
.recent-lookbook-piece span { color: var(--terracotta); font: 500 2rem var(--serif); }
.recent-lookbook-visual--empty { display: grid; place-items: center; background: #e9ded3; }
.recent-lookbook-empty-mark { color: #bc9a82; font: 2rem var(--serif); }
.recent-lookbook-copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; padding: 14px 16px 17px; }
.recent-lookbook-meta { display: flex; width: 100%; justify-content: space-between; gap: 10px; color: var(--taupe); font: 10px var(--mono); letter-spacing: .06em; }
.recent-lookbook-copy h3 { display: -webkit-box; margin: 11px 0 0; overflow: hidden; color: var(--ink); font-size: 19px; font-weight: 600; line-height: 1.2; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.recent-lookbook-copy p { display: -webkit-box; margin: 5px 0 0; overflow: hidden; color: var(--ink-soft); font-size: 12px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.recent-lookbook-empty { grid-column: 1 / -1; }

/* Wardrobe library */
.wardrobe-browser { color: var(--ink); }
.wardrobe-browser-head { margin-bottom: 29px; padding-bottom: 18px; border-bottom-color: var(--line); }
.wardrobe-browser-head h1 { font-size: clamp(3rem, 5vw, 4.8rem); }
.wardrobe-browser .wardrobe-collection { position: relative; }
.wardrobe-browser .collection-heading h2 { font-size: 24px; }
.wardrobe-browser .category-filter { margin: -26px 0 28px; padding: 0 145px; }
.wardrobe-browser .category-chip { color: var(--taupe); font-family: var(--mono); }
.wardrobe-browser .category-chip:hover, .wardrobe-browser .category-chip.active { color: var(--terracotta-dark); border-color: var(--terracotta-dark); }
.wardrobe-browser .storefront-grid { gap: 2px; background: var(--paper-deep); }
.wardrobe-browser .storefront-card { background: var(--surface); }
.wardrobe-browser .storefront-card > img, .wardrobe-browser .garment-missing-image { background: #f1ebe4; }
.wardrobe-browser .storefront-card .garment-meta { padding: 15px 16px 28px; }
.wardrobe-browser .storefront-card h3 { color: var(--ink); font-family: var(--serif); font-size: 17px; font-weight: 600; }
.wardrobe-browser .storefront-card .garment-meta > p { color: var(--taupe); font-family: var(--mono); font-size: 10px; }
.wardrobe-browser .garment-card--openable:hover > img { filter: brightness(.97) sepia(.05); }
.wardrobe-browser .wardrobe-empty { background: rgba(255, 253, 249, .56); }
.garment-detail-shell { border: 1px solid var(--line); border-radius: 0; background: var(--surface); box-shadow: 0 34px 90px rgba(61, 42, 27, .25); }
.detail-visual { background: #eee5db; border-right-color: var(--line); }
.detail-visual::before { background: linear-gradient(90deg, rgba(255,255,255,.45), transparent 33%); }
.detail-visual > #detail-image { filter: drop-shadow(0 18px 18px rgba(64, 43, 27, .12)); }
.detail-copy { background: var(--surface); }
.detail-copy .eyebrow, .detail-visual-label, .detail-visual-caption { color: var(--terracotta); }
.detail-copy h2 { color: var(--ink); font-family: var(--serif); }
.detail-facts { background: var(--line); border-color: var(--line); }
.detail-facts > div { background: #fffaf4; }
.detail-facts span, .detail-label { color: var(--taupe); }
.detail-facts strong { color: var(--ink); }
.detail-section, .detail-actions { border-color: var(--line); }
.detail-notes { color: var(--ink-soft); }
.detail-tags span, .detail-status-button, .detail-original-button { color: var(--ink-soft); border-color: #d7c5b4; border-radius: 2px; background: #f6eee6; }
.detail-status-button strong { color: var(--ink); }
.detail-status-menu { border-color: var(--line); border-radius: 2px; background: var(--surface); box-shadow: var(--shadow); }
.detail-status-menu button { color: var(--ink-soft); }
.detail-status-menu button:hover { color: var(--terracotta-dark); background: #f5ede4; }
.detail-description-button, .detail-source-button { color: var(--terracotta-dark); border-color: #c9997e; }
.detail-close { color: var(--ink-soft); background: rgba(255, 253, 249, .78); border-color: var(--line-strong); border-radius: 50%; }
.detail-close:hover { color: #fffaf3; background: var(--ink); }
.detail-delete { color: var(--danger); border-color: #d9aaa0; border-radius: 2px; background: #fff6f3; }
.garment-candidate-modal { border-color: var(--line); border-radius: 0; background: var(--surface); box-shadow: var(--shadow); }
.candidate-picker-shell { background: var(--surface); }
.candidate-image-stage { background: #f1e7dc; border-color: var(--line); }
.candidate-image-frame { position: relative; width: 100%; line-height: 0; }
.candidate-image-frame > img { display: block; width: 100%; height: auto; object-fit: contain; }
.candidate-image-frame .detected-garment { top: var(--candidate-y); left: var(--candidate-x); width: var(--candidate-width); height: var(--candidate-height); padding: 7px; color: #fffaf3; background: rgba(75, 47, 31, .72); border: 1px solid rgba(255, 250, 243, .9); border-radius: 0; font: 700 11px var(--sans); line-height: 1.35; text-shadow: none; }
.candidate-image-frame .detected-garment:hover, .candidate-image-frame .detected-garment:focus-visible { background: var(--terracotta-dark); border-color: #fffaf3; }
.detail-texture-candidates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.detail-texture-candidate { overflow: hidden; border: 1px solid var(--line); background: #f6eee5; }
.detail-texture-candidate img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.detail-texture-candidate .primary { width: 100%; border-radius: 0; }

/* Styling desk and the saved lookbook */
body:has(.outfit-studio), body:has(.profile-editor) { background: var(--paper); }
.outfit-studio { max-width: 1400px; }
.outfit-studio-header { border-bottom-color: var(--line); }
.outfit-studio-title h1 { color: var(--ink); font-family: var(--serif); }
.outfit-studio-title > p:last-child, .outfit-studio-marker { color: var(--taupe); }
.outfit-studio-marker { color: var(--terracotta); }
.outfit-studio .planner-panel { border-color: var(--line); border-radius: 0; background: var(--surface); box-shadow: none; }
.outfit-studio .planner-panel--occasion { background: #f7eee5; }
.outfit-studio .planner-collection { background: #ede2d5; }
.outfit-studio .planner-panel-heading { border-color: var(--line); }
.outfit-studio .planner-panel-heading h2 { color: var(--ink); font-family: var(--serif); }
.outfit-studio .planner-helper { color: var(--muted); }
.outfit-studio .scenario-presets button { color: var(--ink-soft); border-color: var(--line-strong); border-radius: 2px; }
.outfit-studio .scenario-presets button:hover, .outfit-studio .scenario-presets button.active { color: #fffaf3; border-color: var(--ink); background: var(--ink); }
.outfit-studio .planner-fields input { border-color: var(--line-strong); border-radius: 2px; background: var(--surface); }
.outfit-studio .weather-summary { background: #f8f0e7; border-color: var(--line); }
.outfit-studio .weather-orb { color: var(--terracotta); border-color: #dfc6aa; background: #fff9f0; }
.outfit-studio .selected-garment-chip { color: var(--ink-soft); border-color: #d9c6b3; border-radius: 2px; background: #f4e9dd; }
.outfit-studio .planner-submit { background: var(--ink); border-radius: 0; box-shadow: 9px 9px 0 rgba(156, 98, 72, .15); }
.outfit-studio .planner-submit .eyebrow { color: #d6a57c; }
.outfit-studio .planner-submit p:not(.eyebrow) { color: #eee0d4; }
.outfit-studio .planner-submit .primary { background: var(--terracotta); border-radius: 2px; }
.outfit-studio .planner-submit .primary:hover { background: #b6775a; }
.garment-picker, .outfit-selection-modal { border-color: var(--line); border-radius: 0; background: var(--surface); box-shadow: var(--shadow); }
.garment-picker-shell, .outfit-selection-shell { background: var(--surface); }
.picker-garment, .draft-choice-card { border-color: var(--line); border-radius: 0; }
.picker-garment:hover, .picker-garment:has(input:checked), .draft-choice-card.is-selected { border-color: var(--terracotta); background: #f8eee5; }
.archive-heading { max-width: none; }
.outfit-collection-tabs { border-bottom-color: var(--line); }
.outfit-collection-tabs button { color: var(--taupe); border-radius: 0; }
.outfit-collection-tabs button.active { color: var(--terracotta-dark); border-color: var(--terracotta); }
.outfit-archive { background: var(--line); }
.outfit-archive-card, .outfit-archive-card:first-child { min-height: 266px; background: var(--surface); }
.outfit-archive-card:nth-child(3n + 1) { background: #f0e4d8; }
.outfit-generation, .outfit-replacement-badge { border-radius: 0; }
.outfit-detail-header { border-bottom-color: var(--line); }
.outfit-detail-header h1 { max-width: 800px; }
.outfit-detail-layout { gap: clamp(25px, 5vw, 74px); }
.outfit-lookbook { background: #efe5da; border-color: var(--line); border-radius: 0; }
.lookbook-caption, .lookbook-note { color: var(--taupe); font-family: var(--mono); }
.texture-collage { background: #e5d8ca; }
.texture-piece { border-color: #fffaf4; box-shadow: 7px 9px 0 rgba(87, 56, 35, .10); }
.texture-piece figcaption { color: var(--ink); background: #fffaf4; font-family: var(--mono); }
.outfit-notes { border-left-color: var(--line); }
.outfit-notes h2 { font-family: var(--serif); }
.outfit-rationale { color: var(--ink-soft); font-family: var(--serif); font-size: 21px; }
.outfit-piece-list > div { border-color: var(--line); }

/* Fitting contact sheet */
.tryon-layout { gap: clamp(24px, 5vw, 62px); border-top: 1px solid var(--line); padding-top: 24px; }
.tryon-form { padding: clamp(20px, 3vw, 34px); border-color: var(--line); border-radius: 0; background: rgba(255, 253, 249, .68); }
.tryon-form-heading { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.tryon-picker { gap: 1px; padding: 1px; background: var(--line); }
.tryon-garment { border: 0; border-radius: 0; background: var(--surface); }
.tryon-garment:hover { border: 0; background: #faf1e8; transform: none; }
.tryon-garment.selected { border: 0; background: #eee0d2; box-shadow: inset 3px 0 var(--terracotta); }
.tryon-garment-image { background: #efe6dc; }
.tryon-profile-ready, .tryon-profile-missing { border-color: var(--line); border-radius: 0; background: #f6eee5; }
.tryon-profile-thumb { border-radius: 0; }
.tryon-results { gap: 2px; background: var(--line); }
.tryon-card { border: 0; border-radius: 0; background: var(--surface); }
.tryon-card-copy { padding: 14px 16px 18px; }
.tryon-card-copy .tryon-card-pieces { color: var(--ink); font-family: var(--serif); font-size: 16px; }
.tryon-placeholder { min-height: 0; aspect-ratio: 2 / 3; color: var(--taupe); background: repeating-linear-gradient(-45deg, #f2e8de 0 12px, #ede1d6 12px 24px); }
.tryon-placeholder::before { content: "VISUAL REFERENCE"; display: block; margin-bottom: 8px; font: 9px var(--mono); letter-spacing: .12em; }

/* Personal profile and title page */
.profile-editor { max-width: 900px; border-top: 1px solid var(--line); padding-top: 30px; }
.profile-editor > label { padding-bottom: 8px; }
.profile-views { border-color: var(--line); border-radius: 0; background: rgba(255, 253, 249, .62); }
.profile-views-heading h2 { font-family: var(--serif); }
.profile-views-status { border-color: var(--line-strong); border-radius: 2px; color: var(--taupe); }
.profile-views-status.is-complete { color: #4d654f; border-color: #a9b9a4; background: #f4f7f0; }
.profile-view-card { border-color: var(--line-strong); border-radius: 0; background: var(--surface); }
.profile-view-card:hover { border-color: var(--terracotta); }
.profile-view-preview { border-radius: 0; color: var(--terracotta); background: #f4eadf; }
body:has(.login-layout) main { max-width: none; min-height: 100dvh; padding: 0; }
.login-layout { position: relative; max-width: 1380px; gap: clamp(42px, 10vw, 155px); }
.login-layout::before { content: "01 / PRIVATE EDIT"; position: absolute; top: clamp(28px, 5vw, 70px); right: clamp(22px, 5vw, 72px); color: var(--taupe); font: 10px var(--mono); letter-spacing: .14em; }
.login-intro h1 { font-family: var(--serif); }
.login-kicker { color: var(--terracotta); }
.login-brand { margin-bottom: 52px; }
.brand-logo--login { border-radius: 50%; box-shadow: 0 0 0 1px var(--line-strong); }
.login-steps span { color: var(--ink-soft); border-color: var(--line-strong); border-radius: 2px; background: rgba(255, 253, 249, .55); }
.login-card { padding: clamp(28px, 4vw, 48px); border-color: var(--line); border-radius: 0; background: var(--surface); box-shadow: 12px 12px 0 rgba(156, 98, 72, .11); }
.login-card-heading h2 { font-family: var(--serif); }
.phone-input-wrap { border-color: var(--line-strong); border-radius: 2px; }
.phone-input-wrap:focus-within { border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(156, 98, 72, .13); }
.country-code { color: var(--taupe); border-color: var(--line); }
.auth-links { display: flex; flex-wrap: wrap; gap: 8px 15px; margin-top: 18px; }
.auth-links .text-button { padding: 0; color: var(--taupe); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.auth-links .text-button:hover { color: var(--terracotta-dark); }
[data-auth-panel][hidden] { display: none; }

@media (max-width: 900px) {
  .masthead { grid-template-columns: 1fr; min-height: auto; }
  .quote-card { max-width: 390px; margin-left: auto; }
  .outfit-grid { grid-template-columns: repeat(2, 1fr); }
  .outfit-card:first-child { grid-column: span 2; }
  .recent-lookbook { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .outfit-notes { border-left: 0; border-top: 1px solid var(--line); padding-top: 28px; }
}
@media (max-width: 760px) {
  .topbar { height: 64px; }
  .wordmark::after { font-size: 9px; }
  .navigation-panel { right: -4px; }
  .masthead { padding-top: 8px; }
  .masthead h1 { font-size: clamp(3.2rem, 15vw, 4.8rem); }
  .outfit-grid, .outfit-card:first-child { grid-template-columns: 1fr; grid-column: auto; }
  .outfit-card, .outfit-card:first-child { min-height: 190px; }
  .wardrobe-browser .category-filter { justify-content: flex-start; margin: 15px 0 19px; padding: 0; }
  .outfit-studio .planner-panel { padding: 22px 18px; }
  .tryon-layout { border-top: 0; padding-top: 0; }
  .login-layout::before { display: none; }
}
@media (max-width: 520px) {
  main { padding-inline: 16px; }
  .wordmark::after { display: none; }
  .quote-card { margin-left: 0; }
  .recent-lookbook-heading { align-items: start; }
  .recent-lookbook-all { margin-bottom: 26px; font-size: 9px; }
  .recent-lookbook { grid-template-columns: 1fr; }
  .recent-lookbook-card { min-height: 202px; grid-template-rows: 108px minmax(0, 1fr); }
  .recent-lookbook-copy { padding: 13px 14px 15px; }
  .wardrobe-browser .storefront-grid { gap: 1px; }
  .detail-visual { border-right: 0; border-bottom: 1px solid var(--line); }
  .detail-texture-candidates { grid-template-columns: 1fr; }
  .tryon-picker, .tryon-results { gap: 1px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Private wardrobe gallery: neutral product surfaces, image-led browsing. */
:root { --ink: #171719; --ink-soft: #4d4d52; --paper: #f7f7f5; --surface: #ffffff; --paper-deep: #ebebe8; --line: #deded9; --line-strong: #b9b8b1; --muted: #6c6b68; --terracotta: #a6533d; --terracotta-dark: #7e3527; --taupe: #6d6862; --shadow: 0 18px 44px rgba(23, 23, 25, .08); }
body, body:has(.wardrobe-browser), body:has(.outfit-studio), body:has(.profile-editor) { background: var(--paper); color: var(--ink); }
.topbar { background: rgba(247, 247, 245, .94); }
.wordmark::after { color: var(--ink); }
.eyebrow { color: var(--terracotta-dark); letter-spacing: .055em; }
.primary { background: var(--ink); box-shadow: none; }
.primary:hover:not(:disabled) { background: var(--terracotta-dark); box-shadow: none; }
.secondary { color: var(--ink); background: var(--surface); border-color: var(--line-strong); }
.secondary:hover:not(:disabled) { color: var(--terracotta-dark); background: #fbf6f4; border-color: var(--terracotta); }

.wardrobe-browser-head { align-items: center; margin-bottom: 22px; }
.wardrobe-browser-head h1 { font-family: "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif; font-size: clamp(2.35rem, 4vw, 4.4rem); letter-spacing: -.045em; }
.wardrobe-browser .collection-heading { display: flex; justify-content: space-between; align-items: end; }
.wardrobe-browser .collection-heading h2 { font-family: "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif; font-size: 1.35rem; }
.wardrobe-browser .category-filter { display: flex; overflow-x: auto; gap: 7px; margin: 18px 0 12px; padding: 0 0 4px; scrollbar-width: thin; }
.wardrobe-browser .category-chip { flex: 0 0 auto; padding: 8px 12px; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px; background: transparent; font: 600 12px "Microsoft YaHei UI", "PingFang SC", sans-serif; }
.wardrobe-browser .category-chip:hover, .wardrobe-browser .category-chip.active { color: #fff; border-color: var(--ink); background: var(--ink); }
.wardrobe-secondary-filter { margin: 0 0 25px; border-bottom: 1px solid var(--line); }
.wardrobe-secondary-filter summary { width: fit-content; margin-bottom: 12px; color: var(--ink-soft); cursor: pointer; font-size: 13px; font-weight: 700; }
.wardrobe-secondary-filter[open] summary { color: var(--terracotta-dark); }
.secondary-filter-options { display: flex; flex-wrap: wrap; gap: 12px; padding: 0 0 18px; }
.secondary-filter-options label { display: grid; min-width: 150px; gap: 5px; color: var(--ink-soft); font-size: 11px; }
.secondary-filter-options select { min-height: 38px; padding: 7px 10px; border-radius: 6px; background: var(--surface); font-size: 13px; }
.wardrobe-browser .storefront-grid { gap: 1px; background: var(--paper-deep); }
.wardrobe-browser .storefront-card { position: relative; overflow: hidden; min-height: 0; border: 0; background: var(--surface); }
.wardrobe-browser .storefront-card > img, .wardrobe-browser .garment-missing-image { aspect-ratio: 3 / 4; height: auto; background: #efefed; transition: transform .24s ease-out, filter .24s ease-out; }
.wardrobe-browser .storefront-card .garment-meta { min-height: 82px; padding: 13px 14px 14px; background: var(--surface); }
.wardrobe-browser .storefront-card h3 { margin: 0; color: var(--ink); font-family: "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif; font-size: 14px; line-height: 1.45; }
.wardrobe-browser .storefront-card .garment-meta > p { margin: 3px 0 0; color: var(--muted); font: 11px "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif; }
.garment-card-reveal { position: absolute; right: 10px; bottom: 10px; left: 10px; display: flex; flex-wrap: wrap; gap: 5px; padding: 9px; color: #fff; background: rgba(23, 23, 25, .9); opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .18s ease-out, transform .18s ease-out; }
.garment-card-reveal span { font-size: 10px; }
.garment-card--openable:hover > img, .garment-card--openable:focus-visible > img, .garment-card--openable:focus-within > img { filter: brightness(.88); transform: scale(1.015); }
.garment-card--openable:hover .garment-card-reveal, .garment-card--openable:focus-visible .garment-card-reveal, .garment-card--openable:focus-within .garment-card-reveal { opacity: 1; transform: translateY(0); }
.garment-card--openable:focus-visible { outline: 3px solid rgba(166, 83, 61, .36); outline-offset: -3px; }

.garment-detail-shell { background: var(--surface); box-shadow: var(--shadow); }
.detail-visual { background: #f1f1ee; }
.detail-copy { background: var(--surface); }
.detail-copy h2, .detail-copy .eyebrow { font-family: "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif; }
.detail-facts > div, .detail-section--description, .detail-section--texture { background: #fafaf8; }
.detail-actions { display: grid; gap: 5px; width: min(220px, 100%); margin-top: 8px; padding: 7px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.detail-actions .detail-delete { width: 100%; }
.detail-more-actions { margin-top: 16px; }
.texture-text-choices { display: grid; gap: 7px; margin-top: 11px; }
.texture-text-choices .secondary { width: 100%; justify-content: flex-start; text-align: left; }

.outfit-studio { max-width: 1320px; padding: 0; }
.outfit-studio-header { margin-bottom: 32px; border-bottom-color: var(--line); }
.outfit-studio-title h1, .outfit-studio .planner-panel-heading h2 { color: var(--ink); font-family: "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif; }
.outfit-studio-title h1 { font-size: clamp(2.35rem, 4.7vw, 4.6rem); }
.outfit-studio-title > p:last-child, .outfit-studio-marker { color: var(--muted); }
.outfit-studio-workspace { grid-template-columns: minmax(0, 1.45fr) minmax(260px, .65fr); }
.outfit-studio .planner-panel, .outfit-studio .planner-panel--occasion, .outfit-studio .planner-collection, .outfit-studio .planner-weather { background: var(--surface); border-color: var(--line); box-shadow: none; }
.outfit-studio .planner-panel { padding: clamp(21px, 3vw, 34px); }
.outfit-studio .planner-panel-heading { border-bottom-color: var(--line); }
.outfit-studio .scenario-presets button { color: var(--ink-soft); border-radius: 999px; background: var(--surface); border-color: var(--line-strong); }
.outfit-studio .scenario-presets button:hover, .outfit-studio .scenario-presets button.active { color: #fff; background: var(--ink); border-color: var(--ink); }
.outfit-studio .planner-fields input, .outfit-studio .weather-summary { background: #fafaf8; border-color: var(--line); }
.outfit-studio .weather-orb { color: var(--terracotta); background: #fff; border-color: #dbc1ba; }
.outfit-studio .planner-submit { background: var(--ink); box-shadow: none; }
.outfit-studio .planner-submit .eyebrow { color: #dfad9e; }
.outfit-studio .planner-submit .primary { background: var(--terracotta); }
.outfit-studio .planner-submit .primary:hover { background: #c36b53; }

.outfit-draft-region { margin: 54px 0 6px; padding-top: 24px; border-top: 1px solid var(--line); }
.draft-results-heading { max-width: 720px; }
.draft-results-heading h2 { color: var(--ink); font-family: "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif; font-size: clamp(1.8rem, 3vw, 2.7rem); }
.draft-choice-grid { gap: 1px; background: var(--line); }
.draft-choice-card { min-height: 258px; padding: 17px; border: 0; background: var(--surface); box-shadow: none; }
.draft-choice-card:hover, .draft-choice-card.is-selected { border: 0; box-shadow: inset 0 -3px var(--terracotta); transform: none; }
.draft-choice-open { background: transparent; }
.draft-choice-open:hover { background: #faf8f6; }
.draft-choice-open small, .draft-choice-hint { color: var(--terracotta-dark); font-family: "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif; }
.draft-choice-open strong { font-size: 21px; }
.draft-score, .outfit-score { color: var(--ink-soft); background: #f4f2ef; border-color: var(--line); }
.draft-choice-footer { position: sticky; bottom: 12px; z-index: 2; padding: 12px 14px; background: rgba(255, 255, 255, .96); border: 1px solid var(--line); box-shadow: var(--shadow); }
.draft-choice-card:has(.draft-inline-detail) { grid-column: 1 / -1; }
.draft-inline-detail { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(270px, .95fr); gap: clamp(18px, 3vw, 42px); margin: 20px -1px -1px; padding: 22px 1px 1px; border-top: 1px solid var(--line); }
.draft-inline-visual { min-width: 0; background: #efefec; }
.draft-inline-copy { min-width: 0; padding: 6px 18px 18px 0; }
.draft-inline-copy .draft-lookbook { min-height: 410px; background: #efefec; background-image: none; }
.draft-inline-copy .draft-lookbook-piece, .draft-inline-visual .draft-lookbook-piece { background: #fff; box-shadow: 0 8px 18px rgba(23, 23, 25, .08); }
.draft-inline-replacements { margin: 18px 0 0; padding-top: 13px; color: var(--ink-soft); font-size: 12px; border-top: 1px solid var(--line); }

.outfit-collection-tabs button { color: var(--ink-soft); border-radius: 999px; background: transparent; }
.outfit-collection-tabs button.active { color: #fff; background: var(--ink); border-color: var(--ink); }
.outfit-archive { gap: 1px; background: var(--line); }
.outfit-archive-card, .outfit-archive-card:first-child, .outfit-archive-card:nth-child(3n + 1) { background: var(--surface); }
.outfit-archive-card:hover { transform: none; box-shadow: inset 0 -3px var(--terracotta); }
.outfit-lookbook { background: #f1f1ee; border-color: var(--line); box-shadow: none; }
.texture-collage { background: #ebebe8; background-image: none; }
.texture-piece { background: var(--surface); box-shadow: 0 8px 18px rgba(23, 23, 25, .08); }
.texture-piece:nth-child(n) { transform: none; }
.outfit-generation-detail { border-left-color: var(--terracotta); }

.private-wardrobe-marquee { position: relative; width: 100vw; overflow: hidden; margin: 0 0 0 calc(50% - 50vw); padding: 78px 0; color: var(--terracotta); background: transparent; }
.private-wardrobe-marquee-track { display: flex; width: max-content; will-change: transform; }
.private-wardrobe-marquee-group { display: flex; flex: 0 0 auto; }
.private-wardrobe-marquee span { flex: 0 0 auto; margin-right: 204px; font: 650 clamp(6rem, 12vw, 8.7rem) "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif; letter-spacing: .09em; text-transform: uppercase; }
.private-wardrobe-marquee span::after { content: "•"; margin-left: 204px; color: var(--terracotta); }

@media (max-width: 760px) {
  .home-cover { display: block; min-height: 0; }
  .secondary-filter-options { display: grid; grid-template-columns: 1fr; }
  .secondary-filter-options label { min-width: 0; }
  .garment-card-reveal { position: static; display: none; margin-top: 9px; color: var(--ink-soft); background: transparent; opacity: 1; transform: none; }
  .garment-card--openable:focus-within .garment-card-reveal { display: flex; }
  .outfit-draft-region { margin-top: 38px; }
  .draft-inline-detail { grid-template-columns: 1fr; }
  .draft-inline-copy { padding: 0 2px 18px; }
  .draft-inline-copy .draft-lookbook { min-height: 360px; }
}
@media (prefers-reduced-motion: reduce) { .private-wardrobe-marquee-track { will-change: auto; } }