* { box-sizing: border-box; }
body { font-family: 'Inter', 'Segoe UI', sans-serif; }
.mud-nav-link { border-radius: 6px !important; margin: 1px 4px !important; font-size: 13px !important; color: rgba(139,148,158,0.9) !important; }
.mud-nav-link:hover { background: rgba(56,139,253,0.1) !important; color: #e6edf3 !important; }
.mud-nav-link.active { background: rgba(56,139,253,0.15) !important; color: #58a6ff !important; }
.mud-paper { border-radius: 10px !important; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0d1117; }
::-webkit-scrollbar-thumb { background: #30363d; border-radius: 3px; }

/* ── Responsive: AppBar en celulares angostos ────────────────
   El título "Command Center" + chip de ambiente + spacer + badge +
   avatar no caben todos en una fila de ~360-400px -- se oculta el
   texto del título (queda el chip de ambiente, que es lo importante
   para no confundir producción con demo) y se recorta el padding
   lateral del contenedor principal para aprovechar el ancho real. */
@media (max-width: 420px) {
  .appbar-title { display: none; }
}
@media (max-width: 599px) {
  .mud-container { padding-left: 12px !important; padding-right: 12px !important; }
}

/* ── Auth Layout ──────────────────────────────────────────── */
.auth-wrapper {
    min-height: 100vh;
    background: #0d1117;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    position: relative;
}
.auth-card {
    background: #161b22;
    border: 0.5px solid #30363d;
    border-radius: 14px;
    padding: 36px 32px;
    width: 100%;
    max-width: 380px;
    position: relative;
    z-index: 1;
}
.auth-logo { text-align: center; margin-bottom: 28px; }
.auth-logo-box {
    width: 44px; height: 44px;
    background: linear-gradient(135deg, #1f6feb, #388bfd);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 20px; color: white;
    margin: 0 auto 12px;
}
.auth-title { color: #e6edf3; font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.auth-sub   { color: #6e7681; font-size: 12px; margin: 0; }

.auth-field { margin-bottom: 16px; }
.auth-label { font-size: 12px; color: #8b949e; display: block; margin-bottom: 6px; }

.auth-avatar { text-align: center; margin-bottom: 20px; }
.auth-avatar-circle {
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg, #1f6feb, #a371f7);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 600; color: white;
    margin: 0 auto 8px;
}
.auth-avatar-name  { color: #e6edf3; font-size: 14px; font-weight: 500; }
.auth-avatar-email { color: #6e7681; font-size: 11px; margin-top: 2px; }

.auth-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 10px;
    color: #484f58;
}
.auth-bg-decoration {
    position: absolute;
    width: 400px; height: 400px;
    background: radial-gradient(circle, #1f6feb08, transparent 70%);
    border-radius: 50%;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}