:root{
  --bg: #eef4ff;
  --fg: #10284b;
  --muted: #6e82a2;
  --card: #ffffff;
  --border: #d8e6ff;
  --primary: #0b67ef;
  --primary-2: #2aa3ff;
  --accent: #7c3aed;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --neon-glow: 0 14px 34px rgba(11,103,239,.12);
  --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(900px 420px at 10% -10%, #dcebff 0%, rgba(220,235,255,0) 48%),
    radial-gradient(800px 360px at 100% 0%, #e8f2ff 0%, rgba(232,242,255,0) 42%),
    linear-gradient(180deg, #f4f8ff, #edf4ff);
  color:var(--fg);
  font-size:13px;
}
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(255,255,255,.98), rgba(247,251,255,.98));
  border:1px solid var(--border);
  border-radius:16px;
  padding:15px;
  box-shadow:var(--neon-glow);
}
.page-admin .card{padding:11px;border-radius:14px}
.page-settings .card{padding:10px;border-radius:12px}
.neon-title{color:var(--primary)}
.brand-logo{width:30px;height:30px;border-radius:8px;filter:drop-shadow(0 8px 16px rgba(11,103,239,.18))}
.admin-header{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--admin-header-h);
  padding:6px 12px;background:rgba(255,255,255,.82);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(12px)
}
.admin-brand{display:flex;align-items:center;gap:10px}
.brand-name{font-weight:800;color:var(--primary);font-size:14px;letter-spacing:.02em}
.user-box{position:relative}
.user-avatar{width:30px;height:30px;border-radius:50%;box-shadow:0 10px 20px rgba(11,103,239,.18);background:
  radial-gradient(circle at 35% 35%, #ffffff 0%, #d9f5ff 18%, #5ab2ff 52%, #0b67ef 100%)}
.user-name{margin-left:8px;font-size:12px}
.brand-logo,.user-avatar,.top-icons .icon{animation:z3-header-bob 3.6s ease-in-out infinite}
.top-icons .icon:nth-child(2){animation-delay:-1.2s}
.top-icons .icon:nth-child(3){animation-delay:-2.1s}
.user-dropdown{position:absolute;right:0;margin-top:8px;min-width:160px;
  background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 24px rgba(15,23,42,.12);display:none}
.user-dropdown a{display:block;padding:10px 12px;color:var(--fg);text-decoration:none;border-bottom:1px solid var(--border);font-size:12px}
.user-dropdown a:last-child{border-bottom:none}
.user-dropdown a:hover{background:#f4f8ff}
.admin-nav{
  display:flex;flex-wrap:wrap;gap:8px;padding:6px 12px;background:rgba(255,255,255,.74);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:12px;background:#fff;color:var(--fg);font-size:12px
}
.admin-nav a,
.sidebar-left .menu a,
.btn-toggle{transition:transform .18s ease, box-shadow .18s ease, background .18s ease}
.admin-nav a:hover,
.sidebar-left .menu a:hover,
.btn-toggle:hover{transform:translateY(-2px)}
.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 18%, #7bc7ff 50%, #0b67ef 100%);
  box-shadow:0 6px 14px rgba(11,103,239,.18);
  transform:translateZ(0)
}
.layout-row{display:flex;align-items:stretch;min-height:100vh}
.sidebar-left{
  width:var(--sidebar-w);background:rgba(255,255,255,.8);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;
  backdrop-filter:blur(12px)
}
.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:14px;border:1px solid var(--border);color:var(--fg);background:#fff;margin-bottom:8px;font-size:12px;font-weight:700
}
.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:#f4f8ff}
.sidebar-left .menu a.active{background:linear-gradient(180deg,#edf5ff 0%,#e2eeff 100%);box-shadow:var(--neon-glow);color:var(--primary)}
.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:10px;border:1px solid var(--border);background:#fff;color:var(--primary)}
.admin-footer{
  margin-top:24px;padding:12px 16px;text-align:center;color:var(--muted);border-top:1px solid var(--border);font-size:12px
}
.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:1.7rem;font-weight:800}
.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:9px 13px;border-radius:12px;border:1px solid var(--border);background:#fff;color:var(--fg);font-size:12px;font-weight:700
}
.btn-primary{background:linear-gradient(90deg, var(--primary), var(--primary-2));color:#fff;box-shadow:var(--neon-glow);border-color:transparent}
.table{width:100%;border-collapse:collapse;border:1px solid var(--border)}
.table th,.table td{border-bottom:1px solid var(--border);padding:9px 10px;text-align:left;font-size:12px}
.table th{font-size:11px}
.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:12px;border:1px solid var(--border);background:#fff;color:#10284b;box-shadow:inset 0 1px 2px rgba(15,23,42,.04);font-size:12px}
.recommendation{margin-top:6px;color:var(--muted);font-size:11px}
.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;
    /* Remove transform logic after animation finishes to prevent fixed position bugs */
}

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

.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); }
}
@keyframes z3-header-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}