/* ============================================================
   CrossKit 工具体验增强层样式 (tool-ux.css)
   ============================================================ */

/* ---------- 左侧工具箱启动按钮 ---------- */
.ck-ux-launcher {
  position: fixed;
  left: 16px;
  bottom: 96px;
  z-index: 1200;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--brand, #4f46e5);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(79, 70, 229, .28);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  transition: transform .15s ease;
}
.ck-ux-launcher span {
  font-size: 10px;
  margin-top: 2px;
  letter-spacing: .5px;
}
.ck-ux-launcher:hover { transform: scale(1.06); }

/* ---------- 右侧抽屉面板 ---------- */
.ck-ux-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 360px;
  max-width: 92vw;
  height: 100%;
  background: #fff;
  z-index: 1300;
  box-shadow: -8px 0 30px rgba(0, 0, 0, .18);
  transform: translateX(105%);
  transition: transform .25s ease;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  color: #1f2430;
}
.ck-ux-panel.open { transform: translateX(0); }
.ck-ux-head {
  padding: 14px 16px;
  font-weight: 600;
  font-size: 15px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f7f9ff;
}
.ck-ux-close {
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #888;
}
.ck-ux-tabs {
  display: flex;
  border-bottom: 1px solid #eee;
}
.ck-ux-tabs button {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 4px;
  cursor: pointer;
  color: #666;
  font-size: 13px;
  border-bottom: 2px solid transparent;
}
.ck-ux-tabs button.active {
  color: #2b6cff;
  border-bottom-color: #2b6cff;
  font-weight: 600;
}
.ck-ux-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
}
.ck-ux-empty {
  color: #99a;
  font-size: 13px;
  line-height: 1.6;
  padding: 8px 0;
}
.ck-ux-tip { color: #667; font-size: 13px; margin: 0 0 10px; }
.ck-ux-actions { margin-bottom: 10px; }

/* ---------- 列表项 ---------- */
.ck-ux-list { display: flex; flex-direction: column; gap: 8px; }
.ck-ux-item {
  border: 1px solid #eceef3;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ck-ux-item-main { min-width: 0; flex: 1; }
.ck-ux-item-sum {
  font-size: 13px;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ck-ux-item-time { font-size: 11px; color: #aab; margin-top: 2px; }
.ck-ux-item-acts { display: flex; gap: 4px; flex-shrink: 0; }
.ck-ux-item-acts .mini {
  border: 1px solid #dfe3ee;
  background: #f7f9ff;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 12px;
  cursor: pointer;
  color: #445;
}
.ck-ux-item-acts .mini:hover { background: #eef2ff; }
.ck-ux-item-acts .mini.danger { color: #d9534f; border-color: #f3d2d0; }

/* ---------- 模板保存区 ---------- */
.ck-ux-save { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ck-ux-save input {
  border: 1px solid #dfe3ee;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
}

/* ---------- 导出按钮 ---------- */
.ck-ux-export-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ck-ux-export-btns button {
  border: 1px solid #2b6cff;
  background: #fff;
  color: #2b6cff;
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
}
.ck-ux-export-btns button:hover { background: #2b6cff; color: #fff; }

/* ---------- 流转目标 ---------- */
.ck-ux-chain-list { display: flex; flex-direction: column; gap: 8px; }
.ck-ux-chain-item {
  text-align: left;
  border: 1px solid #eceef3;
  background: #f7f9ff;
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 13px;
  color: #334;
}
.ck-ux-chain-item:hover { background: #eef2ff; border-color: #c7d2fe; }

/* ---------- 进度条 ---------- */
.ck-progress {
  height: 3px;
  width: 100%;
  background: #eef1f7;
  overflow: hidden;
  border-radius: 3px;
  opacity: 0;
  transition: opacity .2s ease;
  margin-bottom: 10px;
}
.ck-progress.active { opacity: 1; }
.ck-progress-bar {
  height: 100%;
  width: 15%;
  background: linear-gradient(90deg, #2b6cff, #6a3cff);
  transition: width .3s ease;
}

/* ---------- 草稿提示 ---------- */
.ck-draft-hint {
  background: #fff8e6;
  border: 1px solid #ffe2a8;
  color: #8a6d00;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ck-draft-hint .btn { margin-left: auto; }
.ck-draft-hint .btn + .btn { margin-left: 0; }

/* ---------- 工具流转横幅 ---------- */
.ck-chain-banner {
  background: #eafaf0;
  border: 1px solid #b6e8c8;
  color: #1f7a45;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ck-chain-banner .btn { margin-left: auto; }

/* ---------- 通用小按钮（面板内复用） ---------- */
.ck-ux-panel .btn-sm {
  border: 1px solid #dfe3ee;
  background: #fff;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 13px;
  cursor: pointer;
  color: #445;
}
.ck-ux-panel .btn-sm.btn-primary { background: #2b6cff; color: #fff; border-color: #2b6cff; }

@media (max-width: 600px) {
  .ck-ux-launcher { left: 10px; bottom: 80px; width: 46px; height: 46px; }
  .ck-ux-panel { width: 100%; }
}

/* ============ Per-tool help banner (SEO "使用说明") ============ */
.tool-help-banner {
  background: linear-gradient(135deg, #f5f8ff 0%, #eef3ff 100%);
  border-bottom: 1px solid #e3e9f7;
  padding: 14px 0;
}
.tool-help-banner .thb-inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #2b3a55;
}
.tool-help-banner .thb-inner > i {
  color: #2b6cff;
  font-size: 18px;
  margin-top: 2px;
  flex: 0 0 auto;
}
.tool-help-banner .thb-text { font-size: 14px; line-height: 1.6; }
.tool-help-banner .thb-text strong {
  display: inline-block;
  margin-right: 6px;
  color: #1a2b4a;
}
@media (max-width: 600px) {
  .tool-help-banner { padding: 12px 0; }
  .tool-help-banner .thb-text { font-size: 13px; }
}

/* ============ Draft auto-save indicator ============ */
.ck-draft-saved {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 12px;
  color: #2e9e6b;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .25s ease, transform .25s ease;
}
.ck-draft-saved.show { opacity: 1; transform: translateY(0); }
.ck-draft-saved i { font-size: 12px; }

/* ---------- Related tools cross-link section (server-rendered, all tool pages) ---------- */
.ck-related-tools {
  margin: 32px auto 0;
  max-width: 1080px;
  padding: 0 16px;
}
.ck-related-inner {
  background: #f7f9fc;
  border: 1px solid #e6ebf2;
  border-radius: 14px;
  padding: 22px 24px 26px;
}
.ck-related-title {
  font-size: 17px;
  font-weight: 700;
  color: #1f2a44;
  margin: 0 0 16px;
}
.ck-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.ck-related-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e6ebf2;
  border-radius: 10px;
  text-decoration: none;
  color: #2b3654;
  font-size: 14px;
  font-weight: 600;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ck-related-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(31, 42, 68, .10);
  border-color: #c7d4ea;
  color: #1f2a44;
}
.ck-related-ico { font-size: 18px; line-height: 1; }
.ck-related-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) {
  .ck-related-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* Blog -> tool internal CTA (lowers bounce, builds product funnel) */
.blog-tools-cta { margin: 2rem 0; }
.blog-tools-cta h2 { font-size: 1.4rem; margin-bottom: 1rem; }
.blog-tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.blog-tool-card { display: flex; flex-direction: column; gap: .3rem; padding: 1rem; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; text-decoration: none; color: #111; transition: .15s; }
.blog-tool-card:hover { border-color: #2563eb; box-shadow: 0 4px 14px rgba(37,99,235,.12); transform: translateY(-2px); }
.blog-tool-card b { font-size: 1rem; }
.blog-tool-card span { font-size: .85rem; color: #6b7280; }

/* One-click sample data button (tool onboarding) */
.ck-sample-btn{margin:0 0 12px;display:inline-flex;align-items:center;gap:6px;border:1px dashed #b9c6e4;background:#f7f9ff;color:#2b6cff;border-radius:8px;padding:6px 12px;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.ck-sample-btn:hover{background:#eef2ff;border-color:#8ea9e8}
.ck-sample-btn i{font-size:12px}
.ck-sample-btn.done{border-style:solid;border-color:#b6e8c8;background:#eafaf0;color:#1f7a45}
@media (max-width:600px){.ck-sample-btn{width:100%;justify-content:center}}

/* Inline example card (Muryo-style — collapsible "How it works" tile) */
.ck-example-card{margin:0 0 16px;border:1px solid #e2e8f0;border-radius:12px;background:#fafbff;overflow:hidden}
.ck-example-details summary.ck-example-summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;padding:12px 16px;font-size:13px;font-weight:600;color:#374971;user-select:none}
.ck-example-details summary::-webkit-details-marker{display:none}
.ck-example-summary i{color:#6366f1;font-size:14px;flex:none}
.ck-example-summary > span:first-of-type{flex:none}
.ck-example-desc{flex:1;font-weight:400;color:#718096;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ck-example-summary::after{content:"+";font-size:16px;color:#a0aec0;margin-left:auto;transition:transform .2s ease}
.ck-example-details[open] .ck-example-summary::after{content:"\2212";color:#6366f1}
.ck-example-body{padding:0 16px 16px}
.ck-example-intro{font-size:12px;color:#718096;line-height:1.6;margin-bottom:12px;padding:10px 12px;background:#f1f5f9;border-radius:8px}
.ck-example-intro strong{color:#374971}
.ck-example-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.ck-example-item{display:flex;flex-direction:column;gap:4px;padding:8px 12px;background:#fff;border:1px solid #e2e8f0;border-radius:8px}
.ck-example-label{font-size:11px;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:.04em}
.ck-example-val{font-size:12px;color:#334155;word-break:break-all;line-height:1.5;background:transparent;padding:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
/* Dark mode */
html.ck-dark .ck-example-card{background:#1a1f2b;border-color:#2a2f3a}
html.ck-dark .ck-example-summary{color:#c8d0e0}
html.ck-dark .ck-example-summary i{color:#818cf8}
html.ck-dark .ck-example-desc{color:#8494a8}
html.ck-dark .ck-example-summary::after{color:#5c6a84}
html.ck-dark .ck-example-details[open] .ck-example-summary::after{color:#818cf8}
html.ck-dark .ck-example-intro{background:#222838;color:#8494a8}
html.ck-dark .ck-example-intro strong{color:#c8d0e0}
html.ck-dark .ck-example-item{background:#1d212a;border-color:#2a2f3a}
html.ck-dark .ck-example-label{color:#6b7c98}
html.ck-dark .ck-example-val{color:#c8d0e0}
@media (max-width:600px){
  .ck-example-grid{grid-template-columns:1fr}
  .ck-example-desc{display:none}
  .ck-example-summary{font-size:12px;padding:10px 14px}
  .ck-example-body{padding:0 12px 12px}
}

/* Mobile form layout: single column + 16px inputs (stops iOS auto-zoom) */
@media (max-width:600px){
  .row-2,.row-3,.row-4{grid-template-columns:1fr !important;gap:12px}
  .tool-grid.two-col,.tool-grid{grid-template-columns:1fr !important}
  .form-group input,.form-group textarea,.form-group select{font-size:16px !important;min-height:44px}
  .form-group .btn,.btn-block{width:100%}
  .result-box textarea{min-height:120px}
}