/* Auth Modal */
.modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
 .modal[hidden] { display: none; }
 .modal-backdrop { position: absolute; inset: 0; background: var(--c-overlay); backdrop-filter: blur(4px); }
 .modal-content { position: relative; z-index: 1; max-width: 420px; width: 90%; max-height: 90vh; overflow-y: auto; }
 .modal-content.modal-sm{ max-width: 420px; }
 .modal-content.modal-md{ max-width: 480px; }
 .modal-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-2, var(--radius2)); box-shadow: var(--shadow-2, var(--shadow)); }
 .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--c-divider); }
 .modal-header h3 { margin: 0; font-size: 16px; font-weight: 900; color: var(--c-text); }
 .modal-body { padding: 14px 16px; }
 .modal-close { border: 1px solid var(--c-border); background: var(--c-surface-2); color: var(--c-text); border-radius: 12px; width: 36px; height: 36px; display: grid; place-items: center; font-size: 18px; line-height: 1; cursor: pointer; }
 .modal-close:hover { border-color: color-mix(in oklab, var(--c-border) 40%, var(--c-primary)); box-shadow: 0 0 0 4px var(--c-focus); }