/* [MZEN 2026-09-09] Sign-in chrome (login + change_password). Linked only by
   those two pages via zen_core/login_chrome.php. Theme tokens come from the
   base stylesheet in html.php; dark theme = [data-theme="dark"] on <html>. */
main { max-width:none; margin:0; padding:0; }
[data-theme="dark"] { --card:#1b1b1f; --input-bg:#141417; }

.login { min-height:100vh; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); }

/* ── brand panel ─────────────────────────────────────────────────────── */
.hero { position:relative; overflow:hidden; background:#111114; color:#fff; display:flex; flex-direction:column;
        justify-content:space-between; padding:clamp(28px,4vw,56px); }
.hero::before { content:""; position:absolute; inset:-20% -10% auto -10%; height:120%;
  background:radial-gradient(60% 55% at 50% 38%, rgba(255,102,0,.55), rgba(255,102,0,0) 62%),
             radial-gradient(45% 40% at 50% 42%, rgba(250,193,36,.35), rgba(250,193,36,0) 60%);
  filter:blur(2px); animation:mzenGlow 9s ease-in-out infinite alternate; }
.hero::after { content:""; position:absolute; inset:0;
  background:repeating-conic-gradient(from 0deg at 50% 40%, rgba(255,255,255,.035) 0 2deg, transparent 2deg 9deg);
  -webkit-mask:radial-gradient(55% 50% at 50% 40%, #000 20%, transparent 75%);
          mask:radial-gradient(55% 50% at 50% 40%, #000 20%, transparent 75%);
  animation:mzenSpin 120s linear infinite; }
@keyframes mzenGlow { from { transform:translateY(0) scale(1); } to { transform:translateY(-3%) scale(1.06); } }
@keyframes mzenSpin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero::before, .hero::after { animation:none; } }
.hero > * { position:relative; z-index:1; }
.hero-top { display:flex; align-items:center; gap:.6rem; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:#cfcfd4; }
.hero-top .dot { width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg,#ff6600,#fac124); }
.hero-mid { text-align:center; padding:2rem 0; }
.hero-logo { width:min(420px,78%); height:auto; filter:drop-shadow(0 12px 40px rgba(255,120,0,.35)); }
.hero-logo-text { font-size:2rem; color:#fff; }
.hero h1 { font-size:clamp(1.5rem,2.4vw,2.1rem); font-weight:700; letter-spacing:-.01em; margin:1.6rem 0 .5rem; color:#fff; }
.hero p.lead { color:#cfcfd4; max-width:34rem; margin:0 auto; font-size:1.02rem; }
.feats { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-top:2rem; }
.feat { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:.85rem .9rem; text-align:left; backdrop-filter:blur(6px); }
.feat svg { width:22px; height:22px; stroke:#fac124; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; margin-bottom:.35rem; }
.feat b { display:block; font-size:.9rem; }
.feat span { font-size:.78rem; color:#b9b9c0; }
.hero-foot { font-size:.78rem; color:#9a9aa2; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; align-items:center; }
.hero-foot .stripe { height:3px; width:120px; border-radius:2px; background:linear-gradient(90deg,#ff6600,#fac124); }

/* ── form panel ──────────────────────────────────────────────────────── */
.pane { display:flex; align-items:center; justify-content:center; padding:clamp(24px,4vw,56px); position:relative; background:var(--bg); }
.pane .login-toggle { position:absolute; top:1rem; right:1rem; }
.login-card { width:min(420px,100%); background:var(--card); border:1px solid var(--line); border-radius:16px;
              padding:2rem 2rem 1.6rem; margin:0; box-shadow:0 20px 60px rgba(0,0,0,.08); }
.login-card .mini { display:none; margin-bottom:1rem; }
.login-card .mini img { height:44px; }
.login-card h1, .login-card h2 { margin:0 0 .2rem; font-size:1.45rem; }
.login-card p.sub { margin:0 0 1.2rem; color:var(--muted); }
.login-card p.muted { margin:0 0 1rem; }
.login-card label { margin:.7rem 0 .25rem; }
.login-card input[type=email], .login-card input[type=password] { max-width:none; padding:.6rem .7rem; border-radius:8px; }
.login-card input:focus { border-color:transparent; }
.login-card button.go { font-weight:700; width:100%; margin-top:1.1rem; padding:.7rem 1rem; border-radius:8px; color:#fff;
  background:linear-gradient(90deg,#ff6600,#ff8a1f); box-shadow:0 8px 20px rgba(255,102,0,.28); }
.login-card p.help { margin:1rem 0 0; font-size:.82rem; color:var(--muted); text-align:center; }
.login-card .secure { display:flex; align-items:center; justify-content:center; gap:.4rem; margin-top:1.2rem; font-size:.75rem; color:var(--muted); }
.login-card .secure svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.8; }

/* ── small screens: stacked, brand band on top ───────────────────────── */
@media (max-width:860px) {
  .login { grid-template-columns:1fr; }
  .hero { padding:24px; }
  .hero-mid { padding:.5rem 0; }
  .hero-logo { width:min(300px,70%); }
  .feats, .hero-foot { display:none; }
  .hero h1 { font-size:1.3rem; margin:.9rem 0 .3rem; }
  .hero p.lead { font-size:.92rem; }
  .pane { padding:20px; align-items:flex-start; }
}