/* Final Study dashboard balance pass. Loaded after styles.css so it wins older phase overrides. */
.study-page .study-layout{grid-template-columns:245px minmax(620px,1fr) 292px!important;gap:16px!important;align-items:start!important}
.study-page .side-col,.study-page .right-col,.study-page .study-center-col{gap:12px!important}
.study-page .progress-panel{padding:14px 16px!important}
.study-page .progress-panel h3,.study-page .review-panel h3{font-size:17px!important;line-height:1.15!important;margin-bottom:10px!important}
.study-page .progress-item{display:grid!important;grid-template-columns:38px minmax(0,1fr)!important;gap:10px!important;align-items:center!important;padding:8px 0!important}
.study-page .progress-item i{width:38px!important;height:38px!important;flex-basis:38px!important}
.study-page .progress-item i img{width:23px!important;height:23px!important;object-fit:contain!important}
.study-page .progress-item span{display:block!important;color:#4f5878!important;font-size:11.5px!important;font-weight:650!important;line-height:1.15!important}
.study-page .progress-item small{display:none!important}
.study-page .progress-item b,.study-page .progress-item #levelTextSmall{display:block!important;margin-top:2px!important;color:#0b1248!important;font-size:16px!important;font-weight:900!important;line-height:1.12!important}
.study-page .progress-item .link-btn{display:inline-block!important;margin-top:3px!important;color:#5d46e8!important;font-size:11.5px!important;font-weight:850!important;text-decoration:underline!important}
.study-page .review-panel{padding:15px 16px!important}
.study-page .review-panel p{margin:0 0 6px!important;font-size:11.5px!important;line-height:1.3!important;color:#706b86!important}
.study-page .weak-row{min-height:30px!important;padding:4px 0!important;gap:8px!important;font-size:13px!important;font-weight:700!important}
.study-page .weak-row .diff{min-height:19px!important;padding:2px 7px!important;border-radius:999px!important;font-size:11px!important;line-height:1!important;font-weight:800!important}
.study-page .review-panel .link-center{margin-top:8px!important;font-size:12px!important}
.study-page .main-study-card{min-height:420px!important;padding:20px 26px!important;position:relative!important;overflow:visible!important}
.study-page .card-top{min-height:38px!important}
.study-page .word-display{padding:18px 0 8px!important}
.study-page .word-display h2{font-size:46px!important}
.study-page .reveal-box{margin:12px auto!important;padding:15px!important}
.study-page .action-row{margin-top:14px!important}
.study-page .study-quick-row{grid-template-columns:minmax(120px,.75fr) minmax(260px,1.35fr) minmax(145px,.9fr)!important;gap:10px!important;padding:10px!important;align-items:stretch!important;overflow:visible!important}
.study-page .study-quick-row>button{min-height:48px!important;padding:7px 10px!important;border-radius:14px!important}
.study-page #studyRangeButton{grid-template-columns:36px minmax(0,1fr) 16px!important}
.study-page #studyRangeButton b{font-size:13px!important}
.study-page #studyRangeButton small{font-size:10.8px!important}
.study-page .quick-action-icon{width:34px!important;height:34px!important}
.study-page .quick-action-icon img{width:22px!important;height:22px!important}
.study-page .right-col .study-promo-card{min-height:146px!important;padding:16px!important;border-radius:20px!important;overflow:hidden!important;isolation:isolate!important}
.study-page .right-col .study-promo-copy{position:relative!important;z-index:2!important;max-width:170px!important}
.study-page .right-col .study-promo-copy h3{font-size:18px!important;line-height:1.08!important}
.study-page .right-col .study-promo-copy p{font-size:12.5px!important;line-height:1.32!important;margin-bottom:9px!important}
.study-page .right-col .study-promo-copy button{height:38px!important;min-height:38px!important;border-radius:13px!important;font-size:14px!important}
.study-page .game-zone-card{background:linear-gradient(135deg,#f8f5ff 0%,#efe9ff 100%)!important}
.study-page .game-zone-card>img{width:164px!important;height:132px!important;right:-18px!important;bottom:0!important;opacity:.98!important;z-index:1!important}
.study-page .dragon-studio-card{min-height:134px!important;background:linear-gradient(135deg,#fff 0%,#f6f2ff 100%)!important}
.study-page .dragon-studio-card>img:not(.baby-dragon-peek){width:116px!important;height:116px!important;right:-14px!important;bottom:-10px!important;opacity:.98!important;z-index:1!important}
.study-page .right-col>.badge-mini{padding:16px!important;border-radius:20px!important;min-height:166px!important}

.game-how-backdrop{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  z-index:2147482000!important;
  display:grid!important;
  place-items:center!important;
  padding:22px!important;
  background:rgba(3,6,24,.68)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}

/* Hatchery Matchup final UI refresh: face-up match board, timer, rankings, and completion popup. */
.hatchery-match-page{
  background:
    radial-gradient(circle at 12% 86%,rgba(96,67,255,.34),transparent 24%),
    radial-gradient(circle at 92% 84%,rgba(112,64,255,.28),transparent 25%),
    linear-gradient(180deg,#071044 0%,#071133 52%,#090f2c 100%)!important;
}

.hatchery-match-page .hatchery-title-block{
  display:none!important;
}

.hatchery-match-page .hatchery-game-shell{
  grid-template-columns:minmax(260px,330px) minmax(560px,700px) minmax(260px,320px)!important;
  align-items:start!important;
  gap:18px!important;
  max-width:1420px!important;
  margin:0 auto!important;
  padding:18px!important;
}

.hatchery-match-page .hatchery-main-col{
  min-width:0!important;
}

.hatchery-match-page .hatchery-board{
  padding:22px 24px!important;
  border-radius:24px!important;
  background:linear-gradient(180deg,#fff,#f8f7ff)!important;
  border:4px solid rgba(91,78,170,.62)!important;
  box-shadow:0 20px 56px rgba(0,0,0,.34)!important;
}

.hatchery-match-page .hatchery-board-title{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  margin:0 0 20px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}

.hatchery-match-page .hatchery-board-title b{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  color:#091047!important;
  font-size:34px!important;
  line-height:1!important;
  font-weight:1000!important;
}

.hatchery-match-page .hatchery-board-title b img{
  width:50px!important;
  height:58px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 8px 12px rgba(89,64,210,.22))!important;
}

.hatchery-match-page .hatchery-timer-badge{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  min-height:48px!important;
  padding:0 16px!important;
  border-radius:14px!important;
  background:#f0edff!important;
  border:1px solid #d8d1ff!important;
  color:#5b47e9!important;
  font-weight:1000!important;
  font-size:16px!important;
}

.hatchery-match-page .hatchery-card-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  grid-auto-rows:minmax(168px,auto)!important;
  align-items:stretch!important;
  gap:14px!important;
}

.hatchery-match-page .hatchery-egg-card.face-up{
  min-height:168px!important;
  height:auto!important;
  align-self:stretch!important;
  padding:0!important;
  border-radius:16px!important;
  border:1.5px solid #cfc8ff!important;
  background:linear-gradient(180deg,#fff,#f9f8ff)!important;
  box-shadow:0 8px 16px rgba(68,55,155,.10)!important;
  color:#070d45!important;
  overflow:visible!important;
}

.hatchery-match-page .hatchery-egg-card.face-up .egg-card-inner{
  display:grid!important;
  width:100%!important;
  height:100%!important;
  min-height:inherit!important;
  transform:none!important;
}

.hatchery-match-page .hatchery-egg-card.face-up .egg-card-back{
  position:static!important;
  display:grid!important;
  place-items:center!important;
  min-height:100%!important;
  padding:16px 16px!important;
  transform:none!important;
  backface-visibility:visible!important;
  background:transparent!important;
  border:0!important;
  overflow:visible!important;
}

.hatchery-match-page .hatchery-egg-card.face-up .egg-card-front,
.hatchery-match-page .hatchery-egg-card.face-up .egg-card-back small,
.hatchery-match-page .hatchery-egg-card.face-up .egg-card-back img,
.hatchery-match-page .hatchery-egg-card.face-up .hatchery-match-icon{
  display:none!important;
}

.hatchery-match-page .hatchery-egg-card.face-up .egg-card-back b{
  margin:0!important;
  color:#080e4a!important;
  max-width:100%!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  hyphens:auto!important;
  font-size:16px!important;
  line-height:1.22!important;
  font-weight:600!important;
  text-align:center!important;
}

.hatchery-match-page .hatchery-egg-card.face-up[data-card-kind="definition"] .egg-card-back b{
  font-size:12.5px!important;
  line-height:1.24!important;
  font-weight:450!important;
}

.hatchery-match-page .hatchery-egg-card.face-up.selected{
  border-color:#6b56ff!important;
  box-shadow:0 0 0 4px rgba(107,86,255,.18),0 12px 24px rgba(77,58,190,.18)!important;
  transform:translateY(-2px)!important;
}

.hatchery-match-page .hatchery-egg-card.face-up.matched{
  opacity:.58!important;
  background:linear-gradient(180deg,#f1fff7,#e7fbef)!important;
  border-color:#65d58a!important;
}

.hatchery-match-page .hatchery-feedback{
  margin-top:18px!important;
  min-height:54px!important;
  border-radius:16px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#5b47e9!important;
  background:#f6f3ff!important;
  border:1px solid #ded7ff!important;
  font-size:18px!important;
  font-weight:1000!important;
  text-align:center!important;
}

.hatchery-match-page .hatchery-progress-strip{
  margin-top:18px!important;
  min-height:74px!important;
  border-radius:16px!important;
  background:#fff!important;
  border:1px solid #ded7ff!important;
  display:grid!important;
  grid-template-columns:auto minmax(120px,1fr) auto!important;
  align-items:center!important;
  gap:18px!important;
  padding:12px 18px!important;
}

.hatchery-match-page .hatchery-progress-strip span{
  color:#5e6384!important;
  font-size:18px!important;
  font-weight:1000!important;
}

.hatchery-match-page .hatchery-progress-strip span small{
  display:block!important;
  margin-top:4px!important;
  color:#1f285f!important;
  font-size:13px!important;
  font-weight:850!important;
}

.hatchery-match-page .hatchery-progress-strip img{
  width:42px!important;
  height:48px!important;
  object-fit:contain!important;
}

.hatchery-match-page .hatchery-progress-strip>div{
  height:14px!important;
  border-radius:999px!important;
  background:#ebe8ff!important;
  overflow:hidden!important;
}

.hatchery-match-page .hatchery-progress-strip>div i,
.hatchery-match-page .hatchery-progress-bar i{
  display:block!important;
  height:100%!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#755fff,#4f35dd)!important;
}

.hatchery-match-page .hatchery-ghost-button{
  min-height:48px!important;
  border-radius:999px!important;
  color:#6a4fff!important;
  background:#fff!important;
  border:2px solid #785bff!important;
  font-weight:1000!important;
}

.hatchery-match-page .hatchery-panel,
.hatchery-match-page .game-practice-controls,
.hatchery-match-page .hatchery-word-list-button,
.hatchery-match-page .hatchery-leaderboard{
  border-radius:22px!important;
  background:linear-gradient(180deg,rgba(12,19,54,.94),rgba(8,13,39,.98))!important;
  border:1px solid rgba(128,111,225,.36)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.28)!important;
  color:#fff!important;
}

.hatchery-match-page .nursery-goal-panel h2{
  margin:0 0 16px!important;
  color:#fff!important;
  font-size:28px!important;
}

.hatchery-match-page .nursery-goal-panel p,
.hatchery-match-page .hint-panel p{
  color:#d9defc!important;
  font-size:15px!important;
  line-height:1.45!important;
}

.hatchery-match-page .nursery-goal-panel>b{
  color:#fff!important;
  font-size:26px!important;
}

.hatchery-goal-complete{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  margin:16px 0!important;
  padding:14px!important;
  border-radius:16px!important;
  background:rgba(255,214,88,.10)!important;
  color:#ffe279!important;
}

.hatchery-goal-complete b,
.hatchery-goal-complete span{
  display:block!important;
}

.hatchery-match-page .hatchery-leaderboard{
  padding:22px!important;
}

.hatchery-leaderboard h2{
  margin:0 0 12px!important;
  color:#F8F7FF!important;
  font-size:24px!important;
  line-height:1.1!important;
}

.hatchery-leaderboard p{
  margin:0 0 18px!important;
  color:#CFCBFF!important;
  text-align:center!important;
  font-weight:1000!important;
}

.hatchery-rank-head,
.hatchery-rank-row{
  display:grid!important;
  grid-template-columns:58px 1fr auto!important;
  align-items:center!important;
  gap:12px!important;
}

.hatchery-rank-head{
  padding:0 0 10px!important;
  border-bottom:1px solid rgba(180,160,255,.35)!important;
  color:#CFCBFF!important;
  font-size:12px!important;
  font-weight:1000!important;
  text-transform:uppercase!important;
}

.hatchery-rank-row{
  min-height:54px!important;
  border-bottom:1px solid rgba(180,160,255,.35)!important;
  color:#F8F7FF!important;
  font-size:16px!important;
}

.hatchery-rank-row.current{
  margin:8px -6px 0!important;
  padding:0 10px!important;
  border:1px solid rgba(180,160,255,.5)!important;
  border-radius:12px!important;
  background:rgba(124,77,255,.35)!important;
  box-shadow:0 0 18px rgba(119,85,255,.24)!important;
}

.hatchery-rank-row b,
.hatchery-rank-row strong{
  color:#FFFFFF!important;
}

.hatchery-rank-row b small{
  display:block!important;
  margin-top:3px!important;
  color:#CFCBFF!important;
  font-size:11px!important;
  font-weight:800!important;
}

.hatchery-rank-row.best{
  background:rgba(255,255,255,.04)!important;
}

.hatchery-rank-empty{
  margin-top:14px!important;
  padding:16px!important;
  border:1px dashed rgba(180,160,255,.35)!important;
  border-radius:14px!important;
  color:#CFCBFF!important;
  background:rgba(255,255,255,.05)!important;
  font-weight:850!important;
  line-height:1.35!important;
  text-align:center!important;
}

.rank-medal{
  display:grid!important;
  place-items:center!important;
  width:30px!important;
  height:30px!important;
  border-radius:999px!important;
  color:#fff!important;
  font-weight:1000!important;
}

.rank-1{background:#e0a51f!important;}
.rank-2{background:#9da4b8!important;}
.rank-3{background:#b8692a!important;}
.rank-4,.rank-5{background:transparent!important;}

.hatchery-leaderboard small{
  display:block!important;
  margin-top:24px!important;
  color:#AFA8D8!important;
  text-align:center!important;
  font-style:italic!important;
  font-weight:750!important;
}

.hatchery-completion-backdrop{
  background:rgba(5,8,30,.58)!important;
  backdrop-filter:blur(5px)!important;
}

.hatchery-completion-modal{
  width:min(430px,92vw)!important;
  max-height:92vh!important;
  overflow:auto!important;
  padding:26px 22px 22px!important;
  border-radius:20px!important;
  border:1px solid #6d55ff!important;
  background:
    radial-gradient(circle at 50% 8%,rgba(136,89,255,.36),transparent 28%),
    linear-gradient(180deg,#101652,#070d34)!important;
  color:#fff!important;
  box-shadow:0 30px 80px rgba(0,0,0,.44),0 0 28px rgba(116,84,255,.36)!important;
  text-align:center!important;
}

.hatchery-completion-trophy{
  font-size:58px!important;
  line-height:1!important;
  margin-bottom:8px!important;
}

.hatchery-completion-modal h2{
  margin:0 0 6px!important;
  color:#fff!important;
  font-size:32px!important;
  line-height:1.05!important;
}

.hatchery-completion-modal>p{
  margin:0 0 18px!important;
  color:#f0edff!important;
  font-size:18px!important;
}

.hatchery-completion-stats{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:12px!important;
  margin-bottom:16px!important;
}

.hatchery-completion-stats span{
  display:grid!important;
  gap:6px!important;
  padding:14px!important;
  border-radius:14px!important;
  background:rgba(67,48,155,.54)!important;
  border:1px solid rgba(151,120,255,.62)!important;
}

.hatchery-completion-stats small{
  color:#CFCBFF!important;
  font-size:13px!important;
  font-weight:900!important;
}

.hatchery-completion-stats b{
  color:#FFFFFF!important;
  font-size:30px!important;
  line-height:1!important;
}

.hatchery-completion-modal .hatchery-leaderboard.compact{
  padding:14px!important;
  border-radius:14px!important;
  background:rgba(12,18,58,.84)!important;
  border-color:rgba(180,160,255,.35)!important;
  box-shadow:none!important;
}

.hatchery-completion-modal .hatchery-leaderboard.compact h2{
  font-size:14px!important;
}

.hatchery-completion-modal .hatchery-leaderboard.compact p{
  margin-bottom:10px!important;
  font-size:12px!important;
}

.hatchery-completion-modal .hatchery-rank-row{
  min-height:38px!important;
  font-size:13px!important;
}

.hatchery-completion-actions{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:12px!important;
  margin-top:16px!important;
}

.hatchery-completion-actions button{
  min-height:54px!important;
  border-radius:12px!important;
  font-size:16px!important;
}

@media(max-width:1180px){
  .hatchery-match-page .hatchery-game-shell{
    grid-template-columns:1fr!important;
  }
}

@media(max-width:760px){
  .hatchery-match-page .hatchery-board-title{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
  .hatchery-match-page .hatchery-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .hatchery-match-page .hatchery-progress-strip,
  .hatchery-completion-actions{
    grid-template-columns:1fr!important;
  }
}

/* Home and Level page final UI polish. */
body:not(.dragon-studio-mode) #homePage.page,
body:not(.dragon-studio-mode) #levelPage.page{
  min-height:calc(100vh - 78px)!important;
  padding:24px clamp(20px,3.4vw,68px) 42px!important;
  background:
    linear-gradient(180deg,rgba(4,10,28,.04),rgba(4,10,28,.18)),
    url("assets/assets_webp/backgrounds/bg_main_navy_glow.webp") center top/cover no-repeat!important;
}

body:not(.dragon-studio-mode) #homePage .compact-hero,
body:not(.dragon-studio-mode) #levelPage .level-hero{
  max-width:920px!important;
  margin:0 auto 22px!important;
  padding:0!important;
  text-align:center!important;
}

body:not(.dragon-studio-mode) #homePage .hero h1,
body:not(.dragon-studio-mode) #levelPage .level-hero h1{
  margin:0 0 7px!important;
  color:#fff!important;
  font-size:clamp(42px,3.4vw,62px)!important;
  line-height:.98!important;
  font-weight:1000!important;
  letter-spacing:0!important;
  text-shadow:0 14px 34px rgba(0,0,0,.30)!important;
}

body:not(.dragon-studio-mode) #homePage .hero p,
body:not(.dragon-studio-mode) #levelPage .level-hero p{
  margin:0!important;
  color:rgba(247,248,255,.93)!important;
  font-size:clamp(15px,1.05vw,19px)!important;
  line-height:1.32!important;
  font-weight:750!important;
}

body:not(.dragon-studio-mode) #homePage .info-pill,
body:not(.dragon-studio-mode) #levelPage .info-pill{
  min-height:34px!important;
  margin-top:13px!important;
  padding:0 24px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.94)!important;
  border:1px solid rgba(198,188,255,.52)!important;
  color:#5e4be8!important;
  font-size:14px!important;
  line-height:1!important;
  font-weight:950!important;
  box-shadow:0 14px 28px rgba(5,13,42,.14)!important;
}

body:not(.dragon-studio-mode) #homePage .home-product-grid{
  width:min(1760px,100%)!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:16px!important;
}

body:not(.dragon-studio-mode) #homePage .product-card.exam-card{
  min-height:304px!important;
  padding:20px 26px 15px!important;
  gap:8px!important;
  border-radius:17px!important;
  border:1px solid rgba(232,228,255,.94)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.80),rgba(255,255,255,.96)),
    url("assets/assets_webp/backgrounds/mystical_moonlit_library_interior.webp") center/cover no-repeat!important;
  box-shadow:0 18px 40px rgba(7,13,47,.20), inset 0 1px 0 rgba(255,255,255,.80)!important;
}

body:not(.dragon-studio-mode) #homePage .product-card .mascot-wrap.image-mascot{
  width:112px!important;
  height:112px!important;
  background:radial-gradient(circle,#fff 0%,rgba(255,255,255,.92) 58%,rgba(238,232,255,.56) 100%)!important;
}

body:not(.dragon-studio-mode) #homePage .product-card .mascot-wrap.image-mascot img{
  width:98px!important;
  height:98px!important;
}

body:not(.dragon-studio-mode) #homePage .product-card .exam-copy{
  gap:7px!important;
}

body:not(.dragon-studio-mode) #homePage .product-card .exam-copy h2{
  padding-bottom:9px!important;
  border-bottom:1px solid rgba(116,103,190,.18)!important;
  font-size:clamp(22px,1.45vw,29px)!important;
}

body:not(.dragon-studio-mode) #homePage .product-card .exam-copy p{
  max-width:420px!important;
  min-height:34px!important;
  font-size:13px!important;
  line-height:1.22!important;
}

body:not(.dragon-studio-mode) #homePage .product-card .chips span,
body:not(.dragon-studio-mode) #homePage .product-card .chips.coming span,
body:not(.dragon-studio-mode) #homePage .product-card.coming-soon-card .chips span{
  padding:4px 10px!important;
  font-size:11.5px!important;
  box-shadow:none!important;
}

body:not(.dragon-studio-mode) #homePage .product-card .primary-wide{
  min-height:42px!important;
  margin-top:7px!important;
  border-radius:10px!important;
  font-size:14.5px!important;
}

body:not(.dragon-studio-mode) #homePage .home-strip.feature-strip,
body:not(.dragon-studio-mode) #homePage .home-strip.premium-feature-row{
  width:min(1360px,100%)!important;
  margin:18px auto 0!important;
  padding:18px 20px!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,rgba(19,27,70,.96),rgba(10,16,42,.98))!important;
  border:1px solid rgba(154,136,255,.38)!important;
  box-shadow:0 20px 48px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08)!important;
}

body:not(.dragon-studio-mode) #homePage .home-strip .feature{
  min-width:0!important;
  padding:0 16px!important;
  background:transparent!important;
  border-color:rgba(172,156,255,.22)!important;
  box-shadow:none!important;
}

body:not(.dragon-studio-mode) #homePage .home-strip .feature-text h3{
  font-size:13.5px!important;
}

body:not(.dragon-studio-mode) #homePage .home-strip .feature-text p{
  font-size:12.5px!important;
}

body:not(.dragon-studio-mode) #levelGrid.level-grid{
  width:min(1320px,100%)!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px!important;
  align-items:stretch!important;
}

body:not(.dragon-studio-mode) #levelGrid.level-grid.ssat{
  width:min(1180px,100%)!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card{
  position:relative!important;
  min-height:300px!important;
  padding:26px 28px 24px!important;
  display:grid!important;
  grid-template-columns:92px minmax(0,1fr)!important;
  grid-template-rows:auto auto 1fr auto auto!important;
  column-gap:20px!important;
  row-gap:12px!important;
  overflow:hidden!important;
  border-radius:17px!important;
  border:1px solid rgba(232,228,255,.94)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.84),rgba(255,255,255,.97)),
    url("assets/assets_webp/backgrounds/mystical_moonlit_library_interior.webp") center/cover no-repeat!important;
  box-shadow:0 20px 44px rgba(7,13,47,.22), inset 0 1px 0 rgba(255,255,255,.82)!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card .level-icon{
  grid-column:1!important;
  grid-row:1 / 3!important;
  width:84px!important;
  height:84px!important;
  margin:0!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(246,244,255,.94))!important;
  border:1px solid rgba(181,168,255,.38)!important;
  box-shadow:0 12px 24px rgba(43,31,112,.12)!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card .level-icon img{
  width:64px!important;
  height:64px!important;
  object-fit:contain!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card h3{
  grid-column:2!important;
  grid-row:1!important;
  margin:4px 0 0!important;
  color:#071044!important;
  font-size:clamp(24px,1.65vw,31px)!important;
  line-height:1.03!important;
  font-weight:1000!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card p{
  grid-column:2!important;
  grid-row:2!important;
  margin:0!important;
  color:#3a456a!important;
  font-size:15px!important;
  line-height:1.25!important;
  font-weight:850!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card p b{
  display:block!important;
  margin-top:2px!important;
  color:#5e4be8!important;
  font-weight:1000!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card .level-feature{
  grid-column:1 / -1!important;
  grid-row:3!important;
  align-self:start!important;
  margin:8px 0 0!important;
  padding-top:18px!important;
  border-top:1px solid rgba(116,103,190,.18)!important;
  color:#263153!important;
  font-size:14px!important;
  line-height:1.32!important;
  font-weight:850!important;
}

body:not(.dragon-studio-mode) #levelPage .level-count-line{
  grid-column:1 / -1!important;
  grid-row:4!important;
  align-self:end!important;
  margin:0!important;
  color:#747a9f!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:950!important;
  text-align:center!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card .primary-wide.start{
  grid-column:1 / -1!important;
  grid-row:5!important;
  min-height:46px!important;
  margin:4px 0 0!important;
  border-radius:10px!important;
  font-size:17px!important;
  font-weight:1000!important;
}

@media(max-width:1180px){
  body:not(.dragon-studio-mode) #homePage .home-product-grid,
  body:not(.dragon-studio-mode) #levelGrid.level-grid,
  body:not(.dragon-studio-mode) #levelGrid.level-grid.ssat{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* Home card hover motion and flatter full-width buttons. */
body:not(.dragon-studio-mode) #homePage .product-card.exam-card{
  overflow:visible!important;
  isolation:isolate!important;
  z-index:0!important;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease!important;
}

body:not(.dragon-studio-mode) #homePage .product-card.exam-card::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:-10px!important;
  z-index:-1!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  background:
    radial-gradient(circle at 50% 18%,
      rgba(129,140,248,.28),
      rgba(99,102,241,.13) 38%,
      transparent 72%)!important;
  opacity:0!important;
  transition:opacity 220ms ease!important;
}

body:not(.dragon-studio-mode) #homePage .product-card.exam-card:hover{
  transform:translateY(-7px) scale(1.012)!important;
  border-color:rgba(129,140,248,.38)!important;
  box-shadow:
    0 22px 55px rgba(79,70,229,.28),
    0 0 38px rgba(129,140,248,.22),
    inset 0 1px 0 rgba(255,255,255,.92)!important;
}

body:not(.dragon-studio-mode) #homePage .product-card.exam-card:hover::after{
  opacity:1!important;
}

body:not(.dragon-studio-mode) #homePage .product-card .mascot-wrap.image-mascot img{
  transition:transform 220ms ease!important;
}

body:not(.dragon-studio-mode) #homePage .product-card.exam-card:hover .mascot-wrap.image-mascot img{
  transform:translateY(-3px) scale(1.035)!important;
}

body:not(.dragon-studio-mode) #homePage .product-card .primary-wide,
body:not(.dragon-studio-mode) #homePage .product-card .primary-wide.disabled,
body:not(.dragon-studio-mode) #homePage .product-card.coming-soon-card .primary-wide{
  width:100%!important;
  max-width:none!important;
  height:40px!important;
  min-height:40px!important;
  padding:0 18px!important;
  border-radius:9px!important;
  font-size:14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-shadow:0 8px 18px rgba(79,70,229,.18)!important;
  transition:
    transform 180ms ease,
    filter 180ms ease,
    box-shadow 180ms ease!important;
}

body:not(.dragon-studio-mode) #homePage .product-card .primary-wide:not(.disabled):hover{
  transform:translateY(-1px)!important;
  filter:brightness(1.06)!important;
  box-shadow:0 12px 24px rgba(79,70,229,.28)!important;
}

body:not(.dragon-studio-mode) #homePage .product-card .primary-wide.disabled,
body:not(.dragon-studio-mode) #homePage .product-card.coming-soon-card .primary-wide{
  box-shadow:none!important;
}

@media(max-width:620px){
  body:not(.dragon-studio-mode) #homePage .product-card .primary-wide,
  body:not(.dragon-studio-mode) #homePage .product-card .primary-wide.disabled,
  body:not(.dragon-studio-mode) #homePage .product-card.coming-soon-card .primary-wide{
    height:42px!important;
    min-height:42px!important;
  }
}

/* Final Level header row fix: egg left, title/subtitle right on one line. */
body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid .level-card{
  display:grid!important;
  grid-template-columns:76px minmax(0,1fr)!important;
  column-gap:16px!important;
}

body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid .level-card > .level-icon{
  grid-column:1!important;
  grid-row:1!important;
  width:68px!important;
  height:68px!important;
  align-self:center!important;
  justify-self:start!important;
}

body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid .level-card > .level-icon img{
  width:54px!important;
  height:54px!important;
}

body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid .level-card > div:nth-of-type(2){
  grid-column:2!important;
  grid-row:1!important;
  align-self:center!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
}

body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid .level-card > div:nth-of-type(2) h3,
body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid .level-card > div:nth-of-type(2) p{
  grid-column:auto!important;
  grid-row:auto!important;
  width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  text-align:left!important;
}

/* Level card hover motion for Grade/ISEE level grids. */
body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid.g212 .level-card,
body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid.isee .level-card{
  overflow:visible!important;
  isolation:isolate!important;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease!important;
}

body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid.g212 .level-card::after,
body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid.isee .level-card::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:-10px!important;
  z-index:-1!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  background:
    radial-gradient(circle at 50% 20%,
      rgba(129,140,248,.24),
      rgba(99,102,241,.11) 38%,
      transparent 72%)!important;
  opacity:0!important;
  transition:opacity 220ms ease!important;
}

body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid.g212 .level-card:hover,
body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid.isee .level-card:hover{
  transform:translateY(-7px) scale(1.012)!important;
  border-color:rgba(129,140,248,.34)!important;
  box-shadow:
    0 22px 55px rgba(79,70,229,.20),
    0 0 34px rgba(129,140,248,.16),
    inset 0 1px 0 rgba(255,255,255,.92)!important;
}

body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid.g212 .level-card:hover::after,
body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid.isee .level-card:hover::after{
  opacity:1!important;
}

body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid.g212 .level-card > .level-icon,
body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid.isee .level-card > .level-icon{
  transition:transform 220ms ease!important;
}

body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid.g212 .level-card:hover > .level-icon,
body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid.isee .level-card:hover > .level-icon{
  transform:translateY(-2px) scale(1.025)!important;
}

@media(max-width:720px){
  body:not(.dragon-studio-mode) #homePage.page,
  body:not(.dragon-studio-mode) #levelPage.page{
    padding:20px 14px 32px!important;
  }

  body:not(.dragon-studio-mode) #homePage .hero h1,
  body:not(.dragon-studio-mode) #levelPage .level-hero h1{
    font-size:clamp(36px,11vw,48px)!important;
  }

  body:not(.dragon-studio-mode) #homePage .home-product-grid,
  body:not(.dragon-studio-mode) #levelGrid.level-grid,
  body:not(.dragon-studio-mode) #levelGrid.level-grid.ssat{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }

  body:not(.dragon-studio-mode) #homePage .product-card.exam-card{
    min-height:0!important;
    padding:18px 16px 14px!important;
  }

  body:not(.dragon-studio-mode) #homePage .product-card .exam-copy p{
    min-height:0!important;
  }

  body:not(.dragon-studio-mode) #homePage .home-strip.feature-strip,
  body:not(.dragon-studio-mode) #homePage .home-strip.premium-feature-row{
    grid-template-columns:1fr!important;
    padding:18px!important;
  }

  body:not(.dragon-studio-mode) #homePage .home-strip .feature{
    padding:16px 0!important;
    border-right:0!important;
    border-bottom:1px solid rgba(172,156,255,.18)!important;
  }

  body:not(.dragon-studio-mode) #levelPage .level-card{
    min-height:0!important;
    padding:20px 18px 18px!important;
    grid-template-columns:80px minmax(0,1fr)!important;
    column-gap:14px!important;
  }

  body:not(.dragon-studio-mode) #levelPage .level-card .level-icon{
    width:74px!important;
    height:74px!important;
  }

  body:not(.dragon-studio-mode) #levelPage .level-card .level-icon img{
    width:56px!important;
    height:56px!important;
  }

  body:not(.dragon-studio-mode) #levelPage .level-card h3{
    font-size:25px!important;
  }

body:not(.dragon-studio-mode) #levelPage .level-card .primary-wide.start{
    min-height:48px!important;
    font-size:17px!important;
  }
}

/* Profile Community Rankings entry card. */
.profile-page .profile-community-card .profile-card-heading{
  align-items:flex-start!important;
  gap:12px!important;
}
.profile-page .profile-community-heading-copy{
  position:relative!important;
  z-index:1!important;
  min-width:0!important;
}
.profile-page .profile-community-heading-copy h3{
  margin:0!important;
}
.profile-page .profile-community-heading-copy p{
  margin:3px 0 0!important;
  color:rgba(255,255,255,.86)!important;
  font-size:12px!important;
  line-height:1.2!important;
  font-weight:800!important;
  text-shadow:0 1px 10px rgba(21,15,70,.35)!important;
}
.profile-page .profile-community-card .profile-card-heading>button{
  position:relative!important;
  z-index:2!important;
  white-space:nowrap!important;
}
.profile-page .profile-community-rankings-entry{
  position:relative!important;
  z-index:1!important;
  display:grid!important;
  grid-template-columns:50px minmax(0,1fr) auto 154px!important;
  grid-template-areas:
    "icon copy button rank"
    "chips chips chips rank"!important;
  align-items:center!important;
  gap:10px 14px!important;
  min-height:148px!important;
  margin-top:10px!important;
  padding:15px 17px!important;
  border-radius:18px!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 72% 35%,rgba(255,211,111,.20),transparent 20%),
    radial-gradient(circle at 90% 70%,rgba(127,104,255,.15),transparent 26%),
    linear-gradient(180deg,rgba(255,255,255,.96),rgba(246,242,255,.93))!important;
  border:1px solid rgba(255,255,255,.80)!important;
  box-shadow:0 14px 30px rgba(20,18,74,.11),inset 0 1px 0 rgba(255,255,255,.86)!important;
}
.profile-page .profile-community-rankings-entry::before,
.profile-page .profile-community-rankings-entry::after{
  content:""!important;
  position:absolute!important;
  pointer-events:none!important;
  opacity:.62!important;
}
.profile-page .profile-community-rankings-entry::before{
  width:92px!important;
  height:54px!important;
  right:-18px!important;
  bottom:-14px!important;
  border-radius:999px 999px 0 0!important;
  background:rgba(210,202,255,.50)!important;
  box-shadow:-52px -4px 0 rgba(226,220,255,.36),-96px 14px 0 rgba(235,231,255,.28)!important;
}
.profile-page .profile-community-rankings-entry::after{
  width:8px!important;
  height:8px!important;
  left:53%!important;
  top:36%!important;
  background:#ffd86f!important;
  transform:rotate(45deg)!important;
  box-shadow:36px -25px 0 rgba(126,108,255,.45),82px 20px 0 rgba(255,216,111,.50)!important;
}
.profile-page .profile-community-entry-icon{
  grid-area:icon!important;
  width:50px!important;
  height:50px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,#efeaff,#ded6ff)!important;
  border:1px solid rgba(205,196,255,.90)!important;
  box-shadow:0 10px 22px rgba(84,61,190,.14)!important;
}
.profile-page .profile-community-entry-icon .profile-new-icon,
.profile-page .profile-community-entry-icon img{
  width:31px!important;
  height:31px!important;
  object-fit:contain!important;
}
.profile-page .profile-community-entry-copy{
  grid-area:copy!important;
  min-width:0!important;
}
.profile-page .profile-community-entry-copy h4{
  margin:0 0 5px!important;
  color:#0a1040!important;
  font-size:18px!important;
  line-height:1.08!important;
  font-weight:1000!important;
}
.profile-page .profile-community-entry-copy p{
  margin:0!important;
  color:#263054!important;
  font-size:12px!important;
  line-height:1.25!important;
  font-weight:850!important;
}
.profile-page .profile-community-entry-copy small{
  display:block!important;
  margin-top:6px!important;
  color:#6b55ee!important;
  font-size:11.5px!important;
  line-height:1!important;
  font-weight:950!important;
}
.profile-page .profile-community-rankings-btn{
  grid-area:button!important;
  min-height:40px!important;
  padding:0 19px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  border:0!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,#765fff,#5236df)!important;
  color:#fff!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:1000!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  box-shadow:0 10px 22px rgba(84,61,221,.22),inset 0 1px 0 rgba(255,255,255,.28)!important;
}
.profile-page .profile-community-rankings-btn:hover{
  transform:translateY(-1px)!important;
  filter:brightness(1.05)!important;
}
.profile-page .profile-community-ranking-chips{
  grid-area:chips!important;
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  min-width:0!important;
  padding-top:9px!important;
  border-top:1px solid rgba(116,103,190,.14)!important;
}
.profile-page .profile-community-ranking-chips span{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:25px!important;
  padding:0 10px!important;
  border-radius:999px!important;
  border:1px solid #ddd6ff!important;
  background:rgba(255,255,255,.68)!important;
  color:#171c4a!important;
  font-size:10.5px!important;
  line-height:1!important;
  font-weight:950!important;
  white-space:nowrap!important;
}
.profile-page .profile-community-rank-preview{
  grid-area:rank!important;
  align-self:stretch!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:5px!important;
  padding-left:15px!important;
  border-left:1px solid rgba(116,103,190,.18)!important;
  color:#0a1040!important;
}
.profile-page .profile-community-rank-preview b{
  color:#6b55ee!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:1000!important;
}
.profile-page .profile-community-rank-preview strong{
  color:#080d37!important;
  font-size:30px!important;
  line-height:.95!important;
  font-weight:1000!important;
}
.profile-page .profile-community-rank-preview span{
  width:max-content!important;
  max-width:100%!important;
  padding:5px 9px!important;
  border-radius:999px!important;
  background:#e5ddff!important;
  color:#5b3fe5!important;
  font-size:10.5px!important;
  line-height:1!important;
  font-weight:1000!important;
  white-space:nowrap!important;
}
.profile-page .profile-community-rank-preview small{
  color:#4c5478!important;
  font-size:11px!important;
  line-height:1.15!important;
  font-weight:900!important;
}
@media(max-width:1180px){
  .profile-page .profile-community-rankings-entry{
    grid-template-columns:50px minmax(0,1fr) auto!important;
    grid-template-areas:
      "icon copy button"
      "chips chips chips"!important;
  }
  .profile-page .profile-community-rank-preview{
    display:none!important;
  }
}
@media(max-width:720px){
  .profile-page .profile-community-rankings-entry{
    grid-template-columns:1fr!important;
    grid-template-areas:
      "icon"
      "copy"
      "button"
      "chips"!important;
    justify-items:start!important;
  }
  .profile-page .profile-community-rankings-btn{
    width:100%!important;
  }
}

/* True final Level wrapper repair. */
body:not(.dragon-studio-mode) #levelPage .level-card > div:nth-of-type(2){
  grid-column:2!important;
  grid-row:1 / 3!important;
  display:block!important;
  flex-direction:initial!important;
  min-width:0!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  justify-self:stretch!important;
  align-self:start!important;
  overflow:visible!important;
}
body:not(.dragon-studio-mode) #levelPage .level-card > div:nth-of-type(2) h3,
body:not(.dragon-studio-mode) #levelPage .level-card > div:nth-of-type(2) p{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  overflow:visible!important;
  white-space:normal!important;
  text-overflow:clip!important;
}

/* Absolute final Home feature contrast and Level card title wrapper repair. */
body:not(.dragon-studio-mode) #homePage .home-strip .feature-text h3,
body:not(.dragon-studio-mode) #homePage .home-strip .feature-item h3,
body:not(.dragon-studio-mode) #homePage .home-strip .feature b{
  color:#fff!important;
  text-shadow:none!important;
}
body:not(.dragon-studio-mode) #homePage .home-strip .feature-text p,
body:not(.dragon-studio-mode) #homePage .home-strip .feature-item p,
body:not(.dragon-studio-mode) #homePage .home-strip .feature span{
  color:rgba(235,232,255,.82)!important;
  text-shadow:none!important;
}
body:not(.dragon-studio-mode) #levelPage .level-card > div:nth-of-type(2){
  grid-column:2!important;
  grid-row:1 / 3!important;
  min-width:0!important;
  width:100%!important;
  max-width:none!important;
  display:block!important;
}
body:not(.dragon-studio-mode) #levelPage .level-card > div:nth-of-type(2) h3{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  margin:4px 0 8px!important;
  white-space:normal!important;
}
body:not(.dragon-studio-mode) #levelPage .level-card > div:nth-of-type(2) p{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  white-space:normal!important;
}
@media(max-width:720px){
  body:not(.dragon-studio-mode) #levelPage .level-card > div:nth-of-type(2){
    grid-column:2!important;
    grid-row:1 / 3!important;
  }
}

.game-how-modal{
  position:relative!important;
  z-index:2147482001!important;
  max-height:min(78vh,620px)!important;
  overflow:auto!important;
}

.stoke-word-list-backdrop,
.forge-word-list-backdrop,
.flight-word-list-backdrop,
.hatchery-word-list-backdrop,
.term-word-list-backdrop,
.whisper-word-list-backdrop{
  position:fixed!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  width:100vw!important;
  height:100vh!important;
  z-index:2147483000!important;
  display:block!important;
  padding:0!important;
  background:rgba(3,6,24,.72)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}

.stoke-word-list-modal,
.forge-word-list-modal,
.flight-word-list-modal,
.hatchery-word-list-modal,
.term-word-list-modal,
.whisper-word-list-modal{
  position:fixed!important;
  top:50vh!important;
  left:50vw!important;
  right:auto!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  z-index:2147483001!important;
  margin:0!important;
  width:min(860px,calc(100vw - 32px))!important;
  max-height:min(78vh,720px)!important;
  overflow:auto!important;
}
.study-page .right-col>.badge-mini h3{display:block!important;font-size:17px!important;margin-bottom:10px!important;color:#6546f3!important}
.study-page .right-col>.badge-mini .badge-view-all-btn{display:flex!important;align-items:center!important;justify-content:center!important;width:112px!important;height:36px!important;min-height:36px!important;margin:12px 0 0!important;padding:0 16px!important;border:0!important;border-radius:999px!important;background:linear-gradient(180deg,#765df6,#563fdc)!important;color:#fff!important;box-shadow:0 8px 16px rgba(86,63,220,.18)!important;font-size:13px!important;font-weight:900!important;text-decoration:none!important;white-space:nowrap!important;cursor:pointer!important}
.study-page .right-col .mini-badges{gap:7px!important}
.study-page .right-col .mini-badge img{width:46px!important;height:46px!important}
.study-page .right-col .mini-badge small{font-size:10.5px!important}
.study-page .essential-ribbon{top:14px!important;left:16px!important;width:24px!important;height:auto!important;max-height:58px!important;object-fit:contain!important;background:transparent!important;box-shadow:none!important;border:0!important;filter:none!important}
body.range-popover-open::after{content:""!important;display:block!important;position:fixed!important;inset:0!important;z-index:80!important;background:rgba(20,18,55,.26)!important;backdrop-filter:blur(1px)!important;pointer-events:none!important}
.study-page .study-quick-row .set-menu{position:fixed!important;top:50%!important;left:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%)!important;width:min(430px,calc(100vw - 36px))!important;max-height:min(78vh,620px)!important;border-radius:22px!important;z-index:95!important;pointer-events:auto!important}
.study-page .study-quick-row .set-menu::before{display:none!important}
.range-popover-panel{border-radius:22px!important}
.study-page .set-menu .range-option{background:#fff!important;border:1px solid #eeeaff!important;box-shadow:none!important}
.study-page .set-menu .range-option.selected{background:#f3f0ff!important;border:1px solid #c8bfff!important;border-radius:14px!important;box-shadow:none!important;color:#27305c!important}
.study-page .set-menu .range-option.selected::before,.study-page .set-menu .range-option.selected::after{display:none!important}
.study-page .set-menu .range-option i{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:18px!important;height:18px!important;border:1px solid #c8bfff!important;border-radius:999px!important;background:#fff!important;color:#7158f5!important;font-size:10px!important;line-height:1!important;flex:0 0 18px!important}
.study-page .set-menu .range-option.selected i{background:#7158f5!important;border-color:#7158f5!important;color:#fff!important;font-size:10px!important}
.study-page .set-menu .range-type-btn,.study-page .set-menu .range-option,.study-page .set-menu .range-cancel,.study-page .set-menu .range-apply{pointer-events:auto!important;cursor:pointer!important}
.study-page .set-menu .range-empty-note{margin:10px 0 0!important;padding:12px 14px!important;border-radius:14px!important;background:#fbfaff!important;border:1px solid #eeeaff!important;color:#6f6a86!important;font-size:13px!important;font-weight:700!important}
.modal,.modal.wide,.modal-content,#settingsModal{border-radius:28px!important;background-clip:padding-box!important}
#settingsModal{overflow:hidden!important;box-sizing:border-box!important;box-shadow:0 30px 80px rgba(7,19,63,.24)!important}
#settingsModal .settings-form{max-height:calc(86vh - 96px)!important;overflow-y:auto!important;padding-right:4px!important;border-radius:0 0 28px 28px!important}
@media(max-width:1180px){.study-page .study-layout{grid-template-columns:1fr!important;max-width:820px!important}.study-page .study-quick-row{grid-template-columns:1fr!important}}
@media(max-width:760px){.study-page .study-quick-row .set-menu{top:auto!important;left:0!important;right:0!important;bottom:0!important;transform:none!important;width:100%!important;max-height:75vh!important;border-radius:24px 24px 0 0!important}}

/* Mockup-matched study dashboard placement. Keep last: this file loads after styles.css. */
.study-page{
  max-width:1760px!important;
  padding:14px 26px 34px!important;
}
.study-page .free-banner{
  margin-bottom:22px!important;
}
.study-page .study-layout{
  display:grid!important;
  grid-template-columns:320px minmax(620px,1fr) 360px!important;
  gap:24px!important;
  align-items:stretch!important;
  max-width:none!important;
  width:100%!important;
  margin:0 auto!important;
}
.study-page .side-col,
.study-page .right-col,
.study-page .study-center-col{
  display:flex!important;
  flex-direction:column!important;
  gap:18px!important;
  min-width:0!important;
}
.study-page .study-center-col{
  height:100%!important;
}
.study-page .main-study-card{
  flex:1 1 auto!important;
  min-height:720px!important;
  height:100%!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  padding:34px 30px 44px!important;
  border-radius:20px!important;
}
.study-page .word-display{
  flex:1 1 auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  padding:48px 0 28px!important;
}
.study-page .reveal-box,
.study-page .answer-panel,
.study-page .action-row{
  flex:0 0 auto!important;
}
.study-page .action-row{
  margin-top:28px!important;
}
.study-page .progress-panel,
.study-page .review-panel,
.study-page .right-col>.study-promo-card,
.study-page .right-col>.badge-mini,
.study-page .sidebar-action-card{
  border-radius:20px!important;
}
.study-page .progress-panel,
.study-page .review-panel{
  padding:24px!important;
}
.study-page .progress-panel{
  min-height:400px!important;
}
.study-page .review-panel{
  min-height:224px!important;
}
.study-page .sidebar-action-card{
  width:100%!important;
  min-height:86px!important;
  display:grid!important;
  grid-template-columns:52px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:14px!important;
  padding:16px 20px!important;
  border:1px solid var(--border)!important;
  background:#fff!important;
  color:var(--text)!important;
  text-align:left!important;
  font-size:16px!important;
  font-weight:850!important;
  cursor:pointer!important;
  box-shadow:var(--shadow)!important;
}
.study-page .shuffle-deck-card{
  grid-template-columns:52px minmax(0,1fr)!important;
}
.study-page .quick-action-icon{
  width:52px!important;
  height:52px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:18px!important;
  background:#f4f1ff!important;
  flex:0 0 auto!important;
}
.study-page .quick-action-icon img{
  width:34px!important;
  height:34px!important;
  object-fit:contain!important;
}
.study-page .study-range-shell{
  position:relative!important;
  width:100%!important;
}
.study-page #studyRangeButton{
  position:relative!important;
  min-height:86px!important;
  grid-template-columns:52px minmax(0,1fr) 18px!important;
}
.study-page #studyRangeButton b{
  display:block!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:var(--navy)!important;
  font-size:15px!important;
  line-height:1.15!important;
  font-weight:900!important;
}
.study-page #studyRangeButton small{
  display:block!important;
  margin-top:5px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#625f7a!important;
  font-size:13px!important;
  line-height:1.2!important;
  font-weight:650!important;
}
.study-page #studyRangeButton .range-chevron{
  color:#5b45e8!important;
  font-size:30px!important;
  font-style:normal!important;
  line-height:1!important;
}
.study-page .study-range-shell .set-menu,
.study-page .study-quick-row .set-menu,
.study-page .quick-panel .set-menu{
  position:absolute!important;
  top:98px!important;
  left:0!important;
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
  width:min(430px,calc(100vw - 52px))!important;
  max-height:min(72vh,560px)!important;
  margin:0!important;
  padding:0!important;
  overflow:auto!important;
  z-index:95!important;
  border:1px solid #ded8ff!important;
  border-radius:22px!important;
  background:#fff!important;
  box-shadow:0 22px 52px rgba(31,24,92,.18)!important;
  pointer-events:auto!important;
}
.study-page .study-range-shell .set-menu.hidden{
  display:none!important;
}
.study-page .study-range-shell .set-menu::before{
  content:""!important;
  position:absolute!important;
  top:-8px!important;
  left:26px!important;
  width:16px!important;
  height:16px!important;
  transform:rotate(45deg)!important;
  background:#fff!important;
  border-left:1px solid #ded8ff!important;
  border-top:1px solid #ded8ff!important;
}
.study-page .right-col .study-promo-card{
  min-height:178px!important;
  padding:26px 24px!important;
}
.study-page .game-zone-card>img{
  width:158px!important;
  height:134px!important;
}
.study-page .dragon-studio-card>img:not(.baby-dragon-peek){
  width:112px!important;
  height:106px!important;
}
.study-page .study-promo-copy h3{
  font-size:26px!important;
}
.study-page .study-promo-copy p{
  font-size:16px!important;
}
.study-page .study-promo-copy button,
.study-page .game-zone-card .study-promo-copy button,
.study-page .dragon-studio-card .study-promo-copy button{
  min-height:50px!important;
  border-radius:16px!important;
}
.study-page .right-col>.badge-mini{
  display:block!important;
  min-height:0!important;
  padding:22px!important;
}
.study-page .right-col>.badge-mini h3{
  display:block!important;
  font-size:26px!important;
  margin-bottom:18px!important;
}
.study-page .right-col .mini-badges{
  gap:12px!important;
}
.study-page .right-col .mini-badge img{
  width:58px!important;
  height:58px!important;
}
.study-page .right-col .mini-badge small{
  font-size:12px!important;
  line-height:1.15!important;
}
.study-page .right-col>.badge-mini .badge-view-all-btn{
  min-width:126px!important;
  min-height:50px!important;
  height:50px!important;
  margin-top:16px!important;
  border-radius:16px!important;
  font-size:16px!important;
  font-weight:800!important;
}
@media(max-width:1320px){
  .study-page .study-layout{
    grid-template-columns:300px minmax(0,1fr) 340px!important;
    gap:20px!important;
  }
}
@media(max-width:1180px){
  .study-page{
    max-width:860px!important;
    padding:14px 18px 32px!important;
  }
  .study-page .study-layout{
    grid-template-columns:1fr!important;
    gap:18px!important;
  }
  .study-page .study-center-col{
    order:1!important;
  }
  .study-page .side-col{
    order:2!important;
  }
  .study-page .right-col{
    order:3!important;
  }
  .study-page .main-study-card{
    min-height:620px!important;
  }
  .study-page .progress-panel,
  .study-page .review-panel{
    min-height:0!important;
  }
}
@media(max-width:760px){
  .study-page{
    padding:12px 12px 28px!important;
  }
  .study-page .main-study-card{
    min-height:540px!important;
    padding:22px 16px 24px!important;
  }
  .study-page .word-display{
    padding:32px 0 20px!important;
  }
  .study-page .sidebar-action-card,
  .study-page #studyRangeButton{
    min-height:76px!important;
    grid-template-columns:46px minmax(0,1fr) 16px!important;
    padding:13px 16px!important;
  }
  .study-page .shuffle-deck-card{
    grid-template-columns:46px minmax(0,1fr)!important;
  }
  .study-page .quick-action-icon{
    width:46px!important;
    height:46px!important;
  }
  .study-page .quick-action-icon img{
    width:30px!important;
    height:30px!important;
  }
  .study-page .study-range-shell .set-menu,
  .study-page .study-quick-row .set-menu,
  .study-page .quick-panel .set-menu{
    position:fixed!important;
    inset:auto 0 0 0!important;
    transform:none!important;
    width:100%!important;
    max-height:75vh!important;
    border-radius:24px 24px 0 0!important;
    z-index:95!important;
  }
  .study-page .study-range-shell .set-menu::before{
    display:none!important;
  }
}

/* Background upgrade reinforcement loaded after base styles. */
.study-page{
  background:transparent!important;
}
.study-page .study-layout{
  position:relative!important;
  z-index:1!important;
}
.study-page .main-study-card,
.study-page .progress-panel,
.study-page .review-panel,
.study-page .right-col>.study-promo-card,
.study-page .right-col>.badge-mini,
.study-page .sidebar-action-card,
.study-page #studyRangeButton{
  background-color:#fff!important;
  border-color:rgba(213,207,244,.92)!important;
  box-shadow:0 18px 44px rgba(6,13,48,.18)!important;
}
.study-page .game-zone-card,
.study-page .dragon-studio-card{
  background-image:
    linear-gradient(135deg,rgba(255,255,255,.98),rgba(246,243,255,.9))!important;
}

/* Latest Study Setting polish: centered modal and compact right rail. */
body.range-popover-open::after{
  display:none!important;
}
.study-page .study-layout{
  grid-template-columns:320px minmax(620px,1fr) 360px!important;
  gap:20px!important;
  align-items:start!important;
}
.study-page .side-col,
.study-page .right-col,
.study-page .study-center-col{
  gap:16px!important;
}
.study-page .main-study-card{
  min-height:650px!important;
  height:auto!important;
  flex:0 0 auto!important;
  padding:28px 30px 34px!important;
}
.study-page .word-display{
  padding:34px 0 20px!important;
}
.study-page .action-row{
  margin-top:20px!important;
}
.study-page .progress-panel{
  min-height:330px!important;
}
.study-page .review-panel{
  min-height:154px!important;
}
.study-page .sidebar-action-card,
.study-page #studyRangeButton{
  min-height:84px!important;
}
.study-page .study-range-card-button{
  min-height:84px!important;
}
.study-page .right-col .study-promo-card,
.study-page .right-col>.badge-mini{
  position:relative!important;
  overflow:hidden!important;
}
.study-page .right-col .study-promo-card{
  min-height:130px!important;
  max-height:150px!important;
  padding:18px 112px 18px 22px!important;
}
.study-page .right-col .study-promo-copy{
  max-width:190px!important;
}
.study-page .right-col .study-promo-copy h3{
  margin:0 0 8px!important;
  font-size:22px!important;
  line-height:1.1!important;
  white-space:normal!important;
}
.study-page .right-col .study-promo-copy p{
  margin:0!important;
  font-size:13px!important;
  line-height:1.32!important;
}
.study-page .study-promo-copy button,
.study-page .game-zone-card .study-promo-copy button,
.study-page .dragon-studio-card .study-promo-copy button,
.study-page .right-col>.badge-mini .badge-view-all-btn{
  position:absolute!important;
  top:18px!important;
  right:18px!important;
  width:auto!important;
  min-width:74px!important;
  height:38px!important;
  min-height:38px!important;
  margin:0!important;
  padding:0 18px!important;
  border-radius:14px!important;
  font-size:14px!important;
  line-height:1!important;
  z-index:3!important;
}
.study-page .game-zone-card>img{
  width:124px!important;
  height:104px!important;
  right:2px!important;
  bottom:2px!important;
}
.study-page .dragon-studio-card>img:not(.baby-dragon-peek){
  width:90px!important;
  height:86px!important;
  right:10px!important;
  bottom:8px!important;
}
.study-page .right-col>.badge-mini{
  min-height:145px!important;
  max-height:165px!important;
  padding:18px 22px!important;
}
.study-page .right-col>.badge-mini h3{
  margin:0 100px 12px 0!important;
  font-size:22px!important;
  line-height:1.1!important;
}
.study-page .right-col .mini-badges{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
}
.study-page .right-col .mini-badge{
  gap:5px!important;
}
.study-page .right-col .mini-badge img{
  width:44px!important;
  height:44px!important;
}
.study-page .right-col .mini-badge small{
  font-size:10.5px!important;
  line-height:1.12!important;
}
#setMenu.study-setting-overlay,
#setMenu.set-menu.study-setting-overlay{
  position:fixed!important;
  inset:0!important;
  z-index:9999!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:24px!important;
  width:auto!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  background:rgba(20,18,45,.35)!important;
  box-shadow:none!important;
  backdrop-filter:blur(3px)!important;
  transform:none!important;
}
#setMenu.study-setting-overlay.hidden{
  display:none!important;
}
#setMenu.study-setting-overlay::before{
  display:none!important;
}
#setMenu .study-setting-modal,
#setMenu .range-popover-panel{
  width:min(560px,calc(100vw - 48px))!important;
  max-height:calc(100vh - 64px)!important;
  overflow:hidden!important;
  border-radius:22px!important;
  background:#fff!important;
  box-shadow:0 24px 70px rgba(35,25,90,.25)!important;
  display:grid!important;
  grid-template-rows:auto auto auto minmax(0,1fr) auto!important;
  gap:14px!important;
  padding:0!important;
}
#setMenu .range-popover-header{
  padding:22px 24px 0!important;
}
#setMenu .range-popover-header h3{
  margin:0 0 4px!important;
  font-size:24px!important;
}
#setMenu .range-type-buttons,
#setMenu .range-current-card,
#setMenu .range-jump-section{
  margin-left:24px!important;
  margin-right:24px!important;
}
#setMenu .range-jump-section{
  min-height:0!important;
  overflow:hidden!important;
}
#setMenu .range-jump-list{
  max-height:220px!important;
  overflow-y:auto!important;
  padding-right:2px!important;
}
#setMenu .range-actions{
  position:relative!important;
  display:flex!important;
  justify-content:space-between!important;
  gap:12px!important;
  padding:0 24px 22px!important;
  background:#fff!important;
}
#setMenu .range-actions button{
  min-width:118px!important;
  height:42px!important;
  min-height:42px!important;
}
@media(max-width:1320px){
  .study-page .study-layout{
    grid-template-columns:300px minmax(0,1fr) 340px!important;
  }
}
@media(max-width:1180px){
  .study-page .study-layout{
    grid-template-columns:1fr!important;
    max-width:820px!important;
  }
  .study-page .main-study-card{
    min-height:620px!important;
  }
  .study-page .progress-panel,
  .study-page .review-panel{
    min-height:0!important;
  }
}
@media(max-width:768px){
  #setMenu.study-setting-overlay,
  #setMenu.set-menu.study-setting-overlay{
    padding:16px!important;
  }
  #setMenu .study-setting-modal,
  #setMenu .range-popover-panel{
    width:calc(100vw - 32px)!important;
    max-height:calc(100vh - 32px)!important;
  }
  #setMenu .range-jump-list{
    max-height:clamp(140px,calc(100vh - 560px),260px)!important;
  }
  .study-page .main-study-card{
    min-height:540px!important;
  }
}

/* Latest approved mockup: wider compact center card and clean Study Setting summary. */
.study-page{
  max-width:1720px!important;
}
.study-page .study-layout{
  grid-template-columns:300px minmax(760px,1fr) 340px!important;
  gap:22px!important;
  align-items:start!important;
}
.study-page .side-col,
.study-page .right-col,
.study-page .study-center-col{
  gap:16px!important;
}
.study-page .main-study-card{
  min-height:560px!important;
  height:auto!important;
  padding:28px 34px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
}
.study-page .word-display{
  flex:1 1 auto!important;
  justify-content:center!important;
  padding:20px 0 18px!important;
}
.study-page .action-row{
  margin-top:24px!important;
}
.study-page .progress-panel{
  min-height:304px!important;
}
.study-page .review-panel{
  min-height:144px!important;
}
.study-page .shuffle-deck-card{
  min-height:76px!important;
}
.study-page .study-range-card-button,
.study-page #studyRangeButton{
  min-height:76px!important;
  grid-template-columns:48px minmax(0,1fr) 18px!important;
  padding:14px 18px!important;
}
.study-page .study-range-card-button .quick-action-icon{
  width:48px!important;
  height:48px!important;
  border-radius:16px!important;
}
.study-page .study-range-card-button .quick-action-icon img{
  width:30px!important;
  height:30px!important;
}
.study-page .study-setting-title{
  display:block!important;
  color:#11133f!important;
  font-size:15px!important;
  font-weight:800!important;
  line-height:1.15!important;
  white-space:nowrap!important;
}
.study-page .study-setting-hidden-label{
  display:none!important;
}
.study-page .study-setting-subtitle,
.study-page #studyRangeButton small{
  display:block!important;
  margin-top:3px!important;
  color:#4f5275!important;
  font-size:13px!important;
  font-weight:650!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.study-page .right-col .study-promo-card{
  min-height:128px!important;
  max-height:148px!important;
  padding:22px 120px 20px 24px!important;
}
.study-page .right-col .study-promo-copy{
  position:static!important;
  max-width:176px!important;
}
.study-page .right-col .study-promo-copy h3{
  font-size:21px!important;
  line-height:1.08!important;
  margin:0 0 10px!important;
}
.study-page .right-col .study-promo-copy p{
  font-size:13px!important;
  line-height:1.36!important;
}
.study-page .study-promo-copy button,
.study-page .game-zone-card .study-promo-copy button,
.study-page .dragon-studio-card .study-promo-copy button{
  top:16px!important;
  right:16px!important;
  min-width:58px!important;
  width:auto!important;
  height:32px!important;
  min-height:32px!important;
  padding:0 14px!important;
  border-radius:12px!important;
  font-size:13px!important;
  font-weight:800!important;
}
.study-page .game-zone-card>img{
  width:116px!important;
  height:96px!important;
  right:78px!important;
  bottom:3px!important;
}
.study-page .dragon-studio-card>img:not(.baby-dragon-peek){
  width:78px!important;
  height:78px!important;
  right:76px!important;
  bottom:12px!important;
}
.study-page .right-col>.badge-mini{
  min-height:132px!important;
  max-height:154px!important;
  padding:22px 24px 18px!important;
}
.study-page .right-col>.badge-mini h3{
  margin:0 96px 10px 0!important;
  font-size:21px!important;
}
.study-page .right-col>.badge-mini .badge-view-all-btn{
  top:16px!important;
  right:16px!important;
  min-width:78px!important;
  width:auto!important;
  height:32px!important;
  min-height:32px!important;
  padding:0 14px!important;
  border-radius:12px!important;
  font-size:13px!important;
  font-weight:800!important;
}
.study-page .right-col .mini-badge img{
  width:42px!important;
  height:42px!important;
}
.study-page .right-col .mini-badge small{
  font-size:10px!important;
}
@media(max-width:1500px){
  .study-page .study-layout{
    grid-template-columns:280px minmax(620px,1fr) 320px!important;
    gap:22px!important;
  }
}
@media(max-width:1320px){
  .study-page .study-layout{
    grid-template-columns:280px minmax(560px,1fr) 320px!important;
    gap:20px!important;
  }
}
@media(max-width:1220px){
  .study-page{
    max-width:860px!important;
  }
  .study-page .study-layout{
    grid-template-columns:1fr!important;
    max-width:820px!important;
  }
  .study-page .study-center-col{
    order:1!important;
  }
  .study-page .side-col{
    order:2!important;
  }
  .study-page .right-col{
    order:3!important;
  }
}
@media(max-width:768px){
  .study-page .main-study-card{
    min-height:540px!important;
    padding:22px 16px 24px!important;
  }
  .study-page .word-display{
    padding:28px 0 18px!important;
  }
}

/* Site-wide premium midnight background system. */
:root{
  --bg-page-top:#07152f;
  --bg-page-mid:#0a1c3d;
  --bg-page-bottom:#081326;
  --bg-glow-purple:rgba(101,84,255,.22);
  --bg-glow-blue:rgba(78,125,255,.16);
  --bg-card:#ffffff;
  --bg-header:#ffffff;
  --surface-border:rgba(120,130,190,.16);
  --surface-shadow:0 10px 30px rgba(6,16,40,.10);
  --site-midnight-bg:
    radial-gradient(circle at 50% 8%,var(--bg-glow-purple),transparent 34%),
    radial-gradient(circle at 88% 20%,var(--bg-glow-blue),transparent 28%),
    radial-gradient(circle at 8% 32%,rgba(255,255,255,.05),transparent 10%),
    radial-gradient(circle at 72% 82%,rgba(75,105,255,.10),transparent 30%),
    linear-gradient(180deg,var(--bg-page-top) 0%,var(--bg-page-mid) 45%,var(--bg-page-bottom) 100%);
}
html,
body,
#app,
.app-shell,
main{
  min-height:100%!important;
  background:var(--site-midnight-bg)!important;
  background-attachment:fixed!important;
}
body{
  color:var(--navy)!important;
}
.topbar,
.site-header,
.top-nav,
.navbar,
.app-header,
.he-game-topbar,
.ds-dashboard .ds-topnav{
  background:var(--bg-header)!important;
  border-bottom:1px solid rgba(80,90,140,.12)!important;
  box-shadow:0 3px 16px rgba(6,16,40,.06)!important;
}
.page,
.home-page,
#levelPage,
.profile-page,
.study-page,
.dragon-studio-page{
  background:transparent!important;
}
.page::before,
.home-page::before,
#levelPage::before,
.profile-page::before,
.study-page::before,
.dragon-studio-page::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:-1!important;
  pointer-events:none!important;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.24) 1px,transparent 1.5px),
    radial-gradient(circle,rgba(146,161,255,.20) 1px,transparent 1.5px);
  background-size:110px 110px,170px 170px!important;
  background-position:14px 22px,78px 68px!important;
  opacity:.18!important;
}
.decor{
  opacity:.24!important;
}
.dots{
  background-image:radial-gradient(rgba(190,202,255,.36) 1.5px,transparent 1.5px)!important;
}
.circle-left{
  background:rgba(78,125,255,.09)!important;
}
.circle-right{
  border-color:rgba(145,153,255,.12)!important;
  background:transparent!important;
}
.home-page>.hero h1,
#homePage .hero h1,
#levelPage>.hero h1,
.study-page .mode-tabs + .free-banner,
.profile-page .profile-dash-hero h1,
.profile-page .profile-dash-hero p,
.buy-egg-header h1,
.dragon-collection-header h1,
.badges-header h1,
.he-games-hero-block h1,
.he-title{
  color:#ffffff!important;
}
.home-page>.hero p,
#homePage .hero p,
#levelPage>.hero p,
.he-games-hero-block p,
.he-subtitle,
.buy-egg-header p,
.dragon-collection-header p,
.badges-header p{
  color:rgba(236,241,255,.86)!important;
}
.home-page>.hero .info-pill,
#levelPage>.hero .info-pill,
.free-banner,
.he-game-wallet,
.he-stat-pill{
  background:rgba(255,255,255,.92)!important;
  border:1px solid rgba(180,190,255,.18)!important;
  box-shadow:0 10px 28px rgba(6,16,40,.12)!important;
}
.panel,
.exam-card,
.product-card,
.feature-strip,
.premium-feature-row,
.level-card,
.full-access-unlocks,
.plan-summary-card,
.profile-hero,
.profile-grid>.panel,
.profile-dash-card,
.profile-approved-card,
.learning-snapshot-card,
.readiness-card,
.quick-links-card,
.plan-actions-card,
.community-card,
.account-settings,
.family-panel,
.metric,
.badge,
.share-row button,
.family-list div,
.family-list button,
.modal,
.modal-content,
.summary-card,
.study-promo-card,
.sidebar-action-card,
.main-study-card,
.progress-panel,
.review-panel,
.badge-mini,
.mini-test,
.he-card,
.he-panel,
.hatchelite-game-card,
.he-featured-game-card,
.he-daily-reward-card,
.game-completion-modal,
.ds-dashboard .ds-card,
.ds-dashboard .ds-summary-row article,
.ds-dashboard .ds-summary-row button,
.ds-dashboard .ds-gallery-tile,
.ds-dashboard .ds-feed-item,
.ds-dashboard .meta-pill{
  background:var(--bg-card)!important;
  border-color:var(--surface-border)!important;
  box-shadow:var(--surface-shadow)!important;
}
.mascot-wrap,
.feature-icon-circle,
.progress-item i,
.quick-action-icon,
.level-card .level-icon{
  background:linear-gradient(180deg,#f6f8ff,#f0edff)!important;
}
.dragon-studio-v2,
.dragon-studio-v2.ds-dashboard,
.he-game-route,
.he-games-select-page,
body.game-route-mode .study-page{
  background:transparent!important;
}
.he-game-route:before,
.he-games-select-page:before{
  background-image:
    radial-gradient(circle,rgba(255,255,255,.25) 1px,transparent 1.5px),
    url("assets/assets_webp/game/effects/11_background_star_pattern.webp")!important;
  background-size:130px 130px,560px auto!important;
  opacity:.12!important;
}
.he-games-select-page,
.he-game-route{
  color:var(--navy)!important;
}
.he-games-select-page .he-games-hero-block h1,
.he-game-route .he-title{
  color:#ffffff!important;
  text-shadow:0 8px 28px rgba(0,0,0,.18)!important;
}
.he-games-select-page .he-games-hero-block p,
.he-game-route .he-subtitle{
  color:rgba(236,241,255,.88)!important;
}
.ds-dashboard .ds-summary-row,
.ds-dashboard .ds-dashboard-grid{
  position:relative!important;
  z-index:1!important;
}
.ds-dashboard .ds-card h2,
.ds-dashboard .ds-card h3,
.ds-dashboard .ds-card b,
.ds-dashboard .ds-summary-row strong,
.ds-dashboard .ds-summary-row b{
  color:var(--navy)!important;
}
.footer{
  color:rgba(236,241,255,.72)!important;
  background:transparent!important;
}
.footer button{
  color:#c8c3ff!important;
}

/* Dragon Studio approved dark fantasy treatment. */
body.dragon-studio-mode,
body.dragon-studio-mode #app,
body.dragon-studio-mode main{
  background:
    radial-gradient(circle at 18% 12%,rgba(101,84,255,.20),transparent 28%),
    radial-gradient(circle at 82% 14%,rgba(78,125,255,.14),transparent 30%),
    radial-gradient(circle at 50% 92%,rgba(35,63,135,.22),transparent 34%),
    linear-gradient(180deg,#06142c 0%,#081a36 44%,#071225 100%)!important;
  background-attachment:fixed!important;
}
body.dragon-studio-mode .topbar,
body.dragon-studio-mode .topbar.app-header,
body.dragon-studio-mode .ds-dashboard .ds-topnav{
  background:#ffffff!important;
  border-bottom:1px solid rgba(80,90,140,.12)!important;
  box-shadow:0 3px 16px rgba(6,16,40,.08)!important;
}
body.dragon-studio-mode .page.profile-page.dragon-studio-page{
  max-width:none!important;
  width:100%!important;
  padding:0!important;
  background:transparent!important;
}
body.dragon-studio-mode .dragon-studio-v2.ds-dashboard{
  min-height:100vh!important;
  padding:16px 24px 28px!important;
  color:#edf2ff!important;
  background:
    radial-gradient(circle at 8% 18%,rgba(101,84,255,.16),transparent 24%),
    radial-gradient(circle at 92% 28%,rgba(78,125,255,.12),transparent 28%),
    linear-gradient(180deg,#07152f 0%,#0a1c3d 46%,#061326 100%)!important;
}
body.dragon-studio-mode .dragon-studio-v2.ds-dashboard::before{
  content:""!important;
  position:absolute!important;
  inset:74px 0 0!important;
  z-index:0!important;
  pointer-events:none!important;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.26) 1px,transparent 1.4px),
    radial-gradient(circle,rgba(145,160,255,.18) 1px,transparent 1.5px)!important;
  background-size:118px 118px,184px 184px!important;
  background-position:26px 18px,92px 70px!important;
  opacity:.18!important;
}
body.dragon-studio-mode .ds-dashboard .ds-summary-row,
body.dragon-studio-mode .ds-dashboard .ds-dashboard-grid{
  position:relative!important;
  z-index:1!important;
}
body.dragon-studio-mode .ds-dashboard .ds-summary-row article,
body.dragon-studio-mode .ds-dashboard .ds-summary-row button,
body.dragon-studio-mode .ds-dashboard .ds-card{
  background:linear-gradient(180deg,rgba(17,31,64,.94),rgba(10,23,49,.94))!important;
  border:1px solid rgba(137,158,220,.22)!important;
  box-shadow:0 16px 36px rgba(0,0,0,.22)!important;
  color:#f4f7ff!important;
}
body.dragon-studio-mode .ds-dashboard .ds-card h2,
body.dragon-studio-mode .ds-dashboard .ds-card h3,
body.dragon-studio-mode .ds-dashboard .ds-card b,
body.dragon-studio-mode .ds-dashboard .ds-summary-row strong,
body.dragon-studio-mode .ds-dashboard .ds-summary-row b{
  color:#f7f9ff!important;
}
body.dragon-studio-mode .ds-dashboard .ds-card p,
body.dragon-studio-mode .ds-dashboard .ds-card small,
body.dragon-studio-mode .ds-dashboard .ds-card span,
body.dragon-studio-mode .ds-dashboard .ds-summary-row span,
body.dragon-studio-mode .ds-dashboard .ds-summary-row i{
  color:rgba(230,238,255,.80)!important;
}
body.dragon-studio-mode .ds-dashboard .my-dragon-card{
  background:#101b38 url("assets/my-dragon-studio-batch/optimized-my-dragon-studio-webp/my-dragon-card/bg_my_dragon_icy_ruins.webp") center/cover no-repeat!important;
  border-color:rgba(180,195,255,.30)!important;
}
body.dragon-studio-mode .ds-dashboard .my-dragon-card::before,
body.dragon-studio-mode .ds-dashboard .my-dragon-card::after{
  opacity:.34!important;
}
body.dragon-studio-mode .ds-dashboard .my-dragon-card h2,
body.dragon-studio-mode .ds-dashboard .my-dragon-name{
  color:#f4f0ff!important;
  text-shadow:0 2px 12px rgba(0,0,0,.38)!important;
}
body.dragon-studio-mode .ds-dashboard .my-dragon-art-frame{
  background:rgba(245,248,255,.90)!important;
  border-color:rgba(196,209,255,.55)!important;
  box-shadow:0 16px 34px rgba(0,0,0,.18)!important;
}
body.dragon-studio-mode .ds-dashboard .my-dragon-meta-bar,
body.dragon-studio-mode .ds-dashboard .meta-pill{
  background:rgba(8,18,46,.76)!important;
  border-color:rgba(160,180,255,.24)!important;
  color:#f7f9ff!important;
}
body.dragon-studio-mode .ds-dashboard .meta-pill b,
body.dragon-studio-mode .ds-dashboard .meta-pill span,
body.dragon-studio-mode .ds-dashboard .meta-pill .mood-label{
  color:#f7f9ff!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch{
  background:
    linear-gradient(180deg,rgba(4,10,35,.08),rgba(4,10,35,.20)),
    url("assets/my-dragon-studio-batch/optimized-my-dragon-studio-webp/hatching/hatching_background.webp") center/cover no-repeat!important;
  border-color:rgba(180,195,255,.30)!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch-title strong{
  background:rgba(23,34,72,.78)!important;
  border:1px solid rgba(196,209,255,.22)!important;
  color:#ffffff!important;
  box-shadow:0 10px 22px rgba(0,0,0,.20)!important;
}
body.dragon-studio-mode .ds-dashboard .ds-day span,
body.dragon-studio-mode .ds-dashboard .ds-check{
  background:rgba(8,18,46,.58)!important;
  border-color:rgba(196,209,255,.42)!important;
  color:#ffffff!important;
}
body.dragon-studio-mode .ds-dashboard .ds-task-row{
  border-top:1px solid rgba(137,158,220,.18)!important;
  color:#f3f6ff!important;
}
body.dragon-studio-mode .ds-dashboard .ds-gallery-tile,
body.dragon-studio-mode .ds-dashboard .ds-badges>div button,
body.dragon-studio-mode .ds-dashboard .ds-feed-item{
  background:rgba(12,25,55,.72)!important;
  border:1px solid rgba(137,158,220,.24)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}
body.dragon-studio-mode .ds-dashboard .ds-gallery-tile b,
body.dragon-studio-mode .ds-dashboard .ds-feed-item b{
  color:#f7f9ff!important;
}
body.dragon-studio-mode .ds-dashboard .ds-family .ds-gallery-tile,
body.dragon-studio-mode .ds-dashboard .ds-hatchery .ds-gallery-tile{
  gap:5px!important;
  padding:9px 7px!important;
}
body.dragon-studio-mode .ds-dashboard .ds-family .ds-gallery-tile b,
body.dragon-studio-mode .ds-dashboard .ds-hatchery .ds-gallery-tile b{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-height:0!important;
  height:auto!important;
  padding:0!important;
  border-radius:0!important;
  background:transparent!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  letter-spacing:0!important;
  line-height:1.05!important;
}
body.dragon-studio-mode .ds-dashboard .ds-family .ds-gallery-tile b{
  font-size:clamp(9px,.62vw,11px)!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatchery .ds-gallery-tile b{
  font-size:clamp(10px,.70vw,11px)!important;
}
body.dragon-studio-mode .ds-dashboard .ds-family>button,
body.dragon-studio-mode .ds-dashboard .ds-hatchery>button,
body.dragon-studio-mode .ds-dashboard .ds-badges>button{
  background:rgba(24,38,78,.74)!important;
  border:1px solid rgba(137,158,220,.18)!important;
  color:#aa94ff!important;
  box-shadow:none!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch>button,
body.dragon-studio-mode .ds-dashboard .ds-task-row button,
body.dragon-studio-mode .ds-dashboard .ds-share button{
  background:linear-gradient(180deg,#8065ff,#5636da)!important;
  border:0!important;
  color:#ffffff!important;
  box-shadow:0 12px 24px rgba(56,39,160,.28)!important;
}
body.dragon-studio-mode .ds-dashboard .ds-tasks footer,
body.dragon-studio-mode .ds-dashboard .ds-feed footer{
  background:rgba(35,46,88,.72)!important;
  color:rgba(230,238,255,.78)!important;
}
body.dragon-studio-mode .ds-dashboard .ds-share>img{
  background:rgba(255,255,255,.08)!important;
  border-color:rgba(137,158,220,.20)!important;
}
@media(max-width:760px){
  body.dragon-studio-mode .dragon-studio-v2.ds-dashboard{
    padding:14px!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-family .ds-gallery-tile b{
    font-size:9px!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-hatchery .ds-gallery-tile b{
    font-size:10px!important;
  }
}

/* Study page night-focus refresh. */
body:not(.dragon-studio-mode) .study-page{
  width:100%!important;
  max-width:none!important;
  min-height:calc(100vh - 76px)!important;
  padding:28px 32px 44px!important;
  background:
    linear-gradient(180deg,rgba(3,10,30,.08),rgba(3,10,30,.18)),
    url("assets/assets_webp/backgrounds/bg_main_navy_glow.webp") center top/cover no-repeat!important;
  color:#f4f7ff!important;
}
body:not(.dragon-studio-mode) .study-page::before{
  opacity:.08!important;
}
body:not(.dragon-studio-mode) .topbar,
body:not(.dragon-studio-mode) .topbar.app-header{
  background:#ffffff!important;
  border-bottom:1px solid rgba(80,90,140,.12)!important;
  box-shadow:0 3px 16px rgba(6,16,40,.08)!important;
}
.study-page .mode-tabs,
.study-page .free-banner,
.study-page .study-layout{
  max-width:1560px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.study-page .mode-tabs{
  gap:18px!important;
  margin-bottom:20px!important;
}
.study-page .mode-tabs button{
  min-height:62px!important;
  padding:0 36px!important;
  border:1px solid rgba(205,212,246,.90)!important;
  border-radius:18px!important;
  background:#ffffff!important;
  color:#11133f!important;
  box-shadow:0 12px 26px rgba(3,10,30,.18)!important;
  font-weight:900!important;
}
.study-page .mode-tabs .mode-tab{
  height:62px!important;
  min-height:62px!important;
  padding:0 36px!important;
  border:1px solid rgba(205,212,246,.90)!important;
  border-radius:18px!important;
  background:#ffffff!important;
  color:#11133f!important;
  box-shadow:0 12px 26px rgba(3,10,30,.18)!important;
  font-weight:900!important;
}
.study-page .mode-tabs button.active{
  border-color:rgba(205,190,255,.95)!important;
  background:linear-gradient(180deg,#7e62ff 0%,#5337df 100%)!important;
  color:#ffffff!important;
  box-shadow:0 0 0 2px rgba(188,172,255,.48),0 16px 34px rgba(78,55,214,.34)!important;
}
.study-page .mode-tabs .mode-tab.active{
  border-color:rgba(205,190,255,.95)!important;
  background:linear-gradient(180deg,#7e62ff 0%,#5337df 100%)!important;
  color:#ffffff!important;
  box-shadow:0 0 0 2px rgba(188,172,255,.48),0 16px 34px rgba(78,55,214,.34)!important;
}
.study-page .free-banner{
  width:min(720px,calc(100% - 32px))!important;
  max-width:720px!important;
  margin-bottom:22px!important;
  padding:9px 14px 9px 22px!important;
  border:1px solid rgba(190,199,244,.32)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.92)!important;
  color:#171a4a!important;
  box-shadow:0 14px 34px rgba(3,10,30,.24)!important;
}
.study-page .mode-tabs + .free-banner,
.study-page .free-banner span{
  color:#171a4a!important;
}
.study-page .free-banner button{
  min-height:38px!important;
  padding:0 24px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#765df6,#563fdc)!important;
  color:#ffffff!important;
  box-shadow:0 10px 20px rgba(86,63,220,.24)!important;
}
.study-page .study-layout{
  grid-template-columns:300px minmax(760px,1fr) 340px!important;
}
.study-page .main-study-card{
  background:#ffffff!important;
  border:1px solid rgba(205,212,246,.72)!important;
  box-shadow:0 22px 60px rgba(0,0,0,.24)!important;
  color:#11133f!important;
}
.study-page .main-study-card h2,
.study-page .main-study-card b,
.study-page .main-study-card strong{
  color:#07133f!important;
}
.study-page .main-study-card .card-top,
.study-page .main-study-card .ipa,
.study-page .main-study-card p,
.study-page .main-study-card span{
  color:#59607d!important;
}
.study-page .progress-panel,
.study-page .review-panel,
.study-page .shuffle-deck-card,
.study-page .study-range-card-button,
.study-page #studyRangeButton,
.study-page .right-col .study-promo-card,
.study-page .right-col>.badge-mini{
  background:linear-gradient(180deg,rgba(16,31,66,.92),rgba(8,21,49,.94))!important;
  border:1px solid rgba(137,158,220,.28)!important;
  box-shadow:0 18px 38px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.05)!important;
  color:#f7f9ff!important;
}
.study-page .progress-panel h3,
.study-page .review-panel h3,
.study-page .shuffle-deck-card b,
.study-page .right-col .study-promo-copy h3,
.study-page .right-col>.badge-mini h3,
.study-page .study-setting-title{
  color:#f7f9ff!important;
}
.study-page .progress-panel h3{
  color:#ffe9a7!important;
}
.study-page .progress-item{
  border-bottom-color:rgba(137,158,220,.22)!important;
}
.study-page .progress-item i,
.study-page .quick-action-icon{
  background:linear-gradient(180deg,rgba(113,92,255,.28),rgba(57,73,151,.26))!important;
  border:1px solid rgba(164,181,255,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.study-page .progress-item span,
.study-page .progress-item small,
.study-page .review-panel p,
.study-page .study-promo-copy p,
.study-page .study-setting-subtitle,
.study-page #studyRangeButton small{
  color:rgba(237,242,255,.82)!important;
}
.study-page .progress-item b,
.study-page .progress-item #levelTextSmall,
.study-page .review-panel .weak-row,
.study-page .review-panel .weak-row span,
.study-page .shuffle-deck-card span,
.study-page #studyRangeButton b{
  color:#ffffff!important;
}
.study-page .link-btn,
.study-page .review-panel .link-center{
  color:#a993ff!important;
}
.study-page .weak-row{
  border-bottom-color:rgba(137,158,220,.18)!important;
}
.study-page .range-chevron,
.study-page #studyRangeButton .range-chevron{
  color:#ffffff!important;
}
.study-page .game-zone-card,
.study-page .dragon-studio-card{
  background:linear-gradient(180deg,rgba(16,31,66,.92),rgba(8,21,49,.94))!important;
}
.study-page .game-zone-card .study-promo-copy button,
.study-page .dragon-studio-card .study-promo-copy button,
.study-page .right-col>.badge-mini .badge-view-all-btn{
  background:linear-gradient(180deg,#8065ff,#5636da)!important;
  color:#ffffff!important;
  border:0!important;
  box-shadow:0 10px 20px rgba(56,39,160,.28)!important;
}
.study-page .right-col .mini-badge small{
  color:#f7f9ff!important;
}
.study-page .flash-switch{
  background:#ffffff!important;
}
.study-page .flash-switch button{
  color:#282c57!important;
}
.study-page .flash-switch button.active,
.study-page .reveal-box button,
.study-page .action-row .next,
.study-page .action-row button:last-child{
  background:linear-gradient(180deg,#765df6,#563fdc)!important;
  color:#ffffff!important;
}
@media(max-width:1220px){
  body:not(.dragon-studio-mode) .study-page{
    padding:24px 18px 40px!important;
  }
  .study-page .study-layout{
    grid-template-columns:1fr!important;
  }
}
@media(max-width:768px){
  body:not(.dragon-studio-mode) .study-page{
    padding:18px 14px 32px!important;
  }
  .study-page .mode-tabs{
    justify-content:flex-start!important;
    gap:12px!important;
  }
  .study-page .mode-tabs button{
    min-height:48px!important;
    padding:0 20px!important;
    border-radius:15px!important;
  }
  .study-page .free-banner{
    width:100%!important;
    flex-wrap:wrap!important;
    border-radius:22px!important;
  }
}

/* Study page spacing pass for the latest mockup. */
body:not(.dragon-studio-mode) .study-page{
  padding:24px 24px 42px 34px!important;
}
.study-page .mode-tabs,
.study-page .free-banner{
  max-width:1320px!important;
}
.study-page .study-layout{
  width:min(1404px,100%)!important;
  max-width:1404px!important;
  grid-template-columns:260px minmax(730px,1fr) 340px!important;
  gap:22px!important;
  margin-left:clamp(18px,3vw,48px)!important;
  margin-right:auto!important;
}
.study-page .side-col{
  max-width:260px!important;
}
.study-page .mode-tabs{
  gap:14px!important;
  margin-top:0!important;
  margin-bottom:10px!important;
  padding:4px 8px 2px!important;
}
.study-page .mode-tabs button,
.study-page .mode-tabs .mode-tab{
  height:48px!important;
  min-height:48px!important;
  padding:0 28px!important;
  border-radius:13px!important;
  border:1px solid rgba(213,218,246,.88)!important;
  box-shadow:0 9px 20px rgba(3,10,30,.15)!important;
  font-size:15px!important;
}
.study-page .mode-tabs button.active,
.study-page .mode-tabs .mode-tab.active{
  box-shadow:0 0 0 1px rgba(188,172,255,.46),0 12px 24px rgba(78,55,214,.30)!important;
}
.study-page .mode-tabs .mode-tab-icon{
  width:17px!important;
  height:17px!important;
  min-width:17px!important;
}
.study-page .mode-tabs .mode-tab-icon img,
.study-page .mode-tab-lock img,
.study-page .mode-tab-sparkle img{
  width:17px!important;
  height:17px!important;
}
.study-page .free-banner{
  width:min(640px,calc(100% - 32px))!important;
  min-height:36px!important;
  margin-bottom:14px!important;
  padding:4px 10px 4px 18px!important;
  gap:14px!important;
  font-size:14px!important;
  box-shadow:0 12px 26px rgba(3,10,30,.22)!important;
}
.study-page .free-banner button{
  min-height:30px!important;
  height:30px!important;
  padding:0 20px!important;
  font-size:14px!important;
}
.study-page .progress-panel{
  min-height:300px!important;
  padding:18px 20px!important;
}
.study-page .review-panel{
  min-height:142px!important;
  padding:18px 20px!important;
}
.study-page .shuffle-deck-card{
  min-height:78px!important;
  padding:16px 18px!important;
}
@media(max-width:1500px){
  .study-page .study-layout{
    width:min(1360px,100%)!important;
    grid-template-columns:260px minmax(700px,1fr) 315px!important;
    gap:20px!important;
    margin-left:clamp(8px,1.4vw,20px)!important;
  }
  .study-page .right-col{
    max-width:315px!important;
  }
}
@media(max-width:1320px){
  .study-page .study-layout{
    grid-template-columns:250px minmax(600px,1fr) 312px!important;
    gap:18px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .study-page .side-col{
    max-width:250px!important;
  }
}
@media(max-width:1220px){
  .study-page .study-layout{
    width:100%!important;
    max-width:820px!important;
    grid-template-columns:1fr!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .study-page .side-col,
  .study-page .right-col{
    max-width:none!important;
  }
}
@media(max-width:768px){
  body:not(.dragon-studio-mode) .study-page{
    padding:16px 14px 30px!important;
  }
  .study-page .mode-tabs button,
  .study-page .mode-tabs .mode-tab{
    height:44px!important;
    min-height:44px!important;
    padding:0 18px!important;
  }
  .study-page .free-banner{
    min-height:0!important;
    font-size:13px!important;
  }
}

/* Compact Synonym, Analogy, and Sentence Completion activity cards. */
.study-page .main-study-card:has(.synonym-word),
.study-page .main-study-card:has(.analogy-title),
.study-page .main-study-card:has(.sentence-prompt){
  min-height:480px!important;
  padding:18px 32px 20px!important;
  justify-content:flex-start!important;
}
.study-page .main-study-card:has(.synonym-word) .practice-card-header,
.study-page .main-study-card:has(.analogy-title) .practice-card-header,
.study-page .main-study-card:has(.sentence-prompt) .practice-card-header{
  margin-bottom:8px!important;
}
.study-page .main-study-card:has(.synonym-word) .question-title,
.study-page .main-study-card:has(.analogy-title) .question-title,
.study-page .main-study-card:has(.sentence-prompt) .question-title{
  margin:0!important;
}
.study-page .main-study-card:has(.synonym-word) .compact-question .synonym-word{
  padding:8px 0 12px!important;
}
.study-page .main-study-card:has(.synonym-word) .compact-question .synonym-word h2{
  font-size:48px!important;
  line-height:1.02!important;
  margin:0!important;
}
.study-page .main-study-card:has(.analogy-title) .analogy-title h2{
  font-size:34px!important;
  line-height:1.15!important;
  margin:4px 0 14px!important;
}
.study-page .main-study-card:has(.sentence-prompt) .question-title h2{
  font-size:30px!important;
  line-height:1.15!important;
  margin:4px 0 10px!important;
}
.study-page .main-study-card:has(.sentence-prompt) .sentence-prompt{
  max-width:700px!important;
  margin:0 auto 14px!important;
  font-size:18px!important;
  line-height:1.42!important;
}
.study-page .main-study-card:has(.synonym-word) .choices,
.study-page .main-study-card:has(.analogy-title) .choices,
.study-page .main-study-card:has(.sentence-prompt) .choices{
  display:grid!important;
  gap:8px!important;
  width:min(100%,650px)!important;
  max-width:650px!important;
  margin:0 auto!important;
}
.study-page .main-study-card:has(.synonym-word) .choices button,
.study-page .main-study-card:has(.analogy-title) .choices button,
.study-page .main-study-card:has(.sentence-prompt) .choices button{
  min-height:42px!important;
  padding:8px 16px!important;
  margin:0!important;
  border-radius:14px!important;
  font-size:15px!important;
  font-weight:400!important;
  line-height:1.2!important;
  gap:12px!important;
  text-align:left!important;
}
.study-page .main-study-card:has(.synonym-word) .choices button:not(.correct):not(.wrong),
.study-page .main-study-card:has(.analogy-title) .choices button:not(.correct):not(.wrong),
.study-page .main-study-card:has(.sentence-prompt) .choices button:not(.correct):not(.wrong){
  color:#182044!important;
}
.study-page .main-study-card:has(.synonym-word) .choice-letter,
.study-page .main-study-card:has(.analogy-title) .choice-letter,
.study-page .main-study-card:has(.sentence-prompt) .choice-letter{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  font-size:14px!important;
  font-weight:700!important;
}
.study-page .main-study-card:has(.synonym-word) .reveal-box,
.study-page .main-study-card:has(.analogy-title) .reveal-box,
.study-page .main-study-card:has(.sentence-prompt) .reveal-box{
  max-width:560px!important;
  margin:10px auto 0!important;
  padding:10px 16px!important;
  border-radius:14px!important;
  font-size:14px!important;
  line-height:1.28!important;
}
.study-page .main-study-card:has(.synonym-word) .reveal-box button,
.study-page .main-study-card:has(.analogy-title) .reveal-box button,
.study-page .main-study-card:has(.sentence-prompt) .reveal-box button{
  min-height:34px!important;
  margin-top:8px!important;
  padding:0 24px!important;
  border-radius:10px!important;
  font-size:14px!important;
}
.study-page .main-study-card:has(.synonym-word) .answer-panel,
.study-page .main-study-card:has(.analogy-title) .answer-panel,
.study-page .main-study-card:has(.sentence-prompt) .answer-panel{
  max-width:620px!important;
  margin:14px auto 0!important;
  padding:14px 16px!important;
  font-size:14px!important;
  line-height:1.35!important;
}
.study-page .question-top-counter{
  visibility:hidden!important;
}
.study-page .practice-bottom-nav{
  display:grid!important;
  grid-template-columns:64px auto 64px!important;
  align-items:center!important;
  justify-content:center!important;
  gap:28px!important;
  margin:8px auto 0!important;
  padding:0!important;
  font-weight:950!important;
  color:var(--navy)!important;
}
.study-page .practice-nav-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:52px!important;
  height:44px!important;
  border-radius:999px!important;
  border:1px solid var(--border)!important;
  background:#fff!important;
  color:var(--purple)!important;
  font-size:24px!important;
  font-weight:900!important;
  line-height:1!important;
  box-shadow:none!important;
  cursor:pointer!important;
}
.study-page .practice-nav-btn:not(:disabled):hover{
  background:#f5f2ff!important;
  transform:none!important;
}
.study-page .practice-nav-btn:disabled{
  opacity:.45!important;
  cursor:not-allowed!important;
  transform:none!important;
  box-shadow:none!important;
}
.study-page .practice-progress-count{
  min-width:0!important;
  text-align:center!important;
  font-size:inherit!important;
  font-weight:950!important;
  color:var(--navy)!important;
  line-height:normal!important;
}
@media(max-width:768px){
  .study-page .main-study-card:has(.synonym-word),
  .study-page .main-study-card:has(.analogy-title),
  .study-page .main-study-card:has(.sentence-prompt){
    min-height:auto!important;
    padding:18px 14px 20px!important;
  }
  .study-page .main-study-card:has(.synonym-word) .compact-question .synonym-word h2{
    font-size:38px!important;
  }
  .study-page .main-study-card:has(.analogy-title) .analogy-title h2{
    font-size:26px!important;
  }
  .study-page .main-study-card:has(.sentence-prompt) .question-title h2{
    font-size:24px!important;
  }
  .study-page .main-study-card:has(.sentence-prompt) .sentence-prompt{
    font-size:16px!important;
  }
  .study-page .practice-bottom-nav{
    gap:14px!important;
  }
  .study-page .practice-nav-btn{
    width:52px!important;
    height:44px!important;
    font-size:24px!important;
  }
  .study-page .practice-progress-count{
    min-width:0!important;
    font-size:inherit!important;
  }
}

/* Premium Study Setting modal refresh. */
#setMenu.study-setting-overlay,
#setMenu.set-menu.study-setting-overlay{
  background:rgba(3,7,22,.66)!important;
  backdrop-filter:blur(8px) saturate(1.18)!important;
  -webkit-backdrop-filter:blur(8px) saturate(1.18)!important;
  padding:28px!important;
}
#setMenu .study-setting-modal,
#setMenu .range-popover-panel{
  width:min(860px,calc(100vw - 56px))!important;
  max-height:calc(100vh - 56px)!important;
  grid-template-rows:auto auto auto minmax(0,1fr) auto!important;
  gap:18px!important;
  padding:28px!important;
  border-radius:32px!important;
  border:1px solid rgba(142,164,235,.34)!important;
  background:
    radial-gradient(circle at 8% 8%,rgba(126,98,255,.30),transparent 24%),
    radial-gradient(circle at 86% 12%,rgba(78,125,255,.12),transparent 28%),
    linear-gradient(180deg,rgba(11,24,58,.98),rgba(5,14,36,.98))!important;
  box-shadow:0 34px 100px rgba(0,0,0,.54),inset 0 1px 0 rgba(255,255,255,.08)!important;
  color:#f7f9ff!important;
}
#setMenu .study-setting-modal::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.28) 1px,transparent 1.5px),
    radial-gradient(circle,rgba(165,181,255,.18) 1px,transparent 1.5px)!important;
  background-size:116px 116px,172px 172px!important;
  background-position:34px 28px,86px 70px!important;
  opacity:.20!important;
}
#setMenu .range-popover-header,
#setMenu .range-type-buttons,
#setMenu .range-current-card,
#setMenu .range-jump-section,
#setMenu .range-actions{
  position:relative!important;
  z-index:1!important;
  margin-left:0!important;
  margin-right:0!important;
}
#setMenu .range-popover-header{
  display:grid!important;
  grid-template-columns:1fr auto!important;
  align-items:start!important;
  gap:18px!important;
  padding:0!important;
}
#setMenu .range-popover-header::before{
  content:""!important;
  display:grid!important;
  place-items:center!important;
  grid-row:1 / span 2!important;
  width:64px!important;
  height:64px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(126,98,255,.30),rgba(63,77,166,.34))!important;
  border:1px solid rgba(168,184,255,.25)!important;
  color:#ffffff!important;
  font-size:30px!important;
  box-shadow:0 16px 34px rgba(80,60,210,.24)!important;
}
#setMenu .range-popover-header>div{
  grid-column:1!important;
  padding-left:86px!important;
  min-height:64px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}
#setMenu .range-popover-header h3{
  margin:0 0 8px!important;
  color:#ffffff!important;
  font-size:32px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:0!important;
}
#setMenu .range-popover-header p{
  margin:0!important;
  color:rgba(235,239,255,.82)!important;
  font-size:16px!important;
  line-height:1.35!important;
  font-weight:500!important;
}
#setMenu .range-close{
  width:50px!important;
  height:50px!important;
  min-height:50px!important;
  border-radius:999px!important;
  border:1px solid rgba(177,190,255,.28)!important;
  background:rgba(255,255,255,.08)!important;
  color:#ffffff!important;
  font-size:30px!important;
  line-height:1!important;
  font-weight:400!important;
  cursor:pointer!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
#setMenu .range-close:hover,
#setMenu .range-close:focus-visible{
  background:rgba(126,98,255,.26)!important;
  outline:none!important;
}
#setMenu .range-type-buttons{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
}
#setMenu .range-type-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  min-height:52px!important;
  padding:0 16px!important;
  border-radius:14px!important;
  border:1px solid rgba(225,230,255,.90)!important;
  background:linear-gradient(180deg,#ffffff,#f4f6ff)!important;
  color:#182044!important;
  font-size:15px!important;
  font-weight:850!important;
  box-shadow:0 12px 24px rgba(0,0,0,.16)!important;
}
#setMenu .range-type-btn::before{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:20px!important;
  height:20px!important;
  color:inherit!important;
  font-size:17px!important;
  line-height:1!important;
}
#setMenu .range-type-btn:nth-child(1)::before{content:""!important}
#setMenu .range-type-btn:nth-child(2)::before{content:""!important}
#setMenu .range-type-btn:nth-child(3)::before{content:""!important}
#setMenu .range-type-btn:nth-child(4)::before{content:""!important}
#setMenu .range-type-btn.active{
  border-color:rgba(198,184,255,.86)!important;
  background:linear-gradient(180deg,#8d6cff,#5c3fe5)!important;
  color:#ffffff!important;
  box-shadow:0 0 0 1px rgba(207,196,255,.34),0 14px 30px rgba(82,58,220,.36)!important;
}
#setMenu .range-current-card{
  display:grid!important;
  grid-template-columns:88px minmax(0,1fr) auto!important;
  gap:8px 18px!important;
  align-items:center!important;
  padding:22px 24px!important;
  border-radius:22px!important;
  border:1px solid rgba(142,164,235,.28)!important;
  background:linear-gradient(180deg,rgba(31,38,94,.72),rgba(18,28,70,.74))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
}
#setMenu .range-current-card::before{
  content:""!important;
  grid-row:1 / span 3!important;
  display:grid!important;
  place-items:center!important;
  width:72px!important;
  height:72px!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,#8b6bff,#5437dc)!important;
  color:#ffe38a!important;
  font-size:34px!important;
  box-shadow:0 16px 34px rgba(76,54,210,.32)!important;
}
#setMenu .range-current-card>div{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:10px!important;
}
#setMenu .range-current-card b{
  color:#ffffff!important;
  font-size:24px!important;
  line-height:1.1!important;
  font-weight:950!important;
}
#setMenu .range-current-card span{
  display:inline-flex!important;
  align-items:center!important;
  min-height:28px!important;
  padding:0 12px!important;
  border-radius:999px!important;
  border:1px solid rgba(174,188,255,.28)!important;
  background:rgba(255,255,255,.06)!important;
  color:rgba(238,242,255,.82)!important;
  font-size:13px!important;
  font-weight:750!important;
}
#setMenu .range-current-card strong{
  grid-column:3!important;
  grid-row:1 / span 2!important;
  color:#aa8dff!important;
  font-size:28px!important;
  font-weight:950!important;
}
#setMenu .range-current-card small{
  grid-column:2!important;
  color:rgba(235,239,255,.82)!important;
  font-size:16px!important;
  font-weight:500!important;
}
#setMenu .range-current-card .set-progress-bar{
  grid-column:2 / 4!important;
  height:12px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(146,160,225,.25)!important;
  overflow:hidden!important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.30)!important;
}
#setMenu .range-current-card .set-progress-bar i{
  display:block!important;
  height:100%!important;
  border-radius:inherit!important;
  background:linear-gradient(90deg,#a98cff,#765df6,#4c7dff)!important;
  box-shadow:0 0 18px rgba(126,98,255,.55)!important;
}
#setMenu .range-jump-section{
  display:grid!important;
  gap:12px!important;
  min-height:0!important;
  overflow:hidden!important;
}
#setMenu .range-jump-section>b{
  color:#ffffff!important;
  font-size:18px!important;
  font-weight:950!important;
}
#setMenu .range-jump-list{
  display:grid!important;
  gap:0!important;
  max-height:min(330px,calc(100vh - 520px))!important;
  min-height:180px!important;
  overflow-y:auto!important;
  padding:0 8px 0 0!important;
  border:1px solid rgba(142,164,235,.24)!important;
  border-radius:20px!important;
  background:rgba(5,15,42,.62)!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(159,145,255,.72) rgba(255,255,255,.08)!important;
}
#setMenu .range-jump-list::-webkit-scrollbar{
  width:10px!important;
}
#setMenu .range-jump-list::-webkit-scrollbar-track{
  background:rgba(255,255,255,.06)!important;
  border-radius:999px!important;
}
#setMenu .range-jump-list::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#9e8cff,#6b55e8)!important;
  border-radius:999px!important;
}
#setMenu .set-menu .range-option,
#setMenu .range-option{
  display:grid!important;
  grid-template-columns:36px minmax(0,1fr) 42px!important;
  align-items:center!important;
  gap:14px!important;
  width:100%!important;
  min-height:66px!important;
  padding:12px 16px!important;
  border:0!important;
  border-bottom:1px solid rgba(142,164,235,.20)!important;
  border-radius:0!important;
  background:transparent!important;
  color:#eef3ff!important;
  box-shadow:none!important;
  font-size:17px!important;
  font-weight:500!important;
  text-align:left!important;
}
#setMenu .range-option:first-child{
  border-radius:18px 18px 0 0!important;
}
#setMenu .range-option:last-child{
  border-bottom:0!important;
  border-radius:0 0 18px 18px!important;
}
#setMenu .range-option:hover{
  background:rgba(126,98,255,.14)!important;
}
#setMenu .range-option i{
  display:grid!important;
  place-items:center!important;
  width:30px!important;
  height:30px!important;
  border:0!important;
  border-radius:999px!important;
  background:transparent!important;
  color:rgba(196,205,255,.52)!important;
  font-size:0!important;
}
#setMenu .range-option i::before{
  content:""!important;
  font-size:28px!important;
  line-height:1!important;
}
#setMenu .range-option span{
  color:inherit!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#setMenu .range-option.selected{
  background:linear-gradient(90deg,rgba(126,98,255,.44),rgba(126,98,255,.20))!important;
  color:#ffffff!important;
  box-shadow:inset 4px 0 0 #9d7cff!important;
}
#setMenu .range-option.selected i{
  color:#ffffff!important;
}
#setMenu .range-option.selected i::before{
  content:""!important;
}
#setMenu .range-option.selected::after{
  content:"\2713"!important;
  display:grid!important;
  place-items:center!important;
  width:34px!important;
  height:34px!important;
  border-radius:999px!important;
  justify-self:end!important;
  background:linear-gradient(180deg,#8b6bff,#563fdc)!important;
  color:#ffffff!important;
  font-size:20px!important;
  font-weight:900!important;
  box-shadow:0 10px 22px rgba(82,58,220,.34)!important;
}
#setMenu .range-empty-note{
  margin:0!important;
  padding:18px!important;
  border-radius:18px!important;
  border:1px solid rgba(142,164,235,.24)!important;
  background:rgba(255,255,255,.07)!important;
  color:rgba(235,239,255,.82)!important;
}
#setMenu .range-actions{
  display:flex!important;
  justify-content:space-between!important;
  gap:18px!important;
  padding:18px 0 0!important;
  margin-top:0!important;
  border-top:1px solid rgba(142,164,235,.18)!important;
  background:transparent!important;
}
#setMenu .range-actions button{
  min-width:190px!important;
  height:58px!important;
  min-height:58px!important;
  border-radius:18px!important;
  font-size:17px!important;
  font-weight:900!important;
}
#setMenu .range-cancel{
  border:1px solid rgba(174,188,255,.32)!important;
  background:rgba(255,255,255,.08)!important;
  color:#ffffff!important;
}
#setMenu .range-apply{
  border:0!important;
  background:linear-gradient(180deg,#8d6cff,#5c3fe5)!important;
  color:#ffffff!important;
  box-shadow:0 18px 36px rgba(82,58,220,.36)!important;
}
#setMenu .range-apply::after{
  content:""!important;
  color:rgba(255,255,255,.90)!important;
}
@media(max-width:900px){
  #setMenu .study-setting-modal,
  #setMenu .range-popover-panel{
    width:min(620px,calc(100vw - 32px))!important;
    padding:22px!important;
    border-radius:26px!important;
  }
  #setMenu .range-type-buttons{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #setMenu .range-current-card{
    grid-template-columns:64px minmax(0,1fr) auto!important;
    padding:18px!important;
  }
  #setMenu .range-current-card::before{
    width:54px!important;
    height:54px!important;
    border-radius:16px!important;
    font-size:26px!important;
  }
  #setMenu .range-current-card b{
    font-size:20px!important;
  }
  #setMenu .range-actions button{
    min-width:0!important;
    flex:1 1 0!important;
  }
}
@media(max-width:640px){
  #setMenu.study-setting-overlay,
  #setMenu.set-menu.study-setting-overlay{
    padding:14px!important;
  }
  #setMenu .study-setting-modal,
  #setMenu .range-popover-panel{
    width:calc(100vw - 28px)!important;
    max-height:calc(100vh - 28px)!important;
    padding:18px!important;
    gap:14px!important;
    border-radius:24px!important;
  }
  #setMenu .range-popover-header::before{
    width:50px!important;
    height:50px!important;
    font-size:24px!important;
  }
  #setMenu .range-popover-header>div{
    padding-left:64px!important;
    min-height:50px!important;
  }
  #setMenu .range-popover-header h3{
    font-size:25px!important;
  }
  #setMenu .range-popover-header p{
    font-size:13px!important;
  }
  #setMenu .range-close{
    width:42px!important;
    height:42px!important;
    min-height:42px!important;
    font-size:25px!important;
  }
  #setMenu .range-type-buttons{
    grid-template-columns:1fr!important;
  }
  #setMenu .range-type-btn{
    min-height:44px!important;
  }
  #setMenu .range-current-card{
    grid-template-columns:1fr auto!important;
  }
  #setMenu .range-current-card::before{
    display:none!important;
  }
  #setMenu .range-current-card small,
  #setMenu .range-current-card .set-progress-bar{
    grid-column:1 / 3!important;
  }
  #setMenu .range-jump-list{
    max-height:calc(100vh - 520px)!important;
    min-height:150px!important;
  }
  #setMenu .range-option{
    min-height:56px!important;
    grid-template-columns:30px minmax(0,1fr) 34px!important;
    font-size:14px!important;
    padding:10px 12px!important;
  }
  #setMenu .range-actions{
    gap:10px!important;
  }
  #setMenu .range-actions button{
    height:48px!important;
    min-height:48px!important;
    border-radius:15px!important;
    font-size:15px!important;
  }
}

/* Compact Study Setting modal pass. */
#setMenu .study-setting-modal,
#setMenu .range-popover-panel{
  width:min(920px,calc(100vw - 64px))!important;
  max-height:calc(100vh - 80px)!important;
  padding:28px 34px 26px!important;
  gap:14px!important;
  border-radius:30px!important;
  box-shadow:0 28px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
#setMenu .range-popover-header{
  grid-template-columns:54px minmax(0,1fr) 46px!important;
  align-items:center!important;
  gap:18px!important;
  min-height:58px!important;
}
#setMenu .range-popover-header::before{
  grid-column:1!important;
  grid-row:1!important;
  width:54px!important;
  height:54px!important;
  font-size:25px!important;
}
#setMenu .range-popover-header>div{
  grid-column:2!important;
  grid-row:1!important;
  min-height:54px!important;
  padding-left:0!important;
}
#setMenu .range-popover-header h3{
  margin-bottom:6px!important;
  font-size:34px!important;
}
#setMenu .range-popover-header p{
  font-size:16px!important;
}
#setMenu .range-close{
  grid-column:3!important;
  grid-row:1!important;
  width:46px!important;
  height:46px!important;
  min-height:46px!important;
  font-size:28px!important;
}
#setMenu .range-type-buttons{
  gap:12px!important;
}
#setMenu .range-type-btn{
  min-height:46px!important;
  height:46px!important;
  padding:0 14px!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(170,180,240,.22)!important;
  color:#f7f8ff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
  font-size:15px!important;
}
#setMenu .range-type-btn.active{
  background:linear-gradient(180deg,#8a73ff 0%,#5c4dff 100%)!important;
  color:#ffffff!important;
  box-shadow:0 10px 24px rgba(105,84,255,.32)!important;
}
#setMenu .range-current-card{
  min-height:112px!important;
  grid-template-columns:72px minmax(0,1fr) auto!important;
  padding:18px 22px!important;
  border-radius:22px!important;
}
#setMenu .range-current-card::before{
  width:58px!important;
  height:58px!important;
  border-radius:18px!important;
  font-size:30px!important;
}
#setMenu .range-current-card b{
  font-size:24px!important;
}
#setMenu .range-current-card span{
  min-height:26px!important;
  padding:0 11px!important;
  font-size:13px!important;
}
#setMenu .range-current-card small{
  font-size:16px!important;
}
#setMenu .range-current-card strong{
  font-size:28px!important;
}
#setMenu .range-current-card .set-progress-bar{
  height:10px!important;
}
#setMenu .range-jump-section{
  gap:10px!important;
}
#setMenu .range-jump-section>b{
  font-size:18px!important;
}
#setMenu .range-jump-list{
  max-height:186px!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:0 6px 0 0!important;
  border-radius:18px!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(165,145,255,.72) rgba(255,255,255,.08)!important;
}
#setMenu .range-jump-list::-webkit-scrollbar{
  display:block!important;
  width:8px!important;
}
#setMenu .range-jump-list::-webkit-scrollbar-track{
  background:rgba(255,255,255,.08)!important;
  border-radius:999px!important;
}
#setMenu .range-jump-list::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#8a73ff,#5b4dff)!important;
  border-radius:999px!important;
}
#setMenu .range-option{
  min-height:62px!important;
  height:62px!important;
  grid-template-columns:36px minmax(0,1fr) 42px!important;
  padding:0 22px!important;
  font-size:16px!important;
  font-weight:650!important;
}
#setMenu .range-option i{
  width:30px!important;
  height:30px!important;
}
#setMenu .range-option i::before{
  font-size:27px!important;
}
#setMenu .range-option.selected::after{
  width:36px!important;
  height:36px!important;
  font-size:20px!important;
}
#setMenu .range-actions{
  padding-top:16px!important;
  gap:16px!important;
}
#setMenu .range-actions button{
  height:50px!important;
  min-height:50px!important;
  min-width:184px!important;
  border-radius:17px!important;
  font-size:16px!important;
}
@media(max-width:900px){
  #setMenu .study-setting-modal,
  #setMenu .range-popover-panel{
    width:min(680px,calc(100vw - 32px))!important;
    padding:22px!important;
    gap:12px!important;
  }
  #setMenu .range-type-buttons{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #setMenu .range-current-card{
    grid-template-columns:58px minmax(0,1fr) auto!important;
  }
  #setMenu .range-current-card::before{
    width:48px!important;
    height:48px!important;
  }
}
@media(max-width:640px){
  #setMenu .study-setting-modal,
  #setMenu .range-popover-panel{
    width:calc(100vw - 28px)!important;
    max-height:calc(100vh - 28px)!important;
    padding:18px!important;
  }
  #setMenu .range-popover-header h3{
    font-size:25px!important;
  }
  #setMenu .range-popover-header>div{
    padding-left:60px!important;
  }
  #setMenu .range-type-buttons{
    grid-template-columns:1fr!important;
  }
  #setMenu .range-type-btn{
    height:42px!important;
    min-height:42px!important;
  }
  #setMenu .range-current-card{
    grid-template-columns:1fr auto!important;
    min-height:0!important;
    padding:16px!important;
  }
  #setMenu .range-current-card::before{
    display:none!important;
  }
  #setMenu .range-option{
    height:54px!important;
    min-height:54px!important;
    padding:0 12px!important;
    font-size:14px!important;
  }
  #setMenu .range-actions button{
    min-width:0!important;
    height:46px!important;
    min-height:46px!important;
  }
}

/* Dragon Studio Hatcher's Guide modal. */
#modalBackdrop.hatcher-guide-backdrop{
  background:rgba(5,10,28,.68)!important;
  backdrop-filter:blur(8px) saturate(1.16)!important;
  -webkit-backdrop-filter:blur(8px) saturate(1.16)!important;
}
.hatcher-guide-modal{
  width:min(1080px,calc(100vw - 56px))!important;
  max-height:calc(100vh - 64px)!important;
  overflow:auto!important;
  border-radius:32px!important;
  padding:26px 32px 26px!important;
  background:
    radial-gradient(circle at 12% 8%,rgba(120,92,255,.22),transparent 28%),
    radial-gradient(circle at 92% 12%,rgba(78,125,255,.10),transparent 30%),
    linear-gradient(180deg,rgba(10,22,52,.98),rgba(6,14,34,.98))!important;
  border:1px solid rgba(145,160,240,.28)!important;
  box-shadow:0 32px 70px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.08)!important;
  color:#f7f8ff!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(159,145,255,.70) rgba(255,255,255,.07)!important;
}
.hatcher-guide-modal::-webkit-scrollbar{width:10px!important}
.hatcher-guide-modal::-webkit-scrollbar-track{background:rgba(255,255,255,.06)!important;border-radius:999px!important}
.hatcher-guide-modal::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#9d8cff,#6851ee)!important;border-radius:999px!important}
.hatcher-guide-modal::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.26) 1px,transparent 1.5px),
    radial-gradient(circle,rgba(165,181,255,.15) 1px,transparent 1.5px)!important;
  background-size:120px 120px,180px 180px!important;
  background-position:34px 26px,92px 74px!important;
  opacity:.18!important;
}
.hatcher-guide-modal>*{
  position:relative!important;
  z-index:1!important;
}
.hatcher-guide-modal .hatcher-guide-close,
.hatcher-guide-modal>.modal-close{
  position:absolute!important;
  z-index:5!important;
  pointer-events:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  top:24px!important;
  right:24px!important;
  width:54px!important;
  height:54px!important;
  border-radius:999px!important;
  border:1px solid rgba(174,188,255,.28)!important;
  background:rgba(255,255,255,.07)!important;
  color:#fff!important;
  font-size:34px!important;
  font-weight:400!important;
  line-height:1!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.hatcher-guide-modal .hatcher-guide-close:hover,
.hatcher-guide-modal .hatcher-guide-close:focus-visible{
  background:rgba(126,98,255,.24)!important;
  outline:none!important;
}
.hatcher-guide-head{
  display:grid!important;
  grid-template-columns:68px minmax(0,1fr)!important;
  align-items:center!important;
  gap:18px!important;
  padding:0 76px 14px 0!important;
}
.hatcher-guide-icon{
  width:62px!important;
  height:62px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:999px!important;
  background:radial-gradient(circle at 50% 40%,rgba(150,128,255,.46),rgba(65,55,155,.28) 65%,rgba(255,255,255,.04))!important;
  border:1px solid rgba(164,181,255,.20)!important;
  box-shadow:0 18px 34px rgba(85,63,210,.28)!important;
}
.hatcher-guide-icon img{
  width:38px!important;
  height:38px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 0 12px rgba(159,145,255,.75))!important;
}
.hatcher-guide-head h2{
  margin:0 0 6px!important;
  color:#fff!important;
  font-size:clamp(30px,3vw,38px)!important;
  line-height:1.02!important;
  font-weight:1000!important;
  letter-spacing:0!important;
}
.hatcher-guide-head p{
  margin:0!important;
  color:#c9d1f4!important;
  font-size:16px!important;
  line-height:1.35!important;
  font-weight:550!important;
}
.hatcher-guide-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
}
.hatcher-guide-card{
  position:relative!important;
  min-height:178px!important;
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr) 150px!important;
  gap:12px!important;
  align-items:center!important;
  padding:16px!important;
  border-radius:22px!important;
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(150,165,245,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
  overflow:hidden!important;
}
.hatcher-guide-card::after{
  content:""!important;
  position:absolute!important;
  inset:auto -30px -45px auto!important;
  width:180px!important;
  height:120px!important;
  border-radius:999px!important;
  background:rgba(126,98,255,.11)!important;
  filter:blur(24px)!important;
  pointer-events:none!important;
}
.hatcher-guide-number{
  align-self:start!important;
  display:grid!important;
  place-items:center!important;
  width:34px!important;
  height:34px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#8a73ff,#5b4dff)!important;
  color:#fff!important;
  font-size:19px!important;
  font-weight:950!important;
  box-shadow:0 10px 20px rgba(88,70,230,.30)!important;
}
.hatcher-guide-copy{
  align-self:center!important;
}
.hatcher-guide-copy h3{
  margin:0 0 8px!important;
  color:#ffe49a!important;
  font-size:19px!important;
  line-height:1.14!important;
  font-weight:950!important;
}
.hatcher-guide-copy p{
  margin:0 0 7px!important;
  color:#f7f8ff!important;
  font-size:14.5px!important;
  line-height:1.34!important;
  font-weight:520!important;
}
.hatcher-guide-copy p.muted{
  margin-bottom:0!important;
  color:#c9d1f4!important;
  font-size:13.5px!important;
}
.hatcher-guide-art{
  position:relative!important;
  min-height:118px!important;
  display:grid!important;
  place-items:center!important;
  isolation:isolate!important;
}
.hatcher-guide-art img{
  display:block!important;
  max-width:100%!important;
  object-fit:contain!important;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.28))!important;
}
.hatch-art img{
  width:88px!important;
  height:88px!important;
}
.hatch-art::before{
  content:""!important;
  position:absolute!important;
  width:104px!important;
  height:104px!important;
  border-radius:50%!important;
  border:7px solid rgba(126,98,255,.34)!important;
  border-top-color:#8a73ff!important;
  transform:rotate(42deg)!important;
  z-index:-1!important;
}
.hatcher-mini-steps{
  display:flex!important;
  gap:8px!important;
  align-items:center!important;
  margin-top:8px!important;
}
.hatcher-mini-steps i,
.hatcher-mini-steps span{
  width:13px!important;
  height:13px!important;
  border-radius:999px!important;
  border:1px solid rgba(174,188,255,.32)!important;
}
.hatcher-mini-steps i{
  background:#9b7cff!important;
  box-shadow:0 0 12px rgba(155,124,255,.8)!important;
}
.hatch-art b{
  color:#a98cff!important;
  margin-top:6px!important;
  font-size:15px!important;
}
.egg-coin-art{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
}
.egg-coin-art>img{
  width:58px!important;
  height:78px!important;
  margin:0 -8px!important;
}
.egg-coin-art>img:nth-child(2){
  width:76px!important;
  height:100px!important;
  z-index:2!important;
}
.egg-coin-art span{
  position:absolute!important;
  left:18px!important;
  bottom:18px!important;
}
.egg-coin-art span img{
  width:50px!important;
  height:50px!important;
}
.coin-task-art>img{
  width:82px!important;
  height:82px!important;
}
.coin-task-art strong{
  position:absolute!important;
  right:20px!important;
  top:50%!important;
  display:grid!important;
  place-items:center!important;
  min-width:44px!important;
  height:34px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#8a73ff,#5b4dff)!important;
  color:#fff!important;
  font-size:20px!important;
}
.coin-task-art div{
  display:flex!important;
  gap:10px!important;
  margin-top:12px!important;
}
.coin-task-art div img{
  width:32px!important;
  height:32px!important;
  padding:7px!important;
  border-radius:10px!important;
  background:rgba(126,98,255,.12)!important;
  border:1px solid rgba(150,165,245,.18)!important;
}
.feed-art{
  display:block!important;
}
.feed-art .guide-dragon{
  width:104px!important;
  height:104px!important;
  margin:4px auto 0!important;
}
.feed-art img:not(.guide-dragon){
  position:absolute!important;
  width:34px!important;
  height:34px!important;
  padding:6px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.08)!important;
}
.feed-art img:nth-child(2){left:14px!important;bottom:26px!important}
.feed-art img:nth-child(3){right:16px!important;bottom:24px!important}
.feed-art img:nth-child(4){right:40px!important;top:20px!important}
.avatar-art{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
}
.avatar-art span{
  display:grid!important;
  place-items:center!important;
  width:68px!important;
  height:68px!important;
  margin:0 -8px!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.08)!important;
  border:2px solid rgba(159,145,255,.45)!important;
}
.avatar-art span:nth-child(1){
  width:82px!important;
  height:82px!important;
  box-shadow:0 0 24px rgba(159,145,255,.55)!important;
}
.avatar-art span img{
  width:58px!important;
  height:58px!important;
}
.avatar-art span:nth-child(3) img{
  width:44px!important;
  height:44px!important;
}
.share-art{
  display:grid!important;
  place-items:center!important;
}
.guide-share-card{
  width:100px!important;
  height:118px!important;
  padding:8px!important;
  display:grid!important;
  justify-items:center!important;
  align-content:start!important;
  gap:6px!important;
  border-radius:14px!important;
  transform:rotate(5deg)!important;
  background:linear-gradient(180deg,rgba(126,98,255,.38),rgba(18,34,82,.92))!important;
  border:2px solid rgba(205,214,255,.74)!important;
  box-shadow:0 14px 26px rgba(0,0,0,.28)!important;
}
.guide-share-card b{
  color:#ffe49a!important;
  font-size:14px!important;
}
.guide-share-card img{
  width:54px!important;
  height:54px!important;
}
.guide-share-card small{
  color:#dce4ff!important;
  font-size:10px!important;
  font-weight:800!important;
}
.share-art>span{
  position:absolute!important;
  right:12px!important;
  bottom:14px!important;
  display:grid!important;
  place-items:center!important;
  width:44px!important;
  height:44px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#8a73ff,#5b4dff)!important;
}
.share-art>span img{
  width:26px!important;
  height:26px!important;
}
.hatcher-guide-footer{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 300px!important;
  gap:24px!important;
  align-items:center!important;
  margin-top:12px!important;
}
.hatcher-guide-message{
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr)!important;
  align-items:center!important;
  gap:16px!important;
  min-height:60px!important;
  padding:12px 18px!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(150,165,245,.16)!important;
  color:#dce4ff!important;
  line-height:1.35!important;
}
.hatcher-guide-message img{
  width:34px!important;
  height:34px!important;
  filter:drop-shadow(0 0 12px rgba(255,228,154,.45))!important;
}
.hatcher-guide-got-it{
  min-height:60px!important;
  border:0!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,#8a73ff,#5b4dff)!important;
  color:#fff!important;
  font-size:20px!important;
  font-weight:950!important;
  box-shadow:0 16px 34px rgba(88,70,230,.34)!important;
  cursor:pointer!important;
}
@media(max-width:980px){
  .hatcher-guide-modal{
    padding:26px 22px 24px!important;
  }
  .hatcher-guide-grid{
    grid-template-columns:1fr!important;
  }
  .hatcher-guide-card{
    grid-template-columns:44px minmax(0,1fr) 170px!important;
    min-height:190px!important;
  }
  .hatcher-guide-footer{
    grid-template-columns:1fr!important;
  }
}
@media(max-width:640px){
  .hatcher-guide-modal{
    width:calc(100vw - 28px)!important;
    max-height:calc(100vh - 28px)!important;
    border-radius:24px!important;
    padding:22px 16px!important;
  }
  .hatcher-guide-head{
    grid-template-columns:58px 1fr!important;
    gap:14px!important;
    padding-right:48px!important;
  }
  .hatcher-guide-icon{
    width:56px!important;
    height:56px!important;
  }
  .hatcher-guide-icon img{
    width:34px!important;
    height:34px!important;
  }
  .hatcher-guide-head h2{
    font-size:28px!important;
  }
  .hatcher-guide-head p{
    font-size:14px!important;
  }
  .hatcher-guide-modal .hatcher-guide-close{
    width:42px!important;
    height:42px!important;
    top:16px!important;
    right:16px!important;
    font-size:28px!important;
  }
  .hatcher-guide-card{
    grid-template-columns:36px minmax(0,1fr)!important;
    min-height:0!important;
    padding:16px!important;
  }
  .hatcher-guide-art{
    grid-column:1 / -1!important;
    min-height:120px!important;
  }
  .hatcher-guide-number{
    width:32px!important;
    height:32px!important;
    font-size:18px!important;
  }
  .hatcher-guide-copy h3{
    font-size:19px!important;
  }
  .hatcher-guide-copy p{
    font-size:14px!important;
  }
  .hatcher-guide-footer{
    gap:14px!important;
  }
  .hatcher-guide-got-it{
    min-height:54px!important;
    font-size:18px!important;
  }
}

/* Choose Your Test: match the Study page night-star background. */
body:not(.dragon-studio-mode) #homePage.page{
  width:100%!important;
  max-width:none!important;
  min-height:calc(100vh - 76px)!important;
  background:
    linear-gradient(180deg,rgba(3,10,30,.08),rgba(3,10,30,.18)),
    url("assets/assets_webp/backgrounds/bg_main_navy_glow.webp") center top/cover no-repeat!important;
}
body:not(.dragon-studio-mode) #homePage.page::before{
  opacity:.08!important;
}
body:not(.dragon-studio-mode) #homePage .exam-card,
body:not(.dragon-studio-mode) #homePage .product-card,
body:not(.dragon-studio-mode) #homePage .feature-strip,
body:not(.dragon-studio-mode) #homePage .premium-feature-row{
  background:#ffffff!important;
}

/* Dragon Studio transparent asset cleanup. */
body.dragon-studio-mode .ds-dashboard .my-dragon-art-frame,
body.dragon-studio-mode .ds-dashboard .dragon-avatar-frame,
body.dragon-studio-mode .ds-dashboard .ds-gallery-tile,
body.dragon-studio-mode .ds-dashboard .ds-badges>div button,
body.dragon-studio-mode .ds-dashboard .ds-feed-item,
body.dragon-studio-mode .avatar-pick-card,
body.dragon-studio-mode .collection-tile,
body.dragon-studio-mode .dragon-detail-image,
body.dragon-studio-mode .badge-detail-image,
body.dragon-studio-mode .share-item-grid button{
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
}
body.dragon-studio-mode .ds-dashboard .my-dragon-art-frame{
  border-color:rgba(160,175,245,.22)!important;
  backdrop-filter:none!important;
}
body.dragon-studio-mode .ds-dashboard .my-dragon-art-frame img,
body.dragon-studio-mode .ds-dashboard .dragon-avatar-frame img,
body.dragon-studio-mode .ds-dashboard .ds-family .ds-gallery-tile img,
body.dragon-studio-mode .ds-dashboard .ds-hatchery .ds-gallery-tile img,
body.dragon-studio-mode .ds-dashboard .ds-badges img,
body.dragon-studio-mode .ds-dashboard .ds-feed-item img,
body.dragon-studio-mode .avatar-pick-card img,
body.dragon-studio-mode .collection-tile img,
body.dragon-studio-mode .dragon-detail-image,
body.dragon-studio-mode .badge-detail-image,
body.dragon-studio-mode .share-item-grid img,
body.dragon-studio-mode .share-card-preview img,
body.dragon-studio-mode .header-avatar,
body.dragon-studio-mode .avatar-image,
body.dragon-studio-mode #headerAvatarImg{
  background:transparent!important;
  background-color:transparent!important;
  border-color:transparent!important;
  object-fit:contain!important;
  mix-blend-mode:normal!important;
}
body.dragon-studio-mode .ds-dashboard .ds-family .ds-gallery-tile,
body.dragon-studio-mode .ds-dashboard .ds-hatchery .ds-gallery-tile,
body.dragon-studio-mode .ds-dashboard .ds-badges>div button,
body.dragon-studio-mode .ds-dashboard .ds-feed-item{
  border-color:rgba(150,165,245,.18)!important;
}
body.dragon-studio-mode .ds-dashboard .ds-family .ds-gallery-tile b,
body.dragon-studio-mode .ds-dashboard .ds-hatchery .ds-gallery-tile b{
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Study page top tabs and free practice pill cleanup. */
body:not(.dragon-studio-mode) .study-page .mode-tabs{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
  flex-wrap:nowrap!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  margin:0 auto 12px!important;
  padding:4px 8px 8px!important;
}
body:not(.dragon-studio-mode) .study-page .mode-tabs button,
body:not(.dragon-studio-mode) .study-page .mode-tabs .mode-tab{
  height:48px!important;
  min-height:48px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  padding:0 26px!important;
  border:1px solid rgba(150,160,220,.25)!important;
  border-radius:18px!important;
  background:#ffffff!important;
  color:#111a44!important;
  box-shadow:0 8px 18px rgba(3,10,30,.14)!important;
  font-size:15px!important;
  font-weight:850!important;
  line-height:1!important;
  white-space:nowrap!important;
  opacity:1!important;
}
body:not(.dragon-studio-mode) .study-page .mode-tabs button.active,
body:not(.dragon-studio-mode) .study-page .mode-tabs .mode-tab.active{
  border-color:rgba(190,181,255,.85)!important;
  background:linear-gradient(180deg,#7b68ff 0%,#5b4dff 100%)!important;
  color:#ffffff!important;
  box-shadow:0 8px 20px rgba(95,78,255,.30)!important;
}
body:not(.dragon-studio-mode) .study-page .mode-tabs .mode-tab.locked-tab:not(.active){
  background:#ffffff!important;
  color:#111a44!important;
  border-color:rgba(150,160,220,.25)!important;
  opacity:1!important;
}
body:not(.dragon-studio-mode) .study-page .mode-tabs .mode-tab-games:not(.active),
body:not(.dragon-studio-mode) .study-page .mode-tabs .mode-tab-test:not(.active){
  background:#ffffff!important;
  color:#111a44!important;
  border-color:rgba(150,160,220,.25)!important;
}
body:not(.dragon-studio-mode) .study-page .mode-tabs .mode-tab.locked-tab:not(.active) .mode-tab-lock{
  opacity:.78!important;
}
body:not(.dragon-studio-mode) .study-page .mode-tabs .mode-tab-icon,
body:not(.dragon-studio-mode) .study-page .mode-tabs .mode-tab-lock,
body:not(.dragon-studio-mode) .study-page .mode-tabs .mode-tab-sparkle{
  width:17px!important;
  height:17px!important;
  min-width:17px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
  margin:0!important;
}
body:not(.dragon-studio-mode) .study-page .mode-tabs .mode-tab-icon img,
body:not(.dragon-studio-mode) .study-page .mode-tabs .mode-tab-lock img,
body:not(.dragon-studio-mode) .study-page .mode-tabs .mode-tab-sparkle img{
  width:17px!important;
  height:17px!important;
  object-fit:contain!important;
  display:block!important;
}
body:not(.dragon-studio-mode) .study-page .mode-tabs .mode-tab-fun{
  top:-9px!important;
  right:10px!important;
  height:21px!important;
  min-width:38px!important;
  padding:0 8px!important;
  border-radius:999px!important;
  background:#ffd84d!important;
  color:#1a2050!important;
  font-size:11px!important;
  font-weight:900!important;
  box-shadow:0 5px 10px rgba(125,85,0,.18)!important;
}
body:not(.dragon-studio-mode) .study-page .free-banner,
body:not(.dragon-studio-mode) .study-page .free-practice-bar{
  width:fit-content!important;
  max-width:min(860px,calc(100vw - 48px))!important;
  min-height:52px!important;
  height:52px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:nowrap!important;
  gap:14px!important;
  margin:0 auto 16px!important;
  padding:8px 16px 8px 22px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(12,22,52,.92),rgba(7,15,36,.92))!important;
  border:1px solid rgba(126,105,255,.55)!important;
  box-shadow:0 0 24px rgba(100,82,255,.22),0 12px 28px rgba(3,10,30,.20)!important;
  color:#f7f8ff!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}
body:not(.dragon-studio-mode) .study-page .free-banner span,
body:not(.dragon-studio-mode) .study-page .free-practice-bar .message{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  min-width:0!important;
  color:#f7f8ff!important;
  font-size:15px!important;
  font-weight:500!important;
  line-height:1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
body:not(.dragon-studio-mode) .study-page .free-banner .ui-inline-icon,
body:not(.dragon-studio-mode) .study-page .free-practice-bar .ui-inline-icon{
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
  filter:drop-shadow(0 0 8px rgba(126,105,255,.45))!important;
}
body:not(.dragon-studio-mode) .study-page .free-banner button,
body:not(.dragon-studio-mode) .study-page .free-practice-bar .upgrade-btn{
  flex:0 0 auto!important;
  height:40px!important;
  min-height:40px!important;
  padding:0 28px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#8a73ff 0%,#5d4eff 100%)!important;
  color:#ffffff!important;
  font-size:15px!important;
  font-weight:700!important;
  line-height:1!important;
  box-shadow:0 10px 22px rgba(95,78,255,.34)!important;
}
@media(max-width:768px){
  body:not(.dragon-studio-mode) .study-page .mode-tabs{
    justify-content:flex-start!important;
    gap:10px!important;
  }
  body:not(.dragon-studio-mode) .study-page .mode-tabs button,
  body:not(.dragon-studio-mode) .study-page .mode-tabs .mode-tab{
    height:44px!important;
    min-height:44px!important;
    padding:0 18px!important;
    border-radius:15px!important;
    font-size:14px!important;
  }
  body:not(.dragon-studio-mode) .study-page .free-banner,
  body:not(.dragon-studio-mode) .study-page .free-practice-bar{
    max-width:calc(100vw - 28px)!important;
  }
  body:not(.dragon-studio-mode) .study-page .free-banner span,
  body:not(.dragon-studio-mode) .study-page .free-practice-bar .message{
    font-size:13px!important;
  }
}

/* Unified dark fantasy game page system. This file loads after styles.css. */
.hatchelite-game-page.stoke-fire-page,
.hatchelite-game-page.forge-scale-page,
.hatchelite-game-page.dragon-flight-page,
.hatchelite-game-page.hatchery-match-page,
.hatchelite-game-page.term-definition-page,
.hatchelite-game-page.dragons-whisper-page{
  min-height:100vh!important;
  background:transparent!important;
  color:#f7f8ff!important;
  position:relative!important;
  overflow:hidden!important;
}
.hatchelite-game-page.stoke-fire-page:before,
.hatchelite-game-page.forge-scale-page:before,
.hatchelite-game-page.dragon-flight-page:before,
.hatchelite-game-page.hatchery-match-page:before,
.hatchelite-game-page.term-definition-page:before,
.hatchelite-game-page.dragons-whisper-page:before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:0!important;
  background-image:var(--he-bg-stars),var(--he-bg-bubbles)!important;
  background-repeat:no-repeat,no-repeat!important;
  background-position:left 5% top 8%,right top!important;
  background-size:128px auto,100% 100%!important;
  opacity:.26!important;
}
.hatchelite-game-page.stoke-fire-page>*,
.hatchelite-game-page.forge-scale-page>*,
.hatchelite-game-page.dragon-flight-page>*,
.hatchelite-game-page.hatchery-match-page>*,
.hatchelite-game-page.term-definition-page>*,
.hatchelite-game-page.dragons-whisper-page>*{
  position:relative!important;
  z-index:1!important;
}
.hatchelite-game-page .he-game-topbar{
  background:#fff!important;
  border-bottom:1px solid #e9e5ff!important;
  box-shadow:0 8px 24px rgba(4,10,30,.08)!important;
}
.game-page-back-row{
  width:min(96vw,1500px)!important;
  margin:18px auto 0!important;
  position:relative!important;
  z-index:5!important;
}
.page-back-button,
.game-back-button,
.back-to-games-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-height:40px!important;
  height:auto!important;
  padding:10px 18px!important;
  border-radius:999px!important;
  border:1px solid rgba(139,116,255,.55)!important;
  background:linear-gradient(135deg,rgba(36,32,86,.95),rgba(82,64,190,.82))!important;
  color:#f4f1ff!important;
  font-weight:800!important;
  font-size:14px!important;
  line-height:1!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 10px 24px rgba(68,49,180,.28)!important;
  text-decoration:none!important;
  cursor:pointer!important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;
}
.page-back-button:hover,
.game-back-button:hover,
.back-to-games-btn:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(180,160,255,.9)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 12px 28px rgba(116,91,255,.42),0 0 18px rgba(139,116,255,.35)!important;
}
.page-back-button:active,
.game-back-button:active,
.back-to-games-btn:active{
  transform:translateY(0)!important;
}
.stoke-title-block h1,.forge-title-block h1,.flight-title-block h1,
.hatchery-title-block h1,.term-title-block h1,.whisper-title-block h1{
  color:#fff!important;
  text-shadow:0 8px 24px rgba(0,0,0,.28)!important;
}
.stoke-title-block p,.forge-title-block p,.flight-title-block p,
.hatchery-title-block p,.term-title-block p,.whisper-title-block p{
  color:#e9ecff!important;
}
.stoke-stat-pill,.forge-stat-pill,.flight-stat-pill,
.hatchery-stat-pill,.term-stat-pill,.whisper-stat-pill,
.hatchelite-game-page .game-how-button{
  background:rgba(10,23,52,.82)!important;
  border:1px solid rgba(138,150,234,.24)!important;
  color:#f6f7ff!important;
  box-shadow:0 8px 18px rgba(0,0,0,.18)!important;
}
.stoke-stat-pill *,.forge-stat-pill *,.flight-stat-pill *,
.hatchery-stat-pill *,.term-stat-pill *,.whisper-stat-pill *,
.hatchelite-game-page .game-how-button *{
  color:inherit!important;
}
.stoke-board,.forge-board,.flight-board,.hatchery-board,.term-board,.whisper-board{
  background:#fdfdff!important;
  border:1px solid rgba(188,196,238,.35)!important;
  border-radius:28px!important;
  box-shadow:0 24px 50px rgba(5,12,35,.34)!important;
  color:#17234c!important;
}
.stoke-panel,.forge-panel,.flight-panel,.hatchery-panel,.term-panel,.whisper-panel,
.stoke-encouragement,.flight-reward-card,.term-reward-card,.whisper-reward-card,
.hatchelite-game-page .game-visual-card,
.stoke-right-col .game-practice-controls,
.forge-right-col .game-practice-controls,
.flight-right-col .game-practice-controls,
.hatchery-right-col .game-practice-controls,
.term-right-col .game-practice-controls,
.whisper-right-col .game-practice-controls,
.stoke-word-list-button,.forge-word-list-button,.flight-word-list-button,
.hatchery-word-list-button,.term-word-list-button,.whisper-word-list-button{
  background:linear-gradient(180deg,rgba(9,21,50,.98),rgba(11,26,60,.98))!important;
  border:1px solid rgba(138,150,234,.22)!important;
  color:#f7f8ff!important;
  box-shadow:0 12px 28px rgba(4,10,30,.30)!important;
}
.hatchelite-game-page .game-visual-card img{
  background:#0c1738!important;
}
.stoke-panel h2,.forge-panel h2,.flight-panel h2,.hatchery-panel h2,.term-panel h2,.whisper-panel h2,
.treasure-progress-card.treasure-rewards-card h2,
.whisper-path-card>b,.treasure-progress-card>b,.nursery-goal-panel>b,
.armor-progress-count,.flight-progress-bar b,.term-reward-card span b,
.whisper-reward-card b,.whisper-reward-card span{
  color:#fff!important;
}
.stoke-panel p,.forge-panel p,.flight-panel p,.hatchery-panel p,.term-panel p,.whisper-panel p,
.stoke-step p,.forge-step p,.flight-step p,.hatchery-step p,.term-step p,.whisper-step p,
.stoke-encouragement span,.flight-reward-card span,.term-reward-card span,.whisper-reward-card p,
.hatchelite-game-page .game-practice-controls label,
.hatchelite-game-page .game-practice-controls small{
  color:#c9d1ff!important;
}
.stoke-right-col .game-practice-controls select,
.forge-right-col .game-practice-controls select,
.flight-right-col .game-practice-controls select,
.hatchery-right-col .game-practice-controls select,
.term-right-col .game-practice-controls select,
.whisper-right-col .game-practice-controls select{
  background:rgba(7,14,37,.78)!important;
  border-color:rgba(151,162,238,.28)!important;
  color:#fff!important;
}
.stoke-hint-button,.forge-hint-button,.flight-hint-button,.hatchery-hint-button,.term-hint-button,.whisper-hint-button,
.stoke-right-col .game-practice-controls button,
.forge-right-col .game-practice-controls button,
.flight-right-col .game-practice-controls button,
.hatchery-right-col .game-practice-controls button,
.term-right-col .game-practice-controls button,
.whisper-right-col .game-practice-controls button,
.ignite-button,.forge-button,.send-soaring-button,.term-check-button,.translate-whisper-button.primary-whisper-submit{
  background:linear-gradient(180deg,#8a73ff 0%,#5d4eff 100%)!important;
  color:#fff!important;
  border:0!important;
  box-shadow:0 12px 26px rgba(95,78,255,.32)!important;
}
.stoke-hint-button *,.forge-hint-button *,.flight-hint-button *,
.hatchery-hint-button *,.term-hint-button *,.whisper-hint-button *,
.ignite-button *,.forge-button *,.send-soaring-button *,.term-check-button *{
  color:inherit!important;
}
.term-reset-button,.hatchery-ghost-button,.listen-again-button,.reset-whisper-button{
  background:#fff!important;
  color:#6546f3!important;
  border:1.5px solid #7c4dff!important;
  box-shadow:0 10px 22px rgba(82,64,160,.08)!important;
}
.hatchling-collection span,.armor-item{
  background:rgba(255,255,255,.08)!important;
  border-color:rgba(178,188,255,.22)!important;
  color:#c9d1ff!important;
}
.hatchling-collection span.filled,.armor-item--unlocked{
  background:rgba(255,255,255,.13)!important;
  color:#fff!important;
}

/* Game pages live inside the study card, so beat study-card text color rules. */
.study-page .main-study-card .hatchelite-game-page .stoke-stat-pill,
.study-page .main-study-card .hatchelite-game-page .forge-stat-pill,
.study-page .main-study-card .hatchelite-game-page .flight-stat-pill,
.study-page .main-study-card .hatchelite-game-page .hatchery-stat-pill,
.study-page .main-study-card .hatchelite-game-page .term-stat-pill,
.study-page .main-study-card .hatchelite-game-page .whisper-stat-pill,
.study-page .main-study-card .hatchelite-game-page .game-how-button,
.study-page .main-study-card .hatchelite-game-page .stoke-stat-pill *,
.study-page .main-study-card .hatchelite-game-page .forge-stat-pill *,
.study-page .main-study-card .hatchelite-game-page .flight-stat-pill *,
.study-page .main-study-card .hatchelite-game-page .hatchery-stat-pill *,
.study-page .main-study-card .hatchelite-game-page .term-stat-pill *,
.study-page .main-study-card .hatchelite-game-page .whisper-stat-pill *,
.study-page .main-study-card .hatchelite-game-page .game-how-button *{
  color:#f6f7ff!important;
}
.study-page .main-study-card .hatchelite-game-page .stoke-panel h2,
.study-page .main-study-card .hatchelite-game-page .forge-panel h2,
.study-page .main-study-card .hatchelite-game-page .flight-panel h2,
.study-page .main-study-card .hatchelite-game-page .hatchery-panel h2,
.study-page .main-study-card .hatchelite-game-page .term-panel h2,
.study-page .main-study-card .hatchelite-game-page .whisper-panel h2,
.study-page .main-study-card .hatchelite-game-page .treasure-progress-card h2,
.study-page .main-study-card .hatchelite-game-page .whisper-path-card>b,
.study-page .main-study-card .hatchelite-game-page .nursery-goal-panel>b,
.study-page .main-study-card .hatchelite-game-page .armor-progress-count,
.study-page .main-study-card .hatchelite-game-page .flight-progress-bar b,
.study-page .main-study-card .hatchelite-game-page .reward-progress b,
.study-page .main-study-card .hatchelite-game-page .armor-item b,
.study-page .main-study-card .hatchelite-game-page .armor-item-label,
.study-page .main-study-card .hatchelite-game-page .hatchling-collection b,
.study-page .main-study-card .hatchelite-game-page .term-reward-card span b,
.study-page .main-study-card .hatchelite-game-page .whisper-reward-card b,
.study-page .main-study-card .hatchelite-game-page .whisper-reward-card span{
  color:#fff!important;
}
.study-page .main-study-card .hatchelite-game-page .stoke-panel p,
.study-page .main-study-card .hatchelite-game-page .forge-panel p,
.study-page .main-study-card .hatchelite-game-page .flight-panel p,
.study-page .main-study-card .hatchelite-game-page .hatchery-panel p,
.study-page .main-study-card .hatchelite-game-page .term-panel p,
.study-page .main-study-card .hatchelite-game-page .whisper-panel p,
.study-page .main-study-card .hatchelite-game-page .stoke-encouragement span,
.study-page .main-study-card .hatchelite-game-page .flight-reward-card span,
.study-page .main-study-card .hatchelite-game-page .term-reward-card span,
.study-page .main-study-card .hatchelite-game-page .whisper-reward-card p,
.study-page .main-study-card .hatchelite-game-page .game-practice-controls label,
.study-page .main-study-card .hatchelite-game-page .game-practice-controls small{
  color:#c9d1ff!important;
}

.hatchelite-game-page .game-practice-helper,
.hatchelite-game-page .game-practice-pool,
.hatchelite-game-page .game-practice-special-note,
.hatchelite-game-page .game-practice-note{
  display:block;
  width:100%;
  margin-top:8px;
  line-height:1.35;
}
.hatchelite-game-page .game-practice-pool{
  color:#f7f8ff!important;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(138,150,234,.2);
  border-radius:12px;
  padding:8px 10px;
}
.hatchelite-game-page .game-practice-pool b{
  color:#fff!important;
}
.hatchelite-game-page .game-practice-special-note{
  color:#ffe4ad!important;
}
.hatchelite-game-page .game-practice-empty-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  width:100%;
  margin-top:8px;
}
.hatchelite-game-page .game-practice-empty-actions button{
  min-height:42px;
  border-radius:14px!important;
}

.game-completion-modal{
  width:min(560px,94vw)!important;
  padding:24px 28px 26px!important;
  background:
    radial-gradient(circle at 50% 18%,rgba(168,82,255,.32),transparent 34%),
    radial-gradient(circle at 12% 18%,rgba(255,188,60,.18),transparent 22%),
    linear-gradient(180deg,#12063a 0%,#090f31 58%,#060b25 100%)!important;
  border:2px solid rgba(191,104,255,.82)!important;
  box-shadow:0 30px 86px rgba(2,4,20,.68),0 0 34px rgba(154,78,255,.42)!important;
  color:#fff!important;
}
.game-completion-backdrop{
  background:rgba(4,6,24,.68)!important;
  backdrop-filter:blur(9px)!important;
}
.game-completion-modal .completion-confetti{
  opacity:.52!important;
  mix-blend-mode:screen;
}
.game-completion-modal .completion-reward-image-wrap{
  margin-bottom:10px!important;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(255,209,105,.28);
  background:rgba(255,255,255,.05);
  box-shadow:0 18px 44px rgba(0,0,0,.34);
}
.game-completion-modal .completion-reward-image,
.game-completion-modal .completion-reward-fallback{
  width:100%!important;
  height:clamp(180px,28vw,300px)!important;
  max-height:none!important;
  object-fit:cover;
  object-position:center;
}
.game-completion-modal h2{
  margin-top:10px!important;
  color:#fff!important;
  text-shadow:0 0 18px rgba(139,88,255,.86),0 3px 0 rgba(80,35,180,.45);
}
.completion-reward-summary{
  display:grid;
  gap:10px;
  margin:0 auto 16px;
  max-width:480px;
}
.completion-reward-summary p{
  margin:0!important;
  padding:0;
  background:transparent;
  border:0;
  color:#eef0ff!important;
  font-size:18px!important;
  line-height:1.35!important;
  font-weight:800;
}
.completion-coin-badge{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  width:min(360px,100%);
  margin:8px auto 2px;
  padding:14px 22px;
  border-radius:22px;
  border:2px solid rgba(255,205,83,.9);
  background:linear-gradient(180deg,rgba(82,31,129,.92),rgba(22,12,64,.96));
  box-shadow:0 0 22px rgba(255,178,40,.38),inset 0 0 22px rgba(255,217,111,.12);
  color:#ffd86a;
  font-size:clamp(24px,4vw,38px);
  font-weight:1000;
  text-shadow:0 0 14px rgba(255,172,34,.62);
}
.completion-coin-badge img{
  width:58px;
  height:58px;
  object-fit:contain;
}
.game-completion-modal .completion-actions{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.game-completion-modal .completion-actions button{
  min-height:54px;
  padding-inline:12px;
  font-size:17px;
}
.game-completion-modal .completion-primary{
  background:linear-gradient(180deg,#b83dff 0%,#762cff 100%)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 14px 28px rgba(149,45,255,.38),inset 0 1px 0 rgba(255,255,255,.26)!important;
}
.game-completion-modal .completion-secondary{
  background:rgba(9,13,49,.84)!important;
  color:#fff!important;
  border:1px solid rgba(255,205,83,.62)!important;
  box-shadow:0 14px 28px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
@media(max-width:720px){
  .game-completion-modal .completion-actions{
    grid-template-columns:1fr;
  }
}
.study-page .main-study-card .hatchelite-game-page .stoke-hint-button,
.study-page .main-study-card .hatchelite-game-page .forge-hint-button,
.study-page .main-study-card .hatchelite-game-page .flight-hint-button,
.study-page .main-study-card .hatchelite-game-page .hatchery-hint-button,
.study-page .main-study-card .hatchelite-game-page .term-hint-button,
.study-page .main-study-card .hatchelite-game-page .whisper-hint-button,
.study-page .main-study-card .hatchelite-game-page .stoke-hint-button *,
.study-page .main-study-card .hatchelite-game-page .forge-hint-button *,
.study-page .main-study-card .hatchelite-game-page .flight-hint-button *,
.study-page .main-study-card .hatchelite-game-page .hatchery-hint-button *,
.study-page .main-study-card .hatchelite-game-page .term-hint-button *,
.study-page .main-study-card .hatchelite-game-page .whisper-hint-button *{
  color:#fff!important;
}
.study-page .main-study-card .hatchelite-game-page .stoke-hint-button b,
.study-page .main-study-card .hatchelite-game-page .forge-hint-button b,
.study-page .main-study-card .hatchelite-game-page .flight-hint-button b,
.study-page .main-study-card .hatchelite-game-page .hatchery-hint-button b,
.study-page .main-study-card .hatchelite-game-page .term-hint-button b,
.study-page .main-study-card .hatchelite-game-page .whisper-hint-button b{
  color:#5d4eff!important;
}

/* Choose Your Dragon Challenge: dark cards with taller game art. */
.he-games-select-page .he-daily-reward-card{
  background:linear-gradient(180deg,rgba(9,21,50,.98),rgba(11,26,60,.98))!important;
  border:1px solid rgba(138,150,234,.28)!important;
  box-shadow:0 18px 44px rgba(4,10,30,.32)!important;
  color:#f7f8ff!important;
}
.he-games-select-page .he-daily-reward-card h2,
.he-games-select-page .he-daily-reward-card b,
.he-games-select-page .he-daily-reward-card strong{
  color:#fff!important;
}
.he-games-select-page .he-daily-reward-card p{
  color:#c9d1ff!important;
}
.he-games-select-page .he-daily-reward-card .he-status-pill{
  background:rgba(12,20,48,.76)!important;
  border-color:rgba(255,210,96,.44)!important;
  color:#ffe082!important;
}
.he-games-select-page .hatchelite-game-card{
  background:linear-gradient(180deg,rgba(9,21,50,.98),rgba(11,26,60,.98))!important;
  border:1px solid rgba(138,150,234,.30)!important;
  box-shadow:0 18px 44px rgba(4,10,30,.32)!important;
  color:#f7f8ff!important;
}
.he-games-select-page .hatchelite-game-card:hover,
.he-games-select-page .hatchelite-game-card:focus-visible{
  border-color:rgba(138,115,255,.72)!important;
  box-shadow:0 22px 54px rgba(95,78,255,.24)!important;
}
.he-games-select-page .game-card-image-wrap{
  height:225px!important;
  min-height:225px!important;
  max-height:225px!important;
  background:#0c1738!important;
  border:1px solid rgba(138,150,234,.24)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)!important;
}
.he-games-select-page .game-card-image{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
}
.he-games-select-page .game-card-content h2{
  color:#fff!important;
}
.he-games-select-page .game-card-content p{
  color:#d4dcff!important;
}
.he-games-select-page .game-card-progress{
  border-top-color:rgba(138,150,234,.18)!important;
}
.he-games-select-page .game-card-progress span,
.he-games-select-page .game-card-progress .game-card-stat,
.he-games-select-page .game-card-stat-label{
  color:#c9d1ff!important;
}
.he-games-select-page .game-card-progress b,
.he-games-select-page .game-card-stat-value{
  color:#fff!important;
}
.he-games-select-page .play-game-button{
  background:linear-gradient(180deg,#8a73ff 0%,#5d4eff 100%)!important;
  color:#fff!important;
  border:0!important;
  box-shadow:0 12px 26px rgba(95,78,255,.32)!important;
}

@media(max-width:700px){
  .he-games-select-page .game-card-image-wrap{
    height:210px!important;
    min-height:210px!important;
    max-height:210px!important;
  }
}

/* Flashcard set completion summary. */
body:not(.dragon-studio-mode) .study-page .main-study-card:has(.activity-summary-card){
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:560px!important;
  padding:42px 36px!important;
}
body:not(.dragon-studio-mode) .study-page .activity-summary-card{
  width:min(620px,100%)!important;
  max-width:620px!important;
  margin:0 auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  color:#07133f!important;
}
body:not(.dragon-studio-mode) .study-page .summary-success-mark{
  position:relative!important;
  width:76px!important;
  height:76px!important;
  margin:0 auto 18px!important;
  border-radius:999px!important;
  display:grid!important;
  place-items:center!important;
  background:linear-gradient(180deg,#745cff 0%,#4b37d4 100%)!important;
  border:3px solid rgba(255,215,103,.82)!important;
  box-shadow:0 14px 30px rgba(82,62,220,.26),0 0 0 10px rgba(116,92,255,.08)!important;
}
body:not(.dragon-studio-mode) .study-page .summary-success-mark:before,
body:not(.dragon-studio-mode) .study-page .summary-success-mark:after{
  content:none!important;
  display:none!important;
}
body:not(.dragon-studio-mode) .study-page .summary-success-mark:before{left:-24px!important;top:16px!important}
body:not(.dragon-studio-mode) .study-page .summary-success-mark:after{right:-24px!important;bottom:18px!important}
body:not(.dragon-studio-mode) .study-page .summary-success-mark span{
  color:#fff!important;
  font-size:36px!important;
  line-height:1!important;
}
body:not(.dragon-studio-mode) .study-page .activity-summary-card h2{
  margin:0 0 20px!important;
  color:#07133f!important;
  font-size:clamp(38px,4vw,54px)!important;
  font-weight:950!important;
  letter-spacing:0!important;
}
body:not(.dragon-studio-mode) .study-page .summary-stat-list{
  position:relative!important;
  width:min(360px,100%)!important;
  display:grid!important;
  gap:12px!important;
  margin:0 auto 34px!important;
  padding:22px 0!important;
  border-top:1px solid rgba(116,92,255,.20)!important;
  border-bottom:1px solid rgba(116,92,255,.20)!important;
  color:#07133f!important;
  font-size:19px!important;
}
body:not(.dragon-studio-mode) .study-page .summary-stat-list:before,
body:not(.dragon-studio-mode) .study-page .summary-stat-list:after{
  content:none!important;
  display:none!important;
}
body:not(.dragon-studio-mode) .study-page .summary-stat-list:before{top:-8px!important}
body:not(.dragon-studio-mode) .study-page .summary-stat-list:after{bottom:-8px!important}
body:not(.dragon-studio-mode) .study-page .summary-stat-list p{
  margin:0!important;
  display:grid!important;
  grid-template-columns:30px auto 1fr!important;
  align-items:center!important;
  justify-content:start!important;
  gap:10px!important;
  text-align:left!important;
}
body:not(.dragon-studio-mode) .study-page .summary-stat-list i{
  width:26px!important;
  height:26px!important;
  border-radius:999px!important;
  display:grid!important;
  place-items:center!important;
  background:linear-gradient(180deg,#715cff,#4f3ed8)!important;
  box-shadow:0 8px 16px rgba(82,62,220,.20)!important;
}
body:not(.dragon-studio-mode) .study-page .summary-stat-list i img{
  width:15px!important;
  height:15px!important;
  object-fit:contain!important;
  filter:brightness(0) invert(1)!important;
}
body:not(.dragon-studio-mode) .study-page .summary-stat-list p:nth-child(2) i{
  background:linear-gradient(180deg,#ffc94f,#e0a321)!important;
}
body:not(.dragon-studio-mode) .study-page .summary-stat-list b{
  color:#121747!important;
  font-weight:900!important;
}
body:not(.dragon-studio-mode) .study-page .summary-stat-list span{
  color:#4f5275!important;
  font-weight:500!important;
}
body:not(.dragon-studio-mode) .study-page .summary-actions{
  width:min(560px,100%)!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:16px 18px!important;
}
body:not(.dragon-studio-mode) .study-page .summary-actions button,
body:not(.dragon-studio-mode) .study-page .summary-empty-actions button{
  min-height:70px!important;
  border-radius:18px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  padding:0 20px!important;
  border:1.5px solid rgba(116,92,255,.45)!important;
  background:#fff!important;
  color:#111a44!important;
  font-size:17px!important;
  font-weight:900!important;
  box-shadow:0 12px 24px rgba(35,25,90,.06)!important;
}
body:not(.dragon-studio-mode) .study-page .summary-actions button i,
body:not(.dragon-studio-mode) .study-page .summary-empty-actions button i{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  display:grid!important;
  place-items:center!important;
  color:#4f3ed8!important;
  font-size:25px!important;
  font-style:normal!important;
  line-height:1!important;
}
body:not(.dragon-studio-mode) .study-page .summary-actions button i img{
  width:26px!important;
  height:26px!important;
  object-fit:contain!important;
}
body:not(.dragon-studio-mode) .study-page .summary-actions .summary-primary{
  border:0!important;
  background:linear-gradient(180deg,#735cff 0%,#4c38d5 100%)!important;
  color:#fff!important;
  box-shadow:0 16px 32px rgba(82,62,220,.28)!important;
}
body:not(.dragon-studio-mode) .study-page .summary-actions .summary-primary i{
  color:#fff!important;
  font-size:36px!important;
}
body:not(.dragon-studio-mode) .study-page .summary-empty-state{
  border-color:rgba(116,92,255,.30)!important;
  background:#fff!important;
  box-shadow:0 12px 28px rgba(6,16,40,.08)!important;
}
body:not(.dragon-studio-mode) .study-page .summary-empty-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
  flex-wrap:wrap!important;
}
body:not(.dragon-studio-mode) .study-page .summary-empty-actions button{
  min-height:48px!important;
}
@media(max-width:760px){
  body:not(.dragon-studio-mode) .study-page .summary-actions{
    grid-template-columns:1fr!important;
  }
  body:not(.dragon-studio-mode) .study-page .summary-actions button{
    min-height:58px!important;
  }
}

/* Flashcard side toggle and definition-side polish. */
body:not(.dragon-studio-mode) .study-page .shuffle-flash-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:stretch!important;
  gap:10px!important;
  width:100%!important;
}
body:not(.dragon-studio-mode) .study-page .shuffle-flash-row .shuffle-deck-card{
  width:100%!important;
  min-width:0!important;
  margin:0!important;
}
body:not(.dragon-studio-mode) .study-page .flash-side-toggle{
  display:inline-grid!important;
  grid-template-columns:1fr 1fr!important;
  align-items:center!important;
  align-self:stretch!important;
  gap:4px!important;
  padding:6px!important;
  border:1px solid rgba(130,145,220,.26)!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,rgba(14,29,64,.94),rgba(8,18,44,.94))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 22px rgba(3,10,30,.14)!important;
}
body:not(.dragon-studio-mode) .study-page .flash-side-option{
  min-width:64px!important;
  height:42px!important;
  border:1px solid transparent!important;
  border-radius:13px!important;
  background:transparent!important;
  color:#cbd4ff!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1!important;
  cursor:pointer!important;
}
body:not(.dragon-studio-mode) .study-page .flash-side-option.active{
  background:linear-gradient(180deg,#8a73ff 0%,#5d4eff 100%)!important;
  color:#fff!important;
  border-color:rgba(198,188,255,.48)!important;
  box-shadow:0 8px 16px rgba(95,78,255,.25)!important;
}
body:not(.dragon-studio-mode) .study-page .flashcard-top-counter{
  color:transparent!important;
  visibility:hidden!important;
}
body:not(.dragon-studio-mode) .study-page .flashcard-back-content.definition-side{
  max-width:min(680px,100%)!important;
  margin:auto!important;
  display:grid!important;
  gap:16px!important;
  text-align:left!important;
}
body:not(.dragon-studio-mode) .study-page .flashcard-back-content.definition-side p{
  margin:0!important;
  color:#303a66!important;
  font-size:clamp(17px,1.6vw,22px)!important;
  line-height:1.45!important;
}
body:not(.dragon-studio-mode) .study-page .flashcard-back-content.definition-side b,
body:not(.dragon-studio-mode) .study-page .flashcard-synonym-line b{
  color:#111a44!important;
  font-weight:950!important;
}
body:not(.dragon-studio-mode) .study-page .flashcard-synonym-line{
  margin:16px auto 0!important;
  max-width:620px!important;
  color:#4f5275!important;
  font-size:18px!important;
  line-height:1.4!important;
  font-weight:600!important;
}
body:not(.dragon-studio-mode) .study-page .summary-actions .summary-primary,
body:not(.dragon-studio-mode) .study-page .summary-actions .summary-primary span{
  color:#fff!important;
}
body:not(.dragon-studio-mode) .study-page .range-type-btn[data-tooltip]{
  position:relative!important;
}
body:not(.dragon-studio-mode) .study-page .range-type-btn[data-tooltip]:hover:after,
body:not(.dragon-studio-mode) .study-page .range-type-btn[data-tooltip]:focus-visible:after{
  content:attr(data-tooltip)!important;
  position:absolute!important;
  left:50%!important;
  bottom:calc(100% + 9px)!important;
  transform:translateX(-50%)!important;
  width:max-content!important;
  max-width:230px!important;
  padding:8px 10px!important;
  border-radius:10px!important;
  background:rgba(8,16,38,.96)!important;
  border:1px solid rgba(155,145,255,.38)!important;
  color:#f7f8ff!important;
  box-shadow:0 12px 24px rgba(0,0,0,.28)!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1.2!important;
  z-index:4!important;
  pointer-events:none!important;
}
@media(max-width:760px){
  body:not(.dragon-studio-mode) .study-page .shuffle-flash-row{
    grid-template-columns:1fr!important;
  }
  body:not(.dragon-studio-mode) .study-page .flash-side-toggle{
    width:100%!important;
  }
}

/* Center the full three-column Study layout as one balanced group. */
body:not(.dragon-studio-mode):not(.game-route-mode) .study-page{
  width:100%!important;
  max-width:none!important;
  padding-left:24px!important;
  padding-right:24px!important;
}
body:not(.dragon-studio-mode):not(.game-route-mode) .study-page .study-layout{
  width:min(1440px,calc(100vw - 48px))!important;
  max-width:1440px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  display:grid!important;
  grid-template-columns:260px minmax(560px,760px) 300px!important;
  gap:24px!important;
  align-items:start!important;
  justify-content:center!important;
}
body:not(.dragon-studio-mode):not(.game-route-mode) .study-page .side-col,
body:not(.dragon-studio-mode):not(.game-route-mode) .study-page .right-col{
  width:100%!important;
  max-width:none!important;
}
body:not(.dragon-studio-mode):not(.game-route-mode) .study-page .study-center-col,
body:not(.dragon-studio-mode):not(.game-route-mode) .study-page .main-study-card{
  width:100%!important;
  max-width:760px!important;
}
@media(max-width:1320px){
  body:not(.dragon-studio-mode):not(.game-route-mode) .study-page .study-layout{
    width:min(1260px,calc(100vw - 40px))!important;
    grid-template-columns:250px minmax(540px,1fr) 292px!important;
    gap:20px!important;
  }
  body:not(.dragon-studio-mode):not(.game-route-mode) .study-page .study-center-col,
  body:not(.dragon-studio-mode):not(.game-route-mode) .study-page .main-study-card{
    max-width:none!important;
  }
}
@media(max-width:1220px){
  body:not(.dragon-studio-mode):not(.game-route-mode) .study-page .study-layout{
    width:100%!important;
    max-width:820px!important;
    grid-template-columns:1fr!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}
@media(max-width:768px){
  body:not(.dragon-studio-mode):not(.game-route-mode) .study-page{
    padding-left:14px!important;
    padding-right:14px!important;
  }
  body:not(.dragon-studio-mode):not(.game-route-mode) .study-page .study-layout{
    width:100%!important;
  }
}

/* Compact dark Your Progress card. */
body:not(.dragon-studio-mode) .study-page .progress-panel{
  min-height:0!important;
  padding:16px 18px!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,rgba(16,31,66,.94),rgba(8,21,49,.96))!important;
  border:1px solid rgba(137,158,220,.28)!important;
  box-shadow:0 18px 38px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
body:not(.dragon-studio-mode) .study-page .progress-panel h3{
  margin:0 0 12px!important;
  color:#ffe9a7!important;
  font-size:18px!important;
  line-height:1.1!important;
  font-weight:950!important;
}
body:not(.dragon-studio-mode) .study-page .progress-item{
  display:grid!important;
  grid-template-columns:36px minmax(0,1fr)!important;
  align-items:center!important;
  gap:10px!important;
  min-height:46px!important;
  padding:8px 0!important;
  border-bottom:1px solid rgba(137,158,220,.18)!important;
}
body:not(.dragon-studio-mode) .study-page .progress-item:last-child{
  border-bottom:0!important;
  padding-bottom:0!important;
}
body:not(.dragon-studio-mode) .study-page .progress-item i{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  flex-basis:34px!important;
  border-radius:12px!important;
  display:grid!important;
  place-items:center!important;
  background:linear-gradient(180deg,rgba(113,92,255,.30),rgba(57,73,151,.28))!important;
  border:1px solid rgba(164,181,255,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
body:not(.dragon-studio-mode) .study-page .progress-item:nth-of-type(2) i{
  background:linear-gradient(180deg,rgba(255,202,79,.25),rgba(108,73,20,.18))!important;
}
body:not(.dragon-studio-mode) .study-page .progress-item i img{
  width:20px!important;
  height:20px!important;
  object-fit:contain!important;
}
body:not(.dragon-studio-mode) .study-page .progress-item>div{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:baseline!important;
  column-gap:10px!important;
  min-width:0!important;
}
body:not(.dragon-studio-mode) .study-page .progress-item span{
  color:rgba(237,242,255,.78)!important;
  font-size:12px!important;
  font-weight:750!important;
  line-height:1.15!important;
  white-space:nowrap!important;
}
body:not(.dragon-studio-mode) .study-page .progress-item b,
body:not(.dragon-studio-mode) .study-page .progress-item #levelTextSmall{
  margin:0!important;
  color:#ffffff!important;
  font-size:14px!important;
  font-weight:900!important;
  line-height:1.15!important;
  text-align:right!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
body:not(.dragon-studio-mode) .study-page .progress-item .link-btn{
  grid-column:1 / -1!important;
  justify-self:start!important;
  margin:4px 0 0!important;
  padding:0!important;
  color:#a993ff!important;
  background:transparent!important;
  border:0!important;
  font-size:11.5px!important;
  font-weight:850!important;
  line-height:1.1!important;
  text-decoration:underline!important;
}
@media(max-width:1220px){
  body:not(.dragon-studio-mode) .study-page .progress-item>div{
    grid-template-columns:minmax(0,1fr) auto!important;
  }
}

/* Keep the Current Level row readable on narrow Study sidebars. */
body:not(.dragon-studio-mode) .study-page .progress-panel .progress-item:nth-of-type(4)>div{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,48%)!important;
  align-items:start!important;
  column-gap:10px!important;
  row-gap:4px!important;
  min-width:0!important;
}
body:not(.dragon-studio-mode) .study-page .progress-panel .progress-item:nth-of-type(4)>div span{
  min-width:0!important;
  color:rgba(237,242,255,.78)!important;
  font-size:clamp(12px,3.1vw,14px)!important;
  line-height:1.15!important;
  white-space:normal!important;
  overflow:visible!important;
}
body:not(.dragon-studio-mode) .study-page .progress-panel .progress-item:nth-of-type(4)>div #levelTextSmall{
  min-width:0!important;
  max-width:100%!important;
  color:#fff!important;
  font-size:clamp(12px,3.1vw,14px)!important;
  line-height:1.15!important;
  text-align:right!important;
  white-space:normal!important;
  overflow-wrap:break-word!important;
  word-break:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
body:not(.dragon-studio-mode) .study-page .progress-panel .progress-item:nth-of-type(4)>div .link-btn{
  grid-column:1 / -1!important;
  justify-self:start!important;
}
@media(max-width:520px){
  body:not(.dragon-studio-mode) .study-page .progress-panel .progress-item:nth-of-type(4)>div{
    grid-template-columns:minmax(0,1fr) minmax(0,52%)!important;
    align-items:start!important;
  }
  body:not(.dragon-studio-mode) .study-page .progress-panel .progress-item:nth-of-type(4)>div span,
  body:not(.dragon-studio-mode) .study-page .progress-panel .progress-item:nth-of-type(4)>div #levelTextSmall{
    font-size:13px!important;
  }
}
@media(max-width:390px){
  body:not(.dragon-studio-mode) .study-page .progress-panel .progress-item:nth-of-type(4)>div{
    grid-template-columns:1fr!important;
    row-gap:3px!important;
  }
  body:not(.dragon-studio-mode) .study-page .progress-panel .progress-item:nth-of-type(4)>div #levelTextSmall{
    text-align:left!important;
    font-size:13px!important;
  }
}

/* Compact Shuffle + Term/Definition segmented control. */
body:not(.dragon-studio-mode) .study-page .shuffle-flash-row{
  display:grid!important;
  grid-template-columns:54px minmax(0,1fr)!important;
  align-items:center!important;
  gap:10px!important;
  width:100%!important;
}
body:not(.dragon-studio-mode) .study-page .shuffle-flash-row .shuffle-deck-card{
  position:relative!important;
  width:54px!important;
  min-width:54px!important;
  height:50px!important;
  min-height:50px!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,rgba(16,31,66,.94),rgba(8,21,49,.96))!important;
  border:1px solid rgba(137,158,220,.28)!important;
  box-shadow:0 12px 24px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
body:not(.dragon-studio-mode) .study-page .shuffle-flash-row .shuffle-deck-card .quick-action-icon{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  margin:0!important;
  border-radius:12px!important;
}
body:not(.dragon-studio-mode) .study-page .shuffle-flash-row .shuffle-deck-card .quick-action-icon img{
  width:20px!important;
  height:20px!important;
}
body:not(.dragon-studio-mode) .study-page .shuffle-deck-label{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  white-space:nowrap!important;
}
body:not(.dragon-studio-mode) .study-page .shuffle-deck-card[data-tooltip]:hover:after,
body:not(.dragon-studio-mode) .study-page .shuffle-deck-card[data-tooltip]:focus-visible:after{
  content:attr(data-tooltip)!important;
  position:absolute!important;
  left:50%!important;
  bottom:calc(100% + 8px)!important;
  transform:translateX(-50%)!important;
  padding:7px 10px!important;
  border-radius:10px!important;
  background:rgba(8,16,38,.96)!important;
  border:1px solid rgba(155,145,255,.38)!important;
  color:#f7f8ff!important;
  box-shadow:0 12px 24px rgba(0,0,0,.28)!important;
  font-size:12px!important;
  font-weight:850!important;
  line-height:1!important;
  white-space:nowrap!important;
  z-index:8!important;
  pointer-events:none!important;
}
body:not(.dragon-studio-mode) .study-page .flash-side-toggle{
  height:50px!important;
  min-height:50px!important;
  width:100%!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:0!important;
  align-items:stretch!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:999px!important;
  background:#ffffff!important;
  border:2px solid rgba(214,211,235,.95)!important;
  box-shadow:0 10px 22px rgba(3,10,30,.12)!important;
}
body:not(.dragon-studio-mode) .study-page .flash-side-option{
  height:100%!important;
  min-height:0!important;
  min-width:0!important;
  padding:0 12px!important;
  border:0!important;
  border-radius:0!important;
  background:#ffffff!important;
  color:#20284f!important;
  font-size:15px!important;
  font-weight:950!important;
  line-height:1!important;
  cursor:pointer!important;
  box-shadow:none!important;
}
body:not(.dragon-studio-mode) .study-page .flash-side-option.active{
  background:linear-gradient(180deg,#765df6 0%,#5847dc 100%)!important;
  color:#ffffff!important;
  border:0!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16)!important;
}
body:not(.dragon-studio-mode) .study-page .flash-side-option:first-child{
  border-radius:999px 0 0 999px!important;
}
body:not(.dragon-studio-mode) .study-page .flash-side-option:last-child{
  border-radius:0 999px 999px 0!important;
}
@media(max-width:760px){
  body:not(.dragon-studio-mode) .study-page .shuffle-flash-row{
    grid-template-columns:54px minmax(0,1fr)!important;
  }
}

/* Keep Study Setting filter buttons on one desktop row. */
body:not(.dragon-studio-mode) .study-page #setMenu .range-type-buttons{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:10px!important;
  align-items:stretch!important;
}
body:not(.dragon-studio-mode) .study-page #setMenu .range-type-btn{
  min-width:0!important;
  height:48px!important;
  min-height:48px!important;
  padding:0 10px!important;
  font-size:13.5px!important;
  line-height:1.05!important;
  white-space:nowrap!important;
}
@media(max-width:760px){
  body:not(.dragon-studio-mode) .study-page #setMenu .range-type-buttons{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:10px!important;
  }
  body:not(.dragon-studio-mode) .study-page #setMenu .range-type-btn{
    flex:1 1 calc(50% - 10px)!important;
  }
}

/* Unified dark left sidebar system. */
body:not(.dragon-studio-mode) .study-page .side-col{
  gap:16px!important;
}
body:not(.dragon-studio-mode) .study-page .progress-panel,
body:not(.dragon-studio-mode) .study-page .review-panel{
  border-radius:22px!important;
  background:
    radial-gradient(circle at 14% 0%,rgba(126,105,255,.16),transparent 32%),
    linear-gradient(180deg,rgba(14,28,64,.96),rgba(7,18,44,.98))!important;
  border:1px solid rgba(139,158,225,.34)!important;
  box-shadow:0 18px 38px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
body:not(.dragon-studio-mode) .study-page .progress-panel{
  padding:18px 20px!important;
  min-height:0!important;
}
body:not(.dragon-studio-mode) .study-page .progress-panel h3{
  margin:0 0 14px!important;
  color:#ffe9a7!important;
  font-size:20px!important;
  font-weight:950!important;
  line-height:1.1!important;
}
body:not(.dragon-studio-mode) .study-page .progress-item{
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr)!important;
  align-items:center!important;
  gap:12px!important;
  min-height:52px!important;
  padding:10px 0!important;
  border-bottom:1px solid rgba(139,158,225,.22)!important;
}
body:not(.dragon-studio-mode) .study-page .progress-item:last-child{
  border-bottom:0!important;
  padding-bottom:2px!important;
}
body:not(.dragon-studio-mode) .study-page .progress-item i{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  border-radius:14px!important;
  display:grid!important;
  place-items:center!important;
  background:linear-gradient(180deg,rgba(121,93,255,.30),rgba(43,57,128,.28))!important;
  border:1px solid rgba(169,181,255,.25)!important;
}
body:not(.dragon-studio-mode) .study-page .progress-item:nth-of-type(2) i{
  background:linear-gradient(180deg,rgba(168,106,255,.30),rgba(51,54,134,.24))!important;
}
body:not(.dragon-studio-mode) .study-page .progress-item:nth-of-type(3) i{
  background:linear-gradient(180deg,rgba(255,203,89,.27),rgba(89,66,25,.20))!important;
}
body:not(.dragon-studio-mode) .study-page .progress-item i img{
  width:22px!important;
  height:22px!important;
  object-fit:contain!important;
}
body:not(.dragon-studio-mode) .study-page .progress-item>div{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:baseline!important;
  gap:10px!important;
  min-width:0!important;
}
body:not(.dragon-studio-mode) .study-page .progress-item span{
  color:#c9c8ff!important;
  font-size:13px!important;
  font-weight:850!important;
  white-space:nowrap!important;
}
body:not(.dragon-studio-mode) .study-page .progress-item b,
body:not(.dragon-studio-mode) .study-page .progress-item #levelTextSmall{
  margin:0!important;
  color:#ffffff!important;
  font-size:15px!important;
  font-weight:950!important;
  text-align:right!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
body:not(.dragon-studio-mode) .study-page .progress-item .link-btn{
  grid-column:1/-1!important;
  justify-self:start!important;
  margin:5px 0 0!important;
  color:#a989ff!important;
  font-size:12px!important;
  font-weight:850!important;
  background:transparent!important;
  border:0!important;
  padding:0!important;
  text-decoration:underline!important;
}
body:not(.dragon-studio-mode) .study-page .shuffle-flash-row{
  display:grid!important;
  grid-template-columns:54px minmax(0,1fr)!important;
  gap:10px!important;
  align-items:center!important;
  width:100%!important;
}
body:not(.dragon-studio-mode) .study-page .shuffle-flash-row .shuffle-deck-card{
  width:54px!important;
  min-width:54px!important;
  height:52px!important;
  min-height:52px!important;
  padding:0!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:18px!important;
  background:
    radial-gradient(circle at 30% 18%,rgba(126,105,255,.18),transparent 40%),
    linear-gradient(180deg,rgba(14,28,64,.96),rgba(7,18,44,.98))!important;
  border:1px solid rgba(139,158,225,.34)!important;
  box-shadow:0 14px 28px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
body:not(.dragon-studio-mode) .study-page .shuffle-flash-row .quick-action-icon{
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  margin:0!important;
  border-radius:14px!important;
}
body:not(.dragon-studio-mode) .study-page .shuffle-deck-label{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  white-space:nowrap!important;
}
body:not(.dragon-studio-mode) .study-page .flash-side-toggle{
  height:52px!important;
  min-height:52px!important;
  width:100%!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:4px!important;
  padding:5px!important;
  overflow:hidden!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(10,23,55,.98),rgba(5,14,34,.98))!important;
  border:1px solid rgba(139,158,225,.42)!important;
  box-shadow:0 14px 28px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
body:not(.dragon-studio-mode) .study-page .flash-side-option{
  height:100%!important;
  min-width:0!important;
  padding:0 12px!important;
  border:0!important;
  border-radius:999px!important;
  background:transparent!important;
  color:#c9c8ff!important;
  font-size:14px!important;
  font-weight:950!important;
  line-height:1!important;
  box-shadow:none!important;
}
body:not(.dragon-studio-mode) .study-page .flash-side-option.active{
  background:linear-gradient(180deg,#8a73ff 0%,#5d4eff 100%)!important;
  color:#ffffff!important;
  box-shadow:0 8px 18px rgba(95,78,255,.28),inset 0 1px 0 rgba(255,255,255,.16)!important;
}

/* Compact shared main-stage sizing for study and completion summary states. */
body:not(.dragon-studio-mode) .study-page .study-center-col{
  align-self:start!important;
}
body:not(.dragon-studio-mode) .study-page .main-study-card{
  width:100%!important;
  min-height:520px!important;
  height:auto!important;
  border-radius:22px!important;
  padding:24px 32px!important;
}
body:not(.dragon-studio-mode) .study-page .main-study-card:has(.activity-summary-card){
  min-height:520px!important;
  padding:28px 34px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
body:not(.dragon-studio-mode) .study-page .activity-summary-card{
  width:min(560px,100%)!important;
  max-width:560px!important;
  margin:0 auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
  text-align:center!important;
}
body:not(.dragon-studio-mode) .study-page .summary-success-mark{
  width:64px!important;
  height:64px!important;
  margin:0 auto 4px!important;
}
body:not(.dragon-studio-mode) .study-page .summary-success-mark span{
  font-size:30px!important;
}
body:not(.dragon-studio-mode) .study-page .activity-summary-card h2{
  margin:0!important;
  font-size:clamp(34px,3.2vw,46px)!important;
  line-height:1.04!important;
}
body:not(.dragon-studio-mode) .study-page .summary-stat-list{
  width:min(330px,100%)!important;
  gap:8px!important;
  margin:4px auto 8px!important;
  padding:16px 0!important;
  font-size:17px!important;
}
body:not(.dragon-studio-mode) .study-page .summary-stat-list p{
  grid-template-columns:28px auto 1fr!important;
  gap:8px!important;
}
body:not(.dragon-studio-mode) .study-page .summary-stat-list i{
  width:24px!important;
  height:24px!important;
}
body:not(.dragon-studio-mode) .study-page .summary-stat-list i img{
  width:14px!important;
  height:14px!important;
}
body:not(.dragon-studio-mode) .study-page .summary-actions{
  width:min(520px,100%)!important;
  gap:12px 14px!important;
}
body:not(.dragon-studio-mode) .study-page .summary-actions button{
  min-height:58px!important;
  border-radius:16px!important;
  padding:0 18px!important;
  font-size:15px!important;
}
body:not(.dragon-studio-mode) .study-page .summary-actions button i{
  width:26px!important;
  height:26px!important;
  min-width:26px!important;
}
body:not(.dragon-studio-mode) .study-page .summary-actions button i img{
  width:22px!important;
  height:22px!important;
}
@media(max-width:768px){
  body:not(.dragon-studio-mode) .study-page .main-study-card,
  body:not(.dragon-studio-mode) .study-page .main-study-card:has(.activity-summary-card){
    min-height:auto!important;
    padding:22px 16px!important;
  }
}

/* Profile Learning Snapshot and Detailed Progress Report refresh. */
.profile-page .learning-snapshot-card{
  position:relative!important;
  overflow:hidden!important;
  padding:22px!important;
  border-radius:24px!important;
  background:
    radial-gradient(circle at 8% 0%,rgba(126,105,255,.24),transparent 30%),
    radial-gradient(circle at 92% 10%,rgba(255,213,120,.10),transparent 22%),
    linear-gradient(180deg,rgba(12,25,58,.98),rgba(6,15,37,.98))!important;
  border:1px solid rgba(142,158,238,.34)!important;
  box-shadow:0 22px 48px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.07)!important;
  color:#f7f8ff!important;
}
.profile-page .learning-snapshot-card .profile-card-heading{
  margin-bottom:16px!important;
}
.profile-page .learning-snapshot-card .profile-card-heading h3{
  color:#ffe49a!important;
  font-size:22px!important;
  font-weight:950!important;
}
.profile-page .learning-snapshot-card .profile-card-heading h3 img{
  width:26px!important;
  height:26px!important;
}
.profile-page .learning-snapshot-card .profile-card-heading button{
  background:linear-gradient(180deg,#8a73ff,#5d4eff)!important;
  color:#fff!important;
  box-shadow:0 10px 22px rgba(95,78,255,.26)!important;
}
.profile-page .learning-snapshot-card .snapshot-metric-grid{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:10px!important;
}
.profile-page .learning-snapshot-card .dash-stat-tile{
  min-height:82px!important;
  padding:12px!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.065)!important;
  border:1px solid rgba(150,165,245,.20)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.profile-page .learning-snapshot-card .dash-stat-tile img{
  width:34px!important;
  height:34px!important;
}
.profile-page .learning-snapshot-card .dash-stat-tile span{
  color:#c9d1f4!important;
  font-size:11px!important;
}
.profile-page .learning-snapshot-card .dash-stat-tile b{
  color:#ffffff!important;
  font-size:25px!important;
}
.snapshot-message-bar{
  margin-top:14px!important;
  min-height:86px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 104px!important;
  align-items:center!important;
  gap:16px!important;
  padding:14px 18px!important;
  border-radius:20px!important;
  background:linear-gradient(90deg,rgba(115,92,255,.24),rgba(255,255,255,.06))!important;
  border:1px solid rgba(158,170,246,.22)!important;
}
.snapshot-message-bar b,
.snapshot-message-bar span{
  display:block!important;
}
.snapshot-message-bar b{
  color:#ffffff!important;
  font-size:17px!important;
  line-height:1.25!important;
}
.snapshot-message-bar span{
  margin-top:4px!important;
  color:#c9d1f4!important;
  font-size:13px!important;
  font-weight:700!important;
}
.snapshot-message-bar img{
  width:96px!important;
  height:96px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.24))!important;
}
.snapshot-insight-grid{
  margin-top:14px!important;
  display:grid!important;
  grid-template-columns:.85fr 1.25fr .9fr!important;
  gap:12px!important;
}
.snapshot-mini-panel{
  min-height:126px!important;
  padding:14px!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(150,165,245,.18)!important;
}
.snapshot-mini-panel h4{
  margin:0 0 10px!important;
  color:#ffe49a!important;
  font-size:14px!important;
  font-weight:950!important;
}
.snapshot-mini-panel p{
  margin:9px 0 0!important;
  color:#c9d1f4!important;
  font-size:12px!important;
  line-height:1.35!important;
}
.snapshot-mini-panel p b{
  color:#fff!important;
}
.snapshot-health-meter,
.report-health-meter{
  height:10px!important;
  border-radius:999px!important;
  overflow:hidden!important;
  background:rgba(255,255,255,.12)!important;
  border:1px solid rgba(166,178,248,.18)!important;
}
.snapshot-health-meter i,
.report-health-meter i{
  display:block!important;
  height:100%!important;
  border-radius:inherit!important;
  background:linear-gradient(90deg,#8a73ff,#ffd76e)!important;
}
.snapshot-set-list{
  display:grid!important;
  gap:8px!important;
}
.snapshot-set-row{
  display:grid!important;
  grid-template-columns:54px 44px minmax(0,1fr)!important;
  gap:8px!important;
  align-items:center!important;
  color:#f7f8ff!important;
  font-size:12px!important;
  font-weight:850!important;
}
.snapshot-set-row i{
  display:block!important;
  height:8px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.12)!important;
  overflow:hidden!important;
}
.snapshot-set-row em{
  display:block!important;
  height:100%!important;
  border-radius:inherit!important;
  background:linear-gradient(90deg,#725cff,#b9a9ff)!important;
}
.snapshot-week-chart{
  height:84px!important;
  display:grid!important;
  grid-template-columns:repeat(7,1fr)!important;
  align-items:end!important;
  gap:6px!important;
}
.snapshot-week-bar{
  display:grid!important;
  align-items:end!important;
  gap:5px!important;
  height:100%!important;
  text-align:center!important;
  color:#c9d1f4!important;
  font-size:10px!important;
  font-weight:850!important;
}
.snapshot-week-bar i{
  display:block!important;
  width:100%!important;
  min-height:6px!important;
  border-radius:999px 999px 4px 4px!important;
  background:linear-gradient(180deg,#ffd76e,#8a73ff)!important;
}

#progressModal.modal.wide{
  width:min(1120px,calc(100vw - 48px))!important;
  max-height:calc(100vh - 48px)!important;
  padding:28px!important;
  border-radius:30px!important;
  color:#f7f8ff!important;
  background:
    radial-gradient(circle at 10% 4%,rgba(126,105,255,.24),transparent 30%),
    radial-gradient(circle at 90% 8%,rgba(78,125,255,.16),transparent 28%),
    linear-gradient(180deg,rgba(10,22,52,.98),rgba(5,13,32,.98))!important;
  border:1px solid rgba(145,160,240,.30)!important;
  box-shadow:0 32px 72px rgba(0,0,0,.50)!important;
}
.progress-report-header{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:18px!important;
  margin-bottom:16px!important;
}
.progress-report-logo{
  width:174px!important;
  height:auto!important;
  object-fit:contain!important;
  flex:0 0 auto!important;
}
.report-kicker{
  display:block!important;
  margin-bottom:5px!important;
  color:#a997ff!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
}
#progressModal h2{
  margin:0!important;
  color:#ffffff!important;
  font-size:34px!important;
  line-height:1.05!important;
  font-weight:950!important;
}
.report-print-meta{
  display:block!important;
  margin-top:6px!important;
  color:#c9d1f4!important;
  font-size:13px!important;
  font-weight:800!important;
}
.progress-report-actions{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
}
.print-report-btn{
  height:40px!important;
  padding:0 16px!important;
  border:1px solid rgba(171,181,255,.30)!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#8a73ff,#5d4eff)!important;
  color:#fff!important;
  font-weight:900!important;
  cursor:pointer!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  box-shadow:0 12px 24px rgba(95,78,255,.28)!important;
}
.print-report-btn img{
  width:17px!important;
  height:17px!important;
  filter:brightness(0) invert(1)!important;
}
#progressModal .report-close{
  position:static!important;
  width:40px!important;
  height:40px!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(171,181,255,.24)!important;
  color:#fff!important;
  font-size:26px!important;
  line-height:1!important;
}
#parentSummary.summary-card{
  margin:0 0 14px!important;
  padding:16px 18px!important;
  border-radius:20px!important;
  background:rgba(255,255,255,.07)!important;
  border:1px solid rgba(150,165,245,.20)!important;
  color:#c9d1f4!important;
}
#parentSummary span,
#parentSummary b,
#parentSummary em,
#parentSummary .report-summary-copy{
  display:block!important;
}
#parentSummary span{
  color:#ffe49a!important;
  font-size:12px!important;
  font-weight:950!important;
  text-transform:uppercase!important;
}
#parentSummary b{
  margin-top:4px!important;
  color:#fff!important;
  font-size:24px!important;
  line-height:1.05!important;
}
#parentSummary em{
  margin-top:4px!important;
  color:#aeb8f5!important;
  font-style:normal!important;
  font-weight:800!important;
}
#parentSummary .report-summary-copy{
  margin:8px 0 0!important;
  color:#d9defc!important;
  font-size:14px!important;
  line-height:1.4!important;
}
.analytics-report.revised-report{
  gap:16px!important;
}
.report-page{
  display:grid!important;
  gap:14px!important;
}
.report-page-label{
  justify-self:end!important;
  color:#8f9bea!important;
  font-size:11px!important;
  font-weight:850!important;
}
.report-section h3,
#progressModal .analytics-card h3{
  margin:0 0 12px!important;
  color:#ffe49a!important;
  font-size:18px!important;
  font-weight:950!important;
}
#progressModal .analytics-metrics{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:10px!important;
}
#progressModal .analytics-metric-card,
#progressModal .analytics-card,
#progressModal .analytics-game-card{
  background:rgba(255,255,255,.065)!important;
  border:1px solid rgba(150,165,245,.20)!important;
  border-radius:18px!important;
  color:#f7f8ff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
}
#progressModal .analytics-metric-card{
  display:block!important;
  min-height:92px!important;
  padding:14px!important;
}
#progressModal .analytics-metric-card span,
#progressModal .analytics-metric-card small,
#progressModal .analytics-empty,
#progressModal .analytics-card p,
#progressModal .analytics-card small{
  color:#c9d1f4!important;
}
#progressModal .analytics-metric-card b,
#progressModal .analytics-game-card b{
  color:#fff!important;
}
#progressModal .analytics-card{
  padding:18px!important;
}
#progressModal .memory-path-card{
  background:linear-gradient(180deg,rgba(106,84,255,.18),rgba(255,255,255,.055))!important;
  border-color:rgba(164,151,255,.34)!important;
}
#progressModal .memory-path-card>p{
  margin:-4px 0 14px!important;
  color:#c9d1f4!important;
  font-size:13px!important;
  font-weight:800!important;
}
#progressModal .memory-path-report{
  grid-template-columns:repeat(8,minmax(0,1fr))!important;
  gap:8px!important;
}
#progressModal .memory-path-report div{
  background:rgba(255,255,255,.07)!important;
  border:1px solid rgba(170,180,255,.22)!important;
  border-radius:16px!important;
  padding:13px 6px!important;
}
#progressModal .memory-path-report b{
  color:#fff!important;
  font-size:24px!important;
}
#progressModal .memory-path-report span{
  color:#c9d1f4!important;
}
#progressModal .memory-path-report i{
  color:#ffe49a!important;
}
#progressModal .analytics-grid-2{
  grid-template-columns:1fr 1fr!important;
  gap:14px!important;
}
#progressModal .analytics-set-list{
  max-height:230px!important;
  overflow:auto!important;
  padding-right:4px!important;
}
#progressModal .analytics-set-row{
  color:#f7f8ff!important;
  border-color:rgba(150,165,245,.18)!important;
  background:rgba(255,255,255,.045)!important;
}
#progressModal .analytics-set-row div{
  background:rgba(255,255,255,.12)!important;
}
#progressModal .analytics-set-row i{
  background:linear-gradient(90deg,#8a73ff,#ffe49a)!important;
}
#progressModal .analytics-chip-list span{
  background:rgba(255,255,255,.07)!important;
  border-color:rgba(150,165,245,.22)!important;
  color:#fff!important;
}
#progressModal .analytics-chip-list span small{
  color:#c9d1f4!important;
}
#progressModal .weekly-chart{
  min-height:150px!important;
}
#progressModal .weekly-bar div{
  background:rgba(255,255,255,.10)!important;
}
#progressModal .weekly-bar i{
  background:linear-gradient(180deg,#ffe49a,#8a73ff)!important;
}
#progressModal .weekly-bar b,
#progressModal .weekly-bar span,
#progressModal .weekly-bar small,
#progressModal .analytics-game-card span{
  color:#c9d1f4!important;
}
#progressModal .analytics-link-btn{
  background:linear-gradient(180deg,#8a73ff,#5d4eff)!important;
  color:#fff!important;
}
#progressModal .teacher-parent-card{
  background:linear-gradient(90deg,rgba(255,228,154,.10),rgba(126,105,255,.12))!important;
}
@media(max-width:1040px){
  .profile-page .learning-snapshot-card .snapshot-metric-grid,
  #progressModal .analytics-metrics{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  .snapshot-insight-grid,
  #progressModal .analytics-grid-2{
    grid-template-columns:1fr!important;
  }
  #progressModal .memory-path-report{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  #progressModal .memory-path-report i{
    display:none!important;
  }
}
@media(max-width:680px){
  .profile-page .learning-snapshot-card .snapshot-metric-grid,
  #progressModal .analytics-metrics{
    grid-template-columns:1fr 1fr!important;
  }
  .snapshot-message-bar{
    grid-template-columns:1fr!important;
  }
  .snapshot-message-bar img{
    justify-self:center!important;
  }
  .progress-report-header{
    flex-direction:column!important;
  }
  #progressModal.modal.wide{
    width:calc(100vw - 24px)!important;
    padding:18px!important;
  }
  #progressModal .memory-path-report{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media print{
  @page{
    size:letter;
    margin:.45in;
  }
  body{
    background:#fff!important;
  }
  body *{
    visibility:hidden!important;
  }
  #progressModal,
  #progressModal *{
    visibility:visible!important;
  }
  .modal-backdrop,
  .topbar,
  .progress-report-actions,
  .no-print,
  #progressModal img[src*="dragon"],
  #progressModal img[src*="Dragon"],
  #progressModal img[src*="mascot"],
  #progressModal .dragon-mascot,
  #progressModal .report-dragon,
  #progressModal .decorative-dragon,
  #progressModal .teacher-snapshot-dragon,
  #progressModal .snapshot-message-bar img{
    display:none!important;
  }
  .progress-report-header{
    display:grid!important;
    grid-template-columns:180px minmax(0,1fr)!important;
    align-items:center!important;
    gap:18px!important;
    margin:0 0 18px!important;
    padding-bottom:12px!important;
    border-bottom:1px solid #d8dcf0!important;
  }
  .progress-report-logo{
    display:block!important;
    width:170px!important;
    max-height:54px!important;
    object-fit:contain!important;
  }
  .report-print-meta{
    color:#3d466c!important;
  }
  #progressModal.modal.wide{
    position:static!important;
    transform:none!important;
    width:100%!important;
    max-width:none!important;
    max-height:none!important;
    overflow:visible!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:#fff!important;
    color:#11183f!important;
  }
  #progressModal h2,
  #parentSummary b,
  #progressModal .analytics-metric-card b,
  #progressModal .memory-path-report b,
  #progressModal .analytics-game-card b,
  #progressModal .analytics-card h3,
  .report-section h3{
    color:#11183f!important;
  }
  .report-kicker,
  #parentSummary span{
    color:#5d4eff!important;
  }
  #parentSummary.summary-card,
  #progressModal .analytics-metric-card,
  #progressModal .analytics-card,
  #progressModal .analytics-game-card,
  #progressModal .memory-path-report div{
    background:#fff!important;
    border:1px solid #d8dcf0!important;
    box-shadow:none!important;
    color:#11183f!important;
    break-inside:avoid!important;
    page-break-inside:avoid!important;
  }
  #parentSummary .report-summary-copy,
  #parentSummary em,
  #progressModal .analytics-card p,
  #progressModal .analytics-card small,
  #progressModal .analytics-empty,
  #progressModal .analytics-metric-card span,
  #progressModal .analytics-metric-card small,
  #progressModal .memory-path-report span,
  #progressModal .weekly-bar b,
  #progressModal .weekly-bar span,
  #progressModal .weekly-bar small,
  #progressModal .analytics-game-card span{
    color:#3d466c!important;
  }
  .report-page{
    break-inside:avoid!important;
    page-break-inside:avoid!important;
  }
  .report-page-one{
    break-after:page!important;
    page-break-after:always!important;
  }
  #progressModal .analytics-set-list{
    max-height:none!important;
    overflow:visible!important;
  }
}

/* Final Study Setting compact filter-row pass. */
#setMenu .study-setting-modal,
#setMenu .range-popover-panel{
  width:min(900px,calc(100vw - 56px))!important;
  padding:24px 30px 24px!important;
  gap:12px!important;
}
#setMenu .range-popover-header{
  min-height:50px!important;
  gap:14px!important;
}
#setMenu .range-popover-header::before{
  width:48px!important;
  height:48px!important;
  font-size:22px!important;
}
#setMenu .range-popover-header>div{
  min-height:48px!important;
}
#setMenu .range-popover-header h3{
  margin-bottom:4px!important;
  font-size:31px!important;
}
#setMenu .range-popover-header p{
  font-size:15px!important;
}
#setMenu .range-close{
  width:42px!important;
  height:42px!important;
  min-height:42px!important;
  font-size:25px!important;
}
#setMenu .range-type-buttons{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:8px!important;
  align-items:stretch!important;
  margin:0!important;
}
#setMenu .range-type-btn{
  min-width:0!important;
  width:100%!important;
  height:40px!important;
  min-height:40px!important;
  padding:0 8px!important;
  border-radius:13px!important;
  font-size:13px!important;
  line-height:1.05!important;
  white-space:nowrap!important;
}
#setMenu .range-current-card{
  min-height:98px!important;
  padding:16px 20px!important;
}
#setMenu .range-current-card::before{
  width:52px!important;
  height:52px!important;
  font-size:27px!important;
}
#setMenu .range-current-card b{
  font-size:22px!important;
}
#setMenu .range-current-card small{
  font-size:15px!important;
}
#setMenu .range-current-card strong{
  font-size:25px!important;
}
#setMenu .range-jump-section{
  gap:8px!important;
}
#setMenu .range-jump-section>b{
  font-size:17px!important;
}
#setMenu .range-jump-list{
  max-height:174px!important;
}
#setMenu .range-option{
  height:58px!important;
  min-height:58px!important;
  padding:0 18px!important;
  font-size:15px!important;
}
#setMenu .range-actions{
  padding-top:12px!important;
  gap:14px!important;
}
#setMenu .range-actions button{
  height:46px!important;
  min-height:46px!important;
  min-width:168px!important;
  border-radius:15px!important;
}
@media(max-width:740px){
  #setMenu .study-setting-modal,
  #setMenu .range-popover-panel{
    width:calc(100vw - 28px)!important;
    padding:18px!important;
  }
  #setMenu .range-type-buttons{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:8px!important;
  }
  #setMenu .range-type-btn{
    flex:1 1 calc(50% - 8px)!important;
    height:40px!important;
    min-height:40px!important;
  }
}

/* Study Setting range-option UI structure. */
#setMenu .setting-filter-section,
#setMenu .study-range-section{
  position:relative!important;
  z-index:1!important;
  display:grid!important;
  gap:7px!important;
}
#setMenu .setting-section-label{
  display:block!important;
  color:#ffe49a!important;
  font-size:12px!important;
  font-weight:950!important;
  letter-spacing:.02em!important;
}
#setMenu .range-filter-helper,
#setMenu .range-selection-note{
  margin:0!important;
  color:#c9d1f4!important;
  font-size:12px!important;
  font-weight:750!important;
  line-height:1.25!important;
}
#setMenu .study-range-buttons{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
}
#setMenu .study-range-btn{
  height:36px!important;
  min-height:36px!important;
  min-width:0!important;
  border-radius:12px!important;
  padding:0 10px!important;
  border:1px solid rgba(170,180,240,.24)!important;
  background:rgba(255,255,255,.07)!important;
  color:#f2f4ff!important;
  font-size:12.5px!important;
  font-weight:900!important;
  white-space:nowrap!important;
  cursor:pointer!important;
}
#setMenu .study-range-btn.active{
  border-color:rgba(198,184,255,.80)!important;
  background:linear-gradient(180deg,#8a73ff 0%,#5d4eff 100%)!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(95,78,255,.24)!important;
}
#setMenu .selected-set-controls{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
}
#setMenu .selected-set-controls label{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  align-items:center!important;
  gap:8px!important;
  min-height:38px!important;
  padding:6px 10px!important;
  border-radius:12px!important;
  border:1px solid rgba(170,180,240,.20)!important;
  background:rgba(255,255,255,.055)!important;
  color:#c9d1f4!important;
  font-size:12px!important;
  font-weight:850!important;
}
#setMenu .selected-set-controls input{
  width:100%!important;
  height:28px!important;
  min-width:0!important;
  border:1px solid rgba(170,180,240,.26)!important;
  border-radius:9px!important;
  background:rgba(255,255,255,.10)!important;
  color:#fff!important;
  padding:0 8px!important;
  font-weight:900!important;
}
#setMenu .range-current-card{
  align-items:center!important;
}
#setMenu .range-current-card .range-selection-note{
  grid-column:1 / -1!important;
}
#setMenu .range-jump-section:empty{
  display:none!important;
}
.question-session-note{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:fit-content!important;
  max-width:100%!important;
  margin:8px auto 0!important;
  padding:6px 12px!important;
  border-radius:999px!important;
  border:1px solid rgba(126,105,255,.34)!important;
  background:rgba(12,22,52,.08)!important;
  color:#4f5275!important;
  font-size:12.5px!important;
  font-weight:800!important;
  line-height:1.15!important;
  white-space:nowrap!important;
}
.game-range-status{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-width:360px!important;
  max-width:680px!important;
  margin:18px auto 22px!important;
  padding:12px 22px!important;
  border-radius:999px!important;
  border:1px solid rgba(170,155,255,.55)!important;
  background:rgba(18,26,66,.92)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.08)!important;
  color:#fff!important;
  font-size:15px!important;
  font-weight:800!important;
  line-height:1.2!important;
  text-align:center!important;
  white-space:nowrap!important;
}
.game-range-status span{
  color:#fff!important;
  font-size:15px!important;
  font-weight:900!important;
}
.game-range-status b{
  color:#f4f1ff!important;
  font-size:15px!important;
  font-weight:800!important;
}
.he-games-select-page .game-range-status b{
  color:#ffffff!important;
  opacity:1!important;
  text-shadow:0 1px 8px rgba(255,255,255,.18)!important;
}
.study-pool-tooltip-wrap{
  position:relative!important;
  cursor:help!important;
}
.study-pool-tooltip-wrap::after{
  content:"Change study pool under Flashcards > Study Setting."!important;
  position:absolute!important;
  left:50%!important;
  bottom:calc(100% + 10px)!important;
  transform:translate(-50%,4px)!important;
  z-index:9999!important;
  width:max-content!important;
  max-width:min(360px,calc(100vw - 32px))!important;
  padding:10px 14px!important;
  border-radius:12px!important;
  border:1px solid rgba(150,125,255,.45)!important;
  background:rgba(12,18,48,.96)!important;
  color:#ffffff!important;
  box-shadow:0 10px 28px rgba(0,0,0,.35),0 0 18px rgba(140,105,255,.20)!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:1.25!important;
  text-align:center!important;
  white-space:nowrap!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease!important;
}
.study-pool-tooltip-wrap::before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  bottom:calc(100% + 4px)!important;
  transform:translateX(-50%)!important;
  z-index:9999!important;
  border:6px solid transparent!important;
  border-top-color:rgba(12,18,48,.96)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:opacity .18s ease,visibility .18s ease!important;
}
.study-pool-tooltip-wrap:hover::after,
.study-pool-tooltip-wrap:focus-visible::after,
.study-pool-tooltip-wrap:hover::before,
.study-pool-tooltip-wrap:focus-visible::before{
  opacity:1!important;
  visibility:visible!important;
}
.study-pool-tooltip-wrap:hover::after,
.study-pool-tooltip-wrap:focus-visible::after{
  transform:translate(-50%,0)!important;
}
.game-practice-controls .study-pool-tooltip-wrap::after{
  left:auto!important;
  right:0!important;
  transform:translateY(4px)!important;
}
.game-practice-controls .study-pool-tooltip-wrap::before{
  left:auto!important;
  right:18px!important;
  transform:none!important;
}
.game-practice-controls .study-pool-tooltip-wrap:hover::after,
.game-practice-controls .study-pool-tooltip-wrap:focus-visible::after{
  transform:translateY(0)!important;
}
.he-games-select-page .he-games-hero-block{
  margin-bottom:6px!important;
  padding-bottom:0!important;
}
.he-games-select-page .he-games-grid{
  margin-top:0!important;
}
@media(max-width:740px){
  #setMenu .study-range-buttons,
  #setMenu .selected-set-controls{
    grid-template-columns:1fr!important;
  }
  .question-session-note,
  .game-range-status{
    min-width:0!important;
    width:calc(100% - 32px)!important;
    max-width:100%!important;
    border-radius:18px!important;
    padding:12px 14px!important;
    font-size:14px!important;
    flex-wrap:wrap!important;
    white-space:normal!important;
    text-align:center!important;
  }
  .game-range-status span,
  .game-range-status b{
    font-size:14px!important;
  }
}

/* Selected Sets multi-select pass. */
#setMenu .study-range-section{
  padding:10px 12px!important;
  border:1px solid rgba(170,180,240,.26)!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.045))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
}
#setMenu .study-range-btn{
  height:42px!important;
  min-height:42px!important;
  border-radius:13px!important;
  border-color:rgba(184,190,255,.34)!important;
  background:rgba(8,18,44,.72)!important;
  color:#edeaff!important;
  opacity:1!important;
  text-shadow:0 1px 0 rgba(0,0,0,.18)!important;
}
#setMenu .study-range-btn:not(.active):hover{
  border-color:rgba(190,174,255,.58)!important;
  background:rgba(22,34,72,.86)!important;
  color:#fff!important;
}
#setMenu .study-range-btn.active{
  background:linear-gradient(180deg,#8f79ff 0%,#5d4eff 100%)!important;
  color:#fff!important;
}
#setMenu .selected-set-panel{
  display:grid!important;
  gap:9px!important;
  margin-top:2px!important;
}
#setMenu .selected-set-toolbar{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
}
#setMenu .selected-set-toolbar button{
  min-height:30px!important;
  padding:0 12px!important;
  border-radius:999px!important;
  border:1px solid rgba(184,190,255,.32)!important;
  background:rgba(8,18,44,.74)!important;
  color:#ebe8ff!important;
  font-size:11.5px!important;
  font-weight:900!important;
  cursor:pointer!important;
}
#setMenu .selected-set-toolbar button:hover{
  border-color:rgba(190,174,255,.62)!important;
  background:rgba(94,76,255,.22)!important;
  color:#fff!important;
  box-shadow:0 0 14px rgba(116,92,255,.18)!important;
}
#setMenu .selected-set-summary{
  margin:0!important;
  padding:8px 11px!important;
  border-radius:13px!important;
  border:1px solid rgba(170,180,240,.22)!important;
  background:rgba(255,255,255,.055)!important;
  color:#f7f8ff!important;
  font-size:12.5px!important;
  font-weight:900!important;
  line-height:1.2!important;
}
#setMenu .selected-set-summary.is-empty{
  color:#ffe49a!important;
  border-color:rgba(255,228,154,.32)!important;
}
#setMenu .selected-set-list{
  display:grid!important;
  max-height:168px!important;
  overflow-y:auto!important;
  border:1px solid rgba(170,180,240,.24)!important;
  border-radius:16px!important;
  background:rgba(4,12,30,.54)!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(152,132,255,.72) rgba(255,255,255,.08)!important;
}
#setMenu .selected-set-list::-webkit-scrollbar{
  width:9px!important;
}
#setMenu .selected-set-list::-webkit-scrollbar-track{
  background:rgba(255,255,255,.06)!important;
  border-radius:999px!important;
}
#setMenu .selected-set-list::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#9b84ff,#5d4eff)!important;
  border-radius:999px!important;
}
#setMenu .selected-set-row{
  display:grid!important;
  grid-template-columns:28px minmax(0,1fr) 28px!important;
  align-items:center!important;
  gap:12px!important;
  min-height:50px!important;
  padding:7px 12px!important;
  border:0!important;
  border-bottom:1px solid rgba(170,180,240,.16)!important;
  background:rgba(7,17,42,.62)!important;
  color:#fff!important;
  text-align:left!important;
  cursor:pointer!important;
}
#setMenu .selected-set-row:last-child{
  border-bottom:0!important;
}
#setMenu .selected-set-row:hover{
  background:rgba(32,44,86,.78)!important;
}
#setMenu .selected-set-row.is-selected{
  background:linear-gradient(90deg,rgba(122,95,255,.58),rgba(92,78,255,.25))!important;
  box-shadow:inset 4px 0 0 #a992ff, inset 0 1px 0 rgba(255,255,255,.08)!important;
}
#setMenu .set-checkbox{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:24px!important;
  height:24px!important;
  border-radius:8px!important;
  border:1px solid rgba(210,214,255,.62)!important;
  background:rgba(255,255,255,.06)!important;
  color:#fff!important;
  font-size:16px!important;
  font-weight:950!important;
}
#setMenu .selected-set-row.is-selected .set-checkbox{
  border-color:rgba(255,255,255,.76)!important;
  background:linear-gradient(180deg,#9b84ff,#5d4eff)!important;
  box-shadow:0 0 14px rgba(128,104,255,.34)!important;
}
#setMenu .set-row-copy{
  display:flex!important;
  align-items:baseline!important;
  gap:8px!important;
  min-width:0!important;
}
#setMenu .set-row-copy b{
  color:#fff!important;
  font-size:14px!important;
  font-weight:950!important;
  white-space:nowrap!important;
}
#setMenu .set-row-copy small{
  color:#d8d2ff!important;
  font-size:12.5px!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
#setMenu .set-row-check{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:26px!important;
  height:26px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#9b84ff,#5d4eff)!important;
  color:#fff!important;
  font-size:15px!important;
  font-weight:950!important;
  box-shadow:0 0 14px rgba(128,104,255,.34)!important;
}
#setMenu .range-current-card span,
#setMenu .range-current-card small,
#setMenu .range-selection-note,
#setMenu .range-filter-helper{
  color:#d8d2ff!important;
  opacity:1!important;
}
#setMenu .range-apply:disabled{
  cursor:not-allowed!important;
  opacity:.62!important;
  filter:saturate(.75)!important;
  box-shadow:none!important;
}
@media(max-width:740px){
  #setMenu .selected-set-toolbar{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  #setMenu .selected-set-row{
    min-height:56px!important;
  }
  #setMenu .set-row-copy{
    display:grid!important;
    gap:2px!important;
  }
}

.game-completion-modal{
  background:#fff!important;
  border:1px solid rgba(222,228,245,.92)!important;
  box-shadow:0 28px 80px rgba(4,7,24,.36)!important;
  color:#15213f!important;
}
.game-completion-modal .completion-confetti,
.reward-visual-card .reward-fx-video,
.reward-visual-card .reward-css-glow{
  display:none!important;
}
.game-completion-modal .completion-reward-image-wrap{
  background:#f8fbff!important;
  border:1px solid rgba(215,224,244,.92)!important;
  border-radius:18px!important;
  box-shadow:0 14px 32px rgba(31,45,78,.14)!important;
}
.game-completion-modal .completion-reward-image,
.game-completion-modal .completion-reward-fallback{
  border-radius:16px!important;
}
.game-completion-modal h2{
  color:#172140!important;
  text-shadow:none!important;
}
.game-completion-modal .completion-reward-summary p{
  color:#43516f!important;
}
.game-completion-modal .completion-limit-message{
  color:#6d4b12!important;
  background:#fff7e5!important;
  border:1px solid rgba(236,175,63,.38)!important;
  border-radius:12px!important;
  padding:10px 12px!important;
}

/* Study right-rail promo art positioning: keep copy readable. */
body:not(.dragon-studio-mode) .study-page .right-col .game-zone-card,
body:not(.dragon-studio-mode) .study-page .right-col .dragon-studio-card{
  position:relative!important;
  overflow:hidden!important;
}
body:not(.dragon-studio-mode) .study-page .right-col .game-zone-card .study-promo-copy,
body:not(.dragon-studio-mode) .study-page .right-col .dragon-studio-card .study-promo-copy{
  position:static!important;
  z-index:2!important;
  max-width:56%!important;
}
body:not(.dragon-studio-mode) .study-page .right-col .game-zone-card .study-promo-copy h3,
body:not(.dragon-studio-mode) .study-page .right-col .game-zone-card .study-promo-copy p,
body:not(.dragon-studio-mode) .study-page .right-col .dragon-studio-card .study-promo-copy h3,
body:not(.dragon-studio-mode) .study-page .right-col .dragon-studio-card .study-promo-copy p{
  position:relative!important;
  z-index:2!important;
  max-width:100%!important;
}
body:not(.dragon-studio-mode) .study-page .right-col .game-zone-card .study-promo-copy button,
body:not(.dragon-studio-mode) .study-page .right-col .dragon-studio-card .study-promo-copy button{
  position:absolute!important;
  top:26px!important;
  right:24px!important;
  left:auto!important;
  z-index:3!important;
}
body:not(.dragon-studio-mode) .study-page .right-col .game-zone-card>img{
  position:absolute!important;
  right:16px!important;
  bottom:18px!important;
  left:auto!important;
  width:160px!important;
  max-width:36%!important;
  height:auto!important;
  object-fit:contain!important;
  z-index:1!important;
  pointer-events:none!important;
}
body:not(.dragon-studio-mode) .study-page .right-col .dragon-studio-card>img:not(.baby-dragon-peek){
  position:absolute!important;
  right:22px!important;
  bottom:18px!important;
  left:auto!important;
  width:122px!important;
  max-width:30%!important;
  height:auto!important;
  object-fit:contain!important;
  z-index:1!important;
  pointer-events:none!important;
}
@media(max-width:520px){
  body:not(.dragon-studio-mode) .study-page .right-col .game-zone-card .study-promo-copy,
  body:not(.dragon-studio-mode) .study-page .right-col .dragon-studio-card .study-promo-copy{
    max-width:55%!important;
  }
  body:not(.dragon-studio-mode) .study-page .right-col .game-zone-card .study-promo-copy button,
  body:not(.dragon-studio-mode) .study-page .right-col .dragon-studio-card .study-promo-copy button{
    top:18px!important;
    right:18px!important;
    left:auto!important;
  }
  body:not(.dragon-studio-mode) .study-page .right-col .game-zone-card>img{
    right:12px!important;
    bottom:20px!important;
    width:138px!important;
    max-width:33%!important;
  }
  body:not(.dragon-studio-mode) .study-page .right-col .dragon-studio-card>img:not(.baby-dragon-peek){
    right:14px!important;
    bottom:16px!important;
    width:104px!important;
    max-width:27%!important;
  }
}

/* Dragon Memory Path: dark review panel inside the existing Study layout. */
body:not(.dragon-studio-mode) .study-page .main-study-card:has(.review-page-panel){
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  min-height:0!important;
  overflow:visible!important;
}
body:not(.dragon-studio-mode) .study-page .review-page-panel{
  width:100%!important;
  min-height:620px!important;
  padding:28px 28px 24px!important;
  border-radius:28px!important;
  color:#f8f8ff!important;
  background:
    radial-gradient(circle at 18% 12%, rgba(130,104,255,.24), transparent 30%),
    radial-gradient(circle at 86% 16%, rgba(70,122,255,.16), transparent 28%),
    linear-gradient(180deg, rgba(13,26,59,.94), rgba(8,17,42,.96))!important;
  border:1px solid rgba(142,155,231,.28)!important;
  box-shadow:0 22px 54px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06)!important;
}
body:not(.dragon-studio-mode) .study-page .review-title-block{
  text-align:center!important;
  margin:0 0 20px!important;
}
body:not(.dragon-studio-mode) .study-page .review-title{
  margin:0!important;
  color:#fff!important;
  font-size:clamp(28px,3vw,40px)!important;
  line-height:1.05!important;
  font-weight:950!important;
  letter-spacing:0!important;
}
body:not(.dragon-studio-mode) .study-page .review-title::before,
body:not(.dragon-studio-mode) .study-page .review-title::after{
  content:none!important;
  display:none!important;
}
body:not(.dragon-studio-mode) .study-page .review-subtitle{
  margin:12px auto 0!important;
  max-width:780px!important;
  color:#e8e7ff!important;
  font-size:15px!important;
  font-weight:650!important;
  line-height:1.45!important;
}
body:not(.dragon-studio-mode) .study-page .review-summary-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:16px!important;
  margin:20px 0 26px!important;
}
body:not(.dragon-studio-mode) .study-page .review-summary-card{
  min-height:118px!important;
  padding:18px 16px!important;
  border-radius:20px!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(152,166,243,.20)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
  text-align:center!important;
  display:grid!important;
  place-items:center!important;
  gap:4px!important;
}
body:not(.dragon-studio-mode) .study-page .review-summary-card span{
  color:#ffe49a!important;
  font-size:24px!important;
  line-height:1!important;
}
body:not(.dragon-studio-mode) .study-page .review-summary-icon{
  display:block!important;
  width:26px!important;
  height:26px!important;
  object-fit:contain!important;
  filter:brightness(0) invert(1) drop-shadow(0 0 10px rgba(255,228,154,.45))!important;
}
body:not(.dragon-studio-mode) .study-page .review-summary-card b{
  color:#a98cff!important;
  font-size:15px!important;
  font-weight:900!important;
}
body:not(.dragon-studio-mode) .study-page .review-summary-card strong{
  color:#fff!important;
  font-size:34px!important;
  line-height:1!important;
  font-weight:950!important;
}
body:not(.dragon-studio-mode) .study-page .review-summary-card small{
  color:#f2efff!important;
  font-size:13px!important;
  font-weight:850!important;
}
body:not(.dragon-studio-mode) .study-page .review-page-panel .memory-path{
  position:relative!important;
  display:grid!important;
  grid-template-columns:repeat(8,minmax(0,1fr))!important;
  gap:10px!important;
  align-items:start!important;
  margin:0 8px 26px!important;
}
body:not(.dragon-studio-mode) .study-page .review-page-panel .memory-path::before{
  content:"";
  position:absolute;
  left:4%;
  right:4%;
  top:30px;
  height:6px;
  border-radius:999px;
  background:linear-gradient(90deg,#7b58ff,#5d4eff,#ffe06d);
  box-shadow:0 0 18px rgba(117,85,255,.42);
  opacity:.75;
}
body:not(.dragon-studio-mode) .study-page .memory-step{
  position:relative!important;
  z-index:1!important;
  display:grid!important;
  justify-items:center!important;
  gap:9px!important;
  color:#fff!important;
  text-align:center!important;
}
body:not(.dragon-studio-mode) .study-page .memory-step i{
  display:grid!important;
  place-items:center!important;
  width:48px!important;
  height:48px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg, rgba(25,32,77,.96), rgba(12,19,50,.98))!important;
  border:3px solid rgba(105,88,255,.92)!important;
  color:#fff!important;
  font-style:normal!important;
  font-size:14px!important;
  font-weight:950!important;
  box-shadow:0 0 0 4px rgba(9,15,38,.72), 0 0 18px rgba(104,82,255,.34)!important;
}
body:not(.dragon-studio-mode) .study-page .memory-step i em{
  font-style:normal!important;
}
body:not(.dragon-studio-mode) .study-page .memory-step-icon{
  display:block!important;
  width:24px!important;
  height:24px!important;
  object-fit:contain!important;
  filter:brightness(0) invert(1)!important;
}
body:not(.dragon-studio-mode) .study-page .memory-step:first-child i,
body:not(.dragon-studio-mode) .study-page .memory-step.active i{
  background:linear-gradient(180deg,#8f6fff,#5d4eff)!important;
  border-color:#b59cff!important;
  box-shadow:0 0 0 4px rgba(9,15,38,.72), 0 0 24px rgba(151,104,255,.78)!important;
}
body:not(.dragon-studio-mode) .study-page .memory-step.mastered i{
  border-color:#ffd75d!important;
  color:#ffd75d!important;
  box-shadow:0 0 0 4px rgba(9,15,38,.72), 0 0 22px rgba(255,197,60,.55)!important;
}
body:not(.dragon-studio-mode) .study-page .memory-step b{
  color:#f9f7ff!important;
  font-size:13px!important;
  line-height:1.12!important;
  font-weight:900!important;
}
body:not(.dragon-studio-mode) .study-page .review-empty-state,
body:not(.dragon-studio-mode) .study-page .review-active-card{
  min-height:260px!important;
  padding:26px!important;
  border-radius:22px!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(152,166,243,.20)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
}
body:not(.dragon-studio-mode) .study-page .review-empty-state{
  display:grid!important;
  grid-template-columns:minmax(180px,260px) minmax(0,1fr)!important;
  align-items:center!important;
  gap:30px!important;
}
body:not(.dragon-studio-mode) .study-page .review-empty-state img{
  width:min(260px,100%)!important;
  height:auto!important;
  object-fit:contain!important;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.35))!important;
}
body:not(.dragon-studio-mode) .study-page .review-empty-state h3,
body:not(.dragon-studio-mode) .study-page .review-active-card h3{
  margin:0 0 14px!important;
  color:#fff!important;
  font-size:clamp(26px,2.6vw,34px)!important;
  line-height:1.1!important;
  font-weight:950!important;
}
body:not(.dragon-studio-mode) .study-page .review-empty-state p,
body:not(.dragon-studio-mode) .study-page .review-active-card p{
  margin:0!important;
  color:#e8e7ff!important;
  font-size:17px!important;
  line-height:1.45!important;
  font-weight:650!important;
}
body:not(.dragon-studio-mode) .study-page .review-active-card{
  display:grid!important;
  align-content:center!important;
  justify-items:center!important;
  text-align:center!important;
  gap:14px!important;
}
body:not(.dragon-studio-mode) .study-page .review-due-pill{
  display:inline-flex!important;
  align-items:center!important;
  min-height:34px!important;
  padding:0 16px!important;
  border-radius:999px!important;
  color:#ffe49a!important;
  background:rgba(255,228,154,.10)!important;
  border:1px solid rgba(255,228,154,.28)!important;
  font-size:13px!important;
  font-weight:900!important;
}
body:not(.dragon-studio-mode) .study-page .review-pronunciation{
  color:#cfd5ff!important;
  margin-top:-8px!important;
}
body:not(.dragon-studio-mode) .study-page .review-definition-box{
  width:min(640px,100%)!important;
  padding:18px 20px!important;
  border-radius:18px!important;
  border:1px dashed rgba(169,140,255,.55)!important;
  background:rgba(5,12,33,.38)!important;
  color:#f6f3ff!important;
}
body:not(.dragon-studio-mode) .study-page .review-definition-box p+p{
  margin-top:10px!important;
}
body:not(.dragon-studio-mode) .study-page .review-definition-box button,
body:not(.dragon-studio-mode) .study-page .review-primary-btn,
body:not(.dragon-studio-mode) .study-page .review-secondary-btn{
  min-height:48px!important;
  border-radius:14px!important;
  padding:0 24px!important;
  border:1px solid rgba(153,139,255,.45)!important;
  font-size:15px!important;
  font-weight:900!important;
  cursor:pointer!important;
}
body:not(.dragon-studio-mode) .study-page .review-definition-box button,
body:not(.dragon-studio-mode) .study-page .review-primary-btn{
  color:#fff!important;
  background:linear-gradient(180deg,#8a73ff,#5d4eff)!important;
  box-shadow:0 12px 24px rgba(95,78,255,.30)!important;
}
body:not(.dragon-studio-mode) .study-page .review-secondary-btn{
  color:#e9e5ff!important;
  background:rgba(7,15,38,.60)!important;
}
body:not(.dragon-studio-mode) .study-page .review-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:14px!important;
  margin-top:22px!important;
}
body:not(.dragon-studio-mode) .study-page .review-actions img{
  width:18px!important;
  height:18px!important;
  margin-right:8px!important;
  vertical-align:-3px!important;
}
body:not(.dragon-studio-mode) .study-page .review-memory-note{
  margin-top:22px!important;
  padding:18px 20px!important;
  border-radius:18px!important;
  text-align:center!important;
  color:#fff!important;
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(152,166,243,.18)!important;
  font-size:16px!important;
  font-weight:750!important;
}
@media(max-width:860px){
  body:not(.dragon-studio-mode) .study-page .review-page-panel{
    min-height:auto!important;
    padding:22px 18px!important;
  }
  body:not(.dragon-studio-mode) .study-page .review-summary-grid{
    grid-template-columns:1fr!important;
  }
  body:not(.dragon-studio-mode) .study-page .review-page-panel .memory-path{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    row-gap:18px!important;
  }
  body:not(.dragon-studio-mode) .study-page .review-page-panel .memory-path::before{
    display:none!important;
  }
  body:not(.dragon-studio-mode) .study-page .review-empty-state{
    grid-template-columns:1fr!important;
    text-align:center!important;
  }
}
@media(max-width:520px){
  body:not(.dragon-studio-mode) .study-page .review-page-panel .memory-path{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body:not(.dragon-studio-mode) .study-page .review-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  body:not(.dragon-studio-mode) .study-page .review-primary-btn,
  body:not(.dragon-studio-mode) .study-page .review-secondary-btn{
    width:100%!important;
  }
}

/* Profile reward language: coins, hatch streak, badges, and purchase actions only. */
.profile-page .profile-reward-summary-row{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:14px!important;
  margin:18px 0!important;
}
.profile-page .profile-reward-summary-card,
.profile-page .profile-reward-summary-action{
  min-height:86px!important;
  border-radius:20px!important;
  border:1px solid rgba(148,158,232,.22)!important;
  background:linear-gradient(180deg,rgba(15,27,62,.96),rgba(8,17,42,.96))!important;
  box-shadow:0 14px 34px rgba(4,10,28,.22), inset 0 1px 0 rgba(255,255,255,.06)!important;
  color:#f8f8ff!important;
}
.profile-page .profile-reward-summary-card{
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr)!important;
  grid-template-rows:1fr 1fr!important;
  gap:2px 12px!important;
  align-items:center!important;
  padding:16px!important;
}
.profile-page .profile-reward-summary-card img,
.profile-page .profile-reward-summary-action img{
  width:34px!important;
  height:34px!important;
  object-fit:contain!important;
}
.profile-page .profile-reward-summary-card img{
  grid-row:1/3!important;
  padding:7px!important;
  border-radius:14px!important;
  background:rgba(118,92,255,.18)!important;
  border:1px solid rgba(168,150,255,.24)!important;
}
.profile-page .profile-reward-summary-card strong{
  color:#fff!important;
  font-size:24px!important;
  line-height:1!important;
  font-weight:950!important;
}
.profile-page .profile-reward-summary-card span{
  color:#d8d2ff!important;
  font-size:13px!important;
  font-weight:850!important;
}
.profile-page .profile-reward-summary-action{
  display:grid!important;
  grid-template-columns:40px minmax(0,1fr) auto!important;
  grid-template-rows:1fr 1fr!important;
  align-items:center!important;
  gap:2px 12px!important;
  padding:14px 16px!important;
  text-align:left!important;
  cursor:pointer!important;
}
.profile-page .profile-reward-summary-action img{
  grid-row:1/3!important;
}
.profile-page .profile-reward-summary-action b{
  color:#fff!important;
  font-size:15px!important;
  font-weight:950!important;
  white-space:nowrap!important;
}
.profile-page .profile-reward-summary-action span{
  color:#d8d2ff!important;
  font-size:12px!important;
  font-weight:800!important;
}
.profile-page .profile-reward-summary-action i{
  grid-row:1/3!important;
  color:#a98cff!important;
  font-style:normal!important;
  font-size:26px!important;
  font-weight:950!important;
}
@media(max-width:1100px){
  .profile-page .profile-reward-summary-row{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:560px){
  .profile-page .profile-reward-summary-row{
    grid-template-columns:1fr!important;
  }
}

/* Choose Your Test: shared magical library card artwork and dark feature strip. */
#homePage{
  --choose-test-card-bg:url("assets/assets_webp/backgrounds/mystical_moonlit_library_interior.webp");
}
#homePage .product-grid.exam-grid.compact{
  align-items:stretch!important;
}
#homePage .product-card.exam-card{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:auto 1fr auto!important;
  justify-items:center!important;
  align-items:start!important;
  gap:14px!important;
  min-height:430px!important;
  height:100%!important;
  padding:22px 22px 20px!important;
  border-radius:24px!important;
  border:1px solid rgba(155,135,255,.35)!important;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.70) 0%,rgba(255,255,255,.86) 52%,rgba(255,255,255,.94) 100%),
    var(--choose-test-card-bg)!important;
  background-size:cover!important;
  background-position:center!important;
  box-shadow:
    0 18px 42px rgba(18,18,60,.22),
    inset 0 1px 0 rgba(255,255,255,.65)!important;
  opacity:1!important;
}
#homePage .product-card.exam-card::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  background:
    radial-gradient(circle at 50% 10%,rgba(255,255,255,.46),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.55))!important;
  pointer-events:none!important;
}
#homePage .product-card.exam-card>*{
  position:relative!important;
  z-index:1!important;
}
#homePage .product-card .mascot-wrap.image-mascot{
  order:0!important;
  width:152px!important;
  height:152px!important;
  margin:0 auto!important;
  border-radius:999px!important;
  background:radial-gradient(circle,rgba(255,255,255,.74),rgba(238,232,255,.45))!important;
  border:1px solid rgba(143,124,255,.28)!important;
  box-shadow:0 12px 28px rgba(38,28,104,.18), inset 0 1px 0 rgba(255,255,255,.74)!important;
  overflow:visible!important;
  filter:none!important;
}
#homePage .product-card .mascot-wrap.image-mascot img{
  width:136px!important;
  height:136px!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  filter:drop-shadow(0 16px 18px rgba(61,47,150,.24))!important;
}
#homePage .product-card .exam-copy{
  order:1!important;
  align-self:stretch!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  text-align:center!important;
  min-width:0!important;
}
#homePage .product-card .exam-copy h2{
  margin:0!important;
  color:#08113a!important;
  font-size:clamp(25px,2.1vw,32px)!important;
  line-height:1.04!important;
  font-weight:950!important;
  letter-spacing:0!important;
  text-shadow:0 1px 0 rgba(255,255,255,.62)!important;
}
#homePage .product-card .exam-copy h2::after{
  display:none!important;
}
#homePage .product-card .exam-copy p{
  margin:0!important;
  max-width:360px!important;
  min-height:58px!important;
  color:rgba(8,17,58,.78)!important;
  font-size:14px!important;
  line-height:1.38!important;
  font-weight:700!important;
}
#homePage .product-card .chips,
#homePage .product-card .chips.ssat,
#homePage .product-card .chips.coming{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  gap:7px!important;
  max-width:360px!important;
}
#homePage .product-card .chips span,
#homePage .product-card .chips.coming span,
#homePage .product-card.coming-soon-card .chips span{
  min-width:auto!important;
  padding:6px 10px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.72)!important;
  border:1px solid rgba(111,92,235,.34)!important;
  color:#5e4be8!important;
  font-size:11.5px!important;
  line-height:1!important;
  font-weight:850!important;
  box-shadow:0 6px 14px rgba(54,41,130,.08)!important;
}
#homePage .product-card .primary-wide{
  order:2!important;
  width:100%!important;
  min-height:48px!important;
  margin-top:auto!important;
  border:0!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,#7867ff,#4f36d8)!important;
  color:#fff!important;
  font-size:15px!important;
  font-weight:950!important;
  box-shadow:0 10px 24px rgba(90,67,220,.28)!important;
}
#homePage .product-card .primary-wide.disabled,
#homePage .product-card.coming-soon-card .primary-wide{
  background:rgba(105,96,150,.22)!important;
  color:rgba(48,42,96,.82)!important;
  border:1px solid rgba(120,105,190,.24)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.54), 0 8px 20px rgba(42,31,95,.10)!important;
}
#homePage .home-strip.feature-strip,
#homePage .home-strip.premium-feature-row{
  background:linear-gradient(180deg,rgba(18,27,67,.92),rgba(10,16,42,.96))!important;
  border:1px solid rgba(150,130,255,.38)!important;
  border-radius:24px!important;
  box-shadow:0 18px 48px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08)!important;
}
#homePage .home-strip .feature-item{
  color:#f7f4ff!important;
  border-color:rgba(172,156,255,.18)!important;
}
#homePage .home-strip .feature-text h3,
#homePage .home-strip .feature-item h3,
#homePage .home-strip .feature b{
  color:#fff!important;
  font-weight:950!important;
}
#homePage .home-strip .feature-text p,
#homePage .home-strip .feature-item p,
#homePage .home-strip .feature span{
  color:rgba(235,232,255,.78)!important;
  font-weight:650!important;
}
#homePage .home-strip .feature-icon-circle{
  background:radial-gradient(circle,rgba(132,108,255,.38),rgba(75,55,180,.18))!important;
  border:1px solid rgba(170,150,255,.34)!important;
  box-shadow:0 0 18px rgba(120,96,255,.28)!important;
}
@media(max-width:1050px){
  #homePage .product-card.exam-card{
    min-height:410px!important;
  }
}
@media(max-width:650px){
  #homePage .product-card.exam-card{
    min-height:0!important;
    padding:20px 18px!important;
    background-position:center top!important;
  }
  #homePage .product-card .mascot-wrap.image-mascot{
    width:132px!important;
    height:132px!important;
  }
  #homePage .product-card .mascot-wrap.image-mascot img{
    width:120px!important;
    height:120px!important;
  }
  #homePage .product-card .exam-copy p{
    min-height:0!important;
  }
}

/* Level Selection: match homepage fantasy background and premium card surfaces. */
#levelPage{
  --level-page-bg:url("assets/assets_webp/backgrounds/bg_main_navy_glow.webp");
  --level-card-bg:url("assets/assets_webp/backgrounds/mystical_moonlit_library_interior.webp");
}
#levelPage.page{
  background:
    linear-gradient(180deg,rgba(4,10,28,.18),rgba(4,10,28,.22)),
    var(--level-page-bg) center top/cover no-repeat!important;
  min-height:100vh!important;
}
#levelPage.page::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:-1!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 12% 18%,rgba(120,92,255,.18),transparent 26%),
    radial-gradient(circle at 86% 24%,rgba(74,124,255,.12),transparent 28%)!important;
  opacity:1!important;
}
#levelPage .level-card{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  border-radius:24px!important;
  border:1px solid rgba(155,135,255,.35)!important;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.90) 55%,rgba(255,255,255,.96) 100%),
    var(--level-card-bg)!important;
  background-size:cover!important;
  background-position:center!important;
  box-shadow:
    0 18px 42px rgba(18,18,60,.22),
    inset 0 1px 0 rgba(255,255,255,.65)!important;
}
#levelPage .level-card::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.25),transparent 40%),
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.16))!important;
}
#levelPage .level-card>*{
  position:relative!important;
  z-index:1!important;
}
#levelPage .level-card h3{
  color:#08113a!important;
  text-shadow:0 1px 0 rgba(255,255,255,.62)!important;
}
#levelPage .level-card p,
#levelPage .level-card .level-feature,
#levelPage .level-count-line{
  color:rgba(8,17,58,.78)!important;
}
#levelPage .level-card .level-icon{
  background:radial-gradient(circle,rgba(255,255,255,.74),rgba(238,232,255,.45))!important;
  border:1px solid rgba(143,124,255,.28)!important;
  box-shadow:0 12px 28px rgba(38,28,104,.18), inset 0 1px 0 rgba(255,255,255,.74)!important;
}
#levelPage .level-card .pricing-row{
  background:rgba(255,255,255,.62)!important;
  border-color:rgba(111,92,235,.24)!important;
  box-shadow:0 8px 20px rgba(44,35,104,.08)!important;
}
#levelPage .level-card .price-choice{
  background:rgba(255,255,255,.74)!important;
  border-color:rgba(111,92,235,.18)!important;
}
#levelPage .level-card .price-choice b{
  color:#08113a!important;
}
#levelPage .level-card .price-choice small{
  color:rgba(8,17,58,.62)!important;
}
#levelPage .full-access-unlocks,
#levelPage .pricing-comparison,
#levelPage .plan-summary-panel,
#levelPage .unlocks-panel{
  background:linear-gradient(180deg,rgba(18,27,67,.94),rgba(10,16,42,.96))!important;
  border:1px solid rgba(150,130,255,.38)!important;
  border-radius:24px!important;
  box-shadow:
    0 18px 48px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.08)!important;
  color:#f7f4ff!important;
}
#levelPage .full-access-unlocks h2,
#levelPage .full-access-unlocks h3,
#levelPage .pricing-comparison h2,
#levelPage .pricing-comparison h3,
#levelPage .plan-summary-panel h3,
#levelPage .unlocks-panel h2,
#levelPage .unlocks-panel h3{
  color:#ffffff!important;
  font-weight:950!important;
}
#levelPage .full-access-unlocks p,
#levelPage .pricing-comparison p,
#levelPage .plan-summary-panel p,
#levelPage .unlocks-panel p,
#levelPage .pricing-comparison td,
#levelPage .pricing-comparison th{
  color:rgba(235,232,255,.78)!important;
}
#levelPage .full-access-unlocks .unlock-icon-item,
#levelPage .pricing-comparison .price-choice,
#levelPage .pricing-comparison .plan-card,
#levelPage .pricing-comparison .pricing-plan,
#levelPage .pricing-comparison .plan-summary-card{
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(150,165,245,.18)!important;
  color:#f7f4ff!important;
}
#levelPage .full-access-unlocks .unlock-icon-item b,
#levelPage .pricing-comparison b,
#levelPage .pricing-comparison strong{
  color:#ffffff!important;
}
#levelPage .full-access-unlocks i,
#levelPage .unlock-icon,
#levelPage .plan-icon{
  background:radial-gradient(circle,rgba(132,108,255,.38),rgba(75,55,180,.18))!important;
  border:1px solid rgba(170,150,255,.34)!important;
  box-shadow:0 0 18px rgba(120,96,255,.28)!important;
}
#levelPage .full-access-unlocks img,
#levelPage .pricing-comparison img{
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.18))!important;
}

/* Study right sidebar: shared hover lift for the three action cards. */
body:not(.dragon-studio-mode) .study-page .right-col .game-zone-card,
body:not(.dragon-studio-mode) .study-page .right-col .dragon-studio-card,
body:not(.dragon-studio-mode) .study-page .right-col .badge-mini{
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease!important;
  will-change:transform;
}
body:not(.dragon-studio-mode) .study-page .right-col .game-zone-card:hover,
body:not(.dragon-studio-mode) .study-page .right-col .dragon-studio-card:hover,
body:not(.dragon-studio-mode) .study-page .right-col .badge-mini:hover{
  transform:translateY(-3px)!important;
  border-color:rgba(180,160,255,.72)!important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.28),
    0 0 22px rgba(124,99,255,.24),
    inset 0 1px 0 rgba(255,255,255,.10)!important;
}
body:not(.dragon-studio-mode) .study-page .right-col .game-zone-card:active,
body:not(.dragon-studio-mode) .study-page .right-col .dragon-studio-card:active,
body:not(.dragon-studio-mode) .study-page .right-col .badge-mini:active{
  transform:translateY(-1px)!important;
}

@media (prefers-reduced-motion: reduce){
  body:not(.dragon-studio-mode) .study-page .right-col .game-zone-card,
  body:not(.dragon-studio-mode) .study-page .right-col .dragon-studio-card,
  body:not(.dragon-studio-mode) .study-page .right-col .badge-mini{
    transition:none!important;
    will-change:auto!important;
  }
  body:not(.dragon-studio-mode) .study-page .right-col .game-zone-card:hover,
  body:not(.dragon-studio-mode) .study-page .right-col .dragon-studio-card:hover,
  body:not(.dragon-studio-mode) .study-page .right-col .badge-mini:hover,
  body:not(.dragon-studio-mode) .study-page .right-col .game-zone-card:active,
  body:not(.dragon-studio-mode) .study-page .right-col .dragon-studio-card:active,
  body:not(.dragon-studio-mode) .study-page .right-col .badge-mini:active{
    transform:none!important;
  }
}

/* Profile Community: polished coming-soon Practice Circle card. */
.profile-page .profile-community-card .practice-circle-coming-soon{
  position:relative!important;
  z-index:1!important;
  display:grid!important;
  grid-template-columns:64px minmax(0,1fr) auto!important;
  grid-template-areas:
    "icon copy button"
    "list list list"!important;
  align-items:center!important;
  gap:16px 18px!important;
  width:100%!important;
  padding:22px 24px!important;
  border-radius:24px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(246,242,255,.90))!important;
  border:1px solid rgba(255,255,255,.78)!important;
  box-shadow:0 18px 36px rgba(20,18,74,.12), inset 0 1px 0 rgba(255,255,255,.72)!important;
  color:#0b1040!important;
}
.profile-page .profile-community-card .practice-circle-icon{
  grid-area:icon!important;
  width:58px!important;
  height:58px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:18px!important;
  background:radial-gradient(circle,rgba(132,108,255,.34),rgba(75,55,180,.16))!important;
  border:1px solid rgba(130,108,255,.28)!important;
  box-shadow:0 0 18px rgba(120,96,255,.20)!important;
}
.profile-page .profile-community-card .practice-circle-icon .profile-new-icon,
.profile-page .profile-community-card .practice-circle-icon img{
  width:32px!important;
  height:32px!important;
  object-fit:contain!important;
}
.profile-page .profile-community-card .practice-circle-copy{
  grid-area:copy!important;
  min-width:0!important;
}
.profile-page .profile-community-card .practice-circle-copy h4{
  margin:0!important;
  color:#0b1040!important;
  font-size:22px!important;
  line-height:1.08!important;
  font-weight:950!important;
}
.profile-page .profile-community-card .practice-circle-copy p{
  margin:7px 0 0!important;
  color:#485075!important;
  font-size:14px!important;
  line-height:1.35!important;
  font-weight:700!important;
}
.profile-page .profile-community-card .practice-circle-list{
  grid-area:list!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:9px!important;
  padding-top:2px!important;
}
.profile-page .profile-community-card .practice-circle-list b,
.profile-page .profile-community-card .practice-circle-list span{
  min-height:38px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  border-radius:999px!important;
  font-size:12.5px!important;
  line-height:1.15!important;
  font-weight:850!important;
}
.profile-page .profile-community-card .practice-circle-list b{
  color:#5e4be8!important;
  background:rgba(255,255,255,.74)!important;
  border:1px solid rgba(111,92,235,.22)!important;
}
.profile-page .profile-community-card .practice-circle-list span{
  color:#342b82!important;
  background:rgba(111,92,235,.10)!important;
  border:1px solid rgba(111,92,235,.20)!important;
}
.profile-page .profile-community-card .practice-circle-coming-soon button{
  grid-area:button!important;
  min-width:132px!important;
  min-height:46px!important;
  padding:0 20px!important;
  border:0!important;
  border-radius:14px!important;
  background:linear-gradient(135deg,#7867ff,#4f36d8)!important;
  color:#ffffff!important;
  font-size:15px!important;
  font-weight:950!important;
  box-shadow:0 12px 24px rgba(90,67,220,.24)!important;
  cursor:pointer!important;
}
.practice-circle-soon-list{
  display:grid!important;
  gap:8px!important;
  margin:14px 0!important;
  padding:0!important;
  list-style:none!important;
}
.practice-circle-soon-list b,
.practice-circle-soon-list span{
  display:block!important;
  float:none!important;
  border-radius:999px!important;
  padding:8px 12px!important;
  background:rgba(111,92,235,.10)!important;
  border:1px solid rgba(111,92,235,.20)!important;
  color:#342b82!important;
  font-size:12.5px!important;
  line-height:1.2!important;
  font-weight:850!important;
}
.practice-circle-soon-list b{
  color:#5e4be8!important;
  background:rgba(255,255,255,.76)!important;
}

@media(max-width:760px){
  .profile-page .profile-community-card .practice-circle-coming-soon{
    grid-template-columns:52px minmax(0,1fr)!important;
    grid-template-areas:
      "icon copy"
      "list list"
      "button button"!important;
    padding:18px!important;
  }
  .profile-page .profile-community-card .practice-circle-icon{
    width:52px!important;
    height:52px!important;
  }
  .profile-page .profile-community-card .practice-circle-list{
    grid-template-columns:1fr!important;
  }
  .profile-page .profile-community-card .practice-circle-coming-soon button{
    width:100%!important;
  }
}

/* Restore approved Choose Your Test card design from the magical library mockup. */
body:not(.dragon-studio-mode) #homePage.page{
  background:
    linear-gradient(180deg,rgba(4,10,28,.08),rgba(4,10,28,.12)),
    url("assets/assets_webp/backgrounds/bg_main_navy_glow.webp") center top/cover no-repeat!important;
  max-width:none!important;
  width:100%!important;
  padding:26px clamp(22px,3.8vw,78px) 42px!important;
  overflow-x:hidden!important;
}
body:not(.dragon-studio-mode) #homePage .compact-hero{
  margin:0 auto 20px!important;
  padding:0!important;
  text-align:center!important;
}
body:not(.dragon-studio-mode) #homePage .hero h1{
  margin:0 0 6px!important;
  color:#ffffff!important;
  font-size:clamp(40px,3.1vw,64px)!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:0!important;
  text-shadow:0 12px 34px rgba(0,0,0,.28)!important;
}
body:not(.dragon-studio-mode) #homePage .hero p{
  margin:0!important;
  color:rgba(247,248,255,.92)!important;
  font-size:clamp(15px,1vw,20px)!important;
  line-height:1.35!important;
  font-weight:500!important;
}
body:not(.dragon-studio-mode) #homePage .info-pill{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:34px!important;
  margin-top:14px!important;
  padding:0 24px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.92)!important;
  border:1px solid rgba(190,182,255,.32)!important;
  color:#5e4be8!important;
  font-size:15px!important;
  font-weight:900!important;
  box-shadow:0 12px 26px rgba(6,16,40,.12)!important;
}
body:not(.dragon-studio-mode) #homePage .home-product-grid{
  width:min(1880px,100%)!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
  align-items:stretch!important;
}
body:not(.dragon-studio-mode) #homePage .product-card.exam-card{
  box-sizing:border-box!important;
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  min-width:0!important;
  width:100%!important;
  min-height:332px!important;
  height:100%!important;
  padding:22px 28px 16px!important;
  gap:9px!important;
  border-radius:18px!important;
  border:2px solid rgba(231,226,255,.92)!important;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.54) 0%,rgba(255,255,255,.76) 54%,rgba(255,255,255,.92) 100%),
    url("assets/assets_webp/backgrounds/mystical_moonlit_library_interior.webp")!important;
  background-size:cover!important;
  background-position:center!important;
  box-shadow:
    0 18px 42px rgba(8,13,50,.20),
    inset 0 1px 0 rgba(255,255,255,.72)!important;
  opacity:1!important;
  transform:none;
}
body:not(.dragon-studio-mode) #homePage .product-card.exam-card::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 50% 12%,rgba(255,255,255,.52),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.42))!important;
}
body:not(.dragon-studio-mode) #homePage .product-card.exam-card>*{
  position:relative!important;
  z-index:1!important;
}
body:not(.dragon-studio-mode) #homePage .product-card .mascot-wrap.image-mascot{
  flex:0 0 auto!important;
  order:0!important;
  width:122px!important;
  height:122px!important;
  margin:0 auto 0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  background:radial-gradient(circle,#ffffff 0%,rgba(255,255,255,.92) 56%,rgba(238,232,255,.54) 100%)!important;
  border:1px solid rgba(143,124,255,.28)!important;
  box-shadow:0 14px 26px rgba(38,28,104,.18), inset 0 1px 0 rgba(255,255,255,.74)!important;
  filter:none!important;
  overflow:visible!important;
}
body:not(.dragon-studio-mode) #homePage .product-card .mascot-wrap.image-mascot::after{
  display:none!important;
}
body:not(.dragon-studio-mode) #homePage .product-card .mascot-wrap.image-mascot img{
  width:108px!important;
  height:108px!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  filter:drop-shadow(0 12px 16px rgba(61,47,150,.24))!important;
}
body:not(.dragon-studio-mode) #homePage .product-card .exam-copy{
  flex:1 1 auto!important;
  order:1!important;
  min-width:0!important;
  width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  text-align:center!important;
}
body:not(.dragon-studio-mode) #homePage .product-card .exam-copy h2{
  margin:0!important;
  max-width:100%!important;
  color:#071044!important;
  font-size:clamp(24px,1.55vw,31px)!important;
  line-height:1.02!important;
  font-weight:950!important;
  letter-spacing:0!important;
  text-align:center!important;
  text-shadow:0 1px 0 rgba(255,255,255,.62)!important;
}
body:not(.dragon-studio-mode) #homePage .product-card .exam-copy h2::after{
  display:none!important;
}
body:not(.dragon-studio-mode) #homePage .product-card .exam-copy p{
  margin:0!important;
  max-width:430px!important;
  min-height:42px!important;
  color:#1d244f!important;
  font-size:13.5px!important;
  line-height:1.28!important;
  font-weight:650!important;
  text-align:center!important;
}
body:not(.dragon-studio-mode) #homePage .product-card .chips,
body:not(.dragon-studio-mode) #homePage .product-card .chips.ssat,
body:not(.dragon-studio-mode) #homePage .product-card .chips.coming{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  align-items:center!important;
  gap:6px 8px!important;
  max-width:100%!important;
  margin:0!important;
}
body:not(.dragon-studio-mode) #homePage .product-card .chips span,
body:not(.dragon-studio-mode) #homePage .product-card .chips.coming span,
body:not(.dragon-studio-mode) #homePage .product-card.coming-soon-card .chips span{
  min-width:0!important;
  padding:5px 11px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.74)!important;
  border:1.5px solid rgba(111,92,235,.34)!important;
  color:#5e4be8!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:900!important;
  text-align:center!important;
  box-shadow:0 6px 14px rgba(54,41,130,.08)!important;
}
body:not(.dragon-studio-mode) #homePage .product-card .primary-wide{
  box-sizing:border-box!important;
  flex:0 0 auto!important;
  order:2!important;
  align-self:stretch!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  width:100%!important;
  max-width:100%!important;
  min-height:40px!important;
  margin:8px 0 0!important;
  padding:0 18px!important;
  border:0!important;
  border-radius:9px!important;
  background:linear-gradient(180deg,#7867ff 0%,#4f36d8 100%)!important;
  color:#ffffff!important;
  font-size:15px!important;
  line-height:1!important;
  font-weight:950!important;
  white-space:nowrap!important;
  box-shadow:0 10px 24px rgba(90,67,220,.28)!important;
  overflow:hidden!important;
}
body:not(.dragon-studio-mode) #homePage .product-card .primary-wide span{
  margin-left:4px!important;
}
body:not(.dragon-studio-mode) #homePage .product-card .primary-wide.disabled,
body:not(.dragon-studio-mode) #homePage .product-card.coming-soon-card .primary-wide{
  background:linear-gradient(180deg,#7867ff 0%,#4f36d8 100%)!important;
  color:#ffffff!important;
  border:0!important;
  opacity:.88!important;
  box-shadow:0 10px 24px rgba(90,67,220,.22)!important;
}
body:not(.dragon-studio-mode) #homePage .home-strip.feature-strip,
body:not(.dragon-studio-mode) #homePage .home-strip.premium-feature-row{
  width:min(1320px,100%)!important;
  margin:16px auto 0!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:0!important;
  padding:18px 22px!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,rgba(18,27,67,.92),rgba(10,16,42,.96))!important;
  border:1px solid rgba(150,130,255,.38)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08)!important;
}
body:not(.dragon-studio-mode) #homePage .home-strip .feature{
  display:grid!important;
  grid-template-columns:1fr!important;
  justify-items:center!important;
  align-items:start!important;
  gap:9px!important;
  padding:0 18px!important;
  text-align:center!important;
  border-right:1px solid rgba(172,156,255,.24)!important;
  color:#f7f4ff!important;
}
body:not(.dragon-studio-mode) #homePage .home-strip .feature:last-child{
  border-right:0!important;
}
body:not(.dragon-studio-mode) #homePage .home-strip .feature-icon-circle{
  width:68px!important;
  height:68px!important;
  min-width:68px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:999px!important;
  background:radial-gradient(circle,rgba(132,108,255,.38),rgba(75,55,180,.18))!important;
  border:1px solid rgba(170,150,255,.34)!important;
  box-shadow:0 0 18px rgba(120,96,255,.28)!important;
}
body:not(.dragon-studio-mode) #homePage .home-strip .feature-icon-circle img{
  width:54px!important;
  height:54px!important;
  object-fit:contain!important;
}
body:not(.dragon-studio-mode) #homePage .home-strip .feature-text h3,
body:not(.dragon-studio-mode) #homePage .home-strip .feature-item h3,
body:not(.dragon-studio-mode) #homePage .home-strip .feature b{
  margin:0!important;
  color:#ffffff!important;
  font-size:14px!important;
  line-height:1.2!important;
  font-weight:950!important;
}
body:not(.dragon-studio-mode) #homePage .home-strip .feature-text p,
body:not(.dragon-studio-mode) #homePage .home-strip .feature-item p,
body:not(.dragon-studio-mode) #homePage .home-strip .feature span{
  margin:4px 0 0!important;
  color:rgba(235,232,255,.82)!important;
  font-size:13px!important;
  line-height:1.35!important;
  font-weight:600!important;
}

@media(max-width:1180px){
  body:not(.dragon-studio-mode) #homePage .home-product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body:not(.dragon-studio-mode) #homePage .home-strip.feature-strip,
  body:not(.dragon-studio-mode) #homePage .home-strip.premium-feature-row{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body:not(.dragon-studio-mode) #homePage .home-strip .feature{
    border-right:0!important;
    border-bottom:1px solid rgba(172,156,255,.18)!important;
    padding:16px!important;
  }
}
@media(max-width:680px){
  body:not(.dragon-studio-mode) #homePage.page{
    padding:24px 14px 34px!important;
  }
  body:not(.dragon-studio-mode) #homePage .home-product-grid{
    grid-template-columns:1fr!important;
    gap:13px!important;
  }
  body:not(.dragon-studio-mode) #homePage .product-card.exam-card{
    min-height:0!important;
    padding:19px 18px 15px!important;
  }
  body:not(.dragon-studio-mode) #homePage .product-card .mascot-wrap.image-mascot{
    width:112px!important;
    height:112px!important;
  }
  body:not(.dragon-studio-mode) #homePage .product-card .mascot-wrap.image-mascot img{
    width:100px!important;
    height:100px!important;
  }
  body:not(.dragon-studio-mode) #homePage .product-card .exam-copy p{
    min-height:0!important;
    max-width:100%!important;
  }
  body:not(.dragon-studio-mode) #homePage .product-card .primary-wide{
    white-space:normal!important;
    min-height:42px!important;
  }
  body:not(.dragon-studio-mode) #homePage .home-strip.feature-strip,
  body:not(.dragon-studio-mode) #homePage .home-strip.premium-feature-row{
    grid-template-columns:1fr!important;
    padding:12px!important;
  }
  body:not(.dragon-studio-mode) #homePage .home-strip .feature{
    border-bottom:1px solid rgba(172,156,255,.18)!important;
  }
  body:not(.dragon-studio-mode) #homePage .home-strip .feature:last-child{
    border-bottom:0!important;
  }
}

/* Restore approved SSAT / Level Selection page design. */
body:not(.dragon-studio-mode) #levelPage.page{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  min-height:100vh!important;
  margin:0!important;
  padding:28px clamp(22px,4vw,86px) 54px!important;
  overflow-x:hidden!important;
  background:
    linear-gradient(180deg,rgba(4,10,28,.08),rgba(4,10,28,.12)),
    url("assets/assets_webp/backgrounds/bg_main_navy_glow.webp") center top/cover no-repeat!important;
}
body:not(.dragon-studio-mode) #levelPage.page::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:-1!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 12% 18%,rgba(120,92,255,.16),transparent 26%),
    radial-gradient(circle at 86% 24%,rgba(74,124,255,.10),transparent 28%)!important;
  opacity:1!important;
}
body:not(.dragon-studio-mode) #levelPage .level-hero{
  width:min(1480px,calc(100% - 72px))!important;
  margin:0 auto 28px!important;
  padding:0!important;
  text-align:center!important;
}
body:not(.dragon-studio-mode) #levelPage .level-hero h1{
  margin:0 0 8px!important;
  color:#ffffff!important;
  font-size:clamp(42px,3.2vw,66px)!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:0!important;
  text-shadow:0 0 22px rgba(255,255,255,.28),0 12px 34px rgba(0,0,0,.34)!important;
}
body:not(.dragon-studio-mode) #levelPage .level-hero p{
  margin:0!important;
  color:rgba(247,248,255,.92)!important;
  font-size:clamp(15px,1vw,20px)!important;
  line-height:1.35!important;
  font-weight:500!important;
}
body:not(.dragon-studio-mode) #levelPage .level-hero .info-pill{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:34px!important;
  margin-top:14px!important;
  padding:0 24px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#8a73ff,#5d4eff)!important;
  border:1px solid rgba(190,182,255,.28)!important;
  color:#ffffff!important;
  font-size:14px!important;
  font-weight:900!important;
  box-shadow:0 12px 28px rgba(78,57,224,.28)!important;
}
body:not(.dragon-studio-mode) #levelPage .level-grid{
  width:min(1480px,calc(100% - 72px))!important;
  max-width:1480px!important;
  margin:0 auto!important;
  display:grid!important;
  gap:28px!important;
  align-items:stretch!important;
  justify-content:center!important;
}
body:not(.dragon-studio-mode) #levelPage .level-grid.ssat,
body:not(.dragon-studio-mode) #levelPage .level-grid.isee{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
body:not(.dragon-studio-mode) #levelPage .level-card,
body:not(.dragon-studio-mode) #levelPage .level-grid.ssat .level-card{
  box-sizing:border-box!important;
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  min-width:0!important;
  min-height:430px!important;
  padding:28px!important;
  border-radius:24px!important;
  border:1.5px solid rgba(170,145,255,.52)!important;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.88) 58%,rgba(255,255,255,.96) 100%),
    url("assets/assets_webp/backgrounds/mystical_moonlit_library_interior.webp")!important;
  background-size:cover!important;
  background-position:center!important;
  box-shadow:
    0 18px 42px rgba(80,55,190,.28),
    0 0 22px rgba(130,105,255,.22),
    inset 0 1px 0 rgba(255,255,255,.72)!important;
}
body:not(.dragon-studio-mode) #levelPage .level-card::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.30),transparent 40%),
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.18))!important;
}
body:not(.dragon-studio-mode) #levelPage .level-card>*{
  position:relative!important;
  z-index:1!important;
}
body:not(.dragon-studio-mode) #levelPage .level-card>.level-icon,
body:not(.dragon-studio-mode) #levelPage .level-grid.ssat .level-card>.level-icon{
  position:absolute!important;
  left:28px!important;
  top:28px!important;
  width:116px!important;
  height:116px!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:24px!important;
  background:radial-gradient(circle,#ffffff 0%,rgba(255,255,255,.92) 58%,rgba(239,232,255,.62) 100%)!important;
  border:1px solid rgba(158,140,255,.34)!important;
  box-shadow:0 16px 28px rgba(80,55,190,.18), inset 0 1px 0 rgba(255,255,255,.76)!important;
}
body:not(.dragon-studio-mode) #levelPage .level-card>.level-icon::before{
  content:none!important;
}
body:not(.dragon-studio-mode) #levelPage .level-card>.level-icon img,
body:not(.dragon-studio-mode) #levelPage .level-grid.ssat .level-card>.level-icon img{
  width:104px!important;
  height:104px!important;
  object-fit:contain!important;
  padding:0!important;
  filter:drop-shadow(0 12px 14px rgba(80,55,190,.22))!important;
}
body:not(.dragon-studio-mode) #levelPage .level-card>div:nth-child(2),
body:not(.dragon-studio-mode) #levelPage .level-grid.ssat .level-card>div:nth-child(2){
  min-height:116px!important;
  margin:0 0 20px 150px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}
body:not(.dragon-studio-mode) #levelPage .level-card h3,
body:not(.dragon-studio-mode) #levelPage .level-grid.ssat .level-card h3{
  margin:0 0 14px!important;
  color:#071044!important;
  font-size:clamp(26px,1.7vw,34px)!important;
  line-height:1.05!important;
  font-weight:950!important;
  letter-spacing:0!important;
  text-shadow:0 1px 0 rgba(255,255,255,.68)!important;
}
body:not(.dragon-studio-mode) #levelPage .level-card p{
  margin:0!important;
  color:#242b57!important;
  font-size:17px!important;
  line-height:1.32!important;
  font-weight:650!important;
}
body:not(.dragon-studio-mode) #levelPage .level-card .grade{
  color:#5c4dff!important;
  font-weight:950!important;
}
body:not(.dragon-studio-mode) #levelPage .level-card .level-feature,
body:not(.dragon-studio-mode) #levelPage .level-grid.ssat .level-card .level-feature{
  display:block!important;
  margin-top:8px!important;
  padding:18px 0!important;
  border-top:1px solid rgba(120,115,170,.22)!important;
  color:#17204b!important;
  text-align:left!important;
  font-size:14px!important;
  line-height:1.35!important;
  font-weight:700!important;
}
body:not(.dragon-studio-mode) #levelPage .level-count-line{
  margin:0 0 14px!important;
  color:#3f4771!important;
  text-align:center!important;
  font-size:14px!important;
  line-height:1.2!important;
  font-weight:850!important;
}
body:not(.dragon-studio-mode) #levelPage .level-card .pricing-row,
body:not(.dragon-studio-mode) #levelPage .level-grid.ssat .level-card .pricing-row{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  min-height:92px!important;
  margin:0 0 22px!important;
  overflow:hidden!important;
  border:1.5px solid rgba(126,112,196,.30)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.64)!important;
  box-shadow:0 10px 22px rgba(44,35,104,.08)!important;
}
body:not(.dragon-studio-mode) #levelPage .level-card .price-choice,
body:not(.dragon-studio-mode) #levelPage .level-grid.ssat .level-card .price-choice{
  box-sizing:border-box!important;
  display:block!important;
  min-height:92px!important;
  padding:14px 12px!important;
  text-align:center!important;
  background:rgba(255,255,255,.68)!important;
  border-right:1px solid rgba(126,112,196,.22)!important;
  border-bottom:0!important;
  color:#071044!important;
  cursor:pointer!important;
}
body:not(.dragon-studio-mode) #levelPage .level-card .price-choice:last-child{
  border-right:0!important;
}
body:not(.dragon-studio-mode) #levelPage .level-card .radio{
  display:block!important;
  width:18px!important;
  height:18px!important;
  margin:0 auto 6px!important;
  border:2px solid rgba(112,101,190,.62)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.75)!important;
}
body:not(.dragon-studio-mode) #levelPage .level-card .radio.on{
  border:5px solid #5d4eff!important;
}
body:not(.dragon-studio-mode) #levelPage .level-card .price-choice b,
body:not(.dragon-studio-mode) #levelPage .level-grid.ssat .level-card .price-choice b{
  display:block!important;
  color:#071044!important;
  font-size:16px!important;
  line-height:1.05!important;
  font-weight:950!important;
}
body:not(.dragon-studio-mode) #levelPage .level-card .price-choice small,
body:not(.dragon-studio-mode) #levelPage .level-grid.ssat .level-card .price-choice small{
  display:block!important;
  margin:5px 0 0!important;
  color:#3f4771!important;
  font-size:12px!important;
  line-height:1.18!important;
  font-weight:800!important;
}
body:not(.dragon-studio-mode) #levelPage .level-card .yearly-price-copy{
  display:block!important;
}
body:not(.dragon-studio-mode) #levelPage .level-card .tag,
body:not(.dragon-studio-mode) #levelPage .level-grid.ssat .level-card .price-choice .tag{
  display:inline-block!important;
  margin:6px auto 0!important;
  padding:3px 10px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#ffe078,#f3c447)!important;
  color:#071044!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:950!important;
}
body:not(.dragon-studio-mode) #levelPage .level-card .start,
body:not(.dragon-studio-mode) #levelPage .level-grid.ssat .level-card .start{
  width:100%!important;
  min-height:56px!important;
  margin:auto 0 0!important;
  border:0!important;
  border-radius:13px!important;
  background:linear-gradient(180deg,#7867ff 0%,#4f36d8 100%)!important;
  color:#ffffff!important;
  font-size:20px!important;
  font-weight:950!important;
  box-shadow:0 12px 26px rgba(78,57,224,.30)!important;
}
body:not(.dragon-studio-mode) #levelPage .full-access-unlocks{
  box-sizing:border-box!important;
  width:min(1480px,calc(100% - 72px))!important;
  max-width:1480px!important;
  margin:28px auto 0!important;
  padding:28px!important;
  border-radius:24px!important;
  background:linear-gradient(180deg,rgba(18,27,67,.94),rgba(9,14,38,.97))!important;
  border:1px solid rgba(155,135,255,.42)!important;
  color:#f7f4ff!important;
  box-shadow:0 18px 48px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08)!important;
}
body:not(.dragon-studio-mode) #levelPage .full-access-unlocks h2{
  margin:0 0 24px!important;
  color:#ffffff!important;
  text-align:center!important;
  font-size:28px!important;
  line-height:1.1!important;
  font-weight:950!important;
}
body:not(.dragon-studio-mode) #levelPage .unlock-icon-row{
  display:grid!important;
  grid-template-columns:repeat(8,minmax(0,1fr))!important;
  gap:0!important;
  margin:0 0 28px!important;
  padding:0!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(155,135,255,.14)!important;
}
body:not(.dragon-studio-mode) #levelPage .unlock-icon-item{
  display:grid!important;
  justify-items:center!important;
  align-content:center!important;
  gap:11px!important;
  min-height:126px!important;
  padding:18px 12px!important;
  text-align:center!important;
  border-right:1px solid rgba(155,135,255,.24)!important;
  color:#ffffff!important;
}
body:not(.dragon-studio-mode) #levelPage .unlock-icon-item:last-child{
  border-right:0!important;
}
body:not(.dragon-studio-mode) #levelPage .unlock-icon-item i{
  width:66px!important;
  height:66px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  background:radial-gradient(circle,rgba(132,108,255,.40),rgba(75,55,180,.20))!important;
  border:1px solid rgba(170,150,255,.36)!important;
  box-shadow:0 0 18px rgba(120,96,255,.30)!important;
}
body:not(.dragon-studio-mode) #levelPage .unlock-icon-item img{
  width:36px!important;
  height:36px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.20))!important;
}
body:not(.dragon-studio-mode) #levelPage .unlock-icon-item b{
  color:#ffffff!important;
  font-size:15px!important;
  line-height:1.22!important;
  font-weight:950!important;
}
body:not(.dragon-studio-mode) #levelPage .plan-summary-strip{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:0!important;
  overflow:hidden!important;
  border-radius:22px!important;
  background:linear-gradient(180deg,rgba(13,21,56,.96),rgba(7,12,34,.98))!important;
  border:1px solid rgba(155,135,255,.36)!important;
  color:#f7f4ff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
body:not(.dragon-studio-mode) #levelPage .plan-summary-card{
  display:grid!important;
  grid-template-columns:82px minmax(0,1fr)!important;
  align-items:center!important;
  gap:18px!important;
  min-height:150px!important;
  padding:24px 30px!important;
  border:0!important;
  border-right:1px solid rgba(155,135,255,.24)!important;
  border-radius:0!important;
  background:transparent!important;
  color:#f7f4ff!important;
  text-align:left!important;
  box-shadow:none!important;
}
body:not(.dragon-studio-mode) #levelPage .plan-summary-card:last-child{
  border-right:0!important;
}
body:not(.dragon-studio-mode) #levelPage .plan-summary-card i{
  width:70px!important;
  height:70px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  background:radial-gradient(circle,rgba(132,108,255,.40),rgba(75,55,180,.20))!important;
  border:1px solid rgba(170,150,255,.34)!important;
  box-shadow:0 0 18px rgba(120,96,255,.26)!important;
}
body:not(.dragon-studio-mode) #levelPage .plan-summary-card h3{
  margin:0 0 8px!important;
  color:#ffffff!important;
  font-size:22px!important;
  line-height:1.08!important;
  font-weight:950!important;
}
body:not(.dragon-studio-mode) #levelPage .plan-summary-card p{
  margin:0!important;
  color:rgba(235,232,255,.78)!important;
  font-size:14px!important;
  line-height:1.35!important;
  font-weight:600!important;
}
body:not(.dragon-studio-mode) #levelPage .plan-summary-card strong{
  display:block!important;
  margin-top:10px!important;
  color:#bcaaff!important;
  font-size:18px!important;
  font-weight:950!important;
}
body:not(.dragon-studio-mode) #levelPage .plan-summary-card em{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin-left:10px!important;
  padding:4px 12px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#ffe078,#f3c447)!important;
  color:#071044!important;
  font-size:13px!important;
  font-style:normal!important;
  font-weight:950!important;
}

@media(max-width:1180px){
  body:not(.dragon-studio-mode) #levelPage .level-grid,
  body:not(.dragon-studio-mode) #levelPage .level-grid.ssat,
  body:not(.dragon-studio-mode) #levelPage .level-grid.isee,
  body:not(.dragon-studio-mode) #levelPage .level-grid.g212{
    grid-template-columns:1fr!important;
    width:min(720px,calc(100% - 32px))!important;
  }
  body:not(.dragon-studio-mode) #levelPage .full-access-unlocks,
  body:not(.dragon-studio-mode) #levelPage .level-hero{
    width:min(900px,calc(100% - 32px))!important;
  }
  body:not(.dragon-studio-mode) #levelPage .unlock-icon-row{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  body:not(.dragon-studio-mode) #levelPage .unlock-icon-item:nth-child(4n){
    border-right:0!important;
  }
  body:not(.dragon-studio-mode) #levelPage .plan-summary-strip{
    grid-template-columns:1fr!important;
  }
  body:not(.dragon-studio-mode) #levelPage .plan-summary-card{
    border-right:0!important;
    border-bottom:1px solid rgba(155,135,255,.24)!important;
  }
  body:not(.dragon-studio-mode) #levelPage .plan-summary-card:last-child{
    border-bottom:0!important;
  }
}
@media(max-width:640px){
  body:not(.dragon-studio-mode) #levelPage.page{
    padding:24px 14px 36px!important;
  }
  body:not(.dragon-studio-mode) #levelPage .level-hero,
  body:not(.dragon-studio-mode) #levelPage .level-grid,
  body:not(.dragon-studio-mode) #levelPage .full-access-unlocks{
    width:100%!important;
  }
  body:not(.dragon-studio-mode) #levelPage .level-card,
  body:not(.dragon-studio-mode) #levelPage .level-grid.ssat .level-card{
    min-height:0!important;
    padding:20px!important;
  }
  body:not(.dragon-studio-mode) #levelPage .level-card>.level-icon,
  body:not(.dragon-studio-mode) #levelPage .level-grid.ssat .level-card>.level-icon{
    width:82px!important;
    height:82px!important;
    left:20px!important;
    top:20px!important;
  }
  body:not(.dragon-studio-mode) #levelPage .level-card>.level-icon img,
  body:not(.dragon-studio-mode) #levelPage .level-grid.ssat .level-card>.level-icon img{
    width:76px!important;
    height:76px!important;
  }
  body:not(.dragon-studio-mode) #levelPage .level-card>div:nth-child(2),
  body:not(.dragon-studio-mode) #levelPage .level-grid.ssat .level-card>div:nth-child(2){
    min-height:82px!important;
    margin-left:102px!important;
  }
  body:not(.dragon-studio-mode) #levelPage .level-card h3{
    font-size:24px!important;
  }
  body:not(.dragon-studio-mode) #levelPage .level-card p{
    font-size:14px!important;
  }
  body:not(.dragon-studio-mode) #levelPage .level-card .pricing-row{
    grid-template-columns:1fr!important;
  }
  body:not(.dragon-studio-mode) #levelPage .level-card .price-choice{
    min-height:70px!important;
    border-right:0!important;
    border-bottom:1px solid rgba(126,112,196,.22)!important;
  }
  body:not(.dragon-studio-mode) #levelPage .level-card .price-choice:last-child{
    border-bottom:0!important;
  }
  body:not(.dragon-studio-mode) #levelPage .unlock-icon-row{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body:not(.dragon-studio-mode) #levelPage .unlock-icon-item{
    border-right:0!important;
  }
  body:not(.dragon-studio-mode) #levelPage .plan-summary-card{
    grid-template-columns:62px minmax(0,1fr)!important;
    padding:20px!important;
  }
  body:not(.dragon-studio-mode) #levelPage .plan-summary-card i{
    width:58px!important;
    height:58px!important;
  }
}

/* Restore previous working home page style: white cards and centered white feature strip. */
body:not(.dragon-studio-mode) #homePage.page{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:12px 24px 52px!important;
  overflow-x:hidden!important;
}

body:not(.dragon-studio-mode) #homePage .compact-hero{
  max-width:1320px!important;
  margin:0 auto 12px!important;
  padding:0 16px!important;
  text-align:center!important;
}

body:not(.dragon-studio-mode) #homePage .hero h1{
  margin:0 0 6px!important;
  color:#ffffff!important;
  font-size:clamp(36px,3.15vw,52px)!important;
  line-height:1.02!important;
  font-weight:950!important;
  letter-spacing:0!important;
  text-align:center!important;
  text-shadow:0 10px 28px rgba(0,0,0,.30)!important;
}

body:not(.dragon-studio-mode) #homePage .hero p{
  margin:0 auto!important;
  color:rgba(247,248,255,.92)!important;
  font-size:14px!important;
  line-height:1.35!important;
  font-weight:500!important;
  text-align:center!important;
}

body:not(.dragon-studio-mode) #homePage .info-pill{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:26px!important;
  margin:10px auto 0!important;
  padding:0 18px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.94)!important;
  border:1px solid rgba(190,182,255,.32)!important;
  color:#5e4be8!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:900!important;
  box-shadow:0 8px 18px rgba(6,16,40,.12)!important;
}

body:not(.dragon-studio-mode) #homePage .home-product-grid{
  box-sizing:border-box!important;
  width:min(100%,1380px)!important;
  max-width:1380px!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:16px!important;
  align-items:stretch!important;
  justify-content:center!important;
}

body:not(.dragon-studio-mode) #homePage .product-card.exam-card{
  box-sizing:border-box!important;
  position:relative!important;
  isolation:auto!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  min-width:0!important;
  width:100%!important;
  min-height:292px!important;
  height:100%!important;
  padding:20px 26px 14px!important;
  gap:8px!important;
  border-radius:14px!important;
  border:1px solid rgba(225,222,246,.92)!important;
  background:#ffffff!important;
  background-image:none!important;
  box-shadow:0 14px 30px rgba(18,18,60,.14)!important;
  opacity:1!important;
  transform:none!important;
}

body:not(.dragon-studio-mode) #homePage .product-card.exam-card::before{
  display:none!important;
  content:none!important;
}

body:not(.dragon-studio-mode) #homePage .product-card.exam-card>*{
  position:relative!important;
  z-index:1!important;
}

body:not(.dragon-studio-mode) #homePage .product-card .mascot-wrap.image-mascot{
  flex:0 0 auto!important;
  order:0!important;
  width:112px!important;
  height:92px!important;
  margin:0 auto 2px!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:0!important;
  border-radius:50%!important;
  background:radial-gradient(circle,rgba(255,255,255,.96) 0%,rgba(248,246,255,.80) 56%,rgba(255,255,255,0) 72%)!important;
  box-shadow:none!important;
  filter:none!important;
  overflow:visible!important;
}

body:not(.dragon-studio-mode) #homePage .product-card .mascot-wrap.image-mascot::after{
  display:none!important;
}

body:not(.dragon-studio-mode) #homePage .product-card .mascot-wrap.image-mascot img{
  width:94px!important;
  height:94px!important;
  max-width:94px!important;
  max-height:94px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 12px 17px rgba(61,47,150,.22))!important;
}

body:not(.dragon-studio-mode) #homePage .product-card .exam-copy{
  flex:1 1 auto!important;
  order:1!important;
  min-width:0!important;
  width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:7px!important;
  text-align:center!important;
}

body:not(.dragon-studio-mode) #homePage .product-card .exam-copy h2{
  margin:0!important;
  max-width:100%!important;
  color:#09103d!important;
  font-size:clamp(22px,1.35vw,29px)!important;
  line-height:1.08!important;
  font-weight:950!important;
  letter-spacing:0!important;
  text-align:center!important;
  text-shadow:none!important;
}

body:not(.dragon-studio-mode) #homePage .product-card .exam-copy h2::after{
  content:""!important;
  display:block!important;
  width:100%!important;
  height:1px!important;
  margin:8px auto 0!important;
  background:rgba(225,222,246,.70)!important;
}

body:not(.dragon-studio-mode) #homePage .product-card .exam-copy p{
  margin:0!important;
  max-width:700px!important;
  min-height:32px!important;
  color:#3f496c!important;
  font-size:11.5px!important;
  line-height:1.28!important;
  font-weight:500!important;
  text-align:center!important;
}

body:not(.dragon-studio-mode) #homePage .product-card .chips,
body:not(.dragon-studio-mode) #homePage .product-card .chips.ssat,
body:not(.dragon-studio-mode) #homePage .product-card .chips.coming{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  align-items:center!important;
  gap:5px 8px!important;
  max-width:100%!important;
  margin:0!important;
}

body:not(.dragon-studio-mode) #homePage .product-card .chips span{
  min-width:0!important;
  padding:3px 9px!important;
  border-radius:999px!important;
  background:#ffffff!important;
  border:1.2px solid #d8d2ff!important;
  color:#5e4be8!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:900!important;
  text-align:center!important;
  box-shadow:none!important;
}

body:not(.dragon-studio-mode) #homePage .product-card.coming-soon-card .chips span,
body:not(.dragon-studio-mode) #homePage .product-card .chips.coming span{
  border-color:#dbc789!important;
  color:#9a7420!important;
  background:#fffdfa!important;
}

body:not(.dragon-studio-mode) #homePage .product-card .primary-wide{
  box-sizing:border-box!important;
  flex:0 0 auto!important;
  order:2!important;
  align-self:center!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  width:86%!important;
  max-width:520px!important;
  min-height:40px!important;
  margin:8px auto 0!important;
  padding:0 18px!important;
  border:0!important;
  border-radius:8px!important;
  background:linear-gradient(180deg,#6656f6 0%,#4e37d5 100%)!important;
  color:#ffffff!important;
  font-size:15px!important;
  line-height:1!important;
  font-weight:950!important;
  white-space:nowrap!important;
  box-shadow:0 10px 22px rgba(90,67,220,.24)!important;
  overflow:hidden!important;
}

body:not(.dragon-studio-mode) #homePage .product-card .primary-wide.disabled,
body:not(.dragon-studio-mode) #homePage .product-card.coming-soon-card .primary-wide{
  background:#d7d0ef!important;
  color:#746d9a!important;
  opacity:1!important;
  box-shadow:none!important;
}

body:not(.dragon-studio-mode) #homePage .home-strip.feature-strip,
body:not(.dragon-studio-mode) #homePage .home-strip.premium-feature-row{
  box-sizing:border-box!important;
  width:min(100%,1100px)!important;
  max-width:1100px!important;
  margin:18px auto 0!important;
  margin-left:auto!important;
  margin-right:auto!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:0!important;
  padding:18px 22px!important;
  border-radius:14px!important;
  background:#ffffff!important;
  border:1px solid rgba(225,222,246,.92)!important;
  box-shadow:0 14px 30px rgba(18,18,60,.14)!important;
  overflow:hidden!important;
}

body:not(.dragon-studio-mode) #homePage .home-strip .feature,
body:not(.dragon-studio-mode) #homePage .home-strip .feature-item{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  justify-items:center!important;
  align-content:start!important;
  gap:8px!important;
  padding:0 18px!important;
  text-align:center!important;
  border-right:1px solid rgba(225,222,246,.92)!important;
  color:#09103d!important;
}

body:not(.dragon-studio-mode) #homePage .home-strip .feature:last-child{
  border-right:0!important;
}

body:not(.dragon-studio-mode) #homePage .home-strip .feature-icon-circle,
body:not(.dragon-studio-mode) #homePage .home-strip .feature-icon{
  width:52px!important;
  height:52px!important;
  min-width:52px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:0!important;
  border-radius:50%!important;
  background:#f1edff!important;
  box-shadow:none!important;
  overflow:hidden!important;
}

body:not(.dragon-studio-mode) #homePage .home-strip .feature-icon-circle img,
body:not(.dragon-studio-mode) #homePage .home-strip .feature-icon img{
  width:44px!important;
  height:44px!important;
  object-fit:cover!important;
  border-radius:50%!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}

body:not(.dragon-studio-mode) #homePage .home-strip .feature-text{
  width:100%!important;
  max-width:180px!important;
  margin:0 auto!important;
  text-align:center!important;
}

body:not(.dragon-studio-mode) #homePage .home-strip .feature-text h3,
body:not(.dragon-studio-mode) #homePage .home-strip .feature b{
  margin:0!important;
  color:#09103d!important;
  font-size:12px!important;
  line-height:1.18!important;
  font-weight:950!important;
  text-align:center!important;
  white-space:normal!important;
}

body:not(.dragon-studio-mode) #homePage .home-strip .feature-text p,
body:not(.dragon-studio-mode) #homePage .home-strip .feature span{
  margin:4px 0 0!important;
  color:#3f496c!important;
  font-size:10.8px!important;
  line-height:1.26!important;
  font-weight:500!important;
  text-align:center!important;
}

@media(max-width:1100px){
  body:not(.dragon-studio-mode) #homePage .home-product-grid{
    width:min(100%,900px)!important;
    max-width:900px!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body:not(.dragon-studio-mode) #homePage .home-strip.feature-strip,
  body:not(.dragon-studio-mode) #homePage .home-strip.premium-feature-row{
    width:min(100%,900px)!important;
    max-width:900px!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body:not(.dragon-studio-mode) #homePage .home-strip .feature{
    border-right:0!important;
    border-bottom:1px solid rgba(225,222,246,.92)!important;
    padding:16px!important;
  }
  body:not(.dragon-studio-mode) #homePage .home-strip .feature:nth-child(odd){
    border-right:1px solid rgba(225,222,246,.92)!important;
  }
}

@media(max-width:640px){
  body:not(.dragon-studio-mode) #homePage.page{
    padding:18px 14px 34px!important;
  }
  body:not(.dragon-studio-mode) #homePage .home-product-grid,
  body:not(.dragon-studio-mode) #homePage .home-strip.feature-strip,
  body:not(.dragon-studio-mode) #homePage .home-strip.premium-feature-row{
    width:100%!important;
    max-width:100%!important;
    grid-template-columns:1fr!important;
  }
  body:not(.dragon-studio-mode) #homePage .product-card.exam-card{
    min-height:0!important;
    padding:18px 16px 14px!important;
  }
  body:not(.dragon-studio-mode) #homePage .product-card .primary-wide{
    width:100%!important;
    max-width:100%!important;
    white-space:normal!important;
  }
  body:not(.dragon-studio-mode) #homePage .home-strip .feature,
  body:not(.dragon-studio-mode) #homePage .home-strip .feature:nth-child(odd){
    border-right:0!important;
  }
}

/* Restore previous working level selection page style: white cards and white access panels. */
body:not(.dragon-studio-mode) #levelPage.page{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  min-height:calc(100vh - 78px)!important;
  margin:0!important;
  padding:42px 34px 46px!important;
  overflow-x:hidden!important;
  background:
    radial-gradient(circle at 50% 10%,rgba(255,255,255,.035),transparent 28%),
    linear-gradient(180deg,#111d40 0%,#08142d 100%)!important;
}

body:not(.dragon-studio-mode) #levelPage.page::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:-1!important;
  pointer-events:none!important;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.18) 1px,transparent 1.5px),
    radial-gradient(circle,rgba(146,161,255,.14) 1px,transparent 1.5px)!important;
  background-size:120px 120px,180px 180px!important;
  background-position:20px 28px,82px 76px!important;
  opacity:.18!important;
}

body:not(.dragon-studio-mode) #levelPage .level-hero{
  width:min(1320px,calc(100% - 36px))!important;
  max-width:1320px!important;
  margin:0 auto 28px!important;
  padding:0!important;
  text-align:center!important;
}

body:not(.dragon-studio-mode) #levelPage .level-hero h1{
  margin:0 0 10px!important;
  color:#ffffff!important;
  font-size:clamp(42px,3.4vw,62px)!important;
  line-height:1.04!important;
  font-weight:950!important;
  letter-spacing:0!important;
  text-shadow:0 12px 34px rgba(0,0,0,.30)!important;
}

body:not(.dragon-studio-mode) #levelPage .level-hero p{
  margin:0 auto!important;
  color:rgba(236,241,255,.86)!important;
  font-size:18px!important;
  line-height:1.35!important;
  font-weight:650!important;
}

body:not(.dragon-studio-mode) #levelPage .level-hero .info-pill{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:34px!important;
  margin:14px auto 0!important;
  padding:0 24px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.94)!important;
  border:1px solid rgba(190,182,255,.32)!important;
  color:#5e4be8!important;
  font-size:14px!important;
  line-height:1!important;
  font-weight:900!important;
  box-shadow:0 10px 24px rgba(6,16,40,.12)!important;
}

body:not(.dragon-studio-mode) #levelPage .level-grid,
body:not(.dragon-studio-mode) #levelPage .level-grid.ssat,
body:not(.dragon-studio-mode) #levelPage .level-grid.isee{
  box-sizing:border-box!important;
  width:min(1420px,calc(100% - 72px))!important;
  max-width:1420px!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:24px!important;
  align-items:stretch!important;
  justify-content:center!important;
}

body:not(.dragon-studio-mode) #levelPage .level-grid.g212{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card,
body:not(.dragon-studio-mode) #levelPage .level-grid.ssat .level-card{
  box-sizing:border-box!important;
  position:relative!important;
  isolation:auto!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  min-width:0!important;
  min-height:430px!important;
  padding:26px 28px 24px!important;
  border-radius:18px!important;
  border:1px solid #dddcec!important;
  background:#ffffff!important;
  background-image:none!important;
  color:#07133f!important;
  box-shadow:0 18px 38px rgba(18,18,60,.16)!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card::before{
  display:none!important;
  content:none!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card>*{
  position:relative!important;
  z-index:1!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card>.level-icon,
body:not(.dragon-studio-mode) #levelPage .level-grid.ssat .level-card>.level-icon{
  position:absolute!important;
  left:26px!important;
  top:26px!important;
  width:86px!important;
  height:86px!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:18px!important;
  background:#f5f3ff!important;
  border:1px solid #e5e1fb!important;
  box-shadow:0 12px 24px rgba(38,28,104,.10)!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card>.level-icon::before{
  display:none!important;
  content:none!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card>.level-icon img,
body:not(.dragon-studio-mode) #levelPage .level-grid.ssat .level-card>.level-icon img{
  width:78px!important;
  height:78px!important;
  object-fit:contain!important;
  padding:0!important;
  filter:none!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card>div:nth-child(2),
body:not(.dragon-studio-mode) #levelPage .level-grid.ssat .level-card>div:nth-child(2){
  min-height:86px!important;
  margin:0 0 22px 112px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card h3,
body:not(.dragon-studio-mode) #levelPage .level-grid.ssat .level-card h3{
  margin:0 0 8px!important;
  color:#07133f!important;
  font-size:26px!important;
  line-height:1.08!important;
  font-weight:950!important;
  letter-spacing:0!important;
  text-shadow:none!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card p{
  margin:0!important;
  color:#49557a!important;
  font-size:16px!important;
  line-height:1.35!important;
  font-weight:650!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card .grade{
  color:#5742e8!important;
  font-weight:950!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card .level-feature,
body:not(.dragon-studio-mode) #levelPage .level-grid.ssat .level-card .level-feature{
  display:block!important;
  margin:0!important;
  padding:18px 0!important;
  border-top:1px solid #dddcec!important;
  color:#384467!important;
  text-align:left!important;
  font-size:14px!important;
  line-height:1.35!important;
  font-weight:650!important;
}

body:not(.dragon-studio-mode) #levelPage .level-count-line{
  margin:0 0 14px!important;
  color:#70779b!important;
  text-align:center!important;
  font-size:13px!important;
  line-height:1.2!important;
  font-weight:850!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card .pricing-row,
body:not(.dragon-studio-mode) #levelPage .level-grid.ssat .level-card .pricing-row{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  min-height:82px!important;
  margin:0 0 24px!important;
  overflow:hidden!important;
  border:1px solid #dddcec!important;
  border-radius:12px!important;
  background:#ffffff!important;
  box-shadow:none!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card .price-choice,
body:not(.dragon-studio-mode) #levelPage .level-grid.ssat .level-card .price-choice{
  box-sizing:border-box!important;
  display:block!important;
  min-height:82px!important;
  padding:12px 10px!important;
  text-align:center!important;
  background:#ffffff!important;
  border-right:1px solid #dddcec!important;
  border-bottom:0!important;
  color:#07133f!important;
  cursor:pointer!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card .price-choice:last-child{
  border-right:0!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card .radio{
  display:block!important;
  width:17px!important;
  height:17px!important;
  margin:0 auto 6px!important;
  border:1.5px solid #9ea5c2!important;
  border-radius:999px!important;
  background:#ffffff!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card .radio.on{
  border:5px solid #5742e8!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card .price-choice b,
body:not(.dragon-studio-mode) #levelPage .level-grid.ssat .level-card .price-choice b{
  display:block!important;
  color:#07133f!important;
  font-size:14px!important;
  line-height:1.05!important;
  font-weight:950!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card .price-choice small,
body:not(.dragon-studio-mode) #levelPage .level-grid.ssat .level-card .price-choice small{
  display:block!important;
  margin:5px 0 0!important;
  color:#49557a!important;
  font-size:11px!important;
  line-height:1.18!important;
  font-weight:750!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card .yearly-price-copy{
  display:block!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card .tag,
body:not(.dragon-studio-mode) #levelPage .level-grid.ssat .level-card .price-choice .tag{
  display:inline-block!important;
  margin:5px auto 0!important;
  padding:3px 10px!important;
  border-radius:999px!important;
  background:#f3d06a!important;
  color:#07133f!important;
  font-size:11px!important;
  line-height:1!important;
  font-style:normal!important;
  font-weight:950!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card .start,
body:not(.dragon-studio-mode) #levelPage .level-grid.ssat .level-card .start{
  width:100%!important;
  min-height:56px!important;
  margin:auto 0 0!important;
  border:0!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,#6656f6,#4e37d5)!important;
  color:#ffffff!important;
  font-size:19px!important;
  font-weight:950!important;
  box-shadow:0 12px 24px rgba(73,50,205,.22)!important;
}

body:not(.dragon-studio-mode) #levelPage .full-access-unlocks{
  box-sizing:border-box!important;
  width:min(1420px,calc(100% - 72px))!important;
  max-width:1420px!important;
  margin:28px auto 0!important;
  padding:24px 28px 28px!important;
  border-radius:18px!important;
  background:#ffffff!important;
  background-image:none!important;
  border:1px solid #dddcec!important;
  color:#07133f!important;
  box-shadow:0 18px 38px rgba(18,18,60,.16)!important;
}

body:not(.dragon-studio-mode) #levelPage .full-access-unlocks h2{
  margin:0 0 22px!important;
  color:#07133f!important;
  text-align:center!important;
  font-size:26px!important;
  line-height:1.1!important;
  font-weight:950!important;
}

body:not(.dragon-studio-mode) #levelPage .unlock-icon-row{
  display:grid!important;
  grid-template-columns:repeat(8,minmax(0,1fr))!important;
  gap:0!important;
  margin:0 0 26px!important;
  padding:0!important;
  background:#ffffff!important;
  border:0!important;
}

body:not(.dragon-studio-mode) #levelPage .unlock-icon-item{
  display:grid!important;
  justify-items:center!important;
  align-content:center!important;
  gap:9px!important;
  min-height:116px!important;
  padding:0 12px!important;
  text-align:center!important;
  border-right:1px solid #dddcec!important;
  color:#07133f!important;
  background:transparent!important;
}

body:not(.dragon-studio-mode) #levelPage .unlock-icon-item:last-child{
  border-right:0!important;
}

body:not(.dragon-studio-mode) #levelPage .unlock-icon-item i{
  width:62px!important;
  height:62px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  background:#f0eefc!important;
  border:0!important;
  box-shadow:none!important;
}

body:not(.dragon-studio-mode) #levelPage .unlock-icon-item img{
  width:34px!important;
  height:34px!important;
  object-fit:contain!important;
  filter:none!important;
}

body:not(.dragon-studio-mode) #levelPage .unlock-icon-item b{
  color:#07133f!important;
  font-size:14px!important;
  line-height:1.22!important;
  font-weight:950!important;
}

body:not(.dragon-studio-mode) #levelPage .plan-summary-strip{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:0!important;
  overflow:hidden!important;
  border-radius:12px!important;
  background:#ffffff!important;
  border:1px solid #dddcec!important;
  color:#07133f!important;
  box-shadow:none!important;
}

body:not(.dragon-studio-mode) #levelPage .plan-summary-card{
  display:grid!important;
  grid-template-columns:82px minmax(0,1fr)!important;
  align-items:center!important;
  gap:16px!important;
  min-height:124px!important;
  padding:20px 24px!important;
  border:0!important;
  border-right:1px solid #dddcec!important;
  border-radius:0!important;
  background:#ffffff!important;
  color:#07133f!important;
  text-align:left!important;
  box-shadow:none!important;
}

body:not(.dragon-studio-mode) #levelPage .plan-summary-card:last-child{
  border-right:0!important;
}

body:not(.dragon-studio-mode) #levelPage .plan-summary-card.yearly{
  background:#fff8e8!important;
  border:1.5px solid #f2c454!important;
}

body:not(.dragon-studio-mode) #levelPage .plan-summary-card i{
  width:70px!important;
  height:70px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  background:#f0eefc!important;
  border:0!important;
  box-shadow:none!important;
  color:#5742e8!important;
  font-style:normal!important;
}

body:not(.dragon-studio-mode) #levelPage .plan-summary-card.yearly i{
  background:#ffffff!important;
  border:2px solid #f4de9a!important;
  color:#d4a21c!important;
}

body:not(.dragon-studio-mode) #levelPage .plan-summary-card h3{
  margin:0 0 7px!important;
  color:#07133f!important;
  font-size:20px!important;
  line-height:1.08!important;
  font-weight:950!important;
}

body:not(.dragon-studio-mode) #levelPage .plan-summary-card p{
  margin:0!important;
  color:#49557a!important;
  font-size:14px!important;
  line-height:1.35!important;
  font-weight:500!important;
}

body:not(.dragon-studio-mode) #levelPage .plan-summary-card strong{
  display:block!important;
  margin-top:7px!important;
  color:#07133f!important;
  font-size:15px!important;
  font-weight:950!important;
}

body:not(.dragon-studio-mode) #levelPage .plan-summary-card em{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin-left:0!important;
  margin-top:7px!important;
  padding:4px 14px!important;
  border-radius:999px!important;
  background:#f3d06a!important;
  color:#07133f!important;
  font-size:13px!important;
  font-style:normal!important;
  font-weight:950!important;
}

@media(max-width:1050px){
  body:not(.dragon-studio-mode) #levelPage .level-grid,
  body:not(.dragon-studio-mode) #levelPage .level-grid.ssat,
  body:not(.dragon-studio-mode) #levelPage .level-grid.isee,
  body:not(.dragon-studio-mode) #levelPage .level-grid.g212{
    grid-template-columns:1fr!important;
    width:min(650px,calc(100% - 32px))!important;
  }
  body:not(.dragon-studio-mode) #levelPage .full-access-unlocks,
  body:not(.dragon-studio-mode) #levelPage .level-hero{
    width:min(900px,calc(100% - 32px))!important;
  }
  body:not(.dragon-studio-mode) #levelPage .unlock-icon-row{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:16px!important;
  }
  body:not(.dragon-studio-mode) #levelPage .unlock-icon-item:nth-child(4n){
    border-right:0!important;
  }
  body:not(.dragon-studio-mode) #levelPage .plan-summary-strip{
    grid-template-columns:1fr!important;
  }
  body:not(.dragon-studio-mode) #levelPage .plan-summary-card{
    border-right:0!important;
    border-bottom:1px solid #dddcec!important;
  }
  body:not(.dragon-studio-mode) #levelPage .plan-summary-card:last-child{
    border-bottom:0!important;
  }
}

@media(max-width:620px){
  body:not(.dragon-studio-mode) #levelPage.page{
    padding:28px 14px 36px!important;
  }
  body:not(.dragon-studio-mode) #levelPage .level-hero,
  body:not(.dragon-studio-mode) #levelPage .level-grid,
  body:not(.dragon-studio-mode) #levelPage .full-access-unlocks{
    width:100%!important;
  }
  body:not(.dragon-studio-mode) #levelPage .level-card,
  body:not(.dragon-studio-mode) #levelPage .level-grid.ssat .level-card{
    min-height:0!important;
    padding:18px!important;
  }
  body:not(.dragon-studio-mode) #levelPage .level-card>.level-icon,
  body:not(.dragon-studio-mode) #levelPage .level-grid.ssat .level-card>.level-icon{
    width:76px!important;
    height:76px!important;
    left:18px!important;
    top:18px!important;
  }
  body:not(.dragon-studio-mode) #levelPage .level-card>.level-icon img,
  body:not(.dragon-studio-mode) #levelPage .level-grid.ssat .level-card>.level-icon img{
    width:72px!important;
    height:72px!important;
  }
  body:not(.dragon-studio-mode) #levelPage .level-card>div:nth-child(2),
  body:not(.dragon-studio-mode) #levelPage .level-grid.ssat .level-card>div:nth-child(2){
    min-height:76px!important;
    margin-left:92px!important;
  }
  body:not(.dragon-studio-mode) #levelPage .level-card .pricing-row{
    grid-template-columns:1fr!important;
  }
  body:not(.dragon-studio-mode) #levelPage .level-card .price-choice{
    min-height:70px!important;
    border-right:0!important;
    border-bottom:1px solid #dddcec!important;
  }
  body:not(.dragon-studio-mode) #levelPage .level-card .price-choice:last-child{
    border-bottom:0!important;
  }
  body:not(.dragon-studio-mode) #levelPage .unlock-icon-row{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body:not(.dragon-studio-mode) #levelPage .unlock-icon-item{
    border-right:0!important;
  }
  body:not(.dragon-studio-mode) #levelPage .plan-summary-card{
    grid-template-columns:58px minmax(0,1fr)!important;
    padding:16px!important;
  }
  body:not(.dragon-studio-mode) #levelPage .plan-summary-card i{
    width:56px!important;
    height:56px!important;
  }
}

/* Home alignment hotfix: keep card actions and the feature strip centered. */
#homePage.page.home-page{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding-left:24px!important;
  padding-right:24px!important;
  overflow-x:hidden!important;
}

#homePage .home-product-grid{
  box-sizing:border-box!important;
  width:min(calc(100vw - 48px),1380px)!important;
  max-width:1380px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:16px!important;
  justify-content:center!important;
  justify-items:stretch!important;
}

#homePage .product-card.exam-card{
  box-sizing:border-box!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  justify-items:center!important;
  align-items:start!important;
  gap:12px!important;
}

#homePage .product-card.exam-card > .mascot-wrap{
  grid-column:1!important;
  grid-row:1!important;
  justify-self:center!important;
}

#homePage .product-card.exam-card > .exam-copy{
  grid-column:1!important;
  grid-row:2!important;
  width:100%!important;
  min-width:0!important;
  justify-self:center!important;
}

#homePage .product-card.exam-card > .primary-wide,
#homePage .product-card.exam-card > .primary-wide.disabled{
  box-sizing:border-box!important;
  grid-column:1!important;
  grid-row:3!important;
  justify-self:center!important;
  align-self:end!important;
  position:relative!important;
  inset:auto!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  transform:none!important;
  translate:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:calc(100% - 48px)!important;
  max-width:520px!important;
  min-width:0!important;
  margin:14px auto 0!important;
  padding-left:18px!important;
  padding-right:18px!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}

#homePage .home-strip.feature-strip,
#homePage .home-strip.premium-feature-row{
  box-sizing:border-box!important;
  width:min(calc(100vw - 48px),1100px)!important;
  max-width:1100px!important;
  margin:18px auto 0!important;
  margin-left:auto!important;
  margin-right:auto!important;
  position:relative!important;
  inset:auto!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  transform:none!important;
  translate:none!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  justify-content:center!important;
  justify-items:center!important;
}

@media(max-width:1100px){
  #homePage .home-product-grid{
    width:min(calc(100vw - 32px),900px)!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  #homePage .home-strip.feature-strip,
  #homePage .home-strip.premium-feature-row{
    width:min(calc(100vw - 32px),900px)!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:640px){
  #homePage.page.home-page{
    padding-left:14px!important;
    padding-right:14px!important;
  }

  #homePage .home-product-grid,
  #homePage .home-strip.feature-strip,
  #homePage .home-strip.premium-feature-row{
    width:100%!important;
    max-width:100%!important;
    grid-template-columns:1fr!important;
  }

  #homePage .product-card.exam-card > .primary-wide,
  #homePage .product-card.exam-card > .primary-wide.disabled{
    width:100%!important;
    max-width:100%!important;
    white-space:normal!important;
  }
}

/* Study right sidebar card polish: keep headings/copy readable beside artwork. */
.study-page .right-col .game-zone-card,
.study-page .right-col .dragon-studio-card{
  position:relative!important;
  overflow:hidden!important;
  min-height:170px!important;
  padding:26px 160px 24px 28px!important;
}

.study-page .right-col .game-zone-card .study-promo-copy,
.study-page .right-col .dragon-studio-card .study-promo-copy{
  position:relative!important;
  z-index:2!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
}

.study-page .right-col .game-zone-card .study-promo-copy h3,
.study-page .right-col .dragon-studio-card .study-promo-copy h3{
  width:max-content!important;
  max-width:100%!important;
  margin:0 0 12px!important;
  white-space:nowrap!important;
  overflow:visible!important;
  color:#ffffff!important;
  font-size:clamp(24px, 2.35vw, 30px)!important;
  line-height:1.02!important;
}

.study-page .right-col .game-zone-card .study-promo-copy p,
.study-page .right-col .dragon-studio-card .study-promo-copy p{
  width:100%!important;
  max-width:250px!important;
  margin:0!important;
  color:rgba(235,238,255,.82)!important;
  font-size:clamp(15px, 1.55vw, 18px)!important;
  line-height:1.28!important;
  font-weight:750!important;
  overflow:visible!important;
}

.study-page .right-col .game-zone-card .study-promo-copy button,
.study-page .right-col .dragon-studio-card .study-promo-copy button,
.study-page .right-col>.badge-mini .badge-view-all-btn{
  position:absolute!important;
  top:22px!important;
  right:22px!important;
  left:auto!important;
  z-index:4!important;
}

.study-page .right-col .game-zone-card>img{
  position:absolute!important;
  right:22px!important;
  bottom:22px!important;
  left:auto!important;
  width:142px!important;
  max-width:34%!important;
  height:auto!important;
  object-fit:contain!important;
  z-index:1!important;
  pointer-events:none!important;
}

.study-page .right-col .dragon-studio-card{
  min-height:176px!important;
}

.study-page .right-col .dragon-studio-card>img:not(.baby-dragon-peek){
  position:absolute!important;
  right:44px!important;
  bottom:10px!important;
  left:auto!important;
  width:102px!important;
  max-width:25%!important;
  height:auto!important;
  object-fit:contain!important;
  z-index:1!important;
  pointer-events:none!important;
}

@media(max-width:640px){
  .study-page .right-col .game-zone-card,
  .study-page .right-col .dragon-studio-card{
    min-height:166px!important;
    padding:24px 148px 22px 24px!important;
  }

  .study-page .right-col .game-zone-card .study-promo-copy h3,
  .study-page .right-col .dragon-studio-card .study-promo-copy h3{
    font-size:clamp(23px, 6vw, 28px)!important;
  }

  .study-page .right-col .game-zone-card .study-promo-copy p,
  .study-page .right-col .dragon-studio-card .study-promo-copy p{
    max-width:220px!important;
    font-size:clamp(14px, 4vw, 17px)!important;
  }

  .study-page .right-col .game-zone-card .study-promo-copy button,
  .study-page .right-col .dragon-studio-card .study-promo-copy button,
  .study-page .right-col>.badge-mini .badge-view-all-btn{
    top:20px!important;
    right:20px!important;
  }

  .study-page .right-col .game-zone-card>img{
    right:18px!important;
    bottom:22px!important;
    width:132px!important;
    max-width:32%!important;
  }

  .study-page .right-col .dragon-studio-card>img:not(.baby-dragon-peek){
    right:38px!important;
    bottom:8px!important;
    width:96px!important;
    max-width:24%!important;
  }
}

@media(max-width:430px){
  .study-page .right-col .game-zone-card,
  .study-page .right-col .dragon-studio-card{
    padding-right:124px!important;
  }

  .study-page .right-col .game-zone-card .study-promo-copy h3,
  .study-page .right-col .dragon-studio-card .study-promo-copy h3{
    font-size:22px!important;
  }

  .study-page .right-col .game-zone-card .study-promo-copy p,
  .study-page .right-col .dragon-studio-card .study-promo-copy p{
    max-width:180px!important;
    font-size:14px!important;
  }

  .study-page .right-col .game-zone-card>img{
    width:112px!important;
    right:14px!important;
  }

  .study-page .right-col .dragon-studio-card>img:not(.baby-dragon-peek){
    width:84px!important;
    right:30px!important;
    bottom:8px!important;
  }
}

/* Study right rail height + typography fix. Keep scoped to the four cards beside flashcards. */
@media(min-width:1051px){
  .study-page .right-col{
    height:520px!important;
    gap:12px!important;
    overflow:visible!important;
  }

  .study-page .study-range-shell{
    flex:0 0 76px!important;
  }

  .study-page .study-range-card-button,
  .study-page #studyRangeButton{
    height:76px!important;
    min-height:76px!important;
  }

  .study-page .right-col .game-zone-card,
  .study-page .right-col .dragon-studio-card,
  .study-page .right-col>.badge-mini{
    flex:1 1 0!important;
    min-height:0!important;
    max-height:none!important;
    height:auto!important;
    border-radius:18px!important;
    overflow:hidden!important;
  }

  .study-page .right-col .game-zone-card,
  .study-page .right-col .dragon-studio-card{
    display:flex!important;
    align-items:stretch!important;
    position:relative!important;
    padding:18px 132px 16px 22px!important;
  }

  .study-page .right-col .game-zone-card .study-promo-copy,
  .study-page .right-col .dragon-studio-card .study-promo-copy{
    position:relative!important;
    z-index:2!important;
    width:100%!important;
    max-width:190px!important;
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:7px!important;
    padding-top:14px!important;
  }

  .study-page .right-col .game-zone-card .study-promo-copy h3,
  .study-page .right-col .dragon-studio-card .study-promo-copy h3{
    width:max-content!important;
    max-width:100%!important;
    margin:0!important;
    color:#ffffff!important;
    font-size:18px!important;
    line-height:1.12!important;
    font-weight:950!important;
    letter-spacing:0!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }

  .study-page .right-col .game-zone-card .study-promo-copy p,
  .study-page .right-col .dragon-studio-card .study-promo-copy p{
    width:100%!important;
    max-width:172px!important;
    margin:0!important;
    color:rgba(235,238,255,.82)!important;
    font-size:12.5px!important;
    line-height:1.28!important;
    font-weight:750!important;
    white-space:normal!important;
    overflow:visible!important;
  }

  .study-page .right-col .game-zone-card .study-promo-copy button,
  .study-page .right-col .dragon-studio-card .study-promo-copy button,
  .study-page .right-col>.badge-mini .badge-view-all-btn{
    position:absolute!important;
    top:18px!important;
    right:18px!important;
    left:auto!important;
    z-index:4!important;
    height:32px!important;
    min-height:32px!important;
    min-width:58px!important;
    padding:0 14px!important;
    border-radius:12px!important;
    font-size:13px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  .study-page .right-col .game-zone-card>img{
    position:absolute!important;
    right:20px!important;
    bottom:10px!important;
    width:118px!important;
    max-width:34%!important;
    height:auto!important;
    object-fit:contain!important;
    z-index:1!important;
  }

  .study-page .right-col .dragon-studio-card>img:not(.baby-dragon-peek){
    position:absolute!important;
    right:42px!important;
    bottom:8px!important;
    width:82px!important;
    max-width:25%!important;
    height:auto!important;
    object-fit:contain!important;
    z-index:1!important;
  }

  .study-page .right-col>.badge-mini{
    position:relative!important;
    padding:18px 20px 14px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
  }

  .study-page .right-col>.badge-mini h3{
    margin:0 92px 9px 0!important;
    color:#ffffff!important;
    font-size:18px!important;
    line-height:1.12!important;
    font-weight:950!important;
    white-space:nowrap!important;
  }

  .study-page .right-col .mini-badges{
    gap:8px!important;
    align-items:start!important;
  }

  .study-page .right-col .mini-badge img{
    width:40px!important;
    height:40px!important;
  }

  .study-page .right-col .mini-badge small{
    font-size:9.5px!important;
    line-height:1.15!important;
  }
}

@media(min-width:1051px) and (max-width:1500px){
  .study-page .right-col .game-zone-card,
  .study-page .right-col .dragon-studio-card{
    padding-right:112px!important;
  }

  .study-page .right-col .game-zone-card .study-promo-copy,
  .study-page .right-col .dragon-studio-card .study-promo-copy{
    max-width:186px!important;
  }

  .study-page .right-col .dragon-studio-card .study-promo-copy h3{
    font-size:17px!important;
  }

  .study-page .right-col .game-zone-card>img{
    width:108px!important;
    right:18px!important;
  }

  .study-page .right-col .dragon-studio-card>img:not(.baby-dragon-peek){
    width:76px!important;
    right:38px!important;
  }
}

@media(min-width:1051px){
  body:not(.dragon-studio-mode) #studyPage.study-page .right-col .game-zone-card .study-promo-copy,
  body:not(.dragon-studio-mode) #studyPage.study-page .right-col .dragon-studio-card .study-promo-copy{
    position:static!important;
    width:190px!important;
    max-width:190px!important;
    flex:0 0 190px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:7px!important;
    padding-top:14px!important;
  }

  body:not(.dragon-studio-mode) #studyPage.study-page .right-col .game-zone-card .study-promo-copy h3,
  body:not(.dragon-studio-mode) #studyPage.study-page .right-col .dragon-studio-card .study-promo-copy h3{
    width:max-content!important;
    max-width:190px!important;
    font-size:18px!important;
    line-height:1.12!important;
    white-space:nowrap!important;
    overflow:visible!important;
  }

  body:not(.dragon-studio-mode) #studyPage.study-page .right-col .game-zone-card .study-promo-copy p,
  body:not(.dragon-studio-mode) #studyPage.study-page .right-col .dragon-studio-card .study-promo-copy p{
    width:172px!important;
    max-width:172px!important;
    font-size:12.5px!important;
    line-height:1.28!important;
    white-space:normal!important;
    overflow:visible!important;
  }
}

@media(min-width:1051px) and (max-width:1500px){
  body:not(.dragon-studio-mode) #studyPage.study-page .right-col .game-zone-card .study-promo-copy,
  body:not(.dragon-studio-mode) #studyPage.study-page .right-col .dragon-studio-card .study-promo-copy{
    width:186px!important;
    max-width:186px!important;
    flex-basis:186px!important;
  }

  body:not(.dragon-studio-mode) #studyPage.study-page .right-col .dragon-studio-card .study-promo-copy h3{
    font-size:17px!important;
  }
}

/* Dragon Studio My Dragon footer edge span: override compact footer loaded earlier. */
body.dragon-studio-mode .ds-dashboard .my-dragon-card .my-dragon-footer.my-dragon-meta-bar{
  width:100%!important;
  max-width:none!important;
  min-height:64px!important;
  height:64px!important;
  margin:46px auto 20px!important;
  position:relative!important;
  top:14px!important;
  grid-template-columns:.9fr 1.18fr 1.28fr!important;
  border-radius:22px!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-card .my-dragon-footer .dragon-footer-item{
  min-height:64px!important;
  height:64px!important;
  padding:7px 14px!important;
  gap:4px!important;
  font-size:13px!important;
  line-height:1.05!important;
  font-weight:650!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-card .my-dragon-footer .dragon-mood-slot,
body.dragon-studio-mode .ds-dashboard .my-dragon-card .my-dragon-footer .dragon-dob-slot{
  flex-direction:column!important;
  gap:4px!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-card .my-dragon-footer .dragon-mood-display{
  flex-direction:column!important;
  gap:4px!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-card .my-dragon-footer .mood-emoji,
body.dragon-studio-mode .ds-dashboard .my-dragon-card .my-dragon-footer .dragon-mood-icon{
  width:26px!important;
  height:26px!important;
  min-width:26px!important;
  flex-basis:26px!important;
  font-size:16px!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-card .my-dragon-footer .dragon-dob-slot .ds-ui-icon,
body.dragon-studio-mode .ds-dashboard .my-dragon-card .my-dragon-footer .dragon-dob-slot img{
  width:22px!important;
  height:22px!important;
  flex-basis:22px!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-card .my-dragon-footer .mood-label,
body.dragon-studio-mode .ds-dashboard .my-dragon-card .my-dragon-footer .dragon-mood-text,
body.dragon-studio-mode .ds-dashboard .my-dragon-card .my-dragon-footer .dragon-dob-slot span,
body.dragon-studio-mode .ds-dashboard .my-dragon-card .my-dragon-footer .dragon-dob-slot b,
body.dragon-studio-mode .ds-dashboard .my-dragon-card .my-dragon-footer .switch-avatar-btn.change-avatar-button span{
  font-size:13px!important;
  line-height:1.05!important;
  font-weight:650!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-card .my-dragon-footer .dragon-avatar-slot{
  padding:8px 14px!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-card .my-dragon-footer .switch-avatar-btn.change-avatar-button{
  width:100%!important;
  max-width:190px!important;
  height:44px!important;
  min-height:44px!important;
  padding:0 12px!important;
  gap:7px!important;
  border-radius:16px!important;
  font-size:13px!important;
  font-weight:650!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-card .my-dragon-footer .switch-avatar-btn.change-avatar-button img{
  display:none!important;
}

@media(max-width:760px){
  body.dragon-studio-mode .ds-dashboard .my-dragon-card .my-dragon-footer.my-dragon-meta-bar{
    width:100%!important;
    min-height:58px!important;
    height:58px!important;
    margin:32px auto 18px!important;
    top:6px!important;
    grid-template-columns:.85fr 1.2fr 1.35fr!important;
    border-radius:18px!important;
  }

  body.dragon-studio-mode .ds-dashboard .my-dragon-card .my-dragon-footer .dragon-footer-item{
    min-height:58px!important;
    height:58px!important;
    padding:6px 7px!important;
    gap:4px!important;
  }

  body.dragon-studio-mode .ds-dashboard .my-dragon-card .my-dragon-footer .mood-label,
  body.dragon-studio-mode .ds-dashboard .my-dragon-card .my-dragon-footer .dragon-mood-text,
  body.dragon-studio-mode .ds-dashboard .my-dragon-card .my-dragon-footer .dragon-dob-slot span,
  body.dragon-studio-mode .ds-dashboard .my-dragon-card .my-dragon-footer .dragon-dob-slot b,
  body.dragon-studio-mode .ds-dashboard .my-dragon-card .my-dragon-footer .switch-avatar-btn.change-avatar-button span{
    font-size:10.5px!important;
    font-weight:600!important;
  }

  body.dragon-studio-mode .ds-dashboard .my-dragon-card .my-dragon-footer .mood-emoji,
  body.dragon-studio-mode .ds-dashboard .my-dragon-card .my-dragon-footer .dragon-mood-icon{
    width:22px!important;
    height:22px!important;
    min-width:22px!important;
    flex-basis:22px!important;
    font-size:14px!important;
  }

  body.dragon-studio-mode .ds-dashboard .my-dragon-card .my-dragon-footer .dragon-avatar-slot{
    padding:12px 10px!important;
  }

  body.dragon-studio-mode .ds-dashboard .my-dragon-card .my-dragon-footer .switch-avatar-btn.change-avatar-button{
    max-width:190px!important;
    height:38px!important;
    min-height:38px!important;
    padding:0 7px!important;
    gap:5px!important;
    border-radius:14px!important;
  }

  body.dragon-studio-mode .ds-dashboard .my-dragon-card .my-dragon-footer .switch-avatar-btn.change-avatar-button img{
    display:none!important;
  }
}

/* Study Page final balance pass: normalize the dashboard after earlier visual overrides. */
body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page{
  max-width:1480px!important;
  padding:12px 24px 32px!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .study-layout{
  grid-template-columns:minmax(230px,260px) minmax(520px,1fr) minmax(270px,300px)!important;
  gap:18px!important;
  align-items:start!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .side-col,
body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .right-col{
  gap:12px!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .study-center-col{
  width:100%!important;
  max-width:none!important;
  box-sizing:border-box!important;
  align-self:start!important;
  gap:12px!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .main-study-card{
  width:100%!important;
  max-width:none!important;
  box-sizing:border-box!important;
  min-height:520px!important;
  height:auto!important;
  padding:22px 28px 26px!important;
  border-radius:20px!important;
  display:flex!important;
  flex-direction:column!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .practice-card-header{
  flex:0 0 auto!important;
  min-height:38px!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .flashcard-flip-card{
  flex:1 1 auto!important;
  min-height:290px!important;
  margin:18px 0!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .main-study-card .flashcard-flip-card{
  width:100%!important;
  max-width:none!important;
  box-sizing:border-box!important;
  margin:18px auto!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .word-display{
  padding:28px 0 18px!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .word-display h2{
  font-size:clamp(38px,3.4vw,56px)!important;
  line-height:1.04!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .flashcard-nav{
  flex:0 0 auto!important;
  margin-top:4px!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .progress-panel,
body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .review-panel{
  padding:18px 20px!important;
  border-radius:18px!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .progress-panel{
  min-height:0!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .review-panel{
  min-height:0!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .study-word-list-panel{
  display:flex!important;
  flex-direction:column!important;
  max-height:286px!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .study-word-list-panel h3{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  margin:0 0 10px!important;
  color:#ffffff!important;
  font-size:22px!important;
  line-height:1.1!important;
  font-weight:950!important;
  text-align:center!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .study-word-list-panel h3 .ui-inline-icon{
  width:24px!important;
  height:24px!important;
  padding:2px!important;
  border-radius:7px!important;
  background:#ffffff!important;
  box-shadow:0 0 0 1px rgba(126,105,255,.34),0 8px 16px rgba(0,0,0,.18)!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .study-word-list-panel h3 em{
  color:#7d68ff!important;
  font-style:normal!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .study-word-list-panel p{
  margin:0 0 10px!important;
  color:#c9c8ff!important;
  font-size:12px!important;
  line-height:1.25!important;
  font-weight:750!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page #weakWordsList{
  display:grid!important;
  gap:7px!important;
  min-height:0!important;
  overflow-y:auto!important;
  padding-right:4px!important;
  scrollbar-width:thin!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page #weakWordsList::-webkit-scrollbar{
  width:6px!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page #weakWordsList::-webkit-scrollbar-thumb{
  border-radius:999px!important;
  background:rgba(142,124,255,.52)!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .study-word-row{
  display:grid!important;
  grid-template-columns:24px minmax(0,1fr)!important;
  gap:8px 10px!important;
  align-items:center!important;
  min-height:34px!important;
  padding:7px 9px!important;
  border:1px solid rgba(139,158,225,.24)!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.055)!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .study-word-index{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:24px!important;
  height:24px!important;
  border-radius:8px!important;
  background:rgba(126,105,255,.18)!important;
  color:#cfc8ff!important;
  font-size:11px!important;
  font-weight:900!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .study-word-row b{
  min-width:0!important;
  color:#ffffff!important;
  font-size:13px!important;
  line-height:1.2!important;
  font-weight:900!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .study-word-markers{
  grid-column:2!important;
  display:flex!important;
  flex-wrap:wrap!important;
  gap:5px!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .study-word-marker{
  display:inline-flex!important;
  align-items:center!important;
  min-height:18px!important;
  padding:0 7px!important;
  border-radius:999px!important;
  font-size:9.5px!important;
  line-height:1!important;
  font-style:normal!important;
  font-weight:900!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .study-word-marker.starred{
  background:rgba(255,216,77,.16)!important;
  color:#ffe49a!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .study-word-marker.mastered{
  background:rgba(80,205,127,.16)!important;
  color:#92f0b5!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .study-word-marker.weak{
  background:rgba(255,120,120,.16)!important;
  color:#ffb6b6!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .study-word-list-empty{
  padding:12px 10px!important;
  border:1px solid rgba(139,158,225,.24)!important;
  border-radius:12px!important;
  color:#ffffff!important;
  font-size:13px!important;
  font-weight:850!important;
  text-align:center!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .progress-panel h3,
body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .review-panel h3{
  margin-bottom:12px!important;
  font-size:18px!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .study-word-list-panel h3{
  margin:0 0 10px!important;
  font-size:22px!important;
  justify-content:center!important;
}

/* Study Word List compact card: match the Game page Word List button style. */
body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .study-word-list-panel{
  min-height:72px!important;
  height:72px!important;
  max-height:72px!important;
  padding:0 18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  border-radius:20px!important;
  background:
    radial-gradient(circle at 50% 0%,rgba(126,105,255,.10),transparent 56%),
    linear-gradient(180deg,rgba(13,27,62,.96),rgba(7,18,44,.98))!important;
  border:1px solid rgba(139,158,225,.30)!important;
  box-shadow:0 16px 34px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06)!important;
  cursor:pointer!important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .study-word-list-panel:hover,
body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .study-word-list-panel:focus-visible{
  transform:translateY(-1px)!important;
  border-color:rgba(180,160,255,.72)!important;
  box-shadow:0 18px 38px rgba(82,64,190,.30),0 0 18px rgba(139,116,255,.20),inset 0 1px 0 rgba(255,255,255,.08)!important;
  outline:none!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .study-word-list-panel h3{
  width:100%!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  color:#ffffff!important;
  font-size:20px!important;
  line-height:1!important;
  font-weight:950!important;
  text-align:center!important;
  white-space:nowrap!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .study-word-list-panel h3 .ui-inline-icon{
  width:20px!important;
  height:20px!important;
  padding:1px!important;
  border-radius:5px!important;
  background:#ffffff!important;
  box-shadow:0 0 0 1px rgba(126,105,255,.32)!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .study-word-list-panel p,
body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .study-word-list-panel #weakWordsList{
  display:none!important;
}

.study-word-list-modal-table div{
  grid-template-columns:150px minmax(0,1fr)!important;
}

.study-word-list-modal-table em{
  grid-column:2!important;
  color:#59617f!important;
  font-style:normal!important;
}

@media(max-width:700px){
  .study-word-list-modal-table div{
    grid-template-columns:1fr!important;
  }
  .study-word-list-modal-table small,
  .study-word-list-modal-table em{
    grid-column:1!important;
  }
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .progress-item{
  grid-template-columns:42px minmax(0,1fr)!important;
  gap:10px!important;
  padding:10px 0!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .progress-item i{
  width:40px!important;
  height:40px!important;
  flex-basis:40px!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .progress-item span{
  font-size:12px!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .progress-item b,
body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .progress-item #levelTextSmall{
  font-size:15px!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .progress-panel .progress-item:nth-of-type(4)>div{
  grid-template-columns:max-content minmax(58px,1fr)!important;
  align-items:center!important;
  column-gap:8px!important;
  row-gap:5px!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .progress-panel .progress-item:nth-of-type(4)>div span{
  min-width:max-content!important;
  color:rgba(237,242,255,.78)!important;
  font-size:12px!important;
  font-weight:750!important;
  line-height:1!important;
  white-space:nowrap!important;
  transform:translateY(10px)!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .progress-panel .progress-item:nth-of-type(4)>div #levelTextSmall{
  justify-self:end!important;
  min-width:0!important;
  max-width:70px!important;
  font-size:15px!important;
  line-height:1.15!important;
  text-align:right!important;
  white-space:normal!important;
  overflow:visible!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  text-overflow:clip!important;
  transform:translateY(10px)!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .shuffle-flash-row{
  grid-template-columns:52px minmax(0,1fr)!important;
  gap:10px!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .right-col{
  height:auto!important;
  max-height:none!important;
  align-self:start!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .study-range-shell{
  flex:0 0 auto!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page #studyRangeButton{
  min-height:72px!important;
  height:auto!important;
  padding:14px 16px!important;
  grid-template-columns:42px minmax(0,1fr) 16px!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page #studyRangeButton .quick-action-icon{
  width:40px!important;
  height:40px!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page #studyRangeButton .quick-action-icon img{
  width:24px!important;
  height:24px!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .right-col .game-zone-card,
body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .right-col .dragon-studio-card,
body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .right-col>.badge-mini{
  flex:0 0 auto!important;
  min-height:132px!important;
  border-radius:18px!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .right-col .game-zone-card,
body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .right-col .dragon-studio-card{
  padding:18px 108px 16px 20px!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .right-col .game-zone-card .study-promo-copy,
body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .right-col .dragon-studio-card .study-promo-copy{
  width:auto!important;
  max-width:160px!important;
  flex-basis:auto!important;
  padding-top:10px!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .right-col .game-zone-card .study-promo-copy h3,
body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .right-col .dragon-studio-card .study-promo-copy h3,
body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .right-col>.badge-mini h3{
  font-size:18px!important;
  line-height:1.12!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .right-col .game-zone-card .study-promo-copy p,
body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .right-col .dragon-studio-card .study-promo-copy p{
  max-width:150px!important;
  font-size:12.5px!important;
  line-height:1.28!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .right-col .game-zone-card .study-promo-copy button,
body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .right-col .dragon-studio-card .study-promo-copy button,
body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .right-col>.badge-mini .badge-view-all-btn{
  top:16px!important;
  right:16px!important;
  height:32px!important;
  min-height:32px!important;
  padding:0 14px!important;
  font-size:12px!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .right-col .game-zone-card>img{
  width:104px!important;
  right:14px!important;
  bottom:10px!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .right-col .dragon-studio-card>img:not(.baby-dragon-peek){
  width:76px!important;
  right:30px!important;
  bottom:8px!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .right-col>.badge-mini{
  min-height:126px!important;
  padding:16px 18px!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .right-col .mini-badges{
  gap:8px!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .right-col .mini-badge img{
  width:38px!important;
  height:38px!important;
}

@media(max-width:1180px){
  body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page{
    max-width:860px!important;
  }

  body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .study-layout{
    grid-template-columns:1fr!important;
  }

  body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .side-col{
    order:2!important;
  }

  body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .study-center-col{
    order:1!important;
  }

  body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .right-col{
    order:3!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
  }

  body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .study-range-shell,
  body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .right-col>.badge-mini{
    grid-column:1/-1!important;
  }
}

@media(max-width:720px){
  body:not(.dragon-studio-mode):not(.game-route-mode) #appHeader.topbar{
    min-height:128px!important;
    height:auto!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    justify-items:center!important;
    align-items:center!important;
    gap:6px!important;
    padding:8px 14px 10px!important;
    overflow:visible!important;
  }

  body:not(.dragon-studio-mode):not(.game-route-mode) #appHeader .hatch-brand{
    width:168px!important;
    min-width:0!important;
    max-width:168px!important;
    justify-self:center!important;
  }

  body:not(.dragon-studio-mode):not(.game-route-mode) #appHeader .hatch-logo-img{
    width:168px!important;
    max-height:42px!important;
  }

  body:not(.dragon-studio-mode):not(.game-route-mode) #appHeader #headerCenter{
    position:static!important;
    transform:none!important;
    display:flex!important;
    justify-content:center!important;
    width:100%!important;
  }

  body:not(.dragon-studio-mode):not(.game-route-mode) #appHeader #studyActions{
    position:static!important;
    width:100%!important;
    justify-content:center!important;
    gap:8px!important;
    flex-wrap:nowrap!important;
  }

  body:not(.dragon-studio-mode):not(.game-route-mode) #appHeader #studyActions.hidden{
    display:none!important;
  }

  body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .mode-tabs{
    margin-top:0!important;
    padding-top:8px!important;
  }

  body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .free-banner{
    width:100%!important;
    max-width:100%!important;
    min-height:48px!important;
    height:48px!important;
    justify-content:space-between!important;
    gap:10px!important;
    padding:7px 8px 7px 14px!important;
  }

  body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .free-banner span{
    font-size:0!important;
    flex:1 1 auto!important;
  }

  body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .free-banner span::after{
    content:"Free Practice Mode"!important;
    color:#f7f8ff!important;
    font-size:13px!important;
    font-weight:800!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .free-banner button{
    height:36px!important;
    min-height:36px!important;
    padding:0 22px!important;
    font-size:14px!important;
  }

  body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page{
    padding:10px 14px 24px!important;
  }

  body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .main-study-card{
    min-height:0!important;
    padding:18px 14px 20px!important;
  }

  body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .flashcard-flip-card{
    min-height:230px!important;
  }

  body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .right-col{
    display:flex!important;
  }

  body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .right-col .game-zone-card,
  body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .right-col .dragon-studio-card{
    padding-right:118px!important;
  }
}

/* Games route: remove the duplicate study activity selector row only. */
body.game-route-mode #studyPage.study-page #modeTabs.mode-tabs{
  display:none!important;
  height:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}

body.game-route-mode #studyPage.study-page .free-banner,
body.game-route-mode #studyPage.study-page .free-practice-bar{
  margin-top:0!important;
}

body.game-route-mode #studyPage.study-page .free-banner.hidden:empty{
  display:none!important;
  width:0!important;
  min-width:0!important;
  height:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  box-shadow:none!important;
  overflow:hidden!important;
}

.hatchery-match-page .hatchery-stat-pill.egg-meter>img,
.hatchery-match-page .hatchery-mini-egg,
.hatchery-match-page .hatchery-progress-strip img{
  background:transparent!important;
  background-color:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

  background:
    radial-gradient(circle at 18% 8%,rgba(121,86,255,.14),transparent 34%),
    linear-gradient(180deg,rgba(10,18,48,.96),rgba(5,10,30,.98))!important;
  border:1px solid rgba(135,110,255,.42)!important;
  border-radius:32px!important;
  box-shadow:
    0 22px 56px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.06)!important;
  color:#f7f4ff!important;
  padding:24px!important;
}

  margin:0 0 12px!important;
  color:#ffffff!important;
  font-size:clamp(30px,2.6vw,44px)!important;
  line-height:1.05!important;
  font-weight:950!important;
  text-shadow:0 4px 16px rgba(0,0,0,.32)!important;
}

  margin:0 0 22px!important;
  color:rgba(224,226,255,.84)!important;
  font-size:clamp(18px,1.7vw,26px)!important;
  line-height:1.35!important;
  font-weight:750!important;
}

  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:18px!important;
}

  position:relative!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:190px!important;
  padding:18px 16px!important;
  border:1px solid rgba(145,120,255,.46)!important;
  border-radius:28px!important;
  background:
    radial-gradient(circle at 50% 35%,rgba(120,90,255,.18),transparent 45%),
    linear-gradient(180deg,rgba(16,25,65,.96),rgba(7,13,38,.98))!important;
  box-shadow:
    0 14px 34px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.06)!important;
  color:#f7f4ff!important;
  opacity:1!important;
  filter:none!important;
}

  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:
    radial-gradient(circle at 28% 24%,rgba(255,255,255,.08),transparent 14%),
    radial-gradient(circle at 72% 36%,rgba(158,130,255,.12),transparent 18%),
    radial-gradient(circle at 18% 38%,rgba(255,255,255,.22) 0 1px,transparent 2px),
    radial-gradient(circle at 82% 28%,rgba(168,137,255,.28) 0 1px,transparent 2px)!important;
  pointer-events:none!important;
}

  position:relative!important;
  z-index:1!important;
  display:block!important;
  width:min(150px,72%)!important;
  height:116px!important;
  margin:0 auto 10px!important;
  object-fit:contain!important;
  background:transparent!important;
  background-color:transparent!important;
  border:0!important;
  box-shadow:none!important;
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.22))!important;
}

  position:relative!important;
  z-index:1!important;
  margin:0!important;
  color:#ffffff!important;
  font-size:clamp(18px,1.55vw,26px)!important;
  line-height:1.12!important;
  font-weight:950!important;
  text-align:center!important;
  text-shadow:0 2px 10px rgba(0,0,0,.35)!important;
}

  grid-column:1 / -1!important;
  min-height:210px!important;
  padding:24px 18px!important;
  background:
    radial-gradient(circle at 50% 30%,rgba(130,95,255,.22),transparent 42%),
    linear-gradient(180deg,rgba(14,22,58,.96),rgba(7,12,36,.98))!important;
  border-color:rgba(145,120,255,.58)!important;
  box-shadow:
    0 18px 48px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.07)!important;
  text-align:center!important;
}

  width:112px!important;
  height:92px!important;
  margin-bottom:12px!important;
}

  font-size:clamp(24px,2.4vw,34px)!important;
}

  position:relative!important;
  z-index:1!important;
  display:block!important;
  margin-top:8px!important;
  color:rgba(235,232,255,.76)!important;
  font-size:clamp(14px,1.35vw,20px)!important;
  line-height:1.25!important;
  font-weight:700!important;
  text-align:center!important;
}

@media(max-width:1180px){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:640px){
    padding:20px!important;
    border-radius:26px!important;
  }

    grid-template-columns:1fr!important;
    gap:14px!important;
  }

    grid-column:auto!important;
  }
}

/* Profile compact dashboard: this later-loaded file must not restore the removed summary row. */
.profile-page .profile-reward-summary-row{
  display:none!important;
}

.profile-page .profile-community-card .practice-circle-coming-soon{
  display:grid!important;
  grid-template-columns:46px minmax(0,1fr) 118px!important;
  grid-template-rows:auto auto!important;
  gap:8px 12px!important;
  align-items:center!important;
  padding:12px 14px!important;
  border-radius:16px!important;
  min-height:0!important;
  max-height:164px!important;
  overflow:hidden!important;
}

.profile-page .profile-community-card .practice-circle-icon{
  grid-row:1 / 3!important;
  width:42px!important;
  height:42px!important;
  border-radius:13px!important;
}

.profile-page .profile-community-card .practice-circle-icon .profile-new-icon,
.profile-page .profile-community-card .practice-circle-icon img{
  width:25px!important;
  height:25px!important;
}

.profile-page .profile-community-card .practice-circle-copy h4{
  margin:0 0 3px!important;
  font-size:16px!important;
  line-height:1.05!important;
}

.profile-page .profile-community-card .practice-circle-copy p{
  margin:0!important;
  font-size:11px!important;
  line-height:1.2!important;
}

.profile-page .profile-community-card .practice-circle-list{
  grid-column:2 / 4!important;
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:6px!important;
}

.profile-page .profile-community-card .practice-circle-list b,
.profile-page .profile-community-card .practice-circle-list span{
  min-height:24px!important;
  padding:0 10px!important;
  border-radius:999px!important;
  font-size:10px!important;
  line-height:1!important;
}

.profile-page .profile-community-card .practice-circle-coming-soon button{
  min-height:32px!important;
  padding:0 14px!important;
  border-radius:11px!important;
  font-size:11px!important;
  line-height:1!important;
}

/* Dragon Studio My Dragon card: make the selected dragon the focal point. */
body.dragon-studio-mode .ds-dashboard .my-dragon-card{
  min-height:clamp(620px,72vh,820px)!important;
  padding:22px 26px 24px!important;
  background:#101b38 url("assets/my-dragon-studio-batch/optimized-my-dragon-studio-webp/my-dragon-card/bg_my_dragon_icy_ruins.webp") center/cover no-repeat!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-card>.card-inner{
  min-height:clamp(580px,68vh,770px)!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr) auto auto!important;
  align-items:stretch!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-header{
  min-height:56px!important;
  margin:0!important;
  align-items:center!important;
  justify-content:center!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-header h2{
  font-size:clamp(30px,2.9vw,44px)!important;
  line-height:1!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-hero{
  min-height:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:8px 0 0!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-art-frame{
  width:min(92%,720px)!important;
  max-width:none!important;
  height:min(54vh,560px)!important;
  min-height:390px!important;
  margin:0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-art-frame img{
  width:clamp(430px,48vw,760px)!important;
  height:clamp(390px,52vh,620px)!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  transform:scale(1.16)!important;
  transform-origin:center center!important;
  filter:drop-shadow(0 24px 28px rgba(0,0,0,.28))!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-name{
  position:relative!important;
  z-index:2!important;
  margin:-10px 0 16px!important;
  color:#ffffff!important;
  font-size:clamp(42px,4.4vw,64px)!important;
  line-height:.95!important;
  text-align:center!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-meta-bar{
  position:relative!important;
  z-index:3!important;
  min-height:70px!important;
  padding:12px 20px!important;
  border-radius:20px!important;
  background:rgba(8,18,46,.78)!important;
}

@media(max-width:1100px){
  body.dragon-studio-mode .ds-dashboard .my-dragon-card{
    min-height:560px!important;
  }
  body.dragon-studio-mode .ds-dashboard .my-dragon-card>.card-inner{
    min-height:520px!important;
  }
  body.dragon-studio-mode .ds-dashboard .my-dragon-art-frame{
    width:min(96%,620px)!important;
    height:390px!important;
    min-height:330px!important;
  }
  body.dragon-studio-mode .ds-dashboard .my-dragon-art-frame img{
    width:clamp(330px,72vw,620px)!important;
    height:clamp(310px,48vh,500px)!important;
    transform:scale(1.08)!important;
  }
}

@media(max-width:640px){
  body.dragon-studio-mode .ds-dashboard .my-dragon-card{
    min-height:500px!important;
    padding:18px 16px!important;
  }
  body.dragon-studio-mode .ds-dashboard .my-dragon-card>.card-inner{
    min-height:460px!important;
  }
  body.dragon-studio-mode .ds-dashboard .my-dragon-art-frame{
    height:300px!important;
    min-height:280px!important;
  }
  body.dragon-studio-mode .ds-dashboard .my-dragon-art-frame img{
    width:clamp(280px,86vw,430px)!important;
    height:clamp(260px,40vh,360px)!important;
    transform:scale(1.02)!important;
  }
  body.dragon-studio-mode .ds-dashboard .my-dragon-name{
    margin:-2px 0 12px!important;
    font-size:38px!important;
  }
  body.dragon-studio-mode .ds-dashboard .my-dragon-meta-bar{
    min-height:0!important;
    padding:12px!important;
  }
}

/* Keep the enlarged dragon inside the dashboard card and clear of the lower text. */
body.dragon-studio-mode .ds-dashboard .my-dragon-card{
  min-height:clamp(670px,74vh,790px)!important;
  padding:20px 18px 22px!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-card>.card-inner{
  min-height:clamp(630px,70vh,742px)!important;
  grid-template-rows:62px minmax(360px,1fr) auto auto!important;
  overflow:hidden!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-hero{
  overflow:visible!important;
  padding:4px 0 0!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-art-frame{
  width:100%!important;
  height:clamp(360px,43vh,470px)!important;
  min-height:360px!important;
  max-width:100%!important;
  overflow:visible!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-art-frame img{
  width:min(100%,430px)!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  transform:none!important;
  object-fit:contain!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-name{
  margin:2px 0 14px!important;
  font-size:clamp(38px,3.8vw,54px)!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-meta-bar{
  min-height:66px!important;
}

@media(max-width:640px){
  body.dragon-studio-mode .ds-dashboard .my-dragon-card{
    min-height:560px!important;
    padding:18px 14px!important;
  }
  body.dragon-studio-mode .ds-dashboard .my-dragon-card>.card-inner{
    min-height:520px!important;
    grid-template-rows:50px 286px auto auto!important;
  }
  body.dragon-studio-mode .ds-dashboard .my-dragon-art-frame{
    height:286px!important;
    min-height:286px!important;
  }
  body.dragon-studio-mode .ds-dashboard .my-dragon-name{
    margin:8px 0 12px!important;
    font-size:36px!important;
  }
}

/* Dark fantasy My Dragon card refresh with hover aura. */
body.dragon-studio-mode .ds-dashboard .my-dragon-card{
  background:
    radial-gradient(circle at 50% 38%,rgba(145,76,255,.26),rgba(27,10,58,.08) 36%,rgba(2,5,18,.58) 82%),
    linear-gradient(180deg,rgba(3,6,18,.20),rgba(7,6,30,.40) 55%,rgba(2,6,20,.72)),
    url("assets/my-dragon-studio-batch/optimized-my-dragon-studio-webp/my-dragon-card/bg_my_dragon_icy_ruins.webp") center/cover no-repeat!important;
  border-color:rgba(179,142,255,.42)!important;
  box-shadow:
    0 22px 52px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(145,98,255,.18)!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-card::after{
  opacity:1!important;
  background:
    radial-gradient(circle at 50% 45%,rgba(255,184,73,.12),transparent 28%),
    radial-gradient(circle at 50% 13%,rgba(185,124,255,.20),transparent 34%),
    linear-gradient(180deg,rgba(0,0,0,.10),transparent 42%,rgba(0,0,0,.28))!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-header h2,
body.dragon-studio-mode .ds-dashboard .my-dragon-name{
  color:#fff8ff!important;
  text-shadow:
    0 2px 10px rgba(0,0,0,.62),
    0 0 22px rgba(172,105,255,.36)!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-art-frame{
  position:relative!important;
  isolation:isolate!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-art-frame::before{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  inset:8% 10% 4%!important;
  border-radius:50%!important;
  background:
    radial-gradient(circle,rgba(255,183,64,.50),rgba(255,126,42,.22) 28%,rgba(154,82,255,.22) 52%,transparent 72%)!important;
  opacity:.22!important;
  filter:blur(26px)!important;
  transform:scale(.92)!important;
  transition:opacity .28s ease,transform .28s ease,filter .28s ease!important;
  pointer-events:none!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-art-frame img{
  cursor:pointer!important;
  transition:filter .28s ease,transform .28s ease!important;
  filter:
    drop-shadow(0 24px 26px rgba(0,0,0,.40))
    drop-shadow(0 0 16px rgba(255,156,55,.18))!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-art-frame:hover::before,
body.dragon-studio-mode .ds-dashboard .my-dragon-art-frame:focus-within::before{
  opacity:.88!important;
  filter:blur(32px)!important;
  transform:scale(1.06)!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-art-frame:hover img,
body.dragon-studio-mode .ds-dashboard .my-dragon-art-frame:focus-within img{
  transform:scale(1.035)!important;
  filter:
    drop-shadow(0 30px 32px rgba(0,0,0,.48))
    drop-shadow(0 0 24px rgba(255,170,58,.58))
    drop-shadow(0 0 44px rgba(149,82,255,.62))!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-meta-bar{
  background:rgba(4,9,28,.80)!important;
  border:1px solid rgba(184,151,255,.32)!important;
  box-shadow:
    0 14px 30px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.08)!important;
  backdrop-filter:blur(7px)!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-meta-bar .meta-divider{
  background:rgba(184,151,255,.28)!important;
}

/* Dragon Studio purchase reward modal. */
#comingSoonModal.egg-unlocked-modal-shell{
  width:min(920px,calc(100vw - 42px))!important;
  min-height:min(560px,calc(100vh - 58px))!important;
  max-height:calc(100vh - 38px)!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:28px!important;
  border:1px solid rgba(255,213,139,.62)!important;
  color:#fff8ff!important;
  background:
    radial-gradient(circle at 30% 34%,rgba(183,88,255,.38),transparent 30%),
    radial-gradient(circle at 72% 78%,rgba(108,55,230,.22),transparent 38%),
    linear-gradient(90deg,rgba(8,5,24,.72),rgba(15,8,42,.58) 45%,rgba(6,4,20,.84)),
    url("assets/my-dragon-studio-batch/optimized-my-dragon-studio-webp/my-dragon-card/bg_my_dragon_icy_ruins.webp") center/cover no-repeat!important;
  box-shadow:
    0 34px 90px rgba(0,0,0,.58),
    0 0 54px rgba(142,71,255,.42),
    inset 0 0 0 2px rgba(255,225,153,.20),
    inset 0 0 52px rgba(135,73,255,.32)!important;
}

#comingSoonModal.egg-unlocked-modal-shell::before,
#comingSoonModal.egg-unlocked-modal-shell::after{
  content:""!important;
  position:absolute!important;
  pointer-events:none!important;
  z-index:1!important;
  border-radius:inherit!important;
}

#comingSoonModal.egg-unlocked-modal-shell::before{
  inset:10px!important;
  border:1px solid rgba(255,214,135,.68)!important;
  box-shadow:
    inset 0 0 0 1px rgba(129,79,255,.42),
    inset 0 0 28px rgba(255,190,89,.10)!important;
}

#comingSoonModal.egg-unlocked-modal-shell::after{
  inset:0!important;
  background:
    radial-gradient(circle at 18% 18%,rgba(255,203,111,.95) 0 2px,transparent 3px),
    radial-gradient(circle at 33% 13%,rgba(255,255,255,.72) 0 1px,transparent 2px),
    radial-gradient(circle at 86% 64%,rgba(255,209,120,.80) 0 2px,transparent 3px),
    radial-gradient(circle at 92% 22%,rgba(196,126,255,.78) 0 2px,transparent 3px),
    linear-gradient(180deg,rgba(5,2,18,.36),transparent 45%,rgba(3,2,14,.48))!important;
}

#comingSoonModal.egg-unlocked-modal-shell>*{
  position:relative!important;
  z-index:2!important;
}

#comingSoonModal.egg-unlocked-modal-shell .modal-close{
  top:22px!important;
  right:22px!important;
  width:46px!important;
  height:46px!important;
  border:2px solid rgba(255,221,150,.72)!important;
  background:rgba(24,16,70,.86)!important;
  color:#fff!important;
  font-size:30px!important;
  line-height:42px!important;
  box-shadow:0 0 18px rgba(178,93,255,.44),inset 0 0 0 1px rgba(143,96,255,.45)!important;
}

#comingSoonModal.egg-unlocked-modal-shell #comingSoonTitle{
  display:none!important;
}

#comingSoonModal.egg-unlocked-modal-shell #comingSoonText{
  display:block!important;
  margin:0!important;
  color:inherit!important;
  text-align:initial!important;
}

.egg-unlocked-content{
  min-height:min(560px,calc(100vh - 58px))!important;
  display:grid!important;
  grid-template-columns:minmax(280px,.92fr) minmax(300px,1.08fr)!important;
  align-items:center!important;
  gap:18px!important;
  padding:58px 64px 52px 54px!important;
}

.egg-unlocked-visual{
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  min-height:370px!important;
  isolation:isolate!important;
}

.egg-unlocked-aura{
  position:absolute!important;
  inset:8% 2% 2%!important;
  border-radius:50%!important;
  background:
    radial-gradient(circle,rgba(255,198,91,.66),rgba(255,133,45,.24) 30%,rgba(168,83,255,.42) 55%,transparent 74%)!important;
  filter:blur(22px)!important;
  opacity:.85!important;
  z-index:-1!important;
}

.egg-unlocked-visual img{
  width:clamp(230px,31vw,360px)!important;
  max-height:390px!important;
  object-fit:contain!important;
  filter:
    drop-shadow(0 24px 28px rgba(0,0,0,.54))
    drop-shadow(0 0 30px rgba(255,172,53,.42))
    drop-shadow(0 0 52px rgba(148,75,255,.48))!important;
  transform:translateY(8px)!important;
}

.egg-unlocked-copy{
  display:grid!important;
  justify-items:center!important;
  text-align:center!important;
  gap:18px!important;
  padding:18px 0!important;
}

.egg-unlocked-kicker{
  display:inline-flex!important;
  min-height:30px!important;
  align-items:center!important;
  padding:0 16px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,217,145,.42)!important;
  background:rgba(20,13,57,.58)!important;
  color:#ffe8a6!important;
  font-size:13px!important;
  font-weight:950!important;
  letter-spacing:0!important;
  box-shadow:0 0 20px rgba(158,83,255,.26)!important;
}

.egg-unlocked-copy h3{
  position:relative!important;
  margin:0!important;
  color:#fff9ef!important;
  font-size:clamp(40px,4.2vw,56px)!important;
  line-height:.98!important;
  font-weight:1000!important;
  white-space:nowrap!important;
  text-shadow:
    0 3px 12px rgba(0,0,0,.70),
    0 0 18px rgba(255,205,119,.52),
    0 0 38px rgba(181,91,255,.42)!important;
}

.egg-unlocked-copy h3::before,
.egg-unlocked-copy h3::after{
  content:""!important;
  position:absolute!important;
  top:50%!important;
  width:78px!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent,rgba(255,214,132,.82),transparent)!important;
}

.egg-unlocked-copy h3::before{right:calc(100% + 20px)!important;}
.egg-unlocked-copy h3::after{left:calc(100% + 20px)!important;}

.egg-unlocked-copy p{
  max-width:420px!important;
  margin:0!important;
  color:#f4ecff!important;
  font-size:clamp(18px,2.2vw,24px)!important;
  line-height:1.35!important;
  font-weight:850!important;
  text-shadow:0 2px 10px rgba(0,0,0,.62)!important;
}

.egg-unlocked-actions{
  width:min(420px,100%)!important;
  display:grid!important;
  gap:12px!important;
  margin-top:6px!important;
}

.egg-unlocked-primary,
.egg-unlocked-secondary{
  min-height:58px!important;
  border-radius:999px!important;
  font-size:20px!important;
  font-weight:1000!important;
  letter-spacing:0!important;
  cursor:pointer!important;
}

.egg-unlocked-primary{
  border:2px solid rgba(255,230,164,.80)!important;
  color:#fff!important;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.30),transparent 34%),
    linear-gradient(180deg,#b35dff,#7247ff 56%,#5432c8)!important;
  box-shadow:
    0 0 22px rgba(207,96,255,.70),
    0 12px 26px rgba(21,9,55,.48),
    inset 0 0 0 1px rgba(255,255,255,.30)!important;
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease!important;
}

.egg-unlocked-primary:hover,
.egg-unlocked-primary:focus-visible{
  transform:translateY(-1px) scale(1.015)!important;
  filter:brightness(1.08)!important;
  box-shadow:
    0 0 30px rgba(221,112,255,.86),
    0 0 46px rgba(255,198,88,.36),
    0 16px 30px rgba(21,9,55,.52),
    inset 0 0 0 1px rgba(255,255,255,.36)!important;
}

.egg-unlocked-secondary{
  border:1px solid rgba(222,206,255,.26)!important;
  color:#f1eaff!important;
  background:rgba(15,12,45,.62)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}

@media(max-width:760px){
  #comingSoonModal.egg-unlocked-modal-shell{
    width:calc(100vw - 24px)!important;
    min-height:0!important;
  }
  .egg-unlocked-content{
    min-height:0!important;
    grid-template-columns:1fr!important;
    gap:6px!important;
    padding:56px 24px 30px!important;
  }
  .egg-unlocked-visual{
    min-height:250px!important;
  }
  .egg-unlocked-visual img{
    width:clamp(210px,62vw,300px)!important;
    max-height:300px!important;
  }
  .egg-unlocked-copy h3{
    font-size:38px!important;
    white-space:normal!important;
  }
  .egg-unlocked-copy h3::before,
  .egg-unlocked-copy h3::after{
    display:none!important;
  }
  .egg-unlocked-copy p{
    font-size:17px!important;
  }
  .egg-unlocked-primary,
  .egg-unlocked-secondary{
    min-height:52px!important;
    font-size:17px!important;
  }
}

/* Dragon Studio egg hatch completion modal. */
.modal-backdrop.egg-hatched-backdrop{
  z-index:99998!important;
  background:rgba(2,4,16,.76)!important;
  backdrop-filter:blur(8px)!important;
}

#comingSoonModal.egg-hatched-modal-shell{
  z-index:99999!important;
  width:min(1000px,calc(100vw - 48px))!important;
  min-height:620px!important;
  max-height:calc(100vh - 48px)!important;
  overflow:hidden!important;
  padding:0!important;
  border-radius:30px!important;
  border:1px solid rgba(177,130,255,.65)!important;
  color:#fff3ff!important;
  background:
    radial-gradient(circle at 50% 34%,rgba(142,92,255,.34),transparent 35%),
    radial-gradient(circle at 18% 52%,rgba(105,55,232,.22),transparent 32%),
    radial-gradient(circle at 82% 58%,rgba(74,146,255,.18),transparent 30%),
    linear-gradient(180deg,rgba(18,12,48,.97),rgba(7,10,30,.98))!important;
  box-shadow:
    0 32px 100px rgba(0,0,0,.62),
    0 0 38px rgba(145,95,255,.48),
    inset 0 0 0 1px rgba(255,220,150,.18)!important;
}

#comingSoonModal.egg-hatched-modal-shell::before,
#comingSoonModal.egg-hatched-modal-shell::after{
  content:""!important;
  position:absolute!important;
  pointer-events:none!important;
  border-radius:inherit!important;
}

#comingSoonModal.egg-hatched-modal-shell::before{
  inset:0!important;
  z-index:1!important;
  background-image:
    radial-gradient(circle at 18% 22%,rgba(255,255,255,.72) 0 1px,transparent 2px),
    radial-gradient(circle at 30% 42%,rgba(190,140,255,.62) 0 1px,transparent 2px),
    radial-gradient(circle at 82% 28%,rgba(190,140,255,.65) 0 1px,transparent 2px),
    radial-gradient(circle at 50% 72%,rgba(255,220,160,.48) 0 1px,transparent 2px),
    radial-gradient(circle at 72% 66%,rgba(255,255,255,.58) 0 1px,transparent 2px)!important;
  opacity:.82!important;
}

#comingSoonModal.egg-hatched-modal-shell::after{
  inset:10px!important;
  z-index:2!important;
  border:1px solid rgba(176,124,255,.86)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,221,152,.18),
    inset 0 0 34px rgba(125,78,255,.26),
    0 0 20px rgba(143,95,255,.38)!important;
}

#comingSoonModal.egg-hatched-modal-shell>*{
  position:relative!important;
  z-index:3!important;
}

#comingSoonModal.egg-hatched-modal-shell .modal-close{
  top:24px!important;
  right:24px!important;
  z-index:6!important;
  width:54px!important;
  height:54px!important;
  border-radius:999px!important;
  border:2px solid rgba(165,116,255,.76)!important;
  background:rgba(35,27,100,.88)!important;
  color:#eee8ff!important;
  font-size:38px!important;
  line-height:48px!important;
  box-shadow:
    0 0 24px rgba(136,84,255,.62),
    inset 0 0 0 1px rgba(255,255,255,.12)!important;
}

#comingSoonModal.egg-hatched-modal-shell #comingSoonTitle{
  display:none!important;
}

#comingSoonModal.egg-hatched-modal-shell #comingSoonText{
  display:block!important;
  margin:0!important;
  color:inherit!important;
  overflow:hidden!important;
}

.egg-hatched-modal-body{
  position:relative!important;
  min-height:620px!important;
  max-height:calc(100vh - 48px)!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  padding:44px 56px 48px!important;
}

.egg-hatched-modal-body::before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:24px!important;
  width:250px!important;
  height:58px!important;
  transform:translateX(-50%)!important;
  background:
    radial-gradient(circle at 50% 38%,rgba(178,113,255,.90) 0 15px,transparent 16px),
    linear-gradient(90deg,transparent,rgba(151,95,255,.72),transparent)!important;
  filter:blur(12px)!important;
  opacity:.72!important;
  pointer-events:none!important;
}

.egg-hatched-crystal{
  position:relative!important;
  z-index:2!important;
  width:90px!important;
  height:70px!important;
  margin:-18px auto 8px!important;
}

.egg-hatched-crystal::before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:8px!important;
  width:48px!important;
  height:48px!important;
  transform:translateX(-50%) rotate(45deg)!important;
  border:2px solid rgba(215,184,255,.86)!important;
  background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(141,78,255,.92) 46%,rgba(60,42,180,.95))!important;
  box-shadow:
    0 0 22px rgba(157,96,255,.86),
    inset 0 0 12px rgba(255,255,255,.34)!important;
}

.egg-hatched-crystal::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  bottom:2px!important;
  width:180px!important;
  height:28px!important;
  transform:translateX(-50%)!important;
  background:linear-gradient(90deg,transparent,rgba(161,102,255,.86),transparent)!important;
  clip-path:polygon(0 70%,36% 56%,50% 0,64% 56%,100% 70%,63% 88%,50% 55%,37% 88%)!important;
  filter:drop-shadow(0 0 10px rgba(150,91,255,.72))!important;
}

.egg-hatched-title{
  position:relative!important;
  z-index:2!important;
  margin:0!important;
  color:#fff3ff!important;
  text-align:center!important;
  font-size:clamp(48px,5vw,68px)!important;
  line-height:1!important;
  font-weight:1000!important;
  text-shadow:
    0 0 14px rgba(178,116,255,.85),
    0 2px 0 rgba(53,24,105,.80),
    0 0 34px rgba(255,220,160,.18)!important;
}

.egg-hatched-subtitle{
  position:relative!important;
  z-index:2!important;
  margin:18px 0 0!important;
  text-align:center!important;
  color:rgba(242,236,255,.92)!important;
  font-size:24px!important;
  line-height:1.25!important;
  font-weight:850!important;
  text-shadow:0 2px 10px rgba(0,0,0,.62)!important;
}

.egg-hatched-subtitle strong{
  color:#9fd9ff!important;
  font-weight:1000!important;
  text-shadow:0 0 14px rgba(105,190,255,.55)!important;
}

.egg-hatched-reveal-row{
  position:relative!important;
  z-index:2!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 90px minmax(0,1fr)!important;
  align-items:center!important;
  gap:28px!important;
  margin-top:38px!important;
  min-width:0!important;
}

.egg-hatched-visual-card{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:0!important;
  min-height:250px!important;
  border-radius:24px!important;
  border:1px solid rgba(180,150,255,.38)!important;
  background:
    radial-gradient(circle at 50% 45%,rgba(130,90,255,.28),rgba(18,12,45,.76) 70%),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01))!important;
  box-shadow:
    inset 0 0 22px rgba(130,90,255,.18),
    0 18px 36px rgba(0,0,0,.24)!important;
  overflow:hidden!important;
}

.egg-hatched-visual-card::before{
  content:""!important;
  position:absolute!important;
  inset:18px!important;
  border-radius:inherit!important;
  border:1px solid rgba(153,103,255,.28)!important;
  box-shadow:inset 0 0 18px rgba(160,107,255,.20)!important;
}

.egg-hatched-visual-card img{
  position:relative!important;
  z-index:2!important;
  width:min(250px,90%)!important;
  max-height:230px!important;
  object-fit:contain!important;
  filter:
    drop-shadow(0 0 18px rgba(165,100,255,.45))
    drop-shadow(0 0 24px rgba(255,210,120,.18))
    drop-shadow(0 18px 22px rgba(0,0,0,.36))!important;
}

.egg-hatched-dragon-card{
  flex-direction:column!important;
  gap:8px!important;
}

.egg-hatched-dragon-card img{
  width:min(270px,92%)!important;
  max-height:220px!important;
}

.egg-hatched-dragon-card b{
  position:relative!important;
  z-index:2!important;
  display:inline-flex!important;
  min-height:42px!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:170px!important;
  padding:0 22px!important;
  border-radius:14px!important;
  border:1px solid rgba(142,180,255,.40)!important;
  background:rgba(26,30,86,.74)!important;
  color:#c8ecff!important;
  font-size:28px!important;
  font-weight:1000!important;
  line-height:1!important;
  text-shadow:0 0 12px rgba(105,190,255,.50)!important;
}

.egg-hatched-arrow{
  color:#b993ff!important;
  text-align:center!important;
  font-size:62px!important;
  line-height:1!important;
  font-weight:1000!important;
  text-shadow:
    0 0 18px rgba(170,110,255,.85),
    0 0 28px rgba(255,220,150,.32)!important;
}

.egg-hatched-actions{
  position:relative!important;
  z-index:2!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:22px!important;
  margin-top:34px!important;
  min-width:0!important;
}

.egg-hatched-primary,
.egg-hatched-secondary{
  height:66px!important;
  min-width:0!important;
  border-radius:20px!important;
  font-size:24px!important;
  font-weight:1000!important;
  letter-spacing:0!important;
  color:#fff!important;
  cursor:pointer!important;
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease!important;
}

.egg-hatched-primary{
  border:1px solid rgba(255,220,140,.72)!important;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.24),transparent 36%),
    linear-gradient(180deg,#8f63ff,#5738e8)!important;
  box-shadow:
    0 0 20px rgba(155,95,255,.55),
    inset 0 0 0 1px rgba(255,255,255,.14)!important;
}

.egg-hatched-secondary{
  border:1px solid rgba(150,200,255,.55)!important;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.16),transparent 35%),
    linear-gradient(180deg,rgba(80,130,210,.72),rgba(35,65,140,.88))!important;
  color:#e8f3ff!important;
  box-shadow:
    0 0 18px rgba(90,154,255,.28),
    inset 0 0 0 1px rgba(255,255,255,.10)!important;
}

.egg-hatched-primary:hover,
.egg-hatched-primary:focus-visible,
.egg-hatched-secondary:hover,
.egg-hatched-secondary:focus-visible{
  transform:translateY(-1px)!important;
  filter:brightness(1.08)!important;
}

@media(max-width:760px){
  #comingSoonModal.egg-hatched-modal-shell{
    width:calc(100vw - 28px)!important;
    min-height:0!important;
  }
  .egg-hatched-modal-body{
    min-height:0!important;
    padding:34px 22px 28px!important;
  }
  .egg-hatched-crystal{
    margin-top:-12px!important;
    transform:scale(.78)!important;
  }
  .egg-hatched-title{
    font-size:38px!important;
  }
  .egg-hatched-subtitle{
    font-size:18px!important;
  }
  .egg-hatched-reveal-row{
    grid-template-columns:1fr!important;
    gap:18px!important;
    margin-top:24px!important;
  }
  .egg-hatched-arrow{
    transform:rotate(90deg)!important;
    font-size:46px!important;
  }
  .egg-hatched-visual-card{
    min-height:205px!important;
  }
  .egg-hatched-visual-card img{
    max-height:180px!important;
  }
  .egg-hatched-dragon-card b{
    font-size:22px!important;
  }
  .egg-hatched-actions{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  .egg-hatched-primary,
  .egg-hatched-secondary{
    height:56px!important;
    font-size:19px!important;
  }
}

#comingSoonModal.egg-hatched-modal-shell>.modal-close{
  position:absolute!important;
  left:auto!important;
  right:24px!important;
  top:24px!important;
}

/* Profile: Change User Name modal. */
#comingSoonModal.profile-name-modal-shell{
  width:min(560px,calc(100vw - 34px))!important;
  padding:34px 38px!important;
  border-radius:24px!important;
  overflow:visible!important;
  border:1px solid rgba(190,180,255,.34)!important;
  background:
    radial-gradient(circle at 18% 0%,rgba(126,105,255,.18),transparent 34%),
    linear-gradient(180deg,#ffffff,#f7f5ff)!important;
  color:#0b1040!important;
  box-shadow:0 28px 82px rgba(6,12,42,.34)!important;
}

#comingSoonModal.profile-name-modal-shell #comingSoonTitle{
  margin:0 0 18px!important;
  color:#0b1040!important;
  font-size:30px!important;
  line-height:1.1!important;
  font-weight:1000!important;
}

#comingSoonModal.profile-name-modal-shell #comingSoonText{
  margin:0!important;
  color:#20284f!important;
}

#comingSoonModal.profile-name-modal-shell .modal-close{
  top:20px!important;
  right:20px!important;
  width:44px!important;
  height:44px!important;
  background:#f0edff!important;
  color:#151a48!important;
  font-size:28px!important;
}

.profile-name-form{
  display:grid!important;
  gap:10px!important;
}

.profile-name-form label{
  color:#20284f!important;
  font-size:13px!important;
  font-weight:950!important;
}

.profile-name-form input{
  width:100%!important;
  min-height:52px!important;
  padding:0 15px!important;
  border-radius:14px!important;
  border:1px solid #d7d1f4!important;
  background:#fff!important;
  color:#0b1040!important;
  font-size:18px!important;
  font-weight:850!important;
  outline:none!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7)!important;
}

.profile-name-form input:focus{
  border-color:#7b63ff!important;
  box-shadow:0 0 0 4px rgba(123,99,255,.16)!important;
}

.profile-modal-error{
  min-height:18px!important;
  margin:0!important;
  color:#d33c3c!important;
  font-size:13px!important;
  font-weight:850!important;
}
.profile-modal-error.success{
  color:#267a43!important;
}

.profile-modal-actions{
  display:flex!important;
  justify-content:flex-end!important;
  gap:12px!important;
  margin-top:10px!important;
}

.profile-modal-actions button{
  min-height:46px!important;
  min-width:112px!important;
  padding:0 18px!important;
  border-radius:13px!important;
  font-size:15px!important;
  font-weight:950!important;
  cursor:pointer!important;
}

.profile-name-cancel{
  border:1px solid #d7d1f4!important;
  background:#fff!important;
  color:#333b67!important;
}

.profile-name-save{
  border:0!important;
  background:linear-gradient(180deg,#7057ff,#4f35df)!important;
  color:#fff!important;
  box-shadow:0 12px 24px rgba(79,53,223,.22)!important;
}

.profile-page .profile-linked-email-display{
  margin:2px 0 6px!important;
  color:#d7dcff!important;
  font-size:12px!important;
  line-height:1.25!important;
  font-weight:800!important;
  overflow-wrap:anywhere!important;
}

.profile-page .profile-linked-email-display b{
  color:#fff!important;
  font-weight:950!important;
}

/* Community Rankings page. */
.community-rankings-page{
  max-width:1420px!important;
  padding-top:18px!important;
}

.community-rankings-shell{
  display:grid!important;
  gap:18px!important;
}

.community-breadcrumb{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  color:#cfd5ff!important;
  font-weight:850!important;
}

.community-breadcrumb button{
  border:0!important;
  background:transparent!important;
  color:#a99cff!important;
  font-weight:950!important;
  cursor:pointer!important;
}

.community-rankings-hero{
  position:relative!important;
  overflow:hidden!important;
  min-height:150px!important;
  display:grid!important;
  grid-template-columns:92px minmax(0,1fr)!important;
  align-items:center!important;
  gap:22px!important;
  padding:28px 32px!important;
  border-radius:26px!important;
  border:1px solid rgba(155,135,255,.44)!important;
  background:
    linear-gradient(90deg,rgba(23,27,82,.86),rgba(43,35,139,.54)),
    url("assets/assets_webp/my-profile-backgrounds/bg_profile_community_panel.webp") center/cover no-repeat!important;
  box-shadow:0 20px 48px rgba(7,12,43,.24),inset 0 1px 0 rgba(255,255,255,.10)!important;
}

.community-hero-icon{
  width:76px!important;
  height:76px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:22px!important;
  background:linear-gradient(180deg,rgba(130,106,255,.90),rgba(74,54,183,.90))!important;
  box-shadow:0 0 28px rgba(126,105,255,.34),inset 0 1px 0 rgba(255,255,255,.24)!important;
}

.community-hero-icon img,
.community-hero-icon .profile-new-icon{
  width:46px!important;
  height:46px!important;
}

.community-rankings-hero h1{
  margin:0 0 8px!important;
  color:#fff!important;
  font-size:40px!important;
  line-height:1!important;
  font-weight:1000!important;
  text-shadow:0 10px 24px rgba(0,0,0,.28)!important;
}

.community-rankings-hero p,
.community-rankings-hero small{
  display:block!important;
  margin:0!important;
  color:#f3f4ff!important;
  font-size:16px!important;
  line-height:1.35!important;
  font-weight:800!important;
}

.community-rankings-hero small{
  margin-top:8px!important;
  color:#ffe89a!important;
  font-size:13px!important;
}

.community-rankings-layout{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 390px!important;
  gap:22px!important;
  align-items:start!important;
}

.community-rankings-main,
.community-rankings-side{
  min-width:0!important;
  display:grid!important;
  gap:14px!important;
}

.community-tab-row{
  display:grid!important;
  gap:12px!important;
}

.time-tabs{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}

.category-tabs{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}

.community-tab-row button{
  min-height:48px!important;
  padding:0 14px!important;
  border-radius:14px!important;
  border:1px solid rgba(159,175,244,.24)!important;
  background:rgba(255,255,255,.045)!important;
  color:#f6f7ff!important;
  font-size:14px!important;
  line-height:1.1!important;
  font-weight:950!important;
  cursor:pointer!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
}

.community-tab-row button.active{
  background:linear-gradient(180deg,#7057ff,#4f35df)!important;
  border-color:rgba(198,184,255,.46)!important;
  box-shadow:0 14px 26px rgba(79,53,223,.22),inset 0 1px 0 rgba(255,255,255,.18)!important;
}

.community-leaderboard-card,
.your-rank-card,
.community-privacy-card{
  border-radius:24px!important;
  border:1px solid rgba(155,135,255,.34)!important;
  background:linear-gradient(180deg,rgba(22,30,73,.88),rgba(13,20,54,.94))!important;
  box-shadow:0 18px 44px rgba(2,8,28,.22),inset 0 1px 0 rgba(255,255,255,.08)!important;
}

.community-table-wrap{
  width:100%!important;
  overflow:auto!important;
  border-radius:24px!important;
}

.community-rankings-table{
  width:100%!important;
  min-width:920px!important;
  border-collapse:collapse!important;
  color:#f7f8ff!important;
}

.community-rankings-table th{
  padding:15px 16px!important;
  color:#d9ddff!important;
  font-size:12px!important;
  text-align:left!important;
  white-space:nowrap!important;
  border-bottom:1px solid rgba(159,175,244,.20)!important;
}

.community-rankings-table td{
  padding:13px 16px!important;
  border-bottom:1px solid rgba(159,175,244,.14)!important;
  font-size:14px!important;
  font-weight:900!important;
  white-space:nowrap!important;
}

.community-rankings-table tr.current{
  background:linear-gradient(90deg,rgba(112,87,255,.42),rgba(112,87,255,.16))!important;
  box-shadow:inset 0 0 0 1px rgba(179,155,255,.38)!important;
}

.rank-user{
  display:inline-flex!important;
  align-items:center!important;
  gap:10px!important;
}

.rank-user img{
  width:42px!important;
  height:42px!important;
  border-radius:50%!important;
  object-fit:cover!important;
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(190,180,255,.32)!important;
}

.rank-medal,
.rank-number{
  width:30px!important;
  height:30px!important;
  display:inline-grid!important;
  place-items:center!important;
  border-radius:50%!important;
  font-weight:1000!important;
}

.rank-medal{
  background:linear-gradient(180deg,#ffe893,#e7a727)!important;
  color:#3e2b00!important;
  box-shadow:0 0 16px rgba(255,216,112,.36)!important;
}

.rank-medal.rank-2{background:linear-gradient(180deg,#f3f6ff,#aeb7d4)!important;color:#222a45!important;}
.rank-medal.rank-3{background:linear-gradient(180deg,#ffd6a6,#bf7334)!important;color:#3d1f02!important;}
.rank-number{color:#fff!important;}

.rank-level-pill{
  display:inline-flex!important;
  align-items:center!important;
  min-height:30px!important;
  padding:0 10px!important;
  border-radius:999px!important;
  background:rgba(112,87,255,.18)!important;
  border:1px solid rgba(154,132,255,.36)!important;
  color:#dcd7ff!important;
  font-size:11px!important;
}

.community-rankings-table strong{
  color:#ffe89a!important;
}

.your-rank-card,
.community-privacy-card{
  padding:24px!important;
}

.your-rank-card h2,
.community-privacy-card h2{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  margin:0 0 18px!important;
  color:#fff!important;
  font-size:20px!important;
  line-height:1.15!important;
  font-weight:1000!important;
}

.your-rank-head{
  display:grid!important;
  grid-template-columns:116px minmax(0,1fr)!important;
  gap:18px!important;
  align-items:center!important;
  padding-bottom:18px!important;
  border-bottom:1px solid rgba(159,175,244,.20)!important;
}

.your-rank-head img{
  width:112px!important;
  height:112px!important;
  border-radius:50%!important;
  object-fit:cover!important;
  border:3px solid rgba(190,180,255,.72)!important;
  background:rgba(255,255,255,.08)!important;
  box-shadow:0 0 24px rgba(126,105,255,.34)!important;
}

.your-rank-head b{
  display:block!important;
  color:#fff!important;
  font-size:34px!important;
  line-height:1!important;
}

.your-rank-head span{
  display:block!important;
  color:#fff!important;
  font-size:18px!important;
  font-weight:1000!important;
  margin-top:4px!important;
}

.your-rank-head em{
  display:inline-flex!important;
  margin-top:8px!important;
  min-height:30px!important;
  align-items:center!important;
  padding:0 12px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#7057ff,#4f35df)!important;
  color:#fff!important;
  font-style:normal!important;
  font-size:12px!important;
  font-weight:950!important;
}

.your-rank-card dl{
  display:grid!important;
  gap:11px!important;
  margin:18px 0 0!important;
}

.your-rank-card dl div{
  display:flex!important;
  justify-content:space-between!important;
  gap:14px!important;
  color:#e9ecff!important;
  font-size:14px!important;
  font-weight:850!important;
}

.your-rank-card dd{
  margin:0!important;
  color:#fff!important;
  font-weight:1000!important;
}

.community-privacy-card p{
  margin:0 0 16px!important;
  color:#e2e6ff!important;
  font-size:14px!important;
  line-height:1.45!important;
  font-weight:750!important;
}

.community-privacy-card p:last-child{
  margin-bottom:0!important;
}

.community-privacy-card b{
  color:#fff!important;
}

@media(max-width:1120px){
  .community-rankings-layout{
    grid-template-columns:1fr!important;
  }
  .community-rankings-side{
    grid-template-columns:1fr 1fr!important;
  }
}

@media(max-width:760px){
  .community-rankings-page{
    padding-top:10px!important;
  }
  .community-rankings-hero{
    grid-template-columns:1fr!important;
    justify-items:center!important;
    text-align:center!important;
    padding:24px 18px!important;
  }
  .community-rankings-hero h1{
    font-size:32px!important;
  }
  .time-tabs,
  .category-tabs,
  .community-rankings-side{
    grid-template-columns:1fr!important;
  }
  .your-rank-head{
    grid-template-columns:1fr!important;
    justify-items:center!important;
    text-align:center!important;
  }
}

@media(max-width:560px){
  #comingSoonModal.profile-name-modal-shell{
    padding:28px 22px!important;
  }
  .profile-modal-actions{
    flex-direction:column-reverse!important;
  }
  .profile-modal-actions button{
    width:100%!important;
  }
}

/* Study page: remove the empty legacy free-banner placeholder pill. */
body:not(.dragon-studio-mode) #studyPage.study-page .free-banner.hidden:empty,
body:not(.dragon-studio-mode) #studyPage.study-page .free-banner:empty{
  display:none!important;
  width:0!important;
  max-width:0!important;
  min-width:0!important;
  height:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  box-shadow:none!important;
  overflow:hidden!important;
  pointer-events:none!important;
}

/* Study page interactive hover motion for side controls. */
body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page #studyRangeButton,
body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .study-word-list-panel{
  cursor:pointer!important;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease!important;
  will-change:transform;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page #studyRangeButton:hover,
body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page #studyRangeButton:focus-visible,
body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .study-word-list-panel:hover,
body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .study-word-list-panel:focus-visible{
  transform:translateY(-3px)!important;
  border-color:rgba(180,160,255,.72)!important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.28),
    0 0 22px rgba(124,99,255,.24),
    inset 0 1px 0 rgba(255,255,255,.10)!important;
  outline:none!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .shuffle-deck-card{
  cursor:pointer!important;
  transition:
    transform .20s ease,
    box-shadow .20s ease,
    border-color .20s ease,
    background .20s ease!important;
  will-change:transform;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .shuffle-deck-card:hover,
body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .shuffle-deck-card:focus-visible{
  transform:translateY(-3px) scale(1.04)!important;
  border-color:rgba(180,160,255,.72)!important;
  box-shadow:
    0 14px 30px rgba(0,0,0,.24),
    0 0 20px rgba(124,99,255,.26),
    inset 0 1px 0 rgba(255,255,255,.10)!important;
  outline:none!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .shuffle-deck-card:hover .quick-action-icon,
body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .shuffle-deck-card:focus-visible .quick-action-icon{
  box-shadow:
    0 10px 22px rgba(76,55,180,.28),
    0 0 18px rgba(140,105,255,.24),
    inset 0 1px 0 rgba(255,255,255,.12)!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .flash-side-toggle{
  cursor:pointer!important;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease!important;
  will-change:transform;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .flash-side-toggle:hover,
body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .flash-side-toggle:focus-within{
  transform:translateY(-3px)!important;
  border-color:rgba(180,160,255,.72)!important;
  box-shadow:
    0 14px 32px rgba(0,0,0,.24),
    0 0 20px rgba(124,99,255,.22),
    inset 0 1px 0 rgba(255,255,255,.08)!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .flash-side-option{
  cursor:pointer!important;
  transition:
    box-shadow .22s ease,
    background .22s ease,
    filter .22s ease!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .flash-side-toggle:hover .flash-side-option.active,
body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .flash-side-toggle:focus-within .flash-side-option.active{
  box-shadow:0 0 16px rgba(130,100,255,.34)!important;
  filter:brightness(1.04)!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page #studyRangeButton:active,
body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .study-word-list-panel:active,
body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .flash-side-toggle:active{
  transform:translateY(-1px)!important;
}

body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .shuffle-deck-card:active{
  transform:translateY(-1px) scale(1.02)!important;
}

@media (prefers-reduced-motion: reduce){
  body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page #studyRangeButton,
  body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .study-word-list-panel,
  body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .shuffle-deck-card,
  body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .flash-side-toggle,
  body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .flash-side-option{
    transition:none!important;
    will-change:auto!important;
  }

  body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page #studyRangeButton:hover,
  body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page #studyRangeButton:focus-visible,
  body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .study-word-list-panel:hover,
  body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .study-word-list-panel:focus-visible,
  body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .shuffle-deck-card:hover,
  body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .shuffle-deck-card:focus-visible,
  body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .flash-side-toggle:hover,
  body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .flash-side-toggle:focus-within,
  body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page #studyRangeButton:active,
  body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .study-word-list-panel:active,
  body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .shuffle-deck-card:active,
  body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .flash-side-toggle:active{
    transform:none!important;
  }
}

/* Absolute final Home + Level page layer. */
body:not(.dragon-studio-mode) #homePage .home-strip .feature-text h3,
body:not(.dragon-studio-mode) #homePage .home-strip .feature-item h3,
body:not(.dragon-studio-mode) #homePage .home-strip .feature b{
  color:#fff!important;
  text-shadow:none!important;
}
body:not(.dragon-studio-mode) #homePage .home-strip .feature-text p,
body:not(.dragon-studio-mode) #homePage .home-strip .feature-item p,
body:not(.dragon-studio-mode) #homePage .home-strip .feature span{
  color:rgba(235,232,255,.82)!important;
  text-shadow:none!important;
}
body:not(.dragon-studio-mode) #levelPage .level-card > div:nth-of-type(2){
  grid-column:2!important;
  grid-row:1 / 3!important;
  display:block!important;
  flex-direction:initial!important;
  min-width:0!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  justify-self:stretch!important;
  align-self:start!important;
  overflow:visible!important;
}
body:not(.dragon-studio-mode) #levelPage .level-card > div:nth-of-type(2) h3,
body:not(.dragon-studio-mode) #levelPage .level-card > div:nth-of-type(2) p{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  overflow:visible!important;
  white-space:normal!important;
  text-overflow:clip!important;
}
body:not(.dragon-studio-mode) #homePage.page,
body:not(.dragon-studio-mode) #levelPage.page{
  min-height:calc(100vh - 78px)!important;
  padding:24px clamp(20px,3.4vw,68px) 42px!important;
  background:linear-gradient(180deg,rgba(4,10,28,.04),rgba(4,10,28,.18)),url("assets/assets_webp/backgrounds/bg_main_navy_glow.webp") center top/cover no-repeat!important;
}
body:not(.dragon-studio-mode) #homePage .compact-hero,
body:not(.dragon-studio-mode) #levelPage .level-hero{
  max-width:920px!important;
  margin:0 auto 22px!important;
  padding:0!important;
  text-align:center!important;
}
body:not(.dragon-studio-mode) #homePage .hero h1,
body:not(.dragon-studio-mode) #levelPage .level-hero h1{
  margin:0 0 7px!important;
  color:#fff!important;
  font-size:clamp(42px,3.4vw,62px)!important;
  line-height:.98!important;
  font-weight:1000!important;
  letter-spacing:0!important;
  text-shadow:0 14px 34px rgba(0,0,0,.30)!important;
}
body:not(.dragon-studio-mode) #homePage .hero p,
body:not(.dragon-studio-mode) #levelPage .level-hero p{
  margin:0!important;
  color:rgba(247,248,255,.93)!important;
  font-size:clamp(15px,1.05vw,19px)!important;
  line-height:1.32!important;
  font-weight:750!important;
}
body:not(.dragon-studio-mode) #homePage .info-pill,
body:not(.dragon-studio-mode) #levelPage .info-pill{
  min-height:34px!important;
  margin-top:13px!important;
  padding:0 24px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.94)!important;
  border:1px solid rgba(198,188,255,.52)!important;
  color:#5e4be8!important;
  font-size:14px!important;
  line-height:1!important;
  font-weight:950!important;
  box-shadow:0 14px 28px rgba(5,13,42,.14)!important;
}
body:not(.dragon-studio-mode) #homePage .home-product-grid{
  width:min(1760px,100%)!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:16px!important;
}
body:not(.dragon-studio-mode) #homePage .product-card.exam-card{
  min-height:304px!important;
  padding:20px 26px 15px!important;
  gap:8px!important;
  border-radius:17px!important;
  border:1px solid rgba(232,228,255,.94)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.80),rgba(255,255,255,.96)),url("assets/assets_webp/backgrounds/mystical_moonlit_library_interior.webp") center/cover no-repeat!important;
  box-shadow:0 18px 40px rgba(7,13,47,.20),inset 0 1px 0 rgba(255,255,255,.80)!important;
}
body:not(.dragon-studio-mode) #homePage .product-card .mascot-wrap.image-mascot{
  width:112px!important;
  height:112px!important;
  background:radial-gradient(circle,#fff 0%,rgba(255,255,255,.92) 58%,rgba(238,232,255,.56) 100%)!important;
}
body:not(.dragon-studio-mode) #homePage .product-card .mascot-wrap.image-mascot img{
  width:98px!important;
  height:98px!important;
}
body:not(.dragon-studio-mode) #homePage .product-card .exam-copy{
  gap:7px!important;
}
body:not(.dragon-studio-mode) #homePage .product-card .exam-copy h2{
  padding-bottom:9px!important;
  border-bottom:1px solid rgba(116,103,190,.18)!important;
  font-size:clamp(22px,1.45vw,29px)!important;
}
body:not(.dragon-studio-mode) #homePage .product-card .exam-copy p{
  max-width:420px!important;
  min-height:34px!important;
  font-size:13px!important;
  line-height:1.22!important;
}
body:not(.dragon-studio-mode) #homePage .product-card .chips span,
body:not(.dragon-studio-mode) #homePage .product-card .chips.coming span,
body:not(.dragon-studio-mode) #homePage .product-card.coming-soon-card .chips span{
  padding:4px 10px!important;
  font-size:11.5px!important;
  box-shadow:none!important;
}
body:not(.dragon-studio-mode) #homePage .product-card .primary-wide{
  min-height:42px!important;
  margin-top:7px!important;
  border-radius:10px!important;
  font-size:14.5px!important;
}
body:not(.dragon-studio-mode) #homePage .home-strip.feature-strip,
body:not(.dragon-studio-mode) #homePage .home-strip.premium-feature-row{
  width:min(1360px,100%)!important;
  margin:18px auto 0!important;
  padding:18px 20px!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,rgba(19,27,70,.96),rgba(10,16,42,.98))!important;
  border:1px solid rgba(154,136,255,.38)!important;
  box-shadow:0 20px 48px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
body:not(.dragon-studio-mode) #homePage .home-strip .feature{
  min-width:0!important;
  padding:0 16px!important;
  background:transparent!important;
  border-color:rgba(172,156,255,.22)!important;
  box-shadow:none!important;
}
body:not(.dragon-studio-mode) #levelGrid.level-grid{
  width:min(1320px,100%)!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px!important;
  align-items:stretch!important;
}
body:not(.dragon-studio-mode) #levelGrid.level-grid.ssat{
  width:min(1180px,100%)!important;
}
body:not(.dragon-studio-mode) #levelPage .level-card{
  min-height:300px!important;
  padding:26px 28px 24px!important;
  display:grid!important;
  grid-template-columns:92px minmax(0,1fr)!important;
  grid-template-rows:auto auto 1fr auto auto!important;
  column-gap:20px!important;
  row-gap:12px!important;
  overflow:hidden!important;
  border-radius:17px!important;
  border:1px solid rgba(232,228,255,.94)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.84),rgba(255,255,255,.97)),url("assets/assets_webp/backgrounds/mystical_moonlit_library_interior.webp") center/cover no-repeat!important;
  box-shadow:0 20px 44px rgba(7,13,47,.22),inset 0 1px 0 rgba(255,255,255,.82)!important;
}
body:not(.dragon-studio-mode) #levelPage .level-card .level-icon{
  grid-column:1!important;
  grid-row:1 / 3!important;
  width:84px!important;
  height:84px!important;
  margin:0!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(246,244,255,.94))!important;
  border:1px solid rgba(181,168,255,.38)!important;
  box-shadow:0 12px 24px rgba(43,31,112,.12)!important;
}
body:not(.dragon-studio-mode) #levelPage .level-card .level-icon img{
  width:64px!important;
  height:64px!important;
  object-fit:contain!important;
}
body:not(.dragon-studio-mode) #levelPage .level-card h3{
  grid-column:2!important;
  grid-row:1!important;
  margin:4px 0 0!important;
  color:#071044!important;
  font-size:clamp(24px,1.65vw,31px)!important;
  line-height:1.03!important;
  font-weight:1000!important;
}
body:not(.dragon-studio-mode) #levelPage .level-card p{
  grid-column:2!important;
  grid-row:2!important;
  margin:0!important;
  color:#3a456a!important;
  font-size:15px!important;
  line-height:1.25!important;
  font-weight:850!important;
}
body:not(.dragon-studio-mode) #levelPage .level-card p b{
  display:block!important;
  margin-top:2px!important;
  color:#5e4be8!important;
  font-weight:1000!important;
}
body:not(.dragon-studio-mode) #levelPage .level-card .level-feature{
  grid-column:1 / -1!important;
  grid-row:3!important;
  align-self:start!important;
  margin:8px 0 0!important;
  padding-top:18px!important;
  border-top:1px solid rgba(116,103,190,.18)!important;
  color:#263153!important;
  font-size:14px!important;
  line-height:1.32!important;
  font-weight:850!important;
}
body:not(.dragon-studio-mode) #levelPage .level-count-line{
  grid-column:1 / -1!important;
  grid-row:4!important;
  align-self:end!important;
  margin:0!important;
  color:#747a9f!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:950!important;
  text-align:center!important;
}
body:not(.dragon-studio-mode) #levelPage .level-card .primary-wide.start{
  grid-column:1 / -1!important;
  grid-row:5!important;
  min-height:46px!important;
  margin:4px 0 0!important;
  border-radius:10px!important;
  font-size:17px!important;
  font-weight:1000!important;
}
@media(max-width:1180px){
  body:not(.dragon-studio-mode) #homePage .home-product-grid,
  body:not(.dragon-studio-mode) #levelGrid.level-grid,
  body:not(.dragon-studio-mode) #levelGrid.level-grid.ssat{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:720px){
  body:not(.dragon-studio-mode) #homePage.page,
  body:not(.dragon-studio-mode) #levelPage.page{
    padding:20px 14px 32px!important;
  }
  body:not(.dragon-studio-mode) #homePage .hero h1,
  body:not(.dragon-studio-mode) #levelPage .level-hero h1{
    font-size:clamp(36px,11vw,48px)!important;
  }
  body:not(.dragon-studio-mode) #homePage .home-product-grid,
  body:not(.dragon-studio-mode) #levelGrid.level-grid,
  body:not(.dragon-studio-mode) #levelGrid.level-grid.ssat{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  body:not(.dragon-studio-mode) #homePage .product-card.exam-card{
    min-height:0!important;
    padding:18px 16px 14px!important;
  }
  body:not(.dragon-studio-mode) #homePage .product-card .exam-copy p{
    min-height:0!important;
  }
  body:not(.dragon-studio-mode) #homePage .home-strip.feature-strip,
  body:not(.dragon-studio-mode) #homePage .home-strip.premium-feature-row{
    grid-template-columns:1fr!important;
    padding:18px!important;
  }
  body:not(.dragon-studio-mode) #homePage .home-strip .feature{
    padding:16px 0!important;
    border-right:0!important;
    border-bottom:1px solid rgba(172,156,255,.18)!important;
  }
  body:not(.dragon-studio-mode) #levelPage .level-card{
    min-height:0!important;
    padding:20px 18px 18px!important;
    grid-template-columns:80px minmax(0,1fr)!important;
    column-gap:14px!important;
  }
  body:not(.dragon-studio-mode) #levelPage .level-card .level-icon{
    width:74px!important;
    height:74px!important;
  }
  body:not(.dragon-studio-mode) #levelPage .level-card .level-icon img{
    width:56px!important;
    height:56px!important;
  }
  body:not(.dragon-studio-mode) #levelPage .level-card h3{
    font-size:25px!important;
  }
  body:not(.dragon-studio-mode) #levelPage .level-card .primary-wide.start{
    min-height:48px!important;
    font-size:17px!important;
  }
}

/* Dragon Studio: polished 7-step Egg Hatch Progress journey. */
body.dragon-studio-mode .ds-dashboard .ds-dashboard-grid{
  grid-template-columns:minmax(0,1.05fr) minmax(520px,1.3fr) minmax(0,.9fr)!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch{
  min-height:clamp(620px,58vw,760px)!important;
  display:grid!important;
  grid-template-rows:auto auto auto minmax(0,1fr) auto auto!important;
  align-content:stretch!important;
  padding:24px 26px 28px!important;
  overflow:hidden!important;
  border-radius:28px!important;
  background:
    radial-gradient(circle at 50% 60%,rgba(119,79,255,.25),transparent 38%),
    linear-gradient(180deg,rgba(7,11,42,.20),rgba(5,8,28,.26)),
    url("assets/my-dragon-studio-batch/optimized-my-dragon-studio-webp/hatching/hatching_background.webp") center/cover no-repeat!important;
  border:1px solid rgba(166,139,255,.38)!important;
  box-shadow:0 22px 54px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.08)!important;
  color:#fff!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 18% 84%,rgba(144,87,255,.24),transparent 22%),
    radial-gradient(circle at 84% 88%,rgba(119,84,255,.26),transparent 22%),
    radial-gradient(circle at 56% 12%,rgba(255,255,255,.14),transparent 18%)!important;
  opacity:.88!important;
  z-index:0!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch>*{
  position:relative!important;
  z-index:1!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch h2{
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  color:#ffffff!important;
  font-size:clamp(21px,1.45vw,25px)!important;
  line-height:1.1!important;
  font-weight:1000!important;
  text-shadow:0 3px 18px rgba(0,0,0,.38)!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch h2 .ds-ui-icon,
body.dragon-studio-mode .ds-dashboard .ds-hatch h2 .ui-inline-icon{
  width:34px!important;
  height:34px!important;
  filter:drop-shadow(0 0 12px rgba(166,124,255,.58))!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch-title{
  margin:8px 0 0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch-title strong{
  min-width:190px!important;
  height:58px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 26px!important;
  border-radius:999px!important;
  background:rgba(18,18,58,.80)!important;
  border:1px solid rgba(178,151,255,.46)!important;
  color:#ffffff!important;
  font-size:clamp(30px,2.35vw,42px)!important;
  line-height:1!important;
  font-weight:1000!important;
  box-shadow:0 0 0 3px rgba(137,91,255,.16),0 0 24px rgba(139,104,255,.34),inset 0 1px 0 rgba(255,255,255,.12)!important;
  text-shadow:0 3px 18px rgba(0,0,0,.35)!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch-title img{
  display:none!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch>p{
  margin:12px 0 0!important;
  color:#d8ccff!important;
  font-size:clamp(14px,1.05vw,18px)!important;
  line-height:1.24!important;
  font-weight:950!important;
  text-align:center!important;
  text-shadow:0 2px 14px rgba(0,0,0,.38)!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-days{
  --node-w:126px!important;
  width:min(100%,780px)!important;
  min-height:clamp(410px,37vw,520px)!important;
  margin:12px auto 4px!important;
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  grid-template-rows:repeat(3,minmax(102px,1fr)) minmax(128px,1.16fr)!important;
  gap:0!important;
  align-items:center!important;
  justify-items:center!important;
  position:relative!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-days::before{
  content:none!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch-connector{
  position:absolute!important;
  inset:4% 2% 0!important;
  width:96%!important;
  height:96%!important;
  overflow:visible!important;
  z-index:0!important;
  pointer-events:none!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch-connector path{
  fill:none!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch-connector .ds-hatch-path-base{
  stroke:rgba(73,44,156,.74)!important;
  stroke-width:17!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch-connector .ds-hatch-path-glow{
  stroke:rgba(178,132,255,.96)!important;
  stroke-width:8!important;
  filter:drop-shadow(0 0 7px rgba(185,142,255,.92)) drop-shadow(0 0 20px rgba(132,89,255,.64))!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch-connector circle{
  fill:#b98cff!important;
  stroke:rgba(255,255,255,.70)!important;
  stroke-width:2!important;
  filter:drop-shadow(0 0 10px rgba(194,150,255,.96))!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day{
  width:var(--node-w)!important;
  min-width:var(--node-w)!important;
  display:grid!important;
  justify-items:center!important;
  align-content:center!important;
  gap:5px!important;
  position:relative!important;
  z-index:2!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day::after{
  content:""!important;
  width:76px!important;
  height:20px!important;
  margin-top:-17px!important;
  border-radius:50%!important;
  background:radial-gradient(ellipse,rgba(208,170,255,.80) 0%,rgba(129,78,255,.42) 48%,rgba(20,13,70,.18) 75%,transparent 78%)!important;
  border-bottom:2px solid rgba(203,167,255,.35)!important;
  box-shadow:0 0 18px rgba(164,110,255,.55)!important;
  order:3!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day-1{grid-column:1 / span 2!important;grid-row:1!important}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day-2{grid-column:5 / span 2!important;grid-row:1!important}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day-3{grid-column:1 / span 2!important;grid-row:2!important}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day-4{grid-column:5 / span 2!important;grid-row:2!important}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day-5{grid-column:1 / span 2!important;grid-row:3!important}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day-6{grid-column:5 / span 2!important;grid-row:3!important}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day-7{grid-column:3 / span 2!important;grid-row:4!important}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day b{
  color:#ffffff!important;
  font-size:clamp(14px,1vw,18px)!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:0!important;
  text-shadow:0 3px 14px rgba(0,0,0,.48),0 0 12px rgba(113,85,255,.28)!important;
  white-space:nowrap!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day>img{
  width:clamp(78px,6vw,94px)!important;
  height:clamp(78px,6vw,94px)!important;
  object-fit:contain!important;
  filter:drop-shadow(0 0 12px rgba(178,132,255,.78)) drop-shadow(0 12px 13px rgba(0,0,0,.32))!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day.done>img,
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day.current>img{
  filter:drop-shadow(0 0 14px rgba(207,169,255,.90)) drop-shadow(0 0 25px rgba(130,90,255,.45)) drop-shadow(0 12px 13px rgba(0,0,0,.32))!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day.hatch{
  align-content:end!important;
  transform:translateY(-3px)!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day.hatch::before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  bottom:18px!important;
  width:156px!important;
  height:118px!important;
  border-radius:50%!important;
  transform:translateX(-50%)!important;
  background:radial-gradient(circle,rgba(255,214,103,.32) 0%,rgba(180,109,255,.30) 38%,transparent 70%)!important;
  filter:blur(2px)!important;
  z-index:-1!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day.hatch::after{
  width:132px!important;
  height:30px!important;
  margin-top:-25px!important;
  background:radial-gradient(ellipse,rgba(239,197,255,.96) 0%,rgba(151,86,255,.64) 52%,rgba(20,13,70,.28) 78%,transparent 82%)!important;
  box-shadow:0 0 28px rgba(190,126,255,.82),0 0 42px rgba(255,205,83,.24)!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day.hatch>img{
  width:clamp(124px,9vw,148px)!important;
  height:clamp(124px,9vw,148px)!important;
  margin-bottom:-9px!important;
  filter:drop-shadow(0 0 18px rgba(255,221,91,.78)) drop-shadow(0 0 34px rgba(162,92,255,.62)) drop-shadow(0 18px 18px rgba(0,0,0,.38))!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day span{
  position:absolute!important;
  right:14px!important;
  bottom:16px!important;
  width:27px!important;
  height:27px!important;
  margin:0!important;
  border-radius:50%!important;
  background:rgba(18,20,58,.76)!important;
  border:1px solid rgba(210,189,255,.54)!important;
  box-shadow:0 0 12px rgba(156,107,255,.42)!important;
  opacity:.86!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day span:empty{
  opacity:0!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch>small{
  margin:0 auto 12px!important;
  color:#f0eaff!important;
  font-size:clamp(15px,1.18vw,20px)!important;
  line-height:1.2!important;
  font-weight:900!important;
  text-align:center!important;
  text-shadow:0 3px 16px rgba(0,0,0,.48)!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch>button{
  width:min(100%,430px)!important;
  min-height:62px!important;
  margin:0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:13px!important;
  border:1px solid rgba(238,208,255,.45)!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,#a978ff 0%,#754cf1 56%,#5b35d6 100%)!important;
  color:#ffffff!important;
  font-size:clamp(20px,1.55vw,28px)!important;
  line-height:1!important;
  font-weight:1000!important;
  box-shadow:0 14px 34px rgba(83,48,202,.44),0 0 0 3px rgba(188,134,255,.15),inset 0 1px 0 rgba(255,255,255,.32)!important;
  text-shadow:0 2px 10px rgba(0,0,0,.30)!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch>button img{
  width:34px!important;
  height:34px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.22))!important;
}
@media(max-width:1180px){
  body.dragon-studio-mode .ds-dashboard .ds-dashboard-grid{
    grid-template-columns:1fr 1fr!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-hatch{
    min-height:620px!important;
  }
}
@media(max-width:760px){
  body.dragon-studio-mode .ds-dashboard .ds-dashboard-grid{
    grid-template-columns:1fr!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-hatch{
    min-height:560px!important;
    padding:20px 16px 22px!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-days{
    --node-w:82px!important;
    min-height:360px!important;
    grid-template-rows:repeat(3,84px) 108px!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-hatch-connector{
    inset:8% 0 0!important;
    width:100%!important;
    height:90%!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day>img{
    width:62px!important;
    height:62px!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day.hatch>img{
    width:100px!important;
    height:100px!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day b{
    font-size:12px!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day::after{
    width:58px!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day.hatch::after{
    width:104px!important;
  }
}

/* Compact second-line reward summary strip for Profile and Dragon Studio. */
body.dragon-studio-mode .ds-dashboard .ds-summary-row,
.profile-page .profile-reward-summary-row{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:14px!important;
  align-items:center!important;
  max-width:1760px!important;
}
body.dragon-studio-mode .ds-dashboard .ds-summary-row{
  margin:0 auto 14px!important;
}
.profile-page .profile-reward-summary-row{
  margin:12px 0 16px!important;
}
body.dragon-studio-mode .ds-dashboard .ds-summary-row article,
body.dragon-studio-mode .ds-dashboard .ds-summary-row button,
.profile-page .profile-reward-summary-card,
.profile-page .profile-reward-summary-action{
  min-height:60px!important;
  height:60px!important;
  padding:10px 18px!important;
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  overflow:hidden!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,rgba(18,27,67,.94),rgba(10,16,42,.96))!important;
  border:1px solid rgba(150,130,255,.34)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
body.dragon-studio-mode .ds-dashboard .ds-summary-row button,
.profile-page .profile-reward-summary-action{
  cursor:pointer!important;
}
body.dragon-studio-mode .ds-dashboard .ds-summary-row img,
.profile-page .profile-reward-summary-card img,
.profile-page .profile-reward-summary-action img,
.profile-page .profile-reward-summary-card .profile-new-icon,
.profile-page .profile-reward-summary-action .profile-new-icon{
  width:22px!important;
  height:22px!important;
  flex:0 0 22px!important;
  object-fit:contain!important;
  grid-row:auto!important;
}
body.dragon-studio-mode .ds-dashboard .ds-summary-row article strong,
.profile-page .profile-reward-summary-card strong{
  display:block!important;
  min-width:0!important;
  color:#ffffff!important;
  font-size:20px!important;
  line-height:1!important;
  font-weight:1000!important;
  white-space:nowrap!important;
}
body.dragon-studio-mode .ds-dashboard .ds-summary-row article span,
.profile-page .profile-reward-summary-card span{
  display:block!important;
  min-width:0!important;
  margin-left:auto!important;
  color:rgba(235,232,255,.78)!important;
  font-size:14px!important;
  line-height:1!important;
  font-weight:850!important;
  white-space:nowrap!important;
}
body.dragon-studio-mode .ds-dashboard .ds-summary-row button b,
.profile-page .profile-reward-summary-action b{
  display:block!important;
  min-width:0!important;
  color:#ffffff!important;
  font-size:16px!important;
  line-height:1.05!important;
  font-weight:950!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
body.dragon-studio-mode .ds-dashboard .ds-summary-row button span,
.profile-page .profile-reward-summary-action span{
  display:none!important;
}
body.dragon-studio-mode .ds-dashboard .ds-summary-row button i,
.profile-page .profile-reward-summary-action i{
  margin-left:auto!important;
  color:rgba(235,232,255,.82)!important;
  font-size:20px!important;
  line-height:1!important;
  font-style:normal!important;
  font-weight:1000!important;
  flex:0 0 auto!important;
  grid-column:auto!important;
  grid-row:auto!important;
}
@media(max-width:900px){
  body.dragon-studio-mode .ds-dashboard .ds-summary-row,
  .profile-page .profile-reward-summary-row{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:520px){
  body.dragon-studio-mode .ds-dashboard .ds-summary-row,
  .profile-page .profile-reward-summary-row{
    grid-template-columns:1fr!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-summary-row article,
  body.dragon-studio-mode .ds-dashboard .ds-summary-row button,
  .profile-page .profile-reward-summary-card,
  .profile-page .profile-reward-summary-action{
    min-height:56px!important;
    height:56px!important;
  }
}

/* Dragon Studio: compact scale pass for Hatch Progress and Nurture Tasks only. */
body.dragon-studio-mode .ds-dashboard .ds-dashboard-grid{
  grid-template-columns:minmax(0,1.05fr) minmax(430px,1.15fr) minmax(0,.88fr)!important;
  align-items:start!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch,
body.dragon-studio-mode .ds-dashboard .ds-tasks{
  align-self:start!important;
  border-radius:22px!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch{
  min-height:0!important;
  padding:14px 16px 16px!important;
  grid-template-rows:auto auto auto auto auto auto!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch h2,
body.dragon-studio-mode .ds-dashboard .ds-tasks h2{
  font-size:18px!important;
  line-height:1.1!important;
  gap:8px!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch h2 .ds-ui-icon,
body.dragon-studio-mode .ds-dashboard .ds-hatch h2 .ui-inline-icon,
body.dragon-studio-mode .ds-dashboard .ds-tasks h2 .ds-ui-icon,
body.dragon-studio-mode .ds-dashboard .ds-tasks h2 .ui-inline-icon{
  width:20px!important;
  height:20px!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch-title{
  margin:7px 0 0!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch-title strong{
  min-width:120px!important;
  height:40px!important;
  padding:0 16px!important;
  font-size:18px!important;
  border-radius:999px!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch>p,
body.dragon-studio-mode .ds-dashboard .ds-tasks>p{
  margin:7px 0 0!important;
  font-size:12px!important;
  line-height:1.25!important;
  font-weight:850!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-days{
  --node-w:76px!important;
  width:min(100%,560px)!important;
  min-height:260px!important;
  margin:7px auto 2px!important;
  grid-template-rows:repeat(3,58px) 76px!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch-connector{
  inset:8% 4% 0!important;
  width:92%!important;
  height:90%!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch-connector .ds-hatch-path-base{
  stroke-width:12!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch-connector .ds-hatch-path-glow{
  stroke-width:6!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch-connector circle{
  r:5!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day{
  width:var(--node-w)!important;
  min-width:var(--node-w)!important;
  gap:3px!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day b{
  font-size:12px!important;
  line-height:1!important;
  font-weight:900!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day>img{
  width:48px!important;
  height:48px!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day::after{
  width:44px!important;
  height:12px!important;
  margin-top:-11px!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day.hatch>img{
  width:66px!important;
  height:66px!important;
  margin-bottom:-5px!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day.hatch::before{
  width:84px!important;
  height:64px!important;
  bottom:11px!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day.hatch::after{
  width:72px!important;
  height:16px!important;
  margin-top:-13px!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day span{
  width:18px!important;
  height:18px!important;
  right:10px!important;
  bottom:10px!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch>small{
  margin:2px auto 9px!important;
  font-size:12px!important;
  line-height:1.25!important;
  font-weight:800!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch>button{
  width:min(100%,250px)!important;
  min-height:42px!important;
  padding:0 18px!important;
  gap:8px!important;
  border-radius:14px!important;
  font-size:14px!important;
  font-weight:900!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch>button img{
  width:20px!important;
  height:20px!important;
}
body.dragon-studio-mode .ds-dashboard .ds-tasks{
  min-height:0!important;
  padding:14px 16px!important;
}
body.dragon-studio-mode .ds-dashboard .ds-task-row{
  min-height:32px!important;
  grid-template-columns:18px minmax(0,1fr) auto 52px!important;
  gap:7px!important;
  padding:3px 0!important;
}
body.dragon-studio-mode .ds-dashboard .ds-check{
  width:16px!important;
  height:16px!important;
  border-radius:4px!important;
}
body.dragon-studio-mode .ds-dashboard .ds-task-row b{
  font-size:13px!important;
  line-height:1.2!important;
  font-weight:800!important;
}
body.dragon-studio-mode .ds-dashboard .ds-task-row em{
  font-size:11px!important;
  line-height:1!important;
  font-weight:750!important;
}
body.dragon-studio-mode .ds-dashboard .ds-task-row button{
  min-width:52px!important;
  min-height:28px!important;
  height:28px!important;
  padding:0 10px!important;
  border-radius:10px!important;
  font-size:12px!important;
  font-weight:850!important;
}
body.dragon-studio-mode .ds-dashboard .ds-tasks footer{
  min-height:40px!important;
  margin-top:12px!important;
  padding:8px 10px!important;
  border-radius:12px!important;
  font-size:11px!important;
  line-height:1.25!important;
}
body.dragon-studio-mode .ds-dashboard .ds-tasks footer img,
body.dragon-studio-mode .ds-dashboard .ds-tasks footer .ds-ui-icon,
body.dragon-studio-mode .ds-dashboard .ds-tasks footer .ui-inline-icon{
  width:18px!important;
  height:18px!important;
}
@media(max-width:1180px){
  body.dragon-studio-mode .ds-dashboard .ds-dashboard-grid{
    grid-template-columns:1fr 1fr!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-hatch{
    min-height:0!important;
  }
}
@media(max-width:760px){
  body.dragon-studio-mode .ds-dashboard .ds-dashboard-grid{
    grid-template-columns:1fr!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-hatch{
    padding:14px 14px 16px!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-days{
    --node-w:68px!important;
    min-height:250px!important;
    grid-template-rows:repeat(3,56px) 72px!important;
  }
}

/* Dragon Studio: equal-height top row, matching the balanced reference layout. */
body.dragon-studio-mode .ds-dashboard .ds-dashboard-grid{
  grid-template-columns:minmax(0,1fr) minmax(500px,1.25fr) minmax(0,.9fr)!important;
  align-items:stretch!important;
}
body.dragon-studio-mode .ds-dashboard .my-dragon-card,
body.dragon-studio-mode .ds-dashboard .ds-hatch,
body.dragon-studio-mode .ds-dashboard .ds-tasks{
  height:520px!important;
  min-height:520px!important;
  max-height:520px!important;
  align-self:stretch!important;
  overflow:hidden!important;
  border-radius:24px!important;
}
body.dragon-studio-mode .ds-dashboard .my-dragon-card{
  padding:18px 20px!important;
}
body.dragon-studio-mode .ds-dashboard .my-dragon-card>.card-inner{
  height:100%!important;
  min-height:0!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr) auto 64px!important;
  align-items:center!important;
  gap:10px!important;
  padding:0!important;
}
body.dragon-studio-mode .ds-dashboard .my-dragon-card h2{
  margin:0!important;
  font-size:30px!important;
  line-height:1.05!important;
  font-weight:1000!important;
}
body.dragon-studio-mode .ds-dashboard .my-dragon-hero{
  min-height:0!important;
  height:100%!important;
  display:grid!important;
  place-items:center!important;
}
body.dragon-studio-mode .ds-dashboard .my-dragon-art-frame{
  width:min(86%,310px)!important;
  height:min(100%,255px)!important;
  min-height:0!important;
  margin:0 auto!important;
  display:grid!important;
  place-items:center!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
body.dragon-studio-mode .ds-dashboard .my-dragon-art-frame::before{
  width:112%!important;
  height:112%!important;
}
body.dragon-studio-mode .ds-dashboard .my-dragon-art-frame img{
  width:100%!important;
  height:100%!important;
  max-width:310px!important;
  max-height:255px!important;
  object-fit:contain!important;
  transform:none!important;
}
body.dragon-studio-mode .ds-dashboard .my-dragon-name{
  margin:0!important;
  font-size:34px!important;
  line-height:1!important;
  font-weight:1000!important;
}
body.dragon-studio-mode .ds-dashboard .my-dragon-meta-bar{
  width:calc(100% - 12px)!important;
  max-width:none!important;
  min-height:64px!important;
  height:64px!important;
  margin:0 auto!important;
  align-self:end!important;
}
body.dragon-studio-mode .ds-dashboard .my-dragon-meta-bar .meta-pill{
  min-height:64px!important;
  padding:0 12px!important;
}
body.dragon-studio-mode .ds-dashboard .my-dragon-meta-bar .meta-pill span,
body.dragon-studio-mode .ds-dashboard .my-dragon-meta-bar .mood-label{
  font-size:13px!important;
  line-height:1!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch{
  padding:18px 20px!important;
  display:grid!important;
  grid-template-rows:auto auto auto minmax(0,1fr) auto auto!important;
  align-content:stretch!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch h2{
  font-size:21px!important;
  line-height:1.08!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch h2 .ds-ui-icon,
body.dragon-studio-mode .ds-dashboard .ds-hatch h2 .ui-inline-icon{
  width:24px!important;
  height:24px!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch-title{
  margin:8px 0 0!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch-title strong{
  min-width:138px!important;
  height:44px!important;
  padding:0 20px!important;
  font-size:22px!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch>p{
  margin:8px 0 0!important;
  font-size:13px!important;
  line-height:1.22!important;
  font-weight:900!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-days{
  --node-w:96px!important;
  width:min(100%,640px)!important;
  min-height:300px!important;
  margin:8px auto 2px!important;
  grid-template-rows:repeat(3,70px) 90px!important;
  align-self:center!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch-connector{
  inset:6% 2% 0!important;
  width:96%!important;
  height:92%!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch-connector .ds-hatch-path-base{
  stroke-width:15!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch-connector .ds-hatch-path-glow{
  stroke-width:8!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day{
  width:var(--node-w)!important;
  min-width:var(--node-w)!important;
  gap:4px!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day b{
  font-size:14px!important;
  line-height:1!important;
  font-weight:1000!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day>img{
  width:72px!important;
  height:72px!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day::after{
  width:64px!important;
  height:16px!important;
  margin-top:-15px!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day.hatch>img{
  width:94px!important;
  height:94px!important;
  margin-bottom:-7px!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day.hatch::before{
  width:118px!important;
  height:86px!important;
  bottom:13px!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day.hatch::after{
  width:104px!important;
  height:22px!important;
  margin-top:-18px!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day span{
  width:22px!important;
  height:22px!important;
  right:12px!important;
  bottom:12px!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch>small{
  margin:4px auto 10px!important;
  font-size:13px!important;
  line-height:1.15!important;
  font-weight:900!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch>button{
  width:min(100%,310px)!important;
  min-height:48px!important;
  height:48px!important;
  padding:0 22px!important;
  border-radius:15px!important;
  font-size:16px!important;
}
body.dragon-studio-mode .ds-dashboard .ds-hatch>button img{
  width:22px!important;
  height:22px!important;
}
body.dragon-studio-mode .ds-dashboard .ds-tasks{
  padding:18px 20px!important;
  display:flex!important;
  flex-direction:column!important;
}
body.dragon-studio-mode .ds-dashboard .ds-tasks h2{
  font-size:21px!important;
  line-height:1.08!important;
}
body.dragon-studio-mode .ds-dashboard .ds-tasks>p{
  margin:6px 0 8px!important;
  font-size:13px!important;
  line-height:1.25!important;
}
body.dragon-studio-mode .ds-dashboard .ds-task-row{
  min-height:34px!important;
  padding:3px 0!important;
  grid-template-columns:18px minmax(0,1fr) auto 54px!important;
}
body.dragon-studio-mode .ds-dashboard .ds-task-row b{
  font-size:13px!important;
}
body.dragon-studio-mode .ds-dashboard .ds-task-row em{
  font-size:11px!important;
}
body.dragon-studio-mode .ds-dashboard .ds-task-row button{
  min-width:54px!important;
  min-height:29px!important;
  height:29px!important;
  font-size:12px!important;
}
body.dragon-studio-mode .ds-dashboard .ds-tasks footer{
  margin-top:auto!important;
  min-height:44px!important;
  padding:9px 12px!important;
  font-size:11.5px!important;
  line-height:1.25!important;
}
@media(max-width:1180px){
  body.dragon-studio-mode .ds-dashboard .ds-dashboard-grid{
    grid-template-columns:1fr 1fr!important;
    align-items:stretch!important;
  }
  body.dragon-studio-mode .ds-dashboard .my-dragon-card,
  body.dragon-studio-mode .ds-dashboard .ds-hatch,
  body.dragon-studio-mode .ds-dashboard .ds-tasks{
    height:auto!important;
    min-height:500px!important;
    max-height:none!important;
  }
}
@media(max-width:760px){
  body.dragon-studio-mode .ds-dashboard .ds-dashboard-grid{
    grid-template-columns:1fr!important;
  }
  body.dragon-studio-mode .ds-dashboard .my-dragon-card,
  body.dragon-studio-mode .ds-dashboard .ds-hatch,
  body.dragon-studio-mode .ds-dashboard .ds-tasks{
    min-height:0!important;
    height:auto!important;
  }
  body.dragon-studio-mode .ds-dashboard .my-dragon-card>.card-inner{
    grid-template-rows:auto 250px auto 64px!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-days{
    --node-w:76px!important;
    min-height:270px!important;
    grid-template-rows:repeat(3,62px) 84px!important;
  }
}

.hatchery-match-page .hatchery-game-shell{
  grid-template-columns:280px minmax(560px,1fr) minmax(390px,430px)!important;
  gap:24px!important;
  max-width:1660px!important;
}
.hatchery-match-page .hatchery-right-col{
  min-width:0!important;
}
  padding:28px!important;
  overflow:hidden!important;
  border-radius:30px!important;
  background:
    radial-gradient(circle at 20% 8%,rgba(128,90,255,.17),transparent 30%),
    radial-gradient(circle at 86% 24%,rgba(88,74,210,.12),transparent 26%),
    linear-gradient(180deg,rgba(10,18,48,.98),rgba(4,10,30,.99))!important;
  border:1px solid rgba(138,112,255,.50)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.07)!important;
  color:#f7f4ff!important;
}
  margin:0 0 12px!important;
  color:#ffffff!important;
  font-size:clamp(32px,2.8vw,48px)!important;
  line-height:1.02!important;
  font-weight:1000!important;
  letter-spacing:0!important;
  text-shadow:0 4px 16px rgba(0,0,0,.38)!important;
}
  max-width:520px!important;
  margin:0 0 24px!important;
  color:rgba(224,218,255,.84)!important;
  font-size:clamp(19px,1.55vw,26px)!important;
  line-height:1.32!important;
  font-weight:800!important;
}
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:18px!important;
  align-items:stretch!important;
}
  position:relative!important;
  min-height:188px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  overflow:hidden!important;
  padding:18px 16px 15px!important;
  border-radius:24px!important;
  border:1px solid rgba(145,120,255,.48)!important;
  background:
    radial-gradient(circle at 50% 72%,rgba(110,80,255,.24),transparent 31%),
    radial-gradient(circle at 50% 22%,rgba(255,255,255,.06),transparent 28%),
    linear-gradient(180deg,rgba(14,23,60,.97),rgba(8,13,38,.99))!important;
  box-shadow:0 14px 34px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.07)!important;
  color:#ffffff!important;
  opacity:1!important;
  filter:none!important;
  text-align:center!important;
}
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 22% 22%,rgba(255,255,255,.20) 0 1px,transparent 2px),
    radial-gradient(circle at 78% 30%,rgba(168,137,255,.28) 0 1px,transparent 2px),
    radial-gradient(circle at 48% 55%,rgba(100,80,255,.20),transparent 38%)!important;
}
  position:relative!important;
  z-index:1!important;
  display:block!important;
  width:min(80%,160px)!important;
  height:112px!important;
  margin:0 auto!important;
  object-fit:contain!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.32))!important;
  opacity:1!important;
}
  position:relative!important;
  z-index:1!important;
  display:block!important;
  margin:0!important;
  color:#ffffff!important;
  font-size:clamp(18px,1.45vw,25px)!important;
  line-height:1.12!important;
  font-weight:1000!important;
  text-align:center!important;
  text-shadow:0 2px 10px rgba(0,0,0,.38)!important;
}
  grid-column:1 / -1!important;
  min-height:210px!important;
  padding:24px 18px 22px!important;
  border-radius:28px!important;
  background:
    radial-gradient(circle at 50% 35%,rgba(124,92,255,.26),transparent 34%),
    radial-gradient(circle at 50% 66%,rgba(145,100,255,.16),transparent 33%),
    linear-gradient(180deg,rgba(14,23,60,.97),rgba(8,13,38,.99))!important;
  border:1px solid rgba(145,120,255,.54)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.07)!important;
}
  width:min(120px,38%)!important;
  height:100px!important;
  margin:0 auto 8px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 0 20px rgba(132,92,255,.55)) drop-shadow(0 14px 18px rgba(0,0,0,.30))!important;
}
  font-size:clamp(24px,2.1vw,34px)!important;
  line-height:1.05!important;
}
  position:relative!important;
  z-index:1!important;
  display:block!important;
  margin-top:8px!important;
  color:rgba(224,218,255,.78)!important;
  font-size:clamp(14px,1.2vw,18px)!important;
  line-height:1.28!important;
  font-weight:750!important;
  text-align:center!important;
}
@media(max-width:1320px){
  .hatchery-match-page .hatchery-game-shell{
    grid-template-columns:260px minmax(520px,1fr) minmax(360px,400px)!important;
    gap:20px!important;
  }
    padding:24px!important;
  }
    gap:14px!important;
  }
}
@media(max-width:1180px){
  .hatchery-match-page .hatchery-game-shell{
    grid-template-columns:280px minmax(0,1fr)!important;
  }
  .hatchery-match-page .hatchery-right-col{
    grid-column:1 / -1!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-items:start!important;
  }
    grid-column:1 / -1!important;
  }
}
@media(max-width:700px){
  .hatchery-match-page .hatchery-game-shell,
  .hatchery-match-page .hatchery-right-col{
    grid-template-columns:1fr!important;
  }
    padding:20px!important;
    border-radius:26px!important;
  }
    grid-template-columns:1fr!important;
  }
    grid-column:auto!important;
  }
}

/* Hatchery Match-Up: final Pic 2 collection sizing pass. */
.hatchery-match-page .hatchery-game-shell{
  grid-template-columns:260px minmax(540px,1fr) minmax(520px,600px)!important;
  gap:24px!important;
  max-width:1800px!important;
}

.hatchery-match-page .hatchery-right-col{
  min-width:520px!important;
}

  padding:34px!important;
  border-radius:32px!important;
}

  font-size:clamp(42px,3.2vw,58px)!important;
}

  margin-bottom:28px!important;
  font-size:clamp(22px,1.85vw,32px)!important;
}

  gap:22px!important;
}

  min-height:230px!important;
  padding:22px 18px 18px!important;
  border-radius:28px!important;
  background:
    radial-gradient(circle at 50% 70%,rgba(110,80,255,.25),transparent 32%),
    radial-gradient(circle at 50% 28%,rgba(255,255,255,.07),transparent 30%),
    linear-gradient(180deg,rgba(14,23,60,.98),rgba(8,13,38,.99))!important;
}

  opacity:1!important;
  filter:none!important;
}

  width:min(86%,210px)!important;
  height:154px!important;
  margin-bottom:8px!important;
}

  font-size:clamp(22px,1.75vw,30px)!important;
}

  min-height:250px!important;
  padding:28px 22px 24px!important;
  border-radius:30px!important;
}

  width:min(138px,32%)!important;
  height:116px!important;
  margin-bottom:12px!important;
}

  font-size:clamp(30px,2.45vw,42px)!important;
}

  font-size:clamp(16px,1.35vw,22px)!important;
}

@media(max-width:1500px){
  .hatchery-match-page .hatchery-game-shell{
    grid-template-columns:250px minmax(500px,1fr) minmax(480px,540px)!important;
    gap:20px!important;
  }

  .hatchery-match-page .hatchery-right-col{
    min-width:480px!important;
  }

    padding:28px!important;
  }

    min-height:210px!important;
  }

    height:136px!important;
  }
}

@media(max-width:1180px){
  .hatchery-match-page .hatchery-game-shell{
    grid-template-columns:280px minmax(0,1fr)!important;
  }

  .hatchery-match-page .hatchery-right-col{
    min-width:0!important;
  }
}

@media(max-width:700px){
    font-size:34px!important;
  }

    font-size:20px!important;
  }

    min-height:220px!important;
  }
}

/* Dragon Studio: fit text cleanly inside the My Dragon bottom info row. */
body.dragon-studio-mode .ds-dashboard .my-dragon-card .my-dragon-meta-bar{
  display:grid!important;
  grid-template-columns:.9fr 1.18fr 1.08fr!important;
  align-items:stretch!important;
  gap:0!important;
  overflow:hidden!important;
}
body.dragon-studio-mode .ds-dashboard .my-dragon-card .meta-pill{
  min-width:0!important;
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  padding:8px 10px!important;
  overflow:hidden!important;
}
body.dragon-studio-mode .ds-dashboard .my-dragon-card .meta-pill img,
body.dragon-studio-mode .ds-dashboard .my-dragon-card .meta-pill .ds-ui-icon,
body.dragon-studio-mode .ds-dashboard .my-dragon-card .meta-pill .ui-inline-icon{
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
  object-fit:contain!important;
}
body.dragon-studio-mode .ds-dashboard .my-dragon-card .meta-pill .mood-emoji{
  width:20px!important;
  height:20px!important;
  flex:0 0 20px!important;
  display:inline-grid!important;
  place-items:center!important;
  font-size:14px!important;
  line-height:1!important;
}
body.dragon-studio-mode .ds-dashboard .my-dragon-card .meta-pill span,
body.dragon-studio-mode .ds-dashboard .my-dragon-card .meta-pill .mood-label{
  min-width:0!important;
  max-width:100%!important;
  display:block!important;
  color:#ffffff!important;
  font-size:12.5px!important;
  line-height:1.1!important;
  font-weight:850!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
body.dragon-studio-mode .ds-dashboard .my-dragon-card .change-avatar-button span{
  font-size:12px!important;
}
body.dragon-studio-mode .ds-dashboard .my-dragon-card .meta-divider{
  width:1px!important;
  min-width:1px!important;
}
@media(max-width:760px){
  body.dragon-studio-mode .ds-dashboard .my-dragon-card .my-dragon-meta-bar{
    grid-template-columns:.9fr 1.18fr 1.08fr!important;
  }
  body.dragon-studio-mode .ds-dashboard .my-dragon-card .meta-pill{
    gap:6px!important;
    padding:8px 8px!important;
  }
  body.dragon-studio-mode .ds-dashboard .my-dragon-card .meta-pill span,
  body.dragon-studio-mode .ds-dashboard .my-dragon-card .meta-pill .mood-label{
    font-size:12px!important;
  }
}

/* Profile: compact Learning Snapshot metrics and larger second-line summary icons. */
.profile-page .profile-reward-summary-card,
.profile-page .profile-reward-summary-action{
  min-height:60px!important;
  height:60px!important;
  padding:10px 18px!important;
  gap:14px!important;
}
.profile-page .profile-reward-summary-card img,
.profile-page .profile-reward-summary-action img,
.profile-page .profile-reward-summary-card .profile-new-icon,
.profile-page .profile-reward-summary-action .profile-new-icon{
  width:30px!important;
  height:30px!important;
  flex:0 0 30px!important;
  object-fit:contain!important;
}
.profile-page .profile-reward-summary-card strong{
  font-size:22px!important;
  line-height:1!important;
}
.profile-page .profile-reward-summary-card span{
  font-size:14px!important;
  line-height:1!important;
}
.profile-page .profile-reward-summary-action b{
  font-size:16px!important;
  line-height:1.05!important;
}

.profile-page .learning-snapshot-card{
  padding:18px 22px!important;
}
.profile-page .learning-snapshot-card .profile-card-heading{
  margin-bottom:14px!important;
}
.profile-page .learning-snapshot-card .snapshot-metric-grid{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:14px!important;
  align-items:stretch!important;
}
.profile-page .learning-snapshot-card .dash-stat-tile{
  min-height:84px!important;
  height:84px!important;
  padding:12px 16px!important;
  border-radius:18px!important;
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  column-gap:12px!important;
  row-gap:4px!important;
  align-content:center!important;
  align-items:center!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,rgba(18,27,67,.94),rgba(10,16,42,.96))!important;
  border:1px solid rgba(150,130,255,.34)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.profile-page .learning-snapshot-card .dash-stat-tile img{
  grid-column:1!important;
  grid-row:1/3!important;
  width:32px!important;
  height:32px!important;
  flex:0 0 32px!important;
  object-fit:contain!important;
  align-self:center!important;
}
.profile-page .learning-snapshot-card .dash-stat-tile span,
.profile-page .learning-snapshot-card .dash-stat-tile b{
  grid-column:2!important;
  min-width:0!important;
  max-width:100%!important;
  display:block!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.profile-page .learning-snapshot-card .dash-stat-tile span{
  grid-row:1!important;
  color:rgba(235,232,255,.78)!important;
  font-size:13px!important;
  line-height:1.05!important;
  font-weight:850!important;
  letter-spacing:0!important;
}
.profile-page .learning-snapshot-card .dash-stat-tile b{
  grid-row:2!important;
  color:#ffffff!important;
  font-size:26px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:0!important;
}
@media(max-width:1100px){
  .profile-page .learning-snapshot-card .snapshot-metric-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}
@media(max-width:640px){
  .profile-page .profile-reward-summary-card,
  .profile-page .profile-reward-summary-action{
    min-height:56px!important;
    height:56px!important;
  }
  .profile-page .profile-reward-summary-card img,
  .profile-page .profile-reward-summary-action img,
  .profile-page .profile-reward-summary-card .profile-new-icon,
  .profile-page .profile-reward-summary-action .profile-new-icon{
    width:26px!important;
    height:26px!important;
    flex-basis:26px!important;
  }
  .profile-page .learning-snapshot-card .snapshot-metric-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .profile-page .learning-snapshot-card .dash-stat-tile{
    min-height:78px!important;
    height:78px!important;
    grid-template-columns:30px minmax(0,1fr)!important;
    padding:10px 12px!important;
  }
  .profile-page .learning-snapshot-card .dash-stat-tile img{
    width:28px!important;
    height:28px!important;
    flex-basis:28px!important;
  }
  .profile-page .learning-snapshot-card .dash-stat-tile span{
    font-size:12px!important;
  }
  .profile-page .learning-snapshot-card .dash-stat-tile b{
    font-size:22px!important;
  }
}

/* Profile Community card: approved spacious rankings-entry design. */
.profile-page .profile-approved-top-row{
  align-items:stretch!important;
}
.profile-page .profile-community-card{
  height:360px!important;
  min-height:360px!important;
  padding:28px 34px!important;
  overflow:hidden!important;
}
.profile-page .profile-community-card .profile-card-heading{
  min-height:64px!important;
  margin:0 0 18px!important;
  align-items:flex-start!important;
}
.profile-page .profile-community-heading-copy h3{
  display:flex!important;
  align-items:center!important;
  gap:16px!important;
  color:#ffffff!important;
  font-size:34px!important;
  line-height:1!important;
  font-weight:1000!important;
  text-shadow:0 2px 14px rgba(39,27,112,.30)!important;
}
.profile-page .profile-community-heading-copy h3 img,
.profile-page .profile-community-heading-copy h3 .profile-new-icon{
  width:42px!important;
  height:42px!important;
  flex:0 0 42px!important;
}
.profile-page .profile-community-heading-copy p{
  margin:10px 0 0!important;
  color:#ffffff!important;
  font-size:21px!important;
  line-height:1.15!important;
  font-weight:900!important;
  text-shadow:0 2px 12px rgba(39,27,112,.30)!important;
}
.profile-page .profile-community-card .profile-card-heading>button{
  min-height:56px!important;
  padding:0 34px!important;
  border-radius:999px!important;
  border:2px solid rgba(218,214,255,.95)!important;
  background:rgba(255,255,255,.95)!important;
  color:#5942df!important;
  font-size:19px!important;
  font-weight:1000!important;
  box-shadow:0 12px 24px rgba(34,24,107,.18),inset 0 1px 0 rgba(255,255,255,.95)!important;
}
.profile-page .profile-community-rankings-entry{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 235px!important;
  grid-template-areas:
    "main rank"
    "chips rank"!important;
  align-items:stretch!important;
  gap:24px 30px!important;
  min-height:222px!important;
  height:222px!important;
  margin:0!important;
  padding:28px 34px!important;
  border-radius:34px!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 78% 34%,rgba(255,211,111,.18),transparent 18%),
    radial-gradient(circle at 93% 78%,rgba(127,104,255,.14),transparent 26%),
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,244,255,.96))!important;
  border:1px solid rgba(255,255,255,.90)!important;
  box-shadow:0 16px 34px rgba(20,18,74,.12),inset 0 1px 0 rgba(255,255,255,.92)!important;
}
.profile-page .profile-community-rankings-entry::before{
  width:110px!important;
  height:64px!important;
  right:-18px!important;
  bottom:-10px!important;
  opacity:.54!important;
}
.profile-page .profile-community-rankings-entry::after{
  left:56%!important;
  top:28%!important;
  opacity:.72!important;
  box-shadow:54px -28px 0 rgba(126,108,255,.45),106px 26px 0 rgba(255,216,111,.50)!important;
}
.profile-page .profile-community-entry-icon{
  grid-area:main!important;
  width:88px!important;
  height:88px!important;
  border-radius:24px!important;
  align-self:start!important;
  justify-self:start!important;
  background:linear-gradient(180deg,#f1ecff,#ded6ff)!important;
}
.profile-page .profile-community-entry-icon .profile-new-icon,
.profile-page .profile-community-entry-icon img{
  width:52px!important;
  height:52px!important;
}
.profile-page .profile-community-entry-copy{
  grid-area:main!important;
  min-width:0!important;
  padding-left:116px!important;
  align-self:start!important;
}
.profile-page .profile-community-entry-copy h4{
  margin:0 0 10px!important;
  color:#090f3d!important;
  font-size:32px!important;
  line-height:1.05!important;
  font-weight:1000!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
}
.profile-page .profile-community-entry-copy p{
  max-width:720px!important;
  color:#3e4667!important;
  font-size:18px!important;
  line-height:1.25!important;
  font-weight:850!important;
}
.profile-page .profile-community-entry-copy small{
  margin-top:16px!important;
  color:#6b55ee!important;
  font-size:18px!important;
  line-height:1.05!important;
  font-weight:1000!important;
}
.profile-page .profile-community-rankings-btn{
  grid-area:main!important;
  justify-self:end!important;
  align-self:start!important;
  min-height:72px!important;
  margin-top:4px!important;
  padding:0 42px!important;
  border-radius:24px!important;
  font-size:23px!important;
  gap:18px!important;
  box-shadow:0 16px 30px rgba(84,61,221,.26),inset 0 1px 0 rgba(255,255,255,.30)!important;
}
.profile-page .profile-community-ranking-chips{
  grid-area:chips!important;
  align-self:end!important;
  display:flex!important;
  flex-wrap:wrap!important;
  gap:14px 16px!important;
  padding-top:26px!important;
  border-top:2px solid rgba(116,103,190,.12)!important;
}
.profile-page .profile-community-ranking-chips span{
  min-height:46px!important;
  padding:0 24px!important;
  border-radius:999px!important;
  border:2px solid rgba(218,214,255,.86)!important;
  background:rgba(255,255,255,.70)!important;
  color:#111846!important;
  font-size:17px!important;
  line-height:1!important;
  font-weight:950!important;
}
.profile-page .profile-community-rank-preview{
  grid-area:rank!important;
  position:relative!important;
  z-index:1!important;
  align-self:stretch!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:9px!important;
  padding:4px 0 4px 34px!important;
  border-left:2px solid rgba(116,103,190,.18)!important;
}
.profile-page .profile-community-rank-preview b{
  color:#6b55ee!important;
  font-size:20px!important;
  line-height:1!important;
}
.profile-page .profile-community-rank-preview strong{
  color:#080d37!important;
  font-size:48px!important;
  line-height:.92!important;
}
.profile-page .profile-community-rank-preview span{
  width:max-content!important;
  max-width:100%!important;
  padding:8px 14px!important;
  color:#684de9!important;
  background:#e5ddff!important;
  font-size:17px!important;
}
.profile-page .profile-community-rank-preview small{
  display:block!important;
  color:#505875!important;
  font-size:15px!important;
  line-height:1.2!important;
  font-weight:900!important;
}
.profile-page .profile-community-rank-preview em{
  display:block!important;
  color:#6554f1!important;
  font-size:30px!important;
  line-height:1!important;
  font-style:normal!important;
  font-weight:1000!important;
  letter-spacing:0!important;
}
@media(max-width:1450px){
  .profile-page .profile-community-card{
    height:360px!important;
    min-height:360px!important;
    padding:24px 28px!important;
  }
  .profile-page .profile-community-heading-copy h3{
    font-size:30px!important;
  }
  .profile-page .profile-community-heading-copy p{
    font-size:18px!important;
  }
  .profile-page .profile-community-rankings-entry{
    grid-template-columns:minmax(0,1fr) 205px!important;
    min-height:214px!important;
    height:214px!important;
    padding:24px 28px!important;
    gap:20px 24px!important;
  }
  .profile-page .profile-community-entry-copy h4{
    font-size:27px!important;
  }
  .profile-page .profile-community-entry-copy p,
  .profile-page .profile-community-entry-copy small{
    font-size:16px!important;
  }
  .profile-page .profile-community-rankings-btn{
    min-height:60px!important;
    padding:0 30px!important;
    font-size:19px!important;
  }
  .profile-page .profile-community-ranking-chips{
    gap:11px!important;
    padding-top:20px!important;
  }
  .profile-page .profile-community-ranking-chips span{
    min-height:38px!important;
    padding:0 17px!important;
    font-size:14px!important;
  }
  .profile-page .profile-community-rank-preview strong{
    font-size:42px!important;
  }
  .profile-page .profile-community-rank-preview span{
    font-size:14px!important;
  }
  .profile-page .profile-community-rank-preview em{
    font-size:25px!important;
  }
}
@media(max-width:1180px){
  .profile-page .profile-community-card{
    height:auto!important;
    min-height:0!important;
  }
  .profile-page .profile-community-rankings-entry{
    grid-template-columns:1fr!important;
    grid-template-areas:
      "main"
      "chips"!important;
    height:auto!important;
    min-height:0!important;
  }
  .profile-page .profile-community-rank-preview{
    display:none!important;
  }
}
@media(max-width:720px){
  .profile-page .profile-community-card{
    padding:18px!important;
  }
  .profile-page .profile-community-card .profile-card-heading{
    min-height:0!important;
    align-items:flex-start!important;
  }
  .profile-page .profile-community-heading-copy h3{
    font-size:25px!important;
  }
  .profile-page .profile-community-heading-copy p{
    font-size:14px!important;
  }
  .profile-page .profile-community-card .profile-card-heading>button{
    min-height:40px!important;
    padding:0 18px!important;
    font-size:14px!important;
  }
  .profile-page .profile-community-rankings-entry{
    padding:20px!important;
    border-radius:24px!important;
  }
  .profile-page .profile-community-entry-icon{
    grid-area:auto!important;
    width:62px!important;
    height:62px!important;
  }
  .profile-page .profile-community-entry-copy{
    grid-area:auto!important;
    padding-left:0!important;
  }
  .profile-page .profile-community-entry-copy h4{
    white-space:normal!important;
    font-size:24px!important;
  }
  .profile-page .profile-community-rankings-btn{
    grid-area:auto!important;
    width:100%!important;
    min-height:50px!important;
    margin-top:10px!important;
    font-size:16px!important;
  }
  .profile-page .profile-community-ranking-chips span{
    min-height:32px!important;
    padding:0 12px!important;
    font-size:12px!important;
  }
}

/* Profile Community card: final anti-crop layout pass. */
.profile-page .profile-community-card{
  height:auto!important;
  min-height:420px!important;
  padding:32px 36px 38px!important;
  overflow:visible!important;
}
.profile-page .profile-community-card .profile-card-heading{
  min-height:58px!important;
  margin:0 0 26px!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:24px!important;
}
.profile-page .profile-community-heading-copy h3{
  font-size:34px!important;
  line-height:1!important;
}
.profile-page .profile-community-heading-copy p{
  margin-top:8px!important;
  font-size:18px!important;
  line-height:1.2!important;
}
.profile-page .profile-community-card .profile-card-heading>button{
  min-width:140px!important;
  height:58px!important;
  min-height:58px!important;
  padding:0 30px!important;
  flex:0 0 auto!important;
}
.profile-page .profile-community-rankings-entry{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 270px!important;
  grid-template-areas:
    "main rank"
    "chips rank"!important;
  gap:28px 32px!important;
  align-items:stretch!important;
  width:100%!important;
  height:auto!important;
  min-height:250px!important;
  margin:0!important;
  padding:34px 36px!important;
  border-radius:34px!important;
  overflow:visible!important;
}
.profile-page .profile-community-entry-icon{
  grid-area:main!important;
  width:88px!important;
  height:88px!important;
  align-self:start!important;
  justify-self:start!important;
}
.profile-page .profile-community-entry-copy{
  grid-area:main!important;
  padding-left:116px!important;
  padding-right:245px!important;
}
.profile-page .profile-community-entry-copy h4{
  font-size:30px!important;
  white-space:nowrap!important;
}
.profile-page .profile-community-entry-copy p{
  max-width:660px!important;
  font-size:17px!important;
  line-height:1.3!important;
}
.profile-page .profile-community-entry-copy small{
  margin-top:14px!important;
  font-size:17px!important;
}
.profile-page .profile-community-rankings-btn{
  grid-area:main!important;
  justify-self:end!important;
  align-self:start!important;
  width:190px!important;
  min-width:190px!important;
  height:64px!important;
  min-height:64px!important;
  margin:0!important;
  padding:0 24px!important;
  border-radius:22px!important;
  font-size:19px!important;
  z-index:2!important;
}
.profile-page .profile-community-ranking-chips{
  grid-area:chips!important;
  align-self:end!important;
  gap:14px!important;
  padding-top:24px!important;
  overflow:visible!important;
}
.profile-page .profile-community-ranking-chips span{
  min-height:46px!important;
  padding:0 22px!important;
  font-size:16px!important;
}
.profile-page .profile-community-rank-preview{
  grid-area:rank!important;
  display:flex!important;
  min-height:190px!important;
  padding-left:34px!important;
  overflow:visible!important;
}
@media(max-width:1500px){
  .profile-page .profile-community-card{
    min-height:405px!important;
    padding:28px 30px 34px!important;
  }
  .profile-page .profile-community-heading-copy h3{
    font-size:30px!important;
  }
  .profile-page .profile-community-heading-copy p{
    font-size:15px!important;
  }
  .profile-page .profile-community-rankings-entry{
    grid-template-columns:minmax(0,1fr) 220px!important;
    min-height:245px!important;
    padding:30px 30px!important;
    gap:24px!important;
  }
  .profile-page .profile-community-entry-icon{
    width:72px!important;
    height:72px!important;
  }
  .profile-page .profile-community-entry-icon .profile-new-icon,
  .profile-page .profile-community-entry-icon img{
    width:42px!important;
    height:42px!important;
  }
  .profile-page .profile-community-entry-copy{
    padding-left:94px!important;
    padding-right:210px!important;
  }
  .profile-page .profile-community-entry-copy h4{
    font-size:24px!important;
  }
  .profile-page .profile-community-entry-copy p,
  .profile-page .profile-community-entry-copy small{
    font-size:14px!important;
  }
  .profile-page .profile-community-rankings-btn{
    width:170px!important;
    min-width:170px!important;
    height:56px!important;
    min-height:56px!important;
    font-size:16px!important;
  }
  .profile-page .profile-community-ranking-chips span{
    min-height:38px!important;
    padding:0 16px!important;
    font-size:13px!important;
  }
}
@media(max-width:1180px){
  .profile-page .profile-community-card{
    min-height:0!important;
    overflow:visible!important;
  }
  .profile-page .profile-community-rankings-entry{
    grid-template-columns:1fr!important;
    grid-template-areas:
      "main"
      "chips"!important;
    min-height:0!important;
  }
  .profile-page .profile-community-entry-copy{
    padding-right:200px!important;
  }
  .profile-page .profile-community-rank-preview{
    display:none!important;
  }
}
@media(max-width:720px){
  .profile-page .profile-community-card .profile-card-heading{
    flex-wrap:wrap!important;
  }
  .profile-page .profile-community-card .profile-card-heading>button{
    width:auto!important;
    height:44px!important;
    min-height:44px!important;
    font-size:14px!important;
  }
  .profile-page .profile-community-rankings-entry{
    display:flex!important;
    flex-direction:column!important;
    gap:18px!important;
  }
  .profile-page .profile-community-entry-icon{
    width:62px!important;
    height:62px!important;
  }
  .profile-page .profile-community-entry-copy{
    padding-left:0!important;
    padding-right:0!important;
  }
  .profile-page .profile-community-entry-copy h4{
    white-space:normal!important;
  }
  .profile-page .profile-community-rankings-btn{
    width:100%!important;
    min-width:0!important;
    height:50px!important;
    min-height:50px!important;
    align-self:stretch!important;
  }
}

/* Profile Community card: compact preview aligned with My Dragon Studio. */
.profile-page .profile-approved-top-row{
  align-items:stretch!important;
}
.profile-page .profile-community-card{
  height:230px!important;
  min-height:230px!important;
  max-height:230px!important;
  padding:18px 22px!important;
  overflow:hidden!important;
}
.profile-page .profile-community-card .profile-card-heading{
  min-height:42px!important;
  margin:0 0 12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
}
.profile-page .profile-community-heading-copy{
  min-width:0!important;
}
.profile-page .profile-community-heading-copy h3{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  margin:0!important;
  color:#ffffff!important;
  font-size:26px!important;
  line-height:1!important;
  font-weight:1000!important;
  white-space:nowrap!important;
}
.profile-page .profile-community-heading-copy h3 img,
.profile-page .profile-community-heading-copy h3 .profile-new-icon{
  width:34px!important;
  height:34px!important;
  flex:0 0 34px!important;
}
.profile-page .profile-community-heading-copy p{
  display:none!important;
}
.profile-page .profile-community-card .profile-card-heading>button{
  width:auto!important;
  min-width:110px!important;
  height:46px!important;
  min-height:46px!important;
  padding:0 24px!important;
  flex:0 0 auto!important;
  border-radius:999px!important;
  border:2px solid rgba(218,214,255,.95)!important;
  background:rgba(255,255,255,.96)!important;
  color:#6250dd!important;
  font-size:16px!important;
  line-height:1!important;
  font-weight:1000!important;
  box-shadow:0 10px 22px rgba(34,24,107,.16),inset 0 1px 0 rgba(255,255,255,.96)!important;
}
.profile-page .profile-community-rankings-entry{
  display:grid!important;
  grid-template-columns:54px minmax(0,1fr) 145px 132px!important;
  grid-template-rows:auto auto!important;
  grid-template-areas:
    "icon copy button rank"
    "icon chips button rank"!important;
  align-items:center!important;
  gap:8px 14px!important;
  width:100%!important;
  height:122px!important;
  min-height:122px!important;
  max-height:122px!important;
  margin:0!important;
  padding:16px 18px!important;
  border-radius:26px!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 72% 36%,rgba(255,211,111,.15),transparent 20%),
    radial-gradient(circle at 95% 78%,rgba(127,104,255,.12),transparent 28%),
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,244,255,.96))!important;
  border:1px solid rgba(255,255,255,.90)!important;
  box-shadow:0 14px 28px rgba(20,18,74,.12),inset 0 1px 0 rgba(255,255,255,.92)!important;
}
.profile-page .profile-community-rankings-entry::before{
  width:82px!important;
  height:46px!important;
  right:-16px!important;
  bottom:-12px!important;
  opacity:.45!important;
}
.profile-page .profile-community-rankings-entry::after{
  left:57%!important;
  top:22%!important;
  opacity:.45!important;
  box-shadow:34px -14px 0 rgba(126,108,255,.35),74px 22px 0 rgba(255,216,111,.40)!important;
}
.profile-page .profile-community-entry-icon{
  grid-area:icon!important;
  width:54px!important;
  height:54px!important;
  border-radius:16px!important;
  align-self:center!important;
  justify-self:start!important;
  display:grid!important;
  place-items:center!important;
  background:linear-gradient(180deg,#f1ecff,#ded6ff)!important;
  border:1px solid rgba(205,196,255,.90)!important;
  box-shadow:0 8px 18px rgba(84,61,190,.12)!important;
}
.profile-page .profile-community-entry-icon .profile-new-icon,
.profile-page .profile-community-entry-icon img{
  width:32px!important;
  height:32px!important;
}
.profile-page .profile-community-entry-copy{
  grid-area:copy!important;
  min-width:0!important;
  padding:0!important;
  align-self:end!important;
}
.profile-page .profile-community-entry-copy h4{
  margin:0 0 5px!important;
  color:#111942!important;
  font-size:20px!important;
  line-height:1.05!important;
  font-weight:1000!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.profile-page .profile-community-entry-copy p{
  max-width:320px!important;
  margin:0!important;
  color:#4e5578!important;
  font-size:12px!important;
  line-height:1.25!important;
  font-weight:800!important;
  white-space:normal!important;
  overflow:hidden!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
}
.profile-page .profile-community-entry-copy small{
  display:none!important;
}
.profile-page .profile-community-rankings-btn{
  grid-area:button!important;
  justify-self:end!important;
  align-self:center!important;
  width:145px!important;
  min-width:145px!important;
  height:46px!important;
  min-height:46px!important;
  margin:0!important;
  padding:0 14px!important;
  border-radius:16px!important;
  font-size:14px!important;
  line-height:1!important;
  gap:8px!important;
  z-index:2!important;
}
.profile-page .profile-community-ranking-chips{
  grid-area:chips!important;
  align-self:start!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:8px!important;
  min-width:0!important;
  padding:0!important;
  border-top:0!important;
  overflow:hidden!important;
}
.profile-page .profile-community-ranking-chips span{
  min-height:26px!important;
  height:26px!important;
  padding:0 10px!important;
  border-radius:999px!important;
  border:1px solid #e2dcff!important;
  background:rgba(255,255,255,.74)!important;
  color:#151b46!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:900!important;
  white-space:nowrap!important;
}
.profile-page .profile-community-ranking-chips span:nth-child(n+4){
  display:none!important;
}
.profile-page .profile-community-rank-preview{
  grid-area:rank!important;
  align-self:stretch!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:4px!important;
  padding:0 0 0 16px!important;
  border-left:1px solid rgba(120,110,190,.20)!important;
  overflow:hidden!important;
  color:#111942!important;
}
.profile-page .profile-community-rank-preview b{
  color:#6253df!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:1000!important;
}
.profile-page .profile-community-rank-preview strong{
  color:#111942!important;
  font-size:26px!important;
  line-height:1!important;
  font-weight:1000!important;
}
.profile-page .profile-community-rank-preview span{
  width:max-content!important;
  max-width:100%!important;
  padding:5px 8px!important;
  border-radius:999px!important;
  background:#eeeaff!important;
  color:#6652e6!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:1000!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.profile-page .profile-community-rank-preview small{
  color:#4e5578!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:850!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.profile-page .profile-community-rank-preview em{
  display:block!important;
  color:#6652e6!important;
  font-size:18px!important;
  line-height:1!important;
  font-style:normal!important;
  font-weight:1000!important;
}
@media(max-width:1450px){
  .profile-page .profile-community-card{
    height:230px!important;
    min-height:230px!important;
    max-height:230px!important;
    padding:18px 22px!important;
  }
  .profile-page .profile-community-rankings-entry{
    grid-template-columns:48px minmax(0,1fr) 130px 118px!important;
    gap:8px 12px!important;
    padding:14px 16px!important;
  }
  .profile-page .profile-community-entry-icon{
    width:48px!important;
    height:48px!important;
  }
  .profile-page .profile-community-entry-icon .profile-new-icon,
  .profile-page .profile-community-entry-icon img{
    width:29px!important;
    height:29px!important;
  }
  .profile-page .profile-community-entry-copy h4{
    font-size:18px!important;
  }
  .profile-page .profile-community-entry-copy p{
    font-size:11px!important;
    max-width:260px!important;
  }
  .profile-page .profile-community-rankings-btn{
    width:130px!important;
    min-width:130px!important;
    height:42px!important;
    min-height:42px!important;
    font-size:12px!important;
  }
}
@media(max-width:1180px){
  .profile-page .profile-community-card{
    height:auto!important;
    min-height:230px!important;
    max-height:none!important;
  }
  .profile-page .profile-community-rankings-entry{
    grid-template-columns:54px minmax(0,1fr) 145px!important;
    grid-template-areas:
      "icon copy button"
      "icon chips button"!important;
  }
  .profile-page .profile-community-rank-preview{
    display:none!important;
  }
}
@media(max-width:720px){
  .profile-page .profile-community-card{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
  }
  .profile-page .profile-community-card .profile-card-heading{
    flex-wrap:wrap!important;
  }
  .profile-page .profile-community-rankings-entry{
    grid-template-columns:48px minmax(0,1fr)!important;
    grid-template-areas:
      "icon copy"
      "chips chips"
      "button button"!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
  }
  .profile-page .profile-community-rankings-btn{
    width:100%!important;
    min-width:0!important;
  }
}

/* Home category cards: clean white card surface with one title divider. */
body:not(.dragon-studio-mode) #homePage .product-card.exam-card{
  background:#ffffff!important;
  background-image:none!important;
  border:1px solid rgba(225,231,255,.96)!important;
  box-shadow:0 20px 42px rgba(4,11,42,.24),inset 0 1px 0 rgba(255,255,255,.92)!important;
}

/* Profile Community card: single-layer dashboard layout. */
.profile-page .profile-community-card{
  height:230px!important;
  min-height:230px!important;
  max-height:230px!important;
  padding:24px 30px!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-rows:44px 44px minmax(0,1fr)!important;
  gap:14px!important;
  border-radius:24px!important;
}
.profile-page .profile-community-card .profile-card-heading{
  min-height:0!important;
  height:44px!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  position:relative!important;
  z-index:2!important;
}
.profile-page .profile-community-heading-copy{
  min-width:0!important;
}
.profile-page .profile-community-heading-copy h3{
  display:flex!important;
  align-items:center!important;
  gap:13px!important;
  margin:0!important;
  color:#0b1040!important;
  font-size:27px!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  text-shadow:0 1px 12px rgba(255,255,255,.24)!important;
}
.profile-page .profile-community-heading-copy h3 img,
.profile-page .profile-community-heading-copy h3 .profile-new-icon{
  width:34px!important;
  height:34px!important;
  flex:0 0 34px!important;
}
.profile-page .profile-community-heading-copy p{
  display:none!important;
}
.profile-page .profile-community-card .profile-card-heading>button{
  width:auto!important;
  min-width:158px!important;
  height:42px!important;
  min-height:42px!important;
  padding:0 22px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  flex:0 0 auto!important;
  border:0!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,#7d64ff,#563fe0)!important;
  color:#ffffff!important;
  font-size:15px!important;
  line-height:1!important;
  font-weight:1000!important;
  white-space:nowrap!important;
  box-shadow:0 12px 22px rgba(75,55,201,.28),inset 0 1px 0 rgba(255,255,255,.25)!important;
}
.profile-page .profile-community-filter-row{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  align-items:center!important;
  position:relative!important;
  z-index:2!important;
}
.profile-page .profile-community-filter-row span{
  min-width:0!important;
  height:40px!important;
  padding:0 14px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  border-radius:18px!important;
  border:1px solid rgba(214,209,255,.82)!important;
  background:rgba(255,255,255,.84)!important;
  color:#0d123c!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:950!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  box-shadow:0 8px 16px rgba(50,32,136,.10),inset 0 1px 0 rgba(255,255,255,.85)!important;
}
.profile-page .profile-community-filter-row span.active{
  border-color:rgba(117,95,255,.82)!important;
  background:linear-gradient(180deg,#7d64ff,#6047ea)!important;
  color:#ffffff!important;
  box-shadow:0 12px 20px rgba(80,57,207,.24),inset 0 1px 0 rgba(255,255,255,.24)!important;
}
.profile-page .profile-community-filter-row img,
.profile-page .profile-community-filter-row .profile-new-icon{
  width:20px!important;
  height:20px!important;
  flex:0 0 20px!important;
}
.profile-page .profile-community-stat-panel{
  min-height:0!important;
  height:100%!important;
  padding:16px 18px!important;
  display:grid!important;
  grid-template-columns:1fr 1fr 1fr 1fr!important;
  align-items:center!important;
  gap:0!important;
  position:relative!important;
  z-index:2!important;
  overflow:hidden!important;
  border-radius:24px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(247,244,255,.91))!important;
  border:1px solid rgba(255,255,255,.82)!important;
  box-shadow:0 14px 28px rgba(35,22,112,.15),inset 0 1px 0 rgba(255,255,255,.88)!important;
}
.profile-page .profile-community-stat{
  min-width:0!important;
  height:100%!important;
  padding:0 12px!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  justify-items:center!important;
  align-content:center!important;
  gap:4px!important;
  text-align:center!important;
  border-left:1px solid rgba(112,104,170,.18)!important;
}
.profile-page .profile-community-stat:first-child{
  border-left:0!important;
}
.profile-page .profile-community-stat img,
.profile-page .profile-community-stat .profile-new-icon{
  width:31px!important;
  height:31px!important;
  object-fit:contain!important;
}
.profile-page .profile-community-stat strong{
  color:#151943!important;
  font-size:24px!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
}
.profile-page .profile-community-stat.rank{
  grid-template-columns:auto auto!important;
  grid-template-rows:auto auto!important;
  column-gap:8px!important;
}
.profile-page .profile-community-stat.rank img{
  grid-column:1!important;
  grid-row:1!important;
}
.profile-page .profile-community-stat.rank strong{
  grid-column:2!important;
  grid-row:1!important;
  font-size:28px!important;
}
.profile-page .profile-community-stat.rank span{
  grid-column:1/3!important;
}
.profile-page .profile-community-stat span{
  max-width:100%!important;
  color:#2f365e!important;
  font-size:11px!important;
  line-height:1.1!important;
  font-weight:900!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.profile-page .profile-community-rankings-entry,
.profile-page .profile-community-entry-icon,
.profile-page .profile-community-entry-copy,
.profile-page .profile-community-rankings-btn,
.profile-page .profile-community-ranking-chips,
.profile-page .profile-community-rank-preview{
  all:revert-layer;
}
@media(max-width:1450px){
  .profile-page .profile-community-card{
    height:230px!important;
    min-height:230px!important;
    max-height:230px!important;
    padding:22px 26px!important;
    gap:12px!important;
    grid-template-rows:42px 40px minmax(0,1fr)!important;
  }
  .profile-page .profile-community-heading-copy h3{
    font-size:24px!important;
  }
  .profile-page .profile-community-card .profile-card-heading>button{
    min-width:142px!important;
    height:38px!important;
    min-height:38px!important;
    padding:0 18px!important;
    font-size:13px!important;
  }
  .profile-page .profile-community-filter-row span{
    height:36px!important;
    font-size:12px!important;
    padding:0 10px!important;
  }
  .profile-page .profile-community-stat-panel{
    padding:13px 14px!important;
  }
  .profile-page .profile-community-stat img,
  .profile-page .profile-community-stat .profile-new-icon{
    width:27px!important;
    height:27px!important;
  }
  .profile-page .profile-community-stat strong{
    font-size:20px!important;
  }
  .profile-page .profile-community-stat.rank strong{
    font-size:24px!important;
  }
  .profile-page .profile-community-stat span{
    font-size:10px!important;
  }
}
@media(max-width:1180px){
  .profile-page .profile-community-card{
    height:auto!important;
    min-height:230px!important;
    max-height:none!important;
  }
}
@media(max-width:720px){
  .profile-page .profile-community-card{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    grid-template-rows:auto auto auto!important;
  }
  .profile-page .profile-community-card .profile-card-heading{
    height:auto!important;
    flex-wrap:wrap!important;
  }
  .profile-page .profile-community-card .profile-card-heading>button{
    width:100%!important;
  }
  .profile-page .profile-community-filter-row{
    grid-template-columns:1fr!important;
  }
  .profile-page .profile-community-stat-panel{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    height:auto!important;
  }
  .profile-page .profile-community-stat{
    min-height:78px!important;
    border-left:0!important;
    border-top:1px solid rgba(112,104,170,.14)!important;
  }
}

/* Profile Community card: scaled reference layout inside the existing dashboard height. */
.profile-page .profile-community-card{
  height:230px!important;
  min-height:230px!important;
  max-height:230px!important;
  padding:18px 22px!important;
  overflow:hidden!important;
}
.profile-page .profile-community-card .profile-card-heading{
  min-height:40px!important;
  margin:0 0 10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
}
.profile-page .profile-community-heading-copy h3{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  margin:0!important;
  color:#ffffff!important;
  font-size:28px!important;
  line-height:1!important;
  font-weight:1000!important;
  white-space:nowrap!important;
  text-shadow:0 2px 12px rgba(42,24,126,.28)!important;
}
.profile-page .profile-community-heading-copy h3 img,
.profile-page .profile-community-heading-copy h3 .profile-new-icon{
  width:34px!important;
  height:34px!important;
  flex:0 0 34px!important;
}
.profile-page .profile-community-heading-copy p{
  display:none!important;
}
.profile-page .profile-community-card .profile-card-heading>button{
  min-width:112px!important;
  height:44px!important;
  min-height:44px!important;
  padding:0 22px!important;
  border-radius:999px!important;
  border:2px solid rgba(221,216,255,.96)!important;
  background:rgba(255,255,255,.96)!important;
  color:#6250dd!important;
  font-size:16px!important;
  line-height:1!important;
  font-weight:1000!important;
  box-shadow:0 10px 22px rgba(34,24,107,.16),inset 0 1px 0 rgba(255,255,255,.96)!important;
}
.profile-page .profile-community-rankings-entry{
  display:grid!important;
  grid-template-columns:64px minmax(0,1fr) 190px!important;
  grid-template-rows:auto minmax(0,1fr)!important;
  grid-template-areas:
    "icon copy side"
    "chips chips side"!important;
  align-items:center!important;
  gap:10px 16px!important;
  width:100%!important;
  height:144px!important;
  min-height:144px!important;
  max-height:144px!important;
  margin:0!important;
  padding:16px 18px!important;
  border-radius:28px!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 67% 32%,rgba(255,211,111,.16),transparent 18%),
    radial-gradient(circle at 94% 76%,rgba(127,104,255,.13),transparent 27%),
    linear-gradient(180deg,rgba(255,255,255,.985),rgba(247,244,255,.965))!important;
  border:1px solid rgba(255,255,255,.92)!important;
  box-shadow:0 16px 30px rgba(20,18,74,.13),inset 0 1px 0 rgba(255,255,255,.94)!important;
}
.profile-page .profile-community-rankings-entry::before{
  width:92px!important;
  height:50px!important;
  right:-18px!important;
  bottom:-12px!important;
  opacity:.44!important;
}
.profile-page .profile-community-rankings-entry::after{
  left:56%!important;
  top:25%!important;
  opacity:.48!important;
  box-shadow:38px -16px 0 rgba(126,108,255,.34),84px 24px 0 rgba(255,216,111,.38)!important;
}
.profile-page .profile-community-entry-icon{
  grid-area:icon!important;
  width:64px!important;
  height:64px!important;
  border-radius:18px!important;
  align-self:start!important;
  justify-self:start!important;
}
.profile-page .profile-community-entry-icon .profile-new-icon,
.profile-page .profile-community-entry-icon img{
  width:38px!important;
  height:38px!important;
}
.profile-page .profile-community-entry-copy{
  grid-area:copy!important;
  min-width:0!important;
  padding:0!important;
  align-self:start!important;
}
.profile-page .profile-community-entry-copy h4{
  margin:0 0 6px!important;
  color:#111942!important;
  font-size:24px!important;
  line-height:1.04!important;
  font-weight:1000!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
.profile-page .profile-community-entry-copy p{
  max-width:520px!important;
  margin:0!important;
  color:#4e5578!important;
  font-size:13px!important;
  line-height:1.22!important;
  font-weight:820!important;
  display:block!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.profile-page .profile-community-entry-copy small{
  display:block!important;
  margin-top:7px!important;
  color:#715df0!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:1000!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.profile-page .profile-community-rankings-btn{
  grid-area:side!important;
  justify-self:stretch!important;
  align-self:start!important;
  width:100%!important;
  min-width:0!important;
  height:42px!important;
  min-height:42px!important;
  margin:0!important;
  padding:0 16px!important;
  border-radius:16px!important;
  font-size:14px!important;
  line-height:1!important;
  gap:8px!important;
  z-index:2!important;
}
.profile-page .profile-community-ranking-chips{
  grid-area:chips!important;
  align-self:end!important;
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px 8px!important;
  min-width:0!important;
  max-height:58px!important;
  padding:8px 0 0!important;
  border-top:1px solid rgba(116,103,190,.13)!important;
  overflow:hidden!important;
}
.profile-page .profile-community-ranking-chips span,
.profile-page .profile-community-ranking-chips span:nth-child(n+4){
  display:inline-flex!important;
}
.profile-page .profile-community-ranking-chips span{
  min-height:24px!important;
  height:24px!important;
  padding:0 9px!important;
  border-radius:999px!important;
  border:1px solid #e2dcff!important;
  background:rgba(255,255,255,.74)!important;
  color:#151b46!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:900!important;
  white-space:nowrap!important;
}
.profile-page .profile-community-rank-preview{
  grid-area:side!important;
  align-self:stretch!important;
  justify-self:stretch!important;
  min-height:0!important;
  margin-top:50px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  gap:4px!important;
  padding:0 0 0 16px!important;
  border-left:1px solid rgba(120,110,190,.20)!important;
  overflow:hidden!important;
  color:#111942!important;
}
.profile-page .profile-community-rank-preview b{
  color:#6253df!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:1000!important;
}
.profile-page .profile-community-rank-preview strong{
  color:#111942!important;
  font-size:30px!important;
  line-height:.92!important;
  font-weight:1000!important;
}
.profile-page .profile-community-rank-preview span{
  width:max-content!important;
  max-width:100%!important;
  padding:5px 9px!important;
  border-radius:999px!important;
  background:#eeeaff!important;
  color:#6652e6!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:1000!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.profile-page .profile-community-rank-preview small{
  color:#4e5578!important;
  font-size:10.5px!important;
  line-height:1!important;
  font-weight:850!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.profile-page .profile-community-rank-preview em{
  color:#6652e6!important;
  font-size:18px!important;
  line-height:1!important;
  font-style:normal!important;
  font-weight:1000!important;
}
@media(max-width:1450px){
  .profile-page .profile-community-card{
    height:230px!important;
    min-height:230px!important;
    max-height:230px!important;
    padding:18px 22px!important;
  }
  .profile-page .profile-community-rankings-entry{
    grid-template-columns:56px minmax(0,1fr) 162px!important;
    height:144px!important;
    min-height:144px!important;
    max-height:144px!important;
    padding:14px 16px!important;
    gap:8px 12px!important;
  }
  .profile-page .profile-community-entry-icon{
    width:56px!important;
    height:56px!important;
  }
  .profile-page .profile-community-entry-icon .profile-new-icon,
  .profile-page .profile-community-entry-icon img{
    width:33px!important;
    height:33px!important;
  }
  .profile-page .profile-community-entry-copy h4{
    font-size:20px!important;
  }
  .profile-page .profile-community-entry-copy p{
    font-size:11.5px!important;
  }
  .profile-page .profile-community-entry-copy small{
    font-size:11px!important;
  }
  .profile-page .profile-community-rankings-btn{
    height:38px!important;
    min-height:38px!important;
    font-size:12px!important;
  }
  .profile-page .profile-community-rank-preview{
    margin-top:45px!important;
    padding-left:12px!important;
  }
  .profile-page .profile-community-rank-preview strong{
    font-size:26px!important;
  }
  .profile-page .profile-community-ranking-chips span{
    height:22px!important;
    min-height:22px!important;
    padding:0 7px!important;
    font-size:9px!important;
  }
}
@media(max-width:1180px){
  .profile-page .profile-community-card{
    height:auto!important;
    min-height:230px!important;
    max-height:none!important;
  }
  .profile-page .profile-community-rankings-entry{
    grid-template-columns:56px minmax(0,1fr) 150px!important;
    grid-template-areas:
      "icon copy side"
      "chips chips side"!important;
    height:auto!important;
    min-height:144px!important;
    max-height:none!important;
  }
  .profile-page .profile-community-rank-preview{
    display:none!important;
  }
}
@media(max-width:720px){
  .profile-page .profile-community-card{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
  }
  .profile-page .profile-community-rankings-entry{
    grid-template-columns:48px minmax(0,1fr)!important;
    grid-template-areas:
      "icon copy"
      "chips chips"
      "side side"!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
  }
  .profile-page .profile-community-rankings-btn{
    width:100%!important;
    min-width:0!important;
    height:46px!important;
    min-height:46px!important;
  }
}

/* Profile Community card: final fit and polish pass. */
.profile-page .profile-community-card{
  height:230px!important;
  min-height:230px!important;
  max-height:230px!important;
  padding:20px 26px 22px!important;
  display:grid!important;
  grid-template-rows:38px 36px 86px!important;
  gap:12px!important;
  align-content:start!important;
  overflow:hidden!important;
}
.profile-page .profile-community-card .profile-card-heading{
  height:38px!important;
  min-height:38px!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
}
.profile-page .profile-community-heading-copy h3{
  font-size:24px!important;
  line-height:1!important;
  color:#0b1040!important;
  white-space:nowrap!important;
}
.profile-page .profile-community-heading-copy h3 img,
.profile-page .profile-community-heading-copy h3 .profile-new-icon{
  width:30px!important;
  height:30px!important;
  flex:0 0 30px!important;
}
.profile-page .profile-community-card .profile-card-heading>button{
  min-width:146px!important;
  height:36px!important;
  min-height:36px!important;
  padding:0 16px!important;
  border-radius:16px!important;
  font-size:12.5px!important;
  line-height:1!important;
}
.profile-page .profile-community-filter-row{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  align-items:center!important;
  min-height:0!important;
}
.profile-page .profile-community-filter-row span{
  height:36px!important;
  min-height:36px!important;
  padding:0 10px!important;
  border-radius:16px!important;
  font-size:12px!important;
  line-height:1!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.profile-page .profile-community-filter-row img,
.profile-page .profile-community-filter-row .profile-new-icon{
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
}
.profile-page .profile-community-stat-panel{
  height:86px!important;
  min-height:86px!important;
  max-height:86px!important;
  padding:12px 14px!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  align-items:stretch!important;
  border-radius:22px!important;
  overflow:hidden!important;
}
.profile-page .profile-community-stat{
  min-width:0!important;
  min-height:0!important;
  height:100%!important;
  padding:0 10px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  text-align:center!important;
}
.profile-page .profile-community-stat.rank{
  display:grid!important;
  grid-template-columns:auto auto!important;
  grid-template-rows:auto auto!important;
  align-content:center!important;
  justify-content:center!important;
  column-gap:7px!important;
  row-gap:4px!important;
}
.profile-page .profile-community-stat img,
.profile-page .profile-community-stat .profile-new-icon{
  width:24px!important;
  height:24px!important;
  flex:0 0 24px!important;
}
.profile-page .profile-community-stat strong{
  font-size:20px!important;
  line-height:1!important;
  color:#101640!important;
  font-weight:1000!important;
  white-space:nowrap!important;
}
.profile-page .profile-community-stat.rank strong{
  font-size:24px!important;
}
.profile-page .profile-community-stat span{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  font-size:9.5px!important;
  line-height:1.05!important;
  font-weight:900!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
@media(max-width:1450px){
  .profile-page .profile-community-card{
    grid-template-rows:36px 34px 82px!important;
    gap:11px!important;
    padding:20px 24px!important;
  }
  .profile-page .profile-community-heading-copy h3{
    font-size:22px!important;
  }
  .profile-page .profile-community-card .profile-card-heading>button{
    min-width:132px!important;
    height:34px!important;
    min-height:34px!important;
    font-size:11.5px!important;
  }
  .profile-page .profile-community-filter-row span{
    height:34px!important;
    min-height:34px!important;
    font-size:11px!important;
  }
  .profile-page .profile-community-stat-panel{
    height:82px!important;
    min-height:82px!important;
    max-height:82px!important;
    padding:10px 12px!important;
  }
  .profile-page .profile-community-stat img,
  .profile-page .profile-community-stat .profile-new-icon{
    width:22px!important;
    height:22px!important;
    flex-basis:22px!important;
  }
  .profile-page .profile-community-stat strong{
    font-size:18px!important;
  }
  .profile-page .profile-community-stat.rank strong{
    font-size:22px!important;
  }
  .profile-page .profile-community-stat span{
    font-size:9px!important;
  }
}
@media(max-width:1180px){
  .profile-page .profile-community-card{
    height:auto!important;
    min-height:230px!important;
    max-height:none!important;
  }
}
@media(max-width:720px){
  .profile-page .profile-community-card{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    grid-template-rows:auto!important;
  }
  .profile-page .profile-community-filter-row,
  .profile-page .profile-community-stat-panel{
    grid-template-columns:1fr!important;
    height:auto!important;
    max-height:none!important;
  }
  .profile-page .profile-community-stat{
    min-height:68px!important;
  }
}

/* Profile Community stat strip: keep labels fully readable. */
.profile-page .profile-community-stat{
  gap:3px!important;
  padding:0 8px!important;
}
.profile-page .profile-community-stat img,
.profile-page .profile-community-stat .profile-new-icon{
  width:21px!important;
  height:21px!important;
  flex-basis:21px!important;
}
.profile-page .profile-community-stat strong{
  font-size:17px!important;
  line-height:.95!important;
}
.profile-page .profile-community-stat.rank strong{
  font-size:21px!important;
}
.profile-page .profile-community-stat span{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  max-width:82px!important;
  font-size:8.8px!important;
  line-height:1.08!important;
  text-align:center!important;
}
@media(max-width:1450px){
  .profile-page .profile-community-stat{
    padding:0 6px!important;
  }
  .profile-page .profile-community-stat strong{
    font-size:16px!important;
  }
  .profile-page .profile-community-stat.rank strong{
    font-size:20px!important;
  }
  .profile-page .profile-community-stat span{
    max-width:76px!important;
    font-size:8.3px!important;
  }
}

/* Dragon Studio feed section: brief focus glow after Feed Me scroll. */
body.dragon-studio-mode .ds-dashboard .ds-feed.feed-section-highlight{
  animation:feedSectionPulse 1.4s ease!important;
}
@keyframes feedSectionPulse{
  0%{
    box-shadow:
      0 0 0 rgba(136,110,255,0),
      inset 0 1px 0 rgba(255,255,255,.06);
    border-color:rgba(150,130,255,.34);
  }
  35%{
    box-shadow:
      0 0 28px rgba(136,110,255,.62),
      0 0 56px rgba(136,110,255,.28),
      inset 0 1px 0 rgba(255,255,255,.10);
    border-color:rgba(190,170,255,.85);
  }
  100%{
    box-shadow:
      0 0 0 rgba(136,110,255,0),
      inset 0 1px 0 rgba(255,255,255,.06);
    border-color:rgba(150,130,255,.34);
  }
}

body:not(.dragon-studio-mode) #homePage .product-card.exam-card::before,
body:not(.dragon-studio-mode) #homePage .product-card.exam-card::after{
  content:none!important;
  display:none!important;
  background:none!important;
}

body:not(.dragon-studio-mode) #homePage .product-card .exam-copy h2{
  width:88%!important;
  margin:0 auto!important;
  padding-bottom:10px!important;
  border-bottom:1px solid rgba(90,86,150,.14)!important;
}

body:not(.dragon-studio-mode) #homePage .product-card .exam-copy h2::after{
  content:none!important;
  display:none!important;
}

/* Level selection pricing page restored layout. */
body:not(.dragon-studio-mode) #levelPage.page{
  box-sizing:border-box!important;
  max-width:none!important;
  width:100%!important;
  min-height:calc(100vh - 78px)!important;
  padding:38px clamp(24px,3.8vw,74px) 48px!important;
  background:
    linear-gradient(180deg,rgba(9,18,52,.80),rgba(6,13,38,.92)),
    url("assets/assets_webp/backgrounds/bg_main_navy_glow.webp") center top/cover no-repeat!important;
}

body:not(.dragon-studio-mode) #levelPage .level-hero{
  width:min(1100px,100%)!important;
  margin:0 auto 22px!important;
  padding:0!important;
  text-align:center!important;
}

body:not(.dragon-studio-mode) #levelPage .level-hero h1{
  margin:0 0 10px!important;
  color:#fff!important;
  font-size:clamp(42px,4.2vw,64px)!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:0!important;
}

body:not(.dragon-studio-mode) #levelPage .level-hero p{
  max-width:700px!important;
  margin:0 auto!important;
  color:rgba(247,248,255,.92)!important;
  font-size:17px!important;
  line-height:1.28!important;
  font-weight:850!important;
}

body:not(.dragon-studio-mode) #levelPage .info-pill{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:32px!important;
  margin-top:14px!important;
  padding:0 26px!important;
  border-radius:999px!important;
  background:#fff!important;
  border:1px solid rgba(198,188,255,.52)!important;
  color:#5742e8!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:950!important;
}

body:not(.dragon-studio-mode) #levelGrid.level-grid,
body:not(.dragon-studio-mode) #levelGrid.level-grid.ssat,
body:not(.dragon-studio-mode) #levelGrid.level-grid.isee,
body:not(.dragon-studio-mode) #levelGrid.level-grid.g212{
  width:min(1500px,100%)!important;
  max-width:1500px!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:28px!important;
  align-items:stretch!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card{
  box-sizing:border-box!important;
  position:relative!important;
  display:grid!important;
  grid-template-columns:104px minmax(0,1fr)!important;
  grid-template-rows:auto auto auto auto auto!important;
  column-gap:24px!important;
  row-gap:0!important;
  min-height:520px!important;
  padding:32px!important;
  overflow:hidden!important;
  border-radius:22px!important;
  border:1px solid #dddcec!important;
  background:#fff!important;
  background-image:none!important;
  box-shadow:0 20px 42px rgba(7,13,47,.24),inset 0 1px 0 rgba(255,255,255,.88)!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card::before,
body:not(.dragon-studio-mode) #levelPage .level-card::after{
  content:none!important;
  display:none!important;
  background:none!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card > .level-icon{
  grid-column:1!important;
  grid-row:1!important;
  width:88px!important;
  height:88px!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:17px!important;
  background:#fff!important;
  border:1px solid #dddcec!important;
  box-shadow:0 14px 28px rgba(43,31,112,.12)!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card > .level-icon img{
  width:72px!important;
  height:72px!important;
  object-fit:contain!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card > div:nth-of-type(2){
  grid-column:2!important;
  grid-row:1!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  min-height:88px!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card h3{
  margin:0 0 10px!important;
  color:#07133f!important;
  font-size:clamp(28px,2vw,34px)!important;
  line-height:1.05!important;
  font-weight:1000!important;
  letter-spacing:0!important;
  white-space:normal!important;
  text-shadow:none!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card p{
  margin:0!important;
  color:#354063!important;
  font-size:17px!important;
  line-height:1.2!important;
  font-weight:900!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card .grade{
  color:#5742e8!important;
  font-size:22px!important;
  font-weight:1000!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card .level-feature{
  grid-column:1 / -1!important;
  grid-row:2!important;
  display:block!important;
  min-height:92px!important;
  margin:30px 0 0!important;
  padding:24px 0 14px!important;
  border-top:1px solid #dddcec!important;
  color:#263153!important;
  text-align:left!important;
  font-size:15px!important;
  line-height:1.35!important;
  font-weight:850!important;
}

body:not(.dragon-studio-mode) #levelPage .level-count-line{
  grid-column:1 / -1!important;
  grid-row:3!important;
  box-sizing:border-box!important;
  display:block!important;
  width:100%!important;
  margin:0 auto 24px!important;
  padding:0 8px!important;
  color:#72799c!important;
  text-align:center!important;
  font-size:15px!important;
  line-height:1.1!important;
  font-weight:900!important;
  white-space:nowrap!important;
}

body:not(.dragon-studio-mode) #levelPage .pricing-row{
  grid-column:1 / -1!important;
  grid-row:4!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  min-height:132px!important;
  margin:0 0 34px!important;
  overflow:hidden!important;
  border:1px solid #dddcec!important;
  border-radius:14px!important;
  background:#fff!important;
}

body:not(.dragon-studio-mode) #levelPage .price-choice,
body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid .level-card .pricing-row .price-choice{
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  min-height:132px!important;
  padding:18px 10px 14px!important;
  border:0!important;
  border-right:1px solid #dddcec!important;
  border-radius:0!important;
  background:#fff!important;
  color:#07133f!important;
  text-align:center!important;
}

body:not(.dragon-studio-mode) #levelPage .price-choice:last-child{
  border-right:0!important;
}

body:not(.dragon-studio-mode) #levelPage .price-choice.selected{
  background:#fff!important;
}

body:not(.dragon-studio-mode) #levelPage .price-choice .radio,
body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid .level-card .pricing-row .price-choice .radio{
  display:block!important;
  flex:0 0 18px!important;
  width:18px!important;
  height:18px!important;
  margin:0 auto 14px!important;
  border:1.5px solid #a7adc8!important;
  border-radius:999px!important;
  background:#fff!important;
}

body:not(.dragon-studio-mode) #levelPage .price-choice .radio.on{
  border:6px solid #5742e8!important;
}

body:not(.dragon-studio-mode) #levelPage .price-choice b{
  display:block!important;
  color:#07133f!important;
  font-size:18px!important;
  line-height:1.05!important;
  font-weight:1000!important;
}

body:not(.dragon-studio-mode) #levelPage .price-choice small{
  display:block!important;
  margin:8px 0 0!important;
  color:#49557a!important;
  font-size:13px!important;
  line-height:1.12!important;
  font-weight:850!important;
}

body:not(.dragon-studio-mode) #levelPage .price-choice .yearly-price-copy{
  white-space:normal!important;
}

body:not(.dragon-studio-mode) #levelPage .price-choice .tag{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin-top:8px!important;
  padding:5px 14px!important;
  border-radius:999px!important;
  background:#f3d06a!important;
  color:#07133f!important;
  font-size:12px!important;
  line-height:1!important;
  font-style:normal!important;
  font-weight:1000!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card .primary-wide.start{
  grid-column:1 / -1!important;
  grid-row:5!important;
  width:100%!important;
  min-height:74px!important;
  margin:auto 0 0!important;
  border:0!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,#6656f6,#4e37d5)!important;
  color:#fff!important;
  font-size:24px!important;
  font-weight:1000!important;
  box-shadow:0 14px 28px rgba(73,50,205,.24)!important;
}

body:not(.dragon-studio-mode) #levelPage .full-access-unlocks{
  box-sizing:border-box!important;
  display:block!important;
  width:min(1500px,100%)!important;
  max-width:1500px!important;
  margin:32px auto 0!important;
  padding:28px 32px 34px!important;
  border-radius:22px!important;
  border:1px solid #dddcec!important;
  background:#fff!important;
  color:#07133f!important;
  box-shadow:0 20px 42px rgba(7,13,47,.24)!important;
}

body:not(.dragon-studio-mode) #levelPage .full-access-unlocks.hidden{
  display:block!important;
}

body:not(.dragon-studio-mode) #levelPage .full-access-unlocks h2{
  margin:0 0 26px!important;
  color:#07133f!important;
  text-align:center!important;
  font-size:clamp(28px,2.2vw,36px)!important;
  line-height:1.08!important;
  font-weight:1000!important;
}

body:not(.dragon-studio-mode) #levelPage .full-access-unlocks h2 span{
  color:#5742e8!important;
}

body:not(.dragon-studio-mode) #levelPage .unlock-grid{
  display:none!important;
}

body:not(.dragon-studio-mode) #levelPage .unlock-icon-row{
  display:grid!important;
  grid-template-columns:repeat(8,minmax(0,1fr))!important;
  gap:0!important;
  margin:0 0 30px!important;
}

body:not(.dragon-studio-mode) #levelPage .unlock-icon-item{
  display:grid!important;
  justify-items:center!important;
  align-content:center!important;
  gap:12px!important;
  min-height:132px!important;
  padding:0 14px!important;
  border-right:1px solid #dddcec!important;
  text-align:center!important;
}

body:not(.dragon-studio-mode) #levelPage .unlock-icon-item:last-child{
  border-right:0!important;
}

body:not(.dragon-studio-mode) #levelPage .unlock-icon-item i{
  width:70px!important;
  height:70px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  background:#f0eefc!important;
}

body:not(.dragon-studio-mode) #levelPage .unlock-icon-item img{
  width:36px!important;
  height:36px!important;
  object-fit:contain!important;
}

body:not(.dragon-studio-mode) #levelPage .unlock-icon-item b{
  color:#07133f!important;
  font-size:16px!important;
  line-height:1.12!important;
  font-weight:1000!important;
}

body:not(.dragon-studio-mode) #levelPage .plan-summary-strip{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  overflow:hidden!important;
  border:1px solid #dddcec!important;
  border-radius:12px!important;
  background:#fff!important;
}

body:not(.dragon-studio-mode) #levelPage .plan-summary-card{
  display:grid!important;
  grid-template-columns:92px minmax(0,1fr)!important;
  align-items:center!important;
  gap:22px!important;
  min-height:164px!important;
  padding:26px 30px!important;
  border:0!important;
  border-right:1px solid #dddcec!important;
  border-radius:0!important;
  background:#fff!important;
  color:#07133f!important;
  text-align:left!important;
  box-shadow:none!important;
}

body:not(.dragon-studio-mode) #levelPage .plan-summary-card:last-child{
  border-right:0!important;
}

body:not(.dragon-studio-mode) #levelPage .plan-summary-card.yearly{
  background:#fff8e8!important;
  border:1.5px solid #f2c454!important;
}

body:not(.dragon-studio-mode) #levelPage .plan-summary-card i{
  width:74px!important;
  height:74px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  background:#f0eefc!important;
  color:#5742e8!important;
  font-size:38px!important;
  line-height:1!important;
  font-style:normal!important;
  font-weight:1000!important;
}

body:not(.dragon-studio-mode) #levelPage .plan-summary-card.yearly i{
  background:#fff!important;
  border:2px solid #f1d47a!important;
  color:#caa13d!important;
}

body:not(.dragon-studio-mode) #levelPage .plan-summary-card h3{
  margin:0 0 10px!important;
  color:#07133f!important;
  font-size:26px!important;
  line-height:1.08!important;
  font-weight:1000!important;
}

body:not(.dragon-studio-mode) #levelPage .plan-summary-card p{
  margin:0!important;
  color:#49557a!important;
  font-size:16px!important;
  line-height:1.34!important;
  font-weight:750!important;
}

body:not(.dragon-studio-mode) #levelPage .plan-summary-card strong{
  display:block!important;
  margin-top:10px!important;
  color:#07133f!important;
  font-size:20px!important;
  line-height:1.15!important;
  font-weight:1000!important;
}

body:not(.dragon-studio-mode) #levelPage .plan-summary-card em{
  display:inline-flex!important;
  margin-top:10px!important;
  padding:6px 16px!important;
  border-radius:999px!important;
  background:#f3d06a!important;
  color:#07133f!important;
  font-size:14px!important;
  line-height:1!important;
  font-style:normal!important;
  font-weight:1000!important;
}

@media(max-width:1180px){
  body:not(.dragon-studio-mode) #levelGrid.level-grid,
  body:not(.dragon-studio-mode) #levelGrid.level-grid.ssat,
  body:not(.dragon-studio-mode) #levelGrid.level-grid.isee,
  body:not(.dragon-studio-mode) #levelGrid.level-grid.g212{
    width:min(680px,100%)!important;
    grid-template-columns:1fr!important;
  }

  body:not(.dragon-studio-mode) #levelPage .unlock-icon-row{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:16px 0!important;
  }

  body:not(.dragon-studio-mode) #levelPage .unlock-icon-item:nth-child(4n){
    border-right:0!important;
  }

  body:not(.dragon-studio-mode) #levelPage .plan-summary-strip{
    grid-template-columns:1fr!important;
  }

  body:not(.dragon-studio-mode) #levelPage .plan-summary-card{
    border-right:0!important;
    border-bottom:1px solid #dddcec!important;
  }
}

@media(max-width:620px){
  body:not(.dragon-studio-mode) #levelPage.page{
    padding:28px 14px 34px!important;
  }

  body:not(.dragon-studio-mode) #levelPage .level-hero h1{
    font-size:clamp(36px,11vw,48px)!important;
  }

  body:not(.dragon-studio-mode) #levelPage .level-card{
    min-height:0!important;
    padding:20px 18px 18px!important;
    grid-template-columns:82px minmax(0,1fr)!important;
    column-gap:14px!important;
  }

  body:not(.dragon-studio-mode) #levelPage .level-card > .level-icon{
    width:74px!important;
    height:74px!important;
  }

  body:not(.dragon-studio-mode) #levelPage .level-card > .level-icon img{
    width:58px!important;
    height:58px!important;
  }

  body:not(.dragon-studio-mode) #levelPage .level-card > div:nth-of-type(2){
    min-height:74px!important;
  }

  body:not(.dragon-studio-mode) #levelPage .level-card h3{
    font-size:25px!important;
  }

  body:not(.dragon-studio-mode) #levelPage .level-card p{
    font-size:14px!important;
  }

  body:not(.dragon-studio-mode) #levelPage .level-card .grade{
    font-size:18px!important;
  }

  body:not(.dragon-studio-mode) #levelPage .pricing-row{
    grid-template-columns:1fr!important;
    min-height:0!important;
  }

  body:not(.dragon-studio-mode) #levelPage .price-choice,
  body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid .level-card .pricing-row .price-choice{
    min-height:88px!important;
    padding:12px 8px 10px!important;
    border-right:0!important;
    border-bottom:1px solid #dddcec!important;
  }

  body:not(.dragon-studio-mode) #levelPage .price-choice:last-child{
    border-bottom:0!important;
  }

  body:not(.dragon-studio-mode) #levelPage .level-card .primary-wide.start{
    min-height:56px!important;
    font-size:18px!important;
  }

  body:not(.dragon-studio-mode) #levelPage .full-access-unlocks{
    padding:24px 16px!important;
  }

  body:not(.dragon-studio-mode) #levelPage .unlock-icon-row{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  body:not(.dragon-studio-mode) #levelPage .unlock-icon-item{
    border-right:0!important;
  }

  body:not(.dragon-studio-mode) #levelPage .plan-summary-card{
    grid-template-columns:58px minmax(0,1fr)!important;
    padding:18px!important;
  }

  body:not(.dragon-studio-mode) #levelPage .plan-summary-card i{
    width:52px!important;
    height:52px!important;
    font-size:28px!important;
  }
}

/* Level page scale tuning: align typography and panel sizing with the Home cards. */
body:not(.dragon-studio-mode) #levelPage{
  --level-content-max:1420px;
  --level-card-gap:24px;
}

body:not(.dragon-studio-mode) #levelPage.page{
  padding:34px clamp(22px,3.4vw,68px) 42px!important;
}

body:not(.dragon-studio-mode) #levelPage .level-hero{
  margin-bottom:20px!important;
}

body:not(.dragon-studio-mode) #levelPage .level-hero h1{
  font-size:clamp(40px,3.7vw,58px)!important;
}

body:not(.dragon-studio-mode) #levelGrid.level-grid,
body:not(.dragon-studio-mode) #levelGrid.level-grid.ssat,
body:not(.dragon-studio-mode) #levelGrid.level-grid.isee,
body:not(.dragon-studio-mode) #levelGrid.level-grid.g212,
body:not(.dragon-studio-mode) #levelPage .full-access-unlocks{
  width:min(var(--level-content-max),100%)!important;
  max-width:var(--level-content-max)!important;
}

body:not(.dragon-studio-mode) #levelGrid.level-grid,
body:not(.dragon-studio-mode) #levelGrid.level-grid.ssat,
body:not(.dragon-studio-mode) #levelGrid.level-grid.isee,
body:not(.dragon-studio-mode) #levelGrid.level-grid.g212{
  gap:var(--level-card-gap)!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card{
  min-height:468px!important;
  padding:28px!important;
  grid-template-columns:92px minmax(0,1fr)!important;
  column-gap:20px!important;
  border-radius:20px!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card > .level-icon{
  width:78px!important;
  height:78px!important;
  border-radius:15px!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card > .level-icon img{
  width:64px!important;
  height:64px!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card > div:nth-of-type(2){
  min-height:78px!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card h3{
  margin-bottom:8px!important;
  font-size:clamp(24px,1.7vw,30px)!important;
  line-height:1.07!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card p{
  font-size:15px!important;
  line-height:1.2!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card .grade{
  font-size:19px!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card .level-feature{
  min-height:74px!important;
  margin-top:22px!important;
  padding:19px 0 10px!important;
  font-size:13.5px!important;
  line-height:1.32!important;
}

body:not(.dragon-studio-mode) #levelPage .level-count-line{
  margin-bottom:18px!important;
  font-size:13px!important;
}

body:not(.dragon-studio-mode) #levelPage .pricing-row{
  min-height:104px!important;
  margin-bottom:28px!important;
  border-radius:13px!important;
}

body:not(.dragon-studio-mode) #levelPage .price-choice,
body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid .level-card .pricing-row .price-choice{
  min-height:104px!important;
  padding:14px 8px 10px!important;
}

body:not(.dragon-studio-mode) #levelPage .price-choice .radio,
body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid .level-card .pricing-row .price-choice .radio{
  flex-basis:17px!important;
  width:17px!important;
  height:17px!important;
  margin-bottom:10px!important;
}

body:not(.dragon-studio-mode) #levelPage .price-choice .radio.on{
  border:3px solid #5b4ee8!important;
  background:#ffffff!important;
  box-shadow:0 0 0 3px rgba(91,78,232,.12)!important;
  position:relative!important;
}

body:not(.dragon-studio-mode) #levelPage .price-choice .radio.on::after{
  content:""!important;
  position:absolute!important;
  width:7px!important;
  height:7px!important;
  border-radius:50%!important;
  background:#5b4ee8!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
}

body:not(.dragon-studio-mode) #levelPage .price-choice.selected{
  background:#fbfaff!important;
}

body:not(.dragon-studio-mode) #levelPage .price-choice b{
  font-size:15px!important;
}

body:not(.dragon-studio-mode) #levelPage .price-choice small{
  margin-top:6px!important;
  font-size:11px!important;
  line-height:1.12!important;
}

body:not(.dragon-studio-mode) #levelPage .price-choice .tag{
  margin-top:6px!important;
  padding:4px 12px!important;
  font-size:11px!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card .primary-wide.start{
  min-height:60px!important;
  border-radius:12px!important;
  font-size:19px!important;
}

body:not(.dragon-studio-mode) #levelPage .full-access-unlocks{
  margin-top:28px!important;
  padding:24px 28px 30px!important;
  border-radius:20px!important;
}

body:not(.dragon-studio-mode) #levelPage .full-access-unlocks h2{
  margin-bottom:20px!important;
  font-size:clamp(25px,1.85vw,30px)!important;
}

body:not(.dragon-studio-mode) #levelPage .unlock-icon-row{
  margin-bottom:24px!important;
}

body:not(.dragon-studio-mode) #levelPage .unlock-icon-item{
  min-height:104px!important;
  gap:10px!important;
  padding:0 10px!important;
}

body:not(.dragon-studio-mode) #levelPage .unlock-icon-item i{
  width:58px!important;
  height:58px!important;
}

body:not(.dragon-studio-mode) #levelPage .unlock-icon-item img{
  width:30px!important;
  height:30px!important;
}

body:not(.dragon-studio-mode) #levelPage .unlock-icon-item b{
  font-size:13px!important;
  line-height:1.13!important;
}

body:not(.dragon-studio-mode) #levelPage .plan-summary-card{
  grid-template-columns:72px minmax(0,1fr)!important;
  gap:16px!important;
  min-height:126px!important;
  padding:20px 24px!important;
}

body:not(.dragon-studio-mode) #levelPage .plan-summary-card i{
  width:58px!important;
  height:58px!important;
  font-size:30px!important;
}

body:not(.dragon-studio-mode) #levelPage .plan-summary-card h3{
  margin-bottom:7px!important;
  font-size:21px!important;
}

body:not(.dragon-studio-mode) #levelPage .plan-summary-card p{
  font-size:13.5px!important;
  line-height:1.3!important;
}

body:not(.dragon-studio-mode) #levelPage .plan-summary-card strong{
  margin-top:7px!important;
  font-size:17px!important;
}

body:not(.dragon-studio-mode) #levelPage .plan-summary-card em{
  margin-top:7px!important;
  padding:5px 13px!important;
  font-size:12px!important;
}

@media(max-width:1180px){
  body:not(.dragon-studio-mode) #levelGrid.level-grid,
  body:not(.dragon-studio-mode) #levelGrid.level-grid.ssat,
  body:not(.dragon-studio-mode) #levelGrid.level-grid.isee,
  body:not(.dragon-studio-mode) #levelGrid.level-grid.g212{
    width:min(660px,100%)!important;
  }
}

@media(max-width:620px){
  body:not(.dragon-studio-mode) #levelPage.page{
    padding:26px 14px 34px!important;
  }

  body:not(.dragon-studio-mode) #levelPage .level-card{
    min-height:0!important;
    padding:18px!important;
    grid-template-columns:78px minmax(0,1fr)!important;
  }

  body:not(.dragon-studio-mode) #levelPage .pricing-row{
    min-height:0!important;
  }

  body:not(.dragon-studio-mode) #levelPage .price-choice,
  body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid .level-card .pricing-row .price-choice{
    min-height:84px!important;
  }

  body:not(.dragon-studio-mode) #levelPage .full-access-unlocks{
    padding:22px 16px!important;
  }
}

/* Public page global scale pass: keep header stable, compact Home and Level content. */
body:not(.dragon-studio-mode) #homePage.page{
  padding:28px clamp(18px,3vw,56px) 38px!important;
}

body:not(.dragon-studio-mode) #homePage .home-product-grid,
body:not(.dragon-studio-mode) #homePage .product-grid.exam-grid.compact{
  width:min(1260px,100%)!important;
  max-width:1260px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  gap:20px!important;
}

body:not(.dragon-studio-mode) #homePage .product-card.exam-card{
  min-height:392px!important;
  padding:24px 30px 24px!important;
  border-radius:18px!important;
}

body:not(.dragon-studio-mode) #homePage .product-card .mascot-wrap.image-mascot{
  width:116px!important;
  height:116px!important;
  margin-bottom:10px!important;
}

body:not(.dragon-studio-mode) #homePage .product-card .mascot-wrap.image-mascot img{
  width:94px!important;
  height:94px!important;
}

body:not(.dragon-studio-mode) #homePage .product-card .exam-copy{
  gap:10px!important;
}

body:not(.dragon-studio-mode) #homePage .product-card .exam-copy h2{
  width:88%!important;
  padding-bottom:9px!important;
  font-size:clamp(24px,1.55vw,29px)!important;
  line-height:1.08!important;
}

body:not(.dragon-studio-mode) #homePage .product-card .exam-copy p{
  max-width:410px!important;
  min-height:38px!important;
  font-size:13px!important;
  line-height:1.32!important;
}

body:not(.dragon-studio-mode) #homePage .product-card .chips,
body:not(.dragon-studio-mode) #homePage .product-card .chips.ssat,
body:not(.dragon-studio-mode) #homePage .product-card .chips.coming{
  gap:7px!important;
  margin-top:2px!important;
}

body:not(.dragon-studio-mode) #homePage .product-card .chips span,
body:not(.dragon-studio-mode) #homePage .product-card .chips.coming span,
body:not(.dragon-studio-mode) #homePage .product-card.coming-soon-card .chips span{
  min-height:24px!important;
  padding:0 12px!important;
  font-size:12px!important;
  line-height:1!important;
}

body:not(.dragon-studio-mode) #homePage .product-card .primary-wide,
body:not(.dragon-studio-mode) #homePage .product-card .primary-wide.disabled,
body:not(.dragon-studio-mode) #homePage .product-card.coming-soon-card .primary-wide{
  width:min(360px,88%)!important;
  min-height:52px!important;
  border-radius:10px!important;
  font-size:16px!important;
}

body:not(.dragon-studio-mode) #levelPage{
  --level-content-max:1180px;
  --level-card-gap:22px;
}

body:not(.dragon-studio-mode) #levelPage.page{
  padding:28px clamp(18px,3vw,56px) 36px!important;
}

body:not(.dragon-studio-mode) #levelPage .level-hero{
  margin-bottom:18px!important;
}

body:not(.dragon-studio-mode) #levelPage .level-hero h1{
  font-size:clamp(34px,3.1vw,48px)!important;
}

body:not(.dragon-studio-mode) #levelPage .level-hero p{
  font-size:14px!important;
}

body:not(.dragon-studio-mode) #levelPage .info-pill{
  min-height:28px!important;
  margin-top:10px!important;
  padding:0 20px!important;
  font-size:11px!important;
}

body:not(.dragon-studio-mode) #levelGrid.level-grid,
body:not(.dragon-studio-mode) #levelGrid.level-grid.ssat,
body:not(.dragon-studio-mode) #levelGrid.level-grid.isee,
body:not(.dragon-studio-mode) #levelGrid.level-grid.g212,
body:not(.dragon-studio-mode) #levelPage .full-access-unlocks{
  width:min(var(--level-content-max),100%)!important;
  max-width:var(--level-content-max)!important;
}

body:not(.dragon-studio-mode) #levelGrid.level-grid,
body:not(.dragon-studio-mode) #levelGrid.level-grid.ssat,
body:not(.dragon-studio-mode) #levelGrid.level-grid.isee,
body:not(.dragon-studio-mode) #levelGrid.level-grid.g212{
  gap:var(--level-card-gap)!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card{
  min-height:396px!important;
  padding:22px!important;
  grid-template-columns:76px minmax(0,1fr)!important;
  column-gap:16px!important;
  border-radius:18px!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card > .level-icon{
  width:68px!important;
  height:68px!important;
  border-radius:13px!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card > .level-icon img{
  width:54px!important;
  height:54px!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card > div:nth-of-type(2){
  min-height:68px!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card h3{
  margin-bottom:6px!important;
  font-size:clamp(20px,1.35vw,24px)!important;
  line-height:1.08!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card p{
  font-size:13px!important;
  line-height:1.18!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card .grade{
  font-size:16px!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card .level-feature{
  min-height:58px!important;
  margin-top:18px!important;
  padding:16px 0 8px!important;
  font-size:12px!important;
  line-height:1.3!important;
}

body:not(.dragon-studio-mode) #levelPage .level-count-line{
  margin-bottom:14px!important;
  font-size:11.5px!important;
}

body:not(.dragon-studio-mode) #levelPage .pricing-row{
  min-height:86px!important;
  margin-bottom:22px!important;
  border-radius:12px!important;
}

body:not(.dragon-studio-mode) #levelPage .price-choice,
body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid .level-card .pricing-row .price-choice{
  min-height:86px!important;
  padding:10px 4px 8px!important;
}

body:not(.dragon-studio-mode) #levelPage .price-choice .radio,
body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid .level-card .pricing-row .price-choice .radio{
  flex-basis:15px!important;
  width:15px!important;
  height:15px!important;
  margin-bottom:7px!important;
}

body:not(.dragon-studio-mode) #levelPage .price-choice .radio.on{
  border-width:5px!important;
}

body:not(.dragon-studio-mode) #levelPage .price-choice b{
  font-size:12.5px!important;
}

body:not(.dragon-studio-mode) #levelPage .price-choice small{
  margin-top:4px!important;
  font-size:8.8px!important;
  line-height:1.05!important;
}

body:not(.dragon-studio-mode) #levelPage .price-choice .tag{
  margin-top:4px!important;
  padding:3px 8px!important;
  font-size:9px!important;
}

body:not(.dragon-studio-mode) #levelPage .price-choice.yearly-choice small{
  font-size:8.2px!important;
  white-space:normal!important;
}

body:not(.dragon-studio-mode) #levelPage .price-choice.yearly-choice .tag{
  padding-left:7px!important;
  padding-right:7px!important;
  font-size:8.8px!important;
}

body:not(.dragon-studio-mode) #levelPage .level-card .primary-wide.start{
  min-height:50px!important;
  border-radius:10px!important;
  font-size:17px!important;
}

body:not(.dragon-studio-mode) #levelPage .full-access-unlocks{
  margin-top:24px!important;
  padding:20px 24px 24px!important;
  border-radius:18px!important;
}

body:not(.dragon-studio-mode) #levelPage .full-access-unlocks h2{
  margin-bottom:16px!important;
  font-size:clamp(22px,1.55vw,25px)!important;
}

body:not(.dragon-studio-mode) #levelPage .unlock-icon-row{
  margin-bottom:18px!important;
}

body:not(.dragon-studio-mode) #levelPage .unlock-icon-item{
  min-height:82px!important;
  gap:7px!important;
  padding:0 8px!important;
}

body:not(.dragon-studio-mode) #levelPage .unlock-icon-item i{
  width:48px!important;
  height:48px!important;
}

body:not(.dragon-studio-mode) #levelPage .unlock-icon-item img{
  width:24px!important;
  height:24px!important;
}

body:not(.dragon-studio-mode) #levelPage .unlock-icon-item b{
  font-size:11.5px!important;
  line-height:1.12!important;
}

body:not(.dragon-studio-mode) #levelPage .plan-summary-card{
  grid-template-columns:58px minmax(0,1fr)!important;
  gap:14px!important;
  min-height:104px!important;
  padding:16px 18px!important;
}

body:not(.dragon-studio-mode) #levelPage .plan-summary-card i{
  width:48px!important;
  height:48px!important;
  font-size:24px!important;
}

body:not(.dragon-studio-mode) #levelPage .plan-summary-card h3{
  margin-bottom:5px!important;
  font-size:18px!important;
}

body:not(.dragon-studio-mode) #levelPage .plan-summary-card p{
  font-size:12px!important;
  line-height:1.28!important;
}

body:not(.dragon-studio-mode) #levelPage .plan-summary-card strong{
  margin-top:6px!important;
  font-size:15px!important;
}

body:not(.dragon-studio-mode) #levelPage .plan-summary-card em{
  margin-top:6px!important;
  padding:4px 11px!important;
  font-size:10.5px!important;
}

@media(max-width:1180px){
  body:not(.dragon-studio-mode) #levelGrid.level-grid,
  body:not(.dragon-studio-mode) #levelGrid.level-grid.ssat,
  body:not(.dragon-studio-mode) #levelGrid.level-grid.isee,
  body:not(.dragon-studio-mode) #levelGrid.level-grid.g212{
    width:min(620px,100%)!important;
  }
}

@media(max-width:900px){
  body:not(.dragon-studio-mode) #homePage .home-product-grid,
  body:not(.dragon-studio-mode) #homePage .product-grid.exam-grid.compact{
    grid-template-columns:1fr!important;
    width:min(620px,100%)!important;
  }
}

@media(max-width:620px){
  body:not(.dragon-studio-mode) #homePage .product-card.exam-card{
    min-height:0!important;
    padding:20px 18px!important;
  }

  body:not(.dragon-studio-mode) #homePage .product-card .primary-wide,
  body:not(.dragon-studio-mode) #homePage .product-card .primary-wide.disabled,
  body:not(.dragon-studio-mode) #homePage .product-card.coming-soon-card .primary-wide{
    width:100%!important;
    min-height:50px!important;
  }

  body:not(.dragon-studio-mode) #levelPage .level-card{
    min-height:0!important;
    padding:18px!important;
    grid-template-columns:72px minmax(0,1fr)!important;
  }

  body:not(.dragon-studio-mode) #levelPage .pricing-row{
    min-height:0!important;
  }

  body:not(.dragon-studio-mode) #levelPage .price-choice,
  body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid .level-card .pricing-row .price-choice{
    min-height:78px!important;
  }

  body:not(.dragon-studio-mode) #levelPage .full-access-unlocks{
    padding:20px 14px!important;
  }
}

/* Home card alignment and button sizing polish. */
body:not(.dragon-studio-mode) #homePage .home-product-grid,
body:not(.dragon-studio-mode) #homePage .product-grid.exam-grid.compact{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:stretch!important;
  justify-items:stretch!important;
}

body:not(.dragon-studio-mode) #homePage .product-card.exam-card{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  box-sizing:border-box!important;
  justify-self:stretch!important;
  border-radius:18px!important;
  padding-left:28px!important;
  padding-right:28px!important;
}

body:not(.dragon-studio-mode) #homePage .product-card .exam-copy,
body:not(.dragon-studio-mode) #homePage .product-card .exam-copy h2,
body:not(.dragon-studio-mode) #homePage .product-card .exam-copy p{
  min-width:0!important;
  max-width:100%!important;
}

body:not(.dragon-studio-mode) #homePage .product-card .exam-copy h2{
  white-space:nowrap!important;
  overflow:visible!important;
}

body:not(.dragon-studio-mode) #homePage .product-card .primary-wide,
body:not(.dragon-studio-mode) #homePage .product-card .primary-wide.disabled,
body:not(.dragon-studio-mode) #homePage .product-card.coming-soon-card .primary-wide{
  width:100%!important;
  max-width:none!important;
  min-height:46px!important;
  height:46px!important;
  margin-left:0!important;
  margin-right:0!important;
  border-radius:9px!important;
  font-size:15px!important;
}

@media(max-width:900px){
  body:not(.dragon-studio-mode) #homePage .home-product-grid,
  body:not(.dragon-studio-mode) #homePage .product-grid.exam-grid.compact{
    grid-template-columns:1fr!important;
  }
}

@media(max-width:620px){
  body:not(.dragon-studio-mode) #homePage .product-card .exam-copy h2{
    white-space:normal!important;
  }

body:not(.dragon-studio-mode) #homePage .product-card .primary-wide,
body:not(.dragon-studio-mode) #homePage .product-card .primary-wide.disabled,
body:not(.dragon-studio-mode) #homePage .product-card.coming-soon-card .primary-wide{
  width:100%!important;
  height:48px!important;
  min-height:48px!important;
  }
}

/* Level card header alignment: keep egg boxes above the divider on all tracks. */
body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid .level-card{
  grid-template-rows:auto auto auto auto auto!important;
  row-gap:0!important;
}

body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid .level-card > .level-icon,
body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid .level-card .level-icon{
  grid-column:1!important;
  grid-row:1!important;
  align-self:center!important;
  justify-self:start!important;
  position:relative!important;
  top:0!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  z-index:2!important;
  margin:0!important;
}

body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid .level-card > div:nth-of-type(2){
  grid-column:2!important;
  grid-row:1!important;
  align-self:center!important;
  min-height:76px!important;
  margin:0!important;
}

body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid .level-card .level-feature{
  grid-column:1 / -1!important;
  grid-row:2!important;
  margin-top:18px!important;
  padding-top:16px!important;
  border-top:1px solid #dddcec!important;
}

body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid .level-card .primary-wide.start{
  height:38px!important;
  min-height:38px!important;
  padding-top:0!important;
  padding-bottom:0!important;
  margin-top:14px!important;
  font-size:15px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

@media(max-width:620px){
  body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid .level-card > div:nth-of-type(2){
    min-height:70px!important;
  }

  body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid .level-card .primary-wide.start{
    height:42px!important;
    min-height:42px!important;
  }
}

/* Final Home button sizing override: wide and flat. */
body:not(.dragon-studio-mode) #homePage .product-card .primary-wide,
body:not(.dragon-studio-mode) #homePage .product-card .primary-wide.disabled,
body:not(.dragon-studio-mode) #homePage .product-card.coming-soon-card .primary-wide{
  width:100%!important;
  max-width:none!important;
  height:40px!important;
  min-height:40px!important;
  padding:0 18px!important;
  border-radius:9px!important;
  font-size:14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

@media(max-width:620px){
  body:not(.dragon-studio-mode) #homePage .product-card .primary-wide,
  body:not(.dragon-studio-mode) #homePage .product-card .primary-wide.disabled,
  body:not(.dragon-studio-mode) #homePage .product-card.coming-soon-card .primary-wide{
    height:42px!important;
    min-height:42px!important;
  }
}

/* Final feed interaction override: keep Feed Me and feed item cards clickable. */
body.dragon-studio-mode .ds-dashboard .my-dragon-card::before,
body.dragon-studio-mode .ds-dashboard .my-dragon-card::after,
body.dragon-studio-mode .ds-dashboard .ds-feed::before,
body.dragon-studio-mode .ds-dashboard .ds-feed::after{
  pointer-events:none!important;
}

body.dragon-studio-mode .ds-dashboard [data-action="scroll-to-feed"],
body.dragon-studio-mode .ds-dashboard [data-feed-item-id]{
  position:relative!important;
  z-index:10!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}

body.dragon-studio-mode .ds-dashboard .ds-feed-item.disabled{
  pointer-events:auto!important;
}

/* Feed My Dragon item confirmation popup: compact shared sizing and clean image ornaments. */
.feed-confirmation-backdrop{
  place-items:center!important;
  padding:18px!important;
}
.feed-confirmation-modal{
  width:min(546px,calc(100vw - 32px))!important;
  max-height:calc(100vh - 32px)!important;
  gap:12px!important;
  padding:38px 34px 26px!important;
  border-radius:24px!important;
  overflow:auto!important;
}
.feed-confirmation-close{
  top:14px!important;
  right:14px!important;
  width:48px!important;
  height:48px!important;
  font-size:40px!important;
}
.feed-confirmation-sparkles{
  inset:30px 82px auto 82px!important;
  align-items:center!important;
}
.feed-confirmation-sparkles img{
  display:block!important;
  width:24px!important;
  height:24px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 0 10px rgba(255,221,111,.45))!important;
}
.feed-confirmation-sparkles img:nth-child(2),
.feed-confirmation-sparkles img:nth-child(4){
  transform:scale(.72) translateY(18px)!important;
}
.feed-confirmation-modal h2{
  font-size:45px!important;
  line-height:.98!important;
}
.feed-confirmation-rule{
  width:min(210px,68%)!important;
  gap:10px!important;
}
.feed-confirmation-rule i{
  height:2px!important;
}
.feed-confirmation-rule img{
  width:22px!important;
  height:22px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 0 10px rgba(141,112,255,.45))!important;
}
.feed-confirmation-rule b{
  display:none!important;
}
.feed-confirmation-modal p{
  font-size:21px!important;
  line-height:1.25!important;
}
.feed-confirmation-item{
  width:min(230px,50vw)!important;
  height:min(182px,28vh)!important;
  margin:0!important;
}
.feed-confirmation-coins{
  width:min(350px,100%)!important;
  min-height:54px!important;
  grid-template-columns:1fr auto 30px!important;
  gap:10px!important;
  padding:10px 16px!important;
  border-radius:16px!important;
}
.feed-confirmation-coins span{
  font-size:17px!important;
}
.feed-confirmation-coins b{
  font-size:32px!important;
}
.feed-confirmation-coins img{
  width:30px!important;
  height:30px!important;
}
.feed-confirmation-awesome{
  min-width:190px!important;
  min-height:48px!important;
  font-size:20px!important;
}
@media(max-width:620px){
  .feed-confirmation-modal{
    width:calc(100vw - 24px)!important;
    padding:34px 16px 22px!important;
    gap:10px!important;
  }
  .feed-confirmation-close{
    width:42px!important;
    height:42px!important;
    font-size:34px!important;
  }
  .feed-confirmation-sparkles{
    inset:30px 58px auto 58px!important;
  }
  .feed-confirmation-modal h2{
    font-size:36px!important;
  }
  .feed-confirmation-modal p{
    font-size:18px!important;
  }
  .feed-confirmation-item{
    width:min(190px,58vw)!important;
    height:min(150px,24vh)!important;
  }
  .feed-confirmation-coins{
    grid-template-columns:1fr auto 26px!important;
  }
  .feed-confirmation-coins span{
    font-size:15px!important;
  }
  .feed-confirmation-coins b{
    font-size:28px!important;
  }
  .feed-confirmation-coins img{
    width:26px!important;
    height:26px!important;
  }
  .feed-confirmation-awesome{
    min-width:170px!important;
    min-height:44px!important;
    font-size:18px!important;
  }
}

/* Final hatch interaction override: keep hatch controls clickable above decorative paths. */
body.dragon-studio-mode .ds-dashboard .ds-hatch .switch-hatching-egg-btn,
body.dragon-studio-mode .ds-dashboard .ds-hatch>button,
body.dragon-studio-mode .ds-dashboard .ds-hatchery .ds-gallery-tile,
body.dragon-studio-mode #comingSoonModal button{
  position:relative!important;
  z-index:10!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}

body.dragon-studio-mode .ds-dashboard .ds-hatch-connector,
body.dragon-studio-mode .ds-dashboard .ds-hatch::before,
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day::before,
body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day::after{
  pointer-events:none!important;
}

/* Final home interaction safety: hidden layers must not intercept homepage clicks. */
.hidden,
.modal.hidden,
.modal-backdrop.hidden,
.page.hidden,
#studyActions.hidden{
  pointer-events:none!important;
}

body:not(.dragon-studio-mode) #appHeader button,
body:not(.dragon-studio-mode) #homePage .product-card,
body:not(.dragon-studio-mode) #homePage .product-card button,
body:not(.dragon-studio-mode) #levelPage .level-card,
body:not(.dragon-studio-mode) #levelPage .level-card button{
  pointer-events:auto!important;
  position:relative!important;
  z-index:2!important;
}

body:not(.dragon-studio-mode) #homePage .product-card,
body:not(.dragon-studio-mode) #homePage .product-card button,
body:not(.dragon-studio-mode) #levelPage .level-card button{
  cursor:pointer!important;
}

.hatchery-match-page .hatchery-game-shell{
  grid-template-columns:300px minmax(660px,1fr) 320px!important;
  gap:24px!important;
  max-width:1500px!important;
}

.hatchery-match-page .hatchery-right-col{
  min-width:0!important;
}

  padding:20px!important;
  border-radius:22px!important;
  background:
    radial-gradient(circle at 18% 14%,rgba(119,88,255,.18),transparent 28%),
    linear-gradient(180deg,rgba(14,22,58,.98),rgba(7,13,38,.99))!important;
  border:1px solid rgba(135,106,255,.55)!important;
  box-shadow:0 14px 32px rgba(2,8,26,.34),0 0 24px rgba(99,70,255,.12)!important;
}

  margin:0 0 8px!important;
  font-size:24px!important;
  line-height:1.05!important;
  color:#fff!important;
  text-shadow:0 2px 12px rgba(0,0,0,.42)!important;
}

  margin:0 0 14px!important;
  font-size:13px!important;
  line-height:1.35!important;
  color:#d9defc!important;
}

  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
}

  min-height:104px!important;
  padding:10px 8px 9px!important;
  border-radius:14px!important;
  display:grid!important;
  place-items:center!important;
  align-content:center!important;
  gap:4px!important;
  text-align:center!important;
  background:
    radial-gradient(circle at 50% 58%,rgba(112,82,255,.26),transparent 38%),
    linear-gradient(180deg,rgba(15,25,66,.96),rgba(8,14,42,.98))!important;
  border:1px solid rgba(132,105,255,.42)!important;
  color:#f8f7ff!important;
  box-shadow:0 8px 18px rgba(2,8,26,.24)!important;
  opacity:1!important;
  filter:none!important;
}

  opacity:1!important;
  filter:none!important;
}

  opacity:.6!important;
}

  width:64px!important;
  height:64px!important;
  max-width:78%!important;
  object-fit:contain!important;
  display:block!important;
  margin:0 auto!important;
  background:transparent!important;
  background-color:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

  margin:0!important;
  font-size:12px!important;
  line-height:1.1!important;
  color:#fff!important;
  text-shadow:0 2px 8px rgba(0,0,0,.42)!important;
}

  grid-column:1 / -1!important;
  min-height:74px!important;
  padding:12px 14px!important;
  border-radius:16px!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  grid-template-rows:auto auto!important;
  align-items:center!important;
  justify-items:start!important;
  column-gap:12px!important;
  row-gap:2px!important;
  background:
    radial-gradient(circle at 16% 50%,rgba(118,79,255,.30),transparent 30%),
    linear-gradient(180deg,rgba(16,25,65,.97),rgba(8,14,42,.99))!important;
  border-color:rgba(139,104,255,.68)!important;
}

  grid-row:1 / 3!important;
  width:48px!important;
  height:48px!important;
  margin:0!important;
}

  font-size:16px!important;
  line-height:1.05!important;
}

  display:block!important;
  margin:0!important;
  font-size:11px!important;
  line-height:1.2!important;
  color:#cfd5ff!important;
}

  grid-column:3!important;
  grid-row:1 / 3!important;
  font-style:normal!important;
  color:#f8f7ff!important;
  font-size:22px!important;
  opacity:.9!important;
}

@media(max-width:1180px){
  .hatchery-match-page .hatchery-game-shell{
    grid-template-columns:280px minmax(0,1fr)!important;
  }
}

@media(max-width:860px){
  .hatchery-match-page .hatchery-game-shell{
    grid-template-columns:1fr!important;
  }

    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

@media(max-width:520px){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

    grid-column:1 / -1!important;
  }
}
/* Global modal viewport alignment: keep Dragon Studio popups visible immediately. */
html.modal-open,
body.modal-open{
  overflow:hidden!important;
}

.modal-backdrop:not(.hidden),
#modalBackdrop:not(.hidden){
  position:fixed!important;
  inset:0!important;
  z-index:9000!important;
  overflow:hidden!important;
}

.modal:not(.hidden),
.modal.wide:not(.hidden),
#comingSoonModal:not(.hidden),
#settingsModal:not(.hidden),
#upgradeModal:not(.hidden),
#paymentModal:not(.hidden),
#progressModal:not(.hidden),
#supportModal:not(.hidden),
#hatcherGuideModal:not(.hidden),
.how-modal:not(.hidden){
  position:fixed!important;
  top:clamp(40px,7vh,80px)!important;
  left:50%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translateX(-50%)!important;
  width:min(760px,calc(100vw - 32px))!important;
  max-height:calc(100vh - 80px)!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  z-index:9010!important;
  margin:0!important;
  box-sizing:border-box!important;
}

.modal.wide:not(.hidden),
#progressModal.modal.wide:not(.hidden),
#comingSoonModal:not(.hidden):has(.full-collection-modal),
#comingSoonModal:not(.hidden):has(.avatar-picker-modal),
#comingSoonModal:not(.hidden):has(.coin-store-modal),
#comingSoonModal:not(.hidden):has(.share-builder),
#comingSoonModal:not(.hidden):has(.dragon-detail-card),
#comingSoonModal:not(.hidden):has(.badge-detail-card){
  width:min(980px,calc(100vw - 32px))!important;
}

#comingSoonModal:not(.hidden) #comingSoonText,
#comingSoonModal:not(.hidden) .full-collection-modal,
#comingSoonModal:not(.hidden) .avatar-picker-modal,
#comingSoonModal:not(.hidden) .coin-store-modal,
#comingSoonModal:not(.hidden) .share-builder{
  max-height:none!important;
  overflow:visible!important;
}

.modal>.modal-close,
.modal .modal-close,
.modal-content>.modal-close,
.how-modal .modal-close,
.hatcher-guide-modal .modal-close,
.hatcher-guide-modal>.modal-close,
.coin-guide-modal .modal-close,
.coin-guide-close,
.hatcher-guide-close,
.game-how-close,
.feed-confirmation-close{
  position:absolute!important;
  top:18px!important;
  right:18px!important;
  bottom:auto!important;
  left:auto!important;
  z-index:10000!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}

.modal>.modal-close,
.modal .modal-close,
.modal-content>.modal-close{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
  display:grid!important;
  place-items:center!important;
  line-height:1!important;
}

.modal h2,
#comingSoonTitle,
.how-modal-head,
.hatcher-guide-modal h2,
.coin-guide-header,
.game-how-modal h2{
  padding-right:58px!important;
}

#comingSoonModal.egg-unlocked-modal-shell .modal-close,
#comingSoonModal.egg-hatched-modal-shell .modal-close,
#comingSoonModal.profile-name-modal-shell .modal-close{
  left:auto!important;
  right:22px!important;
  top:22px!important;
}

#setMenu .range-popover-panel,
#setMenu .study-setting-modal{
  position:relative!important;
}

#setMenu .range-popover-header{
  padding-right:64px!important;
}

#setMenu .range-close{
  position:absolute!important;
  top:18px!important;
  right:18px!important;
  bottom:auto!important;
  left:auto!important;
  z-index:10000!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}

@media(max-width:760px){
  .modal:not(.hidden),
  .modal.wide:not(.hidden),
  #comingSoonModal:not(.hidden),
  #settingsModal:not(.hidden),
  #upgradeModal:not(.hidden),
  #paymentModal:not(.hidden),
  #progressModal:not(.hidden),
  #supportModal:not(.hidden),
  #hatcherGuideModal:not(.hidden),
  .how-modal:not(.hidden){
    top:16px!important;
    width:calc(100vw - 24px)!important;
    max-height:calc(100vh - 32px)!important;
  }

  .modal>.modal-close,
  .modal .modal-close,
  .modal-content>.modal-close,
  .how-modal .modal-close,
  .hatcher-guide-modal .modal-close,
  .hatcher-guide-modal>.modal-close,
  .coin-guide-modal .modal-close,
  .coin-guide-close,
  .hatcher-guide-close,
  .game-how-close,
  .feed-confirmation-close,
  #setMenu .range-close{
    top:12px!important;
    right:12px!important;
    left:auto!important;
  }

  .modal h2,
  #comingSoonTitle,
  .how-modal-head,
  .hatcher-guide-modal h2,
  .coin-guide-header,
  .game-how-modal h2{
    padding-right:52px!important;
  }

  #setMenu .range-popover-header{
    padding-right:56px!important;
  }
}


/* Fantasy share card export and public share view. */
body .share-card-preview.share-card-fantasy{
  position:relative!important;
  width:min(360px,100%)!important;
  aspect-ratio:4/5!important;
  margin:0 auto!important;
  padding:18px!important;
  overflow:hidden!important;
  border-radius:18px!important;
  border:2px solid rgba(255,255,255,.82)!important;
  background-image:linear-gradient(rgba(7,12,48,.18),rgba(7,12,48,.24)),var(--share-card-bg)!important;
  background-size:cover!important;
  background-position:center!important;
  box-shadow:0 18px 50px rgba(16,24,80,.28)!important;
  color:#06104e!important;
  text-align:center!important;
}
body .share-card-preview.share-card-fantasy::before{
  content:"";
  position:absolute;
  inset:10px;
  border:2px solid rgba(255,255,255,.72);
  border-radius:14px;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(91,103,220,.35);
}
body .share-card-preview.share-card-fantasy .share-card-inner{
  position:relative;
  z-index:1;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:20px 18px 18px;
  border-radius:14px;
}
body .share-card-preview.share-card-fantasy .share-card-inner::before{
  content:"";
  position:absolute;
  top:54px;
  left:7%;
  right:7%;
  height:47%;
  border-radius:18px;
  background:rgba(255,255,255,.67);
  border:1px solid rgba(255,255,255,.5);
  z-index:-1;
}
body .share-card-preview.share-card-fantasy .share-card-top-gem{
  width:34px;
  height:34px;
  margin:-4px auto 4px;
  transform:rotate(45deg);
  border-radius:8px;
  background:linear-gradient(135deg,#56e4ff,#5847ee 62%,#fbfbff);
  border:2px solid rgba(255,255,255,.82);
  box-shadow:0 4px 18px rgba(59,76,230,.42);
}
body .share-card-preview.share-card-fantasy .share-card-logo{
  font-size:clamp(2rem,9vw,3.4rem)!important;
  line-height:1!important;
  font-weight:900!important;
  color:#3746d6!important;
  text-shadow:0 2px 0 #fff,0 8px 18px rgba(47,58,201,.28)!important;
}
body .share-card-preview.share-card-fantasy .share-card-label{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:34px!important;
  padding:6px 18px!important;
  margin:13px 0 12px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#5b63df,#7678ef)!important;
  color:#fff!important;
  font-size:.95rem!important;
  font-weight:800!important;
  letter-spacing:0!important;
}
body .share-card-preview.share-card-fantasy h3{
  max-width:88%!important;
  margin:0 auto 8px!important;
  color:#071052!important;
  font-size:clamp(1.6rem,6vw,2.75rem)!important;
  line-height:1.04!important;
  font-weight:900!important;
  letter-spacing:0!important;
}
body .share-card-preview.share-card-fantasy p{
  max-width:82%!important;
  margin:0 auto!important;
  color:#4337bf!important;
  font-size:clamp(.95rem,3vw,1.35rem)!important;
  line-height:1.25!important;
  font-weight:800!important;
}
body .share-card-preview.share-card-fantasy .share-card-divider{
  width:38%;
  height:2px;
  margin:10px 0 8px;
  background:linear-gradient(90deg,transparent,#5d63db,transparent);
}
body .share-card-preview.share-card-fantasy .share-card-item-image{
  width:min(68%,260px)!important;
  max-height:34%!important;
  margin:auto auto 12px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 14px 16px rgba(17,18,54,.25));
  background:transparent!important;
  border:0!important;
}
body .share-card-preview.share-card-fantasy footer{
  width:88%!important;
  margin-top:auto!important;
  padding:10px 14px!important;
  border-radius:999px!important;
  background:rgba(22,18,111,.78)!important;
  color:#fff!important;
  font-size:clamp(.78rem,2.6vw,1.05rem)!important;
  line-height:1.2!important;
  font-weight:800!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);
}
.share-link-fallback{
  width:100%;
  margin-top:10px;
  padding:12px 14px;
  border:1px solid rgba(89,93,220,.3);
  border-radius:10px;
  color:#17205f;
  font-weight:700;
}
.share-page{
  min-height:calc(100vh - 90px);
  padding:40px 16px 64px;
  background:#08113d;
}
.share-page-shell{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}
body .share-card-preview.share-card-fantasy.share-card-page-preview{
  width:min(540px,calc(100vw - 32px))!important;
}
.share-page-open{
  border:0;
  border-radius:999px;
  padding:12px 22px;
  background:#fff;
  color:#101758;
  font-weight:900;
  box-shadow:0 12px 28px rgba(0,0,0,.22);
  cursor:pointer;
}
@media (max-width:560px){
  body .share-card-preview.share-card-fantasy{
    width:min(320px,100%)!important;
    padding:14px!important;
  }
  body .share-card-preview.share-card-fantasy .share-card-inner{
    padding:16px 12px 14px;
  }
}

/* Share card final layout pass: preview mirrors the exported 1080x1350 card. */
body .share-card-preview.share-card-fantasy{
  width:min(520px,100%)!important;
  min-width:0!important;
  padding:22px!important;
  border-radius:22px!important;
  background-image:linear-gradient(rgba(255,255,255,.08),rgba(12,18,70,.14)),var(--share-card-bg)!important;
  background-size:cover!important;
  background-position:center!important;
  box-shadow:0 24px 70px rgba(16,24,80,.26)!important;
}
body .share-card-preview.share-card-fantasy::before{
  inset:14px!important;
  border-radius:18px!important;
  border-color:rgba(255,255,255,.82)!important;
  box-shadow:inset 0 0 0 1px rgba(91,103,220,.42)!important;
}
body .share-card-preview.share-card-fantasy .share-card-inner{
  padding:26px 26px 20px!important;
  gap:0!important;
}
body .share-card-preview.share-card-fantasy .share-card-inner::before{
  display:none!important;
}
body .share-card-preview.share-card-fantasy .share-card-top-gem{
  width:38px!important;
  height:38px!important;
  margin:-2px auto 10px!important;
}
body .share-card-preview.share-card-fantasy .share-card-text-panel{
  width:86%!important;
  min-height:40%!important;
  padding:18px 18px 20px!important;
  border-radius:24px!important;
  background:rgba(255,255,255,.72)!important;
  border:1px solid rgba(255,255,255,.72)!important;
  box-shadow:0 12px 42px rgba(255,255,255,.22)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
}
body .share-card-preview.share-card-fantasy .share-card-logo{
  font-size:clamp(2.7rem,5vw,4.2rem)!important;
  line-height:.95!important;
  margin:0 0 14px!important;
}
body .share-card-preview.share-card-fantasy .share-card-label{
  min-height:38px!important;
  padding:7px 24px!important;
  margin:0 0 16px!important;
  font-size:clamp(1rem,1.8vw,1.35rem)!important;
  box-shadow:0 8px 22px rgba(56,62,188,.24)!important;
}
body .share-card-preview.share-card-fantasy h3{
  max-width:92%!important;
  margin:0 auto 12px!important;
  font-size:clamp(2.15rem,4.2vw,3.45rem)!important;
  line-height:1.05!important;
  color:#071052!important;
}
body .share-card-preview.share-card-fantasy .share-card-subtitle{
  max-width:90%!important;
  margin:0 auto 8px!important;
  color:#4435c4!important;
  font-size:clamp(1.05rem,2.1vw,1.55rem)!important;
  line-height:1.22!important;
  font-weight:900!important;
}
body .share-card-preview.share-card-fantasy .share-card-level{
  color:#4435c4!important;
  font-size:clamp(.95rem,1.65vw,1.25rem)!important;
  line-height:1.2!important;
  font-weight:900!important;
}
body .share-card-preview.share-card-fantasy .share-card-divider{
  display:none!important;
}
body .share-card-preview.share-card-fantasy .share-card-item-image{
  width:min(76%,340px)!important;
  max-height:38%!important;
  margin:auto auto 18px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 16px 18px rgba(17,18,54,.28))!important;
}
body .share-card-preview.share-card-fantasy footer{
  width:92%!important;
  margin-top:0!important;
  padding:12px 18px!important;
  border-radius:999px!important;
  background:rgba(22,18,111,.82)!important;
  font-size:clamp(.9rem,1.7vw,1.18rem)!important;
  line-height:1.2!important;
}
body .share-card-preview.share-card-fantasy.share-card-page-preview{
  width:min(620px,calc(100vw - 32px))!important;
}
@media (max-width:700px){
  body .share-card-preview.share-card-fantasy{
    width:min(420px,100%)!important;
    padding:16px!important;
  }
  body .share-card-preview.share-card-fantasy .share-card-inner{
    padding:18px 14px 16px!important;
  }
  body .share-card-preview.share-card-fantasy .share-card-text-panel{
    width:90%!important;
    padding:14px 12px 16px!important;
  }
  body .share-card-preview.share-card-fantasy .share-card-logo{
    font-size:2.45rem!important;
  }
  body .share-card-preview.share-card-fantasy h3{
    font-size:2rem!important;
  }
}

/* Create Share Card modal preview only: smaller display, export canvas unchanged. */
#comingSoonModal .share-builder .share-card-preview.share-card-fantasy:not(.share-card-page-preview){
  width:min(260px,100%)!important;
  padding:10px!important;
  border-radius:14px!important;
  box-shadow:0 14px 36px rgba(16,24,80,.22)!important;
}
#comingSoonModal .share-builder .share-card-preview.share-card-fantasy:not(.share-card-page-preview)::before{
  inset:7px!important;
  border-radius:11px!important;
  border-width:1px!important;
}
#comingSoonModal .share-builder .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-inner{
  padding:11px 10px 10px!important;
}
#comingSoonModal .share-builder .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-top-gem{
  width:18px!important;
  height:18px!important;
  margin:0 auto 5px!important;
  border-width:1px!important;
  border-radius:4px!important;
}
#comingSoonModal .share-builder .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-text-panel{
  width:88%!important;
  min-height:38%!important;
  padding:8px 8px 9px!important;
  border-radius:13px!important;
}
#comingSoonModal .share-builder .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-logo{
  font-size:1.28rem!important;
  line-height:.95!important;
  margin:0 0 6px!important;
  text-shadow:0 1px 0 #fff,0 4px 9px rgba(47,58,201,.22)!important;
}
#comingSoonModal .share-builder .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-label{
  min-height:17px!important;
  padding:3px 10px!important;
  margin:0 0 7px!important;
  font-size:.5rem!important;
  line-height:1.1!important;
}
#comingSoonModal .share-builder .share-card-preview.share-card-fantasy:not(.share-card-page-preview) h3{
  max-width:94%!important;
  margin:0 auto 5px!important;
  font-size:.92rem!important;
  line-height:1.07!important;
  letter-spacing:0!important;
}
#comingSoonModal .share-builder .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-subtitle{
  max-width:92%!important;
  margin:0 auto 3px!important;
  font-size:.48rem!important;
  line-height:1.18!important;
  letter-spacing:0!important;
}
#comingSoonModal .share-builder .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-level{
  font-size:.44rem!important;
  line-height:1.16!important;
  letter-spacing:0!important;
}
#comingSoonModal .share-builder .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-item-image{
  width:min(78%,178px)!important;
  max-height:39%!important;
  margin:auto auto 8px!important;
  filter:drop-shadow(0 8px 9px rgba(17,18,54,.24))!important;
}
#comingSoonModal .share-builder .share-card-preview.share-card-fantasy:not(.share-card-page-preview) footer{
  width:92%!important;
  padding:5px 8px!important;
  font-size:.44rem!important;
  line-height:1.18!important;
}
@media (max-width:560px){
  #comingSoonModal .share-builder .share-card-preview.share-card-fantasy:not(.share-card-page-preview){
    width:min(240px,100%)!important;
  }
}

/* Create Share Card dark fantasy modal and preview refresh. */
#comingSoonModal.share-builder-modal-shell{
  width:min(1100px,calc(100vw - 48px))!important;
  max-height:calc(100vh - 48px)!important;
  overflow:auto!important;
  padding:30px 34px 26px!important;
  border-radius:26px!important;
  border:1px solid rgba(181,115,255,.85)!important;
  background:
    radial-gradient(circle at 20% 0%,rgba(128,70,255,.30),transparent 28%),
    radial-gradient(circle at 82% 18%,rgba(65,209,255,.13),transparent 28%),
    linear-gradient(145deg,rgba(9,12,54,.98),rgba(17,14,68,.98) 52%,rgba(8,10,43,.98))!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 28px 90px rgba(0,0,0,.58),0 0 48px rgba(133,71,255,.34)!important;
  color:#f9f6ff!important;
}
#comingSoonModal.share-builder-modal-shell .modal-close{
  width:48px!important;
  height:48px!important;
  top:22px!important;
  right:22px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  line-height:1!important;
  border-radius:50%!important;
  border:1px solid rgba(190,132,255,.8)!important;
  background:rgba(65,35,130,.82)!important;
  color:#fff!important;
  box-shadow:0 0 22px rgba(150,78,255,.38)!important;
}
#comingSoonModal.share-builder-modal-shell #comingSoonTitle{
  margin:0 58px 4px!important;
  padding:0!important;
  color:#fff7ff!important;
  font-size:clamp(2.2rem,4vw,3.35rem)!important;
  line-height:1!important;
  text-align:center!important;
  text-shadow:0 0 22px rgba(172,88,255,.68)!important;
}
#comingSoonModal.share-builder-modal-shell #comingSoonTitle::before{
  content:"";
  display:inline-block;
  width:.72em;
  height:.72em;
  margin:0 .32em .02em 0;
  vertical-align:middle;
  transform:rotate(45deg);
  border-radius:8px;
  background:linear-gradient(135deg,#8ff5ff,#8d4dff 56%,#fff4be);
  box-shadow:0 0 18px rgba(180,91,255,.72);
}
#comingSoonModal.share-builder-modal-shell #comingSoonText{
  display:block!important;
  max-height:none!important;
  margin:0!important;
  overflow:visible!important;
  color:#dcd6ff!important;
}
#comingSoonModal.share-builder-modal-shell .share-builder{
  display:grid!important;
  gap:18px!important;
}
#comingSoonModal.share-builder-modal-shell .share-builder-subtitle{
  margin:0 auto 4px!important;
  max-width:720px!important;
  color:#dcd6ff!important;
  font-size:1.02rem!important;
  line-height:1.35!important;
  text-align:center!important;
}
#comingSoonModal.share-builder-modal-shell .share-builder section{
  margin:0!important;
}
#comingSoonModal.share-builder-modal-shell .share-builder h3{
  display:grid!important;
  grid-template-columns:auto minmax(40px,1fr) auto minmax(40px,1fr)!important;
  align-items:center!important;
  gap:12px!important;
  margin:0 0 10px!important;
  color:#dcb8ff!important;
  font-size:1.05rem!important;
  line-height:1.2!important;
  font-weight:800!important;
}
#comingSoonModal.share-builder-modal-shell .share-builder h3::before,
#comingSoonModal.share-builder-modal-shell .share-builder h3::after{
  content:"";
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(174,94,255,.55),transparent);
}
#comingSoonModal.share-builder-modal-shell .share-builder h3 span{
  width:12px;
  height:12px;
  transform:rotate(45deg);
  border-radius:3px;
  background:linear-gradient(135deg,#8cf4ff,#8b4fff);
  box-shadow:0 0 12px rgba(157,83,255,.78);
}
#comingSoonModal.share-builder-modal-shell .share-type-row{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:0!important;
  border:1px solid rgba(134,103,226,.55)!important;
  border-radius:14px!important;
  overflow:hidden!important;
  background:rgba(6,9,45,.56)!important;
}
#comingSoonModal.share-builder-modal-shell .share-type-row button{
  min-height:50px!important;
  border:0!important;
  border-right:1px solid rgba(134,103,226,.38)!important;
  border-radius:0!important;
  background:rgba(12,14,60,.55)!important;
  color:#e9e4ff!important;
  font-size:.96rem!important;
  font-weight:850!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  cursor:pointer!important;
}
#comingSoonModal.share-builder-modal-shell .share-type-row button:last-child{
  border-right:0!important;
}
#comingSoonModal.share-builder-modal-shell .share-type-row button.active{
  background:linear-gradient(135deg,#8f35ff,#684ef0)!important;
  box-shadow:inset 0 0 0 2px rgba(238,210,255,.55),0 0 24px rgba(155,74,255,.48)!important;
  color:#fff!important;
}
#comingSoonModal.share-builder-modal-shell .share-tab-icon{
  width:20px!important;
  height:20px!important;
  object-fit:contain!important;
}
#comingSoonModal.share-builder-modal-shell .share-item-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
  max-height:290px!important;
  overflow:auto!important;
  padding:4px 6px 6px!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(189,143,255,.9) rgba(255,255,255,.08)!important;
}
#comingSoonModal.share-builder-modal-shell .share-item-grid button{
  position:relative!important;
  min-height:124px!important;
  padding:14px 12px 12px!important;
  border-radius:14px!important;
  border:1px solid rgba(140,115,232,.46)!important;
  background:linear-gradient(150deg,rgba(15,19,72,.82),rgba(22,17,75,.62))!important;
  color:#f7f4ff!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  cursor:pointer!important;
}
#comingSoonModal.share-builder-modal-shell .share-item-grid button.selected{
  border-color:#b77bff!important;
  box-shadow:0 0 22px rgba(158,81,255,.58),inset 0 0 0 2px rgba(224,195,255,.45)!important;
  background:linear-gradient(150deg,rgba(50,23,112,.9),rgba(16,18,74,.7))!important;
}
#comingSoonModal.share-builder-modal-shell .share-item-grid button > img:first-child{
  width:72px!important;
  height:72px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.34))!important;
}
#comingSoonModal.share-builder-modal-shell .share-item-grid button span{
  color:#fff!important;
  font-size:.9rem!important;
  line-height:1.1!important;
  font-weight:850!important;
  text-align:center!important;
}
#comingSoonModal.share-builder-modal-shell .share-item-check{
  position:absolute!important;
  top:10px!important;
  right:10px!important;
  width:28px!important;
  height:28px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:50%!important;
  background:linear-gradient(135deg,#8b57ff,#5c4ee8)!important;
  box-shadow:0 0 16px rgba(157,83,255,.7)!important;
}
#comingSoonModal.share-builder-modal-shell .share-item-check img{
  width:16px!important;
  height:16px!important;
}
#comingSoonModal.share-builder-modal-shell .share-preview-section{
  padding-top:2px!important;
}
body .share-card-preview.share-card-fantasy{
  border-color:rgba(255,217,123,.92)!important;
  background-image:
    radial-gradient(circle at 50% 48%,rgba(171,82,255,.22),transparent 26%),
    linear-gradient(180deg,rgba(7,8,44,.10),rgba(5,6,34,.42)),
    var(--share-card-bg)!important;
  box-shadow:0 20px 58px rgba(0,0,0,.32),0 0 36px rgba(147,79,255,.22)!important;
  color:#fff!important;
}
body .share-card-preview.share-card-fantasy::before{
  border-color:rgba(255,217,123,.78)!important;
  box-shadow:inset 0 0 0 1px rgba(180,93,255,.6),0 0 26px rgba(255,217,123,.18)!important;
}
body .share-card-preview.share-card-fantasy .share-card-top-gem{
  background:linear-gradient(135deg,#aef9ff,#8c50ff 56%,#fff0a6)!important;
  border-color:rgba(255,232,167,.92)!important;
}
body .share-card-preview.share-card-fantasy .share-card-text-panel{
  width:90%!important;
  min-height:auto!important;
  padding:12px 14px 16px!important;
  background:rgba(7,8,44,.42)!important;
  border:1px solid rgba(255,217,123,.30)!important;
  box-shadow:0 0 32px rgba(134,68,255,.25)!important;
  backdrop-filter:blur(2px)!important;
}
body .share-card-preview.share-card-fantasy .share-card-logo{
  color:#fff6df!important;
  text-shadow:0 0 14px rgba(169,92,255,.9),0 2px 0 rgba(64,31,128,.65)!important;
}
body .share-card-preview.share-card-fantasy .share-card-label{
  background:linear-gradient(135deg,#8a32ff,#6a53f0)!important;
  border:1px solid rgba(255,220,140,.55)!important;
  color:#fff!important;
}
body .share-card-preview.share-card-fantasy h3{
  color:#fff9ff!important;
  text-shadow:0 0 13px rgba(134,70,255,.8),0 2px 8px rgba(0,0,0,.65)!important;
}
body .share-card-preview.share-card-fantasy .share-card-subtitle,
body .share-card-preview.share-card-fantasy .share-card-level{
  color:#ffe48d!important;
  text-shadow:0 2px 8px rgba(0,0,0,.55)!important;
}
body .share-card-preview.share-card-fantasy footer{
  background:rgba(12,9,58,.88)!important;
  border:1px solid rgba(255,217,123,.62)!important;
}
#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview){
  width:min(560px,100%)!important;
  padding:18px!important;
  border-radius:20px!important;
}
#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-inner{
  padding:20px 20px 16px!important;
}
#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-logo{
  font-size:2.45rem!important;
  margin-bottom:8px!important;
}
#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-label{
  min-height:28px!important;
  padding:4px 16px!important;
  margin-bottom:10px!important;
  font-size:.78rem!important;
}
#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) h3{
  font-size:1.45rem!important;
  line-height:1.06!important;
  margin-bottom:7px!important;
}
#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-subtitle{
  font-size:.82rem!important;
}
#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-level{
  font-size:.76rem!important;
}
#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-item-image{
  width:min(68%,250px)!important;
  max-height:36%!important;
  margin:auto auto 10px!important;
}
#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) footer{
  padding:8px 12px!important;
  font-size:.72rem!important;
}
#comingSoonModal.share-builder-modal-shell .share-builder-actions{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px!important;
  margin-top:2px!important;
}
#comingSoonModal.share-builder-modal-shell .share-builder-actions button{
  min-height:50px!important;
  border-radius:12px!important;
  border:1px solid rgba(142,116,235,.55)!important;
  font-size:.98rem!important;
  font-weight:900!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
}
#comingSoonModal.share-builder-modal-shell .share-builder-actions button.primary-wide{
  background:linear-gradient(135deg,#9a35ff,#6b49ec)!important;
  color:#fff!important;
  box-shadow:0 0 24px rgba(154,68,255,.42)!important;
}
#comingSoonModal.share-builder-modal-shell .share-builder-actions button.secondary-wide{
  background:rgba(14,17,65,.72)!important;
  color:#fff!important;
}
#comingSoonModal.share-builder-modal-shell .share-builder-actions img{
  width:22px!important;
  height:22px!important;
}
#comingSoonModal.share-builder-modal-shell .share-close-icon{
  width:25px!important;
  height:25px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid rgba(230,216,255,.7)!important;
  border-radius:50%!important;
  line-height:1!important;
}
@media (max-width:820px){
  #comingSoonModal.share-builder-modal-shell{
    width:calc(100vw - 24px)!important;
    padding:24px 18px 20px!important;
  }
  #comingSoonModal.share-builder-modal-shell .share-item-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #comingSoonModal.share-builder-modal-shell .share-builder-actions,
  #comingSoonModal.share-builder-modal-shell .share-type-row{
    grid-template-columns:1fr!important;
    border-radius:14px!important;
  }
  #comingSoonModal.share-builder-modal-shell .share-type-row button{
    border-right:0!important;
    border-bottom:1px solid rgba(134,103,226,.38)!important;
  }
  #comingSoonModal.share-builder-modal-shell .share-type-row button:last-child{
    border-bottom:0!important;
  }
}

/* Instant Hatch congratulations popup polish: clean one-line dragon name and one scrollbar. */
#comingSoonModal.egg-hatched-modal-shell{
  overflow:hidden!important;
}
#comingSoonModal.egg-hatched-modal-shell #comingSoonText{
  max-height:none!important;
  overflow:visible!important;
}
#comingSoonModal.egg-hatched-modal-shell .egg-hatched-modal-body{
  max-height:calc(100vh - 48px)!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(214,204,255,.75) rgba(255,255,255,.08)!important;
}
#comingSoonModal.egg-hatched-modal-shell .egg-hatched-modal-body::-webkit-scrollbar{
  width:10px!important;
}
#comingSoonModal.egg-hatched-modal-shell .egg-hatched-modal-body::-webkit-scrollbar-track{
  background:rgba(255,255,255,.08)!important;
  border-radius:999px!important;
}
#comingSoonModal.egg-hatched-modal-shell .egg-hatched-modal-body::-webkit-scrollbar-thumb{
  background:rgba(214,204,255,.75)!important;
  border-radius:999px!important;
}
#comingSoonModal.egg-hatched-modal-shell .egg-hatched-dragon-card{
  gap:10px!important;
}
#comingSoonModal.egg-hatched-modal-shell .egg-hatched-dragon-card b{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:calc(100% - 28px)!important;
  margin:0 auto!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#dbeafe!important;
  font-size:14px!important;
  line-height:1.12!important;
  font-weight:950!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-shadow:0 0 10px rgba(147,197,253,.75),0 2px 8px rgba(0,0,0,.48)!important;
}
@media(max-width:760px){
  #comingSoonModal.egg-hatched-modal-shell .egg-hatched-dragon-card b{
    font-size:13px!important;
    white-space:nowrap!important;
  }
}

/* Share the Magic preview: show the real hatch-progress final egg asset cleanly. */
body.dragon-studio-mode .ds-dashboard .ds-share > .share-magic-img{
  display:block!important;
  width:68px!important;
  height:68px!important;
  flex:0 0 auto!important;
  object-fit:contain!important;
  object-position:center!important;
  background:transparent!important;
  background-color:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
/* Egg Unlocked popup text scale: keep the existing art/background, reduce wording. */
#comingSoonModal.egg-unlocked-modal-shell .egg-unlocked-copy{
  gap:10px!important;
}
#comingSoonModal.egg-unlocked-modal-shell .egg-unlocked-kicker{
  min-height:18px!important;
  padding:0 10px!important;
  font-size:10px!important;
  line-height:1.1!important;
}
#comingSoonModal.egg-unlocked-modal-shell .egg-unlocked-copy h3{
  font-size:clamp(20px,2.1vw,28px)!important;
  line-height:1.05!important;
}
#comingSoonModal.egg-unlocked-modal-shell .egg-unlocked-copy h3::before,
#comingSoonModal.egg-unlocked-modal-shell .egg-unlocked-copy h3::after{
  width:39px!important;
}
#comingSoonModal.egg-unlocked-modal-shell .egg-unlocked-copy h3::before{right:calc(100% + 10px)!important;}
#comingSoonModal.egg-unlocked-modal-shell .egg-unlocked-copy h3::after{left:calc(100% + 10px)!important;}
#comingSoonModal.egg-unlocked-modal-shell .egg-unlocked-copy p{
  max-width:360px!important;
  font-size:clamp(10px,1.1vw,12px)!important;
  line-height:1.35!important;
}
#comingSoonModal.egg-unlocked-modal-shell .egg-unlocked-actions{
  width:min(320px,100%)!important;
  gap:8px!important;
  margin-top:2px!important;
}
#comingSoonModal.egg-unlocked-modal-shell .egg-unlocked-primary,
#comingSoonModal.egg-unlocked-modal-shell .egg-unlocked-secondary{
  min-height:34px!important;
  font-size:11px!important;
  line-height:1.1!important;
}
@media(max-width:760px){
  #comingSoonModal.egg-unlocked-modal-shell .egg-unlocked-copy h3{
    font-size:22px!important;
  }
  #comingSoonModal.egg-unlocked-modal-shell .egg-unlocked-copy p{
    font-size:10px!important;
  }
  #comingSoonModal.egg-unlocked-modal-shell .egg-unlocked-primary,
  #comingSoonModal.egg-unlocked-modal-shell .egg-unlocked-secondary{
    min-height:34px!important;
    font-size:11px!important;
  }
}
/* Game word-list modal visibility fix.
   The game-page child z-index rule should not trap these fixed overlays inside the game canvas. */
.hatchelite-game-page.stoke-fire-page > .stoke-word-list-backdrop,
.hatchelite-game-page.forge-scale-page > .forge-word-list-backdrop,
.hatchelite-game-page.dragon-flight-page > .flight-word-list-backdrop,
.hatchelite-game-page.hatchery-match-page > .hatchery-word-list-backdrop,
.hatchelite-game-page.term-definition-page > .term-word-list-backdrop,
.hatchelite-game-page.dragons-whisper-page > .whisper-word-list-backdrop{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  z-index:2147483000!important;
  display:grid!important;
  place-items:center!important;
  padding:24px!important;
  overflow:auto!important;
  background:rgba(3,6,24,.72)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}
.hatchelite-game-page.stoke-fire-page > .stoke-word-list-backdrop > .stoke-word-list-modal,
.hatchelite-game-page.forge-scale-page > .forge-word-list-backdrop > .forge-word-list-modal,
.hatchelite-game-page.dragon-flight-page > .flight-word-list-backdrop > .flight-word-list-modal,
.hatchelite-game-page.hatchery-match-page > .hatchery-word-list-backdrop > .hatchery-word-list-modal,
.hatchelite-game-page.term-definition-page > .term-word-list-backdrop > .term-word-list-modal,
.hatchelite-game-page.dragons-whisper-page > .whisper-word-list-backdrop > .whisper-word-list-modal{
  position:relative!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
  z-index:2147483001!important;
  width:min(860px,calc(100vw - 32px))!important;
  max-height:calc(100vh - 56px)!important;
  overflow:auto!important;
  margin:0!important;
  color:#071044!important;
}
@media(max-width:640px){
  .hatchelite-game-page.stoke-fire-page > .stoke-word-list-backdrop,
  .hatchelite-game-page.forge-scale-page > .forge-word-list-backdrop,
  .hatchelite-game-page.dragon-flight-page > .flight-word-list-backdrop,
  .hatchelite-game-page.hatchery-match-page > .hatchery-word-list-backdrop,
  .hatchelite-game-page.term-definition-page > .term-word-list-backdrop,
  .hatchelite-game-page.dragons-whisper-page > .whisper-word-list-backdrop{
    padding:12px!important;
  }
  .hatchelite-game-page.stoke-fire-page > .stoke-word-list-backdrop > .stoke-word-list-modal,
  .hatchelite-game-page.forge-scale-page > .forge-word-list-backdrop > .forge-word-list-modal,
  .hatchelite-game-page.dragon-flight-page > .flight-word-list-backdrop > .flight-word-list-modal,
  .hatchelite-game-page.hatchery-match-page > .hatchery-word-list-backdrop > .hatchery-word-list-modal,
  .hatchelite-game-page.term-definition-page > .term-word-list-backdrop > .term-word-list-modal,
  .hatchelite-game-page.dragons-whisper-page > .whisper-word-list-backdrop > .whisper-word-list-modal{
    width:calc(100vw - 24px)!important;
    max-height:calc(100vh - 24px)!important;
  }
}

/* Compact game page headers: title/subtitle/stat area only. */
.stoke-title-block,
.forge-title-block,
.flight-title-block,
.hatchery-title-block,
.term-title-block,
.whisper-title-block{
  padding:16px 20px 8px!important;
  margin:0 auto!important;
  text-align:center!important;
}
.stoke-title-block h1,
.forge-title-block h1,
.flight-title-block h1,
.hatchery-title-block h1,
.term-title-block h1,
.whisper-title-block h1{
  font-size:clamp(29px,3.24vw,43px)!important;
  line-height:1.05!important;
  letter-spacing:0!important;
  margin:0!important;
  font-weight:1000!important;
}
.stoke-title-block p,
.forge-title-block p,
.flight-title-block p,
.hatchery-title-block p,
.term-title-block p,
.whisper-title-block p{
  max-width:780px!important;
  margin:6px auto 0!important;
  font-size:clamp(12px,1.2vw,15px)!important;
  line-height:1.3!important;
  font-weight:700!important;
}
.stoke-stat-row,
.forge-stat-row,
.flight-stat-row,
.hatchery-stat-row,
.term-stat-row,
.whisper-stat-row{
  gap:8px!important;
  margin-top:10px!important;
}
.stoke-stat-pill,
.forge-stat-pill,
.flight-stat-pill,
.hatchery-stat-pill,
.term-stat-pill,
.whisper-stat-pill,
.hatchelite-game-page .game-how-button{
  min-height:34px!important;
  min-width:0!important;
  gap:6px!important;
  padding:5px 11px!important;
  border-radius:999px!important;
  font-size:12px!important;
  line-height:1.1!important;
}
.stoke-stat-pill>img,
.forge-stat-pill>img,
.flight-stat-pill>img,
.hatchery-stat-pill>img,
.term-stat-pill>img,
.whisper-stat-pill>img,
.hatchelite-game-page .game-how-button svg{
  width:18px!important;
  height:18px!important;
}
.stoke-stat-pill strong,
.forge-stat-pill strong,
.flight-stat-pill strong,
.hatchery-stat-pill strong,
.term-stat-pill strong,
.whisper-stat-pill strong{
  font-size:14px!important;
}
.stoke-stat-pill em,
.forge-stat-pill em,
.flight-stat-pill em,
.hatchery-stat-pill em,
.term-stat-pill em,
.whisper-stat-pill em{
  gap:2px!important;
}
.stoke-stat-pill em img,
.forge-stat-pill em img,
.flight-stat-pill em img,
.hatchery-stat-pill em img,
.term-stat-pill em img,
.whisper-stat-pill em img{
  width:14px!important;
  height:14px!important;
}
.stoke-game-shell,
.forge-game-shell,
.flight-game-shell,
.hatchery-game-shell,
.term-game-shell,
.whisper-game-shell{
  margin-top:14px!important;
}
@media(max-width:700px){
  .stoke-title-block,
  .forge-title-block,
  .flight-title-block,
  .hatchery-title-block,
  .term-title-block,
  .whisper-title-block{
    padding:12px 12px 6px!important;
  }
  .stoke-title-block h1,
  .forge-title-block h1,
  .flight-title-block h1,
  .hatchery-title-block h1,
  .term-title-block h1,
  .whisper-title-block h1{
    font-size:24px!important;
  }
  .stoke-title-block p,
  .forge-title-block p,
  .flight-title-block p,
  .hatchery-title-block p,
  .term-title-block p,
  .whisper-title-block p{
    font-size:12px!important;
  }
  .stoke-stat-row,
  .forge-stat-row,
  .flight-stat-row,
  .hatchery-stat-row,
  .term-stat-row,
  .whisper-stat-row{
    gap:6px!important;
  }
  .stoke-stat-pill,
  .forge-stat-pill,
  .flight-stat-pill,
  .hatchery-stat-pill,
  .term-stat-pill,
  .whisper-stat-pill,
  .hatchelite-game-page .game-how-button{
    width:auto!important;
    min-height:32px!important;
    padding:5px 9px!important;
    font-size:11px!important;
  }
}


/* Final shared dark fantasy game completion popup. Applies to every route game completion modal. */
.hatchelite-game-page > .game-completion-backdrop,
.game-completion-backdrop{
  position:fixed!important;
  inset:0!important;
  z-index:2147483200!important;
  display:grid!important;
  place-items:center!important;
  width:100vw!important;
  height:100vh!important;
  padding:24px!important;
  overflow:auto!important;
  background:
    radial-gradient(circle at 50% 42%,rgba(111,64,255,.22),transparent 30%),
    rgba(3,5,22,.78)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}
.game-completion-modal{
  position:relative!important;
  width:min(620px,calc(100vw - 32px))!important;
  max-height:calc(100vh - 48px)!important;
  margin:0!important;
  overflow:auto!important;
  padding:28px 34px 30px!important;
  border-radius:34px!important;
  color:#f8f4ff!important;
  text-align:center!important;
  background:
    radial-gradient(circle at 50% -4%,rgba(255,210,93,.20),transparent 22%),
    radial-gradient(circle at 20% 8%,rgba(146,87,255,.28),transparent 30%),
    linear-gradient(180deg,rgba(35,20,86,.98) 0%,rgba(12,15,52,.98) 54%,rgba(7,10,35,.99) 100%)!important;
  border:1.5px solid rgba(255,199,82,.74)!important;
  box-shadow:
    0 28px 90px rgba(0,0,0,.64),
    0 0 36px rgba(119,72,255,.42),
    inset 0 0 0 1px rgba(180,119,255,.34)!important;
}
.game-completion-modal::before,
.game-completion-modal::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  width:18px!important;
  height:18px!important;
  transform:translateX(-50%) rotate(45deg)!important;
  border:1px solid rgba(255,217,104,.9)!important;
  background:linear-gradient(135deg,#ffe58a,#8d5cff 60%,#2b1b75)!important;
  box-shadow:0 0 18px rgba(255,211,94,.55)!important;
  pointer-events:none!important;
}
.game-completion-modal::before{top:10px!important;}
.game-completion-modal::after{bottom:10px!important;}
.game-completion-modal .completion-reward-image-wrap{
  position:relative!important;
  width:min(390px,88%)!important;
  margin:4px auto 16px!important;
  padding:5px!important;
  overflow:hidden!important;
  border-radius:26px!important;
  background:linear-gradient(135deg,rgba(255,218,100,.78),rgba(151,92,255,.72))!important;
  border:1px solid rgba(255,222,123,.72)!important;
  box-shadow:0 18px 46px rgba(0,0,0,.38),0 0 22px rgba(255,195,72,.24)!important;
}
.game-completion-modal .completion-reward-image,
.game-completion-modal .completion-reward-fallback{
  display:block!important;
  width:100%!important;
  height:clamp(150px,25vw,235px)!important;
  max-height:none!important;
  border-radius:21px!important;
  object-fit:cover!important;
  object-position:center!important;
  background:#10143f!important;
}
.game-completion-modal h2{
  margin:8px 0 6px!important;
  color:#ffe19b!important;
  font-size:clamp(34px,4.8vw,50px)!important;
  line-height:1.02!important;
  font-weight:1000!important;
  text-shadow:0 0 20px rgba(255,198,80,.48),0 3px 0 rgba(64,35,98,.55)!important;
}
.game-completion-modal .completion-reward-summary{
  display:grid!important;
  justify-items:center!important;
  gap:8px!important;
  max-width:520px!important;
  margin:0 auto 18px!important;
}
.game-completion-modal .completion-reward-summary p{
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#eef1ff!important;
  font-size:17px!important;
  line-height:1.34!important;
  font-weight:900!important;
}
.game-completion-modal .completion-reward-summary p:nth-child(2){
  color:#ffd46d!important;
}
.game-completion-modal .completion-coin-badge{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:16px!important;
  width:min(390px,100%)!important;
  min-height:72px!important;
  margin:8px auto 0!important;
  padding:12px 22px!important;
  border-radius:24px!important;
  border:1.5px solid rgba(255,198,72,.86)!important;
  background:linear-gradient(180deg,rgba(54,35,112,.92),rgba(15,18,58,.96))!important;
  color:#fff!important;
  box-shadow:0 0 24px rgba(255,177,43,.28),inset 0 0 24px rgba(255,221,118,.12)!important;
}
.game-completion-modal .completion-coin-badge img{
  width:52px!important;
  height:52px!important;
  object-fit:contain!important;
}
.game-completion-modal .completion-coin-badge b{
  color:#fff!important;
  font-size:clamp(28px,4.2vw,42px)!important;
  line-height:1!important;
  font-weight:1000!important;
  text-shadow:0 0 16px rgba(255,213,105,.48)!important;
}
.game-completion-modal .completion-limit-message{
  color:#ffe5a3!important;
  background:rgba(255,206,89,.10)!important;
  border:1px solid rgba(255,206,89,.28)!important;
  border-radius:14px!important;
  padding:10px 12px!important;
}
.game-completion-modal .completion-actions{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
  width:100%!important;
  margin-top:8px!important;
}
.game-completion-modal .completion-actions button{
  min-height:54px!important;
  border-radius:999px!important;
  padding:0 18px!important;
  font-size:17px!important;
  font-weight:1000!important;
  cursor:pointer!important;
}
.game-completion-modal .completion-primary{
  border:1px solid rgba(255,255,255,.20)!important;
  background:linear-gradient(180deg,#b84cff 0%,#7a30ff 100%)!important;
  color:#fff!important;
  box-shadow:0 14px 30px rgba(143,54,255,.38),inset 0 1px 0 rgba(255,255,255,.25)!important;
}
.game-completion-modal .completion-secondary{
  border:1.5px solid rgba(255,198,72,.66)!important;
  background:rgba(9,14,48,.88)!important;
  color:#fff!important;
  box-shadow:0 14px 30px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.game-completion-modal .completion-song-button{
  position:absolute!important;
  right:12px!important;
  bottom:12px!important;
}
@media(max-width:640px){
  .game-completion-backdrop{
    padding:12px!important;
  }
  .game-completion-modal{
    width:calc(100vw - 24px)!important;
    max-height:calc(100vh - 24px)!important;
    padding:24px 16px 26px!important;
    border-radius:26px!important;
  }
  .game-completion-modal .completion-reward-image-wrap{
    width:100%!important;
  }
  .game-completion-modal .completion-reward-image,
  .game-completion-modal .completion-reward-fallback{
    height:min(190px,32vh)!important;
  }
  .game-completion-modal h2{
    font-size:32px!important;
  }
  .game-completion-modal .completion-actions{
    grid-template-columns:1fr!important;
  }
}

/* Final correction: keep completion popup compact and never show the fallback panel behind a loaded reward image. */
.game-completion-backdrop{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  padding:18px!important;
}
.game-completion-modal{
  width:min(560px,calc(100vw - 32px))!important;
  max-height:calc(100vh - 36px)!important;
  overflow:visible!important;
  padding:22px 28px 24px!important;
  border-radius:28px!important;
}
.game-completion-modal .completion-reward-image-wrap{
  width:min(360px,88%)!important;
  margin:0 auto 12px!important;
  padding:5px!important;
  border-radius:22px!important;
}
.game-completion-modal .completion-reward-image{
  display:block!important;
  height:clamp(132px,22vh,205px)!important;
  border-radius:17px!important;
}
.game-completion-modal .completion-reward-fallback{
  display:none!important;
}
.game-completion-modal h2{
  margin:6px 0 4px!important;
  font-size:clamp(31px,4.2vw,43px)!important;
  line-height:1.02!important;
  text-shadow:0 0 12px rgba(255,198,80,.42),0 2px 0 rgba(64,35,98,.42)!important;
}
.game-completion-modal .completion-reward-summary{
  gap:6px!important;
  margin:0 auto 14px!important;
}
.game-completion-modal .completion-reward-summary p{
  font-size:15px!important;
  line-height:1.25!important;
}
.game-completion-modal .completion-coin-badge{
  width:min(340px,100%)!important;
  min-height:58px!important;
  margin:6px auto 0!important;
  padding:9px 18px!important;
  border-radius:18px!important;
}
.game-completion-modal .completion-coin-badge img{
  width:42px!important;
  height:42px!important;
}
.game-completion-modal .completion-coin-badge b{
  font-size:clamp(25px,3.7vw,34px)!important;
}
.game-completion-modal .completion-actions{
  gap:12px!important;
  margin-top:6px!important;
}
.game-completion-modal .completion-actions button{
  min-height:48px!important;
  font-size:15px!important;
}
@media(max-width:640px){
  .game-completion-backdrop{
    overflow:auto!important;
    padding:10px!important;
  }
  .game-completion-modal{
    width:calc(100vw - 20px)!important;
    max-height:calc(100vh - 20px)!important;
    overflow:auto!important;
    padding:18px 14px 20px!important;
  }
  .game-completion-modal .completion-reward-image{
    height:min(155px,24vh)!important;
  }
  .game-completion-modal h2{
    font-size:29px!important;
  }
}

/* Dragon's Whisper: show a clear blinking cursor in the current empty answer box. */
.dragons-whisper-page .whisper-hidden-input{
  position:fixed!important;
  left:-9999px!important;
  top:0!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  color:transparent!important;
  caret-color:transparent!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
}

.dragons-whisper-page .whisper-letter-box{
  position:relative!important;
}

.dragons-whisper-page .whisper-letter-box--active{
  box-shadow:0 0 0 3px rgba(255,181,46,.28),0 0 18px rgba(124,77,255,.24)!important;
}

.dragons-whisper-page .whisper-letter-box--active::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  width:3px!important;
  height:32px!important;
  border-radius:999px!important;
  background:#5f45f4!important;
  box-shadow:none!important;
  animation:whisper-cursor-blink .82s steps(2,start) infinite!important;
}

.dragons-whisper-page .whisper-letter-box--active.whisper-letter-box--filled::after,
.dragons-whisper-page .whisper-letter-box--active.whisper-letter-box--hint::after{
  content:none!important;
}

@keyframes whisper-cursor-blink{
  0%,45%{opacity:1;}
  46%,100%{opacity:0;}
}

  opacity:.46!important;
  filter:saturate(.42) brightness(.72)!important;
  box-shadow:0 6px 14px rgba(2,8,26,.18)!important;
}

  filter:grayscale(.72) saturate(.36)!important;
  opacity:.62!important;
}

  opacity:1!important;
  filter:none!important;
  border-color:rgba(176,145,255,.92)!important;
  background:
    radial-gradient(circle at 50% 48%,rgba(124,92,255,.48),transparent 42%),
    linear-gradient(180deg,rgba(20,31,82,.98),rgba(9,15,48,.99))!important;
  box-shadow:0 0 0 1px rgba(166,136,255,.34),0 12px 28px rgba(91,64,226,.30),0 0 26px rgba(126,87,255,.24)!important;
}

  filter:none!important;
  opacity:1!important;
}

  border-color:rgba(255,213,121,.94)!important;
  box-shadow:0 0 0 1px rgba(255,213,121,.34),0 14px 34px rgba(124,92,255,.34),0 0 30px rgba(255,181,46,.28)!important;
}

  grid-column:1!important;
  grid-row:1 / 3!important;
}

  grid-column:3!important;
  grid-row:1 / 3!important;
  width:48px!important;
  height:48px!important;
  justify-self:end!important;
  margin:0!important;
  display:block!important;
  object-fit:contain!important;
}

/* Study dashboard Game Zone card only: keep the gift clear of the Play button. */
body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .right-col .game-zone-card>img,
.study-page .right-col .game-zone-card>img{
  width:86px!important;
  height:78px!important;
  right:30px!important;
  bottom:18px!important;
  top:auto!important;
  object-fit:contain!important;
}

/* Study Setting icon cleanup: replace mojibake pseudo-icons with real local assets. */
#setMenu .range-popover-header::before,
#setMenu .range-type-btn::before,
#setMenu .range-current-card::before,
#setMenu .range-option i::before,
#setMenu .range-option.selected i::before,
#setMenu .range-option.selected::after,
#setMenu .range-apply::after{
  content:""!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:18px 18px!important;
  font-size:0!important;
  line-height:0!important;
}
#setMenu .range-popover-header::before{
  background-image:url("assets/assets_webp/icons/universal/icon_settings.svg")!important;
  background-size:30px 30px!important;
}
#setMenu .range-type-btn:nth-child(1)::before{
  background-image:url("assets/assets_webp/icons/universal/icon_word_list.svg")!important;
}
#setMenu .range-type-btn:nth-child(2)::before{
  background-image:url("assets/assets_webp/icons/universal/icon_star.svg")!important;
}
#setMenu .range-type-btn:nth-child(3)::before{
  background-image:url("assets/assets_webp/icons/universal/icon_review.svg")!important;
}
#setMenu .range-type-btn:nth-child(4)::before{
  background-image:url("assets/assets_webp/icons/universal/icon_progress.svg")!important;
}
#setMenu .range-current-card::before,
#setMenu .range-option i::before{
  background-image:url("assets/assets_webp/icons/universal/icon_study.svg")!important;
}
#setMenu .range-option.selected i::before,
#setMenu .range-option.selected::after{
  background-image:url("assets/assets_webp/icons/universal/icon_progress.svg")!important;
}
#setMenu .range-apply::after{
  display:inline-block!important;
  width:18px!important;
  height:18px!important;
  margin-left:8px!important;
  vertical-align:-3px!important;
  background-image:url("assets/assets_webp/icons/universal/icon_progress.svg")!important;
}
#setMenu .setting-marker-icon{
  display:block!important;
  width:14px!important;
  height:14px!important;
  object-fit:contain!important;
}

/* Study Setting filter buttons use real inline icons so each option maps by mode. */
#setMenu .range-type-btn::before{
  display:none!important;
}
#setMenu .range-type-icon{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
}
#setMenu .setting-filter-icon{
  display:block!important;
  width:18px!important;
  height:18px!important;
  object-fit:contain!important;
}

/* Flashcard Essential Words icon tooltip. */
body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .essential-ribbon-tooltip{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  cursor:default!important;
  overflow:visible!important;
}
body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .essential-ribbon-tooltip img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  pointer-events:none!important;
}
body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .essential-ribbon-tooltip::after{
  display:block!important;
  content:attr(data-tooltip)!important;
  position:absolute!important;
  left:0!important;
  top:calc(100% + 8px)!important;
  min-width:max-content!important;
  padding:7px 10px!important;
  border-radius:10px!important;
  background:rgba(12,18,52,.96)!important;
  color:#fff!important;
  border:1px solid rgba(190,180,255,.32)!important;
  box-shadow:0 12px 26px rgba(16,12,50,.24)!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:900!important;
  white-space:nowrap!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translateY(-2px)!important;
  transition:opacity .16s ease,visibility .16s ease,transform .16s ease!important;
  pointer-events:none!important;
  z-index:20!important;
}
body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .essential-ribbon-tooltip:hover::after,
body:not(.dragon-studio-mode):not(.game-route-mode) #studyPage.study-page .essential-ribbon-tooltip:focus-visible::after{
  opacity:1!important;
  visibility:visible!important;
  transform:translateY(0)!important;
}

/* Level page description typography: lighter, cleaner copy like the approved reference. */
body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid .level-card .level-feature,
body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid.ssat .level-card .level-feature{
  color:#465071!important;
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  font-size:13.5px!important;
  font-weight:400!important;
  line-height:1.4!important;
  letter-spacing:0!important;
  text-align:center!important;
  white-space:normal!important;
  overflow-wrap:break-word!important;
  word-wrap:break-word!important;
  overflow:hidden!important;
}

body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid .level-card .level-count-line{
  color:#7a76a5!important;
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  font-size:13px!important;
  font-weight:600!important;
  line-height:1.3!important;
  letter-spacing:0!important;
  text-align:center!important;
  white-space:normal!important;
  overflow-wrap:break-word!important;
  word-wrap:break-word!important;
  overflow:hidden!important;
}

@media(max-width:760px){
  body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid .level-card .level-feature,
  body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid.ssat .level-card .level-feature{
    font-size:13px!important;
    white-space:normal!important;
  }

  body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid .level-card .level-count-line{
    font-size:12.5px!important;
  }
}

/* My Profile approved layout refresh. Scoped to the profile page only. */
.profile-page{
  max-width:1480px!important;
  padding:18px 28px 26px!important;
  color:#f7f4ff!important;
}
.profile-v2-dashboard{
  display:grid!important;
  gap:16px!important;
}
.profile-v2-dashboard .panel,
.profile-v2-card{
  border:1px solid rgba(119,101,210,.42)!important;
  background:
    radial-gradient(circle at 76% 12%,rgba(119,73,255,.20),transparent 32%),
    linear-gradient(180deg,rgba(18,27,69,.94),rgba(9,15,44,.98))!important;
  box-shadow:0 18px 46px rgba(2,7,28,.28),inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.profile-v2-hero{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 360px!important;
  gap:22px!important;
  min-height:210px!important;
  padding:24px 28px!important;
  overflow:hidden!important;
  border-radius:24px!important;
}
.profile-v2-hero::before,
.profile-v2-studio::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(90deg,rgba(7,13,42,.76),rgba(7,13,42,.30)),url("assets/my-dragon-studio-batch/optimized-my-dragon-studio-webp/my-dragon-card/bg_my_dragon_icy_ruins.webp") center/cover no-repeat!important;
  opacity:.44!important;
  pointer-events:none!important;
}
.profile-v2-person,
.profile-v2-hero-stats,
.profile-v2-card>*{
  position:relative!important;
  z-index:1!important;
}
.profile-v2-person{
  display:grid!important;
  grid-template-columns:170px minmax(0,1fr)!important;
  gap:22px!important;
  align-items:center!important;
}
.profile-v2-avatar-btn{
  position:relative!important;
  width:166px!important;
  height:166px!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.92)!important;
  box-shadow:0 0 0 3px rgba(145,111,255,.78),0 18px 44px rgba(78,55,211,.36)!important;
  cursor:pointer!important;
}
.profile-v2-avatar{
  width:100%!important;
  height:100%!important;
  border-radius:50%!important;
  object-fit:contain!important;
  display:block!important;
}
.profile-v2-avatar-btn>span{
  position:absolute!important;
  right:-2px!important;
  bottom:10px!important;
  display:grid!important;
  place-items:center!important;
  width:42px!important;
  height:42px!important;
  border-radius:50%!important;
  background:#101842!important;
  border:1px solid rgba(141,116,255,.72)!important;
}
.profile-v2-avatar-btn>span img{
  width:22px!important;
  height:22px!important;
}
.profile-v2-identity h1{
  margin:0!important;
  color:#fff!important;
  font-size:32px!important;
  line-height:1.05!important;
  font-weight:1000!important;
}
.profile-v2-name-row{
  display:flex!important;
  gap:14px!important;
  align-items:center!important;
  flex-wrap:wrap!important;
}
.profile-v2-identity p{
  margin:8px 0 18px!important;
  color:#d8def8!important;
  font-size:14px!important;
}
.profile-v2-badge{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:max-content!important;
  min-height:28px!important;
  padding:0 13px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#7c5cff,#5739d4)!important;
  color:#fff!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:1000!important;
}
.profile-v2-mini-stats{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
}
.profile-v2-mini-stats span,
.profile-v2-hero-stats article,
.profile-v2-metric-grid article,
.profile-v2-insight-grid section,
.profile-v2-billing-grid button{
  border:1px solid rgba(132,119,214,.38)!important;
  background:rgba(9,16,50,.66)!important;
  border-radius:14px!important;
}
.profile-v2-mini-stats span{
  display:grid!important;
  grid-template-columns:32px 1fr!important;
  grid-template-rows:auto auto!important;
  gap:2px 10px!important;
  min-height:62px!important;
  padding:12px!important;
}
.profile-v2-mini-stats img{
  grid-row:1/3!important;
  width:26px!important;
  height:26px!important;
  align-self:center!important;
}
.profile-v2-mini-stats b,
.profile-v2-hero-stats span,
.profile-v2-metric-grid span{
  color:#cfd4ef!important;
  font-size:12px!important;
  font-weight:800!important;
}
.profile-v2-mini-stats strong{
  color:#a989ff!important;
  font-size:13px!important;
  line-height:1.15!important;
}
.profile-v2-hero-stats{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:12px!important;
  align-content:center!important;
}
.profile-v2-hero-stats article{
  display:grid!important;
  grid-template-columns:42px 1fr!important;
  gap:10px!important;
  align-items:center!important;
  min-height:70px!important;
  padding:13px!important;
}
.profile-v2-hero-stats img{
  width:30px!important;
  height:30px!important;
}
.profile-v2-hero-stats strong{
  display:block!important;
  color:#fff!important;
  font-size:22px!important;
  line-height:1!important;
  font-weight:1000!important;
}
.profile-v2-hero-stats span{
  display:block!important;
  margin-top:5px!important;
}
.profile-v2-two-col{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:18px!important;
}
.profile-v2-card{
  position:relative!important;
  overflow:hidden!important;
  border-radius:22px!important;
  padding:20px!important;
}
.profile-v2-card-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  margin-bottom:16px!important;
}
.profile-v2-card-head h2{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  margin:0!important;
  color:#fff!important;
  font-size:22px!important;
  font-weight:1000!important;
}
.profile-v2-card-head h2 img{
  width:28px!important;
  height:28px!important;
}
.profile-v2-card-head button,
.profile-v2-primary,
.profile-v2-help-actions button{
  min-height:38px!important;
  border:0!important;
  border-radius:12px!important;
  padding:0 18px!important;
  background:linear-gradient(180deg,#8466ff,#5d43df)!important;
  color:#fff!important;
  font-weight:1000!important;
  cursor:pointer!important;
}
.profile-v2-card-head.stacked{
  display:block!important;
}
.profile-v2-card-head.stacked p{
  margin:6px 0 0!important;
  color:#cfd4ef!important;
  font-size:13px!important;
}
.profile-v2-studio{
  min-height:220px!important;
}
.profile-v2-studio-body{
  display:grid!important;
  grid-template-columns:150px minmax(0,1fr)!important;
  gap:18px!important;
  align-items:center!important;
}
.profile-v2-studio-dragon{
  width:145px!important;
  height:145px!important;
  object-fit:contain!important;
}
.profile-v2-studio h3{
  margin:9px 0 4px!important;
  color:#fff!important;
  font-size:21px!important;
  font-weight:1000!important;
}
.profile-v2-studio p{
  margin:4px 0!important;
  color:#d6dcf7!important;
  font-size:13px!important;
  line-height:1.35!important;
}
.profile-v2-xp-row{
  display:flex!important;
  justify-content:space-between!important;
  gap:10px!important;
  margin-top:12px!important;
  color:#eff2ff!important;
  font-size:12px!important;
  font-weight:900!important;
}
.profile-v2-xp-bar,
.profile-v2-health-meter{
  height:7px!important;
  overflow:hidden!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.20)!important;
}
.profile-v2-xp-bar i,
.profile-v2-health-meter i{
  display:block!important;
  height:100%!important;
  border-radius:inherit!important;
  background:linear-gradient(90deg,#8a63ff,#ffe48a)!important;
}
.profile-v2-primary{
  float:right!important;
  margin-top:10px!important;
}
.profile-v2-primary img,
.profile-v2-card-head button img,
.profile-v2-help-actions button img{
  width:18px!important;
  height:18px!important;
  vertical-align:-4px!important;
  margin-right:6px!important;
}
.profile-v2-community-tabs{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  margin-bottom:14px!important;
}
.profile-v2-community-tabs span{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-height:38px!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.10)!important;
  color:#f3f1ff!important;
  font-weight:1000!important;
  font-size:12px!important;
}
.profile-v2-community-tabs span.active{
  background:linear-gradient(180deg,#7d64ff,#563fe0)!important;
}
.profile-v2-community-tabs img{
  width:18px!important;
  height:18px!important;
}
.profile-v2-community-stats{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.10)!important;
  border:1px solid rgba(178,166,255,.25)!important;
  padding:12px 8px!important;
}
.profile-v2-community-stats div{
  display:grid!important;
  justify-items:center!important;
  gap:3px!important;
  min-width:0!important;
  text-align:center!important;
  border-right:1px solid rgba(255,255,255,.16)!important;
}
.profile-v2-community-stats div:last-child{
  border-right:0!important;
}
.profile-v2-community-stats img{
  width:22px!important;
  height:22px!important;
}
.profile-v2-community-stats strong{
  color:#fff!important;
  font-size:18px!important;
  line-height:1!important;
}
.profile-v2-community-stats span{
  color:#dce1fb!important;
  font-size:10px!important;
  line-height:1.15!important;
}
.profile-v2-learning{
  padding:20px 22px!important;
}
.profile-v2-metric-grid{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:10px!important;
  margin-bottom:14px!important;
}
.profile-v2-metric-grid article{
  display:grid!important;
  grid-template-columns:30px 1fr!important;
  grid-template-rows:auto auto!important;
  gap:2px 10px!important;
  min-height:70px!important;
  padding:12px!important;
}
.profile-v2-metric-grid img{
  grid-row:1/3!important;
  width:26px!important;
  height:26px!important;
  align-self:center!important;
}
.profile-v2-metric-grid b{
  color:#fff!important;
  font-size:24px!important;
  line-height:1!important;
}
.profile-v2-insight-grid{
  display:grid!important;
  grid-template-columns:1fr 1fr 1.2fr!important;
  gap:12px!important;
}
.profile-v2-insight-grid section{
  min-height:118px!important;
  padding:14px!important;
}
.profile-v2-insight-grid h3{
  margin:0 0 10px!important;
  color:#ffe48f!important;
  font-size:14px!important;
  font-weight:1000!important;
}
.profile-v2-insight-grid p{
  margin:10px 0 0!important;
  color:#fff!important;
  font-size:12px!important;
}
.profile-v2-bottom-row{
  grid-template-columns:.95fr 1.05fr!important;
}
.profile-v2-help-list{
  display:grid!important;
  gap:8px!important;
}
.profile-v2-help-list button{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  min-height:34px!important;
  padding:0 12px!important;
  border:1px solid rgba(132,119,214,.38)!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.08)!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:900!important;
  text-align:left!important;
  cursor:pointer!important;
}
.profile-v2-help-list img{
  width:14px!important;
  height:14px!important;
  opacity:.9!important;
}
.profile-v2-help-actions{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
  margin-top:12px!important;
}
.profile-v2-help-actions button:last-child{
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(132,119,214,.38)!important;
}
.profile-v2-billing-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
}
.profile-v2-billing-grid button{
  display:grid!important;
  justify-items:center!important;
  gap:8px!important;
  min-height:142px!important;
  padding:18px 12px!important;
  color:#fff!important;
  cursor:pointer!important;
}
.profile-v2-billing-grid button img{
  width:36px!important;
  height:36px!important;
}
.profile-v2-billing-grid button b{
  color:#fff!important;
  font-size:15px!important;
  line-height:1.25!important;
}
.profile-v2-billing-grid button span{
  color:#cfd4ef!important;
  font-size:12px!important;
  line-height:1.35!important;
}
.profile-v2-billing-grid button.danger{
  border-color:rgba(255,83,112,.36)!important;
}
.profile-v2-billing-grid button.danger b{
  color:#ff6f86!important;
}
.profile-v2-footer{
  display:grid!important;
  grid-template-columns:1fr auto 1fr!important;
  align-items:center!important;
  gap:18px!important;
  padding:16px 8px 0!important;
  border-top:1px solid rgba(129,119,214,.24)!important;
  color:#cfd4ef!important;
}
.profile-v2-footer-brand img{
  width:120px!important;
  height:auto!important;
  display:block!important;
}
.profile-v2-footer nav{
  display:flex!important;
  gap:18px!important;
  align-items:center!important;
}
.profile-v2-footer button{
  border:0!important;
  background:transparent!important;
  color:#dfe3fb!important;
  font-size:13px!important;
  cursor:pointer!important;
}
.profile-v2-footer p{
  margin:0!important;
  text-align:right!important;
  color:#cfd4ef!important;
  font-size:13px!important;
}
@media(max-width:1120px){
  .profile-v2-hero,
  .profile-v2-two-col,
  .profile-v2-bottom-row{
    grid-template-columns:1fr!important;
  }
  .profile-v2-hero-stats,
  .profile-v2-metric-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .profile-v2-insight-grid,
  .profile-v2-billing-grid{
    grid-template-columns:1fr 1fr!important;
  }
}
@media(max-width:720px){
  .profile-page{
    padding:12px!important;
  }
  .profile-v2-hero,
  .profile-v2-card{
    padding:16px!important;
    border-radius:18px!important;
  }
  .profile-v2-person,
  .profile-v2-studio-body{
    grid-template-columns:1fr!important;
    text-align:center!important;
  }
  .profile-v2-avatar-btn,
  .profile-v2-studio-dragon{
    margin:0 auto!important;
  }
  .profile-v2-name-row{
    justify-content:center!important;
  }
  .profile-v2-mini-stats,
  .profile-v2-hero-stats,
  .profile-v2-metric-grid,
  .profile-v2-insight-grid,
  .profile-v2-billing-grid,
  .profile-v2-community-stats,
  .profile-v2-footer{
    grid-template-columns:1fr!important;
  }
  .profile-v2-community-tabs,
  .profile-v2-help-actions{
    grid-template-columns:1fr!important;
  }
  .profile-v2-community-stats div{
    border-right:0!important;
    border-bottom:1px solid rgba(255,255,255,.14)!important;
    padding:8px 0!important;
  }
  .profile-v2-community-stats div:last-child{
    border-bottom:0!important;
  }
  .profile-v2-card-head{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
  .profile-v2-footer nav{
    flex-wrap:wrap!important;
    justify-content:center!important;
  }
  .profile-v2-footer,
  .profile-v2-footer p{
    text-align:center!important;
  }
  .profile-v2-footer-brand img{
    margin:0 auto!important;
  }
}

/* My Profile compact pass: preserve the approved layout while reducing visual scale. */
.profile-page{
  max-width:1240px!important;
  padding:12px 22px 18px!important;
}
.profile-v2-dashboard{
  gap:11px!important;
}
.profile-v2-hero{
  grid-template-columns:minmax(0,1fr) 300px!important;
  gap:16px!important;
  min-height:148px!important;
  padding:17px 20px!important;
  border-radius:19px!important;
}
.profile-v2-person{
  grid-template-columns:120px minmax(0,1fr)!important;
  gap:16px!important;
}
.profile-v2-avatar-btn{
  width:118px!important;
  height:118px!important;
}
.profile-v2-avatar-btn>span{
  width:30px!important;
  height:30px!important;
  bottom:7px!important;
}
.profile-v2-avatar-btn>span img{
  width:16px!important;
  height:16px!important;
}
.profile-v2-identity h1{
  font-size:23px!important;
}
.profile-v2-identity p{
  margin:6px 0 12px!important;
  font-size:12px!important;
}
.profile-v2-badge{
  min-height:22px!important;
  padding:0 10px!important;
  font-size:9.5px!important;
}
.profile-v2-mini-stats{
  gap:8px!important;
}
.profile-v2-mini-stats span{
  grid-template-columns:24px 1fr!important;
  gap:1px 8px!important;
  min-height:46px!important;
  padding:8px!important;
  border-radius:11px!important;
}
.profile-v2-mini-stats img{
  width:20px!important;
  height:20px!important;
}
.profile-v2-mini-stats b,
.profile-v2-hero-stats span,
.profile-v2-metric-grid span{
  font-size:10px!important;
}
.profile-v2-mini-stats strong{
  font-size:11px!important;
}
.profile-v2-hero-stats{
  gap:8px!important;
}
.profile-v2-hero-stats article{
  grid-template-columns:30px 1fr!important;
  gap:8px!important;
  min-height:50px!important;
  padding:9px!important;
  border-radius:11px!important;
}
.profile-v2-hero-stats img{
  width:22px!important;
  height:22px!important;
}
.profile-v2-hero-stats strong{
  font-size:16px!important;
}
.profile-v2-hero-stats span{
  margin-top:3px!important;
}
.profile-v2-two-col{
  gap:12px!important;
}
.profile-v2-card{
  border-radius:16px!important;
  padding:14px!important;
}
.profile-v2-card-head{
  gap:10px!important;
  margin-bottom:11px!important;
}
.profile-v2-card-head h2{
  gap:7px!important;
  font-size:16px!important;
}
.profile-v2-card-head h2 img{
  width:20px!important;
  height:20px!important;
}
.profile-v2-card-head button,
.profile-v2-primary,
.profile-v2-help-actions button{
  min-height:28px!important;
  border-radius:9px!important;
  padding:0 13px!important;
  font-size:11px!important;
}
.profile-v2-card-head.stacked p{
  margin-top:4px!important;
  font-size:11px!important;
}
.profile-v2-studio{
  min-height:154px!important;
}
.profile-v2-studio-body{
  grid-template-columns:106px minmax(0,1fr)!important;
  gap:13px!important;
}
.profile-v2-studio-dragon{
  width:102px!important;
  height:102px!important;
}
.profile-v2-studio h3{
  margin:6px 0 3px!important;
  font-size:15px!important;
}
.profile-v2-studio p{
  margin:3px 0!important;
  font-size:11px!important;
}
.profile-v2-xp-row{
  margin-top:8px!important;
  font-size:10px!important;
}
.profile-v2-xp-bar,
.profile-v2-health-meter{
  height:5px!important;
}
.profile-v2-primary{
  margin-top:7px!important;
}
.profile-v2-primary img,
.profile-v2-card-head button img,
.profile-v2-help-actions button img{
  width:14px!important;
  height:14px!important;
  margin-right:5px!important;
  vertical-align:-3px!important;
}
.profile-v2-community-tabs{
  gap:7px!important;
  margin-bottom:10px!important;
}
.profile-v2-community-tabs span{
  min-height:28px!important;
  gap:6px!important;
  border-radius:9px!important;
  font-size:10px!important;
}
.profile-v2-community-tabs img{
  width:14px!important;
  height:14px!important;
}
.profile-v2-community-stats{
  border-radius:12px!important;
  padding:9px 6px!important;
}
.profile-v2-community-stats div{
  gap:2px!important;
}
.profile-v2-community-stats img{
  width:16px!important;
  height:16px!important;
}
.profile-v2-community-stats strong{
  font-size:14px!important;
}
.profile-v2-community-stats span{
  font-size:8.5px!important;
}
.profile-v2-learning{
  padding:14px 16px!important;
}
.profile-v2-metric-grid{
  gap:7px!important;
  margin-bottom:10px!important;
}
.profile-v2-metric-grid article{
  grid-template-columns:22px 1fr!important;
  gap:1px 8px!important;
  min-height:50px!important;
  padding:9px!important;
  border-radius:11px!important;
}
.profile-v2-metric-grid img{
  width:19px!important;
  height:19px!important;
}
.profile-v2-metric-grid b{
  font-size:17px!important;
}
.profile-v2-insight-grid{
  gap:8px!important;
}
.profile-v2-insight-grid section{
  min-height:82px!important;
  padding:10px!important;
  border-radius:11px!important;
}
.profile-v2-insight-grid h3{
  margin-bottom:7px!important;
  font-size:11px!important;
}
.profile-v2-insight-grid p{
  margin-top:7px!important;
  font-size:10px!important;
}
.snapshot-set-row{
  gap:6px!important;
  min-height:18px!important;
}
.snapshot-set-row span,
.snapshot-set-row b,
.snapshot-week-bar b{
  font-size:9.5px!important;
}
.snapshot-week-chart{
  min-height:54px!important;
}
.profile-v2-help-list{
  gap:6px!important;
}
.profile-v2-help-list button{
  min-height:25px!important;
  padding:0 9px!important;
  border-radius:8px!important;
  font-size:10px!important;
}
.profile-v2-help-list img{
  width:11px!important;
  height:11px!important;
}
.profile-v2-help-actions{
  gap:7px!important;
  margin-top:9px!important;
}
.profile-v2-billing-grid{
  gap:8px!important;
}
.profile-v2-billing-grid button{
  gap:6px!important;
  min-height:98px!important;
  padding:13px 9px!important;
  border-radius:11px!important;
}
.profile-v2-billing-grid button img{
  width:26px!important;
  height:26px!important;
}
.profile-v2-billing-grid button b{
  font-size:12px!important;
}
.profile-v2-billing-grid button span{
  font-size:10px!important;
}
.profile-v2-footer{
  gap:13px!important;
  padding:11px 6px 0!important;
}
.profile-v2-footer-brand img{
  width:86px!important;
}
.profile-v2-footer nav{
  gap:13px!important;
}
.profile-v2-footer button,
.profile-v2-footer p{
  font-size:11px!important;
}
@media(max-width:1120px){
  .profile-v2-hero{
    grid-template-columns:1fr!important;
  }
}
@media(max-width:720px){
  .profile-page{
    padding:10px!important;
  }
  .profile-v2-dashboard{
    gap:10px!important;
  }
  .profile-v2-hero,
  .profile-v2-card{
    padding:13px!important;
    border-radius:16px!important;
  }
  .profile-v2-person,
  .profile-v2-studio-body{
    grid-template-columns:1fr!important;
  }
  .profile-v2-avatar-btn{
    width:108px!important;
    height:108px!important;
  }
  .profile-v2-studio-dragon{
    width:96px!important;
    height:96px!important;
  }
}

/* Account Settings modal launched from My Profile Settings card. */
.account-settings-overlay{
  position:fixed!important;
  inset:0!important;
  z-index:2147483300!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:22px!important;
  overflow:hidden!important;
  background:rgba(3,7,24,.72)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}
.account-settings-modal{
  position:relative!important;
  width:min(820px,calc(100vw - 32px))!important;
  max-height:calc(100vh - 44px)!important;
  overflow:auto!important;
  padding:28px!important;
  border-radius:24px!important;
  color:#f8f5ff!important;
  background:
    radial-gradient(circle at 78% 8%,rgba(104,75,255,.20),transparent 32%),
    radial-gradient(circle at 14% 18%,rgba(146,99,255,.18),transparent 30%),
    linear-gradient(180deg,rgba(23,22,68,.98),rgba(11,14,45,.99))!important;
  border:1.5px solid rgba(142,119,255,.75)!important;
  box-shadow:0 28px 92px rgba(0,0,0,.62),0 0 38px rgba(111,73,255,.34),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.account-settings-close{
  position:absolute!important;
  top:22px!important;
  right:22px!important;
  left:auto!important;
  z-index:2!important;
  display:grid!important;
  place-items:center!important;
  width:48px!important;
  height:48px!important;
  border-radius:50%!important;
  border:1px solid rgba(175,158,255,.48)!important;
  background:rgba(18,23,63,.72)!important;
  color:#fff!important;
  font-size:34px!important;
  line-height:1!important;
  cursor:pointer!important;
}
.account-settings-modal-head{
  display:grid!important;
  grid-template-columns:76px minmax(0,1fr)!important;
  gap:18px!important;
  align-items:center!important;
  padding-right:62px!important;
  margin-bottom:22px!important;
}
.account-settings-head-icon{
  display:grid!important;
  place-items:center!important;
  width:72px!important;
  height:72px!important;
  border-radius:50%!important;
  background:radial-gradient(circle,rgba(139,104,255,.52),rgba(39,31,93,.88))!important;
  border:1px solid rgba(174,154,255,.55)!important;
  box-shadow:0 0 24px rgba(114,79,255,.38)!important;
}
.account-settings-head-icon img{
  width:42px!important;
  height:42px!important;
}
.account-settings-modal h2{
  margin:0!important;
  color:#fff!important;
  font-size:32px!important;
  line-height:1.05!important;
  font-weight:1000!important;
}
.account-settings-modal-head p{
  margin:8px 0 0!important;
  color:#cfd4ef!important;
  font-size:16px!important;
}
.account-settings-card-grid{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:14px!important;
}
.account-settings-card{
  min-height:230px!important;
  padding:22px!important;
  border-radius:18px!important;
  border:1px solid rgba(151,134,231,.48)!important;
  background:linear-gradient(180deg,rgba(47,43,99,.82),rgba(28,31,78,.86))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.account-settings-card h3{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  margin:0 0 18px!important;
  color:#fff!important;
  font-size:22px!important;
  line-height:1.1!important;
  font-weight:1000!important;
}
.account-settings-card h3 img{
  width:34px!important;
  height:34px!important;
}
.account-settings-actions{
  display:grid!important;
  gap:11px!important;
}
.account-settings-actions button,
.account-settings-logout{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  width:100%!important;
  min-height:34px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#fff!important;
  text-align:left!important;
  font-size:15px!important;
  font-weight:900!important;
  cursor:pointer!important;
}
.account-settings-actions button:hover,
.account-settings-logout:hover{
  color:#cbbdff!important;
}
.account-settings-actions img,
.account-settings-logout img{
  width:22px!important;
  height:22px!important;
  flex:0 0 22px!important;
}
.account-settings-current,
.account-settings-email{
  margin:0 0 18px!important;
  color:#d9def7!important;
  font-size:15px!important;
  line-height:1.45!important;
}
.account-settings-email{
  margin:18px 0!important;
  padding-top:14px!important;
  border-top:1px solid rgba(175,160,255,.20)!important;
}
.account-settings-current b,
.account-settings-email b{
  color:#fff!important;
  font-weight:1000!important;
}
.account-settings-logout{
  color:#ff8aa0!important;
}
.account-settings-toggle{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  color:#fff!important;
  font-size:15px!important;
  font-weight:900!important;
}
.account-settings-toggle span{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
}
.account-settings-toggle img{
  width:22px!important;
  height:22px!important;
}
.account-settings-toggle input{
  position:absolute!important;
  opacity:0!important;
  pointer-events:none!important;
}
.account-settings-toggle i{
  position:relative!important;
  display:block!important;
  width:52px!important;
  height:28px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#8d70ff,#5a42dc)!important;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.22),0 8px 22px rgba(88,65,217,.32)!important;
}
.account-settings-toggle i::after{
  content:""!important;
  position:absolute!important;
  right:4px!important;
  top:4px!important;
  width:20px!important;
  height:20px!important;
  border-radius:50%!important;
  background:#fff!important;
}
.account-settings-toggle input:not(:checked)+i{
  background:rgba(255,255,255,.18)!important;
}
.account-settings-toggle input:not(:checked)+i::after{
  right:28px!important;
}
@media(max-width:760px){
  .account-settings-overlay{
    padding:12px!important;
    align-items:flex-start!important;
    overflow:auto!important;
  }
  .account-settings-modal{
    width:calc(100vw - 24px)!important;
    max-height:calc(100vh - 24px)!important;
    padding:22px 16px!important;
    border-radius:20px!important;
  }
  .account-settings-modal-head{
    grid-template-columns:52px minmax(0,1fr)!important;
    gap:12px!important;
    padding-right:48px!important;
  }
  .account-settings-head-icon{
    width:50px!important;
    height:50px!important;
  }
  .account-settings-head-icon img{
    width:30px!important;
    height:30px!important;
  }
  .account-settings-modal h2{
    font-size:24px!important;
  }
  .account-settings-modal-head p{
    font-size:13px!important;
  }
  .account-settings-card-grid{
    grid-template-columns:1fr!important;
  }
  .account-settings-card{
    min-height:0!important;
    padding:18px!important;
  }
}

/* Account Settings modal compact scale pass. */
.account-settings-overlay{
  padding:16px!important;
}
.account-settings-modal{
  width:min(620px,calc(100vw - 32px))!important;
  max-height:calc(100vh - 32px)!important;
  padding:20px!important;
  border-radius:18px!important;
}
.account-settings-close{
  top:16px!important;
  right:16px!important;
  width:34px!important;
  height:34px!important;
  font-size:25px!important;
}
.account-settings-modal-head{
  grid-template-columns:54px minmax(0,1fr)!important;
  gap:13px!important;
  padding-right:46px!important;
  margin-bottom:15px!important;
}
.account-settings-head-icon{
  width:52px!important;
  height:52px!important;
}
.account-settings-head-icon img{
  width:30px!important;
  height:30px!important;
}
.account-settings-modal h2{
  font-size:23px!important;
}
.account-settings-modal-head p{
  margin-top:5px!important;
  font-size:12.5px!important;
}
.account-settings-card-grid{
  gap:10px!important;
}
.account-settings-card{
  min-height:160px!important;
  padding:15px!important;
  border-radius:13px!important;
}
.account-settings-card h3{
  gap:8px!important;
  margin-bottom:12px!important;
  font-size:16px!important;
}
.account-settings-card h3 img{
  width:24px!important;
  height:24px!important;
}
.account-settings-actions{
  gap:7px!important;
}
.account-settings-actions button,
.account-settings-logout{
  gap:8px!important;
  min-height:24px!important;
  font-size:11.5px!important;
}
.account-settings-actions img,
.account-settings-logout img{
  width:16px!important;
  height:16px!important;
  flex-basis:16px!important;
}
.account-settings-current,
.account-settings-email{
  margin-bottom:12px!important;
  font-size:11.5px!important;
}
.account-settings-email{
  margin:12px 0!important;
  padding-top:10px!important;
}
.account-settings-toggle{
  gap:12px!important;
  font-size:11.5px!important;
}
.account-settings-toggle span{
  gap:8px!important;
}
.account-settings-toggle img{
  width:16px!important;
  height:16px!important;
}
.account-settings-toggle i{
  width:38px!important;
  height:20px!important;
}
.account-settings-toggle i::after{
  right:3px!important;
  top:3px!important;
  width:14px!important;
  height:14px!important;
}
.account-settings-toggle input:not(:checked)+i::after{
  right:21px!important;
}
@media(max-width:760px){
  .account-settings-overlay{
    padding:10px!important;
  }
  .account-settings-modal{
    width:calc(100vw - 20px)!important;
    max-height:calc(100vh - 20px)!important;
    padding:16px 12px!important;
  }
  .account-settings-modal-head{
    grid-template-columns:42px minmax(0,1fr)!important;
    gap:10px!important;
    padding-right:40px!important;
  }
  .account-settings-head-icon{
    width:40px!important;
    height:40px!important;
  }
  .account-settings-head-icon img{
    width:24px!important;
    height:24px!important;
  }
  .account-settings-modal h2{
    font-size:20px!important;
  }
  .account-settings-modal-head p{
    font-size:12px!important;
  }
  .account-settings-card{
    padding:14px!important;
  }
}

/* Log Out confirmation from My Profile. */
.logout-confirm-overlay{
  position:fixed!important;
  inset:0!important;
  z-index:2147483350!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:18px!important;
  background:rgba(3,7,28,.72)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}
.logout-confirm-modal{
  position:relative!important;
  width:min(420px,calc(100vw - 32px))!important;
  padding:24px!important;
  border-radius:20px!important;
  border:1px solid rgba(157,135,255,.58)!important;
  background:
    radial-gradient(circle at 15% 5%,rgba(126,88,255,.34),transparent 36%),
    linear-gradient(145deg,rgba(28,24,82,.98),rgba(5,10,36,.98))!important;
  box-shadow:0 24px 82px rgba(0,0,0,.58),0 0 34px rgba(117,80,255,.28),inset 0 1px 0 rgba(255,255,255,.08)!important;
  color:#fff!important;
}
.logout-confirm-close{
  position:absolute!important;
  top:14px!important;
  right:14px!important;
  left:auto!important;
  width:34px!important;
  height:34px!important;
  border-radius:50%!important;
  border:1px solid rgba(194,180,255,.45)!important;
  background:rgba(255,255,255,.06)!important;
  color:#fff!important;
  font-size:24px!important;
  line-height:1!important;
  cursor:pointer!important;
}
.logout-confirm-modal header{
  display:grid!important;
  grid-template-columns:50px minmax(0,1fr)!important;
  gap:14px!important;
  align-items:center!important;
  padding-right:46px!important;
}
.logout-confirm-modal header>span{
  display:grid!important;
  place-items:center!important;
  width:48px!important;
  height:48px!important;
  border-radius:50%!important;
  border:1px solid rgba(255,111,134,.40)!important;
  background:rgba(255,75,106,.12)!important;
}
.logout-confirm-modal header img{
  width:26px!important;
  height:26px!important;
}
.logout-confirm-modal h2{
  margin:0!important;
  color:#fff!important;
  font-size:25px!important;
  line-height:1.1!important;
  font-weight:1000!important;
}
.logout-confirm-modal p{
  margin:6px 0 0!important;
  color:#d8ddf6!important;
  font-size:13px!important;
}
.logout-confirm-modal footer{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:12px!important;
  margin-top:22px!important;
}
.logout-confirm-modal footer button{
  min-height:42px!important;
  border-radius:12px!important;
  border:1px solid rgba(176,162,235,.42)!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:900!important;
  cursor:pointer!important;
}
.logout-confirm-modal footer button.secondary{
  background:rgba(255,255,255,.07)!important;
}
.logout-confirm-modal footer button.danger{
  border-color:rgba(255,95,118,.58)!important;
  background:linear-gradient(135deg,#e84b67,#9c1f3b)!important;
  box-shadow:0 12px 28px rgba(232,75,103,.24)!important;
}
@media(max-width:520px){
  .logout-confirm-modal{
    padding:20px 16px!important;
  }
  .logout-confirm-modal footer{
    grid-template-columns:1fr!important;
  }
}

/* Billing & Purchases modal launched from My Profile. */
.billing-purchases-overlay{
  position:fixed!important;
  inset:0!important;
  z-index:2147483300!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:18px!important;
  overflow:hidden!important;
  background:rgba(3,7,24,.72)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}
.billing-purchases-modal{
  position:relative!important;
  width:min(660px,calc(100vw - 32px))!important;
  max-height:calc(100vh - 36px)!important;
  overflow:auto!important;
  padding:22px!important;
  border-radius:20px!important;
  color:#f8f5ff!important;
  background:
    radial-gradient(circle at 76% 8%,rgba(104,75,255,.20),transparent 32%),
    linear-gradient(180deg,rgba(23,25,70,.98),rgba(10,15,48,.99))!important;
  border:1.5px solid rgba(142,119,255,.72)!important;
  box-shadow:0 28px 92px rgba(0,0,0,.62),0 0 38px rgba(111,73,255,.30),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.billing-purchases-close{
  position:absolute!important;
  top:16px!important;
  right:16px!important;
  left:auto!important;
  z-index:2!important;
  display:grid!important;
  place-items:center!important;
  width:36px!important;
  height:36px!important;
  border-radius:50%!important;
  border:1px solid rgba(175,158,255,.48)!important;
  background:rgba(18,23,63,.72)!important;
  color:#fff!important;
  font-size:26px!important;
  line-height:1!important;
  cursor:pointer!important;
}
.billing-purchases-head{
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr)!important;
  gap:14px!important;
  align-items:center!important;
  padding-right:50px!important;
  margin-bottom:16px!important;
}
.billing-purchases-head-icon{
  display:grid!important;
  place-items:center!important;
  width:54px!important;
  height:54px!important;
  border-radius:50%!important;
  background:radial-gradient(circle,rgba(139,104,255,.52),rgba(39,31,93,.88))!important;
  border:1px solid rgba(174,154,255,.55)!important;
}
.billing-purchases-head-icon img{
  width:32px!important;
  height:32px!important;
}
.billing-purchases-modal h2{
  margin:0!important;
  color:#fff!important;
  font-size:25px!important;
  line-height:1.05!important;
  font-weight:1000!important;
}
.billing-purchases-head p{
  margin:6px 0 0!important;
  color:#cfd4ef!important;
  font-size:13px!important;
}
.billing-summary-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  margin-bottom:10px!important;
}
.billing-summary-grid article{
  display:grid!important;
  justify-items:center!important;
  gap:5px!important;
  min-height:92px!important;
  padding:13px 10px!important;
  border:1px solid rgba(151,134,231,.42)!important;
  border-radius:13px!important;
  background:rgba(10,17,52,.58)!important;
  text-align:center!important;
}
.billing-summary-grid img{
  width:23px!important;
  height:23px!important;
}
.billing-summary-grid span{
  color:#d8def7!important;
  font-size:11px!important;
}
.billing-summary-grid b{
  color:#fff!important;
  font-size:13px!important;
  line-height:1.25!important;
}
.billing-access-help{
  margin:4px 0 10px!important;
  padding:10px 12px!important;
  border:1px solid rgba(255,214,107,.34)!important;
  border-radius:12px!important;
  background:rgba(255,214,107,.1)!important;
  color:#f2edff!important;
  font-size:12px!important;
  line-height:1.45!important;
}
.billing-access-help a{
  color:#ffd66b!important;
  font-weight:900!important;
  text-decoration:underline!important;
}
.billing-list-panel{
  margin-top:10px!important;
  padding:12px!important;
  border:1px solid rgba(151,134,231,.42)!important;
  border-radius:13px!important;
  background:linear-gradient(180deg,rgba(47,43,99,.58),rgba(28,31,78,.64))!important;
}
.billing-panel-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  margin-bottom:8px!important;
}
.billing-panel-head h3{
  margin:0!important;
  color:#fff!important;
  font-size:15px!important;
  font-weight:1000!important;
}
.billing-panel-head button{
  border:0!important;
  background:transparent!important;
  color:#a98bff!important;
  font-size:12px!important;
  font-weight:1000!important;
  cursor:pointer!important;
}
.billing-row-list{
  display:grid!important;
  gap:0!important;
  overflow:hidden!important;
  border-radius:11px!important;
  border:1px solid rgba(151,134,231,.24)!important;
}
.billing-data-row{
  display:grid!important;
  grid-template-columns:32px minmax(0,1.1fr) minmax(92px,.75fr) minmax(68px,.55fr) minmax(54px,.35fr)!important;
  align-items:center!important;
  gap:9px!important;
  min-height:42px!important;
  padding:8px 10px!important;
  border-bottom:1px solid rgba(151,134,231,.18)!important;
  background:rgba(255,255,255,.035)!important;
}
.billing-data-row:last-child{
  border-bottom:0!important;
}
.billing-data-row>img{
  width:22px!important;
  height:22px!important;
}
.billing-data-row b,
.billing-data-row strong{
  color:#fff!important;
  font-size:12px!important;
}
.billing-data-row span,
.billing-data-row em{
  color:#d7dcf5!important;
  font-size:11px!important;
  font-style:normal!important;
}
.billing-data-row button{
  display:grid!important;
  place-items:center!important;
  width:28px!important;
  height:28px!important;
  justify-self:end!important;
  border-radius:50%!important;
  border:1px solid rgba(151,134,231,.42)!important;
  background:rgba(255,255,255,.08)!important;
  cursor:pointer!important;
}
.billing-data-row button img{
  width:15px!important;
  height:15px!important;
  transform:rotate(-90deg)!important;
}
.billing-empty{
  margin:0!important;
  padding:14px!important;
  color:#d7dcf5!important;
  font-size:12px!important;
}
.billing-actions{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  margin-top:12px!important;
}
.billing-actions button{
  min-height:44px!important;
  border:1px solid rgba(151,134,231,.42)!important;
  border-radius:11px!important;
  background:rgba(255,255,255,.08)!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:1000!important;
  cursor:pointer!important;
}
.billing-actions button.primary{
  border:0!important;
  background:linear-gradient(180deg,#8466ff,#5d43df)!important;
}
.billing-actions img{
  width:18px!important;
  height:18px!important;
  margin-right:7px!important;
  vertical-align:-4px!important;
}
@media(max-width:760px){
  .billing-purchases-overlay{
    align-items:flex-start!important;
    overflow:auto!important;
    padding:10px!important;
  }
  .billing-purchases-modal{
    width:calc(100vw - 20px)!important;
    max-height:calc(100vh - 20px)!important;
    padding:16px 12px!important;
  }
  .billing-purchases-head{
    grid-template-columns:44px minmax(0,1fr)!important;
    gap:10px!important;
    padding-right:40px!important;
  }
  .billing-purchases-head-icon{
    width:42px!important;
    height:42px!important;
  }
  .billing-purchases-head-icon img{
    width:25px!important;
    height:25px!important;
  }
  .billing-purchases-modal h2{
    font-size:21px!important;
  }
  .billing-summary-grid,
  .billing-actions{
    grid-template-columns:1fr!important;
  }
  .billing-data-row{
    grid-template-columns:28px minmax(0,1fr) auto!important;
    grid-template-areas:
      "icon name amount"
      "icon date status"!important;
  }
  .billing-data-row>img{grid-area:icon!important;}
  .billing-data-row b{grid-area:name!important;}
  .billing-data-row span{grid-area:date!important;}
  .billing-data-row strong{grid-area:amount!important;}
  .billing-data-row em,
  .billing-data-row button{grid-area:status!important;}
}

/* Global modal close-button centering. Alignment-only fix for circular X buttons. */
.modal-close,
.close-btn,
.dragon-modal-close,
.profile-modal-close,
.settings-modal-close,
.range-close,
.report-close,
.support-close,
.hatcher-guide-close,
.coin-guide-close,
.game-how-close,
.feed-confirmation-close,
.account-settings-close,
.logout-confirm-close,
.billing-purchases-close{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  line-height:1!important;
  text-align:center!important;
  box-sizing:border-box!important;
  aspect-ratio:1/1!important;
  font-family:Arial, Helvetica, sans-serif!important;
}
.modal-close svg,
.close-btn svg,
.dragon-modal-close svg,
.profile-modal-close svg,
.settings-modal-close svg,
.range-close svg,
.report-close svg,
.support-close svg,
.hatcher-guide-close svg,
.coin-guide-close svg,
.game-how-close svg,
.feed-confirmation-close svg,
.account-settings-close svg,
.logout-confirm-close svg,
.billing-purchases-close svg,
.modal-close img,
.close-btn img,
.dragon-modal-close img,
.profile-modal-close img,
.settings-modal-close img,
.range-close img,
.report-close img,
.support-close img,
.hatcher-guide-close img,
.coin-guide-close img,
.game-how-close img,
.feed-confirmation-close img,
.account-settings-close img,
.logout-confirm-close img,
.billing-purchases-close img{
  display:block!important;
  flex:0 0 auto!important;
  margin:0!important;
}

/* Shared profile / Dragon Studio / header background image refresh. */
:root{
  --profile-dragon-panel-bg:url("assets/assets_webp/my-profile-backgrounds/bg_profile_dragon_studio_panel.webp");
}
.topbar,
.topbar.public-header,
.topbar.app-header{
  background:
    linear-gradient(90deg,rgba(4,10,34,.86),rgba(11,16,48,.72),rgba(4,10,34,.86)),
    var(--profile-dragon-panel-bg)!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  border-bottom-color:rgba(137,119,255,.26)!important;
}
#profilePage.profile-v2-page,
#profilePage .profile-v2-dashboard,
#profilePage .profile-v2-hero,
#profilePage .profile-v2-card,
#profilePage .profile-v2-footer,
body.dragon-studio-mode #dragonStudioPage,
body.dragon-studio-mode #dragonStudioPage .ds-dashboard,
body.dragon-studio-mode #dragonStudioPage .ds-dashboard > section,
body.dragon-studio-mode #dragonStudioPage .ds-dashboard .panel{
  background-image:
    linear-gradient(135deg,rgba(5,10,34,.78),rgba(15,20,58,.60)),
    var(--profile-dragon-panel-bg)!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}
#profilePage .profile-v2-card,
#profilePage .profile-v2-footer,
body.dragon-studio-mode #dragonStudioPage .ds-dashboard > section,
body.dragon-studio-mode #dragonStudioPage .ds-dashboard .panel{
  background-color:rgba(7,13,42,.74)!important;
  background-blend-mode:multiply,normal!important;
}

/* Match SSAT's clean level-card hover: no pink/purple glow layer for Grade 2-12 or ISEE. */
body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid.g212 .level-card:hover,
body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid.isee .level-card:hover{
  transform:translateY(-4px)!important;
  border-color:rgba(177,161,255,.80)!important;
  box-shadow:0 18px 40px rgba(79,70,229,.16)!important;
}

body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid.g212 .level-card::after,
body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid.isee .level-card::after,
body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid.g212 .level-card:hover::after,
body:not(.dragon-studio-mode) #levelPage #levelGrid.level-grid.isee .level-card:hover::after{
  display:none!important;
  opacity:0!important;
  background:none!important;
}

/* Public login modal */
.modal-backdrop.login-modal-backdrop{
  background:rgba(3,7,26,.72)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
  z-index:9000!important;
}

#loginModal.login-modal{
  width:min(560px,calc(100vw - 32px))!important;
  padding:44px 54px 40px!important;
  border-radius:24px!important;
  border:1.5px solid rgba(213,92,255,.88)!important;
  background:
    radial-gradient(circle at 50% 0%,rgba(139,92,246,.22),transparent 34%),
    radial-gradient(circle at 12% 10%,rgba(255,102,196,.12),transparent 25%),
    linear-gradient(145deg,rgba(21,24,61,.98),rgba(7,12,42,.98) 58%,rgba(12,17,55,.98))!important;
  box-shadow:
    0 32px 90px rgba(0,0,0,.62),
    0 0 34px rgba(191,80,255,.34),
    inset 0 1px 0 rgba(255,255,255,.08)!important;
  color:#fff!important;
  overflow:auto!important;
}

#loginModal .login-modal-close{
  width:46px!important;
  height:46px!important;
  border:2px solid rgba(221,115,255,.82)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.045)!important;
  color:#fff!important;
  font-size:34px!important;
  font-weight:300!important;
  line-height:1!important;
  box-shadow:0 0 20px rgba(191,80,255,.34)!important;
}

#loginModal .login-modal-brand{
  display:grid!important;
  place-items:center!important;
  width:86px!important;
  height:86px!important;
  margin:0 auto 16px!important;
  border-radius:24px!important;
  background:
    url("assets/assets_webp/eggs/21_crystal_egg.webp?v=20260615-login-crystal-bg") center/78px 78px no-repeat,
    radial-gradient(circle,rgba(146,103,255,.36),rgba(11,15,47,.20) 68%)!important;
  filter:drop-shadow(0 0 18px rgba(151,91,255,.58))!important;
  overflow:visible!important;
}

#loginModal .login-modal-brand img{
  display:block!important;
  width:78px!important;
  height:78px!important;
  object-fit:contain!important;
  object-position:center!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

#loginModal h2{
  display:block!important;
  margin:0 auto!important;
  padding:0 0 6px!important;
  text-align:center!important;
  font-size:34px!important;
  line-height:1.22!important;
  font-weight:900!important;
  letter-spacing:0!important;
  background:linear-gradient(90deg,#ff68c8,#8f65ff 65%,#c7b9ff)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  overflow:visible!important;
}

#loginModal .login-modal-subtitle{
  margin:14px auto 28px!important;
  text-align:center!important;
  color:#f1f4ff!important;
  font-size:17px!important;
  line-height:1.45!important;
  font-weight:650!important;
}

#loginModal .login-modal-divider{
  display:grid!important;
  grid-template-columns:1fr auto 1fr!important;
  align-items:center!important;
  gap:20px!important;
  margin:0 0 26px!important;
  color:#cfd6ff!important;
  font-size:14px!important;
  font-weight:750!important;
}

#loginModal .login-modal-divider span{
  height:1px!important;
  background:linear-gradient(90deg,transparent,rgba(205,214,255,.30),transparent)!important;
}

#loginModal .login-form{
  display:grid!important;
  gap:12px!important;
}

#loginModal .login-form label{
  color:#fff!important;
  font-size:14px!important;
  font-weight:900!important;
}

#loginModal .login-field{
  display:grid!important;
  grid-template-columns:24px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:14px!important;
  min-height:58px!important;
  padding:0 16px!important;
  border:1px solid rgba(169,181,255,.25)!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.055)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
}

#loginModal .login-field > img{
  width:24px!important;
  height:24px!important;
  object-fit:contain!important;
}

#loginModal .login-field input{
  width:100%!important;
  min-width:0!important;
  height:56px!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  color:#fff!important;
  font-size:16px!important;
  font-weight:750!important;
}

#loginModal .login-field input::placeholder{
  color:rgba(218,224,255,.56)!important;
}

#loginModal .login-eye-toggle{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:34px!important;
  height:34px!important;
  padding:0!important;
  border:0!important;
  border-radius:999px!important;
  background:transparent!important;
  cursor:pointer!important;
}

#loginModal .login-eye-toggle img{
  width:24px!important;
  height:24px!important;
  display:block!important;
}

#loginModal .login-forgot{
  justify-self:end!important;
  margin:2px 0 6px!important;
  border:0!important;
  background:transparent!important;
  color:#ff65c2!important;
  font-size:14px!important;
  font-weight:850!important;
  cursor:pointer!important;
}

#loginModal .login-modal-error{
  min-height:18px!important;
  margin:0!important;
  color:#ff9bad!important;
  font-size:13px!important;
  font-weight:850!important;
  text-align:left!important;
}
#loginModal .login-modal-error.success{
  color:#7ee2a8!important;
}

#loginModal .login-submit{
  min-height:58px!important;
  border:0!important;
  border-radius:12px!important;
  background:linear-gradient(90deg,#7b3dff,#f45aa9)!important;
  color:#fff!important;
  font-size:18px!important;
  font-weight:1000!important;
  cursor:pointer!important;
  box-shadow:0 18px 34px rgba(159,65,220,.28)!important;
}

#loginModal .login-signup{
  margin:24px 0 0!important;
  text-align:center!important;
  color:#cfd6ff!important;
  font-size:15px!important;
  font-weight:650!important;
}

#loginModal .login-signup button{
  border:0!important;
  background:transparent!important;
  color:#9b71ff!important;
  font:inherit!important;
  font-weight:950!important;
  cursor:pointer!important;
}

@media(max-width:560px){
  #loginModal.login-modal{
    width:calc(100vw - 24px)!important;
    padding:36px 22px 28px!important;
    border-radius:20px!important;
  }
  #loginModal h2{font-size:32px!important;}
  #loginModal .login-modal-subtitle{font-size:15px!important;}
  #loginModal .login-field{min-height:54px!important;}
  #loginModal .login-field input{height:52px!important;font-size:15px!important;}
}

/* My Dragon Studio reference dashboard redesign. CSS-only: keep data and asset source logic intact. */
body.dragon-studio-mode .dragon-studio-v2.ds-dashboard{
  min-height:100vh!important;
  padding:16px 28px 24px!important;
  background:
    radial-gradient(circle at 14% 10%,rgba(133,91,255,.18),transparent 26%),
    radial-gradient(circle at 82% 16%,rgba(64,117,255,.13),transparent 28%),
    linear-gradient(180deg,rgba(4,9,31,.98),rgba(5,14,37,.99))!important;
}

body.dragon-studio-mode .ds-dashboard .ds-summary-row{
  width:100%!important;
  max-width:1880px!important;
  margin:0 auto 18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:16px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-summary-row::before{
  content:"My Dragon Studio";
  margin-right:auto!important;
  color:#ffffff!important;
  font-size:22px!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:0!important;
  text-shadow:0 3px 18px rgba(0,0,0,.42)!important;
}

body.dragon-studio-mode .ds-dashboard .ds-summary-row article:nth-of-type(2){
  display:none!important;
}

body.dragon-studio-mode .ds-dashboard .ds-summary-row article,
body.dragon-studio-mode .ds-dashboard .ds-summary-row button{
  flex:0 1 235px!important;
  min-width:185px!important;
  max-width:250px!important;
  height:52px!important;
  min-height:52px!important;
  padding:8px 16px!important;
  border-radius:13px!important;
  background:linear-gradient(180deg,rgba(18,25,62,.94),rgba(8,13,38,.96))!important;
  border:1px solid rgba(126,111,214,.46)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06)!important;
}

body.dragon-studio-mode .ds-dashboard .ds-summary-row button:nth-of-type(1){
  order:5!important;
}

body.dragon-studio-mode .ds-dashboard .ds-summary-row button:nth-of-type(2){
  order:4!important;
}

body.dragon-studio-mode .ds-dashboard .ds-summary-row img{
  width:26px!important;
  height:26px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-summary-row article strong{
  font-size:22px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-summary-row article span,
body.dragon-studio-mode .ds-dashboard .ds-summary-row button b{
  font-size:13px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-summary-row button span{
  display:none!important;
}

body.dragon-studio-mode .ds-dashboard .ds-dashboard-grid{
  width:100%!important;
  max-width:1880px!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:minmax(360px,1fr) minmax(500px,1.2fr) minmax(360px,1fr)!important;
  grid-template-areas:
    "dragon hatch tasks"
    "family hatchery badges"
    "feed feed share"!important;
  gap:18px!important;
  align-items:stretch!important;
}

body.dragon-studio-mode .ds-dashboard .ds-my-dragon{grid-area:dragon!important}
body.dragon-studio-mode .ds-dashboard .ds-hatch{grid-area:hatch!important}
body.dragon-studio-mode .ds-dashboard .ds-tasks{grid-area:tasks!important}
body.dragon-studio-mode .ds-dashboard .ds-family{grid-area:family!important}
body.dragon-studio-mode .ds-dashboard .ds-hatchery{grid-area:hatchery!important}
body.dragon-studio-mode .ds-dashboard .ds-badges{grid-area:badges!important}
body.dragon-studio-mode .ds-dashboard .ds-feed{grid-area:feed!important}
body.dragon-studio-mode .ds-dashboard .ds-share{grid-area:share!important}

body.dragon-studio-mode .ds-dashboard .ds-card{
  position:relative!important;
  min-width:0!important;
  padding:20px!important;
  border-radius:18px!important;
  background:
    radial-gradient(circle at 24% 12%,rgba(116,83,255,.14),transparent 28%),
    linear-gradient(180deg,rgba(12,22,54,.88),rgba(5,12,34,.94))!important;
  border:1px solid rgba(137,112,255,.58)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.06)!important;
  overflow:hidden!important;
}

body.dragon-studio-mode .ds-dashboard .ds-card h2{
  margin:0 0 12px!important;
  display:flex!important;
  align-items:center!important;
  gap:0!important;
  color:#ffffff!important;
  font-size:22px!important;
  line-height:1.1!important;
  font-weight:1000!important;
  text-shadow:0 3px 14px rgba(0,0,0,.42)!important;
}

body.dragon-studio-mode .ds-dashboard .ds-card h2 > img:first-child,
body.dragon-studio-mode .ds-dashboard .ds-card h2 > .ui-inline-icon:first-child,
body.dragon-studio-mode .ds-dashboard .ds-card h2 > .ds-ui-icon:first-child,
body.dragon-studio-mode .ds-dashboard .ds-hatch-header h2 > .ui-inline-icon:first-child{
  display:none!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-card,
body.dragon-studio-mode .ds-dashboard .ds-hatch,
body.dragon-studio-mode .ds-dashboard .ds-tasks{
  height:470px!important;
  min-height:470px!important;
  max-height:470px!important;
  align-self:stretch!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-card{
  padding:18px 20px!important;
  background:
    linear-gradient(90deg,rgba(4,8,28,.55),rgba(4,8,28,.10),rgba(4,8,28,.58)),
    url("assets/my-dragon-studio-batch/optimized-my-dragon-studio-webp/my-dragon-card/bg_my_dragon_icy_ruins.webp") center/cover no-repeat!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-card > .card-inner{
  height:100%!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr) auto auto!important;
  gap:8px!important;
  padding:0!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-header{
  align-self:start!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-hero{
  min-height:0!important;
  display:grid!important;
  place-items:center!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-art-frame{
  width:min(86%,295px)!important;
  height:245px!important;
  margin:0 auto!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-art-frame img{
  width:100%!important;
  height:100%!important;
  max-width:295px!important;
  max-height:245px!important;
  object-fit:contain!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-name{
  margin:0!important;
  color:#ffffff!important;
  font-size:28px!important;
  line-height:1!important;
  font-weight:1000!important;
  text-align:center!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-meta-bar{
  height:auto!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-meta-bar .meta-pill{
  min-height:36px!important;
  padding:7px 10px!important;
  border-radius:10px!important;
  justify-content:center!important;
}

body.dragon-studio-mode .ds-dashboard .dragon-avatar-slot{
  grid-column:1 / -1!important;
}

body.dragon-studio-mode .ds-dashboard .switch-avatar-btn{
  width:min(100%,280px)!important;
  min-height:44px!important;
  margin:0 auto!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,#8561ff,#5a3ad7)!important;
}

body.dragon-studio-mode .ds-dashboard .ds-hatch{
  padding:18px 20px!important;
  display:grid!important;
  grid-template-rows:auto auto minmax(0,1fr) auto auto!important;
  background:
    linear-gradient(180deg,rgba(4,8,28,.20),rgba(4,8,28,.34)),
    url("assets/my-dragon-studio-batch/optimized-my-dragon-studio-webp/hatching/hatching_background.webp") center/cover no-repeat!important;
}

body.dragon-studio-mode .ds-dashboard .ds-hatch-header{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
}

body.dragon-studio-mode .ds-dashboard .switch-hatching-egg-btn{
  min-height:34px!important;
  padding:0 14px!important;
  border-radius:10px!important;
  font-size:13px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-hatch-title{
  margin:4px 0 2px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-hatch-title strong{
  min-width:128px!important;
  height:42px!important;
  padding:0 18px!important;
  font-size:22px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-days{
  --node-w:88px!important;
  width:min(100%,650px)!important;
  min-height:305px!important;
  margin:4px auto!important;
  grid-template-rows:repeat(3,68px) 86px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day b{
  font-size:12px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day > img{
  width:66px!important;
  height:66px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-day.hatch > img{
  width:88px!important;
  height:88px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-hatch > small{
  margin:2px auto 9px!important;
  font-size:13px!important;
  color:#ffffff!important;
}

body.dragon-studio-mode .ds-dashboard .ds-hatch > button{
  width:min(100%,330px)!important;
  height:46px!important;
  min-height:46px!important;
  padding:0 22px!important;
  border-radius:12px!important;
  font-size:16px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-tasks{
  padding:18px 20px!important;
  display:flex!important;
  flex-direction:column!important;
}

body.dragon-studio-mode .ds-dashboard .ds-tasks h2{
  margin-bottom:4px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-tasks > p{
  margin:0 0 8px!important;
  color:rgba(232,232,255,.78)!important;
  font-size:13px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-task-row{
  min-height:31px!important;
  padding:3px 0!important;
  grid-template-columns:18px minmax(0,1fr) auto 58px!important;
  border-top:1px solid rgba(143,128,219,.20)!important;
}

body.dragon-studio-mode .ds-dashboard .ds-task-row b{
  font-size:13px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-task-row em{
  font-size:11px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-task-row button{
  width:58px!important;
  min-height:28px!important;
  height:28px!important;
  border-radius:9px!important;
  font-size:12px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-tasks footer{
  margin-top:auto!important;
  min-height:44px!important;
  padding:9px 12px!important;
  border-radius:10px!important;
  font-size:12px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-family,
body.dragon-studio-mode .ds-dashboard .ds-hatchery,
body.dragon-studio-mode .ds-dashboard .ds-badges{
  height:245px!important;
  min-height:245px!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  gap:8px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-family h2,
body.dragon-studio-mode .ds-dashboard .ds-hatchery h2,
body.dragon-studio-mode .ds-dashboard .ds-badges h2{
  margin-bottom:0!important;
  font-size:20px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-gallery-grid,
body.dragon-studio-mode .ds-dashboard .ds-badges > div{
  min-height:0!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-badges > div{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}

body.dragon-studio-mode .ds-dashboard .ds-gallery-tile,
body.dragon-studio-mode .ds-dashboard .ds-badges > div button{
  min-height:74px!important;
  padding:7px 8px!important;
  border-radius:10px!important;
  background:rgba(9,18,48,.70)!important;
}

body.dragon-studio-mode .ds-dashboard .ds-gallery-tile img,
body.dragon-studio-mode .ds-dashboard .ds-badges > div button img{
  max-width:58px!important;
  max-height:58px!important;
  object-fit:contain!important;
}

body.dragon-studio-mode .ds-dashboard .ds-gallery-tile b{
  font-size:12px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-family > button,
body.dragon-studio-mode .ds-dashboard .ds-hatchery > button,
body.dragon-studio-mode .ds-dashboard .ds-badges > button{
  min-height:28px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  justify-self:end!important;
  color:#c3a8ff!important;
  font-size:12px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-feed,
body.dragon-studio-mode .ds-dashboard .ds-share{
  height:220px!important;
  min-height:220px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-feed{
  padding:18px 20px!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr)!important;
  gap:8px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-feed h2{
  margin:0!important;
  font-size:20px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-feed h2 small{
  display:block!important;
  margin-top:4px!important;
  color:rgba(232,232,255,.82)!important;
  font-size:12px!important;
  font-weight:650!important;
}

body.dragon-studio-mode .ds-dashboard .ds-feed-grid{
  display:grid!important;
  grid-template-columns:repeat(8,minmax(0,1fr))!important;
  gap:10px!important;
  min-height:0!important;
}

body.dragon-studio-mode .ds-dashboard .ds-feed-item{
  min-height:130px!important;
  padding:9px 8px!important;
  border-radius:10px!important;
  display:grid!important;
  grid-template-rows:minmax(0,1fr) auto auto!important;
  align-items:center!important;
  justify-items:center!important;
}

body.dragon-studio-mode .ds-dashboard .ds-feed-item img{
  max-width:64px!important;
  max-height:64px!important;
  object-fit:contain!important;
}

body.dragon-studio-mode .ds-dashboard .ds-feed-item b,
body.dragon-studio-mode .ds-dashboard .ds-feed-item span{
  font-size:12px!important;
  line-height:1.12!important;
}

body.dragon-studio-mode .ds-dashboard .ds-feed-item span img{
  width:14px!important;
  height:14px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share{
  padding:18px 20px!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:auto minmax(0,1fr)!important;
  gap:12px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share h2{
  margin:0 0 6px!important;
  font-size:20px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share p{
  margin:0!important;
  font-size:13px!important;
  color:rgba(232,232,255,.82)!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share > .share-magic-img,
body.dragon-studio-mode .ds-dashboard .ds-share > img{
  position:absolute!important;
  left:20px!important;
  bottom:18px!important;
  width:100px!important;
  height:76px!important;
  border-radius:10px!important;
  object-fit:cover!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share button{
  position:absolute!important;
  right:20px!important;
  bottom:30px!important;
  width:min(230px,48%)!important;
  height:52px!important;
  min-height:52px!important;
  border-radius:12px!important;
  font-size:14px!important;
}

@media(max-width:1280px){
  body.dragon-studio-mode .ds-dashboard .ds-dashboard-grid{
    grid-template-columns:1fr 1fr!important;
    grid-template-areas:
      "dragon hatch"
      "tasks tasks"
      "family hatchery"
      "badges badges"
      "feed feed"
      "share share"!important;
  }
  body.dragon-studio-mode .ds-dashboard .my-dragon-card,
  body.dragon-studio-mode .ds-dashboard .ds-hatch,
  body.dragon-studio-mode .ds-dashboard .ds-tasks,
  body.dragon-studio-mode .ds-dashboard .ds-family,
  body.dragon-studio-mode .ds-dashboard .ds-hatchery,
  body.dragon-studio-mode .ds-dashboard .ds-badges,
  body.dragon-studio-mode .ds-dashboard .ds-feed,
  body.dragon-studio-mode .ds-dashboard .ds-share{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-feed-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}

@media(max-width:760px){
  body.dragon-studio-mode .dragon-studio-v2.ds-dashboard{
    padding:12px!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-summary-row{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-summary-row::before{
    grid-column:1 / -1!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-summary-row article,
  body.dragon-studio-mode .ds-dashboard .ds-summary-row button{
    min-width:0!important;
    max-width:none!important;
    width:100%!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-dashboard-grid{
    grid-template-columns:1fr!important;
    grid-template-areas:
      "dragon"
      "hatch"
      "tasks"
      "family"
      "hatchery"
      "badges"
      "feed"
      "share"!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-gallery-grid,
  body.dragon-studio-mode .ds-dashboard .ds-badges > div,
  body.dragon-studio-mode .ds-dashboard .ds-feed-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-hatch .ds-days{
    --node-w:76px!important;
    min-height:270px!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-share > .share-magic-img,
  body.dragon-studio-mode .ds-dashboard .ds-share > img,
  body.dragon-studio-mode .ds-dashboard .ds-share button{
    position:static!important;
    width:100%!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-share > .share-magic-img,
  body.dragon-studio-mode .ds-dashboard .ds-share > img{
    height:100px!important;
  }
}

/* My Dragon Studio reference bug fixes: alignment only, no logic or asset changes. */
body.dragon-studio-mode .ds-dashboard .ds-family,
body.dragon-studio-mode .ds-dashboard .ds-hatchery,
body.dragon-studio-mode .ds-dashboard .ds-badges{
  padding:18px 20px 16px!important;
  grid-template-rows:auto minmax(0,1fr)!important;
}

body.dragon-studio-mode .ds-dashboard .ds-family h2,
body.dragon-studio-mode .ds-dashboard .ds-hatchery h2,
body.dragon-studio-mode .ds-dashboard .ds-badges h2{
  min-height:30px!important;
  padding-right:126px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-family > button,
body.dragon-studio-mode .ds-dashboard .ds-hatchery > button,
body.dragon-studio-mode .ds-dashboard .ds-badges > button{
  position:absolute!important;
  top:18px!important;
  right:20px!important;
  width:auto!important;
  min-width:108px!important;
  max-width:132px!important;
  min-height:30px!important;
  height:30px!important;
  padding:0 8px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:5px!important;
  color:#cdb8ff!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:850!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  z-index:3!important;
}

body.dragon-studio-mode .ds-dashboard .ds-family .ds-gallery-grid,
body.dragon-studio-mode .ds-dashboard .ds-hatchery .ds-gallery-grid,
body.dragon-studio-mode .ds-dashboard .ds-badges > div{
  margin-top:2px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-feed{
  height:250px!important;
  min-height:250px!important;
  padding:18px 20px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-feed-grid{
  grid-template-columns:repeat(8,minmax(92px,1fr))!important;
  gap:12px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-feed-item{
  min-height:158px!important;
  padding:10px 8px 9px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-feed-item > img{
  order:1!important;
  width:92px!important;
  height:82px!important;
  max-width:92px!important;
  max-height:82px!important;
  object-fit:contain!important;
  margin:auto auto 4px!important;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))!important;
}

body.dragon-studio-mode .ds-dashboard .ds-feed-item b{
  order:2!important;
  min-height:28px!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  color:#ffffff!important;
  text-align:center!important;
}

body.dragon-studio-mode .ds-dashboard .ds-feed-item span{
  order:3!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share{
  height:250px!important;
  min-height:250px!important;
  padding:20px!important;
  display:grid!important;
  grid-template-columns:120px minmax(0,1fr) 230px!important;
  grid-template-rows:1fr!important;
  align-items:center!important;
  gap:18px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share > .share-magic-img,
body.dragon-studio-mode .ds-dashboard .ds-share > img{
  position:static!important;
  grid-column:1!important;
  grid-row:1!important;
  width:112px!important;
  height:112px!important;
  border-radius:12px!important;
  object-fit:cover!important;
  align-self:center!important;
  justify-self:center!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share > div{
  grid-column:2 / 4!important;
  grid-row:1!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 230px!important;
  grid-template-rows:auto auto!important;
  align-items:center!important;
  column-gap:20px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share h2{
  grid-column:1!important;
  grid-row:1!important;
  margin:0 0 6px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share p{
  grid-column:1!important;
  grid-row:2!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share button{
  position:static!important;
  grid-column:2!important;
  grid-row:1 / 3!important;
  width:100%!important;
  height:56px!important;
  min-height:56px!important;
  align-self:center!important;
  justify-self:end!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-card > .card-inner{
  grid-template-rows:auto minmax(0,1fr) auto 54px!important;
  gap:8px!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-meta-bar{
  display:grid!important;
  grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(140px,1.28fr)!important;
  gap:8px!important;
  align-items:center!important;
  height:54px!important;
  min-height:54px!important;
  padding:0!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-meta-bar .meta-pill,
body.dragon-studio-mode .ds-dashboard .dragon-avatar-slot{
  grid-column:auto!important;
  min-width:0!important;
  min-height:54px!important;
  height:54px!important;
  padding:0 10px!important;
  border-radius:12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
}

body.dragon-studio-mode .ds-dashboard .my-dragon-meta-bar .meta-pill span,
body.dragon-studio-mode .ds-dashboard .my-dragon-meta-bar .meta-pill b,
body.dragon-studio-mode .ds-dashboard .my-dragon-meta-bar .mood-label{
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

body.dragon-studio-mode .ds-dashboard .dragon-avatar-slot{
  padding:0!important;
  background:transparent!important;
  border:0!important;
}

body.dragon-studio-mode .ds-dashboard .switch-avatar-btn{
  width:100%!important;
  height:54px!important;
  min-height:54px!important;
  margin:0!important;
  padding:0 12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  border-radius:12px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}

@media(max-width:1280px){
  body.dragon-studio-mode .ds-dashboard .ds-feed-grid{
    grid-template-columns:repeat(4,minmax(112px,1fr))!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-share{
    grid-template-columns:120px minmax(0,1fr) 220px!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-share > div{
    grid-template-columns:minmax(0,1fr) 220px!important;
  }
}

@media(max-width:760px){
  body.dragon-studio-mode .ds-dashboard .ds-family h2,
  body.dragon-studio-mode .ds-dashboard .ds-hatchery h2,
  body.dragon-studio-mode .ds-dashboard .ds-badges h2{
    padding-right:0!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-family > button,
  body.dragon-studio-mode .ds-dashboard .ds-hatchery > button,
  body.dragon-studio-mode .ds-dashboard .ds-badges > button{
    position:static!important;
    justify-self:end!important;
    margin-top:4px!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-feed-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-feed,
  body.dragon-studio-mode .ds-dashboard .ds-share{
    height:auto!important;
    min-height:0!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-share,
  body.dragon-studio-mode .ds-dashboard .ds-share > div{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-share > .share-magic-img,
  body.dragon-studio-mode .ds-dashboard .ds-share > img,
  body.dragon-studio-mode .ds-dashboard .ds-share > div,
  body.dragon-studio-mode .ds-dashboard .ds-share h2,
  body.dragon-studio-mode .ds-dashboard .ds-share p,
  body.dragon-studio-mode .ds-dashboard .ds-share button{
    grid-column:1!important;
    grid-row:auto!important;
  }
  body.dragon-studio-mode .ds-dashboard .my-dragon-meta-bar{
    height:auto!important;
    grid-template-columns:1fr!important;
  }
  body.dragon-studio-mode .ds-dashboard .my-dragon-meta-bar .meta-pill,
  body.dragon-studio-mode .ds-dashboard .dragon-avatar-slot,
  body.dragon-studio-mode .ds-dashboard .switch-avatar-btn{
    height:46px!important;
    min-height:46px!important;
  }
}

/* Fix Share the Magic title squeeze: make direct content occupy the intended columns. */
body.dragon-studio-mode .ds-dashboard .ds-share{
  grid-template-columns:120px minmax(260px,1fr) minmax(210px,230px)!important;
  grid-template-rows:auto auto!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share > div{
  display:contents!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share h2{
  grid-column:2!important;
  grid-row:1!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  white-space:normal!important;
  overflow:visible!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share p{
  grid-column:2!important;
  grid-row:2!important;
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share button{
  grid-column:3!important;
  grid-row:1 / 3!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share > .share-magic-img,
body.dragon-studio-mode .ds-dashboard .ds-share > img{
  grid-column:1!important;
  grid-row:1 / 3!important;
}

/* Share the Magic layout repair: prevent the title from collapsing into a one-letter column. */
body.dragon-studio-mode .ds-dashboard .ds-share{
  display:grid!important;
  grid-template-columns:120px minmax(260px,1fr) minmax(210px,230px)!important;
  grid-template-rows:auto auto!important;
  align-items:center!important;
  column-gap:18px!important;
  row-gap:4px!important;
  overflow:hidden!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share > div{
  display:contents!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share > .share-magic-img,
body.dragon-studio-mode .ds-dashboard .ds-share > img{
  position:static!important;
  grid-column:1!important;
  grid-row:1 / 3!important;
  justify-self:center!important;
  align-self:center!important;
  width:112px!important;
  height:112px!important;
  max-width:112px!important;
  object-fit:cover!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share h2{
  grid-column:2!important;
  grid-row:1!important;
  align-self:end!important;
  justify-self:start!important;
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  line-height:1.15!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share p{
  grid-column:2!important;
  grid-row:2!important;
  align-self:start!important;
  justify-self:start!important;
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share button{
  position:static!important;
  grid-column:3!important;
  grid-row:1 / 3!important;
  justify-self:stretch!important;
  align-self:center!important;
  width:100%!important;
  min-width:0!important;
  height:56px!important;
}

@media(max-width:760px){
  body.dragon-studio-mode .ds-dashboard .ds-share{
    grid-template-columns:1fr!important;
    grid-template-rows:auto!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-share > div{
    display:block!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-share > .share-magic-img,
  body.dragon-studio-mode .ds-dashboard .ds-share > img,
  body.dragon-studio-mode .ds-dashboard .ds-share h2,
  body.dragon-studio-mode .ds-dashboard .ds-share p,
  body.dragon-studio-mode .ds-dashboard .ds-share button{
    grid-column:1!important;
    grid-row:auto!important;
    position:static!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-share > .share-magic-img,
  body.dragon-studio-mode .ds-dashboard .ds-share > img{
    width:112px!important;
    max-width:112px!important;
    margin:0 auto 10px!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-share h2,
  body.dragon-studio-mode .ds-dashboard .ds-share p{
    text-align:left!important;
    margin-bottom:6px!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-share button{
    width:100%!important;
    margin-top:10px!important;
  }
}

/* Share the Magic final layout: flex row with image, text, and action button. */
body.dragon-studio-mode .ds-dashboard .ds-share{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:24px!important;
  height:250px!important;
  min-height:250px!important;
  padding:20px 24px!important;
  overflow:hidden!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share > .share-magic-img,
body.dragon-studio-mode .ds-dashboard .ds-share > img{
  position:static!important;
  flex:0 0 124px!important;
  width:124px!important;
  height:124px!important;
  max-width:124px!important;
  margin:0!important;
  object-fit:cover!important;
  align-self:center!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share > div{
  display:grid!important;
  grid-template-columns:minmax(320px,1fr) minmax(220px,240px)!important;
  grid-template-rows:auto auto!important;
  align-items:center!important;
  column-gap:24px!important;
  row-gap:6px!important;
  flex:1 1 auto!important;
  min-width:0!important;
  width:auto!important;
  height:auto!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share h2{
  grid-column:1!important;
  grid-row:1!important;
  justify-self:start!important;
  align-self:end!important;
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  white-space:nowrap!important;
  overflow:visible!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  line-height:1.15!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share p{
  grid-column:1!important;
  grid-row:2!important;
  justify-self:start!important;
  align-self:start!important;
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  line-height:1.35!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share button{
  position:static!important;
  grid-column:2!important;
  grid-row:1 / 3!important;
  justify-self:stretch!important;
  align-self:center!important;
  flex:0 0 auto!important;
  width:100%!important;
  min-width:0!important;
  height:58px!important;
  margin:0!important;
  white-space:nowrap!important;
  z-index:1!important;
}

@media(max-width:900px){
  body.dragon-studio-mode .ds-dashboard .ds-share > div{
    grid-template-columns:minmax(220px,1fr) minmax(190px,220px)!important;
  }
}

@media(max-width:760px){
  body.dragon-studio-mode .ds-dashboard .ds-share{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-share > .share-magic-img,
  body.dragon-studio-mode .ds-dashboard .ds-share > img{
    flex:0 0 auto!important;
    align-self:center!important;
    width:112px!important;
    height:112px!important;
    max-width:112px!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-share > div{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:8px!important;
    width:100%!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-share h2,
  body.dragon-studio-mode .ds-dashboard .ds-share p{
    display:block!important;
    text-align:left!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-share h2{
    white-space:normal!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-share button{
    width:100%!important;
    margin-top:6px!important;
  }
}

/* Hatchery Matchup final card layout guard. Must remain last. */
.hatchery-match-page .hatchery-board{
  box-sizing:border-box!important;
  overflow:hidden!important;
}
.hatchery-match-page .hatchery-card-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  grid-auto-rows:minmax(156px,auto)!important;
  gap:16px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  align-items:stretch!important;
  justify-items:stretch!important;
  overflow:visible!important;
}
.hatchery-match-page .hatchery-egg-card.face-up{
  position:relative!important;
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:156px!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  transform:none!important;
}
.hatchery-match-page .hatchery-egg-card.face-up.selected,
.hatchery-match-page .hatchery-egg-card.face-up:hover{
  transform:none!important;
}
.hatchery-match-page .hatchery-egg-card.face-up .egg-card-inner{
  position:static!important;
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:100%!important;
  min-height:156px!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  transform:none!important;
}
.hatchery-match-page .hatchery-egg-card.face-up .egg-card-back{
  position:static!important;
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:156px!important;
  height:100%!important;
  margin:0!important;
  padding:14px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  transform:none!important;
}
.hatchery-match-page .hatchery-egg-card.face-up .egg-card-back b{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  hyphens:auto!important;
  color:#080e4a!important;
  font-size:15px!important;
  line-height:1.18!important;
  font-weight:600!important;
  text-align:center!important;
  overflow:hidden!important;
}
.hatchery-match-page .hatchery-egg-card.face-up[data-card-kind="definition"] .egg-card-back b{
  font-size:11.5px!important;
  line-height:1.18!important;
  font-weight:450!important;
}
@media(max-width:760px){
  .hatchery-match-page .hatchery-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-rows:minmax(150px,auto)!important;
  }
}

/* Hatchery Matchup card grid safety fix: no overlap, no spill, 4 clean desktop columns. */
.hatchery-match-page .hatchery-board{
  box-sizing:border-box!important;
  overflow:hidden!important;
}

.hatchery-match-page .hatchery-card-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  grid-auto-rows:minmax(156px,auto)!important;
  gap:16px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  align-items:stretch!important;
  justify-items:stretch!important;
  overflow:visible!important;
}

.hatchery-match-page .hatchery-egg-card.face-up{
  position:relative!important;
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:156px!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  transform:none!important;
}

.hatchery-match-page .hatchery-egg-card.face-up.selected,
.hatchery-match-page .hatchery-egg-card.face-up:hover{
  transform:none!important;
}

.hatchery-match-page .hatchery-egg-card.face-up .egg-card-inner{
  position:static!important;
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:100%!important;
  min-height:156px!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  transform:none!important;
}

.hatchery-match-page .hatchery-egg-card.face-up .egg-card-back{
  position:static!important;
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:156px!important;
  height:100%!important;
  margin:0!important;
  padding:14px 14px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  transform:none!important;
}

.hatchery-match-page .hatchery-egg-card.face-up .egg-card-back b{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  hyphens:auto!important;
  color:#080e4a!important;
  font-size:15px!important;
  line-height:1.18!important;
  font-weight:600!important;
  text-align:center!important;
  overflow:hidden!important;
}

.hatchery-match-page .hatchery-egg-card.face-up[data-card-kind="definition"] .egg-card-back b{
  font-size:11.5px!important;
  line-height:1.18!important;
  font-weight:450!important;
}

@media(max-width:760px){
  .hatchery-match-page .hatchery-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-rows:minmax(150px,auto)!important;
  }
}

/* Final Hatchery Matchup cascade lock. Keep this block last. */
.hatchery-match-page .hatchery-title-block{display:none!important;}
.hatchery-match-page .hatchery-game-shell{grid-template-columns:minmax(260px,330px) minmax(560px,700px) minmax(260px,320px)!important;gap:18px!important;max-width:1420px!important;margin:0 auto!important;padding:18px!important;}
.hatchery-match-page .hatchery-board{padding:22px 24px!important;border-radius:24px!important;background:linear-gradient(180deg,#fff,#f8f7ff)!important;border:4px solid rgba(91,78,170,.62)!important;box-shadow:0 20px 56px rgba(0,0,0,.34)!important;}
.hatchery-match-page .hatchery-board-title{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;margin:0 0 20px!important;padding:0!important;border:0!important;background:transparent!important;}
.hatchery-match-page .hatchery-board-title b{display:flex!important;align-items:center!important;gap:14px!important;color:#091047!important;font-size:34px!important;line-height:1!important;font-weight:1000!important;}
.hatchery-match-page .hatchery-board-title b img{width:50px!important;height:58px!important;object-fit:contain!important;}
.hatchery-match-page .hatchery-timer-badge{display:inline-flex!important;align-items:center!important;gap:8px!important;min-height:48px!important;padding:0 16px!important;border-radius:14px!important;background:#f0edff!important;border:1px solid #d8d1ff!important;color:#5b47e9!important;font-weight:1000!important;font-size:16px!important;}
.hatchery-match-page .hatchery-card-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-auto-rows:150px!important;gap:14px!important;width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;align-items:stretch!important;justify-items:stretch!important;overflow:hidden!important;}
.hatchery-match-page .hatchery-egg-card.face-up{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;max-width:100%!important;min-width:0!important;height:150px!important;min-height:150px!important;margin:0!important;padding:0!important;box-sizing:border-box!important;border-radius:18px!important;border:1.5px solid #cfc8ff!important;background:linear-gradient(180deg,#fff,#f9f8ff)!important;box-shadow:0 8px 16px rgba(68,55,155,.10)!important;color:#070d45!important;overflow:hidden!important;transform:none!important;}
.hatchery-match-page .hatchery-egg-card.face-up .egg-card-inner{position:static!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;max-width:100%!important;min-width:0!important;height:150px!important;min-height:0!important;margin:0!important;padding:0!important;box-sizing:border-box!important;overflow:hidden!important;transform:none!important;}
.hatchery-match-page .hatchery-egg-card.face-up .egg-card-back{position:static!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;max-width:100%!important;min-width:0!important;height:150px!important;min-height:0!important;margin:0!important;padding:14px!important;box-sizing:border-box!important;transform:none!important;backface-visibility:visible!important;background:transparent!important;border:0!important;overflow:hidden!important;}
.hatchery-match-page .hatchery-egg-card.face-up .egg-card-front,.hatchery-match-page .hatchery-egg-card.face-up .egg-card-back small,.hatchery-match-page .hatchery-egg-card.face-up .egg-card-back img,.hatchery-match-page .hatchery-egg-card.face-up .hatchery-match-icon{display:none!important;}
.hatchery-match-page .hatchery-egg-card.face-up .egg-card-back b{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;padding:0!important;box-sizing:border-box!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;hyphens:auto!important;color:#080e4a!important;font-size:18px!important;line-height:1.25!important;font-weight:600!important;text-align:center!important;overflow:hidden!important;}
.hatchery-match-page .hatchery-egg-card.face-up[data-card-kind="definition"] .egg-card-back b{font-size:12px!important;line-height:1.18!important;font-weight:450!important;}
.hatchery-match-page .hatchery-egg-card.face-up.hinted{border-color:#f6bd32!important;background:linear-gradient(180deg,#fffaf0,#fff4cc)!important;box-shadow:0 0 0 5px rgba(246,189,50,.36),0 0 32px rgba(246,189,50,.42),0 12px 24px rgba(77,58,190,.14)!important;transform:none!important;}
.hatchery-match-page .hatchery-egg-card.face-up.hinted .egg-card-back{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,247,214,.96))!important;}
.hatchery-match-page .hatchery-egg-card.face-up.selected{border-color:#6b56ff!important;box-shadow:0 0 0 4px rgba(107,86,255,.18),0 12px 24px rgba(77,58,190,.18)!important;transform:none!important;}
.hatchery-match-page .hatchery-egg-card.face-up.matched{opacity:.58!important;background:linear-gradient(180deg,#f1fff7,#e7fbef)!important;border-color:#65d58a!important;}
.hatchery-match-page .hatchery-feedback{margin-top:18px!important;min-height:54px!important;border-radius:16px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:#5b47e9!important;background:#f6f3ff!important;border:1px solid #ded7ff!important;font-size:18px!important;font-weight:1000!important;text-align:center!important;}
.hatchery-match-page .hatchery-progress-strip{margin-top:18px!important;min-height:74px!important;border-radius:16px!important;background:#fff!important;border:1px solid #ded7ff!important;display:grid!important;grid-template-columns:auto minmax(120px,1fr) auto!important;align-items:center!important;gap:18px!important;padding:12px 18px!important;}
.hatchery-match-page .hatchery-progress-strip span{color:#5e6384!important;font-size:18px!important;font-weight:1000!important;}
.hatchery-match-page .hatchery-progress-strip span small{display:block!important;margin-top:4px!important;color:#1f285f!important;font-size:13px!important;font-weight:850!important;}
.hatchery-match-page .hatchery-progress-strip>div{height:14px!important;border-radius:999px!important;background:#ebe8ff!important;overflow:hidden!important;}
.hatchery-match-page .hatchery-progress-strip>div i,.hatchery-match-page .hatchery-progress-bar i{display:block!important;height:100%!important;border-radius:999px!important;background:linear-gradient(90deg,#755fff,#4f35dd)!important;}
.hatchery-match-page .hatchery-panel,.hatchery-match-page .game-practice-controls,.hatchery-match-page .hatchery-word-list-button,.hatchery-match-page .hatchery-leaderboard{border-radius:22px!important;background:linear-gradient(180deg,rgba(12,19,54,.94),rgba(8,13,39,.98))!important;border:1px solid rgba(128,111,225,.36)!important;box-shadow:0 18px 42px rgba(0,0,0,.28)!important;color:#fff!important;}
.hatchery-match-page .nursery-goal-panel h2{margin:0 0 16px!important;color:#fff!important;font-size:28px!important;}
.hatchery-match-page .nursery-goal-panel p,.hatchery-match-page .hint-panel p{color:#d9defc!important;font-size:15px!important;line-height:1.45!important;}
.hatchery-match-page .nursery-goal-panel>b{color:#fff!important;font-size:26px!important;}
.hatchery-match-page .hatchery-leaderboard{padding:22px!important;}
.hatchery-leaderboard h2{margin:0 0 12px!important;color:#fff!important;font-size:24px!important;line-height:1.1!important;}
.hatchery-leaderboard p{margin:0 0 18px!important;color:#c9c1ff!important;text-align:center!important;font-weight:1000!important;}
.hatchery-rank-head,.hatchery-rank-row{display:grid!important;grid-template-columns:58px 1fr auto!important;align-items:center!important;gap:12px!important;}
.hatchery-rank-head{padding:0 0 10px!important;border-bottom:1px solid rgba(214,221,255,.22)!important;color:#c9cfea!important;font-size:12px!important;font-weight:1000!important;text-transform:uppercase!important;}
.hatchery-rank-row{min-height:54px!important;border-bottom:1px solid rgba(214,221,255,.18)!important;color:#fff!important;font-size:16px!important;}
.hatchery-rank-row.current{margin:8px -6px 0!important;padding:0 10px!important;border:1px solid #8b68ff!important;border-radius:12px!important;background:linear-gradient(90deg,rgba(115,74,255,.46),rgba(78,45,180,.44))!important;box-shadow:0 0 18px rgba(119,85,255,.24)!important;}
.rank-medal{display:grid!important;place-items:center!important;width:30px!important;height:30px!important;border-radius:999px!important;color:#fff!important;font-weight:1000!important;}
.rank-1{background:#e0a51f!important;}.rank-2{background:#9da4b8!important;}.rank-3{background:#b8692a!important;}.rank-4,.rank-5{background:transparent!important;}
.hatchery-completion-backdrop{background:rgba(5,8,30,.58)!important;backdrop-filter:blur(5px)!important;}
.hatchery-completion-modal{width:min(430px,92vw)!important;max-height:92vh!important;overflow:auto!important;padding:26px 22px 22px!important;border-radius:20px!important;border:1px solid #6d55ff!important;background:radial-gradient(circle at 50% 8%,rgba(136,89,255,.36),transparent 28%),linear-gradient(180deg,#101652,#070d34)!important;color:#fff!important;box-shadow:0 30px 80px rgba(0,0,0,.44),0 0 28px rgba(116,84,255,.36)!important;text-align:center!important;}
.hatchery-completion-trophy{font-size:58px!important;line-height:1!important;margin-bottom:8px!important;}
.hatchery-completion-modal h2{margin:0 0 6px!important;color:#fff!important;font-size:32px!important;line-height:1.05!important;}
.hatchery-completion-modal>p{margin:0 0 18px!important;color:#f0edff!important;font-size:18px!important;}
.hatchery-completion-stats{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;margin-bottom:16px!important;}
.hatchery-completion-stats span{display:grid!important;gap:6px!important;padding:14px!important;border-radius:14px!important;background:rgba(67,48,155,.54)!important;border:1px solid rgba(151,120,255,.62)!important;}
.hatchery-completion-stats small{color:#e4dcff!important;font-size:13px!important;font-weight:900!important;}
.hatchery-completion-stats b{color:#fff!important;font-size:30px!important;line-height:1!important;}
.hatchery-completion-modal .hatchery-leaderboard.compact{padding:14px!important;border-radius:14px!important;background:rgba(7,12,45,.68)!important;box-shadow:none!important;}
.hatchery-completion-modal .hatchery-leaderboard.compact h2{font-size:14px!important;}
.hatchery-completion-modal .hatchery-leaderboard.compact p{margin-bottom:10px!important;font-size:12px!important;}
.hatchery-completion-modal .hatchery-rank-row{min-height:38px!important;font-size:13px!important;}
.hatchery-completion-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;margin-top:16px!important;}
.hatchery-completion-actions button{min-height:54px!important;border-radius:12px!important;font-size:16px!important;}
@media(max-width:1180px){.hatchery-match-page .hatchery-game-shell{grid-template-columns:1fr!important;}}
@media(max-width:760px){.hatchery-match-page .hatchery-board-title{align-items:flex-start!important;flex-direction:column!important;}.hatchery-match-page .hatchery-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}.hatchery-match-page .hatchery-progress-strip,.hatchery-completion-actions{grid-template-columns:1fr!important;}}

/* FINAL Create Share Card modal target: compact modal, portrait preview, one-row equal actions. */
#comingSoonModal.share-builder-modal-shell{
  width:min(820px,calc(100vw - 40px))!important;
  max-height:calc(100vh - 40px)!important;
  padding:24px 28px!important;
  overflow:auto!important;
}

#comingSoonModal.share-builder-modal-shell .share-builder{
  gap:12px!important;
}

#comingSoonModal.share-builder-modal-shell .share-item-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
  max-height:220px!important;
}

#comingSoonModal.share-builder-modal-shell .share-preview-section{
  display:grid!important;
  justify-items:center!important;
  gap:8px!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview){
  width:min(420px,100%)!important;
  height:525px!important;
  min-height:525px!important;
  aspect-ratio:auto!important;
  padding:10px!important;
  border-radius:18px!important;
  background-image:
    linear-gradient(180deg,rgba(4,7,35,.22),rgba(4,7,35,.18)),
    url("assets/my-dragon-studio-batch/optimized-my-dragon-studio-webp/hatching/hatching_background.webp")!important;
  background-size:cover!important;
  background-position:center!important;
  overflow:hidden!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview)::before{
  inset:8px!important;
  border-radius:14px!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-inner{
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  justify-items:center!important;
  gap:8px!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  padding:18px 18px 14px!important;
  overflow:hidden!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-top-gem{
  display:none!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-top-gem{
  position:absolute!important;
  top:10px!important;
  left:50%!important;
  width:16px!important;
  height:16px!important;
  margin:0!important;
  transform:translateX(-50%) rotate(45deg)!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-text-panel{
  display:grid!important;
  grid-template-columns:1fr!important;
  justify-items:center!important;
  align-items:center!important;
  grid-column:1!important;
  grid-row:1!important;
  justify-self:center!important;
  align-self:start!important;
  width:min(88%,350px)!important;
  max-width:350px!important;
  min-height:0!important;
  margin:0!important;
  padding:10px 12px 11px!important;
  text-align:center!important;
  border-radius:12px!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-logo{
  font-size:1.9rem!important;
  line-height:1!important;
  margin:0 0 5px!important;
  text-align:center!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-label{
  display:inline-flex!important;
  min-height:21px!important;
  padding:3px 11px!important;
  margin:0 0 8px!important;
  font-size:.56rem!important;
  line-height:1!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) h3{
  font-size:1.02rem!important;
  line-height:1.12!important;
  margin:0 0 5px!important;
  text-align:center!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-subtitle{
  font-size:.62rem!important;
  line-height:1.15!important;
  margin:0 0 2px!important;
  text-align:center!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-level{
  font-size:.6rem!important;
  line-height:1.1!important;
  text-align:center!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-item-image{
  grid-column:1!important;
  grid-row:2!important;
  justify-self:center!important;
  align-self:center!important;
  width:min(72%,290px)!important;
  max-width:290px!important;
  max-height:270px!important;
  margin:4px auto 6px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 20px 26px rgba(0,0,0,.48)) drop-shadow(0 0 20px rgba(255,161,65,.38))!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) footer{
  grid-column:1!important;
  grid-row:3!important;
  width:86%!important;
  min-height:25px!important;
  padding:6px 12px!important;
  margin:0 auto!important;
  font-size:.54rem!important;
  line-height:1.1!important;
  border-radius:999px!important;
  text-align:center!important;
}

#comingSoonModal.share-builder-modal-shell .share-builder-actions,
#comingSoonModal.share-builder-modal-shell .dragon-detail-actions.share-builder-actions{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-auto-flow:column!important;
  gap:14px!important;
  width:100%!important;
  margin-top:10px!important;
}

#comingSoonModal.share-builder-modal-shell .share-builder-actions button,
#comingSoonModal.share-builder-modal-shell .dragon-detail-actions.share-builder-actions button{
  width:100%!important;
  min-width:0!important;
  height:48px!important;
  min-height:48px!important;
  margin:0!important;
  padding:0 12px!important;
  white-space:nowrap!important;
}

@media(max-width:700px){
  #comingSoonModal.share-builder-modal-shell .share-item-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview){
    width:min(360px,100%)!important;
    height:450px!important;
    min-height:450px!important;
  }
  #comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-item-image{
    max-width:230px!important;
    max-height:220px!important;
  }
  #comingSoonModal.share-builder-modal-shell .share-builder-actions,
  #comingSoonModal.share-builder-modal-shell .dragon-detail-actions.share-builder-actions{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
  }
  #comingSoonModal.share-builder-modal-shell .share-builder-actions button,
  #comingSoonModal.share-builder-modal-shell .dragon-detail-actions.share-builder-actions button{
    font-size:.72rem!important;
    padding:0 6px!important;
  }
}

/* FINAL clean replacement for Share the Magic. Must remain last after all legacy .ds-share rules. */
body.dragon-studio-mode .ds-dashboard .ds-card.ds-share.share-magic-card{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 160px!important;
  grid-template-rows:auto 1fr auto!important;
  gap:18px 28px!important;
  align-items:start!important;
  min-height:260px!important;
  height:260px!important;
  padding:28px 32px!important;
  overflow:hidden!important;
}

body.dragon-studio-mode .ds-dashboard .ds-card.ds-share.share-magic-card > .share-magic-text{
  grid-column:1!important;
  grid-row:1!important;
  display:block!important;
  width:100%!important;
  max-width:520px!important;
  min-width:0!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  align-self:start!important;
  justify-self:start!important;
  z-index:2!important;
}

body.dragon-studio-mode .ds-dashboard .ds-card.ds-share.share-magic-card .share-magic-text h3{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  width:auto!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0 0 10px!important;
  padding:0!important;
  color:#ffffff!important;
  font-size:24px!important;
  line-height:1.1!important;
  font-weight:900!important;
  white-space:nowrap!important;
  overflow:visible!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
}

body.dragon-studio-mode .ds-dashboard .ds-card.ds-share.share-magic-card .share-magic-text h3 img,
body.dragon-studio-mode .ds-dashboard .ds-card.ds-share.share-magic-card .share-magic-text h3 .ds-ui-icon{
  flex:0 0 auto!important;
  width:24px!important;
  height:24px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-card.ds-share.share-magic-card .share-magic-text p{
  display:block!important;
  width:100%!important;
  max-width:520px!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  color:rgba(232,232,255,.82)!important;
  font-size:16px!important;
  line-height:1.28!important;
  font-weight:800!important;
  white-space:normal!important;
  overflow:visible!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
}

body.dragon-studio-mode .ds-dashboard .ds-card.ds-share.share-magic-card > .share-magic-egg{
  position:static!important;
  grid-column:2!important;
  grid-row:1 / 4!important;
  align-self:center!important;
  justify-self:center!important;
  width:124px!important;
  height:124px!important;
  max-width:124px!important;
  margin:0!important;
  object-fit:contain!important;
  transform:none!important;
  z-index:1!important;
}

body.dragon-studio-mode .ds-dashboard .ds-card.ds-share.share-magic-card > .share-magic-button{
  position:static!important;
  grid-column:1!important;
  grid-row:3!important;
  align-self:end!important;
  justify-self:start!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  width:320px!important;
  max-width:100%!important;
  min-width:0!important;
  height:58px!important;
  margin:0!important;
  padding:0 18px!important;
  white-space:nowrap!important;
  transform:none!important;
  z-index:2!important;
}

@media(max-width:700px){
  body.dragon-studio-mode .ds-dashboard .ds-card.ds-share.share-magic-card{
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto auto!important;
    height:auto!important;
    min-height:0!important;
    padding:24px!important;
    overflow:visible!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-card.ds-share.share-magic-card > .share-magic-text{
    grid-column:1!important;
    grid-row:1!important;
    max-width:none!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-card.ds-share.share-magic-card .share-magic-text h3{
    white-space:normal!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-card.ds-share.share-magic-card > .share-magic-egg{
    grid-column:1!important;
    grid-row:2!important;
    justify-self:start!important;
    width:112px!important;
    height:112px!important;
    max-width:112px!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-card.ds-share.share-magic-card > .share-magic-button{
    grid-column:1!important;
    grid-row:3!important;
    width:100%!important;
  }
}

/* Clean replacement for the Share the Magic card. This must stay after legacy .ds-share rules. */
body.dragon-studio-mode .ds-dashboard .ds-card.ds-share.share-magic-card{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 160px!important;
  grid-template-rows:auto 1fr auto!important;
  gap:18px 28px!important;
  align-items:start!important;
  min-height:260px!important;
  height:260px!important;
  padding:28px 32px!important;
  overflow:hidden!important;
}

body.dragon-studio-mode .ds-dashboard .ds-card.ds-share.share-magic-card > .share-magic-text{
  grid-column:1!important;
  grid-row:1!important;
  display:block!important;
  width:100%!important;
  max-width:520px!important;
  min-width:0!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  align-self:start!important;
  justify-self:start!important;
  z-index:2!important;
}

body.dragon-studio-mode .ds-dashboard .ds-card.ds-share.share-magic-card .share-magic-text h3{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  width:auto!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0 0 10px!important;
  padding:0!important;
  color:#ffffff!important;
  font-size:24px!important;
  line-height:1.1!important;
  font-weight:900!important;
  white-space:nowrap!important;
  overflow:visible!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
}

body.dragon-studio-mode .ds-dashboard .ds-card.ds-share.share-magic-card .share-magic-text h3 img,
body.dragon-studio-mode .ds-dashboard .ds-card.ds-share.share-magic-card .share-magic-text h3 .ds-ui-icon{
  flex:0 0 auto!important;
  width:24px!important;
  height:24px!important;
}

body.dragon-studio-mode .ds-dashboard .ds-card.ds-share.share-magic-card .share-magic-text p{
  display:block!important;
  width:100%!important;
  max-width:520px!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  color:rgba(232,232,255,.82)!important;
  font-size:16px!important;
  line-height:1.28!important;
  font-weight:800!important;
  white-space:normal!important;
  overflow:visible!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
}

body.dragon-studio-mode .ds-dashboard .ds-card.ds-share.share-magic-card > .share-magic-egg{
  position:static!important;
  grid-column:2!important;
  grid-row:1 / 4!important;
  align-self:center!important;
  justify-self:center!important;
  width:124px!important;
  height:124px!important;
  max-width:124px!important;
  margin:0!important;
  object-fit:contain!important;
  transform:none!important;
  z-index:1!important;
}

body.dragon-studio-mode .ds-dashboard .ds-card.ds-share.share-magic-card > .share-magic-button{
  position:static!important;
  grid-column:1!important;
  grid-row:3!important;
  align-self:end!important;
  justify-self:start!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  width:320px!important;
  max-width:100%!important;
  min-width:0!important;
  height:58px!important;
  margin:0!important;
  padding:0 18px!important;
  white-space:nowrap!important;
  transform:none!important;
  z-index:2!important;
}

@media(max-width:700px){
  body.dragon-studio-mode .ds-dashboard .ds-card.ds-share.share-magic-card{
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto auto!important;
    height:auto!important;
    min-height:0!important;
    padding:24px!important;
    overflow:visible!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-card.ds-share.share-magic-card > .share-magic-text{
    grid-column:1!important;
    grid-row:1!important;
    max-width:none!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-card.ds-share.share-magic-card .share-magic-text h3{
    white-space:normal!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-card.ds-share.share-magic-card > .share-magic-egg{
    grid-column:1!important;
    grid-row:2!important;
    justify-self:start!important;
    width:112px!important;
    height:112px!important;
    max-width:112px!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-card.ds-share.share-magic-card > .share-magic-button{
    grid-column:1!important;
    grid-row:3!important;
    width:100%!important;
  }
}

/* Final simple Share the Magic layout. Scoped to the dedicated class so old ds-share grid rules cannot squeeze the text. */
body.dragon-studio-mode .ds-dashboard .ds-share-simple{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 150px!important;
  grid-template-rows:1fr!important;
  align-items:center!important;
  gap:28px!important;
  height:250px!important;
  min-height:250px!important;
  padding:34px 36px!important;
  overflow:hidden!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share-simple .ds-share-copy{
  display:block!important;
  grid-column:1!important;
  grid-row:1!important;
  width:100%!important;
  max-width:520px!important;
  min-width:0!important;
  height:auto!important;
  align-self:center!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share-simple h2{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  width:auto!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0 0 14px!important;
  font-size:24px!important;
  line-height:1.15!important;
  white-space:nowrap!important;
  overflow:visible!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share-simple h2 img,
body.dragon-studio-mode .ds-dashboard .ds-share-simple h2 .ds-ui-icon{
  flex:0 0 auto!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share-simple p{
  display:block!important;
  width:100%!important;
  max-width:480px!important;
  min-width:0!important;
  margin:0!important;
  font-size:16px!important;
  line-height:1.35!important;
  white-space:normal!important;
  overflow:visible!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share-simple button{
  position:static!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  width:min(420px,100%)!important;
  min-width:0!important;
  height:58px!important;
  margin:24px 0 0!important;
  white-space:nowrap!important;
  transform:none!important;
  z-index:1!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share-simple > .share-magic-img,
body.dragon-studio-mode .ds-dashboard .ds-share-simple > img{
  position:static!important;
  grid-column:2!important;
  grid-row:1!important;
  justify-self:center!important;
  align-self:center!important;
  width:124px!important;
  height:124px!important;
  max-width:124px!important;
  margin:0!important;
  object-fit:contain!important;
  transform:none!important;
}

@media(max-width:760px){
  body.dragon-studio-mode .ds-dashboard .ds-share-simple{
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto!important;
    height:auto!important;
    min-height:0!important;
    padding:24px!important;
    overflow:visible!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-share-simple .ds-share-copy{
    grid-column:1!important;
    grid-row:1!important;
    max-width:none!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-share-simple h2{
    white-space:normal!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-share-simple > .share-magic-img,
  body.dragon-studio-mode .ds-dashboard .ds-share-simple > img{
    grid-column:1!important;
    grid-row:2!important;
    width:112px!important;
    height:112px!important;
    max-width:112px!important;
    justify-self:center!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-share-simple button{
    width:100%!important;
  }
}

/* Create Share Card compact modal refresh. */
#comingSoonModal.share-builder-modal-shell{
  width:min(760px,calc(100vw - 40px))!important;
  max-height:calc(100vh - 44px)!important;
  padding:24px 26px 22px!important;
  border-radius:22px!important;
  overflow:auto!important;
}

#comingSoonModal.share-builder-modal-shell .modal-close{
  width:42px!important;
  height:42px!important;
  top:18px!important;
  right:18px!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
}

#comingSoonModal.share-builder-modal-shell #comingSoonTitle{
  margin:0 50px 3px!important;
  font-size:clamp(2rem,3.2vw,2.65rem)!important;
  line-height:1.02!important;
}

#comingSoonModal.share-builder-modal-shell #comingSoonTitle::before{
  width:.62em!important;
  height:.62em!important;
  border-radius:7px!important;
}

#comingSoonModal.share-builder-modal-shell .share-builder{
  gap:12px!important;
}

#comingSoonModal.share-builder-modal-shell .share-builder-subtitle{
  margin:0 auto 8px!important;
  font-size:.9rem!important;
  line-height:1.25!important;
}

#comingSoonModal.share-builder-modal-shell .share-builder h3{
  margin:0 0 7px!important;
  font-size:.92rem!important;
  gap:9px!important;
}

#comingSoonModal.share-builder-modal-shell .share-builder h3 span{
  width:9px!important;
  height:9px!important;
}

#comingSoonModal.share-builder-modal-shell .share-type-row button{
  min-height:40px!important;
  font-size:.84rem!important;
  gap:7px!important;
}

#comingSoonModal.share-builder-modal-shell .share-tab-icon{
  width:16px!important;
  height:16px!important;
}

#comingSoonModal.share-builder-modal-shell .share-item-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
  max-height:220px!important;
  padding:3px 5px 5px!important;
}

#comingSoonModal.share-builder-modal-shell .share-item-grid button{
  min-height:96px!important;
  padding:10px 9px 9px!important;
  border-radius:12px!important;
  gap:6px!important;
}

#comingSoonModal.share-builder-modal-shell .share-item-grid button > img:first-child{
  width:54px!important;
  height:54px!important;
}

#comingSoonModal.share-builder-modal-shell .share-item-grid button span{
  font-size:.78rem!important;
}

#comingSoonModal.share-builder-modal-shell .share-item-check{
  width:24px!important;
  height:24px!important;
  top:8px!important;
  right:8px!important;
}

#comingSoonModal.share-builder-modal-shell .share-item-check img{
  width:14px!important;
  height:14px!important;
}

#comingSoonModal.share-builder-modal-shell .share-preview-section{
  padding-top:0!important;
}

#comingSoonModal.share-builder-modal-shell .share-preview-section h3{
  margin-bottom:8px!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview){
  width:min(430px,100%)!important;
  aspect-ratio:4/5!important;
  min-height:0!important;
  padding:10px!important;
  border-radius:17px!important;
  background-image:
    linear-gradient(180deg,rgba(4,7,35,.10),rgba(4,7,35,.22)),
    url("assets/my-dragon-studio-batch/optimized-my-dragon-studio-webp/hatching/hatching_background.webp")!important;
  background-size:cover!important;
  background-position:center!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-inner{
  position:relative!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  min-height:0!important;
  height:100%!important;
  padding:18px 18px 14px!important;
  overflow:hidden!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-top-gem{
  width:18px!important;
  height:18px!important;
  margin:0 auto 7px!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-text-panel{
  grid-row:1!important;
  width:min(86%,360px)!important;
  min-height:0!important;
  padding:8px 10px 9px!important;
  margin:0 auto!important;
  border-radius:9px!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-logo{
  font-size:1.62rem!important;
  line-height:1!important;
  margin:0 0 4px!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-label{
  min-height:20px!important;
  padding:3px 10px!important;
  margin:0 0 6px!important;
  font-size:.52rem!important;
  line-height:1!important;
  border-radius:999px!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) h3{
  font-size:1.02rem!important;
  line-height:1.08!important;
  margin:0 0 4px!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-subtitle{
  font-size:.56rem!important;
  line-height:1.12!important;
  margin:0 0 2px!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-level{
  font-size:.54rem!important;
  line-height:1.1!important;
  margin:0!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-item-image{
  grid-row:2!important;
  align-self:center!important;
  justify-self:center!important;
  width:min(62%,270px)!important;
  max-width:270px!important;
  max-height:52%!important;
  margin:12px auto 8px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.45)) drop-shadow(0 0 18px rgba(255,168,74,.35))!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) footer{
  grid-row:3!important;
  width:86%!important;
  padding:6px 10px!important;
  margin:0 auto!important;
  font-size:.52rem!important;
  line-height:1.15!important;
  border-radius:999px!important;
}

#comingSoonModal.share-builder-modal-shell .share-builder-actions{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
  margin-top:8px!important;
}

#comingSoonModal.share-builder-modal-shell .share-builder-actions button{
  width:100%!important;
  min-width:0!important;
  min-height:46px!important;
  height:46px!important;
  padding:0 14px!important;
  border-radius:11px!important;
  font-size:.86rem!important;
  line-height:1!important;
}

#comingSoonModal.share-builder-modal-shell .share-builder-actions img{
  width:20px!important;
  height:20px!important;
}

#comingSoonModal.share-builder-modal-shell .share-close-icon{
  width:22px!important;
  height:22px!important;
}

@media(max-width:820px){
  #comingSoonModal.share-builder-modal-shell{
    width:calc(100vw - 24px)!important;
    padding:22px 18px 18px!important;
  }
  #comingSoonModal.share-builder-modal-shell .share-builder-actions{
    grid-template-columns:1fr!important;
  }
}

@media(max-width:560px){
  #comingSoonModal.share-builder-modal-shell .share-item-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview){
    width:min(360px,100%)!important;
  }
}

/* Create Share Card final compact target: portrait preview and equal action buttons. */
#comingSoonModal.share-builder-modal-shell{
  width:min(820px,calc(100vw - 40px))!important;
  max-height:calc(100vh - 40px)!important;
  padding:24px 28px 24px!important;
}

#comingSoonModal.share-builder-modal-shell .share-builder{
  gap:12px!important;
}

#comingSoonModal.share-builder-modal-shell .share-item-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  max-height:210px!important;
  gap:10px!important;
}

#comingSoonModal.share-builder-modal-shell .share-preview-section{
  display:grid!important;
  justify-items:center!important;
  gap:8px!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview){
  width:min(420px,100%)!important;
  height:525px!important;
  min-height:525px!important;
  aspect-ratio:auto!important;
  padding:10px!important;
  border-radius:18px!important;
  background-image:
    linear-gradient(180deg,rgba(5,7,38,.22),rgba(5,7,38,.16)),
    url("assets/my-dragon-studio-batch/optimized-my-dragon-studio-webp/hatching/hatching_background.webp")!important;
  background-size:cover!important;
  background-position:center!important;
  overflow:hidden!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview)::before{
  inset:8px!important;
  border-radius:14px!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-inner{
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:112px minmax(0,1fr) auto!important;
  align-items:center!important;
  justify-items:center!important;
  gap:4px!important;
  height:100%!important;
  min-height:0!important;
  padding:13px 14px 13px!important;
  overflow:hidden!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-top-gem{
  position:absolute!important;
  top:10px!important;
  left:50%!important;
  width:16px!important;
  height:16px!important;
  margin:0!important;
  transform:translateX(-50%) rotate(45deg)!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-text-panel{
  position:absolute!important;
  grid-column:1!important;
  grid-row:1!important;
  justify-self:center!important;
  align-self:start!important;
  top:22px!important;
  left:50%!important;
  right:auto!important;
  width:100%!important;
  max-width:none!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  text-align:center!important;
  transform:translateX(-50%)!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-text-panel > *{
  display:block!important;
  justify-self:center!important;
  align-self:center!important;
  width:100%!important;
  text-align:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-logo{
  font-size:1.34rem!important;
  line-height:1!important;
  margin:0 0 3px!important;
  text-align:center!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-label{
  display:inline-flex!important;
  width:auto!important;
  justify-self:center!important;
  min-height:16px!important;
  padding:2px 8px!important;
  margin:0 0 5px!important;
  font-size:.48rem!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) h3{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  justify-self:center!important;
  align-self:center!important;
  font-size:.78rem!important;
  line-height:1.06!important;
  margin:0 auto 4px!important;
  text-align:center!important;
  white-space:nowrap!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-subtitle{
  font-size:.5rem!important;
  line-height:1.08!important;
  margin:0 0 1px!important;
  text-align:center!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-level{
  font-size:.5rem!important;
  line-height:1.05!important;
  text-align:center!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-item-image{
  grid-column:1!important;
  grid-row:2!important;
  justify-self:center!important;
  align-self:center!important;
  width:min(100%,400px)!important;
  max-width:400px!important;
  height:330px!important;
  max-height:none!important;
  margin:-18px auto 0!important;
  object-fit:contain!important;
  transform:scale(1.25)!important;
  transform-origin:center center!important;
  filter:drop-shadow(0 20px 26px rgba(0,0,0,.48)) drop-shadow(0 0 20px rgba(255,161,65,.38))!important;
}

#comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) footer{
  grid-column:1!important;
  grid-row:3!important;
  width:84%!important;
  min-height:23px!important;
  padding:5px 12px!important;
  margin:0 auto!important;
  font-size:.5rem!important;
  line-height:1.1!important;
  text-align:center!important;
}

#comingSoonModal.share-builder-modal-shell .share-builder-actions,
#comingSoonModal.share-builder-modal-shell .dragon-detail-actions.share-builder-actions{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
  width:100%!important;
  margin-top:10px!important;
}

#comingSoonModal.share-builder-modal-shell .share-builder-actions button,
#comingSoonModal.share-builder-modal-shell .dragon-detail-actions.share-builder-actions button{
  grid-column:auto!important;
  justify-self:stretch!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:48px!important;
  min-height:48px!important;
  margin:0!important;
  padding:0 12px!important;
}

#comingSoonModal.share-builder-modal-shell .share-builder-actions button.primary-wide,
#comingSoonModal.share-builder-modal-shell .dragon-detail-actions.share-builder-actions button.primary-wide,
#comingSoonModal.share-builder-modal-shell .share-builder-actions button.secondary-wide,
#comingSoonModal.share-builder-modal-shell .dragon-detail-actions.share-builder-actions button.secondary-wide{
  grid-column:auto!important;
  width:100%!important;
  max-width:none!important;
}

@media(max-width:760px){
  #comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview){
    width:min(360px,100%)!important;
    height:450px!important;
    min-height:450px!important;
  }
  #comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-inner{
    grid-template-columns:1fr!important;
  }
  #comingSoonModal.share-builder-modal-shell .share-card-preview.share-card-fantasy:not(.share-card-page-preview) .share-card-item-image{
    width:min(70%,230px)!important;
    max-width:230px!important;
    max-height:220px!important;
  }
  #comingSoonModal.share-builder-modal-shell .share-builder-actions,
  #comingSoonModal.share-builder-modal-shell .dragon-detail-actions.share-builder-actions{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
  }
  #comingSoonModal.share-builder-modal-shell .share-builder-actions button,
  #comingSoonModal.share-builder-modal-shell .dragon-detail-actions.share-builder-actions button{
    font-size:.76rem!important;
    padding:0 6px!important;
  }
}

/* Share the Magic target layout: text/button left, preview egg right. */
body.dragon-studio-mode .ds-dashboard .ds-share{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 160px!important;
  grid-template-rows:1fr!important;
  align-items:center!important;
  gap:28px!important;
  height:250px!important;
  min-height:250px!important;
  padding:28px!important;
  overflow:hidden!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share > div{
  grid-column:1!important;
  grid-row:1!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:auto auto auto!important;
  align-content:center!important;
  justify-items:start!important;
  gap:16px!important;
  width:100%!important;
  min-width:0!important;
  max-width:560px!important;
  height:auto!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share h2{
  grid-column:1!important;
  grid-row:1!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  font-size:24px!important;
  line-height:1.15!important;
  white-space:nowrap!important;
  overflow:visible!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share h2 img,
body.dragon-studio-mode .ds-dashboard .ds-share h2 .ds-ui-icon{
  flex:0 0 auto!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share p{
  grid-column:1!important;
  grid-row:2!important;
  width:100%!important;
  min-width:0!important;
  max-width:500px!important;
  margin:0!important;
  font-size:16px!important;
  line-height:1.35!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share button{
  position:static!important;
  grid-column:1!important;
  grid-row:3!important;
  justify-self:start!important;
  align-self:start!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  width:min(420px,100%)!important;
  min-width:0!important;
  height:58px!important;
  margin:10px 0 0!important;
  white-space:nowrap!important;
  z-index:1!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share > .share-magic-img,
body.dragon-studio-mode .ds-dashboard .ds-share > img{
  position:static!important;
  grid-column:2!important;
  grid-row:1!important;
  justify-self:center!important;
  align-self:center!important;
  width:124px!important;
  height:124px!important;
  max-width:124px!important;
  margin:0!important;
  object-fit:contain!important;
}

@media(max-width:760px){
  body.dragon-studio-mode .ds-dashboard .ds-share{
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto!important;
    height:auto!important;
    min-height:0!important;
    padding:22px!important;
    overflow:visible!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-share > div{
    grid-column:1!important;
    grid-row:1!important;
    max-width:none!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-share h2{
    white-space:normal!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-share > .share-magic-img,
  body.dragon-studio-mode .ds-dashboard .ds-share > img{
    grid-column:1!important;
    grid-row:2!important;
    width:112px!important;
    height:112px!important;
    max-width:112px!important;
    justify-self:center!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-share button{
    width:100%!important;
  }
}

/* Share the Magic button restore: keep the existing button inside the card. */
body.dragon-studio-mode .ds-dashboard .ds-share{
  display:grid!important;
  grid-template-columns:120px minmax(0,1fr)!important;
  grid-template-rows:1fr!important;
  align-items:center!important;
  gap:18px!important;
  height:250px!important;
  min-height:250px!important;
  padding:20px!important;
  overflow:hidden!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share > .share-magic-img,
body.dragon-studio-mode .ds-dashboard .ds-share > img{
  position:static!important;
  grid-column:1!important;
  grid-row:1!important;
  justify-self:center!important;
  align-self:center!important;
  width:112px!important;
  height:112px!important;
  max-width:112px!important;
  margin:0!important;
  object-fit:cover!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share > div{
  display:grid!important;
  grid-column:2!important;
  grid-row:1!important;
  grid-template-columns:minmax(0,1fr) minmax(210px,230px)!important;
  grid-template-rows:auto auto!important;
  align-items:center!important;
  column-gap:18px!important;
  row-gap:6px!important;
  width:100%!important;
  min-width:0!important;
  height:auto!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share h2{
  grid-column:1!important;
  grid-row:1!important;
  align-self:end!important;
  justify-self:start!important;
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  white-space:normal!important;
  overflow:visible!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  line-height:1.15!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share p{
  grid-column:1!important;
  grid-row:2!important;
  align-self:start!important;
  justify-self:start!important;
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}

body.dragon-studio-mode .ds-dashboard .ds-share button{
  position:static!important;
  grid-column:2!important;
  grid-row:1 / 3!important;
  justify-self:stretch!important;
  align-self:center!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
  height:58px!important;
  margin:0!important;
  white-space:nowrap!important;
}

@media(max-width:760px){
  body.dragon-studio-mode .ds-dashboard .ds-share{
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-share > .share-magic-img,
  body.dragon-studio-mode .ds-dashboard .ds-share > img{
    grid-column:1!important;
    grid-row:1!important;
    width:112px!important;
    max-width:112px!important;
    margin:0 auto!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-share > div{
    grid-column:1!important;
    grid-row:2!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto auto!important;
    gap:8px!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-share h2,
  body.dragon-studio-mode .ds-dashboard .ds-share p,
  body.dragon-studio-mode .ds-dashboard .ds-share button{
    grid-column:1!important;
    grid-row:auto!important;
  }
  body.dragon-studio-mode .ds-dashboard .ds-share button{
    width:100%!important;
    margin-top:6px!important;
  }
}
/* Access promo and free-progress reminder */
.access-promo-panel {
  margin: 22px auto 0;
  max-width: 880px;
  padding: 18px;
  border: 1px solid rgba(122, 92, 255, 0.22);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 16px 36px rgba(45, 34, 108, 0.08);
}
.access-promo-panel h3 {
  margin: 0 0 6px;
  color: #151a4f;
}
.access-promo-panel p {
  margin: 0;
  color: #5d6282;
}
.access-promo-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  margin-top: 14px;
}
.access-promo-row input {
  min-width: 0;
  border: 1px solid rgba(102, 84, 255, 0.25);
  border-radius: 14px;
  padding: 13px 14px;
  font: 700 15px/1.2 inherit;
  color: #151a4f;
  background: #fff;
}
.access-promo-row button,
.keep-progress-actions button {
  border: 0;
  border-radius: 14px;
  padding: 12px 18px;
  font: 800 15px/1.2 inherit;
  cursor: pointer;
}
.access-promo-row button,
.keep-progress-actions .primary {
  color: #fff;
  background: linear-gradient(135deg, #7557ff, #5c49e8);
}
.access-promo-message {
  min-height: 20px;
  margin-top: 10px !important;
  font-weight: 800;
}
.access-promo-message.success { color: #24734f; }
.access-promo-message.error { color: #b83255; }
.keep-progress-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(6, 8, 32, 0.64);
  backdrop-filter: blur(8px);
}
.keep-progress-modal {
  position: relative;
  width: min(560px, 100%);
  padding: 30px;
  border: 1px solid rgba(172, 133, 255, 0.55);
  border-radius: 26px;
  color: #fff;
  text-align: center;
  background: radial-gradient(circle at top, rgba(103, 70, 178, 0.38), rgba(12, 17, 55, 0.98) 58%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.42);
}
.keep-progress-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.keep-progress-egg {
  width: 82px;
  height: 82px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.08);
}
.keep-progress-egg img {
  max-width: 70px;
  max-height: 70px;
  object-fit: contain;
}
.keep-progress-modal h2 {
  margin: 0 0 10px;
  font-size: 34px;
  color: #fff;
}
.keep-progress-modal p {
  margin: 0 auto 18px;
  max-width: 480px;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.55;
}
.keep-progress-benefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 18px 0 22px;
}
.keep-progress-benefits span {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: #e9e3ff;
  background: rgba(255, 255, 255, 0.08);
  font-weight: 800;
}
.keep-progress-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.keep-progress-actions .secondary,
.keep-progress-actions .ghost {
  color: #f4f1ff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.keep-progress-actions .yearly {
  background: linear-gradient(135deg, #9a66ff, #df66aa);
}

.premium-upgrade-preview-body,
.premium-upgrade-overlay{
  min-height:100vh;
  background:
    radial-gradient(circle at 50% 16%, rgba(124,77,255,.38), transparent 34%),
    radial-gradient(circle at 18% 82%, rgba(255,214,107,.12), transparent 28%),
    linear-gradient(180deg, #050a24 0%, #08103a 48%, #030718 100%);
}

.premium-upgrade-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  padding:28px 18px;
  overflow:auto;
  backdrop-filter:blur(12px);
}

.premium-upgrade-preview-body{
  display:grid;
  place-items:center;
  margin:0;
  padding:32px 18px;
  color:#fff;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.premium-upgrade-preview-body::before,
.premium-upgrade-overlay::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.8), transparent 74%);
}

.premium-upgrade-modal{
  position:relative;
  width:min(520px, calc(100vw - 32px));
  padding:32px 30px 28px;
  border-radius:28px;
  border:1px solid rgba(166,132,255,.72);
  background:linear-gradient(180deg, rgba(18,22,74,.96), rgba(7,13,43,.98));
  box-shadow:0 30px 90px rgba(0,0,0,.58), 0 0 34px rgba(124,77,255,.34), inset 0 1px 0 rgba(255,255,255,.12);
  color:#fff;
  text-align:center;
  overflow:hidden;
}

.premium-upgrade-modal::after{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  border-radius:28px;
  background:radial-gradient(circle at 50% 0%, rgba(255,214,107,.18), transparent 34%);
}

.premium-upgrade-close{
  position:absolute;
  top:16px;
  right:16px;
  z-index:2;
  width:36px;
  height:36px;
  border:1px solid rgba(216,210,255,.32);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}

.premium-upgrade-dragon{
  position:relative;
  z-index:1;
  width:150px;
  height:150px;
  margin:0 auto 10px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:radial-gradient(circle, rgba(255,214,107,.18), rgba(124,77,255,.08) 58%, transparent 68%);
}

.premium-upgrade-dragon img{
  width:132px;
  height:132px;
  object-fit:contain;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.34));
}

.premium-upgrade-modal h2{
  position:relative;
  z-index:1;
  margin:0;
  color:#ffd66b;
  font-size:clamp(32px, 6vw, 46px);
  line-height:1.02;
  font-weight:1000;
  text-shadow:0 0 18px rgba(255,214,107,.42), 0 3px 14px rgba(0,0,0,.58);
}

.premium-upgrade-subtitle{
  position:relative;
  z-index:1;
  margin:12px auto 20px;
  color:#d8d2ff;
  font-size:18px;
  font-weight:750;
  line-height:1.35;
}

.premium-upgrade-benefits{
  position:relative;
  z-index:1;
  display:grid;
  gap:10px;
  margin:0 0 24px;
  padding:0;
  list-style:none;
  text-align:left;
}

.premium-upgrade-benefits li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(216,210,255,.18);
  background:rgba(255,255,255,.07);
  color:#ffffff;
  font-size:15px;
  font-weight:750;
  line-height:1.35;
}

.premium-upgrade-benefits li::before{
  content:"";
  flex:0 0 10px;
  width:10px;
  height:10px;
  margin-top:5px;
  border-radius:999px;
  background:#ffd66b;
  box-shadow:0 0 14px rgba(255,214,107,.7);
}

.premium-upgrade-actions{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.premium-upgrade-actions button,
.premium-upgrade-actions a{
  min-height:54px;
  border:0;
  border-radius:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-size:17px;
  font-weight:950;
  cursor:pointer;
}

.premium-upgrade-primary{
  background:linear-gradient(180deg,#7c4dff,#5735e5);
  color:#fff;
  box-shadow:0 12px 24px rgba(87,53,229,.32);
}

.premium-upgrade-primary.yearly{
  background:linear-gradient(180deg,#ffd66b,#ffb52d);
  color:#09103c;
}

.premium-upgrade-secondary{
  grid-column:1 / -1;
  background:rgba(255,255,255,.08);
  color:#d8d2ff;
  border:1px solid rgba(216,210,255,.28)!important;
}

@media (max-width: 560px){
  .premium-upgrade-modal{padding:28px 20px 22px;border-radius:24px;}
  .premium-upgrade-actions{grid-template-columns:1fr;}
}

/* Premium upgrade popup: wide review design. */
.premium-upgrade-overlay{
  position:fixed!important;
  inset:0!important;
  z-index:9999!important;
  display:grid!important;
  place-items:center!important;
  padding:28px 18px!important;
  overflow:auto!important;
  background:rgba(5,8,30,.72)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}

.premium-upgrade-overlay::before{
  display:none!important;
}

.premium-upgrade-preview-body .premium-upgrade-overlay{
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

.premium-upgrade-modal.premium-upgrade-modal-wide{
  width:min(1120px, calc(100vw - 44px))!important;
  min-height:0!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:43% 57%!important;
  grid-template-rows:1fr auto auto!important;
  border-radius:30px!important;
  border:1px solid rgba(199,184,255,.78)!important;
  background:linear-gradient(120deg,#f6f1ff 0%,#ffffff 58%,#f6f3ff 100%)!important;
  color:#10143f!important;
  text-align:left!important;
  box-shadow:0 30px 90px rgba(0,0,0,.52), 0 0 38px rgba(137,91,255,.38)!important;
}

.premium-upgrade-modal.premium-upgrade-modal-wide::after{
  background:none!important;
}

.premium-upgrade-close{
  top:18px!important;
  right:18px!important;
  width:44px!important;
  height:44px!important;
  display:grid!important;
  place-items:center!important;
  background:#fff!important;
  border:1px solid rgba(112,91,185,.2)!important;
  box-shadow:0 8px 20px rgba(28,18,78,.12)!important;
}

.premium-upgrade-close img{
  width:24px!important;
  height:24px!important;
}

.premium-upgrade-art{
  position:relative!important;
  grid-row:1 / 4!important;
  min-height:500px!important;
  overflow:hidden!important;
  border-radius:30px 0 0 30px!important;
  background:
    radial-gradient(circle at 68% 20%, rgba(255,255,255,.78), transparent 22%),
    linear-gradient(145deg,#b98dff 0%,#d9c7ff 28%,#f7eaff 55%,#efe6ff 100%)!important;
}

.premium-upgrade-art::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:
    radial-gradient(circle at 28% 28%, rgba(255,214,107,.52), transparent 8%),
    radial-gradient(circle at 62% 72%, rgba(112,238,255,.28), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(92,48,207,.12))!important;
}

.premium-upgrade-glow{
  position:absolute!important;
  width:470px!important;
  height:470px!important;
  left:36px!important;
  top:40px!important;
  opacity:.74!important;
  mix-blend-mode:screen!important;
}

.premium-upgrade-sparkles{
  position:absolute!important;
  z-index:2!important;
  pointer-events:none!important;
}

.premium-upgrade-sparkles.sparkle-a{
  width:52px!important;
  left:58px!important;
  top:86px!important;
}

.premium-upgrade-sparkles.sparkle-b{
  width:30px!important;
  right:62px!important;
  top:76px!important;
}

.premium-upgrade-dragon-img{
  position:absolute!important;
  z-index:3!important;
  width:80%!important;
  max-width:430px!important;
  left:50%!important;
  bottom:58px!important;
  transform:translateX(-50%)!important;
  filter:drop-shadow(0 22px 24px rgba(56,26,136,.32))!important;
}

.premium-upgrade-egg-img{
  position:absolute!important;
  z-index:4!important;
  width:102px!important;
  left:82px!important;
  bottom:70px!important;
  filter:drop-shadow(0 14px 20px rgba(50,25,119,.28))!important;
}

.premium-upgrade-content{
  position:relative!important;
  z-index:1!important;
  padding:28px 54px 14px 48px!important;
  align-self:center!important;
}

.premium-upgrade-badge{
  width:max-content!important;
  margin:0 0 14px!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:9px!important;
  padding:9px 18px!important;
  border-radius:9px!important;
  background:linear-gradient(180deg,#744dff,#4e2fd0)!important;
  color:#fff!important;
  font-size:15px!important;
  font-weight:950!important;
  letter-spacing:.02em!important;
  text-transform:uppercase!important;
  box-shadow:0 12px 20px rgba(82,47,208,.24)!important;
}

.premium-upgrade-badge img{
  width:22px!important;
  height:22px!important;
}

.premium-upgrade-modal.premium-upgrade-modal-wide h2{
  margin:0!important;
  color:#10143f!important;
  font-size:clamp(34px, 4.4vw, 52px)!important;
  line-height:.98!important;
  letter-spacing:-.02em!important;
  font-weight:1000!important;
  text-shadow:none!important;
}

.premium-upgrade-modal.premium-upgrade-modal-wide h2::first-letter{
  color:inherit!important;
}

.premium-upgrade-modal.premium-upgrade-modal-wide h2{
  background:linear-gradient(90deg,#10143f 0%,#10143f 44%,#5b35e8 75%,#7b4dff 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
}

.premium-upgrade-subtitle{
  margin:12px 0 6px!important;
  color:#5b35e8!important;
  font-size:22px!important;
  font-weight:900!important;
  text-shadow:none!important;
}

.premium-upgrade-copy{
  margin:0 0 16px!important;
  color:#32385d!important;
  font-size:18px!important;
  font-weight:600!important;
  line-height:1.45!important;
}

.premium-upgrade-benefits{
  margin:0!important;
  padding:14px 18px!important;
  gap:0!important;
  border:1px solid rgba(83,55,170,.14)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.78)!important;
  box-shadow:0 12px 28px rgba(48,32,102,.12)!important;
}

.premium-upgrade-benefits li{
  padding:6px 0!important;
  gap:14px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#11163f!important;
  font-size:16px!important;
  font-weight:700!important;
}

.premium-upgrade-benefits li::before{
  display:none!important;
}

.premium-upgrade-benefits li img{
  width:24px!important;
  height:24px!important;
  flex:0 0 24px!important;
}

.premium-upgrade-free-note{
  margin:14px 0 0!important;
  min-height:44px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  padding:10px 16px!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,#fff0b8,#ffe19a)!important;
  color:#10143f!important;
  font-size:16px!important;
  font-weight:800!important;
}

.premium-upgrade-free-note img{
  width:28px!important;
  height:28px!important;
}

.premium-upgrade-modal.premium-upgrade-modal-wide .premium-upgrade-actions{
  grid-column:1 / 3!important;
  display:grid!important;
  grid-template-columns:1fr 1fr .92fr!important;
  gap:28px!important;
  padding:24px 44px 16px!important;
  border-top:1px solid rgba(39,34,85,.08)!important;
  background:rgba(255,255,255,.62)!important;
}

.premium-upgrade-modal.premium-upgrade-modal-wide .premium-upgrade-actions button,
.premium-upgrade-modal.premium-upgrade-modal-wide .premium-upgrade-actions a{
  position:relative!important;
  min-height:84px!important;
  padding:13px 20px!important;
  border-radius:18px!important;
  display:grid!important;
  grid-template-columns:58px 1fr!important;
  grid-template-rows:auto auto!important;
  column-gap:14px!important;
  align-items:center!important;
  justify-content:start!important;
  text-align:left!important;
  font-size:20px!important;
  font-weight:900!important;
}

.premium-upgrade-modal.premium-upgrade-modal-wide .premium-upgrade-actions img{
  grid-row:1 / 3!important;
  width:46px!important;
  height:46px!important;
}

.premium-upgrade-modal.premium-upgrade-modal-wide .premium-upgrade-actions span{
  align-self:end!important;
}

.premium-upgrade-modal.premium-upgrade-modal-wide .premium-upgrade-actions b{
  align-self:start!important;
  color:#ffd66b!important;
  font-size:25px!important;
  line-height:1!important;
}

.premium-upgrade-modal.premium-upgrade-modal-wide .premium-upgrade-primary.monthly,
.premium-upgrade-modal.premium-upgrade-modal-wide .premium-upgrade-primary.yearly{
  color:#fff!important;
  background:linear-gradient(180deg,#7e4fff,#512fdc)!important;
  box-shadow:0 14px 26px rgba(81,47,220,.34)!important;
}

.premium-upgrade-modal.premium-upgrade-modal-wide .premium-upgrade-primary.yearly{
  border:2px solid #ffd66b!important;
  box-shadow:0 16px 28px rgba(81,47,220,.34), 0 0 0 3px rgba(255,214,107,.18)!important;
}

.premium-upgrade-modal.premium-upgrade-modal-wide .premium-upgrade-primary.yearly em{
  position:absolute!important;
  top:-24px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  min-width:180px!important;
  height:34px!important;
  padding:0 16px!important;
  border-radius:12px 12px 0 0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  background:linear-gradient(180deg,#ffe68a,#f3c145)!important;
  color:#332100!important;
  font-size:13px!important;
  font-style:normal!important;
  font-weight:950!important;
  text-transform:uppercase!important;
}

.premium-upgrade-modal.premium-upgrade-modal-wide .premium-upgrade-primary.yearly em img{
  width:15px!important;
  height:15px!important;
}

.premium-upgrade-modal.premium-upgrade-modal-wide .premium-upgrade-secondary{
  grid-column:auto!important;
  color:#5b35e8!important;
  background:#fff!important;
  border:1.5px solid #6b4cff!important;
  box-shadow:none!important;
}

.premium-upgrade-modal.premium-upgrade-modal-wide .premium-upgrade-secondary img{
  width:56px!important;
  height:56px!important;
}

.premium-upgrade-footer{
  grid-column:1 / 3!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  padding:0 44px 18px!important;
  color:#6a6791!important;
  font-size:16px!important;
  font-weight:650!important;
  background:rgba(255,255,255,.62)!important;
}

.premium-upgrade-footer img{
  width:24px!important;
  height:24px!important;
}

@media (max-width: 900px){
  .premium-upgrade-modal.premium-upgrade-modal-wide{
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto auto auto!important;
    width:min(560px, calc(100vw - 28px))!important;
  }
  .premium-upgrade-art{
    grid-row:auto!important;
    min-height:300px!important;
    border-radius:30px 30px 0 0!important;
  }
  .premium-upgrade-dragon-img{width:64%!important;bottom:28px!important;}
  .premium-upgrade-egg-img{width:76px!important;left:28%!important;bottom:42px!important;}
  .premium-upgrade-content{padding:26px 24px 18px!important;}
  .premium-upgrade-modal.premium-upgrade-modal-wide .premium-upgrade-actions,
  .premium-upgrade-footer{grid-column:auto!important;}
  .premium-upgrade-modal.premium-upgrade-modal-wide .premium-upgrade-actions{
    grid-template-columns:1fr!important;
    gap:14px!important;
    padding:20px 24px!important;
  }
  .premium-upgrade-footer{padding:0 24px 22px!important;}
}
@media (max-width: 640px) {
  .access-promo-row,
  .keep-progress-actions {
    grid-template-columns: 1fr;
  }
  .keep-progress-modal {
    padding: 26px 20px;
  }
}

/* Hatchery Match-Up final ranking readability correction. */
.hatchery-match-page .hatchery-leaderboard,
.hatchery-completion-modal .hatchery-leaderboard{
  color:#ffffff!important;
}

.hatchery-leaderboard h2,
.hatchery-completion-modal .hatchery-leaderboard.compact h2{
  color:#ffd66b!important;
  font-weight:1000!important;
  text-shadow:0 0 18px rgba(255,214,107,.52),0 2px 10px rgba(0,0,0,.56)!important;
}

.hatchery-leaderboard p,
.hatchery-completion-modal .hatchery-leaderboard.compact p{
  color:#f4f1ff!important;
  font-weight:1000!important;
  text-shadow:0 0 14px rgba(216,210,255,.36)!important;
}

.hatchery-rank-head,
.hatchery-rank-head span{
  color:#ffffff!important;
  font-size:.84rem!important;
  font-weight:700!important;
  text-shadow:0 2px 8px rgba(0,0,0,.54)!important;
}

.hatchery-rank-row,
.hatchery-rank-row b,
.hatchery-rank-row strong{
  color:#ffffff!important;
  font-weight:600!important;
  line-height:1.1!important;
  text-shadow:0 1px 6px rgba(0,0,0,.44)!important;
}

.hatchery-rank-row b{
  font-size:.86rem!important;
  font-weight:600!important;
}

.hatchery-rank-row strong{
  color:#ffffff!important;
  font-size:.88rem!important;
  font-weight:600!important;
  text-align:right!important;
  letter-spacing:.02em!important;
  text-shadow:0 1px 8px rgba(0,0,0,.64)!important;
}

.hatchery-rank-row,
.hatchery-rank-row.current,
.hatchery-rank-row.best,
.hatchery-rank-row.you{
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid rgba(216,210,255,.24)!important;
  border-radius:0!important;
  box-shadow:none!important;
  display:grid!important;
  grid-template-columns:40px minmax(118px,1fr) 74px!important;
  align-items:center!important;
  gap:8px!important;
  min-height:30px!important;
  padding:4px 8px!important;
  margin:0!important;
}

.hatchery-rank-row.you{
  background:rgba(124,77,255,.18)!important;
  border:1px solid rgba(155,124,255,.46)!important;
  border-radius:10px!important;
  box-shadow:0 0 12px rgba(155,124,255,.18)!important;
  padding-left:8px!important;
  padding-right:8px!important;
}

.hatchery-rank-row .rank-player{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  min-width:0!important;
  overflow:visible!important;
}

.hatchery-rank-row .rank-player span{
  color:#ffffff!important;
  font-size:.86rem!important;
  font-weight:600!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

.hatchery-rank-row .rank-player em{
  display:inline-flex!important;
  align-items:center!important;
  min-height:18px!important;
  padding:2px 8px!important;
  border-radius:999px!important;
  background:rgba(124,77,255,.42)!important;
  color:#ffffff!important;
  font-size:.72rem!important;
  font-style:normal!important;
  font-weight:600!important;
  text-shadow:none!important;
  white-space:nowrap!important;
}

.hatchery-rank-row.current *,
.hatchery-rank-row.best *,
.hatchery-rank-row.you *{
  color:#ffffff!important;
}

.hatchery-rank-row.you strong{
  color:#fff6d0!important;
}

.hatchery-rank-row .rank-number{
  color:rgba(255,255,255,.65)!important;
  font-size:.85rem!important;
  font-weight:600!important;
}

.hatchery-leaderboard small{
  color:#d8d2ff!important;
  display:block!important;
  margin-top:8px!important;
  text-align:center!important;
  font-size:.82rem!important;
  font-weight:500!important;
  line-height:1.25!important;
  text-shadow:0 1px 7px rgba(0,0,0,.44)!important;
}

.hatchery-completion-modal .hatchery-leaderboard.compact{
  padding:12px 16px!important;
}

.hatchery-completion-modal .hatchery-rank-row{
  min-height:30px!important;
  padding-top:3px!important;
  padding-bottom:3px!important;
  font-size:.9rem!important;
}

.hatchery-completion-modal .hatchery-rank-row b,
.hatchery-completion-modal .hatchery-rank-row .rank-player span{
  font-size:.92rem!important;
  font-weight:600!important;
}

.hatchery-completion-modal .hatchery-rank-row strong{
  color:#ffffff!important;
  font-size:.92rem!important;
  font-weight:600!important;
}

.hatchery-completion-modal .hatchery-rank-row .rank-player em{
  min-height:18px!important;
  padding:2px 8px!important;
  font-size:.72rem!important;
  font-weight:600!important;
}

.hatchery-match-page .hatchery-leaderboard .hatchery-rank-row strong,
.hatchery-completion-modal .hatchery-leaderboard .hatchery-rank-row strong{
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
}

.hatchery-match-page .hatchery-leaderboard .hatchery-rank-row.you strong,
.hatchery-completion-modal .hatchery-leaderboard .hatchery-rank-row.you strong{
  color:#fff6d0!important;
  -webkit-text-fill-color:#fff6d0!important;
}

.hatchery-completion-modal,
.hatchery-completion-modal h2,
.hatchery-completion-stats small,
.hatchery-completion-stats b,
.hatchery-completion-modal>p{
  color:#ffffff!important;
}

.hatchery-completion-modal>p{
  color:#d8d2ff!important;
}


/* Payment success and canceled pages. */
.payment-success-page,
.payment-canceled-page{
  position:relative;
  isolation:isolate;
  min-height:calc(100vh - 80px);
  display:grid;
  place-items:center;
  padding:28px 18px 38px;
  overflow-x:hidden;
  color:#081035;
  background:
    radial-gradient(circle at 20% 10%, rgba(124,77,255,.22), transparent 32%),
    radial-gradient(circle at 84% 18%, rgba(255,214,107,.13), transparent 28%),
    linear-gradient(135deg, #050725 0%, #10093a 50%, #020616 100%);
}
.payment-success-page::before,
.payment-canceled-page::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(4,7,28,.56);
}
.payment-success-shell{
  width:min(1080px, 100%);
  margin:0 auto;
}
.payment-success-card{
  display:grid;
  grid-template-columns:minmax(340px,.98fr) minmax(410px,1.02fr);
  overflow:hidden;
  min-height:520px;
  border:1px solid rgba(216,210,255,.75);
  border-radius:28px;
  background:#fbf9ff;
  box-shadow:0 24px 70px rgba(0,0,0,.42), 0 0 36px rgba(124,77,255,.20);
}
.payment-success-art{
  position:relative;
  display:grid;
  place-items:end center;
  min-height:520px;
  padding:24px 22px 0;
  background:
    linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.05)),
    url("assets/bg_soft_celestial_alt.webp") center/cover no-repeat,
    radial-gradient(circle at 50% 45%, rgba(185,129,255,.34), transparent 44%),
    linear-gradient(180deg, #d8c8ff, #f8f3ff);
}
.payment-success-art::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent 72%, rgba(251,249,255,.72));
  pointer-events:none;
}
.payment-success-art img{
  position:relative;
  z-index:1;
  width:min(94%, 480px);
  max-height:500px;
  object-fit:contain;
  filter:drop-shadow(0 22px 34px rgba(51,23,100,.28));
}
.payment-success-content{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
  padding:36px 42px;
  color:#091034;
  background:linear-gradient(135deg, #ffffff 0%, #fbf9ff 60%, #f3efff 100%);
}
.payment-success-head{
  display:flex;
  align-items:center;
  gap:18px;
}
.payment-success-check,
.payment-canceled-icon{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:70px;
  height:70px;
  border-radius:50%;
  color:#fff;
  font-size:40px;
  font-weight:900;
  background:linear-gradient(135deg, #43e68b, #1bad5d);
  box-shadow:0 0 0 7px rgba(52,211,124,.13), 0 0 24px rgba(52,211,124,.35);
}
.payment-success-content h1,
.payment-canceled-card h1{
  margin:0;
  color:#081035;
  font-size:clamp(2rem, 3.2vw, 3rem);
  line-height:1.04;
  letter-spacing:0;
}
.payment-success-content h1::after{
  content:" \1F389";
  font-size:.78em;
}
.payment-success-content h2{
  margin:7px 0 0;
  color:#6d38d8;
  font-size:clamp(1.03rem, 1.5vw, 1.28rem);
  line-height:1.28;
  letter-spacing:0;
}
.payment-success-message,
.payment-canceled-card p{
  margin:0;
  color:#222846;
  font-size:1rem;
  line-height:1.45;
}
.payment-success-note,
.payment-success-plan-card{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border:1px solid rgba(124,77,255,.16);
  border-radius:16px;
  background:#ffffff;
  box-shadow:0 10px 24px rgba(38,24,92,.08);
}
.payment-success-note span,
.payment-success-mini-icon{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:40px;
  height:40px;
  border-radius:50%;
  color:#fff;
  font-size:21px;
  background:linear-gradient(135deg, #7c4dff, #4f2be9);
}
.payment-success-note.warning{
  border-color:rgba(245,180,48,.28);
  background:linear-gradient(135deg, #fff7dc, #ffefb7);
  box-shadow:0 10px 22px rgba(178,126,24,.12);
}
.payment-success-note.warning span{background:linear-gradient(135deg, #ffd66b, #f7a92f);color:#2d1742;}
.payment-success-note p{margin:0;color:#161d3e;line-height:1.4;font-size:.95rem;}
.payment-success-plan-card{
  justify-content:space-between;
  background:linear-gradient(135deg, #ffffff, #f5f0ff);
}
.payment-success-plan-card .plan-shield{font-size:46px;color:#7c4dff;filter:drop-shadow(0 0 12px rgba(124,77,255,.25));}
.payment-success-plan-card small{display:block;color:#6b638b;font-weight:700;font-size:.8rem;}
.payment-success-plan-card b{display:block;color:#10153a;font-size:1.15rem;}
.payment-success-plan-card strong{display:block;color:#6d38d8;font-size:1.55rem;line-height:1.12;}
.payment-success-plan-card strong em{font-size:.92rem;color:#222846;font-style:normal;font-weight:600;}
.payment-success-plan-card i{font-style:normal;color:#159a4f;border:1px solid rgba(28,177,88,.32);border-radius:999px;padding:7px 12px;background:#dff6e7;font-weight:800;font-size:.85rem;white-space:nowrap;}
.payment-success-benefits{display:none;}
.payment-success-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:4px;}
.payment-success-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:54px;border-radius:14px;font-size:.96rem;font-weight:800;cursor:pointer;letter-spacing:0;}
.payment-success-primary{border:0;color:#fff;background:linear-gradient(135deg,#7c4dff,#4e2ee8);box-shadow:0 12px 26px rgba(74,42,210,.28);}
.payment-success-support{border:1px solid rgba(124,77,255,.34);color:#4e2ee8;background:#ffffff;box-shadow:0 10px 22px rgba(38,24,92,.08);}
.payment-success-secondary,.payment-success-quiet{border:1px solid rgba(124,77,255,.34);color:#4e2ee8;background:#ffffff;}
.payment-success-security{margin:0;text-align:center;color:#625b80;font-size:.88rem;line-height:1.35;}
.payment-canceled-shell{display:grid;place-items:center;min-height:420px;}
.payment-canceled-card{width:min(620px,100%);padding:36px 32px;border:1px solid rgba(216,210,255,.75);border-radius:26px;text-align:center;color:#081035;background:linear-gradient(135deg,#ffffff,#f5f0ff);box-shadow:0 24px 70px rgba(0,0,0,.42);}
.payment-canceled-icon{margin:0 auto 18px;background:linear-gradient(135deg,#ff6b8a,#b93159);box-shadow:0 0 0 7px rgba(255,107,138,.12), 0 0 26px rgba(255,107,138,.28);}
@media (max-width:900px){
  .payment-success-page,.payment-canceled-page{padding:18px 10px 30px;align-items:start;}
  .payment-success-card{grid-template-columns:1fr;min-height:0;}
  .payment-success-art{min-height:290px;padding:18px 18px 0;}
  .payment-success-art::after{background:linear-gradient(180deg, transparent 70%, rgba(251,249,255,.86));}
  .payment-success-art img{max-height:310px;width:min(88%,380px);}
  .payment-success-content{padding:26px 20px;gap:13px;}
  .payment-success-head{align-items:flex-start;gap:12px;}
  .payment-success-check{width:58px;height:58px;font-size:34px;}
  .payment-success-actions{grid-template-columns:1fr;}
  .payment-success-plan-card{align-items:flex-start;}
}
.profile-payment-help{border-color:rgba(155,124,255,.28)!important;background:linear-gradient(135deg,rgba(124,77,255,.09),rgba(255,255,255,.04))!important;}
.profile-payment-help p{color:#d8d2ff;line-height:1.5;}







/* Grade 2-12 shared plan selector and compact level cards. */
body:not(.dragon-studio-mode) #levelPage .level-grid.g212{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:22px!important;
  max-width:1320px!important;
  margin:0 auto!important;
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212::before{
  content:"HatchElite";
  grid-column:1/-1;
  display:block;
  margin:0 auto -22px;
  color:#ffffff;
  font-size:clamp(1.65rem,3vw,2.5rem);
  line-height:1;
  font-weight:900;
  letter-spacing:0;
  text-align:center;
  text-shadow:0 8px 28px rgba(0,0,0,.35);
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .grade-plan-selector{
  grid-column:1/-1;
  padding:28px 32px 18px;
  border:1px solid rgba(155,124,255,.24);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(20,18,64,.86),rgba(15,22,61,.72));
  box-shadow:0 24px 70px rgba(0,0,0,.24);
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .grade-plan-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .grade-plan-card{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:6px 16px;
  min-height:138px;
  padding:22px 24px;
  border:2px solid rgba(155,124,255,.28);
  border-radius:16px;
  background:#fbf9ff;
  color:#081035;
  text-align:left;
  box-shadow:0 14px 32px rgba(0,0,0,.16);
  cursor:pointer;
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .grade-plan-card.selected,
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .grade-plan-card:hover{
  border-color:#7c4dff;
  transform:translateY(-1px);
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .grade-plan-card.yearly{
  border-color:#f3bb35;
  background:linear-gradient(135deg,#fffdfa,#fff3c7);
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .grade-plan-card em{
  position:absolute;
  top:-13px;
  left:50%;
  transform:translateX(-50%);
  padding:5px 12px;
  border-radius:999px;
  background:#6b4cff;
  color:#fff;
  font-size:.72rem;
  font-weight:900;
  font-style:normal;
  white-space:nowrap;
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .grade-plan-card.yearly em{
  color:#231328;
  background:#ffd66b;
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .grade-plan-icon{
  grid-row:1/4;
  display:grid;
  place-items:center;
  width:68px;
  height:68px;
  border-radius:999px;
  color:#fff;
  font-size:2rem;
  background:linear-gradient(135deg,#7c4dff,#5034d8);
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .grade-plan-card.free .grade-plan-icon{
  color:#5b45da;
  background:#ede9ff;
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .grade-plan-card.yearly .grade-plan-icon{
  color:#fff;
  background:linear-gradient(135deg,#f5c247,#e69a20);
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .grade-plan-card b{
  color:#081035;
  font-size:1.25rem;
  line-height:1.1;
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .grade-plan-card small{
  color:#272b52;
  font-size:.94rem;
  line-height:1.35;
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .grade-plan-card strong{
  color:#6546e8;
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  line-height:1;
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .grade-plan-card.yearly strong{color:#b77815;}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .grade-plan-continue{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:min(560px,100%);
  min-height:54px;
  margin:22px auto 8px;
  border:0;
  border-radius:10px;
  color:#fff;
  background:linear-gradient(135deg,#7c4dff,#5436df);
  box-shadow:0 14px 34px rgba(83,54,223,.32);
  font-size:1.05rem;
  font-weight:900;
  cursor:pointer;
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .grade-plan-note{
  margin:0;
  color:#d8d2ff;
  font-size:.88rem;
  text-align:center;
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .grade-levels-intro{
  grid-column:1/-1;
  margin:10px 0 -2px;
  color:#fff;
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .grade-levels-intro h2{
  margin:0 0 6px;
  color:#fff;
  font-size:1.7rem;
  line-height:1.1;
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .grade-levels-intro p{
  margin:0;
  color:#d8d2ff;
  font-size:.98rem;
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .level-card{
  min-height:0!important;
  padding:22px 24px 20px!important;
  border-radius:14px!important;
  gap:10px!important;
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .level-card .level-icon{
  width:64px!important;
  height:64px!important;
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .level-card h3{
  font-size:1.45rem!important;
  line-height:1.1!important;
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .level-card p,
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .level-feature{
  font-size:.9rem!important;
  line-height:1.35!important;
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .level-count-line{
  color:#5a45d6!important;
  font-size:.92rem!important;
  font-weight:850!important;
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .pricing-row{
  display:none!important;
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .level-card .start{
  margin-top:8px!important;
  min-height:42px!important;
  border-radius:8px!important;
  font-size:.95rem!important;
}
body:not(.dragon-studio-mode) #levelPage .full-access-unlocks{
  max-width:1320px!important;
}
@media (max-width:980px){
  body:not(.dragon-studio-mode) #levelPage .level-grid.g212{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .grade-plan-cards{grid-template-columns:1fr!important;}
}
@media (max-width:640px){
  body:not(.dragon-studio-mode) #levelPage .level-grid.g212{grid-template-columns:1fr!important;gap:16px!important;}
  body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .grade-plan-selector{padding:22px 14px 16px!important;}
  body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .grade-plan-card{grid-template-columns:auto 1fr!important;padding:18px!important;}
}

/* Obvious selected state for Grade 2-12 shared plan selector. */
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .grade-plan-card{
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease!important;
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .grade-plan-card::after{
  content:"";
  position:absolute;
  top:14px;
  right:14px;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:999px;
  border:2px solid rgba(124,77,255,.18);
  background:rgba(255,255,255,.78);
  color:#7c4dff;
  font-size:17px;
  font-weight:900;
  opacity:.42;
  transform:scale(.86);
  transition:all .2s ease;
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .grade-plan-card:hover{
  border-color:rgba(124,77,255,.72)!important;
  transform:translateY(-2px)!important;
  box-shadow:0 18px 38px rgba(68,44,150,.22)!important;
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .grade-plan-card.selected{
  z-index:3;
  transform:scale(1.02)!important;
  border-color:#7c4dff!important;
  background:linear-gradient(135deg,#ffffff,#f2ecff)!important;
  box-shadow:0 22px 52px rgba(107,76,255,.34), 0 0 0 5px rgba(124,77,255,.16)!important;
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .grade-plan-card.selected::after{
  content:"\2713";
  opacity:1;
  transform:scale(1);
  border-color:#7c4dff;
  background:linear-gradient(135deg,#7c4dff,#5436df);
  color:#fff;
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .grade-plan-card.free.selected{
  border-color:#7c4dff!important;
  box-shadow:0 22px 48px rgba(124,77,255,.28), 0 0 0 5px rgba(124,77,255,.14)!important;
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .grade-plan-card.monthly.selected{
  border-color:#6f4bff!important;
  background:linear-gradient(135deg,#ffffff,#eee8ff)!important;
  box-shadow:0 26px 60px rgba(103,73,255,.42), 0 0 0 6px rgba(124,77,255,.18)!important;
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .grade-plan-card.yearly:hover{
  border-color:rgba(243,187,53,.86)!important;
  box-shadow:0 18px 38px rgba(180,118,14,.22)!important;
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .grade-plan-card.yearly.selected{
  border-color:#f0b72f!important;
  background:linear-gradient(135deg,#fffdf7,#ffeeb1)!important;
  box-shadow:0 26px 60px rgba(209,144,29,.36), 0 0 0 6px rgba(255,214,107,.26)!important;
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .grade-plan-card.yearly.selected::after{
  border-color:#efb52d;
  background:linear-gradient(135deg,#ffd66b,#e8a41e);
  color:#2b1834;
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .grade-plan-card.selected .grade-plan-icon{
  box-shadow:0 0 0 6px rgba(124,77,255,.12), 0 12px 26px rgba(79,52,216,.22);
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .grade-plan-card.yearly.selected .grade-plan-icon{
  box-shadow:0 0 0 6px rgba(255,214,107,.18), 0 12px 26px rgba(183,120,21,.22);
}
body:not(.dragon-studio-mode) #levelPage .level-grid.g212 .grade-plan-note{
  font-weight:800!important;
}


/* Payment success confirmation: compact dark popup design. */
.payment-success-page{
  min-height:calc(100vh - 74px)!important;
  display:grid!important;
  place-items:center!important;
  padding:24px!important;
  background:
    radial-gradient(circle at 50% 8%, rgba(126,91,255,.28), transparent 34%),
    radial-gradient(circle at 12% 82%, rgba(68,196,255,.14), transparent 28%),
    linear-gradient(135deg,#05081e 0%,#090d2d 48%,#140a34 100%)!important;
  color:#fff!important;
  position:relative!important;
  overflow:hidden!important;
}
.payment-success-page::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(5,8,30,.72);
  backdrop-filter:blur(8px);
  z-index:0;
}
.payment-success-shell{
  width:100%!important;
  min-height:0!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  position:relative!important;
  z-index:1!important;
}
.payment-success-overlay,
.payment-success-art,
.payment-success-note,
.payment-success-message,
.payment-success-benefits,
.payment-success-security{
  display:none!important;
}
.payment-success-modal{
  position:relative;
  width:min(520px, calc(100vw - 32px));
  padding:34px 32px 30px;
  border:1px solid rgba(155,124,255,.45);
  border-radius:28px;
  background:
    radial-gradient(circle at 50% 0%, rgba(124,77,255,.22), transparent 36%),
    linear-gradient(180deg, rgba(18,18,58,.97), rgba(7,10,34,.98));
  box-shadow:0 28px 90px rgba(0,0,0,.62), 0 0 42px rgba(124,77,255,.20), inset 0 1px 0 rgba(255,255,255,.12);
  text-align:center;
  color:#fff;
}
.payment-success-close{
  position:absolute;
  top:16px;
  right:16px;
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(216,210,255,.38);
  background:rgba(255,255,255,.10);
  color:#fff;
  font-size:28px;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(0,0,0,.22);
}
.payment-success-close:hover{background:rgba(255,255,255,.17);transform:translateY(-1px);}
.payment-success-modal .payment-success-check{
  display:grid!important;
  place-items:center;
  width:74px!important;
  height:74px!important;
  margin:0 auto 18px!important;
  border-radius:999px;
  background:linear-gradient(135deg,#50f08c,#19b86a)!important;
  color:#fff!important;
  font-size:46px!important;
  font-weight:900!important;
  box-shadow:0 0 0 8px rgba(60,228,133,.13),0 0 32px rgba(65,235,139,.52)!important;
}
.payment-success-modal h1{
  margin:0 0 10px!important;
  color:#fff!important;
  font-size:clamp(2rem,4vw,2.75rem)!important;
  line-height:1.05!important;
  font-weight:900!important;
  letter-spacing:0!important;
}
.payment-success-modal h1::after{display:none!important;}
.payment-success-subtitle{
  margin:0 auto 22px;
  max-width:390px;
  color:#d8d2ff;
  font-size:1.03rem;
  line-height:1.45;
  font-weight:650;
}
.payment-success-plan-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  margin:0 0 18px;
  border:1px solid rgba(155,124,255,.36);
  border-radius:18px;
  background:rgba(255,255,255,.08);
  text-align:left;
}
.payment-success-plan-row .plan-shield{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:15px;
  background:linear-gradient(135deg,#7c4dff,#4e2ee8);
  color:#ffd66b;
  font-size:28px;
  box-shadow:0 0 18px rgba(124,77,255,.34);
}
.payment-success-plan-row small{
  display:block;
  margin-bottom:3px;
  color:#bdb6ef;
  font-size:.78rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.payment-success-plan-row b{
  display:block;
  color:#fff;
  font-size:1.05rem;
  line-height:1.25;
  font-weight:850;
}
.payment-success-learning-text{
  margin:0 0 22px;
  color:#d8d2ff;
  font-size:1rem;
  line-height:1.4;
  font-weight:650;
}
.payment-success-actions{display:block!important;margin:0!important;}
.payment-success-button.payment-success-primary{
  width:100%;
  min-height:54px;
  border:0!important;
  border-radius:16px!important;
  background:linear-gradient(135deg,#8b5cff,#5a35e8)!important;
  color:#fff!important;
  font-size:1rem!important;
  font-weight:900!important;
  box-shadow:0 16px 34px rgba(91,53,232,.38)!important;
}
.payment-success-button.payment-success-primary:hover{transform:translateY(-1px);filter:brightness(1.06);}
@media(max-width:560px){
  .payment-success-page{padding:16px!important;align-items:center!important;}
  .payment-success-modal{padding:30px 20px 24px;border-radius:24px;}
  .payment-success-close{top:12px;right:12px;width:34px;height:34px;font-size:24px;}
  .payment-success-plan-row{align-items:flex-start;padding:14px;}
}

.payment-success-page.hidden,.payment-canceled-page.hidden{display:none!important;}