/* ════════════════════════════════════════════════════════
   RubikaKIDS — Design System
   Style: LEGO Brick 3D (glossy plastic, studs, hard depth)
   ════════════════════════════════════════════════════════ */

@font-face{
  font-family:'IRANSansX';
  src:url('../assets/fonts/iransansx/IRANSansXFaNum-Regular.woff2') format('woff2');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:'IRANSansX';
  src:url('../assets/fonts/iransansx/IRANSansXFaNum-Medium.woff2') format('woff2');
  font-style:normal;
  font-weight:500;
  font-display:swap;
}
@font-face{
  font-family:'IRANSansX';
  src:url('../assets/fonts/iransansx/IRANSansXFaNum-DemiBold.woff2') format('woff2');
  font-style:normal;
  font-weight:600;
  font-display:swap;
}
@font-face{
  font-family:'IRANSansX';
  src:url('../assets/fonts/iransansx/IRANSansXFaNum-Bold.woff2') format('woff2');
  font-style:normal;
  font-weight:700;
  font-display:swap;
}
@font-face{
  font-family:'IRANSansX';
  src:url('../assets/fonts/iransansx/IRANSansXFaNum-ExtraBold.woff2') format('woff2');
  font-style:normal;
  font-weight:800;
  font-display:swap;
}
@font-face{
  font-family:'IRANSansX';
  src:url('../assets/fonts/iransansx/IRANSansXFaNum-Black.woff2') format('woff2');
  font-style:normal;
  font-weight:900;
  font-display:swap;
}

:root{
  /* LEGO color palette */
  --red:#E3000B;      --red-d:#b00009;
  --yellow:#FFCF00;   --yellow-d:#d9af00;
  --blue:#0066CC;     --blue-d:#004a99;
  --green:#00963F;    --green-d:#00702f;
  --orange:#FF6D00;   --orange-d:#cc5600;
  --sky:#6EC6FF;      --sky-d:#3aa3e8;
  --purple:#8E44AD;   --purple-d:#6f3389;
  --white:#FFFFFF;
  --ink:#15232E;
  --muted:#5b6b78;
  --bg:#FFFFFF;
  --bg-2:#F2F4F7;
  --line:#E7EAEE;

  /* hard plastic depth */
  --depth: 0 6px 0;
  --depth-sm: 0 4px 0;
  --depth-lg: 0 9px 0;
  --soft: 0 9px 18px rgba(31,41,55,.42);

  /* radii (bricks are less round than clay) */
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px;

  --bounce: cubic-bezier(.34,1.56,.64,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'IRANSansX',Tahoma,sans-serif;
  background:
    radial-gradient(circle at 14% 8%, #FFE1EC, transparent 42%),
    radial-gradient(circle at 86% 10%, #DCEBFF, transparent 42%),
    radial-gradient(circle at 82% 88%, #E2FBE9, transparent 42%),
    radial-gradient(circle at 12% 92%, #FFF3C9, transparent 42%),
    #FFFEFA;
  background-attachment:fixed;
  color:var(--ink);
  direction:rtl;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
button{font-family:inherit;cursor:pointer;border:none;background:none}
img{max-width:100%;display:block}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* phone shell — transparent so pastel bg shows */
.app{
  max-width:440px;margin:0 auto;min-height:100vh;
  background:transparent;
  padding:0 16px 96px;position:relative;
}

/* ── colorful brick rain (all screens) ── */
#brick-rain{position:fixed;inset:0;z-index:9999;pointer-events:none;overflow:hidden;max-width:440px;margin:0 auto}
.fbrick{position:absolute;top:-44px;border-radius:4px;opacity:0;
  animation-name:brickfall;animation-timing-function:linear;animation-fill-mode:forwards;will-change:transform,opacity}
.fbrick::before,.fbrick::after{content:"";position:absolute;top:-26%;width:34%;height:30%;
  border-radius:50% 50% 35% 35%;background:inherit;filter:brightness(1.05)}
.fbrick::before{right:14%}.fbrick::after{left:14%}
@keyframes brickfall{
  0%{transform:translateY(-8vh) rotate(0);opacity:0}
  6%{opacity:1}
  96%{opacity:1}
  100%{transform:translateY(112vh) rotate(var(--spin,200deg));opacity:1}
}

/* floating decorative bricks */
.float{position:fixed;font-size:22px;opacity:.5;pointer-events:none;animation:floaty 6s ease-in-out infinite;z-index:0}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-14px) rotate(8deg)}}

/* ── LEGO studs (the signature) ── */
.studs{display:flex;gap:7px;justify-content:flex-start}
.studs i{width:14px;height:14px;border-radius:50%;display:block;
  background:radial-gradient(circle at 38% 30%, rgba(255,255,255,.6), transparent 55%);
  box-shadow:inset 0 -3px 4px rgba(0,0,0,.32), inset 0 2px 2px rgba(255,255,255,.5), 0 1px 1px rgba(0,0,0,.4)}

/* a brick = glossy top highlight + hard bottom edge */
.brick{position:relative}
.brick::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 42%)}
/* row of studs along the top of a brick */
.brick-studs{position:absolute;top:7px;right:14px;left:14px;display:flex;gap:9px;justify-content:flex-start;z-index:2}
.brick-studs i{width:15px;height:11px;border-radius:50% 50% 45% 45%;
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.3), inset 0 2px 2px rgba(255,255,255,.5)}

/* ════ HEADER ════ */
.hdr{display:flex;align-items:center;gap:12px;padding:18px 2px 14px;position:relative;z-index:2}
.avatar{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  font-size:30px;background:var(--white);box-shadow:var(--depth) var(--yellow-d);flex-shrink:0;
  border:4px solid var(--yellow)}
.hdr-txt{flex:1;min-width:0}
.greet{font-weight:900;font-size:18px}
.greet-sub{font-size:12px;color:var(--muted);font-weight:500}
.icon-btn{width:46px;height:46px;border-radius:14px;background:var(--white);box-shadow:var(--depth-sm) #d8cba6;
  display:flex;align-items:center;justify-content:center;color:var(--ink);transition:transform .12s ease;position:relative}
.icon-btn:active{transform:translateY(4px);box-shadow:0 0 0 #d8cba6}
.icon-btn svg{width:23px;height:23px}
.dot{position:absolute;top:8px;left:9px;width:10px;height:10px;background:var(--red);border-radius:50%;border:2px solid var(--white)}
.parent-btn{background:var(--purple);color:#fff;width:auto;padding:0 14px;font-weight:800;font-size:13px;gap:6px;box-shadow:var(--depth-sm) var(--purple-d)}
.parent-btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--purple-d)}
.parent-btn svg{width:18px;height:18px}

/* section heading */
.sec{margin-top:24px;position:relative;z-index:2}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;padding:0 2px}
.sec-title{font-weight:900;font-size:17px;display:flex;align-items:center;gap:9px}
.sec-title .pin{width:14px;height:24px;border-radius:5px;position:relative;box-shadow:inset 0 -3px 3px rgba(0,0,0,.25)}
.sec-title .pin::after{content:"";position:absolute;top:3px;right:3px;left:3px;height:6px;border-radius:50%;background:rgba(255,255,255,.45)}
.sec-title .sec-brick{height:32px;width:auto;display:block;flex-shrink:0}
.sec-more{font-size:12px;color:var(--muted);font-weight:800;display:flex;align-items:center;gap:3px}
.sec-more svg{width:15px;height:15px}

