/* ==========================================================================
   Auxilium Pulse — Login Page Styles v1.4.0
   Fonts loaded via wp_enqueue_style('ap-fonts-pre') dependency — no @import needed.
   ========================================================================== */

:root {
  --ap-accent:    #2563eb;
  --ap-accent2:   #0891b2;
  --ap-purple:    #7c3aed;
  --ap-green:     #059669;
  --ap-dark-bg:   #060d1f;
  --ap-light-bg:  #f0f4ff;
  --ap-text:      #1e293b;
  --ap-text2:     #475569;
  --ap-text3:     #94a3b8;
  --ap-border:    #dde6f5;
  --ap-sans:      'Sora', system-ui, sans-serif;
  --ap-mono:      'JetBrains Mono', monospace;
}

/* ── Page shell ── */
.ap-login-page {
  height: 100vh; max-height: 100vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--ap-light-bg);
  font-family: var(--ap-sans);
}

/* ── Top bar ── */
.ap-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 52px; height: 62px; flex-shrink: 0;
  background: var(--ap-dark-bg);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  z-index: 20; position: relative;
}
.ap-topbar-brand { display: flex; align-items: center; gap: 12px; }
.ap-topbar-logo {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 900; color: #fff; font-family: var(--ap-mono);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 4px 20px rgba(99,102,241,0.5);
  flex-shrink: 0; letter-spacing: -0.03em; overflow: hidden;
}
.ap-logo-letter { font-size: 16px; font-weight: 900; color: #fff; font-family: var(--ap-mono); }
.ap-logo-img    { width: 100%; height: 100%; object-fit: cover; }
.ap-topbar-text { display: flex; flex-direction: column; }
.ap-topbar-name { font-size: 13.5px; font-weight: 700; color: rgba(255,255,255,0.9); line-height: 1.2; }
.ap-topbar-pulse {
  background: linear-gradient(105deg, #4f46e5, #06b6d4);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; font-weight: 900;
}
.ap-topbar-sub { font-size: 9.5px; color: rgba(255,255,255,0.3); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 2px; }

.ap-topbar-links { display: flex; align-items: center; gap: 2px; }
.ap-topbar-links a {
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.38);
  text-decoration: none; padding: 5px 11px; border-radius: 6px;
  transition: color 0.2s, background 0.2s; letter-spacing: 0.01em;
}
.ap-topbar-links a:hover { color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.07); }
.ap-topbar-site-btn {
  margin-left: 8px;
  color: rgba(255,255,255,0.65) !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important; padding: 5px 14px !important;
  font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: 0.02em !important; transition: all 0.2s !important;
}
.ap-topbar-site-btn:hover { color: #fff !important; background: rgba(255,255,255,0.12) !important; border-color: rgba(255,255,255,0.2) !important; }

/* ── Panels row ── */
.ap-panels-row { flex: 1; display: flex; overflow: hidden; min-height: 0; position: relative; }

/* Right-side glow overlay */
.ap-panels-row::after {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 80% at 110% 10%, rgba(199,210,254,0.55) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 90% 90%, rgba(186,230,255,0.4)  0%, transparent 55%);
}

/* ── Left hero panel ── */
.ap-hero-panel {
  flex: 1;
  background: var(--ap-dark-bg);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 56px) 0, 100% 100%, 0 100%);
  margin-right: -56px; z-index: 2;
}

/* Dot grid */
.ap-hero-grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, black 20%, transparent 100%);
}
/* Glow orbs */
.ap-hero-glow-a {
  position: absolute; z-index: 1; pointer-events: none;
  width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.16) 0%, transparent 65%);
  top: -250px; right: 100px;
}
.ap-hero-glow-b {
  position: absolute; z-index: 1; pointer-events: none;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(6,182,212,0.12) 0%, transparent 65%);
  bottom: -150px; left: -100px;
}
.ap-hero-glow-c {
  position: absolute; z-index: 2; pointer-events: none;
  width: 2px; height: 70%;
  background: linear-gradient(180deg, transparent 0%, rgba(99,102,241,0.35) 30%, rgba(6,182,212,0.25) 70%, transparent 100%);
  top: 15%; right: 32%; transform: rotate(15deg); filter: blur(1px);
}
/* Right-edge bleed */
.ap-hero-panel::before {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 120px; z-index: 3;
  background: linear-gradient(90deg, transparent 0%, rgba(79,70,229,0.18) 60%, rgba(99,102,241,0.28) 100%);
  pointer-events: none;
}

