:root{--primary:#006b5d;--primary2:#078f7c;--blue:#2563eb;--ink:#172033;--muted:#7b8798;--bg:#f5f8fb;--card:#fff;--line:#e7edf3;--soft:#edf8f6;--danger:#dc3656;--shadow:0 12px 35px rgba(23,32,51,.08)}*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--ink)}button,input,select,textarea{font:inherit}button{cursor:pointer}.top{background:linear-gradient(135deg,#005e54,#00947e);color:#fff;padding:18px 18px 26px;border-radius:0 0 28px 28px;position:sticky;top:0;z-index:10}.toprow{max-width:1050px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{font-size:21px;font-weight:900;letter-spacing:.3px}.topbtn{border:0;background:#ffffff1d;color:#fff;border-radius:13px;padding:10px 13px}.shell{max-width:1050px;margin:18px auto 100px;padding:0 14px}.hero{margin-top:-4px;background:linear-gradient(135deg,#087c6c,#00a387);color:#fff;border-radius:24px;padding:20px;box-shadow:var(--shadow)}.hero h2{margin:0 0 6px}.hero .balance{font-size:30px;font-weight:900}.tabs{display:flex;background:#fff;border-radius:18px;padding:4px;box-shadow:var(--shadow);margin:14px 0}.tabs button{flex:1;border:0;background:transparent;padding:12px;border-radius:14px;font-weight:800;color:var(--muted)}.tabs button.active{background:var(--primary);color:#fff}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.service{background:#fff;border:1px solid var(--line);border-radius:20px;padding:17px;min-height:105px;text-align:left;box-shadow:0 5px 18px rgba(0,0,0,.03)}.service b{display:block;margin-top:9px}.icon{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:#eef7ff;font-size:21px}.card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px;box-shadow:var(--shadow);margin:14px 0}.card h3{margin:0 0 14px}.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.field{margin:9px 0}.field label{display:block;font-size:12px;font-weight:800;margin-bottom:6px;color:#566274}.field input,.field select,.field textarea{width:100%;padding:13px 14px;border:1px solid #dbe3eb;border-radius:13px;background:#fbfcfe;outline:none}.field textarea{min-height:90px;resize:vertical}.btn{width:100%;border:0;border-radius:14px;padding:14px 16px;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;font-weight:900;margin-top:10px}.btn.secondary{background:#eef7f5;color:var(--primary)}.btn.blue{background:linear-gradient(135deg,#2353d5,#4387ff)}.notice{background:#eaf8f6;border-left:4px solid var(--primary);padding:13px;border-radius:13px;color:#315a55;font-size:13px}.price{display:flex;justify-content:space-between;background:#f5f8fb;padding:13px;border-radius:13px;margin:12px 0}.slips{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.slip{border:1px solid var(--line);border-radius:15px;padding:12px;background:#fff}.slip.active{border:2px solid var(--primary);background:#effaf8}.slip img{width:100%;height:60px;object-fit:contain;background:#f8fafc;border-radius:10px}.slip strong{display:block;margin-top:6px}.history-item{border-bottom:1px solid var(--line);padding:13px 0}.history-item:last-child{border:0}.badge{display:inline-block;border-radius:20px;padding:5px 9px;font-size:11px;font-weight:900;background:#eef3ff}.badge.pending{background:#fff4d7}.badge.processing{background:#e8f1ff}.badge.completed{background:#e5f8ef}.badge.rejected,.badge.failed{background:#ffe8ed;color:#a82142}.bottom{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);display:flex;justify-content:center;z-index:20}.bottom-inner{max-width:700px;width:100%;display:flex;justify-content:space-around}.bottom button{border:0;background:none;padding:11px 14px;color:#9aa5b4;font-size:11px;font-weight:800}.bottom button.active{color:var(--primary)}.modal{position:fixed;inset:0;background:#0008;z-index:50;display:none;align-items:flex-end}.modal.show{display:flex}.modalbox{background:#fff;border-radius:26px 26px 0 0;width:100%;max-width:700px;margin:auto;padding:20px;max-height:90vh;overflow:auto}.close{float:right;border:0;background:#eef2f5;border-radius:50%;width:35px;height:35px}.auth{max-width:460px;margin:60px auto;padding:18px}.auth .brand{color:var(--primary);font-size:28px;margin-bottom:8px}.hidden{display:none!important}.file{padding:12px;border:1px dashed #b9c6d3;border-radius:13px;width:100%;background:#fafcff}.two-step{display:flex;gap:6px;margin-bottom:16px}.step{flex:1;padding:9px;border-radius:12px;background:#eef2f5;text-align:center;font-size:12px;font-weight:800}.step.on{background:#dff5f0;color:var(--primary)}.tablewrap{overflow:auto}.table{width:100%;border-collapse:collapse;font-size:13px}.table th,.table td{padding:11px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}.adminnav{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.adminnav button{border:1px solid var(--line);background:#fff;padding:10px 13px;border-radius:12px}.adminnav button.on{background:var(--primary);color:#fff}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat{background:#fff;border-radius:18px;padding:16px;border:1px solid var(--line)}.stat strong{font-size:23px;display:block;margin-top:5px}@media(max-width:720px){.grid{grid-template-columns:repeat(2,1fr)}.row,.stats{grid-template-columns:1fr}.service{min-height:95px}.slips{grid-template-columns:1fr 1fr;}}@media(max-width:420px){.grid{grid-template-columns:1fr 1fr}.service{padding:12px}.shell{padding:0 10px}}
.consent-box{padding:10px 12px;border:1px solid #d8e3e1;border-radius:10px;background:#f7fbfa}.consent-box label{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.4}.consent-box input{margin-top:3px}

/* Service category navigation */
.serviceGroup{display:flex;align-items:center;gap:12px;text-align:left;width:100%;min-height:82px;padding:14px;border:1px solid rgba(0,107,93,.12);border-radius:16px;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.05);cursor:pointer}
.serviceGroup:active{transform:scale(.99)}
.groupIcon{width:48px;height:48px;min-width:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;background:#e9f7f4;color:#006b5d;font-weight:800}
.groupText{display:flex;flex-direction:column;gap:3px;flex:1}
.groupText b{font-size:15px}
.groupText small{color:#667085}
.groupText span{font-size:12px;color:#006b5d;font-weight:700}
.groupArrow{font-size:28px;color:#98a2b3}
.categoryHead{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.categoryHead h2{margin:0 0 3px}
.categoryServices{display:flex;flex-direction:column;gap:9px;max-height:65vh;overflow:auto}
.categoryService{display:flex;align-items:center;gap:10px;text-align:left;width:100%;padding:12px;border:1px solid #e7eceb;border-radius:13px;background:#fff;cursor:pointer}
.categoryService .icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:#f2f7f6}
.categoryService div:nth-child(2){flex:1;display:flex;flex-direction:column;gap:3px}
.categoryService>span{font-size:24px;color:#98a2b3}

/* V21: independent verification services */
.independentTitle,.categoryTitle{display:flex;align-items:end;justify-content:space-between;margin:8px 2px 10px}
.independentTitle h3,.categoryTitle h3{margin:0;font-size:16px}
.independentGrid{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:18px}
.independentService{display:flex;align-items:center;gap:11px;text-align:left;width:100%;min-height:68px;padding:12px;border:1px solid rgba(0,107,93,.14);border-radius:15px;background:#fff;box-shadow:0 3px 12px rgba(0,0,0,.045);cursor:pointer}
.independentService .icon{width:40px;height:40px;min-width:40px;display:flex;align-items:center;justify-content:center;border-radius:11px;background:#e9f7f4;color:#006b5d}
.independentServiceText{display:flex;flex-direction:column;gap:3px;flex:1}
.independentServiceText b{font-size:14px}

/* =========================================================
   ELTECHHUB — SERVICE ICONS & RESPONSIVE GRID FINAL OVERRIDE
   ========================================================= */

/* Verification service cards */
.independentGrid,
.categoryGrid{
  display:grid;
  width:100%;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

/* Individual verification card */
.independentService{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.independentService .icon{
  flex:0 0 42px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:13px;
  font-size:21px;
  background:#eef7ff;
}

.independentServiceText{
  min-width:0;
  flex:1;
}

.independentServiceText b{
  display:block;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.independentServiceText small{
  display:block;
  margin-top:4px;
}

.groupIcon{
  flex:0 0 44px;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#eef8f6;
  font-size:22px;
}

.serviceGroup{
  min-width:0;
}

.serviceGroup .groupText{
  min-width:0;
  flex:1;
}

.serviceGroup .groupText b{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Tablet */
@media (max-width:900px){
  .independentGrid,
  .categoryGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Mobile: ALWAYS TWO SERVICES PER ROW */
@media (max-width:640px){
  .independentGrid,
  .categoryGrid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px;
  }

  .independentService{
    min-height:82px;
    padding:11px;
    gap:8px;
    border-radius:14px;
  }

  .independentService .icon{
    flex-basis:36px;
    width:36px;
    height:36px;
    font-size:18px;
    border-radius:11px;
  }

  .independentServiceText b{
    font-size:12px;
  }

  .independentServiceText small{
    font-size:10px;
  }

  .groupIcon{
    flex-basis:36px;
    width:36px;
    height:36px;
    font-size:18px;
    border-radius:11px;
  }

  .serviceGroup{
    min-height:78px;
    padding:10px;
    border-radius:14px;
    gap:8px;
  }

  .serviceGroup .groupText b{
    font-size:12px;
  }

  .serviceGroup .groupText small,
  .serviceGroup .groupText span{
    font-size:10px;
  }
}

/* Very small phones: still keep two columns */
@media (max-width:360px){
  .independentGrid,
  .categoryGrid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px;
  }

  .independentService{
    padding:9px;
  }

  .independentService .icon{
    flex-basis:32px;
    width:32px;
    height:32px;
    font-size:16px;
  }
}



/* =========================================================
   ELTECHHUB — QUICK NIN / BVN DASHBOARD
   ========================================================= */

.quickVerifySection{
  width:100%;
  margin:0 0 18px;
}

.quickVerifyTitle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 0 10px;
}

.quickVerifyTitle h3{
  margin:0 0 3px;
  font-size:18px;
  font-weight:900;
}

.quickVerifyGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.quickVerifyCard{
  width:100%;
  min-width:0;
  min-height:116px;
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  border:1px solid var(--line);
  border-radius:20px;
  padding:15px;
  background:#fff;
  box-shadow:0 6px 20px rgba(23,32,51,.055);
  transition:transform .16s ease, box-shadow .16s ease;
}

.quickVerifyCard:active{
  transform:scale(.985);
}

.quickVerifyIcon{
  flex:0 0 50px;
  width:50px;
  height:50px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-size:24px;
  background:#eaf8f6;
}

.quickVerify-BVN .quickVerifyIcon{
  background:#edf3ff;
}

.quickVerifyText{
  min-width:0;
  flex:1;
}

.quickVerifyText b{
  display:block;
  margin:0;
  font-size:14px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.quickVerifyText small{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
}

.quickVerifyText span{
  display:block;
  margin-top:5px;
  color:var(--primary);
  font-size:11px;
  font-weight:900;
}

.quickVerifyArrow{
  flex:0 0 30px;
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#eef7f5;
  color:var(--primary);
  font-size:22px;
  line-height:1;
}

.quickVerify-BVN .quickVerifyArrow{
  background:#eef3ff;
  color:#2563eb;
}

.bottom button{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
}

.bottomIcon{
  display:block;
  height:22px;
  font-size:18px;
  line-height:22px;
}

@media(max-width:640px){
  .quickVerifyGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }

  .quickVerifyCard{
    min-height:92px;
    padding:10px;
    gap:8px;
    border-radius:15px;
  }

  .quickVerifyIcon{
    flex:0 0 36px;
    width:36px;
    height:36px;
    border-radius:11px;
    font-size:18px;
  }

  .quickVerifyText b{
    font-size:11px;
  }

  .quickVerifyText small{
    font-size:9px;
  }

  .quickVerifyText span{
    font-size:9px;
  }

  .quickVerifyArrow{
    flex:0 0 25px;
    width:25px;
    height:25px;
    font-size:18px;
  }
}

@media(max-width:360px){
  .quickVerifyGrid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .quickVerifyCard{
    padding:8px;
  }
}

/* Verification service modal image icons */
.serviceModalHead{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}

.serviceModalHead h2{
  margin:0;
}

.serviceModalIcon{
  width:52px;
  height:52px;
  border-radius:16px;
  object-fit:contain;
  flex:0 0 52px;
}

@media(max-width:480px){
  .serviceModalIcon{
    width:46px;
    height:46px;
    flex-basis:46px;
    border-radius:14px;
  }

  .serviceModalHead{
    gap:10px;
  }
}

/* =========================================================
   NIN SLIP SELECTOR — IMAGE CARD UI
   ========================================================= */

.slipSelectorTitle{
  margin:4px 0 12px;
}

.slipSelectorTitle h3{
  margin:0 0 3px;
  font-size:16px;
  font-weight:900;
}

.slips.ninSlipGrid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
}

.ninSlipGrid .slip{
  min-width:0;
  padding:10px;
  border:2px solid #e8edf3;
  border-radius:18px;
  background:#fff;
  text-align:center;
  cursor:pointer;
  transition:.18s ease;
}

.ninSlipGrid .slip:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(23,32,51,.08);
}

.ninSlipGrid .slip.active{
  border-color:var(--primary);
  background:#effaf8;
  box-shadow:0 7px 18px rgba(0,107,93,.10);
}

.slipImageWrap{
  width:100%;
  height:95px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:8px;
  overflow:hidden;
  border-radius:12px;
  background:#fff;
}

.slipImageWrap img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.slipFallback{
  font-size:32px;
  color:var(--primary);
}

.ninSlipGrid .slip strong{
  display:block;
  margin:0;
  font-size:13px;
  font-weight:900;
  color:var(--ink);
}

.ninSlipGrid .slip small{
  display:block;
  margin-top:6px;
  color:#2563eb;
  font-size:12px;
  font-weight:900;
}

/* Tablet */
@media(max-width:900px){
  .slips.ninSlipGrid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

/* Phone */
@media(max-width:640px){
  .slips.ninSlipGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }

  .ninSlipGrid .slip{
    padding:8px;
    border-radius:15px;
  }

  .slipImageWrap{
    height:72px;
  }

  .ninSlipGrid .slip strong{
    font-size:11px;
  }

  .ninSlipGrid .slip small{
    font-size:10px;
  }
}


/* =========================================================
   DASHBOARD SERVICE CARDS — RESPONSIVE
   ========================================================= */

#serviceGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

#serviceGrid .service{
  min-width:0;
  max-width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

#serviceGrid .service small{
  display:none;
}

#serviceGrid .service > span:last-child{
  display:none !important;
}

@media (max-width:700px){
  #serviceGrid{
    display:grid !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px !important;
  }

  #serviceGrid .service{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:100px !important;
    padding:12px 7px !important;
    border-radius:17px !important;
    overflow:hidden;
    text-align:center !important;
  }

  #serviceGrid .service .icon{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    margin-bottom:7px !important;
    font-size:20px !important;
  }

  #serviceGrid .service b{
    width:100%;
    min-width:0;
    margin:0 !important;
    font-size:11px !important;
    line-height:1.25 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }
}

@media (max-width:380px){
  #serviceGrid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
  }

  #serviceGrid .service{
    min-height:91px !important;
    padding:9px 5px !important;
    border-radius:15px !important;
  }

  #serviceGrid .service .icon{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    font-size:18px !important;
  }

  #serviceGrid .service b{
    font-size:10px !important;
  }
}


