/* ═══════════════════════════════════════════════════════
   SandBox — Ory UI Theme v3
   Premium dark glassmorphism with animated backgrounds
   ═══════════════════════════════════════════════════════ */

/* ── Brand Variables ── */
:root {
  --sb-primary: #6366f1;
  --sb-primary-light: #818cf8;
  --sb-primary-dark: #4f46e5;
  --sb-accent: #a78bfa;
  --sb-bg-dark: #0a0a1a;
  --sb-bg-card: rgba(15, 15, 35, 0.65);
  --sb-border: rgba(99, 102, 241, 0.2);
  --sb-text: #e2e8f0;
  --sb-text-muted: #94a3b8;
  --sb-glass: rgba(255, 255, 255, 0.05);
  --sb-glass-border: rgba(255, 255, 255, 0.1);
  --sb-input-bg: rgba(15, 15, 35, 0.8);
  --sb-success: #34d399;
  --sb-sand: #FBBF24;
  --sb-box: #3B82F6;
  --sb-error: #f87171;

  /* Ory theme variable overrides */
  --ory-theme-background-canvas: #0a0a1a;
  --ory-theme-background-surface: rgba(15, 15, 35, 0.65);
  --ory-theme-background-subtle: rgba(20, 20, 45, 0.5);
  --ory-theme-accent-def: #6366f1;
  --ory-theme-accent-emphasis: #818cf8;
  --ory-theme-accent-muted: rgba(99, 102, 241, 0.3);
  --ory-theme-accent-subtle: rgba(99, 102, 241, 0.1);
  --ory-theme-accent-disabled: rgba(99, 102, 241, 0.2);
  --ory-theme-foreground-def: #e2e8f0;
  --ory-theme-foreground-muted: #94a3b8;
  --ory-theme-foreground-subtle: #64748b;
  --ory-theme-foreground-disabled: #475569;
  --ory-theme-foreground-on-accent: #ffffff;
  --ory-theme-foreground-on-dark: #e2e8f0;
  --ory-theme-foreground-on-disabled: #64748b;
  --ory-theme-border-def: rgba(99, 102, 241, 0.2);
  --ory-theme-input-background: rgba(15, 15, 35, 0.8);
  --ory-theme-input-disabled: rgba(15, 15, 35, 0.4);
  --ory-theme-input-placeholder: #64748b;
  --ory-theme-input-text: #e2e8f0;
  --ory-theme-error-def: #f87171;
  --ory-theme-error-emphasis: #ef4444;
  --ory-theme-error-muted: rgba(248, 113, 113, 0.3);
  --ory-theme-error-subtle: rgba(248, 113, 113, 0.1);
  --ory-theme-success-emphasis: #34d399;
  --ory-theme-text-def: #e2e8f0;
  --ory-theme-text-disabled: #475569;
  --ory-theme-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Global ── */
* { box-sizing: border-box; }

body {
  background: var(--sb-bg-dark) !important;
  overflow-x: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ══════════════════════════════════════════════
   ANIMATED BACKGROUND (auth pages)
   ══════════════════════════════════════════════ */

/* Subtle grid */
.sb-bg-grid {
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background-image:
    linear-gradient(rgba(99,102,241,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 80%);
}

/* Floating orbs */
.sb-bg-orb {
  position: fixed; border-radius: 50%; pointer-events: none; z-index: -2;
  filter: blur(60px);
  transition: transform 0.3s ease-out;
}
.sb-orb-1 {
  width: 500px; height: 500px;
  background: rgba(99,102,241,0.15);
  top: -15%; right: -10%;
  animation: orbFloat1 18s ease-in-out infinite;
}
.sb-orb-2 {
  width: 300px; height: 300px;
  background: rgba(167,139,250,0.1);
  bottom: -10%; left: -8%;
  animation: orbFloat2 22s ease-in-out infinite;
}
.sb-orb-3 {
  width: 300px; height: 300px;
  background: rgba(251,191,36,0.06);
  top: 40%; left: 50%;
  animation: orbFloat3 25s ease-in-out infinite;
}

@keyframes orbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-60px, 40px) scale(1.05); }
  66% { transform: translate(30px, -30px) scale(0.95); }
}
@keyframes orbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(50px, -40px) scale(0.95); }
  66% { transform: translate(-40px, 30px) scale(1.05); }
}
@keyframes orbFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-60px, -40px) scale(1.1); }
}

