*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
:root{
  --blue:#4C7EFF;
  --blue2:#5B8DFF;
  --green:#22C55E;
  --red:#EF4444;
  --orange:#F97316;
  --gold:#F59E0B;
  --text:#111827;
  --sub:#6B7280;
  --light:#F3F4F6;
  --border:#E5E7EB;
  --white:#FFFFFF;
  --card:#FFFFFF;
  --card-bg:#FFFFFF;
  --bg-card-alt:#F1F5F9;
  --card-shadow:0 1px 3px rgba(0,0,0,0.08);
  --bg:#f0f2f5;
  --sheet-bg:#FFFFFF;
  --auth-bg:#EEF2FB;
  --input-bg:#F3F4F6;
  --icon-green:#E8F8EF;
  --icon-yellow:#FEF3C7;
  --icon-blue:#DBEAFE;
  --icon-red:#FEE2E2;
  --icon-credit:#DCFCE7;
  --icon-debit:#FEE2E2;
}

/* ── Dark mode variables ── */
[data-theme="dark"]{
  --text:#F1F5F9;
  --sub:#94A3B8;
  --light:#1E293B;
  --border:#334155;
  --white:#1E293B;
  --card:#1E293B;
  --card-bg:#1E293B;
  --bg-card-alt:#0F172A;
  --card-shadow:0 1px 3px rgba(0,0,0,0.35);
  --bg:#0F172A;
  --sheet-bg:#1E293B;
  --auth-bg:#0F172A;
  --input-bg:#0F172A;
  --icon-green:#14532D;
  --icon-yellow:#78350F;
  --icon-blue:#1E3A5F;
  --icon-red:#4C1D1D;
  --icon-credit:#14532D;
  --icon-debit:#4C1D1D;
}

html,body{height:100%;background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;transition:background .25s;}
#app{max-width:430px;margin:0 auto;height:100dvh;display:flex;flex-direction:column;background:var(--white);overflow:hidden;position:relative;}
/* Desktop-only elements — hidden by default on mobile */
#desktop-sidebar{display:none;}
#desktop-right-panel{display:none;}

/* ───── PAGES ───── */
.page{display:none;flex-direction:column;flex:1;overflow:hidden;position:relative;}
.page.active{display:flex;}
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.scroll::-webkit-scrollbar{display:none;}

/* ───── BOTTOM NAV ───── */
.bnav{
  display:flex;align-items:center;justify-content:space-around;
  background:var(--white);border-top:1px solid var(--border);
  padding:10px 16px 16px;flex-shrink:0;z-index:50;
}
.bnav-item{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;position:relative;}
.bnav-item .icon-wrap{
  display:flex;align-items:center;justify-content:center;
  border-radius:50px;padding:6px 14px;gap:6px;
  transition:background .2s;
}
.bnav-item.active .icon-wrap{background:#EEF2FF;}
.bnav-item svg{width:22px;height:22px;stroke:var(--sub);fill:none;stroke-width:1.8;}
.bnav-item.active svg{stroke:var(--blue);}
.bnav-item .bnav-label{font-size:11px;font-weight:600;color:var(--sub);}
.bnav-item.active .bnav-label{color:var(--blue);}
.bnav-item .bnav-text{font-size:12px;font-weight:600;color:var(--blue);display:none;}
.bnav-item.active .bnav-text{display:block;}

/* ───── HOME ───── */
.home-top{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 14px;}
.home-greeting h1{font-size:16px;font-weight:700;color:var(--text);line-height:1.2;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.home-greeting p{font-size:12px;color:var(--sub);margin-top:2px;}
.home-top-actions{display:flex;align-items:center;gap:8px;}
.top-icon-btn{position:relative;width:40px;height:40px;border-radius:12px;background:rgba(0,0,0,0.04);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform 0.15s ease, background 0.15s ease;}
.top-icon-btn:active{transform:scale(0.92);background:rgba(0,0,0,0.08);}
.top-icon-btn svg{width:22px;height:22px;stroke:var(--text);fill:none;stroke-width:2;}
.notif-btn{position:relative;width:40px;height:40px;border-radius:12px;background:rgba(0,0,0,0.04);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform 0.15s ease, background 0.15s ease;}
.notif-btn:active{transform:scale(0.92);background:rgba(0,0,0,0.08);}
.notif-btn svg{width:22px;height:22px;stroke:var(--text);fill:none;stroke-width:2;}
.notif-badge{
  position:absolute;top:-2px;right:-2px;
  background:var(--red);color:white;font-size:9px;font-weight:700;
  border-radius:50px;padding:2px 5px;min-width:18px;text-align:center;
  border:2px solid white;
}

/* Balance card */
.balance-card{
  margin:0 16px 18px;border-radius:18px;
  background:linear-gradient(135deg,#5B8DFF,#3D6EE8);
  padding:16px 18px 14px;color:white;cursor:pointer;
  transition:transform .15s ease,filter .15s ease;
}
.balance-card:active{transform:scale(.985);filter:brightness(.97);}
.bc-top{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.bc-avatar{
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,0.2);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.bc-avatar svg{width:26px;height:26px;stroke:white;fill:none;stroke-width:1.8;}
.bc-info{flex:1;}
.bc-amount{font-size:26px;font-weight:800;display:flex;align-items:center;gap:7px;}
/* ── Premium High-Definition Vector Coin Icon ───────────────────────
   Custom minted vector SVG (/images/coin.svg) with 3D bevel & faceted gold V.
   Replaces crude flat yellow CSS dots and emojis across the entire UI. */
.coin, .mini-coin, .bc-coin, .wbc-coin, .pf-bc-coin, .dep-amount-coin, .dsk-coin, .drp-coin, .drp-mini-coin {
  display:inline-block;
  vertical-align:middle;
  flex-shrink:0;
  background-image:url('/images/coin.svg') !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-size:contain !important;
  position:relative;
  border-radius:50%;
  border:none !important;
  box-shadow:none !important;
  filter:drop-shadow(0 1px 2px rgba(130, 70, 0, 0.32));
}
.coin::after, .mini-coin::after, .bc-coin::after, .wbc-coin::after, .pf-bc-coin::after, .dep-amount-coin::after, .dsk-coin::after, .drp-coin::after, .drp-mini-coin::after {
  content:none !important;
  display:none !important;
  border:none !important;
}
.coin{width:14px;height:14px;}
.mini-coin{width:12px;height:12px;}
.bc-coin, .wbc-coin, .pf-bc-coin{width:22px;height:22px;}
.dep-amount-coin{width:24px;height:24px;}
.dsk-coin, .drp-coin{width:16px;height:16px;}
.drp-mini-coin{width:11px;height:11px;}
.bc-email{font-size:12px;opacity:0.85;margin-top:2px;}
.bc-arrow{opacity:0.7;}
.bc-arrow svg{width:20px;height:20px;stroke:white;fill:none;stroke-width:2.5;}
.bc-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid rgba(255,255,255,0.2);}
.bc-stat{display:flex;align-items:center;gap:6px;font-size:12px;opacity:0.9;}
.bc-stat svg{width:15px;height:15px;stroke:white;fill:none;stroke-width:2;}

/* Active orders section */
.section-header{display:flex;align-items:center;gap:8px;padding:4px 18px 10px;}
.section-title{font-size:15px;font-weight:700;color:var(--text);}
.count-badge{background:var(--blue);color:white;font-size:11px;font-weight:700;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;}

/* Active orders slider */
.ao-slider-wrap{
  position:relative;margin-bottom:18px;
}
.ao-slider{
  display:flex;flex-direction:row;
  overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  gap:12px;padding:0 16px 4px;
  scrollbar-width:none;
}
.ao-slider::-webkit-scrollbar{display:none;}
.ao-dots{
  display:flex;justify-content:center;gap:5px;padding-top:6px;
}
.ao-dot{
  width:6px;height:6px;border-radius:50%;background:var(--border);
  transition:background .2s,width .2s;
}
.ao-dot.active{background:var(--blue);width:18px;border-radius:3px;}

/* Active order mini card */
.active-order-card{
  flex:0 0 calc(100% - 32px);scroll-snap-align:start;
  border-radius:14px;border:1px solid var(--border);
  background:var(--white);overflow:hidden;
}
.aoc-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;border-bottom:1px solid var(--light);
}
.aoc-id{font-size:13px;font-weight:700;color:var(--blue);}
.aoc-status-active{font-size:12px;font-weight:600;color:var(--blue);margin-left:6px;}
.aoc-timer{font-size:13px;font-weight:700;color:var(--text);}
.aoc-row{display:flex;align-items:center;gap:0;padding:8px 14px 4px;}
.aoc-label{font-size:12px;font-weight:600;color:var(--sub);width:52px;flex-shrink:0;}
.aoc-val{font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px;}
.aoc-val.otp-wait{color:var(--sub);font-weight:400;}
.copy-icon{
  width:26px;height:26px;border:1px solid var(--border);border-radius:6px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;background:var(--white);
}
.copy-icon svg{width:13px;height:13px;stroke:var(--sub);fill:none;stroke-width:2;}
.aoc-actions{
  display:flex;align-items:center;justify-content:space-around;
  padding:10px 6px 12px;border-top:1px solid var(--light);margin-top:8px;
}
.aoc-btn{
  display:flex;align-items:center;gap:5px;
  font-size:12px;font-weight:600;color:var(--sub);cursor:pointer;
  padding:4px 8px;
  transition:opacity .15s,transform .12s;
  -webkit-tap-highlight-color:transparent;user-select:none;
}
.aoc-btn svg{width:15px;height:15px;stroke:var(--sub);fill:none;stroke-width:2;transition:stroke .15s;}
.aoc-btn:active:not(.aoc-btn-disabled){transform:scale(0.84);opacity:.65;}
.aoc-btn-disabled{opacity:0.3;cursor:default;pointer-events:none;}
.aoc-btn-done{color:var(--green);}
.aoc-btn-done svg{stroke:var(--green);}
.aoc-btn-cancel{color:var(--red);}
.aoc-btn-cancel svg{stroke:var(--red);}
.aoc-btn-resend{color:var(--blue);}
.aoc-btn-resend svg{stroke:var(--blue);}
.aoc-btn .btn-cd{font-size:10px;font-weight:700;font-family:monospace;}

/* Search bar */
.search-wrap{margin:0 16px 16px;}
.search-bar{
  display:flex;align-items:center;gap:10px;
  background:var(--light);border-radius:50px;padding:10px 16px;
  cursor:text;
}
.search-bar svg{width:17px;height:17px;stroke:var(--sub);fill:none;stroke-width:2;flex-shrink:0;}
.search-bar span{font-size:14px;color:var(--sub);}
.search-bar input{
  background:none;border:none;outline:none;font-size:14px;color:var(--text);flex:1;width:100%;
}
.search-bar input::placeholder{color:var(--sub);}

/* Platform list */
.platforms-section{padding:0 16px;}
.platforms-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:10px;}
.platform-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;background:var(--white);
  border-radius:14px;margin-bottom:8px;cursor:pointer;
  border:1px solid var(--border);
  transition:background .15s;
}
.platform-item:active{background:var(--light);}
.platform-icon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;}
.platform-icon svg{width:26px;height:26px;}

/* ── Brand icon badge ── */
.pf-icon-wrap{
  width:100%;height:100%;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;flex-shrink:0;
}
.pf-icon-wrap svg{width:22px;height:22px;display:block;}
.pf-icon-fallback{
  color:#fff;font-weight:700;font-size:15px;letter-spacing:0.5px;
  text-transform:uppercase;position:relative;z-index:1;
}
.pf-icon-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  padding:22%;box-sizing:border-box;
}

