/* frontend/css/main.css */
@import url("./variables.css");
@import url("./animations.css");

/* --- Basic Reset & Global Styles --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--font-base-size);
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-sans-serif);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-background); /* Solid base color */
  /* REMOVE or comment out: background-image: linear-gradient(...) and animation: backgroundPan ... */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden; /* Prevent horizontal scroll due to animations */
}

/* --- Typography --- */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: var(--spacing-md);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  color: var(--color-primary); /* Headings use the primary color */
}

h1 {
  font-size: 2.8rem;
} /* Larger and more impactful */
h2 {
  font-size: 2.2rem;
}
h3 {
  font-size: 1.85rem;
}
h4 {
  font-size: 1.35rem;
}

p {
  margin-bottom: var(--spacing-md);
  color: var(--color-text-muted);
}

a {
  color: var(--color-primary);
  text-decoration: none; /* Base links have no underline */
  transition: var(--transition-base);
  position: relative; /* For animated underline */
}
a:not(.btn):not(.header-nav-link):not(.feature-card):hover { /* Exclude buttons and other specially styled links */
  color: var(--color-primary-dark);
  /* text-decoration: underline; Removed in favor of animated underline */
}

/* Animated underline for general text links */
a:not(.btn):not(.header-nav-link):not(.feature-card)::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1.5px; /* Slightly thicker for visibility */
  bottom: -3px; /* Adjust vertical position */
  left: 0;
  background-color: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left; /* Animation from left to right */
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

a:not(.btn):not(.header-nav-link):not(.feature-card):hover::after {
  transform: scaleX(1);
}

/* Accessibility: Clear focus indication for keyboard users */
a:focus-visible {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 3px;
  border-radius: 3px; /* Optional: for rounded outline corners */
}
/* Remove outline for mouse focus if :focus-visible is supported and default outline is also removed */
a:focus:not(:focus-visible) {
  outline: none;
}


/* --- Layout Helpers --- */
.container {
  width: 100%;
  max-width: 1300px; /* Slightly wider container for more breathing room */
  margin-left: auto;
  margin-right: auto;
  padding: var(--spacing-lg); /* Consistent padding */
}

.section-divider {
  border: 0;
  height: 1px;
  background-color: var(--color-border);
  margin: var(--spacing-xl) 0;
  opacity: 0.7; /* Slightly softer */
}

/* --- Buttons --- */
.btn {
  display: inline-block;
  font-weight: var(--font-weight-medium);
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  background-color: rgba(255, 255, 255, 0.1); /* Subtle glass background */
  border: 1px solid rgba(255, 255, 255, 0.2); /* Light border for glass effect */
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: 1rem;
  border-radius: var(
    --border-radius
  ); /* Use new border-radius from variables */
  transition: var(--transition-base);
  text-decoration: none !important;
  position: relative; /* For ripple effect */
  overflow: hidden; /* For ripple effect */
  z-index: 1; /* For ripple effect */
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.05), 0 2px 4px rgba(0,0,0,0.1); /* Inner shadow + subtle outer */
}

.btn:hover {
  transform: translateY(-5px); /* More pronounced lift on hover */
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.05), 0 6px 20px rgba(0,0,0,0.15), 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.1); /* Enhanced lift and glow */
  background-color: rgba(255, 255, 255, 0.15); /* Slightly more opaque on hover */
}
.btn:active {
  transform: translateY(0px) scale(0.95); /* Deeper press on active */
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); /* Pressed-in shadow */
}
.btn:focus {
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.05), 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.35), 0 2px 4px rgba(0,0,0,0.1); /* Prominent focus ring and existing shadow */
}

.btn-primary {
  color: var(--color-text-on-primary);
  background-color: rgba(var(--color-primary-rgb), 0.8); /* Primary color with alpha */
  border: 1px solid transparent; /* Transparent border or very subtle primary border */
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.2), 0 4px 15px rgba(var(--color-primary-rgb), 0.3); /* Inner highlight and primary shadow */
}
.btn-primary:hover {
  color: var(--color-text-on-primary); /* Ensure text color remains */
  background-image: linear-gradient(
    90deg,
    rgba(var(--color-primary-rgb), 0.85),
    rgba(var(--color-primary-light-rgb), 0.8), /* Lighter shade for gradient */
    rgba(var(--color-primary-dark-rgb), 0.9), /* Darker shade for gradient */
    rgba(var(--color-primary-rgb), 0.85)
  );
  background-size: 200% 200%;
  animation: hoverGradientShift 3s ease-in-out infinite;
  border-color: transparent; /* Keep or ensure consistency */
  /* Keep existing translateY or adjust if needed */
  transform: translateY(-5px); /* Current value */
  /* The box-shadow from btn-glow will combine with this, or we can refine */
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), 0 8px 25px rgba(var(--color-primary-dark-rgb), 0.35); /* Keep existing hover shadow for depth */
}

.btn-secondary {
  color: var(--color-text-on-primary);
  background-color: rgba(var(--color-secondary-rgb), 0.8);
  border: 1px solid transparent;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.2), 0 4px 15px rgba(var(--color-secondary-rgb), 0.3);
}
.btn-secondary:hover {
  background-color: rgba(var(--color-secondary-dark-rgb), 0.85);
  border-color: transparent;
  color: var(--color-text-on-primary);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), 0 8px 25px rgba(var(--color-secondary-dark-rgb), 0.35);
}

.btn-danger {
  color: var(--color-text-on-primary);
  background-color: rgba(var(--color-danger-rgb), 0.8);
  border: 1px solid transparent;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.2), 0 4px 15px rgba(var(--color-danger-rgb), 0.3);
}
.btn-danger:hover {
  background-color: rgba(var(--color-danger-rgb), 0.7); /* Darken by reducing alpha */
  border-color: transparent;
  color: var(--color-text-on-primary);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), 0 8px 25px rgba(var(--color-danger-rgb), 0.35);
}

.btn-outline-light {
  color: var(--color-light);
  border: 1px solid var(--color-light); /* Keep existing border */
  background-color: transparent; /* Explicitly transparent */
  /* box-shadow is inherited from .btn, which is good for a base */
}
.btn-outline-light:hover {
  color: var(--color-primary-dark); /* Changed text color to dark on hover */
  background-color: rgba(var(--color-white-rgb), 0.15); /* Subtle white glass hover */
  border-color: var(--color-light); /* Keep border color */
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.05), 0 6px 20px rgba(0,0,0,0.15), 0 0 0 0.2rem rgba(var(--color-light-rgb), 0.3); /* Use light color for glow */
}

