/* Kenzz dashboard sign-in. The logo's two colours only (purple #6b00d1, green #00f159), Almarai. */
@font-face { font-family: "Almarai"; font-weight: 400; font-display: swap; src: url("assets/fonts/almarai-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Almarai"; font-weight: 700; font-display: swap; src: url("assets/fonts/almarai-700-latin.woff2") format("woff2"); }
@font-face { font-family: "Almarai"; font-weight: 800; font-display: swap; src: url("assets/fonts/almarai-800-latin.woff2") format("woff2"); }

:root { --purple: #6b00d1; --deep: #2a0055; --green: #00f159; --ink: #1a0833; --ink-2: #665a78; --line: #d9c4f2; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Almarai", "Segoe UI", Tahoma, Arial, sans-serif; color: var(--ink);
  background: linear-gradient(115deg, var(--deep) 0%, var(--purple) 62%, #8a2be0 100%);
  -webkit-font-smoothing: antialiased;
}
.s-wrap { position: relative; min-height: 100%; display: grid; place-items: center; padding: 24px 16px; overflow: hidden; }
.s-flow { position: absolute; inset: 0; width: 100%; height: 100%; }
.s-card {
  position: relative; z-index: 1; width: min(400px, 100%); background: #ffffff; border-radius: 22px; padding: 30px 28px 28px;
  box-shadow: 0 30px 80px rgba(26, 8, 51, .45); animation: rise .7s cubic-bezier(.2, .9, .25, 1.1) both;
}
/* The logo stage: the real logo cut into its nine shapes (assets/logo-parts), put back together by signin.js. */
.s-stage {
  position: relative; height: 196px; margin: -8px -6px 20px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 45%, #ffffff 0%, #f6effd 58%, #eadbf8 100%);
}
.s-logo { position: absolute; left: 50%; top: 50%; width: 236px; aspect-ratio: 3518 / 1459; transform: translate(-50%, -50%); z-index: 2; }
.s-part { position: absolute; display: block; opacity: 0; will-change: transform, opacity; }
.s-part img { display: block; width: 100%; height: 100%; }
.s-ring { position: absolute; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; border: 2px solid #00d950; opacity: 0; z-index: 3; pointer-events: none; }
.s-twinkle { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; color: #00d950; opacity: 0; z-index: 3; pointer-events: none; }
.s-twinkle svg { width: 100%; height: 100%; }
.s-orbit {
  position: absolute; left: 0; top: 0; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 11px;
  display: grid; place-items: center; background: #ffffff; color: #6b00d1; opacity: 0;
  box-shadow: 0 6px 16px rgba(58, 0, 114, .16); will-change: transform, opacity;
}
.s-orbit svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.s-orbit.is-cart { background: #6b00d1; color: #ffffff; }
.s-static .s-part, .s-static .s-orbit { opacity: 1; }
.s-title { margin: 0; text-align: center; font-size: 22px; font-weight: 800; }
.s-lead { margin: 6px 0 22px; text-align: center; color: var(--ink-2); font-size: 15px; }
.s-form { display: flex; flex-direction: column; gap: 8px; }
.s-label { font-weight: 700; font-size: 14px; }
.s-input {
  font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line); color: var(--ink); background: #faf6fe;
}
.s-input:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(107, 0, 209, .18); }
.s-input[aria-invalid="true"] { border-color: var(--purple); }
.s-button {
  margin-top: 10px; font: inherit; font-size: 16px; font-weight: 800; padding: 13px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--purple); color: #ffffff; transition: background-color .18s, transform .18s;
}
.s-button:hover { background: #5a00b0; }
.s-button:active { transform: translateY(1px); }
.s-button:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.s-error { margin: 2px 0 0; font-size: 14px; color: var(--purple); font-weight: 700; }

@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .s-card { animation: none; }
}
@media (max-width: 420px) {
  .s-card { padding: 24px 18px 22px; }
  .s-stage { height: 172px; }
  .s-logo { width: 200px; }
}