/* Extracted from inline <style> blocks */

/* style block #1 */
body {
        font-family: "Vazirmatn", sans-serif;
        background-color: #1e293b; /* Dark Slate Blue Background */
        min-height: 100vh;
      }
      .auth-card {
        background-color: #334155; /* card */
        backdrop-filter: blur(14px);
        border: 1px solid rgba(148, 163, 184, 0.16);
        border-radius: 16px;
        box-shadow:
          0 20px 25px -5px rgba(0, 0, 0, 0.5),
          0 10px 10px -5px rgba(0, 0, 0, 0.3);
        animation: authFade 0.5s ease both;
      }
      .input-dark {
        background-color: #475569; /* input */
        color: #f1f5f9; /* Light text color */
        border: 1px solid #475569;
        box-shadow: inset 10px 10px 18px rgba(0,0,0,0.25), inset -10px -10px 18px rgba(255,255,255,0.03);
        transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
      }
      .input-dark::placeholder {
        color: #94a3b8;
      }
      .input-dark:focus{
        outline: none;
        border-color: rgba(232, 121, 249, 0.70);
        box-shadow:
          0 0 0 4px rgba(232, 121, 249, 0.16),
          inset 8px 8px 16px rgba(0, 0, 0, 0.25),
          inset -8px -8px 16px rgba(255, 255, 255, 0.03);
        transform: translateY(-1px);
      }
      /* Crome, Safari, Edge, Opera */
      input::-webkit-outer-spin-button,
      input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
      /* Firefox */
      input[type="number"] {
        appearance: textfield;
        -moz-appearance: textfield;
      }
      .tab-button.active {
        color: #e879f9; /* Pink */
        border-bottom: 2px solid #e879f9;
      }
      .tab-button {
        color: #94a3b8; /* Gray for inactive state */
      }

      .tab-button:focus-visible{
        outline: 2px solid rgba(232, 121, 249, 0.45);
        outline-offset: 4px;
        border-radius: 10px;
      }

      /* Modern primary buttons (override Tailwind bg-pink-600) */
      .auth-card button.bg-pink-600{
        background-color: #e879f9 !important;
        box-shadow: 0 14px 30px rgba(232, 121, 249, 0.20);
        transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
      }
      .auth-card button.bg-pink-600:hover{
        transform: translateY(-2px) scale(1.05);
        filter: brightness(1.03);
        box-shadow: 0 18px 40px rgba(219, 39, 119, 0.22);
        background-color: #db2777 !important;
      }
      .auth-card button.bg-pink-600:active{ transform: translateY(0) scale(1.02); }

      /* Icon animation */
      @keyframes spin360 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
      .auth-card button:focus-visible svg{ animation: spin360 0.6s ease; }

      /* Fade-in for forms/modals */
      @keyframes authFade {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
      }
      .auth-card form,
      #terms-modal > div{
        animation: authFade 0.5s ease both;
      }

      /* Responsive polish */
      @media (max-width: 768px){
        html, body{ font-size: 14px; }
        .auth-card{ border-radius: 16px; }
      }
