/* Fonts (SIL Open Font License 1.1, see static/fonts/*-OFL.txt); latin-ext covers Polish. */
@font-face { font-family:'Fraunces'; font-style:normal; font-display:swap; font-weight:100 900; src:url("./fonts/fraunces-latin-ext.9cab501e1829.woff2") format('woff2-variations'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Fraunces'; font-style:normal; font-display:swap; font-weight:100 900; src:url("./fonts/fraunces-latin.eb2486760f75.woff2") format('woff2-variations'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'DM Sans'; font-style:normal; font-display:swap; font-weight:100 1000; src:url("./fonts/dm-sans-latin-ext.49935c4b6235.woff2") format('woff2-variations'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'DM Sans'; font-style:normal; font-display:swap; font-weight:100 1000; src:url("./fonts/dm-sans-latin.7c87a648293f.woff2") format('woff2-variations'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ---------- Base ---------- */
* { box-sizing:border-box }
/* Components such as .button set display; `hidden` must still win. */
[hidden] { display:none!important }
body {
  --accent:var(--theme-accent,var(--brand-accent,#c2364f));
  --accent-soft:color-mix(in srgb,var(--accent) 14%,transparent);
  margin:0;
  min-height:100vh;
  background-color:var(--bg);
  background-image:var(--backdrop);
  background-attachment:fixed;
  color:var(--ink);
  font-family:'DM Sans',ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased
}
:root[data-theme=dark] body { --link:color-mix(in srgb,var(--accent),white 45%) }
@media(prefers-color-scheme:dark) { :root[data-theme=system] body { --link:color-mix(in srgb,var(--accent),white 45%) } }
a { color:var(--link,var(--accent)); text-decoration:none }
a:hover { text-decoration:underline }
button,input,select,textarea { font:inherit }
button,a,input,select,textarea { touch-action:manipulation }
button { cursor:pointer; border:0 }
button:disabled { cursor:not-allowed; opacity:.5 }
h1,h2,h3,p { margin-top:0 }
h1,h2,h3 { font-family:'Fraunces',Georgia,"Times New Roman",serif; font-weight:600; letter-spacing:-.02em; font-optical-sizing:auto }
h1 { font-size:clamp(32px,3.6vw,48px); line-height:1.1; margin-bottom:14px }
h2 { font-size:22px; line-height:1.3 }
h3 { font-size:18px; line-height:1.3 }
p { margin-bottom:12px }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible { outline:3px solid var(--accent); outline-offset:3px }
.shell { width:min(1180px,calc(100% - 64px)); margin:auto }
.icon { flex:none }
.muted { color:var(--muted); font-size:14px }
.grow { flex:1; min-width:0 }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.skip { position:absolute; left:10px; top:-60px; background:var(--surface); padding:12px; z-index:100; border-radius:12px }
.skip:focus { top:10px }

/* ---------- Header ---------- */
.site-header {
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb,var(--surface) 78%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)
}
.header-inner { max-width:1308px; padding:14px 40px; margin:auto; display:flex; align-items:center; gap:32px }
.brand { display:flex; align-items:center; gap:10px; font-family:'DM Sans',ui-sans-serif,system-ui,sans-serif; font-size:21px; font-weight:700; letter-spacing:-.03em; color:var(--ink); white-space:nowrap }
.brand:hover { text-decoration:none }
.brand-mark { display:grid; place-items:center; width:36px; height:36px; flex:none; border-radius:10px; box-shadow:0 4px 12px rgba(194,54,79,.28) }
.brand-mark svg { display:block; width:100%; height:100% }
.brand img { object-fit:contain; border-radius:10px }
nav { display:flex; align-items:center; gap:6px; flex:1 }
nav a { color:var(--muted); font-weight:600; font-size:14px; padding:8px 14px; border-radius:var(--radius-pill); transition:background .15s,color .15s }
nav a:hover { color:var(--ink); background:var(--tint); text-decoration:none }
.account-nav { margin-left:auto; display:flex; align-items:center; gap:10px }
.avatar { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; background:linear-gradient(135deg,var(--gold),var(--accent)); color:#fff; font-weight:700; box-shadow:0 3px 10px color-mix(in srgb,var(--accent) 25%,transparent) }
.avatar:hover { text-decoration:none; filter:brightness(1.05) }
.language-switch { position:relative; display:flex; align-items:center; gap:8px; color:var(--ink) }
.language-switch>.icon { position:absolute; left:14px; pointer-events:none }
.language-switch::after { content:""; position:absolute; right:15px; top:50%; width:7px; height:7px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:translateY(-75%) rotate(45deg); pointer-events:none }
.language-switch select { -webkit-appearance:none; appearance:none; width:auto; min-height:40px; padding:8px 36px 8px 38px; border:1px solid var(--line); border-radius:var(--radius-pill); background-color:var(--surface); color:var(--ink); font-size:14px; font-weight:600; line-height:1.4; cursor:pointer }
.language-switch select:hover { border-color:var(--accent) }
.language-code { display:none }
/* Dropdown menus (account under the avatar, list actions): native <details>, closed on outside click or Escape via app.js. */
.dropdown { position:relative }
.dropdown>summary { list-style:none; cursor:pointer }
.dropdown>summary::-webkit-details-marker { display:none }
.account-menu[open]>summary { box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--accent) }
.menu { position:absolute; right:0; top:calc(100% + 10px); z-index:30; display:flex; flex-direction:column; min-width:210px; padding:6px; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-2) }
.menu-name { margin:0; padding:8px 12px 6px; font-size:12px; font-weight:700; color:var(--muted); border-bottom:1px solid var(--line); margin-bottom:4px; overflow-wrap:anywhere }
.menu form { display:block }
.menu a,.menu button { display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:10px 12px; border-radius:10px; background:none; color:var(--ink); font-size:14px; font-weight:600; text-align:left }
.menu a:hover,.menu button:hover { background:var(--tint); text-decoration:none }
.menu .icon { flex:none }
.menu .danger { color:var(--danger) }
.menu hr { margin:4px 6px; border:0; border-top:1px solid var(--line) }

/* ---------- Buttons ---------- */
.button {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:var(--radius-pill); border:1px solid transparent;
  background:var(--accent); color:#fff; font-weight:650; font-size:14px; line-height:1.4;
  white-space:normal; text-align:center;
  box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 28%,transparent);
  transition:transform .15s ease,box-shadow .2s ease,filter .2s,background .15s,border-color .15s
}
.button:hover { text-decoration:none; filter:brightness(1.06) }
.button:active { transform:translateY(1px) scale(.98) }
.button.subtle { background:var(--surface); color:var(--ink); border-color:var(--line); box-shadow:none }
.button.subtle:hover { border-color:var(--accent); filter:none }
.button.small { padding:8px 14px; font-size:13px }
.button.danger { background:var(--danger); color:var(--on-danger); box-shadow:0 6px 16px color-mix(in srgb,var(--danger) 25%,transparent) }
.button.danger-outline { background:var(--surface); color:var(--danger); border-color:color-mix(in srgb,var(--danger) 60%,transparent); box-shadow:none }
.button.danger-outline:hover { background:var(--danger); color:var(--surface); filter:none }
.icon-button { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); transition:background .15s,border-color .15s,transform .15s }
.icon-button:hover { background:var(--tint); border-color:var(--tint-line); text-decoration:none }
.icon-button:active { transform:scale(.95) }
.icon-button.danger { color:var(--danger) }
.icon-button[aria-disabled=true] { opacity:.45; cursor:default }
.icon-button[aria-disabled=true]:hover { background:var(--surface); border-color:var(--line) }
.icon-button.danger:hover { border-color:var(--danger) }
.icon-group { display:flex; gap:6px }
.actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.actions form { display:flex; gap:6px }