.btn-lg {
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: 1.25rem;
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-glow {
  /* animation: subtleGlow 2s infinite ease-in-out; */ /* Old animation */
  animation: breathingGlow 2.5s infinite ease-in-out; /* New animation, slightly longer duration */
  /* Default variables for breathingGlow animation */
  --btn-glow-inset-color: rgba(var(--color-primary-light-rgb), 0.2);
  --btn-glow-outer-color-1: rgba(var(--color-primary-light-rgb), 0.3);
  --btn-glow-outer-color-2: rgba(var(--color-primary-rgb), 0.2);
  --btn-glow-inset-color-hover: rgba(var(--color-primary-light-rgb), 0.4);
  --btn-glow-outer-color-1-hover: rgba(var(--color-primary-light-rgb), 0.5);
  --btn-glow-outer-color-2-hover: rgba(var(--color-primary-rgb), 0.4);
}

.login-button.login-button-pulse-active { /* Renamed from login-button-clicked */
  /* Important: Ensure this animation doesn't interfere with the :active state's transform if clicked multiple times quickly. */
  /* The 'forwards' fill mode will keep the 100% state until class is removed. */
  animation: loginButtonClickPulse 0.25s ease-out forwards; /* Short and crisp duration */
}

.login-button.login-button-morphing {
    width: 50px; /* Target width for the circle (adjust as needed) */
    height: 50px; /* Target height for the circle (match width) */
    border-radius: 50%; /* Make it a circle */
    padding: 0; /* Remove padding to help with sizing */
    text-indent: -999px; /* Hide text content effectively */
    overflow: hidden; /* Hide text that might overflow during shrink */
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out, border-radius 0.3s ease-in-out, padding 0.3s ease-in-out;
    /* Add a border for the loader - one segment colored, rest transparent */
    border-top-color: var(--color-white); /* Loader segment color */
    border-right-color: rgba(var(--color-white-rgb), 0.3); /* Transparent or lighter segments */
    border-bottom-color: rgba(var(--color-white-rgb), 0.3);
    border-left-color: rgba(var(--color-white-rgb), 0.3);
    border-style: solid;
    border-width: 4px; /* Adjust loader thickness */
    animation: spin 0.8s linear infinite; /* Reuse existing spin animation if suitable, or define new */
}

/* Hide the button's actual text content when morphing */
/* This is now handled by text-indent, but can be a fallback or for other elements inside */
.login-button.login-button-morphing > * {
    visibility: hidden;
    opacity: 0;
    /* Slightly smoother fade-out for text/icons inside the button during morph */
    transition: visibility 0s 0.2s, opacity 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

/* Button Ripple Effect */
.btn::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background-color: rgba(var(--color-white), 0.6); /* More visible ripple */
  width: 100px; /* Initial size of the ripple */
  height: 100px;
  margin-top: -50px; /* Center the ripple */
  margin-left: -50px;
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
  z-index: 2; /* Above button content but below spinner */
}

.btn.ripple-active::after {
  animation: buttonRipple 0.45s cubic-bezier(0.23, 1, 0.32, 1) forwards; /* Faster, more explosive ripple */
}

/* Spinner for loading buttons */
.btn-submit-animated,
.btn-load-animated {
  position: relative;
}
.btn-submit-animated.loading::after,
.btn-load-animated.loading::after {
  content: "";
  position: absolute;
  width: 1.2em;
  height: 1.2em;
  top: 50%;
  left: 50%;
  margin-top: -0.6em;
  margin-left: -0.6em;
  border: 2px solid rgba(var(--color-white), 0.4); /* Slightly thicker border */
  border-left-color: var(--color-white);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  z-index: 3; /* Above ripple */
}
.btn-submit-animated.loading > *,
.btn-load-animated.loading > * {
  visibility: hidden;
}

/* Button morphing style (dots instead of spinner) */
/* REMOVED button.login-button-morphing::before and button.login-button-morphing::before span rules */
/* REMOVED @keyframes bounce */


/* --- Cards --- */
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(
    --border-radius
  ); /* Use new border-radius from variables */
  box-shadow: var(--box-shadow); /* Use new stronger shadow by default */
  padding: var(--spacing-xl); /* More generous padding for all cards */
  margin-bottom: var(--spacing-lg);
  transition: transform 0.1s ease-out, box-shadow 0.3s ease-out; /* Adjusted for tilt */
  position: relative;
  overflow: hidden;
  will-change: transform, box-shadow; /* Optimize for animations */
  overflow: hidden; /* Needed for light reflection pseudo-element */
}
.card::before { /* Light reflection pseudo-element */
  content: '';
  position: absolute;
  top: 0;
  left: -80%; /* Start off-screen */
  width: 60%;
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-25deg);
  opacity: 0;
  transition: left 0.6s ease-in-out, opacity 0.6s ease-in-out;
  pointer-events: none;
  z-index: 1; /* Above background, below content */
}
.card:hover::before {
  left: 120%; /* Sweep across */
  opacity: 0.6; /* Make it visible - adjust opacity for desired subtlety */
}
.card:hover:not(.no-hover-effect) {
  transform: translateY(-10px) scale(1.05); /* Slightly more scale for hover, tilt will be additive */
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); /* Deeper shadow on hover */
}
.card-title {
  color: var(--color-primary-dark); /* Slightly darker for contrast */
  margin-top: 0;
  margin-bottom: var(--spacing-md);
  position: relative;
  padding-bottom: var(--spacing-xs);
}
.card-title::after {
  /* Decorative underline for titles */
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px; /* Slightly longer underline */
  height: 4px; /* Thicker underline */
  background-color: var(--color-primary-light);
  border-radius: 2px;
}

/* --- Forms --- */
.styled-form .form-group {
  margin-bottom: var(--spacing-lg);
  position: relative;
}

.styled-form label {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-dark); /* Darker label for better contrast */
}

/* New: Wrapper for input with icon */
.input-with-icon {
  position: relative;
  display: flex; /* Allow icon and input to sit side-by-side */
  align-items: center;
  border: 1px solid rgba(255, 255, 255, var(--glass-border-alpha)); /* Use glass border alpha */
  border-radius: var(--border-radius); /* Inherit from variables */
  background-color: rgba(
    255,
    255,
    255,
    0.15
  ); /* Slightly more present light, semi-transparent background */
  box-shadow: var(--box-shadow-sm); /* Subtle shadow for depth */
  backdrop-filter: blur(10px); /* Slightly more blur for inputs */
  -webkit-backdrop-filter: blur(10px); /* For Safari compatibility */
  transition: var(--transition-base);
  overflow: hidden; /* Ensure focus animation stays within bounds */
  /* position: relative; is already set */
}
.input-with-icon::before { /* Static glare for inputs */
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  border-radius: var(--border-radius); /* Match parent's border-radius */
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.01) 60%);
  pointer-events: none;
  z-index: 0; /* Behind actual input field and icon */
  opacity: 0.85; /* Adjust for desired subtlety */
}
.input-with-icon:focus-within {
  border-color: rgba(
    var(--color-primary-rgb),
    0.7
  ); /* Primary color on focus - slightly more opaque */
  box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.25), var(--glass-shadow); /* Glass lift effect on focus */
  background-color: rgba(
    255,
    255,
    255,
    0.2
  ); /* Slightly more opaque on focus */
}

.input-icon {
  width: 50px; /* Icon size as requested */
  height: 50px; /* Icon size as requested */
  margin-left: var(--spacing-xs); /* Space from left edge */
  margin-right: var(--spacing-xs); /* Space between icon and input */
  color: var(--color-primary); /* Primary color for icons */
  flex-shrink: 0; /* Prevent icon from shrinking */
  z-index: 1; /* Ensure icon is above input-focus-animation */
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease; /* Added transition */
}
.input-with-icon:focus-within .input-icon {
  transform: scale(1.1);
  opacity: 0.85;
}

.styled-form input[type="text"],
.styled-form input[type="password"],
.styled-form input[type="email"] {
  display: block;
  width: 100%; /* Take remaining width */
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-md)
    var(--spacing-xs); /* Adjust padding for icon */
  font-size: 1.1rem; /* Slightly larger text in inputs */
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-base);
  color: var(
    --color-dark
  ); /* Darker text for readability on light background */
  background-color: transparent; /* Make input itself transparent within wrapper */
  border: none; /* Remove default border, handled by parent .input-with-icon */
  outline: none; /* Remove default outline */
  border-radius: 0; /* No individual border-radius for input */
  transition: var(--transition-base);
}

.styled-form input[type="text"]:focus,
.styled-form input[type="password"]:focus,
.styled-form input[type="email"]:focus {
  color: var(--color-dark); /* Keep color on focus */
  background-color: transparent; /* Keep transparent */
  border-color: transparent; /* Keep transparent */
  outline: 0; /* Keep outline removed */
  box-shadow: none; /* Remove default focus shadow, handled by parent wrapper */
  animation: none; /* Remove glow animation, handled by parent wrapper */
}
.styled-form input[readonly] {
  background-color: rgba(
    var(--color-light),
    0.5
  ); /* Semi-transparent for glassy effect */
  opacity: 0.9;
  cursor: not-allowed;
}

.styled-form .input-focus-animation {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px; /* Thicker focus line */
  background: linear-gradient(
    90deg,
    var(--color-primary-light),
    var(--color-primary)
  ); /* Gradient focus line */
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
  z-index: 0; /* Ensure it's behind icon */
}
.styled-form input:focus + .input-focus-animation {
  transform: scaleX(1);
  animation: inputFocusLine 0.3s ease;
}

.styled-form .form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg); /* More space between form elements in a row */
}
.styled-form .form-row .form-group {
  flex: 1;
  min-width: calc(50% - (var(--spacing-lg) / 2));
}

.styled-form .form-actions {
  margin-top: var(--spacing-xl); /* More space above action buttons */
  display: flex;
  gap: var(--spacing-md);
  justify-content: flex-start;
}

