:root{
  --ec-plus-bg: #eef3ff;
  --ec-plus-surface: rgba(255,255,255,.92);
  --ec-plus-surface-strong: #ffffff;
  --ec-plus-border: rgba(148,163,184,.18);
  --ec-plus-shadow: 0 24px 60px rgba(15,23,42,.10);
  --ec-plus-shadow-soft: 0 14px 32px rgba(15,23,42,.08);
  --ec-plus-accent: linear-gradient(135deg, #2563eb 0%, #0891b2 52%, #0f766e 100%);
  --ec-plus-accent-soft: linear-gradient(135deg, rgba(37,99,235,.12), rgba(8,145,178,.10), rgba(15,118,110,.10));
}

body.ec-app-body{
  background:
    radial-gradient(1100px circle at -10% -5%, rgba(37,99,235,.16), transparent 45%),
    radial-gradient(900px circle at 110% 0%, rgba(8,145,178,.14), transparent 38%),
    radial-gradient(900px circle at 50% 120%, rgba(15,118,110,.10), transparent 34%),
    linear-gradient(180deg, #eff4ff 0%, #f7fafc 55%, #eef5fb 100%) !important;
}

body.ec-app-body::after{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.22), transparent 70%);
}

#ecSidebar{
  background:
    radial-gradient(320px circle at 0% 0%, rgba(59,130,246,.18), transparent 55%),
    radial-gradient(280px circle at 100% 100%, rgba(45,212,191,.12), transparent 50%),
    linear-gradient(180deg, #071225 0%, #0c1729 38%, #091120 100%) !important;
}

#ecSidebar .ec-sidebar-item{
  position: relative;
  overflow: hidden;
}

#ecSidebar .ec-sidebar-item::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.08), transparent 55%);
  opacity: 0;
  transition: opacity .18s ease;
}

#ecSidebar .ec-sidebar-item:hover::before,
#ecSidebar .ec-sidebar-item[aria-current="page"]::before{
  opacity: 1;
}

header.sticky{
  background: rgba(255,255,255,.72) !important;
  border-bottom: 1px solid rgba(148,163,184,.14) !important;
  box-shadow: 0 16px 40px rgba(15,23,42,.05);
}

header.sticky::after{
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(37,99,235,.18), transparent);
}

.card,
.modal-content,
.table-responsive,
.alert,
.dropdown-menu,
.auth-shell,
.ec-card,
.ec-table-shell{
  box-shadow: var(--ec-plus-shadow) !important;
  border: 1px solid var(--ec-plus-border) !important;
}

.card,
.ec-card,
.modal-content{
  position: relative;
  overflow: hidden;
}

.card::before,
.ec-card::before,
.modal-content::before{
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(37,99,235,.25), rgba(15,118,110,.12), transparent 72%);
}

.card-header,
.modal-header,
.card-footer,
.modal-footer{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.86)) !important;
}

.btn-primary,
.btn-success{
  background-image: var(--ec-plus-accent) !important;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-light,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info{
  background: rgba(255,255,255,.78) !important;
  backdrop-filter: blur(10px);
}

.table thead th,
.ec-table thead th{
  background: rgba(241,245,249,.92) !important;
}

.table tbody tr:hover,
.ec-table tbody tr:hover{
  box-shadow: inset 0 0 0 999px rgba(37,99,235,.035);
}

.form-control,
.form-select,
.input-group-text,
.form-floating > .form-control,
.form-floating > .form-select,
textarea.form-control{
  background: rgba(255,255,255,.88) !important;
}

.form-check-input{
  width: 1.15rem;
  height: 1.15rem;
  border-radius: .45rem !important;
  border-color: rgba(148,163,184,.45);
}

.form-check-input:checked{
  background-color: #2563eb;
  border-color: #2563eb;
}

.ec-page-head,
.app-page-header{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.15rem;
  margin-bottom: 1.35rem !important;
}

.ec-page-head::after,
.app-page-header::after{
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: linear-gradient(90deg, rgba(37,99,235,.15), rgba(15,118,110,.12), transparent 72%);
}

.ec-kpi-card,
.card.ec-kpi-card{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,250,252,.96));
  border: 1px solid rgba(148,163,184,.14) !important;
}

.ec-kpi-card .ec-kpi-value{
  letter-spacing: -.04em;
  font-weight: 800;
}

.ec-soft-accent{
  background: var(--ec-plus-accent-soft);
}

.ec-toolbar-stack{
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.table-responsive::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}

.table-responsive::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.45);
  border-radius: 999px;
}

.table-responsive::-webkit-scrollbar-track{
  background: rgba(226,232,240,.4);
  border-radius: 999px;
}

footer{
  position: relative;
  overflow: hidden;
}

footer::before{
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 220px;
  background: linear-gradient(90deg, rgba(37,99,235,.06), transparent);
}

@media (max-width: 991.98px){
  #ecSidebar{
    box-shadow: 18px 0 48px rgba(2,6,23,.24);
  }
}

@media (max-width: 767.98px){
  .card,
  .modal-content,
  .table-responsive,
  .dropdown-menu,
  .alert,
  .auth-shell{
    box-shadow: var(--ec-plus-shadow-soft) !important;
  }

  .ec-page-head,
  .app-page-header{
    align-items: flex-start;
    flex-direction: column;
  }

  .ec-toolbar-stack > *{
    width: 100%;
  }

  .btn,
  .btn-group,
  .input-group,
  .form-select,
  .form-control{
    max-width: 100%;
  }
}