/* IPE V2 Reply: returned Tracking ID on top, returned NIN below */
.validation-v2-reply div{
  line-height:1.35;
}

.validation-v2-reply div + div{
  margin-top:4px;
}


/* BVN Retrieval result table */
.ev-bvn-result-table-wrap{
  width:100%;
  overflow:hidden;
  border:1px solid #e5e7eb;
  border-radius:16px;
  background:#fff;
  margin-top:16px;
}

.ev-bvn-result-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}

.ev-bvn-result-table th,
.ev-bvn-result-table td{
  padding:14px 16px;
  border-bottom:1px solid #e5e7eb;
  text-align:left;
  vertical-align:middle;
  word-break:break-word;
}

.ev-bvn-result-table tr:last-child th,
.ev-bvn-result-table tr:last-child td{
  border-bottom:0;
}

.ev-bvn-result-table th{
  width:42%;
  font-weight:700;
  color:#475569;
  background:#f8fafc;
}

.ev-bvn-result-table td{
  color:#172033;
  font-weight:600;
}

@media (max-width:600px){
  .ev-bvn-result-table th,
  .ev-bvn-result-table td{
    padding:12px 13px;
    font-size:14px;
  }

  .ev-bvn-result-table th{
    width:43%;
  }
}


/* =========================================================
   ELTECHHUB — FINAL MOBILE RESPONSIVE PATCH
   UI/RESPONSIVENESS ONLY — NO SERVICE/API LOGIC CHANGED
   ========================================================= */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

body {
  min-width: 0 !important;
}

#app,
main,
section,
.top,
.toprow,
.shell,
.card,
.hero,
.tabs {
  min-width: 0;
  max-width: 100%;
}

/* Prevent flex/grid children from forcing page width */
.toprow > *,
.user-actions,
.site-brand,
.site-brand > *,
.card > *,
.hero > *,
.tabs > *,
.field,
.row > * {
  min-width: 0;
}

.site-brand {
  flex: 1 1 auto;
}

.site-brand-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.user-actions {
  flex: 0 1 auto;
}

/* Inputs must never exceed their parent */
.field input,
.field select,
.field textarea,
.file,
button {
  max-width: 100%;
  box-sizing: border-box;
}

.field input,
.field select,
.field textarea {
  min-width: 0;
}

/* =========================================================
   TABLES — scroll the table, NOT the whole page
   ========================================================= */

