/* ============================================================
   AIGoMoon Developer Tools — shared styles (tools station)
   Pages: /tools/* (hub + 10 tool pages)
   ============================================================ */

/* --- Header favorites badge (tools pages only) --- */
.tools-fav-link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 16px;
  background: rgba(102, 126, 234, 0.12);
  color: #667eea; font-size: 13px; font-weight: 600;
  text-decoration: none; transition: background .2s;
  margin-right: 8px;
}
.tools-fav-link:hover { background: rgba(102, 126, 234, 0.22); }
.tools-fav-star { font-size: 14px; line-height: 1; }
.tools-fav-count {
  min-width: 18px; text-align: center;
  background: #667eea; color: #fff; border-radius: 9px;
  font-size: 11px; padding: 1px 5px; line-height: 16px;
}
.tools-fav-link .tools-fav-count:empty,
.tools-fav-link[data-count="0"] .tools-fav-count { display: none; }

/* --- Tool page layout --- */
.tool-main-container {
  max-width: 960px; margin: 0 auto; padding: 26px 20px 60px;
}
.tool-breadcrumb {
  font-size: 13px; color: #888; margin-bottom: 14px;
}
.tool-breadcrumb a { color: #667eea; text-decoration: none; }
.tool-breadcrumb a:hover { text-decoration: underline; }

.tool-wrapper {
  background: #fff; border-radius: 16px; padding: 26px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.tool-header { margin-bottom: 22px; }
.tool-header h1 { font-size: 26px; color: #1a1a2e; margin: 0 0 6px; }
.tool-header p, .tool-header .tool-sub { color: #666; font-size: 14px; margin: 0; }

.tool-head-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  flex-wrap: wrap;
}

/* --- Generic tool controls --- */
.tool-label {
  display: block; font-size: 13px; font-weight: 600; color: #444;
  margin: 14px 0 6px;
}
.tool-textarea, .tool-input, .tool-select {
  width: 100%; box-sizing: border-box;
  border: 2px solid #e0e0e0; border-radius: 10px;
  padding: 10px 12px; font-size: 14px; font-family: inherit;
  background: #fafafa; color: #1a1a2e;
  transition: border-color .2s;
}
.tool-textarea { min-height: 150px; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; line-height: 1.5; resize: vertical; }
.tool-textarea:focus, .tool-input:focus, .tool-select:focus { outline: none; border-color: #667eea; background: #fff; }
.tool-input.mono, .tool-textarea.mono { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; }

.tool-btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.tool-btn {
  padding: 9px 20px; border-radius: 22px; border: 2px solid transparent;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: all .2s; font-family: inherit; line-height: 1.3;
}
.tool-btn.primary { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; }
.tool-btn.primary:hover { opacity: .92; transform: translateY(-1px); }
.tool-btn.secondary { background: #fff; color: #667eea; border-color: #667eea; }
.tool-btn.secondary:hover { background: rgba(102, 126, 234, 0.08); }
.tool-btn.ghost { background: #f0f1f8; color: #555; border-color: transparent; }
.tool-btn.ghost:hover { background: #e4e6f2; }
.tool-btn.favorited { background: #ffeef0; color: #e0407a; border-color: #ffb3c6; }
.tool-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.tool-result {
  margin-top: 18px; border: 2px solid #e8e8f5; border-radius: 12px;
  background: #fafaff; padding: 14px; display: block;
}
.tool-result[hidden], .tool-error[hidden], .hub-empty[hidden] { display: none; }
.tool-result-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
}
.tool-result-title { font-size: 13px; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: .4px; }
.tool-result-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tool-result-actions .tool-btn { padding: 6px 14px; font-size: 13px; }

.tool-output {
  background: #1e1e2e; color: #d8dcf0; border-radius: 8px;
  padding: 12px; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 13px; line-height: 1.55; overflow: auto; max-height: 460px;
  white-space: pre-wrap; word-break: break-all; margin: 0;
}
.tool-output .err-line { background: #5c2b3a; color: #ffb3c6; display: inline-block; width: 100%; }
.tool-output .ok-line  { color: #a6e3a1; }

.tool-status { font-size: 13px; margin-top: 10px; }
.tool-status.ok   { color: #2e9e5b; }
.tool-status.err  { color: #d6336c; }
.tool-status.warn { color: #b8860b; }

.tool-meta-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px; margin-top: 16px;
}
.tool-meta-item {
  background: #f4f5fb; border-radius: 10px; padding: 10px 12px; font-size: 13px;
}
.tool-meta-item .k { color: #888; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.tool-meta-item .v { color: #1a1a2e; font-weight: 600; font-family: 'SFMono-Regular', Consolas, Menlo, monospace; word-break: break-all; }

/* swatch (color converter) */
.tool-swatch {
  height: 90px; border-radius: 12px; border: 2px solid #e0e0e0;
  margin-top: 14px; background: #667eea;
}

/* tabs (base64/hash text|file) */
.tool-tabs { display: flex; gap: 10px; margin-bottom: 18px; justify-content: center; flex-wrap: wrap; }
.tool-tab {
  padding: 9px 22px; border: 2px solid #e0e0e0; background: #fff; border-radius: 22px;
  cursor: pointer; font-size: 14px; transition: all .25s; font-weight: 500; font-family: inherit;
}
.tool-tab.active { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border-color: transparent; }
.tool-tab:hover:not(.active) { border-color: #667eea; color: #667eea; }
.tool-panel { display: none; }
.tool-panel.active { display: block; }

/* file drop zone */
.tool-dropzone {
  border: 2px dashed #c9cdf3; border-radius: 12px; background: #f8f9ff;
  padding: 34px 16px; text-align: center; color: #667eea; cursor: pointer;
  transition: all .2s; font-size: 14px;
}
.tool-dropzone:hover, .tool-dropzone.dragover { background: #eef0fd; border-color: #667eea; }
.tool-dropzone .dz-icon { font-size: 30px; display: block; margin-bottom: 8px; }

/* JWT claims table */
.tool-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.tool-table th, .tool-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid #ececf4; vertical-align: top; }
.tool-table th { color: #888; font-weight: 600; white-space: nowrap; }
.tool-table td { color: #1a1a2e; word-break: break-all; }
.claim-badge {
  display: inline-block; padding: 2px 10px; border-radius: 10px;
  font-size: 12px; font-weight: 600;
}
.claim-badge.ok { background: #e6f7ee; color: #2e9e5b; }
.claim-badge.expired { background: #ffeef0; color: #d6336c; }
.claim-badge.future { background: #fff6e0; color: #b8860b; }

/* regex highlight */
.rx-highlight { line-height: 1.7; }
.rx-match { background: #667eea; color: #fff; border-radius: 3px; padding: 0 1px; }
.rx-group-legend { font-size: 12px; color: #888; margin-top: 6px; }

/* color format rows */
.color-row { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.color-row .tool-input { flex: 1; min-width: 180px; }
.color-row .tool-btn { white-space: nowrap; }

/* --- Related tools --- */
.related-tools { margin-top: 26px; }
.related-tools h2 { font-size: 17px; color: #1a1a2e; margin: 0 0 12px; }
.related-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px;
}
.related-card {
  display: flex; gap: 10px; align-items: flex-start;
  background: #fff; border: 2px solid #ececf4; border-radius: 12px;
  padding: 12px; text-decoration: none; transition: all .2s;
}
.related-card:hover { border-color: #667eea; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(102,126,234,.14); }
.related-card .rc-icon {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  background: linear-gradient(135deg, rgba(102,126,234,.14), rgba(118,75,162,.14));
  display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.related-card .rc-title { font-size: 14px; font-weight: 700; color: #1a1a2e; }
.related-card .rc-desc { font-size: 12px; color: #777; margin-top: 2px; line-height: 1.45; }

/* --- SEO about section --- */
.tool-about { margin-top: 26px; font-size: 14px; color: #555; line-height: 1.75; }
.tool-about h2 { font-size: 17px; color: #1a1a2e; margin: 18px 0 8px; }
.tool-about p { margin: 8px 0; }
.tool-about ul { margin: 8px 0; padding-left: 20px; }
.tool-about li { margin: 4px 0; }

/* --- Hub page --- */
.hub-main-container { max-width: 1060px; margin: 0 auto; padding: 30px 20px 60px; }
.hub-header { text-align: center; margin-bottom: 24px; }
.hub-header h1 { font-size: 30px; color: #1a1a2e; margin: 0 0 8px; }
.hub-header p { color: #666; font-size: 14px; margin: 0; }
.hub-search-row {
  display: flex; gap: 10px; max-width: 560px; margin: 20px auto 6px; flex-wrap: wrap;
}
.hub-search-row .tool-input { flex: 1; min-width: 220px; }
.hub-filter-btn {}
.hub-filter-btn.active { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border-color: transparent; }
.hub-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px; margin-top: 18px;
}
.hub-card {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  background: #fff; border: 2px solid #ececf4; border-radius: 14px;
  padding: 18px 16px; text-decoration: none; transition: all .2s;
}
.hub-card:hover { border-color: #667eea; transform: translateY(-3px); box-shadow: 0 8px 22px rgba(102,126,234,.15); }
.hub-card .hc-icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(102,126,234,.14), rgba(118,75,162,.14));
  display: flex; align-items: center; justify-content: center; font-size: 23px;
}
.hub-card .hc-title { font-size: 16px; font-weight: 700; color: #1a1a2e; }
.hub-card .hc-desc { font-size: 13px; color: #777; line-height: 1.5; flex: 1; }
.hub-card .hc-star {
  position: absolute; top: 12px; right: 12px;
  background: none; border: none; font-size: 19px; cursor: pointer;
  color: #c9c9d9; padding: 4px; line-height: 1; transition: transform .15s;
}
.hub-card .hc-star:hover { transform: scale(1.2); }
.hub-card .hc-star.on { color: #f2b01e; }
.hub-empty {
  text-align: center; color: #999; padding: 40px 0; font-size: 14px; display: none;
}
.hub-fav-section { margin-top: 34px; }
.hub-fav-section h2 { font-size: 20px; color: #1a1a2e; }

/* --- Mobile --- */
@media (max-width: 640px) {
  .tool-wrapper { padding: 18px 14px; }
  .tool-main-container { padding: 18px 12px 46px; }
  .tool-header h1 { font-size: 21px; }
  .tool-btn { padding: 8px 15px; font-size: 13px; }
  .tool-textarea { min-height: 120px; }
  .hub-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .tool-head-row { flex-direction: column; }
  .tools-fav-link { margin-right: 4px; padding: 4px 8px; }
}


/* ============================================================
   v2 补充（2026-09-08）：gen-tools-pages.py 生成标记的组件类
   ============================================================ */

/* 输入组与 label */
.tool-input-group { margin-bottom: 16px; }
.tool-input-group label {
  display: block; font-size: 13px; font-weight: 600; color: #444; margin-bottom: 6px;
}

/* 按钮行 / 控件行（含下拉、内联 label、复选框） */
.tool-actions {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px;
}
.tool-actions .tool-input, .tool-actions .tool-select { width: auto; min-width: 120px; }
.tool-inline-label { font-size: 13px; font-weight: 600; color: #444; white-space: nowrap; }
.tool-check {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: #555; cursor: pointer; user-select: none;
}
.tool-check input[type="checkbox"] { accent-color: #667eea; width: 15px; height: 15px; cursor: pointer; }

/* 结果条（状态 + meta + 复制/保存按钮） */
.tool-result-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.tool-result-bar .tool-btn { padding: 6px 14px; font-size: 13px; }
.tool-bar-spacer { flex: 1; }
.tool-meta { font-size: 12px; color: #888; }
.tool-result-bar .tool-status { margin: 0; }

/* 错误提示块 */
.tool-error {
  margin-top: 14px; padding: 10px 14px; border-radius: 10px;
  background: #ffeef0; color: #d6336c; font-size: 13px;
  border: 1px solid #ffb3c6; word-break: break-all; line-height: 1.6;
}

/* 工具页底部控制区（星标 / 收藏 / 统计） */
.tool-controls {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-top: 24px; padding-top: 18px; border-top: 1px solid #ececf4;
}
.tool-usage { margin-left: auto; color: #999; font-size: 13px; display: flex; align-items: center; gap: 4px; }
.tool-star.starred { color: #b8860b; background: #fff6e0; border-color: #f2d488; }

/* 章节小标题 / 状态行 / 提示行 */
.tool-section-title { font-size: 15px; color: #1a1a2e; margin: 22px 0 8px; }
.tool-status-line { font-size: 13px; margin: 6px 0; }
.tool-hint { font-size: 12px; color: #999; line-height: 1.6; margin: 10px 0 0; }

/* 时间戳页实时时钟 */
.tool-live-clock {
  background: linear-gradient(135deg, rgba(102,126,234,.10), rgba(118,75,162,.10));
  border-radius: 12px; padding: 14px 16px; margin-bottom: 8px;
}
.tlc-label { display: block; font-size: 12px; font-weight: 700; color: #667eea; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px; }
.tlc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.tlc-item { background: #fff; border-radius: 10px; padding: 8px 12px; }
.tlc-item span { display: block; font-size: 11px; color: #888; margin-bottom: 2px; }
.tlc-item code { font-size: 14px; color: #1a1a2e; font-family: 'SFMono-Regular', Consolas, Menlo, monospace; word-break: break-all; }

/* 正则匹配列表 */
#rx-matches { margin-top: 10px; }
.rx-match-item {
  background: #fff; border: 1px solid #ececf4; border-radius: 10px;
  padding: 8px 12px; font-size: 13px; margin-top: 8px; word-break: break-all;
}
.rx-match-item .rx-mi-head { font-size: 12px; color: #888; margin-bottom: 4px; }
.rx-match-item .rx-mi-group { color: #555; }

/* 颜色转换器 */
.cc-preview {
  height: 90px; border-radius: 12px; border: 2px solid #e0e0e0;
  margin-bottom: 12px; background: #667eea;
}
.tool-color-input {
  width: 48px; height: 40px; padding: 2px; cursor: pointer;
  border: 2px solid #e0e0e0; border-radius: 8px; background: #fff;
}

/* hub 卡片（div 容器 + 内部 a.hc-main + 按钮 hc-star） */
.hub-card { display: flex; flex-direction: column; }
.hub-card .hc-main {
  display: flex; flex-direction: column; gap: 8px; flex: 1;
  text-decoration: none; color: inherit; padding-right: 26px;
}
.hub-card .hc-star.starred, .hub-card .hc-star.on { color: #f2b01e; }

/* 头部收藏徽标图标（tools-fav-icon） */
.tools-fav-icon { font-size: 14px; line-height: 1; }

/* 移动端补充 */
@media (max-width: 640px) {
  .tool-usage { margin-left: 0; width: 100%; }
  .tool-actions .tool-input { min-width: 0; flex: 1; }
}