body.va-modal-open { overflow: hidden; }
.hidden { display: none !important; }
.va-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    padding: 18px;
    display: grid;
    place-items: center;
    background: rgba(2, 8, 18, 0.72);
    backdrop-filter: blur(6px);
}
.va-modal-dialog {
    width: min(500px, 100%);
    max-height: min(86vh, 760px);
    overflow-y: auto;
    padding: 24px;
    border: 1px solid rgba(148, 184, 220, 0.28);
    border-radius: 18px;
    color: #182033;
    background: #ffffff;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.35);
}
.va-modal-dialog h2 { margin: 0; font-size: 1.35rem; }
.va-modal-message { margin: 12px 0 0; color: #667085; line-height: 1.6; white-space: pre-line; }
.va-modal-form { margin-top: 18px; display: grid; gap: 14px; }
.va-modal-field { display: grid; gap: 7px; color: #344054; font-size: 0.86rem; font-weight: 800; }
.va-modal-field input,
.va-modal-field textarea {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid #d0d9e6;
    border-radius: 11px;
    color: #182033;
    background: #ffffff;
    font: inherit;
}
.va-modal-field textarea { min-height: 120px; resize: vertical; }
.va-modal-field input:focus,
.va-modal-field textarea:focus { outline: 3px solid rgba(37, 99, 235, 0.18); border-color: #2563eb; }
.va-modal-checkbox-field {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 13px;
    border: 1px solid #d0d9e6;
    border-radius: 11px;
    background: #f8fafc;
    line-height: 1.45;
    cursor: pointer;
}
.va-modal-checkbox-field input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    padding: 0;
    accent-color: #2563eb;
}
.va-modal-error { padding: 10px 12px; border-radius: 10px; color: #991b1b; background: #fee2e2; font-weight: 700; }
.va-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.va-modal-button { min-height: 42px; padding: 10px 16px; border: 0; border-radius: 10px; font: inherit; font-weight: 850; cursor: pointer; }
.va-modal-button.secondary { color: #334155; background: #e2e8f0; }
.va-modal-button.primary { color: #ffffff; background: #2563eb; }
.va-modal-button.primary.danger { background: #dc2626; }
.va-modal-button:hover { filter: brightness(0.96); }
@media (prefers-color-scheme: dark) {
    .va-modal-dialog { color: #edf6ff; background: #10233a; }
    .va-modal-message { color: #b6c5d6; }
    .va-modal-field { color: #dcecff; }
    .va-modal-field input,
    .va-modal-field textarea { color: #edf6ff; border-color: rgba(148,184,220,.25); background: #071421; }
    .va-modal-checkbox-field { border-color: rgba(148,184,220,.25); background: #071421; }
    .va-modal-button.secondary { color: #e2e8f0; background: #24364a; }
}
@media (max-width: 520px) {
    .va-modal-dialog { padding: 20px 16px; }
    .va-modal-actions { flex-direction: column-reverse; }
    .va-modal-button { width: 100%; }
}

.va-password-control { position: relative; display: block; }
.va-password-control input { padding-right: 50px; }
.va-password-toggle {
    position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px; padding: 0; border: 1px solid transparent; border-radius: 10px;
    display: inline-grid; place-items: center; background: transparent; color: #64748b;
    cursor: pointer;
}
.va-password-toggle svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.va-password-toggle:hover, .va-password-toggle:focus-visible,
.va-password-toggle[aria-pressed="true"] { border-color: #bfdbfe; background: rgba(37, 99, 235, 0.12); color: #2563eb; }