.app-modal {display:none;position:fixed;inset:0;z-index:1000;}
.app-modal.is-active {display:flex;align-items:center;justify-content:center;}
.app-modal__overlay {position:absolute;inset:0;background:rgba(0,0,0,.6);}
.app-modal__dialog {position:relative;background:#fff;padding:20px;border-radius:12px;max-width:480px;width:calc(100% - 32px);box-shadow:0 10px 30px rgba(0,0,0,.2);}
.app-modal__close {position:absolute;top:10px;right:12px;cursor:pointer;font-size:22px;background:none;border:0;line-height:1;}
.app-modal__content > *:first-child {margin-top:0}
.app-modal__content input, .app-modal__content textarea {width:100%;margin:.4rem 0;padding:.6rem;border:1px solid #e3e3e3;border-radius:8px;}
.app-modal__content button[type="submit"] {padding:.6rem 1rem;border:0;border-radius:8px;cursor:pointer;}


.app-modal{position:fixed;inset:0;display:none;z-index:9999}
.app-modal.is-open{display:block}
.app-modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.app-modal__dialog{position:relative;margin:5vh auto;max-width:520px;background:#111;color:#fff;border-radius:14px;overflow:hidden}
.app-modal__content{padding:20px}
.app-modal__close{position:absolute;top:10px;right:12px;font-size:26px;background:transparent;border:none;color:#fff;cursor:pointer}
body.modal-open{overflow:hidden}
.tab{padding:.5rem 1rem;border:0;background:#333;color:#fff;cursor:pointer}
.tab.is-active{background:#555}
label input{width:100%;padding:.5rem;margin-top:.25rem}
button[type=submit]{margin-top:.75rem;padding:.6rem 1rem;cursor:pointer}
.note{opacity:.7;font-size:.9em;margin-top:.5rem}

/* Сообщения и подсветка ошибок */
.form-msg {
  margin:.75rem 0; padding:.5rem .75rem; border-radius:.5rem;
  font-size:.95rem; line-height:1.35; display:none;
}
.form-msg.err { display:block; background:#2b1515; color:#ffd6d6; border:1px solid #5a2626; }
.form-msg.ok  { display:block; background:#132b17; color:#c4ffcf; border:1px solid #2b5a34; }

.is-invalid { outline:2px solid #ff5a5a; }
label .field-msg { color:#ff8b8b; font-size:.85rem; margin-top:.25rem; }

/* Чтобы виджет reCAPTCHA не схлопывался */
.g-recaptcha { min-height:78px; }
.field-row{display:flex;gap:8px;align-items:center}
.field-row input{flex:1;min-width:0}
.btn.sm{border:1px solid #444;background:#222;color:#fff;padding:.35rem .55rem;border-radius:.5rem;cursor:pointer;font-size:.9rem;line-height:1}
.btn.sm[aria-pressed="true"]{background:#333}

.form-alert {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.4;
  background: #f3f4f6;
}
.form-alert[data-type="success"] { background:#ecfdf5; color:#065f46; }
.form-alert[data-type="error"]   { background:#fef2f2; color:#991b1b; }
.form-alert[data-type="info"]    { background:#eff6ff; color:#1e40af; }
.is-invalid { border-color:#ef4444 !important; outline-color:#ef4444 !important; }


/* — поздравляшка — */
.congrats-card{
  text-align:center;
  padding:20px;
  border-radius:14px;
}
.congrats-emoji{ font-size:48px; margin-bottom:8px; }
.congrats-title{ margin:0 0 6px; font-size:22px; }
.congrats-sub{ margin:0 0 10px; color:#374151; }
.congrats-hint{ margin:0 0 16px; color:#4b5563; font-size:14px; }
.congrats-actions{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:10px 0 6px; }
.btn{ padding:8px 14px; border-radius:10px; border:1px solid #e5e7eb; background:#fff; cursor:pointer; }
.btn.primary{ background:#111827; color:#fff; border-color:#111827; }
.btn.link{ border:none; background:transparent; text-decoration:underline; color:#374151; }
.congrats-ttl{ margin-top:6px; font-size:12px; color:#6b7280; }
.congrats-ttl .ttl{ font-variant-numeric: tabular-nums; }

/* — конфетти — */
.confetti-canvas{ width:100%; height:180px; display:block; margin:-10px 0 6px; pointer-events:none; opacity:1; transition:opacity .8s; }
.confetti-canvas.fade-out{ opacity:0; }

/* опционально для инпутов с ошибкой */
.is-invalid{ border-color:#ef4444 !important; outline-color:#ef4444 !important; }