/* --- Messages & Toasts --- */
.message-area,
.error-message {
  padding: var(--spacing-md);
  margin-top: var(--spacing-lg);
  border-radius: var(--border-radius);
  font-weight: var(--font-weight-medium);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  text-align: left;
}
.message-area.show,
.error-message.show {
  opacity: 1;
  transform: translateY(0);
}
.message-area.success,
.error-message.success {
  color: var(--color-success);
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
}
.message-area.error,
.error-message:not(.success) {
  color: var(--color-danger);
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
}
/* Error message shake animation */
.error-message.shake {
  animation: shake 0.5s ease-in-out;
}

  body.dark-mode .message-area.success {
    color: var(--color-success);
    background-color: rgba(var(--color-success-rgb), 0.2);
    border-color: rgba(var(--color-success-rgb), 0.4);
  }
  body.dark-mode .message-area.error {
    color: var(--color-danger);
    background-color: rgba(var(--color-danger-rgb), 0.2);
    border-color: rgba(var(--color-danger-rgb), 0.4);
  }
  body.dark-mode .message-area.info { /* General info messages */
    color: var(--color-primary-dark-theme);
    background-color: rgba(var(--color-primary-dark-theme-rgb), 0.15);
    border-color: rgba(var(--color-primary-dark-theme-rgb), 0.3);
  }
  body.dark-mode .message-area:not(.success):not(.error):not(.info) {
      color: var(--color-text-dark);
      background-color: rgba(var(--color-surface-dark-rgb), 0.5); /* Generic surface-like bg */
      border: 1px solid var(--color-border-dark);
  }

/* Toast Notifications */
#toast-container {
  position: fixed;
  top: var(--spacing-xl); /* Slightly lower from top */
  right: var(--spacing-xl); /* Slightly further from right */
  z-index: 2000; /* Higher than modals */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  pointer-events: none; /* Allows clicks to pass through */
}

.toast {
  background-color: rgba(var(--color-surface-rgb), 0.95); /* High opacity for readability */
  backdrop-filter: blur(5px); /* Minimal blur */
  -webkit-backdrop-filter: blur(5px); /* Minimal blur */
  border: 1px solid rgba(var(--color-black), 0.1); /* Softer border */
  box-shadow: var(--box-shadow-lg); /* Standard shadow for opaque look */
  color: var(--color-text); /* Ensure text is readable */
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--border-radius);
  opacity: 0;
  transform: translateY(-100%);
  animation: toastSlideIn 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
  max-width: 350px; /* Slightly wider toast */
  pointer-events: auto; /* Re-enable pointer events for the toast itself */
  will-change: transform, opacity; /* Optimize for animations */
  position: relative; /* For pseudo-element positioning */
  overflow: hidden; /* For light reflection */
}
.toast::before { /* Light reflection */
  content: '';
  position: absolute;
  top: 0; left: -80%; width: 70%; height: 100%; /* Adjusted width for smaller element */
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-25deg);
  opacity: 0;
  transition: left 0.6s ease-in-out, opacity 0.6s ease-in-out;
  pointer-events: none;
  z-index: 0;
}
.toast:hover::before {
  left: 120%;
  opacity: 0.7;
}
.toast.info {
  border-left: 6px solid var(--color-primary); /* Thicker border */
}
.toast.success {
  border-left: 6px solid var(--color-success);
}
.toast.error {
  border-left: 6px solid var(--color-danger);
}
.toast.hide {
  animation: toastSlideOut 0.4s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
}

/* --- Modals --- */
/* Base modal container, handles backdrop */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  background-color: rgba(
    var(--color-black),
    0.7
  ); /* Even darker overlay for strong focus */
  opacity: 0; /* Default hidden state */
  visibility: hidden; /* Default hidden state */
  transition: opacity 0.3s ease, visibility 0s linear 0.3s; /* Fade out, then hide visibility */
  will-change: opacity, visibility;
}

/* Modal active state (when opened by JS) */
.modal.modal-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease; /* Fade in, visibility immediate */
}

/* Modal closing backdrop animation */
.modal.modal-closing-backdrop {
  animation: fadeOut 0.3s ease forwards; /* Fade out backdrop */
  visibility: hidden;
  transition: visibility 0s linear 0.3s; /* Hide visibility after fade out */
}

/* Modal content box */
.modal-content {
  position: relative;
  z-index: 2;
  width: 95%; /* Wider modal on smaller screens */
  max-width: 600px; /* Larger max width for modals */
  display: flex;
  flex-direction: column;
  background-color: rgba(var(--color-surface-rgb), 0.9); /* High opacity for readability */
  backdrop-filter: blur(5px); /* Minimal blur for readability */
  -webkit-backdrop-filter: blur(5px); /* Minimal blur for readability */
  border: 1px solid rgba(var(--color-black), 0.1); /* Softer border for more opaque surface */
  box-shadow: var(--box-shadow-lg); /* Use a more standard shadow if almost opaque */
  border-radius: var(--border-radius);
  opacity: 0; /* Hidden by default */
  transform: translateY(50px) scale(0.9); /* Start position for bounce-in */
  will-change: transform, opacity;
  overflow: hidden; /* For light reflection */
  /* position: relative; is already set */
}
.modal-content::before { /* Light reflection */
  content: '';
  position: absolute;
  top: 0; left: -80%; width: 60%; height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-25deg);
  opacity: 0;
  transition: left 0.8s ease-in-out, opacity 0.8s ease-in-out; /* Slightly slower for larger surface */
  pointer-events: none;
  z-index: 0; /* Behind modal body content */
}
.modal-content:hover::before {
  left: 120%;
  opacity: 0.6;
}

/* Modal content open animation (triggered by JS) */
.modal-content.modal-open {
  animation: modalBounceIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; /* Use the bounce animation */
  opacity: 1; /* Ensure it's visible during animation */
}

/* Modal content closing animation (triggered by JS) */
.modal-content.modal-closing {
  animation: modalBounceOut 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards; /* New bounce out animation */
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}
.modal-header .card-title {
  margin-bottom: 0;
}

.modal-close-btn {
  background: transparent;
  border: none;
  font-size: 2rem; /* Larger close button */
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-text-muted);
  opacity: 0.7;
  cursor: pointer;
  padding: var(--spacing-sm);
  margin: calc(-1 * var(--spacing-sm));
  transition: var(--transition-base);
}
.modal-close-btn:hover {
  opacity: 1;
  color: var(--color-danger); /* Red on hover for clear action */
  transform: rotate(90deg) scale(1.1); /* More pronounced rotate and scale */
}
.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: var(--spacing-lg);
}
.modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--color-border);
  gap: var(--spacing-sm);
}

/* --- Application Header --- */
.app-header {
  background-color: rgba(var(--color-primary-rgb), var(--glass-background-alpha)); /* Primary color tint with glass alpha */
  backdrop-filter: blur(var(--glass-blur)); /* Standard glass blur */
  -webkit-backdrop-filter: blur(var(--glass-blur)); /* Standard glass blur for Safari */
  color: var(--color-text-on-primary);
  padding: var(--spacing-md) 0;
  box-shadow: var(--glass-shadow); /* Standard glass shadow */
  position: sticky; /* Make header sticky */
  top: 0;
  z-index: 10; /* Ensure header is above other content */
  border-bottom: 1px solid rgba(255, 255, 255, var(--glass-border-alpha)); /* Subtle bottom border */
  /* animation: slideDownFadeIn 0.5s ease-out; */ /* Animation might conflict with sticky, can be removed or adjusted */
  overflow: hidden; /* For light reflection pseudo-element */
  position: relative; /* Ensure pseudo-element is positioned relative to header */
}
.app-header .header-actions { /* Wrapper for theme switch and logout */
  display: flex;
  align-items: center;
  gap: var(--spacing-lg); /* Increased gap for more space */
}
.app-header::before { /* Light reflection */
  content: '';
  position: absolute;
  top: 0; left: -80%; width: 60%; height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-25deg);
  opacity: 0;
  transition: left 0.7s ease-in-out, opacity 0.7s ease-in-out;
  pointer-events: none;
  z-index: 0; /* Behind header content */
}
.app-header:hover::before {
  left: 120%;
  opacity: 0.5; /* Subtle on header */
}
.app-header .header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.app-header .app-title {
  color: var(--color-text-on-primary);
  font-size: 2.2rem; /* Larger title */
  margin-bottom: 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* Subtle text shadow */
}
.app-header .header-nav-links {
  display: flex;
  gap: var(--spacing-sm);
}
.app-header .header-nav-link {
  color: var(--color-light);
  opacity: 0.8;
  padding: var(--spacing-xs) var(--spacing-sm); /* Add some padding for better click area & hover bg */
  border-radius: var(--border-radius); /* Consistent rounding */
  text-shadow: 0 0 5px rgba(0,0,0,0.5); /* Improved readability */
  transition: var(--transition-base);
}
.app-header .header-nav-link:hover {
  opacity: 1;
  background-color: rgba(var(--color-white-rgb), 0.15); /* Subtle background on hover */
  color: var(--color-white);
  transform: translateY(-2px); /* Slight lift */
  box-shadow: var(--box-shadow-sm); /* Subtle shadow on hover */
}
.app-header .header-nav-link:focus {
  opacity: 1;
  background-color: rgba(var(--color-white-rgb), 0.2);
  color: var(--color-white);
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(var(--color-white-rgb), 0.3), var(--box-shadow-sm); /* Focus ring */
}

