/* ==========================================================
   中哲集团干部 360° 评价 —— 前台样式（移动优先）
   ========================================================== */
:root{
  --red:#B30000; --red-d:#8A0000; --red-l:#FBF0EF; --red-line:#EBD3D1;
  --gold:#B08A3E; --gold-l:#FBF6EA;
  --ink:#22211F; --ink2:#4A4744; --muted:#8C8783;
  --line:#E8E5E0; --line2:#F0EEE9;
  --bg:#F5F4F1; --card:#fff;
  --green:#2F7D5B; --green-l:#EDF6F1;
  --amber:#B87333; --amber-l:#FDF4E9;
  --blue:#2C5F8A; --blue-l:#EEF4F9;
  --radius:14px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(34,33,31,.04), 0 6px 20px rgba(34,33,31,.05);
  --shadow-lg:0 14px 44px rgba(34,33,31,.12);
  --font:"PingFang SC","Noto Sans SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--red);text-decoration:none}
button{font-family:var(--font);cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:var(--font);font-size:15px;color:var(--ink)}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.center{text-align:center}

/* ---------- 顶部 ---------- */
.topbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}
.topbar-in{max-width:760px;margin:0 auto;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand .mark{width:34px;height:34px;border-radius:9px;flex:none;
  background:linear-gradient(140deg,var(--red) 0%,#7C0000 100%);
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;
  box-shadow:0 2px 8px rgba(179,0,0,.25)}
.brand .txt{min-width:0}
.brand .t1{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand .t2{font-size:11.5px;color:var(--muted);margin-top:-2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.topbar .step-badge{font-size:11.5px;color:var(--muted);background:var(--line2);border-radius:99px;padding:4px 10px;white-space:nowrap}
.topbar .who{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink2)}
.topbar .who b{font-weight:600}
.linkbtn{font-size:12.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{color:var(--red)}

/* ---------- 布局 ---------- */
.wrap{max-width:760px;margin:0 auto;padding:20px 18px 60px}
.wrap.narrow{max-width:560px}

/* ---------- 首屏 ---------- */
.hero{padding:26px 0 6px}
.hero .eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--gold);
  background:var(--gold-l);border:1px solid #EFE1C4;border-radius:99px;padding:4px 11px;font-weight:600;letter-spacing:.06em}
.hero h1{font-size:27px;line-height:1.3;margin:14px 0 8px;letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:var(--red)}
.hero p{color:var(--ink2);font-size:13.5px;margin:0;max-width:520px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card.pad{padding:22px}
.card+.card{margin-top:14px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.card-h h3{font-size:15px}
.card-h .sub{font-size:12px;color:var(--muted)}

/* ---------- 步骤条 ---------- */
.steps{display:flex;align-items:center;gap:0;margin:18px 0 16px}
.steps .st{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
.steps .st i{width:20px;height:20px;border-radius:50%;background:var(--line2);color:var(--muted);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-style:normal;font-weight:600;flex:none}
.steps .st.on{color:var(--ink2);font-weight:600}
.steps .st.on i{background:var(--red);color:#fff}
.steps .st.done i{background:var(--green-l);color:var(--green)}
.steps .bar{flex:1;height:1px;background:var(--line);margin:0 10px}

/* ---------- 表单 ---------- */
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:12.5px;font-weight:600;color:var(--ink2)}
.input{width:100%;height:46px;padding:0 14px;border:1px solid var(--line);border-radius:11px;background:#fff;outline:none;transition:.15s}
.input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(179,0,0,.08)}
.input.big{height:54px;font-size:18px;font-weight:600;letter-spacing:.06em;text-align:center}
textarea.input{height:auto;padding:11px 13px;line-height:1.7;resize:vertical;font-size:14px}
.hint{font-size:12px;color:var(--muted);line-height:1.6}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:46px;padding:0 20px;border-radius:11px;
  font-size:15px;font-weight:600;background:#fff;border:1px solid var(--line);color:var(--ink2);transition:.16s}
.btn:hover{border-color:#D6D2CB;background:#FCFBF9}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 3px 12px rgba(179,0,0,.2)}
.btn.primary:hover{background:var(--red-d)}
.btn.block{width:100%}
.btn.sm{height:36px;padding:0 13px;font-size:13px;border-radius:9px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.err{background:var(--red-l);border:1px solid var(--red-line);color:var(--red);border-radius:10px;padding:11px 14px;font-size:13px;margin-bottom:14px}
.ok{background:var(--green-l);border:1px solid #CFE6DA;color:#256B4C;border-radius:10px;padding:11px 14px;font-size:13px;margin-bottom:14px}

/* ---------- 干部卡片列表 ---------- */
.task-list{display:flex;flex-direction:column;gap:10px}
.task{display:flex;align-items:center;gap:13px;padding:14px 16px;background:#fff;border:1px solid var(--line);
  border-radius:12px;transition:.16s;text-decoration:none;color:inherit}
.task:hover{border-color:#DCD6CC;box-shadow:0 4px 16px rgba(34,33,31,.06);transform:translateY(-1px)}
.task.done{background:#FCFCFA;border-color:var(--line2)}
.task .av{width:42px;height:42px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:600;background:var(--red-l);color:var(--red);letter-spacing:0}
.task.done .av{background:#F1F0EC;color:var(--muted)}
.task .info{flex:1;min-width:0}
.task .n{font-size:15px;font-weight:600;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.task .m{font-size:12.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task .act{flex:none;font-size:13px;font-weight:600;color:var(--red);display:flex;align-items:center;gap:4px}
.task.done .act{color:var(--green)}
.tag{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:6px;font-size:11px;font-weight:600;letter-spacing:.02em}
.tag.superior{background:var(--red-l);color:var(--red)}
.tag.peer{background:var(--amber-l);color:var(--amber)}
.tag.subordinate{background:var(--blue-l);color:var(--blue)}
.tag.self{background:#F2F1EE;color:var(--muted)}
.tag.high{background:var(--gold-l);color:var(--gold);border:1px solid #EFE1C4}

/* 进度 */
.prog-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:6px}
.prog-head .t{font-size:13px;color:var(--ink2)}
.prog-head .n{font-size:22px;font-weight:600;letter-spacing:-.02em}
.prog-head .n small{font-size:13px;color:var(--muted);font-weight:400}
.prog{height:7px;border-radius:99px;background:var(--line2);overflow:hidden}
.prog i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--red),#D64545);transition:width .5s}

/* ---------- 问卷 ---------- */
.qhead{position:sticky;top:59px;z-index:50;background:rgba(245,244,241,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);padding:10px 0 9px;margin-bottom:16px}
.qhead .row{max-width:760px;margin:0 auto;padding:0 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.qhead .name{font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px}
.qhead .pos{font-size:12px;color:var(--muted);margin-top:1px}
.qhead .pbar{width:110px;flex:none}
.qhead .pbar .lbl{font-size:11.5px;color:var(--muted);text-align:right;margin-bottom:3px}

.dim-block{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 6px;margin-bottom:14px}
.dim-head{display:flex;align-items:baseline;gap:9px;padding-bottom:12px;border-bottom:1px solid var(--line2);margin-bottom:14px}
.dim-head .dh{font-size:15.5px;font-weight:600}
.dim-head .dw{font-size:12px;color:var(--muted);background:var(--line2);border-radius:99px;padding:2px 9px}
.dim-head .dd{font-size:12.5px;color:var(--muted);margin-left:auto}

.item{margin-bottom:20px}
.item-h{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.item-h .c{font-size:11.5px;font-weight:700;color:var(--red);background:var(--red-l);border-radius:5px;padding:1px 6px;flex:none}
.item-h .nm{font-size:14.5px;font-weight:600}
.item-h .w{font-size:11.5px;color:var(--muted);margin-left:auto;flex:none}
.item-def{font-size:12.5px;color:var(--muted);line-height:1.65;margin:0 0 12px;padding-left:2px}
.beh{padding:11px 0;border-top:1px dashed var(--line2)}
.beh:first-of-type{border-top:1px solid var(--line2)}
.beh .bt{font-size:13.5px;line-height:1.7;color:var(--ink2);display:flex;gap:7px;margin-bottom:9px}
.beh .bt .no{flex:none;color:var(--muted);font-weight:600;font-size:12.5px;padding-top:1px}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.opt{height:40px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:13.5px;color:var(--ink2);
  transition:.15s;display:flex;align-items:center;justify-content:center;gap:5px}
.opt:hover{border-color:#D6D2CB;background:#FCFBF9}
.opt.on{font-weight:600}
.opt.on[data-v="1"]{background:var(--green-l);border-color:#9DCBB4;color:#22694A}
.opt.on[data-v="0.5"]{background:var(--amber-l);border-color:#E7C79B;color:#8F5A21}
.opt.on[data-v="0"]{background:var(--red-l);border-color:var(--red-line);color:var(--red)}

.open-q{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:14px}
.open-q h3{font-size:14.5px;margin-bottom:4px}
.open-q .q{font-size:13px;color:var(--ink2);margin:14px 0 8px;line-height:1.7}
.open-q .q:first-of-type{margin-top:10px}

.submit-bar{position:sticky;bottom:0;z-index:55;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);padding:10px 18px calc(10px + env(safe-area-inset-bottom));margin:0 -18px -60px}
.submit-bar .in{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:12px}
.submit-bar .tip{flex:1;font-size:12px;color:var(--muted);line-height:1.5}
.submit-bar .tip b{color:var(--red)}

/* ---------- 完成页 ---------- */
.done-box{text-align:center;padding:46px 22px}
.done-box .ic{width:64px;height:64px;border-radius:50%;background:var(--green-l);color:var(--green);
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:30px}
.done-box h2{font-size:20px;margin-bottom:8px}
.done-box p{color:var(--muted);font-size:13.5px;margin:0 0 22px}

/* ---------- 弹层 ---------- */
.toast{position:fixed;left:50%;bottom:88px;transform:translate(-50%,14px);background:rgba(34,33,31,.94);color:#fff;
  font-size:13px;padding:10px 16px;border-radius:10px;opacity:0;pointer-events:none;transition:.25s;z-index:200;max-width:86vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- 底部 ---------- */
.foot{text-align:center;font-size:11.5px;color:var(--muted);padding:24px 18px 12px;line-height:1.8}

@media (max-width:520px){
  .hero h1{font-size:23px}
  .wrap{padding:16px 14px 60px}
  .card.pad{padding:18px 16px}
  .dim-block{padding:16px 14px 2px}
  .opts{gap:6px}
  .opt{font-size:13px;height:42px}
  .qhead{top:57px}
  .steps .st span{display:none}
  .topbar .who span{display:none}
  .topbar-in{padding:10px 14px}
}