/* ==================== ROOT / THEME ==================== */
:root{
  --bg: #FAF7FF;
  --bg-alt: #F1ECFF;
  --surface: #FFFFFF;
  --surface-2: #F6F2FF;
  --border: #E9E2FB;
  --text: #241F35;
  --text-soft: #6A6382;
  --text-faint: #9C93B5;
  --primary: #7C5CFC;
  --primary-dark: #6444E0;
  --primary-soft: #ECE5FF;
  --pink: #FF8FB1;
  --pink-soft: #FFE4EC;
  --mint: #17B685;
  --mint-soft: #DFFBF0;
  --yellow: #FFC857;
  --yellow-soft: #FFF3D9;
  --red: #F4574F;
  --red-soft: #FFE7E5;
  --shadow-sm: 0 2px 8px rgba(124,92,252,0.08);
  --shadow-md: 0 8px 24px rgba(124,92,252,0.12);
  --shadow-lg: 0 20px 48px rgba(124,92,252,0.18);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --font: "Plus Jakarta Sans", system-ui, sans-serif;
  --sidebar-w: 260px;
  color-scheme: light;
}
[data-theme="dark"]{
  --bg: #16131F; --bg-alt: #1C1829; --surface: #201C2E; --surface-2: #262137;
  --border: #332C49; --text: #F3F0FB; --text-soft: #B6ADD1; --text-faint: #7B7398;
  --primary: #9A82FF; --primary-dark: #7C5CFC; --primary-soft: #2C2447;
  --pink: #FF9FBB; --pink-soft: #3A2432; --mint: #3EDBA6; --mint-soft: #163A31;
  --yellow: #FFD166; --yellow-soft: #3A2F14; --red: #FF6B63; --red-soft: #3A1E1E;
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.25); --shadow-md: 0 10px 28px rgba(0,0,0,0.35);
  --shadow-lg: 0 24px 56px rgba(0,0,0,0.45); color-scheme: dark;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.5;
  -webkit-font-smoothing:antialiased; transition:background .3s,color .3s; overflow-x:hidden;
}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
:focus-visible{outline:2.5px solid var(--primary);outline-offset:2px;border-radius:6px;}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}

.app-shell{display:flex;min-height:100vh;}
.sidebar{
  position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w);
  background:var(--surface); border-right:1.5px solid var(--border);
  display:flex; flex-direction:column; z-index:300;
  transition:transform .25s ease;
}
.sidebar-brand{
  display:flex; align-items:center; gap:10px; padding:22px 20px 18px;
  font-weight:800; font-size:20px; letter-spacing:-0.02em;
  border-bottom:1px solid var(--border);
}
.logo-mark{
  width:36px; height:36px; border-radius:11px;
  background:linear-gradient(135deg,var(--primary),var(--pink));
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800;
  box-shadow:var(--shadow-sm); flex-shrink:0;
}
.sidebar-nav{flex:1; padding:16px 12px; overflow-y:auto; display:flex; flex-direction:column; gap:4px;}
.sidebar-nav a, .sidebar-nav button{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border-radius:var(--radius-md); font-weight:600; font-size:14.5px;
  color:var(--text-soft); transition:background .2s,color .2s; width:100%; text-align:left;
}
.sidebar-nav a:hover, .sidebar-nav button:hover,
.sidebar-nav a.active, .sidebar-nav button.active{
  background:var(--primary-soft); color:var(--primary-dark);
}
.sidebar-nav a i, .sidebar-nav button i{width:18px;height:18px;flex-shrink:0;}
.sidebar-section{font-size:11px;font-weight:800;color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;padding:16px 14px 8px;}
.sidebar-footer{padding:14px 12px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:8px;}
.sidebar-user{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:var(--surface-2); border-radius:var(--radius-md); font-size:13px; font-weight:700;
}
.sidebar-user .avatar{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--mint),var(--primary));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:800;flex-shrink:0;
}
.sidebar-user .meta{min-width:0;}
.sidebar-user .meta b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar-user .meta span{font-size:12px;color:var(--primary-dark);font-weight:800;}