/* ── Hero body ── */
.ap-hero-body {
  position: relative; z-index: 5;
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 0 52px; overflow: hidden; gap: 0;
}

/* Kicker */
.ap-hero-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.ap-hk-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #34d399;
  flex-shrink: 0; animation: apLivePulse 2.4s ease infinite;
}
.ap-hk-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.28); }

/* Wordmark */
.ap-hero-wordmark { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.ap-hw-icon {
  width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(99,102,241,0.6), rgba(6,182,212,0.5));
  border: 1px solid rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 6px rgba(99,102,241,0.12), 0 8px 28px rgba(99,102,241,0.3);
}
.ap-hw-text { display: flex; flex-direction: column; gap: 1px; }
.ap-hw-company { font-size: 10px; font-weight: 800; letter-spacing: 0.22em; color: rgba(255,255,255,0.38); text-transform: uppercase; }
.ap-hw-product {
  font-size: 38px; font-weight: 900; line-height: 1; letter-spacing: -0.04em;
  background: linear-gradient(110deg, #e0f2fe 0%, #bfdbfe 40%, #a5b4fc 70%, #67e8f9 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: apShimmer 5s linear infinite;
}

/* Heading */
.ap-hero-heading {
  font-size: 58px; font-weight: 900; color: #fff;
  line-height: 1.02; letter-spacing: -0.045em; margin-bottom: 20px;
}
.ap-hero-heading em {
  font-style: normal; display: block;
  background: linear-gradient(105deg, #e0f2fe 0%, #93c5fd 35%, #818cf8 65%, #67e8f9 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: apShimmer 5s linear infinite;
}

/* Tagline */
.ap-hero-tagline { font-size: 16.5px; font-weight: 500; color: rgba(255,255,255,0.5); line-height: 1.6; max-width: 480px; margin-bottom: 36px; }
.ap-ht-product { font-weight: 800; background: linear-gradient(105deg, #e0f2fe, #93c5fd, #818cf8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Proof points */
.ap-hero-proofpoints { display: flex; flex-direction: column; gap: 11px; margin-bottom: 28px; }
.ap-hpp-item { display: flex; align-items: flex-start; gap: 12px; }
.ap-hpp-icon {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900; color: #6ee7b7; margin-top: 1px;
}
.ap-hpp-text { font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,0.48); line-height: 1.55; }

/* Rule & tags */
.ap-hero-rule { height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04) 60%, transparent); margin-bottom: 24px; }
.ap-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-htag {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px; padding: 7px 14px; font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,0.45); transition: all 0.2s; cursor: default;
  letter-spacing: 0.01em;
}
.ap-htag:hover { background: rgba(255,255,255,0.09); color: rgba(255,255,255,0.82); border-color: rgba(255,255,255,0.18); transform: translateY(-1px); }

/* Hero footer */
.ap-hero-footer {
  position: relative; z-index: 5; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 52px; border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(6,13,31,0.7); backdrop-filter: blur(14px);
  flex-wrap: wrap; gap: 6px;
}
.ap-hcf-left, .ap-hcf-right { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: rgba(255,255,255,0.25); flex-wrap: wrap; }
.ap-hcf-left a, .ap-hcf-right a { color: rgba(255,255,255,0.3); text-decoration: none; transition: color 0.18s; }
.ap-hcf-left a:hover, .ap-hcf-right a:hover { color: rgba(255,255,255,0.7); }
.ap-sep { color: rgba(255,255,255,0.12); }

