:root { --tb-primary: #6D28D9; --tb-accent: #F97316; --tb-side: #120B2E; }
body { background: #F6F5FB; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.btn-primary { --bs-btn-bg: var(--tb-primary); --bs-btn-border-color: var(--tb-primary); --bs-btn-hover-bg: #5B21B6; --bs-btn-hover-border-color: #5B21B6; }
.tb-shell { display: flex; min-height: 100vh; }
.tb-side { width: 248px; flex-shrink: 0; background: var(--tb-side); color: #E9E6F8; padding: 20px 14px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; }
.tb-side .nav-link { color: #C9C3EA; border-radius: 10px; padding: 9px 12px; display: flex; gap: 10px; align-items: center; font-size: 14px; }
.tb-side .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.tb-side .nav-link.active { background: linear-gradient(135deg, var(--tb-primary), #8B5CF6); color: #fff; }
.tb-brand { display: flex; gap: 10px; align-items: center; color: #fff; text-decoration: none; font-weight: 700; margin: 0 6px 22px; line-height: 1.1; }
.tb-brand small { display: block; font-weight: 500; color: #A79FD6; font-size: 12px; }
.tb-logo { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; font-weight: 800; letter-spacing: -.5px; color: #fff;
  background: linear-gradient(135deg, var(--tb-primary) 0%, #EC4899 55%, var(--tb-accent) 100%); }
.tb-logo-lg { width: 56px; height: 56px; border-radius: 16px; font-size: 22px; }
.tb-me { margin-top: auto; padding: 12px; background: rgba(255,255,255,.05); border-radius: 12px; }
.tb-main { flex: 1; padding: 28px 32px; min-width: 0; }
.tb-auth { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.tb-auth-card { width: 100%; max-width: 420px; border: 0; border-radius: 18px; }
.tb-stat { border: 0; border-radius: 16px; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.tb-stat .num { font-size: 28px; font-weight: 700; }
.tb-stat .label { color: #6B7280; font-size: 13px; }
.card { border-radius: 14px; border-color: #ECEAF5; }
.table > :not(caption) > * > * { vertical-align: middle; }
.tb-thumb { width: 72px; height: 42px; object-fit: cover; border-radius: 8px; background: #eee; }
.tb-img-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.tb-img-grid figure { margin: 0; text-align: center; }
.tb-img-grid img { width: 160px; height: 90px; object-fit: cover; border-radius: 10px; display: block; margin-bottom: 4px; }
@media (max-width: 900px) { .tb-shell { flex-direction: column; } .tb-side { width: 100%; height: auto; position: static; } .tb-main { padding: 18px; } }