/*
  Xtweep Pro — Phase1theme
  Scope: Auth (login/register/reset/verify-email) + onboarding (interests/onboarding-follow)
  Constraints:
  - No linear-gradient backgrounds on these pages
  - No borders on buttons/cards (use shadows + surface contrast)
*/

/* -------------------------------------------------------------------------- */
/* Tokens (scoped to xtp-pro)                                                 */
/* -------------------------------------------------------------------------- */

body.xtp-pro{
  --xtp-bg: #f6f7fb;
  --xtp-card: #ffffff;
  --xtp-surface: rgba(255,255,255,.86);
  --xtp-fg: #0f1419;
  --xtp-muted: rgba(15,20,25,.62);
  --xtp-link: #1d9bf0;

  /* Primary CTAs (X-like) */
  --xtp-accent: #0f1419;
  --xtp-accentText: #ffffff;

  /* Elevation */
  --xtp-shadow: 0 18px 60px rgba(15,20,25,.10);
  --xtp-shadow-strong: 0 24px 80px rgba(15,20,25,.14);

  /* Inputs */
  --xtp-input: rgba(15,20,25,.06);
  --xtp-input2: rgba(15,20,25,.10);

  /* Focus */
  --xtp-focus: rgba(29,155,240,.18);

  /* Decorative */
  --xtp-wave: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20360%2080%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2C52%20C60%2C22%20120%2C82%20180%2C52%20C240%2C22%20300%2C82%20360%2C52%27%20fill%3D%27none%27%20stroke%3D%27%230f1419%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20opacity%3D%270.18%27/%3E%3C/svg%3E");
}

