/* ========================================================================
   irinalebedeva.com · спільна оболонка для інструментів
   Підключається в кожен інструмент одним рядком:
   <link rel="stylesheet" href="/Tools/shell.css">
   Змінюєте тут — змінюється у всіх інструментах одночасно.
   ======================================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');

:root{
  --il-blue:#1B4DCB;
  --il-blue-bright:#2563EB;
  --il-ink:#131A24;
  --il-chip:#DCE7FC;
  --il-chip-ink:#0B2E6F;
  --il-yellow:#FFD700;
  --il-line:#E5EAF3;
  --il-shell-font:'DM Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

/* ---------- верхня панель ---------- */
.il-topbar{
  position:sticky; top:0; z-index:99999;
  background:#fff; border-bottom:1px solid var(--il-line);
  font-family:var(--il-shell-font);
  box-shadow:0 1px 3px rgba(19,26,36,.05);
}
.il-topbar__in{
  max-width:1100px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; gap:14px; justify-content:space-between;
}
.il-topbar__brand{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--il-ink);
  font-weight:700; font-size:15px; line-height:1.2; white-space:nowrap;
}
.il-topbar__brand span.mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:9px;
  background:var(--il-blue); color:#fff; font-size:13px; font-weight:700;
}
.il-topbar__brand em{ font-style:normal; color:#5B6673; font-weight:500; }
.il-topbar__back{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--il-chip); color:var(--il-chip-ink);
  text-decoration:none; font-size:13px; font-weight:500;
  padding:8px 14px; border-radius:999px; white-space:nowrap;
  transition:background .15s;
}
.il-topbar__back:hover{ background:#C9DAFA; }
@media (max-width:560px){
  .il-topbar__brand em{ display:none; }
  .il-topbar__in{ padding:8px 12px; }
}

/* ---------- нижня панель ---------- */
.il-footbar{
  background:var(--il-ink); color:#AFC6F2;
  font-family:var(--il-shell-font);
  padding:30px 16px 34px; text-align:center;
  font-size:14px; line-height:1.65;
}
.il-footbar__in{ max-width:680px; margin:0 auto; }
.il-footbar strong{ color:#fff; font-weight:700; }
.il-footbar a{ color:var(--il-yellow); text-decoration:none; }
.il-footbar a:hover{ text-decoration:underline; }
.il-footbar__cta{
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:16px; padding:12px 24px; border-radius:999px;
  background:var(--il-yellow); color:var(--il-ink);
  font-weight:700; font-size:15px; text-decoration:none;
}
.il-footbar__cta:hover{ text-decoration:none; }
.il-footbar__note{ margin-top:16px; font-size:12px; color:#7C8BA8; }