:root {
  --sfz-blue: #1e88e5;
  --sfz-blue-dark: #1565c0;
  --sfz-bg: #f3f6fb;
  --sfz-card: #fff;
  --sfz-text: #243447;
  --sfz-muted: #6b7c93;
  --sfz-line: #e3eaf3;
  --sfz-radius: 10px;
  --sfz-max: 1100px;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body {
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--sfz-text);
  background:
    radial-gradient(1200px 400px at 10% -10%, rgba(30,136,229,.12), transparent 60%),
    radial-gradient(900px 320px at 100% 0%, rgba(21,101,192,.08), transparent 50%),
    var(--sfz-bg);
  line-height: 1.6;
}
a { color: var(--sfz-blue); text-decoration: none; }
a:hover { color: var(--sfz-blue-dark); text-decoration: underline; }
img { max-width: 100%; height: auto; }
.sfz-skip {
  position: absolute; left: -9999px; top: 0;
}
.sfz-skip:focus { left: 8px; z-index: 99; background: #fff; padding: 8px 12px; }
.sfz-wrap { width: min(100% - 24px, var(--sfz-max)); margin: 0 auto; }
.sfz-header {
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--sfz-line);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 20;
}
.sfz-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 64px;
}
.sfz-brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.sfz-brand__logo { border-radius: 8px; }
.sfz-brand__name { font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; }
.sfz-nav { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.sfz-nav__link { color: var(--sfz-text); font-weight: 600; }
.sfz-main { padding: 20px 0 48px; }
.sfz-card {
  background: var(--sfz-card);
  border: 1px solid var(--sfz-line);
  border-radius: var(--sfz-radius);
  padding: 18px 18px 16px;
  margin-bottom: 16px;
  box-shadow: 0 8px 24px rgba(36,52,71,.04);
}
.sfz-card h1 { margin: 0 0 10px; font-size: 1.45rem; }
.sfz-card h2 { margin: 0 0 12px; font-size: 1.1rem; }
.sfz-muted { color: var(--sfz-muted); font-size: .95rem; }
.sfz-search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}
.sfz-search label { display: none; }
.sfz-search input {
  width: 100%; min-width: 0;
  border: 1px solid #c9d6e5;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 1rem;
}
.sfz-search button, .sfz-btn {
  border: 0; border-radius: 8px;
  background: var(--sfz-blue); color: #fff;
  padding: 12px 18px; font-weight: 600; cursor: pointer;
}
.sfz-search button:hover, .sfz-btn:hover { background: var(--sfz-blue-dark); }
.sfz-chip-list, .sfz-id-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.sfz-id-list { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.sfz-chip-list a, .sfz-id-list a {
  display: block; padding: 10px 12px;
  background: #f7faff; border: 1px solid var(--sfz-line);
  border-radius: 8px; color: var(--sfz-text); text-decoration: none;
  min-width: 0; overflow-wrap: anywhere;
}
.sfz-chip-list a:hover, .sfz-id-list a:hover { border-color: #90caf9; background: #eef6ff; }
.sfz-table { width: 100%; border-collapse: collapse; }
.sfz-table th, .sfz-table td {
  border: 1px solid var(--sfz-line); padding: 10px 12px; text-align: left;
  vertical-align: top;
}
.sfz-table th { background: #f5f9fd; }
.sfz-crumb { margin: 0 0 12px; color: var(--sfz-muted); font-size: .92rem; }
.sfz-crumb a { color: var(--sfz-muted); }
.sfz-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 16px;
  align-items: start;
}
.sfz-side .sfz-card { position: sticky; top: 80px; }
.sfz-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.sfz-form-grid label { display: grid; gap: 6px; font-size: .92rem; color: var(--sfz-muted); }
.sfz-form-grid select, .sfz-form-grid input {
  border: 1px solid #c9d6e5; border-radius: 8px; padding: 10px 12px; font-size: 1rem; color: var(--sfz-text);
}
.sfz-result-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.sfz-result-list li {
  padding: 10px 12px; border: 1px dashed #b3d4fc; border-radius: 8px; background: #f8fbff;
  font-family: ui-monospace, Consolas, monospace;
}
.sfz-footer { border-top: 1px solid var(--sfz-line); padding: 24px 0 36px; background: #fff; }
.sfz-footer__friends {
  margin: 0 0 14px;
  padding: 12px 0 4px;
  border-bottom: 1px dashed var(--sfz-line);
  font-size: .9rem;
  line-height: 1.9;
  color: var(--sfz-muted);
}
.sfz-footer__friends-label {
  display: inline-block;
  font-weight: 600;
  color: var(--sfz-text);
  margin-right: 8px;
  margin-bottom: 6px;
}
.sfz-footer__links { display: inline; }
.sfz-footer__links a {
  display: inline-block;
  margin: 0 14px 8px 0;
  color: var(--sfz-blue);
  text-decoration: none;
  white-space: nowrap;
}
.sfz-footer__links a:hover { text-decoration: underline; color: var(--sfz-blue-dark); }
.sfz-footer__copy { color: var(--sfz-muted); font-size: .9rem; margin-top: 16px; }
.sfz-footer__fresh { margin-left: 8px; }
@media (max-width: 860px) {
  .sfz-layout { grid-template-columns: 1fr; }
  .sfz-side .sfz-card { position: static; }
  .sfz-form-grid { grid-template-columns: 1fr; }
  .sfz-header__inner { flex-direction: column; align-items: flex-start; padding: 10px 0; }
}