/* ═══ SuperMart POS — Login (Premium Split Stage) ═══ */
.lf-stage{ min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:20px;
  background:
    radial-gradient(1000px 600px at 80% -10%, rgba(16,185,129,.25), transparent 55%),
    radial-gradient(900px 600px at 10% 110%, rgba(6,78,59,.5), transparent 55%),
    linear-gradient(160deg,#022c22 0%,#064e3b 55%,#022c22 100%);
  position:relative; overflow:hidden; }
.lf-stage::before{ content:""; position:absolute; inset:0; background-image:
  radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.4), transparent),
  radial-gradient(2px 2px at 70% 60%, rgba(110,231,183,.5), transparent),
  radial-gradient(1px 1px at 45% 80%, rgba(255,255,255,.3), transparent),
  radial-gradient(1px 1px at 90% 20%, rgba(255,255,255,.3), transparent);
  background-size:600px 600px; opacity:.6; animation:drift 30s linear infinite; }
@keyframes drift{ to{ background-position:600px 600px; } }

.lf-card{ width:min(1060px,100%); display:grid; grid-template-columns:1.1fr 1fr;
  background:rgba(255,255,255,.08); backdrop-filter:blur(22px); border:1px solid rgba(255,255,255,.14);
  border-radius:32px; overflow:hidden; box-shadow:0 40px 100px rgba(0,0,0,.5); position:relative; z-index:1; }

