/* Glassy Neon Purple 3D UI */
:root { --primary:#8A2BE2; --secondary:#00E5FF; --bg1:#0A0F1F; --bg2:#111A35; --text:#fff; }
* { box-sizing:border-box }
html,body { height:100% }
body { margin:0; font-family:'Cairo',system-ui,-apple-system,Segoe UI,Roboto,Arial; color:var(--text); background: radial-gradient(1000px 800px at 10% 10%, rgba(138,43,226,.15), transparent), linear-gradient(135deg, var(--bg1), var(--bg2)); }

/* Vision UI inspired background overlay */
body.glass-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url('../vision-ui/images/body-background.png');
  background-size: cover;
  background-position: center;
  opacity: .15;
  pointer-events: none;
}

.glass-bg { perspective: 1000px }
.container { max-width:1100px; margin:40px auto; padding:0 16px }
.layout { display:flex }
.layout .content { flex:1 }
.sidebar { position:fixed; top:12px; bottom:12px; right:12px; width:250px; display:flex; flex-direction:column; gap:12px; backdrop-filter:blur(16px); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:14px; box-shadow:0 10px 40px rgba(138,43,226,.2) }
.sidebar .brand { display:flex; align-items:center; gap:10px; font-weight:700; color:var(--secondary) }
.sidebar .brand .logo-img { height:28px; max-width:140px; object-fit:contain; border-radius:6px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06); padding:4px }
.sidebar nav { display:flex; flex-direction:column; gap:8px; margin-top:8px }
.sidebar nav a { color:#fff; opacity:.9; text-decoration:none; padding:8px 10px; border-radius:10px; display:flex; align-items:center; gap:10px }
.sidebar nav a .icon { width:22px; display:inline-flex; justify-content:center }
.sidebar nav a:hover { background:linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.03)) }
.sidebar nav a.active { background: linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,.06)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12) }
.sidebar .grow { flex:1 }
.sidebar .logout a { display:inline-block; color:#ff7a9e; text-decoration:none; font-weight:700 }
.sidebar .credit { color:rgba(255,255,255,.7); font-size:12px; margin-top:8px }

.glass-card { transform: translateZ(0); border-radius:20px; border:1px solid rgba(255,255,255,.12); background: linear-gradient( to bottom right, rgba(255,255,255,.08), rgba(255,255,255,.05) ); backdrop-filter: blur(18px); padding:18px; margin-bottom:16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 60px rgba(138,43,226,.15) }
.glass-card.gradient {
  background: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.04)),
              url('../vision-ui/images/billing-background-card.png');
  background-size: cover;
  background-position: center;
}
.glass-card h1, .glass-card h2, .glass-card h3 { margin:8px 0 12px }

/* VIP badges & glow */
.vip-badge { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.08)); border:1px solid rgba(255,255,255,.18); box-shadow:0 0 24px rgba(255,215,0,.25) }
.vip-badge .icon { filter: drop-shadow(0 0 6px rgba(255,215,0,.65)); }
.vip-glow { box-shadow: 0 0 40px rgba(255,215,0,.25), 0 0 8px rgba(255,215,0,.25) !important }

/* Uploads grid */
.uploads-grid { display:grid; grid-template-columns:repeat(6, 1fr); gap:10px }
@media (max-width:1100px){ .uploads-grid{ grid-template-columns:repeat(4, 1fr) } }
@media (max-width:700px){ .uploads-grid{ grid-template-columns:repeat(2, 1fr) } }

.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:12px }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
@media (max-width:900px){ .grid-3{ grid-template-columns:1fr } }
@media (max-width:700px){ .grid-2{ grid-template-columns:1fr } }

label { display:flex; flex-direction:column; gap:6px; font-weight:600 }
input, select { border-radius:14px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:#fff; padding:10px 12px; outline:none }
button.btn-primary { cursor:pointer; border:none; border-radius:14px; padding:12px 18px; color:#0a0f1f; background: linear-gradient(135deg, var(--secondary), var(--primary)); box-shadow:0 10px 30px rgba(138,43,226,.35); font-weight:700 }
button.btn-primary:hover { filter: brightness(1.05) }

.alert { border-radius:12px; padding:10px 12px; margin-bottom:12px; border:1px solid rgba(255,255,255,.2) }
.alert.success { background: rgba(0,255,170,.12); border-color: rgba(0,255,170,.3) }
.alert.error { background: rgba(255,0,90,.12); border-color: rgba(255,0,90,.3) }

.stat { text-align:center }
.stat p { font-size:28px; margin:8px 0 0; color:var(--secondary); font-weight:800 }
.stat small { color:rgba(255,255,255,.6); font-size:12px; display:block; margin-top:4px }

.reports { margin:0; padding:0 18px }
.reports li { margin:8px 0 }

.credit { opacity:.8; margin-top:10px }

/* Status badges */
.status-badge { padding:4px 8px; border-radius:8px; font-size:12px; font-weight:600 }
.status-pending { background:rgba(255,193,7,.15); color:#ffc107; border:1px solid rgba(255,193,7,.3) }
.status-approved { background:rgba(0,255,136,.15); color:#00ff88; border:1px solid rgba(0,255,136,.3) }
.status-rejected { background:rgba(255,122,158,.15); color:#ff7a9e; border:1px solid rgba(255,122,158,.3) }

/* Table improvements */
table { border-collapse:collapse }
th, td { text-align:right; vertical-align:top }
tr:hover { background:rgba(255,255,255,.02) }