.auth-container {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
:root {
      --primary:transparent;
      --secondary: #5c9aed;
      --logo-icon:rgb(37, 207, 85);
      --tertiary: #f0f6fc;
      --alert-high: #e61a3f;
      --alert-medium: #f8b400;
      --alert-low: #27ae60;
      --background-dark: #1c1e23;
      --text-light: #f0f6fc;
      --card-border: rgba(255, 255, 255, 0.1);
      
  }
  :root {
      --hue1: 255;
      --hue2: 222;
      --border: 1px;
      --border-color: hsl(var(--hue2), 12%, 20%);
      --radius: 22px;  
        --ease: cubic-bezier(0.5, 1, 0.89, 1);
  }
:root {
  --h: 222;
  --s: 20%;
  --l: 22%;
  
  --canvas: var(--h);
  --bg: hsl(var(--canvas), 15%, 22%);
  --fg: hsl(var(--canvas), 39%, 95%);
  --link: hsl(var(--canvas), 90%, 80%);
  --linkh: hsl(150, 95%, 70%);
  --wgt: 200;

  --light: hsl(var(--h), var(--s), 95%);
  --dark: hsl(var(--h), var(--s), 20%);
  --tint: hsl(160, 85%, 60%);
  --tint2: hsl(200, 85%, 60%);
  --pads: 16px;
  --cols: 1fr;
  
  --labels: hsl(var(--h), var(--s), 40%);
  --b: hsla(var(--h), var(--s), 100%, 1);
  --svg: var(--fg);
  
  --spring: linear(
    0, 0.009, 0.035 2.1%, 0.142 4.6%, 0.283 6.9%, 0.726 13.3%, 0.941 17.2%, 1.02,
    1.08, 1.124, 1.153 24.9%, 1.163, 1.167, 1.165, 1.157 30.7%, 1.132 33.7%,
    1.051 40.7%, 1.017 44.2%, 0.99, 0.975 52.2%, 0.972 55.2%, 0.974 58.5%,
    0.996 71.5%, 1.003, 1.005 85.7%, 1
  )
    
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
* {
  box-sizing: border-box;
}

#app {
  display: grid;
  grid-template-columns: var(--cols);
  gap: var(--pads);
  min-height: 100%;
}

a {
  color: var(--link);
  text-decoration: none;
  font-weight: 450;
  transition: all 0.3s ease;
}
a:hover,
a:focus,
a:active {
  color: var(--linkh);
}

/* App */
#app {
  min-height: 100svh;
}

#app {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2em 5svw;
}

#app > header {
    display: flex;
    gap: 0.5em;
    flex-direction: column;
}

#app > header h1,
#app > header p {
    margin: 0;
    color: color-mix(in oklab, var(--fg) 70%, hsl(var(--hue1) 50% 50%));
}

#app > header p {
    color: color-mix(in oklab, var(--fg) 40%, hsl(var(--hue2) 50% 50%));
}

#app > footer {
    align-self: end;
    max-width: calc(96svw - 200px);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}

#app > footer h2 {
    width: 100%;
    font-size: 1em;
}

#app > footer [type=range] {
    --tint: hsl( var(--hue2) 66% 50% );
    --tint2: hsl( var(--hue1) 66% 50% );
    width: 320px;
    margin: 0;
}
#app > footer #h1 {
    --tint: hsl( var(--hue1) 66% 50% );
    --tint2: hsl( var(--hue1) 66% 50% );
    --hue: var(--hue1);
    width: 320px;
}
#app > footer #h2 {
    --tint: hsl( var(--hue2) 66% 50% );
    --tint2: hsl( var(--hue2) 66% 50% );
    --hue: var(--hue2);
    width: 320px;
}

#app input[type="range"]::-webkit-slider-thumb {
    box-shadow: 0 1px 2px 1px hsl(var(--hue) 66% 20% / 0.5);
}

#app input[type="range"]::-moz-range-thumb {
    box-shadow: 0 1px 2px 1px hsl(var(--hue) 66% 20% / 0.5);
}

