:root { --text: #1f2937; }
html, body { font-family: 'Inter', system-ui, -apple-system, sans-serif; color: var(--text); }
.card { border: none; }
.navbar-brand { letter-spacing: 0.2px; }

.hero { position: relative; background: linear-gradient(135deg, #0a58ca 0%, #224bbe 100%); }
.hero::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.hero .container { position: relative; }
.hero h1, .hero p { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }

@media (max-width: 576px) {
  .dash-controls { flex-direction: column; }
  .dash-input { width: 100% !important; max-width: none !important; }
  .dash-input-btn { width: 100%; }
}

@media (min-width: 577px) {
  .dash-input { width: auto; max-width: 16rem; }
}

.user-badge { max-width: 100%; display: inline-block; }
.user-name { display: inline-block; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
@media (min-width: 768px) { .user-name { max-width: 24rem; } }

.btn-responsive { width: 100%; }
@media (min-width: 576px) { .btn-responsive { width: auto; } }