/* Starfield dots */
body.sb-auth-page::after {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.12), transparent),
    radial-gradient(1px 1px at 25% 55%, rgba(255,255,255,0.08), transparent),
    radial-gradient(1px 1px at 45% 15%, rgba(255,255,255,0.1), transparent),
    radial-gradient(1px 1px at 65% 75%, rgba(255,255,255,0.06), transparent),
    radial-gradient(1px 1px at 80% 35%, rgba(255,255,255,0.08), transparent),
    radial-gradient(1.5px 1.5px at 15% 85%, rgba(99,102,241,0.15), transparent),
    radial-gradient(1.5px 1.5px at 90% 10%, rgba(167,139,250,0.12), transparent);
  animation: starDrift 40s linear infinite;
}
@keyframes starDrift { 0% { transform: translateY(0); } 100% { transform: translateY(-15px); } }

/* Page load animation */
body.sb-auth-page { opacity: 1; }
body.sb-auth-page.sb-loaded { opacity: 1; }

/* ══════════════════════════════════════════════
   BRANDING HEADER
   ══════════════════════════════════════════════ */

.sb-auth-brand {
  text-align: center;
  padding: 3rem 1rem 0;
  animation: brandFadeIn 0.8s ease 0.2s both;
}
@keyframes brandFadeIn { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }

.sb-brand-link {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none !important;
}
.sb-brand-diamond {
  font-size: 1.5rem;
  background: linear-gradient(135deg, var(--sb-sand), var(--sb-box));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: diamondPulse 3s ease-in-out infinite;
}
@keyframes diamondPulse { 0%,100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }

.sb-brand-name { font-size: 2rem; font-weight: 800; letter-spacing: -0.5px; }
.sb-sand {
  background: linear-gradient(135deg, #FBBF24, #F59E0B);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.sb-box {
  background: linear-gradient(135deg, #60A5FA, #3B82F6);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ══════════════════════════════════════════════
   AUTH CONTAINER
   ══════════════════════════════════════════════ */

.auth-container {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: calc(100vh - 200px);
  padding: 2rem;
  animation: cardFadeIn 0.8s ease 0.4s both;
}
@keyframes cardFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* Remove old SVG branding */
#login::before, #recovery::before, #verification::before, #registration::before {
  display: none !important;
}

#login, #recovery, #verification, #registration, #settings, #error {
  width: 100%; max-width: 440px; margin: 0 auto;
}

/* ══════════════════════════════════════════════
   LOGIN CARD — Premium Glassmorphism
   ══════════════════════════════════════════════ */

[class*="ory_elements__card__"] {
  background: rgba(12, 12, 30, 0.7) !important;
  backdrop-filter: blur(32px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.4) !important;
  border: 1px solid rgba(99, 102, 241, 0.12) !important;
  border-radius: 20px !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03),
    0 12px 48px rgba(0, 0, 0, 0.4),
    0 0 80px rgba(99, 102, 241, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  padding: 2.25rem !important;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.4s ease, border-color 0.4s ease !important;
}

[class*="ory_elements__card__"]:hover {
  border-color: rgba(99, 102, 241, 0.2) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 16px 56px rgba(0, 0, 0, 0.45),
    0 0 100px rgba(99, 102, 241, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* Animated gradient border glow on the card */
[class*="ory_elements__card__"]::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: 20px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(99, 102, 241, 0.15) 60deg,
    rgba(167, 139, 250, 0.1) 120deg,
    transparent 180deg,
    rgba(251, 191, 36, 0.08) 240deg,
    rgba(99, 102, 241, 0.12) 300deg,
    transparent 360deg
  );
  z-index: -1;
  animation: borderGlow 8s linear infinite;
  opacity: 0;
  transition: opacity 0.5s ease;
}
[class*="ory_elements__card__"]:hover::before {
  opacity: 1;
}
@keyframes borderGlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Inner cards transparent */
[class*="ory_elements__card__"] [class*="ory_elements__card__"] {
  background: transparent !important; border: none !important;
  box-shadow: none !important; backdrop-filter: none !important;
  padding: 0 !important;
}
[class*="ory_elements__card__"] [class*="ory_elements__card__"]::before { display: none; }

/* ══════════════════════════════════════════════
   INPUT FIELDS — Modern sleek
   ══════════════════════════════════════════════ */

[class*="ory_elements__input_field__"],
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="url"], input[type="number"],
input[name="identifier"], input[name="password"],
input[name="traits.email"], input[name="traits.name.first"],
input[name="traits.name.last"], input[name="code"] {
  background: rgba(10, 10, 28, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  color: var(--sb-text) !important;
  padding: 14px 16px !important;
  font-size: 14px !important;
  font-family: 'Inter', sans-serif !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  width: 100%;
}

input:focus {
  border-color: var(--sb-primary) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12), 0 0 20px rgba(99, 102, 241, 0.06) !important;
  outline: none !important;
  background: rgba(10, 10, 28, 0.8) !important;
}

