/* ==========================================================================
   Okami-ID Login Prototype Styling (Premium Light Theme - Ultimate Edition)
   ========================================================================== */

:root {
  /* Color Tokens - Official Okami Gradient (Refined Ultimate Edition) */
  --color-blue: #0082FF;
  --color-purple: #7B61FF;
  --color-pink: #FF4B72;
  --color-primary-gradient: linear-gradient(135deg, var(--color-blue) 0%, var(--color-pink) 100%);
  
  --color-bg-base: #f6f8fb;
  --color-bg-gradient: linear-gradient(180deg, #f6f8fb 0%, #e9edf4 100%);
  
  /* UX Panel & Interactive Tokens */
  --color-panel-bg: rgba(255, 255, 255, 0.65);
  --color-panel-border: rgba(255, 255, 255, 0.45);
  --shadow-panel: 0 30px 60px rgba(18, 19, 25, 0.05), 0 10px 20px rgba(18, 19, 25, 0.02);
  
  /* Input & Button (Solid Surface to distinguish from Glass Panel) */
  --color-input-bg: #ffffff;
  --color-input-border: rgba(123, 97, 255, 0.15);
  --color-input-focus-border: var(--color-purple);
  
  --color-btn-secondary-bg: #edf1f7;
  --color-btn-secondary-hover-bg: #ffffff;
  --color-btn-secondary-border: rgba(18, 19, 25, 0.05);
  
  --color-text-main: #121319;
  --color-text-muted: #64748b;
  
  /* State Colors */
  --color-error-bg: #fef2f2;
  --color-error-text: #ef4444;
  --color-error-border: rgba(239, 68, 68, 0.2);
  
  --color-success-bg: #f0fdf4;
  --color-success-text: #22c55e;
  --color-success-border: rgba(34, 197, 94, 0.2);
  
  /* Fonts & Transitions */
  --font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-fast: all 0.15s ease;
}

* {
  box-sizing: border-box;
}

html, body, h1, h2, h3, h4, h5, h6, p, form, label, input, textarea, button {
  margin: 0;
  padding: 0;
}

/* No double-tap zoom (#189). Pinch is blocked by the viewport meta, and on iOS by js/page-zoom.js. */
html {
  touch-action: manipulation;
}

body {
  font-family: var(--font-family);
  background-color: var(--color-bg-base);
  background-image: var(--color-bg-gradient);
  color: var(--color-text-main);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
  position: relative;
  padding: 24px;
  box-sizing: border-box;
}

/* ==========================================================================
   Interactive Mode Selection Header (RedirectMode)
   ========================================================================== */
.mode-selector-header {
  position: absolute;
  top: 24px;
  display: flex;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  padding: 6px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  z-index: 10;
}

.mode-tab {
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 10px;
  transition: var(--transition-fast);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mode-tab.active {
  background: var(--color-text-main);
  color: #ffffff;
}

/* ==========================================================================
   Main Container (2-Column Layout)
   ========================================================================== */
.login-container {
  display: flex;
  width: 1120px;
  max-width: 100%;
  height: 720px;
  max-height: calc(100vh - 48px);
  background: var(--color-panel-bg);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid var(--color-panel-border);
  border-radius: 32px;
  box-shadow: var(--shadow-panel);
  overflow: hidden;
  position: relative;
  z-index: 1;
  margin: 0;
}

/* ==========================================================================
   Left Column: Brand & 3D Cards Area (Visual WOW)
   ========================================================================== */
.brand-column {
  flex: 1.1;
  background: linear-gradient(135deg, rgba(240, 244, 248, 0.8) 0%, rgba(225, 232, 240, 0.8) 100%);
  border-right: 1px solid rgba(18, 19, 25, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 48px;
  position: relative;
  overflow-y: auto;
  min-height: 0;
}

/* Interactive Floating Cards Showcase */
.cards-showcase {
  flex: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  perspective: 1200px;
}

.card-3d-wrapper {
  position: relative;
  width: 340px;
  height: 215px;
  transform-style: preserve-3d;
  will-change: transform;
  cursor: pointer;
}

/* The four cards are artwork now, not markup: one PNG per card face, so the chip,
   Okami mark and VISA logo live inside the image. Aspect ratio of the sources (~1012x640)
   matches the 340x215 wrapper, so `cover` crops nothing.
   Only the dummy account details stay as markup on top — see `.card-details` below. */
.credit-card-3d {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
  transform: translateZ(45px);
  backface-visibility: hidden;
  overflow: hidden;
}

/* The face is translucent so the three cards behind it show through (issue #125).
   The artwork sits on its own layer rather than on `.credit-card-3d` itself: `opacity` on the
   element would fade the printed account details with it, and those have to stay readable.
   The four sources carry an alpha channel, so the rounded corners let the page through too —
   opacity on an opaque source would only have turned the leftover backdrop into a grey haze. */
.credit-card-3d::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/card-black.webp') center / cover no-repeat;
  opacity: 0.9;
}

.credit-card-3d::after {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  /* Sheen only — the face is artwork now, so the old 0.4 white washed it out to grey. */
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.03) 50%, transparent 80%);
  pointer-events: none;
  transform: rotate(-15deg);
  transition: transform 0.1s ease;
}

