/* Сонмик — новый вид (прототип 07). Стили перенесены из прототипа; убраны только рамка телефона и демо-панель. */
:root{
  --night-top:#121A5C; --night-field:#4C4CBC; --night-low:#C7B8F3;
  --day-top:#4658D6;   --day-field:#FBD0C8;  --day-low:#FFE8E6;
  --gold:#FFC94F; --peach:#FFB08A; --navy:#1D2372;
  --font:-apple-system,BlinkMacSystemFont,"Onest","Segoe UI",Roboto,system-ui,sans-serif;
  --ease:cubic-bezier(.33,1,.68,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{height:100%;font-size:calc(100vw / 39)}
@media (min-width:600px){html{font-size:10px}}
body{height:100%;overflow:hidden;background:#BDB1EE;font-family:var(--font);-webkit-font-smoothing:antialiased;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button{font-family:inherit;cursor:pointer}
button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hide{display:none!important}

.app{
  position:relative;height:100%;overflow:hidden;touch-action:none;max-width:600px;margin:0 auto;
  --band:29.8rem;
  --inset-top:max(env(safe-area-inset-top,0px),calc(var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px)));
  --inset-bottom:max(env(safe-area-inset-bottom,0px),var(--tg-safe-area-inset-bottom,0px));
  --ink:#fff; --ink-2:rgba(255,255,255,.86); --label:rgba(255,255,255,.93);
  --bar:#B9AEF7; --nav-ink:#4B46AE; --nav-on:#232270; --gap:1.5rem;
  --nz-btn:linear-gradient(160deg,rgba(255,255,255,.34),rgba(255,255,255,.14)); --nz-btn-sh:inset 0 1.5px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.2),0 .8rem 1.6rem -.6rem rgba(18,20,96,.6);
  --nz-ico:#fff; --nz-ring:rgba(255,255,255,.7); --nz-wave:rgba(255,255,255,.9);
  --q-bg:rgba(255,255,255,.12); --q-ink:rgba(255,255,255,.94); --q-sh:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(255,255,255,.14);
  --sh-bg:linear-gradient(180deg,rgba(64,62,170,.9),rgba(38,36,128,.94)); --sh-ink:#fff; --sh-ink2:rgba(255,255,255,.7); --sh-hl:rgba(255,255,255,.35); --sh-line:rgba(255,255,255,.12);
  --sh-field:rgba(255,255,255,.08); --sh-chip:rgba(255,255,255,.14); --sh-chip-on:#fff; --sh-chip-on-ink:#2A2880; --sh-warn:#FFC2A8;
  --sh-primary:linear-gradient(96deg,#6A5FE6,#8B7CF0 45%,#C79EF5); --sh-primary-sh:rgba(150,120,255,.7);
}
.app[data-mode="day"]{
  --ink:#1D2372; --ink-2:#3D4093; --label:#2A2D7E;
  --bar:#fff; --nav-ink:#6A63C8; --nav-on:#1F206C;
  --nz-btn:linear-gradient(160deg,#fff,#FFF1EA); --nz-btn-sh:inset 0 1.5px 0 #fff,0 .8rem 1.6rem -.6rem rgba(214,120,110,.55);
  --nz-ico:#F08C78; --nz-ring:rgba(240,140,120,.6); --nz-wave:#F2A08C;
  --q-bg:rgba(255,255,255,.55); --q-ink:#2A2D7E; --q-sh:inset 0 1px 0 #fff,0 .6rem 1.4rem -.8rem rgba(206,118,116,.5);
  --sh-bg:linear-gradient(180deg,rgba(255,250,247,.94),rgba(255,238,236,.96)); --sh-ink:#1D2372; --sh-ink2:#5E5F9E; --sh-hl:#fff; --sh-line:rgba(255,255,255,.7);
  --sh-field:rgba(108,99,196,.07); --sh-chip:rgba(108,99,196,.1); --sh-chip-on:#1F206C; --sh-chip-on-ink:#fff; --sh-warn:#D2604A;
  --sh-primary:linear-gradient(96deg,#FFB65A,#F59A78 45%,#E383A4); --sh-primary-sh:rgba(238,122,136,.7);
}

/* ───────── Небо ───────── */
.scene{position:absolute;inset:0;overflow:hidden;opacity:0;visibility:hidden;z-index:1}
.scene.is-in{opacity:1;visibility:visible}
.scene:not(.is-in) *{animation-play-state:paused!important}
.sky{position:absolute;inset:0}
.scene-night .sky{background:
  radial-gradient(27rem 19rem at 0% calc(var(--band) - 2.6rem),rgba(255,152,150,.6),rgba(226,128,212,.34) 46%,transparent 74%),
  radial-gradient(22rem 22rem at 76% calc(var(--band) - 13rem),rgba(92,102,222,.5),transparent 72%),
  linear-gradient(180deg,#121A5C 0,#181F6C calc(var(--band)*.34),#20257E calc(var(--band)*.6),#2E2E96 calc(var(--band)*.8),
    #4A44B6 var(--band),#4242B2 calc(var(--band) + 9rem),#4A46B6 calc(var(--band) + 22rem),#6A60CE calc(var(--band) + 33rem),
    #A294EA calc(var(--band) + 41rem),#C7B8F3 calc(var(--band) + 48rem))}
.scene-day .sky{background:
  radial-gradient(21rem 21rem at 74% calc(var(--band) - 12.6rem),rgba(255,246,196,.96),rgba(255,228,164,.56) 38%,rgba(255,216,172,.2) 70%,transparent 100%),
  radial-gradient(30rem 17rem at 0% calc(var(--band) - 1.6rem),rgba(255,218,170,.7),transparent 72%),
  linear-gradient(180deg,#4658D6 0,#5E6BE0 calc(var(--band)*.3),#8B8CEA calc(var(--band)*.55),#C8B5EE calc(var(--band)*.78),
    #F7CDD0 var(--band),#FBD0C8 calc(var(--band) + 9rem),#F3CBD4 calc(var(--band) + 22rem),#F8D6D8 calc(var(--band) + 33rem),
    #FCE4E4 calc(var(--band) + 42rem),#FFE8E6 100%)}
.field-glow{position:absolute;left:-6rem;top:calc(var(--band) + 6rem);width:34rem;height:26rem;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.2),transparent);mix-blend-mode:soft-light;
  animation:glowDrift 26s ease-in-out infinite alternate}
@keyframes glowDrift{to{transform:translate3d(16rem,5rem,0) scale(1.15)}}
.stars{position:absolute;inset:0}
.star{position:absolute;border-radius:50%;background:#fff;box-shadow:0 0 .5rem rgba(255,255,255,.9);animation:twinkle 4s ease-in-out infinite}
.spark{position:absolute;animation:sparkle 5.2s ease-in-out infinite;filter:drop-shadow(0 0 .5rem rgba(255,244,214,.95))}
.spark svg{display:block;width:100%;height:100%}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
@keyframes sparkle{0%,100%{opacity:.55;transform:scale(.78) rotate(0)}50%{opacity:1;transform:scale(1.08) rotate(18deg)}}
.meteor{position:absolute;width:9rem;height:.16rem;border-radius:1rem;opacity:0;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95));animation:meteor 13s 4s linear infinite}
.meteor.m2{animation-duration:19s;animation-delay:11s;width:6.5rem}
@keyframes meteor{0%{opacity:0;transform:rotate(150deg) translateX(-6rem)}2%{opacity:1}7%{opacity:0;transform:rotate(150deg) translateX(15rem)}100%{opacity:0;transform:rotate(150deg) translateX(15rem)}}
.moon{position:absolute;right:4.7rem;width:10.4rem;height:10.4rem;top:max(calc(var(--band) - 18.4rem),calc(var(--inset-top) + 5rem))}
.rise,.float{position:absolute;inset:0}
.float{animation:float 9s ease-in-out infinite}
@keyframes float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-.45rem,0)}}
.moon-halo{position:absolute;inset:-7rem;border-radius:50%;
  background:radial-gradient(closest-side,rgba(170,164,255,.2),rgba(150,140,250,.1) 50%,transparent 74%);animation:halo 6s ease-in-out infinite}
@keyframes halo{0%,100%{opacity:.72;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
.moon svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sun{position:absolute;right:4.9rem;width:10.8rem;height:10.8rem;top:max(calc(var(--band) - 18rem),calc(var(--inset-top) + 5.2rem))}
.sun-rays{position:absolute;left:50%;top:50%;width:44rem;height:44rem;margin:-22rem 0 0 -22rem;animation:rayPulse 7s ease-in-out infinite}
.sun-rays::before,.sun-rays::after{content:"";position:absolute;inset:0;border-radius:50%;animation:spin 170s linear infinite}
.sun-rays::before{
  background:repeating-conic-gradient(from 6deg,rgba(255,252,232,0) 0deg,rgba(255,252,232,.85) 2.1deg,rgba(255,252,232,0) 4.6deg,rgba(255,252,232,0) 40deg);
  -webkit-mask-image:radial-gradient(circle,transparent 12.6%,#000 14%,rgba(0,0,0,.42) 34%,transparent 50%);
          mask-image:radial-gradient(circle,transparent 12.6%,#000 14%,rgba(0,0,0,.42) 34%,transparent 50%)}
.sun-rays::after{
  background:repeating-conic-gradient(from 26deg,rgba(255,250,224,0) 0deg,rgba(255,250,224,.62) 1.4deg,rgba(255,250,224,0) 3deg,rgba(255,250,224,0) 40deg);
  -webkit-mask-image:radial-gradient(circle,transparent 12.6%,#000 14%,rgba(0,0,0,.3) 26%,transparent 38%);
          mask-image:radial-gradient(circle,transparent 12.6%,#000 14%,rgba(0,0,0,.3) 26%,transparent 38%);
  animation-duration:240s;animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rayPulse{0%,100%{opacity:.78}50%{opacity:1}}
.sun-bloom{position:absolute;inset:-6.5rem;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,238,170,.78),rgba(255,214,150,.3) 52%,transparent 76%);animation:halo 7s ease-in-out infinite}
.sun-disc{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#FFF6BE 0,#FFE680 26%,#FFD257 56%,#FFBC42 84%,#FFAE3C 100%);
  box-shadow:inset -.6rem -.9rem 1.8rem rgba(255,150,60,.42),inset .5rem .6rem 1.4rem rgba(255,255,236,.75),0 0 2.6rem rgba(255,214,120,.8)}
.bank{position:absolute;left:-3rem;width:45rem;height:33rem;top:calc(var(--band) - 23rem);pointer-events:none}
.bank-in{position:absolute;inset:0}
.bank svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:drift 38s ease-in-out infinite alternate}
.bank:nth-of-type(odd) svg{animation-duration:52s;animation-direction:alternate-reverse}
@keyframes drift{from{transform:translate3d(-.9rem,0,0)}to{transform:translate3d(.9rem,0,0)}}
.scene.enter .rise{animation:riseIn 1.6s var(--ease-out) both}
.scene.leave .rise{animation:setOut 1.1s var(--ease-io) both}
.scene.enter .bank-in{animation:bankIn 1.5s var(--ease-out) both;animation-delay:calc(var(--k,0)*70ms)}
.scene.enter .stars{animation:fadeIn 1.4s .35s both}
.scene.enter .sun-rays{animation:raysIn 1.8s .4s var(--ease-out) both,rayPulse 7s 2.2s ease-in-out infinite}
@keyframes riseIn{from{transform:translate3d(0,9rem,0) scale(.8);opacity:.15}}
@keyframes setOut{to{transform:translate3d(0,7rem,0) scale(.9);opacity:.25}}
@keyframes bankIn{from{transform:translate3d(0,2.6rem,0);opacity:.2}}
@keyframes fadeIn{from{opacity:0}}
@keyframes raysIn{from{opacity:0;transform:scale(.55) rotate(-24deg)}}
.wipe-ring{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;mix-blend-mode:screen}

/* ───────── Интерфейс ───────── */
.ui{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;
  padding:var(--inset-top) 0 max(1.2rem,calc(var(--inset-bottom) + .6rem))}
.topbar{flex:none;height:6.2rem;display:flex;align-items:center;padding:0 1.8rem 0 2.5rem;position:relative}
.logo{width:3.9rem;height:3.1rem;flex:none;filter:drop-shadow(0 .3rem .8rem rgba(255,170,200,.45))}
.brand{margin-left:1rem;color:#fff;font-weight:600;font-size:2.25rem;letter-spacing:-.01em;text-shadow:0 .1rem .8rem rgba(30,30,110,.25)}
.hero{flex:1 1 0;min-height:11.5rem;display:flex;flex-direction:column;justify-content:flex-end;padding:0 1.2rem 4.9rem 4.2rem}
.hero .sub{font-size:2.2rem;line-height:1.2;font-weight:500;letter-spacing:-.01em;color:var(--ink);transition:color .7s var(--ease-io);text-shadow:0 .2rem 1.4rem rgba(24,24,100,.22)}
.today{margin-top:.6rem;font-size:1.4rem;line-height:1.3;font-weight:500;color:var(--ink);opacity:.66;font-variant-numeric:tabular-nums;transition:color .7s var(--ease-io)}
.intro .today{animation:textIn .9s var(--ease-out) .58s both}
.app[data-mode="day"] .hero .sub{text-shadow:0 .1rem 1.2rem rgba(255,255,255,.55)}
.sw{display:grid}
.sw>*{grid-area:1/1;transition:opacity .42s var(--ease),transform .6s var(--ease-out),filter .42s var(--ease);transition-delay:calc(var(--i,0)*55ms)}
.app[data-mode="night"] .sw>.d{opacity:0;transform:translate3d(0,.9rem,0);filter:blur(.5rem)}
.app[data-mode="day"] .sw>.n{opacity:0;transform:translate3d(0,-.9rem,0);filter:blur(.5rem)}
.tick{animation:tick .5s var(--ease-out)}
@keyframes tick{from{opacity:0;transform:translate3d(0,.6rem,0);filter:blur(.3rem)}}

.cards{flex:none;padding:0 1.75rem;display:flex;flex-direction:column;gap:var(--gap)}
.card{position:relative;isolation:isolate;border-radius:2.8rem;height:9.7rem;
  -webkit-backdrop-filter:blur(1.4rem) saturate(1.35);backdrop-filter:blur(1.4rem) saturate(1.35);transition:transform .2s var(--ease)}
.card.pressed{transform:scale(.98)}
.skin{position:absolute;inset:0;z-index:-1;border-radius:inherit;transition:opacity .75s var(--ease-io)}
.app[data-mode="night"] .skin-d,.app[data-mode="day"] .skin-n{opacity:0}
.card .skin::after,.gcard>.skin::after,.pseg>.skin::after,.dnav>.skin::after,.st-report>.skin::after{content:"";position:absolute;left:16%;right:16%;top:0;height:1.5px;border-radius:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent)}
.card .skin-n,.gcard>.skin-n,.pseg>.skin-n,.dnav>.skin-n,.st-report>.skin-n{
  background:linear-gradient(118deg,rgba(104,102,228,.52) 0,rgba(76,76,198,.42) 46%,rgba(120,102,228,.52) 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.4),inset 0 0 0 1px rgba(255,255,255,.14),inset 0 -1.2rem 2.4rem rgba(170,134,255,.2),
    0 1.6rem 2.6rem -1rem rgba(18,20,96,.62)}
.card .skin-d,.gcard>.skin-d,.pseg>.skin-d,.dnav>.skin-d,.st-report>.skin-d{
  background:linear-gradient(118deg,rgba(255,247,242,.8) 0,rgba(255,233,229,.62) 52%,rgba(255,242,238,.76) 100%);
  box-shadow:inset 0 1.5px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.72),inset 0 -1.2rem 2.4rem rgba(255,188,170,.2),
    0 1.6rem 2.6rem -1.1rem rgba(206,118,116,.46)}
.ic{position:relative;flex:none}
.ic svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transition:opacity .45s var(--ease),transform .8s var(--ease-out)}
.app[data-mode="night"] .ic .d{opacity:0;transform:rotate(-70deg) scale(.4)}
.app[data-mode="day"] .ic .n{opacity:0;transform:rotate(70deg) scale(.4)}
.card-main{display:flex;align-items:center;padding:0 2rem 0 2.3rem}
.card-main .ic{width:3.6rem;height:3.6rem;margin-right:1.8rem}
.card-main>div:not(.ic){min-width:0}
.fc-sep{flex:none;width:1px;align-self:stretch;margin:2.2rem 1.6rem 2.2rem auto;background:var(--label);opacity:.22;transition:background .7s var(--ease-io)}
.fc .lbl{font-size:1.2rem;line-height:1.5rem;letter-spacing:-.02em;white-space:nowrap}
.card-main .fc .val{font-size:2.3rem;margin-top:.45rem;letter-spacing:-.03em}
.card-main .ic .n{filter:drop-shadow(0 0 .7rem rgba(255,190,170,.6))}
.card-main .ic .d{filter:drop-shadow(0 0 .7rem rgba(255,200,90,.7))}
.lbl{font-size:1.55rem;line-height:1.2;font-weight:500;color:var(--label);transition:color .7s var(--ease-io)}
.val{color:var(--ink);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .7s var(--ease-io)}
.val u{text-decoration:none;font-size:.84em;margin:0 .22em 0 .16em;letter-spacing:-.01em}
.val u:last-child{margin-right:0}
.card-main .val{font-size:2.7rem;line-height:1.1;margin-top:.5rem}
.colon{position:relative;top:-.07em;margin:0 .02em}

.noise{display:flex;align-items:center;gap:1.6rem;padding:0 1.6rem 0 1.6rem;cursor:pointer}
.nz-txt{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.noise .lbl{font-size:1.45rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.noise .lbl .st{opacity:.68;font-weight:400;font-size:.88em;font-variant-numeric:tabular-nums}
.noise .lbl .st::before{content:"· "}
.nz-play{flex:none;position:relative;width:6rem;height:6rem;border-radius:50%;border:0;padding:0;
  background:var(--nz-btn);box-shadow:var(--nz-btn-sh);transition:transform .2s var(--ease),background .7s var(--ease-io)}
.nz-play:active{transform:scale(.92)}
.nz-gear{flex:none;width:max(5rem,46px);height:max(5rem,46px);border:0;border-radius:50%;padding:0;display:grid;place-items:center;color:var(--label);
  background:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 0 1px rgba(255,255,255,.16);
  transition:transform .2s var(--ease),background .7s var(--ease-io),color .7s var(--ease-io)}
.app[data-mode="day"] .nz-gear{background:rgba(255,255,255,.6);box-shadow:inset 0 1px 0 #fff,0 .5rem 1.2rem -.6rem rgba(214,120,110,.45)}
.nz-gear svg{width:2.3rem;height:2.3rem}
.nz-gear:active{transform:scale(.9) rotate(-20deg)}
.nz-play::before{content:"";position:absolute;inset:-.5rem;border-radius:50%;border:1.5px solid var(--nz-ring);opacity:0}
.noise.on .nz-play::before{animation:nzRing 2.4s ease-out infinite}
@keyframes nzRing{0%{transform:scale(.9);opacity:.85}100%{transform:scale(1.3);opacity:0}}
.nz-play svg{position:absolute;left:50%;top:50%;width:2.4rem;height:2.4rem;margin:-1.2rem 0 0 -1.2rem;fill:var(--nz-ico);
  transition:opacity .3s var(--ease),transform .45s var(--ease-out),fill .7s var(--ease-io)}
.nz-play .pa{opacity:0;transform:scale(.5) rotate(-90deg)}
.noise.on .nz-play .pl{opacity:0;transform:scale(.5) rotate(90deg)}
.noise.on .nz-play .pa{opacity:1;transform:none}
.nz-eq{margin-top:.8rem;height:2.2rem;display:flex;align-items:center;gap:.42rem;overflow:hidden}
.nz-eq i{flex:none;width:.32rem;height:var(--h);border-radius:.3rem;background:var(--nz-wave);opacity:.55;transform:scaleY(.16);
  transition:transform .7s var(--ease-out),opacity .5s var(--ease),background-color .7s var(--ease-io);transition-delay:calc(var(--k)*28ms)}
.noise.on .nz-eq i{opacity:.95;transform:scaleY(1);animation:nzBar var(--t) ease-in-out calc(var(--k)*-.23s) infinite alternate}
@keyframes nzBar{0%{transform:scaleY(.28)}100%{transform:scaleY(1)}}

.quick{flex:none;display:flex;justify-content:center;gap:1rem;margin-top:var(--gap)}
.qbtn{display:inline-flex;align-items:center;gap:.7rem;height:3.8rem;padding:0 1.7rem 0 1.4rem;border:0;border-radius:2rem;
  font-size:1.45rem;font-weight:600;letter-spacing:-.01em;color:var(--q-ink);background:var(--q-bg);box-shadow:var(--q-sh);
  -webkit-backdrop-filter:blur(1.2rem);backdrop-filter:blur(1.2rem);
  transition:transform .16s var(--ease),background .7s var(--ease-io),color .7s var(--ease-io)}
.qbtn svg{width:1.7rem;height:1.7rem;flex:none}
.qbtn.pressed{transform:scale(.95)}

/* шторка */
.sheet-wrap{position:absolute;inset:0;z-index:9;visibility:hidden;pointer-events:none}
.sheet-wrap.open{visibility:visible;pointer-events:auto}
.sheet-dim{position:absolute;inset:0;background:rgba(14,12,60,.38);opacity:0;transition:opacity .45s var(--ease)}
.sheet-wrap.open .sheet-dim{opacity:1}
.sheet{position:absolute;left:.8rem;right:.8rem;bottom:max(.8rem,calc(var(--inset-bottom) + .2rem));padding:1rem 2rem 2rem;border-radius:3.4rem;
  color:var(--sh-ink);background:var(--sh-bg);box-shadow:inset 0 1.5px 0 var(--sh-hl),inset 0 0 0 1px var(--sh-line),0 2.4rem 5rem -1.6rem rgba(16,14,70,.6);
  -webkit-backdrop-filter:blur(2.4rem) saturate(1.4);backdrop-filter:blur(2.4rem) saturate(1.4);
  transform:translate3d(0,112%,0);transition:transform .6s var(--ease-out);
  max-height:calc(100% - var(--inset-top) - 2rem);overflow-y:auto;overscroll-behavior:contain}
.sheet-wrap.open .sheet{transform:translate3d(0,var(--drag,0px),0)}
.sheet.dragging{transition:none}
.sheet-grab{display:block;width:4rem;height:.5rem;border-radius:.3rem;margin:0 auto 1.4rem;background:var(--sh-ink2);opacity:.45}
.sheet h2{font-size:2.2rem;font-weight:700;letter-spacing:-.02em;text-align:center}
.sheet-sub{margin-top:.4rem;text-align:center;font-size:1.4rem;color:var(--sh-ink2)}
.sheet-body{margin-top:2rem;display:flex;flex-direction:column;gap:1.2rem}
.stepper{display:flex;align-items:center;gap:1rem;padding:1rem 1rem 1rem 1.8rem;border-radius:2.4rem;background:var(--sh-field)}
.st-lbl{flex:1;font-size:1.5rem;font-weight:500;color:var(--sh-ink2)}
.st-val{min-width:9.6rem;text-align:center;font-size:2.8rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.st-val small{display:block;font-size:1.15rem;font-weight:500;letter-spacing:0;color:var(--sh-ink2);margin-top:.1rem;min-height:1.4rem}
.st-btn{width:4.4rem;height:4.4rem;border:0;border-radius:50%;flex:none;color:var(--sh-ink);background:var(--sh-chip);
  font-size:2.4rem;font-weight:500;line-height:1;transition:transform .14s var(--ease),opacity .2s}
.st-btn:active{transform:scale(.9)}
.st-btn:disabled{opacity:.3}
.sheet .chips{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:0}
.chip{border:0;border-radius:2rem;padding:.9rem 1.4rem;font-size:1.35rem;font-weight:600;color:var(--sh-ink);background:var(--sh-chip);
  transition:background .25s var(--ease),color .25s var(--ease),transform .14s var(--ease)}
.chip:active{transform:scale(.95)}
.chip.on{background:var(--sh-chip-on);color:var(--sh-chip-on-ink)}
.sheet-label{font-size:1.3rem;font-weight:500;color:var(--sh-ink2);margin:.6rem 0 -.4rem .6rem}
.sheet .chips.four{grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}
.chips.four .chip{padding:.9rem .2rem;font-size:1.3rem}
.snd{display:flex;align-items:center;gap:.9rem;text-align:left;padding:1.1rem 1.2rem}
.snd i{width:1rem;height:1rem;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1.5px currentColor;opacity:.55;transition:all .25s var(--ease)}
.snd.on i{opacity:1;box-shadow:inset 0 0 0 .5rem currentColor}
.tgl{display:flex;align-items:center;gap:1.2rem;padding:1.1rem 1.2rem 1.1rem 1.8rem;border-radius:2.2rem;background:var(--sh-field);cursor:pointer}
.tgl b{flex:1;font-size:1.5rem;font-weight:500}
.tgl b small{display:block;margin-top:.2rem;font-size:1.2rem;font-weight:400;color:var(--sh-ink2)}
.switch{position:relative;flex:none;width:5.2rem;height:3.1rem;border:0;border-radius:2rem;background:var(--sh-chip);transition:background .3s var(--ease)}
.switch::after{content:"";position:absolute;left:.35rem;top:.35rem;width:2.4rem;height:2.4rem;border-radius:50%;background:#fff;
  box-shadow:0 .2rem .6rem rgba(20,18,80,.3);transition:transform .35s var(--ease-out)}
.switch[aria-checked="true"]{background:var(--sh-primary)}
.switch[aria-checked="true"]::after{transform:translateX(2.1rem)}
.sheet-note{text-align:center;font-size:1.4rem;color:var(--sh-ink2);min-height:1.9rem}
.sheet-note b{color:var(--sh-ink);font-weight:700}
.sheet-note.warn{color:var(--sh-warn)}
.sheet-actions{display:grid;grid-template-columns:1fr 1.6fr;gap:1rem;margin-top:2rem}
.sheet.one-btn .sheet-actions{grid-template-columns:1fr}
.sbtn[hidden]{display:none}
.sbtn{height:5.4rem;border:0;border-radius:2.8rem;font-size:1.7rem;font-weight:600;transition:transform .14s var(--ease),opacity .25s}
.sbtn:active{transform:scale(.97)}
.sbtn.ghost{color:var(--sh-ink);background:var(--sh-chip)}
.sbtn.primary{color:#fff;background:var(--sh-primary);box-shadow:inset 0 .2rem .1rem rgba(255,255,255,.6),0 1rem 2rem -.8rem var(--sh-primary-sh)}
.sbtn:disabled{opacity:.45}
.sdel{display:block;margin:1.4rem auto 0;border:0;background:none;font-size:1.45rem;font-weight:600;color:var(--sh-warn)}
.sfield{display:block;width:100%;padding:1.3rem 1.6rem;border:0;border-radius:2rem;background:var(--sh-field);color:var(--sh-ink);font:600 1.8rem var(--font);text-align:center;outline:none;-webkit-user-select:text;user-select:text}
.sfield:focus{box-shadow:inset 0 0 0 1.5px var(--sh-ink2)}

/* главная кнопка */
.cta-well{flex:none;position:relative;isolation:isolate;margin:var(--gap) .9rem 0;padding:1.25rem 1.15rem;border-radius:5.2rem}
.cta-well>.skin-n{background:linear-gradient(180deg,rgba(38,38,148,.58),rgba(64,60,178,.4));
  box-shadow:inset 0 .4rem 1.1rem rgba(12,14,80,.6),inset 0 -1px 0 rgba(255,255,255,.16),0 1px 0 rgba(255,255,255,.06)}
.cta-well>.skin-d{background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.12));
  box-shadow:inset 0 .3rem 1rem rgba(222,146,140,.24),inset 0 -1px 0 rgba(255,255,255,.65)}
.cta{position:relative;display:block;width:100%;height:7.9rem;border:0;border-radius:4rem;background:none;color:#fff;
  font-weight:600;font-size:2.4rem;letter-spacing:-.012em;transition:transform .16s var(--ease)}
.cta.pressed{transform:scale(.972)}
.cta-glow{position:absolute;inset:0;border-radius:inherit;transition:opacity .75s var(--ease-io);animation:glowPulse 4.6s ease-in-out infinite}
.cta-glow.n{box-shadow:0 0 2.4rem rgba(196,168,255,.6),0 1.1rem 2.6rem -.6rem rgba(255,172,196,.6)}
.cta-glow.d{box-shadow:0 0 2.2rem rgba(255,196,140,.62),0 1.2rem 2.6rem -.7rem rgba(238,122,136,.62)}
.app[data-mode="night"] .cta-glow.d,.app[data-mode="day"] .cta-glow.n{opacity:0;animation:none}
@keyframes glowPulse{0%,100%{opacity:.72}50%{opacity:1}}
.cta-face{position:absolute;inset:0;border-radius:inherit;overflow:hidden;isolation:isolate}
.cta-face .skin{z-index:0}
.cta-face .skin-n{background:
  radial-gradient(70% 120% at 46% -10%,rgba(84,92,226,.95),rgba(84,92,226,0) 70%),
  radial-gradient(60% 90% at 100% 100%,rgba(255,190,176,.9),rgba(255,190,176,0) 70%),
  linear-gradient(96deg,#6A5FE6 0,#7672EE 36%,#9E88F3 68%,#D4A8F6 100%);
  box-shadow:inset 0 .2rem .1rem rgba(255,255,255,.8),inset 0 -.35rem .7rem rgba(255,198,206,.85),inset 0 0 0 1.5px rgba(255,255,255,.38),inset 0 1.4rem 1.8rem -1rem rgba(255,255,255,.3)}
.cta-face .skin-d{background:
  radial-gradient(60% 110% at 20% 0,rgba(255,214,120,.85),rgba(255,214,120,0) 70%),
  radial-gradient(55% 100% at 100% 100%,rgba(206,140,226,.9),rgba(206,140,226,0) 72%),
  linear-gradient(96deg,#FFB65A 0,#FDA56C 30%,#F18E88 62%,#E383A4 84%,#D98BC6 100%);
  box-shadow:inset 0 .2rem .1rem rgba(255,255,255,.9),inset 0 -.35rem .8rem rgba(255,226,206,.75),inset 0 0 0 1.5px rgba(255,255,255,.42),inset 0 1.4rem 1.8rem -1rem rgba(255,255,255,.34)}
.sheen{position:absolute;z-index:1;top:-20%;bottom:-20%;left:0;width:34%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);animation:sheen 6.8s 2.6s ease-in-out infinite}
@keyframes sheen{0%{transform:translateX(-160%) skewX(-18deg)}24%,100%{transform:translateX(420%) skewX(-18deg)}}
.ripple{position:absolute;z-index:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.75),rgba(255,255,255,.25) 60%,transparent);animation:ripple .9s var(--ease-out) forwards}
@keyframes ripple{from{transform:scale(0);opacity:1}to{transform:scale(1);opacity:0}}
.cta-content{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:1.4rem;
  text-shadow:0 .1rem .6rem rgba(60,40,140,.28)}
.cta-content .ic{width:3.5rem;height:3.5rem}
.cta-label{position:relative;display:block;height:1.2em;line-height:1.2;transition:width .7s var(--ease-out)}
.cta-label>*{position:absolute;left:0;top:0;white-space:nowrap}
.spacer{flex:none;height:var(--gap)}

/* нижняя навигация */
.tabbar{flex:none;position:relative;isolation:isolate;margin:0 .75rem;height:7.2rem;border-radius:2.6rem;display:flex;
  -webkit-backdrop-filter:blur(1.6rem) saturate(1.3);backdrop-filter:blur(1.6rem) saturate(1.3)}
.tabbar>.skin-n{background:linear-gradient(180deg,rgba(204,194,253,.74),rgba(186,172,246,.62));
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(255,255,255,.34),0 1.2rem 2.4rem -1rem rgba(40,36,130,.55)}
.tabbar>.skin-d{background:linear-gradient(180deg,rgba(255,246,244,.84),rgba(255,234,234,.7));
  box-shadow:inset 0 1.5px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.7),0 1.2rem 2.4rem -1rem rgba(206,118,116,.42)}
.pill{position:absolute;z-index:0;left:0;top:0;width:25%;height:100%;border-radius:2.6rem;transition:transform .6s var(--ease-out)}
.pill .skin-n{background:linear-gradient(180deg,rgba(236,232,255,.92),rgba(214,208,253,.78));
  box-shadow:inset 0 1.5px 0 #fff,0 .6rem 1.6rem -.5rem rgba(70,62,170,.55),0 0 1.4rem rgba(255,255,255,.35)}
.pill .skin-d{background:linear-gradient(180deg,#FFFAF2,rgba(255,236,220,.94));
  box-shadow:inset 0 1.5px 0 #fff,0 .6rem 1.6rem -.5rem rgba(222,140,110,.5),0 0 1.4rem rgba(255,255,255,.6)}
.tab{position:relative;z-index:1;flex:1;border:0;background:none;display:flex;flex-direction:column;align-items:center;
  padding-top:1.55rem;gap:.8rem;color:var(--nav-ink);font-weight:500;font-size:1.2rem;line-height:1;letter-spacing:-.01em;transition:color .45s var(--ease)}
.tab svg{width:2.7rem;height:2.7rem;display:block;transition:transform .5s var(--ease-out)}
.tab.on{color:var(--nav-on);font-weight:700}
.tab.on svg{transform:translate3d(0,-.1rem,0) scale(1.06)}

/* подтверждение записи */
.toast{position:absolute;z-index:12;left:50%;top:calc(var(--inset-top) + 6.6rem);display:flex;align-items:center;gap:1rem;max-width:calc(100% - 2.4rem);width:max-content;
  padding:.9rem 1rem .9rem 1.5rem;border-radius:3rem;line-height:1.25;color:#fff;font-size:1.35rem;font-weight:500;
  background:rgba(34,32,110,.82);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1.2rem 2.6rem -.8rem rgba(20,18,80,.6);
  -webkit-backdrop-filter:blur(1.6rem);backdrop-filter:blur(1.6rem);
  opacity:0;transform:translate3d(-50%,-1.6rem,0) scale(.94);pointer-events:none;transition:opacity .35s var(--ease),transform .55s var(--ease-out)}
.toast.show{opacity:1;transform:translate3d(-50%,0,0) scale(1);pointer-events:auto}
.toast .ok{width:1.9rem;height:1.9rem;flex:none}
.toast button{flex:none;white-space:nowrap;border:0;border-radius:2rem;padding:.6rem 1.1rem;font-size:1.3rem;font-weight:600;color:#fff;background:rgba(255,255,255,.2)}
.toast button[hidden]{display:none}

/* появление */
.intro .topbar{animation:dropIn .8s var(--ease-out) .1s both}
.intro .hero .sub{animation:textIn .9s var(--ease-out) .5s both}
.intro .card-main{animation:cardIn .9s var(--ease-out) .5s both}
.intro .noise{animation:cardIn .9s var(--ease-out) .62s both}
.intro .cta-well{animation:cardIn .9s var(--ease-out) .78s both}
.intro .quick{animation:cardIn .9s var(--ease-out) .84s both}
.intro .tabbar{animation:navIn .9s var(--ease-out) .88s both}
@keyframes dropIn{from{opacity:0;transform:translate3d(0,-1.4rem,0)}}
@keyframes textIn{from{opacity:0;transform:translate3d(0,1.8rem,0);filter:blur(.7rem)}}
@keyframes cardIn{from{opacity:0;transform:translate3d(0,2.8rem,0) scale(.955)}}
@keyframes navIn{from{opacity:0;transform:translate3d(0,3.4rem,0)}}

/* низкие экраны: сжимаем, а не обрезаем */
@media (max-width:599px) and (min-aspect-ratio:390/700){
  .hero{padding-bottom:4rem}.hero .sub{font-size:1.7rem;margin-top:.7rem}
  .app{--gap:1.25rem}.cta-well{padding:1rem 1.05rem}.cta{height:7rem}
}
@media (max-width:599px) and (min-aspect-ratio:390/640){
  .topbar{height:5.4rem}.card{height:8.6rem}.nz-play{width:5.4rem;height:5.4rem}.nz-gear{width:max(4.6rem,46px);height:max(4.6rem,46px)}
  .app{--gap:1rem}.cta{height:6.4rem;font-size:2.2rem}.qbtn{height:3.3rem;font-size:1.35rem}.tabbar{height:6.4rem}.tab{padding-top:1.25rem;gap:.6rem}
}

/* бережный режим */
.perf-low .card,.perf-low .tabbar,.perf-low .toast{-webkit-backdrop-filter:none;backdrop-filter:none}
.perf-low .bank svg,.perf-low .field-glow,.perf-low .sheen,.perf-low .sun-rays::before,.perf-low .sun-rays::after{animation:none}
@media (prefers-reduced-motion:reduce){
  .bank svg,.field-glow,.sheen,.float,.star,.spark,.meteor,.moon-halo,.sun-bloom,.sun-rays,.sun-rays::before,.sun-rays::after,
  .cta-glow,.nz-eq i,.noise.on .nz-play::before{animation:none!important}
  .scene.enter .rise,.scene.leave .rise,.scene.enter .bank-in,.scene.enter .stars,.scene.enter .sun-rays{animation:none!important}
  .intro *{animation:none!important}
  .sw>*,.ic svg{transition-duration:.2s;transform:none!important;filter:none!important}
}

/* загрузка и ошибки */
.msg{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:3rem;text-align:center;color:#fff;font-size:1.7rem;line-height:1.45;background:#2A2C8E}