/* auth.css — SAFE + Button FX + Touch effects (vLGX-mono) */
:root{
  /* Monochrome tokens */
  --ink:#0a0a0a;
  --ink-2:#1a1a1a;
  --muted:#6b6b6b;
  --bg:#0b0b0b;
  --card:#ffffff;
  --white:255,255,255;
  --radius:18px;
  --gap:14px;
  --shadow:0 10px 30px rgba(0,0,0,.16);
  --border:rgba(255,255,255,.55);
  --blur:6px;
}
@media (max-width:640px){ :root{ --radius:16px; --gap:12px; } }

*,*::before,*::after{ box-sizing: border-box; }
html,body{ height:100%; }
body.lgx-body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--ink); background: var(--bg);
}

/* Stage + background (monochrome) */
.lgx-stage{ min-height:100dvh; display:grid; place-items:center; padding:clamp(16px,3vw,40px); position:relative; overflow:hidden; }
.lgx-bg{ position:absolute; inset:0; z-index:0; overflow:hidden;
  background:
    radial-gradient(1200px 1200px at -10% -20%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(1200px 1200px at 110% 120%, rgba(255,255,255,.06), transparent 60%),
    var(--bg);
}

/* Card (glass lite monochrome) */
.lgx-card{
  position:relative; z-index:1; width:min(480px, 92vw);
  border-radius: calc(var(--radius) + 4px);
  background: linear-gradient(to bottom right, rgba(var(--white),.90), rgba(var(--white),.82));
  box-shadow: var(--shadow), inset 0 0 0 1px var(--border);
  -webkit-backdrop-filter: saturate(130%) blur(var(--blur));
  backdrop-filter: saturate(130%) blur(var(--blur));
  overflow:hidden;
}
.lgx-card::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.55), transparent 50%);
}

