/* login.css - /login only (templates/login.html): the Google sign-in block, the "open on localhost" note and the
   folded fallback password form. On top of base.css -> desk.css -> t247.css (same --b-* tokens, HUD labels).
   CSP: style-src 'self' - every style lives here, no style attributes in the HTML. */

.dn-google { display: grid; gap: 10px; padding: 12px 20px 6px; }
.dn-phu { margin: 0; color: var(--b-chu2); font: 12.5px/1.45 var(--f-ui); }

/* Google's own button look (white, logo left) - recognisable, like the user's other app */
.dn-nut-google {
  width: 100%; height: 42px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 16px;
  font: 600 14px/1 var(--f-ui); color: #1f1f1f; background: #fff; border: 1px solid #dadce0; border-radius: 4px; cursor: pointer;
  transition: box-shadow .15s, opacity .15s;
}
.dn-nut-google svg { width: 20px; height: 20px; flex: 0 0 auto; }
.dn-nut-google:hover:not(:disabled) { box-shadow: 0 0 0 3px rgba(95, 211, 255, .35), 0 0 14px -4px rgba(41, 182, 255, .9); }
.dn-nut-google:focus-visible { outline: 1px dashed var(--b-cyan2); outline-offset: 3px; }
.dn-nut-google:disabled { opacity: .6; cursor: progress; }

.dn-tt { min-height: 18px; margin: 0; color: var(--b-chu2); font: 12.5px/1.45 var(--f-ui); }
.dn-tt.loi { color: #ffb3ae; }
.dn-tt.ok { color: var(--b-mua); }

.dn-localhost { display: grid; gap: 10px; margin: 12px 20px 6px; padding: 10px 12px; border-left: 2px solid var(--b-canh);
  background: rgba(227, 179, 65, .1); color: #ffe2a0; font: 12.5px/1.5 var(--f-ui); }
.dn-localhost p { margin: 0; }
.dn-localhost b { color: #fff3d0; }
.dn-localhost code { color: #fff; }
.dn-nut-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; overflow-wrap: anywhere; }

.dn-matkhau { margin: 8px 20px 0; border-top: 1px solid rgba(70, 185, 255, .14); }
.dn-matkhau > summary { padding: 10px 0 6px; cursor: pointer; color: var(--b-chu3); font: 600 11px/1.2 var(--f-hud); letter-spacing: .1em;
  text-transform: uppercase; }
.dn-matkhau > summary:hover { color: var(--b-chu); }
.dn-matkhau > summary:focus-visible { outline: 1px dashed var(--b-cyan2); outline-offset: 2px; }
.hop .dn-matkhau form { padding: 6px 0 14px; }
.dn-khoi { margin: 10px 20px 0; }

@media (max-width: 380px) {
  .dn-google { padding: 10px 14px 4px; }
  .dn-localhost, .dn-matkhau, .dn-khoi { margin-left: 14px; margin-right: 14px; }
}