/* ---------- Page structure ---------- */
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:44px 0 26px }
.eyebrow { text-transform:uppercase; letter-spacing:.16em; font-size:11px; font-weight:700; color:var(--link,var(--accent)); margin-bottom:10px }
.lead { font-size:16px; color:var(--muted); max-width:640px; margin-bottom:0 }
.greeting-dot { color:var(--accent) }
/* Friendly and neutral: a surface with a faint accent tint; gold would read as a warning. */
.welcome-card { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:24px; margin:28px 0 24px; padding:24px 28px; border-radius:24px; border:1px solid color-mix(in srgb,var(--accent) 14%,var(--line)); background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 9%,var(--surface)),color-mix(in srgb,var(--gold) 14%,var(--surface))); box-shadow:var(--shadow-1) }
/* Long names without break opportunities wrap instead of pushing the motif out of the card. */
.welcome-text { min-width:0 }
.welcome-card h1 { font-size:clamp(28px,3.2vw,40px); margin-bottom:4px; overflow-wrap:anywhere }
/* Welcome motif: the heart floats, sparkles twinkle, the lid hops once on load; all of it ends within 5 s (WCAG 2.2.2). */
.welcome-art { flex:none; width:150px }
.welcome-art svg { display:block; width:100%; height:auto; overflow:visible }
.welcome-art .heart,.welcome-art .lid,.welcome-art .spark { transform-box:fill-box }
.welcome-art .heart { transform-origin:center; animation:heart-float 3.2s ease-in-out infinite }
.welcome-art .lid { transform-origin:15% 100%; animation:lid-hop .9s .3s ease-out both }
.welcome-art .spark { transform-origin:center; animation:sparkle 2.4s ease-in-out infinite }
.welcome-art .s2 { animation-delay:.8s }
.welcome-art .s3 { animation-delay:1.6s }
@keyframes heart-float { 0%,100% { transform:translateY(0) scale(1) } 50% { transform:translateY(-6px) scale(1.06) } }
@keyframes lid-hop { 0% { transform:none } 35% { transform:translateY(-7px) rotate(-9deg) } 70% { transform:rotate(2deg) } 100% { transform:none } }
/* Starts and ends at rest, so the sparkles look the same with reduced motion. */
@keyframes sparkle { 0%,100% { opacity:1; transform:scale(1) } 50% { opacity:.25; transform:scale(.7) } }
.section-heading { display:flex; align-items:center; gap:12px; margin-bottom:18px }
.section-heading h2 { margin:0; font-size:24px }
.section-heading a { margin-left:auto }
.section-space { margin-top:44px }
.count { font-size:12px; font-weight:700; background:var(--tint); color:var(--muted); padding:2px 10px; border-radius:var(--radius-pill) }
.breadcrumb { display:inline-flex; align-items:center; gap:4px; max-width:100%; margin-top:28px; padding:6px 14px 6px 8px; border:1px solid var(--line); border-radius:var(--radius-pill); background:var(--surface); color:var(--muted); font-size:13px; font-weight:600; transition:background .15s,color .15s,border-color .15s }
.breadcrumb:hover { background:var(--tint); border-color:var(--tint-line); color:var(--ink); text-decoration:none }
.breadcrumb .icon { transition:transform .15s }
.breadcrumb:hover .icon { transform:translateX(-2px) }
.breadcrumb+.page-heading { padding-top:22px }
.form-page>.breadcrumb { margin-bottom:12px }
.footer-brand { font-weight:700; letter-spacing:-.02em; color:var(--ink) }
.footer { border-top:1px solid var(--line); margin-top:85px; padding:24px 0 30px; display:flex; align-items:center; justify-content:space-between; gap:20px; color:var(--muted); font-size:12px }

/* ---------- List colours ---------- */
.list-berry { --list:var(--berry); --list-soft:var(--berry-soft) }
.list-plum { --list:var(--plum); --list-soft:var(--plum-soft) }
.list-sage { --list:var(--sage); --list-soft:var(--sage-soft) }
.list-saffron { --list:var(--saffron); --list-soft:var(--saffron-soft) }
.list-ocean { --list:var(--ocean); --list-soft:var(--ocean-soft) }
.list-coral { --list:var(--coral); --list-soft:var(--coral-soft) }
.list-lavender { --list:var(--lavender); --list-soft:var(--lavender-soft) }
.list-slate { --list:var(--slate); --list-soft:var(--slate-soft) }
.list-icon { flex:none; display:grid; place-items:center; width:48px; height:48px; border-radius:15px; background:var(--list-soft,var(--tint)); font-size:24px; line-height:1 }

