/* ==========================================================================
   CB-Dock3 Redesign - CSS Override (Green Theme)
   ========================================================================== */

:root {
    --cb-green: #10b981 ;   
    --cb-green-dark: #00a878;  /* 深绿色悬停 */ 
    --cb-text-dark: #1e293b;   /* 深色文字 */
    --cb-border-dashed: 1.5px dashed var(--cb-green);
    --cb-radius: 12px;
} 

/* 1. 标题与序号样式重置 (1 Upload Protein / 2 Upload Ligand)
   -------------------------------------------------------------------------- */

/* 隐藏原本的图标堆叠 (文件夹图标等) */
.ico-stack .bi {
    display: none !important;
}

/* 重塑图标容器为圆形序号 */
.ico-stack {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: var(--cb-green) !important;
    color: white;
    border-radius: 50%;
    font-weight: 800;
    font-size: 16px;
    margin-right: 12px !important;
    padding: 0 !important; /* 覆盖原本的 px-3 */
}

/* 利用 CSS 计数器或 nth-of-type 来生成序号 
   注意：这里假设 HTML 结构顺序固定 */
.container-fluid > .d-flex.mb-2:nth-of-type(1) .ico-stack::after { content: "1"; }
.container-fluid > .d-flex.mb-2:nth-of-type(2) .ico-stack::after { content: "2"; }
.container-fluid > .d-flex.mb-2:nth-of-type(3) .ico-stack::after { content: "3"; }

/* 标题文字样式调整 */
.text-premary {
    color: var(--cb-text-dark) !important;
    font-weight: 700 !important;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
}

/* 隐藏原本标题下的装饰线和背景块 */
.text-premary .bg-premary {
    background: none !important;
    padding: 0 !important;
}
.text-premary .border.position-absolute {
    display: none !important;
}

/* 示例链接和提交文件名样式 */
.annotation {
    color: #64748b;
    font-size: 0.9rem;
    margin-top: 4px;
    font-weight: 600;
}
.link {
    color: var(--cb-green) !important;
    text-decoration: none;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
}

.small-7 {
   font-size: 0.7em !important;
}


/* 2. 卡片样式 (虚线边框)
   -------------------------------------------------------------------------- */
.main-card {
    border: var(--cb-border-dashed) !important;
    border-radius: var(--cb-radius) !important;
    background-color: #ffffff; /* 或者是极淡的绿色 #f0fdf9 */
    box-shadow: none !important;
    padding: 20px !important;
    margin-bottom: 2rem;
}