#app input[type="range"]::-ms-thumb {
    box-shadow: 0 1px 2px 1px hsl(var(--hue) 66% 20% / 0.5);
}
#app input[type="range"]::-webkit-slider-runnable-track {
    background: linear-gradient(90deg, var(--tint) -25%, var(--tint2) 125%);
}
#app input[type="range"]::-moz-range-track {
    background: linear-gradient(90deg, var(--tint) -25%, var(--tint2) 125%);
}
#app input[type="range"]::-ms-track {
    background: linear-gradient(90deg, var(--tint) -25%, var(--tint2) 125%);
}
body {
  padding: calc(var(--pads) * 1.5);
  font-family: 'Asap Condensed', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: var(--fg);
  background-color: #171820;
  background-image: linear-gradient(
    180deg,
    hsl(var(--h), var(--s), 8%),
    hsl(var(--h), var(--s), 14%)
  );
  background-size: cover;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: #f5f7fa;
  color: #333;
  margin: 0;
}

body {
  background: #08090d;
  background-image: url(https://assets.codepen.io/13471/abstract-light.jpg), linear-gradient(to right in oklab, hsl(var(--hue2) 50% 75%), hsl(var(--hue1) 50% 75%));
  background-size: cover;
  background-position: center;
  background-blend-mode: hard-light;
  padding: 0;
}

body, #app {
  min-height: 100svh;
}

