/* MeetSeat 公共样式：调色板、控件、弹窗、说明气泡。
   venue.html（排座编辑器）和 persons.html（参会人信息表）共用。
   ★ 颜色只在这里定义一处——两个页面各存一份调色板，改一次颜色要改两个
     文件，迟早漏掉一个，然后两个页面深色模式长得不一样。 */

:root{
  --paper:#EDEFEE; --card:#F7F8F7; --panel:#FFFFFF;
  --ink:#1A211F; --ink-mute:#5B6663; --ink-faint:#8A9491;
  --rule:#CBD2CF; --rule-soft:#DDE2E0;
  --cinnabar:#B3342A; --cinnabar-bg:#F0DEDB;
  --slate:#37625B; --slate-bg:#DCE6E3;
  --sel:#1F6FB2; --sel-bg:#DCE9F4;
  /* ★ 一律用系统字体，不再从 Google Fonts 拉
     原来第一档是 Noto Sans SC，国内基本拉不到，实际落到的仍是苹方/雅黑——
     也就是说那次跨境请求多数时候只换来一段首屏字体闪烁和几百毫秒等待。
     索性去掉，以系统字体为准。

     顺序的用意：-apple-system / Segoe UI 负责拉丁字母（它们没有中文字形，
     中文会自动落到后面那几档），苹方管 macOS，雅黑管 Windows，
     思源/Noto CJK 管 Linux。 */
  --f-body:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#141A19; --card:#1C2422; --panel:#1F2725;
    --ink:#E4E9E7; --ink-mute:#9DA8A5; --ink-faint:#6E7976;
    --rule:#2F3A37; --rule-soft:#242D2B;
    --cinnabar:#E2705F; --cinnabar-bg:#37211E;
    --slate:#6FAEA2; --slate-bg:#1B2B28;
    --sel:#6BA9DC; --sel-bg:#1A2A38;
  }
}
:root[data-theme="dark"]{
  --paper:#141A19; --card:#1C2422; --panel:#1F2725;
  --ink:#E4E9E7; --ink-mute:#9DA8A5; --ink-faint:#6E7976;
  --rule:#2F3A37; --rule-soft:#242D2B;
  --cinnabar:#E2705F; --cinnabar-bg:#37211E;
  --slate:#6FAEA2; --slate-bg:#1B2B28;
  --sel:#6BA9DC; --sel-bg:#1A2A38;
}
*{box-sizing:border-box}
/* hidden 属性默认只是 display:none 的 UA 样式，随便一条 display:flex
   就能把它压过去——元素明明 hidden 了却还显示着，而且查 DOM 时一切正常。
   加 !important 让 hidden 名副其实。 */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-weight:300;font-size:14px;
  display:flex;flex-direction:column;overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

button.mini{padding:5px 10px;font-size:12px}

input[type=number],input[type=text],select{
  font-family:var(--f-mono);font-size:12.5px;
  background:var(--card);color:var(--ink);
  border:1px solid var(--rule);border-radius:3px;
  padding:5px 7px;width:100%;min-width:0;
}
input[type=range]{width:100%;accent-color:var(--sel)}
button{
  font-family:var(--f-body);font-size:12.5px;font-weight:400;
  background:var(--card);color:var(--ink);
  border:1px solid var(--rule);border-radius:3px;
  padding:7px 11px;cursor:pointer;transition:background .12s,border-color .12s;
}
button:hover{background:var(--rule-soft);border-color:var(--ink-faint)}
button.primary{background:var(--slate);border-color:var(--slate);color:#fff}
button.primary:hover{filter:brightness(1.1)}
button.danger{color:var(--cinnabar);border-color:var(--cinnabar)}
button.danger:hover{background:var(--cinnabar-bg)}
button.on{background:var(--sel-bg);border-color:var(--sel);color:var(--sel)}
button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--sel);outline-offset:1px
}
.btnrow{display:flex;gap:7px;flex-wrap:wrap}
.btnrow button{flex:1;min-width:76px}

/* 说明文字收成一个 ⓘ 图标，悬停/聚焦才展开——侧栏就这么窄，
   整段正文摆在那里，真正要看的按钮和列表就被挤到屏幕外面去了。
   气泡用 position:fixed + JS 定位：侧栏是 overflow-y:auto，
   绝对定位的气泡会被裁在侧栏边界里，读不全。 */
.hint-ic{
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;width:14px;height:14px;margin-left:6px;
  border:1px solid var(--rule);border-radius:50%;
  font-family:var(--f-mono);font-size:9.5px;line-height:1;
  letter-spacing:0;text-transform:none;
  color:var(--ink-faint);background:var(--card);
  cursor:help;user-select:none;vertical-align:middle;
}
.grp-t .grp-act{
  margin-left:auto;padding:2px 7px;font-size:11px;line-height:1.5;
  font-family:var(--f-body);letter-spacing:0;text-transform:none;
}
/* 组标题里只能有一个 margin-left:auto，否则两个元素会把空白对半分、
   按钮被推到标题中间。有按钮时说明按钮已经顶到最右，ⓘ 跟在它后面就行。 */
.grp-t .grp-act ~ .hint-ic{margin-left:6px}
.grp-t .hint-ic{margin-left:auto}
.hint-ic:hover,.hint-ic:focus-visible{
  color:var(--sel);border-color:var(--sel);background:var(--sel-bg);
}
.hint-tip{
  position:fixed;z-index:60;display:none;max-width:270px;
  padding:9px 11px;border:1px solid var(--rule);border-radius:3px;
  background:var(--panel);box-shadow:0 5px 16px rgba(0,0,0,.16);
  font-size:11.5px;line-height:1.65;color:var(--ink-mute);
  pointer-events:none;
}
.hint-tip.show{display:block}

