body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', sans-serif;
    background: linear-gradient(
      to bottom,
      #ff6b6b 0%,      /* Warm sunrise red at top */
      #ffa726 15%,     /* Orange sunrise */
      #ffeb3b 30%,     /* Yellow sun glow */
      #81c784 50%,     /* Light green horizon */
      #4fc3f7 70%,     /* Light blue sky */
      #1976d2 85%,     /* Deep blue ocean */
      #0d47a1 100%     /* Dark blue ocean depths */
    );
    background-attachment: fixed; /* Keep background fixed during scroll */
    min-height: 100vh;
    padding: 0;
    display: block; /* Remove flex layout that might be causing issues */
    padding-top: 80px; /* Add padding for fixed navbar */
  }
  
  /* Responsive sun effect */
  body::before {
    content: '';
    position: fixed;
    top: 15%;
    right: 10%;
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, #ffeb3b 0%, #ffa726 50%, transparent 70%);
    border-radius: 50%;
    z-index: -1;
    box-shadow: 0 0 80px #ffeb3b;
  }
  
  /* Header responsive styling */
  header {
    width: 100%;
    text-align: center !important; /* Force center alignment */
    display: block;
    margin: 0 auto;
  }

  header h1 {
    font-size: 2.5rem;
    margin: 0 auto;
    padding: 0.5rem;
    text-align: center !important; /* Force center alignment */
    display: block;
    width: 100%;
  }

  /* Container responsive adjustments */
  .container {
    max-width: 100%;
    padding: 0 15px;
    margin: 0 auto;
    display: block; /* Ensure block layout */
    width: 100%;
  }
  
  /* Card responsive styling */
  .card {
    background: rgba(255, 255, 255, 0.95);  /* Slightly transparent for better background visibility */
    border-radius: 20px;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    border: 1px solid rgba(25, 118, 210, 0.3);
    backdrop-filter: blur(5px);
  }
  
  .card-header {
    background: linear-gradient(135deg, #9c27b0, #673ab7);
    color: white;
    padding: 0.75rem;
    border-radius: 15px 15px 0 0;
    margin: -1rem -1rem 1rem -1rem;
  }
  
  .card-header h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
  }
  
  .card-body {
    padding: 0;
  }
  
  /* Form elements responsive styling */
  input, select, textarea, .form-control {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #9c27b0;
    border-radius: 15px;
    margin-bottom: 0.75rem;
    font-size: 1rem;
    background: #ffffff;
    color: #000000;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
  }
  
  input:focus, select:focus, textarea:focus, .form-control:focus {
    outline: none;
    border-color: #673ab7;
    box-shadow: 0 0 10px rgba(156, 39, 176, 0.3);
  }
  
  /* Button responsive styling */
  .btn {
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 15px;
    font-weight: bold;
    color: white;
    cursor: pointer;
    font-size: 1rem;
    width: 100%;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
  }
  
  .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  }
  
  .btn-primary { background: linear-gradient(135deg, #2196f3, #1976d2); }
  .btn-success { background: linear-gradient(135deg, #4caf50, #388e3c); }
  .btn-warning { background: linear-gradient(135deg, #ff9800, #f57c00); }
  .btn-danger { background: linear-gradient(135deg, #f44336, #d32f2f); }
  .btn-info { background: linear-gradient(135deg, #00bcd4, #0097a7); }
  .btn-secondary { background: linear-gradient(135deg, #607d8b, #455a64); }
  
  /* Habit items styling */
  .habit {
    margin: 0.75rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(243, 229, 245, 0.9);
    padding: 0.75rem;
    border-radius: 15px;
    border: 1px solid #9c27b0;
    transition: all 0.3s ease;
  }
  
  .habit:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 10px rgba(156, 39, 176, 0.2);
  }
  
  .label {
    font-weight: bold;
    flex: 1;
    color: #000000;
    font-size: 0.95rem;
  }
  
  /* Action buttons for habits */
  .habit-actions {
    min-width: 40px;
  }
  
  .habit-actions .btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.8rem;
    margin-bottom: 0;
    transition: all 0.3s ease;
  }
  
  .habit-actions .btn:hover {
    transform: scale(1.1);
  }
  
  .habit-actions .btn.quick-complete-btn:hover {
    transform: scale(1.2);
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
  }
  
  /* Progress Bar for Habits */
  .habit-progress {
    width: 100%;
    height: 4px;
    background: rgba(156, 39, 176, 0.2);
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
  }

  .habit-progress-bar {
    height: 100%;
    background: linear-gradient(135deg, #4caf50, #388e3c);
    border-radius: 2px;
    transition: width 0.3s ease;
  }

  /* Notification Permission Request */
  .notification-permission-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #9c27b0, #673ab7);
    color: white;
    padding: 15px;
    text-align: center;
    z-index: 9999;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
  }

  .notification-permission-banner.show {
    transform: translateY(0);
  }

  .notification-permission-banner button {
    background: white;
    color: #9c27b0;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    margin: 0 5px;
    cursor: pointer;
    font-weight: 500;
  }

  .notification-permission-banner button:hover {
    transform: scale(1.05);
  }

  /* Form validation error styling */
  .text-danger {
    color: #d32f2f !important;
    font-weight: 500;
  }

  /* Enhanced Link Button Styling for Authentication Pages */
  .btn-link {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.1), rgba(103, 58, 183, 0.1));
    border: 2px solid rgba(156, 39, 176, 0.3);
    border-radius: 12px;
    color: #673ab7 !important;
    text-decoration: none !important;
    padding: 0.6rem 1.2rem;
    font-weight: 600;
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(156, 39, 176, 0.1);
    width: auto;
    margin: 0.25rem;
  }

  .btn-link:hover {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.2), rgba(103, 58, 183, 0.2));
    border-color: rgba(156, 39, 176, 0.6);
    color: #4a148c !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(156, 39, 176, 0.3);
  }

  .btn-link:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(156, 39, 176, 0.2);
  }

  /* Special styling for small link buttons (like "Forgot password?") */
  .btn-link.small {
    font-size: 0.875rem;
    padding: 0.4rem 0.8rem;
    background: rgba(156, 39, 176, 0.05);
    border: 1px solid rgba(156, 39, 176, 0.2);
    color: #7b1fa2 !important;
  }

  .btn-link.small:hover {
    background: rgba(156, 39, 176, 0.15);
    border-color: rgba(156, 39, 176, 0.4);
    color: #4a148c !important;
  }

  /* Authentication Card Specific Styling */
  .auth-card .btn-link {
    margin: 0.5rem 0;
    min-width: 140px;
  }

  /* Override Bootstrap's default link styling in cards */
  .card-body .btn-link {
    color: #673ab7 !important;
    border: 2px solid rgba(156, 39, 176, 0.3);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
  }

  .card-body .btn-link:hover {
    color: #4a148c !important;
    background: rgba(156, 39, 176, 0.1);
    backdrop-filter: blur(10px);
  }

  /* Specific styling for "Forgot Password" and "Sign Up" links */
  a[href*="password-reset"], a[href*="signup"] {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.08), rgba(103, 58, 183, 0.08));
    border: 1.5px solid rgba(156, 39, 176, 0.25);
    border-radius: 10px;
    color: #673ab7 !important;
    text-decoration: none !important;
    padding: 0.5rem 1rem;
    font-weight: 500;
    display: inline-block;
    transition: all 0.3s ease;
    margin: 0.25rem;
    box-shadow: 0 1px 5px rgba(156, 39, 176, 0.1);
  }

  a[href*="password-reset"]:hover, a[href*="signup"]:hover {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.15), rgba(103, 58, 183, 0.15));
    border-color: rgba(156, 39, 176, 0.5);
    color: #4a148c !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(156, 39, 176, 0.2);
  }

  /* Enhanced Alert Styling with Animation */
  .alert {
    border-radius: 15px;
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
  }

  .alert-success {
    background: linear-gradient(135deg, #4caf50, #388e3c);
    color: white;
  }

  .alert-danger {
    background: linear-gradient(135deg, #f44336, #d32f2f);
    color: white;
  }

  .alert-info {
    background: linear-gradient(135deg, #2196f3, #1976d2);
    color: white;
  }

  .alert-warning {
    background: linear-gradient(135deg, #ff9800, #f57c00);
    color: white;
  }

  /* Special styling for different notification types */
  .alert.habit-added {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    animation: slide-in-bounce 0.8s ease-out;
  }

  .alert.habit-edited {
    background: linear-gradient(135deg, #2196f3, #1565c0);
    animation: pulse-glow 0.6s ease-in-out;
  }

  .alert.habit-completed {
    background: linear-gradient(135deg, #ff6b6b, #e91e63);
    animation: celebration-bounce 0.8s ease-in-out;
    box-shadow: 0 0 20px rgba(255, 107, 107, 0.5);
  }

  .alert.habit-deleted {
    background: linear-gradient(135deg, #f44336, #c62828);
    animation: shake 0.5s ease-in-out;
  }

  /* Notification Animations */
  @keyframes slide-in-bounce {
    0% {
      transform: translateX(-100%);
      opacity: 0;
    }
    50% {
      transform: translateX(10px);
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }

  @keyframes celebration-bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-20px) scale(1.05);
    }
    60% {
      transform: translateY(-10px) scale(1.02);
    }
  }

  @keyframes pulse-glow {
    0%, 100% {
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    50% {
      box-shadow: 0 4px 20px rgba(33, 150, 243, 0.4);
    }
  }

  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
  }

  /* Confetti Animation */
  .confetti {
    position: fixed;
    width: 10px;
    height: 10px;
    background: #ff6b6b;
    animation: confetti-fall linear infinite;
    z-index: 9999;
  }

  @keyframes confetti-fall {
    0% {
      transform: translateY(-100vh) rotate(0deg);
      opacity: 1;
    }
    100% {
      transform: translateY(100vh) rotate(720deg);
      opacity: 0;
    }
  }

  /* Sparkle Animation */
  .sparkle {
    position: absolute;
    font-size: 1.2rem;
    animation: sparkle-float 2s ease-out forwards;
    pointer-events: none;
  }

  @keyframes sparkle-float {
    0% {
      transform: translateY(0) scale(0);
      opacity: 1;
    }
    50% {
      transform: translateY(-30px) scale(1.2);
      opacity: 1;
    }
    100% {
      transform: translateY(-60px) scale(0);
      opacity: 0;
    }
  }

  /* Celebration Body Effect */
  .celebrating {
    animation: celebration-pulse 1s ease-in-out;
  }

  @keyframes celebration-pulse {
    0%, 100% {
      filter: brightness(1);
    }
    50% {
      filter: brightness(1.1);
    }
  }

  /* Habit Completion Celebration */
  @keyframes completion-celebration {
    0% {
      transform: scale(1);
      background-color: rgba(243, 229, 245, 0.9);
    }
    25% {
      transform: scale(1.05);
      background-color: rgba(76, 175, 80, 0.3);
    }
    50% {
      transform: scale(1.1);
      background-color: rgba(255, 193, 7, 0.3);
    }
    75% {
      transform: scale(1.05);
      background-color: rgba(76, 175, 80, 0.3);
    }
    100% {
      transform: scale(1);
      background-color: rgba(76, 175, 80, 0.9);
    }
  }

  /* Toast Notifications */
  .toast-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    max-width: 350px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    z-index: 10000;
    transform: translateX(400px);
    transition: all 0.3s ease-in-out;
    border-left: 4px solid;
  }

  .toast-notification.show {
    transform: translateX(0);
  }

  .toast-notification.toast-success {
    border-left-color: #4caf50;
  }

  .toast-notification.toast-error {
    border-left-color: #f44336;
  }

  .toast-notification.toast-info {
    border-left-color: #2196f3;
  }

  .toast-notification.toast-warning {
    border-left-color: #ff9800;
  }

  .toast-content {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .toast-message {
    flex: 1;
    margin-right: 10px;
    font-weight: 500;
  }

  .toast-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #999;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .toast-close:hover {
    color: #333;
  }

  /* Mobile-first responsive breakpoints */
  
  /* Small devices (phones, 576px and up) */
  @media (max-width: 575.98px) {
    header h1 {
      font-size: 1.8rem;
      padding: 0.5rem 0.25rem;
    }
    
    body::before {
      width: 40px;
      height: 40px;
      top: 12%;
      right: 5%;
      box-shadow: 0 0 50px #ffeb3b;
    }
    
    .container {
      padding: 0 10px;
    }
    
    .card {
      padding: 0.75rem;
      border-radius: 15px;
    }
    
    .card-header {
      padding: 0.5rem;
      margin: -0.75rem -0.75rem 0.75rem -0.75rem;
    }
    
    .card-header h2 {
      font-size: 1rem;
    }
    
    input, select, textarea, .form-control {
      padding: 0.6rem;
      font-size: 0.9rem;
    }
    
    .btn {
      padding: 0.6rem;
      font-size: 0.9rem;
    }
    
    .dots span {
      width: 10px;
      height: 10px;
    }
  }
  
  /* Medium devices (tablets, 768px and up) */
  @media (min-width: 576px) and (max-width: 767.98px) {
    header h1 {
      font-size: 2.2rem;
    }
    
    body::before {
      width: 50px;
      height: 50px;
      box-shadow: 0 0 60px #ffeb3b;
    }
    
    .container {
      padding: 0 20px;
    }
  }
  
  /* Large devices (desktops, 992px and up) */
  @media (min-width: 768px) {
    header h1 {
      font-size: 3rem;
    }
    
    body::before {
      width: 80px;
      height: 80px;
      top: 15%;
      right: 15%;
      box-shadow: 0 0 100px #ffeb3b;
    }
    
    .container {
      max-width: 1200px;
    }
    
    .card {
      padding: 1.5rem;
    }
    
    .card-header {
      padding: 1rem;
      margin: -1.5rem -1.5rem 1rem -1.5rem;
    }
  }
  
  /* Extra large devices (large desktops, 1200px and up) */
  @media (min-width: 1200px) {
    .container {
      max-width: 1400px;
    }
    
    header h1 {
      font-size: 3.5rem;
    }
  }
  
  /* Landscape orientation adjustments */
  @media (orientation: landscape) and (max-height: 500px) {
    header {
      padding: 1rem 0;
    }
    
    header h1 {
      font-size: 1.5rem;
    }
    
    body::before {
      display: none; /* Hide sun on small landscape screens */
    }
  }
  
  /* High DPI displays */
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .card {
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }
    
    .btn:hover {
      box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    }
  }