/* ==========================================================
   做单系统 - 样式文件
   想换颜色，只改下面「主题配色」那几行就行
   ========================================================== */

:root{
  /* ===== 主题配色（改这里就能换风格） ===== */
  --primary: #4F46E5;          /* 主色：按钮、选中态 */
  --primary-2: #7C3AED;        /* 渐变另一端 */
  --primary-soft: #EEF2FF;     /* 主色浅底 */
  --accent: #06B6D4;           /* 点缀色 */
  --danger: #EF4444;           /* 危险/驳回 */
  --success: #10B981;          /* 成功/已结算 */
  --warning: #F59E0B;          /* 提醒/待处理 */

  --bg: #F4F5F9;               /* 页面底色 */
  --card: #FFFFFF;             /* 卡片底色 */
  --text: #1F2430;             /* 主文字 */
  --text-2: #6B7280;           /* 次要文字 */
  --text-3: #9CA3AF;           /* 辅助文字 */
  --line: #EDEFF5;             /* 分割线 */

  --radius: 14px;              /* 圆角大小 */
  --shadow: 0 2px 12px rgba(31,36,48,.06);
}

*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;
  background:#E9EBF0; color:var(--text); font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
button{ font-family:inherit; border:none; background:none; cursor:pointer; color:inherit; }
input,select,textarea{ font-family:inherit; font-size:14px; color:var(--text); }

/* ===== 手机外壳（电脑上预览时居中显示） ===== */
.phone{
  width:100%; max-width:430px; min-height:100vh; margin:0 auto;
  background:var(--bg); position:relative; overflow-x:hidden;
  box-shadow:0 0 40px rgba(0,0,0,.08);
}

/* ===== 顶部导航 ===== */
.navbar{
  position:sticky; top:0; z-index:50; height:48px; background:var(--card);
  display:flex; align-items:center; padding:0 8px; border-bottom:1px solid var(--line);
}
.navbar .nb-title{ flex:1; text-align:center; font-size:16px; font-weight:600; }
.navbar .nb-side{ width:60px; display:flex; align-items:center; }
.navbar .nb-side.right{ justify-content:flex-end; }
.nav-back{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; }
.nav-back svg{ width:20px; height:20px; }

/* ===== 页面主体 ===== */
.page{ padding:12px 12px 24px; }
.page.with-tabbar{ padding-bottom:78px; }

