/* PureConnect MLM — Neon Industrial Dashboard
 * Mobile-first. All critical layout also inlined in PHP so
 * page builders (Elementor) cannot strip the grid.
 */

:root{
  --pcm-bg:#070b14;
  --pcm-bg2:#0d1424;
  --pcm-card:#111a2e;
  --pcm-card2:#16213a;
  --pcm-line:rgba(120,160,255,.14);
  --pcm-txt:#e8f0ff;
  --pcm-mut:#8da2c8;
  --pcm-neon:#00e5ff;
  --pcm-neon2:#7c4dff;
  --pcm-green:#00e676;
  --pcm-amber:#ffb300;
  --pcm-pink:#ff4d8d;
  --pcm-radius:16px;
}

.pcm-wrap *{box-sizing:border-box;margin:0;padding:0}
.pcm-wrap{
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:
    radial-gradient(900px 500px at 12% -8%,rgba(124,77,255,.16),transparent 60%),
    radial-gradient(800px 480px at 95% 6%,rgba(0,229,255,.14),transparent 60%),
    var(--pcm-bg);
  color:var(--pcm-txt);
  min-height:100vh;
  padding:16px;
  line-height:1.5;
}

.pcm-topbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
  background:linear-gradient(135deg,rgba(124,77,255,.18),rgba(0,229,255,.10));
  border:1px solid var(--pcm-line);
  border-radius:var(--pcm-radius);
  padding:16px 18px;margin-bottom:18px;
}
.pcm-brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:18px}
.pcm-logo{
  width:42px;height:42px;border-radius:12px;
  background:linear-gradient(135deg,var(--pcm-neon),var(--pcm-neon2));
  display:flex;align-items:center;justify-content:center;font-size:20px;
  box-shadow:0 0 22px rgba(0,229,255,.5);
}
.pcm-logout{
  background:linear-gradient(135deg,#ff4d8d,#ff1744);
  color:#fff;border:none;border-radius:24px;
  padding:9px 20px;font-weight:700;font-size:13px;
  text-decoration:none;cursor:pointer;
  box-shadow:0 0 18px rgba(255,77,141,.45);
  transition:transform .15s,box-shadow .15s;
}
.pcm-logout:hover{transform:translateY(-2px);box-shadow:0 0 26px rgba(255,77,141,.7)}

.pcm-greet{font-size:15px;color:var(--pcm-mut);margin-bottom:4px}
.pcm-greet b{color:var(--pcm-txt)}
.pcm-rankchip{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(0,229,255,.12);border:1px solid rgba(0,229,255,.35);
  color:var(--pcm-neon);border-radius:20px;padding:4px 12px;
  font-size:12px;font-weight:700;
}

/* KPI grid */
.pcm-kpis{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:12px;margin-bottom:18px;
}
@media(min-width:760px){.pcm-kpis{grid-template-columns:repeat(4,1fr)}}
.pcm-kpi{
  background:var(--pcm-card);border:1px solid var(--pcm-line);
  border-radius:var(--pcm-radius);padding:16px;position:relative;overflow:hidden;
  transition:transform .18s,border-color .18s;
}
.pcm-kpi:hover{transform:translateY(-3px);border-color:rgba(0,229,255,.4)}
.pcm-kpi::after{
  content:"";position:absolute;right:-30px;top:-30px;
  width:90px;height:90px;border-radius:50%;opacity:.25;filter:blur(8px);
}
.pcm-kpi.k1::after{background:var(--pcm-green)}
.pcm-kpi.k2::after{background:var(--pcm-neon)}
.pcm-kpi.k3::after{background:var(--pcm-amber)}
.pcm-kpi.k4::after{background:var(--pcm-pink)}
.pcm-kpi-ico{font-size:22px;margin-bottom:8px}
.pcm-kpi-val{font-size:24px;font-weight:900;letter-spacing:-.5px}
.pcm-kpi-lbl{font-size:12px;color:var(--pcm-mut);margin-top:3px}

/* Two-column zone */
.pcm-cols{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:980px){.pcm-cols{grid-template-columns:1.15fr .85fr}}

.pcm-card-box{
  background:var(--pcm-card);border:1px solid var(--pcm-line);
  border-radius:var(--pcm-radius);padding:18px;margin-bottom:16px;
}
.pcm-card-box h3{
  font-size:15px;font-weight:800;margin-bottom:14px;
  display:flex;align-items:center;gap:8px;
}
.pcm-card-box h3 .bar{
  width:4px;height:16px;border-radius:2px;
  background:linear-gradient(var(--pcm-neon),var(--pcm-neon2));
}

/* Tree / genealogy */
.pcm-tree{display:flex;flex-direction:column;gap:10px}
.pcm-node{
  display:flex;align-items:center;gap:12px;
  background:var(--pcm-card2);border:1px solid var(--pcm-line);
  border-radius:12px;padding:12px 14px;
}
.pcm-node .av{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:14px;color:#03121f;
  background:linear-gradient(135deg,var(--pcm-neon),var(--pcm-green));
}
.pcm-node .meta{flex:1;min-width:0}
.pcm-node .nm{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcm-node .sub{font-size:12px;color:var(--pcm-mut)}
.pcm-node.lvl-1{margin-left:0}
.pcm-node.lvl-2{margin-left:18px}
.pcm-node.lvl-3{margin-left:36px}

/* Level bars */
.pcm-level{margin-bottom:10px}
.pcm-level-top{display:flex;justify-content:space-between;font-size:12px;margin-bottom:5px}
.pcm-level-track{height:10px;border-radius:6px;background:rgba(255,255,255,.06);overflow:hidden}
.pcm-level-fill{
  height:100%;border-radius:6px;
  background:linear-gradient(90deg,var(--pcm-neon),var(--pcm-neon2));
  box-shadow:0 0 12px rgba(0,229,255,.5);
}

/* Ledger rows */
.pcm-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 0;border-bottom:1px solid var(--pcm-line);font-size:13px;
}
.pcm-row:last-child{border-bottom:none}
.pcm-row .dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:8px}
.pcm-row .up{background:var(--pcm-green)}
.pcm-row .dn{background:var(--pcm-pink)}
.pcm-amt-up{color:var(--pcm-green);font-weight:800}
.pcm-amt-dn{color:var(--pcm-pink);font-weight:800}