body.xtp-pro.sv-dark{
  --xtp-bg:#000;
  --xtp-card:#0b0b0c;
  --xtp-surface: rgba(11,11,12,.92);
  --xtp-fg:#ffffff;
  --xtp-muted: rgba(255,255,255,.66);
  --xtp-link:#5ec8ff;

  --xtp-accent:#ffffff;
  --xtp-accentText:#0f1419;

  --xtp-shadow: 0 22px 70px rgba(0,0,0,.55);
  --xtp-shadow-strong: 0 30px 90px rgba(0,0,0,.70);

  --xtp-input: rgba(255,255,255,.06);
  --xtp-input2: rgba(255,255,255,.10);

  --xtp-focus: rgba(94,200,255,.18);

  --xtp-wave: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20360%2080%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2C52%20C60%2C22%20120%2C82%20180%2C52%20C240%2C22%20300%2C82%20360%2C52%27%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20opacity%3D%270.14%27/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------- */
/* Auth pages (login/register/reset/verify-email)                              */
/* -------------------------------------------------------------------------- */

body.xtp-pro.sv-auth-page{
  /* Override legacy auth gradients */
  background: var(--xtp-bg) !important;
  color: var(--xtp-fg);
}

/* Keep auth pages clean: no app chrome */
body.xtp-pro.sv-auth-page .sv-shell{ padding: 0 !important; }

/* Base container */
body.xtp-pro.sv-auth-page .sv-authScreen{
  min-height: 100vh;
  padding: 18px 14px !important;
  align-items: center;
  justify-content: center;
}
body.xtp-pro.sv-auth-page .sv-authCard--v262{
  max-width: 1040px !important;
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.xtp-pro.sv-auth-page .sv-authBrandPane{ display:none !important; }

/* Single panel (mobile-first) */
body.xtp-pro.sv-auth-page .sv-authPanel{
  position: relative;
  overflow: hidden;

  width: 100%;
  min-height: calc(100dvh - 28px);
  padding: 20px 18px 22px !important;

  border: 0 !important;
  border-radius: 26px;

  background: var(--xtp-surface) !important;
  color: var(--xtp-fg) !important;
  box-shadow: var(--xtp-shadow);
  backdrop-filter: blur(10px);
}
body.xtp-pro.sv-auth-page .sv-authPanel::before{
  content: "";
  position: absolute;
  left: -18px;
  right: -18px;
  top: 104px;
  height: 86px;
  background-image: var(--xtp-wave);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  pointer-events: none;
  opacity: .95;
}

body.xtp-pro.sv-auth-page .sv-authHead{ margin: 0 0 10px !important; }
body.xtp-pro.sv-auth-page .sv-authBack{
  border: 0 !important;
  background: var(--xtp-input) !important;
  width: 44px;
  height: 44px;
  border-radius: 999px;
}
body.xtp-pro.sv-auth-page .sv-authBack:hover{ filter: brightness(.98); }

/* Tabs -> pill switch */
body.xtp-pro.sv-auth-page .sv-authTabs{
  border: 0 !important;
  margin: 10px 0 16px !important;
  justify-content: center;
  gap: 10px;
}
body.xtp-pro.sv-auth-page .sv-authTab{
  border: 0 !important;
  border-bottom: 0 !important;
  background: var(--xtp-input) !important;
  color: var(--xtp-muted) !important;
  border-radius: 999px;
  padding: 10px 14px !important;
  min-height: 0 !important;
  font-weight: 800;
}
body.xtp-pro.sv-auth-page .sv-authTab.is-active{
  background: var(--xtp-accent) !important;
  color: var(--xtp-accentText) !important;
}

/* Headline + sub */
body.xtp-pro.sv-auth-page .sv-authTitle--compact{
  text-align: center;
  font-size: 28px !important;
  letter-spacing: -.02em;
  margin-top: 10px !important;
}
body.xtp-pro.sv-auth-page .sv-authSub{
  text-align: center;
  color: var(--xtp-muted) !important;
  margin-top: 8px !important;
  font-size: 14px !important;
}

/* Alerts keep readability; remove borders */
body.xtp-pro.sv-auth-page .sv-authAlert,
body.xtp-pro.sv-auth-page .sv-authOk,
body.xtp-pro.sv-auth-page .sv-authInfo{
  border: 0 !important;
  border-radius: 16px !important;
}

/* Fields: pill, borderless */
body.xtp-pro.sv-auth-page .sv-authFieldLbl{ color: var(--xtp-muted) !important; }
body.xtp-pro.sv-auth-page .sv-authFieldLine{
  border: 0 !important;
  background: var(--xtp-input) !important;
  border-radius: 999px !important;
  min-height: 56px !important;
}
body.xtp-pro.sv-auth-page .sv-authFieldLine:focus-within{
  box-shadow: 0 0 0 5px var(--xtp-focus) !important;
}
body.xtp-pro.sv-auth-page .sv-authFieldLine .sv-authInput{
  border: 0 !important;
  background: transparent !important;
  height: 56px !important;
  border-radius: 999px !important;
  padding: 0 18px !important;
  color: var(--xtp-fg) !important;
  -webkit-text-fill-color: var(--xtp-fg) !important;
  font-size: 15px !important;
}
body.xtp-pro.sv-auth-page .sv-authInput::placeholder{
  color: color-mix(in srgb, var(--xtp-fg) 35%, transparent) !important;
}

/* Password toggle (borderless) */
body.xtp-pro.sv-auth-page .sv-authPwToggle{
  border: 0 !important;
  background: transparent !important;
  border-radius: 999px !important;
}
body.xtp-pro.sv-auth-page .sv-authPwToggle:hover{
  background: color-mix(in srgb, var(--xtp-fg) 8%, transparent) !important;
}

/* Links */
body.xtp-pro.sv-auth-page .sv-authLink{
  color: var(--xtp-link) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}
body.xtp-pro.sv-auth-page .sv-authLink:hover{ opacity: .9; }

/* Primary button: solid, borderless */
body.xtp-pro.sv-auth-page .sv-authSubmit{
  border: 0 !important;
  border-radius: 999px !important;
  height: 54px !important;
  background: var(--xtp-accent) !important;
  color: var(--xtp-accentText) !important;
  font-weight: 1000 !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
  transform: translateY(0);
}
body.xtp-pro.sv-auth-page .sv-authSubmit:hover{
  filter: brightness(.98);
  transform: translateY(-1px);
}

/* Providers: single column, borderless */
body.xtp-pro.sv-auth-page .sv-authProviders{ grid-template-columns: 1fr !important; }
body.xtp-pro.sv-auth-page .sv-authProvider{
  border: 0 !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--xtp-card) 88%, transparent) !important;
  color: var(--xtp-fg) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
}
body.xtp-pro.sv-auth-page.sv-dark .sv-authProvider{
  box-shadow: 0 16px 40px rgba(0,0,0,.42);
}

/* Resend button (verify-email) */
body.xtp-pro.sv-auth-page .sv-authResend{
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--xtp-input) !important;
  color: var(--xtp-fg) !important;
}
body.xtp-pro.sv-auth-page .sv-authResend:hover{ filter: brightness(.98); }

/* Footers */
body.xtp-pro.sv-auth-page .sv-authFoot{
  color: var(--xtp-muted) !important;
  justify-content: center;
  flex-wrap: wrap;
}

/* Tablet: centered card (no borders) */
@media (min-width: 700px) and (max-width: 980px){
  body.xtp-pro.sv-auth-page .sv-authPanel{
    min-height: auto;
    max-width: 640px;
    margin: 20px auto;
    border-radius: 30px;
    box-shadow: var(--xtp-shadow-strong);
  }
}

