/* Editorial planning desk: a quiet worksheet with a weather instrument panel. */
.outfit-page-head { margin-bottom: 30px; }
.outfit-planner { display: grid; gap: 12px; }
.planner-panel { padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.planner-weather { background: linear-gradient(118deg, #e3edf8, #f8fbfd 72%); border-color: #cbdbea; }
.planner-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.planner-panel-heading h2 { margin-bottom: 0; font-size: clamp(22px, 2.4vw, 30px); }
.weather-refresh { padding: 8px 0; color: var(--moss); font: 10px "Cascadia Mono", monospace; letter-spacing: .05em; background: transparent; border: 0; cursor: pointer; }
.weather-refresh:hover { color: var(--clay); }
.weather-summary { display: flex; gap: 14px; align-items: center; min-height: 72px; margin: 20px 0; padding: 12px 15px; background: rgba(255,255,255,.56); border: 1px solid rgba(93,132,172,.22); }
.weather-orb { display: grid; width: 42px; height: 42px; place-items: center; color: #e39039; font-size: 36px; line-height: 1; background: #fff9ee; border: 1px solid #f2d6aa; border-radius: 50%; }
.weather-summary div { display: grid; gap: 2px; }
.weather-summary strong { font-size: 14px; }
.weather-summary small { color: var(--muted); font-size: 11px; }
.planner-fields textarea { width: 100%; min-height: 112px; resize: vertical; }
.recent-plan-summary { display: grid; gap: 10px; margin-top: 17px; color: var(--muted); font-size: 12px; }
.recent-plan-summary > strong { color: var(--ink); font-size: 13px; }.recent-plan-summary a { display: grid; gap: 3px; padding-top: 10px; color: inherit; text-decoration: none; border-top: 1px solid var(--line); }.recent-plan-summary a:hover b { color: var(--clay); }.recent-plan-summary b { color: var(--ink); font-size: 12px; font-weight: 650; }.recent-plan-summary small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planner-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.planner-fields--wide { grid-template-columns: minmax(0, 1.45fr) minmax(180px, .55fr); margin-top: 18px; }
.scenario-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 19px; }
.scenario-presets button { padding: 8px 12px; color: var(--moss); font-size: 12px; background: #f6f9fc; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; transition: .18s ease; }
.scenario-presets button:hover, .scenario-presets button.active { color: #fff; background: var(--ink); border-color: var(--ink); transform: translateY(-1px); }
.planner-helper { max-width: 650px; margin: 17px 0 0; font-size: 13px; line-height: 1.75; }
.planner-submit { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 22px 26px; background: var(--ink); border-radius: 14px; }
.planner-submit .eyebrow { margin-bottom: 2px; color: #9cc7f1; }
.planner-submit p:not(.eyebrow) { margin: 0; color: #dce8f3; font-size: 13px; }
.planner-submit .primary { color: var(--ink); background: #d6ecff; }
.planner-submit .primary:hover { background: #fff; }
.selected-garment-list { display: flex; flex-wrap: wrap; gap: 7px; min-height: 30px; margin-top: 17px; }
.selected-garment-empty { color: var(--muted); font-size: 12px; }
.selected-garment-chip { display: inline-flex; gap: 6px; align-items: center; padding: 6px 8px 6px 10px; color: var(--ink); font-size: 12px; background: #e7f0fa; border: 1px solid #c9dcec; border-radius: 999px; }
.selected-garment-chip button { width: 16px; height: 16px; padding: 0; color: var(--moss); font-size: 15px; line-height: 1; background: transparent; border: 0; cursor: pointer; }
.selected-garment-chip button:hover { color: var(--danger); }
.garment-picker { width: min(980px, calc(100vw - 36px)); max-width: none; max-height: min(760px, calc(100dvh - 36px)); overflow: auto; background: transparent; }
.garment-picker::backdrop { background: rgba(14,25,39,.72); backdrop-filter: blur(8px); }
.garment-picker-shell { padding: clamp(25px, 4vw, 48px); background: #f6f9fc; border: 1px solid #cad8e5; border-radius: 18px; }
.garment-picker-shell > p:not(.eyebrow) { margin: 0 0 22px; font-size: 13px; }
.picker-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.picker-garment { position: relative; display: grid; gap: 5px; padding: 8px; cursor: pointer; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.picker-garment:has(input:checked) { border-color: var(--clay); box-shadow: inset 0 0 0 2px #c5ddf4; }
.picker-garment input { position: absolute; top: 10px; right: 10px; z-index: 1; width: 17px; height: 17px; accent-color: var(--clay); }
.picker-image { display: grid; overflow: hidden; aspect-ratio: 1 / 1.05; background: #edf2f6; }
.picker-image img { width: 100%; height: 100%; object-fit: cover; }
.picker-image i { align-self: center; color: var(--muted); font-size: 11px; font-style: normal; text-align: center; }
.picker-garment strong { overflow: hidden; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.picker-garment small { overflow: hidden; color: var(--muted); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.picker-empty { grid-column: 1 / -1; color: var(--muted); }
.picker-confirm { display: block; width: 100%; margin-top: 20px; }
.archive-heading { margin-top: 66px; }
.outfit-selection-modal { width: min(1120px, calc(100vw - 36px)); max-width: none; max-height: min(850px, calc(100dvh - 36px)); padding: 0; overflow: auto; background: transparent; border: 0; }
.outfit-selection-modal::backdrop { background: rgba(14,25,39,.72); backdrop-filter: blur(8px); }
.outfit-selection-shell { position: relative; padding: clamp(22px, 4vw, 42px); background: #edf4fa; border: 1px solid #c4d8e8; border-radius: 16px; box-shadow: 0 20px 38px rgba(30, 54, 81, .18); }
.outfit-selection-shell > .close { position: absolute; top: 14px; right: 16px; z-index: 2; }
.draft-results-heading { max-width: 620px; }
.draft-results-heading h2 { margin: 8px 0 7px; font-size: clamp(28px, 3vw, 42px); }
.draft-results-heading > p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.draft-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin-top: 24px; }
.draft-choice-card { display: flex; flex-direction: column; min-height: 232px; padding: 14px; background: #fff; border: 1px solid #cddce8; box-shadow: 0 8px 16px rgba(50, 74, 101, .06); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.draft-choice-card:hover, .draft-choice-card.is-selected { border-color: #7a9cb9; box-shadow: inset 0 0 0 2px rgba(79, 120, 103, .16), 0 14px 26px rgba(50, 74, 101, .12); }
.draft-choice-card:hover { transform: translateY(-3px); }
.draft-choice-open { display: grid; flex: 1; gap: 11px; padding: 7px; color: var(--ink); text-align: left; background: #f4f8fb; border: 0; cursor: pointer; }
.draft-choice-open:hover { background: #e7f0f8; }
.draft-choice-open small { color: var(--moss); font: 10px "Cascadia Mono", monospace; letter-spacing: .06em; }
.draft-choice-open strong { font-size: 19px; line-height: 1.35; }
.draft-choice-hint { align-self: end; color: var(--moss); font: 10px "Cascadia Mono", monospace; letter-spacing: .03em; }
.draft-choice-card .chips { min-height: 26px; margin: 12px 0 0; }
.draft-choice-actions { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-top: 12px; }
.draft-choice-actions .secondary { padding: 7px 9px; font-size: 11px; }
.draft-selection-toggle.is-selected { color: #fff; background: var(--moss); border-color: var(--moss); }
.draft-discard { align-self: flex-start; padding: 0; color: #9d4d48; font: 10px "Cascadia Mono", monospace; letter-spacing: .03em; background: transparent; border: 0; cursor: pointer; }
.draft-discard:hover { color: var(--danger); text-decoration: underline; }
.draft-score { display: inline-block; align-self: flex-start; margin-top: 12px; padding: 4px 6px; color: #765b2f; font: 10px "Cascadia Mono", monospace; background: #fff8e9; border: 1px solid #ead39f; }
.draft-choice-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 18px; }
.draft-choice-footer span { color: var(--moss); font: 11px "Cascadia Mono", monospace; }
.draft-detail-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 17px; color: var(--moss); font: 11px "Cascadia Mono", monospace; letter-spacing: .08em; }
.draft-back { padding: 0; color: var(--moss); font: inherit; background: transparent; border: 0; cursor: pointer; }
.draft-back:hover { color: var(--clay); }
.draft-detail-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr); gap: clamp(18px, 3.6vw, 38px); align-items: start; }
.draft-detail-visual { padding: 12px; background: #dbe7f0; border: 1px solid #bfd0dd; }
.draft-lookbook { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(105px, 1fr)); gap: 10px; min-height: 505px; padding: 12px; background-color: #cedde8; background-image: linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px); background-size: 22px 22px; }
.draft-lookbook-piece { position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 7px; background: #f8fafc; border: 1px solid rgba(35, 59, 82, .16); box-shadow: 0 9px 18px rgba(35, 59, 82, .13); }
.draft-lookbook-piece:nth-child(1) { grid-area: 1 / 1 / span 2 / span 2; transform: rotate(-1.1deg); }
.draft-lookbook-piece:nth-child(2) { grid-area: 1 / 3 / span 1 / span 2; transform: rotate(1.2deg); }
.draft-lookbook-piece:nth-child(3) { grid-area: 2 / 3 / span 1 / span 2; transform: rotate(-.8deg); }
.draft-lookbook-piece:nth-child(4) { grid-area: 3 / 1 / span 1 / span 1; transform: rotate(.9deg); }
.draft-lookbook-piece:nth-child(5) { grid-area: 3 / 2 / span 1 / span 2; transform: rotate(-.5deg); }
.draft-lookbook-piece:nth-child(6) { grid-area: 3 / 4 / span 1 / span 1; transform: rotate(1deg); }
.draft-garment-image { display: grid; min-width: 0; min-height: 0; flex: 1; place-items: center; overflow: hidden; background: #edf2f6; }
.draft-garment-image img { width: 100%; height: 100%; object-fit: contain; }
.draft-garment-image > span { padding: 8px 6px 0; color: var(--moss); font: 10px "Cascadia Mono", monospace; text-align: center; }
.draft-garment-image > strong { padding: 4px 8px 10px; color: var(--ink); font-size: 12px; text-align: center; }
.draft-lookbook-piece figcaption { padding: 8px 2px 1px; overflow: hidden; color: var(--ink); font-size: 11px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.draft-required-badge { position: absolute; top: 10px; left: 10px; padding: 4px 6px; color: #fff; font: 9px "Cascadia Mono", monospace; background: var(--moss); box-shadow: 0 2px 6px rgba(30, 55, 70, .2); }
.draft-lookbook-empty { display: grid; grid-column: 1 / -1; place-items: center; color: var(--muted); font-size: 13px; }
.draft-detail-copy { min-width: 0; padding: 5px 2px; }
.draft-detail-copy .eyebrow { margin-bottom: 7px; }
.draft-detail-meta { display: flex; flex-wrap: wrap; gap: 5px; margin: 13px 0 20px; }
.draft-detail-meta .chips { margin: 0; }
.draft-detail-meta span { padding: 4px 6px; color: var(--moss); font-size: 10px; background: #f6f9fc; border: 1px solid #cedde8; }
.draft-detail-label { margin: 19px 0 6px; color: var(--moss); font: 10px "Cascadia Mono", monospace; letter-spacing: .08em; }
.draft-detail-rationale { margin: 0; color: var(--ink); font-size: 14px; line-height: 1.85; }
.draft-item-list { display: grid; gap: 6px; max-height: 195px; margin: 0; padding: 0; overflow: auto; list-style: none; }
.draft-item-list li { display: grid; grid-template-columns: 38px 1fr auto; gap: 9px; align-items: center; padding: 5px; background: #f7fafc; border: 1px solid #d7e3ed; }
.draft-item-thumbnail { width: 38px; height: 38px; flex: none; }
.draft-item-thumbnail > span, .draft-item-thumbnail > strong { display: none; }
.draft-item-list strong, .draft-item-list small { display: block; }
.draft-item-list strong { font-size: 12px; }
.draft-item-list small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.draft-item-list em { padding: 3px 5px; color: #356149; font: 9px "Cascadia Mono", monospace; font-style: normal; background: #edf7ef; border: 1px solid #bad7c2; }
.draft-detail-actions { display: flex; align-items: center; gap: 13px; margin-top: 19px; }
.draft-detail-actions .draft-discard { margin-left: auto; }
.draft-detail-navigation { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #c9d9e5; }
.outfit-card-weather { display: -webkit-box; min-height: 34px; margin-top: 8px; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.outfit-replacement-badge { display: inline-block; margin-top: 9px; padding: 3px 6px; color: #8b572a; font-size: 10px; background: #fff5e7; border: 1px solid #f0d3a3; }
.outfit-archive-card .outfit-card-hint { margin-top: 9px; }
.outfit-replacements, .outfit-origin { margin-top: 24px; padding-top: 17px; border-top: 1px solid var(--line); }
.outfit-replacements p:not(.detail-label), .outfit-origin { margin-bottom: 7px; color: var(--moss); font-size: 12px; line-height: 1.65; }
@media (max-width: 760px) { .planner-panel { padding: 22px; } .planner-fields, .planner-fields--wide { grid-template-columns: 1fr; } .picker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .draft-choice-grid, .draft-detail-layout { grid-template-columns: 1fr; } .draft-lookbook { min-height: 455px; } .draft-detail-copy { padding-top: 8px; } }
@media (max-width: 500px) { .planner-panel-heading, .planner-submit, .draft-choice-footer { align-items: flex-start; flex-direction: column; } .planner-submit .primary, .draft-choice-footer .primary { width: 100%; } .picker-grid, .draft-choice-grid { grid-template-columns: 1fr; } .garment-picker, .outfit-selection-modal { width: calc(100vw - 18px); } .outfit-selection-shell { padding: 24px 17px; } .draft-lookbook { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; min-height: 0; } .draft-lookbook-piece, .draft-lookbook-piece:nth-child(n) { grid-area: auto; min-height: 185px; transform: none; } .draft-lookbook-piece:first-child { grid-column: span 2; } .draft-detail-actions { align-items: flex-start; flex-wrap: wrap; } }

/* Styling studio: an editorial workspace frame, independent of recommendation logic. */
body:has(.outfit-studio) { background: #f4efea; }
.outfit-studio { max-width: 1420px; margin: 0 auto; padding: clamp(8px, 1.4vw, 20px) 0 8px; }
.outfit-studio-header { display: flex; max-width: none; align-items: end; justify-content: space-between; gap: 28px; margin: 0 0 clamp(26px, 4vw, 54px); padding: 0 0 23px; border-bottom: 1px solid #dfd5cb; }
.outfit-studio-title h1 { margin-bottom: 9px; font-size: clamp(40px, 5.1vw, 66px); color: #302218; }.outfit-studio-title > p:last-child { max-width: 550px; margin: 0; color: #79685b; font-size: 15px; }.outfit-studio-marker { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 9px; max-width: 320px; color: #957552; font: 10px "Cascadia Mono", monospace; letter-spacing: .13em; text-align: right; }.outfit-studio-marker i { width: 4px; height: 4px; background: #b49a7b; border-radius: 50%; }
.outfit-studio-workspace { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .72fr); gap: clamp(20px, 3.8vw, 58px); align-items: start; }.outfit-studio-main, .outfit-studio-aside { display: grid; gap: 18px; }.outfit-studio-aside { position: sticky; top: 88px; }
.outfit-studio .planner-panel { padding: clamp(22px, 3.2vw, 40px); background: #fffdfb; border: 1px solid #e1d6cb; border-radius: 0; box-shadow: 0 10px 28px rgba(72, 51, 34, .035); }.outfit-studio .planner-panel--occasion { min-height: 258px; background: #fbf6f1; }.outfit-studio .planner-panel--picks { min-height: 196px; }.outfit-studio .planner-collection { padding: 24px 25px; background: #eee4d9; }.outfit-studio .planner-weather { padding: 25px; background: #fffdfb; border-color: #e1d6cb; }.outfit-studio .planner-panel-heading { padding-bottom: 16px; border-bottom: 1px solid #e7ddd4; }.outfit-studio .planner-panel-heading h2 { color: #35261d; font-family: Georgia, "Times New Roman", serif; font-size: clamp(22px, 2vw, 29px); font-weight: 500; }.outfit-studio .planner-helper { margin-top: 15px; color: #776658; }.outfit-studio .scenario-presets button { color: #6b5341; background: transparent; border-color: #d9cbbf; border-radius: 0; }.outfit-studio .scenario-presets button:hover, .outfit-studio .scenario-presets button.active { color: #fffaf5; background: #3b2a1f; border-color: #3b2a1f; }.outfit-studio .planner-fields input { background: #fffdfb; border-color: #d9ccbf; border-radius: 4px; }.outfit-studio .weather-summary { margin: 17px 0; padding: 13px; background: #f6efe8; border-color: #e1d2c3; }.outfit-studio .weather-orb { color: #a77939; background: #fff9f0; border-color: #ebd4aa; }.outfit-studio .weather-refresh { color: #806047; }.outfit-studio .selected-garment-chip { color: #513a28; background: #f2e8dc; border-color: #d9c6b3; border-radius: 2px; }.outfit-studio .planner-submit { padding: 27px clamp(22px, 3.2vw, 40px); background: #35261d; border-radius: 0; box-shadow: 0 13px 28px rgba(68, 46, 29, .12); }.outfit-studio .planner-submit .eyebrow { color: #d9b882; }.outfit-studio .planner-submit p:not(.eyebrow) { color: #eadfd4; }.outfit-studio .planner-submit .primary { color: #fffaf4; background: #916f4d; border-radius: 2px; }.outfit-studio .planner-submit .primary:hover { background: #b08a60; }
@media (max-width: 900px) { .outfit-studio-workspace { grid-template-columns: 1fr; }.outfit-studio-aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }.outfit-studio .planner-collection, .outfit-studio .planner-weather { height: 100%; } }
@media (max-width: 620px) { .outfit-studio { padding-top: 0; }.outfit-studio-header { align-items: start; flex-direction: column; gap: 14px; margin-bottom: 25px; }.outfit-studio-marker { justify-content: start; text-align: left; }.outfit-studio-aside { grid-template-columns: 1fr; }.outfit-studio .planner-panel { padding: 22px 19px; }.outfit-studio .planner-submit { padding: 22px 19px; }.outfit-studio .planner-submit .primary { width: 100%; } }
.retrieval-mode-toggle{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px;border:1px solid var(--line);background:var(--surface)}.retrieval-mode-toggle strong,.retrieval-mode-toggle small{display:block}.retrieval-mode-toggle strong{font-family:Georgia,serif;font-size:20px;margin-bottom:5px}.retrieval-mode-toggle small{max-width:690px;color:var(--muted);line-height:1.55}.switch-control{display:flex;align-items:center;gap:9px;flex:0 0 auto;cursor:pointer;font-size:13px}.switch-control input{position:absolute;opacity:0}.switch-control span{width:46px;height:26px;padding:3px;border-radius:999px;background:var(--line);transition:background .18s ease}.switch-control span::after{content:"";display:block;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .18s ease}.switch-control input:checked+span{background:var(--clay)}.switch-control input:checked+span::after{transform:translateX(20px)}.switch-control input:focus-visible+span{outline:3px solid rgba(27,95,167,.24);outline-offset:3px}.usage-guide{max-width:1120px;margin:0 auto;padding:64px 28px}.usage-guide h1{font-family:Georgia,serif;font-size:clamp(36px,5vw,64px);line-height:1;margin:.2em 0}.usage-guide-intro{max-width:650px;font-size:16px;line-height:1.75;color:var(--muted)}.usage-guide-content{max-width:740px;margin:44px 0 28px}.usage-guide-content section{margin:0 0 28px;padding:0 0 28px;border-bottom:1px solid var(--line)}.usage-guide-content section:last-child{margin-bottom:0}.usage-guide-section-label{margin:0 0 9px!important;color:var(--clay)!important;font-size:12px!important;font-weight:700;letter-spacing:.1em;line-height:1.4!important}.usage-guide-content h2{margin:0 0 10px;font-family:Georgia,serif;font-size:clamp(22px,2.7vw,32px);line-height:1.16}.usage-guide-details{max-width:680px}.usage-guide-details summary{position:relative;display:inline;cursor:pointer;color:var(--muted);font-size:16px;line-height:1.75;list-style:none;text-decoration-line:underline;text-decoration-color:var(--line);text-decoration-thickness:1px;text-underline-offset:5px;transition:background-color .16s ease,color .16s ease,text-decoration-color .16s ease}.usage-guide-details summary::-webkit-details-marker{display:none}.usage-guide-details summary:hover,.usage-guide-details summary:focus-visible{color:var(--ink);background:color-mix(in srgb,var(--clay) 14%,transparent);text-decoration-color:var(--clay);outline:none}.usage-guide-details summary:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--clay) 18%,transparent)}.usage-guide-details summary::after{content:"  + 详情";color:var(--clay);font-size:12px;font-weight:700;letter-spacing:.06em;text-decoration:none;white-space:nowrap}.usage-guide-details[open] summary::after{content:"  − 收起"}.usage-guide-details p{margin:14px 0 0;padding-left:16px;border-left:2px solid var(--line);color:var(--muted);font-size:15px;line-height:1.75}.usage-guide-action{display:inline-flex;text-decoration:none}@media(max-width:760px){.usage-guide{padding:46px 20px}.usage-guide-content{margin-top:32px}.retrieval-mode-toggle{align-items:flex-start;flex-direction:column}}