/* ════ WALLET ════ */
.wallet{background:linear-gradient(180deg,#FFE259,#FFD500 55%,#f5cd00);border-radius:var(--r-lg);
  padding:26px 18px 18px;box-shadow:var(--depth-lg) var(--yellow-d), var(--soft);position:relative;overflow:hidden}
.wallet .brick-studs i{background:#FFD500}
.wallet-top{display:flex;justify-content:space-between;align-items:flex-start}
.wallet-label{font-size:13px;font-weight:800;color:#8a6d00}
.wallet-bal{display:flex;align-items:center;gap:8px;margin-top:4px}
.wallet-num{font-size:34px;font-weight:900;color:var(--ink);line-height:1}
.coin{width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6c2,#F28C00);
  display:flex;align-items:center;justify-content:center;font-weight:900;color:#8a4b00;font-size:18px;
  box-shadow:inset 0 -3px 5px rgba(0,0,0,.3),0 2px 5px rgba(0,0,0,.25);animation:spinpop 3s ease-in-out infinite}
@keyframes spinpop{0%,100%{transform:rotate(-8deg) scale(1)}50%{transform:rotate(8deg) scale(1.08)}}
.wallet-actions{display:flex;gap:12px;margin-top:18px}
.wallet-actions button{flex:1;padding:13px;border-radius:13px;font-weight:900;font-size:14px;
  display:flex;align-items:center;justify-content:center;gap:6px;transition:transform .12s ease}
.wallet-actions svg{width:18px;height:18px}
.btn-charge{background:var(--red);color:#fff;box-shadow:var(--depth-sm) var(--red-d)}
.btn-charge:active{transform:translateY(4px);box-shadow:0 0 0 var(--red-d)}
.btn-hist{background:#fff;color:var(--ink);box-shadow:var(--depth-sm) #c9a800}
.btn-hist:active{transform:translateY(4px);box-shadow:0 0 0 #c9a800}
.wallet-note{font-size:11px;color:#8a6d00;margin-top:12px;display:flex;align-items:center;gap:5px;font-weight:700}
.wallet-note svg{width:14px;height:14px}

/* ════ BANNER CAROUSEL ════ */
.carousel{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--depth-lg) rgba(0,0,0,.4), var(--soft)}
.slides{display:flex;transition:transform .5s var(--bounce)}
.slide{min-width:100%;height:150px;display:flex;align-items:center;padding:0 22px;position:relative;overflow:hidden}
.slide::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.28),transparent 40%);pointer-events:none}
.slide-emoji{font-size:78px;position:absolute;left:14px;bottom:-10px;opacity:.95;filter:drop-shadow(0 5px 4px rgba(0,0,0,.25))}
.slide-txt{position:relative;z-index:2;max-width:62%}
.slide-tag{display:inline-block;background:rgba(255,255,255,.92);color:var(--ink);font-size:10px;font-weight:900;
  padding:4px 11px;border-radius:8px;margin-bottom:8px;box-shadow:0 2px 0 rgba(0,0,0,.12)}
.slide-title{font-size:20px;font-weight:900;color:#fff;line-height:1.35;text-shadow:0 2px 4px rgba(0,0,0,.3)}
.dots{display:flex;gap:6px;justify-content:center;position:absolute;bottom:13px;right:0;left:0;z-index:3}
.dots b{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.55);transition:all .3s}
.dots b.on{width:24px;border-radius:5px;background:#fff}

/* ════ horizontal scroll rows ════ */
.scroller{display:flex;gap:14px;overflow-x:auto;padding:6px 2px 12px;scrollbar-width:none;scroll-snap-type:x mandatory}
.scroller::-webkit-scrollbar{display:none}
.scroller>*{scroll-snap-align:start;flex-shrink:0}

/* campaign card — brick with studs */
.camp{width:214px;background:#fff;border-radius:var(--r-md);padding:20px 14px 14px;
  box-shadow:var(--depth) #d8cba6, var(--soft);position:relative;overflow:hidden}
.camp .brick-studs i{background:#e9ddbb}
.camp-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.camp-ico{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:inset 0 -3px 4px rgba(0,0,0,.12)}
.badge{font-size:10px;font-weight:900;padding:5px 10px;border-radius:8px;box-shadow:0 3px 0 rgba(0,0,0,.4)}
.camp-title{font-weight:900;font-size:15px;margin-bottom:5px}
.camp-meta{font-size:11px;color:var(--muted);font-weight:700;display:flex;gap:10px;margin-bottom:13px}
.camp-meta span{display:flex;align-items:center;gap:3px}
.camp-meta svg{width:13px;height:13px}
.camp-cta{width:100%;padding:11px;border-radius:11px;font-weight:900;font-size:13px;color:#fff;
  display:flex;align-items:center;justify-content:center;gap:5px;transition:transform .12s ease}
.camp-cta:active{transform:translateY(4px)}
.camp-cta svg{width:15px;height:15px}

/* ════ MY DRAWINGS ════ */
.draw-cta{background:linear-gradient(180deg,#7fcdff,var(--sky) 45%,var(--blue));border-radius:var(--r-md);
  padding:24px 16px 16px;display:flex;align-items:center;gap:14px;
  box-shadow:var(--depth-lg) var(--blue-d), var(--soft);margin-bottom:14px;color:#fff;position:relative;overflow:hidden}
.draw-cta .brick-studs i{background:#8fd3ff}
.cam-btn{width:60px;height:60px;border-radius:17px;background:#fff;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;box-shadow:var(--depth-sm) rgba(0,0,0,.45);transition:transform .12s ease;animation:pulse 2.4s infinite}
.cam-btn:active{transform:translateY(4px);box-shadow:0 0 0 rgba(0,0,0,.45)}
.cam-btn svg{width:30px;height:30px;color:var(--blue)}
@keyframes pulse{0%,100%{box-shadow:var(--depth-sm) rgba(0,0,0,.45),0 0 0 0 rgba(255,255,255,.5)}50%{box-shadow:var(--depth-sm) rgba(0,0,0,.45),0 0 0 12px rgba(255,255,255,0)}}
.draw-cta-txt h4{font-size:16px;font-weight:900}
.draw-cta-txt p{font-size:12px;opacity:.95;font-weight:600}
.ai-tools{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.ai-tools::-webkit-scrollbar{display:none}
.ai-tool{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:7px;width:74px}
.ai-tool .ai-ic{width:62px;height:62px;border-radius:17px;display:flex;align-items:center;justify-content:center;
  font-size:28px;box-shadow:var(--depth-sm) #d8cba6;transition:transform .12s ease;position:relative}
.ai-tool .ai-ic::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.5),transparent 45%)}
.ai-tool:active .ai-ic{transform:translateY(4px);box-shadow:0 0 0 #d8cba6}
.ai-tool span{font-size:11px;font-weight:800;text-align:center}

/* media cards (stories/cartoons) */
.media{width:166px;background:#fff;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--depth) #d8cba6, var(--soft)}
.media-thumb{height:112px;position:relative;display:flex;align-items:center;justify-content:center;font-size:54px}
.media-thumb::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.25),transparent 40%)}
.media-play{position:absolute;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.95);
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 0 rgba(0,0,0,.45)}
.media-play svg{width:20px;height:20px;color:var(--red);margin-right:-2px}
.media-dur{position:absolute;bottom:8px;left:8px;background:rgba(31,41,55,.82);color:#fff;font-size:10px;
  font-weight:800;padding:3px 8px;border-radius:7px}
.safe-badge{position:absolute;top:8px;right:8px;background:var(--green);color:#fff;font-size:9px;font-weight:900;
  padding:4px 8px;border-radius:7px;display:flex;align-items:center;gap:3px;box-shadow:0 3px 0 var(--green-d)}
.safe-badge svg{width:11px;height:11px}
.media-body{padding:11px 12px}
.media-title{font-weight:900;font-size:13px;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.media-meta{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);font-weight:700}
.media-meta span{display:flex;align-items:center;gap:3px}
.media-meta svg{width:12px;height:12px}

/* games */
.game{width:144px;background:#fff;border-radius:var(--r-md);padding:12px;box-shadow:var(--depth) #d8cba6, var(--soft);text-align:center;position:relative}
.game-ico{width:60px;height:60px;border-radius:16px;margin:2px auto 9px;display:flex;align-items:center;justify-content:center;font-size:30px;box-shadow:inset 0 -3px 4px rgba(0,0,0,.12);position:relative}
.game-ico::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.45),transparent 45%)}
.game-title{font-weight:900;font-size:13px;margin-bottom:5px}
.game-stars{color:var(--orange);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:2px}
.game-stars svg{width:13px;height:13px}
.lead-badge{position:absolute;top:8px;left:8px;background:var(--yellow);color:#8a6d00;font-size:9px;font-weight:900;padding:4px 7px;border-radius:7px;box-shadow:0 3px 0 var(--yellow-d)}

/* tasks */
.task{background:#fff;border-radius:var(--r-md);padding:14px;box-shadow:var(--depth-sm) #d8cba6, var(--soft);display:flex;align-items:center;gap:12px;margin-bottom:11px}
.task-check{width:32px;height:32px;border-radius:9px;border:4px solid var(--green);flex-shrink:0;display:flex;
  align-items:center;justify-content:center;transition:all .25s var(--bounce);background:#fff}
.task-check.done{background:var(--green);border-color:var(--green);box-shadow:0 4px 0 var(--green-d)}
.task-check svg{width:18px;height:18px;color:#fff;opacity:0;transform:scale(0)}
.task-check.done svg{opacity:1;transform:scale(1)}
.task-ico{font-size:25px}
.task-body{flex:1;min-width:0}
.task-title{font-weight:900;font-size:14px}
.task-title.done{text-decoration:line-through;color:var(--muted)}
.task-reward{font-size:11px;color:var(--orange);font-weight:900;display:flex;align-items:center;gap:3px;margin-top:3px}
.task-reward svg{width:13px;height:13px}

/* marketplace */
.shop{width:152px;background:#fff;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--depth) #d8cba6, var(--soft)}
.shop-img{height:104px;display:flex;align-items:center;justify-content:center;font-size:48px;position:relative}
.shop-img::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.25),transparent 40%)}
.shop-fav{position:absolute;top:8px;left:8px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 0 rgba(0,0,0,.4)}
.shop-fav svg{width:15px;height:15px;color:var(--red)}
.shop-body{padding:10px 11px}
.shop-name{font-weight:900;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shop-seller{font-size:10px;color:var(--muted);margin:2px 0 8px;font-weight:600}
.shop-row{display:flex;justify-content:space-between;align-items:center}
.shop-price{font-weight:900;font-size:13px;color:var(--orange);display:flex;align-items:center;gap:3px}
.shop-price svg{width:14px;height:14px}
.shop-buy{background:var(--green);color:#fff;font-size:11px;font-weight:900;padding:6px 12px;border-radius:9px;box-shadow:0 3px 0 var(--green-d)}
.shop-buy:active{transform:translateY(3px);box-shadow:0 0 0 var(--green-d)}

.approved{display:inline-flex;align-items:center;gap:3px;background:#eaf6ee;color:var(--green);font-size:9px;font-weight:900;padding:3px 7px;border-radius:7px;margin-top:7px}
.approved svg{width:11px;height:11px}

/* ════ BOTTOM NAV ════ */
.nav{position:fixed;bottom:0;right:0;left:0;max-width:440px;margin:0 auto;background:#fff;
  border-radius:22px 22px 0 0;box-shadow:0 -6px 0 #efe2bf, 0 -12px 24px rgba(176,150,90,.2);
  display:flex;justify-content:space-around;align-items:center;padding:10px 8px calc(10px + env(safe-area-inset-bottom));z-index:50}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;color:var(--muted);
  transition:transform .25s var(--bounce);padding:4px 0}
.nav-item svg{width:25px;height:25px}
.nav-item span{font-size:10px;font-weight:800}
.nav-item.on{color:var(--red)}
.nav-item.on .nav-ic{background:var(--red);color:#fff;border:4px solid var(--ink);box-shadow:0 5px 0 var(--ink)}
.nav-ic{width:50px;height:50px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  transition:all .25s var(--bounce);background:transparent;border:4px solid transparent;position:relative}
.nav-item.on .nav-ic::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.4),transparent 45%)}
.nav-item.on{transform:translateY(-7px)}

/* tap feedback */
.tap{transition:transform .12s ease}
.tap:active{transform:translateY(4px)}

/* ════ VIEWS / ROUTING ════ */
.view{display:none}
.view.active{display:block;animation:viewIn .28s ease-out}
.view.active>*{animation:sectionReveal .42s var(--bounce) both}
.view.active>*:nth-child(2){animation-delay:.04s}
.view.active>*:nth-child(3){animation-delay:.08s}
.view.active>*:nth-child(4){animation-delay:.12s}
.view.active>*:nth-child(5){animation-delay:.16s}
.view.active>*:nth-child(6){animation-delay:.2s}
.view.active>*:nth-child(7){animation-delay:.24s}
.view.active>*:nth-child(n+8){animation-delay:.28s}
#screen-onboarding .ob:not(.hide)>*{animation:sectionReveal .4s var(--bounce) both}
#screen-onboarding .ob:not(.hide)>*:nth-child(2){animation-delay:.04s}
#screen-onboarding .ob:not(.hide)>*:nth-child(3){animation-delay:.08s}
#screen-onboarding .ob:not(.hide)>*:nth-child(4){animation-delay:.12s}
#screen-onboarding .ob:not(.hide)>*:nth-child(n+5){animation-delay:.16s}
@keyframes viewIn{from{opacity:0}to{opacity:1}}
@keyframes sectionReveal{from{opacity:0;transform:translateY(15px) scale(.985)}to{opacity:1;transform:none}}
.page-title{font-size:22px;font-weight:900;margin:6px 2px 4px;display:flex;align-items:center;gap:9px}
.page-sub{font-size:13px;color:var(--muted);font-weight:600;margin:0 2px 16px}
.sub-title{font-size:16px;font-weight:900;margin:22px 2px 12px;display:flex;align-items:center;gap:8px}

/* ── COIN SHOP ── */
.coin-hero{background:linear-gradient(180deg,#FFE259,#FFD500 55%,#f5cd00);border-radius:var(--r-lg);
  padding:26px 18px 20px;box-shadow:var(--depth-lg) var(--yellow-d), var(--soft);position:relative;text-align:center;margin-bottom:6px}
.coin-hero .brick-studs i{background:#FFD500}
.coin-hero .ch-label{font-size:13px;font-weight:800;color:#8a6d00}
.coin-hero .ch-num{font-size:40px;font-weight:900;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:10px;margin-top:4px}
.pack-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.pack{background:#fff;border-radius:var(--r-md);padding:20px 13px 13px;box-shadow:var(--depth) #d8cba6, var(--soft);
  position:relative;text-align:center}
.pack.feat{outline:4px solid var(--orange);outline-offset:-1px}
.pack .brick-studs i{background:#e9ddbb}
.pack-top-badge{position:absolute;top:-1px;left:10px;background:var(--orange);color:#fff;font-size:9px;font-weight:900;
  padding:4px 9px;border-radius:0 0 9px 9px;box-shadow:0 3px 0 var(--orange-d)}
.pack-coin{font-size:40px;margin:4px 0 2px}
.pack-amt{font-weight:900;font-size:20px}
.pack-bonus{font-size:10px;font-weight:900;color:var(--green);margin:3px 0 10px}
.pack-buy{width:100%;padding:11px;border-radius:11px;font-weight:900;font-size:13px;color:#fff;background:var(--green);
  box-shadow:var(--depth-sm) var(--green-d);transition:transform .12s ease}
.pack-buy:active{transform:translateY(4px);box-shadow:0 0 0 var(--green-d)}
.parent-gate{display:flex;align-items:center;gap:8px;background:#fff3d6;border-radius:var(--r-md);padding:13px 15px;
  font-size:12px;font-weight:700;color:#8a6d00;margin-top:16px;box-shadow:var(--depth-sm) #e8d9ac}
.parent-gate svg{width:20px;height:20px;flex-shrink:0}
.earn{display:flex;align-items:center;gap:13px;background:#fff;border-radius:var(--r-md);padding:13px 14px;
  box-shadow:var(--depth-sm) #d8cba6;margin-bottom:11px}
.earn-ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;box-shadow:inset 0 -3px 4px rgba(0,0,0,.12)}
.earn-body{flex:1}.earn-t{font-weight:900;font-size:14px}.earn-d{font-size:11px;color:var(--muted);font-weight:600}
.earn-coin{font-weight:900;color:var(--orange);font-size:13px;display:flex;align-items:center;gap:3px}
.earn-coin svg{width:14px;height:14px}

/* ── PROFILE ── */
.seg{display:flex;background:#efe2bf;border-radius:14px;padding:5px;gap:5px;margin:6px 0 18px;box-shadow:var(--depth-sm) #ddcfa3 inset}
.seg button{flex:1;padding:11px;border-radius:10px;font-weight:900;font-size:14px;color:var(--muted);transition:all .2s var(--bounce)}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 3px 0 #d8cba6}
.prof-hero{background:linear-gradient(180deg,#9b59c4,var(--purple));border-radius:var(--r-lg);padding:24px 18px 18px;
  box-shadow:var(--depth-lg) var(--purple-d), var(--soft);position:relative;color:#fff;text-align:center;margin-bottom:16px}
.prof-hero .brick-studs i{background:#9b59c4}
.prof-av{width:84px;height:84px;border-radius:24px;background:#fff;display:flex;align-items:center;justify-content:center;
  font-size:46px;margin:6px auto 10px;box-shadow:var(--depth) rgba(0,0,0,.45);border:4px solid var(--yellow)}
.prof-name{font-size:21px;font-weight:900}
.prof-lvl{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.22);border-radius:20px;
  padding:4px 12px;font-size:12px;font-weight:800;margin-top:6px}
.xp-bar{height:14px;background:rgba(0,0,0,.45);border-radius:8px;margin-top:14px;overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,.25)}
.xp-fill{height:100%;background:linear-gradient(90deg,var(--yellow),var(--orange));border-radius:8px;box-shadow:0 0 8px rgba(255,213,0,.6)}
.xp-txt{font-size:11px;font-weight:700;margin-top:6px;opacity:.95}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stat{background:#fff;border-radius:var(--r-md);padding:14px 8px;text-align:center;box-shadow:var(--depth-sm) #d8cba6}
.stat-ic{font-size:26px}
.stat-num{font-weight:900;font-size:18px;margin-top:3px}
.stat-lbl{font-size:10px;color:var(--muted);font-weight:700}
.badge-row{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding:4px 2px 8px}
.badge-row::-webkit-scrollbar{display:none}
.medal{flex-shrink:0;width:70px;text-align:center}
.medal-ic{width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;
  margin:0 auto 6px;box-shadow:var(--depth-sm) rgba(0,0,0,.4);position:relative}
.medal-ic::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.45),transparent 45%)}
.medal.locked{filter:grayscale(1);opacity:.45}
.medal span{font-size:10px;font-weight:800}
.feed{background:#fff;border-radius:var(--r-md);padding:6px 14px;box-shadow:var(--depth-sm) #d8cba6}
.feed-item{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:2px dashed #f0e6c8}
.feed-item:last-child{border-bottom:none}
.feed-ic{font-size:22px}.feed-t{font-weight:800;font-size:13px}.feed-d{font-size:10px;color:var(--muted);font-weight:600}

/* parent settings tiles + child cards + approvals */
.child-card{display:flex;align-items:center;gap:13px;background:#fff;border-radius:var(--r-md);padding:13px 14px;
  box-shadow:var(--depth-sm) #d8cba6;margin-bottom:11px}
.child-card .ca{width:50px;height:50px;border-radius:15px;background:#f3e7ff;display:flex;align-items:center;justify-content:center;font-size:26px;border:3px solid var(--purple)}
.child-card .cb{flex:1}.child-card .cn{font-weight:900;font-size:15px}.child-card .cd{font-size:11px;color:var(--muted);font-weight:600}
.approve-card{background:#fff;border-radius:var(--r-md);padding:13px 14px;box-shadow:var(--depth-sm) #d8cba6;margin-bottom:11px;display:flex;align-items:center;gap:12px}
.approve-ic{width:44px;height:44px;border-radius:13px;background:#fff3d6;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.approve-body{flex:1}.approve-t{font-weight:800;font-size:13px}.approve-d{font-size:10px;color:var(--muted);font-weight:600}
.approve-btns{display:flex;gap:7px}
.appr-yes,.appr-no{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;transition:transform .12s ease}
.appr-yes{background:var(--green);color:#fff;box-shadow:0 3px 0 var(--green-d)}
.appr-no{background:#fde2e2;color:var(--red);box-shadow:0 3px 0 #f0b6b6}
.appr-yes:active,.appr-no:active{transform:translateY(3px)}
.appr-yes svg,.appr-no svg{width:17px;height:17px}
.set-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.set-tile{background:#fff;border-radius:var(--r-md);padding:16px 13px;box-shadow:var(--depth-sm) #d8cba6;text-align:center}
.set-ic{width:50px;height:50px;border-radius:15px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:25px;box-shadow:inset 0 -3px 4px rgba(0,0,0,.1)}
.set-t{font-weight:800;font-size:13px}

/* ── CATEGORY CHIPS ── */
.chips{display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 14px}
.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;padding:9px 16px;border-radius:12px;font-weight:800;font-size:13px;background:#fff;color:var(--ink);
  box-shadow:var(--depth-sm) #d8cba6;transition:all .15s ease}
.chip.on{background:var(--red);color:#fff;box-shadow:var(--depth-sm) var(--red-d)}
.chip:active{transform:translateY(3px)}

/* big cartoon list */
.feat-cartoon{border-radius:var(--r-lg);height:180px;position:relative;overflow:hidden;display:flex;align-items:flex-end;
  padding:18px;box-shadow:var(--depth-lg) rgba(0,0,0,.4), var(--soft);margin-bottom:18px}
.feat-cartoon::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.45),transparent 60%)}
.feat-emoji{position:absolute;top:10px;left:14px;font-size:90px;filter:drop-shadow(0 5px 5px rgba(0,0,0,.25))}
.feat-txt{position:relative;z-index:2;color:#fff}
.feat-txt .ft-tag{display:inline-block;background:var(--red);font-size:10px;font-weight:900;padding:4px 10px;border-radius:8px;margin-bottom:8px;box-shadow:0 3px 0 var(--red-d)}
.feat-txt h3{font-size:22px;font-weight:900;text-shadow:0 2px 4px rgba(0,0,0,.35)}
.feat-txt p{font-size:12px;font-weight:600;opacity:.95}
.ctn-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.ctn-grid .media{width:auto}

/* ── SERVICES GRID ── */
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.svc{border-radius:var(--r-md);padding:20px 14px 16px;position:relative;overflow:hidden;color:#fff;
  box-shadow:var(--depth) rgba(0,0,0,.45), var(--soft);min-height:128px;display:flex;flex-direction:column;justify-content:flex-end}
.svc .brick-studs i{background:rgba(255,255,255,.55)}
.svc-ic{font-size:42px;position:absolute;top:14px;left:14px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.45))}
.svc-t{font-weight:900;font-size:15px;position:relative;z-index:2}
.svc-d{font-size:10px;font-weight:600;opacity:.95;position:relative;z-index:2;margin-top:2px}

/* ════════════════════════════════════════
   ONBOARDING (splash / register / OTP)
   ════════════════════════════════════════ */
.screen{position:fixed;inset:0;z-index:200;max-width:440px;margin:0 auto;
  background:
    radial-gradient(circle at 14% 8%, #FFE1EC, transparent 42%),
    radial-gradient(circle at 86% 10%, #DCEBFF, transparent 42%),
    radial-gradient(circle at 82% 88%, #E2FBE9, transparent 42%),
    radial-gradient(circle at 12% 92%, #FFF3C9, transparent 42%),
    #FFFEFA;
  background-color:#FFFEFA;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:28px;text-align:center;overflow:hidden;animation:viewIn .4s var(--bounce)}
.screen.hide{display:none}
.screen .float{position:absolute}

/* SPLASH */
#screen-splash{justify-content:center;gap:0}
.splash-logo{max-width:300px;width:82%;filter:drop-shadow(0 12px 16px rgba(176,150,90,.4));
  animation:logoPop .9s var(--bounce) both, bob 3s ease-in-out 1s infinite}
.splash-logo-fallback{font-size:46px;font-weight:900;color:var(--red)}
@keyframes logoPop{0%{opacity:0;transform:scale(.4) translateY(40px)}100%{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.splash-tag{font-size:15px;font-weight:800;color:var(--ink);margin-top:24px;
  background:#fff;padding:9px 18px;border-radius:14px;box-shadow:var(--depth-sm) #d8cba6}
.splash-loadwrap{position:absolute;bottom:64px;right:34px;left:34px}
.splash-bar{height:18px;background:#fff;border-radius:10px;overflow:hidden;
  box-shadow:inset 0 3px 5px rgba(176,150,90,.3);border:3px solid #fff}
.splash-fill{height:100%;width:0;border-radius:8px;
  background:linear-gradient(90deg,var(--red),var(--orange),var(--yellow),var(--green),var(--blue));
  background-size:300% 100%;transition:width .15s linear;animation:hue 2s linear infinite}
@keyframes hue{to{background-position:300% 0}}
.splash-loadtxt{font-size:13px;font-weight:700;color:#8a6d00;margin-top:12px;min-height:18px}
.splash-pct{font-size:12px;font-weight:900;color:var(--ink);margin-top:4px}

/* ONBOARDING shared */
.ob{position:absolute;inset:0;display:flex;flex-direction:column;padding:32px 26px 26px;overflow-y:auto}
.ob.hide{display:none}
.ob-steps{display:flex;gap:7px;justify-content:center;margin-bottom:8px}
.ob-steps b{width:30px;height:9px;border-radius:5px;background:#e7d9b3;transition:all .3s}
.ob-steps b.on{background:var(--red);width:42px}
.ob-mascot{font-size:54px;margin:8px 0 2px}
.ob-title{font-size:23px;font-weight:900;margin-top:6px}
.ob-sub{font-size:13px;color:var(--muted);font-weight:600;margin-top:6px;line-height:1.7}
.ob-spacer{flex:1}
.ob-btn{padding:16px;border-radius:16px;font-weight:900;font-size:16px;color:#fff;background:var(--red);
  box-shadow:var(--depth) var(--red-d);transition:transform .12s ease;width:100%}
.ob-btn:active{transform:translateY(5px);box-shadow:0 0 0 var(--red-d)}
.ob-btn:disabled{background:#cdbf9a;box-shadow:var(--depth) #b3a684;opacity:.7}
.ob-link{font-size:13px;font-weight:800;color:var(--blue);margin-top:16px;background:none}

/* avatar horizontal picker */
.av-scroller{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin-top:16px;padding:18px calc(50% - 96px) 30px;scrollbar-width:none}
.av-scroller::-webkit-scrollbar{display:none}
.av-card{flex:0 0 192px;scroll-snap-align:center;background:#fff;border-radius:26px;padding:16px 10px;
  border:4px solid transparent;position:relative;cursor:pointer;
  filter:grayscale(.92) opacity(.5);transform:scale(.85);
  transition:transform .35s var(--bounce),filter .35s ease,border-color .25s}
.av-card.sel{filter:none;transform:scale(1.05);border-color:var(--green);
  box-shadow:0 24px 38px rgba(21,35,46,.32) !important}
.av-card.sel::after{content:"✓";position:absolute;top:-10px;left:-10px;width:38px;height:38px;border-radius:50%;
  background:var(--green);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:20px}
.av-img{width:100%;height:190px;object-fit:contain}
.av-fallback{font-size:100px;line-height:190px}
.av-name{font-weight:900;font-size:18px;margin-top:8px}

/* children blocks — box-less */
.kid-block{position:relative;margin-top:16px;padding-top:4px}
.kid-block + .kid-block{border-top:2px dashed var(--line);margin-top:24px;padding-top:20px}
.kid-head{font-weight:900;font-size:13px;color:var(--muted);margin:0 4px 8px;text-align:right}
.kid-remove{position:absolute;top:-2px;left:0;width:30px;height:30px;border-radius:50%;background:var(--red);color:#fff;
  font-weight:900;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 3px 0 var(--red-d) !important}
.kid-block .ob-input{margin-bottom:2px}
/* age chips */
.age-row{display:flex;gap:8px;overflow-x:auto;padding:12px 2px 2px;scrollbar-width:none}
.age-row::-webkit-scrollbar{display:none}
.age-chip{flex:0 0 auto;padding:8px 13px;border-radius:12px;font-weight:800;font-size:13px;background:#fff;
  border:1px solid var(--line);color:var(--ink);box-shadow:0 2px 0 rgba(0,0,0,.08) !important;cursor:pointer}
.age-chip.sel{background:var(--orange);color:#fff;border-color:var(--orange);box-shadow:0 2px 0 var(--orange-d) !important}
/* avatar carousel — box-less, big, ground shadow under feet */
.av-carousel{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:16px calc(50% - 70px) 6px;scrollbar-width:none}
.av-carousel::-webkit-scrollbar{display:none}
.av-pick{flex:0 0 auto;scroll-snap-align:center;background:none;border:none;padding:0 0 20px;cursor:pointer;position:relative;
  margin-inline:-16px;filter:grayscale(1) opacity(.5);transform:scale(.76);transition:transform .32s var(--bounce),filter .32s ease}
.av-pick.sel{z-index:3}
.av-pick img{width:124px;height:156px;object-fit:contain;display:block}
.av-pick::after{content:"";position:absolute;left:50%;bottom:4px;transform:translateX(-50%);
  width:66px;height:13px;border-radius:50%;background:rgba(21,35,46,.22);filter:blur(4px);transition:all .32s}
.av-pick.sel{filter:none;transform:scale(1.06)}
.av-pick.sel::after{width:100px;height:18px;background:rgba(21,35,46,.32)}

/* floating selected avatar (phone + otp steps) */
.float-av{width:114px;height:114px;border-radius:32px;background:#fff;display:flex;align-items:center;justify-content:center;
  margin:8px auto 4px;border:5px solid var(--yellow);overflow:hidden;
  animation:bob 3s ease-in-out infinite;box-shadow:0 18px 30px rgba(21,35,46,.34) !important}
.float-av img{width:100%;height:100%;object-fit:contain}
.float-av .av-fallback{font-size:62px;line-height:1}

/* text inputs (name/family) */
.ob-input.txt{letter-spacing:normal;text-align:right;font-size:17px}

/* otp helpers */
.otp-hint{font-size:15px;color:var(--muted);font-weight:700;margin-top:10px}
.otp-hint b{font-size:30px;color:var(--blue);font-weight:900;letter-spacing:4px;display:block;margin-top:4px}
.otp-error{color:var(--red);font-weight:800;font-size:13px;margin-top:12px;min-height:18px}
.otp-row.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}

/* phone input */
.ob-field{margin-top:24px;text-align:right}
.ob-label{font-size:13px;font-weight:800;margin-bottom:8px;display:block}
.ob-input{width:100%;padding:16px;border-radius:15px;border:3px solid #ecddb5;background:#fff;
  font-family:inherit;font-size:20px;font-weight:800;text-align:center;letter-spacing:3px;color:var(--ink);
  box-shadow:inset 0 3px 5px rgba(176,150,90,.18);outline:none;transition:border-color .2s}
.ob-input:focus{border-color:var(--blue)}
.ob-consent{display:flex;gap:9px;align-items:flex-start;margin-top:16px;font-size:11px;color:var(--muted);
  font-weight:600;text-align:right;line-height:1.7;background:#fff3d6;padding:12px;border-radius:13px}
.ob-consent svg{width:18px;height:18px;flex-shrink:0;margin-top:1px;color:#8a6d00}

/* OTP */
.otp-avatar{width:96px;height:96px;border-radius:28px;background:#fff;margin:6px auto 0;display:flex;
  align-items:center;justify-content:center;box-shadow:var(--depth) #d8cba6;border:5px solid var(--yellow);overflow:hidden}
.otp-avatar img{width:100%;height:100%;object-fit:contain}
.otp-avatar .av-fallback{font-size:54px;line-height:1}
.otp-row{display:flex;gap:10px;justify-content:center;margin-top:24px;direction:ltr}
.otp-box{width:46px;height:56px;border-radius:13px;border:3px solid #ecddb5;background:#fff;
  font-family:inherit;font-size:24px;font-weight:900;text-align:center;color:var(--ink);
  box-shadow:inset 0 3px 5px rgba(176,150,90,.18);outline:none;transition:all .2s var(--bounce)}
.otp-box:focus{border-color:var(--blue);transform:scale(1.08)}
.otp-box.filled{border-color:var(--green);background:#eef7f0}
.otp-timer{font-size:13px;font-weight:800;color:var(--muted);margin-top:18px}
.otp-timer b{color:var(--red)}
.edit-phone{font-size:13px;font-weight:800;color:var(--blue);background:none;margin-top:6px}

/* success */
.ob-success{align-items:center;justify-content:center}
.success-ic{font-size:88px;animation:logoPop .7s var(--bounce) both}

/* confetti */
.confetti{position:fixed;width:11px;height:15px;z-index:999;pointer-events:none;top:-20px;border-radius:2px}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg);opacity:.2}}

/* ════════════════════════════════════════
   FLAT base — reset messy layered shadows
   ════════════════════════════════════════ */
*{box-shadow:none !important}

/* ════════════════════════════════════════
   LEGO BRAND THEME — white surfaces, soft depth
   ════════════════════════════════════════ */
/* clean white content cards with light hairline + soft shadow */
.camp,.media,.game,.shop,.task,.pack,.stat,.earn,.child-card,.approve-card,
.set-tile,.feed,.av-card{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 3px 12px rgba(21,35,46,.07) !important}
/* feature blocks: brand fill + soft elevation */
.wallet,.carousel,.draw-cta,.coin-hero,.prof-hero,.feat-cartoon,.svc{
  box-shadow:0 8px 20px rgba(21,35,46,.16) !important;border-radius:20px}
/* tactile LEGO buttons: subtle bottom edge, press down */
.btn-charge,.btn-hist,.camp-cta,.pack-buy,.shop-buy,.wallet-actions button,
.ob-btn,.appr-yes,.appr-no,.parent-btn,.chip{
  box-shadow:0 3px 0 rgba(0,0,0,.16) !important}
.btn-charge:active,.btn-hist:active,.camp-cta:active,.pack-buy:active,
.shop-buy:active,.wallet-actions button:active,.ob-btn:active,
.appr-yes:active,.appr-no:active,.parent-btn:active,.chip:active{
  transform:translateY(3px);box-shadow:0 0 0 rgba(0,0,0,0) !important}
/* bottom nav: clean top elevation */
.nav{box-shadow:0 -2px 14px rgba(21,35,46,.1) !important;
  border-radius:22px 22px 0 0;border-top:1px solid var(--line)}
.nav-item.on .nav-ic{border:none;box-shadow:0 3px 0 var(--red-d) !important}
.nav-ic{border:none}
/* neutralise leftover warm tints */
.seg{background:#EEF1F4}
.parent-gate,.ob-consent{background:#FFF7D6}
.icon-btn:not(.parent-btn),.avatar{background:#fff;border:1px solid var(--line)}
.avatar{border:3px solid var(--yellow)}
.parent-btn{background:var(--purple);border:none;color:#fff}

/* ════════════════════════════════════════
   FLOATING LIQUID-GLASS BOTTOM NAV
   ════════════════════════════════════════ */
.nav{
  left:0;right:0;bottom:14px;top:auto;
  width:calc(100% - 24px);max-width:412px;margin:0 auto;
  background:rgba(255,255,255,.5) !important;
  -webkit-backdrop-filter:blur(20px) saturate(1.7);
  backdrop-filter:blur(20px) saturate(1.7);
  border:1.5px solid rgba(255,255,255,.7) !important;
  border-radius:30px !important;
  box-shadow:0 12px 32px rgba(21,35,46,.18), inset 0 1.5px 0 rgba(255,255,255,.85) !important;
  padding:9px 6px;
}
/* each tab its own color */
.nav-item[data-tab="profile"]{--c:#8E44AD}
.nav-item[data-tab="coins"]{--c:#FF6D00}
.nav-item[data-tab="contest"]{--c:#E3000B}
.nav-item[data-tab="cartoon"]{--c:#0066CC}
.nav-item[data-tab="services"]{--c:#00963F}
.nav-item{color:#9aa3ad;transition:transform .3s var(--bounce)}
.nav-item span{color:#9aa3ad}
.nav-item.on span{color:var(--c)}
.nav-ic{background:transparent !important;border:none !important;width:48px;height:48px;border-radius:16px}
.nav-item svg{width:25px;height:25px;transition:transform .25s var(--bounce)}
.nav-item.on{transform:translateY(-13px)}
/* selected icon: round, floating, glowing */
.nav-item.on .nav-ic{
  background:var(--c) !important;color:#fff;border:none !important;border-radius:50% !important;
  width:54px;height:54px;
  box-shadow:0 10px 20px rgba(21,35,46,.3), 0 0 20px 3px var(--c) !important;
  animation:navPop .6s var(--bounce), navGlow 2.2s ease-in-out .6s infinite}
.nav-item.on .nav-ic svg{filter:none;animation:navWiggle .7s var(--bounce)}
@keyframes navGlow{
  0%,100%{box-shadow:0 10px 20px rgba(21,35,46,.28), 0 0 14px 2px var(--c)}
  50%{box-shadow:0 12px 24px rgba(21,35,46,.32), 0 0 26px 6px var(--c)}
}
.nav-item.on .nav-ic::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.55),transparent 55%)}
/* cartoonish jelly pop on select */
@keyframes navPop{
  0%{transform:scale(.3) rotate(-22deg)}
  35%{transform:scale(1.35) rotate(12deg)}
  55%{transform:scale(.82) rotate(-8deg)}
  72%{transform:scale(1.12) rotate(4deg)}
  88%{transform:scale(.95) rotate(-2deg)}
  100%{transform:scale(1) rotate(0)}
}
@keyframes navWiggle{
  0%{transform:rotate(0) scale(.6)}
  40%{transform:rotate(-12deg) scale(1.15)}
  70%{transform:rotate(8deg) scale(.95)}
  100%{transform:rotate(0) scale(1)}
}

/* ════════════════════════════════════════
   ACTION SHEET (bottom sheet for all CTAs)
   ════════════════════════════════════════ */
.sheet-overlay{position:fixed;inset:0;z-index:400;background:rgba(21,35,46,.45);
  display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .25s;pointer-events:none}
.sheet-overlay.open{opacity:1;pointer-events:auto}
.sheet{width:100%;max-width:440px;background:#fff;border-radius:28px 28px 0 0;
  padding:10px 18px calc(26px + env(safe-area-inset-bottom));
  transform:translateY(105%);transition:transform .38s var(--bounce);max-height:88vh;overflow-y:auto}
.sheet-overlay.open .sheet{transform:none}
.sheet-handle{width:46px;height:5px;border-radius:3px;background:#d7dce1;margin:6px auto 12px}
.sheet-emoji{font-size:58px;text-align:center;line-height:1.1}
.sheet-title{font-size:21px;font-weight:900;text-align:center;margin-top:6px}
.sheet-text{font-size:14px;color:var(--muted);font-weight:600;text-align:center;margin-top:8px;line-height:1.85}
.sheet-btn{width:100%;padding:15px;border-radius:16px;font-weight:900;font-size:16px;color:#fff;margin-top:18px;
  box-shadow:0 4px 0 rgba(0,0,0,.16) !important;transition:transform .12s ease}
.sheet-btn:active{transform:translateY(4px);box-shadow:0 0 0 #000 !important}
.sheet-ghost{width:100%;padding:13px;border-radius:14px;font-weight:800;font-size:14px;color:var(--muted);margin-top:10px}
.sheet-list{margin-top:14px}
.sheet-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 2px;
  border-bottom:1px solid var(--line);font-weight:700;font-size:14px}
.sheet-row:last-child{border-bottom:none}
.sheet-row .amt{font-weight:900}
.sheet-row .pos{color:var(--green)}.sheet-row .neg{color:var(--red)}
.sheet-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.sheet-chips span{background:var(--bg-2);color:var(--ink);font-size:12px;font-weight:800;padding:7px 12px;border-radius:12px}

/* ════════════════════════════════════════
   APPLE-LIKE ONBOARDING OVERRIDE
   Login, OTP, and children setup only.
   ════════════════════════════════════════ */
#screen-onboarding{
  --ios-bg:#F5F5F7;
  --ios-card:#FFFFFF;
  --ios-fill:#F2F2F7;
  --ios-fill-2:#E9EEF6;
  --ios-text:#1D1D1F;
  --ios-secondary:#6E6E73;
  --ios-tertiary:#8E8E93;
  --ios-separator:rgba(60,60,67,.18);
  --ios-blue:#007AFF;
  --ios-green:#34C759;
  --ios-red:#FF3B30;
  --ios-radius:18px;
  --ios-shadow:0 18px 44px rgba(0,0,0,.10);
  background:
    radial-gradient(circle at 20% 0%, rgba(0,122,255,.12), transparent 34%),
    linear-gradient(180deg,#FFFFFF 0%, var(--ios-bg) 42%, #EEF1F6 100%);
  color:var(--ios-text);
  font-family:'IRANSansX',-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",sans-serif;
  letter-spacing:0;
}
#screen-onboarding .ob{
  inset:0;
  padding:calc(26px + env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom));
  max-width:440px;
  margin:0 auto;
  text-align:right;
}
#screen-onboarding .ob::before{
  content:"";
  position:absolute;
  top:96px;
  right:16px;
  left:16px;
  bottom:calc(94px + env(safe-area-inset-bottom));
  border:1px solid rgba(255,255,255,.7);
  border-radius:30px;
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
  backdrop-filter:blur(18px) saturate(1.25);
  box-shadow:var(--ios-shadow) !important;
  pointer-events:none;
}
#screen-onboarding .ob > *{
  position:relative;
  z-index:1;
}
#screen-onboarding .ob-steps{
  align-self:center;
  gap:6px;
  margin:0 0 26px;
  padding:3px;
  border-radius:999px;
  background:rgba(118,118,128,.12);
}
#screen-onboarding .ob-steps b{
  width:8px;
  height:8px;
  border-radius:999px;
  background:rgba(60,60,67,.28);
}
#screen-onboarding .ob-steps b.on{
  width:28px;
  background:var(--ios-blue);
}
#screen-onboarding .ob-mascot{
  width:72px;
  height:72px;
  margin:0 auto 18px;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#FFFFFF,#EEF3FF);
  font-size:34px;
  box-shadow:0 12px 26px rgba(0,122,255,.16) !important;
}
#screen-onboarding .ob-title{
  margin:0;
  text-align:center;
  font-size:28px;
  line-height:34px;
  font-weight:800;
  letter-spacing:-.2px;
  color:var(--ios-text);
}
#screen-onboarding .ob-sub{
  max-width:330px;
  margin:8px auto 0;
  text-align:center;
  color:var(--ios-secondary);
  font-size:15px;
  line-height:22px;
  font-weight:500;
}
#screen-onboarding .ob-field{
  margin-top:18px;
}
#screen-onboarding .ob-field:first-of-type{
  margin-top:30px;
}
#screen-onboarding .ob-label{
  margin:0 4px 7px;
  color:var(--ios-secondary);
  font-size:13px;
  line-height:18px;
  font-weight:600;
}
#screen-onboarding .ob-input{
  min-height:52px;
  padding:13px 15px;
  border:1px solid var(--ios-separator);
  border-radius:14px;
  background:var(--ios-fill);
  color:var(--ios-text);
  font-size:17px;
  line-height:22px;
  font-weight:500;
  letter-spacing:0;
  box-shadow:none !important;
  caret-color:var(--ios-blue);
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
#screen-onboarding .ob-input.txt{
  text-align:right;
  font-size:17px;
}
#screen-onboarding #ob-phone-input{
  text-align:left;
  direction:ltr;
  font-size:21px;
  font-weight:650;
  letter-spacing:.5px;
}
#screen-onboarding .ob-input:focus{
  background:#fff;
  border-color:rgba(0,122,255,.58);
  box-shadow:0 0 0 4px rgba(0,122,255,.14) !important;
}
#screen-onboarding .ob-consent{
  margin-top:18px;
  padding:12px 14px;
  border:1px solid rgba(0,122,255,.14);
  border-radius:16px;
  background:rgba(0,122,255,.08);
  color:var(--ios-secondary);
  font-size:12px;
  line-height:19px;
  font-weight:500;
}
#screen-onboarding .ob-consent svg{
  width:20px;
  height:20px;
  color:var(--ios-blue);
}
#screen-onboarding .ob-spacer{
  min-height:22px;
}
#screen-onboarding .ob-btn{
  min-height:52px;
  padding:14px 18px;
  border-radius:15px;
  background:var(--ios-blue);
  color:#fff;
  font-size:17px;
  line-height:22px;
  font-weight:700;
  box-shadow:none !important;
  transition:transform .14s ease,background .18s ease,opacity .18s ease;
}
#screen-onboarding .ob-btn:active{
  transform:scale(.985);
  box-shadow:none !important;
}
#screen-onboarding .ob-btn:disabled{
  background:rgba(118,118,128,.22);
  color:rgba(60,60,67,.48);
  opacity:1;
  box-shadow:none !important;
}
#screen-onboarding .ob-link,
#screen-onboarding .edit-phone{
  min-height:44px;
  margin-top:10px;
  padding:8px 12px;
  align-self:center;
  color:var(--ios-blue);
  font-size:15px;
  line-height:20px;
  font-weight:600;
}
#screen-onboarding .otp-hint{
  align-self:center;
  margin-top:16px;
  padding:10px 14px;
  min-width:142px;
  border-radius:16px;
  background:rgba(0,122,255,.10);
  color:var(--ios-secondary);
  text-align:center;
  font-size:12px;
  line-height:17px;
  font-weight:600;
}
#screen-onboarding .otp-hint b{
  margin-top:2px;
  color:var(--ios-blue);
  font-size:27px;
  line-height:32px;
  font-weight:800;
  letter-spacing:6px;
}
#screen-onboarding .otp-row{
  gap:10px;
  margin-top:26px;
}
#screen-onboarding .otp-box{
  width:58px;
  height:62px;
  border:1px solid var(--ios-separator);
  border-radius:16px;
  background:var(--ios-fill);
  color:var(--ios-text);
  font-size:28px;
  line-height:34px;
  font-weight:700;
  box-shadow:none !important;
}
#screen-onboarding .otp-box:focus{
  border-color:rgba(0,122,255,.58);
  background:#fff;
  transform:none;
  box-shadow:0 0 0 4px rgba(0,122,255,.14) !important;
}
#screen-onboarding .otp-box.filled{
  border-color:rgba(52,199,89,.55);
  background:rgba(52,199,89,.12);
}
#screen-onboarding .otp-error{
  min-height:20px;
  margin-top:12px;
  text-align:center;
  color:var(--ios-red);
  font-size:13px;
  line-height:18px;
  font-weight:600;
}
#screen-onboarding .otp-timer{
  margin-top:10px;
  text-align:center;
  color:var(--ios-tertiary);
  font-size:13px;
  line-height:18px;
  font-weight:500;
}
#screen-onboarding .otp-timer b{
  color:var(--ios-text);
  font-weight:700;
}
#screen-onboarding #kids-list{
  margin-top:22px;
}
#screen-onboarding .kid-block{
  margin-top:14px;
  padding:16px;
  border:1px solid var(--ios-separator);
  border-radius:22px;
  background:rgba(255,255,255,.82);
  box-shadow:0 8px 22px rgba(0,0,0,.05) !important;
}
#screen-onboarding .kid-block + .kid-block{
  margin-top:14px;
  padding-top:16px;
  border-top:1px solid var(--ios-separator);
}
#screen-onboarding .kid-head{
  margin:0 2px 10px;
  color:var(--ios-secondary);
  font-size:13px;
  line-height:18px;
  font-weight:700;
}
#screen-onboarding .kid-remove{
  top:14px;
  left:14px;
  width:32px;
  height:32px;
  border-radius:999px;
  background:rgba(255,59,48,.12);
  color:var(--ios-red);
  font-size:20px;
  font-weight:500;
  box-shadow:none !important;
}
#screen-onboarding .kid-block .ob-input{
  margin-bottom:12px;
  background:#fff;
}
#screen-onboarding .age-row{
  gap:8px;
  padding:0 0 12px;
}
#screen-onboarding .age-chip{
  min-height:36px;
  padding:8px 13px;
  border:1px solid transparent;
  border-radius:999px;
  background:var(--ios-fill);
  color:var(--ios-secondary);
  font-size:14px;
  line-height:18px;
  font-weight:600;
  box-shadow:none !important;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
#screen-onboarding .age-chip.sel{
  border-color:rgba(0,122,255,.2);
  background:rgba(0,122,255,.12);
  color:var(--ios-blue);
  box-shadow:none !important;
}
#screen-onboarding .av-carousel{
  gap:10px;
  padding:4px 1px 2px;
  scroll-padding-inline:1px;
}
#screen-onboarding .av-pick{
  width:92px;
  min-width:92px;
  min-height:116px;
  margin:0;
  padding:8px 6px 10px;
  border:1px solid var(--ios-separator);
  border-radius:20px;
  background:var(--ios-fill);
  filter:none;
  transform:none;
  box-shadow:none !important;
  transition:background .18s ease,border-color .18s ease,transform .14s ease;
}
#screen-onboarding .av-pick img{
  width:80px;
  height:94px;
  margin:0 auto;
  object-fit:contain;
}
#screen-onboarding .av-pick::after{
  content:"";
  position:absolute;
  top:7px;
  left:7px;
  right:auto;
  bottom:auto;
  width:22px;
  height:22px;
  border-radius:999px;
  background:rgba(118,118,128,.18);
  filter:none;
  transform:none;
}
#screen-onboarding .av-pick.sel{
  border-color:rgba(0,122,255,.42);
  background:rgba(0,122,255,.10);
  transform:scale(.985);
}
#screen-onboarding .av-pick.sel::after{
  content:"✓";
  width:22px;
  height:22px;
  background:var(--ios-blue);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  line-height:22px;
  font-weight:800;
}
#screen-onboarding .ob-success{
  text-align:center;
}

