.container {
    padding-bottom: 40px;
}

.panel {
    margin-bottom: 20px;
    overflow: hidden;
}

.panel-header {
    background-color: #eef3f9;
    border-bottom: 1px solid #c2d1e5;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- 上传/新建区域 --- */
#upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    border: 3px dashed #b3cbd6;
    border-radius: 8px;
    background-color: #fff;
    padding: 60px 20px;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 20px;
}

#upload-zone:hover,
#upload-zone.dragover {
    background-color: #e6eff5;
    border-color: #003366;
}

.zone-icon {
    font-size: 48px;
    color: #003366;
}

.zone-text {
    font-size: 16px;
    color: #666;
    text-align: center;
}

.zone-btns {
    display: flex;
    gap: 15px;
}

#hidden-file-input {
    display: none;
}

/* --- 编辑表头区 --- */
#config-header-editor {
    background: #fafafa;
    padding: 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.header-input-group {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
}

/* --- 数据表格样式 --- */
#data-table-container {
    display: none;
}

/* 核心改动：支持横向滚动，设定最小宽度防止字段挤压变形 */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#main-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 800px; /* 适当调大，超宽自适应滚动 */
}

#main-data-table th {
    background-color: #f2f6fb;
    color: #003366;
    font-weight: bold;
    border: 1px solid #c2d1e5;
    padding: 10px;
    text-align: left;
    white-space: nowrap;
}

#main-data-table td {
    border: 1px solid #eee;
    padding: 8px 10px;
    color: #333;
    white-space: nowrap;
}

#main-data-table tbody tr:hover {
    background-color: #fcf8e3 !important;
}

#main-data-table tbody tr:nth-child(even) {
    background-color: #fbfbfb;
}

.cell-input {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px;
}

.cell-input:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}

.bottom-actions {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.row-action-btn {
    padding: 2px 6px;
    font-size: 12px;
    margin-left: 5px;
}

.btn-success {
    background: linear-gradient(to bottom, #5cb85c, #449d44);
    color: #fff;
    border: 1px solid #398439;
}

.btn-success:hover {
    background: linear-gradient(to bottom, #67c167, #4cae4c);
}

.btn-danger {
    background: linear-gradient(to bottom, #d9534f, #c9302c);
    color: #fff;
    border: 1px solid #ac2925;
}

.btn-danger:hover {
    background: linear-gradient(to bottom, #e06663, #d43f3a);
}

/* --- 协议弹窗蒙层 --- */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    display: none; 
    align-items: center;
    justify-content: center;
}

/* --- 🔑 协议弹窗窗体（固定宽高，绝不被撑开变动） --- */
.modal-window {
    background: #fff;
    border: 2px solid #003366;
    width: 600px;             /* 固定宽度 */
    height: 500px;            /* 固定高度，再多字也不会变大啦！ */
    max-width: 90vw;          /* 移动端自适应，防止溢出屏幕 */
    max-height: 85vh;
    display: flex;
    flex-direction: column;   /* 垂直布局：Header、Nav、Content、Footer */
    box-shadow: 5px 5px 0px 0px #cccccc; /* 浅灰色 0-blur 硬投影 */
    animation: modalFadeIn 0.3s ease-out;
    overflow: hidden;         /* 阻止子元素溢出切片 */
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-header {
    background: #003366;
    color: #fff;
    padding: 12px 15px;
    font-weight: bold;
    font-size: 15px;
    flex-shrink: 0;           /* 防止被压缩 */
}

/* --- Tab选项卡导航 --- */
.tabs-nav {
    display: flex;
    background: #eef3f9;
    border-bottom: 1px solid #c2d1e5;
    overflow-x: auto;
    flex-shrink: 0;           /* 防止被压缩 */
}

.tab-btn {
    padding: 10px 15px;
    border: none;
    background: none;
    border-right: 1px solid #c2d1e5;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    font-weight: bold;
    white-space: nowrap;
}

.tab-btn.active {
    background: #fff;
    border-bottom: 2px solid #ff9900;
    color: #003366;
}

/* --- 📜 文本滚动核心区 --- */
.tabs-content-wrapper {
    flex: 1;                  /* 自动撑满上下剩余的固定空间 */
    overflow-y: auto;         /* 纵向超出直接出滚动条 */
    padding: 15px;
    background: #fff;
    border: 2px solid transparent; /* 预留给爆红警告的边框 */
}

/* 警示未读完爆红 */
.tabs-content-wrapper.warn-active {
    border: 2px solid #d9534f !important;
    background: #fff1f0;
}

.tab-pane {
    display: none;
    font-size: 13px;
    line-height: 1.7;
    color: #444;
}

.tab-pane.active {
    display: block;
}

/* --- 弹窗尾部固定区 --- */
.modal-footer {
    padding: 15px;
    border-top: 1px solid #c2d1e5;
    background: #f9f9f9;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;           /* 防止被压缩 */
}

.agree-check-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #333;
}

.warn-text {
    font-size: 12px;
    color: #d9534f;
    min-height: 16px;
    font-weight: bold;
}

/* 自定义滚动条美化（Webkit） */
.tabs-content-wrapper::-webkit-scrollbar {
    width: 8px;
}
.tabs-content-wrapper::-webkit-scrollbar-thumb {
    background-color: #c2d1e5;
    border-radius: 4px;
}
.tabs-content-wrapper::-webkit-scrollbar-track {
    background: #f4f7fa;
}

@media (max-width: 768px) {
    #upload-zone {
        padding: 30px 10px;
    }

    #config-header-editor {
        flex-direction: column;
        gap: 8px;
    }

    .row-action-btn {
        padding: 4px 8px;
        margin-top: 5px;
        display: block;
    }

    /* 👑 核心修复：把底部的操作栏改为垂直排列，并拉宽间距 */
    .bottom-actions {
        flex-direction: column; 
        gap: 12px;
        width: 100%;
        margin-top: 25px;
    }

    /* 让按钮在手机上占满整行宽度 */
    .bottom-actions .btn {
        width: 100%;
        margin-left: 0 !important; /* 抹掉原本 PC 端的 margin-left: auto */
        text-align: center;
        padding: 12px 0; /* 适当增高，手机更好点 */
    }
}