body,
html {
  min-height: 100%;

  #content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 40px 1fr;
  padding: 10px;
  box-sizing: border-box;
}

        
        .auth-card {
            background: transparent;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            width: 100%;
            max-width: 450px;
            position: relative;
            overflow: hidden;
        }
        
        .auth-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: linear-gradient(90deg, #4caf50, #45a049, #2196f3, #1976d2);
        }
        
        .auth-header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .auth-logo {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg,rgb(5, 188, 11),rgb(8, 218, 57));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            color: white;
            font-size: 2em;
            font-weight: bold;
        }
        
        .auth-title {
            font-size: 2em;
            color: #fff;
            opacity: 0.9;
            margin-bottom: 10px;
        }
        
        .auth-subtitle {
            color: #666;
            font-size: 1.1em;
        }
        
        .form-group {
            margin-bottom: 25px;
            position: relative;
        }
        
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }
        
        .form-input {
            width: 100%;
            padding: 15px 20px;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            font-size: 1em;
            transition: all 0.3s ease;
            background:rgb(1, 25, 48);
        }
        
        .form-input:focus {
            outline: none;
            border-color: #667eea;
            background: white;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
        
        .form-label {
            position: absolute;
            top: 15px;
            left: 20px;
            color: #666;
            transition: all 0.3s ease;
            pointer-events: none;
            background: white;
            padding: 0 5px;
        }
        
        .form-input:focus + .form-label,
        .form-input:not(:placeholder-shown) + .form-label {
            top: -10px;
            font-size: 0.9em;
            color: #667eea;
        }
        
        .password-strength {
            margin-top: 10px;
            height: 4px;
            background: #e0e0e0;
            border-radius: 2px;
            overflow: hidden;
        }
        
        .strength-bar {
            height: 100%;
            transition: all 0.3s ease;
            border-radius: 2px;
        }
        
        .strength-weak { background: #f44336; width: 25%; }
        .strength-fair { background: #ff9800; width: 50%; }
        .strength-good { background: #2196f3; width: 75%; }
        .strength-strong { background:rgb(2, 179, 8); width: 100%; }
        
        .strength-text {
            font-size: 0.9em;
            margin-top: 5px;
            font-weight: 500;
        }
        
        .checkbox-group {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin: 20px 0;
        }
        
        .custom-checkbox {
            width: 20px;
            height: 20px;
            border: 2px solid #e0e0e0;
            border-radius: 4px;
            position: relative;
            cursor: pointer;
            flex-shrink: 0;
        }
        
        .custom-checkbox input {
            opacity: 0;
            position: absolute;
        }
        
        .custom-checkbox input:checked + .checkmark {
            background: #667eea;
            border-color: #667eea;
        }
        
        .custom-checkbox .checkmark::after {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-weight: bold;
            opacity: 0;
        }
        
        .custom-checkbox input:checked + .checkmark::after {
            opacity: 1;
        }
        
        .checkbox-label {
            font-size: 0.95em;
            color: #666;
            line-height: 1.4;
        }
        
        .checkbox-label a {
            color: #667eea;
            text-decoration: none;
        }
        
        .checkbox-label a:hover {
            text-decoration: underline;
        }
        
        .auth-button {
            width: 100%;
            padding: 15px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 1.1em;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .auth-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
        }
        
        .auth-button:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }
        
        .button-spinner {
            display: none;
            width: 20px;
            height: 20px;
            border: 2px solid transparent;
            border-top: 2px solid white;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-right: 10px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .auth-divider {
            text-align: center;
            margin: 30px 0;
            position: relative;
            color: #666;
        }
        
        .auth-divider::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 1px;
            background: #e0e0e0;
        }
        
        .auth-divider span {
            background: white;
            padding: 0 20px;
        }
        
        .social-buttons {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 30px;
        }
        
        .social-button {
            padding: 12px;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            background: white;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-weight: 500;
        }
        
        .social-button:hover {
            border-color: #667eea;
            background: #f8f9fa;
        }
        
        .auth-footer {
            text-align: center;
            margin-top: 30px;
            color: #666;
        }
        
        .auth-footer a {
            color: #667eea;
            text-decoration: none;
            font-weight: 500;
        }
        
        .auth-footer a:hover {
            text-decoration: underline;
        }
        
        .error-message {
            background: #ffebee;
            color: #c62828;
            padding: 12px 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            border-left: 4px solid #f44336;
            display: none;
        }
        
        .success-message {
            background: #e8f5e8;
            color: #2e7d32;
            padding: 12px 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            border-left: 4px solid #4caf50;
            display: none;
        }
        
        .course-preview {
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
            padding: 20px;
            border-radius: 15px;
            margin-bottom: 30px;
            text-align: center;
        }
        
        .preview-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-top: 15px;
        }
        
        .preview-stat {
            padding: 10px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .stat-number {
            font-size: 1.5em;
            font-weight: bold;
            color: #667eea;
        }
        
        .stat-label {
            font-size: 0.9em;
            color: #666;
            margin-top: 5px;
        }
        
        @media (max-width: 768px) {
            .auth-card {
                margin: 10px;
                padding: 30px 20px;
            }
            
            .form-row {
                grid-template-columns: 1fr;
            }
            
            .social-buttons {
                grid-template-columns: 1fr;
            }
            
            .preview-stats {
                grid-template-columns: 1fr;
            }
        }
    form {
  color: var(--fg);
  background-color: var(--bg);
  min-width: 100%;
  width: 100%;
  padding: calc(var(--pads) * 0.5) calc(var(--pads) * 1.5) calc(var(--pads) * 1);
  border-radius: 8px;
  box-shadow: 0 2px 3px hsla(var(--h), var(--s), 8%, 50%);
}

form {
  --bor: hsl(var(--h), var(--s), 85%);
  --bg: var(--light);
  --fg: var(--dark);
}
fieldset {
  min-width: 100%;
  width: 100%;
  border: 1px solid var(--bor);
  border-radius: 5px;
  padding: var(--pads) calc(var(--pads) * 1.5);
  margin-block: var(--pads);
}

.field:focus-within label {
  color: var(--fg);
}

.field {
  margin-block: 2.5em;
}

.field:nth-of-type(1) {
  -webkit-margin-before: 1em;
  margin-block-start: 1em;
}

.field:nth-last-of-type(1) {
  -webkit-margin-after: 1em;
  margin-block-end: 1em;
}
/* Inside App Menu */
#menu {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition-property: visibility, opacity, filter;
  transition-duration: 0s, 0.25s, 0.25s, 0.25s;
  transition-delay: 0.5s, 0s, 0s, 0s;
  transition-timing-function: var(--ease);
  filter: blur(4px);

  font-family: 'Asap', sans-serif;
  color: #737985;

  position: relative;
  top: 140px;
  left: 2svw;
  min-width: 275px;
  min-height: 275px;
  border-radius: var(--radius);
  border: var(--border) solid var(--border-color);
  padding: 1em;
  background: linear-gradient(235deg, hsl(var(--hue1) 50% 10% / 0.8), hsl(var(--hue1) 50% 10% / 0) 33%), linear-gradient(45deg , hsl(var(--hue2) 50% 10% / 0.8), hsl(var(--hue2) 50% 10% / 0) 33%), linear-gradient(hsl(220deg 25% 4.8% / 0.66));
  backdrop-filter: blur(12px);
box-shadow: hsl(var(--hue2) 50% 2%) 0px 10px 16px -8px, hsl(var(--hue2) 50% 4%) 0px 20px 36px -14px;
}

#menu svg {
  fill: none;
  stroke-width: 1;
  height: 20px;
  width: 20px;
}

#menu:not(.open)::before,
#menu:not(.open)::after,
#menu:not(.open) .glow {
  opacity: 0;
  pointer-events: none;
  animation: glowoff 0.25s var(--ease) both;
}


