/* ================================================================
   os 平台控制台 — 对齐旧站 ds WebSystem/index
   基准截图：shots/old2/k01_websystem_index.png
   ================================================================ */
* { margin:0; padding:0; box-sizing:border-box; }

:root {
  /* 侧栏（旧站实测 #393A6A 紫红） */
  --side-bg:#393A6A;
  --side-sel:#7B7DE5;
  --side-text:rgba(255,255,255,.7);
  --side-group:#4A4B78;

  --primary:#009688;
  --primary-hover:#00897b;

  /* 中性 */
  --bg:#F2F2F2;
  --card:#FFF;
  --bd:#E6E6E6;
  --head-bg:#F2F2F2;
  --line-soft:#F6F6F6;
  --row-hover:#F8F8F8;
  --bd2:#D2D2D2;
  --bd3:#E2E2E2;
  --bd4:#C9C9C9;

  /* 文字（旧站正文 #666） */
  --tx:#666;
  --tx-1:#333;
  --tx-2:#999;
  --tx-input:#000;

  --blue:#1E9FFF;
  --danger:#FF5722;
  --warn:#FFB800;
  --modal-head:#20222A;

  --radius:2px;
  --shadow:0 1px 2px 0 rgba(0,0,0,.05);
}

body {
  font-family:'Helvetica Neue',Helvetica,'PingFang SC','Microsoft YaHei',Arial,sans-serif;
  background:var(--bg); color:var(--tx); font-size:14px; line-height:24px;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--blue); text-decoration:none; }

/* ============ 登录页 ============ */
.login-wrap {
  position:fixed; inset:0; z-index:999;
  display:flex; align-items:center; justify-content:center;
  background:#393A6A;
}
.login-card {
  width:360px; background:#fff; border-radius:2px;
  padding:0 0 30px; box-shadow:0 4px 16px rgba(0,0,0,.2);
}
.login-head {
  height:60px; line-height:60px; background:var(--primary); color:#fff;
  text-align:center; font-size:18px; font-weight:400; letter-spacing:1px;
  border-radius:2px 2px 0 0; margin-bottom:25px;
}
.login-form { padding:0 40px; }
.login-form .form-item { margin-bottom:20px; }
.login-form .form-item > label { display:block; font-size:14px; color:var(--tx-1); margin-bottom:6px; }
.login-form .input { width:100%; }

/* ============ 布局：侧栏 150px / 顶栏 50px ============ */
.layout { display:flex; min-height:100vh; }

.sidebar {
  width:170px; flex:0 0 170px; background:var(--side-bg);
  display:flex; flex-direction:column;
  position:fixed; top:0; bottom:0; left:0; z-index:200;
  box-shadow:1px 0 2px 0 rgba(0,0,0,.05);
}
.sidebar-brand {
  height:49px; flex:0 0 49px; background:var(--side-bg);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:16px; font-weight:300; letter-spacing:1px;
  box-shadow:0 1px 2px 0 rgba(0,0,0,.15);
}
.sidebar-nav {
  flex:1; overflow-y:auto; overflow-x:hidden;
  padding:6px 0 20px; background:var(--side-bg);
}
.sidebar-nav::-webkit-scrollbar { width:4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.2); }