input::placeholder { color: #64748b !important; }

/* Labels */
label {
  color: var(--sb-text-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
}

/* ══════════════════════════════════════════════
   BUTTONS — Gradient with glow
   ══════════════════════════════════════════════ */

button[type="submit"],
button[name="method"],
[class*="ory_elements__button__"]:not([class*="button_link"]) {
  background: rgba(99, 102, 241, 0.12) !important;
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
  border-radius: 10px !important;
  color: #c4b5fd !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 12px 24px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
}

button[type="submit"]:hover,
button[name="method"]:hover,
[class*="ory_elements__button__"]:not([class*="button_link"]):hover {
  background: rgba(99, 102, 241, 0.2) !important;
  border-color: rgba(99, 102, 241, 0.5) !important;
  color: #e0d4ff !important;
  box-shadow: 0 0 16px rgba(99, 102, 241, 0.15) !important;
  transform: translateY(-1px) !important;
}

button[type="submit"]:active,
button[name="method"]:active {
  transform: translateY(0) !important;
  background: rgba(99, 102, 241, 0.25) !important;
}

button[type="submit"]::after {
  content: "";
  position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  transition: left 0.5s ease;
}
button[type="submit"]:hover::after {
  left: 100%;
}


/* ══════════════════════════════════════════════
   LINKS
   ══════════════════════════════════════════════ */

a {
  color: var(--sb-primary-light) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}
a:hover {
  color: var(--sb-accent) !important;
  text-decoration: underline !important;
}

/* ══════════════════════════════════════════════
   MESSAGES — Error / Success
   ══════════════════════════════════════════════ */

div[class*="message_error"], .error {
  background: rgba(248, 113, 113, 0.08) !important;
  border: 1px solid rgba(248, 113, 113, 0.18) !important;
  border-radius: 12px !important;
  color: var(--sb-error) !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  animation: shakeError 0.4s ease;
}
@keyframes shakeError {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

div[class*="message_success"], .success {
  background: rgba(52, 211, 153, 0.08) !important;
  border: 1px solid rgba(52, 211, 153, 0.18) !important;
  border-radius: 12px !important;
  color: var(--sb-success) !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
}

/* ══════════════════════════════════════════════
   HEADINGS & TYPOGRAPHY
   ══════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 { color: var(--sb-text) !important; }
h2 { font-weight: 700 !important; font-size: 1.4rem !important; letter-spacing: -0.02em !important; }

p, span, div { color: inherit; }

[class*="ory_elements__typography__"] { color: var(--sb-text) !important; }
[class*="foregroundMuted"], [class*="ory_elements__colors_color_foregroundMuted"] { color: var(--sb-text-muted) !important; }
[class*="foregroundSubtle"], [class*="ory_elements__colors_color_foregroundSubtle"] { color: #64748b !important; }

/* ══════════════════════════════════════════════
   OLE BRANDING → SANDBOX
   ══════════════════════════════════════════════ */

.ory-branding { visibility: hidden; position: relative; }
.ory-branding img { display: none !important; }
.ory-branding::after {
  content: 'SandBox';
  visibility: visible; position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%);
  font-size: 11px; font-weight: 500; letter-spacing: 0.5px;
  white-space: nowrap; opacity: 0.5;
  background: linear-gradient(90deg, #FBBF24 0%, #3B82F6 42%, #94a3b8 42%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ══════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════ */

.sb-auth-footer {
  position: fixed; bottom: 0; left: 0; right: 0;
  text-align: center; padding: 1rem;
  font-size: 11px; color: #475569;
  letter-spacing: 0.3px;
  background: linear-gradient(to top, rgba(10,10,26,0.9), transparent);
}
.sb-auth-footer a {
  color: #64748b !important; font-size: 11px;
}
.sb-auth-footer a:hover { color: var(--sb-primary-light) !important; text-decoration: none !important; }
.sb-footer-sep { margin: 0 6px; opacity: 0.4; }
.sb-auth-footer .sb-sand {
  background: linear-gradient(135deg, #FBBF24, #F59E0B);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.sb-auth-footer .sb-box {
  background: linear-gradient(135deg, #60A5FA, #3B82F6);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ══════════════════════════════════════════════
   DIVIDERS
   ══════════════════════════════════════════════ */

hr, [class*="divider"] { border-color: rgba(255,255,255,0.06) !important; opacity: 0.7; }

/* ══════════════════════════════════════════════
   PASSWORD TOGGLE & ICONS
   ══════════════════════════════════════════════ */

[class*="ory_elements__message__"] { color: var(--sb-text-muted) !important; }

/* ─────────────────────────────────────────────────────────────
   Password visibility toggle
   Kratos UI v1.3 renders the toggle as:
     <div style="position:relative">
       <input type="password" name="password" class="…input_field__1tgfa2l1">
       <div aria-label="Toggle password visibility" data-checked="false"
            class="…input_field__1tgfa2l2" tabindex="0">
         <svg /* eye-on */ ></svg>
         <svg /* eye-off */ ></svg>
       </div>
     </div>
   Both SVGs ship in the DOM; kratos toggles which is visible via data-checked.
   The wrapper div already has inline `position:relative`, so we only need to
   absolutely position the toggle and pad the input to make room.
   ───────────────────────────────────────────────────────────── */

/* Make sure the wrapper around password input is the abs-positioning context */
[data-testid="node/input/password"] > div[style*="position:relative"],
[data-testid="node/input/password"] > div[style*="position: relative"] {
  position: relative !important;
  display: block !important;
}

/* Reserve room on the right side of the input for the toggle button */
input[name="password"],
input[type="password"] {
  padding-right: 48px !important;
}

/* The toggle button itself: a small square button anchored to the input's right edge */
[aria-label="Toggle password visibility"] {
  position: absolute !important;
  top: 50% !important;
  right: 8px !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  opacity: 0.55 !important;
  transition: opacity 0.2s ease, background-color 0.2s ease !important;
}
[aria-label="Toggle password visibility"]:hover,
[aria-label="Toggle password visibility"]:focus-visible {
  opacity: 1 !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Size + colour the eye SVGs and stack them on the same spot */
[aria-label="Toggle password visibility"] svg {
  width: 20px !important;
  height: 20px !important;
}
[aria-label="Toggle password visibility"] svg path {
  fill: var(--sb-text-muted) !important;
}

/* Both SVGs render to the same cell — show one based on data-checked.
   data-checked="false" → password hidden → user sees the eye icon (svg #1)
   data-checked="true"  → password visible → user sees the eye-off icon (svg #2) */
[aria-label="Toggle password visibility"][data-checked="false"] svg:nth-of-type(2) {
  display: none !important;
}
[aria-label="Toggle password visibility"][data-checked="true"] svg:nth-of-type(1) {
  display: none !important;
}

/* Generic input-field svg colour for non-toggle icons (e.g. validation) */
[class*="ory_elements__input_field__"]:not([aria-label="Toggle password visibility"]) svg path {
  fill: var(--sb-text-muted) !important;
}

/* ══════════════════════════════════════════════
   CHECKBOX
   ══════════════════════════════════════════════ */

[class*="ory_elements__checkbox__"] input[type="checkbox"] { accent-color: var(--sb-primary) !important; }

/* ══════════════════════════════════════════════
   CODE BOX (recovery codes)
   ══════════════════════════════════════════════ */

[class*="ory_elements__codebox__"] {
  background: rgba(10, 10, 28, 0.8) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  color: var(--sb-text) !important;
  font-family: 'JetBrains Mono', monospace !important;
}

/* ══════════════════════════════════════════════
   SELECT / DROPDOWN
   ══════════════════════════════════════════════ */

select {
  background: rgba(10, 10, 28, 0.6) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  color: var(--sb-text) !important;
  padding: 12px 14px !important;
}

/* ══════════════════════════════════════════════
   LOGOUT PAGE
   ══════════════════════════════════════════════ */

#logout {
  display: flex; align-items: center; justify-content: center; min-height: 60vh;
}

/* ══════════════════════════════════════════════
   ERROR PAGE
   ══════════════════════════════════════════════ */

#error [class*="ory_elements__card__"] {
  background: rgba(248, 113, 113, 0.04) !important;
  border: 1px solid rgba(248, 113, 113, 0.12) !important;
}

/* ══════════════════════════════════════════════
   CONSENT / SESSION PAGES
   ══════════════════════════════════════════════ */

#consent [class*="ory_elements__card__"], #session {
  background: var(--sb-bg-card) !important;
  backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 20px !important;
}

.session-code-box, .session-code-box pre {
  background: rgba(10, 10, 28, 0.8) !important;
  color: var(--sb-text) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
}

.traits-box { color: var(--sb-text) !important; }
.traits-box-divider { border-color: rgba(255,255,255,0.06) !important; }

/* ══════════════════════════════════════════════
   SETTINGS & WELCOME (content-layout pages)
   ══════════════════════════════════════════════ */

/* Background for non-auth pages */
body::before {
  content: '' !important; display: block !important; visibility: visible !important;
  position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2;
  background:
    radial-gradient(ellipse 80% 60% at 20% 40%, rgba(99, 102, 241, 0.12), transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 60%, rgba(167, 139, 250, 0.08), transparent 60%),
    radial-gradient(ellipse 50% 50% at 50% 0%, rgba(99, 102, 241, 0.06), transparent 50%);
  animation: bgPulse 15s ease-in-out infinite alternate;
}
@keyframes bgPulse {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}

.app-container { background: var(--sb-bg-dark) !important; min-height: 100vh; }
.container { background: transparent !important; }

/* Sidebar Nav */
.main-nav {
  background: rgba(10, 10, 30, 0.9) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
  padding: 1.5rem 0 !important;
}
.main-nav a, [class*="menuLinkTextStyle"], [class*="ory_elements__menu_link__"] {
  color: var(--sb-text-muted) !important; transition: all 0.2s ease !important; border-radius: 8px !important;
}
.main-nav a:hover, [class*="ory_elements__menu_link__"]:hover {
  color: var(--sb-text) !important; background: rgba(99, 102, 241, 0.1) !important; text-decoration: none !important;
}
[class*="navMenuLinkSelected"], .main-nav a[aria-current="page"] {
  background: rgba(99, 102, 241, 0.15) !important; color: var(--sb-primary-light) !important;
  border-left: 3px solid var(--sb-primary) !important;
}
[class*="navSectionTitleStyle"] { color: var(--sb-text-muted) !important; text-transform: uppercase !important; font-size: 11px !important; letter-spacing: 1px !important; }
.main-nav svg path, [class*="menuLinkIconLeft"] svg path { fill: var(--sb-text-muted) !important; }

/* Hide dev-only nav sections */
.main-nav [class*="nav_section__"]:nth-child(2) { display: none !important; }
.main-nav a[target="_blank"] { display: none !important; }

/* Welcome page cards */
[class*="card_gradient"], a[class*="CardGradient"], .wrap-content a {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(167, 139, 250, 0.08)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(12px) !important;
  transition: all 0.3s ease !important;
}
[class*="card_gradient"]:hover, a[class*="CardGradient"]:hover, .wrap-content a:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(167, 139, 250, 0.15)) !important;
  box-shadow: 0 8px 30px rgba(99, 102, 241, 0.15) !important;
  transform: translateY(-2px) !important;
}

/* Settings cards */
.content [class*="ory_elements__card__"] {
  background: rgba(12, 12, 30, 0.7) !important;
  backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2) !important;
  margin-bottom: 1.5rem !important;
}

.content input[type="text"], .content input[type="email"],
.content input[type="password"], .content input[type="tel"] {
  background: rgba(10, 10, 28, 0.6) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: var(--sb-text) !important;
}

/* ══════════════════════════════════════════════
   SCROLLBAR
   ══════════════════════════════════════════════ */

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(99, 102, 241, 0.4); }

/* ══════════════════════════════════════════════
   HIDE ROLE & ORG FIELDS IN SETTINGS
   ══════════════════════════════════════════════ */

[name="traits.role"], [name="traits.organization"] { display: none !important; }
[name="traits.role"] + label, [name="traits.organization"] + label,
label[for*="traits.role"], label[for*="traits.organization"] { display: none !important; }
.ory_elements__input__wrapper:has([name="traits.role"]),
.ory_elements__input__wrapper:has([name="traits.organization"]),
div:has(> [name="traits.role"]), div:has(> [name="traits.organization"]) { display: none !important; }
[title="Role"], [title="Organization"] { display: none !important; }

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */

@media (max-width: 480px) {
  .auth-container { padding: 1rem; }
  .sb-auth-brand { padding: 2rem 1rem 0; }
  .sb-brand-name { font-size: 1.6rem; }
  #login, #recovery, #verification, #registration { max-width: 100%; }
  [class*="ory_elements__card__"] { padding: 1.5rem !important; border-radius: 16px !important; }
  .sb-bg-orb { display: none; }
  .sb-auth-footer { position: relative; margin-top: 2rem; }
}

@media (max-width: 768px) {
  .sb-auth-brand { padding: 2rem 1rem 0; }
  .sb-brand-name { font-size: 1.75rem; }
  .sb-orb-1 { width: 300px; height: 300px; }
  .sb-orb-2 { width: 200px; height: 200px; }
  .sb-orb-3 { display: none; }
}

/* ══════════════════════════════════════════════
   ACCESSIBILITY
   ══════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus ring for keyboard navigation */
*:focus-visible {
  outline: 2px solid var(--sb-primary) !important;
  outline-offset: 2px !important;
}

/* ══════════════════════════════════════════════
   v3.1 — DESIGN UPLIFT (login + auth pages)
   Solid primary CTA, deeper input field, refined card
   ══════════════════════════════════════════════ */

/* Primary CTA — solid indigo gradient (matches the Hub "Sign In" button) */
button[type="submit"][name="method"][value="password"],
button[type="submit"][name="method"][value="totp"],
button[type="submit"][name="method"][value="webauthn"],
button[type="submit"][name="method"][value="lookup_secret"],
button[type="submit"][name="method"][value="code"],
form[data-testid="login-flow"] button[type="submit"],
form[data-testid="registration-flow"] button[type="submit"],
form[data-testid="recovery-flow"] button[type="submit"],
form[data-testid="verification-flow"] button[type="submit"] {
  background: linear-gradient(135deg, var(--sb-primary) 0%, var(--sb-primary-light) 100%) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.01em !important;
  padding: 14px 24px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 8px 24px -8px rgba(99, 102, 241, 0.45),
    0 2px 6px -2px rgba(99, 102, 241, 0.35) !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s ease,
              filter 0.2s ease !important;
}
button[type="submit"][name="method"]:hover,
form[data-testid="login-flow"] button[type="submit"]:hover,
form[data-testid="registration-flow"] button[type="submit"]:hover,
form[data-testid="recovery-flow"] button[type="submit"]:hover,
form[data-testid="verification-flow"] button[type="submit"]:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 12px 32px -8px rgba(99, 102, 241, 0.55),
    0 4px 10px -2px rgba(99, 102, 241, 0.45) !important;
}
button[type="submit"][name="method"]:active,
form[data-testid="login-flow"] button[type="submit"]:active {
  transform: translateY(0) !important;
  filter: brightness(0.96) !important;
}

