:root {
            /* 定义主要的颜色变量，便于在其他地方使用 */
            --nav-active-color: #f66a0a; /* 橙色 */
            --nav-text-color: #586069;
            --nav-active-text: #24292e;
            --nav-border-color: #e1e4e8;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
            background-color: #ffffff;
            margin: 0; /* 移除 body 默认 margin */
            color: var(--nav-active-text);
        }
        
        header {
            padding: 20px 40px;
            border-bottom: 1px solid var(--nav-border-color);
        }

        .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 40px; /* 模拟内容区域的留白 */
        }

        /* --- 导航条样式 --- */
        .nav-container {
            border-bottom: 1px solid var(--nav-border-color);
            margin-bottom: 20px;
            padding-left: 0; /* 导航栏左侧留白应该由 .container 控制 */
        }

        .nav-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
        }

        .nav-item {
            position: relative; 
            margin-right: 15px;
        }

        .nav-link {
            display: block; /* 使用 block 以占据整个 li 空间 */
            padding: 10px 10px 8px;
            color: var(--nav-text-color); 
            text-decoration: none; 
            font-weight: 500; 
            font-size: 14px;
            border-bottom: 2px solid transparent; 
            transition: border-color 0.1s ease-in-out, color 0.1s ease-in-out;
            cursor: pointer;
        }

        /* 选中状态（橙色下划线） */
        .nav-link.active {
            color: var(--nav-active-text); 
            border-bottom-color: var(--nav-active-color); 
        }

        /* 鼠标悬停/按下效果 */
        .nav-link:hover:not(.active) {
            color: var(--nav-active-text); 
            border-bottom-color: #eaecef; /* 模拟被按下的浅灰底色 */
        }

        .nav-link:active:not(.active) {
            border-bottom-color: #cacdd0; /* 模拟更深的按下效果 */
            color: var(--nav-active-text);
        }

/* Tags 悬停菜单样式 */
.tags-dropdown-container {
    position: relative;
}
        
.tags-dropdown-content {
    display: none; 
    position: absolute;
    top: 100%; 
    left: 0;
    z-index: 10;
    min-width: 180px;
    background-color: white;
    border: 1px solid var(--nav-border-color);
    border-radius: 6px;
    box-shadow: 0 3px 12px rgba(27,31,35,.15);
    padding: 4px 0;
    margin-top: 0; /* ❗ 消除顶部间隙 */
    max-height: 300px; 
    overflow-y: auto;
}

.tags-dropdown-container:hover .tags-dropdown-content {
    display: block; /* 悬停时显示 */
}

        /* 次级菜单中的标签样式 */
        .tags-dropdown-content .tag-item {
            display: block; 
            width: 100%;
            padding: 4px 8px 4px 16px;
            margin: 0;
            border-radius: 0;
            box-shadow: none;
            background-color: white;
            font-size: 14px;
            font-weight: normal;
            transition: background-color 0.1s;
            line-height: 20px;
            color: var(--nav-active-text);
            cursor: pointer;
        }

        .tags-dropdown-content .tag-item:hover {
            background-color: #f0f3f6; /* 浅灰悬停 */
        }

        .tags-dropdown-content .tag-item.active {
            background-color: var(--nav-active-color);
            color: white;
            font-weight: 600;
        }

/* --- 计数徽章样式 --- */
.nav-count-badge {
    display: inline-block;
    padding: 0 6px;
    margin-left: 5px;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    background-color: #eaecef; /* 浅灰背景 */
    color: var(--nav-text-color);
    border-radius: 2em; /* 圆角徽章 */
}
  
.nav-link svg {
    width: 16px; /* 统一尺寸 */
    height: 16px;
    vertical-align: text-bottom; /* 与文本对齐 */
    margin-right: 5px; /* 与文本的间距 */
    fill: currentColor; /* 继承父元素（.nav-link）的文字颜色 */
}

/* --- 分段按钮容器样式 --- */
.segmented-control-container {
    display: inline-flex; /* 让子项水平排列，并收缩到内容宽度 */
    border: 1px solid var(--nav-border-color); /* 统一边框 */
    border-radius: 6px; /* 统一圆角 */
    overflow: hidden; /* 确保子项不会溢出圆角 */
    margin-bottom: 20px; /* 与下方内容的间距 */
    background-color: #f6f8fa; /* 默认背景色 */
}

/* --- 分段按钮项样式 --- */
.segmented-control-item {
    display: flex; /* 让图标和文本水平居中 */
    align-items: center;
    justify-content: center;
    padding: 8px 16px; /* 内边距 */
    color: var(--nav-active-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
    background-color: transparent; /* 默认透明 */
    /* 移除所有单独的边框和圆角，由父容器处理 */
    border: none;
    border-radius: 0;
}

/* 选中状态 */
.segmented-control-item.selected {
    background-color: #0969da; /* 蓝色背景 */
    color: white; /* 白色文字 */
    font-weight: 600;
}

/* 悬停效果 (未选中项) */
.segmented-control-item:hover:not(.selected) {
    background-color: #eaf1f9; /* 浅蓝悬停 */
    color: var(--nav-active-text);
}

/* 第一个项的左侧圆角 */
.segmented-control-item:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

/* 最后一个项的右侧圆角 */
.segmented-control-item:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

/* 内部分隔线 */
.segmented-control-item:not(:last-child) {
    border-right: 1px solid var(--nav-border-color); /* 模拟分隔线 */
}


        .form-group {
            display: flex; /* 启用 Flexbox */
            margin-bottom: 20px;
            align-items: flex-start; /* 标签和文本框顶部对齐 */
        }
        
        .form-label {
            width: 150px; /* 固定标签宽度 */
            padding-top: 8px; /* 调整与文本框顶部的对齐 */
            padding-right: 15px;
            font-weight: 500;
            color: #24292e;
            text-align: right;
            font-size: 14px;
        }

        .form-control-container {
            flex-grow: 1; /* 文本框容器占据剩余空间 */
        }


.large-textarea {
    width: 100%;
    min-height: 200px; 
    padding: 8px;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box; 
    resize: vertical;
    font-family: monospace;
    border: 1px solid #d0d7de; /* GitHub 风格边框 */
    border-radius: 6px; 
    
    /* 移除为文本框 2 做的 border: none; 覆盖 */
    /* 文本框 2 将由更具体的 CSS 规则覆盖掉这些边框 */
}

/* 确保文本框 1 聚焦时有样式 */
.large-textarea:focus {
    border-color: #0969da; 
    outline: none;
    box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.3); 
}

/* --- 复制容器内的样式覆盖 --- */
/* 这部分确保文本框 2 位于 .copy-container 内部时，边框被移除，由容器提供 */
.copy-container .large-textarea {
    border: none !important; /* 强制移除边框，防止双重边框 */
    border-radius: 0 !important;
}

/* 重新定义文本框 2 聚焦时的样式，移到容器上 */
.copy-container:focus-within {
    border-color: #0969da;
    box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.3);
}

/* --- GitHub 风格按钮样式 --- */
.github-style-button {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: white; /* 默认蓝色按钮的文字是白色 */
    background-color: #2da44e; /* 绿色主按钮 (Action button) */
    border: 1px solid rgba(27, 31, 35, 0.15);
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.1s cubic-bezier(0.3, 0, 0.5, 1);
}

.github-style-button:hover {
    background-color: #2c974b; /* 悬停时颜色加深 */
    border-color: rgba(27, 31, 35, 0.15);
}

.github-style-button:active {
    background-color: #22863a; /* 按下时更深 */
}

/* 按钮内部 SVG 样式 */
.github-style-button svg {
    width: 16px;
    height: 16px;
    fill: currentColor; /* 继承白色 */
}

/* --- 复制按钮样式 (类似 GitHub 代码块) --- */

.copy-container {
    position: relative; /* 确保复制按钮可以相对于此容器定位 */
    width: 100%;
    /* 移除 .large-textarea 上的任何边框和圆角，由 .copy-container 负责 */
    border: 1px solid #d0d7de;
    border-radius: 6px;
    overflow: hidden;
}


/* 重新定义聚焦样式到容器上 */
.copy-container:focus-within {
    border-color: #0969da;
    box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.3);
}

/* 复制按钮本体 */
.copy-button {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 3px 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    color: #57606a; /* 默认灰色文字 */
    background-color: #f6f8fa; /* 默认浅灰背景 */
    border: 1px solid rgba(27, 31, 35, 0.15);
    border-radius: 6px;
    cursor: pointer;
    z-index: 10; /* 确保按钮在文本框之上 */
    opacity: 0; /* 默认隐藏 */
    transition: opacity 0.2s, background-color 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 容器悬停时显示按钮 */
.copy-container:hover .copy-button {
    opacity: 1;
}

/* 复制按钮悬停和活动状态 */
.copy-button:hover {
    background-color: #eaecef;
    color: #24292e;
}

.copy-button svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    /* 默认图标样式（复制状态时会切换） */
}

/* 复制成功后的状态显示 */
.copy-button.copied {
    background-color: #2da44e; /* 绿色 */
    border-color: #2da44e;
    color: white;
}

.copy-button.copied .copy-status::before {
    content: "已复制!";
}

.copy-button.copied .copy-status {
    /* 隐藏原有的“复制”文本 */
    font-size: 0;
}

.large-textarea[disabled] {
    opacity: 1; 
    background-color: white; 
    color: #24292e; 
    cursor: default; 
}
/* --- 页脚样式 --- */
.footer-note {
    margin-top: 40px; /* 顶部留出足够的空间与内容区隔开 */
    padding: 20px 0;
    border-top: 1px solid #e1e4e8; /* 顶部细灰线 */
    background-color: #f6f8fa; /* 浅灰背景色 */
    color: #586069; /* 较浅的文字颜色 */
    font-size: 13px;
    text-align: center;
}

.footer-note p {
    margin: 5px 0;
    line-height: 1.6;
}

/* 确保页脚中的 .container 宽度和主内容区一致 */
.footer-note .container {
    /* 继承主 container 的样式，例如 max-width 和居中 */
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px; 
}

       
/* --- 表格样式 (简洁风格) --- */
        #dataTable {
    width: 100%;
    border-collapse: collapse;
    display: table; /* 保持，以防万一 */
    table-layout: fixed; 
}

.col-title {
    width: auto; 
}

#dataTable th, #dataTable td {
    padding: 10px 10px; 
    text-align: left;
    border-top: 1px solid var(--nav-border-color); 
    font-size: 14px;
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
}

        #dataTable th {
            color: #6e7781;
            font-weight: 500;
            background-color: white;
            text-transform: none;
            border-top: none;
            border-bottom: 1px solid var(--nav-border-color);
        }
        #dataTable tr:first-child td {
            border-top: none; 
        }

        #dataTable tr:hover {
            background-color: #f6f8fa;
        }

        #dataTable td a {
            color: #0366d6; /* 使用 GitHub 链接蓝色 */
            text-decoration: none;
            font-weight: 500;
        }

        #dataTable td a:hover {
            text-decoration: underline;
        }

        /* 状态颜色标记 (使用之前定义的颜色) */
        .data-content tr td:nth-child(4) { 
            font-weight: 500;
        }

        .data-content tr td:nth-child(4):is(:where(*):not(.col-status):contains("unread")) {
            color: #cf222e; /* GitHub Red */
        }

        .data-content tr td:nth-child(4):is(:where(*):not(.col-status):contains("archive")) {
            color: #1a7f37; /* GitHub Green */
        }