/* ── Country flag image (reliable cross-platform, unlike flag emoji) ── */
.flag-img{
  width:26px;height:19px;object-fit:cover;border-radius:3px;flex-shrink:0;
  box-shadow:0 0 0 1px rgba(0,0,0,0.08);
  vertical-align:middle;
}
.platform-info{flex:1;}
.platform-name{font-size:14px;font-weight:700;color:var(--text);}
.platform-from{font-size:12px;color:var(--sub);display:flex;align-items:center;gap:4px;margin-top:2px;}
.platform-from .mini-coin{width:12px;height:12px;}
.platform-star{
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;padding:5px;border:0;border-radius:50%;
  background:transparent;cursor:pointer;transition:transform .15s ease,background .15s ease;
}
.platform-star:active{transform:scale(.86);background:var(--light);}
.platform-star svg{width:20px;height:20px;stroke:#D1D5DB;fill:none;stroke-width:1.8;}
.platform-star.fav svg{stroke:var(--gold);fill:var(--gold);}

/* ───── ORDERS PAGE ───── */
.orders-header{padding:16px 18px 14px;text-align:center;}
.orders-header h2{font-size:18px;font-weight:700;color:var(--text);}
.order-tabs{display:flex;gap:8px;padding:0 16px 14px;overflow-x:auto;}
.order-tabs::-webkit-scrollbar{display:none;}
.tab{
  padding:8px 18px;border-radius:50px;font-size:13px;font-weight:600;
  cursor:pointer;white-space:nowrap;transition:all .2s;
  border:1.5px solid var(--border);background:var(--white);color:var(--sub);
}
.tab.active{background:var(--blue);border-color:var(--blue);color:white;}
.order-cards{padding:0 14px;display:flex;flex-direction:column;gap:10px;}
.order-card{
  background:var(--white);border-radius:14px;padding:13px 13px 11px;
  border:1px solid var(--border);cursor:pointer;
  transition:transform .15s;
}
.order-card:active{transform:scale(0.99);}
.oc-top{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.oc-icon{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.oc-icon.whatsapp{background:#E8F8EF;}
.oc-icon.truemoney{background:#FEF3C7;}
.oc-icon.tokopedia{background:#E8F8EF;}
.oc-icon.initials{background:#F3F4F6;}
.oc-icon svg{width:24px;height:24px;}
.oc-icon .initials-text{font-size:14px;font-weight:700;color:#6B7280;}
.oc-meta{flex:1;min-width:0;}
.oc-name{font-size:14px;font-weight:700;color:var(--text);}
.oc-sub{font-size:12px;color:var(--sub);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.oc-price{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:700;flex-shrink:0;}
.coin{width:13px;height:13px;}
.oc-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:9px;border-top:1px solid var(--light);}
.oc-date{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--sub);}
.oc-date svg{width:13px;height:13px;stroke:var(--sub);fill:none;stroke-width:2;}
.status-badge{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:3px 8px;border-radius:50px;}
.status-badge svg{width:13px;height:13px;fill:none;stroke-width:2.5;}
.status-badge.active{color:var(--blue);}
.status-badge.active svg{stroke:var(--blue);}
.status-badge.completed{color:var(--green);}
.status-badge.completed svg{stroke:var(--green);}
.status-badge.canceled{color:var(--red);}
.status-badge.canceled svg{stroke:var(--red);}
.status-badge.expired{color:var(--orange);}
.status-badge.expired svg{stroke:var(--orange);}

/* ───── COUNTRY/OPERATOR PAGE ───── */
.cop-header-inner{display:flex;align-items:center;gap:10px;flex:1;}
.cop-icon{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.cop-title{font-size:16px;font-weight:700;color:var(--text);}
.cop-sub{font-size:12px;color:var(--sub);margin-top:2px;}
.cop-search{margin:14px 16px;}
.cop-search .search-bar{background:#F3F4F6;border-radius:50px;}
.country-list{padding:0 14px;display:flex;flex-direction:column;gap:6px;}
.country-item{
  display:flex;align-items:center;gap:12px;
  padding:14px 14px;background:var(--white);border-radius:14px;
  cursor:pointer;border:1px solid var(--border);
  transition:background .15s;
}
.country-item:active{background:var(--light);}
.country-flag{font-size:26px;line-height:1;flex-shrink:0;}
.country-info{flex:1;}
.country-name{font-size:14px;font-weight:600;color:var(--text);}
.country-count{font-size:12px;color:var(--sub);margin-top:2px;display:flex;align-items:center;gap:4px;}
.country-count .mini-coin{width:12px;height:12px;}
.country-chevron svg{width:18px;height:18px;stroke:var(--border);fill:none;stroke-width:2.5;}

/* ───── OPERATOR BOTTOM SHEET ───── */
.sheet-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:490;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.sheet-overlay.show{opacity:1;pointer-events:all;}
.bottom-sheet{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%) translateY(100%);
  width:100%;max-width:430px;background:var(--white);border-radius:24px 24px 0 0;
  z-index:500;transition:transform .35s cubic-bezier(.32,.72,0,1);
  max-height:85vh;overflow-y:auto;
}
.bottom-sheet::-webkit-scrollbar{display:none;}
.bottom-sheet.show{transform:translateX(-50%) translateY(0);}
.sheet-handle{width:40px;height:4px;background:var(--border);border-radius:4px;margin:12px auto 16px;}
.sheet-header-row{display:flex;align-items:center;gap:10px;padding:0 16px 14px;border-bottom:1px solid var(--border);}
.sheet-header-simple{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.sheet-close-btn{width:32px;height:32px;border-radius:8px;background:var(--light);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .15s ease, transform .1s ease;}
.sheet-close-btn:hover{background:var(--border);}
.sheet-close-btn:active{transform:scale(0.92);}
.sheet-close-btn svg{width:14px;height:14px;stroke:var(--sub);fill:none;stroke-width:2.5;}
[data-theme="dark"] .sheet-close-btn{background:var(--light);}
[data-theme="dark"] .sheet-close-btn:hover{background:var(--border);}
.back-circle{
  width:30px;height:30px;border-radius:50%;background:var(--light);
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
}
.back-circle svg{width:16px;height:16px;stroke:var(--text);fill:none;stroke-width:2.5;}
.sheet-title{font-size:15px;font-weight:700;color:var(--text);}
.sheet-sub{font-size:12px;color:var(--sub);}
.operator-filter{
  padding:12px 14px 2px;
  border-bottom:1px solid var(--border);
}
.operator-filter-label{
  color:var(--sub);font-size:11px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;margin:0 2px 8px;
}
.operator-chips{
  display:flex;gap:8px;overflow-x:auto;padding:0 2px 10px;
  scrollbar-width:none;
}
.operator-chips::-webkit-scrollbar{display:none;}
.operator-chip{
  flex:0 0 auto;border:1px solid var(--border);border-radius:999px;
  padding:8px 13px;background:var(--light);color:var(--sub);
  font-family:inherit;font-size:12px;font-weight:600;
  cursor:pointer;white-space:nowrap;
}
.operator-chip.active{
  background:var(--blue);border-color:var(--blue);color:#fff;
}
.server-list{
  padding:14px 14px 22px;display:flex;flex-direction:column;gap:10px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.server-item{
  display:flex;align-items:center;gap:10px;
  min-height:66px;padding:11px 12px;
  background:var(--light);border-radius:15px;
  border:1px solid transparent;
}
.server-item.is-unavailable{opacity:.82;}
.srv-dot{width:10px;height:10px;border-radius:50%;background:var(--green);flex-shrink:0;box-shadow:0 0 0 3px rgba(34,197,94,.12);}
.server-item.is-unavailable .srv-dot{background:var(--red);box-shadow:0 0 0 3px rgba(239,68,68,.12);}
.srv-info{flex:1;}
.srv-name{font-size:14px;font-weight:700;color:var(--text);}
.srv-count{font-size:12px;color:var(--sub);margin-top:2px;}
.srv-price{display:flex;align-items:center;gap:4px;font-size:14px;font-weight:800;color:var(--text);white-space:nowrap;}
.buy-btn{
  background:var(--blue);color:white;border:none;
  padding:9px 16px;border-radius:12px;font-size:13px;font-weight:700;
  cursor:pointer;white-space:nowrap;
}
.buy-btn:active{opacity:0.85;}
.buy-btn:disabled{background:var(--border);color:var(--sub);cursor:not-allowed;opacity:.8;}
.catalog-empty{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:5px;padding:30px 18px;color:var(--sub);font-size:12px;
}
.catalog-empty strong{font-size:14px;color:var(--text);}
.catalog-empty span{max-width:250px;line-height:1.45;}
.catalog-empty-icon{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;margin-bottom:4px;
  background:var(--light);color:var(--sub);font-size:18px;font-weight:800;
}
[data-theme="dark"] .operator-filter{background:#172033;}
[data-theme="dark"] .server-item{background:#182235;border-color:#1D2A40;}
[data-theme="dark"] .buy-btn{background:#66A4FF;}

/* ───── ORDER MICRO-DISCLAIMER ───── */
.order-micro-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin: 12px 16px 18px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--sub);
  box-sizing: border-box;
}
.order-micro-disclaimer-icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  stroke: var(--blue);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-top: 2px;
  flex-shrink: 0;
}
.order-micro-disclaimer-content {
  flex: 1;
}
.order-micro-disclaimer-title {
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
  font-size: 11.5px;
  display: block;
}
.order-micro-disclaimer-text {
  color: var(--sub);
  font-size: 11px;
  margin: 0;
  line-height: 1.45;
}
.order-micro-disclaimer-text b {
  color: var(--text);
}
[data-theme="dark"] .order-micro-disclaimer {
  background: #182235;
  border-color: #1D2A40;
}
[data-theme="dark"] .order-micro-disclaimer-icon {
  stroke: #66A4FF;
}

/* ───── ORDER DETAIL PAGE ───── */
.detail-header{
  display:flex;align-items:center;padding:16px 18px;
  border-bottom:1px solid var(--border);
}
.detail-header .back-btn{
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--blue);
}
.detail-header .back-btn svg{width:22px;height:22px;stroke:var(--blue);fill:none;stroke-width:2.5;}
.detail-header h2{flex:1;text-align:center;font-size:17px;font-weight:700;color:var(--text);}
.detail-header .spacer{width:34px;}
.detail-body{padding:16px;}
.detail-service-card{
  background:var(--white);border-radius:16px;border:1px solid var(--border);
  padding:16px;margin-bottom:14px;
}
.dsc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.dsc-left{display:flex;align-items:center;gap:10px;}
.dsc-icon{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.dsc-icon.whatsapp{background:#E8F8EF;}
.dsc-icon.truemoney{background:#FEF3C7;}
.dsc-icon.tokopedia{background:#E8F8EF;}
.dsc-icon.initials{background:#F3F4F6;}
.dsc-service{font-size:16px;font-weight:700;color:var(--text);}
.dsc-country{font-size:12px;color:var(--sub);margin-top:2px;}
.dsc-right{text-align:right;}
.dsc-badge{font-size:12px;font-weight:600;padding:3px 12px;border-radius:50px;}
.dsc-badge.active{color:var(--blue);background:#EEF2FF;}
.dsc-badge.completed{color:var(--green);background:#F0FDF4;}
.dsc-badge.canceled{color:var(--red);background:#FEF2F2;}
.dsc-timer{font-size:18px;font-weight:800;color:var(--blue);margin-top:4px;}
.detail-field-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);margin-bottom:6px;}
.detail-field-val{font-size:17px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px;margin-bottom:14px;}
.detail-field-val.otp-green{color:var(--green);font-size:22px;letter-spacing:3px;}
.detail-field-val.otp-wait{color:var(--sub);font-size:15px;font-weight:400;}
.detail-field-val.dash{color:var(--sub);}
.otp-msg-box{background:#F0FDF4;border:1px solid #BBF7D0;border-radius:10px;padding:10px 12px;font-size:13px;color:#166534;line-height:1.5;margin-top:-8px;margin-bottom:14px;}
.detail-divider{height:1px;background:var(--border);margin:4px 0 14px;}
.detail-actions{display:flex;align-items:center;justify-content:space-around;padding:8px 0 4px;}
.det-btn{
  display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;
  font-size:12px;color:var(--sub);min-width:52px;
  transition:opacity .15s,transform .12s;
  -webkit-tap-highlight-color:transparent;user-select:none;
}
.det-btn svg{width:24px;height:24px;stroke:var(--sub);fill:none;stroke-width:1.8;transition:stroke .15s;}
.det-btn:active:not(.det-btn-disabled){transform:scale(0.84);opacity:.65;}
/* States */
.det-btn-disabled{opacity:0.3;cursor:default;pointer-events:none;}
.det-btn-done{color:var(--green);}
.det-btn-done svg{stroke:var(--green);}
.det-btn-cancel{color:var(--red);}
.det-btn-cancel svg{stroke:var(--red);}
.det-btn-resend{color:var(--blue);}
.det-btn-resend svg{stroke:var(--blue);}
.det-btn-replace{color:var(--orange);}
.det-btn-replace svg{stroke:var(--orange);}
.det-btn .btn-cd{font-size:10px;font-weight:700;font-family:monospace;letter-spacing:.04em;}
.reactivate-btn{
  display:block;width:100%;padding:15px;border-radius:14px;
  background:var(--blue);color:white;font-size:16px;font-weight:700;
  border:none;cursor:pointer;text-align:center;margin-bottom:14px;
  box-shadow:0 4px 14px rgba(76,126,255,.35);
}
.reactivate-btn:active{opacity:0.85;}
.detail-info-card{background:var(--white);border-radius:16px;border:1px solid var(--border);padding:16px;margin-bottom:14px;}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.info-cell label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);display:block;margin-bottom:4px;}
.info-cell .iv{font-size:14px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:5px;}
.info-cell .iv .coin{width:12px;height:12px;}
.messages-card{background:var(--white);border-radius:16px;border:1px solid var(--border);padding:16px;}
.msg-title{font-size:15px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:6px;color:var(--text);}
.msg-num{background:var(--blue);color:white;font-size:11px;font-weight:700;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.msg-bubble{background:#F8FAFC;border:1px solid var(--border);border-radius:10px;padding:10px 12px;}
.msg-time{font-size:11px;color:var(--sub);margin-bottom:3px;font-weight:500;}
.msg-text{font-size:13px;color:var(--text);line-height:1.5;}

/* ───── WALLET PAGE ───── */
.wallet-content{padding:16px 16px 0;}
/* Balance card */
.w-balance-card{
  background:linear-gradient(135deg,#5B8DFF,#3D6EE8);border-radius:16px;
  padding:16px 18px;display:flex;align-items:center;gap:12px;
  margin-bottom:20px;
}
.w-balance-card .wbc-icon{
  width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,0.2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.w-balance-card .wbc-icon svg{width:24px;height:24px;stroke:white;fill:none;stroke-width:2;}
.w-balance-card .wbc-info{flex:1;}
.w-balance-card .wbc-label{font-size:12px;color:rgba(255,255,255,0.8);margin-bottom:4px;}
.w-balance-card .wbc-amount{font-size:24px;font-weight:800;color:white;display:flex;align-items:center;gap:6px;}
.w-balance-card .wbc-coin{width:18px;height:18px;}
.w-topup-btn{
  background:white;border-radius:50px;padding:8px 16px;
  display:flex;align-items:center;gap:5px;cursor:pointer;
  font-size:13px;font-weight:700;color:var(--blue);white-space:nowrap;
  flex-shrink:0;
}
.w-topup-btn svg{width:14px;height:14px;stroke:var(--blue);fill:none;stroke-width:2;}
/* Action buttons */
.w-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:22px;}
.w-action-btn{
  background:var(--white);border:1px solid var(--border);border-radius:14px;
  padding:14px 8px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;
  cursor:pointer;transition:background .15s;
}
.w-action-btn:active{background:var(--light);}
.w-action-icon{
  width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
}
.w-action-icon.deposit{background:#DCFCE7;}
.w-action-icon.history{background:#DBEAFE;}
.w-action-icon.txns{background:#FEE2E2;}
.w-action-icon svg{width:20px;height:20px;fill:none;stroke-width:2;}
.w-action-icon.deposit svg{stroke:#22C55E;}
.w-action-icon.history svg{stroke:#3B82F6;}
.w-action-icon.txns svg{stroke:#EF4444;}
.w-action-label{font-size:12px;font-weight:600;color:var(--text);}
/* Recent activity */
.w-section-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.w-section-title{font-size:15px;font-weight:700;color:var(--text);}
.w-view-all{font-size:13px;font-weight:600;color:var(--blue);cursor:pointer;}
/* Activity items */
.act-item{
  display:flex;align-items:center;gap:12px;padding:13px 0;
  border-bottom:1px solid var(--light);
}
.act-item:last-child{border-bottom:none;}
.act-icon{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.act-icon.debit{background:#FEE2E2;}
.act-icon.credit{background:#DCFCE7;}
.act-icon svg{width:18px;height:18px;fill:none;stroke-width:2.5;}
.act-icon.debit svg{stroke:#EF4444;}
.act-icon.credit svg{stroke:#22C55E;}
.act-info{flex:1;}
.act-name{font-size:13px;font-weight:700;color:var(--text);}
.act-date{font-size:11px;color:var(--sub);margin-top:2px;}
.act-amount{font-size:14px;font-weight:700;display:flex;align-items:center;gap:4px;}
.act-amount.debit{color:var(--red);}
.act-amount.credit{color:var(--gold);}
.act-amount .mini-coin{width:11px;height:11px;}

/* ───── DEPOSIT PAGE ───── */
.dep-content{padding:16px;}
.dep-new-card{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:16px;margin-bottom:20px;}
.dep-new-title{font-size:15px;font-weight:700;margin-bottom:14px;color:var(--text);}

/* Payment method label */
.dep-method-label{font-size:12px;color:var(--sub);font-weight:500;margin-bottom:8px;}

/* Payment method selector card */
.dep-method-card{
  display:flex;align-items:center;gap:12px;
  border:1.5px solid var(--border);border-radius:14px;
  padding:13px 14px;margin-bottom:14px;cursor:pointer;
  background:var(--white);transition:border-color .15s,background .15s;
  position:relative;
}
.dep-method-card.dep-method-selected{
  border-color:#3B82F6;background:#F0F6FF;
}

/* Radio dot */
.dep-method-radio{
  width:18px;height:18px;border-radius:50%;border:2px solid var(--border);
  flex-shrink:0;position:relative;transition:border-color .15s;
}
.dep-method-selected .dep-method-radio{border-color:#3B82F6;}
.dep-method-selected .dep-method-radio::after{
  content:'';position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:9px;height:9px;border-radius:50%;background:#3B82F6;
}

/* QRIS logo box */
.dep-method-logo-wrap{
  width:44px;height:32px;border-radius:7px;background:#fff;
  border:1px solid #E5E7EB;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;overflow:hidden;padding:3px 5px;
}
.dep-method-logo{width:100%;height:100%;object-fit:contain;filter:invert(40%) sepia(80%) saturate(500%) hue-rotate(90deg) brightness(0.75);}

.dep-method-info{flex:1;}
.dep-method-name{font-size:14px;font-weight:700;color:var(--text);}
.dep-method-sub{
  display:flex;align-items:center;gap:4px;
  font-size:11px;color:var(--sub);margin-top:3px;
}
.dep-method-sub svg{stroke:var(--sub);flex-shrink:0;}

.dep-currency-badge{font-size:11px;font-weight:700;color:var(--blue);background:#DBEAFE;padding:3px 8px;border-radius:50px;flex-shrink:0;margin-left:auto;}

.dep-amount-row{
  display:flex;align-items:center;gap:10px;padding:13px 14px;
  border:1.5px solid var(--border);border-radius:12px;margin-bottom:10px;
}
.dep-amount-coin{width:24px;height:24px;flex-shrink:0;}
.dep-amount-input{flex:1;border:none;outline:none;font-size:15px;font-weight:500;color:var(--text);background:transparent;}
.dep-amount-input::placeholder{color:#D1D5DB;}

/* Quick amount buttons */
.dep-quick-amounts{display:flex;gap:8px;margin-bottom:14px;}
.dep-quick-btn{
  flex:1;padding:8px 0;border:1.5px solid var(--border);border-radius:8px;
  background:var(--white);color:var(--sub);font-size:13px;font-weight:600;
  cursor:pointer;transition:all .15s;
}
.dep-quick-btn:active,.dep-quick-btn.active{
  border-color:var(--blue);background:#EFF6FF;color:var(--blue);
}

.dep-create-btn{
  display:block;width:100%;padding:15px;border:none;border-radius:12px;
  background:var(--blue);color:white;font-size:16px;font-weight:700;
  cursor:pointer;text-align:center;transition:opacity .15s;
}
.dep-create-btn:active{opacity:0.85;}

/* Fee preview summary box */
.dep-fee-preview-box{
  display:flex;flex-direction:column;gap:4px;
  background:var(--bg,#f0f2f5);border-radius:10px;
  padding:10px 12px;margin:8px 0 0;font-size:12px;
}
[data-theme="dark"] .dep-fee-preview-box{ background:var(--light,#1e2330); }

.dep-fp-row{
  display:flex;justify-content:space-between;
  color:var(--sub);
}
.dep-fp-fee-val{ color:#F59E0B; }

.dep-fp-total{
  font-weight:700;color:var(--text);
  border-top:1px solid var(--border);
  padding-top:6px;margin-top:2px;
}
.dep-fp-net-row{
  color:var(--sub);font-size:11px;
}
/* Deposit history list */
.dep-history-title{font-size:15px;font-weight:700;margin-bottom:12px;color:var(--text);}
.dep-history-item{
  background:var(--white);border:1px solid var(--border);border-radius:14px;
  padding:13px 13px 11px;margin-bottom:10px;cursor:pointer;
}
.dep-history-item:active{background:var(--light);}
.dhi-top{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.dhi-icon{
  width:42px;height:42px;border-radius:50%;background:#DCFCE7;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.dhi-icon.crypto{background:#FEF3C7;}
.dhi-icon svg{width:22px;height:22px;fill:none;stroke-width:2;}
.dhi-icon.qris svg{stroke:#22C55E;}
.dhi-icon.crypto svg{stroke:#F59E0B;}
.dhi-info{flex:1;}
.dhi-name{font-size:14px;font-weight:700;color:var(--text);}
.dhi-id{font-size:12px;color:var(--sub);margin-top:2px;}
.dhi-price{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:700;}
.dhi-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:9px;border-top:1px solid var(--light);}
.dhi-date{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--sub);}
.dhi-date svg{width:13px;height:13px;stroke:var(--sub);fill:none;stroke-width:2;}
.dhi-status{font-size:12px;font-weight:600;}
.dhi-status.credited{color:var(--green);}
.dhi-status.expired{color:var(--orange);}

/* ───── TRANSACTIONS PAGE ───── */
.txn-content{padding:0 14px;}
.txn-tabs{display:flex;gap:8px;padding:14px 14px 10px;}
.txn-tab{padding:8px 18px;border-radius:50px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;border:1.5px solid var(--border);background:var(--white);color:var(--sub);transition:all .2s;}
.txn-tab.active{background:var(--blue);border-color:var(--blue);color:white;}
.txn-item{
  background:var(--white);border:1px solid var(--border);border-radius:14px;
  padding:13px 13px 11px;margin-bottom:10px;
}
.txi-top{display:flex;align-items:center;gap:10px;margin-bottom:9px;}
.txi-icon{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.txi-icon.debit{background:#FEE2E2;}
.txi-icon.credit{background:#DCFCE7;}
.txi-icon svg{width:20px;height:20px;fill:none;stroke-width:2.5;}
.txi-icon.debit svg{stroke:#EF4444;}
.txi-icon.credit svg{stroke:#22C55E;}
.txi-info{flex:1;}
.txi-name{font-size:14px;font-weight:700;color:var(--text);}
.txi-sub{font-size:12px;color:var(--sub);margin-top:2px;}
.txi-amount{font-size:14px;font-weight:700;display:flex;align-items:center;gap:4px;}
.txi-amount.debit{color:var(--red);}
.txi-amount.credit{color:var(--gold);}
.txi-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:9px;border-top:1px solid var(--light);}
.txi-date{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--sub);}
.txi-date svg{width:13px;height:13px;stroke:var(--sub);fill:none;stroke-width:2;}
.txi-balance{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--sub);}
.txi-balance svg{width:13px;height:13px;stroke:var(--sub);fill:none;stroke-width:2;}

/* ───── DEPOSIT DETAIL PAGE ───── */
.dd-content{padding:16px;}
.dd-amount-card{
  background:var(--white);border:1px solid var(--border);border-radius:14px;
  padding:16px 18px;display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.dd-amount-val{font-size:22px;font-weight:800;display:flex;align-items:center;gap:8px;}
.dd-amount-val .coin{width:18px;height:18px;}
.dd-credit-badge{font-size:12px;font-weight:600;color:var(--green);}
.dd-info-card{background:var(--white);border:1px solid var(--border);border-radius:14px;overflow:hidden;}
/* ── Deposit Detail QR Block ── */
.dd-qr-block{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:20px 16px 16px;margin-bottom:12px;display:flex;flex-direction:column;align-items:center;}
.dd-qr-img-wrap{position:relative;width:240px;height:240px;display:flex;align-items:center;justify-content:center;background:#f9fafb;border-radius:12px;overflow:hidden;margin-bottom:14px;}
.dd-qr-img-wrap img{width:240px;height:240px;display:block;}
.dd-qr-spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;color:#9CA3AF;}
.dd-qr-actions{display:flex;gap:10px;width:100%;margin-bottom:0;}
.dd-qr-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 0;border-radius:20px;border:1.5px solid var(--border);background:var(--white);font-size:13px;font-weight:600;color:var(--text);cursor:pointer;}
.dd-qr-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.dd-check-btn{width:100%;padding:14px;border-radius:14px;border:1.5px solid var(--primary,#4C7EFF);background:var(--white);color:var(--primary,#4C7EFF);font-size:15px;font-weight:700;cursor:pointer;margin-bottom:12px;}
.dd-check-btn:active{background:#EEF2FF;}
.dd-row{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--light);}
.dd-row:last-child{border-bottom:none;}
.dd-row-label{font-size:13px;color:var(--sub);}
.dd-row-val{font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px;}

/* ── Multi-Channel Deposit Selector Styles ── */
.dep-cat-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:12px;scrollbar-width:none;}
.dep-cat-tabs::-webkit-scrollbar{display:none;}
.dep-cat-tab{padding:8px 14px;border-radius:20px;border:1.5px solid var(--border);background:var(--white);color:var(--sub);font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .15s;}
.dep-cat-tab.active{background:#3B82F6;color:white;border-color:#3B82F6;}

.dep-channel-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(130px, 1fr));gap:8px;margin-bottom:14px;}
.dep-channel-card{background:var(--white);border:1.5px solid var(--border);border-radius:12px;padding:10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;transition:all .15s;}
.dep-channel-card:active,.dep-channel-card.selected{border-color:#3B82F6;background:#F0F6FF;}
.dep-channel-icon{width:36px;height:36px;border-radius:8px;background:#f9fafb;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:2px;}
.dep-channel-icon img{width:100%;height:100%;object-fit:contain;}
.dep-channel-name{font-size:12px;font-weight:700;color:var(--text);line-height:1.2;}
.dep-channel-min{font-size:10px;color:var(--sub);}

/* ── Crypto Channel Card & Rates Styles ── */
.dep-crypto-channel-card{
  grid-column:1 / -1;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  text-align:left !important;
  padding:14px 16px !important;
  gap:14px !important;
  border-radius:16px !important;
  border:1.5px solid #3B82F6 !important;
  background:#F0F7FF !important;
  cursor:pointer;
  position:relative;
  transition:all .15s ease;
  box-shadow:0 2px 8px rgba(59,130,246,0.08);
}
.dep-crypto-icon{
  width:46px;
  height:46px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
  background:#0F172A;
  padding:2px;
}
.dep-crypto-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:12px;
}
.dep-crypto-info{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.dep-crypto-title-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.dep-crypto-title{
  font-size:14.5px;
  font-weight:700;
  color:var(--text);
  letter-spacing:-0.2px;
}
.dep-crypto-badge{
  background:rgba(16,185,129,0.12);
  color:#059669;
  font-weight:700;
  font-size:10.5px;
  padding:2.5px 8px;
  border-radius:6px;
  letter-spacing:0.3px;
  white-space:nowrap;
}
.dep-crypto-subtitle{
  font-size:11.5px;
  color:var(--sub);
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.dep-crypto-tokens{
  font-weight:600;
  color:#2563EB;
}
.dep-crypto-sep{
  opacity:0.4;
}
.dep-crypto-min{
  font-weight:500;
}
.dep-crypto-check{
  width:22px;
  height:22px;
  border-radius:50%;
  border:2px solid #3B82F6;
  background:#3B82F6;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.dep-crypto-check svg{
  width:13px;
  height:13px;
  stroke:#ffffff;
  fill:none;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.crypto-rates-card{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:12px 14px;margin-bottom:14px;}
.crypto-rates-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;}
.crypto-rates-header-left{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--sub);}
.crypto-info-icon{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0;}
.crypto-chevron-icon{width:16px;height:16px;stroke:var(--sub);fill:none;stroke-width:2;transition:transform .2s ease;}
.crypto-rates-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;padding-top:10px;margin-top:10px;border-top:1px solid var(--border);}
.crypto-rate-item{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--sub);font-weight:500;}
.crypto-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}

[data-theme="dark"] .crypto-rates-card{background:#172134;border-color:rgba(255,255,255,0.08);}
[data-theme="dark"] .crypto-rates-grid{border-top-color:rgba(255,255,255,0.08);}
[data-theme="dark"] .dep-crypto-channel-card{background:#131e32 !important;border-color:#3B82F6 !important;}
[data-theme="dark"] .dep-crypto-badge{background:rgba(16,185,129,0.22);color:#34D399;}
[data-theme="dark"] .dep-crypto-tokens{color:#60A5FA;}

/* ── Crypto Detail Card Styles ── */
.dd-crypto-card{background:linear-gradient(135deg,#064e3b,#047857);color:white;border-radius:16px;padding:18px;margin-bottom:14px;box-shadow:0 4px 14px rgba(4,120,87,0.25);}
.dd-crypto-top{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.dd-crypto-badge-icon{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.dd-crypto-badge-icon img{width:32px;height:32px;}
.dd-crypto-meta{flex:1;}
.dd-crypto-sub{font-size:11px;opacity:0.85;text-transform:uppercase;letter-spacing:0.5px;font-weight:700;}
.dd-crypto-val{font-size:22px;font-weight:800;letter-spacing:-0.3px;margin:2px 0;}
.dd-crypto-equiv{font-size:11px;opacity:0.9;}
.dd-crypto-actions{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
.dd-crypto-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:12px;font-size:13px;font-weight:700;text-decoration:none;cursor:pointer;transition:opacity .15s;}
.dd-crypto-btn.tg{background:#ffffff;color:#065f46;}
.dd-crypto-btn.web{background:rgba(255,255,255,0.2);color:#ffffff;border:1px solid rgba(255,255,255,0.3);}
.dd-crypto-btn:active{opacity:0.85;}
.dd-crypto-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;}
.dd-crypto-note{font-size:11px;opacity:0.85;line-height:1.45;border-top:1px solid rgba(255,255,255,0.15);padding-top:10px;}
.dhi-icon.crypto{background:rgba(38,161,123,0.15);color:#26a17b;}

.dep-phone-field{margin-bottom:12px;}
.dep-phone-input{width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:12px;font-size:14px;background:var(--white);color:var(--text);outline:none;box-sizing:border-box;}

/* ── VA & Retail Detail Card Styles ── */
.dd-va-card{background:linear-gradient(135deg,#1E3A8A,#2563EB);color:white;border-radius:16px;padding:18px;margin-bottom:14px;box-shadow:0 4px 14px rgba(37,99,235,0.25);}
.dd-va-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.dd-va-bank{font-size:14px;font-weight:700;letter-spacing:0.5px;}
.dd-va-badge{font-size:10px;font-weight:800;background:rgba(255,255,255,0.2);padding:2px 8px;border-radius:20px;}
.dd-va-num-wrap{background:rgba(0,0,0,0.25);border-radius:10px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;}
.dd-va-num{font-family:monospace;font-size:20px;font-weight:800;letter-spacing:2px;}
.dd-copy-btn{background:white;color:#1E3A8A;border:none;border-radius:8px;padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer;}
.dd-copy-btn:active{opacity:0.85;}

.dd-retail-card{background:linear-gradient(135deg,#B91C1C,#DC2626);color:white;border-radius:16px;padding:18px;margin-bottom:14px;box-shadow:0 4px 14px rgba(220,38,38,0.25);}
.dd-retail-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.dd-retail-name{font-size:14px;font-weight:700;letter-spacing:0.5px;}
.dd-retail-code-wrap{background:rgba(0,0,0,0.25);border-radius:10px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;}
.dd-retail-code{font-family:monospace;font-size:20px;font-weight:800;letter-spacing:2px;}

.dd-guide-card{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:14px;}
.dd-guide-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.dd-guide-list{margin:0;padding-left:18px;font-size:12px;color:var(--sub);line-height:1.6;}

/* ───── PROFILE PAGE ───── */
.pf-scroll{padding:0 0 20px;}
.pf-balance-card{margin:14px 14px 0;border-radius:18px;background:linear-gradient(135deg,#3B82F6,#2563EB);padding:18px 18px 14px;color:white;}
.pf-bc-top{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.pf-bc-avatar{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:white;}
.pf-bc-info{flex:1;}
.pf-bc-amount{display:flex;align-items:center;gap:6px;font-size:22px;font-weight:800;line-height:1.1;}
.pf-bc-email{font-size:12px;opacity:.85;margin-top:1px;}
.pf-bc-arrow{opacity:.7;}
.pf-bc-arrow svg{width:18px;height:18px;stroke:white;fill:none;stroke-width:2;}
.pf-bc-coin{width:16px;height:16px;}
.pf-bc-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid rgba(255,255,255,.2);font-size:12px;opacity:.9;}
.pf-bc-stat{display:flex;align-items:center;gap:5px;}
.pf-bc-stat svg{width:13px;height:13px;stroke:white;fill:none;stroke-width:2;}
.pf-bc-verif-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.18);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.28);font-size:11px;font-weight:600;color:white;cursor:pointer;transition:background .15s,transform .1s;}
.pf-bc-verif-chip:active{background:rgba(255,255,255,.28);transform:scale(.97);}
.pf-bc-verif-chip svg{width:12px;height:12px;stroke:#86EFAC;fill:none;stroke-width:2.5;}
.pf-card-verif-tag{background:rgba(34,197,94,.35);color:#BBF7D0;font-size:9.5px;font-weight:700;padding:1px 5px;border-radius:4px;letter-spacing:.02em;text-transform:uppercase;}
.pf-section-label{font-size:13px;font-weight:700;color:var(--text);padding:18px 14px 8px;}
.pf-group{background:var(--white);border-radius:16px;margin:0 14px 4px;border:1px solid var(--border);overflow:hidden;}
.pf-item{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;position:relative;min-height:50px;-webkit-tap-highlight-color:transparent;}
.pf-item:not(:last-child)::after{content:'';position:absolute;bottom:0;left:60px;right:0;height:1px;background:var(--border);}
.pf-item:active{background:var(--light);}
.pf-item-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.pf-item-icon svg{width:17px;height:17px;fill:none;stroke-width:2;}
.pf-item-body{flex:1;display:flex;align-items:center;min-width:0;}
.pf-item-name{font-size:14px;font-weight:500;color:var(--text);line-height:1.2;}
.pf-item-sub{font-size:11.5px;color:var(--sub);margin-top:1px;}
.pf-item-right{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--sub);margin-left:auto;flex-shrink:0;}
.pf-item-right svg{width:15px;height:15px;stroke:var(--sub, #94A3B8);fill:none;stroke-width:2.2;}
/* Toggle */
.pf-toggle{width:44px;height:24px;border-radius:12px;background:#D1D5DB;position:relative;cursor:pointer;transition:background .2s;flex-shrink:0;}
.pf-toggle.on{background:#3B82F6;}
.pf-toggle::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:white;transition:transform .2s;box-shadow:0 1px 4px rgba(0,0,0,.2);}
.pf-toggle.on::after{transform:translateX(20px);}
/* Sign out btn */
.pf-signout-btn{margin:16px 14px;padding:15px;border-radius:16px;border:1.5px solid #FECACA;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;background:white;}
.pf-signout-btn:active{background:#FEF2F2;}
.pf-signout-btn svg{width:18px;height:18px;stroke:#EF4444;fill:none;stroke-width:2;}
.pf-signout-btn span{font-size:14px;font-weight:600;color:#EF4444;}

/* ───── THEME BOTTOM SHEET ───── */
.theme-sheet{position:fixed;bottom:0;left:50%;transform:translateX(-50%) translateY(100%);width:100%;max-width:430px;background:var(--sheet-bg);border-radius:24px 24px 0 0;z-index:500;padding:12px 16px 40px;transition:transform .3s cubic-bezier(.4,0,.2,1);}
.theme-sheet.open{transform:translateX(-50%) translateY(0);}
.theme-sheet-title{font-size:17px;font-weight:700;margin-bottom:3px;color:var(--text);}
.theme-sheet-sub{font-size:13px;color:var(--sub);margin-bottom:0;}
.theme-option{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;border:1px solid var(--border);margin-bottom:8px;cursor:pointer;background:var(--light);}
.theme-option.selected{background:#EFF6FF;border-color:#93C5FD;}
.theme-option-icon{width:36px;height:36px;border-radius:10px;background:#DBEAFE;display:flex;align-items:center;justify-content:center;}
.theme-option-icon svg{width:18px;height:18px;stroke:#3B82F6;fill:none;stroke-width:2;}
.theme-option-info{flex:1;}
.theme-option-name{font-size:14px;font-weight:600;color:#1D4ED8;}
.theme-option-sub{font-size:12px;color:var(--sub);}
.theme-option:not(.selected) .theme-option-name{color:var(--text);}
.theme-check{width:18px;height:18px;}
.theme-check svg{width:18px;height:18px;stroke:#3B82F6;fill:none;stroke-width:2.5;}

/* ───── SOUND & NOTIFICATION SETTINGS SHEET ───── */
.sound-sheet{position:fixed;bottom:0;left:50%;transform:translateX(-50%) translateY(100%);width:100%;max-width:430px;background:var(--sheet-bg);border-radius:24px 24px 0 0;z-index:500;padding:12px 16px 36px;transition:transform .3s cubic-bezier(.4,0,.2,1);max-height:88vh;overflow-y:auto;}
.sound-sheet.open{transform:translateX(-50%) translateY(0);}
.sound-card{background:var(--light);border:1px solid var(--border);border-radius:16px;padding:14px;margin-bottom:12px;}
.sound-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.sound-row-title{font-size:14px;font-weight:700;color:var(--text);}
.sound-row-sub{font-size:12px;color:var(--sub);margin-top:2px;}

/* Volume Slider */
.sound-vol-wrap{display:flex;align-items:center;gap:12px;margin-top:10px;}
.sound-vol-icon{color:var(--sub);display:flex;align-items:center;}
.sound-vol-icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;}
.sound-vol-slider{flex:1;-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;background:var(--border);outline:none;}
.sound-vol-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#3B82F6;cursor:pointer;box-shadow:0 2px 6px rgba(59,130,246,0.4);}
.sound-vol-val{font-size:12px;font-weight:700;color:var(--text);min-width:36px;text-align:right;}

/* Presets */
.sound-preset-list{display:flex;flex-direction:column;gap:8px;margin-top:8px;}
.sound-preset-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--border);cursor:pointer;background:var(--white);transition:all .15s;}
.sound-preset-item:hover{border-color:#93C5FD;}
.sound-preset-item.selected{border-color:#3B82F6;background:#EFF6FF;}
.sound-preset-radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;}
.sound-preset-item.selected .sound-preset-radio{border-color:#3B82F6;}
.sound-preset-item.selected .sound-preset-radio::after{content:'';width:8px;height:8px;border-radius:50%;background:#3B82F6;}
.sound-preset-info{flex:1;min-width:0;}
.sound-preset-name{font-size:13.5px;font-weight:700;color:var(--text);}
.sound-preset-item.selected .sound-preset-name{color:#1D4ED8;}
.sound-preset-desc{font-size:11.5px;color:var(--sub);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sound-play-btn{width:32px;height:32px;border-radius:50%;background:var(--light);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--blue);flex-shrink:0;transition:all .15s;}
.sound-play-btn:active{transform:scale(0.9);}
.sound-play-btn svg{width:14px;height:14px;fill:currentColor;}

/* Custom Audio Box */
.sound-custom-box{margin-top:10px;border:1.5px dashed var(--border);border-radius:14px;padding:14px;background:var(--white);}
.sound-custom-empty{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.sound-custom-btn{padding:8px 14px;border-radius:10px;background:#3B82F6;color:white;font-size:12px;font-weight:700;border:none;cursor:pointer;}
.sound-custom-has-file{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.sound-custom-name{font-size:12.5px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;}
.sound-custom-del{padding:6px 10px;border-radius:8px;background:#FEE2E2;color:#EF4444;border:none;font-size:11.5px;font-weight:700;cursor:pointer;}

/* Event Checkboxes */
.sound-ev-list{display:flex;flex-direction:column;gap:10px;margin-top:10px;}
.sound-ev-item{display:flex;align-items:center;justify-content:space-between;cursor:pointer;}
.sound-ev-label{font-size:13px;font-weight:600;color:var(--text);}
.sound-ev-sub{font-size:11px;color:var(--sub);}
.sound-checkbox{width:18px;height:18px;accent-color:#3B82F6;cursor:pointer;}

/* Dark Mode Overrides */
[data-theme="dark"] .sound-sheet{background:var(--sheet-bg);}
[data-theme="dark"] .sound-card{background:var(--light);border-color:var(--border);}
[data-theme="dark"] .sound-preset-item{background:var(--input-bg);border-color:var(--border);}
[data-theme="dark"] .sound-preset-item.selected{background:#1E3A5F;border-color:#3B82F6;}
[data-theme="dark"] .sound-preset-item.selected .sound-preset-name{color:#60A5FA;}
[data-theme="dark"] .sound-play-btn{background:#1E293B;color:#60A5FA;}
[data-theme="dark"] .sound-custom-box{background:var(--input-bg);border-color:var(--border);}
[data-theme="dark"] .sound-vol-slider{background:var(--border);}

/* ───── SUPPORT PAGE ───── */
.sup-header{text-align:center;padding:18px 16px 8px;font-size:17px;font-weight:700;color:var(--text);}
.sup-tabs{display:flex;gap:8px;padding:6px 14px 10px;}
.sup-tab{padding:7px 16px;border-radius:20px;font-size:13px;font-weight:500;cursor:pointer;background:var(--light);color:var(--sub);border:1.5px solid var(--border);}
.sup-tab.active{background:#3B82F6;color:white;border-color:#3B82F6;}
.sup-ticket{background:white;border-radius:14px;border:1px solid var(--border);margin:0 14px 10px;padding:14px;}
.sup-ticket-top{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.sup-ticket-icon{width:36px;height:36px;border-radius:10px;background:#FEF3C7;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sup-ticket-icon svg{width:17px;height:17px;stroke:#F59E0B;fill:none;stroke-width:2;}
.sup-ticket-name{flex:1;font-size:14px;font-weight:600;color:var(--text);}
.sup-ticket-id{font-size:12px;color:var(--sub);}
.sup-ticket-category{font-size:12px;color:var(--sub);margin-top:1px;}
.sup-ticket-bottom{display:flex;align-items:center;justify-content:space-between;}
.sup-ticket-date{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--sub);}
.sup-ticket-date svg{width:13px;height:13px;stroke:var(--sub);fill:none;stroke-width:2;}
.sup-status-closed{font-size:12px;color:#F59E0B;display:flex;align-items:center;gap:3px;}
.sup-status-closed svg{width:13px;height:13px;stroke:#F59E0B;fill:none;stroke-width:2;}
.sup-status-active{font-size:12px;color:#3B82F6;display:flex;align-items:center;gap:3px;}
.sup-status-resolved{font-size:12px;color:#10B981;display:flex;align-items:center;gap:3px;}
.sup-fab{position:absolute;bottom:80px;right:16px;width:50px;height:50px;border-radius:50%;background:#3B82F6;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(59,130,246,.4);cursor:pointer;z-index:50;transition:transform 0.15s ease, background 0.15s ease;}
.sup-fab:active{transform:scale(0.92);}
.sup-fab svg{width:24px;height:24px;stroke:white;fill:none;stroke-width:2.5;}

/* ───── NEW TICKET PAGE ───── */
.nt-content{padding:12px 14px 24px;}
.nt-section-label{font-size:12px;color:var(--sub);font-weight:500;margin-bottom:8px;margin-top:4px;}
.nt-cat-option{display:flex;align-items:center;gap:12px;padding:13px 14px;background:white;border-radius:14px;border:1.5px solid var(--border);margin-bottom:8px;cursor:pointer;}
.nt-cat-option.selected{border-color:#3B82F6;background:#EFF6FF;}
.nt-cat-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;}
.nt-cat-icon svg{width:17px;height:17px;fill:none;stroke-width:2;}
.nt-cat-name{flex:1;font-size:14px;font-weight:500;color:var(--text);}
.nt-radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.nt-radio.checked{border-color:#3B82F6;background:#3B82F6;}
.nt-radio.checked::after{content:'';width:6px;height:6px;border-radius:50%;background:white;}
.nt-label-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;margin-top:14px;}
.nt-label{font-size:12px;color:var(--sub);}
.nt-counter{font-size:12px;color:var(--sub);}
.nt-input{width:100%;padding:12px 14px;border-radius:12px;border:1.5px solid var(--border);font-size:14px;background:white;box-sizing:border-box;outline:none;color:var(--text);}
.nt-input:focus{border-color:#93C5FD;}
.nt-textarea{width:100%;padding:12px 14px;border-radius:12px;border:1.5px solid var(--border);font-size:14px;background:white;box-sizing:border-box;outline:none;resize:none;min-height:130px;color:var(--text);font-family:inherit;}
.nt-textarea:focus{border-color:#93C5FD;}
.nt-submit{width:100%;padding:15px;border-radius:16px;background:#93C5FD;color:white;font-size:15px;font-weight:600;border:none;cursor:pointer;margin-top:20px;transition:background .2s;}
.nt-submit.active{background:#3B82F6;}
.nt-submit.active:active{background:#2563EB;}

/* ───── NOTIFICATIONS PAGE ───── */
.notif-page-header{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 4px;}
.notif-page-back{width:34px;height:34px;border-radius:50%;background:var(--light);display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid var(--border);}
.notif-page-back svg{width:17px;height:17px;stroke:var(--text);fill:none;stroke-width:2.5;}
.notif-mark-all{font-size:14px;color:var(--blue);font-weight:500;cursor:pointer;}
.notif-page-title{font-size:22px;font-weight:800;padding:10px 16px 14px;color:var(--text);}
.notif-card{background:white;border:1px solid var(--border);border-radius:14px;margin:0 14px 10px;overflow:hidden;}
.notif-card-top{display:flex;align-items:flex-start;gap:12px;padding:14px 14px 10px;}
.notif-card-icon{width:38px;height:38px;border-radius:50%;background:#EFF6FF;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.notif-card-icon svg{width:18px;height:18px;stroke:#93C5FD;fill:none;stroke-width:2;}
.notif-card-body{flex:1;}
.notif-card-title{font-size:14px;font-weight:700;color:var(--text);line-height:1.3;}
.notif-card-sub{font-size:12.5px;color:var(--sub);margin-top:2px;display:flex;align-items:center;gap:4px;}
.notif-card-chev{width:16px;height:16px;flex-shrink:0;margin-top:2px;}
.notif-card-chev svg{width:16px;height:16px;stroke:#CBD5E1;fill:none;stroke-width:2.5;}
.notif-card-bottom{display:flex;align-items:center;justify-content:space-between;padding:6px 14px 10px;border-top:1px solid var(--border);}
.notif-card-time{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--sub);}
.notif-card-time svg{width:13px;height:13px;stroke:var(--sub);fill:none;stroke-width:2;}
.notif-new{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--blue);font-weight:500;}
.notif-new-dot{width:7px;height:7px;border-radius:50%;background:var(--blue);flex-shrink:0;}
.notif-read .notif-card-title{font-weight:500;color:var(--sub);}
.notif-read .notif-new{display:none;}

/* ───── AUTH PAGES ───── */
.auth-page{background:var(--auth-bg);display:none;flex-direction:column;flex:1;align-items:center;justify-content:center;padding:24px 20px;position:relative;}
.auth-page.active{display:flex;}
.auth-back{position:absolute;top:20px;left:16px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid var(--border);}
.auth-back svg{width:17px;height:17px;stroke:var(--text);fill:none;stroke-width:2.5;}
.auth-card{background:white;border-radius:24px;padding:32px 24px 28px;width:100%;max-width:360px;box-shadow:0 4px 24px rgba(0,0,0,.07);}
/* Auth brand (logo + name above title) */
.auth-brand{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:18px;}
.auth-logo{width:64px;height:64px;object-fit:contain;border-radius:18px;display:block;}
.auth-brand-name{font-size:18px;font-weight:900;color:var(--blue);letter-spacing:.01em;}
.auth-title{font-size:22px;font-weight:800;color:var(--text);text-align:center;margin-bottom:6px;}
.auth-sub{font-size:13px;color:var(--sub);text-align:center;margin-bottom:24px;}
.auth-input-wrap{position:relative;margin-bottom:12px;}
.auth-input{width:100%;padding:13px 42px 13px 14px;border-radius:12px;border:1.5px solid var(--border);font-size:14px;color:var(--text);outline:none;background:white;box-sizing:border-box;font-family:inherit;}
.auth-input:focus{border-color:#93C5FD;}
.auth-input::placeholder{color:#9CA3AF;}
.auth-eye{position:absolute;right:13px;top:50%;transform:translateY(-50%);cursor:pointer;color:#9CA3AF;}
.auth-eye svg{width:18px;height:18px;stroke:#9CA3AF;fill:none;stroke-width:2;}
.auth-hint{font-size:11.5px;color:var(--sub);margin:-4px 0 10px 2px;}
.auth-forgot{font-size:13px;color:var(--blue);cursor:pointer;margin-bottom:16px;display:inline-block;}
.auth-btn{width:100%;padding:14px;border-radius:14px;background:var(--blue);color:white;font-size:15px;font-weight:700;border:none;cursor:pointer;margin-top:4px;transition:background .15s;}
.auth-btn:active{background:#3B6FEF;}
.auth-btn:disabled{background:#93C5FD;cursor:default;}
.auth-divider{display:flex;align-items:center;gap:10px;margin:18px 0;color:var(--sub);font-size:13px;}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border);}
.auth-google-btn{width:100%;padding:13px;border-radius:14px;border:1.5px solid var(--border);background:white;display:flex;align-items:center;justify-content:center;gap:10px;font-size:14px;font-weight:500;color:var(--text);cursor:pointer;}
.auth-google-btn:active{background:var(--light);}
.auth-footer{text-align:center;margin-top:20px;font-size:13px;color:var(--sub);}
.auth-footer a{color:var(--blue);font-weight:600;cursor:pointer;text-decoration:none;}
.auth-check-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:16px;margin-top:4px;user-select:none;cursor:pointer;}
.auth-check-box{width:18px;height:18px;min-width:18px;border-radius:5px;border:2px solid var(--border);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;margin-top:2px;transition:all .18s ease;}
.auth-check-box.checked{border-color:var(--blue);background:var(--blue);}
.auth-check-box svg{width:11px;height:11px;stroke:white;fill:none;stroke-width:3;opacity:0;transform:scale(0.7);transition:all .18s ease;}
.auth-check-box.checked svg{opacity:1;transform:scale(1);}
.auth-check-label{font-size:12px;color:var(--sub);line-height:1.5;cursor:pointer;}
.auth-check-label a{color:var(--blue);font-weight:600;text-decoration:none;}
.auth-check-label a:hover{text-decoration:underline;}
[data-theme="dark"] .auth-check-box{border-color:rgba(255,255,255,0.25);background:transparent;}
[data-theme="dark"] .auth-check-box.checked{border-color:var(--blue);background:var(--blue);}
/* Icon pages (forgot-pw, email-sent) */
.auth-icon-circle{width:80px;height:80px;border-radius:50%;background:#EFF6FF;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;}
.auth-icon-circle svg{width:36px;height:36px;stroke:#93C5FD;fill:none;stroke-width:1.5;}
/* standalone icon pages (no card, centered) */
.auth-standalone{background:var(--auth-bg);display:none;flex-direction:column;flex:1;align-items:center;justify-content:center;padding:32px 28px;}
.auth-standalone.active{display:flex;}
.auth-standalone .auth-title{margin-bottom:10px;}
.auth-standalone .auth-sub{max-width:270px;margin:0 auto 28px;line-height:1.6;}

/* ───── CUSTOM MODAL / DIALOG ───── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:800;display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;}
.modal-overlay.show{opacity:1;pointer-events:all;}
.modal-box{background:white;border-radius:24px 24px 0 0;width:100%;max-width:430px;padding:28px 24px 36px;transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);}
.modal-overlay.show .modal-box{transform:translateY(0);}
.modal-icon{width:56px;height:56px;border-radius:50%;background:#FEE2E2;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
.modal-icon svg{width:26px;height:26px;stroke:#EF4444;fill:none;stroke-width:2;}
.modal-title{font-size:18px;font-weight:800;text-align:center;margin-bottom:8px;color:var(--text);}
.modal-desc{font-size:13.5px;color:var(--sub);text-align:center;margin-bottom:24px;line-height:1.5;}
.modal-btns{display:flex;gap:10px;}
.modal-btn-cancel{flex:1;padding:14px;border-radius:14px;border:1.5px solid var(--border);background:white;font-size:14px;font-weight:600;cursor:pointer;color:var(--text);}
.modal-btn-confirm{flex:1;padding:14px;border-radius:14px;border:none;background:#EF4444;color:white;font-size:14px;font-weight:700;cursor:pointer;}
.modal-btn-confirm:active{background:#DC2626;}

/* ───── EMPTY STATE ───── */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;gap:10px;color:var(--sub);}
.empty svg{width:50px;height:50px;stroke:var(--border);fill:none;stroke-width:1.5;}
.empty p{font-size:14px;}

/* ───── TOAST ───── */
#toast{
  position:fixed;top:24px;top:calc(env(safe-area-inset-top, 0px) + 20px);left:50%;transform:translateX(-50%) translateY(-20px);
  background:rgba(17, 24, 39, 0.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#FFFFFF;padding:10px 22px;border-radius:50px;
  font-size:13px;font-weight:600;z-index:999999;
  opacity:0;transition:transform .25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .2s ease;
  pointer-events:none;max-width:min(90vw, 380px);text-align:center;
  box-shadow:0 10px 25px -5px rgba(0,0,0,0.35), 0 4px 6px -2px rgba(0,0,0,0.15);
  border:1px solid rgba(255,255,255,0.18);word-break:break-word;line-height:1.4;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

[data-theme="dark"] #toast{
  background:rgba(30, 41, 59, 0.96);
  color:#F1F5F9;
  border-color:rgba(255,255,255,0.14);
  box-shadow:0 10px 25px -5px rgba(0,0,0,0.6);
}

/* ───── BOOT SPLASH ─────
   Shown by default and only removed once auth state + the correct page
   have been resolved in JS. Prevents any flash of the login page or of
   stale/placeholder data on refresh. */
/* ═══════════════════════════════════════════════════════════════
   BOOT SPLASH — Modern animated loading screen
   ═══════════════════════════════════════════════════════════════ */
#boot-splash{
  position:fixed;inset:0;z-index:9999;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .5s ease, visibility .5s ease;
  overflow:hidden;
}
#boot-splash.hide{opacity:0;pointer-events:none;visibility:hidden;}

/* Ambient glow blobs */
.bs-bg-glow{
  position:absolute;border-radius:50%;
  filter:blur(80px);opacity:.18;pointer-events:none;
}
.bs-glow-1{
  width:320px;height:320px;top:-60px;right:-80px;
  background:radial-gradient(circle,#4C7EFF,transparent 70%);
  animation:bs-float 6s ease-in-out infinite;
}
.bs-glow-2{
  width:260px;height:260px;bottom:-40px;left:-60px;
  background:radial-gradient(circle,#818CF8,transparent 70%);
  animation:bs-float 8s ease-in-out infinite reverse;
}
[data-theme="dark"] .bs-bg-glow{opacity:.28;}

@keyframes bs-float{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-20px) scale(1.05);}
}

/* Center content */
.bs-content{
  display:flex;flex-direction:column;align-items:center;
  gap:0;position:relative;z-index:1;
  opacity:1;
  animation:bs-slidein .5s ease forwards;
}
@keyframes bs-slidein{from{transform:translateY(12px);}to{transform:none;}}

/* Logo ring */
.bs-logo-wrap{
  position:relative;width:96px;height:96px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:22px;
}
.bs-ring{
  position:absolute;inset:-6px;border-radius:50%;
  border:2px solid transparent;
}
.bs-ring-1{
  border-top-color:#4C7EFF;border-right-color:rgba(76,126,255,.25);
  border-bottom-color:rgba(76,126,255,.1);border-left-color:rgba(76,126,255,.25);
  animation:bs-spin 1.4s linear infinite;
}
.bs-ring-2{
  inset:-13px;
  border-top-color:rgba(129,140,248,.5);border-right-color:rgba(129,140,248,.15);
  border-bottom-color:rgba(129,140,248,.05);border-left-color:rgba(129,140,248,.3);
  animation:bs-spin 2.2s linear infinite reverse;
}
@keyframes bs-spin{to{transform:rotate(360deg);}}

.bs-logo{
  width:72px;height:72px;object-fit:contain;border-radius:18px;
  box-shadow:0 8px 32px rgba(76,126,255,.25);
  animation:bs-pulse 2.4s ease-in-out infinite;
}
@keyframes bs-pulse{
  0%,100%{box-shadow:0 8px 32px rgba(76,126,255,.25);}
  50%{box-shadow:0 8px 48px rgba(76,126,255,.5);}
}

/* Brand name */
.bs-brand{
  font-size:26px;font-weight:800;letter-spacing:-.5px;
  color:var(--text);line-height:1;margin-bottom:6px;
}
.bs-brand span{color:#4C7EFF;}

/* Tagline */
.bs-tagline{
  font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sub);margin-bottom:32px;
}

/* Animated dots */
.bs-dots{display:flex;gap:8px;align-items:center;}
.bs-dots span{
  width:7px;height:7px;border-radius:50%;
  background:#4C7EFF;opacity:.25;
  animation:bs-dot 1.2s ease-in-out infinite;
}
.bs-dots span:nth-child(2){animation-delay:.2s;}
.bs-dots span:nth-child(3){animation-delay:.4s;}
@keyframes bs-dot{
  0%,80%,100%{opacity:.2;transform:scale(.8);}
  40%{opacity:1;transform:scale(1.2);}
}

/* Fallback spinner (tetap ada jika diperlukan) */
.boot-spinner{
  width:36px;height:36px;border-radius:50%;
  border:3px solid var(--border);border-top-color:var(--blue);
  animation:boot-spin .7s linear infinite;
}
@keyframes boot-spin{to{transform:rotate(360deg);}}

/* ═══════════════════════════════════════════════════════════════
   QRIS PAYMENT SHEET
   ═══════════════════════════════════════════════════════════════ */

/* ───── COMING SOON BADGE / DISABLED ITEM ───── */
.coming-soon-badge{font-size:10px;font-weight:700;color:#8B5CF6;background:#EDE9FE;padding:3px 8px;border-radius:50px;white-space:nowrap;}
.pf-item-disabled{cursor:default;opacity:.85;}
.pf-item-disabled:active{background:transparent;}

/* ───── PASSWORD SHEET ───── */
.pw-sheet{position:fixed;bottom:0;left:50%;transform:translateX(-50%) translateY(100%);width:100%;max-width:430px;background:var(--sheet-bg);border-radius:24px 24px 0 0;z-index:500;padding:12px 16px 40px;transition:transform .3s cubic-bezier(.4,0,.2,1);}
.pw-sheet.open{transform:translateX(-50%) translateY(0);}
.pw-sheet-handle{width:36px;height:4px;border-radius:2px;background:var(--border);margin:8px auto 14px;}
.pw-sheet-title{font-size:17px;font-weight:700;margin-bottom:0;color:var(--text);}
.pw-field-label{font-size:12px;font-weight:600;color:var(--sub);margin-bottom:5px;margin-top:12px;}
.pw-field-wrap{position:relative;}
.pw-field{width:100%;padding:12px 40px 12px 14px;border-radius:12px;border:1.5px solid var(--border);font-size:14px;background:var(--light);box-sizing:border-box;outline:none;color:var(--text);}
.pw-field:focus{border-color:#93C5FD;background:var(--white);}
.pw-field[readonly]{background:var(--bg-card-alt);color:var(--text);border-color:var(--border);cursor:default;}
.pw-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;font-size:16px;user-select:none;}
.pw-match-hint{font-size:12px;margin-top:5px;min-height:16px;}
.pw-hint-ok{color:#16A34A;}
.pw-hint-err{color:#DC2626;}
.pw-save-btn{width:100%;padding:15px;border-radius:14px;background:var(--blue);color:white;font-size:15px;font-weight:700;border:none;cursor:pointer;margin-top:20px;}
.pw-save-btn:active{opacity:.85;}
.pw-save-btn:disabled{opacity:.6;cursor:not-allowed;}

/* ───── TICKET DETAIL / CHAT PAGE ───── */
.tdet-status{font-size:11px;font-weight:700;padding:3px 10px;border-radius:50px;}
.tdet-status-active{background:#DBEAFE;color:#1D4ED8;}
.tdet-status-resolved{background:#D1FAE5;color:#065F46;}
.tdet-status-closed{background:#F3F4F6;color:#6B7280;}
.tdet-subject-row{padding:10px 16px 0;}
.tdet-subject{font-size:14px;font-weight:600;color:var(--sub);line-height:1.4;}

/* Chat area */
.tchat-messages{padding:12px 14px;display:flex;flex-direction:column;gap:10px;}
.tchat-date-sep{text-align:center;font-size:11px;color:var(--sub);padding:4px 0;}
.tchat-row{display:flex;align-items:flex-end;gap:8px;}
.tchat-row-user{flex-direction:row-reverse;}
.tchat-avatar{width:28px;height:28px;border-radius:50%;background:#3B82F6;color:white;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.tchat-avatar-admin{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#3B82F6,#1D4ED8);color:white;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 6px rgba(59,130,246,0.3);}
.tchat-avatar-admin svg{width:16px;height:16px;stroke:white;fill:none;stroke-width:2;}
.tchat-bubble{max-width:82%;padding:10px 13px;border-radius:16px;position:relative;}
.tchat-bubble-admin{background:white;border:1px solid var(--border);border-bottom-left-radius:4px;}
.tchat-bubble-user{background:#3B82F6;border-bottom-right-radius:4px;}
.tchat-admin-header{display:flex;align-items:center;gap:4px;margin-bottom:6px;font-size:12px;}
.tchat-admin-name{font-weight:700;color:#2563EB;}
.tchat-verified-badge{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-left:2px;}
.tchat-verified-icon{width:15px;height:15px;display:block;}
.tchat-text{font-size:14px;line-height:1.5;color:var(--text);word-break:break-word;}
.tchat-bubble-user .tchat-text{color:white;}
.tchat-time{font-size:10px;color:var(--sub);margin-top:4px;text-align:right;}
.tchat-bubble-user .tchat-time{color:rgba(255,255,255,.7);}

/* Media in chat */
.tchat-media-wrap{margin-bottom:6px;border-radius:12px;overflow:hidden;cursor:pointer;max-width:280px;background:rgba(0,0,0,0.04);position:relative;display:block;}
.tchat-media-wrap:active{opacity:0.9;}
.tchat-media-img{width:100%;max-height:240px;object-fit:cover;display:block;border-radius:12px;transition:transform .15s;}

/* Reply bar & attachment button */
.tchat-reply-bar{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;background:var(--white);border-top:1px solid var(--border);}
.tchat-attach-btn{width:38px;height:38px;border-radius:50%;background:var(--light);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .15s;color:var(--sub);}
.tchat-attach-btn:hover{background:var(--border);color:var(--text);}
.tchat-attach-btn:active{transform:scale(0.92);}
.tchat-attach-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;}
.tchat-attach-btn.has-file{background:#EFF6FF;border-color:#93C5FD;color:#2563EB;}

/* Media Preview Bar above input */
.tchat-media-preview-bar{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--white);border-top:1px solid var(--border);animation:slideUp .2s ease;}
.tchat-preview-thumb-wrap{position:relative;width:44px;height:44px;border-radius:8px;overflow:visible;flex-shrink:0;}
#tchat-preview-thumb{width:44px;height:44px;object-fit:cover;border-radius:8px;border:1px solid var(--border);display:block;}
.tchat-preview-remove{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:#EF4444;color:white;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;box-shadow:0 2px 4px rgba(0,0,0,0.2);}
.tchat-preview-remove svg{width:10px;height:10px;stroke:white;fill:none;stroke-width:3;}
.tchat-preview-name{font-size:12px;color:var(--sub);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.tchat-reply-input{flex:1;border:1.5px solid var(--border);border-radius:20px;padding:9px 14px;font-size:14px;font-family:inherit;resize:none;outline:none;max-height:100px;line-height:1.4;background:var(--light);color:var(--text);}
.tchat-reply-input:focus{border-color:#93C5FD;background:white;}
.tchat-send-btn{width:38px;height:38px;border-radius:50%;background:#3B82F6;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:opacity .15s;}
.tchat-send-btn:active{opacity:.7;}
.tchat-send-btn:disabled{opacity:.4;cursor:not-allowed;}
.tchat-send-btn svg{width:16px;height:16px;stroke:white;fill:none;stroke-width:2;}
.tchat-closed-bar{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 16px;background:#F9FAFB;border-top:1px solid var(--border);font-size:13px;color:var(--sub);font-weight:500;}
.tchat-closed-bar svg{width:16px;height:16px;stroke:var(--sub);fill:none;stroke-width:2;}

/* Image Lightbox */
.image-lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.9);z-index:99999;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(8px);animation:fadeIn .2s ease;}
.lightbox-img{max-width:94vw;max-height:86vh;object-fit:contain;border-radius:12px;box-shadow:0 12px 48px rgba(0,0,0,0.6);animation:zoomIn .25s ease;}
.lightbox-close-btn{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.18);display:flex;align-items:center;justify-content:center;cursor:pointer;color:white;transition:background .15s;z-index:10;}
.lightbox-close-btn:hover{background:rgba(255,255,255,0.3);}
.lightbox-close-btn svg{width:20px;height:20px;stroke:white;fill:none;stroke-width:2.5;}
@keyframes zoomIn{from{transform:scale(0.9);opacity:0}to{transform:scale(1);opacity:1}}

/* New Ticket upload box */
.nt-upload-box{border:1.5px dashed var(--border);border-radius:12px;padding:14px;background:var(--light);cursor:pointer;transition:all .15s;margin-top:6px;}
.nt-upload-box:hover{border-color:#93C5FD;background:#F8FAFC;}
.nt-upload-empty{display:flex;align-items:center;gap:10px;color:var(--sub);font-size:13px;}
.nt-upload-empty svg{width:22px;height:22px;stroke:var(--sub);fill:none;stroke-width:1.8;flex-shrink:0;}
.nt-upload-preview{display:flex;align-items:center;justify-content:space-between;gap:12px;}
#nt-preview-img{width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid var(--border);}
.nt-preview-del{width:32px;height:32px;border-radius:50%;background:#FEE2E2;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#EF4444;}
.nt-preview-del svg{width:16px;height:16px;stroke:#EF4444;fill:none;stroke-width:2.5;}

/* Make ticket list items look tappable */
.sup-ticket{cursor:pointer;transition:background .15s;}
.sup-ticket:active{background:#F9FAFB;}

/* ── OTP Verification Page ──────────────────────────────────────── */
.otp-verify-card{width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center;text-align:center;}
.otp-icon-circle{width:72px;height:72px;border-radius:50%;background:#EFF6FF;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}
.otp-icon-circle svg{width:32px;height:32px;stroke:#4C7EFF;fill:none;stroke-width:1.5;}
.otp-sub{font-size:14px;color:var(--sub);margin-bottom:4px;}
.otp-email-display{font-size:14px;font-weight:700;color:var(--text);margin-bottom:4px;word-break:break-all;}
.otp-wrong-email{font-size:12px;color:#4C7EFF;text-decoration:underline;cursor:pointer;margin-bottom:28px;}
.otp-digit-row{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.otp-digit{width:44px;height:52px;border:2px solid var(--border);border-radius:12px;font-size:24px;font-weight:700;text-align:center;color:var(--text);background:var(--light);outline:none;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none;}
.otp-digit:focus{border-color:#4C7EFF;box-shadow:0 0 0 3px rgba(76,126,255,.12);background:white;}
.otp-digit.otp-digit-filled{border-color:#4C7EFF;background:white;}
.otp-digit.otp-digit-error{border-color:#EF4444 !important;box-shadow:0 0 0 3px rgba(239,68,68,.1) !important;}
.otp-digit-sep{font-size:20px;color:var(--sub);font-weight:300;margin:0 2px;line-height:1;}
.otp-error{min-height:18px;font-size:12.5px;color:#EF4444;font-weight:500;margin-bottom:8px;}
.otp-verify-btn{width:100%;margin-top:4px;margin-bottom:20px;}
.otp-resend-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;font-size:13px;}
.otp-resend-label{color:var(--sub);}
.otp-resend-btn{background:none;border:none;color:#4C7EFF;font-size:13px;font-weight:600;cursor:pointer;padding:0;text-decoration:underline;}
.otp-resend-btn:disabled{color:var(--sub);text-decoration:none;cursor:not-allowed;}
.otp-expire-hint{font-size:11.5px;color:var(--sub);margin-top:10px;}
.otp-spam-tip{display:flex;align-items:center;justify-content:center;gap:6px;background:rgba(76,126,255,0.08);border:1px dashed rgba(76,126,255,0.3);border-radius:8px;padding:8px 12px;font-size:11.5px;color:var(--sub);margin-top:14px;line-height:1.4;text-align:center;}
.otp-spam-tip svg{width:14px;height:14px;flex-shrink:0;stroke:#4C7EFF;}
.otp-spam-tip strong{color:var(--text);font-weight:600;}
[data-theme="dark"] .otp-spam-tip{background:rgba(76,126,255,0.12);border-color:rgba(76,126,255,0.35);color:#94A3B8;}
[data-theme="dark"] .otp-spam-tip strong{color:#F1F5F9;}
@keyframes otpShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.otp-shake{animation:otpShake .45s ease;}

/* ══════════════════════════════════════════════════════════════════
   Dark Mode Overrides
   All hardcoded light colours that don't use CSS vars are patched
   here via [data-theme="dark"] attribute on <html>.
   ══════════════════════════════════════════════════════════════════ */

/* Sheets & modals */
[data-theme="dark"] .bottom-sheet,
[data-theme="dark"] .modal-box,
[data-theme="dark"] .pw-sheet { background:var(--sheet-bg); }

/* Auth */
[data-theme="dark"] .auth-card { background:#253147; box-shadow:0 4px 24px rgba(0,0,0,.4); }
[data-theme="dark"] .auth-input,
[data-theme="dark"] .auth-google-btn { background:var(--input-bg); border-color:var(--border); color:var(--text); }
[data-theme="dark"] .auth-input::placeholder { color:var(--sub); }

/* Cards / tickets / notifications */
[data-theme="dark"] .sup-ticket,
[data-theme="dark"] .notif-card,
[data-theme="dark"] .nt-cat-option,
[data-theme="dark"] .nt-input,
[data-theme="dark"] .nt-textarea { background:var(--light); color:var(--text); }

/* Inputs */
[data-theme="dark"] .nt-input::placeholder,
[data-theme="dark"] .nt-textarea::placeholder { color:var(--sub); }
[data-theme="dark"] .nt-input:focus,
[data-theme="dark"] .nt-textarea:focus { background:var(--light); }

/* Wallet quick-action button */
[data-theme="dark"] .w-action-btn { background:var(--light) !important; }

/* QR wrap */
[data-theme="dark"] .dd-qr-img-wrap { background:var(--light); }

/* Deposit / payment method */
[data-theme="dark"] .dep-method-card { background:var(--light); }
[data-theme="dark"] .dep-method-selected { background:#1E3A5F; border-color:#3B82F6; }
[data-theme="dark"] .dep-method-logo { filter:invert(60%) sepia(40%) saturate(400%) hue-rotate(190deg) brightness(1.2); }

/* Coloured icon badges → muted in dark */
[data-theme="dark"] .oc-icon.whatsapp,
[data-theme="dark"] .dsc-icon.whatsapp { background:var(--icon-green); }
[data-theme="dark"] .oc-icon.truemoney,
[data-theme="dark"] .dsc-icon.truemoney { background:var(--icon-yellow); }
[data-theme="dark"] .oc-icon.tokopedia,
[data-theme="dark"] .dsc-icon.tokopedia { background:var(--icon-green); }
[data-theme="dark"] .oc-icon.initials,
[data-theme="dark"] .dsc-icon.initials { background:var(--light); }
[data-theme="dark"] .w-action-icon.deposit { background:#14532D; }
[data-theme="dark"] .w-action-icon.history { background:var(--icon-blue); }
[data-theme="dark"] .w-action-icon.txns { background:#4C1D1D; }
[data-theme="dark"] .act-icon.debit,
[data-theme="dark"] .txi-icon.debit { background:var(--icon-debit); }
[data-theme="dark"] .act-icon.credit,
[data-theme="dark"] .txi-icon.credit,
[data-theme="dark"] .dhi-icon.qris { background:var(--icon-credit); }
[data-theme="dark"] .dhi-icon.crypto { background:var(--icon-yellow); }

/* OTP msg box */
[data-theme="dark"] .otp-msg-box { background:#14532D; border-color:#166534; color:#BBF7D0; }

/* Msg bubble */
[data-theme="dark"] .msg-bubble { background:var(--light); }

/* Status badges */
[data-theme="dark"] .dsc-badge.active { background:#1E3A5F; }
[data-theme="dark"] .dsc-badge.completed { background:#14532D; }
[data-theme="dark"] .dsc-badge.canceled { background:#4C1D1D; }

/* Bottom nav active icon bg */
[data-theme="dark"] .bnav-item.active .icon-wrap { background:#1E3A5F; }

/* Modal cancel btn */
[data-theme="dark"] .modal-btn-cancel { background:var(--light); color:var(--text); }

/* Signout btn */
[data-theme="dark"] .pf-signout-btn { background:var(--light); border-color:#7F1D1D; }
[data-theme="dark"] .pf-signout-btn:active { background:#4C1D1D; }

/* Password field & inputs */
[data-theme="dark"] .pw-field { background:var(--input-bg) !important; color:var(--text) !important; border-color:var(--border) !important; }
[data-theme="dark"] .pw-field:focus { background:var(--input-bg) !important; border-color:#3B82F6 !important; color:var(--text) !important; }
[data-theme="dark"] .pw-field[readonly] { background:var(--bg-card-alt) !important; color:var(--text) !important; border-color:var(--border) !important; }
[data-theme="dark"] #verif-sheet-poster { background:var(--light) !important; border-color:var(--border) !important; }

/* OTP verify page */
[data-theme="dark"] .otp-digit { background:var(--light); border-color:var(--border); color:var(--text); }
[data-theme="dark"] .otp-digit.otp-digit-filled,
[data-theme="dark"] .otp-digit:focus { background:#1E3A5F; border-color:#4C7EFF; }
[data-theme="dark"] .otp-icon-circle { background:#1E3A5F; }
[data-theme="dark"] .auth-icon-circle { background:#1E3A5F; }

/* Theme option selected in dark */
[data-theme="dark"] .theme-option { background:var(--light); border-color:var(--border); }
[data-theme="dark"] .theme-option.selected { background:#1E3A5F; border-color:#3B82F6; }

/* Support / ticket chat */
[data-theme="dark"] .tchat-bubble-admin { background:var(--light); border-color:var(--border); }
[data-theme="dark"] .tchat-reply-input { background:var(--input-bg); border-color:var(--border); color:var(--text); }
[data-theme="dark"] .tchat-reply-input:focus { background:var(--light); }
[data-theme="dark"] .tchat-closed-bar { background:var(--light); border-color:var(--border); }

/* Search bar */
[data-theme="dark"] .search-bar { background:var(--light); }
[data-theme="dark"] .cop-search .search-bar { background:var(--light); }

/* Misc */
[data-theme="dark"] .dd-check-btn:active { background:#1E3A5F; }
[data-theme="dark"] .sup-ticket:active { background:var(--light); }

/* ═══ Legal Sheet ═══════════════════════════════════════════════════ */
.legal-sheet{position:fixed;inset:0;z-index:9999;display:flex;align-items:flex-end;justify-content:center;}
.legal-sheet.hidden{display:none;}
.legal-sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.55);}
.legal-sheet-panel{position:relative;width:100%;max-width:430px;max-height:88vh;background:var(--white);border-radius:20px 20px 0 0;display:flex;flex-direction:column;animation:sheetUp .25s ease;}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.legal-sheet-handle{width:36px;height:4px;background:var(--border);border-radius:2px;margin:12px auto 0;flex-shrink:0;}
.legal-sheet-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px 12px;border-bottom:1px solid var(--border);flex-shrink:0;}
.legal-sheet-title{font-size:16px;font-weight:700;color:var(--text);}
.legal-sheet-close{width:30px;height:30px;border-radius:8px;background:var(--light);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.legal-sheet-close svg{width:14px;height:14px;stroke:var(--sub);fill:none;stroke-width:2.5;}
.legal-sheet-body{flex:1;overflow-y:auto;padding:20px 20px 48px;-webkit-overflow-scrolling:touch;}

/* Legal content typography */
.legal-updated{font-size:12px;color:var(--sub);margin-bottom:16px;display:flex;align-items:center;gap:6px;}
.legal-lead{font-size:13px;color:var(--sub);line-height:1.7;margin-bottom:16px;}
.legal-section{margin-bottom:22px;}
.legal-h2{font-size:14px;font-weight:700;color:var(--text);margin-bottom:8px;}
.legal-p{font-size:13px;color:var(--sub);line-height:1.7;margin-bottom:8px;}
.legal-ul{margin:4px 0 8px 16px;}
.legal-ul li{font-size:13px;color:var(--sub);line-height:1.7;margin-bottom:3px;list-style:disc;}
.legal-divider{height:1px;background:var(--border);margin:18px 0;}

/* FAQ accordion */
.faq-cat-label{font-size:11px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.6px;margin:20px 0 8px;}
.faq-cat-label:first-child{margin-top:0;}
.faq-item{border:1px solid var(--border);border-radius:12px;background:var(--white);margin-bottom:8px;overflow:hidden;transition:border-color .2s;}
.faq-item.open{border-color:var(--blue);}
.faq-q{display:flex;align-items:flex-start;justify-content:space-between;padding:13px 14px;cursor:pointer;gap:10px;}
.faq-q-text{font-size:13px;font-weight:600;color:var(--text);flex:1;line-height:1.45;}
.faq-chevron{width:16px;height:16px;stroke:var(--sub);fill:none;stroke-width:2;flex-shrink:0;margin-top:1px;transition:transform .22s;}
.faq-item.open .faq-chevron{transform:rotate(180deg);stroke:var(--blue);}
.faq-a{display:none;padding:0 14px 14px;font-size:13px;color:var(--sub);line-height:1.7;}
.faq-item.open .faq-a{display:block;}
[data-theme="dark"] .faq-item{background:var(--light);}
[data-theme="dark"] .legal-sheet-panel{background:var(--bg);}
[data-theme="dark"] .legal-sheet-body{background:var(--bg);}
[data-theme="dark"] .legal-sheet-close{background:var(--light);}
[data-theme="dark"] .legal-ul li b{color:var(--text);}

@media (min-width: 768px) {
  .legal-sheet { align-items: center; padding: 24px; }
  .legal-sheet-panel { border-radius: 20px; max-height: 85vh; max-width: 580px; box-shadow: 0 20px 50px rgba(0,0,0,0.35); }
  .legal-sheet-handle { display: none; }
}


/* ── PWA Install Banner ─────────────────────────────────────────────────── */
#pwa-install-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:9998;
  display:flex;align-items:center;gap:10px;
  padding:12px 16px 12px;
  background:var(--white);
  border-top:1px solid var(--border);
  box-shadow:0 -4px 24px rgba(0,0,0,0.10);
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
}
#pwa-install-bar.show{transform:translateY(0);}
.pwa-install-icon{width:40px;height:40px;border-radius:10px;flex-shrink:0;}
.pwa-install-text{flex:1;min-width:0;}
.pwa-install-text strong{display:block;font-size:13px;font-weight:700;color:var(--text);}
.pwa-install-text span{font-size:12px;color:var(--sub);}
.pwa-install-btn{
  flex-shrink:0;
  background:var(--blue);color:#fff;
  font-size:13px;font-weight:700;
  padding:8px 16px;border-radius:10px;border:none;cursor:pointer;
  white-space:nowrap;
}
.pwa-install-dismiss{
  flex-shrink:0;background:none;border:none;cursor:pointer;
  font-size:16px;color:var(--sub);padding:4px 2px;line-height:1;
}

/* ── Announcement Banners ───────────────────────────────────────────────── */

/* Notification row on home (tap to open sheet) */
.banner-notif-row{
  display:flex;align-items:center;gap:12px;
  margin:0 16px 12px;padding:12px 14px;
  background:var(--white);border-radius:16px;
  border:1px solid var(--border);
  box-shadow:var(--card-shadow);cursor:pointer;
  transition:transform .12s,box-shadow .12s;
}
.banner-notif-row:active{transform:scale(.98);}

.banner-notif-icon{
  position:relative;flex-shrink:0;
  width:40px;height:40px;border-radius:12px;
  background:var(--icon-blue,#DBEAFE);
  display:flex;align-items:center;justify-content:center;
  color:var(--blue);
}
.banner-notif-badge{
  position:absolute;top:-3px;right:-3px;
  width:10px;height:10px;border-radius:50%;
  background:var(--red);border:2px solid var(--white);
}
.banner-notif-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.banner-notif-label{font-size:14px;font-weight:700;color:var(--text);}
.banner-notif-sub{font-size:12px;color:var(--blue);font-weight:600;}
.banner-notif-arrow{color:var(--sub);flex-shrink:0;}

[data-theme="dark"] .banner-notif-row{
  background:var(--light);
  border-color:var(--border);
}
[data-theme="dark"] .banner-notif-icon{
  background:#1E3A5F;
  color:#60A5FA;
}
[data-theme="dark"] .banner-notif-label{
  color:var(--text);
}
[data-theme="dark"] .banner-notif-badge{
  border-color:var(--light);
}

/* Shared category / date labels used inside the notif sheet */
.banner-card-cat{
  font-size:11px;font-weight:700;padding:3px 8px;border-radius:20px;
  display:inline-flex;align-items:center;gap:4px;
}
.banner-card-cat.Update{ background:#FEF3C7;color:#D97706;}
.banner-card-cat.Promo { background:#DCFCE7;color:#16A34A;}
.banner-card-cat.Info  { background:#DBEAFE;color:#2563EB;}
.banner-card-cat.Event { background:#F3E8FF;color:#7C3AED;}
[data-theme="dark"] .banner-card-cat.Update{ background:#451a03;color:#FBBF24;}
[data-theme="dark"] .banner-card-cat.Promo { background:#052e16;color:#4ADE80;}
[data-theme="dark"] .banner-card-cat.Info  { background:#1e3a5f;color:#60A5FA;}
[data-theme="dark"] .banner-card-cat.Event { background:#2e1065;color:#C084FC;}
.banner-card-date{font-size:11px;color:var(--sub);}

/* Notification / Banner sheet */
.banner-modal-box{
  height:min(88vh,760px);
  height:min(88dvh,760px);
  max-height:calc(100dvh - env(safe-area-inset-top,0px));
  min-height:0;
  overflow:hidden;scrollbar-width:none;
  border-radius:24px 24px 0 0;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;
}
.banner-modal-box::-webkit-scrollbar{display:none;}

.notif-sheet-handle{
  width:36px;height:4px;border-radius:2px;
  background:var(--border,#e0e0e0);margin:0 auto 14px;flex-shrink:0;
}
.notif-sheet-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;flex-shrink:0;
}
.notif-sheet-title{font-size:16px;font-weight:800;color:var(--text);}

.notif-banner-list{
  display:flex;flex-direction:column;gap:14px;
  min-height:0;flex:1 1 auto;
  overflow-y:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
  padding-bottom:4px;
}
.notif-banner-list::-webkit-scrollbar{display:none;}

.notif-banner-item{
  background:var(--card,#fff);border-radius:16px;
  box-shadow:var(--card-shadow);overflow:hidden;
  border-left:3px solid transparent;flex:0 0 auto;
}
.notif-banner-item.is-unread{border-left-color:var(--blue);}

.notif-banner-item-meta{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px 0;
}
.notif-banner-item-title{
  font-size:14px;font-weight:700;color:var(--text);
  padding:8px 14px 4px;line-height:1.35;
}
.notif-banner-item-sub{
  font-size:12px;color:var(--sub);padding:0 14px 10px;line-height:1.5;
}
.notif-banner-item-media{
  position:relative;width:100%;aspect-ratio:16/9;
  max-height:220px;overflow:hidden;background:var(--light);
}
.notif-banner-item-img-placeholder{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--sub);font-size:11px;background:var(--light);
}
.notif-banner-item-img{
  position:relative;width:100%;height:100%;display:block;
  object-fit:cover;opacity:0;transition:opacity .18s ease;
  cursor:pointer;background:var(--light);
}
.notif-banner-item-img.is-loaded{opacity:1;}
.notif-banner-item-link{
  display:flex;align-items:center;justify-content:center;
  margin:10px 14px 12px;background:var(--blue);color:#fff;border:none;
  border-radius:10px;font-size:13px;font-weight:600;padding:10px;cursor:pointer;
  width:calc(100% - 28px);
}

.notif-sheet-footer{padding-top:12px;flex-shrink:0;}
.bm-btn-read{
  width:100%;background:var(--bg,#f0f2f5);color:var(--sub);border:none;
  border-radius:14px;font-size:14px;font-weight:600;padding:14px;cursor:pointer;
}
[data-theme="dark"] .bm-btn-read{background:var(--light,#1e2330);}
.bm-btn-read.already-read{color:var(--green);}

/* ── PWA Update Bar ─────────────────────────────────────────────────────── */
#pwa-update-bar{
  position:fixed;top:0;left:0;right:0;z-index:9999;
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;
  background:linear-gradient(90deg,#4C7EFF,#7C4DFF);
  color:#fff;font-size:13px;font-weight:600;
}
#pwa-update-bar span{flex:1;}
#pwa-update-bar button{
  background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.4);
  color:#fff;font-size:12px;font-weight:700;
  padding:5px 12px;border-radius:8px;cursor:pointer;white-space:nowrap;
}
#pwa-update-bar .pwa-dismiss{
  background:none;border:none;font-size:16px;padding:2px 4px;cursor:pointer;
  color:rgba(255,255,255,0.8);
}
[data-theme="dark"] #pwa-install-bar{background:var(--light);}

/* ───── LEADERBOARD ───── */
.lb-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;background:var(--bg);position:sticky;top:0;z-index:20;}
.lb-header-title{font-size:18px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:8px;}
.lb-page-back{width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,0.05);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.lb-page-back svg{width:20px;height:20px;stroke:var(--text);fill:none;stroke-width:2.2;}

.lb-tabs{display:flex;background:rgba(0,0,0,0.05);border-radius:12px;padding:4px;margin:0 16px 16px;}
.lb-tab{flex:1;text-align:center;padding:10px 0;font-size:13px;font-weight:700;color:var(--sub);border-radius:10px;cursor:pointer;transition:all 0.2s ease;}
.lb-tab.active{background:var(--blue,#3b82f6);color:white;box-shadow:0 4px 12px rgba(59,130,246,0.3);}

.lb-podium-wrap{display:flex;align-items:flex-end;justify-content:center;gap:10px;margin:10px 16px 20px;padding:16px 12px;background:linear-gradient(180deg,rgba(59,130,246,0.08) 0%,rgba(0,0,0,0) 100%);border-radius:20px;border:1px solid rgba(59,130,246,0.15);}
.lb-podium-card{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;padding:14px 6px 12px;border-radius:16px;background:var(--card-bg,#fff);box-shadow:0 4px 14px rgba(0,0,0,0.05);position:relative;transition:transform 0.2s ease;}
.lb-podium-card.rank-1{order:2;transform:translateY(-10px);border:2px solid #f59e0b;background:linear-gradient(180deg,#fffdf2 0%,var(--card-bg,#fff) 100%);box-shadow:0 6px 20px rgba(245,158,11,0.15);}
.lb-podium-card.rank-2{order:1;border:1.5px solid #94a3b8;background:linear-gradient(180deg,#f8faff 0%,var(--card-bg,#fff) 100%);}
.lb-podium-card.rank-3{order:3;border:1.5px solid #d97706;background:linear-gradient(180deg,#fff9f5 0%,var(--card-bg,#fff) 100%);}
[data-theme="dark"] .lb-podium-card{background:var(--card-bg,#1e293b);box-shadow:0 4px 14px rgba(0,0,0,0.25);}
[data-theme="dark"] .lb-podium-card.rank-1{background:linear-gradient(180deg,#241e12 0%,var(--card-bg,#1e293b) 100%);border-color:#f59e0b;box-shadow:0 6px 22px rgba(245,158,11,0.25);}
[data-theme="dark"] .lb-podium-card.rank-2{background:linear-gradient(180deg,#1c2333 0%,var(--card-bg,#1e293b) 100%);border-color:#64748b;}
[data-theme="dark"] .lb-podium-card.rank-3{background:linear-gradient(180deg,#261c14 0%,var(--card-bg,#1e293b) 100%);border-color:#b45309;}
.lb-podium-crown-svg{margin-bottom:-2px;display:flex;align-items:center;justify-content:center;}

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.bg-master-gold { background: linear-gradient(135deg, #FFF7ED, #FEF3C7); color: #B45309; border: 1px solid #FDE68A; }
.bg-master-blue { background: linear-gradient(135deg, #EFF6FF, #DBEAFE); color: #1D4ED8; border: 1px solid #BFDBFE; }
.bg-diamond { background: linear-gradient(135deg, #ECFDF5, #D1FAE5); color: #047857; border: 1px solid #A7F3D0; }
.bg-platinum { background: linear-gradient(135deg, #F5F3FF, #EDE9FE); color: #6D28D9; border: 1px solid #DDD6FE; }
.bg-gold { background: linear-gradient(135deg, #FEFCE8, #FEF08A); color: #854D0E; border: 1px solid #FEF08A; }
.bg-silver { background: linear-gradient(135deg, #F8FAFC, #F1F5F9); color: #475569; border: 1px solid #E2E8F0; }

[data-theme="dark"] .bg-master-gold { background: rgba(245, 158, 11, 0.15); color: #FBBF24; border-color: rgba(245, 158, 11, 0.3); }
[data-theme="dark"] .bg-master-blue { background: rgba(59, 130, 246, 0.15); color: #60A5FA; border-color: rgba(59, 130, 246, 0.3); }
[data-theme="dark"] .bg-diamond { background: rgba(16, 185, 129, 0.15); color: #34D399; border-color: rgba(16, 185, 129, 0.3); }
[data-theme="dark"] .bg-platinum { background: rgba(139, 92, 246, 0.15); color: #A78BFA; border-color: rgba(139, 92, 246, 0.3); }
[data-theme="dark"] .bg-gold { background: rgba(234, 179, 8, 0.15); color: #FACC15; border-color: rgba(234, 179, 8, 0.3); }
[data-theme="dark"] .bg-silver { background: rgba(148, 163, 184, 0.15); color: #CBD5E1; border-color: rgba(148, 163, 184, 0.3); }
.lb-avatar-wrap{position:relative;display:flex;align-items:center;justify-content:center;margin:4px 0 8px;}
.lb-podium-card.rank-1 .lb-avatar-wrap{width:74px;height:74px;}
.lb-podium-card.rank-2 .lb-avatar-wrap,
.lb-podium-card.rank-3 .lb-avatar-wrap{width:64px;height:64px;}

.lb-avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;background:var(--blue,#3b82f6);color:white;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;position:relative;z-index:1;user-select:none;}
.lb-podium-card.rank-1 .lb-avatar{width:54px;height:54px;font-size:22px;}
.lb-podium-card.rank-2 .lb-avatar{width:46px;height:46px;}
.lb-podium-card.rank-3 .lb-avatar{width:46px;height:46px;}

/* Avatar Border Frames (Top 1, 2, 3 - Anti AI Slop Esports Vectors) */
.lb-avatar-frame{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:2;user-select:none;}
.lb-avatar-frame.frame-1{width:98px;height:98px;filter:drop-shadow(0 2px 8px rgba(245,158,11,0.35));}
.lb-avatar-frame.frame-2{width:84px;height:84px;filter:drop-shadow(0 2px 6px rgba(129,140,248,0.35));}
.lb-avatar-frame.frame-3{width:84px;height:84px;filter:drop-shadow(0 2px 6px rgba(234,88,12,0.35));}

.lb-rank-badge{position:absolute;bottom:0px;right:0px;width:20px;height:20px;border-radius:50%;color:white;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,0.25);border:2px solid var(--card-bg,#fff);z-index:3;}
.rank-1 .lb-rank-badge{width:22px;height:22px;font-size:11px;background:#f59e0b;border-color:#fff;}
.rank-2 .lb-rank-badge{background:#64748b;border-color:#fff;}
.rank-3 .lb-rank-badge{background:#d97706;border-color:#fff;}
[data-theme="dark"] .lb-rank-badge{border-color:#1e293b;}

.lb-podium-name{font-size:12px;font-weight:700;color:var(--text);text-align:center;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px;}
.lb-podium-score{font-size:11px;font-weight:700;color:var(--blue,#3b82f6);margin-top:3px;background:rgba(59,130,246,0.09);padding:2px 8px;border-radius:20px;white-space:nowrap;}

.lb-list{display:flex;flex-direction:column;gap:8px;margin:0 16px 20px;}
.lb-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--card-bg,#fff);border-radius:14px;border:1px solid rgba(0,0,0,0.05);box-shadow:0 2px 6px rgba(0,0,0,0.02);transition:transform 0.15s ease;}
.lb-item-rank{width:28px;font-size:13px;font-weight:800;color:var(--sub);text-align:center;flex-shrink:0;}
.lb-item-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--blue,#3b82f6);color:white;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex-shrink:0;}
.lb-item-info{flex:1;min-width:0;}
.lb-item-name{font-size:13px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lb-item-badge{font-size:11px;color:var(--sub);margin-top:1px;}
.lb-item-score{font-size:12px;font-weight:700;color:var(--blue,#3b82f6);background:rgba(59,130,246,0.08);padding:4px 10px;border-radius:20px;flex-shrink:0;}

.lb-pagination{display:flex;align-items:center;justify-content:space-between;margin:0 16px 30px;padding:10px 14px;background:var(--card-bg,#fff);border-radius:14px;border:1px solid rgba(0,0,0,0.05);}
.lb-page-btn{padding:8px 14px;border-radius:10px;background:rgba(59,130,246,0.1);color:var(--blue,#3b82f6);font-size:12px;font-weight:700;cursor:pointer;border:none;transition:opacity 0.15s ease;}
.lb-page-btn:disabled{opacity:0.4;cursor:not-allowed;}
.lb-page-info{font-size:12px;font-weight:700;color:var(--sub);}

/* ── Rewarded Ads Card (AdMob & SafeLInku) - Modern 3D Card ──────────────── */
.admob-reward-card-slim {
  margin: 0 16px 10px;
  padding: 9px 12px;
  background: linear-gradient(135deg, #FFFDF0 0%, #FFF8E6 100%);
  border-radius: 16px;
  border: 1px solid rgba(245, 158, 11, 0.35);
  box-shadow: 0 3px 12px rgba(245, 158, 11, 0.08), 0 1px 3px rgba(0, 0, 0, 0.02);
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

[data-theme="dark"] .admob-reward-card-slim {
  background: linear-gradient(135deg, #1A1E2E 0%, #111522 100%);
  border-color: rgba(245, 158, 11, 0.28);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.rew-3d-icon-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rew-3d-glow {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.45) 0%, rgba(251, 191, 36, 0) 70%);
  filter: blur(4px);
  pointer-events: none;
}

.rew-3d-img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(217, 119, 6, 0.4));
  transform: translateZ(0);
}

.rew-slim-center {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.rew-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.rew-slim-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text, #1e293b);
  letter-spacing: -0.2px;
  line-height: 1.2;
  white-space: nowrap;
}

.rew-badge-pill {
  font-size: 9.5px;
  font-weight: 800;
  padding: 1.5px 6px;
  border-radius: 12px;
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: #FFFFFF;
  letter-spacing: 0.2px;
  box-shadow: 0 2px 5px rgba(217, 119, 6, 0.25);
  white-space: nowrap;
}

.rew-slim-sub {
  font-size: 11px;
  color: var(--sub, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.rew-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
}

.rew-slim-meta {
  font-size: 10.5px;
  color: var(--sub, #64748b);
  white-space: nowrap;
}

.rew-count-hl {
  color: #D97706;
  font-weight: 800;
}

[data-theme="dark"] .rew-count-hl {
  color: #FBBF24;
}

.rew-slim-track {
  flex: 1;
  max-width: 80px;
  height: 4px;
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.25);
  overflow: hidden;
}

.rew-slim-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #F59E0B, #10B981);
  transition: width 0.3s ease;
}

.rew-slim-right {
  flex-shrink: 0;
}

.btn-watch-slim {
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 7px 11px;
  font-size: 11.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(217, 119, 6, 0.32);
  transition: transform 0.12s ease, opacity 0.15s ease, box-shadow 0.2s ease;
}

.btn-watch-slim:hover:not(:disabled) {
  opacity: 0.95;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.42);
}

.btn-watch-slim:active:not(:disabled) {
  transform: scale(0.97);
}

.btn-watch-slim:disabled {
  background: var(--bg-muted, #94a3b8) !important;
  cursor: not-allowed;
  opacity: 0.65;
  box-shadow: none !important;
}

[data-theme="dark"] .btn-watch-slim:disabled {
  background: #334155 !important;
  color: #94a3b8;
}

/* ── SafeLInku Shortlink Reward Card ─────────────────────────────────────── */
.safelinku-reward-card {
  background: linear-gradient(135deg, #FAF7FF 0%, #F3ECFF 100%);
  border-color: rgba(139, 92, 246, 0.35);
  box-shadow: 0 3px 12px rgba(139, 92, 246, 0.08), 0 1px 3px rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .safelinku-reward-card {
  background: linear-gradient(135deg, #1E1733 0%, #131024 100%);
  border-color: rgba(139, 92, 246, 0.28);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.sl-3d-wrap {
  width: 44px;
  height: 44px;
}

.sl-glow {
  background: radial-gradient(circle, rgba(139, 92, 246, 0.45) 0%, rgba(139, 92, 246, 0) 70%);
}

.sl-3d-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 6px rgba(139, 92, 246, 0.4));
  transform: translateZ(0);
}

.sl-badge {
  background: linear-gradient(135deg, #8B5CF6, #6366F1);
  box-shadow: 0 2px 5px rgba(139, 92, 246, 0.25);
}

.safelinku-reward-card .rew-count-hl {
  color: #8B5CF6;
}

[data-theme="dark"] .safelinku-reward-card .rew-count-hl {
  color: #A78BFA;
}

.sl-fill {
  background: linear-gradient(90deg, #8B5CF6, #6366F1) !important;
}

.btn-sl-claim {
  background: linear-gradient(135deg, #8B5CF6, #6366F1) !important;
  box-shadow: 0 3px 10px rgba(139, 92, 246, 0.32) !important;
}

.btn-sl-claim:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.45) !important;
}

/* ── Event Banner: Verifikasi WhatsApp ──────────────────────────────────── */
.event-banner-wrap {
  margin: 12px 16px 6px;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.22);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
  user-select: none;
  background: transparent;
  line-height: 0;
}

.event-banner-wrap:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.18);
}

.event-banner-wrap:active {
  transform: scale(0.985);
}

[data-theme="dark"] .event-banner-wrap {
  border-color: rgba(59, 130, 246, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.event-banner-wrap .event-banner-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 13px;
  transition: opacity 0.2s ease;
}

.event-banner-wrap:hover .event-banner-img {
  opacity: 0.95;
}

.event-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #2563EB, #1D4ED8);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
  transition: all 0.15s ease;
}

.event-action-btn:hover {
  background: linear-gradient(135deg, #1D4ED8, #1E40AF);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

.event-status-alert {
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.event-status-alert.pending {
  background: #FFFBEB;
  border: 1px solid #FCD34D;
  color: #92400E;
}

[data-theme="dark"] .event-status-alert.pending {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.3);
  color: #FCD34D;
}

.event-status-alert.approved {
  background: #F0FDF4;
  border: 1px solid #86EFAC;
  color: #166534;
}

[data-theme="dark"] .event-status-alert.approved {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.3);
  color: #86EFAC;
}

.event-status-alert.rejected {
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  color: #991B1B;
}

[data-theme="dark"] .event-status-alert.rejected {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
  color: #FCA5A5;
}

/* ════════════════════ UPLOAD & AVATAR ANIMATIONS ════════════════════ */
.av-modal-box {
  max-width: 440px;
  padding: 24px 22px 30px;
  border-radius: 28px 28px 0 0;
  text-align: center;
  position: relative;
}
@media (min-width: 640px) {
  .modal-overlay {
    align-items: center;
  }
  .modal-box, .av-modal-box {
    border-radius: 24px;
    transform: scale(0.95) translateY(10px);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
  }
  .modal-overlay.show .modal-box, .modal-overlay.show .av-modal-box {
    transform: scale(1) translateY(0);
  }
}

/* Avatar Preview Circle */
.av-preview-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.av-preview-img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-sub, #f3f4f6);
  border: 3px solid var(--card-bg, #ffffff);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 800;
  color: var(--blue, #3b82f6);
  transition: transform 0.25s ease, filter 0.25s ease;
}
.av-preview-img img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.av-preview-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px dashed rgba(59, 130, 246, 0.45);
  pointer-events: none;
  animation: spinSlow 20s linear infinite;
}
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Uploading Overlay with Spinner */
.av-loading-overlay {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.76);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  z-index: 10;
  animation: avFadeIn 0.2s ease;
}
.av-loading-overlay.active {
  display: flex;
}
@keyframes avFadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
.av-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #60a5fa;
  border-right-color: #00e5cc;
  border-radius: 50%;
  animation: avSpin 0.75s linear infinite;
}
@keyframes avSpin {
  to { transform: rotate(360deg); }
}

/* Dropzone */
.av-dropzone {
  border: 2px dashed var(--border, rgba(0, 0, 0, 0.15));
  border-radius: 16px;
  padding: 16px 14px;
  background: var(--bg-sub, #f8fafc);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 12px;
}
.av-dropzone:hover, .av-dropzone.dragover {
  border-color: var(--blue, #3b82f6);
  background: rgba(59, 130, 246, 0.05);
  transform: translateY(-1px);
}
.av-dropzone svg {
  width: 28px;
  height: 28px;
  stroke: var(--blue, #3b82f6);
  fill: none;
  stroke-width: 1.8;
}
.av-dropzone-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #1e293b);
}
.av-dropzone-sub {
  font-size: 11px;
  color: var(--sub, #64748b);
}
.av-file-badge {
  display: none;
  align-items: center;
  gap: 6px;
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  animation: avFadeIn 0.2s ease;
}
.av-file-badge.active {
  display: inline-flex;
}

/* Progress bar */
.av-progress-wrap {
  display: none;
  margin: 14px 0 10px;
  text-align: left;
  animation: avFadeIn 0.25s ease;
}
.av-progress-wrap.active {
  display: block;
}
.av-progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--sub, #64748b);
  margin-bottom: 6px;
}
.av-progress-track {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.av-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #3b82f6, #00e5cc, #60a5fa);
  background-size: 200% 100%;
  border-radius: 999px;
  transition: width 0.3s ease;
  animation: shimmerProg 1.5s infinite linear;
}
@keyframes shimmerProg {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Button with spinner */
.btn-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.85;
}
.btn-loading .btn-text {
  visibility: hidden;
}
.btn-loading::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  top: 50%;
  left: 50%;
  margin-top: -9px;
  margin-left: -9px;
  border: 2.5px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: avSpin 0.7s linear infinite;
}

/* Profile avatar pulsing state during update */
.avatar-updating {
  position: relative;
}
.avatar-updating::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2.5px solid #3b82f6;
  border-top-color: transparent;
  animation: avSpin 0.8s linear infinite;
  pointer-events: none;
}

/* Dark mode adjustments */
[data-theme="dark"] .av-modal-box {
  background: #1e293b;
}
[data-theme="dark"] .av-dropzone {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
}
[data-theme="dark"] .av-dropzone:hover, [data-theme="dark"] .av-dropzone.dragover {
  background: rgba(59, 130, 246, 0.12);
  border-color: #60a5fa;
}
[data-theme="dark"] .av-preview-img {
  background: #0f172a;
  border-color: #1e293b;
}
[data-theme="dark"] .av-progress-track {
  background: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .av-file-badge {
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.3);
}