/* ============================================================
   川姨妹CCP监控系统 — 移动端样式
   ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; font-size:14px; color:#333; background:#f5f6fa; }

.page { display:none; min-height:100vh; }
.page.active { display:block; }

/* 登录页 */
.login-box { padding:60px 30px 30px; text-align:center; }
.logo-icon { width:80px; height:80px; margin:0 auto 16px; background:linear-gradient(135deg,#e74c3c,#c0392b); border-radius:20px; color:#fff; font-size:28px; font-weight:bold; line-height:80px; }
.logo h2 { font-size:20px; margin-bottom:6px; }
.logo p { font-size:13px; color:#999; margin-bottom:30px; }
.form-group { margin-bottom:16px; text-align:left; }
.form-group label { display:block; font-size:13px; color:#666; margin-bottom:6px; font-weight:500; }
.form-group input, .form-group select { width:100%; height:44px; border:1px solid #ddd; border-radius:8px; padding:0 12px; font-size:15px; background:#fff; }
.form-group input:focus { border-color:#e74c3c; outline:none; }

/* 按钮 */
.btn-primary { background:#e74c3c; color:#fff; border:none; border-radius:8px; height:44px; font-size:15px; font-weight:500; cursor:pointer; padding:0 20px; }
.btn-primary:active { background:#c0392b; }
.btn-secondary { background:#fff; color:#666; border:1px solid #ddd; border-radius:8px; height:44px; font-size:15px; cursor:pointer; padding:0 20px; }
.btn-block { width:100%; }
.btn-sm { height:32px; font-size:13px; padding:0 12px; border-radius:6px; cursor:pointer; border:none; }
.btn-back { background:none; border:none; font-size:20px; color:#333; cursor:pointer; padding:0 8px; }

/* 页面头部 */
.page-header { display:flex; align-items:center; padding:12px 16px; background:#fff; border-bottom:1px solid #eee; position:sticky; top:0; z-index:10; }
.page-header h3 { flex:1; text-align:center; font-size:17px; }

/* 产品卡片 */
.card-list { padding:12px; }
.category-card { background:#fff; border-radius:12px; padding:16px; margin-bottom:10px; box-shadow:0 1px 4px rgba(0,0,0,0.06); cursor:pointer; transition:transform 0.15s; }
.category-card:active { transform:scale(0.98); }
.category-card .cat-name { font-size:16px; font-weight:600; color:#333; margin-bottom:6px; }
.category-card .cat-products { font-size:12px; color:#888; line-height:1.6; }
.category-card .cat-badges { margin-top:8px; }
.badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:11px; margin-right:6px; }
.badge-ccp { background:#ffeaea; color:#e74c3c; }
.badge-cp { background:#e8f4fd; color:#2980b9; }
.badge-craft { background:#f0f0f0; color:#666; }

/* 记录信息栏 */
.record-info { background:#fff9e6; padding:10px 16px; font-size:13px; color:#8a6d3b; border-bottom:1px solid #ffe58f; }

/* 表单卡片 */
.form-card { padding:16px; }

/* 控制点列表 */
.cp-list { padding:12px; padding-bottom:80px; }
.cp-item { background:#fff; border-radius:10px; padding:14px; margin-bottom:8px; box-shadow:0 1px 3px rgba(0,0,0,0.05); }
.cp-item.ccp { border-left:4px solid #e74c3c; }
.cp-item.cp { border-left:4px solid #2980b9; }
.cp-item .cp-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.cp-item .cp-code { font-weight:600; font-size:14px; }
.cp-item .cp-type { font-size:11px; padding:2px 8px; border-radius:4px; }
.cp-item .cp-type-ccp { background:#ffeaea; color:#e74c3c; }
.cp-item .cp-type-cp { background:#e8f4fd; color:#2980b9; }
.cp-item .cp-process { font-size:15px; font-weight:500; margin-bottom:4px; }
.cp-item .cp-ol { font-size:12px; color:#888; }
.cp-item .cp-status { margin-top:8px; display:flex; gap:6px; align-items:center; }
.status-dot { width:8px; height:8px; border-radius:50%; }
.status-pending { background:#f39c12; }
.status-done { background:#27ae60; }
.status-deviation { background:#e74c3c; }
.cp-item .cp-actions { margin-top:8px; display:flex; gap:8px; }
.cp-item .cp-actions button { flex:1; }

/* 详情卡片 */
.detail-card { padding:16px; }
.detail-cl, .detail-ol { background:#fff; border-radius:10px; padding:14px; margin-bottom:10px; }
.detail-cl h4 { color:#e74c3c; font-size:14px; margin-bottom:8px; }
.detail-ol h4 { color:#2980b9; font-size:14px; margin-bottom:8px; }
.detail-cl p, .detail-ol p { font-size:13px; line-height:1.8; color:#555; }
.detail-inputs { background:#fff; border-radius:10px; padding:14px; margin-bottom:10px; }
.detail-inputs h4 { font-size:14px; margin-bottom:10px; }
.input-row { display:flex; align-items:center; margin-bottom:10px; }
.input-row label { width:100px; font-size:13px; color:#666; flex-shrink:0; }
.input-row input { flex:1; height:38px; border:1px solid #ddd; border-radius:6px; padding:0 10px; font-size:15px; }
.input-row input:focus { border-color:#e74c3c; outline:none; }
.compliant-switch { display:flex; gap:12px; margin:12px 0; }
.compliant-btn { flex:1; height:40px; border-radius:8px; border:2px solid #ddd; background:#fff; font-size:14px; cursor:pointer; }
.compliant-btn.active-pass { border-color:#27ae60; background:#e8f8e8; color:#27ae60; }
.compliant-btn.active-fail { border-color:#e74c3c; background:#ffeaea; color:#e74c3c; }

/* 拍照区域 */
.photo-section { padding:16px; border-top:8px solid #f5f6fa; }
.photo-section h4 { font-size:14px; margin-bottom:10px; }
.photo-buttons { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.btn-camera { display:flex; align-items:center; gap:4px; padding:8px 12px; background:#fff; border:1px solid #ddd; border-radius:8px; font-size:12px; cursor:pointer; }
.btn-camera .icon { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; background:#e74c3c; color:#fff; border-radius:50%; font-size:10px; font-weight:bold; }
.btn-camera:active { background:#f5f5f5; }
.photo-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.photo-thumb { position:relative; aspect-ratio:1; border-radius:8px; overflow:hidden; }
.photo-thumb img { width:100%; height:100%; object-fit:cover; }
.photo-thumb .photo-type { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,0.6); color:#fff; font-size:10px; padding:2px 6px; }

/* OCR结果 */
.ocr-box { background:#fff; border-radius:10px; padding:12px; margin-top:10px; border:1px solid #ddd; }
.ocr-label { font-size:12px; color:#888; margin-bottom:6px; }
.ocr-text { font-size:12px; color:#666; background:#f9f9f9; padding:8px; border-radius:6px; margin-bottom:6px; max-height:80px; overflow:auto; white-space:pre-wrap; }
.ocr-value { font-size:18px; font-weight:bold; color:#e74c3c; margin-bottom:8px; }

/* 签名区域 */
.sign-section { padding:16px; border-top:8px solid #f5f6fa; padding-bottom:80px; }
.sign-section h4 { font-size:14px; margin-bottom:10px; }
.sign-row { margin-bottom:12px; }
.sign-row label { font-size:13px; color:#666; display:block; margin-bottom:4px; }
.sign-canvas { width:100%; border:1px dashed #ccc; border-radius:6px; background:#fafafa; touch-action:none; }
.sign-actions { display:flex; gap:8px; margin-top:4px; }

/* 底部操作栏 */
.bottom-bar { position:fixed; bottom:0; left:0; right:0; padding:10px 16px; background:#fff; border-top:1px solid #eee; display:flex; gap:10px; z-index:20; }

/* Toast */
.toast { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.9); background:rgba(0,0,0,0.8); color:#fff; padding:10px 24px; border-radius:8px; font-size:14px; z-index:100; opacity:0; transition:all 0.3s; pointer-events:none; }
.toast.show { opacity:1; transform:translate(-50%,-50%) scale(1); }

/* 偏离指示 */
.deviation-banner { background:#e74c3c; color:#fff; padding:10px 16px; font-size:13px; font-weight:500; }

/* ============================================================
   V2.0 新增样式 — 智能判定 / 语音 / 纠偏 / 预警 / 进度条
   ============================================================ */

/* ── 智能判定结果框 ── */
.judge-box { background:#fff; border-radius:10px; padding:14px; margin-bottom:10px; border-left:4px solid #27ae60; transition:border-color 0.3s; }
.judge-box.judge-compliant { border-left-color:#27ae60; }
.judge-box.judge-warning { border-left-color:#f39c12; background:#fffbf0; }
.judge-box.judge-deviation { border-left-color:#e74c3c; background:#fff5f5; }
.judge-box .judge-title { font-size:14px; font-weight:600; margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.judge-box .judge-title .judge-icon { width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:bold; }
.judge-icon.icon-pass { background:#27ae60; }
.judge-icon.icon-warn { background:#f39c12; }
.judge-icon.icon-fail { background:#e74c3c; }
.judge-box .judge-details { font-size:12px; color:#666; line-height:1.8; }
.judge-box .judge-details .detail-row { display:flex; justify-content:space-between; padding:2px 0; border-bottom:1px dashed #f0f0f0; }
.judge-box .judge-details .detail-row:last-child { border-bottom:none; }
.judge-box .judge-details .rule-name { flex:1; }
.judge-box .judge-details .rule-value { font-weight:600; }
.judge-box .judge-details .rule-value.val-pass { color:#27ae60; }
.judge-box .judge-details .rule-value.val-warn { color:#f39c12; }
.judge-box .judge-details .rule-value.val-fail { color:#e74c3c; }
.judge-box .judge-summary { margin-top:8px; font-size:13px; padding:6px 10px; border-radius:6px; background:rgba(0,0,0,0.03); }

/* ── 语音输入区域 ── */
.voice-section { padding:12px 16px; background:#f0f8ff; border-top:1px solid #d0e8ff; }
.voice-section h4 { font-size:14px; margin-bottom:8px; display:flex; align-items:center; gap:4px; }
.voice-section h4 .mic-icon { display:inline-flex; width:18px; height:18px; background:#2980b9; color:#fff; border-radius:50%; font-size:10px; align-items:center; justify-content:center; }
.voice-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; background:#2980b9; color:#fff; border:none; border-radius:20px; font-size:13px; cursor:pointer; transition:background 0.2s; }
.voice-btn:active { background:#1f6da0; }
.voice-btn.recording { background:#e74c3c; animation:pulse-voice 1s infinite; }
@keyframes pulse-voice { 0%,100%{opacity:1} 50%{opacity:0.7} }
.voice-result { margin-top:8px; padding:8px 12px; background:#fff; border-radius:8px; font-size:13px; color:#333; display:none; }
.voice-result.show { display:block; }
.voice-result .voice-text { margin-bottom:4px; }
.voice-result .voice-parsed { font-size:12px; color:#2980b9; }

/* ── 二维码扫描区域 ── */
.qr-section { padding:8px 16px; }
.qr-btn { display:inline-flex; align-items:center; gap:4px; padding:6px 12px; background:#fff; border:1px solid #ddd; border-radius:6px; font-size:12px; cursor:pointer; }
.qr-btn:active { background:#f5f5f5; }
.qr-hint { font-size:11px; color:#999; margin-top:4px; }

/* ── 纠偏推荐面板 ── */
.corrective-box { background:#fff; border-radius:10px; padding:14px; margin-bottom:10px; border:1px solid #f39c12; }
.corrective-box h4 { font-size:14px; color:#f39c12; margin-bottom:8px; display:flex; align-items:center; gap:4px; }
.corrective-box .corrective-item { padding:8px 10px; margin-bottom:6px; background:#fffdf5; border-radius:6px; border-left:3px solid #f39c12; }
.corrective-box .corrective-item .ci-title { font-size:13px; font-weight:600; color:#333; margin-bottom:2px; }
.corrective-box .corrective-item .ci-steps { font-size:12px; color:#666; line-height:1.6; }
.corrective-box .corrective-item .ci-meta { font-size:11px; color:#999; margin-top:4px; display:flex; gap:12px; }
.corrective-box .corrective-item .ci-apply { margin-top:6px; padding:4px 12px; background:#f39c12; color:#fff; border:none; border-radius:4px; font-size:12px; cursor:pointer; }

/* ── 预警徽标和列表 ── */
.alert-badge { position:relative; }
.alert-badge .badge-count { position:absolute; top:-6px; right:-8px; min-width:16px; height:16px; line-height:16px; text-align:center; background:#e74c3c; color:#fff; border-radius:8px; font-size:10px; font-weight:bold; padding:0 4px; }
.alert-center { padding:12px; }
.alert-item { background:#fff; border-radius:10px; padding:12px; margin-bottom:8px; border-left:3px solid #e74c3c; }
.alert-item.alert-warning { border-left-color:#f39c12; }
.alert-item .alert-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.alert-item .alert-title { font-size:14px; font-weight:600; color:#e74c3c; }
.alert-item.alert-warning .alert-title { color:#f39c12; }
.alert-item .alert-time { font-size:11px; color:#999; }
.alert-item .alert-content { font-size:12px; color:#666; line-height:1.6; }
.alert-item .alert-actions { margin-top:8px; display:flex; gap:8px; }
.alert-item .btn-resolve { padding:4px 12px; background:#27ae60; color:#fff; border:none; border-radius:4px; font-size:12px; cursor:pointer; }

/* ── 监控完成进度条 ── */
.progress-section { padding:12px 16px; background:#fff; border-radius:10px; margin-bottom:10px; }
.progress-bar-wrap { height:8px; background:#eee; border-radius:4px; overflow:hidden; margin:6px 0; }
.progress-bar-fill { height:100%; border-radius:4px; transition:width 0.5s ease; background:linear-gradient(90deg,#27ae60,#2ecc71); }
.progress-bar-fill.progress-warning { background:linear-gradient(90deg,#f39c12,#e67e22); }
.progress-bar-fill.progress-danger { background:linear-gradient(90deg,#e74c3c,#c0392b); }
.progress-info { display:flex; justify-content:space-between; font-size:12px; color:#888; }
.progress-info .progress-pct { font-weight:600; color:#333; }

/* ── 多数值OCR展示 ── */
.ocr-multi-box { background:#fff; border-radius:10px; padding:14px; margin-top:10px; border:1px solid #2980b9; }
.ocr-multi-box h4 { font-size:14px; color:#2980b9; margin-bottom:8px; }
.ocr-value-item { display:flex; align-items:center; justify-content:space-between; padding:8px 10px; margin-bottom:6px; background:#f0f8ff; border-radius:6px; cursor:pointer; transition:background 0.2s; }
.ocr-value-item:active { background:#d0e8ff; }
.ocr-value-item .ovi-label { font-size:12px; color:#666; }
.ocr-value-item .ovi-value { font-size:18px; font-weight:bold; color:#e74c3c; }
.ocr-value-item .ovi-confidence { font-size:11px; color:#999; }
.ocr-value-item .ovi-judgment { font-size:11px; padding:1px 6px; border-radius:3px; }
.ocr-value-item .ovi-judgment.pass { background:#e8f8e8; color:#27ae60; }
.ocr-value-item .ovi-judgment.warn { background:#fffbf0; color:#f39c12; }
.ocr-value-item .ovi-judgment.fail { background:#ffeaea; color:#e74c3c; }
.ocr-value-item .ovi-fill-btn { padding:4px 10px; background:#2980b9; color:#fff; border:none; border-radius:4px; font-size:11px; cursor:pointer; }

/* ── 字段级实时判定标记 ── */
.field-judge-icon { display:inline-flex; width:16px; height:16px; border-radius:50%; align-items:center; justify-content:center; font-size:9px; color:#fff; margin-left:4px; vertical-align:middle; }
.field-judge-icon.ji-pass { background:#27ae60; }
.field-judge-icon.ji-warn { background:#f39c12; }
.field-judge-icon.ji-fail { background:#e74c3c; }
.input-row input.input-pass { border-color:#27ae60; background:#f0fff0; }
.input-row input.input-warn { border-color:#f39c12; background:#fffbf0; }
.input-row input.input-fail { border-color:#e74c3c; background:#fff5f5; }

/* ── 设备校准提醒卡片 ── */
.calibration-card { background:#fff3cd; border-radius:10px; padding:12px; margin-bottom:8px; border-left:3px solid #f39c12; }
.calibration-card .cal-title { font-size:13px; font-weight:600; color:#856404; }
.calibration-card .cal-info { font-size:12px; color:#856404; margin-top:4px; }

/* ── V2.0页面过渡动画 ── */
.page { transition:opacity 0.2s ease; }
.v2-badge { display:inline-block; background:linear-gradient(135deg,#2980b9,#3498db); color:#fff; font-size:10px; padding:1px 6px; border-radius:3px; margin-left:4px; vertical-align:middle; }

/* ── 车间大屏特定 ── */
.screen-page { background:#0a1628; color:#e0e6ef; min-height:100vh; font-size:14px; }
.screen-page * { color:inherit; }