:root {
  --ux-bg: #f5f7fb;
  --ux-surface: #ffffff;
  --ux-border: #d7e0ea;
  --ux-text: #17212b;
  --ux-muted: #516173;
  --ux-brand: #f3d044;
  --ux-focus: #0b67d1;
}

html { scroll-behavior: smooth; }
body {
  background: linear-gradient(180deg, #ffffff 0%, var(--ux-bg) 100%);
  color: var(--ux-text);
}

h1, h2, h3 { letter-spacing: .01em; }
p, li, label, .small, .muted { color: var(--ux-muted); }

input, select, textarea {
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid var(--ux-border);
  background: #fff;
}

button, .btn, [role='button'] {
  min-height: 42px;
  border-radius: 10px;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease, background-color .16s ease;
}

button:not(:disabled):hover,
.btn:not(:disabled):hover,
[role='button']:not([aria-disabled='true']):hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 10px 18px rgba(0,0,0,.16);
}

.link{
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.link:hover,
.link:focus-visible{
  color: #003d73;
  text-decoration-color: #003d73;
  text-decoration-thickness: 2px;
}

button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(11, 103, 209, .35);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px var(--ux-focus) inset;
}

header {
  backdrop-filter: saturate(1.05) blur(4px);
}

.ux-chip-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  font-weight: 800;
  color: #34495e;
  background: #fff7d1;
  border: 1px solid #ecd37b;
  padding: 6px 10px;
  border-radius: 999px;
  margin: 0 0 10px 0;
}

.ux-help-box {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #d9e4f0;
  background: #f7fbff;
  color: #29435d;
  font-size: .9rem;
}

.ux-skip-link {
  position: fixed;
  left: 12px;
  top: -100px;
  z-index: 9999;
  background: #111;
  color: #fff;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
}

.ux-skip-link:focus {
  top: 12px;
}

.cookie-config-footer{
  position:absolute;
  left:16px;
  bottom:12px;
  display:flex;
  flex-direction:column;
  gap:4px;
  text-align:left;
}
.cookie-config-link{
  font-weight:700;
  color:#111;
  font-size:.9rem;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  display:inline-block;
}
.cookie-config-link:hover,
.cookie-config-link:focus-visible{
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:2px;
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  header { padding-left: .8rem !important; padding-right: .8rem !important; }
}

/* Cookie banner */
.cookie-banner{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:2000;
}
.cookie-banner.hidden{display:none}
.cookie-panel{
  width:min(520px,92vw);
  background:#fff;
  border:1px solid #dbe3ee;
  border-radius:14px;
  box-shadow:0 18px 44px rgba(0,0,0,.22);
  padding:18px 18px 16px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.cookie-text{
  color:#1f2937;
  font-weight:600;
  line-height:1.5;
}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.cookie-link{
  color:#0b67d1;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:2px;
  font-weight:700;
}
.cookie-link:hover,
.cookie-link:focus-visible{
  color:#084b9a;
  text-decoration-thickness:3px;
}
.cookie-btn{
  border:none;
  border-radius:10px;
  padding:.58rem .9rem;
  font-weight:800;
  cursor:pointer;
}
.cookie-btn.accept{background:#f3d044;color:#111}
.cookie-btn.reject{background:#3b3b3b;color:#fff}
.cookie-btn.read{background:#fff;color:#111}
.cookie-btn.config{background:#111;color:#fff}
.cookie-config-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:2100;
  padding:16px;
}
.cookie-config-overlay.show{display:flex}
.cookie-config{
  width:min(520px,95vw);
  background:#fff;
  border:1px solid #dbe3ee;
  border-radius:14px;
  box-shadow:0 18px 44px rgba(0,0,0,.22);
  padding:16px;
}
.cookie-config h4{margin:0 0 8px 0}
.cookie-config p{margin:0 0 10px 0;color:#5a6472}
.cookie-toggle{display:flex;gap:10px;align-items:flex-start;margin:10px 0}
.cookie-toggle input{margin-top:3px}
.cookie-config-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.site-footer{
  background: #f3d044;
  padding: 1.4rem 1rem 1.6rem;
  text-align: center;
  font-weight: 700;
  border-top: 1px solid rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.site-footer .footer-top{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
}
.site-footer .footer-copy{
  font-weight:800;
}
.site-footer .footer-version{
  position: static;
  font-weight:700;
  color:#111;
  font-size:.85rem;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.08);
  padding: 4px 10px;
  border-radius: 999px;
}
.site-footer .footer-links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  font-size:.95rem;
}

.site-footer .footer-link{
  color:#111;
  text-decoration:none;
  font-weight:700;
  padding:2px 4px;
}
.site-footer .footer-link:hover,
.site-footer .footer-link:focus-visible{
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:2px;
}