@media (max-width:380px){
  #screen-onboarding .ob{
    padding-right:16px;
    padding-left:16px;
  }
  #screen-onboarding .ob-title{
    font-size:25px;
    line-height:31px;
  }
  #screen-onboarding .otp-box{
    width:52px;
    height:58px;
  }
  #screen-onboarding .av-pick{
    width:86px;
    min-width:86px;
  }
}

/* ════════════════════════════════════════
   ACTIVE KIDS TEMPLATE OVERRIDE
   Animated login, OTP, and child avatar swiper.
   ════════════════════════════════════════ */
#screen-onboarding{
  --kid-purple:#7C3AED;
  --kid-pink:#EC4899;
  --kid-blue:#2563EB;
  --kid-sky:#38BDF8;
  --kid-yellow:#FACC15;
  --kid-green:#22C55E;
  --kid-ink:#172033;
  --kid-muted:#64748B;
  --kid-card:#FFFFFF;
  --kid-line:rgba(124,58,237,.16);
  --kid-shadow:0 20px 44px rgba(74,35,143,.18);
  background:
    linear-gradient(135deg,rgba(124,58,237,.18) 0 18%,transparent 18% 100%),
    linear-gradient(225deg,rgba(236,72,153,.17) 0 16%,transparent 16% 100%),
    radial-gradient(circle at 18% 16%,rgba(250,204,21,.42),transparent 20%),
    radial-gradient(circle at 84% 22%,rgba(56,189,248,.36),transparent 23%),
    radial-gradient(circle at 50% 98%,rgba(34,197,94,.28),transparent 28%),
    #FFF7ED;
  font-family:'IRANSansX',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow:hidden;
}
#screen-onboarding::before,
#screen-onboarding::after{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  opacity:.9;
}
#screen-onboarding::before{
  width:120px;
  height:120px;
  top:70px;
  right:-38px;
  background:
    linear-gradient(90deg,var(--kid-yellow) 0 28px,transparent 28px 42px,var(--kid-pink) 42px 70px,transparent 70px),
    linear-gradient(0deg,var(--kid-blue) 0 28px,transparent 28px 42px,var(--kid-green) 42px 70px,transparent 70px);
  border-radius:26px;
  transform:rotate(18deg);
  animation:kidFloatBlock 6s ease-in-out infinite;
}
#screen-onboarding::after{
  width:98px;
  height:98px;
  left:-28px;
  bottom:96px;
  border-radius:30px;
  background:
    linear-gradient(135deg,var(--kid-sky),var(--kid-blue));
  box-shadow:34px 18px 0 -14px var(--kid-yellow), 18px -26px 0 -18px var(--kid-pink) !important;
  animation:kidFloatBlock 7s ease-in-out -1.4s infinite reverse;
}
#screen-onboarding .ob{
  padding:calc(22px + env(safe-area-inset-top)) 20px calc(22px + env(safe-area-inset-bottom));
  isolation:isolate;
}
#screen-onboarding .ob::before{
  top:82px;
  right:18px;
  left:18px;
  bottom:calc(86px + env(safe-area-inset-bottom));
  border:3px solid rgba(255,255,255,.72);
  border-radius:32px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.82)),
    repeating-linear-gradient(90deg,rgba(124,58,237,.06) 0 12px,transparent 12px 24px);
  box-shadow:var(--kid-shadow), inset 0 -8px 0 rgba(124,58,237,.05) !important;
}
#screen-onboarding .ob::after{
  content:"";
  position:absolute;
  z-index:0;
  top:94px;
  right:40px;
  width:64px;
  height:14px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--kid-pink),var(--kid-yellow),var(--kid-green));
  box-shadow:132px 34px 0 -2px rgba(37,99,235,.22), 40px 274px 0 -3px rgba(236,72,153,.22) !important;
  animation:kidSpark 3.2s ease-in-out infinite;
}
#screen-onboarding .ob > *{
  z-index:1;
}
#screen-onboarding .ob-steps{
  gap:8px;
  margin-bottom:24px;
  padding:5px;
  background:rgba(255,255,255,.7);
  box-shadow:inset 0 2px 8px rgba(74,35,143,.1) !important;
}
#screen-onboarding .ob-steps b{
  width:11px;
  height:11px;
  background:rgba(124,58,237,.24);
}
#screen-onboarding .ob-steps b.on{
  width:38px;
  background:linear-gradient(90deg,var(--kid-purple),var(--kid-pink));
  box-shadow:0 6px 14px rgba(236,72,153,.32) !important;
}
#screen-onboarding .ob-mascot{
  width:86px;
  height:86px;
  margin-bottom:15px;
  border:4px solid #fff;
  border-radius:28px;
  background:linear-gradient(135deg,var(--kid-yellow),#fff 48%,var(--kid-sky));
  font-size:40px;
  box-shadow:0 16px 28px rgba(124,58,237,.22), inset 0 -8px 0 rgba(0,0,0,.06) !important;
  animation:kidMascotPop 1.8s var(--bounce) infinite;
}
#screen-onboarding .ob-title{
  color:var(--kid-ink);
  font-size:30px;
  line-height:38px;
  font-weight:900;
  letter-spacing:0;
  text-shadow:0 2px 0 rgba(255,255,255,.8);
}
#screen-onboarding .ob-sub{
  color:var(--kid-muted);
  font-size:14px;
  line-height:23px;
  font-weight:700;
}
#screen-onboarding .ob-field{
  margin-top:16px;
}
#screen-onboarding .ob-field:first-of-type{
  margin-top:28px;
}
#screen-onboarding .need-parent-name.hide{
  display:none;
}
#screen-onboarding .ob-label{
  margin-right:10px;
  color:#5B21B6;
  font-size:13px;
  font-weight:900;
}
#screen-onboarding .ob-input{
  min-height:56px;
  border:2px solid rgba(124,58,237,.16);
  border-bottom-width:5px;
  border-radius:19px;
  background:#fff;
  color:var(--kid-ink);
  font-size:18px;
  font-weight:800;
  box-shadow:0 9px 18px rgba(124,58,237,.08) !important;
}
#screen-onboarding #ob-phone-input{
  font-size:22px;
  font-weight:900;
  letter-spacing:1.2px;
}
#screen-onboarding .ob-input:focus{
  border-color:rgba(124,58,237,.48);
  box-shadow:0 0 0 5px rgba(124,58,237,.13), 0 12px 24px rgba(124,58,237,.12) !important;
}
#screen-onboarding .parent-lookup{
  min-height:0;
  margin-top:13px;
  padding:0 12px;
  border-radius:18px;
  color:var(--kid-muted);
  font-size:13px;
  line-height:20px;
  font-weight:800;
  text-align:center;
  transform-origin:center;
}
#screen-onboarding .parent-lookup:not(:empty){
  min-height:44px;
  padding:11px 13px;
  background:#fff;
  border:2px solid rgba(124,58,237,.12);
  box-shadow:0 10px 18px rgba(124,58,237,.08) !important;
  animation:kidBounceIn .38s var(--bounce) both;
}
#screen-onboarding .parent-lookup.loading{
  color:#7C3AED;
}
#screen-onboarding .parent-lookup.loading::before{
  content:"";
  display:inline-block;
  width:10px;
  height:10px;
  margin-left:8px;
  border-radius:50%;
  background:var(--kid-pink);
  box-shadow:16px 0 0 var(--kid-yellow), 32px 0 0 var(--kid-sky) !important;
  animation:kidDots 1s ease-in-out infinite;
}
#screen-onboarding .parent-lookup.found{
  border-color:rgba(34,197,94,.28);
  background:linear-gradient(135deg,rgba(34,197,94,.14),#fff);
  color:#15803D;
}
#screen-onboarding .parent-lookup.new{
  border-color:rgba(236,72,153,.26);
  background:linear-gradient(135deg,rgba(236,72,153,.12),#fff);
  color:#BE185D;
}
#screen-onboarding .parent-lookup.hint{
  border-color:rgba(250,204,21,.36);
  background:linear-gradient(135deg,rgba(250,204,21,.18),#fff);
  color:#92400E;
}
#screen-onboarding .ob-consent{
  border:2px dashed rgba(124,58,237,.26);
  background:rgba(255,255,255,.72);
  color:#5B6474;
  font-weight:700;
}
#screen-onboarding .ob-consent svg{
  color:var(--kid-purple);
}
#screen-onboarding .ob-btn{
  min-height:58px;
  border-radius:20px;
  background:linear-gradient(135deg,var(--kid-purple),var(--kid-pink));
  font-size:17px;
  font-weight:900;
  box-shadow:0 9px 0 #5B21B6, 0 18px 28px rgba(124,58,237,.24) !important;
  animation:kidButtonPulse 2.2s ease-in-out infinite;
}
#screen-onboarding .ob-btn:active{
  transform:translateY(6px) scale(.99);
  box-shadow:0 3px 0 #5B21B6, 0 9px 16px rgba(124,58,237,.18) !important;
}
#screen-onboarding .ob-btn:disabled{
  background:#D8DCE8;
  color:#8B93A4;
  box-shadow:0 6px 0 #BCC3D4 !important;
  animation:none;
}
#screen-onboarding .ob-link,
#screen-onboarding .edit-phone{
  color:#5B21B6;
  font-weight:900;
}
#screen-onboarding .otp-hint{
  min-width:160px;
  border:2px solid rgba(37,99,235,.18);
  border-bottom-width:5px;
  background:linear-gradient(180deg,#fff,#EFF6FF);
  color:#2563EB;
  box-shadow:0 14px 24px rgba(37,99,235,.13) !important;
  animation:kidBounceIn .55s var(--bounce) both;
}
#screen-onboarding .otp-hint b{
  color:#1D4ED8;
  font-size:31px;
  font-weight:900;
}
#screen-onboarding .otp-row{
  gap:11px;
  margin-top:28px;
  perspective:500px;
}
#screen-onboarding .otp-box{
  width:58px;
  height:66px;
  border:3px solid #fff;
  border-bottom:7px solid rgba(37,99,235,.36);
  border-radius:20px;
  background:linear-gradient(180deg,#fff,#E0F2FE);
  color:var(--kid-ink);
  font-size:30px;
  font-weight:900;
  box-shadow:0 14px 22px rgba(37,99,235,.15) !important;
  animation:kidOtpFloat 2.6s ease-in-out infinite;
}
#screen-onboarding .otp-box:nth-child(2){animation-delay:.12s}
#screen-onboarding .otp-box:nth-child(3){animation-delay:.24s}
#screen-onboarding .otp-box:nth-child(4){animation-delay:.36s}
#screen-onboarding .otp-box:focus{
  border-color:#fff;
  border-bottom-color:var(--kid-pink);
  background:#fff;
  box-shadow:0 0 0 5px rgba(236,72,153,.14), 0 16px 26px rgba(236,72,153,.2) !important;
}
#screen-onboarding .otp-box.filled{
  background:linear-gradient(180deg,#fff,#DCFCE7);
  border-bottom-color:var(--kid-green);
}
#screen-onboarding .otp-error{
  color:#DC2626;
  font-weight:900;
}
#screen-onboarding .otp-timer{
  color:var(--kid-muted);
  font-weight:700;
}
#screen-onboarding #kids-list{
  margin-top:18px;
}
#screen-onboarding .kid-block{
  padding:16px 14px 12px;
  border:2px solid rgba(124,58,237,.13);
  border-bottom-width:6px;
  border-radius:28px;
  background:rgba(255,255,255,.78);
  box-shadow:0 18px 34px rgba(124,58,237,.12) !important;
}
#screen-onboarding .kid-block + .kid-block{
  border-top:2px solid rgba(124,58,237,.13);
}
#screen-onboarding .kid-head{
  color:#5B21B6;
  font-size:14px;
  font-weight:900;
}
#screen-onboarding .kid-remove{
  background:rgba(236,72,153,.12);
  color:#BE185D;
}
#screen-onboarding .age-chip{
  min-height:40px;
  border:2px solid transparent;
  border-bottom:4px solid rgba(124,58,237,.16);
  background:#fff;
  color:#6B7280;
  font-size:13px;
  font-weight:900;
}
#screen-onboarding .age-chip.sel{
  border-color:rgba(250,204,21,.55);
  border-bottom-color:#D97706;
  background:linear-gradient(180deg,#FEF3C7,#FACC15);
  color:#713F12;
}
#screen-onboarding .avatar-swiper-title{
  margin:2px 8px 0;
  color:#5B21B6;
  font-size:13px;
  font-weight:900;
  text-align:center;
}
#screen-onboarding .av-carousel.image-swiper{
  gap:0;
  margin:2px -14px 0;
  padding:12px calc(50% - 64px) 18px;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:calc(50% - 64px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
}
#screen-onboarding .av-pick{
  width:128px;
  min-width:128px;
  min-height:154px;
  margin:0 -14px;
  padding:0 8px 30px;
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none !important;
  filter:grayscale(1) saturate(.2) opacity(.38);
  transform:scale(.76) rotate(var(--tilt,-4deg));
  transform-origin:50% 86%;
  position:relative;
  transition:filter .32s ease,transform .32s var(--bounce);
}
#screen-onboarding .av-pick:nth-child(2n){--tilt:4deg}
#screen-onboarding .av-pick img{
  width:122px;
  height:136px;
  object-fit:contain;
  margin:0 auto;
  filter:drop-shadow(0 14px 15px rgba(23,32,51,.18));
}
#screen-onboarding .av-pick::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:7px;
  width:86px;
  height:24px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(37,99,235,.25),rgba(124,58,237,.10) 52%,transparent 72%);
  filter:blur(2px);
  transform:translateX(-50%) scale(.75);
  opacity:.45;
  transition:all .32s var(--bounce);
}
#screen-onboarding .av-pick::after{
  content:"";
  position:absolute;
  left:50%;
  right:auto;
  top:auto;
  bottom:-13px;
  width:92px;
  height:50px;
  border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.52),rgba(255,255,255,0));
  filter:blur(8px);
  transform:translateX(-50%) scaleY(.42);
  opacity:.25;
}
#screen-onboarding .av-pick.sel{
  background:transparent;
  border:none;
  filter:none;
  transform:scale(1.12) rotate(0);
  z-index:5;
  animation:kidAvatarChosen 2.1s ease-in-out infinite;
}
#screen-onboarding .av-pick.sel::before{
  width:116px;
  height:31px;
  opacity:.9;
  transform:translateX(-50%) scale(1);
}
#screen-onboarding .av-pick.sel::after{
  content:"";
  width:112px;
  height:58px;
  background:linear-gradient(180deg,rgba(124,58,237,.24),rgba(255,255,255,0));
  opacity:.55;
}
#screen-onboarding .ob-success .ob-title{
  color:#15803D;
}