.tablewrap,
.ev-bvn-result-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.table {
  min-width: 620px;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 700px) {

  html,
  body,
  #app {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  .top {
    width: 100%;
    max-width: 100%;
    padding: 13px 11px 18px;
    border-radius: 0 0 22px 22px;
  }

  .toprow {
    width: 100%;
    max-width: 100%;
    gap: 8px;
  }

  .site-brand {
    gap: 7px;
  }

  .site-brand-text {
    font-size: 17px;
    white-space: nowrap;
  }

  .site-brand small {
    font-size: 9px;
    white-space: normal;
    line-height: 1.2;
  }

  .user-actions {
    gap: 4px;
  }

  .avatar-btn,
  .topbtn {
    padding: 8px 9px;
    border-radius: 11px;
    font-size: 12px;
  }

  .header-avatar {
    width: 30px;
    height: 30px;
  }

  .shell {
    width: 100%;
    max-width: 100%;
    margin: 12px auto 88px;
    padding: 0 10px;
  }

  .hero {
    width: 100%;
    max-width: 100%;
    padding: 17px;
    border-radius: 20px;
  }

  .hero .balance {
    font-size: 27px;
  }

  .tabs {
    width: 100%;
    max-width: 100%;
    margin: 11px 0;
  }

  .tabs button {
    min-width: 0;
    padding: 10px 7px;
    font-size: 12px;
  }

  /* =======================================================
     SERVICES — EXACTLY 2 PER ROW ON MOBILE
     ======================================================= */

  #serviceGrid {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 9px !important;
  }

  #serviceGrid .service {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    min-height: 100px !important;
    padding: 12px 7px !important;

    border-radius: 17px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;

    overflow: hidden;
  }

  #serviceGrid .service .icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    margin-bottom: 7px !important;
    font-size: 20px !important;
  }

  #serviceGrid .service b {
    width: 100%;
    min-width: 0;
    margin: 0 !important;

    font-size: 11px !important;
    line-height: 1.25 !important;

    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* =======================================================
     FORMS — ONE FIELD PER ROW ON MOBILE
     ======================================================= */

  .row {
    width: 100%;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }

  .field {
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
  }

  .field input,
  .field select,
  .field textarea,
  .file {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* =======================================================
     CARDS
     ======================================================= */

  .card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 15px;
    border-radius: 20px;
  }

  .card h3 {
    font-size: 18px;
  }

  .notice {
    width: 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .price {
    width: 100%;
    max-width: 100%;
    gap: 10px;
    flex-wrap: wrap;
  }

  /* =======================================================
     SLIPS
     ======================================================= */

  .slips,
  .slips.ninSlipGrid {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 9px !important;
  }

  .slip {
    min-width: 0 !important;
    max-width: 100%;
    padding: 9px;
    overflow: hidden;
  }

  .slip img {
    max-width: 100%;
  }

  /* =======================================================
     MODALS
     ======================================================= */

  .modal {
    width: 100%;
    max-width: 100%;
  }

  .modalbox {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 auto !important;

    padding: 16px !important;

    border-radius: 22px 22px 0 0;

    max-height: 94vh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* =======================================================
     PROFILE
     ======================================================= */

  .profile-head {
    min-width: 0;
    gap: 10px;
  }

  .profile-head > div:last-child {
    min-width: 0;
  }

  .profile-head h3 {
    margin-bottom: 3px;
  }

  /* =======================================================
     WALLET BUTTONS
     ======================================================= */

  #walletView .card > div[style*="display:flex"] {
    width: 100% !important;
    max-width: 100%;
  }

  #walletView .card > div[style*="display:flex"] .btn {
    flex: 1 1 0;
    min-width: 0;
  }

  /* =======================================================
     BOTTOM NAV
     ======================================================= */

  .bottom {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .bottom-inner {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .bottom button {
    min-width: 0;
    padding: 10px 7px;
    font-size: 10px;
  }

  /* =======================================================
     TEXT SAFETY
     ======================================================= */

  h1,
  h2,
  h3,
  h4,
  p,
  small,
  strong,
  b,
  label,
  span {
    overflow-wrap: anywhere;
  }
}

/* =========================================================
   SMALL PHONES — 360px and below
   ========================================================= */

@media screen and (max-width: 380px) {

  .shell {
    padding-left: 8px;
    padding-right: 8px;
  }

  .top {
    padding-left: 9px;
    padding-right: 9px;
  }

  .site-brand-text {
    font-size: 15px;
  }

  .site-brand small {
    font-size: 8px;
  }

  .avatar-btn span {
    display: none;
  }

  .avatar-btn,
  .topbtn {
    padding: 7px 8px;
  }

  #serviceGrid {
    gap: 7px !important;
  }

  #serviceGrid .service {
    min-height: 91px !important;
    padding: 9px 5px !important;
    border-radius: 15px !important;
  }

  #serviceGrid .service .icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    font-size: 18px !important;
  }

  #serviceGrid .service b {
    font-size: 10px !important;
  }

  .card {
    padding: 13px;
    border-radius: 18px;
  }

  .modalbox {
    padding: 14px !important;
  }
}


/* =========================================================
   ELTECHHUB — MOBILE SERVICE SECTIONS
   Keep Quick Verification + Verification Services full-width
   ========================================================= */

@media (max-width:700px){

  #serviceGrid > .quickVerifySection,
  #serviceGrid > .serviceSection{
    grid-column:1 / -1 !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  .quickVerifyGrid,
  .independentGrid,
  .categoryGrid{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px !important;
  }

  .quickVerifyCard,
  .independentService,
  .serviceGroup{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }
}

@media (max-width:380px){

  .quickVerifyGrid,
  .independentGrid,
  .categoryGrid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
  }

}




/* =========================================================
   ELTECHVERIFY — AUTHORITATIVE SERVICE LAYOUT
   #serviceGrid is a wrapper only.
   Inner grids control their own responsive columns.
   ========================================================= */

#serviceGrid{
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0;
  padding:0;
  box-sizing:border-box;
}

#serviceGrid > .quickVerifySection,
#serviceGrid > .serviceSection{
  width:100%;
  max-width:100%;
  min-width:0;
  margin-left:0;
  margin-right:0;
  box-sizing:border-box;
}

#serviceGrid .quickVerifyGrid,
#serviceGrid .independentGrid,
#serviceGrid .categoryGrid{
  width:100%;
  max-width:100%;
  min-width:0;
  display:grid;
  box-sizing:border-box;
}

#serviceGrid .quickVerifyGrid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

#serviceGrid .independentGrid,
#serviceGrid .categoryGrid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

#serviceGrid .quickVerifyCard,
#serviceGrid .independentService,
#serviceGrid .serviceGroup{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}

#serviceGrid .quickVerifyText,
#serviceGrid .independentServiceText,
#serviceGrid .groupText{
  min-width:0;
  max-width:100%;
}

#serviceGrid .quickVerifyText b,
#serviceGrid .quickVerifyText small,
#serviceGrid .quickVerifyText span,
#serviceGrid .independentServiceText b,
#serviceGrid .independentServiceText small,
#serviceGrid .groupText b,
#serviceGrid .groupText small,
#serviceGrid .groupText span{
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Tablet */
@media screen and (min-width:701px) and (max-width:1100px){
  #serviceGrid .independentGrid,
  #serviceGrid .categoryGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Mobile */
@media screen and (max-width:700px){
  html,
  body,
  #app{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:hidden;
  }

  .shell{
    width:100%;
    max-width:100%;
    min-width:0;
    padding-left:10px;
    padding-right:10px;
    box-sizing:border-box;
  }

  #homeView,
  #servicesPanel,
  #serviceGrid{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }

  #serviceGrid .quickVerifyGrid,
  #serviceGrid .independentGrid,
  #serviceGrid .categoryGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }

  #serviceGrid .quickVerifyCard{
    min-width:0;
    padding:10px;
  }

  #serviceGrid .independentService,
  #serviceGrid .serviceGroup{
    min-width:0;
    padding:10px;
  }

  #serviceGrid .quickVerifyText b{
    font-size:11px;
    white-space:normal;
    overflow-wrap:anywhere;
  }

  #serviceGrid .quickVerifyText small,
  #serviceGrid .quickVerifyText span{
    font-size:9px;
  }

  #serviceGrid .independentServiceText b,
  #serviceGrid .groupText b{
    font-size:11px;
  }
}

/* Small phones */
@media screen and (max-width:380px){
  .shell{
    padding-left:8px;
    padding-right:8px;
  }

  #serviceGrid .quickVerifyGrid,
  #serviceGrid .independentGrid,
  #serviceGrid .categoryGrid{
    gap:7px;
  }

  #serviceGrid .quickVerifyCard{
    padding:8px;
  }

  #serviceGrid .independentService,
  #serviceGrid .serviceGroup{
    padding:8px;
  }

  #serviceGrid .quickVerifyText b,
  #serviceGrid .independentServiceText b,
  #serviceGrid .groupText b{
    font-size:10px;
  }
}

/* Prevent service content from creating viewport overflow */
#serviceGrid *,
#servicesPanel *{
  box-sizing:border-box;
}


/* =========================================================
   ELTECHVERIFY — DARK MODE
   Does not alter layout/responsive behavior
   ========================================================= */

html.dark-mode {
  color-scheme: dark;

  --bg: #0b1220;
  --card: #111a2a;
  --ink: #edf3f8;
  --muted: #9aa7b8;
  --line: #243244;
  --soft: #132821;
  --shadow: 0 12px 35px rgba(0,0,0,.28);
}

html.dark-mode body {
  background: var(--bg);
  color: var(--ink);
}