.main-wrap{margin-left:var(--sidebar-w); flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar{
  position:sticky; top:0; z-index:200;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  display:flex; align-items:center; justify-content:space-between;
  height:64px; padding:0 24px;
  transition:border-color .25s, box-shadow .25s;
}
.topbar.scrolled{border-bottom-color:var(--border); box-shadow:0 4px 20px rgba(124,92,252,.06);}
.topbar-left{display:flex;align-items:center;gap:12px;}
.topbar-title{font-weight:800;font-size:16px;}
.topbar-right{display:flex;align-items:center;gap:10px;}
.icon-btn{
  width:40px;height:40px;border-radius:var(--radius-pill);
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);color:var(--text-soft);
  transition:background .2s,color .2s;
}
.icon-btn:hover{background:var(--primary-soft);color:var(--primary);}
.menu-toggle{display:none;}
.user-chip{
  display:flex;align-items:center;gap:8px;background:var(--surface-2);
  padding:6px 14px 6px 6px;border-radius:var(--radius-pill);font-weight:700;font-size:13.5px;
}
.user-chip .avatar{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,var(--mint),var(--primary));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:800;
}
.user-chip .balance{color:var(--primary-dark);font-weight:800;}
.sidebar-overlay{
  display:none; position:fixed; inset:0; background:rgba(20,15,35,.45);
  z-index:290; backdrop-filter:blur(2px);
}
.sidebar-overlay.open{display:block;}

.container{max-width:1100px;margin:0 auto;padding:0 24px;}
.page-content{padding:28px 0 48px; flex:1;}
.section{padding:48px 0;}
.section-head{margin-bottom:28px;max-width:640px;}
.eyebrow{
  display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;
  color:var(--primary);background:var(--primary-soft);padding:6px 14px;
  border-radius:var(--radius-pill);margin-bottom:12px;
}
.section-title{font-size:clamp(22px,3.5vw,30px);font-weight:800;letter-spacing:-0.02em;margin-bottom:6px;}
.section-desc{color:var(--text-soft);font-size:15px;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:var(--radius-pill);font-weight:700;font-size:14px;
  transition:transform .15s,box-shadow .15s,background .2s;white-space:nowrap;
}
.btn:active{transform:scale(0.97);}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--pink));color:#fff;box-shadow:var(--shadow-md);}
.btn-primary:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);}
.btn-ghost{background:var(--surface);color:var(--text);border:1.5px solid var(--border);}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary);}
.btn-soft{background:var(--primary-soft);color:var(--primary-dark);}
.btn-soft:hover{background:var(--primary);color:#fff;}
.btn-block{width:100%;}
.btn-sm{padding:8px 14px;font-size:13px;}
.btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none;}