/* --- Page Specific Styles & Animated Containers --- */
.welcome-page,
.login-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  padding: var(--spacing-xl);
  position: relative; /* For background logos / scene */
  overflow: hidden; /* Ensure elements don't spill */
}

/* Login Page Specific Styling for Glassmorphism */
.login-page .form-container {
  /* Glassmorphism effect */
  background-color: rgba(
    255,
    255,
    255,
    var(--glass-background-alpha)
  ); /* Semi-transparent white */
  border: 1px solid rgba(255, 255, 255, var(--glass-border-alpha)); /* Semi-transparent border */
  backdrop-filter: blur(var(--glass-blur)); /* The magic blur effect */
  -webkit-backdrop-filter: blur(
    var(--glass-blur)
  ); /* For Safari compatibility */
  border-radius: var(--border-radius);
  box-shadow: var(--glass-shadow); /* Use variable for glass shadow */
  transition: var(--transition-base); /* Smooth transitions for hover/focus */
  will-change: transform, box-shadow; /* Optimize for tilt effect */

  padding: var(--spacing-xl);
  text-align: center;
  width: 100%;
  max-width: 480px; /* Adjust login card width to match image */
  z-index: 1;
  position: relative;
  overflow: hidden;
  display: flex; /* Ensure content stacks correctly */
  flex-direction: column;
  justify-content: center;
}

/* Styles for the new illustrative scene on index.html */
.welcome-page {
  background-image: none; /* Remove background gradient from body, scene handles it */
  background-color: var(--color-background); /* Keep a solid base color */
}
body.dark-mode .welcome-page {
  background-color: var(--color-background-dark);
}

.welcome-scene {
  position: fixed; /* Fix it relative to viewport */
  top: 0; left: 0; right: 0; bottom: 0; /* fill full screen */
  pointer-events: none; /* so it doesn’t interfere with clicks */
  z-index: 0; /* behind content */
  /* overflow: hidden; /* This was added, revert if it causes issues with original JS animation */
}

/* Removed .welcome-scene::before styles */

.scene-element {
  position: absolute;
  opacity: 0; /* Initially invisible */
  filter: blur(20px); /* Original blur */
  will-change: transform, opacity; /* Added opacity to will-change */
  z-index: 0;
  transition: opacity 0.5s ease-in-out; /* Smooth fade-in */
}

/* Different sizes & unique volumetric shapes - Original values */

.scene-element.element-1 {
  width: 250px;
  height: 250px;
  border-radius: 50%; /* Perfect circle / sphere */
  background: radial-gradient(circle at 30% 30%, #a3d5ff, #3a7bd5);
  box-shadow: 0 0 30px rgba(58, 123, 213, 0.5);
}

.scene-element.element-2 {
  width: 280px;
  height: 220px;
  border-radius: 40% 60% 60% 40% / 50% 50% 70% 70%; /* Slightly squished organic blob */
  background: radial-gradient(circle at 40% 40%, #02ddff, #6069f3);
  box-shadow: 0 0 30px rgba(2, 18, 243, 0.5);
}

.scene-element.element-3 {
  width: 230px;
  height: 270px;
  border-radius: 55% 45% 65% 35% / 60% 40% 60% 40%; /* Taller, elongated blob */
  background: radial-gradient(circle at 30% 30%, #b5ead7, #66cdaa);
  box-shadow: 0 0 30px rgba(102, 205, 170, 0.5);
}

.scene-element.element-4 {
  width: 260px;
  height: 240px;
  border-radius: 50% 30% 50% 30% / 40% 60% 40% 60%; /* Wobbly rounded blob */
  background: radial-gradient(circle at 25% 25%, #f53b3b, #ffad33);
  box-shadow: 0 0 30px rgba(255, 173, 51, 0.5);
}

.scene-element.element-5 {
  width: 270px;
  height: 260px;
  border-radius: 60% 40% 70% 30% / 60% 70% 40% 50%; /* Another asymmetric organic shape */
  background: radial-gradient(circle at 35% 35%, #d4a5ff, #7f5af0);
  box-shadow: 0 0 30px rgba(127, 90, 240, 0.5);
}


.welcome-page .welcome-content-card {
  /* Glassmorphism effect for the welcome card */
  background-color: rgba(255, 255, 255, 0.35); /* Was var(--glass-background-alpha) which is 0.3. Increased slightly. */
  border: 1px solid rgba(255, 255, 255, var(--glass-border-alpha)); /* Semi-transparent border */
  backdrop-filter: blur(var(--glass-blur)); /* The magic blur effect */
  -webkit-backdrop-filter: blur(
    var(--glass-blur)
  ); /* For Safari compatibility */
  border-radius: var(--border-radius);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), /* New inset shadow */
              var(--glass-shadow); /* Existing glass shadow */
  transition: var(--transition-base); /* Smooth transitions for hover/focus */
  will-change: transform, box-shadow; /* Optimize for tilt effect */

  padding: var(--spacing-xl);
  text-align: center;
  width: 100%;
  max-width: 550px; /* Consistent width for the card */
  z-index: 1; /* Ensure it's above the scene elements */
  position: relative;
  overflow: hidden;
  display: flex; /* Ensure content stacks correctly */
  flex-direction: column;
  justify-content: center;
}

/* REMOVED .welcome-page .welcome-content-card::after for shimmering border */

.welcome-page .welcome-content-card:hover {
  transform: translateY(-15px) scale(1.03); /* More pronounced lift and slight scale */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25), /* Deeper, softer shadow */
              var(--glass-shadow); /* Keep original glass shadow or enhance it */
}

/* Specific hover for welcome-content-card's ::before to enhance reflection */
.welcome-page .welcome-content-card:hover::before {
  left: 120%; /* Sweep across */
  opacity: 0.8; /* Was 0.6, make it pop more */
  transition: left 0.8s ease-in-out, opacity 0.8s ease-in-out; /* Slightly longer transition */
}


/* New style for glassy content cards on various pages */
.glassy-content-card {
    background-color: rgba(255, 255, 255, var(--glass-background-alpha)); /* Semi-transparent white */
    border: 1px solid rgba(255, 255, 255, var(--glass-border-alpha)); /* Semi-transparent border */
    backdrop-filter: blur(var(--glass-blur)); /* The magic blur effect */
    -webkit-backdrop-filter: blur(var(--glass-blur)); /* For Safari compatibility */
    border-radius: var(--border-radius); /* From variables.css */
    box-shadow: var(--glass-shadow); /* Use variable for glass shadow */
    padding: var(--spacing-xl); /* Consistent padding */
    position: relative; /* Needed for z-index and stacking context */
    z-index: 1; /* Ensure it's above the background scene elements */
    overflow: hidden; /* Recommended for backdrop-filter containers */
    margin-top: var(--spacing-xl); /* Add some top margin if needed below a fixed header */
    margin-bottom: var(--spacing-xl); /* Add some bottom margin */
}

/* Adjustments for cards within the glassy container */
.glassy-content-card .card {
    background-color: rgba(255, 255, 255, 0.1); /* Even more transparent than the main glass */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Fainter border */
    box-shadow: none; /* Remove individual card shadow if the main glassy card has one */
    /* Potentially adjust padding if the parent glassy-content-card already provides enough */
}

.glassy-content-card .card .card-title {
    color: var(--color-primary-dark); /* Ensure it's readable */
}
.glassy-content-card .card .card-title::after {
    background-color: var(--color-primary); /* Ensure underline is visible */
}

.glassy-content-card .card p,
.glassy-content-card .card .detail-label,
.glassy-content-card .card .detail-value,
.glassy-content-card .card label {
    color: var(--color-dark); /* Or a color that ensures good contrast */
}

.glassy-content-card .card a {
     color: var(--color-primary-dark);
}
.glassy-content-card .card a:hover {
     color: var(--color-primary);
}

/* New Utility Class for generic glass panes */
.glass-pane {
  background-color: rgba(255, 255, 255, var(--glass-background-alpha));
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(255, 255, 255, var(--glass-border-alpha));
  box-shadow: var(--glass-shadow);
  border-radius: var(--border-radius);
  padding: var(--spacing-xl); /* Default padding, can be overridden */
  position: relative;
  z-index: 1;
  overflow: hidden; /* Already has overflow:hidden, good for pseudo-element */
}
.glass-pane::before { /* Light reflection pseudo-element */
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 60%;
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-25deg);
  opacity: 0;
  transition: left 0.7s ease-in-out, opacity 0.7s ease-in-out;
  pointer-events: none;
  z-index: 1;
}
.glass-pane:hover::before {
  left: 120%;
  opacity: 0.7; /* Slightly more pronounced on generic glass panes */
}

.animated-container {
  animation: slideUpFadeIn 0.7s 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  opacity: 0;
}

/* Welcome Page Content */
.welcome-title {
  font-size: 3.5rem; /* Larger and more impactful */
  letter-spacing: -3px; /* Tighter letter spacing */
  margin-bottom: var(--spacing-md);
  color: var(--color-primary-dark); /* Deeper primary for title */
}
.welcome-title span {
  display: inline-block; /* Remains the same */
  opacity: 0; /* Initial state for animation */
  transform: translateY(30px) scale(0.8) rotateX(-20deg); /* Consistent initial transform */
  /* Define default CSS variables for elegantLetterReveal text shadows */
  --welcome-title-shadow-color-start: rgba(var(--color-primary-rgb), 0.1);
  --welcome-title-shadow-color-mid: rgba(var(--color-primary-rgb), 0.3);
  --welcome-title-shadow-color-end: rgba(var(--color-primary-rgb), 0.4);
  text-shadow: 0 0 2px var(--welcome-title-shadow-color-start); /* Initial text shadow */
  animation: elegantLetterReveal 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; /* New animation, adjusted duration and easing */
  animation-delay: calc(0.08s * var(--letter-index)); /* Slightly faster stagger, assuming --letter-index is still set by JS */
}
.welcome-message {
  font-size: 1.25rem; /* Larger text */
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-xl);
  line-height: 1.8;
}
body.dark-mode .welcome-page .welcome-content-card .welcome-message {
  color: var(--color-text-dark); /* Changed from potentially var(--color-text-muted-dark) */
}

/* Login Page Typography & Form Headers */
.form-container .form-header {
  margin-bottom: var(--spacing-lg);
}
.form-container .form-title {
  font-size: 2.4rem; /* Larger title */
  color: var(--color-primary-dark); /* Deeper primary for title */
}
.form-container .form-subtitle {
  font-size: 1.2rem; /* Slightly larger */
  color: var(--color-text-muted);
  margin-top: var(--spacing-xs);
}
body.dark-mode .login-page .form-container .form-subtitle {
  color: var(--color-text-dark); /* Changed from potentially var(--color-text-muted-dark) */
}

/* Background Logos for Login Page (instead of shapes) */
.login-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}

