/* CSS 变量统一声明，移除重复 */
        :root {
            --primary-color: #2A6DF4; /* 科技蓝 - 主色调 */
            --success-color: #28a745; /* 成功色 */
            --error-color: #dc3545; /* 错误色 */
            --light-gray: #f8f8f8; /* 浅灰过渡色 - 背景渐变浅色 */
            --glass-bg: rgba(255, 255, 255, 0.6); /* 玻璃拟态背景色 */
            --glass-blur: blur(10px); /* 玻璃模糊滤镜 */
            --button-bg: var(--primary-color); /* 按钮背景色 - 主色调 */
            --button-hover-bg: #1e5acf; /* 按钮悬停背景色 - 主色调hover */
            --button-active-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); /* 按钮点击阴影 */
            --button-radius: 25px; /* 按钮圆角 - 胶囊按钮 */
            --shadow-color: rgba(0, 0, 0, 0.1); /* 阴影颜色 - 微投影 */
            --watermark-color: rgba(42, 109, 244, 0.03); /* 品牌蓝水印颜色 */
            --table-header-bg-start: #e0f7fa; /* 表头渐变开始颜色 */
            --table-header-bg-end: #b2ebf2; /* 表头渐变结束颜色 */
            --zebra-stripe-bg: #f2f2f2; /* 斑马条纹背景色 */
            --digital-font: 'Roboto Mono', monospace; /* 数字字体 */
            --main-font-size: 15px; /* 主要字体大小 */
            --h3-font-size: 1.8em; /* 标题字体大小 */
            --border-radius-input: 10px; /* 输入框圆角 */
            --border-color-input: #ddd; /* 输入框边框颜色 */
            --padding-input: 14px; /* 输入框内边距 */
            --padding-button-y: 14px; /* 按钮垂直内边距 */
            --padding-button-x: 30px; /* 按钮水平内边距 */
            --margin-section-bottom: 25px; /* 区块底部外边距 */
            --padding-section: 25px; /* 区块内边距 */
            --border-radius-section: 10px; /* 区块圆角 */
        }

        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            max-width: 100%;
          
           
            line-height: 1.6;
            color: #333;
            font-size: var(--main-font-size);
            position: relative;
        }

       

        h3 {
            color: #343a40;
            padding-bottom: 10px;
            border-bottom: 2px solid #e9ecef;
            margin-bottom: 20px;
            font-size: var(--h3-font-size);
            font-weight: 500;
            margin-top: 40px;
        }

      

        .brand-display span {
            font-size: 18px;
            font-weight: 500;
        }

        @media (min-width: 769px) {
            .brand-display {
                padding: 15px 30px;
                justify-content: flex-start;
                border-bottom-left-radius: 20px;
                border-bottom-right-radius: 20px;
            }
             h3 {
                margin-top: 50px;
            }
        }

        /* 移动端样式调整 */
        @media (max-width: 768px) {
            body {
                padding-top: 50px;
                margin: 10px auto;
                padding: 10px;
            }
            .brand-display {
                padding: 8px 15px;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
            }
             .brand-display span {
                font-size: 16px;
            }
             h3 {
                 margin-top: 30px;
                 font-size: 1.6em;
            }
        }

        /* 输入及历史记录通用区块样式 */
        .input-section, .calculator-input, .history-section {
            background-color: var(--glass-bg);
            border-radius: var(--border-radius-section);
            padding: var(--padding-section);
            margin-bottom: var(--margin-section-bottom);
            box-shadow: 0 4px 8px var(--shadow-color);
            backdrop-filter: var(--glass-blur);
            border: 1px solid rgba(255, 255, 255, 0.7);
        }

        /* 计算器输入区域 - 响应式栅格布局 */
        .calculator-input {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
        }


        /* 移动端输入区域调整 */
        @media (max-width: 768px) {
            .calculator-input {
                grid-template-columns: 1fr;
                gap: 12px;
            }

            input, select {
                padding: 12px;
                font-size: 16px;
            }

            .input-section, .calculator-input, .history-section {
                padding: 15px;
                margin-bottom: 15px;
            }
        }

        /*  表单输入框统一样式 */
        input[type="text"],
        input[type="number"],
        select,
        textarea {
            width: 100%;
            padding: var(--padding-input);
            border: 1px solid var(--border-color-input);
            border-radius: var(--border-radius-input);
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
            font-size: 16px;
            background-color: var(--glass-bg);
            backdrop-filter: var(--glass-blur);
        }

        input:focus,
        select:focus,
        textarea:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 8px rgba(42, 109, 244, 0.5);
            background-image: none;
            animation: none;
        }


        /* 按钮统一样式 - 胶囊、投影、动效 */
        button {
            background-color: var(--button-bg);
            color: #fff;
            padding: var(--padding-button-y) var(--padding-button-x);
            border: none;
            border-radius: var(--button-radius);
            cursor: pointer;
            font-size: 16px;
            min-width: 50px;
            min-height: 50px;
            margin-right: 10px;
            box-shadow: 2px 2px 5px var(--shadow-color);
            transition: transform 0.1s ease-in-out, box-shadow 0.3s ease;
        }

        button:last-child {
            margin-right: 0;
        }

        button:hover {
            background-color: var(--button-hover-bg);
            box-shadow: 3px 3px 7px var(--shadow-color);
        }

        button:active {
            transform: scale(0.95);
            box-shadow: var(--button-active-shadow);
        }


      

        /* 折叠数据面板 */
        details {
            border: 1px solid var(--border-color-input);
            border-radius: var(--border-radius-section);
            padding: 15px;
            margin-bottom: 20px;
            background-color: var(--glass-bg);
            backdrop-filter: var(--glass-blur);
            box-shadow: 0 2px 4px var(--shadow-color);
        }

        summary {
            cursor: pointer;
            font-weight: 500;
            padding: 12px;
            border-bottom: 1px solid #eee;
            margin-bottom: 10px;
        }

        /* 结果展示表格 */
        .result-section {
            overflow-x: auto; /* 溢出滚动 - 优化移动端表格 */
            margin-top: 25px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
            border-spacing: 0;
            border: 1px solid var(--border-color-input);
            border-radius: var(--border-radius-section);
            overflow: hidden;
        }

        th, td {
            border: none;
            padding: 14px 10px;
            text-align: center;
            white-space: nowrap;
            font-size: var(--main-font-size);
        }

        th {
            background: linear-gradient(to bottom, var(--table-header-bg-start), var(--table-header-bg-end));
            color: #333;
            font-weight: 600;
            text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.6);
        }

        tbody tr:nth-child(odd) {
            background-color: var(--zebra-stripe-bg);
        }

        td {
            padding: 14px 10px;
        }


        .total-row {
            font-weight: bold;
            background-color: #eee;
        }

             /* Toast 通知 */
        .toast-container {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1002;
            pointer-events: none;
        }

        .toast {
            background-color: var(--glass-bg);
            backdrop-filter: var(--glass-blur);
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 6px 12px var(--shadow-color);
            text-align: center;
            opacity: 0;
            animation: fadeInOut 0.5s ease-out forwards, slideIn 0.5s ease-out forwards; /* 渐入动画 & 滑入 */
            pointer-events: auto;
            position: relative;
            display: flex; /* Flex 布局 */
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中 */
            gap: 15px; /* 图标和文字间距 */
        }

        .toast.error {
            border-top: 5px solid var(--error-color);
        }

        .toast.success {
             border-top: 5px solid var(--success-color);
        }

        .toast.success .toast-icon {
            color: var(--success-color); /* 成功图标颜色 */
        }

        .toast.error .toast-icon {
            color: var(--error-color); /* 错误图标颜色 */
        }


        .toast-icon {
            font-size: 1.5em; /* 图标大小 */
            display: inline-flex; /* 使图标和文字对齐 */
        }


        .toast-message {
            font-size: 1.1em;
            color: #333;
            margin-bottom: 0; /* 移除消息底部外边距，垂直居中 */
            display: inline-block; /* 使文字和图标水平排列 */
        }

        .toast-close-button {
            position: absolute;
            top: 10px;
            right: 10px;
            background: none;
            border: none;
            font-size: 1.2em;
            color: #666;
            cursor: pointer;
            opacity: 0.6;
            transition: opacity 0.3s ease;
        }

        .toast-close-button:hover {
            opacity: 1;
        }


        @keyframes fadeInOut {
            0% { opacity: 0; }
            100% { opacity: 1; }
            /* 动画结束后保持在完全显示状态，方便JS控制移除 */
        }

        @keyframes slideIn {
             0% { transform: translateY(-30px) scaleY(0.9); opacity: 0;} /* 初始从上方滑入 */
             100% { transform: translateY(0) scaleY(1); opacity: 1;}
        }


        /* 错误边框 */
        .error-border {
            border: 2px solid var(--error-color);
        }

        /* 移除移动端日期选择器默认样式 */
        input[type="text"]::-webkit-calendar-picker-indicator {
            opacity: 0;
            position: absolute;
            right: 0;
            top: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }

        /* 固定利率输入框 */
        #fixed-rate-input {
            display: none;
        }

         /* 历史记录样式 */
        .history-section {
            /* 样式已在 .input-section, .calculator-input 中统一定义 */
        }

        .history-section h4 {
            margin-top: 0;
            margin-bottom: 20px;
            font-size: 1.8em;
            font-weight: 500;
        }

        .history-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid #ddd;
        }

        .history-table th, .history-table td {
            border: none;
            padding: 12px;
            text-align: left;
            font-size: 15px;
            white-space: nowrap;
        }

        .history-table th {
            background-color: #6c757d;
            color: #fff;
            text-align: center;
        }

        .history-table tbody tr:nth-child(odd) {
            background-color: var(--zebra-stripe-bg);
        }


        .history-buttons {
            margin-top: 20px;
            text-align: right;
        }

         .history-buttons button {
            margin-left: 15px;
         }

         /* 数字字体 */
        #total-result div {
            font-family: var(--digital-font);
            font-feature_settings: "tnum" 1; /* 等宽数字 */
        }

        /* 日期选择器容器 */
        .date-input-wrapper {
            display: flex;
            align-items: center;
        }

        .date-input-wrapper input[type="text"] {
            flex-grow: 1;
            border-right: none;
            border-radius: var(--border-radius-input) 0 0 var(--border-radius-input);
            padding-right: 0; /* 移除输入框右内边距 */
        }

        .date-picker-button {
            background-color: var(--button-bg);
            color: #fff;
            border: none;
            padding: var(--padding-input);
            border-radius: 0 var(--border-radius-input) var(--border-radius-input) 0;
            cursor: pointer;
            box-shadow: 2px 2px 5px var(--shadow-color);
            transition: background-color 0.3s ease, box-shadow: 0.3s ease;
        }

        .date-picker-button:hover {
            background-color: var(--button-hover-bg);
            box-shadow: 3px 3px 7px var(--shadow-color);
        }

        .date-picker-button:active {
            transform: scale(0.95);
            box-shadow: var(--button-active-shadow);
        }
        .date-picker-button::after {
            content: '📅'; /* 日历图标 - 可替换为Icon Font */
            display: block;
            line-height: 0;
        }

        /* 按钮组响应式间距调整 */
        .calculator-input > div {
            margin-bottom: 15px; /* 默认间距 */
        }

        @media (min-width: 769px) {
            .calculator-input > div {
                margin-bottom: 20px; /* PC端按钮组间距 */
            }
        }

        /* 结果按钮容器 */
        .result-buttons-container {
            display: flex;
            justify-content: flex-start; /* 或 space-between, space-around */
            gap: 10px; /* 按钮间距 */
            margin-bottom: 10px; /* 与表格的间距 */
        }

        .litigation-request-preview {
            background-color: var(--glass-bg);
            border-radius: var(--border-radius-section);
            padding: 20px;
            margin-top: 20px;
            box-shadow: 0 4px 8px var(--shadow-color);
        }

        .copy-litigation-request {
            margin-top: 10px;
            display: flex;
            justify-content: flex-start;
        }
   /* CSS Document */