/* ==========================================================================
 * 薯灵感 · 开源工具层 UI（spark-tools.css）
 * 视觉基调：白底卡片 + 16~24px 圆角 + 柔和阴影 + 小红书红 #FF2442 渐变按钮
 * 动效只使用 transform / opacity，并尊重 prefers-reduced-motion
 * ========================================================================== */

/* ---------- 工具箱入口卡 ---------- */
.st-toolbox {
  border: 1px solid var(--border, #EDEDF0);
}

.st-tb-title {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #1F1F24);
}

.st-tb-desc {
  margin-top: var(--s-6);
  font-size: 12px;
  color: var(--text-3, #6E6869);
  line-height: 1.6;
}

.st-tb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-10);
  margin-top: var(--s-14);
}

.st-tb-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-14) var(--s-12);
  border: 1px solid var(--border, #EDEDF0);
  border-radius: 16px;
  background: var(--card, #fff);
  cursor: pointer;
  text-align: left;
  transition: transform .18s cubic-bezier(.4, 0, .2, 1), box-shadow .18s ease, border-color .18s ease;
}

.st-tb-item:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 36, 66, .35);
  box-shadow: var(--shadow-md, 0 6px 20px rgba(31, 27, 29, .07));
}

.st-tb-item:active {
  transform: scale(.98);
}

.st-tb-item b {
  font-size: 14px;
  color: var(--text, #1F1F24);
}

.st-tb-item span {
  font-size: 12px;
  color: var(--text-3, #6E6869);
  line-height: 1.5;
}

/* ---------- 弹层 ---------- */
.st-mask {
  position: fixed;
  inset: 0;
  z-index: var(--z-companion, 9000);
  background: rgba(17, 17, 26, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-20);
  opacity: 0;
  /* 2026-10-03 修复：关闭态必须同时「不可见」+「不拦截点击」。
   * 此前只把 opacity 降为 0，元素仍以 fixed / inset:0 / z-index:9000 铺满全屏，
   * 透明却完全可交互 —— 弹窗关掉后它会吃掉页面上所有点击，
   * 表现为「打开过一次弹层，之后什么都点不动了」。 */
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}

.st-mask.on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.st-modal {
  width: 100%;
  max-width: 760px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--card, #fff);
  border-radius: 24px;
  box-shadow: var(--shadow-lg, 0 16px 40px rgba(31, 27, 29, .1));
  overflow: hidden;
  transform: translateY(12px) scale(.98);
  opacity: 0;
  transition: transform .22s cubic-bezier(.4, 0, .2, 1), opacity .22s ease;
}

.st-mask.on .st-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.st-modal.wide {
  max-width: 1080px;
}

.st-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-16) var(--s-20);
  border-bottom: 1px solid var(--border, #EDEDF0);
}

.st-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.st-close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--red-50, #FFF5F6);
  color: var(--xhs-red-text, #D81B37);
  font-size: 16px;
  cursor: pointer;
  transition: transform .16s ease;
}

.st-close:active {
  transform: scale(.9);
}

.st-body {
  padding: var(--s-18) var(--s-20);
  overflow: auto;
  flex: 1;
}

.st-body.embed {
  padding: 0;
}

.st-row {
  display: flex;
  gap: var(--s-10);
  align-items: center;
}

.st-input,
.st-textarea {
  width: 100%;
  padding: var(--s-12) var(--s-14);
  border: 1px solid var(--border, #EDEDF0);
  border-radius: 14px;
  background: var(--bg, #FBF9FA);
  font-size: 14px;
  color: var(--text, #1F1F24);
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.st-input:focus,
.st-textarea:focus {
  border-color: var(--red, #FF2442);
  box-shadow: 0 0 0 3px var(--ring-red);
}

.st-textarea {
  min-height: 92px;
  resize: vertical;
  line-height: 1.6;
}

.st-btn {
  padding: var(--s-12) var(--s-20);
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #FF6B81 0%, #E02039 55%, #FF3B5C 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-red);
  transition: transform .18s cubic-bezier(.4, 0, .2, 1), box-shadow .18s ease, opacity .18s ease;
}

.st-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-red);
}

.st-btn:active {
  transform: scale(.97);
}

.st-btn[disabled] {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

.st-btn.ghost {
  background: #fff;
  color: var(--text-2, #6B6B76);
  border: 1px solid var(--border, #EDEDF0);
  box-shadow: none;
}

/* ---------- 骨架屏 ---------- */
.st-skel {
  border-radius: 14px;
  background: linear-gradient(90deg, #F2F2F5 25%, #E9E9EE 37%, #F2F2F5 63%);
  background-size: 400% 100%;
  animation: stShimmer 1.3s ease infinite;
}

@keyframes stShimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.st-skel-line {
  height: 14px;
  margin-bottom: var(--s-10);
}

/* ---------- 结果区 ---------- */
.st-result {
  margin-top: var(--s-16);
  padding: var(--s-16);
  border-radius: 16px;
  background: var(--bg, #FBF9FA);
  border: 1px solid var(--border, #EDEDF0);
  position: relative;
  overflow: hidden;
}

.st-result.ok::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 40%;
  width: 220px;
  height: 220px;
  margin: -110px 0 0 -110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 36, 66, .16) 0%, rgba(255, 36, 66, 0) 70%);
  animation: stRipple .7s ease-out forwards;
  pointer-events: none;
}

@keyframes stRipple {
  from { transform: scale(.2); opacity: .9; }
  to { transform: scale(1.6); opacity: 0; }
}

.st-result.fail {
  border-color: rgba(255, 36, 66, .45);
  background: #FFF6F7;
  animation: stShake .38s cubic-bezier(.36, .07, .19, .97);
}

@keyframes stShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

.st-copy {
  margin-top: var(--s-12);
}

.st-title-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-10);
  padding: var(--s-10) var(--s-12);
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--border, #EDEDF0);
  margin-bottom: var(--s-8);
  font-size: 14px;
  transition: transform .16s ease, border-color .16s ease;
}

.st-title-item:hover {
  transform: translateX(2px);
  border-color: rgba(255, 36, 66, .35);
}

.st-note-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s-10);
  margin-top: var(--s-12);
}

.st-note-card {
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border, #EDEDF0);
  transition: transform .18s cubic-bezier(.4, 0, .2, 1), box-shadow .18s ease;
}

.st-note-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 6px 20px rgba(31, 27, 29, .07));
}

.st-note-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
  background: #F2F2F5;
}

