/* =========================================================================
   通讯会议系统 · 全局样式
   -------------------------------------------------------------------------
   两条硬约束：
   1) 看的人是中老年专家与秘书处，字要大、按钮要大、颜色要一眼分得清；
   2) 14"/15.6"/21"/23" 和 Windows 125%/150% 缩放下都不能显小。
      做法：根字号 clamp(17px, 0.5vw + 10.5px, 21px)，其余全部用 rem，
      于是 1280 宽的屏 ≈17px 正文、1920 宽 ≈20px、2560 宽封顶 21px。
      再给一个「标准 / 大 / 特大」三档手动倍率，看不清的人自己再放大。
   ========================================================================= */

:root {
  --fs-base: clamp(17px, 0.5vw + 10.5px, 21px);

  --bg: #eef1f5;
  --card: #ffffff;
  --line: #e3e7ee;
  --line-strong: #d2d9e3;
  --txt: #222a35;
  --txt-2: #3a4657;
  --muted: #6b7684;

  --brand: #2f6fd0;
  --brand-d: #245cb1;
  --brand-weak: #edf3fd;

  /* 表格操作按钮的色板：一列里颜色就是功能，不看字也知道点哪个 */
  --info: #4a86e8;
  --indigo: #3b6fd4;
  --amber: #e9a114;
  --orange: #ee8b1d;
  --green: #17a34a;
  --red: #dd4b52;

  --ok: #12905a;
  --ok-bg: #eaf8f0;
  --no: #d9434b;
  --no-bg: #fdecec;
  --warn-txt: #a35a06;
  --warn-bg: #fdf4e6;

  --radius: 6px;
  --radius-lg: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 2px 8px rgba(16, 24, 40, .05);
  --shadow-lg: 0 18px 48px rgba(16, 24, 40, .24);
  --ring: 0 0 0 3px rgba(47, 111, 208, .18);
}

html { font-size: var(--fs-base); }
html[data-fs="lg"] { font-size: calc(var(--fs-base) * 1.12); }
html[data-fs="xl"] { font-size: calc(var(--fs-base) * 1.26); }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
/* 注意：字号只能写在 body 上。写在 html 上会变成 1rem 自我引用（根元素的 rem
   以初始值 16px 计算），反而把上面那条 clamp 的根字号顶掉。 */
body { font-size: 1rem; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 60rem; margin: 0 auto; padding: 1.25rem; }
.wrap.narrow { max-width: 38rem; }

/* --------------------------------------------------------------- 顶栏（独立页） */
.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar .inner {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
}
.brand { font-weight: 700; font-size: 1.3rem; color: var(--brand); letter-spacing: .2px; }
/* 学会 logo（static/assets/logo.png）：放在「通讯会议系统」左边的徽标。
   源图是白底 JPEG，已经裁掉四周白边、白底抠成透明 —— 所以**只适合放在白底上**
   （标题栏与侧栏都是 --card 白底）；放到彩色底上时徽标里的白字会变成透明孔。
   高度用 rem 跟着字号档位一起缩放，别写死 px。 */
.logo { height: 2.1rem; width: auto; vertical-align: middle; margin-right: .5rem; }
.spacer { flex: 1; }

