:root{
  --app-font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  --app-bg:#f6f7fb;
  --app-surface:#ffffff;
  --app-surface-2:#f2f4f8;
  --app-text:#0f172a;
  --app-text-muted:#64748b;
  --app-border:rgba(15,23,42,.10);
  --app-shadow:0 10px 30px rgba(15,23,42,.08);
  --app-shadow-sm:0 6px 16px rgba(15,23,42,.10);
  --app-radius:14px;
  --app-radius-sm:10px;
  --app-primary:#2563eb;
  --app-primary-2:#7c3aed;
  --app-success:#16a34a;
  --app-danger:#dc2626;
  --app-warning:#f59e0b;
  --app-info:#0ea5e9;
  --app-focus:rgba(37,99,235,.35);
  --app-ease:cubic-bezier(.4,0,.2,1);
  --app-dur:240ms;
  --app-dur-fast:160ms;
  --app-space-1:6px;
  --app-space-2:10px;
  --app-space-3:14px;
  --app-space-4:18px;
  --app-space-5:22px;
  --app-space-6:28px;
  --app-ring:0 0 0 .25rem var(--app-focus);
}

html,body{
  height:100%;
}

body{
  font-family:var(--app-font-sans);
  color:var(--app-text);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background:
    radial-gradient(900px 320px at 10% 0%, rgba(37,99,235,.14), rgba(37,99,235,0) 60%),
    radial-gradient(720px 280px at 90% 10%, rgba(124,58,237,.12), rgba(124,58,237,0) 55%),
    var(--app-bg);
}

.text-muted{
  color:var(--app-text-muted)!important;
}

.container-fluid{
  max-width:1600px;
}

.btn,.form-control,.form-select,.input-group-text,.card,.alert,.dropdown-menu,.table,.badge,.navbar,.pagination .page-link{
  transition:background-color var(--app-dur) var(--app-ease),color var(--app-dur) var(--app-ease),border-color var(--app-dur) var(--app-ease),box-shadow var(--app-dur) var(--app-ease),transform var(--app-dur) var(--app-ease),opacity var(--app-dur) var(--app-ease);
}

@media (prefers-reduced-motion: reduce){
  .btn,.form-control,.form-select,.input-group-text,.card,.alert,.dropdown-menu,.table,.badge,.navbar,.pagination .page-link{
    transition:none!important;
  }
}

*:focus{
  outline:none;
}
*:focus-visible{
  box-shadow:var(--app-ring)!important;
}

.card{
  border:1px solid var(--app-border);
  border-radius:var(--app-radius);
  box-shadow:var(--app-shadow);
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.98));
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 42px rgba(15,23,42,.12);
}
.card-header{
  background:transparent;
  border-bottom:1px solid var(--app-border);
  font-weight:650;
}

.alert{
  border-radius:var(--app-radius);
  border:1px solid var(--app-border);
}

.btn{
  border-radius:12px;
  font-weight:600;
}
.btn-primary{
  background-image:linear-gradient(135deg, var(--app-primary), var(--app-primary-2));
  border-color:transparent;
}
.btn-primary:hover{
  transform:translateY(-1px);
  filter:saturate(1.02);
}
.btn-outline-secondary,.btn-outline-light,.btn-outline-primary,.btn-outline-danger,.btn-outline-success,.btn-outline-info{
  border-width:1px;
}
.btn:active{
  transform:translateY(0);
}

.table{
  border-color:var(--app-border);
  border-radius:var(--app-radius);
  overflow:hidden;
  background:rgba(255,255,255,.8);
}
.table thead th{
  background:rgba(15,23,42,.03);
  border-bottom:1px solid var(--app-border)!important;
  color:var(--app-text);
  font-weight:650;
}
.table-hover tbody tr:hover{
  background:rgba(37,99,235,.06);
}

