body {
      font-family: smartquotes, Arimo, sans-serif, Helvetica;
      background-color: #f8f9fa;
      line-height: 1.6;
      color: #2c3e50;
    }

    a {
      color: #0056b3;
      /* Dark blue for good contrast */
    }

    a:hover,
    a:focus {
      color: #003d7a;
      /* Even darker blue on hover/focus */
      text-decoration: underline;
      /* Optional: underline on hover/focus */
    }

    /* Skip link for keyboard accessibility */
    .skip-link {
      position: absolute;
      top: -100%;
      left: 0;
      background: #7b4eb1;
      color: #fff;
      padding: 8px 16px;
      z-index: 9999;
      border-radius: 0 0 5px 0;
      font-weight: bold;
      text-decoration: none;
      transition: top 0.2s ease;
    }

    .skip-link:focus {
      top: 0;
      color: #fff;
    }

    .sidebar {
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 100;
      background: linear-gradient(145deg, #7b4eb1, #7b57a7);
      width: 320px;
      box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      overflow-y: auto;
      padding-bottom: 20px;
    }

    .sidebar h2,
    .sidebar h2 a {
      white-space: nowrap;
      display: inline;
    }

    .sidebar .nav-link {
      color: rgba(255, 255, 255, 0.9);
      padding: 7px 15px;
      border-radius: 5px;
      margin: 2px 0;
      transition: all 0.2s ease;
      font-weight: bold;
      font-size: 14px;
    }

    .sidebar .nav-link:hover,
    .sidebar .nav-link:focus {
      background: rgba(255, 255, 255, 0.15);
      transform: translateX(5px);
    }

    .sidebar .nav-link.active {
      background: rgba(255, 255, 255, 0.2);
      color: #ffe600;
    }

    .main-content {
      font-size: 16px;
      margin-left: 320px;
      padding: 30px 8% 20px 5%;
      background-color: white;
      min-height: 100vh;
      box-shadow: -5px 0 15px rgba(0, 0, 0, 0.05);
    }

    .section-card {
      background: rgb(250, 250, 250);
      border-radius: 10px;
      padding: 22px;
      margin-bottom: 25px;
      box-shadow: 0 2px 15px rgba(255, 204, 1, 0.05);
      border-left: 4px solid transparent;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .section-card h2,
    .section-card h3,
    .section-card h4 {
      font-size: 20px;
    }

    .section-card:hover {
      border-left-color: #7b4eb1;
      box-shadow: 0 4px 20px rgba(123, 78, 177, 0.08);
    }

    .contact-banner {
      background: linear-gradient(145deg, #7b4eb1, #8561b1);
      color: white;
      padding: 24px;
      border-radius: 10px;
      margin-bottom: 30px;
      box-shadow: 0 4px 15px rgba(123, 78, 177, 0.25);
    }

    .contact-banner h1 {
      font-size: 24px;
    }

    .contact-banner p {
      font-size: 15px;
      line-height: 1.6;
    }

    .back-to-top {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: #7b4eb1;
      color: white;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      opacity: 0;
      transition: all 0.3s ease;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      border: none;
      pointer-events: none;
    }

    .back-to-top.visible {
      opacity: 1;
      pointer-events: auto;
    }

    .back-to-top:hover {
      background: #6a3fa0;
      transform: translateY(-2px);
    }

    .th-20 {
      width: 20%;
    }

    .th-10 {
      width: 10%;
    }

    /* Table improvements */
    .table th {
      font-weight: 600;
      color: #2c3e50;
    }

    .table td {
      vertical-align: top;
    }

    /* Ensure first column width is respected (min-width to prevent shrinkage) */
    .table th.th-20,
    .table td:first-child {
      min-width: 180px;
      white-space: nowrap;
      word-break: keep-all;
      overflow-wrap: normal;
    }

    #advs_key_s .table {
      table-layout: fixed;
    }

    #advs_key_s .table th.th-20,
    #advs_key_s .table td:first-child {
      width: 180px;
    }

    #advs_key_s .table th,
    #advs_key_s .table td {
      overflow-wrap: break-word;
      word-break: normal;
    }

    /* Card header refinement */
    .card-header.bg-warning {
      background: linear-gradient(135deg, #f0c020, #e6b800) !important;
      border-bottom: none;
    }

    .card-header h5 {
      font-size: 15px;
    }

    /* mark/highlight tag */
    mark {
      background-color: #fff3cd;
      padding: 1px 4px;
      border-radius: 3px;
    }

    @media (max-width: 900px) {
      .sidebar {
        transform: translateX(-100%);
        width: 100%;
      }

      .sidebar.active {
        transform: translateX(0);
      }

      .main-content {
        margin-left: 0;
        padding: 20px 16px;
      }

      .section-card {
        padding: 16px;
      }

      .contact-banner h1 {
        font-size: 20px;
      }

      .toggle-sidebar {
        display: block !important;
        height: 44px;
      }

      .responsive-wrapper {
        margin: 10px 0 !important;
      }

      .responsive-wrapper.m-5 {
        margin: 10px 0 !important;
      }
    }

    @media (max-width: 576px) {
      .main-content {
        font-size: 15px;
      }

      .section-card h2,
      .section-card h3,
      .section-card h4 {
        font-size: 18px;
      }

      .contact-banner {
        padding: 16px;
      }
    }

    .toggle-sidebar {
      display: none;
      position: fixed;
      top: 20px;
      left: auto;
      right: 20px;
      z-index: 101;
      background: #ffffff;
      border: 1px solid #7b4eb1;
      color: #7b4eb1;
      padding: 10px 14px;
      border-radius: 5px;
      cursor: pointer;
      font-weight: bold;
      min-width: 44px;
      min-height: 44px;
    }

    .toggle-sidebar:hover {
      background: #7b4eb1;
      color: #fff;
    }

    h2 {
      color: #2c3e50;
      border-bottom: 2px solid #7b4eb1;
      padding-bottom: 10px;
      margin-bottom: 20px;
    }

    h3 {
      color: #34495e;
      margin-top: 25px;
    }

    .fas.fa-chevron-down {
      transition: transform 0.3s ease-in-out;
    }

    .text-white a {
      text-decoration: none;
    }

    .text-white a:hover {
      text-decoration: none;
    }

    /* Language segmented control */
    .lang-switch {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 0;
      border-radius: 8px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.25);
      padding: 0;
      margin: 16px 0 12px;
      user-select: none;
      width: 100%;
    }

    .lang-btn {
      border: none;
      background: transparent;
      color: rgba(255, 255, 255, 0.7);
      padding: 6px 0;
      font-size: 12px;
      font-weight: 600;
      font-family: Arial, sans-serif;
      letter-spacing: 0.5px;
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
      min-height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .lang-btn:not(:last-child) {
      border-right: 1px solid rgba(255, 255, 255, 0.15);
    }

    .lang-btn:hover {
      background: rgba(255, 255, 255, 0.08);
      color: #fff;
    }

    .lang-btn:focus-visible {
      outline: 2px solid #ffe600;
      outline-offset: -2px;
      z-index: 1;
    }

    .lang-btn.active {
      background: #ffe600;
      color: #2c3e50;
      font-weight: 700;
    }

    .lang-btn.active:hover {
      background: #ffd600;
      color: #2c3e50;
    }

    .responsive-wrapper {
      position: relative;
      cursor: pointer;
    }

    #viewer-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.9);
      z-index: 9999;
      display: none;
    }

    #openseadragon-viewer {
      width: 100%;
      height: 100%;
    }

    .viewer-close {
      position: absolute;
      top: 20px;
      right: 20px;
      color: white;
      font-size: 24px;
      cursor: pointer;
      z-index: 10000;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
    }

    .viewer-close:hover {
      background: rgba(0, 0, 0, 0.8);
    }

    /* Sidebar overlay for mobile */
    .sidebar-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4);
      z-index: 99;
    }

    .sidebar-overlay.active {
      display: block;
    }

    /* Sub-nav indentation refinement */
    .sidebar .ms-4 .nav-link {
      font-weight: 500;
      font-size: 13px;
      padding: 5px 15px;
    }

    /* Focus-visible for keyboard nav */
    .nav-link:focus-visible,
    .toggle-sidebar:focus-visible,
    .back-to-top:focus-visible {
      outline: 2px solid #ffe600;
      outline-offset: 2px;
    }

    /* Smooth scroll for anchor links */
    html {
      scroll-behavior: smooth;
    }

    /* Prevent layout shift for images */
    .responsive-image {
      max-width: 100%;
      height: auto;
    }

    /* Update info section */
    .update-info {
      text-align: right;
    }

    .update-info .text-muted {
      font-size: 13px;
      margin: 0;
    }

    /* Input inline elements styling */
    .section-card input[type="text"],
    .section-card input[type="checkbox"],
    .section-card input[type="radio"] {
      cursor: pointer;
    }

    [data-lang] {
      display: none !important;
    }

    html:not([data-lang-current]) [data-lang="zh-TW"] {
      display: block !important;
    }

    html:not([data-lang-current]) span[data-lang="zh-TW"] {
      display: inline !important;
    }

    html:not([data-lang-current]) a[data-lang="zh-TW"]:not(.nav-link) {
      display: inline !important;
    }

    html:not([data-lang-current]) .sidebar h2 span[data-lang="zh-TW"] {
      display: inline !important;
    }

    html:not([data-lang-current]) .sidebar a.nav-link.d-flex[data-lang="zh-TW"] {
      display: flex !important;
    }

    html[data-lang-current="en"] [data-lang]:not([data-lang="en"]) {
      display: none !important;
    }

    html[data-lang-current="en"] [data-lang="en"] {
      display: block !important;
    }

    html[data-lang-current="en"] span[data-lang="en"] {
      display: inline !important;
    }

    html[data-lang-current="en"] a[data-lang="en"]:not(.nav-link) {
      display: inline !important;
    }

    html[data-lang-current="en"] .sidebar h2 span[data-lang="en"] {
      display: inline !important;
    }

    html[data-lang-current="en"] .sidebar a.nav-link.d-flex[data-lang="en"] {
      display: flex !important;
    }

    html[data-lang-current="zh-TW"] [data-lang]:not([data-lang="zh-TW"]) {
      display: none !important;
    }

    html[data-lang-current="zh-TW"] [data-lang="zh-TW"] {
      display: block !important;
    }

    html[data-lang-current="zh-TW"] span[data-lang="zh-TW"] {
      display: inline !important;
    }

    html[data-lang-current="zh-TW"] a[data-lang="zh-TW"]:not(.nav-link) {
      display: inline !important;
    }

    html[data-lang-current="zh-TW"] .sidebar h2 span[data-lang="zh-TW"] {
      display: inline !important;
    }

    html[data-lang-current="zh-TW"] .sidebar a.nav-link.d-flex[data-lang="zh-TW"] {
      display: flex !important;
    }

    html[data-lang-current="zh-CN"] [data-lang]:not([data-lang="zh-CN"]) {
      display: none !important;
    }

    html[data-lang-current="zh-CN"] [data-lang="zh-CN"] {
      display: block !important;
    }

    html[data-lang-current="zh-CN"] span[data-lang="zh-CN"] {
      display: inline !important;
    }

    html[data-lang-current="zh-CN"] a[data-lang="zh-CN"]:not(.nav-link) {
      display: inline !important;
    }

    html[data-lang-current="zh-CN"] .sidebar h2 span[data-lang="zh-CN"] {
      display: inline !important;
    }

    html[data-lang-current="zh-CN"] .sidebar a.nav-link.d-flex[data-lang="zh-CN"] {
      display: flex !important;
    }

    /* Chinese font support */
    [lang="zh-TW"],
    [lang="zh-CN"] {
      font-family: "Microsoft JhengHei", "Microsoft YaHei", "PingFang TC", "Noto Sans TC", "Noto Sans SC", Arimo, sans-serif;
    }