/* Story 63.8: the entry pages under the staff-only new-design switch:
   onboarding (wizard steps + complete), connect, the account/* pages
   (login, signup, logout, password reset, verification sent, email confirm,
   account deleted) and allauth's bundled pages rendered through
   account/_allauth_new_design.html. Linked after components_new_design.css,
   only when the switch is on. Story 11 merges it into the token file.
   Epic 63 fix-6: the signup "Request an invite" trigger is a solid fill again
   (no inline style on the switch-on side), and allauth's bundled pages show
   "Messages:" and "Menu:" in quiet boxes above the card (.allauth-box).
   Epic 63 stitch-8 (Brian 2026-10-22, stitch-mobile login / signup /
   onboarding / connect): on a phone the auth card, its buttons and
   connect's OAuth card and buttons join the stitch-1 kit lists
   (app_new_design.css); the end of the phone block holds the rest: card
   padding without the 3px top edge, the 30px title, secondary labels,
   48px sunken fields, the filled buttons' 600 and focus fill, the quiet
   invite trigger, the 15px footer, the wizard step line / bar / header /
   headings, and connect frameless with a 28px heading, a mono status box,
   a 48px mono field and red quiet Disconnect buttons. Looks only. */

/* ---------- The auth card grammar (also carries logout / password reset,
   whose own <style> is off-only, and verification sent, which had none) ---------- */
html[data-design="new"] .auth-container {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}
html[data-design="new"] .auth-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 440px;
  padding: 40px;
  background: var(--tt-surface);
  color: var(--tt-text-primary);
  border: 1px solid var(--tt-border-neutral);
  border-radius: var(--tt-radius-lg);
  box-shadow: var(--tt-shadow-sm);
}
html[data-design="new"] .auth-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--tt-card-accent);
}
html[data-design="new"] .auth-card--wide {
  max-width: 720px;
}
html[data-design="new"] .auth-header {
  text-align: center;
  margin-bottom: 32px;
}
html[data-design="new"] .auth-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--tt-radius-full);
  background: var(--tt-tile-bg);
  border: 1px solid var(--tt-tile-border);
}
html[data-design="new"] .auth-icon i {
  font-size: 24px;
  color: var(--tt-accent-text);
}
html[data-design="new"] .auth-title {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--tt-text-primary);
  margin-bottom: 8px;
}
html[data-design="new"] .auth-subtitle {
  font-size: 14px;
  line-height: 20px;
  color: var(--tt-text-secondary);
  margin: 0;
}
html[data-design="new"] .auth-form .form-label,
html[data-design="new"] .auth-form label {
  font-size: 14px;
  font-weight: 500;
  color: var(--tt-text-primary);
}
html[data-design="new"] .auth-form .form-check-label {
  font-weight: 400;
  color: var(--tt-text-secondary);
}
html[data-design="new"] .auth-submit,
html[data-design="new"] .btn-primary.auth-submit {
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  border: 0;
  border-radius: var(--tt-radius-md);
  background: var(--tt-primary);
  color: var(--tt-nav-text-active);
}
html[data-design="new"] .auth-submit:hover,
html[data-design="new"] .auth-submit:focus {
  background: var(--tt-primary-dark);
  color: var(--tt-nav-text-active);
}
/* Epic 63 fix-6 row 8: the invite-request trigger, the same solid fill as
   "Create Account". :hover / :focus are named because Bootstrap's .btn:hover
   sets its own text colour. */
html[data-design="new"] #invite-request-trigger {
  background: var(--tt-primary);
  color: var(--tt-on-fill);
  border: 0;
  border-radius: var(--tt-radius-md);
  font-size: 15px;
  font-weight: 600;
  padding: 10px 0;
}
html[data-design="new"] #invite-request-trigger:hover,
html[data-design="new"] #invite-request-trigger:focus {
  background: var(--tt-primary-dark);
  color: var(--tt-on-fill);
}
html[data-design="new"] .auth-card .btn-outline-secondary,
html[data-design="new"] .auth-secondary {
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--tt-radius-md);
}
html[data-design="new"] .auth-link {
  color: var(--tt-accent-text);
  font-weight: 500;
}
html[data-design="new"] .auth-footer {
  text-align: center;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--tt-divider);
}
html[data-design="new"] .auth-footer p,
html[data-design="new"] .auth-footer .small {
  font-size: 14px;
  color: var(--tt-text-secondary);
}

/* ---------- Onboarding wizard ---------- */
html[data-design="new"] .wizard-progress-text {
  font-size: 13px;
  font-weight: 500;
  font-family: var(--tt-font-mono);
  color: var(--tt-text-secondary);
}
html[data-design="new"] .wizard-progress-bar {
  background: var(--tt-quiet-bg);
}
html[data-design="new"] .wizard-progress-fill {
  background: var(--tt-primary);
}
html[data-design="new"] .wizard-section h3 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  border-bottom: 1px solid var(--tt-divider);
}
html[data-design="new"] .wizard-nav {
  border-top-color: var(--tt-divider);
}
html[data-design="new"] .auth-form .badge[style] {
  font-weight: 500;
}
html[data-design="new"] .toggle-option.active {
  color: var(--tt-nav-text-active);
}

/* Complete page (extends base.html directly). */
html[data-design="new"] .onboarding-complete-container .display-3 {
  font-size: 36px;
  line-height: 40px;
  font-weight: 600;
  letter-spacing: -0.025em;
}
html[data-design="new"] .onboarding-complete-container .card {
  border-radius: var(--tt-radius-lg);
}
html[data-design="new"] .onboarding-complete-container .card-header.text-white,
html[data-design="new"] .onboarding-complete-container .card-header.text-dark {
  color: var(--tt-text-primary) !important; /* overrides Bootstrap `.text-white` / `.text-dark` (!important) */
}
html[data-design="new"] .onboarding-complete-container .card-header h3,
html[data-design="new"] .onboarding-complete-container .card-header h4 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--tt-text-primary);
}
html[data-design="new"] .onboarding-complete-container .badge.rounded-circle {
  font-family: var(--tt-font-mono);
}
html[data-design="new"] .onboarding-complete-container .btn-lg {
  font-size: 16px;
  font-weight: 600;
}

/* ---------- Connect ---------- */
html[data-design="new"] main h2 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
html[data-design="new"] .btn-info,
html[data-design="new"] .btn-warning {
  border: 1px solid var(--tt-border-neutral);
  font-weight: 500;
}
html[data-design="new"] .btn-info {
  background: var(--tt-info-light);
  color: var(--tt-info);
  border-color: var(--tt-info);
}
html[data-design="new"] .btn-info:hover,
html[data-design="new"] .btn-info:focus {
  background: var(--tt-info-light);
  color: var(--tt-info);
}
html[data-design="new"] .btn-warning {
  background: var(--tt-warning-light);
  color: var(--tt-warning);
  border-color: var(--tt-warning);
}
html[data-design="new"] .btn-warning:hover,
html[data-design="new"] .btn-warning:focus {
  background: var(--tt-warning-light);
  color: var(--tt-warning);
}
html[data-design="new"] main form p > label {
  font-size: 14px;
  font-weight: 500;
  color: var(--tt-text-primary);
}

