/* 全局CSS变量定义
   --primary-color: 主题主色调（青色），用于强调交互元素和关键信息
   --bg-color: 页面整体背景色（深蓝），营造科技感视觉基调
   --card-bg: 功能卡片背景色（深灰蓝），与主背景形成层次区分
   --text-color: 正文文本主色（浅蓝白），保证在深色背景下的可读性
*/
:root {
    --primary-color: #00f7ff; /* 青色主题色，色值取自#00f7ff */
    --bg-color: #0a192f; /* 深蓝背景色，RGB(10,25,47) */
    --card-bg: #112240; /* 深灰蓝卡片色，RGB(17,34,64) */
    --text-color: #e6f1ff; /* 浅蓝白文本色，RGB(230,241,255) */
}

/* 页面主体基础样式
   margin: 0 清除默认边距
   padding: 2rem 设置内容区四周内边距
   min-height: 100vh 保证内容区至少占满视口高度
   background: 应用全局背景色
   font-family: 使用系统默认无衬线字体，提升跨设备一致性
   color: 应用全局文本主色
*/
body {
    margin: 0; /* 清除浏览器默认边距 */
    padding: 0.1rem; /* 内容区四周保留2rem内边距 */
    min-height: 100vh; /* 最小高度占满视口 */
    background: var(--bg-color); /* 应用全局背景色 */
    font-family: 'Segoe UI', system-ui; /* 系统默认无衬线字体 */
    color: var(--text-color); /* 应用全局文本主色 */
}

/* 主内容容器样式
   max-width: 1200px 限制内容最大宽度，避免过宽影响阅读
   margin: 0 auto 水平居中显示
   padding: 2rem 容器内部四周内边距
   background: 应用卡片背景色
   border-radius: 12px 圆角边框提升柔和度
   box-shadow: 主题色弱阴影，增强卡片层次感
*/
.container {
    max-width: 1200px; /* 内容最大宽度限制 */
    margin: 0 auto; /* 水平居中 */
    padding: 1rem; /* 内部四周2rem内边距 */
    background: var(--card-bg); /* 应用卡片背景色 */
    border-radius: 12px; /* 12px圆角边框 */
    box-shadow: 0 4px 20px rgba(0, 247, 255, 0.1); /* 主题色弱阴影 */
}

.title {
    text-align: center;
    background: linear-gradient(45deg, var(--primary-color), #7a00ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 2.5rem;
    margin-bottom: 2rem;
}

.select-container {
    position: relative;
    margin-bottom: 0rem;
}

/* 下拉选择器触发按钮样式
   width: 100% 占满父容器宽度
   padding: 1rem 1.5rem 按钮内边距
   background: transparent 透明背景突出边框
   border: 主题色半透明边框（30%不透明度）
   border-radius: 8px 按钮圆角
   color: 应用文本主色
   font-size: 1.1rem 略大字体提升可读性
   cursor: pointer 鼠标指针变为手型提示可点击
   transition: 0.3s过渡动画，优化交互反馈
   display: flex 弹性布局，用于图标与文本对齐
*/
.select-trigger {
    width: 90%; /* 占满父容器宽度 */
    padding: 1rem 1.5rem; /* 上下1rem，左右1.5rem内边距 */
    background: transparent; /* 透明背景 */
    border: 2px solid rgba(0, 247, 255, 0.3); /* 主题色30%不透明度边框 */
    border-radius: 8px; /* 8px圆角 */
    color: var(--text-color); /* 应用文本主色 */
    font-size: 1.1rem; /* 1.1倍字体大小 */
    cursor: pointer; /* 手型指针 */
    transition: all 0.3s ease; /* 0.3s过渡动画 */
    display: flex; /* 弹性布局 */
    justify-content: space-between; /* 子元素两端对齐 */
    align-items: center; /* 垂直居中对齐 */
}

.select-trigger:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 10px rgba(0, 247, 255, 0.2);
}

.select-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.5rem;
    padding: 1rem;
    background: var(--card-bg);
    border: 2px solid rgba(0, 247, 255, 0.3);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 247, 255, 0.1);
    list-style: none;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    z-index: 1000;
}

.select-options li {
    padding: 0.8rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.select-options li:hover {
    background: rgba(0, 247, 255, 0.1);
    transform: translateX(5px);
}

.params-section {
    display: none;
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: rgba(0, 247, 255, 0.05); /* 模块背景色：主题色5%不透明度，与卡片背景形成层次 */
    border-radius: 8px; /* 模块圆角：8px圆角提升柔和度 */
}

/* 参数输入区域标题样式
   color: 应用主题色突出标题层级
   margin-top: 0 消除默认上外边距，保持与容器顶部对齐 */
.params-section h3 {
    color: var(--primary-color);
    margin-top: 0;
}

/* 参数输入框基础样式
   width: 固定宽度250px保持输入框尺寸统一
   padding: 内边距优化文本与边框间距
   margin-right/margin-bottom: 控制输入框间横向/纵向间距
   background: 透明背景保持页面风格一致
   border: 主题色30%不透明度边框，维持视觉一致性
   border-radius: 4px圆角提升柔和度
   color: 应用全局文本色保证可读性
   font-size: 1rem标准字体大小
   transition: 0.3s过渡动画优化交互反馈 */
.param-input {
    width: 250px;
    padding: 0.8rem 1rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
    background: transparent;
    border: 2px solid rgba(0, 247, 255, 0.3);
    border-radius: 4px;
    color: var(--text-color);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.param-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 8px rgba(0, 247, 255, 0.3);
}

.error-message {
    color: #ff4d4f;
    font-size: 0.9rem;
    margin-top: 0.3rem;
    min-height: 1.2rem;
    display: none;
}

/* 薄膜材料选择模块样式 */
.material-section {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: rgba(0, 247, 255, 0.05);
    border-radius: 8px;
}

.material-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.material-btn {
    padding: 0.8rem 1rem;
    background: transparent;
    border: 2px solid rgba(0, 247, 255, 0.3);
    border-radius: 4px;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.3s ease;
}

.material-btn:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 8px rgba(0, 247, 255, 0.3);
}

