.jojo-cookie[hidden] { display: none; }
.jojo-cookie {
  position: fixed; z-index: 20; inset: auto 10px max(6px, env(safe-area-inset-bottom)); max-width: 1080px;
  margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  border: 1px solid #d8acc63d; border-radius: 12px; padding: 3px 8px; color: #f4e9f1;
  background: #17121aeb; backdrop-filter: blur(12px); font: 12px/1.3 system-ui, sans-serif;
}
.jojo-cookie p { margin: 0; }
.jojo-cookie > div { display: flex; flex-wrap: wrap; gap: 4px; }
.jojo-cookie button, .jojo-cookie-link, .jojo-cookie-settings button {
  background: #2b2031; border: 1px solid #ffffff26; border-radius: 8px; color: #f4e9f1;
  font: inherit; padding: 3px 7px; min-height: 25px; cursor: pointer;
}
.jojo-cookie-link { font: 12px system-ui, sans-serif; }
.jojo-cookie-settings { color: #f4e9f1; background: #17121a; border: 1px solid #d8acc66b; border-radius: 14px; padding: 18px; }
.jojo-cookie-settings::backdrop { background: #050409d9; }
.jojo-cookie-settings form { display: grid; gap: 10px; }
.jojo-cookie-settings label { display: flex; gap: 8px; align-items: center; }
.jojo-cookie :focus-visible, .jojo-cookie-settings :focus-visible { outline: 2px solid #edb29d; outline-offset: 2px; }
@media (max-width: 760px) {
  .jojo-cookie { bottom: calc(78px + env(safe-area-inset-bottom)); font-size: 11px; }
  .jojo-cookie button { min-height: 36px; }
  body:has(:is(textarea, input, select):focus) .jojo-cookie { display: none; }
}