/* Dummy account details printed over the card artwork.

   Placed bottom-left on purpose: the Black art already carries the chip (upper left),
   the wolf mark (centre) and the VISA logo (bottom right), so this is the only free band.
   Width is capped so a longer holder name can never run under the VISA logo.
   Colours are gold-on-black to read against the artwork — the old dark-on-white values
   were for the CSS-drawn card and are gone. */
.card-details {
  position: absolute;
  left: 24px;
  right: 38%;
  bottom: 13px;
  z-index: 2;
  color: #f2e6c2;
}

.card-number {
  font-size: 17px;
  letter-spacing: 2px;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  white-space: nowrap;
  margin-bottom: 7px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.card-label {
  font-size: 8px;
  text-transform: uppercase;
  color: rgba(242, 230, 194, 0.65);
  letter-spacing: 1px;
}

.card-holder {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* Background floating cards */
.floating-bg-card {
  position: absolute;
  width: 320px;
  height: 200px;
  border-radius: 20px;
  filter: blur(0.5px);
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.card-green {
  background: url('../images/card-green.webp') center / cover no-repeat;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
  transform: rotate(-15deg) translate(-55px, -95px) scale(0.9) translateZ(-110px);
  opacity: 0.85;
}

.card-gold {
  background: url('../images/card-gold.webp') center / cover no-repeat;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  /* Angles differ by several degrees per card so no two cards look parallel (client feedback). */
  transform: rotate(26deg) translate(55px, 100px) scale(0.85) translateZ(-80px);
  opacity: 0.8;
}

.card-platinum {
  background: url('../images/card-platinum.webp') center / cover no-repeat;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
  transform: rotate(10deg) translate(60px, -85px) scale(0.88) translateZ(-50px);
  opacity: 0.85;
}

/* Brand Title & 3D Interactive Wolf Logo Section */
.brand-footer {
  text-align: center;
  z-index: 2;
}

.wolf-logo-wrapper {
  width: 90px;
  height: 90px;
  margin: 0 auto 16px auto;
  filter: drop-shadow(0 8px 16px rgba(123, 97, 255, 0.18));
  cursor: pointer;
}

.wolf-logo-svg {
  width: 100%;
  height: 100%;
}

.wolf-logo-svg path {
  fill: var(--color-text-main);
  stroke: none;
}

.brand-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--color-blue), var(--color-pink), var(--color-blue));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Anchors .brand-title-sheen. The gradient itself stays static: sweeping `background-position` is
     not compositable, so it repainted the wordmark every frame while the page stayed open (#115). */
  position: relative;
  /* The sheen window travels one full title width past each edge. `overflow: hidden` on the window clips only
     its own content, not the window, so at the end of each sweep it poked past `.brand-column` (a scroll
     container) and a horizontal scrollbar blinked in and out. Nothing is visible outside the title anyway. */
  overflow: hidden;
}

/* The shimmer, built only from `transform` so the compositor runs it without repainting.
   A soft-edged window (this element) slides left to right over a second copy of the wordmark
   in the reversed gradient, while that copy slides the opposite way by the same distance: the
   letters stay put and only the band of reversed colour travels across them. The two keyframes
   share duration, delay and start frame, which keeps them in lock-step.

   The 3s delay is not cosmetic. Started immediately, the two animated layers competed with the
   first load and pushed "form usable" from 2.3s to 3.4s (Fast 4G + 4x CPU, n=4); delayed, the load
   matched a page with no motion at all. No `will-change` for the same reason: it would build the
   layers during the load, and the browser promotes them on its own once the animation starts. */
.brand-title-sheen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent);
  transform: translateX(-100%);
  animation: brand-sheen-window 4s linear 3s infinite;
}

