:root { --ui-overlay: rgba(0,0,0,0.55); --ui-bg: #ffffff; --ui-text: #0f172a; --ui-accent: #3b82f6; --ui-muted: #94a3b8; }
[data-theme="dark"] { --ui-bg: #0b1220; --ui-text: #e5e7eb; --ui-overlay: rgba(0,0,0,0.7); }

.ui-modal-overlay { position: fixed; inset: 0; background: var(--ui-overlay); display: flex; align-items: center; justify-content: center; z-index: 3000; opacity: 0; transform: scale(0.98); transition: all .2s ease; }
.ui-modal-overlay.show { opacity: 1; transform: scale(1); }
.ui-dialog { width: min(520px, 92vw); background: var(--ui-bg); color: var(--ui-text); border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.35); overflow: hidden; transform: translateY(12px); transition: transform .22s ease; }
.ui-modal-overlay.show .ui-dialog { transform: translateY(0); }
.ui-header { padding: 18px 20px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(148,163,184,.25); }
.ui-title { font-weight: 700; font-size: 16px; color: var(--ui-accent); }
.ui-close { margin-left: auto; background: transparent; border: none; color: var(--ui-muted); font-size: 22px; line-height: 1; width: 36px; height: 36px; border-radius: 8px; cursor: pointer; }
.ui-close:hover { background: rgba(148,163,184,.15); color: var(--ui-text); }
.ui-body { padding: 18px 20px; font-size: 14px; line-height: 1.6; color: var(--ui-text); }
.ui-input { width: 100%; margin-top: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(148,163,184,.35); background: transparent; color: var(--ui-text); outline: none; }
.ui-input:focus { border-color: var(--ui-accent); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
.ui-footer { padding: 16px 20px; display: flex; gap: 10px; justify-content: flex-end; border-top: 1px solid rgba(148,163,184,.2); }
.ui-btn { padding: 10px 14px; border-radius: 12px; border: 1px solid transparent; cursor: pointer; font-weight: 600; }
.ui-btn.secondary { background: transparent; color: var(--ui-text); border-color: rgba(148,163,184,.35); }
.ui-btn.secondary:hover { background: rgba(148,163,184,.15); }
.ui-btn.primary { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; box-shadow: 0 8px 18px rgba(37,99,235,.35); }
.ui-btn.primary:hover { filter: brightness(1.05); transform: translateY(-1px); }