/* 菜单项：图标+文字竖排（旧站侧栏就是这么排） */
.nav-item {
  padding:10px 6px; cursor:pointer; position:relative;
  height:56px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  color:var(--side-text); font-size:12px; line-height:14px;
  transition:background .15s,color .15s;
  text-align:center; white-space:nowrap; overflow:hidden;
}
.nav-item:hover { background:rgba(0,0,0,.3); color:#fff; }
.nav-item.active { background:var(--side-sel); color:#fff; }
.nav-item .icon { font-size:17px; line-height:1; opacity:.9; flex:0 0 auto; }
.nav-item.active .icon { opacity:1; }
.nav-item .nav-text { display:block; width:100%; overflow:hidden; text-overflow:ellipsis; }

.main { flex:1; margin-left:170px; min-width:0; display:flex; flex-direction:column; }

/* 顶栏：图标在左，右侧返回客户端+用户名 */
.topbar {
  height:50px; flex:0 0 50px; background:#fff;
  border-bottom:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 15px; position:fixed; top:0; left:170px; right:0; z-index:120;
  box-shadow:var(--shadow);
}
.topbar-left { display:flex; align-items:center; gap:4px; }
.topbar h2 { display:none; }
.topbar-tools { display:flex; align-items:center; gap:2px; }
.tbtn {
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--tx-1); font-size:15px; border-radius:2px;
}
.tbtn:hover { background:var(--bg); color:var(--primary); }
.topbar-right { display:flex; align-items:center; gap:14px; }
.topbar-link { font-size:13px; color:var(--tx); cursor:pointer; }
.topbar-link:hover { color:var(--primary); }
.user-chip {
  display:flex; align-items:center; gap:6px; cursor:pointer;
  padding:4px 6px; border-radius:2px; font-size:14px; color:var(--tx-1);
}
.user-chip:hover { background:var(--bg); }
.user-chip .caret { font-size:10px; color:var(--tx-2); }

.dropdown {
  position:absolute; top:50px; right:15px; background:#fff; min-width:140px;
  border:1px solid var(--line-soft); box-shadow:0 2px 8px rgba(0,0,0,.12);
  padding:4px 0; z-index:300; display:none;
}
.dropdown.show { display:block; }
.dropdown div.dd { padding:8px 16px; font-size:14px; color:var(--tx); cursor:pointer; }
.dropdown div.dd:hover { background:var(--bg); color:var(--primary); }

.content { padding:0 15px; flex:1; margin-top:50px; }

/* ============ 顶部提示条（旧站红底提示） ============ */
.notice-bar {
  background:#F2F2F2; border:1px solid var(--bd); border-left:3px solid var(--danger);
  border-radius:2px; padding:9px 12px; font-size:14px; margin:12px 0;
  display:flex; align-items:center; gap:10px; color:var(--tx);
}
.notice-bar .warn-text { color:var(--danger); }
.notice-bar button {
  height:26px; padding:0 12px; background:var(--danger); color:#fff; border:none;
  border-radius:2px; cursor:pointer; font-size:12px; font-family:inherit;
}
.notice-bar button:hover { opacity:.85; }

/* ============ 统计卡（旧站 4 列，标题在上、大数字、下方双行小字） ============ */
.stat-row {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:15px; margin:12px 0;
}
.stat {
  background:#fff; border-radius:2px; padding:18px 20px;
  box-shadow:var(--shadow);
}
.stat .lb { font-size:14px; color:var(--tx); margin-bottom:2px; }
.stat .vl { font-size:30px; font-weight:700; color:var(--tx-1); line-height:1.25; }
.stat .vl .unit { font-size:14px; font-weight:400; color:var(--tx-1); margin-left:4px; }
.stat .rows { margin-top:14px; font-size:13px; }
.stat .rows .r {
  display:flex; justify-content:space-between;
  padding:3px 0; color:var(--tx-2);
}
.stat .rows .r b { font-weight:400; color:var(--tx); }

/* ============ 卡片 ============ */
.card {
  background:#fff; border-radius:2px; box-shadow:var(--shadow);
  margin:12px 0;
}
.card-head {
  height:42px; line-height:42px; padding:0 15px;
  border-bottom:1px solid var(--line-soft);
  font-size:14px; color:var(--tx-1);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.card-body { padding:15px; }
.card-body.tight { padding:0; }

/* 工具条 + 筛选（旧站：左侧按钮组，右侧筛选项右对齐） */
.toolbar {
  display:flex; align-items:center; gap:15px; flex-wrap:wrap;
  padding:12px 15px; border-bottom:1px solid var(--bd);
  background:#fff; line-height:32px;
}
.toolbar .ops-group { display:flex; gap:10px; }
.toolbar .filter-group {
  display:flex; align-items:center; gap:10px; flex:1;
  justify-content:flex-end; flex-wrap:wrap;
}
.toolbar .filter-group label { font-size:14px; color:var(--tx); white-space:nowrap; }

/* ============ 表格：四边网格、居中 ============ */
.tbl-wrap { overflow-x:auto; padding:0; }
table.tbl { width:100%; border-collapse:collapse; border:1px solid var(--bd); background:#fff; }
.tbl th {
  padding:9px 15px; font-size:14px; font-weight:400; color:var(--tx-1);
  background:var(--head-bg); text-align:left; border:1px solid var(--bd);
  white-space:nowrap; line-height:20px;
}
.tbl th.sortable { cursor:pointer; user-select:none; }
.tbl th.sortable:hover { color:var(--primary); }
.tbl th .sort-ico { font-size:10px; color:var(--bd2); margin-left:3px; }
.tbl td {
  padding:9px 15px; border:1px solid var(--bd);
  font-size:14px; line-height:20px; color:var(--tx);
}
.tbl tbody tr:hover { background:var(--row-hover); }
.tbl .col-check { width:38px; text-align:center; }
.tbl .col-id { width:56px; text-align:center; color:var(--tx-2); }
.tbl .nowrap { white-space:nowrap; }
.tbl .num { color:var(--danger); font-weight:400; }
.tbl .empty-row td { text-align:center; color:var(--tx-2); padding:40px 12px; }
.tbl .td-center { text-align:center; }

/* 复选框：18×18 方形 */
.tbl input[type=checkbox] {
  width:16px; height:16px; vertical-align:middle; cursor:pointer; accent-color:var(--primary);
}

/* 操作列按钮：22px 高（旧站 btn-xs） */
.ops { display:flex; flex-direction:column; gap:4px; align-items:stretch; }
.ops button {
  height:22px; padding:0 8px; font-size:12px;
  border:1px solid var(--bd4); background:#fff; color:var(--tx);
  border-radius:2px; cursor:pointer; font-family:inherit;
  transition:opacity .15s; white-space:nowrap;
}
.ops button:hover { border-color:var(--primary); color:var(--primary); opacity:.8; }
.ops button.del:hover { border-color:var(--danger); color:var(--danger); }
.ops button.enter:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
.ops .ssl-btn, .ssl-btn {
  height:22px; padding:0 8px; font-size:12px; font-family:inherit;
  border:1px solid var(--bd4); background:#fff; color:var(--tx);
  border-radius:2px; cursor:pointer; white-space:nowrap;
}
.ssl-btn.cert-apply { border-color:var(--blue); color:var(--blue); }
.ssl-btn.cert-apply:hover { background:var(--blue); color:#fff; }
.ssl-btn.cert-ok { border-color:var(--primary); color:var(--primary); }
.ssl-btn.cert-ok.warn { border-color:var(--warn); color:#e6a700; }
.ssl-btn.cert-ok.warn:hover { background:var(--warn); color:#fff; }
.ssl-inline { display:inline-block; min-width:52px; }

/* 状态：旧站是绿色纯色文字 */
.tag { display:inline-block; padding:0; font-size:14px; line-height:1.6; border:0; background:none; }
.tag.ok   { color:var(--primary); }
.tag.off  { color:var(--tx-2); }
.tag.warn { color:var(--warn); }
.tag.err  { color:var(--danger); }
.tag.info { color:var(--blue); }

/* 图片缩略图（旧站 100px max） */
.thumb { max-width:60px; max-height:60px; border:1px solid var(--bd); vertical-align:middle; }
.mini-badge {
  display:inline-block; padding:1px 6px; font-size:12px;
  border:1px solid var(--bd); border-radius:2px; color:var(--tx-2); margin:1px;
}

/* ============ 分页器 ============ */
.pager {
  display:flex; align-items:center; gap:0; padding:10px 15px; font-size:12px;
  color:var(--tx); border-top:1px solid var(--bd); flex-wrap:wrap;
}
.pager .pbtn {
  height:28px; line-height:28px; padding:0 15px; font-size:12px;
  border:1px solid var(--bd3); background:#fff; color:var(--tx-1);
  margin:0 -1px 5px 0; cursor:pointer; font-family:inherit;
}
.pager .pbtn:first-child { margin-left:0; }
.pager .pbtn:hover { color:var(--primary); }
.pager .pbtn.on { background:var(--primary); color:#fff; border-color:var(--primary); }
.pager .pbtn:disabled { opacity:.45; cursor:not-allowed; }
.pager .pdot { color:var(--tx-2); font-weight:700; padding:0 8px; }
.pager .pinfo { margin-left:12px; color:var(--tx-2); }

/* ============ 按钮 38px ============ */
.btn {
  height:38px; padding:0 18px; border-radius:2px; border:none;
  background:var(--primary); color:#fff; cursor:pointer; font-size:14px;
  display:inline-flex; align-items:center; gap:5px;
  transition:opacity .15s; font-family:inherit; white-space:nowrap;
}
.btn:hover { opacity:.8; }
.btn-plain { background:#fff; color:#555; border:1px solid var(--bd4); }
.btn-plain:hover { border-color:var(--primary); color:#333; opacity:1; }
.btn-danger { background:var(--danger); }
.btn-sm { height:30px; padding:0 12px; font-size:12px; }
.btn-search {
  width:38px; padding:0; justify-content:center;
  background:var(--primary); border-color:var(--primary); color:#fff;
}
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn + .btn { margin-left:10px; }
.ops-group .btn + .btn { margin-left:0; }

/* ============ 表单控件 38px ============ */
.input,.select,textarea.input {
  height:38px; padding:0 10px; border:1px solid var(--bd);
  border-radius:2px; font-size:14px; color:var(--tx-input);
  background:#fff; outline:none; font-family:inherit;
}
.input:focus,.select:focus,textarea.input:focus { border-color:var(--primary); }
.input::placeholder { color:#ccc; }
.select { cursor:pointer; padding-right:24px; }
textarea.input { height:auto; padding:9px 10px; resize:vertical; line-height:24px; }
.input.w180 { width:180px; } .input.w140 { width:140px; } .input.w120 { width:120px; }
.input.w100 { width:100px; }
.input.w-full { width:100%; }

.form-item { margin-bottom:15px; }
.form-item > label { display:block; font-size:14px; color:var(--tx-1); margin-bottom:6px; }
.form-hint { font-size:12px; color:var(--tx-2); margin-top:5px; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:0 15px; }
.radio-row { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.radio-row label { display:flex; align-items:center; gap:5px; font-size:14px; color:var(--tx); cursor:pointer; }

/* ============ 弹窗（深色头） ============ */
.modal-mask {
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000;
  display:flex; align-items:flex-start; justify-content:center;
  padding:50px 20px 20px; overflow-y:auto;
}
.modal {
  background:#fff; border-radius:2px; box-shadow:0 8px 30px rgba(0,0,0,.2);
  width:100%; max-width:800px; animation:modalIn .18s ease;
}
.modal.narrow { max-width:440px; }
.modal.wide   { max-width:1000px; }
@keyframes modalIn { from { opacity:0; transform:translateY(-12px);} to { opacity:1; transform:none;} }
.modal-header {
  height:50px; line-height:50px; padding:0 15px;
  background:var(--modal-head); color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  font-size:14px;
}
.modal-header h3 { font-weight:400; }
.close-x { font-size:20px; color:rgba(255,255,255,.8); cursor:pointer; line-height:1; }
.close-x:hover { color:#fff; }
.modal-body { padding:20px 15px; max-height:calc(100vh - 210px); overflow-y:auto; }
.modal-footer { padding:12px 15px; border-top:1px solid var(--line-soft); text-align:right; }
.modal-footer .btn { margin-left:10px; }

/* ============ 提示 ============ */
.alert { padding:10px 15px; font-size:14px; margin-bottom:15px; border-radius:2px; }
.alert-error { background:#fff2f2; color:var(--danger); border:1px solid #ffd6d6; }
.alert-success{ background:#f0fff8; color:var(--primary); border:1px solid #b7ebd3; }
.alert-info   { background:#f2faff; color:var(--blue); border:1px solid #b3d8ff; }
.alert-warn   { background:#fffaf0; color:var(--warn); border:1px solid #ffe0a0; }
.toast {
  position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:2000;
  min-width:180px; max-width:80vw; text-align:center; padding:10px 20px;
  border-radius:2px; box-shadow:0 2px 8px rgba(0,0,0,.12);
  font-size:14px; animation:toastIn .2s ease;
}
@keyframes toastIn { from { opacity:0; transform:translate(-50%,-10px);} to { opacity:1; transform:translate(-50%,0);} }
.toast-success { background:#f0fff8; color:var(--primary); border:1px solid #b7ebd3; }
.toast-error   { background:#fff2f2; color:var(--danger); border:1px solid #ffd6d6; }

.empty { text-align:center; color:var(--tx-2); padding:50px 20px; font-size:14px; }
.loading { text-align:center; color:var(--tx-2); padding:30px; }

.desc-list .row {
  display:flex; gap:10px; padding:9px 0;
  border-bottom:1px solid var(--line-soft); font-size:14px;
}
.desc-list .row .k { color:var(--tx-2); flex:0 0 88px; }
.desc-list .row .v { color:var(--tx); word-break:break-all; }

@media (max-width:900px) {
  .sidebar { transform:translateX(-100%); transition:transform .25s; }
  .sidebar.open { transform:none; }
  .main { margin-left:0; }
  .topbar { left:0; }
}