*{margin:0;padding:0;box-sizing:border-box;}
    html,body{height:100%;overflow:hidden;font-family:'Outfit',sans-serif;max-width:100vw;}

    .auth-wrap{display:flex;height:100vh;width:100%;}

    .auth-left{position:relative;flex:1;min-width:0;overflow:hidden;}
    .auth-left-bg{
      position:absolute;inset:0;
      background-image:url('https://images.unsplash.com/photo-1562774053-701939374585?w=1400&q=85');
      background-size:cover;background-position:center 30%;
      transform:scale(1.04);
      animation:bgZoom 18s ease-in-out infinite alternate;
    }
    @keyframes bgZoom{from{transform:scale(1.04)}to{transform:scale(1.10)}}
    .auth-left-overlay{
      position:absolute;inset:0;
      background:linear-gradient(160deg,rgba(4,28,22,.88) 0%,rgba(7,102,83,.50) 45%,rgba(4,28,22,.80) 100%);
    }
    .auth-left-deco{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
    .auth-left-deco span{
      position:absolute;border-radius:50%;
      border:1px solid rgba(216,245,162,0.12);
      animation:ringPulse 6s ease-in-out infinite;
    }
    .auth-left-deco span:nth-child(1){width:340px;height:340px;top:-90px;left:-90px;animation-delay:0s;}
    .auth-left-deco span:nth-child(2){width:230px;height:230px;bottom:50px;left:30px;animation-delay:2s;}
    .auth-left-deco span:nth-child(3){width:150px;height:150px;top:42%;right:50px;animation-delay:4s;}
    @keyframes ringPulse{0%,100%{transform:scale(1);opacity:.45}50%{transform:scale(1.08);opacity:1}}
    .auth-left-content{
      position:relative;z-index:2;height:100%;
      display:flex;flex-direction:column;justify-content:space-between;
      padding:2.2rem 3rem;
    }
    .auth-logo{display:flex;align-items:center;gap:12px;text-decoration:none;animation:fadeDown .7s ease both;}
    .auth-logo-icon{
      width:46px;height:46px;
      background:linear-gradient(135deg,#addfba,#d8f5a2);
      border-radius:13px;display:flex;align-items:center;justify-content:center;
      color:#063d2a;font-size:13px;font-weight:800;letter-spacing:-.5px;
      box-shadow:0 4px 20px rgba(7,102,83,.5);
    }
    .auth-logo-text{font-size:1.4rem;font-weight:800;color:white;letter-spacing:2px;}
    .auth-school-info{
      animation:fadeUp .8s .2s ease both;
      position:absolute;top:38%;left:3rem;right:3rem;transform:translateY(-50%);
    }
    .auth-school-info h2{
      font-family:'Playfair Display',serif;
      font-size:clamp(2.5rem,4.5vw,3.6rem);
      color:white;font-weight:800;line-height:1.15;margin-bottom:1rem;
      text-shadow:0 2px 20px rgba(0,0,0,.5);
    }
    .auth-school-info h2 span{color:#d8f5a2;}
    .auth-school-info h2 em{font-style:italic;color:rgba(255,255,255,.75);}
    .auth-tagline-sub{
      font-size:1rem;color:rgba(255,255,255,.55);letter-spacing:.3px;
      display:flex;align-items:center;gap:8px;
    }
    .auth-tagline-sub::before{
      content:'';display:inline-block;width:28px;height:2px;
      background:linear-gradient(90deg,#d8f5a2,transparent);border-radius:2px;
    }
    .auth-stats{display:flex;gap:2rem;animation:fadeUp .8s .4s ease both;}
    .auth-stat{display:flex;flex-direction:column;}
    .auth-stat-num{font-size:1.5rem;font-weight:800;color:#d8f5a2;line-height:1;}
    .auth-stat-label{font-size:.7rem;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.8px;margin-top:3px;}

    .auth-right{
      width:500px;flex-shrink:0;
      display:flex;align-items:flex-start;
      padding-top:2.8rem;
      padding-bottom:1.2rem;
      justify-content:center;
      padding-left:3rem;padding-right:3rem;
      position:relative;overflow-y:auto;
      overflow-x:hidden;
      transition:background .55s ease;
    }
    .auth-right.mode-login{background:linear-gradient(160deg,#041c16 0%,#063d2a 40%,#076653 100%);}
    .auth-right.mode-register{background:linear-gradient(160deg,#f0fdf6 0%,#e8f5e9 50%,#f5fef0 100%);}
    .auth-right::before{
      content:'';position:absolute;width:380px;height:380px;border-radius:50%;
      bottom:-120px;right:-100px;pointer-events:none;transition:background .55s;
    }
    .auth-right.mode-login::before{background:radial-gradient(circle,rgba(216,245,162,.10),transparent 70%);}
    .auth-right.mode-register::before{background:radial-gradient(circle,rgba(7,102,83,.08),transparent 70%);}
    .auth-right::after{
      content:'';position:absolute;width:220px;height:220px;border-radius:50%;
      top:-70px;left:-50px;pointer-events:none;transition:background .55s;
    }
    .auth-right.mode-login::after{background:radial-gradient(circle,rgba(216,245,162,.08),transparent 70%);}
    .auth-right.mode-register::after{background:radial-gradient(circle,rgba(173,223,186,.22),transparent 70%);}
    .auth-right-ring{
      position:absolute;width:520px;height:520px;border-radius:50%;
      border:1px solid rgba(216,245,162,0.07);
      top:-160px;right:-190px;pointer-events:none;transition:opacity .55s;
    }
    .auth-right.mode-login .auth-right-ring{opacity:1;}
    .auth-right.mode-register .auth-right-ring{opacity:0;}

    .auth-card{position:relative;z-index:2;width:100%;animation:slideLeft .6s .1s cubic-bezier(.4,0,.2,1) both;padding-bottom:.5rem;}
    @keyframes slideLeft{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
    .auth-card-header{margin-bottom:1rem;min-height:auto;}
    .auth-card-header h3{
      font-family:'Playfair Display',serif;font-size:1.75rem;font-weight:800;
      margin-bottom:.3rem;transition:color .4s;
    }
    .mode-login .auth-card-header h3{color:#d8f5a2;}
    .mode-register .auth-card-header h3{color:#063d2a;}
    .auth-card-header p{font-size:.82rem;transition:color .4s;}
    .mode-login .auth-card-header p{color:rgba(216,245,162,.6);}
    .mode-register .auth-card-header p{color:#6b9080;}

    .auth-tabs{display:flex;border-radius:14px;padding:4px;margin-bottom:1rem;transition:background .4s;}
    .mode-login .auth-tabs{background:rgba(255,255,255,.08);}
    .mode-register .auth-tabs{background:#ddeee6;}
    .auth-tab{
      flex:1;text-align:center;padding:10px;font-size:.875rem;font-weight:700;
      cursor:pointer;border-radius:11px;transition:all .25s;
      border:none;background:transparent;font-family:'Outfit',sans-serif;
    }
    .mode-login .auth-tab{color:rgba(216,245,162,.45);}
    .mode-register .auth-tab{color:#6b9080;}
    .mode-login .auth-tab.active{background:rgba(216,245,162,.15);color:#d8f5a2;box-shadow:0 2px 12px rgba(0,0,0,.2);}
    .mode-register .auth-tab.active{background:white;color:#076653;box-shadow:0 2px 12px rgba(7,102,83,.12);}

    .auth-form{display:none;}
    .auth-form.active{display:block;animation:fadeIn .25s ease;}
    @keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

  .form-group{display:flex;flex-direction:column;gap:5px;margin-bottom:.7rem;}
    .form-label{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.7px;transition:color .4s;}
    .mode-login .form-label{color:rgba(216,245,162,.75);}
    .mode-register .form-label{color:#076653;}
    .form-input-wrap{position:relative;display:flex;align-items:center;}
    .form-icon{position:absolute;left:13px;pointer-events:none;transition:color .4s;}
    .mode-login .form-icon{color:rgba(216,245,162,.55);}
    .mode-register .form-icon{color:#9dbfb5;}
    .form-input{
      width:100%;border-radius:12px;padding:12px 14px 12px 42px;
      font-family:'Outfit',sans-serif;font-size:.88rem;outline:none;transition:all .25s;
    }
    .mode-login .form-input{
      background:rgba(255,255,255,.08);border:1.5px solid rgba(216,245,162,.18);color:white;
    }
    .mode-login .form-input::placeholder{color:rgba(255,255,255,.3);}
    .mode-login .form-input:focus{
      border-color:rgba(216,245,162,.55);
      background:rgba(255,255,255,.13);
      box-shadow:0 0 0 3px rgba(216,245,162,.09);
    }
    .mode-register .form-input{
      background:white;border:1.5px solid #d3e8e0;color:#2d4a3e;
      box-shadow:0 1px 4px rgba(7,102,83,.06);
    }
    .mode-register .form-input::placeholder{color:#b0cec5;}
    .mode-register .form-input:focus{border-color:#076653;box-shadow:0 0 0 3px rgba(7,102,83,.1);}

    .btn-auth{
      width:100%;border:none;padding:14px;border-radius:12px;
      font-family:'Outfit',sans-serif;font-size:.92rem;font-weight:700;
      cursor:pointer;transition:all .25s;margin-top:.4rem;letter-spacing:.3px;
    }
    .mode-login .btn-auth{
      background:linear-gradient(135deg,#d8f5a2,#addfba);color:#063d2a;
      box-shadow:0 4px 20px rgba(0,0,0,.3);
    }
    .mode-login .btn-auth:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,.35);}
    .mode-register .btn-auth{
      background:linear-gradient(135deg,#076653,#053d2e);color:#d8f5a2;
      box-shadow:0 4px 16px rgba(7,102,83,.3);
    }
    .mode-register .btn-auth:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(7,102,83,.4);}
    .btn-auth:active{transform:translateY(0);}
    .btn-auth:disabled{opacity:.6;cursor:not-allowed;transform:none;}

    .auth-footer-text{text-align:center;font-size:.78rem;margin-top:1rem;transition:color .4s;}
    .mode-login .auth-footer-text{color:rgba(216,245,162,.45);}
    .mode-register .auth-footer-text{color:#8fafa5;}
    .auth-footer-text a{font-weight:700;text-decoration:none;cursor:pointer;transition:color .4s;}
    .mode-login .auth-footer-text a{color:#d8f5a2;}
    .mode-register .auth-footer-text a{color:#076653;}
    .auth-footer-text a:hover{text-decoration:underline;}

    .auth-alert{border-radius:10px;padding:.75rem 1rem;font-size:.8rem;font-weight:600;margin-bottom:1rem;display:none;}
    .auth-alert.show{display:block;animation:fadeIn .2s ease;}
    .mode-login .auth-alert{background:rgba(254,178,178,.1);border:1.5px solid rgba(254,178,178,.25);color:#fca5a5;}
    .mode-register .auth-alert{background:#fff5f5;border:1.5px solid #feb2b2;color:#c53030;}

    @keyframes fadeDown{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}
    @keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

  @media(max-width:768px){
      .auth-wrap{flex-direction:column;}
      .auth-left{height:260px;flex:none;}
      .auth-right{width:100%;flex:1;padding:1.5rem 1.6rem 1.5rem;overflow-y:auto;overflow-x:hidden;}
      .auth-school-info{top:44%;}
      .auth-stats{display:none;}
    }

    @media(max-width:480px){
      .auth-left{height:200px;}
      .auth-left-content{padding:1.5rem 1.4rem;}
    }

/* ── AVATAR UPLOAD ── */
    .avatar-upload-wrap {
      display: flex; flex-direction: column; align-items: center;
      margin-bottom: 1.2rem;
    }
    .avatar-upload-circle {
      width: 80px; height: 80px; border-radius: 50%;
      background: linear-gradient(135deg, #076653, #06231D);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; position: relative; overflow: hidden;
      border: 3px solid rgba(216,245,162,.3);
      transition: border-color .2s;
    }
    .avatar-upload-circle:hover { border-color: rgba(216,245,162,.7); }
    .avatar-upload-circle img {
      width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
    }
    .avatar-upload-circle .cam-icon {
      position: absolute; inset: 0;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      color: rgba(216,245,162,.8); font-size: .6rem; font-weight: 700;
      gap: 4px; pointer-events: none;
    }
    .avatar-upload-circle:has(img) .cam-icon {
      background: rgba(0,0,0,.45);
    }
    .avatar-upload-label {
      font-size: .65rem; color: rgba(216,245,162,.5);
      margin-top: .5rem; font-weight: 600;
    }

    .qr-overlay{
      display:none;
      position:fixed;top:0;left:0;width:100vw;height:100vh;
      z-index:9999;
      background:rgba(4,28,22,.88);
      backdrop-filter:blur(8px);
      align-items:center;
      justify-content:center;
    }
    .qr-overlay.show{display:flex;animation:fadeIn .25s ease;}
    .qr-box{
      background:linear-gradient(160deg,#041c16,#063d2a);
      border:1px solid rgba(216,245,162,.22);
      border-radius:20px;
      padding:2.4rem 2.6rem;
      max-width:420px;width:90%;
      text-align:center;
      box-shadow:0 24px 60px rgba(0,0,0,.55);
    }
    .qr-box h3{
      font-family:'Playfair Display',serif;font-size:1.35rem;
      color:#d8f5a2;font-weight:800;margin-bottom:.5rem;
    }
    .qr-box p{font-size:.78rem;color:rgba(216,245,162,.55);margin-bottom:1.2rem;line-height:1.7;}
    .qr-box .btn-qr{
      width:100%;border:none;padding:13px;border-radius:12px;
      font-family:'Outfit',sans-serif;font-size:.92rem;font-weight:700;
      cursor:pointer;transition:all .25s;
      background:linear-gradient(135deg,#d8f5a2,#addfba);color:#063d2a;
      box-shadow:0 4px 20px rgba(0,0,0,.3);
    }
    /* ── PENDING SCREEN ── */
    .pending-overlay{
      display:none;
      position:fixed;top:0;left:0;width:100vw;height:100vh;
      z-index:9999;
      background:rgba(4,28,22,.88);
      backdrop-filter:blur(8px);
      align-items:center;
      justify-content:center;
    }
    .pending-overlay.show{display:flex;animation:fadeIn .25s ease;}
    .pending-box{
      background:linear-gradient(160deg,#041c16,#063d2a);
      border:1px solid rgba(216,245,162,.22);
      border-radius:20px;
      padding:2.4rem 2.6rem;
      max-width:440px;width:90%;
      text-align:center;
      box-shadow:0 24px 60px rgba(0,0,0,.55);
    }
    .pending-icon{
      width:72px;height:72px;border-radius:50%;
      background:rgba(216,245,162,.1);border:2px solid rgba(216,245,162,.3);
      display:flex;align-items:center;justify-content:center;
      margin:0 auto 1.2rem;
      animation:pendingSpin 3s linear infinite;
    }
    @keyframes pendingSpin{0%,100%{box-shadow:0 0 0 0 rgba(216,245,162,.3)}50%{box-shadow:0 0 0 12px rgba(216,245,162,0)}}
    .pending-box h3{
      font-family:'Playfair Display',serif;font-size:1.35rem;
      color:#d8f5a2;font-weight:800;margin-bottom:.5rem;
    }
    .pending-box p{font-size:.78rem;color:rgba(216,245,162,.55);margin-bottom:1.2rem;line-height:1.8;}
    .pending-status-pill{
      display:inline-flex;align-items:center;gap:6px;
      background:rgba(216,245,162,.08);border:1px solid rgba(216,245,162,.2);
      border-radius:100px;padding:6px 16px;margin-bottom:1.4rem;
    }
    .pending-dot{
      width:8px;height:8px;border-radius:50%;background:#d8f5a2;
      animation:pulse-dot 2s ease-in-out infinite;
    }
    .pending-status-pill span{font-size:.72rem;font-weight:700;color:#d8f5a2;letter-spacing:.5px;text-transform:uppercase;}
    .pending-box .btn-pending-ok{
      width:100%;border:none;padding:13px;border-radius:12px;
      font-family:'Outfit',sans-serif;font-size:.92rem;font-weight:700;
      cursor:pointer;transition:all .25s;
      background:rgba(216,245,162,.12);color:#d8f5a2;
      border:1.5px solid rgba(216,245,162,.25);
    }
    .pending-box .btn-pending-ok:hover{background:rgba(216,245,162,.2);}

    @keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.8); }
}
/* ── APP LOADING SCREEN ── */
.app-loader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    linear-gradient(135deg, #06231D 0%, #0C342C 38%, #076653 72%, #E2FBCE 130%);
  background-size: 180% 180%;
  animation: premiumGradientMove 9s ease-in-out infinite;
  transition: opacity .85s ease, visibility .85s ease, transform .85s ease;
  transform: translate3d(0,0,0);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.app-loader.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.035);
}

.loader-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.loader-gradient-layer {
  position: absolute;
  inset: -12%;
  opacity: .62;
  filter: blur(18px);
  transform: translate3d(0,0,0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.layer-one {
  background:
    radial-gradient(circle at 24% 26%, rgba(255,253,238,.42), transparent 30%),
    radial-gradient(circle at 70% 76%, rgba(226,251,206,.26), transparent 36%);
  animation: gradientLayerOne 10s ease-in-out infinite;
}

.layer-two {
  background:
    radial-gradient(circle at 80% 18%, rgba(227,239,38,.16), transparent 28%),
    radial-gradient(circle at 18% 82%, rgba(7,102,83,.32), transparent 36%);
  animation: gradientLayerTwo 11s ease-in-out infinite;
}

.layer-three {
  background:
    linear-gradient(120deg, transparent 14%, rgba(255,253,238,.08) 38%, rgba(227,239,38,.08) 52%, transparent 74%);
  opacity: .38;
  animation: gradientLayerThree 9s ease-in-out infinite;
}

.loader-sheen {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, transparent 0%, rgba(255,253,238,.055) 44%, rgba(226,251,206,.12) 50%, transparent 64%);
  transform: translate3d(-120%,0,0);
  animation: loaderSheen 4.8s ease-in-out infinite;
  will-change: transform, opacity;
}

.loader-card {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #FFFDEE;
  padding: 1rem;
  animation: loaderRise 1s .35s ease both;
}

.loader-mark-wrap {
  position: relative;
  width: 132px;
  height: 132px;
  margin: 0 auto 1.15rem;
}

.loader-mark,
.loader-mark-shadow {
  position: absolute;
  display: grid;
  place-items: center;
  font-weight: 800;
  letter-spacing: -1px;
  transform: translate3d(0,0,0);
  will-change: transform;
  backface-visibility: hidden;
}
.loader-mark-shadow {
  width: 112px;
  height: 112px;
  left: 1px;
  top: 15px;
  border-radius: 33px;
  background: rgba(255,253,238,.07);
  border: 1px solid rgba(226,251,206,.15);
  color: rgba(255,253,238,.14);
  font-size: 1.16rem;
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
  animation: markShadowDrift 4s ease-in-out infinite;
}

.loader-mark {
  width: 120px;
  height: 120px;
  right: 0;
  top: 0;
  border-radius: 35px;
  background:
    linear-gradient(145deg, #FFFDEE 0%, #E2FBCE 52%, #D8EA45 125%);
  color: #06231D;
  font-size: 1.25rem;
  box-shadow:
    0 20px 54px rgba(0,0,0,.36),
    0 0 30px rgba(226,251,206,.18);
  animation: markPulse 3s ease-in-out infinite;
}

.loader-mark::before {
  content: "";
  position: absolute;
  inset: -13px;
  border-radius: 45px;
  border: 2px solid rgba(255,253,238,.2);
  border-top-color: rgba(255,253,238,.85);
  border-right-color: rgba(226,251,206,.7);
  animation: loaderSpin 1.45s linear infinite;
}

.loader-mark::after {
  content: "";
  position: absolute;
  inset: -32px;
  border-radius: 58px;
  border: 1px solid rgba(226,251,206,.16);
  box-shadow: 0 0 42px rgba(227,239,38,.12);
  animation: loaderHalo 2.7s ease-in-out infinite;
}

.loader-card h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.78rem;
  margin-bottom: .35rem;
  color: #FFFDEE;
  text-shadow: 0 0 18px rgba(226,251,206,.18);
  animation: textGlow 3.6s ease-in-out infinite;
}

.loader-card p {
  font-size: .85rem;
  color: rgba(255,253,238,.68);
}

.loader-progress {
  width: min(270px, 70vw);
  height: 5px;
  margin: 1.15rem auto 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,253,238,.14);
  box-shadow: inset 0 0 12px rgba(0,0,0,.12);
}

.loader-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #FFFDEE, #E2FBCE, #E3EF26);
  box-shadow: 0 0 18px rgba(226,251,206,.45);
  animation: loaderProgress 3s cubic-bezier(.4,0,.2,1) both;
}

.loader-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: .9rem;
}

.loader-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #E2FBCE;
  box-shadow: 0 0 14px rgba(226,251,206,.6);
  animation: loaderDot 1.1s ease-in-out infinite;
}

.loader-dots span:nth-child(2) { animation-delay: .15s; }
.loader-dots span:nth-child(3) { animation-delay: .3s; }

@keyframes premiumGradientMove {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes gradientLayerOne {
  0%, 100% { transform: translate3d(-1%, -1%, 0) scale(1); }
  50% { transform: translate3d(2%, 2%, 0) scale(1.035); }
}

@keyframes gradientLayerTwo {
  0%, 100% { transform: translate3d(1.5%, 1%, 0) scale(1); }
  50% { transform: translate3d(-2%, -1.5%, 0) scale(1.04); }
}

@keyframes gradientLayerThree {
  0%, 100% { transform: translate3d(-1%,0,0) rotate(0deg); opacity: .34; }
  50% { transform: translate3d(1.5%,0,0) rotate(3deg); opacity: .48; }
}
@keyframes loaderSheen {
  0% { transform: translate3d(-120%,0,0); opacity: 0; }
  38% { opacity: .5; }
  75%, 100% { transform: translate3d(120%,0,0); opacity: 0; }
}

@keyframes markShadowDrift {
  0%, 100% { transform: translate3d(0,0,0) rotate(-8deg); }
  50% { transform: translate3d(-4px,3px,0) rotate(-10deg); }
}

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

@keyframes loaderDot {
  0%, 100% { opacity: .35; transform: translate3d(0,0,0); }
  50% { opacity: 1; transform: translate3d(0,-4px,0); }
}

@keyframes loaderRise {
  from { opacity: 0; transform: translate3d(0,16px,0) scale(.98); }
  to { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}

@keyframes loaderHalo {
  0%, 100% { opacity: .35; transform: scale(.96); }
  50% { opacity: .85; transform: scale(1.08); }
}

@keyframes markPulse {
  0%, 100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0,-4px,0); }
}

@keyframes textGlow {
  0%, 100% { text-shadow: 0 0 12px rgba(226,251,206,.12); }
  50% { text-shadow: 0 0 30px rgba(226,251,206,.38); }
}

@keyframes loaderProgress {
  from { width: 0%; }
  to { width: 100%; }
}

@media(max-width:600px) {
  .loader-mark-wrap {
    width: 112px;
    height: 112px;
  }

  .loader-mark {
    width: 102px;
    height: 102px;
    border-radius: 30px;
  }

  .loader-mark-shadow {
    width: 96px;
    height: 96px;
    border-radius: 28px;
  }

  .loader-card h2 {
    font-size: 1.55rem;
  }

  .loader-card p {
    font-size: .78rem;
  }
}