/* Input fields — slightly deeper inset, larger touch target, smoother focus glow */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="url"], input[type="number"],
input[name="identifier"], input[name="password"],
input[name="traits.email"], input[name="traits.name.first"],
input[name="traits.name.last"], input[name="code"] {
  background: rgba(8, 8, 24, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset !important;
  padding: 14px 16px !important;
  min-height: 48px !important;
}
input:hover:not(:focus) {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(10, 10, 28, 0.75) !important;
}
input:focus {
  border-color: var(--sb-primary) !important;
  background: rgba(12, 12, 32, 0.85) !important;
  box-shadow:
    0 0 0 3px rgba(99, 102, 241, 0.18),
    0 0 24px -4px rgba(99, 102, 241, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.04) inset !important;
}

/* Labels — more space between label and input, slightly stronger weight */
[data-testid^="node/input/"] > label {
  display: block !important;
  margin-bottom: 6px !important;
  font-weight: 500 !important;
  color: #cbd5e1 !important;
}

/* Card around the auth form — softer border, subtle ambient glow */
[data-testid="login-auth-card"],
[data-testid$="-auth-card"] {
  background:
    linear-gradient(180deg, rgba(20, 20, 45, 0.55) 0%, rgba(12, 12, 30, 0.7) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
  box-shadow:
    0 24px 64px -16px rgba(0, 0, 0, 0.6),
    0 8px 24px -8px rgba(99, 102, 241, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.06) inset !important;
  padding: 32px !important;
}

/* "Sign in" / "Sign up" heading — bolder + tighter */
[data-testid="login-auth-card"] h2,
[data-testid$="-auth-card"] h2 {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: #f1f5f9 !important;
  margin: 0 0 4px !important;
}

/* "Forgot password?" / inline links — calmer, indigo on hover */
.ory_elements__button_link__w27ftz0,
[data-testid="forgot-password-link"],
[data-testid="signup-link"],
[data-testid="login-link"] {
  color: var(--sb-text-muted) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
.ory_elements__button_link__w27ftz0:hover,
[data-testid="forgot-password-link"]:hover,
[data-testid="signup-link"]:hover,
[data-testid="login-link"]:hover {
  color: var(--sb-primary-light) !important;
  text-decoration: underline !important;
}

/* Required-field asterisks — softer red */
.ory_elements__input_field__1tgfa2l0 {
  color: rgba(248, 113, 113, 0.7) !important;
  margin-left: 2px !important;
}

/* Divider above the submit row — subtle gradient line, not a hard rule */
hr.ory_elements__divider__1312gjt1 {
  border: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent) !important;
  margin: 4px 0 !important;
}

/* Footer links — match the brand muted/hover style */
.sb-auth-footer a {
  color: var(--sb-text-muted) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
.sb-auth-footer a:hover {
  color: var(--sb-primary-light) !important;
}