.hint{
  font-size:11.5px;line-height:1.65;color:var(--ink-faint);
  margin:8px 0 0;
}

.empty{
  font-size:12.5px;color:var(--ink-faint);line-height:1.7;
  padding:14px;background:var(--card);border:1px dashed var(--rule);
  border-radius:3px;
}

/* ── 自定义弹窗 ────────────────────
   不用浏览器原生 prompt/confirm：标题栏会显示 "127.0.0.1:5180 显示"，
   在客户面前很不体面，样式也完全不受控。 */
.modal-mask{
  position:fixed;inset:0;z-index:50;display:none;
  align-items:center;justify-content:center;
  background:rgba(20,26,25,.34);backdrop-filter:blur(1.5px);
}
.modal{
  background:var(--panel);border:1px solid var(--rule);border-radius:6px;
  box-shadow:0 12px 40px rgba(0,0,0,.22);
  width:min(420px,calc(100vw - 40px));padding:22px 24px 18px;
}
.modal-t{font-size:15.5px;font-weight:500;margin-bottom:12px}
.modal-text{font-size:13.5px;color:var(--ink-mute);line-height:1.75;margin:0 0 12px}
.modal-input{
  font-family:var(--f-body);font-size:14px;width:100%;
  padding:8px 10px;border:1px solid var(--rule);border-radius:4px;
  background:var(--card);color:var(--ink);
}
.modal-input:focus{outline:2px solid var(--sel);outline-offset:-1px;border-color:var(--sel)}
/* 宽弹窗：字段对应那一屏要同时放下 sheet 选择、数据预览和十几行对应关系，
   420px 是塞不下的。body 自己滚，按钮行始终留在视野里。 */
.modal.wide{width:min(760px,calc(100vw - 40px))}
.modal.wide .modal-b{max-height:calc(100vh - 240px);overflow-y:auto}

/* 字段对应表 */
.impbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.impbar label{font-size:12.5px;color:var(--ink-mute)}
.impbar select,.impbar input{width:auto;min-width:80px}
.impmap{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.impmap .r{display:flex;align-items:center;gap:8px}
.impmap .r>span{flex:0 0 86px;font-size:12.5px;color:var(--ink-mute)}
.impmap .r>span b{color:var(--cinnabar);font-weight:400}
.impmap .r select{flex:1;min-width:0;font-size:12.5px;padding:4px 6px}
.impmap .r.on select{border-color:var(--slate)}
.imptip{font-size:11.5px;line-height:1.65;color:var(--ink-faint);margin:10px 0 0}
/* 预览表：只是让人确认"表头找对了没有" */
.imppv{overflow-x:auto;border:1px solid var(--rule-soft);border-radius:3px;
  margin-bottom:12px;max-height:150px;overflow-y:auto}
.imppv table{border-collapse:collapse;font-size:11.5px;width:max-content}
.imppv th,.imppv td{border:1px solid var(--rule-soft);padding:3px 7px;
  white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.imppv th{background:var(--card);color:var(--ink-mute);font-weight:500;
  position:sticky;top:0}
/* 体检报错清单 */
.imperr{max-height:46vh;overflow-y:auto;border:1px solid var(--rule);border-radius:3px}
.imperr table{border-collapse:collapse;font-size:12.5px;width:100%}
.imperr td{border-bottom:1px solid var(--rule-soft);padding:5px 9px}
.imperr td.c{font-family:var(--f-mono);color:var(--cinnabar);width:64px}
.imperr td.k{color:var(--ink-mute);width:76px}

.modal-f{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.modal-f button{min-width:76px;padding:7px 16px}

.themebtn{display:inline-flex;align-items:center;gap:5px;margin-left:10px;
    padding:5px 11px;border:1px solid var(--rule);border-radius:16px;
    background:var(--card);color:var(--ink);font-size:12.5px;line-height:1;
    cursor:pointer;user-select:none;white-space:nowrap}
  .themebtn:hover{border-color:var(--ink-faint)}
  .themebtn .ic{font-size:13px}

/* ── 意见反馈弹窗 ────────────────────
   按钮本身复用 .themebtn 的样式（在 base.js 里直接抄 className），
   两个圆角按钮并排才像一对，不然视觉上会很散。 */
.fbrow{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.fbrow label{font-size:12.5px;color:var(--ink-mute)}
.fbrow select{width:auto;min-width:110px}
.fbshot{font-size:11.5px;color:var(--ink-faint);margin-left:auto}
.fbtext{
  width:100%;min-height:150px;resize:vertical;
  font-family:var(--f-body);font-size:13.5px;line-height:1.7;
  padding:10px 12px;border:1px solid var(--rule);border-radius:4px;
  background:var(--card);color:var(--ink);
}
.fbtext:focus{outline:2px solid var(--sel);outline-offset:-1px;border-color:var(--sel)}
.fbfoot{display:flex;justify-content:flex-end;margin-top:6px;
  font-family:var(--f-mono);font-size:11px;color:var(--ink-faint)}

/* ── 品牌字块 ────────────────────
   中文「议序」是主名，英文 SEATLY 退成小字副标——用户读中文，
   英文只用于域名和技术标识，视觉上不该抢戏。 */
.bn-cn-main{font-weight:700;font-size:16.5px;letter-spacing:.06em;color:var(--ink)}
.bn-en-sub{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;
  color:var(--ink-faint);margin-left:6px;align-self:center}