/* ===== User Menu (Dropdown) ===== */
.user-menu-wrap { position: relative; }
.user-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--bg-dropdown); border: 1px solid var(--border-color);
  border-radius: 10px; padding: 6px; min-width: 180px;
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: all 0.2s; z-index: 300;
}
.user-menu-wrap:hover .user-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.user-dropdown a {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  border-radius: 6px; font-size: 13px; color: var(--text-secondary);
  transition: all 0.15s;
}
.user-dropdown a:hover { background: rgba(124,58,237,0.12); color: var(--text-primary); }
.user-dropdown .ud-div { height: 1px; background: var(--border-color); margin: 4px 8px; }

/* ===== Modal ===== */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 500;
  background: var(--overlay-bg); align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--bg-modal); border: 1px solid var(--border-color);
  border-radius: 16px; max-width: 480px; width: 90%; padding: 32px;
  box-shadow: var(--shadow-lg);
  animation: modalIn 0.3s;
}
@keyframes modalIn { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.modal h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.modal p { font-size: 13px; color: var(--text-secondary); margin-bottom: 20px; line-height: 1.6; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.modal .minput {
  width:100%;padding:10px 14px;border-radius:8px;
  border:1px solid var(--border-input);background:var(--bg-secondary);
  color:var(--text-primary);font-size:13px;font-family:inherit;outline:none;
  transition:background 0.35s ease, color 0.35s ease;
}
.modal .mlabel { font-size:12px;color:var(--text-muted);margin-bottom:4px; }
.modal .mcard {
  background:var(--bg-secondary);border-radius:8px;padding:16px;margin-bottom:20px;
  transition:background 0.35s ease;
}
.modal .mcard .mrow { display:flex;gap:12px;margin-bottom:8px; }
.modal .mcard .mlbl { color:var(--text-muted);width:60px;flex-shrink:0; }
.modal .mcard .mval { color:var(--text-primary); }

/* ===== Extra ===== */
.gap-12 { height: 12px; }
.gap-24 { height: 24px; }
.section-alt { background: var(--bg-section-alt); transition: background 0.35s ease; }