/* ---------- Cards: lists and groups ---------- */
.list-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:16px }
.list-card { position:relative; overflow:hidden; display:flex; align-items:center; gap:16px; padding:18px 20px 18px 24px; background:var(--surface); border:1px solid color-mix(in srgb,var(--line) 60%,transparent); border-radius:var(--radius-card); box-shadow:var(--shadow-1); color:var(--ink); transition:transform .2s ease,box-shadow .2s ease }
.list-card::before { content:""; position:absolute; inset:0 auto 0 0; width:5px; background:var(--list,var(--accent)) }
a.list-card:hover { box-shadow:var(--shadow-2); text-decoration:none }
.list-card h3 { font-family:'DM Sans',system-ui,sans-serif; font-size:16px; font-weight:700; letter-spacing:0; margin-bottom:2px; overflow-wrap:break-word }
.list-card p { font-size:13px; color:var(--muted); margin:0 }
.chip { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:var(--radius-pill); background:var(--list-soft,var(--tint)); color:var(--ink); font-size:12px; font-weight:700; white-space:nowrap }
.chip .icon { width:13px; height:13px; color:var(--list,var(--accent)) }
.chevron { display:grid; flex:none; margin-left:auto; color:var(--muted); transition:transform .2s,color .2s }
.list-card>div { flex:1; min-width:0 }
.list-card p,.card-meta { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px }
a.list-card:hover .chevron,.group-card:hover .chevron { transform:translateX(3px); color:var(--list,var(--accent)) }
.list-card.is-stale { opacity:.75 }
.list-card.is-stale form { margin-left:auto }
.group-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:16px }
.group-card { position:relative; overflow:hidden; display:flex; flex-direction:column; gap:14px; padding:24px; border-radius:var(--radius-card); background:var(--surface); border:1px solid color-mix(in srgb,var(--line) 60%,transparent); box-shadow:var(--shadow-1); color:var(--ink); transition:transform .2s ease,box-shadow .2s ease }
.group-card::after { content:""; position:absolute; right:-36px; top:-36px; width:104px; height:104px; border-radius:50%; background:var(--list-soft,var(--tint)); opacity:.6 }
.group-card>* { position:relative }
.group-card:hover { text-decoration:none; box-shadow:var(--shadow-2) }
.group-card h3 { margin:0 }
.group-card p { display:flex; align-items:center; justify-content:space-between; margin:0; color:var(--muted); font-size:13px }
.empty-state { grid-column:1/-1; text-align:center; padding:48px 24px 52px; background:color-mix(in srgb,var(--surface) 70%,transparent); border:2px dashed var(--line); border-radius:26px; color:var(--accent) }
.empty-illustration { width:150px; height:auto; margin:0 auto 10px; display:block }
.empty-state h3 { font-size:22px; color:var(--ink) }
.empty-state p { color:var(--muted); max-width:490px; margin:0 auto 22px }

/* ---------- Panels and forms ---------- */
.panel { background:var(--surface); border:1px solid color-mix(in srgb,var(--line) 70%,transparent); padding:30px; border-radius:24px; box-shadow:var(--shadow-1) }
.form-page { max-width:640px; margin:40px auto 0 }
.form-page h1 { font-size:36px }
.form-stack { display:flex; flex-direction:column; gap:20px }
.form-stack>div { display:flex; flex-direction:column; gap:7px }
.form-stack>div.actions { flex-direction:row; align-items:center }
.form-stack label,.picker legend { font-size:13px; font-weight:700 }
.form-stack>div:has(input[type=checkbox]) { flex-direction:row; flex-wrap:wrap; align-items:center; column-gap:10px }
.form-stack>div:has(input[type=checkbox]) label { order:1 }
/* Help of a checkbox goes below checkbox and label, over the full width. */
.form-stack>div:has(input[type=checkbox]) .helptext { order:2; flex-basis:100%; font-size:13px; line-height:1.5 }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),textarea,select { width:100%; min-width:0; border:1px solid var(--line); border-radius:12px; padding:11px 14px; background:var(--input); color:var(--ink); transition:border-color .15s,box-shadow .15s }
input:not([type=checkbox]):not([type=radio]):focus,textarea:focus,select:focus { border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); outline:none }
input[type=checkbox] { width:18px; height:18px; accent-color:var(--accent) }
input[type=color] { height:45px }
textarea { resize:vertical }
.helptext { font-size:12px; color:var(--muted) }
.helptext ul { padding-left:18px; margin:4px 0 }
.errorlist { margin:0; padding-left:18px; color:var(--danger); font-size:13px }
.form-stack>.product-link { gap:12px; padding:20px; background:var(--gold-soft); border:1px solid var(--gold-line); border-radius:18px }
.product-link input[type=url] { font-size:16px }
.product-link p { margin:0 }
.import-hint { margin:0; color:var(--muted); font-size:13px }
.import-error { color:var(--danger); font-size:13px }
.privacy-note { font-size:13px }
.picker { border:0; margin:0; padding:0; min-width:0 }
.picker legend { padding:0; margin-bottom:8px }
.emoji-picker { display:grid; grid-template-columns:repeat(auto-fill,minmax(48px,1fr)); gap:8px }
.color-picker { display:flex; flex-wrap:wrap; gap:10px }
.emoji-option,.color-option { position:relative; display:grid; place-items:center; cursor:pointer }
.emoji-option input,.color-option input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer }
.emoji-option { height:48px; border-radius:14px; border:1px solid var(--line); background:var(--input); font-size:24px; line-height:1; transition:border-color .15s,background .15s,transform .15s }
.emoji-option .emoji-glyph { font-size:24px; line-height:1 }
.emoji-option:hover { border-color:var(--accent) }
.emoji-option:has(input:checked) { border:2px solid var(--accent); background:var(--accent-soft) }
.color-option { width:44px; height:44px; border-radius:50% }
.swatch { width:34px; height:34px; border-radius:50%; background:var(--list); box-shadow:inset 0 0 0 3px var(--list-soft); transition:transform .15s }
.color-option:hover .swatch { transform:scale(1.08) }
.color-option:has(input:checked) { box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--list) }
.emoji-option:has(input:focus-visible),.color-option:has(input:focus-visible) { outline:3px solid var(--accent); outline-offset:3px }
.notice { margin-top:20px; padding:14px 20px; border:1px solid var(--tint-line); background:var(--tint); border-radius:16px }
.notice.success { border-color:color-mix(in srgb,var(--ok-ink) 30%,transparent); background:var(--ok-bg); color:var(--ok-ink) }
.notice.error,.notice.warning { border-color:var(--danger) }
.notice a { color:inherit; font-weight:700; text-decoration:underline; text-underline-offset:2px }
.copy-row { display:flex; gap:10px; margin-top:8px }
.copy-row input { font-size:12px }
.quiet-link { display:inline-block; text-align:center; font-size:12px; margin-top:16px; padding:12px 0; color:var(--muted) }
.legal-text h2 { font-size:1.2rem; margin-top:1.75rem }
.legal-text p,.legal-text li { line-height:1.65 }
.legal-text ul { padding-left:1.25rem }