.st-note-meta {
  padding: var(--s-8) var(--s-10) var(--s-10);
}

.st-note-title {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text, #1F1F24);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.st-note-sub {
  margin-top: var(--s-4);
  font-size: 12px;
  color: var(--text-3, #6E6869);
}

.st-iframe {
  width: 100%;
  height: 74vh;
  border: 0;
  display: block;
}

.st-hint {
  font-size: 12px;
  color: var(--text-3, #6E6869);
  margin-top: var(--s-8);
  line-height: 1.6;
}

/* ---------- 移动端 ---------- */
@media (max-width: 640px) {
  .st-tb-grid {
    grid-template-columns: 1fr;
  }

  .st-mask {
    padding: 0;
  }

  .st-modal,
  .st-modal.wide {
    max-width: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
  }

  .st-row {
    flex-direction: column;
    align-items: stretch;
  }

  .st-btn {
    width: 100%;
  }

  .st-iframe {
    height: calc(100vh - 56px);
    height: calc(100dvh - 56px);
  }
}

/* ---------- 降低动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .st-mask,
  .st-modal,
  .st-tb-item,
  .st-btn,
  .st-title-item,
  .st-note-card,
  .st-close {
    transition: none !important;
    animation: none !important;
  }

  .st-skel {
    animation: none !important;
  }

  .st-result.ok::after {
    display: none;
  }

  .st-result.fail {
    animation: none !important;
  }
}