/* ─── MODAL ─── */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(30,30,30,0.4); z-index: 100; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.modal-overlay.open { display: flex; }
.modal { background: var(--linen); border: 2px solid var(--pitch); border-radius: var(--r-md); padding: 28px; width: 460px; max-width: 92vw; animation: slideUp 0.18s ease; }
@keyframes slideUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.modal-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin-bottom: 5px; }
.modal-sub   { font-family: var(--font-mono); font-size: 11px; opacity: 0.45; margin-bottom: 18px; line-height: 1.6; }
.modal-input { width: 100%; background: var(--white); border: 1.5px solid var(--border-strong); border-radius: var(--r-sm); padding: 9px 12px; color: var(--pitch); font-family: var(--font-body); font-size: 13px; margin-bottom: 8px; outline: none; transition: border-color 0.15s; }
.modal-input:focus { border-color: var(--pitch); }
.modal-input::placeholder { color: rgba(30,30,30,0.28); font-family: var(--font-mono); font-size: 10px; }
textarea.modal-input { resize: vertical; min-height: 70px; line-height: 1.5; }
.modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
select.modal-input { appearance: none; cursor: pointer; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.btn-cancel  { padding: 8px 16px; background: none; border: 1.5px solid var(--border-strong); border-radius: var(--r-lg); color: var(--pitch); font-family: var(--font-mono); font-size: 10px; cursor: pointer; opacity: 0.45; transition: opacity 0.15s; }
.btn-cancel:hover { opacity: 1; }
.btn-confirm { padding: 8px 20px; background: var(--pitch); border: 1.5px solid var(--pitch); border-radius: var(--r-lg); color: var(--linen); font-family: var(--font-mono); font-size: 10px; cursor: pointer; transition: all 0.15s; }
.btn-confirm:hover { background: var(--forge); border-color: var(--forge); }

/* ─── MOOD (modal context) ─── */
.mood-tag { font-family: var(--font-mono); font-size: 9px; padding: 3px 9px; border-radius: var(--r-lg); border: 1.5px solid var(--border-strong); cursor: pointer; transition: all 0.12s; background: transparent; color: var(--pitch); opacity: 0.5; }
.mood-tag:hover, .mood-tag.selected { opacity: 1; border-color: var(--forge); color: var(--forge); background: rgba(192,63,39,0.06); }

/* ─── MOBILE MODALS ─── */
@media (max-width: 768px) {
  .modal-row { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .modal-overlay { align-items: flex-start; }
  .modal { width: 100vw; max-width: 100vw; min-height: 100vh; border-radius: 0; border-left: none; border-right: none; padding: 20px 16px; overflow-y: auto; animation: none; }
}