:root {
  --ink: #17202c;
  --muted: #687586;
  --line: rgba(255, 255, 255, 0.66);
  --paper: #edf3fa;
  --white: rgba(255, 255, 255, 0.72);
  --cyan: #2c8cf4;
  --cyan-dark: #1766c2;
  --glass: rgba(255, 255, 255, 0.48);
  --glass-strong: rgba(255, 255, 255, 0.68);
  --glass-soft: rgba(255, 255, 255, 0.28);
  --glass-border: rgba(255, 255, 255, 0.72);
  --glass-shadow: 0 24px 70px rgba(48, 71, 104, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

html {
  background: #f0f5fb;
}

body {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  background: linear-gradient(180deg, rgba(249, 252, 255, 0.9), rgba(238, 244, 251, 0.84));
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

body > * {
  position: relative;
  z-index: 1;
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: 0;
  width: clamp(300px, 36vw, 520px);
  height: clamp(300px, 36vw, 520px);
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
  filter: blur(54px) saturate(118%);
}

body::before {
  top: 9vh;
  left: -12vw;
  background: radial-gradient(circle at 46% 46%, rgba(63, 151, 248, 0.58) 0 16%, rgba(86, 201, 218, 0.3) 34%, transparent 67%);
  opacity: 0.48;
  animation: glass-drift-a 16s ease-in-out infinite alternate;
}

body::after {
  top: 48vh;
  right: -11vw;
  width: clamp(280px, 32vw, 470px);
  height: clamp(280px, 32vw, 470px);
  background: radial-gradient(circle at 50% 50%, rgba(155, 118, 242, 0.42) 0 15%, rgba(102, 170, 245, 0.24) 35%, transparent 68%);
  opacity: 0.38;
  animation: glass-drift-b 19s ease-in-out infinite alternate;
}

@keyframes glass-drift-a {
  0% { transform: translate3d(-8%, -4%, 0) scale(0.92); }
  52% { transform: translate3d(34vw, 12vh, 0) scale(1.04); }
  100% { transform: translate3d(16vw, 38vh, 0) scale(0.96); }
}

@keyframes glass-drift-b {
  0% { transform: translate3d(6%, 8%, 0) scale(1); }
  48% { transform: translate3d(-30vw, -16vh, 0) scale(0.93); }
  100% { transform: translate3d(-12vw, 28vh, 0) scale(1.05); }
}

.site-header {
  position: sticky;
  z-index: 30;
  top: 12px;
  width: min(1220px, calc(100% - 32px));
  height: 64px;
  margin: 12px auto 0;
  padding: 0 18px;
  border: 1px solid var(--glass-border);
  border-radius: 21px;
  background: rgba(255, 255, 255, 0.54);
  -webkit-backdrop-filter: blur(28px) saturate(165%);
  backdrop-filter: blur(28px) saturate(165%);
  box-shadow: 0 12px 38px rgba(57, 76, 104, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.brand-mark {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 10px;
  background: url("/favicon-v4.png") center / cover no-repeat;
  box-shadow: 0 6px 14px rgba(38, 47, 60, 0.13);
}

.brand-mark::before,
.brand-mark::after,
.brand-mark i {
  display: none;
}

.brand b { letter-spacing: 0.11em; }
.brand small { color: #6f7b8b; }
.site-header .global-nav { gap: 10px; }
.site-header .global-nav a {
  height: 38px;
  padding: 0 15px;
  border-radius: 13px;
  color: #606d7c;
  transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}
.site-header .global-nav a:hover { background: rgba(255, 255, 255, 0.48); }
.site-header .global-nav a.active {
  color: #13253a;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 5px 15px rgba(55, 77, 107, 0.09), inset 0 1px 0 white;
}
.site-header .global-nav a.active::after { display: none; }
.follow-link {
  border-color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.46);
  color: #526478;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}
.follow-link:hover { background: rgba(255, 255, 255, 0.78); }

.local-nav {
  position: sticky;
  z-index: 29;
  top: 86px;
  width: min(1190px, calc(100% - 54px));
  margin: 8px auto 0;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.38);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 10px 28px rgba(55, 77, 108, 0.08);
}
.local-nav > div { width: min(1150px, calc(100% - 36px)); }
.local-nav a.active::after { bottom: 8px; height: 2px; border-radius: 99px; }

.hero {
  width: min(1220px, calc(100% - 32px));
  margin-top: 24px;
  padding: 82px 48px 68px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.66);
  border-radius: 38px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.18));
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--glass-shadow);
}
.hero::before {
  right: -5%;
  top: -28%;
  width: 52%;
  height: 135%;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.78), rgba(108, 183, 255, 0.18) 40%, transparent 68%);
  filter: blur(12px);
}
.hero::after {
  right: 10%;
  top: 18%;
  width: 220px;
  height: 220px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 14px 18px 34px rgba(255, 255, 255, 0.42), 0 22px 55px rgba(48, 95, 155, 0.13);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.hero h1, .routing-hero h1, .mouse-hero h1 { color: #122033; }
.hero h1 em, .routing-hero h1 em, .mouse-hero h1 em { color: #317ad2; }
.hero-eyebrow, .section-kicker { color: #176ac6; }
.hero-meta {
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 16px 36px rgba(57, 78, 109, 0.1), inset 0 1px 0 white;
}

.library,
.mouse-page,
.mouse-library,
.routing-page,
.guide-list,
.guide-list .guide-promo,
.guide-list > div:nth-child(even) .guide-promo,
.resource-groups,
.method-section,
.creator-hub,
.community-note,
.content-principles,
.routing-hero,
.resources-hero,
.mouse-hero {
  border-color: rgba(255, 255, 255, 0.36);
  background: transparent;
}
.library, .mouse-library { padding-top: 35px; }
.guide-list { gap: 0; }
.guide-promo,
.community-note,
.content-principles,
.method-section,
.creator-hub,
.resource-groups {
  background: rgba(255, 255, 255, 0.17);
}
.routing-hero,
.mouse-hero {
  margin: 24px auto 0;
  width: min(1220px, calc(100% - 32px));
  border: 1px solid rgba(255, 255, 255, 0.66);
  border-radius: 36px;
  background: rgba(255, 255, 255, 0.31);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
  box-shadow: var(--glass-shadow);
}

.filter-shell,
.quick-guide,
.pad-card,
.mouse-card,
.creator-link-grid > a,
.tool-links > a,
.method-grid > div,
.content-principles article,
.community-steps span,
.resource-note,
.vote-panel,
.fit-panel,
.editor-card,
.admin-table-card,
.admin-denied > div {
  border: 1px solid var(--glass-border);
  background: var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(155%);
  backdrop-filter: blur(24px) saturate(155%);
  box-shadow: var(--glass-shadow);
}
.filter-shell {
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.57);
  box-shadow: 0 22px 65px rgba(48, 69, 98, 0.15), inset 0 1px 0 white;
}
.search-box,
.sort-control select,
.filter-group button.selected,
.quick-guide > a,
.grip-tags span,
.pagination button,
.mobile-menu summary,
.mobile-menu > div {
  border-color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}
.filter-group { border-color: rgba(106, 127, 151, 0.15); }
.filter-group button:hover { background: rgba(255, 255, 255, 0.48); }
.filter-group button.selected { color: #1766bd; }
.quick-guide { border-radius: 18px; }
.pad-card, .mouse-card {
  border-radius: 23px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 17px 52px rgba(48, 69, 98, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.pad-card:hover, .pad-card:focus-visible,
.mouse-card:hover, .mouse-card:focus-visible,
.creator-link-grid > a:hover {
  border-color: rgba(255, 255, 255, 0.94);
  transform: translateY(-6px) scale(1.006);
  box-shadow: 0 28px 70px rgba(42, 65, 97, 0.18), inset 0 1px 0 white;
}
.pad-visual, .mouse-visual { border-radius: 21px 21px 0 0; }
.card-body, .mouse-card-body { background: rgba(255, 255, 255, 0.22); }
.card-footer, .mouse-fit-line, .mouse-card-bottom { border-color: rgba(111, 132, 155, 0.14); }
.card-footer span, .grip-tags span { color: #5e6f82; }
.method-grid { gap: 22px; }
.method-grid > div,
.content-principles article {
  padding: 24px;
  border-radius: 22px;
}
.method-grid > div { border-top: 1px solid var(--glass-border); }
.content-principles article { border-top: 1px solid var(--glass-border); }
.tool-links > a,
.community-steps span,
.creator-link-grid > a { border-radius: 18px; }
.tool-links > a:hover { background: rgba(255, 255, 255, 0.66); }
.resource-note {
  border-left: 1px solid var(--glass-border);
  border-radius: 20px;
}
.detail-modal {
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 28px;
  background: rgba(248, 251, 255, 0.76);
  -webkit-backdrop-filter: blur(34px) saturate(160%);
  backdrop-filter: blur(34px) saturate(160%);
  box-shadow: 0 36px 120px rgba(20, 36, 60, 0.32), inset 0 1px 0 white;
}
.modal-backdrop {
  background: rgba(30, 43, 63, 0.36);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
}
.modal-close { border-color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.66); }
.suited, .fit-panel, .vote-panel { border-radius: 16px; }

.site-footer {
  margin: 0 16px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 32px;
  background: rgba(17, 29, 45, 0.78);
  -webkit-backdrop-filter: blur(28px) saturate(135%);
  backdrop-filter: blur(28px) saturate(135%);
  box-shadow: 0 28px 80px rgba(24, 36, 54, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.platform-links a { border-radius: 12px; background: rgba(255, 255, 255, 0.05); }

.admin-shell,
.admin-main,
.admin-denied { background: transparent; }
.admin-sidebar {
  margin: 12px 0 12px 12px;
  height: calc(100vh - 24px);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 24px;
  background: rgba(19, 34, 51, 0.82);
  -webkit-backdrop-filter: blur(28px) saturate(130%);
  backdrop-filter: blur(28px) saturate(130%);
  box-shadow: 0 22px 65px rgba(31, 45, 65, 0.18);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header, .local-nav, .filter-shell, .quick-guide, .pad-card, .mouse-card,
  .creator-link-grid > a, .tool-links > a, .method-grid > div, .detail-modal {
    background: rgba(247, 250, 255, 0.94);
  }
}

@media (max-width: 680px) {
  body::before, body::after { width: 300px; height: 300px; filter: blur(48px) saturate(112%); }
  body::before { left: -150px; opacity: 0.4; }
  body::after { right: -150px; opacity: 0.32; }
  .site-header { top: 8px; width: calc(100% - 20px); height: 60px; margin-top: 8px; padding: 0 12px; border-radius: 18px; }
  .local-nav { top: 76px; width: calc(100% - 28px); margin-top: 7px; border-radius: 14px; }
  .hero { width: calc(100% - 20px); margin-top: 16px; padding: 58px 22px 82px; border-radius: 28px; }
  .hero::after { right: -52px; top: 90px; }
  .routing-hero, .mouse-hero { width: calc(100% - 20px); margin-top: 16px; border-radius: 28px; }
  .library, .mouse-library { padding-top: 30px; }
  .filter-shell { border-radius: 22px; }
  .pad-card, .mouse-card { border-radius: 20px; }
  .pad-visual, .mouse-visual { border-radius: 18px 18px 0 0; }
  .site-footer { margin: 0 8px 8px; border-radius: 25px; }
  .admin-sidebar { margin: 8px; width: calc(100% - 16px); height: auto; border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none !important;
    transform: none !important;
  }
}