/* ============================================================
   PT VISTARA SINERGI INDONESIA — MLM Admin Panel Stylesheet
   ============================================================ */

:root{
  --adm-navy-950:#050b1a;
  --adm-navy-900:#0a1330;
  --adm-navy-800:#0e1c42;
  --adm-blue-500:#2f7dea;
  --adm-blue-400:#4a9bff;
  --adm-blue-300:#8ec3ff;
  --adm-blue-100:#e7f0fe;
  --adm-silver:#c9d3e0;
  --adm-bg:#f2f4f9;
  --adm-card:#ffffff;
  --adm-ink:#1c2333;
  --adm-muted:#7a839c;
  --adm-border:#e7ebf3;
  --adm-success:#16c784;
  --adm-success-bg:#e5f9f1;
  --adm-danger:#f0506e;
  --adm-danger-bg:#fdeaee;
  --adm-warning:#ffa53d;
  --adm-warning-bg:#fff3e2;
  --adm-purple:#8a63f2;
  --adm-purple-bg:#f0ecfe;
  --adm-teal:#17b6c4;
  --adm-teal-bg:#e4f8fa;
  --adm-radius-sm:.55rem;
  --adm-radius-md:.9rem;
  --adm-radius-lg:1.2rem;
  --adm-shadow-sm:0 4px 14px rgba(20,30,60,.06);
  --adm-shadow-md:0 10px 30px rgba(20,30,60,.08);
  --adm-shadow-lg:0 20px 45px rgba(20,30,60,.16);
  --adm-transition:all .25s cubic-bezier(.4,.2,.2,1);
  --adm-sidebar-w:270px;
  --page-zoom:.9;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background:var(--adm-bg);
  color:var(--adm-ink);
  margin:0;
  overflow-x:hidden;
}

