/* 计算器16（计算器）专属样式 — 由 jsq/calculator16.php 内联 <style> 收敛而来
   页面级作用域，不污染全局。如需去重公共组件，见 _audit_reports 技术债 #260。 */

/* ========== 计算器16专属样式 ========== */
        :root {
            --primary: #2c80ff;
            --primary-dark: #1a5fcc;
            --primary-light: #e6f0ff;
            --block-bg: #f8fafc;
            --border-light: #eaf2ff;
            --text-secondary: #64748b;
        }

        .calc-container { display: flex; gap: var(--column-gap, 16px); padding: 20px; }

        .left-panel { flex: 1; min-width: 0; }

        .right-panel { flex: 1; min-width: 0; max-height: none; overflow: visible; }

        
        /* 表单布局：两列网格 */
        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

        .form-row.full-width { grid-column: 1 / -1; }

        
        .input-item { display: flex; flex-direction: column; gap: 6px; }

        .input-item input, .input-item select {
            padding: 10px 12px; border: 1px solid var(--primary-light);
            border-radius: 0; font-size: 0.9rem; background: white; transition: 0.2s;
            box-sizing: border-box;
            width: 100%;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
        }

        .input-item input:focus, .input-item select:focus {
            border-color: var(--primary); outline: none;
            box-shadow: 0 0 0 3px rgba(102,126,234,0.1);
        }

        
        /* 表单控件移动端优化 */
        select {
            background-image: url('data:image/svg+xml;utf8,<svg fill="%238a9db0" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
            background-repeat: no-repeat;
            background-position: right 12px center;
            background-size: 20px;
            padding-right: 40px;
        }

        
        /* 数字输入框的旋转按钮优化 */
        input[type="number"] {
            -moz-appearance: textfield;
        }

        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .warning-text { color: var(--danger); font-size: 0.75rem; font-weight: 600; }

        .form-note { font-size: 0.75rem; color: var(--gray-500); margin-top: 4px; }

        .input-item.full-width { grid-column: 1 / -1; }

        #cond_preview { transition: all 0.3s; }

        #cond_preview.result-ok { background: var(--success-50); color: #15803d; border: 1px solid var(--success-50); }

        #cond_preview.result-fail { background: var(--danger-50); color: #b91c1c; border: 1px solid var(--danger-50); }

        
        /* 按钮样式（统一使用全局 btn btn-primary / btn-success） */
        
        /* 结果样式 */
        .result-block {
            background: white;
            border-radius: 0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            border: 1px solid var(--gray-100);
            overflow: hidden;
        }

        .result-table th { background: var(--primary-light); padding: 8px; text-align: left; border-bottom: 2px solid var(--border-light); font-weight: 600; }

        .result-table td { padding: 6px 8px; border-bottom: 1px solid var(--border-light); }

        .action-buttons { display: flex; align-items: center; flex-wrap: wrap; margin-top: 20px; gap: 12px; }

        
        /* 响应式：小屏幕优化 */
        @media (max-width: 768px) {
        .calculator-wrapper { grid-template-columns: 1fr !important; }
            .main-layout { flex-direction: column; gap: 16px; }
            .left-panel, .right-panel { width: 100%; max-width: 100%; }
            .calc-container { padding: 12px; }
            .form-grid { grid-template-columns: 1fr; gap: 12px; }
            .action-buttons { flex-direction: column; gap: 12px; }
            .btn { width: 100%; margin-left: 0; padding: 14px 20px; font-size: 1.05rem; min-height: 50px; }
            .calc-block { margin-bottom: 16px; }
            .block-header { padding: 10px 16px; font-size: 1rem; }
            .block-content { padding: 12px; }
            .input-item input, .input-item select { 
                padding: 12px 14px; 
                font-size: 0.95rem;
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
            }
            .result-block { margin-top: 8px; }

            .result-table { font-size: 0.75rem; }
            .result-table th, .result-table td { padding: 6px 8px; }
        }

        
        /* 超小屏幕优化（手机竖屏） */
        @media (max-width: 480px) {
            .calc-container { padding: 8px; }
            .calc-block { border-radius: 0; margin-bottom: 12px; }
            .form-grid { gap: 10px; }
            .action-buttons { gap: 10px; }
            .btn { padding: 13px 16px; font-size: 1rem; min-height: 48px; }
            .input-item label { font-size: 0.8rem; }
            .input-item input, .input-item select { padding: 10px 12px; font-size: 0.9rem; }
            .result-table { font-size: 0.7rem; }
            .result-table th, .result-table td { padding: 5px 6px; }
        }

        
        /* 全屏显示优化 */
        .calc-container { width: 100%; max-width: 100%; padding: 20px; }

        .main-layout { gap: 20px; }

        @media (max-width: 1024px) {
            .calc-container { padding: 15px; }
        }

        @media (max-width: 768px) {
        .calculator-wrapper { grid-template-columns: 1fr !important; }
            .calc-container { padding: 10px; }
        }