.badge{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:var(--radius-pill);text-transform:uppercase;letter-spacing:.03em;}
.badge-popular{background:var(--yellow-soft);color:#9A6B00;}
[data-theme="dark"] .badge-popular{color:var(--yellow);}
.badge-new{background:var(--mint-soft);color:#0C8A63;}
[data-theme="dark"] .badge-new{color:var(--mint);}
.badge-best{background:var(--pink-soft);color:#C23E68;}
[data-theme="dark"] .badge-best{color:var(--pink);}
.badge-limited{background:var(--red-soft);color:#C23A33;}
[data-theme="dark"] .badge-limited{color:var(--red);}
.badge-discount{background:var(--red);color:#fff;}
.brand-icon{font-size:1.05em;line-height:1;}
.ic .brand-icon,.cat-card .ic .brand-icon,.product-card .ic .brand-icon{font-size:18px;}

.hero{position:relative;padding:48px 0 40px;overflow:hidden;}
.hero-decor{position:absolute;border-radius:50%;filter:blur(2px);opacity:.5;pointer-events:none;z-index:0;}
.hero-decor.d1{width:160px;height:160px;background:radial-gradient(circle,var(--pink) 0%,transparent 70%);top:-30px;right:6%;animation:float 7s ease-in-out infinite;}
.hero-decor.d2{width:110px;height:110px;background:radial-gradient(circle,var(--yellow) 0%,transparent 70%);bottom:0;left:2%;animation:float 9s ease-in-out infinite reverse;}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr 0.9fr;gap:36px;align-items:center;}
.hero-badge{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);padding:6px 12px 6px 6px;border-radius:var(--radius-pill);font-size:12.5px;font-weight:700;box-shadow:var(--shadow-sm);margin-bottom:16px;}
.hero-badge .dot{width:20px;height:20px;border-radius:50%;background:var(--mint-soft);color:var(--mint);display:flex;align-items:center;justify-content:center;}
.hero h1{font-size:clamp(28px,4.5vw,44px);font-weight:800;letter-spacing:-0.03em;line-height:1.1;margin-bottom:14px;}
.hero h1 .hl{background:linear-gradient(135deg,var(--primary),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero p{font-size:15.5px;color:var(--text-soft);max-width:460px;margin-bottom:22px;}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px;}
.hero-stats{display:flex;gap:24px;flex-wrap:wrap;}
.hero-stats .stat b{font-size:20px;font-weight:800;display:block;}
.hero-stats .stat span{font-size:12px;color:var(--text-faint);}
.hero-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow-lg);}
.hero-card .row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px dashed var(--border);}
.hero-card .row:last-child{border-bottom:none;}
.hero-card .row .ic{width:36px;height:36px;border-radius:11px;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.hero-card .row .meta b{font-size:13.5px;display:block;}
.hero-card .row .meta span{font-size:11.5px;color:var(--text-faint);}
.hero-card .row .val{margin-left:auto;font-weight:800;color:var(--mint);font-size:12.5px;}
.hero-float-badge{position:absolute;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:8px 12px;box-shadow:var(--shadow-md);font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px;z-index:3;}
.hero-float-badge.fb1{top:-12px;left:-18px;animation:float 6s ease-in-out infinite;}
.hero-float-badge.fb2{bottom:10px;right:-16px;animation:float 8s ease-in-out infinite reverse;}
.hero-visual{position:relative;}

.stats-strip{background:var(--surface-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:28px 0;}
.stats-grid .item{text-align:center;}
.stats-grid .item b{font-size:22px;font-weight:800;display:block;background:linear-gradient(135deg,var(--primary),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent;}
.stats-grid .item span{font-size:12.5px;color:var(--text-soft);font-weight:600;}

.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px;}
.cat-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:16px 10px;text-align:center;transition:all .2s;}
.cat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--primary);}
.cat-card.active{background:linear-gradient(135deg,var(--primary),var(--pink));border-color:transparent;color:#fff;box-shadow:var(--shadow-md);}
.cat-card .ic{width:40px;height:40px;border-radius:12px;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;margin:0 auto 8px;}
.cat-card.active .ic{background:rgba(255,255,255,.22);color:#fff;}
.cat-card b{font-size:12.5px;font-weight:700;display:block;}
.cat-card span{font-size:10.5px;opacity:.75;}

.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:24px 0 18px;}
.search-box{flex:1;min-width:200px;position:relative;}
.search-box input{width:100%;padding:12px 14px 12px 42px;border-radius:var(--radius-pill);border:1.5px solid var(--border);background:var(--surface);font-size:14px;}
.search-box input:focus{border-color:var(--primary);}
.search-box .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-faint);}
.filter-scroll{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;}
.filter-scroll::-webkit-scrollbar{display:none;}
.chip{padding:9px 16px;border-radius:var(--radius-pill);background:var(--surface);border:1.5px solid var(--border);font-weight:700;font-size:13px;white-space:nowrap;transition:all .2s;}
.chip:hover{border-color:var(--primary);}
.chip.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.sort-select{padding:10px 14px;border-radius:var(--radius-pill);border:1.5px solid var(--border);background:var(--surface);font-weight:600;font-size:13px;}

.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;}
.product-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:16px;display:flex;flex-direction:column;gap:8px;transition:transform .2s,box-shadow .2s,border-color .2s;}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--primary-soft);}
.product-card .top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.product-card .ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.product-card .badges{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;}
.product-card h4{font-size:14.5px;font-weight:800;margin-top:2px;}
.product-card p{font-size:12px;color:var(--text-soft);line-height:1.45;min-height:30px;}
.product-card .duration{font-size:11px;color:var(--text-faint);display:flex;align-items:center;gap:4px;font-weight:600;}
.product-card .price-row{display:flex;align-items:baseline;justify-content:space-between;margin-top:auto;padding-top:10px;border-top:1px dashed var(--border);}
.product-card .price{font-size:16px;font-weight:800;color:var(--primary-dark);}
.product-card .price .old{font-size:12px;color:var(--text-faint);text-decoration:line-through;font-weight:600;margin-right:6px;}
.product-card .price span{font-size:11px;color:var(--mint);font-weight:700;display:block;}
.product-card .actions{display:flex;gap:8px;}
.product-card .actions .btn{flex:1;}

