/* --- 1. Clean, Fluid Baseline --- */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f0f2f5; 
      color: #333;
      line-height: 1.6;
    }

    html, body { overflow-x: hidden; width: 100%; position: relative; }

    img, video { max-width: 100%; height: auto; display: block; }

    /* --- 2. Dynamic Container --- */
    .container {
      width: 96vw; 
      max-width: 1600px; 
      margin: 2vh auto; 
      background-color: #fff;
      min-height: 96vh; 
      box-shadow: 0 8px 30px rgba(0,0,0,0.08); 
      border-radius: 12px; 
      overflow: hidden; 
      display: flex;
      flex-direction: column;
    }

    @media (max-width: 1799px) {
      .container {
        width: 100%;
        margin: 0;
        border-radius: 0;
        min-height: 100vh;
      }
    }

    /* --- 3. Fluid Header --- */
    header {
      display: flex;
      align-items: center;
      padding: clamp(15px, 2vw, 25px) clamp(20px, 4vw, 40px); 
      background-color: #333;
      color: white;
      border-bottom: 3px solid #007bff; 
    }

    #burger-menu-toggle {
      position: fixed;
      top: 25px;
      left: 20px;
      z-index: 9999; /* Keeps it above everything else */
      font-size: clamp(1.4rem, 2.5vw, 1.8rem);
      cursor: pointer;
      transition: all 0.2s;
      /* Added styling to make it look like a floating widget */
      background-color: #333;
      color: white;
      width: 45px;
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    }

    #burger-menu-toggle:hover {
      background-color: #007bff;
      transform: scale(1.05);
    }

    .header-logo {
      width: clamp(45px, 6vw, 70px); 
      height: auto;
      margin-right: clamp(10px, 2vw, 25px);
      border: 2px solid white;
      padding: clamp(4px, 1vw, 8px);
      border-radius: 6px;
      background-color: white;
    }

    header h1 {
      margin: 0;
      font-size: clamp(1.5rem, 3.5vw, 2.5rem); 
      color: white;
      letter-spacing: 1px;
    }

    /* --- 4. Responsive Navigation --- */
    
    .sidenav {
      height: 100%;
      width: 0; 
      position: fixed;
      z-index: 1000;
      top: 0;
      left: 0;
      background-color: #282828; 
      overflow-x: hidden;
      transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 
      padding-top: 80px; 
    }

    .sidenav a {
      padding: 12px 15px 12px 32px;
      text-decoration: none;
      font-size: 1.1rem;
      font-weight: 500;
      color: #ccc;
      display: block;
      transition: 0.2s;
      border-left: 3px solid transparent;
    }

    .sidenav a:hover, .sidenav a.active {
      color: #fff;
      background-color: rgba(0, 123, 255, 0.1);
      border-left: 3px solid #007bff;
    }

    .sidenav .closebtn {
      position: absolute;
      top: 15px;
      right: 25px;
      font-size: 36px;
      line-height: 1;
      color: #888;
    }
    .sidenav .closebtn:hover {
      color: #fff;
      background: none;
      border-left: 3px solid transparent;
    }

    #page-overlay {
      position: fixed;
      display: none;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-color: rgba(0,0,0,0.6);
      z-index: 999; 
      cursor: pointer;
    }

    .desktop-nav {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 12px;
      padding: clamp(15px, 2vw, 20px);
      border-bottom: 1px solid #eee;
      background-color: #fafafa;
    }
    
    .desktop-nav > a, .dropdown {
      text-align: center;
    }

    .desktop-nav > a, .dropbtn {
      background-color: #fff;
      color: #333;
      padding: 12px 15px;
      font-size: clamp(0.9rem, 1vw, 1rem);
      border: 1px solid #ddd;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease-in-out;
      font-family: inherit;
      font-weight: 600;
      text-decoration: none;
      display: block;
      width: 100%;
      box-sizing: border-box;
    }

    .desktop-nav > a:hover, .dropbtn:hover {
      background-color: #007bff;
      color: white;
      border-color: #007bff;
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0,123,255,0.2);
    }

    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropbtn .fa-solid {
      margin-left: 8px;
      transition: transform 0.2s;
    }

    .dropdown:hover .dropbtn .fa-solid {
      transform: rotate(180deg);
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #fff;
      min-width: 100%; 
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.15);
      z-index: 100;
      border-radius: 6px;
      overflow: hidden;
      top: 100%; 
      border: 1px solid #eee;
   }

    .dropdown-content a {
      color: #333;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      font-size: 0.95rem;
      text-align: left;
    }

    .dropdown-content a:hover {
      background-color: #f1f1f1;
    }

    .dropdown:hover .dropdown-content {
      display: block;
    }

    @media (max-width: 1799px) {
      /* 1. Container adjustments */
      .container {
          width: 100%;
          margin: 0;
          border-radius: 0;
          min-height: 100vh;
      }

      /* 2. Hide desktop navigation */
      .desktop-nav {
          display: none;
      }

      /* 3. Bulletproof Fixed Header */
      header {
          position: fixed;
          top: 0;
          left: 0;
          /* Kept at 998 so the page overlay (999) and side menu (1000) slide OVER it */
          z-index: 998; 
          width: 100%;
          box-sizing: border-box;
      }

      /* 4. Offset the main content so it doesn't hide under the fixed header */
      main {
          margin-top: 85px; /* Adjust this slightly if your header overlaps your content */
      }

      /* 5. Push the burger menu into the header's normal flex flow */
      #burger-menu-toggle {
          position: static; 
          margin-right: 15px; 
          flex-shrink: 0; 
          box-shadow: none; /* Optional: removes the shadow since it's no longer floating */
      }
    }

    /* --- 5. Main Content Area --- */
    main {
      flex-grow: 1; 
      padding: clamp(20px, 4vw, 40px);
    }

    /* --- 6. Fluid Footer --- */
    footer {
      text-align: center;
      padding: 20px;
      background-color: #f9f9f9;
      border-top: 1px solid #eee;
    }

    .social-links {
      font-size: 28px; 
      gap: 20px; 
      display: flex; 
      justify-content: center;
      margin-top: 15px;
    }
    
    .social-links a { color: #555; transition: color 0.2s; }
    .social-links a:hover { color: #007bff; }

    /* --- Utility Classes --- */
    .grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
      gap: clamp(15px, 2vw, 25px);
    }

    .content-divider { margin: 20px 0 0 0; border: 0; border-top: 1px solid #eee; width: 100%; display: block; }

    /* --- Help Page Specific Styles --- */
    .help-container {
      display: flex;
      flex-direction: column;
      gap: clamp(20px, 3vw, 25px);
      margin-top: clamp(1rem, 2vw, 2rem);
    }

    .help-box {
      background-color: #fff;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      padding: clamp(15px, 3vw, 25px);
      box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    }

    .help-box h2 {
      margin-top: 0;
      font-size: clamp(1.2rem, 2.5vw, 1.35rem);
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 2px solid #f0f0f0;
      color: #333;
    }
    
    .help-box h3 {
      font-size: clamp(1.05rem, 2vw, 1.15rem);
      color: #222;
      margin-top: 20px;
      margin-bottom: 8px;
    }

    .help-box p, .help-box li {
      line-height: 1.6;
      color: #555;
      margin-bottom: 15px;
    }

    .help-box ul {
      margin-top: 0;
      padding-left: 20px;
    }

    .contact-btn {
      display: inline-block;
      background-color: #333;
      color: white;
      text-decoration: none;
      padding: 10px 20px;
      border-radius: 6px; /* Matched to your template's standard radius */
      font-weight: bold;
      margin-top: 10px;
      transition: background-color 0.2s;
    }
    
    .contact-btn:hover {
      background-color: #007bff;
    }

    .legal-box {
      background-color: #fbfbfb;
      border-left: 5px solid #dc3545;
    }
    
    .legal-box h2 {
      border-bottom-color: #e6e6e6;
    }

    .info-box {
      background-color: #f4f9ff;
      border-left: 5px solid #007bff;
    }

    .legal-links {
      margin-top: 15px;
      font-size: 0.95rem;
      padding-top: 15px;
      border-top: 1px dashed #ccc;
    }

    .legal-links a {
      color: #007bff;
      text-decoration: none;
      font-weight: 500;
    }
    
    .legal-links a:hover {
      text-decoration: underline;
    }
    
    /* --- Home Page Specific Content Styles --- */
    
    .hero-section {
      background-color: #fff;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      padding: clamp(20px, 4vw, 40px) clamp(15px, 3vw, 30px);
      text-align: center;
      margin-bottom: 40px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    }
    
    .hero-section h2 { 
      font-size: clamp(1.5rem, 3vw, 2rem); 
      margin-bottom: 15px; 
      color: #333;
      margin-top: 0;
    }
    
    .hero-section p { font-size: 1.1rem; color: #555; max-width: 700px; margin: 0 auto; line-height: 1.6; }

    .content-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 25px;
      margin-bottom: 40px;
    }

    .info-card {
      background: #fff;
      border: 1px solid #eee;
      border-radius: 12px;
      padding: 20px;
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .info-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 15px rgba(0,0,0,0.06);
      border-color: #d0d0d0;
    }

    .info-card h3 {
      font-size: 1.3rem;
      margin-top: 0;
      margin-bottom: 15px;
      color: #333;
      border-bottom: 2px solid #f0f0f0;
      padding-bottom: 10px;
    }

    .info-card.blue-accent { border-top: 4px solid #007bff; }
    .info-card.dark-accent { border-top: 4px solid #333; }
    .info-card.gold-accent { border-top: 4px solid #e0c070; }

    .cta-button {
      display: inline-block;
      width: 100%;
      text-align: center;
      padding: 10px 0;
      background-color: #007bff;
      color: white;
      border-radius: 6px;
      margin-top: 15px;
      font-weight: 600;
      transition: background 0.2s;
      box-sizing: border-box;
      text-decoration: none;
    }
    .cta-button:hover { background-color: #0056b3; text-decoration: none; color: white; }
    .cta-button.secondary { background-color: #555; }
    .cta-button.secondary:hover { background-color: #333; }

    .full-width-card {
      grid-column: 1 / -1;
      background-color: #fcfcfc;
    }

    .tight-stack h3,
    .tight-stack p {
        margin-bottom: 5px;
        margin-top: 0;
    }
    .label-text {
        margin-bottom: 2px !important;
        display: block;
    }

    .final-info-stack {
      margin-top: 20px;
      margin-bottom: 20px;
    }
    
    .section-title {
        border-bottom: 2px solid #eee;
        padding-bottom: 10px;
        margin-bottom: 20px;
        margin-top: 50px;
        color: #333;
    }

    .hero-section + .section-title {
        margin-top: 30px;
    }

    .story-card {
        background-color: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 25px;
        transition: box-shadow 0.2s;
    }
    
    .story-card:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }

    .story-title {
        margin-top: 0;
        margin-bottom: 10px;
        font-size: 1.4rem;
        color: #2c3e50;
    }

    .story-teaser {
        font-size: 1rem;
        color: #555;
        margin-bottom: 10px;
    }

    .story-full-content {
        display: none; 
        margin-top: 20px;
        padding-top: 15px;
        border-top: 1px solid #f0f0f0;
        animation: fadeIn 0.5s;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .story-full-content h4 {
        margin-top: 20px;
        margin-bottom: 8px;
        color: #007bff;
    }
    
    .story-full-content p {
        margin-bottom: 12px;
    }
    
    .story-full-content img {
        max-width: 100%;
        border-radius: 4px;
        margin: 10px 0;
        border: 1px solid #ddd;
    }

    .read-more-btn {
        background-color: #007bff;
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
        font-size: 0.9rem;
        transition: background 0.2s;
    }
    
    .read-more-btn:hover {
        background-color: #0056b3;
    }

    .story-full-content a { color: #007bff; text-decoration: underline; }

    @media (max-width: 1799px) {
      .content-grid { grid-template-columns: 1fr; } 
    }

    /* --- Tool & Form Specific Styles --- */
    .tool-section {
      background-color: #fff;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      padding: clamp(20px, 4vw, 30px);
      margin-bottom: 30px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    }
    
    .tool-section form label {
      display: block;
      margin-top: 15px;
      font-weight: 600;
      color: #333;
    }
    
    .tool-section form input {
      width: 100%;
      padding: 12px;
      margin-top: 8px;
      border: 1px solid #ccc;
      border-radius: 6px;
      box-sizing: border-box;
      font-family: inherit;
      font-size: 1rem;
      transition: border-color 0.2s;
    }
    
    .tool-section form input:focus {
      border-color: #007bff;
      outline: none;
    }

    .button-group {
      display: flex;
      gap: 15px;
      margin-top: 25px;
    }

    .button-group button {
      flex: 1;
      padding: 12px;
      border: none;
      border-radius: 6px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.2s, color 0.2s;
    }

    #compareBtn { background-color: #333; color: white; }
    #compareBtn:hover { background-color: #007bff; }
    
    #shareBtn { background-color: #f0f2f5; color: #333; border: 1px solid #ccc; }
    #shareBtn:hover { background-color: #e2e6ea; }

    /* --- Equation Plotter Specific Styles --- */
    .equation-container {
      background: #f9f9f9;
      padding: 15px;
      border-radius: 6px;
      border: 1px solid #ddd;
      margin-top: 15px;
    }

    .equation-row {
      display: flex;
      flex-wrap: nowrap; /* Forces all terms to stay on one line */
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 5px 0; /* Slimmer vertical padding */
    }

    .term-group {
        display: flex;
        align-items: center;
        background: #fff;
        padding: 2px 5px; /* Slimmer inner padding */
        border-radius: 4px;
        border: 1px solid #ccc;
    }

    .math-symbol {
        font-weight: bold;
        font-size: 1.2rem;
        color: #555;
        padding: 0 5px;
    }

    /* Small inputs for the equation */
    .input-coeff {
        width: 40px; /* Slightly wider to comfortably fit "-1.0" without clipping */
        padding: 2px; /* Slimmer padding */
        border: none;
        border-radius: 3px;
        text-align: right;
        background: transparent;
        font-family: inherit;
    }
    .input-coeff:focus { outline: none; }
    
    .input-ticker {
        width: 65px; /* Wide enough for placeholders and standard 4-5 letter tickers */
        padding: 2px; /* Slimmer padding */
        border: none;
        border-radius: 3px;
        text-transform: uppercase;
        font-weight: bold;
        background: transparent;
        font-family: inherit;
    }
    .input-ticker:focus { outline: none; }

    /* The Division Bar */
    .fraction-bar {
        height: 2px;
        background-color: #333;
        margin: 5px 0;
        width: 100%;
    }

    /* Responsive adjustments for equation inputs */
    @media (max-width: 600px) {
        .equation-row { flex-direction: column; align-items: stretch; }
        .term-group { justify-content: center; margin-bottom: 5px; border: 1px solid #ccc;}
        .math-symbol.plus { display: none; } 
        .math-symbol.plus::before { content: "+"; display: block; text-align: center; margin-bottom: 5px;}
    }

    /* --- Plot Area --- */
    #plot {
      margin: 0 0 30px 0;
      text-align: center;
      min-height: 300px;
      background-color: #fff;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    }

    img.logo {
      width: 100%;
      height: auto;
      border-radius: 6px;
    }

    /* --- Comparison Ribbons --- */
    .scroll-container {
      display: flex;
      overflow-x: auto;
      gap: 10px;
      padding: 12px 0;
      scrollbar-width: thin;
    }

    .comparison-card {
      flex: 0 0 280px;
      background: #fff;
      border: 1px solid #eee;
      padding: 10px 12px;
      border-radius: 8px;
      font-size: 0.75rem;
      line-height: 1.3;
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    }

    .comparison-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 12px rgba(0,0,0,0.05);
      border-color: #007bff;
    }

    .comparison-card strong {
      display: block;
      margin-bottom: 4px;
      color: #007bff;
      font-size: 0.95rem;
    }

    .category-title {
      font-size: 1.2rem;
      margin-top: 20px;
      margin-bottom: 5px;
      color: #333;
    }

/* --- R-Squared Cards Grid --- */
    .rsquared-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      margin: 25px 0;
    }

    .rsquared-card {
      padding: 20px;
      background-color: #fff;
      border: 1px solid #eee;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.02);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .rsquared-range { font-weight: bold; font-size: 1.1rem; }
    .rsquared-cat { font-weight: bold; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.5px; }
    .rsquared-sig { margin: 0; font-size: 0.95rem; line-height: 1.5; color: #555; }

    /* --- NEW SOCIAL SHARE STYLES (Global) --- */
    .social-share-row {
      display: flex;
      justify-content: flex-end; 
      align-items: center; /* Ensures icons are perfectly centered */
      gap: 15px; /* Slightly increased for better tap targets on mobile */
      margin-top: 25px; /* Increased from 12px to fix the clipping */
      padding-right: 5px;
    }
    .social-icon {
      color: #777;
      transition: transform 0.2s, color 0.2s;
      display: flex;
      align-items: center;
      text-decoration: none;
    }
    .social-icon:hover { transform: scale(1.15); }
    
    /* Brand Colors on Hover */
    .icon-whatsapp:hover { color: #25D366; }
    .icon-facebook:hover { color: #1877F2; }
    .icon-x:hover { color: #000000; }
    .icon-linkedin:hover { color: #0077B5; }

    /* --- Financial Calculators Specific Styles --- */
    
    .input-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
        margin-bottom: 15px;
    }
    
    textarea.calc-input {
        width: 100%;
        padding: 12px;
        margin-top: 8px;
        border: 1px solid #ccc;
        border-radius: 6px;
        box-sizing: border-box;
        font-family: inherit;
        font-size: 1rem;
        transition: border-color 0.2s;
        resize: vertical;
    }
    
    textarea.calc-input:focus {
        border-color: #007bff;
        outline: none;
    }

    .result-area {
        margin-top: 25px;
        padding-top: 20px;
        border-top: 2px solid #f0f0f0;
    }
    
    .result-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        font-size: 1.05rem;
    }
    
    .big-green {
        font-size: 1.4rem;
        color: #28a745;
        font-weight: bold;
    }

    /* --- Rebalancer Specifics --- */
    .comparison-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-top: 20px;
    }

    .company-card {
        flex: 1;
        min-width: 280px;
        background: #fdfdfd;
        padding: 20px;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    }
    
    .company-card h4 {
        margin-top: 0;
        font-size: 1.2rem;
        color: #333;
        border-bottom: 2px solid #eee;
        padding-bottom: 10px;
    }

    .result-line {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px dashed #ccc;
        font-size: 1.1rem;
    }

    .big-value {
        font-size: 1.3rem;
        font-weight: bold;
        color: #28a745;
    }

    /* --- Matrix Styles --- */
    .matrix-wrapper {
        overflow-x: auto;
        overflow: auto;
        margin-top: 20px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        max-height: 60cqw;
        scrollbar-width: thin;
    }

    table.matrix-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.85rem;
    }

    .matrix-table th, .matrix-table td {
        padding: 8px;
        text-align: center;
        border: 1px solid #eee;
        min-width: 50px;
    }

    .matrix-table thead th {
        background-color: #333;
        color: white;
        position: sticky;
        top: 0;
        z-index: 100;
        font-weight: 600;
    }

    .matrix-table tbody th {
        background-color: #444;
        color: white;
        position: sticky;
        left: 0;
        z-index: 50;
        text-align: left;
        padding-left: 12px;
        font-weight: 600;
    }

    .matrix-table thead th:first-child {
        left: 0;
        z-index: 150;
    }

    .loss { background-color: #fadbd8; }
    .gain-low { background-color: #fcf3cf; }
    .gain-med { background-color: #d5f5e3; }
    .gain-high { background-color: #82e0aa; }
    .gain-super { background-color: #2ecc71; color: white; font-weight:bold; }

    /* --- Tooltips --- */
    .tooltip-container {
        position: relative;
        display: inline-block;
        cursor: help;
        margin-left: 5px;
        color: #007bff;
        font-weight: bold;
        font-size: 0.9em;
    }

    .tooltip-text {
        visibility: hidden;
        width: 260px;
        background-color: #333;
        color: #fff;
        text-align: left;
        border-radius: 6px;
        padding: 12px;
        position: absolute;
        z-index: 200;
        bottom: 130%;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
        transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
        font-size: 0.85rem;
        font-weight: normal;
        box-shadow: 0px 4px 12px rgba(0,0,0,0.15);
        line-height: 1.5;
    }

    .tooltip-text::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -6px;
        border-width: 6px;
        border-style: solid;
        border-color: #333 transparent transparent transparent;
    }

    .tooltip-container:hover .tooltip-text,
    .tooltip-container.active .tooltip-text {
        visibility: visible;
        opacity: 1;
        transition: opacity 0.3s ease-in-out, visibility 0s;
    }
    
    .tooltip-text a {
        color: #4db8ff;
        text-decoration: underline;
    }

    /* --- Article & Indicator Specific Styles --- */
    .article-body {
      line-height: 1.6;
      font-size: 1.05rem;
      color: #444;
      max-width: 100%;
      margin: 0 auto; /* Centers the article beautifully on large screens */
    }
    
    .article-body h1 {
      font-size: clamp(2rem, 4vw, 2.5rem);
      color: #333;
      border-bottom: 3px solid #007bff;
      padding-bottom: 10px;
      margin-top: 0;
      margin-bottom: 20px;
    }

    .article-body h2 {
      color: #222;
      border-bottom: 2px solid #007bff;
      padding-bottom: 5px;
      display: inline-block;
      margin-top: 30px;
    }

    .warning-box {
      background-color: #fff3cd;
      border-left: 5px solid #ffc107;
      padding: clamp(15px, 3vw, 20px);
      margin: 25px 0;
      border-radius: 6px; 
      font-size: 0.95rem;
      box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    }

    .country-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: clamp(15px, 2vw, 20px);
      margin-top: 20px;
    }

    .country-card {
      background: #fff;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      padding: 15px;
      text-align: center;
      transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
      text-decoration: none;
      display: flex;
      flex-direction: column;
      justify-content: center;
      box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    }

    .country-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 15px rgba(0,0,0,0.06);
      border-color: #007bff;
    }

    .country-name {
      font-weight: bold;
      font-size: 1.2rem;
      margin-bottom: 8px;
      color: #333;
    }

    .country-tickers {
      font-size: 0.85rem;
      color: #555;
      background: #f0f2f5;
      padding: 6px 10px;
      border-radius: 4px;
      display: inline-block;
      margin: 0 auto;
      font-weight: 600;
    }

    /* --- Table & Filter Specific Styles (Reusable) --- */
    .filter-panel {
      background-color: #f8f9fa;
      padding: clamp(15px, 3vw, 25px);
      border-radius: 8px;
      border: 1px solid #e0e0e0;
      margin-bottom: 20px;
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      align-items: flex-end;
    }

    .filter-group {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-width: 180px;
    }

    .filter-group label { margin-top: 0; margin-bottom: 5px; font-weight: 600; font-size: 0.95rem; color: #333; }
    
    .filter-group input[type="text"],
    .filter-group select {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 6px;
      box-sizing: border-box;
      font-family: inherit;
      transition: border-color 0.2s;
    }
    
    .filter-group input[type="text"]:focus,
    .filter-group select:focus {
      border-color: #007bff;
      outline: none;
    }

    .filter-group select[multiple] {
      height: 100px;
    }

    .table-controls {
      display: flex;
      gap: 10px;
      margin-bottom: 15px;
    }

    .clear-btn, .clear-multi-btn {
      padding: 10px 15px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 0.95rem;
      font-weight: 600;
      transition: background-color 0.2s;
    }
    
    .clear-btn { background-color: #dc3545; color: white; }
    .clear-btn:hover { background-color: #c82333; }
    
    .clear-multi-btn { background-color: #6c757d; color: white; }
    .clear-multi-btn:hover { background-color: #5a6268; }

    .table-responsive {
      width: 100%;
      overflow-x: auto;
      background: #fff;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
    }

    .ticker-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.95rem;
    }

    .ticker-table th, .ticker-table td {
      border-bottom: 1px solid #eee;
      padding: 12px 15px;
      text-align: left;
    }

    .ticker-table th {
      background-color: #333;
      color: white;
      position: sticky;
      top: 0;
      font-weight: 600;
      border-bottom: none;
    }

    .ticker-table tr:nth-child(even) { background-color: #fafafa; }
    .ticker-table tr:hover { background-color: #f1f5f9; }
    
    .ticker-table tr.selected-row { background-color: #e8f4fd !important; }

    input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: #007bff; }

    .btn-link {
      background-color: #333;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 6px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      transition: background-color 0.2s;
      text-align: center;
    }
    .btn-link:hover { background-color: #555; text-decoration: none; color: white;}
    .btn-link.secondary-btn { background-color: #007bff; }
    .btn-link.secondary-btn:hover { background-color: #0056b3; }

    /* --- Simple Loader Animation --- */
      .loader {
        border: 4px solid #f3f3f3; /* Light grey track */
        border-top: 4px solid #007bff; /* Brand blue spinner */
        border-radius: 50%;
        width: 50px;
        height: 50px;
        animation: spin 1s linear infinite;
        margin: 0 auto;
      }

      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
    
    @media (max-width: 600px) {
      .button-group { flex-direction: column; }
    }

/* =========================================
   RESCUED STYLES: TICKER SELECTOR & BUTTONS 
   ========================================= */

/* --- Ticker Selector Grid Layout --- */
/* This targets the container wrapping your macro/country checkboxes to create a neat grid */
.checkbox-group, 
.region-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin: 15px 0 25px 0;
}

/* Styles the individual checkbox labels to look like clickable cards */
.checkbox-group label, 
.region-grid label {
    background: #ffffff;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.95rem;
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Hover and selection effects for the cards */
.checkbox-group label:hover, 
.region-grid label:hover {
    border-color: #007bff;
    background-color: #f8fbff;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 123, 255, 0.1);
}

/* --- Action Buttons --- */
/* The Seasonality Button */
.shiny-yellow-btn {
    background: linear-gradient(135deg, #FFD700 0%, #FDB931 100%);
    color: #222 !important;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 10px rgba(255, 215, 0, 0.3);
    text-align: center;
}

.shiny-yellow-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(255, 215, 0, 0.5);
    text-decoration: none;
}

/* The Overlay Plot Button */
.btn-link.purple-btn {
    background-color: #6f42c1;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(111, 66, 193, 0.2);
}

.btn-link.purple-btn:hover {
    background-color: #59339d;
    box-shadow: 0 6px 15px rgba(111, 66, 193, 0.4);
}