/* PurplEdge personal area — V3 theme (same look as the new marketing site).
   Loaded AFTER the page's own styles on /login, /register, /portal and /account.
   It changes appearance only: every id, class and script stays as it is. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700;800&family=Heebo:wght@400;500;700;800&display=swap');

html.pe-v3, html.pe-v3 body, :root {
  --pe-ink: #211932; --pe-muted: #665e73; --pe-purple: #7651e7; --pe-plum: #6c32a6; --pe-deep: #4b176c;
  --pe-lilac: #f0eaff; --pe-paper: #faf9f7; --pe-line: #e6e1e8; --pe-field: #cfc7da; --pe-green: #3f8a67;
  --pe-shadow: 0 18px 48px rgba(34, 18, 51, .10);
}
html.pe-v3, html { background: var(--pe-paper) !important; }
body::before, body::after, main::before { background: none !important; }
html body { background: var(--pe-paper) !important; color: var(--pe-ink) !important;
  font-family: 'DM Sans', Heebo, Arial, sans-serif !important; }
html[dir=rtl] body, html[lang=he] body, body.rtl { font-family: Heebo, 'DM Sans', Arial, sans-serif !important; }
body h1, body h2, body h3, body h4 { color: var(--pe-ink); letter-spacing: -.01em; }

/* ---- the dark cinematic layers go ---- */
.bg-stage, .bg-grain, .aurora, .grain, #bg3d, #bgNet, canvas.bg-net, .blobs, .pe-loader { display: none !important; }
html.pe-loading body > * { visibility: visible !important; }
:focus-visible { outline: 3px solid var(--pe-purple) !important; outline-offset: 2px; }