@keyframes kidFloatBlock{
  0%,100%{transform:translateY(0) rotate(18deg)}
  50%{transform:translateY(-18px) rotate(6deg)}
}
@keyframes kidSpark{
  0%,100%{transform:scaleX(1);opacity:.72}
  50%{transform:scaleX(1.18);opacity:1}
}
@keyframes kidMascotPop{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-7px) rotate(3deg)}
}
@keyframes kidBounceIn{
  0%{opacity:0;transform:translateY(10px) scale(.96)}
  100%{opacity:1;transform:none}
}
@keyframes kidDots{
  0%,100%{transform:translateY(0);opacity:.55}
  50%{transform:translateY(-4px);opacity:1}
}
@keyframes kidButtonPulse{
  0%,100%{filter:saturate(1);transform:translateY(0)}
  50%{filter:saturate(1.18);transform:translateY(-2px)}
}
@keyframes kidOtpFloat{
  0%,100%{transform:translateY(0) rotateX(0)}
  50%{transform:translateY(-5px) rotateX(6deg)}
}
@keyframes kidAvatarChosen{
  0%,100%{transform:scale(1.12) translateY(0)}
  50%{transform:scale(1.15) translateY(-8px)}
}

@media (max-width:380px){
  #screen-onboarding .otp-box{
    width:52px;
    height:62px;
  }
  #screen-onboarding .av-carousel.image-swiper{
    padding-inline:calc(50% - 58px);
    scroll-padding-inline:calc(50% - 58px);
  }
  #screen-onboarding .av-pick{
    width:116px;
    min-width:116px;
  }
  #screen-onboarding .av-pick img{
    width:112px;
  }
}

/* ════════════════════════════════════════
   CONTEST WALLET - ACTIVE BRICK COIN CARD
   ════════════════════════════════════════ */