.empty-state{grid-column:1/-1;text-align:center;padding:50px 20px;color:var(--text-soft);}
.empty-state .ic{width:56px;height:56px;border-radius:50%;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
.empty-state h4{font-size:15px;font-weight:800;color:var(--text);margin-bottom:6px;}
.empty-state p{font-size:13.5px;max-width:300px;margin:0 auto;}

.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.step-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:20px;}
.step-card .num{font-size:12px;font-weight:800;color:var(--primary);background:var(--primary-soft);width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
.step-card h4{font-size:14.5px;font-weight:800;margin-bottom:5px;}
.step-card p{font-size:12.5px;color:var(--text-soft);}

.deposit-wrap{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.panel{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:22px;}
.panel h3{font-size:16px;font-weight:800;margin-bottom:16px;display:flex;align-items:center;gap:8px;}
.amount-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px;}
.amount-btn{padding:14px 10px;border-radius:var(--radius-md);border:1.5px solid var(--border);background:var(--surface-2);font-weight:800;font-size:14px;text-align:center;transition:all .2s;}
.amount-btn:hover{border-color:var(--primary);}
.amount-btn.active{background:var(--primary);border-color:var(--primary);color:#fff;}
.custom-amount{position:relative;margin-bottom:16px;}
.custom-amount span{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-weight:700;color:var(--text-faint);}
.custom-amount input{width:100%;padding:13px 14px 13px 40px;border-radius:var(--radius-md);border:1.5px solid var(--border);background:var(--surface-2);font-size:14.5px;font-weight:700;}
.pay-methods{display:flex;flex-direction:column;gap:8px;}
.pay-method{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius-md);border:1.5px solid var(--border);transition:all .2s;}
.pay-method.enabled{cursor:pointer;}
.pay-method.enabled:hover{border-color:var(--primary);background:var(--primary-soft);}
.pay-method.selected{border-color:var(--primary);background:var(--primary-soft);}
.pay-method .ic{width:34px;height:34px;border-radius:10px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;}
.pay-method .info b{font-size:13.5px;display:block;}
.pay-method .info span{font-size:11px;color:var(--text-faint);}
.pay-method .status{margin-left:auto;font-size:10px;font-weight:800;padding:3px 8px;border-radius:var(--radius-pill);}
.pay-method .status.active-s{background:var(--mint-soft);color:var(--mint);}
.pay-method .status.soon{background:var(--surface-2);color:var(--text-faint);}
.qris-box{text-align:center;padding:16px;background:var(--surface-2);border-radius:var(--radius-md);margin-top:14px;}
.qris-box img{width:180px;height:180px;object-fit:contain;margin:0 auto 12px;border-radius:12px;background:#fff;padding:8px;}
.qris-box .nominal{font-size:20px;font-weight:800;color:var(--primary-dark);margin-bottom:4px;}
.qris-box .merchant{font-size:12px;color:var(--text-faint);margin-bottom:14px;}

.account-grid{display:grid;grid-template-columns:0.85fr 1.55fr;gap:20px;}
.account-card{background:linear-gradient(135deg,var(--primary),var(--pink));border-radius:var(--radius-lg);padding:22px;color:#fff;box-shadow:var(--shadow-md);}
.account-card .avatar-lg{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;margin-bottom:12px;}
.account-card h3{font-size:18px;font-weight:800;margin-bottom:2px;}
.account-card .role{font-size:12px;opacity:.85;margin-bottom:16px;}
.account-card .bal-label{font-size:11.5px;opacity:.85;}
.account-card .bal{font-size:26px;font-weight:800;margin-bottom:14px;}
.account-mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.account-grid .mini{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:14px;text-align:center;}
.account-grid .mini b{font-size:18px;font-weight:800;display:block;}
.account-grid .mini span{font-size:11px;color:var(--text-faint);}
.guest-box{background:var(--surface);border:1.5px dashed var(--border);border-radius:var(--radius-lg);padding:36px 22px;text-align:center;}
.guest-box .ic{width:52px;height:52px;border-radius:50%;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;}
.guest-box h3{font-size:16px;font-weight:800;margin-bottom:6px;}
.guest-box p{font-size:13px;color:var(--text-soft);max-width:320px;margin:0 auto 16px;}
.guest-box .btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}

.tabs{display:flex;gap:4px;background:var(--surface-2);border-radius:var(--radius-pill);padding:4px;margin-bottom:16px;width:fit-content;flex-wrap:wrap;}
.tab-btn{padding:8px 16px;border-radius:var(--radius-pill);font-weight:700;font-size:13px;color:var(--text-soft);}
.tab-btn.active{background:var(--surface);color:var(--primary-dark);box-shadow:var(--shadow-sm);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

.order-item,.tx-item{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:14px;display:flex;align-items:center;gap:12px;margin-bottom:8px;}
.order-item .ic,.tx-item .ic{width:40px;height:40px;border-radius:11px;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.order-item .info,.tx-item .info{flex:1;min-width:0;}
.order-item .info b,.tx-item .info b{font-size:13.5px;display:block;}
.order-item .info span,.tx-item .info span{font-size:11px;color:var(--text-faint);}
.order-item .right,.tx-item .right{text-align:right;}
.order-item .right b,.tx-item .right b{font-size:13.5px;display:block;}
.status-pill{font-size:10px;font-weight:800;padding:3px 9px;border-radius:var(--radius-pill);display:inline-block;margin-top:3px;}
.status-pending{background:var(--yellow-soft);color:#9A6B00;}
.status-processing{background:var(--primary-soft);color:var(--primary-dark);}
.status-completed{background:var(--mint-soft);color:var(--mint);}
.status-cancelled{background:var(--red-soft);color:var(--red);}

.faq-list{max-width:720px;margin:0 auto;}
.faq-item{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-md);margin-bottom:8px;overflow:hidden;}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;padding:16px 18px;font-weight:700;font-size:14px;text-align:left;}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;padding:0 18px;}
.faq-a p{font-size:13px;color:var(--text-soft);padding-bottom:16px;}
.faq-item.open .faq-a{max-height:200px;}
.faq-item.open .chev{transform:rotate(180deg);}
.chev{transition:transform .25s;flex-shrink:0;}

.site-footer{background:var(--surface-2);border-top:1px solid var(--border);padding:36px 0 18px;margin-top:auto;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;margin-bottom:28px;}
.footer-grid h5{font-size:12px;font-weight:800;margin-bottom:12px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.04em;}
.footer-grid ul li{margin-bottom:8px;}
.footer-grid ul li a{font-size:13px;color:var(--text-soft);}
.footer-grid ul li a:hover{color:var(--primary);}
.footer-brand p{font-size:13px;color:var(--text-soft);margin:10px 0 14px;max-width:260px;}
.footer-bottom{border-top:1px solid var(--border);padding-top:16px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--text-faint);}

.modal-overlay{position:fixed;inset:0;background:rgba(20,15,35,.55);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:500;padding:20px;}
.modal-overlay.open{display:flex;}
.modal-box{background:var(--surface);border-radius:var(--radius-lg);max-width:460px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:var(--shadow-lg);position:relative;animation:modalIn .22s ease;}
@keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:2;}
.modal-head h3{font-size:16px;font-weight:800;}
.modal-close{width:32px;height:32px;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--text-soft);}
.modal-close:hover{background:var(--red-soft);color:var(--red);}
.modal-body{padding:20px;}
.form-group{margin-bottom:14px;}
.form-group label{display:block;font-size:12.5px;font-weight:700;margin-bottom:6px;}
.form-group input,.form-group select{width:100%;padding:12px 14px;border-radius:var(--radius-md);border:1.5px solid var(--border);background:var(--surface-2);font-size:14px;}
.form-group input:focus,.form-group select:focus{border-color:var(--primary);}
.form-hint{font-size:11px;color:var(--text-faint);margin-top:4px;}
.summary-row{display:flex;justify-content:space-between;font-size:13px;padding:7px 0;color:var(--text-soft);}
.summary-row.total{border-top:1px dashed var(--border);margin-top:6px;padding-top:12px;font-size:15.5px;font-weight:800;color:var(--text);}
.qty-control{display:flex;align-items:center;gap:0;border:1.5px solid var(--border);border-radius:var(--radius-pill);overflow:hidden;width:fit-content;}
.qty-control button{width:36px;height:36px;font-weight:800;font-size:15px;background:var(--surface-2);}
.qty-control input{width:100px;text-align:center;border:none;background:transparent;font-weight:800;padding:0;}
.qty-presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.qty-preset{padding:6px 12px;border-radius:var(--radius-pill);border:1.5px solid var(--border);font-size:12px;font-weight:700;background:var(--surface-2);}
.qty-preset:hover,.qty-preset.active{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-dark);}
.detail-feat{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-soft);padding:5px 0;}
.detail-feat .ic{color:var(--mint);flex-shrink:0;}

