/* CuteGirlGamin shared effects – loaded by every page */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s;animation-timing-function:ease}
@keyframes shine{to{background-position:200% center}}

/* pink text highlight + scrollbar */
::selection{background:var(--accent);color:#fff}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--accent),var(--accent2,var(--accent)));border-radius:999px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{border-width:2px}
@supports (-moz-appearance:none){html{scrollbar-color:var(--accent) transparent}}

/* keyboard focus glow */
:focus-visible{outline:2px solid var(--accent)!important;outline-offset:3px;box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 22%,transparent)!important}

/* flowing gradient ring on every picture (in step with the title shine) */
.brand img,.about-intro img,.ring{padding:2px;border:0!important;background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent));background-size:200% auto;animation:shine 6s linear infinite}
.about-intro img{padding:3px}
.status-card .av{background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent));background-size:200% auto;animation:shine 6s linear infinite}
.status-card.is-live .av{background:linear-gradient(90deg,var(--live),var(--accent),var(--live));background-size:200% auto}

/* scroll reveal */
.rv{opacity:0;transform:translateY(26px);animation:none!important}
.rv.in{opacity:1;transform:none;transition:opacity .9s ease,transform 1s cubic-bezier(.22,1,.36,1)}

/* section heading accent */
.wrap>section>h2::after,main>section>h2::after{content:"";display:block;width:46px;height:4px;margin-top:6px;border-radius:4px;background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent));background-size:200% auto;animation:shine 6s linear infinite;transition:width 1s cubic-bezier(.22,1,.36,1) .25s}
.rv:not(.in)>h2::after{width:0}

/* today's schedule tile flows too */
.day.today{background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent));background-size:200% auto;animation:shine 6s linear infinite}
.day.live{background:linear-gradient(90deg,var(--live),var(--accent),var(--live));background-size:200% auto;animation:shine 6s linear infinite,glow 2s ease-in-out infinite}

/* loading shimmer */
.skel{pointer-events:none;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card);display:flex;flex-direction:column;gap:8px;padding-bottom:12px}
.skel i,.skel b{display:block;background:linear-gradient(90deg,var(--plum-soft) 0%,var(--accent-soft) 40%,var(--plum-soft) 80%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}
.skel i{aspect-ratio:16/9}
.skel b{height:12px;margin:0 12px;border-radius:6px}
.skel b+b{width:55%}
@keyframes shimmer{from{background-position:200% 0}to{background-position:0 0}}

/* clip hover: zoom + play */
.cimg{position:relative;display:block;overflow:hidden;aspect-ratio:16/9}
.cimg img{transition:transform 1s cubic-bezier(.22,1,.36,1),filter .5s ease!important}
.clip:hover .cimg img{transform:scale(1.07)}
.play{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;display:grid;place-items:center;border-radius:50%;color:#fff;font-size:17px;font-style:normal;padding-left:3px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 10px 24px -8px rgba(0,0,0,.5);opacity:0;transform:scale(.6);transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.clip:hover .play,.clip:focus-visible .play{opacity:1;transform:scale(1)}

/* live badge + pulsing dot */
.links a{display:inline-flex;align-items:center;gap:6px}
.ldot{position:relative;display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--live,#e8213f)}
.ldot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:ripple 1.6s ease-out infinite}
@keyframes ripple{to{transform:scale(2.8);opacity:0}}
.livepill{font:700 10px/1 var(--body);letter-spacing:.08em;color:#fff;background:var(--live,#e8213f);padding:4px 7px;border-radius:999px;animation:lp 1.6s ease-in-out infinite}
@keyframes lp{50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--live,#e8213f) 25%,transparent)}}

/* copied toast */
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:60;transform:translate(-50%,16px);opacity:0;pointer-events:none;
  background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;font-weight:700;font-size:14px;padding:10px 18px;border-radius:999px;box-shadow:0 14px 30px -12px var(--accent);
  transition:opacity .4s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* heart burst */
.hb{position:fixed;z-index:70;pointer-events:none;font-size:16px;line-height:1}

/* back-to-top with scroll progress ring */
.totop{--p:0;width:52px;height:52px;padding:0!important;border-radius:50%!important;display:grid;place-items:center;font-size:17px!important;border:3px solid transparent!important;
  background:linear-gradient(135deg,var(--accent),var(--accent2)) padding-box,conic-gradient(var(--plum) calc(var(--p)*1%),color-mix(in srgb,var(--accent) 22%,transparent) 0) border-box!important}
.totop.is-live{width:auto;padding:0 16px!important;border-radius:999px!important;font-size:14px!important;background:var(--live) padding-box,var(--live) border-box!important}

/* seasonal themes */
.season{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.season span{position:absolute;top:-10vh;opacity:.75;animation:fall linear infinite;will-change:transform}
@keyframes fall{to{transform:translate(var(--dx),118vh) rotate(var(--r))}}

/* softer background glow in light mode */
:root{--glow-a:14%;--glow-b:14%}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--glow-a:34%;--glow-b:26%}}
:root[data-theme="dark"]{--glow-a:34%;--glow-b:26%}
.glow{background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) var(--glow-a),transparent),transparent 72%);filter:blur(30px)}
.glow.two{background:radial-gradient(closest-side,color-mix(in srgb,var(--accent2) var(--glow-b),transparent),transparent 72%)}

