/* Reset */
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }

        /* Base */
        body {
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
          background: #000000;
          min-height: 100vh;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 20px;
          position: relative;
          overflow: hidden;
        }

        /* Floating books background */
        .floating-books {
          position: absolute;
          inset: 0;
          pointer-events: none;
          overflow: hidden;
        }

        .book {
          position: absolute;
          opacity: 0.15;
        }

        /* Individual book animations - continuous upward flow */
        .book:nth-child(1) {
          left: 10%;
          animation: floatUp 15s linear infinite;
          animation-delay: 0s;
        }

        .book:nth-child(2) {
          left: 30%;
          animation: floatUp 18s linear infinite;
          animation-delay: -3s;
        }

        .book:nth-child(3) {
          left: 50%;
          animation: floatUp 16s linear infinite;
          animation-delay: -6s;
        }

        .book:nth-child(4) {
          left: 70%;
          animation: floatUp 17s linear infinite;
          animation-delay: -9s;
        }

        .book:nth-child(5) {
          left: 85%;
          animation: floatUp 19s linear infinite;
          animation-delay: -12s;
        }

        @keyframes floatUp {
          0% {
            top: 110%;
            transform: rotate(0deg);
            opacity: 0;
          }

          10% {
            opacity: 0.15;
          }

          90% {
            opacity: 0.15;
          }

          100% {
            top: -10%;
            transform: rotate(360deg);
            opacity: 0;
          }
        }

        /* Auth container */
        .auth-container {
          position: relative;
          z-index: 1;
          background: #121212;
          border-radius: 24px;
          padding: 0;
          max-width: 420px;
          width: 100%;
          border: 1px solid #2a2a2a;
          overflow: hidden;
          animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        @keyframes fadeInUp {
          from {
            opacity: 0;
            transform: translateY(20px);
          }

          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        /* Header */
        .auth-header {
          padding: 48px 40px 32px;
          text-align: center;
          border-bottom: 1px solid #2a2a2a;
        }

        .logo-wrapper {
          width: 64px;
          height: 64px;
          margin: 0 auto 24px;
          border-radius: 16px;
          background: #ffffff;
          transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .logo-svg {
          width: 40px;
          height: 40px;
        }

        /* Header text */
        .app-name {
          font-size: 28px;
          font-weight: 700;
          color: #ffffff;
          margin-bottom: 8px;
          letter-spacing: -0.02em;
        }

        .tagline {
          font-size: 14px;
          color: #7a7a7a;
          font-weight: 400;
        }

        /* Tabs */
        .tabs-wrapper {
          padding: 0 40px;
          background: #121212;
        }

        .tabs-container {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 0;
          position: relative;
          border-bottom: 1px solid #2a2a2a;
        }

        .tab-button {
          padding: 16px 0;
          border: none;
          background: transparent;
          color: #7a7a7a;
          font-size: 15px;
          font-weight: 600;
          cursor: pointer;
          transition: color 0.2s ease;
          font-family: inherit;
          position: relative;
        }

        .tab-button.active {
          color: #ffffff;
        }

        .tab-button:hover:not(.active) {
          color: #9a9a9a;
        }

        .tab-indicator {
          position: absolute;
          bottom: -1px;
          left: 0;
          width: 50%;
          height: 2px;
          background: #ffffff;
          transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* Indicator when second tab active */
        .tabs-container:has(.tab-button:nth-child(2).active) .tab-indicator {
          transform: translateX(100%);
        }

        /* Content */
        .content-wrapper {
          padding: 40px 40px 48px;
          background: #121212;
        }

        .tab-content {
          display: none;
          animation: slideIn 0.3s ease;
        }

        .tab-content.active {
          display: block;
        }

        @keyframes slideIn {
          from {
            opacity: 0;
            transform: translateY(8px);
          }

          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        /* Auth Buttons */
        .auth-buttons {
          display: flex;
          flex-direction: column;
          gap: 12px;
          margin-bottom: 32px;
        }

        .auth-btn {
          width: 100%;
          padding: 16px 24px;
          border: none;
          border-radius: 12px;
          font-size: 15px;
          font-weight: 600;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          font-family: inherit;
          transition: all 0.2s ease;
          background-clip: padding-box;
        }

        .primary-btn {
          background: #ffffff;
          color: #000000;
        }

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

        .primary-btn:active {
          transform: translateY(0);
          background: #d4d4d4;
        }

        .secondary-btn {
          background: transparent;
          color: #ffffff;
          border: 1px solid #3a3a3a;
        }

        .secondary-btn:hover {
          background: #1a1a1a;
          border-color: #4a4a4a;
          transform: translateY(-1px);
        }

        .secondary-btn:active {
          transform: translateY(0);
          background: #121212;
        }

        /* Icon styles */
        .btn-icon {
          display: flex;
          align-items: center;
          width: 18px;
          height: 18px;
        }

        .btn-icon img.auth-icon {
          width: 18px;
          height: 18px;
          object-fit: contain;
          display: block;
        }

        /* Button text */
        .btn-text {
          letter-spacing: -0.01em;
        }

        /* Footer Text */
        .footer-text {
          font-size: 13px;
          color: #7a7a7a;
          text-align: center;
          line-height: 1.6;
        }

        .footer-text a {
          color: #ffffff;
          text-decoration: none;
          font-weight: 500;
          transition: color 0.2s;
        }

        .footer-text a:hover {
          color: #e5e5e5;
        }

        /* Trust badges */
        .trust-section {
          margin-top: 32px;
          padding-top: 28px;
          border-top: 1px solid #2a2a2a;
        }

        .trust-badges {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 24px;
        }

        .trust-badge {
          display: flex;
          align-items: center;
          gap: 6px;
          font-size: 12px;
          color: #7a7a7a;
          font-weight: 500;
        }

        .trust-icon {
          width: 14px;
          height: 14px;
        }

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

        /* Loading State */
        .auth-btn.loading {
          pointer-events: none;
          opacity: 0.6;
          cursor: not-allowed;
        }

        .auth-btn.loading .btn-text {
          display: inline-flex;
          align-items: center;
          gap: 8px;
        }

        .auth-btn.loading .btn-text::after {
          content: '';
          width: 12px;
          height: 12px;
          border: 2px solid currentColor;
          border-radius: 50%;
          border-top-color: transparent;
          animation: spin 0.6s linear infinite;
        }

        @keyframes spin {
          to {
            transform: rotate(360deg);
          }
        }

        /* White page-transition overlay used for navigation effect */
        .page-transition {
          position: fixed;
          inset: 0;
          background: #ffffff;
          z-index: 9998;
          opacity: 0;
          transform: scale(1.02);
          transition: opacity 0.35s ease, transform 0.35s ease;
          pointer-events: none;
        }

        .page-transition.active {
          opacity: 1;
          transform: scale(1);
          pointer-events: auto;
        }

        /* Loading overlay (kept for potential use elsewhere) */
        .loading-overlay {
          position: fixed;
          inset: 0;
          background: #000000;
          z-index: 9999;
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
          transform: scale(1.1);
          transition: opacity 0.4s ease, transform 0.4s ease;
        }

        .loading-overlay.active {
          opacity: 1;
          transform: scale(1);
        }

        .loading-content {
          text-align: center;
          animation: contentPulse 2s ease-in-out infinite;
        }

        @keyframes contentPulse {

          0%,
          100% {
            transform: scale(1);
          }

          50% {
            transform: scale(1.02);
          }
        }

        /* Responsive */
        @media (max-width: 480px) {
          body {
            padding: 16px;
          }

          .auth-container {
            border-radius: 20px;
          }

          .auth-header {
            padding: 40px 32px 28px;
          }

          .tabs-wrapper {
            padding: 0 32px;
          }

          .content-wrapper {
            padding: 36px 32px 40px;
          }

          .logo-wrapper {
            width: 56px;
            height: 56px;
          }

          .logo-svg {
            width: 36px;
            height: 36px;
          }

          .app-name {
            font-size: 24px;
          }

          .tagline {
            font-size: 13px;
          }

          .tab-button {
            padding: 14px 0;
            font-size: 14px;
          }

          .auth-btn {
            padding: 14px 20px;
            font-size: 14px;
          }

          .trust-badges {
            flex-wrap: wrap;
            gap: 16px;
          }
        }

        @media (max-width: 360px) {
          .auth-header {
            padding: 36px 24px 24px;
          }

          .tabs-wrapper {
            padding: 0 24px;
          }

          .content-wrapper {
            padding: 32px 24px 36px;
          }

          .logo-wrapper {
            width: 52px;
            height: 52px;
          }

          .logo-svg {
            width: 32px;
            height: 32px;
          }
        }