*{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-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-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;}

/* ───── PAGES ───── */
.page{display:none;flex-direction:column;flex:1;overflow:hidden;}
.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:flex-start;justify-content:space-between;padding:20px 18px 16px;}
.home-greeting h1{font-size:22px;font-weight:800;color:var(--text);}
.home-greeting p{font-size:13px;color:var(--sub);margin-top:2px;}
.notif-btn{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.notif-btn svg{width:26px;height:26px;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;
}
.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 coin icon ──────────────────────────────────────────────
   Layered radial gradient + inset bevel to read as a shiny gold coin
   instead of a flat orange dot; a subtle "$" glyph via clip-path ring. */
.coin, .mini-coin, .bc-coin, .wbc-coin, .pf-bc-coin{
  border-radius:50%;
  flex-shrink:0;
  display:inline-block;
  background:
    radial-gradient(circle at 32% 28%, #FFF3C4 0%, #FFD966 22%, #F3B62B 52%, #C4831A 82%, #96600E 100%);
  box-shadow:
    inset 0 1px 1.5px rgba(255,255,255,0.85),
    inset 0 -1.5px 2px rgba(120,70,0,0.45),
    0 1px 2px rgba(150,90,10,0.35);
  position:relative;
}
.coin::after, .mini-coin::after, .bc-coin::after, .wbc-coin::after, .pf-bc-coin::after{
  content:'';
  position:absolute;
  inset:14%;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.55);
  box-shadow:inset 0 0 0 1px rgba(150,90,10,0.25);
}
.bc-coin{width:20px;height:20px;}
.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 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;}
.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.4);z-index:200;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.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:201;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);}
.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-list{padding:12px 14px;display:flex;flex-direction:column;gap:6px;}
.operator-item{
  display:flex;align-items:center;gap:12px;
  padding:14px 14px;background:var(--white);border-radius:14px;
  cursor:pointer;border:1px solid var(--border);
}
.operator-item.expanded{border-color:var(--blue);}
.op-dot{width:10px;height:10px;border-radius:50%;background:var(--green);flex-shrink:0;}
.op-info{flex:1;}
.op-name{font-size:14px;font-weight:600;color:var(--text);}
.op-avail{font-size:12px;color:var(--sub);margin-top:1px;}
.op-chevron svg{width:18px;height:18px;stroke:var(--sub);fill:none;stroke-width:2.5;}
.server-list{border-top:1px solid var(--light);margin:0 14px 6px;}
.server-item{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;border-bottom:1px solid var(--light);
}
.server-item:last-child{border-bottom:none;}
.srv-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;}
.srv-info{flex:1;}
.srv-name{font-size:13px;font-weight:600;color:var(--text);}
.srv-count{font-size:11px;color:var(--sub);}
.srv-price{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:700;margin-right:10px;color:var(--text);}
.buy-btn{
  background:var(--blue);color:white;border:none;
  padding:7px 16px;border-radius:50px;font-size:13px;font-weight:700;
  cursor:pointer;white-space:nowrap;
}
.buy-btn:active{opacity:0.85;}

/* ───── 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:20px;height:20px;border-radius:50%;background:var(--gold);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;}
/* 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;}

/* ───── 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-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:13px 14px;cursor:pointer;position:relative;}
.pf-item:not(:last-child)::after{content:'';position:absolute;bottom:0;left:62px;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;flex-direction:column;}
.pf-item-name{font-size:14px;font-weight:500;color:var(--text);}
.pf-item-sub{font-size:11.5px;color:var(--sub);margin-top:1px;}
.pf-item-right{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--sub);}
.pf-item-right svg{width:15px;height:15px;stroke:var(--border);fill:none;stroke-width:2.5;}
/* 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:20px 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:16px;}
.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;}

/* ───── 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:fixed;bottom:80px;right:calc(50% - 200px);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;}
.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:center;gap:8px;margin-bottom:16px;margin-top:2px;}
.auth-check-box{width:18px;height:18px;border-radius:5px;border:2px solid var(--blue);background:var(--blue);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.auth-check-box svg{width:11px;height:11px;stroke:white;fill:none;stroke-width:3;}
.auth-check-label{font-size:13px;color:var(--sub);}
.auth-check-label a{color:var(--blue);text-decoration:none;}
/* 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;bottom:90px;left:50%;transform:translateX(-50%) translateY(30px);
  background:#111827;color:white;padding:10px 20px;border-radius:50px;
  font-size:13px;font-weight:500;z-index:999;
  opacity:0;transition:all .3s;pointer-events:none;white-space:nowrap;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ───── 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:white;border-radius:24px 24px 0 0;z-index:500;padding:8px 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:10px auto 16px;}
.pw-sheet-title{font-size:17px;font-weight:700;margin-bottom:16px;}
.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:white;}
.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-bubble{max-width:78%;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-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);}

/* Reply bar */
.tchat-reply-bar{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;background:var(--white);border-top:1px solid var(--border);}
.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);}
.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;}

/* 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-countdown{color:var(--sub);font-size:12px;}
.otp-expire-hint{font-size:11.5px;color:var(--sub);margin-top:10px;}
@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 eye */
[data-theme="dark"] .pw-field { background:var(--input-bg); color:var(--text); border-color:var(--border); }
[data-theme="dark"] .pw-field:focus { background:var(--input-bg); border-color:#93C5FD; }

/* 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);}


/* ── 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;
}

/* ── 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);}