#menu.open { 
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
  filter: blur(0px); 
  
  &::before,
  &::after,
  & .glow,
  & .shine {
      animation: glow 1s var(--ease) both;
  }
  & .shine {
      animation-delay: 0s;
      animation-duration: 2s;
  }
  & .glow {
      animation-delay: 0.2s;
  }
  & .glow-bright {
      animation-delay: 0.1s;
      animation-duration: 1.5s;
  }
  & .shine-bottom {
      animation-delay: 0.1s;
      animation-duration: 1.8s;
  }
  & .glow-bottom {
      animation-delay: 0.3s;
  }
  & .glow-bright.glow-bottom {
      animation-delay: 0.3s;
      animation-duration: 1.1s;
  }
}

#menu .shine,
#menu .glow {
  --hue: var(--hue1);
}
#menu .shine-bottom,
#menu .glow-bottom {
  --hue: var(--hue2);
  --conic: 135deg;
}

#menu .shine {
}

#menu .shine,
#menu .shine::before,
#menu .shine::after {
    
  pointer-events: none;
  
  border-radius: 0;
  border-top-right-radius: inherit;
  border-bottom-left-radius: inherit;
  border: 1px solid transparent;
  
  width: 75%;
  height: auto;
  min-height: 0px;
  aspect-ratio: 1;
  display: block;
  position: absolute;
  right: calc(var(--border) * -1);
  top: calc(var(--border) * -1);
  left: auto;
  
  z-index: 1;
  
  --start: 12%;
  background: conic-gradient(
      from var(--conic, -45deg) at center in oklch,
      transparent var(--start,0%), hsl( var(--hue), var(--sat,80%), var(--lit,60%)), transparent  var(--end,50%) 
  ) border-box;
  
  mask: 
      linear-gradient(transparent), 
      linear-gradient(black);
  mask-repeat: no-repeat;
  mask-clip: padding-box, border-box;
  mask-composite: subtract;
    
}

#menu .shine::before,
#menu .shine::after {
  content: "";
  width: auto;
  inset: -2px;
  mask: none;
}
    
#menu .shine::after { 
  z-index: 2;
  --start: 17%;
  --end: 33%;
  background: conic-gradient(
      from var(--conic, -45deg) at center in oklch,
      transparent var(--start,0%), hsl( var(--hue), var(--sat,80%), var(--lit,85%)), transparent var(--end,50%) 
  );
    
}

#menu .shine-bottom {
  top: auto;
  bottom: calc(var(--border) * -1);
  left: calc(var(--border) * -1);
  right: auto;
}

