/* Savora — Bubbles Aro theme: bright bubbles (default) and calm night. © 2026 Bubbles Aro — MIT */
:root{--bg:#0f1220;--bg2:#151a2e;--card:#1a2036;--line:rgba(142,162,255,.2);--gold:#8ea2ff;--gold2:#c7d2ff;--silver:#cfd3da;--txt:#f4f6ff;--mut:#9aa3c2;
  --goldg:linear-gradient(135deg,#7f9bff,#4f6bed 45%,#7c5cf0);--veg:#3fa34d;--nv:#c8342a;--r:18px;--shadow:0 12px 30px rgba(0,0,0,.45)}
[data-theme=light]{--bg:#f6f7fb;--bg2:#fff;--card:#fff;--line:#e4e7ef;--gold:#4f6bed;--txt:#0f172a;--mut:#5b6475;--shadow:0 1px 2px rgba(15,23,42,.04),0 10px 28px rgba(15,23,42,.07)}
.hero:before,.hero:after{content:"";position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),rgba(255,255,255,.08) 60%,transparent 70%);pointer-events:none}.hero:before{width:160px;height:160px;right:22%;top:-50px}.hero:after{width:70px;height:70px;right:8%;top:30px}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--txt);font:15px/1.5 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}
body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
h1,h2,h3{font-family:Inter,"Segoe UI",system-ui,sans-serif;font-weight:700;letter-spacing:.2px;margin:0}
.gold{background:var(--goldg);-webkit-background-clip:text;background-clip:text;color:transparent}
/* header */
.top{position:sticky;top:0;z-index:20;display:flex;gap:14px;align-items:center;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:rgba(15,18,32,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
[data-theme=light] .top{background:rgba(255,255,255,.9)}
.brand{display:flex;gap:10px;align-items:center;min-width:0}.brand img{width:40px;height:40px;border-radius:11px;box-shadow:0 4px 14px rgba(79,107,237,.35)}
.brand b{display:block;font:700 19px Inter,"Segoe UI",system-ui,sans-serif;background:var(--goldg);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.1}.brand small{color:var(--mut);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}
.search{flex:1;display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:8px 14px;max-width:560px;margin-left:auto}
.search input{flex:1;background:none;border:0;outline:0;color:var(--txt);font-size:15px;min-width:0}
.side{display:none;gap:4px}.side a{padding:8px 12px;border-radius:12px;color:var(--mut);font-weight:600;white-space:nowrap}.side a.on{color:var(--txt);background:rgba(79,107,237,.14)}
.tabs{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;justify-content:space-around;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:rgba(15,18,32,.94);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
[data-theme=light] .tabs{background:rgba(255,255,255,.95)}
.tabs a{display:flex;flex-direction:column;align-items:center;font-size:20px;color:var(--mut);padding:4px 10px;border-radius:12px}.tabs a span{font-size:11px;font-weight:600}.tabs a.on{color:var(--gold)}
@media (min-width:900px){.side{display:flex}.tabs{display:none}body{padding-bottom:0}}
@media (max-width:560px){.brand span{display:none}}
main{max-width:1280px;margin:0 auto;padding:16px}
/* hero */
.hero{position:relative;overflow:hidden;border-radius:26px;padding:26px 24px;background:radial-gradient(120% 140% at 85% 20%,rgba(124,92,240,.28),transparent 55%),linear-gradient(135deg,#4f6bed,#7c5cf0);border:1px solid var(--line);box-shadow:var(--shadow);color:#f4f6ff}
.hero h1{font-size:clamp(26px,5vw,42px);line-height:1.1}.hero p{color:#e3e8ff;max-width:560px;margin:10px 0 16px}
.hero .chefmini{position:absolute;right:10px;bottom:-10px;width:clamp(120px,24vw,230px);opacity:.95}
.chips{display:flex;gap:8px;flex-wrap:wrap}.chip{border:1px solid var(--line);background:var(--bg2);border-radius:999px;padding:7px 14px;font-weight:600;font-size:13.5px;color:var(--txt)}
.chip.on{background:var(--goldg);color:#ffffff;border-color:transparent}
.hero .chip{background:rgba(0,0,0,.25);color:#f4f6ff}.hero .chip.on{color:#ffffff}
.sec{display:flex;align-items:end;justify-content:space-between;margin:26px 2px 12px}.sec h2{font-size:22px}.sec a{color:var(--gold);font-weight:600;font-size:14px}
/* category tiles */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.cat{position:relative;border-radius:var(--r);padding:16px 14px;background:linear-gradient(160deg,var(--card),var(--bg2));border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;transition:transform .2s}
.cat:hover{transform:translateY(-3px)}.cat .ic{font-size:30px;width:52px;height:52px;display:grid;place-items:center;border-radius:16px;background:rgba(79,107,237,.14);margin-bottom:10px}
.cat b{display:block;font-size:15px}.cat small{color:var(--mut)}
.row{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}.row .card{min-width:220px;max-width:220px;scroll-snap-align:start}
/* recipe cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
@media (max-width:480px){.grid{grid-template-columns:repeat(2,1fr);gap:10px}.card .ft span:nth-child(3){display:none}}
.card{position:relative;border-radius:var(--r);background:var(--card);border:1px solid var(--line);overflow:hidden;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(30,40,90,.18)}
.card .pic{aspect-ratio:4/3;background:#10162c}.card .pic svg{width:100%;height:100%;display:block}
.card .bd{padding:10px 12px 12px;flex:1;display:flex;flex-direction:column;gap:4px}.card h3{font-size:15.5px;line-height:1.25}
.card .fl{color:var(--mut);font-size:12.5px}.card .ft{display:flex;gap:8px;font-size:12px;color:var(--mut);margin-top:auto;flex-wrap:wrap}.card .ft span{background:rgba(79,107,237,.1);padding:2px 8px;border-radius:999px}
.dot{position:absolute;top:10px;left:10px;width:18px;height:18px;border:2px solid var(--veg);border-radius:4px;background:#fff;display:grid;place-items:center}.dot i{width:8px;height:8px;border-radius:50%;background:var(--veg)}
.dot.nv{border-color:var(--nv)}.dot.nv i{background:var(--nv);border-radius:0;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:8px solid var(--nv);background:none}
.dot.vg{border-color:#1f8a5a}.dot.vg i{background:#1f8a5a}.dot.eg{border-color:#d49a1a}.dot.eg i{background:#d49a1a}
.fav{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(0,0,0,.45);font-size:16px;display:grid;place-items:center}
.more{display:block;margin:18px auto;padding:12px 22px}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--bg2);padding:11px 18px;border-radius:14px;font-weight:700}
.btn.gold{background:var(--goldg);color:#ffffff;border:0;box-shadow:0 8px 22px rgba(79,107,237,.35);-webkit-text-fill-color:#fff}
.empty{text-align:center;color:var(--mut);padding:50px 10px}
/* recipe page */
.rp{display:grid;gap:18px}@media (min-width:980px){.rp{grid-template-columns:1.05fr 1fr;align-items:start}}
.rp .pic{border-radius:24px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}.rp .pic svg{display:block;width:100%}
.rp h1{font-size:clamp(24px,4vw,34px)}.meta{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}
.meta div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px;text-align:center}.meta b{display:block;font-size:17px}.meta small{color:var(--mut);font-size:11.5px}
.tabsw{display:flex;gap:8px;margin:16px 0 12px}.tabsw button{flex:1;border:1px solid var(--line);background:var(--bg2);border-radius:14px;padding:12px;font-weight:700}
.tabsw button.on{background:var(--goldg);color:#ffffff;border-color:transparent}
.ings{list-style:none;padding:0;margin:0;display:grid;gap:6px}.ings li{display:flex;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px 12px}
.ings li.done{opacity:.45;text-decoration:line-through}.ings .q{min-width:74px;font-weight:700;color:var(--gold)}.ings .e{font-size:18px}
.steps{padding:0;margin:0;list-style:none;counter-reset:s;display:grid;gap:10px}.steps li{position:relative;padding:12px 14px 12px 52px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.steps li:before{counter-increment:s;content:counter(s);position:absolute;left:12px;top:12px;width:28px;height:28px;border-radius:50%;background:var(--goldg);color:#ffffff;font-weight:800;display:grid;place-items:center;font-size:13px}
.steps small{color:var(--mut)}.srv{display:inline-flex;align-items:center;gap:6px}.srv button{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--bg2);font-weight:800}
.nut{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}.nut div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px;text-align:center;font-size:12px}.nut b{display:block;font-size:15px}
/* settings */
.set{max-width:720px;margin:0 auto;display:grid;gap:14px}.box{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:6px 16px;box-shadow:var(--shadow)}
.box h3{font-size:15px;color:var(--gold);padding:12px 0 4px;font-family:inherit;text-transform:uppercase;letter-spacing:1.2px}
.it{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line)}.it:first-of-type{border-top:0}.it small{display:block;color:var(--mut)}
.sw{position:relative;width:50px;height:30px;flex:none}.sw input{opacity:0;width:0;height:0}.sw span{position:absolute;inset:0;background:#c3cbe2;border-radius:30px;transition:.2s}
.sw span:after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:.2s}.sw input:checked+span{background:var(--gold)}.sw input:checked+span:after{transform:translateX(20px)}
/* ---------------- update overlay */
.upd[hidden]{display:none!important}
.upd{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(10,14,30,.82);backdrop-filter:blur(10px);animation:fade .3s}
.upd .card2{width:min(360px,90vw);text-align:center;padding:28px 24px;border-radius:26px;background:linear-gradient(160deg,#1b2244,#10162c);border:1px solid var(--line);box-shadow:0 30px 70px rgba(0,0,0,.6);color:#f4f6ff}
.ring{position:relative;width:150px;height:150px;margin:0 auto 14px}.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .tr{stroke:rgba(79,107,237,.15)}.ring .pg{stroke:url(#ug);stroke-linecap:round;transition:stroke-dashoffset .3s}
.ring .spin{animation:spin 1.4s linear infinite;transform-origin:center}
.ring .pot{position:absolute;inset:0;display:grid;place-items:center;font-size:46px}.ring .pot span{animation:bob 1.2s ease-in-out infinite}
.ring .pct{position:absolute;left:0;right:0;bottom:30px;font-weight:800;color:var(--gold2);font-size:14px}
.upd h3{font-size:20px;margin-bottom:6px}.upd p{color:#c3cbe6;margin:0 0 16px;font-size:14px}.upd .acts{display:flex;gap:10px;justify-content:center}
.sparkle{position:absolute;inset:0;pointer-events:none}.sparkle i{position:absolute;width:6px;height:6px;border-radius:50%;background:#c7d2ff;animation:rise 1.6s ease-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes bob{50%{transform:translateY(-6px) rotate(-6deg)}}@keyframes fade{from{opacity:0}}
@keyframes rise{from{transform:translateY(20px) scale(.5);opacity:0}30%{opacity:1}to{transform:translateY(-70px) scale(1);opacity:0}}
/* ---------------- Chef Kuber show */
.ck{border-radius:24px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:#10162c}
.ck-stage{position:relative}.ck-scene{display:block;width:100%;height:auto}
.ck-sub{position:absolute;left:10px;right:10px;bottom:10px;background:rgba(10,14,30,.78);backdrop-filter:blur(6px);border:1px solid rgba(79,107,237,.35);border-radius:16px;padding:9px 12px;color:#f4f6ff}
.ck-step{font-size:11.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#c7d2ff}.ck-text{margin:3px 0 0;font-size:14px;line-height:1.4}
.ck-timer-b{position:absolute;top:10px;right:10px;background:var(--goldg);color:#ffffff;font-weight:800;border-radius:999px;padding:4px 10px;font-size:12px}.ck-timer-b:empty{display:none}
.ck-bar{display:flex;gap:6px;align-items:center;padding:10px;background:#141a33}.ck-b{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#1e2547;color:#f4f6ff;font-size:16px;flex:none}
.ck-main{width:52px;height:52px;background:var(--goldg);color:#ffffff;border:0;font-size:20px}.ck-prog{flex:1;height:6px;border-radius:6px;background:rgba(79,107,237,.18);overflow:hidden}.ck-prog i{display:block;height:100%;width:0;background:var(--goldg);transition:width .4s}
.ck .st{opacity:0;transition:opacity .35s}.ck.at-stove .st-stove,.ck.at-board .st-board,.ck.at-bowl .st-bowl,.ck.at-mixer .st-mixer,.ck.at-oven .st-oven,.ck.at-freezer .st-freezer,.ck.at-dough .st-dough,.ck.at-pour .st-pour,.ck.at-plate .st-plate{opacity:1}
.ck .ck-steam,.ck .ck-bubbles,.ck .ck-sizzle,.ck .ck-whistle,.ck .ck-spoon,.ck .ck-flame{opacity:0;transition:opacity .3s}
.ck.at-stove .ck-flame{opacity:1;animation:flick .25s infinite alternate}
.ck.act-boil .ck-bubbles,.ck.act-simmer .ck-bubbles,.ck.act-pressure .ck-bubbles,.ck.act-steam .ck-bubbles{opacity:1}.ck-bubbles circle{animation:bub 1s infinite}.ck-bubbles circle:nth-child(2){animation-delay:.3s}.ck-bubbles circle:nth-child(3){animation-delay:.6s}
.ck.act-boil .ck-steam,.ck.act-simmer .ck-steam,.ck.act-steam .ck-steam,.ck.act-pressure .ck-steam,.ck.act-saute .ck-steam{opacity:1}.ck-steam path{animation:stm 2s infinite}.ck-steam path:nth-child(2){animation-delay:.5s}.ck-steam path:nth-child(3){animation-delay:1s}
.ck.act-fry .ck-sizzle,.ck.act-saute .ck-sizzle,.ck.act-grill .ck-sizzle{opacity:1}.ck-sizzle circle{animation:siz .5s infinite}
.ck.act-fry .ck-pot,.ck.act-grill .ck-pot{animation:toss .5s ease-in-out infinite;transform-origin:270px 180px}
.ck.act-stir .ck-spoon,.ck.act-saute .ck-spoon,.ck.act-simmer .ck-spoon,.ck.act-add .ck-spoon,.ck.act-fry .ck-spoon{opacity:1;animation:stir 1.2s linear infinite;transform-origin:270px 140px}
.ck.act-pressure .ck-whistle{opacity:1;animation:whis 1.4s infinite}
.ck-knife{animation:chop .35s ease-in-out infinite;transform-origin:300px 170px}.ck-bits rect{animation:bits .7s infinite}
.ck-whisk{animation:whk .5s ease-in-out infinite alternate;transform-origin:270px 130px}.ck-jar{animation:jar .12s infinite alternate;transform-origin:270px 176px}
.ck-glow{animation:glow 1.6s ease-in-out infinite}.ck-snow text{animation:snow 2.4s linear infinite}.ck-pin{animation:pin .9s ease-in-out infinite alternate}
.ck-jug{transform-origin:316px 80px;animation:jug 1s ease-in-out infinite alternate}.ck-stream{animation:strm .6s infinite}.ck-fill{transform-origin:270px 202px;animation:fillup 3s ease-out infinite}
.ck-spark text{animation:twk 1.4s infinite}.ck-spark text:nth-child(2){animation-delay:.5s}.ck-spark text:nth-child(3){animation-delay:.9s}
.ck-dish{width:190px;height:142px}.ck-dish svg{width:100%;height:100%;border-radius:16px}.st-plate.intro .ck-dish{animation:pop .6s ease-out}
.ck-fly{opacity:0}.ck-fly.go{animation:fly 1.6s ease-in-out forwards}
.ck-mouth .ck-m-open{opacity:0}.ck.talking .ck-m-open{animation:talk .22s infinite alternate}.ck.talking .ck-m-smile{opacity:0}
.ck-eyes{animation:blink 4s infinite;transform-origin:96px 134px}.ck-head{animation:nod 3s ease-in-out infinite;transform-origin:96px 180px}
.ck.playing .ck-armR{animation:arm 1s ease-in-out infinite;transform-origin:140px 214px}.ck.at-plate.playing .ck-armR{animation:wave .6s ease-in-out infinite alternate}
.ck.at-board.playing .ck-armR{animation:arm .35s ease-in-out infinite}
@keyframes flick{to{transform:scaleY(1.15);opacity:.85}}@keyframes bub{0%{transform:translateY(0);opacity:.7}100%{transform:translateY(-10px);opacity:0}}
@keyframes stm{0%{transform:translateY(8px);opacity:0}40%{opacity:.6}100%{transform:translateY(-16px);opacity:0}}@keyframes siz{50%{transform:translateY(-6px);opacity:.3}}
@keyframes toss{50%{transform:rotate(-4deg) translateY(-6px)}}@keyframes stir{to{transform:rotate(360deg)}}@keyframes whis{0%,60%{opacity:1}80%{opacity:.2}}
@keyframes chop{50%{transform:rotate(18deg)}}@keyframes bits{50%{transform:translateX(-4px)}}@keyframes whk{to{transform:rotate(22deg)}}@keyframes jar{to{transform:translateX(2px) rotate(1deg)}}
@keyframes glow{50%{opacity:.7}}@keyframes snow{from{transform:translateY(-8px);opacity:0}30%{opacity:1}to{transform:translateY(40px);opacity:0}}@keyframes pin{to{transform:translateX(18px)}}
@keyframes jug{to{transform:rotate(-24deg)}}@keyframes strm{50%{opacity:.6}}@keyframes fillup{from{transform:scaleY(.2)}to{transform:scaleY(1)}}@keyframes twk{50%{opacity:.2;transform:scale(.7)}}
@keyframes pop{from{transform:scale(.6);opacity:0}}@keyframes fly{0%{opacity:0;transform:translate(0,0)}15%{opacity:1}100%{opacity:0;transform:translate(118px,20px) scale(.6)}}
@keyframes talk{from{transform:scaleY(.3)}to{transform:scaleY(1)}}@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}@keyframes nod{50%{transform:rotate(2deg)}}
@keyframes arm{50%{transform:rotate(-10deg)}}@keyframes wave{to{transform:rotate(-24deg)}}
.ck-m-open{transform-origin:96px 166px}
.today{display:flex;gap:14px;align-items:center;margin:4px 0 16px;padding:10px;border-radius:18px;background:rgba(0,0,0,.28);border:1px solid rgba(124,92,240,.45);max-width:560px}
.today .pic{width:120px;flex:none;border-radius:12px;overflow:hidden}.today .pic svg{display:block;width:100%;height:auto}
.today .tx{display:flex;flex-direction:column;gap:3px;min-width:0}.today small{color:#c7d2ff;font-weight:700;font-size:12px}.today b{font:700 20px Inter,"Segoe UI",system-ui,sans-serif;color:#fff}.today span{color:#e3e8ff;font-size:13px}
.ck-en{margin:3px 0 0;font-size:11.5px;color:#b9c3e3}.ck-en:empty{display:none}
.hero .chip.on{background:var(--goldg);color:#ffffff}
@media (max-width:700px){.ck-sub{position:static;border-radius:0;border-width:1px 0 0;background:#10162c}.ck-text{font-size:13.5px}}

/* hero on the bubble gradient */
.hero .gold{background:linear-gradient(90deg,#ffffff,#c9fff0);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .btn.gold{background:#fff;color:#3f58d8;-webkit-text-fill-color:#3f58d8;box-shadow:0 10px 26px rgba(15,23,60,.25)}
.hero .chip{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35)}.hero .chip.on{background:#fff;color:#3f58d8}
.today{background:rgba(15,23,60,.22);border-color:rgba(255,255,255,.35)}.today small{color:#e3e9ff}