/* DSAT 3D qatlami (v1): chuqurlik, yumshoq yorug'lik, ekstruziyali tugmalar, glassmorphism, floating orblar.
   Faqat bezak: rang/matnni o'zgartirmaydi. prefers-reduced-motion'da animatsiyalar o'chadi. */
:root{
  --t3-ink: 30,27,75;            /* soya rangi (RGB) */
  --t3-glow: 99,102,241;         /* indigo yorug'lik */
  --t3-hi: rgba(255,255,255,.9); /* yuqori yorug'lik chizig'i */
  --t3-surface: linear-gradient(160deg,#ffffff 0%,rgba(238,240,255,.65) 100%);
  --t3-shadow: 0 1px 0 var(--t3-hi) inset, 0 -1px 0 rgba(var(--t3-glow),.07) inset, 0 2px 4px rgba(var(--t3-ink),.05), 0 14px 26px -12px rgba(var(--t3-ink),.2), 0 34px 56px -32px rgba(var(--t3-glow),.35);
  --t3-shadow-up: 0 1px 0 var(--t3-hi) inset, 0 4px 8px rgba(var(--t3-ink),.06), 0 26px 40px -14px rgba(var(--t3-ink),.28), 0 46px 70px -34px rgba(var(--t3-glow),.5);
}
html[data-bs-theme="dark"]{
  --t3-ink: 0,0,0; --t3-glow: 129,140,248; --t3-hi: rgba(255,255,255,.09);
  --t3-surface: linear-gradient(150deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.015) 100%);
  --t3-shadow: 0 1px 0 var(--t3-hi) inset, 0 -1px 0 rgba(0,0,0,.35) inset, 0 2px 6px rgba(0,0,0,.35), 0 18px 34px -14px rgba(0,0,0,.65), 0 36px 64px -34px rgba(var(--t3-glow),.42);
  --t3-shadow-up: 0 1px 0 var(--t3-hi) inset, 0 6px 12px rgba(0,0,0,.4), 0 30px 48px -16px rgba(0,0,0,.75), 0 50px 80px -34px rgba(var(--t3-glow),.6);
}

/* ---------- Fon: yumshoq mesh gradient (rangni almashtirmaydi, ustiga qo'yiladi) ---------- */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 520px at 8% -8%, rgba(129,140,248,.22), transparent 60%),
    radial-gradient(760px 480px at 100% 4%, rgba(244,114,182,.14), transparent 60%),
    radial-gradient(900px 600px at 70% 112%, rgba(56,189,248,.14), transparent 60%);}
html[data-bs-theme="dark"] body::before{
  background:
    radial-gradient(900px 560px at 6% -10%, rgba(99,102,241,.30), transparent 62%),
    radial-gradient(760px 520px at 102% 2%, rgba(168,85,247,.20), transparent 62%),
    radial-gradient(900px 640px at 66% 115%, rgba(14,165,233,.16), transparent 62%);}

/* ---------- Kartalar: chuqurlik + tilt ---------- */
.plan-card,.nx-stat,.nx-tile,.card-3d,.widget-card,.pl-day,.pl-card,.pl-goal,.pl-task,.vg-game,.vg-stat,.mr-stat,.mr-q,.setting-card,.pl-ai,.dx-mini{
  background-image: var(--t3-surface);
  box-shadow: var(--t3-shadow);
  transform: perspective(900px) translate3d(0,var(--ty,0px),0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style: preserve-3d; will-change: transform;
  transition: transform .18s ease-out, box-shadow .25s ease, border-color .25s ease;
}
.nx-stat:hover,.nx-tile:hover,.card-3d:hover,.pl-day:hover,.pl-task:hover,.vg-game:hover{ --ty:-5px; box-shadow: var(--t3-shadow-up); }
.t3d-leave{ transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease !important; }
.t3d-glare{position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .25s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,.55), transparent 55%);mix-blend-mode:soft-light}
html[data-bs-theme="dark"] .t3d-glare{background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%), rgba(165,180,252,.28), transparent 58%);mix-blend-mode:screen}
.t3d-on:hover > .t3d-glare{opacity:1}
/* kartadagi elementlar "ko'tariladi" */
.nx-stat > *,.nx-tile > *{transform:translateZ(0)}
.nx-tile-ic,.nx-stat .nx-ic,.nx-stat > :first-child{transform:translateZ(26px)}

/* ---------- 3D ikonka plitkalari (ekstruziya + yaltiroq) ---------- */
.nx-tile-ic,.dsat-sidebar a i,.nx-stat .nx-ic{
  position:relative;
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 -3px 0 rgba(0,0,0,.18) inset, 0 8px 14px -6px var(--c, rgba(var(--t3-glow),.6)), 0 14px 22px -10px rgba(var(--t3-ink),.35);
}
.nx-tile-ic::after{content:"";position:absolute;left:12%;right:12%;top:6%;height:38%;border-radius:10px 10px 50% 50%;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));pointer-events:none}

