/* 驿站·AI — 小工具页
   卡片沿用首页 curated-card 的视觉语言（同样的圆角/边框/悬浮抬升），
   自带的部分只有订阅开关与展开式订阅表单。 */

.tools-hero {
  position: relative; overflow: hidden;
  padding: clamp(56px, 9vw, 96px) 0 clamp(28px, 4vw, 44px);
  text-align: center;
}
/* hero-glow 是绝对定位的，会压在正常流的文字之上（首页靠 .hero-inner 拿层级）——
   容器必须自己建立定位上下文，否则标题看起来像蒙了一层雾 */
.tools-hero > .container { position: relative; z-index: 1; }
.tools-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 54px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.1; margin-bottom: var(--gap-sm);
}
.tools-hero .hero-lead { max-width: 54ch; margin-inline: auto; color: var(--muted); }

.tools-shell { padding-bottom: clamp(56px, 8vw, 96px); }

.page-banner {
  margin-bottom: var(--gap-md); padding: 12px 16px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); font-size: 14px; color: var(--fg);
}
.page-banner.is-ok {
  border-color: color-mix(in oklch, var(--accent) 45%, var(--border));
  background: var(--accent-soft);
}
.page-banner.is-error { border-color: color-mix(in oklch, oklch(60% 0.2 25) 45%, var(--border)); }

.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--gap-md); }
@media (max-width: 720px) { .tools-grid { grid-template-columns: 1fr; } }

.tool-card {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 22px;
  transition: border-color 0.25s ease, box-shadow 0.3s ease;
}
.tool-card:hover {
  border-color: color-mix(in oklch, var(--accent) 35%, var(--border));
  box-shadow: var(--shadow-md);
}
.tool-card.is-subscribed { border-color: color-mix(in oklch, var(--accent) 50%, var(--border)); }

.tool-head { display: flex; align-items: flex-start; gap: 14px; }
.tool-icon {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px;
  display: grid; place-items: center; font-size: 21px;
  background: var(--accent-soft); box-shadow: var(--shadow-sm);
}
.tool-id { flex: 1; min-width: 0; }
.tool-name { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }
.tool-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tool-tag {
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  padding: 2px 8px; border-radius: 999px; background: var(--fg-soft);
}
.tool-desc { color: var(--muted); font-size: 13.5px; line-height: 1.65; }

/* ── 订阅开关 ── */
.tool-switch { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; cursor: pointer; }
/* input 透明地铺满开关本体，而不是 clip 到 1px：用户点到的、键盘聚焦到的、
   无障碍树与自动化测试拿到的都是同一个真实控件 */
.tool-switch input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer; z-index: 1;
}
.switch-track {
  position: relative; display: block; width: 44px; height: 26px; border-radius: 999px;
  background: var(--fg-soft-2); border: 1px solid var(--border);
  transition: background 0.22s ease, border-color 0.22s ease;
}
.switch-track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease;
}
.tool-switch input:checked + .switch-track {
  background: var(--accent); border-color: var(--accent);
}
.tool-switch input:checked + .switch-track::after { transform: translateX(18px); }
.tool-switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px var(--accent-soft); }
.tool-switch input:disabled + .switch-track { opacity: 0.5; cursor: wait; }
/* 待确认：开关在开位但用虚线描边提示「还没真正生效」 */
.tool-switch.is-pending input:checked + .switch-track {
  background: color-mix(in oklch, var(--accent) 35%, transparent);
  border-style: dashed;
}

/* ── 展开式订阅表单 ── */
.tool-form { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border); }
.tool-form label { font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 6px; }
.tool-form input[type="email"] {
  width: 100%; padding: 9px 12px; font-size: 14px; font-family: inherit;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--fg);
}
.tool-form input[type="email"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tool-consent { flex-direction: row !important; align-items: center; gap: 8px !important; cursor: pointer; user-select: none; }
.tool-consent input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.tool-form-actions { display: flex; align-items: center; gap: 10px; }

.tool-btn {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 8px 18px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface); color: var(--fg);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.tool-btn:hover { border-color: var(--fg); }
.tool-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.tool-btn.primary:hover { filter: brightness(1.06); }
.tool-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.tool-btn.link {
  border: none; background: none; padding: 0; color: var(--accent);
  font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}

/* ── 已订阅信息条 ── */
.tool-sub-info {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--muted);
}
.tool-sub-email { font-family: var(--font-mono); color: var(--fg); }

.tool-msg { font-size: 12.5px; line-height: 1.6; }
.tool-msg.is-error { color: oklch(55% 0.2 25); }
.tool-msg.is-ok { color: var(--accent); }
.tool-msg.is-pending { color: oklch(62% 0.15 75); }

.tools-empty { color: var(--muted); text-align: center; padding: var(--gap-xl) 0; }

/* ── 意见反馈页 ── */
.feedback-shell { max-width: 720px; margin-inline: auto; padding: clamp(48px, 8vw, 88px) 0 clamp(56px, 8vw, 96px); }
.feedback-shell h1 { font-family: var(--font-display); font-size: clamp(30px, 4.5vw, 44px); font-weight: 800; letter-spacing: -0.03em; margin-bottom: var(--gap-sm); }
.feedback-shell .hero-lead { margin-bottom: var(--gap-lg); }

.feedback-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 24px;
}
.feedback-field { display: flex; flex-direction: column; gap: 8px; }
.feedback-field > span { font-size: 13px; color: var(--muted); }
.feedback-field textarea {
  width: 100%; font: inherit; font-size: 14.5px; line-height: 1.7; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--fg); resize: vertical;
}
.feedback-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.feedback-actions { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.feedback-count { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.feedback-login { text-align: center; }
.feedback-login p { color: var(--muted); font-size: 14.5px; margin-bottom: 18px; }

.feedback-mine { margin-top: var(--gap-xl); }
.feedback-mine h2 { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
.my-feedback { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.my-feedback-item { padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.my-feedback-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.my-feedback-reward { color: var(--accent); font-weight: 700; }
.my-feedback-content { font-size: 14px; line-height: 1.7; white-space: pre-wrap; }
.my-feedback-reply {
  margin-top: 10px; padding: 10px 14px; border-radius: var(--radius);
  background: var(--fg-soft); font-size: 13.5px; line-height: 1.7; color: var(--muted);
}

/* ── 退订页 ── */
.unsub-shell { max-width: 520px; margin-inline: auto; padding: clamp(64px, 12vw, 120px) 0; text-align: center; }
.unsub-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 36px 28px;
}
.unsub-card h1 { font-size: 24px; font-weight: 700; margin-bottom: 10px; }
.unsub-card p { color: var(--muted); font-size: 14.5px; line-height: 1.7; }
.unsub-email { font-family: var(--font-mono); color: var(--fg); }
.unsub-actions { display: flex; justify-content: center; gap: 12px; margin-top: 24px; flex-wrap: wrap; }