/* =========================================================
   LUDOPANDA AAA WEB DEPTH + 3D SYSTEM V2
   Purpose: remove the flat look.
   Static depth is visible even before hover/tap.
   Loaded AFTER aaa-v1.css and aaa-motion-v1.css.
   ========================================================= */

:root{
  --lp-3d-yellow-top:#FFF08A;
  --lp-3d-yellow-mid:#FFD400;
  --lp-3d-yellow-bottom:#D79B00;
  --lp-3d-yellow-edge:#9B6E00;
  --lp-3d-dark-top:#1A1A1A;
  --lp-3d-dark-mid:#101010;
  --lp-3d-dark-bottom:#070707;
  --lp-3d-edge:#030303;
  --lp-3d-hi:rgba(255,255,255,.10);
  --lp-3d-hi-strong:rgba(255,255,255,.20);
  --lp-3d-gold-glow:rgba(255,212,0,.15);
  --lp-3d-shadow:rgba(0,0,0,.60);
}

/* ---------------------------------------------------------
   GLOBAL DEPTH
   --------------------------------------------------------- */

html{
  background:#030303 !important;
}

body{
  position:relative;
  background:
    radial-gradient(circle at 82% -8%,rgba(255,212,0,.13),transparent 31rem),
    radial-gradient(circle at -8% 38%,rgba(255,212,0,.045),transparent 28rem),
    linear-gradient(180deg,#080808 0%,#040404 54%,#020202 100%) !important;
}

body::after{
  content:"";
  position:fixed;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(115deg,transparent 0 42%,rgba(255,212,0,.018) 50%,transparent 58%),
    radial-gradient(ellipse at center,transparent 25%,rgba(0,0,0,.27) 100%);
}

/* ---------------------------------------------------------
   TOP BAR — GLASS WITH A REAL EDGE
   --------------------------------------------------------- */

.topbar{
  border-bottom-color:rgba(255,255,255,.09) !important;
  background:
    linear-gradient(180deg,rgba(18,18,18,.94),rgba(6,6,6,.92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(0,0,0,.72),
    0 7px 0 rgba(0,0,0,.23),
    0 18px 34px rgba(0,0,0,.34) !important;
}

/* ---------------------------------------------------------
   HERO / LARGE SURFACES — LAYERED, NOT FLAT
   --------------------------------------------------------- */

:is(.hero,.auth-card,.panel,.form-card,.content-card,.usage-card,.info-strip,.authority){
  position:relative;
  transform-style:preserve-3d;
  background:
    linear-gradient(145deg,var(--lp-3d-dark-top) 0%,var(--lp-3d-dark-mid) 48%,#090909 78%,#070707 100%) !important;
  border-color:rgba(255,255,255,.105) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 1px 0 0 rgba(255,255,255,.025),
    inset 0 -2px 0 rgba(0,0,0,.72),
    0 5px 0 #030303,
    0 14px 28px rgba(0,0,0,.42),
    0 30px 70px rgba(0,0,0,.24) !important;
}

.hero{
  border-color:rgba(255,212,0,.23) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -2px 0 rgba(0,0,0,.78),
    0 6px 0 #040404,
    0 20px 42px rgba(0,0,0,.46),
    0 0 0 1px rgba(255,212,0,.035),
    0 0 58px rgba(255,212,0,.055) !important;
}

.hero::before{
  content:"";
  position:absolute;
  pointer-events:none;
  inset:1px;
  border-radius:inherit;
  background:
    linear-gradient(120deg,rgba(255,255,255,.055),transparent 26%),
    radial-gradient(circle at 86% 8%,rgba(255,212,0,.13),transparent 35%);
  mix-blend-mode:screen;
  opacity:.9;
}

/* ---------------------------------------------------------
   CARDS — VISIBLE EXTRUSION EVEN AT REST
   --------------------------------------------------------- */

:is(.action-card,.service-card,.topic-card,.ticket-row,.order-card){
  position:relative;
  transform-style:preserve-3d;
  overflow:visible;
  background:
    linear-gradient(145deg,#181818 0%,#111 48%,#0A0A0A 100%) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.085),
    inset 0 -2px 0 rgba(0,0,0,.72),
    0 7px 0 #030303,
    0 15px 24px rgba(0,0,0,.42),
    0 26px 52px rgba(0,0,0,.19) !important;
}

:is(.action-card,.service-card,.topic-card,.ticket-row,.order-card)::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:10px;
  right:10px;
  bottom:-10px;
  height:20px;
  border-radius:0 0 18px 18px;
  background:linear-gradient(180deg,rgba(0,0,0,.46),rgba(0,0,0,0));
  filter:blur(7px);
  opacity:.72;
  pointer-events:none;
}

@media (hover:hover) and (pointer:fine){
  :is(.action-card,.service-card,.topic-card,.ticket-row,.order-card):hover{
    transform:
      perspective(1100px)
      translateY(-10px)
      rotateX(1.7deg)
      rotateY(-.7deg) !important;
    border-color:rgba(255,212,0,.36) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 -2px 0 rgba(0,0,0,.76),
      0 10px 0 #040404,
      0 24px 38px rgba(0,0,0,.47),
      0 40px 72px rgba(0,0,0,.22),
      0 0 34px rgba(255,212,0,.10) !important;
  }
}

:is(.action-card,.service-card,.topic-card,.ticket-row):active{
  transform:translateY(3px) scale(.988) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.7),
    0 2px 0 #020202,
    0 8px 16px rgba(0,0,0,.40) !important;
}

/* ---------------------------------------------------------
   BUTTONS — REAL 3D EXTRUSION / PRESS
   --------------------------------------------------------- */

:is(.primary,.primary-btn,.link-card a,.sticky-return){
  color:#080808 !important;
  background:
    linear-gradient(
      180deg,
      var(--lp-3d-yellow-top) 0%,
      #FFE15A 11%,
      var(--lp-3d-yellow-mid) 52%,
      #F1B600 78%,
      var(--lp-3d-yellow-bottom) 100%
    ) !important;
  border:
    1px solid rgba(255,238,139,.82) !important;
  text-shadow:0 1px 0 rgba(255,255,255,.34);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.42),
    inset 0 -2px 0 rgba(120,77,0,.32),
    0 5px 0 var(--lp-3d-yellow-edge),
    0 10px 16px rgba(0,0,0,.36),
    0 0 26px rgba(255,212,0,.09) !important;
}

@media (hover:hover) and (pointer:fine){
  :is(.primary,.primary-btn,.link-card a,.sticky-return):hover{
    transform:translateY(-3px) scale(1.012) !important;
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.48),
      inset 0 -2px 0 rgba(120,77,0,.30),
      0 8px 0 var(--lp-3d-yellow-edge),
      0 16px 24px rgba(0,0,0,.40),
      0 0 34px rgba(255,212,0,.18) !important;
  }
}

:is(.primary,.primary-btn,.link-card a,.sticky-return):active{
  transform:translateY(4px) scale(.985) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(120,77,0,.32),
    0 1px 0 var(--lp-3d-yellow-edge),
    0 5px 10px rgba(0,0,0,.35) !important;
}

/* Dark secondary / ghost buttons also get an edge. */
:is(.secondary,.secondary-btn,.ghost,.ghost-btn,.back,.support-link,.back-page,.nav-btn){
  background:
    linear-gradient(180deg,#1C1C1C 0%,#121212 58%,#090909 100%) !important;
  border:1px solid rgba(255,255,255,.11) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,0,0,.75),
    0 4px 0 #030303,
    0 9px 15px rgba(0,0,0,.32) !important;
}

@media (hover:hover) and (pointer:fine){
  :is(.secondary,.secondary-btn,.ghost,.ghost-btn,.back,.support-link,.back-page,.nav-btn):hover{
    transform:translateY(-2px) !important;
    border-color:rgba(255,212,0,.28) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.09),
      inset 0 -1px 0 rgba(0,0,0,.78),
      0 6px 0 #030303,
      0 13px 21px rgba(0,0,0,.36),
      0 0 22px rgba(255,212,0,.055) !important;
  }
}

:is(.secondary,.secondary-btn,.ghost,.ghost-btn,.back,.support-link,.back-page,.nav-btn):active{
  transform:translateY(3px) scale(.99) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 1px 0 #020202,
    0 5px 9px rgba(0,0,0,.30) !important;
}

/* Active tab appears physically selected. */
.nav-btn.active,
.choice-row button.active{
  background:
    linear-gradient(180deg,#FFF092,#FFD400 55%,#E7AA00) !important;
  color:#090909 !important;
  border-color:rgba(255,235,118,.72) !important;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.28),
    inset 0 -2px 4px rgba(120,77,0,.20),
    0 2px 0 #8E6500,
    0 7px 14px rgba(0,0,0,.26) !important;
}

/* ---------------------------------------------------------
   ICONS — BEVELED MINI TILES
   --------------------------------------------------------- */

:is(.service-icon,.action-card .icon,.topic-icon,.panda-avatar,.shield,.auth-icon){
  background:
    linear-gradient(145deg,rgba(255,230,99,.18),rgba(255,212,0,.055) 55%,rgba(0,0,0,.10)) !important;
  border:1px solid rgba(255,226,83,.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -2px 0 rgba(0,0,0,.30),
    0 4px 0 rgba(0,0,0,.32),
    0 10px 18px rgba(0,0,0,.24),
    0 0 20px rgba(255,212,0,.045) !important;
}

/* ---------------------------------------------------------
   FORMS — INSET DEPTH
   --------------------------------------------------------- */

:is(input,select,textarea){
  background:
    linear-gradient(180deg,#0A0A0A,#121212) !important;
  border-color:rgba(255,255,255,.095) !important;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.68),
    inset 0 1px 0 rgba(255,255,255,.025),
    0 1px 0 rgba(255,255,255,.025) !important;
}

:is(input,select,textarea):focus{
  border-color:rgba(255,212,0,.55) !important;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.62),
    0 0 0 3px rgba(255,212,0,.08),
    0 8px 22px rgba(0,0,0,.25) !important;
}

