/* Видеопоздравления BusyKids — общий стиль (по демо Андрея busykids-darek: Poppins + Lora, цвета бренда). */
:root{--g:#bbcf4f;--g2:#a4b932;--r:#e56a54;--r2:#d65a44;--o:#ff9d6e;--b:#005687;--t:#5cb8b2;--ink:#1d2b36;--mut:#6b7a86;--ln:#e8edf0;--cream:#fbf8f3;--card:#fff;--rad:22px;--sh:0 10px 30px rgba(29,43,54,.08)}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:var(--cream);color:var(--ink);font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
body{min-height:100svh;overflow-x:hidden}
button,input,textarea{font:inherit;color:inherit}
.wrap{max-width:480px;margin:0 auto;padding:16px 18px 40px;position:relative}
header.top{display:flex;justify-content:center;padding:6px 0 14px}
header.top img{height:30px;width:auto}
.kick{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--t)}
h1{font-size:28px;line-height:1.15;font-weight:800;color:var(--b);margin:6px 0 8px;letter-spacing:-.01em}
h2{font-size:21px;line-height:1.2;font-weight:800;color:var(--b)}
.lead{color:var(--mut);font-size:15px;line-height:1.5}
.small{font-size:12.5px;color:var(--mut);line-height:1.5}
.center{text-align:center}
.card{background:var(--card);border-radius:var(--rad);box-shadow:var(--sh);padding:18px}
.stack>*+*{margin-top:12px}
.hidden{display:none!important}
.fade{animation:fd .5s ease both}@keyframes fd{from{opacity:0;transform:translateY(10px)}}

