/* ============================================================
   DESKTOP REGISTER SCREEN — Stable CSS Grid layout (V2)
   Replaces the earlier absolute-positioned attempt. Three real
   columns on desktop ≥900px; mobile keeps the existing flex
   column flow (no rules apply below 900px). Logged-in desktop
   and mobile shells are completely unaffected — every selector
   is scoped to #setup-new.
   ============================================================ */

/* Default (mobile-first): hide all desktop-only decorative blocks.
   The decorative panels are also hidden when their parent screen
   isn't active (display:none from .screen base rule). */
.ec-reg-desktop-brand,
.ec-reg-desktop-lang,
.ec-reg-desktop-copy,
.ec-reg-desktop-hero,
.ec-reg-desktop-footer,
#setup-new .ec-reg-card-head {
  display: none;
}

/* Mobile flex column — ONLY when the register screen is the active screen.
   Replaces the previously-inline style="display:flex;..." which was forcing
   #setup-new to render even on the public landing page. */
#setup-new.active {
  display: flex;
  flex-direction: column;
}

@media (min-width: 900px) {
  /* ── Page background ──────────────────────────────────── */
  #setup-new.auth-screen--signup {
    overflow: hidden !important;
    background:
      radial-gradient(circle at 18% 32%, rgba(139, 55, 255, 0.20), transparent 32%),
      radial-gradient(circle at 82% 28%, rgba(0, 209, 255, 0.14), transparent 30%),
      radial-gradient(circle at 50% 92%, rgba(138, 91, 255, 0.12), transparent 36%),
      linear-gradient(180deg, #03040b 0%, #050613 53%, #02030a 100%) !important;
  }

  /* Hide mobile topbar on desktop */
  #setup-new .auth-topbar { display: none !important; }

  /* ── Main layout: real 3-column CSS Grid filling the full viewport ────
     The grid fills the entire viewport (inherits `position: fixed; inset: 0`
     from .auth-screen). Columns are pushed to the edges with
     `justify-content: space-between`, so the page truly uses the full
     screen — no outer wrapper "box" around the entire auth layout. Only
     the individual form card / feature cards / hero have their own glass
     styling. Width is explicitly 100vw with zero margin so no centered
     max-width container can re-introduce the boxed look. */
  #setup-new.active {
    display: grid !important;
    /* Left + right columns use 1fr so they stretch into the available
       viewport space — this is what kills the "centered narrow island"
       look on wide screens. The center form is the only column with a
       hard max so the form stays readable. Inner content keeps its own
       max-width (left copy ≤100%, hero img ≤360px), so even when the
       grid track is wider, the visible content stays balanced. */
    grid-template-columns: minmax(280px, 1fr) minmax(440px, 560px) minmax(280px, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    justify-content: stretch !important;
    justify-items: center;
    gap: clamp(24px, 3vw, 56px);
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: clamp(64px, 7vh, 96px) clamp(32px, 4vw, 80px) clamp(56px, 6vh, 84px);
    box-sizing: border-box;
    flex-direction: row !important;
  }

  /* ── Top-left brand badge (small, absolute overlay) ──── */
  #setup-new .ec-reg-desktop-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    position: absolute;
    top: clamp(22px, 3.4vh, 38px);
    left: clamp(28px, 4vw, 56px);
    z-index: 5;
    pointer-events: none;
  }
  #setup-new .ec-reg-desktop-brand img {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    object-fit: cover;
    box-shadow:
      0 0 0 1px rgba(124, 245, 255, 0.28),
      0 0 22px rgba(0, 209, 255, 0.18);
  }
  #setup-new .ec-reg-desktop-brand span {
    font-family: 'Syne', sans-serif;
    font-size: 22px;
    font-weight: 850;
    letter-spacing: -0.05em;
    background: linear-gradient(90deg, #a84dff 0%, #2ddcff 86%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* ── Top-right language picker (proper size, absolute overlay) ── */
  #setup-new .ec-reg-desktop-lang {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    position: absolute;
    top: clamp(20px, 3vh, 32px);
    right: clamp(28px, 4vw, 56px);
    z-index: 5;
    border: 1px solid rgba(151, 166, 255, 0.18);
    border-radius: 999px;
    background: rgba(6, 9, 20, 0.62);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 14px 32px rgba(0,0,0,0.28);
    backdrop-filter: blur(14px) saturate(1.25);
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
  }
  #setup-new .ec-reg-desktop-lang button {
    min-height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(239, 244, 255, 0.86);
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    line-height: 1;
  }
  #setup-new .ec-reg-desktop-lang button:first-child {
    background: rgba(255,255,255,0.07);
    color: #f8fbff;
  }

  /* ── Bottom footer (absolute overlay, full width) ─────── */
  /* The footer spans almost full viewport width near the bottom, which means
     it visually sits on top of the lower portion of the centered form card.
     Making the container itself pointer-events:none — and only re-enabling
     pointer-events on the <a> link children — guarantees that clicks on the
     "Account erstellen" button, AGB/Datenschutz checkboxes, and the Login
     link inside the card always reach the form, never the footer overlay.
     Also dropped z-index below the form card as a second safety layer. */
  #setup-new .ec-reg-desktop-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    position: absolute;
    left: clamp(28px, 4vw, 56px);
    right: clamp(28px, 4vw, 56px);
    bottom: clamp(20px, 3.2vh, 34px);
    z-index: 1;
    color: rgba(208, 219, 242, 0.55);
    font-size: 12px;
    pointer-events: none;
  }
  #setup-new .ec-reg-desktop-footer b { color: #35d7ff; font-weight: 700; }
  #setup-new .ec-reg-desktop-footer a {
    color: rgba(208, 219, 242, 0.78);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s ease;
    pointer-events: auto;
  }
  #setup-new .ec-reg-desktop-footer a:hover { color: #2ddcff; }
  #setup-new .ec-reg-desktop-footer .ec-rdf-dot { color: rgba(208, 219, 242, 0.3); }

  /* ── Column 1: Left info copy (anchored to left edge of column) ─── */
  #setup-new .ec-reg-desktop-copy {
    display: block !important;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  #setup-new .ec-reg-desktop-copy h1 {
    margin: 0;
    color: #f7f9ff;
    font-family: 'Syne', sans-serif;
    font-size: clamp(28px, 3vw, 48px);
    line-height: 1.04;
    font-weight: 850;
    letter-spacing: -0.05em;
  }
  #setup-new .ec-reg-desktop-copy h1 span {
    background: linear-gradient(90deg, #a54dff 0%, #31d8ff 92%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  #setup-new .ec-reg-desktop-copy p {
    margin: 12px 0 0;
    color: rgba(232, 239, 255, 0.7);
    font-size: clamp(13px, 1vw, 16px);
    line-height: 1.45;
  }
  #setup-new .ec-reg-desktop-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: clamp(18px, 2.6vh, 28px);
  }
  #setup-new .ec-reg-desktop-features .ec-rdf-card {
    min-height: 62px;
    padding: 10px 12px 10px 42px;
    position: relative;
    border: 1px solid rgba(124, 106, 247, 0.18);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(13, 18, 36, 0.74), rgba(5, 18, 29, 0.5));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 14px 30px rgba(0,0,0,0.18);
    backdrop-filter: blur(14px) saturate(1.18);
    -webkit-backdrop-filter: blur(14px) saturate(1.18);
  }
  #setup-new .ec-reg-desktop-features .ec-rdf-card em {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: 13px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    border-radius: 8px;
    background: rgba(124, 106, 247, 0.18);
    color: #c9b8ff;
  }
  #setup-new .ec-rdf-card--key em   { background: rgba(255, 204, 64, 0.16); color: #ffcf6b; }
  #setup-new .ec-rdf-card--track em { background: rgba(255, 80, 100, 0.16); color: #ff7a92; }
  #setup-new .ec-rdf-card--de em    { background: rgba(255,255,255,0.08); color: #f0f4ff; font-size: 10px; }
  #setup-new .ec-reg-desktop-features strong,
  #setup-new .ec-reg-desktop-trust strong {
    display: block;
    color: #f0f4ff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
  }
  #setup-new .ec-reg-desktop-features small,
  #setup-new .ec-reg-desktop-trust small {
    display: block;
    margin-top: 4px;
    color: rgba(210, 221, 244, 0.55);
    font-size: 10px;
    line-height: 1.35;
  }
  #setup-new .ec-reg-desktop-trust {
    margin-top: clamp(16px, 2.2vh, 24px);
    padding-left: 46px;
    position: relative;
  }
  #setup-new .ec-reg-desktop-trust::before {
    content: '◇';
    position: absolute;
    left: 0;
    top: -2px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: #35d7ff;
    border-radius: 11px;
    border: 1px solid rgba(53, 215, 255, 0.16);
    background: rgba(6, 12, 24, 0.46);
    font-size: 16px;
  }

  /* ── Column 2: Center register card ────────────────────── */
  /* Reliable scroll: align-self:center + max-height gives the card a
     bounded box; everything inside scrolls cleanly. Extra padding-bottom
     so the AGB rows + submit button + Login link are never flush against
     the inner scrollbar edge. */
  #setup-new .auth-shell--wide {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    width: 100% !important;
    max-width: 560px !important;
    height: auto !important;
    max-height: calc(100dvh - 140px) !important;
    margin: 0 auto !important;
    padding: clamp(20px, 2vw, 28px) clamp(20px, 2.2vw, 28px) clamp(30px, 3.4vh, 44px) !important;
    border-radius: 24px !important;
    border: 1px solid rgba(124, 106, 247, 0.30) !important;
    background:
      radial-gradient(circle at 0% 0%, rgba(147,51,234,0.16), transparent 36%),
      radial-gradient(circle at 100% 100%, rgba(0,209,255,0.12), transparent 34%),
      linear-gradient(145deg, rgba(17, 13, 38, 0.88), rgba(5, 13, 26, 0.94)) !important;
    box-shadow:
      0 28px 80px rgba(0,0,0,0.5),
      inset 0 1px 0 rgba(255,255,255,0.05),
      0 0 40px rgba(124,106,247,0.16) !important;
    gap: 14px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    min-height: 0 !important;
    position: relative !important;
    z-index: 3 !important;
    pointer-events: auto !important;
    /* Cancel mobile inline flex:1 */
    flex: 0 1 auto !important;
  }

  /* Inner card scrollbar styling so it's visible and usable */
  #setup-new .auth-shell--wide::-webkit-scrollbar { width: 10px; }
  #setup-new .auth-shell--wide::-webkit-scrollbar-track { background: transparent; }
  #setup-new .auth-shell--wide::-webkit-scrollbar-thumb {
    background: rgba(124, 106, 247, 0.35);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  #setup-new .auth-shell--wide::-webkit-scrollbar-thumb:hover {
    background: rgba(124, 106, 247, 0.6);
    background-clip: padding-box;
    border: 2px solid transparent;
  }

  /* Make sure captcha card and form rows always sit above any
     decorative siblings and never receive pointer-events:none */
  #setup-new .auth-shell--wide .auth-captcha-card,
  #setup-new .auth-shell--wide .auth-consent-card,
  #setup-new .auth-shell--wide .input-group,
  #setup-new .auth-shell--wide .input-with-gen,
  #setup-new .auth-shell--wide .auth-inline-actions,
  #setup-new #btn-create-acc {
    position: relative;
    z-index: 1;
    pointer-events: auto !important;
  }

  /* Blanket safety: every real interactive control inside the form card
     stays clickable, regardless of decorative/pseudo-element ordering. */
  #setup-new .auth-shell--wide input,
  #setup-new .auth-shell--wide button,
  #setup-new .auth-shell--wide textarea,
  #setup-new .auth-shell--wide select,
  #setup-new .auth-shell--wide a,
  #setup-new .auth-shell--wide label {
    pointer-events: auto !important;
    position: relative;
    z-index: 1;
  }
  /* Lang picker buttons (top-right overlay) must also stay clickable */
  #setup-new .ec-reg-desktop-lang,
  #setup-new .ec-reg-desktop-lang button {
    pointer-events: auto !important;
  }

  /* Brand/title head inside the card */
  #setup-new .ec-reg-card-head {
    display: block !important;
    text-align: center;
    padding: 2px 0 4px;
  }
  #setup-new .ec-reg-card-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
  }
  #setup-new .ec-reg-card-logo img {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(124, 245, 255, 0.28), 0 0 18px rgba(0, 209, 255, 0.18);
  }
  #setup-new .ec-reg-card-logo span {
    font-family: 'Syne', sans-serif;
    font-size: 18px;
    font-weight: 850;
    letter-spacing: -0.045em;
    background: linear-gradient(90deg, #a84dff 0%, #2ddcff 86%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  #setup-new .ec-reg-card-title {
    font-family: 'Syne', 'Inter', sans-serif;
    font-size: clamp(22px, 1.9vw, 28px);
    font-weight: 850;
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: #ffffff;
    background: linear-gradient(135deg, #ffffff 0%, #c9d4ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  #setup-new .ec-reg-card-subtitle {
    margin-top: 6px;
    font-size: 13px;
    color: rgba(210, 221, 244, 0.62);
    line-height: 1.45;
  }

  /* Slightly compact labels in the desktop card */
  #setup-new .auth-shell--wide .input-group label {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: rgba(180, 200, 240, 0.75) !important;
    font-family: 'JetBrains Mono', monospace !important;
  }
  #setup-new .auth-shell--wide .input-group label span {
    text-transform: none !important;
    letter-spacing: 0 !important;
  }
  #setup-new .auth-shell--wide .auth-divider-line { margin: 2px 0 !important; }
  #setup-new .auth-shell--wide .auth-security-card {
    padding: 10px 14px !important;
    font-size: 11px !important;
  }
  #setup-new .auth-shell--wide .auth-password-feedback {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px;
    row-gap: 4px;
  }
  #setup-new .auth-shell--wide .auth-password-feedback .auth-password-note,
  #setup-new .auth-shell--wide .auth-password-feedback .auth-password-weak {
    grid-column: 1 / -1;
  }
  #setup-new .auth-shell--wide .auth-consent-card {
    padding: 11px 14px !important;
    background: rgba(124, 106, 247, 0.06) !important;
  }
  #setup-new .auth-shell--wide .auth-consent-card label {
    font-size: 12.5px !important;
  }
  #setup-new #btn-create-acc {
    padding: 14px !important;
    font-size: 15px !important;
    margin-top: 6px !important;
  }

  /* ── Column 3: Right hero panel (visually centered within its column) ──
     Previously anchored to the right edge of column 3 with `justify-self:
     end`, which on wider viewports pushed the shield uncomfortably close
     to the page edge and away from the form. Centering inside the column
     track keeps the hero clearly on the right side of the layout (column
     3 of the 3-column grid) while sitting visually balanced — not flush
     against the outer edge. The hero's floating tags use right:0 / left:0
     relative to this box, so they move with it and stay aligned with the
     shield image. */
  #setup-new .ec-reg-desktop-hero {
    display: flex !important;
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    position: relative;
    width: 100%;
    max-width: 440px;
    min-width: 0;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    filter: drop-shadow(0 0 36px rgba(121, 66, 255, 0.26)) drop-shadow(0 0 22px rgba(0, 209, 255, 0.14));
  }
  #setup-new .ec-reg-desktop-hero::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 4%;
    width: 70%;
    height: 14%;
    transform: translateX(-50%) perspective(600px) rotateX(72deg);
    border-radius: 999px;
    background: radial-gradient(ellipse at center, rgba(210, 63, 255, 0.4), transparent 52%);
    filter: blur(4px);
    z-index: 0;
    pointer-events: none;
  }
  #setup-new .ec-reg-desktop-hero img {
    width: 100%;
    max-width: 360px;
    height: auto;
    display: block;
    border-radius: 20px;
    position: relative;
    z-index: 1;
  }

  /* Floating hero tags — kept inside hero column bounds (no negative offsets) */
  #setup-new .ec-reg-hero-tag {
    position: absolute;
    display: inline-grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;
    padding: 9px 14px 9px 11px;
    border: 1px solid rgba(124, 106, 247, 0.32);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(20, 16, 42, 0.88), rgba(8, 12, 26, 0.94));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      0 14px 32px rgba(0,0,0,0.4),
      0 0 18px rgba(124,106,247,0.16);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    pointer-events: none;
    font-family: 'JetBrains Mono', monospace;
    z-index: 3;
  }
  #setup-new .ec-reg-hero-tag em {
    grid-row: 1 / span 2;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: 15px;
    border-radius: 9px;
    background: rgba(124, 106, 247, 0.20);
    color: #b6c9ff;
  }
  #setup-new .ec-reg-hero-tag b {
    grid-column: 2;
    grid-row: 1;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #ffffff;
    line-height: 1.1;
  }
  #setup-new .ec-reg-hero-tag i {
    grid-column: 2;
    grid-row: 2;
    font-style: normal;
    font-size: 9.5px;
    font-weight: 650;
    letter-spacing: 0.08em;
    color: rgba(180, 200, 240, 0.6);
    line-height: 1.1;
  }
  /* Place tags within column 3 — no negative offsets, so no overflow */
  #setup-new .ec-reg-hero-tag--e2e  { top: 4%;  right: 0; }
  #setup-new .ec-reg-hero-tag--logs { top: 30%; right: 0; }
  #setup-new .ec-reg-hero-tag--anon { top: 36%; left: 0; }
  #setup-new .ec-reg-hero-tag--msg  { top: 62%; right: 0; }

  #setup-new .ec-reg-hero-caption {
    position: absolute;
    bottom: -12%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-align: center;
    line-height: 1.5;
    color: transparent;
    background: linear-gradient(90deg, #a84dff 0%, #2ddcff 92%);
    -webkit-background-clip: text;
    background-clip: text;
    white-space: nowrap;
    pointer-events: none;
  }
}