/* ---------------------------------------------------------
   PANDA PAY — PREMIUM WALLET DEPTH
   --------------------------------------------------------- */

.balance-card{
  transform-style:preserve-3d;
  transform:
    perspective(1200px)
    rotateX(1.6deg)
    rotateY(-1.2deg);
  background:
    linear-gradient(
      145deg,
      #FFF39C 0%,
      #FFE05A 16%,
      #FFD400 50%,
      #EBAE00 82%,
      #C98B00 100%
    ) !important;
  border:1px solid rgba(255,245,176,.88) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.42),
    inset 0 -3px 0 rgba(121,75,0,.25),
    0 7px 0 #8F6300,
    0 18px 30px rgba(0,0,0,.35),
    0 32px 62px rgba(0,0,0,.22),
    0 0 42px rgba(255,212,0,.12) !important;
}

.balance-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(circle at 80% 18%,rgba(255,255,255,.35),transparent 24%),
    linear-gradient(115deg,transparent 0 40%,rgba(255,255,255,.10) 49%,transparent 58%);
  mix-blend-mode:soft-light;
}

@media (hover:hover) and (pointer:fine){
  .balance-card:hover{
    transform:
      perspective(1200px)
      translateY(-8px)
      rotateX(3deg)
      rotateY(-2deg)
      scale(1.018) !important;
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.48),
      inset 0 -3px 0 rgba(121,75,0,.25),
      0 10px 0 #8F6300,
      0 26px 42px rgba(0,0,0,.40),
      0 46px 80px rgba(0,0,0,.23),
      0 0 54px rgba(255,212,0,.18) !important;
  }
}

/* ---------------------------------------------------------
   BADGES / PILLS
   --------------------------------------------------------- */

:is(.hero-badge,.status-pill,.pandabot-status,.status,.pill){
  background:
    linear-gradient(180deg,#1B1B1B,#0D0D0D) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 2px 0 rgba(0,0,0,.42),
    0 6px 12px rgba(0,0,0,.22) !important;
}

.hero-badge{
  color:#111 !important;
  background:
    linear-gradient(180deg,#FFF08E,#FFD400 58%,#DBA000) !important;
  border-color:rgba(255,239,141,.80) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    0 3px 0 #966A00,
    0 9px 17px rgba(0,0,0,.25) !important;
}

/* ---------------------------------------------------------
   PANDA BOT — PHYSICAL LAUNCH TILE
   --------------------------------------------------------- */

.pandabot-card{
  background:
    linear-gradient(145deg,#25200D 0%,#161307 42%,#0B0B0B 100%) !important;
  border:1px solid rgba(255,212,0,.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.085),
    inset 0 -2px 0 rgba(0,0,0,.70),
    0 6px 0 #040404,
    0 18px 30px rgba(0,0,0,.40),
    0 0 34px rgba(255,212,0,.07) !important;
}

/* ---------------------------------------------------------
   MODALS / BOTTOM SHEETS
   --------------------------------------------------------- */

:is(.modal-card,.modal-backdrop > .modal){
  background:
    linear-gradient(160deg,#181818,#0E0E0E 62%,#080808) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -2px 0 rgba(0,0,0,.68),
    0 8px 0 #030303,
    0 30px 80px rgba(0,0,0,.58),
    0 0 44px rgba(255,212,0,.045) !important;
}

/* ---------------------------------------------------------
   RESPONSIVE: KEEP DEPTH ON MOBILE, REMOVE ANGLE
   --------------------------------------------------------- */

@media (max-width:720px){
  .balance-card{
    transform:none;
  }

  :is(.hero,.auth-card,.panel,.form-card,.content-card,.usage-card,.info-strip,.authority){
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.07),
      inset 0 -2px 0 rgba(0,0,0,.72),
      0 4px 0 #030303,
      0 12px 24px rgba(0,0,0,.40),
      0 22px 46px rgba(0,0,0,.18) !important;
  }

  :is(.action-card,.service-card,.topic-card,.ticket-row,.order-card){
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -2px 0 rgba(0,0,0,.72),
      0 6px 0 #030303,
      0 13px 22px rgba(0,0,0,.40) !important;
  }
}

/* Reduced motion keeps ALL static 3D depth. */
@media (prefers-reduced-motion:reduce){
  .balance-card{
    transform:none !important;
  }
}
/* END LUDOPANDA AAA WEB DEPTH + 3D SYSTEM V2 */