/* ============================================================
   锐达星宣传站 · 交互 Demo 专属样式（前缀 demo-，可整块摘除）
   ============================================================ */
.demo-shell{
  max-width:960px; margin:0 auto;
  background:var(--bg-elevated);
  border:1px solid var(--border-strong);
  border-radius:var(--r-lg);
  box-shadow:0 24px 70px rgba(3,6,16,.6), 0 0 0 1px rgba(53,224,255,.06) inset;
  overflow:hidden;
}
.demo-bar{
  display:flex; align-items:center; gap:8px;
  padding:12px 16px; background:rgba(4,6,13,.75);
  border-bottom:1px solid var(--border-subtle);
}
.demo-bar .dot{ width:11px; height:11px; border-radius:50%; }
.demo-bar .d1{ background:#ff5f57; } .demo-bar .d2{ background:#febc2e; } .demo-bar .d3{ background:#28c840; }
.demo-bar .t{ margin-left:8px; font-family:var(--font-mono); font-size:12.5px; color:var(--text-tertiary); }
.demo-bar .warn{
  margin-left:auto; font-size:11.5px; color:var(--gold);
  border:1px solid rgba(255,210,122,.35); border-radius:6px; padding:3px 8px;
  white-space:nowrap;
}

.demo-scenes{
  display:flex; gap:8px; padding:14px 16px 4px; overflow-x:auto;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.demo-scenes::-webkit-scrollbar{ display:none; }
.demo-scenes .scn{
  flex:none; min-height:36px; padding:6px 15px; border-radius:999px; cursor:pointer;
  background:var(--surface-1); border:1px solid var(--border-subtle);
  color:var(--text-secondary); font-size:13.5px; transition:.2s var(--ease);
}
.demo-scenes .scn:hover{ border-color:var(--border-strong); color:var(--text-primary); }
.demo-scenes .scn[aria-selected="true"]{
  background:linear-gradient(120deg,rgba(91,124,255,.3),rgba(53,224,255,.16));
  border-color:var(--border-strong); color:#fff;
}

.demo-stage{ padding:18px 16px 8px; min-height:380px; }
@media (min-width:900px){ .demo-stage{ padding:22px 26px 10px; } }

.bubble-user{
  margin-left:auto; max-width:82%;
  background:linear-gradient(135deg,var(--brand-indigo),#4056c9);
  color:#fff; padding:10px 16px; border-radius:16px 16px 4px 16px;
  font-size:14.5px; width:fit-content; margin-bottom:14px;
}
.ai-line{ display:flex; gap:10px; margin-bottom:16px; }
.ai-line .avatar{
  flex:none; width:32px; height:32px; border-radius:9px;
  background:linear-gradient(135deg,var(--ai-cyan),var(--brand-violet));
  display:flex; align-items:center; justify-content:center; font-size:15px;
  box-shadow:0 0 14px rgba(53,224,255,.4);
}
.ai-line .say{ font-size:14.5px; color:var(--text-primary); padding-top:4px; }
.ai-line .say .hl{ color:var(--ai-cyan); font-weight:700; }
.ai-line .say .cursor{ display:inline-block; width:2px; height:1em; background:var(--ai-cyan); vertical-align:-2px; animation:blink .8s step-end infinite; }
@keyframes blink{ 50%{ opacity:0; } }

.steps{ display:grid; gap:8px; margin-bottom:16px; }
.step{
  display:flex; align-items:center; gap:10px;
  background:var(--surface-1); border:1px solid var(--border-subtle);
  border-radius:10px; padding:9px 12px; font-size:13.5px;
  color:var(--text-tertiary); opacity:.45; transform:translateX(-6px);
  transition:.3s var(--ease);
}
.step.done{ opacity:1; transform:none; color:var(--text-secondary); }
.step .tick{
  flex:none; width:20px; height:20px; border-radius:50%;
  border:1.5px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center; font-size:11px;
}
.step.done .tick{ background:rgba(78,240,200,.15); border-color:var(--ai-mint); color:var(--ai-mint); }
.step .m{ flex:1; min-width:0; }
.step .m .kv{ color:var(--ai-cyan); font-family:var(--font-mono); font-size:12.5px; }
.step .m .kv.ok{ color:var(--ok); }
.step .r{ flex:none; font-family:var(--font-mono); font-size:12px; color:var(--text-faint); }
.step.done .r{ color:var(--ai-cyan); }

/* 结果组件 */
.demo-result{ margin-bottom:10px; }
.res-card{
  background:var(--surface-2); border:1px solid var(--border-subtle);
  border-radius:var(--r-md); padding:16px; margin-bottom:10px;
}
.res-card h5{ margin:0 0 10px; font-size:13.5px; color:var(--text-tertiary); font-weight:600; letter-spacing:.06em; }
.res-card table{ width:100%; border-collapse:collapse; font-size:13px; }
.res-card th,.res-card td{ padding:7px 8px; border-bottom:1px solid var(--border-subtle); text-align:left; }
.res-card th{ color:var(--text-tertiary); font-weight:600; font-size:12px; }
.res-card td.num{ text-align:right; font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

.bars{ display:grid; gap:9px; margin-top:12px; }
.bar-row{ display:grid; grid-template-columns:110px 1fr 62px; gap:8px; align-items:center; font-size:12.5px; }
.bar-row .nm{ color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-row .tr{ height:10px; border-radius:5px; background:rgba(122,150,255,.1); overflow:hidden; }
.bar-row .fl{ height:100%; border-radius:5px; width:0; background:linear-gradient(90deg,var(--brand-indigo),var(--ai-cyan)); transition:width .9s var(--ease); }
.bar-row .vl{ text-align:right; font-family:var(--font-mono); color:var(--ai-cyan); }

.refs{ display:grid; gap:8px; }
.ref{
  background:var(--surface-1); border:1px solid var(--border-subtle);
  border-left:3px solid var(--ai-cyan); border-radius:8px; padding:10px 12px; font-size:13px;
}
.ref .src{ color:var(--text-tertiary); font-size:12px; margin-top:4px; display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.ref .sim{ color:var(--ai-mint); font-family:var(--font-mono); }

.report-doc{ font-size:13.5px; color:var(--text-secondary); line-height:1.8; }
.report-doc .h{ color:var(--text-primary); font-weight:700; }
.report-doc .todo{ color:var(--warn); border-bottom:1px dashed rgba(255,210,122,.5); }

/* 可编辑动作卡片（小秘书） */
.act-card{ border:1px solid var(--border-strong); }
.act-card[data-state="done"]{ border-color:rgba(78,240,165,.45); }
.act-card[data-state="done"] input{ pointer-events:none; opacity:.62; }
.act-field{ display:grid; grid-template-columns:96px 1fr; gap:8px; align-items:center; margin-bottom:9px; font-size:13px; }
.act-field label{ color:var(--text-tertiary); }
.act-field label .ai{ color:var(--ai-cyan); font-size:11px; border:1px solid rgba(53,224,255,.35); border-radius:4px; padding:1px 5px; margin-left:6px; }
.act-field input{
  min-height:38px; padding:7px 10px; font-size:14px;
  background:rgba(4,6,13,.7); color:var(--text-primary);
  border:1px solid var(--border-default); border-radius:8px; width:100%;
}
.act-field input:focus{ outline:2px solid var(--brand-indigo); outline-offset:1px; }
.act-foot{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.act-state{ margin-top:10px; font-size:13px; display:none; }
.act-state.ok{ display:block; color:var(--ok); }
.act-state.abort{ display:block; color:var(--warn); }
.act-note{ margin-top:8px; font-size:12px; color:var(--text-faint); }

/* 功能入口导航卡 */
.nav-cards{ display:grid; gap:8px; }
.nav-cards .nc{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  background:var(--surface-1); border:1px solid var(--border-subtle);
  border-radius:10px; padding:11px 13px; font-size:13.5px; color:var(--text-secondary);
  transition:.2s; min-height:44px;
}
.nav-cards .nc:hover{ border-color:var(--border-strong); color:var(--text-primary); }
.nav-cards .nc .em{ font-size:17px; }
.nav-cards .nc .arrow{ margin-left:auto; color:var(--text-faint); }

/* 输入区 */
.demo-input{
  display:flex; gap:8px; padding:14px 16px calc(14px + 2px);
  border-top:1px solid var(--border-subtle); background:rgba(4,6,13,.5);
  flex-wrap:wrap;
}
.demo-chips{ display:flex; gap:6px; flex-wrap:wrap; width:100%; margin-bottom:4px; }
.demo-chips button{
  min-height:32px; padding:4px 11px; font-size:12px; cursor:pointer;
  border-radius:999px; border:1px dashed var(--border-default);
  background:transparent; color:var(--text-tertiary);
}
.demo-chips button:hover{ color:var(--ai-cyan); border-color:var(--ai-cyan); }
.demo-input input{
  flex:1; min-width:180px; min-height:44px; font-size:16px;
  background:rgba(4,6,13,.7); color:var(--text-primary);
  border:1px solid var(--border-default); border-radius:10px; padding:8px 13px;
}
@media (min-width:600px){ .demo-input input{ font-size:14.5px; } }
.demo-input input:focus{ outline:2px solid var(--brand-indigo); outline-offset:1px; }
.demo-input .send{
  flex:none; min-width:88px; border:none; border-radius:10px; cursor:pointer;
  background:linear-gradient(135deg,var(--ai-cyan),#1fa8d8); color:#04222c;
  font-weight:700; font-size:14.5px; min-height:44px;
}
.demo-input .send:disabled{ opacity:.5; cursor:not-allowed; }
.demo-foot{
  padding:0 16px calc(14px + 0px); font-size:11.5px; color:var(--text-faint);
  border-top:1px dashed var(--border-subtle); margin-top:0; padding-top:10px;
}
.demo-stage .empty-hint{ font-size:12.5px; color:var(--text-faint); padding:8px 2px; }