.form-control,.form-select,.input-group-text{
  border-radius:12px;
  border-color:var(--app-border);
}
.form-control::placeholder{
  color:rgba(100,116,139,.75);
}
.form-control:focus,.form-select:focus{
  border-color:rgba(37,99,235,.45);
  box-shadow:0 0 0 .25rem var(--app-focus);
}

.badge{
  border-radius:999px;
  font-weight:650;
}
.badge.bg-success{ background-color:var(--app-success)!important; }
.badge.bg-danger{ background-color:var(--app-danger)!important; }
.badge.bg-warning{ background-color:var(--app-warning)!important; color:#111827!important; }
.badge.bg-info{ background-color:var(--app-info)!important; }

.navbar.bg-white{
  background:rgba(255,255,255,.86)!important;
  border-bottom:1px solid var(--app-border)!important;
  backdrop-filter:none;
}
.navbar.shadow-sm{
  box-shadow:0 10px 24px rgba(15,23,42,.06)!important;
}

.main-content{
  padding:var(--app-space-6);
  animation:app-fade-up 360ms var(--app-ease) both;
}

.sidebar{
  background:linear-gradient(180deg, #0b1220, #0f172a);
  color:#e5e7eb;
  border-right:1px solid rgba(255,255,255,.08);
  border-top:1px solid transparent;
}
.navbar-brand{
  background:linear-gradient(135deg, rgba(37,99,235,.18), rgba(124,58,237,.12));
  border-bottom:1px solid rgba(255,255,255,.10);
  color:#ffffff!important;
  border-radius:0 0 var(--app-radius) var(--app-radius);
  margin:30px 12px 10px;
  padding:18px 16px;
  position:relative;
  overflow:hidden;
}
.sidebar .navbar-brand .sidebar-brand-title{
  display:inline-block;
  animation:none;
  will-change:auto;
}
@keyframes sidebarBrandDrift{
  0%{transform:translate(0,0)}
  12%{transform:translate(6px,-2px)}
  24%{transform:translate(-5px,3px)}
  38%{transform:translate(3px,6px)}
  52%{transform:translate(-6px,-1px)}
  66%{transform:translate(4px,2px)}
  78%{transform:translate(-2px,5px)}
  90%{transform:translate(2px,-4px)}
  100%{transform:translate(0,0)}
}
.sidebar .nav{
  padding:6px 10px 10px;
}
.sidebar .nav-link{
  border-radius:12px;
  margin:4px 6px;
  padding:10px 12px;
  color:rgba(226,232,240,.82);
  position:relative;
  transform:translateZ(0);
}
.sidebar .nav-link:hover{
  color:#ffffff;
  background:rgba(255,255,255,.08);
  transform:translateY(-1px);
}
.sidebar .nav-link.active{
  color:#ffffff;
  background:linear-gradient(135deg, rgba(37,99,235,.30), rgba(124,58,237,.22));
  box-shadow:0 10px 22px rgba(2,6,23,.28);
}
.sidebar .nav-link i{
  opacity:.95;
}

.pagination .page-link{
  border-color:var(--app-border);
  border-radius:12px!important;
  margin:0 3px;
  color:var(--app-text);
}
.pagination .page-link:hover{
  background:rgba(37,99,235,.08);
}
.pagination .active .page-link{
  background-image:linear-gradient(135deg, var(--app-primary), var(--app-primary-2));
  border-color:transparent;
}

.text-truncate{
  max-width:100%;
}

.border-left-primary{ border-left:.3rem solid var(--app-primary)!important; }
.border-left-success{ border-left:.3rem solid var(--app-success)!important; }
.border-left-info{ border-left:.3rem solid var(--app-info)!important; }
.border-left-warning{ border-left:.3rem solid var(--app-warning)!important; }

.app-shell{
  padding-left:var(--app-space-4);
  padding-right:var(--app-space-4);
}
.app-shell-row{
  min-height:100vh;
}

.sidebar{
  position:sticky;
  top:0;
  height:100vh;
  overflow:auto;
  overscroll-behavior:contain;
}
.sidebar::-webkit-scrollbar{
  width:10px;
}
.sidebar::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.14);
  border-radius:999px;
}

