/* NokosMurah App UI Refresh v20260819 */
:root{--app-radius:20px;--app-border:rgba(109, 237, 177, .12);--app-surface:rgba(10, 29, 20, .82)}
body{background:radial-gradient(circle at 15% -10%,rgba(107, 237, 176, .12),transparent 32%),radial-gradient(circle at 90% 0%,rgba(24, 194, 115, .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, 39, 27, .92),rgba(7, 24, 16, .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(107, 237, 176, .18)!important}
input,select,textarea{border-radius:14px!important;background:rgba(4, 18, 11, .72)!important;border-color:rgba(148,163,184,.14)!important}
input:focus,select:focus,textarea:focus{border-color:rgba(109, 237, 177, .55)!important;box-shadow:0 0 0 4px rgba(107, 237, 176, .08)!important;outline:none!important}
.navbar,.topbar{backdrop-filter:blur(18px);background:rgba(4, 18, 11, .72)!important;border-bottom-color:rgba(109, 237, 177, .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(107, 237, 176, .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(109, 237, 177, .1);background:rgba(7, 24, 16, .55)}
table{border-collapse:separate!important;border-spacing:0!important}th{background:rgba(107, 237, 176, .07)!important;color:#c5f8e0!important}td,th{border-bottom-color:rgba(255,255,255,.05)!important}
.modal,.modal-content,.dialog{border-radius:24px!important;border:1px solid rgba(109, 237, 177, .16)!important;background:linear-gradient(160deg,#0c261a,#071810)!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 #93F2C6,0 8px 24px rgba(107, 237, 176, .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(109, 237, 177, .14);border-radius:22px;background:rgba(6, 23, 15, .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(107, 237, 176, .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(109, 237, 177, .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:#04120b;color:#f2fdf8;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(107, 237, 176, .18),transparent 38%),radial-gradient(circle at 90% 70%,rgba(24, 194, 115, .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,#6BEDB0,#46E59B);box-shadow:0 8px 22px rgba(107, 237, 176, .22);font-weight:900}
.app-loader-hero{height:154px;border:1px solid rgba(109, 237, 177, .10);border-radius:24px;background:#092216;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(107, 237, 176, .10)}
.app-loader-row{height:58px;border-radius:18px;background:#092216;border:1px solid rgba(109, 237, 177, .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:#092216;border:1px solid rgba(109, 237, 177, .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(107, 237, 176, .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, 24, 16, .90)!important;border:1px solid rgba(109, 237, 177, .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(107, 237, 176, .30),rgba(107, 237, 176, .10));box-shadow:0 5px 18px rgba(107, 237, 176, .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}}

/* ============================================================
   NOKOSMURAH AURORA THEME — Mobile-first premium refresh
   ============================================================ */
:root{
  --aurora-violet:#6bedb0;
  --aurora-indigo:#46e59b;
  --aurora-cyan:#2be58e;
  --aurora-pink:#ec4899;
  --aurora-bg:#05120c;
  --aurora-surface:#0a1a13;
  --aurora-card:#0d2017;
  --aurora-line:rgba(147, 242, 198, .14);
}
html,body{background-color:var(--aurora-bg)!important}
body{
 background-image:
 radial-gradient(650px 380px at -5% -8%,rgba(107, 237, 176, .20),transparent 62%),
 radial-gradient(520px 320px at 105% 0%,rgba(43, 229, 142, .12),transparent 60%),
 radial-gradient(520px 420px at 70% 105%,rgba(236,72,153,.08),transparent 62%),
 linear-gradient(180deg,#05120c 0%,#071810 55%,#05120c 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, 34, 25, .94),rgba(8, 22, 15, .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,#6bedb0 0%,#68ecae 55%,#46e59b 100%)!important;
 border-color:rgba(147, 242, 198, .35)!important;
 box-shadow:0 10px 28px rgba(107, 237, 176, .22)!important;
}
.btn-primary:hover,.btn-success:hover,.primary-btn:hover,.buy-btn:hover,.action-primary:hover{box-shadow:0 14px 34px rgba(107, 237, 176, .30)!important}
.topbar,.navbar{background:rgba(5, 18, 12, .78)!important;border-bottom-color:rgba(147, 242, 198, .10)!important}
.sidebar{background:linear-gradient(180deg,#071810,#05120c)!important;border-right-color:rgba(147, 242, 198, .10)!important}
.sidebar-nav-item.active{background:linear-gradient(90deg,rgba(107, 237, 176, .18),rgba(43, 229, 142, .04))!important;box-shadow:inset 3px 0 0 #93f2c6,0 8px 28px rgba(107, 237, 176, .10)!important}
.sidebar-nav-item.active svg{color:#93f2c6!important}
.badge-blue,.pill-blue{background:rgba(107, 237, 176, .12)!important;color:#bbf7db!important;border-color:rgba(147, 242, 198, .18)!important}
input,select,textarea{background:rgba(7, 20, 14, .80)!important;border-color:rgba(147, 242, 198, .14)!important}
input:focus,select:focus,textarea:focus{border-color:rgba(147, 242, 198, .60)!important;box-shadow:0 0 0 4px rgba(107, 237, 176, .10),0 0 24px rgba(107, 237, 176, .08)!important}
.modal,.modal-content,.dialog{background:linear-gradient(155deg,#11291e,#081811)!important;border-color:rgba(147, 242, 198, .18)!important}
.toast{border-color:rgba(147, 242, 198, .15)!important}
.hero:after{background:linear-gradient(135deg,rgba(107, 237, 176, .24),rgba(43, 229, 142, .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(147, 242, 198, .12) }
.logo-mark,.sidebar-brand-icon,.app-loader-logo{background:linear-gradient(135deg,#6bedb0,#2be58e)!important;box-shadow:0 8px 26px rgba(107, 237, 176, .24)!important}

/* Mobile app shell */
@media(max-width:760px){
 body{background-image:radial-gradient(380px 260px at 50% -8%,rgba(107, 237, 176, .16),transparent 68%),linear-gradient(180deg,#05120c,#071810 70%,#05120c)!important}
 .mobile-bottom-nav .nav-island{background:linear-gradient(180deg,rgba(15, 38, 27, .94),rgba(7, 20, 14, .94))!important;border-color:rgba(147, 242, 198, .18)!important;box-shadow:0 18px 50px rgba(0,0,0,.48),0 0 35px rgba(107, 237, 176, .06)!important}
 .mobile-nav-item.active .nav-icon-wrap{background:linear-gradient(135deg,rgba(107, 237, 176, .34),rgba(43, 229, 142, .12))!important;box-shadow:0 6px 22px rgba(107, 237, 176, .18)!important}
 .mobile-nav-item.active{color:#f4fef9!important}
 .mobile-nav-item{color:#8f96ad!important}
 .quick-action,.quick-action-card{background:linear-gradient(145deg,rgba(15, 38, 27, .94),rgba(9, 23, 16, .92))!important;border-color:rgba(147, 242, 198, .10)!important}
 #page-order .new-product-card{background:linear-gradient(145deg,rgba(15, 38, 27, .96),rgba(8, 22, 15, .94))!important;border-color:rgba(147, 242, 198, .11)!important}
 #page-order .npc-buy-btn{background:linear-gradient(135deg,#6bedb0,#46e59b)!important}
}

/* Loading skeleton follows the new aurora palette */
#app-loading-screen{background:#05120c!important}
.app-loader-bg{background:radial-gradient(circle at 50% -5%,rgba(107, 237, 176, .22),transparent 38%),radial-gradient(circle at 90% 70%,rgba(43, 229, 142, .08),transparent 34%)!important}
.skeleton-shimmer{background-image:linear-gradient(105deg,rgba(255,255,255,.025) 20%,rgba(147, 242, 198, .10) 38%,rgba(43, 229, 142, .035) 48%,rgba(255,255,255,.025) 56%)!important}

/* ============================================================
   NOKOSMURAH PREMIUM NEON GLASS — FULL APP REDESIGN 2026-08-19
   Mobile-first visual layer applied to every page.
   ============================================================ */
:root{
  --nx-bg:#05110b;
  --nx-bg-2:#08160f;
  --nx-surface:#0b2016;
  --nx-surface-2:#102a1e;
  --nx-line:rgba(148,163,184,.13);
  --nx-violet:#66ecad;
  --nx-blue:#48e89d;
  --nx-cyan:#2be58e;
  --nx-green:#22c55e;
  --nx-text:#f8fafc;
  --nx-muted:#8d98ad;
  --nx-grad:linear-gradient(135deg,#66ecad 0%,#68ecae 48%,#2be58e 100%);
}

html,body{background:var(--nx-bg)!important;color:var(--nx-text)!important}
body{
  background-image:
    radial-gradient(600px 380px at 10% -10%,rgba(102, 236, 173, .18),transparent 62%),
    radial-gradient(520px 320px at 105% 5%,rgba(43, 229, 142, .11),transparent 60%),
    radial-gradient(500px 400px at 60% 110%,rgba(104, 236, 174, .08),transparent 65%),
    linear-gradient(180deg,#05110b 0%,#07140e 52%,#05110b 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, 42, 30, .92),rgba(7, 23, 16, .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(102, 236, 173, .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(104, 236, 174, .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(104, 236, 174, .34)!important;filter:brightness(1.05)}

/* Inputs / selectors */
input,select,textarea,.filter-select,.catalog-picker,.filter-search-wrapper{
  background:rgba(6, 21, 14, .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(102, 236, 173, .65)!important;box-shadow:0 0 0 4px rgba(102, 236, 173, .09),0 0 30px rgba(102, 236, 173, .07)!important}

/* Header / dashboard shell */
.topbar,.navbar{background:rgba(5, 17, 11, .76)!important;border-bottom:1px solid rgba(148,163,184,.08)!important;backdrop-filter:blur(22px)!important}
.sidebar{background:linear-gradient(180deg,rgba(7, 23, 16, .97),rgba(4, 15, 10, .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(104, 236, 174, .25)!important}
.sidebar-balance{background:linear-gradient(145deg,rgba(104, 236, 174, .16),rgba(43, 229, 142, .055))!important;border:1px solid rgba(102, 236, 173, .14)!important}
.sidebar-nav-item.active{background:linear-gradient(90deg,rgba(102, 236, 173, .19),rgba(43, 229, 142, .035))!important;box-shadow:inset 3px 0 0 #66ecad,0 8px 25px rgba(104, 236, 174, .08)!important}
.sidebar-nav-item.active svg{color:#bbf7db!important}
.topbar-balance-chip{background:rgba(104, 236, 174, .12)!important;border:1px solid rgba(102, 236, 173, .14)!important}

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

/* Home */
.home-profile-card,.welcome-card,.home-hero,.hero-card{background:linear-gradient(135deg,rgba(30, 175, 107, .72),rgba(7, 30, 19, .92))!important;border-color:rgba(109, 237, 177, .20)!important;box-shadow:0 24px 65px rgba(14, 90, 55, .25)!important}
.dashboard-banner-card{border:1px solid rgba(102, 236, 173, .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, 42, 30, .96),rgba(8, 25, 17, .94))!important;border-color:rgba(148,163,184,.10)!important}
.quick-action-btn:hover,.quick-action:hover,.quick-action-card:hover{border-color:rgba(102, 236, 173, .28)!important;transform:translateY(-2px)}
.home-stat-box{background:linear-gradient(145deg,rgba(15, 39, 28, .94),rgba(7, 23, 16, .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, 40, 28, .97),rgba(7, 23, 16, .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(102, 236, 173, .30)!important;transform:translateY(-2px)!important}
#page-order .npc-buy-btn,.product-card .buy-btn{background:linear-gradient(135deg,#68ecae,#66ecad)!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,#112b1f,#081811)!important;border:1px solid rgba(102, 236, 173, .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, 10, 6, .68)!important}

/* Wallet / withdraw */
.wallet-balance-card,.withdraw-card,.deposit-card{background:linear-gradient(145deg,rgba(19, 58, 40, .94),rgba(7, 23, 16, .96))!important;border-color:rgba(109, 237, 177, .16)!important}
.payment-method,.withdraw-method,.method-card{background:rgba(10, 29, 20, .82)!important;border-color:rgba(148,163,184,.11)!important}
.payment-method.active,.withdraw-method.active,.method-card.active{border-color:rgba(43, 229, 142, .48)!important;background:linear-gradient(145deg,rgba(43, 229, 142, .10),rgba(104, 236, 174, .08))!important;box-shadow:0 0 24px rgba(43, 229, 142, .08)!important}

/* Docs / FAQ / contact */
.docs-sidebar{background:rgba(9, 27, 19, .72)!important;border:1px solid var(--nx-line)!important}
.docs-content pre,.code-block,pre{background:#05140d!important;border:1px solid rgba(102, 236, 173, .13)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important}
.endpoint-card{background:linear-gradient(145deg,rgba(14, 38, 27, .95),rgba(7, 23, 16, .95))!important}
.faq-item,.faq-card,.contact-card{background:linear-gradient(145deg,rgba(15, 40, 28, .94),rgba(7, 23, 16, .95))!important}

/* Auth pages */
.auth-page{background:transparent!important}
.auth-page:before{background:radial-gradient(circle at 15% 20%,rgba(102, 236, 173, .18),transparent 42%),radial-gradient(circle at 85% 80%,rgba(43, 229, 142, .10),transparent 44%)!important}
.auth-card{box-shadow:0 32px 100px rgba(0,0,0,.58),0 0 60px rgba(104, 236, 174, .06)!important}
.auth-brand-name{background:linear-gradient(135deg,#fff,#acf5d3,#72eeb4)!important;-webkit-background-clip:text!important;background-clip:text!important}

/* Loading */
#app-loading-screen{background:#05110b!important}
.app-loader-bg{background:radial-gradient(circle at 50% -5%,rgba(102, 236, 173, .20),transparent 38%),radial-gradient(circle at 95% 70%,rgba(43, 229, 142, .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(102, 236, 173, .10) 38%,rgba(43, 229, 142, .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, 24, 17, .91)!important;border:1px solid rgba(102, 236, 173, .18)!important;box-shadow:0 20px 60px rgba(0,0,0,.55),0 0 30px rgba(104, 236, 174, .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(102, 236, 173, .34),rgba(43, 229, 142, .12))!important;box-shadow:0 6px 22px rgba(102, 236, 173, .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}
}

/* ============================================================
   NOKOSMURAH 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(102, 236, 173, .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(107, 237, 176, .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(147, 242, 198, .20);background:rgba(10, 28, 20, .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, 10, 6, .62);backdrop-filter:blur(14px)}
.nx-command-overlay.open{display:flex}
.nx-command{width:min(620px,100%);border:1px solid rgba(147, 242, 198, .18);border-radius:24px;background:linear-gradient(160deg,#112b1f,#081710);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(107, 237, 176, .10)}.nx-command-item span{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:rgba(107, 237, 176, .12);color:#bbf7db}.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, 38, 27, .92),rgba(8, 23, 16, .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(102, 236, 173, .18),rgba(43, 229, 142, .10));border:1px solid rgba(147, 242, 198, .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(102, 236, 173, .28);background:rgba(107, 237, 176, .06)}.webhook-event-option input{width:17px!important;height:17px!important;min-height:17px!important;accent-color:#66ecad}.webhook-event-option span{flex:1}.webhook-event-code{display:block;color:#acf5d3;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(147, 242, 198, .18);background:rgba(10, 28, 20, .84);color:#bbf7db;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, 18, 11, .88) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border-bottom: 1px solid rgba(107, 237, 176, .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 NokosMurah dark dashboard appearance. */
html, html.theme-light, body {
  background: #04120b !important;
  color: #F2FDF8 !important;
}
body::before, body::after { background: transparent !important; }
.dashboard-layout, .dashboard-main, .dashboard-content {
  background: #04120b !important;
  color: #F2FDF8 !important;
}
.dashboard-content { isolation: isolate; }

/* ============================================================
   NOKOSMURAH 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:#3be797;
  --accent-light:#6cedb1;
  --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(59, 231, 151, .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(59, 231, 151, .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,#3be797)!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:#30e591!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(59, 231, 151, .10)!important;color:#82efbc!important;border-color:rgba(59, 231, 151, .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:#59eba7!important;background:transparent!important;box-shadow:none!important;border-bottom-color:#3be797!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:#3be797!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:#1ad47d!important;color:#fff!important;box-shadow:0 8px 20px rgba(59, 231, 151, .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}