/* ---------- allauth bundled pages (account/_allauth_new_design.html) ---------- */
html[data-design="new"] .allauth-page {
  max-width: 560px;
  margin: 32px auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
html[data-design="new"] .allauth-card {
  position: relative;
  overflow: hidden;
  padding: 32px;
  background: var(--tt-surface);
  color: var(--tt-text-primary);
  border: 1px solid var(--tt-border-neutral);
  border-radius: var(--tt-radius-lg);
  box-shadow: var(--tt-shadow-sm);
}
html[data-design="new"] .allauth-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--tt-card-accent);
}
html[data-design="new"] .allauth-card h1 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
html[data-design="new"] .allauth-card h2 {
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
}
html[data-design="new"] .allauth-card p,
html[data-design="new"] .allauth-card label {
  font-size: 14px;
  line-height: 20px;
  color: var(--tt-text-secondary);
}
html[data-design="new"] .allauth-card label {
  display: block;
  font-weight: 500;
  color: var(--tt-text-primary);
  margin-bottom: 4px;
}
html[data-design="new"] .allauth-card input[type="text"],
html[data-design="new"] .allauth-card input[type="email"],
html[data-design="new"] .allauth-card input[type="password"],
html[data-design="new"] .allauth-card select {
  display: block;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 16px;
  font-size: 14px;
  background: var(--tt-surface);
  color: var(--tt-text-primary);
  border: 1px solid var(--tt-border-neutral);
  border-radius: var(--tt-radius-md);
}
html[data-design="new"] .allauth-card input:focus,
html[data-design="new"] .allauth-card select:focus {
  outline: 2px solid var(--tt-border-focus);
  outline-offset: 1px;
}
html[data-design="new"] .allauth-card button {
  padding: 10px 20px;
  margin: 4px 8px 4px 0;
  font-size: 14px;
  font-weight: 500;
  background: var(--tt-quiet-bg);
  color: var(--tt-text-primary);
  border: 1px solid var(--tt-border-neutral);
  border-radius: var(--tt-radius-md);
}
html[data-design="new"] .allauth-card form:only-of-type button[type="submit"]:first-of-type {
  background: var(--tt-primary);
  color: var(--tt-nav-text-active);
  border-color: var(--tt-primary);
}
html[data-design="new"] .allauth-card a {
  color: var(--tt-accent-text);
  font-size: 14px;
}
html[data-design="new"] .allauth-card ul {
  padding-left: 20px;
}
html[data-design="new"] .allauth-card table {
  width: 100%;
  font-size: 14px;
}
/* Epic 63 fix-6 rows 9-10: "Messages:" (only with a message) and "Menu:"
   in quiet boxes, above the card, in allauth's bundled order. */
html[data-design="new"] .allauth-box {
  padding: 16px 20px;
  background: var(--tt-surface);
  border: 1px solid var(--tt-border-neutral);
  border-radius: var(--tt-radius-lg);
  font-size: 14px;
  line-height: 20px;
}
html[data-design="new"] .allauth-box strong {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--tt-text-primary);
}
html[data-design="new"] .allauth-box ul {
  margin: 0;
  padding-left: 20px;
}
html[data-design="new"] .allauth-box li {
  color: var(--tt-text-primary);
}
html[data-design="new"] .allauth-box a {
  color: var(--tt-accent-text);
}

/* ---------- Single-card pages (email confirm, account deleted) ---------- */
html[data-design="new"] .card h1.h4 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}
html[data-design="new"] .card .lead {
  font-size: 16px;
  line-height: 24px;
  color: var(--tt-text-secondary);
}

/* Onboarding TastyTrade step: the OAuth / sandbox tabs. */
html[data-design="new"] .nav-tabs {
  border-bottom-color: var(--tt-divider);
}
html[data-design="new"] .nav-tabs .nav-link {
  color: var(--tt-accent-text);
  font-size: 14px;
  font-weight: 500;
}
html[data-design="new"] .nav-tabs .nav-link.active {
  color: var(--tt-text-primary);
  background: var(--tt-surface);
  border-color: var(--tt-divider) var(--tt-divider) var(--tt-surface);
}

/* ---------- Epic 63 phone-9 (CAP-11, phone-mockups.md phone-9): the
   onboarding wizard and the entry pages on a phone (mobile-mockups
   onboarding.html / small-pages.html rows 7-8). Up to 575.98px only:
   desktop and tablet unchanged. Fields get 16px / 44px from the phone-1
   shared field rule (app_new_design.css); the allauth card's own 14px field
   rule out-specifies it, so it is restated here. Radios and checkboxes:
   22px with a 2px ring in the secondary text colour (>= 3:1 on the card in
   both modes); buttons and links >= 44px tall, wizard buttons and Sign In
   48px; helper notes 15px. ---------- */
