/* tools.js.cn 工具站 共享样式 — 深色 SaaS 风（老邢 UI 基准） */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: radial-gradient(ellipse 80% 60% at 50% -10%, #1a2340 0%, #0d1120 55%, #090b14 100%) fixed;
  color: #e6e8ef;
  min-height: 100vh;
  line-height: 1.6;
}
.container { max-width: 1080px; margin: 0 auto; padding: 32px 20px 60px; }
header.site { text-align: center; padding: 42px 0 12px; }
header.site h1 { font-size: 2rem; font-weight: 700; letter-spacing: 0.5px;
  background: linear-gradient(135deg, #7aa2ff 0%, #a78bfa 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
header.site p.sub { color: #8b93a7; margin-top: 8px; font-size: 0.95rem; }

nav.crumbs { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap;
  padding: 18px 0 6px; font-size: 0.95rem; }
nav.crumbs a { color: #7aa2ff; text-decoration: none; }
nav.crumbs a:hover { text-decoration: underline; }
nav.crumbs span.sep { color: #3a4155; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-top: 28px; }
a.card { display: block; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px; padding: 20px 18px; text-decoration: none; color: inherit;
  transition: transform 0.15s, border-color 0.15s, background 0.15s; }
a.card:hover { transform: translateY(-3px); border-color: rgba(122,162,255,0.55); background: rgba(255,255,255,0.07); }
a.card h3 { font-size: 1.05rem; color: #fff; margin-bottom: 6px; }
a.card p { font-size: 0.85rem; color: #8b93a7; line-height: 1.5; }

.tool-card { background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px; padding: 28px 24px; margin-top: 22px; }
.tool-card textarea, .tool-card input[type=text], .tool-card input[type=number], select {
  width: 100%; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.15);
  color: #e6e8ef; border-radius: 10px; padding: 12px 14px; font-size: 0.95rem; font-family: inherit;
  margin: 8px 0 14px; resize: vertical; }
.tool-card textarea:focus, .tool-card input:focus, select:focus { outline: none; border-color: #7aa2ff; }
.tool-card label { color: #aab2c5; font-size: 0.9rem; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn { background: linear-gradient(135deg, #4f7cff, #7a5cff); color: #fff; border: 0;
  border-radius: 10px; padding: 10px 22px; font-size: 0.95rem; cursor: pointer;
  transition: opacity 0.15s, transform 0.1s; }
.btn:hover { opacity: 0.9; }
.btn:active { transform: scale(0.97); }
.btn.ghost { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); }
#result, .result { background: rgba(0,0,0,0.4); border: 1px solid rgba(122,162,255,0.25);
  border-radius: 10px; padding: 14px; margin-top: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88rem; color: #b7e1b7; white-space: pre-wrap; word-break: break-all; min-height: 24px; }
.result.err { color: #ff9a9a; border-color: rgba(255,122,122,0.3); }
.clip-ok { color: #7dd87d; font-size: 0.8rem; margin-left: 8px; }
.copy-btn { background: transparent; border: 1px solid rgba(122,162,255,0.4); color: #7aa2ff;
  border-radius: 8px; padding: 6px 14px; font-size: 0.8rem; cursor: pointer; margin-top: 10px; }
.copy-btn:hover { background: rgba(122,162,255,0.12); }
footer { text-align: center; color: #5a6072; font-size: 0.78rem; margin-top: 50px; padding: 20px 0; }
footer a { color: #5a6072; }