/* 材料选择按钮选中状态样式
   background: 应用主题色作为选中背景
   color: 应用页面背景色作为选中时文本色（反色设计）
   border-color: 同步主题色边框，保持视觉一致性
*/
.material-btn.selected {

/* 手机屏幕响应式样式（最大宽度768px） */
@media (max-width: 768px) {
    body {
        padding: 1rem;
    }
    .container {
        padding: 1.5rem;
    }
    .title {
        font-size: 2rem;
    }
    .param-input {
        width: 100%;
        margin-right: 0;
    }
    .material-buttons,
    .process-buttons {
        gap: 0.3rem;
    }
    .material-btn,
    .other-process-btn {
        padding: 0.6rem 0.8rem;
        font-size: 0.9rem;
    }
    .select-trigger {
        padding: 0.8rem 1.2rem;
    }
    .params-section,
    .material-section {
        padding: 1rem;
    }
}
    background: var(--primary-color);
    color: var(--bg-color);
    border-color: var(--primary-color);
}

/* 报价明细表格样式 */
.quote-details {
    margin-top: 2rem;
    padding: 1.5rem;
    border-radius: 8px;
}

.quote-details table {
    margin: 20px 0;
    border-collapse: collapse;
    width: 100%;
}

.quote-details .first-table,
.quote-details .second-table {
    margin: 15px 0;
    width: 95%;
}

#quoteTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    table-layout: fixed;
}

#quoteTable th,
#quoteTable td,
.quote-details th,
.quote-details td {
    padding: 0.8rem 1rem;
    border: 2px solid rgba(0, 247, 255, 0.3);
    text-align: center;
}

/* 报价表格表头样式
   background: 主题色10%不透明度背景，区分表头与内容行
   color: 应用主题色突出表头信息层级 */
#quoteTable th,
.quote-details th {
    background: rgba(0, 247, 255, 0.1);
    color: var(--primary-color);
}

@media (max-width: 768px) {
    #quoteTable tr {
        display: flex;
        flex-wrap: wrap;
    }
    #quoteTable th,
    #quoteTable td {
        flex: 0 0 50%;
        box-sizing: border-box;
    }
}

#quoteTable tr:hover td {
    background: rgba(0, 247, 255, 0.08);
}

/* 其他工序按钮基础样式 */
.other-process-btn {
    padding: 0.8rem 1rem;
    background: transparent;
    border: 2px solid rgba(0, 247, 255, 0.3);
    border-radius: 4px;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0.5rem;
}

.other-process-btn:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 8px rgba(0, 247, 255, 0.3);
}

/* 其他工序按钮选中样式 */
.other-process-btn.selected {
    background: var(--primary-color);
    color: var(--bg-color);
    border-color: var(--primary-color);
}

/* 其他工序模块样式 */
.other-process {
    margin-top: rem;
    padding: rem;
    border-radius: 8px;
}

.process-group {
    margin: 1rem 0;
}

.process-group p {
    margin: 0.5rem 0;
}

.process-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

/* 复合工序按钮选中样式 */
.compound-type-btn.selected,
.compound-count-btn.selected {
    background: var(--primary-color);
    color: var(--bg-color);
    border-color: var(--primary-color);
}

/* 复合工序按钮基础样式 */
.compound-type-btn,
.compound-count-btn {
    padding: 0.8rem 1rem;
    background: transparent;
    border: 2px solid rgba(0, 247, 255, 0.3);
    border-radius: 4px;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0.5rem;
}

.print-color-buttons, .full-rate-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    margin: 1rem 0;
    overflow-x: auto;
}

.print-color-btn, .full-rate-btn {
    padding: 0.8rem 1rem;
    background: transparent;
    border: 2px solid rgba(0, 247, 255, 0.3);
    border-radius: 4px;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.print-color-btn:hover, .full-rate-btn:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 8px rgba(0, 247, 255, 0.3);
}

.print-color-btn.selected, .full-rate-btn.selected {
    background: var(--primary-color);
    color: var(--bg-color);
    border-color: var(--primary-color);
}

.print-color-group, .full-rate-group {
    margin: 1rem 0;
}

.barrier-layer {
    margin: 1rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 247, 255, 0.2);
}

.delete-barrier {
    margin-left: 1rem;
    padding: 0.5rem 1rem;
    background: #ff4d4f;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
}

/* 添加阻隔层按钮基础样式
   padding: 0.8rem 1rem 按钮内边距
   background: 应用主题色作为主背景
   border: none 无边框设计
   border-radius: 4px 按钮圆角
   color: 应用页面背景色作为文本色（反色）
   cursor: pointer 手型指针提示可点击
   transition: 0.3s过渡动画优化交互
*/
#addBarrier {
    padding: 0.8rem 1rem; /* 上下0.8rem，左右1rem内边距 */
    background: var(--primary-color); /* 主题色背景 */
    border: none; /* 无边框 */
    border-radius: 4px; /* 4px圆角 */
    color: var(--bg-color); /* 反色文本 */
    cursor: pointer; /* 手型指针 */
    transition: all 0.3s ease; /* 0.3s过渡动画 */
}

/* 添加阻隔层按钮悬停状态
   box-shadow: 主题色弱阴影，增强交互反馈
*/
#addBarrier:hover {
    box-shadow: 0 0 10px rgba(0, 247, 255, 0.3); /* 主题色30%不透明度阴影 */
}