/* ---------- Tugmalar: ekstruziyali (bosilganda cho'kadi) ---------- */
.btn-primary,.pl-btn,.btn-main,.vg-btn,.dv-add,.dx-vadd,#dvBtn{
  background-image:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 4px 0 rgba(30,27,100,.55), 0 14px 22px -8px rgba(79,70,229,.6) !important;
  transform:translateY(0); transition:transform .12s ease, box-shadow .12s ease, filter .2s ease;
}
.btn-primary:hover,.pl-btn:hover,.btn-main:hover,.vg-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn-primary:active,.pl-btn:active,.btn-main:active,.vg-btn:active,.dv-add:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 1px 0 rgba(30,27,100,.55), 0 4px 8px -4px rgba(79,70,229,.5) !important}
.nx-btn-main{box-shadow:0 4px 0 rgba(0,0,0,.22), 0 16px 26px -12px rgba(0,0,0,.55);transition:transform .12s ease, box-shadow .12s ease}
.nx-btn-main:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.22), 0 6px 12px -8px rgba(0,0,0,.5)}
.nx-btn-ghost{backdrop-filter:blur(8px);box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 10px 20px -12px rgba(0,0,0,.5)}

/* ---------- Sidebar: shisha + ekstruziyali faol element ---------- */
.dsat-sidebar{backdrop-filter:blur(14px) saturate(140%)}
.dsat-sidebar a{transition:transform .16s ease, background .2s ease, box-shadow .2s ease}
.dsat-sidebar a:hover{transform:translateX(4px)}
.dsat-sidebar a.active{box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 4px 0 rgba(30,27,100,.55), 0 16px 24px -12px rgba(79,70,229,.7) !important;background-image:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 60%)}
.dsat-sidebar a i{box-shadow:none}
.dsat-sidebar-user{box-shadow:var(--t3-shadow);background-image:var(--t3-surface)}

/* ---------- Hero: suzuvchi 3D sferalar ---------- */
.nx-hero > *{position:relative;z-index:1}
.t3d-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.95) 0,rgba(255,255,255,.35) 18%,var(--o1) 42%,var(--o2) 100%);
  box-shadow:0 30px 50px -18px var(--o2), inset -12px -16px 30px rgba(0,0,0,.28), inset 8px 10px 22px rgba(255,255,255,.35);
  animation:t3dFloat var(--d,9s) ease-in-out infinite; transform:translate3d(calc(var(--px,0) * var(--k,1) * 1px),calc(var(--py,0) * var(--k,1) * 1px),0)}
.t3d-orb.a{width:150px;height:150px;right:34%;top:-48px;--o1:#a5b4fc;--o2:#6366f1;--k:-14;--d:10s;opacity:.9}
.t3d-orb.b{width:84px;height:84px;right:6%;bottom:-26px;--o1:#f9a8d4;--o2:#ec4899;--k:18;--d:7.5s;opacity:.92}
.t3d-orb.c{width:46px;height:46px;left:44%;bottom:18%;--o1:#7dd3fc;--o2:#0ea5e9;--k:-26;--d:6s;opacity:.95}
@keyframes t3dFloat{0%,100%{margin-top:0}50%{margin-top:-14px}}

/* halqa va progress: yumshoq shisha chuqurlik */
.nx-ring{filter:drop-shadow(0 14px 18px rgba(0,0,0,.35))}
.nx-hero-side{box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 24px 40px -22px rgba(0,0,0,.6)}
.progress,.nx-track,.pl-bar{box-shadow:inset 0 2px 4px rgba(var(--t3-ink),.18)}

/* ---------- Kirish animatsiyasi ---------- */
@keyframes t3dRise{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.t3d-rise{animation:t3dRise .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 55ms)}

/* ---------- Mobil / harakatni kamaytirish ---------- */
@media (hover:none),(max-width:820px){
  .plan-card,.nx-stat,.nx-tile,.card-3d,.widget-card,.pl-day,.pl-card,.pl-goal,.pl-task,.vg-game,.vg-stat,.mr-stat,.mr-q,.setting-card,.pl-ai,.dx-mini{transform:none;will-change:auto}
  .t3d-orb{opacity:.55;transform:none}.t3d-orb.a{width:96px;height:96px}.t3d-orb.b{width:56px;height:56px}.t3d-orb.c{display:none}
}
@media (prefers-reduced-motion:reduce){
  .t3d-orb{animation:none}.t3d-rise{animation:none}
  .nx-stat,.nx-tile,.card-3d,.pl-day,.pl-task,.vg-game{transform:none !important;transition:box-shadow .2s}
}