/* ================================================================= */
    /* 1. ROOT VARIABLES & GLOBAL RESET                                  */
    /* ================================================================= */
    *, *::before, *::after {
      box-sizing: border-box;
    }

    :root {
      --primary-color: #004d40;   /* Deep Dark Teal */
      --secondary-color: #00796b; /* Classic Teal */
      --accent-color: #9b2c2c;    /* Accent Red */
      --warning-color: #d69e2e;   /* Warning Gold */
      --bg-light: #f2f7f7;        /* Subtle Light Teal-Gray */
      --border-color: #d1e0e0;    /* Muted Teal-Border */
      --text-dark: #2d3748;
      --text-muted: #4a5568;
      --highlight-bg: #e0f2f1;    /* Soft Light Teal */
    }

    html, body {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
      margin: 0;
      padding: 0;
    }

    body, .page-container {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      line-height: 1.6;
      color: var(--text-dark);
      background-color: #fff;
    }

    body {
      padding: 15px;
    }

    .container, .page-container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      overflow-x: hidden;
    }

    /* ================================================================= */
    /* 2. TYPOGRAPHY & BASIC ELEMENTS                                    */
    /* ================================================================= */
    h1, h2, h3, h4 {
      color: var(--primary-color);
      margin-top: 1.2em;
      margin-bottom: 0.5em;
      word-wrap: break-word;
    }

    h1 { 
      font-size: 1.8rem; 
      text-align: center; 
    }

    h2 {
      border-bottom: 2px solid var(--secondary-color);
      padding-bottom: 8px;
      font-size: 1.5rem;
    }

    h3 {
      font-size: 1.25rem;
    }

    .subtitle {
      font-style: italic;
      color: var(--text-muted);
      margin-top: -5px;
      margin-bottom: 20px;
      font-size: 0.95rem;
    }

    hr {
      border: 0;
      height: 1px;
      background: var(--border-color);
      margin: 25px 0;
    }

    p, li {
      word-break: break-word;
    }

    /* ================================================================= */
    /* 3. CONTENT BOXES & CARDS                                          */
    /* ================================================================= */
    .condition-type, .condition-block {
      background: var(--bg-light);
      border-left: 4px solid var(--secondary-color);
      padding: 15px;
      margin-bottom: 20px;
      border-radius: 0 6px 6px 0;
      width: 100%;
    }

    .condition-type h4 {
      margin-top: 0;
      color: var(--secondary-color);
      font-size: 1.1rem;
    }

    .medicine-info-block {
      background: #ffffff;
      border: 1px solid var(--border-color);
      border-left: 4px solid var(--warning-color);
      padding: 15px;
      margin-bottom: 15px;
      border-radius: 4px;
    }

    .medicine-name-title {
      font-weight: bold;
      color: var(--primary-color);
      font-size: 1.1rem;
      margin-bottom: 5px;
    }

    .highlight-box {
      background-color: var(--highlight-bg);
      border-left: 4px solid var(--secondary-color);
      padding: 15px 20px;
      margin: 20px 0;
      border-radius: 0 6px 6px 0;
    }

    .pro-box {
      background-color: #fff5f5;
      border-left: 4px solid var(--accent-color);
      padding: 15px 20px;
      margin: 20px 0;
      border-radius: 0 6px 6px 0;
      color: #742a2a;
    }

    /* ================================================================= */
    /* 4. COLLAPSIBLE FAQ STYLING                                        */
    /* ================================================================= */
    details.faq-item, details.faq-details {
      background: var(--bg-light);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      padding: 12px 16px;
      margin-bottom: 12px;
      transition: background-color 0.2s ease;
      width: 100%;
    }

    details.faq-item[open], details.faq-details[open] {
      background: var(--highlight-bg);
    }

    summary, summary.faq-summary {
      font-weight: 600;
      cursor: pointer;
      outline: none;
      color: var(--primary-color);
      font-size: 0.98rem;
    }

    .faq-answer, .faq-content {
      margin-top: 10px;
      color: var(--text-dark);
      font-size: 0.95rem;
    }

    /* ================================================================= */
    /* 5. CALL TO ACTION (CTA)                                          */
    /* ================================================================= */
    .cta-box {
      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
      color: white;
      padding: 25px;
      border-radius: 8px;
      text-align: center;
      margin-top: 30px;
    }

    .cta-box a {
      display: inline-block;
      background: #ffe082;
      color: var(--primary-color);
      padding: 12px 25px;
      text-decoration: none;
      font-weight: bold;
      border-radius: 5px;
      margin-top: 15px;
    }

    /* ================================================================= */
    /* 6. RESPONSIVE CLINICAL TABLES                                    */
    /* ================================================================= */
    .table-wrapper {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin: 20px 0 30px 0;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
      border-radius: 6px;
      border: 1px solid var(--border-color);
    }

    table.clinical-table {
      width: 100%;
      min-width: 600px;
      border-collapse: collapse;
      text-align: left;
      background-color: #fff;
      font-size: 0.9rem;
    }

    table.clinical-table th {
      background-color: var(--primary-color);
      color: #fff;
      padding: 10px 12px;
      font-weight: 600;
      text-transform: uppercase;
      font-size: 0.8rem;
      letter-spacing: 0.5px;
      white-space: nowrap;
    }

    table.clinical-table td {
      padding: 10px 12px;
      border-bottom: 1px solid var(--border-color);
      vertical-align: top;
    }

    table.clinical-table tbody tr:nth-child(even) {
      background-color: var(--bg-light);
    }

    /* ================================================================= */
    /* 7. MEDIA QUERIES                                                  */
    /* ================================================================= */
    @media screen and (max-width: 768px) {
      body {
        padding: 10px;
      }

      h1 { font-size: 1.4rem; }
      h2 { font-size: 1.25rem; }
      h3 { font-size: 1.1rem; }

      .condition-type, .condition-block {
        padding: 12px;
      }

      details.faq-item, details.faq-details {
        padding: 10px 12px;
      }

      table.clinical-table {
        font-size: 0.85rem;
      }

      table.clinical-table th, 
      table.clinical-table td {
        padding: 8px 10px;
      }
    }

    @media screen and (max-width: 480px) {
      h2 {
        font-size: 1.15rem;
      }

      .subtitle {
        font-size: 0.85rem;
      }

      summary, summary.faq-summary {
        font-size: 0.9rem;
      }

      .faq-answer, .faq-content {
        font-size: 0.85rem;
      }
    }