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

 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     background: linear-gradient(135deg, #000000 0%, #0a3282 100%);
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 20px;
 }

 .container {
     background: white;
     border-radius: 20px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
     padding: 40px;
     width: 100%;
     max-width: 500px;
     animation: slideUp 0.5s ease-out;
 }

 @keyframes slideUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .header {
     text-align: center;
     margin-bottom: 30px;
 }

 .logo {
     width: 80px;
     height: 80px;
     background: linear-gradient(135deg, #000000, #0a3282);
     border-radius: 50%;
     margin: 0 auto 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     color: white;
     font-family: Arial, Helvetica, sans-serif;
     font-weight: bold;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
 }

 h1 {
     color: #333;
     font-size: 24px;
     margin-bottom: 10px;
 }

 .subtitle {
     color: #666;
     font-size: 14px;
 }

 .form-group {
     margin-bottom: 20px;
 }

 label {
     display: block;
     margin-bottom: 8px;
     color: #333;
     font-weight: 500;
 }

 input[type="text"],
 input[type="password"] {
     width: 100%;
     padding: 15px;
     border: 2px solid #e1e5e9;
     border-radius: 10px;
     font-size: 16px;
     transition: all 0.3s ease;
     background: #f8f9fa;
 }

 input[type="text"]:focus,
 input[type="password"]:focus {
     outline: none;
     border-color: #000000;
     background: white;
     transform: translateY(-2px);
     box-shadow: 0 5px 15px rgba(102, 126, 234, 0.1);
 }

 .btn {
     width: 100%;
     padding: 15px;
     background: linear-gradient(135deg, #000000, #0a3282);
     color: white;
     border: none;
     border-radius: 10px;
     font-size: 16px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s ease;
     margin-bottom: 15px;
 }

 .btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
 }

 .btn:active {
     transform: translateY(0);
 }

 .btn:disabled {
     opacity: 0.6;
     cursor: not-allowed;
     transform: none;
 }

 .result {
     margin-top: 20px;
     padding: 15px;
     border-radius: 10px;
     font-size: 14px;
     line-height: 1.5;
 }

 .success {
     background: #d4edda;
     color: #155724;
     border: 1px solid #c3e6cb;
 }

 .error {
     background: #f8d7da;
     color: #721c24;
     border: 1px solid #f5c6cb;
 }

 .info {
     background: #d1ecf1;
     color: #0c5460;
     border: 1px solid #bee5eb;
 }

 .loading {
     display: none;
     text-align: center;
     margin: 20px 0;
 }

 .spinner {
     width: 30px;
     height: 30px;
     border: 3px solid #f3f3f3;
     border-top: 3px solid #000000;
     border-radius: 50%;
     animation: spin 1s linear infinite;
     margin: 0 auto 10px;
 }

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

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

 .tabs {
     display: flex;
     margin-bottom: 30px;
     background: #f8f9fa;
     border-radius: 10px;
     padding: 5px;
 }

 .tab {
     flex: 1;
     padding: 10px;
     text-align: center;
     border-radius: 8px;
     cursor: pointer;
     transition: all 0.3s ease;
     font-weight: 500;
 }

 .tab.active {
     background: white;
     color: #000000;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }

 /* Hide tabs that require authentication */
 .tab.requires-auth {
     display: none;
 }

 .tab-content {
     display: none;
 }

 .tab-content.active {
     display: block;
 }

 .card-info {
     background: #f8f9fa;
     padding: 15px;
     border-radius: 10px;
     margin-bottom: 20px;
 }

 .card-info h3 {
     color: #333;
     margin-bottom: 10px;
 }

 .card-info p {
     color: #666;
     margin: 5px 0;
 }

 .footer {
     text-align: center;
     margin-top: 30px;
     color: #666;
     font-size: 12px;
 }

 .welcome-message {
     background: #d4edda;
     color: #155724;
     border: 1px solid #c3e6cb;
     padding: 15px;
     border-radius: 10px;
     margin-bottom: 20px;
     text-align: center;
 }

 .logout-section {
     margin-top: 20px;
     padding-top: 20px;
     border-top: 1px solid #eee;
 }

 @font-face {
     font-family: games;
     src: url('/Frontend/assets/fonts/Graph35PixRegular-vj1A.ttf');
 }

 .games {
     font-family: games;
     font-size: 20px;
     text-align: center;
     color: #fff;
     margin-top: 20px;
 }

 .games:hover {
     text-decoration: underline;
 }

 .newitem {
   display: inline-block;
  position: relative;
  top: -0.6em; /* position like superscript */
  font-size: 0.6em; /* small text */
  padding: 0.2em 0.5em;
  background-color: red; /* or any color */
  color: white;
  border-radius: 999px; /* pill shape */
  font-weight: bold;
  line-height: 1;
  animation: blink 1s infinite;
 }
 
 @keyframes blink {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}

 .newitem:hover {
   background-color: darkred; /* darker on hover */
 }

 .newitem:active {
   background-color: crimson; /* even darker on click */
 }