/* PostSup 组件样式 —— 基于 CEM 设计系统变量（base.css 定义主题 token） */
/* 状态色 */
:root, [data-bs-theme="light"], [data-bs-theme="dark"] {
  --ok: #34d399;
  --err: #f87171;
  --warn: #fbbf24;
  --accent-solid: var(--accent, #6366f1);
}

.hidden{display:none !important}
.muted{color:var(--text-muted);font-size:13px}

/* Toast 提示弹窗 */
#toast.toast{position:fixed;bottom:24px;right:24px;z-index:9999;background:rgba(18,24,38,.92);color:#f1f5f9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(148,163,184,.25);border-radius:10px;padding:10px 18px;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.35);pointer-events:none;transition:opacity .2s ease,transform .2s ease;opacity:1;transform:translateY(0);display:block}
#toast.toast.hidden{opacity:0;transform:translateY(12px);display:none !important}

/* 旋转动画 */
.spin{animation:spin 1s linear infinite;display:inline-block}
@keyframes spin{100%{transform:rotate(360deg)}}

/* ---- 页签切换（路由控制显示/隐藏） ---- */
.tab{display:none}
.tab.active{display:block;animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---- 登录 ---- */
.login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.login-card{width:400px;max-width:100%;padding:34px;border-radius:18px;background:var(--bg-card);border:1px solid var(--border-color);box-shadow:var(--shadow-lg)}
.brand{display:flex;gap:14px;align-items:center;margin-bottom:24px}
.brand-mark{width:52px;height:52px;border-radius:13px;filter:drop-shadow(0 6px 14px rgba(99,102,241,.35))}
.brand-mark.small{width:30px;height:30px;border-radius:8px;filter:none}
.brand h1{font-size:25px;font-weight:800;letter-spacing:-.3px;color:var(--text-primary)}
.brand h1 .hl{background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-sub{color:var(--text-secondary);font-size:12.5px;margin-top:2px}
.foot{text-align:center;margin-top:20px;color:var(--text-muted);font-size:12px}

/* ---- 表单/输入（Bootstrap form-control 由 base.css 覆盖，此处补充布局）---- */
.form{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12.5px;color:var(--text-secondary);font-weight:500}
.row{display:flex;gap:12px}.row .field{flex:1}
.msg{font-size:13px;padding:9px 12px;border-radius:9px}
.msg.error{background:rgba(248,113,113,.12);color:var(--err)}

/* ---- 按钮（覆盖 Bootstrap .btn 基础，叠加 PostSup 变体）---- */
.btn{font-weight:600}
.btn.primary{background:var(--accent-gradient);color:#fff;border:none}
.btn.primary:hover{filter:brightness(1.05);color:#fff}
.btn.ghost{background:var(--bg-card-hover);border:1px solid var(--border-color);color:var(--text-primary)}
.btn.ghost:hover{background:var(--bg-card);border-color:var(--accent)}
.btn.block{width:100%}
.btn.small{padding:6px 12px;font-size:12.5px;border-radius:8px}
.btn.danger{background:rgba(248,113,113,.14);color:var(--err)}
.btn.danger:hover{background:rgba(248,113,113,.22)}

/* ---- 顶栏补充 ---- */
.bar-logo{width:26px;height:26px;border-radius:7px}
.bar-brand{font-weight:800;font-size:16px;color:var(--text-primary);margin-left:4px}
.bar-brand .hl{color:var(--accent)}
.ver{font-size:11px;color:var(--text-muted);margin-left:6px}
.chip{background:var(--bg-card-hover);border:1px solid var(--border-color);border-radius:999px;padding:4px 11px;font-size:12px;color:var(--text-secondary)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--accent-gradient);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}

/* ---- 页面标题 ---- */
.page-title{font-size:21px;font-weight:700;letter-spacing:-.2px;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--text-primary)}
.page-title .sub{font-size:13px;font-weight:500;color:var(--text-muted);margin-left:8px}
.title-actions{display:flex;gap:8px;align-items:center}
.bar-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.bar-title h3{font-size:16px;color:var(--text-primary)}

/* ---- 服务家族/卡片 ---- */
.families{display:flex;flex-direction:column;gap:26px}
.family h3{font-size:13px;color:var(--text-muted);font-weight:600;margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;gap:8px}
.family h3 .sub{font-weight:400;font-size:11px;color:var(--text-muted);opacity:.65;text-transform:none;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:420px;direction:rtl;text-align:left}
.family .count{font-size:11px;font-weight:600;color:var(--text-secondary);background:var(--bg-card-hover);border-radius:999px;padding:1px 9px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}

/* 服务卡片：识别→理解→操作，状态顶部柔色渐变 pop-out */
.svc-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:11px;box-shadow:var(--shadow-sm);transition:all .2s}
.svc-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.svc-card.operating{border-color:var(--accent) !important;box-shadow:0 0 16px rgba(99,102,241,.4) !important;animation:pulseCard 1.2s ease-in-out infinite alternate}
@keyframes pulseCard{0%{transform:scale(1);box-shadow:0 0 10px rgba(99,102,241,.25)}100%{transform:scale(1.01);box-shadow:0 0 20px rgba(99,102,241,.55)}}
.svc-card.running{background:linear-gradient(180deg,rgba(52,211,153,.08),var(--bg-card) 38%)}
.svc-card.fatal,.svc-card.backoff,.svc-card.error{background:linear-gradient(180deg,rgba(248,113,113,.1),var(--bg-card) 38%)}
.svc-head{display:flex;align-items:center;gap:8px;min-width:0}
.svc-dot{width:9px;height:9px;border-radius:50%;background:var(--text-muted);flex:none}
.svc-card.running .svc-dot{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.svc-card.fatal .svc-dot,.svc-card.backoff .svc-dot,.svc-card.error .svc-dot{background:var(--err);box-shadow:0 0 8px var(--err)}
.svc-name{font-weight:650;font-size:14.5px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svc-chip{font-size:10.5px;font-weight:600;color:var(--text-secondary);background:var(--bg-card-hover);border:1px solid var(--border-color);border-radius:5px;padding:1px 7px;flex:none}
.svc-status{display:flex}
.svc-note{font-size:11px;color:var(--text-muted);opacity:.85;font-style:italic;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px;border-left:2px solid var(--border-light);padding-left:8px;margin:2px 0}
.status-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:650;padding:4px 11px;border-radius:999px}
.status-badge::before{content:"";width:8px;height:8px;border-radius:50%}
.status-badge.running{background:rgba(52,211,153,.15);color:var(--ok)}.status-badge.running::before{background:var(--ok)}
.status-badge.stopped{background:rgba(148,163,184,.15);color:var(--text-muted)}.status-badge.stopped::before{background:var(--text-muted)}
.status-badge.fatal,.status-badge.backoff,.status-badge.error{background:rgba(248,113,113,.15);color:var(--err)}.status-badge.fatal::before,.status-badge.backoff::before,.status-badge.error::before{background:var(--err)}
.svc-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--text-muted);border-top:1px solid var(--border-light);padding-top:9px}
.svc-actions{display:flex;gap:8px}
.svc-actions .btn{flex:1;padding:7px 0;font-size:12.5px}

/* ---- 列表 ---- */
.list{display:flex;flex-direction:column;gap:8px}
.audit-row{background:var(--bg-card);border:1px solid var(--border-color);border-radius:11px;padding:11px 14px;display:flex;gap:12px;font-size:12.5px;align-items:center}
.audit-row .t{color:var(--text-muted);font-family:monospace;white-space:nowrap}
.audit-row .u{font-weight:600;min-width:90px;color:var(--text-primary)}
.audit-row .a{font-weight:600;min-width:100px;color:var(--text-primary)}
.audit-row .d{color:var(--text-muted);flex:1}

/* ---- 弹窗/toast ---- */
.modal{position:fixed;inset:0;z-index:1080;display:grid;place-items:center;background:rgba(0,0,0,.4);backdrop-filter:blur(6px)}
.modal-card{width:380px;max-width:92vw;padding:24px;border-radius:16px;display:flex;flex-direction:column;gap:14px;background:var(--bg-card);border:1px solid var(--border-color);box-shadow:var(--shadow-lg);animation:pop .2s ease}
@keyframes pop{from{transform:scale(.94);opacity:0}to{transform:scale(1)}}
.modal-actions{display:flex;gap:10px;justify-content:flex-end}

/* ---- 终端 ---- */
.terminal-box{margin-top:14px;border-radius:12px;overflow:hidden;background:#0b1220;padding:8px}
#xterm .xterm{padding:6px}
.config-edit{width:100%;min-height:60vh;background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:16px;color:var(--text-primary);outline:none;resize:vertical;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px}
/* 覆盖 bootstrap textarea.form-control 的 min-height（特异性更高，否则被压成 ~38px） */
textarea.config-edit.form-control{min-height:60vh!important}
.config-edit:focus{border-color:var(--accent)}
/* ===== 平台配置可视化表单 ===== */
.config-form{display:flex;flex-direction:column;gap:14px;max-width:860px}
.cfg-section{background:var(--mac-card);border:1px solid var(--mac-line);border-radius:12px;box-shadow:var(--mac-shadow);overflow:hidden}
.cfg-head{padding:12px 16px;border-bottom:1px solid var(--mac-line)}
.cfg-head h3{margin:0;font-size:14px;font-weight:700;color:var(--text-primary)}
.cfg-head p{margin:3px 0 0;font-size:11.5px}
.cfg-body{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.cfg-field{display:flex;align-items:center;gap:10px}
.cfg-field label{flex:0 0 220px;font-size:12px;font-weight:600;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfg-field input[type="text"],.cfg-field input[type="number"],.cfg-field input[type="password"]{flex:1;min-width:0;height:32px;padding:4px 10px;border:1px solid var(--mac-line);border-radius:8px;background:var(--mac-field);color:var(--text-primary);font-size:12.5px;outline:none}
.cfg-field input:focus{border-color:var(--mac-accent)}
.cfg-field input[type="checkbox"]{width:18px;height:18px;accent-color:var(--mac-accent)}
.cfg-clear{clear:both}
.cfg-users{display:flex;flex-direction:column;gap:8px}
.cfg-user-row{display:flex;align-items:center;gap:8px}
.cfg-user-field{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.cfg-user-field label{flex:none;font-size:11px;color:var(--text-muted);width:auto}
.cfg-user-field input,.cfg-user-field select{flex:1;min-width:0;height:30px;padding:3px 8px;border:1px solid var(--mac-line);border-radius:7px;background:var(--mac-field);color:var(--text-primary);font-size:12px;outline:none}
.cfg-user-del{flex:none;width:30px;height:30px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--text-muted);cursor:pointer}
.cfg-user-del:hover{color:var(--err);background:rgba(248,81,73,.12);border-color:rgba(248,81,73,.3)}
.cfg-version{margin-top:2px;font-size:11px;text-align:right}
/* ===== 日志查看 / 资源监控 / 配置管理（服务管理子页） ===== */
.log-view{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:12px 16px;height:calc(100vh - 260px);overflow-y:auto;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;line-height:1.55;white-space:pre-wrap;word-break:break-all}
.log-view .log-line{color:var(--text-primary)}
.log-view .log-warn{color:#d29922;background:rgba(210,153,34,.08);border-radius:4px;padding:0 2px}
.log-view .log-err{color:#f85149;background:rgba(248,81,73,.1);border-radius:4px;padding:0 2px}
.monitor-summary{display:flex;gap:20px;flex-wrap:wrap;padding:12px 16px;background:var(--mac-card);border:1px solid var(--mac-line);border-radius:12px;font-size:13px;margin-bottom:14px}
.monitor-summary .si{color:var(--text-secondary)}
.monitor-summary .si b{color:var(--text-primary);font-weight:600;font-family:monospace}
.monitor-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.monitor-charts .mc-card, #mp-proc .mc-card{background:var(--mac-card);border:1px solid var(--mac-line);border-radius:12px;padding:12px 16px;box-shadow:var(--mac-shadow);position:relative}
.monitor-charts .mc-title{font-size:12px;font-weight:700;color:var(--text-secondary);margin-bottom:8px}
.monitor-charts canvas{width:100%;height:90px;display:block;cursor:crosshair}
#mp-proc canvas{width:100%;height:220px;display:block;cursor:crosshair}
.chart-tooltip{position:absolute;z-index:20;background:rgba(18,24,38,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(148,163,184,.25);border-radius:8px;padding:8px 12px;font-size:11.5px;color:#f1f5f9;box-shadow:0 8px 24px rgba(0,0,0,.35);pointer-events:none;transform:translate(-50%,-100%);margin-top:-10px;transition:opacity .15s ease,transform .15s ease;white-space:nowrap;opacity:0}
.chart-tooltip.show{opacity:1}
.chart-tooltip .tt-time{font-size:10px;color:#94a3b8;margin-bottom:4px;border-bottom:1px solid rgba(148,163,184,.15);padding-bottom:2px;font-family:monospace}
.chart-tooltip .tt-row{display:flex;align-items:center;gap:6px;margin:2px 0}
.chart-tooltip .tt-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.chart-tooltip .tt-label{color:#cbd5e1;max-width:140px;overflow:hidden;text-overflow:ellipsis}
.chart-tooltip .tt-val{margin-left:auto;font-weight:700;font-family:monospace;color:#fff}
/* 子视图切换 */
.monitor-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.monitor-tab{padding:6px 14px;border-radius:8px;border:1px solid var(--mac-line);background:transparent;color:var(--text-secondary);font-size:12px;cursor:pointer;transition:.15s}
.monitor-tab:hover{color:var(--text-primary);border-color:var(--accent)}
.monitor-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.monitor-panel.hidden{display:none}
.monitor-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;font-size:12px;color:var(--text-secondary)}
.monitor-legend .lg{display:flex;align-items:center;gap:5px;cursor:pointer}
.monitor-legend .lg.dim{opacity:.35}
.monitor-legend .dot{width:10px;height:10px;border-radius:3px;display:inline-block}
/* 通用表格 (macOS 悬浮孤岛卡片行风格) */
.table-wrap{background:transparent;border:none;border-radius:0;padding:0;overflow:auto;max-height:65vh}
.grid-table{width:100%;border-collapse:separate!important;border-spacing:0 5px!important;font-size:12px;margin:0}
.grid-table th{padding:8px 12px;text-align:left;color:var(--text-muted);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.4px;user-select:none;position:sticky;top:0;background:var(--mac-card);border:none!important;z-index:2}
.grid-table tbody tr{background:var(--mac-field);border:1px solid transparent;transition:all .15s ease}
.grid-table tbody tr:hover{background:var(--mac-card);box-shadow:0 2px 8px rgba(0,0,0,.08);transform:translateY(-0.5px)}
.grid-table tbody td{padding:9px 12px;text-align:left;border-top:1px solid var(--mac-line)!important;border-bottom:1px solid var(--mac-line)!important;border-left:none!important;border-right:none!important;color:var(--text-primary);white-space:nowrap;vertical-align:middle}
.grid-table tbody tr td:first-child{border-left:1px solid var(--mac-line)!important;border-radius:8px 0 0 8px!important}
.grid-table tbody tr td:last-child{border-right:1px solid var(--mac-line)!important;border-radius:0 8px 8px 0!important}
.grid-table .num{font-family:ui-monospace,Menlo,Consolas,monospace;text-align:right;font-weight:600}
.grid-table .bar-bg{background:rgba(127,132,142,.15);border-radius:9999px;height:6px;min-width:100px;overflow:hidden}
.grid-table .bar-fill{height:100%;border-radius:9999px;transition:width .3s ease}

/* Markdown 文档与知识库内嵌表格 (同步应用悬浮孤岛圆角行) */
.server-report-container table{width:100%;border-collapse:separate!important;border-spacing:0 6px!important;margin:12px 0 16px!important;font-size:12.5px}
.server-report-container table th{padding:6px 12px;color:var(--text-muted);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.4px;border:none!important;background:transparent!important}
.server-report-container table tbody tr{background:var(--mac-field);transition:all .15s ease}
.server-report-container table tbody tr:hover{background:var(--mac-card)}
.server-report-container table tbody td{padding:8px 12px;border-top:1px solid var(--mac-line)!important;border-bottom:1px solid var(--mac-line)!important;border-left:none!important;border-right:none!important;color:var(--text-primary);vertical-align:middle}
.server-report-container table tbody tr td:first-child{border-left:1px solid var(--mac-line)!important;border-radius:8px 0 0 8px!important}
.server-report-container table tbody tr td:last-child{border-right:1px solid var(--mac-line)!important;border-radius:0 8px 8px 0!important}
.server-report-container{background:var(--mac-card);border:1px solid var(--mac-line);border-radius:12px;padding:20px;font-size:13px;color:var(--text-primary);max-height:calc(100vh - 260px);overflow-y:auto;line-height:1.6}
.server-report-container h1{font-size:18px;font-weight:700;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--mac-line);color:var(--text-primary)}
.server-report-container h2{font-size:15px;font-weight:700;margin:18px 0 8px;padding-bottom:4px;border-bottom:1px solid var(--mac-line);color:var(--text-primary)}
.server-report-container h3{font-size:13.5px;font-weight:600;margin:14px 0 6px;color:var(--text-secondary)}
.server-report-container blockquote{margin:8px 0 12px;padding:8px 12px;background:rgba(88,166,255,0.06);border-left:3px solid var(--mac-accent);border-radius:0 6px 6px 0;font-size:12px;color:var(--text-secondary)}
.server-report-container pre{background:var(--mac-field);border:1px solid var(--mac-line);border-radius:8px;padding:10px 14px;overflow-x:auto;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;line-height:1.5;margin:8px 0}
.server-report-container code{background:var(--mac-field);border-radius:4px;padding:1px 5px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.server-report-container pre code{padding:0;background:none}
.server-report-container details{background:var(--mac-field);border:1px solid var(--mac-line);border-radius:8px;padding:8px 12px;margin:8px 0}
.server-report-container summary{cursor:pointer;user-select:none;font-size:12px;color:var(--text-secondary)}
.server-report-container summary:hover{color:var(--text-primary)}
.server-report-container details[open] summary{margin-bottom:8px;border-bottom:1px solid var(--mac-line);padding-bottom:4px}
.server-report-container .table-wrap{margin:8px 0 14px}

/* 打印与导出 PDF 专属样式 (A4 专业文档与报告排版) */
@page {
  size: A4 portrait;
  margin: 15mm 15mm 15mm 15mm;
}

@media print {
  /* 1. 强制浅色底与纯黑字，清除所有固定高度与滚动条限制 */
  html, body, .app-wrapper, .app-main, .app-content, .tab, #tab-docs, .dochub-wrap, .dochub-content, .doc-view-panel, .server-report-container {
    background: #ffffff !important;
    color: #111827 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    font-size: 11pt !important;
    line-height: 1.6 !important;
  }

  /* 2. 彻底隐藏与正文无关的导航、侧边栏、调试台与操作按钮 */
  .app-header, .sidebar-wrapper, .app-footer, .brand-link, .nav, .title-actions,
  .dochub-sidebar, #docApiDebugger, #tab-docs .dashboard-header,
  .monitor-tabs, .btn, .status-bar, .tab:not(.active), .monitor-panel.hidden {
    display: none !important;
  }

  /* 3. 文档视图页眉排版 */
  .doc-view-header {
    border-bottom: 2px solid #111827 !important;
    padding-bottom: 8px !important;
    margin-bottom: 16px !important;
  }
  #docViewTitle {
    font-size: 18pt !important;
    font-weight: 800 !important;
    color: #111827 !important;
    margin-bottom: 4px !important;
  }
  #docViewPath {
    font-size: 9pt !important;
    color: #6b7280 !important;
    font-family: ui-monospace, Menlo, Consolas, monospace !important;
  }

  /* 4. 正文排版与防断裂控制 */
  .server-report-container h1 { font-size: 16pt !important; font-weight: 700 !important; color: #111827 !important; margin-top: 14pt !important; page-break-after: avoid; }
  .server-report-container h2 { font-size: 13pt !important; font-weight: 700 !important; color: #1f2937 !important; margin-top: 12pt !important; page-break-after: avoid; }
  .server-report-container h3 { font-size: 11.5pt !important; font-weight: 600 !important; color: #374151 !important; margin-top: 10pt !important; page-break-after: avoid; }

  .server-report-container p, .server-report-container ul, .server-report-container ol {
    color: #1f2937 !important;
    margin-bottom: 8pt !important;
  }

  /* 代码块在纸张上的浅色高清晰排版 */
  .server-report-container pre, pre {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    padding: 8pt 10pt !important;
    font-size: 9pt !important;
    line-height: 1.45 !important;
    color: #0f172a !important;
    white-space: pre-wrap !important;
    word-break: break-all !important;
    page-break-inside: avoid;
    margin: 8pt 0 !important;
  }
  .server-report-container code, code {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-radius: 3px !important;
    padding: 1pt 3pt !important;
    font-size: 9.5pt !important;
  }
  .server-report-container pre code {
    background: none !important;
    padding: 0 !important;
  }

  /* 表格在纸张上的印刷线框 */
  .grid-table, table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 10pt 0 !important;
    page-break-inside: avoid;
  }
  .grid-table th, table th {
    background: #f1f5f9 !important;
    color: #111827 !important;
    font-weight: 700 !important;
    border: 1px solid #94a3b8 !important;
    padding: 5pt 8pt !important;
    font-size: 9.5pt !important;
  }
  .grid-table td, table td {
    border: 1px solid #cbd5e1 !important;
    color: #1f2937 !important;
    padding: 5pt 8pt !important;
    font-size: 9.5pt !important;
  }

  /* 展开所有 details 折叠标签 */
  .server-report-container details {
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    margin: 8pt 0 !important;
    page-break-inside: avoid;
  }
  .server-report-container details summary {
    font-weight: 700 !important;
    color: #111827 !important;
  }
  .server-report-container details[open] summary, .server-report-container details summary {
    margin-bottom: 4pt !important;
  }
  .server-report-container details pre {
    display: block !important;
  }
}
/* ===== 时间同步与 NTP 矩阵样式 ===== */
.timesync-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-bottom:14px}
.ts-card{background:var(--mac-card);border:1px solid var(--mac-line);border-radius:12px;padding:14px 18px;box-shadow:var(--mac-shadow);display:flex;flex-direction:column}
.ts-card .ts-head{font-size:12px;font-weight:700;color:var(--text-secondary);margin-bottom:6px;display:flex;align-items:center}
.ts-card .ts-main-time{font-size:20px;font-weight:700;font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--text-primary);letter-spacing:.5px;margin:2px 0}
.ts-card .ts-sub{font-size:11.5px;color:var(--text-muted);margin-top:auto}
.ts-card .ts-status{margin:4px 0}
.delta-badge{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11.5px;font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700}
.delta-badge.good{background:rgba(63,185,80,.15);color:#3fb950}
.delta-badge.warn{background:rgba(210,153,34,.15);color:#d29922}
.delta-badge.bad{background:rgba(248,81,73,.15);color:#f85149}
.delta-badge.ref{background:rgba(88,166,255,.15);color:#58a6ff}
.type-tag{display:inline-block;padding:1px 6px;border-radius:4px;font-size:10.5px;font-weight:600;text-transform:uppercase}
.type-tag.ntp{background:rgba(163,113,247,.15);color:#a371f7}
.type-tag.http{background:rgba(88,166,255,.15);color:#58a6ff}

.conf-wrap{display:flex;gap:14px;align-items:flex-start}
.conf-list{width:220px;flex:none;max-height:calc(100vh - 260px);overflow-y:auto;background:var(--mac-card);border:1px solid var(--mac-line);border-radius:12px;padding:8px}
.conf-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;font-size:12.5px;color:var(--text-secondary);cursor:pointer;transition:background .12s}
.conf-item:hover{background:var(--mac-field)}
.conf-item.active{background:var(--mac-accent);color:#fff;font-weight:600}
.conf-item i{font-size:14px}
.conf-editor{flex:1;min-width:0}
.conf-editor .config-edit{height:calc(100vh - 300px);min-height:300px}
/* ===== README 展示弹窗 + app 联动 ===== */
.readme-card{width:720px;max-width:94vw;max-height:82vh;display:flex;flex-direction:column;gap:10px}
.readme-head{display:flex;align-items:center;justify-content:space-between}
.readme-head h3{margin:0;font-size:15px}
.modal-x{background:transparent;border:none;color:var(--text-muted);font-size:22px;line-height:1;cursor:pointer;padding:2px 8px;border-radius:8px}
.modal-x:hover{color:var(--text-primary);background:var(--mac-field)}
.readme-path{font-size:11px;word-break:break-all;border-bottom:1px solid var(--mac-line);padding-bottom:8px}
.readme-body{flex:1;overflow-y:auto;padding:4px 2px;font-size:13px;line-height:1.6;color:var(--text-primary)}
.readme-body h3{font-size:15px;margin:12px 0 6px;border-bottom:1px solid var(--mac-line);padding-bottom:4px}
.readme-body h4{font-size:13.5px;margin:10px 0 4px}
.readme-body p{margin:5px 0}
.readme-body ul{margin:4px 0;padding-left:20px}
.readme-body li{margin:2px 0}
.readme-body pre{background:var(--mac-field);border:1px solid var(--mac-line);border-radius:8px;padding:10px;overflow-x:auto;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;line-height:1.5}
.readme-body code{background:var(--mac-field);border-radius:4px;padding:1px 5px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.readme-body pre code{padding:0;background:none}
.svc-app-tag{margin-left:6px;font-size:13px;cursor:pointer;color:var(--mac-accent);opacity:.75;transition:opacity .15s}
.svc-app-tag:hover{opacity:1}
/* ============================================================
   卡片级物理呼吸灯动效 (Physical LED Breath & Aura)
   ============================================================ */

/* 卡片定位容器基础 */
.svc-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.25s, border-color 0.25s;
}

/* RUNNING 运行中卡片：卡片微光呼吸 + 左上角物理 LED 呼吸灯 */
.svc-card.is-running {
  border-color: rgba(46, 160, 67, 0.45) !important;
  box-shadow: 0 0 16px rgba(46, 160, 67, 0.16), 0 4px 16px rgba(0, 0, 0, 0.25) !important;
  animation: cardRunningBreath 3.2s infinite ease-in-out;
}

/* 顶部物理 LED 呼吸灯光束 (Physical Glowing LED Dot) */
.svc-card .card-led-indicator {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  z-index: 10;
  pointer-events: none;
}

/* 绿色运行呼吸灯 */
.svc-card.is-running .card-led-indicator {
  background: #39d353;
  box-shadow: 0 0 6px #39d353, 0 0 14px rgba(57, 211, 83, 0.85);
  animation: ledPulseGreen 2.2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

/* 琥珀色停止/异常呼吸灯 */
.svc-card.is-stopped .card-led-indicator {
  background: #d29922;
  box-shadow: 0 0 5px #d29922;
}

/* STOPPED 停止/异常卡片：琥珀微光静止提示 */
.svc-card.is-stopped {
  border-color: rgba(210, 153, 34, 0.35) !important;
  box-shadow: 0 0 12px rgba(210, 153, 34, 0.12), 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

/* 卡片极光呼吸动画：边框发光强度 + 外光晕柔和扩散 */
@keyframes cardRunningBreath {
  0%, 100% {
    border-color: rgba(46, 160, 67, 0.28);
    box-shadow: 0 0 8px rgba(46, 160, 67, 0.10), 0 0 0 1px rgba(46, 160, 67, 0.15), 0 4px 16px rgba(0, 0, 0, 0.25);
  }
  50% {
    border-color: rgba(63, 185, 80, 0.75);
    box-shadow: 0 0 22px rgba(46, 160, 67, 0.32), 0 0 0 1.5px rgba(63, 185, 80, 0.45), 0 6px 20px rgba(0, 0, 0, 0.35);
  }
}

/* LED 物理呼吸灯脉冲（亮度 + 聚光晕扩张） */
@keyframes ledPulseGreen {
  0%, 100% {
    transform: scale(1);
    opacity: 0.85;
    box-shadow: 0 0 5px #39d353, 0 0 10px rgba(57, 211, 83, 0.6);
  }
  50% {
    transform: scale(1.35);
    opacity: 1;
    box-shadow: 0 0 12px #56d364, 0 0 22px rgba(86, 211, 100, 0.95);
  }
}

/* 错位流动呼吸动画（避免整页死板同频闪烁） */
.svc-card.is-running:nth-child(2n) { animation-delay: -0.8s; }
.svc-card.is-running:nth-child(3n) { animation-delay: -1.6s; }
.svc-card.is-running:nth-child(4n) { animation-delay: -2.4s; }
.svc-card.is-running:nth-child(2n) .card-led-indicator { animation-delay: -0.6s; }
.svc-card.is-running:nth-child(3n) .card-led-indicator { animation-delay: -1.2s; }
.svc-card.is-running:nth-child(4n) .card-led-indicator { animation-delay: -1.8s; }

.app-state{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:2px 10px;border-radius:20px;cursor:pointer;letter-spacing:.3px;transition:all .25s ease}
.app-state::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;flex-shrink:0}

/* RUNNING: 极光绿呼吸动态光晕 (Glow Pulse) */
.app-state.run{
  background: rgba(46,160,67,0.14);
  color: #3fb950;
  border: 1px solid rgba(46,160,67,0.35);
  box-shadow: 0 0 10px rgba(46,160,67,0.2);
}
.app-state.run::before{
  background: #3fb950;
  box-shadow: 0 0 8px #3fb950, 0 0 14px rgba(63,185,80,0.6);
  animation: pulseGreenGlow 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

/* STOPPED: 琥珀黄警告微光 */
.app-state.stop{
  background: rgba(210,153,34,0.12);
  color: #d29922;
  border: 1px solid rgba(210,153,34,0.3);
}
.app-state.stop::before{
  background: #d29922;
  box-shadow: 0 0 4px rgba(210,153,34,0.4);
}

/* NONE/未部署 */
.app-state.none{
  background: var(--mac-field);
  color: var(--text-muted);
  border: 1px solid rgba(255,255,255,0.06);
}
.app-state.none::before{
  background: var(--text-muted);
  opacity: 0.5;
}

/* 呼吸灯脉冲动画 */
@keyframes pulseGreenGlow {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 6px #3fb950, 0 0 12px rgba(63,185,80,0.6);
  }
  50% {
    transform: scale(1.25);
    opacity: 0.75;
    box-shadow: 0 0 12px #3fb950, 0 0 20px rgba(63,185,80,0.8);
  }
}
.svc-card.flash{animation:flashCard 1s ease 2}
@keyframes flashCard{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 3px var(--mac-accent)}}
/* ===== git 检查弹窗 ===== */
.git-body{display:flex;flex-direction:column;gap:8px;padding:4px 2px;font-size:13px}
.git-row{display:flex;align-items:center;gap:10px;padding:7px 10px;background:var(--mac-field);border-radius:8px}
.git-row span{width:48px;flex:none;font-size:11px;color:var(--text-muted);font-weight:600}
.git-row b{flex:1;font-size:12.5px;color:var(--text-primary)}
.git-row code{flex:1;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--text-primary)}
.git-warn{color:#d29922;font-weight:600}
.git-row .git-warn{flex:1}

/* ============================================================
   macOS 覆盖层（B 方案 · 双主题各自归位）
   light = mac 浅色 / dark = mac 经典深色 · 单一 accent 蓝
   ============================================================ */
/* ---- 亮色：mac 浅色（浅底深字、白/浅灰毛玻璃） ---- */
:root, [data-bs-theme="light"] {
  --mac-accent: #0071e3; --mac-accent-h: #0077ed;
  --mac-side: rgba(255,255,255,.55); --mac-top: rgba(255,255,255,.66);
  --mac-card: rgba(255,255,255,.7); --mac-field: rgba(0,0,0,.05);
  --mac-line: rgba(0,0,0,.08); --mac-btn: rgba(0,0,0,.05);
  --bg-card-hover: rgba(0,0,0,.04);
  --border-light: rgba(0,0,0,.06);
}
/* ---- 暗色：mac 经典深色（近黑底、深灰毛玻璃、浅字） ---- */
[data-bs-theme="dark"] {
  --mac-accent: #0a84ff; --mac-accent-h: #0a93ff;
  --mac-side: rgba(17,19,26,.88); --mac-top: rgba(255,255,255,.08);
  --mac-card: rgba(36,36,40,.72); --mac-field: rgba(255,255,255,.07);
  --mac-line: rgba(255,255,255,.09); --mac-btn: rgba(255,255,255,.10);
  --bg-card-hover: rgba(255,255,255,.06);
  --border-light: rgba(255,255,255,.06);
}

/* ---- 背景：浅色 = 亮冷渐变；深色 = 近黑 + 极淡蓝紫光 ---- */
body, .app-wrapper {
  background:
    radial-gradient(1100px 700px at 15% 0%,  rgba(158,190,255,.32), transparent 60%),
    radial-gradient(900px 650px at 85% 10%, rgba(205,176,255,.25), transparent 60%),
    radial-gradient(1000px 850px at 50% 110%, rgba(180,205,255,.28), transparent 60%),
    linear-gradient(160deg, #eef3ff 0%, #e4edff 100%) !important;
}
[data-bs-theme="dark"] body, [data-bs-theme="dark"] .app-wrapper {
  background:
    radial-gradient(1100px 700px at 15% 0%,  rgba(28,58,118,.32), transparent 60%),
    radial-gradient(900px 650px at 85% 10%, rgba(58,36,110,.26), transparent 60%),
    radial-gradient(1000px 850px at 50% 110%, rgba(36,66,128,.28), transparent 60%),
    linear-gradient(160deg, #090a0e 0%, #0e0f15 100%) !important;
}

/* ---- 文字：浅色 = 深字；深色 = 浅字 ---- */
:root, [data-bs-theme="light"] {
  --text-primary: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-muted: #9aa1b0;
}
[data-bs-theme="dark"] {
  --text-primary: #f2f4f8;
  --text-secondary: #a8b0bd;
  --text-muted: #6b7280;
  --ok: #32d74b; --err: #ff453a; --warn: #ffd60a;
}

/* 玻璃通用 */
.glass{background:var(--mac-top);backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);border-bottom:1px solid var(--mac-line)}
.glass-card{background:var(--mac-card);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border:1px solid var(--mac-line)}

/* 顶栏 + 侧边栏：毛玻璃。
   mac 风格不用硬边框切割，改用色差 + 超淡投影柔和分隔 */
.app-header{background:var(--mac-top) !important;backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%)}
.app-sidebar{background:var(--mac-side) !important;backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);box-shadow:1px 0 0 0 var(--mac-line) !important}
.sidebar-wrapper{background:var(--mac-side) !important}
.sidebar-brand{background:var(--mac-side) !important;border-bottom:1px solid var(--mac-line) !important}
/* 侧边栏菜单项：透明背景，底色由侧边栏统一承担，靠文字色+左侧指示条区分当前项 */
.sidebar-menu .nav-link{background:transparent !important}
.sidebar-menu .nav-link:hover{background:transparent !important}
.sidebar-menu .nav-link.active{background:transparent !important;box-shadow:inset 3px 0 0 var(--accent) !important}

/* accent：单一 mac 蓝（背景让位，蓝按钮显著度足够），激活色随主题深浅适配 */
:root, [data-bs-theme="light"] {
  --accent: var(--mac-accent); --accent-h: var(--mac-accent-h);
  --accent-gradient: linear-gradient(135deg,#0071e3,#5e5ce6 55%,#af52de);
  --sidebar-active-bg: rgba(0,113,227,.1);
  --sidebar-active-text: #0062c2;
  --sidebar-hover-bg: rgba(0,0,0,.05);
  --topbar-tab-active-color: #0062c2;
  --topbar-tab-active-bg: rgba(0,113,227,.1);
}
[data-bs-theme="dark"] {
  --accent: var(--mac-accent); --accent-h: var(--mac-accent-h);
  --accent-gradient: linear-gradient(135deg,#0a84ff,#5e5ce6 55%,#bf5af2);
  --sidebar-active-bg: rgba(10,132,255,.16);
  --sidebar-active-text: #4ea6ff;
  --sidebar-hover-bg: rgba(255,255,255,.07);
  --topbar-tab-active-color: #4ea6ff;
  --topbar-tab-active-bg: rgba(10,132,255,.16);
}

/* 卡片/面板：毛玻璃（投影随主题深浅，浅色淡、深色重） */
:root, [data-bs-theme="light"] { --mac-shadow: 0 8px 30px rgba(0,0,0,.08); }
[data-bs-theme="dark"] { --mac-shadow: 0 8px 30px rgba(0,0,0,.35); }
.svc-card, .panel, .audit-row, .modal-card, .config-edit, .card {
  background: var(--mac-card) !important;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: var(--mac-shadow);
}
/* 服务卡片状态色：克制降饱和，垫玻璃底 */
.svc-card.running{background:linear-gradient(180deg,rgba(50,215,75,.12),var(--mac-card) 40%) !important}
.svc-card.fatal,.svc-card.backoff,.svc-card.error{background:linear-gradient(180deg,rgba(255,69,58,.14),var(--mac-card) 40%) !important}

/* 登录卡：玻璃 */
.login-card{background:var(--mac-card) !important;backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);box-shadow:var(--mac-shadow);border:1px solid var(--mac-line)}

/* 表单控件：玻璃字段 */
.form-control, .form-select, .config-edit{background-color:var(--mac-field) !important;border-color:var(--mac-line) !important;color:var(--text-primary)}
.form-control:focus,.form-select:focus{border-color:var(--mac-accent) !important;box-shadow:0 0 0 .25rem rgba(10,132,255,.2) !important}

/* 按钮：mac 风（主按钮蓝底） */
.btn.primary{background:var(--mac-accent) !important;border:none;color:#fff}
.btn.primary:hover{background:var(--mac-accent-h) !important;filter:none}
.btn.ghost{background:var(--mac-btn);border:1px solid var(--mac-line)}
.btn.ghost:hover{background:rgba(10,132,255,.14);border-color:var(--mac-accent)}
.avatar{background:linear-gradient(135deg,#0a84ff,#bf5af2)}

/* 顶栏模块标签：分段控件（display 由 Bootstrap d-lg-flex 控制，此处只补外观） */
.module-tabs{gap:2px;padding:3px;background:var(--mac-field);border-radius:9px}
.module-tab{padding:7px 15px;border-radius:7px;font-size:13px;font-weight:500;color:var(--text-secondary);display:inline-flex;align-items:center;gap:6px;text-decoration:none;cursor:pointer}
.module-tab:hover{color:var(--text-primary)}
.module-tab.active{background:var(--mac-card);color:var(--text-primary);font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.module-tab i{font-size:14px}

/* SF 字体栈 */
body,.brand h1,.page-title,.svc-name,.module-tab{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif}

/* ---- 终端：文件管理器 & 监控条 ---- */
.sysinfo{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;padding:12px;background:var(--mac-card);border-radius:12px;border:1px solid var(--mac-line)}
.sysinfo .si{display:flex;flex-direction:column;gap:2px;min-width:110px;padding:8px 12px;border-radius:9px;background:var(--mac-field)}
.sysinfo .si b{font-size:15px;color:var(--text-primary)}
.sysinfo .si span{font-size:11px;color:var(--text-muted)}
.fs-list{display:flex;flex-direction:column;gap:4px;max-height:340px;overflow-y:auto;border:1px solid var(--mac-line);border-radius:10px;padding:6px}
.fs-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:7px;font-size:13px;cursor:pointer}
.fs-row:hover{background:var(--mac-field)}
.fs-row.dir .fs-ico{color:var(--mac-accent)}
.fs-row.file .fs-ico{color:var(--text-muted)}
.fs-row .fs-ico{width:18px;text-align:center}
.fs-row .fs-name{flex:1;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fs-row .fs-size{color:var(--text-muted);font-size:12px;min-width:70px;text-align:right}
.fs-row .fs-op{display:flex;gap:4px;opacity:0;transition:opacity .15s}
.fs-row:hover .fs-op{opacity:1}
.fs-row .fs-op .btn{font-size:11px;padding:3px 8px}

/* ===== 设备终端页与文档中心（独占视口，对齐 CEM 布局，mac 毛玻璃风） ===== */
/* 终端页与文档页独占视口：锁定内容区高度不滚动，内层 flex 撑满（避免页面被拉长出现上下滚动条）
   高度自适应 grid：.app-main 在 AdminLTE grid 的 1fr 行已占满剩余，.app-content 用 height:100% */
body.terminal-page, body.docs-page{overflow:hidden}
body.terminal-page .app-wrapper, body.docs-page .app-wrapper{grid-template-rows:min-content minmax(0,1fr) min-content!important;height:100vh!important;overflow:hidden!important}
body.terminal-page .app-content, body.docs-page .app-content{height:100%;overflow:hidden;display:flex;flex-direction:column;padding:16px 24px;box-sizing:border-box}
body.terminal-page #tab-terminal.tab.active, body.docs-page #tab-docs.tab.active{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.terminal-container{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.connection-panel{background:var(--mac-card);border:1px solid var(--mac-line);border-radius:12px;padding:10px 14px;margin-bottom:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;box-shadow:var(--mac-shadow)}
.connection-panel .form-group{display:flex;align-items:center;gap:6px}
.connection-panel label{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.connection-panel .form-control,.connection-panel .form-select{height:34px;font-size:13px;border-radius:8px;min-width:130px}
.ip-input-wrapper{position:relative;flex:1;min-width:180px;max-width:260px}
.ip-input-wrapper .form-control{width:100%}
.ip-history-dropdown{position:absolute;top:100%;left:0;right:0;background:var(--mac-card);border:1px solid var(--mac-line);border-radius:0 0 8px 8px;box-shadow:var(--mac-shadow);z-index:1000;max-height:200px;overflow-y:auto;display:none}
.ip-history-dropdown.show{display:block}
.ip-history-item{padding:8px 12px;font-size:13px;cursor:pointer;color:var(--text-primary);transition:background .15s;display:flex;justify-content:space-between;align-items:center}
.ip-history-item:hover{background:var(--mac-field)}
.ip-history-item .remove-btn{color:var(--text-muted);cursor:pointer;padding:2px 6px;border-radius:4px;font-size:11px}
.ip-history-item .remove-btn:hover{color:var(--err);background:rgba(239,68,68,.1)}
.btn-connect{height:34px;padding:6px 20px;font-size:13px;font-weight:600;border-radius:8px;background:var(--mac-accent);color:#fff;border:none;transition:all .2s;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.btn-connect:hover{opacity:.9;transform:translateY(-1px)}
.btn-connect:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-connect.connected{background:var(--err)}
.btn-connect.danger{background:rgba(248,81,73,.9)}
.btn-config{height:34px;padding:6px 14px;font-size:12px;font-weight:500;border-radius:8px;background:var(--mac-btn);color:var(--text-secondary);border:1px solid var(--mac-line);transition:all .2s;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn-config:hover{background:var(--mac-field);color:var(--text-primary)}
.main-area{flex:1;display:flex;min-height:0;gap:0}
.main-area .terminal-wrapper{flex:1;min-width:0}
.terminal-wrapper{flex:1;min-height:250px;background:#000;border:1px solid var(--mac-line);border-radius:12px;overflow:hidden;box-shadow:var(--mac-shadow)}
#xterm-container{width:100%;height:100%;padding:10px;box-sizing:border-box;overflow:hidden}
#xterm-container .xterm{height:100%;overflow:hidden}
/* 精简版 xterm.css 缺失 .xterm-rows 绝对定位，导致渲染行参与流布局撑开容器、
   fit 无限放大(rows 每轮 +1) —— 必须补回，使行层不撑开 .xterm */
#xterm-container .xterm .xterm-rows{position:absolute;left:0;top:0}
#xterm-container .xterm .xterm-viewport{overflow-y:auto}
.divider{width:5px;flex:none;cursor:col-resize;background:transparent;position:relative;z-index:5;transition:background .15s}
.divider:hover,.divider.dragging{background:var(--mac-accent)}
.file-panel{width:340px;flex:none;background:var(--mac-card);border-left:1px solid var(--mac-line);display:flex;flex-direction:column;min-height:0;transition:width .2s ease,opacity .2s ease}
.file-panel.collapsed{width:0;opacity:0;overflow:hidden;border-left:none}
.fp-head{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-bottom:1px solid var(--mac-line)}
.fp-head .t{font-size:12px;font-weight:700;letter-spacing:.4px;color:var(--text-secondary);display:flex;align-items:center;gap:6px}
.fp-head .t .dot{width:8px;height:8px;border-radius:50%;background:var(--mac-accent)}
.fp-toolbar{display:flex;gap:4px;padding:8px;border-bottom:1px solid var(--mac-line);align-items:center;flex-wrap:wrap}
.fp-toolbar .tbtn{height:28px;min-width:28px;padding:0 8px;background:transparent;border:1px solid transparent;border-radius:6px;color:var(--text-secondary);cursor:pointer;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:4px;transition:all .12s}
.fp-toolbar .tbtn:hover{background:var(--mac-card);color:var(--text-primary);border-color:var(--mac-line)}
.fp-toolbar .tbtn:disabled{opacity:.35;cursor:not-allowed}
.fp-toolbar .tbtn.spacer{flex:1}
.fp-toolbar .tbtn.upload-btn{background:var(--mac-accent);color:#fff;border:none;font-weight:600}
.fp-toolbar .tbtn.upload-btn:hover{opacity:.9}
.fp-path{display:flex;align-items:center;gap:2px;padding:7px 12px;border-bottom:1px solid var(--mac-line);font-size:12px;color:var(--text-secondary);overflow-x:auto;white-space:nowrap;flex:none}
/* 路径栏可编辑：点击进入输入模式，支持直接输入绝对路径（如 /main/app） */
.fp-path.editable{cursor:text}
.fp-path.editable:hover{background:var(--mac-field)}
.fp-path .fp-edit-hint{margin-left:auto;color:var(--text-muted);opacity:.55;font-size:11px;padding:0 4px;cursor:pointer;flex:none}
.fp-path .fp-edit-hint:hover{opacity:1;color:var(--mac-accent)}
.fp-path-input{flex:1;min-width:0;background:var(--mac-field);border:none;outline:none;color:var(--text-primary);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;padding:3px 8px;border-radius:6px}
.fp-path .crumb{padding:2px 6px;border-radius:5px;cursor:pointer;color:var(--text-secondary)}
.fp-path .crumb:hover{background:var(--mac-card);color:var(--text-primary)}
.fp-path .crumb:last-child{color:var(--text-primary);font-weight:600}
.fp-path .sep{color:var(--text-muted)}
.fp-list{flex:1;overflow-y:auto;min-height:0}
.fp-item{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:13px;cursor:pointer;border-left:2px solid transparent;transition:background .12s}
.fp-item:hover{background:var(--mac-field)}
.fp-item .ic{width:18px;text-align:center;font-size:15px;flex:none}
.fp-item .ic.folder{color:#d29922}
.fp-item .ic.file{color:var(--text-muted)}
.fp-item .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fp-item .meta{font-size:11px;color:var(--text-muted);flex:none}
.fp-item .actions{display:none;gap:2px;flex:none}
.fp-item:hover .actions{display:inline-flex}
.fp-item .actions .a{width:24px;height:24px;border:none;background:transparent;border-radius:5px;color:var(--text-secondary);cursor:pointer;font-size:13px;display:inline-flex;align-items:center;justify-content:center}
.fp-item .actions .a:hover{background:var(--mac-field);color:var(--text-primary)}
.fp-item .actions .a.del:hover{color:var(--err);background:rgba(248,81,73,.12)}
.fp-drop{margin:8px;padding:12px 10px;border:1.5px dashed var(--mac-line);border-radius:8px;text-align:center;font-size:12px;color:var(--text-muted);cursor:pointer;transition:all .15s;flex:none}
.fp-drop i{font-size:18px;display:block;margin-bottom:4px;color:var(--text-secondary)}
.fp-drop:hover,.fp-drop.dragover{border-color:var(--mac-accent);background:rgba(63,185,80,.06);color:var(--text-primary)}
.fp-drop.dragover i{color:var(--mac-accent)}
.fp-empty{padding:30px 12px;text-align:center;color:var(--text-muted);font-size:12.5px}
.fp-empty i{font-size:34px;display:block;margin-bottom:8px;opacity:.4}
.monitor{border-top:1px solid var(--mac-line);background:var(--mac-card);display:flex;flex-direction:column;overflow:hidden;transition:max-height .25s ease;max-height:0}
.monitor.connected{max-height:34px}
.monitor.connected.open{max-height:360px}
.monitor .mon-head{display:flex;align-items:center;gap:8px;padding:7px 14px;font-size:11px;color:var(--text-muted);cursor:pointer;user-select:none;flex:none}
.monitor .mon-head .title{font-weight:700;letter-spacing:.4px;color:var(--text-secondary);display:flex;align-items:center;gap:6px}
.monitor .mon-head .title .pulse{width:8px;height:8px;border-radius:50%;background:var(--mac-accent);animation:fpulse 1.4s infinite}
@keyframes fpulse{0%,100%{opacity:1}50%{opacity:.35}}
.monitor .mon-head .live{color:var(--mac-accent);font-size:10px}
.monitor .mon-head .summary{display:none;align-items:center;gap:16px;margin-left:8px;font-size:12px;color:var(--text-secondary);font-family:monospace;overflow:hidden;white-space:nowrap;min-width:0;flex:1}
.monitor:not(.open) .mon-head .summary{display:flex}
.monitor .mon-head .summary .si{display:inline-flex;align-items:center;gap:4px}
.monitor .mon-head .summary .si b{color:var(--text-primary);font-weight:600}
.monitor .mon-head .uptime{margin-left:auto}
.monitor .mon-head .host{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mon-grid{display:none;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;padding:4px 16px 14px;overflow-y:auto;min-height:0;flex:1}
.monitor.open .mon-grid{display:grid}
.mon-card{background:var(--mac-field);border:1px solid var(--mac-line);border-radius:10px;padding:10px 12px}
.mon-card .mc-title{font-size:10.5px;font-weight:700;letter-spacing:.5px;color:var(--text-muted);text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:5px}
.mc-row{display:flex;align-items:center;gap:8px;font-size:12px;margin-bottom:5px}
.mc-row .mc-name{width:38px;font-size:10.5px;color:var(--text-secondary);flex:none}
.mc-row .mc-val{width:64px;text-align:right;font-size:11px;font-family:monospace;flex:none}
.bar{flex:1;height:6px;background:var(--mac-field);border-radius:4px;overflow:hidden;min-width:40px}
.bar>i{display:block;height:100%;border-radius:4px;transition:width .5s ease}
.bar.cpu>i{background:linear-gradient(90deg,#3fb950,#2ea043)}
.bar.mem>i{background:linear-gradient(90deg,#58a6ff,#1f6feb)}
.bar.dsk>i{background:linear-gradient(90deg,#d29922,#9e6a03)}
.core-bar{flex:1;display:flex;gap:2px;height:8px}
.core-bar i{flex:1;background:var(--mac-field);border-radius:2px;overflow:hidden;position:relative}
.core-bar i::after{content:'';position:absolute;left:0;top:0;bottom:0;width:var(--pct,0%);background:linear-gradient(90deg,#3fb950,#2ea043);border-radius:2px;transition:width .5s}
.mc-list{font-size:11.5px;line-height:1.7}
.mc-list .lp{display:flex;gap:6px;align-items:center}
.mc-list .lp .pn{width:8px;height:8px;border-radius:50%;flex:none}
.mc-list .lp b{font-family:monospace;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-list .lp .pv{margin-left:auto;font-family:monospace;color:var(--text-muted);flex:none}
.mc-list .lp .pv.hot{color:var(--err)}
.mctx{font-size:11.5px;color:var(--text-secondary);line-height:1.7}
.mctx .k{color:var(--text-muted);margin-right:6px}
.status-bar{display:flex;align-items:center;justify-content:space-between;padding:6px 14px;font-size:11px;color:var(--text-muted);background:var(--mac-card);border:1px solid var(--mac-line);border-radius:8px;margin-top:8px}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.status-dot.idle{background:#6b7280}
.status-dot.connecting{background:#f59e0b;animation:pulse 1s infinite}
.status-dot.connected{background:#34d399}
.status-dot.error{background:#ef4444}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.welcome-message{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text-muted);font-size:14px;gap:8px}
.welcome-message i{font-size:48px;opacity:.3}

/* ===== 主题切换动画（View Transitions）=====
   默认交叉淡化在渐变背景上会短暂发白，定制为：旧视图淡出 + 新视图淡入(轻缩放)，无白闪 */
::view-transition-old(root){animation:vtFadeOut .3s ease}
::view-transition-new(root){animation:vtFadeIn .3s ease}
@keyframes vtFadeOut{from{opacity:1}to{opacity:0}}
@keyframes vtFadeIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}

/* ===== DocHub 知识文档与 API 调试台 ===== */
#tab-docs .dashboard-header {
  flex: none;
  margin-bottom: 10px;
}
#tab-docs .dashboard-header h1 {
  font-size: 1.35rem;
  margin-bottom: 2px;
}
#tab-docs .dashboard-header p {
  font-size: 0.85rem;
  margin-bottom: 0;
}
.dochub-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 14px;
  height: 100%;
  overflow: hidden;
}
.dochub-sidebar {
  width: 300px;
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--mac-card);
  border: 1px solid var(--mac-line);
  border-radius: var(--mac-radius);
  padding: 12px;
  box-shadow: var(--mac-shadow);
  height: 100%;
  box-sizing: border-box;
}
.dochub-tree {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}
.dochub-cat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dochub-cat-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 4px 8px;
  margin-bottom: 2px;
}
.dochub-item {
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--mac-field);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .15s ease;
}
.dochub-item:hover {
  background: var(--mac-card);
  border-color: var(--mac-line);
}
.dochub-item.active {
  background: rgba(88,166,255,.12);
  border-color: var(--mac-accent);
}
.dochub-item-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.dochub-item-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dochub-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--mac-card);
  border: 1px solid var(--mac-line);
  border-radius: var(--mac-radius);
  padding: 20px;
  box-shadow: var(--mac-shadow);
  overflow-y: auto;
}
.doc-view-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.doc-view-header {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--mac-line);
}
.api-debug-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.api-desc-box {
  background: var(--mac-field);
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--mac-line);
}
.api-param-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.api-param-row:last-child {
  margin-bottom: 0;
}
.type-tag.get { background: rgba(88,166,255,.2); color: #58a6ff; }
.type-tag.post { background: rgba(63,185,80,.2); color: #3fb950; }

/* 接口作用与设计意图框 */
.api-purpose-box {
  background: var(--mac-card);
  border: 1px dashed var(--mac-line);
  border-radius: 6px;
  padding: 8px 12px;
  margin-top: 8px;
}
.api-purpose-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--mac-accent);
  display: block;
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.api-purpose-text {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* 响应 Tab 栏 */
.api-resp-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
}
.api-resp-tab {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all .15s ease;
}
.api-resp-tab:hover {
  background: var(--mac-field);
  color: var(--text-primary);
}
.api-resp-tab.active {
  background: var(--mac-card);
  border-color: var(--mac-line);
  color: var(--mac-accent);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* ============================================================
   最高特异性覆盖：卡片级动态物理呼吸灯 (终极层叠修复)
   ============================================================ */

/* 卡片定位容器基础 */
body .cards .svc-card {
  position: relative !important;
  overflow: visible !important; /* 允许呼吸光晕与小圆点溢出扩散 */
}

/* RUNNING 运行中卡片：极光绿呼吸脉冲 (覆盖应用管理 .is-running 与服务管理 .running) */
body .cards .svc-card.is-running,
body .cards .svc-card.running {
  border-color: rgba(46, 160, 67, 0.45) !important;
  animation: cardRunningBreathUltra 2.8s infinite ease-in-out !important;
}

/* FATAL / BACKOFF / ERROR 异常报错卡片：警示红微光呼吸 */
body .cards .svc-card.fatal,
body .cards .svc-card.backoff,
body .cards .svc-card.error {
  border-color: rgba(248, 81, 73, 0.55) !important;
  animation: cardFatalBreathUltra 2.0s infinite ease-in-out !important;
}

/* 运行中卡片物理 LED 发光灯珠 / 头部状态圆点 */
body .cards .svc-card .card-led-indicator,
body .cards .svc-card .svc-dot {
  border-radius: 50%;
  flex-shrink: 0;
}

body .cards .svc-card .card-led-indicator {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 10px;
  height: 10px;
  z-index: 10;
  pointer-events: none;
}

body .cards .svc-card.is-running .card-led-indicator,
body .cards .svc-card.running .svc-dot {
  background: #39d353 !important;
  box-shadow: 0 0 8px #39d353, 0 0 16px rgba(57, 211, 83, 0.8) !important;
  animation: ledPulseGreenUltra 2.0s infinite cubic-bezier(0.4, 0, 0.6, 1) !important;
}

body .cards .svc-card.fatal .svc-dot,
body .cards .svc-card.backoff .svc-dot,
body .cards .svc-card.error .svc-dot {
  background: #f85149 !important;
  box-shadow: 0 0 8px #f85149, 0 0 16px rgba(248, 81, 73, 0.8) !important;
  animation: ledPulseRedUltra 1.6s infinite cubic-bezier(0.4, 0, 0.6, 1) !important;
}

body .cards .svc-card.is-stopped .card-led-indicator,
body .cards .svc-card.stopped .svc-dot {
  background: #d29922 !important;
  box-shadow: 0 0 6px rgba(210, 153, 34, 0.6) !important;
}

body .cards .svc-card.is-stopped,
body .cards .svc-card.stopped {
  border-color: rgba(210, 153, 34, 0.35) !important;
  box-shadow: 0 0 12px rgba(210, 153, 34, 0.12), 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

/* 极光微光外轮廓扩散动画 (以 !important 彻底击穿全局覆盖) */
@keyframes cardRunningBreathUltra {
  0%, 100% {
    border-color: rgba(46, 160, 67, 0.3) !important;
    box-shadow: 0 0 8px rgba(46, 160, 67, 0.12), 0 0 0 1px rgba(46, 160, 67, 0.18), 0 8px 24px rgba(0, 0, 0, 0.3) !important;
  }
  50% {
    border-color: rgba(63, 185, 80, 0.85) !important;
    box-shadow: 0 0 24px rgba(46, 160, 67, 0.4), 0 0 0 1.5px rgba(63, 185, 80, 0.6), 0 8px 30px rgba(0, 0, 0, 0.4) !important;
  }
}

/* 异常状态红色警示呼吸 */
@keyframes cardFatalBreathUltra {
  0%, 100% {
    border-color: rgba(248, 81, 73, 0.35) !important;
    box-shadow: 0 0 10px rgba(248, 81, 73, 0.15), 0 0 0 1px rgba(248, 81, 73, 0.2), 0 8px 24px rgba(0, 0, 0, 0.3) !important;
  }
  50% {
    border-color: rgba(248, 81, 73, 0.9) !important;
    box-shadow: 0 0 26px rgba(248, 81, 73, 0.45), 0 0 0 1.5px rgba(248, 81, 73, 0.7), 0 8px 30px rgba(0, 0, 0, 0.4) !important;
  }
}

/* LED 灯珠物理膨胀与强光晕扩散 */
@keyframes ledPulseGreenUltra {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
    box-shadow: 0 0 6px #39d353, 0 0 10px rgba(57, 211, 83, 0.5) !important;
  }
  50% {
    transform: scale(1.4);
    opacity: 1;
    box-shadow: 0 0 14px #56d364, 0 0 24px rgba(86, 211, 100, 0.95) !important;
  }
}

/* 红色警示灯珠膨胀与光晕 */
@keyframes ledPulseRedUltra {
  0%, 100% {
    transform: scale(1);
    opacity: 0.85;
    box-shadow: 0 0 6px #f85149, 0 0 12px rgba(248, 81, 73, 0.6) !important;
  }
  50% {
    transform: scale(1.45);
    opacity: 1;
    box-shadow: 0 0 16px #ff7b72, 0 0 28px rgba(255, 123, 114, 0.95) !important;
  }
}

/* 错位律动延迟（支持 running 与 is-running） */
body .cards .svc-card.is-running:nth-child(2n), body .cards .svc-card.running:nth-child(2n) { animation-delay: -0.7s !important; }
body .cards .svc-card.is-running:nth-child(3n), body .cards .svc-card.running:nth-child(3n) { animation-delay: -1.4s !important; }
body .cards .svc-card.is-running:nth-child(4n), body .cards .svc-card.running:nth-child(4n) { animation-delay: -2.1s !important; }
body .cards .svc-card.is-running:nth-child(2n) .card-led-indicator, body .cards .svc-card.running:nth-child(2n) .svc-dot { animation-delay: -0.5s !important; }
body .cards .svc-card.is-running:nth-child(3n) .card-led-indicator, body .cards .svc-card.running:nth-child(3n) .svc-dot { animation-delay: -1.0s !important; }
body .cards .svc-card.is-running:nth-child(4n) .card-led-indicator, body .cards .svc-card.running:nth-child(4n) .svc-dot { animation-delay: -1.5s !important; }