/* Progress to Crown */
.pcm-crown{
  background:linear-gradient(135deg,rgba(255,179,0,.16),rgba(124,77,255,.12));
  border:1px solid rgba(255,179,0,.3);
  border-radius:var(--pcm-radius);padding:18px;text-align:center;margin-bottom:16px;
}
.pcm-crown .big{font-size:34px}
.pcm-crown .pct{font-size:26px;font-weight:900;color:var(--pcm-amber);margin:6px 0}

/* Quick actions */
.pcm-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(min-width:620px){.pcm-actions{grid-template-columns:repeat(6,1fr)}}
.pcm-act{
  background:var(--pcm-card2);border:1px solid var(--pcm-line);
  border-radius:12px;padding:14px 8px;text-align:center;
  text-decoration:none;color:var(--pcm-txt);font-size:12px;font-weight:600;
  transition:all .16s;
}
.pcm-act:hover{
  background:linear-gradient(135deg,var(--pcm-neon),var(--pcm-neon2));
  color:#02121f;transform:translateY(-2px);
}
.pcm-act .ico{font-size:20px;display:block;margin-bottom:6px}

/* Task list */
.pcm-task{
  background:var(--pcm-card2);border:1px solid var(--pcm-line);
  border-radius:12px;padding:14px;margin-bottom:10px;
}
.pcm-task h4{font-size:14px;margin-bottom:6px}
.pcm-task p{font-size:12px;color:var(--pcm-mut);margin-bottom:10px}
.pcm-badge{
  display:inline-block;font-size:11px;font-weight:700;
  padding:3px 10px;border-radius:20px;
}
.pcm-badge.pending{background:rgba(255,179,0,.18);color:var(--pcm-amber)}
.pcm-badge.approved{background:rgba(0,230,118,.18);color:var(--pcm-green)}
.pcm-badge.rejected{background:rgba(255,77,141,.18);color:var(--pcm-pink)}

.pcm-input,.pcm-file{
  width:100%;background:var(--pcm-bg2);border:1px solid var(--pcm-line);
  color:var(--pcm-txt);border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:10px;
}
.pcm-btn{
  background:linear-gradient(135deg,var(--pcm-green),var(--pcm-neon));
  color:#02121f;border:none;border-radius:10px;
  padding:10px 22px;font-weight:800;font-size:13px;cursor:pointer;
  transition:transform .15s;
}
.pcm-btn:hover{transform:translateY(-2px)}

.pcm-empty{text-align:center;color:var(--pcm-mut);padding:30px 10px;font-size:13px}

