:root{
  --primary:#6d28d9;
  --secondary:#db2777;
  --dark:#111827;
  --surface:rgba(255,255,255,.92);
}
*{box-sizing:border-box}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 10% 10%,rgba(109,40,217,.20),transparent 32%),
    radial-gradient(circle at 90% 20%,rgba(219,39,119,.18),transparent 30%),
    linear-gradient(135deg,#f8fafc,#eef2ff);
  color:#172033;
}
.app-navbar{
  background:linear-gradient(110deg,#111827,#4c1d95 55%,#9d174d);
  box-shadow:0 10px 35px rgba(17,24,39,.22);
}
.brand-icon{
  display:inline-grid;place-items:center;width:38px;height:38px;border-radius:14px;
  background:linear-gradient(135deg,#f59e0b,#ec4899);margin-right:8px;
}
.nav-user{
  color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);
  padding:.4rem .8rem;border-radius:999px;font-size:.85rem;
}
.hero-card,.glass-card{
  border:1px solid rgba(255,255,255,.8);
  border-radius:24px;background:var(--surface);
  box-shadow:0 20px 60px rgba(31,41,55,.12);
}
.hero-card{padding:clamp(1.2rem,3vw,2.3rem);overflow:hidden;position:relative}
.hero-card:after{
  content:"";position:absolute;width:260px;height:260px;border-radius:50%;
  right:-100px;top:-120px;background:linear-gradient(135deg,rgba(109,40,217,.2),rgba(236,72,153,.2));
}
.metric{
  border-radius:20px;padding:1.2rem;background:#fff;
  box-shadow:0 12px 30px rgba(31,41,55,.08);height:100%;
}
.metric .icon{
  width:48px;height:48px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(135deg,#ede9fe,#fce7f3);color:#7e22ce;font-size:1.35rem;
}
.btn-premium{
  border:0;color:#fff;border-radius:14px;padding:.72rem 1.1rem;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  box-shadow:0 10px 24px rgba(109,40,217,.25);
}
.btn-premium:hover{color:#fff;transform:translateY(-1px)}
.form-control,.form-select{
  border-radius:14px;border-color:#dbe2ea;padding:.72rem .9rem;
}
.form-control:focus,.form-select:focus{border-color:#8b5cf6;box-shadow:0 0 0 .2rem rgba(139,92,246,.14)}
.table-card{border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 16px 45px rgba(31,41,55,.09)}
.table thead th{background:#f4f1ff;color:#4c1d95;border:0;white-space:nowrap}
.badge-soft{border-radius:999px;padding:.45rem .7rem}
.login-shell{max-width:1050px;margin:1rem auto}
.login-brand{
  min-height:580px;border-radius:28px;padding:2.2rem;color:#fff;
  background:linear-gradient(145deg,#111827,#4c1d95 55%,#be185d);
  box-shadow:0 30px 80px rgba(17,24,39,.25);
}
.login-panel{
  min-height:580px;border-radius:28px;background:rgba(255,255,255,.95);
  padding:clamp(1.4rem,4vw,3rem);box-shadow:0 30px 80px rgba(17,24,39,.14);
}
.login-role-card{
  display:block;text-decoration:none;color:inherit;border:1px solid #e5e7eb;border-radius:20px;
  padding:1.2rem;background:#fff;transition:.2s;
}
.login-role-card:hover{transform:translateY(-3px);border-color:#a78bfa;box-shadow:0 15px 35px rgba(76,29,149,.13)}
.schedule-card{border-left:5px solid #7c3aed}
@media(max-width:991px){
  .login-brand{min-height:auto}
  .login-panel{min-height:auto}
}
@media(max-width:575px){
  main.container{padding-left:14px;padding-right:14px}
  .hero-card,.glass-card{border-radius:19px}
  .table-responsive{font-size:.86rem}
  .navbar-brand{font-size:.95rem}
}

.member-card{
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.member-card:hover{
  transform:translateY(-2px);
  border-color:#c4b5fd!important;
  box-shadow:0 12px 28px rgba(76,29,149,.10);
}
.border-dashed{
  border-style:dashed!important;
}

.team-info-trigger{
  border-radius:999px;
  font-weight:700;
  padding:.38rem .72rem;
  border:1px solid transparent;
  transition:transform .18s ease,box-shadow .18s ease;
}
.team-info-trigger:hover{
  transform:translateY(-1px);
}
.team-info-singer{
  color:#6d28d9;
  background:linear-gradient(135deg,#ede9fe,#fce7f3);
  border-color:#ddd6fe;
}
.team-info-singer:hover{
  color:#581c87;
  box-shadow:0 8px 20px rgba(109,40,217,.16);
}
.team-info-music{
  color:#047857;
  background:linear-gradient(135deg,#d1fae5,#ecfdf5);
  border-color:#a7f3d0;
}
.team-info-music:hover{
  color:#065f46;
  box-shadow:0 8px 20px rgba(5,150,105,.16);
}
.team-alert-popup{
  border-radius:24px!important;
  padding:1.1rem!important;
}
.team-alert-html{
  margin:0!important;
  padding:.3rem!important;
}
.team-alert-header{
  display:flex;
  align-items:center;
  gap:14px;
  text-align:left;
  padding:8px 4px 16px;
  border-bottom:1px solid #e5e7eb;
}
.team-alert-icon{
  width:48px;
  height:48px;
  border-radius:16px;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:1.25rem;
  background:linear-gradient(135deg,#6d28d9,#db2777);
  flex:0 0 auto;
}
.team-alert-label{
  color:#64748b;
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.team-alert-name{
  color:#111827;
  font-size:1.05rem;
  font-weight:800;
}
.team-alert-list{
  max-height:360px;
  overflow-y:auto;
  padding:12px 2px 4px;
}
.team-alert-member{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:11px;
  margin-bottom:8px;
  border:1px solid #e5e7eb;
  border-radius:16px;
  background:#fff;
  text-align:left;
}
.team-alert-number{
  width:30px;
  height:30px;
  border-radius:10px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  color:#6d28d9;
  background:#f3e8ff;
  font-weight:800;
  font-size:.85rem;
}
.team-alert-member-content{
  min-width:0;
  flex:1;
}
.team-alert-member-name{
  color:#111827;
  font-weight:800;
  line-height:1.25;
  margin-bottom:5px;
}
.team-alert-member-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.team-alert-gender,
.team-alert-specialty{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:3px 8px;
  font-size:.74rem;
  font-weight:700;
}
.team-alert-gender.male{
  color:#1d4ed8;
  background:#dbeafe;
}
.team-alert-gender.female{
  color:#be185d;
  background:#fce7f3;
}
.team-alert-specialty{
  color:#475569;
  background:#f1f5f9;
}
.team-alert-empty{
  padding:30px 10px;
  text-align:center;
  color:#64748b;
}
.team-alert-empty i{
  display:block;
  font-size:2rem;
  margin-bottom:8px;
  color:#94a3b8;
}
.team-alert-confirm{
  border-radius:12px!important;
  padding:.65rem 1.4rem!important;
}
@media(max-width:575px){
  .team-info-trigger{
    width:100%;
    justify-content:center;
    text-align:center;
  }
  .team-alert-popup{
    width:calc(100% - 22px)!important;
    margin:11px!important;
  }
  .team-alert-list{
    max-height:55vh;
  }
  .team-alert-member{
    padding:10px;
  }
}


/* Badge Lihat Anggota - premium hijau */
.team-member-badge{
  appearance:none;
  border:1px solid rgba(255,255,255,.38);
  outline:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:32px;
  padding:6px 12px;
  border-radius:999px;
  color:#fff!important;
  background:
    linear-gradient(135deg,#16a34a 0%,#059669 48%,#047857 100%);
  box-shadow:
    0 8px 18px rgba(5,150,105,.28),
    inset 0 1px 0 rgba(255,255,255,.24);
  font-size:.76rem;
  font-weight:800;
  line-height:1;
  letter-spacing:.01em;
  cursor:pointer;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.team-member-badge::before{
  content:"";
  position:absolute;
  top:-60%;
  left:-45%;
  width:36%;
  height:220%;
  transform:rotate(24deg);
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.34),
    transparent
  );
  transition:left .45s ease;
}

.team-member-badge:hover{
  color:#fff!important;
  transform:translateY(-2px);
  filter:brightness(1.04);
  box-shadow:
    0 12px 24px rgba(5,150,105,.34),
    inset 0 1px 0 rgba(255,255,255,.3);
}

.team-member-badge:hover::before{
  left:125%;
}

.team-member-badge:active{
  transform:translateY(0) scale(.98);
}

.team-member-badge:focus-visible{
  box-shadow:
    0 0 0 4px rgba(16,185,129,.20),
    0 10px 22px rgba(5,150,105,.30);
}

.team-member-badge i{
  font-size:.86rem;
}

.team-member-badge span{
  white-space:nowrap;
}

@media(max-width:575px){
  .team-member-badge{
    width:auto;
    min-height:30px;
    padding:6px 10px;
    font-size:.72rem;
  }
}