/* Dressing: shared by ORPHÉE on the PC and the phone app */
.dr { display: flex; flex-direction: column; gap: 14px; }
.dr-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dr-head h3 { margin: 0; font-size: 22px; } .dr-head small { color: var(--ink-mute); }
.dr-add { cursor: pointer; }
.dr-today { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 14px; border-radius: 18px;
  background: linear-gradient(120deg, rgba(255,122,26,.16), rgba(255,255,255,.02)); border: 1px solid rgba(255,122,26,.3); }
.dr-weather { display: flex; align-items: center; gap: 8px; min-width: 150px; }
.dr-weather b { font-size: 24px; } .dr-weather small { color: var(--ink-soft); font-size: 12px; }
.dr-x { all: unset; cursor: pointer; opacity: .6; }
.dr-occ { flex: 1; }
.dr-occ button, .dr-filter button, .dr-form .chips-row button { padding: 7px 12px; border-radius: 99px; border: 1px solid var(--stroke, rgba(255,255,255,.1)); background: var(--panel, rgba(255,255,255,.04)); color: inherit; font-size: 13px; cursor: pointer; }
.dr button.on { border-color: var(--orange); background: rgba(255,122,26,.22); color: var(--ink, #fff); }
.dr-looks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.dr-look { border-radius: 22px; padding: 14px; background: radial-gradient(circle at 50% 30%, rgba(255,164,92,.22), transparent 60%), #0c0a09; border: 1px solid rgba(255,122,26,.25);
  animation: drIn .6s var(--d) both cubic-bezier(.2,.8,.2,1); box-shadow: 0 16px 40px rgba(0,0,0,.45); }
@keyframes drIn { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
.dr-mannequin { position: relative; height: 280px; }
.dr-mannequin img { position: absolute; left: 50%; transform: translateX(-50%); object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0,0,0,.55)); transition: transform .3s; }
.dr-to { top: 2%; height: 40%; z-index: 3; } .dr-ro { top: 2%; height: 70%; z-index: 3; } .dr-bo { top: 38%; height: 42%; z-index: 2; }
.dr-sh { bottom: 0; height: 17%; z-index: 4; } .dr-co { top: 0; height: 46%; left: 24% !important; z-index: 1; opacity: .9; } .dr-ac { top: 0; height: 15%; left: 80% !important; z-index: 5; }
.dr-look:hover img { transform: translateX(-50%) scale(1.03); }
.dr-look-txt { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.dr-look-txt small { color: var(--ink-soft); font-size: 11.5px; }
.dr-look-txt i { display: block; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--orange), #ffd29a); }
.dr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.dr-item { position: relative; all: unset; cursor: pointer; aspect-ratio: 3/4; border-radius: 16px; background: linear-gradient(160deg, #1b1714, #0d0b0a); border: 1px solid rgba(255,255,255,.08);
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px; box-sizing: border-box; overflow: hidden; position: relative; }
.dr-item img { max-width: 92%; max-height: 74%; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0,0,0,.5)); }
.dr-item span { position: absolute; top: 8px; left: 8px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); }
.dr-item em { position: absolute; top: 4px; right: 8px; color: #ffcf5a; font-style: normal; }
.dr-item small { font-size: 11px; color: var(--ink-soft); margin-top: 6px; text-align: center; }
.dr-item:hover { border-color: var(--orange); }
.dr-empty { grid-column: 1 / -1; text-align: center; padding: 20px; }
.dr-sheet { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 14px; border-radius: 18px; background: var(--panel-hi, #161311); border: 1px solid rgba(255,122,26,.35); }
.dr-sheet img { width: 100%; max-height: 200px; object-fit: contain; }
.dr-form { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 600px) { .dr-sheet { grid-template-columns: 1fr; } .dr-looks { grid-template-columns: 1fr 1fr; } .dr-mannequin { height: 220px; } }
/* phone app: full-screen dressing */
.dr-screen { position: fixed; inset: 0; z-index: 60; background: var(--bg); overflow-y: auto; padding: max(14px, env(safe-area-inset-top)) 14px 40px; }
.dr-screen .dr-close { position: sticky; top: 0; float: right; z-index: 2; }