:root{
  --bg: #212121;
  /* Dark gray surfaces (no glow/gradient) */
  --panel: #2a2a2a;
  --panel2: #262626;
  --border: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --accent: #8b5cf6; /* violet */
  --accent2:#a78bfa;
  --danger:#fb7185;
  --ok:#34d399;
  --shadow-soft: 0 12px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  padding:28px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: var(--bg);
  color: var(--text);
}

a{color:var(--accent2); text-decoration:none}
a:hover{color:var(--text)}

.layout{
  display:flex;
  gap:16px;
  min-height: calc(100vh - 56px);
}

.sidebar{
  width: 260px;
  flex: 0 0 260px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--panel2);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.sidebar-head{
  padding:16px 14px;
  display:flex;
  gap:12px;
  align-items:center;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sidebar-logo{
  width:38px;
  height:38px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
}
.sidebar-title{font-weight:700; letter-spacing:.2px}
.sidebar-subtitle{color:var(--muted); font-size:12px}

.sidebar-section{padding:12px 10px}
.sidebar-label{
  padding: 0 8px 8px;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .14em;
}

.side-nav{display:flex; flex-direction:column; gap:6px}
.side-nav a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius: 14px;
  border:1px solid transparent;
  color: var(--text);
  background: transparent;
}
.side-nav a:hover{background: rgba(255,255,255,.04)}
.side-nav a.active{
  border-color: rgba(139,92,246,.45);
  background: rgba(139,92,246,.12);
}
.side-nav a.disabled{
  opacity:.65;
  cursor: default;
  pointer-events:none;
}
.pill{
  margin-left:auto;
  font-size: 11px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  color: var(--muted);
  background: rgba(255,255,255,.03);
}

/* Users dropdown in sidebar */
.nav-dropdown{position:relative}
.nav-dropdown-toggle{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius: 14px;
  border:1px solid transparent;
  color: var(--text);
  background: transparent;
  text-decoration: none;
  width:100%;
  cursor: pointer;
}
.nav-dropdown-toggle:hover{background: rgba(255,255,255,.04)}
.nav-dropdown-toggle.active{
  border-color: rgba(139,92,246,.45);
  background: rgba(139,92,246,.12);
}
.nav-dropdown-chevron{
  margin-left: auto;
  font-size: 10px;
  opacity: .8;
  transition: transform .2s ease;
}
.nav-dropdown.open .nav-dropdown-chevron{transform: rotate(180deg)}
.nav-dropdown-menu{
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0 4px 28px;
  margin-top: 2px;
}
.nav-dropdown.open .nav-dropdown-menu{display: flex}
.nav-dropdown-menu a{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  color: var(--muted);
  background: transparent;
  font-size: 14px;
}
.nav-dropdown-menu a:hover{background: rgba(255,255,255,.04); color: var(--text)}
.nav-dropdown-menu a.active{
  border-color: rgba(139,92,246,.35);
  background: rgba(139,92,246,.1);
  color: var(--accent2);
}

.sidebar-footer{
  margin-top:auto;
  padding: 12px 10px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.side-logout{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius: 14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
}
.side-logout:hover{background: rgba(255,255,255,.06)}

.content{
  flex: 1 1 auto;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--panel2);
  padding: 16px;
  overflow-y: auto;
  max-height: calc(100vh - 56px);
}
.content-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding: 6px 4px 14px;
}
.h1{
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .2px;
}

a{color:var(--accent2); text-decoration:none}
a:hover{color:var(--text)}

/* Legacy header bar (no longer used on most pages, kept for safety) */
.top{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand .title{margin:0; font-size:20px; letter-spacing:.2px}
.muted{color:var(--muted)}

.nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.nav a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:12px;
  background: rgba(255,255,255,.04);
}
.nav a.active{
  border-color: rgba(139,92,246,.45);
  background: rgba(139,92,246,.12);
  color: var(--text);
}

.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
  margin: 10px 0 18px;
}

/* Status filter tabs (Custom Downloads) */
.status-tabs{
  display:inline-flex;
  gap:4px;
  padding:4px;
  border-radius:999px;
  border:1px solid var(--border);
  background: var(--panel);
}
.status-tab{
  padding:6px 14px;
  border-radius:999px;
  font-size:13px;
  color: var(--muted);
  text-decoration:none;
  border:1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.status-tab:hover{
  background: rgba(255,255,255,.04);
  color: var(--text);
}
.status-tab-active{
  background: rgba(139,92,246,.18);
  border-color: rgba(139,92,246,.45);
  color: var(--accent2);
}

.card{
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px 14px 12px;
  background: var(--panel);
}

.service-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.service-meta{min-width:0}
.service-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:18px;
  font-weight:600;
}
.service-icon-img{
  width:20px;
  height:20px;
  object-fit:contain;
  flex:0 0 20px;
  border-radius:4px;
}
.service-desc{margin-top:8px}
.service-limit{margin-top:8px}
.service-open-btn{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius:12px;
  border:1px solid rgba(139,92,246,.45);
  background: rgba(139,92,246,.14);
  color: var(--text);
  text-decoration:none;
}
.service-open-btn:hover{
  background: rgba(139,92,246,.22);
  color: var(--text);
}

