/* Customer portal / login — map onto active landing theme tokens. */

body.lp.lp-cp {
  --cp-primary: var(--t-primary);
  --cp-primary-deep: color-mix(in srgb, var(--t-bg) 55%, var(--t-primary));
  --cp-accent: var(--t-accent, var(--t-primary));
  --cp-bg: var(--t-bg);
  --cp-card: var(--t-surface);
  --cp-text: var(--t-text);
  --cp-muted: var(--t-muted);
  --cp-line: var(--t-border);
  --cp-ok: #22c55e;
  --cp-ok-bg: color-mix(in srgb, #22c55e 14%, var(--t-surface));
  --cp-off: #ef4444;
  --cp-off-bg: color-mix(in srgb, #ef4444 12%, var(--t-surface));
  --cp-warn: #eab308;
  --cp-warn-bg: color-mix(in srgb, #eab308 14%, var(--t-surface));
  --cp-radius: var(--t-radius);
  --cp-shadow: 0 18px 50px color-mix(in srgb, #000 20%, transparent);
  font-family: var(--font-body);
  background: var(--t-bg);
  color: var(--t-text);
  min-height: 100vh;
}

body.lp.lp-cp .cp-app {
  background: transparent;
  color: inherit;
  font-family: inherit;
}

body.lp.lp-cp-login.cp-login,
body.lp.lp-cp .cp-login {
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, color-mix(in srgb, var(--t-primary) 40%, transparent), transparent 55%),
    radial-gradient(ellipse 70% 45% at 100% 110%, color-mix(in srgb, var(--t-accent, var(--t-primary)) 28%, transparent), transparent 50%),
    var(--t-bg);
}

body.lp.lp-cp .cp-orb-a {
  background: var(--t-primary);
  opacity: .22;
}

body.lp.lp-cp .cp-orb-b {
  background: var(--t-accent, var(--t-primary));
  opacity: .18;
}

body.lp.lp-cp .cp-grid {
  background-image:
    linear-gradient(color-mix(in srgb, var(--t-border) 55%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--t-border) 55%, transparent) 1px, transparent 1px);
  opacity: .55;
}

body.lp.lp-cp .cp-login-hero {
  color: var(--t-text);
}

body.lp.lp-cp .cp-login-hero p,
body.lp.lp-cp .cp-hero-points li {
  color: var(--t-muted);
}

body.lp.lp-cp .cp-hero-points i,
body.lp.lp-cp .cp-hero-points .lp-icon {
  color: var(--t-primary);
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

body.lp.lp-cp .cp-hero-points li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

body.lp.lp-cp .cp-brand-mark {
  background: var(--t-primary);
  color: var(--t-primary-fg);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--t-primary) 35%, transparent);
}

body.lp.lp-cp .cp-brand-mark .lp-icon,
body.lp.lp-cp .cp-brand-mark svg {
  width: 1.35rem;
  height: 1.35rem;
}

body.lp.lp-cp .cp-login-card,
body.lp.lp-cp .cp-topbar,
body.lp.lp-cp .cp-tab,
body.lp.lp-cp .cp-stat,
body.lp.lp-cp .cp-panel,
body.lp.lp-cp .cp-item {
  background: color-mix(in srgb, var(--t-surface) 94%, transparent);
  border-color: var(--t-border);
  color: var(--t-text);
}

body.lp.lp-cp .cp-login-card {
  border: 1px solid var(--t-border);
  box-shadow: var(--cp-shadow);
}

body.lp.lp-cp .cp-kicker { color: var(--t-primary); }
body.lp.lp-cp .cp-muted { color: var(--t-muted); }
body.lp.lp-cp .cp-btn-primary {
  background: var(--t-primary);
  color: var(--t-primary-fg);
}
body.lp.lp-cp .cp-btn-primary:hover { filter: brightness(1.05); }
body.lp.lp-cp .cp-link,
body.lp.lp-cp .cp-back { color: var(--t-primary); }
body.lp.lp-cp .cp-phone-wrap,
body.lp.lp-cp .cp-otp-box {
  background: color-mix(in srgb, var(--t-bg) 55%, transparent);
  border-color: var(--t-border);
  color: var(--t-text);
}
body.lp.lp-cp .cp-phone-wrap i { color: var(--t-primary); }
body.lp.lp-cp .cp-otp-box:focus {
  border-color: var(--t-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--t-primary) 18%, transparent);
}

body.lp.lp-cp .cp-topbar {
  background: color-mix(in srgb, var(--t-bg) 72%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid color-mix(in srgb, var(--t-border) 85%, transparent);
}

body.lp.lp-cp .cp-icon-btn {
  background: color-mix(in srgb, var(--t-surface) 90%, transparent);
  border-color: var(--t-border);
  color: var(--t-primary);
}

body.lp.lp-cp .cp-avatar {
  background: var(--t-primary);
  color: var(--t-primary-fg);
}

body.lp.lp-cp .cp-tab {
  box-shadow: none;
  border: 1px solid var(--t-border);
}

body.lp.lp-cp .cp-tab.is-active {
  background: var(--t-primary);
  color: var(--t-primary-fg);
  border-color: transparent;
}

body.lp.lp-cp .cp-hero-card {
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--t-primary) 72%, var(--t-bg)),
      var(--t-primary));
  color: var(--t-primary-fg);
  border: 1px solid color-mix(in srgb, var(--t-primary) 35%, var(--t-border));
}

body.lp.lp-cp .cp-hero-card .cp-muted {
  color: color-mix(in srgb, var(--t-primary-fg) 78%, transparent);
}

body.lp.lp-cp .cp-hero-card .cp-kicker {
  color: color-mix(in srgb, var(--t-primary-fg) 88%, var(--t-accent, #fff));
}

body.lp.lp-cp .cp-chip {
  background: color-mix(in srgb, var(--t-surface) 90%, transparent);
  border: 1px solid var(--t-border);
  color: var(--t-muted);
}

body.lp.lp-cp .cp-chip.is-active {
  background: var(--t-tint);
  border-color: color-mix(in srgb, var(--t-primary) 40%, var(--t-border));
  color: var(--t-primary);
}

body.lp.lp-cp .cp-btn-ghost {
  background: transparent;
  color: var(--t-text);
  border-color: var(--t-border);
}

body.lp.lp-cp .cp-modal {
  background: color-mix(in srgb, #000 45%, transparent);
  position: fixed !important;
  inset: 0;
  z-index: 20000;
}

body.lp.lp-cp .cp-modal-dialog {
  background: var(--t-surface);
  border-color: var(--t-border);
  box-shadow: 0 24px 60px color-mix(in srgb, #000 22%, transparent);
}

body.lp.lp-cp .cp-modal-head {
  border-bottom-color: var(--t-border);
}

body.lp.lp-cp .cp-modal-head h2 { color: var(--t-text); }

body.lp.lp-cp .cp-modal-close {
  color: var(--t-muted);
}

body.lp.lp-cp .cp-modal-close:hover {
  background: var(--t-tint);
  color: var(--t-primary);
}

body.lp.lp-cp .cp-modal-field .cp-input {
  background: color-mix(in srgb, var(--t-bg) 55%, transparent);
  border-color: var(--t-border);
  color: var(--t-text);
}

body.lp.lp-cp .cp-modal-field .cp-input:focus {
  border-color: var(--t-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--t-primary) 16%, transparent);
}

body.lp.lp-cp .cp-modal.is-info .cp-modal-head h2 { color: var(--t-primary); }

body.lp.lp-cp .cp-modal-spinner {
  border-color: color-mix(in srgb, var(--t-primary) 20%, transparent);
  border-top-color: var(--t-primary);
}