/* Header */
html.dark-mode .top {
  background: linear-gradient(135deg,#063f39,#087d6c);
}

html.dark-mode .brand,
html.dark-mode .site-brand-text {
  color: #fff;
}

html.dark-mode .site-brand small {
  color: #c7d8d6;
}

/* Theme button */
.theme-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  background: rgba(255,255,255,.10);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.theme-btn:active {
  transform: scale(.97);
}

/* Main cards */
html.dark-mode .card,
html.dark-mode .tabs,
html.dark-mode .service,
html.dark-mode .quickVerifyCard,
html.dark-mode .independentService,
html.dark-mode .serviceGroup,
html.dark-mode .slip {
  background: var(--card);
  border-color: var(--line);
  box-shadow: 0 6px 20px rgba(0,0,0,.20);
}

/* Hero */
html.dark-mode .hero {
  background: linear-gradient(135deg,#075f54,#078c76);
}

html.dark-mode .hero .muted {
  color: #cde9e4 !important;
}

/* Tabs */
html.dark-mode .tabs button {
  color: #9eabba;
}

html.dark-mode .tabs button.active {
  background: #087f70;
  color: #fff;
}

/* Service text */
html.dark-mode .service b,
html.dark-mode .quickVerifyText b,
html.dark-mode .independentServiceText b,
html.dark-mode .groupText b,
html.dark-mode .categoryHead h2,
html.dark-mode .serviceSection h3,
html.dark-mode .quickVerifyTitle h3,
html.dark-mode .categoryTitle h3,
html.dark-mode .independentTitle h3 {
  color: #f2f6fa;
}

html.dark-mode .quickVerifyText small,
html.dark-mode .independentServiceText small,
html.dark-mode .groupText small,
html.dark-mode .muted {
  color: #9aa7b8;
}

/* Icons */
html.dark-mode .icon,
html.dark-mode .quickVerifyIcon,
html.dark-mode .independentService .icon,
html.dark-mode .categoryService .icon {
  background: #172638;
  color: #9ee9dc;
}

html.dark-mode .quickVerify-BVN .quickVerifyIcon {
  background: #182743;
  color: #a8c4ff;
}

/* Arrows */
html.dark-mode .quickVerifyArrow {
  background: #16332f;
  color: #8ee4d7;
}

html.dark-mode .quickVerify-BVN .quickVerifyArrow {
  background: #182743;
  color: #93b5ff;
}

html.dark-mode .groupArrow {
  color: #8997a8;
}

/* Forms */
html.dark-mode .field label {
  color: #b9c5d4;
}

html.dark-mode .field input,
html.dark-mode .field select,
html.dark-mode .field textarea,
html.dark-mode .file {
  background: #0d1726;
  border-color: #2a3a4d;
  color: #edf3f8;
}

html.dark-mode .field input::placeholder,
html.dark-mode .field textarea::placeholder {
  color: #77879a;
}

/* Buttons */
html.dark-mode .btn.secondary {
  background: #16332f;
  color: #81d9ca;
}

/* Notice / price */
html.dark-mode .notice {
  background: #102923;
  border-left-color: #0da18d;
  color: #b8e8df;
}

html.dark-mode .price {
  background: #0d1726;
  color: #e9eff5;
}

/* Steps */
html.dark-mode .step {
  background: #1a2433;
  color: #a7b3c2;
}

html.dark-mode .step.on {
  background: #163b34;
  color: #85d9ca;
}

/* Badges */
html.dark-mode .badge {
  background: #1b2940;
  color: #bdd0ff;
}

html.dark-mode .badge.pending {
  background: #43361a;
  color: #f1d18a;
}

html.dark-mode .badge.processing {
  background: #172b47;
  color: #9dc0ff;
}

html.dark-mode .badge.completed {
  background: #15372d;
  color: #8fe0bf;
}

html.dark-mode .badge.rejected,
html.dark-mode .badge.failed {
  background: #421e29;
  color: #ff9db2;
}

/* Tables */
html.dark-mode .table,
html.dark-mode .validation-v2-table {
  color: #e8eef5;
}

html.dark-mode .table th,
html.dark-mode .table td {
  border-bottom-color: var(--line);
}

html.dark-mode .validation-v2-table-wrap,
html.dark-mode .ev-bvn-result-table-wrap {
  background: var(--card);
  border-color: var(--line);
}

html.dark-mode .validation-v2-table thead th {
  background: #172233;
  color: #aab6c5;
}

/* Modal */
html.dark-mode .modalbox {
  background: #111a2a;
  color: #edf3f8;
}

html.dark-mode .close {
  background: #1d2938;
  color: #dce5ee;
}

/* Bottom navigation */
html.dark-mode .bottom {
  background: #101927;
  border-top-color: #243244;
}

html.dark-mode .bottom button {
  color: #77879a;
}

html.dark-mode .bottom button.active {
  color: #73d5c6;
}

/* Auth */
html.dark-mode .auth {
  color: var(--ink);
}

html.dark-mode .auth .brand {
  color: #5fd1c0;
}

html.dark-mode .landing-info-modal,
html.dark-mode .landing-info-overlay {
  color: var(--ink);
}

/* Slip selector */
html.dark-mode .slipImageWrap,
html.dark-mode .ninSlipGrid .slip {
  background: var(--card);
}

html.dark-mode .slip.active {
  background: #12372f;
  border-color: #0da18d;
}

/* Links */
html.dark-mode a {
  color: #72cfc1;
}

/* Mobile theme button */
@media (max-width:700px){
  .theme-btn {
    width:34px;
    height:34px;
    border-radius:10px;
    font-size:15px;
  }
}


/* =========================================================
   PRECISE CONSENT CHECKBOX
   ========================================================= */

.consent-box label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.consent-box input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  min-height: 16px !important;
  margin: 2px 0 0 0 !important;
  padding: 0 !important;
  border: 1.5px solid #aab7c4;
  border-radius: 4px;
  background: #fff;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  flex: 0 0 16px;
  box-sizing: border-box;
}

.consent-box input[type="checkbox"]::before {
  content: "";
  width: 8px;
  height: 8px;
  transform: scale(0);
  transition: transform .12s ease;
  background: #006b5d;
  border-radius: 2px;
}

.consent-box input[type="checkbox"]:checked {
  border-color: #006b5d;
}

.consent-box input[type="checkbox"]:checked::before {
  transform: scale(1);
}

.consent-box input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(0,107,93,.25);
  outline-offset: 2px;
}

/* Dark mode */
html.dark-mode .consent-box input[type="checkbox"] {
  background: #0d1726;
  border-color: #526276;
}

html.dark-mode .consent-box input[type="checkbox"]:checked {
  border-color: #39b9a6;
}

html.dark-mode .consent-box input[type="checkbox"]::before {
  background: #39b9a6;
}

/* =========================================================
   STANDARD CONSENT NOTICE
   ========================================================= */

.consent-box {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #e3e8ee;
  border-radius: 10px;
  background: #f8fafc;
  color: #667085;
  font-size: 12px;
  line-height: 1.5;
  box-sizing: border-box;
}

.consent-box label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  margin: 0;
  color: #667085;
  font-size: 12px;
  line-height: 1.5;
}

.consent-box label span,
.consent-box label {
  overflow-wrap: anywhere;
}

.consent-box strong {
  color: #344054;
  font-weight: 700;
}

.consent-box a {
  color: #006b5d;
  font-weight: 600;
  text-decoration: none;
}

.consent-box a:hover {
  text-decoration: underline;
}

/* Dark mode */
html.dark-mode .consent-box {
  background: #101a28;
  border-color: #263548;
  color: #9aa7b8;
}

html.dark-mode .consent-box label {
  color: #9aa7b8;
}

html.dark-mode .consent-box strong {
  color: #dce5ee;
}

html.dark-mode .consent-box a {
  color: #6ed3c4;
}

/* Small screens */
@media (max-width: 480px) {
  .consent-box {
    padding: 9px 10px;
    gap: 8px;
    font-size: 11px;
    line-height: 1.45;
    border-radius: 9px;
  }

  .consent-box label {
    gap: 7px;
    font-size: 11px;
    line-height: 1.45;
  }
}

/* =========================================================
   ELTECHVERIFY — COMPLETE DARK MODE FOR HISTORY TABLES
   ========================================================= */

/* Main history / generic tables */
html.dark-mode .tablewrap,
html.dark-mode .validation-v2-table-wrap,
html.dark-mode .ev-bvn-result-table-wrap,
html.dark-mode .ev-history-table-wrap {
  background: #111a2a !important;
  border-color: #263548 !important;
  color: #e8eef5 !important;
}

/* Generic tables */
html.dark-mode .table,
html.dark-mode .table table,
html.dark-mode .ev-history-table {
  background: #111a2a !important;
  color: #e8eef5 !important;
}

html.dark-mode .table th,
html.dark-mode .table td,
html.dark-mode .ev-history-table th,
html.dark-mode .ev-history-table td {
  background: transparent !important;
  color: #dce5ee !important;
  border-bottom-color: #263548 !important;
}

/* Table headings */
html.dark-mode .table thead th,
html.dark-mode .ev-history-table thead th,
html.dark-mode .validation-v2-table thead th {
  background: #172233 !important;
  color: #aebaca !important;
  border-bottom-color: #2a3a4d !important;
}

/* Validation/history tables */
html.dark-mode .validation-v2-table {
  background: #111a2a !important;
  color: #e8eef5 !important;
}

html.dark-mode .validation-v2-table tbody td {
  background: #111a2a !important;
  color: #dce5ee !important;
  border-bottom-color: #263548 !important;
}

/* Zebra / hover states */
html.dark-mode .table tbody tr:nth-child(even),
html.dark-mode .ev-history-table tbody tr:nth-child(even),
html.dark-mode .validation-v2-table tbody tr:nth-child(even) {
  background: #131e2d !important;
}

html.dark-mode .table tbody tr:hover,
html.dark-mode .ev-history-table tbody tr:hover,
html.dark-mode .validation-v2-table tbody tr:hover {
  background: #19283a !important;
}

/* History list items */
html.dark-mode .history-item {
  border-bottom-color: #263548 !important;
  color: #dce5ee !important;
}