#view-contest .wallet{
  min-height:218px;
  padding:28px 18px 18px;
  border:3px solid rgba(255,255,255,.8);
  border-radius:28px;
  background:
    radial-gradient(circle at 16% 18%,rgba(255,255,255,.72),transparent 18%),
    linear-gradient(135deg,#FF2B2B 0%,#E3000B 48%,#B80008 100%);
  box-shadow:0 16px 0 #8F0007, 0 28px 42px rgba(227,0,11,.34) !important;
  overflow:hidden;
  isolation:isolate;
  transform-origin:center;
  animation:walletBreath 3.8s ease-in-out infinite;
}
#view-contest .wallet::before{
  z-index:0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0) 46%),
    radial-gradient(circle at 24% 25%,rgba(255,255,255,.13) 0 13%,transparent 14%),
    radial-gradient(circle at 74% 25%,rgba(255,255,255,.13) 0 13%,transparent 14%),
    radial-gradient(circle at 24% 76%,rgba(255,255,255,.12) 0 13%,transparent 14%),
    radial-gradient(circle at 74% 76%,rgba(255,255,255,.12) 0 13%,transparent 14%);
}
#view-contest .wallet::after{
  content:"";
  position:absolute;
  inset:auto -12px -24px auto;
  width:62%;
  height:72%;
  z-index:0;
  background:url("../assets/wallet-brick-stack.png") center/contain no-repeat;
  opacity:.52;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.34));
  animation:walletStackFloat 6s ease-in-out infinite;
  pointer-events:none;
}
#view-contest .wallet-bg-stack{
  position:absolute;
  left:-46px;
  top:-38px;
  width:180px;
  height:180px;
  z-index:0;
  background:
    linear-gradient(135deg,rgba(255,207,0,.95),rgba(255,109,0,.88));
  border-radius:32px;
  opacity:.58;
  transform:rotate(-13deg);
  box-shadow:42px 52px 0 -24px rgba(0,102,204,.55), 86px 16px 0 -38px rgba(0,150,63,.6) !important;
  animation:walletBlockWobble 5.2s ease-in-out infinite;
}
#view-contest .wallet .brick-studs{
  top:12px;
  right:18px;
  gap:13px;
  z-index:2;
}
#view-contest .wallet .brick-studs i{
  width:46px;
  height:42px;
  border-radius:50%;
  background:radial-gradient(circle at 38% 30%,rgba(255,255,255,.28),rgba(255,255,255,0) 42%),#F00009;
  box-shadow:inset 0 -7px 12px rgba(110,0,0,.34), inset 0 5px 7px rgba(255,255,255,.12), 0 9px 14px rgba(91,0,0,.22) !important;
  opacity:.9;
}
#view-contest .wallet-top,
#view-contest .wallet-actions,
#view-contest .wallet-note{
  position:relative;
  z-index:2;
}
#view-contest .wallet-top{
  align-items:center;
  min-height:118px;
}
#view-contest .wallet-copy{
  max-width:58%;
  padding-top:42px;
}
#view-contest .wallet-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:#B80008;
  font-size:12px;
  font-weight:900;
  box-shadow:0 5px 0 rgba(120,0,0,.18) !important;
}
#view-contest .wallet-label::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  background:#FFCF00;
  box-shadow:13px 0 0 #0066CC, 26px 0 0 #00963F !important;
}
#view-contest .wallet-bal{
  gap:10px;
  margin-top:12px;
}
#view-contest .wallet-coin-mini{
  width:42px;
  height:42px;
  flex:0 0 auto;
  filter:drop-shadow(0 7px 8px rgba(0,0,0,.24));
  animation:walletCoinSpin 3.1s ease-in-out infinite;
}
#view-contest .wallet-num{
  color:#fff;
  font-size:42px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.5px;
  text-shadow:0 4px 0 rgba(105,0,0,.26), 0 9px 20px rgba(0,0,0,.2);
}
#view-contest .wallet-sub{
  margin-top:7px;
  color:rgba(255,255,255,.92);
  font-size:12px;
  line-height:1.7;
  font-weight:800;
}
#view-contest .wallet-coin-stage{
  position:absolute;
  left:9px;
  top:35px;
  width:142px;
  height:142px;
  z-index:2;
  pointer-events:none;
}
#view-contest .wallet-coin-stage::before{
  content:"";
  position:absolute;
  inset:18px 10px 0;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,207,0,.55),rgba(255,207,0,0) 66%);
  filter:blur(12px);
  animation:walletGlow 2.2s ease-in-out infinite;
}
#view-contest .wallet-coin-hero{
  position:absolute;
  inset:12px;
  width:118px;
  height:118px;
  object-fit:contain;
  filter:drop-shadow(0 14px 12px rgba(0,0,0,.36));
  animation:walletHeroCoin 3.4s ease-in-out infinite;
}
#view-contest .coin-orbit{
  position:absolute;
  width:34px;
  height:34px;
  border-radius:50%;
  background:url("../assets/coin-rubika.png") center/contain no-repeat;
  filter:drop-shadow(0 7px 7px rgba(0,0,0,.26));
}
#view-contest .coin-orbit.c1{
  right:2px;
  top:3px;
  animation:walletOrbitA 4.4s ease-in-out infinite;
}
#view-contest .coin-orbit.c2{
  left:2px;
  bottom:10px;
  width:28px;
  height:28px;
  animation:walletOrbitB 5s ease-in-out infinite;
}
#view-contest .wallet-sparks{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}
#view-contest .wallet-sparks i{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:3px;
  background:#FFCF00;
  transform:rotate(45deg);
  animation:walletSpark 2.7s ease-in-out infinite;
}
#view-contest .wallet-sparks i:nth-child(1){top:30px;left:38%;background:#FFCF00}
#view-contest .wallet-sparks i:nth-child(2){top:92px;right:22px;background:#6EC6FF;animation-delay:.5s}
#view-contest .wallet-sparks i:nth-child(3){bottom:74px;left:35px;background:#97C459;animation-delay:1s}
#view-contest .wallet-actions{
  gap:10px;
  margin-top:8px;
}
#view-contest .wallet-actions button{
  min-height:44px;
  border:2px solid rgba(255,255,255,.75);
  border-bottom-width:5px;
  border-radius:16px;
  font-size:13px;
  box-shadow:0 9px 14px rgba(0,0,0,.18) !important;
}
#view-contest .btn-charge{
  background:linear-gradient(180deg,#FFE259,#FFCF00);
  color:#7A2600;
}
#view-contest .btn-hist{
  background:rgba(255,255,255,.94);
  color:#B80008;
}
#view-contest .wallet-note{
  display:inline-flex;
  margin-top:12px;
  padding:8px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  color:#8F0007;
  font-size:10px;
  box-shadow:0 5px 0 rgba(120,0,0,.13) !important;
}

@keyframes walletBreath{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-3px) rotate(.4deg)}
}
@keyframes walletBlockWobble{
  0%,100%{transform:rotate(-13deg) translateY(0)}
  50%{transform:rotate(-5deg) translateY(10px)}
}
@keyframes walletStackFloat{
  0%,100%{transform:translate(0,0) rotate(0)}
  50%{transform:translate(-8px,-8px) rotate(2deg)}
}
@keyframes walletCoinSpin{
  0%,100%{transform:rotate(-10deg) scale(1)}
  50%{transform:rotate(14deg) scale(1.08)}
}
@keyframes walletHeroCoin{
  0%,100%{transform:translateY(0) rotate(-8deg) scale(1)}
  50%{transform:translateY(-12px) rotate(9deg) scale(1.06)}
}
@keyframes walletGlow{
  0%,100%{opacity:.62;transform:scale(.9)}
  50%{opacity:1;transform:scale(1.1)}
}
@keyframes walletOrbitA{
  0%,100%{transform:translate(0,0) rotate(0)}
  50%{transform:translate(-12px,18px) rotate(24deg)}
}
@keyframes walletOrbitB{
  0%,100%{transform:translate(0,0) rotate(0)}
  50%{transform:translate(14px,-14px) rotate(-28deg)}
}
@keyframes walletSpark{
  0%,100%{opacity:.45;transform:rotate(45deg) scale(.7)}
  50%{opacity:1;transform:rotate(225deg) scale(1.2)}
}

@media (max-width:380px){
  #view-contest .wallet{
    min-height:224px;
    padding-inline:14px;
  }
  #view-contest .wallet-copy{
    max-width:62%;
  }
  #view-contest .wallet-num{
    font-size:35px;
  }
  #view-contest .wallet-coin-stage{
    left:-2px;
    width:124px;
    height:124px;
  }
  #view-contest .wallet-coin-hero{
    width:102px;
    height:102px;
  }
}

/* Compact wallet correction: 140px, small coin icon only */
#view-contest .wallet{
  height:140px;
  min-height:140px;
  padding:18px 18px 14px;
  border:0;
  border-radius:24px;
  background:
    radial-gradient(circle at 22% 24%,rgba(255,255,255,.38),transparent 18%),
    linear-gradient(180deg,#FFE982 0%,#FFD500 56%,#F8C400 100%);
  box-shadow:0 10px 0 #D5A900, 0 18px 30px rgba(177,139,0,.22) !important;
  animation:walletBreath 4.2s ease-in-out infinite;
}
#view-contest .wallet::before{
  background:
    linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0) 44%),
    radial-gradient(circle at 24% 31%,rgba(198,155,0,.12) 0 11%,transparent 12%),
    radial-gradient(circle at 48% 31%,rgba(198,155,0,.12) 0 11%,transparent 12%),
    radial-gradient(circle at 72% 31%,rgba(198,155,0,.12) 0 11%,transparent 12%);
}
#view-contest .wallet::after{
  width:116px;
  height:116px;
  inset:auto auto -28px -20px;
  opacity:.16;
  filter:none;
  animation:none;
}
#view-contest .wallet-bg-stack,
#view-contest .wallet-sparks,
#view-contest .wallet-coin-stage{
  display:none;
}
#view-contest .wallet .brick-studs{
  top:15px;
  left:22px;
  right:auto;
  gap:11px;
}
#view-contest .wallet .brick-studs i{
  width:26px;
  height:18px;
  background:#FFCF00;
  box-shadow:inset 0 -4px 6px rgba(135,105,0,.22), inset 0 2px 3px rgba(255,255,255,.52) !important;
}
#view-contest .wallet-top{
  min-height:0;
  align-items:flex-start;
}
#view-contest .wallet-copy{
  max-width:100%;
  padding-top:30px;
}
#view-contest .wallet-label{
  padding:0;
  background:transparent;
  color:#8A6D00;
  font-size:13px;
  line-height:18px;
  box-shadow:none !important;
}
#view-contest .wallet-label::before{
  display:none;
}
#view-contest .wallet-bal{
  margin-top:5px;
  gap:8px;
  justify-content:flex-start;
  direction:rtl;
}
#view-contest .wallet-coin-mini{
  width:30px;
  height:30px;
  filter:drop-shadow(0 4px 5px rgba(135,95,0,.24));
  animation:walletCoinSpin 4s ease-in-out infinite;
}
#view-contest .wallet-num{
  color:#15232E;
  font-size:36px;
  line-height:1;
  text-shadow:none;
}
#view-contest .wallet-sub{
  display:none;
}
#view-contest .wallet-actions{
  position:absolute;
  right:18px;
  left:18px;
  bottom:14px;
  display:flex;
  gap:10px;
  margin:0;
}
#view-contest .wallet-actions button{
  min-height:36px;
  padding:8px 12px;
  border:0;
  border-radius:13px;
  border-bottom:4px solid rgba(0,0,0,.14);
  font-size:12px;
  box-shadow:none !important;
}
#view-contest .wallet-actions svg{
  width:16px;
  height:16px;
}
#view-contest .btn-charge{
  background:#E3000B;
  color:#fff;
}
#view-contest .btn-hist{
  background:#fff;
  color:#15232E;
}
#view-contest .wallet-note{
  display:none;
}

/* Final wallet layout fix: no overlap inside 140px */
#view-contest .wallet{
  height:140px;
  min-height:140px;
  padding:0;
  overflow:hidden;
}
#view-contest .wallet::before{
  background:
    linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,0) 48%),
    radial-gradient(circle at 24% 36%,rgba(178,137,0,.08) 0 12%,transparent 13%),
    radial-gradient(circle at 47% 36%,rgba(178,137,0,.08) 0 12%,transparent 13%),
    radial-gradient(circle at 70% 36%,rgba(178,137,0,.08) 0 12%,transparent 13%);
}
#view-contest .wallet::after{
  display:none;
}
#view-contest .wallet-top{
  display:block;
  min-height:0;
}
#view-contest .wallet-copy{
  max-width:none;
  padding:0;
}
#view-contest .wallet .brick-studs{
  top:14px;
  left:24px;
  right:auto;
  gap:10px;
}
#view-contest .wallet .brick-studs i{
  width:24px;
  height:16px;
  opacity:.72;
}
#view-contest .wallet-label{
  position:absolute;
  top:29px;
  right:24px;
  z-index:3;
  color:#8A6D00;
  font-size:13px;
  line-height:18px;
}
#view-contest .wallet-bal{
  position:absolute;
  top:51px;
  right:24px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:7px;
  margin:0;
}
#view-contest .wallet-coin-mini{
  width:32px;
  height:32px;
  filter:drop-shadow(0 3px 4px rgba(135,95,0,.22));
}
#view-contest .wallet-num{
  font-size:31px;
  line-height:34px;
  letter-spacing:0;
}
#view-contest .wallet-actions{
  right:18px;
  left:18px;
  bottom:15px;
  height:38px;
  align-items:stretch;
}
#view-contest .wallet-actions button{
  min-height:38px;
  height:38px;
  padding:0 12px;
  border-radius:14px;
  font-size:13px;
}

@media (max-width:380px){
  #view-contest .wallet{
    height:140px;
    min-height:140px;
    padding:0;
  }
  #view-contest .wallet-copy{
    max-width:none;
    padding:0;
  }
  #view-contest .wallet-label{right:18px}
  #view-contest .wallet-bal{right:18px}
  #view-contest .wallet-num{
    font-size:29px;
  }
  #view-contest .wallet-coin-mini{
    width:30px;
    height:30px;
  }
  #view-contest .wallet-actions{
    right:14px;
    left:14px;
  }
}

/* User supplied SVG frame for the coin wallet */
#view-contest .wallet{
  height:140px;
  min-height:140px;
  padding:0;
  border:0;
  border-radius:26px;
  background:url("../assets/wallet-frame.svg") center/100% 100% no-repeat;
  box-shadow:none !important;
  animation:none;
  overflow:hidden;
}
#view-contest .wallet::before,
#view-contest .wallet::after,
#view-contest .wallet-bg-stack,
#view-contest .wallet-sparks,
#view-contest .wallet-coin-stage,
#view-contest .wallet .brick-studs{
  display:none !important;
}
#view-contest .wallet-top{
  display:block;
  min-height:0;
}
#view-contest .wallet-copy{
  max-width:none;
  padding:0;
}
#view-contest .wallet-label{
  position:absolute;
  top:30px;
  right:24px;
  z-index:3;
  display:block;
  padding:0;
  border-radius:0;
  background:transparent;
  color:#8A6D00;
  font-size:13px;
  line-height:18px;
  font-weight:900;
  box-shadow:none !important;
}
#view-contest .wallet-label::before,
#view-contest .wallet-sub,
#view-contest .wallet-note{
  display:none !important;
}
#view-contest .wallet-bal{
  position:absolute;
  top:52px;
  right:24px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  direction:rtl;
}
#view-contest .wallet-coin-mini{
  width:34px;
  height:34px;
  flex:0 0 auto;
  filter:drop-shadow(0 3px 4px rgba(135,95,0,.24));
  animation:walletCoinSpin 4s ease-in-out infinite;
}
#view-contest .wallet-num{
  color:#15232E;
  font-size:32px;
  line-height:34px;
  letter-spacing:0;
  text-shadow:none;
}
#view-contest .wallet-actions{
  position:absolute;
  right:18px;
  left:18px;
  bottom:14px;
  z-index:3;
  display:flex;
  align-items:stretch;
  gap:10px;
  height:36px;
  margin:0;
}
#view-contest .wallet-actions button{
  min-height:36px;
  height:36px;
  padding:0 12px;
  border:0;
  border-bottom:4px solid rgba(0,0,0,.14);
  border-radius:13px;
  font-size:13px;
  box-shadow:none !important;
}
#view-contest .wallet-actions svg{
  width:16px;
  height:16px;
}
#view-contest .btn-charge{
  background:#E3000B;
  color:#fff;
}
#view-contest .btn-hist{
  background:#fff;
  color:#15232E;
}

/* Keep studs only on the wallet SVG frame */
.camp .brick-studs,
.draw-cta .brick-studs,
.coin-hero .brick-studs,
.pack .brick-studs,
.prof-hero .brick-studs,
.svc .brick-studs{
  display:none !important;
}

/* Compact profile card and keep recent activity above bottom nav */
#view-profile{
  padding-bottom:142px;
}
#view-profile .prof-hero{
  height:140px;
  min-height:140px;
  margin-bottom:16px;
  padding:18px 128px 16px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  text-align:right;
  overflow:hidden;
}
#view-profile .prof-av{
  position:absolute;
  top:22px;
  right:22px;
  width:82px;
  height:82px;
  margin:0;
  border-radius:24px;
  font-size:44px;
  box-shadow:0 5px 0 rgba(0,0,0,.28) !important;
}
#view-profile .prof-name{
  font-size:20px;
  line-height:1.25;
  margin:0 0 6px;
}
#view-profile .prof-lvl{
  margin-top:0;
  padding:4px 10px;
  font-size:11px;
  line-height:1.4;
}
#view-profile .xp-bar{
  width:100%;
  height:10px;
  margin-top:11px;
}
#view-profile .xp-txt{
  margin-top:5px;
  font-size:10px;
}
#view-profile .feed{
  margin-bottom:34px;
}
#view-profile .feed-item{
  padding:9px 0;
}
#view-profile .feed-title{
  margin-top:16px;
  margin-bottom:10px;
}
.admin-entry{
  width:100%;
  margin:14px 0 0;
  padding:13px 16px;
  border-radius:16px;
  background:linear-gradient(180deg,#8E44AD,#74338F);
  color:#fff;
  font-weight:900;
  font-size:14px;
  box-shadow:0 5px 0 #5E2875 !important;
}
.admin-panel{
  margin-top:14px;
  background:#fff;
  border-radius:18px;
  padding:14px;
  box-shadow:var(--depth-sm) #d8cba6, 0 12px 26px rgba(21,35,46,.12) !important;
}
.admin-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:12px;
}
.admin-head div{
  border-radius:14px;
  padding:10px;
  background:#F4EDFA;
  text-align:center;
}
.admin-head b{
  display:block;
  color:#8E44AD;
  font-size:21px;
  font-weight:900;
}
.admin-head span,
.admin-date,
.admin-empty,
.admin-loading{
  color:var(--muted);
  font-size:10px;
  font-weight:800;
}
.admin-table{
  display:flex;
  flex-direction:column;
  gap:9px;
}
.admin-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px 12px;
  align-items:center;
  padding:10px;
  border:1px solid #EEF1F5;
  border-radius:14px;
  background:#FAFBFC;
}
.admin-main strong{
  display:block;
  font-size:13px;
  font-weight:900;
}
.admin-main span{
  display:block;
  margin-top:2px;
  color:#5b6b78;
  font-size:11px;
  font-weight:800;
}
.admin-meta{
  min-width:54px;
  border-radius:12px;
  padding:7px 8px;
  background:#FFF2BF;
  color:#8A6D00;
  text-align:center;
}
.admin-meta b{
  display:block;
  font-size:16px;
  font-weight:900;
}
.admin-meta span{
  font-size:9px;
  font-weight:900;
}
.admin-date{
  grid-column:1 / -1;
}
.admin-events-title{
  margin:14px 2px 8px;
  font-size:12px;
  font-weight:900;
  color:#15232E;
}
.admin-events{
  display:flex;
  flex-direction:column;
  gap:7px;
  max-height:220px;
  overflow:auto;
}
.admin-event{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:4px 8px;
  padding:9px 10px;
  border-radius:12px;
  background:#F7F8FA;
}
.admin-event span{
  color:#8E44AD;
  font-size:11px;
  font-weight:900;
}
.admin-event b{
  font-size:11px;
  font-weight:900;
}
.admin-event small{
  grid-column:1 / -1;
  color:var(--muted);
  font-size:9px;
  font-weight:800;
}

@media (max-width:380px){
  #view-contest .wallet-label,
  #view-contest .wallet-bal{
    right:18px;
  }
  #view-contest .wallet-num{
    font-size:29px;
  }
  #view-contest .wallet-coin-mini{
    width:32px;
    height:32px;
  }
  #view-contest .wallet-actions{
    right:14px;
    left:14px;
  }
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}

/* ════════════════════════════════════════
   EDITS (kidss22) — requested tweaks
   ════════════════════════════════════════ */

/* 1) Remove the bottom-left floating colored block on onboarding/OTP */
#screen-onboarding::after{ content:none !important; display:none !important; }