/* Dropzone 区域样式 */
.dropzone {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dz-message {
    color: #64748b !important;
}
.dz-message .bi {
    color: var(--cb-green) !important;
}

/* 3. 按钮与交互元素重设计
   -------------------------------------------------------------------------- */

/* 底部大按钮 (Search Cavities / Auto Blind Docking) */
.submit_file {
    background: var(--cb-green) !important;
    color: white !important;
    border: none !important;
    border-radius: 50px !important; /* Pill shape */
    padding: 12px 40px !important;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 4px 6px rgba(16, 185, 129, 0.2);
    transition: all 0.2s ease;
    /* 移除原来的 fancy border 效果 */
    overflow: visible !important; 
    height: auto !important;
    display: inline-block;
    width: auto; /* 或者 100% 如果想要全宽 */
}

/* 覆盖原本按钮内部的 span 动画结构，只显示文字 */
.submit_file .text {
    position: static !important;
    transform: none !important;
    padding: 0 !important;
}
.submit_file .shadow, .submit_file .edge, .submit_file .front {
    all: unset; /* 重置原有复杂样式 */
}
/* 重新加上图标（如果有） */
.submit_file::before {
    font-family: "bootstrap-icons";
    margin-right: 8px;
    vertical-align: middle;
}
#task1::before { content: "\F52A"; /* Search icon */ }
#task2::before { content: "\F462"; /* Play/Gear icon */ }

.submit_file:hover:not(.disabled) {
    background: var(--cb-green-dark) !important;
    transform: translateY(-2px);
}

.submit_file.disabled {
    background: #cbd5e1 !important;
    cursor: not-allowed;
    transform: none !important;
}

/* 4. NGL 选择区域 (Show Protein 内部)
   -------------------------------------------------------------------------- */

/* 选项卡切换按钮 (Select Chains / Select Domains) */
.btn-group .btn-check + .btn-outline-select {
    border: 1px solid #e2e8f0;
    color: #64748b;
    border-radius: 0;
    font-weight: 600;
    padding: 8px 16px;
}
/* 选中状态 */
.btn-group .btn-check:checked + .btn-outline-select {
    background-color: var(--cb-green) !important;
    color: white !important;
    border-color: var(--cb-green) !important;
}
/* 圆角处理 */
.btn-group .btn:first-of-type { border-radius: 6px 0 0 6px; }
.btn-group .btn:last-of-type { border-radius: 0 6px 6px 0; }

/* 确认/重置 按钮 */
#all_btn, #show_select_btn, #reset_submit_btn, #ligand_draw_submit {
    background: var(--cb-green) !important;
    color: white !important;
    /* border-radius: 6px !important; */
    padding: 5px 20px ;
    font-size: 0.75rem;
    height: auto !important;
    font-weight: 600;
    /* 清除旧样式 */
    border-radius: 50px;
    border: none;
}
#all_btn, #show_select_btn:hover, #reset_submit_btn:hover {
    background: var(--cb-green-dark) !important;
}
#reset_submit_btn {
    background: white !important;
    color: #ef4444 !important; /* 红色重置 */
    border: 1px solid #ef4444 !important;
}
#reset_submit_btn:hover {
    background: #fef2f2 !important;
}

/* 5. 参数部分 (Parameters)
   -------------------------------------------------------------------------- */
/* 展开箭头 */
#more_parameters_title {
    cursor: pointer;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cb-text-dark);
}
#more_parameters {
    color: var(--cb-text-dark);
    margin-left: auto;
    float: right;
}

/* 6. 其他微调
   -------------------------------------------------------------------------- */
/* 移除文件按钮 */
.remove_file {
    background: white !important;
    color: #ef4444 !important;
    border: 1px solid #ef4444 !important;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 0.8rem;
    transition: all 0.2s;
}
.remove_file:hover {
    background: #ef4444 !important;
    color: white !important;
}
/* 覆盖旧按钮内部结构 */
.remove_file .front, .remove_file .edge, .remove_file .shadow {
    all: unset;
}

/* Job List Table Header */
.bg-thead {
    background-color: #f0fdf9 !important; /* 浅绿背景 */
    color: var(--cb-text-dark) !important;
    font-weight: 700;
    border-bottom: 2px solid var(--cb-green);
}

/* 调整容器间距 */
.container-fluid.px-3 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* 警告框 */
.warn_info{
    font-size: 11px !important;
    font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
}

.warn_info .warn{
    color: #856404;
    background-color: #fff3cd;
}



/*修改文件预览框 */
#protein_load, 
#ligand_load, 
#ligand_draw_load {

    font-size: 11px ; 
    font-family: "Menlo", "Consolas", "Monaco", "Courier New", monospace ;
    line-height: 1.3 ;
    color: #334155 ;
    background-color: #f8fafc ; 
    white-space: pre;
    overflow-x: auto;
}

#protein_upload.dz-started,
#ligand_upload.dz-started {
    display: block !important; 
    height: auto !important;
    min-height: auto !important;
    padding: 0 !important;
    border: none !important; /* 预览时不需要边框，外层已有 main-card */
}

/* 强制预览块占满 100% 宽度 */
#protein_upload .dz-preview,
#ligand_upload .dz-preview {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    background: transparent !important;
    border: none !important;
}

#protein_upload .dz-preview .dz-details,
#ligand_upload .dz-preview .dz-details {
    position: static !important; /* 关键：取消 absolute */
    width: 100% !important;
    height: auto !important;
    min-height: 200px !important; /* 给一个最小高度 */
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    background-color: transparent !important;
}