.brand-title-sheen > span {
  display: block;
  background: linear-gradient(90deg, var(--color-pink), var(--color-blue));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: translateX(100%);
  animation: brand-sheen-text 4s linear 3s infinite;
}

@keyframes brand-sheen-window {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

@keyframes brand-sheen-text {
  from { transform: translateX(100%); }
  to   { transform: translateX(-100%); }
}

/* Decoration only; nothing is lost when motion is turned off. */
@media (prefers-reduced-motion: reduce) {
  .brand-title-sheen {
    display: none;
  }
}

.brand-subtitle {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 4px;
  margin-top: 4px;
  text-transform: uppercase;
}

/* ==========================================================================
   Right Column: Form & Multi-Stage View Area
   ========================================================================== */
.form-column {
  flex: 0.9;
  padding: 40px 48px;
  display: flex;
  flex-direction: column;
  /* `center` alone loses the top of anything taller than the column: centred overflow spills past both
     edges, and the part above the start edge cannot be scrolled back to. Short forms are unaffected —
     `safe` only changes behaviour once the content no longer fits, where it falls back to flex-start.
     The plain `center` above it is the fallback for browsers that do not understand the safe keyword. */
  justify-content: center;
  justify-content: safe center;
  position: relative;
  background: rgba(255, 255, 255, 0.35);
  overflow-y: auto;
  min-height: 0;
}

/* Language selector (LanguageSelector.razor). A <details> disclosure, so it works without JavaScript.
   Only the corner placement on the sign-in frame lives here; account.css places it in the account top bar.
   Positions used to sit in an inline style on the component, which is why the 900px rule below never applied. */
.lang-selector {
  position: relative;
  z-index: 10;
  font-size: 13px;
}

.form-column > .lang-selector {
  position: absolute;
  top: 24px;
  right: 28px;
}

.lang-selector-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 8px;
  color: var(--color-text-muted);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: var(--transition-fast);
}

/* The native disclosure triangle, in both engines that draw one. */
.lang-selector-toggle::-webkit-details-marker {
  display: none;
}

.lang-selector-toggle::marker {
  content: "";
}

.lang-selector-toggle:hover,
.lang-selector[open] > .lang-selector-toggle {
  background: rgba(18, 19, 25, 0.05);
  color: var(--color-text-main);
}

.lang-selector-toggle:focus-visible,
.lang-selector-option:focus-visible {
  outline: 2px solid var(--color-text-main);
  outline-offset: 2px;
}

.lang-selector-globe {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.lang-selector-chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s ease;
}

.lang-selector[open] .lang-selector-chevron {
  transform: rotate(180deg);
}

/* Anchored to the right edge of the toggle. The selector always sits at the right of whatever holds it, so a
   menu opening rightwards would run off a narrow screen. */
.lang-selector-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 128px;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #ffffff;
  border: 1px solid rgba(18, 19, 25, 0.08);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(18, 19, 25, 0.12);
}

.lang-selector-option {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--color-text-main);
  text-decoration: none;
  white-space: nowrap;
}

.lang-selector-option:hover {
  background: rgba(18, 19, 25, 0.05);
}

/* The language in use is the current state, not a destination. */
.lang-selector-option[aria-current="true"] {
  font-weight: 700;
}

/* ==========================================================================
   Multi-stage Steps (Slide/Fade Animations)
   ========================================================================== */
.form-step {
  display: none;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  width: 100%;
}

.form-step.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.form-header {
  margin-bottom: 28px;
}

.form-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--color-text-main);
}

