/* 小演示的通用零件:窗口外壳、手机外框、表格、标签、提示气泡、进度条
   演示里一律是虚构数据;初始状态必须本身就看得见(不靠入场动画露出来) */

.demo {
  --d-bg: #ffffff;
  --d-ink: #1b1d22;
  --d-muted: #6b7280;
  --d-line: #e6e8ec;
  --d-soft: #f5f6f8;
  --d-accent: #2f6fed;
  --d-good: #16a34a;
  --d-warn: #d97706;
  --d-bad: #dc2626;
  position: relative;
  font-family: var(--font);
  font-size: .875rem;
  line-height: 1.45;
  color: var(--d-ink);
  -webkit-user-select: none;
  user-select: none;
}

/* ---------- 窗口外壳 ---------- */
.win {
  background: var(--d-bg);
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, .08);
  box-shadow: 0 2px 6px rgba(15, 20, 30, .06), 0 24px 60px rgba(15, 20, 30, .16);
  overflow: hidden;
}
:root[data-theme="dark"] .win { border-color: rgba(255, 255, 255, .1); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.win-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  height: 2.5rem;
  padding: 0 .875rem;
  background: var(--d-soft);
  border-bottom: 1px solid var(--d-line);
  color: var(--d-muted);
  font-size: .8125rem;
  white-space: nowrap;
  overflow: hidden;
}
.win-dots { display: flex; gap: .4rem; flex: none; }
.win-dots i { width: .7rem; height: .7rem; border-radius: 50%; background: #ff5f57; }
.win-dots i:nth-child(2) { background: #febc2e; }
.win-dots i:nth-child(3) { background: #28c840; }
.win-url {
  flex: 1;
  max-width: 22rem;
  padding: .2rem .75rem;
  border-radius: 6px;
  background: var(--d-bg);
  border: 1px solid var(--d-line);
  overflow: hidden;
  text-overflow: ellipsis;
}
.win-body { position: relative; padding: 1rem; min-height: 18rem; }

/* ---------- 手机外框 ---------- */
.phone {
  position: relative;
  width: 17.5rem;
  max-width: 100%;
  margin-inline: auto;
  aspect-ratio: 9 / 18.5;
  padding: .6rem;
  border-radius: 2.6rem;
  background: #111;
  box-shadow: 0 24px 60px rgba(15, 20, 30, .25);
}
.phone-screen {
  position: relative;
  height: 100%;
  border-radius: 2rem;
  overflow: hidden;
  background: var(--d-bg);
}
.phone-notch {
  position: absolute;
  top: .5rem;
  left: 50%;
  width: 5.5rem;
  height: 1.5rem;
  border-radius: 1rem;
  background: #111;
  transform: translateX(-50%);
  z-index: 3;
}

/* ---------- 通用零件 ---------- */
.d-btn {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-height: 2.125rem;
  padding: 0 .875rem;
  border: 1px solid var(--d-line);
  border-radius: 8px;
  background: var(--d-bg);
  color: var(--d-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.d-btn:hover { border-color: var(--d-muted); }
.d-btn.primary { background: var(--d-accent); border-color: var(--d-accent); color: #fff; }
.d-btn.primary:hover { filter: brightness(1.06); }
.d-btn[disabled] { opacity: .55; cursor: default; }

.d-chip {
  display: inline-flex;
  align-items: center;
  padding: .2rem .625rem;
  border-radius: 999px;
  border: 1px solid var(--d-line);
  background: var(--d-bg);
  color: var(--d-muted);
  font: inherit;
  font-size: .8125rem;
  cursor: pointer;
  white-space: nowrap;
}
.d-chip.on { background: var(--d-accent); border-color: var(--d-accent); color: #fff; }

.d-pill { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.d-pill.good { background: #dcfce7; color: #15803d; }
.d-pill.info { background: #dbeafe; color: #1d4ed8; }
.d-pill.warn { background: #fef3c7; color: #b45309; }
.d-pill.bad { background: #fee2e2; color: #b91c1c; }
.d-pill.mute { background: var(--d-soft); color: var(--d-muted); }

.d-table { width: 100%; border-collapse: collapse; }
.d-table th {
  padding: .4rem .5rem;
  border-bottom: 1px solid var(--d-line);
  color: var(--d-muted);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.d-table td { padding: .5rem; border-bottom: 1px solid var(--d-line); white-space: nowrap; }
.d-table tr { transition: background-color .4s, opacity .4s; }
.d-table tr.flash { background: color-mix(in srgb, var(--d-accent) 10%, transparent); }
.d-table tr.gone { opacity: .25; text-decoration: line-through; }

.d-bar { height: .5rem; border-radius: 999px; background: var(--d-soft); overflow: hidden; }
.d-bar > i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--d-accent); transition: width .25s linear; }

.d-toast {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .625rem;
  max-width: calc(100% - 2rem);
  padding: .625rem .875rem;
  border-radius: 12px;
  background: var(--d-bg);
  border: 1px solid var(--d-line);
  box-shadow: 0 12px 30px rgba(15, 20, 30, .18);
  transform: translateY(.5rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s;
  z-index: 4;
}
.d-toast.show { opacity: 1; transform: none; }
.d-toast b { display: block; }
.d-toast small { color: var(--d-muted); }
.d-check {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 8px;
  background: #dcfce7;
  color: #15803d;
  font-weight: 700;
}

.d-input {
  width: 100%;
  min-height: 2.125rem;
  padding: .4rem .625rem;
  border: 1px solid var(--d-line);
  border-radius: 8px;
  background: var(--d-bg);
  color: var(--d-ink);
  font: inherit;
}
.d-input:focus { outline: 2px solid color-mix(in srgb, var(--d-accent) 40%, transparent); outline-offset: 0; }

.d-muted { color: var(--d-muted); }
.d-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.d-grow { flex: 1; min-width: 0; }
.d-scroll { overflow-x: auto; }

/* 演示下方的提示:告诉访客可以点哪 */
.demo-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .75rem;
  color: var(--muted);
  font-size: .8125rem;
}
.demo-hint .replay {
  font: inherit;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: 0;
  padding: .25rem 0;
  cursor: pointer;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .d-toast, .d-table tr, .d-bar > i { transition: none; }
}

/* ======================================================================
   公共:舞台、假光标、隐藏
   ====================================================================== */
.demo [hidden] { display: none !important; }
.demo-stage { position: relative; }
.d-cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  margin: -3px 0 0 -3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 11-6.5 1.2L16 21l-3 1.4-3.4-6.8L4 20z' fill='%23111' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0;
  pointer-events: none;
  transition: transform .5s cubic-bezier(.3, .7, .2, 1), opacity .25s;
  z-index: 20;
}
.d-cursor.on { opacity: 1; }
.d-cursor.press { scale: .82; }
.d-cursor::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: rgba(47, 111, 237, .35);
  opacity: 0;
}
.d-cursor.press::after { opacity: 1; }
.tr-seg { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--d-soft); border: 1px solid var(--d-line); }
.tr-seg button { font: inherit; font-size: .8125rem; border: 0; background: none; color: var(--d-muted); padding: .25rem .625rem; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.tr-seg button.on { background: var(--d-bg); color: var(--d-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); font-weight: 600; }

/* ======================================================================
   1. PR 搜索器
   ====================================================================== */
.demo[data-demo="search"] { --d-accent: #2457d6; --d-soft: #f5f6f8; }
.ps-lights { margin-left: auto; display: flex; align-items: center; gap: .375rem; }
.ps-lights i { width: .45rem; height: .45rem; border-radius: 50%; background: #22c55e; }
.ps-tabs { display: flex; gap: 1rem; margin-bottom: .75rem; border-bottom: 1px solid var(--d-line); }
.ps-tabs > * { padding: .25rem 0 .5rem; color: var(--d-muted); white-space: nowrap; }
.ps-tabs b { color: var(--d-accent); border-bottom: 2px solid var(--d-accent); }
.ps-filters { margin-top: .625rem; gap: .375rem; }
.ps-sep { margin-left: .5rem; }
.ps-query { margin: .625rem 0; font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-query code { font-family: ui-monospace, Menlo, monospace; color: var(--d-accent); }
.ps-sources { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-bottom: .75rem; }
.ps-sources div { padding: .5rem .625rem; border: 1px solid var(--d-line); border-radius: 10px; background: var(--d-soft); min-width: 0; }
.ps-sources b { display: block; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.ps-sources small { display: block; color: var(--d-muted); font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-results { min-height: 9rem; }
.ps-hit td { background: #e3f4e8; }
.ps-title { max-width: 17rem; overflow: hidden; text-overflow: ellipsis; }
.ps-empty { padding: 1.5rem .5rem !important; text-align: center; }
.ps-foot { margin-top: .75rem; justify-content: flex-end; }

/* ======================================================================
   2. 媒体定级(深色)
   ====================================================================== */
.demo[data-demo="tier"] {
  --d-bg: #10152c; --d-ink: #e6e9f5; --d-muted: #8a93b8; --d-line: #232a4a; --d-soft: #0b0f22;
  --d-accent: #6d8cff; --d-good: #34d399;
}
.demo[data-demo="tier"] .win { background: #05060f; border-color: #1b2142; }
.demo[data-demo="tier"] .win-bar { background: #0b0f22; border-color: #1b2142; }
.demo[data-demo="tier"] .win-url { background: #10152c; border-color: #232a4a; }
.demo[data-demo="tier"] .d-btn { background: #161c38; border-color: #2a3360; color: var(--d-ink); }
.demo[data-demo="tier"] .d-btn.primary { background: var(--d-accent); border-color: var(--d-accent); color: #0b0f22; }
.demo[data-demo="tier"] .d-pill.good { background: rgba(52, 211, 153, .15); color: #34d399; }
.demo[data-demo="tier"] .d-pill.warn { background: rgba(251, 191, 36, .15); color: #fbbf24; }
.demo[data-demo="tier"] .d-pill.mute { background: #161c38; color: var(--d-muted); }
.tr-tools { gap: .5rem; margin-bottom: .75rem; }
.tr-table { min-height: 12rem; }
.tr-table td { color: var(--d-ink); }
.tr-tier { display: inline-block; padding: .1rem .5rem; border-radius: 6px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.tr-tier.t0 { background: #6d8cff; color: #0b0f22; }
.tr-tier.t1 { background: rgba(109, 140, 255, .35); color: #dfe5ff; }
.tr-tier.t2 { background: rgba(109, 140, 255, .16); color: #b9c4f5; }
.tr-tier.t3 { background: #161c38; color: var(--d-muted); }
.tr-note { margin-top: .75rem; font-size: .8125rem; }

/* ======================================================================
   3. MX Mailer
   ====================================================================== */
.demo[data-demo="mailer"] { --d-accent: #0071e3; --d-ink: #1d1d1f; --d-soft: #f5f5f7; }
.mx-camp { margin-left: auto; color: var(--d-ink); font-weight: 600; }
.mx-body { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); min-height: 21rem; }
.mx-side { display: flex; flex-direction: column; gap: .125rem; padding: .625rem .5rem; background: #1c1c1e; }
.mx-side button {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: .45rem .5rem; border: 0; border-radius: 8px; background: none;
  color: #c7c7cc; font: inherit; font-size: .8125rem; text-align: left; cursor: pointer;
}
.mx-side button i {
  display: grid; place-items: center; flex: none; width: 1.25rem; height: 1.25rem;
  border-radius: 50%; background: #3a3a3c; color: #fff; font-style: normal; font-size: .6875rem; font-weight: 700;
}
.mx-side button.on { background: #2c2c2e; color: #fff; }
.mx-side button.on i { background: var(--d-accent); }
.mx-side em { margin-left: auto; padding: 0 .375rem; border-radius: 999px; background: #ff3b30; color: #fff; font-style: normal; font-size: .6875rem; font-weight: 700; }
.mx-main { padding: .875rem; background: var(--d-soft); }
.mx-rounds { display: flex; gap: .375rem; margin-bottom: .625rem; overflow: hidden; }
.mx-rounds > * { padding: .2rem .625rem; border-radius: 999px; font-size: .75rem; white-space: nowrap; color: var(--d-muted); background: #fff; border: 1px solid var(--d-line); }
.mx-rounds b { background: var(--d-accent); border-color: var(--d-accent); color: #fff; }
.mx-card { padding: .75rem .875rem; margin-bottom: .625rem; border-radius: 12px; background: #fff; border: 1px solid var(--d-line); }
.mx-card h4 { margin: 0 0 .5rem; font-size: .875rem; }
.mx-checks { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .3rem; }
.mx-checks li { display: flex; align-items: center; gap: .5rem; color: var(--d-muted); }
.mx-checks li i { flex: none; width: 1rem; height: 1rem; border-radius: 50%; border: 1.5px solid #c7c7cc; transition: background .2s, border-color .2s; }
.mx-checks li.ok { color: var(--d-ink); }
.mx-checks li.ok i { background: var(--d-good) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100%; border-color: var(--d-good); }
.mx-progress b { font-variant-numeric: tabular-nums; }
.mx-progress .d-bar { margin-top: .5rem; }
.mx-report { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.mx-report div { padding: .5rem .625rem; border-radius: 10px; background: #fff; border: 1px solid var(--d-line); }
.mx-report b { display: block; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.mx-report small { color: var(--d-muted); font-size: .75rem; }
.mx-who { margin: 0 0 .625rem; }
.mx-msg { max-width: 85%; padding: .5rem .75rem; margin-bottom: .5rem; border-radius: 12px; }
.mx-msg.them { background: #fff; border: 1px solid var(--d-line); }
.mx-msg.me { margin-left: auto; background: var(--d-accent); color: #fff; }
.mx-compose { margin-top: .75rem; }
.mx-tip { margin: .5rem 0 0; font-size: .75rem; }
.mx-placeholder { padding: 3rem 1rem; text-align: center; }

/* ======================================================================
   4. KOL 红人
   ====================================================================== */
.demo[data-demo="kol"] { --d-accent: #2b5cff; --d-soft: #f6f7f9; }
.kol-tabs { display: flex; gap: 1rem; padding: .5rem .875rem 0; border-bottom: 1px solid var(--d-line); overflow: hidden; }
.kol-tabs > * { position: relative; padding-bottom: .5rem; color: var(--d-muted); white-space: nowrap; }
.kol-tabs b { color: var(--d-accent); border-bottom: 2px solid var(--d-accent); }
.kol-tabs em { position: absolute; top: -.35rem; right: -.75rem; min-width: 1rem; padding: 0 .3rem; border-radius: 999px; background: #ef4444; color: #fff; font-size: .6875rem; font-style: normal; text-align: center; }
.kol-body { display: grid; grid-template-columns: 11rem minmax(0, 1fr); min-height: 19rem; }
.kol-list { list-style: none; margin: 0; padding: .375rem; border-right: 1px solid var(--d-line); }
.kol-list li { position: relative; padding: .5rem .625rem; border-radius: 8px; cursor: pointer; }
.kol-list li:hover { background: var(--d-soft); }
.kol-list li.on { background: #e8eeff; }
.kol-list b { display: block; font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; }
.kol-list small { color: var(--d-muted); font-size: .75rem; }
.kol-list .dot { position: absolute; right: .625rem; top: .875rem; width: .5rem; height: .5rem; border-radius: 50%; background: #ef4444; }
.kol-chat { display: flex; flex-direction: column; background: #f3f5f8; min-width: 0; }
.kol-thread { flex: 1; display: flex; flex-direction: column; gap: .5rem; padding: .875rem; max-height: 15rem; overflow-y: auto; }
.kol-empty { margin: auto; }
.kol-b { max-width: 82%; padding: .5rem .75rem; border-radius: 14px; }
.kol-b.me { align-self: flex-end; background: #d9e5ff; border-bottom-right-radius: 4px; }
.kol-b.them { align-self: flex-start; background: #fff; border: 1px solid var(--d-line); border-bottom-left-radius: 4px; }
.kol-b.pending { opacity: .6; }
.kol-meta { display: block; margin-top: .25rem; color: var(--d-muted); font-size: .6875rem; }
.kol-meta button { font: inherit; color: var(--d-accent); background: none; border: 0; padding: 0; cursor: pointer; font-weight: 600; }
.kol-compose { padding: .625rem .875rem .75rem; border-top: 1px solid var(--d-line); background: #fff; }
.kol-compose small { display: block; margin-top: .3rem; font-size: .6875rem; }

/* ======================================================================
   5. 工时助手
   ====================================================================== */
.demo[data-demo="time"] { --d-accent: #03a9f4; --d-ink: #1c2530; --d-soft: #f4f6f8; }
.demo[data-demo="time"] .d-btn.primary { background: #0288d1; border-color: #0288d1; }
.ck-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: .75rem; padding: .75rem; background: var(--d-soft); }
.ck-left, .ck-right { padding: .875rem; border-radius: 12px; background: #fff; border: 1px solid var(--d-line); min-width: 0; }
.ck-date { display: flex; align-items: center; justify-content: space-between; margin-bottom: .625rem; }
.ck-date button { border: 1px solid var(--d-line); background: #fff; border-radius: 6px; width: 1.75rem; height: 1.75rem; font: inherit; color: var(--d-muted); }
.ck-ask { margin: 0 0 .5rem; color: var(--d-muted); }
.ck-line { display: flex; align-items: center; gap: .5rem; padding: .375rem 0; border-bottom: 1px solid var(--d-line); }
.ck-line i { flex: none; width: .625rem; height: .625rem; border-radius: 3px; }
.ck-line .d-input { width: 3.5rem; text-align: right; }
.ck-add { margin: .5rem 0; }
.ck-total { margin: 0 0 .625rem; }
.ck-done { margin: .625rem 0 0; padding: .4rem .625rem; border-radius: 8px; background: #dcfce7; color: #166534; }
.ck-done button { font: inherit; background: none; border: 0; padding: 0; color: #166534; text-decoration: underline; cursor: pointer; }
.ck-head { margin: 0 0 .5rem; font-weight: 600; }
.ck-axis { position: relative; height: 17rem; margin-left: .25rem; border-left: 1px solid var(--d-line); }
.ck-hour { position: absolute; left: -.25rem; transform: translate(-100%, -50%); font-size: .625rem; color: var(--d-muted); padding-right: .25rem; display: none; }
.ck-blk {
  position: absolute; left: .375rem; right: 0; padding: 0 .4rem; overflow: hidden;
  border-radius: 5px; color: #fff; font-size: .6875rem; font-weight: 600; line-height: 1.5;
  white-space: nowrap; text-overflow: ellipsis; border: 1px solid rgba(255, 255, 255, .7);
}
.ck-blk.lunch { color: var(--d-muted); background: repeating-linear-gradient(135deg, #eef1f4 0 6px, #e1e6eb 6px 12px); }
.ck-blk.meet { color: #fff; background: #94a3b8; }

/* ======================================================================
   6. 报价单
   ====================================================================== */
.demo[data-demo="quote"] { --d-accent: #c00000; --d-soft: #f4f3f1; }
.qt-body { display: grid; grid-template-columns: 9rem minmax(0, 1fr); min-height: 20rem; background: var(--d-soft); }
.qt-side { padding: .75rem .5rem; border-right: 1px solid var(--d-line); }
.qt-side .d-btn { width: 100%; justify-content: center; font-size: .75rem; padding: 0 .375rem; }
.qt-side ul { list-style: none; margin: .625rem 0 0; padding: 0; }
.qt-side li { padding: .4rem .5rem; border-radius: 6px; font-size: .8125rem; color: var(--d-muted); }
.qt-side li.on { background: #fff; color: var(--d-ink); font-weight: 600; }
.qt-main { padding: .75rem .875rem; min-width: 0; }
.qt-table { background: #fff; border-radius: 8px; }
.qt-addwrap { position: relative; margin: .5rem 0; }
.qt-menu {
  position: absolute; left: 0; top: calc(100% + .25rem); z-index: 5; width: 16rem; max-width: 100%;
  padding: .375rem; border-radius: 10px; background: #fff; border: 1px solid var(--d-line);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .15);
}
.qt-menu .d-input { margin-bottom: .25rem; }
.qt-menu button {
  display: flex; justify-content: space-between; gap: .5rem; width: 100%; padding: .4rem .5rem;
  border: 0; border-radius: 6px; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--d-ink);
}
.qt-menu button:hover { background: var(--d-soft); }
.qt-menu small { color: var(--d-muted); }
.qt-sum { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .625rem 1rem; margin-bottom: .625rem; }
.qt-toggle { display: flex; align-items: center; gap: .375rem; cursor: pointer; }
.qt-toggle input { accent-color: var(--d-accent); }
.qt-sum dl { display: grid; grid-template-columns: auto auto; gap: .15rem 1rem; margin: 0 0 0 auto; text-align: right; }
.qt-sum dt { color: var(--d-muted); }
.qt-sum dd { margin: 0; font-variant-numeric: tabular-nums; }
.qt-grand { font-weight: 700; color: var(--d-ink) !important; }
.qt-xlsx { margin-top: .625rem; padding: .5rem; border-radius: 8px; background: #fff; border: 1px solid var(--d-line); }
.qt-file { margin: 0 0 .375rem; font-size: .75rem; color: var(--d-muted); }
.qt-xlsx table { width: 100%; border-collapse: collapse; font-size: .75rem; }
.qt-xlsx th { background: #ce0001; color: #fff; text-align: left; padding: .25rem .4rem; }
.qt-xlsx td { padding: .25rem .4rem; border: 1px solid #e5e5e5; }
.qt-xtotal td { font-weight: 700; }

/* ======================================================================
   7. PPT 生成器
   ====================================================================== */
.demo[data-demo="ppt"] { --d-accent: #c00000; --d-soft: #f3f2ef; }
.pp-actions { margin-left: auto; display: flex; gap: .375rem; }
.pp-actions .d-btn { min-height: 1.75rem; font-size: .75rem; }
.pp-ai { background: #2563eb !important; border-color: #2563eb !important; color: #fff !important; }
.pp-body { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 9.5rem; gap: .625rem; padding: .625rem; min-height: 19rem; background: var(--d-soft); }
.pp-thumbs { display: flex; flex-direction: column; gap: .375rem; }
.pp-thumb { position: relative; aspect-ratio: 16 / 9; padding: .25rem .3rem; border-radius: 4px; background: #fff; border: 1px solid var(--d-line); font-size: .5rem; line-height: 1.2; overflow: hidden; animation: pp-pop .3s ease-out; }
.pp-thumb i { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--pp); }
.pp-thumb.on { outline: 2px solid var(--pp); }
@keyframes pp-pop { from { transform: scale(.85); } to { transform: none; } }
.pp-center { display: flex; align-items: center; justify-content: center; min-width: 0; }
.pp-new { width: 100%; max-width: 20rem; display: grid; gap: .625rem; padding: 1rem; border-radius: 12px; background: #fff; border: 1px solid var(--d-line); }
.pp-new p { margin: 0; }
.pp-sw { gap: .375rem; }
.pp-sw button { width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--d-line); cursor: pointer; }
.pp-sw button.on { box-shadow: 0 0 0 2px var(--d-ink); }
.pp-slide { position: relative; width: 100%; aspect-ratio: 16 / 9; padding: 1.25rem 1.25rem 1rem 1.6rem; border-radius: 6px; background: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, .1); overflow: visible; }
.pp-bar { position: absolute; left: 0; top: 1.25rem; width: 6px; height: 2rem; background: var(--pp); }
.pp-logo { position: absolute; right: .75rem; top: .625rem; font-size: .5625rem; font-weight: 700; letter-spacing: .1em; color: var(--pp); }
.pp-slide h5 { margin: 0 0 .75rem; font-size: 1rem; line-height: 1.3; max-width: 90%; outline-offset: 3px; cursor: pointer; border-radius: 2px; }
.pp-slide h5.sel { outline: 2px solid #f43f5e; }
.pp-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.pp-cols b { display: block; font-size: 1.25rem; color: var(--pp); }
.pp-cols b.pp-stray { color: #7a3cff; }
.pp-cols small { color: var(--d-muted); font-size: .6875rem; }
.pp-ask { position: absolute; left: 1.6rem; right: 1.25rem; bottom: .75rem; }
.pp-check { padding: .625rem; border-radius: 10px; background: #fff; border: 1px solid var(--d-line); font-size: .8125rem; }
.pp-tab { margin: 0 0 .5rem; display: flex; gap: .625rem; }
.pp-tab span { color: var(--d-muted); }
.pp-n { margin: 0 0 .25rem; color: #c00000; font-weight: 700; }
.pp-check ul { margin: 0; padding-left: 1rem; color: var(--d-muted); }
.pp-ok { margin: 0; color: #15803d; font-weight: 700; }

/* ======================================================================
   8. 脱敏工具
   ====================================================================== */
.demo[data-demo="scrub"] { --d-accent: #f0441f; --d-soft: #f3f1ec; }
.sc-steps { display: flex; align-items: center; gap: .375rem; margin-inline: auto; }
.sc-steps b { font-weight: 500; color: var(--d-muted); }
.sc-steps b.on { color: var(--d-accent); font-weight: 700; }
.sc-steps i { font-style: normal; color: #c9c4b8; }
.sc-body { display: grid; grid-template-columns: minmax(0, 1fr) 11rem; gap: .75rem; padding: .75rem; background: var(--d-soft); min-height: 17rem; }
.sc-paper { position: relative; padding: 1rem 1.125rem; border-radius: 6px; background: #fffdf8; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); overflow: hidden; }
.sc-paper.scan::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3rem;
  background: linear-gradient(transparent, rgba(255, 226, 122, .55), transparent);
  animation: sc-scan 1.4s linear infinite;
}
@keyframes sc-scan { from { transform: translateY(-3rem); } to { transform: translateY(16rem); } }
.sc-drop { width: 100%; min-height: 12rem; border: 2px dashed #d8d2c4; border-radius: 10px; background: none; color: var(--d-muted); font: inherit; cursor: pointer; }
.sc-drop:hover { border-color: var(--d-accent); color: var(--d-accent); }
.sc-text { margin: 0; font-size: .9375rem; line-height: 1.9; font-family: Georgia, "Songti SC", serif; }
.sc-found { background: #ffe27a; border-radius: 3px; padding: 0 .1em; }
.sc-cur { outline: 2px solid var(--d-accent); outline-offset: 1px; }
.sc-black { position: relative; background: #18181c; color: transparent; border-radius: 3px; padding: 0 .1em; }
.sc-black sup { position: absolute; left: 0; top: -1.15em; padding: 0 .25em; border-radius: 3px; background: #ffe27a; color: #18181c; font: 600 .5625rem/1.4 ui-monospace, Menlo, monospace; white-space: nowrap; }
.sc-keep { box-shadow: inset 0 -2px #22c55e; }
.sc-code { padding: 0 .3em; border-radius: 4px; background: #18181c; color: #ffe27a; font: 600 .75rem/1.6 ui-monospace, Menlo, monospace; }
.sc-back { box-shadow: inset 0 -2px #22c55e; background: #ecfdf3; }
.sc-card { display: flex; flex-direction: column; gap: .625rem; padding: .875rem; border-radius: 10px; background: #fff; border: 1px solid var(--d-line); }
.sc-card p { margin: 0; }
.sc-word { font-size: 1.125rem; font-weight: 700; word-break: break-all; }
.sc-red { background: #18181c !important; border-color: #18181c !important; color: #fff !important; }
.sc-gen { background: var(--d-accent) !important; border-color: var(--d-accent) !important; }
.sc-view { flex-wrap: wrap; }

/* ======================================================================
   9. 美讯 App
   ====================================================================== */
.demo[data-demo="app"] { --d-bg: #f2f2f7; --d-accent: #c41e26; }
.ma .phone-screen { background: #f2f2f7; }
.ma-push {
  position: absolute; left: .5rem; right: .5rem; top: .5rem; z-index: 4;
  padding: .5rem .75rem; border-radius: 14px; background: rgba(255, 255, 255, .92);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18); font-size: .75rem;
  transform: translateY(-130%); transition: transform .45s cubic-bezier(.3, .7, .2, 1);
}
.ma-push.show { transform: none; }
.ma-push b { display: block; }
.ma-screen { position: absolute; inset: 0 0 3rem; padding: 2.5rem .875rem .5rem; overflow: hidden; }
.ma-screen h4 { margin: 0 0 .5rem; font-size: 1.25rem; }
.ma-ok { margin-bottom: .5rem; padding: .375rem .625rem; border-radius: 10px; background: #fff; color: #15803d; font-weight: 600; font-size: .8125rem; }
.ma-card { position: relative; margin-bottom: .5rem; padding: .625rem .75rem; border-radius: 18px; background: #fff; }
.ma-card small { color: var(--d-muted); font-size: .75rem; }
.ma-card > b { display: block; font-size: 1.75rem; line-height: 1.1; }
.ma-delta { position: absolute; right: .75rem; top: 1.75rem; color: #15803d; font-weight: 700; font-size: .8125rem; }
.ma-spark { width: 100%; height: 2.25rem; color: #00857e; margin: .25rem 0; }
.ma-seg { display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: #eeeef0; }
.ma-seg button { flex: 1; border: 0; background: none; border-radius: 6px; font: inherit; font-size: .6875rem; padding: .2rem 0; color: var(--d-muted); cursor: pointer; white-space: nowrap; }
.ma-seg button.on { background: #fff; color: var(--d-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.ma-art { margin: .125rem 0 0; font-weight: 600; font-size: .8125rem; }
.ma-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .375rem; margin-bottom: .5rem; }
.ma-stats div { padding: .375rem; border-radius: 12px; background: #fff; text-align: center; }
.ma-stats b { display: block; font-size: 1.125rem; }
.ma-stats small { color: var(--d-muted); font-size: .6875rem; }
.ma-guests { list-style: none; margin: 0; padding: 0 .5rem; border-radius: 14px; background: #fff; }
.ma-guests li { display: flex; align-items: center; gap: .5rem; padding: .4rem 0; border-bottom: 1px solid #eee; }
.ma-guests li:last-child { border-bottom: 0; }
.ma-guests b { display: block; font-size: .8125rem; }
.ma-guests small { color: var(--d-muted); font-size: .6875rem; }
.ma-in { flex: none; border: 0; border-radius: 999px; padding: .25rem .625rem; background: #16a34a; color: #fff; font: inherit; font-size: .75rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ma-in.done { background: #dcfce7; color: #15803d; }
.ma-tabs { position: absolute; left: 0; right: 0; bottom: 0; display: flex; height: 3rem; padding-bottom: .5rem; background: rgba(249, 249, 251, .95); border-top: 1px solid #e5e5ea; }
.ma-tabs button { flex: 1; border: 0; background: none; font: inherit; font-size: .75rem; color: #8e8e93; cursor: pointer; }
.ma-tabs button.on { color: var(--d-accent); font-weight: 700; }

/* ======================================================================
   10. 活动官网 + 报名表
   ====================================================================== */
.demo[data-demo="site"] { --d-accent: #00756f; }
.ev { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.ev-hero { padding: 1.5rem 1rem; background: linear-gradient(135deg, #00b3ad, #00756f); color: #fff; }
.ev-hero small { opacity: .85; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .6875rem; }
.ev-hero h5 { margin: .25rem 0 .125rem; font-size: 1.25rem; line-height: 1.2; }
.ev-hero p { margin: 0; opacity: .85; }
.ev-form { display: grid; gap: .5rem; padding: 1rem; }
.ev-go { background: #00b3ad; border-color: #00b3ad; color: #fff; justify-content: center; }
.ev-thanks { margin: 0; color: #00756f; font-weight: 600; }
.ev-sheet { margin-top: 2.5rem; }
.ev-sheet .win-bar { gap: .5rem; color: var(--d-ink); font-weight: 600; }
.sheet-ico { color: #16a34a; font-size: 1rem; }
.ev-sheet td { font-size: .75rem; }

/* ======================================================================
   11. 网页工作台
   ====================================================================== */
.st { position: relative; }
.st-page { padding: 2rem 1.5rem 4.5rem; min-height: 17rem; background: #fbf7f1; color: #2b2118; }
.st-page [data-pick] { position: relative; display: block; width: fit-content; border-radius: 3px; outline-offset: 4px; }
.st-eyebrow { margin: 0 0 .5rem; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #a0522d; }
.st-h { margin: 0 0 .5rem; font-size: 1.625rem; line-height: 1.2; transition: font-family .2s; }
.st-h.st-serif { font-family: Georgia, "Songti SC", serif; font-weight: 400; }
.st-p { margin: 0 0 1rem; color: #6b5a4a; }
.st-btn { padding: .4rem 1rem; border-radius: 999px; background: #2b2118; color: #fff; font-weight: 600; }
.picking [data-pick] { cursor: crosshair; }
.st-page .hov { outline: 2px solid #3b82f6; }
.st-page .picked { outline: 2px solid #f43f5e; }
.st-page .picked::before {
  content: attr(data-tag); position: absolute; left: -4px; top: -1.6rem;
  padding: .1rem .4rem; border-radius: 4px; background: #f43f5e; color: #fff;
  font: 600 .6875rem/1.4 ui-monospace, Menlo, monospace; white-space: nowrap;
}
.st-bar {
  position: absolute; right: .75rem; bottom: .75rem; display: flex; align-items: center; gap: .125rem;
  padding: .25rem; border-radius: 12px; background: rgba(22, 22, 28, .88); color: #e5e7eb; font-size: .75rem;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); z-index: 3;
}
.st-bar > * { padding: .3rem .5rem; border-radius: 8px; white-space: nowrap; }
.st-bar button { border: 0; background: rgba(255, 255, 255, .08); color: inherit; font: inherit; cursor: pointer; }
.st-bar button.on { background: #3b82f6; color: #fff; }
.st-bar em { font-style: normal; opacity: .8; margin-left: .25rem; }
.st-panel {
  position: absolute; right: .75rem; bottom: 3.5rem; width: 15rem; max-width: calc(100% - 1.5rem); display: grid; gap: .5rem;
  padding: .75rem; border-radius: 12px; background: rgba(22, 22, 28, .94); color: #fff; z-index: 3;
}
.st-panel p { margin: 0; font-family: ui-monospace, Menlo, monospace; font-size: .75rem; color: #fda4af; }
.st-panel .d-input { background: #2a2a32; border-color: #3a3a44; color: #fff; }
.st-blue { background: #3b82f6; border-color: #3b82f6; color: #fff; justify-content: center; }
.demo[data-demo="studio"] .d-toast { bottom: 3.5rem; }

/* ======================================================================
   12. 钓鱼 App(深色手机)
   ====================================================================== */
.demo[data-demo="fish"] { --d-bg: #141d21; --d-ink: #e8f1f2; --d-muted: #8aa1a6; --d-line: #22323a; --d-accent: #4dd0c7; }
.fs .phone-screen { background: #0d1417; }
.fs-screen { position: absolute; inset: 0 0 3rem; padding: 2.5rem .875rem .5rem; overflow: hidden; }
.fs-screen h4 { margin: 0 0 .5rem; font-size: 1rem; }
.fs-search { background: #141d21; }
.fs-where { width: 100%; margin: .5rem 0; padding: .4rem; border-radius: 10px; border: 1px solid #22323a; background: #141d21; color: var(--d-accent); font: inherit; font-weight: 600; }
.fs-zones { list-style: none; margin: 0; padding: 0; display: grid; gap: .375rem; }
.fs-zones li { padding: .5rem .625rem; border-radius: 12px; background: #141d21; border: 1px solid #22323a; }
.fs-zones li > b { display: block; }
.fs-zones li > small { color: var(--d-muted); font-size: .6875rem; }
.fs-zones li.open { border-color: var(--d-accent); }
.fs-sp p { position: relative; margin: .375rem 0 0; padding-left: .875rem; }
.fs-sp p i { position: absolute; left: 0; top: .4rem; width: .45rem; height: .45rem; border-radius: 50%; background: #5fc98e; }
.fs-sp p b { display: block; font-size: .8125rem; }
.fs-sp p small { color: #5fc98e; font-size: .6875rem; }
.fs-map-btn { width: 100%; margin-top: .5rem; padding: .375rem; border: 0; border-radius: 8px; background: var(--d-accent); color: #0d1417; font: inherit; font-weight: 700; font-size: .75rem; cursor: pointer; }
.fs-map { width: 100%; height: auto; }
.fs-map .z { fill: #1a272c; stroke: #2d4048; stroke-width: 1.5; }
.fs-map .z.hi { fill: rgba(77, 208, 199, .35); stroke: #4dd0c7; stroke-width: 2.5; }
.fs-map text { fill: #e8f1f2; font: 700 14px var(--font); }
.fs-note { margin: .25rem 0 0; color: var(--d-muted); font-size: .75rem; text-align: center; }
.fs-tabs { position: absolute; left: 0; right: 0; bottom: 0; display: flex; height: 3rem; padding-bottom: .5rem; background: #0f181b; border-top: 1px solid #1d2a30; }
.fs-tabs > * { flex: 1; display: grid; place-items: center; border: 0; background: none; font: inherit; font-size: .6875rem; color: #6b8086; }
.fs-tabs button { cursor: pointer; }
.fs-tabs .on { color: var(--d-accent); font-weight: 700; }

/* ======================================================================
   13. 选股研究台
   ====================================================================== */
.demo[data-demo="stock"] { --d-accent: #2c5a85; --d-soft: #f5f4ef; --d-good: #2f7a4c; }
.sk-body { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); background: var(--d-soft); min-height: 19rem; }
.sk-nav { display: flex; flex-direction: column; gap: .125rem; padding: .625rem .5rem; border-right: 1px solid var(--d-line); }
.sk-nav span { padding: .35rem .5rem; border-radius: 6px; color: var(--d-muted); font-size: .8125rem; white-space: nowrap; }
.sk-nav span.on { background: #fff; color: var(--d-accent); font-weight: 700; }
.sk-main { padding: .875rem; min-width: 0; }
.sk-h { margin: 0 0 .5rem; font-weight: 700; font-size: 1rem; }
.sk-card { display: grid; gap: .5rem; padding: .75rem .875rem; border-radius: 12px; background: #fff; border: 1px solid var(--d-line); }
.sk-card p { margin: 0; }
.sk-up { padding: .1rem .45rem; border-radius: 6px; background: #e6f2ea; color: #2f7a4c; font-weight: 700; font-size: .75rem; }
.sk-claim { font-weight: 600; }
.sk-row { display: flex; align-items: center; gap: .625rem; }
.sk-row > span:first-child { width: 6.5rem; color: var(--d-muted); flex: none; }
.sk-row input[type="range"] { flex: 1; accent-color: var(--d-accent); min-width: 0; }
.sk-row b, .sk-row .sk-hide, .sk-row [data-ai] { width: 2.75rem; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.sk-hide { color: var(--d-muted); letter-spacing: .1em; }
.sk-score { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .875rem; align-items: center; margin-top: .75rem; }
.sk-score p { margin: 0; }
.sk-cal { width: 100%; height: auto; background: #fff; border-radius: 10px; border: 1px solid var(--d-line); }
.sk-cal circle { fill: rgba(44, 90, 133, .55); }
.sk-cal circle.new { fill: #b13a35; }
.sk-diag { stroke: #c9c6bb; stroke-dasharray: 3 3; }
.sk-b { display: flex; gap: 1.25rem; margin: .25rem 0 !important; font-size: 1rem; }
.sk-b b { font-variant-numeric: tabular-nums; }

/* ======================================================================
   14. 工资税
   ====================================================================== */
.demo[data-demo="tax"] { --d-accent: #1f7a4d; --d-soft: #f4f5f2; }
.tx-tabs { display: flex; gap: .375rem; padding: .625rem .875rem 0; background: var(--d-soft); overflow: hidden; }
.tx-tabs > * { padding: .3rem .75rem; border-radius: 8px 8px 0 0; color: var(--d-muted); white-space: nowrap; font-size: .8125rem; }
.tx-tabs b { background: #fff; color: var(--d-accent); }
.tx-body { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1rem; padding: .875rem; min-height: 15rem; }
.tx-in label { display: grid; gap: .3rem; font-weight: 600; }
.tx-in p { margin: .75rem 0 .375rem; }
.tx-freq { display: grid; grid-template-columns: 1fr 1fr; gap: .375rem; }
.tx-freq button { padding: .375rem; border-radius: 8px; border: 1px solid var(--d-line); background: #fff; font: inherit; font-size: .8125rem; cursor: pointer; color: var(--d-ink); }
.tx-freq button.on { border-color: var(--d-accent); background: #e7f3ec; color: var(--d-accent); font-weight: 700; }
.tx-out { min-width: 0; }
.tx-big small { color: var(--d-muted); }
.tx-big b { display: block; font-size: 1.875rem; line-height: 1.15; color: var(--d-accent); font-variant-numeric: tabular-nums; }
.tx-kv { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: .375rem 0 .625rem; color: var(--d-muted); font-size: .8125rem; }
.tx-kv b { color: var(--d-ink); }
.tx-stack { display: flex; height: .875rem; border-radius: 999px; overflow: hidden; background: var(--d-soft); }
.tx-stack i { display: block; height: 100%; transition: width .35s; }
.tx-legend { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .2rem .75rem; font-size: .75rem; }
.tx-legend li { display: flex; align-items: center; gap: .375rem; color: var(--d-muted); }
.tx-legend i { width: .5rem; height: .5rem; border-radius: 2px; flex: none; }
.tx-legend b { margin-left: auto; color: var(--d-ink); font-variant-numeric: tabular-nums; }
.tx-note { margin: .625rem 0 0; font-size: .75rem; color: var(--d-accent); }
.tx-src { margin: 0; padding: 0 .875rem .75rem; font-size: .6875rem; }

/* ======================================================================
   窄屏:多栏演示改成上下排
   ====================================================================== */
@media (max-width: 720px) {
  .demo { font-size: .8125rem; }
  .win-body { padding: .75rem; }
  .ps-sources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mx-body { grid-template-columns: minmax(0, 1fr); }
  .mx-side { flex-direction: row; overflow-x: auto; padding: .375rem; }
  .mx-side button { width: auto; flex: none; }
  .mx-report { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kol-body { grid-template-columns: minmax(0, 1fr); }
  .kol-list { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--d-line); }
  .kol-list li { flex: none; padding-right: 1.5rem; }
  .ck-body, .tx-body, .ev { grid-template-columns: minmax(0, 1fr); }
  .ck-axis { height: 13rem; }
  .ev-sheet { margin-top: 0; }
  .qt-body, .sk-body { grid-template-columns: minmax(0, 1fr); }
  .qt-side, .sk-nav { display: none; }
  .pp-body { grid-template-columns: minmax(0, 1fr); }
  .pp-thumbs { flex-direction: row; overflow-x: auto; }
  .pp-thumb { flex: none; width: 4.5rem; }
  .sc-body { grid-template-columns: minmax(0, 1fr); }
  .sk-score { grid-template-columns: 5rem minmax(0, 1fr); }
}

/* ======================================================================
   防跳动:演示播放时高度不变(2026-10-19 体验测试:演示长高把下文往下推,CLS 0.48)
   会出现的东西先占位(.is-off 只是看不见),会变长的列表固定高度、框内滚动
   ====================================================================== */
.demo .is-off { visibility: hidden; }
.demo .d-typing { outline: 2px solid color-mix(in srgb, var(--d-accent) 45%, transparent); outline-offset: 0; }
.ps-box { height: 16rem; overflow: auto; }
.tr-note { min-height: 2.9em; }
.mx-body { height: 25rem; }
.mx-main { overflow: auto; min-height: 0; }
.kol-thread { height: 15rem; max-height: none; flex: none; }
[data-demo="time"] [data-lines] { min-height: 8.75rem; }
.qt-main { position: relative; }
.qt-box { height: 11.5rem; overflow: auto; }
.qt-sum dl { min-height: 6.75rem; align-content: start; }
.qt-xlsx {
  position: absolute;
  left: .875rem;
  right: .875rem;
  bottom: .75rem;
  z-index: 6;
  max-height: 75%;
  overflow: auto;
  margin: 0;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .22);
}
.qt-file { display: flex; align-items: center; justify-content: space-between; }
.qt-close { border: 0; background: none; font: inherit; font-size: 1.125rem; line-height: 1; color: var(--d-muted); cursor: pointer; padding: 0 .25rem; }
.ev-box { height: 9.5rem; overflow: auto; }

@media (max-width: 720px) {
  /* iOS 点进小于 16px 的输入框会整页放大,访客会觉得页面「跳了一下」 */
  .demo .d-input, .demo input { font-size: 16px; }
  .mx-body { grid-template-rows: auto minmax(0, 1fr); height: 27rem; }
}
.qt-sum { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.qt-sum .qt-toggle { grid-column: 1; grid-row: 1; }
.qt-sum .qt-cur { grid-column: 1; grid-row: 2; justify-self: start; }
.qt-sum dl { grid-column: 2; grid-row: 1 / span 2; min-height: 7.25rem; }
.sc-word { min-height: 2.9em; }