#protein_upload .dz-preview .dz-image,
#ligand_upload .dz-preview .dz-image {
    display: none !important;
}


#protein_upload textarea,
#ligand_upload textarea {
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
}


/* 定义upload local部分按钮 */
.nav-pills-btn .btn {
    border-radius: 50px ;      
    border: 1px solid #00cf95 ; 
    color: #00cf95 ;            /* 绿色文字 */
    background-color: transparent ;
    padding: 6px 25px ;
    margin-right: 15px ;
    font-weight: 600 ;
    transition: all 0.2s ease-in-out ;
    display: inline-block ;     /* 强制显示 */
}
.nav-pills-btn .btn.active {
    background-color: #10b981 ; 
    color: #ffffff;
}
.nav-pills-btn .btn:hover {
    background-color: rgba(0, 207, 149, 0.1) ;
}
.nav-pills-btn .btn.active:hover {
    background-color: #00a878 ;
    color: #ffffff;
}
/* 容器布局 */
.nav-pills-btn {
    margin-bottom: 15px;
    margin-left: 2px ;
    display: flex ;  /* 确保横向排列 */
}

.custom-file {
    position: relative;
    display: inline-block;
    width: 100%;
    height: calc(2.25rem + 2px);
    margin-bottom: 0;
}


.custom-file-input {
    position: relative;
    z-index: 2;
    width: 100%;
    height: calc(2.25rem + 2px);
    margin: 0;
    opacity: 0; /* 透明度设为0，隐藏“选择文件” */
    cursor: pointer;
}


.custom-file-label {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    height: calc(2.25rem + 2px);
    padding: 0.375rem 0.75rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    box-shadow: none;
    display: flex;
    align-items: center;
    /* 防止长文件名溢出 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.custom-file-label::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
    color: #495057;
    content: "Browse"; /* 这里定义你想要的英文按钮文字 */
    background-color: #e9ecef;
    border-left: 1px solid #ced4da;
    border-radius: 0 0.25rem 0.25rem 0;
}


.custom-file-input:focus ~ .custom-file-label {
    border-color: var(--cb-green);
    box-shadow: 0 0 0 0.2rem rgba(0, 207, 149, 0.25);
}

/* 修改按钮 */
/* #show_select_btn, 
#reset_submit_btn {
    border-radius: 50px !important; 
    padding-left: 20px !important; 
    padding-right: 20px !important;
} */


.remove_file,
#btn_remove_file {
    border-radius: 50px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}


.dock-card:hover .modern-icon-box,
.section-title:hover .modern-icon-box {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    transform: translateY(-2px) rotate(-5deg);
    box-shadow: 0 8px 15px -3px rgba(16, 185, 129, 0.3);
}

/* 修改图标：绿色背景+线条 */
.icon-circle-box {
    width: 42px;
    height: 42px;
     
    background: #10b981;
    
    color: #ffffff ;
    
    border-radius: 50%;
    
    /* 布局与阴影 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-right: 15px;
    flex-shrink: 0;

    
    transition: all 0.3s ease;
}

/*结果进度条*/
.progress-in-table {
    background-color: #e2e8f0 ; 
    
    border-radius: 50px ;
    
    overflow: hidden ;
    
    height: 22px ; 
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06) ;
    
    /* 确保布局紧凑 */
    margin: 0 ;
    vertical-align: middle ;
}

/* 2. 进度条本体 (绿色部分) */
.progress-in-table .progress-bar {
    background-color: #10b981 !important; 
    color: #0f172a !important; 
    overflow: visible !important;   /* 允许文字超出绿色条显示 */
    white-space: nowrap !important; /* 强制文字不换行 */
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    
    /* 关键修复 3：行高与容器高度一致，确保文字绝对垂直居中 */
    line-height: 22px !important; 
    height: 100% !important;
    
    /* 移除多余的阴影和圆角，完全由外层控制 */
    box-shadow: none !important;
    border-radius: 0 !important;
}

