:root {
      --brand: #7a6ad8;
      --brand-600: #6b5fca;
      --brand-700: #5d52b8;
      --brand-gradient: linear-gradient(135deg, #7a6ad8 0%, #6b5fca 50%, #5d52b8 100%);
      --brand-gradient-hover: linear-gradient(135deg, #8a7ce8 0%, #7b6fda 50%, #6d62c8 100%);
      --accent: #ff6b6b;
      --accent-gradient: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
      --text: #1b1f24;
      --text-light: #4b5563;
      --muted: #6b7280;
      --light-bg: #dee2ff69;
      --card-bg: #ffffff;
      --radius: 1.25rem;
      /* Standard radius */
      --radius-sm: 0.75rem;
      /* Slightly smaller radius */
      --radius-btn: 12px;
      /* Specific radius for certain buttons */
      --shadow: 0 10px 30px rgba(17, 24, 39, 0.1);
      --shadow-hover: 0 15px 40px rgba(17, 24, 39, 0.15);
      --header-height: 60px;
      --header-blur: 16px;
      --header-bg-light: rgba(255, 255, 255, 0.65);
      --header-bg-dark: rgba(10, 15, 30, 0.7);
      --header-border-light: rgba(0, 0, 0, 0.08);
      --header-border-dark: rgba(255, 255, 255, 0.1);
      --nav-link-hover-bg-light: rgba(122, 106, 216, 0.1);
      --nav-link-hover-bg-dark: rgba(122, 106, 216, 0.2);

      /* New gradient variables */
      --brand-primary: #7a6ad8;
      --brand-secondary: #6b5fca;

      /* Modern Background Gradients */
      --bg-gradient-light: radial-gradient(circle at 0% 0%, rgba(122, 106, 216, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(122, 106, 216, 0.05) 0%, transparent 50%),
        linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%);

      --bg-gradient-dark: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
    }

    html,
    body {
      font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
      scroll-behavior: smooth;
    }

    body {
      display: flex;
      /* ADDED: Makes the body a flex container */
      flex-direction: column;
      /* ADDED: Stacks children vertically */
      background: var(--bg-gradient-light);
      /* UPDATED: Modern Gradient */
      background-attachment: fixed;
      /* Ensures gradient stays while scrolling */
      min-height: 100vh;
      margin: 0;
      padding-top: 60px;
      color: var(--text);
    }

    [data-theme="dark"] body {
      background: var(--bg-gradient-dark);
      background-attachment: fixed;
    }

    /* Improved navbar with glassmorphism effect */
    .navbar {
      backdrop-filter: saturate(180%) blur(12px);
      background-color: rgba(255, 255, 255, 0.8);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
    }

    .navbar .navbar-brand {
      font-weight: 800;
      letter-spacing: .3px;
      color: var(--brand);
      transition: all 0.3s ease;
    }

    .navbar .navbar-brand:hover {
      transform: translateY(-1px);
    }

    .navbar .nav-link {
      position: relative;
      font-weight: 500;
      transition: all 0.3s ease;
      color: #6358c0;
    }

    .navbar .nav-link::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--brand-gradient);
      transition: width 0.3s ease;
    }

    .navbar .nav-link:hover::after {
      width: 100%;
    }




    /* STEP 3: Style the main navbar 'navbar-premium'
*/
    .navbar-premium {
      min-height: var(--header-height);
      background-color: var(--header-bg-light);
      backdrop-filter: saturate(180%) blur(var(--header-blur));
      -webkit-backdrop-filter: saturate(180%) blur(var(--header-blur));
      border-bottom: 1px solid var(--header-border-light);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
      transition: background-color 0.3s ease, border-color 0.3s ease;
    }

    /* STEP 4: Style the brand/logo
*/
    .navbar-premium .navbar-brand {
      font-weight: 800;
      letter-spacing: .3px;
      color: var(--brand);
      transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .navbar-premium .premium-brand-hover:hover {
      transform: scale(1.03);
      opacity: 0.9;
    }

    /* STEP 5: Style the nav links (PowerPoint-style)
*/
    .navbar-premium .nav-link {
      font-weight: 600;
      font-size: 0.9rem;
      /* Slightly smaller */
      text-transform: uppercase;
      /* Professional/clean look */
      letter-spacing: 0.5px;
      /* More spacing */
      color: var(--text-light);
      padding: 0.75rem 1rem !important;
      /* Uniform padding */
      border-radius: 99px;
      /* Pill shape */
      transition: all 0.3s ease;
      position: relative;
      /* Remove the old ::after underline */
    }

    .navbar-premium .nav-link::after {
      display: none;
    }

    /* Modern pill hover effect */
    .navbar-premium .nav-link:hover {
      background-color: var(--nav-link-hover-bg-light);
      color: var(--brand-600);
      transform: translateY(-2px);
    }

    /* Active link style */
    .navbar-premium .nav-link.active {
      background-color: var(--nav-link-hover-bg-light);
      color: var(--brand-600) !important;
      font-weight: 700;
    }

    /* STEP 6: Restyle the theme toggle button (Desktop)
*/
    .btn-icon-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      padding: 0;
      font-size: 1rem;
      border-radius: 50%;
      /* Perfect circle */
      background-color: var(--nav-link-hover-bg-light);
      color: var(--brand-600);
      border: none;
      transition: all 0.3s ease;
    }

    .btn-icon-toggle:hover {
      background-color: var(--brand);
      color: #fff;
      transform: scale(1.1) rotate(15deg);
    }

    /* STEP 7: Restyle the hamburger toggler
*/
    .navbar-premium .navbar-toggler {
      border: none;
      padding: 0;
    }

    .navbar-premium .navbar-toggler:focus {
      box-shadow: none;
    }

    .navbar-premium .hamburger-icon {
      width: 28px;
      height: 24px;
      position: relative;
      transition: .5s ease-in-out;
      cursor: pointer;
    }

    .navbar-premium .hamburger-icon span {
      display: block;
      position: absolute;
      height: 3px;
      /* Slightly thinner */
      width: 100%;
      background: var(--brand);
      border-radius: 3px;
      opacity: 1;
      left: 0;
      transform: rotate(0deg);
      transition: .25s ease-in-out;
    }

    .navbar-premium .hamburger-icon span:nth-child(1) {
      top: 0px;
    }

    .navbar-premium .hamburger-icon span:nth-child(2) {
      top: 10px;
    }

    .navbar-premium .hamburger-icon span:nth-child(3) {
      top: 20px;
    }

    .navbar-premium .navbar-toggler[aria-expanded="true"] .hamburger-icon span:nth-child(1) {
      top: 10px;
      transform: rotate(135deg);
    }

    .navbar-premium .navbar-toggler[aria-expanded="true"] .hamburger-icon span:nth-child(2) {
      opacity: 0;
      left: -60px;
    }

    .navbar-premium .navbar-toggler[aria-expanded="true"] .hamburger-icon span:nth-child(3) {
      top: 10px;
      transform: rotate(-135deg);
    }

    /* STEP 8: Responsive styles for mobile
*/
    @media (max-width: 991.98px) {
      .navbar-premium .navbar-collapse {
        /* Create a "card" for the mobile menu */
        margin-top: 1rem;
        border-radius: var(--radius-sm);
        background-color: var(--card-bg);
        padding: 1rem;
        box-shadow: var(--shadow);
        border: 1px solid var(--header-border-light);
      }

      .navbar-premium .nav-link {
        font-size: 1.1rem;
        text-transform: none;
        /* Revert uppercase for mobile */
        letter-spacing: 0;
        font-weight: 500;
        padding: 0.75rem 1rem !important;
      }

      .navbar-premium .nav-link:hover {
        transform: none;
        /* Disable hover transform on mobile */
      }

      .navbar-premium .nav-item-theme-toggle {
        /* Center the mobile theme toggle */
        padding-top: 0.5rem;
        margin-top: 0.5rem;
        border-top: 1px solid var(--header-border-light);
      }
    }

    /* STEP 9: Dark Mode styles for the new header
*/
    [data-theme="dark"] .navbar-premium {
      background-color: var(--header-bg-dark);
      border-bottom: 1px solid var(--header-border-dark);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }

    [data-theme="dark"] .navbar-premium .nav-link {
      color: var(--text-light);
    }

    [data-theme="dark"] .navbar-premium .nav-link:hover {
      background-color: var(--nav-link-hover-bg-dark);
      color: #fff;
    }

    [data-theme="dark"] .navbar-premium .nav-link.active {
      background-color: var(--nav-link-hover-bg-dark);
      color: #fff !important;
    }

    [data-theme="dark"] .btn-icon-toggle {
      background-color: var(--nav-link-hover-bg-dark);
      color: var(--text-light);
    }

    [data-theme="dark"] .btn-icon-toggle:hover {
      background-color: var(--brand);
      color: #fff;
    }

    [data-theme="dark"] .navbar-premium .hamburger-icon span {
      background: #fff;
      /* Make hamburger visible in dark mode */
    }

    @media (max-width: 991.98px) {
      [data-theme="dark"] .navbar-premium .navbar-collapse {
        background-color: #1a2030;
        /* Dark card for mobile menu */
        border-color: var(--header-border-dark);
      }

      [data-theme="dark"] .navbar-premium .nav-item-theme-toggle {
        border-top: 1px solid var(--header-border-dark);
      }
    }



    /* Improved buttons */
    .btn-brand {
      background: var(--brand-gradient);
      border: none;
      color: white;
      transition: all 0.3s ease;
      box-shadow: var(--shadow);
    }

    .btn-brand:hover {
      background: var(--brand-gradient-hover);
      transform: translateY(-2px);
      box-shadow: var(--shadow-hover);
      color: white;
    }

    .btn-soft {
      background: rgba(122, 106, 216, 0.1);
      color: var(--brand);
      transition: all 0.3s ease;
    }

    .btn-soft:hover {
      background: rgba(122, 106, 216, 0.2);
      transform: translateY(-1px);
    }

    .badge-brand {
      background: var(--brand-gradient);
      color: white;
    }

    .btn-primary-action {
      background: var(--brand-gradient);
      color: #fff;
      border: 0;
      box-shadow: 0 6px 18px rgba(122, 106, 216, 0.2);
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .btn-primary-action:hover {
      background: var(--brand-gradient-hover);
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 10px 25px rgba(122, 106, 216, 0.3);
    }

    .btn-secondary-action {
      background: #fff;
      color: var(--brand);
      border: 1px solid rgba(122, 106, 216, 0.15);
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .btn-secondary-action:hover {
      background: #f8f9ff;
      color: var(--brand);
      transform: translateY(-1px);
      box-shadow: 0 5px 15px rgba(122, 106, 216, 0.1);
    }

    .btn-danger-action {
      background: var(--accent-gradient);
      color: white;
      border: 0;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .btn-danger-action:hover {
      background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
      color: white;
      transform: translateY(-2px);
    }

    .btn-success-action {
      background: linear-gradient(135deg, #10ac84 0%, #0d916b 100%);
      color: white;
      border: 0;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .btn-success-action:hover {
      background: linear-gradient(135deg, #12c29a 0%, #0fa57c 100%);
      color: white;
      transform: translateY(-2px);
    }

    /* Improved hero section */
    .hero {
      padding: 5rem 0 4rem;
      position: relative;
      overflow: hidden;
    }

    .hero::before {
      content: '';
      position: absolute;
      top: -100px;
      right: -100px;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background: rgba(122, 106, 216, 0.1);
      z-index: -1;
    }

    .hero::after {
      content: '';
      position: absolute;
      bottom: -50px;
      left: -50px;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: rgba(255, 107, 107, 0.1);
      z-index: -1;
    }

    .hero h1 {
      font-weight: 800;
      line-height: 1.05;
      font-size: 3.5rem;
      margin-bottom: 1.5rem;
      background: linear-gradient(135deg, var(--brand) 0%, var(--text) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .hero .lead {
      color: var(--text-light);
      font-size: 1.1rem;
      margin-bottom: 2rem;
    }

    .mt-3 {
      margin-top: 1rem !important;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    /* Improved cards with glassmorphism effect */
    .card-modern {
      border: 0;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      backdrop-filter: blur(10px);
      background: rgba(255, 255, 255, 0.8);
      transition: all 0.3s ease;
      overflow: hidden;
      color: var(--text);
    }

    .card-modern:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-hover);
    }

    .card-modern .card-header {
      border: 0;
      border-top-left-radius: var(--radius);
      border-top-right-radius: var(--radius);
      background: linear-gradient(135deg, rgba(122, 106, 216, 0.2), rgba(122, 106, 216, 0.1));
      padding: 1.5rem 2rem;
    }

    .card-modern .card-header h4 {
      font-weight: 700;
      color: var(--text);
      text-align: center;
      /* Center header text */
    }

    .form-select,
    .form-control {
      border-radius: .85rem;
      border: 1px solid rgba(122, 106, 216, 0.2);
      padding: 0.75rem 1rem;
      transition: all 0.3s ease;
      color: var(--text);
      background-color: rgba(255, 255, 255, 0.9);
    }

    .form-select:focus,
    .form-control:focus {
      border-color: var(--brand);
      box-shadow: 0 0 0 0.25rem rgba(122, 106, 216, 0.25);
    }

    label {
      font-weight: 600;
      color: var(--text);
      margin-bottom: 1rem;
      margin-right: 1rem;

    }

    .subject-row {
      border: 1px dashed rgba(122, 106, 216, 0.3);
      border-radius: 1rem;
      padding: 1.5rem;
      background: rgba(255, 255, 255, 0.5);
      transition: all 0.3s ease;
    }

    .subject-row:hover {
      border-color: var(--brand);
      background: rgba(255, 255, 255, 0.8);
    }

    .result-display {
      font-size: 1.75rem;
      font-weight: 800;
      color: var(--brand);
      background: linear-gradient(135deg, var(--brand) 0%, var(--text) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* Improved loading animations */
    .loading-container {
      margin-top: 1.5rem;
      text-align: center;
      padding: 3rem 2rem;
      border-radius: var(--radius);
      background: linear-gradient(135deg, rgba(122, 106, 216, 0.1), rgba(122, 106, 216, 0.05));
      display: none;
      backdrop-filter: blur(10px);
    }

    .loading-stage {
      display: none;
    }

    .loading-animation {
      width: 80px;
      height: 80px;
      margin: 0 auto 1.5rem;
      position: relative;
    }

    .loading-connecting {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .loading-connecting .dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--brand);
      margin: 0 5px;
      animation: bounce 1.5s infinite ease-in-out;
    }

    .loading-connecting .dot:nth-child(2) {
      animation-delay: 0.2s;
    }

    .loading-connecting .dot:nth-child(3) {
      animation-delay: 0.4s;
    }

    .loading-complete .checkmark {
      width: 80px;
      height: 80px;
      margin: 0 auto;
      position: relative;
    }

    .loading-complete .checkmark:before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 40px;
      height: 20px;
      border: 6px solid var(--brand);
      border-top: none;
      border-right: none;
      transform: translate(-50%, -60%) rotate(-45deg);
      animation: checkmark 0.6s ease-in-out;
    }

    @keyframes bounce {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-15px);
      }
    }

    @keyframes checkmark {
      0% {
        opacity: 0;
        transform: translate(-50%, -60%) rotate(-45deg) scale(0);
      }

      50% {
        opacity: 1;
        transform: translate(-50%, -60%) rotate(-45deg) scale(1.2);
      }

      100% {
        opacity: 1;
        transform: translate(-50%, -60%) rotate(-45deg) scale(1);
      }
    }

    .loading-text {
      font-weight: 600;
      color: var(--brand);
      margin-bottom: 0.5rem;
      font-size: 1.1rem;
    }

    .loading-subtext {
      color: var(--muted);
      font-size: 0.9rem;
      max-width: 400px;
      margin: 0 auto;
    }

    .status-log {
      max-height: 300px;
      overflow-y: auto;
      background: rgba(248, 249, 250, 0.7);
      border-radius: 0.5rem;
      padding: 1rem;
      font-family: monospace;
      font-size: 0.875rem;
      margin-bottom: 1rem;
      backdrop-filter: blur(10px);
    }

    .status-line {
      margin-bottom: 0.5rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid rgba(233, 236, 239, 0.5);
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .status-line:hover {
      background: rgba(255, 255, 255, 0.5);
      border-radius: 0.25rem;
      padding-left: 0.5rem;
    }

    .status-line:last-child {
      margin-bottom: 0;
      border-bottom: none;
    }

    .status-success {
      color: #28a745;
    }

    .status-error {
      color: #dc3545;
    }

    status-warning {
      color: #fd7e14;
    }

    .status-info {
      color: var(--brand);
    }



    /* === NEW STYLES FOR ANIMATED HAMBURGER === */

    /* === NEW STYLES FOR ANIMATED HAMBURGER === */
    .navbar-toggler {
      border: none;
    }

    .navbar-toggler:focus {
      box-shadow: none;
    }

    .hamburger-icon {
      width: 26px;
      height: 22px;
      position: relative;
      transform: rotate(0deg);
      transition: .5s ease-in-out;
      cursor: pointer;
    }

    .hamburger-icon span {
      display: block;
      position: absolute;
      height: 3px;
      width: 100%;
      background: var(--brand);
      /* <-- UPDATED: Primary color */
      border-radius: 9px;
      opacity: 1;
      left: 0;
      transform: rotate(0deg);
      transition: .25s ease-in-out;
    }

    /* Removed redundant dark mode rule for hamburger span */
    .hamburger-icon span:nth-child(1) {
      top: 0px;
    }

    .hamburger-icon span:nth-child(2) {
      top: 9px;
    }

    .hamburger-icon span:nth-child(3) {
      top: 18px;
    }

    .navbar-toggler[aria-expanded="true"] .hamburger-icon span:nth-child(1) {
      top: 9px;
      transform: rotate(135deg);
    }

    .navbar-toggler[aria-expanded="true"] .hamburger-icon span:nth-child(2) {
      opacity: 0;
      left: -60px;
    }

    .navbar-toggler[aria-expanded="true"] .hamburger-icon span:nth-child(3) {
      top: 9px;
      transform: rotate(-135deg);
    }

    /* === NEW STYLES FOR THEME TOGGLE (MOBILE) === */
    .nav-item-theme-toggle #themeToggleBtn {
      display: none;
      /* Hide desktop button on mobile */
    }

    /* This is the new wrapper for the mobile toggle */
    .theme-switch-wrapper-mobile {
      position: relative;
      display: flex;
      align-items: center;
      width: 50px;
      /* Width of the track */
      height: 28px;
      /* Height of the track */
      padding: 0.5rem 0.5rem;
      /* Add padding to center it */
      box-sizing: content-box;
      /* Padding adds to size */
      margin-left: auto;
      /* Aligns toggle to the right */
      margin-right: 8px;
      /* Some spacing from the edge */
    }

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

    /* The track of the toggle */
    .theme-switch-label {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: var(--brand);
      /* <-- UPDATED: 'off' track is primary */
      transition: .4s;
      border-radius: 34px;
    }

    /* The slider knob */
    .theme-switch-label::after {
      position: absolute;
      content: "";
      height: 20px;
      width: 20px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      transition: .4s;
      border-radius: 50%;

      /* Icon inside the knob (moon) */
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      content: "\f186";
      /* fa-moon */
      font-size: 12px;
      color: var(--brand);
      /* <-- UPDATED: 'off' icon is primary */
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* --- Toggle ON (Checked) State --- */

    /* Track color when on */
    .theme-switch-input:checked+.theme-switch-label {
      background-color: #ccc;
      /* <-- UPDATED: 'on' track is grey */
    }

    /* Knob position when on */
    .theme-switch-input:checked+.theme-switch-label::after {
      transform: translateX(22px);

      /* Icon inside the knob (sun) */
      content: "\f185";
      /* fa-sun */
      color: #a7a7a7;
      /* <-- UPDATED: 'on' icon is grey */
    }

    /* On desktop, hide the mobile toggle and show the button */
    @media (min-width: 991.98px) {
      .theme-switch-wrapper-mobile.d-lg-none {
        display: none !important;
      }

      .nav-item-theme-toggle #themeToggleBtn {
        display: block !important;
      }
    }




    /* --- NEW: Premium Footer Styles --- */
    .premium-footer {
      /* Use light-bg to blend seamlessly with the page */
      background-color: var(--light-bg);
      border-top: 1px solid rgba(122, 106, 216, 0.2);
      padding-top: 4rem;
      color: var(--muted);
      margin-top: 3rem;
      /* Replaces inline style from old footer */
    }

    [data-theme="dark"] .premium-footer {
      /* Dark mode: use a transparent bg to blend with the body gradient */
      background-color: transparent;
    }

    .footer-logo {
      font-weight: 800;
      letter-spacing: .3px;
      font-size: 1.25rem;
      margin-bottom: 1rem;
      display: inline-block;
      text-decoration: none;
    }

    .footer-logo .badge {
      /* Re-style the badge from the navbar */
      background: var(--brand-gradient);
      color: white;
      font-size: 0.8rem;
      padding: 0.4em 0.6em;
      vertical-align: middle;
      margin-right: 0.5rem;
    }

    .footer-logo .gradient-text {
      vertical-align: middle;
    }

    .footer-description {
      font-size: 0.95rem;
      color: var(--muted);
      max-width: 350px;
      /* Constrains the text block */
    }

    .social-links {
      display: flex;
      gap: 1.25rem;
      margin-top: 1.5rem;
    }

    .social-links a {
      font-size: 1.25rem;
      color: var(--muted);
      transition: all 0.3s ease;
    }

    .social-links a:hover {
      color: var(--brand);
      transform: translateY(-2px);
    }

    .footer-heading {
      font-weight: 600;
      font-size: 1rem;
      /* Use --text for higher contrast in both light/dark modes */
      color: var(--text);
      margin-bottom: 1.5rem;
    }

    .footer-links {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .footer-links li {
      margin-bottom: 1rem;
    }

    .footer-links a {
      color: var(--muted);
      text-decoration: none;
      transition: all 0.3s ease;
      position: relative;
    }

    .footer-links a:hover {
      color: var(--brand);
      /* Shopify-style hover indent */
      padding-left: 8px;
    }

    /* Underline effect for footer links on hover */
    .footer-links a::after {
      content: '';
      position: absolute;
      width: 0;
      height: 1px;
      bottom: -3px;
      left: 0;
      background-color: var(--brand);
      transition: width 0.3s ease-out;
    }

    .footer-links a:hover::after {
      width: 100%;
    }

    .footer-bottom-bar {
      padding-top: 1.5rem;
      padding-bottom: 1.5rem;
      margin-top: 3rem;
      /* Separator line */
      border-top: 1px solid rgba(122, 106, 216, 0.2);
    }

    .footer-copyright {
      font-size: 0.9rem;
      color: var(--muted);
      text-align: center;
    }

    .footer-copyright p {
      margin-bottom: 0.5rem;
    }

    .footer-copyright a {
      font-weight: 500;
      color: var(--muted);
      text-decoration: underline;
      text-decoration-color: rgba(122, 106, 216, 0.5);
    }

    .footer-copyright a:hover {
      color: var(--brand);
      text-decoration-color: var(--brand);
    }

    .footer-disclaimer {
      font-size: 0.85rem;
      color: var(--muted);
      font-style: italic;
      padding-top: 2px;
    }

    /* Responsive handling for the columns */
    @media (max-width: 991.98px) {

      .premium-footer .col-lg-3,
      .premium-footer .col-lg-2 {
        margin-bottom: 2.5rem;
        /* Add space between stacked columns */
      }
    }

    @media (max-width: 767.98px) {

      .premium-footer .col-lg-4,
      .premium-footer .col-md-7,
      .premium-footer .col-md-5,
      .premium-footer .col-md-4,
      .premium-footer .col-md-3 {
        margin-bottom: 2.5rem;
        /* Add space between stacked columns */
      }

      .footer-copyright {
        text-align: center;
      }
    }

    /* Make copyright text smaller on mobile */
    @media (max-width: 575.98px) {
      .footer-copyright {
        font-size: 0.8rem;
      }

      .footer-heading {
        margin-bottom: 1rem;
      }

      .footer-links li {
        margin-bottom: 0.75rem;
      }

      .footer-bottom-bar {
        margin-top: 1rem;
      }
    }


    /* --- Server Status Indicator --- */
    .calculator-section-modern {
      position: relative;
      /* Required for absolute positioning of the child */
      padding-top: 4rem;
      /* Add padding to make space for the indicator */
    }

    .server-status-indicator {
      position: absolute;
      top: -1rem;
      right: 1.25rem;
      display: flex;
      flex-direction: row;
      align-items: flex-end;
      gap: 0.25rem;
      padding: 0.5rem 0.75rem;
      padding-left: 2rem;
      /* Make space for info icon */
      border-radius: 15rem;
      border: 1px solid #2343;
      backdrop-filter: blur(5px);
      font-size: 0.8rem;
      font-weight: 600;
      z-index: 10;
      background: #fff;
    }

    [data-theme="dark"] .server-status-indicator {
      background-color: rgba(26, 32, 48, 0.7);
      border: 1px solid #fff3;
    }

    .status-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      min-height: 12px;
    }

    .status-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

    .status-dot.online {
      background-color: #28a745;
      box-shadow: 0 0 8px #28a745;
      animation: pulse-green 1.5s infinite;
    }

    .status-dot.offline {
      background-color: #dc3545;
      box-shadow: 0 0 8px #dc3545;
      animation: pulse-red 1.5s infinite;
    }

    /* --- New Info Icon --- */
    .status-info-icon {
      position: absolute;
      top: 0.6rem;
      left: 0.75rem;
      /* Positioned on the left */
      cursor: pointer;
      color: var(--muted);
      font-size: 0.9rem;
    }

    .status-info-icon:hover {
      color: var(--brand);
    }

    /* --- Wrapper for content swapping --- */
    .status-content-wrapper {
      width: 35px;
      /* Fixed width to prevent jiggling */
      text-align: right;
      color: var(--text-light);
    }

    [data-theme="dark"] .status-content-wrapper {
      color: var(--muted);
    }

    /* --- New Infinity Loader (Line Animation) --- */
    .infinity-loader {
      width: 32px;
      height: 16px;
      position: relative;
      display: inline-block;
      margin-right: 7px;
    }

    /* Remove the old dot animation, add new line animation */
    .infinity-loader::before,
    .infinity-loader::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 16px;
      height: 2px;
      background: var(--brand);
      border-radius: 1px;
      transform-origin: center;
    }

    .infinity-loader::before {
      left: 0;
      animation: infinity-line-left 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    .infinity-loader::after {
      right: 0;
      animation: infinity-line-right 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    [data-theme="dark"] .infinity-loader::before,
    [data-theme="dark"] .infinity-loader::after {
      background: #9ca3af;
    }

    /* --- Logic for showing/hiding content --- */
    /* Hide loader and show text/dot when .status-loaded is added */
    .status-item.status-loaded .infinity-loader {
      display: none;
    }

    .status-item.status-loaded .status-label {
      display: inline;
      /* Show the text */
    }

    .status-item.status-loaded .status-dot {
      display: block;
      /* Show the dot */
    }

    /* ... keep existing keyframes and remove old infinity-loader-anim ... */

    /* NEW: Infinity Line Animation */
    @keyframes infinity-line-left {

      0%,
      100% {
        transform: translateX(0) rotate(0deg) scaleX(1);
      }

      25% {
        transform: translateX(4px) rotate(-45deg) scaleX(0.8);
      }

      50% {
        transform: translateX(8px) rotate(-90deg) scaleX(1);
      }

      75% {
        transform: translateX(4px) rotate(-135deg) scaleX(0.8);
      }
    }

    @keyframes infinity-line-right {

      0%,
      100% {
        transform: translateX(0) rotate(0deg) scaleX(1);
      }

      25% {
        transform: translateX(-4px) rotate(45deg) scaleX(0.8);
      }

      50% {
        transform: translateX(-8px) rotate(90deg) scaleX(1);
      }

      75% {
        transform: translateX(-4px) rotate(135deg) scaleX(0.8);
      }
    }

    @keyframes pulse-green {
      0% {
        box-shadow: 0 0 5px rgba(40, 167, 69, 0.7);
      }

      50% {
        box-shadow: 0 0 12px rgba(40, 167, 69, 1);
      }

      100% {
        box-shadow: 0 0 5px rgba(40, 167, 69, 0.7);
      }
    }

    @keyframes pulse-red {
      0% {
        box-shadow: 0 0 5px rgba(220, 53, 69, 0.7);
      }

      50% {
        box-shadow: 0 0 12px rgba(220, 53, 69, 1);
      }

      100% {
        box-shadow: 0 0 5px rgba(220, 53, 69, 0.7);
      }
    }


    /* Responsive adjustment */
    @media (max-width: 576px) {
      .calculator-section-modern {
        padding-top: 5rem;
        /* More space on mobile */
      }

      .server-status-indicator {
        top: -1.3rem;
        right: 0.75rem;
      }

      .lead {
        font-size: 1rem;
        font-weight: 300;
      }
    }

    .lead {
      font-size: 1.09rem;
      font-weight: 300;
    }


    /* --- New Info Icon --- */
    .status-info-icon {
      position: absolute;
      top: 0.5rem;
      left: 0.75rem;
      /* Positioned on the left */
      cursor: pointer;
      color: var(--muted);
      font-size: 0.9rem;
    }

    .status-info-icon:hover {
      color: var(--brand);
    }

    /* --- Wrapper for content swapping --- */
    .status-content-wrapper {
      width: 35px;
      /* Fixed width to prevent jiggling */
      text-align: right;
      color: var(--text-light);
    }

    [data-theme="dark"] .status-content-wrapper {
      color: var(--muted);
    }

    /* --- New Infinity Loader (replaces dot loader) --- */
    .infinity-loader {
      width: 28px;
      /* Slightly wider */
      height: 12px;
      position: relative;
      display: inline-block;
      margin-right: 7px;
      /* Aligns it similarly to the text */
    }

    .infinity-loader::before,
    .infinity-loader::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #6c757d;
      /* Loading color */
      animation: infinity-spin 1.8s infinite ease-in-out;
    }

    .infinity-loader::after {
      left: auto;
      right: 0;
      animation-delay: -0.9s;
    }

    @keyframes infinity-spin {

      0%,
      100% {
        transform: scale(0.8);
        opacity: 0.7;
      }

      50% {
        transform: scale(1);
        opacity: 1;
      }
    }

    /* --- Logic for showing/hiding content --- */

    /* --- ADD THESE DEFAULT RULES --- */
    .status-item .status-label {
      display: none;
    }

    .status-item .status-dot {
      display: none;
    }

    /* --- END OF ADDED RULES --- */

    /* Hide loader and show text/dot when .status-loaded is added */
    .status-item.status-loaded .infinity-loader {
      display: none;
    }

    .status-item.status-loaded .status-label {
      display: inline;
      /* Show the text */
    }

    .status-item.status-loaded .status-dot {
      display: block;
      /* Show the dot */
    }



    /* --- Popover Styling --- */
    /* Make popover match the site theme */
    .popover {
      border: 1px solid rgba(122, 106, 216, 0.2);
      border-radius: var(--radius-sm);
      box-shadow: var(--shadow);
      backdrop-filter: blur(10px);
      background: rgba(255, 255, 255, 0.9);
    }

    .popover-header {
      background: linear-gradient(135deg, rgba(122, 106, 216, 0.1), rgba(122, 106, 216, 0.05));
      font-weight: 600;
      color: var(--text);
      border-bottom: 1px solid rgba(122, 106, 216, 0.2);
    }

    .popover-body {
      font-size: 0.85rem;
      color: var(--text-light);
    }

    .popover-body p {
      margin-bottom: 0.5rem;
    }

    /* Dark mode for popover */
    [data-theme="dark"] .popover {
      background: rgba(26, 32, 48, 0.9);
    }

    [data-theme="dark"] .popover-header {
      background: linear-gradient(135deg, rgba(122, 106, 216, 0.3), rgba(122, 106, 216, 0.15));
      color: var(--text);
      border-bottom-color: rgba(45, 55, 72, 0.5);
    }

    [data-theme="dark"] .popover-body {
      color: var(--text-light);
    }


    a {
      color: var(--brand);
      text-decoration: none;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    a:hover {
      color: var(--brand-600);
    }

    /* Loading spinner styles */
    .loading {
      display: none;
      text-align: center;
      padding: 20px;
    }

    .loading p {
      margin-top: 10px;
    }

    /* Result container styles */
    .result-container {
      display: none;
    }

    /* Toast notifications */
    #toast-container {
      position: fixed;
      top: 65px;
      right: 10px;
      z-index: 9999;
      display: flex;
      flex-direction: column-reverse;
      gap: 10px;
    }

    .toast {
      background: white;
      border-radius: 12px;
      padding: 16px 20px;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
      display: flex;
      align-items: center;
      min-width: 300px;
      max-width: 400px;
      transform: translateX(100%);
      opacity: 0;
      transition: transform 0.3s ease, opacity 0.3s ease;
      position: relative;
      overflow: hidden;
      border-left: 4px solid var(--brand);
      backdrop-filter: blur(10px);
      background: rgba(255, 255, 255, 0.95);
    }

    .toast.show {
      transform: translateX(0);
      opacity: 1;
    }

    .toast-success {
      border-left-color: #10ac84;
    }

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

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

    .toast-info {
      border-left-color: #3498db;
    }

    .toast-content {
      display: flex;
      align-items: center;
      width: 100%;
    }

    .toast-icon {
      margin-right: 12px;
      font-size: 20px;
    }

    .toast-success .toast-icon {
      color: #10ac84;
    }

    .toast-error .toast-icon {
      color: #e74c3c;
    }

    .toast-warning .toast-icon {
      color: #f39c12;
    }

    .toast-info .toast-icon {
      color: #3498db;
    }

    .toast-message {
      flex: 1;
      font-weight: 500;
      font-size: 14px;
      color: #2d3748;
    }

    .toast-progress {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 3px;
      width: 100%;
      background: rgba(0, 0, 0, 0.1);
      transform: scaleX(1);
      transform-origin: left;
      animation: toastProgress 3s linear forwards;
    }

    .toast-success .toast-progress {
      background: linear-gradient(to right, #10ac84, #0d916b);
    }

    .toast-error .toast-progress {
      background: linear-gradient(to right, #e74c3c, #c0392b);
    }

    .toast-warning .toast-progress {
      background: linear-gradient(to right, #f39c12, #e67e22);
    }

    .toast-info .toast-progress {
      background: linear-gradient(to right, #3498db, #2980b9);
    }

    @keyframes toastProgress {
      from {
        transform: scaleX(1);
      }

      to {
        transform: scaleX(0);
      }
    }

    /* Positions the new icon relative to the card */
    .gpa-result-card {
      position: relative;
    }

    /* Styles the new copy icon */
    .copy-icon-btn {
      position: absolute;
      top: 1.25rem;
      right: 1.25rem;
      font-size: 1.2rem;
      color: #10ac84;
      /* Green color */
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .copy-icon-btn:hover {
      transform: scale(1.15);
    }

    /* GPA Result Display */
    .gpa-result-card {
      background: rgba(255, 255, 255, 0.8);
      border-radius: var(--radius);
      padding: 2rem;
      box-shadow: var(--shadow);
      margin-bottom: 2rem;
      margin-top: 2rem;
      width: 70%;
      margin-left: auto;
      margin-right: auto;
      backdrop-filter: blur(10px);
      transition: all 0.3s ease;
    }

    .gpa-result-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-hover);
    }

    .semester-card {
      background: rgba(255, 255, 255, 0.8);
      border-radius: var(--radius);
      padding: 2rem;
      box-shadow: var(--shadow);
      margin-bottom: 1.5rem;
      position: relative;
      backdrop-filter: blur(10px);
      transition: all 0.3s ease;
    }

    .semester-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-hover);
    }

    .delete-semester {
      position: absolute;
      top: 1rem;
      right: 1rem;
      cursor: pointer;
      color: #dc3545;
      font-size: 1.2rem;
      z-index: 10;
      transition: all 0.3s ease;
    }

    .delete-semester:hover {
      transform: scale(1.2);
    }

    .add-course-btn {
      position: absolute;
      top: 1rem;
      right: 3rem;
      cursor: pointer;
      color: var(--brand);
      font-size: 1.2rem;
      z-index: 10;
      transition: all 0.3s ease;
    }

    .add-course-btn:hover {
      transform: scale(1.2);
    }

    .course-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 1rem;
    }

    .course-table th,
    .course-table td {
      padding: 0.75rem;
      text-align: left;
      border-bottom: 1px solid rgba(229, 231, 235, 0.5);
    }

    .course-table th {
      font-weight: 600;
      color: var(--muted);
      background: rgba(122, 106, 216, 0.05);
    }

    .grade-badge {
      padding: 0.25rem 0.5rem;
      border-radius: 0.375rem;
      font-weight: 600;
      font-size: 0.75rem;
    }

    .grade-A {
      background-color: rgba(220, 252, 231, 0.7);
      color: #166534;
    }

    .grade-B {
      background-color: rgba(219, 234, 254, 0.7);
      color: #1e40af;
    }

    .grade-C {
      background-color: rgba(254, 243, 199, 0.7);
      color: #92400e;
    }

    .grade-D {
      background-color: rgba(254, 226, 226, 0.7);
      color: #991b1b;
    }

    .grade-F {
      background-color: rgba(243, 244, 246, 0.7);
      color: #374151;
    }

    .extra-enrolled {
      background-color: rgba(255, 193, 7, 0.2);
      color: #856404;
      padding: 1px 5px;
      border-radius: 4px;
      font-size: 0.65rem;
      font-weight: 600;
      vertical-align: super;
    }

    .course-details-modal .modal-content {
      border-radius: var(--radius);
      backdrop-filter: blur(10px);
      background: rgba(255, 255, 255, 0.95);
    }

    .course-details-modal .modal-header {
      background: linear-gradient(135deg, rgba(122, 106, 216, 0.2), rgba(122, 106, 216, 0.1));
      border-top-left-radius: var(--radius);
      border-top-right-radius: var(--radius);
    }

    .calculate-cgpa-btn {
      margin-top: 1rem;
      display: none;
    }

    /* Add Course Form */
    .add-course-form {
      background: rgba(248, 249, 250, 0.7);
      border-radius: 0.5rem;
      padding: 1.5rem;
      margin-top: 1rem;
      display: none;
      backdrop-filter: blur(10px);
    }

    .form-row {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      margin-bottom: 1rem;
    }

    .form-group {
      flex: 1;
      min-width: 200px;
    }

    /* Styling for the collapsible chart header */
    #gpaChartChevron {
      transition: transform 0.3s ease-in-out;
    }

    a[aria-expanded="true"] #gpaChartChevron {
      transform: rotate(180deg);
    }

    /* FIX: This rule targets the text and icon inside collapsible headers like "GPA Trend" and "Status Log" */
    [data-theme="dark"] .card-modern .card-header a[data-bs-toggle="collapse"] .text-body,
    [data-theme="dark"] .card-modern .card-header a[data-bs-toggle="collapse"] .text-body i {
      color: var(--text) !important;
    }


    /* NEW: Modern Calculator Section Styles */
    .calculator-section-modern {
      padding: 3rem 1rem;
      backdrop-filter: blur(10px);
    }


    .search-and-profiles-container {
      max-width: 600px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .modern-search-wrapper {
      position: relative;
      width: 100%;
    }

    /* --- UPDATE: Professional Search Input --- */
    .modern-search-input {
      border-radius: 50px !important;
      padding: 1rem 1.5rem;
      font-size: 1.1rem;
      box-shadow: var(--shadow);
      border: 2px solid transparent;
      /* Add padding to the right to make space for the button */
      padding-right: 170px !important;
    }

    .modern-search-input:focus {
      border-color: var(--brand);
      box-shadow: var(--shadow-hover);
    }

    /* --- UPDATE: Professional Search Button --- */
    .modern-search-button {
      position: absolute;
      top: 50%;
      right: 6px;
      /* Space from edge */
      transform: translateY(-50%);
      border-radius: 50px;
      /* Match input pill shape */
      font-size: 1.1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.75rem 1.25rem;
      /* Professional padding */
      transition: all 0.3s ease;
      height: calc(100% - 12px);
      /* Make button slightly smaller than input */
      line-height: 1;
      /* Ensure text/icon aligns well */
    }

    .modern-search-button:hover {
      transform: translateY(-50%) scale(1.02);
      /* Softer transform */
      box-shadow: var(--shadow-hover);
    }

    /* --- UPDATE: Mobile styles for Search Button/Input --- */
    @media (max-width: 767.98px) {
      .modern-search-input {
        padding-right: 70px !important;
        /* Space for just the icon button */
      }

      .modern-search-button {
        width: 48px;
        /* Back to circle on mobile */
        height: 48px;
        padding: 0;
        right: 8px;
        border-radius: 50%;
        /* Back to circle */
      }
    }


    .modern-profiles-wrapper {
      width: 100%;
    }

    .modern-profiles-select {
      border-top-left-radius: 0 !important;
      border-bottom-left-radius: 0 !important;
      text-overflow: ellipsis;
      /* Add ellipsis for very long text */
      padding-right: 2.5rem;
      /* Add padding to avoid overlap with arrow */
    }

    .modern-profiles-icon {
      border-top-left-radius: .85rem !important;
      border-bottom-left-radius: .85rem !important;
      background-color: rgba(122, 106, 216, 0.1);
      color: var(--brand);
    }

    .modern-delete-button {
      border-top-right-radius: .85rem !important;
      border-bottom-right-radius: .85rem !important;
    }

    /* ADD THIS CSS FOR THE ANNOUNCEMENT BAR */
    .announcement-bar {
      background: var(--brand-gradient);
      color: white;
      padding: 0.75rem 0;
      overflow: hidden;
      white-space: nowrap;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .announcement-track {
      display: inline-block;
      animation: scroll-left 30s linear infinite;
    }

    .announcement-text {
      display: inline-block;
      font-weight: 500;
      margin: 0 2.5rem;
      /* Spacing between tips */
      opacity: 0.9;
    }

    @keyframes scroll-left {
      0% {
        transform: translateX(0%);
      }

      100% {
        transform: translateX(-50%);
        /* This value should be -50% because the content is duplicated */
      }
    }

    @media (max-width: 576px) {
      .announcement-bar {
        padding: 0.25rem 0;
        font-size: 14px;
      }
    }

    /* Aligned Action Buttons */
    .action-buttons-aligned {
      display: flex;
      /* UPDATED: This moves the buttons to the sides */
      justify-content: space-between;
      align-items: center;
      margin-top: 1.5rem;
      margin-bottom: 1.5rem;
      flex-wrap: wrap;
      gap: 1rem;
    }

    /* --- UPDATE: Use var(--radius-btn) --- */
    .action-buttons-aligned .btn {
      border-radius: var(--radius-btn);
    }

    @media (max-width: 576px) {
      .action-buttons-aligned {
        /* UPDATED: This moves the buttons to the sides */
        justify-content: space-between;
      }

      .action-buttons-aligned .btn {
        /* UPDATED: Buttons will now be side-by-side */
        flex-grow: 1;
        /* Allow growth to fill space evenly */
        min-width: auto;
        /* Remove minimum width */
        font-size: 0.75rem;
        /* Make text smaller */
        padding: 0.5rem 0.6rem;
        /* Reduce padding further */
      }
    }

    /* Collapsible Status Log Icon */
    .status-log-chevron {
      transition: transform 0.3s ease-in-out;
    }

    a[aria-expanded="true"] .status-log-chevron {
      transform: rotate(180deg);
    }


    #openProfileManagerBtn {
      border-top-right-radius: .85rem !important;
      border-bottom-right-radius: .85rem !important;
    }

    /* ADD THIS CSS FOR THE PREMIUM CGPA DISPLAY */
    .gpa-result-card-premium {
      background: rgba(255, 255, 255, 0.8);
      border-radius: var(--radius);
      padding: 2rem;
      box-shadow: var(--shadow);
      margin-bottom: 2rem;
      margin-top: 2rem;
      backdrop-filter: blur(10px);
      transition: all 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    [data-theme="dark"] .gpa-result-card-premium {
      background: rgba(26, 32, 48, 0.8);
    }

    .gpa-result-card-premium:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-hover);
    }

    .student-info-header {
      text-align: center;
      margin-bottom: 2rem;
      border-bottom: 1px solid rgba(122, 106, 216, 0.2);
      padding-bottom: 1.5rem;
    }

    .student-info-header h2 {
      font-size: 1.5rem;
    }

    .cgpa-dashboard {
      display: flex;
      justify-content: center;
      margin-bottom: 2rem;
    }

    .cgpa-progress-circle {
      width: 180px;
      height: 180px;
      position: relative;
    }

    .cgpa-progress-circle svg {
      width: 100%;
      height: 100%;
      transform: rotate(-90deg);
    }

    .cgpa-progress-circle .circle-bg {
      fill: none;
      stroke: rgba(122, 106, 216, 0.15);
      stroke-width: 3.8;
    }

    [data-theme="dark"] .cgpa-progress-circle .circle-bg {
      stroke: rgba(122, 106, 216, 0.2);
    }

    .cgpa-progress-circle .circle {
      fill: none;
      stroke: var(--brand);
      stroke-width: 3.8;
      stroke-linecap: round;
      transition: stroke-dasharray 1s ease-in-out;
    }

    .cgpa-progress-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }

    .cgpa-progress-text .cgpa-value {
      font-size: 2rem;
      font-weight: 700;
      line-height: 1;
      color: var(--brand);
      background: var(--brand-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .cgpa-progress-text .cgpa-label {
      display: block;
      font-size: 1rem;
      font-weight: 500;
      color: var(--muted);
      margin-top: 0.25rem;
    }

    .secondary-stats {
      display: flex;
      justify-content: center;
      gap: 2rem;
      padding-top: 1.5rem;
      border-top: 1px solid rgba(122, 106, 216, 0.2);
    }

    .stat-item {
      text-align: center;
    }

    .stat-label {
      font-size: 0.9rem;
      font-weight: 500;
      color: var(--muted);
      display: block;
      margin-bottom: 0.5rem;
    }

    .stat-value {
      font-size: 1.75rem;
      font-weight: 600;
      color: var(--text);
    }

    [data-theme="dark"] .stat-value {
      color: #e5e7eb;
    }

    .stat-sub-value {
      font-size: 1rem;
      color: var(--muted);
    }

    .stat-divider {
      width: 1px;
      background: rgba(122, 106, 216, 0.2);
    }

    @media (max-width: 576px) {
      .gpa-result-card-premium {
        padding: 1.5rem;
      }

      .cgpa-progress-circle {
        width: 150px;
        height: 150px;
      }

      .cgpa-progress-text .cgpa-value {
        font-size: 1.70rem;
      }

      .secondary-stats {
        gap: 1rem;
      }

      .stat-value {
        font-size: 1.25rem;
      }
    }


    /* ----------- DARK MODE IMPROVED ----------- */
    [data-theme="dark"] {
      --text: #e5e7eb;
      --text-light: #d1d5db;
      --muted: #9ca3af;
    }

    /* NEW: Fix for various text-muted elements in dark mode */
    [data-theme="dark"] .text-muted {
      color: var(--muted) !important;
    }

    [data-theme="dark"] body {
      background: linear-gradient(180deg, #0b0e13 0%, #0f1320 70%);
      color: #f1f5f9;
    }

    [data-theme="dark"] .navbar {
      background-color: rgba(8, 48, 136, 0.35);
    }

    [data-theme="dark"] .navbar .nav-link {
      color: #d1d5db;
    }

    [data-theme="dark"] .navbar .nav-link:hover {
      color: #fff;
    }

    [data-theme="dark"] .card-modern {
      background: rgba(15, 29, 64, 0.8);
      color: #e5e7eb;
    }

    [data-theme="dark"] .card-modern .card-header {
      background: linear-gradient(135deg, rgba(122, 106, 216, 0.3), rgba(122, 106, 216, 0.15));
    }

    [data-theme="dark"] h1,
    [data-theme="dark"] h2,
    [data-theme="dark"] h3,
    [data-theme="dark"] h4,
    [data-theme="dark"] h5 {
      color: #ffffff;
    }

    [data-theme="dark"] .lead {
      color: #9ca3af;
    }

    /* --- UPDATE: Make subtitle visible in dark mode --- */
    [data-theme="dark"] .calculator-section-modern .text-muted {
      color: var(--text-light) !important;
    }

    [data-theme="dark"] .subject-row {
      background: rgba(26, 31, 46, 0.8);
      border-color: rgba(122, 106, 216, 0.3);
    }

    [data-theme="dark"] label {
      color: #e5e7eb;
    }

    [data-theme="dark"] .form-control,
    [data-theme="dark"] .form-select {
      background: rgba(11, 16, 32, 0.8);
      color: #f1f5f9;
      border-color: rgba(122, 106, 216, 0.3);
    }

    [data-theme="dark"] .form-control::placeholder {
      color: #9ca3af;
    }

    [data-theme="dark"] .form-text {
      color: var(--muted);
    }

    [data-theme="dark"] .input-group-text {
      background: rgba(31, 41, 55, 0.8);
      color: #e5e7eb;
    }

    [data-theme="dark"] a {
      color: rgb(158, 141, 240);
    }

    [data-theme="dark"] a:hover {
      color: #9f8df0;
    }

    [data-theme="dark"] .status-log {
      background: rgba(26, 32, 48, 0.8);
    }

    [data-theme="dark"] .status-line {
      border-bottom-color: rgba(45, 55, 72, 0.5);
    }

    [data-theme="dark"] .gpa-result-card {
      background: rgba(26, 32, 48, 0.8);
    }

    [data-theme="dark"] .semester-card {
      background: rgba(26, 32, 48, 0.8);
    }

    [data-theme="dark"] .course-table th,
    [data-theme="dark"] .course-table td {
      border-bottom-color: rgba(45, 55, 72, 0.5);
    }

    [data-theme="dark"] .course-table th {
      background: rgba(122, 106, 216, 0.1);
    }

    [data-theme="dark"] .add-course-form {
      background: rgba(26, 31, 46, 0.8);
    }

    [data-theme="dark"] .loading-container {
      background: linear-gradient(135deg, rgba(122, 106, 216, 0.15), rgba(122, 106, 216, 0.08));
    }

    [data-theme="dark"] .grade-A {
      background-color: rgba(21, 128, 61, 0.3);
      color: #86efac;
    }

    [data-theme="dark"] .grade-B {
      background-color: rgba(30, 64, 175, 0.3);
      color: #93c5fd;
    }

    [data-theme="dark"] .grade-C {
      background-color: rgba(146, 64, 14, 0.3);
      color: #fed7aa;
    }

    [data-theme="dark"] .grade-D {
      background-color: rgba(153, 27, 27, 0.3);
      color: #fecaca;
    }

    [data-theme="dark"] .grade-F {
      background-color: rgba(55, 65, 81, 0.3);
      color: #d1d5db;
    }

    /* Dark mode for modals */
    [data-theme="dark"] .modal-content {
      background: rgba(26, 32, 48, 0.95);
      color: #e5e7eb;
    }

    [data-theme="dark"] .modal-header {
      background: linear-gradient(135deg, rgba(122, 106, 216, 0.3), rgba(122, 106, 216, 0.15));
      border-bottom-color: rgba(45, 55, 72, 0.5);
    }

    [data-theme="dark"] .modal-header .btn-close {
      filter: invert(1);
    }

    [data-theme="dark"] .alert-info {
      background-color: rgba(23, 162, 184, 0.2);
      border-color: rgba(23, 162, 184, 0.3);
      color: #71d4f0;
    }

    [data-theme="dark"] .alert-warning {
      background-color: rgba(255, 193, 7, 0.2);
      border-color: rgba(255, 193, 7, 0.3);
      color: #ffd351;
    }

    /* Dark mode contrast improvements */
    [data-theme="dark"] .text-body-secondary {
      color: #d1d5db !important;
    }

    [data-theme="dark"] .btn-primary-action {
      color: #ffffff !important;
    }

    .cursor-dot {
      position: fixed;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--brand);
      pointer-events: none;
      transform: translate(-50%, -50%);
      opacity: .7;
      mix-blend-mode: multiply;
      z-index: 9999;
      transition: all 0.1s ease;
    }

    [data-theme="dark"] .cursor-dot {
      mix-blend-mode: screen;
    }

    /* Course action buttons */
    .course-actions i {
      cursor: pointer;
      font-size: 14px;
      padding: 4px;
      border-radius: 4px;
      transition: all 0.3s ease;
    }

    .delete-course {
      color: #dc3545;
    }

    .delete-course:hover {
      background-color: rgba(220, 53, 69, 0.1);
      transform: scale(1.2);
    }

    .restore-course {
      color: #10ac84;
    }

    .restore-course:hover {
      background-color: rgba(16, 172, 132, 0.1);
      transform: scale(1.2);
    }

    /* Clickable info icon */
    .clickable-info {
      cursor: pointer;
      color: var(--brand);
      transition: all 0.3s ease;
    }

    .clickable-info:hover {
      opacity: 0.8;
      transform: scale(1.1);
    }


    /* Restore the original horizontal margin for the icon */
    .course-code-container .fa-info-circle {
      margin-left: 0.3rem !important;
    }

    /* --- Mobile responsive adjustments --- */
    @media (max-width: 575.98px) {
      .hero {
        padding: 1.5rem 0;
      }

      .hero h1 {
        font-size: 1.75rem !important;
      }

      .hero p.lead {
        font-size: 1rem;
      }

      /* Global button reduction for mobile */
      .btn {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
      }

      .btn-lg {
        font-size: 1rem;
        padding: 0.5rem 1rem;
      }

      /* Reduce card padding */
      .card-modern,
      .card-modern .card-body {
        padding: 1rem !important;
      }

      .gpa-result-card-premium {
        padding: 1.25rem;
      }

      /* Adjust headings */
      h2 {
        font-size: 1.4rem;
      }

      h3 {
        font-size: 1.25rem;
      }

      h4 {
        font-size: 1.1rem;
      }

      /* Ensure buttons don't overflow */
      .d-flex.gap-2 .btn {
        width: 100%;
        margin-bottom: 0.5rem;
      }

      .toast {
        min-width: 250px;
        max-width: 300px;
        padding: 12px 16px;
      }

      .toast-message {
        font-size: 0.75rem;
      }

      .card-modern .card-header {
        padding: 0.75rem 1rem;
      }

      #themeToggle {
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
      }
    }

    /* Ensure subject columns are 2-up on very small screens: change from col-12 col-md-6 -> col-6 col-md-6 */
    @media (max-width: 420px) {
      .subject-row .col-6 {
        padding-right: .4rem;
        padding-left: .4rem;
      }
    }

    /* UPDATED: Narrow calculator container on desktop */
    @media (min-width: 992px) {
      #Auto-Calculator .col-md-10 {
        width: 100%;
      }
    }

    @media (min-width: 992px) {
      .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: var(--bs-navbar-nav-link-padding-x);
        margin-right: 20px;
      }
    }

    @media (min-width: 992px) {
      .offset-lg-1 {
        margin-left: 5%;
      }
    }

    @media (min-width: 768px) {
      .col-md-10 {
        flex: 0 0 auto;
        width: 100%;
      }
    }

    @media (min-width: 768px) {
      #how-it-works .col-md-4 {
        flex: 0 0 auto;
        width: 50%;
      }
    }


    @media (min-width: 768px) {
      .col-md-7 {
        flex: 0 0 auto;
        width: 20%;
      }
    }

    /* --- Mobile responsive table --- */
    @media screen and (max-width: 768px) {
      body {
        font-size: 0.9rem;
      }

      .gpa-result-card {
        width: 95%;
        padding: 1.25rem;
      }

      .course-code-container .fa-info-circle {
        display: none;
      }

      .semester-card {
        padding: 1.25rem;
        max-width: 560px;
      }

      .semester-card h5 {
        font-size: 0.9rem;
      }

      .semester-card .text-end .small {
        font-size: 0.65rem;
      }

      .custom-course-btn {
        padding: 4px 8px;
        font-size: 0.7rem;
        margin-top: 5px;
      }

      .course-table {
        font-size: 0.65rem;
      }

      /* Reduce padding to decrease gaps between columns */
      .course-table th,
      .course-table td {
        padding: 0.75rem 0.4rem;
        /* Reduced horizontal padding */
      }

      .course-table td:first-child {
        font-size: 0.7rem;
        font-weight: 500;
      }

      /* Make grade text smaller */
      .grade-badge {
        font-size: 0.6rem;
        padding: 0.2rem 0.35rem;
      }

      .btn {
        padding: 0.6rem 0.9rem;
        font-size: 0.9rem;
      }

      .loading-animation {
        width: 50px;
        height: 50px;
      }

      .loading-text {
        font-size: 0.9rem;
      }

      .loading-subtext {
        font-size: 0.75rem;
      }

      .cgpa-main-info h2 {
        font-size: 1.2rem;
        /* Smaller heading */
      }

      .cgpa-metric-value {
        font-size: 1.2rem;
        /* Smaller value text */
      }

      .action-buttons .btn {
        font-size: 0.75rem;
        padding: 0.5rem 0.5rem;
      }

      /* Table alignment rules */
      .course-table th:nth-child(n+3),
      .course-table td:nth-child(n+3) {
        text-align: center;
      }

      .course-table th:nth-child(1),
      .course-table td:nth-child(1),
      .course-table th:nth-child(2),
      .course-table td:nth-child(2) {
        text-align: left;
      }
    }

    /* Center buttons only in specific sections */
    .scraping-section .center-buttons,
    .log-section .center-buttons {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    @media (max-width: 576px) {

      .scraping-section .center-buttons,
      .log-section .center-buttons {
        flex-direction: column;
        align-items: center;
      }

      .scraping-section .center-buttons .btn,
      .log-section .center-buttons .btn {
        width: auto;
        min-width: 120px;
        /* Reduced from 180px */
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
      }
    }

    /* New layout improvements */
    .results-section {
      margin-top: 2rem;
    }

    .student-info-section {
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;
      margin-bottom: 2rem;
    }

    .student-details {
      flex: 1;
      min-width: 300px;
    }

    .cgpa-display {
      flex: 0 0 auto;
      text-align: right;
      min-width: 200px;
    }

    .action-buttons {
      display: flex;
      gap: 1rem;
      margin-top: 1.5rem;
      margin-bottom: 1.5rem;
      flex-wrap: wrap;
      justify-content: center;
    }

    @media (max-width: 768px) {
      .student-info-section {
        flex-direction: column;
        gap: 1rem;
      }

      .cgpa-display {
        text-align: left;
        margin-top: 1rem;
      }

      .action-buttons {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        align-items: center;
      }

      .action-buttons .btn {
        flex-grow: 1;
        margin: 0 0.25rem;
        min-width: auto;
      }
    }

    /* Section separators */
    .section-container {
      margin-bottom: 2rem;
    }

    .section-title {
      margin-bottom: 1.5rem;
      padding-bottom: 0.5rem;
      border-bottom: 2px solid rgba(122, 106, 216, 0.3);
      position: relative;
    }

    .section-title::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 60px;
      height: 2px;
      background: var(--brand-gradient);
    }

    /* Student info logo style */
    .student-info-logo {
      background: linear-gradient(135deg, rgba(122, 106, 216, 0.2), rgba(122, 106, 216, 0.1));
      border-radius: 50%;
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 1rem;
      transition: all 0.3s ease;
    }

    .student-info-logo:hover {
      transform: rotate(15deg);
    }

    .student-info-logo i {
      font-size: 1.5rem;
      color: var(--brand);
    }

    /* Desktop-specific smaller text for semester sections */
    @media (min-width: 992px) {
      .semester-card {
        font-size: 0.95rem;
      }

      .semester-card h5 {
        font-size: 1.15rem;
      }

      .course-table {
        font-size: 0.9rem;
      }
    }

    /* Semester section layout improvements */
    .semester-results-container {
      width: 100%;
    }

    .semester-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
      width: 100%;
    }

    @media (min-width: 992px) {
      .semester-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* NEW STYLES FOR UPDATES */
    .repeated-badge {
      position: absolute;
      top: 5px;
      right: 5px;
      background-color: #ffc107;
      color: #856404;
      font-size: 8px;
      padding: 2px 4px;
      border-radius: 3px;
      font-weight: bold;
    }

    /* --- UPDATE: Use var(--radius-btn) --- */
    .custom-course-btn {
      background: var(--brand-gradient);
      color: white;
      border: none;
      border-radius: var(--radius-btn);
      padding: 8px 12px;
      font-size: 0.9rem;
      margin-top: 10px;
      display: flex;
      align-items: center;
      gap: 5px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .custom-course-btn:hover {
      background: var(--brand-gradient-hover);
      transform: translateY(-2px);
    }

    .undo-notification {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(51, 51, 51, 0.9);
      color: white;
      padding: 12px 20px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      gap: 10px;
      z-index: 10000;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(10px);
      width: calc(100% - 40px);
      max-width: 400px;
      justify-content: space-between;
    }

    .undo-btn {
      background: var(--brand-gradient);
      color: white;
      border: none;
      padding: 5px 10px;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .undo-btn:hover {
      background: var(--brand-gradient-hover);
      transform: translateY(-1px);
    }

    @media (max-width: 576px) {
      .undo-notification {
        bottom: 70px;
        /* Raise it above mobile browser UI */
        padding: 10px 15px;
        font-size: 0.9rem;
        flex-direction: column;
        gap: 8px;
        text-align: center;
      }

      .undo-btn {
        width: 100%;
        padding: 6px 10px;
      }
    }


    /* Updated CGPA Display Layout */
    .cgpa-display-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.5rem;
    }

    .cgpa-main-info {
      text-align: center;
      width: 100%;
      padding-bottom: 1rem;
      border-bottom: 1px solid rgba(122, 106, 216, 0.3);
    }

    .cgpa-metrics-row {
      display: flex;
      justify-content: space-between;
      width: 100%;
      gap: 1rem;
    }

    .cgpa-metric {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
    }

    .cgpa-metric-left {
      align-items: flex-start;
    }

    .cgpa-metric-center {
      align-items: center;
    }

    .cgpa-metric-right {
      align-items: flex-end;
    }

    .cgpa-metric-label {
      font-size: 1rem;
      font-weight: 600;
      color: var(--muted);
      margin-bottom: 0.5rem;
    }

    .cgpa-metric-value {
      font-size: 1.75rem;
      font-weight: 650;
      color: var(--brand);
      line-height: 1.2;
      background: var(--brand-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .cgpa-metric-subvalue {
      font-size: 0.9rem;
      color: var(--muted);
    }

    /* --- Mobile responsive adjustments for CGPA --- */
    @media (max-width: 768px) {
      .cgpa-metrics-row {
        flex-direction: column;
        gap: 1.5rem;
      }

      .cgpa-metric {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 0.5rem 0;
        border-bottom: 1px solid rgba(122, 106, 216, 0.1);
      }

      .cgpa-metric:last-child {
        border-bottom: none;
      }

      .cgpa-metric-left,
      .cgpa-metric-center,
      .cgpa-metric-right {
        align-items: center;
      }

      .cgpa-metric-label {
        margin-bottom: 0;
        min-width: 100px;
        text-align: left;
      }

      .cgpa-metric-value-container {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
      }

      .semester-grid {
        display: block;
      }
    }

    /* Contact form improvements */
    #contact-form {
      background: rgba(255, 255, 255, 0.5);
      padding: 2rem;
      border-radius: var(--radius);
      backdrop-filter: blur(10px);
    }

    [data-theme="dark"] #contact-form {
      background: rgba(26, 32, 48, 0.5);
    }

    /* Animation for form elements */
    .form-control,
    .form-select {
      transition: all 0.3s ease;
    }

    .form-control:focus,
    .form-select:focus {
      transform: translateY(-2px);
    }

    /* Pulse animation for important elements */
    @keyframes pulse {
      0% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.05);
      }

      100% {
        transform: scale(1);
      }
    }

    .pulse {
      animation: pulse 2s infinite;
    }

    /* Floating animation */
    @keyframes float {
      0% {
        transform: translateY(0px);
      }

      50% {
        transform: translateY(-10px);
      }

      100% {
        transform: translateY(0px);
      }
    }

    .float {
      animation: float 3s ease-in-out infinite;
    }

    /* Improved scrollbar */
    ::-webkit-scrollbar {
      width: 8px;
    }

    ::-webkit-scrollbar-track {
      background: rgba(122, 106, 216, 0.1);
      border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb {
      background: var(--brand);
      border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--brand-600);
    }

    [data-theme="dark"] ::-webkit-scrollbar-track {
      background: rgba(122, 106, 216, 0.2);
    }

    [data-theme="dark"] ::-webkit-scrollbar-thumb {
      background: var(--brand-600);
    }

    [data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
      background: var(--brand);
    }

    /* NEW STYLES FOR ADDED FEATURES */

    /* Back to Top Button */
    #backToTop {
      position: fixed;
      bottom: 30px;
      right: 30px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: var(--brand-gradient);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      box-shadow: 0 5px 15px rgba(122, 106, 216, 0.3);
      z-index: 1000;
    }

    #backToTop.visible {
      opacity: 1;
      visibility: visible;
    }

    #backToTop:hover {
      background: var(--brand-gradient-hover);
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(122, 106, 216, 0.4);
    }

    /* Gradient Text Animation */
    .gradient-text {
      background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary), var(--accent), var(--brand-primary));
      background-size: 300% 300%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: gradient-text 3s ease infinite;
    }

    /* Animation for hero text */
    .hero-text-gradient {
      background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary), var(--accent), var(--brand-primary));
      background-size: 300% 300%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: gradient-text 3s ease infinite;
    }

    /* Animation for robot icon */
    .robot-icon-gradient {
      background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary), var(--accent), var(--brand-primary));
      background-size: 300% 300%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: gradient-text 3s ease infinite;
    }


    @keyframes gradient-text {
      0% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }

      100% {
        background-position: 0% 50%;
      }
    }

    /* Why Choose Section */
    .why-choose-section {
      padding: 5rem 0;
    }

    .why-choose-section .text-center {
      margin-bottom: 4rem;
    }

    .why-choose-section h2 {
      font-weight: 800;
      margin-bottom: 1rem;
    }

    .why-choose-section .lead {
      color: var(--text-light);
      font-size: 1.25rem;
    }

    .feature-card {
      background: rgba(255, 255, 255, 0.8);
      border-radius: var(--radius);
      padding: 2rem;
      height: 100%;
      text-align: center;
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);
      box-shadow: var(--shadow);
    }

    .feature-card:hover {
      transform: translateY(-10px);
      box-shadow: var(--shadow-hover);
    }

    .feature-icon {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1.5rem;
      background: var(--brand-gradient);
      color: white;
      font-size: 1.5rem;
      transition: all 0.3s ease;
    }

    .feature-card:hover .feature-icon {
      transform: scale(1.1) rotate(5deg);
    }

    .feature-card h5 {
      font-weight: 700;
      margin-bottom: 1rem;
      color: var(--text);
    }

    .feature-card p {
      color: var(--text-light);
    }

    /* Dark mode for Why Choose section */
    [data-theme="dark"] .why-choose-section {
      background: transparent;
      /* Inherit from body gradient */
    }

    [data-theme="dark"] .feature-card {
      background: rgba(15, 20, 34, 0.8);
    }

    [data-theme="dark"] .feature-card h5 {
      color: #ffffff;
    }

    [data-theme="dark"] .feature-card p.text-muted {
      color: var(--muted) !important;
    }

    [data-theme="dark"] .why-choose-section .lead.text-muted {
      color: var(--text-light) !important;
    }


    /* Hide Why Choose section on mobile */
    @media (max-width: 991.98px) {
      .why-choose-section {
        display: none;
      }
    }


    /* --- NEW: Creative Action Hub --- */

    /* 1. The Pill Navigation Container */
    /* This sits on the main page background (var(--light-bg)) */
    .action-hub-nav-pills {
      display: flex;
      background-color: rgba(122, 106, 216, 0.08);
      /* Faint background for the "track" */
      border-radius: 99px;
      /* Perfect pill shape */
      padding: 0.35rem;
      /* Space for the active pill to move */
      position: relative;
    }

    [data-theme="dark"] .action-hub-nav-pills {
      background-color: rgba(122, 106, 216, 0.2);
      /* Dark mode track */
    }

    /* 2. The Pill Buttons (Active & Inactive) */
    .action-hub-nav-pills .nav-link {
      flex: 1;
      /* Each button takes 50% space */
      display: flex;
      align-items: center;
      justify-content: center;

      border: none;
      border-radius: 99px;
      /* Pill shape for all buttons */

      color: var(--muted);
      /* Inactive text color */
      font-weight: 600;
      font-size: 1.0rem;
      padding: 0.75rem 1rem;

      transition: all 0.3s ease-in-out;
      /* Smooth transitions */

      /* Remove bootstrap defaults */
      background: none;
    }

    /* 3. The ACTIVE Pill Button */
    .action-hub-nav-pills .nav-link.active {
      color: #ffffff;
      /* White text on the gradient */
      background: var(--brand-gradient);
      /* Your site's brand gradient! */
      box-shadow: 0 6px 18px rgba(122, 106, 216, 0.3);
      /* Softer shadow */
      transform: scale(1.02);
      /* Slight "pop" effect */
    }

    /* 4. The Content Wrapper Below */
    /* This is the new "container" that replaces the awkward card */
    .action-hub-content-wrapper {
      margin-top: -1rem;
      /* Space from the pill toggle */

      /* Use your site's card background colors */
      /* background: rgb(248, 249, 255); background color */
      border-radius: var(--radius);
      /* Use your site's border radius */
      /* box-shadow: var(--shadow); Use your site's shadow */

      /* Use backdrop-filter if you used it for card-modern */
      backdrop-filter: blur(10px);
      /* background: rgba(255, 255, 255, 0.8); background color */

      padding: 2rem;
      transition: all 0.3s ease;
      margin-bottom: -20px;
    }

    [data-theme="dark"] .action-hub-content-wrapper {
      /* background: rgba(15, 29, 64, 0.8);  Dark card background */
    }

    /* 5. Styles for the Backup/Import buttons */
    .profile-data-buttons-new {
      display: flex;
      justify-content: center;
      gap: 0.75rem;
      flex-wrap: wrap;
    }

    .profile-data-buttons-new .btn {
      font-size: 0.9rem;
      padding: 0.6rem 1.2rem;
      border-radius: var(--radius-btn);
      flex-grow: 1;
      min-width: 170px;
      max-width: 260px;
    }

    /* 6. Responsive Styles */
    @media (max-width: 575.98px) {
      .action-hub-nav-pills .nav-link {
        font-size: 0.95rem;
        /* Slightly smaller text */
        padding: 0.6rem 0.5rem;
      }

      /* Make content padding smaller on mobile */
      .action-hub-content-wrapper {
        padding: 1.5rem;
      }

      /* Make backup buttons smaller */
      .profile-data-buttons-new .btn {
        font-size: 0.85rem;
        padding: 0.6rem 1rem;
        min-width: 150px;
      }

      .modern-search-input {
        padding: 0.9rem 1.4rem;
        font-size: 1rem;
      }

    }



    /* --- NEW: B.Ed. Tab Styles --- */
    #bedTab {
      border-bottom: 3px solid rgba(122, 106, 216, 0.2);
      margin-bottom: 1.5rem;
    }

    #bedTab .nav-link {
      font-weight: 600;
      font-size: 1.1rem;
      color: var(--muted);
      border: none;
      border-bottom: 3px solid transparent;
      padding-bottom: 1rem;
      transition: all 0.3s ease;
    }

    #bedTab .nav-link.active {
      color: var(--brand);
      border-bottom-color: var(--brand);
      background-color: transparent;
    }

    #bedTab .nav-link:hover:not(.active) {
      color: var(--text);
      border-bottom-color: rgba(122, 106, 216, 0.5);
    }

    [data-theme="dark"] #bedTab {
      border-bottom-color: rgba(122, 106, 216, 0.3);
    }

    [data-theme="dark"] #bedTab .nav-link.active {
      color: #fff;
    }

    /* NEW: Added this media query for small screens */
    @media (max-width: 420px) {
      #bedTab .nav-link {
        font-size: 0.9rem;
        /* Make font smaller */
        padding-left: 0.4rem;
        /* Reduce horizontal padding */
        padding-right: 0.4rem;
      }

      #bedTab .nav-link i {
        margin-right: 0.2rem !important;
        /* Reduce icon spacing */
      }
    }

    /* --- End of B.Ed. Tab Styles --- */



    /* Animation for hero text */
    .hero-text-gradient {
      background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary), var(--accent), var(--brand-primary));
      background-size: 300% 300%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: gradient-text 3s ease infinite;
    }


    /* Animation for robot icon */
    .robot-icon-gradient {
      background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary), var(--accent), var(--brand-primary));
      background-size: 300% 300%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: gradient-text 3s ease infinite;
    }

    /* PDF Download Button */
    .btn-pdf-download {
      background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
      color: white;
      border: 0;
      box-shadow: 0 6px 18px rgba(231, 76, 60, 0.2);
      cursor: pointer;
      transition: all 0.3s ease;
      border-radius: var(--radius-btn);
      /* Consistent radius */
    }

    .btn-pdf-download:hover {
      background: linear-gradient(135deg, #ff6b6b 0%, #e74c3c 100%);
      color: white;
      transform: translateY(-2px);
      box-shadow: 0 10px 25px rgba(231, 76, 60, 0.3);
    }

    /* Action buttons container */
    .action-buttons {
      display: flex;
      justify-content: center;
      /* Center the single button */
      align-items: center;
      margin-top: 1.5rem;
      flex-wrap: wrap;
      gap: 1rem;
    }

    /* Center Registration Number Input */
    .scraping-section .mb-3 {
      text-align: center;
    }

    .scraping-section #registrationNumber {
      max-width: 350px;
      margin: 0 auto;
      text-align: center;
    }

    /* Drag and Drop Styles (Desktop Only) */
    @media (min-width: 992px) {
      .course-table tbody tr {
        cursor: grab;
      }

      .course-table tbody tr.dragging {
        opacity: 0.5;
        background: #e9e6f8;
      }

      .semester-card.drag-over {
        border: 2px dashed var(--brand);
        transform: scale(1.02);
        background-color: rgba(122, 106, 216, 0.1);
      }

      [data-theme="dark"] .semester-card.drag-over {
        background-color: rgba(122, 106, 216, 0.2);
      }
    }

    /* NEW: Scroll Animation Styles */
    .fade-in-on-scroll {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    .fade-in-on-scroll.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* NEW: Forecast/Info Button Style */
    .btn-info-action {
      background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
      color: white;
      border: 0;
      cursor: pointer;
      transition: all 0.3s ease;
      border-radius: var(--radius-btn);
      /* Consistent radius */
    }

    .btn-info-action:hover {
      background: linear-gradient(135deg, #5dade2 0%, #3498db 100%);
      color: white;
      transform: translateY(-2px);
    }

    /* NEW: Profile Manager Styles */
    .profile-manager-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 1rem;
      border-bottom: 1px solid rgba(122, 106, 216, 0.2);
      margin-bottom: 1rem;
    }

    .profile-manager-stats {
      font-size: 0.85rem;
      color: var(--muted);
    }

    .profile-manager-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      align-items: center;
      margin-bottom: 1rem;
    }

    .profile-list {
      list-style: none;
      padding: 0;
      max-height: 50vh;
      overflow-y: auto;
    }

    .profile-item {
      display: flex;
      align-items: center;
      padding: 0.75rem;
      border-radius: 0.75rem;
      transition: background-color 0.2s ease;
      border-bottom: 1px solid rgba(122, 106, 216, 0.1);
      position: relative;
      background-color: rgba(98, 71, 255, 0.02);
      margin-bottom: 10px;
    }

    .profile-item:last-child {
      border-bottom: none;
    }

    .profile-item:hover {
      background-color: rgba(122, 106, 216, 0.05);
    }

    [data-theme="dark"] .profile-item:hover {
      background-color: rgba(122, 106, 216, 0.1);
    }

    .profile-item .form-check-input {
      margin-top: 0;
      transform: scale(1.2);
    }

    .profile-item-details {
      flex-grow: 1;
      margin-left: 1rem;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0 1rem;
    }

    .profile-item-name {
      grid-column: 1 / -1;
      font-weight: 600;
      color: var(--text);
    }

    .profile-item-meta {
      font-size: 0.8rem;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: 0.3rem;
    }

    .profile-item-actions {
      display: flex;
      gap: 0.5rem;
    }

    .profile-item-actions .btn {
      padding: 0.25rem 0.5rem;
      font-size: 0.8rem;
    }

    /* Custom Confirmation Modal */
    .confirmation-modal .modal-content {
      border-radius: var(--radius);
    }

    .confirmation-modal .modal-header {
      border-bottom: none;
    }

    .confirmation-modal .modal-body {
      text-align: center;
    }

    .confirmation-modal .modal-body .fa-triangle-exclamation {
      font-size: 2.5rem;
      color: #f39c12;
    }

    .confirmation-modal .modal-footer {
      border-top: none;
      justify-content: center;
    }

    /* Mobile adjustments for Profile Manager */
    @media (max-width: 767.98px) {
      .profile-manager-toolbar {
        flex-direction: row;
        /* Keep in a row */
        justify-content: space-between;
        /* Space out items */
        align-items: center;
        /* Align vertically */
      }

      .profile-manager-toolbar .ms-auto {
        margin-left: 0 !important;
        /* Remove margin */
        width: auto;
        /* Allow natural width */
        margin-top: 0;
        /* Remove top margin */
        display: flex;
        gap: 0.5rem;
        /* Reduce gap */
      }

      /* --- UPDATE: Removed padding override --- */
      .profile-manager-toolbar .btn {
        font-size: 0.8rem;
        /* Removed padding rule */
      }

      .profile-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
      }

      .profile-item .form-check-input {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
      }

      .profile-item-details {
        margin-left: 0;
        grid-template-columns: 1fr;
        /* Stack details vertically */
        gap: 0.25rem;
      }

      .profile-item-actions {
        width: 100%;
        justify-content: space-around;
        border-top: 1px solid rgba(122, 106, 216, 0.1);
        padding-top: 0.75rem;
      }
    }

    /* --- NEW & UNIFIED: Image Lightbox Styles (All Devices) --- */

    .zoomable-image-container {
      position: relative;
      overflow: hidden;
      /* Contain elements */
      border-radius: 0.75rem;
      /* Match card style */
      display: block;
      /* Ensure it behaves like a block */
      line-height: 0;
      /* Prevent extra space below image */
      cursor: pointer;
      /* Indicate clickability */
    }

    .zoomable-image-container img#qpTableImage {
      display: block;
      /* Ensure image behaves predictably */
      width: 100%;
      /* Make image fill container width */
      height: auto;
      /* Maintain aspect ratio */
      max-width: 100%;
      /* Ensure it doesn't overflow container */
      border-radius: 0.75rem;
      /* Match container */
    }

    /* Hide desktop-specific elements if they exist (cleanup) */
    .zoom-loupe,
    .zoom-box {
      display: none !important;
    }

    /* "Click to zoom" icon (Applies to all devices now) */
    .zoomable-image-container::after {
      content: '\f00e';
      /* FontAwesome zoom-in icon */
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
      position: absolute;
      top: 10px;
      right: 10px;
      background: rgba(0, 0, 0, 0.5);
      color: white;
      padding: 8px 10px;
      border-radius: 5px;
      font-size: 1.1rem;
      z-index: 5;
      pointer-events: none;
      /* Don't block the click */
      opacity: 0.8;
      transition: opacity 0.2s ease;
    }

    .zoomable-image-container:hover::after {
      opacity: 1;
    }

    /* --- Lightbox Styles --- */

    /* Background */
    .image-lightbox {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(5px);
      z-index: 1070;
      display: none;
      /* Changed from flex to none */
      opacity: 0;
      transition: opacity 0.3s ease;
      overflow: hidden;
      /* Prevent body scroll */
    }

    .image-lightbox.show {
      display: flex;
      /* Use flex to center when shown */
      align-items: center;
      justify-content: center;
      opacity: 1;
    }

    /* Content area (holds the image) */
    .lightbox-content {
      width: 100%;
      height: 100%;
      position: relative;
      /* Crucial for image positioning */
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      /* Container doesn't scroll/pan */
    }

    /* Image inside lightbox */
    .lightbox-content img#lightboxImage {
      display: block;
      /* Start unzoomed */
      max-width: 95%;
      max-height: 95%;
      width: auto;
      height: auto;
      object-fit: contain;
      border-radius: 5px;
      cursor: grab;
      /* Default cursor inside */
      /* Transitions and touch actions */
      transition: transform 0.15s ease-out;
      /* Smooth transforms */
      touch-action: none;
      /* Essential for custom touch handling */
      user-select: none;
      -webkit-user-drag: none;
      transform-origin: center center;
      /* Default origin */
    }

    /* Style for when desktop hover-zoom is active */
    .lightbox-content.desktop-zoom-active img#lightboxImage {
      cursor: crosshair;
      /* Indicate zoom region */
      /* Set transform origin dynamically via JS */
    }

    /* Close Button */
    .lightbox-close-btn {
      position: absolute;
      top: 15px;
      right: 15px;
      background: rgba(0, 0, 0, 0.5);
      color: white;
      border: none;
      font-size: 1.5rem;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      cursor: pointer;
      z-index: 1071;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }

    .lightbox-close-btn:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: rotate(90deg);
    }



    /* --- NEW: Premium About Developer Section --- */
    #about-developer-premium {
      padding: 5rem 0;
    }




    /* --- Z-index and Blur for modals --- */
    #renameProfileModal,
    #confirmationModal,
    #attendanceImportModal {
      z-index: 1060;
      /* Higher z-index to appear on top */
    }

    /* When rename or confirm modal is open, apply blur to profile manager */
    #profileManagerModal.blur-backdrop {
      filter: blur(4px);
      transition: filter 0.15s linear;
    }

    /* --- Profile data buttons --- */
    .profile-data-buttons {
      display: flex;
      justify-content: center;
      gap: 0.75rem;
    }

    /* --- UPDATE: Use var(--radius-btn) --- */
    .profile-data-buttons .btn {
      font-size: 0.9rem;
      padding: 0.5rem 1rem;
      border-radius: var(--radius-btn);
    }

    /* --- Mobile styles for Import/Export buttons --- */
    @media (max-width: 575.98px) {
      .profile-data-buttons {
        flex-direction: row;
        /* Keep in row */
        gap: 0.5rem;
        /* Reduce gap */
        justify-content: center;
        /* Center horizontally */
      }

      .profile-data-buttons .btn {
        width: auto;
        /* Allow natural width */
        max-width: none;
        font-size: 0.8rem;
        /* Slightly smaller */
        padding: 0.5rem 0.8rem;
        /* Adjust padding */
        flex-grow: 0;
        /* Allow buttons to grow equally */
        max-width: 50%;
        /* Limit width to half */
      }

      /* NEW: Styles for Attendance Import Modal */
      .attendance-course-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem;
        border-bottom: 1px solid rgba(122, 106, 216, 0.1);
      }

      .attendance-course-item:last-child {
        border-bottom: none;
      }

      .attendance-course-item .form-check {
        display: flex;
        align-items: center;
        gap: 0.75rem;
      }

      .attendance-course-item .form-check-label {
        line-height: 1.3;
      }

      .attendance-course-item .form-check-label small {
        font-size: 0.8rem;
      }

      .attendance-course-item .import-ch-select {
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .attendance-course-item .import-ch-select .form-select {
        width: 80px;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
        font-size: 0.9rem;
      }

    }


    @media (max-width: 576px) {
      .attendance-course-item {
        /* flex-direction: column; <-- REMOVED */
        align-items: center;
        /* Vertically align items in the row */
        gap: 0.5rem;
        /* Reduced gap */
        justify-content: space-between;
        /* Space out checkbox/info and CH selector */
      }

      .attendance-course-item .form-check {
        flex-grow: 1;
        /* Allow checkbox and text to take available space */
        margin-right: 0.5rem;
        /* Add some space before CH selector */
      }

      .attendance-course-item .import-ch-select {
        width: auto;
        /* Let it shrink to content */
        flex-shrink: 0;
        /* Prevent it from shrinking too much */
        /* justify-content: flex-end; <-- REMOVED (space-between on parent handles it) */
      }

      .attendance-course-item .import-ch-select .form-select {
        width: 65px;
        /* Slightly smaller width for mobile select */
      }
    }

    /* Fix for Dark Mode Text Visibility (Request 6) */
    [data-theme="dark"] #faq .lead.text-muted {
      color: var(--text-light) !important;
    }

    [data-theme="dark"] #attendanceImportModal .text-muted {
      color: var(--text-light) !important;
    }



    /* --- About Section Dark Mode Overrides --- */
    [data-theme="dark"] .about-sidebar {
      background-color: rgba(0, 0, 0, 0.2) !important;
      /* Darker sidebar */
      border-right-color: rgba(255, 255, 255, 0.1) !important;
      /* Subtle border */
    }

    [data-theme="dark"] .about-feature-box {
      background-color: rgba(255, 255, 255, 0.05) !important;
      /* Glassy look */
      border-color: rgba(255, 255, 255, 0.1) !important;
    }

    [data-theme="dark"] .about-quote-box {
      background-color: rgba(255, 255, 255, 0.05) !important;
      border-color: rgba(255, 255, 255, 0.1) !important;
      color: var(--text-light);
    }

    /* Ensure icons stay white in dark mode if needed, though text-white handles it */
    .feature-icon.text-white {
      color: #ffffff !important;
    }


    /* --- Premium Calculator Section Styles --- */
    .calculator-card {
      border: 1px solid rgba(255, 255, 255, 0.6);
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(20px);
      box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
      border-radius: 24px;
      overflow: hidden;
      transition: transform 0.3s ease;
    }

    [data-theme="dark"] .calculator-card {
      background: rgba(30, 35, 50, 0.7);
      border-color: rgba(255, 255, 255, 0.05);
    }

    /* Segmented Control Tabs */
    .calc-nav-pills {
      background: rgba(0, 0, 0, 0.04);
      border-radius: 16px;
      padding: 6px;
    }

    [data-theme="dark"] .calc-nav-pills {
      background: rgba(255, 255, 255, 0.05);
    }

    .calc-nav-pills .nav-link {
      border-radius: 12px;
      color: var(--muted);
      font-weight: 600;
      padding: 10px 20px;
      transition: all 0.3s ease;
    }

    .calc-nav-pills .nav-link.active {
      background: #fff;
      color: var(--brand);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    [data-theme="dark"] .calc-nav-pills .nav-link.active {
      background: var(--brand);
      color: #fff;
    }

    /* Ultra-Modern Input Group */
    .input-group-premium {
      background: #fff;
      border: 2px solid transparent;
      border-radius: 18px;
      padding: 6px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
    }

    [data-theme="dark"] .input-group-premium {
      background: rgba(0, 0, 0, 0.2);
    }

    .input-group-premium:focus-within {
      border-color: var(--brand);
      box-shadow: 0 8px 30px rgba(122, 106, 216, 0.15);
      transform: translateY(-2px);
    }

    .input-group-premium input,
    .input-group-premium select {
      border: none;
      background: transparent;
      box-shadow: none !important;
      padding: 12px 15px;
      font-size: 1.1rem;
      /* Desktop size */
      font-weight: 500;
      color: var(--text);
      width: 100%;
      /* Ensure full width */
    }

    .input-group-premium .btn-action {
      border-radius: 14px;
      padding: 10px 24px;
      font-weight: 600;
      white-space: nowrap;
      /* Keeps button on 1 row */
      transition: all 0.2s;
    }

    /* Improved Profile Buttons */
    .btn-profile-action {
      padding: 10px 20px;
      border-radius: 14px;
      font-weight: 500;
      font-size: 0.95rem;
      border: 1px solid transparent;
      transition: all 0.3s ease;
    }

    .btn-profile-import {
      background: rgba(16, 172, 132, 0.1);
      color: #10ac84;
      border-color: rgba(16, 172, 132, 0.2);
    }

    .btn-profile-import:hover {
      background: rgba(16, 172, 132, 0.2);
      transform: translateY(-2px);
    }

    [data-theme="dark"] .btn-profile-import {
      background: rgba(16, 172, 132, 0.2);
      color: #20c997;
    }

    /* Mobile Optimizations */
    @media (max-width: 576px) {

      .input-group-premium input,
      .input-group-premium select {
        font-size: 0.95rem;
        /* Smaller text on mobile */
        padding: 10px 12px;
      }

      .input-group-premium .btn-action {
        padding: 10px 16px;
      }

      .calc-nav-pills .nav-link {
        padding: 8px 10px;
        font-size: 0.9rem;
      }
    }

    /* Server Status Positioning */
    .server-status-wrapper {
      display: flex;
      justify-content: center;
      margin-bottom: 1.5rem;
    }

    @media (min-width: 992px) {
      .server-status-wrapper {
        justify-content: flex-end;
        position: absolute;
        top: 0;
        right: 15px;
        width: auto;
        z-index: 5;
      }
    }

    /* Mobile Theme Toggle Alignment */
    .theme-switch-wrapper-mobile {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: -15px;
    }

    /* Hero Animation (Desktop Only) */
    @media (min-width: 992px) {
      .animate-slide-left {
        opacity: 0;
        transform: translateX(50px);
        animation: slideLeft 0.8s ease-out forwards;
        animation-delay: 0.5s;
      }

      @keyframes slideLeft {
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }
    }

    @media (max-width: 767.98px) {

      /* Mobile Footer Styling */
      .footer-copyright .trusted-line {
        display: none !important;
      }

      .footer-copyright .copyright-text {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
      }
    }

    .footer-heading-wrapper {
      cursor: pointer;
    }

    @media (min-width: 992px) {
      .footer-heading-wrapper {
        cursor: default;
        margin-bottom: 15px;
      }
    }

    .transition-icon {
      transition: transform 0.3s ease;
      font-size: 0.9rem;
      color: var(--muted);
    }

    [aria-expanded="true"] .transition-icon {
      transform: rotate(45deg);
      color: var(--brand);
    }

    /* Compact Mobile Footer Spacing */
    @media (max-width: 991.98px) {
      .footer-heading {
        margin-bottom: 0 !important;
        padding-bottom: 0.5rem;
        padding-top: 0.5rem;
        font-size: 0.95rem;
      }

      .footer-links.collapse.show {
        padding-bottom: 1rem;
        padding-top: 0.5rem;
      }

      .premium-footer .col-lg-3 {
        margin-bottom: 0.5rem !important;
      }

      .premium-footer .col-lg-2,
      .premium-footer .col-lg-4,
      .premium-footer .col-md-7 {
        margin-bottom: 0.5rem !important;
        border-bottom: 1px solid rgba(122, 106, 216, 0.1);
      }

      .premium-footer .col-lg-4:first-child {
        margin-bottom: 1.5rem !important;
        border-bottom: none;
      }

      /* Remove border from last item */
      .premium-footer .col-lg-2:last-of-type {
        border-bottom: none;
      }
    }

    /* === MOBILE BOTTOM NAVIGATION === */
    .mobile-bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-top: 1px solid rgba(122, 106, 216, 0.2);
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 0.5rem 0;
      z-index: 1050;
      box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05);
    }

    .mobile-bottom-nav .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      color: var(--muted);
      font-size: 0.75rem;
      padding: 0.5rem;
      border-radius: 12px;
      transition: all 0.3s ease;
      width: 25%;
    }

    .mobile-bottom-nav .nav-item i {
      font-size: 1.25rem;
      margin-bottom: 4px;
      transition: all 0.3s ease;
    }

    .mobile-bottom-nav .nav-item.active {
      color: var(--brand);
    }

    .mobile-bottom-nav .nav-item.active i {
      transform: translateY(-2px);
    }

    /* Dark mode for bottom nav */
    [data-theme="dark"] .mobile-bottom-nav {
      background: rgba(15, 23, 42, 0.85);
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    [data-theme="dark"] .mobile-bottom-nav .nav-item {
      color: var(--text-light);
    }

    /* 'Ultra-Modern' Professional Mobile Styles */
    @media (max-width: 576px) {

      #statusLog,
      .card-modern {
        background: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.04) !important;
        box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08) !important;
        padding: 0 !important;
        margin-top: 1.5rem !important;
        border-radius: 20px !important;
        overflow: hidden;
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      }

      .card-modern:active {
        transform: scale(0.995);
      }

      /* HEADER */
      .card-modern .card-header {
        padding: 0 !important;
        background: transparent !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.03) !important;
        border-radius: 0 !important;
      }

      .card-modern .card-header a {
        padding: 1.25rem 1.5rem !important;
        margin: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-decoration: none;
        width: 100%;
      }

      .card-modern .card-header a:active {
        opacity: 1;
        background: transparent !important;
      }

      /* CONTENT */
      .card-modern .card-body,
      .card-modern .collapse,
      .card-modern .collapsing {
        background: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
      }

      .card-modern .card-body {
        padding: 1.5rem !important;
      }

      .card-modern h4 {
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        color: var(--text) !important;
        margin: 0 !important;
        letter-spacing: -0.01em;
      }

      /* STATUS LINES */
      .status-line {
        padding: 0.75rem 1rem !important;
        font-size: 0.8rem !important;
        margin-bottom: 0.75rem !important;
        background: rgba(122, 106, 216, 0.04);
        border-radius: 12px;
        border: 1px solid rgba(122, 106, 216, 0.08);
        display: flex;
        align-items: center;
        font-weight: 500;
      }

      #statusLog {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        margin-top: 0 !important;
        padding: 0 !important;
      }

      /* Full Width Action Buttons (Row Aligned) - GRID ENFORCED EQUALITY */
      .action-buttons-aligned {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem;
        width: 100%;
        flex-direction: unset !important;
        /* Reset flex */
      }

      #downloadPdfBtn,
      #addForecastSemesterBtn,
      #bed-downloadPdfBtn,
      #bed-addForecastSemesterBtn,
      #other-downloadPdfBtn,
      #other-addForecastSemesterBtn {
        width: 100% !important;
        /* Fill grid cell */
        min-width: 0 !important;
        /* Allow shrinking below content size */
        margin: 0 !important;
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
        display: flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
        /* Keep single line */
        font-size: 0.8rem !important;
        /* Ensure fit */
        overflow: hidden;
        text-overflow: ellipsis;
        flex: unset !important;
        /* Remove flex properties */
      }
    }

    /* DARK MODE */
    @media (max-width: 576px) {

      [data-theme="dark"] #statusLog,
      [data-theme="dark"] .card-modern {
        background: #1e293b !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5) !important;
      }

      [data-theme="dark"] .card-modern .card-header {
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
      }

      [data-theme="dark"] .status-line {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.04);
        color: rgba(255, 255, 255, 0.9);
      }
    }



    /* Add padding to body to prevent content being hidden behind bottom nav on mobile */
    @media (max-width: 991.98px) {
      body {
        padding-bottom: 80px;
      }
    }

    /* Back to Top Button */
    #backToTop {
      position: fixed;
      bottom: 80px;
      right: 2rem;
      z-index: 999;
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      border: none;
      background: var(--brand-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
      color: white;
      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      transform: translateY(20px);
      transition: all 0.3s ease;
    }

    #backToTop:hover {
      transform: translateY(-5px);
      box-shadow: 0 0.8rem 1.5rem rgba(0, 0, 0, 0.2);
    }

    #backToTop.visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    @media (min-width: 992px) {
      #backToTop {
        bottom: 2rem;
      }
    }

    /* --- Modern FAQ Styles (Native <details>) --- */
    .faq-container {
      max-width: 800px;
      margin: 0 auto;
    }

    .faq-item {
      background: #fff;
      border-radius: var(--radius);
      margin-bottom: 1rem;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      border: 1px solid rgba(122, 106, 216, 0.1);
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
    }

    [data-theme='dark'] .faq-item {
      background: rgba(30, 41, 59, 0.7);
      border-color: rgba(255, 255, 255, 0.05);
    }

    .faq-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
      border-color: var(--brand);
    }

    .faq-item summary {
      padding: 1.2rem 1.5rem;
      cursor: pointer;
      font-weight: 500;
      font-size: 1rem;
      list-style: none;
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: var(--text);
      transition: color 0.2s ease;
    }

    .faq-item summary::-webkit-details-marker {
      display: none;
    }

    .faq-item summary::after {
      content: '\f107';
      /* FontAwesome angle-down */
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
      font-size: 0.9rem;
      transition: transform 0.3s ease;
      color: var(--muted);
    }

    .faq-item[open] summary::after {
      transform: rotate(180deg);
      color: var(--brand);
    }

    .faq-item[open] summary {
      border-bottom: 1px solid rgba(122, 106, 216, 0.1);
      color: var(--brand);
      font-weight: 600;
    }

    [data-theme='dark'] .faq-item[open] summary {
      border-bottom-color: rgba(255, 255, 255, 0.05);
    }

    .faq-body {
      padding: 1.2rem 1.5rem;
      font-size: 0.95rem;
      color: var(--text-light);
      line-height: 1.6;
      background-color: rgba(122, 106, 216, 0.02);
    }

    [data-theme='dark'] .faq-body {
      background-color: transparent;
    }

    /* Mobile Optimization */
    @media (max-width: 576px) {
      .faq-item summary {
        padding: 1rem 1.2rem;
        font-size: 0.9rem;
        /* Smaller text for mobile */
      }

      .faq-body {
        padding: 1rem 1.2rem;
        font-size: 0.85rem;
      }
    }