:root { --bg:#1358bf; --card:#ffffff; --text:#0b0d10; --muted:#555; --accent:#57cdff; --ok:#28c76f; --err:#e03131; }
* { box-sizing:border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial; background: var(--bg); color: var(--text); }
.have { color: var(--card); }
.wrap { max-width:980px; margin:40px auto; padding:0 16px; }
h1 { margin:0 0 18px; font-size:28px; }
.sub { color:var(--card); margin-bottom: 24px; }

.card { background:var(--card); border:1px solid #ddd; border-radius:16px; padding:18px; box-shadow:0 6px 24px rgba(0,0,0,.1); }
.grid { display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }
.card.form { grid-column:span 12; }
@media(min-width: 900px){ .col-6 { grid-column: span 6; } }
@media(max-width: 899px){ .col-6 { grid-column: span 12; } }

label { display:block; font-size:14px; color:var(--muted); margin:0 0 6px; }
input[type="text"], input[type="tel"], select, textarea {
  width:100%; background:#f7fbff; color:var(--text);
  border:1px solid #ccc; border-radius:12px; padding:12px 14px; font-size:16px;
  outline:none; transition:border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus { border-color:var(--accent); box-shadow:0 0 0 4px rgba(87,205,255,.25); }
textarea{ min-height:90px; resize:vertical; }

.row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.row + .row { margin-top:12px; }
@media(max-width:600px){ .row{ grid-template-columns:1fr; } }

.hint { font-size:12px; color:var(--muted); margin-top:6px; }
.files { display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.thumb { width:96px; height:96px; border:1px dashed #bbb; border-radius:12px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#f7fbff; }
.thumb img { max-width:100%; max-height:100%; display:block; }

.actions { margin-top:16px; display:flex; gap:10px; align-items:center; }
.btn { display:inline-block; padding:12px 16px; border-radius:10px; border:1px solid #1d242c; background:#1358bf; color:#fff; text-decoration:none; font-weight:600; cursor:pointer; }
.btn.outline { background:#fff; color:#0b0d10; border-color:#ccc; }

.msg { margin-top:12px; font-size:14px; }
.ok { color:var(--ok); }
.err { color:var(--err); }

/* ПІДСВІЧУВАННЯ ПОМИЛОК — показуємо тільки після спроби відправки */
.invalid { border-color: var(--err) !important; box-shadow: 0 0 0 4px rgba(224,49,49,.15) !important; }
.field-error { margin-top:6px; font-size:12px; color: var(--err); display:none; }
.field-error.show { display:block; }

/* МОДАЛ ВДЯЧНОСТІ */
.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 9999; }
.modal.show { display: flex; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.modal__dialog { position: relative; background: var(--card); border-radius: 16px; padding: 24px; box-shadow: 0 10px 40px rgba(0,0,0,.2); width: min(520px, 92vw); border:1px solid #ddd; }
.modal__dialog h3 { margin: 0 0 8px; }
.modal__dialog p { margin: 0 0 16px; color: var(--muted); }
.modal__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.modal__close { position: absolute; right: 10px; top: 8px; background: transparent; border: none; font-size: 24px; line-height: 1; cursor: pointer; color: #777; }
.modal__close:hover { color: #000; }