#job_list td a {
    color: #10b981 !important; /* 纯绿色 */
    font-weight: 700 !important;
    text-decoration: underline !important; /* 保留下划线，更像链接 */
    transition: color 0.2s;
}

/* 鼠标悬停变深绿 */
#job_list td a:hover {
    color: #047857 !important;
}

/* 2. 关键修复：移除完成后的灰色背景条
    含义：当 .progress-in-table 内部包含 <a> 标签时，强制背景透明 */
.progress-in-table:has(a) {
    background-color: transparent !important; /* 去掉灰色背景 */
    box-shadow: none !important;              /* 去掉阴影 */
    height: auto !important;                  /* 高度自适应 */
    border: none !important;
    padding: 0 !important;
}

.home-style-title {
    font-size: 3.5rem; /* 字体加大 */
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.1;
    margin-bottom: 0;
    color: var(--primary-dark);
    background: -webkit-linear-gradient(135deg, var(--primary-dark) 0%, var(--dark-green) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 图标样式 */
.home-style-logo {
    height: 70px; /* 高度设为与文字差不多大 */
    width: auto;
    margin-right: 15px; /* 图片和文字之间的间距 */
}



#protein-dz-progress,       /* 蛋白上传进度条 */
#ligand-dz-progress,        /* 配体上传进度条 */
#ligand-dr-progress,        /* 在线绘制配体进度条 */
#Tprotein_bar,             /* 模板蛋白进度条 */
#Tligand_bar {             /* 模板配体进度条 */
    background-color: #10b981 !important; /* 使用主题定义的绿色 */
    border-color: #10b981 !important;
}

/* 如果使用了 Bootstrap 的 success 类，也强制覆盖 */
.progress-bar-success {
    background-color: #10b981 !important;
}


#seqBar {
    height: auto !important;       /* 让高度自适应内容 */
    min-height: 80px !important;   /* 最小给足 80px，保证能放下两行字 + 滚动条 */
    padding-bottom: 10px !important;
}

#seqBar .res-letter {
    /* 1. 使用等宽字体，确保每个字母视觉宽度一致 */
    font-family: "Menlo", "Consolas", "Monaco", "Courier New", monospace !important;
    
    /* 2. 居中对齐 */
    text-align: left !important;
    display: inline-block !important; /* 必须设为块级/行内块才能应用对齐 */
    width: 100% !important;           /* 强制撑满 9px 的格子 */
    
    /* 3. 调整字号，9px 的格子比较窄，稍微调小字体防止拥挤 */
    font-size: 12px !important; 
    line-height: 1.4 !important;      /* 垂直居中微调 */
    letter-spacing: 0 !important;     /* 移除可能的字间距干扰 */
    cursor:pointer;
}

/* 确保外层容器也是居中的 */
#seqBar .tick-box {
    position: relative !important;
    height: 20px !important;       /* 强制给标尺行留出空间 */
    vertical-align: bottom !important;
}
#seqBar .chain-tag, 
#seqBar .tick-label {
    position: absolute !important; /* 关键：脱离文档流 */
    top: auto !important;          /* 关键：取消默认的顶部对齐 */
    bottom: 0 !important;          /* 关键：统一固定在容器底部 */
    left: 0 !important;
    width: 100% !important;        /* 配合 center 居中 */
    display: block !important;
    text-align: left !important;
    line-height: 1 !important;     /* 紧凑行高，避免干扰 */
    font-family: "Menlo", "Consolas", monospace !important; /* 统一字体 */
}

/* 3. 微调 Chain Tag (A) */
#seqBar .chain-tag {
    font-size: 12px !important; 
    font-weight: 800 !important;
    padding-bottom: 0px !important; 
}

/* 4. 微调标尺数字 (5, 10...) */
#seqBar .tick-label {
    font-size: 12px !important;    
    padding-bottom: 0px !important; 
}

