/*
 * 作者：尖沙咀段坤
 * 修改日期：2026-11-06 23:40:34
 * 修改日志：
 * 2026-10-30 03:06:32：增加用户列表一次性密码的清晰展示样式。
 * 2026-10-30 03:22:14：增加端口使用成员的紧凑分配控件，保持表格内选择和保存操作对齐。
 * 2026-10-30 03:29:20：移除表格内联编辑样式，新增独立批量账号分配弹窗的选择列表样式。
 * 2026-10-30 03:56:23：增加专业运营分析看板的指标、趋势、渠道健康、状态环图、人员负载和响应式样式。
 * 2026-10-30 04:04:18：重构运营看板的视觉层级，并增加数字、图表和卡片的入场动画及减少动态效果兼容。
 * 2026-10-30 04:04:25：隔离看板与全局组件类名，并增加团队和单账号运营分析样式。
 * 2026-10-30 04:09:13：取消少量数据卡片的强制等高与垂直居中，改为顶部对齐和内容自适应高度。
 * 2026-10-30 04:10:45：恢复看板模块固定等高，仅将内部内容改为顶部顺序排列，保留底部弹性留白。
 * 2026-10-30 04:11:44：压缩分析模块固定高度和内部滚动区，减少低数据量下的底部留白。
 * 2026-10-29 23:47:22：增加 LINE 渠道徽标样式，使平台端与客户端保持一致。
 * 2026-10-28 03:24:00：限制 Top Layer 通知中心为内容高度，修复右侧提示容器占满 100vh。
 * 2026-10-28 02:58:00：突出 WhatsApp 二维码自动更新倒计时。
 * 2026-11-06 00:31:28：增加话术统计明细的响应式卡片网格，使高频、未使用和语言分布清晰并列展示。
 * 2026-11-06 00:40:25：增加话术选择分组和原文、实际内容双栏预览样式，窄屏自动改为单列。
 * 2026-11-06 00:42:15：消息输入和译文启用逐段文字方向识别，支持阿拉伯语与数字混排且不翻转页面布局。
 * 2026-11-06 00:53:39：增加消息译文语言切换、重新翻译和聊天内容另存个人话术的紧凑操作样式。
 * 2026-11-06 02:05:44：增加话术历史版本只读卡片样式，长正文和变量清单保持稳定换行。
 * 2026-11-06 23:06:20：增加自动译文生成中的稳定占位样式，避免聊天气泡内容突然跳动。
 * 2026-11-06 23:32:00：增加发出翻译消息的原文分层样式，使实际发送内容与客服输入内容清晰区分。
 * 2026-11-06 23:40:00：强化发出消息译文与原文的背景、文字、标签和留白层次，避免两段内容视觉粘连。
 * 2026-11-06 23:50:00：发送原文区改为轻量半透明分层，移除厚重阴影和强边框，贴近聊天产品视觉。
 * 2026-10-28 02:48:00：通知中心进入浏览器 Top Layer，确保始终高于渠道登录 Dialog。
 * 2026-10-28 02:25:00：增加全站管理页面内容骨架，页面切换时不再保留旧页面假死画面。
 * 2026-11-05 23:51:30：增加翻译设置、话术卡片、聊天译文、话术选择器及会话语言控件的正式产品样式。
 * 2026-10-28 02:12:00：增加聊天图片大图查看器、缩放工具栏与拖动查看样式。
 * 2026-10-28 02:02:00：聊天图片增加固定比例资源骨架、淡入完成态和不跳版错误态。
 * 2026-10-28 01:52:00：增加会话历史首次加载的局部骨架、状态文字和输入区禁用反馈。
 * 2026-10-28 00:20:00：增加聊天三栏骨架屏和深色闪烁占位样式。
 * 2026-10-26 20:55:00：增加图片气泡上传进度条和发送失败感叹号。
 * 2026-10-26 16:46:16：增加聊天消息撤回按钮与确认文案样式。
 * 2026-10-26 03:29:11：建立项目标准文件头与累计修改日志基线。
 * 2026-11-04 00:37:27：为桌面端表头预留主导航高度，修复页面标签覆盖主内容的问题。
 * 2026-11-06 03:10:37：收紧顶层表头选择器，修复业务卡片标题被强制为 120px；同时整理话术导入、弹窗滚动、卡片操作区和统计条布局。
 * 2026-11-06 21:58:38：重构翻译设置页表单网格、策略开关和语言选择布局，消除全局标签边距造成的错位并补齐桌面及窄屏适配。
 * 2026-11-06 23:27:56：增加真实会话头像、头像回退与群消息发送人标识样式。
 * 2026-11-06 23:40:34：重构群消息为外置头像、上方名称和独立气泡的三层布局，头像降级不再显示文字。
 */

:root {
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #121a26;
  background: #f5f7f9;
  --green: #2f7a50;
  --brand: #3d587b;
  --line: #dde2e8;
  --muted: #687586;
}