.form-subtitle {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 6px;
  line-height: 1.5;
}

.input-group {
  margin-bottom: 16px;
  position: relative;
}

.input-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-main);
  margin-bottom: 6px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.input-wrapper {
  position: relative;
  width: 100%;
}

/* Solid Input Panels */
.form-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 500;
  background: var(--color-input-bg);
  border: 1px solid var(--color-input-border);
  border-radius: 12px;
  color: var(--color-text-main);
  outline: none;
  transition: var(--transition-smooth);
  box-shadow: 0 2px 4px rgba(18, 19, 25, 0.02);
}

/* Gradient Glowing Border on Focus */
.form-input:focus {
  border-color: transparent;
  box-shadow: 0 0 0 1px var(--color-purple), 0 8px 16px rgba(123, 97, 255, 0.08);
}

.input-password {
  padding-right: 44px;
}

.password-toggle-btn {
  position: absolute;
  /* A 44px square, the smallest target a thumb hits reliably. The 18px icon stays centred about
     22px in from the edge, where it sat before, so nothing moves on screen. */
  right: 0;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

.password-toggle-btn:hover {
  color: var(--color-text-main);
}

.password-toggle-btn svg {
  width: 18px;
  height: 18px;
}

.forgot-password-link {
  display: block;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  margin-top: -8px;
  margin-bottom: 20px;
  transition: var(--transition-fast);
}

.forgot-password-link:hover {
  color: var(--color-blue);
}

/* ==========================================================================
   Buttons (Solid Surface & Sparkle Design)
   ========================================================================== */

/* Primary Action Button (Formula 1 Sparkle & Glow) */
.btn-primary {
  width: 100%;
  padding: 14px;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  background: var(--color-primary-gradient);
  border: none; /* Remove border to keep it clean and flat */
  border-radius: 12px;
  cursor: pointer;
  letter-spacing: 0.5px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  
  /* Standard shadow identical to other tactile elements */
  box-shadow: 0 4px 6px rgba(18, 19, 25, 0.02);
  transition: var(--transition-smooth);
}

.btn-text {
  position: relative;
  z-index: 2;
}

/* Hover State: Simply scales slightly and drops a soft colored glow, identical animation-curve to secondary buttons */
.btn-primary:hover {
  filter: brightness(1.04); /* Smooth glow effect without heavy animations */
  transform: translateY(-1.5px);
  box-shadow: 0 8px 16px rgba(0, 161, 245, 0.12), 0 2px 4px rgba(18, 19, 25, 0.02);
}

/* Active State: Springy Click */
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(18, 19, 25, 0.02);
}

/* Dark Solid Variant for Logout button */
.btn-primary.btn-dark {
  background: var(--color-text-main);
  border: none;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.btn-primary.btn-dark:hover {
  filter: brightness(1.08);
  transform: translateY(-1.5px);
  box-shadow: 0 8px 20px rgba(18, 19, 25, 0.15);
}

.btn-primary.btn-dark:hover .btn-text {
  color: #ffffff;
}

/* Or Divider */
.divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 20px 0;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid rgba(18, 19, 25, 0.08);
}

.divider:not(:empty)::before {
  margin-right: .75em;
}

.divider:not(:empty)::after {
  margin-left: .75em;
}

/* Secondary Web3 Buttons (Solid contrast) */
.btn-secondary {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--color-btn-secondary-bg);
  border: 1px solid var(--color-btn-secondary-border);
  border-radius: 12px;
  color: var(--color-text-main);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-smooth);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 6px rgba(18, 19, 25, 0.02);
}

.btn-secondary:hover {
  background: var(--color-btn-secondary-hover-bg);
  border-color: rgba(123, 97, 255, 0.3);
  transform: translateY(-1.5px);
  box-shadow: 0 8px 16px rgba(123, 97, 255, 0.06), 0 2px 4px rgba(18, 19, 25, 0.02);
}

.btn-secondary:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(18, 19, 25, 0.02);
}

.btn-secondary-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-secondary-icon svg {
  width: 100%;
  height: 100%;
}

.btn-secondary-icon.passkey {
  color: var(--color-primary-dark);
}