.bg-logo {
  position: absolute;
  width: 250px; /* Make logos large to fill space and be partially visible */
  height: auto;
  opacity: 0.5; /* Subtly visible by default */
  filter: blur(1px); /* Initial blur so visible parts are also soft */
  z-index: 0; /* Ensure they are behind the glassy form */
  transition: 
    opacity 0.6s ease,
    transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1), /* smoother "rise" */
    filter 0.6s ease;
  will-change: transform, opacity, filter;
}

.bg-logo.logo-top-left {
  top: -5%;
  left: 25%;
}

.bg-logo.logo-bottom-right {
  bottom: -5%;
  right: 25%;
}

/* Animation trigger for background logos based on form-wrapper hover */
.login-wrapper.hovered-by-button .bg-logo {
  opacity: 0.3;
  transform: scale(1.6) translateY(-8px) rotate(4deg);
  filter: blur(4px) brightness(1.1) saturate(1.2) hue-rotate(8deg);
}

.login-wrapper.hovered-by-button .logo-top-left {
  transform: scale(1.6) rotate(-6deg) translate(-10px, -10px);
}

.login-wrapper.hovered-by-button .logo-bottom-right {
  transform: scale(1.7) rotate(6deg) translate(12px, -8px);
}

/* Form field entrance for login page */
.login-page .styled-form .form-group {
  opacity: 0;
  transform: translateY(30px); /* Start further down */
  animation: slideUpFadeIn 0.6s ease forwards; /* Slightly slower and more pronounced */
  animation-delay: var(--form-field-delay); /* JS will set this */
}

/* --- Text Readability Enhancements --- */

/* General text within glassy content card */
.glassy-content-card > p,
.glassy-content-card > ul > li,
.glassy-content-card > ol > li {
    color: var(--color-dark); /* Ensure dark text for readability */
}

/* Text in admin-intro on admin.html */
.glassy-content-card .admin-intro p {
    color: var(--color-dark);
}

/* Placeholder text styling for input fields */
.styled-form input::placeholder {
    color: var(--color-text-muted);
    opacity: 0.8; /* Ensure it's visible but distinct from entered text */
}
.styled-form input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: var(--color-text-muted);
    opacity: 0.8;
}
.styled-form input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: var(--color-text-muted);
    opacity: 0.8;
}
.styled-form input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--color-text-muted);
    opacity: 0.8;
}
.styled-form input::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--color-text-muted);
    opacity: 0.8;
}

/* Dashboard & Admin Pages */
.dashboard-page,
.admin-page,
.admin-crud-page {
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start; /* Align content to top */
}
.dashboard-page .container,
.admin-page .container,
.admin-crud-page .container {
  max-width: 900px; /* Optimal width for content pages */
}

.welcome-banner {
  background: linear-gradient(
    135deg,
    var(--color-primary-light) 0%,
    var(--color-primary) 100%
  ); /* Deeper gradient */
  color: var(--color-white);
  padding: var(--spacing-xl) var(--spacing-xl);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--box-shadow); /* Stronger shadow */
  position: relative;
  overflow: hidden;
  animation: slideUpFadeIn 0.7s ease-out; /* Add entry animation */
  display: flex; /* For avatar and text alignment */
  align-items: center;
  gap: var(--spacing-md);
  text-align: left;
}

body.dark-mode .welcome-banner {
  background: linear-gradient(135deg, rgba(var(--color-primary-dark-rgb), 0.7) 0%, rgba(var(--color-primary-rgb), 0.5) 100%);
  box-shadow: var(--glass-shadow-dark);
}
body.dark-mode .welcome-banner::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--color-white-rgb), 0.05) 50%, /* Lighter shimmer for dark bg */
    transparent
  );
}
/* The ::before hover effect (left: 100%) is inherited and should be fine */

.welcome-banner:hover::before {
  left: 100%;
}

.welcome-banner h2 {
  color: var(--color-white);
  margin-top: 0;
  margin-bottom: var(--spacing-xs); /* Reduced margin for subtitle */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); /* Stronger text shadow */
  font-size: 2rem;
}
.welcome-banner p {
  color: rgba(var(--color-white), 0.9);
  font-size: 1.1rem;
}
.welcome-banner .highlight {
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
  text-decoration-color: rgba(var(--color-white), 0.6);
  text-decoration-thickness: 2px;
}

.user-details-card .detail-item {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px dashed var(--color-border); /* Dashed border for softer look */
  transition: var(--transition-base);
}
.user-details-card .detail-item:last-child {
  border-bottom: none;
}
.user-details-card .detail-item:hover {
  background-color: var(--color-background); /* Highlight on hover */
  transform: translateX(8px); /* More pronounced slide */
}
.user-details-card .detail-label {
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}
.user-details-card .detail-value {
  color: var(--color-text-muted);
}
.user-profile-avatar {
  /* New style for profile picture */
  width: 90px; /* Larger avatar */
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: var(--spacing-md);
  border: 4px solid var(--color-light); /* Thicker light border */
  box-shadow: var(--box-shadow-sm);
  transition: var(--transition-base);
  flex-shrink: 0; /* Prevent shrinking */
}
.user-profile-avatar:hover {
  transform: scale(1.1) rotate(7deg); /* More pronounced scale and rotate */
  box-shadow: var(--box-shadow);
}

.admin-section .admin-title {
  color: var(--color-primary-dark);
}
.admin-link-list {
  list-style: none;
  padding-left: 0;
}
.admin-link-list li {
  margin-bottom: var(--spacing-sm);
}
.admin-link-list .admin-nav-button {
  display: block;
}

/* Admin Page (admin.html) */
.admin-intro {
  margin-bottom: var(--spacing-xl);
  text-align: center;
}
.admin-intro h2 {
  font-size: 2.8rem; /* Larger heading */
  color: var(--color-primary);
}
.admin-intro p {
  font-size: 1.15rem;
}
.admin-features .section-title {
  text-align: center;
  margin-bottom: var(--spacing-lg);
  font-size: 2rem;
  color: var(--color-primary-dark);
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(320px, 1fr)
  ); /* Slightly wider min column */
  gap: var(--spacing-lg);
}
.feature-card {
  display: block;
  text-decoration: none;
  color: var(--color-text);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border);
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-lg);
  will-change: transform, box-shadow;
  /* Override generic 'a' transition. Only transition transform and box-shadow. Opacity of pseudo-elements is handled separately. */
  transition: transform 0.1s ease-out, box-shadow 0.3s ease-out;
}
.feature-card:hover {
  transform: scale(1.05); /* Basic hover, JS will add tilt */
  box-shadow: var(--box-shadow-lg);
}
.feature-card h4 {
  color: var(--color-primary); /* Use primary color for card titles */
  margin-bottom: var(--spacing-sm);
  font-size: 1.6rem;
}
.feature-card p {
  color: var(--color-text-muted);
  font-size: 1rem;
}

