.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15,23,42,0.6); backdrop-filter: blur(12px); z-index: 2000; display: none; align-items: center; justify-content: center; padding: 24px; }
.modal-overlay.active { display: flex; }
.modal { background: white; border-radius: var(--radius); max-width: 480px; width: 100%; max-height: calc(100vh - 48px); overflow-y: auto; padding: 40px; position: relative; animation: modalIn 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes modalIn { from { opacity: 0; transform: scale(0.95) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.modal-close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 24px; cursor: pointer; color: var(--text-muted); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s; }
.modal-close:hover { background: var(--bg-warm); color: var(--text-deep); }
.modal h3 { font-size: 24px; font-weight: 800; color: var(--text-deep); margin-bottom: 8px; }
.modal p { color: var(--text-muted); margin-bottom: 24px; font-size: 15px; }
.modal .form-group label { color: var(--text-slate); }
.modal .form-group input,
.modal .form-group select { width: 100%; min-height: 48px; padding: 12px 16px; background-color: var(--bg-white); border: 1px solid var(--border-light); border-radius: 10px; color: var(--text-deep); font: inherit; font-size: 15px; line-height: 1.4; transition: border-color 0.2s, box-shadow 0.2s; color-scheme: light; }
.modal .form-group input::placeholder { color: var(--text-muted); opacity: 1; }
.modal .form-group select { appearance: none; padding-right: 44px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.modal .form-group select:invalid { color: var(--text-muted); }
.modal .form-group select option { color: var(--text-deep); background: var(--bg-white); }
.modal .form-group input:hover,
.modal .form-group select:hover { border-color: #CBD5E1; }
.modal .form-group input:focus,
.modal .form-group select:focus { outline: none; border-color: var(--accent-orange); background-color: var(--bg-white); box-shadow: 0 0 0 3px rgba(249,115,22,0.14); }
.form-success { text-align: center; padding: 20px 0; }
.form-success .check { width: 64px; height: 64px; background: var(--accent-emerald); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: white; font-size: 28px; }
.form-success h3 { margin-bottom: 8px; }
.form-error { color: #B91C1C !important; margin: 12px 0 0 !important; font-size: 14px !important; }

@media (max-width: 600px) {
    .modal-overlay { align-items: flex-start; padding: 12px; }
    .modal { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); padding: 32px 24px 24px; }
    .modal .form-group { margin-bottom: 14px; }
}