.btn-secondary-icon.walletconnect {
  filter: drop-shadow(0 2px 4px rgba(59, 153, 252, 0.15));
}

.btn-secondary-icon.mnemonic {
  color: var(--color-text-main);
}

.social-logins {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.social-logins .btn-secondary {
  margin-bottom: 0;
}

/* The short tile label, shown only by the phone layout below. */
.auth-method-short {
  display: none;
}

.signup-wrapper {
  margin-top: 20px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.signup-link {
  color: var(--color-blue);
  text-decoration: none;
  font-weight: 700;
  transition: var(--transition-fast);
  margin-left: 4px;
}

.signup-link:hover {
  text-decoration: underline;
  color: var(--color-pink);
}

/* ==========================================================================
   Stage 2: MFA OTP Verification Styles
   ========================================================================== */
.otp-container {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 24px 0;
}

.otp-input {
  width: 50px;
  height: 56px;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  background: var(--color-input-bg);
  border: 1px solid var(--color-input-border);
  border-radius: 10px;
  color: var(--color-text-main);
  outline: none;
  transition: var(--transition-smooth);
}

.otp-input:focus {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--color-purple), 0 8px 16px rgba(123, 97, 255, 0.12);
}

.btn-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  margin-bottom: 20px;
  transition: var(--transition-fast);
}

.btn-back-link:hover {
  color: var(--color-text-main);
}

.btn-back-link svg {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   Stage 3: Interactive Security Settings (Link/Unlink Simulator)
   ========================================================================== */
.security-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 24px;
}

.security-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid rgba(123, 97, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.01);
}

.security-item-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.security-item-icon {
  width: 24px;
  height: 24px;
  color: var(--color-purple);
  display: flex;
  align-items: center;
  justify-content: center;
}

.security-item-icon svg {
  width: 100%;
  height: 100%;
}

.security-item-details {
  text-align: left;
}

.security-item-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-main);
}

.security-item-identifier {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: 2px;
  font-family: monospace;
}

/* Action Buttons within Security List */
.btn-unlink {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-error-text);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-unlink:hover {
  background: #fecaca;
  transform: translateY(-1px);
}

.btn-link-action {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-purple);
  background: rgba(123, 97, 255, 0.08);
  border: 1px solid rgba(123, 97, 255, 0.15);
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-link-action:hover {
  background: rgba(123, 97, 255, 0.15);
  transform: translateY(-1px);
}

/* User Profile Mini Badge */
.user-profile-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(123, 97, 255, 0.05);
  border-radius: 12px;
  margin-bottom: 20px;
  border: 1px solid rgba(123, 97, 255, 0.08);
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 800;
  font-size: 12px;
}

.user-meta-info {
  text-align: left;
}

.user-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-main);
}

.user-role-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--color-purple);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ==========================================================================
   Alert Banners & Simulated Toasts
   ========================================================================== */
