:root{
  --bg: #0A0A0A;
  --panel: rgba(15,15,15,0.8);
  --panel2: #0D0D0D;
  --border: rgba(255,255,255,0.1);
  --shadow: rgba(255,255,255,0.06);
  --teal: #06333B;
  --slate: #526687;
  --radius: 12px;
  --transition: 0.25s ease;
}

html,body{height:100%;}
body{
  margin:0;
  background: radial-gradient(1200px 600px at 20% 0%, rgba(6,51,59,0.25), transparent 60%),
              radial-gradient(900px 500px at 80% 20%, rgba(82,102,135,0.18), transparent 55%),
              var(--bg);
  color:#EDEDED;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.card-glass{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(10px);
}

.btn-brand{
  background: #526687;
  color:#fff;
  border-radius: var(--radius);
  padding: 10px 14px;
  transition: transform var(--transition), filter var(--transition), background var(--transition);
}
.btn-brand:hover{
    filter: brightness(1.07); 
    transform: translateY(-1px);
    background: #06333B;
}

.btn-outline-brand{
  background: transparent;
  border: 2px solid rgba(82,102,135,0.6);
  color:#EDEDED;
  border-radius: var(--radius);
  padding: 10px 14px;
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
}
.btn-outline-brand:hover{background: rgba(82,102,135,0.12); border-color: rgba(82,102,135,0.9); transform: translateY(-1px);}

.form-control,
.form-select{
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.12);
  color: #EDEDED;
  border-radius: var(--radius);
}
.form-control:focus,
.form-select:focus{
  border-color: rgba(82,102,135,0.8);
  box-shadow: 0 0 0 0.2rem rgba(82,102,135,0.18);
  background-color: rgba(0,0,0,0.3) !important;
  color: #EDEDED;
}

.text-muted-soft{color: rgba(255,255,255,0.65);}

.login-bg{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 28px 16px;
}

.login-card{
  width: 430px;
}

.navbar-title{
  font-weight: 650;
  font-size: 18px;
}

.sidebar{
  background: var(--panel2);
  border-right: 1px solid var(--border);
  height: calc(100vh - 0px);
  position: fixed;
  top: 0;
  left: 0;
  padding: 16px 12px;
  transition: width var(--transition), padding var(--transition);
  width: 250px;
  overflow: hidden;
}

.sidebar.collapsed{
  width: 70px;
  padding: 16px 8px;
}

.sidebar .brand-word{
  transition: opacity var(--transition), width var(--transition);
  white-space: nowrap;
}
.sidebar.collapsed .brand-word{opacity: 0; width:0; overflow:hidden;}

.menu-item{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 13px;
  color: rgba(255,255,255,0.85);
  text-decoration:none;
  border: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.menu-item:hover{background: rgba(255,255,255,0.03); transform: translateY(-1px);}
.menu-item .label{transition: opacity var(--transition);}
.sidebar.collapsed .menu-item .label{opacity:0; pointer-events:none;}

.menu-item.active{
  background: rgba(6,51,59,0.30);
  border-color: rgba(6,51,59,0.65);
  box-shadow: inset 6px 0 0 rgba(6,51,59,1);
}

.shell{
  display:flex;
}

.topbar{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 64px;
  padding-left: 250px;
  transition: padding-left var(--transition);
  z-index: 10;
}
.topbar.collapsed{padding-left: 70px;}

.content{
  padding-top: 84px;
  padding-left: 250px;
  padding-right: 20px;
  width: 100%;
  transition: padding-left var(--transition);
}
.content.collapsed{padding-left: 70px;}

.avatar{
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  object-fit: cover;
}

.dropdown-blur{
  position:absolute;
  right: 0;
  top: 56px;
  width: 260px;
  background: rgba(10,10,10,0.72);
  border: 1px solid var(--border);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  padding: 12px;
}

.mini-badge{
  font-size: 12px;
  background: rgba(82,102,135,0.95);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  padding: 2px 8px;
}

.stat-icon{
  width: 42px; height: 42px;
  border-radius: 13px;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(82,102,135,0.12);
}

.toast-inline{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.35);
  padding: 10px 12px;
}