:root{
  --gold: #C9A227;
  --gold-dark: #8B6F1F;
  --gold-light: #E8D385;
  --dark: #1E1B16;
  --dark-2: #2B2620;
  --cream: #FAF6EF;
  --white: #FFFFFF;
  --text: #2B2620;
  --muted: #7A7266;
  --danger: #B3413A;
  --success: #4C7A4E;
  --sidebar-w: 250px;
}

*{box-sizing:border-box;}
body{
  background: var(--cream);
  color: var(--text);
  font-family: 'Poppins', 'Segoe UI', sans-serif;
}

/* ---------- Sidebar ---------- */
.sidebar{
  position: fixed; top:0; left:0; bottom:0; width: var(--sidebar-w);
  background: linear-gradient(180deg, var(--dark) 0%, var(--dark-2) 100%);
  color: var(--gold-light);
  overflow-y:auto;
  z-index: 1030;
  transition: transform .25s ease;
}
.sidebar .brand{
  display:flex; align-items:center; gap:10px;
  padding: 22px 20px; border-bottom: 1px solid rgba(201,162,39,.25);
}
.sidebar .brand img{ height:38px; }
.sidebar .brand span{ font-weight:600; color: var(--gold); font-size:1.05rem; letter-spacing:.5px; }
.sidebar .nav-link{
  color: #d9d2c0; padding: 11px 20px; display:flex; align-items:center; gap:10px;
  font-size:.92rem; border-left:3px solid transparent;
}
.sidebar .nav-link:hover, .sidebar .nav-link.active{
  background: rgba(201,162,39,.12); color: var(--gold); border-left-color: var(--gold);
}
.sidebar .nav-section{ padding: 14px 20px 4px; font-size:.7rem; text-transform:uppercase; letter-spacing:1px; color:#8a8272; }

.content-wrap{ margin-left: var(--sidebar-w); min-height:100vh; }
.topbar{
  background: var(--white); border-bottom: 1px solid #ece5d6;
  padding: 14px 24px; display:flex; align-items:center; justify-content:space-between;
  position: sticky; top:0; z-index: 1020;
}
.topbar .user-chip{ display:flex; align-items:center; gap:10px; }
.topbar .avatar{
  width:36px;height:36px;border-radius:50%; background: var(--gold);
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600;
}
.page-body{ padding: 24px; }

@media (max-width: 991px){
  .sidebar{ transform: translateX(-100%); }
  .sidebar.show{ transform: translateX(0); }
  .content-wrap{ margin-left:0; }
}

/* ---------- Cards ---------- */
.stat-card{
  background: var(--white); border-radius: 14px; padding: 20px;
  border: 1px solid #eee3c8; box-shadow: 0 2px 10px rgba(30,27,22,.04);
  height:100%;
}
.stat-card .icon{
  width:46px;height:46px;border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; color:#fff; margin-bottom:12px;
}
.stat-card .label{ color: var(--muted); font-size:.82rem; text-transform:uppercase; letter-spacing:.5px; }
.stat-card .value{ font-size:1.5rem; font-weight:700; color: var(--dark); }
.bg-gold{ background: var(--gold); }
.bg-dark{ background: var(--dark); }
.bg-danger-soft{ background: var(--danger); }
.bg-success-soft{ background: var(--success); }

.card-panel{
  background: var(--white); border-radius: 14px; border: 1px solid #eee3c8;
  box-shadow: 0 2px 10px rgba(30,27,22,.04); padding: 20px;
}

.table thead th{
  background: var(--dark); color: var(--gold-light); font-size:.8rem;
  text-transform: uppercase; letter-spacing:.4px; border:none;
}
.table tbody tr:hover{ background: #FBF3DC33; }

.btn-gold{ background: var(--gold); border-color: var(--gold); color:#fff; }
.btn-gold:hover{ background: var(--gold-dark); border-color: var(--gold-dark); color:#fff; }
.btn-dark-outline{ border-color: var(--dark); color: var(--dark); }

.badge-channel{ padding:5px 10px; border-radius:20px; font-size:.72rem; font-weight:600; color:#fff; }
.badge-dark{ background: var(--dark); }
.badge-gold{ background: var(--gold); }
.badge-orange{ background:#E9622A; }
.badge-secondary{ background:#7A7266; }

.login-page{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at top, #2B2620 0%, #1E1B16 70%);
}
.login-card{
  background: var(--white); border-radius:18px; padding: 40px 36px; width: 380px;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.login-card img{ height:56px; display:block; margin: 0 auto 16px; }
.login-card h4{ text-align:center; color: var(--dark); font-weight:700; margin-bottom:2px; }
.login-card p.sub{ text-align:center; color: var(--muted); font-size:.85rem; margin-bottom:24px; }

.form-label{ font-weight:500; font-size:.88rem; color: var(--dark); }
.required::after{ content:' *'; color: var(--danger); }