/* Desktop: split layout (brand + panel) */
@media (min-width: 981px){
  body.xtp-pro.sv-auth-page .sv-authScreen{ padding: 34px 24px !important; }
  body.xtp-pro.sv-auth-page .sv-authCard--v262{
    display: grid !important;
    grid-template-columns: 1.1fr 1fr;
    border-radius: 34px !important;
    overflow: hidden;
    background: var(--xtp-card) !important;
    box-shadow: var(--xtp-shadow-strong) !important;
  }

  body.xtp-pro.sv-auth-page .sv-authBrandPane{
    display: flex !important;
    position: relative;
    padding: 40px 36px;
    color: var(--xtp-fg) !important;
    border: 0 !important;
    background: var(--xtp-card) !important;
  }
  body.xtp-pro.sv-auth-page .sv-authBrandPane::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(520px 520px at 15% 20%, color-mix(in srgb, var(--xtp-link) 22%, transparent), transparent 60%),
      radial-gradient(560px 420px at 80% 80%, color-mix(in srgb, var(--xtp-fg) 10%, transparent), transparent 62%);
    pointer-events: none;
  }

  body.xtp-pro.sv-auth-page .sv-authBrandDesktopMark{
    position: relative;
    border: 0 !important;
    background: var(--xtp-input2) !important;
    color: var(--xtp-fg) !important;
    width: 70px;
    height: 70px;
    border-radius: 20px;
  }
  body.xtp-pro.sv-auth-page .sv-authBrandDesktopTitle{
    position: relative;
    font-size: 44px;
    line-height: 1.05;
  }
  body.xtp-pro.sv-auth-page .sv-authBrandDesktopSub{
    position: relative;
    color: var(--xtp-muted);
    font-size: 16px;
    max-width: 520px;
  }

  body.xtp-pro.sv-auth-page .sv-authPanel{
    min-height: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
    backdrop-filter: none;
    padding: 34px 34px 28px !important;
  }
  body.xtp-pro.sv-auth-page .sv-authPanel::before{ top: 120px; }
  body.xtp-pro.sv-auth-page .sv-authTitle--compact{ text-align: left; }
  body.xtp-pro.sv-auth-page .sv-authSub{ text-align: left; }
  body.xtp-pro.sv-auth-page .sv-authTabs{ justify-content: flex-start; }
}

/* -------------------------------------------------------------------------- */
/* Onboarding pages                                                          */
/* -------------------------------------------------------------------------- */

body.xtp-pro.xtp-onboard-page{
  background: var(--xtp-bg) !important;
}

/* Hide app chrome for onboarding flow */
body.xtp-pro.xtp-onboard-page .sv-side,
body.xtp-pro.xtp-onboard-page .sv-top,
body.xtp-pro.xtp-onboard-page .sv-bottom,
body.xtp-pro.xtp-onboard-page .sv-sideRight{
  display:none !important;
}

body.xtp-pro.xtp-onboard-page .sv-shell{
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 18px 14px 28px !important;
}

body.xtp-pro.xtp-onboard-page .sv-card,
body.xtp-pro.xtp-onboard-page .sv-intWrap{
  border: 0 !important;
  box-shadow: var(--xtp-shadow) !important;
  background: var(--xtp-surface) !important;
  border-radius: 28px !important;
}

/* Buttons on onboarding: borderless */
body.xtp-pro.xtp-onboard-page .sv-btn{
  border: 0 !important;
  background: var(--xtp-input) !important;
  color: var(--xtp-fg) !important;
  border-radius: 999px !important;
}
body.xtp-pro.xtp-onboard-page .sv-primary,
body.xtp-pro.xtp-onboard-page button.sv-primary{
  border: 0 !important;
  background: var(--xtp-accent) !important;
  color: var(--xtp-accentText) !important;
  border-radius: 999px !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
}

/* Interests page polish */
body.xtp-pro.xtp-onboard-page .sv-intTitle{ font-size: 22px !important; }
body.xtp-pro.xtp-onboard-page .sv-intSub{ color: var(--xtp-muted) !important; }
body.xtp-pro.xtp-onboard-page .sv-intToolbar{ gap: 10px !important; }
body.xtp-pro.xtp-onboard-page #sv-topic-filter{
  border: 0 !important;
  background: var(--xtp-input) !important;
  border-radius: 999px !important;
  padding: 12px 14px !important;
}
body.xtp-pro.xtp-onboard-page #sv-topic-filter:focus{
  outline: none !important;
  box-shadow: 0 0 0 5px var(--xtp-focus) !important;
}

/* Suggested users scroller: keep cards borderless if plugin/theme adds borders */
body.xtp-pro.xtp-onboard-page #sv-ob-users > *{
  border: 0 !important;
}