/* ── 9-bosqich: yoʻriqchi ── */
#tut{position:fixed;left:10px;right:10px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:60;pointer-events:none}
.tut-card{pointer-events:auto;display:flex;gap:12px;padding:14px;border-radius:22px;
  background:linear-gradient(135deg,rgba(28,70,170,.96),rgba(8,16,40,.97) 70%);border:1px solid rgba(125,249,255,.55);
  box-shadow:0 0 30px rgba(57,160,255,.45),0 12px 30px rgba(0,0,0,.5);animation:tutIn .45s cubic-bezier(.2,1.4,.4,1) both}
.tut-card.nudge{animation:tutNudge .6s}
@keyframes tutIn{from{transform:translateY(30px) scale(.95);opacity:0}}
@keyframes tutNudge{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.tut-av{flex:none;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:#06101f;
  border:1.5px solid var(--cyan);box-shadow:0 0 14px rgba(125,249,255,.5)}
.tut-av svg{width:40px;height:40px;filter:drop-shadow(0 0 6px #7df9ff)}
.tut-m{flex:1;min-width:0}
.tut-h{display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#9fc4ff;margin-bottom:3px}
.tut-m p{font-size:14px;line-height:1.4;margin-bottom:8px}
.tut-dots{display:flex;gap:3px;margin-bottom:9px}
.tut-dots i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.12)}
.tut-dots i.on{background:var(--cyan);box-shadow:0 0 6px var(--cyan)}
.tut-b{display:flex;gap:8px}
.tut-b button{flex:1;padding:10px;border-radius:12px;font-size:13.5px;font-weight:800;color:#fff;
  background:linear-gradient(180deg,#7cc4ff,#1f6fe0);box-shadow:0 4px 14px rgba(31,111,224,.5)}
.tut-b button.gh{flex:none;background:rgba(5,12,32,.6);border:1px solid var(--line2);box-shadow:none;color:#b9c9ea;font-weight:600}
.sheet.on ~ #tut{top:calc(8px + env(safe-area-inset-top));bottom:auto}
.sheet.on ~ #tut .tut-card{padding:10px 12px;gap:10px}
.sheet.on ~ #tut .tut-av,.sheet.on ~ #tut .tut-dots{display:none}
.sheet.on ~ #tut .tut-m p{font-size:13px;margin-bottom:6px}
.tut-hare{font-size:44px;display:inline-block;cursor:pointer;animation:hop 1s ease-in-out infinite}
@keyframes hop{50%{transform:translateY(-10px) rotate(-6deg)}}
.tut-hi{position:relative;z-index:55;outline:2px solid #7df9ff;outline-offset:3px;animation:tutGlow 1.4s ease-in-out infinite!important;border-radius:16px}
@keyframes tutGlow{50%{box-shadow:0 0 0 4px rgba(125,249,255,.9),0 0 26px 6px rgba(125,249,255,.6)}}
.tut-fx{position:fixed;inset:0;z-index:90;display:grid;place-items:center;text-align:center;pointer-events:none;
  background:radial-gradient(circle,rgba(57,160,255,.45),rgba(3,6,14,.92) 65%);animation:fxIn .5s both,fxOut .6s 2.6s forwards}
.tut-fx b{display:block;font-size:52px;font-weight:900;letter-spacing:.2em;color:#fff;text-shadow:0 0 20px var(--cyan),0 0 50px var(--neon)}
.tut-fx small{font-size:14px;color:#cfe3ff}
.tut-fx .wv{font-size:42px;margin-bottom:10px;letter-spacing:10px;animation:howl 1.2s ease-in-out infinite}
.tut-fx::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;border:2px solid var(--cyan);animation:ring 1.6s ease-out infinite}
@keyframes fxIn{from{opacity:0}}@keyframes fxOut{to{opacity:0;visibility:hidden}}
@keyframes howl{50%{transform:scale(1.12)}}
@keyframes ring{from{transform:scale(.4);opacity:1}to{transform:scale(1.6);opacity:0}}