:root{
  --bg: #120a24;
  --fg: #e6edf5;
  --muted: #93a4b8;
  --card: #1a0f33;
  --border: #2a184d;
  --primary: #59f2ff;
  --primary-2: #a085ff;
  --accent: #ff5fb7;
  --success: #39ff88;
  --warning: #ffd166;
  --danger: #ff4d4f;
  --neon-glow: 0 0 10px rgba(77,243,255,.6), 0 0 30px rgba(122,92,255,.35);
  --admin-header-h: 56px;
  --sidebar-w: 240px;
}
*{box-sizing:border-box}
html{font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;line-height:1.5}
@media (prefers-reduced-motion:no-preference){
  :focus-visible{outline:2px solid var(--primary);outline-offset:2px}
}
body{
  margin:0;
  background: radial-gradient(1200px 600px at 10% -10%, #1b0c34 0%, #120a24 40%), 
              radial-gradient(1000px 600px at 90% 0%, #2b1048 0%, #120a24 40%),
              linear-gradient(180deg, #120a24, #140b2d);
  color:var(--fg)
}
img{max-width:100%;height:auto}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:100%;max-width:1200px;margin:0 auto;padding:16px}
.grid{display:grid;gap:16px}
.grid-auto{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{
  background:linear-gradient(180deg, rgba(26,15,51,0.95), rgba(20,11,45,0.97));
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  box-shadow:var(--neon-glow);
}
.page-admin .card{padding:12px;border-radius:12px}
.page-settings .card{padding:10px;border-radius:10px}
.neon-title{color:var(--primary);text-shadow:0 0 8px rgba(77,243,255,.6)}
.brand-logo{width:32px;height:32px;border-radius:8px;filter:drop-shadow(0 0 10px rgba(77,243,255,.4))}
.admin-header{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--admin-header-h);
  padding:6px 12px;background:#1a0f33;border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:50
}
.admin-brand{display:flex;align-items:center;gap:10px}
.brand-name{font-weight:600;color:var(--fg)}
.user-box{position:relative}
.user-avatar{width:32px;height:32px;border-radius:50%;box-shadow:0 0 10px rgba(122,92,255,.4);background:
  radial-gradient(circle at 35% 35%, #ffffff 0%, #d9f5ff 10%, #7a5cff 45%, #4df3ff 65%, #0c3d7a 100%)}
.user-name{margin-left:8px}
.user-dropdown{position:absolute;right:0;margin-top:8px;min-width:160px;
  background:#0f1b2f;border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 24px rgba(0,0,0,.35);display:none}
.user-dropdown a{display:block;padding:10px 12px;color:var(--fg);text-decoration:none;border-bottom:1px solid var(--border)}
.user-dropdown a:last-child{border-bottom:none}
.user-dropdown a:hover{background:#0c1426}
.admin-nav{
  display:flex;flex-wrap:wrap;gap:8px;padding:6px 12px;background:#1a0f33;border-bottom:1px solid var(--border)
}
.admin-nav a{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border:1px solid var(--border);border-radius:10px;background:#22123f;color:var(--fg)
}
.admin-nav a::before{
  content:"";display:inline-block;width:16px;height:16px;border-radius:50%;
  margin-right:4px;background:
    radial-gradient(circle at 35% 35%, #ffffff 0%, #d9f5ff 15%, #4df3ff 45%, #1e89ff 60%, #0c3d7a 100%);
  box-shadow:0 2px 6px rgba(0,0,0,.35), 0 0 12px rgba(77,243,255,.6);
  transform:translateZ(0)
}
.layout-row{display:flex;align-items:stretch;min-height:100vh}
.sidebar-left{
  width:var(--sidebar-w);background:#130a26;border-right:1px solid var(--border);
  position:fixed;top:var(--admin-header-h);left:0;height:calc(100vh - var(--admin-header-h));overflow-y:auto
}
.sidebar-left .menu{display:flex;flex-direction:column;padding:12px}
.sidebar-left .menu a{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:10px;border:1px solid var(--border);color:var(--fg);background:#22123f;margin-bottom:8px;font-size:.92rem
}
.sidebar-left .menu a span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-left .menu a svg{display:block}
.sidebar-left .menu a::before{display:none}
.sidebar-left .menu a:hover{background:#0d1628}
.sidebar-left .menu a.active{background:#0f1b2f;box-shadow:var(--neon-glow)}
.main-content{flex:1;padding:16px;margin-left:var(--sidebar-w)}
.main-content{min-width:0}
.sidebar-left.hidden + .main-content{margin-left:0}
.sidebar-left.hidden{display:none}
.btn-toggle{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:#22123f;color:#e6edf5}
.admin-footer{
  margin-top:24px;padding:12px 16px;text-align:center;color:var(--muted);border-top:1px solid var(--border)
}
.dashboard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1024px){.dashboard-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.dashboard-grid{grid-template-columns:1fr}}
.stat-card .stat-value{font-size:2rem;font-weight:700}
.stat-card.success{border-color:#173f2a}
.stat-card.warning{border-color:#3f3417}
.stat-card.info{border-color:#172f3f}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:#0f1b2f;color:var(--fg)
}
.btn-primary{background:linear-gradient(90deg, var(--primary), var(--primary-2));color:#05101b;box-shadow:var(--neon-glow)}
.table{width:100%;border-collapse:collapse;border:1px solid var(--border)}
.table th,.table td{border-bottom:1px solid var(--border);padding:10px;text-align:left}
.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.input-dark,.select-dark{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:#22123f;color:#e6edf5;box-shadow:inset 6px 6px 12px rgba(0,0,0,.35), inset -6px -6px 12px rgba(255,255,255,.04)}
.recommendation{margin-top:6px;color:var(--muted);font-size:12px}
.form-row{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:700px){.form-row{grid-template-columns:1fr 1fr}}

@media (max-width:640px){
  .grid{gap:14px}
  .card{padding:14px;border-radius:12px}
  .layout-row{flex-direction:column}
  .sidebar-left{
    position:static;
    width:100%;
    height:auto;
    top:auto;
    left:auto;
    overflow:visible;
  }
  .main-content{
    margin-left:0;
    padding:12px;
  }
  .admin-header{height:auto;flex-wrap:wrap;gap:8px}
}

@media (max-width:900px){
  .table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table th,.table td{white-space:nowrap}
}

.admin-filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;margin-bottom:12px}
@media (max-width:640px){
  .grid{gap:12px}
  .card{padding:10px;border-radius:10px}
  .brand-name,.user-name{font-size:14px}
  .admin-header{
    padding:6px 8px;
  }
  .admin-nav{
    padding:6px 8px;
    gap:6px;
    overflow-x:auto;
  }
  .admin-nav a{
    padding:6px 10px;
    font-size:12px;
  }
  .sidebar-left .menu{
    padding:10px;
  }
  .sidebar-left .menu a{
    padding:6px 8px;
    margin-bottom:6px;
    font-size:.8rem;
  }
  .table th,.table td{
    padding:6px 8px;
    font-size:12px;
  }
  .btn{
    padding:8px 10px;
    border-radius:8px;
    font-size:13px;
  }
  .input-dark,.select-dark{
    padding:8px 10px;
    border-radius:8px;
  }
}

/* Global Page Transitions */
.page-transition-wrap {
    animation: fade-in-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fade-in-up {
    0% { opacity: 0; transform: translateY(15px); }
    100% { opacity: 1; transform: translateY(0); }
}

.slide-out-left {
    animation: slide-out-left 0.2s ease-in forwards !important;
}
.slide-out-right {
    animation: slide-out-right 0.2s ease-in forwards !important;
}

@keyframes slide-out-left {
    to { opacity: 0; transform: translateX(-20px); }
}
@keyframes slide-out-right {
    to { opacity: 0; transform: translateX(20px); }
}