.dz-remove, 
.remove_file, 
#btn_remove_file {
    /* 1. 形状：胶囊圆角 */
    border-radius: 50px !important;
    
    /* 2. 颜色：红色描边 (Bootstrap Danger Red: #dc3545) */
    border: 1px solid #dc3545 !important;
    color: #dc3545 !important;
    background-color: transparent !important; /* 默认透明背景 */
    
    /* 3. 尺寸与排版 */
    padding: 5px 20px !important;  /* 加宽一点 */
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-decoration: none !important; /* 去掉 Dropzone 默认可能有的下划线 */
    display: inline-block !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: none !important; /* 去掉旧阴影 */
    
    /* 4. 布局微调 */
    margin-top: 10px !important;
}


.dz-remove:hover, 
.remove_file:hover, 
#btn_remove_file:hover {
    background-color: #dc3545 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.25) !important;
    transform: translateY(-1px);
    cursor: pointer;
}


/* 高亮选中 */
#seqBar .chain-tag, 
#seqBar .tick-label {
    pointer-events: none !important;
}


/* 已经选择状态 */
.res-selected { 
  background: #C0C0C0 !important; 
}  

/* 正在选择状态 */
.res-selecting { 
  background: #D8D8D8 !important; 
}


.mouse_help {

    position: absolute;
    
    top: 130px;   
    right: 10px; /* 距离右侧 10px */
    z-index: 1000; 

    background-color: rgba(255, 255, 255, 0.96); 
    border: 1px solid #ced4da; 
    border-radius: 6px;   
    padding: 10px 12px;      
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 

    font-size: 0.85rem ; 
    line-height: 1.5;
    color: #495057;
    text-align: left;
    min-width: 180px; 
    pointer-events: none; 
}

/* 标题样式微调 */
.mouse_help strong {
    display: block;
    margin-bottom: 5px;
    color: #212529;
    border-bottom: 1px solid #e9ecef; /* 标题下加一条细线 */
    padding-bottom: 3px;
}

.ngl-view-btn {

    position: absolute !important;
    top: 85px !important; 

    right: 10px !important;
    
    z-index: 2000 !important;
    pointer-events: auto !important;
}


/* 修改右侧的+-符号*/

/* 行采用 6 列网格，左侧 + 固定占一列；当隐藏时仍占位 */
.segment-row {
/* display: grid; */
grid-template-columns: 0px 50px 8px 50px 17px 17px;
/* 列含义：左+ | start | - | end | 右+ | 删除 */
align-items: center;
column-gap: 6px;
}

/* 输入框统一尺寸对齐 */
.segment-row .seg-start,
.segment-row .seg-end {
width: 20px;
min-width: 50px;
font-size: 0.85rem;
line-height: 1.6;
}

/* 中划线固定宽度并居中 */
.segment-row .dash {
text-align: center;
color: #666;
display: inline-block;
}

/* 按钮统一高度与居中 */
.segment-row .btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.5rem;
margin-left: 0.1rem;
padding: 0.15rem 0.25rem;
}

/* 左侧 + 的占位元素：隐藏时仍占位 */
.segment-row .left-plus-placeholder {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    visibility: hidden; /* 隐藏但占位 */
}

/* 任务删除按钮 */
.job-remove-btn{
  background-color: #f9fafd;
  border-radius: 0.25rem ;
  border: 1px solid #EDF2F9;
}

.job-remove-btn .btn{
    background-color: #fff;
    box-shadow: 0 0 0 1px rgba(43, 45, 80, 0.1), 
    0 2px 5px 0 rgba(43, 45, 80, 0.08), 
    0 1px 1.5px 0 rgba(0, 0, 0, 0.07), 
    0 1px 2px 0 rgba(0, 0, 0, 0.08);
    color: #34495e;
    font-weight: 600;
}

.job-remove-btn .btn:active{
  box-shadow: none;
  background-color: #ededef;
}

.card-info {
  margin-right:calc(var(--bs-gutter-x) * 0.5);
  margin-left:calc(var(--bs-gutter-x) * 0.5);
  background-color: #F8FAFC;
  border-radius: 5px;
  border: 1px solid #dee2e6 !important;
}