h3{margin:18px 0 10px; font-size:16px}

table{
  width:100%;
  border-collapse: collapse;
  overflow:hidden;
  border-radius:16px;
  border:1px solid var(--border);
  background: var(--panel2);
}
th,td{
  text-align:left;
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:10px;
  font-size:14px;
  vertical-align: top;
}
th{color:var(--muted); font-weight:600}
tr:hover td{background: rgba(255,255,255,.04)}

/* Compact action buttons in tables */
.cell-actions{
  white-space: nowrap;
}
.actions-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.actions-row form{
  display:inline-block;
}
.actions-row .btn-action{
  padding:4px 8px;
  font-size:11px;
  border-radius:8px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.05);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.actions-row .btn-action-primary{
  background: var(--ok);
  border-color: var(--ok);
  color:#0b1120;
}
.actions-row .btn-action-premium{
  background: #f97316;
  border-color: #fb923c;
  color:#0b1120;
}
.actions-row .btn-action-danger{
  background: var(--danger);
  border-color: var(--danger);
  color:#fff;
}
.actions-row .btn-action-soft{
  background: var(--panel2);
}
.actions-row .btn-action:hover{
  background: rgba(255,255,255,.09);
}
.actions-row .btn-action-danger:hover{
  background: #fb5a72;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
}
.badge.ok{border-color: rgba(52,211,153,.35); color: rgba(52,211,153,.95)}
.badge.err{border-color: rgba(251,113,133,.35); color: rgba(251,113,133,.95)}
.badge-unregistered{
  border-color: rgba(251,191,36,.4);
  background: rgba(251,191,36,.2);
  color: #fbbf24;
  cursor: pointer;
}
.badge-unregistered:hover{
  background: rgba(251,191,36,.3);
}

.modal-register{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.modal-register.open{
  display:flex;
}
.modal-register .modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.6);
}
.modal-register .modal-dialog{
  position:relative;
  width:100%;
  max-width:380px;
  border-radius:16px;
  background: var(--panel);
  border:1px solid var(--border);
  box-shadow: var(--shadow-soft);
  padding:16px 18px 14px;
  z-index:1;
}
.modal-register .modal-title{
  font-size:16px;
  font-weight:600;
  margin-bottom:6px;
}
.modal-register .modal-text{
  font-size:13px;
  color: var(--muted);
}
.modal-register .modal-text strong{
  color: var(--text);
}
.modal-register .modal-actions{
  margin-top:16px;
  display:flex;
  justify-content:flex-end;
  gap:8px;
}
.modal-register .btn-modal-primary,
.modal-register .btn-modal-secondary{
  padding:8px 12px;
  font-size:13px;
  border-radius:10px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.05);
  color: var(--text);
  cursor:pointer;
}
.modal-register .btn-modal-primary{
  background: var(--ok);
  border-color: var(--ok);
  color:#0b1120;
}
.modal-register .btn-modal-secondary:hover{
  background: rgba(255,255,255,.09);
}

.modal-balance{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.modal-balance.open{
  display:flex;
}
.modal-balance .modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.6);
}
.modal-balance .modal-dialog{
  position:relative;
  width:100%;
  max-width:420px;
  border-radius:16px;
  background: var(--panel);
  border:1px solid var(--border);
  box-shadow: var(--shadow-soft);
  padding:18px 20px 16px;
  z-index:1;
}
.modal-balance .modal-title{
  font-size:16px;
  font-weight:600;
  margin-bottom:6px;
}
.modal-balance .modal-text{
  font-size:13px;
  color: var(--muted);
}
.modal-balance .modal-text strong{
  color: var(--text);
}
.modal-balance .modal-actions{
  margin-top:12px;
  display:flex;
  justify-content:flex-end;
  gap:8px;
}
.modal-balance .btn-modal-primary,
.modal-balance .btn-modal-secondary{
  padding:8px 12px;
  font-size:13px;
  border-radius:10px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.05);
  color: var(--text);
  cursor:pointer;
}
.modal-balance .btn-modal-primary{
  background: var(--ok);
  border-color: var(--ok);
  color:#0b1120;
}
.modal-balance .btn-modal-secondary:hover{
  background: rgba(255,255,255,.09);
}

