/* [Claude 2026-11-08] Hadi: « the login page is ugly. It should be alive with the POS defined »: a shop device shows its logo,
   name, place and the time; a device of the group shows every company. Hero on the left, the step (who / PIN) in a panel on
   the right from 820 px wide; stacked on phones. Colours follow the shop (--c) and the theme tokens (light and dark). */
.login.alive { --c: var(--accent); position: relative; min-height: 100dvh; display: block; padding: 0; overflow: hidden; isolation: isolate; background: var(--bg); }
.login.alive .la-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 60%),
              radial-gradient(90% 80% at 100% 100%, color-mix(in srgb, var(--c) 14%, transparent), transparent 65%), var(--bg); }
/* Soft discs drawn as radial gradients (no CSS blur filter: the shop POS has a small GPU); only transform is animated. */
.login.alive .la-bg i { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; opacity: .5; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 60%, transparent), transparent); will-change: transform; animation: la-drift 26s ease-in-out infinite alternate; }
.login.alive .la-bg i:nth-child(1) { left: -14vmax; top: -16vmax; }
.login.alive .la-bg i:nth-child(2) { right: -18vmax; bottom: -20vmax; opacity: .36; animation-duration: 32s; animation-delay: -8s; }
.login.alive .la-bg i:nth-child(3) { left: 38%; top: 48%; width: 26vmax; height: 26vmax; opacity: .22; animation-duration: 38s; animation-delay: -15s; }
@keyframes la-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6vmax, 4vmax) scale(1.08); } 100% { transform: translate(-4vmax, 7vmax) scale(.95); } }

.login.alive .la-top { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 12px; z-index: 2; }
.login.alive .la-lang { min-height: 44px; gap: 6px; color: var(--text); }
.login.alive .la-foot { position: absolute; left: 0; right: 0; bottom: max(8px, env(safe-area-inset-bottom)); display: flex; justify-content: center; align-items: center; gap: 10px; }
.login.alive .la-foot .la-enroll { min-height: 40px; font-size: 14px; color: var(--muted); }

.login.alive .la-wrap { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 18px; padding: 64px 20px 64px; max-width: 1180px; margin: 0 auto; }
.login.alive .la-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; animation: pop .5s var(--spring) both; }
.login.alive .la-logo { display: grid; place-items: center; min-height: 96px; }
.login.alive .la-logo .blogo { filter: drop-shadow(0 8px 22px color-mix(in srgb, var(--c) 30%, transparent)); }
.login.alive .la-logo .blogo.wide { --s: 96px; }
.login.alive .la-name { font-size: clamp(26px, 4vw, 40px); line-height: 1.1; letter-spacing: -.02em; margin: 4px 0 0; }
.login.alive .la-place { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--c) 14%, var(--surface)); color: var(--text); font-weight: 600; font-size: 15px; }
.login.alive .la-time { margin-top: 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.login.alive .la-clock { font-size: clamp(44px, 7vw, 76px); font-weight: 200; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.login.alive .la-date { font-size: 16px; color: var(--muted); }
.login.alive .la-hello { font-size: 15px; color: var(--c); font-weight: 600; margin-top: 2px; }
.login.alive .la-hero.group .mark { width: 72px; height: 72px; border-radius: 18px; font-size: 36px; margin: 0; }

.login.alive .la-panel { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-width: 0; }
.login.alive .la-panel .box { width: 440px; max-width: 100%; padding: 22px 20px 20px; border-radius: 26px; background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); box-shadow: 0 12px 40px rgba(0,0,0,.12), 0 1px 0 rgba(255,255,255,.06) inset; }
.login.alive .la-q { font-size: 19px; font-weight: 600; color: var(--text); }
.login.alive .la-avatar { width: 64px; height: 64px; font-size: 26px; margin: 0 auto 2px; background: var(--c); color: #fff; }
.login.alive .login-people button { background: var(--fill); min-height: 92px; }
.login.alive .login-people { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); margin: 8px 0 4px; }
.login.alive .login-today { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.login.alive .login-today button { min-height: 108px; font-size: 16px; }
.login.alive .login-today .avatar { width: 52px; height: 52px; font-size: 22px; background: var(--c); color: #fff; }
.login.alive .la-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 4px; }
.login.alive .la-act { min-height: 52px; gap: 8px; justify-content: center; background: var(--fill); color: var(--text); font-weight: 600; border-radius: 14px; }
.login.alive .pad button { background: var(--fill); }
.login.alive .pad button.del, .login.alive .pad button.lang { background: transparent; }

/* POS and tablet in landscape: hero left, panel right. */
@media (min-width: 820px) {
  .login.alive .la-wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; padding: 40px 40px 56px; }
  .login.alive .la-hero { align-items: flex-start; text-align: left; }
  .login.alive .la-time { align-items: flex-start; }
  .login.alive .la-logo { justify-items: start; }
  .login.alive .la-panel { justify-items: end; }
}
/* Short landscape screens (the POS at 600–768 px high): tighter hero and pad so nothing scrolls. */
@media (min-width: 820px) and (max-height: 780px) {
  .login.alive .la-wrap { padding: 24px 36px 48px; }
  .login.alive .la-panel .box { padding: 16px 18px; gap: 6px; }
  .login.alive .pad { gap: 8px 20px; }
  .login.alive .pad button { width: 64px; height: 64px; font-size: 28px; }
  .login.alive .la-avatar { width: 52px; height: 52px; font-size: 22px; }
  .login.alive .la-clock { font-size: 60px; }
}
/* Phones: on the PIN step the hero shrinks to the logo so the pad fits. */
@media (max-width: 819px) {
  .login.alive .la-wrap { padding: 56px 16px 64px; gap: 14px; }
  /* [GPT 2026-11-10] Keep the compact phone PIN layout with the assigned shop or Wamy mark. */
  .login.alive.pin .la-time, .login.alive.pin .la-place { display: none; }
  .login.alive.pin .la-name { font-size: 22px; }
  .login.alive.pin .la-logo { min-height: 0; }
  .login.alive.pin .la-wrap { padding-top: 24px; }
  .login.alive .la-panel .box { padding: 18px 14px; border-radius: 22px; }
  .login.alive .login-people, .login.alive .login-today { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .login.alive .la-logo .blogo { --s: 88px; }
  .login.alive .la-actions { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .login.alive .la-bg i, .login.alive .la-hero { animation: none; } }

/* The lock screen shows the shop's logo above the person (pos-lock.js). */
.pos-lock .pl-logo { display: grid; place-items: center; margin-bottom: 6px; }
.pos-lock .pl-logo .blogo.wide { --s: 64px; }
.pos-lock { --c: var(--accent); background: radial-gradient(110% 90% at 0% 0%, color-mix(in srgb, var(--c) 20%, transparent), transparent 60%), radial-gradient(90% 80% at 100% 100%, color-mix(in srgb, var(--c) 12%, transparent), transparent 65%), var(--bg); }
.pos-lock .pl-avatar { background: var(--c); color: #fff; }