/* History titles / labels */
html.dark-mode .validation-v2-history-wrap .ev-history-title,
html.dark-mode .history-item b,
html.dark-mode .history-item strong {
  color: #eef4f8 !important;
}

/* Pagination */
html.dark-mode .validation-v2-pagination {
  color: #dce5ee !important;
}

html.dark-mode .validation-v2-pagination .btn {
  background: #172233 !important;
  border-color: #2b3c50 !important;
  color: #dce5ee !important;
}

html.dark-mode .validation-v2-pagination .btn:hover:not(:disabled) {
  background: #203247 !important;
}

/* Empty/loading states */
html.dark-mode .validation-v2-empty,
html.dark-mode .ev-history-empty,
html.dark-mode .history-empty {
  background: #111a2a !important;
  color: #98a7b7 !important;
}

/* Scrollbars inside history tables */
html.dark-mode .tablewrap::-webkit-scrollbar-track,
html.dark-mode .validation-v2-table-wrap::-webkit-scrollbar-track,
html.dark-mode .ev-bvn-result-table-wrap::-webkit-scrollbar-track {
  background: #0d1624 !important;
}

html.dark-mode .tablewrap::-webkit-scrollbar-thumb,
html.dark-mode .validation-v2-table-wrap::-webkit-scrollbar-thumb,
html.dark-mode .ev-bvn-result-table-wrap::-webkit-scrollbar-thumb {
  background: #394b60 !important;
}

html.dark-mode .tablewrap::-webkit-scrollbar-thumb:hover,
html.dark-mode .validation-v2-table-wrap::-webkit-scrollbar-thumb:hover,
html.dark-mode .ev-bvn-result-table-wrap::-webkit-scrollbar-thumb:hover {
  background: #50657d !important;
}

/* History action buttons */
html.dark-mode .ev-preview-btn,
html.dark-mode .ev-download,
html.dark-mode .history-item .btn {
  color: #eaf2f7 !important;
}

/* Preserve status colors */
html.dark-mode .badge.pending {
  background: #43361a !important;
  color: #f1d18a !important;
}

html.dark-mode .badge.processing {
  background: #172b47 !important;
  color: #9dc0ff !important;
}

html.dark-mode .badge.completed {
  background: #15372d !important;
  color: #8fe0bf !important;
}

html.dark-mode .badge.rejected,
html.dark-mode .badge.failed {
  background: #421e29 !important;
  color: #ff9db2 !important;
}

/* Mobile history cards/tables */
@media (max-width:700px) {
  html.dark-mode .tablewrap,
  html.dark-mode .validation-v2-table-wrap,
  html.dark-mode .ev-bvn-result-table-wrap {
    background: #111a2a !important;
    border-color: #263548 !important;
  }
}

/* =========================================================
   ELTECHVERIFY — COMPLETE DARK MODE PASS
   Dynamic cards / history / modals / results / tables
   ========================================================= */

html.dark-mode {
  --bg: #080f1b;
  --card: #111a29;
  --ink: #edf3f8;
  --muted: #98a7b8;
  --line: #263548;
  --soft: #14251f;
  --shadow: 0 10px 30px rgba(0,0,0,.28);
}

/* PAGE */
html.dark-mode body {
  background: #080f1b !important;
  color: #edf3f8 !important;
}

/* Main containers */
html.dark-mode main,
html.dark-mode section,
html.dark-mode #homeView,
html.dark-mode #historyView,
html.dark-mode #walletView,
html.dark-mode #servicesPanel,
html.dark-mode #requestsPanel {
  color: #edf3f8;
}

/* =========================================================
   ALL WHITE CARD SURFACES
   ========================================================= */

html.dark-mode .card,
html.dark-mode .history-item,
html.dark-mode .service,
html.dark-mode .serviceGroup,
html.dark-mode .independentService,
html.dark-mode .quickVerifyCard,
html.dark-mode .slip,
html.dark-mode .stat,
html.dark-mode .price,
html.dark-mode .notice,
html.dark-mode .ev-result,
html.dark-mode .ev-result-field,
html.dark-mode .validation-v2-view,
html.dark-mode .validation-v2-history-wrap,
html.dark-mode .validation-v2-table-wrap,
html.dark-mode .ev-bvn-result-table-wrap,
html.dark-mode .tablewrap {
  background: #111a29 !important;
  color: #edf3f8 !important;
  border-color: #263548 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.20);
}

/* Prevent nested white surfaces */
html.dark-mode .card *,
html.dark-mode .history-item *,
html.dark-mode .ev-result *,
html.dark-mode .validation-v2-view * {
  border-color: #263548;
}

/* =========================================================
   HISTORY CARDS
   ========================================================= */

html.dark-mode .history-item {
  border-bottom: 1px solid #263548 !important;
}

html.dark-mode .history-item:last-child {
  border-bottom: 0 !important;
}

html.dark-mode .history-item h1,
html.dark-mode .history-item h2,
html.dark-mode .history-item h3,
html.dark-mode .history-item h4,
html.dark-mode .history-item b,
html.dark-mode .history-item strong {
  color: #f3f7fa !important;
}

html.dark-mode .history-item span,
html.dark-mode .history-item small,
html.dark-mode .history-item label {
  color: #98a7b8 !important;
}

/* History ID / metadata */
html.dark-mode .history-item code,
html.dark-mode .history-item .muted {
  color: #aebaca !important;
}

/* =========================================================
   USER DETAILS / HISTORY MODAL
   ========================================================= */

html.dark-mode .modal {
  background: rgba(0,0,0,.72) !important;
}

html.dark-mode .modalbox,
html.dark-mode .modalbox .card,
html.dark-mode .modalbox .history-item,
html.dark-mode .modalbox .ev-result,
html.dark-mode .modalbox .validation-v2-view {
  background: #111a29 !important;
  color: #edf3f8 !important;
  border-color: #263548 !important;
}

html.dark-mode .modalbox h1,
html.dark-mode .modalbox h2,
html.dark-mode .modalbox h3,
html.dark-mode .modalbox h4,
html.dark-mode .modalbox b,
html.dark-mode .modalbox strong {
  color: #f3f7fa !important;
}

html.dark-mode .modalbox p,
html.dark-mode .modalbox small,
html.dark-mode .modalbox .muted {
  color: #98a7b8 !important;
}

/* Modal close button */
html.dark-mode .close {
  background: #1d2a3b !important;
  color: #dce6ef !important;
  border-color: #314257 !important;
}

/* =========================================================
   DYNAMIC DETAIL TABLES
   ========================================================= */

html.dark-mode table,
html.dark-mode .table,
html.dark-mode .ev-history-table,
html.dark-mode .validation-v2-table {
  background: #111a29 !important;
  color: #e7eef5 !important;
}

html.dark-mode table thead,
html.dark-mode .table thead,
html.dark-mode .ev-history-table thead,
html.dark-mode .validation-v2-table thead {
  background: #172334 !important;
}

html.dark-mode table th,
html.dark-mode .table th,
html.dark-mode .ev-history-table th,
html.dark-mode .validation-v2-table th {
  background: #172334 !important;
  color: #acb9c8 !important;
  border-color: #2a3a4d !important;
}

html.dark-mode table td,
html.dark-mode .table td,
html.dark-mode .ev-history-table td,
html.dark-mode .validation-v2-table td {
  background: #111a29 !important;
  color: #dce5ee !important;
  border-color: #263548 !important;
}

html.dark-mode table tbody tr:nth-child(even) td,
html.dark-mode .table tbody tr:nth-child(even) td,
html.dark-mode .ev-history-table tbody tr:nth-child(even) td,
html.dark-mode .validation-v2-table tbody tr:nth-child(even) td {
  background: #131f2f !important;
}

html.dark-mode table tbody tr:hover td,
html.dark-mode .table tbody tr:hover td,
html.dark-mode .ev-history-table tbody tr:hover td,
html.dark-mode .validation-v2-table tbody tr:hover td {
  background: #1a2a3c !important;
}

/* =========================================================
   INLINE DETAIL / RESULT BOXES
   ========================================================= */

html.dark-mode .ev-result-field,
html.dark-mode .validation-v2-details > div,
html.dark-mode .detail-box,
html.dark-mode .details-box,
html.dark-mode .result-box,
html.dark-mode .info-box {
  background: #0e1725 !important;
  border-color: #293a4f !important;
  color: #dce5ee !important;
}

html.dark-mode .validation-v2-details > div > span:first-child,
html.dark-mode .ev-result-field small {
  color: #8291a3 !important;
}

html.dark-mode .validation-v2-details > div > b,
html.dark-mode .ev-result-field b,
html.dark-mode .detail-box b,
html.dark-mode .details-box b {
  color: #eaf1f6 !important;
}

/* =========================================================
   PROFILE / USER DETAILS
   ========================================================= */

html.dark-mode .profile-head,
html.dark-mode .profile-avatar-wrap,
html.dark-mode .profile-avatar-upload {
  color: #edf3f8;
}

html.dark-mode .profile-avatar,
html.dark-mode .header-avatar {
  background: #172334 !important;
  border-color: #33465d !important;
}

html.dark-mode .profile-avatar-upload {
  background: #172334 !important;
  color: #dce6ef !important;
  border-color: #33465d !important;
}

/* =========================================================
   FORMS / SELECTS
   ========================================================= */

html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea {
  background: #0d1725 !important;
  color: #edf3f8 !important;
  border-color: #2b3c50 !important;
  color-scheme: dark;
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
  color: #6f8093 !important;
}

