/* ===== 全局重置 ===== */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

:root {
  --primary: #3B82F6;
  --primary-dark: #1E40AF;
  --primary-light: #EFF6FF;
  --primary-lighter: #DBEAFE;
  --bg: #F1F5F9;
  --card-bg: #FFFFFF;
  --text: #1E293B;
  --text-secondary: #64748B;
  --text-tertiary: #94A3B8;
  --border: #E2E8F0;
  --danger: #EF4444;
  --warning: #F59E0B;
  --success: #10B981;
  --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04);
  --radius: 10px;
}

html, body {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 15px; color: var(--text); background: var(--bg);
  line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}

#app { min-height: 100vh; max-width: 750px; margin: 0 auto; background: var(--bg); }

/* ===== 导航栏 ===== */
.nav-bar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; height: 50px; padding: 0 12px;
  background: var(--card-bg); border-bottom: 0.5px solid var(--border);
}
.nav-title { flex:1; text-align:center; font-size:17px; font-weight:600; }
.nav-back { width:36px; font-size:28px; color:var(--primary); line-height:1; text-align:center; cursor:pointer; }
.nav-right { min-width:36px; font-size:15px; color:var(--primary); text-align:right; cursor:pointer; display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.nav-refresh { font-size:20px; color:var(--text-secondary); cursor:pointer; line-height:1; padding:2px; -webkit-tap-highlight-color:transparent; }

/* ===== 页面内容 ===== */
.page-content { min-height: calc(100vh - 50px); padding-bottom: 20px; }
.page-content.with-tabbar { padding-bottom: 65px; }

/* ===== 卡片 ===== */
.card {
  background: var(--card-bg); border-radius: var(--radius); margin: 12px; padding: 16px;
  box-shadow: var(--shadow); border: 1px solid #CBD5E1;
}
.card-title { font-size:16px; font-weight:600; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; }
.card-title::before { content:''; display:inline-block; width:4px; height:16px; background:var(--primary); border-radius:2px; margin-right:8px; vertical-align:middle; }

/* ===== 按钮（合并两份定义） ===== */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 16px; font-size:15px; font-weight:600;
  border:none; border-radius:8px; cursor:pointer; transition:all .15s;
}
.btn:active { transform:scale(.97); }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:disabled { opacity:.5; }
.btn-secondary { background:var(--border); color:var(--text-secondary); }
.btn-danger { background:var(--danger); color:#fff; }
.btn-success { background:var(--success); color:#fff; }
.btn-outline { background:transparent; border:1px solid var(--border); color:var(--text); }
.btn-block { display:flex; width:100%; }
.btn-sm { height:32px; font-size:13px; padding:0 12px; border-radius:6px; }

/* ===== 表单 — 卡片式行内布局（设置页用） ===== */
.form-card { background:var(--card-bg); margin:12px; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.form-item { display:flex; align-items:flex-start; padding:12px 16px; border-bottom:0.5px solid var(--border); min-height:52px; }
.form-item:last-child { border-bottom:none; }
.form-item .form-label { width:100px; font-size:15px; color:var(--text); padding-top:8px; flex-shrink:0; }
.form-item .form-input,
.form-item .form-select,
.form-item .form-textarea { flex:1; border:none; outline:none; font-size:15px; color:var(--text); background:transparent; padding:8px 0; min-height:36px; }
.form-item .form-textarea { min-height:80px; resize:none; line-height:1.6; }

/* ===== 表单 — 弹窗式标签上置布局（FormBuilder用） ===== */
.form-group { margin-bottom:16px; }
.form-label { display:block; font-size:13px; color:var(--text-secondary); margin-bottom:6px; font-weight:500; }
.form-label.required::after { content:' *'; color:var(--danger); }
.form-input {
  width:100%; height:44px; border:1.5px solid var(--border); border-radius:8px;
  padding:0 12px; font-size:15px; outline:none; transition:border-color .2s;
  background:var(--card-bg); color:var(--text); -webkit-appearance:none;
}
.form-input:focus { border-color:var(--primary); }
.form-input::placeholder { color:var(--text-tertiary); }
select.form-input {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394A3B8' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:32px;
}
.form-divider { height:1px; background:var(--border); margin:16px -24px; }

/* ===== 列表 ===== */
.list { background:var(--card-bg); margin:12px; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.list-item { display:flex; align-items:center; padding:14px 16px; border-bottom:0.5px solid var(--border); }
.list-item:last-child { border-bottom:none; }
.list-item-content { flex:1; min-width:0; }
.list-item-title { font-size:15px; font-weight:500; margin-bottom:4px; }
.list-item-desc { font-size:13px; color:var(--text-secondary); }
.list-item-arrow { color:var(--text-tertiary); margin-left:8px; }

/* ===== 标签 ===== */
.tag { display:inline-block; padding:2px 8px; font-size:12px; border-radius:4px; margin-right:4px; }
.tag-blue { background:var(--primary-light); color:var(--primary-dark); }
.tag-green { background:#D1FAE5; color:#065F46; }
.tag-orange { background:#FEF3C7; color:#92400E; }
.tag-red { background:#FEE2E2; color:#991B1B; }
.tag-gray { background:#F1F5F9; color:#64748B; }

/* ===== 统计卡片 ===== */
.stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:12px; }
.stat-card { background:var(--card-bg); border-radius:var(--radius); padding:16px; text-align:center; box-shadow:var(--shadow); }
.stat-value { font-size:26px; font-weight:700; color:var(--primary); margin-bottom:4px; }
.stat-label { font-size:13px; color:var(--text-secondary); }

/* ===== 菜单网格 ===== */
.menu-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; background:var(--card-bg); margin:12px; border-radius:var(--radius); padding:16px 0; box-shadow:var(--shadow); }
.menu-item { display:flex; flex-direction:column; align-items:center; padding:8px 4px; cursor:pointer; }
.menu-item:active { opacity:.6; }
.menu-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:6px; }
.menu-text { font-size:12px; }

/* ===== 底部Tab栏 ===== */
.tab-bar { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:750px; display:flex; background:var(--card-bg); border-top:0.5px solid var(--border); z-index:99; padding-bottom:env(safe-area-inset-bottom); }
.tab-item { flex:1; display:flex; flex-direction:column; align-items:center; padding:6px 0; cursor:pointer; color:var(--text-tertiary); }
.tab-item.active { color:var(--primary); }
.tab-icon { font-size:22px; line-height:1; margin-bottom:2px; }
.tab-text { font-size:11px; }

/* ===== Toast ===== */
.toast { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(.9); background:rgba(0,0,0,.75); color:#fff; padding:12px 24px; border-radius:8px; font-size:14px; z-index:9999; opacity:0; transition:all .3s; pointer-events:none; max-width:80%; text-align:center; }
.toast.show { opacity:1; transform:translate(-50%,-50%) scale(1); }

/* ===== Loading ===== */
.loading-mask { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.3); display:flex; align-items:center; justify-content:center; z-index:9998; }
.loading-spinner { background:rgba(0,0,0,.8); border-radius:12px; padding:24px; text-align:center; }
.loading-spinner .spinner { width:36px; height:36px; border:3px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite; margin:0 auto 8px; }
.loading-text { color:#fff; font-size:14px; }
@keyframes spin { to { transform:rotate(360deg); } }

/* 行内加载指示器（浅色背景） */
.loading-hint { text-align:center; padding:20px; color:var(--text-tertiary); font-size:13px; }
.spinner-inline { width:36px; height:36px; border:3px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:spin .8s linear infinite; margin:0 auto 8px; }

/* ===== 空状态 ===== */
.empty-state { text-align:center; padding:60px 20px; color:var(--text-tertiary); }
.empty-state-icon { font-size:48px; margin-bottom:12px; }

/* ===== 搜索栏 ===== */
.search-bar { padding:8px 12px; background:var(--card-bg); border-bottom:0.5px solid var(--border); position:sticky; top:50px; z-index:50; }
.search-bar + .search-bar { border-top:none; } /* 多层搜索栏不重复边框 */
.search-input-wrap { display:flex; align-items:center; background:var(--bg); border-radius:8px; padding:6px 10px; }
.search-icon { font-size:16px; color:var(--text-tertiary); margin-right:6px; }
.search-input { flex:1; border:none; outline:none; background:transparent; font-size:14px; }

/* ===== 模态弹窗 ===== */
.modal-mask {
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,.5); z-index:1000;
  display:flex; align-items:center; justify-content:center; padding:16px;
  animation:fadeIn .2s;
}
.modal-content {
  background:#fff; border-radius:14px; width:100%; max-width:420px;
  max-height:85vh; display:flex; flex-direction:column; overflow:hidden;
}
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:0.5px solid var(--border); flex-shrink:0; }
.modal-title { font-size:17px; font-weight:700; }
.modal-close { font-size:22px; color:var(--text-tertiary); cursor:pointer; padding:0 4px; }
.modal-body { padding:16px 20px; overflow-y:auto; flex:1; }
.modal-footer { display:flex; gap:12px; padding:12px 20px; border-top:0.5px solid var(--border); flex-shrink:0; }
.modal-footer .btn { flex:1; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }

/* ===== 数据表格 ===== */
.data-table { width:100%; border-collapse:collapse; font-size:13px; }
.data-table th { background:var(--bg); padding:8px 10px; text-align:left; font-weight:600; color:var(--text-secondary); white-space:nowrap; }
.data-table td { padding:8px 10px; border-bottom:0.5px solid var(--border); white-space:nowrap; }

/* ===== 浮动按钮 ===== */
.fab { position:fixed; bottom:70px; right:20px; width:50px; height:50px; border-radius:50%; background:var(--primary); color:#fff; font-size:28px; border:none; box-shadow:0 4px 12px rgba(59,130,246,.4); cursor:pointer; z-index:50; display:flex; align-items:center; justify-content:center; }
.fab:active { transform:scale(.9); }

/* ===== 汇总栏 ===== */
.summary-bar { display:flex; background:var(--card-bg); margin:12px; border-radius:var(--radius); padding:12px 16px; box-shadow:var(--shadow); justify-content:space-around; }
.summary-item { text-align:center; }
.summary-value { font-size:18px; font-weight:700; }
.summary-label { font-size:12px; color:var(--text-secondary); margin-top:2px; }

/* ===== 登录页 ===== */
.login-page { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--primary), var(--primary-dark)); padding:40px 24px; }
.login-logo { font-size:48px; margin-bottom:16px; }
.login-title { color:#fff; font-size:24px; font-weight:700; margin-bottom:8px; }
.login-subtitle { color:rgba(255,255,255,.7); font-size:14px; margin-bottom:40px; }
.login-card { background:#fff; border-radius:16px; padding:24px; width:100%; max-width:350px; box-shadow:0 8px 32px rgba(0,0,0,.12); }
.login-input-group { margin-bottom:16px; }
.login-label { font-size:14px; color:var(--text-secondary); margin-bottom:6px; display:block; }
.login-input { width:100%; height:44px; border:1px solid var(--border); border-radius:8px; padding:0 12px; font-size:15px; outline:none; transition:border-color .2s; }
.login-input:focus { border-color:var(--primary); }

/* ===== 辅助类 ===== */
.text-right{text-align:right} .text-center{text-align:center}
.text-primary{color:var(--primary)} .text-danger{color:var(--danger)} .text-success{color:var(--success)}
.text-secondary{color:var(--text-secondary)} .text-tertiary{color:var(--text-tertiary)}
.text-sm{font-size:13px} .text-lg{font-size:17px} .text-bold{font-weight:600}
.flex{display:flex} .flex-1{flex:1} .flex-between{display:flex;justify-content:space-between;align-items:center}
.gap-8{gap:8px} .gap-12{gap:12px} .mt-8{margin-top:8px} .mt-16{margin-top:16px} .mb-8{margin-bottom:8px} .mb-16{margin-bottom:16px}
.hidden{display:none!important}

/* ===== 骨架屏 ===== */
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
.skeleton-card { background:var(--card-bg); border-radius:var(--radius); margin:12px; padding:16px; box-shadow:var(--shadow); }
.skeleton-line { height:14px; border-radius:4px; margin-bottom:8px; background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%); background-size:200% 100%; animation:shimmer 1.5s infinite; }
.skeleton-line.short { width:60%; }
.skeleton-line.medium { width:80%; }
.skeleton-line.long { width:100%; }

/* ===== 表单弹窗 ===== */
.form-modal-content { max-width:420px; max-height:90vh; display:flex; flex-direction:column; }
.form-modal-content .modal-body { overflow-y:auto; flex:1; }

/* ===== 首页新版样式 ===== */
.home-section { margin-bottom:4px; padding:0 12px; }
.home-section-title { font-size:15px; font-weight:700; color:var(--text); margin:16px 4px 8px; }
.todo-card { display:flex; align-items:center; padding:14px 16px; margin:6px 0; cursor:pointer; }
.todo-card:active { background:var(--bg); }
.todo-icon { font-size:22px; margin-right:12px; flex-shrink:0; }
.todo-text { flex:1; font-size:14px; font-weight:500; }
.todo-arrow { font-size:20px; color:var(--text-tertiary); }
.home-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.home-stat-item { background:var(--card-bg); border-radius:var(--radius); padding:16px; text-align:center; box-shadow:var(--shadow); cursor:pointer; }
.home-stat-item:active { transform:scale(.97); }
.home-stat-value { font-size:24px; font-weight:800; line-height:1.2; }
.home-stat-label { font-size:12px; color:var(--text-secondary); margin-top:4px; }

/* ===== 快捷入口卡片（跨页面复用） ===== */
.quick-entries { display:flex; gap:10px; padding:10px 16px; background:#fff; border-bottom:0.5px solid var(--border); }
.quick-entries.grid-2 { display:grid; grid-template-columns:1fr 1fr; }
.quick-entry {
  flex:1; display:flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:8px; cursor:pointer;
}
.quick-entry:active { opacity:.7; }
.quick-entry-icon { font-size:20px; line-height:1; }
.quick-entry-title { font-size:13px; font-weight:700; }
.quick-entry-desc { font-size:11px; color:#6B7280; }
.quick-entry-yellow { background:#FEF3C7; }
.quick-entry-yellow .quick-entry-title { color:#92400E; }
.quick-entry-red { background:#FEE2E2; }
.quick-entry-red .quick-entry-title { color:#991B1B; }
.quick-entry-green { background:#D1FAE5; }
.quick-entry-green .quick-entry-title { color:#065F46; }
.quick-entry-purple { background:#F3E8FF; }
.quick-entry-purple .quick-entry-title { color:#6B21A8; }
.quick-entry-pink { background:#FFE4E6; }
.quick-entry-pink .quick-entry-title { color:#9F1239; }
.quick-entry-blue { background:#E0E7FF; }
.quick-entry-blue .quick-entry-title { color:#3730A3; }

/* ===== 行内信息徽章（款号、工厂名等高亮标签） ===== */
.badge { display:inline-block; padding:2px 8px; border-radius:4px; font-weight:700; font-size:13px; }
.badge-yellow { background:#FEF3C7; color:#92400E; }
.badge-red { background:#FEE2E2; color:#991B1B; }
.badge-blue { background:var(--primary-light); color:var(--primary); }

/* ===== 列表卡片（带表格内嵌数据） ===== */
.list-card { overflow:hidden; }
.list-card-header { padding:12px 16px 8px; }
.list-card-table { overflow-x:auto; padding:0 16px 12px; }

/* ===== Tab切换栏 ===== */
.seg-tabs { display:flex; background:#fff; border-bottom:0.5px solid var(--border); }
.seg-tab {
  flex:1; text-align:center; padding:12px; font-weight:500; font-size:14px;
  color:var(--text-secondary); border-bottom:2px solid transparent; cursor:pointer;
}
.seg-tab.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }

/* ===== 颜色尺码网格 ===== */
.yc-grid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;
  padding:8px 16px 12px;
}
.yc-card {
  display:flex; align-items:center; gap:6px;
  background:#fff; border-radius:10px; padding:10px 8px;
  box-shadow:0 1px 3px rgba(0,0,0,0.06);
  position:relative;
}
.yc-dot {
  width:18px; height:18px; border-radius:50%; flex-shrink:0;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.15);
}
.yc-name {
  flex:1; font-size:13px; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.yc-actions { display:flex; gap:2px; flex-shrink:0; }
.yc-btn-edit, .yc-btn-del {
  width:26px; height:26px; border:none; border-radius:6px; font-size:12px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  opacity:0.7; transition:opacity 0.15s;
}
.yc-btn-edit { background:#EFF6FF; }
.yc-btn-del { background:#FEE2E2; }
.yc-btn-edit:hover, .yc-btn-del:hover { opacity:1; }

/* 尺码卡片 */
.yc-size-card { justify-content:center; }
.yc-size-tag {
  font-size:16px; font-weight:800; color:var(--primary);
  letter-spacing:0.5px;
}

/* 按钮小号 */
.btn-sm { padding:8px 16px; font-size:13px; }

/* ===== 卡片操作栏（审核/确认按钮区） ===== */
.card-actions {
  display:flex; gap:8px; padding:8px 16px 12px;
  border-top:0.5px solid var(--border);
}
.btn-action {
  flex:1; padding:9px 12px; border:none; border-radius:8px;
  font-size:13px; font-weight:600; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:4px;
  transition:opacity 0.15s, transform 0.1s;
}
.btn-action:active { transform:scale(0.97); }
.btn-action-success { background:#10B981; color:#fff; }
.btn-action-primary { background:var(--primary); color:#fff; }
.btn-action-warning { background:var(--warning); color:#fff; }
.btn-action-revoke { background:#F3F4F6; color:var(--text-secondary); }