/* ==========================================================
   演示中心页样式（html/demo.html）
   依赖 css/style.css —— 沿用 Win11 Fluent 风格与品牌蓝变量
   ========================================================== */

/* ---------- 顶部状态条 ---------- */
.statbar{
  background:linear-gradient(90deg,#fff4e0 0%,#ffe9cc 100%);
  border-bottom:1px solid #f3d3a0; color:#8a5300; font-size:13.5px;
}
.statbar-in{ display:flex; align-items:center; gap:10px; padding:9px 0; flex-wrap:wrap; }
.statbar .dot{ width:7px; height:7px; border-radius:50%; background:#e8a33d; flex:none; }
.statbar b{ font-weight:700; }
.statbar a{ color:#8a5300; text-decoration:underline; font-weight:600; }

/* ---------- Hero ---------- */
.dhero{ padding:56px 0 10px; text-align:center; }
.dhero h1{ font-size:38px; line-height:1.28; font-weight:700; margin:18px 0 16px; }
.dhero h1 em{ font-style:normal; color:var(--brand-deep); }
.dhero .lead{ font-size:16px; color:var(--ink-2); max-width:760px; margin:0 auto; }

.dstats{ display:flex; justify-content:center; gap:16px; margin-top:30px; flex-wrap:wrap; }
.dstat{
  background:var(--card); backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.7); border-radius:var(--radius);
  padding:16px 30px; box-shadow:var(--shadow); min-width:150px;
}
.dstat b{ display:block; font-size:26px; color:var(--brand-deep); font-weight:700; }
.dstat span{ font-size:13px; color:var(--ink-3); }

/* ---------- 三步流程 ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.step{
  position:relative; background:var(--card); backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.7); border-radius:var(--radius);
  padding:26px 22px; box-shadow:var(--shadow);
  transition:transform .25s, box-shadow .25s;
}
.step:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover); }
.snum{
  width:34px; height:34px; border-radius:10px; margin-bottom:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-deep) 100%);
  box-shadow:0 5px 14px rgba(61,166,247,.34);
}
.step h4{ font-size:16.5px; margin-bottom:8px; }
.step p{ font-size:14px; color:var(--ink-2); }

/* ---------- 演示卡片 ---------- */
.dgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.dgrid.hist{ grid-template-columns:repeat(2,1fr); }

.dcard{
  position:relative; background:var(--card); backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.7); border-radius:var(--radius);
  padding:22px 20px 18px; box-shadow:var(--shadow);
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.dcard:hover{ transform:translateY(-5px); box-shadow:var(--shadow-hover); border-color:rgba(61,166,247,.45); }
.dcard h4{ font-size:16.5px; font-weight:650; margin:2px 0 12px; padding-right:70px; }

.dflag{
  position:absolute; top:16px; right:16px; font-size:11px; padding:2px 9px; border-radius:6px;
  background:#eef0f3; color:#5f6368; font-weight:600;
}
.dflag.industry{ background:#eaf7ee; color:#1e8e3e; }
.dflag.common{ background:var(--brand-light); color:var(--brand-deep); }
.dflag.free{ background:#eef0f3; color:#5f6368; }
.dflag.old{ background:#fff0e0; color:#a35b00; }

.daddr{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:rgba(61,166,247,.07); border-radius:var(--radius-sm);
  padding:9px 12px; margin-bottom:10px;
}
.daddr code{
  font-family:Consolas,"Courier New",monospace; font-size:13.5px; color:var(--brand-deep);
  word-break:break-all;
}
.dstate{
  font-size:11px; padding:1px 8px; border-radius:5px; font-weight:600;
  background:#f1f1f3; color:#6b6b73; white-space:nowrap;
}
.dstate.live{ background:#eaf7ee; color:#1e8e3e; }
.dstate.warn{ background:#fff4e5; color:#c77700; }

.dprice{ font-size:13px; color:var(--ink-3); margin-bottom:14px; }

.dacts{ display:flex; gap:8px; flex-wrap:wrap; }
.dbtn{
  flex:1 1 0%; min-width:0; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center;
  appearance:none; -webkit-appearance:none;
  padding:9px 12px; border-radius:var(--radius-sm); font-family:inherit; font-size:13.5px; font-weight:600; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  border:1px solid rgba(61,166,247,.35); background:rgba(255,255,255,.8); color:var(--brand-deep);
  transition:.2s; cursor:pointer;
}
.dbtn:hover{ background:#fff; box-shadow:var(--shadow); transform:translateY(-1px); }
.dbtn.pri{
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-deep) 100%);
  color:#fff; border-color:transparent;
}
.dbtn.pri:hover{ box-shadow:0 8px 18px rgba(61,166,247,.4); }
.dbtn.copied{ background:#eaf7ee; color:#1e8e3e; border-color:rgba(30,142,62,.3); }

.dempty{ text-align:center; padding:30px; color:var(--ink-3); font-size:14px; }

/* ---------- 复制提示 ---------- */
.toast{
  position:fixed; left:50%; bottom:40px; transform:translateX(-50%) translateY(20px);
  background:rgba(27,27,31,.92); color:#fff; font-size:14px;
  padding:11px 22px; border-radius:999px; opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s; z-index:200; backdrop-filter:blur(10px);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- 响应式 ---------- */
@media (max-width:1000px){
  .steps{ grid-template-columns:1fr; }
  .dgrid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px){
  .dhero h1{ font-size:28px; }
  .dgrid, .dgrid.hist{ grid-template-columns:1fr; }
  .dcard h4{ padding-right:64px; }
}