/* 站长平台自动化系统 后台主题 —— 参考 Kobetools(adminvue) 视觉语言，独立实现
   仅 1920 桌面、无多语言、无响应式；亮色主题 */

:root {
  --color-primary: #6366f1;
  --color-primary-dark: #4f46e5;
  --color-primary-rgb: 99, 102, 241;
  --color-accent: #8b5cf6;
  --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);

  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;

  --bg: #f4f5f8;
  --bg-soft: #f7f8fa;
  --card: #ffffff;
  --text: #0f172a;
  --text-2: #475569;
  --muted: #94a3b8;
  --border: rgba(15, 23, 42, 0.09);
  --border-2: rgba(15, 23, 42, 0.06);

  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.12);

  --sidebar-w: 260px;
  --header-h: 64px;
  /* 面板最大宽度。原先写死 1200px，在 1920 屏上右侧会白白空出约 400px
     （1920 - 260 侧栏 - 56 内容内边距 = 1604 可用，却只用 1200），
     表格页因此被挤得换行。放到 1920 后：1920 屏下等于铺满，更宽的屏也不会拉到难以阅读。 */
  --content-max: 1920px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --mono: 'SF Mono', 'JetBrains Mono', Consolas, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }

/* ============ 布局 ============ */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  position: fixed; left: 0; top: 0; bottom: 0;
  background: var(--card);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  z-index: 100;
}
.brand {
  height: var(--header-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px;
  border-bottom: 1px solid var(--border-2);
  flex-shrink: 0;
}
.brand-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--gradient-primary);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 18px;
  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.4);
}
.brand-name {
  font-size: 16px; font-weight: 700;
  background: var(--gradient-primary);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.nav { flex: 1; padding: 14px 12px; overflow-y: auto; }
.nav-foot { padding: 12px; border-top: 1px solid var(--border-2); }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 14px; margin-bottom: 3px;
  border-radius: var(--radius-sm);
  color: var(--text-2); font-size: 14px; font-weight: 500;
  position: relative; transition: all .15s ease;
}
.nav-item:hover { background: var(--bg-soft); color: var(--text); }
.nav-item.active { background: rgba(var(--color-primary-rgb), 0.1); color: var(--color-primary); }
.nav-item.active::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; background: var(--color-primary); border-radius: 0 3px 3px 0;
}
.nav-icon { width: 19px; height: 19px; flex-shrink: 0; }
.nav-foot .nav-item:hover { color: var(--danger); background: rgba(239, 68, 68, 0.08); }

.main { flex: 1; margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-height: 100vh; }
.topbar {
  height: var(--header-h); position: sticky; top: 0; z-index: 90;
  background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
}
.topbar-title { font-size: 18px; font-weight: 600; color: var(--text); }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.user-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 50px;
  background: var(--bg-soft); border: 1px solid var(--border);
  font-size: 13px; font-weight: 500; color: var(--text-2);
}
.user-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2); }
.content { flex: 1; padding: 28px; }
.foot { padding: 16px 28px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--border-2); }

/* ============ 卡片 / 面板 ============ */
.panel {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm);
  max-width: var(--content-max);
}
.panel.narrow { max-width: 520px; }
/* 竖排表单里的单行控件不跟着面板一起拉长 —— 面板变宽后若不管，
   详情页的输入框会变成 1500px 宽，反而难用。
   用直接子选择器，避免命中 .row-inline 里那些需要 flex 自适应的控件。
   textarea 刻意不限宽：那里是粘贴整段 Cookie 的，越宽越好用。 */
.form > label > input,
.form > label > select { max-width: 640px; }
.panel h2 { margin: 0 0 16px; font-size: 17px; font-weight: 600; }
.muted { color: var(--muted); }
.sec { margin-top: 26px; border-top: 1px solid var(--border-2); padding-top: 18px; }
.sec:first-of-type { border-top: none; padding-top: 0; }
.sec h3 { font-size: 14px; font-weight: 600; margin: 0 0 12px; color: var(--text); }

/* 统计卡片 */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 22px; }
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.card::after {
  content: ''; position: absolute; right: -20px; top: -20px; width: 80px; height: 80px;
  border-radius: 50%; background: rgba(var(--color-primary-rgb), 0.06);
}
.card-num { font-size: 30px; font-weight: 700; color: var(--text); line-height: 1.1; }
.card-label { color: var(--muted); margin-top: 8px; font-size: 13px; font-weight: 500; }

/* ============ 表格 ============ */
table.tbl { width: 100%; border-collapse: collapse; margin-top: 8px; }
table.tbl thead th {
  text-align: left; padding: 12px 14px; font-size: 13px; font-weight: 600;
  color: var(--text-2); background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}
