:root{
      --bg: #f8f9fa;
      --text: #343a40;
      --primary: #007bff;
      --primary2: #0056b3;
      --accent: #de4b49;
      --card: #ffffff;
      --muted: #6c757d;
      --shadow: 0 6px 18px rgba(16, 24, 40, 0.08);
      --shadow2: 0 10px 24px rgba(16, 24, 40, 0.12);
      --radius: 12px;
      --radius2: 10px;
      --border: rgba(0,0,0,0.08);
    }

    html, body {
      height: 100%;
    }

    body {
      margin: 0;
      padding: 0;
      background: var(--bg);
      color: var(--text);
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* 统一外层容器，设置最大宽度和居中 */
    .wrapper {
      max-width: 1200px;
      width: 100%;
      margin: 0 auto;
      padding: 18px 16px 28px;
      box-sizing: border-box;
    }

    /* 头部区域 */
    .header-container {
      text-align: center;
      margin: 10px auto 18px;
      width: 100%;
    }

    .header-card {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 18px 22px;
      background: var(--card);
      border: 1px solid var(--border);
      border-left: 6px solid var(--primary);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
    }

    .header-card img {
      flex: 0 0 auto;
      width: 64px;
      height: 64px;
      object-fit: contain;
    }

    .header-card h1 {
      font-size: clamp(16px, 2.2vw, 30px);
      font-weight: 800;
      margin: 0;
      line-height: 1.15;
      white-space: normal;
      overflow: visible;
      text-align: left;
    }

    .header-card h1 span:first-child {
      color: var(--accent);
      font-family: Arial, sans-serif;
    }
    .header-card h1 span:last-child {
      color: #000;
      font-weight: 800;
    }

    /* 导航：更干净、可读、支持 sticky（不改变结构/内容） */
    #myTab.nav-tabs.nav-justified {
      margin-top: 18px !important;
      background: rgba(255,255,255,0.8);
      backdrop-filter: blur(6px);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      border: 1px solid var(--border);
      overflow: hidden;
      position: sticky;
      top: 10px;
      z-index: 50;
    }

    #myTab.nav-tabs.nav-justified > li > a {
      font-size: 18px;
      font-weight: 800;
      padding: 12px 10px;
      border: none !important;
      border-radius: 0 !important;
      margin-right: 0;
      color: #1f2d3d;
    }

    #myTab.nav-tabs > li > a:hover {
      background: rgba(0, 123, 255, 0.08);
      color: var(--primary2);
    }

    #myTab.nav-tabs > li.active > a,
    #myTab.nav-tabs > li.active > a:hover,
    #myTab.nav-tabs > li.active > a:focus {
      background: linear-gradient(135deg, var(--primary), var(--primary2));
      color: #fff !important;
      border: none !important;
    }

    /* 面板统一：减少内联 style 依赖，但不改变内容 */
    .panel.panel-default.panel-elevated {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
      background: var(--card);
    }

    .panel-elevated .panel-heading {
      background: linear-gradient(135deg, var(--primary), var(--primary2));
      color: #fff;
      border: none;
      padding: 14px 16px;
    }

    .panel-elevated .panel-title {
      margin: 0;
      font-weight: 800;
      letter-spacing: 0.2px;
    }

    .panel-elevated .panel-body {
      padding: 22px;
    }

    /* 文本段落 */
    p {
      text-align: justify;
      font-size: 18px;
      line-height: 1.85;
      color: #1f2d3d;
    }

    /* 卡片（预测页面） */
    .card-custom {
      margin-top: 18px;
      box-shadow: var(--shadow);
      border: 1px solid var(--border);
      border-radius: var(--radius2);
      background: var(--card);
      overflow: hidden;
    }

    .card-custom .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: linear-gradient(135deg, var(--primary), var(--primary2));
      color: #fff;
      padding: 10px 14px;
    }

    .card-custom .card-header h3 {
      margin: 0;
      font-size: 20px;
      font-weight: 800;
    }

    /* Example / Clear 区域 */
    .card-header .expm {
      margin-left: auto;
      text-align: right;
      white-space: nowrap;
    }
    .card-header .expm a {
      margin-left: 18px;
      font-weight: 800;
      color: #ffc107;
      text-decoration: none;
      font-size: 15px;
      opacity: 0.95;
    }
    .card-header .expm a:hover {
      text-decoration: underline;
      opacity: 1;
    }

    /* Textarea 美化：保持功能不变 */
    textarea.form-control {
      font-size: 14px;
      line-height: 1.6;
      border-radius: 10px;
      border: 1px solid rgba(0,0,0,0.14);
      box-shadow: none;
      transition: box-shadow 0.2s ease, border-color 0.2s ease;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      resize: vertical;
      min-height: 160px;
    }
    textarea.form-control:focus {
      border-color: rgba(0,123,255,0.6);
      box-shadow: 0 0 0 3px rgba(0,123,255,0.12);
    }

    /* 图片容器 */
    .image-container {
      display: flex;
      justify-content: center;
      margin: 18px 0;
    }
    .image-container img {
      max-width: 100%;
      height: auto;
    }

    /* loader */
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .loader {
      border: 8px solid #f3f3f3;
      border-top: 8px solid #3498db;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      animation: spin 1.1s linear infinite;
      margin: 18px auto;
    }

    /* 引用块 */
    .citation {
      text-align: center;
      font-size: 16px;
      margin-top: 1px;
      margin-bottom: 0px;
      padding: 12px 12px;
      background: #ffffff;
      border: 1px solid rgba(27, 109, 133, 0.35);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
    .citation b, .citation strong { color: #1b6d85; }

    /* 按钮一致性 */
    .btn.btn-primary {
      border-radius: 10px;
      font-weight: 800;
      box-shadow: 0 6px 16px rgba(0,123,255,0.18);
      border: none;
    }
    .btn.btn-primary:active,
    .btn.btn-primary:focus {
      outline: none !important;
    }

    /* 小屏优化 */
    @media (max-width: 768px) {
      .header-card {
        padding: 14px 14px;
      }
      .header-card img {
        width: 54px;
        height: 54px;
      }
      #myTab.nav-tabs.nav-justified > li > a {
        font-size: 16px;
        padding: 10px 6px;
      }
      p {
        font-size: 16px;
      }
      .panel-elevated .panel-body {
        padding: 16px;
      }
      .card-custom .card-header h3 {
        font-size: 16px;
      }
      .card-header .expm a {
        margin-left: 12px;
        font-size: 14px;
      }
    }

    /* ===== Prediction Mode: checkbox + title + description ===== */

    .predict-option {
    border: 1px solid rgba(0,0,0,0.14);
    border-radius: 12px;
    padding: 10px 18px;
    margin-bottom: 10px;
    background: #ffffff;
    transition: all 0.2s ease;
    }

    .predict-option:hover {
    background: rgba(0,123,255,0.04);
    border-color: rgba(0,123,255,0.45);
    }

    .predict-label {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    margin: 0;
    }

    .predict-label input[type="checkbox"] {
    margin-top: 2px;
    margin-right: 16px;
    transform: scale(1.25);
    accent-color: #007bff;
    cursor: pointer;
    }

    .predict-text {
    flex: 1;
    }

    .predict-title {
    font-size: 16px;
    font-weight: 800;
    color: #1f2d3d;
    line-height: 1.35;
    margin-bottom: 4px;
    }

    .predict-desc {
    font-size: 13px;
    color: #5f6b7a;
    line-height: 1.6;
    }

    /* 选中态 */
    .predict-option.active,
    .predict-option:has(input[type="checkbox"]:checked) {
    border-color: #007bff;
    background: rgba(0,123,255,0.08);
    box-shadow: 0 0 0 2px rgba(0,123,255,0.12);
    }

    .predict-option:has(input[type="checkbox"]:checked) .predict-title {
    color: #0b5ed7;
    }

    .predict-option:has(input[type="checkbox"]:checked) .predict-desc {
    color: #3c4a5d;
    }

    /* 移动端 */
    @media (max-width: 768px) {
    .predict-title {
        font-size: 16px;
    }
    .predict-desc {
        font-size: 14px;
    }
    }

    /* ===== SMILES textarea placeholder style ===== */
    #area_1::placeholder {
      font-family: "sans-serif"; /* 比正文更“说明性” */
      font-size: 16px;
      font-weight: 500;
      color: #8a94a6;              /* 柔和灰蓝，学术感 */
      letter-spacing: 0.2px;
      opacity: 1;                  /* 防止 Safari 变淡 */
    }

    /* 兼容旧浏览器 */
    #area_1::-webkit-input-placeholder {
      font-family: "sans-serif";
      font-size: 16px;
      font-weight: 500;
      color: #8a94a6;
    }
    #area_1::-moz-placeholder {
      font-family: "sans-serif";
      font-size: 16px;
      font-weight: 500;
      color: #8a94a6;
    }

    /* ===== SMILES textarea content style ===== */
    textarea#area_1 {
      font-family: "sans-serif";
      font-weight: 500;
      font-size: 14px;            /* SMILES 最佳阅读尺寸 */
      line-height: 1.6;           /* 多行 SMILES 不拥挤 */
      color: #263238;             /* 深灰，比纯黑柔和 */
      letter-spacing: 0.2px;      /* 让 C=N、() 更清楚 */
      white-space: pre;        /* 🚨 禁止自动换行 */
      word-wrap: normal;       /* 禁止长字符串折行 */
      overflow-wrap: normal;   /* 同上（新标准） */
      overflow-x: auto;        /* 横向滚动条 */
    }

    /* 聚焦时稍微增强对比 */
    textarea#area_1:focus {
      color: #1b1f23;
    }

  


          /* ===== Home equal height layout ===== */
          .home-equal-row {
            display: flex;
          }

          .home-equal-row > [class*="col-"] {
            display: flex;
            flex-direction: column;
          }

          .home-left {
            flex: 1;
          }

          .home-right {
            flex: 0.8;
            display: flex;
            flex-direction: column;
            padding-top: 35px;   /* 👈 往下挪，减小则上移 */
          }

          .home-card {
            flex: 0.8;
            display: flex;
            flex-direction: column;
            background: #ffffff;
            border: 1px solid rgba(0,0,0,0.08);
            border-radius: 12px;
            padding: 16px 18px;
            box-shadow: 0 6px 18px rgba(16, 24, 40, 0.08);
          }

          .home-card + .home-card {
            margin-top: 16px;
          }

          .home-card h3 {
            margin-top: 0;
            color: #1b6d85;
            border-bottom: 2px solid #1b6d85;
            padding-bottom: 8px;
            font-weight: 600;
            letter-spacing: 0.5px;
          }

          .home-card ul {
            list-style: none;
            padding-left: 0;
            margin-top: 12px;
          }

          .home-card ul li {
            margin-bottom: 10px;
            font-size: 16px;
          }

          .home-card ul li i {
            margin-right: 6px;
          }

          /* 小屏恢复默认布局 */
          @media (max-width: 768px) {
            .home-equal-row {
              display: block;
            }
            .home-card + .home-card {
              margin-top: 20px;
            }
          }
          /* 右侧整体 */
          .home-right {
            flex: 1.0;
            display: flex;
            flex-direction: column;
            padding-top: 5px;
            padding-bottom: 50px;
          }

          /* 右侧卡片通用 */
          .home-card {
            display: flex;
            flex-direction: column;
            background: #ffffff;
            border: 1px solid rgba(0,0,0,0.08);
            border-radius: 12px;
            padding: 16px 18px;
            box-shadow: 0 6px 18px rgba(16, 24, 40, 0.08);
          }

          /* 👇 Highlights 稍微“吃高度” */
          .highlights-card {
            flex: 1.15;
          }

          /* 👇 Contact 明显变矮（关键） */
          .contact-card {
            flex: 0.85;
          }

          /* 👇 Contact 内部再紧凑一点 */
          .contact-card address {
            font-size: 15px;
            line-height: 1.45;
          }

          /* 👇 Contact 卡片 padding 再压缩 */
          .contact-card {
            padding-top: 15px;
            padding-bottom: 0px;
          }
            /* ===== Home 正文排版优化 ===== */
            .home-left p {
              font-family: "Helvetica Neue", Arial, system-ui, -apple-system, BlinkMacSystemFont;
              font-size: 18px;        /* 比 18px 更学术 */
              line-height: 1.8;         /* Nature / NAR 常用 */
              color: #2f2f2f;           /* 深灰，比纯黑柔和 */
              margin-bottom: 10px;
              text-align: justify;      /* 👈 学术正文感 */
            }

            .home-left strong {
              font-weight: 600;         /* 不要太粗 */
              color: #1b6d85;           /* 与标题统一 */
            }
            /* 卡片标题 */
            .home-card h3 {
              font-family: "Helvetica Neue", Arial, system-ui, -apple-system, BlinkMacSystemFont;
              font-size: 22px;          /* 比正文略小 */
              font-weight: 600;
              letter-spacing: 0.4px;
              color: #1b6d85;
            }

            /* Latest Highlights 列表 */
            .highlights-card ul li {
              font-family: "Helvetica Neue", Arial, system-ui;
              font-size: 17px;        /* 紧凑信息 */
              line-height: 1.6;
              color: #2f2f2f;
              margin-bottom: 8px;
            }

            /* 列表图标对齐优化 */
            .highlights-card ul li i {
              font-size: 17px;
              vertical-align: middle;
            }

            /* Contact Us 正文 */
            .contact-card address {
              font-family: "Helvetica Neue", Arial, system-ui;
              font-size: 17px;        /* 比 highlights 再小一点 */
              line-height: 1.55;
              color: #444;
            }

            /* 联系人姓名 */
            .contact-card strong {
              font-weight: 600;
              color: #1b6d85;
            }

            /* 邮箱样式 */
            .contact-card a {
              font-size: 17px;
              color: #de4b49;
              font-weight: 600;
              text-decoration: none;
            }

            .contact-card a:hover {
              text-decoration: underline;
            }
            /* Latest Highlights 文本样式 */
            .highlights-card ul li {
              font-family: "Arial", system-ui, -apple-system, BlinkMacSystemFont;
              font-size: 17px;
              font-weight: 500;        /* 👈 中等偏轻，不抢正文 */
              line-height: 1.6;
              color: #2f2f2f;
              letter-spacing: 0.2px;
            }

            /* 图标微调，和文字更协调 */
            .highlights-card ul li i {
              font-size: 15px;
              margin-right: 6px;
              vertical-align: middle;}
            /* ===== Reduce padding for Latest Highlights ===== */
            .highlights-card {
              padding-bottom: 10px;   /* 原来是 16–18px，这里明显收紧 */
            }

            .highlights-card ul {
              margin-bottom: 0;       /* 去掉列表自带的下边距 */
            }

            .highlights-card ul li:last-child {
              margin-bottom: 0;       /* 最后一条不再留空 */
            }
              /* ===== Reduce padding for Contact Us ===== */
              .contact-card {
                padding-bottom: 10px;   /* 默认 16–18px → 收紧 */
              }

              .contact-card address {
                margin-bottom: 0;       /* 去掉 address 自带的底部空隙 */
              }

        

