/* ---- RTL Support ---- */
  [dir="rtl"] .rtl-flip { transform: scaleX(-1); }
  [dir="rtl"] .rtl-ml-2 { margin-left: 0; margin-right: 0.5rem; }

  /* ---- Premium auth input ---- */
  .auth-input {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--rule, #e5e7eb);
    background: var(--paper-2, #ffffff);
    color: var(--ink, #111827);
    font-size: 0.9375rem;
    line-height: 1.5;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  }
  .auth-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
  }
  .auth-input::placeholder { color: var(--ink-soft, #9ca3af); }

  .dark .auth-input {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
    color: #f9fafb;
  }
  .dark .auth-input:focus {
    background: rgba(255,255,255,0.08);
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
  }
  .dark .auth-input::placeholder { color: #6b7280; }

  /* ---- Primary button ---- */
  .auth-btn {
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  }
  .auth-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -4px rgba(59,130,246,0.35); }
  .auth-btn:active { transform: translateY(0); }

  /* ---- Branding panel ---- */
  .brand-panel {
    background: var(--brand-gradient, linear-gradient(145deg, #0f0c29 0%, #302b63 45%, #24243e 100%));
    position: relative;
    overflow: hidden;
  }
  .brand-panel::before {
    content: '';
    position: absolute;
    top: -25%;
    right: -15%;
    width: 65%;
    height: 65%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--brand-glow-1, rgba(139,92,246,0.28)) 0%, transparent 70%);
    pointer-events: none;
  }
  .brand-panel::after {
    content: '';
    position: absolute;
    bottom: -20%;
    left: -10%;
    width: 55%;
    height: 55%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--brand-glow-2, rgba(59,130,246,0.22)) 0%, transparent 70%);
    pointer-events: none;
  }

  /* ---- Alert slide-in ---- */
  @keyframes slideInDown {
    from { transform: translateY(-6px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  .alert-in { animation: slideInDown 0.25s ease-out; }