.feature-card:hover p {
    color: var(--color-dark); /* Change from var(--color-text-muted) to var(--color-dark) on hover */
    transition: color 0.3s ease; /* Optional: smooth color transition */
}

.btn-animated-border::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  margin: -6px; /* Thicker border animation */
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    var(--color-primary-light),
    var(--color-primary),
    var(--color-primary-dark),
    var(--color-primary-light)
  ); /* More colors in gradient */
  background-size: 300% 300%; /* Larger background for smoother animation */
  opacity: 0;
  transition: opacity 0.15s ease-out; /* Faster fade-out for the border glow */
  animation: animatedBorder 6s linear infinite paused; /* Slower animation for subtlety */
  will-change: background-position, opacity;
}
.btn-animated-border:hover::before {
  opacity: 1;
  animation-play-state: running;
}

/* Admin CRUD Pages */
.form-section,
.list-section {
  margin-bottom: var(--spacing-xl);
}
/* REMOVED .table-responsive and .styled-table rules */

.list-container {
  margin-top: var(--spacing-lg);
}
.styled-list {
  list-style: none;
  padding: 0;
}
.styled-list li {
  padding: var(--spacing-md); /* More padding for list items */
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-sm);
  background-color: var(--color-surface);
  transition: var(--transition-base);
  position: relative;
  overflow: hidden;
  will-change: transform, box-shadow;
}
.styled-list li:hover {
  border-color: var(--color-primary-light);
  box-shadow: var(--box-shadow); /* Stronger shadow on hover */
  transform: translateX(10px); /* More pronounced slide */
}
/* Staggered entry for list items */
.styled-list li.animated-item {
  opacity: 0;
  transform: translateY(20px); /* Uses enhanced itemSlideUpFadeIn */
  animation: itemSlideUpFadeIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: var(--item-index);
  will-change: transform, opacity;
}

/* Ensure admin-group.html user list items are also styled correctly */
body.dark-mode #admin-users-list li {
  background-color: var(--color-surface-dark);
  border-color: var(--color-border-dark);
  color: var(--color-text-dark);
}

body.dark-mode .admin-crud-page .user-list-section .styled-list li {
  background-color: var(--color-surface-dark);
  border-color: var(--color-border-dark);
  color: var(--color-text-dark); /* This should apply to direct text and be inherited by children */
}

/* --- Dark Mode Overrides --- */
body.dark-mode {
  background-color: var(--color-background-dark);
  color: var(--color-text-dark);
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: var(--color-primary-dark-theme); /* Uses light primary for headings in dark mode */
}

body.dark-mode p {
  color: var(--color-text-muted-dark);
}

body.dark-mode a {
  color: var(--color-primary-dark-theme);
}

body.dark-mode a:not(.btn):not(.header-nav-link):not(.feature-card):hover {
  color: var(--color-primary); /* Slightly darker hover for links in dark mode */
}

body.dark-mode a:not(.btn):not(.header-nav-link):not(.feature-card)::after {
  background-color: var(--color-primary-dark-theme);
}

/* Accessibility: Clear focus indication for keyboard users in dark mode */
body.dark-mode a:focus-visible {
  outline: 2px solid var(--color-primary-dark-theme); /* Use a light color for outline */
}

body.dark-mode .section-divider {
  background-color: var(--color-border-dark);
  opacity: 0.5;
}

/* Dark Mode Scene Elements (Welcome Page) */
/* Ensure .welcome-scene::before dark mode override is removed if it existed */

body.dark-mode .scene-element {
  opacity: 0.35; /* Adjusted dark mode opacity */
  filter: blur(25px); /* Adjusted dark mode blur */
}
/* Example of adjusting a specific element's gradient for dark mode if needed */
/* body.dark-mode .scene-element.element-1 {
  background: radial-gradient(circle at 30% 30%, #b3e5ff, #4a8bd5);
} */


/* Dark Mode Inputs */
body.dark-mode .input-with-icon {
  background-color: rgba(var(--glass-background-rgb-dark), 0.3); /* Darker glass for inputs */
  border-color: rgba(var(--color-white-rgb), var(--glass-border-alpha-dark));
  box-shadow: var(--box-shadow-sm); /* Keep subtle shadow, or use a very faint dark-mode glass shadow */
}
body.dark-mode .input-with-icon::before { /* Static glare */
  background: linear-gradient(135deg, rgba(var(--color-white-rgb),0.06) 0%, rgba(var(--color-white-rgb),0.005) 60%);
  opacity: 0.7;
}
body.dark-mode .input-with-icon:focus-within {
  border-color: rgba(var(--color-primary-dark-theme-rgb), 0.7);
  box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-dark-theme-rgb), 0.25), var(--glass-shadow-dark);
  background-color: rgba(var(--glass-background-rgb-dark), 0.4);
}
body.dark-mode .input-with-icon .input-icon {
  color: var(--color-primary-dark-theme);
}
body.dark-mode .styled-form input[type="text"],
body.dark-mode .styled-form input[type="password"],
body.dark-mode .styled-form input[type="email"] {
  color: var(--color-text-dark);
}
body.dark-mode .styled-form input::placeholder {
  color: var(--color-text-muted-dark);
  opacity: 0.7;
}
body.dark-mode .styled-form input::-webkit-input-placeholder {
  color: var(--color-text-muted-dark);
  opacity: 0.7;
}
body.dark-mode .styled-form input::-moz-placeholder {
  color: var(--color-text-muted-dark);
  opacity: 0.7;
}
body.dark-mode .styled-form input:-ms-input-placeholder {
  color: var(--color-text-muted-dark);
  opacity: 0.7;
}
body.dark-mode .styled-form input::-ms-input-placeholder {
  color: var(--color-text-muted-dark);
  opacity: 0.7;
}
body.dark-mode .styled-form label {
  color: var(--color-text-dark);
}

/* Dark Mode App Header */
body.dark-mode .app-header {
  background-color: rgba(var(--glass-background-rgb-dark), var(--glass-background-alpha-dark));
  border-bottom-color: rgba(var(--color-white-rgb), var(--glass-border-alpha-dark)); /* Match border style */
  box-shadow: var(--glass-shadow-dark);
}
body.dark-mode .app-header .app-title {
  color: var(--color-text-dark); /* Or a specific header title color for dark mode */
}
body.dark-mode .app-header .header-nav-link {
  color: var(--color-text-muted-dark);
  /* border-color for .btn-outline-light is handled by its specific dark mode override */
}
body.dark-mode .app-header .header-nav-link:hover {
  color: var(--color-text-dark);
  background-color: rgba(var(--color-white-rgb), 0.08);
}
body.dark-mode .app-header .header-nav-link:focus {
  background-color: rgba(var(--color-white-rgb), 0.1);
  box-shadow: 0 0 0 0.2rem rgba(var(--color-white-rgb), 0.2), var(--box-shadow-sm); /* Lighter focus ring */
}


/* Dark Mode Modals */
body.dark-mode .modal-content {
  background-color: var(--color-surface-dark) !important; /* Darkest page background, forced */
  opacity: 1 !important; /* Element fully opaque, forced */
  backdrop-filter: none !important; /* Remove blur, forced */
  -webkit-backdrop-filter: none !important; /* Remove blur, forced */
  border: 1px solid var(--color-border-dark) !important; /* Clear border, forced */
  color: var(--color-text-dark) !important; /* Force base text color */
  box-shadow: var(--glass-shadow-dark) !important;
  /* The ::before pseudo-element for light reflection is generally hidden or very subtle on opaque surfaces.
     If it was previously visible due to transparency, it might now be fully obscured by the opaque background.
     This is acceptable as the primary goal is opacity for readability.
     If a light reflection is still desired, it would need to be re-engineered to work on an opaque surface,
     e.g., by being a very light, semi-transparent border or overlay, not a background-blended effect.
     For this task, we assume the current body.dark-mode .modal-content::before is acceptable or not visible. */
}
/* Ensure ::before pseudo-element doesn't interfere with forced opacity */
body.dark-mode .modal-content::before {
  opacity: 0 !important; /* Hide reflection if it was still trying to show */
  pointer-events: none !important;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0) 100%);
}
body.dark-mode .modal-content:hover::before {
  opacity: 0.7;
}
body.dark-mode .modal-header,
body.dark-mode .modal-footer {
  border-color: var(--color-border-dark);
}

