:root{
    --tf-primary:#4f46e5;
    --tf-primary-dark:#3730a3;
    --tf-sidebar:#111827;
    --tf-sidebar-2:#1f2937;
    --tf-muted:#6b7280;
    --tf-bg:#f4f5fb;
}
*{box-sizing:border-box}
body{background:var(--tf-bg);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#1f2937}

/* ---------------- App shell ---------------- */
.app-shell{display:flex;min-height:100vh}
.app-sidebar{width:250px;background:linear-gradient(180deg,var(--tf-sidebar),var(--tf-sidebar-2));color:#cbd5e1;position:fixed;top:0;left:0;bottom:0;display:flex;flex-direction:column;z-index:1040;transition:transform .25s ease}
.app-main{flex:1;margin-left:250px;min-width:0;display:flex;flex-direction:column}
.app-content{padding:1.5rem;flex:1}
.app-footer{padding:1rem 1.5rem;font-size:.8rem;border-top:1px solid #e5e7eb}

.sidebar-brand{padding:1.15rem 1.25rem}
.sidebar-brand .brand-mark{width:34px;height:34px;border-radius:9px;background:var(--tf-primary);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;margin-right:.6rem}
.sidebar-brand .brand-text{color:#fff;font-weight:700;font-size:1.15rem}
.sidebar-role{padding:0 1.35rem .75rem;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:#64748b}
.sidebar-nav{padding:.25rem .75rem;overflow-y:auto;flex:1}
.sidebar-link{display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;color:#cbd5e1;text-decoration:none;border-radius:8px;font-size:.92rem;margin-bottom:2px;cursor:pointer}
.sidebar-link i{font-size:1.05rem;width:20px;text-align:center}
.sidebar-link:hover{background:rgba(255,255,255,.06);color:#fff}
.sidebar-link.active{background:var(--tf-primary);color:#fff;font-weight:600}
.sidebar-foot{padding:.75rem}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1035}
.sidebar-backdrop.show{display:block}

/* ---------------- Topbar ---------------- */
.app-topbar{position:sticky;top:0;z-index:1030;background:#fff;border-bottom:1px solid #e5e7eb;padding:.7rem 1.25rem;display:flex;align-items:center;gap:.75rem}
.topbar-title{font-size:1.15rem;font-weight:700;margin:0}
.avatar-circle{width:30px;height:30px;border-radius:50%;background:var(--tf-primary);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:.85rem}

/* ---------------- Cards / stats ---------------- */
.card{border:1px solid #eceef3;border-radius:12px}
.stat-card{border-radius:12px;background:#fff;padding:1.1rem 1.2rem;height:100%;border:1px solid #eceef3}
.stat-card .stat-icon{width:44px;height:44px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-size:1.3rem}
.stat-card .stat-value{font-size:1.7rem;font-weight:700;line-height:1}
.stat-card .stat-label{color:var(--tf-muted);font-size:.85rem}
.section-title{font-weight:700;font-size:1.05rem;margin-bottom:.25rem}

.table thead th{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--tf-muted);border-bottom-width:1px}
.table td{vertical-align:middle}
.badge{font-weight:600}
.empty-state{text-align:center;padding:2.5rem 1rem;color:var(--tf-muted)}
.empty-state i{font-size:2.5rem;opacity:.4}

.breadcrumb{--bs-breadcrumb-divider:'›';font-size:.85rem}
.btn-primary{background:var(--tf-primary);border-color:var(--tf-primary)}
.btn-primary:hover{background:var(--tf-primary-dark);border-color:var(--tf-primary-dark)}
.text-primary{color:var(--tf-primary)!important}
a{color:var(--tf-primary)}

/* ---------------- Auth ---------------- */
.auth-body{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#4f46e5,#7c3aed);padding:1.5rem}
.auth-wrap{width:100%;max-width:430px}
.auth-card{border-radius:16px}
.auth-logo{width:52px;height:52px;border-radius:12px;background:var(--tf-primary);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:1.5rem}

/* ---------------- Public ---------------- */
.public-nav{background:rgba(17,24,39,.95);backdrop-filter:blur(6px)}
.hero{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;padding:5rem 0 4.5rem}
.hero h1{font-weight:800;font-size:2.6rem}
.feature-icon{width:52px;height:52px;border-radius:12px;background:#eef2ff;color:var(--tf-primary);display:inline-flex;align-items:center;justify-content:center;font-size:1.5rem}
.how-step{width:44px;height:44px;border-radius:50%;background:var(--tf-primary);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.public-footer{background:var(--tf-sidebar);color:#fff}
.footer-link{display:block;color:#cbd5e1;text-decoration:none;padding:.15rem 0;font-size:.9rem}
.footer-link:hover{color:#fff}
.login-choice{border:1px solid #e5e7eb;border-radius:12px;padding:1.25rem;text-decoration:none;color:inherit;display:block;transition:.15s}
.login-choice:hover{border-color:var(--tf-primary);box-shadow:0 6px 20px rgba(79,70,229,.12)}

/* ---------------- Responsive ---------------- */
@media (max-width:991.98px){
    .app-sidebar{transform:translateX(-100%)}
    .app-sidebar.open{transform:translateX(0)}
    .app-main{margin-left:0}
}