/* Header */
.lgx-card__head{ text-align:center; padding: clamp(20px, 4vw, 32px) clamp(20px, 4vw, 36px) 0; }
.lgx-logo{ width:56px; height:56px; object-fit:contain; border-radius:14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
.lgx-title{ margin:.6rem 0 0; font-size: clamp(1.15rem, 1rem + 1vw, 1.6rem); font-weight:900; letter-spacing:.2px; color:var(--ink-2); }
.lgx-title span{ color:var(--ink); }
.lgx-sub{ margin:.35rem 0 1.1rem; color:#4b4b4b; font-weight:600; }

/* Alerts */
.lgx-alert{ margin: 0 clamp(20px, 4vw, 36px); border-radius: 14px; padding: 12px 14px; font-weight:600; }
.lgx-alert--error{ background: rgba(0,0,0,.04); color:#7a0000; border:1px solid rgba(0,0,0,.16); }
.lgx-alert--ok{ background: rgba(0,0,0,.035); color:#064e3b; border:1px solid rgba(0,0,0,.12); }

/* Form */
.lgx-form{ display:grid; gap: clamp(12px, 2.6vw, 16px); padding: clamp(20px, 4vw, 36px); }
.lgx-field{ display:grid; gap:6px; }
.lgx-label{ font-size:.95rem; font-weight:800; color:var(--ink-2); }
.lgx-input{
  width:100%; border-radius:14px; padding:14px 14px;
  border:1px solid rgba(0,0,0,.10);
  background:#ffffff;
  outline:none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.85);
  font-weight:700; color:var(--ink);
  transition: box-shadow .18s ease, transform .12s ease;
}
.lgx-input:focus{ box-shadow: 0 6px 18px rgba(0,0,0,.08), inset 0 0 0 2px rgba(0,0,0,.35); transform: translateY(-1px); }

/* Row + links */
.lgx-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:2px; }
.lgx-link{ color:#2d2d2d; font-weight:800; text-decoration:none; border-bottom:2px dashed rgba(0,0,0,.35); padding:4px 6px; border-radius:10px; }
.lgx-link:hover{ border-color:rgba(0,0,0,.75); }

/* Checkbox */
.lgx-check{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.lgx-check input{ display:none; }
.lgx-check__box{
  width:20px;height:20px;border-radius:6px; background:#fff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
  position:relative; display:inline-block;
}
.lgx-check__box::after{ content:""; position:absolute; inset:4px; border-radius:4px; background:#111; opacity:0; transform:scale(.7); transition: all .16s ease; }
.lgx-check input:checked + .lgx-check__box::after{ opacity:1; transform:scale(1); }
.lgx-check__label{ font-weight:700; color:var(--ink); }

/* === Buttons (with FX + touch) ========================================== */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.55rem; border:0; cursor:pointer; user-select:none; text-decoration:none;
  font-weight:900; letter-spacing:.2px; padding:14px 18px; min-height:48px; border-radius:999px;
  transform: translateZ(0);
  transition: transform .14s ease, box-shadow .2s ease, filter .2s ease;
  will-change: transform;
  overflow: hidden;
}

/* Shine sweep (hover) */
.btn::before{
  content:""; position:absolute; top:-150%; left:-30%;
  width:40%; height:400%;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%);
  transform: rotate(15deg) translateX(-120%);
  opacity:0; pointer-events:none;
  transition: opacity .18s ease, transform .28s ease;
}
/* Mouse hover */
.btn:hover::before{ opacity:.9; transform: rotate(15deg) translateX(180%); }
/* Touch cue — când există .has-touch pe html, activează un mic "pulse" la tap */
.has-touch .btn:active::before{ opacity:.9; transform: rotate(15deg) translateX(100%); transition-duration:.18s; }

/* Magnetic hover (variabile setate de JS) */
.btn[data-mx][data-my]{ --mx: 0px; --my: 0px; transform: translate(var(--mx), var(--my)); }
.btn:active{ transform: translate(var(--mx, 0), var(--my, 0)) scale(.985); }

/* Ripple-lite (tap/click) */
.btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(120px 120px at var(--rx, 50%) var(--ry, 50%), rgba(255,255,255,.35), transparent 60%);
  opacity:0; transform: scale(.95);
  transition: opacity .18s ease, transform .24s ease;
}
.btn.is-rippling::after{ opacity:1; transform: scale(1); }

/* Touch micro-glow */
.has-touch .btn.is-touching{
  box-shadow: 0 10px 24px rgba(0,0,0,.14), 0 0 0 2px rgba(255,255,255,.35) inset;
  transform: translate(var(--mx, 0), var(--my, 0)) scale(.992);
}

/* Themes */
.btn-primary{
  width:100%;
  color:var(--ink-2); background:#ffffff;
  border:1px solid rgba(0,0,0,.12);
  box-shadow: 0 10px 24px rgba(0,0,0,.10), inset 0 0 0 1px rgba(255,255,255,.75);
}
.btn-primary:hover{
  transform: translate(var(--mx, 0), var(--my, 0)) translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,.14), inset 0 0 0 1px rgba(255,255,255,.85);
}
.btn-ghost{
  width:100%;
  color:var(--ink-2); background: rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.18);
}
.btn-ghost:hover{
  transform: translate(var(--mx, 0), var(--my, 0)) translateY(-1px);
  filter: brightness(1.02);
}

/* Divider + footer */
.lgx-hr{ display:flex; align-items:center; justify-content:center; gap:12px; margin: 8px 0 4px; color:#5a5a5a; font-weight:700; }
.lgx-hr::before,.lgx-hr::after{ content:""; height:1px; flex:1; background: rgba(0,0,0,.12); }
.lgx-hr span{ padding: 0 6px; }

.lgx-card__foot{ padding: 0 clamp(20px, 4vw, 36px) clamp(18px, 3.3vw, 26px); text-align:center; }
.lgx-muted{ color:#7a7a7a; font-weight:600; }

/* Focus visibility for keyboard */
.btn:focus-visible, .lgx-input:focus-visible, .lgx-link:focus-visible{
  outline: 2px solid #000; outline-offset: 2px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .btn:hover::before{ opacity:0; transform:none; }
  .btn{ transition: none; }
}