/* Archive cards and the detail lookbook are intentionally isolated from the shared stylesheet. */
.archive-intro { max-width: 530px; margin: 0 0 23px; font-size: 14px; }
.outfit-archive-card { min-height: 205px; overflow: hidden; }
.outfit-card-link { position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.outfit-archive-card > *:not(.outfit-card-link) { position: relative; z-index: 1; }
.outfit-archive-card > *:not(.outfit-card-link):not(.feedback):not(.outfit-feedback-actions):not(.outfit-promote) { pointer-events: none; }
.outfit-archive-card h3 { max-width: 88%; margin: 12px 0 0; font-size: 21px; line-height: 1.35; }
.outfit-card-hint { display: block; margin-top: 10px; color: var(--moss); font: 10px "Cascadia Mono", monospace; letter-spacing: .05em; }
.outfit-archive-card .chips { padding-right: 75px; margin-top: 17px; }
.outfit-archive-card .feedback { z-index: 2; }
.outfit-collection-tabs { display: flex; gap: 8px; margin-top: 20px; }
.outfit-collection-tabs button { padding: 8px 12px; color: var(--moss); font: 700 11px "Cascadia Mono", monospace; background: #fff; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.outfit-collection-tabs button.active { color: #fff; background: var(--ink); border-color: var(--ink); }
.collection-type-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.collection-type-choice label { display: block; cursor: pointer; }
.collection-type-choice input { position: absolute; opacity: 0; pointer-events: none; }
.collection-type-choice span { display: grid; gap: 4px; min-height: 72px; padding: 14px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 9px; }
.collection-type-choice input:checked + span { color: #173b60; background: #eef5fb; border-color: var(--clay); box-shadow: 0 0 0 2px rgba(27,95,167,.12); }
.collection-type-choice small { color: var(--muted); font-weight: 400; }
.picker-garment.is-unavailable { opacity: .52; cursor: not-allowed; }
.picker-garment.is-unavailable .picker-image { filter: grayscale(1); }
.draft-label-input { width: 100%; padding: 3px 0 7px; color: var(--ink); font: 700 18px "Microsoft YaHei UI", sans-serif; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.outfit-rename { position: relative; z-index: 2; padding: 3px 5px; color: var(--moss); font-size: 10px; background: #fff; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.outfit-generation, .outfit-score { display: inline-block; margin-top: 7px; padding: 3px 6px; color: #48637e; font: 10px "Cascadia Mono", monospace; background: #edf4fa; border: 1px solid #cbdcea; }
.outfit-generation.ai { color: #365d49; background: #edf7ef; border-color: #bad7c2; }
.outfit-score { margin-left: 5px; color: #765b2f; background: #fff8e9; border-color: #ead39f; }
.outfit-feedback-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.outfit-feedback-actions .feedback { margin-right: 5px; }
.outfit-promote { position: relative; z-index: 2; padding: 4px 7px; color: #fff; font: 700 10px "Cascadia Mono", monospace; background: var(--moss); border: 1px solid var(--moss); border-radius: 999px; cursor: pointer; }
.outfit-promote:hover { background: var(--clay); border-color: var(--clay); }
.feedback-reason { position: relative; z-index: 2; padding: 3px 5px; color: var(--moss); font-size: 10px; background: #fff; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.feedback-reason:hover, .feedback-reason.active { color: #fff; background: var(--moss); border-color: var(--moss); }
.outfit-delete { position: relative; z-index: 2; margin-left: auto; padding: 3px 2px; color: #9d4d48; font-size: 10px; background: transparent; border: 0; cursor: pointer; }
.outfit-delete:hover { color: #fff; background: #9d4d48; }

.outfit-detail-header { max-width: 760px; margin-bottom: 38px; }
.outfit-detail-header h1 { margin-top: 22px; margin-bottom: 10px; }
.outfit-detail-header > p:last-child { margin: 0; font-size: 15px; }
.outfit-detail-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.outfit-detail-actions .back-link { margin-bottom: 0; }
.outfit-detail-delete { margin-left: 0; padding: 7px 10px; border: 1px solid #d9aaa5; border-radius: 7px; }
.outfit-detail-delete:hover { border-color: #9d4d48; }
.outfit-detail-promote { margin-right: 8px; }
.back-link { display: inline-block; margin-bottom: 34px; color: var(--moss); font: 11px "Cascadia Mono", monospace; letter-spacing: .04em; text-decoration: none; }
.back-link:hover { color: var(--clay); }
.outfit-detail-layout { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(290px, .68fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.outfit-lookbook { padding: 14px; background: #e8eef5; border: 1px solid #ced9e5; box-shadow: 0 20px 45px rgba(30, 54, 81, .1); }
.lookbook-caption { display: flex; justify-content: space-between; padding: 5px 4px 15px; color: var(--moss); font: 10px "Cascadia Mono", monospace; letter-spacing: .1em; }
.texture-collage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; min-height: 570px; padding: 14px; background: #d6e1ec; background-image: linear-gradient(rgba(255,255,255,.32) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.32) 1px, transparent 1px); background-size: 21px 21px; }
.texture-collage--one { grid-template-columns: 1fr; }
.texture-piece { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 8px; background: #f7f9fb; border: 1px solid rgba(34, 58, 83, .16); box-shadow: 0 10px 21px rgba(37, 60, 84, .13); }
.texture-piece:nth-child(3n + 1) { transform: rotate(-1.5deg); }
.texture-piece:nth-child(3n + 2) { transform: rotate(1.2deg); }
.texture-piece:nth-child(3n) { transform: rotate(-.4deg); }
.texture-piece img, .texture-piece-fallback { width: 100%; min-height: 0; flex: 1; aspect-ratio: 4 / 4.5; object-fit: contain; background: #edf2f6; }
.texture-piece-fallback { display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.texture-piece figcaption { display: flex; gap: 8px; align-items: center; padding: 9px 3px 2px; overflow: hidden; color: var(--ink); font-size: 12px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.texture-piece figcaption span { color: var(--moss); font: 10px "Cascadia Mono", monospace; }
.texture-collage-empty { display: grid; grid-column: 1 / -1; place-items: center; color: var(--muted); }
.lookbook-note { margin: 13px 4px 3px; font-size: 11px; line-height: 1.6; }
.outfit-notes { padding-top: 29px; }
.outfit-notes h2 { margin-bottom: 20px; }
.outfit-rationale { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.9; }
.outfit-generation-detail { margin: 17px 0 0; padding-left: 12px; color: var(--muted); font-size: 11px; line-height: 1.65; border-left: 2px solid #c7d9ea; }
.outfit-scores, .outfit-inspiration { margin-top: 23px; padding-top: 17px; border-top: 1px solid var(--line); }
.outfit-scores span { display: inline-block; margin: 7px 6px 0 0; padding: 4px 6px; color: var(--moss); font: 10px "Cascadia Mono", monospace; background: #f2f6f9; border: 1px solid #d6e1e9; }
.outfit-inspiration p:not(.detail-label) { margin: 8px 0; color: var(--moss); font-size: 12px; line-height: 1.65; }
.outfit-piece-list, .outfit-alternatives { margin-top: 31px; padding-top: 19px; border-top: 1px solid var(--line); }
.outfit-piece-list > div { display: grid; grid-template-columns: 32px 1fr; column-gap: 8px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid #e2e9f0; }
.outfit-piece-list span { grid-row: span 2; color: var(--moss); font: 10px "Cascadia Mono", monospace; }
.outfit-piece-list strong { font-size: 13px; }
.outfit-piece-list small { grid-column: 2; color: var(--muted); font-size: 11px; }
.outfit-alternatives .detail-tags { margin-top: 10px; }
@media (max-width: 760px) { .outfit-detail-actions { align-items: flex-start; flex-direction: column; gap: 12px; } .outfit-detail-layout { grid-template-columns: 1fr; } .texture-collage { min-height: 440px; } .outfit-notes { padding-top: 4px; } }
@media (max-width: 450px) { .texture-collage { grid-template-columns: 1fr; min-height: 0; } .texture-collage--two { grid-template-columns: repeat(2, 1fr); } }