body { font-family: 'Plus Jakarta Sans', sans-serif; -webkit-font-smoothing: antialiased; }
    
    .bg-school {
        background-image: linear-gradient(rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.7)),
                          url('../../img/bg1.jpeg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    .animate-fade { animation: fadeIn 0.5s ease-out forwards; }

    @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
    .shake { animation: shake 0.3s ease-in-out; }

    .exit-scale { transform: scale(0.95); opacity: 0; transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); filter: blur(10px); }

    @keyframes successPulse { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); } 70% { box-shadow: 0 0 0 15px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }
    .success-active { animation: successPulse 1.5s infinite; background-color: #10b981 !important; }

    .glass-card { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); }
    .input-focus:focus { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15); border-color: #2563eb; }
    .text-pancasila-blue { color: #38bdf8; }
    .btn-login {
      background-color: #0f172a !important;
      color: #ffffff !important;
      box-shadow: 0 10px 25px -3px rgba(15, 23, 42, 0.35);
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
      cursor: pointer;
    }
    .btn-login:hover {
      background-color: #2563eb !important;
      box-shadow: 0 14px 28px -3px rgba(37, 99, 235, 0.55), 0 6px 10px -4px rgba(37, 99, 235, 0.4) !important;
      transform: translateY(-1px);
    }
    .btn-login:active,
    .btn-login:focus-visible,
    .btn-login.is-loading {
      background-color: #1d4ed8 !important;
      box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.35), 0 8px 20px rgba(37, 99, 235, 0.55) !important;
      transform: scale(0.97);
    }

    @keyframes flowRight {
      0% { transform: translateX(-100%); opacity: 0; }
      50% { opacity: 1; }
      100% { transform: translateX(100%); opacity: 0; }
    }

    .line-container {
      position: relative;
      overflow: hidden;
      background: rgba(56, 189, 248, 0.12);
      border: 1px solid rgba(56, 189, 248, 0.15);
    }

    .line-flow {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, #00f2fe, #38bdf8, #6366f1, #c084fc, transparent);
      box-shadow: 0 0 12px rgba(56, 189, 248, 0.8), 0 0 6px rgba(0, 242, 254, 0.9);
      animation: flowRight 2.8s infinite linear;
    }

    .logo-border-box {
      position: relative;
      width: 112px;
      height: 112px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 1.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .logo-border-box::before {
      content: '';
      position: absolute;
      width: 150%;
      height: 150%;
      background: conic-gradient(transparent, transparent, transparent, #2ffff5);
      animation: rotateBorder 4s linear infinite;
    }

    .logo-border-box::after {
      content: '';
      position: absolute;
      inset: 4px; 
      background: white; 
      border-radius: 1.2rem;
      z-index: 1;
    }

    .logo-border-box img {
      position: relative;
      z-index: 2; 
      width: 80%;
      height: 80%;
    }

    @keyframes rotateBorder {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }