/* 界面样式。
 * 字号：全部用 em，跟着 body 上的 --fs 变量走 → 顶栏 A-/A+ 能带动整个界面。
 * 主题：三套 CSS 变量（深色/浅色/蓝底），与终端配色一一对应，作用于整个界面。
 */

:root {
  --fs: 14px;
  --ok: #4bbf73;
  --warn: #e2b13c;
  --err: #e5544b;
  /* 兜底 = 深色主题。没加载 prefs.js 的页面（如登录页）也能正常显示 */
  --bg: #10151c;
  --bg2: #161d27;
  --bg3: #1d2632;
  --line: #2a3543;
  --fg: #d8e2ee;
  --dim: #8798ab;
  --accent: #3d9bf5;
  --shadow: rgba(0, 0, 0, .6);
}

/* ---------------- 主题 ---------------- */

body.theme-dark {
  --bg: #10151c;
  --bg2: #161d27;
  --bg3: #1d2632;
  --line: #2a3543;
  --fg: #d8e2ee;
  --dim: #8798ab;
  --accent: #3d9bf5;
  --shadow: rgba(0, 0, 0, .6);
}

body.theme-light {
  --bg: #f4f6f9;
  --bg2: #ffffff;
  --bg3: #eaeff5;
  --line: #d3dce6;
  --fg: #1b242f;
  --dim: #64748b;
  --accent: #1a73e8;
  --shadow: rgba(30, 41, 59, .35);
}

body.theme-blue {
  --bg: #04223f;
  --bg2: #06304f;
  --bg3: #0a3d63;
  --line: #17567f;
  --fg: #e6f0f8;
  --dim: #93b6cf;
  --accent: #4aa8ff;
  --shadow: rgba(0, 10, 25, .6);
}

/* ---------------- 字号档位 ----------------
 * 7 档，默认第 4 档。两头比原站更极端一点：
 * 1 档给小笔记本挤更多信息，7 档给看不清的场景。
 */
body.size-1 { --fs: 10.5px; }
body.size-2 { --fs: 12px; }
body.size-3 { --fs: 13px; }
body.size-4 { --fs: 14px; }
body.size-5 { --fs: 16px; }
body.size-6 { --fs: 18.5px; }
body.size-7 { --fs: 21px; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  font-size: var(--fs);
  line-height: 1.5;
}

