:root{
  --bg:#0f141a;
  --top:#1b232c;
  --top2:#151c23;
  --side:#172029;
  --card:#222d39;
  --card2:#1c2530;
  --text:#e8f0fa;
  --muted:#a8b6c7;
  --border:#2b3a4a;

  --green:#2fb35a;
  --blue:#2f7bd6;
  --amber:#d6a12f;
  --red:#d64a4a;
  --grey:#7e8b9b;
}
html,body{height:100%}
body{
  background: linear-gradient(180deg,var(--bg),#0b0f14);
  color: var(--text);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial;
}
a{ color:#8fc7ff; text-decoration:none }
a:hover{ text-decoration:underline }
.navbar{
  background: linear-gradient(180deg,var(--top),var(--top2)) !important;
  border-bottom:1px solid var(--border);
  padding: 10px 16px;
}
.brand{
  font-weight:800;
  letter-spacing:.2px;
  display:flex;
  align-items:center;
  gap:10px;
}
.brand .fs{
  width:34px;height:34px;border-radius:10px;
  background: linear-gradient(135deg,#49db74,#1a5f33);
  border:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  color:#06140b;
  font-weight:900;
}
.top-tabs .nav-link{
  color: rgba(232,240,250,.85) !important;
  border-radius: 10px;
  padding: 8px 12px !important;
  margin-right: 6px;
}
.top-tabs .nav-link.active{
  background: rgba(47,179,90,.18);
  border: 1px solid rgba(47,179,90,.28);
  color: #dfffe9 !important;
}
.sidebar{
  background: linear-gradient(180deg,var(--side),#121920);
  border:1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
}
.side-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(43,58,74,.75);
  color: rgba(232,240,250,.9);
  margin-bottom: 8px;
  background: rgba(255,255,255,.02);
}
.side-item:hover{ background: rgba(255,255,255,.05); text-decoration:none; }
.side-item.active{
  background: rgba(47,179,90,.16);
  border-color: rgba(47,179,90,.25);
}
.card{
  background: linear-gradient(180deg,var(--card),var(--card2));
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--text);
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}
.card .card-header{
  background: rgba(0,0,0,.10);
  border-bottom: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
}
.form-control,.form-select,.form-check-input{
  background: rgba(10,14,19,.75);
  border:1px solid var(--border);
  color: var(--text);
  border-radius: 12px;
}
.form-control:focus,.form-select:focus{
  box-shadow: 0 0 0 .2rem rgba(47,179,90,.18);
  border-color: rgba(47,179,90,.45);
}
.btn{ border-radius: 12px !important; font-weight: 700; }
.btn-preview{ background: var(--blue) !important; border-color: var(--blue) !important; color:#06121f !important; }
.btn-use{ background: var(--green) !important; border-color: var(--green) !important; color:#06140b !important; }
.btn-edit{ background: rgba(255,255,255,.10) !important; border-color: rgba(255,255,255,.16) !important; color: rgba(232,240,250,.95) !important; }
.modal-content{
  background: #1a2330;
  border:1px solid var(--border);
  border-radius: 16px;
  color: var(--text);
}
.btn-close{ filter: invert(1); opacity:.8; }
.small-muted{ color: var(--muted); font-size: 13px; }
.template-card{ overflow:hidden; }
.template-card .img{
  height: 150px;
  background-size: cover;
  background-position: center;
  border-bottom:1px solid var(--border);
}
.template-card .actions{ display:flex; gap:10px; flex-wrap:wrap; }
.badge-pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  border:1px solid rgba(255,255,255,.12);
}
.badge-low{ background: rgba(126,139,155,.15); color:#d7e0ea; border-color: rgba(126,139,155,.25); }
.badge-med{ background: rgba(214,161,47,.15); color:#ffe7b0; border-color: rgba(214,161,47,.30); }
.badge-high{ background: rgba(47,179,90,.15); color:#d6ffe5; border-color: rgba(47,179,90,.30); }

.badge-todo{ background: rgba(47,123,214,.15); color:#d6ebff; border-color: rgba(47,123,214,.30); }
.badge-doing{ background: rgba(214,161,47,.15); color:#ffe7b0; border-color: rgba(214,161,47,.30); }
.badge-done{ background: rgba(47,179,90,.15); color:#d6ffe5; border-color: rgba(47,179,90,.30); }
.badge-blocked{ background: rgba(214,74,74,.15); color:#ffd1d1; border-color: rgba(214,74,74,.30); }
.badge-skipped{ background: rgba(126,139,155,.12); color:#d7e0ea; border-color: rgba(126,139,155,.25); }

.autosave-dot{
  width:10px;height:10px;border-radius:999px;
  display:inline-block;
  background: rgba(126,139,155,.6);
  border:1px solid rgba(255,255,255,.12);
}
.autosave-dot.saving{ background: rgba(214,161,47,.9); }
.autosave-dot.saved{ background: rgba(47,179,90,.9); }
.autosave-dot.error{ background: rgba(214,74,74,.9); }