/* 4) "نقاشی‌های من" card — more playful & childish, full LEGO colors */
.draw-cta.draw-lego{
  background:
    linear-gradient(135deg,#FF3B6B 0%,#FF8A00 26%,#FFD500 50%,#2DBE60 72%,#2563EB 100%);
  border:4px solid #fff;
  box-shadow:0 12px 0 #c01649, 0 18px 28px rgba(0,0,0,.22);
  animation:legoWobble 4s ease-in-out infinite;
}
@keyframes legoWobble{
  0%,100%{transform:rotate(0deg)}
  25%{transform:rotate(-1deg)}
  75%{transform:rotate(1deg)}
}
.draw-cta.draw-lego .lego-studs{display:flex;gap:10px}
.draw-cta.draw-lego .lego-studs i{
  width:16px;height:16px;border-radius:50%;
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.25), 0 2px 2px rgba(0,0,0,.18);
}
.draw-cta.draw-lego .lego-studs i:nth-child(1){background:#FF3B6B}
.draw-cta.draw-lego .lego-studs i:nth-child(2){background:#FFD500}
.draw-cta.draw-lego .lego-studs i:nth-child(3){background:#2DBE60}
.draw-cta.draw-lego .lego-studs i:nth-child(4){background:#2563EB}
.draw-cta.draw-lego .cam-btn{
  border:3px solid #FFD500;
  box-shadow:0 6px 0 rgba(0,0,0,.3), 0 0 0 6px rgba(255,255,255,.35);
}
.draw-cta.draw-lego .draw-cta-txt h4{font-size:18px;text-shadow:0 2px 0 rgba(0,0,0,.18)}
.draw-cta.draw-lego .draw-cta-txt p{opacity:1;font-weight:700;text-shadow:0 1px 0 rgba(0,0,0,.16)}
.draw-cta.draw-lego .draw-deco{position:absolute;font-size:26px;opacity:.95;pointer-events:none}
.draw-cta.draw-lego .draw-deco.d1{top:10px;left:14px;animation:drawBob 2.6s ease-in-out infinite}
.draw-cta.draw-lego .draw-deco.d2{bottom:12px;left:46px;font-size:22px;animation:drawBob 3.1s ease-in-out .4s infinite}
.draw-cta.draw-lego .draw-deco.d3{top:18px;left:70px;font-size:18px;animation:drawBob 2.2s ease-in-out .8s infinite}
@keyframes drawBob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-7px) rotate(8deg)}}

/* 2) Notification sheet list */
.notif-list{display:flex;flex-direction:column;gap:10px;margin:6px 0 14px;text-align:right}
.notif-item{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:12px;box-shadow:0 3px 0 rgba(0,0,0,.06)}
.notif-ic{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  font-size:22px;color:#fff;flex-shrink:0;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.notif-body{flex:1;min-width:0}
.notif-t{font-weight:800;font-size:14px;line-height:1.5}
.notif-d{font-size:12px;color:var(--muted,#8a8a8a);margin-top:2px}

/* Cartoon cards — poster images */
.media-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.media-thumb .media-emoji{position:relative;z-index:1}
.media-thumb:has(.media-poster) .media-emoji{display:none}
.media-thumb .safe-badge,.media-thumb .media-play,.media-thumb .media-dur,.media-thumb .media-age{z-index:2}
.media-age{position:absolute;top:8px;left:8px;background:var(--purple,#7C3AED);color:#fff;font-size:9px;
  font-weight:900;padding:3px 8px;border-radius:20px;box-shadow:0 2px 0 rgba(0,0,0,.18)}

/* Featured cartoon banner — full poster image */
.feat-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.feat-cartoon.has-poster::before{display:none}
.feat-cartoon.has-poster .feat-emoji,
.feat-cartoon.has-poster .feat-txt{display:none}

/* Rubika coin icon — used everywhere a coin icon appears */
.coin-ic{width:1.05em;height:1.05em;object-fit:contain;display:inline-block;vertical-align:-0.18em}
.pack-coin .coin-ic,.stat-ic .coin-ic,.slide-emoji .coin-ic,.sheet-emoji .coin-ic{vertical-align:middle}
.slide-emoji .coin-ic{width:1em;height:1em;filter:drop-shadow(0 5px 4px rgba(0,0,0,.25))}
.coin-hero-ic{width:1.1em;height:1.1em;vertical-align:-0.2em;margin-left:6px}

/* ════════════════════════════════════════
   COIN-HERO — playful golden coin-brick card
   ════════════════════════════════════════ */
.coin-hero-fun{
  position:relative;overflow:hidden;cursor:pointer;
  background:
    radial-gradient(120% 80% at 50% -10%, #FFF6C2 0%, transparent 55%),
    linear-gradient(180deg,#FFE680 0%,#FFD500 46%,#F7B500 100%);
  border:3px solid #fff3b0;
  border-radius:26px;
  box-shadow:
    0 12px 0 #C98A00,            /* thick brick depth */
    0 20px 30px rgba(201,138,0,.35),
    inset 0 3px 0 rgba(255,255,255,.85),
    inset 0 -10px 18px rgba(201,138,0,.28);
  animation:chBreathe 3.6s ease-in-out infinite;
  transition:transform .12s ease, box-shadow .12s ease;
}
.coin-hero-fun:active{
  transform:translateY(8px) scale(.99);
  box-shadow:0 4px 0 #C98A00, 0 8px 14px rgba(201,138,0,.3),
    inset 0 3px 0 rgba(255,255,255,.85), inset 0 -8px 14px rgba(201,138,0,.28);
}
@keyframes chBreathe{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-.4deg)}}

/* diagonal moving shine */
.ch-shine{position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.75),transparent);
  transform:skewX(-18deg);animation:chShine 3.2s ease-in-out infinite}
@keyframes chShine{0%{left:-60%}55%,100%{left:130%}}

/* golden coin studs with shine */
.coin-hero-fun .brick-studs i{
  width:17px;height:13px;background:linear-gradient(180deg,#FFF1A8,#FFD500 60%,#E0A800);
  box-shadow:inset 0 -2px 2px rgba(180,120,0,.5), 0 1px 1px rgba(0,0,0,.12)}

.coin-hero-fun .ch-label{position:relative;z-index:2;font-size:14px;font-weight:900;color:#7a5c00;
  text-shadow:0 1px 0 rgba(255,255,255,.6)}
.coin-hero-fun .ch-num{position:relative;z-index:2;margin-top:6px;gap:12px}
.coin-hero-fun .ch-bal{
  font-size:46px;font-weight:900;color:#5a4200;
  text-shadow:0 2px 0 #fff5cc, 0 4px 6px rgba(180,120,0,.35);
  animation:chPop 3.6s ease-in-out infinite}
@keyframes chPop{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.coin-hero-fun .ch-bal.bump{animation:chBump .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes chBump{0%{transform:scale(1)}40%{transform:scale(1.35) rotate(-3deg)}100%{transform:scale(1)}}

/* spinning coin */
.coin-hero-fun .ch-coin-spin{display:inline-flex;animation:chSpin 2.6s ease-in-out infinite}
.coin-hero-fun .ch-coin-spin .coin-hero-ic{width:46px;height:46px;margin:0;
  filter:drop-shadow(0 4px 5px rgba(180,120,0,.45))}
@keyframes chSpin{0%,100%{transform:rotateY(0) scale(1)}
  45%{transform:rotateY(180deg) scale(1.12)}90%{transform:rotateY(360deg) scale(1)}}

.coin-hero-fun .ch-hint{position:relative;z-index:2;margin-top:10px;font-size:11px;font-weight:800;
  color:#8a6d00;opacity:.85;animation:chHint 2.4s ease-in-out infinite}
@keyframes chHint{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(2px);opacity:1}}

/* floating coins & sparkles */
.ch-floaters{position:absolute;inset:0;z-index:1;pointer-events:none}
.ch-fl{position:absolute;bottom:-18px;font-size:18px;opacity:0;animation:chFloat 4.2s ease-in infinite}
.ch-fl.f1{left:12%;animation-delay:0s}
.ch-fl.f2{left:32%;animation-delay:1s;font-size:14px}
.ch-fl.f3{left:54%;animation-delay:2s;font-size:16px}
.ch-fl.f4{left:74%;animation-delay:.6s}
.ch-fl.f5{left:88%;animation-delay:1.6s;font-size:13px}
@keyframes chFloat{
  0%{transform:translateY(0) rotate(0);opacity:0}
  15%{opacity:.95}
  80%{opacity:.6}
  100%{transform:translateY(-150px) rotate(40deg);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .coin-hero-fun,.ch-shine,.ch-bal,.ch-coin-spin,.ch-hint,.ch-fl{animation:none !important}
}

/* ════════════════════════════════════════
   FIX 1 — clear the floating bottom nav on every page
   ════════════════════════════════════════ */
main.app{padding-bottom:150px !important}
#view-profile{padding-bottom:150px !important}

/* ════════════════════════════════════════
   FIX 2 — Admin panel in its own window (modal)
   ════════════════════════════════════════ */
.admin-modal{position:fixed;inset:0;z-index:600;background:rgba(21,35,46,.55);
  display:flex;align-items:center;justify-content:center;padding:18px;
  opacity:0;pointer-events:none;transition:opacity .25s}
.admin-modal.open{opacity:1;pointer-events:auto}
.admin-win{width:100%;max-width:432px;max-height:86vh;display:flex;flex-direction:column;
  background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45);
  transform:translateY(22px) scale(.95);transition:transform .32s var(--bounce)}
.admin-modal.open .admin-win{transform:none}
.admin-win-head{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;
  background:linear-gradient(135deg,#2C2C2A,#5f5e5a);color:#fff}
.admin-win-title{font-weight:900;font-size:17px}
.admin-win-x{width:34px;height:34px;border-radius:50%;border:none;background:rgba(255,255,255,.2);
  color:#fff;font-size:15px;cursor:pointer;line-height:1}
.admin-win-x:active{transform:scale(.92)}
.admin-win-body{padding:16px;overflow-y:auto}

/* ════════════════════════════════════════
   FIX 3 — Story maker (قصه‌ساز) modal
   ════════════════════════════════════════ */
.story-modal{position:fixed;inset:0;z-index:600;background:rgba(21,35,46,.5);
  display:flex;align-items:center;justify-content:center;padding:16px;
  opacity:0;pointer-events:none;transition:opacity .25s}
.story-modal.open{opacity:1;pointer-events:auto}
.story-win{width:100%;max-width:432px;max-height:88vh;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#FFF7ED,#fff);border-radius:26px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.45);transform:translateY(24px) scale(.95);
  transition:transform .35s var(--bounce)}
.story-modal.open .story-win{transform:none}
.story-head{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;
  background:linear-gradient(135deg,#8E44AD,#6f3389);color:#fff;font-weight:900;font-size:17px}
.story-x{width:34px;height:34px;border-radius:50%;border:none;background:rgba(255,255,255,.22);
  color:#fff;font-size:15px;cursor:pointer;line-height:1}
.story-x:active{transform:scale(.92)}
.story-body{padding:14px 16px 20px;overflow-y:auto}
.story-q{font-weight:900;font-size:15px;margin:14px 2px 9px;color:#5a3d7a}
.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.story-chip{display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px 6px;
  border-radius:16px;border:2.5px solid #eadcf5;background:#fff;cursor:pointer;
  transition:transform .15s,border-color .15s,box-shadow .15s}
.story-chip-e{font-size:30px;line-height:1}
.story-chip-n{font-size:11px;font-weight:800;color:#6a5a7a}
.story-chip:active{transform:scale(.94)}
.story-chip.sel{border-color:#8E44AD;background:#f6edfc;transform:translateY(-2px);box-shadow:0 5px 0 #d9c2ec}
.story-make{width:100%;margin-top:18px;padding:15px;border:none;border-radius:16px;
  background:linear-gradient(135deg,#F2A900,#F28C00);color:#fff;font-weight:900;font-size:16px;
  cursor:pointer;box-shadow:0 6px 0 #c98a00;transition:transform .12s,box-shadow .12s}
.story-make:disabled{opacity:.5;box-shadow:none;cursor:default}
.story-make:not(:disabled):active{transform:translateY(4px);box-shadow:0 2px 0 #c98a00}
.story-read{text-align:center}
.story-scene{font-size:78px;line-height:1.1;margin:6px 0 2px;animation:storyPop .5s var(--bounce)}
@keyframes storyPop{0%{transform:scale(.4) rotate(-10deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
.story-page-txt{font-size:17px;font-weight:700;line-height:2;color:#3a3340;min-height:104px;padding:0 4px}
.story-dots{display:flex;justify-content:center;gap:7px;margin:14px 0}
.story-dots i{width:9px;height:9px;border-radius:50%;background:#e0d2ee;transition:all .25s}
.story-dots i.on{background:#8E44AD;width:22px;border-radius:5px}
.story-nav{display:flex;gap:10px}
.story-prev,.story-next{flex:1;padding:13px;border:none;border-radius:14px;font-weight:900;font-size:14px;cursor:pointer;transition:transform .12s,box-shadow .12s}
.story-prev{background:#ece6f2;color:#6a5a7a}
.story-prev:disabled{opacity:.4}
.story-next{background:#8E44AD;color:#fff;box-shadow:0 5px 0 #5f2d80}
.story-next:active{transform:translateY(3px);box-shadow:0 2px 0 #5f2d80}
.story-finish{background:linear-gradient(135deg,#237841,#2DBE60) !important;box-shadow:0 5px 0 #185730 !important}
.story-restart{width:100%;margin-top:12px;background:none;border:none;color:#8E44AD;font-weight:800;font-size:13px;cursor:pointer}

/* ════════════════════════════════════════
   FIX 4 — LEGO-brick bottom nav
   ════════════════════════════════════════ */
.nav-lego{
  background:linear-gradient(180deg,#ffffff,#eef1f5) !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  border:3px solid #ffffff !important;border-radius:22px !important;
  box-shadow:0 9px 0 rgba(21,35,46,.16), 0 16px 30px rgba(21,35,46,.20),
             inset 0 2px 0 rgba(255,255,255,.95) !important;
  padding:12px 6px 10px !important;
  overflow:visible;
}
/* row of colorful LEGO studs on the brick's top edge */
.nav-studs{position:absolute;top:-8px;left:26px;right:26px;display:flex;justify-content:space-between;
  pointer-events:none;z-index:3}
.nav-studs i{width:27px;height:12px;border-radius:8px 8px 5px 5px;
  box-shadow:inset 0 -3px 3px rgba(0,0,0,.22), 0 1px 1px rgba(0,0,0,.15);
  animation:studBob 2.8s ease-in-out infinite}
.nav-studs i:nth-child(1){background:#E3000B;animation-delay:0s}
.nav-studs i:nth-child(2){background:#FF6D00;animation-delay:.2s}
.nav-studs i:nth-child(3){background:#FFD500;animation-delay:.4s}
.nav-studs i:nth-child(4){background:#0066CC;animation-delay:.6s}
.nav-studs i:nth-child(5){background:#00963F;animation-delay:.8s}
@keyframes studBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
/* active tab raised like a coin-stud */
.nav-lego .nav-item.on .nav-ic{
  border-radius:50% !important;
  box-shadow:0 8px 0 rgba(0,0,0,.18), 0 10px 18px rgba(21,35,46,.28), 0 0 18px 3px var(--c) !important;
}
@media (prefers-reduced-motion:reduce){ .nav-studs i{animation:none} }

/* ════════════════════════════════════════
   FIX 5 — playful animated LEGO-color bottom nav
   ════════════════════════════════════════ */
.nav.nav-lego{
  --nav-red:#E3000B;
  --nav-yellow:#FFCF00;
  --nav-blue:#0066CC;
  --nav-green:#00963F;
  --nav-orange:#FF6D00;
  --nav-purple:#8E44AD;
  bottom:12px !important;
  width:calc(100% - 20px) !important;
  max-width:420px !important;
  min-height:82px;
  padding:13px 7px 11px !important;
  border:0 !important;
  border-radius:24px !important;
  background:
    linear-gradient(90deg,
      var(--nav-red) 0 20%,
      var(--nav-orange) 20% 40%,
      var(--nav-yellow) 40% 60%,
      var(--nav-blue) 60% 80%,
      var(--nav-green) 80% 100%) !important;
  box-shadow:
    0 8px 0 #21313d,
    0 18px 30px rgba(21,35,46,.25),
    inset 0 3px 0 rgba(255,255,255,.55) !important;
  overflow:visible;
}
.nav.nav-lego::before{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:19px;
  background:rgba(255,255,255,.92);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.95), inset 0 -3px 0 rgba(21,35,46,.08);
  pointer-events:none;
}
.nav.nav-lego::after{
  content:none !important;
}
.nav.nav-lego .nav-studs{display:none !important}
.nav.nav-lego .nav-studs i{
  width:30px;
  height:16px;
  border-radius:14px 14px 8px 8px;
  box-shadow:inset 0 -4px 4px rgba(0,0,0,.24), inset 0 2px 0 rgba(255,255,255,.45), 0 3px 0 rgba(21,35,46,.18);
  animation:navStudDance 2.6s ease-in-out infinite;
}
.nav.nav-lego .nav-studs i:nth-child(1){background:var(--nav-red)}
.nav.nav-lego .nav-studs i:nth-child(2){background:var(--nav-orange)}
.nav.nav-lego .nav-studs i:nth-child(3){background:var(--nav-yellow)}
.nav.nav-lego .nav-studs i:nth-child(4){background:var(--nav-blue)}
.nav.nav-lego .nav-studs i:nth-child(5){background:var(--nav-green)}
.nav.nav-lego .nav-item{
  position:relative;
  z-index:2;
  min-width:0;
  gap:4px;
  color:#586778;
  transform:none;
}
.nav.nav-lego .nav-item[data-tab="profile"]{--c:var(--nav-purple);--d:#65307f}
.nav.nav-lego .nav-item[data-tab="coins"]{--c:var(--nav-orange);--d:#bd4e00}
.nav.nav-lego .nav-item[data-tab="contest"]{--c:var(--nav-red);--d:#a60008}
.nav.nav-lego .nav-item[data-tab="cartoon"]{--c:var(--nav-blue);--d:#004891}
.nav.nav-lego .nav-item[data-tab="services"]{--c:var(--nav-green);--d:#006f2f}
.nav.nav-lego .nav-ic{
  width:44px;
  height:44px;
  border-radius:15px !important;
  background:#fff !important;
  color:var(--c);
  border:3px solid rgba(21,35,46,.09) !important;
  box-shadow:0 4px 0 rgba(21,35,46,.13), inset 0 2px 0 rgba(255,255,255,.9) !important;
  transition:transform .28s var(--bounce), background .2s, color .2s, box-shadow .2s;
}
.nav.nav-lego .nav-item span:last-child{
  max-width:64px;
  min-height:16px;
  padding:1px 5px 0;
  border-radius:999px;
  color:#657487;
  font-size:10px;
  font-weight:900;
  line-height:1.45;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:background .2s,color .2s,transform .2s;
}
.nav.nav-lego .nav-item.on{
  transform:translateY(-15px);
  animation:navKidBounce .62s var(--bounce);
}
.nav.nav-lego .nav-item.on .nav-ic{
  width:58px;
  height:58px;
  border-radius:19px !important;
  background:var(--c) !important;
  color:#fff;
  border:4px solid #fff !important;
  box-shadow:
    0 8px 0 var(--d),
    0 14px 22px rgba(21,35,46,.30),
    0 0 0 6px color-mix(in srgb, var(--c) 18%, transparent),
    inset 0 3px 0 rgba(255,255,255,.45) !important;
}
.nav.nav-lego .nav-item.on .nav-ic::before{
  content:"";
  position:absolute;
  top:7px;
  right:9px;
  width:12px;
  height:7px;
  border-radius:999px;
  background:rgba(255,255,255,.48);
}
.nav.nav-lego .nav-item.on .nav-ic::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:24px;
  background:
    radial-gradient(circle at 22% 20%, var(--nav-yellow) 0 3px, transparent 4px),
    radial-gradient(circle at 78% 28%, var(--nav-blue) 0 3px, transparent 4px),
    radial-gradient(circle at 70% 76%, var(--nav-green) 0 3px, transparent 4px),
    radial-gradient(circle at 28% 78%, var(--nav-orange) 0 3px, transparent 4px);
  opacity:.95;
  animation:navSparkle 1.6s ease-in-out infinite;
  pointer-events:none;
}
.nav.nav-lego .nav-item.on svg{animation:navIconWobble .75s var(--bounce)}
.nav.nav-lego .nav-item.on span:last-child{
  background:var(--c);
  color:#fff;
  transform:translateY(2px);
  box-shadow:0 2px 0 var(--d);
}
@keyframes navStudDance{
  0%,100%{transform:translateY(0) rotate(0)}
  45%{transform:translateY(-3px) rotate(-2deg)}
  65%{transform:translateY(-1px) rotate(2deg)}
}
@keyframes navKidBounce{
  0%{transform:translateY(0) scale(.86) rotate(-4deg)}
  45%{transform:translateY(-18px) scale(1.08) rotate(3deg)}
  70%{transform:translateY(-11px) scale(.97) rotate(-2deg)}
  100%{transform:translateY(-15px) scale(1) rotate(0)}
}
@keyframes navIconWobble{
  0%{transform:scale(.72) rotate(-14deg)}
  45%{transform:scale(1.14) rotate(10deg)}
  72%{transform:scale(.95) rotate(-5deg)}
  100%{transform:scale(1) rotate(0)}
}
@keyframes navSparkle{
  0%,100%{transform:scale(.9) rotate(0);opacity:.55}
  50%{transform:scale(1.08) rotate(10deg);opacity:1}
}
@media (max-width:380px){
  .nav.nav-lego{width:calc(100% - 14px) !important;padding-right:4px !important;padding-left:4px !important}
  .nav.nav-lego .nav-ic{width:40px;height:40px}
  .nav.nav-lego .nav-item.on .nav-ic{width:54px;height:54px}
  .nav.nav-lego .nav-item span:last-child{font-size:9px;max-width:58px}
}
@media (prefers-reduced-motion:reduce){
  .nav.nav-lego .nav-studs i,
  .nav.nav-lego .nav-item.on,
  .nav.nav-lego .nav-item.on svg,
  .nav.nav-lego .nav-item.on .nav-ic::after{animation:none !important}
}

/* ════════════════════════════════════════
   PWA install guide + mission/admin upgrades
   ════════════════════════════════════════ */
.install-guide{position:fixed;inset:0;z-index:900;display:flex;align-items:flex-end;justify-content:center;
  padding:16px;background:rgba(21,35,46,.45);opacity:0;pointer-events:none;transition:opacity .25s}
.install-guide.open{opacity:1;pointer-events:auto}
.install-card{width:100%;max-width:410px;background:#fff;border-radius:26px;padding:18px 18px 20px;text-align:center;
  box-shadow:0 18px 50px rgba(0,0,0,.32);transform:translateY(26px);transition:transform .32s var(--bounce);
  border:4px solid #FFCF00;position:relative;overflow:hidden}
.install-guide.open .install-card{transform:none}
.install-card::before{content:"";position:absolute;top:0;right:0;left:0;height:9px;background:linear-gradient(90deg,#E3000B,#FF6D00,#FFCF00,#0066CC,#00963F)}
.install-x{position:absolute;top:12px;left:12px;width:34px;height:34px;border-radius:50%;background:#f1f3f5;color:#5b6b78;font-size:22px;font-weight:900}
.install-card img{width:86px;height:86px;object-fit:contain;margin:4px auto 8px;border-radius:20px}
.install-card h3{font-size:20px;font-weight:900;margin:4px 0}
.install-card p{font-size:13px;line-height:1.8;color:#5b6b78;font-weight:700}
.install-steps{display:grid;gap:8px;margin:14px 0;text-align:right}
.install-steps span{background:#F2F4F7;border-radius:14px;padding:10px 12px;font-size:13px;font-weight:900;color:#15232E}
.install-main{width:100%;padding:14px;border-radius:16px;background:#0066CC;color:#fff;font-size:15px;font-weight:900;box-shadow:0 4px 0 #004891}

.mission-actions{display:flex;gap:8px;margin:12px 0}
.mission-add,.mission-reset{flex:1;border-radius:14px;padding:12px 10px;font-weight:900;font-size:13px}
.mission-add{background:var(--green);color:#fff;box-shadow:0 3px 0 var(--green-d)}
.mission-reset{background:#eef1f5;color:#5b6b78}
.mission-delete{background:#FEE2E2;color:#D0021B;border-radius:11px;padding:8px 10px;font-size:11px;font-weight:900;flex-shrink:0}
.mission-delete:active{transform:translateY(2px)}
.task-cat{display:inline-block;margin-right:6px;background:#eef7ff;color:#0066CC;border-radius:999px;padding:2px 7px;font-size:10px}
.mission-form{display:grid;gap:11px;margin-top:12px;text-align:right}
.mission-form label{font-size:12px;font-weight:900;color:#5b6b78}
.mission-form input,.mission-form select{width:100%;margin-top:6px;border:2px solid #E7EAEE;border-radius:14px;padding:12px;font:inherit;font-weight:800;background:#fff}
.campaign-full-list{display:grid;gap:10px;margin-top:14px}
.campaign-full-item{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #E7EAEE;border-radius:16px;padding:10px;text-align:right}
.campaign-full-ico{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.campaign-full-item div{flex:1;min-width:0}.campaign-full-item b{display:block;font-size:13px}.campaign-full-item small{display:block;font-size:10px;color:#5b6b78;font-weight:800;margin-top:3px}
.campaign-full-item button{color:#fff;border-radius:12px;padding:9px 12px;font-weight:900;font-size:12px}

.admin-section-title,.admin-events-title{font-size:14px;font-weight:900;color:#15232E;margin:16px 0 8px}
.admin-row{position:relative;padding-left:58px}
.admin-delete{position:absolute;left:10px;top:50%;transform:translateY(-50%);background:#fee2e2;color:#D0021B;border-radius:10px;padding:7px 10px;font-weight:900;font-size:11px}
.admin-delete:disabled{opacity:.5}
.admin-video-form{display:grid;gap:10px;background:#F8FAFC;border:1px solid #E7EAEE;border-radius:18px;padding:12px;text-align:right}
.admin-video-form label{font-size:11px;font-weight:900;color:#5b6b78}
.admin-video-form input,.admin-video-form textarea{width:100%;margin-top:6px;border:1px solid #DCE2EA;border-radius:12px;padding:10px;font:inherit;background:#fff}
.admin-video-form textarea{min-height:74px;resize:vertical}
.admin-video-form button{background:#0066CC;color:#fff;border-radius:13px;padding:12px;font-weight:900}
.admin-video-hint{font-size:10px;line-height:1.7;color:#5b6b78;font-weight:700}
.admin-video-list{display:grid;gap:8px;margin-top:10px}
.admin-video-item{background:#fff;border:1px solid #E7EAEE;border-radius:14px;padding:10px;text-align:right}
.admin-video-item b{display:block;font-size:13px}.admin-video-item span{display:block;font-size:10px;color:#5b6b78;font-weight:800;margin-top:4px}

/* Full-page mission center */
body.mission-open{overflow:hidden}
body.mission-open .nav{visibility:hidden}
.mission-page{position:fixed;inset:0;z-index:360;background:#F4F7FB;opacity:0;pointer-events:none;transform:translateX(-24px);transition:opacity .22s ease,transform .26s ease;direction:rtl}
.mission-page.open{opacity:1;pointer-events:auto;transform:none}
.mission-shell{width:100%;max-width:560px;height:100%;margin:auto;background:#F4F7FB;position:relative;overflow:hidden}
.mission-header{height:calc(72px + env(safe-area-inset-top));padding:calc(12px + env(safe-area-inset-top)) 16px 10px;display:grid;grid-template-columns:48px 1fr 48px;align-items:center;gap:10px;background:#fff;border-bottom:1px solid #E7EAEE}
.mission-header>div{text-align:center}.mission-header small{display:block;color:#0066CC;font-size:10px;font-weight:900}.mission-header h1{font-size:18px;line-height:1.4}
.mission-back,.mission-new-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:#EEF4FF;color:#0055BF}
.mission-back svg{width:22px;height:22px;transform:rotate(180deg)}.mission-new-icon{font-size:28px;background:#0066CC;color:#fff;box-shadow:0 3px 0 #004a99}
.mission-scroll{height:calc(100% - 72px - env(safe-area-inset-top));overflow-y:auto;padding:14px 14px calc(104px + env(safe-area-inset-bottom));overscroll-behavior:contain}
.mission-scroll>*{animation:missionSectionIn .46s var(--bounce) both}
.mission-scroll>*:nth-child(2){animation-delay:.08s}.mission-scroll>*:nth-child(3){animation-delay:.14s}
.mission-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 104px;align-items:center;gap:14px;padding:20px;background:linear-gradient(135deg,#6C36D9 0%,#176DDE 48%,#00A6C8 100%);color:#fff;border:2px solid rgba(255,255,255,.4);border-radius:22px;box-shadow:0 7px 0 #3B2496,0 16px 26px rgba(48,50,155,.22);overflow:hidden}
.mission-hero::before{content:"";position:absolute;z-index:-1;width:180px;height:180px;border:34px solid rgba(255,255,255,.09);border-radius:50%;left:-82px;bottom:-102px}
.mission-hero::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.2),transparent 30%,transparent 68%,rgba(255,207,0,.16))}
.mission-hero-copy{position:relative;z-index:2;min-width:0}.mission-hero .mission-hero-label{display:inline-flex;align-items:center;min-height:26px;padding:4px 10px;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(21,35,46,.18);font-size:10px;font-weight:800}
.mission-hero strong{display:flex;align-items:baseline;gap:7px;font-size:34px;line-height:1.25;margin-top:5px;text-shadow:0 3px 0 rgba(38,28,109,.25)}.mission-hero strong small{font-size:11px;color:#FFF2A8;text-shadow:none}.mission-hero p{font-size:10px;font-weight:700;opacity:.9;margin-top:2px;line-height:1.7}
.mission-streak{display:inline-flex!important;align-items:center;gap:4px;margin-top:9px;padding:5px 9px;border-radius:9px;background:#FFCF00;color:#4B348A;font-size:9px!important;font-weight:900!important;opacity:1!important;box-shadow:0 3px 0 #D8AB00}
.mission-ring{width:98px;height:98px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#FFCF00 var(--target),rgba(255,255,255,.2) 0);position:relative;box-shadow:0 0 0 5px rgba(255,255,255,.12),0 8px 16px rgba(22,21,98,.2);animation:ringArrive .72s var(--bounce) both}
.mission-ring::before{content:"";position:absolute;inset:10px;border-radius:50%;background:linear-gradient(145deg,#246EE3,#5A31C9);border:2px solid rgba(255,255,255,.22);box-shadow:inset 0 4px 8px rgba(255,255,255,.14)}
.mission-ring b{position:relative;font-size:18px;text-align:center;line-height:1.15}.mission-ring b small{display:block;font-size:8px;font-weight:700;opacity:.75;margin-top:3px}.mission-ring-star{position:absolute!important;z-index:3;top:-5px;right:9px;width:27px;height:27px;display:grid;place-items:center;border-radius:9px;background:#FFCF00;color:#6C36D9;font-size:16px!important;opacity:1!important;box-shadow:0 3px 0 #D8AB00;animation:starPop .5s .45s var(--bounce) both}
.mission-sparkles{position:absolute;inset:0;pointer-events:none;z-index:1}.mission-sparkles i{position:absolute;font-style:normal;color:#FFF2A8;opacity:0;animation:sparkIn .55s var(--bounce) both}.mission-sparkles i:nth-child(1){top:12px;left:18px;font-size:13px;animation-delay:.2s}.mission-sparkles i:nth-child(2){top:18px;right:44%;font-size:8px;color:#8FF2E8;animation-delay:.32s}.mission-sparkles i:nth-child(3){bottom:28px;left:42%;font-size:14px;animation-delay:.42s}.mission-sparkles i:nth-child(4){bottom:16px;right:16px;font-size:7px;color:#FF9EB5;animation-delay:.5s}
.mission-progress{position:relative;grid-column:1/-1;height:12px;border:2px solid rgba(255,255,255,.22);border-radius:10px;background:rgba(21,35,46,.2);overflow:visible}.mission-progress i{display:block;width:var(--progress-width);height:100%;border-radius:inherit;background:linear-gradient(90deg,#FFCF00,#FFF09A);transform:scaleX(0);transform-origin:right;animation:progressFill .8s .25s ease-out forwards}.mission-progress b{position:absolute;top:50%;right:var(--progress-width);width:22px;height:22px;display:grid;place-items:center;border-radius:8px;background:#fff;color:#F2A900;font-size:12px;transform:translate(50%,-50%) scale(0);box-shadow:0 3px 0 rgba(31,41,55,.18);animation:progressStar .45s .8s var(--bounce) forwards}
@keyframes missionSectionIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes ringArrive{from{opacity:0;transform:scale(.68) rotate(-18deg)}to{opacity:1;transform:none}}
@keyframes starPop{from{opacity:0;transform:scale(0) rotate(-35deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes sparkIn{0%{opacity:0;transform:scale(0) rotate(-25deg)}70%{opacity:1;transform:scale(1.25) rotate(8deg)}100%{opacity:.85;transform:scale(1) rotate(0)}}
@keyframes progressFill{to{transform:scaleX(1)}}
@keyframes progressStar{to{transform:translate(50%,-50%) scale(1)}}
.mission-sections{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:18px 0 12px;padding:4px;background:#E8ECF1;border-radius:14px}
.mission-sections button{min-height:42px;border-radius:11px;color:#5b6b78;font-size:12px;font-weight:900}.mission-sections button.on{background:#fff;color:#15232E;box-shadow:0 2px 6px rgba(21,35,46,.12)}
.mission-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.mission-summary div{background:#fff;border:1px solid #E7EAEE;border-radius:14px;padding:11px 6px;text-align:center}.mission-summary b{display:block;font-size:20px}.mission-summary span{display:block;font-size:9px;color:#5b6b78;font-weight:800;margin-top:2px}
.mission-tools{display:grid;grid-template-columns:1fr 122px;gap:8px}.mission-search{height:46px;display:flex;align-items:center;gap:6px;background:#fff;border:2px solid #DCE2EA;border-radius:13px;padding:0 10px}.mission-search span{font-size:24px;color:#5b6b78;transform:rotate(-18deg)}.mission-search input{width:100%;border:0;outline:0;font:inherit;font-size:12px;font-weight:800;background:transparent}.mission-tools select{width:100%;border:2px solid #DCE2EA;border-radius:13px;padding:0 8px;background:#fff;font:inherit;font-size:10px;font-weight:800;color:#15232E}
.mission-tabs,.mission-categories{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:12px 0 3px}.mission-tabs::-webkit-scrollbar,.mission-categories::-webkit-scrollbar{display:none}.mission-tabs button,.mission-categories button{min-height:38px;white-space:nowrap;border:1px solid #DCE2EA;border-radius:12px;padding:0 12px;background:#fff;color:#5b6b78;font-size:10px;font-weight:900}.mission-tabs button.on{background:#15232E;border-color:#15232E;color:#fff}.mission-categories{padding-top:8px}.mission-categories button{min-height:34px;border-radius:999px}.mission-categories button.on{background:#E8F3FF;border-color:#0066CC;color:#0055BF}
.mission-list{display:grid;gap:11px;margin-top:12px}.mission-card{background:#fff;border:1px solid #E4E8ED;border-right:5px solid #0066CC;border-radius:16px;padding:13px;box-shadow:0 4px 10px rgba(21,35,46,.07)}.mission-card.status-pending{border-right-color:#F28C00}.mission-card.status-done{border-right-color:#00963F}
.mission-card-top{display:grid;grid-template-columns:48px 1fr 40px;gap:10px;align-items:start}.mission-symbol{width:48px;height:48px;display:grid;place-items:center;background:#F1F5F9;border-radius:13px;font-size:24px}.mission-card-copy{min-width:0}.mission-card-copy h3{font-size:13px;line-height:1.6}.mission-card-copy p{font-size:10px;color:#5b6b78;font-weight:700;line-height:1.65;margin-top:2px}.mission-menu{width:40px;height:40px;border-radius:11px;background:#FFF0F1;color:#D0021B;font-size:22px}
.mission-menu.confirming{font-size:9px;background:#D0021B;color:#fff}
.mission-meta{display:flex;gap:5px;flex-wrap:wrap;margin:10px 58px 9px 0}.mission-meta span{border-radius:7px;background:#F1F4F7;color:#5b6b78;padding:4px 7px;font-size:8px;font-weight:900}.mission-meta .priority-high{background:#FFE5E7;color:#B00009}.mission-meta .priority-low{background:#E3F8EA;color:#00702F}
.mission-card-foot{display:flex;align-items:center;gap:8px;border-top:1px solid #EEF0F2;padding-top:10px}.mission-card-foot strong{margin-left:auto;color:#FF6D00;font-size:12px;display:flex;align-items:center;gap:4px}.mission-card-foot .coin-ic{width:16px;height:16px}.mission-primary,.mission-approve{min-height:40px;border-radius:11px;padding:0 12px;color:#fff;background:#0066CC;font-size:10px;font-weight:900;box-shadow:0 3px 0 #004a99}.mission-approve{background:#F28C00;box-shadow:0 3px 0 #c87000}.mission-status{font-size:9px;font-weight:900;color:#F28C00}.mission-status.done{color:#00963F}
.mission-empty{padding:36px 18px;text-align:center;background:#fff;border:2px dashed #DCE2EA;border-radius:16px}.mission-empty b,.mission-empty span{display:block}.mission-empty span{font-size:11px;color:#5b6b78;font-weight:700;margin-top:7px}
.mission-fab{position:absolute;bottom:calc(18px + env(safe-area-inset-bottom));right:18px;left:18px;min-height:54px;border-radius:16px;background:#E3000B;color:#fff;font-size:14px;font-weight:900;box-shadow:0 5px 0 #b00009,0 10px 22px rgba(227,0,11,.24)}.mission-fab span{font-size:22px;vertical-align:-2px;margin-left:5px}
.mission-plan h2,.mission-awards h2{font-size:18px}.mission-plan>p,.mission-awards>p{font-size:11px;color:#5b6b78;font-weight:700;margin:4px 0 14px}.week-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.week-strip div{background:#fff;border:1px solid #E7EAEE;border-radius:10px;padding:8px 1px;text-align:center}.week-strip div.today{background:#0066CC;color:#fff;border-color:#0066CC}.week-strip span,.week-strip b{display:block}.week-strip span{font-size:7px;font-weight:800}.week-strip b{font-size:14px;margin-top:5px}.routine-box{margin-top:14px;background:#fff;border-radius:16px;padding:14px}.routine-box h3{font-size:14px;margin-bottom:7px}.routine-box>div{display:flex;justify-content:space-between;gap:8px;padding:11px 0;border-bottom:1px solid #EEF0F2;font-size:11px;font-weight:800}.routine-box>div b{color:#0066CC}.award-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.award-grid div{min-height:140px;background:#fff;border:1px solid #E7EAEE;border-radius:16px;padding:16px 10px;text-align:center}.award-grid span,.award-grid b,.award-grid small{display:block}.award-grid span{font-size:40px}.award-grid b{font-size:12px;margin-top:5px}.award-grid small{font-size:9px;color:#5b6b78;margin-top:4px}.award-grid .locked{filter:grayscale(1);opacity:.45}

.mission-create-overlay{position:fixed;inset:0;z-index:500;background:rgba(21,35,46,.52);display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .22s}.mission-create-overlay.open{opacity:1}.mission-create{width:100%;max-width:560px;max-height:94vh;overflow-y:auto;background:#F4F7FB;border-radius:24px 24px 0 0;padding:0 14px calc(20px + env(safe-area-inset-bottom));transform:translateY(40px);transition:transform .28s ease}.mission-create-overlay.open .mission-create{transform:none}.mission-create header{position:sticky;top:0;z-index:2;display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;background:#F4F7FB;padding:13px 0 10px}.mission-create header button{width:44px;height:44px;border-radius:12px;background:#E7EAEE;color:#15232E;font-size:24px}.mission-create header small{font-size:9px;color:#0066CC;font-weight:900}.mission-create header h2{font-size:17px}.mission-create header>span{font-size:10px;color:#5b6b78;font-weight:900}
.mission-form-block{background:#fff;border:1px solid #E4E8ED;border-radius:16px;padding:14px;margin-bottom:10px}.mission-form-block h3{font-size:14px;margin-bottom:10px}.mission-create form label{display:block;font-size:10px;font-weight:900;color:#5b6b78;margin-top:10px}.mission-create input,.mission-create select,.mission-create textarea{width:100%;min-height:46px;margin-top:5px;border:2px solid #DCE2EA;border-radius:12px;padding:10px 11px;background:#fff;color:#15232E;font:inherit;font-size:12px;font-weight:800;outline:0}.mission-create textarea{min-height:78px;resize:vertical}.mission-create input:focus,.mission-create select:focus,.mission-create textarea:focus{border-color:#0066CC;box-shadow:0 0 0 3px #0066CC18}.mission-form-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}.mission-switch{display:flex!important;align-items:center;gap:10px;background:#F4F7FB;border-radius:13px;padding:10px;margin-top:12px!important}.mission-switch input{position:absolute;opacity:0;width:1px;height:1px}.mission-switch>span{width:46px;height:26px;border-radius:14px;background:#B9C2CC;padding:3px;transition:.2s;flex-shrink:0}.mission-switch>span::after{content:"";display:block;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s}.mission-switch input:checked+span{background:#00963F}.mission-switch input:checked+span::after{transform:translateX(-20px)}.mission-switch div{flex:1}.mission-switch b,.mission-switch small{display:block}.mission-switch b{font-size:11px;color:#15232E}.mission-switch small{font-size:8px;margin-top:2px}.mission-submit{width:100%;min-height:54px;border-radius:15px;background:#00963F;color:#fff;font-size:14px;font-weight:900;box-shadow:0 4px 0 #00702f}
@media (max-width:370px){.mission-tools{grid-template-columns:1fr}.mission-form-row{grid-template-columns:1fr}.mission-card-top{grid-template-columns:44px 1fr 40px}.mission-symbol{width:44px;height:44px}.mission-meta{margin-right:54px}.mission-hero{grid-template-columns:1fr 88px;padding:16px}.mission-ring{width:84px;height:84px}.mission-hero strong{font-size:29px}}
@media (prefers-reduced-motion:reduce){
  .mission-page,.mission-create-overlay,.mission-create{transition:none!important}
  .view.active,.view.active>*,#screen-onboarding .ob:not(.hide)>*,.mission-scroll>*,.mission-ring,.mission-ring-star,.mission-sparkles i,.mission-progress i,.mission-progress b{animation:none!important;transform:none!important;opacity:1!important}
}

/* ════════════════════════════════════════════════════════
   MISSION CENTER + PARENT REPORT — brand alignment (همخوانی)
   ════════════════════════════════════════════════════════ */
/* match the app's pastel background + phone width */
.mission-page{
  background:
    radial-gradient(circle at 14% 8%, #FFE1EC, transparent 42%),
    radial-gradient(circle at 86% 10%, #DCEBFF, transparent 42%),
    radial-gradient(circle at 82% 88%, #E2FBE9, transparent 42%),
    radial-gradient(circle at 12% 92%, #FFF3C9, transparent 42%),
    #FFFEFA !important;
}
.mission-shell{max-width:440px!important;background:transparent!important}
.mission-scroll{padding:0 16px calc(96px + env(safe-area-inset-bottom))}
.mission-header{background:rgba(255,255,255,.86)!important;backdrop-filter:blur(8px);border-bottom:1px solid var(--line)!important}
.mission-header small{color:var(--blue)!important}
.mission-new-icon{width:44px;height:44px;border-radius:13px;background:var(--green);color:#fff;font-size:26px;font-weight:900;box-shadow:var(--depth-sm) var(--green-d)}
.mission-back{width:44px;height:44px;border-radius:13px;background:var(--white);color:var(--ink);box-shadow:var(--depth-sm) #c9cdd3}
.mission-back svg{width:22px;height:22px}
/* hero → brand purple/blue brick */
.mission-hero{background:linear-gradient(135deg,var(--purple),var(--blue) 92%)!important;border:0!important;box-shadow:var(--depth-lg) var(--purple-d), var(--soft)!important;border-radius:var(--r-xl)!important}
.mission-hero strong small{color:#FFE69C!important}
.mission-sections{background:rgba(255,255,255,.7)!important}
.mission-sections button.on{color:var(--ink)!important;box-shadow:var(--depth-sm) #d7dbe1}
.mission-card{border-right-color:var(--blue)!important;box-shadow:0 4px 12px rgba(21,35,46,.08)!important}
.mission-card.status-pending{border-right-color:var(--orange)!important}
.mission-card.status-done{border-right-color:var(--green)!important}
.mission-card-foot strong{color:var(--orange)!important}
.mission-primary{background:var(--blue)!important;box-shadow:var(--depth-sm) var(--blue-d)!important}
.mission-approve{background:var(--orange)!important;box-shadow:var(--depth-sm) var(--orange-d)!important}
.mission-fab{background:var(--red)!important;box-shadow:var(--depth) var(--red-d),0 10px 22px rgba(227,0,11,.24)!important;border-radius:var(--r-lg)!important}
.mission-create{background:#FFFEFA!important}.mission-create header{background:#FFFEFA!important}
.mission-form-block{box-shadow:0 3px 10px rgba(21,35,46,.06)}
.mission-create input:focus,.mission-create select:focus,.mission-create textarea:focus{border-color:var(--blue)!important}

/* ── child selector bar ── */
.child-bar{display:flex;gap:9px;overflow-x:auto;padding:14px 0 4px;scrollbar-width:none}
.child-bar::-webkit-scrollbar{display:none}
.child-chip{display:flex;align-items:center;gap:9px;flex-shrink:0;background:var(--white);border:2px solid var(--line);border-radius:16px;padding:7px 13px 7px 9px;box-shadow:0 3px 8px rgba(21,35,46,.06);transition:transform .12s var(--bounce)}
.child-chip:active{transform:scale(.96)}
.child-chip.on{border-color:var(--purple);box-shadow:var(--depth-sm) var(--purple-d)}
.child-chip .cc-av{width:38px;height:38px;border-radius:11px;background:var(--bg-2);display:grid;place-items:center;font-size:22px;overflow:hidden;flex-shrink:0}
.child-chip .cc-av img{width:100%;height:100%;object-fit:contain}
.child-chip .cc-av i{display:grid;place-items:center;width:100%;height:100%;font-style:normal}
.child-chip .cc-meta{text-align:right;line-height:1.2}
.child-chip .cc-meta b{font-size:13px;display:block}
.child-chip .cc-meta small{font-size:9px;color:var(--muted)}
.child-chip.on .cc-meta b{color:var(--purple)}

/* ── plan: two modes ── */
.plan-switch{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;background:rgba(255,255,255,.7);border-radius:14px;margin-bottom:14px}
.plan-switch button{min-height:44px;border-radius:11px;font-size:13px;font-weight:900;color:var(--muted)}
.plan-switch button.on{background:var(--white);color:var(--purple);box-shadow:var(--depth-sm) #d7dbe1}
.plan-intro{background:var(--white);border-radius:var(--r-lg);padding:24px 18px;text-align:center;box-shadow:0 5px 14px rgba(21,35,46,.08)}
.plan-intro-ic{font-size:46px}
.plan-intro h3{font-size:16px;margin-top:8px}
.plan-intro p{font-size:11px;color:var(--muted);font-weight:700;line-height:1.8;margin:8px 0 16px}
.plan-cta,.plan-addall{width:100%;min-height:52px;border-radius:15px;background:var(--purple);color:#fff;font-size:14px;font-weight:900;box-shadow:var(--depth-sm) var(--purple-d)}
.plan-addall{margin-top:14px;background:var(--green);box-shadow:var(--depth-sm) var(--green-d)}
.plan-note{background:var(--white);border-radius:var(--r-lg);padding:14px;box-shadow:0 4px 12px rgba(21,35,46,.07);margin-bottom:12px}
.plan-note b{font-size:14px}
.plan-note p{font-size:10px;color:var(--muted);font-weight:700;margin-top:3px}
.plan-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.plan-tags span{font-size:10px;font-weight:800;background:var(--bg-2);color:var(--ink);border-radius:999px;padding:4px 10px}
.plan-tags span.focus{background:#8E44AD18;color:var(--purple)}
.plan-tags span.time{background:#FF6D0018;color:var(--orange-d)}
.plan-edit{margin-top:11px;font-size:11px;font-weight:900;color:var(--blue);background:#0066CC12;border-radius:10px;padding:8px 14px}
.plan-days{display:grid;gap:10px}
.plan-day{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:12px;box-shadow:0 3px 9px rgba(21,35,46,.05)}
.plan-day.today{border-color:var(--purple);box-shadow:0 4px 12px rgba(142,68,173,.16)}
.plan-day-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.plan-day-h b{font-size:13px}
.plan-day-h>span{font-size:9px;font-weight:900;color:#fff;background:var(--purple);border-radius:999px;padding:3px 9px}
.day-add{font-size:11px;font-weight:900;color:var(--green);background:#00963F14;border-radius:9px;padding:6px 11px}
.plan-act{display:flex;align-items:center;gap:9px;padding:9px 0;border-top:1px dashed var(--line)}
.plan-act:first-of-type{border-top:0}
.plan-act .pa-e{width:34px;height:34px;border-radius:10px;background:var(--bg-2);display:grid;place-items:center;font-size:18px;flex-shrink:0}
.plan-act .pa-t{flex:1;font-size:12px;font-weight:800;line-height:1.5}
.pa-add{width:32px;height:32px;border-radius:9px;background:var(--green);color:#fff;font-size:18px;font-weight:900;flex-shrink:0;box-shadow:0 3px 0 var(--green-d)}
.pa-add.added{background:#cfe9d8;color:var(--green);box-shadow:none}
.pa-del{width:30px;height:30px;border-radius:9px;background:#FFF0F1;color:var(--red);font-size:18px;flex-shrink:0}
.plan-empty{font-size:10px;color:var(--muted);font-weight:700;text-align:center;padding:8px}

/* questionnaire */
.plan-quiz-card .quiz-body,.plan-act-card form{padding:4px 0 8px}
.quiz-block{background:var(--white);border-radius:var(--r-md);padding:13px;margin-bottom:10px;box-shadow:0 3px 9px rgba(21,35,46,.05)}
.quiz-block h3{font-size:13px;margin-bottom:10px}
.quiz-chips{display:flex;flex-wrap:wrap;gap:7px}
.quiz-chip{font-size:12px;font-weight:800;background:var(--bg-2);color:var(--ink);border:2px solid transparent;border-radius:12px;padding:9px 13px;transition:transform .1s var(--bounce)}
.quiz-chip:active{transform:scale(.95)}
.quiz-chip.on{background:#8E44AD14;border-color:var(--purple);color:var(--purple)}
.plan-quiz-card header>span{font-size:22px}
.mission-submit:disabled{opacity:.45}

/* ════ WEEKLY REPORT ════ */
.report-banner{display:flex;align-items:center;gap:12px;width:100%;background:linear-gradient(120deg,var(--purple),var(--blue));color:#fff;border-radius:var(--r-lg);padding:15px 16px;margin:8px 0 4px;box-shadow:var(--depth) var(--purple-d),0 10px 22px rgba(142,68,173,.22);text-align:right}
.report-banner:active{transform:translateY(4px);box-shadow:0 0 0 var(--purple-d)}
.report-banner .rb-ic{font-size:30px}
.report-banner .rb-copy{flex:1}
.report-banner .rb-copy b{font-size:15px;display:block}
.report-banner .rb-copy small{font-size:10px;opacity:.92}
.report-banner .rb-go{transform:scaleX(-1);opacity:.85}.report-banner .rb-go svg{width:22px;height:22px}
.child-report-btn{display:flex;align-items:center;gap:3px;background:var(--purple);color:#fff;border-radius:11px;padding:8px 11px;font-size:11px;font-weight:900;box-shadow:var(--depth-sm) var(--purple-d);flex-shrink:0}
.child-report-btn svg{width:16px;height:16px;transform:scaleX(-1)}
.child-card .ca img{border-radius:10px}

.rep-hero{display:grid;grid-template-columns:58px 1fr auto;align-items:center;gap:12px;background:var(--white);border-radius:var(--r-xl);padding:16px;margin-top:6px;box-shadow:0 6px 16px rgba(21,35,46,.09)}
.rep-hero-av{width:58px;height:58px;border-radius:16px;background:var(--bg-2);display:grid;place-items:center;font-size:32px;overflow:hidden;border:3px solid var(--yellow)}
.rep-hero-av img{width:100%;height:100%;object-fit:contain}
.rep-hero-copy small{font-size:10px;color:var(--muted);font-weight:800}
.rep-hero-copy b{font-size:18px;display:block;margin:1px 0}
.rep-hero-copy p{font-size:10px;color:var(--muted);font-weight:700}
.rep-score{text-align:center;background:var(--purple);color:#fff;border-radius:15px;padding:9px 12px;box-shadow:var(--depth-sm) var(--purple-d)}
.rep-score b{font-size:24px;line-height:1}.rep-score b small{font-size:11px}
.rep-score span{font-size:9px;display:block;opacity:.9;margin-top:2px}
.rep-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.rep-summary>div{background:var(--white);border-radius:var(--r-md);padding:12px 6px;text-align:center;box-shadow:0 3px 9px rgba(21,35,46,.06)}
.rep-summary .rs-n{font-size:18px;font-weight:900;display:block;color:var(--ink)}
.rep-summary .rs-l{font-size:9px;color:var(--muted);font-weight:800;display:block;margin-top:3px}
.rep-h{font-size:15px;margin:20px 0 10px}
.rep-rec-sub{font-size:11px;color:var(--muted);font-weight:700;line-height:1.8;margin:-4px 0 12px}
.rep-chart{background:var(--white);border-radius:var(--r-lg);padding:14px;display:grid;gap:11px;box-shadow:0 4px 12px rgba(21,35,46,.06)}
.rep-bar-row{display:grid;grid-template-columns:88px 1fr 34px;align-items:center;gap:9px}
.rep-bar-lbl{font-size:10px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rep-bar-track{height:14px;background:var(--bg-2);border-radius:999px;overflow:hidden}
.rep-bar-track i{display:block;height:100%;border-radius:999px;transition:width .6s var(--bounce)}
.rep-bar-val{font-size:11px;font-weight:900;text-align:left;color:var(--muted)}
.rep-table-wrap{background:var(--white);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 4px 12px rgba(21,35,46,.06)}
.rep-table{width:100%;border-collapse:collapse}
.rep-table th,.rep-table td{padding:11px 12px;text-align:right;font-size:11px;font-weight:800}
.rep-table thead th{background:var(--bg-2);color:var(--muted);font-size:10px}
.rep-table tbody tr{border-top:1px solid var(--line)}
.rep-table td:nth-child(2){color:var(--muted)}
.rep-tag{font-size:9px;font-weight:900;border-radius:999px;padding:3px 10px;white-space:nowrap}
.rep-tag.strong,.rep-tag.ontime{background:#00963F18;color:var(--green)}
.rep-tag.mid,.rep-tag.pending{background:#FF6D0018;color:var(--orange-d)}
.rep-tag.weak,.rep-tag.late{background:#E3000B14;color:var(--red)}
.rep-tag.todo{background:var(--bg-2);color:var(--muted)}
.rep-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.rep-col{background:var(--white);border-radius:var(--r-md);padding:13px;box-shadow:0 3px 9px rgba(21,35,46,.06)}
.rep-col h4{font-size:12px;margin-bottom:8px}
.rep-col div{font-size:11px;font-weight:800;padding:7px 9px;border-radius:9px;margin-top:6px}
.rep-col.strong div{background:#00963F12}
.rep-col.weak div{background:#E3000B0e}
.rep-tasks{display:grid;gap:8px}
.rep-task{display:flex;align-items:center;gap:10px;background:var(--white);border-radius:var(--r-md);padding:11px 13px;box-shadow:0 3px 9px rgba(21,35,46,.05)}
.rep-task .rt-e{font-size:20px}
.rep-task .rt-t{flex:1;font-size:12px;font-weight:800}
.rep-recs{display:grid;gap:9px}
.rep-rec{display:flex;align-items:center;gap:11px;background:var(--white);border-radius:var(--r-md);padding:12px 13px;box-shadow:0 4px 11px rgba(21,35,46,.07);border-right:5px solid var(--green)}
.rep-rec .rr-e{font-size:26px}
.rep-rec .rr-body{flex:1}
.rep-rec .rr-body b{font-size:13px;display:block}
.rep-rec .rr-body small{font-size:10px;color:var(--muted);font-weight:700;line-height:1.6}
.rep-rec .rr-cta{background:var(--green);color:#fff;border-radius:10px;padding:8px 13px;font-size:11px;font-weight:900;box-shadow:0 3px 0 var(--green-d);flex-shrink:0}
@media (max-width:370px){.rep-bar-row{grid-template-columns:74px 1fr 30px}.rep-cols{grid-template-columns:1fr}}