/* ========================================================================
   ToolHub —— Modern, design-driven stylesheet
   设计语言：浅紫蓝 + 渐变 + 玻璃拟态卡片 + 柔和阴影 + 大字号留白
   ======================================================================== */

:root {
  /* 品牌色 */
  --c-primary:        #6366f1;   /* indigo-500 */
  --c-primary-600:    #4f46e5;
  --c-primary-700:    #4338ca;
  --c-accent:         #ec4899;   /* pink-500 */
  --c-accent-2:       #06b6d4;   /* cyan-500 */

  /* 中性色 */
  --c-bg:             #f7f7fb;
  --c-bg-soft:        #eef0f8;
  --c-surface:        #ffffff;
  --c-text:           #0f172a;
  --c-text-soft:      #475569;
  --c-text-mute:      #94a3b8;
  --c-border:         #e5e7ef;
  --c-border-strong:  #d1d5dc;

  /* 渐变 */
  --grad-hero:        linear-gradient(135deg, #6366f1 0%, #8b5cf6 45%, #ec4899 100%);
  --grad-text:        linear-gradient(120deg, #6366f1 0%, #ec4899 100%);
  --grad-card:        linear-gradient(135deg, rgba(99,102,241,.06), rgba(236,72,153,.06));
  --grad-btn:         linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);

  /* 阴影 */
  --shadow-xs:        0 1px 2px rgba(15, 23, 42, .04);
  --shadow-sm:        0 2px 8px rgba(15, 23, 42, .06);
  --shadow-md:        0 8px 24px rgba(15, 23, 42, .08);
  --shadow-lg:        0 24px 60px -12px rgba(99, 102, 241, .25);
  --shadow-glow:      0 0 0 4px rgba(99, 102, 241, .15);

  /* 圆角 */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-pill: 999px;

  /* 排版 */
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Noto Sans", "Helvetica Neue", Arial,
    "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* 背景网格 + 柔光 */
body::before {
  content: "";
  position: fixed; inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 50% at 90% -10%, rgba(236, 72, 153, .12), transparent 60%),
    radial-gradient(50% 40% at -10% 0%, rgba(99, 102, 241, .14), transparent 60%),
    radial-gradient(40% 30% at 50% 110%, rgba(6, 182, 212, .10), transparent 60%);
  pointer-events: none;
}
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(15, 23, 42, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, .035) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%);
  pointer-events: none;
}

a { color: var(--c-primary-600); text-decoration: none; transition: color .15s; }
a:hover { color: var(--c-primary-700); }

img, svg { max-width: 100%; }

::selection { background: rgba(99, 102, 241, .25); color: var(--c-text); }

/* ---------- Layout ---------- */
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(15, 23, 42, .06);
}
.site-header .container {
  display: flex; align-items: center; gap: 16px;
  height: 64px;
}
.brand {
  font-weight: 800; font-size: 19px; letter-spacing: -.01em;
  color: var(--c-text) !important;
  display: inline-flex; align-items: center; gap: 8px;
}
.brand::before {
  content: "";
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--grad-btn);
  box-shadow: 0 4px 12px rgba(99, 102, 241, .35);
  position: relative;
}
.brand:hover { text-decoration: none; }

.site-nav { display: flex; gap: 6px; margin-left: 28px; flex: 1; }
.site-nav a {
  color: var(--c-text-soft); font-size: 14px; font-weight: 500;
  padding: 8px 12px; border-radius: var(--r-sm);
  transition: background .15s, color .15s;
}
.site-nav a:hover { color: var(--c-text); background: var(--c-bg-soft); text-decoration: none; }

.lang-wrap select {
  appearance: none; -webkit-appearance: none;
  background: var(--c-surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path fill='%2364748b' d='M5 7L1 3h8z'/></svg>") right 10px center/10px no-repeat;
  border: 1px solid var(--c-border);
  color: var(--c-text);
  padding: 7px 30px 7px 12px;
  border-radius: var(--r-sm);
  font-size: 14px; font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.lang-wrap select:hover { border-color: var(--c-border-strong); }
.lang-wrap select:focus { outline: none; border-color: var(--c-primary); box-shadow: var(--shadow-glow); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 96px 0 80px;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(55% 60% at 100% 0%, rgba(236, 72, 153, .18), transparent 60%),
    radial-gradient(45% 60% at 0% 0%, rgba(99, 102, 241, .25), transparent 60%);
  z-index: 0;
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; max-width: 880px; text-align: center; }
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: var(--r-pill);
  background: rgba(99, 102, 241, .08);
  border: 1px solid rgba(99, 102, 241, .2);
  color: var(--c-primary-600);
  font-size: 13px; font-weight: 600;
  margin-bottom: 24px;
}
.hero .eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, .25);
}
.hero h1 {
  font-size: clamp(34px, 5.5vw, 56px);
  line-height: 1.1; margin: 0 0 18px;
  letter-spacing: -.02em; font-weight: 800;
  background: var(--grad-text);
  background-clip: text; -webkit-background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.hero .lead {
  font-size: clamp(16px, 2vw, 19px);
  color: var(--c-text-soft);
  max-width: 640px; margin: 0 auto 32px;
}
.hero .cta-row {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  margin-top: 24px;
}

/* ---------- Tools section ---------- */
.tools-section { padding: 24px 0 88px; }
.tools-section .section-head {
  display: flex; align-items: end; justify-content: space-between; gap: 16px;
  margin-bottom: 28px;
}
.tools-section .section-head h2 {
  font-size: 24px; font-weight: 700; margin: 0;
  letter-spacing: -.01em;
}
.tools-section .intro {
  color: var(--c-text-soft); margin: 0; font-size: 15px;
  max-width: 560px;
}

.tools-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.tool-card {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 28px 24px 22px;
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s, border-color .25s;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.tool-card::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--grad-card);
  opacity: 0; transition: opacity .25s;
  pointer-events: none;
}
.tool-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(99, 102, 241, .3);
}
.tool-card:hover::before { opacity: 1; }
.tool-card > * { position: relative; z-index: 1; }
.tool-card .tool-icon {
  width: 52px; height: 52px; border-radius: var(--r-md);
  background: var(--grad-btn);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 26px; color: #fff;
  box-shadow: 0 8px 20px -4px rgba(99, 102, 241, .45);
  margin-bottom: 18px;
}
.tool-card h3 {
  margin: 0 0 8px; font-size: 18px; font-weight: 700;
  letter-spacing: -.005em;
}
.tool-card p {
  color: var(--c-text-soft); font-size: 14px;
  margin: 0 0 20px; flex: 1;
}
.tool-card .tool-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600;
  color: var(--c-primary-600);
  align-self: flex-start;
}
.tool-card .tool-link::after {
  content: "→";
  transition: transform .2s;
}
.tool-card:hover .tool-link::after { transform: translateX(4px); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; border-radius: var(--r-sm);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 14px; font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { border-color: var(--c-primary); color: var(--c-primary-600); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-glow); }