/* ---- header: the new site's bar ---- */
nav.top, .dock-inner, .dock-inner.dock-top {
  background: rgba(250, 249, 247, .94) !important; backdrop-filter: blur(12px) !important;
  border: 0 !important; border-bottom: 1px solid var(--pe-line) !important; box-shadow: none !important;
  color: var(--pe-ink) !important; min-height: 72px; border-radius: 0 !important;
}
.dock-inner.dock-top { padding: 0 24px !important; gap: 22px !important; }
nav.top a, .dock-inner .navlink, .dock-inner .util { color: var(--pe-ink) !important; font-weight: 600 !important; font-size: 15px !important; }
nav.top .links a:hover, .dock-inner .navlink:hover, .dock-inner .navlink.active { color: var(--pe-plum) !important; }
.dock-inner .nav-ind { background: var(--pe-lilac) !important; box-shadow: none !important; }
.dock-inner .sep { background: var(--pe-line) !important; }
.dock-inner .util { background: #fff !important; border: 1px solid var(--pe-line) !important; border-radius: 999px !important; padding: 6px 12px !important; }
.dock-inner .util.active { border-color: var(--pe-plum) !important; }
.dock-inner .brand span, nav.top .wm { color: var(--pe-ink) !important; font-weight: 800 !important; font-size: 21px; }
.edge-text, nav.top .wm span, .dock-inner .brand .edge-text { background: none !important; -webkit-text-fill-color: var(--pe-purple) !important; color: var(--pe-purple) !important; }
.dock-inner .brand img, nav.top .brand img { width: 30px !important; height: 30px !important; }
nav.top .cta-btn, .pe-cta { background: var(--pe-deep) !important; color: #fff !important; border-radius: 999px !important;
  padding: 12px 22px !important; font-weight: 800 !important; box-shadow: 0 10px 24px rgba(75, 23, 108, .25) !important; border: 0 !important; }
nav.top .lang-switch button { background: #fff !important; color: var(--pe-ink) !important; border: 1px solid var(--pe-line) !important; border-radius: 999px !important; }
nav.top .lang-switch b { color: var(--pe-ink) !important; }
nav.top .menu, .lang-switch .menu { background: #fff !important; border: 1px solid var(--pe-line) !important; box-shadow: var(--pe-shadow) !important; }
nav.top .menu a { color: var(--pe-ink) !important; }
.burger span { background: var(--pe-ink) !important; }

/* ---- buttons: one family, like the site ---- */
.btn-primary, .ac-b, .pmb-send, #upGo, #poBtn, #pwSubmit, #voRecheck, button.primary {
  background: var(--pe-deep) !important; background-image: none !important; color: #fff !important; border: 0 !important;
  border-radius: 999px !important; font-weight: 800 !important; box-shadow: 0 10px 24px rgba(75, 23, 108, .22) !important;
  min-height: 44px; padding-inline: 20px !important; transition: transform .15s, background .15s;
}
.btn-primary:hover, .ac-b:hover { background: var(--pe-plum) !important; transform: translateY(-1px); }
.ac-b.gh, .btn-ghost, #voResend, #prLater, #dpLater, #upCancel, #phCancel, #subKeep {
  background: #fff !important; color: var(--pe-plum) !important; border: 1px solid var(--pe-line) !important; box-shadow: none !important;
}
.ac-b.gh:hover { border-color: var(--pe-plum) !important; background: var(--pe-lilac) !important; }
.magnetic { transform: none !important; }

/* ---- fields ---- */
body input:not([type=checkbox]):not([type=radio]):not([type=range]), body select, body textarea {
  background: #fff !important; color: var(--pe-ink) !important; border: 1px solid var(--pe-field) !important;
  border-radius: 12px !important; box-shadow: none !important; min-height: 44px;
}
body input::placeholder, body textarea::placeholder { color: #9a92a6 !important; }
body input:focus, body select:focus, body textarea:focus { border-color: var(--pe-purple) !important; outline: 2px solid var(--pe-purple) !important; outline-offset: 1px; }
.fg label, .ac-lbl, .ac-fld label { color: var(--pe-ink) !important; font-weight: 700 !important; }

/* ================= LOGIN / REGISTER ================= */
.auth { background: var(--pe-paper) !important; }
.auth .brandside { background: linear-gradient(150deg, #2b1142 0%, #4b176c 55%, #6c32a6 100%) !important; border-radius: 0 !important; }
.auth .brandside, .auth .brandside * { color: #fff !important; -webkit-text-fill-color: currentColor !important; }
.auth .brandside .accent { color: #cdb8ff !important; background: none !important; }
.auth .brandside .sub { color: rgba(255, 255, 255, .82) !important; }
.auth .brandside .bi { background: rgba(255, 255, 255, .12) !important; border: 0 !important; }
.auth .brandside .bs-list span { color: rgba(255, 255, 255, .75) !important; }
.auth .bs-quote { display: none !important; } /* unverifiable testimonial — removed on the new site as well */
.auth .loginside { background: var(--pe-paper) !important; }
.login-card { background: #fff !important; border: 1px solid var(--pe-line) !important; border-radius: 20px !important; box-shadow: var(--pe-shadow) !important; padding: 34px 30px !important; }
.login-card h1 { color: var(--pe-ink) !important; }
.login-card .lc-head p, .login-card .lc-row { color: var(--pe-muted) !important; }
.login-card .lc-row a, .login-card a:not(.btn) { color: var(--pe-plum) !important; font-weight: 700; }
.login-card .avatar { background: var(--pe-lilac) !important; box-shadow: none !important; }
.login-card .lc-info { background: var(--pe-lilac) !important; border: 0 !important; color: var(--pe-ink) !important; border-radius: 12px !important; }
#btnApple { border: 0 !important; }
#btnGoogle { border: 1px solid var(--pe-line) !important; }

/* ================= PORTAL HUB ================= */
#portal .eyebrow { background: #fff !important; color: var(--pe-plum) !important; border: 1px solid var(--pe-line) !important; }
#portal .title, #portal h1 { color: var(--pe-ink) !important; }
#portal .grad { background: none !important; -webkit-text-fill-color: var(--pe-purple) !important; color: var(--pe-purple) !important; }
#portal .sub { color: var(--pe-muted) !important; }
#portal .sub b { color: var(--pe-ink) !important; }
.orbit-stage .ring { border-color: rgba(108, 50, 166, .16) !important; box-shadow: none !important; }
.orbit-stage .deco::before, .orbit-stage .deco::after { display: none !important; }
.orbit-stage .core { background: radial-gradient(circle at 35% 30%, #8a5cf0, var(--pe-deep) 78%) !important;
  box-shadow: 0 24px 60px rgba(75, 23, 108, .30) !important; border: 0 !important; }
.orbit-stage .core, .orbit-stage .core * { color: #fff !important; }
.orbit-stage .cat { background: #fff !important; border: 1px solid var(--pe-line) !important; box-shadow: var(--pe-shadow) !important; }
.orbit-stage .cat:hover { border-color: var(--pe-plum) !important; transform: translateY(-2px); }
.orbit-stage .cat b { color: var(--pe-ink) !important; }
.orbit-stage .cat small { color: var(--pe-muted) !important; }
.orbit-stage .cat .ico { background: var(--pe-lilac) !important; box-shadow: none !important; border: 0 !important; }
#overlay { background: rgba(33, 25, 50, .42) !important; }
#overlay .panel { background: #fff !important; border: 1px solid var(--pe-line) !important; box-shadow: 0 30px 80px rgba(34, 18, 51, .22) !important; }
#overlay .panel h3 { color: var(--pe-ink) !important; }
#overlay .mod { background: var(--pe-paper) !important; border: 1px solid var(--pe-line) !important; color: var(--pe-ink) !important; }
#overlay .mod:hover { background: var(--pe-lilac) !important; border-color: var(--pe-plum) !important; }
#overlay .mod .t { color: var(--pe-ink) !important; }
#overlay .x, #overlay .pico { background: var(--pe-lilac) !important; color: var(--pe-ink) !important; border: 0 !important; }

/* ================= ACCOUNT ================= */
.ac-wrap { gap: 28px !important; }
.ac-side { background: #fff !important; border: 1px solid var(--pe-line) !important; border-radius: 20px !important; box-shadow: var(--pe-shadow) !important; backdrop-filter: none !important; }
.ac-who b { color: var(--pe-ink) !important; }
.ac-av { background: var(--pe-lilac) !important; box-shadow: none !important; }
.ac-planpill, #subNavCnt { background: var(--pe-deep) !important; color: #fff !important; border: 0 !important; }
.ac-nav a { color: var(--pe-ink) !important; border-radius: 12px !important; font-weight: 600 !important; min-height: 44px; }
.ac-nav a:hover { background: var(--pe-paper) !important; }
.ac-nav a.on { background: var(--pe-lilac) !important; color: var(--pe-deep) !important; border: 0 !important; box-shadow: inset 3px 0 0 var(--pe-plum) !important; }
html[dir=rtl] .ac-nav a.on, body.rtl .ac-nav a.on { box-shadow: inset -3px 0 0 var(--pe-plum) !important; }
.ac-navsep { color: var(--pe-muted) !important; font-weight: 800 !important; }
.ac-cnt, .ac-scnt { background: var(--pe-lilac) !important; color: var(--pe-deep) !important; border: 0 !important; }
.ac-subl { color: var(--pe-muted) !important; }
.ac-subl.on, .ac-subl:hover { color: var(--pe-deep) !important; }
.ac-foot { color: var(--pe-muted) !important; border-color: var(--pe-line) !important; }
.ac-panel h1, .ac-panel h2, .ac-head h2, .ac-head h1 { color: var(--pe-ink) !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
.ac-panel p, .ac-head p { color: var(--pe-muted); }
.ac-card, .ac-k, .ac-item, .ac-grp, .ac-fam, .ac-plan, .ac-guide, .ac-filt, .ac-mbox, .ac-modal > div {
  background: #fff !important; border: 1px solid var(--pe-line) !important; border-radius: 18px !important; box-shadow: 0 1px 2px rgba(34, 18, 51, .04) !important; backdrop-filter: none !important;
}
.ac-k .l { color: var(--pe-muted) !important; }
.ac-k .v { color: var(--pe-ink) !important; }
.ac-k .s { color: var(--pe-muted) !important; }
.ac-fpill, .tv-chip, .ac-pkgchip, .ac-as { background: #fff !important; color: var(--pe-ink) !important; border: 1px solid var(--pe-line) !important; border-radius: 999px !important; }
.ac-fpill.on, .tv-chip.on, .ac-pkgchip.on, .ac-as.on, .ac-fpill[aria-pressed=true] { background: var(--pe-lilac) !important; border-color: var(--pe-plum) !important; color: var(--pe-deep) !important; }
.ac-fcnt { background: var(--pe-lilac) !important; color: var(--pe-deep) !important; }
.ac-sym, .ac-row .ac-sym { color: var(--pe-ink) !important; }
.ac-soon { background: var(--pe-paper) !important; color: var(--pe-muted) !important; }
.ac-roles { background: #fff !important; border: 1px solid var(--pe-line) !important; box-shadow: var(--pe-shadow) !important; }
.ac-roles button.on { background: var(--pe-deep) !important; color: #fff !important; }
.ac-modal { background: rgba(33, 25, 50, .42) !important; }
#verifyOverlay > div, #pwSetupOverlay > div { background: #fff !important; border: 1px solid var(--pe-line) !important; }

/* ---- notifications / chat / messages (pe-modbar) ---- */
#pmb-overlay .panel, .pmb-dd { background: #fff !important; border: 1px solid var(--pe-line) !important; }
.util .badge { background: #d13b4b !important; color: #fff !important; }

nav.top .cta-btn { white-space: nowrap; }

/* ---- support chat bubble + accessibility panel ---- */
#gcw-fab { background: var(--pe-deep) !important; background-image: none !important; box-shadow: 0 12px 28px rgba(75, 23, 108, .3) !important; }
#gcw-panel { background: #fff !important; border: 1px solid var(--pe-line) !important; box-shadow: 0 30px 80px rgba(34, 18, 51, .22) !important; color: var(--pe-ink) !important; }
#peA11yPanel { background: #fff !important; border: 1px solid var(--pe-line) !important; box-shadow: 0 30px 80px rgba(34, 18, 51, .22) !important; }
#peA11yPanel .peA11yItem { background: var(--pe-paper) !important; border: 1px solid var(--pe-line) !important; color: var(--pe-ink) !important; }
#peA11yPanel .peA11yItem[aria-pressed=true], #peA11yPanel .peA11yItem.on { background: var(--pe-lilac) !important; border-color: var(--pe-plum) !important; }
@media (max-width: 760px) {
  nav.top .cta-btn { padding: 9px 14px !important; font-size: 13px !important; box-shadow: none !important; }
  /* the orbit becomes a simple list of cards on phones */
  .orbit-stage { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; height: auto !important; min-height: 0 !important;
    width: auto !important; margin: 24px 0 40px !important; transform: none !important; }
  .orbit-stage .deco { display: none !important; }
  .orbit-stage .core, .orbit-stage .cat { position: static !important; inset: auto !important; transform: none !important; animation: none !important;
    width: auto !important; height: auto !important; margin: 0 !important; translate: none !important; }
  .orbit-stage .core { grid-column: 1 / -1; border-radius: 18px !important; padding: 22px !important; display: flex !important; flex-direction: column; align-items: center; }
  .orbit-stage .cat { padding: 14px !important; justify-content: flex-start; }
  .dock-inner.dock-top { padding: 0 12px !important; gap: 10px !important; overflow-x: auto; justify-content: flex-start !important; }
  .login-card { padding: 26px 18px !important; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }