/* ============================================================
   农民工讨薪H5系统 - 前台样式
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: 14px; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  background: #F5F7FA; color: #1A1A2E; line-height: 1.6;
  min-height: 100vh; padding-bottom: env(safe-area-inset-bottom);
}
a { text-decoration: none; color: inherit; }
input, textarea, select { font-family: inherit; font-size: 14px; outline: none; border: none; background: transparent; width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; outline: none; }

/* ===== 顶部导航 ===== */
.navbar {
  position: sticky; top: 0; z-index: 100;
  height: 48px; background: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 600; border-bottom: 1px solid #EEE;
  position: relative;
}
.navbar .back { position: absolute; left: 14px; font-size: 22px; color: #666; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.navbar .right { position: absolute; right: 14px; font-size: 13px; color: #1565C0; }

/* ===== 首页 ===== */
.hero {
  background: linear-gradient(135deg, #0D47A1 0%, #1565C0 40%, #1976D2 70%, #42A5F5 100%);
  color: #fff; padding: 40px 20px 50px; text-align: center; position: relative; overflow: hidden;
}
.hero::before { content: ''; position: absolute; top: -60px; right: -40px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,0.08); }
.hero::after { content: ''; position: absolute; bottom: -40px; left: -20px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,0.05); }
.hero-logo {
  width: 60px; height: 60px; margin: 0 auto 14px;
  background: rgba(255,255,255,0.2); backdrop-filter: blur(10px);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 28px; border: 2px solid rgba(255,255,255,0.3);
}
.hero h1 { font-size: 26px; font-weight: 800; margin-bottom: 8px; letter-spacing: 2px; position: relative; z-index: 1; }
.hero p { font-size: 13px; opacity: 0.9; position: relative; z-index: 1; }
.hero-tags { display: flex; justify-content: center; gap: 8px; margin-top: 18px; position: relative; z-index: 1; flex-wrap: wrap; }
.hero-tag { background: rgba(255,255,255,0.18); padding: 5px 14px; border-radius: 14px; font-size: 12px; }

/* 功能大按钮 */
.main-actions { padding: 0 16px; margin-top: -24px; position: relative; z-index: 2; }
.action-btn {
  display: flex; align-items: center; gap: 14px;
  border-radius: 16px; padding: 22px 18px; color: #fff;
  margin-bottom: 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  transition: transform .2s;
}
.action-btn:active { transform: scale(0.98); }
.action-btn.blue { background: linear-gradient(135deg, #1565C0, #1976D2); }
.action-btn.orange { background: linear-gradient(135deg, #FF6F00, #F57C00); }
.action-icon {
  width: 52px; height: 52px; background: rgba(255,255,255,0.22);
  border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0;
}
.action-text { flex: 1; text-align: left; }
.action-text h3 { font-size: 18px; font-weight: 700; margin-bottom: 3px; }
.action-text p { font-size: 12px; opacity: 0.85; }
.action-arrow { font-size: 22px; opacity: 0.7; }

/* 公告 */
.notice {
  margin: 18px 16px; background: #FFF8E1; border-radius: 10px;
  padding: 12px 14px; font-size: 12px; color: #E65100;
  display: flex; gap: 8px; align-items: flex-start;
}
.notice-icon { flex-shrink: 0; }

/* 页脚 */
.footer { text-align: center; padding: 24px 16px 32px; font-size: 11px; color: #999; line-height: 1.8; }

/* ===== 表单卡片 ===== */
.form-card { background: #fff; margin: 12px; border-radius: 14px; padding: 4px 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.form-field { padding: 14px 0; border-bottom: 1px solid #F0F0F0; }
.form-field:last-child { border-bottom: none; }
.form-label { font-size: 13px; color: #555; margin-bottom: 6px; display: flex; align-items: center; }
.form-label .req { color: #C62828; margin-right: 2px; }
.form-label .extra { margin-left: auto; font-size: 12px; color: #1565C0; }
.form-input { font-size: 15px; color: #1A1A2E; min-height: 22px; }
.form-input::placeholder { color: #BBB; }
.form-textarea { min-height: 80px; resize: none; line-height: 1.6; }
.form-count { text-align: right; font-size: 11px; color: #CCC; margin-top: 4px; }
.form-hint { font-size: 11px; color: #999; margin-top: 6px; }

/* 单选/多选 */
.radio-group, .checkbox-group { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.radio-item, .checkbox-item {
  border: 1.5px solid #E0E0E0; border-radius: 10px; padding: 12px 14px;
  font-size: 14px; display: flex; align-items: center; gap: 10px; cursor: pointer;
  transition: all .2s;
}
.radio-item.active, .checkbox-item.active { border-color: #1565C0; background: #F0F7FF; color: #1565C0; font-weight: 600; }
.radio-circle { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #CCC; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.radio-item.active .radio-circle { border-color: #1565C0; background: #1565C0; }
.radio-circle::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; display: none; }
.radio-item.active .radio-circle::after { display: block; }
.checkbox-square { width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid #CCC; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; color: #fff; }
.checkbox-item.active .checkbox-square { border-color: #1565C0; background: #1565C0; }
.checkbox-item.active .checkbox-square::after { content: '✓'; }

/* 选择器样式 */
.select-picker { display: flex; align-items: center; justify-content: space-between; }
.select-picker .arrow { color: #CCC; font-size: 16px; }

/* 步骤指示器 */
.step-indicator { display: flex; padding: 12px 16px; background: #fff; gap: 4px; }
.step-dot { flex: 1; height: 3px; background: #E0E0E0; border-radius: 2px; }
.step-dot.active { background: #1565C0; }

/* 底部按钮 */
.form-bottom {
  position: sticky; bottom: 0; background: #fff; padding: 10px 12px;
  border-top: 1px solid #EEE; display: flex; gap: 10px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 50;
}
.btn { flex: 1; padding: 13px; border-radius: 10px; font-size: 15px; font-weight: 600; text-align: center; transition: opacity .2s; }
.btn:active { opacity: 0.8; }
.btn-primary { background: linear-gradient(90deg, #1565C0, #1976D2); color: #fff; }
.btn-secondary { background: #E3F2FD; color: #1565C0; flex: 0 0 100px; }
.btn-orange { background: linear-gradient(90deg, #FF6F00, #F57C00); color: #fff; }
.btn-block { width: 100%; }

/* 同意须知 */
.agree-box { display: flex; gap: 10px; align-items: flex-start; padding: 14px 0; }
.agree-check { width: 18px; height: 18px; border: 1.5px solid #CCC; border-radius: 4px; flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; }
.agree-box.checked .agree-check { border-color: #1565C0; background: #1565C0; }
.agree-box.checked .agree-check::after { content: '✓'; }
.agree-text { font-size: 12px; color: #666; line-height: 1.7; }

/* 填写说明 */
.form-notice { background: #F8F9FA; border-radius: 8px; padding: 12px; font-size: 12px; color: #888; line-height: 1.7; margin: 12px; }

/* ===== 语音录制 ===== */
.voice-section { background: #fff; margin: 12px; border-radius: 14px; padding: 20px 16px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.voice-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.voice-desc { font-size: 12px; color: #888; margin-bottom: 20px; }
.voice-record-btn {
  width: 100px; height: 100px; border-radius: 50%; margin: 0 auto;
  background: linear-gradient(135deg, #1565C0, #0D47A1); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(21,101,192,0.35); position: relative;
}
.voice-record-btn.recording { background: linear-gradient(135deg, #C62828, #B71C1C); box-shadow: 0 6px 20px rgba(198,40,40,0.35); }
.voice-record-btn .icon { font-size: 32px; margin-bottom: 2px; }
.voice-record-btn .text { font-size: 12px; font-weight: 600; }
.voice-record-btn.recording::before {
  content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px;
  border-radius: 50%; background: rgba(198,40,40,0.2); animation: pulse 1.2s infinite;
}
@keyframes pulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.3); opacity: 0; } }
.voice-timer { font-size: 28px; font-weight: 700; color: #C62828; font-family: monospace; margin: 16px 0 8px; }
.voice-wave { display: flex; justify-content: center; gap: 3px; height: 30px; align-items: flex-end; margin-bottom: 16px; }
.voice-wave span { width: 3px; background: #C62828; border-radius: 2px; animation: wave 0.8s infinite ease-in-out; }
.voice-wave span:nth-child(1) { animation-delay: 0s; height: 40%; }
.voice-wave span:nth-child(2) { animation-delay: 0.1s; height: 70%; }
.voice-wave span:nth-child(3) { animation-delay: 0.2s; height: 100%; }
.voice-wave span:nth-child(4) { animation-delay: 0.3s; height: 60%; }
.voice-wave span:nth-child(5) { animation-delay: 0.4s; height: 85%; }
.voice-wave span:nth-child(6) { animation-delay: 0.5s; height: 50%; }
.voice-wave span:nth-child(7) { animation-delay: 0.6s; height: 75%; }
@keyframes wave { 0%, 100% { transform: scaleY(0.5); } 50% { transform: scaleY(1); } }
.voice-actions { display: flex; gap: 12px; margin-top: 16px; }
.voice-result { background: #F5F5F5; border-radius: 10px; padding: 12px; display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.voice-play-btn { width: 36px; height: 36px; background: #1565C0; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.voice-info { flex: 1; text-align: left; }
.voice-info .name { font-size: 13px; font-weight: 600; }
.voice-info .meta { font-size: 11px; color: #999; }
.voice-delete { color: #999; font-size: 18px; padding: 4px; }

/* ===== 成功页 ===== */
.success-page { text-align: center; padding: 60px 24px; }
.success-icon { width: 80px; height: 80px; margin: 0 auto 20px; background: linear-gradient(135deg, #2E7D32, #1B5E20); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 40px; color: #fff; box-shadow: 0 8px 24px rgba(46,125,50,0.3); }
.success-page h2 { font-size: 22px; margin-bottom: 10px; }
.success-page p { font-size: 14px; color: #666; margin-bottom: 8px; }
.case-no-box { background: #F0F7FF; border-radius: 12px; padding: 16px; margin: 24px 16px; }
.case-no-box .label { font-size: 13px; color: #666; margin-bottom: 6px; }
.case-no-box .no { font-size: 20px; font-weight: 700; color: #1565C0; letter-spacing: 1px; }
.success-tips { background: #FFF8E1; border-radius: 10px; padding: 14px; margin: 0 16px 24px; text-align: left; font-size: 12px; color: #E65100; line-height: 1.8; }

/* ===== 登录页 ===== */
.login-page { padding: 40px 20px; }
.login-header { text-align: center; margin-bottom: 30px; }
.login-icon { width: 64px; height: 64px; margin: 0 auto 14px; background: linear-gradient(135deg, #FF6F00, #F57C00); border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 30px; color: #fff; }
.login-header h2 { font-size: 20px; margin-bottom: 6px; }
.login-header p { font-size: 13px; color: #888; }
.login-form { background: #fff; border-radius: 14px; padding: 20px 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.login-field { margin-bottom: 18px; }
.login-field label { display: block; font-size: 13px; color: #555; margin-bottom: 8px; }
.login-field input { border: 1.5px solid #E0E0E0; border-radius: 10px; padding: 12px 14px; font-size: 15px; transition: border-color .2s; }
.login-field input:focus { border-color: #1565C0; }
.login-tip { background: #FFF8E1; border-radius: 8px; padding: 10px 12px; font-size: 11px; color: #E65100; line-height: 1.6; margin-top: 8px; }

/* ===== 个人中心 ===== */
.user-header { background: linear-gradient(135deg, #FF6F00, #F57C00); color: #fff; padding: 24px 16px 36px; display: flex; align-items: center; gap: 12px; }
.user-avatar { width: 52px; height: 52px; background: rgba(255,255,255,0.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.user-info h3 { font-size: 17px; margin-bottom: 2px; }
.user-info p { font-size: 13px; opacity: 0.85; }
.user-logout { margin-left: auto; font-size: 13px; opacity: 0.85; padding: 6px 12px; background: rgba(255,255,255,0.2); border-radius: 14px; }
.user-stats { margin: -20px 14px 14px; background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); display: flex; justify-content: space-around; text-align: center; }
.user-stats .item .num { font-size: 24px; font-weight: 800; }
.user-stats .item .num.blue { color: #1565C0; }
.user-stats .item .num.orange { color: #FF6F00; }
.user-stats .item .num.green { color: #2E7D32; }
.user-stats .item .label { font-size: 11px; color: #888; margin-top: 2px; }
.user-stats .divider { width: 1px; background: #EEE; }

/* 案件卡片 */
.case-list { padding: 0 14px; }
.case-card { background: #fff; border-radius: 12px; padding: 14px; margin-bottom: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.case-card .head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.case-card .no { font-size: 13px; font-weight: 700; }
.case-status { padding: 3px 10px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.case-card .title { font-size: 14px; margin-bottom: 4px; color: #333; }
.case-card .time { font-size: 11px; color: #999; margin-bottom: 10px; }
.case-card .actions { display: flex; gap: 8px; }
.case-card .action-btn-mini { flex: 1; text-align: center; padding: 8px; border-radius: 8px; font-size: 12px; font-weight: 600; }
.case-card .action-btn-mini.blue { background: #F0F7FF; color: #1565C0; }
.case-card .action-btn-mini.orange { background: #FFF8E1; color: #E65100; }
.case-card .action-btn-mini.green { background: #E8F5E9; color: #2E7D32; }

.empty-state { text-align: center; padding: 60px 20px; color: #999; }
.empty-state .icon { font-size: 48px; margin-bottom: 12px; opacity: 0.5; }

/* ===== 案件详情 - 时间线 ===== */
.detail-section { background: #fff; margin: 12px; border-radius: 14px; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.detail-section h4 { font-size: 15px; font-weight: 700; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #F0F0F0; }
.detail-row { display: flex; padding: 8px 0; font-size: 13px; }
.detail-row .label { width: 100px; color: #888; flex-shrink: 0; }
.detail-row .value { flex: 1; color: #333; word-break: break-all; }

.timeline { position: relative; padding-left: 24px; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: #E0E0E0; }
.timeline-item { position: relative; padding-bottom: 18px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before { content: ''; position: absolute; left: -21px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #1565C0; border: 2px solid #fff; box-shadow: 0 0 0 2px #1565C0; }
.timeline-item.done::before { background: #2E7D32; box-shadow: 0 0 0 2px #2E7D32; }
.timeline-item.pending::before { background: #CCC; box-shadow: 0 0 0 2px #CCC; }
.timeline-item .time { font-size: 11px; color: #999; margin-bottom: 2px; }
.timeline-item .title { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.timeline-item .desc { font-size: 12px; color: #666; line-height: 1.6; }

/* 图片网格 */
.image-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.image-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }

/* 办结信息卡片 */
.close-card { background: linear-gradient(135deg, #E8F5E9, #F1F8E9); border: 1px solid #A5D6A7; border-radius: 12px; padding: 14px; }
.close-card .close-title { font-size: 14px; font-weight: 700; color: #2E7D32; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }

/* ===== Toast ===== */
.toast {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.75); color: #fff; padding: 12px 24px; border-radius: 8px;
  font-size: 14px; z-index: 9999; max-width: 80%; text-align: center;
  animation: toastIn .2s;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -40%); } to { opacity: 1; transform: translate(-50%, -50%); } }

/* Loading */
.loading-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 9998; display: flex; align-items: center; justify-content: center; }
.loading-box { background: #fff; border-radius: 12px; padding: 24px 32px; text-align: center; }
.loading-spinner { width: 36px; height: 36px; border: 3px solid #E0E0E0; border-top-color: #1565C0; border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 10px; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-size: 13px; color: #666; }

/* 领域选择大卡片 */
.field-card {
  border: 2px solid #E0E0E0; border-radius: 14px; padding: 18px 16px;
  margin-bottom: 12px; display: flex; align-items: center; gap: 12px;
  transition: all .2s; cursor: pointer; background: #fff;
}
.field-card.active { border-color: #1565C0; background: #F0F7FF; }
.field-card .radio-circle { width: 22px; height: 22px; }
.field-card.active .radio-circle { border-color: #1565C0; background: #1565C0; }
.field-card.active .radio-circle::after { display: block; }

.field-card .field-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.field-card .field-icon.blue { background: #E3F2FD; color: #1565C0; }
.field-card .field-icon.orange { background: #FFF3E0; color: #FF6F00; }
.field-card .field-text h4 { font-size: 15px; margin-bottom: 2px; }
.field-card .field-text p { font-size: 12px; color: #888; }