/* ---------- List page ---------- */
.list-hero { position:relative }
.list-hero::before { content:""; position:absolute; left:-60px; top:10px; width:260px; height:180px; border-radius:50%; background:var(--list-soft); filter:blur(40px); opacity:.8; z-index:-1 }
.list-title { display:flex; align-items:center; gap:20px; min-width:0 }
.list-emoji { flex:none; display:grid; place-items:center; width:76px; height:76px; border-radius:24px; background:var(--list-soft); font-size:40px; line-height:1; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--list) 25%,transparent) }
.list-title h1 { overflow-wrap:anywhere }
.owner-bar { display:flex; align-items:center; justify-content:space-between; gap:16px 20px; flex-wrap:wrap; background:var(--surface); border:1px solid color-mix(in srgb,var(--line) 70%,transparent); box-shadow:var(--shadow-1); border-radius:20px; padding:14px 18px; font-size:13px }
.filter-bar { display:flex; align-items:center; gap:10px; margin:28px 0 22px }
/* Owner actions: "Bearbeiten" and sharing with text, everything else in the "more" menu, right-aligned to its button.
   The toggle is as high as the small buttons beside it (padding, border and one line of text). */
.menu-toggle { min-width:44px; min-height:calc(1.4em + 18px); padding-inline:12px }
.more-menu[open]>.menu-toggle { border-color:var(--accent) }
.more-menu .menu { z-index:10; width:max-content; max-width:min(340px,calc(100vw - 32px)) }
/* Filter chips are checkboxes: unchecked parameter absent (all), checked priority=1 / available=1. The text never truncates;
   the row wraps instead. The checkbox stays in the accessibility tree; the chip shows its state and keyboard focus. */
.filter-chips { display:flex; flex-wrap:wrap; gap:8px }
.filter-chip { position:relative; display:inline-flex; align-items:center; gap:7px; min-height:46px; padding:10px 18px; border:1px solid var(--line); border-radius:var(--radius-pill); background:var(--surface); color:var(--ink); font-size:14px; font-weight:600; line-height:1.3; white-space:nowrap; cursor:pointer; user-select:none; transition:background .15s,border-color .15s,color .15s }
.filter-chip:hover { border-color:var(--accent) }
.filter-chip .icon { width:16px; height:16px; color:var(--link,var(--accent)) }
.filter-chip:has(input:checked) { background:var(--accent); border-color:var(--accent); color:#fff }
.filter-chip:has(input:checked) .icon { color:inherit }
.filter-chip:has(input:focus-visible) { outline:3px solid var(--accent); outline-offset:3px }
/* High contrast replaces the accent fill with system colours; checked chips take the selection colours instead. */
@media(forced-colors:active) {
  .filter-chip:has(input:checked) { forced-color-adjust:none; background:Highlight; border-color:Highlight; color:HighlightText }
}
.filter-bar .button { min-height:44px }
.search-field { display:flex; align-items:center; gap:10px; flex:1; max-width:430px; min-height:44px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-pill); padding:0 6px 0 18px; color:var(--muted) }
.search-field:focus-within { border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft) }
.search-field>.icon { flex:none; width:18px; height:18px }
.search-field input:not([type=hidden]) { border:0!important; background:none!important; box-shadow:none!important; min-height:42px; padding:10px 12px 10px 0!important }

/* Lift cards only for precise pointers; touch devices keep a static layout. */
@media(hover:hover) and (pointer:fine) {
  a.list-card:hover,.group-card:hover { transform:translateY(-3px) }
  .wish-card:hover { transform:translateY(-2px) }
}

/* ---------- Wish cards ---------- */
.wish-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:22px }
.wish-card { display:flex; flex-direction:column; min-width:0; overflow:hidden; background:var(--surface); border:1px solid color-mix(in srgb,var(--line) 60%,transparent); border-radius:22px; box-shadow:var(--shadow-1); transition:transform .2s ease,box-shadow .2s ease }
.wish-card:hover { box-shadow:var(--shadow-2) }
.wish-image { position:relative; overflow:hidden; aspect-ratio:4/3; display:grid; place-items:center; color:var(--list,var(--accent)); background:linear-gradient(160deg,var(--list-soft,var(--tint)),color-mix(in srgb,var(--list-soft,var(--tint)),var(--surface) 55%)) }
.wish-image>a { display:block; width:100%; height:100% }
.wish-image img { display:block; width:100%; height:100%; object-fit:contain; padding:18px }
.wish-image .illustration { width:52%; height:auto }
.wish-card.is-done .wish-image { filter:saturate(.35); opacity:.8 }
.favorite-badge { position:absolute; top:10px; left:10px; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--surface); color:var(--berry); box-shadow:0 4px 12px rgba(0,0,0,.18) }
/* Two beats on load, then it rests: motion that starts by itself ends within 5 s (WCAG 2.2.2). */
.favorite-badge svg { width:26px; height:26px; animation:heartbeat 2.4s ease-in-out infinite }
@keyframes heartbeat { 0%,40%,100% { transform:scale(1) } 10% { transform:scale(1.18) } 20% { transform:scale(1) } 30% { transform:scale(1.12) } }
.price { position:absolute; right:12px; bottom:12px; padding:5px 12px; border-radius:var(--radius-pill); background:var(--chip-strong-bg); color:var(--chip-strong-ink); font-weight:700; font-size:13px; white-space:nowrap; box-shadow:0 4px 12px rgba(0,0,0,.15) }
.price small { font-weight:500; font-size:11px; opacity:.8 }
.wish-body { display:flex; flex-direction:column; flex:1; gap:8px; padding:16px 18px 18px }
.wish-title { font-size:18px; margin:0; overflow-wrap:anywhere }
.wish-description { font-size:13px; color:var(--muted); margin:0; overflow-wrap:anywhere }
/* Long descriptions show about four lines; the toggle (details, works without JS) reveals the rest. */
.wish-description-box { display:flex; flex-direction:column; align-items:flex-start; gap:2px }
.wish-description.is-clamped { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; line-clamp:4; overflow:hidden }
.wish-description-box:has(.more-toggle[open]) .is-clamped { display:block; -webkit-line-clamp:unset; line-clamp:none; overflow:visible }
.more-toggle summary { display:inline-flex; align-items:center; min-height:32px; list-style:none; cursor:pointer; color:var(--link,var(--accent)); font-size:13px; font-weight:650 }
.more-toggle summary::-webkit-details-marker { display:none }
.more-toggle summary:focus-visible { outline:3px solid var(--accent); outline-offset:2px; border-radius:6px }
.more-toggle .less-label,.more-toggle[open] .more-label { display:none }
.more-toggle[open] .less-label { display:inline }
/* The server only estimates the length; app.js marks descriptions that fit in four lines, where the toggle goes. */
.wish-description-box.fits .more-toggle { display:none }
.wish-meta { font-size:12px; color:var(--muted); margin-top:auto; padding-top:4px }
.product-button { width:100% }
.wish-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; border-top:1px solid var(--line); padding-top:14px; margin-top:6px; font-size:13px }
.availability-row { display:flex; flex-direction:column; gap:6px; flex:1; min-width:120px }
.availability { align-self:flex-start; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:var(--radius-pill); font-size:12px; font-weight:700 }
.availability::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor }
.availability.free { background:var(--ok-bg); color:var(--ok-ink) }
.availability.partial { background:var(--warn-bg); color:var(--warn-ink) }
.availability.full { background:var(--full-bg); color:var(--full-ink) }
.progress { width:100%; height:6px; border:0; border-radius:var(--radius-pill); background:var(--full-bg); overflow:hidden; -webkit-appearance:none; appearance:none }
.progress::-webkit-progress-bar { background:var(--full-bg); border-radius:var(--radius-pill) }
.progress::-webkit-progress-value { background:var(--warn-ink); border-radius:var(--radius-pill) }
.progress::-moz-progress-bar { background:var(--warn-ink); border-radius:var(--radius-pill) }

