/* ==========================================================================
   客户控制台样式（/control/）
   风格：白底顶栏 + 主色强调，无渐变、无投影、小圆角、大字号高留白
   不依赖主站任何 CSS；类名统一 ctl- 前缀，避免与主站冲突
   ========================================================================== */

:root {
  --ctl-primary: #006aff;         /* 统一主色（按钮 / 选中态 / 强调） */
  --ctl-primary-dark: #0057d1;
  --ctl-primary-light: #e9f1ff;
  --ctl-bg: #eef1f6;
  --ctl-card: #ffffff;
  --ctl-head-bg: #f4f7fb;
  --ctl-text: #2b3a4b;
  --ctl-text-sub: #5d6c7c;
  --ctl-text-mute: #94a1af;
  --ctl-border: #e2e7ef;
  --ctl-border-strong: #ccd4de;
  --ctl-line: #eef1f5;
  --ctl-radius: 3px;
  --ctl-ok: #2a8a4a;
  --ctl-ok-bg: #f1faf4;
  --ctl-ok-bd: #c6e6d3;
  --ctl-warn: #bd5518;
  --ctl-warn-bg: #fff7f0;
  --ctl-warn-bd: #f5d9be;
  --ctl-wait: #006aff;
  --ctl-wait-bg: #f1f7fd;
  --ctl-wait-bd: #c9dff5;
  --ctl-off: #68757f;
  --ctl-off-bg: #f5f6f8;
  --ctl-off-bd: #e0e5ec;
  --ctl-danger: #bf3a2c;
}

* { box-sizing: border-box; }

body.ctl-body {
  margin: 0;
  padding: 0;
  background: var(--ctl-bg);
  color: var(--ctl-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ctl-primary); text-decoration: none; }
a:hover { color: var(--ctl-primary-dark); }

.mono { font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace; }

.ctl-container { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 24px; }