/* Login box */
.pcm-login{
  max-width:380px;margin:40px auto;
  background:var(--pcm-card);border:1px solid var(--pcm-line);
  border-radius:var(--pcm-radius);padding:28px;
}
.pcm-login h2{text-align:center;margin-bottom:18px;font-size:20px}

/* ===== PRO POLISH ===== */

/* Animated entrance — staggered */
.pcm-kpi,.pcm-card-box,.pcm-crown{
  animation:pcmIn .5s cubic-bezier(.2,.7,.3,1) both;
}
.pcm-kpi:nth-child(1){animation-delay:.04s}
.pcm-kpi:nth-child(2){animation-delay:.10s}
.pcm-kpi:nth-child(3){animation-delay:.16s}
.pcm-kpi:nth-child(4){animation-delay:.22s}
@keyframes pcmIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Neon scan line on crown card */
.pcm-crown{position:relative;overflow:hidden}
.pcm-crown::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,179,0,.18) 50%,transparent 70%);
  transform:translateX(-100%);animation:pcmScan 3.2s ease-in-out infinite;
}
@keyframes pcmScan{0%,60%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* KPI value count-up feel via shimmer */
.pcm-kpi-val{
  background:linear-gradient(90deg,var(--pcm-txt),var(--pcm-neon),var(--pcm-txt));
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:pcmShine 4s linear infinite;
}
@keyframes pcmShine{to{background-position:200% center}}

/* Connector lines on tree nodes (visual hierarchy) */
.pcm-node.lvl-2,.pcm-node.lvl-3{position:relative}
.pcm-node.lvl-2::before,.pcm-node.lvl-3::before{
  content:"";position:absolute;left:-12px;top:50%;
  width:12px;height:2px;background:linear-gradient(90deg,transparent,var(--pcm-neon));
}

/* Mobile sticky bottom nav */
.pcm-mnav{display:none}
@media(max-width:760px){
  .pcm-wrap{padding-bottom:78px}
  .pcm-mnav{
    display:grid;grid-template-columns:repeat(4,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:99999;
    background:rgba(13,20,36,.96);backdrop-filter:blur(12px);
    border-top:1px solid var(--pcm-line);padding:8px 6px;
  }
  .pcm-mnav a{
    text-align:center;color:var(--pcm-mut);text-decoration:none;
    font-size:10px;font-weight:700;padding:4px 0;
  }
  .pcm-mnav a .i{display:block;font-size:19px;margin-bottom:2px}
  .pcm-mnav a:active,.pcm-mnav a:hover{color:var(--pcm-neon)}
}

/* Tap targets bigger on touch */
@media(max-width:760px){
  .pcm-act{padding:16px 8px}
  .pcm-logout{padding:11px 22px}
  .pcm-kpi-val{font-size:21px}
}

/* Wide screens: more breathing room */
@media(min-width:1280px){
  .pcm-wrap{padding:28px max(28px,calc((100% - 1240px)/2))}
}

/* Reduced motion respect (accessibility) */
@media(prefers-reduced-motion:reduce){
  .pcm-kpi,.pcm-card-box,.pcm-crown,.pcm-kpi-val{animation:none}
  .pcm-crown::before{display:none}
}

/* Focus ring for keyboard users */
.pcm-act:focus-visible,.pcm-btn:focus-visible,.pcm-logout:focus-visible,
.pcm-input:focus-visible,.pcm-mnav a:focus-visible{
  outline:2px solid var(--pcm-neon);outline-offset:2px;
}

/* ===== AUTH PAGE — pro login/register/forgot/reset ===== */
.pcm-auth-page{
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px 16px 60px;position:relative;overflow:hidden;
  background:
    radial-gradient(900px 500px at 10% -10%,rgba(124,77,255,.20),transparent 60%),
    radial-gradient(800px 480px at 95% 8%,rgba(0,229,255,.16),transparent 60%),
    linear-gradient(135deg,#04140e 0%,#072018 45%,#0a3a28 100%);
}
.pcm-blob{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;opacity:.5;
  animation:pcmFloat 11s ease-in-out infinite}
.pcm-blob.b1{width:340px;height:340px;background:radial-gradient(circle,rgba(0,229,255,.5),transparent 70%);top:-90px;right:-70px}
.pcm-blob.b2{width:300px;height:300px;background:radial-gradient(circle,rgba(124,77,255,.45),transparent 70%);bottom:-80px;left:-70px;animation-delay:-4s}
@keyframes pcmFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(26px)}}

.pcm-auth-card{
  width:100%;max-width:420px;position:relative;z-index:2;
  background:rgba(17,26,46,.86);backdrop-filter:blur(16px);
  border:1px solid rgba(120,160,255,.18);border-radius:22px;
  padding:32px 26px;box-shadow:0 24px 70px rgba(0,0,0,.5);
  animation:pcmIn .5s cubic-bezier(.2,.7,.3,1) both;
}
.pcm-auth-logo{text-align:center;margin-bottom:20px}
.pcm-auth-logo-img{max-height:72px;max-width:84%;width:auto;height:auto;display:block;margin:0 auto;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))}
.pcm-auth-logo-fb{font-size:22px;font-weight:900;color:#e8f0ff}

.pcm-auth-tabs{display:flex;gap:8px;background:rgba(255,255,255,.05);
  border-radius:14px;padding:6px;margin-bottom:20px}
.pcm-tab{flex:1;border:none;background:transparent;color:#8da2c8;
  font-weight:800;font-size:14px;padding:11px;border-radius:10px;cursor:pointer;
  transition:all .18s;font-family:inherit}
.pcm-tab.on{background:linear-gradient(135deg,#00e5ff,#7c4dff);color:#02121f;
  box-shadow:0 6px 18px rgba(0,229,255,.35)}

.pcm-pane{display:none;flex-direction:column}
.pcm-pane.on{display:flex;animation:pcmIn .35s ease both}
.pcm-pane label{font-size:12px;font-weight:700;color:#8da2c8;margin:10px 0 5px}
.pcm-fld{width:100%;background:#0a1424;border:1px solid rgba(120,160,255,.2);
  color:#e8f0ff;border-radius:11px;padding:13px 14px;font-size:14px;
  font-family:inherit;transition:border-color .15s}
.pcm-fld:focus{outline:none;border-color:#00e5ff;box-shadow:0 0 0 3px rgba(0,229,255,.15)}
.pcm-pwd-wrap{position:relative}
.pcm-pwd-wrap .pcm-fld{padding-right:46px}
.pcm-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;font-size:17px;padding:6px;opacity:.7}
.pcm-eye:hover{opacity:1}
.pcm-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.pcm-remember{display:flex;align-items:center;gap:8px;color:#8da2c8;
  font-size:12px;margin:12px 0;font-weight:600}
.pcm-remember input{width:auto}

.pcm-auth-btn{margin-top:18px;background:linear-gradient(135deg,#00e676,#00e5ff);
  color:#02121f;border:none;border-radius:12px;padding:14px;
  font-weight:900;font-size:15px;cursor:pointer;font-family:inherit;
  transition:transform .15s,box-shadow .15s;box-shadow:0 8px 22px rgba(0,229,255,.3)}
.pcm-auth-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,229,255,.5)}
.pcm-auth-btn:active{transform:translateY(0)}

.pcm-auth-links{display:flex;justify-content:space-between;flex-wrap:wrap;
  gap:10px;margin-top:16px}
.pcm-auth-links a{color:#00e5ff;font-size:12.5px;font-weight:700;
  text-decoration:none;cursor:pointer}
.pcm-auth-links a:hover{text-decoration:underline}

.pcm-auth-h{color:#e8f0ff;font-size:18px;font-weight:900;margin-bottom:6px}
.pcm-auth-sub{color:#8da2c8;font-size:13px;margin-bottom:8px}
.pcm-auth-msg{border-radius:11px;padding:12px 14px;font-size:13px;
  font-weight:700;margin-bottom:16px}
.pcm-auth-msg.good{background:rgba(0,230,118,.14);color:#00e676;
  border:1px solid rgba(0,230,118,.35)}
.pcm-auth-msg.bad{background:rgba(255,77,141,.14);color:#ff4d8d;
  border:1px solid rgba(255,77,141,.35)}
.pcm-ref-note{background:rgba(0,229,255,.12);border:1px solid rgba(0,229,255,.3);
  color:#00e5ff;border-radius:10px;padding:10px 12px;font-size:12.5px;
  font-weight:700;margin-bottom:8px}
.pcm-strength{height:6px;border-radius:4px;background:rgba(255,255,255,.08);
  margin-top:8px;overflow:hidden}
.pcm-strength span{display:block;height:100%;width:0;border-radius:4px;
  transition:width .25s,background .25s}
.pcm-auth-foot{text-align:center;color:#5d6f8c;font-size:11px;margin-top:22px}

@media(max-width:480px){
  .pcm-auth-card{padding:26px 18px;border-radius:18px}
  .pcm-auth-page{padding:16px 12px 50px}
  .pcm-tab{font-size:13px;padding:10px}
  .pcm-auth-btn{padding:13px}
}
@media(prefers-reduced-motion:reduce){
  .pcm-blob{animation:none}.pcm-auth-card,.pcm-pane{animation:none}
}
.pcm-fld:focus-visible,.pcm-auth-btn:focus-visible,.pcm-tab:focus-visible{
  outline:2px solid #00e5ff;outline-offset:2px}

/* Task timer */
.pcm-timer{
  display:inline-block;background:rgba(255,179,0,.13);
  border:1px solid rgba(255,179,0,.35);color:#ffb300;
  border-radius:10px;padding:6px 12px;font-size:12px;font-weight:800;
  margin:6px 0 10px;animation:pcmPulse 2.4s ease-in-out infinite;
}
@keyframes pcmPulse{0%,100%{opacity:1}50%{opacity:.65}}
.pcm-timer.urgent{color:#ff4d8d;background:rgba(255,77,141,.13);border-color:rgba(255,77,141,.4)}
.pcm-timer.expired{color:#5d6f8c;background:rgba(255,255,255,.05);border-color:transparent;animation:none}

/* ===== Brand topbar logo ===== */
.pcm-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;color:var(--pcm-txt)}
.pcm-brand-img{height:36px;width:auto;max-width:160px;object-fit:contain;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.pcm-brand-name{font-weight:900;letter-spacing:.3px}
@media(max-width:560px){.pcm-brand-name{display:none}.pcm-brand-img{height:32px}}

/* ===== PureConnect theme — overrides for auth page ===== */
:root .pcm-auth-page{
  background:
    radial-gradient(900px 500px at 10% -10%,rgba(201,162,39,.20),transparent 60%),
    radial-gradient(800px 480px at 95% 8%,rgba(16,185,129,.18),transparent 60%),
    linear-gradient(135deg,#04140e 0%,#072018 45%,#0d3320 100%);
}
.pcm-blob.b1{background:radial-gradient(circle,rgba(201,162,39,.45),transparent 70%)}
.pcm-blob.b2{background:radial-gradient(circle,rgba(16,185,129,.40),transparent 70%)}

.pcm-tab.on{background:linear-gradient(135deg,#c9a227,#e8b830);color:#0a1f14;
  box-shadow:0 6px 18px rgba(201,162,39,.35)}
.pcm-auth-btn{background:linear-gradient(135deg,#10b981,#c9a227);color:#0a1f14;
  box-shadow:0 8px 22px rgba(201,162,39,.3)}
.pcm-auth-btn:hover{box-shadow:0 12px 30px rgba(201,162,39,.5)}
.pcm-auth-links a{color:#c9a227}
.pcm-auth-msg.good{background:rgba(16,185,129,.14);color:#10b981;border-color:rgba(16,185,129,.35)}
.pcm-ref-note{background:rgba(201,162,39,.12);border-color:rgba(201,162,39,.3);color:#c9a227}
.pcm-fld:focus{border-color:#c9a227;box-shadow:0 0 0 3px rgba(201,162,39,.18)}

/* Dashboard accents in PureConnect green/gold */
.pcm-logo{background:linear-gradient(135deg,#10b981,#c9a227)!important;
  box-shadow:0 0 22px rgba(201,162,39,.4)!important}
.pcm-rankchip{background:rgba(201,162,39,.12)!important;
  border-color:rgba(201,162,39,.35)!important;color:#c9a227!important}
.pcm-act:hover{background:linear-gradient(135deg,#10b981,#c9a227)!important;color:#0a1f14!important}
.pcm-btn{background:linear-gradient(135deg,#10b981,#c9a227)!important;color:#0a1f14!important}
.pcm-level-fill{background:linear-gradient(90deg,#10b981,#c9a227)!important;
  box-shadow:0 0 12px rgba(201,162,39,.45)!important}
.pcm-card-box h3 .bar{background:linear-gradient(#c9a227,#10b981)!important}
.pcm-crown{background:linear-gradient(135deg,rgba(201,162,39,.18),rgba(16,185,129,.10))!important;
  border-color:rgba(201,162,39,.35)!important}
.pcm-crown .pct{color:#c9a227!important}