:root {
      --primary: #E8451E;
      --primary-dark: #c73715;
      --primary-light: #ffefe6;
      --primary-hover: #D63914;
      --text-dark: #1E293B;
      --text-light: #64748B;
      --card-bg: rgba(255, 255, 255, 0.85); /* Glassier */
    }

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

    /* Ultra Modern Loader */
    .modern-loader { position: fixed; inset: 0; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; justify-content: center; align-items: center; z-index: 99999; transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s; }
    .modern-loader.hidden { opacity: 0; visibility: hidden; }
    .loader-spinner { width: 120px; height: 120px; border-radius: 50%; border: 3px solid transparent; border-top-color: #ea580c; border-bottom-color: #1e293b; animation: ultraSpin 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; position: absolute; box-shadow: 0 0 40px rgba(234, 88, 12, 0.3); }
    .loader-spinner::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; border: 3px solid transparent; border-left-color: #1e293b; border-right-color: #ea580c; animation: ultraSpinReverse 2s linear infinite; }
    .loader-logo { width: 50px; height: 50px; animation: softPulse 2s ease-in-out infinite; z-index: 2; border-radius: 50%; box-shadow: 0 10px 25px rgba(0,0,0,0.15); }
    @keyframes ultraSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    @keyframes ultraSpinReverse { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } }
    @keyframes softPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }

    /* Fluid Aurora / Glowing Orbs Background (India Theme) */
    body { 
      font-family: 'Outfit', sans-serif;
      min-height: 100vh;
      overflow-x: hidden; 
      overflow-y: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px 0;
      position: relative;
      background: #f8fafc;
    }

    /* --- Fully Responsive Dynamic Geometric Background --- */
    .bg-image {
      position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
      background: #fdfdfd; /* Pure white base */
      background-image: 
        /* Saffron at Top */
        radial-gradient(at 20% 0%, rgba(255, 153, 51, 0.35) 0px, transparent 55%),
        radial-gradient(at 80% 10%, rgba(255, 103, 31, 0.25) 0px, transparent 50%),
        /* White/Navy in Middle */
        radial-gradient(at 50% 50%, rgba(255, 255, 255, 1) 0px, transparent 60%),
        radial-gradient(at 80% 50%, rgba(6, 3, 141, 0.05) 0px, transparent 30%), /* Subtle Ashoka Chakra Blue */
        /* Green at Bottom */
        radial-gradient(at 10% 90%, rgba(19, 136, 8, 0.25) 0px, transparent 55%),
        radial-gradient(at 90% 100%, rgba(4, 106, 56, 0.35) 0px, transparent 60%);
      z-index: 0; overflow: hidden;
      animation: gradientShift 18s ease infinite alternate;
      background-size: 150% 150%;
    }
    
    @keyframes gradientShift {
      0% { background-position: 0% 0%; }
      100% { background-position: 100% 100%; }
    }

    /* Animated Floating Auroras (Premium Tech Look) */
    .bg-image::before, .bg-image::after, 
    .bg-overlay::before, .bg-overlay::after {
      content: ''; position: absolute; border-radius: 50%;
      animation: floatGeo 20s infinite alternate ease-in-out;
      z-index: 0;
    }

    /* Saffron Aurora */
    .bg-image::before {
      width: 55vw; height: 55vw; top: -15vw; left: -10vw;
      background: linear-gradient(135deg, rgba(255, 153, 51, 0.15), rgba(255, 103, 31, 0.2)); filter: blur(80px);
      animation-duration: 25s;
    }
    /* Green Aurora */
    .bg-image::after {
      width: 55vw; height: 55vw; bottom: -15vw; right: -15vw;
      background: linear-gradient(135deg, rgba(19, 136, 8, 0.15), rgba(4, 106, 56, 0.2)); filter: blur(90px);
      animation-duration: 28s; animation-delay: -5s;
    }
    /* Ambient White Glow */
    .bg-overlay::before {
      width: 40vw; height: 40vw; top: 35%; left: 30%;
      background: rgba(255, 255, 255, 0.95); filter: blur(70px);
      animation-duration: 22s; animation-delay: -10s;
      z-index: -1;
    }
    /* Subtle Navy Blue Aurora */
    .bg-overlay::after {
      width: 30vw; height: 30vw; top: 40%; left: 10%;
      background: rgba(6, 3, 141, 0.08); filter: blur(80px);
      animation-duration: 30s; animation-delay: -15s;
      z-index: -1;
    }

    @keyframes floatGeo {
      0% { transform: translate(0, 0) scale(1); }
      50% { transform: translate(3vw, 4vh) scale(1.03); }
      100% { transform: translate(-2vw, -3vh) scale(0.97); }
    }

    /* Noise Texture / Smoothing Overlay */
    .bg-overlay {
      position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
      background-color: transparent;
      background-image: 
        radial-gradient(#cbd5e1 1px, transparent 1px),
        url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noiseFilter)" opacity="0.03"/></svg>');
      background-size: 30px 30px, 100% 100%;
      background-position: 0 0, 0 0;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      z-index: 1;
    }

    /* Tilt Wrapper for Mousemove 3D Effect */
    .tilt-wrapper {
      position: relative; z-index: 10;
      perspective: 1500px;
      transform-style: preserve-3d;
      animation: floatUp 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
      opacity: 0; transform: translateY(60px) scale(0.95);
      width: 100%;
      display: flex;
      justify-content: center;
      padding: 0 15px; /* Ensures card never touches screen edges on mobile */
      box-sizing: border-box;
    }
    @keyframes floatUp { 
      0% { opacity: 0; transform: translateY(60px) scale(0.95); } 
      100% { opacity: 1; transform: translateY(0) scale(1); } 
    }

    /* Main 3D Card */
    .login-card {
      width: 100%; max-width: 440px;
      background: rgba(255, 255, 255, 0.9); /* Ultra crisp glass */
      backdrop-filter: blur(40px);
      -webkit-backdrop-filter: blur(40px);
      border-radius: 28px;
      padding: 40px 35px 30px 35px;
      /* Premium 3D Elevation */
      border: 1px solid rgba(255, 255, 255, 0.6);
      box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.3), 
        inset 0 2px 4px rgba(255, 255, 255, 0.8),
        inset 0 -2px 4px rgba(0, 0, 0, 0.05);
      animation: gentleCardFloat 6s infinite alternate ease-in-out;
      transform-style: preserve-3d;
    }
    @keyframes gentleCardFloat {
      0% { transform: translateY(0px); box-shadow: 0 30px 60px rgba(0,0,0,0.3), inset 0 2px 4px rgba(255,255,255,0.8); }
      100% { transform: translateY(-12px); box-shadow: 0 45px 80px rgba(0,0,0,0.25), inset 0 2px 4px rgba(255,255,255,0.9); }
    }

    /* Animated Logo Header */
    .card-header { text-align: center; margin-bottom: 25px; position: relative; transform: translateZ(50px); }
    
    .logo-container {
      position: relative;
      width: 75px; height: 75px;
      margin: 0 auto 15px auto;
      display: flex; justify-content: center; align-items: center;
      transform-style: preserve-3d;
    }
    
    /* 3D Pulsing Rings */
    .logo-container::before, .logo-container::after {
      content: ''; position: absolute;
      width: 100%; height: 100%;
      border-radius: 50%;
      border: 3px solid rgba(232, 69, 30, 0.6);
      animation: ripple3D 2s infinite ease-out;
      z-index: 0;
    }
    .logo-container::after { animation-delay: 1s; }
    
    @keyframes ripple3D {
      0% { transform: scale(1); opacity: 1; }
      100% { transform: scale(1.8); opacity: 0; }
    }

    .card-header img {
      width: 75px; height: 75px; border-radius: 50%;
      position: relative; z-index: 1;
      border: 3px solid #fff;
      background: #fff;
      /* 3D float shadow */
      box-shadow: 0 10px 20px rgba(232, 69, 30, 0.2);
    }

    /* Gradient Text */
    .card-header h2 { 
      font-size: 1.8rem; font-weight: 800; margin-bottom: 5px; letter-spacing: -0.5px;
      background: linear-gradient(135deg, var(--text-dark), var(--primary));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      text-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    .card-header p { color: var(--text-light); font-size: 0.95rem; }

    /* Animated Segmented Control (Tabs) */
    .segment-control {
      position: relative; display: flex;
      background: #f1f5f9; border-radius: 14px;
      padding: 6px; margin-bottom: 30px;
      /* Neumorphic Inset */
      box-shadow: inset 2px 2px 5px rgba(0,0,0,0.05);
      border: 1px solid rgba(255,255,255,0.5);
      transform: translateZ(40px);
    }
    .segment-btn {
      flex: 1; text-align: center; padding: 10px;
      font-size: 0.95rem; font-weight: 700; color: #94a3b8;
      cursor: pointer; position: relative; z-index: 2;
      transition: color 0.3s ease;
    }
    .segment-btn.active { color: var(--primary); }
    .segment-slider {
      position: absolute; top: 6px; left: 6px;
      width: calc(50% - 6px); height: calc(100% - 12px);
      background: #ffffff; border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.08);
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      z-index: 1; border: 1px solid #f8fafc;
    }

    /* Forms Slider Container */
    .forms-wrapper { position: relative; width: 100%; overflow: hidden; transform: translateZ(30px); border-radius: 14px; }
    .forms-slider {
      display: flex; width: 200%;
      transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .form-panel { width: 50%; padding: 4px; }

    /* 3D Neumorphic Inputs */
    .input-group { position: relative; margin-bottom: 22px; }
    .input-group i {
      position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
      color: #94a3b8; font-size: 1.1rem; transition: 0.3s; z-index: 2;
    }
    .input-field {
      width: 100%; background: #f8fafc;
      border-radius: 12px;
      padding: 16px 20px 16px 50px; color: var(--text-dark); font-size: 1rem;
      outline: none; transition: all 0.3s ease; position: relative; z-index: 1;
      font-family: inherit; font-weight: 500;
      /* Carved in effect */
      border: 1px solid rgba(255,255,255,0.4);
      box-shadow: inset 3px 3px 8px rgba(0,0,0,0.06), inset -3px -3px 8px rgba(255,255,255,1);
    }
    .input-field::placeholder { color: #94a3b8; }
    .input-field:focus {
      background: #fff;
      border-color: var(--primary-light);
      box-shadow: inset 0 0 0 1px var(--primary-light), 0 5px 15px rgba(232, 69, 30, 0.1);
    }
    .input-field:focus ~ i { color: var(--primary); }

    .form-options {
      display: flex; justify-content: flex-end; align-items: center;
      margin-bottom: 25px; margin-top: -5px; font-size: 0.9rem;
    }
    .forgot-link { color: var(--text-light); text-decoration: none; font-weight: 600; transition: 0.3s; }
    .forgot-link:hover { color: var(--primary); text-decoration: underline; }

    /* 3D Push Button */
    .btn-submit {
      width: 100%; padding: 16px; border-radius: 14px; border: none;
      background: linear-gradient(135deg, var(--primary), #FF6B42);
      color: #fff; font-size: 1.1rem; font-weight: 700;
      cursor: pointer; transition: all 0.15s ease;
      display: flex; justify-content: center; align-items: center; gap: 10px;
      /* 3D Button Shadows */
      box-shadow: 
        inset 1px 1px 2px rgba(255,255,255,0.3),
        0 4px 0 var(--primary-dark),
        0 8px 15px rgba(232, 69, 30, 0.3);
      position: relative; overflow: hidden;
      transform: translateY(0);
    }
    .btn-submit:active {
      transform: translateY(4px);
      box-shadow: 
        inset 1px 1px 2px rgba(255,255,255,0.3),
        0 0 0 var(--primary-dark),
        0 4px 8px rgba(232, 69, 30, 0.2);
    }

    /* OTP Flow */
    .otp-stage-2 {
      display: none; animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }
    @keyframes slideUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
    
    .otp-boxes { 
      display: flex; justify-content: space-between; gap: 10px; margin-bottom: 20px; margin-top: 10px; 
      position: relative; transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .otp-boxes input {
      width: 55px; height: 60px; border-radius: 12px; background: #f8fafc;
      font-size: 1.6rem; font-weight: 700; text-align: center; color: var(--text-dark);
      outline: none; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); font-family: inherit;
      border: 1px solid rgba(255,255,255,0.4);
      box-shadow: inset 3px 3px 6px rgba(0,0,0,0.06), inset -3px -3px 6px rgba(255,255,255,1);
    }
    .otp-boxes input:focus { background: #fff; box-shadow: inset 0 0 0 1px var(--primary-light), 0 5px 15px rgba(232, 69, 30, 0.1); }
    
    /* OTP Verification Animation (Collapse & Merge) */
    .otp-boxes.verifying {
      justify-content: center; gap: 0;
    }
    .otp-boxes.verifying input {
      width: 14px; height: 14px; margin: 0 -7px;
      border-radius: 50%; padding: 0;
      color: transparent; border-color: transparent; box-shadow: none;
      background: var(--primary);
    }
    .otp-boxes.success input {
      opacity: 0; transform: scale(0);
    }

    /* Success Circle & SVG Tick */
    .success-circle {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0);
      width: 60px; height: 60px; background: #10b981; border-radius: 50%; /* Green Success Color */
      display: flex; align-items: center; justify-content: center;
      opacity: 0; box-shadow: 0 10px 25px rgba(16, 185, 129, 0.4); z-index: 5;
    }
    .otp-boxes.success .success-circle {
      animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
      opacity: 1;
    }
    @keyframes popIn {
      0% { transform: translate(-50%, -50%) scale(0); }
      80% { transform: translate(-50%, -50%) scale(1.15); }
      100% { transform: translate(-50%, -50%) scale(1); }
    }
    
    .success-circle svg {
      width: 32px; height: 32px; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; fill: none;
      stroke-dasharray: 24; stroke-dashoffset: 24; 
    }
    .otp-boxes.success .success-circle svg {
      animation: drawTick 0.4s ease-out 0.25s forwards;
    }
    @keyframes drawTick {
      to { stroke-dashoffset: 0; }
    }
    
    .resend-text { text-align: center; font-size: 0.9rem; color: var(--text-light); margin-bottom: 25px; }
    .resend-text span { color: var(--primary); font-weight: 700; cursor: pointer; transition: 0.3s; }
    .resend-text span.disabled { color: #cbd5e1; cursor: default; }
    
    .back-btn-small {
      width: 100%; padding: 14px; border-radius: 14px; background: #fff;
      color: var(--text-dark); font-weight: 700; cursor: pointer; transition: 0.15s; margin-bottom: 12px; font-size: 1.05rem;
      border: 1px solid #e2e8f0;
      /* 3D Button Shadows for secondary */
      box-shadow: 
        0 4px 0 #cbd5e1,
        0 8px 15px rgba(0,0,0,0.05);
      transform: translateY(0);
    }
    .back-btn-small:active {
      transform: translateY(4px);
      box-shadow: 
        0 0 0 #cbd5e1,
        0 4px 5px rgba(0,0,0,0.05);
    }

    /* Bottom Register */
    .register-footer { text-align: center; margin-top: 30px; font-size: 0.95rem; color: var(--text-light); transform: translateZ(20px); }
    .register-footer a { color: var(--primary); font-weight: 700; text-decoration: none; transition: 0.3s; }
    .register-footer a:hover { text-decoration: underline; color: var(--primary-hover); }

    /* --- Full Responsive Design (Phone, Tablet, Laptop) --- */
    
    /* Tablets and Small Laptops */
    @media (max-width: 992px) {
      .login-card { padding: 35px 30px 25px 30px; }
      .otp-boxes input { width: 50px; height: 55px; }
    }

    /* Standard Mobile Phones */
    @media (max-width: 480px) {
      .login-card { 
        padding: 30px 20px 25px 20px; 
        border-radius: 24px; 
      }
      .card-header h2 { font-size: 1.6rem; }
      .otp-boxes input { width: 45px; height: 50px; font-size: 1.4rem; border-radius: 10px; }
      .btn-submit { padding: 14px; font-size: 1rem; }
      .tilt-wrapper { perspective: none; } /* Disable heavy 3D tilt on mobile for performance */
    }

    /* Extra Small Mobile Phones (e.g. iPhone SE) */
    @media (max-width: 375px) {
      .login-card { 
        padding: 25px 15px 20px 15px; 
      }
      .card-header p { font-size: 0.85rem; }
      .otp-boxes { gap: 6px; }
      .otp-boxes input { width: 38px; height: 45px; font-size: 1.2rem; }
      .input-field { padding: 14px 15px 14px 45px; font-size: 0.95rem; }
    }