/* поля */
label.f{display:block;font-size:13px;font-weight:600;margin:14px 0 6px}
label.f span{font-weight:400;color:var(--mut)}
input.i,textarea.i{width:100%;border:1.5px solid var(--ln);background:#fff;border-radius:14px;padding:13px 14px;font-size:16px;outline:none;transition:border-color .2s,box-shadow .2s}
textarea.i{min-height:76px;resize:vertical;line-height:1.4}
input.i:focus,textarea.i:focus{border-color:var(--t);box-shadow:0 0 0 4px rgba(92,184,178,.15)}

/* кнопки */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:0;border-radius:40px;padding:16px 22px;font-weight:700;font-size:16px;cursor:pointer;text-decoration:none;transition:transform .12s ease,filter .2s,background .2s}
.btn:active{transform:scale(.98)}
.btn svg{width:20px;height:20px;flex:none}
.btn.pr{background:var(--r);color:#fff;box-shadow:0 8px 20px rgba(229,106,84,.28)}
.btn.pr:hover{filter:brightness(1.04)}
.btn.gr{background:var(--g);color:#fff;box-shadow:0 8px 20px rgba(164,185,50,.28)}
.btn.gh{background:#fff;color:var(--ink);border:1.5px solid var(--ln)}
.btn[disabled]{opacity:.5;pointer-events:none}
.row{display:flex;gap:10px}.row>*{flex:1}
.link{background:none;border:0;color:var(--b);font-weight:600;font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px}

/* камера / видео */
.stage{position:relative;border-radius:26px;overflow:hidden;background:#1d2b36;aspect-ratio:3/4;box-shadow:var(--sh)}
.stage video{width:100%;height:100%;object-fit:cover;display:block;background:#1d2b36}
.stage video.mirror{transform:scaleX(-1)}
.pill{position:absolute;left:12px;top:12px;background:rgba(255,255,255,.92);border-radius:30px;padding:6px 12px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:7px}
.pill i{width:9px;height:9px;border-radius:50%;background:var(--r);display:none}
.rec .pill i{display:block;animation:bl 1s infinite}@keyframes bl{50%{opacity:.2}}
.flip{position:absolute;right:12px;top:12px;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;cursor:pointer}
.flip svg{width:22px;height:22px}
.tip{position:absolute;left:0;right:0;bottom:14px;text-align:center;color:#fff;font-size:14px;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.45);padding:0 16px}
.recbar{display:flex;align-items:center;justify-content:center;gap:26px;margin:18px 0 6px}
.recbtn{position:relative;width:84px;height:84px;border-radius:50%;border:0;background:none;cursor:pointer}
.recbtn svg{position:absolute;inset:0;transform:rotate(-90deg)}
.recbtn .dot{position:absolute;inset:14px;border-radius:50%;background:var(--r);transition:all .25s ease;box-shadow:0 6px 18px rgba(229,106,84,.4)}
.rec .recbtn .dot{inset:27px;border-radius:9px}
.ring-bg{stroke:#fff;opacity:.9}.ring{stroke:var(--r);transition:stroke-dashoffset .25s linear}
.side{width:46px;height:46px}

/* прогресс загрузки */
.prog{height:10px;background:var(--ln);border-radius:10px;overflow:hidden;margin:16px 0 8px}
.prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--g),var(--t));border-radius:10px;transition:width .2s}

/* сохранено / готово */
.ok{display:inline-flex;align-items:center;gap:6px;background:#f1f6dc;color:#6c7d1c;font-weight:700;font-size:13px;border-radius:30px;padding:6px 12px}
.qrbox{background:#fff;border-radius:24px;padding:18px;box-shadow:var(--sh);text-align:center}
.qrbox .qr{width:210px;height:210px;margin:6px auto 10px}
.qrbox .qr svg{width:100%;height:100%}
.qrbox .btn{font-size:14px;padding:13px 10px;gap:6px}
.url{font-size:13px;color:var(--b);word-break:break-all;background:#f3f7f9;border-radius:12px;padding:9px 12px;margin-top:6px}
.note{background:#fff7f2;border:1px dashed #f5c9b6;border-radius:16px;padding:12px 14px;font-size:13px;line-height:1.5;color:#7a4b3a}
.secret{font-size:12px;color:var(--mut)}
.secret code{font-size:11.5px;word-break:break-all}

/* получатель */
#conf{position:fixed;inset:0;pointer-events:none;z-index:50;width:100%;height:100%}
.intro{min-height:calc(100svh - 70px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.gift{width:190px;height:190px;margin:30px 0 28px;position:relative;cursor:pointer;animation:wob 2.6s ease-in-out infinite}
.gift .box{position:absolute;left:20px;right:20px;bottom:0;height:120px;border-radius:14px;background:var(--r)}
.gift .box:before,.gift .lid:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:22px;margin-left:-11px;background:var(--g)}
.gift .lid{position:absolute;left:8px;right:8px;top:48px;height:36px;border-radius:12px;background:#ef7d68;transform-origin:15% 100%;transition:transform .7s cubic-bezier(.5,-.4,.3,1.4)}
.gift .bow{position:absolute;left:50%;top:14px;width:70px;height:40px;margin-left:-35px}
.gift .bow:before,.gift .bow:after{content:"";position:absolute;top:0;width:34px;height:34px;border:9px solid var(--g);border-radius:50% 50% 0 50%}
.gift .bow:before{left:0;transform:rotate(-20deg)}.gift .bow:after{right:0;transform:rotate(110deg)}
.gift.open{animation:none}
.gift.open .lid{transform:translate(-30px,-80px) rotate(-38deg)}
.gift .glow{position:absolute;left:50%;bottom:40px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#fff6c9;box-shadow:0 0 60px 40px rgba(255,230,140,.0);transition:box-shadow .6s ease .15s}
.gift.open .glow{box-shadow:0 0 80px 60px rgba(255,230,140,.9)}
@keyframes wob{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-5deg)}90%{transform:rotate(5deg)}95%{transform:rotate(-3deg)}}
.gift.static{animation:none;opacity:.85}
.player{display:none}
.vid{position:relative;margin:14px 0 10px;border-radius:26px;overflow:hidden;background:#1d2b36;box-shadow:var(--sh);transform-origin:50% 30%}
.vid video{width:100%;max-height:72svh;object-fit:contain;display:block;background:#1d2b36}
.vid.pop{animation:pop .7s cubic-bezier(.2,1.4,.4,1) both}@keyframes pop{from{opacity:0;transform:scale(.6) translateY(30px)}}
.who{position:absolute;left:12px;bottom:12px;background:#fff;border-radius:30px;padding:7px 14px;font-size:13px;font-weight:600}
.who b{color:var(--r)}
.again{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(29,43,54,.35);border:0;cursor:pointer}
.again span{background:#fff;border-radius:40px;padding:12px 20px;font-weight:700;font-size:15px;display:flex;gap:8px;align-items:center}
.vid.ended .again{display:flex}
.bar{height:4px;background:var(--ln);border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--g)}
.msg{font-family:Lora,Georgia,serif;font-style:italic;font-size:20px;line-height:1.45;text-align:center;color:#6b4a2b;margin:20px 6px}
.prod{display:flex;gap:12px;align-items:center;background:#fff;border-radius:18px;padding:10px;margin-top:20px;text-decoration:none;color:inherit;box-shadow:var(--sh)}
.prod img{width:64px;height:64px;object-fit:contain;border-radius:12px;background:#f6f6f4}
.prod b{font-size:13.5px;display:block;line-height:1.35}.prod span{font-size:12px;color:var(--mut)}
footer.f{text-align:center;color:var(--mut);font-size:11.5px;margin-top:26px;line-height:1.6}
@media (prefers-reduced-motion:reduce){.gift{animation:none}.vid.pop{animation:none}}