/* --- Original & App Styles --- */
      .notTop {
        margin-top: 1em;
      }

      dt.newGSCN {
        font-weight: bold;
      }

      body {
        background-color: #f4f4f9;
        color: #333;
      }

      .container {
        
        margin: 0 auto;
        background: white;
        padding: 20px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
      }

      h1 {
        margin-top: 0;
        color: #2c3e50;
      }

      .controls {
        display: flex;
        gap: 16px;
        width: 100%;
        /* FIXES FOR STICKY SEARCH ROW */
        position: sticky;
        top: 0;
        background-color: white;
        /* Matches container background to block scrolling rows */
        z-index: 11;
        /* Sits safely above the table headers */
        margin-bottom: 0;
        /* Swapped margin for padding to keep background solid */
        padding-bottom: 20px;
      }

      .controls select {
        flex-shrink: 0;
      }

      input[type="text"] {
        width: 100%;
        padding: 12px;
        box-sizing: border-box;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 16px;
      }

      input[type="text"]:focus {
        border-color: #3498db;
        outline: none;
      }

      table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
      }

      th,
      td {
        text-align: left;
        padding: 12px;
        border-bottom: 1px solid #eee;
        vertical-align: top;
      }

      th {
        background-color: #0c1d55;
        color: white;
        position: sticky;
        top: 65px;
        z-index: 10;
      }

      tr:hover {
        background-color: #f1f1f1;
      }

      .loading,
      .error {
        text-align: center;
        padding: 20px;
        font-size: 1.2em;
      }

      .error {
        color: #e74c3c;
      }

      .no-results {
        text-align: center;
        padding: 20px;
        color: #7f8c8d;
      }

      /* --- STYLES FOR DIAGRAMS --- */
      .diagram-wrapper {
        margin-top: 10px;
        border-top: 1px dashed #ccc;
        padding-top: 10px;
      }

      .btn-diagram {
        background-color: white;
        color: #002c6c;
        border: 1px solid #002c6c;
        padding: 5px 10px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 0.85rem;
        font-weight: bold;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        gap: 5px;
      }

      .btn-diagram:hover {
        background-color: #002c6c;
        color: white;
      }

      .diagram-container {
        margin-top: 10px;
        background-color: #fafafa;
        border: 1px solid #ddd;
        padding: 15px;
        border-radius: 4px;
        text-align: center;
        animation: fadeIn 0.3s ease-in-out;
        /* Force the container to obey the td cell boundaries */
        overflow: hidden;
      }

      .diagram-container img {
        max-width: 100%;
        height: auto;
        max-height: 400px;
        border: 1px solid #eee;
        background: white;
      }

      .diagram-container object {
        width: 100%;
        /* Forces the SVG container to fill the column width */
        max-width: 100%;
        /* Ensures it never overflows the definition cell */
        height: auto;
        /* Maintains the aspect ratio of the SVG */
        max-height: 500px;
        /* Keeps your preferred maximum height limit */
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(-5px);
        }

        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* --- STYLES FOR RELATED TERMS ROWS --- */
      .related-term-row {
        background-color: #FFFFCC !important;
        /* Forces the soft yellow background */
        font-size: 0.95em;
      }

      /* Ensure the hover effect doesn't wash out the yellow background color */
      tr.related-term-row:hover {
        background-color: #fdfdba !important;
      }

      .related-indent {
        padding-left: 24px !important;
        position: relative;
      }

      /* --- STYLES FOR PERMALINKS --- */
      .term-container {
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .btn-permalink {
        color: #999;
        display: inline-flex;
        align-items: center;
        transition: color 0.2s ease;
        text-decoration: none;
      }

      .btn-permalink:hover {
        color: #002c6c;
      }

      .permalink-banner {
        background-color: #e8f4fd;
        border: 1px solid #b3d7f7;
        color: #1d6fa5;
        padding: 10px 15px;
        margin-bottom: 15px;
        border-radius: 4px;
        font-size: 0.95rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .btn-clear-link {
        background: #1d6fa5;
        color: white;
        border: none;
        padding: 4px 10px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 0.85rem;
        font-weight: bold;
      }

      .btn-clear-link:hover {
        background: #144f77;
      }

      /* --- STYLES FOR SEARCH CLEAR BUTTON --- */
      .search-wrapper {
        flex: 1;
        /* Replaces the old flex rule on the input tag itself */
        position: relative;
        /* Allows absolute positioning of the clear button inside */
      }

      /* Force extra right padding on the text input so typing doesn't clip behind the 'X' */
      .search-wrapper input[type="text"] {
        padding-right: 40px !important;
      }

      .btn-clear-search {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: #999;
        cursor: pointer;
        padding: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: color 0.2s ease;
      }

      .btn-clear-search:hover {
        color: #e74c3c;
        /* Turns a subtle destructive red on hover */
      }