.sidebar-backdrop{
  display:none;
}

.navbar .navbar-toggler{
  border:1px solid rgba(15,23,42,.12);
  border-radius:12px;
  padding:8px 10px;
}
.navbar .navbar-toggler:focus{
  box-shadow:var(--app-ring);
}

.nav-link{
  display:flex;
  align-items:center;
  gap:10px;
}

.form-label{
  font-weight:650;
  color:rgba(15,23,42,.78);
}
.input-group-text{
  background:rgba(15,23,42,.03);
}

.table-responsive{
  border-radius:var(--app-radius);
  border:1px solid var(--app-border);
  box-shadow:var(--app-shadow-sm);
  overflow:hidden;
  background:rgba(255,255,255,.86);
}
.table{
  margin-bottom:0;
}
.table td,.table th{
  vertical-align:middle;
}
.table tbody td{
  border-top:1px solid rgba(15,23,42,.08);
}

.dropdown-menu{
  border:1px solid var(--app-border);
  border-radius:14px;
  box-shadow:0 18px 48px rgba(15,23,42,.16);
  padding:10px;
}
.dropdown-item{
  border-radius:10px;
  padding:10px 12px;
}
.dropdown-item:hover{
  background:rgba(37,99,235,.08);
}

.alert{
  backdrop-filter:none;
}
.alert-success{
  background:rgba(22,163,74,.10);
}
.alert-danger{
  background:rgba(220,38,38,.10);
}

.badge{
  letter-spacing:.2px;
}

.btn{
  padding:.55rem .95rem;
}
.btn-sm{
  padding:.4rem .75rem;
}
.btn-outline-light{
  color:rgba(226,232,240,.92);
  border-color:rgba(255,255,255,.18);
}
.btn-outline-light:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.26);
}

.pagination{
  gap:4px;
}

h1,h2,h3,h4,h5{
  letter-spacing:-.01em;
}

@keyframes app-fade-up{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

@media (max-width: 991.98px){
  .app-shell{
    padding-left:0;
    padding-right:0;
  }
  .sidebar{
    position:fixed;
    top:0;
    left:0;
    width:min(88vw, 340px);
    max-width:340px;
    transform:translateX(-104%);
    transition:transform var(--app-dur) var(--app-ease);
    z-index:1051;
  }
  .sidebar.show{
    transform:translateX(0);
  }
  .sidebar-backdrop{
    position:fixed;
    inset:0;
    background:rgba(2,6,23,.45);
    backdrop-filter:none;
    z-index:1050;
  }
  .sidebar.show + .sidebar-backdrop{
    display:block;
    animation:app-backdrop-in var(--app-dur-fast) var(--app-ease) both;
  }
  .main-content{
    padding:18px;
  }
}

@keyframes app-backdrop-in{
  from{ opacity:0; }
  to{ opacity:1; }
}

@media (max-width: 575.98px){
  .table td,.table th{
    padding:.65rem .65rem;
    font-size:.92rem;
  }
  .card .card-body{
    padding:18px!important;
  }
  .navbar{
    padding-left:16px!important;
    padding-right:16px!important;
  }
}

@media (prefers-reduced-motion: reduce){
  .main-content{
    animation:none!important;
  }
  .sidebar{
    transition:none!important;
  }
  .sidebar.show + .sidebar-backdrop{
    animation:none!important;
  }
}

body.neo-motion .navbar.bg-white{
  backdrop-filter:saturate(1.1) blur(6px);
}

body.neo-motion .sidebar .navbar-brand .sidebar-brand-title{
  animation:sidebarBrandDrift 9.5s ease-in-out infinite;
  will-change:transform;
}

body.neo-motion .alert{
  backdrop-filter:saturate(1.1) blur(6px);
}

@media (max-width: 991.98px){
  body.neo-motion .sidebar-backdrop{
    backdrop-filter:blur(1.5px);
  }
}