:root {
          --sps-red: #AF2B1E;    
          --sps-blue: #0089D0;   
          --sps-dark: #2c3e50;
          --sps-bg: #f8f9fa;
      }
      body {
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
          background-color: var(--sps-bg);
          min-height: 100vh;
          margin: 0;
          overflow-x: hidden;
      }

      
      .main-container {
          min-height: 100vh;
          display: flex;
      }

      
      .brand-side {
          flex: 1;
          background: linear-gradient(135deg, var(--sps-blue) 0%, #005f9e 100%);
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          color: white;
          position: relative;
          overflow: hidden;
      }
      
      
      .brand-side::after {
          content: '';
          position: absolute;
          width: 600px;
          height: 600px;
          border: 40px solid rgba(255,255,255,0.05);
          border-radius: 50%;
          border-style: dashed;
          top: -150px;
          left: -150px;
          animation: spin 60s linear infinite;
      }

      
      .brand-side::before {
          content: '';
          position: absolute;
          width: 500px;
          height: 500px;
          border: 30px solid rgba(255,255,255,0.05);
          border-radius: 50%;
          border-style: dashed;
          bottom: -120px;
          right: -120px;
          animation: spin 50s linear infinite reverse; 
      }

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

      .brand-content {
          position: relative;
          z-index: 2;
          text-align: center;
          padding: 2rem;
      }

      
      .login-side {
          width: 500px;
          background: white;
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 3rem;
          box-shadow: -10px 0 30px rgba(0,0,0,0.05);
          position: relative;
          z-index: 10;
      }

      
      @media (max-width: 991.98px) {
          .main-container {
              flex-direction: column;
              background: var(--sps-bg);
          }
          
          
          .brand-side {
              flex: 0 0 40vh; 
              min-height: auto;
              border-bottom-left-radius: 0;
              border-bottom-right-radius: 0;
              clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
              padding-bottom: 3rem;
          }
          
          
          .brand-side::after, .brand-side::before { display: none; }

          .login-side {
              width: 100%;
              flex: 1;
              background: transparent;
              box-shadow: none;
              padding: 1.5rem;
              justify-content: flex-start;
              margin-top: -80px; 
          }
      }

      
      
      
      .school-logo {
          width: 140px;
          height: 140px;
          object-fit: contain;
          background: white;
          border-radius: 50%;
          padding: 15px;
          box-shadow: 0 5px 20px rgba(0,0,0,0.15);
          margin-bottom: 1.5rem;
      }

      
      .login-card {
          background: white;
          padding: 2.5rem;
          border-radius: 16px;
          box-shadow: 0 10px 30px rgba(0,0,0,0.08);
          width: 100%;
          max-width: 400px;
          margin: 0 auto;
      }

      
      h1 { font-weight: 800; letter-spacing: -0.5px; margin-bottom: 0.5rem; }
      .brand-subtitle { font-size: 1.1rem; opacity: 0.95; font-weight: 500; letter-spacing: 0.5px; }

      
      .form-floating > .form-control {
          border: 2px solid #e9ecef;
          border-radius: 8px;
          height: 55px;
          background-color: #fff;
      }
      .form-floating > .form-control:focus {
          border-color: var(--sps-blue);
          box-shadow: 0 0 0 4px rgba(0, 137, 208, 0.1);
      }
      .form-floating label { color: #6c757d; }

      
      .btn-login {
          background-color: var(--sps-red);
          border: none;
          height: 55px;
          font-weight: 700;
          font-size: 1.1rem;
          border-radius: 8px;
          text-transform: uppercase;
          letter-spacing: 1px;
          transition: all 0.2s;
          margin-top: 1rem;
      }
      .btn-login:hover {
          background-color: #8f2318;
          transform: translateY(-2px);
          box-shadow: 0 5px 15px rgba(175, 43, 30, 0.3);
      }

      
      .footer-link {
          color: var(--sps-dark);
          text-decoration: none;
          font-size: 0.9rem;
          font-weight: 600;
          display: inline-flex;
          align-items: center;
          gap: 5px;
          margin-top: 2rem;
          opacity: 0.7;
          transition: opacity 0.2s;
      }
      .footer-link:hover { opacity: 1; color: var(--sps-blue); }