/* ===== 底部导航 ===== */
.tabbar{
  position:fixed; left:50%; transform:translateX(-50%); bottom:0; z-index:60;
  width:100%; max-width:430px; height:62px; background:var(--card);
  display:flex; border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar .tab{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:var(--text-3); }
.tabbar .tab.on{ color:var(--primary); }
.tabbar .tab svg{ width:23px; height:23px; }
.tabbar .tab span{ font-size:11px; }

/* ===== 通用卡片 ===== */
.card{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px; margin-bottom:12px; }
.card.tight{ padding:12px; }

/* ===== 按钮 ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:40px; padding:0 18px; border-radius:10px; font-size:14px; font-weight:500;
  background:var(--card); color:var(--text); border:1px solid var(--line);
}
.btn.primary{ background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:#fff; border:none; }
.btn.accent{ background:var(--accent); color:#fff; border:none; }
.btn.danger{ background:var(--danger); color:#fff; border:none; }
.btn.block{ display:flex; width:100%; }
.btn.lg{ height:46px; font-size:15px; }
.btn.sm{ height:32px; padding:0 12px; font-size:13px; }
.btn.ghost{ background:var(--primary-soft); color:var(--primary); border:none; }
.btn:disabled{ opacity:.5; }

/* ===== 表单 ===== */
.form-item{ margin-bottom:14px; }
.form-item .fi-label{ font-size:13px; color:var(--text-2); margin-bottom:6px; display:flex; align-items:center; gap:3px; }
.form-item .fi-label .req{ color:var(--danger); }
.input,.select,.textarea{
  width:100%; background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:11px 12px; outline:none; transition:.15s;
}
.input:focus,.select:focus,.textarea:focus{ border-color:var(--primary); }
.textarea{ min-height:88px; resize:vertical; }
.select{ appearance:none; 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 d='M2 4l4 4 4-4' fill='none' stroke='%239CA3AF' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; }
.uploader{
  width:100%; min-height:96px; border:1px dashed var(--line); border-radius:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; color:var(--text-3); background:#FAFBFC; overflow:hidden;
}
.uploader img{ width:100%; height:100%; object-fit:cover; }

/* ===== 标签 / 徽章 ===== */
.tag{ display:inline-block; padding:2px 8px; border-radius:6px; font-size:11px; background:var(--primary-soft); color:var(--primary); }
.tag.red{ background:#FEE2E2; color:var(--danger); }
.tag.green{ background:#D1FAE5; color:var(--success); }
.tag.orange{ background:#FEF3C7; color:var(--warning); }
.tag.gray{ background:#F3F4F6; color:var(--text-2); }

/* ===== 首页头部渐变 ===== */
.grad-head{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  padding:16px 14px 22px; color:#fff; border-radius:0 0 20px 20px;
}
.grad-head .gh-title{ font-size:18px; font-weight:600; }
.grad-head .gh-sub{ font-size:12px; opacity:.85; margin-top:2px; }

/* ===== 三个入口 ===== */
.entry-row{ display:flex; gap:10px; margin-top:14px; }
.entry{ flex:1; background:rgba(255,255,255,.16); border-radius:12px; padding:12px 6px; text-align:center; color:#fff; backdrop-filter:blur(4px); }
.entry .e-ic{ width:34px; height:34px; margin:0 auto 6px; border-radius:10px; background:#fff; display:flex; align-items:center; justify-content:center; }
.entry .e-ic svg{ width:19px; height:19px; }
.entry .e-tx{ font-size:12px; }

/* ===== 筛选栏 ===== */
.filter-bar{ display:flex; gap:8px; align-items:center; margin-bottom:12px; }
.filter-chip{
  flex:1; background:var(--card); border:1px solid var(--line); border-radius:10px;
  height:36px; display:flex; align-items:center; justify-content:center; gap:4px;
  font-size:13px; color:var(--text-2); box-shadow:var(--shadow);
}
.filter-chip.on{ border-color:var(--primary); color:var(--primary); background:var(--primary-soft); }
.filter-chip svg{ width:14px; height:14px; }

/* ===== 筛选面板 ===== */
.filter-panel{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px; margin-bottom:12px; }
.fp-group{ margin-bottom:14px; }
.fp-group:last-child{ margin-bottom:0; }
.fp-title{ font-size:13px; font-weight:600; margin-bottom:8px; }
.fp-opts{ display:flex; flex-wrap:wrap; gap:8px; }
.fp-opt{ padding:6px 14px; border-radius:8px; background:#F4F5F9; font-size:13px; color:var(--text-2); }
.fp-opt.on{ background:var(--primary); color:#fff; }
.fp-actions{ display:flex; gap:10px; margin-top:6px; }

/* ===== 任务分组 ===== */
.group-head{ display:flex; align-items:center; justify-content:space-between; padding:4px 2px 10px; }
.group-head .gh-l{ display:flex; align-items:center; gap:6px; font-size:15px; font-weight:600; }
.group-head .gh-l .bar{ width:3px; height:15px; border-radius:2px; background:var(--primary); }
.group-head .gh-r{ font-size:12px; color:var(--text-3); display:flex; align-items:center; gap:4px; }

.task-card{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px; margin-bottom:10px; }
.task-card .tc-top{ display:flex; justify-content:space-between; gap:10px; }
.task-card .tc-title{ font-size:15px; font-weight:600; flex:1; }
.task-card .tc-price{ color:var(--danger); font-weight:700; font-size:17px; white-space:nowrap; }
.task-card .tc-price small{ font-size:11px; font-weight:400; }
.task-card .tc-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; font-size:12px; color:var(--text-2); }
.task-card .tc-actions{ display:flex; gap:8px; margin-top:12px; }
.task-card .tc-actions .btn{ flex:1; }

/* ===== 工作台状态切换 ===== */
.segment{ display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; margin-bottom:12px; -webkit-overflow-scrolling:touch; }
.segment::-webkit-scrollbar{ display:none; }
.segment .seg{ flex:none; padding:7px 14px; border-radius:20px; background:var(--card); font-size:13px; color:var(--text-2); box-shadow:var(--shadow); }
.segment .seg.on{ background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:#fff; }

/* ===== 记录卡片 ===== */
.rec-card{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:13px; margin-bottom:10px; }
.rec-card .rc-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.rec-card .rc-title{ font-size:14px; font-weight:600; }
.rec-card .rc-sub{ font-size:12px; color:var(--text-3); margin-top:2px; }
.rec-card .rc-info{ display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:10px; font-size:12px; color:var(--text-2); }
.rec-card .rc-info i{ font-style:normal; color:var(--text-3); }
.rec-card .rc-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }

/* ===== 我的页面 ===== */
.my-head{ background:linear-gradient(135deg,var(--primary),var(--primary-2)); padding:22px 16px 26px; color:#fff; border-radius:0 0 22px 22px; }
.my-head .mh-user{ display:flex; align-items:center; gap:12px; }
.avatar{ width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:600; overflow:hidden; flex:none; }
.avatar img{ width:100%; height:100%; object-fit:cover; }
.my-head .mh-name{ font-size:17px; font-weight:600; display:flex; align-items:center; gap:6px; }
.my-head .mh-sub{ font-size:12px; opacity:.85; margin-top:3px; }
.my-head .mh-stat{ display:flex; margin-top:18px; }
.my-head .mh-stat .ms{ flex:1; text-align:center; }
.my-head .mh-stat .ms b{ display:block; font-size:19px; font-weight:700; }
.my-head .mh-stat .ms span{ font-size:11px; opacity:.85; }

/* ===== 九宫格菜单 ===== */
.grid-menu{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px 6px; }
.grid-menu .gm{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 2px; }
.grid-menu .gm .gm-ic{ width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--primary-soft); }
.grid-menu .gm .gm-ic svg{ width:21px; height:21px; }
.grid-menu .gm span{ font-size:11px; color:var(--text-2); }

/* ===== 列表行 ===== */
.row{ display:flex; align-items:center; gap:10px; padding:13px 14px; background:var(--card); border-bottom:1px solid var(--line); }
.row:last-child{ border-bottom:none; }
.row .r-main{ flex:1; min-width:0; }
.row .r-title{ font-size:14px; font-weight:500; }
.row .r-sub{ font-size:12px; color:var(--text-3); margin-top:2px; }
.row .r-right{ font-size:13px; color:var(--text-2); flex:none; }
.row .r-arrow{ width:16px; height:16px; color:var(--text-3); flex:none; }
.row-list{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; margin-bottom:12px; }

/* ===== 资讯 / 通知列表 ===== */
.article-item{ display:flex; gap:12px; padding:13px 14px; background:var(--card); border-bottom:1px solid var(--line); }
.article-item:last-child{ border-bottom:none; }
.article-item .ai-body{ flex:1; min-width:0; }
.article-item .ai-title{ font-size:14px; font-weight:500; line-height:1.45; }
.article-item .ai-desc{ font-size:12px; color:var(--text-3); margin-top:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.article-item .ai-foot{ font-size:11px; color:var(--text-3); margin-top:6px; display:flex; gap:10px; }
.dot{ width:8px; height:8px; border-radius:50%; background:var(--danger); flex:none; margin-top:6px; }

/* ===== 富文本内容 ===== */
.rich{ font-size:14px; line-height:1.75; color:var(--text); }
.rich p{ margin-bottom:10px; }
.rich img{ max-width:100%; height:auto; border-radius:8px; margin:8px 0; }
.rich h1,.rich h2,.rich h3{ font-weight:600; margin:12px 0 6px; }

/* ===== 空状态 ===== */
.empty{ padding:50px 20px; text-align:center; color:var(--text-3); }
.empty svg{ width:56px; height:56px; opacity:.35; margin-bottom:10px; }
.empty p{ font-size:13px; }

/* ===== 弹窗 ===== */
.mask{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:100; display:flex; align-items:center; justify-content:center; padding:24px; animation:fade .18s; }
.mask .dialog{ width:100%; max-width:340px; background:var(--card); border-radius:16px; overflow:hidden; animation:pop .2s; }
.mask .dlg-title{ padding:18px 18px 8px; font-size:16px; font-weight:600; text-align:center; }
.mask .dlg-body{ padding:0 18px 18px; font-size:13px; color:var(--text-2); max-height:56vh; overflow:auto; }
.mask .dlg-btns{ display:flex; border-top:1px solid var(--line); }
.mask .dlg-btns button{ flex:1; height:46px; font-size:15px; border-right:1px solid var(--line); }
.mask .dlg-btns button:last-child{ border-right:none; }
.mask .dlg-btns button.confirm{ color:var(--primary); font-weight:600; }
@keyframes fade{ from{opacity:0} to{opacity:1} }
@keyframes pop{ from{transform:scale(.92); opacity:0} to{transform:scale(1); opacity:1} }

/* ===== 提示 Toast ===== */
.toast{
  position:fixed; left:50%; top:38%; transform:translate(-50%,-50%); z-index:200;
  background:rgba(0,0,0,.8); color:#fff; padding:11px 20px; border-radius:10px; font-size:14px;
  animation:fade .18s; pointer-events:none; max-width:80%; text-align:center;
}

/* ===== 登录页 ===== */
.login-wrap{ min-height:100vh; background:linear-gradient(160deg,var(--primary) 0%,var(--primary-2) 45%,#312E81 100%); display:flex; flex-direction:column; align-items:center; padding:56px 28px 30px; color:#fff; }
.login-wrap .lg-logo{ width:66px; height:66px; border-radius:20px; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:600; margin-bottom:14px; }
.login-wrap .lg-logo img{ width:100%; height:100%; object-fit:cover; border-radius:20px; }
.login-wrap .lg-name{ font-size:24px; font-weight:600; letter-spacing:1px; }
.login-wrap .lg-slogan{ font-size:13px; opacity:.8; margin-top:4px; }
.login-box{ width:100%; background:#fff; border-radius:18px; padding:22px 18px; margin-top:30px; color:var(--text); box-shadow:0 10px 40px rgba(0,0,0,.18); }
.login-box .lb-title{ font-size:18px; font-weight:600; margin-bottom:4px; }
.login-box .lb-sub{ font-size:12px; color:var(--text-3); margin-bottom:20px; }
.login-box .btn.primary{ margin-top:8px; }
.lg-links{ display:flex; justify-content:space-between; margin-top:14px; font-size:13px; color:var(--primary); }
.lg-agree{ display:flex; align-items:center; gap:6px; margin-top:14px; font-size:12px; color:var(--text-2); }
.lg-agree input{ width:15px; height:15px; accent-color:var(--primary); }
.lg-bottom{ margin-top:26px; font-size:11px; opacity:.7; text-align:center; }
.lg-qr{ width:150px; height:150px; margin:0 auto 12px; background:#fff; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.lg-qr svg{ width:120px; height:120px; }

/* ===== 签到 ===== */
.checkin-hero{ background:linear-gradient(135deg,var(--primary),var(--primary-2)); border-radius:var(--radius); padding:24px 16px; text-align:center; color:#fff; margin-bottom:12px; }
.checkin-hero .ch-day{ font-size:44px; font-weight:700; line-height:1; }
.checkin-hero .ch-tx{ font-size:13px; opacity:.9; margin-top:6px; }
.checkin-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.checkin-grid .cg{ aspect-ratio:1/1.25; border-radius:10px; background:#F4F5F9; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:11px; color:var(--text-3); }
.checkin-grid .cg.done{ background:var(--primary-soft); color:var(--primary); }
.checkin-grid .cg.today{ border:2px solid var(--primary); }
.checkin-grid .cg b{ font-size:13px; }

/* ===== 抽奖 ===== */
.lottery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px; }
.lottery-grid .lg{ aspect-ratio:1/1; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:11px; color:#fff; }
.lottery-grid .lg .lg-ic{ font-size:26px; }
.lottery-grid .lg.active{ outline:3px solid var(--warning); transform:scale(1.04); }

/* ===== 等级 ===== */
.level-card{ background:linear-gradient(135deg,var(--primary),var(--primary-2)); border-radius:var(--radius); padding:18px; color:#fff; margin-bottom:12px; }
.level-card .lc-top{ display:flex; justify-content:space-between; align-items:center; }
.level-card .lc-ic{ font-size:32px; }
.level-bar{ height:6px; border-radius:3px; background:rgba(255,255,255,.28); margin-top:14px; overflow:hidden; }
.level-bar i{ display:block; height:100%; background:#fff; border-radius:3px; }

/* ===== 二维码展示 ===== */
.qrcode-box{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; text-align:center; }
.qb-img{ width:190px; height:190px; margin:0 auto 12px; background:#F4F5F9; border-radius:12px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.qb-img img{ border-radius:10px; }

/* ===== 工具条 ===== */
.toolbar{ display:flex; gap:8px; margin-bottom:12px; }
.toolbar .tb-search{ flex:1; position:relative; }
.toolbar .tb-search input{ width:100%; height:38px; border-radius:10px; border:1px solid var(--line); padding:0 12px 0 34px; background:var(--card); outline:none; }
.toolbar .tb-search svg{ position:absolute; left:11px; top:11px; width:16px; height:16px; color:var(--text-3); }

/* ===== 统计小格 ===== */
.stat-row{ display:flex; gap:10px; margin-bottom:12px; }
.stat-row .sr{ flex:1; background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:12px 10px; text-align:center; }
.stat-row .sr b{ display:block; font-size:17px; font-weight:700; color:var(--primary); }
.stat-row .sr span{ font-size:11px; color:var(--text-3); }

/* ===== 步骤条 ===== */
.steps{ counter-reset:s; }
.steps .st{ display:flex; gap:10px; margin-bottom:10px; font-size:13px; color:var(--text-2); }
.steps .st .st-n{ width:20px; height:20px; border-radius:50%; background:var(--primary-soft); color:var(--primary); font-size:11px; display:flex; align-items:center; justify-content:center; flex:none; }

/* ===== 其他 ===== */
.money{ color:var(--danger); font-weight:700; }
.divider{ height:8px; }
.text-c{ text-align:center; }
.muted{ color:var(--text-3); }
.fs12{ font-size:12px; }
.fs13{ font-size:13px; }
.mt8{ margin-top:8px; } .mt12{ margin-top:12px; } .mt16{ margin-top:16px; }
.mb12{ margin-bottom:12px; }
.flex-b{ display:flex; justify-content:space-between; align-items:center; }
.copy-btn{ font-size:12px; color:var(--primary); }