/* User profile modal */
.modal-profile{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.modal-profile.open{
  display:flex;
}
.modal-profile .modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.6);
}
.modal-profile .modal-dialog{
  position:relative;
  width:100%;
  max-width:380px;
  border-radius:16px;
  background: var(--panel);
  border:1px solid var(--border);
  box-shadow: var(--shadow-soft);
  padding:18px 20px 16px;
  z-index:1;
}
.modal-profile .modal-title{
  font-size:16px;
  font-weight:600;
  margin-bottom:12px;
}
.profile-modal-body{
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.profile-avatar-wrap{
  position:relative;
  flex-shrink:0;
  width:72px;
  height:72px;
  border-radius:50%;
  overflow:hidden;
  background: rgba(255,255,255,.06);
  border:1px solid var(--border);
}
.profile-avatar{
  width:100%;
  height:100%;
  object-fit:cover;
}
.profile-no-avatar{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  color: var(--muted);
}
.profile-info{
  flex:1;
  min-width:0;
}
.profile-name{
  font-size:16px;
  font-weight:600;
  margin-bottom:4px;
}
.profile-username{
  font-size:14px;
  margin-bottom:2px;
}
.profile-id{
  font-size:13px;
  margin-bottom:10px;
}
.profile-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color: var(--accent2);
}
.profile-link:hover{
  color: var(--text);
}

button{
  padding:8px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.05);
  color: var(--text);
  cursor:pointer;
}
button:hover{background: rgba(255,255,255,.07)}

.auth-wrap{
  min-height: calc(100vh - 56px);
  display:flex;
  align-items:center;
  justify-content:center;
}
.auth-card{
  width:100%;
  max-width: 440px;
  border-radius: 22px;
  background: var(--panel);
  border:1px solid var(--border);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
}
.auth-header{
  padding: 22px 22px 14px;
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:10px;
  text-align:center;
}
.auth-logo{
  width: 48px;
  height: 48px;
  color: var(--text);
}
.auth-title{
  margin:0;
  font-size: 22px;
  font-weight: 650;
  letter-spacing:.2px;
}
.auth-subtitle{margin:0; color: var(--muted); font-size: 13px}
.auth-body{padding: 14px 22px 18px}
.auth-footer{
  padding: 14px 22px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  display:flex;
  justify-content:center;
}

.field{display:flex; flex-direction:column; gap:8px; margin: 0 0 14px}
label{font-size: 13px; color: var(--muted)}
.input{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  outline:none;
}
.input:focus{
  border-color: rgba(167,139,250,.55);
}
select.input{
  background: var(--panel);
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
}
select.input option{
  background: var(--panel2);
  color: var(--text);
  padding: 10px;
}
select.input:focus{
  background: var(--panel2);
  border-color: var(--accent);
}
.row{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.btn-primary{
  width:100%;
  padding:11px 12px;
  border-radius: 14px;
  border:1px solid rgba(139,92,246,.45);
  background: rgba(139,92,246,.14);
}
.btn-primary:hover{background: rgba(139,92,246,.20)}
.btn-danger{
  background: var(--danger);
  color: white;
  border: 1px solid var(--danger);
}
.btn-danger:hover{background: rgba(251,113,133,.85)}
.help{font-size: 12px; color: var(--muted)}
.link{color: var(--accent2)}
.link:hover{color: var(--text)}
.checkbox-row{display:flex; gap:10px; align-items:flex-start; margin: 6px 0 14px}
.checkbox-row input{margin-top:2px}

.input-wrap{position:relative}
.toggle-eye{
  position:absolute;
  right:10px;
  top:50%;
  transform: translateY(-50%);
  border:none;
  background: transparent;
  padding:6px;
  border-radius:10px;
  color: var(--muted);
}
.toggle-eye:hover{background: rgba(255,255,255,.04); color: var(--text)}

.error{color: rgba(251,113,133,.95); margin: 8px 0 10px}

code{font-size:12px; color: rgba(255,255,255,.82)}

/* Custom scrollbar styling */
.content::-webkit-scrollbar{
  width: 10px;
}
.content::-webkit-scrollbar-track{
  background: var(--panel);
  border-radius: 10px;
}
.content::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.15);
  border-radius: 10px;
  border: 2px solid var(--panel);
}
.content::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.25);
}
/* Firefox scrollbar */
.content{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) var(--panel);
}

@media (max-width: 900px){
  body{padding:18px}
  .layout{flex-direction:column}
  .sidebar{width:100%; flex: 0 0 auto}
  .grid{grid-template-columns: 1fr}
  .service-card{
    align-items:flex-start;
    flex-direction:column;
  }
}