/* Unified premium cream + mint theme based on the supplied video reference.
   Shared visual layer only: does not alter application logic or API requests. */
:root{
 --bg:#f3f0e5!important;--bg2:#f7f4eb!important;--card:#fffaf1!important;--card2:#f0eadb!important;
 --border:#a6dec8!important;--border-soft:rgba(91,196,158,.42)!important;
 --text:#242b2b!important;--muted:#737b7a!important;
 --gold:#27b995!important;--gold-dark:#159b79!important;--gold-soft:rgba(39,185,149,.12)!important;
 --cyan:#40c9a5!important;--cyan-soft:rgba(64,201,165,.12)!important;
 --green:#18bd8d!important;--green-soft:rgba(24,189,141,.12)!important;
 --indigo:#27b995!important;--indigo-dark:#159b79!important;--indigo-soft:rgba(39,185,149,.12)!important;
 --ink:#14221e!important;
}
html,body.auth-body{background:#f3f0e5!important;color:#252b2b!important}
body.auth-body{
 background:linear-gradient(135deg,#f5f2e8 0%,#edf1e5 55%,#f4efe2 100%)!important;
 color:#252b2b!important
}
.dash-shell,.dash-content{background:transparent!important}
.dash-header{
 background:rgba(250,247,238,.97)!important;border-bottom:1px solid #c9e5d7!important;
 box-shadow:0 4px 18px rgba(56,111,88,.055)!important;color:#203b32!important;
 backdrop-filter:blur(14px)
}
.dash-logo{border:1px solid #8ed9bd!important;box-shadow:0 5px 16px rgba(39,185,149,.13)!important}
.dash-brand-name{color:#183d32!important}
.dash-brand-name span{color:#27b995!important}
.dash-user{color:#c6a95e!important}
.dash-clock{color:#8b8d83!important}
.dash-balance{
 background:#e4f2e6!important;border:1px solid #a4dfc6!important;color:#20aa87!important;
 box-shadow:0 5px 14px rgba(39,185,149,.07)!important
}
.dash-menu{background:#e5f3e8!important;border:1px solid #a4dfc6!important;color:#20b58f!important}
.dash-menu span,.dash-menu span:before,.dash-menu span:after{background:#20b58f!important}
.dash-content{
 background:linear-gradient(135deg,#f4f1e7 0%,#f0eedf 58%,#f5f1e7 100%)!important;
 color:#252b2b!important;min-height:calc(100vh - 106px)
}
.page-heading{color:#253b34!important}
.dash-drawer{
 background:#fffaf1!important;border:1px solid #a9dfca!important;
 box-shadow:12px 0 35px rgba(30,78,60,.14)!important;color:#27352f!important
}
.drawer-head{background:#edf5e9!important;border-bottom:1px solid #c6e8d7!important}
.drawer-avatar{background:linear-gradient(135deg,#19c69a,#79d8b7)!important;color:#fff!important}
.drawer-username{color:#213d32!important}
.drawer-role,.drawer-section-title{color:#29ae8c!important}
.drawer-wallet{background:#e0f1e3!important;border:1px solid #b6e4cd!important;color:#1da985!important}
.drawer-item{color:#58635e!important;border:1px solid transparent!important;border-radius:11px!important}
.drawer-item:hover,.drawer-item.active{background:#def2e5!important;border-color:#a5dfc8!important;color:#159e7c!important}
.drawer-divider{border-color:#d5e9dc!important}
.drawer-item.logout{color:#df7777!important}
button,.btn,.button{transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
 outline:2px solid #35c49c!important;outline-offset:2px
}
/* Shared form controls */
input:not([type=checkbox]):not([type=radio]),select,textarea{
 border-color:#e4ddca!important;background:#eee8d9!important;color:#27312d!important
}
input::placeholder,textarea::placeholder{color:#92938b!important}
input:focus,select:focus,textarea:focus{border-color:#79d3b3!important;box-shadow:0 0 0 3px rgba(39,185,149,.10)!important}
/* Auth screens */
.welcome-body,.auth-body .auth-screen{
 background:linear-gradient(135deg,#f5f2e8 0%,#edf1e5 55%,#f4efe2 100%)!important;color:#27312d!important
}
.welcome-grid{opacity:.16!important;background-image:linear-gradient(rgba(39,185,149,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(39,185,149,.11) 1px,transparent 1px)!important}
.welcome-title,.auth-title,.auth-heading{color:#203b32!important}
.welcome-title span,.auth-title span{background:linear-gradient(90deg,#20b78e,#76d5b5)!important;-webkit-background-clip:text!important;background-clip:text!important}
.welcome-eyebrow,.auth-subtitle,.auth-field-label{color:#29ad8b!important}
.welcome-badge,.auth-badge{border-color:#9edfc5!important;box-shadow:0 8px 25px rgba(39,185,149,.15)!important}
.auth-card,.auth-panel,.auth-form-card{
 background:#fffaf1!important;border:1.5px solid #a4dfc7!important;
 border-radius:22px!important;box-shadow:0 12px 30px rgba(54,110,86,.07)!important
}
.auth-input,.auth-field input,.auth-form input{
 background:#eee8d9!important;border:1px solid #e3dccb!important;color:#27312d!important
}
.auth-submit,.auth-btn,.auth-primary-btn{
 background:linear-gradient(100deg,#20c99a,#079f79)!important;color:#fff!important;
 border:0!important;box-shadow:0 8px 18px rgba(24,189,141,.18)!important
}
/* User-facing page cards */
.balance-page,.profile-page,.mykeys-page,.referral-page,.deposit-page{
 background:transparent!important;color:#27312d!important
}
.deposit-add-card,.deposit-history-card,.profile-hero-card,.profile-password-card,
.key-history-card,.history-stat,.referral-card,.referral-panel,.referral-stat,
.mykeys-empty,.history-date,.profile-password-heading{
 background:#fffaf1!important;border:1.5px solid #a5dfc8!important;
 color:#27312d!important;box-shadow:0 8px 22px rgba(46,103,78,.055)!important
}
.deposit-card-kicker,.history-list-head,.profile-field-label,.profile-password-heading,
.history-stat-label,.referral-title,.referral-kicker{color:#25ae8b!important}
.deposit-add-card label,.deposit-history-meta,.deposit-history-card p,
.key-history-purchased,.mykeys-empty,.profile-password-message{color:#777e78!important}
.deposit-input-wrap,.profile-password-input-wrap input,.history-date input{
 background:#eee8d9!important;border-color:#e4ddca!important;color:#27312d!important
}
.deposit-pay-btn,.profile-change-btn,.referral-btn,.auth-submit{
 background:linear-gradient(100deg,#20c99a,#079f79)!important;color:#fff!important;
 box-shadow:0 7px 18px rgba(24,189,141,.16)!important
}
.history-stat-value,.history-amount,.key-history-key,.history-date-arrow{color:#20ad88!important}
.history-pill{background:#e8f3e8!important;border-color:#b9e3cf!important;color:#3c7160!important}
.history-copy{background:#e5f3e8!important;border-color:#a7dfc8!important;color:#159e7c!important}
/* Tables and general panels */
table{border-color:#d7e9dd!important}
th{background:#e5f2e7!important;color:#248e72!important}
td{color:#35413b!important;border-color:#e5e8dc!important}
.toast,.modal-content,.modal-card,.confirm-modal{
 background:#fffaf1!important;color:#27312d!important;border:1px solid #a5dfc8!important
}
/* Admin dashboard gets the same palette while retaining its dense admin layout. */
body[data-page="admin"] .admin-screen,body[data-page="admin"] .admin-shell,
body[data-page="admin"] .dashboard-screen.admin-mode{
 background:linear-gradient(135deg,#f5f2e8 0%,#edf1e5 55%,#f4efe2 100%)!important;color:#27312d!important
}
body[data-page="admin"] .admin-header{
 background:#fffaf1!important;border-bottom:1px solid #b9e4d0!important;
 box-shadow:0 5px 18px rgba(40,99,73,.06)!important
}
body[data-page="admin"] .admin-brand-title,body[data-page="admin"] .admin-welcome h2{color:#203b32!important}
body[data-page="admin"] .admin-brand-title span,body[data-page="admin"] .admin-welcome h2 span{color:#27b995!important}
body[data-page="admin"] .admin-brand-sub,body[data-page="admin"] .admin-welcome p{color:#77817a!important}
body[data-page="admin"] .admin-status{color:#159e7c!important;background:#e2f3e7!important;border-color:#b5e4cd!important}
body[data-page="admin"] .admin-kpi,body[data-page="admin"] .admin-panel,
body[data-page="admin"] .admin-break-card,body[data-page="admin"] .admin-time,
body[data-page="admin"] .admin-drawer,body[data-page="admin"] .admin-drawer-head{
 background:#fffaf1!important;border:1px solid #a7dfc9!important;
 color:#27312d!important;box-shadow:0 8px 22px rgba(46,103,78,.055)!important
}
body[data-page="admin"] .admin-kpi-label,body[data-page="admin"] .admin-break-label,
body[data-page="admin"] .admin-panel-title,body[data-page="admin"] .admin-time{color:#25a985!important}
body[data-page="admin"] .admin-kpi-value,body[data-page="admin"] .admin-break-value{color:#169d7c!important}
body[data-page="admin"] .admin-panel-badge{background:#e4f3e7!important;border-color:#b7e4ce!important;color:#258f72!important}
body[data-page="admin"] .admin-nav-btn{
 background:#f0ecdf!important;border-color:#d8e8dc!important;color:#52645a!important
}
body[data-page="admin"] .admin-nav-btn.active,body[data-page="admin"] .admin-nav-btn:hover{
 background:#def2e5!important;border-color:#9edfc5!important;color:#159e7c!important
}
body[data-page="admin"] .admin-drawer-close,body[data-page="admin"] .drawer-logout{
 background:#e4f3e7!important;color:#159e7c!important;border-color:#a7dfc9!important
}
@media(max-width:700px){
 .dash-header{height:74px!important;padding:9px 12px!important;gap:8px!important}
 .dash-logo{width:48px!important;height:48px!important;flex-basis:48px!important;border-radius:13px!important}
 .dash-brand-name{font-size:17px!important}
 .dash-user{font-size:9px!important;margin-top:4px!important}
 .dash-clock{font-size:8px!important}
 .dash-balance{height:34px!important;padding:0 9px!important;font-size:10px!important;letter-spacing:0!important}
 .dash-menu{width:40px!important;height:40px!important;flex-basis:40px!important;border-radius:12px!important}
 .dash-menu span,.dash-menu span:before,.dash-menu span:after{width:21px!important;height:2px!important}
 .dash-menu span:before{top:-6px!important}.dash-menu span:after{top:6px!important}
 .dash-content{min-height:calc(100vh - 74px)!important}
 body[data-page="admin"] .admin-content{padding:18px 14px 36px!important}
 body[data-page="admin"] .admin-welcome h2{font-size:22px!important}
 body[data-page="admin"] .admin-kpi-grid{gap:9px!important}
 body[data-page="admin"] .admin-kpi{padding:13px!important;min-height:112px!important;border-radius:15px!important}
 body[data-page="admin"] .admin-kpi-value{font-size:19px!important}
}


/* ===== Reference-matched LIGHT PREMIUM THEME (global corrective layer) =====
   Screenshot reference: warm ivory canvas, mint outlines, compact cream cards.
   This intentionally removes inherited dark backgrounds from page-specific CSS.
*/
html,body,body.auth-body,.dash-shell,.dash-content,main,
body[data-page] .dash-content{
  background:#f3f0e5!important;color:#252c29!important
}
body.auth-body,body[data-page]{
  background:linear-gradient(135deg,#f7f4eb 0%,#f1efdf 52%,#f5f1e6 100%)!important;
  color:#252c29!important
}
.dash-content{
  background:linear-gradient(135deg,#f7f4eb 0%,#f1efdf 52%,#f5f1e6 100%)!important;
  color:#252c29!important
}
/* Dashboard layout and compact cards, matching the supplied reference image */
body[data-page="home"] .dash-content{padding:0 14px 34px!important}
body[data-page="home"] .dash-content > .update-card,
body[data-page="home"] .dash-content > .stats-grid,
body[data-page="home"] .dash-content > .reseller-card,
body[data-page="home"] .dash-content > .challenge,
body[data-page="home"] .dash-content > .leaderboard{
  width:100%!important;max-width:380px!important;margin-left:auto!important;margin-right:auto!important;
  box-sizing:border-box!important
}
body[data-page="home"] .update-card{
  height:78px!important;margin-top:12px!important;margin-bottom:9px!important;padding:10px!important;
  border:1px solid #d9c5e8!important;border-radius:14px!important;
  background:#fbf7ef!important;box-shadow:0 4px 13px rgba(52,101,78,.035)!important;
  color:#252c29!important
}
body[data-page="home"] .update-title{font-size:11px!important;color:#27342f!important;margin-bottom:6px!important}
body[data-page="home"] .join-btn{
  min-width:78px!important;height:28px!important;padding:0 12px!important;border-radius:9px!important;
  border:1px solid #d9b9e8!important;background:#f2eaf6!important;color:#a66ac8!important;
  font-size:9px!important;letter-spacing:0!important
}
body[data-page="home"] .stats-grid{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px!important;margin-top:0!important;margin-bottom:9px!important
}
body[data-page="home"] .stat-card{
  min-height:72px!important;height:auto!important;padding:10px 11px!important;
  border:1px solid #9edfc6!important;border-radius:13px!important;
  background:#fbf8f0!important;box-shadow:0 4px 12px rgba(45,105,79,.035)!important;
  display:flex!important;align-items:flex-start!important;justify-content:center!important
}
body[data-page="home"] .stat-card.gold{border-color:#ecd58e!important}
body[data-page="home"] .stat-card.green{border-color:#abd9b8!important}
body[data-page="home"] .stat-icon{font-size:17px!important;margin:0 0 5px!important}
body[data-page="home"] .stat-label{
  color:#666d68!important;font-size:8px!important;letter-spacing:1px!important;
  margin:0 0 3px!important
}
body[data-page="home"] .stat-value{
  color:#252c29!important;font-size:15px!important;line-height:1.15!important;margin:0!important
}
body[data-page="home"] .stat-value.gold{color:#27b995!important}
body[data-page="home"] .stat-value.green-text{color:#299b68!important}
body[data-page="home"] .reseller-card,
body[data-page="home"] .challenge,
body[data-page="home"] .leaderboard{
  padding:13px!important;margin-top:9px!important;margin-bottom:9px!important;
  border:1px solid #a4dfc8!important;border-radius:16px!important;
  background:#fbf8f0!important;color:#27332e!important;
  box-shadow:0 5px 16px rgba(44,102,77,.04)!important
}
body[data-page="home"] .challenge{border-color:#efdfa1!important}
body[data-page="home"] .challenge-title{font-size:12px!important;color:#26342e!important}
body[data-page="home"] .live-pill{
  padding:4px 9px!important;border-radius:15px!important;background:#18c99a!important;
  color:#fff!important;font-size:8px!important
}
body[data-page="home"] .challenge-sub{
  margin:5px 0 9px!important;color:#727a73!important;font-size:9px!important
}
body[data-page="home"] .challenge-sub b{color:#25b990!important}
body[data-page="home"] .prizes{gap:6px!important}
body[data-page="home"] .prize{
  height:58px!important;border:1px solid #e7dfce!important;border-radius:10px!important;
  background:#eee8d9!important;color:#27332e!important
}
body[data-page="home"] .prize.first{border-color:#b8e3ca!important;background:#e0f1e2!important}
body[data-page="home"] .prize-medal{font-size:13px!important;margin:0 0 2px!important}
body[data-page="home"] .prize-rank{font-size:7px!important;letter-spacing:.6px!important;color:#707770!important}
body[data-page="home"] .prize-coins{font-size:11px!important;margin-top:2px!important;color:#242d28!important}
body[data-page="home"] .prize-coins.gold{color:#28b995!important}
body[data-page="home"] .lb-title{
  color:#28b995!important;font-size:9px!important;letter-spacing:2px!important;margin:0 0 9px!important
}
body[data-page="home"] .lb-row{
  min-height:42px!important;padding:6px 8px!important;margin:0 0 6px!important;gap:8px!important;
  border:1px solid #a9dfc9!important;border-radius:10px!important;
  background:#eee8d9!important;color:#27332e!important
}
body[data-page="home"] .lb-row:first-of-type{border-color:#e6d989!important;background:#e0f1e2!important}
body[data-page="home"] .lb-rank{
  width:25px!important;height:25px!important;flex:0 0 25px!important;
  border:0!important;background:#fbf8f0!important;color:#59645d!important;font-size:9px!important
}
body[data-page="home"] .lb-row:first-of-type .lb-rank{background:#16c99a!important;color:#fff!important}
body[data-page="home"] .lb-name{font-size:9px!important;color:#242d28!important}
body[data-page="home"] .lb-keys{font-size:8px!important;color:#707770!important;margin-top:1px!important}
body[data-page="home"] .lb-money{font-size:9px!important;color:#25b995!important}
body[data-page="home"] .tg-support-fab{
  background:linear-gradient(135deg,#69c9db,#17c39a)!important;
  box-shadow:0 7px 20px rgba(24,191,151,.22)!important
}
/* Store and other user pages: remove dark full-page canvas, keep the same ivory + mint system */
body[data-page="store"] .dash-content,
body[data-page="store"] .store-page{
  background:#f3f0e5!important;background-image:none!important;color:#27332e!important
}
body[data-page="store"] .store-card,
body[data-page="store"] .sp-single-panel,
body[data-page="store"] .sp-panel{
  background:#fbf8f0!important;border:1.5px solid #a4dfc8!important;color:#27332e!important;
  box-shadow:0 7px 20px rgba(45,105,79,.045)!important
}
body[data-page="store"] .store-page .sp-select,
body[data-page="store"] .store-page select{
  background:#eee8d9!important;color:#27332e!important;border-color:#e5dece!important
}
/* Shared panels/cards across Wallet, Keys, Profile, Referral, API, and other sections */
body[data-page] :is(.card,.panel,.section-card,.content-card,.stat-card,.history-card,
 .wallet-card,.balance-card,.deposit-card,.deposit-history-card,.profile-card,
 .profile-hero-card,.profile-password-card,.key-history-card,.referral-card,
 .referral-panel,.referral-stat,.mykeys-empty,.api-card,.api-wallet,.admin-panel,
 .admin-kpi,.admin-break-card,.admin-time,.reseller-card){
  background:#fbf8f0!important;color:#27332e!important;
  border-color:#a4dfc8!important;box-shadow:0 6px 18px rgba(45,105,79,.045)!important
}
body[data-page] :is(.page-title,.section-title,.card-title,.panel-title){color:#273d33!important}
body[data-page] :is(.muted,.help-text,.description,.subtitle){color:#747c75!important}
body[data-page] :is(input:not([type=checkbox]):not([type=radio]),select,textarea){
  background:#eee8d9!important;color:#27332e!important;border-color:#e5dece!important
}
body[data-page] :is(button,.btn,.button,.primary-btn,.submit-btn){
  box-shadow:0 5px 13px rgba(26,169,126,.09)
}
/* Keep intentional API secret field and API product variant rows dark, as in the reference */
body[data-page="api"] .api-key-row,
body[data-page="api"] .api-key-value,
body[data-page="api"] .api-product,
body[data-page="api"] .api-product-head,
body[data-page="api"] .api-duration{background:#100a18!important;color:#f5f2f6!important}
body[data-page="api"] .api-product-name{color:#f5f2f6!important}
body[data-page="api"] .api-product-meta{color:#aaa2b2!important}
body[data-page="api"] .api-duration-info{color:#ddd!important}
@media(max-width:700px){
 body[data-page="home"] .dash-content{padding-left:14px!important;padding-right:14px!important}
 body[data-page="home"] .dash-content > .update-card,
 body[data-page="home"] .dash-content > .stats-grid,
 body[data-page="home"] .dash-content > .reseller-card,
 body[data-page="home"] .dash-content > .challenge,
 body[data-page="home"] .dash-content > .leaderboard{max-width:380px!important}
}


/* Reference-matched hamburger menu button */
.dash-header .dash-menu{
  width:40px!important;height:40px!important;min-width:40px!important;flex:0 0 40px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  padding:0!important;border:1.5px solid #9cdec7!important;border-radius:12px!important;
  background:#e2f2e5!important;color:#22b993!important;
  box-shadow:0 3px 10px rgba(38,175,133,.07)!important;
}
.dash-header .dash-menu span,
.dash-header .dash-menu span:before,
.dash-header .dash-menu span:after{
  display:block!important;width:21px!important;height:2px!important;
  background:#22b993!important;border-radius:4px!important;
}
.dash-header .dash-menu span{position:relative!important}
.dash-header .dash-menu span:before,
.dash-header .dash-menu span:after{content:""!important;position:absolute!important;left:0!important}
.dash-header .dash-menu span:before{top:-6px!important}
.dash-header .dash-menu span:after{top:6px!important}
.dash-header .dash-menu:hover,
.dash-header .dash-menu:active{
  background:#d8efe1!important;border-color:#78d3b2!important;
  box-shadow:0 4px 13px rgba(38,175,133,.13)!important
}
.dash-header .dash-menu:focus-visible{outline:2px solid #32bd98!important;outline-offset:2px!important}

/* 2026-11 reference-video alignment: warm ivory + mint storefront */
body[data-page="store"], body[data-page="store"] .dash-shell,
body[data-page="store"] .dash-content,
body[data-page="store"] .store-page{
  background:#f4f0e7!important;color:#252b29!important;
}
body[data-page="store"] .dash-header{
  height:88px!important;min-height:88px!important;padding:10px 18px!important;gap:10px!important;
  background:#f8f5ee!important;border-bottom:1px solid #e2e8dc!important;
  box-shadow:0 3px 12px rgba(55,100,77,.045)!important;
}
body[data-page="store"] .dash-logo{
  width:46px!important;height:46px!important;flex:0 0 46px!important;border-radius:14px!important;
  border:1px solid rgba(37,190,148,.45)!important;box-shadow:0 4px 12px rgba(20,90,65,.12)!important;
}
body[data-page="store"] .dash-brand-name{font-size:17px!important;line-height:1.08!important;color:#153b31!important;font-weight:800!important;letter-spacing:.1px!important}
body[data-page="store"] .dash-brand-name span{color:#22bd91!important}
body[data-page="store"] .dash-user{margin-top:5px!important;font-size:10px!important;letter-spacing:2px!important;color:#d3a94e!important}
body[data-page="store"] .dash-balance{
  height:36px!important;min-width:122px!important;padding:0 12px!important;border:1.5px solid #8cdec2!important;
  border-radius:22px!important;background:#e7f5eb!important;color:#25bd94!important;
  font-size:12px!important;letter-spacing:.4px!important;gap:5px!important;
}
body[data-page="store"] .dash-header .dash-menu{
  width:40px!important;height:40px!important;min-width:40px!important;flex:0 0 40px!important;
  border-radius:12px!important;background:#e7f5eb!important;border:1.5px solid #8cdec2!important;
}
body[data-page="store"] .dash-content{
  min-height:calc(100vh - 88px)!important;padding:0!important;
  background:linear-gradient(120deg,#eef2e7 0%,#f6f0e5 48%,#f4efe5 100%)!important;
}
body[data-page="store"] .store-page{padding:24px 18px 42px!important;background:transparent!important}
body[data-page="store"] .store-page .sp-wrap{width:100%!important;max-width:380px!important;margin:0 auto!important;padding:0!important}
body[data-page="store"] .store-page .sp-single-panel{
  width:100%!important;max-width:none!important;padding:28px 26px 28px!important;
  border:1.5px solid #8fe0c4!important;border-radius:29px!important;background:#fbf7ef!important;
  box-shadow:0 9px 28px rgba(53,111,84,.045)!important;
}
body[data-page="store"] .store-page .sp-heading{
  margin:0 0 24px!important;gap:11px!important;color:#25bd96!important;
  font-family:Inter,Arial,sans-serif!important;font-size:14px!important;font-weight:800!important;letter-spacing:3px!important;
}
body[data-page="store"] .store-page .sp-heading:after{height:1px!important;background:linear-gradient(90deg,#e1dacb,#eee8dc)!important}
body[data-page="store"] .store-page .sp-label{
  margin:0 0 11px!important;color:#626875!important;font-family:"JetBrains Mono",monospace!important;
  font-size:13px!important;font-weight:800!important;letter-spacing:2.2px!important;
}
body[data-page="store"] .store-page .sp-select{
  width:100%!important;height:56px!important;min-height:56px!important;max-height:56px!important;
  padding:0 18px!important;border:1px solid #e5ddca!important;border-radius:20px!important;
  background:#eee7d8!important;color:#171717!important;font-family:Inter,Arial,sans-serif!important;
  font-size:17px!important;font-weight:500!important;line-height:1.2!important;box-shadow:none!important;
  appearance:none!important;-webkit-appearance:none!important;
}
body[data-page="store"] .store-page .sp-select:disabled{color:#8a857b!important;opacity:.78!important}
body[data-page="store"] .store-page .sp-label:not(:first-child){margin-top:21px!important}
body[data-page="store"] .store-page .sp-quantity-wrap{margin-top:20px!important}
body[data-page="store"] .store-page .sp-purchase{
  width:100%!important;min-height:56px!important;margin-top:18px!important;border:0!important;border-radius:19px!important;
  background:linear-gradient(100deg,#83dfc4,#72cfb4)!important;color:#fff!important;
  font:800 17px Inter,Arial,sans-serif!important;letter-spacing:0!important;clip-path:none!important;
  box-shadow:0 8px 20px rgba(62,193,153,.16)!important;
}
body[data-page="store"] .store-page .sp-purchase:disabled{opacity:.7!important}
body[data-page="store"] .store-page .sp-form-message{color:#9b5660!important}
@media(max-width:390px){
 body[data-page="store"] .dash-header{padding-left:12px!important;padding-right:12px!important;gap:7px!important}
 body[data-page="store"] .dash-logo{width:42px!important;height:42px!important;flex-basis:42px!important}
 body[data-page="store"] .dash-brand-name{font-size:15px!important}
 body[data-page="store"] .dash-balance{min-width:104px!important;padding:0 8px!important;font-size:10px!important}
 body[data-page="store"] .store-page{padding-left:14px!important;padding-right:14px!important}
 body[data-page="store"] .store-page .sp-single-panel{padding-left:20px!important;padding-right:20px!important}
 body[data-page="store"] .store-page .sp-select{font-size:15px!important}
}


/* Reference-matched mobile navigation drawer (cream + mint) */
.dash-drawer{
  width:min(74vw,520px)!important;
  height:100dvh!important;
  top:0!important;bottom:0!important;left:0!important;
  border:1.5px solid #9bdcc4!important;
  border-left:0!important;
  border-radius:0 42px 42px 0!important;
  background:#f3efe3!important;
  box-shadow:18px 0 46px rgba(22,48,38,.22)!important;
  color:#202a27!important;
}
.drawer-head{
  min-height:clamp(138px,31.7vw,222px)!important;
  padding:clamp(18px,4vw,34px) clamp(18px,5vw,35px)!important;
  gap:clamp(12px,3.2vw,24px)!important;
  background:#f3efe3!important;
  border-bottom:1px solid #e3dccb!important;
}
.drawer-avatar{
  width:clamp(68px,15.7vw,110px)!important;
  height:clamp(68px,15.7vw,110px)!important;
  flex:0 0 clamp(68px,15.7vw,110px)!important;
  border:7px solid #c9f0df!important;
  background:linear-gradient(145deg,#12c99b,#08a981)!important;
  color:#073d32!important;
  box-shadow:0 0 0 1px #8ce0c2,0 9px 24px rgba(18,185,139,.18)!important;
  font-size:clamp(24px,5.8vw,40px)!important;
}
.drawer-user{padding-right:clamp(28px,6vw,42px)!important}
.drawer-username{font-size:clamp(18px,3.9vw,28px)!important;color:#101715!important;margin-bottom:7px!important}
.drawer-role{
  font-size:clamp(12px,2.7vw,19px)!important;
  padding:4px 12px!important;background:#d9edda!important;color:#279b79!important;
}
.drawer-wallet{
  margin-top:9px!important;padding:7px 14px!important;
  font-size:clamp(13px,2.9vw,20px)!important;
  background:#fbf8ef!important;border:2px solid #a9e4cf!important;color:#159d7b!important;
}
.drawer-close{
  right:clamp(14px,4vw,28px)!important;top:clamp(26px,6vw,54px)!important;
  width:clamp(42px,8.2vw,58px)!important;height:clamp(42px,8.2vw,58px)!important;
  border:2px solid #e6dfcf!important;background:#fbf8f0!important;
  color:#69716e!important;font-size:clamp(25px,5vw,36px)!important;
}
.drawer-body{
  padding:clamp(22px,5vw,40px) clamp(18px,4.8vw,34px) 30px!important;
  background:#f3efe3!important;
}
.drawer-section-title{
  margin:clamp(10px,2vw,16px) 8px clamp(14px,3vw,22px)!important;
  color:#68706f!important;font-size:clamp(12px,2.5vw,17px)!important;
  letter-spacing:3px!important;font-weight:800!important;
}
.drawer-item{
  height:clamp(58px,8.8vw,70px)!important;min-height:clamp(58px,8.8vw,70px)!important;
  gap:clamp(14px,3.3vw,24px)!important;
  padding:0 clamp(10px,3vw,22px)!important;
  margin:0 0 clamp(18px,3.8vw,30px)!important;
  border-radius:18px!important;
  color:#111817!important;font-size:clamp(17px,3.6vw,26px)!important;
  font-weight:700!important;background:transparent!important;
}
.drawer-item .drawer-icon{
  width:clamp(58px,8.8vw,64px)!important;height:clamp(58px,8.8vw,64px)!important;
  flex:0 0 clamp(58px,8.8vw,64px)!important;
  border-radius:18px!important;background:#ece6d7!important;
  color:#68716f!important;font-size:clamp(21px,4.2vw,29px)!important;
}
.drawer-item:hover{background:#e8f2e6!important;border-color:#b4e4d0!important;color:#159e7c!important}
.drawer-item.active{
  background:#d9efdc!important;border:2px solid #8eddbf!important;
  color:#159e7c!important;border-radius:26px!important;
}
.drawer-item.active .drawer-icon{background:#13c99b!important;color:#fff!important}
.drawer-divider{height:1px!important;background:#e1dac9!important;margin:clamp(12px,3vw,22px) 10px!important}
.drawer-item.logout{color:#d34f62!important}
.drawer-item.logout .drawer-icon{background:#f3dfd8!important;color:#d34f62!important}
.drawer-section-title[style]{margin-top:clamp(24px,5vw,38px)!important}
@media(max-width:420px){
 .dash-drawer{width:min(82vw,360px)!important;border-radius:0 30px 30px 0!important}
 .drawer-head{min-height:142px!important}
 .drawer-body{padding:20px 16px 24px!important}
 .drawer-item{margin-bottom:13px!important}
}


/* Final size correction: match the compact reference drawer */
.dash-drawer{
  width:min(74vw,520px)!important;
  border-radius:0 38px 38px 0!important;
}
.drawer-head{
  min-height:124px!important;
  height:124px!important;
  padding:16px 20px!important;
  gap:14px!important;
}
.drawer-avatar{
  width:60px!important;height:60px!important;flex:0 0 60px!important;
  border-width:5px!important;font-size:22px!important;
}
.drawer-user{padding-right:34px!important}
.drawer-username{font-size:17px!important;margin-bottom:5px!important}
.drawer-role{font-size:11px!important;padding:3px 9px!important}
.drawer-wallet{margin-top:6px!important;padding:4px 10px!important;font-size:12px!important;border-width:1.5px!important}
.drawer-close{
  width:42px!important;height:42px!important;right:16px!important;top:28px!important;
  font-size:25px!important;border-width:1.5px!important;
}
.drawer-body{padding:20px 20px 24px!important}
.drawer-section-title{
  margin:9px 4px 13px!important;font-size:11px!important;letter-spacing:2.5px!important;
}
.drawer-item{
  height:54px!important;min-height:54px!important;
  gap:14px!important;padding:0 5px!important;
  margin:0 0 8px!important;border-radius:18px!important;
  font-size:17px!important;font-weight:700!important;
}
.drawer-item .drawer-icon{
  width:36px!important;height:36px!important;flex:0 0 36px!important;
  border-radius:12px!important;font-size:18px!important;
}
.drawer-item.active{border-width:1.5px!important;border-radius:22px!important}
.drawer-item.active .drawer-icon{width:36px!important;height:36px!important}
.drawer-divider{margin:8px 6px!important}
.drawer-section-title[style]{margin-top:18px!important}
@media(max-width:700px){
  .dash-drawer{width:min(74vw,520px)!important;border-radius:0 38px 38px 0!important}
}