/* --------------------------------------------------------------- 后台外壳 */
.shell { display: flex; min-height: 100vh; align-items: stretch; }
.side {
  width: 14.5rem; flex: 0 0 14.5rem;
  background: var(--card); border-right: 1px solid var(--line);
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
}
.side-brand {
  padding: 1.4rem 1.25rem 1.1rem; font-weight: 700; font-size: 1.15rem;
  color: var(--brand); border-bottom: 1px solid var(--line); line-height: 1.3;
  /* 徽标比文字高，靠 flex 居中才准 —— 只写 vertical-align:middle 的话总会偏上一点 */
  display: flex; align-items: center;
}
.nav { flex: 1; padding: .75rem .6rem; display: flex; flex-direction: column; gap: .3rem; overflow-y: auto; }
.nav button {
  text-align: left; border: 0; background: transparent; color: var(--txt-2);
  padding: .8rem .9rem; border-radius: var(--radius); cursor: pointer;
  font: inherit; font-size: 1.02rem; min-height: 3rem;
  display: flex; align-items: center;
}
.nav button:hover { background: #f4f7fb; color: var(--brand); }
.nav button.active { background: var(--brand); color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(47, 111, 208, .35); }
.nav button i {
  display: inline-block; width: 1.5rem; height: 1.5rem; line-height: 1.5rem; text-align: center;
  border-radius: 4px; background: #eef1f6; color: var(--muted);
  font-size: .78rem; font-style: normal; margin-right: .6rem; flex: 0 0 auto;
}
.nav button.active i { background: rgba(255, 255, 255, .3); color: #fff; }
.side-foot { padding: .9rem; border-top: 1px solid var(--line); }
.side-foot .btn { width: 100%; }

.col { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* 内容区顶条：专家扫码登录 + 字号档位 + 当前账号，和原系统那条白条一个位置 */
.appbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--card); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .75rem 1.5rem; min-height: 3.9rem;
}
/* 顶条右侧：当前账号 + 角色 + 账号操作（谁在操作、什么权限一眼看到） */
.appbar .who {
  display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .88rem; color: var(--muted);
}
.appbar .who .acct {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; color: var(--txt);
}
.pill.role { background: var(--brand-weak); color: var(--brand); border-color: transparent; font-weight: 600; }
/* 提醒条（默认口令 / 只读账号）：和卡片同宽，不抢正文的注意力 */
#acct_alert .hint { margin-bottom: 1rem; }

/* 字号档位：标准 / 大 / 特大 */
.fsbar { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.fsbtn {
  border: 0; background: #fff; color: var(--txt-2); cursor: pointer;
  font: inherit; font-size: .84rem; padding: .3rem .85rem; min-height: 0;
}
.fsbtn + .fsbtn { border-left: 1px solid var(--line); }
.fsbtn:hover { background: var(--brand-weak); color: var(--brand); }
.fsbtn.on { background: var(--brand); color: #fff; font-weight: 600; }

/* 会议详情里的子栏目：议题管理 / 未表决名单 / 表决结果 —— 一次只放一样，别把三件事堆在一屏 */
.subnav {
  display: flex; align-items: center; gap: .3rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); margin: 0 0 1.1rem;
}
.subnav button {
  border: 0; background: transparent; color: var(--txt-2); cursor: pointer;
  font: inherit; font-size: 1.02rem; padding: .6rem 1.1rem; min-height: 2.6rem;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: .45rem;
}
.subnav button:hover { color: var(--brand); }
.subnav button.on { color: var(--brand); font-weight: 600; border-bottom-color: var(--brand); }

.main { flex: 1; min-width: 0; padding: 1.5rem 1.75rem 3rem; }

/* --------------------------------------------------------------- 卡片 */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin-bottom: 1.1rem;
  overflow: hidden;
}
.card-h {
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--line);
  font-weight: 600; font-size: 1.08rem;
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
}
.card-h .spacer { flex: 1; }
.card-b { padding: 1.4rem; }
/* flush 的卡片body直接装表格：窄屏时允许横向滚动，宁可滑动也别把按钮挤到两行 */
.card-b.flush { padding: 0; overflow-x: auto; }
/* 卡片里另开一段（如专家库展开的录入表单）：淡底 + 分割线，跟下面的列表分开但仍在同一张卡里 */
.card-b.sect { background: #fafbfd; border-bottom: 1px solid var(--line); }

/* --------------------------------------------------------------- 表单 */
label.f { display: block; margin-bottom: .9rem; }
label.f > span { display: block; font-size: .9rem; color: var(--muted); margin-bottom: .35rem; }
/* 注意把 tel / email 也列上：手机号登录框就是 type=tel，漏了它就会缩成浏览器默认的窄条 */
input[type=text], input[type=tel], input[type=email], input[type=password],
input[type=datetime-local], input[type=number], select, textarea {
  width: 100%;
  min-height: 2.7rem;
  padding: .55rem .8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font: inherit; font-size: 1rem; color: var(--txt); background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: #a3adbb; }
textarea { resize: vertical; min-height: 6rem; line-height: 1.6; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: var(--ring);
}
input:disabled, select:disabled, textarea:disabled { background: #f3f5f8; color: #9aa4b2; cursor: not-allowed; }
select { cursor: pointer; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.row { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 15rem; }
.row > .fit { flex: 0 0 auto; min-width: 0; }

/* 单选 / 复选：给中老年人放大，并跟随品牌色 */
input[type=radio], input[type=checkbox] {
  width: 1.2rem; height: 1.2rem; accent-color: var(--brand); cursor: pointer; flex: 0 0 auto;
}

/* --------------------------------------------------------------- 按钮 */
/* 一列操作里颜色即功能：蓝=查看/主操作，橙=导出，黄=编辑，红=删除，绿=开启 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  min-height: 2.75rem; padding: .55rem 1.3rem;
  font: inherit; font-size: .98rem; font-weight: 500; line-height: 1.25;
  color: #fff; background: var(--brand); border: 1px solid var(--brand);
  border-radius: var(--radius); cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, filter .15s, box-shadow .15s;
}
.btn:hover:not(:disabled) { background: var(--brand-d); border-color: var(--brand-d); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }

.btn.ghost { background: #fff; color: var(--txt-2); border-color: var(--line-strong); }
.btn.ghost:hover:not(:disabled) { background: #f4f7fb; border-color: #c2cbd8; color: var(--brand); }
.btn.info { background: var(--info); border-color: var(--info); }
.btn.indigo { background: var(--indigo); border-color: var(--indigo); }
.btn.edit { background: var(--amber); border-color: var(--amber); }
.btn.warn { background: var(--orange); border-color: var(--orange); }
.btn.ok { background: var(--green); border-color: var(--green); }
.btn.danger { background: var(--red); border-color: var(--red); }
.btn.info:hover:not(:disabled), .btn.indigo:hover:not(:disabled), .btn.edit:hover:not(:disabled),
.btn.warn:hover:not(:disabled), .btn.ok:hover:not(:disabled), .btn.danger:hover:not(:disabled) {
  filter: brightness(.92); background: initial; border-color: transparent;
}
.btn.small {
  min-height: 2.25rem; padding: .3rem .85rem; font-size: .88rem; border-radius: 5px;
}

/* --------------------------------------------------------------- 表格 */
table { width: 100%; border-collapse: collapse; }
th, td {
  text-align: left; padding: .8rem 1.1rem;
  border-bottom: 1px solid var(--line); vertical-align: middle;
}
th {
  font-size: .92rem; color: #5c6878; font-weight: 600;
  background: #f7f9fc; white-space: nowrap;
}
td { font-size: 1rem; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #f9fbff; }
/* 第一列（会议名 / 议题名）给个下限，窄屏时也不至于被挤成一字一行 */
td.wrap, th.wrap { white-space: normal; min-width: 12rem; }
/* 操作列默认允许换行：宁可按钮排两行，也不要把会议名挤成一列孤字、
   更不要在表格里冒出横向滚动条 */
td.ops, th.ops { white-space: normal; min-width: 17rem; }
td.ops .btn { margin: 0 .35rem .35rem 0; }
td.num, th.num { text-align: center; }

/* 屏幕真够宽时（内容区能装下整排按钮）才排成一行 */
@media (min-width: 2060px) {
  td.ops, th.ops { white-space: nowrap; min-width: 26rem; }
  td.wrap, th.wrap { min-width: 15rem; }
}
table.grid-num th { text-align: center; }
table.grid-num td.num { text-align: center; }
.nowrap { white-space: nowrap; }

/* --------------------------------------------------------------- 徽标 / 提示 */
.badge {
  display: inline-block; padding: .15rem .7rem; border-radius: 5px;
  font-size: .88rem; font-weight: 600; border: 1px solid var(--line);
  white-space: nowrap;   /* 「已达法定人数」「未通过」这类短标签绝不能被拆成两行 */
}
.badge.draft { color: var(--muted); background: #f3f4f6; }
.badge.open { color: var(--ok); background: var(--ok-bg); border-color: #c6ead5; }
.badge.closed { color: var(--warn-txt); background: var(--warn-bg); border-color: #f0dcbc; }
.badge.ok { color: var(--ok); background: var(--ok-bg); border-color: #c6ead5; }
.badge.no { color: var(--no); background: var(--no-bg); border-color: #f4c9cb; }

.muted { color: var(--muted); }
.small { font-size: .88rem; }
.mt8 { margin-top: .5rem; }
.mt16 { margin-top: 1rem; }
.empty { color: var(--muted); padding: 2.5rem 1.5rem; text-align: center; font-size: 1rem; }
.hint {
  background: var(--brand-weak); color: #1a4a8c; padding: .75rem 1.1rem;
  border-radius: var(--radius); font-size: .95rem; border-left: 4px solid var(--brand);
}
.hint.warn { background: var(--warn-bg); color: #8a4b00; border-left-color: var(--orange); }
.hint.bad { background: var(--no-bg); color: #8f1d1d; border-left-color: var(--red); }
.pill {
  display: inline-block; padding: .15rem .7rem; border-radius: 5px;
  font-size: .88rem; background: var(--brand-weak); color: #1a4a8c;
}
.pill.done { background: var(--ok-bg); color: var(--ok); }
/* 表格里的窄标签（角色名、状态）用 .tag：不换行，列宽不够就整列变宽，不要拆成竖排字 */
.pill.tag { white-space: nowrap; }
.member-head.sticky { position: sticky; top: 0; z-index: 10; }

.toast {
  position: fixed; left: 50%; bottom: 2rem; transform: translateX(-50%);
  background: #1f2733; color: #fff; padding: .8rem 1.4rem; border-radius: var(--radius);
  font-size: 1rem; z-index: 99; box-shadow: var(--shadow-lg); max-width: 90vw;
}
.toast.bad { background: var(--red); }

/* --------------------------------------------------------------- 指标卡 / 公示页 */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.metric {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.1rem 1.3rem; box-shadow: var(--shadow);
}
.metric .k { font-size: .92rem; color: var(--muted); }
.metric .v { font-size: 2.1rem; font-weight: 700; margin-top: .1rem; line-height: 1.25; }
.metric .v small { font-size: 1rem; font-weight: 400; color: var(--muted); margin-left: .15rem; }
.metric.ok { border-color: #c6ead5; background: #f6fdf9; }
.metric.bad { border-color: #f4c9cb; background: #fef8f8; }
.metrics.three { grid-template-columns: repeat(3, 1fr); }
.metrics.three .metric:nth-child(1) .v { color: var(--brand); }

.barrow {
  display: grid; grid-template-columns: 12rem 1fr 5.5rem; gap: .8rem;
  align-items: center; margin: .6rem 0;
}
.barrow .lbl { font-size: .98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barrow .track { background: #e9edf4; height: 1.25rem; border-radius: 999px; overflow: hidden; }
.barrow .fill { height: 100%; background: var(--brand); border-radius: 999px; transition: width .4s ease; }
.barrow .fill.no { background: #cf6a6a; }
.barrow .fill.abstain { background: #c3c9d4; }
.barrow .cnt { text-align: right; font-size: .98rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.topic-stat {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.2rem 1.4rem; margin-bottom: 1rem; background: var(--card);
}
.topic-stat h3 { margin: 0 0 .2rem; font-size: 1.15rem; }
.topic-stat .meta { font-size: .92rem; color: var(--muted); margin-bottom: .8rem; }

/* 会场投屏模式：再放大一档 */
.screen .metric .v { font-size: 3rem; }
.screen .topic-stat h3 { font-size: 1.7rem; }
.screen .barrow { grid-template-columns: 16rem 1fr 7rem; }
.screen .barrow .lbl, .screen .barrow .cnt { font-size: 1.25rem; }
.screen .barrow .track { height: 1.6rem; }

@media (max-width: 900px) {
  .metrics, .metrics.three { grid-template-columns: repeat(2, 1fr); }
  .barrow { grid-template-columns: 7rem 1fr 4rem; }
}

/* --------------------------------------------------------------- 专家端 */
.member-head {
  background: linear-gradient(135deg, #1f5cb4, #3f86dd);
  color: #fff; padding: 1.6rem 1.25rem;
}
.member-head h1 { margin: 0 0 .3rem; font-size: 1.55rem; }
.member-head p { margin: 0; opacity: .92; font-size: .95rem; }
.member-head .fsbar { border-color: rgba(255, 255, 255, .55); }
.member-head .fsbtn { background: rgba(255, 255, 255, .12); color: #fff; }
.member-head .fsbtn + .fsbtn { border-left-color: rgba(255, 255, 255, .35); }
.member-head .fsbtn.on { background: #fff; color: var(--brand); }
.member-head .fsbtn:hover { background: rgba(255, 255, 255, .28); color: #fff; }

.topic {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.2rem 1.3rem; margin-bottom: 1rem; background: #fff;
}
.topic h3 { margin: 0 0 .5rem; font-size: 1.15rem; line-height: 1.5; }
.topic .body { color: var(--txt-2); white-space: pre-wrap; margin-bottom: .8rem; font-size: 1rem; }
.opt {
  display: flex; align-items: center; gap: .7rem;
  padding: .8rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius);
  margin-bottom: .5rem; cursor: pointer; font-size: 1.05rem;
}
.opt:hover { background: #f6f9fe; border-color: var(--brand); }
.opt input { margin: 0; }
.opt.chosen { border-color: var(--brand); background: var(--brand-weak); font-weight: 600; }
.mine { color: var(--ok); font-size: .95rem; margin-top: .6rem; }
.loginbox { max-width: 26rem; margin: 3rem auto; }
.member-head .row { align-items: center; }

@media (max-width: 900px) {
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .row > * { min-width: 100%; }
}

@media (max-width: 900px) {
  .shell { flex-direction: column; }
  .side {
    width: auto; flex: 0 0 auto; height: auto; position: static;
    flex-direction: row; align-items: center; overflow-x: auto;
  }
  .side-brand { border-bottom: 0; padding: .8rem 1rem; white-space: nowrap; }
  .nav { flex-direction: row; padding: .5rem; gap: .2rem; }
  .nav button { white-space: nowrap; padding: .55rem .8rem; min-height: 0; }
  .side-foot { border-top: 0; border-left: 1px solid var(--line); padding: .5rem .8rem; }
  .side-foot .btn { width: auto; }
  .main { padding: 1rem 1rem 2.5rem; }
  .appbar { padding: .6rem 1rem; }
}

/* --------------------------------------------------------------- 一人多角色的勾选表 */
.role-grid { display: grid; gap: .5rem; }
.role-item {
  display: grid; grid-template-columns: 10.5rem minmax(9rem, 1fr) 8rem; gap: .6rem 1rem;
  align-items: center; border: 1px solid var(--line); border-radius: var(--radius);
  padding: .5rem .9rem; background: #fff;
}
.role-item.on { border-color: var(--brand); background: var(--brand-weak); }
.role-item > input[type=checkbox] { width: auto; margin-right: .4rem; }
.role-item .rname { font-size: 1rem; display: flex; align-items: center; }
.role-item input[type=text], .role-item input[type=number] { min-height: 2.25rem; padding: .35rem .6rem; font-size: .95rem; }
.role-item input:disabled { background: #f3f5f8; color: var(--muted); }

.checklist { display: flex; flex-wrap: wrap; gap: .5rem; }
.checklist label {
  display: inline-flex; align-items: center; gap: .45rem; font-size: .96rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: .4rem 1rem; cursor: pointer;
}
.checklist label:hover { border-color: var(--brand); }
.checklist label.on { border-color: var(--brand); background: var(--brand-weak); color: var(--brand); font-weight: 600; }
.checklist input { width: auto; }

/* 应到名单：全选 / 清空 + 已勾人数 */
.roster-bar { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; flex-wrap: wrap; }
.roster-bar .spacer { flex: 1; }
/* 名单框自己滚（弹窗头部与「保存」钉住不动），高度跟着窗口走，
   不然固定 20rem 在图屏高一点的地方会有两条滚动条 */
.roster-list {
  max-height: min(30rem, 46vh); overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.roster-row {
  display: flex; align-items: center; gap: .6rem; padding: .55rem 1rem;
  border-bottom: 1px solid var(--line); font-size: .96rem;
}
.roster-row:last-child { border-bottom: none; }
.roster-row.on { background: var(--brand-weak); }
.roster-row .rk { display: flex; align-items: center; gap: .6rem; flex: 1 1 auto; min-width: 0; cursor: pointer; }
.roster-row .rk input { width: auto; }
.roster-row .rk .who { min-width: 5rem; font-weight: 600; }
.roster-row .rk .rt { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-row .pill, .roster-row .badge, .roster-row button { white-space: nowrap; flex: 0 0 auto; }

/* 专家表单里的「手机号已存在 → 人员替换」提示 */
.mb-hint { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.mb-hint:not(:empty) { margin: -.3rem 0 .9rem; }
.mb-hint .bad { color: var(--red); font-size: .95rem; font-weight: 600; }

/* --------------------------------------------------------------- 弹窗（三层叠开） */
.modal-mask {
  position: fixed; inset: 0; background: rgba(17, 24, 39, .5); z-index: 50;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 4vh 1rem 2rem; overflow-y: auto;
}
.modal-mask.lv2 { z-index: 60; }
.modal-mask.lv3 { z-index: 70; }
.modal {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  width: 42rem; max-width: 100%; overflow: hidden;
  /* 弹窗整体封顶 92vh；头尾钉住、只有中间滚动 —— 确认/保存键永远看得见 */
  display: flex; flex-direction: column; max-height: 92vh;
}
.modal.wide { width: 58rem; }
.modal.xwide { width: 74rem; }
.modal-h {
  flex: 0 0 auto;
  padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--line);
  font-weight: 600; font-size: 1.15rem;
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
}
.modal-h .spacer { flex: 1; }
.modal-b { flex: 1 1 auto; padding: 1.5rem; overflow-y: auto; }
.modal-f {
  flex: 0 0 auto; padding: 1rem 1.5rem; border-top: 1px solid var(--line);
  text-align: right; background: #fafbfd;
}
.modal-b > table { margin-top: .5rem; }

/* 整屏弹窗：实时投票看板用 —— 它是现场投出来的那一张，
   不只占页面中间一块。字号/名字墙也跟着放大一档（坐后排也看得清）。 */
.modal-mask.full { padding: 0; align-items: stretch; }
.modal.full {
  width: 100%; max-width: none; height: 100vh; max-height: none; border-radius: 0;
}
.modal.full .modal-b { padding: 1.4rem 2rem 2rem; }
.modal.full .metric .v { font-size: 3.4rem; }
.modal.full h4 { font-size: 1.25rem; }
.modal.full .names { max-height: none; }
.modal.full .names .nm { font-size: 1.2rem; padding: .6rem 1.05rem; }
.modal.full table { font-size: 1.08rem; }
.modal.full .livebar { height: 3rem; }
.modal.full .livebar-txt { font-size: 1.2rem; }

/* PDF 材料层：整屏铺满、不出留白也不摆页脚 —— 专家多是用手机看，点开就要立刻看到内容，
   上下两条边和留白都在跟正文抢地方。左边那栏缩略图是浏览器自带阅读器的开关，网页管不了；
   我们能做的就是把地方让到最大。（见 member.js 的 renderViewer） */
/* 选择器要压过上面的 .modal.full .modal-b，所以两段都带上 .modal.full（手机上是窄屏，
   材料名的标题只占一行、超长省略，不然一个长文件名就把两行高度吃掉了）。 */
.modal.full .modal-b.flush { padding: 0; overflow: hidden; display: flex; }
.modal.full .modal-b.flush > .view-frame {
  flex: 1 1 auto; width: 100%; height: auto; min-height: 0; border: 0; border-radius: 0;
}
.modal.full .modal-h { flex-wrap: nowrap; gap: .5rem; }
.modal.full .modal-h .ttl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.req { color: #dc2626; font-style: normal; }
.radio { display: inline-flex; align-items: center; gap: .4rem; margin-right: 1.4rem; font-size: 1rem; cursor: pointer; }
.radio input { width: auto; }
.fl { display: block; font-size: .9rem; color: var(--muted); margin: .9rem 0 .35rem; }

.switch { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; }
.switch input { display: none; }
.switch i {
  width: 3rem; height: 1.6rem; border-radius: 999px; background: #cbd5e1;
  position: relative; transition: background .2s; display: inline-block;
}
.switch i::after {
  content: ''; position: absolute; top: .15rem; left: .15rem; width: 1.3rem; height: 1.3rem;
  border-radius: 50%; background: #fff; transition: left .2s;
}
.switch input:checked + i { background: var(--brand); }
.switch input:checked + i::after { left: 1.55rem; }
.switch em { font-style: normal; font-size: .95rem; color: var(--muted); }

/* 投票结果：名字墙（已投票变蓝） */
.names { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; max-height: 22rem; overflow-y: auto; }
.names .nm {
  background: #eef1f6; color: var(--txt-2); border-radius: 5px;
  padding: .4rem .9rem; font-size: .98rem;
}
.names .nm.voted { background: var(--brand); color: #fff; font-weight: 600; }

/* 专家端的「签字确认」层：左边标签右边值，签谁、签什么一眼看清 */
.sign-box {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: .6rem .9rem;
  align-items: baseline; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.1rem; background: #fafbfd;
}
.sign-box > span { font-size: .9rem; color: var(--muted); }
.sign-box > div { word-break: break-word; }
.sign-box b { font-size: 1.15rem; }

/* 专家端的「手写签名」板：白纸一张，鼠标/手指直接写 */
.sign-pad { margin-top: 1.1rem; }
.sign-pad-h {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; margin-bottom: .45rem; font-size: .9rem; color: var(--muted);
}
.sign-pad-box { position: relative; }
.sign-pad-box canvas {
  display: block; width: 100%; height: 11rem; background: #fff; cursor: crosshair;
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  touch-action: none;   /* 触屏上写字不能变成滚页面 */
}
.sign-pad-box.need canvas { border: 1px solid var(--red); box-shadow: 0 0 0 3px var(--no-bg); }
.sign-pad-ph {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  text-align: center; color: #a9b2bf; font-size: .95rem; pointer-events: none;
}

/* 议题管理弹窗底部的翻页条 */
.modal .pager {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding-top: 1rem; font-size: .95rem; color: var(--txt-2);
}
.modal .pager input { width: 5rem; min-height: 2.25rem; }
.modal .pager select { width: auto; min-height: 2.25rem; }

/* 新增/编辑选项弹窗：左标签右控件，和原系统那张表单一样 */
.tf-item {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: .5rem 1.2rem;
  align-items: center; padding: .5rem 0;
}
.tf-item.on .tf-k, .tf-item.on .tf-l { color: var(--txt); }
.tf-k, .tf-l { text-align: right; font-size: .96rem; color: var(--muted); }
.tf-on { display: flex; gap: 1.8rem; }
.tf-att { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.tf-note { padding: 0 0 .6rem 12.2rem; font-size: .85rem; }
/* 原生 file 控件长相各地不一样，裹一个按钮当它的脸 */
.file-btn { position: relative; overflow: hidden; display: inline-block; }
.file-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* 议题材料清单（后台弹窗里）：一行一份，名字长了自己省略，不把按钮挤走 */
.att-list {
  margin: 0 0 .8rem 12.2rem; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.att-row {
  display: flex; align-items: center; gap: .8rem;
  padding: .45rem .8rem; font-size: .92rem;
}
.att-row + .att-row { border-top: 1px solid var(--line); }
.att-row.pending { background: #f6f9ff; }        /* 还没上传的：给个淡底，一眼分辨 */
.att-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-line a { margin-right: .2rem; }

/* 专家端「查看材料」：PDF 内嵌、图片缩到宽度、Office 抽出的纯文本 */
.view-frame {
  width: 100%; height: 68vh; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fff;
}
.view-img { text-align: center; }
.view-img img { max-width: 100%; height: auto; border-radius: var(--radius); }
.view-text {
  white-space: pre-wrap; word-break: break-word; margin: 0;
  max-height: 60vh; overflow: auto; font-size: .95rem; line-height: 1.7;
  background: #fafbfd; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.2rem;
}

/* 材料拆成的「块」：文字、表格、图片按原位排下来（见 member.js 的 renderBlocks）。 */
.view-doc {
  max-height: 60vh; overflow: auto; line-height: 1.75; font-size: .95rem;
  background: #fafbfd; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.2rem;
}
.view-doc p { margin: .45rem 0; }
.doc-h { font-weight: 600; line-height: 1.4; margin: 1.1rem 0 .5rem; }
.doc-h:first-child { margin-top: 0; }
.doc-h1 { font-size: 1.24rem; }
.doc-h2 { font-size: 1.14rem; }
.doc-h3 { font-size: 1.05rem; }
.doc-h4 { font-size: 1rem; }
.doc-li { margin: .25rem 0; padding-left: 1.1rem; text-indent: -1.1rem; }
/* 材料里的表格：框线浅一点，单元格换行不撑破弹层 */
.doc-table {
  border-collapse: collapse; margin: .7rem 0; max-width: 100%;
  font-size: .92rem; background: #fff;
}
.doc-table td {
  border: 1px solid var(--line); padding: .35rem .6rem;
  vertical-align: top; word-break: break-word;
}
.doc-table tr:first-child td { background: #f2f5f9; font-weight: 600; }
/* 图片照原样显示：给一个白底卡片，不让它顶满整页，点不到“下载”也拿不走原件 */
.doc-img {
  display: block; max-width: 100%; height: auto; margin: .7rem auto;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}

/* --------------------------------------------------------------- 专家扫码登录 */
.qrbox {
  display: flex; justify-content: center;
  padding: 1.2rem; margin: 0 auto 1rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  width: fit-content;
}
.qrbox svg { width: 17rem; height: 17rem; display: block; max-width: 70vw; max-height: 70vw; }
.qrurl {
  text-align: center; font-size: 1.05rem; font-weight: 600;
  word-break: break-all; margin: 0 0 .4rem;
}

/* 扫码登录单独成一页（/entry.html）：给大屏/投影用，码比弹窗里那一版再大一档 */
.qr-page { max-width: 48rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; text-align: center; }
.qr-page .card-b { padding: 1.8rem 1.5rem; }
.qr-page .qrbox svg { width: 23rem; height: 23rem; max-width: 78vw; max-height: 78vw; }
.qr-page .qrurl { font-size: 1.25rem; }
.qr-page .row { justify-content: center; }

/* --------------------------------------------------------------- 实时投票看板 */
/* 左上角的红点：在跳就说明真的在刷新，不是一张静态图 */
.livedot {
  width: .65rem; height: .65rem; border-radius: 50%; background: #e5484d;
  display: inline-block; flex: 0 0 auto; animation: livepulse 1.6s ease-in-out infinite;
}
.livedot.off { background: #9aa4b2; animation: none; }
@keyframes livepulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(229, 72, 77, .5); }
  50% { opacity: .55; transform: scale(.82); box-shadow: 0 0 0 .35rem rgba(229, 72, 77, 0); }
}

.livebar {
  position: relative; height: 2.4rem; margin-top: 1rem;
  background: #e9edf4; border-radius: 999px; overflow: hidden;
}
.livebar-fill {
  height: 100%; background: linear-gradient(90deg, #3f86dd, #2f6fd0);
  border-radius: 999px; transition: width .6s cubic-bezier(.22, .61, .36, 1);
}
.livebar-txt {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: .98rem; font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* 名字墙上多一个小勾，扫一眼就知道谁投了 */
.names .nm .tick { font-style: normal; font-size: .8rem; margin-left: .3rem; opacity: .9; }
/* 刚投完的那一个闪一下，秘书处能看见「正在变色」 */
.names .nm.just { animation: nmflash 1.1s ease-out; }
@keyframes nmflash {
  0% { background: #ffd34d; color: #4a3400; transform: scale(1.18); }
  60% { background: #7ab0f0; color: #fff; transform: scale(1.02); }
  100% { background: var(--brand); color: #fff; transform: scale(1); }
}
.tally { display: inline-block; margin-right: 1rem; color: var(--muted); font-size: .95rem; }
.tally b { color: var(--txt); font-size: 1.05rem; }

/* 专家端：选了「不同意」时提示写原因 */
.reason-hint {
  margin-top: .6rem; padding: .7rem 1rem; border-radius: var(--radius); font-size: .96rem;
  background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa;
}

/* 后台：议题意见（折叠，不记名） */
details.cmt { margin-top: .5rem; }
details.cmt summary { cursor: pointer; color: var(--brand); font-size: .92rem; }
details.cmt ol { margin: .5rem 0 0 1.3rem; padding: 0; }
details.cmt li { margin-bottom: .3rem; color: var(--txt-2); white-space: pre-wrap; }

/* 窄窗口下弹窗也还是个居中的弹窗（只是自适应变窄），不要铺成整屏 */
@media (max-width: 900px) {
  .tf-item { grid-template-columns: 1fr; }
  .tf-k, .tf-l { text-align: left; }
  .tf-note { padding-left: 0; }
  .role-item { grid-template-columns: 1fr; }
}