/* EasyToStore's look over the LapisOS pages. Only applies when brand.js sets html.ets. */
@font-face { font-family: "Jakarta"; src: url("/fonts/jakarta.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

html.ets {
  --blue: #3557f5;
  --ets-grad: linear-gradient(135deg, #5b7cff, #6a3ff0);
  --ets-head: "Jakarta", "Inter", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) { html.ets { --blue: #7690ff; } }
html.ets body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
html.ets h1, html.ets h2, html.ets .head h1 { font-family: var(--ets-head); letter-spacing: -.02em; }

/* the logo square */
html.ets .auth-ico, html.ets .ico { background: var(--ets-grad); border-radius: 16px; box-shadow: 0 10px 24px -8px rgb(80 80 240 / .6); }

/* sign-in, unlock, invite, start: bigger and calmer */
html.ets .auth, html.ets body.ets-page {
  background: radial-gradient(60% 50% at 50% 0%, rgb(53 87 245 / .13), transparent 70%),
              radial-gradient(40% 40% at 90% 20%, rgb(122 76 247 / .1), transparent 70%), var(--bg-2, var(--bg));
}
html.ets .auth-box, html.ets .box { width: min(420px, 100%); }
html.ets .brandline { display: flex; align-items: center; justify-content: center; gap: 10px; font: 800 22px var(--ets-head); letter-spacing: -.02em; margin-bottom: 26px; }
html.ets .brandline i { width: 34px; height: 34px; border-radius: 10px; background: var(--ets-grad); display: grid; place-items: center; }
html.ets .brandline svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
html:not(.ets) .brandline { display: none; }
html.ets .auth-box h1, html.ets .box h1 { font-size: 32px; margin-bottom: 8px; }
html.ets .auth-box p, html.ets .box p { font-size: 18px; }
html.ets .auth-box input, html.ets .box input { font-size: 19px; min-height: 58px; padding: 0 18px; border-radius: 14px; }
html.ets .auth-box input:focus, html.ets .box input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgb(53 87 245 / .15); }
html.ets .auth-box #authGo, html.ets .box button[type=submit] {
  min-height: 60px; font-size: 19px; border-radius: 14px; background: linear-gradient(180deg, #4568ff, #2d4ee8);
  box-shadow: 0 8px 22px -8px rgb(53 87 245 / .7);
}
html.ets .box label { font-size: 16px; font-weight: 600; color: var(--text); }
html.ets .auth-foot { display: block; margin-top: 22px; font-size: 16px; color: var(--muted); }
html:not(.ets) .auth-foot { display: none; }
html.ets .auth-foot a { color: var(--blue); }