/* 运营分析看板使用独立视觉层级，保证指标密度较高时仍能快速扫描。 */
.analytics-meta{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin:-10px 0 14px;color:var(--muted);font-size:12px}.analytics-live{display:flex;align-items:center;gap:7px}.analytics-live i{width:8px;height:8px;border-radius:50%;background:#22a567;box-shadow:0 0 0 4px #dff5e9}.analytics-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-bottom:18px}.analytics-kpi{position:relative;overflow:hidden;background:#fff;border:1px solid #e1e7ed;border-radius:14px;padding:18px;box-shadow:0 5px 18px rgba(31,46,64,.05)}.analytics-kpi::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:#4f7cff}.analytics-kpi.success::before{background:#27ae60}.analytics-kpi.warn::before{background:#f3a712}.analytics-kpi.danger::before{background:#e05252}.analytics-kpi span{display:block;color:#687586;font-size:13px}.analytics-kpi strong{display:block;margin:9px 0 5px;color:#172235;font-size:30px;line-height:1}.analytics-kpi strong em{font-size:15px;font-style:normal;color:#8995a5}.analytics-kpi small{color:#8591a1;font-size:12px}.analytics-grid{display:grid;gap:16px;margin-bottom:16px}.analytics-grid.primary{grid-template-columns:minmax(0,1.55fr) minmax(320px,.75fr)}.analytics-grid.secondary{grid-template-columns:repeat(3,minmax(0,1fr))}.analytics-card{background:#fff;border:1px solid #e1e7ed;border-radius:16px;padding:20px;box-shadow:0 6px 22px rgba(31,46,64,.055);min-width:0}.analytics-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.analytics-card h2{margin:0;color:#1d2939;font-size:16px}.analytics-card header p{margin:5px 0 0;color:#8490a0;font-size:12px}.chart-legend{display:flex;gap:14px;color:#687586;font-size:12px}.chart-legend span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px}.chart-legend .incoming::before{background:#43a779}.chart-legend .outgoing::before{background:#607df1}.trend-chart{height:230px;display:grid;grid-template-columns:repeat(7,1fr);align-items:end;gap:12px;border-bottom:1px solid #e4e9ef;padding:14px 8px 0;background:repeating-linear-gradient(to bottom,#fff 0,#fff 54px,#eef2f6 55px)}.trend-day{text-align:center;height:100%;display:grid;grid-template-rows:1fr auto auto;gap:5px;min-width:0}.trend-bars{display:flex;align-items:flex-end;justify-content:center;gap:4px;height:100%}.trend-bars i{display:block;width:min(16px,38%);min-height:3px;border-radius:5px 5px 1px 1px;transition:height .25s ease}.trend-bars .incoming{background:linear-gradient(#58bc8d,#329d6c)}.trend-bars .outgoing{background:linear-gradient(#7c95fa,#5572e4)}.trend-day b{font-size:11px;color:#667386}.trend-day small{font-size:11px;color:#9aa4b1}.channel-health{display:grid;gap:18px}.channel-health-row>div:first-child{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px}.channel-health-row b{font-size:13px}.channel-health-row em{font-size:11px;color:#788596;font-style:normal}.health-progress{height:7px;background:#edf1f5;border-radius:9px;margin:9px 0 5px;overflow:hidden}.health-progress i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#4f7cff,#39ad79)}.channel-health-row>small{color:#8b96a5}.status-layout{display:grid;grid-template-columns:130px 1fr;align-items:center;gap:20px}.status-donut{width:130px;height:130px;border-radius:50%;display:grid;place-items:center;position:relative}.status-donut::after{content:"";position:absolute;width:82px;height:82px;border-radius:50%;background:#fff}.status-donut span{position:relative;z-index:1;text-align:center}.status-donut b,.status-donut small{display:block}.status-donut b{font-size:24px}.status-donut small{color:#8792a1}.status-legend{display:grid;gap:10px}.status-legend div{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:8px;font-size:12px}.status-legend i{width:9px;height:9px;border-radius:3px}.member-load{display:grid;gap:13px}.member-load>div{display:grid;grid-template-columns:minmax(80px,1fr) minmax(70px,1fr) 28px;align-items:center;gap:10px}.member-load span b,.member-load span small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.member-load span b{font-size:12px}.member-load span small{color:#8b96a4;font-size:10px}.member-load>div>div{height:6px;background:#eef2f6;border-radius:9px;overflow:hidden}.member-load i{display:block;height:100%;background:#4f7cff;border-radius:9px}.member-load strong{text-align:right;font-size:13px}.attention-list{display:grid;gap:8px}.attention-list button{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;width:100%;padding:10px;border:0;border-radius:10px;background:#f7f9fb;text-align:left}.attention-list button:hover{background:#eef3f7}.attention-list button span b,.attention-list button span small{display:block}.attention-list button span small{color:#8994a3;font-size:10px}.attention-icon{display:grid!important;place-items:center;width:30px;height:30px;border-radius:9px;background:#e4ecff;color:#4968d8;font-weight:800}.attention-icon.warn{background:#fff0d5;color:#b87400}.attention-icon.danger{background:#ffe5e3;color:#c44038}.attention-list strong{font-size:17px}
@media(max-width:1200px){.analytics-kpis{grid-template-columns:repeat(3,1fr)}.analytics-grid.secondary{grid-template-columns:repeat(2,1fr)}.attention-card{grid-column:1/-1}}
@media(max-width:800px){.analytics-kpis{grid-template-columns:repeat(2,1fr)}.analytics-grid.primary,.analytics-grid.secondary{grid-template-columns:1fr}.attention-card{grid-column:auto}.trend-chart{gap:5px;height:200px}.status-layout{grid-template-columns:110px 1fr}.status-donut{width:110px;height:110px}.status-donut::after{width:70px;height:70px}}

.assignment-list {
  max-height: 360px;
  overflow: auto;
  margin: 16px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.assignment-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  margin: 0;
  border-bottom: 1px solid var(--line);
}

.assignment-item:last-child {
  border-bottom: 0;
}

.assignment-item input {
  width: auto;
  margin-top: 3px;
}

.assignment-item span,
.assignment-item small {
  display: block;
}

.assignment-item small {
  margin-top: 3px;
  color: var(--muted);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
/* ==================== 全局数据加载反馈 ==================== */
.global-loading {
  position: fixed;
  inset: 0 0 auto;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
}
.global-loading.active {
  opacity: 1;
}
.global-loading-track {
  height: 3px;
  overflow: hidden;
  background: #dce9e1;
}
.global-loading-track span {
  display: block;
  width: 35%;
  height: 100%;
  border-radius: 0;
  background: var(--green);
  transform: translateX(-110%);
  animation: global-loading-move 1.05s ease-in-out infinite;
}
.global-loading.done .global-loading-track span {
  width: 100%;
  transform: translateX(0);
  animation: none;
  transition: width 160ms ease;
}
.global-loading-label {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 12px;
  border: 1px solid #c9ddd0;
  border-radius: 4px;
  background: #fff;
  color: var(--green);
  box-shadow: 0 4px 14px #17202d1f;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
@keyframes global-loading-move {
  0% {
    transform: translateX(-110%);
  }
  55% {
    transform: translateX(135%);
  }
  100% {
    transform: translateX(310%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .global-loading-track span {
    animation-duration: 2s;
  }
}

/* 话术统计明细保持顶部对齐；数据较少时不制造大面积强制留白。 */
.statistics-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
  align-items: start;
}
.statistics-detail-grid .table-card:last-child { grid-column: 1 / -1; }
.statistics-detail-grid h2 { margin: 0; padding: 18px 20px 8px; font-size: 18px; }
@media (max-width: 900px) {
  .statistics-detail-grid { grid-template-columns: 1fr; }
  .statistics-detail-grid .table-card:last-child { grid-column: auto; }
}

.translation-overview { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:18px; }
.translation-overview .metric-card { min-height:112px; padding:18px; border:1px solid #dce7e1; border-radius:14px; background:linear-gradient(145deg,#fff,#f6faf8); box-shadow:0 10px 24px rgb(35 74 62 / 7%); }
.translation-overview .metric-card span,.translation-overview .metric-card small { display:block; color:var(--muted); }
.translation-overview .metric-card b { display:block; margin:8px 0 3px; font-size:26px; color:#173f35; }
.settings-form.card { margin:16px 0; padding:22px; overflow:hidden; border:1px solid #dce7e1; border-radius:16px; background:#fff; box-shadow:0 10px 28px rgb(29 68 55 / 6%); }
.settings-form.card > header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid #e8efec; }
.settings-form.card > header h2 { margin:0; color:#183c32; font-size:20px; }
.settings-form .form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:18px 0; }
.settings-form .form-grid > label { min-width:0; margin:0; }
.settings-toggle-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.settings-toggle-grid > label { display:flex; min-width:0; min-height:76px; align-items:center; justify-content:space-between; gap:16px; margin:0; padding:14px 16px; border:1px solid #e0e9e5; border-radius:12px; background:#f8fbfa; }
.settings-toggle-grid > label:hover { border-color:#b8d4c8; background:#f4f9f7; }
.settings-toggle-grid > label > span { min-width:0; line-height:1.35; }
.settings-toggle-grid > label > input[type="checkbox"] { flex:0 0 auto; width:18px; height:18px; margin:0; padding:0; accent-color:var(--brand); }
.settings-toggle-grid small { display:block; margin-top:4px; color:var(--muted); font-weight:400; }
.language-selector { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; margin:18px 0 0; padding:16px; border:1px solid #dfe8e4; border-radius:12px; background:#fbfdfc; }
.language-selector legend { padding:0 8px; color:#36584e; font-weight:700; }
.language-selector label { display:flex; min-width:0; align-items:center; gap:7px; margin:0; padding:8px 6px; border-radius:8px; font-weight:500; }
.language-selector label:hover { background:#edf6f2; }
.language-selector input[type="checkbox"] { flex:0 0 auto; width:16px; height:16px; margin:0; padding:0; accent-color:var(--brand); }
#translationPreferenceForm { display:grid; grid-template-columns:minmax(0,1fr); }
#translationPreferenceForm .inline-check { display:flex; min-height:44px; align-items:center; gap:9px; margin:0; padding:10px 12px; border:1px solid #e0e9e5; border-radius:10px; background:#f8fbfa; }
#translationPreferenceForm .inline-check input { flex:0 0 auto; width:17px; height:17px; margin:0; padding:0; accent-color:var(--brand); }
#translationSettingsForm .form-actions,#translationPreferenceForm .form-actions { margin-top:18px; padding-top:16px; border-top:1px solid #e8efec; }
.script-toolbar,.script-picker-filters { display:grid; grid-template-columns:minmax(220px,1fr) repeat(2,minmax(150px,220px)); gap:10px; margin-bottom:16px; }
.script-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:14px; }
.script-card { display:flex; flex-direction:column; min-height:230px; padding:18px; border:1px solid #dce7e1; border-radius:15px; background:#fff; box-shadow:0 8px 24px rgb(35 74 62 / 6%); }
.script-card[hidden] { display:none; }
.script-card header,.script-card footer { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.script-card h3 { margin:14px 0 8px; }
.script-card > p { flex:1; margin:0 0 14px; white-space:pre-wrap; overflow-wrap:anywhere; color:#354c45; }
.script-card footer { padding-top:12px; border-top:1px solid #edf2ef; color:var(--muted); font-size:12px; }
.script-card footer div { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:6px; }
.script-scope { padding:4px 9px; border-radius:999px; font-size:12px; background:#edf6f2; color:#23634f; }
.script-scope.team { background:#eef3ff; color:#315da8; }
.script-scope.organization { background:#fff5df; color:#8b5b00; }
.script-tags { display:flex; flex-wrap:wrap; gap:6px; min-height:22px; margin-bottom:10px; }
.script-tags span { padding:3px 8px; border-left:3px solid var(--tag-color); border-radius:6px; background:#f5f7f6; font-size:12px; }
.script-tag-dot { display:inline-block; width:10px; height:10px; margin-right:8px; border-radius:50%; }
.variable-buttons { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:-4px 0 14px; }
.variable-buttons button { padding:5px 9px; font-size:12px; }
.script-picker-heading p { margin-top:-8px; color:var(--muted); }
.script-picker-list { display:grid; gap:9px; max-height:52vh; overflow:auto; padding:2px; }
.script-picker-group { display:grid; gap:9px; }
.script-picker-group + .script-picker-group { margin-top:10px; padding-top:14px; border-top:1px solid #e2ebe7; }
.script-picker-group > h3 { display:flex; align-items:center; justify-content:space-between; margin:0 4px 2px; color:#203d35; font-size:15px; }
.script-picker-group > h3 small { color:var(--muted); font-weight:500; }
.script-picker-item { width:100%; padding:14px; text-align:left; border:1px solid #dce7e1; border-radius:12px; background:#fff; color:#203d35; }
.script-picker-item:hover { border-color:#7bb29f; background:#f5faf8; }
.script-picker-item > span { display:flex; justify-content:space-between; gap:12px; }
.script-picker-item em { font-style:normal; color:#33785f; font-size:12px; }
.script-picker-item p { margin:7px 0; white-space:pre-wrap; overflow-wrap:anywhere; color:#40564f; }
.script-picker-item small { color:var(--muted); }
.script-version-list { display:grid; gap:12px; max-height:58vh; overflow:auto; padding:2px; }
.script-version-card { padding:16px; border:1px solid #dce7e1; border-radius:13px; background:#fff; }
.script-version-card header,.script-version-card footer { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.script-version-card header time { margin-left:auto; color:var(--muted); font-size:12px; }
.script-version-card p { margin:14px 0; padding:13px; border-radius:10px; background:#f5f8f7; white-space:pre-wrap; overflow-wrap:anywhere; color:#243c35; }
.script-version-card footer { justify-content:space-between; color:var(--muted); font-size:12px; }
.script-preview-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:16px 0; }
.script-preview-grid section { min-width:0; padding:15px; border:1px solid #dce7e1; border-radius:13px; background:#f8fbfa; }
.script-preview-grid h3 { display:flex; justify-content:space-between; gap:10px; margin:0 0 10px; color:#203d35; font-size:15px; }
.script-preview-grid h3 small { color:var(--muted); font-weight:500; }
.script-preview-grid p { min-height:80px; margin:0; white-space:pre-wrap; overflow-wrap:anywhere; color:#263f38; line-height:1.65; }
.message-translation { margin-top:8px; padding:8px 10px; border-top:1px solid rgb(255 255 255 / 18%); color:#eefbf7; }
.message-translation-area { margin-top:7px; border-top:1px solid rgb(255 255 255 / 15%); }
.message-translation-area .message-translation { margin-top:0; border-top:0; }
.message.in .message-translation { border-color:rgb(255 255 255 / 10%); }
.message-translation span { display:block; white-space:pre-wrap; overflow-wrap:anywhere; }
.message-translation.is-pending span { width:72px; color:rgb(238 251 247 / 66%); font-size:11px; animation:translation-pulse 1.2s ease-in-out infinite; }
@keyframes translation-pulse { 50% { opacity:.42; } }
.message.out > p { color:#fff; font-weight:500; line-height:1.5; }
.outgoing-original { margin-top:8px; padding:7px 9px 8px; border:0; border-top:1px solid rgb(255 255 255 / 20%); border-radius:0 0 7px 7px; background:rgb(255 255 255 / 8%); }
.outgoing-original small { display:block; margin-bottom:3px; color:#d7d0ff; font-size:10px; font-weight:600; }
.outgoing-original span { display:block; color:rgb(255 255 255 / 72%); font-size:12px; line-height:1.48; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; unicode-bidi:plaintext; text-align:start; }
.platform-chat .outgoing-original { background:rgb(255 255 255 / 6%); }
.message-translation span,#messageForm textarea { unicode-bidi:plaintext; text-align:start; }
.message-translation small { display:block; margin-top:4px; opacity:.72; }
.message-translation-actions { display:flex; align-items:center; gap:6px; padding:5px 8px 2px; }
.message-translation-actions select { min-width:88px; max-width:140px; padding:3px 22px 3px 7px; border:1px solid rgb(255 255 255 / 18%); border-radius:8px; background:#303735; color:#e5f3ee; font-size:11px; }
.message-translate { padding:3px 8px; border:0; border-radius:8px; background:rgb(255 255 255 / 12%); color:#d8eee6; font-size:11px; }
.script-picker-button { flex:none; padding:0 12px; border-radius:16px; color:#dcebe6; background:#353b39; }
.script-save-button { flex:none; padding:0 10px; border-radius:16px; color:#dcebe6; background:#303735; font-size:12px; }
.composer-language { flex:none; padding:5px 8px; border-radius:999px; background:#3b4542; color:#cce4dc; font-size:11px; }
.script-scope-chart { display:grid; gap:14px; }
.script-scope-chart > div { display:grid; grid-template-columns:minmax(100px,150px) minmax(80px,1fr) 48px; align-items:center; gap:12px; }
.script-scope-chart i { width:var(--scope-width,0); max-width:100%; height:9px; border-radius:999px; background:linear-gradient(90deg,#315d55,#58b08c); }
.script-scope-chart b { text-align:right; font-variant-numeric:tabular-nums; }
.page-head-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.script-import-heading p { margin:-8px 0 18px; color:var(--muted); }
.file-drop-field { padding:16px; border:1px dashed #9fb8ad; border-radius:12px; background:#f7fbf9; }
.file-drop-field input[type="file"] { padding:10px; border:1px solid #d8e3de; border-radius:9px; background:#fff; }
.file-drop-field small { display:block; margin-top:8px; color:var(--muted); font-weight:400; line-height:1.5; }

@media (max-width:800px) {
  .script-toolbar,.script-picker-filters { grid-template-columns:1fr; }
  .script-preview-grid { grid-template-columns:1fr; }
  .script-card footer { align-items:flex-start; flex-direction:column; }
  .settings-toggle-grid { grid-template-columns:1fr; }
  .settings-form .form-grid { grid-template-columns:1fr; }
  .language-selector { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (min-width:801px) and (max-width:1100px) {
  .settings-toggle-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .language-selector { grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* 桌面端模块保持统一高度和整齐边界，内容只允许从顶部顺序排列，剩余空间统一保留在底部。 */
.analytics-dashboard .analytics-grid.analytics-secondary,
.analytics-dashboard .analytics-detail-grid {
  align-items: stretch;
}

.analytics-dashboard .analytics-grid.analytics-secondary > .analytics-card,
.analytics-dashboard .analytics-detail-grid > .analytics-card {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-content: normal;
  justify-content: flex-start;
}

.analytics-dashboard .analytics-grid.analytics-secondary > .analytics-card {
  height: 320px;
  min-height: 320px;
}

.analytics-dashboard .analytics-detail-grid > .analytics-card {
  height: 370px;
  min-height: 370px;
}

.analytics-dashboard .analytics-grid.analytics-secondary > .analytics-card > header,
.analytics-dashboard .analytics-detail-grid > .analytics-card > header {
  min-height: 0;
  margin-bottom: 18px;
}

.analytics-dashboard .status-layout,
.analytics-dashboard .member-load,
.analytics-dashboard .attention-list,
.analytics-dashboard .team-analysis-list,
.analytics-dashboard .account-analysis-table {
  margin-top: 0;
  align-self: start;
  width: 100%;
}

.analytics-dashboard .team-analysis-list,
.analytics-dashboard .account-analysis-table {
  max-height: 270px;
}

@media (max-width: 900px) {
  .analytics-dashboard .analytics-grid.analytics-secondary > .analytics-card,
  .analytics-dashboard .analytics-detail-grid > .analytics-card {
    height: auto;
    min-height: 0;
  }
}

/* 看板布局使用专属类名，禁止 primary 和 channel-card 等全局规则改变分析卡片背景与方向。 */
.analytics-dashboard .analytics-grid.analytics-primary {
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, .7fr);
  color: inherit;
  background: transparent;
}

.analytics-dashboard .analytics-grid.analytics-secondary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.analytics-dashboard .analytics-channel-card {
  display: block;
  align-items: initial;
}

.analytics-detail-grid {
  display: grid;
  grid-template-columns: minmax(300px, .7fr) minmax(0, 1.7fr);
  gap: 20px;
  margin-top: 4px;
}

.analytics-detail-grid > .analytics-card {
  min-height: 390px;
}

.analytics-card > header > strong {
  flex: 0 0 auto;
  color: #2f7a50;
  font-size: 13px;
  font-weight: 750;
}

.team-analysis-list {
  display: grid;
  gap: 12px;
  max-height: 460px;
  overflow: auto;
  padding-right: 4px;
}

.team-analysis-row {
  padding: 15px;
  border: 1px solid #e5ebe8;
  border-radius: 14px;
  background: linear-gradient(145deg, #fbfdfc, #f6faf8);
}

.team-analysis-head,
.team-analysis-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.team-analysis-head span b,
.team-analysis-head span small {
  display: block;
}

.team-analysis-head span b {
  color: #1b2d25;
  font-size: 14px;
}

.team-analysis-head span small {
  margin-top: 4px;
  color: #7e8c84;
  font-size: 11px;
}

.team-analysis-head > strong {
  color: #2f7a50;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.team-analysis-meta {
  margin-top: 9px;
  color: #718078;
  font-size: 11px;
}

.team-analysis-meta b {
  margin-left: 4px;
  color: #253a30;
  font-size: 12px;
}

.account-analysis-table {
  max-height: 460px;
  overflow: auto;
  border: 1px solid #e4eae7;
  border-radius: 13px;
}

.account-analysis-table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}

.account-analysis-table th {
  position: sticky;
  z-index: 1;
  top: 0;
  padding: 12px 14px;
  border-bottom: 1px solid #dfe7e3;
  background: #f3f7f5;
  color: #64736b;
  text-align: left;
  white-space: nowrap;
}

.account-analysis-table td {
  padding: 13px 14px;
  border-bottom: 1px solid #edf1ef;
  color: #33463c;
  vertical-align: middle;
}

.account-analysis-table tbody tr:last-child td { border-bottom: 0; }
.account-analysis-table tbody tr:hover td { background: #f8fbf9; }

.account-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.account-state i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a5afb0;
}

.account-state.online i {
  background: #2fb46e;
  box-shadow: 0 0 0 3px rgb(47 180 110 / 12%);
}

.analysis-chip {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 3px 7px;
  border-radius: 6px;
  background: #eaf4ee;
  color: #347456;
  white-space: nowrap;
}

.unread-value {
  display: inline-grid;
  min-width: 25px;
  height: 25px;
  place-items: center;
  padding: 0 7px;
  border-radius: 13px;
  background: #fff0dc;
  color: #b96a05;
}

@media (max-width: 1200px) {
  .analytics-dashboard .analytics-grid.analytics-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-dashboard .analytics-grid.analytics-secondary .attention-card { grid-column: 1 / -1; }
  .analytics-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .analytics-dashboard .analytics-grid.analytics-primary,
  .analytics-dashboard .analytics-grid.analytics-secondary { grid-template-columns: 1fr; }
  .analytics-dashboard .analytics-grid.analytics-secondary .attention-card { grid-column: auto; }
}
.hidden {
  display: none !important;
}
.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 20% 20%, #dff7e9, transparent 35%), #f5f7f7;
}
.login-card {
  width: min(420px, calc(100% - 32px));
  padding: 38px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 24px 60px #183b2920;
}
.logo {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--green);
  color: #fff;
  border-radius: 12px;
  font-weight: 800;
}
.eyebrow {
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  margin: 22px 0 4px;
}
.login-card h1 {
  margin: 0 0 5px;
}
.muted {
  color: var(--muted);
}
label {
  display: grid;
  gap: 7px;
  margin: 18px 0;
  font-weight: 650;
  font-size: 13px;
}
input,
select,
textarea {
  width: 100%;
  border: 1px solid #ccd5d0;
  border-radius: 9px;
  padding: 10px 12px;
  background: #fff;
  font: inherit;
}
button {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 13px;
  background: #fff;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
button.primary,
.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.login-card button.primary {
  width: 100%;
}
button.brand {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.ghost {
  background: transparent;
  color: inherit;
}
.error {
  color: #b42318;
  font-size: 13px;
}
.captcha {
  display: grid;
  grid-template-columns: 1fr 140px;
  align-items: end;
  gap: 12px;
}
.captcha-image {
  height: 44px;
  margin-bottom: 18px;
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #ecfdf3;
}
.captcha-image img {
  display: block;
  width: 100%;
  height: 44px;
}
.captcha-hint {
  grid-column: 1 / -1;
  margin: -10px 0 14px;
  color: var(--muted);
  font-size: 12px;
}
.login-switch {
  margin: 20px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.login-switch a {
  margin-left: 6px;
  color: var(--green);
  font-weight: 700;
}
/* ==================== 登录后顶部表头 ==================== */
.app-shell > header {
  height: 120px;
  background: #fff;
  color: #121a26;
  position: sticky;
  top: 0;
  z-index: 20;
}
.product-bar {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 40px;
  white-space: nowrap;
  overflow: hidden;
}
.product-logo {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.product-bar strong {
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
}
.product-divider {
  flex: 0 0 1px;
  width: 1px;
  height: 32px;
  background: var(--line);
}
.tenant-header-name,
.current-user {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
}
.tenant-header-name {
  flex: 0 1 auto;
  max-width: 260px;
}
.tenant-status-tag {
  flex: 0 0 auto;
  height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 14px;
  background: #edf7f1;
  color: var(--green);
  font-size: 12px;
  font-weight: 500;
}
.tenant-status-tag.bad {
  background: #fceeee;
  color: #b54747;
}
.product-spacer {
  flex: 1 1 auto;
  min-width: 16px;
}
.current-user {
  flex: 0 1 auto;
  max-width: 280px;
}
.header-logout {
  flex: 0 0 auto;
  height: 32px;
  padding: 4px 10px;
  border-color: transparent;
  color: var(--muted);
  background: transparent;
  font-size: 13px;
}
.app-shell > header nav {
  position: absolute;
  left: 0;
  right: 0;
  top: 64px;
  height: 56px;
  padding-left: max(24px, calc((100% - 1248px) / 2));
  display: flex;
  gap: 4px;
  background: var(--green);
}
.app-shell > header nav .nav-root {
  min-width: 132px;
  height: 56px;
  border: 0;
  border-radius: 0;
  color: #fff;
  background: transparent;
}
.app-shell > header nav .nav-root.active {
  color: var(--green);
  background: #ecfdf3;
  border-radius: 0;
}
/* ==================== 顶部二级菜单 ==================== */
.nav-group {
  position: relative;
}
.nav-arrow {
  margin-left: 8px;
  font-size: 12px;
}
.submenu {
  display: none;
  position: absolute;
  top: 52px;
  left: 0;
  min-width: 180px;
  padding: 7px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 30px #17202d24;
  z-index: 30;
}
.nav-group:hover .submenu,
.nav-group:focus-within .submenu,
.nav-group.open .submenu {
  display: grid;
}
.app-shell > header nav .submenu button {
  min-width: 0;
  height: auto;
  padding: 10px 12px;
  color: #263548;
  background: #fff;
  border: 0;
  text-align: left;
}
.app-shell > header nav .submenu button:hover,
.app-shell > header nav .submenu button.active {
  color: var(--green);
  background: #eef6f1;
}
/* ==================== 页面标签与缓存入口 ==================== */
.page-tabs {
  position: sticky;
  top: 120px;
  z-index: 12;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  min-height: 42px;
  padding: 7px max(24px, calc((100% - 1248px) / 2));
  background: #eef1f4;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.page-tab {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  height: 30px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px 6px 0 0;
}
.page-tab.active {
  border-color: #a9c7b5;
  box-shadow: inset 0 -2px var(--green);
}
.page-tab button {
  height: 28px;
  padding: 4px 9px;
  border: 0;
  background: transparent;
  white-space: nowrap;
  font-size: 12px;
}
.page-tab .tab-close {
  width: 25px;
  padding: 2px;
  color: var(--muted);
}
.tab-refresh {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 2px;
  border: 0;
  background: transparent;
  color: var(--brand);
}
.app-shell main {
  max-width: 1248px;
  margin: 0 auto;
  padding: 32px 0;
}
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}
.page-head h1 {
  margin: 0;
  font-size: 25px;
}
.page-head p {
  margin: 6px 0;
  color: var(--muted);
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.cards.four {
  grid-template-columns: repeat(4, 1fr);
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 19px;
}
.metric {
  font-size: 28px;
  font-weight: 800;
  margin-top: 8px;
}
.toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.toolbar input {
  max-width: 320px;
}
.toolbar.figma {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  margin-top: 16px;
}
.toolbar.figma input {
  margin-right: auto;
}
.toolbar.figma select {
  width: 150px;
}
.toolbar button,
.row-actions button {
  width: auto;
}
.one-time-password {
  display: block;
  margin-top: 6px;
  color: #9a5a12;
  font-weight: 600;
}
.one-time-password code {
  user-select: all;
  color: inherit;
}
.table-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: auto;
}
.table-pagination {
  min-width: 680px;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-size: 13px;
}
.pagination-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pagination-actions label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 8px 0 0;
  font-weight: 500;
}
.pagination-actions select {
  width: auto;
  min-width: 76px;
  padding: 7px 9px;
}
.pagination-actions button {
  padding: 7px 10px;
}
.pagination-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  padding: 13px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
th {
  color: var(--muted);
  background: #fafcfb;
}
.tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 99px;
  background: #ecfdf3;
  color: var(--green);
  font-size: 12px;
}
.tag.bad {
  background: #fff0ed;
  color: #b42318;
}
.row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.row-actions button {
  padding: 6px 8px;
  font-size: 12px;
}
.table-card th:last-child,
.table-card td:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  min-width: 220px;
  background: #fff;
  box-shadow: -8px 0 12px -12px #17202d66;
}
.table-card th:last-child {
  z-index: 3;
  background: #fafcfb;
}
.danger {
  color: #b42318;
}
.permission-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 22px 0 10px;
}
.permissions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.permission-group {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
}
.permission-group h3 {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--green);
}
.permission-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 8px 0;
  font-weight: 400;
}
.permission-item input {
  width: auto;
  margin-top: 3px;
}
.permission-item span {
  display: grid;
  gap: 2px;
}
.permission-item small {
  color: var(--muted);
  line-height: 1.45;
}
.permission-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-width: 480px;
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}
.form-actions button {
  width: auto;
}
dialog {
  width: min(600px, calc(100% - 30px));
  max-height: calc(100dvh - 32px);
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 20px 70px #0003;
}
.setup-guide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 16px;
  padding: 16px 18px;
  border: 1px solid #cdded3;
  border-radius: 10px;
  background: #f4faf6;
}
.setup-guide > div {
  display: flex;
  align-items: center;
  gap: 18px;
}
.setup-guide span {
  color: var(--green);
  font-size: 13px;
}
.setup-guide p {
  max-width: 390px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.wizard-heading h2 {
  margin: 4px 0;
}
.wizard-kicker {
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.wizard-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 22px 0;
}
.wizard-steps > button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  text-align: left;
}
.wizard-steps > button:hover {
  border-color: var(--brand);
}
.wizard-steps > button.active {
  border-color: #9bc4aa;
  background: #f1faf4;
  color: var(--green);
}
.wizard-steps b {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #edf1f3;
}
.wizard-steps .active b {
  background: var(--green);
  color: #fff;
}
.form-section {
  margin: 14px 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.form-section h3 {
  margin: 0;
  font-size: 15px;
}
.field-help {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.channel-login-panel {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcfd;
}
.channel-login-panel > button {
  justify-self: center;
  min-width: 150px;
}
.channel-login-panel form {
  display: grid;
  gap: 12px;
}
.channel-login-panel form label {
  margin: 0;
}
.qr-placeholder {
  min-height: 260px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 24px;
  border: 1px dashed #aebbc6;
  border-radius: 10px;
  background: #fff;
  text-align: center;
}
.qr-placeholder span {
  max-width: 360px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.qr-placeholder span strong{display:inline-block;min-width:28px;color:#c44b24;font-size:15px;font-variant-numeric:tabular-nums}
.qr-placeholder-icon {
  font-size: 72px;
  line-height: 1;
  color: var(--brand);
}
dialog::backdrop {
  background: #17202d77;
}
#modal .form-actions {
  position: sticky;
  z-index: 3;
  bottom: -24px;
  margin: 18px -2px -24px;
  padding: 14px 2px 20px;
  border-top: 1px solid #e8eeeb;
  background: linear-gradient(180deg,rgb(255 255 255 / 92%),#fff 24%);
}
.product-prompt{width:min(460px,calc(100% - 32px));padding:0;border:1px solid #dfe6e2;border-radius:14px;background:#fff;color:#18231d;box-shadow:0 24px 80px #10251a55}.product-prompt::backdrop{background:#0c1d1599;backdrop-filter:blur(3px)}.product-prompt form{display:grid;gap:20px;padding:22px}.product-prompt-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.product-prompt-head span{display:block;margin-bottom:4px;color:#2f7f56;font-size:11px;font-weight:800;letter-spacing:.08em}.product-prompt-head h2{margin:0;color:#17231d;font-size:20px}.product-prompt-close{width:32px;height:32px;min-width:32px;padding:0;border:0;border-radius:50%;background:#f0f4f2;color:#627069;font-size:20px;box-shadow:none}.product-prompt-close:hover{background:#e2ebe6;color:#173e2b}.product-prompt label{display:grid;gap:8px;color:#34463d;font-size:13px;font-weight:700}.product-prompt input,.product-prompt select{width:100%;height:42px;padding:0 12px;border:1px solid #cfd9d4;border-radius:8px;background:#fff;color:#17231d;outline:none}.product-prompt input:focus,.product-prompt select:focus{border-color:#2f7f56;box-shadow:0 0 0 3px #2f7f5620}.product-prompt-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:4px}.product-prompt-actions button{width:auto;min-width:82px}.product-prompt-actions .product-prompt-cancel{background:#f3f6f4;color:#405047;border-color:#dce4e0}
.dialog-close {
  float: right;
  border: 0;
  font-size: 20px;
}
.notice {
  padding: 12px;
  border-radius: 8px;
  background: #ecfdf3;
  color: #08633c;
  margin-bottom: 16px;
}
.notice.bad {
  background: #fff0ed;
  color: #b42318;
}
.notice-center {
  position: fixed;
  z-index: 1200;
  top: 84px;
  right: 24px;
  bottom: auto;
  left: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  display: grid;
  width: min(380px, calc(100vw - 32px));
  gap: 10px;
  pointer-events: none;
}
#noticeCenter:popover-open {
  inset: 84px 24px auto auto;
  width: min(380px, calc(100vw - 32px));
  height: fit-content;
  min-height: 0;
  max-height: calc(100vh - 104px);
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
  align-content: start;
}
.qr-generating .qr-placeholder-icon { animation: qr-generating-pulse 1.1s ease-in-out infinite; }
@keyframes qr-generating-pulse { 50% { opacity: .35; transform: scale(.94); } }
.notice-toast {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 14px 13px 16px;
  border: 1px solid #a7e2c2;
  border-radius: 8px;
  background: #ecfdf3;
  box-shadow: 0 10px 28px #17202d29;
  color: #08633c;
  line-height: 1.5;
  pointer-events: auto;
  animation: notice-in 180ms ease-out;
}
.notice-toast.bad {
  border-color: #f7c1b7;
  background: #fff0ed;
  color: #b42318;
}
.notice-toast.leaving {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease;
}
.notice-toast button {
  min-width: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: currentColor;
  font-size: 20px;
  line-height: 20px;
}
@keyframes notice-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.settings-row {
  display: grid;
  grid-template-columns: 260px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}
.metric.warn {
  color: #a85b19;
}
.channel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.channel-card {
  display: flex;
  gap: 18px;
  align-items: center;
}
.chat-layout {
  display: grid;
  grid-template-columns: 220px 350px minmax(460px, 1fr);
  height: calc(100vh - 245px);
  min-height: 650px;
  max-height: 900px;
  border: 1px solid #343434;
  border-radius: 14px;
  overflow: hidden;
  background: #181818;
  color: #f4f4f4;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .18);
}
.chat-metrics {
  margin-bottom: 18px;
}
.chat-panel {
  border-right: 1px solid #343434;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.chat-panel:last-child {
  border-right: 0;
}
.chat-skeleton{pointer-events:none}.chat-skeleton-head{height:55px;border-bottom:1px solid #343434;background:linear-gradient(100deg,#242424 25%,#303030 40%,#242424 55%);background-size:220% 100%;animation:chat-skeleton-wave 1.35s ease-in-out infinite}.chat-skeleton-head.wide{height:62px}.chat-skeleton-search{height:38px;margin:8px;border-radius:22px;background:#303030}.chat-skeleton-list{padding:8px}.chat-skeleton-row{height:55px;display:flex;align-items:center;gap:11px;padding:7px}.chat-skeleton-row i{width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:#303030}.chat-skeleton-row span{width:var(--skeleton-width);height:28px;border-radius:7px;background:linear-gradient(100deg,#292929 25%,#373737 40%,#292929 55%);background-size:220% 100%;animation:chat-skeleton-wave 1.35s ease-in-out infinite}.chat-skeleton-messages{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:24px}.chat-skeleton-messages i{display:block;width:45%;height:52px;border-radius:12px;background:#292929}.chat-skeleton-messages i:nth-child(even){width:58%;margin-left:auto;background:#393363}.chat-skeleton-input{height:52px;margin:10px 14px;border-radius:26px;background:#303030}@keyframes chat-skeleton-wave{0%{background-position:120% 0}100%{background-position:-120% 0}}
.conversation-history-loading{position:relative;width:100%;min-height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:26px;box-sizing:border-box}.conversation-history-loading .history-loading-label{position:absolute;inset:18px auto auto 50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;padding:8px 14px;border-radius:18px;background:rgba(35,35,35,.92);color:#eee;font-size:13px;white-space:nowrap;box-shadow:0 5px 18px rgba(0,0,0,.22)}.history-loading-label span{width:14px;height:14px;border:2px solid #777;border-top-color:#8b7be5;border-radius:50%;animation:history-loading-spin .75s linear infinite}.conversation-history-loading i{display:block;width:42%;height:48px;flex:0 0 48px;border-radius:12px;background:linear-gradient(100deg,#272727 25%,#353535 40%,#272727 55%);background-size:220% 100%;animation:chat-skeleton-wave 1.35s ease-in-out infinite}.conversation-history-loading i:nth-of-type(even){width:56%;margin-left:auto;background:linear-gradient(100deg,#332e55 25%,#443b78 40%,#332e55 55%);background-size:220% 100%}.loading-disabled{opacity:.5;pointer-events:none}@keyframes history-loading-spin{to{transform:rotate(360deg)}}
.page-loading-skeleton{display:grid;gap:18px;pointer-events:none}.page-skeleton-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.page-skeleton-cards i{height:104px;border:1px solid #e1e5ea;border-radius:12px;background:linear-gradient(100deg,#f0f2f4 22%,#fafbfc 40%,#f0f2f4 58%);background-size:220% 100%;animation:page-skeleton-wave 1.35s ease-in-out infinite}.page-skeleton-table{overflow:hidden;border:1px solid #e1e5ea;border-radius:12px;background:#fff}.page-skeleton-toolbar{height:64px;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #edf0f3}.page-skeleton-toolbar i{width:190px;height:36px;border-radius:8px;background:#edf0f3}.page-skeleton-toolbar i:last-child{width:96px}.page-skeleton-row{height:56px;display:grid;grid-template-columns:1.4fr 1fr 1fr .7fr;align-items:center;gap:24px;padding:0 18px;border-bottom:1px solid #f0f2f4}.page-skeleton-row:last-child{border-bottom:0}.page-skeleton-row i{width:var(--skeleton-width,72%);height:13px;border-radius:7px;background:linear-gradient(100deg,#eceff2 22%,#f8f9fa 40%,#eceff2 58%);background-size:220% 100%;animation:page-skeleton-wave 1.35s ease-in-out infinite}.page-skeleton-row i:not(:first-child){width:72%}@keyframes page-skeleton-wave{0%{background-position:120% 0}100%{background-position:-120% 0}}@media(max-width:760px){.page-skeleton-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.page-skeleton-row{grid-template-columns:1.4fr 1fr}.page-skeleton-row i:nth-child(n+3){display:none}}
.chat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  margin: 0;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
}
.chat-item:hover { background: #2b2b2b; }
.chat-item.active {
  background: #7668ca;
  border-color: #7668ca;
  color: #fff;
}
.chat-item-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; }
.telegram-workspace,.telegram-workspace button,.telegram-workspace b,.telegram-workspace h3,.telegram-workspace p,.telegram-workspace textarea{color:#fff}.telegram-workspace input::placeholder,.telegram-workspace textarea::placeholder{color:#aaa}.telegram-workspace .conversation-item time,.telegram-workspace .chat-item-copy small,.telegram-workspace .chat-panel-head small,.telegram-workspace .chat-empty span{color:#b8b8b8}
.chat-item em { min-width: 23px; height: 23px; display: grid; place-items: center; padding: 0 6px; border-radius: 12px; background: #4fae4e; color: #fff; font-size: 11px; font-style: normal; font-weight: 700; text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.chat-item small {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-item.active small { color: rgba(255,255,255,.82); }
.chat-item.active em { background: #fff; color: #3390ec; }
.chat-panel-head { min-height: 62px; padding: 9px 15px; border-bottom: 1px solid #343434; display: flex; align-items: center; justify-content: flex-start; gap: 11px; background:#242424; }
.chat-panel-head h3 { margin: 0 0 3px; font-size: 15px; }
.chat-panel-head small { color: #a6a6a6; }
.chat-list { flex: 1; min-height: 0; overflow: auto; padding: 6px; scrollbar-color:#555 transparent; }
.conversation-search { display: flex; align-items:center; gap: 8px; margin:8px; padding: 0 13px; border: 0; border-radius:22px; background: #303030; color:#aaa; }
.conversation-search input { min-width: 0; flex: 1; padding: 10px 0; border: 0; background: transparent; color:#fff; outline:0; }
.telegram-workspace .conversation-search button {
  width: 24px;
  height: 24px;
  min-width: 24px;
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  margin: 0 -5px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #aaa;
  font-size: 18px;
  line-height: 1;
  box-shadow: none;
}
.telegram-workspace .conversation-search button:hover {
  background: #484848;
  color: #fff;
}
.channel-badge { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 700; }
.channel-badge.telegram { background: #2aabee; }
.channel-badge.whatsapp { background: #25a65a; }
.channel-badge.line { background: #06c755; }
.tenant-chat-tabs{display:flex;gap:9px;margin:0 0 10px;padding:4px 1px;overflow-x:auto;scrollbar-width:thin}.tenant-chat-tab{display:flex;align-items:center;gap:8px;min-width:max-content;padding:9px 13px;border:1px solid #d8dee6;border-radius:8px;background:#fff;color:#243142}.tenant-chat-tab b{font-size:13px}.tenant-chat-tab span{padding:3px 7px;border-radius:10px;background:#eef2f6;color:#5f6b7a;font-size:11px}.tenant-chat-tab.active{border-color:#2f7d55;background:#2f7d55;color:#fff}.tenant-chat-tab.active span{background:rgba(255,255,255,.17);color:#fff}
.conversation-avatar{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:50%;overflow:hidden;background:linear-gradient(145deg,hsl(var(--avatar-hue,205) 72% 62%),hsl(var(--avatar-hue,205) 66% 43%));color:#fff;font-size:16px;font-weight:700}
.conversation-avatar img{width:100%;height:100%;object-fit:cover;display:block}.conversation-avatar i{font-style:normal}.conversation-avatar img+i{display:none}.conversation-avatar.avatar-fallback i{display:block}.message-head-avatar{width:36px;height:36px;flex-basis:36px}
.message-row{display:flex;align-items:flex-end;gap:8px;width:fit-content;max-width:min(78%,730px);margin:7px 0;align-self:flex-start}.message-row.out{align-self:flex-end;margin-left:auto}.message-stack{display:flex;min-width:0;max-width:100%;flex-direction:column;align-items:flex-start}.message-row.out .message-stack{align-items:flex-end}.message-row .message{max-width:100%;margin:0;align-self:auto}.message-sender-name{max-width:100%;margin:0 0 4px 4px;overflow:hidden;color:#8dbdff;font-size:12px;font-weight:700;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.message-sender-avatar{position:relative;width:34px;height:34px;flex:0 0 34px;overflow:hidden;border-radius:50%;background:#313b46}.message-sender-avatar img{display:block;width:100%;height:100%;object-fit:cover}.message-sender-avatar.is-placeholder::before{content:"";position:absolute;left:50%;top:7px;width:10px;height:10px;transform:translateX(-50%);border-radius:50%;background:#9aa7b5}.message-sender-avatar.is-placeholder::after{content:"";position:absolute;left:50%;bottom:5px;width:20px;height:11px;transform:translateX(-50%);border-radius:11px 11px 7px 7px;background:#9aa7b5}
.conversation-item { min-height: 62px; border-radius: 10px; }
.conversation-item .chat-item-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.conversation-item time { align-self:flex-start;color:#858585;font-size:10px;white-space:nowrap; }
.status-pill { padding: 4px 8px; border-radius: 10px; background: #eef5f1; color: #387154; font-size: 12px; white-space: nowrap; }
.chat-pager { min-height: 52px; padding: 8px 10px; border-top: 1px solid #343434; display: grid; grid-template-columns: 68px minmax(58px,1fr) 68px; align-items: center; gap: 8px; color: #d7d7d7; font-size: 12px; background:#202020; }
.chat-pager span{text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums}
.telegram-workspace .chat-pager button { width: 68px; min-width:68px; height:32px; margin:0; padding:0 8px; border:1px solid #555; border-radius:8px; background:#303030; color:transparent; font-size:0; line-height:30px; box-shadow:none; }
.telegram-workspace .chat-pager button::before{color:#fff;font-size:12px;line-height:1}
.telegram-workspace .chat-pager button:first-child::before{content:"上一页"}
.telegram-workspace .chat-pager button:last-child::before{content:"下一页"}
.telegram-workspace .chat-pager button:not(:disabled):hover{border-color:#8275d8;background:#403873}
.telegram-workspace .chat-pager button:disabled { cursor:not-allowed;border-color:#383838;background:#252525;opacity:1; }
.telegram-workspace .chat-pager button:disabled::before{color:#666}
.chat-empty { height: 100%; display: grid; place-content: center; gap: 6px; text-align: center; }
.chat-empty span { color: var(--muted); font-size: 13px; }
.message-stream {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 22px 6%;
  background-color: #090709;
  background-image: radial-gradient(circle at 20% 25%, rgba(118,104,202,.16) 0 1px, transparent 2px), radial-gradient(circle at 80% 70%, rgba(255,255,255,.08) 0 1px, transparent 2px), repeating-linear-gradient(135deg,transparent 0 38px,rgba(118,104,202,.025) 39px 40px);
  background-size: 28px 28px, 34px 34px, 80px 80px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
.message {
  flex: 0 0 auto;
  width:fit-content;
  min-width:72px;
  max-width:min(72%,680px);
  align-self:flex-start;
  margin: 7px 0;
  padding: 8px 11px 6px;
  border-radius: 12px 12px 12px 4px;
  background: #262626;
  color:#f5f5f5;
  border: 0;
  box-shadow: 0 1px 2px rgba(22,35,45,.16);
  overflow:hidden;
}
.telegram-workspace .message.in {
  align-self: flex-start;
  margin-right: auto;
  margin-left: 0;
  background: #292929;
}
.message.out {
  align-self:flex-end;
  margin-left: auto;
  background: #7668ca;
  border-radius: 12px 12px 4px 12px;
}
.message p {
  margin: 0 0 3px;
  line-height: 1.42;
  white-space: pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.telegram-workspace .message p {
  min-width: 0;
  max-width: 100%;
  color: #fff !important;
  font-size: 14px;
  line-height: 1.45;
  writing-mode: horizontal-tb;
}
.message small { display: block; color: #aaa; font-size: 10px; text-align: right; }
.message.out small{color:#ded9ff;}
.message-upload{height:3px;margin:7px 0 3px;overflow:hidden;border-radius:2px;background:rgba(255,255,255,.22)}.message-upload span{display:block;height:100%;border-radius:inherit;background:#fff;transition:width .15s ease}.message-error{display:inline-block;margin-right:4px;color:#ffd45c;font-size:14px;line-height:1}
.message-revoke{display:block;margin:4px 0 0 auto;padding:2px 6px;border:0;border-radius:5px;background:rgba(255,255,255,.13);color:#fff;font-size:11px;box-shadow:none}.message-revoke:hover{background:rgba(255,255,255,.24)}.message-revoke:disabled{opacity:.55;cursor:wait}.product-confirm-message{margin:0;padding:4px 22px 20px;color:#455468;line-height:1.7;white-space:normal}.product-prompt .danger{background:#c53b42;color:#fff;border-color:#c53b42}
.media-message{display:flex;align-items:center;gap:10px;min-width:190px;max-width:100%;padding:3px 0 6px}.media-message>span:last-child{display:flex;min-width:0;max-width:100%;flex-direction:column}.media-message b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.media-message small{text-align:left}.media-icon{width:42px;height:42px;display:grid;place-items:center;flex:0 0 42px;border-radius:50%;background:#7668ca;color:#fff;font-size:20px}
.media-preview{display:grid;gap:6px;min-width:220px;max-width:420px}.media-preview video{display:block;width:100%;max-height:360px;object-fit:contain;border-radius:9px;background:#111}.media-image-stage{position:relative;width:min(320px,65vw);max-width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:9px;background:#111}.media-image-stage img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(.985);transition:opacity .22s ease,transform .22s ease}.media-image-skeleton{position:absolute;inset:0;display:block;background:linear-gradient(100deg,#242424 20%,#343434 38%,#242424 56%);background-size:220% 100%;animation:chat-skeleton-wave 1.35s ease-in-out infinite}.media-image-skeleton::after{content:"图片加载中";position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);color:#aaa;font-size:12px;white-space:nowrap}.media-preview.image.is-loaded .media-image-skeleton{opacity:0;pointer-events:none;transition:opacity .18s ease}.media-preview.image.is-loaded img{opacity:1;transform:scale(1)}.media-image-error{position:absolute;inset:0;display:none;place-content:center;text-align:center;color:#ddd;font-size:13px;line-height:1.55;background:#202020}.media-image-error small{color:#999}.media-preview.image.is-error .media-image-skeleton,.media-preview.image.is-error img{display:none}.media-preview.image.is-error .media-image-error{display:grid}.media-preview audio{width:min(320px,100%)}.media-preview a,.media-message{color:#fff;text-decoration:none}.media-preview>a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}.media-preview small{color:#bbb;text-align:left}
.media-image-stage{display:block;margin:0;padding:0;border:0;box-shadow:none;cursor:zoom-in}.media-image-stage:hover{background:#111;box-shadow:0 0 0 2px rgba(139,123,229,.72)}.chat-image-viewer{width:100vw;max-width:none;height:100vh;max-height:none;margin:0;padding:0;border:0;background:rgba(4,4,6,.94);color:#fff}.chat-image-viewer::backdrop{background:rgba(0,0,0,.82)}.image-viewer-shell{width:100%;height:100%;display:grid;grid-template-rows:58px minmax(0,1fr)}.image-viewer-shell header{z-index:2;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:8px 18px;background:rgba(24,24,26,.96);border-bottom:1px solid #393939}.image-viewer-shell header>b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.image-viewer-shell header>div{display:flex;align-items:center;gap:7px}.image-viewer-shell header button{min-width:38px;height:36px;margin:0;padding:0 11px;border:1px solid #505050;border-radius:8px;background:#303033;color:#fff;box-shadow:none;font-size:16px}.image-viewer-shell header button:hover{border-color:#8b7be5;background:#49406f}.image-viewer-shell header span{min-width:54px;text-align:center;color:#ddd;font-variant-numeric:tabular-nums;font-size:13px}.image-viewer-canvas{position:relative;display:grid;place-items:center;overflow:hidden;touch-action:none;cursor:grab}.image-viewer-canvas:active{cursor:grabbing}.image-viewer-canvas img{display:block;max-width:90vw;max-height:calc(100vh - 88px);object-fit:contain;transform-origin:center;user-select:none;-webkit-user-drag:none;will-change:transform}
.messages form {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid #343434;
  background: #181818;
  align-items: flex-end;
}
.messages textarea {
  flex: 1;
  min-height: 44px;
  max-height: 120px;
  padding: 11px 14px;
  border-radius: 22px;
  resize: vertical;
  background: #2b2b2b;
  color:#fff;
  border:0;
}
.messages form button { width: 44px; height: 44px; flex: 0 0 44px; padding: 0; border-radius: 50%; background: #7668ca; }
.message-head { background: #242424; box-shadow: 0 1px 3px rgba(0,0,0,.35); z-index: 1; }
.message-head-actions{margin-left:auto;display:flex;gap:4px}.message-head-actions button,.messages form .attach-icon{width:34px;height:34px;min-width:34px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:transparent;color:#ddd;font-size:20px;box-shadow:none}.message-head-actions button:hover,.messages form .attach-icon:hover{background:#3b3b3b;color:#fff}.readonly-badge{margin-left:auto;padding:4px 9px;border-radius:12px;background:#363636;color:#bbb;font-size:11px}.attach-icon{align-self:center;color:#aaa}.telegram-side-title{height:55px;display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid #343434;background:#242424}.telegram-side-title small{margin-left:auto;color:#999}.telegram-menu{font-size:18px;color:#bbb}.telegram-workspace .empty{color:#999}.telegram-workspace .chat-item-copy small{color:#999}.telegram-workspace .chat-item.active small{color:#eee}.platform-chat{grid-template-columns:260px 350px minmax(460px,1fr)}
@media (max-width: 900px) {
  .chat-layout {
    grid-template-columns: 1fr;
    height: auto;
    max-height: none;
  }
  .chat-panel {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    min-height: 300px;
  }
}
.channel-logo {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
}
.channel-logo.tg {
  background: #2aabee;
}
.channel-logo.wa {
  background: #25d366;
}
.channel-logo.line {
  background: #06c755;
}
@media (max-width: 800px) {
  .app-shell > header {
    height: 120px;
  }
  .product-bar {
    gap: 10px;
    padding: 0 12px;
  }
  .product-divider,
  .tenant-status-tag {
    display: none;
  }
  .tenant-header-name {
    max-width: 90px;
  }
  .current-user {
    max-width: 110px;
  }
  .app-shell > header nav {
    padding-left: 8px;
    overflow: visible;
  }
  .app-shell > header nav .nav-root {
    min-width: auto;
    padding: 0 10px;
    font-size: 12px;
  }
  .submenu {
    position: fixed;
    top: 116px;
    left: 8px;
    right: 8px;
    grid-template-columns: repeat(2, 1fr);
  }
  .page-tabs {
    top: 120px;
    padding-left: 10px;
  }
  .app-shell main {
    padding: 18px;
  }
  .cards {
    grid-template-columns: 1fr;
  }
  .page-head {
    display: block;
  }
  .page-head button {
    margin-top: 10px;
  }
  .page-head-actions { justify-content:flex-start; }
  .page-head-actions button { margin-top:0; }
  .settings-row {
    grid-template-columns: 1fr;
  }
  .captcha {
    grid-template-columns: 1fr;
  }
}

/* 运营看板以深色总览区承载页面主视觉，明亮数据卡负责日常快速扫描。 */
#content.analytics-dashboard {
  position: relative;
  isolation: isolate;
  padding: 24px;
  border: 1px solid #e4e9ee;
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 4%, rgb(62 143 100 / 11%), transparent 27%),
    linear-gradient(145deg, #f7faf8 0%, #f3f6f9 52%, #f8fafb 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 85%);
}

.analytics-dashboard .page-head {
  position: relative;
  overflow: hidden;
  min-height: 154px;
  align-items: flex-end;
  margin: 0 0 18px;
  padding: 30px 32px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(circle at 88% -10%, rgb(108 225 161 / 42%), transparent 34%),
    radial-gradient(circle at 72% 120%, rgb(84 121 225 / 34%), transparent 36%),
    linear-gradient(125deg, #152b25 0%, #214c3b 48%, #1e3d46 100%);
  box-shadow: 0 22px 50px rgb(23 55 45 / 20%);
}

.analytics-dashboard .page-head::before,
.analytics-dashboard .page-head::after {
  position: absolute;
  content: "";
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 50%;
}

.analytics-dashboard .page-head::before {
  width: 220px;
  height: 220px;
  top: -132px;
  right: 88px;
}

.analytics-dashboard .page-head::after {
  width: 118px;
  height: 118px;
  right: 20px;
  bottom: -78px;
}

.analytics-dashboard .page-head > div,
.analytics-dashboard .page-head > button {
  position: relative;
  z-index: 1;
}

.analytics-dashboard .page-head h1 {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(25px, 2.2vw, 34px);
  letter-spacing: -.03em;
}

.analytics-dashboard .page-head p {
  margin: 0;
  color: rgb(255 255 255 / 67%);
}

.analytics-dashboard .page-head button {
  border-color: rgb(255 255 255 / 18%);
  background: rgb(255 255 255 / 12%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%);
  backdrop-filter: blur(12px);
}

.analytics-dashboard .page-head button:hover {
  border-color: rgb(255 255 255 / 32%);
  background: rgb(255 255 255 / 20%);
}

.analytics-dashboard .analytics-meta {
  position: absolute;
  z-index: 2;
  top: 108px;
  left: 56px;
  justify-content: flex-start;
  margin: 0;
  color: rgb(255 255 255 / 62%);
}

.analytics-dashboard .analytics-live i {
  background: #65e59d;
  box-shadow: 0 0 0 4px rgb(101 229 157 / 15%);
  animation: analytics-live-pulse 2.2s ease-out infinite;
}

.analytics-dashboard .analytics-kpis {
  position: relative;
  z-index: 3;
  gap: 16px;
  margin: -7px 12px 22px;
}

.analytics-dashboard .analytics-kpi {
  min-height: 142px;
  padding: 21px 20px 18px;
  border: 1px solid rgb(220 229 225 / 85%);
  border-radius: 17px;
  background: linear-gradient(145deg, rgb(255 255 255 / 98%), rgb(249 252 251 / 96%));
  box-shadow: 0 13px 32px rgb(31 54 46 / 8%);
  opacity: 0;
  transform: translateY(16px);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .45s ease, box-shadow .2s ease;
}

.analytics-dashboard .analytics-kpi::before {
  inset: 20px auto 20px 0;
  width: 4px;
  border-radius: 0 4px 4px 0;
}

.analytics-dashboard .analytics-kpi::after {
  position: absolute;
  width: 76px;
  height: 76px;
  right: -30px;
  top: -32px;
  content: "";
  border-radius: 50%;
  background: rgb(79 124 255 / 6%);
}

.analytics-dashboard .analytics-kpi.success::after { background: rgb(39 174 96 / 8%); }
.analytics-dashboard .analytics-kpi.warn::after { background: rgb(243 167 18 / 9%); }
.analytics-dashboard .analytics-kpi.danger::after { background: rgb(224 82 82 / 9%); }

.analytics-dashboard.is-ready .analytics-kpi {
  opacity: 1;
  transform: translateY(0);
}

.analytics-dashboard .analytics-kpi:nth-child(2) { transition-delay: 55ms; }
.analytics-dashboard .analytics-kpi:nth-child(3) { transition-delay: 110ms; }
.analytics-dashboard .analytics-kpi:nth-child(4) { transition-delay: 165ms; }
.analytics-dashboard .analytics-kpi:nth-child(5) { transition-delay: 220ms; }
.analytics-dashboard .analytics-kpi:nth-child(6) { transition-delay: 275ms; }

.analytics-dashboard .analytics-kpi:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgb(31 54 46 / 13%);
}

.analytics-dashboard .analytics-kpi span {
  color: #69786f;
  font-weight: 650;
}

.analytics-dashboard .analytics-kpi strong {
  margin: 15px 0 9px;
  color: #15271f;
  font-size: clamp(29px, 2.3vw, 38px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
}

.analytics-dashboard .analytics-grid {
  gap: 20px;
  margin-bottom: 20px;
}

.analytics-dashboard .analytics-grid.primary {
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, .7fr);
}

.analytics-dashboard .analytics-card {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border: 1px solid #e2e8e5;
  border-radius: 19px;
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 13px 38px rgb(33 54 46 / 7%);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease;
}

.analytics-dashboard.is-ready .analytics-card {
  opacity: 1;
  transform: translateY(0);
}

.analytics-dashboard .analytics-grid.primary .analytics-card:nth-child(1) { transition-delay: 220ms; }
.analytics-dashboard .analytics-grid.primary .analytics-card:nth-child(2) { transition-delay: 300ms; }
.analytics-dashboard .analytics-grid.secondary .analytics-card:nth-child(1) { transition-delay: 360ms; }
.analytics-dashboard .analytics-grid.secondary .analytics-card:nth-child(2) { transition-delay: 420ms; }
.analytics-dashboard .analytics-grid.secondary .analytics-card:nth-child(3) { transition-delay: 480ms; }

.analytics-dashboard .analytics-card:hover {
  box-shadow: 0 18px 44px rgb(33 54 46 / 11%);
}

.analytics-dashboard .analytics-card > header {
  min-height: 48px;
  margin-bottom: 22px;
}

.analytics-dashboard .analytics-card h2 {
  color: #182b23;
  font-size: 17px;
  letter-spacing: -.01em;
}

.analytics-dashboard .trend-card {
  background:
    radial-gradient(circle at 92% 12%, rgb(64 159 107 / 9%), transparent 30%),
    #fff;
}

.analytics-dashboard .trend-chart {
  height: 270px;
  gap: clamp(7px, 1.2vw, 18px);
  padding: 20px 10px 0;
  border-bottom-color: #dfe8e3;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 63px, #eef3f0 64px);
}

.analytics-dashboard .trend-bars {
  gap: 6px;
}

.analytics-dashboard .trend-bars i {
  height: 0;
  width: min(18px, 36%);
  min-height: 0;
  box-shadow: 0 6px 15px rgb(51 128 89 / 14%);
  transition: height .85s cubic-bezier(.2,.8,.2,1);
}

.analytics-dashboard.is-ready .trend-bars i {
  height: var(--target-size);
  min-height: 3px;
}

.analytics-dashboard .channel-health {
  gap: 22px;
}

.analytics-dashboard .channel-health-row {
  padding: 14px;
  border: 1px solid #edf1ef;
  border-radius: 13px;
  background: #fafcfb;
}

.analytics-dashboard .health-progress,
.analytics-dashboard .member-load > div > div {
  height: 8px;
  background: #e9efec;
}

.analytics-dashboard .health-progress i,
.analytics-dashboard .member-load i {
  width: 0;
  transition: width .9s .25s cubic-bezier(.2,.8,.2,1);
}

.analytics-dashboard.is-ready .health-progress i,
.analytics-dashboard.is-ready .member-load i {
  width: var(--target-size);
}

.analytics-dashboard .status-donut {
  box-shadow: 0 14px 30px rgb(52 84 69 / 12%);
  opacity: 0;
  transform: rotate(-24deg) scale(.82);
  transition: transform .85s .35s cubic-bezier(.2,.8,.2,1), opacity .45s .35s ease;
}

.analytics-dashboard.is-ready .status-donut {
  opacity: 1;
  transform: rotate(0) scale(1);
}

.analytics-dashboard .status-donut::after {
  box-shadow: inset 0 0 0 1px #edf1ef;
}

.analytics-dashboard .member-load > div {
  padding: 8px 0;
  border-bottom: 1px solid #edf1ef;
}

.analytics-dashboard .member-load > div:last-child { border-bottom: 0; }

.analytics-dashboard .attention-list button {
  padding: 13px;
  border: 1px solid transparent;
  background: #f7faf8;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.analytics-dashboard .attention-list button:hover {
  transform: translateX(4px);
  border-color: #dce7e1;
  background: #fff;
}

@keyframes analytics-live-pulse {
  0% { box-shadow: 0 0 0 0 rgb(101 229 157 / 44%); }
  60%, 100% { box-shadow: 0 0 0 8px rgb(101 229 157 / 0%); }
}

@media (max-width: 1200px) {
  .analytics-dashboard .analytics-kpis { margin-inline: 0; }
  .analytics-dashboard .analytics-grid.primary { grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); }
}

@media (max-width: 900px) {
  #content.analytics-dashboard { padding: 16px; border-radius: 18px; }
  .analytics-dashboard .page-head { min-height: 148px; padding: 26px 22px; }
  .analytics-dashboard .analytics-meta { top: 103px; left: 38px; }
  .analytics-dashboard .analytics-grid.primary { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
  .analytics-dashboard .page-head button { margin-top: 18px; }
  .analytics-dashboard .analytics-meta { position: static; margin: -2px 0 14px; color: var(--muted); }
  .analytics-dashboard .analytics-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .analytics-dashboard .analytics-kpi { min-height: 126px; padding: 17px; }
  .analytics-dashboard .analytics-card { padding: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .analytics-dashboard .analytics-live i { animation: none; }
  .analytics-dashboard .analytics-kpi,
  .analytics-dashboard .analytics-card,
  .analytics-dashboard .trend-bars i,
  .analytics-dashboard .health-progress i,
  .analytics-dashboard .member-load i,
  .analytics-dashboard .status-donut {
    transition: none;
  }
}