button {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--bg3);
  color: var(--fg);
  border-radius: 5px;
  padding: .43em .86em;
}
button:hover { border-color: var(--accent); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.danger { border-color: var(--err); color: var(--err); }
button.small { padding: .22em .6em; font-size: .86em; }

input, select, textarea {
  font: inherit;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: .43em .64em;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
select.small { padding: .22em .5em; font-size: .86em; }

a { color: var(--accent); }

/* ---------------- 登录页 ---------------- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-box {
  width: 25em;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 2em;
}
.login-box h1 { margin: 0 0 .3em; font-size: 1.43em; }
.login-box p.sub { margin: 0 0 1.4em; color: var(--dim); font-size: .93em; }
.login-box label { display: block; margin: .86em 0 .36em; font-size: .93em; color: var(--dim); }
.login-box input { width: 100%; }
.login-box button { width: 100%; margin-top: 1.3em; }
.msg { margin-top: .86em; font-size: .93em; min-height: 1.3em; }
.msg.err { color: var(--err); }
.msg.ok { color: var(--ok); }

/* ---------------- 顶栏 ---------------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: .57em 1em;
  background: var(--bg2);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.brand { font-weight: 600; }
.topbar .spacer { flex: 1; }
.pill {
  font-size: .86em;
  padding: .21em .64em;
  border-radius: 99px;
  border: 1px solid var(--line);
  color: var(--dim);
  white-space: nowrap;
}
.pill.ok { color: var(--ok); border-color: var(--ok); }
.pill.err { color: var(--err); border-color: var(--err); }

.fontctl {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  font-size: .86em;
  color: var(--dim);
}
.fontctl #font-level { min-width: 3.2em; text-align: center; }

/* ---------------- 主界面 ---------------- */
.layout {
  display: flex;
  height: calc(100vh - 3.3em);
}
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.side {
  width: 19em;
  border-left: 1px solid var(--line);
  background: var(--bg2);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.tabs { display: flex; gap: .43em; padding: .57em .86em 0; flex-wrap: wrap; }
.tab {
  border: 1px solid var(--line);
  background: var(--bg2);
  border-radius: 6px 6px 0 0;
  padding: .43em 1em;
  font-size: .93em;
}
.tab.active { background: var(--bg3); border-color: var(--accent); color: var(--fg); font-weight: 600; }
.tab .who { display: block; font-size: .79em; color: var(--warn); }
.tab.mine .who { color: var(--ok); }
.tab.locked { opacity: .45; cursor: not-allowed; border-style: dashed; }
.tab.locked .who { color: var(--dim); }

/* 终端外框只负责留白、居中和滚动，屏幕本体不拉伸 —— 拉伸会让 64 列的字符屏
   右边多出一大片空白底色（看着像界面坏了）。
   屏幕大小由 prefs.js 按可用空间自动挑档位（和原站 main.js 一样的做法）。 */
.screen-wrap {
  flex: 1;
  padding: .57em .86em;
  min-height: 0;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: stretch;      /* 屏幕高度铺满，宽度仍然只贴 64 列内容 */
}

/* ---------------- 终端字符屏 ----------------
 * 配色与字号档位照搬原站 GalileoTerminal 的 css3/terminal.css。
 */
.terminal {
  /* 宽度贴着 64 列的字符网格，高度跟内容走（上限 21 行 = 原站一屏，下限 8 行）。
     历史行（21×5=105 行）都在 DOM 里，靠自身滚动条上翻，和原站一样。
     字号在自适应模式下由 prefs.js 直接写 inline style（见 §7.7），
     手动模式用下面的 .terminal-size-* 档位。 */
  width: max-content;
  max-width: 100%;
  flex: 0 0 auto;        /* 外框是 flex，别让它把屏幕压窄（会毁掉 64 列网格） */
  --tlh: 18px;
  line-height: var(--tlh);
  /* 高度铺满可用区域（客户要求），宽度只贴内容（64 列）。
     字号由 prefs.js 挑成"21 行正好装得下"，所以铺满之后底部最多空一行的余量。 */
  height: 100%;
  margin: 0;
  overflow: auto;
  /* 竖滚动条要常驻占位。否则内容超过 21 行时滚动条突然出现，会把 64 列的宽度
     挤掉十几像素，于是又冒出一条横滚动条（右边最后一列被切掉）。 */
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  padding: .3em .5em;
  border: 1px solid var(--line);
  border-radius: 6px;
  /* 必须等宽字体，否则 64 列对不齐。Windows 上 Consolas 最稳 */
  font-family: Consolas, "Cascadia Mono", "DejaVu Sans Mono", "Courier New", monospace;
  font-variant-ligatures: none;
  letter-spacing: 0;
  white-space: pre;
}
.terminal .row { display: block; margin: 0; padding: 0; }
.terminal i { font-style: normal; }

/* 滚动条跟着终端配色，别用系统的亮白色（深底上一条白杠特别扎眼） */
.terminal::-webkit-scrollbar { width: 10px; height: 10px; }
.terminal::-webkit-scrollbar-track { background: transparent; }
.terminal::-webkit-scrollbar-thumb { background: #6668; border-radius: 5px; }
.terminal::-webkit-scrollbar-thumb:hover { background: #888a; }
.terminal-style-1, .terminal-style-3 { scrollbar-color: #6668 transparent; }
.terminal-style-2 { scrollbar-color: #aaa8 transparent; }

.terminal-style-1 { color: #bbb; background-color: #111; }
.terminal-style-1 .color-1 { color: #FFFF70; }
.terminal-style-1 .color-2 { color: #80C0E0; }
.terminal-style-1 .color-3 { color: #f9b83e; }
.terminal-style-1 .color-4 { color: #BBBBBB; }
.terminal-style-1 .cursor { color: #000; background-color: #FFF; }

.terminal-style-2 { color: #000; background-color: #E9EEF1; }
.terminal-style-2 .color-1 { color: #006600; }
.terminal-style-2 .color-2 { color: #003399; }
.terminal-style-2 .color-3 { color: #cc0000; }
.terminal-style-2 .color-4 { color: #666666; }
.terminal-style-2 .cursor { color: #000; background-color: #CCC; }

.terminal-style-3 { color: #eee; background-color: #037; }
.terminal-style-3 .color-1 { color: #FFFF00; }
.terminal-style-3 .color-2 { color: #80C0E0; }
.terminal-style-3 .color-3 { color: #f9c304; }
.terminal-style-3 .color-4 { color: #BBBBCC; }
.terminal-style-3 .cursor { color: #00006b; background-color: #E0E0E0; }

/* 终端字号 7 档（px 固定，保证 64 列的字符网格稳定；原站只有 5 档，
   两头各加一档给"屏幕小"和"上年纪看不清"两种真实需求）。
   每档只给"行高 --tlh + 字号"，高度上下限在 .terminal 里统一按 --tlh 算。 */
.terminal-size-1 { --tlh: 13px; font-size: 11px; }
.terminal-size-2 { --tlh: 15px; font-size: 13px; }
.terminal-size-3 { --tlh: 16px; font-size: 14px; }
.terminal-size-4 { --tlh: 18px; font-size: 16px; }
.terminal-size-5 { --tlh: 21px; font-size: 19px; }
.terminal-size-6 { --tlh: 25px; font-size: 22px; }
.terminal-size-7 { --tlh: 29px; font-size: 26px; }

/* 系统提示行：排队/自动重开屏/拦截等，不属于主机屏幕内容 */
.sysline {
  min-height: 1.4em;
  padding: .14em 1em;
  font-size: .86em;
  color: var(--dim);
}
.sysline.err { color: var(--err); }

.inputbar { display: flex; gap: .57em; padding: 0 .86em .86em; }
.inputbar input {
  flex: 1;
  font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
  font-size: 1.07em;
  text-transform: uppercase;
}

.side h3 {
  margin: 0;
  padding: .71em .86em;
  font-size: .93em;
  color: var(--dim);
  border-bottom: 1px solid var(--line);
}
.side .side-actions { padding: .57em .86em 0; }
.side .side-actions button { width: 100%; }
.sc-list { flex: 1; overflow-y: auto; padding: .57em; }
.sc-group { font-size: .86em; color: var(--dim); margin: .57em .3em .3em; }
.sc-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: .43em .64em;
}
.sc-btn code { color: var(--dim); font-size: .79em; display: block; }
.sc-btn-row { display: flex; align-items: center; gap: .3em; margin-bottom: .36em; }
.sc-btn-row .sc-btn { flex: 1; }
.sc-del {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--dim);
  border-radius: 4px;
  padding: .28em .5em;
  line-height: 1;
}
.sc-del:hover { color: var(--err); border-color: var(--err); }
.side .foot {
  padding: .71em .86em;
  border-top: 1px solid var(--line);
  font-size: .86em;
  color: var(--dim);
}

/* ---------------- 管理后台 ---------------- */
/* 后台铺满屏幕宽度。原来写死 max-width:100em，宽屏上两边各空一大片，
   日志表格却挤在中间放不开（列多，尤其"1G 响应"那列）。 */
.admin-wrap { max-width: none; margin: 0; padding: 1.15em 1.5em; }
.admin-tabs { display: flex; gap: .57em; margin-bottom: 1em; flex-wrap: wrap; }
.card {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1em;
  margin-bottom: 1.15em;
}
.card h2 { margin: 0 0 .86em; font-size: 1.07em; display: flex; align-items: center; gap: .57em; flex-wrap: wrap; }
table { width: 100%; border-collapse: collapse; font-size: .93em; }
th, td { text-align: left; padding: .5em .57em; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--dim); font-weight: 500; white-space: nowrap; }
td.mono, .mono {
  font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
  white-space: pre-wrap;
  word-break: break-all;
}
.filters { display: flex; gap: .57em; flex-wrap: wrap; align-items: center; margin-bottom: .86em; }
.filters input, .filters select { min-width: 9em; }
/* 复选框别被 min-width 撑开：撑开后勾选框和它的文字会隔着一大段空白，像是排错了 */
.filters input[type=checkbox] { min-width: 0; width: auto; }
.filters label { display: inline-flex; align-items: center; gap: .3em; white-space: nowrap; }
/* 弹窗里的表单控件默认 width:100%（那是给新建/编辑表单用的），
   筛选栏要横排，必须在这里覆盖回自适应宽度，否则每个输入框各占一行。 */
.modal-body .filters input,
.modal-body .filters select { width: auto; }
.modal-body .filters input[type=checkbox] { min-width: 0; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13em, 1fr)); gap: .71em; }
.tag {
  font-size: .79em;
  padding: .14em .5em;
  border-radius: 99px;
  border: 1px solid var(--line);
  color: var(--dim);
  white-space: nowrap;
}
.tag.block { color: var(--err); border-color: var(--err); }
.tag.fail { color: var(--warn); border-color: var(--warn); }
.tag.ok { color: var(--ok); border-color: var(--ok); }
.hide { display: none !important; }
/* 1G 回文要保持原样折行（主机是 64 列定宽排版）。
   全局 .mono 上的 word-break:break-all 会把回文在任意位置截断，
   列表看起来就"变形"了——这里覆盖掉，宽度不够时让它自己横向滚动。 */
.resp-cell {
  display: block;
  max-height: 10em;
  overflow: auto;
  white-space: pre;
  word-break: normal;
  min-width: 34em;      /* 64 列的回文至少给这么宽，不然一行被折成好几行 */
}
.log-scroll { max-height: 62vh; overflow: auto; }
/* 表格列宽策略：时间/操作人/窗口等短列不换行，回文列吃掉剩下的宽度 */
.log-scroll th, .log-scroll td { white-space: nowrap; }
.log-scroll td.mono { white-space: pre-wrap; }
.log-scroll table { width: 100%; table-layout: auto; }
.subtabs { display: flex; gap: .43em; margin-bottom: .86em; flex-wrap: wrap; }

/* ---------------- 弹窗 ---------------- */
.modal-mask {
  position: fixed;
  inset: 0;
  background: var(--shadow);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2.9em 1.15em;
  overflow-y: auto;
  z-index: 100;
}
.modal-mask.hide { display: none; }
.modal-box {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 10px;
  width: 37em;
  max-width: 100%;
}
/* 宽弹窗（日志查看）跟着屏幕走：留出两侧 4% 的边距，其余全给内容。
   原来写死 77em，宽屏上日志表被压窄，1G 响应那列换行换得面目全非。 */
.modal-box.wide { width: 92vw; max-width: 92vw; }
.modal-head {
  padding: 1em 1.15em;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: .71em;
}
.modal-head h3 { margin: 0; font-size: 1.07em; flex: 1; }
.modal-body { padding: 1.15em; }
.modal-body .field { margin-bottom: .86em; }
.modal-body label.lbl {
  display: block;
  font-size: .86em;
  color: var(--dim);
  margin-bottom: .3em;
}
.modal-body input[type=text],
.modal-body input[type=password],
.modal-body input[type=number],
.modal-body select { width: 100%; }
.modal-body .hint { font-size: .86em; color: var(--dim); margin: .3em 0 0; }
.modal-foot {
  padding: .86em 1.15em;
  border-top: 1px solid var(--line);
  display: flex;
  gap: .57em;
  justify-content: flex-end;
}
.modal-err { color: var(--err); font-size: .93em; margin-right: auto; align-self: center; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: .86em; }