*{box-sizing:border-box;margin:0;padding:0;}
:root{
  --navy:#0f2a5e;--navy2:#1a3a72;--orange:#f97316;--orange-lt:#fff7ed;
  --teal:#2dd4bf;--teal-lt:#e6faf8;--bg:#f4f6fb;
}
html,body{background:var(--bg);font-family:Arial,Helvetica,sans-serif;}
.app{max-width:430px;margin:0 auto;min-height:100vh;background:var(--bg);padding-bottom:76px;position:relative;}
a{text-decoration:none;color:inherit;}

.hdr{background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 100%);padding:18px 16px 46px;position:relative;overflow:hidden;}
.hdr::before{content:'';position:absolute;top:-30px;right:-30px;width:140px;height:140px;border-radius:50%;background:rgba(249,115,22,.08);}
.hdr-row{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1;}
.bwlogo{height:28px;width:auto;}
.pill{background:var(--orange);color:#fff;border:none;padding:7px 16px;border-radius:18px;font-size:12px;font-weight:700;cursor:pointer;}
.pill-out{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2);padding:7px 16px;border-radius:18px;font-size:12px;font-weight:600;cursor:pointer;}

.sb-wrap{padding:0 14px;margin-top:-20px;position:relative;z-index:5;}
.sb{background:#fff;border-radius:13px;padding:11px 14px;display:flex;align-items:center;gap:8px;box-shadow:0 4px 16px rgba(0,0,0,.08);}
.sb i{color:var(--navy2);font-size:16px;}
.sb input{border:none;outline:none;font-size:13px;color:#111827;flex:1;font-family:inherit;background:transparent;}

.stats{display:flex;gap:7px;padding:12px 14px 0;overflow-x:auto;}
.stat{background:#fff;border-radius:12px;padding:8px 11px;display:flex;align-items:center;gap:7px;white-space:nowrap;flex-shrink:0;}
.stat-ico{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;}
.stat-n{font-size:14px;font-weight:700;color:#111827;}
.stat-l{font-size:10px;color:#9ca3af;}

.sec{padding:13px 14px 6px;display:flex;justify-content:space-between;align-items:center;}
.sec-t{font-size:12px;font-weight:700;color:#111827;display:flex;align-items:center;gap:5px;}
.dot{width:6px;height:6px;border-radius:50%;background:var(--teal);}
.sec-a{font-size:10px;color:var(--orange);font-weight:600;}

.card{background:#fff;border-radius:18px;margin:0 14px 12px;overflow:hidden;border:0.5px solid rgba(0,0,0,.06);}
.card-top{background:linear-gradient(135deg,var(--navy),var(--navy2));padding:13px 15px;}
.card-plat{font-size:9px;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.5px;}
.card-name{font-size:14px;font-weight:700;color:#fff;margin-top:2px;}
.chips{display:flex;gap:5px;margin-top:7px;}
.chip{font-size:9px;padding:3px 9px;border-radius:13px;font-weight:600;}
.chip-w{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.18);}
.chip-o{background:var(--orange);color:#fff;}
.chip-t{background:var(--teal);color:var(--navy);}
.card-body{padding:13px 15px;}
.mrow{display:flex;justify-content:space-between;align-items:center;background:#f8fafd;border-radius:9px;padding:8px 11px;margin-bottom:6px;}
.mteam{font-size:11px;color:#374151;font-weight:500;}
.mblur{font-size:11px;color:var(--orange);filter:blur(3.5px);user-select:none;}
.mpick{font-size:11px;color:#059669;font-weight:700;}

.lockbar{background:var(--orange-lt);border:1px dashed var(--orange);border-radius:10px;padding:9px 11px;display:flex;align-items:center;gap:8px;margin:9px 0;}
.lockbar i{color:var(--orange);font-size:15px;flex-shrink:0;}
.lock-m{font-size:10px;font-weight:700;color:#92400e;}
.lock-s{font-size:9px;color:#b45309;margin-top:1px;}

.brow{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:9px;}
.obox{background:#eff0f8;border-radius:9px;padding:6px 11px;text-align:center;}
.olbl{font-size:9px;color:#6b7280;}
.oval{font-size:17px;font-weight:700;color:var(--navy);}
.pbox{text-align:center;}
.plbl{font-size:9px;color:#9ca3af;}
.pval{font-size:12px;font-weight:700;color:#111827;}
.btn-pay{background:var(--orange);color:#fff;border:none;padding:9px 13px;border-radius:10px;font-size:11px;font-weight:700;display:flex;align-items:center;gap:4px;cursor:pointer;white-space:nowrap;}

.card-paid{background:#fff;border-radius:18px;margin:0 14px 12px;overflow:hidden;border:2px solid var(--teal);}
.card-paid-top{background:linear-gradient(135deg,#0a5c4a,#0d7a63);padding:13px 15px;}
.mrow-paid{display:flex;justify-content:space-between;align-items:center;background:var(--teal-lt);border-radius:9px;padding:8px 11px;margin-bottom:6px;}
.codebox{background:#042f2a;border-radius:10px;padding:11px 13px;margin:9px 0;display:flex;align-items:center;gap:9px;}
.codebox i{color:var(--teal);font-size:17px;flex-shrink:0;}
.code-lbl{font-size:8px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.5px;}
.code-val{font-size:15px;font-weight:700;color:var(--teal);letter-spacing:2px;margin-top:2px;}
.btn-see{background:var(--teal);color:var(--navy);border:none;padding:9px 13px;border-radius:10px;font-size:11px;font-weight:700;display:flex;align-items:center;gap:4px;cursor:pointer;}

.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:#fff;display:flex;border-top:0.5px solid rgba(0,0,0,.08);padding:10px 0 18px;z-index:100;}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;color:#9ca3af;font-size:10px;font-weight:500;}
.nav-item.active{color:var(--navy);}
.nav-item i{font-size:21px;}

.auth-top{background:linear-gradient(135deg,var(--navy),var(--navy2));padding:32px 20px 26px;text-align:center;}
.auth-ico{width:54px;height:54px;border-radius:15px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;margin:0 auto 10px;}
.auth-ico i{font-size:26px;color:var(--orange);}
.auth-t{font-size:18px;font-weight:700;color:#fff;}
.auth-s{font-size:12px;color:rgba(255,255,255,.6);margin-top:4px;}
.auth-card{background:#fff;border-radius:22px 22px 0 0;padding:24px 20px;margin-top:-16px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:12px;font-weight:700;color:#6b7280;margin-bottom:5px;}
.field input,.field select,.field textarea{width:100%;padding:11px 13px;border:1.5px solid #e5e7eb;border-radius:11px;font-size:14px;color:#111827;font-family:inherit;outline:none;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--orange);}
.field textarea{resize:vertical;min-height:80px;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.btn-o{background:var(--orange);color:#fff;border:none;width:100%;padding:13px;border-radius:13px;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;font-family:inherit;}
.btn-t{background:var(--teal);color:var(--navy);border:none;width:100%;padding:12px;border-radius:13px;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;font-family:inherit;margin-top:9px;}
.btn-g{background:#fff;border:1.5px solid #e5e7eb;color:#374151;width:100%;padding:11px;border-radius:13px;font-size:12px;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;font-family:inherit;margin-top:8px;}
.divider{display:flex;align-items:center;gap:10px;margin:14px 0;}
.divider hr{flex:1;border:none;border-top:1px solid #f3f4f6;}
.divider span{font-size:11px;color:#9ca3af;}

.flash{margin:10px 14px;padding:11px 14px;border-radius:11px;font-size:13px;font-weight:600;}
.flash-success{background:#dcfce7;color:#166534;border:1px solid #16a34a;}
.flash-error{background:#fee2e2;color:#991b1b;border:1px solid #dc2626;}

.sc-hdr{background:linear-gradient(135deg,var(--navy),var(--navy2));padding:15px 16px;display:flex;align-items:center;gap:10px;}
.sc-t{font-size:14px;font-weight:700;color:#fff;flex:1;}
.back-i{color:#fff;font-size:20px;}

.payinfo{background:var(--orange-lt);border-radius:13px;padding:12px 14px;margin:14px 14px 12px;border:0.5px solid rgba(249,115,22,.3);}
.popt{border:1.5px solid #e5e7eb;border-radius:12px;padding:11px 13px;display:flex;align-items:center;gap:9px;margin:0 14px 8px;cursor:pointer;}
.popt.sel{border-color:var(--orange);background:var(--orange-lt);}
.po-i{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;}
.po-n{font-size:12px;font-weight:700;color:#111827;}
.po-s{font-size:10px;color:#9ca3af;}
.steps{background:#f9fafb;border-radius:12px;padding:12px 14px;margin:0 14px 14px;}
.step{display:flex;gap:9px;margin-bottom:9px;}
.step:last-child{margin-bottom:0;}
.snum{width:22px;height:22px;border-radius:7px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;}
.stxt{font-size:11px;color:#374151;padding-top:2px;}
.ssub{font-size:10px;color:#9ca3af;margin-top:1px;}

.adm-stats{display:flex;gap:6px;margin-top:12px;}
.astat{flex:1;background:rgba(255,255,255,.08);border-radius:10px;padding:9px;text-align:center;border:1px solid rgba(255,255,255,.1);}
.astat-n{font-size:17px;font-weight:700;color:var(--orange);}
.astat-l{font-size:9px;color:rgba(255,255,255,.6);}
.adm-body{background:var(--bg);border-radius:18px 18px 0 0;padding:16px 14px;margin-top:-14px;}
.adm-tabs{display:flex;background:#fff;border-radius:12px;padding:3px;gap:3px;margin-bottom:14px;}
.atab{flex:1;padding:8px;border-radius:9px;border:none;font-size:11px;font-weight:600;color:#6b7280;background:transparent;text-align:center;}
.atab.active{background:var(--navy);color:#fff;}
.sliprow{background:#fff;border-radius:12px;padding:11px 13px;margin-bottom:8px;border:0.5px solid rgba(0,0,0,.05);}
.sliprow-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px;}
.sn{font-size:12px;font-weight:700;color:#111827;}
.sm{font-size:10px;color:#9ca3af;margin-top:2px;}
.badge-on{background:var(--teal-lt);color:#0a5c4a;padding:3px 8px;border-radius:11px;font-size:9px;font-weight:700;border:0.5px solid var(--teal);}
.badge-off{background:#fee2e2;color:#991b1b;padding:3px 8px;border-radius:11px;font-size:9px;font-weight:700;}
.ctag{background:#f3f4f6;padding:2px 7px;border-radius:5px;font-size:10px;color:#374151;font-family:monospace;}
.sbtns{display:flex;gap:6px;margin-top:8px;}
.btnsm-b{background:#eff0f8;color:var(--navy);border:none;padding:6px 12px;border-radius:8px;font-size:10px;font-weight:600;cursor:pointer;}
.btnsm-r{background:#fef2f2;color:#ef4444;border:none;padding:6px 12px;border-radius:8px;font-size:10px;font-weight:600;cursor:pointer;}
.orderrow{background:#fff;border-radius:12px;padding:11px 13px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;border:0.5px solid rgba(0,0,0,.05);}

/* ---- FONTS KUBWA ---- */
.card-name    { font-size:16px; font-weight:700; color:#fff; margin-top:3px; }
.card-plat    { font-size:10px; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.5px; }
.mteam        { font-size:13px; color:#374151; font-weight:600; }
.mblur        { font-size:13px; color:var(--orange); filter:blur(3.5px); user-select:none; }
.mpick        { font-size:13px; color:#059669; font-weight:700; }
.lock-m       { font-size:13px; font-weight:700; color:#92400e; }
.lock-s       { font-size:12px; color:#b45309; margin-top:2px; }
.oval         { font-size:20px; font-weight:700; color:var(--navy); }
.olbl         { font-size:10px; color:#6b7280; }
.pval         { font-size:14px; font-weight:700; color:#111827; }
.plbl         { font-size:10px; color:#9ca3af; }
.stat-n       { font-size:16px; font-weight:700; color:#111827; }
.stat-l       { font-size:11px; color:#9ca3af; }
.empty-t      { font-size:15px; }
.sec-t        { font-size:14px; font-weight:700; }

/* ---- COUNTDOWN ---- */
.countdown-badge {
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.3px;
  transition: background .3s, color .3s;
  white-space:nowrap;
}
.countdown-bar {
  height:5px;
  background:#e5e7eb;
  border-radius:5px;
  margin:8px 0 6px;
  overflow:hidden;
}
.countdown-bar-fill {
  height:100%;
  border-radius:5px;
  background:linear-gradient(90deg,#f97316,#2dd4bf);
  transition: width 1s linear, background .5s;
  width:100%;
}

/* ---- OVERRIDE OLD FONT SIZES (isiwe na conflict) ---- */
.empty{text-align:center;padding:50px 20px;color:#9ca3af;}
.empty i{font-size:42px;display:block;margin-bottom:10px;color:#cbd5e1;}
.empty-t{font-size:13px;}

.profile-card{background:#fff;border-radius:16px;margin:14px;padding:18px;border:0.5px solid rgba(0,0,0,.06);text-align:center;}
.profile-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;margin:0 auto 12px;}
.profile-name{font-size:16px;font-weight:700;color:#111827;}
.profile-phone{font-size:12px;color:#9ca3af;margin-top:3px;}
.profile-stats{display:flex;gap:8px;margin-top:16px;}
.pstat{flex:1;background:#f8fafd;border-radius:10px;padding:10px;}
.pstat-n{font-size:16px;font-weight:700;color:var(--navy);}
.pstat-l{font-size:9px;color:#9ca3af;margin-top:2px;}

/* ---- LANG TOGGLE ---- */
.lang-switch{display:flex;background:rgba(255,255,255,.12);border-radius:14px;padding:2px;gap:2px;}
.lang-btn{padding:3px 9px;border-radius:11px;border:none;font-size:10px;font-weight:700;cursor:pointer;color:rgba(255,255,255,.7);background:transparent;font-family:inherit;text-decoration:none;}
.lang-btn.active{background:white;color:var(--navy);}