.add-wish-tile,.add-card { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:220px; padding:24px; border:2px dashed var(--line); border-radius:22px; color:var(--muted); font-weight:700; text-align:center; transition:border-color .2s,color .2s,background .2s }
.add-wish-tile:hover,.add-card:hover { border-color:var(--list,var(--accent)); color:var(--ink); background:color-mix(in srgb,var(--list-soft,var(--tint)) 45%,transparent); text-decoration:none }
.list-grid .add-card { min-height:0; flex-direction:row; padding:18px 20px }
.add-wish-plus { display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:var(--list-soft,var(--tint)); color:var(--list,var(--accent)) }
.add-wish-plus svg { width:26px; height:26px }
.add-button svg { width:18px; height:18px; stroke-width:2.4 }

/* ---------- Reservations, groups, cleanup ---------- */
.reservation-list { display:flex; flex-direction:column; gap:18px }
.reservation-heading { display:flex; gap:18px; align-items:center }
.reservation-heading h2 { margin-bottom:4px }
.reservation-heading p { margin-bottom:4px }
.status-pill { background:var(--ok-bg); color:var(--ok-ink); padding:5px 12px; font-size:12px; font-weight:700; border-radius:var(--radius-pill) }
.reservation-controls { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:18px; padding-top:18px; border-top:1px solid var(--line) }
.reservation-controls .product-button { margin-top:0 }
.quantity-input { max-width:80px }
.member-row { display:flex; align-items:center; gap:15px; border-top:1px solid var(--line); padding:16px 0 }
.member-row p { margin:0 }
.member-row .avatar { background:var(--tint); color:var(--link,var(--accent)); box-shadow:none }
.cleanup-row { margin:1rem 0; border-inline-start:5px solid var(--accent) }

