:root{
  --bg0:#071021;
  --bg1:#0b1a33;
  --card:#0f2347;
  --soft:#132a52;
  --text:#eaf1ff;
  --muted:rgba(234,241,255,.65);
  --accent:#3aa0ff;
  --accent2:#f2c14e;
  --radius:18px;
}
html,body{height:100%}
.bg-app{
  background: radial-gradient(1200px 600px at 50% 10%, rgba(58,160,255,.18), transparent 60%),
              radial-gradient(900px 500px at 90% 20%, rgba(242,193,78,.16), transparent 55%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  color:var(--text);
}
.app-shell{min-height:100vh; display:flex; flex-direction:column;}
.app-topbar{position:sticky; top:0; z-index:1030; background:rgba(7,16,33,.75); backdrop-filter: blur(12px); border-bottom:1px solid rgba(255,255,255,.06);}
.brand{display:flex; align-items:center; gap:10px;}
.brand-dot{width:14px;height:14px;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent2)); box-shadow:0 0 0 6px rgba(58,160,255,.10);}
.brand-name{font-weight:700; line-height:1;}
.brand-sub{font-size:12px; color:var(--muted); margin-top:2px; letter-spacing:.12em; text-transform:uppercase;}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.12); color:var(--text);}
.btn-ghost:hover{border-color:rgba(255,255,255,.25)}
.app-body{display:flex; flex:1; min-height:0;}
.app-sidebar{width:280px; padding:16px; border-right:1px solid rgba(255,255,255,.06); background:rgba(7,16,33,.35); backdrop-filter: blur(10px);}
.app-content{flex:1; min-width:0;}
.card-app{
  background: linear-gradient(180deg, rgba(15,35,71,.9), rgba(15,35,71,.65));
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
}
.alert-soft{
  background: rgba(58,160,255,.12);
  border:1px solid rgba(58,160,255,.25);
  color: var(--text);
  border-radius: 14px;
}
.app-navlink{
  display:flex; align-items:center; gap:10px;
  color: rgba(234,241,255,.82);
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid transparent;
  background: transparent;
}
.app-navlink i{font-size:18px;}
.app-navlink:hover{
  color: var(--text);
  background: rgba(58,160,255,.08);
  border-color: rgba(58,160,255,.18);
}
.form-control, .form-select{
  background: rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  color: var(--text) !important;
  border-radius: 14px !important;
}
.form-control::placeholder{color:rgba(234,241,255,.45)}
.form-label{color: rgba(234,241,255,.75)}
.btn-primary{
  background: linear-gradient(135deg, var(--accent), #1d6dff);
  border:0;
  border-radius: 14px;
  box-shadow: 0 14px 28px rgba(58,160,255,.22);
}
.btn-primary:hover{filter:brightness(1.05)}
.btn-outline-light{border-radius:14px}
.badge-soft{
  background: rgba(242,193,78,.14);
  border:1px solid rgba(242,193,78,.28);
  color: #ffe7a6;
  border-radius: 999px;
  padding:.45rem .75rem;
}

/* size helper (used on dashboard header) */
.badge-soft--sm{
  padding: .34rem .60rem;
  font-size: .85rem;
}

/* Dashboard: reduce density on small screens (mobile) */
@media (max-width: 576px){
  .card-app{ border-radius: 18px; }
  .card-app .h4, .card-app h4{ font-size: 1.05rem; }
  .card-app p, .card-app .text-white-50{ font-size: .92rem; }
  .badge-soft{ font-size: .85rem; }
}
.app-bottomnav{
  position:sticky; bottom:0; z-index:1030;
  display:flex; justify-content:space-around;
  background: rgba(7,16,33,.78);
  backdrop-filter: blur(12px);
  border-top:1px solid rgba(255,255,255,.06);
  padding:10px 8px;
}
.bn-item{
  color: rgba(234,241,255,.8);
  text-decoration:none;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  font-size:12px;
  padding:6px 10px;
  border-radius:14px;
}
.bn-item i{font-size:18px}
.bn-item:hover{color:var(--text); background: rgba(58,160,255,.10)}
.stepper{
  display:flex; gap:8px; align-items:center;
}
.step{
  flex:1;
  height:8px;
  border-radius:999px;
  background: rgba(255,255,255,.10);
  overflow:hidden;
}
.step > span{
  display:block; height:100%;
  width:0%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  transition: width .35s ease;
}


/* Logo */
.brand-logo{width:64px;height:64px;object-fit:contain;border-radius:14px;box-shadow:0 10px 26px rgba(0,0,0,.45);} 
@media (max-width: 576px){.brand-logo{width:54px;height:54px;}}

.app-sidebar a{ text-decoration:none; }

.app-navlink span{line-height:1.1;}

.suggest-list{position:relative;margin-top:6px;background:rgba(10,20,35,.92);border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden}
.suggest-item{display:block;width:100%;text-align:left;padding:10px 12px;background:transparent;border:0;color:#fff;font-size:14px}
.suggest-item:hover{background:rgba(255,255,255,.06)}


/* --- Dark text fix --- */
:root{
  --bs-body-color: var(--text);
  --bs-body-color-rgb: 234,241,255;
}
.app-content{ color: var(--text); }
.card, .card *{ color: inherit; }
.card-app{ color: var(--text); }
.card-app .text-muted{ color: var(--muted) !important; }
.card-app .form-text{ color: var(--muted) !important; }
.table{ color: var(--text); }