/* ── Right form panel ── */
.ap-form-panel {
  width: 500px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 44px;
  background: linear-gradient(160deg, #f0f4ff 0%, #f8faff 50%, #eef2ff 100%);
  overflow-y: auto; position: relative; z-index: 5;
}
.ap-form-inner { width: 100%; }

/* Welcome block */
.ap-welcome-block { margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid #e4eaf6; }
.ap-form-heading { font-size: 28px; font-weight: 900; color: #0f172a; margin: 0 0 8px; letter-spacing: -0.04em; line-height: 1.1; }
.ap-heading-pulse {
  background: linear-gradient(110deg, #4f46e5 0%, #7c3aed 45%, #06b6d4 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  background-size: 200% auto; animation: apShimmer 4s linear infinite;
}
.ap-form-sub { font-size: 13.5px; color: #64748b; margin: 0; line-height: 1.65; }
.ap-form-sub strong { color: #4f46e5; font-weight: 700; }

/* Error/success in form */
.ap-form-error   { background: #fff5f5; border: 1px solid #fecaca; border-radius: 8px; padding: 10px 14px; font-size: 13px; color: #dc2626; margin-bottom: 14px; font-weight: 600; }
.ap-form-success { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 10px 14px; font-size: 13px; color: #059669; margin-bottom: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }

/* Fields */
.ap-field-group { margin-bottom: 14px; }
.ap-field-group label { display: block; font-size: 10.5px; font-weight: 700; color: #64748b; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 7px; }
.ap-field-group input:not([type=checkbox]):not([type=radio]) {
  width: 100%; background: #fff; border: 1.5px solid #dde6f5; border-radius: 10px;
  padding: 12px 15px; color: #0f172a; font-family: var(--ap-sans); font-size: 14px;
  outline: none; transition: all 0.2s; box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(79,70,229,0.06);
}
.ap-field-group input:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 4px rgba(79,70,229,0.1);
  background: #fff;
}
.ap-field-group input::placeholder { color: #c0cce0; }
.ap-mono-input { font-family: var(--ap-mono) !important; letter-spacing: 0.12em !important; }

/* Password toggle */
.ap-pw-wrap { position: relative; }
.ap-pw-wrap input { padding-right: 42px !important; }
.ap-pw-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #94a3b8; padding: 4px; }
.ap-pw-toggle:hover { color: #475569; }

/* Forgot row */
.ap-forgot-row { display: flex; justify-content: space-between; align-items: center; margin: -4px 0 16px; }
.ap-remember { font-size: 12.5px; color: #64748b; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.ap-forgot-link { font-size: 12px; color: #4f46e5; font-weight: 600; text-decoration: none; }
.ap-forgot-link:hover { text-decoration: underline; }

/* Primary button */
.ap-btn-primary {
  width: 100%;
  background: linear-gradient(135deg, #3730a3 0%, #4f46e5 50%, #0891b2 100%);
  color: #fff; border: none; border-radius: 11px; padding: 13px 22px;
  font-family: var(--ap-sans); font-size: 14px; font-weight: 700; cursor: pointer;
  transition: all 0.25s;
  box-shadow: 0 4px 22px rgba(79,70,229,0.45), inset 0 1px 0 rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center; gap: 9px;
  letter-spacing: 0.02em;
}
.ap-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(79,70,229,0.55), inset 0 1px 0 rgba(255,255,255,0.2); }
.ap-btn-primary:active { transform: translateY(0); }
.ap-btn-primary:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
.ap-btn-primary .ap-spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: apSpin 0.6s linear infinite; }

/* Divider */
.ap-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0 13px; }
.ap-divider::before, .ap-divider::after { content: ''; flex: 1; height: 1px; background: #e4eaf6; }
.ap-divider span { font-size: 10.5px; color: #a0b0cc; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }

/* Demo role cards */
.ap-demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 15px; }
.ap-demo-grid .ap-demo-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ap-demo-card {
  border: 1.5px solid #e4eaf6; border-radius: 10px; padding: 9px 11px;
  cursor: pointer; transition: all 0.18s; background: #fff;
  box-shadow: 0 1px 3px rgba(79,70,229,0.06);
  display: flex; align-items: center; gap: 10px;
}
.ap-demo-card:hover { border-color: #4f46e5; background: #f5f3ff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(79,70,229,0.15); }
.ap-dc-icon { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.ap-dc-blue   { background: #eef2ff; }
.ap-dc-green  { background: #f0fdf4; }
.ap-dc-yellow { background: #fefce8; }
.ap-dc-cyan   { background: #ecfeff; }
.ap-dc-rose   { background: #fff1f2; }
.ap-dc-name { font-size: 12px; font-weight: 700; color: #1e293b; line-height: 1.2; }
.ap-dc-type { font-size: 10px; color: #94a3b8; margin-top: 2px; }

/* Form link */
.ap-form-link { font-size: 12.5px; color: #64748b; text-align: center; line-height: 1.6; margin-bottom: 0; }
.ap-form-link a { color: #4f46e5; font-weight: 700; text-decoration: none; }
.ap-form-link a:hover { color: #3730a3; text-decoration: underline; }

/* Trust bar */
.ap-trust-bar { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #e4eaf6; flex-wrap: wrap; }
.ap-trust-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #94a3b8; font-weight: 600; }
.ap-tdot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }
.ap-tdot-green  { background: #22c55e; }
.ap-tdot-indigo { background: #4f46e5; }
.ap-tdot-purple { background: #a855f7; }

/* ── Register page ── */
.ap-register-wrap { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; background: var(--ap-light-bg); font-family: var(--ap-sans); }
.ap-register-card { background: #fff; border: 1px solid #e4eaf6; border-radius: 16px; padding: 40px; width: 100%; max-width: 480px; box-shadow: 0 8px 32px rgba(79,70,229,0.08); }
.ap-reg-header h2 { font-size: 24px; font-weight: 900; color: #0f172a; margin: 0 0 6px; letter-spacing: -0.035em; }
.ap-reg-header p  { color: #64748b; font-size: 13.5px; margin: 0 0 24px; }

/* Steps */
.ap-reg-steps { display: flex; align-items: center; margin-bottom: 24px; }
.ap-reg-step  { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: #94a3b8; }
.ap-reg-step.active { color: #4f46e5; }
.ap-reg-step.done   { color: #059669; }
.ap-step-num { width: 28px; height: 28px; border-radius: 50%; border: 2px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0; }
.ap-reg-step.active .ap-step-num { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.ap-reg-step.done   .ap-step-num { background: #059669; border-color: #059669; color: #fff; }
.ap-step-line { flex: 1; height: 1px; background: #e4eaf6; margin: 0 8px; }
.ap-verified-notice { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 10px 14px; font-size: 13px; color: #059669; margin-bottom: 16px; font-weight: 600; }
.ap-field-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ap-success-block { text-align: center; padding: 32px 0; }
.ap-success-icon { width: 64px; height: 64px; border-radius: 50%; background: #f0fdf4; border: 2px solid #86efac; display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 16px; color: #059669; }
.ap-success-block h3 { font-size: 22px; color: #0f172a; margin: 0 0 8px; }
.ap-success-block p  { color: #64748b; }

/* ── Animations ── */
@keyframes apShimmer    { to { background-position: 200% center; } }
@keyframes apLivePulse  { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(52,211,153,0.5);}50%{opacity:0.7;box-shadow:0 0 0 6px rgba(52,211,153,0);} }
@keyframes apSpin       { to { transform: rotate(360deg); } }

/* ── Responsive ── */
@media (max-width: 900px) {
  .ap-hero-panel { display: none; }
  .ap-form-panel { width: 100%; padding: 24px 20px; }
  .ap-topbar { padding: 0 20px; }
}
@media (max-width: 600px) {
  .ap-topbar-links a:not(.ap-topbar-site-btn) { display: none; }
  .ap-field-grid-2 { grid-template-columns: 1fr; }
}

/* ── Demo quick-login cards ─────────────────────────────────── */
.ap-demo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 4px;
}
.ap-demo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s, transform .12s;
  font-family: inherit;
}
.ap-demo-card:hover {
  border-color: var(--demo-color, #2563eb);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--demo-color, #2563eb) 12%, transparent);
  transform: translateY(-1px);
}
.ap-demo-card--active {
  border-color: var(--demo-color, #2563eb);
  background: color-mix(in srgb, var(--demo-color, #2563eb) 6%, #fff);
}
.ap-demo-icon  { font-size: 1.35rem; line-height: 1; }
.ap-demo-label { font-size: 0.72rem; font-weight: 700; color: var(--demo-color, #2563eb); letter-spacing: .03em; text-transform: uppercase; }
.ap-demo-name  { font-size: 0.7rem; color: #64748b; }