/* music + cursor dock */
.dock{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:20;display:flex;gap:8px}
.dk{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--muted);display:grid;place-items:center;cursor:pointer;padding:0;box-shadow:0 8px 20px -12px var(--accent);
  transition:transform .6s cubic-bezier(.22,1,.36,1),background-color .5s,color .5s}
.dk svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dk:hover{transform:translateY(-2px);color:var(--accent)}
.dk[aria-pressed="true"]{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-color:transparent}
.dk.dkc[aria-pressed="true"] svg{fill:currentColor}
#dkMusic[aria-pressed="true"] svg{animation:bop 1.2s ease-in-out infinite}
@keyframes bop{50%{transform:translateY(-2px) rotate(-6deg)}}
@media (pointer:coarse){.dkc{display:none}}

/* heart cursor (mouse only) */
@media (pointer:fine){
  html.heartcur,html.heartcur body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7-4.6-9.3-9A5.3 5.3 0 0 1 12 6a5.3 5.3 0 0 1 9.3 6c-2.3 4.4-9.3 9-9.3 9z' fill='%23ff7aa8' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E") 12 8,auto}
  html.heartcur a,html.heartcur button,html.heartcur [role=button],html.heartcur summary,html.heartcur label,html.heartcur .clip{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7-4.6-9.3-9A5.3 5.3 0 0 1 12 6a5.3 5.3 0 0 1 9.3 6c-2.3 4.4-9.3 9-9.3 9z' fill='%239b5de5' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E") 14 10,pointer}
  html.heartcur input,html.heartcur textarea{cursor:text}
}
.totop{bottom:max(16px,env(safe-area-inset-bottom,0px))}
body.has-dock{padding-bottom:max(92px,env(safe-area-inset-bottom,0px))!important}

/* hidden always means hidden (fixes the live dot showing when offline) */
[hidden]{display:none!important}

/* one menu on every page */
.nav .main{flex:1 1 auto;justify-content:flex-end;min-width:0}
.nav .main a{display:inline-flex;align-items:center;gap:6px}
.nav .main a svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.nav .main a.active{background:var(--accent-soft);color:var(--accent)}
.nav .jump{flex:1 1 100%;justify-content:flex-start;margin:0;padding-top:8px;border-top:1px solid var(--line);gap:4px}
.nav .jump a{font-size:13px;padding:5px 11px}
@media (max-width:640px){
  .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:color-mix(in srgb,var(--bg) 94%,transparent)}
  .nav .main{position:fixed;left:0;right:0;bottom:0;z-index:35;margin:0;flex-basis:auto;display:flex;justify-content:space-around;gap:2px;
    padding:6px max(8px,env(safe-area-inset-left,0px)) calc(6px + env(safe-area-inset-bottom,0px));
    background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);box-shadow:0 -10px 30px -24px var(--accent)}
  .nav .main a{flex:1 1 0;flex-direction:column;justify-content:center;gap:3px;font-size:11px;padding:6px 2px;border-radius:14px;min-width:0}
  .nav .main a svg{width:22px;height:22px}
  .nav .jump{border-top:0;padding-top:0}
  body{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))!important}
  body:has(.nav .main) .dock,body:has(.nav .main) .totop{bottom:calc(80px + env(safe-area-inset-bottom,0px))!important}   /* only lift above the phone menu when there is one */
  .toast{bottom:calc(150px + env(safe-area-inset-bottom,0px))}
}

/* music volume slider (shows while music is on) */
.mg{display:flex;align-items:center;gap:8px}
.vol{display:flex;align-items:center;height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);box-shadow:0 8px 20px -12px var(--accent);
  max-width:0;padding-inline:0;opacity:0;overflow:hidden;visibility:hidden;margin-left:-8px;transition:max-width .5s cubic-bezier(.22,1,.36,1),padding .5s,opacity .4s,margin .5s,visibility 0s .5s}