/* 可自定义的块样式 */
.input-select-col {
  min-width: 220px;             /* 每块的最小宽度，可按需调整 */
  border-radius: 8px;           /* 圆角 */
  overflow: hidden;
  max-width: 300px !important;   /* 上限 */
  width: 100% !important;        /* 小屏依旧撑满 */
}
/* 小屏优化：去掉分隔线、块满宽 */
@media (max-width: 576px) {
  .input-select-col .border-end {
    border-right: none !important;
  }
  .input-select-col {
    min-width: 100%;
  }
}

.btn-font-sm {
  font-size: 9px !important;
}

.het-wrap {
  display: flex;
  flex-wrap: wrap;
}
.het-item {
  display: inline-flex;             
  line-height: 1.5;   
  min-width: 75px;
}
.ion-item { 
  display: inline-flex;             
  line-height: 1.5;   
  min-width: 59px;
}

/* 固定 16×16 px，禁止缩放，垂直居中 */
.form-check-input.fixed-12 {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px;          /* Flex 容器里也不会被压缩 */
  min-height: 12px;
  appearance: none;         /* 去掉系统默认样式（可选） */
  -webkit-appearance: none;
  border: 1px solid #adb5bd;
  border-radius: 2px;
  background-color: #fff;
  cursor: pointer;
  margin: 0;                /* 去掉默认 margin，方便用 gap 控制间距 */
}

/* 选中状态 */
.form-check-input.fixed-12:checked {
  background-color: #2c7be5;
  border-color: #2c7be5;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3 6-6'/%3e%3c/svg%3e");
  background-size: 10px;
  background-position: center;
  background-repeat: no-repeat;
}


/* =========================================
   自定义 Modal 样式 (匹配 CB-Dock3 绿色主题)
   ========================================= */

/* 弹窗外框：使用绿色虚线边框和阴影 */
.custom-theme-modal {
    border: 1px dashed var(--primary-green) !important;
    border-radius: 12px;
    box-shadow: 0 10px 30px -5px rgba(16, 185, 129, 0.15);
    background-color: #ffffff;
    overflow: hidden;
}

/* 弹窗头部：浅绿色背景，底部绿色虚线 */
.custom-modal-header {
    background-color: var(--bg-active); /* 浅绿色背景 */
    border-bottom: 1px dashed var(--primary-green) !important;
    padding: 1rem 1.5rem;
}

.custom-modal-header .modal-title {
    color: var(--dark-green);
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 0;
}

.custom-modal-header .btn-close {
    color: var(--dark-green);
}

/* 弹窗主体内边距 */
.custom-theme-modal .modal-body {
    padding: 1.5rem;
}

/* 弹窗中的小图标背景 */
.icon-circle-box-sm {
    width: 24px;
    height: 24px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

/* 链接输入框样式 */
.custom-input-group .form-control {
    border: 1px solid var(--border-color);
    color: var(--text-main);
    font-family: monospace;
    font-size: 0.9rem;
}
.custom-input-group .form-control:focus {
    box-shadow: none;
    border-color: var(--primary-green);
}

/* 镂空绿色按钮 (Copy按钮) */
.btn-outline-theme {
    color: var(--primary-green);
    border: 1px solid var(--primary-green);
    background-color: transparent;
    font-weight: 600;
    transition: all 0.2s;
}
.btn-outline-theme:hover, .btn-outline-theme:focus {
    background-color: var(--bg-active);
    color: var(--dark-green);
    border-color: var(--primary-green);
}

/* 实心绿色按钮 (OK/Got it按钮) */
.btn-theme-solid {
    background-color: var(--primary-green);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    font-weight: 600;
    transition: background-color 0.2s;
}
.btn-theme-solid:hover {
    background-color: var(--dark-green);
    color: white;
}
.modal { z-index: 10500 !important; }
.modal-backdrop { z-index: 10400 !important; }