#menu .glow {
    
  pointer-events: none;
  
  border-top-right-radius: calc(var(--radius) * 2.5);
  border-bottom-left-radius: calc(var(--radius) * 2.5);
  border: calc(var(--radius) * 1.25) solid transparent;
  inset: calc(var(--radius) * -2);
  
  width: 75%;
  height: auto;
  min-height: 0px;
  aspect-ratio: 1;
  display: block;
  position: absolute;
  left: auto;
  bottom: auto;
  
  mask: url('https://assets.codepen.io/13471/noise-base.png');
  mask-mode: luminance;
  mask-size: 29%;
  
  opacity: 1;
  filter: blur(12px) saturate(1.25) brightness(0.5);
  mix-blend-mode: plus-lighter;
  z-index: 3;
  
  &.glow-bottom {
      inset: calc(var(--radius) * -2);
      top: auto;
      right: auto;
  }
  
  &::before, 
  &::after {
      content: "";
      position: absolute;
      inset: 0;
      border: inherit;
      border-radius: inherit;
      background: conic-gradient(
          from var(--conic, -45deg) at center in oklch,
          transparent var(--start,0%), hsl( var(--hue), var(--sat,95%), var(--lit,60%)), transparent  var(--end,50%) 
      ) border-box;
      mask: 
          linear-gradient(transparent), 
          linear-gradient(black);
      mask-repeat: no-repeat;
      mask-clip: padding-box, border-box;
      mask-composite: subtract;
      filter: saturate(2) brightness(1);
      
  }
  
  &::after {
      --lit: 70%;
      --sat: 100%;
      --start: 15%;
      --end: 35%;
      border-width: calc(var(--radius) * 1.75);
      border-radius: calc(var(--radius) * 2.75);
      inset: calc(var(--radius) * -0.25);
      z-index: 4;
      opacity: 0.75;
  }
  &.glow-bottom::after {
  }

}

#menu .glow-bright {  
  --lit: 80%;
  --sat: 100%;
  --start: 13%;
  --end: 37%;
  
  border-width: 5px;
  border-radius: calc(var(--radius) + 2px);
  inset: -7px;
  left: auto;
  filter: blur(2px) brightness(0.66);
  
  &::after {
      content: none;
  }
  
  &.glow-bottom {
      inset: -7px;
      right: auto;
      top: auto;
  }
}

#menu .inner,
#menu section {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

#menu .inner {
  font-size: 0.875rem;
}

#menu hr {
  width: 100%;
  height: 0.5px;
  background: var(--border-color);
  border: none;
  margin: 0.25em 0 0.5em;
  opacity: 0.66;
}

#menu input {
  --tint2: hsl(var(--hue2) 50% 90% / 0.1);
  font-family: 'Asap', sans-serif;
  font-weight: 300;
  box-shadow: 0 0 0 1px transparent;
  border: 1px solid hsl(var(--hue2) 13% 18.5% / 0.5);
  background: hsl(var(--hue1) 0% 40% / 0.05);
  border-radius: calc(var(--radius) * 0.33333);
  padding-left: 2.33em;
}



#menu header {
  font-size: 0.75rem;
  font-weight: 300;
  padding: 0 0.66em;
}

#menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#menu li {
  position: relative;
  padding: 0.66em;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 0.5em;
  border-radius: calc(var(--radius) * 0.33333);
  border: 1px solid transparent;
  transition: all 0.3s ease-in, --item-opacity 0.3s ease-in;
  background: 
    linear-gradient(
        90deg  in oklch, 
        hsl(var(--hue1) 29% 13% / var(--item-opacity)),
        hsl(var(--hue1) 30% 15% / var(--item-opacity)) 24% 32%, 
        hsl(var(--hue1) 5% 7% / var(--item-opacity))
    ) border-box;
    
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: inherit;
    background: 
        linear-gradient(
            90deg  in oklch, 
            hsl(var(--hue1) 15% 16% / var(--item-opacity)),
            hsl(var(--hue1) 40% 24% / var(--item-opacity)) 20% 32%, 
            hsl(var(--hue1) 2% 12% / var(--item-opacity))
        ) border-box;
    mask: 
        linear-gradient(transparent), 
        linear-gradient(black);
    mask-repeat: no-repeat;
    mask-clip: padding-box, border-box;
    mask-composite: subtract;
  }
      
  &:hover,
  &.selected,
  &:hover::after,
  &.selected::after {
    --item-opacity: 0.5;
    transition: all 0.1s ease-out, --item-opacity 0.1s ease-out;
    color: white;
  }
  
  &.selected,
  &.selected::after {
    animation: flash 0.75s ease-out 1 forwards;
  }
}

@keyframes flash {
    0% {
      --item-opacity: 0.5;
    }
    100% {
      --item-opacity: 0.75;
    }
}