/* Sign-in screen: always light, in the bilvo.io homepage style (Farhan 2026-10-26: "The login screen also should be light…
   Use same style from our homepage"). Scoped to the signed-out view (.view.sign) + the "Signing you in…" screen, so the
   builder's own Light / Dark / System setting is untouched. Loaded after app.css (index.html). */

.view.sign, .signing {
  color-scheme: light;
  --bg: #ffffff; --surface: #fff; --surface-2: #eeefed; --line: #e2e2e7; --line-2: #b5b6b4; --hair: rgba(14,18,48,.08);
  --ink: #0e1230; --ink-2: #4a4d64; --ink-3: #62657a; --ink-4: #8b8e9c; --on-accent: #fff;
  --fg-rgb: 14, 18, 48;
  --l0: #ffffff; --l1: #fff; --l2: #f5f6f4; --l3: #f1f2f1; --l4: #e7e8e6; --l5: #f3f4f6; --l6: #d4d4d8; --l2-rgb: 245, 246, 244;
  --glass: rgba(255,255,255,.92); --glass-2: rgba(255,255,255,.88); --sh: .18;
  --hover: #f7f7f8; --sel: rgba(30,59,255,.10); --tab-on: #fff;
  --accent: #1e3bff; --accent-2: #1e3bff; --accent-3: #1e3bff; --accent-4: #1e3bff; --accent-rgb: 30, 59, 255; --grad-ui: #1e3bff;
  --cta: #1e3bff; --on-cta: #fff;
  --ok: #15803d; --err: #dc2626;
  background: #ffffff;
  color: var(--ink);
}
/* only while the sign-in view is on screen: mode-out also covers the dashboard, New site and Settings, which follow the theme (dark New site sat on white, 2026-10-26) */
body.mode-out:has(.view.sign:not([hidden])), body.mode-out:has(.signing:not([hidden])) { background: #ffffff; }

/* left: logo, headline with the yellow marker, form */
.view.sign .gs-logo { content: url("logo-dark.svg"); }
.view.sign .beta { border-color: rgba(30,59,255,.35); background: #eef1ff; color: #1e3bff !important; }
.view.sign .sign-box h1 { color: #0e1230; font-weight: 600; letter-spacing: -.03em; }
.view.sign .hl {
  background: linear-gradient(transparent 66%, #ffd60a 66%, #ffd60a 92%, transparent 92%) no-repeat;
  padding: 0 .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.view.sign .sign-box .lead { color: #4a4d64; }
.view.sign .sign-form label { color: #0e1230; font-weight: 500; }
.view.sign .sign-form input { background: #fff; border-color: #e2e2e7; border-radius: 999px; padding: 0 18px; }
.view.sign .sign-form input::placeholder { color: #8b8e9c; }
.view.sign .sign-form input:focus { border-color: #1e3bff; box-shadow: 0 0 0 3px rgba(30,59,255,.14); }
.view.sign .btn.grad { background: #1e3bff; color: #fff; border-radius: 999px; }
.view.sign .btn.grad:hover { opacity: 1; background: #1832e0; }
.view.sign .sign-google { background: #fff; color: #0e1230; box-shadow: inset 0 0 0 1px #e2e2e7; border-radius: 999px; }
.view.sign .sign-google:hover { background: #f7f7f8; }
.view.sign .sign-sent { border-color: #e8e8ec; background: #fff; border-radius: 16px; }
.view.sign .sign-mail { background: #eef1ff; color: #1e3bff; }

/* right: the product tour on the homepage's soft rounded stage, no glow, light builder chrome */
.view.sign .sign-r { background: #ffffff; border-left: 0; }
.view.sign .sign-r .demo { padding: 40px; border-radius: 24px; background: #f5f6f4; }
.view.sign .demo::before { display: none; }
.view.sign .demo-win {
  background: #fff; border: 1px solid #e8e8ec; border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16,17,20,.04), 0 18px 40px -16px rgba(16,17,20,.10);
}
.view.sign .demo-bar { background: #fbfbfc; border-bottom-color: #e8e8ec; }
.view.sign .demo-bar i { background: #d4d4d8; }
.view.sign .demo-bar span { background: #f1f2f1; color: #62657a; }
.view.sign .demo-chat { background: #fbfbfc; border-right-color: #e8e8ec; }
.view.sign .demo-msg.you { background: #f1f2f4; color: #0e1230; }
.view.sign .demo-caret { background: #1e3bff; }
.view.sign .demo-dot { background: #1e3bff; }
.view.sign .ds-tools { background: #fff; border-bottom: 1px solid #e8e8ec; color: #4a4d64; }
.view.sign .ds-seg { background: #f1f2f1; }
.view.sign .ds-seg b { color: #62657a; }
.view.sign .ds-seg b.on { background: #fff; color: #0e1230; box-shadow: 0 0 0 1px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.06); }
.view.sign .ds-pub { background: #1e3bff; color: #fff; }
.view.sign .ds-btn.press { background: #f1f2f1; }
.view.sign .ds-panel, .view.sign .ds-seo {
  background: #fff; color: #0e1230; box-shadow: 0 0 0 1px #e8e8ec, 0 2cqw 4cqw -1cqw rgba(16,17,20,.12);
}
.view.sign .ds-panel p, .view.sign .ds-seo-h i { color: #62657a; }
.view.sign .ds-panel span { background: #f5f6f4; }
.view.sign .ds-ring circle { stroke: #ececf0; }
.view.sign .ds-ring circle.v { stroke: #15803d; }
.view.sign .ds-seo li { color: #8b8e9c; }
.view.sign .ds-seo li svg { background: #ececf0; }
.view.sign .ds-seo li.ok { color: #0e1230; }
.view.sign .ds-seo li.ok svg { background: #e9f7ee; color: #15803d; }
/* builder blue in the tour = brand blue */
.view.sign .ds-h.sel { outline-color: #1e3bff; }
.view.sign .ds-h.typing::after, .view.sign .ds-add i, .view.sign .ds-add span, .view.sign .ds-sel span { background: #1e3bff; }
.view.sign .ds-sel { border-color: #1e3bff; }
.view.sign .ds-panel .t1, .view.sign .ds-panel .t2.on { border-color: #1e3bff; }
.view.sign .ds-ask { box-shadow: 0 0 0 1px #e8e8ec, 0 2cqw 4cqw -1cqw rgba(16,17,20,.14); }
.view.sign .ds-ask p svg { color: #1e3bff; }
.view.sign .ds-ask div b { background: #1e3bff; }
.view.sign .demo-toast, .view.sign .ds-work { background: #333333; }
.view.sign .demo-labels li { color: #62657a; }
.view.sign .demo-labels li.on { color: #fff; border-color: #1e3bff; background: #1e3bff; }
.view.sign .sign-why li { color: #4a4d64; }
.view.sign .sign-why li svg { color: #1e3bff; }
.view.sign .sign-why b { color: #0e1230; }

@media (max-width: 900px) {
  .view.sign .sign-r .demo { padding: 20px; border-radius: 20px; }
}
/* phones: one column, even side margins (the form ran to the right edge) */
@media (max-width: 700px) {
  .view.sign { grid-template-columns: minmax(0, 1fr); }
  .view.sign .sign-l { padding: 24px 20px; min-height: 100svh; }
  .view.sign .sign-box { max-width: none; }
}
/* Farhan 2026-10-26: right side on the same light band as the homepage's How it works section; the tour stage shades
   one step darker (#F1F2EF) like the step pictures there */
.view.sign .sign-r { background: #fafaf9; }
.view.sign .sign-r .demo { background: #f1f2ef; }