/* ---------- Login ---------- */
.login-layout { min-height:620px; display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:80px; padding:60px 30px }
.login-story h1 { font-size:clamp(40px,4.4vw,60px); max-width:460px }
.login-story .lead { font-size:17px; max-width:400px }
.login-card { padding:38px; box-shadow:var(--shadow-2) }
.login-card h2 { font-size:30px; margin-bottom:8px }
.login-card .form-stack { margin-top:26px }
.login-card .button.subtle { width:100%; margin-top:12px }
.gift-art { height:220px; position:relative; width:300px; margin:24px 0 }
.gift-box { position:absolute; width:150px; height:118px; left:65px; top:65px; border-radius:10px; transform:rotate(-8deg); background:linear-gradient(160deg,var(--accent),color-mix(in srgb,var(--accent),#000 18%)); box-shadow:16px 18px 30px color-mix(in srgb,var(--accent) 25%,transparent) }
.gift-box::before { content:''; position:absolute; width:166px; height:28px; top:0; left:-8px; border-radius:8px; background:color-mix(in srgb,var(--accent),#fff 18%) }
.gift-box::after { content:''; position:absolute; height:118px; width:24px; left:63px; top:0; background:var(--gold) }
.gift-box span::before,.gift-box span::after { content:''; position:absolute; width:46px; height:30px; border:8px solid var(--gold); border-radius:60% 80% 0 80%; top:-34px; left:22px; transform:rotate(20deg) }
.gift-box span::after { left:76px; transform:scaleX(-1) rotate(20deg) }
.gift-tag { position:absolute; left:190px; top:120px; background:var(--surface); padding:8px 12px; border-radius:6px; font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:13px; color:var(--ink); transform:rotate(16deg); box-shadow:var(--shadow-1) }
.spark { position:absolute; color:var(--gold) }
.spark.one { left:10px; top:38px; font-size:48px }
.spark.two { left:250px; top:150px; font-size:26px; color:var(--accent) }

/* ---------- Gift box moment after a reservation ----------
   The card of the wish this session just reserved (one-time marker, see wishlists.services.unboxing_for): its final
   chip or button turns into a gift box, the lid hops open, a unicorn jumps in, the lid closes, and the box turns back.
   Decorative and aria-hidden; the real element stays in place, only its paint fades. app.js adds .is-playing once the
   card is in view and removes the art at the end. All parts run on one clock, so their percentages line up. */
.unboxing { position:relative; --unbox-color:var(--list,var(--accent)); --unbox-time:3.3s; --unbox-scale:1.3;
  --unbox-hop:-44px; --unbox-lid:-96deg; --unbox-lid-peak:-106deg; --unbox-lid-x:0px; --unbox-flip:1; --unbox-dx:0px; --unbox-drop:0px }
.availability.unboxing { --unbox-face:var(--full-bg) }
/* The button sits at the right of the footer, below the title and the wished quantity: the box stands on its lower edge,
   a little to the left (the unicorn starts inside the card), and the hop stays low. */
.button.unboxing { --unbox-face:var(--accent); --unbox-scale:1; --unbox-dx:-8px; --unbox-drop:5px; --unbox-hop:-28px;
  --unbox-lid:-90deg; --unbox-lid-peak:-98deg }
.unboxing-art { display:none; position:absolute; inset:0; z-index:1; pointer-events:none }
.unboxing.is-playing { animation:unbox-target var(--unbox-time) linear both }
.unboxing.is-playing .unboxing-art { display:block }
.unboxing-art,.unboxing-art * { animation-duration:var(--unbox-time); animation-fill-mode:both }
.unboxing-morph { position:absolute; left:50%; top:50%; animation-name:unbox-morph; animation-timing-function:ease-in-out }
/* 130×100 user units, scaled; the box body (y 70–100, 44 wide) sits on the middle of the chip or button, moved by
   --unbox-dx/--unbox-drop; --unbox-flip:-1 mirrors the scene (unicorn from the left). */
.unboxing-art svg { position:absolute; left:50%; top:50%; width:calc(130px * var(--unbox-scale)); height:calc(100px * var(--unbox-scale));
  transform:translate(calc(-50% + var(--unbox-dx)),calc(-85% + var(--unbox-drop))) scaleX(var(--unbox-flip)) }
.ub-pack { transform-origin:65px 100px; animation-name:unbox-pack }
.ub-shadow { fill:var(--ink); opacity:.1 }
.ub-inside,.ub-lid-top { fill:color-mix(in srgb,var(--unbox-color),#000 18%) }
.ub-body { fill:var(--unbox-color) }
.ub-shine { fill:#fff; opacity:.3 }
.ub-ribbon,.ub-knot { fill:var(--gold) }
.ub-bow { stroke:var(--gold); stroke-width:3.6; stroke-linecap:round }
.ub-lid { transform-box:fill-box; transform-origin:6% 100%; animation-name:unbox-lid }
/* The unicorn: cream fur with a soft plum outline (it stays visible on white cards and on navy), pastel mane and tail. */
.ub-fur { fill:#fffaf3; stroke:color-mix(in srgb,var(--plum) 55%,#fff); stroke-width:1.2; stroke-linejoin:round }
.ub-far .ub-fur { fill:#f4e9f1 }
.ub-snout { fill:#ffe3e9; stroke:color-mix(in srgb,var(--plum) 55%,#fff); stroke-width:1.2 }
.ub-eye { fill:#2e2230 }
.ub-smile { stroke:#2e2230; stroke-width:.7; stroke-linecap:round }
.ub-glint { fill:#fff }
.ub-cheek { fill:#ff8fa3; opacity:.55 }
.ub-horn { fill:#f2c45a; stroke:#d4a72c; stroke-width:1; stroke-linejoin:round }
.ub-horn-line { stroke:#d4a72c; stroke-width:.9; stroke-linecap:round }
.ub-hair { stroke-width:3.4; stroke-linecap:round }
.ub-hair.ub-gold { stroke:var(--gold) } .ub-hair.ub-accent { stroke:var(--accent) } .ub-hair.ub-plum { stroke:var(--plum) }
.ub-hair-dot.ub-ocean { fill:var(--ocean) } .ub-hair-dot.ub-plum { fill:var(--plum) } .ub-hair-dot.ub-accent { fill:var(--accent) } .ub-hair-dot.ub-sage { fill:var(--sage) }
.ub-x { animation-name:unbox-x }
.ub-y { animation-name:unbox-y }
/* Origin 0 0 is the unicorn's feet. */
.ub-unicorn { animation-name:unbox-unicorn }
.ub-legs { transform-box:fill-box; transform-origin:50% 0; animation-name:unbox-legs }
.ub-tail { transform-box:fill-box; transform-origin:0 30%; animation-name:unbox-tail }
.ub-spark { fill:var(--gold); transform-box:fill-box; transform-origin:center; animation-name:unbox-spark }
.ub-spark.s2 { fill:var(--berry) }
/* The face goes at once (the morph covers it in the same colour, so no second outline); the text fades under it. */
@keyframes unbox-target {
  0% { background-color:transparent; border-color:transparent; box-shadow:0 6px 16px transparent }
  3%,96% { color:transparent; background-color:transparent; border-color:transparent; box-shadow:0 6px 16px transparent }
}
/* The pill shrinks to the box and changes colour only once it is small (sRGB mixes of navy and pink look muddy). The box
   fades in above the opaque morph, and at the end the morph is opaque again below it before the box fades: never two
   half-transparent layers. */
@keyframes unbox-morph {
  0% { width:100%; height:100%; border-radius:24px; background-color:var(--unbox-face); transform:translate(-50%,-50%); opacity:1 }
  7% { width:calc(48px * var(--unbox-scale)); height:calc(32px * var(--unbox-scale)); border-radius:6px; background-color:var(--unbox-face); transform:translate(calc(-50% + var(--unbox-dx)),calc(-50% + var(--unbox-drop))); opacity:1 }
  9%,10% { width:calc(44px * var(--unbox-scale)); height:calc(30px * var(--unbox-scale)); border-radius:4px; background-color:var(--unbox-color); transform:translate(calc(-50% + var(--unbox-dx)),calc(-50% + var(--unbox-drop))); opacity:1 }
  11%,83% { width:calc(44px * var(--unbox-scale)); height:calc(30px * var(--unbox-scale)); border-radius:4px; background-color:var(--unbox-color); transform:translate(calc(-50% + var(--unbox-dx)),calc(-50% + var(--unbox-drop))); opacity:0 }
  84%,88% { width:calc(44px * var(--unbox-scale)); height:calc(30px * var(--unbox-scale)); border-radius:4px; background-color:var(--unbox-color); transform:translate(calc(-50% + var(--unbox-dx)),calc(-50% + var(--unbox-drop))); opacity:1 }
  90% { width:calc(48px * var(--unbox-scale)); height:calc(32px * var(--unbox-scale)); border-radius:6px; background-color:var(--unbox-face); transform:translate(calc(-50% + var(--unbox-dx)),calc(-50% + var(--unbox-drop))); opacity:1 }
  97%,99% { width:100%; height:100%; border-radius:24px; background-color:var(--unbox-face); transform:translate(-50%,-50%); opacity:1 }
  100% { width:100%; height:100%; border-radius:24px; background-color:var(--unbox-face); transform:translate(-50%,-50%); opacity:0 }
}
@keyframes unbox-pack {
  0%,7% { opacity:0; transform:none }
  10% { opacity:1; transform:none }
  60% { transform:none; animation-timing-function:ease-out }
  64% { transform:scale(1.1,.86) }
  69% { transform:scale(.96,1.06) }
  74%,86.5% { opacity:1; transform:none }
  87%,100% { opacity:0; transform:none }
}
@keyframes unbox-lid {
  0%,17% { transform:none; animation-timing-function:ease-out }
  21% { transform:translate(0,-6px) rotate(-14deg); animation-timing-function:ease-in-out }
  27% { transform:translate(var(--unbox-lid-x),-2px) rotate(var(--unbox-lid-peak)) }
  31%,52% { transform:translate(var(--unbox-lid-x),-2px) rotate(var(--unbox-lid)); animation-timing-function:ease-in }
  59% { transform:translate(0,0) rotate(3deg) }
  63%,100% { transform:none }
}
@keyframes unbox-unicorn {
  0%,12% { opacity:0; transform:scale(.4) }
  17% { opacity:1; transform:scale(1.08) }
  20%,29% { transform:none }
  33% { transform:scale(1.12,.8) }
  36% { transform:scale(.94,1.08) rotate(-12deg) }
  44% { transform:rotate(-4deg) }
  52% { opacity:1; transform:rotate(16deg) scale(.92) }
  57% { opacity:1; transform:rotate(8deg) scale(.86) }
  59%,100% { opacity:0; transform:scale(.86) }
}
@keyframes unbox-x {
  0%,34% { transform:none; animation-timing-function:cubic-bezier(.3,0,.6,1) }
  54%,100% { transform:translateX(-43px) }
}
@keyframes unbox-y {
  0%,34% { transform:none; animation-timing-function:cubic-bezier(.2,.7,.4,1) }
  44% { transform:translateY(var(--unbox-hop)); animation-timing-function:cubic-bezier(.6,0,.8,.4) }
  57%,100% { transform:translateY(10px) }
}
@keyframes unbox-legs { 0%,35% { transform:none } 39%,50% { transform:scaleY(.45) } 54%,100% { transform:none } }
@keyframes unbox-tail { 0%,18% { transform:none } 22% { transform:rotate(-14deg) } 26% { transform:rotate(10deg) } 30%,36% { transform:none } 44% { transform:rotate(18deg) } 52%,100% { transform:none } }
@keyframes unbox-spark { 0%,63% { opacity:0; transform:scale(.2) } 68% { opacity:1; transform:scale(1.15) } 80%,100% { opacity:0; transform:scale(.5) } }

/* ---------- Confetti after a reservation ---------- */
.confetti { position:fixed; inset:0; z-index:50; overflow:hidden; pointer-events:none }
.confetti i { position:absolute; top:-16px; width:9px; height:14px; border-radius:2px; opacity:0; animation:confetti-fall 1.6s cubic-bezier(.2,.6,.4,1) forwards }
@keyframes confetti-fall {
  0% { opacity:1; transform:translate3d(0,0,0) rotate(0) }
  100% { opacity:0; transform:translate3d(var(--drift,0),85vh,0) rotate(540deg) }
}

.confetti i:nth-child(1) { left:11%; animation-delay:0ms; background:var(--accent); --drift:-60px;border-radius:50%;width:9px;height:9px }
.confetti i:nth-child(2) { left:48%; animation-delay:73ms; background:var(--gold); --drift:-7px }
.confetti i:nth-child(3) { left:85%; animation-delay:146ms; background:var(--plum); --drift:46px }
.confetti i:nth-child(4) { left:22%; animation-delay:219ms; background:var(--sage); --drift:-22px }
.confetti i:nth-child(5) { left:59%; animation-delay:292ms; background:var(--ocean); --drift:31px;border-radius:50%;width:9px;height:9px }
.confetti i:nth-child(6) { left:96%; animation-delay:365ms; background:var(--coral); --drift:-37px }
.confetti i:nth-child(7) { left:33%; animation-delay:438ms; background:var(--accent); --drift:16px }
.confetti i:nth-child(8) { left:70%; animation-delay:11ms; background:var(--gold); --drift:-52px }
.confetti i:nth-child(9) { left:7%; animation-delay:84ms; background:var(--plum); --drift:1px;border-radius:50%;width:9px;height:9px }
.confetti i:nth-child(10) { left:44%; animation-delay:157ms; background:var(--sage); --drift:54px }
.confetti i:nth-child(11) { left:81%; animation-delay:230ms; background:var(--ocean); --drift:-14px }
.confetti i:nth-child(12) { left:18%; animation-delay:303ms; background:var(--coral); --drift:39px }
.confetti i:nth-child(13) { left:55%; animation-delay:376ms; background:var(--accent); --drift:-29px;border-radius:50%;width:9px;height:9px }
.confetti i:nth-child(14) { left:92%; animation-delay:449ms; background:var(--gold); --drift:24px }
.confetti i:nth-child(15) { left:29%; animation-delay:22ms; background:var(--plum); --drift:-44px }
.confetti i:nth-child(16) { left:66%; animation-delay:95ms; background:var(--sage); --drift:9px }
.confetti i:nth-child(17) { left:3%; animation-delay:168ms; background:var(--ocean); --drift:-59px;border-radius:50%;width:9px;height:9px }
.confetti i:nth-child(18) { left:40%; animation-delay:241ms; background:var(--coral); --drift:-6px }
.confetti i:nth-child(19) { left:77%; animation-delay:314ms; background:var(--accent); --drift:47px }
.confetti i:nth-child(20) { left:14%; animation-delay:387ms; background:var(--gold); --drift:-21px }
.confetti i:nth-child(21) { left:51%; animation-delay:460ms; background:var(--plum); --drift:32px;border-radius:50%;width:9px;height:9px }
.confetti i:nth-child(22) { left:88%; animation-delay:33ms; background:var(--sage); --drift:-36px }
.confetti i:nth-child(23) { left:25%; animation-delay:106ms; background:var(--ocean); --drift:17px }
.confetti i:nth-child(24) { left:62%; animation-delay:179ms; background:var(--coral); --drift:-51px }

/* ---------- Responsive ---------- */
@media(max-width:1000px) {
  .header-inner { gap:20px; padding:14px 28px }
  .login-layout { gap:40px; padding:50px 0 }
  .footer-note { display:none }
}
@media(max-width:700px) {
  .shell { width:calc(100% - 32px) }
  body { background-attachment:scroll }
  .header-inner { flex-wrap:wrap; padding:10px 16px 4px; gap:4px 8px }
  .brand { min-height:44px; font-size:19px }
  .brand-mark { width:32px; height:32px }
  .header-inner nav { order:3; flex-basis:100%; gap:2px; overflow:auto; margin-left:-12px }
  .header-inner nav a { display:inline-flex; align-items:center; min-height:44px }
  .account-nav { gap:6px }
  .avatar { width:44px; height:44px }
  .language-switch { gap:6px; height:44px; padding:0 14px; border:1px solid var(--line); border-radius:var(--radius-pill); background:var(--surface); font-size:14px; font-weight:600 }
  .language-switch>.icon { position:static }
  .language-code { display:inline }
  .language-switch select { position:absolute; inset:-1px; width:calc(100% + 2px); min-height:0; height:calc(100% + 2px); padding:0; opacity:0 }
  .language-switch::after { display:none }
  /* The select is transparent here, so the pill shows its keyboard focus. */
  .language-switch:has(select:focus-visible) { outline:3px solid var(--accent); outline-offset:3px }
  .theme-switch { width:44px; padding:0; justify-content:center }
  .login-button { width:44px; padding:0 }
  .login-button .button-label { display:none }
  .page-heading { padding-top:30px; flex-direction:column; align-items:flex-start; gap:18px }
  .welcome-card { padding:18px; gap:12px; margin-top:18px; border-radius:20px }
  .welcome-art { width:92px; align-self:flex-start }
  .add-wish-tile,.add-card { min-height:88px; flex-direction:row; padding:16px }
  .add-wish-plus { width:44px; height:44px }
  .add-wish-plus svg { width:22px; height:22px }
  .favorite-badge { width:60px; height:60px }
  .favorite-badge svg { width:35px; height:35px }
  /* Gift view: the footer dissolves, so availability sits in the row of the wished quantity and "Reservieren" spans the card. */
  .gift-card .wish-body { flex-flow:row wrap; align-items:center }
  .gift-card .wish-body>* { flex:1 1 100% }
  .gift-card .wish-footer { display:contents }
  .gift-card .wish-meta { flex:1 1 auto; order:1; margin-top:0; padding-top:0 }
  .gift-card .wish-footer>.availability,.gift-card .availability-row { flex:0 1 auto; order:1 }
  .gift-card .availability-row { align-items:flex-end }
  .gift-card .product-button { order:2 }
  .gift-card .wish-footer>.button { flex:1 1 100%; order:3; min-height:48px; margin-top:4px; font-size:15px }
  /* Phones: the row right above the full-width button holds the wished quantity and the chip, so the lid only slides
     aside with a small tilt, and the scene is mirrored: the unicorn jumps from the left, below the short quantity text. */
  .gift-card .button.unboxing { --unbox-dx:0px; --unbox-drop:8px; --unbox-flip:-1; --unbox-hop:-26px;
    --unbox-lid:-18deg; --unbox-lid-peak:-24deg; --unbox-lid-x:-40px }
  .list-grid,.group-grid,.wish-grid { grid-template-columns:1fr }
  .list-emoji { width:60px; height:60px; font-size:32px; border-radius:20px }
  .list-title { gap:14px }
  .filter-bar { flex-wrap:wrap }
  .search-field { flex-basis:100%; max-width:none }
  /* Compact chips, so both share the row below the search field (Polish at 320 px may wrap). */
  .filter-chips { gap:6px }
  .filter-chip { gap:6px; padding-inline:12px }
  .panel { padding:22px; border-radius:22px }
  .footer { margin-top:55px; flex-wrap:wrap }
  .member-row { flex-wrap:wrap }
  .member-row .actions { flex-basis:100%; margin-left:55px }
  .login-layout { grid-template-columns:1fr; gap:28px; padding:30px 0 }
  .login-story h1 { font-size:40px }
  .gift-art,.login-story>.muted { display:none }
  .login-card { padding:26px }
  .form-page { margin-top:28px }
  .reservation-heading { flex-wrap:wrap }
  .reservation-heading .list-icon { display:none }
  .copy-row { flex-wrap:wrap }
  .copy-row input { flex-basis:100% }
  .owner-bar { align-items:flex-start; padding:14px }
  /* Hint above, then one row of the labelled actions; the "more" button sits right, so its menu opens inside the bar. */
  .owner-actions { width:100%; gap:4px }
  .owner-actions .button { gap:6px; padding-inline:10px }
  .more-menu { margin-left:auto }
  /* Right-aligned to the button, the menu keeps the page gutter on the left. */
  .more-menu .menu { max-width:calc(100vw - 60px) }
  .more-toggle summary { min-height:44px }
  .reservation-controls .actions { width:100% }
  .section-heading { flex-wrap:wrap }
  /* Touch targets of at least 44px. */
  .button,.button.small,.breadcrumb,main select,.quantity-input { min-height:44px }
  .quiet-link,.footer a,.privacy-note a,.legal-text p a { display:inline-flex; align-items:center; justify-content:center; min-height:44px }
  .icon-button { width:44px; height:44px }
  input[type=checkbox] { width:22px; height:22px }
}
@media(max-width:400px) {
  .brand { font-size:17px; gap:7px }
  .brand-mark { width:28px; height:28px; border-radius:8px }
  .language-switch { padding:0 10px }
  .account-nav { gap:4px }
}
@media(max-width:360px) {
  .owner-bar { padding:12px }
  .filter-chip { padding-inline:10px; font-size:13px }
}
@media(prefers-reduced-motion:reduce) {
  .favorite-badge svg { animation:none!important }
  .welcome-art * { animation:none!important }
  * { transition:none!important; scroll-behavior:auto!important }
  .confetti { display:none }
  .unboxing-art { display:none!important }
  .unboxing.is-playing { animation:none!important }
  a.list-card:hover,.group-card:hover,.wish-card:hover { transform:none!important }
}
/* Contrast themes repaint the real chip and its text, which the box would then cover: no moment there (app.js ends it). */
@media(forced-colors:active) {
  .unboxing-art { display:none!important }
  .unboxing.is-playing { animation:none!important }
}
/* Open invitations of administrators under "Einstellungen". */
.invitation-list { list-style:none; margin:0; padding:0; display:grid; gap:10px }
.invitation-list li { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow-wrap:anywhere }
.invitation-list li>span { flex:1 1 12rem; min-width:0 }
.invitation-list form { flex:none }