:root{
  --bg:#071018;
  --panel:#0c1721;
  --panel-2:#101e29;
  --line:rgba(255,255,255,.10);
  --text:#f5f7f8;
  --muted:#8fa0ad;
  --accent:#d7a85b;
  --accent-soft:#f1d29b;
  --success:#63c695;
  --danger:#e27d7d;
  --radius:22px;

  /* BLS GLOBAL DESIGN TOKENS V1.0 */
  --bls-bg:#050a10;
  --bls-bg-soft:#06101a;
  --bls-surface:#0b1823;
  --bls-surface-2:#0d2030;

  --bls-gold:#f0b63f;
  --bls-gold-soft:#f0bd50;
  --bls-mint:#4eddb9;
  --bls-cyan:#50c8ff;

  --bls-text:#f1f4f6;
  --bls-text-soft:#dce5ea;
  --bls-text-muted:#8fa0ad;

  --bls-fs-xs:8.5px;
  --bls-fs-sm:9.5px;
  --bls-fs-meta:10px;
  --bls-fs-body-sm:11.5px;
  --bls-fs-body:13px;
  --bls-fs-label:14px;
  --bls-fs-section:18px;
  --bls-fs-card:20px;
  --bls-fs-kpi:24px;
  --bls-fs-title:40px;

  --bls-space-1:4px;
  --bls-space-2:8px;
  --bls-space-3:10px;
  --bls-space-4:12px;
  --bls-space-5:14px;
  --bls-space-6:20px;
  --bls-space-7:24px;

  --bls-radius-sm:8px;
  --bls-radius-md:10px;
  --bls-radius-lg:12px;
  --bls-radius-xl:14px;
  --bls-radius-2xl:18px;
  --bls-radius-pill:999px;

  --bls-control-sm:32px;
  --bls-control-md:38px;
  --bls-control-lg:44px;
  --bls-control-xl:48px;

  --bls-sidebar-admin:278px;
  --bls-sidebar-compact:230px;
  --bls-content-max:1420px;

  --bls-bp-xl:1250px;
  --bls-bp-md:1000px;
  --bls-bp-sm:760px;

  --bls-border:rgba(92,165,212,.18);
  --bls-border-soft:rgba(255,255,255,.07);
  --bls-glow-gold:0 0 18px rgba(239,177,63,.10);
}

*{
  box-sizing:border-box;
}

html{
  min-height:100%;
  background:var(--bg);
}

body{
  margin:0;
  min-height:100vh;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 80% 20%,rgba(215,168,91,.10),transparent 32%),
    radial-gradient(circle at 20% 80%,rgba(54,107,133,.12),transparent 32%),
    var(--bg);
}

button,
input,
select{
  font:inherit;
}

button{
  cursor:pointer;
}

.topbar{
  height:86px;
  padding:0 6vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  background:rgba(7,16,24,.78);
  backdrop-filter:blur(18px);
}

.brand{
  display:flex;
  align-items:center;
  gap:15px;
  color:var(--text);
  text-decoration:none;
}

.brand-mark{
  width:48px;
  height:48px;
  border:1px solid rgba(215,168,91,.6);
  display:grid;
  place-items:center;
  color:var(--accent-soft);
  font-weight:800;
  letter-spacing:2px;
}

.brand-copy{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.brand-copy strong{
  letter-spacing:2px;
  font-size:14px;
}

.brand-copy small{
  color:var(--muted);
  font-size:10px;
  letter-spacing:1.5px;
}

.top-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.account-badge,
.security-chip{
  border:1px solid var(--line);
  padding:9px 12px;
  font-size:11px;
  letter-spacing:1.4px;
  color:var(--muted);
}

.shell{
  width:min(1180px,88vw);
  margin:0 auto;
  min-height:calc(100vh - 156px);
}

.view{
  display:none;
  padding:72px 0;
}

.view.active{
  display:block;
}

.hero{
  min-height:540px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:60px;
}

.eyebrow{
  display:block;
  margin-bottom:18px;
  color:var(--accent);
  font-size:11px;
  font-weight:700;
  letter-spacing:3px;
}

h1{
  margin:0;
  font-size:clamp(48px,6vw,82px);
  line-height:.98;
  letter-spacing:-3px;
}

h2{
  margin:0 0 14px;
  font-size:38px;
  letter-spacing:-1px;
}

h3{
  margin:8px 0 10px;
}

.hero-copy > p{
  max-width:580px;
  margin:26px 0 32px;
  color:var(--muted);
  font-size:18px;
  line-height:1.7;
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.button{
  min-height:48px;
  padding:0 22px;
  border-radius:10px;
  border:1px solid transparent;
  font-weight:700;
}

.button-primary{
  color:#111;
  background:linear-gradient(135deg,var(--accent-soft),var(--accent));
}

.button-secondary{
  color:var(--text);
  background:var(--panel-2);
  border-color:var(--line);
}

.button-ghost{
  color:var(--muted);
  background:transparent;
  border-color:var(--line);
}

.full{
  width:100%;
}

.hero-panel{
  min-height:430px;
  border:1px solid var(--line);
  border-radius:32px;
  background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}

.orbit{
  width:280px;
  height:280px;
  position:relative;
  display:grid;
  place-items:center;
}

.core{
  width:110px;
  height:110px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid var(--accent);
  background:rgba(215,168,91,.08);
  color:var(--accent-soft);
  font-size:24px;
  font-weight:800;
  letter-spacing:4px;
  box-shadow:0 0 60px rgba(215,168,91,.12);
}

.orbit-ring{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(215,168,91,.25);
}

.orbit-one{
  inset:28px;
}

.orbit-two{
  inset:0;
  border-color:rgba(255,255,255,.08);
}

.system-label{
  margin-top:30px;
  color:var(--muted);
  font-size:10px;
  letter-spacing:2px;
}

.status-dot{
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:8px;
  border-radius:50%;
  background:var(--success);
  box-shadow:0 0 12px rgba(99,198,149,.65);
}

.principles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.principles article,
.dashboard-card{
  padding:26px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(255,255,255,.025);
}

.principles article > span,
.card-number{
  color:var(--accent);
  font-size:11px;
  letter-spacing:2px;
}

.principles p,
.dashboard-card p{
  color:var(--muted);
  line-height:1.6;
}

.auth-view{
  min-height:650px;
  align-items:center;
  justify-content:center;
}

.auth-view.active{
  display:flex;
}

.auth-card{
  width:min(460px,100%);
  padding:38px;
  border:1px solid var(--line);
  border-radius:28px;
  background:rgba(12,23,33,.92);
  box-shadow:0 30px 80px rgba(0,0,0,.28);
}

.auth-card.wide{
  width:min(650px,100%);
}

.back-link,
.text-button{
  padding:0;
  border:0;
  color:var(--muted);
  background:transparent;
}

.back-link{
  margin-bottom:32px;
}

.text-button{
  color:var(--accent-soft);
}

.muted{
  color:var(--muted);
  line-height:1.6;
}

form{
  margin-top:28px;
}

label{
  display:block;
  margin-bottom:18px;
  color:#cbd4da;
  font-size:13px;
}

input,
select{
  width:100%;
  margin-top:8px;
  padding:14px 15px;
  border:1px solid var(--line);
  border-radius:10px;
  outline:none;
  color:var(--text);
  background:#08121a;
}

input:focus,
select:focus{
  border-color:rgba(215,168,91,.65);
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 16px;
}

.message{
  margin-top:18px;
  padding:13px 15px;
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--muted);
  line-height:1.5;
}

.message.success{
  color:var(--success);
  border-color:rgba(99,198,149,.28);
}

.message.error{
  color:var(--danger);
  border-color:rgba(226,125,125,.28);
}

.message.info{
  display:block;
}

.switch-copy{
  margin:22px 0 0;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}

.verification-icon{
  width:72px;
  height:72px;
  margin:28px auto;
  border:1px solid rgba(215,168,91,.5);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--accent);
  font-size:28px;
}

.dashboard-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:36px;
}

.dashboard-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.dashboard-card strong{
  display:block;
  margin-top:24px;
  color:var(--accent-soft);
  font-size:12px;
  letter-spacing:1px;
}

.locked-card{
  opacity:.72;
}

.notice{
  margin-top:20px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:14px;
  color:var(--muted);
  line-height:1.6;
}

.notice strong{
  color:var(--text);
}

.hidden{
  display:none !important;
}

footer{
  min-height:70px;
  padding:0 6vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  color:#637582;
  font-size:10px;
  letter-spacing:1.6px;
}

@media (max-width:800px){
  .topbar{
    padding:0 20px;
  }

  .shell{
    width:min(92vw,650px);
  }

  .hero{
    grid-template-columns:1fr;
    padding-top:30px;
  }

  .hero-panel{
    min-height:340px;
  }

  .principles,
  .dashboard-grid,
  .form-grid{
    grid-template-columns:1fr;
  }

  .dashboard-header{
    align-items:flex-start;
    flex-direction:column;
  }

  h1{
    font-size:48px;
  }

  footer{
    padding:20px;
    gap:12px;
    flex-direction:column;
    align-items:flex-start;
  }
}

/* BLS password visibility control */
.password-field {
  position: relative;
}

.password-field input {
  width: 100%;
  padding-right: 3.25rem;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.72;
}

.password-toggle:hover,
.password-toggle:focus-visible {
  opacity: 1;
}

.password-toggle:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 2px;
}
/* =========================================================
   BLS LEVEL 14 DYNAMIC SHELL
   ========================================================= */

.dynamic-shell{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  min-height:680px;
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  background:rgba(7,12,18,.72);
}

.dynamic-sidebar{
  display:flex;
  flex-direction:column;
  min-height:680px;
  padding:28px 18px;
  border-right:1px solid var(--line);
  background:
    radial-gradient(circle at top left,rgba(81,171,255,.10),transparent 34%),
    rgba(4,9,14,.92);
}

.sidebar-brand{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:4px 10px 26px;
  border-bottom:1px solid var(--line);
}

.sidebar-brand strong{
  font-size:17px;
  letter-spacing:.2px;
}

.sidebar-brand > span:last-child{
  color:var(--muted);
  font-size:11px;
  letter-spacing:1.2px;
}

.workspace-nav{
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:24px 0;
}

.workspace-nav-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:13px;
  padding:13px 14px;
  border:1px solid transparent;
  border-radius:11px;
  background:transparent;
  color:var(--muted);
  text-align:left;
  cursor:pointer;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .18s ease;
}

.workspace-nav-item:hover{
  color:var(--text);
  background:rgba(255,255,255,.035);
  transform:translateX(2px);
}

.workspace-nav-item.active{
  color:var(--text);
  border-color:rgba(98,182,255,.20);
  background:linear-gradient(
    90deg,
    rgba(71,162,255,.14),
    rgba(71,162,255,.025)
  );
}

.nav-index{
  min-width:24px;
  color:var(--accent-soft);
  font-size:10px;
  letter-spacing:1px;
}

.sidebar-security{
  display:flex;
  align-items:center;
  gap:11px;
  margin-top:auto;
  padding:17px 10px 4px;
  border-top:1px solid var(--line);
}

.sidebar-security div{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.sidebar-security strong{
  font-size:10px;
  letter-spacing:1.2px;
}

.sidebar-security span:last-child{
  color:var(--muted);
  font-size:10px;
}

.dynamic-workspace{
  min-width:0;
  padding:34px;
}

.workspace-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  padding-bottom:26px;
  border-bottom:1px solid var(--line);
}

.workspace-header h2{
  margin:7px 0 8px;
}

.workspace-panel{
  display:none;
  padding-top:30px;
  animation:workspaceReveal .22s ease;
}

.workspace-panel.active{
  display:block;
}

@keyframes workspaceReveal{
  from{
    opacity:0;
    transform:translateY(5px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.workspace-intro{
  max-width:720px;
  margin-bottom:24px;
}

.workspace-intro h3{
  margin:7px 0 10px;
  font-size:25px;
}

.workspace-intro p{
  margin:0;
  color:var(--muted);
  line-height:1.7;
}

.section-kicker{
  color:var(--accent-soft);
  font-size:10px;
  font-weight:700;
  letter-spacing:1.7px;
}

.module-state-card{
  position:relative;
  padding:28px;
  border:1px solid var(--line);
  border-radius:16px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
}

.module-state-card h4{
  margin:13px 0 9px;
  font-size:19px;
}

.module-state-card p{
  max-width:720px;
  margin:0;
  color:var(--muted);
  line-height:1.7;
}

.module-state{
  display:inline-flex;
  padding:6px 9px;
  border:1px solid rgba(94,183,255,.22);
  border-radius:999px;
  color:var(--accent-soft);
  background:rgba(77,166,255,.07);
  font-size:9px;
  font-weight:700;
  letter-spacing:1.3px;
}

.protected-state{
  border-style:dashed;
}

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

.account-detail{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.02);
}

.account-detail span{
  color:var(--muted);
  font-size:11px;
  letter-spacing:.6px;
}

.account-detail strong{
  color:var(--accent-soft);
  font-size:13px;
  word-break:break-word;
}

@media (max-width:900px){

  .dynamic-shell{
    grid-template-columns:1fr;
  }

  .dynamic-sidebar{
    min-height:auto;
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .workspace-nav{
    display:grid;
    grid-template-columns:repeat(3,1fr);
  }

  .sidebar-security{
    display:none;
  }

  .dynamic-workspace{
    padding:24px;
  }

}

@media (max-width:620px){

  .workspace-nav{
    grid-template-columns:repeat(2,1fr);
  }

  .workspace-header{
    flex-direction:column;
  }

  .account-detail-grid{
    grid-template-columns:1fr;
  }

  .dynamic-workspace{
    padding:20px 16px;
  }

}
/* =========================================================
   BLS LEVEL 14.2A EXECUTIVE UI
   ========================================================= */

body{
  background:
    radial-gradient(circle at 80% 0%,rgba(31,126,255,.10),transparent 28%),
    radial-gradient(circle at 15% 18%,rgba(0,210,255,.055),transparent 24%),
    #05090f;
}

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  background:rgba(5,9,15,.78);
  border-bottom:1px solid rgba(126,190,255,.10);
  box-shadow:0 12px 45px rgba(0,0,0,.18);
}

.brand-mark{
  box-shadow:
    0 0 0 1px rgba(113,190,255,.18),
    0 0 32px rgba(45,145,255,.13);
}

.account-badge{
  border:1px solid rgba(83,181,255,.18);
  background:rgba(50,151,255,.06);
  color:#9ed7ff;
}

.dynamic-shell{
  grid-template-columns:238px minmax(0,1fr);
  min-height:720px;
  border:1px solid rgba(126,190,255,.10);
  border-radius:26px;
  background:
    linear-gradient(145deg,rgba(11,18,28,.92),rgba(5,9,15,.94));
  box-shadow:
    0 28px 80px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.025);
}

.dynamic-sidebar{
  min-height:720px;
  padding:26px 15px 22px;
  border-right:1px solid rgba(126,190,255,.09);
  background:
    radial-gradient(circle at 20% 5%,rgba(41,139,255,.13),transparent 27%),
    linear-gradient(180deg,rgba(5,11,18,.98),rgba(4,8,13,.96));
}

.sidebar-brand{
  gap:5px;
  margin:0 4px;
  padding:8px 10px 25px;
  border-bottom:1px solid rgba(126,190,255,.09);
}

.sidebar-brand strong{
  font-size:18px;
  font-weight:650;
  letter-spacing:-.2px;
}

.workspace-nav{
  gap:6px;
  padding:22px 0;
}

.workspace-nav-item{
  position:relative;
  min-height:48px;
  gap:12px;
  padding:12px 13px;
  border-radius:12px;
  color:rgba(188,205,220,.67);
  font-weight:550;
}

.workspace-nav-item::before{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  bottom:12px;
  width:2px;
  border-radius:999px;
  background:transparent;
}

.workspace-nav-item:hover{
  color:#eef8ff;
  background:rgba(255,255,255,.025);
  transform:translateX(2px);
}

.workspace-nav-item.active{
  color:#f5fbff;
  border-color:rgba(96,183,255,.12);
  background:
    linear-gradient(90deg,rgba(43,145,255,.16),rgba(43,145,255,.025));
  box-shadow:inset 0 0 28px rgba(40,139,255,.035);
}

.workspace-nav-item.active::before{
  background:#5cbcff;
  box-shadow:0 0 16px rgba(69,174,255,.75);
}

.nav-index{
  min-width:23px;
  color:#62baff;
  opacity:.8;
  font-size:9px;
  font-weight:750;
}

.sidebar-security{
  margin:0 4px;
  padding:18px 10px 5px;
  border-top:1px solid rgba(126,190,255,.09);
}

.dynamic-workspace{
  padding:36px 38px 42px;
  background:
    radial-gradient(circle at 92% 4%,rgba(41,139,255,.055),transparent 24%);
}

.workspace-header{
  align-items:center;
  padding:1px 0 27px;
  border-bottom:1px solid rgba(126,190,255,.09);
}

.workspace-header h2{
  margin:6px 0 6px;
  font-size:30px;
  font-weight:650;
  letter-spacing:-.7px;
}

.security-chip{
  padding:9px 13px;
  border:1px solid rgba(51,213,158,.18);
  border-radius:999px;
  background:rgba(34,179,127,.055);
  box-shadow:0 0 24px rgba(34,179,127,.035);
}

.workspace-panel{
  padding-top:34px;
}

.workspace-intro{
  max-width:760px;
  margin-bottom:27px;
}

.workspace-intro h3{
  margin:8px 0 9px;
  font-size:28px;
  font-weight:620;
  letter-spacing:-.55px;
}

.workspace-intro p{
  max-width:680px;
  color:rgba(185,201,216,.68);
}

.section-kicker,
.eyebrow{
  color:#63baff;
  font-size:9px;
  font-weight:750;
  letter-spacing:2px;
}

.module-state-card{
  padding:26px 27px;
  border:1px solid rgba(126,190,255,.09);
  border-radius:18px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.027),rgba(255,255,255,.009));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018),
    0 16px 45px rgba(0,0,0,.10);
}

.module-state-card + .module-state-card,
.account-detail-grid + .module-state-card{
  margin-top:17px;
}

.module-state{
  padding:6px 10px;
  border-color:rgba(96,186,255,.18);
  background:rgba(45,150,255,.055);
  color:#73c4ff;
}

.account-detail-grid{
  gap:12px;
  margin-top:18px;
}

.account-detail{
  min-height:92px;
  justify-content:center;
  padding:19px 20px;
  border:1px solid rgba(126,190,255,.085);
  border-radius:15px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.022),rgba(255,255,255,.008));
  transition:
    border-color .2s ease,
    transform .2s ease,
    background .2s ease;
}

.account-detail:hover{
  transform:translateY(-1px);
  border-color:rgba(91,183,255,.18);
  background:rgba(66,153,255,.035);
}

.account-detail span{
  color:rgba(170,191,210,.56);
  font-size:9px;
  font-weight:700;
  letter-spacing:1.1px;
}

.account-detail strong{
  color:#d8f0ff;
  font-size:14px;
  font-weight:600;
}

.dashboard-card{
  border-color:rgba(126,190,255,.09);
  background:
    linear-gradient(145deg,rgba(255,255,255,.028),rgba(255,255,255,.008));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018),
    0 15px 42px rgba(0,0,0,.08);
  transition:
    transform .2s ease,
    border-color .2s ease;
}

.dashboard-card:hover{
  transform:translateY(-2px);
  border-color:rgba(91,183,255,.17);
}

.notice{
  border-color:rgba(105,183,255,.10);
  background:rgba(38,122,205,.035);
}

footer{
  opacity:.72;
}

@media (max-width:900px){
  .dynamic-shell{
    grid-template-columns:1fr;
    border-radius:20px;
  }

  .dynamic-sidebar{
    min-height:auto;
    padding:20px;
  }

  .workspace-nav{
    grid-template-columns:repeat(3,1fr);
  }

  .dynamic-workspace{
    padding:27px 24px 32px;
  }
}

@media (max-width:620px){
  .workspace-nav{
    grid-template-columns:repeat(2,1fr);
  }

  .workspace-header h2{
    font-size:26px;
  }

  .workspace-intro h3{
    font-size:24px;
  }

  .dynamic-workspace{
    padding:23px 16px 28px;
  }
}

/* BLS 14.2A   DESKTOP WORKSPACE WIDTH */
@media (min-width:1100px){
  .shell{
    width:min(1360px,calc(100% - 56px));
    max-width:1360px;
  }

  #dashboardView .dynamic-shell{
    width:100%;
  }

  .dynamic-workspace{
    padding-left:42px;
    padding-right:42px;
  }
}

/* BLS 14.2A   EXECUTIVE CONTROL CENTER */
[data-workspace-panel="overview"] .dashboard-grid{
  gap:16px;
}

[data-workspace-panel="overview"] .dashboard-card{
  position:relative;
  min-height:160px;
  padding:25px 26px;
  overflow:hidden;
}

[data-workspace-panel="overview"] .dashboard-card:not(.locked-card)::after{
  content:"";
  position:absolute;
  right:-35px;
  top:-35px;
  width:120px;
  height:120px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(65,167,255,.09),transparent 68%);
  pointer-events:none;
}

[data-workspace-panel="overview"] .dashboard-card h3{
  margin:10px 0 11px;
  font-size:18px;
  letter-spacing:-.25px;
}

[data-workspace-panel="overview"] .dashboard-card p{
  max-width:420px;
  margin:0 0 20px;
  line-height:1.65;
}

[data-workspace-panel="overview"] .dashboard-card strong{
  color:#f2c36f;
  font-size:12px;
  letter-spacing:.45px;
}

[data-workspace-panel="overview"] .locked-card{
  opacity:.56;
  background:rgba(255,255,255,.012);
}

[data-workspace-panel="overview"] .locked-card:hover{
  transform:none;
  border-color:rgba(126,190,255,.09);
}

[data-workspace-panel="overview"] .card-number{
  color:#f2b84b;
  font-size:9px;
  font-weight:750;
  letter-spacing:1.4px;
}

/* BLS 14.2A   AFFILIATE PARTNER WORKSPACE */
[data-workspace-panel="affiliate"] .module-state-card:first-of-type{
  border-color:rgba(75,185,255,.16);
  background:
    linear-gradient(145deg,rgba(48,151,255,.055),rgba(255,255,255,.012));
}

[data-workspace-panel="affiliate"] .account-detail-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

[data-workspace-panel="affiliate"] .account-detail{
  min-height:96px;
  border-color:rgba(126,190,255,.09);
}

[data-workspace-panel="affiliate"] #affiliatePartnerStatus,
[data-workspace-panel="affiliate"] #affiliateReferralStatus{
  color:#7fe2b5;
  font-size:15px;
  letter-spacing:.6px;
}

[data-workspace-panel="affiliate"] #affiliateReferralCode,
[data-workspace-panel="affiliate"] #affiliateReferralLink{
  color:#f1c875;
  font-size:15px;
  letter-spacing:.25px;
}

[data-workspace-panel="affiliate"] #affiliateReferralSource{
  color:#9fd7ff;
  font-size:13px;
}

[data-workspace-panel="affiliate"] #affiliateReferrerUserId{
  color:rgba(200,218,232,.72);
}

[data-workspace-panel="affiliate"] .account-detail:nth-child(3),
[data-workspace-panel="affiliate"] .account-detail:nth-child(4){
  background:
    linear-gradient(145deg,rgba(242,184,75,.045),rgba(255,255,255,.01));
  border-color:rgba(242,184,75,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}

[data-workspace-panel="affiliate"] .account-detail:nth-child(5),
[data-workspace-panel="affiliate"] .account-detail:nth-child(6){
  opacity:.78;
  background:rgba(255,255,255,.012);
}

[data-workspace-panel="affiliate"] .module-state{
  border-color:rgba(80,190,255,.18);
  background:rgba(44,151,255,.06);
}

@media (max-width:620px){
  [data-workspace-panel="affiliate"] .account-detail-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   BLS 14.2A   STANDARD DOMAIN WORKSPACE
   Commission / KYC / Withdrawal / Account
   ========================================================= */

[data-workspace-panel="commission"] .workspace-intro,
[data-workspace-panel="kyc"] .workspace-intro,
[data-workspace-panel="withdrawal"] .workspace-intro,
[data-workspace-panel="account"] .workspace-intro{
  max-width:760px;
  margin-bottom:28px;
}

[data-workspace-panel="commission"] .module-state-card,
[data-workspace-panel="kyc"] .module-state-card,
[data-workspace-panel="withdrawal"] .module-state-card{
  min-height:150px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:28px 30px;
  border-radius:18px;
  border:1px solid rgba(126,190,255,.09);
  background:
    linear-gradient(145deg,rgba(255,255,255,.026),rgba(255,255,255,.008));
}

[data-workspace-panel="commission"] .module-state-card h4,
[data-workspace-panel="kyc"] .module-state-card h4,
[data-workspace-panel="withdrawal"] .module-state-card h4{
  margin:13px 0 9px;
  font-size:19px;
  letter-spacing:-.25px;
}

[data-workspace-panel="commission"] .module-state-card p,
[data-workspace-panel="kyc"] .module-state-card p,
[data-workspace-panel="withdrawal"] .module-state-card p{
  max-width:760px;
  line-height:1.7;
}

[data-workspace-panel="commission"] .protected-state{
  border-color:rgba(242,184,75,.12);
  background:
    linear-gradient(145deg,rgba(242,184,75,.035),rgba(255,255,255,.008));
}

[data-workspace-panel="commission"] .module-state{
  color:#e7ba67;
  border-color:rgba(242,184,75,.18);
  background:rgba(242,184,75,.045);
}

[data-workspace-panel="kyc"] .module-state{
  color:#83cfff;
}

[data-workspace-panel="withdrawal"] .protected-state{
  border-color:rgba(160,178,194,.10);
  background:
    linear-gradient(145deg,rgba(160,178,194,.025),rgba(255,255,255,.006));
}

[data-workspace-panel="withdrawal"] .module-state{
  color:#9fb2c2;
  border-color:rgba(160,178,194,.14);
  background:rgba(160,178,194,.035);
}

[data-workspace-panel="account"] .account-detail-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

[data-workspace-panel="account"] .account-detail{
  min-height:102px;
  padding:21px 22px;
  border-color:rgba(126,190,255,.09);
  background:
    linear-gradient(145deg,rgba(255,255,255,.024),rgba(255,255,255,.008));
}

[data-workspace-panel="account"] .account-detail strong{
  color:#dff3ff;
  font-size:14px;
}

[data-workspace-panel="account"] #accountWorkspaceSession{
  color:#7fe2b5;
}

[data-workspace-panel="account"] #accountWorkspaceUserId{
  color:#f1c875;
}

@media (max-width:620px){
  [data-workspace-panel="account"] .account-detail-grid{
    grid-template-columns:1fr;
  }
}

/* BLS 14.2A   DOMAIN STATUS BADGE FIX */
[data-workspace-panel="commission"] .module-state,
[data-workspace-panel="kyc"] .module-state,
[data-workspace-panel="withdrawal"] .module-state{
  align-self:flex-start;
  width:auto;
  max-width:max-content;
}

/* =========================================================
   BLS 14.2A   AUTH EXPERIENCE
   Login / Register / Verify
   ========================================================= */

.auth-view{
  min-height:calc(100vh - 170px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:54px 20px 70px;
}

.auth-view.active{
  display:flex;
}

.auth-card{
  width:min(520px,100%);
  padding:34px 36px 32px;
  border:1px solid rgba(126,190,255,.11);
  border-radius:24px;
  background:
    radial-gradient(circle at 100% 0%,rgba(48,151,255,.07),transparent 28%),
    linear-gradient(145deg,rgba(14,21,31,.96),rgba(6,11,17,.98));
  box-shadow:
    0 30px 90px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.025);
}

.auth-card.wide{
  width:min(720px,100%);
}

.auth-card .eyebrow{
  display:block;
  margin-top:22px;
  margin-bottom:8px;
}

.auth-card h2{
  margin:0 0 10px;
  font-size:32px;
  font-weight:650;
  letter-spacing:-.7px;
}

.auth-card .muted{
  margin-bottom:28px;
  line-height:1.65;
}

.auth-card form{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.auth-card label{
  display:flex;
  flex-direction:column;
  gap:8px;
  color:#dce8f2;
  font-size:12px;
  font-weight:600;
}

.auth-card input,
.auth-card select{
  width:100%;
  min-height:48px;
  padding:0 14px;
  border:1px solid rgba(126,190,255,.12);
  border-radius:12px;
  outline:none;
  background:rgba(3,9,15,.72);
  color:#eef8ff;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.auth-card input:focus,
.auth-card select:focus{
  border-color:rgba(242,184,75,.55);
  background:rgba(9,15,22,.92);
  box-shadow:0 0 0 3px rgba(242,184,75,.06);
}

.auth-card input::placeholder{
  color:rgba(169,188,204,.42);
}

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

.password-field{
  position:relative;
}

.password-field input{
  padding-right:52px;
}

.password-toggle{
  position:absolute;
  top:50%;
  right:8px;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:9px;
  background:transparent;
  cursor:pointer;
  opacity:.62;
}

.password-toggle:hover{
  background:rgba(255,255,255,.045);
  opacity:1;
}

.auth-card .button.full{
  min-height:50px;
  margin-top:4px;
  border-radius:12px;
}

.auth-card .button-primary{
  background:linear-gradient(180deg,#f4c874,#e8ad48);
  color:#0a0d11;
  border-color:rgba(255,212,129,.58);
  box-shadow:0 12px 28px rgba(232,173,72,.10);
}

.auth-card .button-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 15px 34px rgba(232,173,72,.16);
}

.back-link{
  color:#85c8f5;
  opacity:.72;
}

.back-link:hover{
  opacity:1;
}

.switch-copy{
  margin:24px 0 0;
  padding-top:20px;
  border-top:1px solid rgba(126,190,255,.08);
  text-align:center;
  color:rgba(186,203,218,.68);
}

.text-button{
  color:#f0bf66;
}

.verification-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  margin:4px 0 22px;
  border:1px solid rgba(85,222,166,.20);
  border-radius:18px;
  background:rgba(42,190,132,.055);
  color:#70deb0;
  font-size:24px;
  box-shadow:0 0 34px rgba(42,190,132,.05);
}

#registerReferralDisclosure{
  margin:2px 0 18px;
  border-color:rgba(242,184,75,.14);
  background:rgba(242,184,75,.035);
}

#devVerificationBox{
  margin-top:18px;
}

@media (max-width:620px){
  .auth-view{
    padding:32px 14px 50px;
  }

  .auth-card,
  .auth-card.wide{
    padding:27px 20px 24px;
    border-radius:19px;
  }

  .auth-card h2{
    font-size:27px;
  }

  .form-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   BLS EXECUTIVE WEB INTERFACE V2
   PHASE 1 — EXECUTIVE SHELL
   ========================================================= */

#dashboardView{
  position:relative;
}

#dashboardView .dynamic-shell{
  width:min(1520px,calc(100vw - 44px));
  min-height:760px;
  margin:0 auto;
  grid-template-columns:224px minmax(0,1fr);
  border:1px solid rgba(118,188,255,.12);
  border-radius:30px;
  overflow:hidden;
  background:
    radial-gradient(circle at 72% -10%,rgba(44,147,255,.08),transparent 30%),
    linear-gradient(145deg,rgba(10,17,27,.97),rgba(4,8,14,.985));
  box-shadow:
    0 40px 110px rgba(0,0,0,.42),
    0 1px 0 rgba(255,255,255,.035) inset;
  backdrop-filter:blur(22px);
}

#dashboardView .dynamic-sidebar{
  position:relative;
  min-height:760px;
  padding:28px 14px 22px;
  border-right:1px solid rgba(126,190,255,.08);
  background:
    radial-gradient(circle at 20% 0%,rgba(38,140,255,.15),transparent 26%),
    linear-gradient(180deg,rgba(5,11,18,.995),rgba(3,7,12,.98));
}

#dashboardView .dynamic-sidebar::after{
  content:"";
  position:absolute;
  right:-1px;
  top:0;
  width:1px;
  height:100%;
  background:linear-gradient(
    180deg,
    transparent,
    rgba(91,181,255,.16) 18%,
    rgba(91,181,255,.05) 65%,
    transparent
  );
  pointer-events:none;
}

#dashboardView .sidebar-brand{
  margin:0 5px;
  padding:8px 10px 30px;
}

#dashboardView .sidebar-brand .eyebrow{
  font-size:9px;
  letter-spacing:2.1px;
  opacity:.72;
}

#dashboardView .sidebar-brand strong{
  margin-top:7px;
  font-size:17px;
  line-height:1.2;
  letter-spacing:-.25px;
}

#dashboardView .sidebar-brand > span:last-child{
  margin-top:5px;
  font-size:10px;
  opacity:.46;
}

#dashboardView .workspace-nav{
  gap:5px;
}

#dashboardView .workspace-nav-item{
  min-height:46px;
  padding:11px 12px;
  gap:11px;
  border-radius:12px;
  font-size:13px;
  color:rgba(194,211,225,.62);
  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

#dashboardView .workspace-nav-item:hover{
  color:#eef8ff;
  background:rgba(255,255,255,.032);
  transform:translateX(2px);
}

#dashboardView .workspace-nav-item.active{
  color:#f7fbff;
  border-color:rgba(81,173,255,.14);
  background:
    linear-gradient(90deg,rgba(37,142,255,.18),rgba(37,142,255,.025));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 8px 24px rgba(0,0,0,.12);
}

#dashboardView .workspace-nav-item.active::before{
  top:10px;
  bottom:10px;
  width:2px;
  background:#63c1ff;
  box-shadow:0 0 18px rgba(77,178,255,.8);
}

#dashboardView .nav-index{
  min-width:22px;
  font-size:8px;
  letter-spacing:1px;
  opacity:.72;
}

#dashboardView .sidebar-security{
  margin-top:auto;
  padding:14px 12px;
  border:1px solid rgba(104,205,171,.09);
  border-radius:14px;
  background:rgba(255,255,255,.015);
}

#dashboardView .dynamic-workspace{
  position:relative;
  padding:38px 46px 52px;
  background:
    radial-gradient(circle at 100% 0%,rgba(38,140,255,.055),transparent 25%);
}

#dashboardView .workspace-header{
  min-height:96px;
  align-items:center;
  padding:0 0 28px;
  border-bottom:1px solid rgba(126,190,255,.085);
}

#dashboardView .workspace-header .eyebrow{
  font-size:9px;
  letter-spacing:2.2px;
  opacity:.68;
}

#dashboardView .workspace-header h2{
  margin:7px 0 7px;
  font-size:34px;
  line-height:1.06;
  font-weight:620;
  letter-spacing:-1px;
}

#dashboardView #dashboardWelcome{
  max-width:680px;
  font-size:13px;
  line-height:1.65;
  color:rgba(186,204,220,.6);
}

#dashboardView .security-chip{
  padding:9px 14px;
  font-size:10px;
  letter-spacing:.8px;
  border:1px solid rgba(58,215,160,.15);
  background:rgba(32,177,124,.045);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 8px 30px rgba(0,0,0,.12);
}

#dashboardView .workspace-panel{
  padding-top:38px;
}

#dashboardView .workspace-intro{
  max-width:820px;
  margin-bottom:32px;
}

#dashboardView .workspace-intro .section-kicker{
  font-size:9px;
  letter-spacing:2px;
  opacity:.7;
}

#dashboardView .workspace-intro h3{
  margin:9px 0 11px;
  font-size:31px;
  line-height:1.14;
  font-weight:610;
  letter-spacing:-.8px;
}

#dashboardView .workspace-intro p{
  max-width:760px;
  font-size:14px;
  line-height:1.75;
  color:rgba(190,207,221,.64);
}

#dashboardView .dashboard-grid{
  gap:18px;
}

#dashboardView .dashboard-card,
#dashboardView .module-state-card,
#dashboardView .account-detail{
  border-color:rgba(125,190,255,.095);
  background:
    linear-gradient(145deg,rgba(255,255,255,.028),rgba(255,255,255,.009));
  box-shadow:
    0 18px 46px rgba(0,0,0,.13),
    inset 0 1px 0 rgba(255,255,255,.022);
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}

#dashboardView .dashboard-card:hover,
#dashboardView .account-detail:hover{
  transform:translateY(-2px);
  border-color:rgba(102,186,255,.17);
  box-shadow:
    0 24px 58px rgba(0,0,0,.19),
    inset 0 1px 0 rgba(255,255,255,.03);
}

#dashboardView .module-state-card{
  border-radius:20px;
  padding:30px 32px;
}

#dashboardView .account-detail{
  border-radius:16px;
}

#dashboardView .button{
  min-height:42px;
  border-radius:11px;
}

#dashboardView .button-primary{
  box-shadow:
    0 10px 30px rgba(38,145,255,.16),
    inset 0 1px 0 rgba(255,255,255,.12);
}

/* TABLET */
@media (max-width:1100px){
  #dashboardView .dynamic-shell{
    width:calc(100vw - 28px);
    grid-template-columns:205px minmax(0,1fr);
  }

  #dashboardView .dynamic-workspace{
    padding:32px 30px 42px;
  }
}

/* MOBILE / TABLET PORTRAIT */
@media (max-width:900px){
  #dashboardView .dynamic-shell{
    width:calc(100vw - 20px);
    grid-template-columns:1fr;
    border-radius:22px;
  }

  #dashboardView .dynamic-sidebar{
    min-height:auto;
    padding:18px 16px;
    border-right:0;
    border-bottom:1px solid rgba(126,190,255,.08);
  }

  #dashboardView .sidebar-brand{
    padding-bottom:18px;
  }

  #dashboardView .workspace-nav{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
  }

  #dashboardView .workspace-nav-item{
    justify-content:flex-start;
    min-height:44px;
  }

  #dashboardView .dynamic-workspace{
    padding:28px 24px 36px;
  }

  #dashboardView .workspace-header{
    min-height:auto;
    align-items:flex-start;
    gap:18px;
  }
}

/* SMALL MOBILE */
@media (max-width:620px){
  #dashboardView .dynamic-shell{
    width:calc(100vw - 12px);
    border-radius:18px;
  }

  #dashboardView .dynamic-sidebar{
    padding:16px 12px;
  }

  #dashboardView .workspace-nav{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  #dashboardView .dynamic-workspace{
    padding:24px 16px 30px;
  }

  #dashboardView .workspace-header h2{
    font-size:28px;
  }

  #dashboardView .workspace-intro{
    margin-bottom:24px;
  }

  #dashboardView .workspace-intro h3{
    font-size:25px;
  }

  #dashboardView .workspace-panel{
    padding-top:30px;
  }

  #dashboardView .module-state-card{
    padding:24px 22px;
    border-radius:17px;
  }
}

/* =========================================================
   BLS EXECUTIVE WEB INTERFACE V2
   PHASE 2 — DASHBOARD VISUAL HIERARCHY
   ========================================================= */

#dashboardView [data-workspace-panel="overview"] .dashboard-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

#dashboardView [data-workspace-panel="overview"] .dashboard-card{
  position:relative;
  min-height:176px;
  padding:28px 28px 26px;
  border-radius:20px;
  overflow:hidden;
  background:
    linear-gradient(145deg,rgba(255,255,255,.032),rgba(255,255,255,.008));
}

#dashboardView [data-workspace-panel="overview"] .dashboard-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg,rgba(95,182,255,.025),transparent 34%);
  pointer-events:none;
}

#dashboardView [data-workspace-panel="overview"] .dashboard-card:not(.locked-card)::after{
  width:150px;
  height:150px;
  right:-46px;
  top:-46px;
  background:
    radial-gradient(circle,rgba(66,170,255,.12),rgba(66,170,255,.035) 35%,transparent 70%);
}

#dashboardView [data-workspace-panel="overview"] .card-number{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:0 8px;
  border:1px solid rgba(242,184,75,.13);
  border-radius:999px;
  background:rgba(242,184,75,.035);
  color:#efbd5d;
  font-size:8px;
  font-weight:800;
  letter-spacing:1.3px;
}

#dashboardView [data-workspace-panel="overview"] .dashboard-card h3{
  margin:17px 0 10px;
  font-size:19px;
  font-weight:640;
  letter-spacing:-.35px;
}

#dashboardView [data-workspace-panel="overview"] .dashboard-card p{
  max-width:470px;
  margin:0 0 24px;
  color:rgba(191,208,221,.66);
  font-size:14px;
  line-height:1.7;
}

#dashboardView [data-workspace-panel="overview"] .dashboard-card strong{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:0 10px;
  border-radius:8px;
  background:rgba(242,184,75,.045);
  color:#f0c36b;
  font-size:10px;
  font-weight:760;
  letter-spacing:.35px;
}

#dashboardView [data-workspace-panel="overview"] .dashboard-card:nth-child(1),
#dashboardView [data-workspace-panel="overview"] .dashboard-card:nth-child(2){
  border-color:rgba(85,180,255,.13);
  background:
    radial-gradient(circle at 100% 0%,rgba(42,149,255,.075),transparent 36%),
    linear-gradient(145deg,rgba(255,255,255,.034),rgba(255,255,255,.008));
}

#dashboardView [data-workspace-panel="overview"] .dashboard-card:nth-child(1):hover,
#dashboardView [data-workspace-panel="overview"] .dashboard-card:nth-child(2):hover{
  transform:translateY(-3px);
  border-color:rgba(93,186,255,.22);
  box-shadow:
    0 28px 70px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.035);
}

#dashboardView [data-workspace-panel="overview"] .locked-card{
  opacity:.48;
  filter:saturate(.72);
  background:
    linear-gradient(145deg,rgba(255,255,255,.018),rgba(255,255,255,.004));
}

#dashboardView [data-workspace-panel="overview"] .locked-card .card-number{
  color:#c89d4f;
  border-color:rgba(205,159,75,.10);
  background:rgba(205,159,75,.025);
}

#dashboardView [data-workspace-panel="overview"] .locked-card strong{
  background:rgba(202,158,79,.035);
  color:#c5a05e;
}

#dashboardView [data-workspace-panel="overview"] .locked-card:hover{
  transform:none;
  box-shadow:
    0 18px 46px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.018);
}

#dashboardView [data-workspace-panel="overview"] .foundation-note,
#dashboardView [data-workspace-panel="overview"] .notice,
#dashboardView [data-workspace-panel="overview"] .info-note{
  border-radius:15px;
}

@media (max-width:760px){
  #dashboardView [data-workspace-panel="overview"] .dashboard-grid{
    grid-template-columns:1fr;
  }

  #dashboardView [data-workspace-panel="overview"] .dashboard-card{
    min-height:auto;
    padding:24px 22px;
  }
}

/* =========================================================
   BLS EXECUTIVE WEB INTERFACE V2
   PHASE 3 — HEADER + STATUS SYSTEM
   ========================================================= */

#dashboardView .workspace-header{
  position:relative;
  margin:-8px -8px 0;
  padding:22px 24px 28px;
  border:1px solid rgba(118,188,255,.075);
  border-radius:18px;
  background:
    radial-gradient(circle at 88% 0%,rgba(48,151,255,.07),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.022),rgba(255,255,255,.006));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.024),
    0 12px 34px rgba(0,0,0,.08);
}

#dashboardView .workspace-header::after{
  content:"";
  position:absolute;
  left:24px;
  right:24px;
  bottom:-1px;
  height:1px;
  background:
    linear-gradient(
      90deg,
      rgba(76,177,255,.34),
      rgba(76,177,255,.08) 36%,
      transparent 72%
    );
  pointer-events:none;
}

#dashboardView .workspace-header h2{
  font-size:36px;
  font-weight:640;
  letter-spacing:-1.15px;
}

#dashboardView .workspace-header .eyebrow{
  color:#63bfff;
  opacity:.82;
}

#dashboardView .security-chip{
  position:relative;
  min-height:34px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 14px;
  color:#bcebd9;
  border-color:rgba(66,220,165,.18);
  background:
    linear-gradient(145deg,rgba(32,181,128,.075),rgba(32,181,128,.025));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 10px 28px rgba(0,0,0,.12);
}

#dashboardView .security-chip .status-dot{
  box-shadow:
    0 0 0 4px rgba(59,217,161,.05),
    0 0 14px rgba(59,217,161,.65);
}

#dashboardView .workspace-intro{
  position:relative;
  padding-left:2px;
}

#dashboardView .workspace-intro .section-kicker{
  color:#61baff;
  font-weight:760;
}

#dashboardView [data-workspace-panel="overview"] .locked-card{
  opacity:.64;
  filter:saturate(.82);
  border-color:rgba(126,190,255,.075);
}

#dashboardView [data-workspace-panel="overview"] .locked-card h3{
  color:rgba(226,236,244,.72);
}

#dashboardView [data-workspace-panel="overview"] .locked-card p{
  color:rgba(176,194,208,.50);
}

#dashboardView [data-workspace-panel="overview"] .locked-card strong{
  color:#b89a63;
  background:rgba(190,150,80,.04);
}

#dashboardView .module-state{
  min-height:24px;
  display:inline-flex;
  align-items:center;
  padding:0 9px;
  border-radius:999px;
  font-size:8px;
  font-weight:800;
  letter-spacing:1.2px;
}

#dashboardView [data-workspace-panel="kyc"] .module-state{
  color:#8ed6ff;
  border-color:rgba(82,183,255,.18);
  background:rgba(55,155,255,.055);
}

#dashboardView [data-workspace-panel="commission"] .module-state{
  color:#e9bd70;
}

#dashboardView [data-workspace-panel="withdrawal"] .module-state{
  color:#aabac7;
}

@media (max-width:900px){
  #dashboardView .workspace-header{
    margin:0;
    padding:20px;
  }

  #dashboardView .workspace-header::after{
    left:20px;
    right:20px;
  }
}

@media (max-width:620px){
  #dashboardView .workspace-header{
    padding:18px;
    border-radius:15px;
  }

  #dashboardView .workspace-header h2{
    font-size:28px;
  }

  #dashboardView .security-chip{
    min-height:32px;
  }
}

/* =========================================================
   BLS EXECUTIVE WEB INTERFACE V2
   PHASE 4 — DOMAIN WORKSPACE REFINEMENT
   ========================================================= */

/* AFFILIATE */
#dashboardView [data-workspace-panel="affiliate"] .module-state-card{
  border-radius:20px;
  padding:26px 28px;
  background:
    radial-gradient(circle at 100% 0%,rgba(46,156,255,.06),transparent 32%),
    linear-gradient(145deg,rgba(255,255,255,.026),rgba(255,255,255,.008));
}

#dashboardView [data-workspace-panel="affiliate"] .account-detail-grid{
  gap:16px;
}

#dashboardView [data-workspace-panel="affiliate"] .account-detail{
  min-height:104px;
  padding:22px 22px;
}

#dashboardView [data-workspace-panel="affiliate"] .account-detail span{
  font-size:9px;
  letter-spacing:1.1px;
  text-transform:uppercase;
  opacity:.58;
}

#dashboardView [data-workspace-panel="affiliate"] .account-detail strong{
  margin-top:10px;
  font-size:15px;
  line-height:1.45;
}

/* COMMISSION / KYC / WITHDRAWAL */
#dashboardView [data-workspace-panel="commission"] .module-state-card,
#dashboardView [data-workspace-panel="kyc"] .module-state-card,
#dashboardView [data-workspace-panel="withdrawal"] .module-state-card{
  position:relative;
  min-height:180px;
  justify-content:center;
  overflow:hidden;
}

#dashboardView [data-workspace-panel="commission"] .module-state-card::after,
#dashboardView [data-workspace-panel="kyc"] .module-state-card::after,
#dashboardView [data-workspace-panel="withdrawal"] .module-state-card::after{
  content:"";
  position:absolute;
  right:-70px;
  top:-70px;
  width:210px;
  height:210px;
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(77,175,255,.055),transparent 69%);
  pointer-events:none;
}

#dashboardView [data-workspace-panel="commission"] .module-state-card h4,
#dashboardView [data-workspace-panel="kyc"] .module-state-card h4,
#dashboardView [data-workspace-panel="withdrawal"] .module-state-card h4{
  margin-top:15px;
  font-size:20px;
  font-weight:640;
}

#dashboardView [data-workspace-panel="commission"] .module-state-card p,
#dashboardView [data-workspace-panel="kyc"] .module-state-card p,
#dashboardView [data-workspace-panel="withdrawal"] .module-state-card p{
  max-width:760px;
  margin-bottom:0;
  font-size:14px;
  line-height:1.75;
}

/* ACCOUNT */
#dashboardView [data-workspace-panel="account"] .account-detail-grid{
  gap:16px;
}

#dashboardView [data-workspace-panel="account"] .account-detail{
  min-height:112px;
  padding:24px 24px;
}

#dashboardView [data-workspace-panel="account"] .account-detail span{
  font-size:9px;
  letter-spacing:1.05px;
  opacity:.56;
}

#dashboardView [data-workspace-panel="account"] .account-detail strong{
  margin-top:10px;
  font-size:15px;
}

/* HEADER COMPACT REFINEMENT */
#dashboardView .workspace-header{
  min-height:0;
  padding:19px 22px 23px;
}

#dashboardView .workspace-header h2{
  font-size:34px;
}

#dashboardView #dashboardWelcome{
  margin-bottom:0;
}

/* EMPTY-SPACE BALANCE */
#dashboardView [data-workspace-panel="commission"],
#dashboardView [data-workspace-panel="kyc"],
#dashboardView [data-workspace-panel="withdrawal"],
#dashboardView [data-workspace-panel="account"]{
  max-width:100%;
}

#dashboardView [data-workspace-panel="commission"] .workspace-intro,
#dashboardView [data-workspace-panel="kyc"] .workspace-intro,
#dashboardView [data-workspace-panel="withdrawal"] .workspace-intro,
#dashboardView [data-workspace-panel="account"] .workspace-intro{
  margin-bottom:26px;
}

@media (max-width:620px){
  #dashboardView [data-workspace-panel="commission"] .module-state-card,
  #dashboardView [data-workspace-panel="kyc"] .module-state-card,
  #dashboardView [data-workspace-panel="withdrawal"] .module-state-card{
    min-height:auto;
  }

  #dashboardView [data-workspace-panel="affiliate"] .account-detail,
  #dashboardView [data-workspace-panel="account"] .account-detail{
    min-height:auto;
  }
}

/* =========================================================
   BLS EXECUTIVE WEB INTERFACE V2
   PHASE 5 — FINAL POLISH
   ========================================================= */

/* GLOBAL TEXT BALANCE */
#dashboardView .workspace-intro p,
#dashboardView #dashboardWelcome,
#dashboardView .module-state-card p{
  color:rgba(195,211,224,.68);
}

#dashboardView .workspace-nav-item{
  color:rgba(194,211,225,.66);
}

#dashboardView .workspace-nav-item.active{
  color:#f5fbff;
}

/* CARD CONSISTENCY */
#dashboardView .dashboard-card,
#dashboardView .module-state-card,
#dashboardView .account-detail{
  border-color:rgba(126,190,255,.10);
}

#dashboardView .dashboard-card:hover,
#dashboardView .account-detail:hover{
  border-color:rgba(102,186,255,.18);
}

/* AFFILIATE — FINAL BALANCE */
#dashboardView [data-workspace-panel="affiliate"] .account-detail{
  background:
    linear-gradient(145deg,rgba(255,255,255,.026),rgba(255,255,255,.008));
}

#dashboardView [data-workspace-panel="affiliate"] #affiliatePartnerStatus,
#dashboardView [data-workspace-panel="affiliate"] #affiliateReferralStatus{
  text-shadow:0 0 16px rgba(83,221,168,.12);
}

#dashboardView [data-workspace-panel="affiliate"] #affiliateReferralCode,
#dashboardView [data-workspace-panel="affiliate"] #affiliateReferralLink{
  text-shadow:0 0 16px rgba(241,200,117,.08);
}

/* KYC */
#dashboardView [data-workspace-panel="kyc"] .module-state-card{
  border-color:rgba(84,180,255,.12);
  background:
    radial-gradient(circle at 100% 0%,rgba(59,161,255,.055),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.026),rgba(255,255,255,.007));
}

#dashboardView [data-workspace-panel="kyc"] #kycStatusValue{
  font-size:21px;
  letter-spacing:-.25px;
}

/* COMMISSION */
#dashboardView [data-workspace-panel="commission"] .module-state-card{
  border-color:rgba(232,184,105,.10);
  background:
    radial-gradient(circle at 100% 0%,rgba(231,183,104,.035),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.024),rgba(255,255,255,.006));
}

/* WITHDRAWAL */
#dashboardView [data-workspace-panel="withdrawal"] .module-state-card{
  border-color:rgba(160,178,194,.09);
  background:
    linear-gradient(145deg,rgba(255,255,255,.021),rgba(255,255,255,.005));
}

/* ACCOUNT */
#dashboardView [data-workspace-panel="account"] .account-detail{
  background:
    radial-gradient(circle at 100% 0%,rgba(54,158,255,.035),transparent 40%),
    linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.007));
}

/* CONTENT WIDTH / EMPTY SPACE */
#dashboardView [data-workspace-panel="commission"] .module-state-card,
#dashboardView [data-workspace-panel="kyc"] .module-state-card,
#dashboardView [data-workspace-panel="withdrawal"] .module-state-card{
  max-width:100%;
}

/* RESPONSIVE FINAL */
@media (max-width:900px){
  #dashboardView .workspace-nav-item{
    padding:10px 11px;
  }

  #dashboardView .workspace-header{
    gap:14px;
  }
}

@media (max-width:620px){
  #dashboardView .workspace-nav{
    gap:6px;
  }

  #dashboardView .workspace-nav-item{
    font-size:12px;
  }

  #dashboardView .workspace-header{
    padding:16px;
  }

  #dashboardView .workspace-intro h3{
    font-size:24px;
  }

  #dashboardView [data-workspace-panel="affiliate"] .account-detail-grid,
  #dashboardView [data-workspace-panel="account"] .account-detail-grid{
    gap:10px;
  }
}

/* =========================================================
   BLS INTERNAL 44 SCREENS
   FOUNDATION — SCREEN 01 / FND
   ========================================================= */

#platformView{
  padding:0;
}

#platformView.active{
  display:block;
}

.bls-platform-screen{
  width:100%;
}

.platform-app-shell{
  width:min(1600px,calc(100vw - 24px));
  min-height:920px;
  margin:0 auto;
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  overflow:hidden;
  border:1px solid rgba(83,160,221,.13);
  border-radius:26px;
  background:#071019;
  box-shadow:0 30px 100px rgba(0,0,0,.42);
}

.platform-sidebar{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:920px;
  padding:24px 16px 20px;
  border-right:1px solid rgba(112,178,230,.10);
  background:
    radial-gradient(circle at 15% 0%,rgba(16,107,182,.18),transparent 28%),
    linear-gradient(180deg,#06111b 0%,#07131d 55%,#08141e 100%);
}

.platform-logo{
  display:flex;
  align-items:center;
  gap:10px;
  padding:3px 7px 26px;
}

.platform-logo-mark{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:2px solid #e3b257;
  color:#eac06d;
  font-size:11px;
  font-weight:800;
  letter-spacing:.8px;
  box-shadow:
    0 0 0 4px rgba(229,177,84,.04),
    0 0 22px rgba(229,177,84,.08);
}

.platform-logo > div:last-child{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.platform-logo strong{
  color:#e9c16d;
  font-size:13px;
  letter-spacing:.9px;
}

.platform-logo span{
  color:rgba(207,221,232,.46);
  font-size:7px;
  letter-spacing:1.5px;
}

.platform-menu{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.platform-menu-item{
  width:100%;
  min-height:45px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 12px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:rgba(202,218,229,.68);
  text-align:left;
  cursor:pointer;
  transition:.2s ease;
}

.platform-menu-item:hover{
  color:#f2f8fc;
  background:rgba(255,255,255,.03);
}

.platform-menu-item.active{
  color:#fff;
  border-color:rgba(37,133,206,.16);
  background:
    linear-gradient(90deg,rgba(16,111,190,.22),rgba(16,111,190,.045));
}

.platform-menu-icon{
  width:20px;
  color:#5eb9f3;
  text-align:center;
}

.platform-menu-divider{
  height:1px;
  margin:11px 6px;
  background:rgba(255,255,255,.055);
}

.platform-sidebar-vision{
  margin-top:auto;
  padding:18px 10px 4px;
  display:flex;
  flex-direction:column;
  gap:5px;
  color:rgba(186,204,217,.28);
  font-size:7px;
  letter-spacing:1.35px;
}

.platform-main{
  min-width:0;
  background:#eef4f8;
}

.platform-topbar{
  height:74px;
  display:grid;
  grid-template-columns:190px minmax(260px,1fr) auto;
  align-items:center;
  gap:24px;
  padding:0 26px;
  border-bottom:1px solid #d7e2e9;
  background:#f7fafc;
}

.platform-switcher{
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0 14px;
  border:1px solid #d6e1e8;
  border-radius:9px;
  background:#fff;
  color:#123047;
  font-weight:650;
}

.platform-search{
  min-height:40px;
  max-width:480px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
  border:1px solid #dbe5eb;
  border-radius:9px;
  background:#fff;
}

.platform-search span{
  color:#7f95a5;
}

.platform-search input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:#1a3245;
}

.platform-top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.platform-top-actions > button{
  min-width:34px;
  height:34px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#445c6e;
  cursor:pointer;
}

.platform-top-actions > button:hover{
  background:#eaf1f5;
}

.platform-top-divider{
  width:1px;
  height:24px;
  background:#d9e3e9;
}

.platform-language{
  font-size:11px;
  font-weight:700;
}

.platform-user{
  margin-left:4px;
  display:grid;
  grid-template-columns:34px auto 14px;
  align-items:center;
  gap:9px;
}

.platform-avatar{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(145deg,#f0cb78,#bd8233);
  color:#fff;
  box-shadow:0 4px 12px rgba(136,91,34,.18);
}

.platform-user > div:nth-child(2){
  display:flex;
  flex-direction:column;
  gap:2px;
}

.platform-user strong{
  color:#1b3548;
  font-size:11px;
}

.platform-user span{
  color:#8194a2;
  font-size:8px;
}

.platform-content{
  padding:22px 24px 28px;
  background:
    linear-gradient(180deg,#edf3f7,#f6f9fb);
}

.platform-hero{
  position:relative;
  min-height:365px;
  overflow:hidden;
  border-radius:15px;
  background:
    radial-gradient(circle at 75% 30%,rgba(25,174,213,.48),transparent 20%),
    linear-gradient(100deg,#0b2534 0%,#0d4356 50%,#1497b3 100%);
  box-shadow:0 14px 36px rgba(37,78,103,.12);
}

.platform-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 82% 48%,rgba(255,255,255,.12),transparent 14%),
    linear-gradient(90deg,rgba(3,14,22,.72),rgba(6,35,49,.23) 55%,rgba(12,111,138,.05));
}

.platform-hero-overlay{
  position:absolute;
  right:5%;
  top:10%;
  width:420px;
  height:300px;
  opacity:.55;
  background:
    radial-gradient(circle at 50% 50%,rgba(117,232,242,.25),transparent 38%),
    repeating-linear-gradient(
      90deg,
      rgba(164,232,239,.06) 0,
      rgba(164,232,239,.06) 1px,
      transparent 1px,
      transparent 22px
    );
  transform:skewX(-10deg);
}

.platform-hero-copy{
  position:relative;
  z-index:2;
  max-width:700px;
  padding:48px 52px;
  color:#fff;
}

.platform-hero-copy > p:first-child{
  margin:0 0 12px;
  color:rgba(222,239,246,.78);
  font-size:13px;
}

.platform-hero h1{
  margin:0;
  display:flex;
  align-items:baseline;
  gap:13px;
  font-size:58px;
  line-height:1;
  letter-spacing:-2.4px;
}

.platform-hero h1 span{
  color:#e6bb64;
  font-weight:800;
}

.platform-hero h1 strong{
  color:#fff;
  font-weight:800;
}

.platform-manifesto{
  margin-top:17px;
  display:flex;
  flex-wrap:wrap;
  gap:0;
  color:#e1bd70;
  font-size:8px;
  font-weight:750;
  letter-spacing:1.1px;
}

.platform-manifesto span{
  position:relative;
  padding-right:16px;
  margin-right:14px;
}

.platform-manifesto span:not(:last-child)::after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  width:2px;
  height:2px;
  border-radius:50%;
  background:#d8ae5b;
}

.platform-accent-line{
  width:135px;
  height:2px;
  margin:22px 0 18px;
  background:linear-gradient(90deg,#d7ac56,transparent);
}

.platform-hero-desc{
  margin:0;
  color:rgba(231,242,247,.75);
  font-size:13px;
  line-height:1.8;
}

.platform-experience-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:15px;
}

.platform-experience-card{
  position:relative;
  min-height:184px;
  overflow:hidden;
  border-radius:12px;
  border:1px solid rgba(93,126,145,.14);
  background:#fff;
  box-shadow:0 8px 22px rgba(70,99,118,.07);
}

.platform-card-visual{
  position:absolute;
  inset:0;
  opacity:.88;
}

.platform-experience-card.health .platform-card-visual{
  background:
    radial-gradient(circle at 70% 35%,rgba(36,165,127,.38),transparent 35%),
    linear-gradient(135deg,#164837,#0b2220 70%);
}

.platform-experience-card.lifestyle .platform-card-visual{
  background:
    radial-gradient(circle at 80% 30%,rgba(215,176,108,.36),transparent 36%),
    linear-gradient(135deg,#3b2f22,#1f1f1b 70%);
}

.platform-experience-card.technology .platform-card-visual{
  background:
    radial-gradient(circle at 70% 32%,rgba(61,147,255,.38),transparent 33%),
    linear-gradient(135deg,#132f48,#101b28 72%);
}

.platform-experience-card.service .platform-card-visual{
  background:
    radial-gradient(circle at 75% 35%,rgba(188,124,83,.32),transparent 34%),
    linear-gradient(135deg,#4b3228,#251e1a 72%);
}

.platform-card-content{
  position:relative;
  z-index:2;
  padding:25px 24px;
  color:#fff;
}

.platform-card-icon{
  display:block;
  margin-bottom:35px;
  color:#e8bf68;
  font-size:20px;
}

.platform-card-content h3{
  margin:0 0 7px;
  font-size:19px;
  font-weight:650;
}

.platform-card-content p{
  margin:0;
  color:rgba(238,244,247,.70);
  font-size:11px;
  line-height:1.5;
}

.platform-experience-card > button{
  position:absolute;
  z-index:2;
  right:18px;
  bottom:17px;
  width:30px;
  height:30px;
  border:1px solid rgba(255,255,255,.26);
  border-radius:50%;
  background:rgba(255,255,255,.09);
  color:#fff;
  cursor:pointer;
}

.platform-bottom-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:2fr .8fr;
  gap:15px;
}

.platform-foundation-card,
.platform-journey-card{
  min-height:225px;
  border-radius:12px;
  box-shadow:0 8px 22px rgba(70,99,118,.06);
}

.platform-foundation-card{
  padding:28px 30px;
  border:1px solid #dde6ec;
  background:#fff;
}

.platform-section-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}

.platform-section-heading h2{
  margin:0 0 6px;
  color:#17364b;
  font-size:19px;
}

.platform-section-heading p{
  margin:0;
  color:#7b8f9d;
  font-size:11px;
}

.platform-section-heading button{
  border:0;
  background:transparent;
  color:#b88438;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}

.platform-foundation-features{
  margin-top:36px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
}

.platform-foundation-features > div{
  display:grid;
  grid-template-columns:34px auto;
  gap:11px;
}

.platform-foundation-features > div > span{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#edf6f7;
  color:#0c8d91;
}

.platform-foundation-features strong{
  color:#243e50;
  font-size:11px;
}

.platform-foundation-features p{
  margin:6px 0 0;
  color:#8597a3;
  font-size:9px;
  line-height:1.55;
}

.platform-journey-card{
  position:relative;
  overflow:hidden;
  padding:29px 28px;
  color:#fff;
  background:
    radial-gradient(circle at 82% 80%,rgba(37,155,168,.25),transparent 30%),
    linear-gradient(145deg,#0a2935,#0d4b56);
}

.platform-journey-card > span{
  color:#ddb25d;
  font-size:8px;
  font-weight:800;
  letter-spacing:1.2px;
}

.platform-journey-card h2{
  margin:13px 0 12px;
  font-size:24px;
  line-height:1.22;
}

.platform-journey-card p{
  margin:0;
  color:rgba(230,240,244,.66);
  font-size:10px;
  line-height:1.7;
}

.platform-journey-card button{
  position:absolute;
  right:24px;
  bottom:24px;
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  background:rgba(255,255,255,.07);
  color:#fff;
}

@media (max-width:1100px){
  .platform-app-shell{
    grid-template-columns:200px minmax(0,1fr);
  }

  .platform-topbar{
    grid-template-columns:160px minmax(200px,1fr);
  }

  .platform-top-actions{
    display:none;
  }

  .platform-experience-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .platform-bottom-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .platform-app-shell{
    width:calc(100vw - 12px);
    grid-template-columns:1fr;
    border-radius:18px;
  }

  .platform-sidebar{
    min-height:auto;
  }

  .platform-sidebar-vision{
    display:none;
  }

  .platform-menu{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .platform-topbar{
    height:auto;
    grid-template-columns:1fr;
    padding:14px;
  }

  .platform-search{
    max-width:none;
  }

  .platform-content{
    padding:14px;
  }

  .platform-hero{
    min-height:320px;
  }

  .platform-hero-copy{
    padding:34px 26px;
  }

  .platform-hero h1{
    flex-direction:column;
    gap:5px;
    font-size:45px;
  }

  .platform-experience-grid{
    grid-template-columns:1fr;
  }

  .platform-foundation-features{
    grid-template-columns:1fr;
    gap:18px;
  }
}

/* SCREEN 01 - DARK SHELL */
body:has(#platformView.active)>header,
body:has(#platformView.active)>footer{
  display:none;
}

body:has(#platformView.active){
  background:#020a11;
}

body:has(#platformView.active) .shell{
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
}

#platformView.active{
  min-height:100vh;
  background:#020a11;
}

#platformView .platform-app-shell{
  width:100%;
  min-height:100vh;
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  grid-template-columns:260px minmax(0,1fr);
}


/* SCREEN 01 - DARK TOPBAR */
#platformView .platform-main{
  background:#07111b;
}

#platformView .platform-topbar{
  height:80px;
  border-bottom:1px solid rgba(120,180,220,.12);
  background:linear-gradient(180deg,#06111b,#07141f);
}

#platformView .platform-switcher{
  border-color:rgba(120,180,220,.18);
  background:#0b1824;
  color:#eef6fb;
}

#platformView .platform-search{
  border-color:rgba(120,180,220,.18);
  background:#0b1c2a;
}

#platformView .platform-search input{
  color:#e7f1f7;
}

#platformView .platform-search input::placeholder{
  color:rgba(200,218,230,.55);
}

#platformView .platform-top-actions > button,
#platformView .platform-user strong{
  color:#edf5fa;
}

#platformView .platform-user span{
  color:rgba(200,216,228,.58);
}

#platformView .platform-content{
  background:#08121c;
}


/* SCREEN 01 - HERO MATCH */
#platformView .platform-hero{
  min-height:410px;
  background:
    radial-gradient(circle at 78% 48%,rgba(255,167,63,.17),transparent 17%),
    radial-gradient(circle at 70% 25%,rgba(38,110,165,.16),transparent 28%),
    linear-gradient(100deg,#07111b 0%,#0a1d2a 48%,#102f42 100%);
}

#platformView .platform-hero-copy{
  padding:58px 44px;
}

#platformView .platform-hero h1{
  gap:14px;
  font-size:58px;
}

#platformView .platform-hero h1 span{
  color:#ffffff;
}

#platformView .platform-hero h1 strong{
  color:#f0a13c;
}

#platformView .platform-manifesto{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:8px;
  color:#f3f7fa;
  font-size:11px;
  font-weight:650;
  letter-spacing:3px;
}

#platformView .platform-manifesto span{
  margin:0;
  padding:0;
}

#platformView .platform-manifesto span::after{
  display:none;
}

#platformView .platform-accent-line{
  width:120px;
  height:4px;
  margin:22px 0 18px;
  border-radius:99px;
  background:linear-gradient(90deg,#ffc85e,#ff921f 70%,transparent);
}

#platformView .platform-hero-desc{
  color:rgba(238,244,248,.82);
  font-size:13px;
  line-height:1.75;
}


/* SCREEN 01 - DARK FOUNDATION BLOCK */
#platformView .platform-foundation-card{
  border-color:rgba(121,184,226,.13);
  background:
    linear-gradient(145deg,#0b1824,#09141e);
}

#platformView .platform-section-heading h2,
#platformView .platform-foundation-features strong{
  color:#eef6fb;
}

#platformView .platform-section-heading p,
#platformView .platform-foundation-features p{
  color:rgba(197,215,227,.65);
}

#platformView .platform-section-heading button{
  color:#5db9ff;
}

#platformView .platform-foundation-features > div > span{
  background:#0b2840;
  color:#4db7ff;
}


/* SCREEN 01 - CINEMATIC EXPERIENCE CARDS */
#platformView .platform-experience-card{
  min-height:190px;
  border-color:rgba(255,255,255,.22);
  box-shadow:
    0 14px 34px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.08);
}

#platformView .platform-card-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.54)),
    radial-gradient(circle at 75% 25%,rgba(255,255,255,.10),transparent 28%);
}

#platformView .platform-experience-card.health .platform-card-visual{
  background:
    radial-gradient(circle at 68% 20%,rgba(134,219,173,.30),transparent 25%),
    radial-gradient(circle at 50% 65%,rgba(34,112,78,.36),transparent 42%),
    linear-gradient(145deg,#173b30,#091b17);
}

#platformView .platform-experience-card.lifestyle .platform-card-visual{
  background:
    radial-gradient(circle at 68% 18%,rgba(255,184,94,.32),transparent 26%),
    radial-gradient(circle at 48% 70%,rgba(111,75,39,.32),transparent 42%),
    linear-gradient(145deg,#4a3928,#191713);
}

#platformView .platform-experience-card.technology .platform-card-visual{
  background:
    radial-gradient(circle at 72% 20%,rgba(78,172,255,.38),transparent 25%),
    radial-gradient(circle at 50% 70%,rgba(34,79,145,.35),transparent 40%),
    linear-gradient(145deg,#16334d,#0b1724);
}

#platformView .platform-experience-card.service .platform-card-visual{
  background:
    radial-gradient(circle at 72% 18%,rgba(255,166,108,.30),transparent 26%),
    radial-gradient(circle at 48% 72%,rgba(105,62,41,.34),transparent 40%),
    linear-gradient(145deg,#4a3329,#1b1715);
}

#platformView .platform-experience-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,183,78,.38);
  box-shadow:
    0 20px 48px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.10);
}

#platformView .platform-card-content{
  padding:28px 22px;
}

#platformView .platform-card-icon{
  color:#ffb43f;
  text-shadow:0 0 18px rgba(255,166,48,.25);
}

#platformView .platform-experience-card > button{
  border-color:rgba(255,255,255,.32);
  background:rgba(255,145,31,.86);
  color:#fff;
}


/* =========================================================
   FOUNDATION   SCREEN 02 / IDN MOBILE
   ========================================================= */

.platform-mobile-cta,
.platform-mobile-nav{
  display:none;
}

@media (max-width:760px){

  body:has(#platformView.active){
    background:#020811;
  }

  #platformView .platform-app-shell{
    width:100%;
    min-height:100vh;
    grid-template-columns:1fr;
    border-radius:0;
  }

  #platformView .platform-sidebar{
    min-height:auto;
    padding:18px 18px 8px;
    border-right:0;
    background:#06111b;
  }

  #platformView .platform-logo{
    padding:0 0 14px;
  }

  #platformView .platform-menu,
  #platformView .platform-sidebar-vision{
    display:none;
  }

  #platformView .platform-topbar{
    height:auto;
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    padding:8px 18px 16px;
    background:#06111b;
  }

  #platformView .platform-switcher{
    display:none;
  }

  #platformView .platform-top-actions{
    display:flex;
    position:absolute;
    top:18px;
    right:16px;
  }

  #platformView .platform-user{
    display:none;
  }

  #platformView .platform-search{
    max-width:none;
    width:100%;
    min-height:48px;
  }

  #platformView .platform-content{
    padding:0 14px 96px;
    background:#030b13;
  }

  #platformView .platform-hero{
    min-height:520px;
    border-radius:0;
  }

  #platformView .platform-hero-copy{
    padding:34px 20px;
  }

  #platformView .platform-hero h1{
    display:block;
    font-size:52px;
    line-height:.95;
  }

  #platformView .platform-hero h1 span,
  #platformView .platform-hero h1 strong{
    display:block;
  }

  #platformView .platform-manifesto{
    margin-top:18px;
    gap:7px;
    font-size:10px;
  }

  #platformView .platform-hero-desc{
    margin-top:0;
    font-size:14px;
    line-height:1.7;
  }

  #platformView .platform-mobile-cta{
    width:100%;
    min-height:58px;
    margin-top:20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 24px;
    border:0;
    border-radius:999px;
    background:
      linear-gradient(90deg,#ffb02e,#e98a10);
    color:#fff;
    font-size:20px;
    font-weight:650;
    box-shadow:0 14px 34px rgba(239,149,24,.25);
  }

  #platformView .platform-mobile-cta span{
    font-size:28px;
  }

  #platformView .platform-experience-grid{
    padding:14px 0 0;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  #platformView .platform-experience-card{
    min-height:220px;
    border-radius:14px;
  }

  #platformView .platform-card-content{
    padding:18px 16px;
  }

  #platformView .platform-card-icon{
    margin-bottom:78px;
  }

  #platformView .platform-card-content h3{
    font-size:17px;
  }

  #platformView .platform-card-content p{
    font-size:10px;
  }

  #platformView .platform-bottom-grid{
    padding:12px 0 16px;
    grid-template-columns:1fr;
  }

  #platformView .platform-journey-card{
    order:-1;
    min-height:220px;
  }

  #platformView .platform-foundation-card{
    padding:22px 18px;
  }

  #platformView .platform-section-heading{
    display:block;
  }

  #platformView .platform-section-heading button{
    display:none;
  }

  #platformView .platform-foundation-features{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }

  #platformView .platform-foundation-features > div{
    display:block;
    padding:12px 8px;
    border:1px solid rgba(85,163,222,.10);
    border-radius:12px;
    background:#0a1a27;
  }

  #platformView .platform-foundation-features > div > span{
    margin-bottom:10px;
  }

  #platformView .platform-mobile-nav{
    position:fixed;
    z-index:50;
    left:0;
    right:0;
    bottom:0;
    height:78px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    padding:8px 8px 10px;
    border-top:1px solid rgba(122,185,229,.14);
    background:rgba(3,12,20,.97);
    backdrop-filter:blur(18px);
  }

  #platformView .platform-mobile-nav button{
    border:0;
    background:transparent;
    color:rgba(208,221,231,.65);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
  }

  #platformView .platform-mobile-nav button span{
    font-size:20px;
  }

  #platformView .platform-mobile-nav button strong{
    font-size:9px;
    font-weight:500;
  }

  #platformView .platform-mobile-nav button.active{
    color:#ffb22c;
  }
}

/* =========================================================
   FOUNDATION — SCREEN 03 / FND-AUTH
   BLS IDENTITY — MOBILE FIRST
   ========================================================= */

#registerView{
  background:
    radial-gradient(circle at 50% 0%,rgba(236,170,75,.08),transparent 34%),
    linear-gradient(180deg,#0a0f14 0%,#111820 100%);
}

#registerView .auth-card{
  width:min(430px,100%);
  padding:34px 28px 30px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:28px;
  background:rgba(13,20,27,.94);
  box-shadow:
    0 28px 80px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.03);
}

#registerView .auth-card.wide{
  width:min(430px,100%);
}

#registerView .eyebrow{
  color:#e6ad55;
  letter-spacing:.18em;
  font-size:11px;
}

#registerView h2{
  margin-top:8px;
  font-size:34px;
  line-height:1.05;
}

#registerView .muted{
  margin-top:8px;
  margin-bottom:26px;
  color:rgba(220,230,238,.62);
}

#registerView .identity-step{
  display:flex;
  flex-direction:column;
  gap:17px;
}

#registerView .identity-step.hidden{
  display:none;
}

#registerView label{
  color:#dbe6ee;
  font-size:12px;
  font-weight:600;
}

#registerView input,
#registerView select{
  min-height:54px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.09);
  background:#0a1016;
}

#registerView input:focus,
#registerView select:focus{
  border-color:rgba(232,168,73,.72);
  box-shadow:0 0 0 3px rgba(232,168,73,.08);
}

#registerView .button-primary{
  min-height:54px;
  margin-top:4px;
  border-radius:999px;
  border:0;
  background:linear-gradient(180deg,#f0b85d,#dc9835);
  color:#111;
  font-weight:700;
  letter-spacing:.01em;
  box-shadow:0 12px 28px rgba(220,152,53,.18);
}

#registerView .button-primary:hover{
  transform:translateY(-1px);
}

#registerView .back-link{
  margin-bottom:24px;
  color:rgba(230,238,245,.55);
}

#registerView .switch-copy{
  margin-top:22px;
  border-top:1px solid rgba(255,255,255,.06);
}

@media (max-width:620px){
  #registerView{
    min-height:100vh;
    padding:22px 14px 90px;
    align-items:flex-start;
  }

  #registerView .auth-card,
  #registerView .auth-card.wide{
    width:100%;
    margin-top:12px;
    padding:28px 20px 26px;
    border-radius:24px;
  }

  #registerView h2{
    font-size:31px;
  }
}

/* =========================================================
   SCREEN 04 — FND-SECURITY
   ========================================================= */

#securityView{
  min-height:calc(100vh - 148px);
  padding:54px 24px 70px;
  background:
    radial-gradient(circle at 50% 18%,rgba(45,132,196,.08),transparent 30%),
    linear-gradient(180deg,#07111a 0%,#050b11 100%);
}

#securityView.active{
  display:block;
}

.foundation-security-shell{
  width:min(1120px,100%);
  margin:0 auto;
}

.foundation-security-header{
  max-width:760px;
  margin:0 auto 38px;
  text-align:center;
}

.foundation-security-header .eyebrow{
  display:block;
  margin-bottom:10px;
  color:#53b8f3;
  font-size:10px;
  font-weight:700;
  letter-spacing:.22em;
}

.foundation-security-header h2{
  margin:0 0 14px;
  font-size:40px;
  letter-spacing:-1px;
}

.foundation-security-header p{
  margin:0 auto;
  color:rgba(191,209,224,.70);
  line-height:1.7;
}

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

.foundation-security-card{
  min-height:210px;
  padding:28px;
  border:1px solid rgba(111,183,232,.12);
  border-radius:22px;
  background:
    radial-gradient(circle at 100% 0%,rgba(50,146,221,.07),transparent 31%),
    linear-gradient(145deg,rgba(14,22,31,.96),rgba(6,11,17,.98));
  box-shadow:
    0 24px 70px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.025);
}

.foundation-security-card .security-index{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  margin-bottom:20px;
  border:1px solid rgba(239,185,88,.25);
  border-radius:50%;
  color:#efba61;
  font-size:11px;
  font-weight:700;
}

.foundation-security-card h3{
  margin:0 0 7px;
  font-size:21px;
}

.foundation-security-card p{
  margin:0 0 18px;
  color:#4cb8f4;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.foundation-security-card strong{
  display:block;
  color:rgba(223,235,244,.76);
  font-size:13px;
  font-weight:500;
  line-height:1.65;
}

.foundation-security-meta{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:30px;
}

.foundation-security-meta span{
  min-width:88px;
  padding:10px 14px;
  border:1px solid rgba(111,183,232,.10);
  border-radius:999px;
  background:rgba(255,255,255,.018);
  color:rgba(188,207,222,.65);
  text-align:center;
  font-size:10px;
  letter-spacing:.12em;
}

@media (max-width:760px){
  #securityView{
    padding:34px 14px 50px;
  }

  .foundation-security-header h2{
    font-size:31px;
  }

  .foundation-security-grid{
    grid-template-columns:1fr;
  }

  .foundation-security-card{
    min-height:auto;
  }

  .foundation-security-meta{
    flex-wrap:wrap;
  }
}


/* SCREEN 04 — SECURITY CORE HERO */

.foundation-security-hero{
  position:relative;
  min-height:260px;
  margin:0 0 24px;
  padding:34px;
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  align-items:center;
  gap:34px;
  overflow:hidden;
  border:1px solid rgba(111,183,232,.13);
  border-radius:24px;
  background:
    radial-gradient(circle at 24% 48%,rgba(45,144,229,.14),transparent 24%),
    radial-gradient(circle at 90% 10%,rgba(239,181,83,.08),transparent 26%),
    linear-gradient(145deg,rgba(12,21,30,.98),rgba(5,10,16,.99));
  box-shadow:
    0 28px 80px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.025);
}

.security-core-shield{
  position:relative;
  z-index:3;
  width:170px;
  height:190px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(81,176,245,.38);
  clip-path:polygon(50% 0,88% 14%,84% 67%,50% 100%,16% 67%,12% 14%);
  background:
    radial-gradient(circle at 50% 40%,rgba(73,164,255,.30),transparent 35%),
    linear-gradient(180deg,rgba(17,38,58,.98),rgba(7,16,27,.99));
  box-shadow:
    0 0 60px rgba(43,142,223,.18),
    inset 0 0 40px rgba(61,153,231,.08);
}

.security-core-icon{
  margin-bottom:6px;
  color:#65baff;
  font-size:48px;
  text-shadow:0 0 24px rgba(72,169,247,.42);
}

.security-core-shield strong{
  color:#eef8ff;
  font-size:22px;
  letter-spacing:.05em;
}

.security-core-shield small{
  margin-top:5px;
  color:#efb75d;
  font-size:9px;
  font-weight:700;
  letter-spacing:.24em;
}

.security-orbit{
  position:absolute;
  z-index:1;
  border:1px solid rgba(78,170,240,.13);
  border-radius:50%;
  pointer-events:none;
}

.security-orbit-one{
  width:235px;
  height:235px;
  left:45px;
  top:12px;
}

.security-orbit-two{
  width:185px;
  height:185px;
  left:70px;
  top:37px;
  border-color:rgba(235,177,80,.16);
}

.security-hero-copy{
  position:relative;
  z-index:3;
}

.security-hero-copy span{
  display:block;
  margin-bottom:10px;
  color:#55b7f1;
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
}

.security-hero-copy h3{
  margin:0 0 12px;
  font-size:30px;
  letter-spacing:-.7px;
}

.security-hero-copy p{
  max-width:650px;
  margin:0;
  color:rgba(197,214,227,.72);
  font-size:14px;
  line-height:1.7;
}

@media (max-width:760px){
  .foundation-security-hero{
    grid-template-columns:1fr;
    text-align:center;
  }

  .security-orbit-one,
  .security-orbit-two{
    left:50%;
    transform:translateX(-50%);
  }

  .security-hero-copy p{
    margin:0 auto;
  }
}


/* SCREEN 05 — FOUNDATION SYSTEM STATE */

#systemStateView{
  min-height:100vh;
  padding:72px 24px 96px;
  background:
    radial-gradient(circle at 18% 12%,rgba(50,141,215,.10),transparent 28%),
    radial-gradient(circle at 84% 8%,rgba(215,168,91,.08),transparent 24%),
    linear-gradient(180deg,#071019 0%,#050a10 100%);
}

#systemStateView.active{
  display:block;
}

.system-state-shell{
  width:min(1120px,100%);
  margin:0 auto;
}

.system-state-header{
  max-width:760px;
  margin:0 auto 34px;
  text-align:center;
}

.system-state-header .eyebrow{
  display:block;
  margin-bottom:12px;
  color:#d7a85b;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
}

.system-state-header h2{
  margin:0 0 12px;
  font-size:34px;
  letter-spacing:-.8px;
}

.system-state-header p{
  margin:0;
  color:rgba(198,214,228,.70);
  font-size:14px;
  line-height:1.7;
}

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

.system-state-card{
  position:relative;
  min-height:150px;
  padding:24px 24px 22px;
  border:1px solid rgba(104,163,207,.12);
  border-radius:20px;
  background:
    linear-gradient(145deg,rgba(14,25,36,.98),rgba(6,12,19,.98));
  box-shadow:
    0 18px 52px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.025);
}

.system-state-card > span{
  position:absolute;
  top:18px;
  right:18px;
  color:rgba(215,168,91,.70);
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
}

.system-state-card h3{
  margin:26px 0 8px;
  font-size:22px;
  letter-spacing:.04em;
}

.system-state-card p{
  margin:0;
  color:rgba(198,214,228,.68);
  font-size:14px;
}

.state-loading h3{ color:#62b7ee; }
.state-success h3{ color:#63c695; }
.state-empty h3{ color:#a7b4bf; }
.state-error h3{ color:#e27d7d; }
.state-unauthorized h3{ color:#d7a85b; }
.state-forbidden h3{ color:#d39b70; }
.state-verification h3{ color:#9fb8ff; }

@media (max-width:760px){
  .system-state-grid{
    grid-template-columns:1fr;
  }

  .system-state-header h2{
    font-size:28px;
  }
}


/* SCREEN 05 — MASTER VISUAL OVERRIDE */

#systemStateView .system-state-shell{
  width:min(1460px,calc(100% - 32px));
}

#systemStateView .system-state-header{
  max-width:860px;
  margin-bottom:38px;
}

#systemStateView .system-state-grid{
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:12px;
}

#systemStateView .system-state-card{
  min-height:430px;
  padding:22px 16px 16px;
  display:flex;
  flex-direction:column;
  text-align:center;
  border-radius:18px;
  overflow:hidden;
}

#systemStateView .state-number{
  position:absolute;
  top:14px;
  right:15px;
  font-size:9px;
  color:rgba(215,168,91,.72);
}

#systemStateView .state-icon{
  width:82px;
  height:82px;
  margin:28px auto 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid currentColor;
  border-radius:50%;
  font-size:38px;
  font-weight:700;
  background:rgba(8,16,25,.70);
  box-shadow:0 0 36px rgba(70,160,230,.14);
}

#systemStateView .system-state-card h3{
  margin:0 0 7px;
  font-size:17px;
  line-height:1.08;
  letter-spacing:.01em;
}

#systemStateView .system-state-card h4{
  margin:0 0 18px;
  font-size:13px;
  font-weight:500;
}

#systemStateView .system-state-card p{
  margin:0;
  font-size:12px;
  line-height:1.6;
  text-align:left;
}

#systemStateView .state-action{
  margin-top:auto;
  padding:13px 10px;
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  background:rgba(255,255,255,.035);
  font-size:10px;
  line-height:1.45;
}

/* LOADING */
#systemStateView .state-loading{
  border-color:rgba(62,171,244,.40);
  background:
    radial-gradient(circle at 50% 18%,rgba(39,147,230,.18),transparent 28%),
    linear-gradient(180deg,rgba(8,31,50,.98),rgba(5,14,23,.99));
}
#systemStateView .state-loading .state-icon,
#systemStateView .state-loading h3,
#systemStateView .state-loading h4{color:#56b9ff;}

/* SUCCESS */
#systemStateView .state-success{
  border-color:rgba(65,205,153,.40);
  background:
    radial-gradient(circle at 50% 18%,rgba(45,186,132,.16),transparent 28%),
    linear-gradient(180deg,rgba(6,38,31,.98),rgba(5,17,16,.99));
}
#systemStateView .state-success .state-icon,
#systemStateView .state-success h3,
#systemStateView .state-success h4{color:#5ee0ad;}

/* EMPTY */
#systemStateView .state-empty{
  border-color:rgba(154,183,211,.35);
  background:
    radial-gradient(circle at 50% 18%,rgba(112,153,193,.15),transparent 28%),
    linear-gradient(180deg,rgba(20,37,54,.98),rgba(7,17,27,.99));
}
#systemStateView .state-empty .state-icon,
#systemStateView .state-empty h3,
#systemStateView .state-empty h4{color:#a8c2df;}

/* ERROR */
#systemStateView .state-error{
  border-color:rgba(233,88,74,.46);
  background:
    radial-gradient(circle at 50% 18%,rgba(218,68,54,.18),transparent 28%),
    linear-gradient(180deg,rgba(48,18,20,.98),rgba(18,8,11,.99));
}
#systemStateView .state-error .state-icon,
#systemStateView .state-error h3,
#systemStateView .state-error h4{color:#ff7469;}

/* UNAUTHORIZED */
#systemStateView .state-unauthorized{
  border-color:rgba(137,116,255,.42);
  background:
    radial-gradient(circle at 50% 18%,rgba(104,87,227,.18),transparent 28%),
    linear-gradient(180deg,rgba(27,24,65,.98),rgba(11,10,28,.99));
}
#systemStateView .state-unauthorized .state-icon,
#systemStateView .state-unauthorized h3,
#systemStateView .state-unauthorized h4{color:#a99dff;}

/* FORBIDDEN */
#systemStateView .state-forbidden{
  border-color:rgba(226,168,70,.45);
  background:
    radial-gradient(circle at 50% 18%,rgba(209,142,43,.18),transparent 28%),
    linear-gradient(180deg,rgba(52,34,12,.98),rgba(20,14,7,.99));
}
#systemStateView .state-forbidden .state-icon,
#systemStateView .state-forbidden h3,
#systemStateView .state-forbidden h4{color:#f0b653;}

/* VERIFICATION */
#systemStateView .state-verification{
  border-color:rgba(63,178,239,.42);
  background:
    radial-gradient(circle at 50% 18%,rgba(43,148,220,.18),transparent 28%),
    linear-gradient(180deg,rgba(8,37,58,.98),rgba(5,15,25,.99));
}
#systemStateView .state-verification .state-icon,
#systemStateView .state-verification h3,
#systemStateView .state-verification h4{color:#66c4f5;}

@media (max-width:1200px){
  #systemStateView .system-state-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:760px){
  #systemStateView{
    padding:48px 16px 72px;
  }

  #systemStateView .system-state-grid{
    grid-template-columns:1fr;
  }

  #systemStateView .system-state-card{
    min-height:340px;
  }
}


/* SCREEN 06 — CUSTOMER HOME */

#customerHomeView{
  min-height:100vh;
  background:
    radial-gradient(circle at 18% 10%,rgba(42,129,201,.10),transparent 26%),
    linear-gradient(180deg,#071019 0%,#050a10 100%);
}

#customerHomeView.active{
  display:block;
}

.customer-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
}

.customer-sidebar{
  position:relative;
  min-height:100vh;
  padding:28px 18px 26px;
  display:flex;
  flex-direction:column;
  border-right:1px solid rgba(107,177,228,.10);
  background:
    linear-gradient(180deg,rgba(8,18,28,.99),rgba(5,11,18,.99));
}

.customer-brand{
  display:flex;
  flex-direction:column;
  padding:0 10px 26px;
}

.customer-brand strong{
  font-size:18px;
  letter-spacing:.04em;
}

.customer-brand span{
  margin-top:4px;
  color:rgba(190,207,221,.48);
  font-size:9px;
  letter-spacing:.18em;
}

.customer-nav-label{
  margin:13px 10px 8px;
  color:rgba(180,200,216,.42);
  font-size:9px;
  font-weight:700;
  letter-spacing:.17em;
}

.customer-nav{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.customer-nav-item{
  width:100%;
  min-height:46px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid transparent;
  border-radius:12px;
  color:rgba(195,211,225,.66);
  background:transparent;
  text-align:left;
  cursor:pointer;
}

.customer-nav-item span{
  width:22px;
  color:#61b8ef;
  text-align:center;
}

.customer-nav-item strong{
  font-size:12px;
  font-weight:600;
}

.customer-nav-item:hover{
  color:#f1f8fd;
  background:rgba(255,255,255,.025);
}

.customer-nav-item.active{
  color:#fff;
  border-color:rgba(84,176,241,.15);
  background:
    linear-gradient(90deg,rgba(30,110,168,.16),rgba(255,255,255,.01));
  box-shadow:inset 2px 0 0 #56b9f5;
}

.customer-sidebar-vision{
  margin-top:auto;
  padding:18px 10px 0;
  display:flex;
  flex-direction:column;
  gap:5px;
  color:rgba(192,209,223,.34);
  font-size:8px;
  letter-spacing:.10em;
}

.customer-sidebar-vision small{
  margin-top:9px;
  color:rgba(215,168,91,.58);
}

.customer-main{
  min-width:0;
}

.customer-topbar{
  min-height:72px;
  padding:12px 26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  border-bottom:1px solid rgba(115,180,225,.09);
  background:rgba(5,12,19,.84);
  backdrop-filter:blur(14px);
}

.customer-search{
  width:min(580px,52vw);
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 15px;
  border:1px solid rgba(118,182,226,.12);
  border-radius:12px;
  background:rgba(255,255,255,.025);
}

.customer-search span{
  color:#65b9ee;
}

.customer-search input{
  width:100%;
  height:42px;
  border:0;
  outline:0;
  color:#eaf4fb;
  background:transparent;
  font-size:12px;
}

.customer-search input::placeholder{
  color:rgba(183,201,216,.38);
}

.customer-top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.customer-top-actions > button{
  min-height:38px;
  padding:0 11px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  color:rgba(222,235,244,.72);
  background:rgba(255,255,255,.025);
}

.customer-user{
  display:flex;
  align-items:center;
  gap:9px;
  padding-left:6px;
}

.customer-avatar{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#65b9ee;
  background:rgba(70,151,211,.12);
}

.customer-user div{
  display:flex;
  flex-direction:column;
}

.customer-user strong{
  font-size:11px;
}

.customer-user small{
  margin-top:2px;
  color:rgba(192,208,220,.42);
  font-size:9px;
}

.customer-content{
  width:min(1440px,calc(100% - 42px));
  margin:0 auto;
  padding:28px 0 54px;
}

.customer-hero{
  min-height:300px;
  padding:34px 38px;
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:26px;
  align-items:center;
  border:1px solid rgba(98,174,224,.12);
  border-radius:24px;
  background:
    radial-gradient(circle at 78% 30%,rgba(53,150,222,.15),transparent 25%),
    radial-gradient(circle at 92% 80%,rgba(215,168,91,.08),transparent 24%),
    linear-gradient(145deg,rgba(10,26,39,.98),rgba(5,12,19,.99));
  box-shadow:0 26px 76px rgba(0,0,0,.28);
}

.customer-hero-copy > span{
  color:#d7a85b;
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
}

.customer-hero-copy h2{
  margin:14px 0 3px;
  font-size:18px;
  font-weight:500;
  color:rgba(222,235,244,.72);
}

.customer-hero-copy h1{
  margin:0;
  font-size:46px;
  letter-spacing:-1.4px;
}

.customer-hero-copy h1 strong{
  color:#62b9ef;
}

.customer-hero-copy p{
  max-width:600px;
  margin:16px 0 22px;
  color:rgba(194,211,225,.64);
  font-size:13px;
  line-height:1.7;
}

.customer-hero-copy button{
  min-height:42px;
  padding:0 18px;
  border:1px solid rgba(215,168,91,.32);
  border-radius:12px;
  color:#f2d297;
  background:rgba(215,168,91,.08);
}

.customer-hero-manifesto{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.customer-hero-manifesto span{
  padding:18px 12px;
  border:1px solid rgba(104,177,227,.11);
  border-radius:14px;
  color:#dcecf7;
  background:rgba(255,255,255,.022);
  text-align:center;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
}

.customer-hero-manifesto p{
  grid-column:1/-1;
  margin:5px 0 0;
  color:rgba(193,211,224,.40);
  font-size:8px;
  text-align:center;
  letter-spacing:.12em;
}

.customer-primary-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

.customer-primary-card{
  position:relative;
  min-height:190px;
  padding:22px;
  border:1px solid rgba(109,174,219,.11);
  border-radius:18px;
  background:
    linear-gradient(145deg,rgba(12,25,37,.98),rgba(6,13,21,.99));
}

.customer-card-icon{
  display:block;
  margin-bottom:18px;
  color:#62b9ef;
  font-size:26px;
}

.customer-primary-card h3{
  margin:0 0 8px;
  font-size:17px;
}

.customer-primary-card p{
  margin:0;
  color:rgba(190,208,221,.60);
  font-size:11px;
  line-height:1.55;
}

.customer-primary-card button{
  position:absolute;
  right:18px;
  bottom:16px;
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:50%;
  color:#d8e8f3;
  background:rgba(255,255,255,.025);
}

.customer-bottom-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:14px;
}

.customer-featured,
.customer-recent{
  padding:22px;
  border:1px solid rgba(109,174,219,.10);
  border-radius:18px;
  background:rgba(8,18,28,.90);
}

.customer-featured header,
.customer-recent header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}

.customer-featured header span,
.customer-recent header span{
  color:#d7a85b;
  font-size:9px;
  font-weight:700;
  letter-spacing:.14em;
}

.customer-featured header button,
.customer-recent header button{
  border:0;
  color:#66b9ed;
  background:transparent;
  font-size:10px;
}

.customer-featured-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.customer-featured-grid div{
  min-height:105px;
  padding:15px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid rgba(255,255,255,.055);
  border-radius:14px;
  background:
    radial-gradient(circle at 50% 10%,rgba(55,145,211,.13),transparent 35%),
    rgba(255,255,255,.018);
}

.customer-featured-grid span{
  margin-bottom:auto;
  color:#64b8ed;
  font-size:22px;
}

.customer-featured-grid strong{
  font-size:12px;
}

.customer-activity-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.customer-activity-list div{
  padding:11px 12px;
  display:grid;
  grid-template-columns:24px 1fr;
  gap:2px 9px;
  align-items:center;
  border:1px solid rgba(255,255,255,.045);
  border-radius:12px;
  background:rgba(255,255,255,.018);
}

.customer-activity-list div > span{
  grid-row:1/3;
  color:#61b8ed;
}

.customer-activity-list strong{
  font-size:10px;
}

.customer-activity-list small{
  color:rgba(188,205,219,.38);
  font-size:8px;
}

@media (max-width:1100px){
  .customer-shell{
    grid-template-columns:210px minmax(0,1fr);
  }

  .customer-primary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .customer-bottom-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .customer-shell{
    display:block;
  }

  .customer-sidebar{
    min-height:auto;
    border-right:0;
    border-bottom:1px solid rgba(107,177,228,.10);
  }

  .customer-nav{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .customer-sidebar-vision{
    display:none;
  }

  .customer-topbar{
    flex-direction:column;
    align-items:stretch;
  }

  .customer-search{
    width:100%;
  }

  .customer-top-actions{
    justify-content:space-between;
  }

  .customer-content{
    width:min(100% - 28px,1440px);
  }

  .customer-hero{
    grid-template-columns:1fr;
    padding:26px 22px;
  }

  .customer-primary-grid,
  .customer-featured-grid{
    grid-template-columns:1fr;
  }

  .customer-hero-copy h1{
    font-size:36px;
  }
}


/* SCREEN 06 — FULL VIEWPORT CUSTOMER MODE */

body:has(#customerHomeView.active) > .topbar{
  display:none;
}

body:has(#customerHomeView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#customerHomeView{
  padding:0;
}

#customerHomeView.active{
  min-height:100vh;
}


/* SCREEN 06 — HERO IMAGE */

#customerHomeView .customer-hero{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(90deg,
      rgba(4,11,18,.94) 0%,
      rgba(4,11,18,.82) 24%,
      rgba(4,11,18,.50) 48%,
      rgba(4,11,18,.18) 72%,
      rgba(4,11,18,.08) 100%),
    url("./assets/customer/home/hero-customer-home.webp") center center / cover no-repeat;
}

#customerHomeView .customer-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(4,10,16,.06),rgba(4,10,16,.20)),
    radial-gradient(circle at 72% 36%,rgba(215,168,91,.10),transparent 30%);
}

#customerHomeView .customer-hero-copy,
#customerHomeView .customer-hero-manifesto{
  position:relative;
  z-index:2;
}


/* SCREEN 06 — CUSTOMER PRIMARY CARD IMAGES */

#customerHomeView .customer-primary-card{
  position:relative;
  overflow:hidden;
  min-height:220px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

#customerHomeView .customer-primary-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(5,12,19,.10) 0%,rgba(5,12,19,.42) 42%,rgba(5,12,19,.92) 100%);
  z-index:0;
}

#customerHomeView .customer-primary-card > *{
  position:relative;
  z-index:1;
}

#customerHomeView .customer-primary-card.benefits{
  background-image:url("./assets/customer/home/benefits.webp");
}

#customerHomeView .customer-primary-card.products{
  background-image:url("./assets/customer/home/products.webp");
}

#customerHomeView .customer-primary-card.explore{
  background-image:url("./assets/customer/home/explore.webp");
}

#customerHomeView .customer-primary-card.profile{
  background-image:url("./assets/customer/home/profile.webp");
}

#customerHomeView .customer-primary-card h3{
  margin-top:64px;
}

#customerHomeView .customer-primary-card p{
  color:rgba(235,243,248,.82);
  text-shadow:0 1px 8px rgba(0,0,0,.55);
}

#customerHomeView .customer-primary-card h3{
  text-shadow:0 2px 10px rgba(0,0,0,.60);
}


/* SCREEN 06 — TYPOGRAPHY BALANCE PASS */

#customerHomeView{
  font-size:15px;
  line-height:1.5;
}

/* SIDEBAR */
#customerHomeView .customer-brand strong{
  font-size:20px;
  letter-spacing:.03em;
}

#customerHomeView .customer-brand span{
  font-size:9px;
  letter-spacing:.16em;
}

#customerHomeView .customer-nav-label{
  font-size:9px;
  letter-spacing:.16em;
}

#customerHomeView .customer-nav-item strong{
  font-size:13px;
  line-height:1.25;
}

/* TOP BAR */
#customerHomeView .customer-search input{
  font-size:13px;
}

#customerHomeView .customer-user strong{
  font-size:12px;
}

#customerHomeView .customer-user small{
  font-size:9px;
}

/* HERO */
#customerHomeView .customer-hero-copy > span{
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
}

#customerHomeView .customer-hero-copy h2{
  margin:12px 0 2px;
  font-size:20px;
  line-height:1.25;
}

#customerHomeView .customer-hero-copy h1{
  margin:0;
  font-size:48px;
  line-height:1;
  letter-spacing:-1.2px;
}

#customerHomeView .customer-hero-copy p{
  max-width:560px;
  margin:16px 0 20px;
  font-size:14px;
  line-height:1.6;
}

#customerHomeView .customer-hero-copy button{
  font-size:14px;
  font-weight:700;
}

#customerHomeView .customer-hero-manifesto span{
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
}

#customerHomeView .customer-hero-manifesto p{
  font-size:9px;
  line-height:1.5;
}

/* 4 PRIMARY CARDS */
#customerHomeView .customer-primary-card h3{
  font-size:18px;
  line-height:1.2;
  font-weight:800;
}

#customerHomeView .customer-primary-card p{
  max-width:92%;
  font-size:12px;
  line-height:1.5;
}

#customerHomeView .customer-card-icon{
  font-size:24px;
}

/* FEATURED */
#customerHomeView .customer-featured header span,
#customerHomeView .customer-recent header span{
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
}

#customerHomeView .customer-featured header button,
#customerHomeView .customer-recent header button{
  font-size:10px;
}

#customerHomeView .customer-featured-grid strong{
  font-size:13px;
  font-weight:800;
  line-height:1.2;
  text-shadow:0 2px 8px rgba(0,0,0,.65);
}

/* RECENT ACTIVITY */
#customerHomeView .customer-activity-list strong{
  font-size:11px;
  line-height:1.3;
}

#customerHomeView .customer-activity-list small{
  font-size:9px;
  line-height:1.25;
}

/* MOBILE */
@media (max-width:760px){
  #customerHomeView .customer-hero-copy h2{
    font-size:18px;
  }

  #customerHomeView .customer-hero-copy h1{
    font-size:36px;
  }

  #customerHomeView .customer-hero-copy p{
    font-size:13px;
  }

  #customerHomeView .customer-primary-card h3{
    font-size:17px;
  }

  #customerHomeView .customer-primary-card p{
    font-size:12px;
  }
}


/* SCREEN 06 — FINAL VISUAL BALANCE */

/* BỎ TOÀN BỘ 4 CHỮ TRÊN HERO */
#customerHomeView .customer-hero-manifesto{
  display:none !important;
}

/* HERO CHỈ GIỮ NỘI DUNG TRÁI */
#customerHomeView .customer-hero{
  grid-template-columns:1fr;
}

#customerHomeView .customer-hero-copy{
  max-width:590px;
}

/* 4 CARD GIỮA — ĐƯA NỘI DUNG XUỐNG ĐÁY */
#customerHomeView .customer-primary-card{
  min-height:220px;
  padding:20px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

#customerHomeView .customer-primary-card .customer-card-icon{
  position:absolute;
  top:18px;
  left:18px;
  margin:0;
}

#customerHomeView .customer-primary-card h3{
  margin:0 0 7px !important;
  font-size:18px;
  line-height:1.2;
}

#customerHomeView .customer-primary-card p{
  margin:0 38px 0 0;
  max-width:88%;
  font-size:12px;
  line-height:1.45;
}

#customerHomeView .customer-primary-card button{
  right:16px;
  bottom:16px;
}

/* TĂNG ĐỘ TỐI PHÍA DƯỚI ĐỂ CHỮ RÕ */
#customerHomeView .customer-primary-card::before{
  background:
    linear-gradient(
      180deg,
      rgba(5,12,19,.04) 0%,
      rgba(5,12,19,.12) 34%,
      rgba(5,12,19,.72) 70%,
      rgba(5,12,19,.96) 100%
    );
}

/* NGÔN NGỮ */
#customerHomeView .customer-top-actions button[aria-label="Ngôn ngữ"]{
  min-width:74px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.03em;
  white-space:nowrap;
}


/* SCREEN 06 — FINAL CARD POLISH */

#customerHomeView .customer-primary-card{
  min-height:224px;
}

#customerHomeView .customer-primary-card h3{
  margin:0 0 8px !important;
  font-size:18px;
  line-height:1.18;
}

#customerHomeView .customer-primary-card p{
  margin:0 42px 14px 0;
  max-width:88%;
  font-size:12px;
  line-height:1.58;
  color:rgba(244,248,251,.88);
}

#customerHomeView .customer-primary-card button{
  right:16px;
  bottom:14px;
}

#customerHomeView .customer-primary-card::before{
  background:
    linear-gradient(
      180deg,
      rgba(5,12,19,.02) 0%,
      rgba(5,12,19,.10) 28%,
      rgba(5,12,19,.58) 62%,
      rgba(5,12,19,.95) 100%
    );
}


/* SCREEN 06 — HERO COPY DOWN TO BOTTOM */

#customerHomeView .customer-hero{
  align-items:end !important;
}

#customerHomeView .customer-hero-copy{
  align-self:end !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  height:100% !important;
  padding-bottom:18px !important;
}

#customerHomeView .customer-hero-copy .customer-hero-actions,
#customerHomeView .customer-hero-copy .hero-actions{
  margin-top:14px !important;
}

#customerHomeView .customer-hero-copy p{
  margin-bottom:12px !important;
}


/* SCREEN 06 — PRIMARY CARDS FINAL ALIGNMENT */

#customerHomeView .customer-primary-card{
  min-height:224px;
  padding:18px 18px 16px;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
}

#customerHomeView .customer-primary-card h3{
  margin:0 46px 6px 0 !important;
  font-size:18px;
  line-height:1.15;
}

#customerHomeView .customer-primary-card p{
  margin:0 48px 0 0 !important;
  max-width:calc(100% - 48px) !important;
  font-size:12px;
  line-height:1.5;
}

#customerHomeView .customer-primary-card button{
  position:absolute !important;
  right:14px !important;
  bottom:14px !important;
  width:34px !important;
  height:34px !important;
}

#customerHomeView .customer-card-icon{
  position:absolute !important;
  top:16px !important;
  left:16px !important;
  margin:0 !important;
}

/* GIỮ TÊN KHÁM PHÁ NHƯ CŨ */
#customerHomeView .customer-primary-card.explore h3{
  white-space:nowrap;
}


/* SCREEN 06 — RESTORE HERO CTA */

#customerHomeView .customer-hero-copy button{
  width:auto !important;
  min-width:0 !important;
  align-self:flex-start !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  min-height:42px !important;
  padding:0 18px !important;
  margin:0 !important;
  border:1px solid rgba(215,168,91,.32) !important;
  border-radius:12px !important;
  color:#f2d297 !important;
  background:rgba(215,168,91,.08) !important;
  font-size:14px !important;
  font-weight:700 !important;
}


/* =========================================================
   SCREEN 07 — CUS PRODUCT DISCOVERY
   ========================================================= */

body:has(#productDiscoveryView.active) > .topbar{
  display:none;
}

body:has(#productDiscoveryView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#productDiscoveryView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 74% 8%,rgba(41,126,192,.10),transparent 28%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#productDiscoveryView.active{
  display:block;
}

#productDiscoveryView .customer-shell{
  min-height:100vh;
}

.product-discovery-content{
  width:min(1440px,calc(100% - 42px));
  margin:0 auto;
  padding:20px 0 48px;
}

/* HERO */
.product-discovery-hero{
  position:relative;
  min-height:245px;
  padding:28px 32px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border:1px solid rgba(92,170,228,.12);
  border-radius:22px;
  background:
    linear-gradient(90deg,
      rgba(4,11,18,.96) 0%,
      rgba(4,11,18,.82) 36%,
      rgba(4,11,18,.36) 68%,
      rgba(4,11,18,.10) 100%),
    url("./assets/customer/home/hero-customer-home.webp") center 48% / cover no-repeat;
}

.product-discovery-copy{
  position:relative;
  z-index:2;
  width:min(760px,70%);
}

.product-discovery-copy h1{
  margin:0;
  font-size:54px;
  line-height:.96;
  letter-spacing:-1.7px;
}

.product-discovery-copy > span{
  display:block;
  margin-top:8px;
  color:#d9e8f2;
  font-size:15px;
  letter-spacing:.18em;
}

.product-discovery-copy > p{
  margin:11px 0 18px;
  color:rgba(225,236,244,.76);
  font-size:14px;
}

.product-discovery-search{
  width:min(720px,100%);
  height:52px;
  display:grid;
  grid-template-columns:34px 1fr 58px;
  align-items:center;
  gap:8px;
  padding:0 6px 0 15px;
  border:1px solid rgba(120,188,235,.18);
  border-radius:14px;
  background:rgba(6,15,24,.76);
  backdrop-filter:blur(12px);
}

.product-discovery-search > span{
  color:#6fc3f6;
  font-size:20px;
}

.product-discovery-search input{
  width:100%;
  border:0;
  outline:0;
  color:#f2f7fa;
  background:transparent;
  font-size:13px;
}

.product-discovery-search input::placeholder{
  color:rgba(195,211,223,.48);
}

.product-discovery-search button{
  height:40px;
  border:0;
  border-radius:11px;
  color:#12161a;
  background:linear-gradient(135deg,#f2c56c,#df9d2c);
  font-size:22px;
}

/* CATEGORY */
.product-category-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.product-category{
  position:relative;
  min-height:150px;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  border:1px solid rgba(104,174,222,.11);
  border-radius:16px;
  background:
    radial-gradient(circle at 60% 10%,rgba(60,149,214,.13),transparent 34%),
    linear-gradient(145deg,rgba(12,25,37,.98),rgba(6,13,21,.99));
}

.product-category h3{
  margin:0 38px 4px 0;
  font-size:17px;
}

.product-category p{
  margin:0 38px 0 0;
  color:rgba(214,226,235,.72);
  font-size:11px;
  line-height:1.45;
}

.product-category > button{
  position:absolute;
  right:14px;
  bottom:14px;
  width:32px;
  height:32px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:50%;
  color:#f4d28e;
  background:rgba(255,255,255,.035);
}

/* FILTER */
.product-filter-bar{
  margin-top:14px;
  min-height:58px;
  padding:8px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)) auto;
  gap:8px;
  align-items:center;
  border:1px solid rgba(102,171,220,.10);
  border-radius:15px;
  background:rgba(8,18,28,.90);
}

.product-filter-bar > button{
  min-height:42px;
  padding:7px 12px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  border:1px solid rgba(255,255,255,.055);
  border-radius:11px;
  color:#d9e7f0;
  background:rgba(255,255,255,.02);
}

.product-filter-bar > button span{
  color:rgba(187,205,218,.52);
  font-size:9px;
}

.product-filter-bar > button strong{
  margin-top:2px;
  font-size:11px;
}

.product-view-toggle{
  display:flex;
  gap:6px;
}

.product-view-toggle button{
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  color:#7dbce6;
  background:rgba(255,255,255,.02);
}

.product-view-toggle button.active{
  color:#f5c76c;
  border-color:rgba(224,164,57,.35);
  background:rgba(224,164,57,.08);
}

/* PRODUCT GRID */
.product-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.product-card{
  position:relative;
  min-height:290px;
  padding:0 16px 16px;
  overflow:hidden;
  border:1px solid rgba(104,174,222,.11);
  border-radius:17px;
  background:linear-gradient(145deg,rgba(10,21,31,.98),rgba(5,11,18,.99));
}

.product-card-visual{
  height:158px;
  margin:0 -16px 14px;
  background:
    radial-gradient(circle at 50% 10%,rgba(70,160,223,.14),transparent 34%),
    linear-gradient(145deg,#102436,#08131d);
}

.product-card h3{
  margin:0 0 7px;
  font-size:15px;
}

.product-card p{
  margin:0 0 14px;
  min-height:36px;
  color:rgba(211,224,233,.66);
  font-size:11px;
  line-height:1.5;
}

.product-favorite{
  position:absolute;
  z-index:3;
  top:10px;
  right:10px;
  width:32px;
  height:32px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:50%;
  color:#fff;
  background:rgba(5,12,19,.58);
}

.product-cta{
  width:100%;
  min-height:38px;
  border:1px solid rgba(220,163,62,.30);
  border-radius:11px;
  color:#f6d18b;
  background:linear-gradient(180deg,rgba(227,166,57,.16),rgba(227,166,57,.07));
  font-weight:700;
}

/* RESPONSIVE */
@media (max-width:1100px){
  .product-category-grid,
  .product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .product-filter-bar{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:760px){
  .product-discovery-content{
    width:min(100% - 28px,1440px);
  }

  .product-discovery-copy{
    width:100%;
  }

  .product-discovery-copy h1{
    font-size:42px;
  }

  .product-category-grid,
  .product-grid,
  .product-filter-bar{
    grid-template-columns:1fr;
  }
}


/* SCREEN 07 — PRODUCT DISCOVERY VISUALS */

/* CATEGORY IMAGES */
#productDiscoveryView .product-category.health{
  background:
    linear-gradient(180deg,rgba(5,12,19,.05) 0%,rgba(5,12,19,.68) 72%,rgba(5,12,19,.94) 100%),
    url("./assets/customer/product-discovery/category-health.webp") center / cover no-repeat;
}

#productDiscoveryView .product-category.lifestyle{
  background:
    linear-gradient(180deg,rgba(5,12,19,.05) 0%,rgba(5,12,19,.68) 72%,rgba(5,12,19,.94) 100%),
    url("./assets/customer/product-discovery/category-lifestyle.webp") center / cover no-repeat;
}

#productDiscoveryView .product-category.technology{
  background:
    linear-gradient(180deg,rgba(5,12,19,.05) 0%,rgba(5,12,19,.68) 72%,rgba(5,12,19,.94) 100%),
    url("./assets/customer/product-discovery/category-technology.webp") center / cover no-repeat;
}

#productDiscoveryView .product-category.services{
  background:
    linear-gradient(180deg,rgba(5,12,19,.05) 0%,rgba(5,12,19,.68) 72%,rgba(5,12,19,.94) 100%),
    url("./assets/customer/product-discovery/category-services.webp") center / cover no-repeat;
}

/* PRODUCT CARD IMAGES */
#productDiscoveryView .health-product .product-card-visual{
  background:url("./assets/customer/product-discovery/product-health.webp") center / cover no-repeat;
}

#productDiscoveryView .lifestyle-product .product-card-visual{
  background:url("./assets/customer/product-discovery/product-lifestyle.webp") center / cover no-repeat;
}

#productDiscoveryView .technology-product .product-card-visual{
  background:url("./assets/customer/product-discovery/product-technology.webp") center / cover no-repeat;
}

#productDiscoveryView .service-product .product-card-visual{
  background:url("./assets/customer/product-discovery/product-services.webp") center / cover no-repeat;
}

/* CATEGORY TEXT READABILITY */
#productDiscoveryView .product-category h3,
#productDiscoveryView .product-category p{
  position:relative;
  z-index:2;
  text-shadow:0 2px 10px rgba(0,0,0,.65);
}

#productDiscoveryView .product-category > button{
  z-index:3;
}

/* PRODUCT IMAGE POLISH */
#productDiscoveryView .product-card-visual{
  position:relative;
}

#productDiscoveryView .product-card-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(4,10,16,.02),rgba(4,10,16,.18));
  pointer-events:none;
}


/* SCREEN 07 — FINAL VISUAL POLISH */

/* CATEGORY — cân sáng đồng đều */
#productDiscoveryView .product-category{
  min-height:154px;
}

#productDiscoveryView .product-category.lifestyle{
  background:
    linear-gradient(180deg,rgba(5,12,19,.02) 0%,rgba(5,12,19,.54) 68%,rgba(5,12,19,.90) 100%),
    url("./assets/customer/product-discovery/category-lifestyle.webp") center / cover no-repeat;
}

#productDiscoveryView .product-category.health,
#productDiscoveryView .product-category.technology,
#productDiscoveryView .product-category.services{
  filter:brightness(1.02);
}

/* PRODUCT CARD — đồng bộ overlay */
#productDiscoveryView .product-card-visual::after{
  background:
    linear-gradient(
      180deg,
      rgba(4,10,16,.00) 0%,
      rgba(4,10,16,.05) 55%,
      rgba(4,10,16,.20) 100%
    );
}

/* Tăng nhịp thở giữa filter và product grid */
#productDiscoveryView .product-grid{
  margin-top:20px;
}

/* Chữ card rõ và cân hơn */
#productDiscoveryView .product-card h3{
  font-size:15px;
  line-height:1.25;
}

#productDiscoveryView .product-card p{
  line-height:1.55;
  color:rgba(220,231,238,.72);
}

/* CTA đồng bộ */
#productDiscoveryView .product-cta{
  min-height:40px;
  font-size:12px;
  letter-spacing:.01em;
}


/* SCREEN 07 — HARMONY & PROPORTION PASS */

/* Khung nội dung tổng */
#productDiscoveryView .product-discovery-content{
  width:min(1420px,calc(100% - 48px));
  padding:24px 0 52px;
}

/* HERO — tăng chiều sâu */
#productDiscoveryView .product-discovery-hero{
  min-height:270px;
  padding:32px 34px;
  border-radius:22px;
}

#productDiscoveryView .product-discovery-copy{
  width:min(760px,64%);
}

#productDiscoveryView .product-discovery-copy h1{
  font-size:56px;
  line-height:.96;
}

#productDiscoveryView .product-discovery-copy > span{
  margin-top:10px;
  font-size:15px;
}

#productDiscoveryView .product-discovery-copy > p{
  margin:12px 0 20px;
  font-size:14px;
  line-height:1.55;
}

#productDiscoveryView .product-discovery-search{
  height:56px;
  width:min(760px,100%);
}

/* CATEGORY — cao hơn và cân hơn */
#productDiscoveryView .product-category-grid{
  margin-top:18px;
  gap:14px;
}

#productDiscoveryView .product-category{
  min-height:176px;
  padding:20px;
  border-radius:18px;
}

#productDiscoveryView .product-category h3{
  margin:0 42px 6px 0;
  font-size:18px;
  line-height:1.15;
}

#productDiscoveryView .product-category p{
  margin:0 42px 0 0;
  max-width:82%;
  font-size:11px;
  line-height:1.48;
}

#productDiscoveryView .product-category > button{
  width:34px;
  height:34px;
  right:15px;
  bottom:15px;
}

/* FILTER — dày và rõ hơn */
#productDiscoveryView .product-filter-bar{
  margin-top:16px;
  min-height:66px;
  padding:9px;
  gap:10px;
  border-radius:16px;
}

#productDiscoveryView .product-filter-bar > button{
  min-height:48px;
  padding:8px 14px;
}

#productDiscoveryView .product-filter-bar > button span{
  font-size:9px;
}

#productDiscoveryView .product-filter-bar > button strong{
  font-size:12px;
}

/* PRODUCT GRID — thoáng hơn */
#productDiscoveryView .product-grid{
  margin-top:18px;
  gap:14px;
}

#productDiscoveryView .product-card{
  min-height:320px;
  padding:0 16px 16px;
  border-radius:18px;
}

#productDiscoveryView .product-card-visual{
  height:178px;
  margin:0 -16px 16px;
}

#productDiscoveryView .product-card h3{
  margin:0 0 8px;
  font-size:16px;
  line-height:1.25;
}

#productDiscoveryView .product-card p{
  min-height:42px;
  margin:0 0 16px;
  font-size:11px;
  line-height:1.55;
}

#productDiscoveryView .product-cta{
  min-height:42px;
  margin-top:auto;
  border-radius:12px;
  font-size:12px;
}

/* Đồng bộ ánh sáng category */
#productDiscoveryView .product-category.health,
#productDiscoveryView .product-category.lifestyle,
#productDiscoveryView .product-category.technology,
#productDiscoveryView .product-category.services{
  filter:none !important;
}

/* Giữ chữ category nổi nhưng không quá nặng */
#productDiscoveryView .product-category h3{
  text-shadow:0 2px 12px rgba(0,0,0,.72);
}

#productDiscoveryView .product-category p{
  color:rgba(235,241,245,.80);
  text-shadow:0 1px 8px rgba(0,0,0,.62);
}


/* SCREEN 07 — SEARCH + LANGUAGE BALANCE */

#productDiscoveryView .product-discovery-search{
  width:min(620px,100%) !important;
}

#productDiscoveryView .customer-top-actions button[aria-label="Ngôn ngữ"]{
  min-width:64px !important;
  height:34px !important;
  padding:0 10px !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
}


/* SCREEN 07 — COMPACT PRODUCT SEARCH */

#productDiscoveryView .product-discovery-search{
  width:min(500px,100%) !important;
  height:44px !important;
  grid-template-columns:28px 1fr 46px !important;
  padding:0 5px 0 12px !important;
  gap:6px !important;
  border-radius:12px !important;
}

#productDiscoveryView .product-discovery-search > span{
  font-size:16px !important;
}

#productDiscoveryView .product-discovery-search input{
  font-size:12px !important;
}

#productDiscoveryView .product-discovery-search button{
  height:34px !important;
  border-radius:9px !important;
  font-size:18px !important;
}


/* SCREEN 07 — SEARCH PROPORTION FINAL */

#productDiscoveryView .product-discovery-search{
  width:455px !important;
  max-width:100% !important;
  height:40px !important;
  grid-template-columns:26px 1fr 34px !important;
  padding:0 4px 0 11px !important;
  gap:5px !important;
  border-radius:11px !important;
}

#productDiscoveryView .product-discovery-search > span{
  font-size:15px !important;
}

#productDiscoveryView .product-discovery-search input{
  font-size:11px !important;
}

#productDiscoveryView .product-discovery-search button{
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  border-radius:9px !important;
  font-size:16px !important;
  line-height:1 !important;
}


/* SCREEN 07 — SEARCH FIELD FINAL BALANCE */

#productDiscoveryView .product-discovery-search{
  width:455px !important;
  max-width:100% !important;
  height:42px !important;
  display:grid !important;
  grid-template-columns:24px minmax(0,1fr) 34px !important;
  align-items:center !important;
  gap:6px !important;
  padding:0 4px 0 12px !important;
  border-radius:11px !important;
}

#productDiscoveryView .product-discovery-search input{
  width:100% !important;
  height:100% !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  font-size:11px !important;
  line-height:42px !important;
}

#productDiscoveryView .product-discovery-search button{
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
  padding:0 !important;
  margin:0 !important;
  align-self:center !important;
  justify-self:end !important;
  display:grid !important;
  place-items:center !important;
  border-radius:9px !important;
  font-size:15px !important;
  line-height:1 !important;
}


/* =========================================================
   SCREEN 08 — CUS PRODUCT DETAIL
   ========================================================= */

body:has(#productDetailView.active) > .topbar{
  display:none;
}

body:has(#productDetailView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#productDetailView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 76% 10%,rgba(42,126,193,.08),transparent 28%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#productDetailView.active{
  display:block;
}

#productDetailView .customer-shell{
  min-height:100vh;
}

.product-detail-content{
  width:min(1440px,calc(100% - 42px));
  margin:0 auto;
  padding:18px 0 44px;
}

/* BREADCRUMB */
.product-detail-breadcrumb{
  min-height:34px;
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(201,216,227,.58);
  font-size:11px;
}

.product-detail-breadcrumb strong{
  color:#e9f2f7;
}

/* MAIN GRID */
.product-detail-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:28px;
  align-items:start;
}

/* GALLERY */
.product-detail-gallery{
  min-width:0;
}

.product-detail-main-image{
  position:relative;
  height:560px;
  overflow:hidden;
  border:1px solid rgba(104,174,222,.12);
  border-radius:20px;
  background:
    radial-gradient(circle at 50% 35%,rgba(72,153,211,.12),transparent 32%),
    linear-gradient(145deg,rgba(10,22,32,.98),rgba(5,11,18,.99));
}

.product-detail-main-visual{
  width:100%;
  height:100%;
  background:
    url("./assets/customer/product-discovery/product-technology.webp")
    center / cover no-repeat;
}

.gallery-nav{
  position:absolute;
  z-index:3;
  top:50%;
  width:42px;
  height:42px;
  transform:translateY(-50%);
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  color:#fff;
  background:rgba(5,12,19,.62);
  font-size:20px;
}

.gallery-prev{left:14px;}
.gallery-next{right:14px;}

.product-detail-thumbnails{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}

.product-detail-thumbnails button{
  height:94px;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(104,174,222,.10);
  border-radius:12px;
  background:#09131d;
}

.product-detail-thumbnails button.active{
  border-color:rgba(232,174,69,.78);
  box-shadow:0 0 0 1px rgba(232,174,69,.18);
}

.product-detail-thumbnails span{
  display:block;
  width:100%;
  height:100%;
  background:
    url("./assets/customer/product-discovery/product-technology.webp")
    center / cover no-repeat;
}

/* INFO */
.product-detail-info{
  min-width:0;
}

.product-detail-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
}

.product-detail-category{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 14px;
  border:1px solid rgba(96,185,226,.16);
  border-radius:10px;
  color:#e2b85e;
  background:rgba(255,255,255,.02);
  font-size:11px;
  font-weight:800;
}

.product-detail-head h1{
  margin:14px 0 8px;
  font-size:38px;
  line-height:1.04;
  letter-spacing:-1px;
}

.product-detail-head p{
  max-width:720px;
  margin:0;
  color:rgba(220,231,238,.72);
  font-size:14px;
  line-height:1.55;
}

.product-detail-head-actions{
  display:flex;
  gap:8px;
}

.product-detail-head-actions button{
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  color:#dcebf4;
  background:rgba(255,255,255,.025);
  font-size:18px;
}

/* FEATURES */
.product-detail-feature-row{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.product-detail-feature-row > div{
  min-height:56px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid rgba(101,172,219,.10);
  border-radius:12px;
  background:rgba(255,255,255,.02);
}

.product-detail-feature-row span{
  color:#5fb8ed;
  font-size:19px;
}

.product-detail-feature-row strong{
  font-size:10px;
  line-height:1.35;
}

/* PRICE + STATUS */
.product-detail-commerce-row{
  margin-top:14px;
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:12px;
}

.product-detail-price,
.product-detail-status{
  min-height:96px;
  padding:16px 18px;
  border:1px solid rgba(103,173,221,.11);
  border-radius:14px;
  background:rgba(255,255,255,.018);
}

.product-detail-price{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  gap:7px 14px;
}

.product-detail-price > span{
  grid-column:1/-1;
  color:#dce8f0;
  font-size:12px;
}

.product-detail-price strong{
  font-size:24px;
  letter-spacing:.14em;
}

.product-detail-price small{
  align-self:center;
  color:rgba(197,211,221,.54);
  font-size:9px;
}

.product-detail-status{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.product-detail-status strong{
  color:#3de0c4;
  font-size:14px;
}

.product-detail-status span{
  margin-top:7px;
  color:rgba(206,220,229,.56);
  font-size:10px;
}

/* BUY */
.product-detail-buy-row{
  margin-top:14px;
  display:grid;
  grid-template-columns:170px 1fr 1fr;
  gap:12px;
  align-items:end;
}

.product-detail-quantity > span{
  display:block;
  margin-bottom:6px;
  color:#dbe7ef;
  font-size:11px;
}

.product-detail-quantity > div{
  height:48px;
  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:center;
  overflow:hidden;
  border:1px solid rgba(98,168,215,.11);
  border-radius:12px;
  background:rgba(255,255,255,.02);
}

.product-detail-quantity button{
  height:100%;
  border:0;
  color:#dbe9f2;
  background:rgba(255,255,255,.025);
  font-size:18px;
}

.product-detail-quantity strong{
  text-align:center;
}

.product-buy-now,
.product-add-cart{
  height:48px;
  border-radius:12px;
  font-size:14px;
  font-weight:800;
}

.product-buy-now{
  border:0;
  color:#1a1a18;
  background:linear-gradient(135deg,#f4cb72,#e7a72f);
}

.product-add-cart{
  border:1px solid rgba(229,169,59,.72);
  color:#f2c66c;
  background:rgba(229,169,59,.04);
}

/* BENEFITS */
.product-detail-benefit-row{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.product-detail-benefit-row article{
  min-height:86px;
  padding:14px;
  display:grid;
  grid-template-columns:42px 1fr 30px;
  gap:10px;
  align-items:center;
  border:1px solid rgba(103,173,221,.10);
  border-radius:13px;
  background:rgba(255,255,255,.018);
}

.product-detail-benefit-row article > span{
  color:#e3b455;
  font-size:26px;
}

.product-detail-benefit-row article strong{
  display:block;
  margin-bottom:4px;
  color:#eab759;
  font-size:12px;
}

.product-detail-benefit-row article p{
  margin:0;
  color:rgba(210,223,232,.64);
  font-size:10px;
  line-height:1.45;
}

.product-detail-benefit-row article button{
  width:28px;
  height:28px;
  border:0;
  border-radius:50%;
  color:#dbe8f0;
  background:rgba(255,255,255,.05);
}

/* TABS */
.product-detail-tabs{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-bottom:1px solid rgba(255,255,255,.07);
}

.product-detail-tabs button{
  min-height:42px;
  border:0;
  border-bottom:2px solid transparent;
  color:rgba(207,220,229,.58);
  background:transparent;
  font-size:10px;
}

.product-detail-tabs button.active{
  color:#eef4f7;
  border-bottom-color:#e7a62f;
}

.product-detail-description p{
  margin:14px 0;
  color:rgba(216,227,234,.70);
  font-size:11px;
  line-height:1.55;
}

/* POLICY */
.product-detail-policy-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.product-detail-policy-grid article{
  min-height:76px;
  padding:12px;
  display:grid;
  grid-template-columns:28px 1fr;
  align-items:center;
  column-gap:9px;
  border:1px solid rgba(102,172,220,.10);
  border-radius:11px;
  background:rgba(255,255,255,.016);
}

.product-detail-policy-grid article > span{
  grid-row:1/3;
  color:#dbe8f0;
  font-size:20px;
}

.product-detail-policy-grid strong{
  font-size:9px;
}

.product-detail-policy-grid small{
  color:rgba(196,211,221,.48);
  font-size:8px;
}

/* RESPONSIVE */
@media (max-width:1100px){
  .product-detail-grid{
    grid-template-columns:1fr;
  }

  .product-detail-feature-row,
  .product-detail-policy-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:760px){
  .product-detail-content{
    width:calc(100% - 28px);
  }

  .product-detail-main-image{
    height:420px;
  }

  .product-detail-commerce-row,
  .product-detail-buy-row,
  .product-detail-benefit-row,
  .product-detail-feature-row,
  .product-detail-policy-grid{
    grid-template-columns:1fr;
  }

  .product-detail-tabs{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* SCREEN 08 — PROPORTION ALIGNMENT WITH SCREEN 06–07 */

#productDetailView .product-detail-content{
  width:min(1420px,calc(100% - 48px)) !important;
  padding:24px 0 52px !important;
}

/* breadcrumb */
#productDetailView .product-detail-breadcrumb{
  min-height:38px !important;
  font-size:12px !important;
  gap:12px !important;
}

/* main 2-column balance */
#productDetailView .product-detail-grid{
  margin-top:10px !important;
  grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr) !important;
  gap:30px !important;
}

/* left gallery */
#productDetailView .product-detail-main-image{
  height:610px !important;
  border-radius:20px !important;
}

#productDetailView .product-detail-thumbnails{
  margin-top:14px !important;
  gap:10px !important;
}

#productDetailView .product-detail-thumbnails button{
  height:104px !important;
}

/* right heading */
#productDetailView .product-detail-category{
  min-height:36px !important;
  padding:0 15px !important;
  font-size:11px !important;
}

#productDetailView .product-detail-head h1{
  margin:15px 0 9px !important;
  font-size:42px !important;
  line-height:1.05 !important;
  letter-spacing:-1px !important;
}

#productDetailView .product-detail-head p{
  font-size:14px !important;
  line-height:1.6 !important;
}

#productDetailView .product-detail-head-actions button{
  width:46px !important;
  height:46px !important;
}

/* feature cards */
#productDetailView .product-detail-feature-row{
  margin-top:20px !important;
  gap:10px !important;
}

#productDetailView .product-detail-feature-row > div{
  min-height:64px !important;
  padding:0 13px !important;
}

#productDetailView .product-detail-feature-row strong{
  font-size:11px !important;
}

/* price/status */
#productDetailView .product-detail-commerce-row{
  margin-top:16px !important;
  gap:12px !important;
}

#productDetailView .product-detail-price,
#productDetailView .product-detail-status{
  min-height:108px !important;
  padding:18px 20px !important;
}

#productDetailView .product-detail-price > span{
  font-size:13px !important;
}

#productDetailView .product-detail-price strong{
  font-size:27px !important;
}

#productDetailView .product-detail-status strong{
  font-size:15px !important;
}

/* buy row */
#productDetailView .product-detail-buy-row{
  margin-top:16px !important;
  grid-template-columns:180px 1fr 1fr !important;
  gap:12px !important;
}

#productDetailView .product-detail-quantity > div,
#productDetailView .product-buy-now,
#productDetailView .product-add-cart{
  height:52px !important;
}

#productDetailView .product-buy-now,
#productDetailView .product-add-cart{
  font-size:14px !important;
}

/* benefit cards */
#productDetailView .product-detail-benefit-row{
  margin-top:16px !important;
  gap:12px !important;
}

#productDetailView .product-detail-benefit-row article{
  min-height:94px !important;
  padding:15px !important;
}

#productDetailView .product-detail-benefit-row article strong{
  font-size:12px !important;
}

#productDetailView .product-detail-benefit-row article p{
  font-size:10px !important;
  line-height:1.5 !important;
}

/* tabs */
#productDetailView .product-detail-tabs{
  margin-top:18px !important;
}

#productDetailView .product-detail-tabs button{
  min-height:46px !important;
  font-size:11px !important;
}

#productDetailView .product-detail-description p{
  margin:16px 0 !important;
  font-size:11px !important;
  line-height:1.6 !important;
}

/* policies */
#productDetailView .product-detail-policy-grid{
  gap:10px !important;
}

#productDetailView .product-detail-policy-grid article{
  min-height:84px !important;
  padding:13px !important;
}

#productDetailView .product-detail-policy-grid strong{
  font-size:10px !important;
}

#productDetailView .product-detail-policy-grid small{
  font-size:8.5px !important;
}


/* SCREEN 08 — LANGUAGE CONTROL ALIGNMENT */

#productDetailView .customer-top-actions button[aria-label="Ngôn ngữ"]{
  min-width:64px !important;
  height:34px !important;
  padding:0 10px !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  border-radius:10px !important;
}


/* =========================================================
   SCREEN 09 — CUS ORDER REVIEW
   ========================================================= */

body:has(#orderReviewView.active) > .topbar{
  display:none;
}

body:has(#orderReviewView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#orderReviewView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 74% 8%,rgba(44,125,191,.09),transparent 28%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#orderReviewView.active{
  display:block;
}

#orderReviewView .customer-shell{
  min-height:100vh;
}

.order-review-content{
  width:min(1420px,calc(100% - 48px));
  margin:0 auto;
  padding:22px 0 48px;
}

/* breadcrumb */
.order-review-breadcrumb{
  min-height:34px;
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(201,216,227,.56);
  font-size:11px;
}

.order-review-breadcrumb strong{
  color:#e8f1f6;
}

/* hero */
.order-review-hero{
  position:relative;
  min-height:210px;
  margin-top:8px;
  padding:26px 28px;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:24px;
  align-items:center;
  overflow:hidden;
  border:1px solid rgba(104,174,222,.11);
  border-radius:20px;
  background:
    linear-gradient(90deg,
      rgba(4,11,18,.98) 0%,
      rgba(4,11,18,.87) 40%,
      rgba(4,11,18,.35) 75%,
      rgba(4,11,18,.12) 100%),
    url("./assets/customer/home/hero-customer-home.webp") center 42% / cover no-repeat;
}

.order-review-hero-copy{
  position:relative;
  z-index:2;
}

.order-review-hero-copy h1{
  margin:0;
  font-size:48px;
  line-height:.98;
  letter-spacing:-1.4px;
}

.order-review-hero-copy > span{
  display:block;
  margin-top:9px;
  color:#dfeaf1;
  font-size:15px;
  letter-spacing:.18em;
}

.order-review-hero-copy p{
  margin:10px 0 0;
  color:rgba(218,230,238,.72);
  font-size:13px;
}

/* progress */
.order-progress{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  align-items:start;
}

.order-progress > div{
  position:relative;
  text-align:center;
}

.order-progress > div:not(:last-child)::after{
  content:"";
  position:absolute;
  top:22px;
  left:64%;
  width:72%;
  height:1px;
  background:rgba(255,255,255,.16);
}

.order-progress b{
  width:46px;
  height:46px;
  margin:0 auto 8px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  color:#dbe8f0;
  background:rgba(6,14,22,.74);
  font-size:16px;
}

.order-progress .active b{
  border-color:rgba(233,173,63,.72);
  color:#f0bf5b;
  box-shadow:0 0 22px rgba(229,166,54,.20);
}

.order-progress strong{
  display:block;
  color:#f0f5f8;
  font-size:13px;
}

.order-progress .active strong{
  color:#e9b85a;
}

.order-progress span{
  display:block;
  margin-top:4px;
  color:rgba(203,218,227,.54);
  font-size:9px;
}

/* layout */
.order-review-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(320px,.75fr);
  gap:18px;
  align-items:start;
}

.order-review-left{
  display:grid;
  gap:14px;
}

.order-review-right{
  display:grid;
  gap:14px;
}

.order-panel,
.order-summary-card,
.order-important-card{
  border:1px solid rgba(103,173,221,.11);
  border-radius:16px;
  background:rgba(8,18,28,.90);
}

.order-panel > header,
.order-summary-card > header,
.order-important-card > header{
  min-height:52px;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.order-panel h2,
.order-summary-card h2,
.order-important-card h2{
  margin:0;
  font-size:17px;
}

.order-panel header button{
  border:0;
  color:#5db8ef;
  background:transparent;
  font-size:11px;
}

/* product panel */
.order-product-row{
  padding:14px;
  display:grid;
  grid-template-columns:150px minmax(0,1fr) 150px 120px;
  gap:16px;
  align-items:center;
}

.order-product-image{
  height:118px;
  border-radius:12px;
  background:
    url("./assets/customer/product-discovery/product-technology.webp")
    center / cover no-repeat;
}

.order-product-info h3{
  margin:0 0 6px;
  font-size:15px;
}

.order-product-info p{
  margin:0;
  color:rgba(213,225,233,.66);
  font-size:10px;
  line-height:1.5;
}

.order-product-info > span{
  display:inline-flex;
  margin-top:9px;
  padding:5px 9px;
  border:1px solid rgba(92,182,229,.13);
  border-radius:8px;
  color:#67c9b4;
  background:rgba(66,183,158,.05);
  font-size:9px;
}

.order-product-quantity > div{
  height:38px;
  display:grid;
  grid-template-columns:38px 1fr 38px;
  align-items:center;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
}

.order-product-quantity button{
  height:100%;
  border:0;
  color:#dbe9f2;
  background:rgba(255,255,255,.025);
}

.order-product-quantity strong{
  text-align:center;
}

.order-product-quantity small,
.order-product-total small{
  display:block;
  margin-top:12px;
  color:rgba(194,210,220,.52);
  font-size:9px;
}

.order-product-quantity b,
.order-product-total b{
  display:block;
  margin-top:5px;
  font-size:13px;
}

/* receiver */
.shipping-info-grid{
  padding:14px;
  display:grid;
  grid-template-columns:72px repeat(3,minmax(0,1fr));
  gap:14px;
  align-items:center;
}

.shipping-info-grid > div:first-child{
  height:58px;
  display:grid;
  place-items:center;
  border:1px solid rgba(91,180,228,.15);
  border-radius:10px;
  color:#77c7f4;
  background:rgba(72,156,211,.05);
  font-size:24px;
}

.shipping-info-grid small{
  display:block;
  color:rgba(197,212,222,.52);
  font-size:9px;
}

.shipping-info-grid strong{
  display:block;
  margin-top:5px;
  font-size:11px;
}

/* delivery */
.delivery-row{
  padding:14px;
  display:grid;
  grid-template-columns:60px minmax(0,1fr) 220px;
  gap:14px;
  align-items:center;
}

.delivery-icon{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border:1px solid rgba(75,170,223,.15);
  border-radius:10px;
  color:#5fb9ed;
  background:rgba(54,145,205,.06);
  font-size:24px;
}

.delivery-row h3{
  margin:0 0 5px;
  font-size:13px;
}

.delivery-row p{
  margin:0;
  color:rgba(207,220,229,.58);
  font-size:10px;
}

.delivery-time{
  display:grid;
  grid-template-columns:32px 1fr;
  gap:3px 10px;
  align-items:center;
}

.delivery-time > span{
  grid-row:1/3;
  color:#dce9f1;
  font-size:22px;
}

.delivery-time small{
  color:rgba(194,209,219,.52);
  font-size:9px;
}

.delivery-time strong{
  font-size:11px;
}

/* benefit */
.order-benefit-panel{
  min-height:74px;
  padding:14px 16px;
  display:grid;
  grid-template-columns:44px 1fr auto;
  gap:12px;
  align-items:center;
  border-color:rgba(224,166,58,.28);
}

.order-benefit-panel > span{
  color:#e4b04f;
  font-size:28px;
}

.order-benefit-panel h3{
  margin:0 0 4px;
  color:#e5b257;
  font-size:13px;
}

.order-benefit-panel p{
  margin:0;
  color:rgba(209,222,231,.62);
  font-size:10px;
}

.order-benefit-panel button{
  border:0;
  color:#e6eef3;
  background:transparent;
  font-size:10px;
}

/* summary */
.order-summary-card{
  padding-bottom:14px;
}

.order-summary-lines{
  padding:14px 16px;
  display:grid;
  gap:12px;
}

.order-summary-lines > div,
.order-summary-total{
  display:flex;
  justify-content:space-between;
  gap:16px;
}

.order-summary-lines span{
  color:rgba(215,227,234,.72);
  font-size:10px;
}

.order-summary-lines strong{
  font-size:11px;
}

.order-summary-total{
  margin:0 16px;
  padding:16px 0;
  border-top:1px solid rgba(255,255,255,.07);
}

.order-summary-total span{
  font-size:13px;
  font-weight:800;
}

.order-summary-total strong{
  color:#f0bd5a;
  font-size:16px;
}

.order-checkout-button{
  width:calc(100% - 32px);
  height:50px;
  margin:0 16px;
  border:0;
  border-radius:12px;
  color:#181915;
  background:linear-gradient(135deg,#f3c76a,#e3a12e);
  font-size:13px;
  font-weight:800;
}

.order-security-note{
  margin:11px 16px 0;
  text-align:center;
  color:rgba(201,215,224,.52);
  font-size:9px;
}

/* important */
.order-important-grid{
  padding:12px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.order-important-grid > div{
  min-height:66px;
  padding:10px;
  display:grid;
  grid-template-columns:26px 1fr;
  align-items:center;
  column-gap:8px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  background:rgba(255,255,255,.015);
}

.order-important-grid span{
  grid-row:1/3;
  color:#d9e7ef;
  font-size:18px;
}

.order-important-grid strong{
  font-size:9px;
}

.order-important-grid small{
  color:#5ab6ee;
  font-size:8px;
}

/* language control */
#orderReviewView .customer-top-actions button[aria-label="Ngôn ngữ"]{
  min-width:64px !important;
  height:34px !important;
  padding:0 10px !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  border-radius:10px !important;
}

/* responsive */
@media (max-width:1100px){
  .order-review-grid{
    grid-template-columns:1fr;
  }

  .order-product-row{
    grid-template-columns:130px 1fr;
  }

  .order-product-quantity,
  .order-product-total{
    grid-column:auto;
  }
}

@media (max-width:760px){
  .order-review-content{
    width:calc(100% - 28px);
  }

  .order-review-hero{
    grid-template-columns:1fr;
  }

  .order-progress{
    margin-top:8px;
  }

  .shipping-info-grid,
  .delivery-row,
  .order-important-grid{
    grid-template-columns:1fr;
  }
}


/* SCREEN 09 — PROPORTION ALIGNMENT WITH SCREEN 07–08 */

#orderReviewView .order-review-content{
  width:min(1420px,calc(100% - 48px)) !important;
  padding:24px 0 52px !important;
}

/* HERO */
#orderReviewView .order-review-hero{
  min-height:245px !important;
  padding:30px 30px !important;
  border-radius:20px !important;
}

#orderReviewView .order-review-hero-copy h1{
  font-size:54px !important;
  line-height:.98 !important;
}

#orderReviewView .order-review-hero-copy > span{
  font-size:15px !important;
  margin-top:10px !important;
}

#orderReviewView .order-review-hero-copy p{
  font-size:13px !important;
  margin-top:11px !important;
}

/* PROGRESS */
#orderReviewView .order-progress b{
  width:50px !important;
  height:50px !important;
  font-size:17px !important;
}

#orderReviewView .order-progress strong{
  font-size:14px !important;
}

#orderReviewView .order-progress span{
  font-size:9.5px !important;
}

/* MAIN GRID */
#orderReviewView .order-review-grid{
  margin-top:20px !important;
  gap:20px !important;
  grid-template-columns:minmax(0,1.7fr) minmax(340px,.78fr) !important;
}

/* PANELS */
#orderReviewView .order-panel,
#orderReviewView .order-summary-card,
#orderReviewView .order-important-card{
  border-radius:16px !important;
}

#orderReviewView .order-panel > header,
#orderReviewView .order-summary-card > header,
#orderReviewView .order-important-card > header{
  min-height:58px !important;
  padding:0 18px !important;
}

#orderReviewView .order-panel h2,
#orderReviewView .order-summary-card h2,
#orderReviewView .order-important-card h2{
  font-size:18px !important;
}

/* PRODUCT */
#orderReviewView .order-product-row{
  padding:16px !important;
  grid-template-columns:160px minmax(0,1fr) 155px 125px !important;
  gap:18px !important;
}

#orderReviewView .order-product-image{
  height:126px !important;
}

#orderReviewView .order-product-info h3{
  font-size:16px !important;
}

#orderReviewView .order-product-info p{
  font-size:10.5px !important;
  line-height:1.55 !important;
}

/* SHIPPING INFO */
#orderReviewView .shipping-info-grid{
  padding:16px !important;
  grid-template-columns:76px repeat(3,minmax(0,1fr)) !important;
}

#orderReviewView .shipping-info-grid > div:first-child{
  height:64px !important;
}

#orderReviewView .shipping-info-grid strong{
  font-size:12px !important;
}

/* DELIVERY */
#orderReviewView .delivery-row{
  padding:16px !important;
  grid-template-columns:64px minmax(0,1fr) 230px !important;
}

#orderReviewView .delivery-icon{
  width:60px !important;
  height:60px !important;
}

#orderReviewView .delivery-row h3{
  font-size:14px !important;
}

/* BENEFIT */
#orderReviewView .order-benefit-panel{
  min-height:82px !important;
  padding:16px 18px !important;
}

#orderReviewView .order-benefit-panel h3{
  font-size:14px !important;
}

/* SUMMARY */
#orderReviewView .order-summary-lines{
  padding:16px 18px !important;
  gap:14px !important;
}

#orderReviewView .order-summary-lines span{
  font-size:10.5px !important;
}

#orderReviewView .order-summary-total{
  margin:0 18px !important;
  padding:18px 0 !important;
}

#orderReviewView .order-summary-total span{
  font-size:14px !important;
}

#orderReviewView .order-summary-total strong{
  font-size:18px !important;
}

#orderReviewView .order-checkout-button{
  width:calc(100% - 36px) !important;
  height:54px !important;
  margin:0 18px !important;
  font-size:14px !important;
}

/* IMPORTANT */
#orderReviewView .order-important-grid{
  padding:14px !important;
  gap:10px !important;
}

#orderReviewView .order-important-grid > div{
  min-height:72px !important;
  padding:11px !important;
}

/* LANGUAGE */
#orderReviewView .customer-top-actions button[aria-label="Ngôn ngữ"]{
  min-width:64px !important;
  height:34px !important;
  padding:0 10px !important;
  font-size:10px !important;
  border-radius:10px !important;
}


/* =========================================================
   SCREEN 10 — CUS PAYMENT
   ========================================================= */

body:has(#paymentView.active) > .topbar{
  display:none;
}

body:has(#paymentView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#paymentView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 74% 8%,rgba(44,125,191,.09),transparent 28%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#paymentView.active{
  display:block;
}

#paymentView .customer-shell{
  min-height:100vh;
}

.payment-content{
  width:min(1420px,calc(100% - 48px));
  margin:0 auto;
  padding:24px 0 52px;
}

/* BREADCRUMB */
.payment-breadcrumb{
  min-height:34px;
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(201,216,227,.56);
  font-size:11px;
}

.payment-breadcrumb strong{
  color:#e8f1f6;
}

/* HERO */
.payment-hero{
  position:relative;
  min-height:245px;
  margin-top:8px;
  padding:30px;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:24px;
  align-items:center;
  overflow:hidden;
  border:1px solid rgba(104,174,222,.11);
  border-radius:20px;
  background:
    linear-gradient(90deg,
      rgba(4,11,18,.98) 0%,
      rgba(4,11,18,.86) 40%,
      rgba(4,11,18,.34) 75%,
      rgba(4,11,18,.12) 100%),
    url("./assets/customer/home/hero-customer-home.webp") center 42% / cover no-repeat;
}

.payment-hero-copy{
  position:relative;
  z-index:2;
}

.payment-hero-copy h1{
  margin:0;
  font-size:54px;
  line-height:.98;
  letter-spacing:-1.4px;
}

.payment-hero-copy > span{
  display:block;
  margin-top:10px;
  color:#dfeaf1;
  font-size:15px;
  letter-spacing:.18em;
}

.payment-hero-copy p{
  margin:11px 0 0;
  color:rgba(218,230,238,.72);
  font-size:13px;
}

/* PROGRESS */
.payment-progress{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.payment-progress > div{
  position:relative;
  text-align:center;
}

.payment-progress > div:not(:last-child)::after{
  content:"";
  position:absolute;
  top:24px;
  left:64%;
  width:72%;
  height:1px;
  background:rgba(255,255,255,.16);
}

.payment-progress b{
  width:50px;
  height:50px;
  margin:0 auto 8px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  color:#dbe8f0;
  background:rgba(6,14,22,.74);
  font-size:17px;
}

.payment-progress .done b{
  color:#40dbc0;
  border-color:rgba(64,219,192,.42);
}

.payment-progress .active b{
  color:#f0bf5b;
  border-color:rgba(233,173,63,.72);
  box-shadow:0 0 22px rgba(229,166,54,.20);
}

.payment-progress strong{
  display:block;
  color:#f0f5f8;
  font-size:14px;
}

.payment-progress .active strong{
  color:#e9b85a;
}

.payment-progress span{
  display:block;
  margin-top:4px;
  color:rgba(203,218,227,.54);
  font-size:9.5px;
}

/* MAIN GRID */
.payment-grid{
  margin-top:20px;
  display:grid;
  grid-template-columns:minmax(0,1.62fr) minmax(340px,.78fr);
  gap:20px;
  align-items:start;
}

.payment-left{
  display:grid;
  gap:14px;
}

.payment-panel,
.payment-summary-card{
  border:1px solid rgba(103,173,221,.11);
  border-radius:16px;
  background:rgba(8,18,28,.90);
}

.payment-panel > header,
.payment-summary-card > header{
  min-height:58px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.payment-panel h2,
.payment-summary-card h2{
  margin:0;
  font-size:18px;
}

/* PAYMENT METHODS */
.payment-method-grid{
  padding:14px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.payment-method{
  min-height:150px;
  padding:16px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  text-align:left;
  border:1px solid rgba(100,172,220,.12);
  border-radius:14px;
  color:#eef4f7;
  background:rgba(255,255,255,.018);
}

.payment-method.active{
  border-color:rgba(229,168,58,.70);
  box-shadow:0 0 0 1px rgba(229,168,58,.16),0 0 24px rgba(229,168,58,.10);
}

.payment-method > span{
  margin-bottom:12px;
  color:#e9b75a;
  font-size:30px;
}

.payment-method strong{
  font-size:14px;
  line-height:1.3;
}

.payment-method small{
  margin-top:8px;
  color:rgba(203,218,227,.58);
  font-size:10px;
  line-height:1.45;
}

/* CARD PANEL */
.payment-card-panel > header{
  align-items:center;
}

.payment-card-panel > header > div:first-child p{
  margin:5px 0 0;
  color:rgba(205,219,228,.58);
  font-size:10px;
}

.payment-card-logos{
  display:flex;
  gap:8px;
}

.payment-card-logos span{
  min-width:48px;
  height:28px;
  padding:0 8px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  color:#e7edf2;
  background:rgba(255,255,255,.025);
  font-size:10px;
  font-weight:800;
}

.payment-form-grid{
  padding:16px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.payment-form-grid label{
  display:grid;
  gap:7px;
}

.payment-form-grid label > span{
  color:#dbe7ef;
  font-size:11px;
}

.payment-form-grid input{
  height:48px;
  padding:0 14px;
  border:1px solid rgba(96,166,214,.13);
  border-radius:11px;
  outline:0;
  color:#eef4f7;
  background:rgba(255,255,255,.02);
  font-size:12px;
}

.payment-form-grid input::placeholder{
  color:rgba(197,211,221,.42);
}

/* SECURITY STRIP */
.payment-security-strip{
  margin:0 16px 16px;
  min-height:78px;
  padding:13px 15px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:18px;
  align-items:center;
  border:1px solid rgba(80,181,230,.18);
  border-radius:12px;
  background:linear-gradient(90deg,rgba(31,143,204,.08),rgba(255,255,255,.015));
}

.payment-security-strip > div:first-child{
  display:grid;
  grid-template-columns:34px 1fr;
  column-gap:10px;
}

.payment-security-strip > div:first-child > span{
  grid-row:1/3;
  color:#6cd6ea;
  font-size:28px;
}

.payment-security-strip strong{
  font-size:12px;
}

.payment-security-strip small{
  color:rgba(205,219,228,.58);
  font-size:9px;
}

.payment-security-points{
  display:flex;
  gap:14px;
  color:rgba(219,230,237,.68);
  font-size:9px;
}

/* SUMMARY */
.payment-summary-card{
  padding-bottom:16px;
}

.payment-summary-card > header button{
  border:0;
  color:#5bb8ef;
  background:transparent;
  font-size:10px;
}

.payment-summary-product{
  padding:16px 18px;
  display:grid;
  grid-template-columns:128px 1fr;
  gap:14px;
  align-items:center;
}

.payment-summary-image{
  height:110px;
  border-radius:12px;
  background:
    url("./assets/customer/product-discovery/product-technology.webp")
    center / cover no-repeat;
}

.payment-summary-product h3{
  margin:0 0 6px;
  font-size:14px;
}

.payment-summary-product p{
  margin:0;
  color:rgba(207,220,229,.62);
  font-size:10px;
  line-height:1.5;
}

.payment-summary-product span{
  display:inline-flex;
  margin-top:9px;
  padding:5px 9px;
  border:1px solid rgba(68,190,165,.13);
  border-radius:8px;
  color:#5ed1b8;
  font-size:9px;
}

.payment-summary-qty{
  margin:0 18px;
  padding:10px 0 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
  color:rgba(214,226,234,.68);
  font-size:10px;
}

.payment-summary-lines{
  padding:16px 18px;
  display:grid;
  gap:14px;
}

.payment-summary-lines > div,
.payment-summary-total{
  display:flex;
  justify-content:space-between;
  gap:16px;
}

.payment-summary-lines span{
  color:rgba(215,227,234,.72);
  font-size:10.5px;
}

.payment-summary-lines strong{
  font-size:11px;
}

.payment-summary-total{
  margin:0 18px;
  padding:18px 0;
  border-top:1px solid rgba(255,255,255,.07);
}

.payment-summary-total span{
  font-size:14px;
  font-weight:800;
}

.payment-summary-total strong{
  color:#f0bd5a;
  font-size:18px;
}

.payment-continue-button{
  width:calc(100% - 36px);
  height:54px;
  margin:0 18px;
  border:0;
  border-radius:12px;
  color:#181915;
  background:linear-gradient(135deg,#f3c76a,#e3a12e);
  font-size:14px;
  font-weight:800;
}

.payment-note{
  margin:12px 18px 0;
  color:rgba(201,215,224,.54);
  font-size:9px;
  line-height:1.5;
}

/* LANGUAGE */
#paymentView .customer-top-actions button[aria-label="Ngôn ngữ"]{
  min-width:64px !important;
  height:34px !important;
  padding:0 10px !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  border-radius:10px !important;
}

/* RESPONSIVE */
@media (max-width:1100px){
  .payment-grid{
    grid-template-columns:1fr;
  }

  .payment-method-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:760px){
  .payment-content{
    width:calc(100% - 28px);
  }

  .payment-hero{
    grid-template-columns:1fr;
  }

  .payment-method-grid,
  .payment-form-grid{
    grid-template-columns:1fr;
  }

  .payment-security-strip{
    grid-template-columns:1fr;
  }

  .payment-security-points{
    flex-wrap:wrap;
  }
}


/* =========================================================
   SCREEN 11 — CUS PAYMENT PROCESSING
   ========================================================= */

body:has(#paymentProcessingView.active) > .topbar{
  display:none;
}

body:has(#paymentProcessingView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#paymentProcessingView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 74% 8%,rgba(44,125,191,.09),transparent 28%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#paymentProcessingView.active{
  display:block;
}

#paymentProcessingView .customer-shell{
  min-height:100vh;
}

.payment-processing-content{
  width:min(1420px,calc(100% - 48px));
  margin:0 auto;
  padding:24px 0 52px;
}

/* BREADCRUMB */
.payment-processing-breadcrumb{
  min-height:34px;
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(201,216,227,.56);
  font-size:11px;
}

.payment-processing-breadcrumb strong{
  color:#e8f1f6;
}

/* HERO */
.payment-processing-hero{
  position:relative;
  min-height:245px;
  margin-top:8px;
  padding:30px;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:24px;
  align-items:center;
  overflow:hidden;
  border:1px solid rgba(104,174,222,.11);
  border-radius:20px;
  background:
    linear-gradient(90deg,
      rgba(4,11,18,.98) 0%,
      rgba(4,11,18,.86) 40%,
      rgba(4,11,18,.34) 75%,
      rgba(4,11,18,.12) 100%),
    url("./assets/customer/home/hero-customer-home.webp") center 42% / cover no-repeat;
}

.payment-processing-hero-copy{
  position:relative;
  z-index:2;
}

.payment-processing-hero-copy h1{
  margin:0;
  font-size:54px;
  line-height:.98;
  letter-spacing:-1.4px;
}

.payment-processing-hero-copy > span{
  display:block;
  margin-top:10px;
  color:#dfeaf1;
  font-size:15px;
  letter-spacing:.18em;
}

.payment-processing-hero-copy p{
  margin:11px 0 0;
  color:rgba(218,230,238,.72);
  font-size:13px;
}

/* PROGRESS */
.payment-processing-progress{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.payment-processing-progress > div{
  position:relative;
  text-align:center;
}

.payment-processing-progress > div:not(:last-child)::after{
  content:"";
  position:absolute;
  top:24px;
  left:64%;
  width:72%;
  height:1px;
  background:rgba(255,255,255,.16);
}

.payment-processing-progress b{
  width:50px;
  height:50px;
  margin:0 auto 8px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  color:#dbe8f0;
  background:rgba(6,14,22,.74);
  font-size:17px;
}

.payment-processing-progress .done b{
  color:#40dbc0;
  border-color:rgba(64,219,192,.42);
}

.payment-processing-progress .active b{
  color:#f0bf5b;
  border-color:rgba(233,173,63,.72);
  box-shadow:0 0 22px rgba(229,166,54,.20);
}

.payment-processing-progress strong{
  display:block;
  color:#f0f5f8;
  font-size:14px;
}

.payment-processing-progress .active strong{
  color:#e9b85a;
}

.payment-processing-progress span{
  display:block;
  margin-top:4px;
  color:rgba(203,218,227,.54);
  font-size:9.5px;
}

/* MAIN GRID */
.payment-processing-grid{
  margin-top:20px;
  display:grid;
  grid-template-columns:minmax(0,1.62fr) minmax(340px,.78fr);
  gap:20px;
  align-items:start;
}

/* PROCESSING CARD */
.processing-card{
  min-height:560px;
  padding:34px 32px 28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(103,173,221,.12);
  border-radius:18px;
  background:
    radial-gradient(circle at 50% 35%,rgba(36,142,221,.13),transparent 30%),
    linear-gradient(180deg,rgba(8,18,28,.98),rgba(5,11,18,.99));
}

/* PROCESSING VISUAL */
.processing-visual{
  position:relative;
  width:220px;
  height:220px;
  display:grid;
  place-items:center;
}

.processing-core{
  position:relative;
  z-index:3;
  width:98px;
  height:98px;
  display:grid;
  place-items:center;
  border:1px solid rgba(68,182,243,.50);
  border-radius:50%;
  color:#66c5ff;
  background:
    radial-gradient(circle at 50% 45%,rgba(58,166,236,.22),transparent 58%),
    rgba(7,17,27,.92);
  font-size:42px;
  box-shadow:
    0 0 38px rgba(44,156,231,.18),
    inset 0 0 24px rgba(44,156,231,.08);
}

.processing-orbit{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}

.processing-orbit-a{
  width:178px;
  height:178px;
  border:2px solid rgba(67,179,244,.58);
  box-shadow:0 0 28px rgba(67,179,244,.18);
}

.processing-orbit-b{
  width:210px;
  height:210px;
  border:2px solid rgba(237,173,58,.45);
  box-shadow:0 0 28px rgba(237,173,58,.12);
}

/* COPY */
.processing-copy{
  margin-top:8px;
  text-align:center;
}

.processing-copy h2{
  margin:0;
  font-size:30px;
  line-height:1.1;
}

.processing-copy > span{
  display:block;
  margin-top:7px;
  color:#dce8f0;
  font-size:13px;
  letter-spacing:.18em;
}

.processing-copy p{
  margin:10px auto 0;
  max-width:620px;
  color:rgba(211,224,233,.66);
  font-size:12px;
  line-height:1.55;
}

/* WARNING */
.processing-warning{
  width:min(680px,100%);
  min-height:70px;
  margin-top:18px;
  padding:12px 16px;
  display:grid;
  grid-template-columns:38px 1fr;
  gap:12px;
  align-items:center;
  border:1px solid rgba(228,164,50,.34);
  border-radius:12px;
  background:rgba(228,164,50,.045);
}

.processing-warning > span{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#151515;
  background:#e9aa39;
  font-weight:900;
}

.processing-warning p{
  margin:0;
  color:rgba(221,231,237,.72);
  font-size:10px;
  line-height:1.5;
}

.processing-warning strong{
  color:#eeb953;
  font-size:11px;
}

/* STEPS */
.processing-steps{
  width:100%;
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.processing-steps > div{
  position:relative;
  text-align:center;
}

.processing-steps > div:not(:last-child)::after{
  content:"";
  position:absolute;
  top:21px;
  left:64%;
  width:72%;
  height:1px;
  background:rgba(255,255,255,.14);
}

.processing-steps b{
  width:44px;
  height:44px;
  margin:0 auto 8px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.13);
  border-radius:50%;
  color:#dbe7ef;
  background:rgba(255,255,255,.025);
  font-size:17px;
}

.processing-steps .active b{
  color:#f0b94e;
  border-color:rgba(231,168,56,.68);
  box-shadow:0 0 18px rgba(231,168,56,.14);
}

.processing-steps strong{
  display:block;
  font-size:11px;
}

.processing-steps .active strong{
  color:#e9b24e;
}

.processing-steps span{
  display:block;
  margin-top:4px;
  color:rgba(198,213,223,.52);
  font-size:9px;
}

/* RIGHT SUMMARY */
#paymentProcessingView .payment-summary-card{
  padding-bottom:16px;
}

.processing-payment-method,
.processing-safe-card{
  margin:12px 18px 0;
  min-height:68px;
  padding:11px 12px;
  display:grid;
  grid-template-columns:42px 1fr;
  gap:10px;
  align-items:center;
  border:1px solid rgba(103,173,221,.10);
  border-radius:11px;
  background:rgba(255,255,255,.018);
}

.processing-payment-method > span,
.processing-safe-card > span{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:#e5b04e;
  background:rgba(229,176,78,.08);
  font-size:20px;
}

.processing-payment-method small,
.processing-safe-card small{
  display:block;
  color:rgba(198,212,222,.52);
  font-size:9px;
}

.processing-payment-method strong,
.processing-safe-card strong{
  display:block;
  margin-top:3px;
  font-size:11px;
}

.processing-safe-card{
  border-color:rgba(66,180,229,.16);
}

.processing-safe-card > span{
  color:#5fd0ef;
  background:rgba(62,175,224,.07);
}

/* LANGUAGE */
#paymentProcessingView .customer-top-actions button[aria-label="Ngôn ngữ"]{
  min-width:64px !important;
  height:34px !important;
  padding:0 10px !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  border-radius:10px !important;
}

/* RESPONSIVE */
@media (max-width:1100px){
  .payment-processing-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .payment-processing-content{
    width:calc(100% - 28px);
  }

  .payment-processing-hero{
    grid-template-columns:1fr;
  }

  .processing-steps{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* =========================================================
   SCREEN 12 — CUS ORDER CONFIRMATION
   ========================================================= */

body:has(#orderConfirmationView.active) > .topbar{
  display:none;
}

body:has(#orderConfirmationView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#orderConfirmationView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 78% 8%,rgba(50,135,198,.09),transparent 26%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#orderConfirmationView.active{
  display:block;
}

#orderConfirmationView .customer-shell{
  min-height:100vh;
}

.order-confirmation-content{
  width:min(1420px,calc(100% - 48px));
  margin:0 auto;
  padding:24px 0 52px;
}

/* BREADCRUMB */

.order-confirmation-breadcrumb{
  min-height:34px;
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(201,216,227,.56);
  font-size:11px;
}

.order-confirmation-breadcrumb strong{
  color:#e8f1f6;
}

/* HERO */

.order-confirmation-hero{
  position:relative;
  min-height:185px;
  margin-top:8px;
  padding:24px 30px;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:24px;
  align-items:center;
  overflow:hidden;
  border:1px solid rgba(104,174,222,.11);
  border-radius:20px;
  background:
    linear-gradient(90deg,
      rgba(4,11,18,.98) 0%,
      rgba(4,11,18,.86) 39%,
      rgba(4,11,18,.34) 74%,
      rgba(4,11,18,.14) 100%),
    url("./assets/customer/home/hero-customer-home.webp") center 42% / cover no-repeat;
}

.order-confirmation-hero-copy{
  position:relative;
  z-index:2;
}

.order-confirmation-hero-copy h1{
  margin:0;
  font-size:50px;
  line-height:1;
  letter-spacing:-1.3px;
}

.order-confirmation-hero-copy > span{
  display:block;
  margin-top:9px;
  color:#dfeaf1;
  font-size:14px;
  letter-spacing:.19em;
}

.order-confirmation-hero-copy p{
  margin:10px 0 0;
  color:rgba(218,230,238,.72);
  font-size:13px;
}

/* HERO PROGRESS */

.order-confirmation-progress{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.order-confirmation-progress > div{
  position:relative;
  text-align:center;
}

.order-confirmation-progress > div:not(:last-child)::after{
  content:"";
  position:absolute;
  top:24px;
  left:64%;
  width:72%;
  height:2px;
  background:linear-gradient(90deg,#27cdb0,#e7ad3d);
  opacity:.72;
}

.order-confirmation-progress b{
  width:50px;
  height:50px;
  margin:0 auto 7px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  color:#eaf3f7;
  background:rgba(6,14,22,.76);
  font-size:18px;
}

.order-confirmation-progress .done b{
  color:#40dbc0;
  border-color:rgba(64,219,192,.54);
  box-shadow:0 0 18px rgba(50,212,186,.16);
}

.order-confirmation-progress .active b{
  color:#f0bd4d;
  border-color:rgba(239,180,63,.90);
  box-shadow:0 0 24px rgba(239,180,63,.28);
}

.order-confirmation-progress strong{
  display:block;
  color:#edf4f7;
  font-size:14px;
}

.order-confirmation-progress .active strong{
  color:#f0bd4d;
}

.order-confirmation-progress span{
  display:block;
  margin-top:3px;
  color:rgba(203,218,227,.56);
  font-size:9.5px;
}

/* MAIN GRID */

.order-confirmation-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns:minmax(0,1.62fr) minmax(340px,.78fr);
  gap:18px;
  align-items:start;
}

/* LEFT MAIN CONFIRMATION */

.confirmation-card{
  min-height:330px;
  padding:18px 24px;
  display:grid;
  grid-template-columns:minmax(300px,.95fr) minmax(0,1.05fr);
  gap:26px;
  align-items:center;
  border:1px solid rgba(91,170,222,.16);
  border-radius:16px;
  background:
    radial-gradient(circle at 22% 48%,rgba(23,123,197,.14),transparent 34%),
    linear-gradient(180deg,rgba(8,18,28,.97),rgba(5,12,19,.99));
}

/* SUCCESS VISUAL */

.confirmation-success-visual{
  position:relative;
  min-height:286px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:12px;
  background:
    linear-gradient(180deg,rgba(6,17,28,.20),rgba(5,13,21,.45)),
    radial-gradient(circle at 50% 50%,rgba(48,162,237,.14),transparent 45%);
}

.confirmation-success-visual::before,
.confirmation-success-visual::after{
  content:"";
  position:absolute;
  width:82%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(57,180,250,.40),transparent);
}

.confirmation-success-visual::before{
  transform:rotate(38deg);
}

.confirmation-success-visual::after{
  transform:rotate(-38deg);
}

.confirmation-ring{
  position:absolute;
  border-radius:50%;
}

.confirmation-ring-a{
  width:210px;
  height:210px;
  border:3px solid rgba(57,180,250,.78);
  box-shadow:
    0 0 24px rgba(57,180,250,.28),
    inset 0 0 24px rgba(57,180,250,.12);
}

.confirmation-ring-b{
  width:245px;
  height:245px;
  border:3px solid rgba(238,174,55,.72);
  box-shadow:
    0 0 28px rgba(238,174,55,.24),
    inset 0 0 24px rgba(238,174,55,.09);
}

.confirmation-check{
  position:relative;
  z-index:3;
  width:128px;
  height:128px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#f5bc50;
  background:rgba(7,20,31,.92);
  font-size:72px;
  font-weight:400;
  text-shadow:0 0 20px rgba(244,177,64,.70);
}

/* DETAILS */

.confirmation-details{
  display:grid;
  gap:0;
}

.confirmation-detail-row{
  min-height:72px;
  padding:11px 0;
  display:grid;
  grid-template-columns:58px 1fr;
  gap:12px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.confirmation-detail-row:last-child{
  border-bottom:0;
}

.confirmation-detail-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border:1px solid rgba(94,166,213,.23);
  border-radius:10px;
  color:#dfeaf1;
  background:rgba(255,255,255,.025);
  font-size:21px;
}

.confirmation-detail-row small{
  display:block;
  color:rgba(207,220,229,.68);
  font-size:10px;
}

.confirmation-detail-row strong{
  display:block;
  margin-top:4px;
  color:#f2f7f9;
  font-size:16px;
}

.confirmation-detail-row em{
  display:block;
  margin-top:3px;
  color:rgba(209,221,229,.58);
  font-size:9px;
  font-style:normal;
  letter-spacing:.15em;
}

.confirmation-detail-row.confirmed .confirmation-detail-icon{
  color:#50c7ff;
  border-color:rgba(69,184,238,.35);
}

.confirmation-detail-row.confirmed strong{
  color:#43e0ba;
}

/* MESSAGE */

.confirmation-message{
  min-height:78px;
  margin-top:14px;
  padding:14px 18px;
  display:grid;
  grid-template-columns:46px 1fr;
  gap:12px;
  align-items:center;
  border:1px solid rgba(77,170,224,.16);
  border-radius:14px;
  background:rgba(8,20,31,.82);
}

.confirmation-message > span{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:#53cfff;
  background:rgba(44,164,220,.08);
  font-size:20px;
}

.confirmation-message strong{
  display:block;
  color:#edf4f7;
  font-size:12px;
}

.confirmation-message p{
  margin:4px 0 0;
  color:rgba(203,216,225,.62);
  font-size:10px;
}

/* ACTION CARDS */

.confirmation-actions{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.confirmation-action{
  min-height:126px;
  padding:14px 14px;
  display:grid;
  grid-template-columns:42px 1fr 18px;
  gap:9px;
  align-items:start;
  text-align:left;
  border:1px solid rgba(96,166,211,.16);
  border-radius:14px;
  color:#eef5f8;
  background:rgba(8,18,28,.90);
  cursor:pointer;
}

.confirmation-action.active{
  border-color:rgba(239,177,63,.90);
  box-shadow:
    0 0 0 1px rgba(239,177,63,.16),
    0 0 22px rgba(239,177,63,.17);
}

.confirmation-action > span{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:#f0b94c;
  background:rgba(238,174,58,.09);
  font-size:20px;
}

.confirmation-action strong{
  display:block;
  color:#f0bd4d;
  font-size:12px;
}

.confirmation-action small{
  display:block;
  margin-top:5px;
  color:rgba(205,218,226,.64);
  font-size:9.5px;
  line-height:1.45;
}

.confirmation-action b{
  margin-top:13px;
  color:#d9e6ed;
  font-size:22px;
  font-weight:400;
}

/* RIGHT SIDE */

.order-confirmation-right{
  display:grid;
  gap:8px;
}

.confirmation-side-card{
  overflow:hidden;
  border:1px solid rgba(94,169,216,.16);
  border-radius:14px;
  background:rgba(8,18,28,.93);
}

.confirmation-side-card > header{
  min-height:50px;
  padding:0 16px;
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.confirmation-side-card > header span{
  color:#e9b342;
  font-size:20px;
}

.confirmation-side-card > header h2{
  margin:0;
  font-size:16px;
}

/* PRODUCT */

.confirmation-product{
  padding:11px 16px 6px;
  display:grid;
  grid-template-columns:112px 1fr;
  gap:12px;
  align-items:center;
}

.confirmation-product-image{
  height:96px;
  border-radius:11px;
  background:
    linear-gradient(rgba(5,13,20,.10),rgba(5,13,20,.10)),
    url("./assets/customer/product-discovery/product-technology.webp") center / cover no-repeat;
}

.confirmation-product h3{
  margin:0 0 5px;
  font-size:13px;
}

.confirmation-product p{
  margin:0;
  color:rgba(206,219,228,.64);
  font-size:9.5px;
  line-height:1.45;
}

.confirmation-product > div:last-child > span{
  display:inline-flex;
  margin-top:8px;
  padding:4px 9px;
  border-radius:7px;
  color:#50dac7;
  background:rgba(43,199,177,.07);
  font-size:9px;
}

.confirmation-qty{
  padding:0 16px 12px;
  color:rgba(214,226,233,.72);
  font-size:10px;
}

/* SUMMARY */

.confirmation-summary-lines{
  padding:13px 16px 10px;
  display:grid;
  gap:11px;
}

.confirmation-summary-lines > div,
.confirmation-summary-total,
.confirmation-shipping-lines > div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.confirmation-summary-lines span,
.confirmation-shipping-lines span{
  color:rgba(214,226,233,.72);
  font-size:10.5px;
}

.confirmation-summary-lines strong,
.confirmation-shipping-lines strong{
  color:#edf4f7;
  font-size:11px;
}

.confirmation-summary-total{
  margin:0 16px;
  padding:13px 0;
  border-top:1px solid rgba(255,255,255,.08);
}

.confirmation-summary-total span{
  font-size:14px;
  font-weight:800;
}

.confirmation-summary-total strong{
  color:#f2c650;
  font-size:18px;
}

/* SHIPPING */

.confirmation-shipping-lines{
  padding:14px 16px 16px;
  display:grid;
  gap:12px;
}

/* LANGUAGE */

#orderConfirmationView .customer-top-actions button[aria-label="Ngôn ngữ"]{
  min-width:64px !important;
  height:34px !important;
  padding:0 10px !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  border-radius:10px !important;
}

/* RESPONSIVE */

@media (max-width:1180px){
  .order-confirmation-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:900px){
  .confirmation-card{
    grid-template-columns:1fr;
  }

  .confirmation-actions{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:760px){
  .order-confirmation-content{
    width:calc(100% - 28px);
  }

  .order-confirmation-hero{
    grid-template-columns:1fr;
  }

  .order-confirmation-hero-copy h1{
    font-size:38px;
  }

  .confirmation-actions{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   SCREEN 13 — CUS MY BENEFITS
   ========================================================= */

body:has(#myBenefitsView.active) > .topbar{
  display:none;
}

body:has(#myBenefitsView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#myBenefitsView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 78% 8%,rgba(46,130,195,.08),transparent 28%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#myBenefitsView.active{
  display:block;
}

#myBenefitsView .customer-shell{
  min-height:100vh;
}

.my-benefits-content{
  width:min(1420px,calc(100% - 48px));
  margin:0 auto;
  padding:20px 0 44px;
}

/* BREADCRUMB */

.my-benefits-breadcrumb{
  min-height:30px;
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(201,216,227,.56);
  font-size:11px;
}

.my-benefits-breadcrumb strong{
  color:#e8f1f6;
}

/* HERO */

.my-benefits-hero{
  position:relative;
  min-height:185px;
  margin-top:5px;
  padding:26px 30px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border:1px solid rgba(104,174,222,.10);
  border-radius:18px;
  background:
    linear-gradient(90deg,
      rgba(4,11,18,.97) 0%,
      rgba(4,11,18,.78) 35%,
      rgba(4,11,18,.20) 72%,
      rgba(4,11,18,.06) 100%),
    url("./assets/customer/home/hero-customer-home.webp") center 46% / cover no-repeat;
}

.my-benefits-hero > div{
  position:relative;
  z-index:2;
}

.my-benefits-hero h1{
  margin:0;
  font-size:52px;
  line-height:.98;
  letter-spacing:-1.4px;
}

.my-benefits-hero > div > span{
  display:block;
  margin-top:8px;
  color:#dfeaf1;
  font-size:15px;
  letter-spacing:.19em;
}

.my-benefits-hero p{
  margin:10px 0 2px;
  color:rgba(224,234,240,.82);
  font-size:13px;
}

.my-benefits-hero small{
  color:rgba(203,218,227,.62);
  font-size:10px;
}

/* SUMMARY */

.benefit-summary-grid{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.benefit-summary-card{
  position:relative;
  min-height:102px;
  padding:16px 18px;
  display:grid;
  grid-template-columns:52px 1fr 24px;
  gap:12px;
  align-items:center;
  overflow:hidden;
  border:1px solid rgba(100,170,216,.16);
  border-radius:13px;
  background:rgba(8,18,28,.92);
}

.benefit-summary-card.available{
  border-color:rgba(239,177,63,.65);
  box-shadow:0 0 20px rgba(239,177,63,.12);
}

.benefit-summary-card.active{
  border-color:rgba(60,177,238,.50);
}

.benefit-summary-card.used{
  border-color:rgba(190,200,208,.20);
}

.benefit-summary-card.history{
  border-color:rgba(144,105,255,.54);
  background:
    radial-gradient(circle at 10% 50%,rgba(120,76,255,.10),transparent 34%),
    rgba(8,18,28,.92);
}

.benefit-summary-icon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:10px;
  font-size:27px;
}

.benefit-summary-card.available .benefit-summary-icon{
  color:#f1b93f;
  background:rgba(239,177,63,.08);
}

.benefit-summary-card.active .benefit-summary-icon{
  color:#5bc7ff;
  background:rgba(61,184,240,.08);
}

.benefit-summary-card.used .benefit-summary-icon{
  color:#e1e7eb;
  background:rgba(255,255,255,.05);
}

.benefit-summary-card.history .benefit-summary-icon{
  color:#a789ff;
  background:rgba(135,95,255,.08);
}

.benefit-summary-card small{
  display:block;
  color:#edf4f7;
  font-size:11px;
  font-weight:700;
}

.benefit-summary-card em{
  display:block;
  margin-top:2px;
  color:rgba(203,217,226,.52);
  font-size:8.5px;
  font-style:normal;
  letter-spacing:.12em;
}

.benefit-summary-card strong{
  display:block;
  margin-top:4px;
  color:#f4f7f9;
  font-size:28px;
  line-height:1;
}

.benefit-summary-card.history strong{
  color:#f1bd4a;
  font-size:15px;
  font-weight:600;
}

.benefit-summary-card > b{
  color:#d9e7ef;
  font-size:22px;
  font-weight:400;
}

.benefit-summary-card.available > b,
.benefit-summary-card.history > b{
  color:#f1b83f;
}

/* BENEFITS SECTION */

.benefits-section{
  margin-top:12px;
}

.benefits-section-header{
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.benefits-section-header > div{
  display:flex;
  align-items:center;
  gap:9px;
}

.benefits-section-header > div > span{
  color:#f1c32f;
  font-size:25px;
}

.benefits-section-header h2{
  margin:0;
  font-size:20px;
}

.benefits-section-header button,
.benefit-activity-card > header button{
  border:0;
  color:#e9b73f;
  background:transparent;
  font-size:10.5px;
  cursor:pointer;
}

/* BENEFIT CARDS */

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

.benefit-card{
  overflow:hidden;
  border:1px solid rgba(98,167,213,.16);
  border-radius:13px;
  background:rgba(7,17,26,.94);
}

.benefit-card-image{
  position:relative;
  height:112px;
  display:flex;
  align-items:flex-start;
  padding:12px;
  background-position:center;
  background-size:cover;
}

.benefit-card.shopping .benefit-card-image{
  background-image:
    linear-gradient(rgba(4,11,18,.18),rgba(4,11,18,.24)),
    url("./assets/customer/home/benefits.webp");
}

.benefit-card.customer .benefit-card-image{
  background-image:
    linear-gradient(rgba(4,11,18,.16),rgba(4,11,18,.20)),
    url("./assets/customer/home/profile.webp");
}

.benefit-card.experience .benefit-card-image{
  background-image:
    linear-gradient(rgba(4,11,18,.14),rgba(4,11,18,.20)),
    url("./assets/customer/home/explore.webp");
}

.benefit-card.service .benefit-card-image{
  background-image:
    linear-gradient(rgba(4,11,18,.18),rgba(4,11,18,.20)),
    url("./assets/customer/home/featured-services.webp");
}

.benefit-card-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.20);
  border-radius:9px;
  color:#f0c24f;
  background:rgba(6,14,22,.78);
  font-size:23px;
}

.benefit-card.customer .benefit-card-icon{
  color:#80aaff;
}

.benefit-card.experience .benefit-card-icon{
  color:#e7edf0;
}

.benefit-card.service .benefit-card-icon{
  color:#edf3f6;
}

.benefit-card-body{
  padding:0 13px 11px;
}

.benefit-status{
  position:relative;
  top:-9px;
  display:inline-flex;
  min-height:25px;
  padding:0 10px;
  align-items:center;
  border:1px solid;
  border-radius:999px;
  font-size:9.5px;
  background:#07121c;
}

.benefit-status.available{
  color:#53e0c1;
  border-color:rgba(63,218,188,.70);
}

.benefit-status.active{
  color:#69c8ff;
  border-color:rgba(85,190,247,.65);
}

.benefit-status.used{
  color:#d7dde2;
  border-color:rgba(212,221,227,.35);
}

.benefit-card h3{
  margin:-2px 0 6px;
  font-size:14px;
}

.benefit-card p{
  min-height:48px;
  margin:0;
  color:rgba(209,222,231,.66);
  font-size:10px;
  line-height:1.5;
}

.benefit-card button{
  width:100%;
  min-height:34px;
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  border:1px solid rgba(235,174,52,.75);
  border-radius:7px;
  color:#eabc43;
  background:transparent;
  font-size:10px;
  cursor:pointer;
}

.benefit-card button b{
  font-size:16px;
  font-weight:400;
}

/* RECENT ACTIVITY */

.benefit-activity-card{
  margin-top:12px;
  overflow:hidden;
  border:1px solid rgba(92,165,212,.16);
  border-radius:13px;
  background:rgba(7,17,26,.94);
}

.benefit-activity-card > header{
  min-height:43px;
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.benefit-activity-card > header > div{
  display:flex;
  align-items:center;
  gap:10px;
}

.benefit-activity-card > header span{
  color:#f2c139;
  font-size:22px;
}

.benefit-activity-card > header h2{
  margin:0;
  font-size:17px;
}

.benefit-activity-table{
  overflow-x:auto;
}

.benefit-table-row{
  min-width:1050px;
  min-height:36px;
  padding:0 14px;
  display:grid;
  grid-template-columns:1.25fr 1.55fr 1.1fr 1fr 1.25fr .9fr 30px;
  gap:10px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.045);
  color:rgba(220,230,236,.76);
  font-size:9.5px;
}

.benefit-table-row:last-child{
  border-bottom:0;
}

.benefit-table-head{
  min-height:31px;
  color:rgba(194,210,220,.58);
  font-size:9px;
}

.benefit-table-row > span:first-child{
  color:#e5edf2;
}

.benefit-table-row > span:last-child{
  color:#ecb63f;
  font-size:17px;
  text-align:right;
}

.table-status{
  display:inline-flex;
  min-height:24px;
  padding:0 9px;
  align-items:center;
  border:1px solid;
  border-radius:999px;
  font-size:9px;
  font-weight:500;
}

.table-status.available{
  color:#52dfc1;
  border-color:rgba(63,218,188,.48);
  background:rgba(49,206,178,.05);
}

.table-status.active{
  color:#66c8ff;
  border-color:rgba(77,188,246,.46);
  background:rgba(60,176,236,.05);
}

.table-status.used{
  color:#d6dee3;
  border-color:rgba(210,221,228,.24);
  background:rgba(255,255,255,.025);
}

/* LANGUAGE */

#myBenefitsView .customer-top-actions button[aria-label="Ngôn ngữ"]{
  min-width:64px !important;
  height:34px !important;
  padding:0 10px !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  border-radius:10px !important;
}

/* RESPONSIVE */

@media (max-width:1150px){
  .benefit-summary-grid,
  .benefits-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:760px){
  .my-benefits-content{
    width:calc(100% - 28px);
  }

  .my-benefits-hero h1{
    font-size:38px;
  }

  .benefit-summary-grid,
  .benefits-card-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   SCREEN 14 — CUS BENEFIT DETAIL
   ========================================================= */

body:has(#benefitDetailView.active) > .topbar{
  display:none;
}

body:has(#benefitDetailView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#benefitDetailView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 78% 8%,rgba(46,130,195,.08),transparent 28%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#benefitDetailView.active{
  display:block;
}

#benefitDetailView .customer-shell{
  min-height:100vh;
}

.benefit-detail-content{
  width:min(1420px,calc(100% - 48px));
  margin:0 auto;
  padding:20px 0 44px;
}

/* BREADCRUMB */

.benefit-detail-breadcrumb{
  min-height:30px;
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(201,216,227,.56);
  font-size:11px;
}

.benefit-detail-breadcrumb strong{
  color:#8fdcff;
}

/* HERO */

.benefit-detail-hero{
  position:relative;
  min-height:175px;
  margin-top:5px;
  padding:24px 30px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border:1px solid rgba(104,174,222,.10);
  border-radius:18px;
  background:
    linear-gradient(90deg,
      rgba(4,11,18,.97) 0%,
      rgba(4,11,18,.78) 35%,
      rgba(4,11,18,.20) 72%,
      rgba(4,11,18,.06) 100%),
    url("./assets/customer/home/hero-customer-home.webp") center 46% / cover no-repeat;
}

.benefit-detail-hero h1{
  margin:0;
  font-size:50px;
  line-height:.98;
  letter-spacing:-1.3px;
}

.benefit-detail-hero > div > span{
  display:block;
  margin-top:8px;
  color:#dfeaf1;
  font-size:15px;
  letter-spacing:.19em;
}

.benefit-detail-hero p{
  margin:10px 0 2px;
  color:rgba(224,234,240,.82);
  font-size:13px;
}

.benefit-detail-hero small{
  color:rgba(203,218,227,.62);
  font-size:10px;
}

/* MAIN GRID */

.benefit-detail-grid{
  margin-top:12px;
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(360px,.8fr);
  gap:16px;
  align-items:start;
}

/* FEATURE CARD */

.benefit-feature-card{
  min-height:246px;
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(320px,1.05fr);
  overflow:hidden;
  border:1px solid rgba(239,177,63,.78);
  border-radius:15px;
  background:rgba(8,18,28,.94);
  box-shadow:0 0 22px rgba(239,177,63,.12);
}

.benefit-feature-copy{
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.benefit-feature-title{
  display:flex;
  gap:12px;
  align-items:center;
}

.benefit-feature-icon{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border:1px solid rgba(239,177,63,.42);
  border-radius:11px;
  color:#f0b940;
  background:rgba(239,177,63,.07);
  font-size:28px;
}

.benefit-feature-title small{
  display:block;
  color:#e7eef3;
  font-size:10px;
  letter-spacing:.10em;
}

.benefit-feature-title h2{
  margin:5px 0 0;
  font-size:25px;
}

.benefit-detail-status{
  display:inline-flex;
  width:max-content;
  min-height:28px;
  margin-top:10px;
  padding:0 12px;
  align-items:center;
  border:1px solid rgba(63,218,188,.74);
  border-radius:999px;
  color:#50ddbe;
  background:rgba(53,200,176,.05);
  font-size:10px;
}

.benefit-feature-copy p{
  margin:12px 0 0;
  max-width:470px;
  color:rgba(213,226,234,.72);
  font-size:11px;
  line-height:1.5;
}

.benefit-feature-copy button{
  width:min(305px,100%);
  min-height:46px;
  margin-top:16px;
  border:0;
  border-radius:9px;
  color:#111820;
  background:linear-gradient(180deg,#ffd45d,#f2a92e);
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}

.benefit-feature-copy button b{
  margin-left:12px;
  font-size:18px;
}

.benefit-feature-image{
  min-height:246px;
  background:
    linear-gradient(90deg,rgba(7,15,22,.10),rgba(7,15,22,.00)),
    url("./assets/customer/home/benefits.webp") center / cover no-repeat;
}

/* INFO BLOCKS */

.benefit-info-block,
.benefit-how-card{
  margin-top:12px;
  padding:13px 16px;
  border:1px solid rgba(82,166,219,.16);
  border-radius:13px;
  background:rgba(8,18,28,.92);
}

.benefit-info-block header,
.benefit-how-card header{
  display:flex;
  align-items:center;
  gap:10px;
}

.benefit-info-block header span,
.benefit-how-card header span{
  color:#4fc9ff;
  font-size:20px;
}

.benefit-info-block h3,
.benefit-how-card h3{
  margin:0;
  font-size:16px;
}

.benefit-info-block p{
  margin:8px 0 0 30px;
  color:rgba(211,224,232,.70);
  font-size:10.5px;
  line-height:1.5;
}

.benefit-info-block ul{
  margin:8px 0 0 31px;
  padding:0;
  list-style:none;
  display:grid;
  gap:5px;
}

.benefit-info-block li{
  position:relative;
  padding-left:18px;
  color:rgba(211,224,232,.72);
  font-size:10.5px;
}

.benefit-info-block li::before{
  content:"✓";
  position:absolute;
  left:0;
  color:#43c9ff;
}

/* HOW TO */

.benefit-how-steps{
  margin-top:10px;
  display:grid;
  grid-template-columns:1fr 22px 1fr 22px 1fr;
  gap:8px;
  align-items:center;
}

.benefit-how-steps > div{
  min-height:78px;
  display:grid;
  grid-template-columns:48px 1fr;
  grid-template-rows:auto auto auto;
  column-gap:10px;
  align-items:center;
}

.benefit-how-steps > div > b{
  grid-column:2;
  color:#62c9ff;
  font-size:18px;
}

.benefit-how-steps > div > span{
  grid-row:1/4;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid rgba(63,184,239,.42);
  border-radius:50%;
  color:#62c9ff;
  font-size:21px;
}

.benefit-how-steps > div.active > b,
.benefit-how-steps > div.active > span{
  color:#f1b83f;
  border-color:rgba(239,177,63,.62);
}

.benefit-how-steps strong{
  grid-column:2;
  color:#edf4f7;
  font-size:11px;
}

.benefit-how-steps small{
  grid-column:2;
  color:rgba(200,216,225,.56);
  font-size:8.5px;
}

.benefit-how-steps > i{
  color:#dce8ee;
  font-size:24px;
  font-style:normal;
  text-align:center;
}

/* RIGHT CARDS */

.benefit-detail-right{
  display:grid;
  gap:10px;
}

.benefit-detail-side-card{
  overflow:hidden;
  border:1px solid rgba(92,165,212,.16);
  border-radius:13px;
  background:rgba(8,18,28,.94);
}

.benefit-detail-side-card > header{
  min-height:48px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:9px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.benefit-detail-side-card > header span{
  color:#f0ba3f;
  font-size:20px;
}

.benefit-detail-side-card > header h2{
  margin:0;
  font-size:16px;
}

/* META */

.benefit-meta-row{
  min-height:56px;
  padding:9px 14px;
  display:grid;
  grid-template-columns:130px 1fr;
  gap:10px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.055);
}

.benefit-meta-row:last-child{
  border-bottom:0;
}

.benefit-meta-row > span{
  color:rgba(215,226,233,.70);
  font-size:10px;
}

.benefit-meta-row > div{
  display:grid;
  grid-template-columns:26px 1fr;
  column-gap:8px;
  align-items:center;
}

.benefit-meta-row > div > b{
  grid-row:1/3;
  color:#f1bd43;
  font-size:18px;
}

.benefit-meta-row strong{
  color:#eef4f7;
  font-size:10.5px;
}

.benefit-meta-row strong.available{
  color:#50dfbd;
}

.benefit-meta-row small{
  color:rgba(202,216,225,.54);
  font-size:8.5px;
}

.benefit-date-pair{
  grid-template-columns:1fr 1fr !important;
  gap:14px;
}

.benefit-date-pair > div{
  display:block;
}

.benefit-date-pair small{
  display:block;
}

.benefit-date-pair strong{
  display:block;
  margin-top:4px;
  font-size:10px;
}

/* ORIGIN */

.benefit-origin-content{
  padding:10px 12px;
  display:grid;
  grid-template-columns:112px 1fr 132px;
  gap:12px;
  align-items:center;
}

.benefit-origin-image{
  height:72px;
  border-radius:9px;
  background:
    linear-gradient(rgba(5,13,20,.08),rgba(5,13,20,.08)),
    url("./assets/customer/home/benefits.webp") center / cover no-repeat;
}

.benefit-origin-content strong{
  display:block;
  font-size:11px;
}

.benefit-origin-content small{
  display:block;
  margin-top:4px;
  color:rgba(203,217,226,.55);
  font-size:8.5px;
}

.benefit-origin-content b{
  display:block;
  margin-top:6px;
  color:#edf3f6;
  font-size:11px;
}

.benefit-origin-content button{
  min-height:38px;
  border:1px solid rgba(237,177,59,.72);
  border-radius:8px;
  color:#e9b640;
  background:transparent;
  font-size:10px;
}

/* NEXT ACTION */

.benefit-next-card{
  padding-bottom:10px;
}

.benefit-next-primary{
  width:calc(100% - 24px);
  min-height:42px;
  margin:10px 12px 0;
  border:0;
  border-radius:8px;
  color:#12181e;
  background:linear-gradient(180deg,#ffd45c,#f3a92e);
  font-size:12px;
  font-weight:800;
}

.benefit-next-secondary{
  margin:9px 12px 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.benefit-next-secondary button{
  min-height:38px;
  border:1px solid rgba(196,208,216,.28);
  border-radius:7px;
  color:#dbe6ec;
  background:transparent;
  font-size:9px;
}

.benefit-next-secondary button:last-child{
  color:#59c9ff;
  border-color:rgba(73,184,237,.30);
}

/* LANGUAGE */

#benefitDetailView .customer-top-actions button[aria-label="Ngôn ngữ"]{
  min-width:64px !important;
  height:34px !important;
  padding:0 10px !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  border-radius:10px !important;
}

/* RESPONSIVE */

@media (max-width:1180px){
  .benefit-detail-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:900px){
  .benefit-feature-card{
    grid-template-columns:1fr;
  }

  .benefit-feature-image{
    min-height:190px;
  }
}

@media (max-width:760px){
  .benefit-detail-content{
    width:calc(100% - 28px);
  }

  .benefit-detail-hero h1{
    font-size:38px;
  }

  .benefit-how-steps{
    grid-template-columns:1fr;
  }

  .benefit-how-steps > i{
    display:none;
  }

  .benefit-origin-content{
    grid-template-columns:1fr;
  }

  .benefit-next-secondary{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   SCREEN 15 — CUS BENEFIT HISTORY
   ========================================================= */

body:has(#benefitHistoryView.active) > .topbar{
  display:none;
}

body:has(#benefitHistoryView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#benefitHistoryView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 78% 8%,rgba(46,130,195,.08),transparent 28%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#benefitHistoryView.active{
  display:block;
}

#benefitHistoryView .customer-shell{
  min-height:100vh;
}

.benefit-history-content{
  width:min(1420px,calc(100% - 48px));
  margin:0 auto;
  padding:20px 0 36px;
}

/* BREADCRUMB */

.benefit-history-breadcrumb{
  min-height:30px;
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(201,216,227,.56);
  font-size:11px;
}

.benefit-history-breadcrumb strong{
  color:#7fd8ff;
}

/* HERO */

.benefit-history-hero{
  position:relative;
  min-height:175px;
  margin-top:5px;
  padding:24px 30px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border:1px solid rgba(104,174,222,.10);
  border-radius:18px;
  background:
    linear-gradient(90deg,
      rgba(4,11,18,.97) 0%,
      rgba(4,11,18,.80) 36%,
      rgba(4,11,18,.18) 74%,
      rgba(4,11,18,.05) 100%),
    url("./assets/customer/home/hero-customer-home.webp") center 46% / cover no-repeat;
}

.benefit-history-hero h1{
  margin:0;
  font-size:50px;
  line-height:.98;
  letter-spacing:-1.3px;
}

.benefit-history-hero > div > span{
  display:block;
  margin-top:8px;
  color:#dfeaf1;
  font-size:15px;
  letter-spacing:.19em;
}

.benefit-history-hero p{
  margin:10px 0 2px;
  color:rgba(224,234,240,.82);
  font-size:13px;
}

.benefit-history-hero small{
  color:rgba(203,218,227,.62);
  font-size:10px;
}

/* SUMMARY */

.benefit-history-summary-grid{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.benefit-history-summary-card{
  min-height:100px;
  padding:15px 18px;
  display:grid;
  grid-template-columns:52px 1fr 24px;
  gap:12px;
  align-items:center;
  border:1px solid rgba(99,169,216,.16);
  border-radius:13px;
  background:rgba(8,18,28,.92);
}

.benefit-history-summary-card.total{
  border-color:rgba(239,177,63,.68);
  box-shadow:0 0 20px rgba(239,177,63,.12);
}

.benefit-history-summary-card.available{
  border-color:rgba(61,184,240,.55);
}

.benefit-history-summary-card.used{
  border-color:rgba(195,204,211,.22);
}

.benefit-history-summary-card.expired{
  border-color:rgba(145,95,255,.62);
  background:
    radial-gradient(circle at 10% 50%,rgba(125,76,255,.10),transparent 35%),
    rgba(8,18,28,.92);
}

.benefit-history-summary-icon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:10px;
  font-size:27px;
}

.benefit-history-summary-card.total .benefit-history-summary-icon{
  color:#f2bb3f;
  background:rgba(239,177,63,.08);
}

.benefit-history-summary-card.available .benefit-history-summary-icon{
  color:#59c8ff;
  background:rgba(64,184,239,.08);
}

.benefit-history-summary-card.used .benefit-history-summary-icon{
  color:#e2e8ec;
  background:rgba(255,255,255,.05);
}

.benefit-history-summary-card.expired .benefit-history-summary-icon{
  color:#a889ff;
  background:rgba(135,95,255,.08);
}

.benefit-history-summary-card small{
  display:block;
  color:#edf4f7;
  font-size:11px;
  font-weight:700;
}

.benefit-history-summary-card em{
  display:block;
  margin-top:2px;
  color:rgba(203,217,226,.52);
  font-size:8.5px;
  font-style:normal;
  letter-spacing:.12em;
}

.benefit-history-summary-card strong{
  display:block;
  margin-top:4px;
  color:#f4f7f9;
  font-size:28px;
  line-height:1;
}

.benefit-history-summary-card > b{
  color:#dde8ee;
  font-size:22px;
  font-weight:400;
}

.benefit-history-summary-card.total > b{
  color:#f0ba40;
}

/* FILTERS */

.benefit-history-filters{
  margin-top:12px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1.02fr;
  gap:10px;
}

.benefit-history-filters button,
.benefit-history-filters label{
  min-height:58px;
  padding:0 13px;
  display:grid;
  grid-template-columns:36px 1fr 18px;
  gap:9px;
  align-items:center;
  border:1px solid rgba(91,164,211,.17);
  border-radius:11px;
  color:#edf4f7;
  background:rgba(8,18,28,.91);
}

.benefit-history-filters button > span,
.benefit-history-filters label > span{
  color:#e5edf2;
  font-size:22px;
}

.benefit-history-filters small{
  display:block;
  color:rgba(202,216,225,.58);
  font-size:8.5px;
}

.benefit-history-filters strong{
  display:block;
  margin-top:3px;
  font-size:11px;
}

.benefit-history-filters button > b{
  color:#dbe7ed;
  font-size:15px;
  font-weight:400;
}

.benefit-history-filters label{
  grid-template-columns:32px 1fr;
}

.benefit-history-filters input{
  width:100%;
  border:0;
  outline:0;
  color:#e7eff4;
  background:transparent;
  font-size:10px;
}

/* TABLE */

.benefit-history-table-card{
  margin-top:12px;
  overflow-x:auto;
  border:1px solid rgba(92,165,212,.18);
  border-radius:13px;
  background:rgba(7,17,26,.95);
}

.benefit-history-table-row{
  min-width:1120px;
  min-height:51px;
  padding:0 12px;
  display:grid;
  grid-template-columns:34px 1.2fr 1.35fr 1.25fr 1fr 1.05fr .92fr 1fr;
  gap:10px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
  color:rgba(221,230,236,.78);
  font-size:9.5px;
}

.benefit-history-table-row:last-child{
  border-bottom:0;
}

.benefit-history-table-row.head{
  min-height:37px;
  color:rgba(195,210,220,.58);
  font-size:9px;
}

.benefit-history-table-row > span:nth-child(2){
  color:#edf3f6;
}

.benefit-history-table-row small{
  color:rgba(196,212,221,.50);
  font-size:8px;
}

.benefit-history-table-row button{
  border:0;
  color:#e9b43f;
  background:transparent;
  font-size:9.5px;
  cursor:pointer;
}

.history-status{
  display:inline-flex;
  min-height:24px;
  padding:0 9px;
  align-items:center;
  border:1px solid;
  border-radius:999px;
  font-size:9px;
  font-weight:500;
  white-space:nowrap;
}

.history-status.available{
  color:#50dfbd;
  border-color:rgba(63,218,188,.50);
}

.history-status.active{
  color:#62c8ff;
  border-color:rgba(77,188,246,.48);
}

.history-status.used{
  color:#d7dee3;
  border-color:rgba(209,220,226,.28);
}

.history-status.expired{
  color:#ff6666;
  border-color:rgba(255,70,70,.52);
}

/* BOTTOM */

.benefit-history-bottom{
  margin-top:12px;
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(320px,.75fr);
  gap:12px;
}

.benefit-history-timeline-card,
.benefit-history-note-card{
  border:1px solid rgba(91,165,212,.17);
  border-radius:13px;
  background:rgba(8,18,28,.93);
}

.benefit-history-timeline-card{
  padding:12px 15px 14px;
}

.benefit-history-timeline-card > header{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.benefit-history-timeline-card > header > span{
  color:#48c8ff;
  font-size:22px;
}

.benefit-history-timeline-card h2,
.benefit-history-note-card h2{
  margin:0;
  font-size:15px;
}

.benefit-history-timeline-card header small{
  display:block;
  margin-top:2px;
  color:rgba(200,214,223,.54);
  font-size:8.5px;
}

.benefit-history-timeline{
  margin-top:12px;
  display:grid;
  grid-template-columns:1fr 24px 1fr 24px 1fr 24px 1fr;
  gap:6px;
  align-items:center;
}

.benefit-history-timeline > b{
  color:#d6e2e8;
  text-align:center;
  font-size:20px;
  font-weight:400;
}

.benefit-history-timeline .stage{
  display:grid;
  grid-template-columns:46px 1fr;
  gap:9px;
  align-items:center;
}

.benefit-history-timeline .stage > span{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(197,211,219,.30);
  border-radius:50%;
  color:#dce7ed;
  font-size:19px;
}

.benefit-history-timeline .issued > span{
  color:#f0ba40;
  border-color:rgba(239,177,63,.62);
  box-shadow:0 0 15px rgba(239,177,63,.12);
}

.benefit-history-timeline .active > span{
  color:#58c8ff;
  border-color:rgba(68,187,241,.55);
  box-shadow:0 0 15px rgba(68,187,241,.10);
}

.benefit-history-timeline strong{
  display:block;
  font-size:10px;
}

.benefit-history-timeline small{
  display:block;
  margin-top:3px;
  color:rgba(198,213,222,.54);
  font-size:8px;
}

/* NOTE */

.benefit-history-note-card{
  padding:12px 14px 10px;
}

.benefit-history-note-card > header{
  display:flex;
  gap:9px;
  align-items:center;
}

.benefit-history-note-card > header span{
  color:#4fc9ff;
  font-size:19px;
}

.benefit-history-note-card ul{
  margin:9px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:5px;
}

.benefit-history-note-card li{
  position:relative;
  padding-left:14px;
  color:rgba(208,221,229,.66);
  font-size:9px;
  line-height:1.35;
}

.benefit-history-note-card li::before{
  content:"•";
  position:absolute;
  left:0;
  color:#f0b940;
}

.benefit-history-note-card > button{
  width:100%;
  min-height:34px;
  margin-top:9px;
  border:1px solid rgba(239,177,63,.72);
  border-radius:7px;
  color:#e9b63e;
  background:transparent;
  font-size:9.5px;
}

/* FOOTER */

.benefit-history-footer{
  min-height:34px;
  padding:6px 2px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:rgba(206,220,228,.70);
  font-size:9.5px;
}

.benefit-history-footer > div{
  display:flex;
  gap:6px;
}

.benefit-history-footer button{
  min-width:34px;
  height:28px;
  border:1px solid rgba(190,205,214,.22);
  border-radius:7px;
  color:#dce6ec;
  background:rgba(8,18,28,.85);
  font-size:9px;
}

.benefit-history-footer button.active{
  color:#f1bd45;
  border-color:rgba(239,177,63,.64);
}

/* LANGUAGE */

#benefitHistoryView .customer-top-actions button[aria-label="Ngôn ngữ"]{
  min-width:64px !important;
  height:34px !important;
  padding:0 10px !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  border-radius:10px !important;
}

/* RESPONSIVE */

@media (max-width:1180px){
  .benefit-history-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .benefit-history-filters{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .benefit-history-bottom{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .benefit-history-content{
    width:calc(100% - 28px);
  }

  .benefit-history-hero h1{
    font-size:38px;
  }

  .benefit-history-summary-grid,
  .benefit-history-filters{
    grid-template-columns:1fr;
  }

  .benefit-history-timeline{
    grid-template-columns:1fr;
  }

  .benefit-history-timeline > b{
    display:none;
  }
}


/* =========================================================
   SCREEN 16 — CUS MY PURCHASES
   ========================================================= */

body:has(#myPurchasesView.active) > .topbar{
  display:none;
}

body:has(#myPurchasesView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#myPurchasesView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 78% 8%,rgba(46,130,195,.08),transparent 28%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#myPurchasesView.active{
  display:block;
}

#myPurchasesView .customer-shell{
  min-height:100vh;
}

.my-purchases-content{
  width:min(1420px,calc(100% - 48px));
  margin:0 auto;
  padding:20px 0 34px;
}

/* BREADCRUMB */

.my-purchases-breadcrumb{
  min-height:30px;
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(201,216,227,.56);
  font-size:11px;
}

.my-purchases-breadcrumb strong{
  color:#7fd8ff;
}

/* HERO */

.my-purchases-hero{
  position:relative;
  min-height:175px;
  margin-top:5px;
  padding:24px 30px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border:1px solid rgba(104,174,222,.10);
  border-radius:18px;
  background:
    linear-gradient(90deg,
      rgba(4,11,18,.97) 0%,
      rgba(4,11,18,.80) 36%,
      rgba(4,11,18,.18) 74%,
      rgba(4,11,18,.05) 100%),
    url("./assets/customer/home/hero-customer-home.webp") center 46% / cover no-repeat;
}

.my-purchases-hero h1{
  margin:0;
  font-size:50px;
  line-height:.98;
  letter-spacing:-1.3px;
}

.my-purchases-hero > div > span{
  display:block;
  margin-top:8px;
  color:#dfeaf1;
  font-size:15px;
  letter-spacing:.19em;
}

.my-purchases-hero p{
  margin:10px 0 2px;
  color:rgba(224,234,240,.82);
  font-size:13px;
}

.my-purchases-hero small{
  color:rgba(203,218,227,.62);
  font-size:10px;
}

/* SUMMARY */

.purchase-summary-grid{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.purchase-summary-card{
  min-height:100px;
  padding:15px 18px;
  display:grid;
  grid-template-columns:52px 1fr 24px;
  gap:12px;
  align-items:center;
  border:1px solid rgba(99,169,216,.16);
  border-radius:13px;
  background:rgba(8,18,28,.92);
}

.purchase-summary-card.all{
  border-color:rgba(239,177,63,.68);
  box-shadow:0 0 20px rgba(239,177,63,.12);
}

.purchase-summary-card.processing{
  border-color:rgba(61,184,240,.55);
}

.purchase-summary-card.delivery{
  border-color:rgba(53,196,239,.55);
}

.purchase-summary-card.completed{
  border-color:rgba(53,210,150,.50);
}

.purchase-summary-icon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:10px;
  font-size:27px;
}

.purchase-summary-card.all .purchase-summary-icon{
  color:#f2bb3f;
  background:rgba(239,177,63,.08);
}

.purchase-summary-card.processing .purchase-summary-icon{
  color:#5ec7ff;
  background:rgba(64,184,239,.08);
}

.purchase-summary-card.delivery .purchase-summary-icon{
  color:#4fd4ff;
  background:rgba(48,197,240,.08);
}

.purchase-summary-card.completed .purchase-summary-icon{
  color:#66e0a9;
  background:rgba(54,208,148,.08);
}

.purchase-summary-card small{
  display:block;
  color:#edf4f7;
  font-size:11px;
  font-weight:700;
}

.purchase-summary-card em{
  display:block;
  margin-top:2px;
  color:rgba(203,217,226,.52);
  font-size:8.5px;
  font-style:normal;
  letter-spacing:.12em;
}

.purchase-summary-card strong{
  display:block;
  margin-top:4px;
  color:#f4f7f9;
  font-size:27px;
  line-height:1;
}

.purchase-summary-card > b{
  color:#dde8ee;
  font-size:22px;
  font-weight:400;
}

.purchase-summary-card.all > b{
  color:#f0ba40;
}

/* FILTERS */

.purchase-filters{
  margin-top:12px;
  display:grid;
  grid-template-columns:1fr 1fr 1.65fr;
  gap:10px;
}

.purchase-filters button,
.purchase-filters label{
  min-height:56px;
  padding:0 13px;
  display:grid;
  grid-template-columns:36px 1fr 18px;
  gap:9px;
  align-items:center;
  border:1px solid rgba(91,164,211,.17);
  border-radius:11px;
  color:#edf4f7;
  background:rgba(8,18,28,.91);
}

.purchase-filters button > span,
.purchase-filters label > span{
  color:#e5edf2;
  font-size:22px;
}

.purchase-filters small{
  display:block;
  color:rgba(202,216,225,.58);
  font-size:8.5px;
}

.purchase-filters strong{
  display:block;
  margin-top:3px;
  font-size:11px;
}

.purchase-filters button > b{
  color:#dbe7ed;
  font-size:15px;
  font-weight:400;
}

.purchase-filters label{
  grid-template-columns:32px 1fr;
}

.purchase-filters input{
  width:100%;
  border:0;
  outline:0;
  color:#e7eff4;
  background:transparent;
  font-size:10px;
}

/* ORDER LIST */

.purchase-list{
  margin-top:12px;
  display:grid;
  gap:8px;
}

.purchase-order-row{
  min-height:100px;
  padding:10px 12px;
  display:grid;
  grid-template-columns:112px minmax(240px,1.25fr) 70px minmax(280px,1.1fr) 170px 210px;
  gap:14px;
  align-items:center;
  border:1px solid rgba(92,165,212,.17);
  border-radius:12px;
  background:rgba(7,17,26,.95);
}

.purchase-product-image{
  height:78px;
  border-radius:9px;
  background-position:center;
  background-size:cover;
}

.purchase-product-image.health{
  background-image:url("./assets/customer/product-discovery/product-technology.webp");
}

.purchase-product-image.wellness{
  background-image:url("./assets/customer/product-discovery/product-health.webp");
}

.purchase-product-image.personal{
  background-image:url("./assets/customer/product-discovery/product-lifestyle.webp");
}

.purchase-product-image.experience{
  background-image:url("./assets/customer/product-discovery/product-services.webp");
}

.purchase-order-info > strong{
  display:block;
  color:#edf4f7;
  font-size:13px;
}

.purchase-order-info > small{
  display:block;
  margin-top:3px;
  color:rgba(203,217,226,.52);
  font-size:8.5px;
}

.purchase-order-info h3{
  margin:5px 0 1px;
  color:#edf4f7;
  font-size:12px;
}

.purchase-order-info p{
  margin:0;
  color:rgba(199,214,223,.58);
  font-size:9px;
}

.purchase-qty small,
.purchase-date small{
  display:block;
  color:rgba(199,214,223,.55);
  font-size:8.5px;
}

.purchase-qty strong,
.purchase-date strong{
  display:block;
  margin-top:4px;
  color:#eef4f7;
  font-size:12px;
}

/* STATUS */

.purchase-progress-area{
  padding:2px 8px;
}

.purchase-status{
  display:inline-flex;
  min-height:25px;
  padding:0 10px;
  align-items:center;
  border:1px solid;
  border-radius:999px;
  font-size:9px;
  font-weight:600;
}

.purchase-status.processing{
  color:#62c8ff;
  border-color:rgba(77,188,246,.50);
}

.purchase-status.delivery{
  color:#4ed5ff;
  border-color:rgba(61,202,242,.50);
}

.purchase-status.completed{
  color:#52dfac;
  border-color:rgba(67,215,166,.52);
}

.purchase-status.cancelled{
  color:#d8dfe4;
  border-color:rgba(211,220,226,.30);
}

/* MINI PROGRESS */

.purchase-mini-progress{
  position:relative;
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  align-items:center;
}

.purchase-mini-progress::before{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  top:50%;
  height:1px;
  background:rgba(176,194,205,.32);
}

.purchase-mini-progress i{
  position:relative;
  z-index:2;
  width:11px;
  height:11px;
  justify-self:start;
  border:1px solid rgba(183,199,209,.58);
  border-radius:50%;
  background:#08121c;
}

.purchase-mini-progress i.active{
  border-color:#e7ae3d;
  background:#e7ae3d;
  box-shadow:0 0 10px rgba(231,174,61,.28);
}

.purchase-mini-progress.stage-3 i.active{
  border-color:#f1bc40;
  background:#f1bc40;
}

.purchase-mini-progress.completed i.active{
  border-color:#44d7b4;
  background:#44d7b4;
  box-shadow:0 0 9px rgba(68,215,180,.20);
}

.purchase-mini-progress.completed::before{
  background:#44d7b4;
}

.purchase-progress-labels{
  margin-top:5px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:4px;
  color:rgba(193,209,219,.54);
  font-size:7.5px;
}

/* ACTIONS */

.purchase-actions{
  display:grid;
  gap:7px;
}

.purchase-actions button{
  min-height:34px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:1px solid rgba(194,207,215,.34);
  border-radius:7px;
  color:#e1ebf0;
  background:transparent;
  font-size:9.5px;
}

.purchase-actions button.primary{
  color:#e9b43e;
  border-color:rgba(239,177,63,.76);
}

/* FOOTER */

.purchase-footer{
  min-height:36px;
  padding:7px 2px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:rgba(206,220,228,.70);
  font-size:9.5px;
}

.purchase-footer > div{
  display:flex;
  gap:6px;
}

.purchase-footer button{
  min-width:34px;
  height:28px;
  border:1px solid rgba(190,205,214,.22);
  border-radius:7px;
  color:#dce6ec;
  background:rgba(8,18,28,.85);
  font-size:9px;
}

.purchase-footer button.active{
  color:#f1bd45;
  border-color:rgba(239,177,63,.64);
}

/* LANGUAGE */

#myPurchasesView .customer-top-actions button[aria-label="Ngôn ngữ"]{
  min-width:64px !important;
  height:34px !important;
  padding:0 10px !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  border-radius:10px !important;
}

/* RESPONSIVE */

@media (max-width:1280px){
  .purchase-order-row{
    grid-template-columns:96px 1fr 58px 1fr 145px 180px;
    gap:10px;
  }
}

@media (max-width:1100px){
  .purchase-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .purchase-filters{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .purchase-filters label{
    grid-column:1/-1;
  }

  .purchase-list{
    overflow-x:auto;
  }

  .purchase-order-row{
    min-width:1120px;
  }
}

@media (max-width:760px){
  .my-purchases-content{
    width:calc(100% - 28px);
  }

  .my-purchases-hero h1{
    font-size:38px;
  }

  .purchase-summary-grid,
  .purchase-filters{
    grid-template-columns:1fr;
  }

  .purchase-filters label{
    grid-column:auto;
  }
}


/* =========================================================
   SCREEN 17 — CUS ORDER DETAIL
   ========================================================= */

body:has(#orderDetailView.active) > .topbar{
  display:none;
}

body:has(#orderDetailView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#orderDetailView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 78% 8%,rgba(46,130,195,.08),transparent 28%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#orderDetailView.active{
  display:block;
}

#orderDetailView .customer-shell{
  min-height:100vh;
}

.order-detail-content{
  width:min(1420px,calc(100% - 48px));
  margin:0 auto;
  padding:20px 0 36px;
}

/* BREADCRUMB */

.order-detail-breadcrumb{
  min-height:30px;
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(201,216,227,.56);
  font-size:11px;
}

.order-detail-breadcrumb strong{
  color:#7fd8ff;
}

/* HERO */

.order-detail-hero{
  position:relative;
  min-height:175px;
  margin-top:5px;
  padding:24px 30px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border:1px solid rgba(104,174,222,.10);
  border-radius:18px;
  background:
    linear-gradient(90deg,
      rgba(4,11,18,.97) 0%,
      rgba(4,11,18,.80) 36%,
      rgba(4,11,18,.18) 74%,
      rgba(4,11,18,.05) 100%),
    url("./assets/customer/home/hero-customer-home.webp") center 46% / cover no-repeat;
}

.order-detail-hero h1{
  margin:0;
  font-size:50px;
  line-height:.98;
  letter-spacing:-1.3px;
}

.order-detail-hero > div > span{
  display:block;
  margin-top:8px;
  color:#dfeaf1;
  font-size:15px;
  letter-spacing:.19em;
}

.order-detail-hero p{
  margin:10px 0 2px;
  color:rgba(224,234,240,.82);
  font-size:13px;
}

.order-detail-hero small{
  color:rgba(203,218,227,.62);
  font-size:10px;
}

/* TOP SUMMARY */

.order-detail-summary{
  margin-top:12px;
  min-height:96px;
  padding:14px 18px;
  display:grid;
  grid-template-columns:1.1fr .95fr 1fr;
  gap:18px;
  align-items:center;
  border:1px solid rgba(63,170,230,.24);
  border-radius:13px;
  background:rgba(8,18,28,.94);
}

.order-detail-code,
.order-detail-date,
.order-detail-status-box{
  min-height:66px;
  display:grid;
  grid-template-columns:58px 1fr;
  gap:12px;
  align-items:center;
}

.order-detail-date,
.order-detail-status-box{
  padding-left:18px;
  border-left:1px solid rgba(255,255,255,.08);
}

.order-detail-code > span,
.order-detail-date > span,
.order-detail-status-box > span{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:11px;
  font-size:25px;
}

.order-detail-code > span{
  color:#f0b83d;
  border:1px solid rgba(239,177,63,.38);
  background:rgba(239,177,63,.06);
}

.order-detail-date > span{
  color:#dce8ee;
  background:rgba(255,255,255,.03);
}

.order-detail-status-box > span{
  color:#edf4f7;
  background:rgba(255,255,255,.03);
}

.order-detail-summary small{
  display:block;
  color:rgba(204,218,226,.58);
  font-size:9px;
  letter-spacing:.08em;
}

.order-detail-summary strong{
  display:block;
  margin-top:4px;
  color:#edf4f7;
  font-size:18px;
}

.order-detail-status-box strong{
  display:inline-flex;
  width:max-content;
  min-height:28px;
  padding:0 12px;
  align-items:center;
  border:1px solid rgba(239,177,63,.74);
  border-radius:999px;
  color:#f0b843;
  background:rgba(239,177,63,.06);
  font-size:11px;
}

.order-detail-status-box em{
  display:block;
  margin-top:4px;
  color:rgba(203,216,225,.55);
  font-size:9px;
  font-style:normal;
}

/* HORIZONTAL PROGRESS */

.order-detail-progress{
  margin-top:10px;
  min-height:66px;
  padding:10px 18px;
  display:grid;
  grid-template-columns:1fr 24px 1fr 24px 1fr 24px 1fr 24px 1fr;
  gap:8px;
  align-items:center;
  border:1px solid rgba(90,163,209,.16);
  border-radius:12px;
  background:rgba(8,18,28,.92);
}

.order-detail-progress > div{
  display:grid;
  grid-template-columns:40px 1fr;
  grid-template-rows:auto auto;
  column-gap:9px;
  align-items:center;
}

.order-detail-progress > div > b{
  grid-row:1/3;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid rgba(184,199,208,.32);
  border-radius:50%;
  color:#dce6ec;
  font-size:15px;
}

.order-detail-progress > div.done > b{
  color:#f0b83e;
  border-color:rgba(239,177,63,.64);
  box-shadow:0 0 13px rgba(239,177,63,.10);
}

.order-detail-progress > div.active > b{
  color:#f0b83e;
  border-color:rgba(239,177,63,.82);
  box-shadow:0 0 17px rgba(239,177,63,.18);
}

.order-detail-progress strong{
  font-size:10px;
}

.order-detail-progress .active strong{
  color:#f0b83e;
}

.order-detail-progress span{
  margin-top:2px;
  color:rgba(194,210,220,.56);
  font-size:8px;
}

.order-detail-progress > i{
  color:#d6e3e9;
  text-align:center;
  font-size:22px;
  font-style:normal;
}

/* MAIN GRID */

.order-detail-main-grid{
  margin-top:10px;
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(340px,.78fr);
  gap:12px;
  align-items:start;
}

.order-detail-products-card,
.order-detail-timeline-card,
.order-detail-info-card{
  border:1px solid rgba(92,165,212,.17);
  border-radius:13px;
  background:rgba(8,18,28,.94);
}

.order-detail-products-card > header,
.order-detail-timeline-card > header,
.order-detail-info-card > header{
  min-height:48px;
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.order-detail-products-card > header > div,
.order-detail-timeline-card > header,
.order-detail-info-card > header{
  display:flex;
  align-items:center;
  gap:10px;
}

.order-detail-products-card > header span,
.order-detail-timeline-card > header span,
.order-detail-info-card > header span{
  color:#4fc9ff;
  font-size:20px;
}

.order-detail-products-card h2,
.order-detail-timeline-card h2,
.order-detail-info-card h2{
  margin:0;
  font-size:15px;
}

.order-detail-products-card header small,
.order-detail-timeline-card header small,
.order-detail-info-card header small{
  display:block;
  margin-top:2px;
  color:rgba(200,214,223,.52);
  font-size:8px;
  letter-spacing:.12em;
}

.order-detail-products-card > header button{
  border:0;
  color:#e9b43f;
  background:transparent;
  font-size:9.5px;
}

/* PRODUCTS */

.order-detail-product-row{
  min-height:112px;
  padding:10px 14px;
  display:grid;
  grid-template-columns:112px minmax(220px,1fr) 72px 190px;
  gap:14px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.order-detail-product-row:last-child{
  border-bottom:0;
}

.order-detail-product-image{
  height:84px;
  border-radius:9px;
  background-position:center;
  background-size:cover;
}

.order-detail-product-image.health{
  background-image:url("./assets/customer/product-discovery/product-technology.webp");
}

.order-detail-product-image.wellness{
  background-image:url("./assets/customer/product-discovery/product-health.webp");
}

.order-detail-product-info > strong{
  display:block;
  color:#edf4f7;
  font-size:12px;
}

.order-detail-product-info > span{
  display:block;
  margin-top:4px;
  color:rgba(202,216,225,.58);
  font-size:9px;
}

.order-detail-product-qty small{
  display:block;
  color:rgba(202,216,225,.54);
  font-size:8.5px;
}

.order-detail-product-qty strong{
  display:block;
  margin-top:4px;
  font-size:12px;
}

.order-detail-product-status > span{
  display:inline-flex;
  min-height:27px;
  padding:0 11px;
  align-items:center;
  border:1px solid rgba(69,190,243,.54);
  border-radius:999px;
  color:#58c9ff;
  font-size:9.5px;
}

.order-detail-product-status small{
  display:block;
  margin-top:5px;
  color:rgba(197,211,220,.52);
  font-size:8px;
}

/* TIMELINE */

.order-detail-timeline{
  padding:8px 14px 12px;
}

.timeline-step{
  position:relative;
  min-height:62px;
  display:grid;
  grid-template-columns:42px 1fr 84px;
  gap:10px;
  align-items:center;
}

.timeline-step:not(:last-child)::after{
  content:"";
  position:absolute;
  left:20px;
  top:42px;
  width:1px;
  height:36px;
  background:rgba(195,210,219,.22);
}

.timeline-step > b{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(185,200,209,.30);
  border-radius:50%;
  color:#dce7ed;
  font-size:14px;
}

.timeline-step.done > b{
  color:#f0b83e;
  border-color:rgba(239,177,63,.60);
}

.timeline-step.active > b{
  color:#f0b83e;
  border-color:rgba(239,177,63,.80);
  box-shadow:0 0 15px rgba(239,177,63,.18);
}

.timeline-step strong{
  display:block;
  font-size:10px;
}

.timeline-step.active strong{
  color:#f0b83e;
}

.timeline-step span{
  display:block;
  margin-top:2px;
  color:rgba(198,213,222,.54);
  font-size:8px;
}

.timeline-step time{
  color:rgba(201,215,224,.58);
  font-size:8px;
  text-align:right;
}

/* BOTTOM GRID */

.order-detail-bottom-grid{
  margin-top:10px;
  display:grid;
  grid-template-columns:1.05fr 1.05fr .95fr .95fr;
  gap:10px;
}

.order-detail-info-card{
  overflow:hidden;
}

.order-detail-info-card > header{
  justify-content:flex-start;
}

.order-detail-info-card.payment > header span,
.order-detail-info-card.delivery > header span{
  color:#42c9ff;
}

.order-detail-info-card.summary > header span,
.order-detail-info-card.benefit > header span{
  color:#f0bc41;
}

.order-detail-info-lines{
  padding:10px 13px;
  display:grid;
  gap:10px;
}

.order-detail-info-lines > div{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
}

.order-detail-info-lines span{
  color:rgba(208,221,229,.66);
  font-size:9px;
}

.order-detail-info-lines strong{
  color:#eef4f7;
  font-size:9.5px;
}

.order-detail-info-lines strong.confirmed{
  color:#4fdfbb;
}

.order-detail-info-lines strong.processing{
  color:#59c9ff;
}

.order-detail-total{
  margin:0 13px;
  padding:11px 0;
  display:flex;
  justify-content:space-between;
  gap:14px;
  border-top:1px solid rgba(255,255,255,.07);
}

.order-detail-total span{
  color:#f0bb3f;
  font-size:11px;
  font-weight:800;
}

.order-detail-total strong{
  color:#f0bb3f;
  font-size:14px;
}

.order-detail-info-card.benefit > button{
  width:calc(100% - 26px);
  min-height:34px;
  margin:0 13px 12px;
  border:1px solid rgba(239,177,63,.72);
  border-radius:7px;
  color:#e9b53e;
  background:transparent;
  font-size:9.5px;
}

/* FOOTER */

.order-detail-footer{
  min-height:46px;
  padding-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.order-detail-footer > div{
  display:flex;
  gap:8px;
}

.order-detail-footer button{
  min-height:36px;
  padding:0 16px;
  border:1px solid rgba(191,205,214,.28);
  border-radius:7px;
  color:#dce7ed;
  background:rgba(8,18,28,.78);
  font-size:9.5px;
}

.order-detail-footer .cancel{
  border-color:rgba(235,82,82,.30);
  color:#e4ebef;
}

.order-detail-footer .track{
  min-width:190px;
  color:rgba(220,230,236,.42);
  background:rgba(255,255,255,.08);
}

/* LANGUAGE */

#orderDetailView .customer-top-actions button[aria-label="Ngôn ngữ"]{
  min-width:64px !important;
  height:34px !important;
  padding:0 10px !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  border-radius:10px !important;
}

/* RESPONSIVE */

@media (max-width:1180px){
  .order-detail-main-grid{
    grid-template-columns:1fr;
  }

  .order-detail-bottom-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:900px){
  .order-detail-summary{
    grid-template-columns:1fr;
  }

  .order-detail-date,
  .order-detail-status-box{
    padding-left:0;
    border-left:0;
    border-top:1px solid rgba(255,255,255,.06);
    padding-top:10px;
  }

  .order-detail-progress{
    grid-template-columns:1fr;
  }

  .order-detail-progress > i{
    display:none;
  }

  .order-detail-product-row{
    grid-template-columns:90px 1fr;
  }
}

@media (max-width:760px){
  .order-detail-content{
    width:calc(100% - 28px);
  }

  .order-detail-hero h1{
    font-size:38px;
  }

  .order-detail-bottom-grid{
    grid-template-columns:1fr;
  }

  .order-detail-footer{
    align-items:stretch;
    flex-direction:column;
  }

  .order-detail-footer > div{
    flex-direction:column;
  }
}


/* SCREEN 17 — FINAL PROPORTION ALIGNMENT */
#orderDetailView .timeline-step{
  min-height:48px;
}

#orderDetailView .timeline-step:not(:last-child)::after{
  top:35px;
  height:27px;
}

#orderDetailView .timeline-step > b{
  width:30px;
  height:30px;
  font-size:12px;
}

#orderDetailView .order-detail-timeline{
  padding:6px 14px 8px;
}

#orderDetailView .timeline-step strong{
  font-size:9.5px;
}

#orderDetailView .timeline-step span,
#orderDetailView .timeline-step time{
  font-size:7.5px;
}


/* =========================================================
   SCREEN 18 — CUS PROFILE
   ========================================================= */

body:has(#profileView.active) > .topbar{
  display:none;
}

body:has(#profileView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#profileView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 78% 8%,rgba(46,130,195,.08),transparent 28%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#profileView.active{
  display:block;
}

#profileView .customer-shell{
  min-height:100vh;
}

.profile-content{
  width:min(1420px,calc(100% - 48px));
  margin:0 auto;
  padding:20px 0 34px;
}

/* BREADCRUMB */

.profile-breadcrumb{
  min-height:30px;
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(201,216,227,.56);
  font-size:11px;
}

.profile-breadcrumb strong{
  color:#e7f0f5;
}

/* HERO */

.profile-hero{
  position:relative;
  min-height:175px;
  margin-top:5px;
  padding:24px 30px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border:1px solid rgba(104,174,222,.10);
  border-radius:18px;
  background:
    linear-gradient(90deg,
      rgba(4,11,18,.97) 0%,
      rgba(4,11,18,.80) 36%,
      rgba(4,11,18,.18) 74%,
      rgba(4,11,18,.05) 100%),
    url("./assets/customer/home/hero-customer-home.webp") center 46% / cover no-repeat;
}

.profile-hero h1{
  margin:0;
  font-size:50px;
  line-height:.98;
  letter-spacing:-1.3px;
}

.profile-hero > div > span{
  display:block;
  margin-top:8px;
  color:#dfeaf1;
  font-size:15px;
  letter-spacing:.19em;
}

.profile-hero p{
  margin:10px 0 2px;
  color:rgba(224,234,240,.82);
  font-size:13px;
}

.profile-hero small{
  color:rgba(203,218,227,.62);
  font-size:10px;
}

/* OVERVIEW */

.profile-overview{
  margin-top:12px;
  min-height:112px;
  padding:14px 18px;
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:18px;
  align-items:center;
  border:1px solid rgba(239,177,63,.66);
  border-radius:14px;
  background:
    radial-gradient(circle at 20% 50%,rgba(239,177,63,.08),transparent 36%),
    rgba(8,18,28,.94);
  box-shadow:0 0 20px rgba(239,177,63,.10);
}

.profile-identity{
  min-height:78px;
  display:grid;
  grid-template-columns:84px 1fr auto;
  gap:14px;
  align-items:center;
}

.profile-avatar-large{
  width:74px;
  height:74px;
  display:grid;
  place-items:center;
  border:2px solid rgba(230,238,243,.85);
  border-radius:50%;
  color:#fff;
  background:
    radial-gradient(circle at 50% 40%,rgba(255,255,255,.20),transparent 36%),
    linear-gradient(180deg,#6f6896,#2a2947);
  font-size:38px;
}

.profile-identity h2{
  margin:0;
  font-size:23px;
}

.profile-identity > div:nth-child(2) > span{
  display:block;
  margin-top:5px;
  color:#e4edf2;
  font-size:11px;
  letter-spacing:.08em;
}

.profile-active-status{
  display:inline-flex;
  min-height:28px;
  padding:0 12px;
  align-items:center;
  border:1px solid rgba(60,220,176,.62);
  border-radius:999px;
  color:#4fe0b8;
  font-size:10px;
  white-space:nowrap;
}

.profile-completeness{
  min-height:78px;
  padding-left:22px;
  border-left:1px solid rgba(255,255,255,.07);
}

.profile-completeness > div:first-child{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.profile-completeness small{
  color:#e8f0f4;
  font-size:10px;
  letter-spacing:.08em;
}

.profile-completeness strong{
  color:#eef4f7;
  font-size:28px;
}

.profile-completeness-bar{
  height:11px;
  margin-top:8px;
  overflow:hidden;
  border:1px solid rgba(190,205,214,.26);
  border-radius:999px;
  background:rgba(255,255,255,.04);
}

.profile-completeness-bar span{
  display:block;
  width:66%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#ffb22f,#ffd261);
}

.profile-completeness p{
  margin:8px 0 0;
  color:rgba(203,217,226,.58);
  font-size:9px;
}

/* INFO GRID */

.profile-info-grid{
  margin-top:10px;
  display:grid;
  grid-template-columns:1.05fr 1.05fr .85fr;
  gap:10px;
}

.profile-card,
.profile-address-card,
.profile-identity-status-card,
.profile-related-card,
.profile-privacy-card{
  border:1px solid rgba(92,165,212,.17);
  border-radius:13px;
  background:rgba(8,18,28,.94);
}

.profile-card{
  overflow:hidden;
}

.profile-card > header{
  min-height:52px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.profile-card > header > div{
  display:flex;
  gap:9px;
  align-items:center;
}

.profile-card > header > div > span{
  color:#47caff;
  font-size:20px;
}

.profile-card h2,
.profile-address-card h2,
.profile-identity-status-card h2,
.profile-related-card h2,
.profile-privacy-card h2{
  margin:0;
  font-size:15px;
}

.profile-card header small,
.profile-address-card header small,
.profile-identity-status-card header small,
.profile-related-card header small,
.profile-privacy-title small{
  display:block;
  margin-top:2px;
  color:rgba(200,214,223,.52);
  font-size:8px;
  letter-spacing:.11em;
}

.profile-card header button{
  min-height:32px;
  padding:0 11px;
  border:1px solid rgba(239,177,63,.72);
  border-radius:7px;
  color:#e9b43e;
  background:transparent;
  font-size:8.5px;
}

/* LINES */

.profile-card-lines{
  padding:5px 12px 9px;
}

.profile-card-lines > div{
  min-height:50px;
  display:grid;
  grid-template-columns:34px 1fr auto;
  gap:10px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.profile-card-lines > div:last-child{
  border-bottom:0;
}

.profile-card-lines > div > span{
  color:#dde7ed;
  font-size:18px;
}

.profile-card-lines small{
  color:rgba(202,216,225,.58);
  font-size:8.5px;
  line-height:1.35;
}

.profile-card-lines strong{
  color:#edf4f7;
  font-size:10px;
}

.profile-card-lines strong.active{
  display:inline-flex;
  width:max-content;
  min-height:24px;
  padding:0 9px;
  align-items:center;
  border:1px solid rgba(58,218,176,.56);
  border-radius:999px;
  color:#4fdfb9;
}

.profile-card-lines b.verified{
  display:inline-flex;
  min-height:24px;
  padding:0 9px;
  align-items:center;
  border:1px solid rgba(58,218,176,.56);
  border-radius:999px;
  color:#4fdfb9;
  font-size:8.5px;
  font-weight:600;
}

/* MIDDLE */

.profile-middle-grid{
  margin-top:10px;
  display:grid;
  grid-template-columns:1.35fr .95fr;
  gap:10px;
}

.profile-address-card,
.profile-identity-status-card{
  min-height:96px;
  padding:12px 14px;
}

.profile-address-card{
  display:grid;
  grid-template-columns:150px 1fr 150px;
  gap:12px;
  align-items:center;
}

.profile-address-card header,
.profile-identity-status-card header{
  display:flex;
  gap:9px;
  align-items:center;
}

.profile-address-card header > span,
.profile-identity-status-card header > span{
  color:#46cbff;
  font-size:22px;
}

.profile-address-empty{
  min-height:58px;
  padding:10px 12px;
  display:flex;
  gap:10px;
  align-items:center;
  border:1px solid rgba(109,175,217,.15);
  border-radius:9px;
  background:rgba(255,255,255,.015);
}

.profile-address-empty > span{
  color:#7793a7;
  font-size:20px;
}

.profile-address-empty p{
  margin:0;
  color:rgba(210,223,231,.65);
  font-size:9px;
}

.profile-address-empty small{
  color:rgba(198,212,221,.48);
  font-size:8px;
}

.profile-address-card > button,
.profile-identity-status-card button{
  min-height:34px;
  padding:0 12px;
  border:1px solid rgba(239,177,63,.74);
  border-radius:7px;
  color:#e9b43d;
  background:transparent;
  font-size:9px;
}

.profile-identity-status-card{
  display:grid;
  grid-template-columns:190px 1fr;
  gap:14px;
  align-items:center;
}

.profile-identity-status-card > div{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:10px;
  align-items:center;
}

.identity-status{
  display:inline-flex;
  min-height:24px;
  padding:0 9px;
  align-items:center;
  border:1px solid rgba(193,204,212,.32);
  border-radius:999px;
  color:#dce5ea;
  background:rgba(255,255,255,.04);
  font-size:8.5px;
}

.profile-identity-status-card p{
  margin:0;
  color:rgba(201,216,225,.58);
  font-size:8.5px;
}

/* RELATED */

.profile-related-card{
  margin-top:10px;
  min-height:80px;
  padding:11px 14px;
  display:grid;
  grid-template-columns:210px 1fr;
  gap:14px;
  align-items:center;
}

.profile-related-card > header{
  display:flex;
  gap:9px;
  align-items:center;
}

.profile-related-card > header > span{
  color:#46cbff;
  font-size:22px;
}

.profile-related-actions{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}

.profile-related-actions button{
  min-height:54px;
  padding:8px 10px;
  display:grid;
  grid-template-columns:36px 1fr 18px;
  gap:8px;
  align-items:center;
  text-align:left;
  border:1px solid rgba(79,176,229,.24);
  border-radius:9px;
  color:#e7f0f5;
  background:rgba(255,255,255,.015);
}

.profile-related-actions button > span{
  color:#f0b943;
  font-size:19px;
}

.profile-related-actions button:nth-child(3) > span,
.profile-related-actions button:nth-child(4) > span{
  color:#4fcaff;
}

.profile-related-actions strong{
  display:block;
  font-size:9.5px;
}

.profile-related-actions small{
  display:block;
  margin-top:2px;
  color:rgba(198,212,221,.52);
  font-size:7.5px;
}

.profile-related-actions b{
  color:#49ccff;
  font-size:18px;
  font-weight:400;
}

/* PRIVACY */

.profile-privacy-card{
  margin-top:10px;
  min-height:64px;
  padding:10px 14px;
  display:grid;
  grid-template-columns:170px 1fr 150px;
  gap:14px;
  align-items:center;
}

.profile-privacy-title{
  display:flex;
  gap:9px;
  align-items:center;
}

.profile-privacy-title > span{
  color:#46cbff;
  font-size:21px;
}

.profile-privacy-card p{
  margin:0;
  color:rgba(207,220,228,.66);
  font-size:9px;
}

.profile-privacy-card p small{
  color:rgba(195,210,220,.48);
  font-size:8px;
}

.profile-privacy-card button{
  min-height:34px;
  border:1px solid rgba(239,177,63,.72);
  border-radius:7px;
  color:#e9b43e;
  background:transparent;
  font-size:9px;
}

/* LANGUAGE */

#profileView .customer-top-actions button[aria-label="Ngôn ngữ"]{
  min-width:64px !important;
  height:34px !important;
  padding:0 10px !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  border-radius:10px !important;
}

/* RESPONSIVE */

@media (max-width:1180px){
  .profile-info-grid{
    grid-template-columns:1fr 1fr;
  }

  .profile-card.account{
    grid-column:1/-1;
  }

  .profile-middle-grid{
    grid-template-columns:1fr;
  }

  .profile-related-card{
    grid-template-columns:1fr;
  }
}

@media (max-width:900px){
  .profile-overview{
    grid-template-columns:1fr;
  }

  .profile-completeness{
    padding-left:0;
    padding-top:12px;
    border-left:0;
    border-top:1px solid rgba(255,255,255,.07);
  }

  .profile-info-grid{
    grid-template-columns:1fr;
  }

  .profile-card.account{
    grid-column:auto;
  }

  .profile-related-actions{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .profile-address-card,
  .profile-identity-status-card,
  .profile-privacy-card{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .profile-content{
    width:calc(100% - 28px);
  }

  .profile-hero h1{
    font-size:38px;
  }

  .profile-identity{
    grid-template-columns:70px 1fr;
  }

  .profile-active-status{
    grid-column:1/-1;
    width:max-content;
  }

  .profile-related-actions{
    grid-template-columns:1fr;
  }
}


/* SCREEN 18 — PROFILE CARD READABILITY ALIGNMENT */
#profileView .profile-card-lines > div > div{
  display:grid;
  grid-template-columns:minmax(120px,1fr) auto;
  align-items:center;
  column-gap:16px;
  width:100%;
}

#profileView .profile-card-lines > div > div small{
  grid-column:1;
}

#profileView .profile-card-lines > div > div strong{
  grid-column:2;
  text-align:right;
  white-space:nowrap;
}

#profileView .profile-card-lines > div > b.verified{
  margin-left:10px;
}

#profileView .profile-card.contact .profile-card-lines > div > div{
  grid-template-columns:minmax(110px,1fr) auto;
}

#profileView .profile-card.account .profile-card-lines > div > div{
  grid-template-columns:minmax(115px,1fr) auto;
}


/* =========================================================
   SCREEN 19 — CUS ACCOUNT SECURITY
   ========================================================= */

body:has(#accountSecurityView.active) > .topbar{
  display:none;
}

body:has(#accountSecurityView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#accountSecurityView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 78% 8%,rgba(46,130,195,.08),transparent 28%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#accountSecurityView.active{
  display:block;
}

#accountSecurityView .customer-shell{
  min-height:100vh;
}

.account-security-content{
  width:min(1420px,calc(100% - 48px));
  margin:0 auto;
  padding:20px 0 34px;
}

/* BREADCRUMB */

.account-security-breadcrumb{
  min-height:30px;
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(201,216,227,.56);
  font-size:11px;
}

.account-security-breadcrumb strong{
  color:#7fd8ff;
}

/* HERO */

.account-security-hero{
  position:relative;
  min-height:175px;
  margin-top:5px;
  padding:24px 30px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border:1px solid rgba(104,174,222,.10);
  border-radius:18px;
  background:
    linear-gradient(90deg,
      rgba(4,11,18,.97) 0%,
      rgba(4,11,18,.80) 36%,
      rgba(4,11,18,.18) 74%,
      rgba(4,11,18,.05) 100%),
    url("./assets/customer/home/hero-customer-home.webp") center 46% / cover no-repeat;
}

.account-security-hero h1{
  margin:0;
  font-size:50px;
  line-height:.98;
  letter-spacing:-1.3px;
}

.account-security-hero > div > span{
  display:block;
  margin-top:8px;
  color:#dfeaf1;
  font-size:15px;
  letter-spacing:.19em;
}

.account-security-hero p{
  margin:10px 0 2px;
  color:rgba(224,234,240,.82);
  font-size:13px;
}

.account-security-hero small{
  color:rgba(203,218,227,.62);
  font-size:10px;
}

/* OVERVIEW */

.security-overview-card{
  margin-top:12px;
  min-height:104px;
  padding:14px 18px;
  display:grid;
  grid-template-columns:1.2fr .85fr .9fr;
  gap:18px;
  align-items:center;
  border:1px solid rgba(239,177,63,.66);
  border-radius:14px;
  background:
    radial-gradient(circle at 18% 50%,rgba(239,177,63,.08),transparent 34%),
    rgba(8,18,28,.94);
  box-shadow:0 0 20px rgba(239,177,63,.10);
}

.security-overview-status{
  display:grid;
  grid-template-columns:76px 1fr;
  gap:14px;
  align-items:center;
}

.security-overview-status > span{
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
  border:2px solid rgba(239,177,63,.80);
  border-radius:18px 18px 24px 24px;
  color:#f0b83e;
  font-size:34px;
  box-shadow:0 0 20px rgba(239,177,63,.18);
}

.security-overview-status small{
  color:#dfe8ed;
  font-size:9px;
  letter-spacing:.10em;
}

.security-overview-status h2{
  margin:4px 0 0;
  font-size:24px;
}

.security-overview-status p{
  margin:4px 0 0;
  color:rgba(205,219,228,.60);
  font-size:9.5px;
}

.security-review{
  min-height:66px;
  padding-left:20px;
  display:grid;
  grid-template-columns:50px 1fr;
  gap:10px;
  align-items:center;
  border-left:1px solid rgba(255,255,255,.07);
}

.security-review > span{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  color:#e5edf2;
  font-size:21px;
  background:rgba(255,255,255,.025);
  border-radius:9px;
}

.security-review small{
  color:rgba(205,219,228,.58);
  font-size:9px;
}

.security-review strong{
  display:block;
  margin-top:4px;
  font-size:13px;
}

.security-shield-visual{
  min-height:74px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:
    radial-gradient(circle at 50% 50%,rgba(50,170,240,.22),transparent 48%),
    linear-gradient(135deg,rgba(31,95,145,.12),rgba(7,18,28,.4));
}

.security-shield-visual span{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border:2px solid rgba(75,195,248,.64);
  border-radius:20px 20px 28px 28px;
  color:#68d0ff;
  font-size:32px;
  box-shadow:0 0 22px rgba(72,194,247,.20);
}

/* GENERIC CARD */

.security-card{
  border:1px solid rgba(92,165,212,.17);
  border-radius:13px;
  background:rgba(8,18,28,.94);
  overflow:hidden;
}

.security-card > header{
  min-height:52px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:9px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.security-card > header > span{
  color:#49caff;
  font-size:20px;
}

.security-card h2{
  margin:0;
  font-size:15px;
}

.security-card header small{
  display:block;
  margin-top:2px;
  color:rgba(200,214,223,.52);
  font-size:8px;
  letter-spacing:.11em;
}

.security-card header button{
  margin-left:auto;
  min-height:30px;
  padding:0 10px;
  border:1px solid rgba(239,177,63,.72);
  border-radius:7px;
  color:#e9b43e;
  background:transparent;
  font-size:8.5px;
}

.security-card header .not-enabled{
  margin-left:auto;
  display:inline-flex;
  min-height:24px;
  padding:0 9px;
  align-items:center;
  border:1px solid rgba(248,76,76,.52);
  border-radius:999px;
  color:#ff6969;
  font-size:8.5px;
  font-weight:600;
}

/* TOP GRID */

.security-top-grid{
  margin-top:10px;
  display:grid;
  grid-template-columns:1fr 1.05fr 1fr;
  gap:10px;
}

/* PASSWORD */

.security-line{
  min-height:74px;
  padding:12px;
  display:grid;
  grid-template-columns:38px 1fr auto auto;
  gap:10px;
  align-items:center;
}

.security-line > span{
  color:#e3edf2;
  font-size:20px;
}

.security-line strong{
  display:block;
  font-size:10px;
}

.security-line small{
  display:block;
  margin-top:2px;
  color:rgba(199,214,223,.54);
  font-size:8px;
}

.security-line > b{
  color:#edf4f7;
  font-size:12px;
  letter-spacing:.18em;
}

.security-line em.active{
  display:inline-flex;
  min-height:24px;
  padding:0 9px;
  align-items:center;
  border:1px solid rgba(60,220,176,.58);
  border-radius:999px;
  color:#4fdfb9;
  font-size:8.5px;
  font-style:normal;
}

.password-card footer,
.sessions-card footer{
  min-height:52px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-top:1px solid rgba(255,255,255,.05);
}

.password-card footer p{
  margin:0;
  color:rgba(200,214,223,.55);
  font-size:8.5px;
}

.password-card footer button,
.sessions-card footer button{
  min-height:32px;
  padding:0 11px;
  border:1px solid rgba(239,177,63,.72);
  border-radius:7px;
  color:#e9b43e;
  background:transparent;
  font-size:8.5px;
}

/* MFA */

.security-method-row,
.security-verify-row,
.session-row{
  min-height:46px;
  padding:7px 12px;
  display:grid;
  gap:9px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.security-method-row{
  grid-template-columns:30px 1fr 38px auto;
}

.security-verify-row{
  grid-template-columns:30px 1fr auto auto;
}

.session-row{
  grid-template-columns:36px 1fr auto auto;
}

.security-method-row > span,
.security-verify-row > span,
.session-row > span{
  color:#e1ebf0;
  font-size:17px;
}

.security-method-row strong,
.security-verify-row strong,
.session-row strong{
  display:block;
  font-size:9.5px;
}

.security-method-row small,
.security-verify-row small,
.session-row small{
  display:block;
  margin-top:2px;
  color:rgba(199,214,223,.52);
  font-size:7.5px;
}

.security-method-row > em,
.security-method-row > b,
.security-verify-row > b,
.session-row > b{
  color:rgba(212,224,231,.66);
  font-size:8px;
  font-style:normal;
  font-weight:500;
}

.security-method-row button{
  min-height:28px;
  padding:0 9px;
  border:1px solid rgba(239,177,63,.70);
  border-radius:7px;
  color:#e9b43e;
  background:transparent;
  font-size:8px;
}

.security-verify-row > em,
.session-row > em{
  display:inline-flex;
  min-height:23px;
  padding:0 8px;
  align-items:center;
  border:1px solid rgba(58,218,176,.54);
  border-radius:999px;
  color:#4fdfb8;
  font-size:8px;
  font-style:normal;
}

/* BOTTOM GRID */

.security-bottom-grid{
  margin-top:10px;
  display:grid;
  grid-template-columns:1.1fr 1.05fr .72fr;
  gap:10px;
}

.sessions-card footer{
  justify-content:flex-start;
}

.sessions-card footer button:first-child{
  border-color:rgba(199,211,219,.30);
  color:#dbe5eb;
}

.activity-card{
  padding-bottom:10px;
}

.security-activity-list{
  padding:8px 12px 3px;
}

.security-activity-list > div{
  min-height:38px;
  display:grid;
  grid-template-columns:26px 1fr auto;
  grid-template-rows:auto auto;
  column-gap:8px;
  align-items:center;
}

.security-activity-list > div > span{
  grid-row:1/3;
  color:#dfe8ed;
  font-size:15px;
}

.security-activity-list strong{
  font-size:9px;
}

.security-activity-list small{
  color:rgba(197,211,220,.52);
  font-size:7.5px;
}

.security-activity-list b{
  grid-row:1/3;
  grid-column:3;
  color:rgba(211,223,230,.52);
  font-size:8px;
}

.security-empty-note{
  margin:4px 12px 0;
  min-height:52px;
  padding:8px 10px;
  display:flex;
  gap:9px;
  align-items:center;
  border:1px solid rgba(92,165,212,.14);
  border-radius:8px;
  background:rgba(255,255,255,.015);
}

.security-empty-note > span{
  color:#8aa0ae;
  font-size:18px;
}

.security-empty-note p{
  margin:0;
  color:rgba(203,216,225,.58);
  font-size:8.5px;
}

.security-empty-note small{
  color:rgba(193,207,217,.45);
  font-size:7.5px;
}

/* SIDE STACK */

.security-side-stack{
  display:grid;
  gap:10px;
}

.alerts-card > div{
  min-height:72px;
  padding:12px;
  display:flex;
  gap:10px;
  align-items:center;
}

.alerts-card > div > span{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid rgba(58,218,176,.48);
  border-radius:50%;
  color:#4fdfb9;
  font-size:17px;
}

.alerts-card p,
.recovery-card p{
  margin:0;
  color:#e7eff3;
  font-size:9px;
  line-height:1.35;
}

.alerts-card small,
.recovery-card small{
  color:rgba(198,212,221,.52);
  font-size:7.5px;
}

.recovery-card header b{
  margin-left:auto;
  color:rgba(216,226,233,.70);
  font-size:8px;
  font-weight:500;
}

.recovery-card > p{
  padding:10px 12px 0;
  color:rgba(203,217,226,.60);
}

.recovery-card > button{
  width:calc(100% - 24px);
  min-height:32px;
  margin:10px 12px 12px;
  border:1px solid rgba(239,177,63,.72);
  border-radius:7px;
  color:#e9b43e;
  background:transparent;
  font-size:8.5px;
}

/* POLICY */

.security-policy-card{
  margin-top:10px;
  min-height:64px;
  padding:10px 14px;
  display:grid;
  grid-template-columns:230px 1fr 170px;
  gap:14px;
  align-items:center;
  border:1px solid rgba(92,165,212,.17);
  border-radius:13px;
  background:rgba(8,18,28,.94);
}

.security-policy-card > div{
  display:flex;
  gap:9px;
  align-items:center;
}

.security-policy-card > div > span{
  color:#48caff;
  font-size:21px;
}

.security-policy-card h2{
  margin:0;
  font-size:14px;
}

.security-policy-card small{
  color:rgba(198,212,221,.52);
  font-size:7.5px;
}

.security-policy-card p{
  margin:0;
  color:rgba(203,217,226,.62);
  font-size:8.5px;
}

.security-policy-card button{
  min-height:34px;
  border:1px solid rgba(239,177,63,.72);
  border-radius:7px;
  color:#e9b43e;
  background:transparent;
  font-size:8.5px;
}

/* LANGUAGE */

#accountSecurityView .customer-top-actions button[aria-label="Ngôn ngữ"]{
  min-width:64px !important;
  height:34px !important;
  padding:0 10px !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  border-radius:10px !important;
}

/* RESPONSIVE */

@media (max-width:1180px){
  .security-top-grid{
    grid-template-columns:1fr 1fr;
  }

  .verification-card{
    grid-column:1/-1;
  }

  .security-bottom-grid{
    grid-template-columns:1fr 1fr;
  }

  .security-side-stack{
    grid-column:1/-1;
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:900px){
  .security-overview-card{
    grid-template-columns:1fr;
  }

  .security-review{
    padding-left:0;
    padding-top:10px;
    border-left:0;
    border-top:1px solid rgba(255,255,255,.07);
  }

  .security-top-grid,
  .security-bottom-grid{
    grid-template-columns:1fr;
  }

  .verification-card,
  .security-side-stack{
    grid-column:auto;
  }

  .security-side-stack{
    grid-template-columns:1fr;
  }

  .security-policy-card{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .account-security-content{
    width:calc(100% - 28px);
  }

  .account-security-hero h1{
    font-size:38px;
  }

  .security-line,
  .security-method-row,
  .security-verify-row,
  .session-row{
    grid-template-columns:32px 1fr;
  }

  .security-line > b,
  .security-line > em,
  .security-method-row > em,
  .security-method-row > b,
  .security-method-row > button,
  .security-verify-row > b,
  .security-verify-row > em,
  .session-row > b,
  .session-row > em{
    grid-column:2;
  }
}


/* =========================================================
   SCREEN 20 — PAR HOME
   ========================================================= */

body:has(#partnerHomeView.active) > .topbar{
  display:none;
}

body:has(#partnerHomeView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#partnerHomeView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 78% 8%,rgba(46,130,195,.08),transparent 28%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#partnerHomeView.active{
  display:block;
}

#partnerHomeView .partner-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:278px minmax(0,1fr);
}

#partnerHomeView .partner-sidebar{
  min-height:100vh;
  padding:20px 20px 24px;
  border-right:1px solid rgba(87,173,228,.18);
  background:
    radial-gradient(circle at 50% 8%,rgba(25,100,155,.10),transparent 30%),
    #06101a;
}

#partnerHomeView .partner-brand{
  min-height:74px;
  padding:0 10px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.07);
}

#partnerHomeView .partner-brand strong{
  color:#f0bd50;
  font-size:24px;
  letter-spacing:.02em;
}

#partnerHomeView .partner-brand span{
  margin-top:4px;
  color:#d4dde4;
  font-size:8px;
  letter-spacing:.28em;
}

#partnerHomeView .partner-nav-label{
  display:block;
  margin:22px 10px 9px;
  color:#dce5ea;
  font-size:10px;
  letter-spacing:.24em;
}

#partnerHomeView .partner-nav{
  display:grid;
  gap:5px;
}

#partnerHomeView .partner-nav-item{
  width:100%;
  min-height:44px;
  padding:0 12px;
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  border:1px solid transparent;
  border-radius:10px;
  color:#d8e2e8;
  background:transparent;
  text-align:left;
}

#partnerHomeView .partner-nav-item span{
  color:#dbe5eb;
  font-size:20px;
}

#partnerHomeView .partner-nav-item strong{
  font-size:13px;
  font-weight:500;
}

#partnerHomeView .partner-nav-item.active{
  border-color:rgba(239,177,63,.70);
  color:#fff;
  background:
    linear-gradient(90deg,rgba(239,177,63,.18),rgba(239,177,63,.03));
  box-shadow:0 0 18px rgba(239,177,63,.10);
}

#partnerHomeView .partner-nav-item.active span{
  color:#f0b63f;
}

#partnerHomeView .partner-support-nav{
  margin-top:2px;
}

#partnerHomeView .partner-sidebar-vision{
  margin-top:18px;
  min-height:206px;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid rgba(92,165,212,.16);
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(5,15,25,.18),rgba(5,15,25,.62)),
    url("./assets/customer/home/hero-customer-home.webp") center / cover no-repeat;
}

#partnerHomeView .partner-sidebar-vision span{
  color:#f1f4f6;
  font-size:10px;
  line-height:1.55;
  letter-spacing:.18em;
}

#partnerHomeView .partner-sidebar-vision small{
  margin-top:18px;
  color:#d8e1e7;
  font-size:9px;
  letter-spacing:.12em;
}

#partnerHomeView .partner-main{
  min-width:0;
}

#partnerHomeView .partner-topbar{
  min-height:84px;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid rgba(92,165,212,.12);
  background:rgba(4,11,18,.96);
}

#partnerHomeView .partner-search{
  width:min(730px,62%);
  min-height:48px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(92,165,212,.18);
  border-radius:12px;
  background:rgba(13,32,48,.66);
}

#partnerHomeView .partner-search span{
  font-size:22px;
  color:#dce7ec;
}

#partnerHomeView .partner-search input{
  width:100%;
  border:0;
  outline:0;
  color:#eaf0f4;
  background:transparent;
  font-size:13px;
}

#partnerHomeView .partner-search input::placeholder{
  color:rgba(224,234,240,.72);
}

#partnerHomeView .partner-top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

#partnerHomeView .partner-top-actions button{
  min-width:42px;
  height:42px;
  border:1px solid rgba(92,165,212,.16);
  border-radius:12px;
  color:#e1ebf0;
  background:rgba(10,24,36,.72);
}

#partnerHomeView .partner-top-actions button[aria-label="Ngôn ngữ"]{
  min-width:74px;
  padding:0 10px;
  font-size:11px;
  font-weight:700;
}

#partnerHomeView .partner-user{
  display:flex;
  align-items:center;
  gap:10px;
  padding-left:10px;
}

#partnerHomeView .partner-avatar{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  color:#d9e5ff;
  font-size:22px;
  background:linear-gradient(180deg,#8cabd9,#436590);
}

#partnerHomeView .partner-user strong{
  display:block;
  font-size:13px;
}

#partnerHomeView .partner-user small{
  display:block;
  color:rgba(210,222,230,.58);
  font-size:9px;
}

.partner-home-content{
  width:min(1420px,calc(100% - 48px));
  margin:0 auto;
  padding:0 0 28px;
}

/* HERO */

.partner-home-hero{
  position:relative;
  min-height:150px;
  padding:24px 30px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.05);
  background:
    linear-gradient(90deg,
      rgba(4,11,18,.98) 0%,
      rgba(4,11,18,.84) 37%,
      rgba(4,11,18,.14) 73%,
      rgba(4,11,18,.03) 100%),
    url("./assets/customer/home/hero-customer-home.webp") center 46% / cover no-repeat;
}

.partner-home-hero > div{
  max-width:720px;
}

.partner-home-hero > div > small:first-child{
  color:#d9e5eb;
  font-size:10px;
}

.partner-home-hero h1{
  margin:5px 0 0;
  font-size:38px;
  line-height:1;
  letter-spacing:.01em;
}

.partner-home-hero > div > span{
  display:block;
  margin-top:6px;
  color:#f0f3f5;
  font-size:14px;
  letter-spacing:.16em;
}

.partner-home-hero p{
  margin:9px 0 2px;
  color:rgba(225,235,240,.82);
  font-size:11px;
}

.partner-home-hero > div > small:last-child{
  color:rgba(203,218,227,.60);
  font-size:9px;
}

/* OVERVIEW */

.partner-overview-card{
  margin-top:0;
  min-height:86px;
  display:grid;
  grid-template-columns:1.15fr 1fr .85fr;
  border:1px solid rgba(92,165,212,.17);
  border-radius:0 0 13px 13px;
  overflow:hidden;
  background:rgba(8,18,28,.96);
}

.partner-user-summary,
.partner-role-summary,
.partner-status-summary{
  min-height:86px;
  padding:12px 18px;
  display:flex;
  align-items:center;
  gap:12px;
}

.partner-role-summary,
.partner-status-summary{
  border-left:1px solid rgba(255,255,255,.07);
}

.partner-user-circle{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border:2px solid rgba(239,177,63,.72);
  border-radius:50%;
  color:#e8eff5;
  background:linear-gradient(180deg,#7997c4,#334d71);
}

.partner-user-summary h2{
  margin:0;
  font-size:20px;
}

.partner-user-summary small{
  color:#dbe4e9;
  font-size:9px;
  letter-spacing:.12em;
}

.partner-active-pill{
  margin-left:auto;
  min-height:27px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(55,220,174,.62);
  border-radius:999px;
  color:#4ee1b9;
  font-size:9px;
}

.partner-role-summary > span,
.partner-status-summary > span{
  font-size:26px;
  color:#dfe8ed;
}

.partner-role-summary small,
.partner-status-summary small{
  display:block;
  color:rgba(202,215,224,.62);
  font-size:8px;
  letter-spacing:.10em;
}

.partner-role-summary strong,
.partner-status-summary strong{
  display:block;
  margin-top:3px;
  font-size:10px;
}

.partner-role-summary b{
  display:block;
  margin-top:2px;
  font-size:10px;
  color:#dbe6eb;
}

.partner-status-summary{
  background:
    linear-gradient(90deg,rgba(21,116,163,.06),rgba(19,111,162,.17));
}

.partner-status-summary > span{
  color:#58deb8;
}

.partner-status-summary strong{
  color:#4ee1b9;
  font-size:15px;
}

.partner-status-summary > b{
  margin-left:auto;
  color:#dfe8ed;
  font-size:24px;
}

/* GENERIC PANEL */

.partner-panel{
  border:1px solid rgba(92,165,212,.17);
  border-radius:13px;
  background:rgba(8,18,28,.95);
  overflow:hidden;
}

.partner-panel > header{
  min-height:46px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.partner-panel > header > div{
  display:flex;
  align-items:center;
  gap:9px;
}

.partner-panel > header span{
  color:#45caff;
  font-size:20px;
}

.partner-panel h2{
  margin:0;
  font-size:13px;
  letter-spacing:.04em;
}

.partner-panel h2 small{
  display:block;
  margin-top:2px;
  color:rgba(199,213,222,.55);
  font-size:7.5px;
  letter-spacing:.12em;
}

.partner-panel button{
  min-height:30px;
  padding:0 11px;
  border:1px solid rgba(239,177,63,.72);
  border-radius:7px;
  color:#e9b43e;
  background:transparent;
  font-size:8px;
}

/* ROW 1 */

.partner-row-one{
  margin-top:8px;
  display:grid;
  grid-template-columns:1.7fr .95fr;
  gap:8px;
}

.benefits-panel header button{
  border:0;
}

.partner-benefit-grid{
  padding:8px 10px 10px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}

.partner-benefit-card{
  min-height:95px;
  padding:12px;
  display:grid;
  grid-template-columns:36px 1fr 18px;
  gap:8px;
  align-items:center;
  border:1px solid rgba(92,165,212,.22);
  border-radius:10px;
  background:rgba(255,255,255,.018);
}

.partner-benefit-card > span{
  font-size:25px;
}

.partner-benefit-card strong{
  display:block;
  font-size:8.5px;
}

.partner-benefit-card small{
  display:block;
  margin-top:3px;
  color:rgba(209,221,228,.58);
  font-size:7.5px;
}

.partner-benefit-card b{
  display:block;
  margin-top:8px;
  font-size:12px;
}

.partner-benefit-card em{
  font-style:normal;
  font-size:20px;
}

.partner-benefit-card.shopping{
  border-color:rgba(239,177,63,.75);
  box-shadow:inset 0 0 18px rgba(239,177,63,.06);
}

.partner-benefit-card.shopping > span,
.partner-benefit-card.shopping em{
  color:#f0b63f;
}

.partner-benefit-card.commission{
  border-color:rgba(49,176,245,.70);
}

.partner-benefit-card.commission > span,
.partner-benefit-card.commission em{
  color:#43c4ff;
}

.partner-benefit-card.withdrawable{
  border-color:rgba(64,220,178,.65);
}

.partner-benefit-card.withdrawable > span,
.partner-benefit-card.withdrawable em{
  color:#4eddb9;
}

.partner-benefit-card.incentives{
  border-color:rgba(172,88,239,.65);
}

.partner-benefit-card.incentives > span,
.partner-benefit-card.incentives em{
  color:#bb7bff;
}

.performance-panel{
  position:relative;
}

.performance-metrics{
  padding:10px 12px 8px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 18px;
}

.performance-metrics > div{
  display:flex;
  justify-content:space-between;
  gap:10px;
}

.performance-metrics small{
  color:rgba(204,217,226,.62);
  font-size:7.5px;
  line-height:1.45;
}

.performance-metrics strong{
  font-size:10px;
}

.performance-panel > button{
  width:calc(100% - 24px);
  margin:4px 12px 10px;
}

/* ROW 2 */

.partner-row-two{
  margin-top:8px;
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:8px;
}

.referral-panel{
  padding:12px;
  display:grid;
  grid-template-columns:1.05fr 1.35fr;
  grid-template-rows:auto auto;
  gap:10px 12px;
}

.referral-intro{
  display:flex;
  gap:12px;
}

.referral-intro > span{
  color:#44c9ff;
  font-size:34px;
}

.referral-intro h2{
  margin:0;
  font-size:13px;
}

.referral-intro h2 small{
  display:block;
  margin-top:2px;
  font-size:7.5px;
}

.referral-intro p{
  margin:8px 0 2px;
  color:rgba(215,226,233,.72);
  font-size:8.5px;
  line-height:1.4;
}

.referral-intro > div > small{
  color:rgba(196,210,220,.48);
  font-size:7.5px;
}

.referral-tools{
  display:grid;
  grid-template-columns:1.2fr 1fr .85fr;
  gap:6px;
}

.referral-tools > div{
  min-height:65px;
  padding:8px;
  border:1px solid rgba(92,165,212,.14);
  border-radius:8px;
  background:rgba(255,255,255,.015);
}

.referral-tools span{
  color:#55c9ff;
  font-size:16px;
}

.referral-tools small{
  display:block;
  margin-top:2px;
  color:rgba(201,214,223,.52);
  font-size:6.5px;
}

.referral-tools strong{
  display:block;
  margin-top:4px;
  overflow:hidden;
  color:#e8eef2;
  font-size:7.5px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.referral-tools button{
  min-height:22px;
  margin-top:5px;
  padding:0 6px;
  font-size:6.5px;
}

.wide-partner-button{
  grid-column:2;
  width:100%;
}

.commission-flow{
  position:relative;
  padding:16px 12px 8px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
}

.commission-flow::before{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  top:24px;
  height:1px;
  background:rgba(151,174,190,.45);
}

.commission-flow > div{
  position:relative;
  z-index:1;
  text-align:center;
}

.commission-flow span{
  display:grid;
  width:16px;
  height:16px;
  margin:0 auto 5px;
  place-items:center;
  border:1px solid #8497a5;
  border-radius:50%;
  color:#7d8e9b;
  background:#08121c;
  font-size:5px;
}

.commission-flow .active span{
  border-color:#f0b63f;
  color:#f0b63f;
}

.commission-flow strong{
  display:block;
  font-size:6.5px;
}

.commission-flow small{
  display:block;
  margin-top:2px;
  color:rgba(201,214,223,.48);
  font-size:6.5px;
}

.commission-footer{
  margin:4px 10px 10px;
  display:grid;
  grid-template-columns:1fr 165px;
  gap:8px;
}

.commission-footer > div{
  min-height:40px;
  padding:7px 10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border:1px solid rgba(92,165,212,.14);
  border-radius:8px;
}

.commission-footer small{
  color:rgba(203,216,225,.54);
  font-size:7px;
}

.commission-footer strong{
  font-size:10px;
}

/* ROW 3 */

.partner-row-three{
  margin-top:8px;
  display:grid;
  grid-template-columns:1.25fr .95fr .7fr .6fr;
  gap:8px;
}

.incentive-body{
  min-height:92px;
  padding:10px 12px;
  display:grid;
  grid-template-columns:1fr 110px;
  gap:10px;
  align-items:center;
}

.incentive-body p{
  margin:0 0 6px;
  display:flex;
  justify-content:space-between;
  gap:8px;
  color:rgba(211,222,229,.70);
  font-size:7.5px;
}

.incentive-body strong{
  color:#e8eef2;
}

.incentive-body a{
  color:#58c9ff;
  text-decoration:none;
}

.incentive-body > span{
  color:#7795ff;
  font-size:60px;
  text-align:center;
}

.incentive-panel > button,
.recent-panel > button,
.verification-panel > button,
.partner-state-panel > button{
  width:calc(100% - 20px);
  margin:0 10px 10px;
}

.recent-empty{
  min-height:92px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
}

.recent-empty > span{
  color:#dce6eb;
  font-size:28px;
}

.recent-empty p{
  margin:0;
  color:#dce6eb;
  font-size:8.5px;
}

.recent-empty small{
  color:rgba(200,214,223,.48);
  font-size:7px;
}

.verification-body,
.partner-state-body{
  min-height:62px;
  padding:10px;
  display:flex;
  gap:9px;
  align-items:center;
}

.verification-body > span{
  color:#4eddb9;
  font-size:22px;
}

.partner-state-body > span{
  color:#4eddb9;
  font-size:28px;
}

.verification-body strong,
.partner-state-body strong{
  display:block;
  font-size:10px;
}

.verification-body small,
.partner-state-body small{
  color:rgba(199,213,222,.50);
  font-size:7px;
}

.verification-panel > p{
  margin:0 10px 8px;
  color:rgba(200,214,223,.58);
  font-size:7px;
  line-height:1.4;
}

/* QUICK ACTIONS */

.partner-quick-actions{
  margin-top:8px;
  min-height:56px;
  padding:6px 8px;
  display:grid;
  grid-template-columns:175px repeat(5,1fr);
  gap:6px;
  align-items:stretch;
  border:1px solid rgba(92,165,212,.17);
  border-radius:12px;
  background:rgba(8,18,28,.95);
}

.quick-title{
  display:flex;
  gap:8px;
  align-items:center;
}

.quick-title > span{
  color:#49caff;
  font-size:22px;
}

.quick-title strong{
  display:block;
  font-size:9px;
}

.quick-title small{
  color:rgba(201,214,223,.50);
  font-size:6.5px;
}

.partner-quick-actions > button{
  padding:7px 9px;
  display:grid;
  grid-template-columns:28px 1fr 16px;
  gap:7px;
  align-items:center;
  border:1px solid rgba(92,165,212,.16);
  border-radius:8px;
  color:#e1eaf0;
  background:rgba(255,255,255,.012);
  text-align:left;
}

.partner-quick-actions > button > span,
.partner-quick-actions > button > b{
  color:#44c9ff;
  font-size:16px;
}

.partner-quick-actions > button strong{
  display:block;
  font-size:8px;
}

.partner-quick-actions > button small{
  display:block;
  margin-top:2px;
  color:rgba(201,214,223,.50);
  font-size:6.5px;
}

/* TRANSPARENCY */

.partner-transparency{
  margin-top:8px;
  min-height:56px;
  padding:9px 12px;
  display:grid;
  grid-template-columns:220px 1fr 190px;
  gap:14px;
  align-items:center;
  border:1px solid rgba(92,165,212,.17);
  border-radius:12px;
  background:rgba(8,18,28,.95);
}

.partner-transparency > div{
  display:flex;
  align-items:center;
  gap:9px;
}

.partner-transparency > div > span{
  color:#49caff;
  font-size:21px;
}

.partner-transparency strong{
  display:block;
  font-size:9px;
}

.partner-transparency small{
  color:rgba(199,213,222,.50);
  font-size:6.5px;
}

.partner-transparency p{
  margin:0;
  color:rgba(207,219,227,.62);
  font-size:7.5px;
  line-height:1.35;
}

.partner-transparency button{
  min-height:32px;
  border:1px solid rgba(239,177,63,.72);
  border-radius:7px;
  color:#e9b43e;
  background:transparent;
  font-size:8px;
}

/* RESPONSIVE */

@media (max-width:1250px){
  #partnerHomeView .partner-shell{
    grid-template-columns:230px minmax(0,1fr);
  }

  .partner-benefit-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .partner-row-three{
    grid-template-columns:1fr 1fr;
  }

  .partner-quick-actions{
    grid-template-columns:1fr 1fr 1fr;
  }

  .quick-title{
    grid-column:1/-1;
  }
}

@media (max-width:980px){
  #partnerHomeView .partner-shell{
    grid-template-columns:1fr;
  }

  #partnerHomeView .partner-sidebar{
    display:none;
  }

  .partner-overview-card,
  .partner-row-one,
  .partner-row-two,
  .partner-row-three{
    grid-template-columns:1fr;
  }

  .partner-user-summary,
  .partner-role-summary,
  .partner-status-summary{
    border-left:0;
    border-top:1px solid rgba(255,255,255,.05);
  }

  .partner-transparency{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .partner-home-content{
    width:calc(100% - 28px);
  }

  #partnerHomeView .partner-topbar{
    padding:12px 14px;
  }

  #partnerHomeView .partner-search{
    width:100%;
  }

  #partnerHomeView .partner-top-actions{
    display:none;
  }

  .partner-home-hero h1{
    font-size:30px;
  }

  .partner-benefit-grid,
  .referral-tools,
  .partner-quick-actions{
    grid-template-columns:1fr;
  }

  .referral-panel{
    grid-template-columns:1fr;
  }

  .wide-partner-button{
    grid-column:auto;
  }

  .commission-flow{
    grid-template-columns:1fr;
    gap:7px;
  }

  .commission-flow::before{
    display:none;
  }

  .commission-footer{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   SCREEN 20 — TYPOGRAPHY READABILITY BALANCE
   ========================================================= */

#partnerHomeView .partner-home-hero > div > small:first-child{
  font-size:11px;
}

#partnerHomeView .partner-home-hero p{
  font-size:12px;
}

#partnerHomeView .partner-home-hero > div > small:last-child{
  font-size:10px;
}

#partnerHomeView .partner-role-summary small,
#partnerHomeView .partner-status-summary small{
  font-size:9px;
}

#partnerHomeView .partner-role-summary strong{
  font-size:11px;
}

#partnerHomeView .partner-role-summary b{
  font-size:11px;
}

#partnerHomeView .partner-panel h2{
  font-size:14px;
}

#partnerHomeView .partner-panel h2 small{
  font-size:8.5px;
}

#partnerHomeView .partner-panel button{
  font-size:9px;
}

#partnerHomeView .partner-benefit-card strong{
  font-size:9.5px;
}

#partnerHomeView .partner-benefit-card small{
  font-size:8.5px;
}

#partnerHomeView .partner-benefit-card b{
  font-size:13px;
}

#partnerHomeView .performance-metrics small{
  font-size:8.5px;
}

#partnerHomeView .performance-metrics strong{
  font-size:11px;
}

#partnerHomeView .referral-intro h2{
  font-size:14px;
}

#partnerHomeView .referral-intro h2 small{
  font-size:8.5px;
}

#partnerHomeView .referral-intro p{
  font-size:9.5px;
}

#partnerHomeView .referral-intro > div > small{
  font-size:8.5px;
}

#partnerHomeView .referral-tools small{
  font-size:7.5px;
}

#partnerHomeView .referral-tools strong{
  font-size:8.5px;
}

#partnerHomeView .referral-tools button{
  font-size:7.5px;
}

#partnerHomeView .commission-flow strong{
  font-size:7.5px;
}

#partnerHomeView .commission-flow small{
  font-size:7.5px;
}

#partnerHomeView .commission-footer small{
  font-size:8px;
}

#partnerHomeView .commission-footer strong{
  font-size:11px;
}

#partnerHomeView .incentive-body p{
  font-size:8.5px;
}

#partnerHomeView .recent-empty p{
  font-size:9.5px;
}

#partnerHomeView .recent-empty small{
  font-size:8px;
}

#partnerHomeView .verification-body strong,
#partnerHomeView .partner-state-body strong{
  font-size:11px;
}

#partnerHomeView .verification-body small,
#partnerHomeView .partner-state-body small{
  font-size:8px;
}

#partnerHomeView .verification-panel > p{
  font-size:8px;
}

#partnerHomeView .quick-title strong{
  font-size:10px;
}

#partnerHomeView .quick-title small{
  font-size:7.5px;
}

#partnerHomeView .partner-quick-actions > button strong{
  font-size:9px;
}

#partnerHomeView .partner-quick-actions > button small{
  font-size:7.5px;
}

#partnerHomeView .partner-transparency strong{
  font-size:10px;
}

#partnerHomeView .partner-transparency small{
  font-size:7.5px;
}

#partnerHomeView .partner-transparency p{
  font-size:8.5px;
}

#partnerHomeView .partner-transparency button{
  font-size:9px;
}


/* SCREEN 20 — FINAL TYPOGRAPHY SCALE */

#partnerHomeView .partner-panel h2{
  font-size:15px;
}

#partnerHomeView .partner-panel h2 small{
  font-size:9.5px;
}

#partnerHomeView .partner-benefit-card strong{
  font-size:10.5px;
}

#partnerHomeView .partner-benefit-card small{
  font-size:9px;
}

#partnerHomeView .performance-metrics small{
  font-size:9.5px;
}

#partnerHomeView .referral-intro h2{
  font-size:15px;
}

#partnerHomeView .referral-intro h2 small{
  font-size:9px;
}

#partnerHomeView .referral-intro p{
  font-size:10px;
}

#partnerHomeView .referral-intro > div > small{
  font-size:9px;
}

#partnerHomeView .referral-tools small{
  font-size:8.5px;
}

#partnerHomeView .referral-tools strong{
  font-size:9.5px;
}

#partnerHomeView .commission-flow strong{
  font-size:8.5px;
}

#partnerHomeView .commission-flow small{
  font-size:8px;
}

#partnerHomeView .commission-footer small{
  font-size:9px;
}

#partnerHomeView .incentive-body p{
  font-size:9.5px;
}

#partnerHomeView .recent-empty p{
  font-size:10px;
}

#partnerHomeView .recent-empty small{
  font-size:8.5px;
}

#partnerHomeView .verification-body strong,
#partnerHomeView .partner-state-body strong{
  font-size:12px;
}

#partnerHomeView .verification-body small,
#partnerHomeView .partner-state-body small{
  font-size:8.5px;
}

#partnerHomeView .verification-panel > p{
  font-size:9px;
}

#partnerHomeView .quick-title strong{
  font-size:11px;
}

#partnerHomeView .quick-title small{
  font-size:8px;
}

#partnerHomeView .partner-quick-actions > button strong{
  font-size:10px;
}

#partnerHomeView .partner-quick-actions > button small{
  font-size:8px;
}

#partnerHomeView .partner-transparency strong{
  font-size:11px;
}

#partnerHomeView .partner-transparency small{
  font-size:8px;
}

#partnerHomeView .partner-transparency p{
  font-size:9px;
}


/* SCREEN 20 — BILINGUAL SIDEBAR LABELS */

#partnerHomeView .partner-nav-item{
  grid-template-columns:38px 1fr;
  align-items:center;
}

#partnerHomeView .partner-nav-item strong{
  display:block;
  font-size:13px;
  line-height:1.15;
  font-weight:600;
}

#partnerHomeView .partner-nav-item small{
  display:block;
  margin-top:3px;
  color:rgba(203,216,225,.50);
  font-size:8px;
  line-height:1;
  font-weight:500;
  letter-spacing:.02em;
}

#partnerHomeView .partner-nav-item.active small{
  color:rgba(240,182,63,.72);
}


/* =========================================================
   SCREEN 21 — PAR MY BENEFITS
   ========================================================= */

body:has(#partnerBenefitsView.active) > .topbar{
  display:none;
}

body:has(#partnerBenefitsView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#partnerBenefitsView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 78% 8%,rgba(46,130,195,.08),transparent 28%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#partnerBenefitsView.active{
  display:block;
}

#partnerBenefitsView .partner-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:278px minmax(0,1fr);
}

#partnerBenefitsView .partner-sidebar{
  min-height:100vh;
  padding:20px 20px 24px;
  border-right:1px solid rgba(87,173,228,.18);
  background:
    radial-gradient(circle at 50% 8%,rgba(25,100,155,.10),transparent 30%),
    #06101a;
}

#partnerBenefitsView .partner-brand{
  min-height:74px;
  padding:0 10px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.07);
}

#partnerBenefitsView .partner-brand strong{
  color:#f0bd50;
  font-size:24px;
  letter-spacing:.02em;
}

#partnerBenefitsView .partner-brand span{
  margin-top:4px;
  color:#d4dde4;
  font-size:8px;
  letter-spacing:.28em;
}

#partnerBenefitsView .partner-nav-label{
  display:block;
  margin:22px 10px 9px;
  color:#dce5ea;
  font-size:10px;
  letter-spacing:.24em;
}

#partnerBenefitsView .partner-nav{
  display:grid;
  gap:5px;
}

#partnerBenefitsView .partner-nav-item{
  width:100%;
  min-height:46px;
  padding:0 12px;
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  border:1px solid transparent;
  border-radius:10px;
  color:#d8e2e8;
  background:transparent;
  text-align:left;
}

#partnerBenefitsView .partner-nav-item > span{
  color:#dbe5eb;
  font-size:20px;
}

#partnerBenefitsView .partner-nav-item strong{
  display:block;
  font-size:13px;
  line-height:1.15;
  font-weight:600;
}

#partnerBenefitsView .partner-nav-item small{
  display:block;
  margin-top:3px;
  color:rgba(203,216,225,.50);
  font-size:8px;
  line-height:1;
}

#partnerBenefitsView .partner-nav-item.active{
  border-color:rgba(239,177,63,.70);
  color:#fff;
  background:
    linear-gradient(90deg,rgba(239,177,63,.18),rgba(239,177,63,.03));
  box-shadow:0 0 18px rgba(239,177,63,.10);
}

#partnerBenefitsView .partner-nav-item.active > span{
  color:#f0b63f;
}

#partnerBenefitsView .partner-nav-item.active small{
  color:rgba(240,182,63,.72);
}

#partnerBenefitsView .partner-sidebar-vision{
  margin-top:18px;
  min-height:206px;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid rgba(92,165,212,.16);
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(5,15,25,.18),rgba(5,15,25,.62)),
    url("./assets/customer/home/hero-customer-home.webp") center / cover no-repeat;
}

#partnerBenefitsView .partner-sidebar-vision span{
  color:#f1f4f6;
  font-size:10px;
  line-height:1.55;
  letter-spacing:.18em;
}

#partnerBenefitsView .partner-sidebar-vision small{
  margin-top:18px;
  color:#d8e1e7;
  font-size:9px;
  letter-spacing:.12em;
}

/* TOPBAR */

#partnerBenefitsView .partner-main{
  min-width:0;
}

#partnerBenefitsView .partner-topbar{
  min-height:84px;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid rgba(92,165,212,.12);
  background:rgba(4,11,18,.96);
}

#partnerBenefitsView .partner-search{
  width:min(730px,62%);
  min-height:48px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(92,165,212,.18);
  border-radius:12px;
  background:rgba(13,32,48,.66);
}

#partnerBenefitsView .partner-search span{
  font-size:22px;
  color:#dce7ec;
}

#partnerBenefitsView .partner-search input{
  width:100%;
  border:0;
  outline:0;
  color:#eaf0f4;
  background:transparent;
  font-size:13px;
}

#partnerBenefitsView .partner-search input::placeholder{
  color:rgba(224,234,240,.72);
}

#partnerBenefitsView .partner-top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

#partnerBenefitsView .partner-top-actions button{
  min-width:42px;
  height:42px;
  border:1px solid rgba(92,165,212,.16);
  border-radius:12px;
  color:#e1ebf0;
  background:rgba(10,24,36,.72);
}

#partnerBenefitsView .partner-top-actions button[aria-label="Ngôn ngữ"]{
  min-width:74px;
  padding:0 10px;
  font-size:11px;
  font-weight:700;
}

#partnerBenefitsView .partner-user{
  display:flex;
  align-items:center;
  gap:10px;
  padding-left:10px;
}

#partnerBenefitsView .partner-avatar{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  color:#d9e5ff;
  font-size:22px;
  background:linear-gradient(180deg,#8cabd9,#436590);
}

#partnerBenefitsView .partner-user strong{
  display:block;
  font-size:13px;
}

#partnerBenefitsView .partner-user small{
  display:block;
  color:rgba(210,222,230,.58);
  font-size:9px;
}

/* CONTENT */

.partner-benefits-content{
  width:min(1420px,calc(100% - 48px));
  margin:0 auto;
  padding:12px 0 28px;
}

.partner-benefits-breadcrumb{
  min-height:28px;
  display:flex;
  align-items:center;
  gap:9px;
  color:rgba(202,215,224,.58);
  font-size:10px;
}

.partner-benefits-breadcrumb strong{
  color:#6ed5ff;
}

.partner-benefits-hero{
  position:relative;
  min-height:165px;
  padding:22px 28px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border-radius:16px;
  background:
    linear-gradient(90deg,
      rgba(4,11,18,.98) 0%,
      rgba(4,11,18,.82) 36%,
      rgba(4,11,18,.14) 73%,
      rgba(4,11,18,.02) 100%),
    url("./assets/customer/home/hero-customer-home.webp") center 46% / cover no-repeat;
}

.partner-benefits-hero h1{
  margin:0;
  font-size:48px;
  line-height:.98;
  letter-spacing:-.02em;
}

.partner-benefits-hero > div > span{
  display:block;
  margin-top:7px;
  color:#eef3f6;
  font-size:15px;
  letter-spacing:.18em;
}

.partner-benefits-hero p{
  margin:9px 0 2px;
  color:rgba(224,234,240,.82);
  font-size:12px;
}

.partner-benefits-hero small{
  color:rgba(203,218,227,.60);
  font-size:10px;
}

/* MAIN + SIDE */

.partner-benefits-layout{
  margin-top:10px;
  display:grid;
  grid-template-columns:minmax(0,1.72fr) minmax(320px,.58fr);
  gap:10px;
}

.partner-benefits-main{
  min-width:0;
}

.partner-benefits-side{
  display:grid;
  align-content:start;
  gap:10px;
}

/* TYPE CARDS */

.partner-benefit-type-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}

.partner-benefit-type-card{
  min-height:104px;
  padding:12px;
  display:grid;
  grid-template-columns:42px 1fr;
  grid-template-rows:1fr auto;
  gap:7px 10px;
  border:1px solid rgba(92,165,212,.24);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.partner-benefit-type-card > span{
  grid-row:1/3;
  align-self:center;
  font-size:30px;
}

.partner-benefit-type-card strong{
  display:block;
  font-size:11px;
}

.partner-benefit-type-card small{
  display:block;
  margin-top:3px;
  color:rgba(203,216,225,.56);
  font-size:9px;
}

.partner-benefit-type-card b{
  display:block;
  margin-top:9px;
  font-size:14px;
}

.partner-benefit-type-card button{
  justify-self:end;
  border:0;
  color:#e8b43f;
  background:transparent;
  font-size:9px;
}

.partner-benefit-type-card.shopping{
  border-color:rgba(239,177,63,.78);
  box-shadow:inset 0 0 20px rgba(239,177,63,.07);
}

.partner-benefit-type-card.shopping > span{
  color:#f0b63f;
}

.partner-benefit-type-card.commission{
  border-color:rgba(51,179,246,.72);
}

.partner-benefit-type-card.commission > span{
  color:#43c4ff;
}

.partner-benefit-type-card.withdrawable{
  border-color:rgba(63,220,178,.68);
}

.partner-benefit-type-card.withdrawable > span{
  color:#4eddb9;
}

.partner-benefit-type-card.incentive{
  border-color:rgba(172,88,239,.66);
}

.partner-benefit-type-card.incentive > span{
  color:#bb7bff;
}

/* STATUS STRIP */

.partner-benefit-status-grid{
  margin-top:8px;
  min-height:80px;
  padding:10px 12px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0;
  border:1px solid rgba(92,165,212,.17);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.partner-benefit-status-grid > div{
  padding:0 12px;
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  border-right:1px solid rgba(255,255,255,.06);
}

.partner-benefit-status-grid > div:last-child{
  border-right:0;
}

.partner-benefit-status-grid span{
  grid-row:1/4;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid currentColor;
  border-radius:50%;
  font-size:14px;
}

.partner-benefit-status-grid strong{
  font-size:10px;
}

.partner-benefit-status-grid small{
  color:rgba(198,212,221,.52);
  font-size:8px;
}

.partner-benefit-status-grid b{
  margin-top:3px;
  font-size:12px;
}

.partner-benefit-status-grid .active{
  color:#4eddb9;
}

.partner-benefit-status-grid .available{
  color:#50c8ff;
}

.partner-benefit-status-grid .pending{
  color:#f0ba40;
}

.partner-benefit-status-grid .expired{
  color:#ff6868;
}

.partner-benefit-status-grid .used{
  color:#d3dce2;
}

/* FILTERS */

.partner-benefit-filters{
  margin-top:8px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1.15fr;
  gap:8px;
}

.partner-benefit-filters button,
.partner-benefit-filters label{
  min-height:56px;
  padding:0 12px;
  display:grid;
  grid-template-columns:32px 1fr 18px;
  align-items:center;
  border:1px solid rgba(92,165,212,.17);
  border-radius:10px;
  color:#e9f0f4;
  background:rgba(8,18,28,.95);
  text-align:left;
}

.partner-benefit-filters button > span,
.partner-benefit-filters label > span{
  color:#e7eef2;
  font-size:20px;
}

.partner-benefit-filters small{
  display:block;
  color:rgba(202,216,225,.56);
  font-size:7.5px;
}

.partner-benefit-filters strong{
  display:block;
  margin-top:2px;
  font-size:10px;
}

.partner-benefit-filters em{
  display:block;
  margin-top:1px;
  color:rgba(191,207,216,.44);
  font-size:7px;
  font-style:normal;
}

.partner-benefit-filters button > b{
  font-size:14px;
  font-weight:400;
}

.partner-benefit-filters label{
  grid-template-columns:32px 1fr;
}

.partner-benefit-filters input{
  width:100%;
  border:0;
  outline:0;
  color:#e9f0f4;
  background:transparent;
  font-size:10px;
}

/* ACTIVITY TABLE */

.partner-benefit-activity{
  margin-top:8px;
  overflow:hidden;
  border:1px solid rgba(92,165,212,.17);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.partner-benefit-activity > header{
  min-height:46px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.partner-benefit-activity > header > div{
  display:flex;
  align-items:center;
  gap:9px;
}

.partner-benefit-activity > header span{
  color:#49caff;
  font-size:20px;
}

.partner-benefit-activity h2{
  margin:0;
  font-size:14px;
}

.partner-benefit-activity h2 small{
  display:block;
  margin-top:2px;
  color:rgba(201,214,223,.52);
  font-size:8px;
  letter-spacing:.10em;
}

.partner-benefit-activity > header button{
  border:0;
  color:#dbe5eb;
  background:transparent;
  font-size:9px;
}

.partner-benefit-table{
  overflow-x:auto;
}

.partner-benefit-row{
  min-width:1020px;
  min-height:46px;
  padding:0 10px;
  display:grid;
  grid-template-columns:34px 1.18fr 1.18fr 1.08fr .9fr 1fr .82fr .85fr;
  gap:8px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
  font-size:9px;
}

.partner-benefit-row.head{
  min-height:34px;
  color:rgba(194,209,219,.58);
  font-size:8px;
}

.partner-benefit-row:last-child{
  border-bottom:0;
}

.partner-benefit-row > span{
  min-width:0;
}

.partner-benefit-row > span:nth-child(2){
  color:#edf3f6;
}

.partner-benefit-row small{
  display:block;
  margin-top:2px;
  color:rgba(194,209,219,.48);
  font-size:7.5px;
}

.partner-benefit-row .status{
  display:inline-flex;
  min-height:24px;
  padding:0 8px;
  align-items:center;
  border:1px solid currentColor;
  border-radius:999px;
  font-size:8px;
  font-weight:600;
}

.partner-benefit-row .status.available{
  color:#4eddb9;
}

.partner-benefit-row .status.active{
  color:#50c8ff;
}

.partner-benefit-row .status.pending{
  color:#f0ba40;
}

.partner-benefit-row .status.used{
  color:#d3dce2;
}

.partner-benefit-row button{
  border:0;
  color:#e9b43e;
  background:transparent;
  font-size:8.5px;
}

/* BOTTOM */

.partner-benefits-bottom{
  margin-top:8px;
  display:grid;
  grid-template-columns:1.2fr .9fr;
  gap:8px;
}

.partner-benefit-journey,
.partner-benefit-recent{
  border:1px solid rgba(92,165,212,.17);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.partner-benefit-journey > header,
.partner-benefit-recent > header{
  min-height:44px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:9px;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.partner-benefit-journey > header > span,
.partner-benefit-recent > header > span{
  color:#49caff;
  font-size:20px;
}

.partner-benefit-journey h2,
.partner-benefit-recent h2{
  margin:0;
  font-size:13px;
}

.partner-benefit-journey h2 small,
.partner-benefit-recent h2 small{
  display:block;
  margin-top:2px;
  color:rgba(200,214,223,.52);
  font-size:7.5px;
}

.partner-benefit-journey-flow{
  min-height:88px;
  padding:12px;
  display:grid;
  grid-template-columns:1fr 20px 1fr 20px 1fr 20px 1fr 20px 1.2fr;
  align-items:center;
}

.partner-benefit-journey-flow > div{
  text-align:center;
}

.partner-benefit-journey-flow > div > span{
  width:36px;
  height:36px;
  margin:0 auto 5px;
  display:grid;
  place-items:center;
  border:1px solid rgba(92,165,212,.40);
  border-radius:50%;
  color:#50c8ff;
  font-size:16px;
}

.partner-benefit-journey-flow > div:nth-of-type(3) > span{
  color:#f0ba40;
  border-color:rgba(239,177,63,.65);
}

.partner-benefit-journey-flow > div:nth-of-type(4) > span{
  color:#4eddb9;
  border-color:rgba(64,220,178,.60);
}

.partner-benefit-journey-flow strong{
  display:block;
  font-size:8px;
}

.partner-benefit-journey-flow small{
  display:block;
  margin-top:2px;
  color:rgba(197,211,220,.50);
  font-size:7px;
}

.partner-benefit-journey-flow > b{
  color:#d3dfe6;
  text-align:center;
  font-size:18px;
  font-weight:400;
}

.partner-benefit-recent > div{
  min-height:88px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.partner-benefit-recent > div > span{
  color:#dce7ec;
  font-size:28px;
}

.partner-benefit-recent p{
  margin:0;
  color:#dfe7ec;
  font-size:9px;
}

.partner-benefit-recent small{
  color:rgba(196,211,220,.48);
  font-size:7.5px;
}

/* RIGHT SIDE */

.partner-benefit-side-card{
  overflow:hidden;
  border:1px solid rgba(92,165,212,.17);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.partner-benefit-side-card > header{
  min-height:46px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:9px;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.partner-benefit-side-card > header > span{
  color:#49caff;
  font-size:20px;
}

.partner-benefit-side-card h2{
  margin:0;
  font-size:13px;
}

.partner-benefit-side-card h2 small{
  display:block;
  margin-top:2px;
  color:rgba(201,214,223,.52);
  font-size:7.5px;
  letter-spacing:.10em;
}

.selected-benefit-heading{
  min-height:68px;
  padding:10px 12px;
  display:grid;
  grid-template-columns:42px 1fr auto;
  gap:9px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.selected-benefit-heading > span{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid rgba(172,88,239,.60);
  border-radius:10px;
  color:#bb7bff;
  font-size:22px;
}

.selected-benefit-heading strong{
  display:block;
  font-size:10px;
}

.selected-benefit-heading small{
  display:block;
  margin-top:2px;
  color:rgba(202,216,225,.52);
  font-size:8px;
}

.selected-benefit-heading > b{
  min-height:24px;
  padding:0 8px;
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(239,177,63,.70);
  border-radius:999px;
  color:#f0ba40;
  font-size:8px;
}

.selected-benefit-lines{
  padding:6px 12px;
}

.selected-benefit-lines > div{
  min-height:34px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.selected-benefit-lines > div:last-child{
  border-bottom:0;
}

.selected-benefit-lines span{
  color:rgba(206,218,226,.68);
  font-size:8.5px;
}

.selected-benefit-lines strong{
  color:#eaf1f4;
  font-size:8.5px;
  text-align:right;
}

.partner-benefit-side-card > button{
  width:calc(100% - 24px);
  min-height:34px;
  margin:8px 12px 12px;
  border:1px solid rgba(239,177,63,.72);
  border-radius:7px;
  color:#e9b43e;
  background:transparent;
  font-size:8.5px;
}

.partner-benefit-side-card.policy p{
  margin:0;
  padding:12px;
  color:rgba(206,219,227,.66);
  font-size:9px;
  line-height:1.45;
}

.partner-benefit-side-card.traceability{
  padding-bottom:8px;
}

.partner-benefit-side-card.traceability > div{
  min-height:32px;
  padding:0 12px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
}

.partner-benefit-side-card.traceability > div span{
  color:rgba(204,216,225,.62);
  font-size:8.5px;
}

.partner-benefit-side-card.traceability > div strong{
  color:#e9f0f4;
  font-size:8.5px;
}

/* RESPONSIVE */

@media (max-width:1250px){
  #partnerBenefitsView .partner-shell{
    grid-template-columns:230px minmax(0,1fr);
  }

  .partner-benefit-type-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .partner-benefit-status-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .partner-benefit-status-grid > div{
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.05);
  }
}

@media (max-width:1050px){
  .partner-benefits-layout{
    grid-template-columns:1fr;
  }

  .partner-benefits-side{
    grid-template-columns:repeat(3,1fr);
  }
}

@media (max-width:900px){
  #partnerBenefitsView .partner-shell{
    grid-template-columns:1fr;
  }

  #partnerBenefitsView .partner-sidebar{
    display:none;
  }

  .partner-benefit-filters{
    grid-template-columns:repeat(2,1fr);
  }

  .partner-benefits-side{
    grid-template-columns:1fr;
  }

  .partner-benefits-bottom{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .partner-benefits-content{
    width:calc(100% - 28px);
  }

  #partnerBenefitsView .partner-topbar{
    padding:12px 14px;
  }

  #partnerBenefitsView .partner-search{
    width:100%;
  }

  #partnerBenefitsView .partner-top-actions{
    display:none;
  }

  .partner-benefits-hero h1{
    font-size:38px;
  }

  .partner-benefit-type-grid,
  .partner-benefit-status-grid,
  .partner-benefit-filters{
    grid-template-columns:1fr;
  }

  .partner-benefit-journey-flow{
    grid-template-columns:1fr;
    gap:8px;
  }

  .partner-benefit-journey-flow > b{
    display:none;
  }
}


/* SCREEN 21 — READABILITY & PROPORTION BALANCE */

#partnerBenefitsView .partner-benefits-hero h1{
  font-size:52px;
}

#partnerBenefitsView .partner-benefits-hero p{
  font-size:13px;
}

#partnerBenefitsView .partner-benefits-hero small{
  font-size:10.5px;
}

#partnerBenefitsView .partner-benefit-type-card{
  min-height:112px;
}

#partnerBenefitsView .partner-benefit-type-card strong{
  font-size:12px;
}

#partnerBenefitsView .partner-benefit-type-card small{
  font-size:9.5px;
}

#partnerBenefitsView .partner-benefit-type-card button{
  font-size:9.5px;
}

#partnerBenefitsView .partner-benefit-status-grid{
  min-height:88px;
}

#partnerBenefitsView .partner-benefit-status-grid strong{
  font-size:11px;
}

#partnerBenefitsView .partner-benefit-status-grid small{
  font-size:8.5px;
}

#partnerBenefitsView .partner-benefit-status-grid b{
  font-size:13px;
}

#partnerBenefitsView .partner-benefit-filters button,
#partnerBenefitsView .partner-benefit-filters label{
  min-height:62px;
}

#partnerBenefitsView .partner-benefit-filters small{
  font-size:8.5px;
}

#partnerBenefitsView .partner-benefit-filters strong{
  font-size:11px;
}

#partnerBenefitsView .partner-benefit-filters em{
  font-size:7.5px;
}

#partnerBenefitsView .partner-benefit-filters input{
  font-size:11px;
}

#partnerBenefitsView .partner-benefit-activity > header{
  min-height:50px;
}

#partnerBenefitsView .partner-benefit-activity h2{
  font-size:15px;
}

#partnerBenefitsView .partner-benefit-activity h2 small{
  font-size:8.5px;
}

#partnerBenefitsView .partner-benefit-row{
  min-height:52px;
  font-size:10px;
}

#partnerBenefitsView .partner-benefit-row.head{
  min-height:38px;
  font-size:9px;
}

#partnerBenefitsView .partner-benefit-row small{
  font-size:8px;
}

#partnerBenefitsView .partner-benefit-row .status{
  min-height:26px;
  font-size:8.5px;
}

#partnerBenefitsView .partner-benefit-row button{
  font-size:9px;
}

#partnerBenefitsView .partner-benefit-journey > header,
#partnerBenefitsView .partner-benefit-recent > header{
  min-height:48px;
}

#partnerBenefitsView .partner-benefit-journey h2,
#partnerBenefitsView .partner-benefit-recent h2{
  font-size:14px;
}

#partnerBenefitsView .partner-benefit-journey h2 small,
#partnerBenefitsView .partner-benefit-recent h2 small{
  font-size:8px;
}

#partnerBenefitsView .partner-benefit-journey-flow{
  min-height:100px;
}

#partnerBenefitsView .partner-benefit-journey-flow strong{
  font-size:8.5px;
}

#partnerBenefitsView .partner-benefit-journey-flow small{
  font-size:7.5px;
}

#partnerBenefitsView .partner-benefit-recent > div{
  min-height:100px;
}

#partnerBenefitsView .partner-benefit-recent p{
  font-size:10px;
}

#partnerBenefitsView .partner-benefit-recent small{
  font-size:8px;
}

#partnerBenefitsView .partner-benefit-side-card > header{
  min-height:50px;
}

#partnerBenefitsView .partner-benefit-side-card h2{
  font-size:14px;
}

#partnerBenefitsView .partner-benefit-side-card h2 small{
  font-size:8px;
}

#partnerBenefitsView .selected-benefit-heading{
  min-height:74px;
}

#partnerBenefitsView .selected-benefit-heading strong{
  font-size:11px;
}

#partnerBenefitsView .selected-benefit-heading small{
  font-size:8.5px;
}

#partnerBenefitsView .selected-benefit-lines > div{
  min-height:38px;
}

#partnerBenefitsView .selected-benefit-lines span,
#partnerBenefitsView .selected-benefit-lines strong{
  font-size:9.5px;
}

#partnerBenefitsView .partner-benefit-side-card.policy p{
  font-size:10px;
}

#partnerBenefitsView .partner-benefit-side-card.traceability > div{
  min-height:36px;
}

#partnerBenefitsView .partner-benefit-side-card.traceability > div span,
#partnerBenefitsView .partner-benefit-side-card.traceability > div strong{
  font-size:9.5px;
}


/* =========================================================
   SCREEN 22 — PAR REFERRAL
   ========================================================= */

body:has(#partnerReferralView.active) > .topbar{
  display:none;
}

body:has(#partnerReferralView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#partnerReferralView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 78% 8%,rgba(46,130,195,.08),transparent 28%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#partnerReferralView.active{
  display:block;
}

#partnerReferralView .partner-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:278px minmax(0,1fr);
}

#partnerReferralView .partner-sidebar{
  min-height:100vh;
  padding:20px 20px 24px;
  border-right:1px solid rgba(87,173,228,.18);
  background:
    radial-gradient(circle at 50% 8%,rgba(25,100,155,.10),transparent 30%),
    #06101a;
}

#partnerReferralView .partner-brand{
  min-height:74px;
  padding:0 10px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.07);
}

#partnerReferralView .partner-brand strong{
  color:#f0bd50;
  font-size:24px;
}

#partnerReferralView .partner-brand span{
  margin-top:4px;
  color:#d4dde4;
  font-size:8px;
  letter-spacing:.28em;
}

#partnerReferralView .partner-nav-label{
  display:block;
  margin:22px 10px 9px;
  color:#dce5ea;
  font-size:10px;
  letter-spacing:.24em;
}

#partnerReferralView .partner-nav{
  display:grid;
  gap:5px;
}

#partnerReferralView .partner-nav-item{
  width:100%;
  min-height:46px;
  padding:0 12px;
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  border:1px solid transparent;
  border-radius:10px;
  color:#d8e2e8;
  background:transparent;
  text-align:left;
}

#partnerReferralView .partner-nav-item > span{
  color:#dbe5eb;
  font-size:20px;
}

#partnerReferralView .partner-nav-item strong{
  display:block;
  font-size:13px;
  font-weight:600;
  line-height:1.15;
}

#partnerReferralView .partner-nav-item small{
  display:block;
  margin-top:3px;
  color:rgba(203,216,225,.50);
  font-size:8px;
}

#partnerReferralView .partner-nav-item.active{
  border-color:rgba(239,177,63,.70);
  color:#fff;
  background:
    linear-gradient(90deg,rgba(239,177,63,.18),rgba(239,177,63,.03));
  box-shadow:0 0 18px rgba(239,177,63,.10);
}

#partnerReferralView .partner-nav-item.active > span{
  color:#f0b63f;
}

#partnerReferralView .partner-nav-item.active small{
  color:rgba(240,182,63,.72);
}

#partnerReferralView .partner-sidebar-vision{
  margin-top:18px;
  min-height:206px;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid rgba(92,165,212,.16);
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(5,15,25,.18),rgba(5,15,25,.62)),
    url("./assets/customer/home/hero-customer-home.webp") center / cover no-repeat;
}

#partnerReferralView .partner-sidebar-vision span{
  color:#f1f4f6;
  font-size:10px;
  line-height:1.55;
  letter-spacing:.18em;
}

#partnerReferralView .partner-sidebar-vision small{
  margin-top:18px;
  color:#d8e1e7;
  font-size:9px;
}

/* TOPBAR */

#partnerReferralView .partner-main{
  min-width:0;
}

#partnerReferralView .partner-topbar{
  min-height:84px;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid rgba(92,165,212,.12);
  background:rgba(4,11,18,.96);
}

#partnerReferralView .partner-search{
  width:min(730px,62%);
  min-height:48px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(92,165,212,.18);
  border-radius:12px;
  background:rgba(13,32,48,.66);
}

#partnerReferralView .partner-search input{
  width:100%;
  border:0;
  outline:0;
  color:#eaf0f4;
  background:transparent;
  font-size:13px;
}

#partnerReferralView .partner-search span{
  color:#dce7ec;
  font-size:22px;
}

#partnerReferralView .partner-top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

#partnerReferralView .partner-top-actions button{
  min-width:42px;
  height:42px;
  border:1px solid rgba(92,165,212,.16);
  border-radius:12px;
  color:#e1ebf0;
  background:rgba(10,24,36,.72);
}

#partnerReferralView .partner-top-actions button[aria-label="Ngôn ngữ"]{
  min-width:74px;
  padding:0 10px;
  font-size:11px;
  font-weight:700;
}

#partnerReferralView .partner-user{
  display:flex;
  align-items:center;
  gap:10px;
  padding-left:10px;
}

#partnerReferralView .partner-avatar{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  color:#d9e5ff;
  font-size:22px;
  background:linear-gradient(180deg,#8cabd9,#436590);
}

#partnerReferralView .partner-user strong{
  display:block;
  font-size:13px;
}

#partnerReferralView .partner-user small{
  display:block;
  color:rgba(210,222,230,.58);
  font-size:9px;
}

/* CONTENT */

.partner-referral-content{
  width:min(1420px,calc(100% - 48px));
  margin:0 auto;
  padding:12px 0 28px;
}

.partner-referral-breadcrumb{
  min-height:28px;
  display:flex;
  align-items:center;
  gap:9px;
  color:rgba(202,215,224,.58);
  font-size:10px;
}

.partner-referral-breadcrumb strong{
  color:#6ed5ff;
}

.partner-referral-hero{
  min-height:165px;
  padding:22px 28px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border-radius:16px;
  background:
    linear-gradient(90deg,
      rgba(4,11,18,.98) 0%,
      rgba(4,11,18,.82) 36%,
      rgba(4,11,18,.14) 73%,
      rgba(4,11,18,.02) 100%),
    url("./assets/customer/home/hero-customer-home.webp") center 46% / cover no-repeat;
}

.partner-referral-hero h1{
  margin:0;
  font-size:50px;
  line-height:.98;
}

.partner-referral-hero > div > span{
  display:block;
  margin-top:7px;
  color:#eef3f6;
  font-size:15px;
  letter-spacing:.18em;
}

.partner-referral-hero p{
  margin:9px 0 2px;
  color:rgba(224,234,240,.82);
  font-size:13px;
}

.partner-referral-hero small{
  color:rgba(203,218,227,.60);
  font-size:10px;
}

.partner-referral-layout{
  margin-top:10px;
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(300px,.55fr);
  gap:10px;
}

.partner-referral-main{
  min-width:0;
}

.partner-referral-side{
  display:grid;
  align-content:start;
  gap:10px;
}

/* TOP CARDS */

.partner-referral-top{
  display:grid;
  grid-template-columns:1.15fr .8fr;
  gap:10px;
}

.referral-code-card,
.referral-link-card,
.referral-overview-panel,
.referral-how-panel,
.referral-activity-panel,
.referral-share-panel,
.referral-policy-panel,
.referral-side-card{
  border:1px solid rgba(92,165,212,.17);
  border-radius:12px;
  background:rgba(8,18,28,.95);
}

.referral-code-card{
  min-height:150px;
  padding:14px 16px;
  display:grid;
  grid-template-columns:78px 1fr 150px;
  grid-template-rows:1fr auto;
  gap:10px 14px;
  border-color:rgba(239,177,63,.70);
  background:
    radial-gradient(circle at 8% 50%,rgba(239,177,63,.12),transparent 30%),
    linear-gradient(135deg,rgba(15,29,42,.98),rgba(9,18,29,.95));
}

.referral-plane{
  grid-row:1/3;
  align-self:center;
  color:#f0b63f;
  font-size:60px;
}

.referral-code-copy small{
  color:#e8eef2;
  font-size:9px;
  letter-spacing:.08em;
}

.referral-code-copy strong{
  display:block;
  margin-top:6px;
  font-size:13px;
}

.referral-code-copy em{
  display:block;
  margin-top:2px;
  color:rgba(207,219,227,.56);
  font-size:9px;
  font-style:normal;
  letter-spacing:.10em;
}

.referral-code-copy h2{
  margin:5px 0 0;
  font-size:28px;
  letter-spacing:.10em;
}

.referral-status-block{
  padding-left:16px;
  border-left:1px solid rgba(255,255,255,.08);
}

.referral-status-block small{
  display:block;
  color:rgba(207,219,227,.58);
  font-size:8.5px;
}

.referral-status-block strong{
  display:block;
  margin-top:12px;
  color:#4eddb9;
  font-size:17px;
}

.referral-code-actions{
  grid-column:2/4;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.referral-code-actions button,
.referral-link-actions button,
.referral-side-card button,
.referral-policy-panel button{
  min-height:34px;
  border:1px solid rgba(239,177,63,.72);
  border-radius:7px;
  color:#e9b43e;
  background:transparent;
  font-size:9px;
}

.referral-code-actions button:last-child,
.referral-link-actions button:last-child{
  border-color:rgba(54,187,247,.72);
  color:#50c8ff;
}

.referral-link-card{
  min-height:150px;
  padding:12px;
}

.referral-link-card header{
  display:flex;
  align-items:center;
  gap:9px;
}

.referral-link-card header > span{
  color:#49caff;
  font-size:22px;
}

.referral-link-card header strong{
  display:block;
  font-size:13px;
}

.referral-link-card header small{
  display:block;
  color:rgba(201,214,223,.52);
  font-size:8px;
}

.referral-link-card p{
  margin:7px 0 9px;
  color:rgba(208,220,228,.70);
  font-size:9px;
}

.referral-link-card p small{
  color:rgba(194,209,219,.48);
  font-size:8px;
}

.referral-link-value{
  min-height:42px;
  padding:0 8px 0 12px;
  display:grid;
  grid-template-columns:1fr 32px;
  align-items:center;
  border:1px solid rgba(54,187,247,.45);
  border-radius:8px;
  background:rgba(10,29,43,.72);
}

.referral-link-value strong{
  overflow:hidden;
  color:#e8eff3;
  font-size:10px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.referral-link-value button{
  border:0;
  color:#dce8ee;
  background:transparent;
}

.referral-link-actions{
  margin-top:9px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}

/* OVERVIEW */

.referral-overview-panel{
  margin-top:8px;
  padding-bottom:10px;
}

.referral-overview-panel > header,
.referral-how-panel > header,
.referral-activity-panel > header,
.referral-share-panel > header,
.referral-policy-panel > header,
.referral-side-card > header{
  min-height:46px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:9px;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.referral-overview-panel > header > span,
.referral-how-panel > header > span,
.referral-activity-panel > header > span,
.referral-share-panel > header > span,
.referral-policy-panel > header > span,
.referral-side-card > header > span{
  color:#49caff;
  font-size:20px;
}

.referral-overview-panel h2,
.referral-how-panel h2,
.referral-activity-panel h2,
.referral-share-panel h2,
.referral-policy-panel h2,
.referral-side-card h2{
  margin:0;
  font-size:14px;
}

.referral-overview-panel h2 + small,
.referral-how-panel h2 + small,
.referral-activity-panel h2 + small,
.referral-share-panel h2 + small,
.referral-policy-panel h2 + small,
.referral-side-card h2 + small{
  display:block;
  margin-top:2px;
  color:rgba(201,214,223,.52);
  font-size:8px;
  letter-spacing:.08em;
}

.referral-overview-grid{
  padding:8px 10px 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}

.referral-overview-grid > div{
  min-height:82px;
  padding:10px;
  display:grid;
  grid-template-columns:34px 1fr 18px;
  gap:8px;
  align-items:center;
  border:1px solid rgba(92,165,212,.22);
  border-radius:9px;
}

.referral-overview-grid > div > span{
  font-size:24px;
}

.referral-overview-grid strong{
  display:block;
  font-size:9.5px;
}

.referral-overview-grid small{
  display:block;
  margin-top:2px;
  color:rgba(204,216,224,.54);
  font-size:8px;
}

.referral-overview-grid b{
  display:block;
  margin-top:6px;
  font-size:12px;
}

.referral-overview-grid em{
  font-style:normal;
  font-size:18px;
}

.referral-overview-grid .total{
  border-color:rgba(49,176,245,.68);
}

.referral-overview-grid .total > span,
.referral-overview-grid .total em{
  color:#43c4ff;
}

.referral-overview-grid .eligible{
  border-color:rgba(239,177,63,.68);
}

.referral-overview-grid .eligible > span,
.referral-overview-grid .eligible em{
  color:#f0b63f;
}

.referral-overview-grid .pending{
  border-color:rgba(239,177,63,.52);
}

.referral-overview-grid .pending > span,
.referral-overview-grid .pending em{
  color:#efbd45;
}

.referral-overview-grid .completed{
  border-color:rgba(64,220,178,.65);
}

.referral-overview-grid .completed > span,
.referral-overview-grid .completed em{
  color:#4eddb9;
}

/* HOW IT WORKS */

.referral-how-panel{
  margin-top:8px;
}

.referral-how-flow{
  min-height:126px;
  padding:12px;
  display:grid;
  grid-template-columns:1fr 26px 1fr 26px 1.15fr 26px 1.15fr;
  align-items:center;
  background:
    linear-gradient(90deg,rgba(6,17,26,.90),rgba(6,17,26,.60)),
    url("./assets/customer/home/explore.webp") center / cover no-repeat;
}

.referral-how-flow .step{
  display:grid;
  grid-template-columns:40px 1fr;
  column-gap:8px;
  align-items:center;
}

.referral-how-flow .step b{
  grid-row:1/4;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid currentColor;
  border-radius:50%;
  color:#f0b63f;
  font-size:11px;
}

.referral-how-flow .step span{
  font-size:20px;
}

.referral-how-flow .step strong{
  font-size:9.5px;
}

.referral-how-flow .step small{
  color:rgba(203,216,225,.60);
  font-size:8px;
  line-height:1.35;
}

.referral-how-flow .two b,
.referral-how-flow .two span{
  color:#4cc8ff;
}

.referral-how-flow .three b,
.referral-how-flow .three span{
  color:#4eddb9;
}

.referral-how-flow .four b,
.referral-how-flow .four span{
  color:#bb7bff;
}

.referral-how-flow > em{
  color:#d8e2e8;
  text-align:center;
  font-size:20px;
  font-style:normal;
}

/* ACTIVITY */

.referral-activity-panel{
  margin-top:8px;
  overflow:hidden;
}

.referral-activity-row{
  min-height:38px;
  padding:0 12px;
  display:grid;
  grid-template-columns:36px 1.1fr 1.1fr 1fr .8fr .85fr .7fr;
  gap:8px;
  align-items:center;
}

.referral-activity-row.head{
  color:rgba(195,210,220,.58);
  font-size:8.5px;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.referral-activity-empty{
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.referral-activity-empty > span{
  color:#dbe6eb;
  font-size:24px;
}

.referral-activity-empty p{
  margin:0;
  color:#dce7ec;
  font-size:9px;
}

.referral-activity-empty small{
  color:rgba(197,211,220,.48);
  font-size:7.5px;
}

/* BOTTOM */

.referral-bottom-row{
  margin-top:8px;
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:8px;
}

.referral-share-panel{
  padding-bottom:10px;
}

.referral-share-panel > div{
  padding:8px 10px 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
}

.referral-share-panel button{
  min-height:32px;
  border:1px solid rgba(239,177,63,.58);
  border-radius:7px;
  color:#e9b43e;
  background:transparent;
  font-size:8px;
}

.referral-policy-panel header{
  justify-content:space-between;
}

.referral-policy-panel header > div{
  margin-right:auto;
}

.referral-policy-links{
  padding:9px 12px 11px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px 18px;
}

.referral-policy-links span{
  position:relative;
  padding-left:20px;
  color:#e7eef2;
  font-size:8.5px;
}

.referral-policy-links small{
  display:block;
  margin-top:2px;
  color:rgba(196,211,220,.48);
  font-size:7px;
}

.referral-policy-links b{
  float:right;
  color:#50c8ff;
}

/* SIDE */

.referral-side-card{
  overflow:hidden;
}

.qr-card{
  padding-bottom:10px;
}

.referral-qr-placeholder{
  width:150px;
  height:150px;
  margin:14px auto 8px;
  display:grid;
  place-items:center;
  border:8px solid #e7edf1;
  border-radius:10px;
  color:#06101a;
  background:
    repeating-linear-gradient(45deg,#06101a 0 6px,#e7edf1 6px 12px);
}

.referral-qr-placeholder span{
  display:none;
}

.referral-qr-placeholder strong{
  padding:6px 9px;
  border-radius:5px;
  color:#f0bd50;
  background:#07111a;
  font-size:18px;
}

.qr-card p{
  margin:0;
  padding:0 16px 10px;
  color:#e5edf2;
  font-size:9.5px;
  line-height:1.4;
  text-align:center;
}

.qr-card p small{
  color:rgba(197,211,220,.52);
  font-size:8px;
}

.qr-card > div:last-child{
  padding:0 12px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.attribution-card{
  padding-bottom:8px;
}

.referral-attribution-lines{
  padding:6px 12px;
}

.referral-attribution-lines > div{
  min-height:38px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.referral-attribution-lines > div:last-child{
  border-bottom:0;
}

.referral-attribution-lines span{
  color:rgba(207,219,227,.66);
  font-size:8.5px;
}

.referral-attribution-lines span small{
  display:block;
  margin-top:2px;
  color:rgba(194,209,219,.46);
  font-size:7px;
}

.referral-attribution-lines strong{
  max-width:150px;
  overflow:hidden;
  color:#edf3f6;
  font-size:8.5px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.referral-attribution-lines strong.active{
  color:#4eddb9;
}

.disclosure-card p{
  margin:0;
  padding:12px;
  color:rgba(207,219,227,.68);
  font-size:9px;
  line-height:1.5;
}

/* RESPONSIVE */

@media (max-width:1250px){
  #partnerReferralView .partner-shell{
    grid-template-columns:230px minmax(0,1fr);
  }

  .referral-overview-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:1050px){
  .partner-referral-layout{
    grid-template-columns:1fr;
  }

  .partner-referral-side{
    grid-template-columns:repeat(3,1fr);
  }
}

@media (max-width:900px){
  #partnerReferralView .partner-shell{
    grid-template-columns:1fr;
  }

  #partnerReferralView .partner-sidebar{
    display:none;
  }

  .partner-referral-top{
    grid-template-columns:1fr;
  }

  .partner-referral-side{
    grid-template-columns:1fr;
  }

  .referral-bottom-row{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .partner-referral-content{
    width:calc(100% - 28px);
  }

  #partnerReferralView .partner-topbar{
    padding:12px 14px;
  }

  #partnerReferralView .partner-search{
    width:100%;
  }

  #partnerReferralView .partner-top-actions{
    display:none;
  }

  .partner-referral-hero h1{
    font-size:38px;
  }

  .referral-code-card{
    grid-template-columns:1fr;
  }

  .referral-plane{
    grid-row:auto;
  }

  .referral-code-actions{
    grid-column:auto;
  }

  .referral-overview-grid,
  .referral-share-panel > div,
  .referral-policy-links{
    grid-template-columns:1fr;
  }

  .referral-how-flow{
    grid-template-columns:1fr;
    gap:10px;
  }

  .referral-how-flow > em{
    display:none;
  }
}


/* SCREEN 22 — FINAL READABILITY & PROPORTION BALANCE */

#partnerReferralView .partner-referral-layout{
  grid-template-columns:minmax(0,1.58fr) minmax(330px,.62fr);
}

#partnerReferralView .referral-overview-panel h2,
#partnerReferralView .referral-how-panel h2,
#partnerReferralView .referral-activity-panel h2,
#partnerReferralView .referral-share-panel h2,
#partnerReferralView .referral-policy-panel h2,
#partnerReferralView .referral-side-card h2{
  font-size:15px;
}

#partnerReferralView .referral-overview-panel h2 + small,
#partnerReferralView .referral-how-panel h2 + small,
#partnerReferralView .referral-activity-panel h2 + small,
#partnerReferralView .referral-share-panel h2 + small,
#partnerReferralView .referral-policy-panel h2 + small,
#partnerReferralView .referral-side-card h2 + small{
  font-size:8.5px;
}

#partnerReferralView .referral-overview-grid strong{
  font-size:10.5px;
}

#partnerReferralView .referral-overview-grid small{
  font-size:8.5px;
}

#partnerReferralView .referral-how-flow{
  min-height:138px;
}

#partnerReferralView .referral-how-flow .step strong{
  font-size:10.5px;
}

#partnerReferralView .referral-how-flow .step small{
  font-size:8.5px;
}

#partnerReferralView .referral-activity-row.head{
  font-size:9px;
}

#partnerReferralView .referral-activity-empty p{
  font-size:10px;
}

#partnerReferralView .referral-activity-empty small{
  font-size:8px;
}

#partnerReferralView .referral-share-panel button{
  font-size:8.5px;
}

#partnerReferralView .referral-policy-links span{
  font-size:9px;
}

#partnerReferralView .referral-policy-links small{
  font-size:7.5px;
}

#partnerReferralView .referral-qr-placeholder{
  width:164px;
  height:164px;
}

#partnerReferralView .qr-card p{
  font-size:10px;
}

#partnerReferralView .qr-card p small{
  font-size:8.5px;
}

#partnerReferralView .referral-attribution-lines > div{
  min-height:42px;
}

#partnerReferralView .referral-attribution-lines span{
  font-size:9px;
}

#partnerReferralView .referral-attribution-lines span small{
  font-size:7.5px;
}

#partnerReferralView .referral-attribution-lines strong{
  font-size:9px;
}

#partnerReferralView .disclosure-card p{
  font-size:9.5px;
  line-height:1.55;
}


/* =========================================================
   SCREEN 23 — PAR REFERRAL DETAIL
   ========================================================= */

body:has(#partnerReferralDetailView.active) > .topbar{
  display:none;
}

body:has(#partnerReferralDetailView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#partnerReferralDetailView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 78% 8%,rgba(46,130,195,.08),transparent 28%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#partnerReferralDetailView.active{
  display:block;
}

#partnerReferralDetailView .partner-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:278px minmax(0,1fr);
}

#partnerReferralDetailView .partner-sidebar{
  min-height:100vh;
  padding:20px 20px 24px;
  border-right:1px solid rgba(87,173,228,.18);
  background:
    radial-gradient(circle at 50% 8%,rgba(25,100,155,.10),transparent 30%),
    #06101a;
}

#partnerReferralDetailView .partner-brand{
  min-height:74px;
  padding:0 10px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.07);
}

#partnerReferralDetailView .partner-brand strong{
  color:#f0bd50;
  font-size:24px;
}

#partnerReferralDetailView .partner-brand span{
  margin-top:4px;
  color:#d4dde4;
  font-size:8px;
  letter-spacing:.28em;
}

#partnerReferralDetailView .partner-nav-label{
  display:block;
  margin:22px 10px 9px;
  color:#dce5ea;
  font-size:10px;
  letter-spacing:.24em;
}

#partnerReferralDetailView .partner-nav{
  display:grid;
  gap:5px;
}

#partnerReferralDetailView .partner-nav-item{
  width:100%;
  min-height:46px;
  padding:0 12px;
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  border:1px solid transparent;
  border-radius:10px;
  color:#d8e2e8;
  background:transparent;
  text-align:left;
}

#partnerReferralDetailView .partner-nav-item > span{
  color:#dbe5eb;
  font-size:20px;
}

#partnerReferralDetailView .partner-nav-item strong{
  display:block;
  font-size:13px;
  font-weight:600;
  line-height:1.15;
}

#partnerReferralDetailView .partner-nav-item small{
  display:block;
  margin-top:3px;
  color:rgba(203,216,225,.50);
  font-size:8px;
}

#partnerReferralDetailView .partner-nav-item.active{
  border-color:rgba(239,177,63,.70);
  color:#fff;
  background:
    linear-gradient(90deg,rgba(239,177,63,.18),rgba(239,177,63,.03));
  box-shadow:0 0 18px rgba(239,177,63,.10);
}

#partnerReferralDetailView .partner-nav-item.active > span{
  color:#f0b63f;
}

#partnerReferralDetailView .partner-sidebar-vision{
  margin-top:18px;
  min-height:206px;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid rgba(92,165,212,.16);
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(5,15,25,.18),rgba(5,15,25,.62)),
    url("./assets/customer/home/hero-customer-home.webp") center / cover no-repeat;
}

#partnerReferralDetailView .partner-sidebar-vision span{
  color:#f1f4f6;
  font-size:10px;
  line-height:1.55;
  letter-spacing:.18em;
}

#partnerReferralDetailView .partner-sidebar-vision small{
  margin-top:18px;
  color:#d8e1e7;
  font-size:9px;
}

/* TOPBAR */

#partnerReferralDetailView .partner-main{
  min-width:0;
}

#partnerReferralDetailView .partner-topbar{
  min-height:84px;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid rgba(92,165,212,.12);
  background:rgba(4,11,18,.96);
}

#partnerReferralDetailView .partner-search{
  width:min(730px,62%);
  min-height:48px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(92,165,212,.18);
  border-radius:12px;
  background:rgba(13,32,48,.66);
}

#partnerReferralDetailView .partner-search span{
  color:#dce7ec;
  font-size:22px;
}

#partnerReferralDetailView .partner-search input{
  width:100%;
  border:0;
  outline:0;
  color:#eaf0f4;
  background:transparent;
  font-size:13px;
}

#partnerReferralDetailView .partner-top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

#partnerReferralDetailView .partner-top-actions button{
  min-width:42px;
  height:42px;
  border:1px solid rgba(92,165,212,.16);
  border-radius:12px;
  color:#e1ebf0;
  background:rgba(10,24,36,.72);
}

#partnerReferralDetailView .partner-top-actions button[aria-label="Ngôn ngữ"]{
  min-width:74px;
  padding:0 10px;
  font-size:11px;
  font-weight:700;
}

#partnerReferralDetailView .partner-user{
  display:flex;
  align-items:center;
  gap:10px;
  padding-left:10px;
}

#partnerReferralDetailView .partner-avatar{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  color:#d9e5ff;
  font-size:22px;
  background:linear-gradient(180deg,#8cabd9,#436590);
}

/* CONTENT */

.partner-referral-detail-content{
  width:min(1420px,calc(100% - 48px));
  margin:0 auto;
  padding:12px 0 28px;
}

.partner-referral-detail-breadcrumb{
  min-height:28px;
  display:flex;
  align-items:center;
  gap:9px;
  color:rgba(202,215,224,.58);
  font-size:10px;
}

.partner-referral-detail-breadcrumb strong{
  color:#6ed5ff;
}

.partner-referral-detail-hero{
  min-height:160px;
  padding:22px 28px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border-radius:16px;
  background:
    linear-gradient(90deg,
      rgba(4,11,18,.98) 0%,
      rgba(4,11,18,.82) 36%,
      rgba(4,11,18,.14) 73%,
      rgba(4,11,18,.02) 100%),
    url("./assets/customer/home/hero-customer-home.webp") center 46% / cover no-repeat;
}

.partner-referral-detail-hero h1{
  margin:0;
  font-size:50px;
  line-height:.98;
}

.partner-referral-detail-hero > div > span{
  display:block;
  margin-top:7px;
  color:#eef3f6;
  font-size:15px;
  letter-spacing:.18em;
}

.partner-referral-detail-hero p{
  margin:9px 0 2px;
  color:rgba(224,234,240,.82);
  font-size:13px;
}

.partner-referral-detail-hero small{
  color:rgba(203,218,227,.60);
  font-size:10px;
}

/* SUMMARY */

.referral-detail-summary{
  margin-top:8px;
  min-height:102px;
  padding:12px 16px;
  display:grid;
  grid-template-columns:76px 1.1fr .7fr .85fr auto;
  gap:14px;
  align-items:center;
  border:1px solid rgba(239,177,63,.70);
  border-radius:12px;
  background:
    radial-gradient(circle at 10% 50%,rgba(239,177,63,.11),transparent 30%),
    rgba(8,18,28,.96);
}

.referral-detail-plane{
  color:#f0b63f;
  font-size:58px;
}

.referral-detail-summary small{
  display:block;
  color:rgba(204,216,225,.56);
  font-size:8.5px;
  letter-spacing:.06em;
}

.referral-detail-summary strong{
  display:block;
  margin-top:3px;
  font-size:12px;
}

.referral-detail-summary h2{
  margin:5px 0 0;
  font-size:25px;
  letter-spacing:.08em;
}

.referral-detail-status{
  padding-left:14px;
  border-left:1px solid rgba(255,255,255,.07);
}

.referral-detail-status strong{
  color:#4eddb9;
  font-size:17px;
}

.referral-detail-created{
  display:flex;
  gap:10px;
  align-items:center;
  padding-left:14px;
  border-left:1px solid rgba(255,255,255,.07);
}

.referral-detail-created > span{
  color:#dfe8ed;
  font-size:23px;
}

.referral-detail-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.referral-detail-actions button,
.referral-detail-card button,
.referral-detail-footer button{
  min-height:34px;
  padding:0 12px;
  border:1px solid rgba(239,177,63,.72);
  border-radius:7px;
  color:#e9b43e;
  background:transparent;
  font-size:9px;
}

.referral-detail-actions button:last-child{
  border-color:rgba(54,187,247,.70);
  color:#50c8ff;
}

/* LAYOUT */

.referral-detail-layout{
  margin-top:8px;
  display:grid;
  grid-template-columns:minmax(0,1.62fr) minmax(300px,.48fr);
  gap:10px;
}

.referral-detail-main{
  min-width:0;
}

.referral-detail-side{
  display:grid;
  align-content:start;
  gap:10px;
}

.referral-detail-card{
  overflow:hidden;
  border:1px solid rgba(92,165,212,.17);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.referral-detail-card > header{
  min-height:46px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:9px;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.referral-detail-card > header > span{
  color:#49caff;
  font-size:20px;
}

.referral-detail-card h2{
  margin:0;
  font-size:14px;
}

.referral-detail-card h2 + small{
  display:block;
  margin-top:2px;
  color:rgba(201,214,223,.52);
  font-size:8px;
  letter-spacing:.08em;
}

/* ROW 1 */

.referral-detail-row-one{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:8px;
}

.source-grid{
  padding:8px 12px 4px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 14px;
}

.source-grid > div{
  min-height:50px;
  display:grid;
  grid-template-columns:28px 1fr;
  gap:8px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.source-grid > div:nth-last-child(-n+1){
  border-bottom:0;
}

.source-grid > div > span{
  color:#dbe6eb;
  font-size:18px;
}

.source-grid small{
  display:block;
  color:rgba(200,214,223,.54);
  font-size:8px;
}

.source-grid strong{
  display:block;
  margin-top:3px;
  color:#eaf1f4;
  font-size:10px;
}

.source-grid strong.active{
  color:#4eddb9;
}

.source-card > button{
  width:calc(100% - 24px);
  margin:8px 12px 12px;
}

.referral-detail-journey{
  min-height:150px;
  padding:18px 12px;
  display:grid;
  grid-template-columns:1fr 20px 1fr 20px 1fr 20px 1.2fr 20px 1fr;
  align-items:center;
}

.referral-detail-journey > div{
  text-align:center;
}

.referral-detail-journey > div > span{
  width:42px;
  height:42px;
  margin:0 auto 6px;
  display:grid;
  place-items:center;
  border:1px solid rgba(131,154,170,.48);
  border-radius:50%;
  color:#8b9eab;
  font-size:18px;
}

.referral-detail-journey > div.done > span{
  color:#4eddb9;
  border-color:rgba(64,220,178,.65);
  box-shadow:0 0 16px rgba(64,220,178,.10);
}

.referral-detail-journey > div.current > span{
  color:#f0b63f;
  border-color:rgba(239,177,63,.70);
  box-shadow:0 0 16px rgba(239,177,63,.12);
}

.referral-detail-journey strong{
  display:block;
  font-size:8.5px;
}

.referral-detail-journey small{
  display:block;
  margin-top:3px;
  color:rgba(197,211,220,.50);
  font-size:7.5px;
}

.referral-detail-journey > b{
  color:#aebdc6;
  text-align:center;
  font-size:18px;
  font-weight:400;
}

/* ROW 2 */

.referral-detail-row-two{
  margin-top:8px;
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:8px;
}

.customer-reference-body{
  min-height:84px;
  padding:12px;
  display:grid;
  grid-template-columns:40px 1fr 1fr;
  gap:10px;
  align-items:center;
}

.customer-reference-body > span{
  color:#4eddb9;
  font-size:28px;
}

.customer-reference-body small{
  color:rgba(200,214,223,.54);
  font-size:8px;
}

.customer-reference-body strong{
  display:block;
  margin-top:3px;
  font-size:10px;
}

.customer-reference-body strong.active{
  color:#4eddb9;
}

.related-transaction-grid{
  min-height:84px;
  padding:10px 12px;
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:8px 14px;
  align-items:center;
}

.related-transaction-grid > div{
  display:grid;
  grid-template-columns:26px 1fr;
  grid-template-rows:auto auto;
  gap:0 7px;
}

.related-transaction-grid > div > span{
  grid-row:1/3;
  color:#dce6eb;
  font-size:17px;
}

.related-transaction-grid small{
  color:rgba(200,214,223,.54);
  font-size:7.5px;
}

.related-transaction-grid strong{
  font-size:9.5px;
}

/* ROW 3 */

.referral-detail-row-three{
  margin-top:8px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:8px;
}

.eligibility-grid{
  min-height:78px;
  padding:10px 12px;
  display:grid;
  grid-template-columns:1fr 1.15fr 1fr 1fr;
  gap:10px;
}

.eligibility-grid > div,
.commission-detail-grid > div{
  padding-right:10px;
  border-right:1px solid rgba(255,255,255,.06);
}

.eligibility-grid > div:last-child,
.commission-detail-grid > div:last-of-type{
  border-right:0;
}

.eligibility-grid small,
.commission-detail-grid small{
  color:rgba(200,214,223,.54);
  font-size:7.5px;
}

.eligibility-grid strong,
.commission-detail-grid strong{
  display:block;
  margin-top:4px;
  font-size:9px;
}

.eligibility-grid strong.pending{
  color:#f0ba40;
}

.eligibility-grid a,
.commission-detail-grid a{
  display:block;
  margin-top:4px;
  color:#50c8ff;
  font-size:7.5px;
  text-decoration:none;
}

.commission-detail-grid{
  min-height:78px;
  padding:10px 12px;
  display:grid;
  grid-template-columns:1.1fr 1fr 1fr auto;
  gap:10px;
  align-items:start;
}

/* ROW 4 */

.referral-detail-row-four{
  margin-top:8px;
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:8px;
}

.applicable-policy-card > header{
  justify-content:space-between;
}

.applicable-policy-card > header > div{
  margin-right:auto;
}

.applicable-policy-links{
  padding:10px 12px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 16px;
}

.applicable-policy-links span{
  color:#e8eef2;
  font-size:8.5px;
}

.applicable-policy-links small{
  display:block;
  margin-top:2px;
  color:rgba(196,211,220,.48);
  font-size:7px;
}

.applicable-policy-links b{
  float:right;
  color:#50c8ff;
}

.traceability-detail-grid{
  padding:10px 12px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
}

.traceability-detail-grid > div{
  min-width:0;
}

.traceability-detail-grid small{
  color:rgba(199,213,222,.50);
  font-size:7px;
}

.traceability-detail-grid strong{
  display:block;
  margin-top:3px;
  overflow:hidden;
  color:#edf3f6;
  font-size:8px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* SIDE ACTIVITY */

.referral-activity-timeline{
  padding:10px 12px 12px;
}

.referral-activity-timeline > div{
  position:relative;
  min-height:62px;
  display:grid;
  grid-template-columns:34px 1fr;
  gap:9px;
}

.referral-activity-timeline > div:not(:last-child)::after{
  content:"";
  position:absolute;
  left:16px;
  top:30px;
  width:1px;
  height:33px;
  background:rgba(122,149,166,.36);
}

.referral-activity-timeline > div > span{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid rgba(132,154,169,.48);
  border-radius:50%;
  color:#8799a6;
  background:#08121c;
  font-size:13px;
  z-index:1;
}

.referral-activity-timeline > div.done > span{
  color:#4eddb9;
  border-color:rgba(64,220,178,.65);
}

.referral-activity-timeline strong{
  display:block;
  font-size:9px;
}

.referral-activity-timeline small{
  display:block;
  margin-top:2px;
  color:rgba(196,211,220,.50);
  font-size:7.5px;
}

.referral-activity-timeline time{
  display:block;
  margin-top:3px;
  color:rgba(196,211,220,.42);
  font-size:7px;
}

.status-explanation-card p{
  margin:0;
  padding:12px;
  color:rgba(207,219,227,.68);
  font-size:9.5px;
  line-height:1.5;
}

.status-explanation-card > button{
  width:calc(100% - 24px);
  margin:0 12px 12px;
}

/* FOOTER */

.referral-detail-footer{
  margin-top:8px;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.referral-detail-footer > button:first-child{
  border-color:rgba(54,187,247,.62);
  color:#50c8ff;
}

.referral-detail-footer > div{
  display:flex;
  gap:10px;
}

.referral-detail-footer button:disabled{
  color:rgba(220,230,236,.48);
  border-color:rgba(170,188,200,.22);
}

/* RESPONSIVE */

@media (max-width:1250px){
  #partnerReferralDetailView .partner-shell{
    grid-template-columns:230px minmax(0,1fr);
  }

  .referral-detail-summary{
    grid-template-columns:60px 1fr 1fr;
  }

  .referral-detail-created,
  .referral-detail-actions{
    grid-column:auto;
  }
}

@media (max-width:1050px){
  .referral-detail-layout{
    grid-template-columns:1fr;
  }

  .referral-detail-side{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:900px){
  #partnerReferralDetailView .partner-shell{
    grid-template-columns:1fr;
  }

  #partnerReferralDetailView .partner-sidebar{
    display:none;
  }

  .referral-detail-row-one,
  .referral-detail-row-two,
  .referral-detail-row-three,
  .referral-detail-row-four{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .partner-referral-detail-content{
    width:calc(100% - 28px);
  }

  #partnerReferralDetailView .partner-topbar{
    padding:12px 14px;
  }

  #partnerReferralDetailView .partner-search{
    width:100%;
  }

  #partnerReferralDetailView .partner-top-actions{
    display:none;
  }

  .partner-referral-detail-hero h1{
    font-size:38px;
  }

  .referral-detail-summary{
    grid-template-columns:1fr;
  }

  .referral-detail-plane{
    font-size:44px;
  }

  .referral-detail-journey{
    grid-template-columns:1fr;
    gap:8px;
  }

  .referral-detail-journey > b{
    display:none;
  }

  .referral-detail-side{
    grid-template-columns:1fr;
  }

  .eligibility-grid,
  .commission-detail-grid,
  .traceability-detail-grid{
    grid-template-columns:1fr;
  }

  .referral-detail-footer{
    flex-direction:column;
    align-items:stretch;
  }

  .referral-detail-footer > div{
    display:grid;
    grid-template-columns:1fr;
  }
}


/* SCREEN 23 — TOPBAR USER LABEL FIX */

#partnerReferralDetailView .partner-user > div{
  display:flex;
  flex-direction:column;
  justify-content:center;
  line-height:1.15;
}

#partnerReferralDetailView .partner-user strong{
  display:block;
  color:#eef4f7;
  font-size:13px;
  font-weight:700;
}

#partnerReferralDetailView .partner-user small{
  display:block;
  margin-top:3px;
  color:rgba(210,222,230,.58);
  font-size:9px;
}


/* =========================================================
   SCREEN 24 — PAR PERFORMANCE
   ========================================================= */

body:has(#partnerPerformanceView.active) > .topbar{
  display:none;
}

body:has(#partnerPerformanceView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#partnerPerformanceView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 78% 8%,rgba(46,130,195,.08),transparent 28%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#partnerPerformanceView.active{
  display:block;
}

#partnerPerformanceView .partner-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:278px minmax(0,1fr);
}

#partnerPerformanceView .partner-sidebar{
  min-height:100vh;
  padding:20px 20px 24px;
  border-right:1px solid rgba(87,173,228,.18);
  background:
    radial-gradient(circle at 50% 8%,rgba(25,100,155,.10),transparent 30%),
    #06101a;
}

#partnerPerformanceView .partner-brand{
  min-height:74px;
  padding:0 10px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.07);
}

#partnerPerformanceView .partner-brand strong{
  color:#f0bd50;
  font-size:24px;
}

#partnerPerformanceView .partner-brand span{
  margin-top:4px;
  color:#d4dde4;
  font-size:8px;
  letter-spacing:.28em;
}

#partnerPerformanceView .partner-nav-label{
  display:block;
  margin:22px 10px 9px;
  color:#dce5ea;
  font-size:10px;
  letter-spacing:.24em;
}

#partnerPerformanceView .partner-nav{
  display:grid;
  gap:5px;
}

#partnerPerformanceView .partner-nav-item{
  width:100%;
  min-height:46px;
  padding:0 12px;
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  border:1px solid transparent;
  border-radius:10px;
  color:#d8e2e8;
  background:transparent;
  text-align:left;
}

#partnerPerformanceView .partner-nav-item > span{
  color:#dbe5eb;
  font-size:20px;
}

#partnerPerformanceView .partner-nav-item strong{
  display:block;
  font-size:13px;
  font-weight:600;
  line-height:1.15;
}

#partnerPerformanceView .partner-nav-item small{
  display:block;
  margin-top:3px;
  color:rgba(203,216,225,.50);
  font-size:8px;
}

#partnerPerformanceView .partner-nav-item.active{
  border-color:rgba(239,177,63,.70);
  color:#fff;
  background:
    linear-gradient(90deg,rgba(239,177,63,.18),rgba(239,177,63,.03));
  box-shadow:0 0 18px rgba(239,177,63,.10);
}

#partnerPerformanceView .partner-nav-item.active > span{
  color:#f0b63f;
}

#partnerPerformanceView .partner-sidebar-vision{
  margin-top:18px;
  min-height:206px;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid rgba(92,165,212,.16);
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(5,15,25,.18),rgba(5,15,25,.62)),
    url("./assets/customer/home/hero-customer-home.webp") center / cover no-repeat;
}

#partnerPerformanceView .partner-sidebar-vision span{
  color:#f1f4f6;
  font-size:10px;
  line-height:1.55;
  letter-spacing:.18em;
}

#partnerPerformanceView .partner-sidebar-vision small{
  margin-top:18px;
  color:#d8e1e7;
  font-size:9px;
}

/* TOPBAR */

#partnerPerformanceView .partner-main{
  min-width:0;
}

#partnerPerformanceView .partner-topbar{
  min-height:84px;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid rgba(92,165,212,.12);
  background:rgba(4,11,18,.96);
}

#partnerPerformanceView .partner-search{
  width:min(730px,62%);
  min-height:48px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(92,165,212,.18);
  border-radius:12px;
  background:rgba(13,32,48,.66);
}

#partnerPerformanceView .partner-search input{
  width:100%;
  border:0;
  outline:0;
  color:#eaf0f4;
  background:transparent;
  font-size:13px;
}

#partnerPerformanceView .partner-search span{
  color:#dce7ec;
  font-size:22px;
}

#partnerPerformanceView .partner-top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

#partnerPerformanceView .partner-top-actions button{
  min-width:42px;
  height:42px;
  border:1px solid rgba(92,165,212,.16);
  border-radius:12px;
  color:#e1ebf0;
  background:rgba(10,24,36,.72);
}

#partnerPerformanceView .partner-top-actions button[aria-label="Ngôn ngữ"]{
  min-width:74px;
  padding:0 10px;
  font-size:11px;
  font-weight:700;
}

#partnerPerformanceView .partner-user{
  display:flex;
  align-items:center;
  gap:10px;
  padding-left:10px;
}

#partnerPerformanceView .partner-avatar{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  color:#d9e5ff;
  font-size:22px;
  background:linear-gradient(180deg,#8cabd9,#436590);
}

#partnerPerformanceView .partner-user > div{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}

#partnerPerformanceView .partner-user strong{
  display:block;
  font-size:13px;
}

#partnerPerformanceView .partner-user small{
  display:block;
  margin-top:3px;
  color:rgba(210,222,230,.58);
  font-size:9px;
}

/* CONTENT */

.partner-performance-content{
  width:min(1420px,calc(100% - 48px));
  margin:0 auto;
  padding:12px 0 28px;
}

.partner-performance-breadcrumb{
  min-height:28px;
  display:flex;
  align-items:center;
  gap:9px;
  color:rgba(202,215,224,.58);
  font-size:10px;
}

.partner-performance-breadcrumb strong{
  color:#6ed5ff;
}

.partner-performance-hero{
  min-height:160px;
  padding:22px 28px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border-radius:16px;
  background:
    linear-gradient(90deg,
      rgba(4,11,18,.98) 0%,
      rgba(4,11,18,.82) 36%,
      rgba(4,11,18,.14) 73%,
      rgba(4,11,18,.02) 100%),
    url("./assets/customer/home/hero-customer-home.webp") center 46% / cover no-repeat;
}

.partner-performance-hero h1{
  margin:0;
  font-size:50px;
  line-height:.98;
}

.partner-performance-hero > div > span{
  display:block;
  margin-top:7px;
  color:#eef3f6;
  font-size:15px;
  letter-spacing:.18em;
}

.partner-performance-hero p{
  margin:9px 0 2px;
  color:rgba(224,234,240,.82);
  font-size:13px;
}

.partner-performance-hero small{
  color:rgba(203,218,227,.60);
  font-size:10px;
}

/* PERIOD BAR */

.performance-period-bar{
  margin-top:8px;
  min-height:64px;
  padding:8px 12px;
  display:grid;
  grid-template-columns:auto 245px 1fr auto;
  gap:12px;
  align-items:center;
  border:1px solid rgba(92,165,212,.17);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.performance-period-bar > div{
  display:grid;
  grid-template-columns:32px auto;
  gap:0 8px;
  align-items:center;
}

.performance-period-bar > div > span{
  grid-row:1/3;
  color:#dce6eb;
  font-size:22px;
}

.performance-period-bar strong{
  display:block;
  font-size:10px;
}

.performance-period-bar small{
  display:block;
  color:rgba(200,214,223,.52);
  font-size:7.5px;
}

.performance-period-bar b{
  margin-left:12px;
  color:#e9f0f4;
  font-size:10px;
}

.performance-period-bar button{
  min-height:38px;
  padding:0 12px;
  border:1px solid rgba(54,187,247,.50);
  border-radius:8px;
  color:#e8eff3;
  background:rgba(10,29,43,.72);
  font-size:9px;
}

.performance-period-bar > button:last-child{
  border-color:rgba(239,177,63,.70);
  color:#e9b43e;
}

/* KPI */

.performance-kpi-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}

.performance-kpi-grid article{
  min-height:96px;
  padding:12px;
  display:grid;
  grid-template-columns:42px 1fr 18px;
  gap:8px;
  align-items:center;
  border:1px solid rgba(92,165,212,.22);
  border-radius:10px;
  background:rgba(8,18,28,.95);
}

.performance-kpi-grid article > span{
  font-size:28px;
}

.performance-kpi-grid strong{
  display:block;
  font-size:10.5px;
}

.performance-kpi-grid small{
  display:block;
  margin-top:2px;
  color:rgba(203,216,225,.54);
  font-size:8.5px;
}

.performance-kpi-grid b{
  display:block;
  margin-top:8px;
  font-size:15px;
}

.performance-kpi-grid em{
  font-style:normal;
  font-size:18px;
}

.performance-kpi-grid .sales{
  border-color:rgba(239,177,63,.72);
}

.performance-kpi-grid .sales > span,
.performance-kpi-grid .sales em{
  color:#f0b63f;
}

.performance-kpi-grid .transactions{
  border-color:rgba(49,176,245,.72);
}

.performance-kpi-grid .transactions > span,
.performance-kpi-grid .transactions em{
  color:#43c4ff;
}

.performance-kpi-grid .status{
  border-color:rgba(64,220,178,.65);
}

.performance-kpi-grid .status > span,
.performance-kpi-grid .status em{
  color:#4eddb9;
}

.performance-kpi-grid .eligibility{
  border-color:rgba(172,88,239,.65);
}

.performance-kpi-grid .eligibility > span,
.performance-kpi-grid .eligibility em{
  color:#bb7bff;
}

/* GENERIC PANEL */

.performance-panel{
  overflow:hidden;
  border:1px solid rgba(92,165,212,.17);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.performance-panel > header{
  min-height:46px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:9px;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.performance-panel > header > span{
  color:#49caff;
  font-size:20px;
}

.performance-panel h2{
  margin:0;
  font-size:14px;
}

.performance-panel h2 + small{
  display:block;
  margin-top:2px;
  color:rgba(201,214,223,.52);
  font-size:8px;
  letter-spacing:.08em;
}

.performance-panel button{
  min-height:32px;
  padding:0 10px;
  border:1px solid rgba(239,177,63,.70);
  border-radius:7px;
  color:#e9b43e;
  background:transparent;
  font-size:8.5px;
}

/* MAIN GRID */

.performance-main-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:.8fr 1.15fr .9fr;
  gap:8px;
}

.current-performance-body{
  min-height:150px;
  padding:12px;
  display:grid;
  grid-template-columns:120px 1fr;
  gap:12px;
  align-items:center;
}

.performance-ring{
  width:105px;
  height:105px;
  display:grid;
  place-items:center;
  border:10px solid rgba(170,188,200,.28);
  border-right-color:#f0b63f;
  border-radius:50%;
  color:#aab9c3;
  font-size:36px;
}

.current-performance-body strong{
  display:block;
  font-size:13px;
}

.current-performance-body small{
  display:block;
  margin-top:3px;
  color:rgba(204,216,224,.54);
  font-size:9px;
}

.current-performance-body p{
  margin:12px 0 0;
  padding:9px;
  border:1px solid rgba(54,187,247,.18);
  border-radius:7px;
  color:#50c8ff;
  background:rgba(16,50,70,.18);
  font-size:8.5px;
  line-height:1.4;
}

.current-performance-card > button{
  width:calc(100% - 24px);
  margin:0 12px 12px;
}

.performance-progress-body{
  min-height:182px;
  padding:10px 12px;
}

.performance-chart-placeholder{
  min-height:105px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px solid rgba(54,187,247,.12);
  border-radius:8px;
  color:#dce7ec;
  background:
    linear-gradient(rgba(20,58,82,.18) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,58,82,.18) 1px,transparent 1px);
  background-size:42px 28px;
  font-size:28px;
}

.performance-chart-placeholder > span{
  color:#dce7ec;
  font-size:9px;
  text-align:center;
}

.performance-chart-placeholder small{
  display:block;
  margin-top:3px;
  color:rgba(193,208,218,.48);
  font-size:7.5px;
}

.performance-period-progress{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  position:relative;
}

.performance-period-progress::before{
  content:"";
  position:absolute;
  left:16%;
  right:16%;
  top:7px;
  height:1px;
  background:rgba(128,157,176,.45);
}

.performance-period-progress > div{
  position:relative;
  text-align:center;
}

.performance-period-progress span{
  width:10px;
  height:10px;
  margin:2px auto 6px;
  display:block;
  border:2px solid #d8e2e8;
  border-radius:50%;
  background:#08121c;
}

.performance-period-progress .current span{
  border-color:#50c8ff;
  background:#50c8ff;
}

.performance-period-progress strong{
  display:block;
  font-size:8.5px;
}

.performance-period-progress small{
  display:block;
  margin-top:2px;
  color:rgba(197,211,220,.50);
  font-size:7.5px;
}

.eligibility-criteria-card > header{
  justify-content:space-between;
}

.eligibility-criteria-card > header > div{
  margin-right:auto;
}

.eligibility-criteria-list{
  padding:5px 12px 10px;
}

.eligibility-criteria-list > div{
  min-height:40px;
  display:grid;
  grid-template-columns:30px 1fr auto;
  gap:8px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.eligibility-criteria-list > div:last-child{
  border-bottom:0;
}

.eligibility-criteria-list > div > span{
  color:#50c8ff;
  font-size:18px;
}

.eligibility-criteria-list strong{
  display:block;
  font-size:9.5px;
}

.eligibility-criteria-list small{
  display:block;
  margin-top:2px;
  color:rgba(197,211,220,.50);
  font-size:7.5px;
}

.eligibility-criteria-list b{
  font-size:10px;
}

/* SECONDARY */

.performance-secondary-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:1.05fr .95fr .66fr;
  gap:8px;
}

.performance-breakdown-table{
  padding:4px 12px 8px;
}

.performance-breakdown-table > div{
  min-height:32px;
  display:grid;
  grid-template-columns:1.4fr .8fr .8fr .65fr;
  gap:8px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
  font-size:8.5px;
}

.performance-breakdown-table > div.head{
  color:rgba(194,209,219,.56);
  font-size:7.5px;
}

.performance-breakdown-table > div:last-child{
  border-bottom:0;
}

.performance-breakdown-table small{
  display:block;
  margin-top:2px;
  color:rgba(194,209,219,.46);
  font-size:7px;
}

.performance-source-flow{
  min-height:88px;
  padding:12px;
  display:grid;
  grid-template-columns:1fr 18px 1fr 18px 1fr 18px 1fr;
  align-items:center;
}

.performance-source-flow > div{
  text-align:center;
}

.performance-source-flow > div > span{
  width:38px;
  height:38px;
  margin:0 auto 5px;
  display:grid;
  place-items:center;
  border:1px solid rgba(54,187,247,.48);
  border-radius:50%;
  color:#50c8ff;
  font-size:17px;
}

.performance-source-flow > div:nth-of-type(2) > span,
.performance-source-flow > div:nth-of-type(3) > span{
  color:#4eddb9;
  border-color:rgba(64,220,178,.55);
}

.performance-source-flow > div:nth-of-type(4) > span{
  color:#bb7bff;
  border-color:rgba(172,88,239,.58);
}

.performance-source-flow strong{
  display:block;
  font-size:8px;
}

.performance-source-flow small{
  display:block;
  margin-top:2px;
  color:rgba(197,211,220,.50);
  font-size:7px;
}

.performance-source-flow > b{
  color:#aebdc6;
  text-align:center;
  font-weight:400;
}

.performance-source-card > p{
  margin:0 12px 10px;
  padding:8px 10px;
  border-top:1px solid rgba(255,255,255,.05);
  color:#cbd9e1;
  font-size:8px;
}

.performance-source-card > p small{
  color:rgba(194,209,219,.48);
  font-size:7px;
}

.applicable-performance-policy > div{
  padding:8px 12px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
}

.applicable-performance-policy > div span{
  color:rgba(203,216,225,.62);
  font-size:8.5px;
}

.applicable-performance-policy > div strong{
  color:#edf3f6;
  font-size:8.5px;
}

.applicable-performance-policy footer{
  padding:0 12px 10px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}

.applicable-performance-policy footer button:last-child{
  border-color:rgba(54,187,247,.62);
  color:#50c8ff;
}

/* BOTTOM */

.performance-bottom-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:.78fr 1.3fr .66fr;
  gap:8px;
}

.performance-empty{
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.performance-empty > span{
  color:#dce6eb;
  font-size:28px;
}

.performance-empty p{
  margin:0;
  color:#dce7ec;
  font-size:9px;
}

.performance-empty small{
  color:rgba(197,211,220,.48);
  font-size:7.5px;
}

.performance-incentive-flow{
  min-height:82px;
  padding:10px;
  display:grid;
  grid-template-columns:1fr 18px 1fr 18px 1fr 18px 1fr;
  align-items:center;
}

.performance-incentive-flow > div{
  text-align:center;
}

.performance-incentive-flow > div > span{
  color:#50c8ff;
  font-size:20px;
}

.performance-incentive-flow > div:nth-of-type(2) > span{
  color:#4eddb9;
}

.performance-incentive-flow > div:nth-of-type(3) > span{
  color:#bb7bff;
}

.performance-incentive-flow > div:nth-of-type(4) > span{
  color:#f0b63f;
}

.performance-incentive-flow strong{
  display:block;
  margin-top:3px;
  font-size:7.5px;
}

.performance-incentive-flow small{
  display:block;
  margin-top:2px;
  color:rgba(197,211,220,.50);
  font-size:6.8px;
}

.performance-incentive-flow > b{
  color:#aebdc6;
  text-align:center;
  font-weight:400;
}

.performance-disclosure-card p{
  margin:0;
  padding:10px 12px;
  color:rgba(207,219,227,.68);
  font-size:8.5px;
  line-height:1.45;
}

.performance-disclosure-card > button{
  width:calc(100% - 24px);
  margin:0 12px 10px;
}

/* RESPONSIVE */

@media (max-width:1250px){
  #partnerPerformanceView .partner-shell{
    grid-template-columns:230px minmax(0,1fr);
  }

  .performance-kpi-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .performance-main-grid,
  .performance-secondary-grid,
  .performance-bottom-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:1000px){
  #partnerPerformanceView .partner-shell{
    grid-template-columns:1fr;
  }

  #partnerPerformanceView .partner-sidebar{
    display:none;
  }

  .performance-main-grid,
  .performance-secondary-grid,
  .performance-bottom-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .partner-performance-content{
    width:calc(100% - 28px);
  }

  #partnerPerformanceView .partner-topbar{
    padding:12px 14px;
  }

  #partnerPerformanceView .partner-search{
    width:100%;
  }

  #partnerPerformanceView .partner-top-actions{
    display:none;
  }

  .partner-performance-hero h1{
    font-size:38px;
  }

  .performance-period-bar,
  .performance-kpi-grid{
    grid-template-columns:1fr;
  }

  .performance-source-flow,
  .performance-incentive-flow{
    grid-template-columns:1fr;
    gap:8px;
  }

  .performance-source-flow > b,
  .performance-incentive-flow > b{
    display:none;
  }
}


/* =========================================================
   SCREEN 25 — PAR COMMISSION
   ========================================================= */

body:has(#partnerCommissionView.active) > .topbar{
  display:none;
}

body:has(#partnerCommissionView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#partnerCommissionView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 78% 8%,rgba(46,130,195,.08),transparent 28%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#partnerCommissionView.active{
  display:block;
}

#partnerCommissionView .partner-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:278px minmax(0,1fr);
}

#partnerCommissionView .partner-sidebar{
  min-height:100vh;
  padding:20px 20px 24px;
  border-right:1px solid rgba(87,173,228,.18);
  background:
    radial-gradient(circle at 50% 8%,rgba(25,100,155,.10),transparent 30%),
    #06101a;
}

#partnerCommissionView .partner-brand{
  min-height:74px;
  padding:0 10px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.07);
}

#partnerCommissionView .partner-brand strong{
  color:#f0bd50;
  font-size:24px;
}

#partnerCommissionView .partner-brand span{
  margin-top:4px;
  color:#d4dde4;
  font-size:8px;
  letter-spacing:.28em;
}

#partnerCommissionView .partner-nav-label{
  display:block;
  margin:22px 10px 9px;
  color:#dce5ea;
  font-size:10px;
  letter-spacing:.24em;
}

#partnerCommissionView .partner-nav{
  display:grid;
  gap:5px;
}

#partnerCommissionView .partner-nav-item{
  width:100%;
  min-height:46px;
  padding:0 12px;
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  border:1px solid transparent;
  border-radius:10px;
  color:#d8e2e8;
  background:transparent;
  text-align:left;
}

#partnerCommissionView .partner-nav-item > span{
  color:#dbe5eb;
  font-size:20px;
}

#partnerCommissionView .partner-nav-item strong{
  display:block;
  font-size:13px;
  font-weight:600;
  line-height:1.15;
}

#partnerCommissionView .partner-nav-item small{
  display:block;
  margin-top:3px;
  color:rgba(203,216,225,.50);
  font-size:8px;
}

#partnerCommissionView .partner-nav-item.active{
  border-color:rgba(239,177,63,.70);
  color:#fff;
  background:
    linear-gradient(90deg,rgba(239,177,63,.18),rgba(239,177,63,.03));
  box-shadow:0 0 18px rgba(239,177,63,.10);
}

#partnerCommissionView .partner-nav-item.active > span{
  color:#f0b63f;
}

#partnerCommissionView .partner-sidebar-vision{
  margin-top:18px;
  min-height:206px;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid rgba(92,165,212,.16);
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(5,15,25,.18),rgba(5,15,25,.62)),
    url("./assets/customer/home/hero-customer-home.webp") center / cover no-repeat;
}

#partnerCommissionView .partner-sidebar-vision span{
  color:#f1f4f6;
  font-size:10px;
  line-height:1.55;
  letter-spacing:.18em;
}

#partnerCommissionView .partner-sidebar-vision small{
  margin-top:18px;
  color:#d8e1e7;
  font-size:9px;
}

/* TOPBAR */

#partnerCommissionView .partner-main{
  min-width:0;
}

#partnerCommissionView .partner-topbar{
  min-height:84px;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid rgba(92,165,212,.12);
  background:rgba(4,11,18,.96);
}

#partnerCommissionView .partner-search{
  width:min(730px,62%);
  min-height:48px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(92,165,212,.18);
  border-radius:12px;
  background:rgba(13,32,48,.66);
}

#partnerCommissionView .partner-search input{
  width:100%;
  border:0;
  outline:0;
  color:#eaf0f4;
  background:transparent;
  font-size:13px;
}

#partnerCommissionView .partner-search span{
  color:#dce7ec;
  font-size:22px;
}

#partnerCommissionView .partner-top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

#partnerCommissionView .partner-top-actions button{
  min-width:42px;
  height:42px;
  border:1px solid rgba(92,165,212,.16);
  border-radius:12px;
  color:#e1ebf0;
  background:rgba(10,24,36,.72);
}

#partnerCommissionView .partner-top-actions button[aria-label="Ngôn ngữ"]{
  min-width:74px;
  padding:0 10px;
  font-size:11px;
  font-weight:700;
}

#partnerCommissionView .partner-user{
  display:flex;
  align-items:center;
  gap:10px;
  padding-left:10px;
}

#partnerCommissionView .partner-avatar{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  color:#d9e5ff;
  font-size:22px;
  background:linear-gradient(180deg,#8cabd9,#436590);
}

#partnerCommissionView .partner-user > div{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}

#partnerCommissionView .partner-user strong{
  display:block;
  font-size:13px;
}

#partnerCommissionView .partner-user small{
  display:block;
  margin-top:3px;
  color:rgba(210,222,230,.58);
  font-size:9px;
}

/* CONTENT */

.partner-commission-content{
  width:min(1420px,calc(100% - 48px));
  margin:0 auto;
  padding:12px 0 28px;
}

.partner-commission-breadcrumb{
  min-height:28px;
  display:flex;
  align-items:center;
  gap:9px;
  color:rgba(202,215,224,.58);
  font-size:10px;
}

.partner-commission-breadcrumb strong{
  color:#6ed5ff;
}

.partner-commission-hero{
  position:relative;
  min-height:155px;
  padding:22px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  overflow:hidden;
  border-radius:16px;
  background:
    linear-gradient(90deg,
      rgba(4,11,18,.98) 0%,
      rgba(4,11,18,.82) 36%,
      rgba(4,11,18,.14) 73%,
      rgba(4,11,18,.02) 100%),
    url("./assets/customer/home/hero-customer-home.webp") center 46% / cover no-repeat;
}

.partner-commission-hero h1{
  margin:0;
  font-size:50px;
  line-height:.98;
}

.partner-commission-hero > div:first-child > span{
  display:block;
  margin-top:7px;
  color:#eef3f6;
  font-size:15px;
  letter-spacing:.18em;
}

.partner-commission-hero p{
  margin:9px 0 2px;
  color:rgba(224,234,240,.82);
  font-size:13px;
}

.partner-commission-hero small{
  color:rgba(203,218,227,.60);
  font-size:10px;
}

.commission-period-picker{
  min-width:310px;
  min-height:54px;
  padding:8px 10px;
  display:grid;
  grid-template-columns:32px 1fr auto;
  gap:8px;
  align-items:center;
  border:1px solid rgba(92,165,212,.20);
  border-radius:10px;
  background:rgba(6,18,29,.84);
}

.commission-period-picker > span{
  font-size:22px;
}

.commission-period-picker strong{
  display:block;
  font-size:9.5px;
}

.commission-period-picker small{
  display:block;
  color:rgba(203,216,225,.52);
  font-size:7.5px;
}

.commission-period-picker button{
  min-height:34px;
  padding:0 10px;
  border:1px solid rgba(54,187,247,.45);
  border-radius:7px;
  color:#e8eff3;
  background:rgba(10,29,43,.72);
  font-size:8.5px;
}

/* KPI */

.commission-kpi-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}

.commission-kpi-grid article{
  min-height:96px;
  padding:12px;
  display:grid;
  grid-template-columns:42px 1fr 18px;
  gap:8px;
  align-items:center;
  border:1px solid rgba(92,165,212,.22);
  border-radius:10px;
  background:rgba(8,18,28,.95);
}

.commission-kpi-grid article > span{
  font-size:28px;
}

.commission-kpi-grid strong{
  display:block;
  font-size:10.5px;
}

.commission-kpi-grid small{
  display:block;
  margin-top:2px;
  color:rgba(203,216,225,.54);
  font-size:8.5px;
}

.commission-kpi-grid b{
  display:block;
  margin-top:8px;
  font-size:16px;
}

.commission-kpi-grid em{
  font-style:normal;
  font-size:18px;
}

.commission-kpi-grid .total{
  border-color:rgba(239,177,63,.72);
}

.commission-kpi-grid .total > span,
.commission-kpi-grid .total em{
  color:#f0b63f;
}

.commission-kpi-grid .pending{
  border-color:rgba(239,177,63,.55);
}

.commission-kpi-grid .pending > span,
.commission-kpi-grid .pending em{
  color:#efbd45;
}

.commission-kpi-grid .approved{
  border-color:rgba(64,220,178,.65);
}

.commission-kpi-grid .approved > span,
.commission-kpi-grid .approved em{
  color:#4eddb9;
}

.commission-kpi-grid .available{
  border-color:rgba(49,176,245,.72);
}

.commission-kpi-grid .available > span,
.commission-kpi-grid .available em{
  color:#43c4ff;
}

/* LAYOUT */

.commission-layout{
  margin-top:8px;
  display:grid;
  grid-template-columns:minmax(0,1.72fr) minmax(300px,.52fr);
  gap:10px;
}

.commission-main{
  min-width:0;
}

.commission-side{
  display:grid;
  align-content:start;
  gap:8px;
}

.commission-panel{
  overflow:hidden;
  border:1px solid rgba(92,165,212,.17);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.commission-panel > header{
  min-height:46px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:9px;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.commission-panel > header > span{
  color:#49caff;
  font-size:20px;
}

.commission-panel h2{
  margin:0;
  font-size:14px;
}

.commission-panel h2 + small{
  display:block;
  margin-top:2px;
  color:rgba(201,214,223,.52);
  font-size:8px;
  letter-spacing:.08em;
}

.commission-panel button{
  min-height:32px;
  padding:0 10px;
  border:1px solid rgba(239,177,63,.70);
  border-radius:7px;
  color:#e9b43e;
  background:transparent;
  font-size:8.5px;
}

/* ROW 1 */

.commission-row-one{
  display:grid;
  grid-template-columns:1.35fr .82fr;
  gap:8px;
}

.commission-status-flow{
  min-height:120px;
  padding:14px 12px;
  display:grid;
  grid-template-columns:1fr 18px 1fr 18px 1fr 18px 1fr 18px 1fr 18px 1fr;
  align-items:center;
}

.commission-status-flow > div{
  text-align:center;
}

.commission-status-flow > div > span{
  width:40px;
  height:40px;
  margin:0 auto 6px;
  display:grid;
  place-items:center;
  border:1px solid rgba(132,154,169,.48);
  border-radius:50%;
  color:#8799a6;
  font-size:17px;
}

.commission-status-flow > div.active > span{
  color:#f0b63f;
  border-color:rgba(239,177,63,.62);
}

.commission-status-flow > div.done > span{
  color:#4eddb9;
  border-color:rgba(64,220,178,.62);
}

.commission-status-flow strong{
  display:block;
  font-size:8.5px;
}

.commission-status-flow small{
  display:block;
  margin-top:2px;
  color:rgba(197,211,220,.50);
  font-size:7.5px;
}

.commission-status-flow > b{
  color:#aebdc6;
  text-align:center;
  font-size:18px;
  font-weight:400;
}

.commission-overview-lines{
  padding:6px 12px 10px;
}

.commission-overview-lines > div{
  min-height:36px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.commission-overview-lines > div:last-child{
  border-bottom:0;
}

.commission-overview-lines span{
  color:#e3ebef;
  font-size:8.5px;
}

.commission-overview-lines span small{
  display:block;
  margin-top:2px;
  color:rgba(197,211,220,.48);
  font-size:7px;
}

.commission-overview-lines strong{
  font-size:9px;
}

/* ROW 2 */

.commission-row-two{
  margin-top:8px;
  display:grid;
  grid-template-columns:1.45fr .55fr;
  gap:8px;
}

.commission-filters{
  padding:8px 10px;
  display:grid;
  grid-template-columns:140px 135px 150px 1fr;
  gap:7px;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.commission-filters button,
.commission-filters label{
  min-height:44px;
  padding:6px 9px;
  border:1px solid rgba(54,187,247,.26);
  border-radius:7px;
  color:#dce6eb;
  background:rgba(10,29,43,.52);
  text-align:left;
  font-size:7.5px;
}

.commission-filters button strong{
  display:block;
  margin-top:2px;
  font-size:8.5px;
}

.commission-filters label{
  display:flex;
  align-items:center;
  gap:8px;
}

.commission-filters label > span{
  font-size:18px;
}

.commission-filters input{
  width:100%;
  border:0;
  outline:0;
  color:#e9f0f4;
  background:transparent;
  font-size:8.5px;
}

.commission-table .head{
  min-height:36px;
  padding:0 10px;
  display:grid;
  grid-template-columns:30px .65fr .9fr 1fr 1.1fr .8fr .8fr .65fr;
  gap:7px;
  align-items:center;
  color:rgba(194,209,219,.58);
  font-size:7.8px;
}

.commission-table .empty{
  min-height:94px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-top:1px solid rgba(255,255,255,.04);
}

.commission-table .empty > span{
  color:#dce6eb;
  font-size:27px;
}

.commission-table .empty p{
  margin:0;
  color:#dce7ec;
  font-size:9px;
  text-align:center;
}

.commission-table .empty small{
  color:rgba(197,211,220,.48);
  font-size:7.5px;
}

.commission-policy-lines{
  padding:6px 12px;
}

.commission-policy-lines > div{
  min-height:34px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.commission-policy-lines > div:last-child{
  border-bottom:0;
}

.commission-policy-lines span{
  color:#e3ebef;
  font-size:8px;
}

.commission-policy-lines span small{
  display:block;
  margin-top:2px;
  color:rgba(197,211,220,.48);
  font-size:7px;
}

.commission-policy-lines strong{
  font-size:8.5px;
  text-align:right;
}

.commission-policy-card > button{
  width:calc(100% - 24px);
  margin:8px 12px 10px;
}

/* ROW 3 */

.commission-row-three{
  margin-top:8px;
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:8px;
}

.commission-determined-flow,
.commission-withdrawable-flow{
  min-height:90px;
  padding:12px;
  display:grid;
  grid-template-columns:1fr 18px 1fr 18px 1fr 18px 1fr;
  align-items:center;
}

.commission-determined-flow > div,
.commission-withdrawable-flow > div{
  text-align:center;
}

.commission-determined-flow > div > span,
.commission-withdrawable-flow > div > span{
  color:#50c8ff;
  font-size:21px;
}

.commission-determined-flow > div:nth-of-type(3) > span,
.commission-withdrawable-flow > div:nth-of-type(3) > span{
  color:#4eddb9;
}

.commission-determined-flow > div:nth-of-type(4) > span,
.commission-withdrawable-flow > div:nth-of-type(4) > span{
  color:#bb7bff;
}

.commission-determined-flow strong,
.commission-withdrawable-flow strong{
  display:block;
  margin-top:3px;
  font-size:8px;
}

.commission-determined-flow small,
.commission-withdrawable-flow small{
  display:block;
  margin-top:2px;
  color:rgba(197,211,220,.50);
  font-size:7px;
}

.commission-determined-flow > b,
.commission-withdrawable-flow > b{
  color:#aebdc6;
  text-align:center;
  font-weight:400;
}

.commission-determined-card > p,
.commission-withdrawable-card > p{
  margin:0 12px 10px;
  padding:8px 10px;
  border-top:1px solid rgba(255,255,255,.05);
  color:#cbd9e1;
  font-size:8px;
}

.commission-withdrawable-card > button{
  float:right;
  margin:0 12px 10px;
}

/* TRACEABILITY */

.commission-traceability-card{
  margin-top:8px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
}

.commission-traceability-card > header{
  border-bottom:0;
}

.commission-traceability-grid{
  padding:8px 10px;
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:8px;
}

.commission-traceability-grid small{
  color:rgba(199,213,222,.50);
  font-size:6.8px;
}

.commission-traceability-grid strong{
  display:block;
  margin-top:2px;
  overflow:hidden;
  color:#edf3f6;
  font-size:7.8px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.commission-traceability-card > button{
  margin-right:10px;
}

/* SIDE */

.commission-source-flow{
  padding:10px 12px 12px;
  display:grid;
  gap:5px;
}

.commission-source-flow > div{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:9px;
  align-items:center;
}

.commission-source-flow > div > span{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border:1px solid rgba(54,187,247,.45);
  border-radius:8px;
  color:#50c8ff;
  font-size:16px;
}

.commission-source-flow strong{
  display:block;
  font-size:9px;
}

.commission-source-flow small{
  display:block;
  margin-top:2px;
  color:rgba(197,211,220,.50);
  font-size:7.5px;
}

.commission-source-flow > b{
  margin-left:15px;
  color:#4eddb9;
  font-size:13px;
}

.recent-commission-timeline{
  padding:10px 12px 8px;
}

.recent-commission-timeline > div{
  position:relative;
  min-height:48px;
  padding-left:28px;
}

.recent-commission-timeline > div:not(:last-child)::before{
  content:"";
  position:absolute;
  left:7px;
  top:17px;
  width:1px;
  height:33px;
  background:rgba(130,153,168,.35);
}

.recent-commission-timeline > div > span{
  position:absolute;
  left:0;
  top:2px;
  width:15px;
  height:15px;
  border:1px solid rgba(170,188,200,.52);
  border-radius:50%;
  background:#08121c;
}

.recent-commission-timeline strong{
  display:block;
  font-size:8.5px;
}

.recent-commission-timeline small{
  display:block;
  margin-top:2px;
  color:rgba(197,211,220,.50);
  font-size:7px;
}

.recent-commission-timeline b{
  position:absolute;
  right:0;
  top:2px;
  font-size:8px;
}

.recent-commission-card > p{
  margin:0 12px 10px;
  padding:8px 10px;
  border-top:1px solid rgba(255,255,255,.05);
  color:#d6e1e7;
  font-size:8.5px;
}

.recent-commission-card > p small{
  color:rgba(197,211,220,.48);
  font-size:7.5px;
}

/* RESPONSIVE */

@media (max-width:1250px){
  #partnerCommissionView .partner-shell{
    grid-template-columns:230px minmax(0,1fr);
  }

  .commission-kpi-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .commission-layout{
    grid-template-columns:1fr;
  }

  .commission-side{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:1000px){
  #partnerCommissionView .partner-shell{
    grid-template-columns:1fr;
  }

  #partnerCommissionView .partner-sidebar{
    display:none;
  }

  .commission-row-one,
  .commission-row-two,
  .commission-row-three{
    grid-template-columns:1fr;
  }

  .commission-side{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .partner-commission-content{
    width:calc(100% - 28px);
  }

  #partnerCommissionView .partner-topbar{
    padding:12px 14px;
  }

  #partnerCommissionView .partner-search{
    width:100%;
  }

  #partnerCommissionView .partner-top-actions{
    display:none;
  }

  .partner-commission-hero{
    align-items:flex-start;
    flex-direction:column;
  }

  .partner-commission-hero h1{
    font-size:38px;
  }

  .commission-period-picker{
    width:100%;
    min-width:0;
  }

  .commission-kpi-grid,
  .commission-filters{
    grid-template-columns:1fr;
  }

  .commission-status-flow,
  .commission-determined-flow,
  .commission-withdrawable-flow{
    grid-template-columns:1fr;
    gap:8px;
  }

  .commission-status-flow > b,
  .commission-determined-flow > b,
  .commission-withdrawable-flow > b{
    display:none;
  }

  .commission-traceability-card{
    display:block;
  }

  .commission-traceability-grid{
    grid-template-columns:1fr;
  }

  .commission-traceability-card > button{
    width:calc(100% - 24px);
    margin:0 12px 10px;
  }
}


/* =========================================================
   SCREEN 27 — PAR COMMISSION DETAIL
   ========================================================= */

body:has(#partnerCommissionDetailView.active) > .topbar{
  display:none;
}

body:has(#partnerCommissionDetailView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#partnerCommissionDetailView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 78% 8%,rgba(46,130,195,.08),transparent 28%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#partnerCommissionDetailView.active{
  display:block;
}

#partnerCommissionDetailView .partner-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:278px minmax(0,1fr);
}

#partnerCommissionDetailView .partner-sidebar{
  min-height:100vh;
  padding:20px 20px 24px;
  border-right:1px solid rgba(87,173,228,.18);
  background:
    radial-gradient(circle at 50% 8%,rgba(25,100,155,.10),transparent 30%),
    #06101a;
}

#partnerCommissionDetailView .partner-brand{
  min-height:74px;
  padding:0 10px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.07);
}

#partnerCommissionDetailView .partner-brand strong{
  color:#f0bd50;
  font-size:24px;
}

#partnerCommissionDetailView .partner-brand span{
  margin-top:4px;
  color:#d4dde4;
  font-size:8px;
  letter-spacing:.28em;
}

#partnerCommissionDetailView .partner-nav-label{
  display:block;
  margin:22px 10px 9px;
  color:#dce5ea;
  font-size:10px;
  letter-spacing:.24em;
}

#partnerCommissionDetailView .partner-nav{
  display:grid;
  gap:5px;
}

#partnerCommissionDetailView .partner-nav-item{
  width:100%;
  min-height:46px;
  padding:0 12px;
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  border:1px solid transparent;
  border-radius:10px;
  color:#d8e2e8;
  background:transparent;
  text-align:left;
}

#partnerCommissionDetailView .partner-nav-item > span{
  color:#dbe5eb;
  font-size:20px;
}

#partnerCommissionDetailView .partner-nav-item strong{
  display:block;
  font-size:13px;
  font-weight:600;
  line-height:1.15;
}

#partnerCommissionDetailView .partner-nav-item small{
  display:block;
  margin-top:3px;
  color:rgba(203,216,225,.50);
  font-size:8px;
}

#partnerCommissionDetailView .partner-nav-item.active{
  border-color:rgba(239,177,63,.70);
  color:#fff;
  background:
    linear-gradient(90deg,rgba(239,177,63,.18),rgba(239,177,63,.03));
  box-shadow:0 0 18px rgba(239,177,63,.10);
}

#partnerCommissionDetailView .partner-nav-item.active > span{
  color:#f0b63f;
}

#partnerCommissionDetailView .partner-sidebar-vision{
  margin-top:18px;
  min-height:206px;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid rgba(92,165,212,.16);
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(5,15,25,.18),rgba(5,15,25,.62)),
    url("./assets/customer/home/hero-customer-home.webp") center / cover no-repeat;
}

#partnerCommissionDetailView .partner-sidebar-vision span{
  color:#f1f4f6;
  font-size:10px;
  line-height:1.55;
  letter-spacing:.18em;
}

#partnerCommissionDetailView .partner-sidebar-vision small{
  margin-top:18px;
  color:#d8e1e7;
  font-size:9px;
}

/* TOPBAR */

#partnerCommissionDetailView .partner-main{
  min-width:0;
}

#partnerCommissionDetailView .partner-topbar{
  min-height:84px;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid rgba(92,165,212,.12);
  background:rgba(4,11,18,.96);
}

#partnerCommissionDetailView .partner-search{
  width:min(730px,62%);
  min-height:48px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(92,165,212,.18);
  border-radius:12px;
  background:rgba(13,32,48,.66);
}

#partnerCommissionDetailView .partner-search input{
  width:100%;
  border:0;
  outline:0;
  color:#eaf0f4;
  background:transparent;
  font-size:13px;
}

#partnerCommissionDetailView .partner-search span{
  color:#dce7ec;
  font-size:22px;
}

#partnerCommissionDetailView .partner-top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

#partnerCommissionDetailView .partner-top-actions button{
  min-width:42px;
  height:42px;
  border:1px solid rgba(92,165,212,.16);
  border-radius:12px;
  color:#e1ebf0;
  background:rgba(10,24,36,.72);
}

#partnerCommissionDetailView .partner-top-actions button[aria-label="Ngôn ngữ"]{
  min-width:74px;
  padding:0 10px;
  font-size:11px;
  font-weight:700;
}

#partnerCommissionDetailView .partner-user{
  display:flex;
  align-items:center;
  gap:10px;
  padding-left:10px;
}

#partnerCommissionDetailView .partner-avatar{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  color:#d9e5ff;
  font-size:22px;
  background:linear-gradient(180deg,#8cabd9,#436590);
}

#partnerCommissionDetailView .partner-user > div{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}

#partnerCommissionDetailView .partner-user strong{
  display:block;
  font-size:13px;
}

#partnerCommissionDetailView .partner-user small{
  display:block;
  margin-top:3px;
  color:rgba(210,222,230,.58);
  font-size:9px;
}

/* CONTENT */

.partner-commission-detail-content{
  width:min(1420px,calc(100% - 48px));
  margin:0 auto;
  padding:12px 0 28px;
}

.partner-commission-detail-breadcrumb{
  min-height:28px;
  display:flex;
  align-items:center;
  gap:9px;
  color:rgba(202,215,224,.58);
  font-size:10px;
}

.partner-commission-detail-breadcrumb strong{
  color:#6ed5ff;
}

.partner-commission-detail-hero{
  position:relative;
  min-height:158px;
  padding:22px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  overflow:hidden;
  border-radius:16px;
  background:
    linear-gradient(90deg,
      rgba(4,11,18,.98) 0%,
      rgba(4,11,18,.82) 36%,
      rgba(4,11,18,.14) 73%,
      rgba(4,11,18,.02) 100%),
    url("./assets/customer/home/hero-customer-home.webp") center 46% / cover no-repeat;
}

.partner-commission-detail-hero h1{
  margin:0;
  font-size:48px;
  line-height:.98;
}

.partner-commission-detail-hero > div:first-child > span{
  display:block;
  margin-top:7px;
  color:#eef3f6;
  font-size:15px;
  letter-spacing:.18em;
}

.partner-commission-detail-hero p{
  margin:9px 0 2px;
  color:rgba(224,234,240,.82);
  font-size:12.5px;
}

.partner-commission-detail-hero small{
  color:rgba(203,218,227,.60);
  font-size:10px;
}

.commission-detail-id-box{
  min-width:320px;
  padding:10px 12px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:5px 10px;
  align-items:center;
  border:1px solid rgba(92,165,212,.18);
  border-radius:10px;
  background:rgba(7,18,29,.86);
}

.commission-detail-id-box small{
  grid-column:1;
  font-size:8px;
}

.commission-detail-id-box strong{
  grid-column:1;
  font-size:17px;
  letter-spacing:.08em;
}

.commission-detail-id-box button{
  grid-column:2;
  grid-row:1/3;
  min-height:34px;
  padding:0 12px;
  border:1px solid rgba(239,177,63,.70);
  border-radius:7px;
  color:#e9b43e;
  background:transparent;
  font-size:8.5px;
}

/* RESULT */

.commission-detail-result{
  margin-top:8px;
  min-height:116px;
  padding:12px 16px;
  display:grid;
  grid-template-columns:76px 1.05fr .75fr .9fr .9fr;
  gap:14px;
  align-items:center;
  border:1px solid rgba(239,177,63,.72);
  border-radius:12px;
  background:
    radial-gradient(circle at 10% 50%,rgba(239,177,63,.11),transparent 30%),
    rgba(8,18,28,.96);
}

.commission-detail-icon{
  color:#f0b63f;
  font-size:60px;
}

.commission-detail-result small{
  display:block;
  color:rgba(204,216,225,.56);
  font-size:8px;
}

.commission-detail-result strong{
  display:block;
  margin-top:3px;
  font-size:11px;
}

.commission-detail-result h2{
  margin:6px 0 0;
  font-size:26px;
}

.commission-detail-result em{
  display:block;
  margin-top:3px;
  color:rgba(203,216,225,.52);
  font-size:8px;
  font-style:normal;
}

.commission-detail-result-status{
  padding-left:16px;
  border-left:1px solid rgba(255,255,255,.07);
}

.commission-detail-result-status strong{
  color:#f0ba40;
  font-size:15px;
}

.commission-detail-meta{
  padding-left:14px;
  border-left:1px solid rgba(255,255,255,.07);
}

.commission-detail-meta > div{
  min-height:28px;
}

.commission-detail-meta strong{
  margin-top:2px;
  font-size:9px;
}

/* LAYOUT */

.commission-detail-layout{
  margin-top:8px;
}

.commission-detail-main{
  min-width:0;
}

.commission-detail-panel{
  overflow:hidden;
  border:1px solid rgba(92,165,212,.17);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.commission-detail-panel > header{
  min-height:46px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:9px;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.commission-detail-panel > header > span{
  color:#49caff;
  font-size:20px;
}

.commission-detail-panel h2{
  margin:0;
  font-size:14px;
}

.commission-detail-panel h2 + small{
  display:block;
  margin-top:2px;
  color:rgba(201,214,223,.52);
  font-size:8px;
  letter-spacing:.08em;
}

.commission-detail-panel button{
  min-height:32px;
  padding:0 10px;
  border:1px solid rgba(239,177,63,.70);
  border-radius:7px;
  color:#e9b43e;
  background:transparent;
  font-size:8.5px;
}

/* ROW 1 */

.commission-detail-row-one{
  display:grid;
  grid-template-columns:1.5fr .67fr .62fr;
  gap:8px;
}

.commission-detail-status-flow{
  min-height:132px;
  padding:14px 12px;
  display:grid;
  grid-template-columns:1fr 18px 1fr 18px 1fr 18px 1fr 18px 1fr 18px 1fr;
  align-items:center;
}

.commission-detail-status-flow > div{
  text-align:center;
}

.commission-detail-status-flow > div > span{
  width:42px;
  height:42px;
  margin:0 auto 6px;
  display:grid;
  place-items:center;
  border:1px solid rgba(132,154,169,.48);
  border-radius:50%;
  color:#8799a6;
  font-size:17px;
}

.commission-detail-status-flow > div.active > span{
  color:#f0b63f;
  border-color:rgba(239,177,63,.62);
}

.commission-detail-status-flow strong{
  display:block;
  font-size:8.2px;
}

.commission-detail-status-flow small{
  display:block;
  margin-top:2px;
  color:rgba(197,211,220,.50);
  font-size:7px;
}

.commission-detail-status-flow > b{
  color:#aebdc6;
  text-align:center;
  font-size:18px;
  font-weight:400;
}

.commission-detail-lines{
  padding:6px 12px 8px;
}

.commission-detail-lines > div{
  min-height:34px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.commission-detail-lines > div:last-child{
  border-bottom:0;
}

.commission-detail-lines span{
  color:rgba(207,219,227,.66);
  font-size:8px;
}

.commission-detail-lines strong{
  font-size:8.5px;
  text-align:right;
}

.commission-detail-lines strong.active{
  color:#4eddb9;
}

.source-transaction-card > button,
.referral-source-commission-card > button,
.policy-applied-card > button,
.financial-record-card > button,
.tax-compliance-card > button,
.next-financial-step-card > button{
  width:calc(100% - 24px);
  margin:6px 12px 10px;
}

/* ROW 2 */

.commission-detail-row-two{
  margin-top:8px;
  display:grid;
  grid-template-columns:1.1fr .72fr .66fr;
  gap:8px;
}

.eligibility-evaluation-grid{
  padding:8px 12px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 14px;
}

.eligibility-evaluation-grid > div{
  min-height:48px;
  padding:7px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.eligibility-evaluation-grid small{
  color:rgba(201,214,223,.54);
  font-size:7.5px;
}

.eligibility-evaluation-grid strong{
  display:block;
  margin-top:4px;
  font-size:9px;
}

.eligibility-evaluation-card > button{
  float:right;
  margin:0 12px 10px;
}

.commission-calculation-lines{
  padding:6px 12px 8px;
}

.commission-calculation-lines > div{
  min-height:38px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.commission-calculation-lines span{
  color:#e3ebef;
  font-size:8px;
}

.commission-calculation-lines span small{
  display:block;
  margin-top:2px;
  color:rgba(197,211,220,.48);
  font-size:7px;
}

.commission-calculation-lines strong{
  font-size:8.5px;
}

/* ROW 3 */

.commission-detail-row-three{
  margin-top:8px;
  display:grid;
  grid-template-columns:.9fr .62fr 1.18fr;
  gap:8px;
}

.financial-record-grid{
  padding:8px 12px;
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:8px 14px;
}

.financial-record-grid small{
  color:rgba(200,214,223,.52);
  font-size:7.5px;
}

.financial-record-grid strong{
  display:block;
  margin-top:3px;
  font-size:8.8px;
}

.next-financial-flow{
  min-height:78px;
  padding:10px;
  display:grid;
  grid-template-columns:1fr 15px 1fr 15px 1fr 15px 1fr 15px 1fr;
  align-items:center;
}

.next-financial-flow > div{
  text-align:center;
}

.next-financial-flow > div > span{
  color:#50c8ff;
  font-size:18px;
}

.next-financial-flow > div:nth-of-type(2) > span,
.next-financial-flow > div:nth-of-type(3) > span{
  color:#4eddb9;
}

.next-financial-flow > div:nth-of-type(4) > span{
  color:#bb7bff;
}

.next-financial-flow > div:nth-of-type(5) > span{
  color:#f0b63f;
}

.next-financial-flow strong{
  display:block;
  margin-top:2px;
  font-size:7.3px;
}

.next-financial-flow small{
  display:block;
  margin-top:2px;
  color:rgba(197,211,220,.50);
  font-size:6.6px;
}

.next-financial-flow > b{
  color:#aebdc6;
  text-align:center;
  font-weight:400;
}

.next-financial-step-card > p{
  margin:0 12px 6px;
  padding:7px 9px;
  border-top:1px solid rgba(255,255,255,.05);
  color:#cbd9e1;
  font-size:7.6px;
}

/* ROW 4 */

.commission-detail-row-four{
  margin-top:8px;
  display:grid;
  grid-template-columns:1.45fr .75fr;
  gap:8px;
}

.full-traceability-flow{
  min-height:86px;
  padding:10px;
  display:grid;
  grid-template-columns:1fr 14px 1fr 14px 1fr 14px 1fr 14px 1fr 14px 1fr 14px 1fr 14px 1fr;
  align-items:center;
}

.full-traceability-flow > div{
  text-align:center;
}

.full-traceability-flow > div > span{
  color:#50c8ff;
  font-size:17px;
}

.full-traceability-flow > div:nth-of-type(2) > span,
.full-traceability-flow > div:nth-of-type(6) > span{
  color:#f0b63f;
}

.full-traceability-flow > div:nth-of-type(3) > span,
.full-traceability-flow > div:nth-of-type(5) > span{
  color:#4eddb9;
}

.full-traceability-flow strong{
  display:block;
  margin-top:3px;
  font-size:7.3px;
}

.full-traceability-flow small{
  display:block;
  margin-top:2px;
  color:rgba(197,211,220,.50);
  font-size:6.6px;
}

.full-traceability-flow > b{
  color:#aebdc6;
  text-align:center;
  font-weight:400;
}

.audit-trail-list{
  padding:7px 12px 6px;
}

.audit-trail-list > div{
  position:relative;
  min-height:28px;
  padding-left:24px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
}

.audit-trail-list > div:not(:last-child)::before{
  content:"";
  position:absolute;
  left:7px;
  top:14px;
  width:1px;
  height:20px;
  background:rgba(130,153,168,.35);
}

.audit-trail-list span{
  position:absolute;
  left:0;
  top:7px;
  width:14px;
  height:14px;
  border:1px solid #50c8ff;
  border-radius:50%;
  background:#08121c;
}

.audit-trail-list strong{
  font-size:7.8px;
}

.audit-trail-list b{
  font-size:7.5px;
}

.audit-trail-card > button{
  width:calc(100% - 24px);
  margin:4px 12px 10px;
}

/* RESPONSIVE */

@media (max-width:1250px){
  #partnerCommissionDetailView .partner-shell{
    grid-template-columns:230px minmax(0,1fr);
  }

  .commission-detail-row-one,
  .commission-detail-row-two,
  .commission-detail-row-three{
    grid-template-columns:1fr 1fr;
  }

  .commission-detail-row-four{
    grid-template-columns:1fr;
  }
}

@media (max-width:1000px){
  #partnerCommissionDetailView .partner-shell{
    grid-template-columns:1fr;
  }

  #partnerCommissionDetailView .partner-sidebar{
    display:none;
  }

  .commission-detail-result,
  .commission-detail-row-one,
  .commission-detail-row-two,
  .commission-detail-row-three{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .partner-commission-detail-content{
    width:calc(100% - 28px);
  }

  #partnerCommissionDetailView .partner-topbar{
    padding:12px 14px;
  }

  #partnerCommissionDetailView .partner-search{
    width:100%;
  }

  #partnerCommissionDetailView .partner-top-actions{
    display:none;
  }

  .partner-commission-detail-hero{
    align-items:flex-start;
    flex-direction:column;
  }

  .partner-commission-detail-hero h1{
    font-size:38px;
  }

  .commission-detail-id-box{
    width:100%;
    min-width:0;
  }

  .commission-detail-status-flow,
  .next-financial-flow,
  .full-traceability-flow{
    grid-template-columns:1fr;
    gap:8px;
  }

  .commission-detail-status-flow > b,
  .next-financial-flow > b,
  .full-traceability-flow > b{
    display:none;
  }
}


/* =========================================================
   SCREEN 28 — PAR INCENTIVES
   ========================================================= */

body:has(#partnerIncentivesView.active) > .topbar{
  display:none;
}

body:has(#partnerIncentivesView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#partnerIncentivesView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 78% 8%,rgba(46,130,195,.08),transparent 28%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#partnerIncentivesView.active{
  display:block;
}

#partnerIncentivesView .partner-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:278px minmax(0,1fr);
}

#partnerIncentivesView .partner-sidebar{
  min-height:100vh;
  padding:20px 20px 24px;
  border-right:1px solid rgba(87,173,228,.18);
  background:
    radial-gradient(circle at 50% 8%,rgba(25,100,155,.10),transparent 30%),
    #06101a;
}

#partnerIncentivesView .partner-brand{
  min-height:74px;
  padding:0 10px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.07);
}

#partnerIncentivesView .partner-brand strong{
  color:#f0bd50;
  font-size:24px;
}

#partnerIncentivesView .partner-brand span{
  margin-top:4px;
  color:#d4dde4;
  font-size:8px;
  letter-spacing:.28em;
}

#partnerIncentivesView .partner-nav-label{
  display:block;
  margin:22px 10px 9px;
  color:#dce5ea;
  font-size:10px;
  letter-spacing:.24em;
}

#partnerIncentivesView .partner-nav{
  display:grid;
  gap:5px;
}

#partnerIncentivesView .partner-nav-item{
  width:100%;
  min-height:46px;
  padding:0 12px;
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  border:1px solid transparent;
  border-radius:10px;
  color:#d8e2e8;
  background:transparent;
  text-align:left;
}

#partnerIncentivesView .partner-nav-item > span{
  color:#dbe5eb;
  font-size:20px;
}

#partnerIncentivesView .partner-nav-item strong{
  display:block;
  font-size:13px;
  font-weight:600;
  line-height:1.15;
}

#partnerIncentivesView .partner-nav-item small{
  display:block;
  margin-top:3px;
  color:rgba(203,216,225,.50);
  font-size:8px;
}

#partnerIncentivesView .partner-nav-item.active{
  border-color:rgba(239,177,63,.70);
  color:#fff;
  background:
    linear-gradient(90deg,rgba(239,177,63,.18),rgba(239,177,63,.03));
  box-shadow:0 0 18px rgba(239,177,63,.10);
}

#partnerIncentivesView .partner-nav-item.active > span{
  color:#f0b63f;
}

#partnerIncentivesView .partner-sidebar-vision{
  margin-top:18px;
  min-height:206px;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid rgba(92,165,212,.16);
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(5,15,25,.18),rgba(5,15,25,.62)),
    url("./assets/customer/home/hero-customer-home.webp") center / cover no-repeat;
}

#partnerIncentivesView .partner-sidebar-vision span{
  color:#f1f4f6;
  font-size:10px;
  line-height:1.55;
  letter-spacing:.18em;
}

#partnerIncentivesView .partner-sidebar-vision small{
  margin-top:18px;
  color:#d8e1e7;
  font-size:9px;
}

/* TOPBAR */

#partnerIncentivesView .partner-main{
  min-width:0;
}

#partnerIncentivesView .partner-topbar{
  min-height:84px;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid rgba(92,165,212,.12);
  background:rgba(4,11,18,.96);
}

#partnerIncentivesView .partner-search{
  width:min(730px,62%);
  min-height:48px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(92,165,212,.18);
  border-radius:12px;
  background:rgba(13,32,48,.66);
}

#partnerIncentivesView .partner-search input{
  width:100%;
  border:0;
  outline:0;
  color:#eaf0f4;
  background:transparent;
  font-size:13px;
}

#partnerIncentivesView .partner-search span{
  color:#dce7ec;
  font-size:22px;
}

#partnerIncentivesView .partner-top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

#partnerIncentivesView .partner-top-actions button{
  min-width:42px;
  height:42px;
  border:1px solid rgba(92,165,212,.16);
  border-radius:12px;
  color:#e1ebf0;
  background:rgba(10,24,36,.72);
}

#partnerIncentivesView .partner-top-actions button[aria-label="Ngôn ngữ"]{
  min-width:74px;
  padding:0 10px;
  font-size:11px;
  font-weight:700;
}

#partnerIncentivesView .partner-user{
  display:flex;
  align-items:center;
  gap:10px;
  padding-left:10px;
}

#partnerIncentivesView .partner-avatar{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  color:#d9e5ff;
  font-size:22px;
  background:linear-gradient(180deg,#8cabd9,#436590);
}

#partnerIncentivesView .partner-user > div{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}

#partnerIncentivesView .partner-user strong{
  display:block;
  font-size:13px;
}

#partnerIncentivesView .partner-user small{
  display:block;
  margin-top:3px;
  color:rgba(210,222,230,.58);
  font-size:9px;
}

/* CONTENT */

.partner-incentives-content{
  width:min(1420px,calc(100% - 48px));
  margin:0 auto;
  padding:12px 0 28px;
}

.partner-incentives-breadcrumb{
  min-height:28px;
  display:flex;
  align-items:center;
  gap:9px;
  color:rgba(202,215,224,.58);
  font-size:10px;
}

.partner-incentives-breadcrumb strong{
  color:#6ed5ff;
}

.partner-incentives-hero{
  position:relative;
  min-height:155px;
  padding:22px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  overflow:hidden;
  border-radius:16px;
  background:
    linear-gradient(90deg,
      rgba(4,11,18,.98) 0%,
      rgba(4,11,18,.82) 36%,
      rgba(4,11,18,.14) 73%,
      rgba(4,11,18,.02) 100%),
    url("./assets/customer/home/hero-customer-home.webp") center 46% / cover no-repeat;
}

.partner-incentives-hero h1{
  margin:0;
  font-size:48px;
  line-height:.98;
}

.partner-incentives-hero > div:first-child > span{
  display:block;
  margin-top:7px;
  color:#eef3f6;
  font-size:15px;
  letter-spacing:.18em;
}

.partner-incentives-hero p{
  margin:9px 0 2px;
  color:rgba(224,234,240,.82);
  font-size:12.5px;
}

.partner-incentives-hero small{
  color:rgba(203,218,227,.60);
  font-size:10px;
}

.incentive-period-picker{
  min-width:310px;
  min-height:54px;
  padding:8px 10px;
  display:grid;
  grid-template-columns:32px 1fr auto;
  gap:8px;
  align-items:center;
  border:1px solid rgba(92,165,212,.20);
  border-radius:10px;
  background:rgba(6,18,29,.84);
}

.incentive-period-picker > span{
  font-size:22px;
}

.incentive-period-picker strong{
  display:block;
  font-size:9.5px;
}

.incentive-period-picker small{
  display:block;
  color:rgba(203,216,225,.52);
  font-size:7.5px;
}

.incentive-period-picker button{
  min-height:34px;
  padding:0 10px;
  border:1px solid rgba(54,187,247,.45);
  border-radius:7px;
  color:#e8eff3;
  background:rgba(10,29,43,.72);
  font-size:8.5px;
}

/* KPI */

.incentive-kpi-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}

.incentive-kpi-grid article{
  min-height:96px;
  padding:12px;
  display:grid;
  grid-template-columns:42px 1fr 18px;
  gap:8px;
  align-items:center;
  border:1px solid rgba(92,165,212,.22);
  border-radius:10px;
  background:rgba(8,18,28,.95);
}

.incentive-kpi-grid article > span{
  font-size:28px;
}

.incentive-kpi-grid strong{
  display:block;
  font-size:10.5px;
}

.incentive-kpi-grid small{
  display:block;
  margin-top:2px;
  color:rgba(203,216,225,.54);
  font-size:8.5px;
}

.incentive-kpi-grid b{
  display:block;
  margin-top:8px;
  font-size:16px;
}

.incentive-kpi-grid em{
  font-style:normal;
  font-size:18px;
}

.incentive-kpi-grid .total{
  border-color:rgba(239,177,63,.72);
}

.incentive-kpi-grid .total > span,
.incentive-kpi-grid .total em{
  color:#f0b63f;
}

.incentive-kpi-grid .pending{
  border-color:rgba(239,177,63,.55);
}

.incentive-kpi-grid .pending > span,
.incentive-kpi-grid .pending em{
  color:#efbd45;
}

.incentive-kpi-grid .approved{
  border-color:rgba(64,220,178,.65);
}

.incentive-kpi-grid .approved > span,
.incentive-kpi-grid .approved em{
  color:#4eddb9;
}

.incentive-kpi-grid .available{
  border-color:rgba(49,176,245,.72);
}

.incentive-kpi-grid .available > span,
.incentive-kpi-grid .available em{
  color:#43c4ff;
}

/* COMMON PANELS */

.incentive-panel{
  overflow:hidden;
  border:1px solid rgba(92,165,212,.17);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.incentive-panel > header{
  min-height:46px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:9px;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.incentive-panel > header > span{
  color:#49caff;
  font-size:20px;
}

.incentive-panel h2{
  margin:0;
  font-size:14px;
}

.incentive-panel h2 + small{
  display:block;
  margin-top:2px;
  color:rgba(201,214,223,.52);
  font-size:8px;
  letter-spacing:.08em;
}

.incentive-panel button{
  min-height:32px;
  padding:0 10px;
  border:1px solid rgba(239,177,63,.70);
  border-radius:7px;
  color:#e9b43e;
  background:transparent;
  font-size:8.5px;
}

/* ROW 1 */

.incentive-row-one{
  margin-top:8px;
  display:grid;
  grid-template-columns:1.45fr .78fr .62fr;
  gap:8px;
}

.incentive-status-flow{
  min-height:120px;
  padding:14px 12px;
  display:grid;
  grid-template-columns:1fr 18px 1fr 18px 1fr 18px 1fr 18px 1fr;
  align-items:center;
}

.incentive-status-flow > div{
  text-align:center;
}

.incentive-status-flow > div > span{
  width:42px;
  height:42px;
  margin:0 auto 6px;
  display:grid;
  place-items:center;
  border:1px solid rgba(132,154,169,.48);
  border-radius:50%;
  color:#8799a6;
  font-size:17px;
}

.incentive-status-flow > div.active > span{
  color:#f0b63f;
  border-color:rgba(239,177,63,.62);
}

.incentive-status-flow strong{
  display:block;
  font-size:8.5px;
}

.incentive-status-flow small{
  display:block;
  margin-top:2px;
  color:rgba(197,211,220,.50);
  font-size:7.5px;
}

.incentive-status-flow > b{
  color:#aebdc6;
  text-align:center;
  font-size:18px;
  font-weight:400;
}

.incentive-overview-lines{
  padding:6px 12px 8px;
}

.incentive-overview-lines > div{
  min-height:31px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.incentive-overview-lines > div:last-child{
  border-bottom:0;
}

.incentive-overview-lines span{
  color:#e3ebef;
  font-size:8px;
}

.incentive-overview-lines span small{
  display:block;
  margin-top:1px;
  color:rgba(197,211,220,.48);
  font-size:6.8px;
}

.incentive-overview-lines strong{
  font-size:8.5px;
}

.incentive-types-list{
  padding:5px 12px 8px;
}

.incentive-types-list > div{
  min-height:42px;
  display:grid;
  grid-template-columns:30px 1fr;
  gap:8px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.incentive-types-list > div:last-child{
  border-bottom:0;
}

.incentive-types-list > div > span{
  color:#50c8ff;
  font-size:18px;
}

.incentive-types-list > div:nth-child(1) > span{
  color:#f0b63f;
}

.incentive-types-list > div:nth-child(4) > span{
  color:#bb7bff;
}

.incentive-types-list strong{
  display:block;
  font-size:8.8px;
}

.incentive-types-list small{
  display:block;
  margin-top:2px;
  color:rgba(197,211,220,.50);
  font-size:7px;
}

/* ROW 2 */

.incentive-row-two{
  margin-top:8px;
  display:grid;
  grid-template-columns:1.42fr .66fr .58fr;
  gap:8px;
}

.incentive-filters{
  padding:8px 10px;
  display:grid;
  grid-template-columns:140px 135px 145px 1fr;
  gap:7px;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.incentive-filters button,
.incentive-filters label{
  min-height:44px;
  padding:6px 9px;
  border:1px solid rgba(54,187,247,.26);
  border-radius:7px;
  color:#dce6eb;
  background:rgba(10,29,43,.52);
  text-align:left;
  font-size:7.5px;
}

.incentive-filters button strong{
  display:block;
  margin-top:2px;
  font-size:8.5px;
}

.incentive-filters label{
  display:flex;
  align-items:center;
  gap:8px;
}

.incentive-filters label > span{
  font-size:18px;
}

.incentive-filters input{
  width:100%;
  border:0;
  outline:0;
  color:#e9f0f4;
  background:transparent;
  font-size:8.5px;
}

.incentive-table .head{
  min-height:36px;
  padding:0 10px;
  display:grid;
  grid-template-columns:30px .7fr 1fr 1fr .8fr .75fr .65fr;
  gap:7px;
  align-items:center;
  color:rgba(194,209,219,.58);
  font-size:7.8px;
}

.incentive-table .empty{
  min-height:94px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-top:1px solid rgba(255,255,255,.04);
}

.incentive-table .empty > span{
  color:#dce6eb;
  font-size:27px;
}

.incentive-table .empty p{
  margin:0;
  color:#dce7ec;
  font-size:9px;
  text-align:center;
}

.incentive-table .empty small{
  color:rgba(197,211,220,.48);
  font-size:7.5px;
}

.selected-incentive-empty{
  min-height:132px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:12px;
  text-align:left;
}

.selected-incentive-empty > span{
  color:#9ba9b4;
  font-size:36px;
}

.selected-incentive-empty p{
  margin:0;
  color:#e0e9ee;
  font-size:9px;
}

.selected-incentive-empty small{
  color:rgba(197,211,220,.50);
  font-size:7.5px;
}

.selected-incentive-card > button,
.incentive-policy-card > button,
.incentive-eligibility-card > button,
.incentive-withdrawable-card > button{
  width:calc(100% - 24px);
  margin:0 12px 10px;
}

.incentive-policy-lines{
  padding:5px 12px;
}

.incentive-policy-lines > div{
  min-height:31px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.incentive-policy-lines > div:last-child{
  border-bottom:0;
}

.incentive-policy-lines span{
  color:rgba(207,219,227,.66);
  font-size:7.8px;
}

.incentive-policy-lines strong{
  max-width:125px;
  overflow:hidden;
  font-size:8px;
  text-align:right;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ROW 3 */

.incentive-row-three{
  margin-top:8px;
  display:grid;
  grid-template-columns:.92fr 1.16fr .62fr;
  gap:8px;
}

.incentive-eligibility-grid{
  padding:8px 12px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 14px;
}

.incentive-eligibility-grid > div{
  min-height:46px;
  padding:7px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.incentive-eligibility-grid small{
  color:rgba(201,214,223,.54);
  font-size:7.5px;
}

.incentive-eligibility-grid strong{
  display:block;
  margin-top:4px;
  font-size:8.8px;
}

.incentive-determined-flow{
  min-height:120px;
  padding:12px 10px;
  display:grid;
  grid-template-columns:1fr 14px 1fr 14px 1fr 14px 1fr 14px 1fr;
  align-items:center;
}

.incentive-determined-flow > div{
  text-align:center;
}

.incentive-determined-flow > div > span{
  color:#50c8ff;
  font-size:19px;
}

.incentive-determined-flow > div:nth-of-type(2) > span,
.incentive-determined-flow > div:nth-of-type(4) > span{
  color:#4eddb9;
}

.incentive-determined-flow > div:nth-of-type(3) > span{
  color:#bb7bff;
}

.incentive-determined-flow > div:nth-of-type(5) > span{
  color:#f0b63f;
}

.incentive-determined-flow strong{
  display:block;
  margin-top:3px;
  font-size:7.6px;
}

.incentive-determined-flow small{
  display:block;
  margin-top:2px;
  color:rgba(197,211,220,.50);
  font-size:6.8px;
}

.incentive-determined-flow > b{
  color:#aebdc6;
  text-align:center;
  font-weight:400;
}

.incentive-vs-commission{
  min-height:120px;
  padding:12px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.incentive-vs-commission > div{
  padding:10px;
  border:1px solid rgba(92,165,212,.15);
  border-radius:8px;
}

.incentive-vs-commission strong{
  display:block;
  font-size:8.5px;
}

.incentive-vs-commission small{
  display:block;
  margin-top:2px;
  color:#50c8ff;
  font-size:7px;
}

.incentive-vs-commission > div:last-child small{
  color:#4eddb9;
}

.incentive-vs-commission span{
  display:block;
  margin-top:8px;
  color:rgba(205,218,226,.62);
  font-size:7px;
  line-height:1.5;
}

/* ROW 4 */

.incentive-row-four{
  margin-top:8px;
  display:grid;
  grid-template-columns:1.05fr 1fr .62fr;
  gap:8px;
}

.incentive-withdrawable-flow,
.incentive-traceability-flow{
  min-height:88px;
  padding:10px;
  display:grid;
  align-items:center;
}

.incentive-withdrawable-flow{
  grid-template-columns:1fr 14px 1fr 14px 1fr 14px 1fr 14px 1fr;
}

.incentive-traceability-flow{
  grid-template-columns:1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr;
}

.incentive-withdrawable-flow > div,
.incentive-traceability-flow > div{
  text-align:center;
}

.incentive-withdrawable-flow > div > span,
.incentive-traceability-flow > div > span{
  color:#50c8ff;
  font-size:17px;
}

.incentive-withdrawable-flow > div:nth-of-type(2) > span,
.incentive-traceability-flow > div:nth-of-type(2) > span{
  color:#4eddb9;
}

.incentive-withdrawable-flow > div:nth-of-type(3) > span{
  color:#f0b63f;
}

.incentive-withdrawable-flow > div:nth-of-type(4) > span,
.incentive-traceability-flow > div:nth-of-type(3) > span{
  color:#bb7bff;
}

.incentive-withdrawable-flow > div:nth-of-type(5) > span{
  color:#f0b63f;
}

.incentive-withdrawable-flow strong,
.incentive-traceability-flow strong{
  display:block;
  margin-top:2px;
  font-size:7px;
}

.incentive-withdrawable-flow small,
.incentive-traceability-flow small{
  display:block;
  margin-top:2px;
  color:rgba(197,211,220,.50);
  font-size:6.4px;
}

.incentive-withdrawable-flow > b,
.incentive-traceability-flow > b{
  color:#aebdc6;
  text-align:center;
  font-weight:400;
}

.recent-incentive-list{
  padding:7px 12px 8px;
}

.recent-incentive-list > div{
  position:relative;
  min-height:28px;
  padding-left:22px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
}

.recent-incentive-list > div:not(:last-child)::before{
  content:"";
  position:absolute;
  left:6px;
  top:13px;
  width:1px;
  height:19px;
  background:rgba(130,153,168,.35);
}

.recent-incentive-list span{
  position:absolute;
  left:0;
  top:7px;
  width:13px;
  height:13px;
  border:1px solid #50c8ff;
  border-radius:50%;
  background:#08121c;
}

.recent-incentive-list strong{
  font-size:7.6px;
}

.recent-incentive-list b{
  font-size:7px;
}

/* RESPONSIVE */

@media (max-width:1250px){
  #partnerIncentivesView .partner-shell{
    grid-template-columns:230px minmax(0,1fr);
  }

  .incentive-kpi-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .incentive-row-one,
  .incentive-row-two,
  .incentive-row-three,
  .incentive-row-four{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:1000px){
  #partnerIncentivesView .partner-shell{
    grid-template-columns:1fr;
  }

  #partnerIncentivesView .partner-sidebar{
    display:none;
  }

  .incentive-row-one,
  .incentive-row-two,
  .incentive-row-three,
  .incentive-row-four{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .partner-incentives-content{
    width:calc(100% - 28px);
  }

  #partnerIncentivesView .partner-topbar{
    padding:12px 14px;
  }

  #partnerIncentivesView .partner-search{
    width:100%;
  }

  #partnerIncentivesView .partner-top-actions{
    display:none;
  }

  .partner-incentives-hero{
    align-items:flex-start;
    flex-direction:column;
  }

  .partner-incentives-hero h1{
    font-size:38px;
  }

  .incentive-period-picker{
    width:100%;
    min-width:0;
  }

  .incentive-kpi-grid,
  .incentive-filters{
    grid-template-columns:1fr;
  }

  .incentive-status-flow,
  .incentive-determined-flow,
  .incentive-withdrawable-flow,
  .incentive-traceability-flow{
    grid-template-columns:1fr;
    gap:8px;
  }

  .incentive-status-flow > b,
  .incentive-determined-flow > b,
  .incentive-withdrawable-flow > b,
  .incentive-traceability-flow > b{
    display:none;
  }
}


/* =========================================================
   SCREEN 29 — PAR INCENTIVE DETAIL
   ========================================================= */

body:has(#partnerIncentiveDetailView.active) > .topbar{
  display:none;
}

body:has(#partnerIncentiveDetailView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#partnerIncentiveDetailView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 78% 8%,rgba(46,130,195,.08),transparent 28%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#partnerIncentiveDetailView.active{
  display:block;
}

#partnerIncentiveDetailView .partner-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:278px minmax(0,1fr);
}

#partnerIncentiveDetailView .partner-sidebar{
  min-height:100vh;
  padding:20px 20px 24px;
  border-right:1px solid rgba(87,173,228,.18);
  background:
    radial-gradient(circle at 50% 8%,rgba(25,100,155,.10),transparent 30%),
    #06101a;
}

#partnerIncentiveDetailView .partner-brand{
  min-height:74px;
  padding:0 10px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.07);
}

#partnerIncentiveDetailView .partner-brand strong{
  color:#f0bd50;
  font-size:24px;
}

#partnerIncentiveDetailView .partner-brand span{
  margin-top:4px;
  color:#d4dde4;
  font-size:8px;
  letter-spacing:.28em;
}

#partnerIncentiveDetailView .partner-nav-label{
  display:block;
  margin:22px 10px 9px;
  color:#dce5ea;
  font-size:10px;
  letter-spacing:.24em;
}

#partnerIncentiveDetailView .partner-nav{
  display:grid;
  gap:5px;
}

#partnerIncentiveDetailView .partner-nav-item{
  width:100%;
  min-height:46px;
  padding:0 12px;
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  border:1px solid transparent;
  border-radius:10px;
  color:#d8e2e8;
  background:transparent;
  text-align:left;
}

#partnerIncentiveDetailView .partner-nav-item > span{
  color:#dbe5eb;
  font-size:20px;
}

#partnerIncentiveDetailView .partner-nav-item strong{
  display:block;
  font-size:13px;
  font-weight:600;
  line-height:1.15;
}

#partnerIncentiveDetailView .partner-nav-item small{
  display:block;
  margin-top:3px;
  color:rgba(203,216,225,.50);
  font-size:8px;
}

#partnerIncentiveDetailView .partner-nav-item.active{
  border-color:rgba(239,177,63,.70);
  color:#fff;
  background:
    linear-gradient(90deg,rgba(239,177,63,.18),rgba(239,177,63,.03));
  box-shadow:0 0 18px rgba(239,177,63,.10);
}

#partnerIncentiveDetailView .partner-nav-item.active > span{
  color:#f0b63f;
}

#partnerIncentiveDetailView .partner-sidebar-vision{
  margin-top:18px;
  min-height:206px;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid rgba(92,165,212,.16);
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(5,15,25,.18),rgba(5,15,25,.62)),
    url("./assets/customer/home/hero-customer-home.webp") center / cover no-repeat;
}

#partnerIncentiveDetailView .partner-sidebar-vision span{
  color:#f1f4f6;
  font-size:10px;
  line-height:1.55;
  letter-spacing:.18em;
}

#partnerIncentiveDetailView .partner-sidebar-vision small{
  margin-top:18px;
  color:#d8e1e7;
  font-size:9px;
}

/* TOPBAR */

#partnerIncentiveDetailView .partner-main{
  min-width:0;
}

#partnerIncentiveDetailView .partner-topbar{
  min-height:84px;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid rgba(92,165,212,.12);
  background:rgba(4,11,18,.96);
}

#partnerIncentiveDetailView .partner-search{
  width:min(730px,62%);
  min-height:48px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(92,165,212,.18);
  border-radius:12px;
  background:rgba(13,32,48,.66);
}

#partnerIncentiveDetailView .partner-search input{
  width:100%;
  border:0;
  outline:0;
  color:#eaf0f4;
  background:transparent;
  font-size:13px;
}

#partnerIncentiveDetailView .partner-search span{
  color:#dce7ec;
  font-size:22px;
}

#partnerIncentiveDetailView .partner-top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

#partnerIncentiveDetailView .partner-top-actions button{
  min-width:42px;
  height:42px;
  border:1px solid rgba(92,165,212,.16);
  border-radius:12px;
  color:#e1ebf0;
  background:rgba(10,24,36,.72);
}

#partnerIncentiveDetailView .partner-top-actions button[aria-label="Ngôn ngữ"]{
  min-width:74px;
  padding:0 10px;
  font-size:11px;
  font-weight:700;
}

#partnerIncentiveDetailView .partner-user{
  display:flex;
  align-items:center;
  gap:10px;
  padding-left:10px;
}

#partnerIncentiveDetailView .partner-avatar{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  color:#d9e5ff;
  font-size:22px;
  background:linear-gradient(180deg,#8cabd9,#436590);
}

#partnerIncentiveDetailView .partner-user > div{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}

#partnerIncentiveDetailView .partner-user strong{
  display:block;
  font-size:13px;
}

#partnerIncentiveDetailView .partner-user small{
  display:block;
  margin-top:3px;
  color:rgba(210,222,230,.58);
  font-size:9px;
}

/* CONTENT */

.partner-incentive-detail-content{
  width:min(1420px,calc(100% - 48px));
  margin:0 auto;
  padding:12px 0 28px;
}

.partner-incentive-detail-breadcrumb{
  min-height:28px;
  display:flex;
  align-items:center;
  gap:9px;
  color:rgba(202,215,224,.58);
  font-size:10px;
}

.partner-incentive-detail-breadcrumb strong{
  color:#6ed5ff;
}

.partner-incentive-detail-hero{
  position:relative;
  min-height:158px;
  padding:22px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  overflow:hidden;
  border-radius:16px;
  background:
    linear-gradient(90deg,
      rgba(4,11,18,.98) 0%,
      rgba(4,11,18,.82) 36%,
      rgba(4,11,18,.14) 73%,
      rgba(4,11,18,.02) 100%),
    url("./assets/customer/home/hero-customer-home.webp") center 46% / cover no-repeat;
}

.partner-incentive-detail-hero h1{
  margin:0;
  font-size:48px;
  line-height:.98;
}

.partner-incentive-detail-hero > div:first-child > span{
  display:block;
  margin-top:7px;
  color:#eef3f6;
  font-size:15px;
  letter-spacing:.18em;
}

.partner-incentive-detail-hero p{
  margin:9px 0 2px;
  color:rgba(224,234,240,.82);
  font-size:12.5px;
}

.partner-incentive-detail-hero small{
  color:rgba(203,218,227,.60);
  font-size:10px;
}

.incentive-detail-id-box{
  min-width:320px;
  padding:10px 12px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:5px 10px;
  align-items:center;
  border:1px solid rgba(92,165,212,.18);
  border-radius:10px;
  background:rgba(7,18,29,.86);
}

.incentive-detail-id-box small{
  grid-column:1;
  font-size:8px;
}

.incentive-detail-id-box strong{
  grid-column:1;
  font-size:17px;
  letter-spacing:.08em;
}

.incentive-detail-id-box button{
  grid-column:2;
  grid-row:1/3;
  min-height:34px;
  padding:0 12px;
  border:1px solid rgba(239,177,63,.70);
  border-radius:7px;
  color:#e9b43e;
  background:transparent;
  font-size:8.5px;
}

/* RESULT */

.incentive-detail-result{
  margin-top:8px;
  min-height:116px;
  padding:12px 16px;
  display:grid;
  grid-template-columns:76px 1.1fr .75fr .75fr .82fr;
  gap:14px;
  align-items:center;
  border:1px solid rgba(239,177,63,.72);
  border-radius:12px;
  background:
    radial-gradient(circle at 10% 50%,rgba(239,177,63,.11),transparent 30%),
    rgba(8,18,28,.96);
}

.incentive-detail-result-icon{
  color:#f0b63f;
  font-size:60px;
}

.incentive-detail-result small{
  display:block;
  color:rgba(204,216,225,.56);
  font-size:8px;
}

.incentive-detail-result strong{
  display:block;
  margin-top:3px;
  font-size:11px;
}

.incentive-detail-result h2{
  margin:6px 0 0;
  font-size:26px;
}

.incentive-detail-result em{
  display:block;
  margin-top:3px;
  color:rgba(203,216,225,.52);
  font-size:8px;
  font-style:normal;
}

.incentive-detail-result > div:not(:first-of-type){
  padding-left:14px;
  border-left:1px solid rgba(255,255,255,.07);
}

.incentive-detail-result .pending{
  color:#f0ba40;
  font-size:14px;
}

/* LAYOUT */

.incentive-detail-layout{
  margin-top:8px;
  display:grid;
  grid-template-columns:minmax(0,1.72fr) minmax(285px,.50fr);
  gap:8px;
}

.incentive-detail-main{
  min-width:0;
}

.incentive-detail-side{
  display:grid;
  align-content:start;
  gap:8px;
}

.incentive-detail-panel{
  overflow:hidden;
  border:1px solid rgba(92,165,212,.17);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.incentive-detail-panel > header{
  min-height:46px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:9px;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.incentive-detail-panel > header > span{
  color:#49caff;
  font-size:20px;
}

.incentive-detail-panel h2{
  margin:0;
  font-size:14px;
}

.incentive-detail-panel h2 + small{
  display:block;
  margin-top:2px;
  color:rgba(201,214,223,.52);
  font-size:8px;
  letter-spacing:.08em;
}

.incentive-detail-panel button{
  min-height:32px;
  padding:0 10px;
  border:1px solid rgba(239,177,63,.70);
  border-radius:7px;
  color:#e9b43e;
  background:transparent;
  font-size:8.5px;
}

/* STATUS */

.incentive-detail-row-one{
  display:grid;
}

.incentive-detail-status-flow{
  min-height:118px;
  padding:14px 16px;
  display:grid;
  grid-template-columns:1fr 22px 1fr 22px 1fr 22px 1fr 22px 1fr;
  align-items:center;
}

.incentive-detail-status-flow > div{
  text-align:center;
}

.incentive-detail-status-flow > div > span{
  width:44px;
  height:44px;
  margin:0 auto 6px;
  display:grid;
  place-items:center;
  border:1px solid rgba(132,154,169,.48);
  border-radius:50%;
  color:#8799a6;
  font-size:18px;
}

.incentive-detail-status-flow > div.active > span{
  color:#f0b63f;
  border-color:rgba(239,177,63,.62);
}

.incentive-detail-status-flow strong{
  display:block;
  font-size:8.5px;
}

.incentive-detail-status-flow small{
  display:block;
  margin-top:2px;
  color:rgba(197,211,220,.50);
  font-size:7.5px;
}

.incentive-detail-status-flow > b{
  color:#aebdc6;
  text-align:center;
  font-size:18px;
  font-weight:400;
}

/* ROW 2 */

.incentive-detail-row-two{
  margin-top:8px;
  display:grid;
  grid-template-columns:.82fr 1.12fr .82fr;
  gap:8px;
}

.incentive-detail-lines{
  padding:6px 12px 8px;
}

.incentive-detail-lines > div{
  min-height:34px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.incentive-detail-lines > div:last-child{
  border-bottom:0;
}

.incentive-detail-lines span{
  color:rgba(207,219,227,.66);
  font-size:8px;
}

.incentive-detail-lines strong{
  font-size:8.5px;
  text-align:right;
}

.incentive-detail-lines strong.active{
  color:#4eddb9;
}

.performance-source-detail-card > button,
.incentive-eligibility-detail-card > button,
.tax-compliance-incentive-card > button,
.next-incentive-financial-card > button,
.policy-applied-incentive-card > button,
.financial-benefit-record-card > button,
.recent-incentive-detail-card > button{
  width:calc(100% - 24px);
  margin:6px 12px 10px;
}

.incentive-value-lines{
  padding:6px 12px 4px;
}

.incentive-value-lines > div{
  min-height:34px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.incentive-value-lines span{
  color:rgba(207,219,227,.66);
  font-size:8px;
}

.incentive-value-lines strong{
  font-size:8.5px;
}

.incentive-value-card > p,
.risk-security-card > p,
.next-incentive-financial-card > p{
  margin:0 12px 10px;
  padding:8px 10px;
  border-top:1px solid rgba(255,255,255,.05);
  color:#cbd9e1;
  font-size:7.8px;
  line-height:1.45;
}

/* ROW 3 */

.incentive-detail-row-three{
  margin-top:8px;
  display:grid;
  grid-template-columns:.72fr .72fr 1.35fr;
  gap:8px;
}

.next-incentive-financial-flow{
  min-height:82px;
  padding:10px;
  display:grid;
  grid-template-columns:1fr 14px 1fr 14px 1fr 14px 1fr 14px 1fr 14px 1fr;
  align-items:center;
}

.next-incentive-financial-flow > div{
  text-align:center;
}

.next-incentive-financial-flow > div > span{
  color:#f0b63f;
  font-size:18px;
}

.next-incentive-financial-flow > div:nth-of-type(2) > span,
.next-incentive-financial-flow > div:nth-of-type(3) > span{
  color:#4eddb9;
}

.next-incentive-financial-flow > div:nth-of-type(4) > span{
  color:#bb7bff;
}

.next-incentive-financial-flow > div:nth-of-type(5) > span{
  color:#50c8ff;
}

.next-incentive-financial-flow strong{
  display:block;
  margin-top:2px;
  font-size:7.1px;
}

.next-incentive-financial-flow small{
  display:block;
  margin-top:2px;
  color:rgba(197,211,220,.50);
  font-size:6.4px;
}

.next-incentive-financial-flow > b{
  color:#aebdc6;
  text-align:center;
  font-weight:400;
}

/* ROW 4 */

.incentive-detail-row-four{
  margin-top:8px;
  display:grid;
  grid-template-columns:1.35fr .72fr;
  gap:8px;
}

.incentive-detail-traceability-flow{
  min-height:88px;
  padding:10px;
  display:grid;
  grid-template-columns:1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr;
  align-items:center;
}

.incentive-detail-traceability-flow > div{
  text-align:center;
}

.incentive-detail-traceability-flow > div > span{
  color:#50c8ff;
  font-size:17px;
}

.incentive-detail-traceability-flow > div:nth-of-type(2) > span,
.incentive-detail-traceability-flow > div:nth-of-type(4) > span{
  color:#f0b63f;
}

.incentive-detail-traceability-flow > div:nth-of-type(3) > span{
  color:#4eddb9;
}

.incentive-detail-traceability-flow > div:nth-of-type(5) > span{
  color:#bb7bff;
}

.incentive-detail-traceability-flow strong{
  display:block;
  margin-top:2px;
  font-size:7px;
}

.incentive-detail-traceability-flow small{
  display:block;
  margin-top:2px;
  color:rgba(197,211,220,.50);
  font-size:6.4px;
}

.incentive-detail-traceability-flow > b{
  color:#aebdc6;
  text-align:center;
  font-weight:400;
}

.recent-incentive-detail-list{
  padding:7px 12px 6px;
}

.recent-incentive-detail-list > div{
  position:relative;
  min-height:28px;
  padding-left:22px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
}

.recent-incentive-detail-list > div:not(:last-child)::before{
  content:"";
  position:absolute;
  left:6px;
  top:13px;
  width:1px;
  height:19px;
  background:rgba(130,153,168,.35);
}

.recent-incentive-detail-list span{
  position:absolute;
  left:0;
  top:7px;
  width:13px;
  height:13px;
  border:1px solid #50c8ff;
  border-radius:50%;
  background:#08121c;
}

.recent-incentive-detail-list strong{
  font-size:7.6px;
}

.recent-incentive-detail-list b{
  font-size:7px;
}

/* SIDE */

.incentive-detail-side .incentive-detail-panel{
  min-width:0;
}

/* RESPONSIVE */

@media (max-width:1250px){
  #partnerIncentiveDetailView .partner-shell{
    grid-template-columns:230px minmax(0,1fr);
  }

  .incentive-detail-layout{
    grid-template-columns:1fr;
  }

  .incentive-detail-side{
    grid-template-columns:repeat(3,1fr);
  }

  .incentive-detail-row-two,
  .incentive-detail-row-three{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:1000px){
  #partnerIncentiveDetailView .partner-shell{
    grid-template-columns:1fr;
  }

  #partnerIncentiveDetailView .partner-sidebar{
    display:none;
  }

  .incentive-detail-result,
  .incentive-detail-row-two,
  .incentive-detail-row-three,
  .incentive-detail-row-four{
    grid-template-columns:1fr;
  }

  .incentive-detail-side{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .partner-incentive-detail-content{
    width:calc(100% - 28px);
  }

  #partnerIncentiveDetailView .partner-topbar{
    padding:12px 14px;
  }

  #partnerIncentiveDetailView .partner-search{
    width:100%;
  }

  #partnerIncentiveDetailView .partner-top-actions{
    display:none;
  }

  .partner-incentive-detail-hero{
    align-items:flex-start;
    flex-direction:column;
  }

  .partner-incentive-detail-hero h1{
    font-size:38px;
  }

  .incentive-detail-id-box{
    width:100%;
    min-width:0;
  }

  .incentive-detail-status-flow,
  .next-incentive-financial-flow,
  .incentive-detail-traceability-flow{
    grid-template-columns:1fr;
    gap:8px;
  }

  .incentive-detail-status-flow > b,
  .next-incentive-financial-flow > b,
  .incentive-detail-traceability-flow > b{
    display:none;
  }
}


/* =========================================================
   SCREEN 30 — PAR WITHDRAWABLE
   ========================================================= */

body:has(#partnerWithdrawableView.active) > .topbar{
  display:none;
}

body:has(#partnerWithdrawableView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#partnerWithdrawableView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 78% 8%,rgba(46,130,195,.08),transparent 28%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#partnerWithdrawableView.active{
  display:block;
}

#partnerWithdrawableView .partner-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:278px minmax(0,1fr);
}

#partnerWithdrawableView .partner-sidebar{
  min-height:100vh;
  padding:20px 20px 24px;
  border-right:1px solid rgba(87,173,228,.18);
  background:
    radial-gradient(circle at 50% 8%,rgba(25,100,155,.10),transparent 30%),
    #06101a;
}

#partnerWithdrawableView .partner-brand{
  min-height:74px;
  padding:0 10px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.07);
}

#partnerWithdrawableView .partner-brand strong{
  color:#f0bd50;
  font-size:24px;
}

#partnerWithdrawableView .partner-brand span{
  margin-top:4px;
  color:#d4dde4;
  font-size:8px;
  letter-spacing:.28em;
}

#partnerWithdrawableView .partner-nav-label{
  display:block;
  margin:22px 10px 9px;
  color:#dce5ea;
  font-size:10px;
  letter-spacing:.24em;
}

#partnerWithdrawableView .partner-nav{
  display:grid;
  gap:5px;
}

#partnerWithdrawableView .partner-nav-item{
  width:100%;
  min-height:46px;
  padding:0 12px;
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  border:1px solid transparent;
  border-radius:10px;
  color:#d8e2e8;
  background:transparent;
  text-align:left;
}

#partnerWithdrawableView .partner-nav-item > span{
  color:#dbe5eb;
  font-size:20px;
}

#partnerWithdrawableView .partner-nav-item strong{
  display:block;
  font-size:13px;
  font-weight:600;
  line-height:1.15;
}

#partnerWithdrawableView .partner-nav-item small{
  display:block;
  margin-top:3px;
  color:rgba(203,216,225,.50);
  font-size:8px;
}

#partnerWithdrawableView .partner-nav-item.active{
  border-color:rgba(239,177,63,.70);
  color:#fff;
  background:linear-gradient(90deg,rgba(239,177,63,.18),rgba(239,177,63,.03));
  box-shadow:0 0 18px rgba(239,177,63,.10);
}

#partnerWithdrawableView .partner-nav-item.active > span{
  color:#f0b63f;
}

#partnerWithdrawableView .partner-sidebar-vision{
  margin-top:18px;
  min-height:206px;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid rgba(92,165,212,.16);
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(5,15,25,.18),rgba(5,15,25,.62)),
    url("./assets/customer/home/hero-customer-home.webp") center / cover no-repeat;
}

#partnerWithdrawableView .partner-sidebar-vision span{
  color:#f1f4f6;
  font-size:10px;
  line-height:1.55;
  letter-spacing:.18em;
}

#partnerWithdrawableView .partner-sidebar-vision small{
  margin-top:18px;
  color:#d8e1e7;
  font-size:9px;
}

/* TOPBAR */

#partnerWithdrawableView .partner-main{
  min-width:0;
}

#partnerWithdrawableView .partner-topbar{
  min-height:84px;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid rgba(92,165,212,.12);
  background:rgba(4,11,18,.96);
}

#partnerWithdrawableView .partner-search{
  width:min(730px,62%);
  min-height:48px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(92,165,212,.18);
  border-radius:12px;
  background:rgba(13,32,48,.66);
}

#partnerWithdrawableView .partner-search input{
  width:100%;
  border:0;
  outline:0;
  color:#eaf0f4;
  background:transparent;
  font-size:13px;
}

#partnerWithdrawableView .partner-top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

#partnerWithdrawableView .partner-top-actions button{
  min-width:42px;
  height:42px;
  border:1px solid rgba(92,165,212,.16);
  border-radius:12px;
  color:#e1ebf0;
  background:rgba(10,24,36,.72);
}

#partnerWithdrawableView .partner-top-actions button[aria-label="Ngôn ngữ"]{
  min-width:74px;
  font-size:11px;
  font-weight:700;
}

#partnerWithdrawableView .partner-user{
  display:flex;
  align-items:center;
  gap:10px;
}

#partnerWithdrawableView .partner-avatar{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(180deg,#8cabd9,#436590);
}

#partnerWithdrawableView .partner-user > div{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}

#partnerWithdrawableView .partner-user strong{
  font-size:13px;
}

#partnerWithdrawableView .partner-user small{
  margin-top:3px;
  color:rgba(210,222,230,.58);
  font-size:9px;
}

/* CONTENT */

.partner-withdrawable-content{
  width:min(1420px,calc(100% - 48px));
  margin:0 auto;
  padding:12px 0 28px;
}

.partner-withdrawable-breadcrumb{
  min-height:28px;
  display:flex;
  align-items:center;
  gap:9px;
  color:rgba(202,215,224,.58);
  font-size:10px;
}

.partner-withdrawable-breadcrumb strong{
  color:#6ed5ff;
}

.partner-withdrawable-hero{
  min-height:155px;
  padding:22px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-radius:16px;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(4,11,18,.98),rgba(4,11,18,.82) 36%,rgba(4,11,18,.14) 73%,rgba(4,11,18,.02)),
    url("./assets/customer/home/hero-customer-home.webp") center 46% / cover no-repeat;
}

.partner-withdrawable-hero h1{
  margin:0;
  font-size:46px;
  line-height:.98;
}

.partner-withdrawable-hero > div:first-child > span{
  display:block;
  margin-top:7px;
  font-size:15px;
  letter-spacing:.18em;
}

.partner-withdrawable-hero p{
  margin:9px 0 2px;
  color:rgba(224,234,240,.82);
  font-size:12.5px;
}

.partner-withdrawable-hero small{
  color:rgba(203,218,227,.60);
  font-size:10px;
}

.withdrawable-period-picker{
  min-width:315px;
  min-height:54px;
  padding:8px 10px;
  display:grid;
  grid-template-columns:32px 1fr auto;
  gap:8px;
  align-items:center;
  border:1px solid rgba(92,165,212,.20);
  border-radius:10px;
  background:rgba(6,18,29,.84);
}

.withdrawable-period-picker strong{
  display:block;
  font-size:9.5px;
}

.withdrawable-period-picker small{
  display:block;
  color:rgba(203,216,225,.52);
  font-size:7.5px;
}

.withdrawable-period-picker button{
  min-height:34px;
  padding:0 10px;
  border:1px solid rgba(54,187,247,.45);
  border-radius:7px;
  color:#e8eff3;
  background:rgba(10,29,43,.72);
  font-size:8.5px;
}

/* KPI */

.withdrawable-kpi-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:1.35fr repeat(4,.72fr);
  gap:8px;
}

.withdrawable-kpi-grid article{
  min-height:98px;
  padding:12px;
  display:grid;
  grid-template-columns:42px 1fr;
  gap:8px;
  align-items:center;
  border:1px solid rgba(92,165,212,.22);
  border-radius:10px;
  background:rgba(8,18,28,.95);
}

.withdrawable-kpi-grid article > span{
  font-size:28px;
}

.withdrawable-kpi-grid strong{
  display:block;
  font-size:10px;
}

.withdrawable-kpi-grid small{
  display:block;
  margin-top:2px;
  color:rgba(203,216,225,.54);
  font-size:8px;
}

.withdrawable-kpi-grid b{
  display:block;
  margin-top:8px;
  font-size:16px;
}

.withdrawable-kpi-grid em{
  display:block;
  margin-top:5px;
  color:rgba(198,211,220,.50);
  font-size:7px;
  font-style:normal;
}

.withdrawable-kpi-grid .total-main{
  border-color:rgba(239,177,63,.72);
}

.withdrawable-kpi-grid .total-main > span,
.withdrawable-kpi-grid .incentive > span{
  color:#f0b63f;
}

.withdrawable-kpi-grid .commission{
  border-color:rgba(49,176,245,.72);
}

.withdrawable-kpi-grid .commission > span{
  color:#43c4ff;
}

.withdrawable-kpi-grid .benefits{
  border-color:rgba(64,220,178,.65);
}

.withdrawable-kpi-grid .benefits > span{
  color:#4eddb9;
}

.withdrawable-kpi-grid .withdrawable-total{
  border-color:rgba(172,88,239,.65);
}

.withdrawable-kpi-grid .withdrawable-total > span{
  color:#bb7bff;
}

/* FLOW */

.withdrawal-eligibility-card{
  margin-top:8px;
  border:1px solid rgba(92,165,212,.17);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.withdrawal-eligibility-card > header,
.withdrawable-panel > header{
  min-height:46px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:9px;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.withdrawal-eligibility-card h2,
.withdrawable-panel h2{
  margin:0;
  font-size:14px;
}

.withdrawal-eligibility-card h2 + small,
.withdrawable-panel h2 + small{
  display:block;
  margin-top:2px;
  color:rgba(201,214,223,.52);
  font-size:8px;
}

.withdrawal-eligibility-flow{
  min-height:112px;
  padding:14px 12px;
  display:grid;
  grid-template-columns:1fr 18px 1fr 18px 1fr 18px 1fr 18px 1fr 18px 1fr 18px 1fr;
  align-items:center;
}

.withdrawal-eligibility-flow > div{
  text-align:center;
}

.withdrawal-eligibility-flow > div > span{
  width:42px;
  height:42px;
  margin:0 auto 6px;
  display:grid;
  place-items:center;
  border:1px solid rgba(132,154,169,.48);
  border-radius:50%;
  color:#8799a6;
  font-size:17px;
}

.withdrawal-eligibility-flow > div.active > span{
  color:#f0b63f;
  border-color:rgba(239,177,63,.62);
}

.withdrawal-eligibility-flow strong{
  display:block;
  font-size:7.9px;
}

.withdrawal-eligibility-flow small,
.withdrawal-eligibility-flow b{
  display:block;
  margin-top:2px;
  color:rgba(197,211,220,.50);
  font-size:6.8px;
}

.withdrawal-eligibility-flow > em{
  color:#aebdc6;
  text-align:center;
  font-style:normal;
}

/* MAIN GRID */

.withdrawable-main-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:1.25fr .72fr .78fr .72fr;
  gap:8px;
}

.withdrawable-panel{
  overflow:hidden;
  border:1px solid rgba(92,165,212,.17);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.withdrawable-panel button{
  min-height:32px;
  padding:0 10px;
  border:1px solid rgba(239,177,63,.70);
  border-radius:7px;
  color:#e9b43e;
  background:transparent;
  font-size:8px;
}

.withdrawable-lines{
  padding:6px 12px 8px;
}

.withdrawable-lines > div{
  min-height:34px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.withdrawable-lines span{
  color:#e3ebef;
  font-size:8px;
}

.withdrawable-lines span small{
  display:block;
  margin-top:2px;
  color:rgba(197,211,220,.48);
  font-size:7px;
}

.withdrawable-lines strong{
  font-size:8.5px;
}

.withdrawable-lines .overall{
  margin:4px -4px 0;
  padding:0 4px;
  border:1px solid rgba(239,177,63,.55);
  border-radius:7px;
}

.identity-verification-body{
  padding:12px;
}

.identity-verification-body > div{
  display:flex;
  align-items:center;
  gap:10px;
}

.identity-verification-body > div > span{
  font-size:30px;
}

.identity-verification-body p{
  margin:10px 0 0;
  color:rgba(210,222,230,.66);
  font-size:8px;
  line-height:1.45;
}

.identity-verification-card > button,
.tax-compliance-withdrawable-card > button,
.payment-method-withdrawable-card > button{
  width:calc(100% - 24px);
  margin:6px 12px 10px;
}

.tax-compliance-withdrawable-card > p,
.risk-check-withdrawable-card > p{
  margin:0 12px 8px;
  padding:8px;
  border-top:1px solid rgba(255,255,255,.05);
  color:#cbd9e1;
  font-size:7.5px;
}

.withdrawable-side-stack{
  display:grid;
  gap:8px;
}

/* SECONDARY */

.withdrawable-secondary-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:1.15fr .85fr .72fr .55fr;
  gap:8px;
}

.withdrawable-source-table{
  padding:5px 10px 8px;
}

.withdrawable-source-table > div{
  min-height:32px;
  display:grid;
  grid-template-columns:28px 1.2fr 1fr .7fr .7fr .55fr;
  gap:6px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
  font-size:7.5px;
}

.withdrawable-source-table .head{
  color:rgba(194,209,219,.58);
  font-size:7px;
}

.withdrawable-source-table small{
  display:block;
  color:rgba(197,211,220,.46);
  font-size:6.5px;
}

.withdrawable-source-table button{
  min-height:26px;
}

.withdrawable-breakdown-lines{
  padding:6px 12px 8px;
}

.withdrawable-breakdown-lines > div{
  min-height:35px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.withdrawable-breakdown-lines span{
  font-size:8px;
}

.withdrawable-breakdown-lines small{
  display:block;
  color:rgba(197,211,220,.48);
  font-size:7px;
}

.withdrawable-breakdown-lines strong{
  font-size:9px;
}

.withdrawable-breakdown-lines .net{
  margin-top:4px;
  padding:0 5px;
  border:1px solid rgba(239,177,63,.55);
  border-radius:7px;
}

.status-explanation-withdrawable-card > p,
.request-withdrawal-card > p{
  margin:0;
  padding:12px;
  color:rgba(211,223,230,.66);
  font-size:8px;
  line-height:1.5;
}

.request-withdrawal-card > button{
  width:calc(100% - 24px);
  margin:0 12px 10px;
}

.request-withdrawal-card > button:disabled{
  opacity:.38;
}

/* BOTTOM */

.withdrawable-bottom-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:.9fr 1.5fr;
  gap:8px;
}

.withdrawable-activity-table .head{
  min-height:34px;
  padding:0 10px;
  display:grid;
  grid-template-columns:28px .65fr 1fr .8fr .75fr .7fr .55fr;
  gap:6px;
  align-items:center;
  color:rgba(194,209,219,.58);
  font-size:7px;
}

.withdrawable-activity-table .empty{
  min-height:64px;
  display:grid;
  place-items:center;
  border-top:1px solid rgba(255,255,255,.04);
  color:rgba(210,222,230,.60);
  font-size:8px;
}

.withdrawable-traceability-flow{
  min-height:78px;
  padding:10px;
  display:grid;
  grid-template-columns:1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr;
  align-items:center;
}

.withdrawable-traceability-flow > div{
  text-align:center;
}

.withdrawable-traceability-flow > div > span{
  color:#50c8ff;
  font-size:17px;
}

.withdrawable-traceability-flow > div:nth-of-type(2) > span{
  color:#bb7bff;
}

.withdrawable-traceability-flow > div:nth-of-type(3) > span,
.withdrawable-traceability-flow > div:nth-of-type(4) > span{
  color:#4eddb9;
}

.withdrawable-traceability-flow > div:nth-of-type(5) > span,
.withdrawable-traceability-flow > div:nth-of-type(6) > span{
  color:#f0b63f;
}

.withdrawable-traceability-flow strong{
  display:block;
  margin-top:2px;
  font-size:6.8px;
}

.withdrawable-traceability-flow small{
  display:block;
  margin-top:2px;
  color:rgba(197,211,220,.50);
  font-size:6.2px;
}

.withdrawable-traceability-flow > b{
  color:#aebdc6;
  text-align:center;
  font-weight:400;
}

.withdrawable-traceability-card > button{
  float:right;
  margin:0 12px 10px;
}

/* RESPONSIVE */

@media (max-width:1250px){
  #partnerWithdrawableView .partner-shell{
    grid-template-columns:230px minmax(0,1fr);
  }

  .withdrawable-kpi-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .withdrawable-main-grid,
  .withdrawable-secondary-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:1000px){
  #partnerWithdrawableView .partner-shell{
    grid-template-columns:1fr;
  }

  #partnerWithdrawableView .partner-sidebar{
    display:none;
  }

  .withdrawable-main-grid,
  .withdrawable-secondary-grid,
  .withdrawable-bottom-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .partner-withdrawable-content{
    width:calc(100% - 28px);
  }

  #partnerWithdrawableView .partner-top-actions{
    display:none;
  }

  #partnerWithdrawableView .partner-search{
    width:100%;
  }

  .partner-withdrawable-hero{
    flex-direction:column;
    align-items:flex-start;
  }

  .partner-withdrawable-hero h1{
    font-size:36px;
  }

  .withdrawable-period-picker{
    width:100%;
    min-width:0;
  }

  .withdrawable-kpi-grid{
    grid-template-columns:1fr;
  }

  .withdrawal-eligibility-flow,
  .withdrawable-traceability-flow{
    grid-template-columns:1fr;
    gap:8px;
  }

  .withdrawal-eligibility-flow > em,
  .withdrawable-traceability-flow > b{
    display:none;
  }
}


/* =========================================================
   SCREEN 31 — PAR WITHDRAWAL
   ========================================================= */

body:has(#partnerWithdrawalView.active) > .topbar{
  display:none;
}

body:has(#partnerWithdrawalView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#partnerWithdrawalView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 78% 8%,rgba(46,130,195,.08),transparent 28%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#partnerWithdrawalView.active{
  display:block;
}

#partnerWithdrawalView .partner-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:278px minmax(0,1fr);
}

#partnerWithdrawalView .partner-sidebar{
  min-height:100vh;
  padding:20px 20px 24px;
  border-right:1px solid rgba(87,173,228,.18);
  background:#06101a;
}

#partnerWithdrawalView .partner-brand{
  min-height:74px;
  padding:0 10px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.07);
}

#partnerWithdrawalView .partner-brand strong{
  color:#f0bd50;
  font-size:24px;
}

#partnerWithdrawalView .partner-brand span{
  margin-top:4px;
  color:#d4dde4;
  font-size:8px;
  letter-spacing:.28em;
}

#partnerWithdrawalView .partner-nav-label{
  display:block;
  margin:22px 10px 9px;
  color:#dce5ea;
  font-size:10px;
  letter-spacing:.24em;
}

#partnerWithdrawalView .partner-nav{
  display:grid;
  gap:5px;
}

#partnerWithdrawalView .partner-nav-item{
  width:100%;
  min-height:46px;
  padding:0 12px;
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  border:1px solid transparent;
  border-radius:10px;
  color:#d8e2e8;
  background:transparent;
  text-align:left;
}

#partnerWithdrawalView .partner-nav-item > span{
  color:#dbe5eb;
  font-size:20px;
}

#partnerWithdrawalView .partner-nav-item strong{
  display:block;
  font-size:13px;
  font-weight:600;
  line-height:1.15;
}

#partnerWithdrawalView .partner-nav-item small{
  display:block;
  margin-top:3px;
  color:rgba(203,216,225,.50);
  font-size:8px;
}

#partnerWithdrawalView .partner-nav-item.active{
  border-color:rgba(239,177,63,.70);
  color:#fff;
  background:linear-gradient(90deg,rgba(239,177,63,.18),rgba(239,177,63,.03));
  box-shadow:0 0 18px rgba(239,177,63,.10);
}

#partnerWithdrawalView .partner-nav-item.active > span{
  color:#f0b63f;
}

#partnerWithdrawalView .partner-sidebar-vision{
  margin-top:18px;
  min-height:206px;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid rgba(92,165,212,.16);
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(5,15,25,.18),rgba(5,15,25,.62)),
    url("./assets/customer/home/hero-customer-home.webp") center / cover no-repeat;
}

#partnerWithdrawalView .partner-sidebar-vision span{
  color:#f1f4f6;
  font-size:10px;
  line-height:1.55;
  letter-spacing:.18em;
}

#partnerWithdrawalView .partner-sidebar-vision small{
  margin-top:18px;
  color:#d8e1e7;
  font-size:9px;
}

#partnerWithdrawalView .partner-main{
  min-width:0;
}

#partnerWithdrawalView .partner-topbar{
  min-height:84px;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid rgba(92,165,212,.12);
  background:rgba(4,11,18,.96);
}

#partnerWithdrawalView .partner-search{
  width:min(730px,62%);
  min-height:48px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(92,165,212,.18);
  border-radius:12px;
  background:rgba(13,32,48,.66);
}

#partnerWithdrawalView .partner-search input{
  width:100%;
  border:0;
  outline:0;
  color:#eaf0f4;
  background:transparent;
  font-size:13px;
}

#partnerWithdrawalView .partner-top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

#partnerWithdrawalView .partner-top-actions button{
  min-width:42px;
  height:42px;
  border:1px solid rgba(92,165,212,.16);
  border-radius:12px;
  color:#e1ebf0;
  background:rgba(10,24,36,.72);
}

#partnerWithdrawalView .partner-user{
  display:flex;
  align-items:center;
  gap:10px;
}

#partnerWithdrawalView .partner-avatar{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(180deg,#8cabd9,#436590);
}

#partnerWithdrawalView .partner-user > div{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}

#partnerWithdrawalView .partner-user strong{
  font-size:13px;
}

#partnerWithdrawalView .partner-user small{
  margin-top:3px;
  color:rgba(210,222,230,.58);
  font-size:9px;
}

/* CONTENT */

.partner-withdrawal-content{
  width:min(1420px,calc(100% - 48px));
  margin:0 auto;
  padding:10px 0 26px;
}

.partner-withdrawal-breadcrumb{
  min-height:28px;
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(202,215,224,.58);
  font-size:10px;
}

.partner-withdrawal-breadcrumb strong{
  color:#6ed5ff;
}

.partner-withdrawal-hero{
  min-height:118px;
  padding:16px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-radius:14px;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(4,11,18,.98),rgba(4,11,18,.78) 38%,rgba(4,11,18,.15) 72%,rgba(4,11,18,.03)),
    url("./assets/customer/home/hero-customer-home.webp") center 46% / cover no-repeat;
}

.partner-withdrawal-hero h1{
  margin:0;
  font-size:40px;
  line-height:.98;
}

.partner-withdrawal-hero > div:first-child > span{
  display:block;
  margin-top:5px;
  font-size:14px;
  letter-spacing:.18em;
}

.partner-withdrawal-hero p{
  margin:7px 0 2px;
  color:rgba(224,234,240,.82);
  font-size:11px;
}

.partner-withdrawal-hero small{
  color:rgba(203,218,227,.58);
  font-size:9px;
}

.withdrawal-request-status{
  min-width:260px;
  padding:10px 12px;
  display:grid;
  grid-template-columns:38px 1fr;
  gap:10px;
  align-items:center;
  border:1px solid rgba(58,197,233,.44);
  border-radius:10px;
  background:rgba(5,25,35,.88);
}

.withdrawal-request-status > span{
  color:#35e3db;
  font-size:28px;
}

.withdrawal-request-status strong,
.withdrawal-request-status small,
.withdrawal-request-status b{
  display:block;
}

.withdrawal-request-status strong{
  font-size:9px;
}

.withdrawal-request-status small{
  margin-top:2px;
  color:rgba(203,216,225,.55);
  font-size:7px;
}

.withdrawal-request-status b{
  width:max-content;
  margin-top:5px;
  padding:4px 8px;
  border:1px solid #25bdf2;
  border-radius:5px;
  color:#38d6ff;
  font-size:9px;
}

/* TOP AREA */

.withdrawal-top-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:1.55fr .85fr;
  gap:8px;
}

.withdrawal-amount-card{
  min-height:170px;
  padding:16px;
  display:grid;
  grid-template-columns:.9fr 1.25fr;
  gap:18px;
  border:1px solid rgba(239,177,63,.8);
  border-radius:11px;
  background:
    radial-gradient(circle at 10% 50%,rgba(255,139,0,.18),transparent 30%),
    rgba(10,18,26,.96);
  box-shadow:0 0 18px rgba(239,177,63,.10);
}

.withdrawal-amount-left{
  display:flex;
  align-items:flex-start;
  gap:14px;
}

.withdrawal-amount-left > span{
  color:#ff9d18;
  font-size:48px;
}

.withdrawal-amount-left strong,
.withdrawal-amount-left small,
.withdrawal-amount-left b,
.withdrawal-amount-left em{
  display:block;
}

.withdrawal-amount-left strong{
  font-size:11px;
}

.withdrawal-amount-left small{
  margin-top:2px;
  color:rgba(211,223,230,.58);
  font-size:8px;
}

.withdrawal-amount-left b{
  margin-top:8px;
  font-size:31px;
  line-height:1;
}

.withdrawal-amount-left em{
  margin-top:6px;
  font-style:normal;
  font-size:10px;
}

.withdrawal-summary-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  padding-bottom:9px;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.withdrawal-summary-row span,
.withdrawal-summary-row small,
.withdrawal-summary-row strong{
  display:block;
}

.withdrawal-summary-row span{
  font-size:9px;
}

.withdrawal-summary-row small{
  color:rgba(201,214,223,.50);
  font-size:7px;
}

.withdrawal-summary-row strong{
  margin-top:5px;
  font-size:15px;
}

.withdrawal-amount-form label{
  display:block;
  margin-top:10px;
}

.withdrawal-amount-form label > span,
.withdrawal-amount-form label > small{
  display:block;
}

.withdrawal-amount-form label > span{
  font-size:9px;
}

.withdrawal-amount-form label > small{
  color:rgba(201,214,223,.50);
  font-size:7px;
}

.withdrawal-input-row{
  margin-top:5px;
  display:grid;
  grid-template-columns:1fr 44px 132px;
  gap:7px;
}

.withdrawal-input-row input,
.withdrawal-input-row b,
.withdrawal-input-row button{
  min-height:34px;
}

.withdrawal-input-row input{
  padding:0 10px;
  border:1px solid rgba(64,165,220,.55);
  border-radius:6px;
  color:#edf4f7;
  background:rgba(8,24,36,.75);
}

.withdrawal-input-row b{
  display:grid;
  place-items:center;
  font-size:10px;
}

.withdrawal-input-row button{
  border:1px solid rgba(239,177,63,.8);
  border-radius:6px;
  color:#f0b63f;
  background:transparent;
  font-size:9px;
}

.withdrawal-amount-form p{
  margin:8px 0 0;
  color:rgba(206,219,227,.62);
  font-size:8px;
}

/* BREAKDOWN */

.withdrawal-breakdown-lines{
  padding:7px 12px;
}

.withdrawal-breakdown-lines > div{
  min-height:31px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.withdrawal-breakdown-lines span{
  font-size:8px;
}

.withdrawal-breakdown-lines small{
  display:block;
  color:rgba(197,211,220,.48);
  font-size:7px;
}

.withdrawal-breakdown-lines strong{
  font-size:9px;
}

.withdrawal-breakdown-lines .net{
  margin-top:4px;
  padding:0 5px;
  border:1px solid rgba(239,177,63,.62);
  border-radius:7px;
}

.withdrawal-breakdown-card > p{
  margin:0;
  padding:0 12px 10px;
  color:rgba(204,216,225,.58);
  font-size:7px;
}

/* PROCESS */

.withdrawal-process-card{
  margin-top:8px;
  border:1px solid rgba(92,165,212,.17);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.withdrawal-process-card > header{
  min-height:42px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:9px;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.withdrawal-process-card h2{
  margin:0;
  font-size:13px;
}

.withdrawal-process-card h2 + small{
  display:block;
  margin-top:2px;
  color:rgba(201,214,223,.52);
  font-size:7px;
}

.withdrawal-process-flow{
  min-height:100px;
  padding:12px;
  display:grid;
  grid-template-columns:1fr 18px 1fr 18px 1fr 18px 1fr 18px 1fr 18px 1fr 18px 1fr;
  align-items:center;
}

.withdrawal-process-flow > div{
  text-align:center;
}

.withdrawal-process-flow > div > span{
  width:40px;
  height:40px;
  margin:0 auto 5px;
  display:grid;
  place-items:center;
  border:1px solid rgba(132,154,169,.48);
  border-radius:50%;
  color:#8799a6;
  font-size:16px;
}

.withdrawal-process-flow > div.active > span{
  color:#f0b63f;
  border-color:rgba(239,177,63,.62);
}

.withdrawal-process-flow strong{
  display:block;
  font-size:7.5px;
}

.withdrawal-process-flow small{
  display:block;
  margin-top:2px;
  color:rgba(197,211,220,.50);
  font-size:6.6px;
}

.withdrawal-process-flow > em{
  text-align:center;
  color:#aebdc6;
  font-style:normal;
}

/* MAIN */

.withdrawal-main-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:1.3fr .95fr .8fr;
  gap:8px;
}

.withdrawal-source-table{
  padding:6px 10px;
}

.withdrawal-source-table > div{
  min-height:42px;
  display:grid;
  grid-template-columns:1.2fr 1fr .9fr .9fr .55fr;
  gap:7px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
  font-size:7.5px;
}

.withdrawal-source-table small{
  display:block;
  color:rgba(197,211,220,.46);
  font-size:6.4px;
}

.withdrawal-source-table button{
  min-height:26px;
}

.withdrawal-verification-card > p{
  margin:0 12px 8px;
  padding:8px;
  border-top:1px solid rgba(255,255,255,.05);
  color:rgba(204,216,225,.62);
  font-size:7.5px;
}

.withdrawal-verification-card > button{
  width:calc(100% - 24px);
  margin:0 12px 10px;
}

/* LOWER */

.withdrawal-lower-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:.8fr .78fr .9fr 1.05fr;
  gap:8px;
}

.withdrawal-payment-card > button,
.withdrawal-policy-card > button{
  width:calc(100% - 24px);
  margin:6px 12px 10px;
}

.withdrawal-review-lines{
  padding:7px 12px;
}

.withdrawal-review-lines > div{
  min-height:31px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.withdrawal-review-lines span{
  font-size:8px;
}

.withdrawal-review-lines small{
  display:block;
  color:rgba(197,211,220,.48);
  font-size:7px;
}

.withdrawal-review-lines strong{
  font-size:9px;
}

.withdrawal-review-lines .receive{
  margin-top:4px;
  padding:0 5px;
  border:1px solid rgba(239,177,63,.65);
  border-radius:7px;
}

.withdrawal-confirm{
  margin:8px 12px;
  display:flex;
  align-items:flex-start;
  gap:7px;
  color:rgba(211,223,230,.70);
  font-size:7.5px;
  line-height:1.4;
}

.withdrawal-confirm input{
  margin-top:2px;
}

.withdrawal-review-actions{
  padding:0 12px 10px;
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:8px;
}

.withdrawal-review-actions button{
  min-height:34px;
}

.withdrawal-review-actions button:last-child{
  color:#161616;
  border-color:#f0b63f;
  background:#f0b63f;
  font-weight:700;
}

/* TRACEABILITY */

.withdrawal-traceability-card{
  margin-top:8px;
}

.withdrawal-traceability-flow{
  min-height:74px;
  padding:10px;
  display:grid;
  grid-template-columns:1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr;
  align-items:center;
}

.withdrawal-traceability-flow > div{
  text-align:center;
}

.withdrawal-traceability-flow > div > span{
  color:#50c8ff;
  font-size:15px;
}

.withdrawal-traceability-flow strong{
  display:block;
  margin-top:2px;
  font-size:6.4px;
}

.withdrawal-traceability-flow small{
  display:block;
  margin-top:2px;
  color:rgba(197,211,220,.50);
  font-size:5.8px;
}

.withdrawal-traceability-flow > b{
  color:#aebdc6;
  text-align:center;
  font-weight:400;
}

/* RESPONSIVE */

@media (max-width:1250px){
  #partnerWithdrawalView .partner-shell{
    grid-template-columns:230px minmax(0,1fr);
  }

  .withdrawal-top-grid,
  .withdrawal-main-grid,
  .withdrawal-lower-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:1000px){
  #partnerWithdrawalView .partner-shell{
    grid-template-columns:1fr;
  }

  #partnerWithdrawalView .partner-sidebar{
    display:none;
  }

  .withdrawal-top-grid,
  .withdrawal-main-grid,
  .withdrawal-lower-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .partner-withdrawal-content{
    width:calc(100% - 28px);
  }

  #partnerWithdrawalView .partner-top-actions{
    display:none;
  }

  #partnerWithdrawalView .partner-search{
    width:100%;
  }

  .partner-withdrawal-hero{
    flex-direction:column;
    align-items:flex-start;
  }

  .partner-withdrawal-hero h1{
    font-size:34px;
  }

  .withdrawal-request-status{
    width:100%;
    min-width:0;
  }

  .withdrawal-amount-card{
    grid-template-columns:1fr;
  }

  .withdrawal-process-flow,
  .withdrawal-traceability-flow{
    grid-template-columns:1fr;
    gap:8px;
  }

  .withdrawal-process-flow > em,
  .withdrawal-traceability-flow > b{
    display:none;
  }
}


/* SCREEN 31 — TYPOGRAPHY BOOST */
#partnerWithdrawalView .partner-nav-item strong{font-size:14px;}
#partnerWithdrawalView .partner-nav-item small{font-size:9px;}

#partnerWithdrawalView .partner-withdrawal-breadcrumb{font-size:11px;}

#partnerWithdrawalView .partner-withdrawal-hero h1{font-size:44px;}
#partnerWithdrawalView .partner-withdrawal-hero > div:first-child > span{font-size:15px;}
#partnerWithdrawalView .partner-withdrawal-hero p{font-size:12.5px;}
#partnerWithdrawalView .partner-withdrawal-hero small{font-size:10px;}

#partnerWithdrawalView .withdrawal-request-status strong{font-size:10.5px;}
#partnerWithdrawalView .withdrawal-request-status small{font-size:8px;}
#partnerWithdrawalView .withdrawal-request-status b{font-size:10px;}

#partnerWithdrawalView .withdrawal-amount-left strong{font-size:12px;}
#partnerWithdrawalView .withdrawal-amount-left small{font-size:9px;}
#partnerWithdrawalView .withdrawal-amount-left b{font-size:34px;}
#partnerWithdrawalView .withdrawal-amount-left em{font-size:11px;}

#partnerWithdrawalView .withdrawal-summary-row span{font-size:10px;}
#partnerWithdrawalView .withdrawal-summary-row small{font-size:8px;}
#partnerWithdrawalView .withdrawal-summary-row strong{font-size:17px;}

#partnerWithdrawalView .withdrawal-amount-form label > span{font-size:10px;}
#partnerWithdrawalView .withdrawal-amount-form label > small{font-size:8px;}
#partnerWithdrawalView .withdrawal-amount-form p{font-size:9px;}

#partnerWithdrawalView .withdrawal-process-card h2,
#partnerWithdrawalView .withdrawable-panel h2{
  font-size:15px;
}

#partnerWithdrawalView .withdrawal-process-card h2 + small,
#partnerWithdrawalView .withdrawable-panel h2 + small{
  font-size:8.5px;
}

#partnerWithdrawalView .withdrawal-process-flow strong{font-size:9px;}
#partnerWithdrawalView .withdrawal-process-flow small{font-size:7.5px;}

#partnerWithdrawalView .withdrawable-lines span{font-size:9.5px;}
#partnerWithdrawalView .withdrawable-lines span small{font-size:8px;}
#partnerWithdrawalView .withdrawable-lines strong{font-size:10px;}

#partnerWithdrawalView .withdrawal-source-table > div{font-size:9px;}
#partnerWithdrawalView .withdrawal-source-table small{font-size:7.5px;}

#partnerWithdrawalView .withdrawal-verification-card > p{font-size:8.5px;}

#partnerWithdrawalView .withdrawal-breakdown-lines span{font-size:9.5px;}
#partnerWithdrawalView .withdrawal-breakdown-lines small{font-size:8px;}
#partnerWithdrawalView .withdrawal-breakdown-lines strong{font-size:10px;}
#partnerWithdrawalView .withdrawal-breakdown-card > p{font-size:8px;}

#partnerWithdrawalView .withdrawal-review-lines span{font-size:9.5px;}
#partnerWithdrawalView .withdrawal-review-lines small{font-size:8px;}
#partnerWithdrawalView .withdrawal-review-lines strong{font-size:10px;}

#partnerWithdrawalView .withdrawal-confirm{font-size:8.5px;}

#partnerWithdrawalView .withdrawal-traceability-flow strong{font-size:7.5px;}
#partnerWithdrawalView .withdrawal-traceability-flow small{font-size:6.8px;}


/* =========================================================
   SCREEN 32 — PAR KYC & TAX
   ========================================================= */

body:has(#partnerKycTaxView.active) > .topbar{
  display:none;
}

body:has(#partnerKycTaxView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#partnerKycTaxView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 78% 8%,rgba(46,130,195,.08),transparent 28%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#partnerKycTaxView.active{
  display:block;
}

#partnerKycTaxView .partner-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:278px minmax(0,1fr);
}

#partnerKycTaxView .partner-sidebar{
  min-height:100vh;
  padding:20px 20px 24px;
  border-right:1px solid rgba(87,173,228,.18);
  background:#06101a;
}

#partnerKycTaxView .partner-brand{
  min-height:74px;
  padding:0 10px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.07);
}

#partnerKycTaxView .partner-brand strong{
  color:#f0bd50;
  font-size:24px;
}

#partnerKycTaxView .partner-brand span{
  margin-top:4px;
  color:#d4dde4;
  font-size:8px;
  letter-spacing:.28em;
}

#partnerKycTaxView .partner-nav-label{
  display:block;
  margin:22px 10px 9px;
  color:#dce5ea;
  font-size:10px;
  letter-spacing:.24em;
}

#partnerKycTaxView .partner-nav{
  display:grid;
  gap:5px;
}

#partnerKycTaxView .partner-nav-item{
  width:100%;
  min-height:46px;
  padding:0 12px;
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  border:1px solid transparent;
  border-radius:10px;
  color:#d8e2e8;
  background:transparent;
  text-align:left;
}

#partnerKycTaxView .partner-nav-item > span{
  font-size:20px;
}

#partnerKycTaxView .partner-nav-item strong{
  display:block;
  font-size:13px;
}

#partnerKycTaxView .partner-nav-item small{
  display:block;
  margin-top:3px;
  color:rgba(203,216,225,.50);
  font-size:8px;
}

#partnerKycTaxView .partner-nav-item.active{
  border-color:rgba(239,177,63,.70);
  background:linear-gradient(90deg,rgba(239,177,63,.18),rgba(239,177,63,.03));
  box-shadow:0 0 18px rgba(239,177,63,.10);
}

#partnerKycTaxView .partner-nav-item.active > span{
  color:#f0b63f;
}

#partnerKycTaxView .partner-sidebar-vision{
  margin-top:18px;
  min-height:206px;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid rgba(92,165,212,.16);
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(5,15,25,.18),rgba(5,15,25,.62)),
    url("./assets/customer/home/hero-customer-home.webp") center / cover no-repeat;
}

#partnerKycTaxView .partner-sidebar-vision span{
  color:#f1f4f6;
  font-size:10px;
  line-height:1.55;
  letter-spacing:.18em;
}

#partnerKycTaxView .partner-sidebar-vision small{
  margin-top:18px;
  color:#d8e1e7;
  font-size:9px;
}

#partnerKycTaxView .partner-main{
  min-width:0;
}

#partnerKycTaxView .partner-topbar{
  min-height:84px;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid rgba(92,165,212,.12);
  background:rgba(4,11,18,.96);
}

#partnerKycTaxView .partner-search{
  width:min(730px,62%);
  min-height:48px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(92,165,212,.18);
  border-radius:12px;
  background:rgba(13,32,48,.66);
}

#partnerKycTaxView .partner-search input{
  width:100%;
  border:0;
  outline:0;
  color:#eaf0f4;
  background:transparent;
  font-size:13px;
}

#partnerKycTaxView .partner-top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

#partnerKycTaxView .partner-top-actions button{
  min-width:42px;
  height:42px;
  border:1px solid rgba(92,165,212,.16);
  border-radius:12px;
  color:#e1ebf0;
  background:rgba(10,24,36,.72);
}

#partnerKycTaxView .partner-user{
  display:flex;
  align-items:center;
  gap:10px;
}

#partnerKycTaxView .partner-avatar{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(180deg,#8cabd9,#436590);
}

#partnerKycTaxView .partner-user > div{
  display:flex;
  flex-direction:column;
}

#partnerKycTaxView .partner-user strong{
  font-size:13px;
}

#partnerKycTaxView .partner-user small{
  margin-top:3px;
  color:rgba(210,222,230,.58);
  font-size:9px;
}

/* CONTENT */

.partner-kyc-tax-content{
  width:min(1420px,calc(100% - 48px));
  margin:0 auto;
  padding:10px 0 26px;
}

.partner-kyc-tax-breadcrumb{
  min-height:28px;
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(202,215,224,.58);
  font-size:10px;
}

.partner-kyc-tax-breadcrumb strong{
  color:#6ed5ff;
}

.partner-kyc-tax-hero{
  min-height:125px;
  padding:16px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-radius:14px;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(4,11,18,.98),rgba(4,11,18,.78) 38%,rgba(4,11,18,.15) 72%,rgba(4,11,18,.03)),
    url("./assets/customer/home/hero-customer-home.webp") center 46% / cover no-repeat;
}

.partner-kyc-tax-hero h1{
  margin:0;
  font-size:38px;
  line-height:1;
}

.partner-kyc-tax-hero > div:first-child > span{
  display:block;
  margin-top:5px;
  font-size:14px;
  letter-spacing:.18em;
}

.partner-kyc-tax-hero p{
  margin:7px 0 2px;
  font-size:11.5px;
  color:rgba(224,234,240,.82);
}

.partner-kyc-tax-hero small{
  color:rgba(203,218,227,.58);
  font-size:9px;
}

.kyc-verification-status{
  min-width:270px;
  padding:10px 12px;
  display:grid;
  grid-template-columns:48px 1fr;
  gap:10px;
  align-items:center;
  border:1px solid rgba(239,177,63,.48);
  border-radius:10px;
  background:rgba(10,19,28,.88);
}

.kyc-verification-status > span{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#47cbff;
  font-size:30px;
}

.kyc-verification-status strong,
.kyc-verification-status small,
.kyc-verification-status b{
  display:block;
}

.kyc-verification-status strong{
  font-size:10px;
}

.kyc-verification-status small{
  margin-top:2px;
  color:rgba(203,216,225,.55);
  font-size:8px;
}

.kyc-verification-status b{
  margin-top:6px;
  width:max-content;
  padding:5px 10px;
  border:1px solid rgba(239,177,63,.7);
  border-radius:6px;
  color:#ffcb62;
  font-size:10px;
}

/* PROGRESS */

.kyc-progress-card{
  margin-top:8px;
  min-height:108px;
  padding:13px 14px;
  display:grid;
  grid-template-columns:1fr 24px 1fr 24px 1fr 24px 1fr 24px 1fr;
  align-items:center;
  border:1px solid rgba(92,165,212,.17);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.kyc-progress-card > div{
  text-align:center;
}

.kyc-progress-card > div > span{
  width:42px;
  height:42px;
  margin:0 auto 5px;
  display:grid;
  place-items:center;
  border:1px solid rgba(132,154,169,.48);
  border-radius:50%;
  color:#8799a6;
  font-size:17px;
}

.kyc-progress-card > div.done > span{
  color:#4eddb9;
  border-color:rgba(64,220,178,.65);
}

.kyc-progress-card > div.current > span{
  color:#f0b63f;
  border-color:rgba(239,177,63,.72);
}

.kyc-progress-card strong{
  display:block;
  font-size:14px;
}

.kyc-progress-card b{
  display:block;
  margin-top:2px;
  font-size:8.5px;
}

.kyc-progress-card small{
  display:block;
  margin-top:2px;
  color:rgba(197,211,220,.50);
  font-size:7px;
}

.kyc-progress-card em{
  display:block;
  margin:5px auto 0;
  width:max-content;
  padding:3px 8px;
  border-radius:5px;
  background:rgba(255,255,255,.04);
  color:rgba(211,223,230,.66);
  font-size:7px;
  font-style:normal;
}

.kyc-progress-card .done em{
  color:#4eddb9;
}

.kyc-progress-card .current em{
  color:#f0b63f;
}

.kyc-progress-card > i{
  text-align:center;
  color:#aebdc6;
  font-style:normal;
}

/* PANELS */

.kyc-tax-main-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:1fr 1.05fr 1.05fr;
  gap:8px;
}

.kyc-tax-panel{
  overflow:hidden;
  border:1px solid rgba(92,165,212,.17);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.kyc-tax-panel > header{
  min-height:45px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:9px;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.kyc-tax-panel h2{
  margin:0;
  font-size:14px;
}

.kyc-tax-panel h2 + small{
  display:block;
  margin-top:2px;
  color:rgba(201,214,223,.52);
  font-size:8px;
}

.kyc-tax-panel button{
  min-height:31px;
  padding:0 11px;
  border:1px solid rgba(239,177,63,.70);
  border-radius:7px;
  color:#f0b63f;
  background:transparent;
  font-size:8px;
}

.kyc-status-body{
  min-height:190px;
  padding:16px;
  display:grid;
  grid-template-columns:78px 1fr;
  gap:14px;
  align-items:start;
}

.kyc-status-body > span{
  width:68px;
  height:68px;
  display:grid;
  place-items:center;
  border:2px solid #35bfff;
  border-radius:18px;
  color:#35bfff;
  font-size:34px;
  box-shadow:0 0 16px rgba(53,191,255,.12);
}

.kyc-status-body > div > b{
  display:block;
  margin-bottom:10px;
  padding:8px 10px;
  border:1px solid rgba(239,177,63,.68);
  border-radius:7px;
  color:#ffc34f;
  text-align:center;
  font-size:14px;
}

.kyc-status-body p{
  margin:0;
  min-height:32px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
  font-size:9px;
}

.kyc-status-body p strong{
  font-size:9px;
}

.kyc-tax-lines{
  padding:6px 12px 8px;
}

.kyc-tax-lines > div{
  min-height:35px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.kyc-tax-lines span{
  font-size:9px;
}

.kyc-tax-lines span small{
  display:block;
  margin-top:2px;
  color:rgba(197,211,220,.48);
  font-size:7.5px;
}

.kyc-tax-lines strong{
  font-size:9px;
}

.jurisdiction-card > p,
.compliance-requirements-card > p{
  margin:0 12px 10px;
  padding:8px;
  border-top:1px solid rgba(255,255,255,.05);
  color:rgba(204,216,225,.64);
  font-size:8px;
  line-height:1.35;
}

.identity-document-card > button,
.tax-profile-card > button{
  width:calc(100% - 24px);
  margin:6px 12px 10px;
}

/* CHECKLIST */

.kyc-checklist{
  padding:7px 12px 10px;
}

.kyc-checklist > div{
  min-height:34px;
  display:grid;
  grid-template-columns:24px 1fr auto;
  gap:8px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.kyc-checklist span{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.04);
  color:#8da0ad;
  font-size:9px;
}

.kyc-checklist b{
  font-size:9px;
}

.kyc-checklist strong{
  font-size:8px;
  color:rgba(211,223,230,.58);
}

.kyc-checklist .done span,
.kyc-checklist .done strong{
  color:#4eddb9;
}

.kyc-checklist .current span,
.kyc-checklist .current strong{
  color:#f0b63f;
}

/* BOTTOM */

.kyc-tax-bottom-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:1.1fr 1fr .9fr;
  gap:8px;
}

.kyc-activity{
  padding:7px 12px 8px;
}

.kyc-activity > div{
  min-height:31px;
  display:grid;
  grid-template-columns:20px 1fr auto;
  gap:7px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.kyc-activity span{
  color:#74cfff;
  font-size:9px;
}

.kyc-activity b{
  font-size:8.5px;
}

.kyc-activity strong{
  color:rgba(210,222,230,.55);
  font-size:8px;
}

.recent-verification-card > button{
  float:right;
  margin:4px 12px 10px;
}

.important-info-card ul{
  margin:0;
  padding:12px 18px 14px 28px;
  color:rgba(218,229,236,.76);
  font-size:9px;
  line-height:1.55;
}

.next-step-kyc-card > p{
  margin:0;
  padding:12px;
  color:rgba(211,223,230,.70);
  font-size:9px;
  line-height:1.45;
}

.next-step-kyc-card > button{
  width:calc(100% - 24px);
  margin:0 12px 8px;
}

.next-step-kyc-card > button.secondary{
  color:#d8e2e8;
  border-color:rgba(120,145,163,.4);
}

/* RESPONSIVE */

@media (max-width:1250px){
  #partnerKycTaxView .partner-shell{
    grid-template-columns:230px minmax(0,1fr);
  }

  .kyc-tax-main-grid{
    grid-template-columns:1fr 1fr;
  }

  .kyc-tax-bottom-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:1000px){
  #partnerKycTaxView .partner-shell{
    grid-template-columns:1fr;
  }

  #partnerKycTaxView .partner-sidebar{
    display:none;
  }

  .kyc-tax-main-grid,
  .kyc-tax-bottom-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .partner-kyc-tax-content{
    width:calc(100% - 28px);
  }

  #partnerKycTaxView .partner-top-actions{
    display:none;
  }

  #partnerKycTaxView .partner-search{
    width:100%;
  }

  .partner-kyc-tax-hero{
    flex-direction:column;
    align-items:flex-start;
  }

  .partner-kyc-tax-hero h1{
    font-size:32px;
  }

  .kyc-verification-status{
    width:100%;
    min-width:0;
  }

  .kyc-progress-card{
    grid-template-columns:1fr;
    gap:8px;
  }

  .kyc-progress-card > i{
    display:none;
  }
}


/* =========================================================
   SCREEN 33 — PAR PAYMENT METHOD
   ========================================================= */

body:has(#partnerPaymentMethodView.active) > .topbar{
  display:none;
}

body:has(#partnerPaymentMethodView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#partnerPaymentMethodView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 78% 8%,rgba(46,130,195,.08),transparent 28%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#partnerPaymentMethodView.active{
  display:block;
}

#partnerPaymentMethodView .partner-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:278px minmax(0,1fr);
}

#partnerPaymentMethodView .partner-sidebar{
  min-height:100vh;
  padding:20px 20px 24px;
  border-right:1px solid rgba(87,173,228,.18);
  background:#06101a;
}

#partnerPaymentMethodView .partner-brand{
  min-height:74px;
  padding:0 10px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.07);
}

#partnerPaymentMethodView .partner-brand strong{
  color:#f0bd50;
  font-size:24px;
}

#partnerPaymentMethodView .partner-brand span{
  margin-top:4px;
  color:#d4dde4;
  font-size:8px;
  letter-spacing:.28em;
}

#partnerPaymentMethodView .partner-nav-label{
  display:block;
  margin:22px 10px 9px;
  color:#dce5ea;
  font-size:10px;
  letter-spacing:.24em;
}

#partnerPaymentMethodView .partner-nav{
  display:grid;
  gap:5px;
}

#partnerPaymentMethodView .partner-nav-item{
  width:100%;
  min-height:46px;
  padding:0 12px;
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  border:1px solid transparent;
  border-radius:10px;
  color:#d8e2e8;
  background:transparent;
  text-align:left;
}

#partnerPaymentMethodView .partner-nav-item > span{
  font-size:20px;
}

#partnerPaymentMethodView .partner-nav-item strong{
  display:block;
  font-size:13px;
}

#partnerPaymentMethodView .partner-nav-item small{
  display:block;
  margin-top:3px;
  color:rgba(203,216,225,.50);
  font-size:8px;
}

#partnerPaymentMethodView .partner-nav-item.active{
  border-color:rgba(239,177,63,.70);
  background:linear-gradient(90deg,rgba(239,177,63,.18),rgba(239,177,63,.03));
  box-shadow:0 0 18px rgba(239,177,63,.10);
}

#partnerPaymentMethodView .partner-nav-item.active > span{
  color:#f0b63f;
}

#partnerPaymentMethodView .partner-sidebar-vision{
  margin-top:18px;
  min-height:206px;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid rgba(92,165,212,.16);
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(5,15,25,.18),rgba(5,15,25,.62)),
    url("./assets/customer/home/hero-customer-home.webp") center / cover no-repeat;
}

#partnerPaymentMethodView .partner-sidebar-vision span{
  color:#f1f4f6;
  font-size:10px;
  line-height:1.55;
  letter-spacing:.18em;
}

#partnerPaymentMethodView .partner-sidebar-vision small{
  margin-top:18px;
  color:#d8e1e7;
  font-size:9px;
}

#partnerPaymentMethodView .partner-main{
  min-width:0;
}

#partnerPaymentMethodView .partner-topbar{
  min-height:84px;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid rgba(92,165,212,.12);
  background:rgba(4,11,18,.96);
}

#partnerPaymentMethodView .partner-search{
  width:min(730px,62%);
  min-height:48px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(92,165,212,.18);
  border-radius:12px;
  background:rgba(13,32,48,.66);
}

#partnerPaymentMethodView .partner-search input{
  width:100%;
  border:0;
  outline:0;
  color:#eaf0f4;
  background:transparent;
  font-size:13px;
}

#partnerPaymentMethodView .partner-top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

#partnerPaymentMethodView .partner-top-actions button{
  min-width:42px;
  height:42px;
  border:1px solid rgba(92,165,212,.16);
  border-radius:12px;
  color:#e1ebf0;
  background:rgba(10,24,36,.72);
}

#partnerPaymentMethodView .partner-user{
  display:flex;
  align-items:center;
  gap:10px;
}

#partnerPaymentMethodView .partner-avatar{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(180deg,#8cabd9,#436590);
}

#partnerPaymentMethodView .partner-user > div{
  display:flex;
  flex-direction:column;
}

#partnerPaymentMethodView .partner-user strong{
  font-size:13px;
}

#partnerPaymentMethodView .partner-user small{
  margin-top:3px;
  color:rgba(210,222,230,.58);
  font-size:9px;
}

/* CONTENT */

.partner-payment-method-content{
  width:min(1420px,calc(100% - 48px));
  margin:0 auto;
  padding:10px 0 26px;
}

.partner-payment-breadcrumb{
  min-height:28px;
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(202,215,224,.58);
  font-size:10px;
}

.partner-payment-breadcrumb strong{
  color:#6ed5ff;
}

.partner-payment-hero{
  min-height:126px;
  padding:16px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-radius:14px;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(4,11,18,.98),rgba(4,11,18,.78) 38%,rgba(4,11,18,.15) 72%,rgba(4,11,18,.03)),
    url("./assets/customer/home/hero-customer-home.webp") center 46% / cover no-repeat;
}

.partner-payment-hero h1{
  margin:0;
  font-size:39px;
  line-height:1;
}

.partner-payment-hero > div:first-child > span{
  display:block;
  margin-top:5px;
  font-size:14px;
  letter-spacing:.18em;
}

.partner-payment-hero p{
  margin:7px 0 2px;
  font-size:11.5px;
  color:rgba(224,234,240,.82);
}

.partner-payment-hero small{
  color:rgba(203,218,227,.58);
  font-size:9px;
}

.payment-method-status-card{
  min-width:290px;
  padding:10px 12px;
  display:grid;
  grid-template-columns:50px 1fr;
  gap:10px;
  align-items:center;
  border:1px solid rgba(61,190,242,.42);
  border-radius:10px;
  background:rgba(8,22,32,.88);
}

.payment-method-status-card > span{
  color:#38ccff;
  font-size:34px;
}

.payment-method-status-card strong,
.payment-method-status-card small,
.payment-method-status-card b,
.payment-method-status-card em{
  display:block;
}

.payment-method-status-card strong{
  font-size:10px;
}

.payment-method-status-card small{
  color:rgba(203,216,225,.55);
  font-size:8px;
}

.payment-method-status-card b{
  width:max-content;
  margin-top:6px;
  padding:4px 10px;
  border:1px solid rgba(64,220,178,.72);
  border-radius:6px;
  color:#4eddb9;
  font-size:10px;
}

.payment-method-status-card em{
  margin-top:6px;
  color:rgba(210,222,230,.55);
  font-size:8px;
  font-style:normal;
}

/* CURRENT PAYMENT */

.current-payment-method-card{
  margin-top:8px;
  border:1px solid rgba(239,177,63,.68);
  border-radius:11px;
  background:
    radial-gradient(circle at 8% 50%,rgba(255,148,0,.13),transparent 27%),
    rgba(8,18,28,.96);
}

.current-payment-method-card > header,
.payment-method-panel > header{
  min-height:44px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:9px;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.current-payment-method-card h2,
.payment-method-panel h2{
  margin:0;
  font-size:14px;
}

.current-payment-method-card h2 + small,
.payment-method-panel h2 + small{
  display:block;
  margin-top:2px;
  color:rgba(201,214,223,.52);
  font-size:8px;
}

.current-payment-method-grid{
  min-height:104px;
  padding:12px;
  display:grid;
  grid-template-columns:1.45fr repeat(6,.75fr) auto;
  gap:10px;
  align-items:center;
}

.current-payment-method-grid > div:not(.payment-method-primary){
  min-width:0;
  padding-left:10px;
  border-left:1px solid rgba(255,255,255,.06);
}

.current-payment-method-grid small{
  display:block;
  color:rgba(200,214,223,.55);
  font-size:8px;
  line-height:1.4;
}

.current-payment-method-grid strong{
  display:block;
  margin-top:5px;
  font-size:10px;
}

.current-payment-method-grid strong.active{
  color:#4eddb9;
}

.payment-method-primary{
  display:flex;
  align-items:center;
  gap:12px;
}

.payment-method-primary > span{
  color:#48c6ff;
  font-size:36px;
}

.payment-method-primary strong{
  font-size:14px;
}

.payment-method-primary b{
  display:block;
  width:max-content;
  margin-top:5px;
  padding:3px 7px;
  border-radius:5px;
  color:#4eddb9;
  background:rgba(64,220,178,.10);
  font-size:8px;
}

.current-payment-method-grid > button{
  min-height:32px;
  padding:0 10px;
  border:1px solid rgba(239,177,63,.7);
  border-radius:7px;
  color:#f0b63f;
  background:transparent;
  font-size:8px;
}

/* MAIN LAYOUT */

.payment-method-main-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:1fr .34fr;
  gap:8px;
}

.payment-method-left-column{
  min-width:0;
}

.payment-method-panel{
  overflow:hidden;
  border:1px solid rgba(92,165,212,.17);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.payment-method-panel button{
  min-height:31px;
  padding:0 11px;
  border:1px solid rgba(239,177,63,.70);
  border-radius:7px;
  color:#f0b63f;
  background:transparent;
  font-size:8px;
}

/* MY METHODS */

.my-payment-methods-card > header{
  justify-content:flex-start;
}

.my-payment-methods-card > header > button{
  margin-left:auto;
  min-width:190px;
  color:#111;
  background:#f0b63f;
  font-weight:700;
}

.payment-method-list{
  padding:6px 12px 8px;
}

.payment-method-list > div{
  min-height:55px;
  display:grid;
  grid-template-columns:34px 1.35fr .65fr .5fr 1fr .65fr .7fr 62px;
  gap:8px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.payment-method-list > div > span:first-child{
  color:#48c6ff;
  font-size:22px;
}

.payment-method-list strong{
  font-size:9px;
}

.payment-method-list small{
  display:block;
  margin-top:2px;
  color:rgba(197,211,220,.48);
  font-size:7px;
}

.payment-method-list b{
  width:max-content;
  padding:3px 6px;
  border-radius:4px;
  color:#4eddb9;
  background:rgba(64,220,178,.10);
  font-size:7px;
}

.payment-method-list em{
  font-style:normal;
  font-size:9px;
}

.payment-method-list span.active{
  color:#4eddb9;
  font-size:8px;
}

.payment-method-list span.pending{
  color:#f0b63f;
  font-size:8px;
}

/* LOWER INFO */

.payment-method-info-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:1.15fr .9fr .78fr;
  gap:8px;
}

.payment-method-lines{
  padding:6px 12px 8px;
}

.payment-method-lines > div{
  min-height:34px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.payment-method-lines span{
  font-size:9px;
}

.payment-method-lines span small{
  display:block;
  color:rgba(197,211,220,.48);
  font-size:7.5px;
}

.payment-method-lines strong{
  font-size:9px;
}

.payment-method-details-card > button{
  width:calc(100% - 24px);
  margin:6px 12px 10px;
}

.supported-payment-grid{
  padding:10px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
}

.supported-payment-grid > div{
  min-height:135px;
  padding:10px 7px;
  text-align:center;
  border:1px solid rgba(92,165,212,.15);
  border-radius:8px;
  background:rgba(11,28,41,.7);
}

.supported-payment-grid span{
  display:block;
  color:#72cfff;
  font-size:26px;
}

.supported-payment-grid strong{
  display:block;
  margin-top:8px;
  font-size:9px;
}

.supported-payment-grid small{
  display:block;
  margin-top:2px;
  color:rgba(197,211,220,.48);
  font-size:7px;
}

.supported-payment-grid b{
  display:block;
  margin-top:10px;
  color:#4eddb9;
  font-size:8px;
}

.supported-payment-methods-card > p{
  margin:0 10px 10px;
  padding:8px;
  border-top:1px solid rgba(255,255,255,.05);
  color:rgba(204,216,225,.62);
  font-size:8px;
  line-height:1.4;
}

.payment-important-info-card ul{
  margin:0;
  padding:12px 18px 14px 29px;
  color:rgba(216,227,234,.76);
  font-size:9px;
  line-height:1.55;
}

/* ADD METHOD */

.add-payment-method-card{
  min-height:100%;
}

.add-payment-flow{
  padding:10px 12px;
}

.add-payment-flow > div{
  min-height:66px;
  display:grid;
  grid-template-columns:46px 1fr;
  gap:10px;
  align-items:center;
  position:relative;
}

.add-payment-flow > div:not(:last-child)::after{
  content:"";
  position:absolute;
  left:22px;
  bottom:-8px;
  width:1px;
  height:18px;
  background:rgba(140,162,177,.35);
}

.add-payment-flow > div > span{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(132,154,169,.48);
  border-radius:50%;
  color:#9aabb6;
  font-size:11px;
}

.add-payment-flow > div.active > span{
  color:#40d4ff;
  border-color:#40d4ff;
}

.add-payment-flow strong{
  display:block;
  font-size:9px;
}

.add-payment-flow small{
  display:block;
  margin-top:2px;
  color:rgba(197,211,220,.48);
  font-size:7.5px;
}

.add-payment-method-card > button{
  width:calc(100% - 24px);
  margin:6px 12px 12px;
  min-height:38px;
  color:#111;
  background:#f0b63f;
  font-weight:700;
}

/* ACTIVITY */

.payment-method-activity-card{
  margin-top:8px;
}

.payment-activity-table{
  padding:5px 10px 8px;
}

.payment-activity-table > div{
  min-height:35px;
  display:grid;
  grid-template-columns:.7fr 1fr 1.2fr .8fr 1.4fr .5fr;
  gap:7px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
  font-size:8px;
}

.payment-activity-table .head{
  color:rgba(194,209,219,.58);
  font-size:7px;
}

.payment-activity-table strong{
  color:#4eddb9;
}

.payment-method-activity-card > button.history{
  float:right;
  margin:0 12px 10px;
}

/* RESPONSIVE */

@media (max-width:1250px){
  #partnerPaymentMethodView .partner-shell{
    grid-template-columns:230px minmax(0,1fr);
  }

  .current-payment-method-grid{
    grid-template-columns:1fr 1fr 1fr;
  }

  .payment-method-main-grid{
    grid-template-columns:1fr;
  }

  .payment-method-info-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:1000px){
  #partnerPaymentMethodView .partner-shell{
    grid-template-columns:1fr;
  }

  #partnerPaymentMethodView .partner-sidebar{
    display:none;
  }

  .payment-method-info-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .partner-payment-method-content{
    width:calc(100% - 28px);
  }

  #partnerPaymentMethodView .partner-top-actions{
    display:none;
  }

  #partnerPaymentMethodView .partner-search{
    width:100%;
  }

  .partner-payment-hero{
    flex-direction:column;
    align-items:flex-start;
  }

  .partner-payment-hero h1{
    font-size:32px;
  }

  .payment-method-status-card{
    width:100%;
    min-width:0;
  }

  .current-payment-method-grid,
  .payment-method-list > div,
  .supported-payment-grid,
  .payment-activity-table > div{
    grid-template-columns:1fr;
  }

  .current-payment-method-grid > div:not(.payment-method-primary){
    padding-left:0;
    border-left:0;
  }
}


/* =========================================================
   SCREEN 34 — PAR SETTLEMENT HISTORY
   ========================================================= */

body:has(#partnerSettlementHistoryView.active) > .topbar{
  display:none;
}

body:has(#partnerSettlementHistoryView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#partnerSettlementHistoryView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 78% 8%,rgba(46,130,195,.08),transparent 28%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#partnerSettlementHistoryView.active{
  display:block;
}

#partnerSettlementHistoryView .partner-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:278px minmax(0,1fr);
}

#partnerSettlementHistoryView .partner-sidebar{
  min-height:100vh;
  padding:20px 20px 24px;
  border-right:1px solid rgba(87,173,228,.18);
  background:#06101a;
}

#partnerSettlementHistoryView .partner-brand{
  min-height:74px;
  padding:0 10px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.07);
}

#partnerSettlementHistoryView .partner-brand strong{
  color:#f0bd50;
  font-size:24px;
}

#partnerSettlementHistoryView .partner-brand span{
  margin-top:4px;
  color:#d4dde4;
  font-size:8px;
  letter-spacing:.28em;
}

#partnerSettlementHistoryView .partner-nav-label{
  display:block;
  margin:20px 10px 9px;
  color:#dce5ea;
  font-size:10px;
  letter-spacing:.24em;
}

#partnerSettlementHistoryView .partner-nav{
  display:grid;
  gap:5px;
}

#partnerSettlementHistoryView .partner-nav-item{
  width:100%;
  min-height:46px;
  padding:0 12px;
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  border:1px solid transparent;
  border-radius:10px;
  color:#d8e2e8;
  background:transparent;
  text-align:left;
}

#partnerSettlementHistoryView .partner-nav-item > span{
  font-size:20px;
}

#partnerSettlementHistoryView .partner-nav-item strong{
  display:block;
  font-size:13px;
}

#partnerSettlementHistoryView .partner-nav-item small{
  display:block;
  margin-top:3px;
  color:rgba(203,216,225,.50);
  font-size:8px;
}

#partnerSettlementHistoryView .partner-nav-item.active{
  border-color:rgba(239,177,63,.70);
  background:linear-gradient(90deg,rgba(239,177,63,.18),rgba(239,177,63,.03));
  box-shadow:0 0 18px rgba(239,177,63,.10);
}

#partnerSettlementHistoryView .partner-nav-item.active > span{
  color:#f0b63f;
}

#partnerSettlementHistoryView .partner-sidebar-vision{
  margin-top:18px;
  min-height:206px;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid rgba(92,165,212,.16);
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(5,15,25,.18),rgba(5,15,25,.62)),
    url("./assets/customer/home/hero-customer-home.webp") center / cover no-repeat;
}

#partnerSettlementHistoryView .partner-sidebar-vision span{
  color:#f1f4f6;
  font-size:10px;
  line-height:1.55;
  letter-spacing:.18em;
}

#partnerSettlementHistoryView .partner-sidebar-vision small{
  margin-top:18px;
  color:#d8e1e7;
  font-size:9px;
}

#partnerSettlementHistoryView .partner-main{
  min-width:0;
}

#partnerSettlementHistoryView .partner-topbar{
  min-height:84px;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid rgba(92,165,212,.12);
  background:rgba(4,11,18,.96);
}

#partnerSettlementHistoryView .partner-search{
  width:min(730px,62%);
  min-height:48px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(92,165,212,.18);
  border-radius:12px;
  background:rgba(13,32,48,.66);
}

#partnerSettlementHistoryView .partner-search input{
  width:100%;
  border:0;
  outline:0;
  color:#eaf0f4;
  background:transparent;
  font-size:13px;
}

#partnerSettlementHistoryView .partner-top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

#partnerSettlementHistoryView .partner-top-actions button{
  min-width:42px;
  height:42px;
  border:1px solid rgba(92,165,212,.16);
  border-radius:12px;
  color:#e1ebf0;
  background:rgba(10,24,36,.72);
}

#partnerSettlementHistoryView .partner-user{
  display:flex;
  align-items:center;
  gap:10px;
}

#partnerSettlementHistoryView .partner-avatar{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(180deg,#8cabd9,#436590);
}

#partnerSettlementHistoryView .partner-user > div{
  display:flex;
  flex-direction:column;
}

#partnerSettlementHistoryView .partner-user strong{
  font-size:13px;
}

#partnerSettlementHistoryView .partner-user small{
  margin-top:3px;
  color:rgba(210,222,230,.58);
  font-size:9px;
}

/* CONTENT */

.partner-settlement-history-content{
  width:min(1420px,calc(100% - 48px));
  margin:0 auto;
  padding:10px 0 26px;
}

.partner-settlement-breadcrumb{
  min-height:28px;
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(202,215,224,.58);
  font-size:10px;
}

.partner-settlement-breadcrumb strong{
  color:#6ed5ff;
}

.partner-settlement-hero{
  min-height:126px;
  padding:16px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-radius:14px;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(4,11,18,.98),rgba(4,11,18,.78) 38%,rgba(4,11,18,.15) 72%,rgba(4,11,18,.03)),
    url("./assets/customer/home/hero-customer-home.webp") center 46% / cover no-repeat;
}

.partner-settlement-hero h1{
  margin:0;
  font-size:39px;
  line-height:1;
}

.partner-settlement-hero > div:first-child > span{
  display:block;
  margin-top:5px;
  font-size:14px;
  letter-spacing:.18em;
}

.partner-settlement-hero p{
  margin:7px 0 2px;
  font-size:11.5px;
  color:rgba(224,234,240,.82);
}

.partner-settlement-hero small{
  color:rgba(203,218,227,.58);
  font-size:9px;
}

.settlement-overview-card{
  min-width:285px;
  padding:10px 12px;
  display:grid;
  grid-template-columns:50px 1fr;
  gap:10px;
  align-items:center;
  border:1px solid rgba(61,190,242,.42);
  border-radius:10px;
  background:rgba(8,22,32,.88);
}

.settlement-overview-card > span{
  color:#38ccff;
  font-size:34px;
}

.settlement-overview-card strong,
.settlement-overview-card small{
  display:block;
}

.settlement-overview-card strong{
  font-size:10px;
}

.settlement-overview-card small{
  color:rgba(203,216,225,.55);
  font-size:8px;
}

.settlement-overview-card button{
  margin-top:8px;
  min-height:30px;
  padding:0 12px;
  border:1px solid rgba(239,177,63,.7);
  border-radius:6px;
  color:#f0b63f;
  background:transparent;
  font-size:8px;
}

/* KPI */

.settlement-kpi-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}

.settlement-kpi-grid article{
  min-height:112px;
  padding:14px;
  display:grid;
  grid-template-columns:52px 1fr;
  gap:10px;
  align-items:center;
  border:1px solid rgba(92,165,212,.18);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.settlement-kpi-grid article > span{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:24px;
}

.settlement-kpi-grid strong,
.settlement-kpi-grid small,
.settlement-kpi-grid b,
.settlement-kpi-grid em{
  display:block;
}

.settlement-kpi-grid strong{
  font-size:11px;
}

.settlement-kpi-grid small{
  color:rgba(203,216,225,.52);
  font-size:8px;
}

.settlement-kpi-grid b{
  margin-top:8px;
  font-size:23px;
}

.settlement-kpi-grid em{
  margin-top:4px;
  color:rgba(206,219,227,.58);
  font-size:8px;
  font-style:normal;
}

.settlement-kpi-grid .total{
  border-color:rgba(239,177,63,.65);
}
.settlement-kpi-grid .total > span{
  color:#f0b63f;
  border:1px solid rgba(239,177,63,.42);
}

.settlement-kpi-grid .processing > span{
  color:#f0b63f;
  border:1px solid rgba(239,177,63,.42);
}

.settlement-kpi-grid .paid > span{
  color:#4eddb9;
  border:1px solid rgba(64,220,178,.45);
}

.settlement-kpi-grid .review > span{
  color:#f0b63f;
  border:1px solid rgba(239,177,63,.42);
}

/* SUMMARY */

.settlement-summary-card{
  margin-top:8px;
  border:1px solid rgba(92,165,212,.18);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.settlement-summary-card > header{
  min-height:44px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:9px;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.settlement-summary-card h2{
  margin:0;
  font-size:14px;
}

.settlement-summary-card h2 + small{
  display:block;
  margin-top:2px;
  color:rgba(201,214,223,.52);
  font-size:8px;
}

.settlement-summary-grid{
  padding:10px 12px 12px;
  display:grid;
  grid-template-columns:repeat(4,1fr) 1.2fr;
  gap:10px;
  align-items:stretch;
}

.settlement-summary-grid > div{
  padding:8px 12px;
  border-right:1px solid rgba(255,255,255,.06);
}

.settlement-summary-grid span,
.settlement-summary-grid small,
.settlement-summary-grid strong{
  display:block;
}

.settlement-summary-grid span{
  font-size:9px;
}

.settlement-summary-grid small{
  margin-top:2px;
  color:rgba(197,211,220,.48);
  font-size:7.5px;
}

.settlement-summary-grid strong{
  margin-top:8px;
  font-size:18px;
}

.settlement-summary-grid .net strong{
  color:#f0b63f;
}

.settlement-summary-grid > p{
  margin:0;
  padding:10px;
  display:flex;
  align-items:center;
  border:1px solid rgba(69,154,216,.22);
  border-radius:8px;
  background:rgba(35,107,158,.15);
  color:rgba(219,230,236,.72);
  font-size:8px;
  line-height:1.45;
}

/* FILTERS */

.settlement-filter-bar{
  margin-top:8px;
  padding:10px;
  display:grid;
  grid-template-columns:1.7fr repeat(5,.75fr);
  gap:8px;
  align-items:end;
  border:1px solid rgba(92,165,212,.17);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.settlement-filter-bar label{
  min-width:0;
}

.settlement-filter-bar label > small{
  display:block;
  margin-bottom:5px;
  color:rgba(211,223,230,.68);
  font-size:8px;
}

.settlement-filter-bar select{
  width:100%;
  min-height:36px;
  padding:0 9px;
  border:1px solid rgba(92,165,212,.22);
  border-radius:7px;
  color:#e9f0f4;
  background:#0b1823;
  font-size:8px;
}

.settlement-search{
  min-height:36px;
  padding:0 11px;
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(92,165,212,.22);
  border-radius:7px;
  background:#0b1823;
}

.settlement-search input{
  width:100%;
  border:0;
  outline:0;
  color:#e9f0f4;
  background:transparent;
  font-size:9px;
}

/* HISTORY TABLE */

.settlement-history-card{
  margin-top:8px;
  overflow:hidden;
  border:1px solid rgba(92,165,212,.17);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.settlement-history-card > header{
  min-height:48px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.settlement-history-card > header > div{
  display:flex;
  align-items:center;
  gap:9px;
}

.settlement-history-card h2{
  margin:0;
  font-size:14px;
}

.settlement-history-card h2 + small{
  display:block;
  margin-top:2px;
  color:rgba(201,214,223,.52);
  font-size:8px;
}

.settlement-history-card > header button{
  min-height:32px;
  padding:0 13px;
  border:1px solid rgba(239,177,63,.70);
  border-radius:7px;
  color:#f0b63f;
  background:transparent;
  font-size:8px;
}

.settlement-history-table{
  overflow-x:auto;
}

.settlement-history-table > div{
  min-width:1180px;
  min-height:43px;
  padding:0 10px;
  display:grid;
  grid-template-columns:36px .85fr .85fr .85fr .9fr .85fr .65fr .9fr 1fr .95fr .62fr;
  gap:6px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
  font-size:8px;
}

.settlement-history-table .head{
  min-height:48px;
  color:rgba(211,223,230,.72);
  background:rgba(12,29,42,.55);
  font-size:7.5px;
}

.settlement-history-table .head span small{
  display:block;
  margin-top:2px;
  color:rgba(197,211,220,.45);
  font-size:6.5px;
}

.settlement-history-table strong{
  font-size:8px;
}

.settlement-history-table strong.paid,
.settlement-history-table strong.approved{
  color:#4eddb9;
}

.settlement-history-table strong.processing{
  color:#43c4ff;
}

.settlement-history-table strong.review{
  color:#f0b63f;
}

.settlement-history-table strong.rejected{
  color:#ff5364;
}

.settlement-history-table button{
  min-height:28px;
  padding:0 9px;
  border:1px solid rgba(239,177,63,.70);
  border-radius:6px;
  color:#f0b63f;
  background:transparent;
  font-size:7.5px;
}

.settlement-history-card > footer{
  min-height:48px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:rgba(206,219,227,.62);
  font-size:8px;
}

.settlement-pagination{
  display:flex;
  align-items:center;
  gap:5px;
}

.settlement-pagination button{
  min-width:30px;
  height:30px;
  border:1px solid rgba(92,165,212,.20);
  border-radius:6px;
  color:#dce6eb;
  background:#0b1823;
  font-size:8px;
}

.settlement-pagination button.active{
  color:#111;
  border-color:#f0b63f;
  background:#f0b63f;
  font-weight:700;
}

/* RESPONSIVE */

@media (max-width:1250px){
  #partnerSettlementHistoryView .partner-shell{
    grid-template-columns:230px minmax(0,1fr);
  }

  .settlement-kpi-grid{
    grid-template-columns:1fr 1fr;
  }

  .settlement-summary-grid{
    grid-template-columns:1fr 1fr;
  }

  .settlement-summary-grid > p{
    grid-column:1/-1;
  }

  .settlement-filter-bar{
    grid-template-columns:1fr 1fr 1fr;
  }

  .settlement-search{
    grid-column:1/-1;
  }
}

@media (max-width:1000px){
  #partnerSettlementHistoryView .partner-shell{
    grid-template-columns:1fr;
  }

  #partnerSettlementHistoryView .partner-sidebar{
    display:none;
  }
}

@media (max-width:760px){
  .partner-settlement-history-content{
    width:calc(100% - 28px);
  }

  #partnerSettlementHistoryView .partner-top-actions{
    display:none;
  }

  #partnerSettlementHistoryView .partner-search{
    width:100%;
  }

  .partner-settlement-hero{
    flex-direction:column;
    align-items:flex-start;
  }

  .partner-settlement-hero h1{
    font-size:32px;
  }

  .settlement-overview-card{
    width:100%;
    min-width:0;
  }

  .settlement-kpi-grid,
  .settlement-summary-grid,
  .settlement-filter-bar{
    grid-template-columns:1fr;
  }

  .settlement-search{
    grid-column:auto;
  }

  .settlement-history-card > footer{
    flex-direction:column;
    align-items:flex-start;
    padding:10px 12px;
  }
}


/* =========================================================
   SCREEN 35 — ADM DASHBOARD
   ========================================================= */

body:has(#adminDashboardView.active) > .topbar{
  display:none;
}

body:has(#adminDashboardView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#adminDashboardView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 82% 7%,rgba(28,122,188,.08),transparent 28%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#adminDashboardView.active{
  display:block;
}

#adminDashboardView .admin-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:278px minmax(0,1fr);
}

/* SIDEBAR */

#adminDashboardView .admin-sidebar{
  min-height:100vh;
  padding:20px 20px 24px;
  border-right:1px solid rgba(87,173,228,.18);
  background:#06101a;
}

#adminDashboardView .admin-brand{
  min-height:74px;
  padding:0 10px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.07);
}

#adminDashboardView .admin-brand strong{
  color:#f0bd50;
  font-size:24px;
}

#adminDashboardView .admin-brand span{
  margin-top:4px;
  color:#d4dde4;
  font-size:8px;
  letter-spacing:.28em;
}

#adminDashboardView .admin-nav-label{
  display:block;
  margin:20px 10px 9px;
  color:#dce5ea;
  font-size:10px;
  letter-spacing:.24em;
}

#adminDashboardView .admin-nav{
  display:grid;
  gap:4px;
}

#adminDashboardView .admin-nav-item{
  width:100%;
  min-height:44px;
  padding:0 12px;
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  border:1px solid transparent;
  border-radius:10px;
  color:#d8e2e8;
  background:transparent;
  text-align:left;
}

#adminDashboardView .admin-nav-item > span{
  font-size:20px;
}

#adminDashboardView .admin-nav-item strong{
  display:block;
  font-size:12.5px;
}

#adminDashboardView .admin-nav-item small{
  display:block;
  margin-top:2px;
  color:rgba(203,216,225,.48);
  font-size:7.5px;
}

#adminDashboardView .admin-nav-item.active{
  border-color:rgba(239,177,63,.70);
  background:
    linear-gradient(90deg,rgba(239,177,63,.22),rgba(239,177,63,.04));
  box-shadow:0 0 18px rgba(239,177,63,.10);
}

#adminDashboardView .admin-nav-item.active > span{
  color:#f0b63f;
}

#adminDashboardView .admin-sidebar-vision{
  margin-top:18px;
  min-height:198px;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid rgba(92,165,212,.16);
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(5,15,25,.18),rgba(5,15,25,.62)),
    url("./assets/customer/home/hero-customer-home.webp") center / cover no-repeat;
}

#adminDashboardView .admin-sidebar-vision span{
  color:#f1f4f6;
  font-size:10px;
  line-height:1.55;
  letter-spacing:.18em;
}

#adminDashboardView .admin-sidebar-vision small{
  margin-top:18px;
  color:#d8e1e7;
  font-size:9px;
}

/* TOPBAR */

#adminDashboardView .admin-main{
  min-width:0;
}

#adminDashboardView .admin-topbar{
  min-height:84px;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid rgba(92,165,212,.12);
  background:rgba(4,11,18,.96);
}

#adminDashboardView .admin-search{
  width:min(730px,62%);
  min-height:48px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(92,165,212,.18);
  border-radius:12px;
  background:rgba(13,32,48,.66);
}

#adminDashboardView .admin-search input{
  width:100%;
  border:0;
  outline:0;
  color:#eaf0f4;
  background:transparent;
  font-size:13px;
}

#adminDashboardView .admin-top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

#adminDashboardView .admin-top-actions button{
  min-width:42px;
  height:42px;
  border:1px solid rgba(92,165,212,.16);
  border-radius:12px;
  color:#e1ebf0;
  background:rgba(10,24,36,.72);
}

#adminDashboardView .admin-user{
  display:flex;
  align-items:center;
  gap:10px;
}

#adminDashboardView .admin-avatar{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(180deg,#8cabd9,#436590);
}

#adminDashboardView .admin-user > div{
  display:flex;
  flex-direction:column;
}

#adminDashboardView .admin-user strong{
  font-size:13px;
}

#adminDashboardView .admin-user small{
  margin-top:3px;
  color:rgba(210,222,230,.58);
  font-size:9px;
}

/* CONTENT */

.admin-dashboard-content{
  width:min(1420px,calc(100% - 48px));
  margin:0 auto;
  padding:10px 0 26px;
}

.admin-dashboard-breadcrumb{
  min-height:28px;
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(202,215,224,.58);
  font-size:10px;
}

.admin-dashboard-breadcrumb strong{
  color:#6ed5ff;
}

/* HERO */

.admin-dashboard-hero{
  min-height:142px;
  padding:16px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-radius:14px;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(4,11,18,.98),rgba(4,11,18,.75) 38%,rgba(4,11,18,.12) 72%,rgba(4,11,18,.04)),
    url("./assets/customer/home/hero-customer-home.webp") center 46% / cover no-repeat;
}

.admin-dashboard-hero h1{
  margin:0;
  font-size:40px;
  line-height:1;
}

.admin-dashboard-hero > div:first-child > span{
  display:block;
  margin-top:5px;
  font-size:14px;
  letter-spacing:.18em;
}

.admin-dashboard-hero p{
  margin:7px 0 2px;
  font-size:11.5px;
  color:rgba(224,234,240,.82);
}

.admin-dashboard-hero small{
  color:rgba(203,218,227,.58);
  font-size:9px;
}

.admin-hero-manifesto{
  min-width:190px;
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:flex-start;
}

.admin-hero-manifesto strong{
  color:#edf3f6;
  font-size:10px;
  letter-spacing:.12em;
}

/* STATUS */

.admin-status-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:1.05fr 1.35fr .65fr;
  gap:8px;
}

.admin-platform-status-card,
.admin-core-service-card,
.admin-operational-overview-card{
  border:1px solid rgba(92,165,212,.18);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.admin-platform-status-card{
  min-height:140px;
  padding:16px;
  display:grid;
  grid-template-columns:92px 1fr;
  gap:14px;
  align-items:center;
  border-color:rgba(64,220,178,.55);
  background:
    radial-gradient(circle at 15% 50%,rgba(64,220,178,.14),transparent 38%),
    rgba(8,18,28,.96);
}

.status-orb{
  width:78px;
  height:78px;
  display:grid;
  place-items:center;
  border:2px solid #37e7bf;
  border-radius:50%;
  color:#37e7bf;
  font-size:34px;
  box-shadow:
    0 0 0 10px rgba(55,231,191,.05),
    0 0 20px rgba(55,231,191,.16);
}

.admin-platform-status-card small{
  display:block;
  color:rgba(208,221,229,.58);
  font-size:9px;
}

.admin-platform-status-card h2{
  margin:3px 0 4px;
  color:#3fe3bc;
  font-size:26px;
}

.admin-platform-status-card p{
  margin:0;
  color:#d9e7ec;
  font-size:10px;
}

.admin-platform-status-card em{
  display:block;
  margin-top:3px;
  color:rgba(206,219,227,.58);
  font-size:8px;
  font-style:normal;
}

.admin-core-service-card > header,
.admin-operational-overview-card > header,
.admin-panel > header{
  min-height:44px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:9px;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.admin-core-service-card h2,
.admin-operational-overview-card h2,
.admin-panel h2{
  margin:0;
  font-size:14px;
}

.admin-service-grid{
  padding:7px 12px 10px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 18px;
}

.admin-service-grid > div{
  min-height:30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border-bottom:1px solid rgba(255,255,255,.05);
  font-size:8.5px;
}

.admin-service-grid strong{
  color:#4eddb9;
  font-size:8px;
}

.admin-operational-overview-card > div{
  min-height:96px;
  padding:10px 14px;
  display:flex;
  align-items:center;
  gap:12px;
}

.admin-operational-overview-card > div > span{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#4eddb9;
  background:rgba(64,220,178,.08);
  font-size:28px;
}

.admin-operational-overview-card p{
  margin:0;
  font-size:9.5px;
  line-height:1.45;
}

.admin-operational-overview-card p small{
  display:block;
  margin-top:5px;
  color:rgba(200,214,223,.55);
  font-size:8px;
}

/* KPI */

.admin-kpi-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}

.admin-kpi-grid article{
  min-height:112px;
  padding:14px;
  display:grid;
  grid-template-columns:55px 1fr;
  gap:10px;
  align-items:center;
  border:1px solid rgba(92,165,212,.18);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.admin-kpi-grid article > span{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:14px;
  font-size:28px;
}

.admin-kpi-grid strong,
.admin-kpi-grid small,
.admin-kpi-grid b,
.admin-kpi-grid em{
  display:block;
}

.admin-kpi-grid strong{
  font-size:10px;
}

.admin-kpi-grid small{
  color:rgba(203,216,225,.52);
  font-size:7.5px;
}

.admin-kpi-grid b{
  margin-top:7px;
  font-size:22px;
}

.admin-kpi-grid em{
  margin-top:3px;
  color:rgba(206,219,227,.58);
  font-size:8px;
  font-style:normal;
}

.admin-kpi-grid .customers{
  border-color:rgba(52,164,245,.52);
}
.admin-kpi-grid .customers > span{
  color:#5b6dff;
  background:rgba(76,87,255,.08);
}

.admin-kpi-grid .active-customers{
  border-color:rgba(64,220,178,.5);
}
.admin-kpi-grid .active-customers > span{
  color:#4eddb9;
  background:rgba(64,220,178,.08);
}

.admin-kpi-grid .partners{
  border-color:rgba(239,177,63,.55);
}
.admin-kpi-grid .partners > span{
  color:#f0b63f;
  background:rgba(239,177,63,.08);
}

.admin-kpi-grid .active-partners{
  border-color:rgba(172,88,239,.50);
}
.admin-kpi-grid .active-partners > span{
  color:#b97cff;
  background:rgba(172,88,239,.08);
}

/* MAIN GRID */

.admin-dashboard-main-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:1.35fr 1fr .88fr;
  gap:8px;
}

.admin-panel{
  overflow:hidden;
  border:1px solid rgba(92,165,212,.17);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.admin-panel > header{
  justify-content:flex-start;
}

.admin-panel > header > div{
  display:flex;
  align-items:center;
  gap:8px;
}

.admin-panel h2 + small{
  display:block;
  margin-top:2px;
  color:rgba(201,214,223,.52);
  font-size:8px;
}

.admin-panel button{
  min-height:30px;
  padding:0 11px;
  border:1px solid rgba(239,177,63,.70);
  border-radius:7px;
  color:#f0b63f;
  background:transparent;
  font-size:8px;
}

.admin-platform-activity-card > header{
  justify-content:space-between;
}

.admin-platform-activity-card select{
  min-height:30px;
  padding:0 9px;
  border:1px solid rgba(92,165,212,.22);
  border-radius:6px;
  color:#dce6eb;
  background:#0b1823;
  font-size:8px;
}

.admin-activity-legend{
  min-height:38px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:18px;
  border-bottom:1px solid rgba(255,255,255,.04);
  color:rgba(211,223,230,.68);
  font-size:8px;
}

.admin-empty-chart{
  min-height:175px;
  margin:10px;
  display:grid;
  place-items:center;
  align-content:center;
  border:1px solid rgba(92,165,212,.12);
  border-radius:9px;
  background:rgba(11,28,41,.52);
  text-align:center;
}

.admin-empty-chart > span{
  color:#6f8fa5;
  font-size:34px;
}

.admin-empty-chart strong{
  margin-top:7px;
  font-size:11px;
  letter-spacing:.08em;
}

.admin-empty-chart p{
  margin:5px 0 0;
  color:rgba(206,219,227,.62);
  font-size:9px;
  line-height:1.4;
}

.admin-financial-grid{
  padding:10px 12px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 12px;
}

.admin-financial-grid > div{
  min-height:58px;
  display:grid;
  grid-template-columns:38px 1fr;
  gap:8px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.admin-financial-grid > div > span{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#f0b63f;
  background:rgba(239,177,63,.08);
}

.admin-financial-grid p{
  margin:0;
  font-size:8.5px;
}

.admin-financial-grid small{
  display:block;
  margin-top:2px;
  color:rgba(197,211,220,.48);
  font-size:7px;
}

.admin-financial-grid strong{
  display:block;
  margin-top:4px;
  font-size:12px;
}

.admin-module-list{
  padding:6px 12px 8px;
}

.admin-module-list > div{
  min-height:29px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  border-bottom:1px solid rgba(255,255,255,.05);
  font-size:8.5px;
}

.admin-module-list strong{
  color:#4eddb9;
  font-size:8px;
}

/* BOTTOM */

.admin-dashboard-bottom-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
}

.admin-dashboard-bottom-grid .admin-panel > header{
  justify-content:space-between;
}

.admin-empty-state{
  min-height:118px;
  display:grid;
  place-items:center;
  align-content:center;
  text-align:center;
  padding:12px;
}

.admin-empty-state > span{
  color:#7192a8;
  font-size:28px;
}

.admin-empty-state strong{
  margin-top:6px;
  font-size:10px;
}

.admin-empty-state p{
  margin:5px 0 0;
  color:rgba(206,219,227,.58);
  font-size:8.5px;
}

/* RESPONSIVE */

@media (max-width:1250px){
  #adminDashboardView .admin-shell{
    grid-template-columns:230px minmax(0,1fr);
  }

  .admin-status-grid{
    grid-template-columns:1fr 1fr;
  }

  .admin-operational-overview-card{
    grid-column:1/-1;
  }

  .admin-kpi-grid{
    grid-template-columns:1fr 1fr;
  }

  .admin-dashboard-main-grid{
    grid-template-columns:1fr 1fr;
  }

  .admin-module-status-card{
    grid-column:1/-1;
  }
}

@media (max-width:1000px){
  #adminDashboardView .admin-shell{
    grid-template-columns:1fr;
  }

  #adminDashboardView .admin-sidebar{
    display:none;
  }

  .admin-dashboard-main-grid,
  .admin-dashboard-bottom-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .admin-dashboard-content{
    width:calc(100% - 28px);
  }

  #adminDashboardView .admin-top-actions{
    display:none;
  }

  #adminDashboardView .admin-search{
    width:100%;
  }

  .admin-dashboard-hero{
    flex-direction:column;
    align-items:flex-start;
  }

  .admin-dashboard-hero h1{
    font-size:32px;
  }

  .admin-status-grid,
  .admin-kpi-grid{
    grid-template-columns:1fr;
  }

  .admin-platform-status-card{
    grid-template-columns:1fr;
  }

  .admin-hero-manifesto{
    min-width:0;
  }
}


/* =========================================================
   SCREEN 36 — ADM CUSTOMER PARTNER
   ========================================================= */

body:has(#adminCustomerPartnerView.active) > .topbar{
  display:none;
}

body:has(#adminCustomerPartnerView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#adminCustomerPartnerView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 82% 7%,rgba(28,122,188,.08),transparent 28%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#adminCustomerPartnerView.active{
  display:block;
}

#adminCustomerPartnerView .admin-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:278px minmax(0,1fr);
}

/* SIDEBAR */

#adminCustomerPartnerView .admin-sidebar{
  min-height:100vh;
  padding:20px 20px 24px;
  border-right:1px solid rgba(87,173,228,.18);
  background:#06101a;
}

#adminCustomerPartnerView .admin-brand{
  min-height:74px;
  padding:0 10px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.07);
}

#adminCustomerPartnerView .admin-brand strong{
  color:#f0bd50;
  font-size:24px;
}

#adminCustomerPartnerView .admin-brand span{
  margin-top:4px;
  color:#d4dde4;
  font-size:8px;
  letter-spacing:.28em;
}

#adminCustomerPartnerView .admin-nav-label{
  display:block;
  margin:20px 10px 9px;
  color:#dce5ea;
  font-size:10px;
  letter-spacing:.24em;
}

#adminCustomerPartnerView .admin-nav{
  display:grid;
  gap:4px;
}

#adminCustomerPartnerView .admin-nav-item{
  width:100%;
  min-height:44px;
  padding:0 12px;
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  border:1px solid transparent;
  border-radius:10px;
  color:#d8e2e8;
  background:transparent;
  text-align:left;
}

#adminCustomerPartnerView .admin-nav-item > span{
  font-size:20px;
}

#adminCustomerPartnerView .admin-nav-item strong{
  display:block;
  font-size:12.5px;
}

#adminCustomerPartnerView .admin-nav-item small{
  display:block;
  margin-top:2px;
  color:rgba(203,216,225,.48);
  font-size:7.5px;
}

#adminCustomerPartnerView .admin-nav-item.active{
  border-color:rgba(239,177,63,.70);
  background:
    linear-gradient(90deg,rgba(239,177,63,.22),rgba(239,177,63,.04));
  box-shadow:0 0 18px rgba(239,177,63,.10);
}

#adminCustomerPartnerView .admin-nav-item.active > span{
  color:#f0b63f;
}

#adminCustomerPartnerView .admin-sidebar-vision{
  margin-top:18px;
  min-height:198px;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid rgba(92,165,212,.16);
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(5,15,25,.18),rgba(5,15,25,.62)),
    url("./assets/customer/home/hero-customer-home.webp") center / cover no-repeat;
}

#adminCustomerPartnerView .admin-sidebar-vision span{
  color:#f1f4f6;
  font-size:10px;
  line-height:1.55;
  letter-spacing:.18em;
}

#adminCustomerPartnerView .admin-sidebar-vision small{
  margin-top:18px;
  color:#d8e1e7;
  font-size:9px;
}

/* TOPBAR */

#adminCustomerPartnerView .admin-main{
  min-width:0;
}

#adminCustomerPartnerView .admin-topbar{
  min-height:84px;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid rgba(92,165,212,.12);
  background:rgba(4,11,18,.96);
}

#adminCustomerPartnerView .admin-search{
  width:min(730px,62%);
  min-height:48px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(92,165,212,.18);
  border-radius:12px;
  background:rgba(13,32,48,.66);
}

#adminCustomerPartnerView .admin-search input{
  width:100%;
  border:0;
  outline:0;
  color:#eaf0f4;
  background:transparent;
  font-size:13px;
}

#adminCustomerPartnerView .admin-top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

#adminCustomerPartnerView .admin-top-actions button{
  min-width:42px;
  height:42px;
  border:1px solid rgba(92,165,212,.16);
  border-radius:12px;
  color:#e1ebf0;
  background:rgba(10,24,36,.72);
}

#adminCustomerPartnerView .admin-user{
  display:flex;
  align-items:center;
  gap:10px;
}

#adminCustomerPartnerView .admin-avatar{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(180deg,#8cabd9,#436590);
}

#adminCustomerPartnerView .admin-user > div{
  display:flex;
  flex-direction:column;
}

#adminCustomerPartnerView .admin-user strong{
  font-size:13px;
}

#adminCustomerPartnerView .admin-user small{
  margin-top:3px;
  color:rgba(210,222,230,.58);
  font-size:9px;
}

/* CONTENT */

.admin-customer-partner-content{
  width:min(1420px,calc(100% - 48px));
  margin:0 auto;
  padding:10px 0 26px;
}

.admin-cp-breadcrumb{
  min-height:28px;
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(202,215,224,.58);
  font-size:10px;
}

.admin-cp-breadcrumb strong{
  color:#6ed5ff;
}

/* HERO */

.admin-cp-hero{
  min-height:142px;
  padding:16px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-radius:14px;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(4,11,18,.98),rgba(4,11,18,.74) 38%,rgba(4,11,18,.12) 72%,rgba(4,11,18,.04)),
    url("./assets/customer/home/hero-customer-home.webp") center 46% / cover no-repeat;
}

.admin-cp-hero h1{
  margin:0;
  font-size:40px;
  line-height:1;
}

.admin-cp-hero > div:first-child > span{
  display:block;
  margin-top:5px;
  font-size:14px;
  letter-spacing:.18em;
}

.admin-cp-hero p{
  margin:7px 0 2px;
  font-size:11.5px;
  color:rgba(224,234,240,.82);
}

.admin-cp-hero small{
  color:rgba(203,218,227,.58);
  font-size:9px;
}

.admin-cp-manifesto{
  min-width:190px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.admin-cp-manifesto strong{
  color:#edf3f6;
  font-size:10px;
  letter-spacing:.12em;
}

/* KPI */

.admin-cp-kpi-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}

.admin-cp-kpi-grid article{
  min-height:108px;
  padding:14px;
  display:grid;
  grid-template-columns:54px 1fr;
  gap:10px;
  align-items:center;
  border:1px solid rgba(92,165,212,.18);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.admin-cp-kpi-grid article > span{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:14px;
  font-size:28px;
}

.admin-cp-kpi-grid strong,
.admin-cp-kpi-grid small,
.admin-cp-kpi-grid b{
  display:block;
}

.admin-cp-kpi-grid strong{
  font-size:10px;
}

.admin-cp-kpi-grid small{
  margin-top:2px;
  color:rgba(203,216,225,.52);
  font-size:7.5px;
}

.admin-cp-kpi-grid b{
  margin-top:8px;
  font-size:22px;
}

.admin-cp-kpi-grid .customers{
  border-color:rgba(52,164,245,.52);
}
.admin-cp-kpi-grid .customers > span{
  color:#5b6dff;
  background:rgba(76,87,255,.08);
}

.admin-cp-kpi-grid .active-customers{
  border-color:rgba(64,220,178,.5);
}
.admin-cp-kpi-grid .active-customers > span{
  color:#4eddb9;
  background:rgba(64,220,178,.08);
}

.admin-cp-kpi-grid .partners{
  border-color:rgba(239,177,63,.55);
}
.admin-cp-kpi-grid .partners > span{
  color:#f0b63f;
  background:rgba(239,177,63,.08);
}

.admin-cp-kpi-grid .active-partners{
  border-color:rgba(172,88,239,.50);
}
.admin-cp-kpi-grid .active-partners > span{
  color:#b97cff;
  background:rgba(172,88,239,.08);
}

/* TABS */

.admin-cp-tabs{
  margin-top:8px;
  min-height:62px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  overflow:hidden;
  border:1px solid rgba(92,165,212,.17);
  border-radius:11px 11px 0 0;
  background:rgba(8,18,28,.95);
}

.admin-cp-tabs button{
  padding:0 18px;
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  border:0;
  border-right:1px solid rgba(255,255,255,.05);
  color:#dce6eb;
  background:transparent;
  text-align:left;
}

.admin-cp-tabs button:last-child{
  border-right:0;
}

.admin-cp-tabs button > span{
  font-size:23px;
}

.admin-cp-tabs strong{
  display:block;
  font-size:12px;
}

.admin-cp-tabs small{
  display:block;
  margin-top:2px;
  color:rgba(202,215,224,.52);
  font-size:8px;
}

.admin-cp-tabs button.active{
  color:#fff;
  background:
    linear-gradient(90deg,rgba(239,177,63,.22),rgba(239,177,63,.05));
  box-shadow:inset 0 -2px 0 #f0b63f;
}

.admin-cp-tabs button.active > span{
  color:#f0b63f;
}

/* DIRECTORY */

.admin-cp-directory{
  overflow:hidden;
  border:1px solid rgba(92,165,212,.17);
  border-top:0;
  border-radius:0 0 11px 11px;
  background:rgba(8,18,28,.95);
}

.admin-cp-search-row{
  padding:12px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 140px;
  gap:10px;
}

.admin-cp-search-row label{
  min-height:44px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(92,165,212,.22);
  border-radius:8px;
  background:#0b1823;
}

.admin-cp-search-row label > span{
  font-size:20px;
  color:#dce7ec;
}

.admin-cp-search-row input{
  width:100%;
  border:0;
  outline:0;
  color:#e9f0f4;
  background:transparent;
  font-size:10px;
}

.admin-cp-search-row > button{
  border:1px solid rgba(239,177,63,.72);
  border-radius:8px;
  color:#f0b63f;
  background:transparent;
  font-size:10px;
}

/* FILTERS */

.admin-cp-filter-grid{
  padding:0 12px 12px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
}

.admin-cp-filter-grid label > small{
  display:block;
  margin-bottom:5px;
  color:rgba(211,223,230,.68);
  font-size:8px;
}

.admin-cp-filter-grid select{
  width:100%;
  min-height:38px;
  padding:0 10px;
  border:1px solid rgba(92,165,212,.22);
  border-radius:7px;
  color:#e9f0f4;
  background:#0b1823;
  font-size:9px;
}

/* TABLE */

.admin-cp-table{
  margin:0 12px;
  overflow:hidden;
  border:1px solid rgba(92,165,212,.18);
  border-radius:8px;
}

.admin-cp-table .head{
  min-width:1050px;
  min-height:50px;
  display:grid;
  grid-template-columns:42px .8fr 1.25fr .8fr 1.05fr 1.05fr .8fr .95fr .8fr;
  align-items:center;
  background:rgba(13,35,50,.78);
  border-bottom:1px solid rgba(92,165,212,.16);
  color:#dce6eb;
  font-size:8.5px;
}

.admin-cp-table .head > span{
  height:100%;
  padding:0 10px;
  display:flex;
  align-items:center;
  border-right:1px solid rgba(255,255,255,.05);
}

.admin-cp-empty{
  min-height:245px;
  display:grid;
  place-items:center;
  align-content:center;
  text-align:center;
  background:
    radial-gradient(circle at 50% 45%,rgba(54,117,156,.08),transparent 36%);
}

.admin-cp-empty > span{
  color:#9ea8ff;
  font-size:58px;
}

.admin-cp-empty strong{
  margin-top:9px;
  font-size:16px;
  letter-spacing:.08em;
}

.admin-cp-empty p{
  margin:8px 0 2px;
  color:#dce5ea;
  font-size:11px;
}

.admin-cp-empty small{
  color:rgba(202,215,224,.58);
  font-size:9px;
}

/* FOOTER */

.admin-cp-footer{
  min-height:54px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:rgba(206,219,227,.62);
  font-size:9px;
}

.admin-cp-footer > div{
  display:flex;
  align-items:center;
  gap:7px;
}

.admin-cp-footer button,
.admin-cp-footer select{
  min-height:32px;
  border:1px solid rgba(92,165,212,.20);
  border-radius:6px;
  color:#dce6eb;
  background:#0b1823;
  font-size:8px;
}

.admin-cp-footer button{
  min-width:32px;
}

.admin-cp-footer select{
  padding:0 10px;
}

/* RESPONSIVE */

@media (max-width:1250px){
  #adminCustomerPartnerView .admin-shell{
    grid-template-columns:230px minmax(0,1fr);
  }

  .admin-cp-kpi-grid{
    grid-template-columns:1fr 1fr;
  }

  .admin-cp-filter-grid{
    grid-template-columns:1fr 1fr 1fr;
  }
}

@media (max-width:1000px){
  #adminCustomerPartnerView .admin-shell{
    grid-template-columns:1fr;
  }

  #adminCustomerPartnerView .admin-sidebar{
    display:none;
  }

  .admin-cp-tabs{
    grid-template-columns:1fr;
  }

  .admin-cp-search-row{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .admin-customer-partner-content{
    width:calc(100% - 28px);
  }

  #adminCustomerPartnerView .admin-top-actions{
    display:none;
  }

  #adminCustomerPartnerView .admin-search{
    width:100%;
  }

  .admin-cp-hero{
    flex-direction:column;
    align-items:flex-start;
  }

  .admin-cp-hero h1{
    font-size:32px;
  }

  .admin-cp-kpi-grid,
  .admin-cp-filter-grid{
    grid-template-columns:1fr;
  }

  .admin-cp-manifesto{
    min-width:0;
  }

  .admin-cp-footer{
    flex-direction:column;
    align-items:flex-start;
    padding:10px 12px;
  }
}


/* SCREEN 36 — READABILITY PASS */

#adminCustomerPartnerView .admin-nav-item strong{
  font-size:13px;
}

#adminCustomerPartnerView .admin-nav-item small{
  font-size:8px;
}

#adminCustomerPartnerView .admin-cp-hero p{
  font-size:12.5px;
}

#adminCustomerPartnerView .admin-cp-hero small{
  font-size:9.5px;
}

#adminCustomerPartnerView .admin-cp-kpi-grid strong{
  font-size:11.5px;
}

#adminCustomerPartnerView .admin-cp-kpi-grid small{
  font-size:8.5px;
}

#adminCustomerPartnerView .admin-cp-kpi-grid b{
  font-size:24px;
}

#adminCustomerPartnerView .admin-cp-tabs strong{
  font-size:13px;
}

#adminCustomerPartnerView .admin-cp-tabs small{
  font-size:8.5px;
}

#adminCustomerPartnerView .admin-cp-search-row input{
  font-size:11.5px;
}

#adminCustomerPartnerView .admin-cp-search-row > button{
  font-size:11px;
  font-weight:600;
}

#adminCustomerPartnerView .admin-cp-filter-grid label > small{
  font-size:9px;
}

#adminCustomerPartnerView .admin-cp-filter-grid select{
  font-size:10px;
}

#adminCustomerPartnerView .admin-cp-table .head{
  font-size:9.5px;
}

#adminCustomerPartnerView .admin-cp-empty strong{
  font-size:18px;
}

#adminCustomerPartnerView .admin-cp-empty p{
  font-size:12px;
}

#adminCustomerPartnerView .admin-cp-empty small{
  font-size:9.5px;
}

#adminCustomerPartnerView .admin-cp-footer{
  font-size:9.5px;
}

#adminCustomerPartnerView .admin-cp-footer button,
#adminCustomerPartnerView .admin-cp-footer select{
  font-size:9px;
}


/* =========================================================
   SCREEN 37 — ADM PRODUCT POLICY
   ========================================================= */

body:has(#adminProductPolicyView.active) > .topbar{
  display:none;
}

body:has(#adminProductPolicyView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#adminProductPolicyView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 82% 7%,rgba(28,122,188,.08),transparent 28%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#adminProductPolicyView.active{
  display:block;
}

#adminProductPolicyView .admin-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:278px minmax(0,1fr);
}

/* SIDEBAR */

#adminProductPolicyView .admin-sidebar{
  min-height:100vh;
  padding:20px 20px 24px;
  border-right:1px solid rgba(87,173,228,.18);
  background:#06101a;
}

#adminProductPolicyView .admin-brand{
  min-height:74px;
  padding:0 10px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.07);
}

#adminProductPolicyView .admin-brand strong{
  color:#f0bd50;
  font-size:24px;
}

#adminProductPolicyView .admin-brand span{
  margin-top:4px;
  color:#d4dde4;
  font-size:8px;
  letter-spacing:.28em;
}

#adminProductPolicyView .admin-nav-label{
  display:block;
  margin:20px 10px 9px;
  color:#dce5ea;
  font-size:10px;
  letter-spacing:.24em;
}

#adminProductPolicyView .admin-nav{
  display:grid;
  gap:4px;
}

#adminProductPolicyView .admin-nav-item{
  width:100%;
  min-height:44px;
  padding:0 12px;
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  border:1px solid transparent;
  border-radius:10px;
  color:#d8e2e8;
  background:transparent;
  text-align:left;
}

#adminProductPolicyView .admin-nav-item > span{
  font-size:20px;
}

#adminProductPolicyView .admin-nav-item strong{
  display:block;
  font-size:13px;
}

#adminProductPolicyView .admin-nav-item small{
  display:block;
  margin-top:2px;
  color:rgba(203,216,225,.48);
  font-size:8px;
}

#adminProductPolicyView .admin-nav-item.active{
  border-color:rgba(239,177,63,.70);
  background:
    linear-gradient(90deg,rgba(239,177,63,.22),rgba(239,177,63,.04));
  box-shadow:0 0 18px rgba(239,177,63,.10);
}

#adminProductPolicyView .admin-nav-item.active > span{
  color:#f0b63f;
}

#adminProductPolicyView .admin-sidebar-vision{
  margin-top:18px;
  min-height:198px;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid rgba(92,165,212,.16);
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(5,15,25,.18),rgba(5,15,25,.62)),
    url("./assets/customer/home/hero-customer-home.webp") center / cover no-repeat;
}

#adminProductPolicyView .admin-sidebar-vision span{
  color:#f1f4f6;
  font-size:10px;
  line-height:1.55;
  letter-spacing:.18em;
}

#adminProductPolicyView .admin-sidebar-vision small{
  margin-top:18px;
  color:#d8e1e7;
  font-size:9px;
}

/* TOPBAR */

#adminProductPolicyView .admin-main{
  min-width:0;
}

#adminProductPolicyView .admin-topbar{
  min-height:84px;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid rgba(92,165,212,.12);
  background:rgba(4,11,18,.96);
}

#adminProductPolicyView .admin-search{
  width:min(730px,62%);
  min-height:48px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(92,165,212,.18);
  border-radius:12px;
  background:rgba(13,32,48,.66);
}

#adminProductPolicyView .admin-search input{
  width:100%;
  border:0;
  outline:0;
  color:#eaf0f4;
  background:transparent;
  font-size:13px;
}

#adminProductPolicyView .admin-top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

#adminProductPolicyView .admin-top-actions button{
  min-width:42px;
  height:42px;
  border:1px solid rgba(92,165,212,.16);
  border-radius:12px;
  color:#e1ebf0;
  background:rgba(10,24,36,.72);
}

#adminProductPolicyView .admin-user{
  display:flex;
  align-items:center;
  gap:10px;
}

#adminProductPolicyView .admin-avatar{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(180deg,#8cabd9,#436590);
}

#adminProductPolicyView .admin-user > div{
  display:flex;
  flex-direction:column;
}

#adminProductPolicyView .admin-user strong{
  font-size:13px;
}

#adminProductPolicyView .admin-user small{
  margin-top:3px;
  color:rgba(210,222,230,.58);
  font-size:9px;
}

/* CONTENT */

.admin-product-policy-content{
  width:min(1420px,calc(100% - 48px));
  margin:0 auto;
  padding:10px 0 26px;
}

.admin-pp-breadcrumb{
  min-height:28px;
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(202,215,224,.58);
  font-size:10px;
}

.admin-pp-breadcrumb strong{
  color:#6ed5ff;
}

/* HERO */

.admin-pp-hero{
  min-height:142px;
  padding:16px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-radius:14px;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(4,11,18,.98),rgba(4,11,18,.74) 38%,rgba(4,11,18,.12) 72%,rgba(4,11,18,.04)),
    url("./assets/customer/home/hero-customer-home.webp") center 46% / cover no-repeat;
}

.admin-pp-hero h1{
  margin:0;
  font-size:40px;
  line-height:1;
}

.admin-pp-hero > div:first-child > span{
  display:block;
  margin-top:5px;
  font-size:14px;
  letter-spacing:.18em;
}

.admin-pp-hero p{
  margin:7px 0 2px;
  font-size:12.5px;
  color:rgba(224,234,240,.82);
}

.admin-pp-hero small{
  color:rgba(203,218,227,.58);
  font-size:9.5px;
}

.admin-pp-manifesto{
  min-width:190px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.admin-pp-manifesto strong{
  color:#edf3f6;
  font-size:10px;
  letter-spacing:.12em;
}

/* KPI */

.admin-pp-kpi-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}

.admin-pp-kpi-grid article{
  min-height:108px;
  padding:14px;
  display:grid;
  grid-template-columns:54px 1fr;
  gap:10px;
  align-items:center;
  border:1px solid rgba(92,165,212,.18);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.admin-pp-kpi-grid article > span{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:14px;
  font-size:28px;
}

.admin-pp-kpi-grid strong,
.admin-pp-kpi-grid small,
.admin-pp-kpi-grid b{
  display:block;
}

.admin-pp-kpi-grid strong{
  font-size:11.5px;
}

.admin-pp-kpi-grid small{
  margin-top:2px;
  color:rgba(203,216,225,.52);
  font-size:8.5px;
}

.admin-pp-kpi-grid b{
  margin-top:8px;
  font-size:24px;
}

.admin-pp-kpi-grid .total-products{
  border-color:rgba(239,177,63,.58);
}

.admin-pp-kpi-grid .total-products > span{
  color:#f0b63f;
  background:rgba(239,177,63,.08);
}

.admin-pp-kpi-grid .active-products{
  border-color:rgba(64,220,178,.52);
}

.admin-pp-kpi-grid .active-products > span{
  color:#4eddb9;
  background:rgba(64,220,178,.08);
}

.admin-pp-kpi-grid .active-policies{
  border-color:rgba(172,88,239,.52);
}

.admin-pp-kpi-grid .active-policies > span{
  color:#b97cff;
  background:rgba(172,88,239,.08);
}

.admin-pp-kpi-grid .review{
  border-color:rgba(74,132,255,.52);
}

.admin-pp-kpi-grid .review > span{
  color:#6b8cff;
  background:rgba(74,132,255,.08);
}

/* TABS */

.admin-pp-tabs{
  margin-top:8px;
  min-height:62px;
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
  border:1px solid rgba(92,165,212,.17);
  border-radius:11px 11px 0 0;
  background:rgba(8,18,28,.95);
}

.admin-pp-tabs button{
  padding:0 18px;
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  border:0;
  border-right:1px solid rgba(255,255,255,.05);
  color:#dce6eb;
  background:transparent;
  text-align:left;
}

.admin-pp-tabs button:last-child{
  border-right:0;
}

.admin-pp-tabs button > span{
  font-size:23px;
}

.admin-pp-tabs strong{
  display:block;
  font-size:13px;
}

.admin-pp-tabs small{
  display:block;
  margin-top:2px;
  color:rgba(202,215,224,.52);
  font-size:8.5px;
}

.admin-pp-tabs button.active{
  color:#fff;
  background:
    linear-gradient(90deg,rgba(239,177,63,.22),rgba(239,177,63,.05));
  box-shadow:inset 0 -2px 0 #f0b63f;
}

.admin-pp-tabs button.active > span{
  color:#f0b63f;
}

/* DIRECTORY */

.admin-pp-directory{
  overflow:hidden;
  border:1px solid rgba(92,165,212,.17);
  border-top:0;
  border-radius:0 0 11px 11px;
  background:rgba(8,18,28,.95);
}

.admin-pp-search-row{
  padding:12px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 140px;
  gap:10px;
}

.admin-pp-search-row label{
  min-height:44px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(92,165,212,.22);
  border-radius:8px;
  background:#0b1823;
}

.admin-pp-search-row label > span{
  font-size:20px;
  color:#dce7ec;
}

.admin-pp-search-row input{
  width:100%;
  border:0;
  outline:0;
  color:#e9f0f4;
  background:transparent;
  font-size:11.5px;
}

.admin-pp-search-row > button{
  border:1px solid rgba(239,177,63,.72);
  border-radius:8px;
  color:#f0b63f;
  background:transparent;
  font-size:11px;
  font-weight:600;
}

/* FILTERS */

.admin-pp-filter-grid{
  padding:0 12px 12px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
}

.admin-pp-filter-grid label > small{
  display:block;
  margin-bottom:5px;
  color:rgba(211,223,230,.68);
  font-size:9px;
}

.admin-pp-filter-grid select{
  width:100%;
  min-height:38px;
  padding:0 10px;
  border:1px solid rgba(92,165,212,.22);
  border-radius:7px;
  color:#e9f0f4;
  background:#0b1823;
  font-size:10px;
}

/* TABLE */

.admin-pp-table{
  margin:0 12px;
  overflow:hidden;
  border:1px solid rgba(92,165,212,.18);
  border-radius:8px;
}

.admin-pp-table .head{
  min-width:1180px;
  min-height:50px;
  display:grid;
  grid-template-columns:42px .75fr 1.25fr .72fr .9fr .78fr .9fr .8fr .88fr .9fr .85fr;
  align-items:center;
  background:rgba(13,35,50,.78);
  border-bottom:1px solid rgba(92,165,212,.16);
  color:#dce6eb;
  font-size:9.5px;
}

.admin-pp-table .head > span{
  height:100%;
  padding:0 9px;
  display:flex;
  align-items:center;
  border-right:1px solid rgba(255,255,255,.05);
}

.admin-pp-empty{
  min-height:245px;
  display:grid;
  place-items:center;
  align-content:center;
  text-align:center;
  background:
    radial-gradient(circle at 50% 45%,rgba(54,117,156,.08),transparent 36%);
}

.admin-pp-empty > span{
  color:#9ea8ff;
  font-size:58px;
}

.admin-pp-empty strong{
  margin-top:9px;
  font-size:18px;
  letter-spacing:.08em;
}

.admin-pp-empty p{
  margin:8px 0 2px;
  color:#dce5ea;
  font-size:12px;
}

.admin-pp-empty small{
  color:rgba(202,215,224,.58);
  font-size:9.5px;
}

/* FOOTER */

.admin-pp-footer{
  min-height:54px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:rgba(206,219,227,.62);
  font-size:9.5px;
}

.admin-pp-footer > div{
  display:flex;
  align-items:center;
  gap:7px;
}

.admin-pp-footer button,
.admin-pp-footer select{
  min-height:32px;
  border:1px solid rgba(92,165,212,.20);
  border-radius:6px;
  color:#dce6eb;
  background:#0b1823;
  font-size:9px;
}

.admin-pp-footer button{
  min-width:32px;
}

.admin-pp-footer select{
  padding:0 10px;
}

/* RESPONSIVE */

@media (max-width:1250px){
  #adminProductPolicyView .admin-shell{
    grid-template-columns:230px minmax(0,1fr);
  }

  .admin-pp-kpi-grid{
    grid-template-columns:1fr 1fr;
  }

  .admin-pp-filter-grid{
    grid-template-columns:1fr 1fr 1fr;
  }
}

@media (max-width:1000px){
  #adminProductPolicyView .admin-shell{
    grid-template-columns:1fr;
  }

  #adminProductPolicyView .admin-sidebar{
    display:none;
  }

  .admin-pp-tabs{
    grid-template-columns:1fr;
  }

  .admin-pp-search-row{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .admin-product-policy-content{
    width:calc(100% - 28px);
  }

  #adminProductPolicyView .admin-top-actions{
    display:none;
  }

  #adminProductPolicyView .admin-search{
    width:100%;
  }

  .admin-pp-hero{
    flex-direction:column;
    align-items:flex-start;
  }

  .admin-pp-hero h1{
    font-size:32px;
  }

  .admin-pp-kpi-grid,
  .admin-pp-filter-grid{
    grid-template-columns:1fr;
  }

  .admin-pp-manifesto{
    min-width:0;
  }

  .admin-pp-footer{
    flex-direction:column;
    align-items:flex-start;
    padding:10px 12px;
  }
}


/* =========================================================
   SCREEN 38 — ADM ORDER
   ========================================================= */

body:has(#adminOrderView.active) > .topbar{
  display:none;
}

body:has(#adminOrderView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#adminOrderView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 82% 7%,rgba(28,122,188,.08),transparent 28%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#adminOrderView.active{
  display:block;
}

#adminOrderView .admin-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:278px minmax(0,1fr);
}

/* SIDEBAR */

#adminOrderView .admin-sidebar{
  min-height:100vh;
  padding:20px 20px 24px;
  border-right:1px solid rgba(87,173,228,.18);
  background:#06101a;
}

#adminOrderView .admin-brand{
  min-height:74px;
  padding:0 10px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.07);
}

#adminOrderView .admin-brand strong{
  color:#f0bd50;
  font-size:24px;
}

#adminOrderView .admin-brand span{
  margin-top:4px;
  color:#d4dde4;
  font-size:8px;
  letter-spacing:.28em;
}

#adminOrderView .admin-nav-label{
  display:block;
  margin:20px 10px 9px;
  color:#dce5ea;
  font-size:10px;
  letter-spacing:.24em;
}

#adminOrderView .admin-nav{
  display:grid;
  gap:4px;
}

#adminOrderView .admin-nav-item{
  width:100%;
  min-height:44px;
  padding:0 12px;
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  border:1px solid transparent;
  border-radius:10px;
  color:#d8e2e8;
  background:transparent;
  text-align:left;
}

#adminOrderView .admin-nav-item > span{
  font-size:20px;
}

#adminOrderView .admin-nav-item strong{
  display:block;
  font-size:13px;
}

#adminOrderView .admin-nav-item small{
  display:block;
  margin-top:2px;
  color:rgba(203,216,225,.48);
  font-size:8px;
}

#adminOrderView .admin-nav-item.active{
  border-color:rgba(239,177,63,.70);
  background:
    linear-gradient(90deg,rgba(239,177,63,.22),rgba(239,177,63,.04));
  box-shadow:0 0 18px rgba(239,177,63,.10);
}

#adminOrderView .admin-nav-item.active > span{
  color:#f0b63f;
}

#adminOrderView .admin-sidebar-vision{
  margin-top:18px;
  min-height:198px;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid rgba(92,165,212,.16);
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(5,15,25,.18),rgba(5,15,25,.62)),
    url("./assets/customer/home/hero-customer-home.webp") center / cover no-repeat;
}

#adminOrderView .admin-sidebar-vision span{
  color:#f1f4f6;
  font-size:10px;
  line-height:1.55;
  letter-spacing:.18em;
}

#adminOrderView .admin-sidebar-vision small{
  margin-top:18px;
  color:#d8e1e7;
  font-size:9px;
}

/* TOPBAR */

#adminOrderView .admin-main{
  min-width:0;
}

#adminOrderView .admin-topbar{
  min-height:84px;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid rgba(92,165,212,.12);
  background:rgba(4,11,18,.96);
}

#adminOrderView .admin-search{
  width:min(730px,62%);
  min-height:48px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(92,165,212,.18);
  border-radius:12px;
  background:rgba(13,32,48,.66);
}

#adminOrderView .admin-search input{
  width:100%;
  border:0;
  outline:0;
  color:#eaf0f4;
  background:transparent;
  font-size:13px;
}

#adminOrderView .admin-top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

#adminOrderView .admin-top-actions button{
  min-width:42px;
  height:42px;
  border:1px solid rgba(92,165,212,.16);
  border-radius:12px;
  color:#e1ebf0;
  background:rgba(10,24,36,.72);
}

#adminOrderView .admin-user{
  display:flex;
  align-items:center;
  gap:10px;
}

#adminOrderView .admin-avatar{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(180deg,#8cabd9,#436590);
}

#adminOrderView .admin-user > div{
  display:flex;
  flex-direction:column;
}

#adminOrderView .admin-user strong{
  font-size:13px;
}

#adminOrderView .admin-user small{
  margin-top:3px;
  color:rgba(210,222,230,.58);
  font-size:9px;
}

/* CONTENT */

.admin-order-content{
  width:min(1420px,calc(100% - 48px));
  margin:0 auto;
  padding:10px 0 26px;
}

.admin-order-breadcrumb{
  min-height:28px;
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(202,215,224,.58);
  font-size:10px;
}

.admin-order-breadcrumb strong{
  color:#6ed5ff;
}

/* HERO */

.admin-order-hero{
  min-height:142px;
  padding:16px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-radius:14px;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(4,11,18,.98),rgba(4,11,18,.74) 38%,rgba(4,11,18,.12) 72%,rgba(4,11,18,.04)),
    url("./assets/customer/home/hero-customer-home.webp") center 46% / cover no-repeat;
}

.admin-order-hero h1{
  margin:0;
  font-size:40px;
  line-height:1;
}

.admin-order-hero > div:first-child > span{
  display:block;
  margin-top:5px;
  font-size:14px;
  letter-spacing:.18em;
}

.admin-order-hero p{
  margin:7px 0 2px;
  font-size:12.5px;
  color:rgba(224,234,240,.82);
}

.admin-order-hero small{
  color:rgba(203,218,227,.58);
  font-size:9.5px;
}

.admin-order-manifesto{
  min-width:190px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.admin-order-manifesto strong{
  color:#edf3f6;
  font-size:10px;
  letter-spacing:.12em;
}

/* KPI */

.admin-order-kpi-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}

.admin-order-kpi-grid article{
  min-height:108px;
  padding:14px;
  display:grid;
  grid-template-columns:54px 1fr;
  gap:10px;
  align-items:center;
  border:1px solid rgba(92,165,212,.18);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.admin-order-kpi-grid article > span{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:14px;
  font-size:28px;
}

.admin-order-kpi-grid strong,
.admin-order-kpi-grid small,
.admin-order-kpi-grid b{
  display:block;
}

.admin-order-kpi-grid strong{
  font-size:11.5px;
}

.admin-order-kpi-grid small{
  margin-top:2px;
  color:rgba(203,216,225,.52);
  font-size:8.5px;
}

.admin-order-kpi-grid b{
  margin-top:8px;
  font-size:24px;
}

.admin-order-kpi-grid .total{
  border-color:rgba(239,177,63,.58);
}

.admin-order-kpi-grid .total > span{
  color:#f0b63f;
  background:rgba(239,177,63,.08);
}

.admin-order-kpi-grid .processing{
  border-color:rgba(64,220,178,.52);
}

.admin-order-kpi-grid .processing > span{
  color:#4eddb9;
  background:rgba(64,220,178,.08);
}

.admin-order-kpi-grid .completed{
  border-color:rgba(54,138,255,.52);
}

.admin-order-kpi-grid .completed > span{
  color:#58a1ff;
  background:rgba(54,138,255,.08);
}

.admin-order-kpi-grid .review{
  border-color:rgba(172,88,239,.52);
}

.admin-order-kpi-grid .review > span{
  color:#b97cff;
  background:rgba(172,88,239,.08);
}

/* DIRECTORY */

.admin-order-directory{
  margin-top:8px;
  overflow:hidden;
  border:1px solid rgba(92,165,212,.17);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.admin-order-search-row{
  padding:12px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 150px;
  gap:10px;
}

.admin-order-search-row label{
  min-height:44px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(92,165,212,.22);
  border-radius:8px;
  background:#0b1823;
}

.admin-order-search-row label > span{
  font-size:20px;
  color:#dce7ec;
}

.admin-order-search-row input{
  width:100%;
  border:0;
  outline:0;
  color:#e9f0f4;
  background:transparent;
  font-size:11.5px;
}

.admin-order-search-row > button{
  border:1px solid rgba(239,177,63,.72);
  border-radius:8px;
  color:#f0b63f;
  background:transparent;
  font-size:11px;
  font-weight:600;
}

/* FILTERS */

.admin-order-filter-grid{
  padding:0 12px 12px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
}

.admin-order-filter-grid label > small{
  display:block;
  margin-bottom:5px;
  color:rgba(211,223,230,.68);
  font-size:9px;
}

.admin-order-filter-grid select{
  width:100%;
  min-height:38px;
  padding:0 10px;
  border:1px solid rgba(92,165,212,.22);
  border-radius:7px;
  color:#e9f0f4;
  background:#0b1823;
  font-size:10px;
}

/* TABLE */

.admin-order-table{
  margin:0 12px;
  overflow:hidden;
  border:1px solid rgba(92,165,212,.18);
  border-radius:8px;
}

.admin-order-table .head{
  min-width:1120px;
  min-height:50px;
  display:grid;
  grid-template-columns:42px .82fr 1.08fr .8fr .92fr 1.12fr 1.15fr 1.1fr .92fr .85fr;
  align-items:center;
  background:rgba(13,35,50,.78);
  border-bottom:1px solid rgba(92,165,212,.16);
  color:#dce6eb;
  font-size:9.5px;
}

.admin-order-table .head > span{
  height:100%;
  padding:0 9px;
  display:flex;
  align-items:center;
  border-right:1px solid rgba(255,255,255,.05);
}

.admin-order-empty{
  min-height:245px;
  display:grid;
  place-items:center;
  align-content:center;
  text-align:center;
  background:
    radial-gradient(circle at 50% 45%,rgba(54,117,156,.08),transparent 36%);
}

.admin-order-empty > span{
  color:#9ea8ff;
  font-size:58px;
}

.admin-order-empty strong{
  margin-top:9px;
  font-size:18px;
  letter-spacing:.08em;
}

.admin-order-empty p{
  margin:8px 0 2px;
  color:#dce5ea;
  font-size:12px;
}

.admin-order-empty small{
  color:rgba(202,215,224,.58);
  font-size:9.5px;
}

/* FOOTER */

.admin-order-footer{
  min-height:54px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:rgba(206,219,227,.62);
  font-size:9.5px;
}

.admin-order-footer > div{
  display:flex;
  align-items:center;
  gap:7px;
}

.admin-order-footer button,
.admin-order-footer select{
  min-height:32px;
  border:1px solid rgba(92,165,212,.20);
  border-radius:6px;
  color:#dce6eb;
  background:#0b1823;
  font-size:9px;
}

.admin-order-footer button{
  min-width:32px;
}

.admin-order-footer select{
  padding:0 10px;
}

/* RESPONSIVE */

@media (max-width:1250px){
  #adminOrderView .admin-shell{
    grid-template-columns:230px minmax(0,1fr);
  }

  .admin-order-kpi-grid{
    grid-template-columns:1fr 1fr;
  }

  .admin-order-filter-grid{
    grid-template-columns:1fr 1fr 1fr;
  }
}

@media (max-width:1000px){
  #adminOrderView .admin-shell{
    grid-template-columns:1fr;
  }

  #adminOrderView .admin-sidebar{
    display:none;
  }

  .admin-order-search-row{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .admin-order-content{
    width:calc(100% - 28px);
  }

  #adminOrderView .admin-top-actions{
    display:none;
  }

  #adminOrderView .admin-search{
    width:100%;
  }

  .admin-order-hero{
    flex-direction:column;
    align-items:flex-start;
  }

  .admin-order-hero h1{
    font-size:32px;
  }

  .admin-order-kpi-grid,
  .admin-order-filter-grid{
    grid-template-columns:1fr;
  }

  .admin-order-manifesto{
    min-width:0;
  }

  .admin-order-footer{
    flex-direction:column;
    align-items:flex-start;
    padding:10px 12px;
  }
}


/* =========================================================
   SCREEN 39 — ADM PAYMENT
   ========================================================= */

body:has(#adminPaymentView.active) > .topbar{
  display:none;
}

body:has(#adminPaymentView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#adminPaymentView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 82% 7%,rgba(28,122,188,.08),transparent 28%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#adminPaymentView.active{
  display:block;
}

#adminPaymentView .admin-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:278px minmax(0,1fr);
}

/* SIDEBAR */

#adminPaymentView .admin-sidebar{
  min-height:100vh;
  padding:20px 20px 24px;
  border-right:1px solid rgba(87,173,228,.18);
  background:#06101a;
}

#adminPaymentView .admin-brand{
  min-height:74px;
  padding:0 10px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.07);
}

#adminPaymentView .admin-brand strong{
  color:#f0bd50;
  font-size:24px;
}

#adminPaymentView .admin-brand span{
  margin-top:4px;
  color:#d4dde4;
  font-size:8px;
  letter-spacing:.28em;
}

#adminPaymentView .admin-nav-label{
  display:block;
  margin:20px 10px 9px;
  color:#dce5ea;
  font-size:10px;
  letter-spacing:.24em;
}

#adminPaymentView .admin-nav{
  display:grid;
  gap:4px;
}

#adminPaymentView .admin-nav-item{
  width:100%;
  min-height:44px;
  padding:0 12px;
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  border:1px solid transparent;
  border-radius:10px;
  color:#d8e2e8;
  background:transparent;
  text-align:left;
}

#adminPaymentView .admin-nav-item > span{
  font-size:20px;
}

#adminPaymentView .admin-nav-item strong{
  display:block;
  font-size:13px;
}

#adminPaymentView .admin-nav-item small{
  display:block;
  margin-top:2px;
  color:rgba(203,216,225,.48);
  font-size:8px;
}

#adminPaymentView .admin-nav-item.active{
  border-color:rgba(239,177,63,.70);
  background:
    linear-gradient(90deg,rgba(239,177,63,.22),rgba(239,177,63,.04));
  box-shadow:0 0 18px rgba(239,177,63,.10);
}

#adminPaymentView .admin-nav-item.active > span{
  color:#f0b63f;
}

#adminPaymentView .admin-sidebar-vision{
  margin-top:18px;
  min-height:198px;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid rgba(92,165,212,.16);
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(5,15,25,.18),rgba(5,15,25,.62)),
    url("./assets/customer/home/hero-customer-home.webp") center / cover no-repeat;
}

#adminPaymentView .admin-sidebar-vision span{
  color:#f1f4f6;
  font-size:10px;
  line-height:1.55;
  letter-spacing:.18em;
}

#adminPaymentView .admin-sidebar-vision small{
  margin-top:18px;
  color:#d8e1e7;
  font-size:9px;
}

/* TOPBAR */

#adminPaymentView .admin-main{
  min-width:0;
}

#adminPaymentView .admin-topbar{
  min-height:84px;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid rgba(92,165,212,.12);
  background:rgba(4,11,18,.96);
}

#adminPaymentView .admin-search{
  width:min(730px,62%);
  min-height:48px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(92,165,212,.18);
  border-radius:12px;
  background:rgba(13,32,48,.66);
}

#adminPaymentView .admin-search input{
  width:100%;
  border:0;
  outline:0;
  color:#eaf0f4;
  background:transparent;
  font-size:13px;
}

#adminPaymentView .admin-top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

#adminPaymentView .admin-top-actions button{
  min-width:42px;
  height:42px;
  border:1px solid rgba(92,165,212,.16);
  border-radius:12px;
  color:#e1ebf0;
  background:rgba(10,24,36,.72);
}

#adminPaymentView .admin-user{
  display:flex;
  align-items:center;
  gap:10px;
}

#adminPaymentView .admin-avatar{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(180deg,#8cabd9,#436590);
}

#adminPaymentView .admin-user > div{
  display:flex;
  flex-direction:column;
}

#adminPaymentView .admin-user strong{
  font-size:13px;
}

#adminPaymentView .admin-user small{
  margin-top:3px;
  color:rgba(210,222,230,.58);
  font-size:9px;
}

/* CONTENT */

.admin-payment-content{
  width:min(1420px,calc(100% - 48px));
  margin:0 auto;
  padding:10px 0 26px;
}

.admin-payment-breadcrumb{
  min-height:28px;
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(202,215,224,.58);
  font-size:10px;
}

.admin-payment-breadcrumb strong{
  color:#6ed5ff;
}

/* HERO */

.admin-payment-hero{
  min-height:142px;
  padding:16px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-radius:14px;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(4,11,18,.98),rgba(4,11,18,.74) 38%,rgba(4,11,18,.12) 72%,rgba(4,11,18,.04)),
    url("./assets/customer/home/hero-customer-home.webp") center 46% / cover no-repeat;
}

.admin-payment-hero h1{
  margin:0;
  font-size:40px;
  line-height:1;
}

.admin-payment-hero > div:first-child > span{
  display:block;
  margin-top:5px;
  font-size:14px;
  letter-spacing:.18em;
}

.admin-payment-hero p{
  margin:7px 0 2px;
  font-size:12.5px;
  color:rgba(224,234,240,.82);
}

.admin-payment-hero small{
  color:rgba(203,218,227,.58);
  font-size:9.5px;
}

.admin-payment-manifesto{
  min-width:190px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.admin-payment-manifesto strong{
  color:#edf3f6;
  font-size:10px;
  letter-spacing:.12em;
}

/* KPI */

.admin-payment-kpi-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}

.admin-payment-kpi-grid article{
  min-height:108px;
  padding:14px;
  display:grid;
  grid-template-columns:54px 1fr;
  gap:10px;
  align-items:center;
  border:1px solid rgba(92,165,212,.18);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.admin-payment-kpi-grid article > span{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:14px;
  font-size:28px;
}

.admin-payment-kpi-grid strong,
.admin-payment-kpi-grid small,
.admin-payment-kpi-grid b{
  display:block;
}

.admin-payment-kpi-grid strong{
  font-size:11.5px;
}

.admin-payment-kpi-grid small{
  margin-top:2px;
  color:rgba(203,216,225,.52);
  font-size:8.5px;
}

.admin-payment-kpi-grid b{
  margin-top:8px;
  font-size:24px;
}

.admin-payment-kpi-grid .total{
  border-color:rgba(239,177,63,.58);
}

.admin-payment-kpi-grid .total > span{
  color:#f0b63f;
  background:rgba(239,177,63,.08);
}

.admin-payment-kpi-grid .paid{
  border-color:rgba(64,220,178,.52);
}

.admin-payment-kpi-grid .paid > span{
  color:#4eddb9;
  background:rgba(64,220,178,.08);
}

.admin-payment-kpi-grid .processing{
  border-color:rgba(54,138,255,.52);
}

.admin-payment-kpi-grid .processing > span{
  color:#58a1ff;
  background:rgba(54,138,255,.08);
}

.admin-payment-kpi-grid .review{
  border-color:rgba(172,88,239,.52);
}

.admin-payment-kpi-grid .review > span{
  color:#b97cff;
  background:rgba(172,88,239,.08);
}

/* DIRECTORY */

.admin-payment-directory{
  margin-top:8px;
  overflow:hidden;
  border:1px solid rgba(92,165,212,.17);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.admin-payment-search-row{
  padding:12px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 150px;
  gap:10px;
}

.admin-payment-search-row label{
  min-height:44px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(92,165,212,.22);
  border-radius:8px;
  background:#0b1823;
}

.admin-payment-search-row label > span{
  font-size:20px;
  color:#dce7ec;
}

.admin-payment-search-row input{
  width:100%;
  border:0;
  outline:0;
  color:#e9f0f4;
  background:transparent;
  font-size:11.5px;
}

.admin-payment-search-row > button{
  border:1px solid rgba(239,177,63,.72);
  border-radius:8px;
  color:#f0b63f;
  background:transparent;
  font-size:11px;
  font-weight:600;
}

/* FILTERS */

.admin-payment-filter-grid{
  padding:0 12px 12px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
}

.admin-payment-filter-grid label > small{
  display:block;
  margin-bottom:5px;
  color:rgba(211,223,230,.68);
  font-size:9px;
}

.admin-payment-filter-grid select{
  width:100%;
  min-height:38px;
  padding:0 10px;
  border:1px solid rgba(92,165,212,.22);
  border-radius:7px;
  color:#e9f0f4;
  background:#0b1823;
  font-size:10px;
}

/* TABLE */

.admin-payment-table{
  margin:0 12px;
  overflow:hidden;
  border:1px solid rgba(92,165,212,.18);
  border-radius:8px;
}

.admin-payment-table .head{
  min-width:1200px;
  min-height:50px;
  display:grid;
  grid-template-columns:42px .82fr .78fr 1.05fr .78fr .78fr 1.28fr 1.05fr .88fr .9fr .82fr;
  align-items:center;
  background:rgba(13,35,50,.78);
  border-bottom:1px solid rgba(92,165,212,.16);
  color:#dce6eb;
  font-size:9.5px;
}

.admin-payment-table .head > span{
  height:100%;
  padding:0 9px;
  display:flex;
  align-items:center;
  border-right:1px solid rgba(255,255,255,.05);
}

.admin-payment-empty{
  min-height:245px;
  display:grid;
  place-items:center;
  align-content:center;
  text-align:center;
  background:
    radial-gradient(circle at 50% 45%,rgba(54,117,156,.08),transparent 36%);
}

.admin-payment-empty > span{
  color:#9ea8ff;
  font-size:58px;
}

.admin-payment-empty strong{
  margin-top:9px;
  font-size:18px;
  letter-spacing:.08em;
}

.admin-payment-empty p{
  margin:8px 0 2px;
  color:#dce5ea;
  font-size:12px;
}

.admin-payment-empty small{
  color:rgba(202,215,224,.58);
  font-size:9.5px;
}

/* FOOTER */

.admin-payment-footer{
  min-height:54px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:rgba(206,219,227,.62);
  font-size:9.5px;
}

.admin-payment-footer > div{
  display:flex;
  align-items:center;
  gap:7px;
}

.admin-payment-footer button,
.admin-payment-footer select{
  min-height:32px;
  border:1px solid rgba(92,165,212,.20);
  border-radius:6px;
  color:#dce6eb;
  background:#0b1823;
  font-size:9px;
}

.admin-payment-footer button{
  min-width:32px;
}

.admin-payment-footer select{
  padding:0 10px;
}

/* RESPONSIVE */

@media (max-width:1250px){
  #adminPaymentView .admin-shell{
    grid-template-columns:230px minmax(0,1fr);
  }

  .admin-payment-kpi-grid{
    grid-template-columns:1fr 1fr;
  }

  .admin-payment-filter-grid{
    grid-template-columns:1fr 1fr 1fr;
  }
}

@media (max-width:1000px){
  #adminPaymentView .admin-shell{
    grid-template-columns:1fr;
  }

  #adminPaymentView .admin-sidebar{
    display:none;
  }

  .admin-payment-search-row{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .admin-payment-content{
    width:calc(100% - 28px);
  }

  #adminPaymentView .admin-top-actions{
    display:none;
  }

  #adminPaymentView .admin-search{
    width:100%;
  }

  .admin-payment-hero{
    flex-direction:column;
    align-items:flex-start;
  }

  .admin-payment-hero h1{
    font-size:32px;
  }

  .admin-payment-kpi-grid,
  .admin-payment-filter-grid{
    grid-template-columns:1fr;
  }

  .admin-payment-manifesto{
    min-width:0;
  }

  .admin-payment-footer{
    flex-direction:column;
    align-items:flex-start;
    padding:10px 12px;
  }
}


/* =========================================================
   SCREEN 40 — ADM BENEFIT COMMISSION
   ========================================================= */

body:has(#adminBenefitCommissionView.active) > .topbar{
  display:none;
}

body:has(#adminBenefitCommissionView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#adminBenefitCommissionView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 82% 7%,rgba(28,122,188,.08),transparent 28%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#adminBenefitCommissionView.active{
  display:block;
}

#adminBenefitCommissionView .admin-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:278px minmax(0,1fr);
}

/* SIDEBAR */

#adminBenefitCommissionView .admin-sidebar{
  min-height:100vh;
  padding:20px 20px 24px;
  border-right:1px solid rgba(87,173,228,.18);
  background:#06101a;
}

#adminBenefitCommissionView .admin-brand{
  min-height:74px;
  padding:0 10px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.07);
}

#adminBenefitCommissionView .admin-brand strong{
  color:#f0bd50;
  font-size:24px;
}

#adminBenefitCommissionView .admin-brand span{
  margin-top:4px;
  color:#d4dde4;
  font-size:8px;
  letter-spacing:.28em;
}

#adminBenefitCommissionView .admin-nav-label{
  display:block;
  margin:20px 10px 9px;
  color:#dce5ea;
  font-size:10px;
  letter-spacing:.24em;
}

#adminBenefitCommissionView .admin-nav{
  display:grid;
  gap:4px;
}

#adminBenefitCommissionView .admin-nav-item{
  width:100%;
  min-height:44px;
  padding:0 12px;
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  border:1px solid transparent;
  border-radius:10px;
  color:#d8e2e8;
  background:transparent;
  text-align:left;
}

#adminBenefitCommissionView .admin-nav-item > span{
  font-size:20px;
}

#adminBenefitCommissionView .admin-nav-item strong{
  display:block;
  font-size:13px;
}

#adminBenefitCommissionView .admin-nav-item small{
  display:block;
  margin-top:2px;
  color:rgba(203,216,225,.48);
  font-size:8px;
}

#adminBenefitCommissionView .admin-nav-item.active{
  border-color:rgba(239,177,63,.70);
  background:
    linear-gradient(90deg,rgba(239,177,63,.22),rgba(239,177,63,.04));
  box-shadow:0 0 18px rgba(239,177,63,.10);
}

#adminBenefitCommissionView .admin-nav-item.active > span{
  color:#f0b63f;
}

#adminBenefitCommissionView .admin-sidebar-vision{
  margin-top:18px;
  min-height:198px;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid rgba(92,165,212,.16);
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(5,15,25,.18),rgba(5,15,25,.62)),
    url("./assets/customer/home/hero-customer-home.webp") center / cover no-repeat;
}

#adminBenefitCommissionView .admin-sidebar-vision span{
  color:#f1f4f6;
  font-size:10px;
  line-height:1.55;
  letter-spacing:.18em;
}

#adminBenefitCommissionView .admin-sidebar-vision small{
  margin-top:18px;
  color:#d8e1e7;
  font-size:9px;
}

/* TOPBAR */

#adminBenefitCommissionView .admin-main{
  min-width:0;
}

#adminBenefitCommissionView .admin-topbar{
  min-height:84px;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid rgba(92,165,212,.12);
  background:rgba(4,11,18,.96);
}

#adminBenefitCommissionView .admin-search{
  width:min(730px,62%);
  min-height:48px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(92,165,212,.18);
  border-radius:12px;
  background:rgba(13,32,48,.66);
}

#adminBenefitCommissionView .admin-search input{
  width:100%;
  border:0;
  outline:0;
  color:#eaf0f4;
  background:transparent;
  font-size:13px;
}

#adminBenefitCommissionView .admin-top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

#adminBenefitCommissionView .admin-top-actions button{
  min-width:42px;
  height:42px;
  border:1px solid rgba(92,165,212,.16);
  border-radius:12px;
  color:#e1ebf0;
  background:rgba(10,24,36,.72);
}

#adminBenefitCommissionView .admin-user{
  display:flex;
  align-items:center;
  gap:10px;
}

#adminBenefitCommissionView .admin-avatar{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(180deg,#8cabd9,#436590);
}

#adminBenefitCommissionView .admin-user > div{
  display:flex;
  flex-direction:column;
}

#adminBenefitCommissionView .admin-user strong{
  font-size:13px;
}

#adminBenefitCommissionView .admin-user small{
  margin-top:3px;
  color:rgba(210,222,230,.58);
  font-size:9px;
}

/* CONTENT */

.admin-benefit-commission-content{
  width:min(1420px,calc(100% - 48px));
  margin:0 auto;
  padding:10px 0 26px;
}

.admin-bc-breadcrumb{
  min-height:28px;
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(202,215,224,.58);
  font-size:10px;
}

.admin-bc-breadcrumb strong{
  color:#6ed5ff;
}

/* HERO */

.admin-bc-hero{
  min-height:142px;
  padding:16px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-radius:14px;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(4,11,18,.98),rgba(4,11,18,.74) 38%,rgba(4,11,18,.12) 72%,rgba(4,11,18,.04)),
    url("./assets/customer/home/hero-customer-home.webp") center 46% / cover no-repeat;
}

.admin-bc-hero h1{
  margin:0;
  font-size:40px;
  line-height:1;
}

.admin-bc-hero > div:first-child > span{
  display:block;
  margin-top:5px;
  font-size:14px;
  letter-spacing:.18em;
}

.admin-bc-hero p{
  margin:7px 0 2px;
  font-size:12.5px;
  color:rgba(224,234,240,.82);
}

.admin-bc-hero small{
  color:rgba(203,218,227,.58);
  font-size:9.5px;
}

.admin-bc-manifesto{
  min-width:190px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.admin-bc-manifesto strong{
  color:#edf3f6;
  font-size:10px;
  letter-spacing:.12em;
}

/* KPI */

.admin-bc-kpi-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}

.admin-bc-kpi-grid article{
  min-height:108px;
  padding:14px;
  display:grid;
  grid-template-columns:54px 1fr;
  gap:10px;
  align-items:center;
  border:1px solid rgba(92,165,212,.18);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.admin-bc-kpi-grid article > span{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:14px;
  font-size:28px;
}

.admin-bc-kpi-grid strong,
.admin-bc-kpi-grid small,
.admin-bc-kpi-grid b{
  display:block;
}

.admin-bc-kpi-grid strong{
  font-size:11.5px;
}

.admin-bc-kpi-grid small{
  margin-top:2px;
  color:rgba(203,216,225,.52);
  font-size:8.5px;
}

.admin-bc-kpi-grid b{
  margin-top:8px;
  font-size:24px;
}

.admin-bc-kpi-grid .total{
  border-color:rgba(239,177,63,.58);
}

.admin-bc-kpi-grid .total > span{
  color:#f0b63f;
  background:rgba(239,177,63,.08);
}

.admin-bc-kpi-grid .active{
  border-color:rgba(64,220,178,.52);
}

.admin-bc-kpi-grid .active > span{
  color:#4eddb9;
  background:rgba(64,220,178,.08);
}

.admin-bc-kpi-grid .pending{
  border-color:rgba(54,138,255,.52);
}

.admin-bc-kpi-grid .pending > span{
  color:#58a1ff;
  background:rgba(54,138,255,.08);
}

.admin-bc-kpi-grid .review{
  border-color:rgba(172,88,239,.52);
}

.admin-bc-kpi-grid .review > span{
  color:#b97cff;
  background:rgba(172,88,239,.08);
}

/* TABS */

.admin-bc-tabs{
  margin-top:8px;
  min-height:62px;
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
  border:1px solid rgba(92,165,212,.17);
  border-radius:11px 11px 0 0;
  background:rgba(8,18,28,.95);
}

.admin-bc-tabs button{
  padding:0 18px;
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  border:0;
  border-right:1px solid rgba(255,255,255,.05);
  color:#dce6eb;
  background:transparent;
  text-align:left;
}

.admin-bc-tabs button:last-child{
  border-right:0;
}

.admin-bc-tabs button > span{
  font-size:23px;
}

.admin-bc-tabs strong{
  display:block;
  font-size:13px;
}

.admin-bc-tabs small{
  display:block;
  margin-top:2px;
  color:rgba(202,215,224,.52);
  font-size:8.5px;
}

.admin-bc-tabs button.active{
  color:#fff;
  background:
    linear-gradient(90deg,rgba(239,177,63,.22),rgba(239,177,63,.05));
  box-shadow:inset 0 -2px 0 #f0b63f;
}

.admin-bc-tabs button.active > span{
  color:#f0b63f;
}

/* DIRECTORY */

.admin-bc-directory{
  overflow:hidden;
  border:1px solid rgba(92,165,212,.17);
  border-top:0;
  border-radius:0 0 11px 11px;
  background:rgba(8,18,28,.95);
}

.admin-bc-search-row{
  padding:12px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 150px;
  gap:10px;
}

.admin-bc-search-row label{
  min-height:44px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(92,165,212,.22);
  border-radius:8px;
  background:#0b1823;
}

.admin-bc-search-row label > span{
  font-size:20px;
  color:#dce7ec;
}

.admin-bc-search-row input{
  width:100%;
  border:0;
  outline:0;
  color:#e9f0f4;
  background:transparent;
  font-size:11.5px;
}

.admin-bc-search-row > button{
  border:1px solid rgba(239,177,63,.72);
  border-radius:8px;
  color:#f0b63f;
  background:transparent;
  font-size:11px;
  font-weight:600;
}

/* FILTERS */

.admin-bc-filter-grid{
  padding:0 12px 12px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
}

.admin-bc-filter-grid label > small{
  display:block;
  margin-bottom:5px;
  color:rgba(211,223,230,.68);
  font-size:9px;
}

.admin-bc-filter-grid select{
  width:100%;
  min-height:38px;
  padding:0 10px;
  border:1px solid rgba(92,165,212,.22);
  border-radius:7px;
  color:#e9f0f4;
  background:#0b1823;
  font-size:10px;
}

/* TABLE */

.admin-bc-table{
  margin:0 12px;
  overflow:hidden;
  border:1px solid rgba(92,165,212,.18);
  border-radius:8px;
}

.admin-bc-table .head{
  min-width:1200px;
  min-height:50px;
  display:grid;
  grid-template-columns:42px .78fr .72fr 1fr 1.08fr .78fr .7fr .88fr .92fr .88fr .82fr;
  align-items:center;
  background:rgba(13,35,50,.78);
  border-bottom:1px solid rgba(92,165,212,.16);
  color:#dce6eb;
  font-size:9.5px;
}

.admin-bc-table .head > span{
  height:100%;
  padding:0 9px;
  display:flex;
  align-items:center;
  border-right:1px solid rgba(255,255,255,.05);
}

.admin-bc-empty{
  min-height:245px;
  display:grid;
  place-items:center;
  align-content:center;
  text-align:center;
  background:
    radial-gradient(circle at 50% 45%,rgba(54,117,156,.08),transparent 36%);
}

.admin-bc-empty > span{
  color:#9ea8ff;
  font-size:58px;
}

.admin-bc-empty strong{
  margin-top:9px;
  font-size:18px;
  letter-spacing:.08em;
}

.admin-bc-empty p{
  margin:8px 0 2px;
  color:#dce5ea;
  font-size:12px;
}

.admin-bc-empty small{
  color:rgba(202,215,224,.58);
  font-size:9.5px;
}

/* FOOTER */

.admin-bc-footer{
  min-height:54px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:rgba(206,219,227,.62);
  font-size:9.5px;
}

.admin-bc-footer > div{
  display:flex;
  align-items:center;
  gap:7px;
}

.admin-bc-footer button,
.admin-bc-footer select{
  min-height:32px;
  border:1px solid rgba(92,165,212,.20);
  border-radius:6px;
  color:#dce6eb;
  background:#0b1823;
  font-size:9px;
}

.admin-bc-footer button{
  min-width:32px;
}

.admin-bc-footer select{
  padding:0 10px;
}

/* RESPONSIVE */

@media (max-width:1250px){
  #adminBenefitCommissionView .admin-shell{
    grid-template-columns:230px minmax(0,1fr);
  }

  .admin-bc-kpi-grid{
    grid-template-columns:1fr 1fr;
  }

  .admin-bc-filter-grid{
    grid-template-columns:1fr 1fr 1fr;
  }
}

@media (max-width:1000px){
  #adminBenefitCommissionView .admin-shell{
    grid-template-columns:1fr;
  }

  #adminBenefitCommissionView .admin-sidebar{
    display:none;
  }

  .admin-bc-tabs{
    grid-template-columns:1fr;
  }

  .admin-bc-search-row{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .admin-benefit-commission-content{
    width:calc(100% - 28px);
  }

  #adminBenefitCommissionView .admin-top-actions{
    display:none;
  }

  #adminBenefitCommissionView .admin-search{
    width:100%;
  }

  .admin-bc-hero{
    flex-direction:column;
    align-items:flex-start;
  }

  .admin-bc-hero h1{
    font-size:32px;
  }

  .admin-bc-kpi-grid,
  .admin-bc-filter-grid{
    grid-template-columns:1fr;
  }

  .admin-bc-manifesto{
    min-width:0;
  }

  .admin-bc-footer{
    flex-direction:column;
    align-items:flex-start;
    padding:10px 12px;
  }
}


/* =========================================================
   SCREEN 41 — ADM PERFORMANCE
   ========================================================= */

body:has(#adminPerformanceView.active) > .topbar{
  display:none;
}

body:has(#adminPerformanceView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#adminPerformanceView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 82% 7%,rgba(28,122,188,.08),transparent 28%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#adminPerformanceView.active{
  display:block;
}

#adminPerformanceView .admin-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:278px minmax(0,1fr);
}

/* SIDEBAR */

#adminPerformanceView .admin-sidebar{
  min-height:100vh;
  padding:20px 20px 24px;
  border-right:1px solid rgba(87,173,228,.18);
  background:#06101a;
}

#adminPerformanceView .admin-brand{
  min-height:74px;
  padding:0 10px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.07);
}

#adminPerformanceView .admin-brand strong{
  color:#f0bd50;
  font-size:24px;
}

#adminPerformanceView .admin-brand span{
  margin-top:4px;
  color:#d4dde4;
  font-size:8px;
  letter-spacing:.28em;
}

#adminPerformanceView .admin-nav-label{
  display:block;
  margin:20px 10px 9px;
  color:#dce5ea;
  font-size:10px;
  letter-spacing:.24em;
}

#adminPerformanceView .admin-nav{
  display:grid;
  gap:4px;
}

#adminPerformanceView .admin-nav-item{
  width:100%;
  min-height:44px;
  padding:0 12px;
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  border:1px solid transparent;
  border-radius:10px;
  color:#d8e2e8;
  background:transparent;
  text-align:left;
}

#adminPerformanceView .admin-nav-item > span{
  font-size:20px;
}

#adminPerformanceView .admin-nav-item strong{
  display:block;
  font-size:13px;
}

#adminPerformanceView .admin-nav-item small{
  display:block;
  margin-top:2px;
  color:rgba(203,216,225,.48);
  font-size:8px;
}

#adminPerformanceView .admin-nav-item.active{
  border-color:rgba(239,177,63,.70);
  background:
    linear-gradient(90deg,rgba(239,177,63,.22),rgba(239,177,63,.04));
  box-shadow:0 0 18px rgba(239,177,63,.10);
}

#adminPerformanceView .admin-nav-item.active > span{
  color:#f0b63f;
}

#adminPerformanceView .admin-sidebar-vision{
  margin-top:18px;
  min-height:198px;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid rgba(92,165,212,.16);
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(5,15,25,.18),rgba(5,15,25,.62)),
    url("./assets/customer/home/hero-customer-home.webp") center / cover no-repeat;
}

#adminPerformanceView .admin-sidebar-vision span{
  color:#f1f4f6;
  font-size:10px;
  line-height:1.55;
  letter-spacing:.18em;
}

#adminPerformanceView .admin-sidebar-vision small{
  margin-top:18px;
  color:#d8e1e7;
  font-size:9px;
}

/* TOPBAR */

#adminPerformanceView .admin-main{
  min-width:0;
}

#adminPerformanceView .admin-topbar{
  min-height:84px;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid rgba(92,165,212,.12);
  background:rgba(4,11,18,.96);
}

#adminPerformanceView .admin-search{
  width:min(730px,62%);
  min-height:48px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(92,165,212,.18);
  border-radius:12px;
  background:rgba(13,32,48,.66);
}

#adminPerformanceView .admin-search input{
  width:100%;
  border:0;
  outline:0;
  color:#eaf0f4;
  background:transparent;
  font-size:13px;
}

#adminPerformanceView .admin-top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

#adminPerformanceView .admin-top-actions button{
  min-width:42px;
  height:42px;
  border:1px solid rgba(92,165,212,.16);
  border-radius:12px;
  color:#e1ebf0;
  background:rgba(10,24,36,.72);
}

#adminPerformanceView .admin-user{
  display:flex;
  align-items:center;
  gap:10px;
}

#adminPerformanceView .admin-avatar{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(180deg,#8cabd9,#436590);
}

#adminPerformanceView .admin-user > div{
  display:flex;
  flex-direction:column;
}

#adminPerformanceView .admin-user strong{
  font-size:13px;
}

#adminPerformanceView .admin-user small{
  margin-top:3px;
  color:rgba(210,222,230,.58);
  font-size:9px;
}

/* CONTENT */

.admin-performance-content{
  width:min(1420px,calc(100% - 48px));
  margin:0 auto;
  padding:10px 0 26px;
}

.admin-performance-breadcrumb{
  min-height:28px;
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(202,215,224,.58);
  font-size:10px;
}

.admin-performance-breadcrumb strong{
  color:#6ed5ff;
}

/* HERO */

.admin-performance-hero{
  min-height:142px;
  padding:16px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-radius:14px;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(4,11,18,.98),rgba(4,11,18,.74) 38%,rgba(4,11,18,.12) 72%,rgba(4,11,18,.04)),
    url("./assets/customer/home/hero-customer-home.webp") center 46% / cover no-repeat;
}

.admin-performance-hero h1{
  margin:0;
  font-size:40px;
  line-height:1;
}

.admin-performance-hero > div:first-child > span{
  display:block;
  margin-top:5px;
  font-size:14px;
  letter-spacing:.18em;
}

.admin-performance-hero p{
  margin:7px 0 2px;
  font-size:12.5px;
  color:rgba(224,234,240,.82);
}

.admin-performance-hero small{
  color:rgba(203,218,227,.58);
  font-size:9.5px;
}

.admin-performance-manifesto{
  min-width:190px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.admin-performance-manifesto strong{
  color:#edf3f6;
  font-size:10px;
  letter-spacing:.12em;
}

/* KPI */

.admin-performance-kpi-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}

.admin-performance-kpi-grid article{
  min-height:108px;
  padding:14px;
  display:grid;
  grid-template-columns:54px 1fr;
  gap:10px;
  align-items:center;
  border:1px solid rgba(92,165,212,.18);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.admin-performance-kpi-grid article > span{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:14px;
  font-size:28px;
}

.admin-performance-kpi-grid strong,
.admin-performance-kpi-grid small,
.admin-performance-kpi-grid b{
  display:block;
}

.admin-performance-kpi-grid strong{
  font-size:11.5px;
}

.admin-performance-kpi-grid small{
  margin-top:2px;
  color:rgba(203,216,225,.52);
  font-size:8.5px;
}

.admin-performance-kpi-grid b{
  margin-top:8px;
  font-size:24px;
}

.admin-performance-kpi-grid .total{
  border-color:rgba(239,177,63,.58);
}

.admin-performance-kpi-grid .total > span{
  color:#f0b63f;
  background:rgba(239,177,63,.08);
}

.admin-performance-kpi-grid .transactions{
  border-color:rgba(64,220,178,.52);
}

.admin-performance-kpi-grid .transactions > span{
  color:#4eddb9;
  background:rgba(64,220,178,.08);
}

.admin-performance-kpi-grid .status{
  border-color:rgba(54,138,255,.52);
}

.admin-performance-kpi-grid .status > span{
  color:#58a1ff;
  background:rgba(54,138,255,.08);
}

.admin-performance-kpi-grid .eligibility{
  border-color:rgba(172,88,239,.52);
}

.admin-performance-kpi-grid .eligibility > span{
  color:#b97cff;
  background:rgba(172,88,239,.08);
}

/* DIRECTORY */

.admin-performance-directory{
  margin-top:8px;
  overflow:hidden;
  border:1px solid rgba(92,165,212,.17);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.admin-performance-search-row{
  padding:12px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 150px;
  gap:10px;
}

.admin-performance-search-row label{
  min-height:44px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(92,165,212,.22);
  border-radius:8px;
  background:#0b1823;
}

.admin-performance-search-row label > span{
  font-size:20px;
  color:#dce7ec;
}

.admin-performance-search-row input{
  width:100%;
  border:0;
  outline:0;
  color:#e9f0f4;
  background:transparent;
  font-size:11.5px;
}

.admin-performance-search-row > button{
  border:1px solid rgba(239,177,63,.72);
  border-radius:8px;
  color:#f0b63f;
  background:transparent;
  font-size:11px;
  font-weight:600;
}

/* FILTERS */

.admin-performance-filter-grid{
  padding:0 12px 12px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
}

.admin-performance-filter-grid label > small{
  display:block;
  margin-bottom:5px;
  color:rgba(211,223,230,.68);
  font-size:9px;
}

.admin-performance-filter-grid select{
  width:100%;
  min-height:38px;
  padding:0 10px;
  border:1px solid rgba(92,165,212,.22);
  border-radius:7px;
  color:#e9f0f4;
  background:#0b1823;
  font-size:10px;
}

/* TABLE */

.admin-performance-table{
  margin:0 12px;
  overflow:hidden;
  border:1px solid rgba(92,165,212,.18);
  border-radius:8px;
}

.admin-performance-table .head{
  min-width:1240px;
  min-height:50px;
  display:grid;
  grid-template-columns:42px .95fr .72fr .9fr 1.12fr 1.05fr 1.05fr 1.05fr .78fr .82fr .75fr;
  align-items:center;
  background:rgba(13,35,50,.78);
  border-bottom:1px solid rgba(92,165,212,.16);
  color:#dce6eb;
  font-size:9.3px;
}

.admin-performance-table .head > span{
  height:100%;
  padding:0 9px;
  display:flex;
  align-items:center;
  border-right:1px solid rgba(255,255,255,.05);
}

.admin-performance-empty{
  min-height:245px;
  display:grid;
  place-items:center;
  align-content:center;
  text-align:center;
  background:
    radial-gradient(circle at 50% 45%,rgba(54,117,156,.08),transparent 36%);
}

.admin-performance-empty > span{
  color:#9ea8ff;
  font-size:58px;
}

.admin-performance-empty strong{
  margin-top:9px;
  font-size:18px;
  letter-spacing:.08em;
}

.admin-performance-empty p{
  margin:8px 0 2px;
  color:#dce5ea;
  font-size:12px;
}

.admin-performance-empty small{
  color:rgba(202,215,224,.58);
  font-size:9.5px;
}

/* FOOTER */

.admin-performance-footer{
  min-height:54px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:rgba(206,219,227,.62);
  font-size:9.5px;
}

.admin-performance-footer > div{
  display:flex;
  align-items:center;
  gap:7px;
}

.admin-performance-footer button,
.admin-performance-footer select{
  min-height:32px;
  border:1px solid rgba(92,165,212,.20);
  border-radius:6px;
  color:#dce6eb;
  background:#0b1823;
  font-size:9px;
}

.admin-performance-footer button{
  min-width:32px;
}

.admin-performance-footer select{
  padding:0 10px;
}

/* RESPONSIVE */

@media (max-width:1250px){
  #adminPerformanceView .admin-shell{
    grid-template-columns:230px minmax(0,1fr);
  }

  .admin-performance-kpi-grid{
    grid-template-columns:1fr 1fr;
  }

  .admin-performance-filter-grid{
    grid-template-columns:1fr 1fr 1fr;
  }
}

@media (max-width:1000px){
  #adminPerformanceView .admin-shell{
    grid-template-columns:1fr;
  }

  #adminPerformanceView .admin-sidebar{
    display:none;
  }

  .admin-performance-search-row{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .admin-performance-content{
    width:calc(100% - 28px);
  }

  #adminPerformanceView .admin-top-actions{
    display:none;
  }

  #adminPerformanceView .admin-search{
    width:100%;
  }

  .admin-performance-hero{
    flex-direction:column;
    align-items:flex-start;
  }

  .admin-performance-hero h1{
    font-size:32px;
  }

  .admin-performance-kpi-grid,
  .admin-performance-filter-grid{
    grid-template-columns:1fr;
  }

  .admin-performance-manifesto{
    min-width:0;
  }

  .admin-performance-footer{
    flex-direction:column;
    align-items:flex-start;
    padding:10px 12px;
  }
}


/* =========================================================
   SCREEN 42 — ADM KYC TAX RISK
   ========================================================= */

body:has(#adminKycTaxRiskView.active) > .topbar{
  display:none;
}

body:has(#adminKycTaxRiskView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#adminKycTaxRiskView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 82% 7%,rgba(28,122,188,.08),transparent 28%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#adminKycTaxRiskView.active{
  display:block;
}

#adminKycTaxRiskView .admin-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:278px minmax(0,1fr);
}

/* SIDEBAR */

#adminKycTaxRiskView .admin-sidebar{
  min-height:100vh;
  padding:20px 20px 24px;
  border-right:1px solid rgba(87,173,228,.18);
  background:#06101a;
}

#adminKycTaxRiskView .admin-brand{
  min-height:74px;
  padding:0 10px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.07);
}

#adminKycTaxRiskView .admin-brand strong{
  color:#f0bd50;
  font-size:24px;
}

#adminKycTaxRiskView .admin-brand span{
  margin-top:4px;
  color:#d4dde4;
  font-size:8px;
  letter-spacing:.28em;
}

#adminKycTaxRiskView .admin-nav-label{
  display:block;
  margin:20px 10px 9px;
  color:#dce5ea;
  font-size:10px;
  letter-spacing:.24em;
}

#adminKycTaxRiskView .admin-nav{
  display:grid;
  gap:4px;
}

#adminKycTaxRiskView .admin-nav-item{
  width:100%;
  min-height:44px;
  padding:0 12px;
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  border:1px solid transparent;
  border-radius:10px;
  color:#d8e2e8;
  background:transparent;
  text-align:left;
}

#adminKycTaxRiskView .admin-nav-item > span{
  font-size:20px;
}

#adminKycTaxRiskView .admin-nav-item strong{
  display:block;
  font-size:13px;
}

#adminKycTaxRiskView .admin-nav-item small{
  display:block;
  margin-top:2px;
  color:rgba(203,216,225,.48);
  font-size:8px;
}

#adminKycTaxRiskView .admin-nav-item.active{
  border-color:rgba(239,177,63,.70);
  background:
    linear-gradient(90deg,rgba(239,177,63,.22),rgba(239,177,63,.04));
  box-shadow:0 0 18px rgba(239,177,63,.10);
}

#adminKycTaxRiskView .admin-nav-item.active > span{
  color:#f0b63f;
}

#adminKycTaxRiskView .admin-sidebar-vision{
  margin-top:18px;
  min-height:198px;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid rgba(92,165,212,.16);
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(5,15,25,.18),rgba(5,15,25,.62)),
    url("./assets/customer/home/hero-customer-home.webp") center / cover no-repeat;
}

#adminKycTaxRiskView .admin-sidebar-vision span{
  color:#f1f4f6;
  font-size:10px;
  line-height:1.55;
  letter-spacing:.18em;
}

#adminKycTaxRiskView .admin-sidebar-vision small{
  margin-top:18px;
  color:#d8e1e7;
  font-size:9px;
}

/* TOPBAR */

#adminKycTaxRiskView .admin-main{
  min-width:0;
}

#adminKycTaxRiskView .admin-topbar{
  min-height:84px;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid rgba(92,165,212,.12);
  background:rgba(4,11,18,.96);
}

#adminKycTaxRiskView .admin-search{
  width:min(730px,62%);
  min-height:48px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(92,165,212,.18);
  border-radius:12px;
  background:rgba(13,32,48,.66);
}

#adminKycTaxRiskView .admin-search input{
  width:100%;
  border:0;
  outline:0;
  color:#eaf0f4;
  background:transparent;
  font-size:13px;
}

#adminKycTaxRiskView .admin-top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

#adminKycTaxRiskView .admin-top-actions button{
  min-width:42px;
  height:42px;
  border:1px solid rgba(92,165,212,.16);
  border-radius:12px;
  color:#e1ebf0;
  background:rgba(10,24,36,.72);
}

#adminKycTaxRiskView .admin-user{
  display:flex;
  align-items:center;
  gap:10px;
}

#adminKycTaxRiskView .admin-avatar{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(180deg,#8cabd9,#436590);
}

#adminKycTaxRiskView .admin-user > div{
  display:flex;
  flex-direction:column;
}

#adminKycTaxRiskView .admin-user strong{
  font-size:13px;
}

#adminKycTaxRiskView .admin-user small{
  margin-top:3px;
  color:rgba(210,222,230,.58);
  font-size:9px;
}

/* CONTENT */

.admin-ktr-content{
  width:min(1420px,calc(100% - 48px));
  margin:0 auto;
  padding:10px 0 26px;
}

.admin-ktr-breadcrumb{
  min-height:28px;
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(202,215,224,.58);
  font-size:10px;
}

.admin-ktr-breadcrumb strong{
  color:#6ed5ff;
}

/* HERO */

.admin-ktr-hero{
  min-height:142px;
  padding:16px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-radius:14px;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(4,11,18,.98),rgba(4,11,18,.74) 38%,rgba(4,11,18,.12) 72%,rgba(4,11,18,.04)),
    url("./assets/customer/home/hero-customer-home.webp") center 46% / cover no-repeat;
}

.admin-ktr-hero h1{
  margin:0;
  font-size:40px;
  line-height:1;
}

.admin-ktr-hero > div:first-child > span{
  display:block;
  margin-top:5px;
  font-size:14px;
  letter-spacing:.18em;
}

.admin-ktr-hero p{
  margin:7px 0 2px;
  font-size:12.5px;
  color:rgba(224,234,240,.82);
}

.admin-ktr-hero small{
  color:rgba(203,218,227,.58);
  font-size:9.5px;
}

.admin-ktr-manifesto{
  min-width:190px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.admin-ktr-manifesto strong{
  color:#edf3f6;
  font-size:10px;
  letter-spacing:.12em;
}

/* KPI */

.admin-ktr-kpi-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}

.admin-ktr-kpi-grid article{
  min-height:108px;
  padding:14px;
  display:grid;
  grid-template-columns:54px 1fr;
  gap:10px;
  align-items:center;
  border:1px solid rgba(92,165,212,.18);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.admin-ktr-kpi-grid article > span{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:14px;
  font-size:28px;
}

.admin-ktr-kpi-grid strong,
.admin-ktr-kpi-grid small,
.admin-ktr-kpi-grid b{
  display:block;
}

.admin-ktr-kpi-grid strong{
  font-size:11.5px;
}

.admin-ktr-kpi-grid small{
  margin-top:2px;
  color:rgba(203,216,225,.52);
  font-size:8.5px;
}

.admin-ktr-kpi-grid b{
  margin-top:8px;
  font-size:24px;
}

.admin-ktr-kpi-grid .kyc{
  border-color:rgba(239,177,63,.58);
}

.admin-ktr-kpi-grid .kyc > span{
  color:#f0b63f;
  background:rgba(239,177,63,.08);
}

.admin-ktr-kpi-grid .tax{
  border-color:rgba(64,220,178,.52);
}

.admin-ktr-kpi-grid .tax > span{
  color:#4eddb9;
  background:rgba(64,220,178,.08);
}

.admin-ktr-kpi-grid .compliance{
  border-color:rgba(54,138,255,.52);
}

.admin-ktr-kpi-grid .compliance > span{
  color:#58a1ff;
  background:rgba(54,138,255,.08);
}

.admin-ktr-kpi-grid .risk{
  border-color:rgba(172,88,239,.52);
}

.admin-ktr-kpi-grid .risk > span{
  color:#b97cff;
  background:rgba(172,88,239,.08);
}

/* DIRECTORY */

.admin-ktr-directory{
  margin-top:8px;
  overflow:hidden;
  border:1px solid rgba(92,165,212,.17);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.admin-ktr-search-row{
  padding:12px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 150px;
  gap:10px;
}

.admin-ktr-search-row label{
  min-height:44px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(92,165,212,.22);
  border-radius:8px;
  background:#0b1823;
}

.admin-ktr-search-row label > span{
  font-size:20px;
  color:#dce7ec;
}

.admin-ktr-search-row input{
  width:100%;
  border:0;
  outline:0;
  color:#e9f0f4;
  background:transparent;
  font-size:11.5px;
}

.admin-ktr-search-row > button{
  border:1px solid rgba(239,177,63,.72);
  border-radius:8px;
  color:#f0b63f;
  background:transparent;
  font-size:11px;
  font-weight:600;
}

/* FILTERS */

.admin-ktr-filter-grid{
  padding:0 12px 12px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
}

.admin-ktr-filter-grid label > small{
  display:block;
  margin-bottom:5px;
  color:rgba(211,223,230,.68);
  font-size:9px;
}

.admin-ktr-filter-grid select{
  width:100%;
  min-height:38px;
  padding:0 10px;
  border:1px solid rgba(92,165,212,.22);
  border-radius:7px;
  color:#e9f0f4;
  background:#0b1823;
  font-size:10px;
}

/* TABLE */

.admin-ktr-table{
  margin:0 12px;
  overflow:hidden;
  border:1px solid rgba(92,165,212,.18);
  border-radius:8px;
}

.admin-ktr-table .head{
  min-width:1220px;
  min-height:50px;
  display:grid;
  grid-template-columns:42px .8fr .92fr .9fr 1.1fr .9fr .8fr 1.1fr .78fr .82fr .75fr;
  align-items:center;
  background:rgba(13,35,50,.78);
  border-bottom:1px solid rgba(92,165,212,.16);
  color:#dce6eb;
  font-size:9.3px;
}

.admin-ktr-table .head > span{
  height:100%;
  padding:0 9px;
  display:flex;
  align-items:center;
  border-right:1px solid rgba(255,255,255,.05);
}

.admin-ktr-empty{
  min-height:245px;
  display:grid;
  place-items:center;
  align-content:center;
  text-align:center;
  background:
    radial-gradient(circle at 50% 45%,rgba(54,117,156,.08),transparent 36%);
}

.admin-ktr-empty > span{
  color:#9ea8ff;
  font-size:58px;
}

.admin-ktr-empty strong{
  margin-top:9px;
  font-size:18px;
  letter-spacing:.08em;
}

.admin-ktr-empty p{
  margin:8px 0 2px;
  color:#dce5ea;
  font-size:12px;
}

.admin-ktr-empty small{
  color:rgba(202,215,224,.58);
  font-size:9.5px;
}

/* FOOTER */

.admin-ktr-footer{
  min-height:54px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:rgba(206,219,227,.62);
  font-size:9.5px;
}

.admin-ktr-footer > div{
  display:flex;
  align-items:center;
  gap:7px;
}

.admin-ktr-footer button,
.admin-ktr-footer select{
  min-height:32px;
  border:1px solid rgba(92,165,212,.20);
  border-radius:6px;
  color:#dce6eb;
  background:#0b1823;
  font-size:9px;
}

.admin-ktr-footer button{
  min-width:32px;
}

.admin-ktr-footer select{
  padding:0 10px;
}

/* RESPONSIVE */

@media (max-width:1250px){
  #adminKycTaxRiskView .admin-shell{
    grid-template-columns:230px minmax(0,1fr);
  }

  .admin-ktr-kpi-grid{
    grid-template-columns:1fr 1fr;
  }

  .admin-ktr-filter-grid{
    grid-template-columns:1fr 1fr 1fr;
  }
}

@media (max-width:1000px){
  #adminKycTaxRiskView .admin-shell{
    grid-template-columns:1fr;
  }

  #adminKycTaxRiskView .admin-sidebar{
    display:none;
  }

  .admin-ktr-search-row{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .admin-ktr-content{
    width:calc(100% - 28px);
  }

  #adminKycTaxRiskView .admin-top-actions{
    display:none;
  }

  #adminKycTaxRiskView .admin-search{
    width:100%;
  }

  .admin-ktr-hero{
    flex-direction:column;
    align-items:flex-start;
  }

  .admin-ktr-hero h1{
    font-size:32px;
  }

  .admin-ktr-kpi-grid,
  .admin-ktr-filter-grid{
    grid-template-columns:1fr;
  }

  .admin-ktr-manifesto{
    min-width:0;
  }

  .admin-ktr-footer{
    flex-direction:column;
    align-items:flex-start;
    padding:10px 12px;
  }
}


/* =========================================================
   SCREEN 43 — ADM FINANCIAL
   ========================================================= */

body:has(#adminFinancialView.active) > .topbar{
  display:none;
}

body:has(#adminFinancialView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#adminFinancialView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 82% 7%,rgba(28,122,188,.08),transparent 28%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#adminFinancialView.active{
  display:block;
}

#adminFinancialView .admin-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:278px minmax(0,1fr);
}

/* SIDEBAR */

#adminFinancialView .admin-sidebar{
  min-height:100vh;
  padding:20px 20px 24px;
  border-right:1px solid rgba(87,173,228,.18);
  background:#06101a;
}

#adminFinancialView .admin-brand{
  min-height:74px;
  padding:0 10px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.07);
}

#adminFinancialView .admin-brand strong{
  color:#f0bd50;
  font-size:24px;
}

#adminFinancialView .admin-brand span{
  margin-top:4px;
  color:#d4dde4;
  font-size:8px;
  letter-spacing:.28em;
}

#adminFinancialView .admin-nav-label{
  display:block;
  margin:20px 10px 9px;
  color:#dce5ea;
  font-size:10px;
  letter-spacing:.24em;
}

#adminFinancialView .admin-nav{
  display:grid;
  gap:4px;
}

#adminFinancialView .admin-nav-item{
  width:100%;
  min-height:44px;
  padding:0 12px;
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  border:1px solid transparent;
  border-radius:10px;
  color:#d8e2e8;
  background:transparent;
  text-align:left;
}

#adminFinancialView .admin-nav-item > span{
  font-size:20px;
}

#adminFinancialView .admin-nav-item strong{
  display:block;
  font-size:13px;
}

#adminFinancialView .admin-nav-item small{
  display:block;
  margin-top:2px;
  color:rgba(203,216,225,.48);
  font-size:8px;
}

#adminFinancialView .admin-nav-item.active{
  border-color:rgba(239,177,63,.70);
  background:
    linear-gradient(90deg,rgba(239,177,63,.22),rgba(239,177,63,.04));
  box-shadow:0 0 18px rgba(239,177,63,.10);
}

#adminFinancialView .admin-nav-item.active > span{
  color:#f0b63f;
}

#adminFinancialView .admin-sidebar-vision{
  margin-top:18px;
  min-height:198px;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid rgba(92,165,212,.16);
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(5,15,25,.18),rgba(5,15,25,.62)),
    url("./assets/customer/home/hero-customer-home.webp") center / cover no-repeat;
}

#adminFinancialView .admin-sidebar-vision span{
  color:#f1f4f6;
  font-size:10px;
  line-height:1.55;
  letter-spacing:.18em;
}

#adminFinancialView .admin-sidebar-vision small{
  margin-top:18px;
  color:#d8e1e7;
  font-size:9px;
}

/* TOPBAR */

#adminFinancialView .admin-main{
  min-width:0;
}

#adminFinancialView .admin-topbar{
  min-height:84px;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid rgba(92,165,212,.12);
  background:rgba(4,11,18,.96);
}

#adminFinancialView .admin-search{
  width:min(730px,62%);
  min-height:48px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(92,165,212,.18);
  border-radius:12px;
  background:rgba(13,32,48,.66);
}

#adminFinancialView .admin-search input{
  width:100%;
  border:0;
  outline:0;
  color:#eaf0f4;
  background:transparent;
  font-size:13px;
}

#adminFinancialView .admin-top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

#adminFinancialView .admin-top-actions button{
  min-width:42px;
  height:42px;
  border:1px solid rgba(92,165,212,.16);
  border-radius:12px;
  color:#e1ebf0;
  background:rgba(10,24,36,.72);
}

#adminFinancialView .admin-user{
  display:flex;
  align-items:center;
  gap:10px;
}

#adminFinancialView .admin-avatar{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(180deg,#8cabd9,#436590);
}

#adminFinancialView .admin-user > div{
  display:flex;
  flex-direction:column;
}

#adminFinancialView .admin-user strong{
  font-size:13px;
}

#adminFinancialView .admin-user small{
  margin-top:3px;
  color:rgba(210,222,230,.58);
  font-size:9px;
}

/* CONTENT */

.admin-financial-content{
  width:min(1420px,calc(100% - 48px));
  margin:0 auto;
  padding:10px 0 26px;
}

.admin-financial-breadcrumb{
  min-height:28px;
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(202,215,224,.58);
  font-size:10px;
}

.admin-financial-breadcrumb strong{
  color:#6ed5ff;
}

/* HERO */

.admin-financial-hero{
  min-height:142px;
  padding:16px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-radius:14px;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(4,11,18,.98),rgba(4,11,18,.74) 38%,rgba(4,11,18,.12) 72%,rgba(4,11,18,.04)),
    url("./assets/customer/home/hero-customer-home.webp") center 46% / cover no-repeat;
}

.admin-financial-hero h1{
  margin:0;
  font-size:40px;
  line-height:1;
}

.admin-financial-hero > div:first-child > span{
  display:block;
  margin-top:5px;
  font-size:14px;
  letter-spacing:.18em;
}

.admin-financial-hero p{
  margin:7px 0 2px;
  font-size:12.5px;
  color:rgba(224,234,240,.82);
}

.admin-financial-hero small{
  color:rgba(203,218,227,.58);
  font-size:9.5px;
}

.admin-financial-manifesto{
  min-width:190px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.admin-financial-manifesto strong{
  color:#edf3f6;
  font-size:10px;
  letter-spacing:.12em;
}

/* KPI */

.admin-financial-kpi-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}

.admin-financial-kpi-grid article{
  min-height:108px;
  padding:14px;
  display:grid;
  grid-template-columns:54px 1fr;
  gap:10px;
  align-items:center;
  border:1px solid rgba(92,165,212,.18);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.admin-financial-kpi-grid article > span{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:14px;
  font-size:28px;
}

.admin-financial-kpi-grid strong,
.admin-financial-kpi-grid small,
.admin-financial-kpi-grid b{
  display:block;
}

.admin-financial-kpi-grid strong{
  font-size:11.5px;
}

.admin-financial-kpi-grid small{
  margin-top:2px;
  color:rgba(203,216,225,.52);
  font-size:8.5px;
}

.admin-financial-kpi-grid b{
  margin-top:8px;
  font-size:24px;
}

.admin-financial-kpi-grid .volume{
  border-color:rgba(239,177,63,.58);
}

.admin-financial-kpi-grid .volume > span{
  color:#f0b63f;
  background:rgba(239,177,63,.08);
}

.admin-financial-kpi-grid .commission{
  border-color:rgba(64,220,178,.52);
}

.admin-financial-kpi-grid .commission > span{
  color:#4eddb9;
  background:rgba(64,220,178,.08);
}

.admin-financial-kpi-grid .incentive{
  border-color:rgba(54,138,255,.52);
}

.admin-financial-kpi-grid .incentive > span{
  color:#58a1ff;
  background:rgba(54,138,255,.08);
}

.admin-financial-kpi-grid .settlement{
  border-color:rgba(172,88,239,.52);
}

.admin-financial-kpi-grid .settlement > span{
  color:#b97cff;
  background:rgba(172,88,239,.08);
}

/* DIRECTORY */

.admin-financial-directory{
  margin-top:8px;
  overflow:hidden;
  border:1px solid rgba(92,165,212,.17);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.admin-financial-search-row{
  padding:12px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 150px;
  gap:10px;
}

.admin-financial-search-row label{
  min-height:44px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(92,165,212,.22);
  border-radius:8px;
  background:#0b1823;
}

.admin-financial-search-row label > span{
  font-size:20px;
  color:#dce7ec;
}

.admin-financial-search-row input{
  width:100%;
  border:0;
  outline:0;
  color:#e9f0f4;
  background:transparent;
  font-size:11.5px;
}

.admin-financial-search-row > button{
  border:1px solid rgba(239,177,63,.72);
  border-radius:8px;
  color:#f0b63f;
  background:transparent;
  font-size:11px;
  font-weight:600;
}

/* FILTERS */

.admin-financial-filter-grid{
  padding:0 12px 12px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
}

.admin-financial-filter-grid label > small{
  display:block;
  margin-bottom:5px;
  color:rgba(211,223,230,.68);
  font-size:9px;
}

.admin-financial-filter-grid select{
  width:100%;
  min-height:38px;
  padding:0 10px;
  border:1px solid rgba(92,165,212,.22);
  border-radius:7px;
  color:#e9f0f4;
  background:#0b1823;
  font-size:10px;
}

/* TABLE */

.admin-financial-table{
  margin:0 12px;
  overflow:hidden;
  border:1px solid rgba(92,165,212,.18);
  border-radius:8px;
}

.admin-financial-table .head{
  min-width:1220px;
  min-height:50px;
  display:grid;
  grid-template-columns:42px .9fr .85fr 1.05fr .78fr 1fr .78fr .72fr .85fr .82fr .75fr;
  align-items:center;
  background:rgba(13,35,50,.78);
  border-bottom:1px solid rgba(92,165,212,.16);
  color:#dce6eb;
  font-size:9.3px;
}

.admin-financial-table .head > span{
  height:100%;
  padding:0 9px;
  display:flex;
  align-items:center;
  border-right:1px solid rgba(255,255,255,.05);
}

.admin-financial-empty{
  min-height:245px;
  display:grid;
  place-items:center;
  align-content:center;
  text-align:center;
  background:
    radial-gradient(circle at 50% 45%,rgba(54,117,156,.08),transparent 36%);
}

.admin-financial-empty > span{
  color:#9ea8ff;
  font-size:58px;
}

.admin-financial-empty strong{
  margin-top:9px;
  font-size:18px;
  letter-spacing:.08em;
}

.admin-financial-empty p{
  margin:8px 0 2px;
  color:#dce5ea;
  font-size:12px;
}

.admin-financial-empty small{
  color:rgba(202,215,224,.58);
  font-size:9.5px;
}

/* FOOTER */

.admin-financial-footer{
  min-height:54px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:rgba(206,219,227,.62);
  font-size:9.5px;
}

.admin-financial-footer > div{
  display:flex;
  align-items:center;
  gap:7px;
}

.admin-financial-footer button,
.admin-financial-footer select{
  min-height:32px;
  border:1px solid rgba(92,165,212,.20);
  border-radius:6px;
  color:#dce6eb;
  background:#0b1823;
  font-size:9px;
}

.admin-financial-footer button{
  min-width:32px;
}

.admin-financial-footer select{
  padding:0 10px;
}

/* RESPONSIVE */

@media (max-width:1250px){
  #adminFinancialView .admin-shell{
    grid-template-columns:230px minmax(0,1fr);
  }

  .admin-financial-kpi-grid{
    grid-template-columns:1fr 1fr;
  }

  .admin-financial-filter-grid{
    grid-template-columns:1fr 1fr 1fr;
  }
}

@media (max-width:1000px){
  #adminFinancialView .admin-shell{
    grid-template-columns:1fr;
  }

  #adminFinancialView .admin-sidebar{
    display:none;
  }

  .admin-financial-search-row{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .admin-financial-content{
    width:calc(100% - 28px);
  }

  #adminFinancialView .admin-top-actions{
    display:none;
  }

  #adminFinancialView .admin-search{
    width:100%;
  }

  .admin-financial-hero{
    flex-direction:column;
    align-items:flex-start;
  }

  .admin-financial-hero h1{
    font-size:32px;
  }

  .admin-financial-kpi-grid,
  .admin-financial-filter-grid{
    grid-template-columns:1fr;
  }

  .admin-financial-manifesto{
    min-width:0;
  }

  .admin-financial-footer{
    flex-direction:column;
    align-items:flex-start;
    padding:10px 12px;
  }
}


/* =========================================================
   SCREEN 44 — ADM GOVERNANCE
   ========================================================= */

body:has(#adminGovernanceView.active) > .topbar{
  display:none;
}

body:has(#adminGovernanceView.active) > .shell{
  width:100%;
  max-width:none;
  margin:0;
  min-height:100vh;
}

#adminGovernanceView{
  padding:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 82% 7%,rgba(28,122,188,.08),transparent 28%),
    linear-gradient(180deg,#06101a 0%,#050a10 100%);
}

#adminGovernanceView.active{
  display:block;
}

#adminGovernanceView .admin-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:278px minmax(0,1fr);
}

/* SIDEBAR */

#adminGovernanceView .admin-sidebar{
  min-height:100vh;
  padding:20px 20px 24px;
  border-right:1px solid rgba(87,173,228,.18);
  background:#06101a;
}

#adminGovernanceView .admin-brand{
  min-height:74px;
  padding:0 10px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-bottom:1px solid rgba(255,255,255,.07);
}

#adminGovernanceView .admin-brand strong{
  color:#f0bd50;
  font-size:24px;
}

#adminGovernanceView .admin-brand span{
  margin-top:4px;
  color:#d4dde4;
  font-size:8px;
  letter-spacing:.28em;
}

#adminGovernanceView .admin-nav-label{
  display:block;
  margin:20px 10px 9px;
  color:#dce5ea;
  font-size:10px;
  letter-spacing:.24em;
}

#adminGovernanceView .admin-nav{
  display:grid;
  gap:4px;
}

#adminGovernanceView .admin-nav-item{
  width:100%;
  min-height:44px;
  padding:0 12px;
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  border:1px solid transparent;
  border-radius:10px;
  color:#d8e2e8;
  background:transparent;
  text-align:left;
}

#adminGovernanceView .admin-nav-item > span{
  font-size:20px;
}

#adminGovernanceView .admin-nav-item strong{
  display:block;
  font-size:13px;
}

#adminGovernanceView .admin-nav-item small{
  display:block;
  margin-top:2px;
  color:rgba(203,216,225,.48);
  font-size:8px;
}

#adminGovernanceView .admin-nav-item.active{
  border-color:rgba(239,177,63,.70);
  background:
    linear-gradient(90deg,rgba(239,177,63,.22),rgba(239,177,63,.04));
  box-shadow:0 0 18px rgba(239,177,63,.10);
}

#adminGovernanceView .admin-nav-item.active > span{
  color:#f0b63f;
}

#adminGovernanceView .admin-sidebar-vision{
  margin-top:18px;
  min-height:198px;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid rgba(92,165,212,.16);
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(5,15,25,.18),rgba(5,15,25,.62)),
    url("./assets/customer/home/hero-customer-home.webp") center / cover no-repeat;
}

#adminGovernanceView .admin-sidebar-vision span{
  color:#f1f4f6;
  font-size:10px;
  line-height:1.55;
  letter-spacing:.18em;
}

#adminGovernanceView .admin-sidebar-vision small{
  margin-top:18px;
  color:#d8e1e7;
  font-size:9px;
}

/* TOPBAR */

#adminGovernanceView .admin-main{
  min-width:0;
}

#adminGovernanceView .admin-topbar{
  min-height:84px;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid rgba(92,165,212,.12);
  background:rgba(4,11,18,.96);
}

#adminGovernanceView .admin-search{
  width:min(730px,62%);
  min-height:48px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(92,165,212,.18);
  border-radius:12px;
  background:rgba(13,32,48,.66);
}

#adminGovernanceView .admin-search input{
  width:100%;
  border:0;
  outline:0;
  color:#eaf0f4;
  background:transparent;
  font-size:13px;
}

#adminGovernanceView .admin-top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

#adminGovernanceView .admin-top-actions button{
  min-width:42px;
  height:42px;
  border:1px solid rgba(92,165,212,.16);
  border-radius:12px;
  color:#e1ebf0;
  background:rgba(10,24,36,.72);
}

#adminGovernanceView .admin-user{
  display:flex;
  align-items:center;
  gap:10px;
}

#adminGovernanceView .admin-avatar{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(180deg,#8cabd9,#436590);
}

#adminGovernanceView .admin-user > div{
  display:flex;
  flex-direction:column;
}

#adminGovernanceView .admin-user strong{
  font-size:13px;
}

#adminGovernanceView .admin-user small{
  margin-top:3px;
  color:rgba(210,222,230,.58);
  font-size:9px;
}

/* CONTENT */

.admin-governance-content{
  width:min(1420px,calc(100% - 48px));
  margin:0 auto;
  padding:10px 0 26px;
}

.admin-governance-breadcrumb{
  min-height:28px;
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(202,215,224,.58);
  font-size:10px;
}

.admin-governance-breadcrumb strong{
  color:#6ed5ff;
}

/* HERO */

.admin-governance-hero{
  min-height:142px;
  padding:16px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-radius:14px;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(4,11,18,.98),rgba(4,11,18,.74) 38%,rgba(4,11,18,.12) 72%,rgba(4,11,18,.04)),
    url("./assets/customer/home/hero-customer-home.webp") center 46% / cover no-repeat;
}

.admin-governance-hero h1{
  margin:0;
  font-size:40px;
  line-height:1;
}

.admin-governance-hero > div:first-child > span{
  display:block;
  margin-top:5px;
  font-size:14px;
  letter-spacing:.18em;
}

.admin-governance-hero p{
  margin:7px 0 2px;
  font-size:12.5px;
  color:rgba(224,234,240,.82);
}

.admin-governance-hero small{
  color:rgba(203,218,227,.58);
  font-size:9.5px;
}

.admin-governance-manifesto{
  min-width:190px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.admin-governance-manifesto strong{
  color:#edf3f6;
  font-size:10px;
  letter-spacing:.12em;
}

/* KPI */

.admin-governance-kpi-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}

.admin-governance-kpi-grid article{
  min-height:108px;
  padding:14px;
  display:grid;
  grid-template-columns:54px 1fr;
  gap:10px;
  align-items:center;
  border:1px solid rgba(92,165,212,.18);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.admin-governance-kpi-grid article > span{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:14px;
  font-size:28px;
}

.admin-governance-kpi-grid strong,
.admin-governance-kpi-grid small,
.admin-governance-kpi-grid b{
  display:block;
}

.admin-governance-kpi-grid strong{
  font-size:11.5px;
}

.admin-governance-kpi-grid small{
  margin-top:2px;
  color:rgba(203,216,225,.52);
  font-size:8.5px;
}

.admin-governance-kpi-grid b{
  margin-top:8px;
  font-size:24px;
}

.admin-governance-kpi-grid .approval{
  border-color:rgba(239,177,63,.58);
}

.admin-governance-kpi-grid .approval > span{
  color:#f0b63f;
  background:rgba(239,177,63,.08);
}

.admin-governance-kpi-grid .review{
  border-color:rgba(64,220,178,.52);
}

.admin-governance-kpi-grid .review > span{
  color:#4eddb9;
  background:rgba(64,220,178,.08);
}

.admin-governance-kpi-grid .changes{
  border-color:rgba(54,138,255,.52);
}

.admin-governance-kpi-grid .changes > span{
  color:#58a1ff;
  background:rgba(54,138,255,.08);
}

.admin-governance-kpi-grid .audit{
  border-color:rgba(172,88,239,.52);
}

.admin-governance-kpi-grid .audit > span{
  color:#b97cff;
  background:rgba(172,88,239,.08);
}

/* DIRECTORY */

.admin-governance-directory{
  margin-top:8px;
  overflow:hidden;
  border:1px solid rgba(92,165,212,.17);
  border-radius:11px;
  background:rgba(8,18,28,.95);
}

.admin-governance-search-row{
  padding:12px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 150px;
  gap:10px;
}

.admin-governance-search-row label{
  min-height:44px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(92,165,212,.22);
  border-radius:8px;
  background:#0b1823;
}

.admin-governance-search-row label > span{
  font-size:20px;
  color:#dce7ec;
}

.admin-governance-search-row input{
  width:100%;
  border:0;
  outline:0;
  color:#e9f0f4;
  background:transparent;
  font-size:11.5px;
}

.admin-governance-search-row > button{
  border:1px solid rgba(239,177,63,.72);
  border-radius:8px;
  color:#f0b63f;
  background:transparent;
  font-size:11px;
  font-weight:600;
}

/* FILTERS */

.admin-governance-filter-grid{
  padding:0 12px 12px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
}

.admin-governance-filter-grid label > small{
  display:block;
  margin-bottom:5px;
  color:rgba(211,223,230,.68);
  font-size:9px;
}

.admin-governance-filter-grid select{
  width:100%;
  min-height:38px;
  padding:0 10px;
  border:1px solid rgba(92,165,212,.22);
  border-radius:7px;
  color:#e9f0f4;
  background:#0b1823;
  font-size:10px;
}

/* TABLE */

.admin-governance-table{
  margin:0 12px;
  overflow:hidden;
  border:1px solid rgba(92,165,212,.18);
  border-radius:8px;
}

.admin-governance-table .head{
  min-width:1240px;
  min-height:50px;
  display:grid;
  grid-template-columns:42px .95fr .9fr 1fr .86fr .75fr 1fr .78fr .98fr .82fr .72fr;
  align-items:center;
  background:rgba(13,35,50,.78);
  border-bottom:1px solid rgba(92,165,212,.16);
  color:#dce6eb;
  font-size:9.3px;
}

.admin-governance-table .head > span{
  height:100%;
  padding:0 9px;
  display:flex;
  align-items:center;
  border-right:1px solid rgba(255,255,255,.05);
}

.admin-governance-empty{
  min-height:245px;
  display:grid;
  place-items:center;
  align-content:center;
  text-align:center;
  background:
    radial-gradient(circle at 50% 45%,rgba(54,117,156,.08),transparent 36%);
}

.admin-governance-empty > span{
  color:#9ea8ff;
  font-size:58px;
}

.admin-governance-empty strong{
  margin-top:9px;
  font-size:18px;
  letter-spacing:.08em;
}

.admin-governance-empty p{
  margin:8px 0 2px;
  color:#dce5ea;
  font-size:12px;
}

.admin-governance-empty small{
  color:rgba(202,215,224,.58);
  font-size:9.5px;
}

/* FOOTER */

.admin-governance-footer{
  min-height:54px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:rgba(206,219,227,.62);
  font-size:9.5px;
}

.admin-governance-footer > div{
  display:flex;
  align-items:center;
  gap:7px;
}

.admin-governance-footer button,
.admin-governance-footer select{
  min-height:32px;
  border:1px solid rgba(92,165,212,.20);
  border-radius:6px;
  color:#dce6eb;
  background:#0b1823;
  font-size:9px;
}

.admin-governance-footer button{
  min-width:32px;
}

.admin-governance-footer select{
  padding:0 10px;
}

/* RESPONSIVE */

@media (max-width:1250px){
  #adminGovernanceView .admin-shell{
    grid-template-columns:230px minmax(0,1fr);
  }

  .admin-governance-kpi-grid{
    grid-template-columns:1fr 1fr;
  }

  .admin-governance-filter-grid{
    grid-template-columns:1fr 1fr 1fr;
  }
}

@media (max-width:1000px){
  #adminGovernanceView .admin-shell{
    grid-template-columns:1fr;
  }

  #adminGovernanceView .admin-sidebar{
    display:none;
  }

  .admin-governance-search-row{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .admin-governance-content{
    width:calc(100% - 28px);
  }

  #adminGovernanceView .admin-top-actions{
    display:none;
  }

  #adminGovernanceView .admin-search{
    width:100%;
  }

  .admin-governance-hero{
    flex-direction:column;
    align-items:flex-start;
  }

  .admin-governance-hero h1{
    font-size:32px;
  }

  .admin-governance-kpi-grid,
  .admin-governance-filter-grid{
    grid-template-columns:1fr;
  }

  .admin-governance-manifesto{
    min-width:0;
  }

  .admin-governance-footer{
    flex-direction:column;
    align-items:flex-start;
    padding:10px 12px;
  }
}


/* =========================================================
   BLS GLOBAL UI CONSISTENCY — PASS 2.1
   ADMIN CORE LAYER — SCREENS 35–44
   ========================================================= */

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
){
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:var(--bls-text);
}

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
) .admin-shell{
  min-height:100vh;
  grid-template-columns:var(--bls-sidebar-admin) minmax(0,1fr);
}

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
) .admin-sidebar{
  min-height:100vh;
  background:var(--bls-bg-soft);
  border-right:1px solid var(--bls-border);
}

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
) .admin-nav-item{
  min-height:var(--bls-control-lg);
  border-radius:var(--bls-radius-md);
}

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
) .admin-nav-item strong{
  font-size:var(--bls-fs-body);
}

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
) .admin-nav-item small{
  font-size:var(--bls-fs-xs);
}

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
) .admin-topbar{
  min-height:84px;
  padding:16px var(--bls-space-7);
  border-bottom:1px solid var(--bls-border);
}

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
) .admin-search{
  min-height:var(--bls-control-xl);
  border-radius:var(--bls-radius-lg);
}

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
) .admin-search input{
  font-size:var(--bls-fs-body);
}

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
) .admin-user strong{
  font-size:var(--bls-fs-body);
}

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
) .admin-user small{
  font-size:var(--bls-fs-sm);
}

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
) .admin-main{
  min-width:0;
}

@media (max-width:1250px){
  :is(
    #adminDashboardView,
    #adminCustomerPartnerView,
    #adminProductPolicyView,
    #adminOrderView,
    #adminPaymentView,
    #adminBenefitCommissionView,
    #adminPerformanceView,
    #adminKycTaxRiskView,
    #adminFinancialView,
    #adminGovernanceView
  ) .admin-shell{
    grid-template-columns:var(--bls-sidebar-compact) minmax(0,1fr);
  }
}

@media (max-width:1000px){
  :is(
    #adminDashboardView,
    #adminCustomerPartnerView,
    #adminProductPolicyView,
    #adminOrderView,
    #adminPaymentView,
    #adminBenefitCommissionView,
    #adminPerformanceView,
    #adminKycTaxRiskView,
    #adminFinancialView,
    #adminGovernanceView
  ) .admin-shell{
    grid-template-columns:1fr;
  }

  :is(
    #adminDashboardView,
    #adminCustomerPartnerView,
    #adminProductPolicyView,
    #adminOrderView,
    #adminPaymentView,
    #adminBenefitCommissionView,
    #adminPerformanceView,
    #adminKycTaxRiskView,
    #adminFinancialView,
    #adminGovernanceView
  ) .admin-sidebar{
    display:none;
  }
}


/* =========================================================
   BLS GLOBAL UI CONSISTENCY — PASS 2.2
   ADMIN HERO + KPI — SCREENS 35–44
   ========================================================= */

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
) [class*="admin-"][class*="-hero"]{
  min-height:142px;
  border-radius:var(--bls-radius-xl);
}

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
) [class*="admin-"][class*="-hero"] h1{
  margin:0;
  font-size:var(--bls-fs-title);
  line-height:1;
}

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
) [class*="admin-"][class*="-hero"] p{
  font-size:12.5px;
  line-height:1.45;
}

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
) [class*="admin-"][class*="-hero"] small{
  font-size:var(--bls-fs-sm);
  line-height:1.4;
}

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
) [class*="admin-"][class*="-kpi"]{
  margin-top:var(--bls-space-2);
  gap:var(--bls-space-2);
}

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
) [class*="admin-"][class*="-kpi"] article{
  min-height:108px;
  border-radius:11px;
}

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
) [class*="admin-"][class*="-kpi"] article strong{
  font-size:var(--bls-fs-body-sm);
  line-height:1.25;
}

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
) [class*="admin-"][class*="-kpi"] article small{
  font-size:var(--bls-fs-xs);
  line-height:1.25;
}

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
) [class*="admin-"][class*="-kpi"] article b{
  font-size:var(--bls-fs-kpi);
  line-height:1;
}

@media (max-width:760px){
  :is(
    #adminDashboardView,
    #adminCustomerPartnerView,
    #adminProductPolicyView,
    #adminOrderView,
    #adminPaymentView,
    #adminBenefitCommissionView,
    #adminPerformanceView,
    #adminKycTaxRiskView,
    #adminFinancialView,
    #adminGovernanceView
  ) [class*="admin-"][class*="-hero"] h1{
    font-size:32px;
  }
}


/* =========================================================
   BLS GLOBAL UI CONSISTENCY — PASS 2.3
   ADMIN SEARCH / FILTER / TABLE / PAGINATION
   SCREENS 35–44
   ========================================================= */

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
) [class*="search-row"]{
  gap:var(--bls-space-3);
}

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
) [class*="search-row"] label{
  min-height:var(--bls-control-lg);
  border-radius:var(--bls-radius-sm);
}

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
) [class*="search-row"] input{
  font-size:var(--bls-fs-body-sm);
}

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
) [class*="search-row"] > button{
  min-height:var(--bls-control-lg);
  border-radius:var(--bls-radius-sm);
  font-size:var(--bls-fs-body-sm);
}

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
) [class*="filter-grid"]{
  gap:var(--bls-space-2);
}

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
) [class*="filter-grid"] label > small{
  font-size:var(--bls-fs-meta);
  color:rgba(220,229,234,.68);
}

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
) [class*="filter-grid"] select{
  min-height:var(--bls-control-md);
  border-radius:7px;
  font-size:var(--bls-fs-meta);
}

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
) [class*="-directory"]{
  border-radius:11px;
}

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
) [class*="-table"]{
  border-radius:var(--bls-radius-sm);
}

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
) [class*="-table"] .head{
  min-height:50px;
  font-size:var(--bls-fs-sm);
  letter-spacing:.01em;
}

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
) [class*="-empty"] strong{
  font-size:var(--bls-fs-section);
}

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
) [class*="-empty"] p{
  font-size:12px;
}

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
) [class*="-empty"] small{
  font-size:var(--bls-fs-sm);
}

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
) [class*="-footer"]{
  min-height:54px;
  font-size:var(--bls-fs-sm);
}

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
) [class*="-footer"] button{
  min-height:var(--bls-control-sm);
  min-width:32px;
  border-radius:6px;
}

:is(
  #adminDashboardView,
  #adminCustomerPartnerView,
  #adminProductPolicyView,
  #adminOrderView,
  #adminPaymentView,
  #adminBenefitCommissionView,
  #adminPerformanceView,
  #adminKycTaxRiskView,
  #adminFinancialView,
  #adminGovernanceView
) [class*="-footer"] select{
  min-height:var(--bls-control-sm);
  border-radius:6px;
  font-size:var(--bls-fs-meta);
}


/* =========================================================
   BLS GLOBAL UI CONSISTENCY — PASS 3.1
   PARTNER CORE LAYER — SCREENS 20–34
   ========================================================= */

:is(
  #partnerHomeView,
  #partnerBenefitsView,
  #partnerReferralView,
  #partnerReferralDetailView,
  #partnerPerformanceView,
  #partnerCommissionView,
  #partnerCommissionDetailView,
  #partnerIncentivesView,
  #partnerIncentiveDetailView,
  #partnerWithdrawableView,
  #partnerWithdrawalView,
  #partnerKycTaxView,
  #partnerPaymentMethodView,
  #partnerSettlementHistoryView
){
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:var(--bls-text);
}

:is(
  #partnerHomeView,
  #partnerBenefitsView,
  #partnerReferralView,
  #partnerReferralDetailView,
  #partnerPerformanceView,
  #partnerCommissionView,
  #partnerCommissionDetailView,
  #partnerIncentivesView,
  #partnerIncentiveDetailView,
  #partnerWithdrawableView,
  #partnerWithdrawalView,
  #partnerKycTaxView,
  #partnerPaymentMethodView,
  #partnerSettlementHistoryView
) .partner-shell{
  min-height:100vh;
  grid-template-columns:278px minmax(0,1fr);
}

:is(
  #partnerHomeView,
  #partnerBenefitsView,
  #partnerReferralView,
  #partnerReferralDetailView,
  #partnerPerformanceView,
  #partnerCommissionView,
  #partnerCommissionDetailView,
  #partnerIncentivesView,
  #partnerIncentiveDetailView,
  #partnerWithdrawableView,
  #partnerWithdrawalView,
  #partnerKycTaxView,
  #partnerPaymentMethodView,
  #partnerSettlementHistoryView
) .partner-sidebar{
  min-height:100vh;
  background:var(--bls-bg-soft);
  border-right:1px solid var(--bls-border);
}

:is(
  #partnerHomeView,
  #partnerBenefitsView,
  #partnerReferralView,
  #partnerReferralDetailView,
  #partnerPerformanceView,
  #partnerCommissionView,
  #partnerCommissionDetailView,
  #partnerIncentivesView,
  #partnerIncentiveDetailView,
  #partnerWithdrawableView,
  #partnerWithdrawalView,
  #partnerKycTaxView,
  #partnerPaymentMethodView,
  #partnerSettlementHistoryView
) .partner-nav-item{
  min-height:var(--bls-control-lg);
  border-radius:var(--bls-radius-md);
}

:is(
  #partnerHomeView,
  #partnerBenefitsView,
  #partnerReferralView,
  #partnerReferralDetailView,
  #partnerPerformanceView,
  #partnerCommissionView,
  #partnerCommissionDetailView,
  #partnerIncentivesView,
  #partnerIncentiveDetailView,
  #partnerWithdrawableView,
  #partnerWithdrawalView,
  #partnerKycTaxView,
  #partnerPaymentMethodView,
  #partnerSettlementHistoryView
) .partner-nav-item strong{
  font-size:var(--bls-fs-body);
}

:is(
  #partnerHomeView,
  #partnerBenefitsView,
  #partnerReferralView,
  #partnerReferralDetailView,
  #partnerPerformanceView,
  #partnerCommissionView,
  #partnerCommissionDetailView,
  #partnerIncentivesView,
  #partnerIncentiveDetailView,
  #partnerWithdrawableView,
  #partnerWithdrawalView,
  #partnerKycTaxView,
  #partnerPaymentMethodView,
  #partnerSettlementHistoryView
) .partner-nav-item small{
  font-size:var(--bls-fs-xs);
}

:is(
  #partnerHomeView,
  #partnerBenefitsView,
  #partnerReferralView,
  #partnerReferralDetailView,
  #partnerPerformanceView,
  #partnerCommissionView,
  #partnerCommissionDetailView,
  #partnerIncentivesView,
  #partnerIncentiveDetailView,
  #partnerWithdrawableView,
  #partnerWithdrawalView,
  #partnerKycTaxView,
  #partnerPaymentMethodView,
  #partnerSettlementHistoryView
) .partner-topbar{
  min-height:84px;
  padding:16px var(--bls-space-7);
  border-bottom:1px solid var(--bls-border);
}

:is(
  #partnerHomeView,
  #partnerBenefitsView,
  #partnerReferralView,
  #partnerReferralDetailView,
  #partnerPerformanceView,
  #partnerCommissionView,
  #partnerCommissionDetailView,
  #partnerIncentivesView,
  #partnerIncentiveDetailView,
  #partnerWithdrawableView,
  #partnerWithdrawalView,
  #partnerKycTaxView,
  #partnerPaymentMethodView,
  #partnerSettlementHistoryView
) .partner-search{
  min-height:var(--bls-control-xl);
  border-radius:var(--bls-radius-lg);
}

:is(
  #partnerHomeView,
  #partnerBenefitsView,
  #partnerReferralView,
  #partnerReferralDetailView,
  #partnerPerformanceView,
  #partnerCommissionView,
  #partnerCommissionDetailView,
  #partnerIncentivesView,
  #partnerIncentiveDetailView,
  #partnerWithdrawableView,
  #partnerWithdrawalView,
  #partnerKycTaxView,
  #partnerPaymentMethodView,
  #partnerSettlementHistoryView
) .partner-search input{
  font-size:var(--bls-fs-body);
}

:is(
  #partnerHomeView,
  #partnerBenefitsView,
  #partnerReferralView,
  #partnerReferralDetailView,
  #partnerPerformanceView,
  #partnerCommissionView,
  #partnerCommissionDetailView,
  #partnerIncentivesView,
  #partnerIncentiveDetailView,
  #partnerWithdrawableView,
  #partnerWithdrawalView,
  #partnerKycTaxView,
  #partnerPaymentMethodView,
  #partnerSettlementHistoryView
) .partner-user strong{
  font-size:var(--bls-fs-body);
}

:is(
  #partnerHomeView,
  #partnerBenefitsView,
  #partnerReferralView,
  #partnerReferralDetailView,
  #partnerPerformanceView,
  #partnerCommissionView,
  #partnerCommissionDetailView,
  #partnerIncentivesView,
  #partnerIncentiveDetailView,
  #partnerWithdrawableView,
  #partnerWithdrawalView,
  #partnerKycTaxView,
  #partnerPaymentMethodView,
  #partnerSettlementHistoryView
) .partner-user small{
  font-size:var(--bls-fs-sm);
}

@media (max-width:1250px){
  :is(
    #partnerHomeView,
    #partnerBenefitsView,
    #partnerReferralView,
    #partnerReferralDetailView,
    #partnerPerformanceView,
    #partnerCommissionView,
    #partnerCommissionDetailView,
    #partnerIncentivesView,
    #partnerIncentiveDetailView,
    #partnerWithdrawableView,
    #partnerWithdrawalView,
    #partnerKycTaxView,
    #partnerPaymentMethodView,
    #partnerSettlementHistoryView
  ) .partner-shell{
    grid-template-columns:230px minmax(0,1fr);
  }
}

@media (max-width:1000px){
  :is(
    #partnerHomeView,
    #partnerBenefitsView,
    #partnerReferralView,
    #partnerReferralDetailView,
    #partnerPerformanceView,
    #partnerCommissionView,
    #partnerCommissionDetailView,
    #partnerIncentivesView,
    #partnerIncentiveDetailView,
    #partnerWithdrawableView,
    #partnerWithdrawalView,
    #partnerKycTaxView,
    #partnerPaymentMethodView,
    #partnerSettlementHistoryView
  ) .partner-shell{
    grid-template-columns:1fr;
  }

  :is(
    #partnerHomeView,
    #partnerBenefitsView,
    #partnerReferralView,
    #partnerReferralDetailView,
    #partnerPerformanceView,
    #partnerCommissionView,
    #partnerCommissionDetailView,
    #partnerIncentivesView,
    #partnerIncentiveDetailView,
    #partnerWithdrawableView,
    #partnerWithdrawalView,
    #partnerKycTaxView,
    #partnerPaymentMethodView,
    #partnerSettlementHistoryView
  ) .partner-sidebar{
    display:none;
  }
}


/* =========================================================
   BLS GLOBAL UI CONSISTENCY — PASS 3.2
   PARTNER HERO + KPI — SCREENS 20–34
   ========================================================= */

:is(
  #partnerHomeView,
  #partnerBenefitsView,
  #partnerReferralView,
  #partnerReferralDetailView,
  #partnerPerformanceView,
  #partnerCommissionView,
  #partnerCommissionDetailView,
  #partnerIncentivesView,
  #partnerIncentiveDetailView,
  #partnerWithdrawableView,
  #partnerWithdrawalView,
  #partnerKycTaxView,
  #partnerPaymentMethodView,
  #partnerSettlementHistoryView
) [class*="partner-"][class*="-hero"]{
  min-height:142px;
  border-radius:var(--bls-radius-xl);
}

:is(
  #partnerHomeView,
  #partnerBenefitsView,
  #partnerReferralView,
  #partnerReferralDetailView,
  #partnerPerformanceView,
  #partnerCommissionView,
  #partnerCommissionDetailView,
  #partnerIncentivesView,
  #partnerIncentiveDetailView,
  #partnerWithdrawableView,
  #partnerWithdrawalView,
  #partnerKycTaxView,
  #partnerPaymentMethodView,
  #partnerSettlementHistoryView
) [class*="partner-"][class*="-hero"] h1{
  margin:0;
  font-size:var(--bls-fs-title);
  line-height:1;
}

:is(
  #partnerHomeView,
  #partnerBenefitsView,
  #partnerReferralView,
  #partnerReferralDetailView,
  #partnerPerformanceView,
  #partnerCommissionView,
  #partnerCommissionDetailView,
  #partnerIncentivesView,
  #partnerIncentiveDetailView,
  #partnerWithdrawableView,
  #partnerWithdrawalView,
  #partnerKycTaxView,
  #partnerPaymentMethodView,
  #partnerSettlementHistoryView
) [class*="partner-"][class*="-hero"] p{
  font-size:12.5px;
  line-height:1.45;
}

:is(
  #partnerHomeView,
  #partnerBenefitsView,
  #partnerReferralView,
  #partnerReferralDetailView,
  #partnerPerformanceView,
  #partnerCommissionView,
  #partnerCommissionDetailView,
  #partnerIncentivesView,
  #partnerIncentiveDetailView,
  #partnerWithdrawableView,
  #partnerWithdrawalView,
  #partnerKycTaxView,
  #partnerPaymentMethodView,
  #partnerSettlementHistoryView
) [class*="partner-"][class*="-hero"] small{
  font-size:var(--bls-fs-sm);
  line-height:1.4;
}

:is(
  #partnerHomeView,
  #partnerBenefitsView,
  #partnerReferralView,
  #partnerReferralDetailView,
  #partnerPerformanceView,
  #partnerCommissionView,
  #partnerCommissionDetailView,
  #partnerIncentivesView,
  #partnerIncentiveDetailView,
  #partnerWithdrawableView,
  #partnerWithdrawalView,
  #partnerKycTaxView,
  #partnerPaymentMethodView,
  #partnerSettlementHistoryView
) [class*="partner-"][class*="-kpi"]{
  margin-top:var(--bls-space-2);
  gap:var(--bls-space-2);
}

:is(
  #partnerHomeView,
  #partnerBenefitsView,
  #partnerReferralView,
  #partnerReferralDetailView,
  #partnerPerformanceView,
  #partnerCommissionView,
  #partnerCommissionDetailView,
  #partnerIncentivesView,
  #partnerIncentiveDetailView,
  #partnerWithdrawableView,
  #partnerWithdrawalView,
  #partnerKycTaxView,
  #partnerPaymentMethodView,
  #partnerSettlementHistoryView
) [class*="partner-"][class*="-kpi"] article{
  min-height:108px;
  border-radius:11px;
}

:is(
  #partnerHomeView,
  #partnerBenefitsView,
  #partnerReferralView,
  #partnerReferralDetailView,
  #partnerPerformanceView,
  #partnerCommissionView,
  #partnerCommissionDetailView,
  #partnerIncentivesView,
  #partnerIncentiveDetailView,
  #partnerWithdrawableView,
  #partnerWithdrawalView,
  #partnerKycTaxView,
  #partnerPaymentMethodView,
  #partnerSettlementHistoryView
) [class*="partner-"][class*="-kpi"] article strong{
  font-size:var(--bls-fs-body-sm);
  line-height:1.25;
}

:is(
  #partnerHomeView,
  #partnerBenefitsView,
  #partnerReferralView,
  #partnerReferralDetailView,
  #partnerPerformanceView,
  #partnerCommissionView,
  #partnerCommissionDetailView,
  #partnerIncentivesView,
  #partnerIncentiveDetailView,
  #partnerWithdrawableView,
  #partnerWithdrawalView,
  #partnerKycTaxView,
  #partnerPaymentMethodView,
  #partnerSettlementHistoryView
) [class*="partner-"][class*="-kpi"] article small{
  font-size:var(--bls-fs-xs);
  line-height:1.25;
}

:is(
  #partnerHomeView,
  #partnerBenefitsView,
  #partnerReferralView,
  #partnerReferralDetailView,
  #partnerPerformanceView,
  #partnerCommissionView,
  #partnerCommissionDetailView,
  #partnerIncentivesView,
  #partnerIncentiveDetailView,
  #partnerWithdrawableView,
  #partnerWithdrawalView,
  #partnerKycTaxView,
  #partnerPaymentMethodView,
  #partnerSettlementHistoryView
) [class*="partner-"][class*="-kpi"] article b{
  font-size:var(--bls-fs-kpi);
  line-height:1;
}

@media (max-width:760px){
  :is(
    #partnerHomeView,
    #partnerBenefitsView,
    #partnerReferralView,
    #partnerReferralDetailView,
    #partnerPerformanceView,
    #partnerCommissionView,
    #partnerCommissionDetailView,
    #partnerIncentivesView,
    #partnerIncentiveDetailView,
    #partnerWithdrawableView,
    #partnerWithdrawalView,
    #partnerKycTaxView,
    #partnerPaymentMethodView,
    #partnerSettlementHistoryView
  ) [class*="partner-"][class*="-hero"] h1{
    font-size:32px;
  }
}


/* =========================================================
   BLS GLOBAL UI CONSISTENCY — PASS 3.3
   PARTNER DATA / DETAIL / FINANCIAL BLOCKS
   SCREENS 20–34
   ========================================================= */

:is(
  #partnerHomeView,
  #partnerBenefitsView,
  #partnerReferralView,
  #partnerReferralDetailView,
  #partnerPerformanceView,
  #partnerCommissionView,
  #partnerCommissionDetailView,
  #partnerIncentivesView,
  #partnerIncentiveDetailView,
  #partnerWithdrawableView,
  #partnerWithdrawalView,
  #partnerKycTaxView,
  #partnerPaymentMethodView,
  #partnerSettlementHistoryView
) [class*="-table"]{
  border-radius:var(--bls-radius-sm);
}

:is(
  #partnerHomeView,
  #partnerBenefitsView,
  #partnerReferralView,
  #partnerReferralDetailView,
  #partnerPerformanceView,
  #partnerCommissionView,
  #partnerCommissionDetailView,
  #partnerIncentivesView,
  #partnerIncentiveDetailView,
  #partnerWithdrawableView,
  #partnerWithdrawalView,
  #partnerKycTaxView,
  #partnerPaymentMethodView,
  #partnerSettlementHistoryView
) [class*="-table"] .head{
  min-height:50px;
  font-size:var(--bls-fs-sm);
}

:is(
  #partnerHomeView,
  #partnerBenefitsView,
  #partnerReferralView,
  #partnerReferralDetailView,
  #partnerPerformanceView,
  #partnerCommissionView,
  #partnerCommissionDetailView,
  #partnerIncentivesView,
  #partnerIncentiveDetailView,
  #partnerWithdrawableView,
  #partnerWithdrawalView,
  #partnerKycTaxView,
  #partnerPaymentMethodView,
  #partnerSettlementHistoryView
) [class*="-panel"],
:is(
  #partnerHomeView,
  #partnerBenefitsView,
  #partnerReferralView,
  #partnerReferralDetailView,
  #partnerPerformanceView,
  #partnerCommissionView,
  #partnerCommissionDetailView,
  #partnerIncentivesView,
  #partnerIncentiveDetailView,
  #partnerWithdrawableView,
  #partnerWithdrawalView,
  #partnerKycTaxView,
  #partnerPaymentMethodView,
  #partnerSettlementHistoryView
) [class*="-card"]{
  border-radius:var(--bls-radius-lg);
}

:is(
  #partnerHomeView,
  #partnerBenefitsView,
  #partnerReferralView,
  #partnerReferralDetailView,
  #partnerPerformanceView,
  #partnerCommissionView,
  #partnerCommissionDetailView,
  #partnerIncentivesView,
  #partnerIncentiveDetailView,
  #partnerWithdrawableView,
  #partnerWithdrawalView,
  #partnerKycTaxView,
  #partnerPaymentMethodView,
  #partnerSettlementHistoryView
) [class*="-empty"] strong{
  font-size:var(--bls-fs-section);
}

:is(
  #partnerHomeView,
  #partnerBenefitsView,
  #partnerReferralView,
  #partnerReferralDetailView,
  #partnerPerformanceView,
  #partnerCommissionView,
  #partnerCommissionDetailView,
  #partnerIncentivesView,
  #partnerIncentiveDetailView,
  #partnerWithdrawableView,
  #partnerWithdrawalView,
  #partnerKycTaxView,
  #partnerPaymentMethodView,
  #partnerSettlementHistoryView
) [class*="-empty"] p{
  font-size:12px;
}

:is(
  #partnerHomeView,
  #partnerBenefitsView,
  #partnerReferralView,
  #partnerReferralDetailView,
  #partnerPerformanceView,
  #partnerCommissionView,
  #partnerCommissionDetailView,
  #partnerIncentivesView,
  #partnerIncentiveDetailView,
  #partnerWithdrawableView,
  #partnerWithdrawalView,
  #partnerKycTaxView,
  #partnerPaymentMethodView,
  #partnerSettlementHistoryView
) [class*="-empty"] small{
  font-size:var(--bls-fs-sm);
}

:is(
  #partnerHomeView,
  #partnerBenefitsView,
  #partnerReferralView,
  #partnerReferralDetailView,
  #partnerPerformanceView,
  #partnerCommissionView,
  #partnerCommissionDetailView,
  #partnerIncentivesView,
  #partnerIncentiveDetailView,
  #partnerWithdrawableView,
  #partnerWithdrawalView,
  #partnerKycTaxView,
  #partnerPaymentMethodView,
  #partnerSettlementHistoryView
) [class*="-footer"]{
  min-height:54px;
  font-size:var(--bls-fs-sm);
}

:is(
  #partnerHomeView,
  #partnerBenefitsView,
  #partnerReferralView,
  #partnerReferralDetailView,
  #partnerPerformanceView,
  #partnerCommissionView,
  #partnerCommissionDetailView,
  #partnerIncentivesView,
  #partnerIncentiveDetailView,
  #partnerWithdrawableView,
  #partnerWithdrawalView,
  #partnerKycTaxView,
  #partnerPaymentMethodView,
  #partnerSettlementHistoryView
) button{
  border-radius:var(--bls-radius-sm);
}

:is(
  #partnerHomeView,
  #partnerBenefitsView,
  #partnerReferralView,
  #partnerReferralDetailView,
  #partnerPerformanceView,
  #partnerCommissionView,
  #partnerCommissionDetailView,
  #partnerIncentivesView,
  #partnerIncentiveDetailView,
  #partnerWithdrawableView,
  #partnerWithdrawalView,
  #partnerKycTaxView,
  #partnerPaymentMethodView,
  #partnerSettlementHistoryView
) select,
:is(
  #partnerHomeView,
  #partnerBenefitsView,
  #partnerReferralView,
  #partnerReferralDetailView,
  #partnerPerformanceView,
  #partnerCommissionView,
  #partnerCommissionDetailView,
  #partnerIncentivesView,
  #partnerIncentiveDetailView,
  #partnerWithdrawableView,
  #partnerWithdrawalView,
  #partnerKycTaxView,
  #partnerPaymentMethodView,
  #partnerSettlementHistoryView
) input{
  border-radius:var(--bls-radius-sm);
}


/* =========================================================
   BLS GLOBAL UI CONSISTENCY — PASS 4.1
   CUSTOMER CORE LAYER — SCREENS 06–19
   ========================================================= */

:is(
  #customerHomeView,
  #productDiscoveryView,
  #productDetailView,
  #orderReviewView,
  #paymentView,
  #paymentProcessingView,
  #orderConfirmationView,
  #myBenefitsView,
  #benefitDetailView,
  #benefitHistoryView,
  #myPurchasesView,
  #orderDetailView,
  #profileView,
  #accountSecurityView
){
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:var(--bls-text);
}

:is(
  #customerHomeView,
  #productDiscoveryView,
  #productDetailView,
  #orderReviewView,
  #paymentView,
  #paymentProcessingView,
  #orderConfirmationView,
  #myBenefitsView,
  #benefitDetailView,
  #benefitHistoryView,
  #myPurchasesView,
  #orderDetailView,
  #profileView,
  #accountSecurityView
) .customer-shell{
  min-height:100vh;
  grid-template-columns:278px minmax(0,1fr);
}

:is(
  #customerHomeView,
  #productDiscoveryView,
  #productDetailView,
  #orderReviewView,
  #paymentView,
  #paymentProcessingView,
  #orderConfirmationView,
  #myBenefitsView,
  #benefitDetailView,
  #benefitHistoryView,
  #myPurchasesView,
  #orderDetailView,
  #profileView,
  #accountSecurityView
) .customer-sidebar{
  min-height:100vh;
  background:var(--bls-bg-soft);
  border-right:1px solid var(--bls-border);
}

:is(
  #customerHomeView,
  #productDiscoveryView,
  #productDetailView,
  #orderReviewView,
  #paymentView,
  #paymentProcessingView,
  #orderConfirmationView,
  #myBenefitsView,
  #benefitDetailView,
  #benefitHistoryView,
  #myPurchasesView,
  #orderDetailView,
  #profileView,
  #accountSecurityView
) .customer-nav-item{
  min-height:var(--bls-control-lg);
  border-radius:var(--bls-radius-md);
}

:is(
  #customerHomeView,
  #productDiscoveryView,
  #productDetailView,
  #orderReviewView,
  #paymentView,
  #paymentProcessingView,
  #orderConfirmationView,
  #myBenefitsView,
  #benefitDetailView,
  #benefitHistoryView,
  #myPurchasesView,
  #orderDetailView,
  #profileView,
  #accountSecurityView
) .customer-nav-item strong{
  font-size:var(--bls-fs-body);
}

:is(
  #customerHomeView,
  #productDiscoveryView,
  #productDetailView,
  #orderReviewView,
  #paymentView,
  #paymentProcessingView,
  #orderConfirmationView,
  #myBenefitsView,
  #benefitDetailView,
  #benefitHistoryView,
  #myPurchasesView,
  #orderDetailView,
  #profileView,
  #accountSecurityView
) .customer-topbar{
  min-height:84px;
  padding:16px var(--bls-space-7);
  border-bottom:1px solid var(--bls-border);
}

:is(
  #customerHomeView,
  #productDiscoveryView,
  #productDetailView,
  #orderReviewView,
  #paymentView,
  #paymentProcessingView,
  #orderConfirmationView,
  #myBenefitsView,
  #benefitDetailView,
  #benefitHistoryView,
  #myPurchasesView,
  #orderDetailView,
  #profileView,
  #accountSecurityView
) .customer-search{
  min-height:var(--bls-control-xl);
  border-radius:var(--bls-radius-lg);
}

:is(
  #customerHomeView,
  #productDiscoveryView,
  #productDetailView,
  #orderReviewView,
  #paymentView,
  #paymentProcessingView,
  #orderConfirmationView,
  #myBenefitsView,
  #benefitDetailView,
  #benefitHistoryView,
  #myPurchasesView,
  #orderDetailView,
  #profileView,
  #accountSecurityView
) .customer-search input{
  font-size:var(--bls-fs-body);
}

:is(
  #customerHomeView,
  #productDiscoveryView,
  #productDetailView,
  #orderReviewView,
  #paymentView,
  #paymentProcessingView,
  #orderConfirmationView,
  #myBenefitsView,
  #benefitDetailView,
  #benefitHistoryView,
  #myPurchasesView,
  #orderDetailView,
  #profileView,
  #accountSecurityView
) .customer-user strong{
  font-size:var(--bls-fs-body);
}

:is(
  #customerHomeView,
  #productDiscoveryView,
  #productDetailView,
  #orderReviewView,
  #paymentView,
  #paymentProcessingView,
  #orderConfirmationView,
  #myBenefitsView,
  #benefitDetailView,
  #benefitHistoryView,
  #myPurchasesView,
  #orderDetailView,
  #profileView,
  #accountSecurityView
) .customer-user small{
  font-size:var(--bls-fs-sm);
}

:is(
  #customerHomeView,
  #productDiscoveryView,
  #productDetailView,
  #orderReviewView,
  #paymentView,
  #paymentProcessingView,
  #orderConfirmationView,
  #myBenefitsView,
  #benefitDetailView,
  #benefitHistoryView,
  #myPurchasesView,
  #orderDetailView,
  #profileView,
  #accountSecurityView
) .customer-main{
  min-width:0;
}

@media (max-width:1250px){
  :is(
    #customerHomeView,
    #productDiscoveryView,
    #productDetailView,
    #orderReviewView,
    #paymentView,
    #paymentProcessingView,
    #orderConfirmationView,
    #myBenefitsView,
    #benefitDetailView,
    #benefitHistoryView,
    #myPurchasesView,
    #orderDetailView,
    #profileView,
    #accountSecurityView
  ) .customer-shell{
    grid-template-columns:230px minmax(0,1fr);
  }
}

@media (max-width:1000px){
  :is(
    #customerHomeView,
    #productDiscoveryView,
    #productDetailView,
    #orderReviewView,
    #paymentView,
    #paymentProcessingView,
    #orderConfirmationView,
    #myBenefitsView,
    #benefitDetailView,
    #benefitHistoryView,
    #myPurchasesView,
    #orderDetailView,
    #profileView,
    #accountSecurityView
  ) .customer-shell{
    grid-template-columns:1fr;
  }

  :is(
    #customerHomeView,
    #productDiscoveryView,
    #productDetailView,
    #orderReviewView,
    #paymentView,
    #paymentProcessingView,
    #orderConfirmationView,
    #myBenefitsView,
    #benefitDetailView,
    #benefitHistoryView,
    #myPurchasesView,
    #orderDetailView,
    #profileView,
    #accountSecurityView
  ) .customer-sidebar{
    display:none;
  }
}


/* =========================================================
   BLS GLOBAL UI CONSISTENCY — PASS 4.2
   CUSTOMER HERO + PRIMARY CARDS — SCREENS 06–19
   ========================================================= */

:is(
  #customerHomeView,
  #productDiscoveryView,
  #productDetailView,
  #orderReviewView,
  #paymentView,
  #paymentProcessingView,
  #orderConfirmationView,
  #myBenefitsView,
  #benefitDetailView,
  #benefitHistoryView,
  #myPurchasesView,
  #orderDetailView,
  #profileView,
  #accountSecurityView
) [class*="customer-"][class*="-hero"],
:is(
  #customerHomeView,
  #productDiscoveryView,
  #productDetailView,
  #orderReviewView,
  #paymentView,
  #paymentProcessingView,
  #orderConfirmationView,
  #myBenefitsView,
  #benefitDetailView,
  #benefitHistoryView,
  #myPurchasesView,
  #orderDetailView,
  #profileView,
  #accountSecurityView
) .customer-hero{
  border-radius:var(--bls-radius-xl);
}

#customerHomeView .customer-hero{
  min-height:142px;
}

#customerHomeView .customer-hero-copy h1{
  line-height:1;
}

:is(
  #productDiscoveryView,
  #productDetailView,
  #orderReviewView,
  #paymentView,
  #paymentProcessingView,
  #orderConfirmationView,
  #myBenefitsView,
  #benefitDetailView,
  #benefitHistoryView,
  #myPurchasesView,
  #orderDetailView,
  #profileView,
  #accountSecurityView
) h1{
  line-height:1.08;
}

:is(
  #customerHomeView,
  #productDiscoveryView,
  #productDetailView,
  #orderReviewView,
  #paymentView,
  #paymentProcessingView,
  #orderConfirmationView,
  #myBenefitsView,
  #benefitDetailView,
  #benefitHistoryView,
  #myPurchasesView,
  #orderDetailView,
  #profileView,
  #accountSecurityView
) [class*="-card"]{
  border-radius:var(--bls-radius-lg);
}

:is(
  #customerHomeView,
  #productDiscoveryView,
  #productDetailView,
  #orderReviewView,
  #paymentView,
  #paymentProcessingView,
  #orderConfirmationView,
  #myBenefitsView,
  #benefitDetailView,
  #benefitHistoryView,
  #myPurchasesView,
  #orderDetailView,
  #profileView,
  #accountSecurityView
) [class*="-panel"]{
  border-radius:var(--bls-radius-lg);
}

:is(
  #customerHomeView,
  #productDiscoveryView,
  #productDetailView,
  #orderReviewView,
  #paymentView,
  #paymentProcessingView,
  #orderConfirmationView,
  #myBenefitsView,
  #benefitDetailView,
  #benefitHistoryView,
  #myPurchasesView,
  #orderDetailView,
  #profileView,
  #accountSecurityView
) button{
  border-radius:var(--bls-radius-sm);
}

:is(
  #customerHomeView,
  #productDiscoveryView,
  #productDetailView,
  #orderReviewView,
  #paymentView,
  #paymentProcessingView,
  #orderConfirmationView,
  #myBenefitsView,
  #benefitDetailView,
  #benefitHistoryView,
  #myPurchasesView,
  #orderDetailView,
  #profileView,
  #accountSecurityView
) input,
:is(
  #customerHomeView,
  #productDiscoveryView,
  #productDetailView,
  #orderReviewView,
  #paymentView,
  #paymentProcessingView,
  #orderConfirmationView,
  #myBenefitsView,
  #benefitDetailView,
  #benefitHistoryView,
  #myPurchasesView,
  #orderDetailView,
  #profileView,
  #accountSecurityView
) select{
  border-radius:var(--bls-radius-sm);
}

@media (max-width:760px){
  #customerHomeView .customer-hero-copy h1{
    font-size:32px;
  }
}


/* =========================================================
   BLS GLOBAL UI CONSISTENCY — PASS 4.3
   CUSTOMER PRODUCT / ORDER / BENEFIT / PROFILE BLOCKS
   SCREENS 06–19
   ========================================================= */

:is(
  #customerHomeView,
  #productDiscoveryView,
  #productDetailView,
  #orderReviewView,
  #paymentView,
  #paymentProcessingView,
  #orderConfirmationView,
  #myBenefitsView,
  #benefitDetailView,
  #benefitHistoryView,
  #myPurchasesView,
  #orderDetailView,
  #profileView,
  #accountSecurityView
) [class*="-table"]{
  border-radius:var(--bls-radius-sm);
}

:is(
  #customerHomeView,
  #productDiscoveryView,
  #productDetailView,
  #orderReviewView,
  #paymentView,
  #paymentProcessingView,
  #orderConfirmationView,
  #myBenefitsView,
  #benefitDetailView,
  #benefitHistoryView,
  #myPurchasesView,
  #orderDetailView,
  #profileView,
  #accountSecurityView
) [class*="-table"] .head{
  min-height:50px;
  font-size:var(--bls-fs-sm);
}

:is(
  #customerHomeView,
  #productDiscoveryView,
  #productDetailView,
  #orderReviewView,
  #paymentView,
  #paymentProcessingView,
  #orderConfirmationView,
  #myBenefitsView,
  #benefitDetailView,
  #benefitHistoryView,
  #myPurchasesView,
  #orderDetailView,
  #profileView,
  #accountSecurityView
) [class*="-empty"] strong{
  font-size:var(--bls-fs-section);
}

:is(
  #customerHomeView,
  #productDiscoveryView,
  #productDetailView,
  #orderReviewView,
  #paymentView,
  #paymentProcessingView,
  #orderConfirmationView,
  #myBenefitsView,
  #benefitDetailView,
  #benefitHistoryView,
  #myPurchasesView,
  #orderDetailView,
  #profileView,
  #accountSecurityView
) [class*="-empty"] p{
  font-size:12px;
}

:is(
  #customerHomeView,
  #productDiscoveryView,
  #productDetailView,
  #orderReviewView,
  #paymentView,
  #paymentProcessingView,
  #orderConfirmationView,
  #myBenefitsView,
  #benefitDetailView,
  #benefitHistoryView,
  #myPurchasesView,
  #orderDetailView,
  #profileView,
  #accountSecurityView
) [class*="-empty"] small{
  font-size:var(--bls-fs-sm);
}

:is(
  #customerHomeView,
  #productDiscoveryView,
  #productDetailView,
  #orderReviewView,
  #paymentView,
  #paymentProcessingView,
  #orderConfirmationView,
  #myBenefitsView,
  #benefitDetailView,
  #benefitHistoryView,
  #myPurchasesView,
  #orderDetailView,
  #profileView,
  #accountSecurityView
) [class*="-footer"]{
  min-height:54px;
  font-size:var(--bls-fs-sm);
}

:is(
  #customerHomeView,
  #productDiscoveryView,
  #productDetailView,
  #orderReviewView,
  #paymentView,
  #paymentProcessingView,
  #orderConfirmationView,
  #myBenefitsView,
  #benefitDetailView,
  #benefitHistoryView,
  #myPurchasesView,
  #orderDetailView,
  #profileView,
  #accountSecurityView
) textarea,
:is(
  #customerHomeView,
  #productDiscoveryView,
  #productDetailView,
  #orderReviewView,
  #paymentView,
  #paymentProcessingView,
  #orderConfirmationView,
  #myBenefitsView,
  #benefitDetailView,
  #benefitHistoryView,
  #myPurchasesView,
  #orderDetailView,
  #profileView,
  #accountSecurityView
) input,
:is(
  #customerHomeView,
  #productDiscoveryView,
  #productDetailView,
  #orderReviewView,
  #paymentView,
  #paymentProcessingView,
  #orderConfirmationView,
  #myBenefitsView,
  #benefitDetailView,
  #benefitHistoryView,
  #myPurchasesView,
  #orderDetailView,
  #profileView,
  #accountSecurityView
) select{
  min-height:38px;
}

:is(
  #customerHomeView,
  #productDiscoveryView,
  #productDetailView,
  #orderReviewView,
  #paymentView,
  #paymentProcessingView,
  #orderConfirmationView,
  #myBenefitsView,
  #benefitDetailView,
  #benefitHistoryView,
  #myPurchasesView,
  #orderDetailView,
  #profileView,
  #accountSecurityView
) button{
  min-height:32px;
}


/* =========================================================
   BLS GLOBAL UI CONSISTENCY — PASS 5.1
   FOUNDATION / IDENTITY — AUTH CORE
   LOGIN / REGISTER / VERIFY
   ========================================================= */

:is(
  #loginView,
  #registerView,
  #verifyView
){
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:var(--bls-text);
}

:is(
  #loginView,
  #registerView,
  #verifyView
).auth-view{
  min-height:100vh;
}

:is(
  #loginView,
  #registerView,
  #verifyView
) .auth-card{
  border-radius:var(--bls-radius-2xl);
}

:is(
  #loginView,
  #registerView,
  #verifyView
) .auth-card h2{
  line-height:1.08;
}

:is(
  #loginView,
  #registerView,
  #verifyView
) .auth-card input,
:is(
  #loginView,
  #registerView,
  #verifyView
) .auth-card select{
  min-height:var(--bls-control-xl);
  border-radius:var(--bls-radius-md);
  font-size:var(--bls-fs-body);
}

:is(
  #loginView,
  #registerView,
  #verifyView
) .auth-card .button{
  min-height:var(--bls-control-xl);
  border-radius:var(--bls-radius-md);
}

:is(
  #loginView,
  #registerView,
  #verifyView
) .auth-card .muted{
  line-height:1.5;
}

:is(
  #loginView,
  #registerView,
  #verifyView
) .back-link{
  border-radius:var(--bls-radius-sm);
}


/* =========================================================
   BLS GLOBAL UI CONSISTENCY — PASS 5.2
   PLATFORM + DYNAMIC DASHBOARD CORE
   ========================================================= */

/* PLATFORM VIEW */

#platformView{
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:var(--bls-text);
}

#platformView .platform-app-shell{
  min-height:100vh;
}

#platformView .platform-sidebar{
  min-height:100vh;
  background:var(--bls-bg-soft);
  border-right:1px solid var(--bls-border);
}

#platformView .platform-topbar{
  min-height:84px;
  border-bottom:1px solid var(--bls-border);
}

#platformView .platform-search{
  min-height:var(--bls-control-xl);
  border-radius:var(--bls-radius-lg);
}

#platformView .platform-search input{
  font-size:var(--bls-fs-body);
}

#platformView .platform-user strong{
  font-size:var(--bls-fs-body);
}

#platformView .platform-user small{
  font-size:var(--bls-fs-sm);
}

#platformView .platform-hero{
  border-radius:var(--bls-radius-xl);
}

#platformView [class*="platform-card"],
#platformView [class*="platform-panel"]{
  border-radius:var(--bls-radius-lg);
}

#platformView button,
#platformView input,
#platformView select{
  border-radius:var(--bls-radius-sm);
}

/* DYNAMIC DASHBOARD */

#dashboardView{
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:var(--bls-text);
}

#dashboardView .dynamic-shell{
  min-height:100vh;
}

#dashboardView .dynamic-sidebar{
  min-height:100vh;
  background:var(--bls-bg-soft);
  border-right:1px solid var(--bls-border);
}

#dashboardView .workspace-nav-item{
  min-height:var(--bls-control-lg);
  border-radius:var(--bls-radius-md);
}

#dashboardView .workspace-header{
  min-height:84px;
  border-bottom:1px solid var(--bls-border);
}

#dashboardView .workspace-header h2{
  line-height:1.08;
}

#dashboardView .workspace-panel{
  border-radius:var(--bls-radius-lg);
}

#dashboardView .dashboard-card,
#dashboardView .module-state-card,
#dashboardView .account-detail{
  border-radius:var(--bls-radius-lg);
}

#dashboardView button,
#dashboardView input,
#dashboardView select{
  border-radius:var(--bls-radius-sm);
}

@media (max-width:1000px){
  #platformView .platform-app-shell,
  #dashboardView .dynamic-shell{
    grid-template-columns:1fr;
  }

  #platformView .platform-sidebar,
  #dashboardView .dynamic-sidebar{
    display:none;
  }
}


/* =========================================================
   BLS GLOBAL UI CONSISTENCY — PASS 5.3
   FOUNDATION LANDING + SECURITY + SYSTEM STATE
   SCREENS 01 / 04 / 05
   ========================================================= */

/* FOUNDATION LANDING */

#homeView{
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:var(--bls-text);
}

#homeView .hero{
  border-radius:var(--bls-radius-2xl);
}

#homeView .hero-copy h1{
  line-height:1.04;
}

#homeView button,
#homeView .button{
  border-radius:var(--bls-radius-sm);
}

/* FOUNDATION SECURITY */

#securityView{
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:var(--bls-text);
}

#securityView .foundation-security-shell{
  min-height:100vh;
}

#securityView .foundation-security-header{
  border-radius:var(--bls-radius-lg);
}

#securityView .foundation-security-hero{
  border-radius:var(--bls-radius-2xl);
}

#securityView .foundation-security-card{
  border-radius:var(--bls-radius-lg);
}

#securityView .foundation-security-meta{
  border-radius:var(--bls-radius-lg);
}

/* FOUNDATION SYSTEM STATE */

#systemStateView{
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:var(--bls-text);
}

#systemStateView .system-state-shell{
  min-height:100vh;
}

#systemStateView .system-state-header{
  border-radius:var(--bls-radius-lg);
}

#systemStateView .system-state-card{
  border-radius:var(--bls-radius-lg);
}

#systemStateView button,
#systemStateView .button{
  border-radius:var(--bls-radius-sm);
}

@media (max-width:760px){
  #homeView .hero-copy h1{
    line-height:1.08;
  }
}


/* =========================================================
   BLS GLOBAL TYPOGRAPHY SYSTEM V1.0
   44-SCREEN CONSISTENCY + READABILITY PASS
   ========================================================= */

:root{
  --bls-type-page-title:34px;
  --bls-type-section-title:18px;
  --bls-type-card-title:15px;
  --bls-type-body:14px;
  --bls-type-body-small:12px;
  --bls-type-nav:14px;
  --bls-type-nav-small:11.5px;
  --bls-type-button:13px;
  --bls-type-table:12px;
  --bls-type-eyebrow:12px;
}

/* PAGE TITLE — SAME VISUAL LEVEL ACROSS SCREENS */
.view h1{
  font-size:var(--bls-type-page-title) !important;
  line-height:1.05 !important;
  letter-spacing:-1px !important;
}

/* SECTION TITLES */
.view h2{
  font-size:var(--bls-type-section-title);
  line-height:1.25;
}

.view h3{
  font-size:var(--bls-type-card-title);
  line-height:1.3;
}

/* NORMAL READING TEXT */
.view p{
  font-size:max(14px,1em);
  line-height:1.65;
}

/* REMOVE ULTRA-SMALL TEXT ACROSS 44 SCREENS */
.view small{
  font-size:var(--bls-type-body-small) !important;
  line-height:1.45 !important;
}

/* LABELS / EYEBROWS */
.view header small,
.view [class*="hero"] > div > span,
.view [class*="hero"] > div:first-child > span{
  font-size:var(--bls-type-eyebrow) !important;
  line-height:1.35 !important;
}

/* SIDEBAR / NAVIGATION */
.view [class*="nav-item"] strong,
.view [class*="sidebar"] button strong,
.view [class*="menu-item"] strong{
  font-size:var(--bls-type-nav) !important;
  line-height:1.3 !important;
}

.view [class*="nav-item"] small,
.view [class*="sidebar"] button small,
.view [class*="menu-item"] small{
  font-size:var(--bls-type-nav-small) !important;
  line-height:1.35 !important;
}

/* BUTTONS */
.view button{
  font-size:var(--bls-type-button);
  line-height:1.35;
}

/* TABLES / LISTS / FILTERS */
.view [class*="table"],
.view [class*="filter"],
.view label,
.view select,
.view input{
  font-size:var(--bls-type-table);
}

/* CARD CONTENT */
.view article p,
.view [class*="card"] p,
.view [class*="panel"] p{
  font-size:var(--bls-type-body);
  line-height:1.6;
}

/* PREVENT MICRO TYPOGRAPHY IN DENSE OPERATIONAL AREAS */
.view [class*="table"] small,
.view [class*="row"] small,
.view [class*="line"] small,
.view [class*="status"] small,
.view [class*="flow"] small,
.view [class*="trace"] small{
  font-size:11.5px !important;
  line-height:1.4 !important;
}

/* RESPONSIVE */
@media (max-width:760px){
  .view h1{
    font-size:30px !important;
  }

  .view h2{
    font-size:20px;
  }

  .view small{
    font-size:11.5px !important;
  }
}/* =========================================================
   BLS TYPE SCALE MASTER 009
   Global typography normalization based on Screen 009
   ========================================================= */

.view h1{
  font-size:34px !important;
  line-height:1.12 !important;
  font-weight:800 !important;
  letter-spacing:-0.02em !important;
}

.view h2{
  font-size:18px !important;
  line-height:1.22 !important;
  font-weight:700 !important;
  letter-spacing:-0.01em !important;
}

.view h3{
  font-size:15px !important;
  line-height:1.30 !important;
  font-weight:700 !important;
}

.view p,
.view li,
.view td,
.view th,
.view label,
.view input,
.view select,
.view textarea,
.view button{
  font-size:14px !important;
  line-height:1.45 !important;
}

.view small,
.view .muted,
.view .caption{
  font-size:12.5px !important;
  line-height:1.40 !important;
}

.view .eyebrow,
.view .section-kicker{
  font-size:12px !important;
  line-height:1.2 !important;
  letter-spacing:0.12em !important;
}

/* =========================================================
   BLS AI DIGITAL HUMAN — SCREEN 00
   CINEMATIC GLOBAL FRONT DOOR
   ========================================================= */

#blsAiHomeView{
  min-height:calc(100vh - 74px);
  width:100%;
  background:
    radial-gradient(circle at 72% 36%,rgba(36,150,255,.14),transparent 25%),
    radial-gradient(circle at 70% 55%,rgba(218,164,62,.09),transparent 30%),
    linear-gradient(135deg,#02070d 0%,#06111b 48%,#03080d 100%);
  color:#f4f7fa;
  overflow:hidden;
}

#blsAiHomeView .bls-ai-home-stage{
  min-height:calc(100vh - 74px);
  max-width:1480px;
  margin:0 auto;
  padding:26px 44px 34px;
  display:grid;
  grid-template-rows:auto 1fr auto;
  position:relative;
}

#blsAiHomeView .bls-ai-home-stage::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(96,188,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(96,188,255,.035) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,transparent,black 16%,black 80%,transparent);
}

.bls-ai-home-header{
  min-height:66px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:2;
}

.bls-ai-home-brand{
  display:grid;
  gap:3px;
}

.bls-ai-home-brand strong{
  font-size:15px;
  letter-spacing:.14em;
  color:#f3c465;
}

.bls-ai-home-brand span{
  font-size:10px;
  letter-spacing:.22em;
  color:rgba(224,235,242,.55);
}

.bls-ai-home-actions{
  display:flex;
  gap:10px;
}

.bls-ai-home-actions button{
  min-height:40px;
  padding:0 18px;
  border:1px solid rgba(104,190,235,.25);
  border-radius:10px;
  background:rgba(7,20,31,.72);
  color:#e7eef3;
  cursor:pointer;
}

.bls-ai-home-actions button:last-child{
  border-color:rgba(224,173,69,.62);
  color:#f2c56d;
}

.bls-ai-home-main{
  min-height:540px;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);
  align-items:center;
  gap:56px;
  position:relative;
  z-index:2;
}

.bls-ai-home-copy{
  max-width:650px;
}

.bls-ai-home-eyebrow{
  display:block;
  margin-bottom:15px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.24em;
  color:#66d7ff;
}

#blsAiHomeView .bls-ai-home-copy h1{
  margin:0;
  font-size:54px !important;
  line-height:1.02 !important;
  letter-spacing:-.035em !important;
  font-weight:720 !important;
  color:#f7f9fb;
}

.bls-ai-home-copy > p{
  max-width:580px;
  margin:22px 0 0;
  font-size:16px !important;
  line-height:1.7 !important;
  color:rgba(222,232,239,.72);
}

.bls-ai-home-primary-actions{
  display:flex;
  gap:12px;
  margin-top:30px;
}

.bls-ai-home-primary-actions button{
  min-height:46px;
  padding:0 22px;
  border-radius:12px;
  border:1px solid rgba(224,173,69,.62);
  background:linear-gradient(135deg,rgba(205,147,42,.18),rgba(81,56,16,.12));
  color:#f0c56d;
  font-weight:700;
  cursor:pointer;
}

.bls-ai-home-primary-actions button:nth-child(2){
  border-color:rgba(75,190,239,.48);
  background:rgba(16,83,116,.14);
  color:#8adfff;
}

.bls-ai-home-prompt{
  margin-top:24px;
  min-height:72px;
  padding:14px 16px;
  display:grid;
  grid-template-columns:30px 1fr 38px;
  gap:12px;
  align-items:center;
  border:1px solid rgba(91,177,218,.22);
  border-radius:14px;
  background:rgba(7,21,33,.68);
  box-shadow:0 20px 60px rgba(0,0,0,.22);
}

.bls-ai-home-prompt > span{
  color:#65d9ff;
  font-size:20px;
}

.bls-ai-home-prompt div{
  display:grid;
  gap:4px;
}

.bls-ai-home-prompt small{
  font-size:10px !important;
  letter-spacing:.16em;
  color:#6ecceb;
}

.bls-ai-home-prompt strong{
  font-size:14px;
  font-weight:600;
  color:#e8eff4;
}

.bls-ai-home-prompt button{
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(88,194,239,.32);
  background:#0b2232;
  color:#79d7ff;
  cursor:pointer;
}

.bls-ai-home-human{
  min-height:500px;
  position:relative;
  display:grid;
  place-items:center;
}

.bls-ai-human-aura{
  width:400px;
  height:400px;
  border-radius:50%;
  position:absolute;
  background:
    radial-gradient(circle,rgba(83,210,255,.22) 0%,rgba(42,140,195,.10) 28%,rgba(0,0,0,0) 68%);
  filter:blur(6px);
}

.bls-ai-human-orbit{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(79,193,239,.24);
}

.bls-ai-human-orbit.orbit-a{
  width:360px;
  height:360px;
  transform:rotate(14deg);
  box-shadow:0 0 40px rgba(52,169,218,.08);
}

.bls-ai-human-orbit.orbit-b{
  width:450px;
  height:260px;
  transform:rotate(-23deg);
  border-color:rgba(226,175,69,.18);
}

.bls-ai-human-placeholder{
  width:270px;
  height:360px;
  border-radius:145px 145px 40px 40px;
  display:grid;
  place-content:center;
  text-align:center;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(99,201,240,.25);
  background:
    radial-gradient(circle at 50% 28%,rgba(119,213,255,.26),transparent 18%),
    linear-gradient(180deg,rgba(25,91,124,.52),rgba(7,28,43,.82));
  box-shadow:
    0 0 90px rgba(44,165,220,.16),
    inset 0 0 55px rgba(88,201,243,.09);
}

.bls-ai-human-placeholder::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,transparent 49.5%,rgba(115,219,255,.22) 50%,transparent 50.5%),
    linear-gradient(transparent 49.5%,rgba(115,219,255,.15) 50%,transparent 50.5%);
  background-size:36px 36px;
  opacity:.34;
}

.bls-ai-human-placeholder span,
.bls-ai-human-placeholder strong,
.bls-ai-human-placeholder small{
  position:relative;
  z-index:2;
}

.bls-ai-human-placeholder span{
  font-size:22px;
  letter-spacing:.28em;
  color:#9be5ff;
}

.bls-ai-human-placeholder strong{
  margin-top:4px;
  font-size:78px;
  line-height:.95;
  color:#f3c76e;
  text-shadow:0 0 40px rgba(229,176,67,.26);
}

.bls-ai-human-placeholder small{
  margin-top:12px;
  font-size:10px !important;
  letter-spacing:.28em;
  color:rgba(226,238,244,.66);
}

.bls-ai-human-status{
  position:absolute;
  bottom:32px;
  min-height:34px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(64,216,172,.28);
  border-radius:20px;
  background:rgba(4,28,27,.72);
  font-size:10px;
  letter-spacing:.12em;
  color:#86e5c5;
}

.bls-ai-human-status i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#49d7a8;
  box-shadow:0 0 12px #49d7a8;
}

.bls-ai-home-discovery{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  position:relative;
  z-index:2;
}

.bls-ai-home-discovery article{
  min-height:108px;
  padding:15px 17px;
  display:grid;
  align-content:center;
  gap:5px;
  border:1px solid rgba(83,151,184,.20);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(11,28,42,.86),rgba(4,13,21,.82));
  transition:.25s ease;
}

.bls-ai-home-discovery article:hover{
  transform:translateY(-2px);
  border-color:rgba(89,198,240,.42);
}

.bls-ai-home-discovery article > span{
  font-size:10px;
  letter-spacing:.15em;
  color:#e0ad4c;
}

.bls-ai-home-discovery article strong{
  font-size:15px;
  color:#f0f4f6;
}

.bls-ai-home-discovery article small{
  font-size:11.5px !important;
  color:rgba(208,222,230,.58);
}

@media(max-width:1000px){
  #blsAiHomeView .bls-ai-home-stage{
    padding:22px;
  }

  .bls-ai-home-main{
    grid-template-columns:1fr;
    gap:20px;
    padding:42px 0;
  }

  .bls-ai-home-human{
    min-height:390px;
  }

  .bls-ai-home-discovery{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:640px){
  .bls-ai-home-header{
    align-items:flex-start;
  }

  .bls-ai-home-actions button:first-child{
    display:none;
  }

  #blsAiHomeView .bls-ai-home-copy h1{
    font-size:40px !important;
  }

  .bls-ai-home-copy > p{
    font-size:14px !important;
  }

  .bls-ai-home-primary-actions{
    flex-direction:column;
  }

  .bls-ai-home-discovery{
    grid-template-columns:1fr;
  }

  .bls-ai-human-placeholder{
    width:230px;
    height:310px;
  }
}
/* =========================================================
   BLS AI DIGITAL HUMAN — SCREEN 00
   CINEMATIC GLOBAL FRONT DOOR
   ========================================================= */

#blsAiHomeView{
  min-height:calc(100vh - 74px);
  width:100%;
  background:
    radial-gradient(circle at 72% 36%,rgba(36,150,255,.14),transparent 25%),
    radial-gradient(circle at 70% 55%,rgba(218,164,62,.09),transparent 30%),
    linear-gradient(135deg,#02070d 0%,#06111b 48%,#03080d 100%);
  color:#f4f7fa;
  overflow:hidden;
}

#blsAiHomeView .bls-ai-home-stage{
  min-height:calc(100vh - 74px);
  max-width:1480px;
  margin:0 auto;
  padding:26px 44px 34px;
  display:grid;
  grid-template-rows:auto 1fr auto;
  position:relative;
}

#blsAiHomeView .bls-ai-home-stage::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(96,188,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(96,188,255,.035) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,transparent,black 16%,black 80%,transparent);
}

.bls-ai-home-header{
  min-height:66px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:2;
}

.bls-ai-home-brand{
  display:grid;
  gap:3px;
}

.bls-ai-home-brand strong{
  font-size:15px;
  letter-spacing:.14em;
  color:#f3c465;
}

.bls-ai-home-brand span{
  font-size:10px;
  letter-spacing:.22em;
  color:rgba(224,235,242,.55);
}

.bls-ai-home-actions{
  display:flex;
  gap:10px;
}

.bls-ai-home-actions button{
  min-height:40px;
  padding:0 18px;
  border:1px solid rgba(104,190,235,.25);
  border-radius:10px;
  background:rgba(7,20,31,.72);
  color:#e7eef3;
  cursor:pointer;
}

.bls-ai-home-actions button:last-child{
  border-color:rgba(224,173,69,.62);
  color:#f2c56d;
}

.bls-ai-home-main{
  min-height:540px;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);
  align-items:center;
  gap:56px;
  position:relative;
  z-index:2;
}

.bls-ai-home-copy{
  max-width:650px;
}

.bls-ai-home-eyebrow{
  display:block;
  margin-bottom:15px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.24em;
  color:#66d7ff;
}

#blsAiHomeView .bls-ai-home-copy h1{
  margin:0;
  font-size:54px !important;
  line-height:1.02 !important;
  letter-spacing:-.035em !important;
  font-weight:720 !important;
  color:#f7f9fb;
}

.bls-ai-home-copy > p{
  max-width:580px;
  margin:22px 0 0;
  font-size:16px !important;
  line-height:1.7 !important;
  color:rgba(222,232,239,.72);
}

.bls-ai-home-primary-actions{
  display:flex;
  gap:12px;
  margin-top:30px;
}

.bls-ai-home-primary-actions button{
  min-height:46px;
  padding:0 22px;
  border-radius:12px;
  border:1px solid rgba(224,173,69,.62);
  background:linear-gradient(135deg,rgba(205,147,42,.18),rgba(81,56,16,.12));
  color:#f0c56d;
  font-weight:700;
  cursor:pointer;
}

.bls-ai-home-primary-actions button:nth-child(2){
  border-color:rgba(75,190,239,.48);
  background:rgba(16,83,116,.14);
  color:#8adfff;
}

.bls-ai-home-prompt{
  margin-top:24px;
  min-height:72px;
  padding:14px 16px;
  display:grid;
  grid-template-columns:30px 1fr 38px;
  gap:12px;
  align-items:center;
  border:1px solid rgba(91,177,218,.22);
  border-radius:14px;
  background:rgba(7,21,33,.68);
  box-shadow:0 20px 60px rgba(0,0,0,.22);
}

.bls-ai-home-prompt > span{
  color:#65d9ff;
  font-size:20px;
}

.bls-ai-home-prompt div{
  display:grid;
  gap:4px;
}

.bls-ai-home-prompt small{
  font-size:10px !important;
  letter-spacing:.16em;
  color:#6ecceb;
}

.bls-ai-home-prompt strong{
  font-size:14px;
  font-weight:600;
  color:#e8eff4;
}

.bls-ai-home-prompt button{
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(88,194,239,.32);
  background:#0b2232;
  color:#79d7ff;
  cursor:pointer;
}

.bls-ai-home-human{
  min-height:500px;
  position:relative;
  display:grid;
  place-items:center;
}

.bls-ai-human-aura{
  width:400px;
  height:400px;
  border-radius:50%;
  position:absolute;
  background:
    radial-gradient(circle,rgba(83,210,255,.22) 0%,rgba(42,140,195,.10) 28%,rgba(0,0,0,0) 68%);
  filter:blur(6px);
}

.bls-ai-human-orbit{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(79,193,239,.24);
}

.bls-ai-human-orbit.orbit-a{
  width:360px;
  height:360px;
  transform:rotate(14deg);
  box-shadow:0 0 40px rgba(52,169,218,.08);
}

.bls-ai-human-orbit.orbit-b{
  width:450px;
  height:260px;
  transform:rotate(-23deg);
  border-color:rgba(226,175,69,.18);
}

.bls-ai-human-placeholder{
  width:270px;
  height:360px;
  border-radius:145px 145px 40px 40px;
  display:grid;
  place-content:center;
  text-align:center;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(99,201,240,.25);
  background:
    radial-gradient(circle at 50% 28%,rgba(119,213,255,.26),transparent 18%),
    linear-gradient(180deg,rgba(25,91,124,.52),rgba(7,28,43,.82));
  box-shadow:
    0 0 90px rgba(44,165,220,.16),
    inset 0 0 55px rgba(88,201,243,.09);
}

.bls-ai-human-placeholder::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,transparent 49.5%,rgba(115,219,255,.22) 50%,transparent 50.5%),
    linear-gradient(transparent 49.5%,rgba(115,219,255,.15) 50%,transparent 50.5%);
  background-size:36px 36px;
  opacity:.34;
}

.bls-ai-human-placeholder span,
.bls-ai-human-placeholder strong,
.bls-ai-human-placeholder small{
  position:relative;
  z-index:2;
}

.bls-ai-human-placeholder span{
  font-size:22px;
  letter-spacing:.28em;
  color:#9be5ff;
}

.bls-ai-human-placeholder strong{
  margin-top:4px;
  font-size:78px;
  line-height:.95;
  color:#f3c76e;
  text-shadow:0 0 40px rgba(229,176,67,.26);
}

.bls-ai-human-placeholder small{
  margin-top:12px;
  font-size:10px !important;
  letter-spacing:.28em;
  color:rgba(226,238,244,.66);
}

.bls-ai-human-status{
  position:absolute;
  bottom:32px;
  min-height:34px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(64,216,172,.28);
  border-radius:20px;
  background:rgba(4,28,27,.72);
  font-size:10px;
  letter-spacing:.12em;
  color:#86e5c5;
}

.bls-ai-human-status i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#49d7a8;
  box-shadow:0 0 12px #49d7a8;
}

.bls-ai-home-discovery{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  position:relative;
  z-index:2;
}

.bls-ai-home-discovery article{
  min-height:108px;
  padding:15px 17px;
  display:grid;
  align-content:center;
  gap:5px;
  border:1px solid rgba(83,151,184,.20);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(11,28,42,.86),rgba(4,13,21,.82));
  transition:.25s ease;
}

.bls-ai-home-discovery article:hover{
  transform:translateY(-2px);
  border-color:rgba(89,198,240,.42);
}

.bls-ai-home-discovery article > span{
  font-size:10px;
  letter-spacing:.15em;
  color:#e0ad4c;
}

.bls-ai-home-discovery article strong{
  font-size:15px;
  color:#f0f4f6;
}

.bls-ai-home-discovery article small{
  font-size:11.5px !important;
  color:rgba(208,222,230,.58);
}

@media(max-width:1000px){
  #blsAiHomeView .bls-ai-home-stage{
    padding:22px;
  }

  .bls-ai-home-main{
    grid-template-columns:1fr;
    gap:20px;
    padding:42px 0;
  }

  .bls-ai-home-human{
    min-height:390px;
  }

  .bls-ai-home-discovery{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:640px){
  .bls-ai-home-header{
    align-items:flex-start;
  }

  .bls-ai-home-actions button:first-child{
    display:none;
  }

  #blsAiHomeView .bls-ai-home-copy h1{
    font-size:40px !important;
  }

  .bls-ai-home-copy > p{
    font-size:14px !important;
  }

  .bls-ai-home-primary-actions{
    flex-direction:column;
  }

  .bls-ai-home-discovery{
    grid-template-columns:1fr;
  }

  .bls-ai-human-placeholder{
    width:230px;
    height:310px;
  }
}
/* =========================================================
   BLS AI MASTER IMAGE PASS
   ========================================================= */

#blsAiHomeView .bls-ai-home-human{
  min-height:560px;
}

#blsAiHomeView .bls-ai-human-placeholder{
  width:620px;
  height:520px;
  max-width:100%;
  border-radius:26px;
  border:1px solid rgba(92,196,241,.32);
  background:
    linear-gradient(90deg,rgba(3,10,17,.08),rgba(3,10,17,.02)),
    url("./assets/bls-ai/bls-ai-digital-human-master.png") 67% center / cover no-repeat;
  box-shadow:
    0 0 100px rgba(43,164,219,.18),
    0 24px 80px rgba(0,0,0,.38);
}

#blsAiHomeView .bls-ai-human-placeholder::before{
  display:none;
}

#blsAiHomeView .bls-ai-human-placeholder > span,
#blsAiHomeView .bls-ai-human-placeholder > strong,
#blsAiHomeView .bls-ai-human-placeholder > small{
  display:none !important;
}

#blsAiHomeView .bls-ai-human-aura{
  width:560px;
  height:560px;
}

#blsAiHomeView .bls-ai-human-orbit.orbit-a{
  width:520px;
  height:520px;
}

#blsAiHomeView .bls-ai-human-orbit.orbit-b{
  width:650px;
  height:390px;
}

#blsAiHomeView .bls-ai-human-status{
  bottom:4px;
  z-index:5;
}

@media(max-width:1000px){
  #blsAiHomeView .bls-ai-human-placeholder{
    width:min(680px,100%);
    height:470px;
    background-position:67% center;
  }
}

@media(max-width:640px){
  #blsAiHomeView .bls-ai-human-placeholder{
    width:100%;
    height:360px;
    background-position:67% center;
  }
}
/* =========================================================
   BLS AI FULLSCREEN MASTER PASS
   ========================================================= */

#blsAiHomeView{
  min-height:calc(100vh - 74px) !important;
  background:#02070d !important;
}

#blsAiHomeView .bls-ai-home-stage{
  width:100% !important;
  max-width:none !important;
  min-height:calc(100vh - 74px) !important;
  padding:0 !important;
  margin:0 !important;
  display:block !important;
  position:relative;
  background:
    linear-gradient(90deg,rgba(0,5,10,.10),rgba(0,5,10,.02)),
    url("./assets/bls-ai/bls-ai-digital-human-master.png") center center / cover no-repeat !important;
}

#blsAiHomeView .bls-ai-home-stage::before{
  display:none !important;
}

/* Image master becomes the visual surface */
#blsAiHomeView .bls-ai-home-main,
#blsAiHomeView .bls-ai-home-discovery,
#blsAiHomeView .bls-ai-home-brand{
  visibility:hidden !important;
}

/* Keep real interactive entry controls above the artwork */
#blsAiHomeView .bls-ai-home-header{
  position:absolute !important;
  top:24px;
  right:48px;
  left:auto;
  z-index:20;
  min-height:auto !important;
}

#blsAiHomeView .bls-ai-home-actions{
  visibility:visible !important;
  display:flex !important;
  gap:12px;
}

#blsAiHomeView .bls-ai-home-actions button{
  min-height:44px !important;
  padding:0 22px !important;
  backdrop-filter:blur(12px);
  background:rgba(3,12,20,.72) !important;
}

#blsAiHomeView .bls-ai-home-actions button:last-child{
  background:linear-gradient(135deg,#8b5d13,#e1aa3e) !important;
  border-color:#f2c86d !important;
  color:#071019 !important;
}

@media(max-width:1000px){
  #blsAiHomeView .bls-ai-home-stage{
    background-position:center center !important;
  }

  #blsAiHomeView .bls-ai-home-header{
    top:18px;
    right:20px;
  }
}

@media(max-width:640px){
  #blsAiHomeView .bls-ai-home-stage{
    min-height:calc(100vh - 64px) !important;
    background-size:cover !important;
    background-position:58% center !important;
  }
}
/* =========================================================
   BLS AI FIVE ENTRY NAV
   ========================================================= */

#blsAiHomeView .bls-ai-home-header{
  top:22px !important;
  right:30px !important;
  left:30px !important;
  width:auto !important;
  display:flex !important;
  justify-content:flex-end !important;
}

#blsAiHomeView .bls-ai-master-nav{
  visibility:visible !important;
  display:flex !important;
  align-items:center;
  gap:8px;
  padding:7px;
  border:1px solid rgba(91,190,235,.22);
  border-radius:15px;
  background:rgba(2,10,17,.66);
  backdrop-filter:blur(16px);
  box-shadow:0 15px 45px rgba(0,0,0,.30);
}

#blsAiHomeView .bls-ai-master-nav button,
#blsAiHomeView .bls-ai-master-nav a{
  min-height:40px !important;
  padding:0 15px !important;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(105,188,225,.20) !important;
  border-radius:10px;
  background:rgba(5,20,31,.72) !important;
  color:#dceaf1 !important;
  font-size:11px !important;
  font-weight:700;
  letter-spacing:.035em;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:.2s ease;
}

#blsAiHomeView .bls-ai-master-nav button:hover,
#blsAiHomeView .bls-ai-master-nav a:hover{
  transform:translateY(-1px);
  border-color:rgba(85,206,255,.62) !important;
  color:#78dcff !important;
}

#blsAiHomeView .bls-ai-master-nav .bls-ai-nav-active{
  border-color:rgba(73,211,255,.58) !important;
  color:#6fddff !important;
  background:rgba(10,65,91,.52) !important;
}

#blsAiHomeView .bls-ai-master-nav .bls-ai-nav-start{
  border-color:#f2c56a !important;
  background:linear-gradient(135deg,#8d5c10,#e2ad43) !important;
  color:#071019 !important;
  box-shadow:0 0 22px rgba(225,169,59,.24);
}

@media(max-width:1100px){
  #blsAiHomeView .bls-ai-master-nav{
    flex-wrap:wrap;
    justify-content:flex-end;
    max-width:760px;
  }
}

@media(max-width:760px){
  #blsAiHomeView .bls-ai-home-header{
    left:12px !important;
    right:12px !important;
    top:12px !important;
  }

  #blsAiHomeView .bls-ai-master-nav{
    width:100%;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  #blsAiHomeView .bls-ai-master-nav button,
  #blsAiHomeView .bls-ai-master-nav a{
    min-height:38px !important;
    padding:0 8px !important;
    font-size:10px !important;
  }

  #blsAiHomeView .bls-ai-master-nav .bls-ai-nav-start{
    grid-column:1 / -1;
  }
}
/* =========================================================
   BLS AI HOTSPOT NAV
   ========================================================= */

#blsAiHomeView{
  position:relative;
}

#blsAiHomeView .bls-ai-hotspot-nav{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:24%;
  z-index:30;
  pointer-events:none;
}

#blsAiHomeView .bls-ai-hotspot{
  position:absolute;
  bottom:5%;
  height:78%;
  border:0;
  background:transparent;
  cursor:pointer;
  pointer-events:auto;
  border-radius:16px;
}

#blsAiHomeView .bls-ai-hotspot:hover{
  outline:1px solid rgba(240,190,86,.45);
  box-shadow:0 0 28px rgba(232,174,61,.10);
}

#blsAiHomeView .hotspot-1{left:2.5%;width:18.5%;}
#blsAiHomeView .hotspot-2{left:21.5%;width:18.5%;}
#blsAiHomeView .hotspot-3{left:40.5%;width:19%;}
#blsAiHomeView .hotspot-4{left:60%;width:18.5%;}
#blsAiHomeView .hotspot-5{left:79%;width:18.5%;}

@media(max-width:760px){
  #blsAiHomeView .bls-ai-hotspot-nav{
    display:none;
  }
}
/* =========================================================
   BLS AI SCREEN00 FULL BLEED BALANCE
   ========================================================= */

/* Screen 00 owns the whole viewport */
body:has(#blsAiHomeView.active){
  margin:0 !important;
  padding:0 !important;
  overflow-x:hidden;
  background:#02070d !important;
}

/* Remove duplicate global BLS header/footer only on Screen 00 */
body:has(#blsAiHomeView.active) > header,
body:has(#blsAiHomeView.active) > footer{
  display:none !important;
}

/* Remove platform shell constraints */
body:has(#blsAiHomeView.active) .shell{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
}

/* Full-screen cinematic surface */
#blsAiHomeView{
  width:100vw !important;
  min-height:100vh !important;
  height:100vh !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#02070d !important;
}

#blsAiHomeView .bls-ai-home-stage{
  position:absolute !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  min-height:0 !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;

  background-image:url("./assets/bls-ai/bls-ai-digital-human-master.png") !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:contain !important;
  background-color:#02070d !important;
}

/* Remove old HTML layout — master visual supplies the artwork */
#blsAiHomeView .bls-ai-home-header,
#blsAiHomeView .bls-ai-home-main,
#blsAiHomeView .bls-ai-home-discovery{
  display:none !important;
}

/* No old decorative layers */
#blsAiHomeView .bls-ai-home-stage::before,
#blsAiHomeView .bls-ai-home-stage::after{
  display:none !important;
}

@media(max-width:760px){
  #blsAiHomeView,
  #blsAiHomeView .bls-ai-home-stage{
    width:100vw !important;
    height:100vh !important;
  }

  #blsAiHomeView .bls-ai-home-stage{
    background-size:contain !important;
    background-position:center center !important;
  }
}
/* =========================================================
   BLS AI SCREEN 00 FINAL MASTER
   ========================================================= */

body:has(#blsAiHomeView.active){
  margin:0 !important;
  background:#02070d !important;
  overflow-x:hidden !important;
}

body:has(#blsAiHomeView.active) > header,
body:has(#blsAiHomeView.active) > footer{
  display:none !important;
}

body:has(#blsAiHomeView.active) .shell{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
}

#blsAiHomeView{
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  background:#02070d !important;
  overflow:hidden !important;
}

#blsAiHomeView .bls-ai-final-stage{
  position:relative !important;
  width:100% !important;
  max-width:1920px !important;
  margin:0 auto !important;
  background:#02070d;
  overflow:hidden;
}

#blsAiHomeView .bls-ai-final-image{
  display:block !important;
  width:100% !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:contain !important;
  user-select:none;
  -webkit-user-drag:none;
}

/* LOGIN + START — secondary actions */
#blsAiHomeView .bls-ai-final-account{
  position:absolute;
  z-index:40;
  top:3.1%;
  right:3.4%;
  display:flex;
  align-items:center;
  gap:12px;
}

#blsAiHomeView .bls-ai-final-account button{
  min-height:42px !important;
  padding:0 20px !important;
  border-radius:12px !important;
  font-size:12px !important;
  font-weight:650 !important;
  letter-spacing:.035em !important;
  cursor:pointer;
  backdrop-filter:blur(14px);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}

#blsAiHomeView .bls-ai-login-cta{
  border:1px solid rgba(223,231,236,.58) !important;
  background:rgba(3,11,19,.58) !important;
  color:#f1f5f7 !important;
}

#blsAiHomeView .bls-ai-start-cta{
  border:1px solid rgba(245,194,91,.82) !important;
  background:linear-gradient(135deg,rgba(125,79,14,.84),rgba(215,157,47,.92)) !important;
  color:#fff4d5 !important;
  box-shadow:0 0 24px rgba(226,165,52,.20);
}

#blsAiHomeView .bls-ai-final-account button:hover{
  transform:translateY(-2px);
}

#blsAiHomeView .bls-ai-start-cta:hover{
  box-shadow:0 0 34px rgba(226,165,52,.36);
}

/* THREE REAL CLICK AREAS — aligned to artwork cards */
#blsAiHomeView .bls-ai-final-hotspots{
  position:absolute;
  inset:0;
  z-index:30;
  pointer-events:none;
}

#blsAiHomeView .bls-ai-final-hotspot{
  position:absolute;
  top:71.2%;
  height:20.8%;
  display:block;
  border:0 !important;
  border-radius:22px;
  background:transparent !important;
  cursor:pointer;
  pointer-events:auto;
  text-decoration:none;
  transition:background .22s ease,box-shadow .22s ease,transform .22s ease;
}

#blsAiHomeView .bls-ai-final-card-1{
  left:4.5%;
  width:29.5%;
}

#blsAiHomeView .bls-ai-final-card-2{
  left:35.7%;
  width:28.6%;
}

#blsAiHomeView .bls-ai-final-card-3{
  left:65.8%;
  width:28.1%;
}

#blsAiHomeView .bls-ai-final-hotspot:hover{
  transform:translateY(-2px);
  background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(67,190,240,.035)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(112,214,255,.22),
    0 12px 38px rgba(0,0,0,.14);
}

#blsAiHomeView .bls-ai-final-card-1:hover{
  box-shadow:
    inset 0 0 0 1px rgba(239,190,91,.28),
    0 12px 38px rgba(0,0,0,.14);
}

@media(max-width:900px){
  #blsAiHomeView .bls-ai-final-account{
    top:2%;
    right:2%;
    gap:6px;
  }

  #blsAiHomeView .bls-ai-final-account button{
    min-height:34px !important;
    padding:0 11px !important;
    font-size:9px !important;
  }
}
/* =========================================================
   BLS AI 16X9 VIEWPORT FIT FINAL
   Keep complete hero + three cards visible
   ========================================================= */

#blsAiHomeView{
  width:100vw !important;
  height:100vh !important;
  min-height:100vh !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  background:#02070d !important;
}

#blsAiHomeView .bls-ai-final-stage{
  position:relative !important;
  width:min(100vw,177.7778vh) !important;
  height:min(100vh,56.25vw) !important;
  max-width:none !important;
  margin:auto !important;
  overflow:hidden !important;
  flex:none !important;
}

#blsAiHomeView .bls-ai-final-image{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
}

/* Keep the real click layers aligned with the artwork */
#blsAiHomeView .bls-ai-final-hotspots{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
}

#blsAiHomeView .bls-ai-final-account{
  top:5.2% !important;
  right:3.4% !important;
}

/* =========================================================
   BLS AI LOCAL V1.0 PREMIUM
   ========================================================= */

#blsAiChatView{
  min-height:100vh;
  background:
    radial-gradient(circle at 18% 22%,rgba(23,125,190,.16),transparent 30%),
    radial-gradient(circle at 80% 70%,rgba(211,155,48,.08),transparent 28%),
    #020913;
  color:#eef5f8;
}

#blsAiChatView .bls-ai-chat-shell{
  width:min(1500px,calc(100% - 40px));
  min-height:calc(100vh - 40px);
  margin:20px auto;
  display:grid;
  grid-template-columns:minmax(420px,.88fr) minmax(0,1.12fr);
  border:1px solid rgba(88,170,210,.20);
  border-radius:26px;
  overflow:hidden;
  background:rgba(3,14,24,.92);
  box-shadow:0 30px 100px rgba(0,0,0,.42);
}

#blsAiChatView .bls-ai-chat-visual{
  position:relative;
  min-height:720px;
  padding:42px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:
    linear-gradient(180deg,rgba(1,8,15,.08),rgba(1,8,15,.74)),
    url("./assets/bls-ai/bls-ai-digital-human-master.png") 34% center / cover no-repeat;
}

#blsAiChatView .bls-ai-chat-visual-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(1,8,14,.18),rgba(1,8,14,.02)),
    linear-gradient(180deg,transparent 46%,rgba(1,8,14,.86));
}

#blsAiChatView .bls-ai-chat-brand,
#blsAiChatView .bls-ai-chat-intro,
#blsAiChatView .bls-ai-chat-principles{
  position:relative;
  z-index:2;
}

#blsAiChatView .bls-ai-chat-brand{
  display:grid;
  gap:4px;
}

#blsAiChatView .bls-ai-chat-brand span{
  color:#62d9ff;
  font-size:11px;
  letter-spacing:.24em;
}

#blsAiChatView .bls-ai-chat-brand strong{
  font-size:22px;
  letter-spacing:.08em;
}

#blsAiChatView .bls-ai-chat-intro{
  max-width:520px;
}

#blsAiChatView .bls-ai-chat-intro small{
  color:#72d8fb;
  letter-spacing:.20em;
}

#blsAiChatView .bls-ai-chat-intro h1{
  margin:12px 0 16px;
  font-size:42px !important;
  line-height:1.04 !important;
}

#blsAiChatView .bls-ai-chat-intro p{
  max-width:480px;
  margin:0;
  color:rgba(229,238,244,.76);
  font-size:15px !important;
  line-height:1.7 !important;
}

#blsAiChatView .bls-ai-chat-principles{
  display:flex;
  gap:10px;
  align-items:center;
  font-size:11px;
  letter-spacing:.15em;
  color:#f0c36a;
}

#blsAiChatView .bls-ai-chat-principles i{
  color:#5bcff5;
  font-style:normal;
}

#blsAiChatView .bls-ai-chat-main{
  min-height:720px;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto auto auto;
  background:
    linear-gradient(180deg,rgba(8,27,45,.82),rgba(3,13,22,.98));
}

#blsAiChatView .bls-ai-chat-header{
  min-height:82px;
  padding:0 26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(96,174,213,.16);
}

#blsAiChatView .bls-ai-chat-header > div{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  column-gap:9px;
}

#blsAiChatView .bls-ai-chat-header strong{
  font-size:14px;
}

#blsAiChatView .bls-ai-chat-header small{
  grid-column:2;
  color:rgba(203,220,229,.54);
}

#blsAiChatView .bls-ai-chat-header button{
  min-height:38px;
  padding:0 15px;
  border:1px solid rgba(102,190,231,.24);
  border-radius:10px;
  background:rgba(7,30,46,.68);
  color:#dcecf3;
  cursor:pointer;
}

#blsAiChatView .bls-ai-status-dot{
  grid-row:1 / 3;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#44d8a7;
  box-shadow:0 0 13px #44d8a7;
}

#blsAiChatView .bls-ai-conversation{
  padding:28px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:16px;
}

#blsAiChatView .bls-ai-message{
  display:flex;
  gap:12px;
  max-width:82%;
}

#blsAiChatView .bls-ai-message.user{
  align-self:flex-end;
}

#blsAiChatView .bls-ai-message-avatar{
  width:34px;
  height:34px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(85,201,242,.34);
  background:#082638;
  color:#6edbff;
  font-size:10px;
  font-weight:800;
}

#blsAiChatView .bls-ai-message-body{
  padding:14px 16px;
  border:1px solid rgba(83,167,207,.16);
  border-radius:16px;
  background:rgba(6,24,38,.72);
}

#blsAiChatView .bls-ai-message.user .bls-ai-message-body{
  border-color:rgba(220,170,65,.30);
  background:rgba(91,61,13,.22);
}

#blsAiChatView .bls-ai-message-body strong{
  display:block;
  margin-bottom:6px;
  color:#f1c66f;
}

#blsAiChatView .bls-ai-message-body p{
  margin:0;
  font-size:14px !important;
  line-height:1.65 !important;
  color:#e4eef3;
  white-space:pre-wrap;
}

#blsAiChatView .bls-ai-suggestions{
  padding:0 26px 14px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

#blsAiChatView .bls-ai-suggestions button{
  min-height:34px;
  padding:0 12px;
  border:1px solid rgba(80,181,223,.22);
  border-radius:18px;
  background:rgba(8,34,51,.68);
  color:#bcdce9;
  font-size:11px !important;
  cursor:pointer;
}

#blsAiChatView .bls-ai-chat-composer{
  margin:0 26px;
  min-height:64px;
  padding:8px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:end;
  border:1px solid rgba(95,179,219,.24);
  border-radius:15px;
  background:rgba(3,16,26,.88);
}

#blsAiChatView .bls-ai-chat-composer textarea{
  width:100%;
  min-height:44px;
  max-height:140px;
  padding:11px 12px;
  resize:none;
  border:0;
  outline:0;
  background:transparent;
  color:#edf5f8;
  font:inherit;
}

#blsAiChatView .bls-ai-chat-composer button{
  min-width:88px;
  height:44px;
  border:1px solid rgba(96,208,250,.46);
  border-radius:11px;
  background:linear-gradient(135deg,#075e87,#1598ca);
  color:white;
  font-weight:700;
  cursor:pointer;
}

#blsAiChatView .bls-ai-chat-status{
  min-height:46px;
  padding:10px 28px 16px;
  color:#93b7c6;
  font-size:11px;
}

#blsAiChatView .bls-ai-chat-status button{
  margin-left:8px;
  border:0;
  background:transparent;
  color:#f0bd55;
  cursor:pointer;
}

@media(max-width:950px){
  #blsAiChatView .bls-ai-chat-shell{
    grid-template-columns:1fr;
  }

  #blsAiChatView .bls-ai-chat-visual{
    min-height:480px;
  }

  #blsAiChatView .bls-ai-chat-main{
    min-height:650px;
  }
}

/* SCREEN00 INVISIBLE ACCOUNT HOTSPOTS */
#blsAiHomeView .bls-ai-final-account button{
  opacity:0 !important;
  background:transparent !important;
  border-color:transparent !important;
  color:transparent !important;
  box-shadow:none !important;
  text-shadow:none !important;
}
#blsAiHomeView .bls-ai-final-account button:hover{
  opacity:0 !important;
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}

/* =========================================================
   SCREEN00 DEFINITIVE 16X9 HOTSPOT LOCK
   ========================================================= */

body.screen00-active{
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#000 !important;
}

body.screen00-active > .topbar{
  display:none !important;
}

body.screen00-active > .shell{
  width:100vw !important;
  max-width:none !important;
  height:100vh !important;
  margin:0 !important;
  padding:0 !important;
}

body.screen00-active #blsAiHomeView.view.active{
  position:fixed !important;
  inset:0 !important;
  z-index:9999 !important;
  width:100vw !important;
  height:100vh !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  background:#000 !important;
}

body.screen00-active #blsAiHomeView .bls-ai-final-stage{
  position:relative !important;
  width:min(100vw,177.7778vh) !important;
  height:min(100vh,56.25vw) !important;
  margin:0 auto !important;
  padding:0 !important;
  flex:none !important;
  overflow:hidden !important;
  background:#000 !important;
}

body.screen00-active #blsAiHomeView .bls-ai-final-image{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 !important;
  padding:0 !important;
}

/* TOP TWO REAL HOTSPOTS */
body.screen00-active #blsAiHomeView .bls-ai-final-account{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  display:block !important;
  z-index:50 !important;
  pointer-events:none !important;
}

body.screen00-active #blsAiHomeView .bls-ai-final-account button{
  position:absolute !important;
  display:block !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  opacity:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:transparent !important;
  pointer-events:auto !important;
  cursor:pointer !important;
}

body.screen00-active #blsAiHomeView .bls-ai-login-cta{
  left:71.0% !important;
  top:3.4% !important;
  width:10.8% !important;
  height:5.8% !important;
}

body.screen00-active #blsAiHomeView .bls-ai-start-cta{
  left:82.7% !important;
  top:3.4% !important;
  width:11.7% !important;
  height:5.8% !important;
}

/* THREE LOWER REAL HOTSPOTS */
body.screen00-active #blsAiHomeView .bls-ai-final-hotspots{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  z-index:45 !important;
  pointer-events:none !important;
}

body.screen00-active #blsAiHomeView .bls-ai-final-hotspot{
  position:absolute !important;
  top:60.3% !important;
  height:26.8% !important;
  border:0 !important;
  border-radius:18px !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
  opacity:1 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
}

body.screen00-active #blsAiHomeView .bls-ai-final-card-1{
  left:21.7% !important;
  width:16.2% !important;
}

body.screen00-active #blsAiHomeView .bls-ai-final-card-2{
  left:41.9% !important;
  width:16.2% !important;
}

body.screen00-active #blsAiHomeView .bls-ai-final-card-3{
  left:62.0% !important;
  width:16.2% !important;
}

body.screen00-active #blsAiHomeView .bls-ai-final-hotspot:hover,
body.screen00-active #blsAiHomeView .bls-ai-final-account button:hover{
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
}

/* =========================================================
   SCREEN00 CLEAN REAL BUTTON UI V1
   Background = artwork only
   5 real HTML controls
   ========================================================= */

#blsAiHomeView:not(.active){
  display:none !important;
}

body.screen00-active{
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#000 !important;
}

body.screen00-active > .topbar{
  display:none !important;
}

body.screen00-active > .shell{
  width:100vw !important;
  max-width:none !important;
  height:100vh !important;
  margin:0 !important;
  padding:0 !important;
}

body.screen00-active #blsAiHomeView.active{
  position:fixed !important;
  inset:0 !important;
  z-index:9999 !important;
  width:100vw !important;
  height:100vh !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  background:#000 !important;
}

#blsAiHomeView .bls-screen00-stage{
  position:relative;
  width:min(100vw,177.7778vh);
  height:min(100vh,56.25vw);
  flex:none;
  overflow:hidden;
  background:#000;
}

#blsAiHomeView .bls-screen00-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  user-select:none;
  -webkit-user-drag:none;
}

/* TOP RIGHT */
#blsAiHomeView .bls-screen00-account{
  position:absolute;
  top:4.4%;
  right:5.4%;
  z-index:20;
  display:flex;
  gap:14px;
}

#blsAiHomeView .bls-screen00-account button{
  height:46px !important;
  padding:0 25px !important;
  border-radius:11px !important;
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:.04em !important;
  cursor:pointer;
  transition:.22s ease;
}

#blsAiHomeView .screen00-login{
  border:1px solid rgba(235,186,77,.76) !important;
  background:rgba(3,7,11,.78) !important;
  color:#f7f2e8 !important;
  backdrop-filter:blur(12px);
}

#blsAiHomeView .screen00-start{
  border:1px solid #ffd06b !important;
  background:linear-gradient(135deg,#c78620,#ffd66f) !important;
  color:#130d04 !important;
  box-shadow:0 0 28px rgba(236,176,59,.25);
}

#blsAiHomeView .bls-screen00-account button:hover{
  transform:translateY(-2px);
}

/* THREE PRIMARY CARDS */
#blsAiHomeView .bls-screen00-nav{
  position:absolute;
  left:50%;
  bottom:6.4%;
  transform:translateX(-50%);
  z-index:20;
  width:61%;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

#blsAiHomeView .screen00-card{
  min-height:210px;
  padding:25px 20px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid rgba(236,181,69,.72) !important;
  border-radius:22px !important;
  background:
    linear-gradient(180deg,rgba(9,19,29,.90),rgba(1,5,10,.94)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,220,134,.06),
    0 18px 50px rgba(0,0,0,.32),
    0 0 24px rgba(231,170,47,.08);
  color:#fff;
  text-decoration:none;
  cursor:pointer;
  backdrop-filter:blur(12px);
  transition:.24s ease;
}

#blsAiHomeView .screen00-card:hover{
  transform:translateY(-5px);
  border-color:#f3c663 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,230,160,.12),
    0 24px 55px rgba(0,0,0,.40),
    0 0 32px rgba(231,170,47,.15);
}

#blsAiHomeView .screen00-icon{
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(87,188,237,.42);
  background:
    radial-gradient(circle,rgba(25,118,172,.30),rgba(4,15,25,.20));
  color:#74d9ff;
  font-size:20px;
  font-weight:800;
  box-shadow:0 0 22px rgba(42,151,218,.18);
}

#blsAiHomeView .screen00-card strong{
  margin-top:6px;
  color:#f2c766;
  font-size:22px !important;
  line-height:1.15 !important;
  letter-spacing:.015em;
}

#blsAiHomeView .screen00-card small{
  color:rgba(228,235,239,.70);
  font-size:12px !important;
  text-align:center;
}

#blsAiHomeView .screen00-card i{
  width:34px;
  height:34px;
  margin-top:5px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(239,190,83,.70);
  color:#f0c469;
  font-style:normal;
  font-size:17px;
}

@media(max-width:900px){
  #blsAiHomeView .bls-screen00-nav{
    width:76%;
    gap:10px;
    bottom:4%;
  }

  #blsAiHomeView .screen00-card{
    min-height:150px;
    padding:14px 10px;
  }

  #blsAiHomeView .screen00-card strong{
    font-size:15px !important;
  }

  #blsAiHomeView .screen00-icon{
    width:44px;
    height:44px;
  }

  #blsAiHomeView .bls-screen00-account{
    top:3%;
    right:3%;
    gap:8px;
  }

  #blsAiHomeView .bls-screen00-account button{
    height:34px !important;
    padding:0 12px !important;
    font-size:10px !important;
  }
}

/* =========================================================
   BLS PLATFORM HERO GLOBE V1
   ========================================================= */

#platformView .platform-hero{
  isolation:isolate;
}

#platformView .platform-hero-overlay{
  position:absolute !important;
  right:3.5% !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:38% !important;
  height:88% !important;
  opacity:1 !important;
  z-index:1 !important;
  pointer-events:none !important;

  background:
    linear-gradient(90deg,
      rgba(5,14,22,0) 0%,
      rgba(5,14,22,.06) 20%,
      rgba(5,14,22,.12) 100%
    ),
    url("/assets/platform/bls-platform-hero-globe.png")
    center center / contain no-repeat !important;

  filter:
    drop-shadow(0 0 18px rgba(54,177,225,.16))
    drop-shadow(0 0 26px rgba(229,171,61,.10));
}

#platformView .platform-hero-copy{
  position:relative !important;
  z-index:3 !important;
  max-width:62% !important;
}

@media(max-width:1100px){
  #platformView .platform-hero-overlay{
    right:1% !important;
    width:42% !important;
    opacity:.88 !important;
  }

  #platformView .platform-hero-copy{
    max-width:64% !important;
  }
}

@media(max-width:760px){
  #platformView .platform-hero-overlay{
    opacity:.28 !important;
    width:78% !important;
    right:-18% !important;
  }

  #platformView .platform-hero-copy{
    max-width:100% !important;
  }
}

/* =========================================================
   BLS PLATFORM HERO GLOBE PREMIUM PASS
   ========================================================= */

#platformView .platform-hero-overlay{
  right:1.5% !important;
  top:52% !important;
  width:46% !important;
  height:96% !important;
  opacity:.96 !important;

  background:
    linear-gradient(90deg,
      rgba(7,17,27,0) 0%,
      rgba(7,17,27,.02) 16%,
      rgba(7,17,27,.08) 100%
    ),
    url("/assets/platform/bls-platform-hero-globe.png")
    center center / 118% auto no-repeat !important;

  filter:
    drop-shadow(0 0 22px rgba(57,180,227,.18))
    drop-shadow(0 0 34px rgba(232,174,62,.14)) !important;

  -webkit-mask-image:
    linear-gradient(90deg,transparent 0%,rgba(0,0,0,.30) 10%,#000 24%,#000 100%);
  mask-image:
    linear-gradient(90deg,transparent 0%,rgba(0,0,0,.30) 10%,#000 24%,#000 100%);
}

#platformView .platform-hero::after{
  background:
    radial-gradient(circle at 79% 52%,rgba(56,173,218,.10),transparent 19%),
    radial-gradient(circle at 84% 62%,rgba(229,169,61,.08),transparent 22%),
    linear-gradient(90deg,rgba(3,14,22,.76),rgba(6,35,49,.16) 57%,rgba(12,111,138,.02)) !important;
}

/* =========================================================
   BLS PLATFORM HERO SEAMLESS FINAL
   ========================================================= */

#platformView .platform-hero-overlay{
  inset:0 !important;
  top:0 !important;
  right:0 !important;
  width:100% !important;
  height:100% !important;
  transform:none !important;
  opacity:1 !important;

  background:
    linear-gradient(
      90deg,
      rgba(6,15,24,.96) 0%,
      rgba(6,15,24,.88) 34%,
      rgba(6,15,24,.42) 52%,
      rgba(6,15,24,.08) 72%,
      rgba(6,15,24,0) 100%
    ),
    url("/assets/platform/bls-platform-hero-globe.png")
    center right / cover no-repeat !important;

  filter:none !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
}

#platformView .platform-hero-copy{
  max-width:54% !important;
  position:relative !important;
  z-index:3 !important;
}

#platformView .platform-hero::after{
  background:
    radial-gradient(circle at 78% 50%,rgba(69,181,226,.10),transparent 22%),
    radial-gradient(circle at 84% 62%,rgba(228,168,58,.08),transparent 22%) !important;
}

/* =========================================================
   BLS PLATFORM HERO MOTION V1
   ========================================================= */

#platformView .platform-hero-overlay{
  transform-origin:78% 55% !important;
  animation:
    blsPlatformHeroFloat 8s ease-in-out infinite,
    blsPlatformHeroGlow 5s ease-in-out infinite !important;
  will-change:transform,filter,opacity;
}

@keyframes blsPlatformHeroFloat{
  0%,100%{
    transform:translate3d(0,0,0) scale(1);
  }
  50%{
    transform:translate3d(-6px,-4px,0) scale(1.018);
  }
}

@keyframes blsPlatformHeroGlow{
  0%,100%{
    filter:
      brightness(1)
      saturate(1)
      drop-shadow(0 0 10px rgba(63,183,230,.10))
      drop-shadow(0 0 16px rgba(231,174,66,.08));
  }
  50%{
    filter:
      brightness(1.08)
      saturate(1.08)
      drop-shadow(0 0 22px rgba(63,183,230,.20))
      drop-shadow(0 0 30px rgba(231,174,66,.14));
  }
}

@media (prefers-reduced-motion:reduce){
  #platformView .platform-hero-overlay{
    animation:none !important;
  }
}

/* =========================================================
   CUSTOMER ACTION CENTER V1
   ========================================================= */
.customer-action-center{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.customer-action-center.is-open{display:flex}
.customer-action-backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,8,14,.78);
  backdrop-filter:blur(10px);
}
.customer-action-panel{
  position:relative;
  z-index:2;
  width:min(760px,calc(100vw - 32px));
  max-height:88vh;
  overflow:auto;
  border:1px solid rgba(89,190,230,.22);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(12,24,35,.98),rgba(5,13,21,.99));
  box-shadow:0 34px 90px rgba(0,0,0,.55),0 0 45px rgba(64,181,224,.08);
}
.customer-action-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:24px 26px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.customer-action-header span{
  display:block;
  margin-bottom:6px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  color:#73c9e9;
}
.customer-action-header h2{
  margin:0;
  font-size:24px;
  color:#f5f8fb;
}
.customer-action-close{
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  background:rgba(255,255,255,.04);
  color:#fff;
  font-size:24px;
  cursor:pointer;
}
.customer-action-body{
  padding:24px 26px 28px;
  color:#d5e0e8;
}
.customer-action-lead{
  margin:0 0 20px;
  line-height:1.65;
  color:#aebdca;
}
.customer-action-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.customer-action-field{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.customer-action-field.full{grid-column:1/-1}
.customer-action-field label{
  font-size:12px;
  font-weight:700;
  color:#b7c6d2;
}
.customer-action-field input,
.customer-action-field select,
.customer-action-field textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:12px 13px;
  background:rgba(255,255,255,.04);
  color:#edf6fb;
  outline:none;
}
.customer-action-note{
  margin-top:18px;
  padding:14px 16px;
  border:1px solid rgba(100,194,229,.16);
  border-radius:14px;
  background:rgba(73,175,216,.06);
  color:#aebdca;
  line-height:1.6;
}
.customer-action-list{
  display:grid;
  gap:12px;
}
.customer-action-item{
  padding:15px 16px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.025);
}
.customer-action-item strong{
  display:block;
  margin-bottom:5px;
  color:#f4f7fa;
}
.customer-action-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(71,184,135,.10);
  color:#77d6a7;
  font-size:12px;
  font-weight:800;
}
@media(max-width:680px){
  .customer-action-grid{grid-template-columns:1fr}
  .customer-action-field.full{grid-column:auto}
}
.platform-hero{
  position:relative;
  overflow:hidden;
}

.platform-journey-entry{
  position:absolute;
  left:59%;
  top:35%;
  transform:translate(-50%,-50%) rotate(-2deg);
  z-index:6;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  padding:10px 14px;
  text-decoration:none;
  color:#f4e7cf;
  font-family:"Segoe Script","Lucida Handwriting","Brush Script MT",cursive;
  font-style:italic;
  font-weight:400;
  font-size:34px;
  line-height:1.05;
  letter-spacing:.2px;
  text-shadow:0 2px 10px rgba(0,0,0,.55), 0 0 24px rgba(236,191,110,.18);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(6,14,26,.06),rgba(6,14,26,.01));
  transition:transform .22s ease, opacity .22s ease, filter .22s ease;
  max-width:420px;
}

.platform-journey-entry span{
  display:block;
  white-space:nowrap;
}

.platform-journey-entry span:nth-child(2){
  margin-left:18px;
}

.platform-journey-entry span:nth-child(1){
  position:relative;
}

.platform-journey-entry span:nth-child(1)::after{
  content:"";
  position:absolute;
  left:2px;
  bottom:-3px;
  width:78%;
  height:1.5px;
  background:linear-gradient(90deg,rgba(243,199,122,.95),rgba(243,199,122,0));
}

.platform-journey-entry:hover{
  transform:translate(-50%,-50%) rotate(-2deg) scale(1.02);
  filter:brightness(1.06);
}

.platform-journey-entry:focus-visible{
  outline:1px solid rgba(243,199,122,.7);
  outline-offset:4px;
}

@media (max-width:1200px){
  .platform-journey-entry{
    left:57%;
    top:36%;
    font-size:30px;
    max-width:360px;
  }
}

@media (max-width:980px){
  .platform-journey-entry{
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    margin:14px 20px 20px auto;
    font-size:26px;
    max-width:calc(100% - 40px);
  }
  .platform-journey-entry:hover{
    transform:none scale(1.02);
  }
}

@media (max-width:640px){
  .platform-journey-entry{
    margin:12px 16px 18px;
    font-size:20px;
    line-height:1.1;
    padding:8px 10px;
    max-width:calc(100% - 32px);
  }
  .platform-journey-entry span{
    white-space:normal;
  }
  .platform-journey-entry span:nth-child(2){
    margin-left:10px;
  }
}
/* =========================================================
   PLATFORM JOURNEY SAFE POSITION V1
   ========================================================= */
#platformView .platform-hero{
  position:relative !important;
}

#platformView .platform-journey-entry{
  position:absolute !important;
  z-index:20 !important;
  left:57% !important;
  top:43% !important;
  transform:translate(-50%,-50%) rotate(-2deg) !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;

  padding:6px 10px !important;
  text-decoration:none !important;

  font-family:"Dancing Script","Segoe Script","Brush Script MT",cursive !important;
  font-size:clamp(25px,2vw,36px) !important;
  line-height:1.08 !important;
  font-weight:500 !important;
  font-style:normal !important;

  color:#f6e7c8 !important;

  text-shadow:
    0 2px 5px rgba(0,0,0,.85),
    0 8px 24px rgba(0,0,0,.60) !important;

  background:none !important;
  border:none !important;
  box-shadow:none !important;

  transition:transform .22s ease,filter .22s ease !important;
}

#platformView .platform-journey-entry span{
  display:block !important;
  white-space:nowrap !important;
}

#platformView .platform-journey-entry span:nth-child(2){
  margin-left:26px !important;
}

#platformView .platform-journey-entry:hover{
  transform:translate(-50%,-50%) rotate(-2deg) scale(1.035) !important;
  filter:brightness(1.12) !important;
}

@media(max-width:980px){
  #platformView .platform-journey-entry{
    left:53% !important;
    top:47% !important;
    font-size:clamp(21px,3vw,28px) !important;
  }
}

@media(max-width:640px){
  #platformView .platform-journey-entry{
    left:50% !important;
    top:73% !important;
    width:82% !important;
    align-items:center !important;
    text-align:center !important;
    font-size:20px !important;
  }

  #platformView .platform-journey-entry span:nth-child(2){
    margin-left:0 !important;
  }
}

/* BLS FINANCIAL UI V1 STYLES */
.bls-wallet-card{grid-column:1/-1}
.bls-wallet-balance-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}
.bls-wallet-balance-grid>div{padding:16px;border:1px solid rgba(132,199,255,.14);border-radius:14px;background:rgba(255,255,255,.025)}
.bls-wallet-balance-grid span{display:block;margin-bottom:8px;font-size:12px;color:rgba(205,220,232,.68)}
.bls-wallet-balance-grid strong{font-size:20px;color:#f4fbff}
.bls-wallet-deposit-box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end}
.bls-wallet-deposit-box label,.bls-withdrawal-amount-field{color:rgba(215,230,241,.78);font-size:12px}
.bls-wallet-deposit-box input,.bls-withdrawal-amount-field input{width:100%;min-height:44px;margin-top:8px;padding:0 14px;border:1px solid rgba(132,199,255,.18);border-radius:10px;background:rgba(3,13,23,.72);color:#fff;outline:none}
.bls-financial-message{min-height:20px;margin-top:12px;font-size:12px}
.bls-financial-message[data-type="success"]{color:#9fe6c3}
.bls-financial-message[data-type="error"]{color:#ffb4b4}
#partnerWithdrawalView .bls-withdrawal-amount-field{display:block;margin:18px 0}
.bls-admin-financial-row{display:grid;grid-template-columns:34px minmax(115px,1.1fr) minmax(90px,.8fr) minmax(110px,1fr) minmax(125px,1.1fr) minmax(105px,.9fr) minmax(110px,1fr) 70px 90px minmax(130px,1fr) minmax(150px,1.2fr);align-items:center;min-width:1180px;border-top:1px solid rgba(255,255,255,.06)}
.bls-admin-financial-row>span{padding:13px 9px;font-size:11px;color:rgba(224,235,243,.78);overflow-wrap:anywhere}
.bls-admin-financial-actions{display:flex;gap:6px}
.bls-admin-financial-actions button{padding:7px 9px;border-radius:7px;border:1px solid rgba(116,189,238,.22);background:rgba(16,47,70,.64);color:#eaf8ff;font-size:9px;font-weight:800;cursor:pointer}
@media(max-width:800px){.bls-wallet-balance-grid{grid-template-columns:1fr}.bls-wallet-deposit-box{grid-template-columns:1fr}}
/* BLS FINANCIAL UI V1 STYLES */

/* =========================================================
   SCREEN 00 MOBILE RESPONSIVE V1
   Desktop untouched
   ========================================================= */
@media (max-width:760px){

  body.screen00-active{
    overflow-x:hidden !important;
    overflow-y:auto !important;
    background:#000 !important;
  }

  body.screen00-active > .shell{
    width:100% !important;
    height:auto !important;
    min-height:100svh !important;
  }

  body.screen00-active #blsAiHomeView.active{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:auto !important;
    min-height:100svh !important;
    display:block !important;
    overflow:visible !important;
    background:#000 !important;
  }

  #blsAiHomeView .bls-screen00-stage{
    position:relative !important;
    width:100% !important;
    height:auto !important;
    min-height:100svh !important;
    overflow:hidden !important;
    background:#000 !important;
    padding-bottom:24px !important;
  }

  #blsAiHomeView .bls-screen00-bg{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:auto !important;
    min-height:52svh !important;
    object-fit:cover !important;
    object-position:center top !important;
    display:block !important;
  }

  #blsAiHomeView .bls-screen00-account{
    position:absolute !important;
    top:14px !important;
    right:14px !important;
    left:14px !important;
    justify-content:flex-end !important;
    gap:8px !important;
    z-index:30 !important;
  }

  #blsAiHomeView .bls-screen00-account button{
    height:38px !important;
    padding:0 13px !important;
    font-size:10px !important;
    border-radius:9px !important;
  }

  #blsAiHomeView .bls-screen00-nav{
    position:relative !important;
    left:auto !important;
    bottom:auto !important;
    transform:none !important;
    width:calc(100% - 28px) !important;
    margin:-18px auto 0 !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    z-index:40 !important;
  }

  #blsAiHomeView .screen00-card{
    width:100% !important;
    min-height:118px !important;
    padding:16px 18px !important;
    display:grid !important;
    grid-template-columns:52px 1fr 34px !important;
    grid-template-rows:auto auto !important;
    column-gap:14px !important;
    row-gap:3px !important;
    align-items:center !important;
    text-align:left !important;
    border-radius:16px !important;
  }

  #blsAiHomeView .screen00-icon{
    width:48px !important;
    height:48px !important;
    grid-row:1 / 3 !important;
    font-size:16px !important;
  }

  #blsAiHomeView .screen00-card strong{
    margin:0 !important;
    font-size:17px !important;
    text-align:left !important;
  }

  #blsAiHomeView .screen00-card small{
    font-size:11px !important;
    text-align:left !important;
  }

  #blsAiHomeView .screen00-card i{
    grid-column:3 !important;
    grid-row:1 / 3 !important;
    margin:0 !important;
    width:32px !important;
    height:32px !important;
  }
}

@media (max-width:420px){
  #blsAiHomeView .bls-screen00-bg{
    min-height:48svh !important;
    object-position:52% top !important;
  }

  #blsAiHomeView .bls-screen00-account{
    top:10px !important;
    right:10px !important;
    left:10px !important;
  }

  #blsAiHomeView .bls-screen00-account button{
    height:36px !important;
    padding:0 10px !important;
    font-size:9px !important;
  }

  #blsAiHomeView .bls-screen00-nav{
    width:calc(100% - 20px) !important;
  }
}

/* =========================================================
   BLS GLOBAL MOBILE RESPONSIVE V1
   Applies to <= 760px only — desktop untouched
   ========================================================= */

@media (max-width:760px){

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

  img,
  svg,
  video,
  canvas{
    max-width:100%;
  }

  .shell{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }

  /* ===== COMMON APP SHELLS ===== */

  .platform-app-shell,
  .customer-shell,
  .partner-shell,
  .admin-shell,
  .dynamic-shell{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    grid-template-columns:1fr !important;
  }

  .platform-main,
  .customer-main,
  .partner-main,
  .admin-main,
  .dynamic-workspace{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  /* ===== SIDEBARS ===== */

  .platform-sidebar,
  .customer-sidebar,
  .partner-sidebar,
  .admin-sidebar,
  .dynamic-sidebar{
    position:relative !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:auto !important;
    height:auto !important;
    border-right:0 !important;
  }

  .platform-menu,
  .customer-nav,
  .partner-nav,
  .admin-nav,
  .workspace-nav{
    display:flex !important;
    grid-template-columns:none !important;
    gap:8px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding-bottom:6px !important;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }

  .platform-menu-item,
  .customer-nav-item,
  .partner-nav-item,
  .admin-nav-item,
  .workspace-nav-item{
    flex:0 0 auto !important;
    min-width:145px !important;
    max-width:180px !important;
    scroll-snap-align:start;
  }

  /* ===== TOP BARS ===== */

  .platform-topbar,
  .customer-topbar,
  .partner-topbar,
  .admin-topbar,
  .workspace-header{
    width:100% !important;
    height:auto !important;
    min-height:auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:12px !important;
    padding:14px !important;
  }

  .platform-search,
  .customer-search,
  .partner-search,
  .admin-search{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }

  .platform-top-actions,
  .customer-top-actions,
  .partner-top-actions,
  .admin-top-actions{
    width:100% !important;
    max-width:100% !important;
    flex-wrap:wrap !important;
    justify-content:flex-start !important;
  }

  /* ===== HERO SECTIONS ===== */

  .hero,
  .platform-hero,
  .customer-hero,
  .order-review-hero,
  .foundation-security-hero{
    width:100% !important;
    max-width:100% !important;
    grid-template-columns:1fr !important;
  }

  .platform-hero-copy,
  .customer-hero-copy,
  .order-review-hero-copy{
    width:100% !important;
    max-width:100% !important;
    padding-left:20px !important;
    padding-right:20px !important;
  }

  .platform-hero h1{
    font-size:clamp(36px,11vw,52px) !important;
  }

  .customer-hero-copy h1,
  .order-review-hero-copy h1{
    font-size:clamp(32px,10vw,42px) !important;
  }

  /* ===== GLOBAL GRIDS ===== */

  .principles,
  .dashboard-grid,
  .account-detail-grid,
  .platform-experience-grid,
  .platform-bottom-grid,
  .platform-foundation-features,
  .customer-primary-grid,
  .customer-featured-grid,
  .customer-bottom-grid,
  .customer-hero-manifesto,
  .product-category-grid,
  .product-grid,
  .product-filter-bar,
  .product-detail-grid,
  .product-detail-feature-row,
  .product-detail-price-status,
  .product-detail-buy-row,
  .product-detail-benefit-row,
  .product-detail-policy-grid,
  .order-review-grid,
  .shipping-info-grid,
  .delivery-info-grid,
  .admin-status-grid,
  .form-grid,
  .bls-wallet-balance-grid{
    grid-template-columns:1fr !important;
  }

  /* ===== PRODUCT DISCOVERY ===== */

  .product-discovery-content,
  .product-detail-content,
  .order-review-content{
    width:calc(100% - 24px) !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .product-discovery-copy{
    width:100% !important;
    max-width:100% !important;
  }

  .product-discovery-hero{
    min-height:auto !important;
    padding:24px 18px !important;
  }

  .product-detail-main-image{
    width:100% !important;
    height:min(78vw,420px) !important;
  }

  .product-detail-thumbnails{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  .product-detail-head{
    grid-template-columns:1fr !important;
  }

  .product-detail-tabs{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  /* ===== ORDER / CHECKOUT ===== */

  .order-review-main,
  .order-review-layout{
    grid-template-columns:1fr !important;
  }

  .order-product-row{
    grid-template-columns:90px minmax(0,1fr) !important;
    gap:12px !important;
  }

  /* ===== TABLES ===== */

  table{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
  }

  /* ===== FORMS / BUTTONS ===== */

  input,
  select,
  textarea,
  button{
    max-width:100%;
  }

  .hero-actions,
  .customer-hero-actions{
    width:100% !important;
    flex-wrap:wrap !important;
  }

  /* ===== BLS AI CHAT ===== */

  .bls-ai-chat-shell{
    width:100% !important;
    max-width:100% !important;
    min-height:100svh !important;
    grid-template-columns:1fr !important;
  }

  .bls-ai-chat-visual{
    min-height:300px !important;
  }

  .bls-ai-chat-main{
    width:100% !important;
    min-width:0 !important;
  }

  .bls-ai-suggestions{
    overflow-x:auto !important;
    flex-wrap:nowrap !important;
    -webkit-overflow-scrolling:touch;
  }

  .bls-ai-suggestions button{
    flex:0 0 auto;
  }

  /* ===== SCREEN 00 / BLS AI HOME ===== */

  body.screen00-active{
    overflow-x:hidden !important;
    overflow-y:auto !important;
    background:#000 !important;
  }

  body.screen00-active > .shell{
    width:100% !important;
    height:auto !important;
    min-height:100svh !important;
    padding:0 !important;
  }

  body.screen00-active #blsAiHomeView.active{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:auto !important;
    min-height:100svh !important;
    display:block !important;
    overflow:visible !important;
    background:#000 !important;
  }

  #blsAiHomeView .bls-screen00-stage{
    position:relative !important;
    width:100% !important;
    height:auto !important;
    min-height:100svh !important;
    overflow:hidden !important;
    padding-bottom:24px !important;
    background:#000 !important;
  }

  #blsAiHomeView .bls-screen00-bg{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:auto !important;
    min-height:50svh !important;
    object-fit:cover !important;
    object-position:center top !important;
    display:block !important;
  }

  #blsAiHomeView .bls-screen00-account{
    position:absolute !important;
    top:12px !important;
    left:12px !important;
    right:12px !important;
    display:flex !important;
    justify-content:flex-end !important;
    gap:8px !important;
    z-index:30 !important;
  }

  #blsAiHomeView .bls-screen00-account button{
    height:38px !important;
    padding:0 12px !important;
    font-size:10px !important;
  }

  #blsAiHomeView .bls-screen00-nav{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    width:calc(100% - 24px) !important;
    margin:-16px auto 0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    z-index:40 !important;
  }

  #blsAiHomeView .screen00-card{
    width:100% !important;
    min-height:112px !important;
    padding:16px !important;
    display:grid !important;
    grid-template-columns:52px minmax(0,1fr) 34px !important;
    grid-template-rows:auto auto !important;
    column-gap:14px !important;
    row-gap:3px !important;
    align-items:center !important;
    text-align:left !important;
  }

  #blsAiHomeView .screen00-icon{
    grid-row:1 / 3 !important;
  }

  #blsAiHomeView .screen00-card strong,
  #blsAiHomeView .screen00-card small{
    text-align:left !important;
  }

  #blsAiHomeView .screen00-card i{
    grid-column:3 !important;
    grid-row:1 / 3 !important;
  }
}

@media (max-width:420px){

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

  .platform-menu-item,
  .customer-nav-item,
  .partner-nav-item,
  .admin-nav-item,
  .workspace-nav-item{
    min-width:132px !important;
  }

  .product-detail-thumbnails{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  #blsAiHomeView .bls-screen00-bg{
    min-height:46svh !important;
    object-position:52% top !important;
  }

  #blsAiHomeView .bls-screen00-nav{
    width:calc(100% - 16px) !important;
  }
}

/* END BLS GLOBAL MOBILE RESPONSIVE V1 */

/* =========================================================
   BLS MOBILE RESCUE V2
   TRUE MOBILE LAYOUT — DESKTOP UNTOUCHED
   ========================================================= */

@media (max-width:760px){

  *{
    box-sizing:border-box;
  }

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

  body{
    min-width:0 !important;
  }

  .view,
  .view.active{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    overflow-x:hidden !important;
  }

  .view.active *{
    min-width:0;
  }

  img,
  picture,
  video,
  canvas,
  svg{
    max-width:100% !important;
    height:auto;
  }

  /* ======================================================
     GLOBAL TOP HEADER
     ====================================================== */

  body:not(.screen00-active) > .topbar{
    width:100% !important;
    max-width:100% !important;
    min-height:auto !important;
    height:auto !important;
    padding:12px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:10px !important;
    align-items:center !important;
  }

  body:not(.screen00-active) > .topbar .brand{
    min-width:0 !important;
    width:auto !important;
  }

  body:not(.screen00-active) > .topbar .brand-mark{
    width:46px !important;
    height:46px !important;
    flex:0 0 46px !important;
  }

  body:not(.screen00-active) > .topbar .brand-copy{
    min-width:0 !important;
  }

  body:not(.screen00-active) > .topbar .brand-copy strong{
    font-size:15px !important;
  }

  body:not(.screen00-active) > .topbar .brand-copy small{
    font-size:9px !important;
    white-space:normal !important;
  }

  body:not(.screen00-active) > .topbar .top-actions{
    width:auto !important;
    min-width:0 !important;
    gap:6px !important;
  }

  body:not(.screen00-active) > .topbar .account-badge{
    max-width:130px !important;
    padding:8px 9px !important;
    font-size:10px !important;
    overflow-wrap:anywhere !important;
  }

  body:not(.screen00-active) > .topbar .button{
    min-width:0 !important;
    padding:0 10px !important;
    font-size:10px !important;
  }

  /* ======================================================
     MAIN SHELL
     ====================================================== */

  body:not(.screen00-active) > .shell,
  .shell{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* ======================================================
     GENERIC TWO-COLUMN DESKTOP LAYOUTS -> ONE COLUMN
     ====================================================== */

  .platform-shell,
  .platform-app-shell,
  .customer-shell,
  .partner-shell,
  .admin-shell,
  .dynamic-shell,
  .bls-ai-chat-shell,
  .product-detail-shell,
  .order-detail-shell,
  .profile-shell,
  .account-security-shell{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    display:block !important;
    grid-template-columns:1fr !important;
    margin:0 !important;
  }

  .platform-main,
  .customer-main,
  .partner-main,
  .admin-main,
  .dynamic-workspace,
  .bls-ai-chat-main{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
  }

  /* ======================================================
     SIDEBARS -> MOBILE HORIZONTAL MENU
     ====================================================== */

  .platform-sidebar,
  .customer-sidebar,
  .partner-sidebar,
  .admin-sidebar,
  .dynamic-sidebar{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    padding:14px 12px !important;
    border-right:0 !important;
    border-bottom:1px solid rgba(100,170,220,.13) !important;
    overflow:hidden !important;
  }

  .platform-menu,
  .customer-nav,
  .partner-nav,
  .admin-nav,
  .workspace-nav{
    width:100% !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    grid-template-columns:none !important;
    gap:8px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .platform-menu::-webkit-scrollbar,
  .customer-nav::-webkit-scrollbar,
  .partner-nav::-webkit-scrollbar,
  .admin-nav::-webkit-scrollbar,
  .workspace-nav::-webkit-scrollbar{
    display:none;
  }

  .platform-menu-item,
  .customer-nav-item,
  .partner-nav-item,
  .admin-nav-item,
  .workspace-nav-item{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:128px !important;
    max-width:170px !important;
  }

  /* ======================================================
     TOPBARS INSIDE CUSTOMER / PARTNER / ADMIN
     ====================================================== */

  .platform-topbar,
  .customer-topbar,
  .partner-topbar,
  .admin-topbar{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    padding:12px !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    align-items:stretch !important;
  }

  .platform-search,
  .customer-search,
  .partner-search,
  .admin-search{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .platform-search input,
  .customer-search input,
  .partner-search input,
  .admin-search input{
    width:100% !important;
    min-width:0 !important;
    font-size:13px !important;
  }

  .platform-top-actions,
  .customer-top-actions,
  .partner-top-actions,
  .admin-top-actions{
    width:100% !important;
    max-width:100% !important;
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
  }

  /* ======================================================
     HOME / PLATFORM LANDING
     ====================================================== */

  #homeView{
    padding:0 !important;
  }

  #homeView .hero{
    width:100% !important;
    max-width:100% !important;
    min-height:auto !important;
    margin:0 !important;
    padding:32px 18px !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:26px !important;
    overflow:hidden !important;
  }

  #homeView .hero-copy,
  #homeView .hero-panel{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
  }

  #homeView .hero-copy h1{
    font-size:clamp(38px,12vw,58px) !important;
    line-height:1.02 !important;
    overflow-wrap:anywhere !important;
  }

  #homeView .hero-copy p{
    width:100% !important;
    max-width:100% !important;
    font-size:15px !important;
  }

  #homeView .hero-panel{
    min-height:330px !important;
  }

  /* ======================================================
     PLATFORM VIEW
     ====================================================== */

  #platformView,
  #platformView .platform-main{
    width:100% !important;
    max-width:100% !important;
  }

  #platformView .platform-content,
  #platformView .platform-page,
  #platformView .platform-home{
    width:100% !important;
    max-width:100% !important;
    padding-left:16px !important;
    padding-right:16px !important;
  }

  #platformView .platform-hero{
    width:100% !important;
    max-width:100% !important;
    min-height:auto !important;
    height:auto !important;
    display:block !important;
    padding:30px 18px !important;
    overflow:hidden !important;
  }

  #platformView .platform-hero-copy{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    transform:none !important;
  }

  #platformView .platform-hero-copy h1{
    font-size:clamp(42px,13vw,64px) !important;
    line-height:.96 !important;
  }

  #platformView .platform-hero-overlay,
  #platformView .platform-hero-globe{
    position:relative !important;
    inset:auto !important;
    right:auto !important;
    top:auto !important;
    transform:none !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    margin:22px auto 0 !important;
  }

  /* ======================================================
     COMMON GRIDS -> ONE COLUMN
     ====================================================== */

  .dashboard-grid,
  .account-detail-grid,
  .platform-experience-grid,
  .platform-bottom-grid,
  .platform-foundation-features,
  .customer-primary-grid,
  .customer-featured-grid,
  .customer-bottom-grid,
  .product-category-grid,
  .product-grid,
  .product-filter-bar,
  .order-review-grid,
  .shipping-info-grid,
  .delivery-info-grid,
  .admin-status-grid,
  .admin-summary-grid,
  .admin-grid,
  .financial-grid,
  .bls-wallet-balance-grid,
  .foundation-security-grid,
  .system-state-grid{
    width:100% !important;
    max-width:100% !important;
    grid-template-columns:1fr !important;
  }

  /* ======================================================
     PRODUCT DETAIL — CRITICAL FIX
     ====================================================== */

  #productDetailView,
  #productDetailView .customer-shell,
  #productDetailView .customer-main{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  #productDetailView .product-detail-content{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:20px 16px 40px !important;
  }

  #productDetailView .product-detail-grid,
  #productDetailView .product-detail-layout,
  #productDetailView .product-detail-main,
  #productDetailView .product-detail-hero{
    width:100% !important;
    max-width:100% !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:22px !important;
  }

  #productDetailView .product-detail-gallery,
  #productDetailView .product-detail-info,
  #productDetailView .product-detail-copy{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
  }

  #productDetailView .product-detail-main-image{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    aspect-ratio:4 / 5 !important;
    min-height:0 !important;
  }

  #productDetailView .product-detail-main-image img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }

  #productDetailView h1{
    font-size:clamp(34px,10vw,48px) !important;
    line-height:1.03 !important;
    overflow-wrap:anywhere !important;
  }

  #productDetailView .product-detail-feature-row,
  #productDetailView .product-detail-benefit-row,
  #productDetailView .product-detail-policy-grid,
  #productDetailView .product-detail-price-status,
  #productDetailView .product-detail-buy-row{
    width:100% !important;
    max-width:100% !important;
    grid-template-columns:1fr !important;
  }

  #productDetailView .product-detail-tabs{
    width:100% !important;
    max-width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
  }

  #productDetailView .product-detail-tabs button{
    width:100% !important;
    min-width:0 !important;
    white-space:normal !important;
    font-size:11px !important;
    padding:10px 6px !important;
  }

  /* ======================================================
     CUSTOMER / PARTNER / ADMIN CONTENT
     ====================================================== */

  .customer-content,
  .partner-content,
  .admin-content,
  .workspace-content,
  .dynamic-content{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .customer-content h1,
  .partner-content h1,
  .admin-content h1,
  .dynamic-content h1{
    max-width:100% !important;
    font-size:clamp(30px,9vw,42px) !important;
    overflow-wrap:anywhere !important;
  }

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

  article,
  .dashboard-card,
  .module-state-card,
  .customer-primary-card,
  .product-card,
  .admin-card{
    max-width:100% !important;
    min-width:0 !important;
  }

  /* ======================================================
     TABLES
     ====================================================== */

  .table-wrap,
  .admin-table-wrap,
  .financial-table-wrap{
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  table{
    width:max-content !important;
    min-width:100% !important;
    max-width:none !important;
    display:table !important;
  }

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

  form,
  fieldset,
  input,
  select,
  textarea{
    min-width:0 !important;
    max-width:100% !important;
  }

  .form-grid{
    grid-template-columns:1fr !important;
  }

  /* ======================================================
     BLS AI CHAT
     ====================================================== */

  #blsAiChatView .bls-ai-chat-shell{
    width:100% !important;
    max-width:100% !important;
    min-height:100svh !important;
    display:block !important;
  }

  #blsAiChatView .bls-ai-chat-visual{
    width:100% !important;
    min-height:420px !important;
    height:auto !important;
  }

  #blsAiChatView .bls-ai-chat-main{
    width:100% !important;
    padding:16px !important;
  }

  /* ======================================================
     SCREEN 00 — KEEP CURRENT GOOD MOBILE VERSION
     ====================================================== */

  body.screen00-active #blsAiHomeView.active{
    width:100% !important;
    max-width:100% !important;
    overflow:visible !important;
  }

  #blsAiHomeView .bls-screen00-stage{
    width:100% !important;
    max-width:100% !important;
  }

  #blsAiHomeView .bls-screen00-bg{
    width:100% !important;
    max-width:100% !important;
  }

  #blsAiHomeView .bls-screen00-nav{
    width:calc(100% - 24px) !important;
    max-width:calc(100% - 24px) !important;
    grid-template-columns:1fr !important;
  }

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

  .platform-mobile-nav,
  .customer-mobile-nav,
  .partner-mobile-nav,
  .mobile-bottom-nav{
    width:100% !important;
    max-width:100% !important;
    left:0 !important;
    right:0 !important;
  }
}

@media (max-width:420px){

  body:not(.screen00-active) > .topbar{
    grid-template-columns:1fr !important;
  }

  body:not(.screen00-active) > .topbar .top-actions{
    width:100% !important;
    justify-content:flex-start !important;
  }

  #productDetailView .product-detail-tabs{
    grid-template-columns:1fr 1fr !important;
  }

  #homeView .hero{
    padding:24px 14px !important;
  }
}

/* END BLS MOBILE RESCUE V2 */

/* =========================================================
   BLS MOBILE MASTER V3
   AUTO-COVERS ALL REGISTERED VIEWS
   DESKTOP >= 761px UNTOUCHED
   ========================================================= */

@media (max-width:760px){

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

  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView){
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:100svh !important;
    margin:0 !important;
    overflow-x:hidden !important;
  }

  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) *{
    box-sizing:border-box !important;
    min-width:0 !important;
    max-width:100%;
  }

  /* ---------- MAIN APPLICATION SHELLS ---------- */

  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .platform-shell,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .platform-app-shell,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .customer-shell,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .partner-shell,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .admin-shell,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .dynamic-shell,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .workspace-shell,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .product-detail-shell,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .order-detail-shell,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .profile-shell,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .account-security-shell,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .bls-ai-chat-shell{
    position:relative !important;
    inset:auto !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    grid-template-columns:1fr !important;
    overflow:visible !important;
  }

  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .platform-main,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .customer-main,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .partner-main,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .admin-main,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .dynamic-workspace,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .workspace-main,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .bls-ai-chat-main{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    margin:0 !important;
    transform:none !important;
    overflow:visible !important;
  }

  /* ---------- SIDEBARS ---------- */

  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .platform-sidebar,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .customer-sidebar,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .partner-sidebar,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .admin-sidebar,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .dynamic-sidebar{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:12px !important;
    border-right:0 !important;
    overflow:hidden !important;
    transform:none !important;
  }

  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .customer-sidebar-vision,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .partner-sidebar-vision,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .platform-sidebar-vision,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .admin-sidebar-vision{
    display:none !important;
  }

  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .platform-menu,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .customer-nav,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .partner-nav,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .admin-nav,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .workspace-nav{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    width:100% !important;
    max-width:100% !important;
    grid-template-columns:none !important;
    gap:8px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
  }

  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .platform-menu-item,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .customer-nav-item,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .partner-nav-item,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .admin-nav-item,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .workspace-nav-item{
    flex:0 0 138px !important;
    width:138px !important;
    min-width:138px !important;
    max-width:138px !important;
    height:auto !important;
    white-space:normal !important;
  }

  /* ---------- INTERNAL TOPBARS ---------- */

  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .platform-topbar,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .customer-topbar,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .partner-topbar,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .admin-topbar,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) [class*="-topbar"]{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    padding:10px 12px !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:9px !important;
    transform:none !important;
  }

  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .platform-search,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .customer-search,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .partner-search,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .admin-search,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) [class*="-search"]{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) [class*="-search"] input{
    width:100% !important;
    min-width:0 !important;
  }

  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .platform-top-actions,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .customer-top-actions,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .partner-top-actions,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .admin-top-actions,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) [class*="-top-actions"]{
    position:relative !important;
    width:100% !important;
    display:flex !important;
    flex-wrap:wrap !important;
    gap:7px !important;
    transform:none !important;
  }

  /* ---------- EVERY PAGE CONTENT ---------- */

  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) [class*="-content"]{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:14px !important;
    padding-right:14px !important;
    transform:none !important;
    overflow:visible !important;
  }

  /* ---------- ALL DESKTOP GRIDS / LAYOUTS ---------- */

  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) [class*="-grid"],
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) [class*="-layout"]{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    grid-template-columns:1fr !important;
  }

  /* desktop grid rows that are not real HTML tables */
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .order-product-row,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .order-detail-product-row,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .purchase-order-row,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .partner-benefit-row,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .partner-referral-row,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .partner-commission-row,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .partner-incentive-row,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .partner-settlement-row{
    width:100% !important;
    max-width:100% !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  /* ---------- HERO SECTIONS ---------- */

  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) [class*="-hero"]{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
    transform:none !important;
    overflow:hidden !important;
  }

  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) [class*="-hero-copy"]{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    transform:none !important;
  }

  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) [class*="-hero"] h1{
    max-width:100% !important;
    font-size:clamp(30px,9vw,44px) !important;
    line-height:1.05 !important;
    overflow-wrap:anywhere !important;
  }

  /* ---------- PRODUCT / ORDER / PAYMENT STRUCTURAL FIX ---------- */

  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) [class*="-gallery"],
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) [class*="-info"],
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) [class*="-summary"],
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) [class*="-side"],
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) [class*="-details"],
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) [class*="-copy"],
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) [class*="-panel"]{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    max-width:100% !important;
    min-width:0 !important;
    transform:none !important;
  }

  #productDetailView.view.active .product-detail-content,
  #productDetailView.view.active .product-detail-grid,
  #productDetailView.view.active .product-detail-layout,
  #productDetailView.view.active .product-detail-gallery,
  #productDetailView.view.active .product-detail-info{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    transform:none !important;
  }

  #productDetailView.view.active .product-detail-main-image{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:4 / 5 !important;
    transform:none !important;
    overflow:hidden !important;
  }

  #productDetailView.view.active .product-detail-main-image img{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    transform:none !important;
  }

  #orderReviewView.view.active .order-review-grid,
  #paymentView.view.active [class*="-grid"],
  #paymentProcessingView.view.active [class*="-grid"],
  #orderConfirmationView.view.active [class*="-grid"],
  #orderDetailView.view.active [class*="-grid"]{
    grid-template-columns:1fr !important;
  }

  /* ---------- PROGRESS / JOURNEY ---------- */

  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) [class*="-progress"],
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) [class*="-journey-flow"]{
    max-width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
  }

  /* ---------- IMAGES ---------- */

  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) img,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) picture,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) video,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) canvas,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) svg{
    max-width:100% !important;
  }

  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) img{
    object-position:center !important;
  }

  /* ---------- TEXT SAFETY ---------- */

  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) h1,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) h2,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) h3,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) h4,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) p,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) strong,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) small,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) span,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) label,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) button,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) a{
    max-width:100% !important;
    overflow-wrap:anywhere !important;
  }

  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) p,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) small,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) label{
    white-space:normal !important;
  }

  /* ---------- FORMS ---------- */

  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) form,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) fieldset,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) input,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) select,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) textarea{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) button{
    min-width:0 !important;
  }

  /* ---------- TABLES ---------- */

  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) table{
    max-width:none !important;
  }

  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .table-wrap,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .admin-table-wrap,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) .financial-table-wrap,
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) [class*="-table"]{
    max-width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  /* ---------- FIXED / ABSOLUTE STRUCTURAL BLOCKS ---------- */

  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) [class*="-breadcrumb"],
  :is(#accountSecurityView,#adminBenefitCommissionView,#adminCustomerPartnerView,#adminDashboardView,#adminFinancialView,#adminGovernanceView,#adminKycTaxRiskView,#adminOrderView,#adminPaymentView,#adminPerformanceView,#adminProductPolicyView,#benefitDetailView,#benefitHistoryView,#blsAiChatView,#blsAiHomeView,#customerHomeView,#dashboardView,#homeView,#loginView,#myBenefitsView,#myPurchasesView,#orderConfirmationView,#orderDetailView,#orderReviewView,#partnerBenefitsView,#partnerCommissionDetailView,#partnerCommissionView,#partnerHomeView,#partnerIncentiveDetailView,#partnerIncentivesView,#partnerKycTaxView,#partnerPaymentMethodView,#partnerPerformanceView,#partnerReferralDetailView,#partnerReferralView,#partnerSettlementHistoryView,#partnerWithdrawableView,#partnerWithdrawalView,#paymentProcessingView,#paymentView,#platformView,#productDetailView,#productDiscoveryView,#profileView,#registerView,#securityView,#systemStateView,#verifyView).view.active:not(#blsAiHomeView) [class*="-footer"]{
    max-width:100% !important;
  }
}

/* END BLS MOBILE MASTER V3 */

/* =========================================================
   BLS MOBILE PLATFORM FINAL FIX
   Fix final 4px left drift detected by Render Audit V5
   ========================================================= */
@media (max-width:760px){

  #platformView.view.active .platform-top-actions{
    position:relative !important;
    inset:auto !important;
    left:0 !important;
    right:auto !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    transform:none !important;
    width:100% !important;
    max-width:100% !important;
    justify-content:flex-start !important;
  }

  #platformView.view.active .platform-top-actions > button{
    position:relative !important;
    left:0 !important;
    right:auto !important;
    margin-left:0 !important;
    transform:none !important;
  }
}

/* END BLS MOBILE PLATFORM FINAL FIX */

/* =========================================================
   BLS MOBILE UX V8.1 TARGETED FIX
   Visual usability pass — mobile only
   ========================================================= */
@media (max-width:760px){

  /* ---------------------------------------------------------
     SCREEN 00 — SHOW COMPLETE MASTER ARTWORK, NO MOBILE CROP
     --------------------------------------------------------- */
  body.screen00-active #blsAiHomeView .bls-screen00-stage{
    min-height:0 !important;
    height:auto !important;
    overflow:visible !important;
  }

  body.screen00-active #blsAiHomeView .bls-screen00-bg{
    position:relative !important;
    inset:auto !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center top !important;
  }

  body.screen00-active #blsAiHomeView .bls-screen00-nav{
    margin-top:-8px !important;
  }

  /* ---------------------------------------------------------
     PLATFORM HERO — CLEAN MOBILE STACK
     --------------------------------------------------------- */
  #platformView.view.active .platform-hero{
    min-height:0 !important;
    height:auto !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  #platformView.view.active .platform-hero-copy{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    max-width:100% !important;
    padding:32px 20px 26px !important;
    transform:none !important;
  }

  #platformView.view.active .platform-hero h1{
    margin-top:4px !important;
    font-size:clamp(42px,13vw,54px) !important;
    line-height:.98 !important;
  }

  #platformView.view.active .platform-manifesto{
    margin-top:18px !important;
    gap:7px !important;
  }

  #platformView.view.active .platform-hero-desc{
    margin-top:18px !important;
    line-height:1.65 !important;
  }

  #platformView.view.active .platform-journey-entry{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:100% !important;
    max-width:100% !important;
    margin:18px 0 0 !important;
    padding:0 !important;
    transform:none !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:2px !important;
    text-align:left !important;
  }

  #platformView.view.active .platform-journey-entry span{
    width:auto !important;
    max-width:100% !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
  }

  #platformView.view.active .platform-mobile-cta{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    margin:18px 0 0 !important;
    transform:none !important;
  }

  /* ---------------------------------------------------------
     BENEFIT HISTORY — DESKTOP TABLE BECOMES MOBILE CARDS
     --------------------------------------------------------- */
  #benefitHistoryView.view.active .benefit-history-table-card{
    width:100% !important;
    max-width:100% !important;
    overflow:visible !important;
    border:0 !important;
    background:transparent !important;
    display:grid !important;
    gap:14px !important;
  }

  #benefitHistoryView.view.active .benefit-history-table-row.head{
    display:none !important;
  }

  #benefitHistoryView.view.active .benefit-history-table-row:not(.head){
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
    min-height:0 !important;
    padding:16px !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:0 !important;
    align-items:stretch !important;
    border:1px solid rgba(92,165,212,.18) !important;
    border-radius:14px !important;
    background:rgba(7,17,26,.96) !important;
  }

  #benefitHistoryView.view.active .benefit-history-table-row:not(.head) > span{
    position:relative !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    padding:10px 0 !important;
    display:grid !important;
    grid-template-columns:118px minmax(0,1fr) !important;
    gap:12px !important;
    align-items:start !important;
    border-bottom:1px solid rgba(255,255,255,.055) !important;
    font-size:13px !important;
    line-height:1.45 !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }

  #benefitHistoryView.view.active .benefit-history-table-row:not(.head) > span:last-child{
    border-bottom:0 !important;
    padding-bottom:0 !important;
  }

  #benefitHistoryView.view.active .benefit-history-table-row:not(.head) > span::before{
    color:rgba(158,181,197,.64) !important;
    font-size:10px !important;
    font-weight:700 !important;
    letter-spacing:.08em !important;
    text-transform:uppercase !important;
  }

  #benefitHistoryView.view.active .benefit-history-table-row:not(.head) > span:nth-child(1)::before{content:"STT";}
  #benefitHistoryView.view.active .benefit-history-table-row:not(.head) > span:nth-child(2)::before{content:"Quyền lợi";}
  #benefitHistoryView.view.active .benefit-history-table-row:not(.head) > span:nth-child(3)::before{content:"Mô tả";}
  #benefitHistoryView.view.active .benefit-history-table-row:not(.head) > span:nth-child(4)::before{content:"Nguồn";}
  #benefitHistoryView.view.active .benefit-history-table-row:not(.head) > span:nth-child(5)::before{content:"Tham chiếu";}
  #benefitHistoryView.view.active .benefit-history-table-row:not(.head) > span:nth-child(6)::before{content:"Trạng thái";}
  #benefitHistoryView.view.active .benefit-history-table-row:not(.head) > span:nth-child(7)::before{content:"Cập nhật";}
  #benefitHistoryView.view.active .benefit-history-table-row:not(.head) > span:nth-child(8)::before{content:"Thao tác";}

  #benefitHistoryView.view.active .history-status{
    display:inline-flex !important;
    width:max-content !important;
    max-width:100% !important;
    white-space:normal !important;
  }

  #benefitHistoryView.view.active .benefit-history-table-row button{
    width:100% !important;
    min-height:42px !important;
    white-space:normal !important;
  }

  /* ---------------------------------------------------------
     DENSE DATA ROWS — DO NOT BREAK WORDS INTO VERTICAL LETTERS
     --------------------------------------------------------- */
  #partnerCommissionView.view.active .partner-commission-row,
  #partnerIncentivesView.view.active .partner-incentive-row,
  #partnerSettlementHistoryView.view.active .partner-settlement-row{
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
  }

  #partnerCommissionView.view.active .partner-commission-row > *,
  #partnerIncentivesView.view.active .partner-incentive-row > *,
  #partnerSettlementHistoryView.view.active .partner-settlement-row > *{
    min-width:0 !important;
    max-width:100% !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
  }
}

@media (max-width:420px){
  #benefitHistoryView.view.active .benefit-history-table-row:not(.head) > span{
    grid-template-columns:96px minmax(0,1fr) !important;
    gap:10px !important;
    font-size:12px !important;
  }

  body.screen00-active #blsAiHomeView .bls-screen00-bg{
    min-height:0 !important;
    object-position:center top !important;
  }
}

/* END BLS MOBILE UX V8.1 TARGETED FIX */
/* =========================================================
   MOBILE UX V8.2 — MY BENEFITS / RECENT ACTIVITY
   Convert desktop table → premium mobile cards
   ========================================================= */

@media (max-width:760px){

  #myBenefitsView .benefit-activity-card{
    overflow:visible !important;
  }

  #myBenefitsView .benefit-activity-table{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    overflow:visible !important;
    width:100% !important;
  }

  /* Hide desktop table header */
  #myBenefitsView .benefit-table-row.benefit-table-head{
    display:none !important;
  }

  /* Each table row becomes one mobile card */
  #myBenefitsView .benefit-activity-table
  .benefit-table-row:not(.benefit-table-head){
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:8px 14px !important;
    align-items:center !important;

    padding:16px !important;
    margin:0 !important;

    border:1px solid rgba(93,166,211,.18) !important;
    border-radius:14px !important;

    background:
      linear-gradient(
        145deg,
        rgba(13,30,44,.96),
        rgba(6,17,27,.98)
      ) !important;

    box-shadow:
      0 12px 30px rgba(0,0,0,.18) !important;
  }

  #myBenefitsView .benefit-activity-table
  .benefit-table-row:not(.benefit-table-head) > span{
    min-width:0 !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;

    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:anywhere !important;

    font-size:12px !important;
    line-height:1.45 !important;
  }

  /* 1 — Benefit name */
  #myBenefitsView .benefit-activity-table
  .benefit-table-row:not(.benefit-table-head) > span:nth-child(1){
    grid-column:1 / 2 !important;
    grid-row:1 !important;

    color:#f2f6f8 !important;
    font-size:14px !important;
    font-weight:700 !important;
  }

  /* 5 — Status */
  #myBenefitsView .benefit-activity-table
  .benefit-table-row:not(.benefit-table-head) > span:nth-child(5){
    grid-column:2 / 3 !important;
    grid-row:1 !important;
    justify-self:end !important;
  }

  #myBenefitsView .benefit-activity-table .table-status{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    min-height:26px !important;
    width:auto !important;

    padding:4px 9px !important;
    border-radius:999px !important;

    white-space:nowrap !important;
    font-size:9px !important;
    line-height:1 !important;
  }

  /* 2 — Description */
  #myBenefitsView .benefit-activity-table
  .benefit-table-row:not(.benefit-table-head) > span:nth-child(2){
    grid-column:1 / -1 !important;
    grid-row:2 !important;

    color:rgba(221,231,237,.72) !important;
    font-size:11px !important;
  }

  /* 3 — Source */
  #myBenefitsView .benefit-activity-table
  .benefit-table-row:not(.benefit-table-head) > span:nth-child(3){
    grid-column:1 / 2 !important;
    grid-row:3 !important;

    color:rgba(177,202,218,.58) !important;
    font-size:10px !important;
  }

  #myBenefitsView .benefit-activity-table
  .benefit-table-row:not(.benefit-table-head) > span:nth-child(3)::before{
    content:"Nguồn: ";
    color:rgba(177,202,218,.38) !important;
  }

  /* 4 — Reference */
  #myBenefitsView .benefit-activity-table
  .benefit-table-row:not(.benefit-table-head) > span:nth-child(4){
    grid-column:1 / 2 !important;
    grid-row:4 !important;

    color:rgba(177,202,218,.58) !important;
    font-size:10px !important;
  }

  #myBenefitsView .benefit-activity-table
  .benefit-table-row:not(.benefit-table-head) > span:nth-child(4)::before{
    content:"Tham chiếu: ";
    color:rgba(177,202,218,.38) !important;
  }

  /* 6 — Date */
  #myBenefitsView .benefit-activity-table
  .benefit-table-row:not(.benefit-table-head) > span:nth-child(6){
    grid-column:1 / 2 !important;
    grid-row:5 !important;

    color:rgba(177,202,218,.48) !important;
    font-size:9px !important;
  }

  /* 7 — Arrow/action */
  #myBenefitsView .benefit-activity-table
  .benefit-table-row:not(.benefit-table-head) > span:nth-child(7){
    grid-column:2 / 3 !important;
    grid-row:3 / 6 !important;

    align-self:end !important;
    justify-self:end !important;

    color:#e4b24f !important;
    font-size:18px !important;
  }
}
/* BLS AI & CHUYEN DOI SO V1.0 */
.bls-ai-page{--blsai-bg:var(--bls-bg,#050a10);--blsai-panel:var(--bls-surface,#0b1823);--blsai-panel2:var(--bls-surface-2,#0d2030);--blsai-line:rgba(223,232,241,.13);--blsai-silver:var(--bls-text,#f1f4f6);--blsai-muted:#a7b0ba;--blsai-gold:var(--accent,#d7a85b);--blsai-cyan:#7099a2;--blsai-serif:Inter,'Segoe UI',Arial,sans-serif;--blsai-sans:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif}
.bls-ai-page{background:var(--blsai-bg);color:var(--blsai-silver);font-family:var(--blsai-sans);font-size:16px;line-height:1.65;isolation:isolate}.bls-ai-page *{box-sizing:border-box}.bls-ai-page img{display:block;max-width:100%;height:auto}.bls-ai-page h1,.bls-ai-page h2,.bls-ai-page h3,.bls-ai-page p,.bls-ai-page ol{margin:0}.bls-ai-page a{color:inherit;text-decoration:none}.bls-ai-page .blsai-container{width:min(1200px,calc(100% - 56px));margin-inline:auto}.bls-ai-page .blsai-hero{position:relative;display:flex;align-items:center;min-height:630px;overflow:hidden;background:#080d16 url('/assets/bls-ai/hero-ai.webp') center 52%/cover no-repeat;border-bottom:1px solid var(--blsai-line)}.bls-ai-page .blsai-hero:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,12,21,.97),rgba(7,12,21,.85) 35%,rgba(7,12,21,.38) 70%,rgba(7,12,21,.12)),linear-gradient(0deg,rgba(7,12,21,.38),transparent 46%)}.bls-ai-page .blsai-hero-content{position:relative;padding-block:88px;max-width:min(1200px,calc(100% - 56px));width:100%}.bls-ai-page .blsai-hero-content>*{max-width:640px}.bls-ai-page .blsai-eyebrow,.bls-ai-page .blsai-kicker{color:var(--blsai-gold);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px!important}.bls-ai-page h1{font:600 clamp(36px,4.3vw,58px)/1.09 var(--blsai-serif);letter-spacing:-.035em;margin-bottom:24px}.bls-ai-page h1 em{font-style:normal;color:var(--blsai-gold)}.bls-ai-page .blsai-lead{max-width:580px;color:#c7cdd4;font-size:15px;line-height:1.85}.bls-ai-page .blsai-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:29px}.bls-ai-page .blsai-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:10px 18px;border:1px solid rgba(200,171,117,.65);border-radius:2px;font-size:12px;font-weight:550;transition:background .2s,border-color .2s}.bls-ai-page .blsai-button:hover{background:rgba(200,171,117,.12);border-color:var(--blsai-gold)}.bls-ai-page .blsai-button-gold{background:var(--blsai-gold);color:#111820!important}.bls-ai-page .blsai-button-outline{color:var(--blsai-silver)}.bls-ai-page .blsai-section{padding:92px 0;border-bottom:1px solid var(--blsai-line)}.bls-ai-page .blsai-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:36px}.bls-ai-page h2{font:600 clamp(27px,3vw,40px)/1.16 var(--blsai-serif);letter-spacing:-.025em;max-width:720px}.bls-ai-page .blsai-intro{max-width:360px;color:var(--blsai-muted);font-size:13px}.bls-ai-page .blsai-audience-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.bls-ai-page .blsai-card{overflow:hidden;border:1px solid var(--blsai-line);background:var(--blsai-panel);transition:transform .2s,border-color .2s}.bls-ai-page .blsai-card:hover{transform:translateY(-3px);border-color:rgba(200,171,117,.45)}.bls-ai-page .blsai-card img{width:100%;aspect-ratio:1.36/1;object-fit:cover;filter:saturate(.82)}.bls-ai-page .blsai-card-copy{padding:22px}.bls-ai-page .blsai-number{display:block;color:var(--blsai-gold);font:italic 14px var(--blsai-serif);margin-bottom:8px}.bls-ai-page h3{font:600 22px/1.25 var(--blsai-serif);margin-bottom:11px}.bls-ai-page .blsai-card p,.bls-ai-page .blsai-role-grid article>p:last-child{color:#aeb7c0;font-size:12px;line-height:1.8}.bls-ai-page .blsai-roles{background:linear-gradient(180deg,#0b121c,#080d16)}.bls-ai-page .blsai-role-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--blsai-line)}.bls-ai-page .blsai-role-grid article{padding:34px 40px}.bls-ai-page .blsai-role-grid article+article{border-left:1px solid var(--blsai-line);background:rgba(255,255,255,.018)}.bls-ai-page .blsai-role-grid .bls-ai-page .blsai-kicker{margin-bottom:12px!important}.bls-ai-page .blsai-role-grid h3{font-size:25px;margin-bottom:12px}.bls-ai-page .blsai-journey-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start}.bls-ai-page .blsai-journey-intro .bls-ai-page .blsai-kicker{margin-bottom:16px!important}.bls-ai-page .blsai-journey-intro h2{margin-bottom:18px}.bls-ai-page .blsai-journey-intro>p:last-child{color:#b4bdc7;font-size:13px;line-height:1.85}.bls-ai-page .blsai-phases,.bls-ai-page .blsai-seven,.bls-ai-page .blsai-timeline{list-style:none;padding:0}.bls-ai-page .blsai-phases{border-top:1px solid var(--blsai-line)}.bls-ai-page .blsai-phases li{display:grid;grid-template-columns:42px 1fr;gap:10px;padding:20px 0;border-bottom:1px solid var(--blsai-line)}.bls-ai-page .blsai-phases li>span{color:var(--blsai-gold);font:italic 15px var(--blsai-serif)}.bls-ai-page .blsai-phases p{color:#9ea9b4;font-size:12px}.bls-ai-page .blsai-details{margin-top:18px;border:1px solid var(--blsai-line);background:rgba(255,255,255,.018)}.bls-ai-page .blsai-details summary{list-style:none;cursor:pointer;padding:15px 18px;font-size:12px}.bls-ai-page .blsai-details summary::-webkit-details-marker{display:none}.bls-ai-page .blsai-details summary:after{content:'+';float:right;color:var(--blsai-gold);font-size:18px}.bls-ai-page .blsai-details[open] summary:after{content:'−'}.bls-ai-page .blsai-seven{padding:0 18px 12px}.bls-ai-page .blsai-seven li{display:grid;grid-template-columns:165px 1fr;gap:14px;padding:10px 0;border-top:1px solid var(--blsai-line);font-size:11px}.bls-ai-page .blsai-seven b{font-weight:550}.bls-ai-page .blsai-seven span{color:#9ea9b4}.bls-ai-page .blsai-vision{background:radial-gradient(ellipse at 84% 30%,rgba(112,153,162,.08),transparent 34%),linear-gradient(135deg,#0c1420,#080d16 65%)}.bls-ai-page .blsai-period{flex:0 0 auto;color:var(--blsai-gold);font-size:11px;letter-spacing:.15em;text-transform:uppercase}.bls-ai-page .blsai-vision-copy{max-width:780px;color:#b4bdc7;font-size:13px;line-height:1.85;margin:-10px 0 30px!important}.bls-ai-page .blsai-timeline{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:30px}.bls-ai-page .blsai-timeline li{position:relative;padding:25px 16px 0 0;border-top:1px solid rgba(200,171,117,.55)}.bls-ai-page .blsai-timeline li:before{content:'';position:absolute;top:-6px;left:0;width:11px;height:11px;border:1px solid var(--blsai-gold);border-radius:50%;background:var(--blsai-bg)}.bls-ai-page .blsai-timeline b{display:block;font:400 17px var(--blsai-serif);margin-bottom:7px}.bls-ai-page .blsai-timeline span{display:block;max-width:220px;color:#9faab5;font-size:11px}.bls-ai-page a:focus-visible,.bls-ai-page summary:focus-visible{outline:2px solid var(--blsai-gold);outline-offset:4px}
@media(max-width:820px){.bls-ai-page .blsai-container{width:calc(100% - 40px)}.bls-ai-page .blsai-hero{min-height:610px;background-position:62% center}.bls-ai-page .blsai-hero:before{background:linear-gradient(0deg,rgba(7,12,21,.97),rgba(7,12,21,.72) 46%,rgba(7,12,21,.18)),linear-gradient(90deg,rgba(7,12,21,.28),transparent)}.bls-ai-page .blsai-hero-content{max-width:100%;padding-block:120px 44px}.bls-ai-page .blsai-section{padding:70px 0}.bls-ai-page .blsai-section-head{display:block;margin-bottom:28px}.bls-ai-page .blsai-intro{margin-top:14px}.bls-ai-page .blsai-audience-grid{grid-template-columns:1fr}.bls-ai-page .blsai-card{display:grid;grid-template-columns:40% 60%}.bls-ai-page .blsai-card img{height:100%;min-height:205px;aspect-ratio:auto}.bls-ai-page .blsai-card-copy{padding:20px}.bls-ai-page .blsai-role-grid article{padding:28px 24px}.bls-ai-page .blsai-journey-grid{grid-template-columns:1fr;gap:34px}.bls-ai-page .blsai-timeline{grid-template-columns:1fr 1fr;gap:0 16px;row-gap:22px}.bls-ai-page .blsai-period{display:block;margin-top:15px}}
@media(max-width:480px){.bls-ai-page .blsai-container{width:calc(100% - 36px)}.bls-ai-page .blsai-hero{min-height:640px;background-position:59% center}.bls-ai-page .blsai-hero-content{padding-block:120px 34px}.bls-ai-page h1{font-size:42px}.bls-ai-page .blsai-lead{font-size:13px}.bls-ai-page .blsai-actions{display:grid;grid-template-columns:1fr}.bls-ai-page .blsai-button{width:100%;min-height:48px}.bls-ai-page .blsai-section{padding:60px 0}.bls-ai-page h2{font-size:33px}.bls-ai-page .blsai-card{grid-template-columns:1fr}.bls-ai-page .blsai-card img{height:auto;min-height:0;aspect-ratio:1.5/1}.bls-ai-page .blsai-card-copy{padding:19px}.bls-ai-page .blsai-card p,.bls-ai-page .blsai-role-grid article>p:last-child{font-size:12px}.bls-ai-page .blsai-role-grid{grid-template-columns:1fr}.bls-ai-page .blsai-role-grid article+article{border-left:0;border-top:1px solid var(--blsai-line)}.bls-ai-page .blsai-role-grid article{padding:25px 20px}.bls-ai-page .blsai-seven li{grid-template-columns:1fr;gap:2px}.bls-ai-page .blsai-timeline{grid-template-columns:1fr;gap:0;padding-left:12px}.bls-ai-page .blsai-timeline li{padding:8px 0 20px 18px;border-top:0;border-left:1px solid rgba(200,171,117,.55)}.bls-ai-page .blsai-timeline li:before{top:12px;left:-6px}.bls-ai-page .blsai-timeline b{font-size:17px}.bls-ai-page .blsai-timeline span{max-width:none}.bls-ai-page .blsai-vision-copy{margin-top:0!important}}
@media(prefers-reduced-motion:reduce){.bls-ai-page *{scroll-behavior:auto;transition:none!important}}

/* BLS AI integration: retain the existing platform shell and navigation. */
#platformView .platform-content > .bls-ai-page{display:none}
body.ai-transformation-active #platformView .platform-content > .bls-ai-page{display:block}
body.ai-transformation-active #platformView .platform-content > section:not(.bls-ai-page){display:none}
body.ai-transformation-active #platformView .platform-content{padding:0!important}
.bls-ai-page .blsai-backbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 28px;background:var(--blsai-bg);font-size:13px;border-bottom:1px solid var(--blsai-line)}
.bls-ai-page .blsai-backbar a{color:var(--blsai-gold);display:inline-flex;align-items:center;min-height:44px}
.bls-ai-page .blsai-backbar span{color:var(--blsai-muted)}
.bls-ai-page .blsai-hero{min-height:560px}
.bls-ai-page .blsai-hero-content{padding-block:64px}
.bls-ai-page .blsai-hero-content>*{max-width:600px}
.bls-ai-page .blsai-timeline{margin-bottom:30px}
.bls-ai-page .blsai-details summary{min-height:48px}
.bls-ai-page .blsai-kicker,.bls-ai-page .blsai-eyebrow{font-size:12px}
.bls-ai-page .blsai-card p,.bls-ai-page .blsai-role-grid article>p:last-child,.bls-ai-page .blsai-phases p,.bls-ai-page .blsai-seven li,.bls-ai-page .blsai-timeline span,.bls-ai-page .blsai-intro,.bls-ai-page .blsai-vision-copy,.bls-ai-page .blsai-journey-intro>p:last-child{font-size:15px}
.bls-ai-page .blsai-button,.bls-ai-page .blsai-details summary{font-size:14px;border-radius:var(--bls-radius-md,10px)}
.bls-ai-page .blsai-card{border-radius:var(--bls-radius-lg,12px)}
.bls-ai-page .blsai-seven li{grid-template-columns:1fr;gap:3px}
.bls-ai-page .blsai-card-copy{min-width:0}
#platformView .platform-experience-card.technology{cursor:pointer}
@media(max-width:820px){
 .bls-ai-page .blsai-hero{min-height:0}
 .bls-ai-page .blsai-hero-content{padding-block:52px 40px}
 .bls-ai-page .blsai-hero-content>*{max-width:none}
 .bls-ai-page .blsai-audience-grid,.bls-ai-page .blsai-role-grid{grid-template-columns:1fr}
 .bls-ai-page .blsai-card{display:block}
 .bls-ai-page .blsai-card img{width:100%;height:auto;min-height:0;aspect-ratio:1.6;object-fit:cover}
 .bls-ai-page .blsai-role-grid article+article{border-left:0;border-top:1px solid var(--blsai-line)}
 body.ai-transformation-active #platformView .platform-content{padding-bottom:88px!important}
 .bls-ai-page .blsai-backbar{padding:12px 20px}
 .bls-ai-page h1{font-size:clamp(30px,7.8vw,42px)}
 .bls-ai-page h2{font-size:clamp(26px,6.8vw,34px)}
 .bls-ai-page .blsai-lead{font-size:15px}
 .bls-ai-page .blsai-section{padding-block:48px}
 .bls-ai-page .blsai-actions{display:grid;grid-template-columns:1fr}
}

/* BLS AI TECHNOLOGY CARD IMAGE V1 */
#platformView .platform-experience-card.technology .platform-card-visual{
  background: url("/assets/bls-ai/hero-ai.webp") center / cover no-repeat;
}
#platformView .platform-experience-card.technology .platform-card-visual::after{
  background: linear-gradient(180deg,rgba(5,10,16,.12),rgba(5,10,16,.88));
}
#platformView .platform-experience-card.technology .platform-card-content p{
  color:#e9edf2;
}
/* END BLS AI TECHNOLOGY CARD IMAGE V1 */

/* BLS ACADEMY PLATFORM V1.0 */
#platformView .platform-content>.bls-academy-page{display:none}
body.academy-active #platformView .platform-content>.bls-academy-page{display:block}
body.academy-active #platformView .platform-content>section:not(.bls-academy-page){display:none}
body.academy-active #platformView .platform-content{padding:0!important}
.bls-academy-page{--academy-bg:var(--bls-bg,#050a10);--academy-panel:var(--bls-surface,#0b1823);--academy-soft:var(--bls-bg-soft,#06101a);--academy-text:var(--bls-text,#f1f4f6);--academy-muted:#c1cbd3;--academy-gold:var(--accent,#d7a85b);--academy-line:rgba(223,232,241,.15);font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--academy-bg);color:var(--academy-text);font-size:16px;line-height:1.65;isolation:isolate}
.bls-academy-page *{box-sizing:border-box}
.bls-academy-page h1,.bls-academy-page h2,.bls-academy-page h3,.bls-academy-page p,.bls-academy-page figure,.bls-academy-page ol,.bls-academy-page ul{margin:0}
.bls-academy-page a{color:inherit;text-decoration:none}
.bls-academy-page img{display:block;max-width:100%;height:auto}
.bls-academy-page h1{font-size:clamp(34px,3.4vw,50px);font-weight:550;line-height:1.17;letter-spacing:-.035em;text-wrap:balance}
.bls-academy-page h2{font-size:clamp(28px,2.5vw,36px);font-weight:550;line-height:1.25;letter-spacing:-.025em;max-width:780px;margin-bottom:30px}
.bls-academy-page h3{font-size:20px;font-weight:550;line-height:1.35;letter-spacing:-.012em}
.bls-academy-page p{color:var(--academy-muted)}
.bls-academy-page .blsacademy-container{width:min(1160px,calc(100% - 64px));margin-inline:auto}
.bls-academy-page .blsacademy-backbar{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--academy-line);padding:10px 32px;font-size:13px;color:var(--academy-muted)}
.bls-academy-page .blsacademy-backbar a{display:inline-flex;align-items:center;min-height:44px;color:var(--academy-gold)}
.bls-academy-page .blsacademy-hero{display:grid;grid-template-columns:1.05fr 1fr;align-items:stretch;border-bottom:1px solid var(--academy-line)}
.bls-academy-page .blsacademy-hero-copy{padding:56px 32px;align-self:center;min-width:0}
.bls-academy-page .blsacademy-kicker{font-size:12px;letter-spacing:.16em;color:var(--academy-gold);margin-bottom:20px;font-weight:600}
.bls-academy-page .blsacademy-lead{margin-top:24px;font-size:16px;line-height:1.7;max-width:650px}
.bls-academy-page .blsacademy-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.bls-academy-page .blsacademy-button{display:inline-flex;justify-content:center;align-items:center;gap:14px;min-height:48px;padding:12px 18px;background:var(--academy-gold);border:1px solid var(--academy-gold);border-radius:var(--bls-radius-md,10px);color:#10161c;font:550 14px/1.4 Inter,ui-sans-serif,system-ui,sans-serif;text-align:center;cursor:pointer;transition:background .2s,border-color .2s}
.bls-academy-page .blsacademy-button:hover{background:#e1bb80}
.bls-academy-page .blsacademy-button-outline{background:transparent;color:var(--academy-text);border-color:var(--academy-line)}
.bls-academy-page .blsacademy-button-outline:hover{background:var(--academy-panel);border-color:var(--academy-gold)}
.bls-academy-page .blsacademy-hero-image{position:relative;min-height:560px;overflow:hidden;background:var(--academy-panel)}
.bls-academy-page .blsacademy-hero-image img{width:100%;height:100%;object-fit:cover;object-position:66% center;position:absolute;inset:0}
.bls-academy-page .blsacademy-hero-image:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,10,16,.2),transparent 24%),linear-gradient(0deg,rgba(5,10,16,.18),transparent 25%);pointer-events:none}
.bls-academy-page .blsacademy-hero-image figcaption{position:absolute;z-index:1;right:16px;bottom:14px;color:#fff;background:rgba(5,10,16,.7);padding:3px 8px;border-radius:4px;font-size:11px}
.bls-academy-page .blsacademy-section{padding:64px 0;border-bottom:1px solid var(--academy-line);scroll-margin-top:24px}
.bls-academy-page .blsacademy-section-soft{background:var(--academy-soft)}
.bls-academy-page .blsacademy-audience-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.bls-academy-page .blsacademy-audience-card{overflow:hidden;border:1px solid var(--academy-line);border-radius:var(--bls-radius-lg,12px);background:var(--academy-panel);min-width:0}
.bls-academy-page .blsacademy-audience-card img{width:100%;aspect-ratio:1.55;object-fit:cover;object-position:center}
.bls-academy-page .blsacademy-card-copy{padding:24px}
.bls-academy-page .blsacademy-card-copy h3{margin-bottom:12px}
.bls-academy-page .blsacademy-card-copy p{font-size:15px;line-height:1.65}
.bls-academy-page .blsacademy-details{border:1px solid var(--academy-line);border-radius:var(--bls-radius-md,10px);margin-top:28px;overflow:hidden;background:var(--academy-panel)}
.bls-academy-page .blsacademy-details summary{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:52px;padding:15px 20px;list-style:none;cursor:pointer;font-size:15px;font-weight:500}
.bls-academy-page .blsacademy-details summary::-webkit-details-marker{display:none}
.bls-academy-page .blsacademy-plus{position:relative;flex:0 0 14px;height:14px;color:var(--academy-gold)}
.bls-academy-page .blsacademy-plus:before,.bls-academy-page .blsacademy-plus:after{content:'';position:absolute;top:6px;left:0;width:14px;height:1px;background:currentColor}
.bls-academy-page .blsacademy-plus:after{transform:rotate(90deg)}
.bls-academy-page .blsacademy-details[open] .blsacademy-plus:after{display:none}
.bls-academy-page .blsacademy-detail-body{padding:0 20px 20px;font-size:15px;overflow-wrap:anywhere}
.bls-academy-page .blsacademy-detail-body p+p{margin-top:12px}
.bls-academy-page .blsacademy-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.bls-academy-page .blsacademy-fields article{padding:24px 0;border-top:1px solid var(--academy-line)}
.bls-academy-page .blsacademy-fields h3{margin-bottom:12px}
.bls-academy-page .blsacademy-fields p{font-size:15px}
.bls-academy-page .blsacademy-domain-list{display:grid;grid-template-columns:1fr 1fr;gap:12px 32px;padding-left:20px}
.bls-academy-page .blsacademy-domain-list li::marker{color:var(--academy-gold)}
.bls-academy-page .blsacademy-phases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;gap:28px;padding:0;counter-reset:academy-phase}
.bls-academy-page .blsacademy-phases li{border-top:1px solid var(--academy-gold);padding-top:20px;counter-increment:academy-phase}
.bls-academy-page .blsacademy-phases li:before{content:'0' counter(academy-phase);display:block;color:var(--academy-gold);font-size:13px;letter-spacing:.08em;margin-bottom:15px}
.bls-academy-page .blsacademy-phases h3{margin-bottom:12px}
.bls-academy-page .blsacademy-phases p{font-size:15px}
.bls-academy-page .blsacademy-journey-note{margin-top:30px;max-width:800px}
.bls-academy-page .blsacademy-environment{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.bls-academy-page .blsacademy-environment figure{overflow:hidden;border-radius:var(--bls-radius-lg,12px)}
.bls-academy-page .blsacademy-environment img{width:100%;aspect-ratio:1.12;object-fit:cover;object-position:52% center}
.bls-academy-page .blsacademy-environment h2{margin-bottom:22px}
.bls-academy-page .blsacademy-environment p+p{margin-top:16px}
.bls-academy-page .blsacademy-vision{background:radial-gradient(ellipse at 100% 0,rgba(215,168,91,.08),transparent 55%),var(--academy-bg)}
.bls-academy-page .blsacademy-vision-copy{max-width:840px;margin-bottom:28px}
.bls-academy-page .blsacademy-vision-copy p+p{margin-top:16px}
.bls-academy-page .blsacademy-timeline{list-style:none;padding:8px 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.bls-academy-page .blsacademy-timeline li{padding-top:18px;border-top:1px solid var(--academy-gold)}
.bls-academy-page .blsacademy-timeline span{font-size:13px;color:var(--academy-gold)}
.bls-academy-page .blsacademy-timeline h3{font-size:17px;margin:10px 0}
.bls-academy-page .blsacademy-timeline p{font-size:14px}
.bls-academy-page a:focus-visible,.bls-academy-page summary:focus-visible{outline:2px solid var(--academy-gold);outline-offset:4px}
#platformView .platform-experience-card.academy .platform-card-visual{background:url('/assets/bls-academy/hero-academy.webp') 65% center/cover no-repeat;opacity:1}
#platformView .platform-experience-card.academy .platform-card-visual:after{background:linear-gradient(180deg,rgba(5,10,16,.06),rgba(5,10,16,.45) 40%,rgba(5,10,16,.95))}
#platformView .platform-experience-card.academy .platform-card-content{pointer-events:none}
#platformView .platform-experience-card.academy .platform-card-content p{color:#e9edf2;padding-right:18px}
#platformView .platform-experience-card.academy .platform-card-icon{width:24px;height:24px;display:block}
#platformView .platform-experience-card.academy .platform-card-icon svg{width:24px;height:24px;display:block}
#platformView .platform-experience-card.academy .platform-academy-link{position:absolute;inset:0;z-index:3;color:#fff;text-decoration:none;cursor:pointer}
#platformView .platform-experience-card.academy .platform-academy-link span{position:absolute;right:18px;bottom:17px;width:34px;height:34px;border:1px solid rgba(255,255,255,.3);border-radius:50%;display:grid;place-items:center;background:rgba(5,10,16,.25)}
#platformView .platform-experience-card.academy:focus-within{outline:2px solid var(--accent,#d7a85b);outline-offset:3px}
@media(max-width:1100px){.bls-academy-page .blsacademy-hero{grid-template-columns:1fr}.bls-academy-page .blsacademy-hero-copy{padding:40px 32px}.bls-academy-page .blsacademy-hero-image{min-height:300px}.bls-academy-page .blsacademy-hero-image img{object-position:65% 45%}.bls-academy-page .blsacademy-environment{gap:28px}.bls-academy-page .blsacademy-audience-grid{gap:16px}.bls-academy-page .blsacademy-card-copy{padding:20px}.bls-academy-page .blsacademy-timeline{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
@media(max-width:820px){body.academy-active #platformView .platform-content{padding-bottom:88px!important}.bls-academy-page .blsacademy-container{width:calc(100% - 40px)}.bls-academy-page .blsacademy-backbar{padding:8px 20px}.bls-academy-page .blsacademy-hero-copy{padding:32px 20px}.bls-academy-page h1{font-size:clamp(30px,7.8vw,40px)}.bls-academy-page h2{font-size:clamp(27px,6.5vw,34px);margin-bottom:24px}.bls-academy-page .blsacademy-lead{font-size:15px;line-height:1.65;margin-top:20px}.bls-academy-page .blsacademy-kicker{margin-bottom:16px}.bls-academy-page .blsacademy-actions{display:grid;grid-template-columns:1fr;margin-top:24px;gap:10px}.bls-academy-page .blsacademy-hero-image{min-height:0;aspect-ratio:1.75}.bls-academy-page .blsacademy-hero-image img{object-position:center}.bls-academy-page .blsacademy-section{padding:44px 0}.bls-academy-page .blsacademy-audience-grid,.bls-academy-page .blsacademy-fields,.bls-academy-page .blsacademy-phases,.bls-academy-page .blsacademy-environment{grid-template-columns:1fr}.bls-academy-page .blsacademy-audience-grid{gap:24px}.bls-academy-page .blsacademy-audience-card img{aspect-ratio:1.75}.bls-academy-page .blsacademy-environment{gap:28px}.bls-academy-page .blsacademy-environment img{aspect-ratio:1.55}.bls-academy-page .blsacademy-environment>div{grid-row:1}.bls-academy-page .blsacademy-phases{gap:26px}.bls-academy-page .blsacademy-timeline,.bls-academy-page .blsacademy-domain-list{grid-template-columns:1fr}.bls-academy-page .blsacademy-detail-body{padding:0 18px 18px}.bls-academy-page .blsacademy-details summary{padding:15px 18px}.bls-academy-page .blsacademy-button{width:100%}}
@media(prefers-reduced-motion:reduce){.bls-academy-page *{scroll-behavior:auto;transition:none!important}}
/* END BLS ACADEMY PLATFORM V1.0 */


/* BLS HEALTH PLATFORM V1.0 */
#platformView .platform-content>.bls-health-page{display:none}
body.health-wellness-active #platformView .platform-content>.bls-health-page{display:block}
body.health-wellness-active #platformView .platform-content>section:not(.bls-health-page){display:none}
body.health-wellness-active #platformView .platform-content{padding:0!important}
.bls-health-page{--health-bg:var(--bls-bg,#050a10);--health-panel:var(--bls-surface,#0b1823);--health-soft:var(--bls-bg-soft,#06101a);--health-text:var(--bls-text,#f1f4f6);--health-muted:#c1cbd3;--health-gold:var(--accent,#d7a85b);--health-line:rgba(223,232,241,.15);font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--health-bg);color:var(--health-text);font-size:16px;line-height:1.65;isolation:isolate}
.bls-health-page *{box-sizing:border-box}
.bls-health-page h1,.bls-health-page h2,.bls-health-page h3,.bls-health-page p,.bls-health-page figure,.bls-health-page ol{margin:0}
.bls-health-page a{color:inherit;text-decoration:none}
.bls-health-page img{display:block;max-width:100%;height:auto}
.bls-health-page h1{font-size:clamp(34px,3.4vw,50px);font-weight:550;line-height:1.17;letter-spacing:-.035em;text-wrap:balance}
.bls-health-page h2{font-size:clamp(28px,2.5vw,36px);font-weight:550;line-height:1.25;letter-spacing:-.025em;max-width:850px;margin-bottom:26px}
.bls-health-page h3{font-size:20px;font-weight:550;line-height:1.35;letter-spacing:-.012em}
.bls-health-page p{color:var(--health-muted)}
.bls-health-page p+p{margin-top:16px}
.bls-health-page .blshealth-container{width:min(1160px,calc(100% - 64px));margin-inline:auto}
.bls-health-page .blshealth-backbar{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--health-line);padding:10px 32px;font-size:13px;color:var(--health-muted)}
.bls-health-page .blshealth-backbar a{display:inline-flex;align-items:center;min-height:44px;color:var(--health-gold)}
.bls-health-page .blshealth-hero{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;border-bottom:1px solid var(--health-line);overflow:hidden}
.bls-health-page .blshealth-hero-copy{padding:48px 32px;min-width:0}
.bls-health-page .blshealth-kicker{font-size:12px;letter-spacing:.15em;color:var(--health-gold);margin-bottom:18px;font-weight:600}
.bls-health-page .blshealth-statement{color:var(--health-text);font-size:18px;line-height:1.5;margin-top:22px;font-weight:550;max-width:650px}
.bls-health-page .blshealth-lead{font-size:16px;line-height:1.7;max-width:650px}
.bls-health-page .blshealth-actions{margin-top:26px}
.bls-health-page .blshealth-button{display:inline-flex;justify-content:center;align-items:center;gap:14px;min-height:48px;padding:12px 18px;background:var(--health-gold);border:1px solid var(--health-gold);border-radius:var(--bls-radius-md,10px);color:#10161c;font:550 14px/1.4 Inter,ui-sans-serif,system-ui,sans-serif;text-align:center;cursor:pointer;transition:background .2s,border-color .2s}
.bls-health-page .blshealth-button:hover{background:#e1bb80}
.bls-health-page .blshealth-button-outline{background:transparent;color:var(--health-text);border-color:var(--health-line);margin-top:26px}
.bls-health-page .blshealth-button-outline:hover{background:var(--health-panel);border-color:var(--health-gold)}
.bls-health-page .blshealth-hero-image{position:relative;width:100%;align-self:center;background:#050a10}
.bls-health-page .blshealth-anatomy{position:relative;aspect-ratio:10/9;max-width:640px;margin-inline:auto;overflow:hidden}
.bls-health-page .blshealth-anatomy svg{display:block;width:100%;height:100%}
.bls-health-page .blshealth-organ{position:absolute;color:#f4efe5;background:rgba(5,10,16,.8);border:1px solid rgba(224,197,155,.32);border-radius:5px;padding:4px 9px;font-size:13px;line-height:1.4;pointer-events:none}
.bls-health-page .blshealth-organ-lungs{left:5%;top:25%;transform:translateY(-50%)}
.bls-health-page .blshealth-organ-heart{right:4%;top:43%;transform:translateY(-50%)}
.bls-health-page .blshealth-organ-liver{left:5%;top:60%;transform:translateY(-50%)}
.bls-health-page .blshealth-hero-image figcaption{position:absolute;right:14px;bottom:12px;color:#dbe2e7;background:rgba(5,10,16,.65);padding:3px 7px;border-radius:4px;font-size:11px}
.bls-health-page .blshealth-section{padding:64px 0;border-bottom:1px solid var(--health-line);scroll-margin-top:24px}
.bls-health-page .blshealth-soft{background:var(--health-soft)}
.bls-health-page .blshealth-body-copy{max-width:950px}
.bls-health-page .blshealth-body{background:radial-gradient(ellipse at 0 50%,rgba(215,168,91,.06),transparent 65%),var(--health-bg)}
.bls-health-page .blshealth-value-copy{max-width:900px}
.bls-health-page .blshealth-gallery{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px}
.bls-health-page .blshealth-gallery figure,.bls-health-page .blshealth-journey-layout>figure{overflow:hidden;border-radius:var(--bls-radius-lg,12px)}
.bls-health-page .blshealth-gallery img{width:100%;aspect-ratio:1.65;object-fit:cover}
.bls-health-page .blshealth-experience{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;gap:24px;padding:0;counter-reset:health-experience}
.bls-health-page .blshealth-experience li{border-top:1px solid var(--health-gold);padding:20px 0 0;counter-increment:health-experience}
.bls-health-page .blshealth-experience li:before{content:'0' counter(health-experience);display:block;color:var(--health-gold);font-size:13px;letter-spacing:.08em;margin-bottom:15px}
.bls-health-page .blshealth-experience h3{margin-bottom:12px}
.bls-health-page .blshealth-experience p{font-size:15px}
.bls-health-page .blshealth-details{border:1px solid var(--health-line);border-radius:var(--bls-radius-md,10px);margin-top:20px;overflow:hidden;background:var(--health-panel);scroll-margin-top:24px}
.bls-health-page .blshealth-details summary{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:52px;padding:15px 20px;list-style:none;cursor:pointer;font-size:15px;font-weight:500}
.bls-health-page .blshealth-details summary::-webkit-details-marker{display:none}
.bls-health-page .blshealth-plus{position:relative;flex:0 0 14px;height:14px;color:var(--health-gold)}
.bls-health-page .blshealth-plus:before,.bls-health-page .blshealth-plus:after{content:'';position:absolute;top:6px;left:0;width:14px;height:1px;background:currentColor}
.bls-health-page .blshealth-plus:after{transform:rotate(90deg)}
.bls-health-page .blshealth-details[open] .blshealth-plus:after{display:none}
.bls-health-page .blshealth-detail-body{padding:0 20px 20px;font-size:15px;overflow-wrap:anywhere}
.bls-health-page .blshealth-detail-body article+article{margin-top:20px}
.bls-health-page .blshealth-detail-body article h3{font-size:18px;margin-bottom:8px}
.bls-health-page .blshealth-journey-layout{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.bls-health-page .blshealth-journey-layout>figure img{width:100%;aspect-ratio:1.1;object-fit:cover;object-position:center}
.bls-health-page .blshealth-journey-line{color:var(--health-gold);font-size:17px;line-height:1.55}
.bls-health-page .blshealth-step-list{list-style:none;counter-reset:health-step;padding:0}
.bls-health-page .blshealth-step-list li{position:relative;counter-increment:health-step;padding:15px 0 15px 40px;border-top:1px solid var(--health-line)}
.bls-health-page .blshealth-step-list li:before{content:'0' counter(health-step);position:absolute;left:0;top:15px;color:var(--health-gold);font-size:13px}
.bls-health-page .blshealth-step-list h3{font-size:17px;margin-bottom:8px}
.bls-health-page .blshealth-vision{background:radial-gradient(ellipse at 100% 0,rgba(215,168,91,.08),transparent 55%),var(--health-bg)}
.bls-health-page .blshealth-vision-copy{max-width:900px}
.bls-health-page .blshealth-timeline{list-style:none;padding:8px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.bls-health-page .blshealth-timeline li{padding:16px 0;border-top:1px solid var(--health-gold)}
.bls-health-page .blshealth-timeline span{font-size:13px;color:var(--health-gold)}
.bls-health-page .blshealth-timeline h3{font-size:18px;margin-top:8px}
.bls-health-page .blshealth-timeline+p{margin-top:14px}
.bls-health-page a:focus-visible,.bls-health-page summary:focus-visible{outline:2px solid var(--health-gold);outline-offset:4px}
#platformView .platform-experience-card.health-wellness .platform-card-visual{background:url('/assets/bls-health/hero-health-optical.webp') 66% 40%/cover no-repeat;opacity:1}
#platformView .platform-experience-card.health-wellness .platform-card-visual:after{background:linear-gradient(180deg,rgba(5,10,16,.08),rgba(5,10,16,.3) 40%,rgba(5,10,16,.96))}
#platformView .platform-experience-card.health-wellness .platform-card-content{pointer-events:none}
#platformView .platform-experience-card.health-wellness .platform-card-content p{color:#e9edf2;padding-right:18px}
#platformView .platform-experience-card.health-wellness .platform-health-link{position:absolute;inset:0;z-index:3;color:#fff;text-decoration:none;cursor:pointer}
#platformView .platform-experience-card.health-wellness .platform-health-link span{position:absolute;right:18px;bottom:17px;width:34px;height:34px;border:1px solid rgba(255,255,255,.3);border-radius:50%;display:grid;place-items:center;background:rgba(5,10,16,.25)}
#platformView .platform-experience-card.health-wellness:focus-within{outline:2px solid var(--accent,#d7a85b);outline-offset:3px}
@media(max-width:1100px){.bls-health-page .blshealth-hero{grid-template-columns:1fr}.bls-health-page .blshealth-hero-copy{padding:40px 32px}.bls-health-page .blshealth-hero-image{max-width:580px;justify-self:center}.bls-health-page .blshealth-journey-layout{gap:28px}}
@media(max-width:820px){body.health-wellness-active #platformView .platform-content{padding-bottom:88px!important}.bls-health-page .blshealth-container{width:calc(100% - 40px)}.bls-health-page .blshealth-backbar{padding:8px 20px}.bls-health-page .blshealth-hero-copy{padding:32px 20px 24px}.bls-health-page h1{font-size:clamp(30px,7.8vw,40px)}.bls-health-page h2{font-size:clamp(27px,6.5vw,34px);margin-bottom:22px}.bls-health-page .blshealth-statement{font-size:17px;margin-top:20px}.bls-health-page .blshealth-lead{font-size:15px;line-height:1.65}.bls-health-page .blshealth-kicker{margin-bottom:16px}.bls-health-page .blshealth-button{width:100%}.bls-health-page .blshealth-hero-image{width:calc(100% - 40px);max-width:440px;margin-bottom:20px;border-radius:12px;overflow:hidden}.bls-health-page .blshealth-section{padding:44px 0}.bls-health-page .blshealth-gallery,.bls-health-page .blshealth-experience,.bls-health-page .blshealth-journey-layout,.bls-health-page .blshealth-timeline{grid-template-columns:1fr}.bls-health-page .blshealth-gallery{gap:20px;margin-top:24px}.bls-health-page .blshealth-gallery img{aspect-ratio:1.7}.bls-health-page .blshealth-experience{gap:26px}.bls-health-page .blshealth-journey-layout{gap:28px}.bls-health-page .blshealth-journey-layout>figure img{aspect-ratio:1.65}.bls-health-page .blshealth-details summary{padding:15px 18px}.bls-health-page .blshealth-detail-body{padding:0 18px 18px}.bls-health-page .blshealth-timeline{gap:6px}.bls-health-page .blshealth-organ{font-size:12px;padding:3px 7px}}
@media(prefers-reduced-motion:reduce){.bls-health-page *{scroll-behavior:auto;transition:none!important}}
/* END BLS HEALTH PLATFORM V1.0 */