html.dark-mode option {
  background: #111a29 !important;
  color: #edf3f8 !important;
}

html.dark-mode .field label {
  color: #b5c1cf !important;
}

/* =========================================================
   FILE UPLOAD / CONSENT
   ========================================================= */

html.dark-mode .file {
  background: #0d1725 !important;
  color: #aebaca !important;
  border-color: #33465d !important;
}

html.dark-mode .consent-box {
  background: #0e1725 !important;
  color: #9eacbc !important;
  border-color: #293a4f !important;
}

/* =========================================================
   SERVICE ICON SURFACES
   ========================================================= */

html.dark-mode .icon,
html.dark-mode .groupIcon,
html.dark-mode .quickVerifyIcon,
html.dark-mode .independentService .icon,
html.dark-mode .categoryService .icon {
  background: #172638 !important;
  color: #8edfd2 !important;
  border-color: transparent !important;
}

/* =========================================================
   SLIPS
   ========================================================= */

html.dark-mode .slip,
html.dark-mode .slip.active {
  background: #111a29 !important;
  border-color: #2a3b50 !important;
}

html.dark-mode .slip.active {
  background: #12352f !important;
  border-color: #079b87 !important;
}

html.dark-mode .slip img,
html.dark-mode .slipImageWrap {
  background: #0d1725 !important;
}

/* =========================================================
   NOTICE / ALERTS
   ========================================================= */

html.dark-mode .notice {
  background: #102b25 !important;
  color: #b8e8df !important;
  border-left-color: #0c9f8b !important;
}

/* =========================================================
   PAGINATION
   ========================================================= */

html.dark-mode .validation-v2-pagination .btn {
  background: #172334 !important;
  color: #dce5ee !important;
  border-color: #2b3c50 !important;
}

html.dark-mode .validation-v2-pagination .btn:hover:not(:disabled) {
  background: #20334a !important;
}

/* =========================================================
   STATUS BADGES
   ========================================================= */

html.dark-mode .badge {
  border: 1px solid transparent;
}

html.dark-mode .badge.pending {
  background: #44371a !important;
  color: #f2d48c !important;
}

html.dark-mode .badge.processing {
  background: #182d4a !important;
  color: #a3c5ff !important;
}

html.dark-mode .badge.completed {
  background: #15372d !important;
  color: #8fe2bf !important;
}

html.dark-mode .badge.rejected,
html.dark-mode .badge.failed {
  background: #43202a !important;
  color: #ff9fb5 !important;
}

/* =========================================================
   EMPTY / LOADING STATES
   ========================================================= */

html.dark-mode [class*="empty"],
html.dark-mode [class*="Empty"],
html.dark-mode [class*="loading"],
html.dark-mode [class*="Loading"] {
  color: #93a2b3;
}

html.dark-mode .validation-v2-empty,
html.dark-mode .history-empty,
html.dark-mode .ev-history-empty {
  background: #111a29 !important;
  color: #98a7b8 !important;
}

/* =========================================================
   LINKS / ACTIONS
   ========================================================= */

html.dark-mode a {
  color: #72d5c5;
}

html.dark-mode .btn.blue {
  color: #fff !important;
}

/* =========================================================
   BOTTOM NAV
   ========================================================= */

html.dark-mode .bottom {
  background: #0d1725 !important;
  border-top-color: #263548 !important;
}

html.dark-mode .bottom button {
  color: #78899c !important;
}

html.dark-mode .bottom button.active {
  color: #72d5c5 !important;
}

/* =========================================================
   DARK MODE ON SMALL SCREEN — PRESERVE LAYOUT
   ========================================================= */

@media (max-width:700px) {
  html.dark-mode .card,
  html.dark-mode .history-item,
  html.dark-mode .modalbox,
  html.dark-mode .quickVerifyCard,
  html.dark-mode .independentService,
  html.dark-mode .serviceGroup {
    background: #111a29 !important;
  }
}


/* =========================================================
   ELTECHVERIFY — HISTORY CARDS COMPLETE DARK MODE
   ========================================================= */

html.dark-mode .ev-history-wrap,
html.dark-mode .validation-v2-history-wrap {
  color: #edf3f8 !important;
}

html.dark-mode .ev-history-title {
  color: #f1f5f9 !important;
}

/* Main history cards */
html.dark-mode .ev-history-card {
  background: #111a29 !important;
  border: 1px solid #29394d !important;
  color: #e7eef5 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.24) !important;
}

/* Top row */
html.dark-mode .ev-history-top {
  color: #e7eef5 !important;
}

html.dark-mode .ev-history-ref {
  color: #78a9ff !important;
}

html.dark-mode .ev-history-date {
  color: #8796a8 !important;
}

/* Service/type badge */
html.dark-mode .ev-history-badge {
  background: #182942 !important;
  color: #9fc0ff !important;
  border: 1px solid #29405f !important;
}

/* History fields */
html.dark-mode .ev-history-body {
  color: #e7eef5 !important;
}

html.dark-mode .ev-history-label {
  color: #8392a4 !important;
}

html.dark-mode .ev-history-value {
  color: #e5edf4 !important;
}

/* History reason / API notice */
html.dark-mode .ev-history-card .notice {
  background: #102b25 !important;
  border-left-color: #0c9f8b !important;
  color: #bce7df !important;
}

/* History action buttons */
html.dark-mode .ev-history-card .btn,
html.dark-mode .ev-history-card .ev-preview-btn {
  color: #fff !important;
}

/* Old/simple history renderer */
html.dark-mode .history-item {
  background: #111a29 !important;
  color: #e7eef5 !important;
  border-bottom-color: #29394d !important;
}

html.dark-mode .history-item b {
  color: #f1f5f9 !important;
}

html.dark-mode .history-item small {
  color: #8796a8 !important;
}

html.dark-mode .history-item .muted {
  color: #8796a8 !important;
}

/* Wallet transaction history */
html.dark-mode #txList .history-item,
html.dark-mode #requestsList .history-item {
  background: #111a29 !important;
  color: #e7eef5 !important;
  border-color: #29394d !important;
}

/* Service-history loading / empty messages */
html.dark-mode #serviceHistoryList,
html.dark-mode #historyList,
html.dark-mode #txList {
  color: #dce5ee !important;
}

html.dark-mode #serviceHistoryList > .muted,
html.dark-mode #historyList > .muted,
html.dark-mode #txList > .muted {
  color: #8796a8 !important;
}

/* Detail values inside history cards */
html.dark-mode .ev-history-card [style*="background"] {
  background: #10202d !important;
  color: #dce5ee !important;
}

/* Keep success / pending / failed badges readable */
html.dark-mode .ev-history-card .badge.success {
  background: #15372d !important;
  color: #8fe2bf !important;
}

html.dark-mode .ev-history-card .badge.pending {
  background: #44371a !important;
  color: #f2d48c !important;
}

html.dark-mode .ev-history-card .badge.processing {
  background: #182d4a !important;
  color: #a3c5ff !important;
}

html.dark-mode .ev-history-card .badge.failed,
html.dark-mode .ev-history-card .badge.rejected {
  background: #43202a !important;
  color: #ff9fb5 !important;
}

/* Mobile */
@media (max-width:700px) {
  html.dark-mode .ev-history-card {
    background: #111a29 !important;
    border-color: #29394d !important;
  }

  html.dark-mode .ev-history-ref {
    color: #78a9ff !important;
  }

  html.dark-mode .ev-history-value {
    color: #e5edf4 !important;
  }
}

/* =========================================================
   DESKTOP SERVICE SECTIONS — STACK VERTICALLY
   ========================================================= */

#serviceGrid {
  display: block !important;
}

#serviceGrid > .quickVerifySection,
#serviceGrid > .serviceSection {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  grid-column: auto !important;
  float: none !important;
  clear: both !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}

#serviceGrid > .serviceSection + .serviceSection {
  margin-top: 4px !important;
}

/* Inner cards remain grids */
#serviceGrid .quickVerifyGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
  gap: 12px !important;
}

#serviceGrid .independentGrid,
#serviceGrid .categoryGrid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100% !important;
  gap: 12px !important;
}

/* Tablet */
@media (min-width:701px) and (max-width:1100px) {
  #serviceGrid .independentGrid,
  #serviceGrid .categoryGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile — preserve the working layout */
@media (max-width:700px) {
  #serviceGrid > .quickVerifySection,
  #serviceGrid > .serviceSection {
    display: block !important;
    width: 100% !important;
    grid-column: auto !important;
  }

  #serviceGrid .quickVerifyGrid,
  #serviceGrid .independentGrid,
  #serviceGrid .categoryGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }
}

@media (max-width:380px) {
  #serviceGrid .quickVerifyGrid,
  #serviceGrid .independentGrid,
  #serviceGrid .categoryGrid {
    gap: 7px !important;
  }
}


/* =========================================================
   ELTECHHUB — Premium Verification & Digital Services
   ========================================================= */

.elth-site-brand > div:last-child small {
  display: inline-flex;
  align-items: center;
  position: relative;
  margin: 0;
  padding: 8px 15px;
  border: 1px solid rgba(74, 144, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.75px;
  line-height: 1;
  white-space: nowrap;

  background-image:
    linear-gradient(
      90deg,
      #ffffff 0%,
      #9ecbff 38%,
      #39a0ff 68%,
      #ffffff 100%
    );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.10),
    inset 0 0 0 1px rgba(255,255,255,0.04);
}

