/* login-g.css: sign-in option G on the real login page (owner picked it, phone task 292, 2026-10-29).
 * Compact, ChatGPT-mobile style: pulsing logo + "Try it first" on top, then Google, Apple, email, password + forgot,
 * Continue, and the account switch at the bottom. Restyles login.html's existing markup (all the sign-in logic and
 * element ids stay as they are), so it loads last and wins with specificity rather than rewriting the page.
 */
/* G is a dark design in both themes: the phone light theme (cf-theme.js) must not repaint this page */
html, html[data-theme], body.lyrc-app, body { background: #0A0A0D !important; color: #fff !important; color-scheme: dark; }
.cf-shell, .cf-body, html[data-theme] .cf-shell, html[data-theme] .cf-body, html[data-theme] .cf-card { background: transparent !important; }
.cf-bg, .cf-head, .cf-foot, .cf-card-brand, #flowSubtitle, #signupBenefits, #nameFieldGroup, .cf-terms { display: none !important; }

.cf-shell { min-height: 100dvh; display: flex !important; flex-direction: column; }
.cf-shell[style*="display:none"] { display: none !important; }
.cf-body { flex: 1; display: flex; align-items: stretch; justify-content: center; padding: calc(env(safe-area-inset-top, 0px) + 10px) max(20px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 12px) max(20px, env(safe-area-inset-left, 0px)) !important; }
.cf-card { width: 100% !important; max-width: 360px !important; margin: 0 auto !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important;
  display: flex !important; flex-direction: column; gap: 9px !important; }

/* top: beat-pulsing mark + try-first */
.cfg-hero { flex: 1; min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.cfg-mark { position: relative; width: 64px; height: 64px; }
.cfg-mark img { position: relative; width: 64px; height: 64px; border-radius: 18px; animation: cfg-thump .94s cubic-bezier(.2,.9,.3,1) infinite; }
.cfg-mark::before, .cfg-mark::after { content: ""; position: absolute; inset: 0; border-radius: 20px; border: 2px solid rgba(59,130,246,.5); animation: cfg-ring .94s ease-out infinite; }
.cfg-mark::after { animation-delay: .47s; }
@keyframes cfg-thump { 0%,100% { transform: scale(1); } 12% { transform: scale(1.07); } }
@keyframes cfg-ring { from { transform: scale(1); opacity: .85; } to { transform: scale(1.8); opacity: 0; } }
.cfg-try { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 6px; border-radius: 99px; border: 1px solid #2A2C35; background: #16171D; color: #fff !important;
  font: 600 13.5px/1 Inter, system-ui, sans-serif; text-decoration: none !important; }
.cfg-try i { width: 24px; height: 24px; border-radius: 50%; background: #3B82F6; display: grid; place-items: center; }
.cfg-try i svg { width: 11px; height: 11px; fill: #fff; margin-left: 2px; }

#flowTitle, .cf-title { font-size: 22px !important; font-weight: 700 !important; letter-spacing: -.02em !important; text-align: center !important; margin: 0 0 7px !important; color: #fff !important; }

/* provider buttons */
#googleSignInBtn, .cf-google, .cfg-apple { width: 100% !important; height: 48px !important; border-radius: 12px !important; display: flex !important; align-items: center; justify-content: center; gap: 9px;
  font: 600 15px/1 Inter, system-ui, sans-serif !important; cursor: pointer; margin: 0 !important; box-shadow: none !important; }
#googleSignInBtn, .cf-google { background: #fff !important; color: #111 !important; border: 1px solid #fff !important; }
.cfg-apple { background: #16171D !important; color: #fff !important; border: 1px solid #2A2C35 !important; }
.cfg-apple svg { width: 18px; height: 18px; fill: #fff; }
.cfg-apple[hidden] { display: none !important; }
.cf-or { display: flex !important; align-items: center; gap: 10px; color: rgba(255,255,255,.42) !important; font-size: 12px !important; margin: 3px 0 !important; background: none !important; }
.cf-or::before, .cf-or::after { content: "" !important; flex: 1; height: 1px; background: #2A2C35 !important; position: static !important; width: auto !important; }

/* the form: placeholders carry the labels */
.cf-form { display: flex !important; flex-direction: column; gap: 9px !important; margin: 0 !important; }
.cf-field { font-size: 0 !important; color: transparent !important; gap: 0 !important; margin: 0 !important; display: block !important; }
.cf-field[hidden] { display: none !important; }
.cf-field input, .cf-pw-wrap input { width: 100% !important; height: 48px !important; border-radius: 12px !important; border: 1px solid #2A2C35 !important; background: transparent !important; color: #fff !important;
  padding: 0 14px !important; font: 16px Inter, system-ui, sans-serif !important; box-shadow: none !important; }
.cf-field input:focus { border-color: #3B82F6 !important; }
.cf-field input::placeholder { color: rgba(255,255,255,.42) !important; }
.cf-pw-wrap { display: block; position: relative; }
.cf-pw-wrap input { padding-right: 64px !important; }
.cf-pw-eye { position: absolute !important; right: 6px !important; top: 50% !important; transform: translateY(-50%) !important; height: 36px !important; font-size: 13px !important; color: rgba(255,255,255,.66) !important; background: none !important; border: 0 !important; }
.cf-field-err { font-size: 12.5px !important; color: #F87171 !important; display: block; margin-top: 4px; }
.cf-field-err:empty { display: none; }
.cf-forgot-row { display: flex !important; justify-content: flex-end; margin: -2px 0 0 !important; min-height: 0; }
.cf-forgot-btn { font-size: 13px !important; color: rgba(255,255,255,.66) !important; background: none !important; border: 0 !important; padding: 4px 0 !important; }
.cf-cta, #submitBtn { height: 48px !important; border-radius: 12px !important; background: #3B82F6 !important; color: #fff !important; font: 600 15px/1 Inter, system-ui, sans-serif !important; box-shadow: none !important; margin: 0 !important; }
.cf-err, .cf-ok { font-size: 13px !important; text-align: center; margin: 0 !important; }
.cf-err:empty, .cf-ok:empty { display: none !important; }
.cf-inapp-note { font-size: 12.5px !important; margin: 0 !important; }

/* bottom: the account switch */
.cf-switch-line, #switchLine { margin: 14px 0 2px !important; text-align: center; font-size: 13.5px !important; color: rgba(255,255,255,.66) !important; }
.cf-switch-btn, #inlineSwitchBtn { color: #fff !important; font-weight: 600 !important; text-decoration: underline; text-underline-offset: 3px; background: none !important; border: 0 !important; }
.cfg-fine { text-align: center; font-size: 11px; color: rgba(255,255,255,.4); margin: 0; }
.cfg-fine a { color: rgba(255,255,255,.4); }

@media (min-height: 760px) { .cfg-hero { min-height: 190px; } }
@media (prefers-reduced-motion: reduce) { .cfg-mark img, .cfg-mark::before, .cfg-mark::after { animation: none; } }