/* Shared landing-page content styles — used by index.php AND auth pages (admin.php, signup.php) */

/* ── Nav ── */
.lp-nav {
  height: 60px; flex-shrink: 0;
  background: rgba(4,8,15,.88); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-border);
  display: flex; align-items: center; padding: 0 40px; gap: 10px; z-index: 100;
}
.lp-logo-icon { display: flex; align-items: center; }
.lp-logo-text { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.lp-nav-right { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.btn-nav-login {
  padding: 7px 18px; border: 1px solid var(--glass-border); border-radius: 20px;
  font-size: 13px; font-weight: 600; color: var(--text-dim);
  text-decoration: none; transition: color .15s, border-color .15s;
}
.btn-nav-login:hover { color: var(--text); }
.btn-nav-login.active { color: var(--text); border-color: rgba(255,255,255,.2); }
.btn-nav-register {
  padding: 7px 18px;
  background: rgba(0,212,255,.12); border: 1px solid rgba(0,212,255,.3);
  border-radius: 20px; font-size: 13px; font-weight: 700; color: var(--accent);
  text-decoration: none; transition: background .15s, box-shadow .15s;
}
.btn-nav-register:hover { background: rgba(0,212,255,.2); box-shadow: 0 2px 12px rgba(0,212,255,.2); }

/* ── Footer ── */
.lp-footer {
  height: 48px; flex-shrink: 0;
  border-top: 1px solid var(--glass-border);
  padding: 0 40px; display: flex; align-items: center; justify-content: space-between;
}
.lp-footer-copy { font-size: 12px; color: var(--text-muted); }
.lp-footer-links { display: flex; gap: 20px; }
.lp-footer-links a { font-size: 12px; color: var(--text-muted); text-decoration: none; transition: color .15s; }
.lp-footer-links a:hover { color: var(--text); }

/* ── Light mode nav/footer ── */
html[data-theme="light"] .lp-nav { background: rgba(250,249,246,.92); }

/* ── Logo light mode ── */
html[data-theme="light"] .dv-logo-bg     { fill: transparent; }
html[data-theme="light"] .dv-logo-border { stroke-width: 0; }
html[data-theme="light"] .dv-logo-vs     { fill: rgba(0,0,0,.18); }

/* ── Auth page body layout (same column structure as landing page) ── */
.auth-body { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; margin: 0; padding: 0; }
.auth-body *, .auth-body *::before, .auth-body *::after { box-sizing: border-box; }
.auth-main { flex: 1; overflow: hidden; display: flex; position: relative; }
.auth-left {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 0 40px;
  animation: auth-left-enter 380ms cubic-bezier(.22,1,.36,1) both;
}
.auth-right {
  flex: 0 0 420px;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 36px; overflow-y: auto;
  border-left: 1px solid var(--glass-border);
  background: var(--bg);
  animation: auth-right-enter 460ms cubic-bezier(.22,1,.36,1) 40ms both;
}
@keyframes auth-left-enter {
  from { transform: translateX(-10%); opacity: 0.6; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes auth-right-enter {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* ── 2-col grid inside auth left panel ── */
.lp-auth-main {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px; align-items: center; width: 100%;
}
@media (max-width: 1100px) {
  .lp-auth-main { grid-template-columns: 1fr; }
  .lp-auth-main .lp-preview { display: none; }
}

/* Preview card */
.lp-preview {
  background: rgba(255,255,255,.04); border: 1px solid rgba(0,212,255,.15);
  border-radius: var(--radius); padding: 20px;
  box-shadow: 0 0 60px rgba(0,212,255,.07), 0 20px 40px rgba(0,0,0,.3);
}
.lp-preview-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); margin-bottom: 14px;
}
.lp-duel-card {
  background: rgba(255,255,255,.04); border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm); padding: 12px; text-align: center;
  transition: border-color .2s;
}
.lp-duel-card.lp-duel-winner {
  border-color: rgba(0,212,255,.3); background: rgba(0,212,255,.04);
}
.lp-duel-img {
  height: 52px; border-radius: 8px; margin-bottom: 8px;
  display: flex; align-items: center; justify-content: center;
}
html[data-theme="light"] .lp-preview { background: rgba(220,215,206,.4); border-color: var(--glass-border); box-shadow: 0 4px 24px rgba(0,0,0,.07); }
html[data-theme="light"] .lp-step-mini { background: rgba(255,255,255,.8); }
html[data-theme="light"] .lp-duel-card { background: rgba(255,255,255,.8); }
html[data-theme="light"] .lp-duel-card.lp-duel-winner { background: rgba(255,255,255,.95); border-color: var(--accent); }


.lp-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 14px;
  background: rgba(0,212,255,.1); border: 1px solid rgba(0,212,255,.2);
  border-radius: 20px; font-size: 12px; font-weight: 600; color: var(--accent);
  margin-bottom: 16px;
}
.lp-h1 {
  font-size: clamp(24px, 3.2vw, 40px); font-weight: 800; color: var(--text);
  line-height: 1.15; letter-spacing: -.025em; margin-bottom: 12px;
}
.lp-h1 span { color: var(--accent); }
.lp-desc {
  font-size: 15px; color: var(--text-dim); line-height: 1.7; margin-bottom: 24px;
}
.lp-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.btn-cta-primary {
  padding: 11px 24px;
  background: linear-gradient(135deg, rgba(0,212,255,.18), rgba(124,58,237,.18));
  border: 1px solid rgba(0,212,255,.35); border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 700; color: var(--accent);
  text-decoration: none; display: inline-flex; align-items: center; gap: 7px;
  transition: background .15s, box-shadow .15s;
}
.btn-cta-primary:hover {
  background: linear-gradient(135deg, rgba(0,212,255,.28), rgba(124,58,237,.28));
  box-shadow: 0 4px 20px rgba(0,212,255,.2);
}
.btn-cta-secondary {
  padding: 11px 20px; border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm); font-size: 14px; font-weight: 600;
  color: var(--text-dim); text-decoration: none; transition: color .15s;
}
.btn-cta-secondary:hover { color: var(--text); }
.lp-steps-strip { display: flex; gap: 12px; }
.lp-step-mini {
  flex: 1; display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.04); border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm); padding: 10px 12px;
}
.lp-step-num {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
}
.lp-step-label { font-size: 12px; font-weight: 600; color: var(--text-dim); line-height: 1.3; }