/* while music is on, the volume slider sits open next to the button – one tidy line, never wraps */
.dock.on .vol{max-width:200px;padding-inline:16px;opacity:1;visibility:visible;margin-left:0;transition-delay:0s}
.vol input{width:120px;min-width:120px;accent-color:var(--accent);cursor:pointer;margin:0}
.vol{white-space:nowrap;flex-wrap:nowrap;font-size:0}

/* preview mode banner (preview-key holders only, while the site is private) */
.pvb{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);left:50%;transform:translateX(-50%);z-index:70;display:flex;align-items:center;gap:12px;max-width:calc(100% - 32px);
  padding:8px 8px 8px 16px;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:13px;font-weight:700;box-shadow:0 10px 24px -14px var(--accent);animation:pvin .8s cubic-bezier(.22,1,.36,1)}
.pvb small{font-weight:500;opacity:.9;margin-left:4px}
.pvb a{flex:0 0 auto;color:inherit;text-decoration:none;background:rgba(255,255,255,.22);padding:6px 12px;border-radius:999px;transition:background .4s}
.pvb a:hover{background:rgba(255,255,255,.35)}
@keyframes pvin{from{opacity:0;transform:translate(-50%,-12px)}}
@media (max-width:600px){.pvb small{display:none}}
body.pv{padding-top:52px}
.vol .vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vol{white-space:nowrap;flex-wrap:nowrap}