.toast-wrap{position:fixed;bottom:20px;right:20px;z-index:600;display:flex;flex-direction:column;gap:8px;max-width:340px;width:calc(100% - 40px);}
.toast{display:flex;align-items:flex-start;gap:10px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:12px 14px;box-shadow:var(--shadow-lg);animation:toastIn .25s ease;}
@keyframes toastIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
.toast.hide{animation:toastOut .25s ease forwards;}
@keyframes toastOut{to{opacity:0;transform:translateX(24px)}}
.toast .ic{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.toast.success .ic{background:var(--mint-soft);color:var(--mint);}
.toast.error .ic{background:var(--red-soft);color:var(--red);}
.toast.warning .ic{background:var(--yellow-soft);color:#9A6B00;}
.toast.info .ic{background:var(--primary-soft);color:var(--primary);}
.toast p{font-size:13px;font-weight:600;line-height:1.4;}

.loader-overlay{position:fixed;inset:0;background:var(--bg);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;transition:opacity .4s;}
.loader-overlay.hide{opacity:0;pointer-events:none;}
.loader-logo{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,var(--primary),var(--pink));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:20px;animation:pulse 1.1s ease-in-out infinite;}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.loader-overlay p{font-size:13px;color:var(--text-soft);font-weight:600;}

.bonus-banner{
  background:linear-gradient(135deg,var(--mint-soft),var(--primary-soft));
  border:1.5px solid var(--mint); border-radius:var(--radius-md);
  padding:12px 16px; margin-bottom:20px; display:flex; align-items:center; gap:12px;
  font-size:13.5px; font-weight:600;
}
.bonus-banner .ic{width:36px;height:36px;border-radius:50%;background:var(--mint);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;}

@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-visual{order:-1;max-width:360px;margin:0 auto;}
  .steps-grid{grid-template-columns:repeat(2,1fr);}
  .deposit-wrap{grid-template-columns:1fr;}
  .account-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:768px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);}
  .main-wrap{margin-left:0;}
  .menu-toggle{display:flex;}
  .product-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));}
  .section{padding:36px 0;}
  .account-mini-stats{grid-template-columns:1fr 1fr;}
  .toast-wrap{left:14px;right:14px;max-width:none;bottom:14px;}
  .topbar{padding:0 16px;}
  .container{padding:0 16px;}
}
@media (max-width:480px){
  .product-grid{grid-template-columns:1fr 1fr;}
  .product-card{padding:12px;}
  .product-card .actions{flex-direction:column;}
  .hero-cta .btn{flex:1;}
  .modal-box{max-height:92vh;border-radius:var(--radius-lg) var(--radius-lg) 0 0;position:fixed;bottom:0;left:0;right:0;max-width:none;}
  .modal-overlay{align-items:flex-end;padding:0;}
  .cat-grid{grid-template-columns:repeat(3,1fr);}
}

/* ==================== CONTENT PROTECTION ==================== */
body{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
input, textarea, .modal-body input, .search-box input, .custom-amount input, .qty-control input,
[contenteditable="true"]{
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  user-select: text !important;
}
img, .logo-mark, .hero-card, .product-card{
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: auto;
}

/* Auth transition overlay */
.auth-transition{
  position:fixed; inset:0; z-index:10000;
  background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.auth-transition.show{ opacity:1; pointer-events:auto; }
.auth-transition .ring{
  width:56px; height:56px; border-radius:50%;
  border:3px solid var(--primary-soft);
  border-top-color:var(--primary);
  animation:spin .75s linear infinite;
}
.auth-transition p{ font-weight:700; font-size:14px; color:var(--text-soft); }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Date filter bar */
.history-filters{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px;
}
.history-filters input[type="date"]{
  padding:8px 12px; border-radius:var(--radius-pill); border:1.5px solid var(--border);
  background:var(--surface); font-size:13px; font-weight:600;
}
.history-filters .chip{ cursor:pointer; }

@media print{
  body{ display:none !important; }
}