/* Brand panel */
.lf-brand{ padding:48px 44px; color:#fff; position:relative; background:linear-gradient(160deg,rgba(6,95,70,.6),rgba(2,44,34,.5)); }
.lf-brand-logo{ width:60px; height:60px; border-radius:18px; background:linear-gradient(135deg,var(--brand-400),var(--brand-600)); display:grid; place-items:center; font-size:30px; color:#fff; box-shadow:0 12px 30px rgba(16,185,129,.5); position:relative; margin-bottom:24px; }
.lf-brand-logo::after{ content:""; position:absolute; inset:-8px; border-radius:24px; background:radial-gradient(circle,rgba(52,211,153,.4),transparent 70%); animation:pulseGlow 3s ease-in-out infinite; }
@keyframes pulseGlow{ 0%,100%{opacity:.5;transform:scale(1)} 50%{opacity:1;transform:scale(1.1)} }
.lf-tagline{ font-family:"Kanit"; font-weight:700; font-size:31px; line-height:1.25; margin:0 0 10px;
  background:linear-gradient(90deg,#fff,#6ee7b7,#fff); background-size:200% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:shine 4s linear infinite; }
@keyframes shine{ to{ background-position:200% center; } }
.lf-sub{ color:#a7f3d0; font-size:14px; margin:0 0 28px; }
.lf-features{ display:grid; gap:12px; }
.lf-feat{ display:flex; gap:13px; align-items:flex-start; padding:13px 15px; border-radius:15px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08); transition:.25s; }
.lf-feat:hover{ background:rgba(255,255,255,.12); transform:translateX(3px); }
.lf-feat i{ width:38px; height:38px; border-radius:11px; background:linear-gradient(135deg,var(--brand-400),var(--brand-600)); color:#fff; display:grid; place-items:center; font-size:18px; flex-shrink:0; }
.lf-feat b{ display:block; color:#fff; font-size:14px; font-family:"Kanit"; }
.lf-feat span{ color:#a7f3d0; font-size:12px; }
.lf-stats{ display:flex; gap:24px; margin-top:28px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); }
.lf-stat b{ display:block; font-family:"Kanit"; font-size:22px; color:#fff; }
.lf-stat span{ font-size:11.5px; color:#6ee7b7; }

/* Form card */
.lf-form-wrap{ background:rgba(255,255,255,.97); padding:48px 44px; display:flex; flex-direction:column; justify-content:center; }
.lf-mini-brand{ display:none; align-items:center; gap:11px; margin-bottom:22px; }
.lf-mini-brand .lg{ width:44px; height:44px; border-radius:13px; background:linear-gradient(135deg,var(--brand-400),var(--brand-600)); color:#fff; display:grid; place-items:center; font-size:22px; }
.lf-mini-brand b{ font-family:"Kanit"; font-size:19px; }
.lf-title{ font-family:"Kanit"; font-weight:700; font-size:27px; margin:0 0 5px; color:var(--ink); }
.lf-desc{ color:var(--ink-muted); font-size:13.5px; margin:0 0 26px; }
.lf{ display:flex; flex-direction:column; gap:15px; }
.lf.shake{ animation:shakeX .5s; }
@keyframes shakeX{ 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-9px)} 40%,80%{transform:translateX(9px)} }
.lf-field{ position:relative; }
.lf-field label{ font-size:13px; font-weight:600; color:var(--ink-soft); display:block; margin-bottom:6px; }
.lf-input-wrap{ position:relative; }
.lf-input-wrap > i{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--ink-faint); font-size:18px; }
.lf-input{ width:100%; height:50px; border:1px solid var(--line-strong); border-radius:14px; padding:0 46px 0 44px; font-family:inherit; font-size:15px; background:#fff; transition:.18s; }
.lf-input:focus{ outline:none; border-color:var(--brand-400); box-shadow:0 0 0 4px rgba(16,185,129,.13); }
.lf-toggle{ position:absolute; right:8px; top:50%; transform:translateY(-50%); width:36px; height:36px; border:none; background:transparent; color:var(--ink-faint); font-size:18px; border-radius:9px; }
.lf-toggle:hover{ color:var(--brand-600); background:var(--brand-50); }
.lf-caps{ font-size:11.5px; color:var(--c-amber); margin-top:5px; display:none; align-items:center; gap:5px; }
.lf-caps.show{ display:flex; }
.lf-row{ display:flex; align-items:center; justify-content:space-between; }
.lf-check{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-soft); cursor:pointer; }
.lf-check input{ width:17px; height:17px; accent-color:var(--brand-600); }
.lf-forgot{ font-size:13px; color:var(--brand-600); font-weight:600; }

/* Multi-state submit */
.lf-submit{ position:relative; height:52px; border:none; border-radius:14px; overflow:hidden; font-family:"Kanit"; font-weight:600; font-size:16px; color:#fff; background:linear-gradient(135deg,var(--brand-500),var(--brand-700)); box-shadow:0 12px 28px rgba(16,185,129,.4); margin-top:6px; transition:.2s; }
.lf-submit:hover{ transform:translateY(-1px); box-shadow:0 16px 34px rgba(16,185,129,.5); }
.lf-submit[data-state]{ pointer-events:none; }
.lf-submit-state{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:9px; opacity:0; transition:.25s; }
.lf-submit-state-default{ opacity:1; }
.lf-submit[data-state] .lf-submit-state-default{ opacity:0; }
.lf-submit[data-state="loading"]{ background:linear-gradient(135deg,#0f172a,#065f46); }
.lf-submit[data-state="loading"] .lf-submit-state-loading{ opacity:1; }
.lf-submit[data-state="success"]{ background:linear-gradient(135deg,var(--brand-400),var(--brand-600)); }
.lf-submit[data-state="success"] .lf-submit-state-success{ opacity:1; }
.lf-submit[data-state="error"]{ background:linear-gradient(135deg,#ef4444,#dc2626); animation:shakeX .5s; }
.lf-submit[data-state="error"] .lf-submit-state-error{ opacity:1; }
.lf-droplets{ display:inline-flex; gap:4px; }
.lf-droplets span{ width:7px; height:7px; border-radius:50%; background:#fff; animation:bounce 1s infinite; }
.lf-droplets span:nth-child(2){ animation-delay:.15s; } .lf-droplets span:nth-child(3){ animation-delay:.3s; }
@keyframes bounce{ 0%,100%{transform:translateY(0);opacity:.5} 50%{transform:translateY(-6px);opacity:1} }

/* Demo cards */
.lf-demo{ margin-top:24px; padding-top:20px; border-top:1px dashed var(--line-strong); }
.lf-demo-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.lf-demo-head b{ font-size:13px; color:var(--ink-soft); }
.lf-demo-tag{ font-size:10px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--gold-400); color:#78350f; letter-spacing:.05em; }
.lf-demo-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.lf-demo-card{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 6px; border:1px solid var(--line); border-radius:13px; background:#fff; transition:.2s; cursor:pointer; }
.lf-demo-card:hover{ border-color:var(--brand-400); background:var(--brand-50); transform:translateY(-3px); box-shadow:var(--shadow-sm); }
.lf-demo-card i{ font-size:22px; }
.lf-demo-card span{ font-size:11px; font-weight:600; color:var(--ink-soft); }
.lf-demo-hint{ text-align:center; font-size:11.5px; color:var(--ink-faint); margin-top:10px; }

.lf-footer{ text-align:center; margin-top:24px; font-size:11.5px; color:rgba(255,255,255,.6); position:relative; z-index:1; }

@media(max-width:900px){
  .lf-card{ grid-template-columns:1fr; max-width:460px; }
  .lf-brand{ display:none; }
  .lf-mini-brand{ display:flex; }
  .lf-form-wrap{ padding:36px 28px; border-radius:32px; }
}