.elth-site-brand > div:last-child small::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  margin-right: 9px;
  border-radius: 50%;
  background: #35a7ff;
  box-shadow:
    0 0 8px rgba(53,167,255,.85),
    0 0 16px rgba(53,167,255,.35);
}

.elth-site-brand > div:last-child small::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    110deg,
    transparent 20%,
    rgba(255,255,255,.18) 50%,
    transparent 80%
  );
  opacity: .55;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  padding: 1px;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

@media (max-width: 700px) {
  .elth-site-brand > div:last-child small {
    font-size: 11px;
    letter-spacing: .45px;
    padding: 7px 11px;
  }

  .elth-site-brand > div:last-child small::before {
    width: 6px;
    height: 6px;
    flex-basis: 6px;
    margin-right: 7px;
  }
}

@media (max-width: 520px) {
  .elth-site-brand > div:last-child {
    display: none;
  }
}

/* =========================================================
   ELTECHHUB — Premium Logout Button
   Keep text visible; do not replace with icon-only.
   ========================================================= */

.topbtn[onclick="logout()"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 15px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.94);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.topbtn[onclick="logout()"]:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.30);
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  transform: translateY(-1px);
}

.topbtn[onclick="logout()"]:active {
  transform: translateY(0);
}

@media (max-width: 600px) {
  .topbtn[onclick="logout()"] {
    min-height: 34px;
    padding: 7px 12px;
    font-size: 12px;
    border-radius: 9px;
  }
}

/* =========================================================
   ELTECHHUB — Premium Profile + Logout Header Buttons
   ========================================================= */

.avatar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 5px 13px 5px 6px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.96);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .15px;
  cursor: pointer;
  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.avatar-btn:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.30);
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  transform: translateY(-1px);
}

.avatar-btn:active {
  transform: translateY(0);
}

.avatar-btn .header-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  object-fit: cover;
  flex: 0 0 28px;
}

.topbtn[onclick="logout()"] {
  min-height: 36px;
  padding: 8px 15px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.94);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .15px;
}

@media (max-width: 600px) {
  .avatar-btn {
    min-height: 34px;
    padding: 4px 10px 4px 5px;
    gap: 6px;
    font-size: 12px;
    border-radius: 9px;
  }

  .avatar-btn .header-avatar {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
    border-radius: 7px;
  }

  .topbtn[onclick="logout()"] {
    min-height: 34px;
    padding: 7px 12px;
    font-size: 12px;
    border-radius: 9px;
  }
}

/* =========================================================
   ELTECHHUB — Premium Auth Tagline
   ========================================================= */

.auth-tagline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 4px auto 0;
  padding: 8px 15px;

  border: 1px solid rgba(23,105,224,.20);
  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      rgba(23,105,224,.07),
      rgba(47,134,255,.13)
    );

  color: #1769e0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.05px;
  line-height: 1;
  text-transform: uppercase;

  box-shadow:
    0 6px 18px rgba(23,105,224,.08),
    inset 0 1px 0 rgba(255,255,255,.8);
}

.auth-tagline::before,
.auth-tagline::after {
  content: "";
  width: 18px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    #1769e0
  );
  opacity: .7;
}

.auth-tagline::after {
  background: linear-gradient(
    90deg,
    #1769e0,
    transparent
  );
}

html.dark-mode .auth-tagline {
  border-color: rgba(74,144,255,.28);
  background:
    linear-gradient(
      135deg,
      rgba(23,105,224,.12),
      rgba(47,134,255,.08)
    );
  color: #8ec5ff;

  box-shadow:
    0 8px 22px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.04);
}

html.dark-mode .auth-tagline::before,
html.dark-mode .auth-tagline::after {
  background: linear-gradient(
    90deg,
    transparent,
    #4aa3ff
  );
}

html.dark-mode .auth-tagline::after {
  background: linear-gradient(
    90deg,
    #4aa3ff,
    transparent
  );
}

@media (max-width: 600px) {
  .auth-tagline {
    font-size: 10px;
    letter-spacing: .8px;
    padding: 7px 12px;
    gap: 5px;
  }

  .auth-tagline::before,
  .auth-tagline::after {
    width: 12px;
  }
}

/* ================================
   ELTECHHUB HISTORY REDESIGN
   ================================ */

.ev-history-page{
  overflow:hidden;
}

.ev-history-page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.ev-history-page-head h3{
  margin:0 0 5px;
}

.ev-history-filters{
  display:grid;
  grid-template-columns:minmax(180px,1.2fr) minmax(150px,1fr) minmax(150px,1fr) auto;
  gap:12px;
  padding:14px;
  background:#f7f9fc;
  border:1px solid #e7ebf2;
  border-radius:15px;
  margin-bottom:14px;
}

.ev-history-filter{
  min-width:0;
}

.ev-history-filter label{
  display:block;
  font-size:11px;
  font-weight:800;
  color:#667085;
  margin:0 0 6px;
}

.ev-history-filter select,
.ev-history-filter input{
  width:100%;
  min-height:42px;
  box-sizing:border-box;
}

.ev-history-filter-actions{
  display:flex;
  align-items:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.ev-history-filter-actions .btn{
  min-height:42px;
}

.ev-history-summary{
  font-size:12px;
  font-weight:700;
  color:#667085;
  margin:12px 2px;
}

.ev-history-table-wrap{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  border:1px solid #e7ebf2;
  border-radius:15px;
  background:#fff;
}

.ev-history-table{
  width:100%;
  min-width:860px;
  border-collapse:separate;
  border-spacing:0;
  font-size:12px;
}

.ev-history-table th{
  background:#f7f9fc;
  color:#667085;
  padding:13px 12px;
  text-align:left;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:800;
  white-space:nowrap;
  border-bottom:1px solid #e5eaf1;
}

.ev-history-table td{
  padding:12px;
  color:#344054;
  vertical-align:middle;
  border-bottom:1px solid #eef1f5;
  background:#fff;
}

.ev-history-table tbody tr:last-child td{
  border-bottom:none;
}

.ev-history-table tbody tr:hover td{
  background:#fbfcfe;
}

.ev-history-service-name{
  font-weight:800;
  color:#172033;
}

.ev-history-detail{
  margin-top:3px;
  font-size:11px;
  color:#8994a3;
  max-width:260px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ev-history-reference{
  font-size:11px;
  font-weight:700;
  color:#2457b8;
  word-break:break-all;
}

.ev-history-slip-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:58px;
  min-height:30px;
  padding:5px 9px;
  border-radius:8px;
  background:#1769e8;
  color:#fff !important;
  text-decoration:none;
  font-size:11px;
  font-weight:800;
}

.ev-history-expired{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:5px 9px;
  border-radius:8px;
  background:#f2f4f7;
  color:#667085;
  font-size:11px;
  font-weight:800;
}

.ev-history-view-btn{
  min-height:30px;
  padding:5px 10px;
  white-space:nowrap;
}

.ev-history-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:14px;
  font-size:12px;
  font-weight:700;
  color:#667085;
}

.ev-history-pagination .btn{
  min-height:34px;
}

.ev-history-empty,
.ev-history-loading{
  padding:28px 15px;
  text-align:center;
  color:#667085;
  font-size:13px;
}

.ev-recent-services-card{
  margin-top:18px;
  overflow:hidden;
}

.ev-recent-services-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.ev-recent-services-head h3{
  margin:0 0 4px;
}

.ev-recent-table{
  min-width:820px;
}

.ev-recent-table-wrap{
  border-radius:13px;
}

html.dark-mode .ev-history-filters{
  background:#101a27;
  border-color:rgba(148,163,184,.16);
}

html.dark-mode .ev-history-filter label,
html.dark-mode .ev-history-summary{
  color:#94a3b8;
}

html.dark-mode .ev-history-table-wrap{
  background:#0f1720;
  border-color:rgba(148,163,184,.16);
}

html.dark-mode .ev-history-table th{
  background:#111c2a;
  color:#94a3b8;
  border-color:rgba(148,163,184,.12);
}

html.dark-mode .ev-history-table td{
  background:#0f1720;
  color:#dbe4ee;
  border-color:rgba(148,163,184,.10);
}

html.dark-mode .ev-history-table tbody tr:hover td{
  background:#121f2f;
}

html.dark-mode .ev-history-service-name{
  color:#f8fafc;
}

html.dark-mode .ev-history-detail{
  color:#94a3b8;
}

html.dark-mode .ev-history-expired{
  background:#1b2532;
  color:#94a3b8;
}

@media(max-width:900px){
  .ev-history-filters{
    grid-template-columns:1fr 1fr;
  }

  .ev-history-filter-actions{
    grid-column:1/-1;
  }
}

