:root{
  --bg:#0b0f17;
  --panel: rgba(22, 27, 34, 0.78);
  --panel2: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.10);
  --text:#e5e7eb;
  --muted:#94a3b8;
  --brand:#6366f1;
  --brand2:#22c55e;
}
html,body{height:100%}
body{background:var(--bg); color:var(--text); font-family:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif}
.site-glow{position:fixed; inset:auto; width:680px; height:680px; border-radius:999px; filter:blur(160px); opacity:.18; pointer-events:none; z-index:-1}
.site-glow.g1{left:-240px; top:-240px; background:var(--brand)}
.site-glow.g2{right:-240px; bottom:-240px; background:var(--brand2)}
.glass{background:var(--panel); border:1px solid var(--border); backdrop-filter: blur(22px)}
.site-card{border-radius:22px}
.site-btn{border-radius:14px; font-weight:800; letter-spacing:.4px}
.site-btn-primary{background:linear-gradient(135deg, var(--brand), #4f46e5); border:0}
.site-btn-ghost{border:1px solid var(--border); background:rgba(255,255,255,.02)}
.site-input{background:rgba(0,0,0,.25)!important; border:1px solid rgba(255,255,255,.10)!important; color:var(--text)!important; border-radius:14px!important}
.site-input:focus{border-color:rgba(99,102,241,.65)!important; box-shadow:0 0 0 4px rgba(99,102,241,.12)!important}
.site-kpi{background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:18px}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
.badge-pulse{position:relative}
.badge-pulse:before{content:""; position:absolute; left:-10px; top:50%; width:8px; height:8px; border-radius:50%; transform:translateY(-50%); background:currentColor; box-shadow:0 0 0 0 rgba(255,255,255,.35); animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.35)}70%{box-shadow:0 0 0 10px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

/* ============================================================
   MOBILE & TABLET RESPONSIVE DESIGN
   ============================================================ */

/* Small devices (landscape phones, 576px and down) */
@media (max-width: 575.98px) {
  /* Glow effects - reduce for performance */
  .site-glow{width:300px; height:300px; filter:blur(80px); opacity:.12}
  .site-glow.g1{left:-100px; top:-100px}
  .site-glow.g2{right:-100px; bottom:-100px}
  
  /* Cards & containers */
  .site-card{border-radius:16px}
  .site-card.p-4, .glass.p-4{padding:1rem!important}
  .site-card.p-5, .glass.p-5{padding:1.25rem!important}
  .site-kpi{border-radius:12px}
  .site-kpi.p-3{padding:.75rem!important}
  
  /* Typography */
  h1, .h1{font-size:1.75rem}
  h2, .h2{font-size:1.5rem}
  h3, .h3{font-size:1.25rem}
  .display-4{font-size:2rem}
  .display-5{font-size:1.75rem}
  .display-6{font-size:1.5rem}
  
  /* Buttons */
  .site-btn{border-radius:12px; padding:.625rem 1rem; font-size:.875rem}
  .btn-lg{padding:.75rem 1.25rem; font-size:.9375rem}
  
  /* Inputs */
  .site-input{border-radius:12px!important; padding:.625rem 1rem!important; font-size:.9375rem}
  
  /* Tables */
  .table{font-size:.8125rem}
  .table th, .table td{padding:.5rem .4rem}
  
  /* Navbar */
  .navbar{padding:.5rem 0}
  .navbar-brand{font-size:1.125rem}
  .navbar .btn{padding:.5rem .75rem; font-size:.8125rem}
  .navbar .d-flex.align-items-center.gap-3{gap:.75rem!important}
  .navbar .text-end .fw-bold{font-size:.875rem}
  .navbar .text-end .small{font-size:.75rem}
  
  /* Staff panel cards */
  .staff-card .card-body{padding:.875rem}
  
  /* Modal */
  .modal-dialog{margin:.5rem}
  .modal-content{border-radius:16px}
  .modal-header, .modal-footer{padding:.875rem 1rem}
  .modal-body{padding:1rem}
  
  /* Form elements */
  .form-label{font-size:.875rem; margin-bottom:.375rem}
  .form-text{font-size:.75rem}
  .form-check-label{font-size:.875rem}
  
  /* Tabs */
  .nav-tabs .nav-link{padding:.5rem .75rem; font-size:.8125rem}
  .nav-pills .nav-link{padding:.5rem .875rem; font-size:.8125rem}
  
  /* Badge */
  .badge{padding:.375rem .5rem; font-size:.7rem}
  
  /* API Info Card */
  .api-info-card code{font-size:.75rem; word-break:break-all}
  .api-info-card .mono{font-size:.75rem}
  
  /* Staff panel specific */
  .staff-stat-card{padding:.875rem}
  .staff-stat-card .display-6{font-size:1.25rem}
  
  /* Alerts */
  .alert{padding:.75rem 1rem; font-size:.875rem; border-radius:12px}
  
  /* Container adjustments */
  .container{padding-left:.75rem; padding-right:.75rem}
}

/* Medium devices (tablets, 576px - 768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .site-glow{width:450px; height:450px; filter:blur(120px); opacity:.15}
  
  .site-card{border-radius:18px}
  .site-card.p-4, .glass.p-4{padding:1.25rem!important}
  
  h1, .h1{font-size:1.875rem}
  h2, .h2{font-size:1.625rem}
  .display-5{font-size:2rem}
  .display-6{font-size:1.625rem}
  
  .site-btn{border-radius:13px}
  .btn-lg{padding:.75rem 1.5rem}
  
  .table{font-size:.875rem}
  .table th, .table td{padding:.625rem .5rem}
  
  .navbar .d-flex.align-items-center.gap-3{gap:1rem!important}
  
  .modal-dialog{margin:1rem auto; max-width:calc(100% - 2rem)}
  
  .api-info-card code{font-size:.8125rem}
  
  .staff-stat-card .display-6{font-size:1.375rem}
}

/* Large devices (tablets landscape, small desktops, 768px - 992px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .site-glow{width:550px; height:550px}
  
  .site-card.p-4, .glass.p-4{padding:1.375rem!important}
  
  .display-6{font-size:1.75rem}
  
  .table{font-size:.9375rem}
  
  .api-info-card code{font-size:.875rem}
}

/* Touch-friendly improvements */
@media (pointer: coarse) {
  .site-btn{min-height:44px}
  .site-input{min-height:44px}
  .form-check-input{width:1.25rem; height:1.25rem}
  .nav-link{padding:.75rem 1rem}
  .dropdown-item{padding:.625rem 1rem}
  .btn-close{width:1.5rem; height:1.5rem}
  
  /* Better tap targets */
  .table .btn-sm{min-width:36px; min-height:36px; padding:.375rem .5rem}
}

/* Landscape phone specific */
@media (max-height: 500px) and (orientation: landscape) {
  .site-glow{opacity:.08}
  .site-card.p-4{padding:1rem!important}
  .modal-body{max-height:60vh; overflow-y:auto}
}

/* Print styles - hide decorative elements */
@media print {
  .site-glow{display:none}
  .glass{background:#fff!important; color:#000!important; border:1px solid #ddd!important}
  .navbar{display:none}
  .site-btn{border:1px solid #333!important}
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .badge-pulse:before{animation:none}
  .site-glow{filter:blur(100px)}
  *, *::before, *::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
  }
}

/* Dark mode preference (already dark, but ensures consistency) */
@media (prefers-color-scheme: dark) {
  :root{
    color-scheme: dark;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  :root{
    --border: rgba(255,255,255,.25);
    --muted: #b0b0b0;
  }
  .glass{border-width:2px}
  .site-btn{border-width:2px}
}

/* API Info Card Styles */
.api-info-card{
  background:linear-gradient(135deg, rgba(99,102,241,.08), rgba(34,197,94,.05));
  border:1px solid rgba(99,102,241,.25);
  border-radius:18px;
  overflow:hidden;
}
.api-info-card .card-header{
  background:rgba(99,102,241,.12);
  border-bottom:1px solid rgba(99,102,241,.2);
  padding:1rem 1.25rem;
}
.api-info-card .api-field{
  background:rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  padding:.75rem 1rem;
  margin-bottom:.75rem;
}
.api-info-card .api-field:last-child{margin-bottom:0}
.api-info-card .api-label{
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--muted);
  margin-bottom:.25rem;
}
.api-info-card .api-value{
  font-family:ui-monospace, SFMono-Regular, monospace;
  font-size:.875rem;
  color:var(--text);
  word-break:break-all;
  user-select:all;
}
.api-info-card .btn-copy{
  padding:.25rem .5rem;
  font-size:.75rem;
  border-radius:6px;
}

/* Staff Panel Stat Cards */
.staff-stat-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:1.25rem;
  text-align:center;
  transition:all .2s ease;
}
.staff-stat-card:hover{
  border-color:rgba(99,102,241,.3);
  transform:translateY(-2px);
}
.staff-stat-card .stat-icon{
  width:48px;
  height:48px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto .75rem;
  font-size:1.25rem;
}
.staff-stat-card .stat-value{
  font-size:1.75rem;
  font-weight:800;
  margin-bottom:.25rem;
}
.staff-stat-card .stat-label{
  font-size:.8125rem;
  color:var(--muted);
}