.alert-banner {
  display: none;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 16px;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  animation: banner-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Banners quote user data (an email address) and server error text, neither of which has to contain
   a space. Without this the long word pushes the panel sideways (#128). */
.alert-banner,
.alert-banner > span {
  overflow-wrap: anywhere;
  min-width: 0;
}

.alert-banner.error {
  display: flex;
  background: var(--color-error-bg);
  color: var(--color-error-text);
  border: 1px solid var(--color-error-border);
}

.alert-banner.success {
  display: flex;
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border: 1px solid var(--color-success-border);
}

.alert-banner-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

@keyframes banner-pop {
  0% { opacity: 0; transform: scale(0.95) translateY(-5px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Simulated Popup Toast Notification */
.toast-notification {
  position: absolute;
  bottom: 24px;
  right: 24px;
  background: #ffffff;
  border: 1px solid rgba(123, 97, 255, 0.15);
  padding: 12px 20px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-main);
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 100;
}

.toast-notification.active {
  transform: translateY(0);
  opacity: 1;
}

.toast-icon {
  width: 18px;
  height: 18px;
  color: var(--color-success-text);
}


/* ==========================================================================
   Responsive and Mobile Optimization (Strict Compliance with ProjectRules)
   ========================================================================== */

@media (max-width: 900px) {
  body {
    padding: 16px;
  }

  .login-container {
    flex-direction: column;
    height: auto;
    max-height: 100%;
    border-radius: 24px;
    width: 100%;
    max-width: 440px;
    margin: auto;
    /* Bring back the premium card look */
    background: var(--color-panel-bg);
    border: 1px solid var(--color-border);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  
  /* Brand column scales down and acts as header */
  .brand-column {
    padding: 24px 24px 16px 24px;
    border-right: none;
    border-bottom: 1px solid rgba(18, 19, 25, 0.05);
    background: linear-gradient(180deg, rgba(240, 244, 248, 0.9) 0%, rgba(230, 236, 244, 0.9) 100%);
    display: block;
    border-radius: 24px 24px 0 0;
  }
  
  .cards-showcase {
    display: none; /* Hide 3D cards showcase on small screen to avoid squishing */
  }
  
  .brand-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    flex-direction: row;
  }
  
  .wolf-logo-wrapper {
    width: 36px;
    height: 36px;
    margin: 0;
  }
  
  .brand-title-group {
    text-align: left;
  }
  
  .brand-title {
    font-size: 16px;
    letter-spacing: 1px;
    color: var(--color-text-main);
  }
  
  .brand-subtitle {
    font-size: 12px;
    letter-spacing: 1px;
    margin-top: 1px;
    color: var(--color-text-muted);
  }
  
  /* Form column expands on mobile */
  .form-column {
    flex: none;
    height: auto;
    padding: 24px 20px; /* Reduced internal margin */
    background: transparent;
    justify-content: flex-start;
  }
  
  .form-header {
    margin-bottom: 16px; /* Reduced */
    text-align: center;
  }
  
  .form-title {
    font-size: 20px; /* Reduced */
  }
  
  .form-subtitle {
    font-size: 13px;
  }
  
  /* Stacked layout: the heading is centred across the full width, so a control pinned to the corner lands on top
     of it. Back into the flow, right-aligned above the heading. Still position: relative, so the menu stays
     anchored to the toggle instead of to the form column. */
  .form-column > .lang-selector {
    position: relative;
    top: auto;
    right: auto;
    align-self: flex-end;
    margin-bottom: 8px;
  }

  /* Under 16px, iOS Safari zooms the page in when a field takes focus and leaves it zoomed (#92). */
  .form-input {
    font-size: 16px;
  }

  /* 44px is the smallest target a thumb hits reliably. */
  .lang-selector-toggle {
    min-height: 44px;
    padding: 0 10px;
  }

  /* Nothing a phone shows is set below 12px. */
  .input-label,
  .divider {
    font-size: 12px;
  }

  .alert-banner {
    font-size: 13px;
  }

  /* 44px is the smallest target a thumb hits reliably. */
  .btn-secondary {
    min-height: 44px;
  }

  /* The link keeps its place and its spacing; the padding grows the tap area to 44px and the
     negative margins give that space back, so the button below does not move. */
  .forgot-password-link {
    width: fit-content;
    margin: -16px 0 -2px auto;
    padding: 8px 0 22px;
  }

  /* Same trick on an inline link: an inline-block's margin box sets the line height, so the
     padding and the margins cancel out and the sentence it sits in keeps its height. */
  .signup-link {
    display: inline-block;
    padding: 15px 0;
    margin-top: -15px;
    margin-bottom: -15px;
  }
}

/* Phones: no card (#92, option B). The sign-in screens run edge to edge — a slim bar with the wolf,
   the wordmark and the language selector, then the form on the page itself — so login fits one
   screen with every method visible. Applies to every screen in this frame (LoginCard, SignupCard,
   AccountShell), so moving from login to forgot-password does not jump between two looks. */
@media (max-width: 560px) {
  body:has(.login-container) {
    padding: 0;
  }

  .login-container {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: none;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* A row, and no longer growing: the desktop column is `flex: 1.1` and `flex-direction: column`,
     which here would stretch the bar to fill the screen and centre the wolf at its top. */
  .brand-column {
    flex: none;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    min-height: 60px;
    padding: 0 16px 0 20px;
    background: none;
    border-bottom: none;
    border-radius: 0;
  }

  .brand-footer {
    justify-content: flex-start;
    gap: 10px;
    width: auto;
  }

  .wolf-logo-wrapper {
    width: 30px;
    height: 30px;
  }

  .brand-title {
    font-size: 15px;
  }

  .brand-subtitle {
    display: none;
  }

  /* Static, so the language selector anchors to the whole screen and sits in the top bar. */
  .form-column {
    position: static;
    padding: 8px 20px 32px;
  }

  /* Out of the flow again, into the top bar beside the wordmark (the 900px rule above had put it
     in a row of its own over the heading). */
  .form-column > .lang-selector {
    position: absolute;
    top: 8px;
    right: 12px;
    margin-bottom: 0;
  }

  .form-header {
    text-align: left;
    margin-bottom: 20px;
  }

  .form-title {
    font-size: 24px;
  }

  /* Passkey, wallet and mnemonic as one row of tiles with short labels, instead of three
     full-width buttons that pushed sign-up below the screen. */
  .auth-methods {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .auth-methods .btn-secondary {
    flex-direction: column;
    gap: 6px;
    min-height: 72px;
    padding: 8px 4px;
    border-radius: 14px;
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
  }

  .auth-methods .btn-secondary-icon {
    width: 22px;
    height: 22px;
  }

  .auth-methods .auth-method-full {
    display: none;
  }

  .auth-methods .auth-method-short {
    display: inline;
  }
}

/* Phones: the card showcase comes back under the form. No height condition (#152): on a real iPhone
   Safari's toolbars leave a viewport well under 800px, so a height gate hid the cards on real devices
   while DevTools emulation showed them. Short phones scroll to reach the cards.
   `display: contents` lifts the showcase and the wordmark out of `.brand-column`, so `order` can put
   the wordmark bar on top, the form in the middle and the cards at the bottom — no markup change, so
   LoginCard, SignupCard and AccountShell all get it. The bar box moves from `.brand-column` to `.brand-footer`. */
@media (max-width: 560px) {
  .brand-column {
    display: contents;
  }

  .brand-footer {
    order: 0;
    align-items: center;
    min-height: 60px;
    padding: 0 16px 0 20px;
  }

  .form-column {
    order: 1;
  }

  .cards-showcase {
    display: flex;
    order: 2;
    flex: 1;
    min-height: 320px;
    padding-bottom: 24px;
  }

  /* 340px card plus the offset background cards would overflow a 390px screen; 0.72 keeps the whole fan inside.
     `scale`, not `transform`: auth.js writes the drag tilt into `transform` inline and would wipe a scale set there.
     `touch-action: none` so a drag on the card tilts it instead of scrolling the page. */
  .card-3d-wrapper {
    scale: 0.72;
    touch-action: none;
  }
}

@media (max-width: 460px) {
  .otp-input {
    width: 40px;
    height: 48px;
    font-size: 20px;
  }
}

/* ==========================================================================
   Height-Based Responsive Adjustments (To prevent scrollbars on short windows)
   ========================================================================== */

@media (max-height: 768px) and (min-width: 901px) {
  .brand-column, .form-column {
    padding: 24px 48px;
  }
  .form-header {
    margin-bottom: 16px;
  }
  .input-group {
    margin-bottom: 12px;
  }
  .forgot-password-link {
    margin-bottom: 16px;
  }
  .divider {
    margin: 12px 0;
  }
  .signup-wrapper {
    margin-top: 12px;
  }
  .wolf-logo-wrapper {
    width: 70px;
    height: 70px;
    margin-bottom: 8px;
  }
  .cards-showcase {
    transform: scale(0.85);
    transform-origin: center center;
  }
}

@media (max-height: 640px) and (min-width: 901px) {
  .brand-column, .form-column {
    padding: 16px 32px;
  }
  .form-header {
    margin-bottom: 12px;
  }
  .form-title {
    font-size: 24px;
  }
  .input-group {
    margin-bottom: 8px;
  }
  .forgot-password-link {
    margin-bottom: 12px;
  }
  .divider {
    margin: 8px 0;
  }
  .btn-secondary {
    padding: 10px 14px;
    margin-bottom: 6px;
  }
  .btn-primary {
    padding: 12px;
  }
  .wolf-logo-wrapper {
    width: 50px;
    height: 50px;
    margin-bottom: 4px;
  }
  .cards-showcase {
    transform: scale(0.7);
    transform-origin: center center;
  }
}

/* ==========================================================================
   Two-factor scopes (/account/security)

   The page renders statically — no Blazor circuit, so no C# runs on a click. A checkbox drives the
   switch; the modal that asks for the code is opened by account.js (styles in account.css).
   ========================================================================== */
.scope-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.scope-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.scope-name {
  font-weight: 600;
  font-size: 14px;
}

.scope-hint {
  font-size: 12px;
  opacity: 0.7;
  line-height: 1.4;
}

/* The checkbox itself is the state; it is visually replaced by the track below. */
.scope-switch {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.scope-track {
  flex-shrink: 0;
  width: 46px;
  height: 26px;
  border-radius: 13px;
  background: rgba(0, 0, 0, 0.18);
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
}

.scope-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}

.scope-switch:checked ~ .scope-row .scope-track {
  background: linear-gradient(90deg, #3b82f6, #ec4899);
}

.scope-switch:checked ~ .scope-row .scope-track::after {
  transform: translateX(20px);
}

.scope-switch:focus-visible ~ .scope-row .scope-track {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Actions that are not a toggle — reissuing backup codes, removing 2FA entirely — stay collapsed so the
   page is not four code fields tall. <details> gives that with no script. */
.account-action {
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  padding: 6px 0;
}

.account-action > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 0;
  list-style: none;
}

.account-action > summary::-webkit-details-marker {
  display: none;
}

.account-action > summary::after {
  content: "▾";
  float: right;
  opacity: 0.5;
  transition: transform 0.2s ease;
}

.account-action[open] > summary::after {
  transform: rotate(180deg);
}

.account-action-body {
  padding-bottom: 12px;
}

/* ==========================================================================
   Linked credentials (/account/passkey, /account/wallet)

   One row per registered passkey or linked wallet, plus the button that adds another. Kept apart
   from .scope-row above: that one carries a switch and a confirmation that unfolds under it, while
   these are a plain list with a single destructive action on the right.

   Both screens render statically, so nothing here relies on script.
   ========================================================================== */
.method-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.method-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
}

/* The WalletConnect mark is a filled logo in its own blue, the same one LoginCard puts on the
   "Sign in with Web3 Wallet" button. It opts out of the stroke styling above. */
.method-icon.walletconnect {
  fill: #3b99fc;
  stroke: none;
  opacity: 1;
}

.method-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.method-name {
  font-weight: 600;
  font-size: 14px;
  overflow-wrap: anywhere;
}

/* Hex reads better in a fixed pitch, and the spacing makes a transposed pair easier to spot.
   A 42-character address holds no break opportunity of its own, so it is given one: without this it
   runs past the text column and over the button beside it (#128). */
.method-address {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.3px;
  overflow-wrap: anywhere;
}

.method-hint {
  font-size: 11px;
  opacity: 0.55;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* The form around the button is the flex item, so the row's right edge is fixed here, not on the
   button's own flex-shrink. */
.method-remove-form {
  flex-shrink: 0;
  margin: 0;
}

/* An icon, not a word: the label lives in title/aria-label so the button still announces itself. */
.method-remove {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 0;
  border-radius: 10px;
  transition: background 0.2s ease, color 0.2s ease;
}

.method-remove svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.method-remove:hover,
.method-remove:focus-visible {
  background: rgba(18, 19, 25, 0.06);
  color: var(--color-text-main);
}

/* The same two classes on <button> elements (the real passkey screen submits forms). */
button.method-remove,
button.method-add {
  border-width: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}

button.method-add {
  border-width: 1px;
}

button.method-remove:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: transparent;
}

button.method-remove:disabled:hover {
  color: var(--color-text-muted);
}

.method-empty {
  font-size: 13px;
  opacity: 0.7;
  padding: 14px 0;
}

/* Rendered as an anchor on the mock screens and as a <button> once a real endpoint sits behind it. */
.method-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 16px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.method-add:hover,
.method-add:focus-visible {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.08);
}