@media(max-width:600px){
  .ev-history-page-head{
    margin-bottom:14px;
  }

  .ev-history-filters{
    grid-template-columns:1fr;
    padding:12px;
    border-radius:13px;
  }

  .ev-history-filter-actions{
    grid-column:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .ev-history-filter-actions .btn{
    width:100%;
  }

  .ev-history-table{
    min-width:800px;
  }

  .ev-history-table th{
    padding:11px 9px;
    font-size:9px;
  }

  .ev-history-table td{
    padding:10px 9px;
    font-size:11px;
  }

  .ev-history-detail{
    max-width:190px;
  }

  .ev-recent-services-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .ev-recent-services-head .btn{
    width:100%;
  }

  .ev-history-pagination{
    gap:9px;
  }
}


.ev-result-photo-center .ev-result-photo,
.ev-result-photo-center img.ev-result-photo{
  display:block;
  margin:0 auto;
  width:120px;
  height:120px;
  object-fit:cover;
  border-radius:12px;
}

.ev-result-photo-center{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}


.ev-result-photo-center{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.ev-result-photo-center .ev-result-photo,
.ev-result-photo-center img.ev-result-photo{
  display:block;
  margin:0 auto !important;
  width:120px !important;
  height:120px !important;
  object-fit:cover;
  border-radius:12px;
}

.ev-result-photo-center .ev-photo-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto !important;
  width:120px;
  height:120px;
  border-radius:12px;
}


.v2-bulk-card{
  margin-top:20px;
  padding:18px;
  border:1px solid #e4e9f1;
  border-radius:18px;
  background:linear-gradient(180deg,#fbfcfe,#f7f9fc);
  box-shadow:0 8px 26px rgba(15,23,42,.055);
}

.v2-bulk-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:15px;
}

.v2-bulk-head h3{
  margin:0 0 4px;
  font-size:17px;
}

.v2-bulk-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 9px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.05em;
  background:#eaf2ff;
  color:#1769e0;
}

.v2-bulk-textarea{
  width:100%;
  min-height:145px;
  resize:vertical;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  line-height:1.6;
}

.v2-bulk-date-row{
  margin-top:2px;
}

.v2-bulk-progress{
  margin-top:13px;
  padding:11px 13px;
  border:1px solid #e5eaf1;
  border-radius:12px;
  background:#fff;
  font-size:12px;
}

.v2-bulk-result-wrap{
  width:100%;
  overflow:auto;
  border:1px solid #e5eaf1;
  border-radius:14px;
}

.v2-bulk-result-table{
  width:100%;
  min-width:760px;
  border-collapse:collapse;
  font-size:12px;
}

.v2-bulk-result-table th,
.v2-bulk-result-table td{
  padding:10px 11px;
  border-bottom:1px solid #edf0f4;
  text-align:left;
  vertical-align:top;
}

.v2-bulk-result-table th{
  background:#f7f9fc;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#667085;
}

@media(max-width:600px){
  .v2-bulk-card{
    padding:14px;
  }

  .v2-bulk-date-row{
    display:grid;
    grid-template-columns:1fr;
  }

  .v2-bulk-head{
    align-items:flex-start;
  }
}


/* =========================================================
   V2 BULK FORMS — DARK MODE
   ========================================================= */

body.dark .v2-bulk-card,
body.dark-mode .v2-bulk-card,
html.dark .v2-bulk-card,
[data-theme="dark"] .v2-bulk-card{
  background:linear-gradient(180deg,#111827,#0f172a);
  border-color:#263244;
  box-shadow:0 8px 26px rgba(0,0,0,.28);
  color:#e5e7eb;
}

body.dark .v2-bulk-head h3,
body.dark-mode .v2-bulk-head h3,
html.dark .v2-bulk-head h3,
[data-theme="dark"] .v2-bulk-head h3{
  color:#f8fafc;
}

body.dark .v2-bulk-pill,
body.dark-mode .v2-bulk-pill,
html.dark .v2-bulk-pill,
[data-theme="dark"] .v2-bulk-pill{
  background:#172554;
  color:#93c5fd;
}

body.dark .v2-bulk-card label,
body.dark-mode .v2-bulk-card label,
html.dark .v2-bulk-card label,
[data-theme="dark"] .v2-bulk-card label{
  color:#e5e7eb;
}

body.dark .v2-bulk-card input,
body.dark .v2-bulk-card textarea,
body.dark .v2-bulk-card select,
body.dark-mode .v2-bulk-card input,
body.dark-mode .v2-bulk-card textarea,
body.dark-mode .v2-bulk-card select,
html.dark .v2-bulk-card input,
html.dark .v2-bulk-card textarea,
html.dark .v2-bulk-card select,
[data-theme="dark"] .v2-bulk-card input,
[data-theme="dark"] .v2-bulk-card textarea,
[data-theme="dark"] .v2-bulk-card select{
  background:#0b1220;
  color:#f8fafc;
  border-color:#334155;
}

body.dark .v2-bulk-card input::placeholder,
body.dark .v2-bulk-card textarea::placeholder,
body.dark-mode .v2-bulk-card input::placeholder,
body.dark-mode .v2-bulk-card textarea::placeholder,
html.dark .v2-bulk-card input::placeholder,
html.dark .v2-bulk-card textarea::placeholder,
[data-theme="dark"] .v2-bulk-card input::placeholder,
[data-theme="dark"] .v2-bulk-card textarea::placeholder{
  color:#64748b;
}

body.dark .v2-bulk-card input:focus,
body.dark .v2-bulk-card textarea:focus,
body.dark .v2-bulk-card select:focus,
body.dark-mode .v2-bulk-card input:focus,
body.dark-mode .v2-bulk-card textarea:focus,
body.dark-mode .v2-bulk-card select:focus,
html.dark .v2-bulk-card input:focus,
html.dark .v2-bulk-card textarea:focus,
html.dark .v2-bulk-card select:focus,
[data-theme="dark"] .v2-bulk-card input:focus,
[data-theme="dark"] .v2-bulk-card textarea:focus,
[data-theme="dark"] .v2-bulk-card select:focus{
  background:#0b1220;
  color:#fff;
  border-color:#4f86ff;
  box-shadow:0 0 0 3px rgba(79,134,255,.14);
}

body.dark .v2-bulk-progress,
body.dark-mode .v2-bulk-progress,
html.dark .v2-bulk-progress,
[data-theme="dark"] .v2-bulk-progress{
  background:#0b1220;
  border-color:#263244;
  color:#dbe4f0;
}

body.dark .v2-bulk-result-wrap,
body.dark-mode .v2-bulk-result-wrap,
html.dark .v2-bulk-result-wrap,
[data-theme="dark"] .v2-bulk-result-wrap{
  border-color:#263244;
  background:#0b1220;
}

body.dark .v2-bulk-result-table,
body.dark-mode .v2-bulk-result-table,
html.dark .v2-bulk-result-table,
[data-theme="dark"] .v2-bulk-result-table{
  color:#e5e7eb;
}

body.dark .v2-bulk-result-table th,
body.dark-mode .v2-bulk-result-table th,
html.dark .v2-bulk-result-table th,
[data-theme="dark"] .v2-bulk-result-table th{
  background:#111827;
  color:#94a3b8;
  border-bottom-color:#263244;
}

body.dark .v2-bulk-result-table td,
body.dark-mode .v2-bulk-result-table td,
html.dark .v2-bulk-result-table td,
[data-theme="dark"] .v2-bulk-result-table td{
  border-bottom-color:#1e293b;
  color:#dbe4f0;
}

body.dark .v2-bulk-card .muted,
body.dark-mode .v2-bulk-card .muted,
html.dark .v2-bulk-card .muted,
[data-theme="dark"] .v2-bulk-card .muted{
  color:#94a3b8;
}


/* =========================================================
   ELTECHHUB V2 BULK — DARK MODE OVERRIDE
   ========================================================= */

html.eltech-bulk-dark .v2-bulk-card{
  background:#0f172a !important;
  color:#e5e7eb !important;
  border-color:#334155 !important;
  box-shadow:0 10px 30px rgba(0,0,0,.35) !important;
}

html.eltech-bulk-dark .v2-bulk-head h3{
  color:#f8fafc !important;
}

html.eltech-bulk-dark .v2-bulk-pill{
  background:#172554 !important;
  color:#93c5fd !important;
}

html.eltech-bulk-dark .v2-bulk-card label{
  color:#e5e7eb !important;
}

html.eltech-bulk-dark .v2-bulk-card .muted{
  color:#94a3b8 !important;
}

html.eltech-bulk-dark .v2-bulk-card input,
html.eltech-bulk-dark .v2-bulk-card textarea,
html.eltech-bulk-dark .v2-bulk-card select{
  background:#020617 !important;
  color:#f8fafc !important;
  border-color:#475569 !important;
  color-scheme:dark !important;
}

html.eltech-bulk-dark .v2-bulk-card input::placeholder,
html.eltech-bulk-dark .v2-bulk-card textarea::placeholder{
  color:#64748b !important;
}

html.eltech-bulk-dark .v2-bulk-card input:focus,
html.eltech-bulk-dark .v2-bulk-card textarea:focus,
html.eltech-bulk-dark .v2-bulk-card select:focus{
  background:#020617 !important;
  color:#fff !important;
  border-color:#60a5fa !important;
  box-shadow:0 0 0 3px rgba(96,165,250,.15) !important;
}

html.eltech-bulk-dark .v2-bulk-progress{
  background:#020617 !important;
  color:#e2e8f0 !important;
  border-color:#334155 !important;
}

html.eltech-bulk-dark .v2-bulk-result-wrap{
  background:#020617 !important;
  border-color:#334155 !important;
}

html.eltech-bulk-dark .v2-bulk-result-table{
  background:#020617 !important;
  color:#e2e8f0 !important;
}

html.eltech-bulk-dark .v2-bulk-result-table th{
  background:#111827 !important;
  color:#94a3b8 !important;
  border-color:#334155 !important;
}

html.eltech-bulk-dark .v2-bulk-result-table td{
  background:#020617 !important;
  color:#e2e8f0 !important;
  border-color:#1e293b !important;
}

html.eltech-bulk-dark .v2-bulk-date-row input{
  background:#020617 !important;
  color:#f8fafc !important;
  color-scheme:dark !important;
}