table.tbl thead th:first-child { border-radius: 10px 0 0 0; }
table.tbl thead th:last-child { border-radius: 0 10px 0 0; }
table.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--border-2); vertical-align: middle; }
table.tbl tbody tr:last-child td { border-bottom: none; }
table.tbl tr:hover td { background: var(--bg-soft); }

/* ============ 徽标 ============ */
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; }
.badge.ok { background: rgba(16, 185, 129, 0.12); color: #059669; }
.badge.bad { background: rgba(239, 68, 68, 0.12); color: #dc2626; }
.badge.warn { background: rgba(245, 158, 11, 0.14); color: #d97706; }
.badge.info { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
.badge.muted { background: rgba(148, 163, 184, 0.16); color: #64748b; }

/* ============ 按钮 ============ */
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 4px 0 16px; }
.btn-sm, button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; font-size: 14px; font-weight: 500;
  background: var(--color-primary); color: #fff; border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm); cursor: pointer; transition: all .15s ease;
  font-family: var(--font);
}
.btn-sm:hover, button:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.btn-secondary { background: var(--card); color: var(--text-2); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--bg-soft); color: var(--text); border-color: var(--border); }
.btn-danger { background: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: #dc2626; border-color: #dc2626; }
.btn-link { color: var(--color-primary); font-weight: 500; padding: 0; }
.btn-link:hover { text-decoration: underline; }

/* ============ 表单 ============ */
.form label, .login-card label { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; color: var(--text-2); font-size: 13px; font-weight: 500; }
input, select, textarea {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px; color: var(--text);
  font-size: 14px; font-family: var(--font); transition: all .15s ease; width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.12);
}
textarea { min-height: 110px; font-family: var(--mono); font-size: 13px; resize: vertical; }
.row-inline { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.row-inline label { flex: 1; min-width: 160px; margin-bottom: 14px; }
.row-inline .btn-sm, .row-inline button { margin-bottom: 14px; }
.help { color: var(--muted); font-size: 13px; margin: 6px 0 0; line-height: 1.6; }
code { background: var(--bg-soft); border: 1px solid var(--border-2); border-radius: 4px; padding: 1px 6px; font-size: 12px; font-family: var(--mono); }
.token-box {
  background: var(--bg-soft); border: 1px dashed var(--color-primary); border-radius: var(--radius-sm);
  padding: 16px; font-family: var(--mono); font-size: 15px; word-break: break-all; margin: 12px 0; color: var(--color-primary-dark);
}

/* 筛选栏 */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filters select, .filters input { width: auto; min-width: 130px; }
/* 面板变宽后 URL 列可以多显示一截，仍保留单行省略 */
.url-cell { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============ 对接文档查看页 ============ */
/* 正文限宽到 ~90 字符：文档是长段落中文，铺满 1600px 会让眼睛找不到行首 */
.doc-body { max-width: 900px; line-height: 1.85; color: var(--text-2); }
.doc-body .doc-h1 { font-size: 22px; margin: 0 0 14px; color: var(--text); }
.doc-body .doc-h2 { font-size: 17px; margin: 30px 0 12px; padding-top: 16px; border-top: 1px solid var(--border-2); color: var(--text); }
.doc-body .doc-h3 { font-size: 15px; margin: 22px 0 10px; color: var(--text); }
.doc-body .doc-h4, .doc-body .doc-h5, .doc-body .doc-h6 { font-size: 14px; margin: 18px 0 8px; color: var(--text); }
.doc-body .doc-p { margin: 10px 0; }
.doc-body .doc-hr { border: none; border-top: 1px solid var(--border-2); margin: 22px 0; }
.doc-body .doc-list { margin: 10px 0; padding-left: 22px; }
.doc-body .doc-list li { margin: 5px 0; }
.doc-body .doc-quote { margin: 12px 0; padding: 10px 14px; border-left: 3px solid var(--color-primary); background: var(--bg-soft); border-radius: 0 8px 8px 0; color: var(--text-2); }
.doc-body .doc-code { margin: 12px 0; padding: 14px 16px; background: #0f172a; border-radius: var(--radius-sm); overflow-x: auto; }
.doc-body .doc-code code { background: none; border: none; padding: 0; color: #e2e8f0; font-size: 12.5px; line-height: 1.7; white-space: pre; }
/* 表格较宽（状态码/原因表），单独给横向滚动容器，避免把整页撑出滚动条 */
.doc-body .doc-table-wrap { overflow-x: auto; margin: 12px 0; }
.doc-body .doc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.doc-body .doc-table th { text-align: left; padding: 9px 12px; background: var(--bg-soft); border-bottom: 1px solid var(--border); color: var(--text-2); font-weight: 600; white-space: nowrap; }
.doc-body .doc-table td { padding: 9px 12px; border-bottom: 1px solid var(--border-2); vertical-align: top; }
.doc-body .doc-table tr:last-child td { border-bottom: none; }

/* ============ 接入凭证：行内编辑 ============ */
/* 不复用 .row-inline：那套样式是给整宽表单调的，label 带 flex:1 与 14px 下边距，
   放进表格单元格会把「保存」按钮顶得和输入框错位（align-items:flex-end + 只有按钮有下边距）。
   这里用固定宽度 + nowrap，保证一行排开、基线对齐。 */
.cred-edit { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; margin: 0; }
.cred-edit input, .cred-edit select { margin: 0; min-width: 0; }
.cred-edit .cred-name { width: 160px; }
.cred-edit .cred-ip { width: 230px; }
.cred-edit select { width: auto; }
/* 轮换/删除各自是独立 form（POST 语义），用 flex 容器让它们并排且不带外边距 */
.cred-ops { display: flex; gap: 8px; align-items: center; margin: 0; }
.cred-ops form { margin: 0; }
.cred-nowrap { white-space: nowrap; }

/* 提示 */
.alert { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #dc2626; padding: 11px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 14px; }
.alert.ok { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.3); color: #059669; }

/* ============ 登录页 ============ */
.login-body {
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
  background: linear-gradient(135deg, #eef2ff 0%, #f4f5f8 50%, #faf5ff 100%);
}
.login-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 40px 36px; width: 380px; box-shadow: var(--shadow-lg);
}
.login-logo {
  width: 56px; height: 56px; border-radius: 14px; margin: 0 auto 18px;
  background: var(--gradient-primary); display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 26px; font-weight: 700; box-shadow: 0 6px 18px rgba(var(--color-primary-rgb), 0.4);
}
.login-card h1 { font-size: 20px; margin: 0 0 6px; text-align: center; font-weight: 700; }
.login-card .sub { color: var(--muted); text-align: center; margin: 0 0 26px; font-size: 14px; }
.login-card button { width: 100%; justify-content: center; padding: 12px; font-size: 15px; margin-top: 6px; letter-spacing: 2px; }

/* ============ 授权登录弹窗 ============ */
.wpa-modal { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.wpa-modal-card { background: var(--card); border-radius: 16px; width: 440px; max-width: 92vw; box-shadow: var(--shadow-lg); overflow: hidden; animation: wlIn .2s ease; }
@keyframes wlIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wpa-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); font-size: 16px; font-weight: 600; }
.wpa-x { width: 30px; height: 30px; padding: 0; background: transparent; border: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; border-radius: 8px; }
.wpa-x:hover { background: var(--bg-soft); color: var(--text); }
.wpa-modal-body { padding: 20px; }
.wl-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; color: var(--text-2); font-size: 13px; font-weight: 500; }
.wl-methods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 6px 0 4px; }
.wl-methods button { justify-content: center; padding: 12px; }
.wl-note { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 10px 0 0; }
.wl-actions { display: flex; gap: 10px; margin-top: 10px; }
.wl-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); margin-bottom: 14px; }
.wl-check input { width: auto; }
.wl-alert { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #dc2626; padding: 10px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 12px; }
.wl-alert.ok { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.3); color: #059669; }
.wl-alert.info { background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.3); color: #2563eb; }
.wl-center { text-align: center; padding: 6px 0; }
.wl-spinner { width: 34px; height: 34px; margin: 6px auto 4px; border: 3px solid var(--border); border-top-color: var(--color-primary); border-radius: 50%; animation: wl-spin .9s linear infinite; }
@keyframes wl-spin { to { transform: rotate(360deg); } }
.wl-autofill { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); }
.wl-autofill .wl-note b { color: var(--text-2); }

/* ============ 系统日志 ============ */
/* detail_json 折叠：JSON 可能很长，必须限高 + 自动换行，否则单行会把表格横向撑爆 */
.log-detail { max-width: 420px; }
.log-detail summary { cursor: pointer; color: var(--color-primary); font-size: 12px; }
.log-detail pre {
  margin: 6px 0 0; padding: 8px; background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-family: var(--mono); font-size: 12px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-all; max-height: 260px; overflow: auto;
}
/* 说明列：错误文案长短不一，允许换行但限宽，避免挤掉右侧的详情列 */
.log-msg { max-width: 380px; word-break: break-word; }
@media (max-width: 768px) {
  .log-detail, .log-msg { max-width: 220px; }
}