/* CloudSentry V1.2.0 · CS-inc7 UI 重构（苹果设计语言）
   定版口径：V6 效果图设计系统 + V3 间距刻度 + V4 中宽断点 + V6 框体居中布局。
   纯视觉层：类名/结构与 app.js、index.html 的既有契约保持一致。 */

:root{
  --bg:#F5F5F7;
  --ink:#1D1D1F;
  --sub:#6E6E73;
  --faint:#86868B;
  --blue:#0071E3;
  --blue-hover:#0077ED;
  --blue-text:#0060C9;
  --green:#34C759;
  --orange:#FF9500;
  --red:#FF3B30;
  --green-text:#177245;
  --orange-text:#9A5B00;
  --red-text:#D70015;
  --hair:rgba(0,0,0,.06);
  --hair-strong:rgba(0,0,0,.09);
  --card:#FFFFFF;
  --radius:16px;
  --shadow:0 1px 2px rgba(0,0,0,.04);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--ink);font-size:14px;line-height:1.45;
}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{color:var(--blue-text);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:rgba(0,113,227,.18)}
:focus-visible{outline:2px solid rgba(0,113,227,.55);outline-offset:2px;border-radius:6px}

/* ---------- 工具类 ---------- */
.hidden{display:none!important}
.permission-hidden{display:none!important}
.mono{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.muted{color:var(--faint)}
.positive{color:var(--green-text)}
.amber{color:var(--orange-text)}
.coral{color:var(--red-text)}
.danger{color:var(--red-text)}
.empty-state{padding:26px 16px;text-align:center;color:var(--faint);font-size:13.5px}
.drawer-empty{padding:20px 8px;text-align:center;color:var(--faint);font-size:13.5px}
.load-error{padding:18px 12px;text-align:center;color:var(--red-text);font-size:13.5px}
.load-error button{color:var(--blue-text);font-weight:500;margin-left:8px}
.load-error button:hover{text-decoration:underline}

/* ---------- 按钮 ---------- */
.primary-button{
  height:36px;padding:0 17px;border-radius:999px;background:var(--blue);color:#fff;
  font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  transition:background .12s ease;
}
.primary-button:hover{background:var(--blue-hover)}
.primary-button:disabled{opacity:.5;cursor:default}
.primary-button.compact,.secondary-button.compact{height:30px;padding:0 13px;font-size:13px}
.secondary-button{
  height:36px;padding:0 17px;border-radius:999px;background:#fff;border:1px solid rgba(0,0,0,.1);
  color:var(--ink);font-size:14px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  transition:background .12s ease;
}
.secondary-button:hover{background:#FBFBFD}
.secondary-button:disabled{opacity:.5;cursor:default}
.outline-button{
  height:34px;padding:0 15px;border-radius:999px;background:transparent;border:1px solid rgba(0,0,0,.12);
  color:var(--ink);font-size:13.5px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
.outline-button:hover{background:rgba(0,0,0,.03)}
.text-button{color:var(--blue);font-size:13.5px;display:inline-flex;align-items:center;gap:2px;white-space:nowrap;padding:0}
.text-button:hover{text-decoration:underline}
.small-button{
  height:28px;padding:0 11px;border-radius:999px;background:#fff;border:1px solid rgba(0,0,0,.1);
  font-size:12.5px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;flex:none;
}
.small-button:hover{background:#FBFBFD}
.small-button:disabled{opacity:.5;cursor:default}
.icon-button{width:28px;height:28px;border-radius:8px;display:inline-grid;place-items:center;color:var(--sub);flex:none}
.icon-button:hover{background:rgba(0,0,0,.05);color:var(--ink)}
.range-button{
  height:36px;padding:0 15px;border-radius:999px;background:#fff;border:1px solid rgba(0,0,0,.1);
  font-size:13.5px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;color:var(--ink);
}
.range-button:hover{background:#FBFBFD}
.button-icon{font-size:15px;line-height:1}

/* ---------- 表单原语 ---------- */
.search-field{
  display:flex;align-items:center;gap:7px;height:34px;padding:0 13px;flex:0 1 300px;min-width:210px;
  background:rgba(0,0,0,.04);border-radius:999px;color:var(--faint);
}
.search-field input{border:none;background:none;outline:none;font-size:13.5px;color:var(--ink);width:100%}
.search-field input::placeholder{color:var(--faint)}
.data-toolbar select,.billing-scope select,.report-period{
  height:34px;border-radius:999px;border:1px solid rgba(0,0,0,.1);background:#fff;
  padding:0 12px;font-size:13.5px;color:var(--ink);cursor:pointer;
}
.result-count{font-size:13px;color:var(--faint);margin-left:auto;white-space:nowrap}
.result-count b{color:var(--ink);font-weight:500}

/* iOS 式开关 */
.switch{position:relative;width:44px;height:26px;display:inline-block;flex:none;vertical-align:middle}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.switch span{position:absolute;inset:0;border-radius:999px;background:#E4E4E7;transition:background .15s ease}
.switch span::after{
  content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s ease;
}
.switch input:checked + span{background:var(--green)}
.switch input:checked + span::after{transform:translateX(18px)}
.switch input:disabled + span{opacity:.5}

/* ---------- 登录页（效果图未覆盖，按同一设计系统推演） ---------- */
.login-gate{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr;background:var(--bg)}
.login-brand{
  padding:44px 56px;display:flex;flex-direction:column;
  background:linear-gradient(160deg,#FFFFFF 0%,#EDF3FA 58%,#E3EDF9 100%);
  border-right:1px solid var(--hair);
}
.login-brand-lockup{display:flex;align-items:center;gap:11px}
.login-brand-lockup strong{display:block;font-size:19px;font-weight:600;line-height:1.15}
.login-brand-lockup small{display:block;font-size:11px;color:var(--faint);letter-spacing:.04em;margin-top:1px}
.login-context{margin:auto 0}
.login-environment{font-size:12.5px;color:var(--blue-text);font-weight:500;letter-spacing:.03em}
.login-context h1{font-size:40px;font-weight:600;letter-spacing:-.02em;line-height:1.15;margin:14px 0 10px}
.login-context p{font-size:15px;color:var(--sub);max-width:400px;line-height:1.6}
.login-service-state{display:flex;align-items:center;gap:10px;font-size:13px}
.login-service-state i{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}
.login-service-state strong{display:block;font-weight:500}
.login-service-state small{display:block;color:var(--faint);font-size:12px;margin-top:1px}
.login-workspace{display:flex;align-items:center;justify-content:center;padding:40px 32px}
.login-form{
  width:min(400px,100%);background:#fff;border:1px solid var(--hair);border-radius:20px;
  box-shadow:0 12px 40px rgba(0,0,0,.07);padding:34px 34px 28px;
}
.login-form header span{font-size:12px;color:var(--blue-text);font-weight:600;letter-spacing:.06em}
.login-form header h2{font-size:22px;font-weight:600;letter-spacing:-.01em;margin:6px 0 6px}
.login-form header p{font-size:13px;color:var(--sub);line-height:1.55}
.login-form label{display:block;font-size:13px;font-weight:500;margin-top:18px}
.login-form input{
  display:block;width:100%;height:40px;margin-top:7px;padding:0 13px;
  border:1px solid rgba(0,0,0,.14);border-radius:10px;background:#FBFBFD;font-size:14px;outline:none;
}
.login-form input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,113,227,.22);background:#fff}
.otp-input-wrap{position:relative}
.otp-input-wrap span{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--faint)}
.login-error{
  margin-top:16px;padding:10px 13px;border-radius:10px;font-size:13px;font-weight:500;
  background:rgba(255,59,48,.08);color:var(--red-text);
}
.demo-login-badge{
  margin:14px 0 0;padding:9px 13px;border-radius:10px;font-size:12.5px;font-weight:500;text-align:center;
  background:rgba(255,149,0,.12);color:var(--orange-text);
}
.login-submit{width:100%;justify-content:center;height:42px;font-size:15px;margin-top:22px}
.login-submit b{font-weight:400}
.login-form footer{display:flex;gap:8px;align-items:flex-start;margin-top:18px;font-size:12px;color:var(--faint);line-height:1.55}
.shield-mark{
  width:17px;height:17px;border-radius:50%;background:rgba(52,199,89,.16);color:var(--green-text);
  display:inline-grid;place-items:center;font-size:10.5px;font-weight:700;flex:none;margin-top:1px;
}

/* ---------- 应用框体（V6：整体居中，max-width 2000） ---------- */
.app-shell{display:flex;min-height:100vh;max-width:2000px;margin:0 auto}
.app-shell.auth-pending{display:none}
.sidebar{
  width:236px;flex:0 0 236px;position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(22px) saturate(1.7);
  backdrop-filter:blur(22px) saturate(1.7);
  border-right:1px solid var(--hair-strong);
  padding:18px 13px 14px;z-index:5;
}
.brand-lockup{display:flex;align-items:center;gap:10px;padding:2px 8px 16px}
.brand-lockup strong{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.15}
.brand-lockup small{display:block;font-size:11px;color:var(--faint);letter-spacing:.02em;margin-top:1px}
.brand-mark{
  width:32px;height:32px;border-radius:9px;flex:0 0 32px;
  background:linear-gradient(180deg,#2B8AFF,#0066D6);
  display:flex;align-items:flex-end;justify-content:center;gap:2.5px;padding-bottom:8px;
}
.brand-mark span{display:block;width:3.5px;border-radius:2px;background:#fff}
.brand-mark span:nth-child(1){height:7px;opacity:.75}
.brand-mark span:nth-child(2){height:13px}
.brand-mark span:nth-child(3){height:9px;opacity:.85}
.workspace-switcher{
  display:flex;align-items:center;gap:10px;padding:9px 11px;margin:0 2px 14px;
  background:rgba(0,0,0,.03);border-radius:12px;
}
.workspace-avatar{
  width:28px;height:28px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:#fff;border:1px solid var(--hair-strong);color:var(--ink);font-size:13px;font-weight:600;
}
.workspace-copy{flex:1;min-width:0}
.workspace-copy span{display:block;font-size:13px;font-weight:500;white-space:nowrap}
.workspace-copy small{display:block;font-size:11px;color:var(--faint);white-space:nowrap;margin-top:1px}
.workspace-switcher .icon-button{margin-left:auto}
.nav-groups{display:flex;flex-direction:column}
.nav-label{font-size:11px;color:var(--faint);letter-spacing:.08em;padding:9px 10px 5px;font-weight:500}
.nav-label-spaced{padding-top:16px}
.nav-item{
  display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border-radius:9px;
  font-size:14px;color:var(--ink);text-align:left;margin-bottom:1px;transition:background .12s ease;
}
.nav-icon{width:17px;flex:0 0 17px;text-align:center;font-size:15px;color:var(--sub);transition:color .12s ease}
.nav-item:hover{background:rgba(0,0,0,.035)}
.nav-item.active{background:rgba(0,0,0,.055);color:var(--blue);font-weight:500}
.nav-item.active .nav-icon{color:var(--blue)}
.nav-count{margin-left:auto;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.nav-item.active .nav-count{color:var(--blue)}
.nav-count.alert-count{
  min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;
  font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;
}
.sidebar-foot{margin-top:auto}
.status-row{
  border-top:1px solid var(--hair);padding:12px 10px 9px;
  display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--sub);
}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}
.status-dot.offline{background:var(--red)}
.status-dot.inline{width:6px;height:6px;margin-left:4px;vertical-align:2px}
.sidebar-user{display:flex;align-items:center;gap:10px;padding:4px 10px 0}
.user-avatar,.top-avatar{
  width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(180deg,#8E8E93,#636366);color:#fff;font-size:13px;font-weight:500;
}
.sidebar-user strong,.session-identity strong{display:block;font-size:13px;font-weight:500;line-height:1.2;white-space:nowrap}
.sidebar-user small,.session-identity small{display:block;font-size:11.5px;color:var(--faint);white-space:nowrap}
.sidebar-user .icon-button{margin-left:auto}

.main-content{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  height:57px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:0 30px;border-bottom:1px solid var(--hair);
  background:rgba(245,245,247,.78);
  -webkit-backdrop-filter:blur(20px) saturate(1.7);
  backdrop-filter:blur(20px) saturate(1.7);
  position:sticky;top:0;z-index:30;
}
.breadcrumb{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--faint)}
.breadcrumb strong{color:var(--ink);font-weight:500}
.top-actions{display:flex;align-items:center;gap:14px}
.live-indicator{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--sub)}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(52,199,89,.16)}
.top-icon{
  position:relative;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  color:var(--sub);font-size:16px;line-height:1;
}
.top-icon:hover{background:rgba(0,0,0,.05);color:var(--ink)}
.notification-dot{position:absolute;top:5px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--red);border:1.5px solid #fff}
.session-identity{display:flex;align-items:center;gap:9px}
.session-expiry{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.content-wrap{padding:12px 30px 39px;flex:1;width:100%}
.demo-banner{
  margin:0 0 17px;padding:10px 16px;border-radius:12px;text-align:center;
  background:rgba(255,149,0,.12);color:var(--orange-text);font-size:13px;font-weight:500;
}
.footer{
  display:flex;align-items:center;gap:2px;margin-top:22px;padding-top:14px;
  border-top:1px solid var(--hair);font-size:12px;color:var(--faint);
}
.footer-sep{padding:0 6px;opacity:.6}
.footer-spacer{flex:1}
.footer button{color:var(--sub);font-size:12px;margin-left:16px;display:inline-flex;align-items:center}
.footer button:hover{color:var(--ink)}

/* ---------- 视图与页头 ---------- */
.view{display:none}
.view.active-view{display:block;animation:fadein .18s ease}
.dashboard-mode{display:none}
.dashboard-mode.active-mode{display:block}
@keyframes fadein{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.page-header,.hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:8px 0 18px}
.page-header h1,.hero-row h1{font-size:27px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.page-header p,.hero-subtitle{margin-top:4px;font-size:14px;color:var(--sub)}
.page-actions{display:flex;gap:10px;flex:0 0 auto;padding-bottom:2px;align-items:center}
.title-meta{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--faint);margin-bottom:7px}
.live-badge{
  display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;
  background:rgba(52,199,89,.13);color:var(--green-text);font-size:12px;font-weight:500;white-space:nowrap;
}
.live-badge i{width:6px;height:6px;border-radius:50%;background:var(--green);flex:none}
.urgent-badge{
  display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;
  background:rgba(255,59,48,.09);color:var(--red-text);font-size:12px;font-weight:500;white-space:nowrap;
}
/* 分段控件（总览视图切换 / 费用分析切换） */
.view-switch,.analysis-switch{
  display:inline-flex;background:rgba(0,0,0,.05);border-radius:10px;padding:2px;gap:1px;
}
.mode-button,.analysis-tab{
  padding:5px 15px;border-radius:8px;font-size:13px;color:var(--ink);white-space:nowrap;transition:background .12s ease;
}
.mode-button.active,.analysis-tab.active{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.14),0 0 0 1px rgba(0,0,0,.02);font-weight:500}

/* ---------- 卡片与面板 ---------- */
.panel{
  background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px 21px;
}
.panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.panel-header h2{font-size:16.5px;font-weight:600;letter-spacing:-.01em}
.panel-header p{font-size:13px;color:var(--sub);margin-top:2px}
.section-caption{display:flex;align-items:center;gap:12px;margin:22px 0 12px}
.section-caption span{font-size:13px;color:var(--sub);letter-spacing:.05em;font-weight:500;white-space:nowrap}
.section-caption i{flex:1;border-top:1px solid var(--hair)}

/* ---------- 指标卡组 ---------- */
.manager-metrics,.website-summary,.certificate-summary,.billing-summary,.report-stat-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-bottom:17px;
}
.manager-metric,.website-summary article,.certificate-summary article,.billing-summary article,.report-stat-grid article{
  background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px 20px;
}
.manager-metric>span,.website-summary article>span,.certificate-summary article>span,
.billing-summary article>span,.report-stat-grid article>span{
  font-size:13px;color:var(--sub);display:flex;align-items:center;gap:7px;
}
.manager-metric>strong,.website-summary article>strong,.certificate-summary article>strong,
.billing-summary article>strong,.report-stat-grid article>strong{
  display:block;font-size:34px;font-weight:600;letter-spacing:-.025em;line-height:1.1;margin:7px 0 4px;
  font-variant-numeric:tabular-nums;
}
.manager-metric>strong small,.website-summary article>strong small,.certificate-summary article>strong small,
.billing-summary article>strong small,.report-stat-grid article>strong small{
  font-size:16px;font-weight:500;color:var(--faint);letter-spacing:0;margin-left:3px;
}
.manager-metric>p,.website-summary article>p,.certificate-summary article>p,
.billing-summary article>p,.report-stat-grid article>p{font-size:13px;color:var(--sub)}
.billing-summary .billing-total>strong{font-size:38px}
.billing-summary .billing-total>p .text-button{font-size:13px}
/* 汇总条（单卡 + 发丝线分格） */
.summary-strip{
  background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);box-shadow:var(--shadow);
  display:grid;grid-template-columns:repeat(4,1fr);padding:14px 21px;margin-bottom:17px;
}
.summary-strip>div{padding:7px 20px;border-left:1px solid var(--hair)}
.summary-strip>div:first-child{border-left:none;padding-left:2px}
.summary-strip span{font-size:13px;color:var(--sub);display:block}
.summary-strip strong{display:block;font-size:26px;font-weight:600;letter-spacing:-.02em;margin-top:3px;font-variant-numeric:tabular-nums}
.summary-strip small{display:block;font-size:12.5px;color:var(--faint);margin-top:1px}
/* 技术指标（6 卡） */
.technical-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-bottom:17px}
.technical-metrics article{
  background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px 20px;
}
.technical-metrics article>span{font-size:13px;color:var(--sub)}
.technical-metrics article>strong{display:block;font-size:30px;font-weight:600;letter-spacing:-.02em;margin:6px 0 8px;font-variant-numeric:tabular-nums}
.technical-metrics article>p{font-size:12.5px;color:var(--faint);margin-top:8px}
.usage-bar{height:5px;border-radius:3px;background:rgba(0,0,0,.07);overflow:hidden}
.usage-bar i{display:block;height:100%;border-radius:3px;background:var(--blue)}
.technical-metrics .warning .usage-bar i,.drawer-tech-summary .warning .usage-bar i{background:var(--orange)}

/* ---------- 状态点 + 文字 / pill ---------- */
.server-state,.website-state,.agent-state,.cloud-state,.notification-state,.delivery-status{
  display:inline-flex;align-items:center;gap:7px;font-weight:500;white-space:nowrap;font-size:13.5px;
}
.server-state i,.website-state i,.agent-state i,.cloud-state i,.notification-state i,.delivery-status i,
.health-label i{width:8px;height:8px;border-radius:50%;background:#C7C7CC;flex:none}
.server-state.healthy,.website-state.healthy,.agent-state.online,.delivery-status.sent{color:var(--green-text)}
.server-state.healthy i,.website-state.healthy i,.agent-state.online i,.delivery-status.sent i,.health-label.healthy i{background:var(--green)}
.server-state.attention,.website-state.degraded,.agent-state.waiting,.delivery-status.queued,.delivery-status.sending{color:var(--orange-text)}
.server-state.attention i,.website-state.degraded i,.agent-state.waiting i,.health-label.warning i{background:var(--orange)}
.delivery-status.queued i,.delivery-status.sending i{background:var(--blue)}
.server-state.stopped,.agent-state.offline,.agent-state.not_registered,.notification-state.disabled{color:var(--faint)}
.website-state.down,.agent-state.revoked,.delivery-status.failed,.cloud-state.error{color:var(--red-text)}
.website-state.down i,.agent-state.revoked i,.delivery-status.failed i,.cloud-state.error i{background:var(--red)}
.cloud-state.connected i,.cloud-state.ready i,.cloud-state.ok i,.notification-state.enabled i{background:var(--green)}
.notification-state.enabled{color:var(--green-text)}
.health-label{display:inline-flex;align-items:center;gap:7px;font-weight:500;white-space:nowrap}
.health-label.healthy{color:var(--green-text)}
.health-label.warning{color:var(--orange-text)}
.pill{
  display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;
  font-size:12px;font-weight:500;white-space:nowrap;background:rgba(0,0,0,.05);color:var(--sub);
}
.pill.healthy{background:rgba(52,199,89,.14);color:var(--green-text)}
.pill.warning{background:rgba(255,149,0,.13);color:var(--orange-text)}
.pill.muted{background:rgba(0,0,0,.05);color:var(--sub)}
.due-badge{
  display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;
  background:rgba(0,0,0,.05);color:var(--sub);font-size:12px;font-weight:500;white-space:nowrap;
}
.due-badge.soon{background:rgba(255,149,0,.13);color:var(--orange-text)}
.due-badge.urgent{background:rgba(255,59,48,.09);color:var(--red-text)}
.auto-badge{
  display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;
  background:rgba(52,199,89,.14);color:var(--green-text);font-size:12px;font-weight:500;white-space:nowrap;
}
.manual-badge{
  display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;
  background:rgba(0,0,0,.05);color:var(--sub);font-size:12px;font-weight:500;white-space:nowrap;
}
.cost-source{display:block;font-size:11.5px;color:var(--faint);font-weight:400;margin-top:1px}
.asset-muted{color:var(--faint)}

/* ---------- 总览（经典视图） ---------- */
.manager-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:17px;margin-bottom:17px}
.manager-lower-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:17px}
.server-list,.attention-list,.cert-list{display:flex;flex-direction:column}
.server-row{
  display:grid;grid-template-columns:36px minmax(150px,1.2fr) auto minmax(96px,.7fr) minmax(96px,.7fr) 28px;
  gap:14px;align-items:center;padding:12px 2px;border-bottom:1px solid rgba(0,0,0,.045);
}
.server-row:last-child{border-bottom:none;padding-bottom:2px}
.server-row:first-child{padding-top:2px}
.server-icon,.table-icon{
  width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:rgba(0,113,227,.09);color:var(--blue-text);font-size:10.5px;font-weight:700;letter-spacing:.02em;
}
.server-icon.warning{background:rgba(255,149,0,.13);color:var(--orange-text)}
.table-icon.k8s{background:rgba(94,92,230,.1);color:#3D3AB0}
.table-icon.db{background:rgba(0,113,227,.09);color:var(--blue-text)}
.table-icon.vm{background:rgba(0,0,0,.05);color:var(--sub)}
.server-name{min-width:0}
.server-name strong{display:block;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.server-name small{display:block;font-size:12.5px;color:var(--faint);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.server-uptime small,.server-cost small{display:block;font-size:12px;color:var(--faint)}
.server-uptime strong,.server-cost strong{display:block;font-size:14px;font-weight:500;margin-top:1px;font-variant-numeric:tabular-nums}
.server-row>button{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--faint);font-size:15px;
}
.server-row>button:hover{background:rgba(0,0,0,.05);color:var(--ink)}
.attention-list>button{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:12px 2px;border-bottom:1px solid rgba(0,0,0,.045);
}
.attention-list>button:last-of-type{border-bottom:none}
.attention-list>button>span:nth-child(2){flex:1;min-width:0}
.attention-list strong{display:block;font-size:14px;font-weight:500}
.attention-list small{display:block;font-size:12.5px;color:var(--faint);margin-top:1px}
.attention-list em{font-style:normal;color:var(--blue);font-size:13px;flex:none}
.attention-icon{
  width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  font-size:12px;font-weight:700;background:rgba(0,0,0,.05);color:var(--sub);
}
.attention-icon.renewal{background:rgba(0,113,227,.09);color:var(--blue-text)}
.attention-icon.ssl{background:rgba(255,149,0,.13);color:var(--orange-text)}
.attention-icon.alert{background:rgba(255,59,48,.09);color:var(--red-text)}
.attention-count{
  display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;
  background:rgba(0,0,0,.05);color:var(--sub);font-size:12px;font-weight:500;
}
.attention-cta{width:100%;justify-content:center;margin-top:12px}
.cost-summary{
  display:flex;align-items:flex-end;gap:30px;padding-bottom:12px;margin-bottom:4px;
  border-bottom:1px solid rgba(0,0,0,.045);flex-wrap:wrap;
}
.cost-summary>span small{display:block;font-size:12px;color:var(--faint)}
.cost-summary>span strong{display:block;font-size:20px;font-weight:600;letter-spacing:-.01em;margin-top:2px;font-variant-numeric:tabular-nums}
.overview-cost-line{display:block}
.cost-change{font-size:14px;font-weight:500;color:var(--red-text)}
.cost-change.positive{color:var(--green-text)}
.cost-change-note{display:block;font-size:11.5px;color:var(--faint);font-weight:400;margin-top:1px}
.cost-table .cost-head,.cost-table>div>div{
  display:grid;grid-template-columns:minmax(120px,1.4fr) .8fr 1fr .9fr .8fr;gap:14px;align-items:center;
}
.cost-table .cost-head{
  font-size:12px;font-weight:500;color:var(--faint);letter-spacing:.03em;
  padding:0 2px 10px;border-bottom:1px solid var(--hair-strong);
}
.cost-table>div>div{padding:12px 2px;border-bottom:1px solid rgba(0,0,0,.045);font-size:14px}
.cost-table>div>div:last-child{border-bottom:none}
.cost-table b{font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.cost-table em{font-style:normal}
.cost-table em.due-soon{color:var(--orange-text);font-weight:500}
.cert-total{font-size:13px;color:var(--faint)}
.cert-list>div{
  display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid rgba(0,0,0,.045);
}
.cert-list>div:last-child{border-bottom:none;padding-bottom:2px}
.cert-list>div>span:nth-child(2){flex:1;min-width:0}
.cert-list strong{display:block;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cert-list small{display:block;font-size:12.5px;color:var(--faint);margin-top:1px}
.cert-list b{font-weight:500;color:var(--faint);font-size:13px;flex:none}
.cert-state{
  width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:rgba(52,199,89,.13);color:var(--green-text);font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;
}
.cert-state.warning{background:rgba(255,149,0,.14);color:var(--orange-text)}

/* ---------- 总览（技术视图） ---------- */
.technical-grid,.technical-lower-grid{display:grid;grid-template-columns:1fr;gap:17px;margin-bottom:17px}
.infra-head,.tech-node-row{
  display:grid;grid-template-columns:minmax(200px,1.6fr) .5fr .5fr .5fr .8fr;gap:16px;align-items:center;
}
.infra-head{font-size:12px;font-weight:500;color:var(--faint);letter-spacing:.03em;padding:0 2px 10px;border-bottom:1px solid var(--hair-strong)}
.tech-node-row{padding:12px 2px;border-bottom:1px solid rgba(0,0,0,.045);font-size:13.5px;color:var(--sub)}
.tech-node-row:last-child{border-bottom:none}
.tech-node-row strong{display:block;color:var(--ink);font-size:14px;font-weight:500}
.tech-node-row small{display:block;color:var(--faint);font-size:12.5px;margin-top:1px}

/* ---------- 数据表通用 ---------- */
.data-panel{padding:20px 21px}
.data-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.data-table,.website-table,.certificate-table,.renewal-table,.cloud-table,.agent-table,.notification-table{overflow-x:auto}
.table-footer{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-top:14px;font-size:13px;color:var(--faint);
}
.table-footer>div{display:flex;gap:6px}
.table-footer button{
  min-width:28px;height:28px;padding:0 8px;border-radius:8px;font-size:13px;color:var(--sub);
  display:inline-grid;place-items:center;
}
.table-footer button:hover:not(:disabled){background:rgba(0,0,0,.05);color:var(--ink)}
.table-footer button.active{background:var(--ink);color:#fff;font-weight:500}
.table-footer button:disabled{opacity:.4;cursor:default}

/* 服务器表 */
.server-table-head,.server-table-row{
  display:grid;gap:14px;align-items:center;min-width:1020px;
  grid-template-columns:minmax(210px,1.5fr) minmax(96px,.7fr) minmax(130px,.9fr) minmax(110px,.8fr) minmax(110px,.85fr) minmax(100px,.75fr) minmax(104px,.8fr) 28px;
}
.server-table-head{
  font-size:12px;font-weight:500;color:var(--faint);letter-spacing:.03em;
  padding:2px 14px 10px 2px;border-bottom:1px solid var(--hair-strong);
}
.server-table-head span:first-child{padding-left:0}
.server-table-row{
  width:100%;text-align:left;padding:14px 14px 14px 2px;
  border-bottom:1px solid rgba(0,0,0,.045);font-size:14px;transition:background .1s ease;
}
.server-table-row:hover{background:rgba(0,0,0,.018)}
.server-table-row>span{min-width:0}
.asset-cell{display:flex;align-items:center;gap:11px;min-width:0}
.asset-symbol{
  width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:rgba(0,113,227,.09);color:var(--blue-text);font-size:10.5px;font-weight:700;font-style:normal;
}
.asset-symbol.k8s{background:rgba(94,92,230,.1);color:#3D3AB0}
.asset-symbol.vm{background:rgba(0,0,0,.05);color:var(--sub)}
.asset-cell strong{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.asset-cell small{display:block;font-size:12.5px;color:var(--faint);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.server-table-row strong{font-variant-numeric:tabular-nums}

/* 网站表 */
.website-head,.website-row{
  display:grid;gap:14px;align-items:center;min-width:1020px;
  grid-template-columns:minmax(210px,1.5fr) minmax(92px,.7fr) minmax(92px,.65fr) minmax(104px,.75fr) minmax(120px,.95fr) minmax(92px,.65fr) minmax(92px,.7fr) 28px;
}
.website-head{
  font-size:12px;font-weight:500;color:var(--faint);letter-spacing:.03em;
  padding:2px 14px 10px 2px;border-bottom:1px solid var(--hair-strong);
}
.website-row{
  width:100%;text-align:left;padding:14px 14px 14px 2px;
  border-bottom:1px solid rgba(0,0,0,.045);font-size:14px;transition:background .1s ease;
}
.website-row:hover{background:rgba(0,0,0,.018)}
.website-row>span{min-width:0}
.website-row small{display:block;font-size:12.5px;color:var(--faint);margin-top:1px}
.website-domain{display:flex;align-items:center;gap:11px;min-width:0}
.website-domain i{
  width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;font-style:normal;
  background:rgba(0,113,227,.09);color:var(--blue-text);font-size:10px;font-weight:700;
}
.website-domain strong{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cert-days{font-weight:500}
.cert-days.healthy{color:var(--green-text)}
.cert-days.warning{color:var(--orange-text)}

/* ---------- 告警中心 ---------- */
/* 用户点名修正（inc7）：告警列表整体置于白卡内、行间发丝线、选中行卡内浅蓝底强调，
   与证书页表格同一承载方式；工作台面板本身不再作卡，列表与详情各成一卡。 */
.alert-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-bottom:17px}
.alert-stat{
  background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:18px 20px;text-align:left;transition:border-color .12s ease,background .12s ease;
}
.alert-stat>span{font-size:13px;color:var(--sub);display:flex;align-items:center;gap:7px}
.alert-stat>strong{display:block;font-size:30px;font-weight:600;letter-spacing:-.02em;margin:6px 0 3px;font-variant-numeric:tabular-nums}
.alert-stat>small{font-size:12.5px;color:var(--faint)}
.alert-stat.active{border-color:rgba(0,113,227,.45);background:rgba(0,113,227,.035)}
.severity-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.severity-dot.critical{background:var(--red)}
.severity-dot.medium{background:var(--orange)}
.severity-dot.resolved{background:var(--green)}
.alerts-workbench{background:none;border:none;box-shadow:none;padding:0}
.alert-work-grid{display:grid;grid-template-columns:1fr 380px;gap:17px;align-items:start}
.case-list{
  background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:6px 8px;min-height:120px;
}
.case-row{
  display:flex;gap:12px;width:100%;text-align:left;padding:14px 12px;border-radius:10px;
  border-bottom:1px solid rgba(0,0,0,.045);transition:background .1s ease;align-items:stretch;
}
.case-list .case-row:last-child{border-bottom:none}
.case-row:hover{background:rgba(0,0,0,.025)}
.case-row.active{background:rgba(0,113,227,.055)}
.severity-line{width:3.5px;border-radius:2px;flex:none;background:var(--orange)}
.severity-line.critical{background:var(--red)}
.case-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.case-main>span:first-child{display:flex;align-items:center;gap:9px}
.case-main em{font-style:normal;font-size:12.5px;color:var(--sub)}
.case-main small{font-size:12.5px;color:var(--faint);margin-left:auto}
.case-main>strong{font-size:14px;font-weight:500;line-height:1.35}
.case-main>span:last-child{font-size:12.5px;color:var(--faint)}
.risk-pill{
  display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;
  font-size:12px;font-weight:500;white-space:nowrap;flex:none;
}
.risk-pill.critical-tag{background:rgba(255,59,48,.09);color:var(--red-text)}
.risk-pill.medium-tag{background:rgba(255,149,0,.13);color:var(--orange-text)}
.case-detail{
  background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px 21px;
}
.case-detail-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.case-detail-head>div{display:flex;align-items:center;gap:10px}
.case-detail-head .mono{font-size:12.5px;color:var(--faint)}
.case-detail-head>button{color:var(--faint);width:28px;height:28px;border-radius:8px}
.case-detail-head>button:hover{background:rgba(0,0,0,.05);color:var(--ink)}
.case-detail h2{font-size:17px;font-weight:600;letter-spacing:-.01em;margin:14px 0 6px;line-height:1.35}
.case-detail>p{font-size:13.5px;color:var(--sub);line-height:1.6}
.case-detail dl{margin-top:12px}
.case-detail dl>div{
  display:flex;justify-content:space-between;gap:18px;padding:9px 0;
  border-bottom:1px solid rgba(0,0,0,.045);font-size:13.5px;
}
.case-detail dl>div:last-child{border-bottom:none}
.case-detail dt{color:var(--faint);flex:none}
.case-detail dd{text-align:right;font-weight:500}
.evidence{margin-top:12px}
.evidence>span{font-size:12px;color:var(--faint);letter-spacing:.04em}
.evidence code{
  display:block;margin-top:6px;background:rgba(0,0,0,.04);border-radius:10px;
  padding:10px 12px;font-size:13px;font-family:inherit;word-break:break-all;
}
.recommendation{background:rgba(0,113,227,.05);border-radius:12px;padding:12px 14px;margin-top:12px}
.recommendation strong{display:block;font-size:12px;color:var(--blue-text);letter-spacing:.05em;margin-bottom:4px;font-weight:600}
.recommendation p{font-size:13.5px;line-height:1.6}
.detail-actions{display:flex;gap:9px;margin-top:16px;flex-wrap:wrap}

/* ---------- 费用与续费 ---------- */
.billing-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:17px;margin-bottom:17px}
.budget-line{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:2px 2px 12px;margin-bottom:12px;border-bottom:1px solid rgba(0,0,0,.045);font-size:13.5px;color:var(--sub);
}
.budget-line em{
  font-style:normal;display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;
  background:rgba(0,0,0,.05);color:var(--sub);font-size:12px;font-weight:500;white-space:nowrap;
}
.spend-chart{display:flex;align-items:stretch;gap:16px;height:212px;padding:6px 4px 0}
.spend-chart>div{
  flex:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:7px;min-width:0;
}
.spend-chart>div>span{font-size:12.5px;color:var(--sub);font-variant-numeric:tabular-nums;white-space:nowrap}
.spend-chart>div>i{
  display:block;width:min(38px,62%);height:var(--bar,0%);min-height:5px;border-radius:8px 8px 4px 4px;
  background:linear-gradient(180deg,#4DA3FF,#0071E3);
}
.spend-chart>div.current>i{background:var(--blue)}
.spend-chart>div>i.missing{
  height:6px;min-height:6px;
  background:repeating-linear-gradient(45deg,#E4E4E7 0 4px,#F5F5F7 4px,#F5F5F7 8px);
  border:1px dashed #C7C7CC;
}
.spend-chart>div>small{font-size:12.5px;color:var(--faint);display:flex;flex-direction:column;align-items:center;gap:3px}
.trend-prov{
  font-style:normal;display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:999px;
  background:rgba(0,113,227,.09);color:var(--blue-text);font-size:11px;font-weight:500;white-space:nowrap;
}
.donut-wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.cost-donut{
  width:148px;height:148px;border-radius:50%;flex:none;display:grid;place-items:center;position:relative;
}
.cost-donut>span{
  width:62%;height:62%;border-radius:50%;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
}
.cost-donut>span strong{font-size:21px;font-weight:600;line-height:1.1}
.cost-donut>span small{font-size:11.5px;color:var(--faint)}
.provider-legend{flex:1;min-width:190px;display:flex;flex-direction:column}
.provider-legend>div{
  display:flex;align-items:center;gap:10px;padding:8px 2px;
  border-bottom:1px solid rgba(0,0,0,.045);font-size:14px;
}
.provider-legend>div:last-child{border-bottom:none}
.provider-legend i{width:9px;height:9px;border-radius:3px;flex:none}
.provider-legend span{flex:1;min-width:0}
.provider-legend small{display:block;font-size:12.5px;color:var(--faint);margin-top:1px}
.provider-legend strong{font-weight:500;font-variant-numeric:tabular-nums}
.server-cost-table{overflow-x:auto}
.server-cost-head,.server-cost-row{
  display:grid;grid-template-columns:minmax(190px,1.6fr) .8fr .8fr minmax(130px,1fr);gap:14px;align-items:center;min-width:640px;
}
.server-cost-head{
  font-size:12px;font-weight:500;color:var(--faint);letter-spacing:.03em;
  padding:2px 14px 10px 2px;border-bottom:1px solid var(--hair-strong);
}
.server-cost-row{padding:12px 14px 12px 2px;border-bottom:1px solid rgba(0,0,0,.045);font-size:14px}
.server-cost-row:last-child{border-bottom:none}
.server-cost-row strong{font-weight:500}
.server-cost-row small{display:block;font-size:12.5px;color:var(--faint);margin-top:1px}
.server-cost-amount{font-weight:500;font-variant-numeric:tabular-nums}
.cost-badge{
  display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;
  font-size:12px;font-weight:500;white-space:nowrap;
}
.cost-badge.billing{background:rgba(0,113,227,.09);color:var(--blue-text)}
.cost-badge.manual{background:rgba(0,0,0,.05);color:var(--sub)}
.cost-badge.none{background:transparent;border:1px solid var(--hair-strong);color:var(--faint)}
.cost-covered-note{display:block;font-size:12px;color:var(--faint);margin-top:3px}
.billing-total-line{font-weight:500}
.unattributed-line{margin-top:12px;font-size:13px;color:var(--sub)}
.other-services{margin-top:18px;border-top:1px solid var(--hair);padding-top:14px}
.other-services-head h3{font-size:15px;font-weight:600}
.other-services-head p{font-size:12.5px;color:var(--faint);margin-top:2px}
.other-services-currency{font-size:13px;font-weight:600;margin:14px 0 4px}
.other-services-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:8px 2px;border-bottom:1px solid rgba(0,0,0,.045);font-size:14px;
}
.other-services-row.head{
  font-size:12px;font-weight:500;color:var(--faint);letter-spacing:.03em;
  padding-bottom:8px;border-bottom:1px solid var(--hair-strong);
}
.other-services-row.total{font-weight:600;border-bottom:none;border-top:1px solid var(--hair-strong);margin-top:2px}
.os-amount{font-variant-numeric:tabular-nums;font-weight:500}
.billing-disabled-note{font-size:13px;color:var(--faint)}

/* 费用分析（inc5 三视图） */
.analysis-switch{flex:none}
.analysis-body,.analysis-svg{display:block}
.analysis-svg{width:100%;height:auto}
.analysis-svg text{font-family:inherit}
.an-axis{fill:#AEAEB2}
.an-month{fill:var(--sub);font-size:12px}
.an-value{fill:var(--ink);font-weight:600}
.an-prov{fill:var(--orange-text);font-size:11.5px}
.an-nodata{fill:var(--faint);font-size:12px}
.an-nodata-box{fill:none;stroke:#C7C7CC;stroke-dasharray:4 4}
.analysis-note{font-size:12.5px;color:var(--faint);margin:2px 0 10px}
.analysis-foot{font-size:12.5px;color:var(--faint);margin-top:10px}
.analysis-legend{display:flex;flex-direction:column;margin-top:10px}
.analysis-legend-row{
  display:flex;align-items:center;gap:10px;padding:8px 2px;
  border-bottom:1px solid rgba(0,0,0,.045);font-size:14px;
}
.analysis-legend-row:last-child{border-bottom:none}
.analysis-legend-row i{width:9px;height:9px;border-radius:3px;flex:none}
.al-name{flex:1;min-width:0}
.al-pct{color:var(--faint);font-size:13px;width:52px;text-align:right;font-variant-numeric:tabular-nums}
.al-amount,.arr-amount{font-weight:500;font-variant-numeric:tabular-nums}
.al-amount{width:96px;text-align:right}
.analysis-legendline{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--sub);margin-bottom:8px;
}
.analysis-legendline>span{display:inline-flex;align-items:center;gap:6px}
.analysis-legendline i{width:9px;height:9px;border-radius:3px;flex:none}
.analysis-note-inline{margin-left:auto;color:var(--faint)}
.analysis-ranks{display:flex;flex-direction:column;gap:2px}
.analysis-rank-row{width:100%;text-align:left;padding:9px 12px;border-radius:12px;display:block}
button.analysis-rank-row:hover{background:rgba(0,0,0,.025)}
.analysis-rank-row.active{background:rgba(0,113,227,.055)}
.analysis-rank-row.rest{color:var(--sub);cursor:default}
.arr-top{display:flex;align-items:baseline;gap:12px}
.arr-name{flex:1;min-width:0;font-weight:500}
.arr-track{display:block;height:9px;border-radius:5px;background:rgba(0,0,0,.05);overflow:hidden;margin-top:6px}
.arr-track i{display:block;height:100%;border-radius:5px;background:var(--blue)}
.analysis-drill-title{font-size:14.5px;font-weight:600;margin:18px 0 8px}

/* 续费计划 */
.renewal-head{align-items:center}
.renewal-filters{display:flex;gap:8px;flex-wrap:wrap}
.renew-filter{
  height:30px;padding:0 13px;border-radius:999px;font-size:13px;color:var(--ink);
  background:#fff;border:1px solid rgba(0,0,0,.09);display:inline-flex;align-items:center;white-space:nowrap;flex:none;
}
.renew-filter.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.renew-filter:disabled{opacity:.45;cursor:default}
.renewal-table{overflow-x:auto}
.renewal-table-head,.renewal-row{
  display:grid;gap:14px;align-items:center;min-width:900px;
  grid-template-columns:minmax(200px,1.5fr) .7fr .95fr .7fr .85fr .75fr 56px;
}
.renewal-table-head{
  font-size:12px;font-weight:500;color:var(--faint);letter-spacing:.03em;
  padding:2px 14px 10px 2px;border-bottom:1px solid var(--hair-strong);
}
.renewal-row{padding:12px 14px 12px 2px;border-bottom:1px solid rgba(0,0,0,.045);font-size:14px}
.renewal-row:last-child{border-bottom:none}
.renew-resource{display:flex;align-items:center;gap:11px;min-width:0}
.renew-resource strong{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.renew-resource small{display:block;font-size:12.5px;color:var(--faint);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.renew-date{display:block;font-size:12.5px;color:var(--faint);font-weight:400;margin-top:2px}
.renew-cost{font-weight:500;font-variant-numeric:tabular-nums}

/* ---------- SSL 证书 ---------- */
.certificate-head,.certificate-row{
  display:grid;gap:14px;align-items:center;min-width:1080px;
  grid-template-columns:minmax(210px,1.25fr) .75fr .85fr .9fr .75fr .55fr .6fr .55fr;
}
.certificate-head{
  font-size:12px;font-weight:500;color:var(--faint);letter-spacing:.03em;
  padding:2px 14px 10px 2px;border-bottom:1px solid var(--hair-strong);
}
.certificate-row{padding:14px 14px 14px 2px;border-bottom:1px solid rgba(0,0,0,.045);font-size:14px}
.certificate-row:last-child{border-bottom:none}
.certificate-row>span{min-width:0}
.certificate-row small{display:block;font-size:12.5px;color:var(--faint);margin-top:1px}
.certificate-row .domain-cell{display:flex;align-items:center;gap:11px;min-width:0}
.domain-cell i{
  width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;font-style:normal;
  background:rgba(0,113,227,.09);color:var(--blue-text);font-size:10px;font-weight:700;
}
.domain-cell strong{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.domain-cell small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cert-badge{
  display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;
  font-size:12px;font-weight:500;white-space:nowrap;background:rgba(52,199,89,.14);color:var(--green-text);
}
.cert-badge.expiring{background:rgba(255,149,0,.13);color:var(--orange-text)}
.cert-reminder{display:block;font-size:12px;color:var(--orange-text);margin-top:3px;font-weight:500}
.cert-reminder.escalated{color:var(--red-text)}
.cert-renew{color:var(--blue);font-size:13.5px;white-space:nowrap;flex:none}
.cert-renew:hover{text-decoration:underline}
.cert-renew:disabled{opacity:.5}
.row-more{
  width:28px;height:28px;border-radius:8px;display:inline-grid;place-items:center;
  color:var(--faint);font-size:14px;flex:none;white-space:nowrap;
}
.row-more:hover{background:rgba(0,0,0,.05);color:var(--ink)}

/* ---------- 审计报告（效果图未覆盖，按同一设计系统推演） ---------- */
.report-hero{
  background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:space-between;gap:26px;
  padding:24px 26px;margin-bottom:17px;
}
.report-kicker{font-size:11px;font-weight:600;letter-spacing:.09em;color:var(--blue-text)}
.report-hero h2{font-size:24px;font-weight:600;letter-spacing:-.015em;margin:7px 0 5px}
.report-hero p{font-size:13.5px;color:var(--sub);max-width:560px;line-height:1.6}
.report-score{text-align:right;flex:none}
.report-score span{display:block;font-size:12.5px;color:var(--faint)}
.report-score strong{display:block;font-size:40px;font-weight:600;letter-spacing:-.025em;line-height:1.1;margin-top:3px}
.report-score small{display:block;font-size:12.5px;color:var(--sub);margin-top:2px}
.report-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin-bottom:17px}
.report-priority{
  display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;
  background:rgba(255,149,0,.13);color:var(--orange-text);font-size:12px;font-weight:500;
}
.report-action-list{display:flex;flex-direction:column}
.report-action-list>div{
  display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid rgba(0,0,0,.045);
}
.report-action-list>div:last-child{border-bottom:none;padding-bottom:2px}
.report-action-list>div>span:nth-child(2){flex:1;min-width:0}
.report-action-list strong{display:block;font-size:14px;font-weight:500}
.report-action-list small{display:block;font-size:12.5px;color:var(--faint);margin-top:1px}
.report-action-list b{
  margin-left:auto;flex:none;display:inline-flex;align-items:center;height:22px;padding:0 9px;
  border-radius:999px;background:rgba(0,0,0,.05);color:var(--sub);font-size:12px;font-weight:500;
}
.change-list{display:flex;flex-direction:column}
.change-list>div{
  display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid rgba(0,0,0,.045);
}
.change-list>div:last-child{border-bottom:none;padding-bottom:2px}
.change-list>div>span:nth-child(2){flex:1;min-width:0}
.change-list strong{display:block;font-size:14px;font-weight:500}
.change-list small{display:block;font-size:12.5px;color:var(--faint);margin-top:1px}
.change-list b{font-weight:500;font-variant-numeric:tabular-nums}
.change-icon{
  width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;
  font-size:13px;font-weight:700;background:rgba(0,0,0,.05);color:var(--sub);
}
.change-icon.up{background:rgba(255,59,48,.09);color:var(--red-text)}
.change-icon.down{background:rgba(52,199,89,.14);color:var(--green-text)}
.report-table{overflow-x:auto}
.report-table>div{
  display:grid;grid-template-columns:minmax(170px,1.6fr) .7fr .7fr .9fr;gap:14px;align-items:center;
  padding:11px 2px;border-bottom:1px solid rgba(0,0,0,.045);font-size:14px;min-width:520px;
}
.report-table>div:first-child{
  font-size:12px;font-weight:500;color:var(--faint);letter-spacing:.03em;padding-top:0;
  border-bottom:1px solid var(--hair-strong);
}
.report-table>div:last-child{border-bottom:none}
.report-table strong{font-weight:500}
.report-table b{font-weight:500;text-align:right}
.availability-list{display:flex;flex-direction:column}
.availability-list>div{
  display:grid;grid-template-columns:1fr auto;gap:5px 14px;align-items:center;
  padding:11px 2px;border-bottom:1px solid rgba(0,0,0,.045);
}
.availability-list>div:last-child{border-bottom:none;padding-bottom:2px}
.availability-list strong{display:block;font-weight:500;font-size:14px}
.availability-list small{display:block;font-size:12.5px;color:var(--faint);margin-top:1px}
.availability-list b{font-weight:500;font-variant-numeric:tabular-nums}
.availability-list>div>i{
  grid-column:1/-1;display:block;height:5px;border-radius:3px;background:rgba(0,0,0,.06);overflow:hidden;
}
.availability-list>div>i em{display:block;height:100%;border-radius:3px;background:var(--green)}
.availability-list>div>i em.warn{background:var(--orange)}
.report-footnote{
  display:flex;align-items:center;gap:16px;margin-top:4px;font-size:12.5px;color:var(--faint);flex-wrap:wrap;
}
.report-footnote button{color:var(--blue);font-size:12.5px}
.report-footnote button:hover{text-decoration:underline}

/* ---------- 接入管理 ---------- */
.cloud-panel-header,.agent-panel-header{align-items:center}
.cloud-header-actions{display:flex;align-items:center;gap:12px}
.cloud-header-actions>span{font-size:13px;color:var(--faint)}
.cloud-table-head,.cloud-row{
  display:grid;gap:14px;align-items:center;min-width:920px;
  grid-template-columns:minmax(200px,1.5fr) .6fr minmax(120px,1fr) .55fr minmax(120px,1fr) minmax(110px,.9fr) minmax(110px,.85fr);
}
.cloud-table-head{
  font-size:12px;font-weight:500;color:var(--faint);letter-spacing:.03em;
  padding:2px 14px 10px 2px;border-bottom:1px solid var(--hair-strong);
}
.cloud-row{padding:13px 14px 13px 2px;border-bottom:1px solid rgba(0,0,0,.045);font-size:14px}
.cloud-row:last-child{border-bottom:none}
.cloud-row>span{min-width:0}
.cloud-row strong{font-weight:500}
.cloud-row small{display:block;font-size:12.5px;color:var(--faint);margin-top:1px}
.cloud-account{display:flex;align-items:center;gap:11px;min-width:0}
.cloud-account i{
  min-width:34px;height:30px;padding:0 8px;border-radius:9px;flex:none;display:grid;place-items:center;
  font-style:normal;font-size:11px;font-weight:700;background:rgba(0,0,0,.05);color:var(--sub);
}
.cloud-account i.aliyun{background:rgba(255,106,0,.12);color:#B34E00}
.cloud-account i.aws{background:rgba(0,0,0,.06);color:var(--ink)}
.cloud-account i.tencent{background:rgba(0,113,227,.09);color:var(--blue-text)}
.cloud-account strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cloud-actions{display:flex;gap:6px;flex-wrap:wrap}
.cloud-empty{padding:28px 16px;text-align:center}
.cloud-empty strong{display:block;font-size:14px;font-weight:500;color:var(--ink)}
.cloud-empty small{display:block;font-size:12.5px;color:var(--faint);margin-top:3px}
.agent-table-head,.agent-row{
  display:grid;gap:14px;align-items:center;min-width:840px;
  grid-template-columns:minmax(200px,1.5fr) .85fr minmax(120px,1fr) .7fr minmax(120px,1fr) minmax(120px,.95fr);
}
.agent-table-head{
  font-size:12px;font-weight:500;color:var(--faint);letter-spacing:.03em;
  padding:2px 14px 10px 2px;border-bottom:1px solid var(--hair-strong);
}
.agent-row{padding:13px 14px 13px 2px;border-bottom:1px solid rgba(0,0,0,.045);font-size:14px}
.agent-row:last-child{border-bottom:none}
.agent-row>span{min-width:0}
.agent-row small{display:block;font-size:12.5px;color:var(--faint);margin-top:1px}
.agent-server{display:flex;align-items:center;gap:11px;min-width:0}
.agent-server i{
  width:34px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;font-style:normal;
  background:rgba(0,113,227,.09);color:var(--blue-text);font-size:10px;font-weight:700;letter-spacing:.03em;
}
.agent-server strong{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agent-key-state b{font-weight:500}
.agent-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.settings-lower-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin-top:17px}
.settings-lower-grid .notification-panel{grid-column:1/-1}
.audit-list{display:flex;flex-direction:column}
.audit-row{
  display:flex;align-items:center;gap:11px;padding:10px 2px;border-bottom:1px solid rgba(0,0,0,.045);font-size:13.5px;
}
.audit-row:last-child{border-bottom:none;padding-bottom:2px}
.audit-row>i{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}
.audit-row.denied>i{background:var(--red)}
.audit-row>span{flex:1;min-width:0}
.audit-row strong{display:block;font-weight:500}
.audit-row small{display:block;font-size:12.5px;color:var(--faint);margin-top:1px}
.audit-row time{font-size:12.5px;color:var(--faint);flex:none}
.audit-empty{padding:20px 8px;text-align:center;color:var(--faint);font-size:13.5px}
.agent-policy-panel dl{display:flex;flex-direction:column}
.agent-policy-panel dl>div{
  display:flex;justify-content:space-between;gap:18px;padding:9px 0;
  border-bottom:1px solid rgba(0,0,0,.045);font-size:13.5px;
}
.agent-policy-panel dl>div:last-child{border-bottom:none}
.agent-policy-panel dt{color:var(--faint)}
.agent-policy-panel dd{font-weight:500;text-align:right}
.policy-state{
  display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;
  background:rgba(52,199,89,.14);color:var(--green-text);font-size:12px;font-weight:500;
}
.notification-table-head,.notification-row{
  display:grid;gap:14px;align-items:center;min-width:880px;
  grid-template-columns:minmax(170px,1.25fr) .55fr minmax(180px,1.35fr) .65fr minmax(190px,1.25fr);
}
.notification-delivery-head,.notification-delivery-row{
  display:grid;gap:14px;align-items:center;min-width:760px;
  grid-template-columns:minmax(170px,1.3fr) minmax(130px,1fr) .7fr .6fr .9fr;
}
.notification-table-head,.notification-delivery-head{
  font-size:12px;font-weight:500;color:var(--faint);letter-spacing:.03em;
  padding:2px 14px 10px 2px;border-bottom:1px solid var(--hair-strong);
}
.notification-row,.notification-delivery-row{
  padding:13px 14px 13px 2px;border-bottom:1px solid rgba(0,0,0,.045);font-size:14px;
}
.notification-row:last-child,.notification-delivery-row:last-child{border-bottom:none}
.notification-row>span,.notification-delivery-row>span{min-width:0}
.notification-row strong,.notification-delivery-row strong{font-weight:500}
.notification-row small{display:block;font-size:12.5px;color:var(--faint);margin-top:1px}
.notification-row>small{
  display:block;font-size:13px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.notification-actions{display:flex;gap:2px;flex-wrap:nowrap}
.notification-actions button{
  padding:5px 8px;border-radius:8px;font-size:13px;color:var(--blue);white-space:nowrap;flex:none;
}
.notification-actions button:hover{background:rgba(0,113,227,.07)}
.notification-actions button.danger{color:var(--red-text)}
.notification-actions button.danger:hover{background:rgba(255,59,48,.07)}
.notification-actions button:disabled{opacity:.5}
.delivery-error{display:block;font-size:12px;color:var(--red-text);margin-top:2px;word-break:break-all}

/* ---------- 抽屉（效果图未覆盖，按同一设计系统推演） ---------- */
.drawer-backdrop{
  position:fixed;inset:0;background:rgba(29,29,31,.34);z-index:40;
  opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s;
}
.drawer-backdrop.open{opacity:1;visibility:visible}
.server-drawer,.website-drawer{
  position:fixed;top:0;right:0;height:100vh;z-index:41;overflow-y:auto;
  background:#fff;border-left:1px solid var(--hair-strong);
  box-shadow:-16px 0 44px rgba(0,0,0,.14);
  transform:translateX(103%);transition:transform .26s ease;
}
.server-drawer{width:min(560px,calc(100vw - 56px))}
.website-drawer{width:min(590px,calc(100vw - 56px));z-index:43}
.server-drawer.open,.website-drawer.open{transform:none}
body.drawer-open{overflow:hidden}
.drawer-header{
  display:flex;align-items:center;gap:12px;padding:18px 20px;
  border-bottom:1px solid var(--hair);position:sticky;top:0;background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:2;
}
.drawer-server-icon{
  width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:rgba(0,113,227,.09);color:var(--blue-text);font-size:12px;font-weight:700;
}
.drawer-server-icon.website{background:rgba(94,92,230,.1);color:#3D3AB0}
.drawer-header>div:nth-child(2){flex:1;min-width:0}
.drawer-title-line{display:flex;align-items:center;gap:10px}
.drawer-title-line h2{font-size:17px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drawer-header p{font-size:12.5px;color:var(--faint);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drawer-close{
  width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(0,0,0,.05);color:var(--sub);font-size:16px;line-height:1;
}
.drawer-close:hover{background:rgba(0,0,0,.09);color:var(--ink)}
.server-state,.website-state{font-size:13px}
.drawer-tabs{display:flex;gap:6px;padding:12px 20px 0}
.drawer-tab{padding:6px 14px;border-radius:999px;font-size:13.5px;color:var(--sub)}
.drawer-tab:hover{background:rgba(0,0,0,.04)}
.drawer-tab.active{background:rgba(0,0,0,.06);color:var(--ink);font-weight:500}
.drawer-panel{display:none;padding:6px 20px 26px}
.drawer-panel.active{display:block}
.website-drawer-body{padding:6px 20px 26px}
.drawer-health{
  display:flex;align-items:center;gap:16px;background:rgba(0,113,227,.05);
  border-radius:14px;padding:14px 16px;margin-top:12px;
}
.drawer-health>div:first-child{flex:none;min-width:96px}
.drawer-health span{display:block;font-size:12.5px;color:var(--sub)}
.drawer-health strong{display:block;font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.drawer-health p{font-size:13px;color:var(--sub);line-height:1.55}
.drawer-section{margin-top:22px}
.drawer-section-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:6px}
.drawer-section-head h3,.drawer-section>h3{font-size:14.5px;font-weight:600}
.drawer-section-head span{font-size:12.5px;color:var(--faint)}
.drawer-section-head button{color:var(--blue);font-size:13px}
.drawer-section-head button:hover{text-decoration:underline}
.server-facts{display:flex;flex-direction:column}
.server-facts>div{
  display:flex;justify-content:space-between;gap:20px;padding:9px 0;
  border-bottom:1px solid rgba(0,0,0,.045);font-size:13.5px;
}
.server-facts>div:last-child{border-bottom:none}
.server-facts dt{color:var(--faint);flex:none}
.server-facts dd{font-weight:500;text-align:right;min-width:0}
.drawer-finance{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  background:rgba(0,0,0,.025);border-radius:14px;padding:14px 16px;
}
.drawer-finance span{display:block;font-size:12px;color:var(--faint)}
.drawer-finance strong{display:block;font-size:16px;font-weight:600;margin-top:3px;font-variant-numeric:tabular-nums}
.linked-sites{display:flex;flex-direction:column}
.linked-sites>button,.linked-sites>div{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;
  padding:9px 0;border-bottom:1px solid rgba(0,0,0,.045);font-size:13.5px;
}
.linked-sites>button:last-child,.linked-sites>div:last-child{border-bottom:none}
.drawer-alert{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:rgba(255,59,48,.06);border-radius:12px;padding:12px 14px;
}
.drawer-alert>span:nth-child(2){flex:1;min-width:0}
.drawer-alert strong{display:block;font-size:13.5px;font-weight:500}
.drawer-alert small{display:block;font-size:12.5px;color:var(--faint);margin-top:1px}
.drawer-alert em{font-style:normal;color:var(--blue);font-size:13px;flex:none}
.drawer-tech-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.drawer-tech-summary article{background:rgba(0,0,0,.025);border-radius:14px;padding:12px 14px}
.drawer-tech-summary span{font-size:12px;color:var(--faint)}
.drawer-tech-summary strong{display:block;font-size:20px;font-weight:600;margin:3px 0 8px;font-variant-numeric:tabular-nums}
.drawer-chart{width:100%;height:auto;display:block;margin-top:6px}
.drawer-chart .grid-lines line{stroke:rgba(0,0,0,.06);stroke-width:1}
.tech-line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cpu-line{stroke:var(--blue)}
.memory-line{stroke:#5E5CE6}
.disk-line{stroke:var(--orange)}
.tech-legend{display:flex;gap:16px;font-size:12.5px;color:var(--sub);margin-top:8px}
.tech-legend span{display:inline-flex;align-items:center;gap:6px}
.tech-legend i{width:8px;height:8px;border-radius:50%;display:inline-block}
.tech-legend i.cpu{background:var(--blue)}
.tech-legend i.memory{background:#5E5CE6}
.tech-legend i.disk{background:var(--orange)}
.metrics-state{font-size:12.5px;color:var(--faint)}
.site-health-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.site-health-grid article{background:rgba(0,0,0,.025);border-radius:14px;padding:12px 14px}
.site-health-grid span{font-size:12px;color:var(--faint)}
.site-health-grid strong{display:block;font-size:21px;font-weight:600;margin-top:3px;font-variant-numeric:tabular-nums}
.site-health-grid strong small{font-size:13px;color:var(--faint);font-weight:500;margin-left:2px}
.site-health-grid small{font-size:12px;color:var(--faint)}
.probe-list{display:flex;flex-direction:column}
.probe-list>div{
  display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid rgba(0,0,0,.045);font-size:13.5px;
}
.probe-list>div:last-child{border-bottom:none}
.probe-list>div>span:nth-child(2){flex:1;min-width:0}
.probe-list strong{display:block;font-weight:500}
.probe-list small{display:block;font-size:12.5px;color:var(--faint);margin-top:1px}
.probe-list b{font-weight:500}
.probe-list em{font-style:normal;font-size:12.5px;color:var(--faint)}
.region-flag{
  width:32px;height:23px;border-radius:6px;flex:none;display:grid;place-items:center;
  font-size:10px;font-weight:700;background:rgba(0,0,0,.05);color:var(--sub);
}
.flag-cn{background:rgba(222,41,16,.1);color:#B02A18}
.flag-sg{background:rgba(222,41,16,.07);color:#B02A18}
.flag-us{background:rgba(0,113,227,.09);color:var(--blue-text)}
.flag-de{background:rgba(255,149,0,.13);color:var(--orange-text)}
.site-cert-button{margin-top:12px}
.site-incident{
  display:flex;align-items:center;gap:11px;background:rgba(255,59,48,.06);
  border-radius:12px;padding:12px 14px;
}
.site-incident>span:nth-child(2){flex:1;min-width:0}
.site-incident strong{display:block;font-size:13.5px;font-weight:500}
.site-incident small{display:block;font-size:12.5px;color:var(--faint);margin-top:1px}
.site-incident button{color:var(--blue);font-size:13px;flex:none}
.site-incident button:hover{text-decoration:underline}

/* ---------- 对话框（效果图未覆盖，按同一设计系统推演） ---------- */
dialog{
  margin:auto;
  border:1px solid var(--hair);border-radius:20px;padding:0;background:#fff;color:var(--ink);
  width:min(520px,calc(100vw - 32px));box-shadow:0 24px 70px rgba(0,0,0,.22);
}
dialog::backdrop{background:rgba(29,29,31,.38)}
.management-dialog{width:min(660px,calc(100vw - 32px))}
.agent-dialog form,.credential-dialog>div{padding:22px 24px}
.agent-dialog form>header,.credential-dialog header{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px;
}
.agent-dialog h2{font-size:18px;font-weight:600;letter-spacing:-.01em}
.agent-dialog header p{font-size:13px;color:var(--sub);margin-top:3px;line-height:1.55}
.agent-dialog header button,.credential-dialog header button{
  width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(0,0,0,.05);color:var(--sub);font-size:16px;line-height:1;
}
.agent-dialog header button:hover,.credential-dialog header button:hover{background:rgba(0,0,0,.09);color:var(--ink)}
.agent-dialog label{display:block;font-size:13px;font-weight:500;margin-bottom:13px}
.agent-dialog label small{display:block;font-weight:400;font-size:12px;color:var(--faint);margin-top:2px;line-height:1.5}
.agent-dialog input[type="text"],.agent-dialog input[type="url"],.agent-dialog input[type="email"],
.agent-dialog input[type="password"],.agent-dialog input[type="number"],.agent-dialog input[type="date"],
.agent-dialog input:not([type]),.agent-dialog select,.agent-dialog textarea{
  display:block;width:100%;height:38px;margin-top:6px;padding:0 12px;
  border:1px solid rgba(0,0,0,.13);border-radius:10px;background:#FBFBFD;font-size:14px;outline:none;
}
.agent-dialog textarea{height:auto;min-height:64px;padding:9px 12px;resize:vertical;line-height:1.5}
.agent-dialog input:focus,.agent-dialog select:focus,.agent-dialog textarea:focus{
  border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,113,227,.22);background:#fff;
}
.agent-dialog label:has(> input[type="checkbox"]){
  display:flex;align-items:center;gap:8px;font-weight:400;cursor:pointer;
}
.agent-dialog input[type="checkbox"]{width:16px;height:16px;accent-color:var(--blue);flex:none}
.management-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.management-fields .field-wide{grid-column:1/-1}
.management-note{
  grid-column:1/-1;background:rgba(0,113,227,.05);border-radius:10px;
  padding:10px 12px;font-size:12.5px;color:var(--sub);line-height:1.55;margin-bottom:13px;
}
.field-hint{color:var(--orange-text)!important}
.agent-dialog form>footer,.credential-dialog footer{
  display:flex;justify-content:flex-end;gap:9px;margin-top:18px;align-items:center;
}
.agent-dialog form>footer .secondary-button.hidden{display:none}
#notification-channel-test{margin-right:auto}
.credential-kicker{
  display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;
  background:rgba(255,149,0,.13);color:var(--orange-text);font-size:12px;font-weight:500;margin-bottom:8px;
}
.credential-warning{
  background:rgba(255,149,0,.1);border-radius:12px;padding:12px 14px;
  font-size:13px;line-height:1.6;color:var(--orange-text);margin-bottom:16px;
}
.credential-fields label{display:block;font-size:13px;font-weight:500;margin-bottom:13px}
.credential-fields code{
  display:block;margin-top:6px;background:rgba(0,0,0,.04);border-radius:10px;
  padding:10px 12px;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:12.5px;word-break:break-all;line-height:1.55;
}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);z-index:90;
  background:rgba(29,29,31,.93);color:#fff;font-size:13.5px;
  padding:11px 19px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.25);
  opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease;
  max-width:min(640px,calc(100vw - 40px));text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- 响应式 ---------- */
/* V4 中宽适配：1500px 以下总览服务器行指标整组换到第二行 */
@media (max-width:1500px){
  .server-row{grid-template-columns:36px minmax(170px,1fr) auto 28px}
  .server-row>button{grid-column:4;grid-row:1/span 2}
  .server-uptime{grid-column:2;grid-row:2}
  .server-cost{grid-column:3;grid-row:2}
}
@media (max-width:1180px){
  .sidebar{width:206px;flex-basis:206px;padding:17px 10px 13px}
  .content-wrap{padding-bottom:35px}
  .manager-metrics,.website-summary,.certificate-summary,.billing-summary,.report-stat-grid{gap:13px}
  .manager-metric>strong,.website-summary article>strong,.certificate-summary article>strong,
  .billing-summary article>strong,.report-stat-grid article>strong{font-size:29px}
  .panel{padding:17px 18px}
  .manager-grid,.manager-lower-grid,.billing-grid{grid-template-columns:1fr 1fr}
  .alert-work-grid{grid-template-columns:1fr 330px;gap:15px}
  /* 证书表按列宽规划隐藏部署位置列（与效果图 1080 口径一致） */
  .certificate-head,.certificate-row{
    grid-template-columns:minmax(210px,1.25fr) .75fr .9fr .75fr .55fr .6fr .55fr;min-width:960px;
  }
  .certificate-head span:nth-child(3),.certificate-row>span:nth-child(3){display:none}
  /* 总览费用表窄宽列宽规划：禁止逐字竖排，名称列省略 */
  .cost-table>div{gap:10px}
  .cost-table>div>*{white-space:nowrap}
  .cost-table strong{overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:900px){
  .manager-metrics,.website-summary,.certificate-summary,.billing-summary,.report-stat-grid,.alert-stat-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .technical-metrics{grid-template-columns:repeat(2,1fr)}
  .summary-strip{grid-template-columns:repeat(2,1fr)}
  .summary-strip>div:nth-child(3){border-left:none;padding-left:2px}
  .manager-grid,.manager-lower-grid,.billing-grid,.report-grid,.settings-lower-grid{grid-template-columns:1fr}
  .alert-work-grid{grid-template-columns:1fr}
  .report-hero{flex-direction:column;align-items:flex-start}
  .report-score{text-align:left}
  .login-gate{grid-template-columns:1fr}
  .login-brand{padding:30px 30px 8px;border-right:none}
  .login-context{margin:26px 0 10px}
  .login-context h1{font-size:30px}
  .login-service-state{margin-top:22px}
  .login-workspace{padding:26px 20px 40px}
}
@media (max-width:680px){
  .app-shell{flex-direction:column}
  .sidebar{
    width:100%;flex:none;height:auto;position:static;flex-direction:row;flex-wrap:wrap;
    align-items:center;padding:12px 14px;border-right:none;border-bottom:1px solid var(--hair-strong);
  }
  .brand-lockup{padding:0 8px 0 0}
  .workspace-switcher{display:none}
  .nav-groups{flex-direction:row;flex-wrap:wrap;align-items:center}
  .nav-label,.nav-label-spaced{display:none}
  .nav-item{width:auto;padding:6px 9px}
  .sidebar-foot{margin:0 0 0 auto}
  .status-row{border-top:none;padding:6px}
  .status-row span:last-child{display:none}
  .sidebar-user{padding:0}
  .sidebar-user>div:nth-child(2),.sidebar-user .icon-button{display:none}
  .topbar{padding:0 16px}
  .session-identity>span:nth-child(2),.live-indicator{display:none}
  .content-wrap{padding:10px 16px 30px}
  .page-header,.hero-row{flex-direction:column;align-items:flex-start;gap:12px}
  .technical-metrics{grid-template-columns:1fr}
  .summary-strip{grid-template-columns:1fr}
  .summary-strip>div{border-left:none;padding-left:2px}
  .management-fields{grid-template-columns:1fr}
  .drawer-finance,.site-health-grid,.drawer-tech-summary{grid-template-columns:1fr}
  .server-drawer,.website-drawer{width:calc(100vw - 20px)}
  .spend-chart{gap:8px}
  .cost-summary{gap:18px}
}

/* ---------- 打印（审计报告） ---------- */
@media print{
  body{background:#fff!important}
  .login-gate,.sidebar,.topbar,.footer,.toast,.drawer-backdrop,.server-drawer,.website-drawer,
  dialog,.page-actions,.text-button,.demo-banner,.report-footnote button{display:none!important}
  .app-shell{display:block!important;max-width:none}
  .main-content{display:block}
  .content-wrap{padding:0!important}
  .view{display:none!important}
  .view.active-view{display:block!important}
  .panel,.report-section,.report-hero,.manager-metric,.report-stat-grid article{
    box-shadow:none!important;break-inside:avoid;
  }
}