/* KinderVids — new design, phase 1 (Oct 2026), "style A" from the approved mockups.
   Floating burgundy pill nav (phones/tablets), cream phone header with one labelled Search pill, a "← Back" button
   on the watch page, the new home top (greeting, emoji tiles, hero card, Keep watching), rounded cards and a watch page
   with big labelled buttons. Every element reads the --kv-* theme tokens below, so it follows Light / Dark (Me → Appearance). Loaded after app.css and ux.css; everything new lives in this file. */
@font-face{font-family:Fredoka;src:url(/fonts/fredoka.woff2) format("woff2");font-weight:300 700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2190-21FF,U+2212}
@font-face{font-family:Fredoka;src:url(/fonts/fredoka-he.woff2) format("woff2");font-weight:300 700;font-display:swap;unicode-range:U+0590-05FF}
:root{--kv-bur:#5c1628;--kv-cream:#f4ead7;--kv-gold:#f2b544;--kv-gold-ink:#3a1a05;--kv-round:Fredoka,Inter,"Noto Sans Hebrew",system-ui,sans-serif}

/* ---------- theme tokens (Light is the default; Dark = deep warm brown-black with cream text) ----------
   Phase-1 rules use only these and the site's own --bg/--text/--card variables, never fixed dark colors. */
:root,[data-theme=light]{--kv-btn:rgba(255,255,255,.72);--kv-ink:#5c1628;--kv-word:#5c1628;--kv-chip:#f3dec4;--kv-field:#fff;--kv-field-line:#eadcc6;
  --kv-soft:rgba(92,22,40,.05);--kv-soft2:rgba(92,22,40,.08);--kv-soft-line:rgba(92,22,40,.16);
  --kv-head:color-mix(in srgb,#f4ead7 94%,transparent);--kv-head-line:rgba(92,22,40,.08);--kv-head-text:#2d1a1c;--kv-head-muted:#6b4e4c;
  --kv-on-bg:#5c1628;--kv-on-fg:#f4ead7;--kv-logo:#5c1628;--kv-brand-heb:#9a7558;--kv-hero-bg:#5c1628;--kv-shadow:rgba(92,22,40,.45)}
[data-theme=dark]{--kv-btn:rgba(244,234,215,.1);--bg:#1b1214;--bg2:#211618;--card:#2a1d20;--card2:#33242a;--line:rgba(244,234,215,.1);--line2:rgba(244,234,215,.2);
  --text:#f6ece0;--muted:#d6c3b6;--dim:#a8908a;--glass:rgba(27,18,20,.86);
  --kv-ink:#f0cdbd;--kv-word:#f6ece0;--kv-chip:rgba(244,234,215,.12);--kv-field:rgba(244,234,215,.1);--kv-field-line:rgba(244,234,215,.26);
  --kv-soft:rgba(244,234,215,.06);--kv-soft2:rgba(244,234,215,.12);--kv-soft-line:rgba(244,234,215,.18);
  --kv-head:rgba(27,18,20,.94);--kv-head-line:rgba(244,234,215,.08);--kv-head-text:#f6ece0;--kv-head-muted:#d6c3b6;
  --kv-on-bg:#f4ead7;--kv-on-fg:#5c1628;--kv-logo:#7d2139;--kv-brand-heb:#cdb798;--kv-hero-bg:#2a1d20;--kv-shadow:rgba(0,0,0,.6)}

/* ---------- floating pill nav (phones, tablets and small laptops, up to 1179px) ---------- */
.kvpill-fade{display:none}
@media (max-width:1179px){
  nav.tabbar.kvpill{display:flex!important;position:fixed;z-index:50;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(10px + var(--sab));
    max-width:520px;margin:0 auto;height:72px;padding:5px;gap:2px;align-items:center;border-radius:36px;
    background:var(--kv-bur)!important;border:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    box-shadow:0 14px 30px -8px rgba(92,22,40,.55),0 3px 8px rgba(92,22,40,.25),inset 0 1px 0 rgba(255,255,255,.12)!important;transform:none!important}
  nav.tabbar.kvpill a{flex:1 1 0;min-width:0;height:62px;border-radius:31px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    color:rgba(244,234,215,.82)!important;font:700 11.5px/1.1 var(--kv-round);letter-spacing:0;white-space:nowrap;position:relative;
    transition:background .25s var(--ease),color .25s,flex-grow .3s var(--ease),box-shadow .25s;-webkit-tap-highlight-color:transparent}
  nav.tabbar.kvpill a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;padding:0 2px}
  nav.tabbar.kvpill a::before,nav.tabbar.kvpill a::after{display:none!important;content:none!important}
  nav.tabbar.kvpill a.on{background:var(--kv-cream);color:var(--kv-bur)!important;flex-grow:1.2;font-weight:700;box-shadow:0 4px 12px rgba(0,0,0,.22)}
  nav.tabbar.kvpill a:active{transform:scale(.94)}
  nav.tabbar.kvpill .kp-ic{display:block;line-height:0}
  nav.tabbar.kvpill svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:inherit!important}
  nav.tabbar.kvpill a.on svg{fill:rgba(92,22,40,.14)}
  nav.tabbar.kvpill a:focus-visible{outline:3px solid var(--kv-gold);outline-offset:-3px}
  .kvpill-fade{display:block;position:fixed;left:0;right:0;bottom:0;height:calc(96px + var(--sab));z-index:49;pointer-events:none;
    background:linear-gradient(to top,var(--bg) 30%,color-mix(in srgb,var(--bg) 0%,transparent))}
  main{padding-bottom:calc(112px + var(--sab))!important}
  .toast{bottom:calc(96px + var(--sab))!important}
  body.kid nav.tabbar.kvpill [data-nav=me] span{max-width:64px}
  /* the watch page has its own "← Back" button and full-width player: no pill there */
  body.on-watch nav.tabbar.kvpill,body.on-watch .kvpill-fade{display:none!important}
  body.on-watch main{padding-bottom:calc(28px + var(--sab))!important}
}
@media (max-width:360px){nav.tabbar.kvpill a{font-size:10.5px}nav.tabbar.kvpill svg{width:23px;height:23px}}

/* ---------- header ---------- */
.kv-back{display:none}
body.on-watch #topbar .kv-back{display:inline-flex;align-items:center;align-self:center;margin-block:0;gap:7px;flex:none;height:46px;padding:0 18px 0 13px;border-radius:23px;
  background:var(--kv-soft2);border:1px solid var(--kv-soft-line);color:var(--kv-ink);font:700 16px/1 var(--kv-round)}
body.on-watch #topbar .kv-back svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
[dir=rtl] .kv-back svg{transform:scaleX(-1)}
body.on-watch #topbar .kv-back:active{transform:scale(.95)}
/* desktop header nav: the same burgundy pill with a cream bubble, icon + word on every item */
#topbar .nav a svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
@media (max-width:1179px){#topbar .nav{display:none!important}#topbar .top-actions .upload-top{display:none!important}}
@media (min-width:761px) and (max-width:1179px){#topbar .kids-top{width:auto!important;padding-inline:10px 14px!important}#topbar .kids-top span{display:inline!important}}
@media (min-width:1180px){
  #topbar{gap:20px}
  #topbar .nav{background:rgba(0,0,0,.18);padding:3px;border-radius:999px;gap:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
  #topbar .nav a,#topbar .nav .nav-more{min-height:46px;padding:0 13px;gap:7px;font-size:15.5px;color:rgba(244,234,215,.86)}
  #topbar .nav a svg{width:19px;height:19px}
  #topbar .top-actions .search{min-width:210px}
  #topbar .nav a.on,#topbar .nav .nav-more.on{background:var(--kv-cream)!important;color:var(--kv-bur)!important;box-shadow:0 3px 10px rgba(0,0,0,.2)}
}
@media (min-width:1180px) and (max-width:1365px){#topbar .nav a,#topbar .nav .nav-more{padding:0 11px}#topbar .top-actions .upload-top{display:none!important}#topbar .top-actions .search{min-width:180px}}
/* phones: a header in the theme's own colours (cream in Light, warm dark in Dark) — logo + wordmark, and one labelled "Search" pill */
@media (max-width:760px){
  body:not(.shorts-on) #topbar,body:not(.shorts-on) #topbar.solid{
    background:var(--kv-head)!important;border-bottom:1px solid var(--kv-head-line)!important;
    box-shadow:0 6px 18px -16px var(--kv-shadow)!important;backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important}
  #topbar{--text:var(--kv-head-text);--muted:var(--kv-head-muted);color:var(--kv-head-text)}
  #topbar .brand .word{color:var(--kv-word)!important}
  #topbar .brand .heb{color:var(--kv-brand-heb)!important}
  #topbar .brand .mark .tile{fill:var(--kv-logo)!important;stroke:none}
  #topbar .kids-top,#topbar #bellBtn:not(.dot),#topbar .upload-top{display:none!important}
  .kv-hello{padding-top:4px}
  #topbar .top-actions{margin-inline-start:auto}
  #searchOpen.kv-spill{display:inline-flex!important;align-items:center;gap:7px;width:auto;height:46px;padding:0 18px 0 14px;border-radius:23px;
    background:var(--kv-field);color:var(--kv-ink);border:1px solid var(--kv-field-line);box-shadow:0 2px 8px rgba(60,20,30,.08);font:700 16px/1 var(--kv-round)}
  #searchOpen.kv-spill svg{width:20px;height:20px;color:var(--kv-ink);stroke:currentColor;fill:none;stroke-width:2.4}
  /* watch page: Back · logo tile · Search, on the same themed header */
  body.on-watch #topbar .brand .word,body.on-watch #topbar .brand .heb{display:none!important}
}
@media (max-width:380px){#searchOpen.kv-spill{padding:0 14px 0 11px;font-size:15px}body.on-watch #topbar .kv-back{padding:0 14px 0 10px}}

/* ---------- home: greeting, emoji tiles, hero card, Keep watching ---------- */
.kv-hello{padding:20px var(--pad) 2px}
.kv-hchip{display:inline-flex;align-items:center;gap:6px;font:700 13px/1 var(--kv-round);color:var(--kv-ink);background:var(--kv-chip);padding:7px 13px 7px 11px;border-radius:20px}
.kv-hello h1{margin:12px 0 0;font:600 clamp(28px,7.6vw,44px)/1.08 var(--kv-round);letter-spacing:-.3px;color:var(--text)}
.kv-hello h1 b{display:block;font-weight:600;color:var(--kv-ink)}
.kv-tiles{display:flex;gap:12px;overflow-x:auto;padding:16px var(--pad) 8px;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:var(--pad)}
.kv-tiles::-webkit-scrollbar{display:none}
.kv-tile{flex:none;width:70px;display:flex;flex-direction:column;align-items:center;gap:7px;scroll-snap-align:start;-webkit-tap-highlight-color:transparent}
.kv-sq{width:64px;height:64px;border-radius:21px;background:var(--c);display:grid;place-items:center;font-size:31px;line-height:1;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.07),0 6px 14px -8px var(--kv-shadow);transition:transform .2s var(--ease)}
.kv-tile:hover .kv-sq{transform:translateY(-2px)}.kv-tile:active .kv-sq{transform:scale(.93)}
.kv-tl{font:600 13px/1.1 var(--kv-round);color:var(--text);white-space:nowrap}
@media (min-width:900px){.kv-hello{padding-top:26px}.kv-tiles{gap:16px;flex-wrap:wrap;overflow:visible}.kv-tile{width:84px}.kv-sq{width:76px;height:76px;border-radius:24px;font-size:36px}.kv-tl{font-size:14px}}
.kv-hcard{position:relative;margin:14px var(--pad) 10px;border-radius:26px;overflow:hidden;aspect-ratio:16/10.4;max-height:460px;background:var(--kv-hero-bg);
  box-shadow:0 18px 34px -14px var(--kv-shadow)}
.kv-hc-img,.kv-hc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kv-hc-tag{position:absolute;top:14px;inset-inline-start:14px;z-index:2;background:var(--kv-gold);color:var(--kv-gold-ink);font:600 13px/1 var(--kv-round);padding:7px 12px;border-radius:12px;letter-spacing:.3px}
.kv-hc-info{position:absolute;inset-inline:0;bottom:0;z-index:2;display:flex;align-items:center;gap:10px;padding:12px 12px 12px 18px;color:#fff;
  background:rgba(48,10,22,.66);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border-top:1px solid rgba(255,255,255,.16)}
[dir=rtl] .kv-hc-info{padding:12px 18px 12px 12px}
.kv-hc-tx{flex:1;min-width:0}
.kv-hc-tx small{display:block;font:600 11.5px/1.2 var(--kv-round);letter-spacing:1px;text-transform:uppercase;color:var(--kv-gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kv-hc-tx h2{margin:3px 0 0;font:600 19px/1.15 var(--kv-round);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kv-hc-acts{display:flex;gap:8px;flex:none}
.kv-hc-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:60px;height:60px;padding:0 6px;border-radius:20px;
  font:700 12.5px/1 var(--kv-round);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s}
.kv-hc-btn:active{transform:scale(.94)}
.kv-hc-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.kv-hc-save{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.32)}
.kv-hc-save.on{background:rgba(242,181,68,.25);border-color:rgba(242,181,68,.6)}
.kv-hc-save .ic{line-height:0}
.kv-hc-play{background:var(--kv-cream);color:var(--kv-bur);min-width:66px;box-shadow:0 6px 16px rgba(0,0,0,.3)}
.kv-hc-play svg{fill:currentColor;stroke:none}
@media (min-width:600px){.kv-hcard{aspect-ratio:16/8}.kv-hc-tx h2{font-size:22px}}
/* section headings and cards: rounder, softer */
.kvh .kv-sec-h h2,.kvh .shelf-h h2{font-family:var(--kv-round)!important;font-weight:600!important;letter-spacing:-.2px}
.kvh .kv-etile .kv-th,.kvh .kv-rtile .kv-art,.kvh .tile .thumb{border-radius:20px!important;box-shadow:0 8px 18px -10px rgba(60,20,30,.5)}
.kvh .kv-etile .kv-th img,.kvh .kv-rtile .kv-art img{border-radius:inherit}
.kvh .kv-etile h3,.kvh .kv-rtile b{font-weight:700}
.kvh .kv-ktab{min-height:48px}
.kv-keep{margin-top:6px}

/* ---------- watch page: follows the theme (the video frame itself stays black) ---------- */
body.on-watch .foot{display:none}
body.on-watch .w-title{font-family:var(--kv-round);font-weight:600;letter-spacing:-.2px}
body.on-watch .w-actions{gap:10px;flex-wrap:wrap}
body.on-watch .w-actions .pill{min-height:50px;padding:0 18px;border-radius:25px;font:700 15px/1 var(--kv-round);gap:8px;
  background:var(--kv-btn)!important;border:1px solid var(--kv-soft-line)!important;color:var(--text)!important}
body.on-watch .w-actions .pill svg{width:21px;height:21px}
body.on-watch .w-actions .pill.on{background:var(--kv-on-bg)!important;color:var(--kv-on-fg)!important;border-color:var(--kv-on-bg)!important}
body.on-watch .w-actions .pill.on svg{color:var(--kv-on-fg)}
body.on-watch .w-actions .kv-save{background:rgba(242,181,68,.16)!important;border-color:rgba(242,181,68,.5)!important}
body.on-watch .w-actions .kv-save.on{background:var(--kv-gold)!important;color:var(--kv-gold-ink)!important;border-color:var(--kv-gold)!important}
#likeBtn .lk-n::before{content:"·";margin-inline-end:6px;opacity:.7}
body.on-watch .sub-btn{min-height:46px;padding:0 20px;border-radius:23px;font-family:var(--kv-round);font-weight:700}
body.on-watch .desc-box{background:var(--kv-soft);border-radius:20px}
body.on-watch .side h3{font:600 20px/1.2 var(--kv-round)!important;display:flex;align-items:center;justify-content:space-between;gap:10px}
body.on-watch .side .auto{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 6px 0 14px;border-radius:22px;background:var(--kv-soft2);font:600 14px/1 var(--kv-round);color:var(--muted)}
[dir=rtl] body.on-watch .side .auto{padding:0 14px 0 6px}
body.on-watch .side .ucard{background:var(--kv-soft);border:1px solid var(--kv-soft-line);border-radius:20px;padding:8px;margin-bottom:10px;transition:background .2s}
body.on-watch .side .ucard:hover{background:var(--kv-soft2)}
body.on-watch .side .ucard .thumb{border-radius:14px!important;overflow:hidden}
body.on-watch .side .ucard h4{font-weight:700;font-size:15px;line-height:1.25}
body.on-watch .player-wrap{border-radius:20px}
@media (max-width:760px){body.on-watch .player-wrap{border-radius:0}
  /* phone: four big labelled buttons in a 2 × 2 grid — Like · Save / Share · More */
  body.on-watch .w-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;overflow:visible!important}
  body.on-watch .w-actions .pill,body.on-watch .w-actions .w-dots{width:auto;min-width:0;justify-content:center;min-height:52px;padding:0 12px;font-size:15px;gap:8px;white-space:nowrap}
  body.on-watch .w-actions .theater-btn{display:none!important}}
body.on-watch .w-actions .w-dots{width:auto;padding:0 18px}

/* ---------- Me page: a big, labelled Light / Dark switch (icon + word, 56px tall, no PIN) ---------- */
.kv-theme{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;margin:0 0 16px;padding:14px;padding-inline-start:18px;border-radius:24px;
  background:var(--card);border:1px solid var(--line);box-shadow:0 10px 24px -18px var(--kv-shadow)}
.kv-th-t{flex:1 1 150px;min-width:0}
.kv-th-t b{display:block;font:600 19px/1.2 var(--kv-round);color:var(--text)}
.kv-th-t small{display:block;margin-top:3px;font-size:14px;color:var(--muted)}
.kv-th-sw{flex:1 1 230px;display:flex;gap:6px;padding:5px;border-radius:34px;background:var(--kv-soft2);border:1px solid var(--kv-soft-line)}
.kv-th-sw button{flex:1 1 0;min-width:0;min-height:56px;display:flex;align-items:center;justify-content:center;gap:9px;padding:0 14px;border:0;border-radius:29px;
  background:transparent;color:var(--text);font:700 17px/1 var(--kv-round);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .2s,color .2s,transform .15s}
.kv-th-sw button:active{transform:scale(.95)}
.kv-th-sw button.on{background:var(--kv-on-bg);color:var(--kv-on-fg);box-shadow:0 4px 12px rgba(0,0,0,.2)}
.kv-th-sw button:focus-visible{outline:3px solid var(--kv-gold);outline-offset:2px}
.kv-th-ic{font-size:23px;line-height:1}