/* ---------------- 顶部导航（主色渐变 + 白色文字） ---------------- */
.ctl-header {
  background: linear-gradient(90deg, #0058e0 0%, var(--ctl-primary) 40%, #2f90ff 100%);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
}
.ctl-header-inner { display: flex; align-items: center; height: 68px; }

/* 品牌：CSS 图形标识 + 白字，右侧竖线与导航分层 */
.ctl-brand {
  display: flex; align-items: center; gap: 11px; flex: none;
  padding-right: 24px; margin-right: 10px;
  border-right: 1px solid rgba(255, 255, 255, .26);
  white-space: nowrap;
}
.ctl-brand-mark {
  flex: none; width: 30px; height: 30px; border-radius: 4px;
  background: rgba(255, 255, 255, .95); position: relative;
}
/* 标识内两条横线：抽象的机架 / 列表意象（非字符图标） */
.ctl-brand-mark::before,
.ctl-brand-mark::after {
  content: ''; position: absolute; left: 8px; right: 8px; height: 3px;
  border-radius: 1px; background: var(--ctl-primary);
}
.ctl-brand-mark::before { top: 9px; }
.ctl-brand-mark::after { bottom: 9px; }
.ctl-brand-text { color: #fff; font-size: 19px; font-weight: 700; letter-spacing: .8px; }
.ctl-brand img { height: 28px; display: block; border-radius: 3px; }
.ctl-brand-tag {
  font-size: 12px; font-weight: 400; line-height: 20px;
  padding: 0 8px; border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, .34); color: rgba(255, 255, 255, .92);
}

/* 导航：胶囊式标签；选中为白底 + 主色字（无下划线） */
.ctl-nav { display: flex; margin-left: 10px; flex: 1; align-items: center; gap: 6px; }
.ctl-nav a {
  display: flex; align-items: center; height: 38px;
  padding: 0 20px; font-size: 15px; border-radius: 3px;
  color: rgba(255, 255, 255, .86);
  transition: background .16s, color .16s;
}
.ctl-nav a:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.ctl-nav a.active { background: #fff; color: var(--ctl-primary); font-weight: 600; }

/* 右侧：账号胶囊 + 退出按钮（白描边，hover 反白） */
.ctl-user { display: flex; align-items: center; gap: 12px; font-size: 13px; color: rgba(255, 255, 255, .9); }
.ctl-user-account {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px;
  padding: 5px 12px; border-radius: 3px;
  background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .28); color: #fff;
}
.ctl-logout {
  padding: 5px 15px; border-radius: 3px; line-height: 20px;
  border: 1px solid rgba(255, 255, 255, .42); color: #fff;
  transition: background .16s, color .16s, border-color .16s;
}
.ctl-logout:hover { background: #fff; color: var(--ctl-primary); border-color: #fff; }

/* ---------------- 主体 ---------------- */
.ctl-main { padding: 24px 0 56px; }

.ctl-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.ctl-page-title { font-size: 20px; font-weight: 600; margin: 0; color: var(--ctl-text); }
.ctl-page-desc { color: var(--ctl-text-sub); font-size: 13.5px; margin: 4px 0 0; }

.ctl-crumb { font-size: 13.5px; color: var(--ctl-text-mute); margin-bottom: 16px; }
.ctl-crumb a { color: var(--ctl-text-sub); }
.ctl-crumb a:hover { color: var(--ctl-primary); }
.ctl-crumb span { margin: 0 7px; }

/* ---------------- 卡片 ---------------- */
.ctl-card {
  background: var(--ctl-card);
  border: 1px solid var(--ctl-border);
  border-radius: var(--ctl-radius);
  overflow: hidden;
}
.ctl-card + .ctl-card { margin-top: 16px; }
.ctl-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 20px;
  background: var(--ctl-head-bg);
  border-bottom: 1px solid var(--ctl-border);
  font-weight: 600; font-size: 15px; color: var(--ctl-text);
}
.ctl-card-head .ctl-card-head-sub { font-weight: 400; font-size: 13px; color: var(--ctl-text-mute); }
.ctl-card-body { padding: 20px; }
.ctl-card-body.tight { padding: 0; }

/* 列表行 */
.ctl-host-row {
  display: flex; align-items: center; gap: 20px;
  padding: 18px 20px; border-bottom: 1px solid var(--ctl-line);
}
.ctl-host-row:last-child { border-bottom: 0; }
.ctl-host-row:hover { background: #f8fafc; }
.ctl-host-main { flex: 1; min-width: 0; }
.ctl-host-name { font-size: 15.5px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.ctl-host-meta { color: var(--ctl-text-sub); font-size: 13.5px; margin-top: 7px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.ctl-host-meta code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px;
  color: #3c4a5a; background: #f3f5f8; padding: 2px 8px; border-radius: 3px;
  border: 1px solid var(--ctl-border);
}
.ctl-host-meta .copy { font-size: 13px; color: var(--ctl-primary); cursor: pointer; margin-left: 8px; user-select: none; }
.ctl-host-meta .copy:hover { text-decoration: underline; }

/* ---------------- 状态徽章 ---------------- */
.ctl-badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 25px; padding: 0 10px; font-size: 13px; line-height: 1;
  border-radius: 3px; border: 1px solid; white-space: nowrap;
}
.ctl-badge.ok { color: var(--ctl-ok); background: var(--ctl-ok-bg); border-color: var(--ctl-ok-bd); }
.ctl-badge.warn { color: var(--ctl-warn); background: var(--ctl-warn-bg); border-color: var(--ctl-warn-bd); }
.ctl-badge.wait { color: var(--ctl-wait); background: var(--ctl-wait-bg); border-color: var(--ctl-wait-bd); }
.ctl-badge.off { color: var(--ctl-off); background: var(--ctl-off-bg); border-color: var(--ctl-off-bd); }
.ctl-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------------- 信息网格 ---------------- */
.ctl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; background: var(--ctl-border); }
.ctl-grid-item { background: #fff; padding: 16px 20px; }
.ctl-grid-item dt { font-size: 13px; color: var(--ctl-text-mute); margin: 0 0 6px; }
.ctl-grid-item dd { margin: 0; font-size: 15.5px; font-weight: 500; word-break: break-all; }
.ctl-grid-item dd.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; }
.ctl-grid-item dd .copy { margin-left: 9px; font-size: 13px; color: var(--ctl-primary); cursor: pointer; user-select: none; font-weight: 400; }
.ctl-grid-item dd .copy:hover { text-decoration: underline; }

/* ---------------- 用量条 ---------------- */
.ctl-usage { margin-top: 9px; }
.ctl-usage-head { display: flex; justify-content: space-between; font-size: 13px; color: var(--ctl-text-sub); margin-bottom: 7px; }
.ctl-usage-head b { color: var(--ctl-text); font-weight: 600; }
.ctl-bar { height: 10px; background: #edf0f4; border-radius: 2px; overflow: hidden; }
.ctl-bar > i { display: block; height: 100%; background: var(--ctl-primary); transition: width .3s ease; }
.ctl-bar > i.warn { background: #e0993a; }
.ctl-bar > i.danger { background: #d1503f; }
.ctl-bar-note { margin: 8px 0 0; text-align: right; font-size: 13px; color: var(--ctl-text-mute); }

/* ---------------- 表格 ---------------- */
.ctl-table { width: 100%; border-collapse: collapse; }
.ctl-table th, .ctl-table td { padding: 13px 20px; text-align: left; border-bottom: 1px solid var(--ctl-line); font-size: 14px; }
.ctl-table th {
  background: var(--ctl-head-bg); color: var(--ctl-text-sub);
  font-weight: 600; font-size: 13px; border-bottom: 1px solid var(--ctl-border);
}
.ctl-table tr:last-child td { border-bottom: 0; }
.ctl-table tbody tr:hover { background: #f8fafc; }
.ctl-table td.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px; }
.ctl-table .copy { margin-left: 8px; font-size: 13px; color: var(--ctl-primary); cursor: pointer; user-select: none; }
.ctl-table .copy:hover { text-decoration: underline; }

/* 卡片内按钮组 */
.ctl-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

/* 多记录切换条（详情页顶部）：标签与条目 */
.ctl-switch-label { font-size: 13.5px; color: var(--ctl-text-mute); }
.ctl-switch-item {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; font-size: 13.5px; border-radius: 3px;
  border: 1px solid var(--ctl-border-strong); color: var(--ctl-text-sub);
  background: #fff; transition: border-color .15s, color .15s, background .15s;
}
.ctl-switch-item:hover { border-color: var(--ctl-primary); color: var(--ctl-primary); }
.ctl-switch-item.on { background: var(--ctl-primary); border-color: var(--ctl-primary); color: #fff; }

/* 文件选择（继承 .ctl-input 的边框与内边距，只压掉高度） */
.ctl-file { padding: 6px 9px; line-height: 20px; height: auto; }

/* 两列栅格（弹窗内并排两个字段，如「重定向类型 / 重定向方式」） */
.ctl-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 640px) { .ctl-grid2 { grid-template-columns: 1fr; } }

/* 多选下拉（重定向域名）：给个合理高度，避免撑开弹窗 */
.ctl-multi { height: auto; min-height: 96px; padding: 6px 8px; }
.ctl-multi option { padding: 3px 4px; }

/* 开关组（开启重定向 / 保留URL参数） */
.ctl-switches { display: flex; flex-wrap: wrap; gap: 22px; padding: 2px 0; }
.ctl-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; }
.ctl-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ctl-switch i {
  position: relative; display: inline-block; width: 42px; height: 22px;
  border-radius: 11px; background: #cdd4dd; transition: background .18s; flex: none;
}
.ctl-switch i::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: transform .18s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.ctl-switch input:checked + i { background: var(--ctl-primary); }
.ctl-switch input:checked + i::after { transform: translateX(20px); }
.ctl-switch input:focus-visible + i { box-shadow: 0 0 0 3px rgba(37, 99, 235, .25); }

/* 列表行内开关（重定向状态 / 保留URI参数） */
.ctl-toggle {
  position: relative; display: inline-block; width: 40px; height: 21px; padding: 0;
  border: 0; border-radius: 11px; background: #cdd4dd; cursor: pointer;
  transition: background .18s; vertical-align: middle;
}
.ctl-toggle i {
  position: absolute; top: 2px; left: 2px; width: 17px; height: 17px;
  border-radius: 50%; background: #fff; transition: transform .18s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.ctl-toggle.on { background: var(--ctl-primary); }
.ctl-toggle.on i { transform: translateX(19px); }
.ctl-toggle:disabled { opacity: .55; cursor: not-allowed; }

/* 通用隐藏（重定向按「域名/路径」切换字段显隐时用） */
.ctl-hide { display: none !important; }

/* ---------------- 弹窗内标签页（如 SSL 证书把 状态/部署/解绑 分开显示） ---------------- */
.ctl-tabs {
  display: flex; flex-wrap: wrap; gap: 2px;
  margin: -4px 0 18px; border-bottom: 1px solid var(--ctl-border);
}
.ctl-tab {
  padding: 9px 16px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  font-size: 14px; font-family: inherit; color: var(--ctl-text-sub);
  transition: color .15s, border-color .15s;
}
.ctl-tab:hover { color: var(--ctl-primary); }
.ctl-tab.on { color: var(--ctl-primary); border-bottom-color: var(--ctl-primary); font-weight: 600; }
.ctl-tab-pane { display: none; }
.ctl-tab-pane.on { display: block; }
/* 标签页内的说明块（比 .ctl-hint 略突出，用于"当前证书"这类信息卡） */
.ctl-pane-note {
  padding: 12px 14px; border: 1px solid var(--ctl-border); border-radius: var(--ctl-radius);
  background: #fbfcfe; font-size: 13.5px; line-height: 1.9;
}
.ctl-pane-note p { margin: 0; }

/* ---------------- 在线文件管理 ---------------- */

/* 文件管理弹窗：宽弹窗沿用 .ctl-modal-box.wide（max-width: 1180px），
   这里只把表格做成固定列宽布局，避免列被挤压后错位 */
.ctl-file-table { table-layout: fixed; }
.ctl-file-table th:nth-child(1), .ctl-file-table td:nth-child(1) { width: 34px; }
.ctl-file-table th:nth-child(2), .ctl-file-table td:nth-child(2) { width: 34px; }
.ctl-file-table th:nth-child(4), .ctl-file-table td:nth-child(4) { width: 110px; }
.ctl-file-table th:nth-child(5), .ctl-file-table td:nth-child(5) { width: 170px; }
.ctl-file-table th:nth-child(6), .ctl-file-table td:nth-child(6) { width: 96px; }

.ctl-file-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--ctl-border);
}
.ctl-file-selall {
  display: inline-flex; align-items: center; gap: 5px; margin-left: auto;
  font-size: 13.5px; color: var(--ctl-text-sub); cursor: pointer;
}
.ctl-file-selall input { margin: 0; }

/* 面包屑（上游返回 <li> 片段，直接注入） */
.ctl-file-crumbs { margin-bottom: 10px; }
.ctl-file-crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; list-style: none; padding: 0; margin: 0; }
.ctl-file-crumb li { display: inline-flex; align-items: center; font-size: 13.5px; }
.ctl-file-crumb li + li::before { content: '/'; margin: 0 6px; color: var(--ctl-text-mute); }
.ctl-file-crumb a { color: var(--ctl-primary); cursor: pointer; }
.ctl-file-crumb a:hover { text-decoration: underline; }
.ctl-file-crumb li.active a { color: var(--ctl-text); font-weight: 600; }

/* 列表容器（固定高度滚动，表头吸顶） */
.ctl-file-scroll {
  max-height: 48vh; overflow: auto;
  border: 1px solid var(--ctl-border); border-radius: var(--ctl-radius);
}
.ctl-file-table { width: 100%; margin: 0; }
.ctl-file-table thead th { position: sticky; top: 0; z-index: 1; background: var(--ctl-head-bg); white-space: nowrap; }
.ctl-file-table td { vertical-align: middle; white-space: nowrap; }
/* 只有名称列允许折行（长文件名） */
.ctl-file-table .filename { white-space: normal; word-break: break-all; }
.ctl-file-table .filename a { color: var(--ctl-text); cursor: pointer; }
.ctl-file-table .filename a:hover { color: var(--ctl-primary); text-decoration: underline; }
.ctl-file-empty { padding: 34px 0; text-align: center; color: var(--ctl-text-mute); }
.ctl-file-empty.ctl-file-err { color: var(--ctl-danger); }
.ctl-file-rename { height: 30px; padding: 0 8px; font-size: 13.5px; }

/* 上游 HTML 里用的会员中心类名（原样注入，所以要在这儿补样式） */
.ctl-file-table .text-center { text-align: center; }
.ctl-file-table .text-muted { color: var(--ctl-text-mute); }
.ctl-file-table .text-success { color: var(--ctl-primary); cursor: pointer; }
.ctl-file-table .pull-right { display: flex; justify-content: flex-end; }
.ctl-file-table .dir_css:hover { text-decoration: underline; }

/* 图标：上游给的是 <a class="ico ico-xxx"></a> 空标签。
   目录 = 黄色文件夹；文件由 JS 换成「类型徽标」（白字缩写 JPG/PDF/ZIP…，网盘通用做法） */
.ctl-file-table .ico {
  display: inline-block; width: 16px; height: 16px; border-radius: 2px;
  background: var(--ctl-border-strong); vertical-align: middle;
}
.ctl-file-table .ico-folder, .ctl-file-table .ico-bookfolder {
  width: 16px; height: 12px; background: #ffd987; border-radius: 2px; position: relative;
}
.ctl-file-table .ico-folder::before, .ctl-file-table .ico-bookfolder::before {
  content: ''; position: absolute; left: 0; top: -3px;
  width: 7px; height: 4px; background: #ffd987; border-radius: 2px 2px 0 0;
}

/* 内联 SVG 图标容器：去掉背景块与折角伪元素。
   容器尺寸必须与 SVG 渲染尺寸一致，否则 SVG 溢出会让图标视觉下沉、与文字错位。
   图标 20px + 名称行高 20px + 双方 vertical-align:middle ⇒ 处于同一行盒中线。 */
.ctl-file-table .ico.ico-svg {
  width: 20px; height: 20px; min-width: 0; line-height: 0;
  background: transparent; border: 0; padding: 0;
  vertical-align: middle;
}
.ctl-file-table .ico.ico-svg::before { display: none; }
.ctl-file-table .ico.ico-svg svg {
  display: block; width: 20px; height: 20px; vertical-align: middle;
}
.ctl-file-table .filename { line-height: 20px; vertical-align: middle; }

/* 行内操作下拉（上游用 btn-group + dropdown-menu，这里纯 CSS hover 展开，不依赖 Bootstrap） */
.ctl-file-table .btn-group { position: relative; display: inline-block; }
.ctl-file-table .dropdown-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; font-size: 13px; border-radius: 3px;
  border: 1px solid var(--ctl-border-strong); color: var(--ctl-text-sub);
  cursor: pointer; user-select: none; white-space: nowrap;
}
.ctl-file-table .btn-group:hover .dropdown-toggle { border-color: var(--ctl-primary); color: var(--ctl-primary); }
.ctl-file-table .dropdown-menu {
  display: none; position: absolute; right: 0; top: 100%; z-index: 20;
  min-width: 96px; padding: 4px 0; margin: 2px 0 0;
  background: #fff; border: 1px solid var(--ctl-border-strong); border-radius: 3px;
  list-style: none; text-align: left;
}
.ctl-file-table .btn-group:hover .dropdown-menu { display: block; }
.ctl-file-table .dropdown-menu li { display: block; }
.ctl-file-table .dropdown-menu a {
  display: block; padding: 5px 12px; font-size: 13px;
  color: var(--ctl-text-sub); cursor: pointer; white-space: nowrap;
}
.ctl-file-table .dropdown-menu a:hover { background: var(--ctl-primary-light); color: var(--ctl-primary); }
.ctl-file-table .caret {
  display: inline-block; width: 0; height: 0;
  border-left: 3px solid transparent; border-right: 3px solid transparent;
  border-top: 4px solid currentColor;
}

