/* ═══════════════════════════════════════════════════════════
   俐璇 v280 —「微信直达」企微机器人面板
   设计：冷色终端底 + 微信绿点缀，视觉冲击集中在 hero，
        操作区极简克制（对标 Linear 的克制感 + Bloomberg 的密度）
   ═══════════════════════════════════════════════════════════ */
.wx-direct{padding:20px 22px 28px;display:flex;flex-direction:column;gap:18px;
  max-width:1600px;margin:0 auto;width:100%}

/* ── Hero ── */
.wxd-hero{position:relative;overflow:hidden;border-radius:var(--radius-xl);
  padding:26px 28px;display:flex;gap:28px;align-items:center;flex-wrap:wrap;
  background:
    radial-gradient(1100px 300px at 8% -40%, rgba(7,193,96,.16), transparent 60%),
    radial-gradient(900px 340px at 92% 130%, rgba(90,140,255,.16), transparent 60%),
    linear-gradient(135deg, #0b1119 0%, #0a0e15 100%);
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow-card,0 2px 12px rgba(0,0,0,.4))}
.wxd-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(7,193,96,.05),transparent);
  animation:wxdSheen 6s ease-in-out infinite}
@keyframes wxdSheen{0%,100%{opacity:.25}50%{opacity:.7}}
.wxd-hero-txt{flex:1 1 420px;min-width:300px;position:relative;z-index:1}
.wxd-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--wechat-green);background:rgba(7,193,96,.10);
  border:1px solid rgba(7,193,96,.30);border-radius:999px;padding:4px 12px}
.wxd-badge::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--wechat-green);box-shadow:0 0 8px rgba(7,193,96,.9);
  animation:wxdPulse 1.8s ease-in-out infinite}
@keyframes wxdPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.75)}}
.wxd-title{margin:12px 0 8px;font-size:26px;line-height:1.28;font-weight:800;
  color:var(--text-primary);letter-spacing:-.01em}
.wxd-title em{font-style:normal;
  background:linear-gradient(135deg,#07c160 0%,#00d4ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.wxd-sub{margin:0;font-size:13.5px;line-height:1.7;color:var(--text-secondary);max-width:52ch}
.wxd-steps{flex:0 1 340px;display:flex;flex-direction:column;gap:9px;position:relative;z-index:1}
.wxd-step{display:flex;align-items:center;gap:11px;font-size:13px;
  color:var(--text-secondary);background:rgba(255,255,255,.026);
  border:1px solid var(--line-default);border-radius:var(--radius-md);padding:10px 13px}
.wxd-step-n{flex:0 0 22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:11.5px;font-weight:800;color:#04120a;background:var(--wechat-green)}

/* ── 卡片 ── */
.wxd-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px}
.wxd-card{background:var(--bg-surface);border:1px solid var(--line-default);
  border-radius:var(--radius-lg);padding:18px 20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.wxd-card-wide{grid-column:1/-1}
.wxd-card-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.wxd-card-h h3{margin:0;font-size:15px;font-weight:700;color:var(--text-primary)}
.wxd-chip{font-size:11.5px;color:var(--text-muted);background:var(--bg-elevated);
  border:1px solid var(--line-default);border-radius:999px;padding:3px 10px;white-space:nowrap}
.wxd-chip.ok{color:var(--down-bright);border-color:rgba(0,200,83,.3)}
.wxd-chip.warn{color:var(--warn-bright);border-color:rgba(245,166,35,.3)}

/* ── 表单 ── */
.wxd-label{display:block;font-size:12px;font-weight:600;color:var(--text-secondary);
  margin:0 0 6px;letter-spacing:.02em}
.wxd-input-row{display:flex;gap:8px;align-items:stretch}
.wxd-input{flex:1 1 auto;min-width:0;height:38px;padding:0 12px;font-size:13px;
  color:var(--text-primary);background:var(--bg-base);
  border:1px solid var(--line-strong);border-radius:var(--radius-md);
  outline:none;transition:border-color .15s,box-shadow .15s;
  font-family:inherit;box-sizing:border-box}
select.wxd-input{cursor:pointer;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),
    linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);
  background-position:calc(100% - 16px) 16px,calc(100% - 11px) 16px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px}
.wxd-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.wxd-input::placeholder{color:var(--text-disabled)}
.wxd-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wxd-hint{font-size:11.5px;line-height:1.6;color:var(--text-muted);margin-top:-4px}
.wxd-hint.ok{color:var(--down-bright)}
.wxd-hint.bad{color:var(--warn-bright)}

/* ── 场景多选 ── */
.wxd-scenes{display:flex;flex-wrap:wrap;gap:8px}
.wxd-scene{display:inline-flex;align-items:center;gap:7px;cursor:pointer;user-select:none;
  font-size:12px;color:var(--text-secondary);padding:6px 12px;
  background:var(--bg-elevated);border:1px solid var(--line-default);
  border-radius:999px;transition:.15s}
.wxd-scene:hover{border-color:var(--line-accent);color:var(--text-primary)}
.wxd-scene input{accent-color:var(--wechat-green);width:13px;height:13px;margin:0;cursor:pointer}
.wxd-scene.on{color:var(--text-primary);border-color:rgba(7,193,96,.42);
  background:rgba(7,193,96,.09)}

/* ── 按钮 ── */
.wxd-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:2px}
.wxd-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:36px;padding:0 16px;font-size:13px;font-weight:600;cursor:pointer;
  color:var(--text-primary);background:var(--bg-elevated);
  border:1px solid var(--line-strong);border-radius:var(--radius-md);
  transition:.15s;font-family:inherit;white-space:nowrap}