.btn.primary {
  background: var(--grad-btn);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 20px -4px rgba(99, 102, 241, .45);
}
.btn.primary:hover {
  color: #fff;
  filter: brightness(1.05);
  box-shadow: 0 12px 28px -6px rgba(99, 102, 241, .55);
}
.btn.ghost {
  background: transparent; border-color: transparent;
  color: var(--c-text-soft);
}
.btn.ghost:hover { background: var(--c-bg-soft); color: var(--c-text); border-color: transparent; }

.btn.large { padding: 13px 26px; font-size: 15px; border-radius: var(--r-md); }

/* ---------- Tool page ---------- */
.tool-page { padding: 36px 0 96px; }
.breadcrumb {
  font-size: 13px; color: var(--c-text-mute);
  margin-bottom: 18px;
}
.breadcrumb a { color: var(--c-text-soft); }
.breadcrumb a:hover { color: var(--c-primary-600); }
.breadcrumb span { color: var(--c-text); }

.tool-page h1 {
  font-size: clamp(28px, 4vw, 38px);
  margin: 0 0 10px;
  font-weight: 800; letter-spacing: -.015em;
  line-height: 1.2;
}
.tool-page .subtitle {
  color: var(--c-text-soft); font-size: 16px;
  margin: 0 0 32px;
}

.tool-app {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: 28px;
  box-shadow: var(--shadow-md);
  margin-bottom: 40px;
}
.io-grid {
  display: grid; gap: 20px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 760px) { .io-grid { grid-template-columns: 1fr; } }

.io-col label {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
  font-size: 13px; font-weight: 600;
  color: var(--c-text-soft);
  text-transform: uppercase; letter-spacing: .08em;
}
.io-col label strong { font-weight: 700; color: var(--c-text); text-transform: none; letter-spacing: 0; font-size: 14px; }

.io-col textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background: #fafbfd;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--c-text);
  resize: vertical;
  min-height: 180px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.io-col textarea:hover { border-color: var(--c-border-strong); }
.io-col textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--c-primary);
  box-shadow: var(--shadow-glow);
}
.io-col textarea::placeholder { color: var(--c-text-mute); }

.io-col .actions {
  margin-top: 12px;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}

.copied-toast {
  font-size: 13px; font-weight: 600;
  color: #16a34a;
  margin-left: 6px;
  opacity: 0; transform: translateY(-2px);
  transition: opacity .2s, transform .2s;
}
.copied-toast.show { opacity: 1; transform: translateY(0); }

.note {
  font-size: 13px; color: var(--c-text-soft);
  margin: 18px 0 0;
  padding: 12px 14px;
  background: rgba(99, 102, 241, .06);
  border: 1px solid rgba(99, 102, 241, .15);
  border-radius: var(--r-md);
  display: inline-flex; align-items: center; gap: 8px;
}

/* Content blocks */
.content-block { margin-top: 40px; }
.content-block h2 {
  font-size: 22px; font-weight: 700; margin: 0 0 14px;
  letter-spacing: -.005em;
}
.content-block p { color: var(--c-text-soft); margin: 0 0 16px; }

.features {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.features li {
  position: relative;
  padding: 12px 14px 12px 40px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: 14px;
  color: var(--c-text);
}
.features li::before {
  content: "✓";
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--grad-btn);
  color: #fff;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* FAQ */
.faq-item {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin-bottom: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.faq-item[open] { border-color: rgba(99, 102, 241, .35); box-shadow: var(--shadow-sm); }
.faq-item summary {
  font-weight: 600; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  color: var(--c-text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--c-bg-soft);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 400;
  color: var(--c-text-soft);
  transition: transform .2s, background .15s;
  flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); background: rgba(99,102,241,.12); color: var(--c-primary-600); }
.faq-item p {
  margin: 12px 0 0;
  color: var(--c-text-soft);
  font-size: 14.5px;
}

/* Generic page (about / 404) */
.page { padding: 64px 0 96px; }
.page h1 {
  font-size: clamp(32px, 5vw, 44px);
  margin: 0 0 18px;
  font-weight: 800;
  letter-spacing: -.015em;
  background: var(--grad-text);
  background-clip: text; -webkit-background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.page p { color: var(--c-text-soft); font-size: 16.5px; }

/* ---------- Footer ---------- */
.site-footer {
  margin-top: 64px;
  padding: 28px 0;
  border-top: 1px solid var(--c-border);
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 13px;
  color: var(--c-text-mute);
}
.site-footer p { margin: 0; text-align: center; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001s !important; animation-duration: .001s !important; }
}