/* NOKOS.MY.ID App UI Refresh v20260819 */
:root{--app-radius:20px;--app-border:rgba(96,165,250,.12);--app-surface:rgba(10,16,29,.82)}
body{background:radial-gradient(circle at 15% -10%,rgba(124,92,252,.12),transparent 32%),radial-gradient(circle at 90% 0%,rgba(6,182,212,.08),transparent 28%),var(--bg-base)!important}
.card,.glass-card,.panel,.feature-card,.stat-card,.info-card,.docs-card,.faq-card,.contact-card,.auth-card{border:1px solid var(--app-border)!important;border-radius:var(--app-radius)!important;background:linear-gradient(145deg,rgba(13,22,39,.92),rgba(7,13,24,.86))!important;box-shadow:0 18px 55px rgba(0,0,0,.22)!important;backdrop-filter:blur(16px)}
button,.btn,a.btn,input,select,textarea{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease!important}
button:hover,.btn:hover,a.btn:hover{transform:translateY(-1px)}
.btn-primary,.btn-success{box-shadow:0 8px 24px rgba(124,92,252,.18)!important}
input,select,textarea{border-radius:14px!important;background:rgba(4,9,18,.72)!important;border-color:rgba(148,163,184,.14)!important}
input:focus,select:focus,textarea:focus{border-color:rgba(96,165,250,.55)!important;box-shadow:0 0 0 4px rgba(124,92,252,.08)!important;outline:none!important}
.navbar,.topbar{backdrop-filter:blur(18px);background:rgba(4,8,18,.72)!important;border-bottom-color:rgba(96,165,250,.08)!important}
.hero{position:relative;overflow:hidden;border-radius:28px}
.hero:after{content:"";position:absolute;width:280px;height:280px;right:-90px;top:-110px;border-radius:50%;background:rgba(124,92,252,.16);filter:blur(50px);pointer-events:none}
.badge,.pill{border-radius:999px!important}
.table-wrap,.table-container{border-radius:18px;overflow:auto;border:1px solid rgba(96,165,250,.1);background:rgba(7,13,24,.55)}
table{border-collapse:separate!important;border-spacing:0!important}th{background:rgba(124,92,252,.07)!important;color:#bfdbfe!important}td,th{border-bottom-color:rgba(255,255,255,.05)!important}
.modal,.modal-content,.dialog{border-radius:24px!important;border:1px solid rgba(96,165,250,.16)!important;background:linear-gradient(160deg,#0c1526,#070d18)!important;box-shadow:0 30px 100px rgba(0,0,0,.55)!important}
.toast{border-radius:16px!important;backdrop-filter:blur(16px)}
/* dashboard */
.sidebar{box-shadow:18px 0 50px rgba(0,0,0,.18)}
.sidebar-nav-item{border-radius:14px!important;margin:3px 8px!important}
.sidebar-nav-item.active{box-shadow:inset 3px 0 0 #A78BFA,0 8px 24px rgba(124,92,252,.08)}
.sidebar-brand-icon{overflow:hidden!important}.sidebar-brand-icon img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.dashboard-main,.main-content{padding-bottom:100px}
/* app-like mobile navigation */
@media(max-width:760px){
 .dashboard-main,.main-content{padding-bottom:88px!important}
 .mobile-bottom-nav{display:flex!important;position:fixed;left:10px;right:10px;bottom:10px;z-index:90;padding:8px;border:1px solid rgba(96,165,250,.14);border-radius:22px;background:rgba(6,12,23,.88);backdrop-filter:blur(22px);box-shadow:0 18px 55px rgba(0,0,0,.4);justify-content:space-around}
 .mobile-bottom-nav button{background:none;border:0;color:#94a3b8;padding:7px 10px;border-radius:14px;font-size:.62rem;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:3px}
 .mobile-bottom-nav button.active{color:#fff;background:rgba(124,92,252,.14)}
 .mobile-bottom-nav svg{width:19px;height:19px}
 .card,.glass-card,.panel{border-radius:18px!important}
}
@media(min-width:761px){.mobile-bottom-nav{display:none!important}}
/* docs */
.docs-sidebar{border-radius:20px!important}.docs-content pre{border-radius:16px!important;border:1px solid rgba(96,165,250,.1)!important}.endpoint-card{border-radius:18px!important}
/* auth */
.auth-card{box-shadow:0 25px 80px rgba(0,0,0,.38)!important}.auth-card .brand-logo{border-radius:18px!important}

/* ============================================================
   MOBILE-FIRST APP EXPERIENCE + SKELETON LOADER
   ============================================================ */
html.app-loading-active,html.app-loading-active body{overflow:hidden!important}
#app-loading-screen{position:fixed;inset:0;z-index:99999;background:#040812;color:#f0f4ff;opacity:1;visibility:visible;transition:opacity .38s ease,visibility .38s ease;overflow:hidden}
#app-loading-screen.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.app-loader-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% -5%,rgba(124,92,252,.18),transparent 38%),radial-gradient(circle at 90% 70%,rgba(6,182,212,.07),transparent 34%)}
.app-loader-content{position:relative;width:min(100%,760px);margin:0 auto;padding:28px 18px 100px}
.app-loader-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px;margin-bottom:24px}
.app-loader-logo{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,#7C5CFC,#4F46E5);box-shadow:0 8px 22px rgba(124,92,252,.22);font-weight:900}
.app-loader-hero{height:154px;border:1px solid rgba(96,165,250,.10);border-radius:24px;background:#091222;padding:22px;position:relative;overflow:hidden;margin-bottom:14px}
.app-loader-hero:before{content:'';display:block;width:45%;height:12px;border-radius:99px;background:rgba(148,163,184,.14);margin-bottom:18px}
.app-loader-hero i{display:block;width:58%;height:22px;border-radius:9px;background:rgba(148,163,184,.13);margin-bottom:20px}
.app-loader-hero b{display:block;width:82%;height:11px;border-radius:99px;background:rgba(148,163,184,.10)}
.app-loader-hero em{position:absolute;left:22px;right:22px;bottom:22px;height:12px;border-radius:99px;background:rgba(124,92,252,.10)}
.app-loader-row{height:58px;border-radius:18px;background:#091222;border:1px solid rgba(96,165,250,.08);padding:14px;margin-bottom:22px}
.app-loader-row i{display:block;width:38%;height:9px;border-radius:99px;background:rgba(148,163,184,.13);margin-bottom:8px}.app-loader-row b{display:block;width:64%;height:8px;border-radius:99px;background:rgba(148,163,184,.09)}
.app-loader-section-title{width:28%;height:10px;border-radius:99px;background:rgba(148,163,184,.12);margin:0 0 12px}
.app-loader-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.app-loader-card{height:150px;border-radius:18px;background:#091222;border:1px solid rgba(96,165,250,.08);padding:14px;overflow:hidden}
.app-loader-card i{display:block;width:38px;height:38px;border-radius:13px;background:rgba(148,163,184,.11);margin-bottom:14px}.app-loader-card b{display:block;width:72%;height:10px;border-radius:99px;background:rgba(148,163,184,.12);margin-bottom:9px}.app-loader-card em{display:block;width:45%;height:16px;border-radius:7px;background:rgba(148,163,184,.10);margin-bottom:24px}.app-loader-card:after{content:'';display:block;height:34px;border-radius:10px;background:rgba(124,92,252,.09)}
.skeleton-shimmer{background-image:linear-gradient(105deg,rgba(255,255,255,.025) 20%,rgba(255,255,255,.075) 38%,rgba(255,255,255,.025) 56%);background-size:220% 100%;animation:appSkeletonShimmer 1.35s linear infinite}
@keyframes appSkeletonShimmer{from{background-position:220% 0}to{background-position:-220% 0}}

@media(max-width:760px){
  body{font-size:14px;-webkit-tap-highlight-color:transparent}
  .app-loader-content{padding:22px 14px 94px}
  .app-loader-brand{margin-bottom:18px}
  .app-loader-hero{height:142px;border-radius:22px;padding:18px}
  .app-loader-row{height:54px;border-radius:16px}
  .app-loader-card{height:136px;padding:11px;border-radius:16px}
  .app-loader-grid{gap:8px}

  .dashboard-content{padding:14px 12px 104px!important}
  .dashboard-main{min-width:0!important}
  .topbar{height:58px!important;padding:0 12px!important;position:sticky!important;top:0!important;z-index:80!important}
  .topbar-site-name,.topbar-title{font-size:.82rem!important}
  .topbar-balance{font-size:.7rem!important;padding:7px 9px!important;border-radius:12px!important}
  .topbar-avatar{width:32px!important;height:32px!important;border-radius:10px!important}
  .page-header{gap:8px!important;margin-bottom:14px!important}
  .page-title{font-size:20px!important;letter-spacing:-.03em!important}
  .page-desc{font-size:.72rem!important;line-height:1.45!important}
  .card,.glass-card,.panel,.feature-card,.stat-card,.info-card{border-radius:18px!important}

  /* Home cards become thumb-friendly app tiles */
  .home-hero,.welcome-card,.hero-card{border-radius:22px!important;overflow:hidden}
  .home-stats-grid{grid-template-columns:1fr 1fr!important}
  .home-stat-box{min-width:0!important;padding:12px!important}
  .hs-val{font-size:1.45rem!important}
  .quick-actions,.dashboard-quick-actions{grid-template-columns:1fr 1fr!important;gap:9px!important}
  .quick-action,.quick-action-card{min-height:78px!important;border-radius:16px!important;padding:12px!important}

  /* Order page */
  #page-order .otp-filter-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  #page-order .otp-service-search{grid-column:1/-1!important}
  #page-order .catalog-picker,#page-order .filter-select-wrapper,#page-order .filter-search-wrapper{min-height:48px!important;border-radius:14px!important}
  #page-order .new-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  #page-order .new-product-card{min-width:0;padding:10px!important;border-radius:16px!important;box-shadow:0 8px 24px rgba(0,0,0,.18)!important}
  #page-order .npc-header{gap:8px!important;margin-bottom:10px!important}
  #page-order .npc-icon{width:34px!important;height:34px!important}
  #page-order .npc-name{font-size:.72rem!important}
  #page-order .npc-stock{font-size:.56rem!important}
  #page-order .npc-price{font-size:.95rem!important;margin-bottom:8px!important}
  #page-order .npc-buy-btn{min-height:38px!important;border-radius:11px!important;font-size:.72rem!important}

  /* Wallet / withdraw / profile */
  .wallet-balance-card,.withdraw-card,.profile-card{border-radius:20px!important;padding:16px!important}
  .payment-method-grid{grid-template-columns:repeat(3,1fr)!important;gap:8px!important}
  .form-grid,.settings-grid,.admin-grid{grid-template-columns:1fr!important}
  .modal{width:calc(100vw - 28px)!important;max-width:420px!important;border-radius:22px!important}
  .modal-footer{position:sticky;bottom:0;background:inherit;padding-bottom:max(16px,env(safe-area-inset-bottom))!important}

  /* Bottom navigation: real floating app dock */
  .mobile-bottom-nav{left:10px!important;right:10px!important;bottom:max(10px,env(safe-area-inset-bottom))!important;height:auto!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
  .nav-island{min-height:66px!important;padding:7px 5px!important;border-radius:22px!important;background:rgba(7,13,24,.90)!important;border:1px solid rgba(96,165,250,.16)!important;box-shadow:0 16px 45px rgba(0,0,0,.42)!important}
  .mobile-nav-item{width:20%!important;min-width:0!important;padding:7px 2px!important;border-radius:15px!important;color:#7f8da8!important}
  .mobile-nav-item span{font-size:.55rem!important;white-space:nowrap}
  .mobile-nav-item .nav-icon-wrap{width:34px;height:30px;display:grid;place-items:center;border-radius:11px;transition:.2s ease}
  .mobile-nav-item svg{width:20px!important;height:20px!important}
  .mobile-nav-item.active{color:#fff!important}
  .mobile-nav-item.active .nav-icon-wrap{background:linear-gradient(135deg,rgba(124,92,252,.30),rgba(124,92,252,.10));box-shadow:0 5px 18px rgba(124,92,252,.16)}
  .nav-badge{top:2px!important;right:7px!important}

  /* Prevent desktop horizontal overflow from tables/grids */
  .table-wrap,.table-container{max-width:100%;overflow-x:auto}
  .data-table{min-width:620px}
  .toast-container{left:10px!important;right:10px!important;bottom:88px!important;width:auto!important}
  .toast{width:100%!important;max-width:none!important;border-radius:16px!important}
}

@media(max-width:390px){
  .dashboard-content{padding-left:10px!important;padding-right:10px!important}
  #page-order .new-product-grid{gap:7px!important}
  #page-order .new-product-card{padding:8px!important}
  .npc-price{font-size:.88rem!important}
  .mobile-nav-item span{font-size:.5rem!important}
}

/* Replace text-only catalog loading with soft skeleton cards. */
.catalog-loading{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px!important;min-height:260px!important;align-content:start!important;color:transparent!important}
.catalog-loading .spinner{display:none!important}
.catalog-loading:before{content:' ';display:none}
@media(max-width:760px){.catalog-loading{grid-template-columns:repeat(2,minmax(0,1fr))!important;min-height:300px!important}}
body.page-switching .page.active{animation:pageSoftIn .22s ease both}
@keyframes pageSoftIn{from{opacity:.55;transform:translateY(3px);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
@media(prefers-reduced-motion:reduce){.skeleton-shimmer,.page-switching .page.active{animation:none!important}}

/* ============================================================
   NOKOS.MY.ID AURORA THEME — Mobile-first premium refresh
   ============================================================ */
:root{
  --aurora-violet:#7c5cfc;
  --aurora-indigo:#4f46e5;
  --aurora-cyan:#22d3ee;
  --aurora-pink:#ec4899;
  --aurora-bg:#050612;
  --aurora-surface:#0a0c1a;
  --aurora-card:#0d1020;
  --aurora-line:rgba(167,139,250,.14);
}
html,body{background-color:var(--aurora-bg)!important}
body{
 background-image:
 radial-gradient(650px 380px at -5% -8%,rgba(124,92,252,.20),transparent 62%),
 radial-gradient(520px 320px at 105% 0%,rgba(34,211,238,.12),transparent 60%),
 radial-gradient(520px 420px at 70% 105%,rgba(236,72,153,.08),transparent 62%),
 linear-gradient(180deg,#050612 0%,#070918 55%,#050612 100%)!important;
}
.card,.glass-card,.panel,.feature-card,.stat-card,.info-card,.docs-card,.faq-card,.contact-card,.auth-card{
 background:linear-gradient(145deg,rgba(14,17,34,.94),rgba(8,10,22,.92))!important;
 border-color:var(--aurora-line)!important;
 box-shadow:0 20px 70px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.btn-primary,.btn-success,.primary-btn,.buy-btn,.action-primary{
 background:linear-gradient(135deg,#7c5cfc 0%,#6366f1 55%,#4f46e5 100%)!important;
 border-color:rgba(167,139,250,.35)!important;
 box-shadow:0 10px 28px rgba(124,92,252,.22)!important;
}
.btn-primary:hover,.btn-success:hover,.primary-btn:hover,.buy-btn:hover,.action-primary:hover{box-shadow:0 14px 34px rgba(124,92,252,.30)!important}
.topbar,.navbar{background:rgba(5,6,18,.78)!important;border-bottom-color:rgba(167,139,250,.10)!important}
.sidebar{background:linear-gradient(180deg,#070918,#050612)!important;border-right-color:rgba(167,139,250,.10)!important}
.sidebar-nav-item.active{background:linear-gradient(90deg,rgba(124,92,252,.18),rgba(34,211,238,.04))!important;box-shadow:inset 3px 0 0 #a78bfa,0 8px 28px rgba(124,92,252,.10)!important}
.sidebar-nav-item.active svg{color:#a78bfa!important}
.badge-blue,.pill-blue{background:rgba(124,92,252,.12)!important;color:#c4b5fd!important;border-color:rgba(167,139,250,.18)!important}
input,select,textarea{background:rgba(7,9,20,.80)!important;border-color:rgba(167,139,250,.14)!important}
input:focus,select:focus,textarea:focus{border-color:rgba(167,139,250,.60)!important;box-shadow:0 0 0 4px rgba(124,92,252,.10),0 0 24px rgba(124,92,252,.08)!important}
.modal,.modal-content,.dialog{background:linear-gradient(155deg,#111329,#080a18)!important;border-color:rgba(167,139,250,.18)!important}
.toast{border-color:rgba(167,139,250,.15)!important}
.hero:after{background:linear-gradient(135deg,rgba(124,92,252,.24),rgba(34,211,238,.10));filter:blur(56px)}

/* Aurora glow on key headings and brand marks */
.page-title,.hero h1,.hero-title,.brand-title{ text-shadow:0 0 30px rgba(167,139,250,.12) }
.logo-mark,.sidebar-brand-icon,.app-loader-logo{background:linear-gradient(135deg,#7c5cfc,#22d3ee)!important;box-shadow:0 8px 26px rgba(124,92,252,.24)!important}

/* Mobile app shell */
@media(max-width:760px){
 body{background-image:radial-gradient(380px 260px at 50% -8%,rgba(124,92,252,.16),transparent 68%),linear-gradient(180deg,#050612,#070918 70%,#050612)!important}
 .mobile-bottom-nav .nav-island{background:linear-gradient(180deg,rgba(15,18,38,.94),rgba(7,9,20,.94))!important;border-color:rgba(167,139,250,.18)!important;box-shadow:0 18px 50px rgba(0,0,0,.48),0 0 35px rgba(124,92,252,.06)!important}
 .mobile-nav-item.active .nav-icon-wrap{background:linear-gradient(135deg,rgba(124,92,252,.34),rgba(34,211,238,.12))!important;box-shadow:0 6px 22px rgba(124,92,252,.18)!important}
 .mobile-nav-item.active{color:#f5f3ff!important}
 .mobile-nav-item{color:#8f96ad!important}
 .quick-action,.quick-action-card{background:linear-gradient(145deg,rgba(15,18,38,.94),rgba(9,11,23,.92))!important;border-color:rgba(167,139,250,.10)!important}
 #page-order .new-product-card{background:linear-gradient(145deg,rgba(15,18,38,.96),rgba(8,10,22,.94))!important;border-color:rgba(167,139,250,.11)!important}
 #page-order .npc-buy-btn{background:linear-gradient(135deg,#7c5cfc,#4f46e5)!important}
}

/* Loading skeleton follows the new aurora palette */
#app-loading-screen{background:#050612!important}
.app-loader-bg{background:radial-gradient(circle at 50% -5%,rgba(124,92,252,.22),transparent 38%),radial-gradient(circle at 90% 70%,rgba(34,211,238,.08),transparent 34%)!important}
.skeleton-shimmer{background-image:linear-gradient(105deg,rgba(255,255,255,.025) 20%,rgba(167,139,250,.10) 38%,rgba(34,211,238,.035) 48%,rgba(255,255,255,.025) 56%)!important}

/* ============================================================
   NOKOS.MY.ID PREMIUM NEON GLASS — FULL APP REDESIGN 2026-08-19
   Mobile-first visual layer applied to every page.
   ============================================================ */
:root{
  --nx-bg:#050711;
  --nx-bg-2:#080b16;
  --nx-surface:#0b1020;
  --nx-surface-2:#10162a;
  --nx-line:rgba(148,163,184,.13);
  --nx-violet:#8b5cf6;
  --nx-blue:#38bdf8;
  --nx-cyan:#22d3ee;
  --nx-green:#22c55e;
  --nx-text:#f8fafc;
  --nx-muted:#8d98ad;
  --nx-grad:linear-gradient(135deg,#8b5cf6 0%,#6366f1 48%,#22d3ee 100%);
}

html,body{background:var(--nx-bg)!important;color:var(--nx-text)!important}
body{
  background-image:
    radial-gradient(600px 380px at 10% -10%,rgba(139,92,246,.18),transparent 62%),
    radial-gradient(520px 320px at 105% 5%,rgba(34,211,238,.11),transparent 60%),
    radial-gradient(500px 400px at 60% 110%,rgba(99,102,241,.08),transparent 65%),
    linear-gradient(180deg,#050711 0%,#070a14 52%,#050711 100%)!important;
}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 70%)}

/* Universal surfaces */
.card,.glass-card,.panel,.feature-card,.stat-card,.info-card,.docs-card,.faq-card,.contact-card,.auth-card,.bento-card,.endpoint-card,.cta-banner{
  background:linear-gradient(145deg,rgba(16,22,42,.92),rgba(7,11,23,.94))!important;
  border:1px solid var(--nx-line)!important;
  box-shadow:0 18px 55px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035)!important;
  backdrop-filter:blur(18px);
}
.card:hover,.feature-card:hover,.stat-card:hover,.bento-card:hover{border-color:rgba(139,92,246,.25)!important}

/* Buttons */
button,.btn,a.btn,input,select,textarea{font-family:var(--font-body)!important}
.btn-primary,.btn-success,.primary-btn,.buy-btn,.action-primary,.cta-button,.auth-submit{
  background:var(--nx-grad)!important;color:#fff!important;border:1px solid rgba(255,255,255,.13)!important;
  box-shadow:0 10px 28px rgba(99,102,241,.24)!important;
}
.btn-primary:hover,.btn-success:hover,.primary-btn:hover,.buy-btn:hover,.action-primary:hover,.cta-button:hover,.auth-submit:hover{box-shadow:0 14px 36px rgba(99,102,241,.34)!important;filter:brightness(1.05)}

/* Inputs / selectors */
input,select,textarea,.filter-select,.catalog-picker,.filter-search-wrapper{
  background:rgba(6,10,21,.76)!important;border-color:rgba(148,163,184,.14)!important;color:#f8fafc!important;
}
input::placeholder,textarea::placeholder{color:#657187!important}
input:focus,select:focus,textarea:focus{border-color:rgba(139,92,246,.65)!important;box-shadow:0 0 0 4px rgba(139,92,246,.09),0 0 30px rgba(139,92,246,.07)!important}

/* Header / dashboard shell */
.topbar,.navbar{background:rgba(5,7,17,.76)!important;border-bottom:1px solid rgba(148,163,184,.08)!important;backdrop-filter:blur(22px)!important}
.sidebar{background:linear-gradient(180deg,rgba(7,11,23,.97),rgba(4,7,15,.98))!important;border-right:1px solid rgba(148,163,184,.09)!important}
.sidebar-brand-icon,.topbar-site-logo,.logo-mark,.auth-brand-icon{background:var(--nx-grad)!important;box-shadow:0 8px 26px rgba(99,102,241,.25)!important}
.sidebar-balance{background:linear-gradient(145deg,rgba(99,102,241,.16),rgba(34,211,238,.055))!important;border:1px solid rgba(139,92,246,.14)!important}
.sidebar-nav-item.active{background:linear-gradient(90deg,rgba(139,92,246,.19),rgba(34,211,238,.035))!important;box-shadow:inset 3px 0 0 #8b5cf6,0 8px 25px rgba(99,102,241,.08)!important}
.sidebar-nav-item.active svg{color:#c4b5fd!important}
.topbar-balance-chip{background:rgba(99,102,241,.12)!important;border:1px solid rgba(139,92,246,.14)!important}

/* Headings */
.page-title,.hero h1,.hero-title,.brand-title,.auth-title{letter-spacing:-.035em!important;text-shadow:0 0 32px rgba(139,92,246,.10)}
.page-desc{color:#7f8aa0!important}

/* Home */
.home-profile-card,.welcome-card,.home-hero,.hero-card{background:linear-gradient(135deg,rgba(30,64,175,.72),rgba(7,14,30,.92))!important;border-color:rgba(96,165,250,.20)!important;box-shadow:0 24px 65px rgba(14,40,90,.25)!important}
.dashboard-banner-card{border:1px solid rgba(139,92,246,.15)!important;border-radius:22px!important;overflow:hidden!important;box-shadow:0 18px 55px rgba(0,0,0,.25)!important}
.quick-action-btn,.quick-action,.quick-action-card{background:linear-gradient(145deg,rgba(16,22,42,.96),rgba(8,12,25,.94))!important;border-color:rgba(148,163,184,.10)!important}
.quick-action-btn:hover,.quick-action:hover,.quick-action-card:hover{border-color:rgba(139,92,246,.28)!important;transform:translateY(-2px)}
.home-stat-box{background:linear-gradient(145deg,rgba(15,21,39,.94),rgba(7,11,23,.96))!important;border-color:rgba(148,163,184,.09)!important}

/* Order catalog */
#page-order .new-product-card,.product-card{background:linear-gradient(145deg,rgba(15,21,40,.97),rgba(7,11,23,.96))!important;border-color:rgba(148,163,184,.10)!important;box-shadow:0 12px 32px rgba(0,0,0,.24)!important}
#page-order .new-product-card:hover,.product-card:hover{border-color:rgba(139,92,246,.30)!important;transform:translateY(-2px)!important}
#page-order .npc-buy-btn,.product-card .buy-btn{background:linear-gradient(135deg,#6366f1,#8b5cf6)!important}
.status-active{box-shadow:0 0 14px rgba(34,197,94,.10)}

/* Modals */
.modal,.modal-content,.dialog,.confirm-modal,.country-modal,.operator-modal{background:linear-gradient(160deg,#11172b,#080c18)!important;border:1px solid rgba(139,92,246,.20)!important;box-shadow:0 30px 100px rgba(0,0,0,.68)!important;border-radius:24px!important}
.modal-backdrop,.modal-overlay{backdrop-filter:blur(9px)!important;background:rgba(1,3,10,.68)!important}

/* Wallet / withdraw */
.wallet-balance-card,.withdraw-card,.deposit-card{background:linear-gradient(145deg,rgba(19,30,58,.94),rgba(7,11,23,.96))!important;border-color:rgba(96,165,250,.16)!important}
.payment-method,.withdraw-method,.method-card{background:rgba(10,15,29,.82)!important;border-color:rgba(148,163,184,.11)!important}
.payment-method.active,.withdraw-method.active,.method-card.active{border-color:rgba(34,211,238,.48)!important;background:linear-gradient(145deg,rgba(34,211,238,.10),rgba(99,102,241,.08))!important;box-shadow:0 0 24px rgba(34,211,238,.08)!important}

/* Docs / FAQ / contact */
.docs-sidebar{background:rgba(9,14,27,.72)!important;border:1px solid var(--nx-line)!important}
.docs-content pre,.code-block,pre{background:#050914!important;border:1px solid rgba(139,92,246,.13)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important}
.endpoint-card{background:linear-gradient(145deg,rgba(14,20,38,.95),rgba(7,11,23,.95))!important}
.faq-item,.faq-card,.contact-card{background:linear-gradient(145deg,rgba(15,21,40,.94),rgba(7,11,23,.95))!important}

/* Auth pages */
.auth-page{background:transparent!important}
.auth-page:before{background:radial-gradient(circle at 15% 20%,rgba(139,92,246,.18),transparent 42%),radial-gradient(circle at 85% 80%,rgba(34,211,238,.10),transparent 44%)!important}
.auth-card{box-shadow:0 32px 100px rgba(0,0,0,.58),0 0 60px rgba(99,102,241,.06)!important}
.auth-brand-name{background:linear-gradient(135deg,#fff,#a5b4fc,#67e8f9)!important;-webkit-background-clip:text!important;background-clip:text!important}

/* Loading */
#app-loading-screen{background:#050711!important}
.app-loader-bg{background:radial-gradient(circle at 50% -5%,rgba(139,92,246,.20),transparent 38%),radial-gradient(circle at 95% 70%,rgba(34,211,238,.09),transparent 34%)!important}
.app-loader-logo{background:var(--nx-grad)!important}
.skeleton-shimmer{background-image:linear-gradient(105deg,rgba(255,255,255,.025) 20%,rgba(139,92,246,.10) 38%,rgba(34,211,238,.045) 50%,rgba(255,255,255,.025) 58%)!important}

/* ============================================================
   MOBILE APP SHELL — priority breakpoint
   ============================================================ */
@media(max-width:768px){
  html,body{width:100%;min-width:0;overflow-x:hidden!important}
  body{font-size:14px!important;padding-bottom:0!important}
  .dashboard-layout{display:block!important;min-height:100vh!important}
  .sidebar{width:286px!important;z-index:200!important;box-shadow:30px 0 80px rgba(0,0,0,.45)!important}
  .sidebar-overlay{z-index:190!important;background:rgba(0,0,0,.66)!important;backdrop-filter:blur(4px)}
  .dashboard-main{margin-left:0!important;width:100%!important;min-width:0!important}
  .topbar{height:60px!important;padding:0 12px!important;position:sticky!important;top:0!important;z-index:150!important}
  .topbar-hamburger{width:36px!important;height:36px!important;border-radius:12px!important}
  .topbar-title{font-size:.82rem!important;min-width:0!important}
  .topbar-balance-chip{max-width:118px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:.68rem!important}
  .topbar-actions{gap:6px!important}
  .dashboard-content{padding:14px 12px 104px!important;max-width:none!important}
  .page-header{margin-bottom:14px!important}
  .page-title{font-size:21px!important;line-height:1.15!important}
  .page-desc{font-size:.72rem!important}

  /* Make all grids fit the phone instead of looking like desktop */
  .stats-grid,.home-stats-grid,.quick-actions-grid,.quick-actions,.dashboard-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .stats-grid .stat-card,.home-stat-box{min-width:0!important}
  .product-list,.new-product-grid,#page-order .new-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .product-card,#page-order .new-product-card{min-width:0!important;padding:10px!important;border-radius:16px!important}
  .product-name{font-size:.74rem!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .product-price{font-size:1rem!important}
  .npc-buy-btn,.buy-btn{min-height:38px!important;border-radius:11px!important;font-size:.72rem!important}

  /* Order filters stack like a native app */
  #page-order .filter-row,.filter-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;align-items:stretch!important}
  #page-order .filter-search-wrapper,.filter-search-wrapper{grid-column:1/-1!important;height:48px!important}
  #page-order .filter-row select,.filter-row select,.catalog-picker{min-height:48px!important;width:100%!important}

  /* Bottom navigation */
  .mobile-bottom-nav{left:10px!important;right:10px!important;bottom:max(10px,env(safe-area-inset-bottom))!important;z-index:500!important}
  .nav-island{padding:7px 6px!important;border-radius:24px!important;background:rgba(8,12,24,.91)!important;border:1px solid rgba(139,92,246,.18)!important;box-shadow:0 20px 60px rgba(0,0,0,.55),0 0 30px rgba(99,102,241,.08)!important;backdrop-filter:blur(24px)!important}
  .mobile-nav-item{min-height:50px!important;padding:5px 2px!important;color:#7f8aa0!important}
  .mobile-nav-item.active{color:#fff!important}
  .nav-icon-wrap{width:44px!important;height:30px!important;border-radius:15px!important}
  .mobile-nav-item.active .nav-icon-wrap{background:linear-gradient(135deg,rgba(139,92,246,.34),rgba(34,211,238,.12))!important;box-shadow:0 6px 22px rgba(139,92,246,.18)!important}

  /* Full-width cards and cleaner touch targets */
  .card,.glass-card,.panel,.feature-card,.stat-card,.info-card,.docs-card,.faq-card,.contact-card{border-radius:18px!important}
  button,.btn,a.btn{min-height:42px}
  .modal,.modal-content,.dialog{width:calc(100vw - 28px)!important;max-width:calc(100vw - 28px)!important;border-radius:22px!important}
  .modal-body{max-height:70vh!important;overflow:auto!important;-webkit-overflow-scrolling:touch}

  /* Public landing */
  .hero{border-radius:24px!important;padding-left:18px!important;padding-right:18px!important}
  .hero h1{font-size:clamp(2.1rem,10vw,3.5rem)!important;line-height:1.02!important}
  .bento-grid{grid-template-columns:1fr!important;gap:10px!important}
  .bento-wide{grid-column:span 1!important}
  .bento-card{padding:18px!important;border-radius:18px!important}
  .how-steps{grid-template-columns:1fr 1fr!important;gap:12px!important}
  .api-grid{grid-template-columns:1fr!important;gap:14px!important}
  .cta-banner{padding:30px 18px!important;border-radius:22px!important}
  .section{padding-left:14px!important;padding-right:14px!important}

  /* Docs / FAQ / contact */
  .docs-layout{grid-template-columns:1fr!important}
  .docs-sidebar{position:static!important;width:100%!important;max-height:none!important}
  .docs-content{min-width:0!important}
  .docs-content pre,pre{font-size:.72rem!important;overflow-x:auto!important}
  .faq-grid{grid-template-columns:1fr!important}
  .contact-grid{grid-template-columns:1fr!important}

  /* Auth */
  .auth-page{padding:16px!important;justify-content:center!important}
  .auth-container{max-width:440px!important}
  .auth-card{padding:24px 18px!important;border-radius:22px!important}
  .auth-title{font-size:1.45rem!important}
}

@media(max-width:390px){
  .dashboard-content{padding-left:9px!important;padding-right:9px!important}
  .product-list,.new-product-grid,#page-order .new-product-grid{gap:7px!important}
  .product-card,#page-order .new-product-card{padding:8px!important}
  .product-price{font-size:.92rem!important}
  .topbar-balance-chip{max-width:96px!important}
  .mobile-bottom-nav{left:7px!important;right:7px!important}
}

/* ============================================================
   NOKOS.MY.ID 2026 APP EXPERIENCE — GLOBAL POLISH
   Applies to dashboard, docs, auth, FAQ and public pages.
   ============================================================ */
:root{
  --nx-shadow:0 22px 70px rgba(0,0,0,.30);
  --nx-soft:rgba(255,255,255,.035);
}
html{scroll-behavior:smooth}
body{overscroll-behavior-y:none}
::selection{background:rgba(139,92,246,.32);color:#fff}

/* Soft page entrance instead of a hard flash. */
.page.active{animation:nxPageIn .28s ease both}
@keyframes nxPageIn{from{opacity:.62;transform:translateY(5px);filter:blur(1.5px)}to{opacity:1;transform:none;filter:none}}

/* Better cards / interaction states everywhere. */
.card,.glass-card,.panel,.feature-card,.stat-card,.info-card,.docs-card,.faq-card,.contact-card,.auth-card,.bento-card,.endpoint-card,.cta-banner{position:relative;overflow:hidden}
.card:before,.glass-card:before,.panel:before,.feature-card:before,.stat-card:before,.info-card:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.035),transparent 28%,transparent 70%,rgba(124,92,252,.025));pointer-events:none}
.tap-pop{animation:nxTapPop .22s ease both!important}
@keyframes nxTapPop{50%{transform:scale(.985)}}

/* Mobile app shell. */
@media(max-width:760px){
  body{padding-bottom:env(safe-area-inset-bottom,0)}
  .page-header{position:relative}
  .page-title{letter-spacing:-.045em!important}
  .page-desc{max-width:60ch}
  .form-input,.form-select,input,select,textarea{min-height:46px}
  button,.btn,.mobile-nav-item{min-height:42px}
  .modal-overlay{padding:14px!important;align-items:flex-end!important}
  .modal-overlay .modal{width:100%;max-height:88vh;overflow:auto;border-radius:24px 24px 18px 18px!important;animation:nxSheetIn .24s ease both}
  .modal-overlay.open .modal:before{content:"";display:block;width:38px;height:4px;border-radius:99px;background:rgba(255,255,255,.16);margin:-3px auto 14px}
}
@keyframes nxSheetIn{from{opacity:.4;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Scroll-to-top. */
.nx-scroll-top{position:fixed;right:20px;bottom:22px;z-index:95;width:42px;height:42px;border-radius:14px;border:1px solid rgba(167,139,250,.20);background:rgba(10,14,28,.86);color:#fff;box-shadow:0 12px 30px rgba(0,0,0,.35);backdrop-filter:blur(16px);opacity:0;visibility:hidden;transform:translateY(10px);transition:.22s ease;cursor:pointer}
.nx-scroll-top.show{opacity:1;visibility:visible;transform:none}
@media(max-width:760px){.nx-scroll-top{right:14px;bottom:94px;width:40px;height:40px;border-radius:13px}}

/* Command palette. */
.nx-command-overlay{position:fixed;inset:0;z-index:10000;display:none;align-items:flex-start;justify-content:center;padding:12vh 16px 20px;background:rgba(2,4,10,.62);backdrop-filter:blur(14px)}
.nx-command-overlay.open{display:flex}
.nx-command{width:min(620px,100%);border:1px solid rgba(167,139,250,.18);border-radius:24px;background:linear-gradient(160deg,#11162b,#080b17);box-shadow:0 35px 100px rgba(0,0,0,.55);overflow:hidden}
.nx-command-search{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.nx-command-search input{flex:1;border:0!important;background:transparent!important;box-shadow:none!important;min-height:42px;font-size:.95rem}
.nx-command-search kbd,.nx-command-item kbd{font:600 .62rem var(--font-mono);color:#8d98ad;border:1px solid rgba(255,255,255,.08);border-radius:7px;padding:4px 6px;background:rgba(255,255,255,.03)}
.nx-command-list{padding:8px;max-height:52vh;overflow:auto}
.nx-command-item{width:100%;display:flex;align-items:center;gap:10px;text-align:left;border:0;background:transparent;color:#e8ecf8;padding:12px;border-radius:13px;cursor:pointer}
.nx-command-item:hover{background:rgba(124,92,252,.10)}.nx-command-item span{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:rgba(124,92,252,.12);color:#c4b5fd}.nx-command-item strong{flex:1;font-size:.78rem}.nx-command-empty{padding:28px;text-align:center;color:#7d879c;font-size:.78rem}

/* Webhook / developer cards. */
.webhook-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 18px}
.webhook-stat{padding:14px;border:1px solid rgba(148,163,184,.10);border-radius:16px;background:linear-gradient(145deg,rgba(15,20,38,.92),rgba(8,11,23,.92))}
.webhook-stat small{display:block;color:#7f8aa0;font-size:.58rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800}.webhook-stat strong{display:block;margin-top:5px;font-size:1.2rem;color:#f8fafc}.webhook-stat em{display:block;margin-top:3px;color:#7f8aa0;font-size:.58rem;font-style:normal}
.webhook-info{display:flex;align-items:flex-start;gap:12px}.webhook-info-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(34,211,238,.10));border:1px solid rgba(167,139,250,.14);font-size:1.1rem;flex:0 0 auto}
.webhook-event-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important}
.webhook-event-option{display:flex;align-items:center;gap:9px;padding:11px 12px;border:1px solid rgba(148,163,184,.10);border-radius:13px;background:rgba(255,255,255,.018);font-size:.73rem;cursor:pointer;transition:.18s ease}
.webhook-event-option:hover{border-color:rgba(139,92,246,.28);background:rgba(124,92,252,.06)}.webhook-event-option input{width:17px!important;height:17px!important;min-height:17px!important;accent-color:#8b5cf6}.webhook-event-option span{flex:1}.webhook-event-code{display:block;color:#a5b4fc;font:600 .62rem var(--font-mono);margin-top:2px}
.webhook-card{padding:16px!important}.webhook-card-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.webhook-url-text{font-weight:800;word-break:break-all;font-size:.82rem}.webhook-meta{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.webhook-actions{display:flex;flex-wrap:wrap;gap:7px}
@media(max-width:760px){.webhook-stat-grid{grid-template-columns:1fr 1fr}.webhook-event-grid{grid-template-columns:1fr!important}.webhook-card-top{flex-direction:column}.webhook-actions .btn{flex:1;min-width:calc(50% - 4px)}}

/* Better loading state: never leave plain "Memuat..." text as the only visual. */
[data-loading-skeleton],.nx-skeleton{position:relative;overflow:hidden;color:transparent!important;background:rgba(148,163,184,.08)!important;border-color:rgba(148,163,184,.08)!important}
[data-loading-skeleton]::after,.nx-skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.08) 42%,transparent 64%);background-size:220% 100%;animation:nxShimmer 1.25s linear infinite}
@keyframes nxShimmer{from{background-position:220% 0}to{background-position:-220% 0}}

/* Desktop keeps the app language: denser sidebar + rounded workspace. */
@media(min-width:761px){
  .dashboard-main{background:transparent}
  .dashboard-content{max-width:1500px;margin:0 auto}
  .sidebar{backdrop-filter:blur(18px)}
}
.nx-command-trigger{position:fixed;right:18px;bottom:88px;z-index:94;width:42px;height:42px;border-radius:14px;border:1px solid rgba(167,139,250,.18);background:rgba(10,14,28,.84);color:#c4b5fd;box-shadow:0 12px 30px rgba(0,0,0,.35);backdrop-filter:blur(16px);cursor:pointer}
@media(min-width:761px){.nx-command-trigger{right:22px;bottom:22px}}


/* ============================================================
   FINAL MOBILE / NON-DESKTOP FIX — 2026-08-21
   Designed for Android Chrome, including Desktop-Site viewport.
   ============================================================ */
html, body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
  min-height: 100% !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}
body { overscroll-behavior-y: auto !important; }

/* Public landing page: treat narrow/tablet-like viewports as app/mobile. */
@media (max-width: 1024px) {
  .navbar {
    height: 58px !important;
    padding: 0 14px !important;
    background: rgba(4,8,18,.88) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border-bottom: 1px solid rgba(124,92,252,.12) !important;
  }
  .nav-links { display: none !important; }
  .nav-actions { gap: 6px !important; }
  .nav-toggle { display: flex !important; }
  .nav-logo { font-size: .95rem !important; gap: 8px !important; }
  .nav-logo-icon { width: 30px !important; height: 30px !important; }
  .navbar .btn { min-height: 36px !important; padding: 7px 11px !important; font-size: .68rem !important; }

  .hero-mega {
    min-height: auto !important;
    padding: 104px 16px 54px !important;
    overflow: visible !important;
  }
  .hero-mega-inner { width: 100% !important; max-width: 680px !important; }
  .hero-mega-title {
    font-size: clamp(40px, 8vw, 72px) !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;
    overflow-wrap: anywhere !important;
  }
  .hero-mega-desc { font-size: .92rem !important; line-height: 1.6 !important; max-width: 580px !important; }
  .hero-mega-ctas { margin-bottom: 28px !important; gap: 9px !important; }
  .hero-mega-ctas .btn { min-height: 44px !important; }
  .hero-live-panel { margin: 22px auto 20px !important; max-width: 100% !important; }
  .hero-live-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
  .hero-mini-stats { flex-wrap: wrap !important; justify-content: center !important; }

  .stats-band-section, .section { padding: 46px 16px !important; }
  .pricing-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 10px !important; }
  .bento-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 10px !important; }
  .bento-wide { grid-column: span 2 !important; }
  .how-steps { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 14px !important; }
  .api-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .footer-top { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 600px) {
  .hero-mega { padding: 92px 14px 42px !important; }
  .hero-mega-title { font-size: clamp(38px, 12vw, 58px) !important; }
  .hero-mega-desc { font-size: .82rem !important; }
  .hero-mega-ctas { flex-direction: column !important; align-items: stretch !important; }
  .hero-mega-ctas .btn { width: 100% !important; justify-content: center !important; }
  .hero-live-grid { grid-template-columns: 1fr !important; }
  .hero-live-panel { padding: 12px !important; border-radius: 18px !important; }
  .hero-live-grid>div { padding: 10px !important; }
  .pricing-grid, .bento-grid, .how-steps, .footer-top { grid-template-columns: 1fr !important; }
  .bento-wide { grid-column: span 1 !important; }
  .pricing-card, .bento-card { padding: 16px !important; }
  .section { padding: 38px 14px !important; }
  .stats-band-section { padding: 38px 14px !important; }
  .footer { padding: 40px 14px 90px !important; }
  .navbar { padding-left: 10px !important; padding-right: 10px !important; }
  .nav-actions .btn-outline { display: none !important; }
  .nav-logo-text { font-size: .88rem !important; }
}

/* Never let a fixed UI layer block vertical touch scrolling. */
.bg-gradient-blob, body:before { pointer-events: none !important; }
.download-popup-overlay[style*="display: none"] { pointer-events: none !important; }

/* Mobile bottom dock / app shell */
@media (max-width: 1024px) {
  .mobile-bottom-nav { z-index: 1000 !important; }
  .dashboard-main, .dashboard-content, .main-content, main { min-width: 0 !important; max-width: 100% !important; }
}

/* Safety watchdog: stale loader state must never lock page scrolling. */
@media (max-width: 1024px) {
  html.app-loading-active, html.app-loading-active body {
    overflow-y: auto !important;
    touch-action: pan-y !important;
  }
}


/* HARD MOBILE SCROLL FIX — single-finger vertical scrolling */
html, body {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: auto !important;
}

@media (max-width: 1024px) {
  /* Never create a nested vertical scroll container on mobile/tablet.
     The document itself must own vertical scrolling so Chrome can scroll
     with one finger naturally. */
  html, body {
    position: static !important;
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
  }
  .dashboard-layout {
    display: block !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }
  .dashboard-main {
    display: block !important;
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    touch-action: pan-y !important;
  }
  .dashboard-content {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    touch-action: pan-y !important;
  }
  main, .main-content, .page, .page.active {
    overflow: visible !important;
    touch-action: pan-y !important;
  }
  /* Fixed navigation must not become the page's scrolling surface. */
  .mobile-bottom-nav, .app-bottom-nav {
    touch-action: manipulation !important;
  }
  /* Decorative/floating layers can never steal a vertical gesture. */
  .bg-gradient-blob, body::before, .dashboard-bg, .hero-bg,
  .hero-glow, .float-badge {
    pointer-events: none !important;
  }
}

/* ============================================================
   ANDROID 16 / MOBILE VIEWPORT FIX — 2026-08-22
   Important: Android Chrome can expose a tablet-like CSS viewport
   (around 800–1000px) even on a phone. The old 768px breakpoint
   therefore left the fixed desktop sidebar visible and caused the
   dashboard to be squeezed/cropped. Treat <=1100px as the app shell.
   ============================================================ */
@media (max-width: 1100px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .dashboard-layout {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 100dvh !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Desktop sidebar becomes a drawer at this breakpoint. */
  .dashboard-layout > .sidebar,
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: min(286px, 82vw) !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    transform: translate3d(-105%, 0, 0) !important;
    transition: transform .24s cubic-bezier(.4,0,.2,1) !important;
    z-index: 2000 !important;
    overflow: hidden !important;
    will-change: transform;
  }
  .dashboard-layout > .sidebar.open,
  .sidebar.open {
    transform: translate3d(0, 0, 0) !important;
  }

  .sidebar-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1990 !important;
    display: none !important;
    pointer-events: none !important;
  }
  .sidebar-overlay.show {
    display: block !important;
    pointer-events: auto !important;
  }

  .dashboard-main {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    touch-action: pan-y !important;
  }

  .topbar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 120 !important;
  }
  .topbar-hamburger { display: block !important; flex: 0 0 auto !important; }

  .dashboard-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding-left: clamp(10px, 3vw, 18px) !important;
    padding-right: clamp(10px, 3vw, 18px) !important;
    padding-bottom: 120px !important;
    overflow: visible !important;
  }

  /* Prevent any child from creating horizontal overflow. */
  .page,
  .page.active,
  .home-profile-card,
  .info-banner,
  .dashboard-banner-card,
  .dashboard-banner-slider,
  .system-health-grid,
  .safe-uptime-card,
  .server-status-card,
  .api-request-card,
  .quick-actions-grid,
  .home-stats-grid,
  .popular-apps-grid,
  .stats-grid,
  .product-list,
  .new-product-grid,
  .order-filter-box {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .system-health-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .server-status-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .api-request-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

  .dashboard-banner-slide,
  .dashboard-banner-slider img {
    max-width: 100% !important;
  }

  /* Native-app bottom dock. */
  .app-bottom-nav.mobile-bottom-nav {
    display: block !important;
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: calc(100% - 16px) !important;
    max-width: 720px !important;
    min-width: 0 !important;
    transform: translateX(-50%) !important;
    z-index: 2100 !important;
    pointer-events: none !important;
  }
  .app-bottom-nav .nav-island {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  .app-bottom-nav .mobile-nav-item {
    width: 100% !important;
    min-width: 0 !important;
    touch-action: manipulation !important;
  }
}

@media (max-width: 600px) {
  .dashboard-content { padding-left: 9px !important; padding-right: 9px !important; }
  .server-status-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7px !important; }
  .server-status-item { padding: 9px !important; min-width: 0 !important; }
  .server-status-name { font-size: .66rem !important; }
  .api-request-stat { min-width: 0 !important; padding: 9px 7px !important; }
  .api-request-stat strong { font-size: .92rem !important; }
}

@media (max-width: 380px) {
  .server-status-list { grid-template-columns: 1fr !important; }
  .api-request-grid { grid-template-columns: 1fr 1fr 1fr !important; }
}

/* V16: force original NOKOS.MY.ID dark dashboard appearance. */
html, html.theme-light, body {
  background: #040812 !important;
  color: #F0F4FF !important;
}
body::before, body::after { background: transparent !important; }
.dashboard-layout, .dashboard-main, .dashboard-content {
  background: #040812 !important;
  color: #F0F4FF !important;
}
.dashboard-content { isolation: isolate; }

/* ============================================================
   NOKOS.MY.ID v46 — BLACK / GREEN APP REDESIGN
   Inspired by the supplied reference screenshots.
   Final visual override layer.
   ============================================================ */
:root{
  --primary:#16d98a;
  --primary-light:#55efad;
  --primary-dark:#0fae6d;
  --primary-glow:rgba(22,217,138,.28);
  --accent:#2388ff;
  --accent-light:#5aa6ff;
  --success:#22c55e;
  --warning:#f5b84b;
  --danger:#ff5d66;
  --bg-base:#090a0a;
  --bg-surface:#0d0f0f;
  --bg-card:#121414;
  --bg-card-hover:#171a19;
  --bg-glass:rgba(16,18,18,.82);
  --bg-input:#0d1010;
  --border:rgba(255,255,255,.075);
  --border-light:rgba(255,255,255,.055);
  --border-input:rgba(255,255,255,.10);
  --border-focus:rgba(22,217,138,.65);
  --text-primary:#f5f7f6;
  --text-secondary:#a5adaa;
  --text-muted:#66706b;
  --text-accent:#55efad;
  --gradient-primary:linear-gradient(135deg,#13c981 0%,#75d63f 100%);
  --gradient-hero:linear-gradient(180deg,#0b0e0d 0%,#111513 100%);
  --gradient-card:linear-gradient(145deg,rgba(22,217,138,.055),rgba(255,255,255,.018));
  --shadow-glow:0 0 30px rgba(22,217,138,.12);
  --shadow-glow-accent:0 0 30px rgba(35,136,255,.12);
}
html,body{background:#090a0a!important;color:#f5f7f6!important}
body{
  background-image:radial-gradient(520px 300px at 50% -10%,rgba(22,217,138,.055),transparent 65%),linear-gradient(180deg,#090a0a 0%,#0b0c0c 55%,#090a0a 100%)!important;
}
.bg-gradient-blob::before{background:radial-gradient(circle,rgba(22,217,138,.07),transparent 65%)!important}
.bg-gradient-blob::after{background:radial-gradient(circle,rgba(35,136,255,.05),transparent 65%)!important}

/* Global cards and controls */
.card,.glass-card,.panel,.feature-card,.stat-card,.info-card,.docs-card,.faq-card,.contact-card,.auth-card{
  background:linear-gradient(145deg,#151817,#101212)!important;
  border-color:rgba(255,255,255,.065)!important;
  box-shadow:0 16px 42px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.018)!important;
  backdrop-filter:none!important;
}
.card:hover,.feature-card:hover,.stat-card:hover{border-color:rgba(22,217,138,.14)!important}
.btn-primary,.btn-success,.primary-btn,.buy-btn,.action-primary{
  background:linear-gradient(135deg,#10c980,#6bd63f)!important;
  color:#04110b!important;border-color:rgba(112,255,177,.28)!important;
  box-shadow:0 9px 24px rgba(22,217,138,.16)!important;
}
.btn-primary:hover,.btn-success:hover,.primary-btn:hover,.buy-btn:hover,.action-primary:hover{box-shadow:0 12px 30px rgba(22,217,138,.24)!important}
.btn-ghost{background:#181b1a!important;border-color:rgba(255,255,255,.08)!important;color:#b7c0bc!important}
input,select,textarea{background:#0d1010!important;border-color:rgba(255,255,255,.08)!important;color:#f5f7f6!important}
input:focus,select:focus,textarea:focus{border-color:rgba(22,217,138,.58)!important;box-shadow:0 0 0 3px rgba(22,217,138,.08)!important}

/* App shell */
.sidebar{background:#0b0d0d!important;border-right:1px solid rgba(255,255,255,.055)!important;box-shadow:12px 0 40px rgba(0,0,0,.25)!important}
.sidebar-header{border-bottom-color:rgba(255,255,255,.05)!important}
.sidebar-brand-icon,.logo-mark,.app-loader-logo{background:linear-gradient(135deg,#12c982,#2388ff)!important;box-shadow:0 7px 22px rgba(22,217,138,.16)!important}
.sidebar-brand-name{background:linear-gradient(135deg,#fff,#9ee8c4)!important;-webkit-background-clip:text!important;background-clip:text!important}
.sidebar-balance{background:#131615!important;border-color:rgba(255,255,255,.06)!important}
.sidebar-balance-value{color:#58e7a7!important}
.sidebar-nav-section-title{color:#59625e!important}
.sidebar-nav-item{color:#8f9994!important}
.sidebar-nav-item:hover{background:rgba(22,217,138,.055)!important;color:#f1f5f3!important}
.sidebar-nav-item.active{background:linear-gradient(90deg,rgba(22,217,138,.14),rgba(22,217,138,.025))!important;color:#58e7a7!important;border-color:rgba(22,217,138,.11)!important;box-shadow:inset 3px 0 0 #20d98c,0 7px 22px rgba(0,0,0,.16)!important}
.sidebar-nav-item.active svg{color:#58e7a7!important}
.sidebar-nav-badge{background:#1688ff!important}
.sidebar-footer{border-top-color:rgba(255,255,255,.05)!important}
.topbar,.navbar{background:rgba(9,10,10,.91)!important;border-bottom-color:rgba(255,255,255,.055)!important;backdrop-filter:blur(16px)!important}

/* Dashboard headings / hero */
.page-title,.hero h1,.hero-title,.brand-title{color:#f6f8f7!important;text-shadow:none!important}
.page-desc{color:#7e8883!important}
.hero,.home-hero,.welcome-card,.hero-card{background:linear-gradient(135deg,#0d6d4e 0%,#087a59 50%,#101a16 100%)!important;border:1px solid rgba(81,239,173,.18)!important;box-shadow:0 18px 45px rgba(0,0,0,.28)!important}
.hero:after{background:rgba(94,238,169,.12)!important;filter:blur(60px)!important}

/* Home quick actions / stats */
.quick-action,.quick-action-card,.home-stat-box{background:#151817!important;border-color:rgba(255,255,255,.06)!important}
.quick-action:hover,.quick-action-card:hover{border-color:rgba(22,217,138,.16)!important;background:#181c1a!important}

/* Tables, tabs, pills */
.table-wrap,.table-container{background:#0e1010!important;border-color:rgba(255,255,255,.06)!important}
th{background:#171b19!important;color:#b6f0d1!important}
.badge-blue,.pill-blue{background:rgba(35,136,255,.10)!important;color:#72b4ff!important;border-color:rgba(35,136,255,.18)!important}
.badge,.pill{border-color:rgba(255,255,255,.07)!important}

/* Bottom app navigation */
@media(max-width:760px){
 .mobile-bottom-nav .nav-island{background:rgba(14,16,16,.96)!important;border-color:rgba(255,255,255,.08)!important;box-shadow:0 18px 48px rgba(0,0,0,.48)!important}
 .mobile-nav-item{color:#707a75!important}
 .mobile-nav-item.active{color:#fff!important}
 .mobile-nav-item.active .nav-icon-wrap{background:linear-gradient(135deg,#16c985,#73d743)!important;color:#04110b!important;box-shadow:0 6px 18px rgba(22,217,138,.16)!important}
}

/* ============================================================
   Mandatory information drawer — left side, reference style.
   It intentionally cannot be dismissed until Continue is enabled.
   ============================================================ */
.mandatory-info-overlay{
  position:fixed!important;inset:0!important;display:none!important;align-items:stretch!important;justify-content:flex-start!important;padding:0!important;
  background:rgba(0,0,0,.68)!important;backdrop-filter:blur(5px)!important;-webkit-backdrop-filter:blur(5px)!important;
}
.mandatory-info-overlay.open{display:flex!important}
.mandatory-info-modal{
  position:relative!important;left:0!important;top:0!important;width:min(405px,88vw)!important;height:100vh!important;max-height:100vh!important;
  border-radius:0 16px 16px 0!important;border:1px solid rgba(255,255,255,.075)!important;border-left:0!important;
  background:linear-gradient(180deg,#111313 0%,#0b0c0c 100%)!important;
  box-shadow:24px 0 70px rgba(0,0,0,.52)!important;color:#f4f6f5!important;
  animation:nxInfoDrawerIn .22s ease-out both!important;
}
@keyframes nxInfoDrawerIn{from{transform:translateX(-102%);opacity:.8}to{transform:none;opacity:1}}
.mandatory-info-head{padding:18px 18px 12px!important;border-bottom:1px solid rgba(255,255,255,.055)!important;background:#101212!important}
.mandatory-info-title-row{gap:10px!important}
.mandatory-info-title{font-size:.88rem!important;font-weight:800!important;color:#f5f7f6!important}
.mandatory-info-badge{color:#d9e1dd!important;background:#242826!important;border-color:rgba(255,255,255,.07)!important;font-size:.56rem!important}
.mandatory-info-desc{color:#7f8984!important;font-size:.64rem!important;line-height:1.5!important}
.mandatory-info-tabs{margin-top:13px!important;padding:0!important;gap:0!important;border:0!important;background:transparent!important}
.mandatory-info-tab{border-radius:0!important;padding:9px 7px!important;border-bottom:2px solid transparent!important;color:#7f8984!important;font-size:.65rem!important;background:transparent!important}
.mandatory-info-tab:hover{background:rgba(255,255,255,.025)!important;color:#c8d0cc!important}
.mandatory-info-tab.active{color:#45b9ff!important;background:transparent!important;box-shadow:none!important;border-bottom-color:#2388ff!important}
.mandatory-info-body{padding:12px 12px 8px!important;background:#0b0c0c!important}
.mandatory-info-card{padding:12px!important;margin-bottom:8px!important;border-radius:8px!important;background:#171919!important;border:1px solid rgba(255,255,255,.055)!important;box-shadow:none!important}
.mandatory-info-card h4{font-size:.72rem!important;color:#e8ecea!important;margin-bottom:7px!important}
.mandatory-info-card p,.mandatory-info-card li{font-size:.62rem!important;line-height:1.58!important;color:#929c97!important}
.mandatory-info-card li+li{margin-top:5px!important}
.mandatory-info-check{padding:11px 13px 8px!important;background:#0b0c0c!important;border-top:1px solid rgba(255,255,255,.055)!important}
.mandatory-info-check label{font-size:.63rem!important;color:#b5beb9!important}
.mandatory-info-check input{width:16px!important;height:16px!important;accent-color:#2388ff!important}
.mandatory-info-footer{padding:8px 13px max(14px,env(safe-area-inset-bottom))!important;background:#0b0c0c!important}
.mandatory-info-footer .btn{min-height:40px!important;border-radius:8px!important;font-size:.67rem!important}
.mandatory-info-close-btn{background:#8b9691!important;color:#111!important;border-color:transparent!important}
.mandatory-info-continue{background:#0e6fe0!important;color:#fff!important;box-shadow:0 8px 20px rgba(35,136,255,.18)!important}
.mandatory-info-continue:disabled{background:#243038!important;color:#68736e!important;opacity:1!important;box-shadow:none!important}

@media(max-width:576px){
 .mandatory-info-modal{width:min(282px,82vw)!important;border-radius:0 10px 10px 0!important}
 .mandatory-info-head{padding:14px 12px 9px!important}
 .mandatory-info-body{padding:10px 10px 6px!important}
 .mandatory-info-card{padding:10px!important;border-radius:7px!important}
 .mandatory-info-card h4{font-size:.66rem!important}
 .mandatory-info-card p,.mandatory-info-card li{font-size:.57rem!important;line-height:1.55!important}
 .mandatory-info-check{padding:9px 10px 7px!important}
 .mandatory-info-footer{padding-left:10px!important;padding-right:10px!important}
 .mandatory-info-footer .btn{min-height:38px!important;font-size:.62rem!important}
}

/* ============================================================
   FINAL MOBILE PIXEL SHELL FIX — 2026-10-04
   Prevent desktop/persistent pixel rail rules from shifting the
   dashboard off-screen on Android Chrome. Mobile uses a drawer;
   content always occupies the full viewport.
   ============================================================ */
@media (max-width: 900px) {
  html.pixel-ui, body.pixel-ui {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .pixel-ui .dashboard-layout {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .pixel-ui .sidebar,
  .pixel-ui .dashboard-layout > .sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: min(286px, 82vw) !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    transform: translate3d(-110%,0,0) !important;
    z-index: 2000 !important;
  }

  .pixel-ui .sidebar.open,
  .pixel-ui .dashboard-layout > .sidebar.open {
    transform: translate3d(0,0,0) !important;
  }

  .pixel-ui .dashboard-main,
  .pixel-ui .dashboard-layout > .dashboard-main {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  .pixel-ui .topbar,
  .pixel-ui .dashboard-main > .topbar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }

  .pixel-ui .dashboard-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }

  .pixel-ui .page,
  .pixel-ui .page.active {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .pixel-ui .sidebar-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1990 !important;
  }
}

/* Modern loading blur: content becomes readable after the skeleton loader fades. */
html.nm-loading body > *:not(#app-loading-screen){filter:blur(6px);transform:translateZ(0);transition:filter .24s ease}
html.nm-loading{overflow:hidden}