/* Original inline declarations, externalized without relaxing CSP. */
.original-inline-1:not(#original-unused-a):not(#original-unused-b) { margin-top:30px; }
.original-inline-2:not(#original-unused-a):not(#original-unused-b) { margin-top: 20px; }
.original-inline-3:not(#original-unused-a):not(#original-unused-b) { text-align: center; font-size: 20px; }
.original-inline-4:not(#original-unused-a):not(#original-unused-b) { font-size: 18px; line-height: 1.85; }
.original-inline-5:not(#original-unused-a):not(#original-unused-b) { color: #1b6d85; border-bottom: 2px solid #1b6d85; padding-bottom: 8px; font-weight: 600; letter-spacing: 0.5px; }
.original-inline-6:not(#original-unused-a):not(#original-unused-b) { color:#28a745; }
.original-inline-7:not(#original-unused-a):not(#original-unused-b) { font-style: normal; font-size:16px; line-height:1.6; }
.original-inline-8:not(#original-unused-a):not(#original-unused-b) { color:#de4b49; }
.original-inline-9:not(#original-unused-a):not(#original-unused-b) { margin-top: 1px; }
.original-inline-10:not(#original-unused-a):not(#original-unused-b) { margin-top: 30px; }
.original-inline-11:not(#original-unused-a):not(#original-unused-b) { font-size:18px;text-align:center;color:#555;margin-bottom:12px; }
.original-inline-12:not(#original-unused-a):not(#original-unused-b) { margin-bottom: 22px; }
.original-inline-13:not(#original-unused-a):not(#original-unused-b) { padding:16px; }
.original-inline-14:not(#original-unused-a):not(#original-unused-b) { margin-bottom:14px; }
.original-inline-15:not(#original-unused-a):not(#original-unused-b) { color:#c0392b;font-weight:600; }
.original-inline-16:not(#original-unused-a):not(#original-unused-b) { margin-top: 28px; }
.original-inline-17:not(#original-unused-a):not(#original-unused-b) { width:180px;font-size:18px; }
.original-inline-18:not(#original-unused-a):not(#original-unused-b) { font-weight: bold; }
.original-inline-19:not(#original-unused-a):not(#original-unused-b) { padding: 22px; }
.original-inline-20:not(#original-unused-a):not(#original-unused-b) { margin-bottom: 20px; }
.original-inline-21:not(#original-unused-a):not(#original-unused-b) { font-size:18px; line-height:1.8; }
.original-inline-22:not(#original-unused-a):not(#original-unused-b) { margin-bottom:35px; }
.original-inline-23:not(#original-unused-a):not(#original-unused-b) { margin-bottom:40px; }
.original-inline-24:not(#original-unused-a):not(#original-unused-b) { margin:20px 0; }
.original-inline-25:not(#original-unused-a):not(#original-unused-b) { margin-bottom:45px; }
.original-inline-26:not(#original-unused-a):not(#original-unused-b) { background:#f1f6ff; border-left:5px solid #007bff; padding:14px 18px; border-radius:8px; margin:18px 0; font-size:17px; }
.original-inline-27:not(#original-unused-a):not(#original-unused-b) { margin:22px 0; }
.original-inline-28:not(#original-unused-a):not(#original-unused-b) { border:2px solid #28a745;border-radius:10px; }
.original-inline-29:not(#original-unused-a):not(#original-unused-b) { margin-top:25px; }
.original-inline-30:not(#original-unused-a):not(#original-unused-b) { margin-top:18px; }
.original-inline-31:not(#original-unused-a):not(#original-unused-b) { border:2px solid #28a745;border-radius:8px; }
.original-inline-32:not(#original-unused-a):not(#original-unused-b) { border:2px solid #ffc107;border-radius:8px; }
.original-inline-33:not(#original-unused-a):not(#original-unused-b) { border:2px solid #dc3545;border-radius:8px; }
.original-inline-34:not(#original-unused-a):not(#original-unused-b) { margin-bottom:24px; }
.original-inline-35:not(#original-unused-a):not(#original-unused-b) { margin-bottom:10px; }
.original-inline-36:not(#original-unused-a):not(#original-unused-b) { background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%); border:1px solid #e3e6ea; padding:18px 18px 14px; border-radius:12px; margin-top:12px; box-shadow:0 6px 18px rgba(16,24,40,0.06); }
.original-inline-37:not(#original-unused-a):not(#original-unused-b) { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.original-inline-38:not(#original-unused-a):not(#original-unused-b) { display:inline-flex; align-items:center; justify-content:center; width:26px;height:26px; border-radius:8px; background:rgba(0,123,255,0.10); color:#0b5ed7; font-weight:700; }
.original-inline-39:not(#original-unused-a):not(#original-unused-b) { font-size:16px;font-weight:700;color:#1f2d3d; }
.original-inline-40:not(#original-unused-a):not(#original-unused-b) { padding-left:22px; list-style-type:disc; margin:0; }
.original-inline-41:not(#original-unused-a):not(#original-unused-b) { margin-bottom:10px; color:#2f2f2f; line-height:1.65; font-size:15px; }
.original-inline-42:not(#original-unused-a):not(#original-unused-b) { border:0;border-top:1px solid #eef1f4;margin:12px 0; }
.original-inline-43:not(#original-unused-a):not(#original-unused-b) { display:inline-flex; align-items:center; justify-content:center; width:26px;height:26px; border-radius:8px; background:rgba(40,167,69,0.10); color:#218838; font-weight:700; }
.original-inline-44:not(#original-unused-a):not(#original-unused-b) { margin-bottom:6px; }
.original-inline-45:not(#original-unused-a):not(#original-unused-b) { display:inline-flex; align-items:center; justify-content:center; width:26px;height:26px; border-radius:8px; background:rgba(222,75,73,0.10); color:#de4b49; font-weight:700; }
.original-inline-46:not(#original-unused-a):not(#original-unused-b) { margin-top:10px; font-size:13px; line-height:1.55; color:#6c757d; }
[hidden] { display:none !important; }

/* Nonvisual form/modal compatibility; original layout and declarations above. */
#my_modal[aria-hidden="false"] { display:block; opacity:1; }
.original-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.original-example-link { display:contents; }
/* Split the archived selector list for browsers without :has support. */
.predict-option.active { border-color:#007bff; background:rgba(0,123,255,.08); box-shadow:0 0 0 2px rgba(0,123,255,.12); }
@media(max-width:768px) { .header-card { min-width:0; } .header-card h1 { overflow-wrap:anywhere; } }