@media (max-width: 575.98px) {
  /* The card gives the form the width (40px padding inside a 16px gutter). */
  html[data-design="new"] .auth-container { padding: 16px 0; min-height: 0; }
  html[data-design="new"] .auth-card { padding: 24px 16px; }
  html[data-design="new"] .auth-header { margin-bottom: 24px; }
  html[data-design="new"] .wizard-progress-text { font-size: 14px; line-height: 20px; }
  html[data-design="new"] .auth-subtitle { font-size: 16px; line-height: 24px; }
  html[data-design="new"] .wizard-section h3 { font-size: 18px; line-height: 26px; }
  html[data-design="new"] .auth-form .form-label,
  html[data-design="new"] .auth-form label { font-size: 15px; line-height: 22px; }
  html[data-design="new"] .auth-form .form-text,
  html[data-design="new"] .auth-card .form-text { font-size: 15px; line-height: 22px; }

  /* Onboarding row 1: risk tolerance, one choice per line, the circle left
     of its own label, 48px rows with dividers, the chosen row tinted. */
  html[data-design="new"] .auth-form .d-flex.flex-wrap:has(> label > input[name="risk_tolerance"]) {
    flex-direction: column; flex-wrap: nowrap; gap: 0 !important; /* overrides Bootstrap .gap-3 (!important) */
    border: 1px solid var(--tt-border-neutral); border-radius: var(--tt-radius-md); overflow: hidden;
  }
  html[data-design="new"] .auth-form label:has(> input[name="risk_tolerance"]) {
    min-height: 48px; padding: 0 14px; gap: 14px !important; /* overrides Bootstrap .gap-2 (!important) */
    font-size: 16px; line-height: 24px; margin: 0; border-bottom: 1px solid var(--tt-divider);
  }
  html[data-design="new"] .auth-form label:has(> input[name="risk_tolerance"]):last-child { border-bottom: 0; }
  html[data-design="new"] .auth-form label:has(> input[name="risk_tolerance"]:checked) { background: var(--tt-info-light); }

  /* Onboarding row 2: radios and checkboxes 22px, 2px ring; the native
     radios (strategy cards, the notification step's Django radios,
     allauth's email list) drawn the same way. */
  html[data-design="new"] main .form-check-input,
  html[data-design="new"] .auth-form input[type="radio"]:not(.form-check-input),
  html[data-design="new"] .allauth-card input[type="radio"] {
    width: 22px; height: 22px; flex-shrink: 0;
    border: 2px solid var(--tt-text-secondary); background-color: var(--tt-surface);
  }
  html[data-design="new"] main .form-check-input:checked { border-color: var(--tt-primary); background-color: var(--tt-primary); }
  html[data-design="new"] .auth-form input[type="radio"]:not(.form-check-input),
  html[data-design="new"] .allauth-card input[type="radio"] {
    -webkit-appearance: none; appearance: none; border-radius: 50%; margin: 2px 0 0;
  }
  html[data-design="new"] .auth-form input[type="radio"]:not(.form-check-input):checked,
  html[data-design="new"] .allauth-card input[type="radio"]:checked {
    border-color: var(--tt-primary); background-color: var(--tt-primary); box-shadow: inset 0 0 0 4px var(--tt-surface);
  }
  html[data-design="new"] .template-card { padding: 14px; gap: 12px; }
  html[data-design="new"] main .badge { font-size: 14px; }

  /* Onboarding row 4 / small row 8: a checkbox and its label one >= 44px
     row ("Remember me", the terms); each "Read ..." a 44px link. */
  html[data-design="new"] .auth-form .form-check { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 12px; padding-left: 0; min-height: 44px; }
  html[data-design="new"] .auth-form .form-check .form-check-input { float: none; margin: 11px 0 0; }
  html[data-design="new"] .auth-form .form-check-label {
    flex: 1 1 0; min-width: 0; min-height: 44px; padding: 11px 0; font-size: 15px; line-height: 22px; color: var(--tt-text-primary);
  }
  html[data-design="new"] .auth-form .form-check .invalid-feedback { flex: 1 1 100%; }
  html[data-design="new"] .auth-link,
  html[data-design="new"] .alert-link { display: inline-flex; align-items: center; min-height: 44px; }
  html[data-design="new"] .allauth-box a,
  html[data-design="new"] .allauth-card a { display: inline-flex; align-items: center; min-height: 44px; }
  html[data-design="new"] .allauth-card p:has(> input[type="radio"]) { display: flex; align-items: center; gap: 10px; }
  html[data-design="new"] .allauth-card input[type="radio"] + label {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; flex: 1 1 0; min-width: 0; min-height: 44px; margin: 0;
  }

  /* Small row 8: the allauth card's fields (its 14px rule out-specifies the
     shared field rule); 44px buttons. */
  html[data-design="new"] .allauth-card input[type="text"],
  html[data-design="new"] .allauth-card input[type="email"],
  html[data-design="new"] .allauth-card input[type="password"],
  html[data-design="new"] .allauth-card select { font-size: 16px; min-height: 44px; }
  html[data-design="new"] .allauth-card button { min-height: 44px; line-height: 24px; padding-top: 9px; padding-bottom: 9px; }

  /* Buttons >= 44px (text centred by padding, not flex: the icons keep
     their spacing); Sign In, Create Account and the wizard buttons 48px. */
  html[data-design="new"] main .btn { min-height: 44px; line-height: 24px; padding-top: 9px; padding-bottom: 9px; }
  html[data-design="new"] main .btn-link.p-0 { display: inline-flex; align-items: center; }
  html[data-design="new"] main .auth-submit,
  html[data-design="new"] main .auth-secondary { min-height: 48px; padding-top: 12px; padding-bottom: 12px; font-size: 16px; }
  html[data-design="new"] .wizard-nav .auth-submit { flex: 1; }
  html[data-design="new"] .nav-tabs .nav-link { display: flex; align-items: center; min-height: 44px; }
  html[data-design="new"] .toggle-option { min-height: 44px; font-size: 14px; }

  /* Small row 7: helper notes (connect, verification sent) 15px in the
     secondary text colour. */
  html[data-design="new"] main small,
  html[data-design="new"] main .small { font-size: 15px; line-height: 22px; color: var(--tt-text-secondary); }
  html[data-design="new"] main small.text-muted,
  html[data-design="new"] main .small.text-muted { color: var(--tt-text-secondary) !important; /* overrides stripe-inspired-overrides.css .text-muted (!important) */ }

  /* ---- Epic 63 stitch-8: the Stitch phone look (the kit rules are in
     app_new_design.css; "sunken" = --tt-container-dark light, --tt-container dark) ---- */
  /* A1: the auth card pads 24px (the wide wizard card 20px), no top edge. */
  html[data-design="new"] .auth-container > .auth-card { padding: 24px; }
  html[data-design="new"] .auth-container > .auth-card.auth-card--wide { padding: 20px; }
  html[data-design="new"] .auth-container > .auth-card::before { display: none; }
  /* A2: the title 30px / 36px. */
  html[data-design="new"] .auth-card .auth-title { font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; }
  /* A3, A4: secondary labels; 48px sunken fields, same fill on focus. */
  html[data-design="new"] .auth-card .auth-form .form-label { color: var(--tt-text-secondary); }
  html[data-design="new"] .auth-card .auth-form .form-control,
  html[data-design="new"] .auth-card .auth-form .form-select {
    min-height: 48px; padding-left: 14px; padding-right: 14px; border-radius: 8px; background-color: var(--tt-container-dark);
  }
  html[data-design="new"][data-theme="dark"] .auth-card .auth-form .form-control,
  html[data-design="new"][data-theme="dark"] .auth-card .auth-form .form-select { background-color: var(--tt-container); }
  html[data-design="new"] .auth-card #id_invite_code { font-family: var(--tt-font-mono); }
  /* A5: the filled button keeps 600 and its darker fill on hover / focus. */
  html[data-design="new"] .auth-card .btn.auth-submit { font-weight: 600; }
  html[data-design="new"] .auth-card .btn.auth-submit:hover,
  html[data-design="new"] .auth-card .btn.auth-submit:focus { background: var(--tt-primary-dark); color: var(--tt-on-fill); }
  /* Previous and Next share the wizard row: Previous its own width, Next the rest. */
  html[data-design="new"] .auth-card .wizard-nav .btn.auth-secondary { width: auto; flex: none; }
  /* Step 1 has no Previous: its empty placeholder goes, so Next spans the row. */
  html[data-design="new"] .auth-card .wizard-nav > span:empty { display: none; }
  /* A6: the invite trigger stays quiet on hover / focus. */
  html[data-design="new"] .auth-card #invite-request-trigger:hover,
  html[data-design="new"] .auth-card #invite-request-trigger:focus {
    background: var(--tt-container-dark); border: 1px solid var(--tt-border-neutral); color: var(--tt-text-primary);
  }
  /* A7: the footer lines 15px. */
  html[data-design="new"] .auth-card .auth-footer p { font-size: 15px; color: var(--tt-text-secondary); }

  /* O1-O4: the step line a left section label in Geist; a 6px pill bar; the
     header left-aligned; section headings blue, uppercase. */
  html[data-design="new"] .auth-card .wizard-progress-text { font-family: var(--tt-font-family); text-align: left; }
  html[data-design="new"] .auth-card .wizard-progress-bar { height: 6px; border-radius: var(--tt-radius-full); background: var(--tt-quiet-bg); }
  html[data-design="new"] .auth-card--wide .auth-header { text-align: left; }
  html[data-design="new"] .auth-card .wizard-section h3 { color: var(--tt-accent-text); text-transform: uppercase; letter-spacing: .08em; }

  /* C1-C6: connect (the card holding the username form) frameless. */
  html[data-design="new"] main .card.shadow-sm:has(form #id_username) {
    background: transparent; border: 0;
    box-shadow: none !important; /* overrides Bootstrap .shadow-sm (!important) */
  }
  html[data-design="new"] main .card.shadow-sm:has(form #id_username) > .card-body { padding: 0; background: transparent; }
  html[data-design="new"] main .card.shadow-sm:has(form #id_username) h2 { font-size: 28px; line-height: 34px; }
  html[data-design="new"] main .card.shadow-sm:has(form #id_username) > .card-body > .alert-success,
  html[data-design="new"] main .card.shadow-sm:has(form #id_username) > .card-body > .alert-secondary {
    border-radius: 16px; padding: 16px; line-height: 32px; font-family: var(--tt-font-mono);
  }
  html[data-design="new"] main .card.shadow-sm:has(form #id_username) > .card-body > .alert-success > strong,
  html[data-design="new"] main .card.shadow-sm:has(form #id_username) > .card-body > .alert-secondary > strong { font-family: var(--tt-font-family); }
  /* The connected labels secondary, 500; the disconnected (.alert-secondary,
     Bootstrap's light fill in both modes) keep the alert's own ink for AA. */
  html[data-design="new"] main .card.shadow-sm:has(form #id_username) > .card-body > .alert-success > strong {
    font-weight: 500; color: var(--tt-text-secondary);
  }
  html[data-design="new"] main .card.shadow-sm:has(form #id_username) > .card-body > .card > .card-header {
    background: transparent; border-bottom: 0; padding: 0 0 12px;
  }
  html[data-design="new"] main .card.shadow-sm:has(form #id_username) > .card-body > .card > .card-header h5 { font-size: 16px; font-weight: 600; }
  html[data-design="new"] main .card.shadow-sm:has(form #id_username) > .card-body > .card > .card-body { padding: 0; }
  html[data-design="new"] main #oauth-authorize-btn { margin-right: 0 !important; /* overrides Bootstrap .me-2 (!important) */ }
  /* Disconnect TastyTrade's icon: the flex button drops the space before its words. */
  html[data-design="new"] main #oauth-revoke-btn { gap: 6px; }
  html[data-design="new"] main #oauth-revoke-btn,
  html[data-design="new"] main #connect-disconnect-link {
    margin-top: 12px; margin-left: 0 !important; /* overrides Bootstrap .ms-2 (!important) */
    background: var(--tt-error-light); border: 1px solid var(--tt-error); color: var(--tt-error);
  }
  html[data-design="new"] main .card.shadow-sm:has(form #id_username) form p > input {
    display: block; width: 100%; min-height: 48px; padding-left: 14px; padding-right: 14px; font-size: 16px;
    font-family: var(--tt-font-mono); background-color: var(--tt-surface); border-radius: 8px;
  }
  html[data-design="new"] main .card.shadow-sm:has(form #id_username) form p > label { font-size: 15px; color: var(--tt-text-secondary); }
}