/* 分页（上游可能返回 Bootstrap 风格分页 HTML，做兜底样式） */
#ctlFilePage { padding-top: 10px; font-size: 13.5px; color: var(--ctl-text-sub); }
#ctlFilePage ul { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; margin: 0; }
#ctlFilePage li > a, #ctlFilePage li > span {
  display: inline-block; padding: 4px 9px;
  border: 1px solid var(--ctl-border); border-radius: 3px; color: var(--ctl-text-sub);
}
#ctlFilePage .active > a, #ctlFilePage .active > span { border-color: var(--ctl-primary); color: var(--ctl-primary); }

/* ---------------- 上传弹窗（拖拽 / 上传文件 / 上传文件夹） ---------------- */

.ctl-upload-drop {
  padding: 28px 20px; text-align: center; cursor: pointer;
  border: 2px dashed var(--ctl-border-strong);
  border-radius: var(--ctl-radius);
  background: #fafbfd;
  transition: border-color .15s, background .15s;
}
.ctl-upload-drop:hover,
.ctl-upload-drop.on { border-color: var(--ctl-primary); background: var(--ctl-primary-light); }

/* 上传图标：纯 CSS（向上的箭头 + 托盘），不用字符图标 */
.ctl-upload-icon {
  width: 44px; height: 34px; margin: 0 auto 12px; position: relative;
  border: 2px solid var(--ctl-border-strong); border-top: 0;
  border-radius: 0 0 4px 4px;
}
.ctl-upload-icon::before {
  content: ''; position: absolute; left: 50%; top: -18px;
  width: 2px; height: 22px; margin-left: -1px;
  background: var(--ctl-border-strong);
}
.ctl-upload-icon::after {
  content: ''; position: absolute; left: 50%; top: -18px;
  width: 11px; height: 11px; margin-left: -5.5px;
  border-left: 2px solid var(--ctl-border-strong);
  border-top: 2px solid var(--ctl-border-strong);
  transform: rotate(45deg);
}
.ctl-upload-drop:hover .ctl-upload-icon,
.ctl-upload-drop.on .ctl-upload-icon { border-color: var(--ctl-primary); }

