:root, :root[data-bs-theme="dark"] {
  --sc-bg: #0b1020;
  --sc-bg-soft: #0e1428;
  --sc-card: #121730;
  --sc-border: #223055;
  --sc-text: #e7f0ff;
  --sc-muted: #9fb3d9;
  --sc-accent1: #5ad0ff;
  --sc-accent2: #7aa2ff;
}
html, body { min-height: 100%;background: radial-gradient(1400px 900px at 10% -20%, #182040 0%, rgba(24,32,64,0) 50%), var(--sc-bg); color: var(--sc-text); }
.topbar { background: #0e1426; border-bottom: 1px solid var(--sc-border); }
.top-search { background:#0f1833; border-color:#233053; color:var(--sc-text); }
.avatar { width:36px; height:36px; border-radius:50%; background: linear-gradient(135deg, var(--sc-accent1), var(--sc-accent2)); box-shadow: 0 0 0 2px #0f162e inset; }
.card { background: var(--sc-card); border-color: var(--sc-border); }
.card .form-control, .card .form-select { background:#0f1833; border-color:#26345c; color:var(--sc-text); }
.card .form-control:focus, .card .form-select:focus { box-shadow: 0 0 0 .2rem rgba(90,208,255,.18); border-color:#3aa9d1; }
.btn-primary { background-image: linear-gradient(135deg, var(--sc-accent1), var(--sc-accent2)); border: none; }
.btn-outline-secondary { border-color:#3b4768; color:#d5e4ff; }
.btn-outline-secondary:hover { background:#1a2240; color:#fff; }
.sc-leftnav, .sc-rightbar { position: sticky; top: 64px; }
.left-item { display:block; padding:.5rem .75rem; color:var(--sc-text); border-radius:.5rem; text-decoration:none; }
.left-item:hover { background:#111a36; }
.composer .btn { border-radius:.75rem; }
.notif-dot { position:absolute; top:4px; right:4px; width:8px; height:8px; background:var(--sc-accent1); border-radius:50%; display:none; }
.feed-card .actionbar .btn { --bs-btn-padding-y:.2rem; --bs-btn-padding-x:.5rem; --bs-btn-font-size:.85rem; }
.select2-container--default .select2-selection--multiple { background:#0f1833; border-color:#26345c; color:var(--sc-text); }
.select2-container--default .select2-results__option--selected { background:#132046; }
.select2-dropdown { background:#0f1833; color:var(--sc-text); border-color:#26345c; }


/* Reach chart: remove any debug/border/outline */
#reachChart,
#reachChartLeft,
#reachChart, #reachChartLeft, 
#reachChart canvas, #reachChartLeft canvas {
  outline: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* If the chart sits inside a card/div with a border, nuke that too */
.reach-card,
#reachLeftCard,
.reach-card .card,
#reachLeftCard .card {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

@keyframes imFlash {
  0%,100% { background: rgba(255,255,255,.02); }
  50%     { background: rgba(255,255,255,.15); }
}
.im-head.im-flash { animation: imFlash .9s linear 2; }
/* keep icon buttons uniform */
.navbar .btn.btn-sm.btn-outline-primary { line-height: 1; }
.navbar .btn.btn-sm.btn-outline-primary i { vertical-align: -2px; }


/* in app.css */
.notif-bell.text-warning i {
  animation: ring 1.1s ease-in-out 1;
}
@keyframes ring {
  0% { transform: rotate(0); }
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-12deg); }
  60% { transform: rotate(8deg); }
  80% { transform: rotate(-4deg); }
  100% { transform: rotate(0); }
}