/* High-fidelity sidebar nav interactions */
:root{
  --radius: 16px;
  --radius-sm: 12px;
  --border: #e5e7eb;
  --ring: #6366f1;
  --hover: #f3f4f6;
  --active-bg: #eef2ff;
  --active-stroke: #c7d2fe;
}

.card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 10px 30px rgba(17,24,39,.06); }
.btn-primary{ background:#4f46e5; color:#fff; transition:box-shadow .2s ease, transform .06s ease; }
.btn-primary:hover{ background:#4338ca; box-shadow:0 8px 24px rgba(79,70,229,.25); }
.btn-primary:active{ transform:translateY(1px) scale(.99); }
.btn-ghost{ background:#fff; border:1px solid var(--border); transition:background .2s ease, transform .06s ease; }
.btn-ghost:hover{ background:#f9fafb; }
.btn-ghost:active{ transform:translateY(1px) scale(.99); }

/* Sidebar navlink */
.navlink{
  position: relative;
  border-radius: 12px;
  color: #111827;
  transition: background .18s ease, box-shadow .18s ease, color .18s ease, transform .06s ease;
  outline: none;
}
.navlink:hover{ background: var(--hover); }
.navlink:active{ transform: translateY(0.5px); }
.navlink.active{
  background: var(--active-bg);
  box-shadow: inset 0 0 0 1px var(--active-stroke);
}
/* Left indicator bar */
.navlink::before{
  content:''; position:absolute; left:-8px; top:10px; bottom:10px; width:3px;
  background:#4f46e5; border-radius:3px; opacity:0; transform:scaleY(.4); transform-origin:top;
  transition: opacity .18s ease, transform .18s ease;
}
.navlink.active::before{ opacity:1; transform:scaleY(1); }
/* Focus-visible ring */
.navlink:focus-visible{
  box-shadow: 0 0 0 2px rgba(99,102,241,.2), inset 0 0 0 1px var(--active-stroke);
  background: var(--active-bg);
}
/* Icon chip harmonize */
.i{ display:inline-grid; place-items:center; width:20px; height:20px;
    background:#f3f4ff; border:1px solid #e0e7ff; border-radius:8px; color:#4338ca; font-size:12px; }

/* Tabs */
.tab{
  padding:.5rem .75rem; border:1px solid var(--border); background:#fff; border-radius:10px; font-size:14px;
  transition: box-shadow .18s ease, background .18s ease;
}
.tab:hover{ background:#fafafa; }
.tab.active{ border-color:#c7d2fe; box-shadow:0 0 0 2px rgba(99,102,241,.15) inset; }

/* Topbar animation helpers */
#topbar.start { transform:scaleX(0.15); }
#topbar.mid   { transform:scaleX(0.6); }
#topbar.end   { transform:scaleX(1); }