.ctl-upload-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--ctl-text); }
.ctl-upload-hint { margin: 6px 0 0; font-size: 13px; color: var(--ctl-text-mute); }
.ctl-upload-actions { display: flex; gap: 9px; margin-top: 14px; }

.ctl-upload-list {
  margin-top: 14px; padding: 10px 12px;
  max-height: 300px; overflow: auto;
  border: 1px solid var(--ctl-border); border-radius: var(--ctl-radius);
}
.ctl-upload-item {
  display: grid; grid-template-columns: 1fr 90px 150px 80px;
  align-items: center; gap: 4px 10px; padding: 7px 0; font-size: 13px;
  border-bottom: 1px solid var(--ctl-border);
}
.ctl-upload-item:last-child { border-bottom: 0; }
.ctl-upload-item-name {
  grid-column: 1; grid-row: 1;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ctl-upload-item-size { grid-column: 2; grid-row: 1; color: var(--ctl-text-mute); }
.ctl-upload-item-bar  { grid-column: 3; grid-row: 1; }
.ctl-upload-item-state { grid-column: 4; grid-row: 1; text-align: right; color: var(--ctl-text-mute); }
/* 进度详情（百分比 / 速度 / 剩余时间 / 失败原因）：单独一行，内容可为空 */
.ctl-upload-item-meta {
  grid-column: 1 / -1; grid-row: 2;
  font-size: 12px; color: var(--ctl-text-mute); word-break: break-all;
}
.ctl-upload-item-meta:empty { display: none; }
.ctl-upload-item.err .ctl-upload-item-meta { color: var(--ctl-danger); }
.ctl-upload-item.ok .ctl-upload-item-state { color: #16a34a; }
.ctl-upload-item.err .ctl-upload-item-state { color: var(--ctl-danger); }
.ctl-upload-item-bar { height: 4px; border-radius: 2px; background: #eef1f5; overflow: hidden; }
.ctl-upload-item-bar i { display: block; height: 100%; width: 0; background: var(--ctl-primary); transition: width .2s; }
.ctl-upload-item.err .ctl-upload-item-bar i { background: var(--ctl-danger); }

/* 在线编辑器 */
.ctl-code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.6; resize: vertical;
}

/* 云盾防火墙：名单分页 */
.ctl-fw-pager {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  padding: 14px 0 0; font-size: 13.5px; color: var(--ctl-text-sub);
}

/* 虚拟主机：域名绑定弹窗里的域名表格（列：域名 / 端口 / 操作） */
.ctl-domain-table { border: 1px solid var(--ctl-border); border-radius: 3px; overflow: hidden; }
.ctl-domain-table th, .ctl-domain-table td { padding: 10px 14px; font-size: 13.5px; }
.ctl-domain-table th { font-size: 12.5px; }
.ctl-domain-main {
  font-style: normal; margin-left: 8px; font-size: 12px; line-height: 17px; padding: 0 5px;
  color: #fff; background: var(--ctl-primary); border-radius: 2px; vertical-align: 1px;
}
.ctl-link-danger {
  padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 13.5px; font-family: inherit; color: var(--ctl-danger);
}
.ctl-link-danger:hover { text-decoration: underline; }
.ctl-link {
  padding: 0; margin-right: 14px; border: 0; background: none; cursor: pointer;
  font-size: 13.5px; font-family: inherit; color: var(--ctl-primary);
}
.ctl-link:hover { text-decoration: underline; }
.ctl-link-danger + .ctl-link-danger { margin-left: 14px; }
.ctl-tpl textarea.ctl-input { height: auto; padding: 9px 12px; line-height: 1.6; resize: vertical; }

/* 云盾防火墙：牵引 / 攻击状态色 */
.ctl-fw-tow-on { color: #bf3a2c; font-weight: 600; }
.ctl-fw-tow-ok { color: #2a8a4a; font-weight: 600; }
.ctl-fw-attacking { color: #bf3a2c; }
.ctl-fw-attacked { color: #2a8a4a; }

/* ---------------- 按钮 ---------------- */
.ctl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 18px; border-radius: var(--ctl-radius);
  background: #fff; color: var(--ctl-text);
  border: 1px solid var(--ctl-border-strong);
  font-size: 14px; font-weight: 400; font-family: inherit;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.ctl-btn:hover { border-color: var(--ctl-primary); color: var(--ctl-primary); background: #f6faff; }
.ctl-btn-main { background: var(--ctl-primary); border-color: var(--ctl-primary); color: #fff; }
.ctl-btn-main:hover { background: var(--ctl-primary-dark); border-color: var(--ctl-primary-dark); color: #fff; }
.ctl-btn-danger { background: #fff; border-color: #e3aca5; color: var(--ctl-danger); }
.ctl-btn-danger:hover { background: #fdf4f3; border-color: #d1503f; color: var(--ctl-danger); }
.ctl-btn-block { width: 100%; height: 46px; font-size: 16px; }
.ctl-btn-sm { height: 30px; padding: 0 13px; font-size: 13px; }

/* ---------------- 输入框 ---------------- */
.ctl-input {
  height: 36px; padding: 0 12px; width: 100%; max-width: 300px;
  border: 1px solid var(--ctl-border-strong); border-radius: var(--ctl-radius);
  font-size: 14px; font-family: inherit; color: var(--ctl-text); background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.ctl-input:focus { outline: none; border-color: var(--ctl-primary); box-shadow: 0 0 0 3px rgba(0, 106, 255, .13); }
.ctl-input::placeholder { color: #a8b3bf; }

/* 多行文本域：不能沿用 .ctl-input 的固定 36px 高度，
   否则 textarea 的 rows 会被压扁成两行（在线编辑器、伪静态、添加域名等都受影响） */
textarea.ctl-input {
  height: auto;
  min-height: 110px;
  padding: 9px 12px;
  line-height: 1.6;
  resize: vertical;
}

/* 代码 / 内容编辑器：等宽字体 + 更高 */
.ctl-code {
  min-height: 340px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre;
  overflow: auto;
}

.ctl-hint { font-size: 13.5px; color: var(--ctl-text-mute); margin-top: 8px; line-height: 1.7; }
.ctl-hint code { background: #f3f5f8; border: 1px solid var(--ctl-border); border-radius: 3px; padding: 1px 6px; font-size: 13px; }

/* ==========================================================================
   管理页：顶部功能标签栏 + 下方内容区
   ========================================================================== */
.ctl-console { display: block; }

/* 标签栏：白底卡片容器 + 选中项主色实底胶囊（有容器感、焦点明确） */
.ctl-side {
  display: flex; align-items: center; overflow-x: auto;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--ctl-border); border-radius: var(--ctl-radius);
  padding: 9px 14px; margin-bottom: 14px;
}
.ctl-side::-webkit-scrollbar { height: 0; }

.ctl-side-title {
  display: flex; align-items: center; flex: none;
  height: 42px; padding: 0 20px 0 4px; margin-right: 4px;
  border-right: 1px solid var(--ctl-border);
  font-size: 16px; font-weight: 600; color: var(--ctl-text);
  letter-spacing: .2px; white-space: nowrap;
}
.ctl-side a {
  display: flex; align-items: center; gap: 8px; flex: none;
  height: 42px; padding: 0 20px; font-size: 15px; color: var(--ctl-text-sub);
  border-radius: var(--ctl-radius);
  cursor: pointer; white-space: nowrap;
  transition: background .16s, color .16s;
}
/* 隐藏菜单里的字符图标，保持朴素 */
.ctl-side a i { display: none; }
.ctl-side a:hover { background: #f2f7ff; color: var(--ctl-primary); }
.ctl-side a.on { background: var(--ctl-primary); color: #fff; font-weight: 600; }
.ctl-side-count {
  margin-left: 2px; font-size: 12px; line-height: 18px; padding: 0 7px;
  color: #71808f; background: #eef1f5; border-radius: 3px;
}
.ctl-side a.on .ctl-side-count { background: rgba(255, 255, 255, .26); color: #fff; }

.ctl-content { flex: 1 1 auto; min-width: 0; }
.ctl-pane { display: none; }
.ctl-pane.on { display: block; }

/* 概要条：详情页顶部标题区（白底卡片，无装饰线） */
.ctl-summary {
  display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap;
  padding: 18px 22px; margin-bottom: 16px;
  background: #fff;
  border: 1px solid var(--ctl-border);
  border-radius: var(--ctl-radius);
}
.ctl-summary h2 { margin: 0 10px 0 0; font-size: 24px; font-weight: 600; color: var(--ctl-text); letter-spacing: .3px; }
.ctl-summary .ctl-sum-item { font-size: 13.5px; color: var(--ctl-text-sub); }
.ctl-summary .ctl-sum-item b { color: var(--ctl-text); font-weight: 600; }
.ctl-summary .ctl-sum-right { margin-left: auto; display: flex; align-items: center; gap: 0; }
.ctl-summary .ctl-sum-right .ctl-sum-item { padding: 0 18px; border-left: 1px solid var(--ctl-border); }
.ctl-summary .ctl-sum-right .ctl-sum-item:first-child { padding-left: 0; border-left: 0; }
.ctl-summary .ctl-sum-right .ctl-sum-item:last-child { padding-right: 0; }

/* 描述列表 */
.ctl-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.ctl-dl-item {
  display: flex; align-items: baseline; gap: 12px;
  padding: 13px 20px; border-bottom: 1px solid var(--ctl-line);
  font-size: 14px;
}
.ctl-dl-item dt { flex: 0 0 104px; color: var(--ctl-text-mute); font-size: 13.5px; }
.ctl-dl-item dd { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--ctl-text); word-break: break-all; }
.ctl-dl-item dd.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px; }
.ctl-dl-item dd .copy { margin-left: 9px; font-size: 13px; color: var(--ctl-primary); cursor: pointer; user-select: none; }
.ctl-dl-item dd .copy:hover { text-decoration: underline; }

/* ==========================================================================
   操作区：卡片式（每个操作一张卡，自适应列数）
   ========================================================================== */
.ctl-ops {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.ctl-op {
  display: flex; flex-direction: column;
  padding: 16px 18px 18px;
  background: #fff;
  border: 1px solid var(--ctl-border);
  border-radius: var(--ctl-radius);
  min-height: 128px;
}
.ctl-op-info { margin-bottom: 14px; }
.ctl-op-title { font-size: 14.5px; font-weight: 600; color: var(--ctl-text); line-height: 1.5; }
.ctl-op-desc { font-size: 13px; color: var(--ctl-text-mute); margin: 5px 0 0; line-height: 1.6; }
.ctl-op-act { margin-top: auto; display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.ctl-op-act > form { min-width: 0; display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.ctl-op-act form .ctl-btn { vertical-align: middle; }
.ctl-op-row { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; width: 100%; }
.ctl-op-row .ctl-input { flex: 1 1 170px; width: auto; min-width: 0; max-width: 100%; }
.ctl-op-danger { border-color: #f0d5d1; background: #fffbfa; }
.ctl-op-danger .ctl-op-title { color: var(--ctl-danger); }
.ctl-op-act .ctl-btn { white-space: nowrap; }

/* 操作分组标题：按需求隐藏（模板里仍保留分组标记，便于以后需要时恢复） */
.ctl-op-group { display: none; }
/* 相邻的卡片网格之间保持与网格内部一致的间距，视觉上连成一整片 */
.ctl-ops + .ctl-ops { margin-top: 14px; }

/* 上游返回数据（只读操作带回） */
.ctl-pre {
  margin: 0; padding: 14px 20px; max-height: 340px; overflow: auto;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.75; color: var(--ctl-text);
  background: #fafbfc; white-space: pre-wrap; word-break: break-all;
}

/* ==========================================================================
   弹窗 / 提示 / 遮罩 / 图表（配合 static/control/js/control.js）
   ========================================================================== */
body.ctl-lock { overflow: hidden; }

/* [hidden] 必须真正隐藏：.ctl-btn 等类设了 display，会盖掉 hidden 属性的默认效果
   （「粘贴」按钮就靠这个属性控制显隐，不补这条会一直显示出来） */
[hidden] { display: none !important; }

/* 弹窗模板（默认不显示） */
.ctl-tpl { display: none; }

.ctl-modal {
  position: fixed; left: 0; right: 0; top: 0; bottom: 0;
  background: rgba(28, 39, 51, .52); z-index: 900;
  display: none; align-items: center; justify-content: center; padding: 28px 20px;
}
.ctl-modal.on { display: flex; }
/* 叠加弹窗（在线编辑等）：独立层，z-index 高于单例文件管理弹窗 */
.ctl-modal.stack { z-index: 1000; }
.ctl-modal-box {
  background: #fff; border-radius: 3px; width: 100%; max-width: 640px;
  max-height: 90vh; display: flex; flex-direction: column;
  box-shadow: 0 14px 40px -10px rgba(18, 40, 70, .45);
}
.ctl-modal-box.wide { max-width: 1180px; }
.ctl-modal-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 18px; background: var(--ctl-head-bg); color: var(--ctl-text);
  border-bottom: 1px solid var(--ctl-border);
  border-radius: 3px 3px 0 0;
}
.ctl-modal-bar-title { font-size: 14.5px; font-weight: 600; }
.ctl-modal-x {
  background: none; border: 0; color: var(--ctl-text-mute);
  font-size: 21px; line-height: 1; cursor: pointer; padding: 0 3px; font-family: inherit;
}
.ctl-modal-x:hover { color: var(--ctl-text); }
.ctl-modal-body { padding: 20px; overflow: auto; }
.ctl-modal-box.wide .ctl-modal-body { padding: 14px; }

/* 弹窗内表单 */
.ctl-field { margin-bottom: 15px; }
.ctl-field > label { display: block; font-size: 13px; color: var(--ctl-text-sub); margin-bottom: 6px; }
.ctl-field .ctl-input { width: 100%; max-width: 100%; }
select.ctl-input { padding: 0 8px; cursor: pointer; }
.ctl-modal-foot {
  display: flex; justify-content: flex-end; gap: 9px;
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--ctl-border);
}
.ctl-modal-tip {
  font-size: 13px; line-height: 1.7; color: var(--ctl-warn);
  background: var(--ctl-warn-bg); border: 1px solid var(--ctl-warn-bd);
  border-radius: 3px; padding: 9px 12px; margin-bottom: 16px;
}

/* VNC 画面 */
.ctl-vnc { width: 100%; height: 640px; background: #1b2530; border-radius: 2px; overflow: hidden; }
.ctl-vnc iframe { width: 100%; height: 100%; border: 0; display: block; background: #1b2530; }

/* 图表 */
.ctl-chart-item { margin-bottom: 20px; }
.ctl-chart-item:last-child { margin-bottom: 0; }
.ctl-chart-title { font-size: 13px; font-weight: 600; color: var(--ctl-text); margin-bottom: 8px; }
.ctl-chart-canvas { width: 100%; height: 380px; }
.ctl-chart-loading { padding: 46px 0; text-align: center; color: var(--ctl-text-mute); font-size: 13.5px; }

/* 轻提示 */
.ctl-toasts {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 1000; display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
.ctl-toast {
  padding: 10px 20px; border-radius: 3px; font-size: 13.5px;
  background: #2f8f5b; color: #fff; max-width: 82vw;
  opacity: 0; transform: translateY(-10px); transition: opacity .25s, transform .25s;
  box-shadow: 0 6px 18px -6px rgba(18, 40, 70, .4);
}
.ctl-toast.show { opacity: 1; transform: none; }
.ctl-toast.err { background: #c0392b; }

/* 加载遮罩 */
.ctl-mask {
  position: fixed; left: 0; right: 0; top: 0; bottom: 0;
  background: rgba(255, 255, 255, .55); z-index: 950;
  display: none; align-items: center; justify-content: center;
}
.ctl-spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid #cfe0f0; border-top-color: var(--ctl-primary);
  animation: ctlSpin .8s linear infinite;
}
@keyframes ctlSpin { to { transform: rotate(360deg); } }

/* ---------------- 多记录切换 ---------------- */
.ctl-switch {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 11px 16px; margin-bottom: 16px;
  background: #fff; border: 1px solid var(--ctl-border); border-radius: var(--ctl-radius);
}
.ctl-switch-label { font-size: 13.5px; color: var(--ctl-text-sub); }
.ctl-switch-item {
  padding: 5px 14px; font-size: 13.5px; color: var(--ctl-text-sub);
  background: #fff; border: 1px solid var(--ctl-border-strong); border-radius: var(--ctl-radius);
  transition: border-color .15s, color .15s;
}
.ctl-switch-item:hover { border-color: var(--ctl-primary); color: var(--ctl-primary); }
.ctl-switch-item.on { background: var(--ctl-primary); border-color: var(--ctl-primary); color: #fff; font-weight: 600; }

/* ---------------- 操作结果提示 ---------------- */
.ctl-flash {
  padding: 12px 18px; border-radius: var(--ctl-radius); font-size: 14px;
  border: 1px solid; margin-bottom: 16px;
}
.ctl-flash.ok { background: var(--ctl-ok-bg); color: var(--ctl-ok); border-color: var(--ctl-ok-bd); }
.ctl-flash.err { background: var(--ctl-warn-bg); color: var(--ctl-warn); border-color: var(--ctl-warn-bd); }

/* ---------------- 空状态 ---------------- */
.ctl-empty { text-align: center; padding: 64px 20px; }
.ctl-empty-ico {
  width: 58px; height: 58px; margin: 0 auto 16px; border-radius: var(--ctl-radius);
  background: #f3f5f8; color: var(--ctl-text-mute);
  border: 1px solid var(--ctl-border);
  display: flex; align-items: center; justify-content: center; font-size: 25px;
}
.ctl-empty-title { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
.ctl-empty-desc { color: var(--ctl-text-sub); font-size: 13.5px; margin: 0; }

/* ---------------- 页脚 ---------------- */
.ctl-footer {
  padding: 26px 0 34px; text-align: center;
  color: var(--ctl-text-mute); font-size: 13px; line-height: 2;
  border-top: 1px solid var(--ctl-border); background: #fff;
}
.ctl-footer a { color: var(--ctl-text-sub); }
.ctl-footer a:hover { color: var(--ctl-primary); }

/* ==========================================================================
   登录页 · 独立控制面板风格（居中卡片 + 顶部蓝条 + 图标 Tab + 下划线选中）
   —— 保持原样，不参与内页的「去装饰」调整
   ========================================================================== */
.ctl-panel-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 48px 20px; position: relative; overflow: hidden;
  background: linear-gradient(180deg, #b9d8f2 0%, #d3e8f9 18%, #e7f3fc 44%, #f4fafe 72%, #ffffff 100%);
}
/* 柔和光斑，制造天光/云层感 */
.ctl-panel-page::before,
.ctl-panel-page::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
}
.ctl-panel-page::before {
  width: 80vw; height: 80vw; max-width: 1040px; max-height: 1040px;
  top: -34%; left: -14%;
  background: radial-gradient(circle, rgba(255,255,255,.96), rgba(255,255,255,0) 60%);
}
.ctl-panel-page::after {
  width: 64vw; height: 64vw; max-width: 840px; max-height: 840px;
  bottom: -30%; right: -12%;
  background: radial-gradient(circle, rgba(255,255,255,.86), rgba(255,255,255,0) 62%);
}

.ctl-panel {
  position: relative; z-index: 2; width: 100%; max-width: 840px;
  background: #fff; border-radius: 5px;
  border: 1px solid rgba(174,203,232,.72);
  box-shadow:
    0 1px 2px rgba(23,71,124,.06),
    0 10px 22px -8px rgba(23,71,124,.15),
    0 34px 68px -24px rgba(23,71,124,.28);
}

/* 顶部标题条 */
.ctl-panel-bar {
  position: relative; height: 80px; overflow: hidden; border-radius: 5px 5px 0 0;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: linear-gradient(96deg, #1157b8 0%, #1f7fd6 44%, #29a6c2 100%);
  color: #fff; font-size: 28px; font-weight: 600; letter-spacing: 3px;
  text-shadow: 0 1px 2px rgba(8,48,98,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
/* 光泽 + 细斜纹 */
.ctl-panel-bar::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none;
  background:
    repeating-linear-gradient(104deg, rgba(255,255,255,.085) 0 1px, rgba(255,255,255,0) 1px 7px),
    linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 54%);
}
/* 底部分割，增强立体 */
.ctl-panel-bar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: rgba(8,48,98,.3); pointer-events: none;
}
/* 仅让文字与图标浮在光泽之上（装饰线保持绝对定位） */
.ctl-panel-bar > span,
.ctl-panel-bar > svg { position: relative; z-index: 3; }
.ctl-panel-bar-icon { width: 23px; height: 23px; stroke: #fff; stroke-width: 1.7; fill: none; opacity: .94; }
.ctl-panel-bar-line {
  position: absolute; top: 50%; margin-top: -.5px; width: 104px; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.72));
  pointer-events: none;
}
.ctl-panel-bar-line.left { left: 34px; }
.ctl-panel-bar-line.right { right: 34px; transform: scaleX(-1); }

/* 业务类型 Tab（图标 + 文字，选中态为蓝色下划线） */
.ctl-panel-tabs {
  display: flex; justify-content: center; align-items: flex-end;
  padding: 24px 16px 0; border-bottom: 1px solid #e6edf6;
  overflow-x: auto;
  background: linear-gradient(180deg, #fafdff 0%, #ffffff 100%);
}
.ctl-panel-tabs::-webkit-scrollbar { height: 0; }
.ctl-panel-tab {
  position: relative; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 0 22px 15px; margin-bottom: -1px;
  color: #5b6a80; font-size: 14px; line-height: 1; white-space: nowrap;
  cursor: pointer; transition: color .16s;
}
.ctl-panel-tab svg {
  width: 31px; height: 31px; display: block;
  opacity: .88; transition: opacity .16s, transform .16s;
}
.ctl-panel-tab::after {
  content: ''; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px;
  border-radius: 2px 2px 0 0; background: transparent; transition: background .16s, height .16s;
}
.ctl-panel-tab:hover { color: #1565cc; }
.ctl-panel-tab:hover svg { opacity: 1; transform: translateY(-1px); }
.ctl-panel-tab.on { color: #1157b8; font-weight: 600; }
.ctl-panel-tab.on svg { opacity: 1; }
.ctl-panel-tab.on::after {
  height: 3px;
  background: linear-gradient(90deg, rgba(17,87,184,0) 0%, #1f7fd6 24%, #29a6c2 76%, rgba(41,166,194,0) 100%);
}

/* 表单：标签右对齐 + 带图标的输入框，整体居中 */
.ctl-panel-form {
  padding: 44px 34px 38px;
  background: linear-gradient(180deg, #fbfdff 0%, #f7fafd 100%);
}
.ctl-panel-row {
  display: flex; align-items: center; gap: 12px;
  width: 500px; max-width: 100%; margin: 0 auto 22px;
}
.ctl-panel-row:last-child { margin-bottom: 0; }
.ctl-panel-label {
  flex: 0 0 116px; text-align: right; font-size: 15px; color: #41516a;
}

.ctl-panel-input-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
.ctl-panel-input-wrap > svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; stroke: #9fb0c6; fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; pointer-events: none; z-index: 2;
}
/* 图标与输入区之间的细分隔线 */
.ctl-panel-input-wrap::before {
  content: ''; position: absolute; left: 42px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 18px; background: #e5ebf3; pointer-events: none; z-index: 2;
}
.ctl-panel-input {
  width: 100%; height: 48px; padding: 0 16px 0 56px;
  border: 1px solid #cfd9e6; border-radius: 3px;
  font-size: 15px; font-family: inherit; color: #2b3a4d; background: #fff;
  box-shadow: inset 0 1px 2px rgba(23,71,124,.045);
  transition: border-color .16s, box-shadow .16s;
}
.ctl-panel-input:focus {
  outline: none; border-color: #2b90e0;
  box-shadow: inset 0 1px 2px rgba(23,71,124,.03), 0 0 0 3px rgba(43,144,224,.14);
}
.ctl-panel-input::placeholder { color: #a9b6c7; }
.ctl-panel-row.has-eye .ctl-panel-input { padding-right: 48px; }

/* 密码显隐 */
.ctl-panel-eye {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 4px;
  background: transparent; cursor: pointer; z-index: 3;
  display: flex; align-items: center; justify-content: center;
}
.ctl-panel-eye svg { width: 19px; height: 19px; stroke: #9fb0c6; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ctl-panel-eye:hover { background: #f1f6fb; }
.ctl-panel-eye:hover svg, .ctl-panel-eye.on svg { stroke: #2b8ce0; }

.ctl-panel-btn {
  flex: 1 1 auto; height: 50px; border: 0; border-radius: 3px; cursor: pointer;
  background: linear-gradient(180deg, #3096e6 0%, #2277c9 100%);
  color: #fff; font-size: 17px; font-weight: 500; letter-spacing: 6px;
  font-family: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 3px 8px -2px rgba(34,119,201,.5);
  transition: filter .16s, box-shadow .16s, transform .1s;
}
.ctl-panel-btn:hover {
  filter: brightness(1.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 5px 14px -3px rgba(34,119,201,.62);
}
.ctl-panel-btn:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(9,52,102,.3); filter: brightness(.98); }
.ctl-panel-btn[disabled] { cursor: default; filter: grayscale(.3) brightness(.95); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); transform: none; }

.ctl-panel-err {
  width: 500px; max-width: 100%; margin: 26px auto 0;
  display: flex; align-items: flex-start; gap: 9px;
  background: #fef4f4; border: 1px solid #f8d4d4; color: #bf3b2c;
  font-size: 14px; padding: 12px 14px; border-radius: 3px; line-height: 1.6;
}
.ctl-panel-err b {
  flex: none; width: 17px; height: 17px; margin-top: 1px; border-radius: 50%;
  background: #e05c4c; color: #fff; font-size: 12px; font-weight: 700;
  line-height: 17px; text-align: center;
}
.ctl-panel-hint {
  width: 500px; max-width: 100%; margin: 22px auto 0; padding-top: 18px;
  border-top: 1px dashed #e3eaf3;
  font-size: 13.5px; color: #93a2b5; line-height: 1.8;
}
.ctl-panel-hint b { color: #62748d; font-weight: 600; }
.ctl-panel-foot {
  text-align: center; font-size: 13px; color: #93a2b5;
  padding: 22px 16px 26px; line-height: 2;
  border-top: 1px solid #eef3f9; background: #fff;
  border-radius: 0 0 5px 5px;
}
.ctl-panel-foot a { color: #93a2b5; }
.ctl-panel-foot a:hover { color: #2b8ce0; }
.ctl-panel-foot .sep { margin: 0 9px; color: #ccd7e4; }

@media (max-width: 900px) {
  .ctl-panel-row,
  .ctl-panel-err,
  .ctl-panel-hint { width: 100%; max-width: 520px; }
}

@media (max-width: 620px) {
  .ctl-panel-page { padding: 20px 12px; align-items: flex-start; }
  .ctl-panel-bar { height: 56px; font-size: 17px; letter-spacing: 1.5px; gap: 9px; }
  .ctl-panel-bar-icon { width: 20px; height: 20px; }
  .ctl-panel-bar-line { width: 38px; }
  .ctl-panel-bar-line.left { left: 12px; }
  .ctl-panel-bar-line.right { right: 12px; }
  .ctl-panel-tabs { justify-content: flex-start; padding: 18px 8px 0; }
  .ctl-panel-tab { padding: 0 15px 12px; font-size: 13px; gap: 7px; }
  .ctl-panel-tab svg { width: 27px; height: 27px; }
  .ctl-panel-form { padding: 26px 18px 24px; }
  .ctl-panel-row { width: 100%; gap: 10px; margin-bottom: 18px; }
  .ctl-panel-label { flex: 0 0 88px; font-size: 13.5px; }
  .ctl-panel-input { height: 46px; padding-left: 50px; font-size: 14.5px; }
  .ctl-panel-input-wrap > svg { left: 12px; width: 17px; height: 17px; }
  .ctl-panel-input-wrap::before { left: 37px; height: 17px; }
  .ctl-panel-eye { right: 7px; width: 28px; height: 28px; }
  .ctl-panel-btn { height: 48px; font-size: 16px; letter-spacing: 3px; }
  .ctl-panel-foot { font-size: 12.5px; padding: 18px 14px 22px; }
}

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width: 1000px) {
  /* 标签栏本就是横向可滚动的，窄屏只收紧内边距、隐藏标题与计数 */
  .ctl-side { padding: 8px 10px; }
  .ctl-side-title { display: none; }
  .ctl-side a { height: 40px; padding: 0 15px; font-size: 14.5px; }
  .ctl-side-count { display: none; }
  .ctl-summary .ctl-sum-right { margin-left: 0; }
  .ctl-summary .ctl-sum-right .ctl-sum-item:first-child { padding-left: 0; }
  .ctl-dl { grid-template-columns: 1fr; }
  .ctl-op { flex-direction: column; gap: 12px; }
  .ctl-op-info { flex: none; }
  .ctl-op-act { width: 100%; }
}

@media (max-width: 820px) {
  .ctl-container { padding: 0 16px; }
  .ctl-header-inner { height: auto; padding: 12px 0 0; flex-wrap: wrap; gap: 10px; }
  .ctl-brand { padding-right: 0; margin-right: 0; border-right: 0; }
  .ctl-brand-text { font-size: 17px; letter-spacing: .3px; }
  .ctl-brand-mark { width: 26px; height: 26px; }
  .ctl-brand-mark::before { top: 8px; }
  .ctl-brand-mark::after { bottom: 8px; }
  .ctl-nav { order: 3; width: 100%; margin-left: 0; padding: 10px 0; overflow-x: auto; }
  .ctl-nav a { height: 38px; padding: 0 16px; font-size: 14.5px; }
  .ctl-user { margin-left: auto; }
  .ctl-main { padding: 18px 0 36px; }
  .ctl-summary h2 { font-size: 19px; }
  .ctl-summary .ctl-sum-right { width: 100%; flex-wrap: wrap; gap: 8px 0; }
  .ctl-host-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ctl-grid { grid-template-columns: 1fr; }
  .ctl-card-body { padding: 16px; }
}

@media (max-width: 520px) {
  .ctl-input { max-width: 100%; }
  .ctl-op-row .ctl-input { flex: 1 1 auto; width: 100%; }
}