.wardrobe-panel,.wardrobe-weather { margin-top: 18px; border: 1px solid var(--line); border-radius: 18px; padding: 20px; background: #fff; color: var(--ink); }
.wardrobe-panel [hidden],.wardrobe-weather [hidden] { display: none !important; }
.wardrobe-panel { background: linear-gradient(130deg, #faf9ff, #fff 55%, #f6faf8); }
.wardrobe-panel button,.wardrobe-weather button { min-height: 44px; padding: 9px 14px; border: 1px solid #d8d3e8; border-radius: 11px; background: #fff; color: #4d446d; font: 500 12px/1.5 var(--sans); cursor: pointer; }
.wardrobe-panel button:hover,.wardrobe-weather button:hover { background: #f2effb; }
.wardrobe-panel button:disabled,.wardrobe-weather button:disabled { opacity: .5; cursor: wait; }
.wardrobe-panel button.wardrobe-primary { color: #fff; background: #6554b4; border-color: #6554b4; }
.wardrobe-panel button.wardrobe-primary:hover { background: #504194; }
.wardrobe-panel :is(button,input,select):focus-visible,.wardrobe-weather :is(button,input):focus-visible,.wardrobe-inventory summary:focus-visible { outline: 2px solid #6858c7; outline-offset: 3px; }
.wardrobe-heading,.wardrobe-weather-heading,.wardrobe-recommendation-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.wardrobe-heading h4 { margin: 5px 0; font: 600 23px/1.4 var(--serif); }
.wardrobe-eyebrow { margin: 0; color: #6c5b96; font-size: 11px; letter-spacing: 1px; }
.wardrobe-muted,.wardrobe-status,.wardrobe-weather p { margin: 8px 0; color: #6a657a; font: 400 12px/1.8 var(--sans); overflow-wrap: anywhere; }
.wardrobe-weather { background: #f7faf9; }
.wardrobe-weather-heading b { font-size: 13px; color: #355e52; }
.wardrobe-weather-heading p { margin-bottom: 0; }
.wardrobe-weather small { display: block; margin-top: 10px; color: #6a657a; font-size: 11px; }
.wardrobe-weather a { color: #466c61; }
.wardrobe-city-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.wardrobe-city-form input { flex: 1 1 170px; width: 170px; }
.wardrobe-panel input:not([type='checkbox']),.wardrobe-panel select,.wardrobe-city-form input { min-height: 44px; min-width: 0; padding: 9px 11px; border: 1px solid #d8d3e8; border-radius: 10px; background: #fff; color: var(--ink); font: 400 13px/1.5 var(--sans); }
.wardrobe-city-results { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.wardrobe-city-results:empty { margin: 0; }
.wardrobe-editor { margin-top: 18px; padding: 18px; border: 1px solid #d8d0ee; border-radius: 14px; background: #fff; }
.wardrobe-panel h5 { margin: 0; font: 600 15px/1.6 var(--sans); }
.wardrobe-photo-field { display: flex; align-items: center; gap: 14px; margin: 15px 0; }
.wardrobe-photo-field img { flex: 0 0 90px; width: 90px; height: 105px; object-fit: contain; border-radius: 10px; background: #f5f4f8; }
.wardrobe-photo-field label { display: grid; gap: 8px; min-width: 0; font-size: 12px; }
.wardrobe-photo-field input { width: 100%; }
.wardrobe-photo-field small { color: #6a657a; font-size: 11px; }
.wardrobe-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wardrobe-fields label { display: grid; gap: 6px; min-width: 0; color: #514b65; font-size: 12px; }
.wardrobe-name-field { grid-column: 1/-1; }
.wardrobe-checks { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 10px; }
.wardrobe-checks label { display: flex; align-items: center; gap: 7px; min-height: 44px; color: #514b65; font-size: 12px; cursor: pointer; }
.wardrobe-checks input { width: 18px; height: 18px; accent-color: #6554b4; }
.wardrobe-error { margin: 8px 0; color: #a34055; font-size: 12px; line-height: 1.7; }
.wardrobe-error:empty { display: none; }
.wardrobe-editor-actions { display: flex; gap: 8px; margin-top: 12px; }
.wardrobe-recommendation { padding: 17px 0 4px; margin-top: 16px; border-top: 1px solid var(--line); }
.wardrobe-recommendation-heading span { padding: 4px 8px; border-radius: 6px; background: #e8f2ec; color: #42785e; font-size: 10px; white-space: nowrap; }
.wardrobe-outfit { display: grid; grid-template-columns: repeat(auto-fit, minmax(95px, 1fr)); gap: 10px; margin-top: 14px; }
.wardrobe-outfit-item { min-width: 0; padding: 8px; border: 1px solid #e7e1ef; border-radius: 12px; background: #fff; }
.wardrobe-outfit-item img,.wardrobe-item img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 8px; background: #f6f5f8; }
.wardrobe-outfit-item small { display: block; margin-top: 8px; color: #7a718c; font-size: 10px; }
.wardrobe-outfit-item b,.wardrobe-item b { display: block; margin-top: 4px; color: #39324d; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.wardrobe-reasons { margin: 14px 0 8px; padding-left: 19px; color: #5c566c; font-size: 12px; line-height: 1.85; }
.wardrobe-missing { padding: 10px 12px; border-radius: 9px; background: #fbf4e8; color: #80633e; font-size: 12px; line-height: 1.8; }
.wardrobe-inventory { margin-top: 14px; border-top: 1px solid var(--line); }
.wardrobe-inventory summary { min-height: 48px; padding: 14px 0; color: #534775; font-size: 13px; font-weight: 600; cursor: pointer; }
.wardrobe-inventory summary span { float: right; color: #797084; font-size: 11px; font-weight: 400; }
.wardrobe-filter { display: flex; align-items: center; gap: 10px; color: #6a657a; font-size: 12px; }
.wardrobe-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.wardrobe-item { min-width: 0; padding: 10px; border: 1px solid #e3deeb; border-radius: 12px; background: #fff; }
.wardrobe-item[data-enabled='false'] img { opacity: .55; }
.wardrobe-item > small { display: block; margin-top: 5px; color: #6e657e; font-size: 10px; line-height: 1.6; }
.wardrobe-item > .wardrobe-paused { color: #93672f; }
.wardrobe-item-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.wardrobe-item-actions button { padding: 7px 9px; font-size: 11px; }
.wardrobe-item-actions button[data-confirm='true'] { color: #a34055; border-color: #dbb2bc; }
.wardrobe-storage-note { margin: 16px 0 0; color: #777080; font-size: 11px; line-height: 1.8; }
@media (max-width: 620px) {
  .wardrobe-panel,.wardrobe-weather { padding: 15px 12px; border-radius: 14px; }
  .wardrobe-heading { align-items: flex-start; }
  .wardrobe-heading h4 { font-size: 21px; }
  .wardrobe-heading > button { flex: 0 0 auto; padding: 8px 11px; font-size: 11px; }
  .wardrobe-editor { padding: 13px 10px; }
  .wardrobe-photo-field { align-items: flex-start; flex-direction: column; }
  .wardrobe-photo-field img { flex-basis: auto; }
  .wardrobe-photo-field label { width: 100%; }
  .wardrobe-outfit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wardrobe-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .wardrobe-item { padding: 8px; }
  .wardrobe-recommendation-heading { align-items: flex-start; }
  .wardrobe-panel input:not([type='checkbox']),.wardrobe-panel select,.wardrobe-city-form input { font-size: 16px; }
}