/* ── Narrower desktop / standard laptops: collapse to 2 cols (hide hero) ── */
/* Bumped to 1279px so common 1280×800 / 1366×768 laptops don't try to fit
   three columns into a width that can't hold them. All scoped to .active
   so they never apply on the public landing page. */
@media (min-width: 900px) and (max-width: 1279px) {
  #setup-new.active {
    grid-template-columns: minmax(260px, 1fr) minmax(440px, 560px) !important;
    gap: clamp(28px, 3.5vw, 56px) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    justify-content: stretch !important;
    padding: clamp(64px, 7vh, 96px) clamp(28px, 3.5vw, 64px) clamp(56px, 6vh, 84px) !important;
  }
  #setup-new.active .ec-reg-desktop-hero { display: none !important; }
}

/* ── Very narrow desktop: form only ── */
@media (min-width: 900px) and (max-width: 1023px) {
  #setup-new.active {
    grid-template-columns: minmax(420px, 600px) !important;
    gap: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    justify-content: center !important;
    padding: clamp(56px, 6vh, 80px) clamp(20px, 3vw, 40px) clamp(48px, 5vh, 72px) !important;
  }
  #setup-new.active .ec-reg-desktop-copy,
  #setup-new.active .ec-reg-desktop-hero { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────
   REGISTER CARD — CAPTCHA + BOTTOM AREA READABILITY (desktop ≥900px)
   Visual-only fix: previously the captcha image, ELITE-SICHERHEITSCHECK
   header and the lower legal/submit area looked squeezed inside the
   scrollable register card. Captcha logic is untouched — these rules
   only widen the SVG image, restore breathing room around the captcha
   card and consent cards, and guarantee the bottom of the form (AGB
   checkboxes, "Account erstellen" button and Login link) sits clear of
   the card's inner scroll edge. Strictly scoped to #setup-new.
   ───────────────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  #setup-new .auth-shell--wide .ec-reg-captcha-card {
    padding: 18px 18px 16px !important;
    margin: 6px 0 !important;
  }
  #setup-new .auth-shell--wide .ec-reg-captcha-head {
    margin-bottom: 12px !important;
  }
  #setup-new .auth-shell--wide .ec-reg-captcha-card .auth-captcha-title {
    font-size: 12.5px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }
  #setup-new .auth-shell--wide .ec-reg-captcha-img {
    width: 100% !important;
    max-width: 320px !important;
    min-height: 92px !important;
    height: auto !important;
    margin: 0 auto 14px !important;
    background: #0d0d1a !important;
    object-fit: contain !important;
    display: block !important;
  }
  #setup-new .auth-shell--wide .ec-reg-captcha-input {
    min-height: 46px !important;
  }
  #setup-new .auth-shell--wide .ec-reg-captcha-refresh {
    min-height: 46px !important;
    padding: 0 16px !important;
  }
  #setup-new .auth-shell--wide .ec-reg-captcha-hint {
    margin-top: 10px !important;
    min-height: 16px !important;
  }

  /* Restore a little vertical air around legal checkboxes and the
     submit/login area so nothing reads as clipped at the card edge. */
  #setup-new .auth-shell--wide .auth-consent-card {
    padding: 13px 14px !important;
  }
  #setup-new .auth-shell--wide #btn-create-acc {
    margin-top: 10px !important;
  }
  #setup-new .auth-shell--wide .auth-inline-actions {
    margin-top: 6px !important;
    padding-bottom: 4px !important;
  }
}