/* Dark Mode Toasts */
body.dark-mode .toast {
  background-color: rgba(var(--color-surface-dark-rgb), 0.95); /* High opacity */
  backdrop-filter: blur(5px); /* Minimal blur */
  -webkit-backdrop-filter: blur(5px);
  border-color: rgba(var(--color-white-rgb), 0.15); /* Softer border */
  box-shadow: var(--glass-shadow-dark); /* Keep glass shadow, it's lighter */
  color: var(--color-text-dark);
}
body.dark-mode .toast::before { /* Reflection on dark toast */
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0) 100%);
}
body.dark-mode .toast:hover::before {
  opacity: 0.8;
}
/* Ensure colored borders on toasts are still visible and contrast well */
body.dark-mode .toast.info { border-left-color: var(--color-primary-dark-theme); }
body.dark-mode .toast.success { border-left-color: var(--color-success); } /* Success green usually fine */
body.dark-mode .toast.error { border-left-color: var(--color-danger); } /* Danger red usually fine */


/* Dark Mode Buttons */
body.dark-mode .btn {
  background-color: rgba(var(--color-white-rgb), 0.05); /* Very subtle light on dark */
  border-color: rgba(var(--color-white-rgb), 0.1);
  color: var(--color-text-dark);
  box-shadow: inset 0 1px 1px rgba(var(--color-white-rgb),0.03), 0 2px 4px rgba(0,0,0,0.2);
}
body.dark-mode .btn:hover {
  background-color: rgba(var(--color-white-rgb), 0.08);
  border-color: rgba(var(--color-white-rgb), 0.15);
  box-shadow: inset 0 1px 1px rgba(var(--color-white-rgb),0.03), 0 6px 20px rgba(0,0,0,0.25), 0 0 0 0.2rem rgba(var(--color-primary-dark-theme-rgb), 0.1);
}
body.dark-mode .btn:active {
  background-color: rgba(var(--color-white-rgb), 0.03);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}
body.dark-mode .btn:focus {
  box-shadow: inset 0 1px 1px rgba(var(--color-white-rgb),0.03), 0 0 0 0.2rem rgba(var(--color-primary-dark-theme-rgb), 0.35), 0 2px 4px rgba(0,0,0,0.2);
}

body.dark-mode .btn-primary {
  background-color: rgba(var(--color-primary-light-rgb), 0.9); /* Use light primary, fairly opaque */
  color: #1E1E1E; /* Dark text for contrast on light primary button */
  border-color: transparent;
  box-shadow: inset 0 1px 1px rgba(var(--color-white-rgb),0.2), 0 4px 15px rgba(var(--color-primary-light-rgb), 0.25);
}
body.dark-mode .btn-primary:hover {
  background-image: linear-gradient(
    90deg,
    rgba(var(--color-primary-light-rgb), 0.9), /* Base dark mode hover is already light */
    rgba(var(--color-white-rgb), 0.2),      /* Subtle white shimmer */
    rgba(var(--color-primary-light-rgb), 0.8),
    rgba(var(--color-primary-light-rgb), 0.9)
  );
  background-size: 200% 200%; /* Ensure this is present */
  animation: hoverGradientShift 3s ease-in-out infinite; /* Ensure this is present */
  color: var(--color-background-dark); /* Ensure text color is appropriate for light button */
  box-shadow: inset 0 1px 1px rgba(var(--color-white-rgb),0.15), 0 8px 25px rgba(var(--color-primary-light-rgb), 0.3);
}

body.dark-mode .btn-secondary {
  background-color: rgba(var(--color-secondary-rgb), 0.3); /* Darker base for secondary */
  color: var(--color-text-dark);
  border-color: rgba(var(--color-white-rgb), 0.1);
  box-shadow: inset 0 1px 1px rgba(var(--color-white-rgb),0.05), 0 4px 15px rgba(0,0,0, 0.2);
}
body.dark-mode .btn-secondary:hover {
  background-color: rgba(var(--color-secondary-rgb), 0.4);
  border-color: rgba(var(--color-white-rgb), 0.15);
  box-shadow: inset 0 1px 1px rgba(var(--color-white-rgb),0.05), 0 8px 25px rgba(0,0,0, 0.25);
}

body.dark-mode .btn-danger {
  background-color: rgba(var(--color-danger-rgb), 0.7);
  color: var(--color-white);
  border-color: transparent;
  box-shadow: inset 0 1px 1px rgba(var(--color-white-rgb),0.15), 0 4px 15px rgba(var(--color-danger-rgb), 0.25);
}
body.dark-mode .btn-danger:hover {
  background-color: rgba(var(--color-danger-rgb), 0.8);
  box-shadow: inset 0 1px 1px rgba(var(--color-white-rgb),0.1), 0 8px 25px rgba(var(--color-danger-rgb), 0.3);
}

body.dark-mode .btn-outline-light {
  color: var(--color-text-muted-dark);
  border-color: var(--color-text-muted-dark);
  background-color: transparent;
}
body.dark-mode .btn-outline-light:hover {
  color: var(--color-text-dark);
  background-color: rgba(var(--color-white-rgb), 0.05);
  border-color: var(--color-text-dark);
  box-shadow: inset 0 1px 1px rgba(var(--color-white-rgb),0.03), 0 6px 20px rgba(0,0,0,0.2), 0 0 0 0.2rem rgba(var(--color-light-rgb), 0.1);
}

/* --- Theme Switch Toggle --- */
.theme-switch-wrapper {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

body.dark-mode .theme-switch-label {
  color: var(--color-text-dark); /* Light text for dark mode */
}

.theme-switch-label {
  color: var(--color-light); /* Assuming header text is light on dark app-header */
  font-size: 0.9rem;
  user-select: none;
}

/* Styles for standalone theme switch on index.html, login.html */
.top-right-theme-switch {
  position: fixed; /* Or absolute if container is suitable */
  top: var(--spacing-md, 16px);
  right: var(--spacing-md, 16px);
  z-index: 1001; /* Above other content like .welcome-scene */
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 8px);
  padding: var(--spacing-sm, 8px);
  background-color: rgba(var(--color-surface-rgb), 0.5); /* Subtle glass bg for the switch itself */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: var(--border-radius, 1rem);
  box-shadow: var(--box-shadow-sm);
}

.top-right-theme-switch .theme-switch-label {
  color: var(--color-text); /* Default text color */
}

body.dark-mode .top-right-theme-switch .theme-switch-label {
  color: var(--color-text-dark); /* Dark mode text color */
}

.theme-switch {
  position: relative;
  display: inline-block;
  width: 50px; /* Width of the toggle */
  height: 26px; /* Height of the toggle */
}

.theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(var(--color-white-rgb), 0.3); /* Slightly transparent white track */
  transition: .4s;
  border-radius: 26px; /* Rounded ends for the track */
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px; /* Size of the toggle knob */
  width: 20px;
  left: 3px; /* Padding from left */
  bottom: 3px; /* Padding from bottom */
  background-color: var(--color-white); /* Knob color */
  transition: .4s;
  border-radius: 50%; /* Circular knob */
  box-shadow: 0 0 3px rgba(0,0,0,0.2);
}

input:checked + .slider {
  background-color: var(--color-primary); /* Primary color when active */
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--color-primary-light), 0 0 0 2px rgba(var(--color-primary-rgb), 0.2);
}
input:focus-visible + .slider { /* More prominent focus for keyboard nav */
    outline: 2px solid var(--color-primary-light);
    outline-offset: 2px;
}


input:checked + .slider:before {
  transform: translateX(24px); /* How far the knob moves */
}

/* Dark Mode Cards & Glass Panes */
body.dark-mode .card,
body.dark-mode .glass-pane { /* .glass-pane might need its own specific overrides if different from .card */
  background-color: rgba(var(--glass-background-rgb-dark), var(--glass-background-alpha-dark));
  border-color: rgba(var(--color-white-rgb), var(--glass-border-alpha-dark));
  box-shadow: var(--glass-shadow-dark);
  color: var(--color-text-dark); /* Default text color for content within cards */
}

body.dark-mode .welcome-page .welcome-content-card {
  background-color: rgba(var(--glass-background-rgb-dark), 0.75); /* Increased alpha from 0.25 to 0.75 */
  /* border and box-shadow are inherited from body.dark-mode .card */
}