a{ text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
img{ max-width:100%; }

::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:#eef2f9; }
::-webkit-scrollbar-thumb{ background:var(--adm-blue-400); border-radius:10px; }

/* ============================================================
   LAYOUT WRAPPER
   ============================================================ */
.adm-wrapper{ display:flex; min-height:calc(100vh / var(--page-zoom)); zoom:var(--page-zoom); }

/* ============================================================
   SIDEBAR
   ============================================================ */
.adm-sidebar{
  width:var(--adm-sidebar-w);
  min-width:var(--adm-sidebar-w);
  background:linear-gradient(180deg, var(--adm-navy-950) 0%, var(--adm-navy-900) 100%);
  min-height:calc(100vh / var(--page-zoom));
  position:fixed;
  top:0; left:0; bottom:0;
  z-index:1050;
  display:flex;
  flex-direction:column;
  transition:transform .35s ease;
  border-right:1px solid rgba(255,255,255,.06);
}
.adm-sidebar-brand{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:1.5rem 1.4rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.adm-logo-mark{
  width:42px; height:42px;
  border-radius:.65rem;
  background:linear-gradient(135deg,var(--adm-blue-500),var(--adm-silver));
  display:flex; align-items:center; justify-content:center;
  color:var(--adm-navy-950);
  font-size:1.3rem;
  font-weight:800;
  box-shadow:0 6px 16px rgba(47,125,234,.35);
}
.adm-sidebar-brand strong{ display:block; color:#fff; font-size:.95rem; font-weight:700; letter-spacing:.02em; }
.adm-sidebar-brand small{ display:block; color:var(--adm-blue-300); font-size:.62rem; letter-spacing:.16em; font-weight:600; }

.adm-sidebar-nav{ flex:1; overflow-y:auto; padding:1.2rem .9rem; }
.adm-nav-section-label{
  color:#5a6689;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin:1.1rem .6rem .55rem;
}
.adm-nav-section-label:first-child{ margin-top:0; }
.adm-nav-item{ margin-bottom:.25rem; position:relative; }
.adm-nav-link{
  display:flex;
  align-items:center;
  gap:.8rem;
  padding:.68rem .9rem;
  border-radius:.65rem;
  color:#aab4cf;
  font-size:.9rem;
  font-weight:500;
  transition:var(--adm-transition);
  position:relative;
}
.adm-nav-link i{ font-size:1.1rem; width:20px; text-align:center; transition:var(--adm-transition); }
.adm-nav-link:hover{ background:rgba(255,255,255,.06); color:#fff; }
.adm-nav-item.active .adm-nav-link{
  background:linear-gradient(135deg, var(--adm-blue-500), #1e6fd9);
  color:#fff;
  box-shadow:0 8px 20px rgba(47,125,234,.35);
}
.adm-nav-badge{
  margin-left:auto;
  background:rgba(255,255,255,.1);
  color:#8b96b3;
  font-size:.62rem;
  font-weight:700;
  padding:.15rem .45rem;
  border-radius:.35rem;
  letter-spacing:.03em;
}
.adm-nav-item.is-disabled .adm-nav-link{ cursor:default; opacity:.55; }
.adm-nav-item.is-disabled .adm-nav-link:hover{ background:none; color:#aab4cf; }

/* ---- Collapsible submenu ---- */
.adm-nav-item.has-submenu .adm-nav-link{ cursor:pointer; }
.adm-submenu-caret{ margin-left:auto; font-size:.72rem; transition:transform .3s ease; }
.adm-nav-item.has-submenu.open .adm-submenu-caret{ transform:rotate(180deg); }
.adm-nav-item.has-submenu.parent-active .adm-nav-link{ background:rgba(255,255,255,.08); color:#fff; }
.adm-submenu{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
  margin-top:.15rem;
}
.adm-nav-item.has-submenu.open .adm-submenu{ max-height:260px; }
.adm-subnav-link{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.5rem .9rem .5rem 2.6rem;
  font-size:.83rem;
  color:#9aa5c4;
  border-radius:.55rem;
  transition:var(--adm-transition);
  position:relative;
}
.adm-subnav-link::before{
  content:"";
  position:absolute;
  left:1.65rem; top:50%;
  transform:translateY(-50%);
  width:5px; height:5px;
  border-radius:50%;
  background:#5a6689;
}
.adm-subnav-link:hover{ background:rgba(255,255,255,.06); color:#fff; }
.adm-subnav-link.active{ color:#fff; font-weight:700; }
.adm-subnav-link.active::before{ background:var(--adm-blue-400); }
.mem-sidebar .adm-subnav-link.active::before{ background:var(--mem-gold-1); }
.mem-sidebar .adm-nav-item.has-submenu.parent-active .adm-nav-link{ background:rgba(255,255,255,.12); }

/* ---- Reward tier card (Reward Prestasi) ---- */
.reward-card{
  background:#fff;
  border-radius:var(--adm-radius-md);
  border:1px solid var(--adm-border);
  box-shadow:var(--adm-shadow-sm);
  padding:1.6rem 1.3rem;
  text-align:center;
  height:100%;
  transition:var(--adm-transition);
  position:relative;
}
.reward-card:hover{ transform:translateY(-6px); box-shadow:var(--adm-shadow-md); }
.reward-card .reward-icon{
  width:64px; height:64px; border-radius:50%;
  margin:0 auto 1rem;
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem;
}
.reward-card.is-achieved .reward-icon{ background:var(--adm-success-bg); color:var(--adm-success); }
.reward-card.is-progress .reward-icon{ background:var(--adm-warning-bg); color:var(--adm-warning); }
.reward-card.is-locked{ opacity:.7; }
.reward-card.is-locked .reward-icon{ background:var(--adm-bg); color:var(--adm-muted); }
.reward-card h5{ font-weight:700; margin-bottom:.35rem; font-size:1rem; }
.reward-card p{ font-size:.82rem; color:var(--adm-muted); margin-bottom:.9rem; }
.reward-card .reward-req{
  font-size:.75rem;
  background:var(--adm-bg);
  border-radius:.5rem;
  padding:.5rem .7rem;
  margin-bottom:1rem;
}
.reward-card .reward-status-badge{ position:absolute; top:1rem; right:1rem; }

.adm-sidebar-footer{
  padding:1rem 1.2rem 1.4rem;
  border-top:1px solid rgba(255,255,255,.08);
}
.adm-logout-btn{
  display:flex; align-items:center; gap:.7rem;
  width:100%;
  background:rgba(240,80,110,.12);
  border:1px solid rgba(240,80,110,.25);
  color:#ff8fa3;
  padding:.6rem .9rem;
  border-radius:.6rem;
  font-size:.88rem;
  font-weight:600;
  transition:var(--adm-transition);
}
.adm-logout-btn:hover{ background:rgba(240,80,110,.22); color:#fff; }

.adm-sidebar-overlay{
  display:none;
  position:fixed; inset:0;
  background:rgba(5,11,26,.55);
  z-index:1040;
}

/* ============================================================
   MAIN AREA / TOPBAR
   ============================================================ */
.adm-main{
  flex:1;
  min-width:0;
  margin-left:var(--adm-sidebar-w);
  display:flex;
  flex-direction:column;
  min-height:calc(100vh / var(--page-zoom));
}

.adm-topbar{
  position:sticky;
  top:0;
  z-index:1000;
  background:#fff;
  border-bottom:1px solid var(--adm-border);
  padding:.8rem 1.6rem;
  display:flex;
  align-items:center;
  gap:1rem;
  box-shadow:0 2px 10px rgba(20,30,60,.03);
}
.adm-toggle-btn{
  display:none;
  width:40px; height:40px;
  border-radius:.6rem;
  border:1px solid var(--adm-border);
  background:#fff;
  align-items:center; justify-content:center;
  font-size:1.1rem;
  color:var(--adm-ink);
  flex-shrink:0;
}
.adm-page-heading{ margin-right:auto; }
.adm-page-heading h1{ font-size:1.15rem; font-weight:700; margin:0; }
.adm-page-heading .adm-breadcrumb{ font-size:.78rem; color:var(--adm-muted); margin:0; }
.adm-page-heading .adm-breadcrumb a{ color:var(--adm-muted); }
.adm-page-heading .adm-breadcrumb a:hover{ color:var(--adm-blue-500); }

.adm-search{
  position:relative;
  width:280px;
}
.adm-search i{
  position:absolute; left:.9rem; top:50%; transform:translateY(-50%);
  color:var(--adm-muted); font-size:.95rem;
}
.adm-search input{
  width:100%;
  border:1px solid var(--adm-border);
  background:var(--adm-bg);
  border-radius:2rem;
  padding:.55rem 1rem .55rem 2.4rem;
  font-size:.85rem;
  transition:var(--adm-transition);
}
.adm-search input:focus{
  outline:none;
  border-color:var(--adm-blue-400);
  background:#fff;
  box-shadow:0 0 0 .18rem rgba(74,155,255,.15);
}

.adm-icon-btn{
  position:relative;
  width:42px; height:42px;
  border-radius:50%;
  border:1px solid var(--adm-border);
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem;
  color:var(--adm-ink);
  flex-shrink:0;
  transition:var(--adm-transition);
}
.adm-icon-btn:hover{ background:var(--adm-blue-100); color:var(--adm-blue-500); border-color:var(--adm-blue-300); }
.adm-badge-dot{
  position:absolute;
  top:8px; right:9px;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--adm-danger);
  box-shadow:0 0 0 0 rgba(240,80,110,.6);
  animation:admPulse 2s infinite;
}
@keyframes admPulse{
  0%{ box-shadow:0 0 0 0 rgba(240,80,110,.55); }
  70%{ box-shadow:0 0 0 7px rgba(240,80,110,0); }
  100%{ box-shadow:0 0 0 0 rgba(240,80,110,0); }
}

.adm-profile{
  position:relative;
  display:flex; align-items:center; gap:.6rem;
  padding:.35rem .6rem .35rem .35rem;
  border-radius:2rem;
  border:1px solid var(--adm-border);
  background:#fff;
  cursor:pointer;
  transition:var(--adm-transition);
}
.adm-profile:hover{ box-shadow:var(--adm-shadow-sm); }
.adm-profile img{ width:36px; height:36px; border-radius:50%; object-fit:cover; }
.adm-profile-name{ font-size:.85rem; font-weight:600; line-height:1.1; }
.adm-profile-role{ font-size:.7rem; color:var(--adm-muted); }
.adm-profile-menu{
  position:absolute;
  top:calc(100% + .7rem);
  right:0;
  background:#fff;
  border-radius:.8rem;
  box-shadow:var(--adm-shadow-lg);
  width:210px;
  padding:.5rem;
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:var(--adm-transition);
  z-index:1100;
}
.adm-profile-menu.show{ opacity:1; visibility:visible; transform:translateY(0); }
.adm-profile-menu a{
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .7rem;
  border-radius:.55rem;
  font-size:.85rem;
  color:var(--adm-ink);
  transition:var(--adm-transition);
}
.adm-profile-menu a:hover{ background:var(--adm-blue-100); color:var(--adm-blue-500); }
.adm-profile-menu hr{ margin:.4rem 0; border-color:var(--adm-border); }

/* ============================================================
   CONTENT
   ============================================================ */
.adm-content{ padding:1.6rem; flex:1; min-width:0; }

.adm-page-head{
  display:flex; align-items:center; flex-wrap:wrap; gap:1rem;
  margin-bottom:1.4rem;
}
.adm-page-head h2{ font-size:1.4rem; font-weight:800; margin:0 0 .2rem; }
.adm-page-head p{ color:var(--adm-muted); font-size:.88rem; margin:0; }
.adm-page-head .adm-actions{ margin-left:auto; display:flex; gap:.6rem; flex-wrap:wrap; }

/* ============================================================
   BUTTONS
   ============================================================ */
.adm-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  border:none;
  border-radius:.6rem;
  padding:.6rem 1.2rem;
  font-size:.86rem;
  font-weight:600;
  cursor:pointer;
  transition:var(--adm-transition);
  white-space:nowrap;
}
.adm-btn-primary{
  background:linear-gradient(135deg,var(--adm-blue-500),var(--adm-blue-400));
  color:#fff;
  box-shadow:0 8px 18px rgba(47,125,234,.3);
}
.adm-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(47,125,234,.4); color:#fff; }
.adm-btn-light{ background:#fff; color:var(--adm-ink); border:1px solid var(--adm-border); }
.adm-btn-light:hover{ background:var(--adm-blue-100); color:var(--adm-blue-500); }
.adm-btn-sm{ padding:.4rem .85rem; font-size:.78rem; }
.adm-btn.is-picked{ background:var(--adm-success-bg); color:var(--adm-success); box-shadow:none; cursor:default; }
.adm-btn-icon{
  width:36px; height:36px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:.5rem;
  border:1px solid var(--adm-border);
  background:#fff;
  color:var(--adm-muted);
}
.adm-btn-icon:hover{ background:var(--adm-blue-100); color:var(--adm-blue-500); border-color:var(--adm-blue-300); }
.adm-btn-icon.is-danger:hover{ background:var(--adm-danger-bg); color:var(--adm-danger); border-color:#f6c3cf; }

/* ============================================================
   GENERIC CARD
   ============================================================ */
.adm-card{
  background:var(--adm-card);
  border-radius:var(--adm-radius-md);
  box-shadow:var(--adm-shadow-sm);
  border:1px solid var(--adm-border);
  transition:var(--adm-transition);
}
.adm-card-header{
  display:flex; align-items:center; flex-wrap:wrap; gap:.7rem;
  padding:1.2rem 1.4rem;
  border-bottom:1px solid var(--adm-border);
}
.adm-card-header h3{ font-size:1rem; font-weight:700; margin:0; }
.adm-card-header p{ font-size:.78rem; color:var(--adm-muted); margin:.15rem 0 0; }
.adm-card-header .adm-card-actions{ margin-left:auto; }
.adm-card-body{ padding:1.4rem; }

.adm-tabs-pill{ display:flex; gap:.3rem; background:var(--adm-bg); padding:.25rem; border-radius:2rem; flex-wrap:wrap; }
.adm-tabs-pill button,
.adm-tabs-pill a{
  border:none; background:transparent; padding:.5rem 1.1rem;
  font-size:.78rem; font-weight:600; color:var(--adm-muted);
  border-radius:2rem; transition:var(--adm-transition); cursor:pointer;
  text-decoration:none; display:inline-flex; align-items:center; gap:.4rem;
}
.adm-tabs-pill button.active,
.adm-tabs-pill a.active{ background:#fff; color:var(--adm-blue-500); box-shadow:var(--adm-shadow-sm); }
.adm-tabs-pill a:hover:not(.active){ color:var(--adm-blue-500); }

/* ============================================================
   KPI STAT CARDS
   ============================================================ */
.adm-stat-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.1rem;
  margin-bottom:1.4rem;
}
.adm-stat-card{
  background:var(--adm-card);
  border-radius:var(--adm-radius-md);
  border:1px solid var(--adm-border);
  box-shadow:var(--adm-shadow-sm);
  padding:1.3rem 1.4rem;
  display:flex;
  align-items:flex-start;
  gap:1rem;
  transition:var(--adm-transition);
  animation:admFadeUp .5s ease both;
}
.adm-stat-card:hover{ transform:translateY(-6px); box-shadow:var(--adm-shadow-md); }
@keyframes admFadeUp{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
.adm-stat-icon{
  width:52px; height:52px; min-width:52px;
  border-radius:.8rem;
  display:flex; align-items:center; justify-content:center;
  font-size:1.35rem;
}
.adm-stat-icon.is-blue{ background:var(--adm-blue-100); color:var(--adm-blue-500); }
.adm-stat-icon.is-green{ background:var(--adm-success-bg); color:var(--adm-success); }
.adm-stat-icon.is-purple{ background:var(--adm-purple-bg); color:var(--adm-purple); }
.adm-stat-icon.is-orange{ background:var(--adm-warning-bg); color:var(--adm-warning); }
.adm-stat-icon.is-teal{ background:var(--adm-teal-bg); color:var(--adm-teal); }
.adm-stat-icon.is-red{ background:var(--adm-danger-bg); color:var(--adm-danger); }
.adm-stat-value{ font-size:1.55rem; font-weight:800; line-height:1.1; }
.adm-stat-label{ font-size:.8rem; color:var(--adm-muted); margin:.15rem 0 .5rem; }
.adm-stat-trend{ font-size:.75rem; font-weight:700; display:inline-flex; align-items:center; gap:.25rem; padding:.15rem .5rem; border-radius:.4rem; }
.adm-stat-trend.up{ color:var(--adm-success); background:var(--adm-success-bg); }
.adm-stat-trend.down{ color:var(--adm-danger); background:var(--adm-danger-bg); }

/* ============================================================
   CHARTS
   ============================================================ */
.adm-chart-wrap{ position:relative; height:300px; }
.adm-chart-wrap.is-sm{ height:260px; }
.adm-legend-list{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1rem; justify-content:center; }
.adm-legend-item{ display:flex; align-items:center; gap:.4rem; font-size:.78rem; color:var(--adm-muted); }
.adm-legend-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }

/* ============================================================
   LEADERBOARD
   ============================================================ */
.adm-leaderboard-item{
  display:flex; align-items:center; gap:.9rem;
  padding:.8rem 0;
  border-bottom:1px solid var(--adm-border);
}
.adm-leaderboard-item:last-child{ border-bottom:none; padding-bottom:0; }
.adm-leaderboard-item:first-child{ padding-top:0; }
.adm-rank-medal{
  width:32px; height:32px; min-width:32px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.82rem; color:#fff;
}
.adm-rank-medal.gold{ background:linear-gradient(135deg,#ffd76a,#e8a839); }
.adm-rank-medal.silver{ background:linear-gradient(135deg,#dfe6f0,#a7b3c9); color:var(--adm-navy-900); }
.adm-rank-medal.bronze{ background:linear-gradient(135deg,#e2a373,#b6713d); }
.adm-rank-medal.plain{ background:var(--adm-bg); color:var(--adm-muted); }
.adm-lb-avatar{ width:38px; height:38px; border-radius:50%; object-fit:cover; }
.adm-lb-info{ flex:1; min-width:0; }
.adm-lb-info .name{ font-size:.86rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.adm-lb-info .sub{ font-size:.74rem; color:var(--adm-muted); }
.adm-lb-value{ text-align:right; min-width:100px; }
.adm-lb-value .amount{ font-size:.85rem; font-weight:700; }
.adm-progress{ height:6px; background:var(--adm-bg); border-radius:1rem; overflow:hidden; margin-top:.3rem; }
.adm-progress-bar{ height:100%; border-radius:1rem; background:linear-gradient(90deg,var(--adm-blue-500),var(--adm-blue-400)); width:0; transition:width 1.1s cubic-bezier(.4,.2,.2,1); }

/* ============================================================
   BADGES (rank & status)
   ============================================================ */
.adm-badge{
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.72rem; font-weight:700;
  padding:.28rem .62rem;
  border-radius:.4rem;
  white-space:nowrap;
}
.adm-badge-diamond{ background:var(--adm-purple-bg); color:var(--adm-purple); }
.adm-badge-platinum{ background:#eef1f6; color:#546077; }
.adm-badge-gold{ background:var(--adm-warning-bg); color:#c9821a; }
.adm-badge-silver{ background:#eef1f6; color:#6c7891; }
.adm-badge-bronze{ background:#fbe9de; color:#a35b25; }
.adm-badge-active{ background:var(--adm-success-bg); color:var(--adm-success); }
.adm-badge-inactive{ background:var(--adm-danger-bg); color:var(--adm-danger); }
.adm-badge-pending{ background:var(--adm-warning-bg); color:var(--adm-warning); }
.adm-badge-approved{ background:var(--adm-success-bg); color:var(--adm-success); }
.adm-badge-rejected{ background:var(--adm-danger-bg); color:var(--adm-danger); }

/* ============================================================
   TABLE
   ============================================================ */
.adm-table-wrap{ overflow-x:auto; }
.adm-table{ width:100%; border-collapse:collapse; min-width:720px; }
.adm-table thead th{
  text-align:left;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--adm-muted);
  padding:.8rem 1rem;
  background:var(--adm-bg);
  border-bottom:1px solid var(--adm-border);
  white-space:nowrap;
}
.adm-table thead th:first-child{ border-top-left-radius:.6rem; }
.adm-table thead th:last-child{ border-top-right-radius:.6rem; }
.adm-table tbody td{
  padding:.85rem 1rem;
  font-size:.85rem;
  border-bottom:1px solid var(--adm-border);
  vertical-align:middle;
}
.adm-table tbody tr{ transition:var(--adm-transition); }
.adm-table tbody tr:hover{ background:var(--adm-blue-100); }
.adm-table tbody tr:last-child td{ border-bottom:none; }
.adm-cell-user{ display:flex; align-items:center; gap:.7rem; }
.adm-cell-user img{ width:36px; height:36px; border-radius:50%; object-fit:cover; }
.adm-cell-user .name{ font-weight:600; font-size:.85rem; }
.adm-cell-user .email{ font-size:.74rem; color:var(--adm-muted); }
.adm-table-actions{ display:flex; gap:.4rem; }

.adm-pagination{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.8rem; padding:1.1rem 1.4rem; }
.adm-pagination .info{ font-size:.8rem; color:var(--adm-muted); }
.adm-pagination .pages{ display:flex; gap:.35rem; list-style:none; margin:0; padding:0; }
.adm-pagination .pages button,
.adm-pagination .pages li > a,
.adm-pagination .pages li > span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:34px; padding:0 .4rem;
  border-radius:.5rem;
  border:1px solid var(--adm-border);
  background:#fff;
  font-size:.8rem;
  color:var(--adm-ink);
  transition:var(--adm-transition);
  cursor:pointer;
  text-decoration:none;
}
.adm-pagination .pages button:hover,
.adm-pagination .pages li > a:hover{ background:var(--adm-blue-100); color:var(--adm-blue-500); }
.adm-pagination .pages button.active,
.adm-pagination .pages li.selected > a,
.adm-pagination .pages li.selected > span{ background:var(--adm-blue-500); color:#fff; border-color:var(--adm-blue-500); }
.adm-pagination .pages li.hidden > span{ opacity:.5; cursor:default; }

/* ============================================================
   FILTER BAR (Members page)
   ============================================================ */
.adm-filter-bar{
  display:flex; align-items:center; flex-wrap:wrap; gap:.7rem;
  padding:1.2rem 1.4rem;
  border-bottom:1px solid var(--adm-border);
}
.adm-filter-input, .adm-filter-select{
  border:1px solid var(--adm-border);
  border-radius:.55rem;
  padding:.55rem .8rem;
  font-size:.84rem;
  background:var(--adm-bg);
  transition:var(--adm-transition);
}
.adm-filter-input{ padding-left:2.3rem; }
.adm-filter-input:focus, .adm-filter-select:focus{ outline:none; border-color:var(--adm-blue-400); background:#fff; box-shadow:0 0 0 .15rem rgba(74,155,255,.15); }
.adm-filter-group{ position:relative; }
.adm-filter-group i{ position:absolute; left:.8rem; top:50%; transform:translateY(-50%); color:var(--adm-muted); font-size:.85rem; }
.adm-filter-bar .adm-btn-light{ margin-left:auto; }

.adm-mini-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.4rem; }
.adm-mini-stat{
  background:#fff; border:1px solid var(--adm-border); border-radius:var(--adm-radius-md);
  padding:1rem 1.2rem; display:flex; align-items:center; gap:.8rem;
  box-shadow:var(--adm-shadow-sm);
}
.adm-mini-stat .adm-stat-icon{ width:42px; height:42px; font-size:1.1rem; }
.adm-mini-stat .val{ font-size:1.2rem; font-weight:800; line-height:1; }
.adm-mini-stat .lbl{ font-size:.75rem; color:var(--adm-muted); margin-top:.2rem; }

/* ============================================================
   NETWORK TREE (org chart, pure CSS)
   ============================================================ */
.adm-tree-toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; margin-bottom:1.2rem; }
.adm-tree-legend{ display:flex; flex-wrap:wrap; gap:1rem; }

.adm-tree-scroll{ overflow-x:auto; padding:2.4rem 1rem 1.5rem; min-width:0; }
.org-tree, .org-tree ul{
  padding-top:28px;
  position:relative;
  display:flex;
  justify-content:safe center;
  width:fit-content;
  margin:0 auto;
}
.org-tree ul{ padding-top:34px; }
.org-tree li{
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  align-items:center;
  list-style:none;
  position:relative;
  padding:34px 14px 0 14px;
}
.org-tree > li{ padding-top:0; }
.org-tree li::before, .org-tree li::after{
  content:'';
  position:absolute;
  top:0;
  right:50%;
  border-top:2px solid var(--adm-blue-300);
  width:50%;
  height:34px;
}
.org-tree li::after{ right:auto; left:50%; border-left:2px solid var(--adm-blue-300); }
.org-tree li:only-child::after, .org-tree li:only-child::before{ display:none; }
.org-tree li:only-child{ padding-top:0; }
.org-tree > li::before, .org-tree > li::after{ display:none; }
.org-tree li:first-child::before{ border:0 none; }
.org-tree li:last-child::after{ border:0 none; }
.org-tree li:last-child::before{ border-right:2px solid var(--adm-blue-300); border-radius:0 6px 0 0; }
.org-tree li:first-child::after{ border-radius:6px 0 0 0; }
.org-tree ul::before{
  content:'';
  position:absolute;
  top:0; left:50%;
  border-left:2px solid var(--adm-blue-300);
  width:0; height:34px;
}
.org-tree li ul{ display:flex; }

.adm-node{
  background:#fff;
  border:1.5px solid var(--adm-border);
  border-radius:.8rem;
  padding:.85rem 1rem;
  width:168px;
  text-align:center;
  box-shadow:var(--adm-shadow-sm);
  cursor:pointer;
  transition:var(--adm-transition);
  position:relative;
}
.adm-node:hover{ transform:translateY(-4px); box-shadow:var(--adm-shadow-md); border-color:var(--adm-blue-300); }
.adm-node.selected{ border-color:var(--adm-blue-500); box-shadow:0 0 0 4px rgba(47,125,234,.15), var(--adm-shadow-md); }
.adm-node.is-match{ border-color:var(--adm-warning); box-shadow:0 0 0 4px rgba(255,165,61,.22), var(--adm-shadow-md); animation:admNodePop .5s ease; }
@keyframes admNodePop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.06); } 100%{ transform:scale(1); } }
.adm-node.is-root{ width:190px; border-color:#f0c56a; }
.adm-node img{ width:46px; height:46px; border-radius:50%; margin-bottom:.5rem; }
.adm-node .name{ font-size:.82rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.adm-node .rank{ margin-top:.3rem; }
.adm-node .count{ font-size:.68rem; color:var(--adm-muted); margin-top:.35rem; }

.adm-detail-panel{ position:sticky; top:90px; }
.adm-detail-empty{ text-align:center; color:var(--adm-muted); padding:2rem 1rem; font-size:.85rem; }
.adm-detail-avatar{ width:70px; height:70px; border-radius:50%; margin:0 auto .8rem; display:block; }
.adm-detail-name{ text-align:center; font-weight:700; font-size:1.05rem; margin-bottom:.15rem; }
.adm-detail-row{ display:flex; justify-content:space-between; padding:.55rem 0; border-bottom:1px solid var(--adm-border); font-size:.82rem; }
.adm-detail-row:last-child{ border-bottom:none; }
.adm-detail-row span:first-child{ color:var(--adm-muted); }
.adm-detail-row span:last-child{ font-weight:600; }

/* ============================================================
   MEMBER PANEL — sidebar variant + user card
   ============================================================ */
:root{
  --mem-side-1:#0f2e6b;
  --mem-side-2:#1c4fae;
  --mem-gold-1:#ffd76a;
  --mem-gold-2:#ff9d3d;
}

.adm-sidebar.mem-sidebar{
  background:linear-gradient(190deg, var(--mem-side-1) 0%, var(--mem-side-2) 100%);
  border-right-color:rgba(255,255,255,.1);
}
.mem-sidebar .adm-sidebar-brand{ border-bottom-color:rgba(255,255,255,.14); }
.mem-sidebar .adm-nav-link{ color:#cfe0ff; }
.mem-sidebar .adm-nav-link:hover{ background:rgba(255,255,255,.1); color:#fff; }
.mem-sidebar .adm-nav-item.active .adm-nav-link{
  background:linear-gradient(135deg, var(--mem-gold-1), var(--mem-gold-2));
  color:var(--adm-navy-950);
  box-shadow:0 8px 20px rgba(255,157,61,.35);
}
.mem-sidebar .adm-nav-section-label{ color:#9db8ec; }
.mem-sidebar .adm-logout-btn{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); color:#fff; }
.mem-sidebar .adm-logout-btn:hover{ background:rgba(240,80,110,.35); border-color:rgba(240,80,110,.5); color:#fff; }
.mem-sidebar .adm-sidebar-footer{ border-top-color:rgba(255,255,255,.14); }

/* ---- User card (top of member sidebar) — compact version ---- */
.mem-user-card{
  margin:1rem 1.1rem 0;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);
  border-radius:.9rem;
  padding:.9rem .95rem;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.mem-user-top{ display:flex; align-items:center; gap:.65rem; margin-bottom:.65rem; }
.mem-user-avatar-wrap{ position:relative; width:44px; height:44px; flex-shrink:0; }
.mem-user-avatar-wrap img{
  width:44px; height:44px; border-radius:50%; object-fit:cover;
  border:2px solid var(--mem-gold-1);
  box-shadow:0 3px 10px rgba(0,0,0,.25);
}
.mem-user-online{
  position:absolute; bottom:0; right:0;
  width:11px; height:11px; border-radius:50%;
  background:var(--adm-success);
  border:2px solid var(--mem-side-2);
}
.mem-user-info{ min-width:0; }
.mem-user-name{ color:#fff; font-weight:700; font-size:.86rem; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mem-user-username{ color:#a9c3f2; font-size:.72rem; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.mem-user-tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.7rem; }
.mem-user-rank{
  display:inline-flex; align-items:center; gap:.25rem;
  background:linear-gradient(135deg, var(--mem-gold-1), var(--mem-gold-2));
  color:var(--adm-navy-950);
  font-size:.66rem; font-weight:800;
  padding:.22rem .55rem;
  border-radius:2rem;
}
.mem-user-package-tag{
  display:inline-flex; align-items:center; gap:.25rem;
  background:rgba(255,255,255,.1); color:#dbe7ff;
  font-size:.66rem; font-weight:600;
  padding:.22rem .55rem;
  border-radius:2rem;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mem-user-divider{ border-top:1px dashed rgba(255,255,255,.18); margin:0 0 .65rem; }

.mem-wallet-compact{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.mem-wallet-info{ min-width:0; }
.mem-wallet-label{ display:flex; align-items:center; gap:.3rem; color:#a9c3f2; font-size:.66rem; margin-bottom:.1rem; }
.mem-wallet-value-sm{ color:#fff; font-weight:800; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.mem-wallet-icons{ display:flex; gap:.35rem; flex-shrink:0; }
.mem-icon-xs{
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12); color:#fff; border:none;
  font-size:.72rem; transition:var(--adm-transition); cursor:pointer;
  text-decoration:none;
}
.mem-icon-xs:hover{ background:rgba(255,255,255,.22); color:#fff; }
.mem-icon-xs.mem-icon-gold{ background:linear-gradient(135deg, var(--mem-gold-1), var(--mem-gold-2)); color:var(--adm-navy-950); }
.mem-icon-xs.mem-icon-gold:hover{ filter:brightness(1.08); }

/* ---- Rank progress card (dashboard content) ---- */
.mem-rank-progress{
  background:linear-gradient(120deg, var(--mem-side-1), var(--mem-side-2));
  border-radius:var(--adm-radius-lg);
  padding:1.6rem 1.8rem;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.mem-rank-progress::before{
  content:"";
  position:absolute; width:260px; height:260px;
  background:radial-gradient(circle, rgba(255,215,106,.22), transparent 70%);
  top:-90px; right:-60px; border-radius:50%;
}
.mem-rank-progress .rp-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem; margin-bottom:1rem; position:relative; z-index:1; }
.mem-rank-progress .rp-track{ height:10px; border-radius:1rem; background:rgba(255,255,255,.18); overflow:hidden; position:relative; z-index:1; }
.mem-rank-progress .rp-fill{ height:100%; border-radius:1rem; background:linear-gradient(90deg, var(--mem-gold-1), var(--mem-gold-2)); width:0; transition:width 1.2s cubic-bezier(.4,.2,.2,1); }
.mem-rank-progress .rp-labels{ display:flex; justify-content:space-between; font-size:.76rem; color:#cfe0ff; margin-top:.5rem; position:relative; z-index:1; }

/* ---- Referral card ---- */
.mem-referral-box{
  display:flex; align-items:center; gap:.6rem;
  background:var(--adm-bg);
  border:1px dashed var(--adm-border);
  border-radius:.6rem;
  padding:.6rem .8rem;
}
.mem-referral-box input{
  border:none; background:transparent; flex:1;
  font-size:.82rem; color:var(--adm-ink); outline:none;
}
.mem-share-icons{ display:flex; gap:.5rem; margin-top:1rem; }
.mem-share-icons a{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--adm-bg); color:var(--adm-muted);
  border:1px solid var(--adm-border);
  transition:var(--adm-transition);
}
.mem-share-icons a:hover{ background:var(--adm-blue-500); color:#fff; border-color:var(--adm-blue-500); transform:translateY(-3px); }

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-wrapper{ min-height:calc(100vh / var(--page-zoom)); display:flex; zoom:var(--page-zoom); }

.login-brand{
  flex:1;
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg, var(--adm-navy-950) 0%, var(--adm-navy-800) 55%, #123a7a 130%);
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:3.5rem;
}
.login-blob{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; animation:loginBlobFloat 9s ease-in-out infinite; }
.login-blob.b1{ width:320px; height:320px; background:var(--adm-blue-500); top:-70px; left:-70px; }
.login-blob.b2{ width:280px; height:280px; background:#ffb238; bottom:-60px; right:-50px; animation-delay:2.4s; }
.login-blob.b3{ width:220px; height:220px; background:#8a63f2; top:45%; left:58%; animation-delay:4.8s; }
@keyframes loginBlobFloat{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(24px,-28px) scale(1.08); }
}

.login-brand-content{ position:relative; z-index:1; max-width:440px; }
.login-brand-logo{
  width:64px; height:64px; border-radius:1rem;
  background:linear-gradient(135deg, var(--adm-blue-500), var(--adm-silver));
  display:flex; align-items:center; justify-content:center;
  font-size:1.9rem; font-weight:800; color:var(--adm-navy-950);
  margin-bottom:1.6rem;
  box-shadow:0 10px 26px rgba(47,125,234,.35);
  animation:admFadeUp .6s ease both;
}
.login-brand-content h1{ font-size:1.9rem; font-weight:800; margin-bottom:.6rem; animation:admFadeUp .6s ease .05s both; }
.login-brand-content p{ color:#c5d1e8; font-size:.95rem; margin-bottom:2.2rem; animation:admFadeUp .6s ease .1s both; }

.login-stats{ display:flex; gap:1rem; flex-wrap:wrap; }
.login-stat-chip{
  flex:1; min-width:130px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:.8rem;
  padding:.9rem 1rem;
  backdrop-filter:blur(6px);
  animation:admFadeUp .6s ease .15s both;
}
.login-stat-chip .num{ font-size:1.25rem; font-weight:800; color:#fff; }
.login-stat-chip .lbl{ font-size:.72rem; color:#a9c3f2; margin-top:.15rem; }

.login-form-side{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2.5rem 2rem;
  background:#fff;
}
.login-card{ width:100%; max-width:420px; animation:admFadeUp .5s ease both; }
.login-card-head{ margin-bottom:1.8rem; }
.login-card-head h2{ font-size:1.5rem; font-weight:800; margin-bottom:.3rem; }
.login-card-head p{ color:var(--adm-muted); font-size:.88rem; margin:0; }

.login-role-toggle{
  display:flex;
  background:var(--adm-bg);
  border-radius:2rem;
  padding:.3rem;
  margin-bottom:1.8rem;
}
.login-role-toggle button{
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:.4rem;
  border:none; background:transparent;
  padding:.6rem .5rem;
  border-radius:2rem;
  font-weight:700; font-size:.83rem;
  color:var(--adm-muted);
  transition:var(--adm-transition);
  cursor:pointer;
}
.login-role-toggle button.active{ background:#fff; box-shadow:var(--adm-shadow-sm); }
.login-role-toggle button[data-role="admin"].active{ color:var(--adm-blue-500); }
.login-role-toggle button[data-role="member"].active{ color:#b5790a; }

.login-input-group{ position:relative; margin-bottom:1.1rem; }
.login-input-group label{ display:block; font-size:.83rem; font-weight:600; margin-bottom:.4rem; }
.login-icon-left{ position:absolute; left:1rem; top:calc(50% + .55rem); transform:translateY(-50%); color:var(--adm-muted); font-size:.95rem; }
.login-input-group input{
  width:100%;
  border:1.5px solid var(--adm-border);
  border-radius:.7rem;
  padding:.75rem 1rem .75rem 2.6rem;
  font-size:.9rem;
  transition:var(--adm-transition);
}
.login-input-group input:focus{ outline:none; border-color:var(--adm-blue-400); box-shadow:0 0 0 .18rem rgba(74,155,255,.15); }
.login-toggle-pass{
  position:absolute; right:.9rem; top:calc(50% + .55rem); transform:translateY(-50%);
  background:none; border:none; color:var(--adm-muted); cursor:pointer; font-size:.95rem;
}
.login-toggle-pass:hover{ color:var(--adm-blue-500); }

.login-options{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; font-size:.83rem; }
.login-options label{ display:flex; align-items:center; gap:.4rem; color:var(--adm-muted); cursor:pointer; }
.login-options a{ color:var(--adm-blue-500); font-weight:600; }
.login-options a:hover{ color:var(--adm-navy-900); }

.login-submit-btn{
  width:100%;
  justify-content:center;
  padding:.8rem 1.2rem;
  font-size:.92rem;
}
.login-submit-btn .spinner-border{ display:none; width:1rem; height:1rem; border-width:.16em; }
.login-submit-btn.is-loading .btn-label{ display:none; }
.login-submit-btn.is-loading .spinner-border{ display:inline-block; }

.login-divider{ display:flex; align-items:center; gap:.8rem; margin:1.6rem 0; color:var(--adm-muted); font-size:.8rem; }
.login-divider::before, .login-divider::after{ content:""; flex:1; height:1px; background:var(--adm-border); }

.login-help-box{
  display:flex; align-items:center; gap:.7rem;
  background:var(--adm-bg);
  border-radius:.7rem;
  padding:.8rem 1rem;
  font-size:.83rem;
  color:var(--adm-muted);
}
.login-help-box i{ color:var(--adm-blue-500); font-size:1.1rem; }

.login-footer-text{ text-align:center; font-size:.8rem; color:var(--adm-muted); margin-top:1.6rem; }

/* ============================================================
   FORGOT PASSWORD PAGE
   ============================================================ */
.login-step{ display:none; }
.login-step.active{ display:block; animation:admFadeUp .45s ease; }

/* ============================================================
   GENERIC FORM FIELDS (used by multi-step forms, e.g. registration)
   ============================================================ */
.adm-form-group{ margin-bottom:1.15rem; }
.adm-form-label{ display:block; font-size:.83rem; font-weight:600; margin-bottom:.4rem; color:var(--adm-ink); }
.adm-form-label .req, .login-input-group .req{ color:var(--adm-danger); }
.adm-form-control{
  width:100%; border:1px solid var(--adm-border); border-radius:.55rem;
  padding:.6rem .9rem; font-size:.87rem; background:#fff; color:var(--adm-ink);
  transition:var(--adm-transition);
}
.adm-form-control:focus{ outline:none; border-color:var(--adm-blue-400); box-shadow:0 0 0 .15rem rgba(74,155,255,.15); }
.adm-form-control.is-invalid{ border-color:var(--adm-danger); }
.adm-form-control[readonly]{ background:var(--adm-bg); color:var(--adm-muted); }
textarea.adm-form-control{ min-height:90px; resize:vertical; }
.adm-form-hint{ font-size:.76rem; color:var(--adm-muted); margin-top:.4rem; }
.adm-form-hint.warn{ color:#c9821a; }
.adm-form-status{ font-size:.78rem; margin-top:.45rem; display:flex; align-items:center; gap:.35rem; }
.adm-form-status.is-loading{ color:var(--adm-muted); }
.adm-form-status.is-ok{ color:var(--adm-success); }
.adm-form-status.is-err{ color:var(--adm-danger); }
.adm-form-radio-row{ display:flex; gap:1.3rem; flex-wrap:wrap; }
.adm-form-radio-row label{ display:flex; align-items:center; gap:.45rem; font-size:.87rem; cursor:pointer; }

/* ============================================================
   IMAGE UPLOAD BOX (dependency-free replacement for dropify/fancy-uploader)
   ============================================================ */
.adm-upload-box{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; text-align:center; cursor:pointer; position:relative; overflow:hidden;
  border:1.5px dashed var(--adm-border); border-radius:var(--adm-radius-md);
  background:var(--adm-bg); padding:1.6rem 1rem; min-height:150px;
  transition:var(--adm-transition);
}
.adm-upload-box:hover{ border-color:var(--adm-blue-400); background:var(--adm-blue-100); }
.adm-upload-placeholder{ display:flex; flex-direction:column; align-items:center; gap:.35rem; color:var(--adm-muted); }
.adm-upload-placeholder i{ font-size:1.7rem; color:var(--adm-blue-400); }
.adm-upload-placeholder span{ font-size:.87rem; font-weight:600; color:var(--adm-ink); }
.adm-upload-placeholder small{ font-size:.76rem; }
.adm-upload-box img{ max-width:100%; max-height:180px; border-radius:.6rem; object-fit:cover; }
.adm-form-pin-btn{
  display:flex; align-items:center; gap:.5rem;
  border:1px dashed var(--adm-blue-300); border-radius:.55rem;
  padding:.65rem .9rem; font-size:.85rem; font-weight:600;
  color:var(--adm-blue-500); background:var(--adm-blue-100);
  margin-bottom:.6rem; transition:var(--adm-transition);
}
.adm-form-pin-btn:hover{ background:var(--adm-blue-500); color:#fff; }

/* ============================================================
   WIZARD STEPPER (multi-step forms)
   ============================================================ */
.adm-wizard-steps{ display:flex; align-items:flex-start; margin-bottom:2rem; }
.adm-wizard-step{ flex:1; display:flex; flex-direction:column; align-items:center; position:relative; }
.adm-wizard-step .num{
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:2px solid var(--adm-border);
  font-weight:700; font-size:.85rem; color:var(--adm-muted);
  transition:var(--adm-transition); position:relative; z-index:1;
}
.adm-wizard-step .lbl{ font-size:.74rem; color:var(--adm-muted); margin-top:.5rem; text-align:center; padding:0 .3rem; }
.adm-wizard-step:not(:last-child)::after{
  content:""; position:absolute; top:17px; left:50%; width:100%; height:2px;
  background:var(--adm-border); z-index:0;
}
.adm-wizard-step.is-done .num{ background:var(--adm-success); border-color:var(--adm-success); color:#fff; }
.adm-wizard-step.is-done:not(:last-child)::after{ background:var(--adm-success); }
.adm-wizard-step.is-active .num{ background:var(--adm-blue-500); border-color:var(--adm-blue-500); color:#fff; }
.adm-wizard-step.is-active .lbl{ color:var(--adm-ink); font-weight:700; }
.adm-wizard-nav{ display:flex; justify-content:space-between; gap:.7rem; margin-top:1.8rem; padding-top:1.4rem; border-top:1px solid var(--adm-border); }

.login-icon-circle{
  width:64px; height:64px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem;
  margin-bottom:1.2rem;
  background:var(--adm-blue-100);
  color:var(--adm-blue-500);
}
.login-icon-circle.is-success{ background:var(--adm-success-bg); color:var(--adm-success); }

.login-back-link{
  display:inline-flex; align-items:center; gap:.4rem;
  color:var(--adm-muted);
  font-size:.85rem;
  font-weight:600;
  margin-top:1.4rem;
  transition:var(--adm-transition);
}
.login-back-link:hover{ color:var(--adm-blue-500); }

.login-masked-email{
  font-weight:700;
  color:var(--adm-ink);
  background:var(--adm-bg);
  padding:.15rem .5rem;
  border-radius:.4rem;
  display:inline-block;
}

.login-resend-row{
  display:flex; align-items:center; justify-content:center; gap:.4rem;
  font-size:.85rem; color:var(--adm-muted);
  margin-top:1.4rem;
  text-align:center;
}
.login-resend-btn{
  background:none; border:none;
  color:var(--adm-blue-500);
  font-weight:700;
  cursor:pointer;
  padding:0;
}
.login-resend-btn:disabled{ color:var(--adm-muted); cursor:not-allowed; }
.login-resend-btn:hover:not(:disabled){ color:var(--adm-navy-900); }

/* ============================================================
   BINARY TREE (Member panel)
   ============================================================ */
.adm-node.is-empty{
  border-style:dashed;
  border-color:#c7d0e0;
  background:var(--adm-bg);
  color:var(--adm-muted);
}
.adm-node.is-empty:hover{ border-color:var(--adm-blue-400); color:var(--adm-blue-500); background:var(--adm-blue-100); }
.adm-node.is-empty .plus-icon{ font-size:1.5rem; margin-bottom:.3rem; display:block; }
.adm-node.is-empty .name{ font-size:.78rem; font-weight:600; }

.bin-leg-label{
  font-size:.68rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align:center;
  padding:.25rem .7rem;
  border-radius:2rem;
  display:inline-block;
  margin-bottom:.5rem;
}
.bin-leg-label.left{ background:var(--adm-blue-100); color:var(--adm-blue-500); }
.bin-leg-label.right{ background:var(--adm-warning-bg); color:#c9821a; }

.bin-balance-row{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.bin-balance-side{ flex:1; min-width:200px; }
.bin-balance-side .leg-head{ display:flex; justify-content:space-between; align-items:center; font-size:.82rem; margin-bottom:.5rem; }
.bin-balance-side .leg-head strong{ font-size:.95rem; }
.bin-balance-track{ height:11px; background:var(--adm-bg); border-radius:1rem; overflow:hidden; }
.bin-balance-fill{ height:100%; border-radius:1rem; width:0; transition:width 1.1s cubic-bezier(.4,.2,.2,1); }
.bin-balance-fill.left{ background:linear-gradient(90deg,var(--adm-blue-500),var(--adm-blue-400)); }
.bin-balance-fill.right{ background:linear-gradient(90deg,#ffb238,#ff9d3d); }
.bin-vs-badge{
  width:44px; height:44px; border-radius:50%;
  background:var(--adm-navy-950); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.72rem; flex-shrink:0;
}

/* ============================================================
   E-WALLET / TRANSACTION UTILITIES
   ============================================================ */
.txn-credit{ color:var(--adm-success); font-weight:700; }
.txn-debit{ color:var(--adm-danger); font-weight:700; }
.txn-type-icon{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; flex-shrink:0;
}
.txn-type-icon.credit{ background:var(--adm-success-bg); color:var(--adm-success); }
.txn-type-icon.debit{ background:var(--adm-danger-bg); color:var(--adm-danger); }
.txn-row-hidden{ display:none !important; }

/* ============================================================
   TIER INFO CARD (Bonus Sponsor)
   ============================================================ */
.tier-info-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 0;
  border-bottom:1px solid var(--adm-border);
  font-size:.85rem;
}
.tier-info-item:last-child{ border-bottom:none; padding-bottom:0; }
.tier-info-item:first-child{ padding-top:0; }
.tier-info-pct{ font-weight:800; color:var(--adm-blue-500); font-size:.95rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1199.98px){
  .adm-stat-grid{ grid-template-columns:repeat(2,1fr); }
  .adm-mini-stats{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 991.98px){
  .adm-sidebar{ transform:translateX(-100%); }
  .adm-sidebar.show{ transform:translateX(0); box-shadow:var(--adm-shadow-lg); }
  .adm-sidebar-overlay.show{ display:block; }
  .adm-main{ margin-left:0; }
  .adm-toggle-btn{ display:flex; }
  .adm-search{ display:none; }

  .login-brand{ display:none; }
  .login-form-side{ padding:2rem 1.4rem; }
}

@media (max-width: 767.98px){
  .adm-stat-grid{ grid-template-columns:1fr; }
  .adm-mini-stats{ grid-template-columns:1fr 1fr; }
  .adm-content{ padding:1rem; }
  .adm-topbar{ padding:.7rem 1rem; }
  .adm-page-head .adm-actions{ margin-left:0; width:100%; }
  .adm-profile-name, .adm-profile-role{ display:none; }
  .adm-profile{ padding:.35rem; }
  .adm-filter-bar .adm-btn-light{ margin-left:0; width:100%; justify-content:center; }
  .adm-filter-bar > *{ width:100%; }
  .adm-filter-group{ width:100%; }
}

@media (max-width: 575.98px){
  .adm-mini-stats{ grid-template-columns:1fr; }
  .adm-node{ width:140px; padding:.65rem .7rem; }
  .adm-node img{ width:38px; height:38px; }
  .mem-user-card{ margin:1rem .8rem 0; padding:1rem .8rem; }
  .mem-rank-progress{ padding:1.3rem 1.2rem; }
}

/* ============================================================
   ERROR PAGE (404 / 403 / 500 / ...)
   ============================================================ */
.error-page-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem 1.2rem;
  background:radial-gradient(circle at 15% 15%, #123a7a 0%, transparent 45%),
             radial-gradient(circle at 85% 85%, #1e6fd9 0%, transparent 40%),
             linear-gradient(160deg, var(--adm-navy-950) 0%, var(--adm-navy-900) 60%, var(--adm-navy-800) 100%);
  position:relative;
  overflow:hidden;
}
.error-page-wrap::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:26px 26px;
  opacity:.5;
}
.error-card{
  position:relative;
  z-index:1;
  width:100%;
  max-width:560px;
  background:#fff;
  border-radius:var(--adm-radius-lg);
  box-shadow:var(--adm-shadow-lg);
  padding:3rem 2.6rem;
  text-align:center;
  animation:admFadeUp .55s ease both;
}
.error-code-badge{
  width:88px; height:88px;
  margin:0 auto 1.4rem;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:2.2rem;
  background:var(--adm-danger-bg);
  color:var(--adm-danger);
}
.error-code{
  font-size:4.2rem;
  font-weight:800;
  line-height:1;
  margin-bottom:.6rem;
  background:linear-gradient(135deg, var(--adm-blue-500), var(--adm-purple));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.error-title{ font-size:1.3rem; font-weight:800; color:var(--adm-ink); margin-bottom:.5rem; }
.error-message{ color:var(--adm-muted); font-size:.92rem; margin-bottom:2rem; line-height:1.6; }
.error-actions{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; }
.error-brand{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:.6rem;
  color:#cfe0ff; font-size:.8rem; font-weight:600; letter-spacing:.04em;
  margin-bottom:1.6rem; justify-content:center;
}
.error-brand img{ width:28px; height:28px; border-radius:.4rem; }

@media (max-width: 575.98px){
  .error-card{ padding:2.2rem 1.5rem; }
  .error-code{ font-size:3.2rem; }
  .error-code-badge{ width:72px; height:72px; font-size:1.8rem; }
}

/* ============================================================
   TOAST NOTIFICATIONS (for AJAX/popup actions — no page reload)
   ============================================================ */
.adm-toast-stack{
  position:fixed; top:1.2rem; right:1.2rem; z-index:2000;
  display:flex; flex-direction:column; gap:.6rem; max-width:340px;
}
.adm-toast{
  display:flex; align-items:flex-start; gap:.65rem;
  background:#fff; border-radius:var(--adm-radius-md); box-shadow:var(--adm-shadow-lg);
  padding:.85rem 1rem; font-size:.87rem; color:var(--adm-ink);
  border-left:4px solid var(--adm-blue-500);
  animation:admFadeUp .3s ease both;
}
.adm-toast i{ font-size:1.1rem; margin-top:.05rem; }
.adm-toast.is-success{ border-left-color:var(--adm-success); }
.adm-toast.is-success i{ color:var(--adm-success); }
.adm-toast.is-error{ border-left-color:var(--adm-danger); }
.adm-toast.is-error i{ color:var(--adm-danger); }
.adm-toast.is-leaving{ opacity:0; transform:translateX(12px); transition:var(--adm-transition); }

/* ============================================================
   YII FORM FIELD ERRORS (CActiveForm::error() default markup)
   ============================================================ */
.errorMessage{ display:block; color:var(--adm-danger); font-size:.78rem; margin-top:.4rem; }

/* ============================================================
   LOGIN: captcha row (secret/login)
   ============================================================ */
.login-captcha-row{ display:flex; align-items:center; gap:.8rem; margin-bottom:1.1rem; }
.login-captcha-row img{ border-radius:.6rem; border:1px solid var(--adm-border); }
.login-captcha-row input{ flex:1; min-width:0; }