:root{
  --tt-bg: #0b1220;
  --tt-card: rgba(255,255,255,.04);
  --tt-border: rgba(255,255,255,.10);
  --tt-text: #e6edf3;
  --tt-muted: rgba(230,237,243,.70);
  --tt-accent: #7c3aed;
}

*{font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;}

body{
  background: radial-gradient(1200px 600px at 20% 0%, rgba(124,58,237,.18), transparent 60%),
              radial-gradient(1200px 600px at 80% 20%, rgba(59,130,246,.16), transparent 60%),
              var(--tt-bg);
  color: var(--tt-text);
}

.tt-navbar{
  background: rgba(11,18,32,.72);
  border-bottom: 1px solid var(--tt-border);
  backdrop-filter: blur(10px);
}

.tt-logo{
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(124,58,237,1), rgba(59,130,246,1));
  color: #fff;
  font-weight: 800;
  letter-spacing: .5px;
}

.tt-pill{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--tt-border);
  background: rgba(255,255,255,.04);
  color: var(--tt-muted);
  font-size: 12px;
}

.tt-card{
  border: 1px solid var(--tt-border);
  border-radius: 18px;
  background: var(--tt-card);
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
  padding: 22px;
}

.tt-alert{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
}

.form-control, .form-select{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--tt-text);
}
.form-control:focus, .form-select:focus{
  background: rgba(255,255,255,.08);
  border-color: rgba(124,58,237,.55);
  box-shadow: 0 0 0 .25rem rgba(124,58,237,.15);
  color: var(--tt-text);
}

.btn-primary{
  background: linear-gradient(135deg, rgba(124,58,237,1), rgba(59,130,246,1));
  border: 0;
}

.btn-outline-light{
  border-color: rgba(255,255,255,.22);
}

.table{
  color: var(--tt-text);
}
.table thead th{
  color: var(--tt-muted);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.table td, .table th{
  border-color: rgba(255,255,255,.10);
}

.badge.tt-badge{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--tt-text);
  font-weight: 600;
}

a{color: rgba(147,197,253,.95);}
a:hover{color: rgba(191,219,254,.98);}

small.muted{color: var(--tt-muted);}