/* PND webclient rebuild v2 — mobile-first polish + Nginx-safe visual layer */
:root{
  --pnd-purple:#2d195f;
  --pnd-purple-2:#4a2595;
  --pnd-purple-3:#17102f;
  --pnd-pink:#ec1b72;
  --pnd-pink-2:#ff5aa4;
  --pnd-blue:#16a4ff;
  --pnd-bg:#f7f4fc;
  --pnd-panel:#ffffff;
  --pnd-ink:#101827;
  --pnd-muted:#667085;
  --pnd-line:rgba(47,27,104,.10);
}
html{background:var(--pnd-bg);}
body.app-bg{
  min-height:100vh;
  background:
    radial-gradient(circle at 0% 0%, rgba(236,27,114,.17), transparent 32%),
    radial-gradient(circle at 100% 8%, rgba(74,37,149,.16), transparent 34%),
    linear-gradient(180deg,#fbf8ff 0%,#f1f5fb 52%,#ffffff 100%) !important;
  color:var(--pnd-ink)!important;
}
.brand-wordmark{letter-spacing:-.03em;font-weight:950;}
.brand-wordmark-main{color:#fff!important;}
.brand-wordmark-sub{color:var(--pnd-pink-2)!important;}
.brand-badge{
  width:42px!important;height:42px!important;border-radius:15px!important;
  background:linear-gradient(135deg,var(--pnd-pink),#7a39f0)!important;
  color:#fff!important;box-shadow:0 16px 32px rgba(236,27,114,.28)!important;
}
.app-topbar{
  background:linear-gradient(135deg,var(--pnd-purple-3) 0%,var(--pnd-purple) 48%,#3d1f86 100%)!important;
  color:#fff!important;border:0!important;
  box-shadow:0 14px 36px rgba(20,11,47,.30)!important;
}
.app-topbar .container-fluid{min-height:66px;}
.app-topbar .text-muted,.app-topbar .small{color:rgba(255,255,255,.72)!important;}
.app-topbar .btn-outline-secondary{color:#fff!important;border-color:rgba(255,255,255,.22)!important;background:rgba(255,255,255,.07)!important;}
.app-main>.container-fluid{max-width:1160px;}
.app-bottomnav{
  height:74px!important;background:rgba(255,255,255,.94)!important;
  border-top:1px solid rgba(47,27,104,.08)!important;
  box-shadow:0 -16px 42px rgba(16,24,39,.14)!important;
}
.app-bottomnav .navbtn{border-radius:20px!important;margin:8px 4px!important;color:#687083!important;font-weight:800!important;}
.app-bottomnav .navbtn i{font-size:20px!important;}
.app-bottomnav .navbtn span{font-size:10.5px!important;}
.app-bottomnav .navbtn.active{
  color:#fff!important;background:linear-gradient(135deg,var(--pnd-pink),#743df0)!important;
  box-shadow:0 12px 26px rgba(236,27,114,.26)!important;
}
.login-screen{
  min-height:100vh!important;
  align-items:center!important;
  background:
    radial-gradient(circle at 18% 14%,rgba(236,27,114,.36),transparent 34%),
    radial-gradient(circle at 86% 4%,rgba(22,164,255,.20),transparent 28%),
    linear-gradient(145deg,#100727 0%,#2d195f 52%,#090612 100%)!important;
}
.login-shell{max-width:500px!important;}
.login-card{
  border:1px solid rgba(255,255,255,.16)!important;border-radius:32px!important;
  background:rgba(255,255,255,.97)!important;box-shadow:0 34px 110px rgba(0,0,0,.42)!important;
  overflow:hidden!important;
}
.login-card:before{content:"";display:block;height:7px;background:linear-gradient(90deg,var(--pnd-pink),#7a39f0,var(--pnd-blue));}
.login-headline{font-size:clamp(32px,8vw,46px)!important;font-weight:950!important;letter-spacing:-.055em;color:var(--pnd-purple)!important;}
.login-copy{color:var(--pnd-muted)!important;font-weight:600;}
.login-input{height:54px;border-radius:18px!important;background:#f8fafc!important;border:1px solid rgba(47,27,104,.14)!important;}
.login-input:focus{border-color:var(--pnd-pink)!important;box-shadow:0 0 0 .25rem rgba(236,27,114,.14)!important;}
.login-password-toggle{border-radius:0 18px 18px 0!important;border-color:rgba(47,27,104,.14)!important;}
.login-btn{height:56px;border-radius:18px!important;font-weight:950!important;background:linear-gradient(135deg,var(--pnd-pink),#733df0)!important;border:0!important;}
.login-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
.login-stat{border-radius:20px;background:#f7f2ff;border:1px solid rgba(47,27,104,.08);padding:12px 8px;text-align:center;}
.login-stat-value{display:block;color:var(--pnd-purple);font-size:1.05rem;}
.login-stat-label{display:block;color:var(--pnd-muted);font-size:.74rem;font-weight:800;}
.card,.content-card,.list-card,.kpi,.empty-state{
  background:rgba(255,255,255,.88)!important;border:1px solid var(--pnd-line)!important;
  border-radius:24px!important;box-shadow:0 18px 44px rgba(31,18,70,.08)!important;
}
.btn-primary{background:linear-gradient(135deg,var(--pnd-pink),#743df0)!important;border:0!important;font-weight:850!important;box-shadow:0 12px 28px rgba(236,27,114,.22)!important;}
.btn-outline-primary{border-color:rgba(236,27,114,.42)!important;color:var(--pnd-pink)!important;font-weight:800!important;}
.form-control,.form-select{border-radius:16px!important;border-color:rgba(47,27,104,.14)!important;}
.hero,.home-hero-card{border-radius:26px!important;box-shadow:0 22px 58px rgba(31,18,70,.12)!important;}
.inline-player,.ratio.bg-black,.player-card,.web-player-card{
  background:#000!important;border-radius:26px!important;overflow:hidden!important;
  box-shadow:0 26px 76px rgba(0,0,0,.35)!important;border:1px solid rgba(255,255,255,.08)!important;
}
.inline-player iframe,.ratio iframe,video{background:#000!important;}
@media(max-width:640px){
  html{font-size:16.5px;}
  .app-topbar .container-fluid{min-height:60px;padding-left:12px!important;padding-right:12px!important;}
  .app-main>.container-fluid{padding-left:8px!important;padding-right:8px!important;padding-top:10px!important;}
  .app-bottomnav{height:72px!important;padding-bottom:max(7px,env(safe-area-inset-bottom))!important;}
  .app-bottomnav .navbtn{margin:7px 2px!important;border-radius:17px!important;}
  .login-screen{align-items:flex-start!important;padding:18px 10px!important;}
  .login-card{border-radius:28px!important;}
  .login-card .card-body{padding:24px 18px!important;}
  .login-brand-row{align-items:flex-start;}
  .login-stats{grid-template-columns:1fr 1fr 1fr;gap:7px;}
  .inline-player,.ratio.bg-black,.player-card,.web-player-card{
    border-radius:0!important;margin-left:-8px!important;margin-right:-8px!important;width:calc(100% + 16px)!important;
    border-left:0!important;border-right:0!important;
  }
  .card,.content-card,.list-card,.kpi,.empty-state{border-radius:20px!important;}
}