/* ---------- site search ---------- */
.sbtn-open{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--fg);font:inherit;font-weight:700;font-size:14px;cursor:pointer;transition:border-color .3s,color .3s}
.sbtn-open:hover{border-color:var(--accent);color:var(--accent)}
.sbtn-open svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
@media (max-width:640px){.sbtn-open span{display:none}.sbtn-open{width:44px;height:44px;padding:0;justify-content:center;margin-left:auto}}
.sx{position:fixed;inset:0;z-index:90;display:none}
.sx.open{display:block}
body.sx-lock{overflow:hidden}
.sx-bg{position:absolute;inset:0;background:rgba(16,8,18,.6);animation:sxf .25s ease}
.sx-card{position:relative;margin:min(10vh,80px) auto 0;width:min(720px,calc(100% - 24px));max-height:calc(100vh - min(10vh,80px) - 24px);display:flex;flex-direction:column;border-radius:26px;background:var(--bg);border:1px solid var(--line);box-shadow:0 40px 90px -30px var(--accent);overflow:hidden;animation:sxin .35s cubic-bezier(.22,1,.36,1)}
@keyframes sxf{from{opacity:0}}@keyframes sxin{from{opacity:0;transform:translateY(-10px) scale(.98)}}
.sx-top{display:flex;align-items:center;gap:12px;padding:14px 16px 14px 20px;border-bottom:1px solid var(--line)}
.sx-top svg{width:22px;height:22px;fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;flex:0 0 auto}
.sx .vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sx-top input,.sx-top input[type=search]{-webkit-appearance:none;appearance:none;flex:1 1 auto;min-width:0;min-height:0!important;border:0!important;border-radius:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;font:inherit;font-size:19px;font-weight:500;color:var(--fg);padding:6px 0!important}
.sx-x{min-height:40px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:700;padding:0 14px;cursor:pointer}
.sx-chips{display:flex;gap:6px;padding:12px 16px 2px;overflow-x:auto;scrollbar-width:none}
.sx-chips button,.sx-rec button{flex:0 0 auto;min-height:36px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--fg);font:inherit;font-size:13px;font-weight:700;padding:0 14px;cursor:pointer}
.sx-chips button[aria-pressed="true"]{background:var(--accent);border-color:transparent;color:#fff}
.sx-res{overflow:auto;padding:6px 10px 12px;flex:1 1 auto}
.sx-h{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:12px 10px 4px}
.sx-it{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 10px;border-radius:14px;text-decoration:none;color:var(--fg)}
.sx-it.on,.sx-it:hover{background:var(--accent-soft)}
.sx-ic{width:36px;height:36px;border-radius:11px;background:var(--plum-soft);display:grid;place-items:center;flex:0 0 auto}
.sx-ic svg{width:18px;height:18px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sx-t{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.sx-t b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-t small{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-cp{flex:0 0 auto;min-height:32px;border:0;border-radius:999px;padding:0 12px;background:var(--plum-soft);color:var(--accent);font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.sx-acts,.sx-rec{display:flex;gap:8px;flex-wrap:wrap;padding:4px 10px}
.sx-act{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;text-decoration:none;font-weight:800;font-size:14px}
.sx-act.on{outline:3px solid var(--fg);outline-offset:2px}
.sx-rec button.on{outline:2px solid var(--accent)}
.sx-empty{color:var(--muted);text-align:center;padding:30px 10px;margin:0}
.sx-foot{display:flex;gap:16px;padding:10px 18px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.sx-foot b{color:var(--fg)}.sx-tip{margin-left:auto}
@media (max-width:640px){.sx-card{margin:0;width:100%;height:100%;max-height:none;border-radius:0}.sx-foot{display:none}}
@media (prefers-reduced-motion:reduce){.sx-bg,.sx-card{animation:none}}
.sx-top input::-webkit-search-cancel-button{display:none}

/* ---------- menu + search (one panel) ---------- */
.sbtn-open kbd{font:inherit;font-size:11px;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:0 6px;margin-left:2px}
.nav .main .mbtn{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;border:0;cursor:pointer;font:inherit;font-weight:800;font-size:14px;padding:8px 16px;border-radius:999px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));margin-left:4px}
.nav .main .mbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.sx-top,.sx-chips,.sx-foot{flex:0 0 auto}
.sx-chips[hidden],.sx-chips button[hidden]{display:none}
.sx-chips{padding:10px 16px 4px}
.sx-chips em{font-style:normal;opacity:.75}
.sx-res mark{background:none;color:var(--accent);font-weight:900}
.sx-card{width:min(920px,calc(100% - 24px))}
.sx-it.on,.sx-it:hover,.sx-tile.on,.sx-tile:hover{background:var(--accent-soft)}
.sx-rec button.on{outline:0;background:var(--accent-soft);border-color:var(--accent)}
.sx-menu{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:2px 0 6px}
.sx-grp{display:flex;flex-direction:column;gap:2px;min-width:0}
.sx-tile{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 10px;border-radius:14px;text-decoration:none;color:var(--fg);transition:background .2s}
.sx-tile.here{box-shadow:inset 0 0 0 2px var(--accent)}
.sx-tile .sx-t b{font-size:14.5px}.sx-tile .sx-t small{font-size:12px}
.sx-ic svg,.sx-top svg{fill:none;stroke-linecap:round;stroke-linejoin:round}
.sx-foot{align-items:center}
.sx-theme{margin-left:auto;display:inline-flex;align-items:center;gap:6px;min-height:34px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--fg);font:inherit;font-size:12px;font-weight:700;padding:0 12px;cursor:pointer}
.sx-theme svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){.sx-menu{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .sbtn-open kbd{display:none}
  .nav .main .mbtn{flex:1 1 0;flex-direction:column;justify-content:center;gap:3px;font-size:11px;padding:6px 2px;border-radius:14px;min-width:0;margin:0}
  .nav .main .mbtn svg{width:22px;height:22px}
  .sx-menu{grid-template-columns:1fr;gap:4px}
  .sx-grp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .sx-grp .sx-h{grid-column:1/-1}
  .sx-tile{background:var(--plum-soft);min-height:56px}
  .sx-tile .sx-t small{display:none}
  .sx-card{width:100%}
  .sx-tile .sx-t b{white-space:normal;line-height:1.2;font-size:14px}
  .sx-foot{display:flex;justify-content:flex-end}.sx-foot>span{display:none}
}

/* Moods (beta) – set from the Control Room */
html[data-mood="cosy"] body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:linear-gradient(180deg,rgba(29,24,56,.28),rgba(58,42,90,.18));transition:opacity 1s}
html[data-mood="cosy"] .glow{filter:blur(40px) saturate(.7) hue-rotate(-30deg)}
.season.mood-cosy span{top:auto;animation:moodTwinkle ease-in-out infinite;color:#fff7c2;text-shadow:0 0 8px rgba(255,247,194,.8)}
@keyframes moodTwinkle{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:.9;transform:scale(1)}}
html[data-mood="party"] .glow{animation:moodHue 6s linear infinite}
@keyframes moodHue{to{filter:blur(30px) hue-rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.season.mood-cosy span,html[data-mood="party"] .glow{animation:none}}

/* 💌 feedback button + pop-up (every public page) */
.dk.fbk{font-size:19px;color:inherit}
.fblink a{font-weight:700}
.fbpop{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;background:rgba(20,8,24,.45);backdrop-filter:blur(3px);animation:fbIn .25s ease both}
.fbpop[hidden]{display:none}
@keyframes fbIn{from{opacity:0}}
.fbin{position:relative;width:min(460px,100%);max-height:calc(100vh - 32px);overflow:auto;box-sizing:border-box;padding:20px;border-radius:22px;background:var(--bg);color:var(--fg);border:1px solid var(--line);box-shadow:0 30px 60px -20px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:12px;animation:fbUp .35s cubic-bezier(.22,1,.36,1) both}
@keyframes fbUp{from{transform:translateY(14px)}}
.fbin .fbh{font-family:var(--display);font-size:22px;font-weight:800}
.fbin p{margin:0;line-height:1.5}
.fbin label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:13.5px}
.fbin select,.fbin textarea{font:inherit;font-weight:400;padding:10px 12px;border-radius:12px;border:2px solid var(--line);background:transparent;color:var(--fg)}
.fbin select option{color:#222}
.fbin textarea{min-height:110px;resize:vertical}.fbin textarea:focus,.fbin select:focus{outline:none;border-color:var(--accent)}
.fbx{position:absolute;right:12px;top:12px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--fg);cursor:pointer;font-size:14px}
.fbk2{display:flex;gap:8px;flex-wrap:wrap}.fbin [hidden]{display:none!important}.fbin input:not([type=file]){font:inherit;font-weight:400;padding:10px 12px;border-radius:12px;border:2px solid var(--line);background:transparent;color:var(--fg)}.fbin input:focus{outline:none;border-color:var(--accent)}.fbk2 button{min-height:40px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--fg);font:inherit;font-weight:800;cursor:pointer}
.fbk2 button[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:transparent}
.fbrow{display:flex;align-items:center;gap:10px}
.fbshot{flex-direction:row!important;align-items:center;gap:6px!important;min-height:38px;padding:0 13px;border-radius:999px;border:1px dashed var(--line);cursor:pointer;font-size:13px!important}
.fbgo{min-height:42px;padding:0 20px;border:0;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;font:inherit;font-weight:800;cursor:pointer;align-self:flex-start}
.fbgo:disabled{opacity:.6}
.fbmsg{color:#d6324a;font-weight:700;font-size:13.5px}
.fbnote{font-size:12px;color:var(--muted)}
/* ♿ skip link + reduced motion */
.skiplink{position:fixed;left:12px;top:-60px;z-index:10000;background:var(--accent,#e0457b);color:#fff!important;padding:10px 18px;border-radius:999px;font-weight:800;text-decoration:none;transition:top .2s}.skiplink:focus{top:12px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}#hearts{display:none!important}}

/* ☀️ light mode: stars, moons and seasonal bits need more colour and a soft glow to show on the pale background */
@keyframes moodTwinkleLight{0%,100%{opacity:.5;transform:scale(.75)}50%{opacity:1;transform:scale(1.05)}}
:root[data-theme="light"] .season.mood-cosy span{color:#b25bd9;text-shadow:0 0 6px rgba(255,122,168,.7),0 0 14px rgba(185,138,247,.55);animation-name:moodTwinkleLight}
:root[data-theme="light"] .season span{opacity:.95;filter:saturate(1.3) drop-shadow(0 2px 5px rgba(120,40,110,.3))}
:root[data-theme="light"] .season.mood-cosy span{filter:none}
:root[data-theme="light"] .glow{--glow-a:44%;--glow-b:36%}
:root[data-theme="light"][data-mood="cosy"] body::after{background:linear-gradient(180deg,rgba(185,138,247,.10),rgba(255,122,168,.08))!important}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .season.mood-cosy span{color:#b25bd9;text-shadow:0 0 6px rgba(255,122,168,.7),0 0 14px rgba(185,138,247,.55);animation-name:moodTwinkleLight}
:root:not([data-theme="dark"]) .season span{opacity:.95;filter:saturate(1.3) drop-shadow(0 2px 5px rgba(120,40,110,.3))}
:root:not([data-theme="dark"]) .season.mood-cosy span{filter:none}
:root:not([data-theme="dark"]) .glow{--glow-a:44%;--glow-b:36%}
:root:not([data-theme="dark"])[data-mood="cosy"] body::after{background:linear-gradient(180deg,rgba(185,138,247,.10),rgba(255,122,168,.08))!important}}

/* phones: keep the light/dark button off the 🔔 and 🧰 bells */
@media (max-width:700px){body:has(.nbell) .theme{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 92px);right:12px;width:38px;height:38px}}