:root {
  --site-bg:
    radial-gradient(circle at top left, rgba(245, 158, 11, 0.18), transparent 24%),
    radial-gradient(circle at right 18%, rgba(14, 165, 233, 0.12), transparent 22%),
    linear-gradient(180deg, #fbf8f2 0%, #f1ebe2 100%);
  --site-panel: rgba(255, 252, 247, 0.86);
  --site-card: rgba(255, 255, 255, 0.9);
  --site-line: rgba(24, 28, 34, 0.08);
  --site-ink: #171b21;
  --site-muted: #66707c;
  --site-shadow: 0 20px 60px rgba(56, 43, 23, 0.12);
  --site-shadow-lg: 0 28px 80px rgba(56, 43, 23, 0.16);
  --site-accent: #b45309;
  --site-accent-strong: #7c2d12;
}

* {
  box-sizing: border-box;
}

body.tools-site {
  min-height: 100vh;
  color: var(--site-ink);
  background: var(--site-bg);
  font-family: "Inter", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.tools-shell {
  width: min(1240px, calc(100vw - 32px));
  margin: 0 auto;
}

.glass-panel {
  background: var(--site-panel);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: var(--site-shadow);
  backdrop-filter: blur(12px);
}

.site-hero {
  position: relative;
  overflow: hidden;
}

.site-hero::before {
  content: "";
  position: absolute;
  inset: auto -8% -42% 32%;
  height: 18rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(180, 83, 9, 0.18), transparent 68%);
  pointer-events: none;
}

.site-hero::after {
  content: "";
  position: absolute;
  inset: -12% auto auto -8%;
  width: 13rem;
  height: 13rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.12), transparent 68%);
  pointer-events: none;
}

.tool-card {
  background: var(--site-card);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 12px 34px rgba(72, 52, 29, 0.08);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.tool-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--site-shadow-lg);
  border-color: rgba(180, 90, 50, 0.24);
}

.tool-arrow {
  transition: transform 180ms ease, opacity 180ms ease;
}

.tool-card:hover .tool-arrow {
  transform: translateX(3px);
  opacity: 1;
}

.app-frame {
  background: rgba(255, 252, 247, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow: var(--site-shadow);
  backdrop-filter: blur(12px);
}

.app-subpanel {
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid var(--site-line);
}

.app-dropzone {
  border: 1.5px dashed rgba(24, 28, 34, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 239, 231, 0.92));
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.app-dropzone.dragover {
  border-color: rgba(180, 83, 9, 0.72);
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 236, 224, 0.96));
}

.app-log {
  background: rgba(35, 31, 28, 0.04);
  border: 1px solid rgba(24, 28, 34, 0.08);
  font-family: Consolas, "SFMono-Regular", Menlo, monospace;
}

.text-balance {
  text-wrap: balance;
}

@media (max-width: 640px) {
  .tools-shell {
    width: min(100vw - 18px, 1240px);
  }
}