/* assets/style.css */:root{
  --bg:#0a2540; --bg2:#113a6b; --card:#ffffff; --text:#0a2540;
  --muted:#6b7a90; --ok:#0f9d58; --err:#d93025; --focus:#2a6ac2;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background: radial-gradient(1200px 800px at 80% -10%, #123a6b 0%, var(--bg) 60%), var(--bg);
  color:#fff; padding:24px; display:flex; flex-direction:column; align-items:center; gap:16px;}
.container{width:100%; max-width:1080px}
.card{background:var(--card); color:var(--text); border-radius:20px; padding:20px; box-shadow:0 12px 40px rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.08); margin-bottom:16px}
h1,h2,h3{margin:8px 0}
label{font-weight:600; margin-bottom:6px; display:block}
input,select,textarea{width:100%; border:1px solid #d9e1f0; border-radius:12px; padding:12px 14px; font-size:16px; outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--focus); box-shadow:0 0 0 4px rgba(42,106,194,.12)}
.row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:700px){.row{grid-template-columns:1fr}}
.btn{cursor:pointer; user-select:none; font-weight:700; border-radius:12px; border:0; padding:12px 16px; font-size:16px; display:inline-block}
.btn-primary{background:var(--focus); color:#fff}
.btn-ghost{background:#eef3fb; color:var(--text)}
.btn-danger{background:var(--err); color:#fff}
.btn-ok{background:var(--ok); color:#fff}
.table{width:100%; border-collapse:separate; border-spacing:0 10px}
.table thead th{font-size:12px; color:#5e6b82; text-align:left; padding:0 10px}
.table tbody tr{background:#f7f9fe; border:1px solid #dfe7f7}
.table tbody td{padding:10px;color:#5e6b82;}
.table tbody tr td:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px}
.table tbody tr td:last-child{border-top-right-radius:12px;border-bottom-right-radius:12px}
.badge{display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:700}
.badge-ok{background:#e7f6ee; color:#0f9d58}
.badge-err{background:#fde7e6; color:#d93025}
.navbar{background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.18); border-radius:16px; padding:10px 16px; display:flex; align-items:center; justify-content:space-between}
.logo svg{height:60px; filter:drop-shadow(0 8px 24px rgba(0,0,0,.35))}
.navlinks a{color:#fff; text-decoration:none; margin:0 10px; font-weight:700}
.navlinks a.active{text-decoration:underline}
.alert{margin-top:8px; font-size:14px}
.alert.err{color:var(--err)}
.alert.ok{color:var(--ok)}
/* --- Modal overlay (затемнение фона) --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45); /* мягкое затемнение */
  backdrop-filter: blur(2px);      /* лёгкий блюр как у современных UI */
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;                   /* выше меню и карточек */
}

/* когда открыта */
.modal-overlay.is-visible {
  display: flex;
}

/* --- Само окно --- */
.modal-window {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px 24px;
  width: 95%;
  max-width: 780px;

  max-height: 90vh;
  overflow-y: auto;

  box-shadow:
    0 8px 20px rgba(0,0,0,0.15),
    0 2px 6px rgba(0,0,0,0.10);

  animation: modal-appear 0.17s ease-out;
  position: relative;
}

/* кнопка закрытия */
.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: transparent;
  font-size: 26px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity .15s;
  line-height: 1;
}
.modal-close:hover {
  opacity: 1;
}

/* плавное появление */
@keyframes modal-appear {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/* Поле + ссылка-підказка */
.field-with-help {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.link-button {
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  color: #2a6ac2;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
}
.link-button:hover {
  opacity: .85;
}

/* Бекдроп модалки */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

/* Карточка модалки */
.modal-card {
  position: relative;
  max-width: 640px;
  width: 100%;
  background: #ffffff;
  color: #0f172a;
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.4);
  padding: 24px 28px 20px;
  font-size: 14px;
}

.modal-card h2 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 20px;
}

.modal-card h3 {
  margin-top: 16px;
  margin-bottom: 8px;
  font-size: 16px;
}

.modal-intro {
  margin-bottom: 12px;
}

.modal-note {
  margin-top: 16px;
  font-size: 13px;
  color: #64748b;
}

/* Кнопка закриття */
.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #64748b;
}
.modal-close:hover {
  color: #0f172a;
}

/* Список кроків */
.steps-list {
  margin: 0 0 8px;
  padding-left: 20px;
}
.steps-list li {
  margin-bottom: 8px;
}

/* "Картинки" — плейсхолдери під скріншоти */
.step-image-placeholder {
  margin-top: 6px;
  border-radius: 12px;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.step-image-placeholder span {
  font-weight: 600;
  font-size: 13px;
}

.step-image-placeholder small {
  font-size: 12px;
  color: #64748b;
}

@media (max-width: 600px) {
  .modal-card {
    margin: 0 12px;
    padding: 20px 16px 16px;
  }
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2100;
}

.modal-backdrop.is-visible {
  display: flex;
}

.modal-backdrop[hidden] {
  display: none !important;
}
.field-with-help {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.link-button {
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  color: #2a6ac2;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
}
.link-button:hover {
  opacity: .85;
}

/* RC-модалка */
.rc-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  display: none;            /* важливо: по замовчуванню схована */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.rc-modal-card {
  position: relative;
  max-width: 640px;
  width: 100%;
  background: #ffffff;
  color: #0f172a;
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.4);
  padding: 24px 28px 20px;
  font-size: 14px;
}

.rc-modal-card h2 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 20px;
}

.rc-modal-card h3 {
  margin-top: 16px;
  margin-bottom: 8px;
  font-size: 16px;
}

.rc-modal-intro {
  margin-bottom: 12px;
}

.rc-modal-note {
  margin-top: 16px;
  font-size: 13px;
  color: #64748b;
}

/* Кнопка закриття */
.rc-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #64748b;
}
.rc-modal-close:hover {
  color: #0f172a;
}

/* Список кроків */
.rc-steps-list {
  margin: 0 0 8px;
  padding-left: 20px;
}
.rc-steps-list li {
  margin-bottom: 8px;
}

/* Плейсходери картинок */
.rc-step-image-placeholder {
  margin-top: 6px;
  border-radius: 12px;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rc-step-image-placeholder span {
  font-weight: 600;
  font-size: 13px;
}

.rc-step-image-placeholder small {
  font-size: 12px;
  color: #64748b;
}