:root {
  --lm-bg: rgba(0,0,0,.72);
  --lm-card: #ffffff;
  --lm-text: #0f172a;
  --lm-muted: #475569;
  --lm-border: #e2e8f0;
  --lm-accent: #4f46e5;
  --lm-accent-2: #06b6d4;
  --lm-shadow: 0 14px 44px rgba(2,6,23,.15);
}
:root[data-theme='dark'] {
  --lm-bg: rgba(10,12,16,.78);
  --lm-card: #151923;
  --lm-text: #e5e7eb;
  --lm-muted: #9aa4b2;
  --lm-border: #222838;
  --lm-accent: #6366f1;
  --lm-accent-2: #22d3ee;
  --lm-shadow: 0 12px 40px rgba(0,0,0,.35);
}
:root[data-theme='light'] {
  --lm-bg: rgba(0,0,0,.72);
  --lm-card: #ffffff;
  --lm-text: #0f172a;
  --lm-muted: #475569;
  --lm-border: #e2e8f0;
  --lm-accent: #4f46e5;
  --lm-accent-2: #06b6d4;
  --lm-shadow: 0 14px 44px rgba(2,6,23,.15);
}

.login-modal-overlay { position: fixed; inset: 0; display: none; place-items: center; background: var(--lm-bg); z-index: 100000; backdrop-filter: blur(2px); }
.login-modal-overlay[open] { display: grid; }
.login-modal-overlay::before { content: ""; position: absolute; inset: -10%; pointer-events: none; opacity: .35; filter: blur(20px);
  background:
    radial-gradient(1200px 600px at 10% -10%, color-mix(in oklab, var(--lm-accent) 35%, transparent), transparent 40%),
    radial-gradient(900px 500px at 110% 10%, color-mix(in oklab, var(--lm-accent-2) 30%, transparent), transparent 42%),
    radial-gradient(700px 400px at -10% 110%, color-mix(in oklab, var(--lm-accent-2) 25%, transparent), transparent 40%);
  transform: translate(calc(var(--mx, 0px) * .02), calc(var(--my, 0px) * .02));
  transition: transform .08s linear;
}
.login-modal { width: min(92vw, 480px); border-radius: 16px; border: 1px solid color-mix(in oklab, var(--lm-border) 70%, transparent);
  background: color-mix(in oklab, var(--lm-card) 75%, rgba(255,255,255,.08)); color: var(--lm-text); box-shadow: var(--lm-shadow);
  animation: lm-pop .22s ease-out; overflow: hidden; backdrop-filter: saturate(140%) blur(14px);
}
.login-modal .hero { display: flex; align-items: center; gap: 12px; padding: 18px; background: linear-gradient(135deg, var(--lm-accent) 0%, var(--lm-accent-2) 100%); border-bottom: 1px solid var(--lm-border); }
.login-modal .hero .icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.12); color: #fff; font-size: 18px; }
.login-modal .hero .titles { display: grid; gap: 4px; }
.login-modal .hero .titles h3 { margin: 0; font-size: 18px; color: #fff; }
.login-modal .hero .titles p { margin: 0; font-size: 13px; color: rgba(255,255,255,.85); }
.login-modal .content { padding: 16px 18px; color: var(--lm-muted); background: color-mix(in oklab, var(--lm-card) 90%, #000); }
.login-modal .content .benefits { display: grid; gap: 8px; margin: 8px 0 4px; }
.login-modal .content .benefit { display: flex; align-items: flex-start; gap: 10px; }
.login-modal .content .benefit .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; background: var(--lm-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--lm-accent) 20%, transparent); }
.login-modal .actions { display: flex; gap: 12px; justify-content: space-between; align-items: center; padding: 14px 18px 18px; border-top: 1px solid var(--lm-border); background: color-mix(in oklab, var(--lm-card) 94%, #000); }
.login-modal .actions .left { color: var(--lm-muted); font-size: 12px; }
.login-modal .actions .right { display: flex; gap: 10px; }
.login-modal .btn { padding: 11px 16px; border-radius: 12px; border: 1px solid var(--lm-border); background: color-mix(in oklab, var(--lm-card) 80%, #000); color: var(--lm-text); cursor: pointer; transition: transform .06s ease, background .15s ease, box-shadow .15s ease; box-shadow: 0 1px 0 rgba(0,0,0,.05); }
.login-modal .btn:hover { transform: translateY(-1px); }
.login-modal .btn.primary { background: linear-gradient(135deg, var(--lm-accent), var(--lm-accent-2)); border-color: color-mix(in oklab, var(--lm-accent) 40%, var(--lm-accent-2)); color: #fff; }
.login-modal .btn.ghost { background: color-mix(in oklab, var(--lm-card) 60%, var(--lm-border)); }

@keyframes lm-fade { from { transform: translateY(6px); opacity: .7; } to { transform: translateY(0); opacity: 1; } }
@keyframes lm-pop { from { transform: translateY(8px) scale(.96); opacity: .7; } to { transform: translateY(0) scale(1); opacity: 1; } }

@media (max-width: 420px) {
  .login-modal .hero { padding: 12px; }
  .login-modal .content { padding: 12px; }
  .login-modal .actions { padding: 10px 12px 12px; gap: 8px; }
}

/* Button glow */
.login-modal .btn.primary { box-shadow: 0 8px 18px color-mix(in oklab, var(--lm-accent) 28%, transparent); }
.login-modal .btn.primary:hover { box-shadow: 0 10px 24px color-mix(in oklab, var(--lm-accent-2) 35%, transparent); }