:root{
  --red:#c62828; --green:#237804; --blue:#9e1b1b; --blue-btn:#0958d9; --gold:#d48806; --orange:#fa8c16;
  --bg:#fbf3f3; --card:#ffffff; --line:#f0dada; --text:#2a1818; --text2:#9a7b7b;
  --tabbg:#ffffff; --prim:#9e1b1b;
  --deep:#7a1414;
  --bd:var(--line);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:linear-gradient(160deg,#7a1414 0%,#9e1b1b 100%); color:var(--text); font-size:14px; line-height:1.5;
  -webkit-text-size-adjust:100%;
}
/* 居中容器：手机宽度优先，桌面可放宽 */
#app{max-width:560px; margin:0 auto; min-height:100vh; background:var(--bg);
  padding-bottom:64px; /* 给底部 tab 留位 */
  box-shadow:0 0 24px rgba(0,0,0,.18);
}
/* ===新增登录页居中=== */
#app.page-login {
    background: transparent;
    box-shadow: none;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
}
a{color:var(--blue); text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit; font-size:15px;}
.link{color:var(--blue); cursor:pointer;}

/* 顶部栏 */
.topbar{position:sticky; top:0; z-index:20; background:var(--prim); color:#fff;
  padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px;}
.topbar .hd-left{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; text-align:left;}
.topbar .hd-right{display:flex; flex-direction:column; align-items:flex-end; gap:4px; max-width:46%; flex-shrink:0;}
.topbar .pgtitle{font-size:13px; opacity:.9; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right; margin-top:4px;}
.topbar .usr{font-size:15px; font-weight:600; opacity:1; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.topbar .usr-sub{font-size:11px; opacity:.85; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.topbar .hd-actions{display:flex; align-items:center; gap:10px;}
.topbar .hact{position:relative; font-size:18px; cursor:pointer; line-height:1; padding:4px 5px; user-select:none;
  background:transparent; border:none; color:#fff; display:inline-flex; align-items:center;}
.topbar .hact:hover{opacity:.8;}
.ic-svg{display:inline-block; vertical-align:middle; flex-shrink:0;}
.btn .ic-svg{vertical-align:-3px; margin-right:5px;}
.card.sub .ic-svg{color:var(--gold);}
.topbar .hact .badge{position:absolute; top:-5px; right:-7px; background:var(--red); color:#fff; font-size:9px; min-width:14px; height:14px; line-height:14px; text-align:center; border-radius:8px; padding:0 3px; font-style:normal;}
.topbar .btn-quit{background:rgba(255,255,255,.2); color:#fff; border:none; border-radius:6px; padding:5px 10px; font-size:12px;}

/* 卡片 */
.card{background:var(--card); border-radius:12px; padding:14px; margin:12px; box-shadow:0 1px 3px rgba(0,0,0,.05);}
.card h3{margin:0 0 8px; font-size:15px;}
.card.sub{border-left:3px solid var(--gold);}

/* 网格统计 */
.sgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:12px;}
.sc{background:var(--card); border-radius:12px; padding:14px; text-align:center; box-shadow:0 1px 3px rgba(0,0,0,.05);}
.sc b{display:block; font-size:22px; color:var(--prim);}
.sc span{font-size:12px; color:var(--text2);}

/* 按钮 */
.btn{display:block; width:100%; background:var(--prim); color:#fff; border:none; border-radius:10px;
  padding:12px; font-size:15px; margin-top:10px;}
.btn.ghost{background:#fff; color:var(--prim); border:1px solid var(--prim);}
.btn.sm{width:auto; padding:8px 12px; font-size:13px; margin:0;}
.btn-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;}
.btn-row .btn{margin-top:0; flex:1 1 0; width:auto; min-width:0;}
.btn.green{background:var(--blue-btn);} .btn.danger{background:var(--red);}
/* 表格行内小按钮：内联自适应宽、单行不换行（放在 .btn 之后覆盖其 block/100% 布局） */
.btn-sm{display:inline-block; width:auto; padding:3px 10px; font-size:12px; margin:0; border-radius:6px; white-space:nowrap;}
.btn-red{background:var(--red);}
/* 立项信息：工具按钮排 —— 紧凑尺寸、文字单行不换行（窄屏横向滚动） */
.tool-row{display:flex; gap:6px; flex-wrap:nowrap; overflow-x:auto; margin-top:8px; align-items:center; padding:2px;}
.tool-row .btn{flex:0 0 auto; width:auto; min-width:0; margin-top:0; white-space:nowrap;}
.tool-row .btn.sm{padding:6px 10px; font-size:12px;}
.tool-row .tl{white-space:nowrap; font-size:13px; color:var(--text2); flex:0 0 auto; margin-right:2px;}
.tool-row .sep{border-left:1px solid var(--bd); height:22px; flex:0 0 auto; margin:0 2px;}
.tool-row select, .tool-row .sel{flex:0 0 auto; white-space:nowrap;}

/* 列表项 */
.li{background:#fff; border-radius:10px; padding:10px 12px; margin-bottom:8px; box-shadow:0 1px 2px rgba(0,0,0,.04);}
.li .top{display:flex; justify-content:space-between; align-items:center; gap:8px;}
.li .name{font-weight:600;}
.li .desc{font-size:13px; color:var(--text); margin-top:4px;}
.li .meta{font-size:11px; color:var(--text2); margin-top:4px;}
.score{color:var(--green); font-weight:700; white-space:nowrap;}
.score.red{color:var(--red);}
.tag{display:inline-block; font-size:11px; padding:1px 6px; border-radius:6px; background:#f0f5ff; color:var(--blue); margin-left:4px;}
.tag.gold{background:#fff7e6; color:var(--gold);}
.tag.pioneer{background:#ffecec; color:var(--red);}
.honor-badge{display:inline-flex; align-items:center; gap:6px; background:linear-gradient(135deg,#cf1322,#f5222d); color:#fff; font-weight:700; padding:8px 14px; border-radius:8px; margin-bottom:10px; box-shadow:0 2px 8px rgba(207,19,34,.25); font-size:14px; line-height:1;}
.honor-badge.pending{background:linear-gradient(135deg,#fa8c16,#ffc069);}

/* 底部 tab */
.tabs{position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:560px;
  display:flex; background:var(--tabbg); border-top:1px solid var(--line); z-index:30;}
.tabs .tab{flex:1; text-align:center; padding:8px 2px 6px; font-size:11px; color:var(--text2);}
.tabs .tab .ic{font-size:20px; display:block; line-height:1.1;}
.tabs .tab .tic{display:flex; justify-content:center; align-items:center; margin-bottom:2px;}
.tabs .tab .tic .ic-svg{display:block;}
.tabs .tab.on{color:var(--prim); font-weight:600;}

/* 表单 */
label{display:block; font-size:13px; margin:10px 0 4px; color:var(--text2);}
input[type=text],input[type=password],input[type=number],select,textarea{
  width:100%; border:1px solid var(--line); border-radius:10px; padding:11px 12px; background:#fff; color:var(--text);}
textarea{resize:vertical; min-height:64px;}
.req{color:var(--red);}

/* 登录 */
.login{
    max-width:460px;
    width:100%;
    margin:0 auto;
    padding:54px 24px;
    background:#fef0f2; /* 浅粉色 */
    border-radius:16px;
    box-shadow:0 4px 24px rgba(0,0,0,.25);
}
.login .logo{text-align:center; font-size:30px; font-weight:800; color:var(--prim); margin-bottom:10px; letter-spacing:1px;}
.login .sub2{text-align:center; color:var(--text2); font-size:16px; margin-bottom:32px; line-height:1.6; padding:0 6px;}
.login label{display:block; font-size:15px; font-weight:600; color:var(--text); margin:16px 0 7px;}
.login input[type=text],.login input[type=password]{padding:14px 14px; font-size:16px; border-radius:12px;}
.login .btn{font-size:17px; padding:14px; margin-top:24px; border-radius:12px;}
.login .remember{display:flex; align-items:center; gap:8px; margin-top:18px; font-size:15px; color:var(--text2); cursor:pointer; user-select:none;}
.login .remember input{width:18px; height:18px; accent-color:var(--blue-btn);}
.login .hint{font-size:13px; color:var(--text2); margin-top:18px; text-align:center; line-height:1.7;}

/* 子标签 pills */
.pills{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0;}
.pill{background:#f0f0f0; color:#555; border-radius:16px; padding:6px 14px; font-size:13px; cursor:pointer;}
.pill.on{background:var(--prim); color:#fff;}

/* 表格（清单矩阵） */
.tb{width:100%; border-collapse:collapse; font-size:12px;}
.tb th,.tb td{border:1px solid var(--line); padding:6px 4px; text-align:center; vertical-align:top;}
.tb th{background:#faf5f5; font-weight:600; line-height:1.3; position:sticky; top:0; z-index:3;}
.tb th.sticky,.tb td.sticky{position:sticky; left:0; background:#fff; z-index:2; text-align:left; white-space:nowrap;}
.tb select{width:62px; padding:5px 2px; font-size:13px; text-align:center;}
.tb .cell-info{font-size:10px; color:var(--text2); margin-top:2px; line-height:1.3; text-align:left;}
.tb.mm th.sticky,.tb.mm td.sticky{min-width:120px; white-space:normal; overflow-wrap:anywhere;}
.tb.mm th:not(.sticky),.tb.mm td:not(.sticky){min-width:80px;}
.tb.mm input.pf.sm,.tb.mm select.pf.sm{width:100%; box-sizing:border-box;}
.table-wrap{overflow:auto; -webkit-overflow-scrolling:touch; max-height:360px;}

/* 合并清单：普通党员「立项信息」——一个项目一行 */
.tb.mlist th,.tb.mlist td{border:1px solid var(--line); padding:5px 4px; vertical-align:top;}
.tb.mlist th{font-weight:600; line-height:1.25; background:#faf5f5; white-space:nowrap;}
.tb.mlist th.pi,.tb.mlist td.pi{position:sticky; left:0; z-index:4; text-align:left; min-width:188px; max-width:188px; width:188px; background:#faf5f5;}
.tb.mlist td.pi{background:#fff; box-shadow:1px 0 0 var(--line);}
.tb.mlist th:not(.pi),.tb.mlist td:not(.pi){min-width:72px; text-align:center;}
.tb.mlist input.pf.sm,.tb.mlist select.pf.sm{width:100%; box-sizing:border-box; padding:5px 3px; font-size:12px;}
.tb.mlist .pi-cell label{display:block; font-size:11px; margin:6px 0 2px; color:var(--text2);}
.tb.mlist .pi-cell .pf.xs{width:100%; padding:6px 8px; font-size:12px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--text);}
.tb.mlist .pi-cell .ro-val{display:block; width:100%; box-sizing:border-box; padding:6px 8px; font-size:12px; border:1px solid #eee; border-radius:8px; background:#fafafa; color:var(--text); margin-top:1px; min-height:15px; overflow-wrap:anywhere;}
.tb.mlist .pi-cell .btn{margin-top:8px;}

/* 弹窗 */
.modal-mask{position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:50; display:flex; align-items:flex-end; justify-content:center;}
.modal{background:#fff; border-radius:16px 16px 0 0; width:100%; max-width:560px; padding:18px; max-height:86vh; overflow:auto;}
.modal h3{margin-top:0;}
.modal .close{float:right; color:var(--text2); font-size:20px; cursor:pointer;}

/* 细则表 */
.rule-tb{width:100%; border-collapse:collapse; font-size:12px; margin-bottom:8px;}
.rule-tb th,.rule-tb td{border:1px solid var(--line); padding:5px 6px; text-align:left;}
.rule-tb th{background:#faf5f5;}
.rule-ol{font-size:13px; padding-left:20px; line-height:1.8;}

.empty{color:var(--text2); text-align:center; padding:18px 0; font-size:13px;}
.imgs{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px;}
.thumb{width:54px; height:54px; object-fit:cover; border-radius:6px; border:1px solid var(--line); background:#fff;}
.toast{position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); background:rgba(0,0,0,.82); color:#fff;
  padding:12px 18px; border-radius:10px; font-size:14px; z-index:99; max-width:80%; text-align:center;}

/* 可点击列表项 / 信箱未读 */
.li.clickable{cursor:pointer;}
.li.clickable:hover{box-shadow:0 1px 4px rgba(158,27,27,.18);}
.li.unread{background:#fff7f0; border-left:3px solid var(--orange);}

/* 通用网格（桌面端多列，移动端单列） */
.grid2,.grid3{display:block;}
.grid2 .li,.grid3 .li{margin-bottom:8px;}
/* 党支部横向 chips */
.branch-chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px;}
.br-chip{display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 12px; box-shadow:0 1px 2px rgba(0,0,0,.04);}
.br-chip .br-name{font-weight:600; font-size:13px;}
.br-chip .btn.sm{padding:5px 9px; font-size:11px;}
/* 先锋加分说明输入框 */
.tb .pio-note{width:100%; padding:4px 5px; font-size:11px; border:1px solid var(--line); border-radius:6px; margin-top:3px;}
/* 基础扣分原因输入框 */
.tb .reason-in{width:100%; min-width:80px; padding:4px 5px; font-size:11px; border:1px solid var(--line); border-radius:6px; margin-top:3px; box-sizing:border-box;}

/* ============ 五有申报柱状图（纯 CSS） ============ */
.bars{display:flex; flex-direction:column; gap:10px; margin-top:6px;}
.bar-row{display:flex; align-items:center; gap:10px;}
.bar-label{flex:0 0 92px; font-size:12px; color:var(--text2); display:flex; align-items:center; gap:4px; white-space:nowrap;}
.bar-track{flex:1; height:18px; background:var(--bg2); border-radius:9px; overflow:hidden;}
.bar-fill{height:100%; background:linear-gradient(90deg,var(--prim),var(--gold)); border-radius:9px; min-width:2px; transition:width .4s ease;}
.bar-val{flex:0 0 28px; text-align:right; font-size:12px; font-weight:600; color:var(--prim);}

/* ============ 先锋管理页：五有申报条数 柱形图（垂直柱状，无横线背景） ============ */
.col-chart{display:flex; align-items:flex-end; justify-content:space-around; gap:8px; height:248px; padding:6px 4px 0; border-bottom:2px solid var(--line);}
.col{display:flex; flex-direction:column; align-items:center; justify-content:flex-end; flex:1 1 0; min-width:0; height:100%;}
.col-val{font-size:15px; font-weight:700; color:var(--text); margin-bottom:6px; line-height:1;}
.col-bar{width:56%; max-width:56px; min-height:3px; background:linear-gradient(180deg,#c0392b,#9e1b1b); border-radius:6px 6px 0 0; transition:height .4s ease;}
.col-labels{display:flex; align-items:flex-start; justify-content:space-around; gap:8px; margin-top:8px;}
.col-label{flex:1 1 0; min-width:0; text-align:center; font-size:12px; color:var(--text2); line-height:1.3;}

/* ============ 电脑端自适应（≥768px 加宽并把标签栏改为顶部吸顶导航） ============ */
@media (min-width:768px){
  #app{max-width:1200px; padding-bottom:0;}
  .topbar{position:sticky; top:0; z-index:20; padding:14px 24px;}
  .topbar .usr{font-size:17px;}
  .topbar .pgtitle{font-size:15px;}
  .tabs{position:sticky; bottom:auto; top:64px; left:auto; transform:none;
    width:100%; max-width:1200px; border-top:none; border-bottom:1px solid var(--line);
    box-shadow:0 1px 3px rgba(0,0,0,.04); padding:0 10px;}
  .tabs .tab{padding:14px 4px 12px; font-size:13px;}
  .tabs .tab .ic{font-size:22px;}
  .tabs .tab .tic{margin-bottom:3px;}
  .sgrid{grid-template-columns:repeat(4,1fr); gap:14px; margin:16px 24px;}
  .card{margin:16px 24px; padding:18px;}
  .card h3{font-size:16px;}
  .login{padding:64px 22px;}
  .modal{max-width:720px; border-radius:16px 16px 0 0;}
  .li{display:block;}
  /* 桌面端成员列表多列网格 */
  .grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
  .grid2 .li{margin-bottom:0;}
  .grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
  .grid3 .li{margin-bottom:0;}
  /* 桌面端表格更舒展 */
  .tb select{width:74px; padding:6px 3px; font-size:13px;}
  .tb th,.tb td{padding:8px 6px;}
  /* 桌面端弹窗居中而非底部抽屉 */
  .modal-mask{align-items:center;}
  .modal{border-radius:16px; max-height:88vh;}
  /* 列表 / 按钮悬停反馈 */
  .li.clickable:hover{box-shadow:0 2px 8px rgba(158,27,27,.16);}
  .btn:hover{filter:brightness(1.05);}
  .btn.sm:hover{filter:brightness(1.05);}
}
/* 大屏（≥1280px）进一步放大，匹配更大显示器 */
@media (min-width:1280px){
  #app{max-width:1440px;}
  .tabs{max-width:1440px;}
  .card{margin:18px 32px; padding:20px;}
  .sgrid{margin:18px 32px;}
}

/* 年度 / 季度筛选器 */
.period-sel{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 12px; padding:10px 14px; background:var(--card); border:1px solid var(--bd); border-radius:12px;}
.period-sel label{font-size:13px; color:var(--text2);}
.period-sel select{width:auto; min-width:96px; padding:6px 8px; font-size:13px;}
.period-sel .period-btn{margin-left:auto; width:auto; margin-top:0; padding:8px 16px;}
.period-sel .period-btn:hover{filter:brightness(1.05);}
/* 同一类别多条申报的逐条核定块 */
.decl-block{border:1px solid var(--bd); border-radius:8px; padding:6px 8px; margin:6px 0; background:#fafafa; text-align:left;}
.decl-desc{font-size:11px; line-height:1.35; color:#333; margin-bottom:3px; white-space:pre-wrap; word-break:break-word;}
.decl-meta{font-size:10px; color:var(--text2); margin-bottom:4px;}
.pio-sel{width:100%; padding:5px 6px; font-size:12px;}

/* ============ 立项信息立项卡片 ============ */
.proj-card{border:1px solid var(--bd); border-radius:12px; padding:12px 14px; margin-bottom:14px; background:var(--card);}
.proj-tit{font-size:14px; font-weight:700; color:var(--prim); margin-bottom:10px; display:flex; align-items:center; gap:6px;}
.proj-head{display:grid; grid-template-columns:auto 1fr; gap:6px 10px; align-items:center;}
.proj-head .proj-no{grid-row:span 99; font-size:15px; font-weight:800; color:var(--gold); padding:0 6px; border-right:1px solid var(--bd);}
.proj-head label{grid-column:1 / 2; font-size:12px; color:var(--text2); text-align:right; white-space:nowrap;}
.proj-head .pf{grid-column:2 / 3;}
.proj-head .btn.sm.danger{grid-column:2 / 3; justify-self:start; margin-top:4px;}
input.pf,select.pf{width:100%; padding:7px 9px; font-size:13px; border:1px solid var(--bd); border-radius:8px; background:var(--bg); color:var(--text); box-sizing:border-box;}
input.pf.sm,select.pf.sm{padding:5px 6px; font-size:12px; text-align:center; min-width:64px;}
.proj-meta-sm{font-size:11px; color:var(--text2); margin-bottom:4px; line-height:1.5;}
.sub-h{font-size:13px; font-weight:700; color:var(--text2); padding-bottom:4px; border-bottom:1px dashed var(--bd); margin-bottom:8px;}
/* ============ 立项更新打卡图（红绿格） ============ */
.perf-grid{border-collapse:collapse; width:100%;}
.perf-grid th, .perf-grid td{border:1px solid var(--bd); padding:5px 7px; font-size:12px; text-align:center; white-space:nowrap;}
.perf-grid th{position:sticky; top:0; background:var(--card); z-index:1;}
.perf-grid td:first-child, .perf-grid th:first-child{width:40px;}
.perf-grid td.cell-ok{background:#e6f7ec; color:#137333; font-weight:700;}
.perf-grid td.cell-no{background:#fdecec; color:#c5221f; font-weight:700;}
/* 电脑端：立项头改为两列网格，更紧凑 */
@media (min-width:768px){
  .proj-head{grid-template-columns:auto 90px 1fr;}
  .proj-head label{grid-column:2 / 3;}
  .proj-head .pf{grid-column:3 / 4;}
  .proj-head .btn.sm.danger{grid-column:3 / 4;}
}