body:not(.login-ok) .app{
  display:none!important;
}

.login-screen{
  min-height:100vh;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#eaf2fb,#f8fafc);
  padding:18px;
}

.login-card{
  width:min(420px,100%);
  background:#fff;
  border:1px solid #dbe3ef;
  border-radius:24px;
  box-shadow:0 18px 45px rgba(15,23,42,.14);
  padding:24px;
  display:grid;
  gap:14px;
}

.login-card h1{
  margin:0;
  color:#123a5c;
  font-size:28px;
}

.login-card p{
  margin:0;
  color:#64748b;
  font-size:14px;
}

.login-card label{
  font-size:12px;
  font-weight:800;
  color:#334155;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.login-card input{
  width:100%;
  border:1px solid #cbd5e1;
  border-radius:14px;
  padding:13px 14px;
  font-size:15px;
  box-sizing:border-box;
}

.login-card button{
  border:0;
  border-radius:14px;
  padding:14px;
  font-weight:900;
  cursor:pointer;
  color:#fff;
  background:#174f82;
}

.login-error{
  color:#b91c1c;
  font-size:13px;
  min-height:18px;
}

.user-pill{
  margin:10px 14px 0;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:12px;
  display:grid;
  gap:6px;
}

.user-pill button{
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.12);
  color:#fff;
  border-radius:10px;
  padding:7px;
  cursor:pointer;
  font-weight:800;
}

body:not(.login-ok) .drawer-tab,
body:not(.login-ok) #drawerTab,
body:not(.login-ok) .drawer-backdrop,
body:not(.login-ok) #drawerBackdrop,
body:not(.login-ok) .sidebar-toggle-clean,
body:not(.login-ok) #sidebarToggleClean,
body:not(.login-ok) .sidebar-tab-btn,
body:not(.login-ok) #sidebarTabBtn{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}