.wxd-btn:hover:not(:disabled){background:var(--bg-hover);border-color:var(--line-accent)}
.wxd-btn:disabled{opacity:.55;cursor:not-allowed}
.wxd-btn-primary{color:#04120a;border-color:transparent;
  background:linear-gradient(135deg,#07c160 0%,#0abf6a 100%);
  box-shadow:0 2px 14px rgba(7,193,96,.28)}
.wxd-btn-primary:hover:not(:disabled){filter:brightness(1.08);
  box-shadow:0 4px 20px rgba(7,193,96,.4);background:linear-gradient(135deg,#07c160,#0abf6a)}
.wxd-btn-ghost{background:transparent;color:var(--text-secondary)}
.wxd-btn-mini{height:28px;padding:0 11px;font-size:11.5px}
.wxd-btn-danger{color:var(--danger);border-color:rgba(255,71,87,.28)}
.wxd-btn-danger:hover:not(:disabled){background:rgba(255,71,87,.10)}
.wxd-ic{width:15px;height:15px;flex:0 0 15px}

/* ── 结果 / 预览 ── */
.wxd-result{border-radius:var(--radius-md);padding:11px 14px;font-size:12.5px;
  border:1px solid var(--line-default);background:var(--bg-elevated)}
.wxd-result.ok{border-color:rgba(0,200,83,.35);background:rgba(0,200,83,.07)}
.wxd-result.bad{border-color:rgba(245,166,35,.35);background:rgba(245,166,35,.07)}
.wxd-result-t{font-weight:700;color:var(--text-primary);margin-bottom:3px}
.wxd-result-d{color:var(--text-muted);font-size:11.5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.wxd-preview{margin:0;max-height:280px;overflow:auto;white-space:pre-wrap;word-break:break-word;
  font-size:12px;line-height:1.72;color:var(--text-secondary);
  background:var(--bg-base);border:1px solid var(--line-default);
  border-radius:var(--radius-md);padding:13px 15px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ── 机器人卡 ── */
.wxd-bots{display:flex;flex-direction:column;gap:10px;max-height:340px;overflow:auto}
.wxd-bot{border:1px solid var(--line-default);border-radius:var(--radius-md);
  padding:12px 13px;background:var(--bg-elevated);display:flex;flex-direction:column;gap:8px}
.wxd-bot-top{display:flex;align-items:center;gap:8px;min-width:0}
.wxd-bot-name{font-size:13px;color:var(--text-primary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wxd-bot-key{margin-left:auto;font-size:11px;color:var(--text-disabled);
  font-family:ui-monospace,Menlo,monospace;white-space:nowrap}
.wxd-dot{width:7px;height:7px;border-radius:50%;background:var(--flat);flex:0 0 7px}
.wxd-dot.on{background:var(--wechat-green);box-shadow:0 0 7px rgba(7,193,96,.8)}
.wxd-bot-tags{display:flex;flex-wrap:wrap;gap:5px}
.wxd-tag{font-size:10.5px;color:var(--text-muted);background:var(--bg-base);
  border:1px solid var(--line-faint);border-radius:4px;padding:2px 7px}
.wxd-bot-meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font-size:11px;color:var(--text-muted)}
.wxd-bot-act{display:flex;gap:7px}
.wxd-bc{border-top:1px solid var(--line-faint);padding-top:12px;
  display:flex;flex-direction:column;gap:7px}
.wxd-empty{padding:22px 10px;text-align:center;font-size:12.5px;color:var(--text-disabled)}

/* ── 审计表 ── */
.wxd-tablewrap{overflow:auto;border:1px solid var(--line-faint);border-radius:var(--radius-md)}
.wxd-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:12px}
.wxd-table th,.wxd-table td{padding:8px 11px;
  border-bottom:1px solid var(--line-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wxd-table th{position:sticky;top:0;z-index:1;background:var(--bg-elevated);
  color:var(--text-secondary);font-weight:600;font-size:11.5px;letter-spacing:.02em}
.wxd-table td{color:var(--text-secondary)}
.wxd-table tbody tr:hover td{background:var(--bg-hover)}
.wxd-table tbody tr:last-child td{border-bottom:none}
.wxd-table .c-l{text-align:left}
.wxd-table .c-c{text-align:center}
.wxd-table .c-r{text-align:right;font-variant-numeric:tabular-nums}
.wxd-table th:nth-child(1),.wxd-table td:nth-child(1){width:148px}
.wxd-table th:nth-child(2),.wxd-table td:nth-child(2){width:88px}
.wxd-table th:nth-child(4),.wxd-table td:nth-child(4){width:110px}
.wxd-table th:nth-child(5),.wxd-table td:nth-child(5){width:96px}
.wxd-table th:nth-child(6),.wxd-table td:nth-child(6){width:82px}
.wxd-table th:nth-child(7),.wxd-table td:nth-child(7){width:148px}
.wxd-st{display:inline-block;font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px}
.wxd-st.ok{color:var(--down-bright);background:var(--down-soft)}
.wxd-st.bad{color:var(--warn-bright);background:var(--warn-soft)}
.wxd-trace{font-size:11px;color:var(--text-disabled);
  font-family:ui-monospace,Menlo,monospace}

/* ── 响应式 ── */
@media (max-width:1180px){
  .wxd-grid{grid-template-columns:1fr}
}
@media (max-width:768px){
  .wx-direct{padding:14px 12px 22px;gap:14px}
  .wxd-hero{padding:20px 18px;gap:18px}
  .wxd-title{font-size:21px}
  .wxd-row2{grid-template-columns:1fr}
  .wxd-actions .wxd-btn{flex:1 1 auto}
  .wxd-card{padding:15px 14px}
}

/* ── 侧边栏「微信直达」导航项（微信绿身份标识） ── */
.nav-item-wxd .icon{color:var(--wechat-green)}
.nav-item-wxd:hover{background:rgba(7,193,96,.09)}
.nav-item-wxd.active{background:rgba(7,193,96,.14);
  box-shadow:inset 2px 0 0 var(--wechat-green)}
.nav-item-wxd.active .nav-text{color:var(--wechat-green)}
.nav-badge.wxd-nav-badge{font-size:9px;font-weight:800;letter-spacing:.08em;
  padding:1px 6px;border-radius:999px;color:#fff;
  background:linear-gradient(135deg,#07c160,#0aa657);
  box-shadow:0 0 10px rgba(7,193,96,.45);border:0}

/* ── 输入框校验态（边框级即时反馈） ── */
.wxd-input.ok{border-color:rgba(7,193,96,.62);
  box-shadow:0 0 0 3px rgba(7,193,96,.13)}
.wxd-input.bad{border-color:var(--warn-bright);
  box-shadow:0 0 0 3px var(--warn-soft)}

/* ── 企微 Markdown/HTML 预览高亮 ── */
.wxd-preview .wxd-fmt{display:inline}
.wxd-preview .wxd-fmt.green{color:var(--down-bright)}
.wxd-preview .wxd-fmt.red{color:var(--up-bright)}
.wxd-preview .wxd-fmt.muted{color:var(--text-muted)}