*{font-family:'DM Sans',sans-serif;margin:0;padding:0;box-sizing:border-box}
body{background:#0a0e1a;color:#e5e7eb;overflow-x:hidden}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:#0a0e1a}
::-webkit-scrollbar-thumb{background:rgba(16,185,129,.55);border-radius:6px}::-webkit-scrollbar-thumb:hover{background:rgba(16,185,129,.8)}

.sidebar{width:260px;height:100vh;min-height:0;background:rgba(10,14,30,.95);border-right:1px solid rgba(255,255,255,.06);position:fixed;left:0;top:0;z-index:1000;transition:transform .3s ease;display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(16,185,129,.55) rgba(255,255,255,.03)}
.sidebar.collapsed{transform:translateX(-260px)}
.sidebar-header{padding:20px 16px 12px;display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(255,255,255,.06)}
.sidebar-logo{width:36px;height:36px;border-radius:10px;object-fit:cover}
.sidebar-logo-placeholder{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#10b981,#059669);display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;flex-shrink:0}
.sidebar-brand{color:#fff;font-weight:700;font-size:15px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user-info{padding:14px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.06)}
.su-avatar{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#3b82f6,#2563eb);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;flex-shrink:0}
.sidebar-nav{flex:1;padding:12px 8px}
.nav-section{color:#4b5563;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;padding:16px 12px 6px}
.nav-link{display:flex;align-items:center;gap:12px;padding:10px 12px;color:#9ca3af;text-decoration:none;border-radius:10px;font-size:13px;font-weight:500;transition:all .2s;margin-bottom:2px}
.nav-link:hover{background:rgba(255,255,255,.04);color:#fff}
.nav-link.active{background:rgba(16,185,129,.1);color:#10b981;font-weight:600}
.nav-link i{width:20px;text-align:center;font-size:14px}
.sidebar-footer{padding:12px 8px;border-top:1px solid rgba(255,255,255,.06)}
a.nav-link.text-danger{color:#ef4444}

.main-content{margin-left:260px;min-height:100vh;transition:margin-left .3s}
.topbar{height:60px;background:rgba(10,14,30,.8);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:100}
.topbar-date{color:#6b7280;font-size:13px;font-weight:500}
.sidebar-toggle{background:none;border:none;color:#9ca3af;font-size:18px;cursor:pointer;padding:4px 8px}
.sidebar-toggle:hover{color:#fff}

.stat-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:20px;display:flex;align-items:center;gap:16px;transition:all .3s}
.stat-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.3);border-color:rgba(255,255,255,.1)}
.stat-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;flex-shrink:0}
.stat-info{flex:1;min-width:0}
.stat-info small{color:#6b7280;font-size:12px;font-weight:500}
.stat-info h3,.stat-info h4{color:#fff;margin:0;font-weight:900}

.content-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:16px;overflow:hidden}
.content-card-header{padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.content-card-body{padding:20px}

.table{--bs-table-bg:transparent;--bs-table-color:#e5e7eb;--bs-table-striped-bg:rgba(255,255,255,.025);--bs-table-striped-color:#e5e7eb;--bs-table-active-bg:rgba(255,255,255,.06);--bs-table-active-color:#fff;--bs-table-hover-bg:rgba(255,255,255,.035);--bs-table-hover-color:#fff;--bs-table-border-color:rgba(255,255,255,.08);color:#e5e7eb;background-color:transparent}
.table>:not(caption)>*>*{background-color:transparent;color:inherit;box-shadow:none}
.table thead th{color:#6b7280;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border-bottom-color:rgba(255,255,255,.08);padding:12px 16px}
.table td{padding:12px 16px;vertical-align:middle;border-bottom-color:rgba(255,255,255,.04);font-size:13px}
.table tbody tr:hover{background:rgba(255,255,255,.03)}

.form-control,.form-select{background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.08)!important;color:#e5e7eb!important;border-radius:10px!important;padding:10px 14px!important;font-size:13px!important;transition:all .2s!important}
.form-control:focus,.form-select:focus{background:rgba(255,255,255,.07)!important;border-color:#10b981!important;box-shadow:0 0 0 3px rgba(16,185,129,.15)!important;color:#fff!important}
.form-control::placeholder{color:#4b5563!important}
.form-control[readonly]{opacity:.6;cursor:not-allowed}
.form-label{color:#9ca3af;font-size:12px;font-weight:600;margin-bottom:4px}
.form-check-input{background-color:rgba(255,255,255,.04);border-color:rgba(255,255,255,.15)}
.form-check-input:checked{background-color:#10b981;border-color:#10b981}
select option{background:#1a1a2e;color:#e5e7eb}

.btn{font-size:13px;font-weight:600;border-radius:10px;padding:8px 16px;transition:all .2s}
.btn-success{background:linear-gradient(135deg,#10b981,#059669);border:none;box-shadow:0 2px 8px rgba(16,185,129,.3)}
.btn-success:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(16,185,129,.4);color:#fff}
.btn-warning{background:linear-gradient(135deg,#f59e0b,#d97706);border:none;color:#000}
.btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626);border:none}
.btn-outline-light{border-color:rgba(255,255,255,.15);color:#9ca3af}
.btn-outline-light:hover{background:rgba(255,255,255,.05);color:#fff;border-color:rgba(255,255,255,.25)}
.btn-sm{padding:5px 10px;font-size:12px;border-radius:8px}
.badge{font-size:11px;font-weight:600;padding:5px 10px;border-radius:8px}
.alert{border-radius:12px;font-size:13px;border:1px solid rgba(255,255,255,.06)}
.alert-success{background:rgba(16,185,129,.1);color:#34d399;border-color:rgba(16,185,129,.2)}
.alert-danger,.alert-error{background:rgba(239,68,68,.1);color:#f87171;border-color:rgba(239,68,68,.2)}
.alert-warning{background:rgba(245,158,11,.1);color:#fbbf24;border-color:rgba(245,158,11,.2)}
.btn-close{filter:invert(1) grayscale(100%) brightness(200%)}

@media (max-width:900px){
  .sidebar{transform:translateX(-260px)}
  .sidebar.collapsed{transform:translateX(0)}
  .main-content{margin-left:0}
}


/* ===== Responsive sidebar / protected admin area ===== */
.sidebar{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.main-content{width:calc(100% - 260px);min-width:0}
.sidebar.collapsed + .main-content{margin-left:0;width:100%}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.58);backdrop-filter:blur(2px);z-index:999}
.sidebar-overlay.show{display:block}
.page-content,.main-content>.p-4{min-width:0}
.table-responsive{max-width:100%;overflow-x:auto}

@media (max-width: 1100px){
  .sidebar{width:245px}
  .main-content{margin-left:245px;width:calc(100% - 245px)}
  .sidebar.collapsed{transform:translateX(-245px)}
}

@media (max-width: 900px){
  .sidebar{width:270px;transform:translateX(-270px);box-shadow:12px 0 35px rgba(0,0,0,.45)}
  .sidebar.collapsed{transform:translateX(0)}
  .main-content,.sidebar.collapsed + .main-content{margin-left:0;width:100%;}
  .topbar{padding:0 14px;position:sticky;top:0}
  .topbar-date{font-size:11px}
  .main-content>.p-4{padding:14px!important}
  .content-card-body{padding:14px}
}

@media (max-width: 576px){
  .sidebar{width:86vw;max-width:300px}
  .sidebar.collapsed{transform:translateX(0)}
  .topbar{height:56px}
  .topbar-date{display:none}
  .btn{padding:8px 12px}
  .content-card{border-radius:12px}
  .content-card-header{padding:12px 14px}
  .form-control,.form-select{font-size:14px!important}
}

.admin-lock-card{max-width:520px;margin:6vh auto 0}