body.dark-mode .login-page .form-container {
  background-color: rgba(var(--glass-background-rgb-dark), 0.75); /* Increased alpha */
  border-color: rgba(var(--color-white-rgb), var(--glass-border-alpha-dark)); /* Ensure border color is appropriate for dark mode */
  box-shadow: var(--glass-shadow-dark); /* Ensure dark mode shadow is used */
}

/* Dark mode variables for elegantLetterReveal */
body.dark-mode .welcome-title span {
  --welcome-title-shadow-color-start: rgba(var(--color-primary-dark-theme-rgb), 0.15);
  --welcome-title-shadow-color-mid: rgba(var(--color-primary-dark-theme-rgb), 0.35);
  --welcome-title-shadow-color-end: rgba(var(--color-primary-dark-theme-rgb), 0.45);
}

/* Dark mode variables for breathingGlow */
body.dark-mode .btn-glow {
  --btn-glow-inset-color: rgba(var(--color-primary-dark-theme-rgb), 0.2);
  --btn-glow-outer-color-1: rgba(var(--color-primary-dark-theme-rgb), 0.3);
  --btn-glow-outer-color-2: rgba(var(--color-white-rgb), 0.15); /* Use white for some pop */
  --btn-glow-inset-color-hover: rgba(var(--color-primary-dark-theme-rgb), 0.4);
  --btn-glow-outer-color-1-hover: rgba(var(--color-primary-dark-theme-rgb), 0.5);
  --btn-glow-outer-color-2-hover: rgba(var(--color-white-rgb), 0.25);
}


body.dark-mode .card .card-title {
  color: var(--color-primary-dark-theme); /* Light primary for titles */
}
body.dark-mode .card .card-title::after {
  background-color: var(--color-primary-dark-theme);
}

body.dark-mode .card p,
body.dark-mode .card .detail-label,
body.dark-mode .card .detail-value,
body.dark-mode .card label,
body.dark-mode .glass-pane p, /* For text directly in a glass-pane */
body.dark-mode .glass-pane label {
  color: var(--color-text-dark);
}
body.dark-mode .card .detail-value { /* Muted values slightly less than main text */
    color: var(--color-text-muted-dark);
}


body.dark-mode .glassy-content-card .card { /* Nested card within a glassy container */
    background-color: rgba(var(--glass-background-rgb-dark), calc(var(--glass-background-alpha-dark) * 0.5)); /* Even more transparent */
    border-color: rgba(var(--color-white-rgb), calc(var(--glass-border-alpha-dark) * 0.7));
}

/* Light reflection on dark cards needs to be more prominent */
body.dark-mode .card::before,
body.dark-mode .glass-pane::before {
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0) 100%);
}
body.dark-mode .card:hover::before,
body.dark-mode .glass-pane:hover::before {
  opacity: 0.7; /* Ensure it's visible enough */
}

/* Ensure welcome banner text is readable in dark mode (it's not a card) */
body.dark-mode .welcome-banner h2,
body.dark-mode .welcome-banner p {
    color: var(--color-white); /* It has a dark gradient background, so white text is fine */
}
body.dark-mode .welcome-banner .highlight {
    text-decoration-color: rgba(var(--color-white-rgb), 0.7);
}

/* User details card specific hover in dark mode */
body.dark-mode .user-details-card .detail-item:hover {
  background-color: rgba(var(--color-white-rgb), 0.03); /* Very subtle light hover */
}

.user-item-info {
  /* Flex layout for user item details */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  flex-grow: 1;
}
.user-item-actions {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm); /* Adjust spacing */
}
@media (min-width: 768px) {
  /* Adjust for larger screens */
  .styled-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .user-item-actions {
    margin-top: 0;
  }
}

/* Skeleton Loader Styles */
.skeleton-loader {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border-radius: var(--border-radius);
  background-color: var(--color-surface);
  box-shadow: var(--box-shadow-sm);
  margin-bottom: var(--spacing-lg);
}
.skeleton-loader-line {
  height: 1.2rem; /* Slightly taller lines */
  background-color: var(--color-border);
  border-radius: var(--border-radius);
  animation: skeletonPulse 1.5s infinite ease-in-out;
}
.skeleton-loader-line.short {
  width: 50%; /* Adjusted width */
}
.skeleton-loader-line.medium {
  width: 75%; /* Adjusted width */
}
.skeleton-loader-line.long {
  width: 100%;
}

/* --- Accessibility --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn-glow {
    animation: none;
  }
  .btn-animated-border::before {
    animation: none;
  }
  .btn.ripple-active::after {
    animation: none !important;
    opacity: 0 !important;
  }
  .welcome-banner::before {
    transition: none !important;
  }
  .bg-logo {
    animation: none !important;
  } /* Reverted to .bg-logo */
  .login-page .styled-form .form-group {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .styled-list li.animated-item,
  .styled-table tr.animated-item {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .user-profile-avatar {
    transition: none !important;
  }
  .modal-close-btn {
    transition: none !important;
    transform: none !important;
  }

  /* Ensure modals appear instantly in reduced motion */
  .modal,
  .modal.modal-active,
  .modal.modal-closing-backdrop {
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
  }
  .modal-content,
  .modal-content.modal-open,
  .modal-content.modal-closing {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* Original styles from your file, adjusted or integrated */
/* Many of these have been replaced or integrated into the new, more systematic design.
   Keeping a few here for specific overrides or clarity if needed, but the structure
   above covers most elements. */

/* Explicitly ensure form input sizing is correct after general resets */
input[type="text"],
input[type="password"],
input[type="email"] {
  width: 100%; /* Ensure full width within its container */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* The #message div should now use the message-area styles */
/* These rules were removed as no element with id="message" was found. */

.form-wrapper {
  position: relative;
  display: flex; /* Changed to flex for better centering of form-container */
  justify-content: center;
  align-items: center;
  width: 100%; /* Ensure it takes full width for responsive design */
  max-width: 550px; /* Match the login card's max-width */
}

/* Media queries for responsiveness */
@media (max-width: 768px) {
  h1 {
    font-size: 2.2rem;
  }
  h2 {
    font-size: 1.8rem;
  }
  h3 {
    font-size: 1.5rem;
  }
  .welcome-title {
    font-size: 2.8rem;
    letter-spacing: -1px;
  }
  .welcome-message {
    font-size: 1rem;
  }
  .form-container .form-title {
    font-size: 2rem;
  }
  .form-container .form-subtitle {
    font-size: 1rem;
  }

  .btn-lg {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 1rem;
  }

  .card {
    padding: var(--spacing-lg);
  }

  .styled-form .form-row {
    flex-direction: column;
    gap: var(--spacing-md);
  }
  .styled-form .form-row .form-group {
    min-width: 100%; /* Full width on small screens */
  }

  .user-profile-avatar {
    width: 70px;
    height: 70px;
    margin-bottom: var(--spacing-sm);
  }

  .welcome-banner {
    flex-direction: column;
    text-align: center;
    padding: var(--spacing-lg);
  }

  .feature-grid {
    grid-template-columns: 1fr; /* Stack on small screens */
  }

  #toast-container {
    top: var(--spacing-md);
    right: var(--spacing-md);
    max-width: 90%;
  }

  .modal-content {
    width: 95%; /* Ensure modal is responsive */
  }

  .bg-logo.logo-top-left {
    top: 0%;
    left: 0%;
  }
  .bg-logo.logo-bottom-right {
    bottom: 0%;
    right: 0%;
  }

  /* Scene elements adjustments for mobile */
  .scene-element.element-1 {
    width: 40vw; /* Adjusted for mobile */
    height: 40vw;
    /* Positions can remain as % or be adjusted if needed */
  }
  .scene-element.element-2 {
    width: 35vw;
    height: 45vw;
  }
  .scene-element.element-3 {
    width: 45vw;
    height: 38vw;
  }
  .scene-element.element-4 {
    width: 38vw;
    height: 42vw;
  }
  .scene-element.element-5 {
    width: 42vw;
    height: 40vw;
  }
  /* Ensure blur is not too heavy on mobile, can reduce if performance issues */
  .scene-element {
    filter: blur(40px); /* Slightly reduced blur for mobile if needed */
  }
  .scene-element.element-2 { filter: blur(50px); }
  .scene-element.element-4 { filter: blur(60px); }

}

@media (max-width: 480px) {
  .app-header .app-title {
    font-size: 1.8rem;
  }
  .app-header .header-content {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  .app-header .header-nav-links {
    flex-direction: column;
    width: 100%;
    align-items: center;
  }
  .app-header .header-nav-link {
    width: 90%;
  }
}