.topbtn{border-radius:.5rem;background-color:rgba(79,70,229,.5);padding:.25rem .6rem;font-size:.875rem}
.topbtn:hover{background-color:rgba(79,70,229,.7)}
.avatar{width:2rem;height:2rem;border-radius:9999px;background:#fff;display:flex;align-items:center;justify-content:center}
.side-title{color:#94a3b8;font-size:.75rem;text-transform:uppercase;padding:.5rem .75rem}
.side-link{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:.5rem;color:#334155}
.side-link:hover{background:#f1f5f9}
.side-link.active{background:#eef2ff;color:#3730a3}
.card{background:#fff;border:1px solid #e2e8f0;border-radius:.75rem;padding:1rem}
.card-title{font-weight:600;margin-bottom:.5rem;color:#0f172a}
.kpi .kpi-title{color:#6b7280;font-size:.8rem}
.kpi .kpi-value{font-size:1.6rem;font-weight:700}
.kpi .kpi-sub{font-size:.8rem;color:#94a3b8}
.kpi-up{color:#16a34a}
.kpi-down{color:#dc2626}
.row{display:flex;align-items:center;justify-content:space-between;padding:.35rem 0}
.bar{background:#f1f5f9;border-radius:9999px;height:8px;width:60%}
.bar>span{display:block;height:100%;background:#6366f1;border-radius:9999px}

/* static/style.css */
.input { @apply px-3 py-2 rounded-lg border border-slate-300 w-full outline-none focus:ring-2 focus:ring-indigo-200; }
.btn { @apply px-3 py-2 rounded-lg border border-slate-300 hover:bg-slate-100; }
.btn-primary { @apply px-3 py-2 rounded-lg bg-indigo-600 text-white hover:bg-indigo-700; }
.btn-xs { @apply px-2 py-1 text-xs rounded-lg border border-slate-300 hover:bg-slate-100; }
.table { @apply w-full text-sm; }
.table th { @apply text-left text-slate-600 font-semibold py-2 border-b; }
.table td { @apply py-2 border-b; }
.link { @apply text-indigo-600 hover:underline; }