:root {
  --qqn-bg: #eaf2ff;
  --qqn-bg-2: #d6e8ff;
  --qqn-card: rgba(255, 255, 255, 0.88);
  --qqn-card-deep: rgba(18, 102, 255, 0.92);
  --qqn-text: #0f2f64;
  --qqn-text-soft: #4f6d98;
  --qqn-primary: #1f74ff;
  --qqn-primary-2: #29d6ff;
  --qqn-success: #16c784;
  --qqn-danger: #ff4d67;
  --qqn-warning: #ff9f2e;
  --qqn-border: rgba(96, 145, 226, 0.28);
  --qqn-shadow: 0 10px 34px rgba(31, 94, 198, 0.16);
  --qqn-radius: 16px;
  --qqn-radius-sm: 12px;
  --qqn-blur: blur(14px);
}

@media (max-width: 640px) {
  .qqn-brand-subtitle {
    max-width: min(136px, 40vw) !important;
  }

  .qqn-mobile-theme-toggle-main,
  .qqn-menu-toggle-main {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 0 !important;
    line-height: 1;
  }

  .qqn-mobile-theme-toggle-main {
    order: 2;
    margin-left: auto;
  }

  .qqn-menu-toggle-main {
    order: 3;
    margin-left: 4px;
  }

  .qqn-mobile-theme-toggle-main::before {
    content: "◐";
    font-size: 14px;
    line-height: 1;
  }

  .qqn-menu-toggle-main::before {
    content: "☰";
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
  }

  .qqn-topbar-inner > .qqn-mobile-theme-toggle:not(.qqn-mobile-theme-toggle-main),
  .qqn-topbar-inner > .qqn-menu-toggle:not(.qqn-menu-toggle-main) {
    display: none !important;
  }

  .qqn-topmenu .qqn-toolbar [data-theme-toggle] {
    display: none !important;
  }

  .qqn-menu-backdrop {
    z-index: 120 !important;
  }

  .qqn-topmenu {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: min(280px, 84vw) !important;
    height: 100vh !important;
    z-index: 130 !important;
    border-left: 1px solid var(--qqn-border) !important;
    border-radius: 0 !important;
    background: #f5f9ff !important;
    box-shadow: -12px 0 28px rgba(17, 58, 126, 0.18) !important;
    backdrop-filter: blur(10px);
    padding: 74px 12px 14px !important;
    display: grid !important;
    align-content: start;
    gap: 10px;
    transform: translateX(100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .qqn-topbar-inner.is-menu-open .qqn-topmenu {
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .qqn-topmenu .qqn-nav {
    width: 100%;
    order: 1;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px;
    overflow: visible;
    padding: 0;
  }

  .qqn-topmenu .qqn-nav a {
    width: 100%;
    text-align: left;
    padding: 9px 10px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .qqn-topmenu .qqn-toolbar {
    width: 100%;
    order: 2;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px;
    justify-content: initial;
    overflow: visible;
    padding: 0;
  }

  .qqn-topmenu .qqn-toolbar .qqn-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  :root[data-mode="dark"] .qqn-topmenu {
    background: #132c58 !important;
    box-shadow: -14px 0 28px rgba(2, 9, 24, 0.52) !important;
  }
}

:root[data-mode="dark"] {
  --qqn-bg: #081733;
  --qqn-bg-2: #102554;
  --qqn-card: rgba(14, 31, 67, 0.86);
  --qqn-card-deep: rgba(20, 82, 196, 0.92);
  --qqn-text: #d9e7ff;
  --qqn-text-soft: #9bb5df;
  --qqn-primary: #4f9dff;
  --qqn-primary-2: #26cfff;
  --qqn-border: rgba(74, 120, 204, 0.5);
  --qqn-shadow: 0 14px 44px rgba(2, 8, 24, 0.58);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  position: relative;
  overflow-x: hidden;
  background: linear-gradient(180deg, #dff0ff 0%, #cde8ff 42%, #edf7ff 100%);
  color: var(--qqn-text);
  font-size: 14px;
  line-height: 1.45;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 320px 120px at 16% 18%, rgba(255, 255, 255, 0.88) 0 44%, transparent 56%),
    radial-gradient(ellipse 380px 130px at 44% 24%, rgba(255, 255, 255, 0.72) 0 44%, transparent 56%),
    radial-gradient(ellipse 300px 110px at 76% 26%, rgba(255, 255, 255, 0.68) 0 44%, transparent 56%),
    radial-gradient(1100px 520px at 50% -14%, rgba(122, 196, 255, 0.24), transparent 72%);
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.66;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 86% 12%, rgba(255, 235, 141, 0.98) 0 48px, rgba(255, 235, 141, 0.3) 49px 88px, transparent 90px),
    radial-gradient(circle at 82% 9%, rgba(255, 255, 255, 0.34) 0 16px, transparent 20px);
}

body > header,
body > main,
body > footer {
  position: relative;
  z-index: 1;
}

:root[data-mode="dark"] body {
  background: linear-gradient(180deg, #06142d 0%, #0a1f45 50%, #123063 100%);
}

:root[data-mode="dark"] body::before {
  background:
    radial-gradient(780px 320px at 18% -8%, rgba(53, 104, 195, 0.42), transparent 74%),
    radial-gradient(720px 300px at 82% -5%, rgba(39, 90, 180, 0.36), transparent 74%),
    radial-gradient(ellipse 300px 120px at 24% 70%, rgba(11, 35, 73, 0.34) 0 52%, transparent 66%),
    radial-gradient(ellipse 340px 130px at 70% 76%, rgba(9, 30, 64, 0.28) 0 52%, transparent 66%),
    radial-gradient(circle at 13% 24%, rgba(255, 255, 255, 0.64) 0 1.2px, transparent 2px),
    radial-gradient(circle at 28% 13%, rgba(255, 255, 255, 0.6) 0 1.1px, transparent 2px),
    radial-gradient(circle at 44% 22%, rgba(255, 255, 255, 0.58) 0 1.1px, transparent 2px),
    radial-gradient(circle at 61% 16%, rgba(255, 255, 255, 0.62) 0 1.2px, transparent 2px),
    radial-gradient(circle at 78% 10%, rgba(255, 255, 255, 0.6) 0 1.1px, transparent 2px),
    radial-gradient(circle at 91% 23%, rgba(255, 255, 255, 0.56) 0 1px, transparent 2px);
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.48;
}

:root[data-mode="dark"] body::after {
  z-index: 0;
  background:
    radial-gradient(circle at 86% 11%, rgba(233, 241, 255, 0.98) 0 38px, rgba(177, 197, 238, 0.28) 39px 72px, transparent 74px),
    radial-gradient(circle at 88% 10%, rgba(10, 29, 62, 0.95) 0 30px, transparent 31px);
}

:root[data-mode="dark"] .qqn-btn {
  background: rgba(17, 39, 82, 0.88);
  border-color: rgba(106, 146, 224, 0.5);
  color: #dbe9ff;
}

:root[data-mode="dark"] .qqn-btn-icon {
  background: rgba(22, 49, 101, 0.94);
}

:root[data-mode="dark"] .qqn-btn-ghost {
  background: rgba(16, 36, 76, 0.9);
}

:root[data-mode="dark"] .qqn-btn-primary {
  color: #fff;
}

a {
  color: inherit;
  text-decoration: none;
}

.qqn-container {
  width: min(1120px, calc(100% - 28px));
  margin-inline: auto;
}

.qqn-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: var(--qqn-blur);
  background: color-mix(in srgb, var(--qqn-card) 72%, transparent);
  border-bottom: 1px solid var(--qqn-border);
}

.qqn-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 62px;
  flex-wrap: nowrap;
}

.qqn-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.qqn-brand-badge {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 11px;
  background: linear-gradient(140deg, var(--qqn-primary), var(--qqn-primary-2));
  box-shadow: 0 6px 18px rgba(29, 111, 239, 0.35);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

.qqn-brand-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.qqn-brand-title {
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qqn-brand-subtitle {
  color: var(--qqn-text-soft);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(560px, 38vw);
}

.qqn-nav {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.qqn-nav a {
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--qqn-text-soft);
  transition: all 0.2s ease;
}

.qqn-nav a:hover,
.qqn-nav a.is-active {
  color: var(--qqn-text);
  background: rgba(41, 142, 255, 0.14);
}

.qqn-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.qqn-menu-toggle {
  display: none;
}

.qqn-mobile-theme-toggle-main {
  display: none;
}

.qqn-topmenu {
  display: contents;
}

.qqn-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 110;
  opacity: 0;
  pointer-events: none;
  background: rgba(7, 23, 54, 0.18);
  backdrop-filter: blur(2px);
  transition: opacity 0.18s ease;
}

.qqn-menu-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.qqn-btn {
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 8px 12px;
  min-height: 36px;
  cursor: pointer;
  font-size: 13px;
  color: var(--qqn-text);
  background: rgba(255, 255, 255, 0.7);
  transition: all 0.22s ease;
}

.qqn-btn:hover {
  transform: translateY(-1px);
}

.qqn-btn-primary {
  border: none;
  color: #fff;
  background: linear-gradient(140deg, var(--qqn-primary), var(--qqn-primary-2));
  box-shadow: 0 8px 22px rgba(27, 117, 244, 0.36);
}

.qqn-btn-ghost {
  border-color: var(--qqn-border);
  background: color-mix(in srgb, var(--qqn-card) 86%, transparent);
}

.qqn-btn-icon {
  width: 36px;
  min-width: 36px;
  padding: 0;
}

.qqn-main {
  display: grid;
  gap: 14px;
  padding: 14px 0 18px;
}

.qqn-panel {
  border: 1px solid var(--qqn-border);
  border-radius: var(--qqn-radius);
  background: var(--qqn-card);
  box-shadow: var(--qqn-shadow);
  backdrop-filter: var(--qqn-blur);
}

.qqn-panel-pad {
  padding: 14px;
}

.qqn-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.qqn-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.qqn-subtitle {
  margin: 0;
  color: var(--qqn-text-soft);
  font-size: 13px;
}

.qqn-hero {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 12px;
}

.qqn-hero-v2 {
  grid-template-columns: 1.75fr 1fr;
  align-items: start;
}

.qqn-search-card {
  border-radius: 32px;
  padding: 24px 28px;
  background: #f6f8fb;
}

.qqn-overview-card {
  border-radius: 32px;
  padding: 20px 24px;
  background: #f6f8fb;
}

:root[data-mode="dark"] .qqn-search-card,
:root[data-mode="dark"] .qqn-overview-card {
  background: rgba(17, 39, 82, 0.9);
  border-color: rgba(93, 132, 212, 0.48);
}

.qqn-search-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.qqn-shortcut {
  display: inline-flex;
  gap: 6px;
}

.qqn-shortcut span {
  border: 1px solid #d9dde4;
  border-radius: 11px;
  min-width: 34px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #666;
  background: #fff;
}

:root[data-mode="dark"] .qqn-shortcut span {
  border-color: rgba(101, 132, 197, 0.56);
  color: #bdd4ff;
  background: rgba(16, 38, 78, 0.92);
}

.qqn-hero-main {
  padding: 16px;
  border-radius: var(--qqn-radius);
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, rgba(20, 107, 246, 0.95), rgba(40, 213, 255, 0.76));
  color: #fff;
  align-self: start;
}

.qqn-hero-main::before,
.qqn-hero-main::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.qqn-hero-main::before {
  width: 220px;
  height: 220px;
  top: -120px;
  right: -60px;
  background: rgba(255, 255, 255, 0.28);
}

.qqn-hero-main::after {
  width: 180px;
  height: 180px;
  left: -80px;
  bottom: -110px;
  background: rgba(255, 255, 255, 0.16);
}

.qqn-hero-main > * {
  position: relative;
  z-index: 1;
}

.qqn-hero-title {
  margin: 0;
  font-size: 26px;
  line-height: 1.2;
}

.qqn-hero-desc {
  margin: 8px 0 0;
  opacity: 0.92;
}

.qqn-search-shell {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 170px 1fr auto;
  gap: 8px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45), 0 14px 26px rgba(8, 53, 142, 0.22);
}

.qqn-search-shell select,
.qqn-search-shell input {
  width: 100%;
  border: 1px solid rgba(66, 117, 197, 0.35);
  border-radius: 10px;
  outline: none;
  min-height: 42px;
  padding: 0 12px;
  font-size: 14px;
  color: #174178;
  background: rgba(255, 255, 255, 0.95);
}

.qqn-search-shell input:focus,
.qqn-search-shell select:focus {
  border-color: #2d98ff;
  box-shadow: 0 0 0 3px rgba(47, 155, 255, 0.2);
}

.qqn-search-shell .qqn-btn-primary {
  min-width: 126px;
  min-height: 42px;
}

.qqn-search-shell-v2 {
  margin-top: 16px;
  grid-template-columns: 1fr 128px;
  gap: 12px;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.qqn-search-input-wrap {
  min-height: 64px;
  border-radius: 22px;
  border: 2px solid #7fb9ff;
  background: #fff;
  box-shadow: 0 10px 22px rgba(31, 116, 255, 0.16);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
}

:root[data-mode="dark"] .qqn-search-input-wrap {
  border-color: rgba(92, 152, 245, 0.66);
  background: rgba(14, 34, 71, 0.9);
  box-shadow: 0 10px 22px rgba(6, 18, 44, 0.42);
}

.qqn-drive-inline {
  flex: 0 0 98px;
}

.qqn-drive-inline select {
  width: 100%;
  min-height: 38px;
  border: 1px solid #cfe4ff;
  border-radius: 12px;
  background: #f5faff;
  color: #1b4f95;
  padding: 0 8px;
  font-size: 12px;
}

:root[data-mode="dark"] .qqn-drive-inline select {
  border-color: rgba(94, 132, 206, 0.58);
  background: rgba(21, 48, 96, 0.92);
  color: #d7e8ff;
}

.qqn-search-input-wrap input {
  border: none;
  outline: none;
  min-height: 58px;
  flex: 1;
  font-size: 22px;
  background: transparent;
  color: #11386f;
}

:root[data-mode="dark"] .qqn-search-input-wrap input {
  color: #d7e8ff;
}

.qqn-search-input-wrap input::placeholder {
  color: #5d83ba;
  font-size: 17px;
  font-weight: 500;
}

:root[data-mode="dark"] .qqn-search-input-wrap input::placeholder {
  color: #89acd8;
}

.qqn-search-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
}

.qqn-search-icon svg {
  width: 28px;
  height: 28px;
  display: block;
}

.qqn-search-shell-v2 .qqn-btn-primary {
  min-height: 64px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: linear-gradient(135deg, #0f66ff 0%, #1f86ff 48%, #31d2ff 100%);
  box-shadow: 0 12px 26px rgba(20, 104, 255, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.qqn-search-shell-v2 .qqn-btn-primary:hover {
  transform: translateY(-1px);
  filter: saturate(1.08) brightness(1.03);
  box-shadow: 0 14px 30px rgba(20, 104, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

:root[data-mode="dark"] .qqn-search-shell-v2 .qqn-btn-primary {
  border-color: rgba(132, 181, 255, 0.34);
  background: linear-gradient(135deg, #2a7cff 0%, #3997ff 52%, #4ad9ff 100%);
  box-shadow: 0 12px 28px rgba(26, 88, 219, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.qqn-hot-inline {
  margin-top: 16px;
  display: grid;
  gap: 8px;
}

.qqn-hot-label {
  color: #4c6da1;
  font-size: 14px;
}

:root[data-mode="dark"] .qqn-hot-label {
  color: #9ab8e2;
}

.qqn-hot-inline .qqn-chip-row {
  gap: 10px;
  max-height: 68px;
  overflow: hidden;
}

.qqn-hot-inline .qqn-chip {
  background: #f2f8ff;
  border-color: #cee1fb;
  color: #345e96;
}

:root[data-mode="dark"] .qqn-hot-inline .qqn-chip {
  background: rgba(21, 52, 104, 0.84);
  border-color: rgba(95, 138, 214, 0.5);
  color: #cbe0ff;
}

.qqn-hero-tip,
.qqn-overview-tip {
  margin: 14px 0 0;
  color: #a9b4c7;
  font-size: 11px;
}

:root[data-mode="dark"] .qqn-hero-tip,
:root[data-mode="dark"] .qqn-overview-tip {
  color: #7f94b9;
}

.qqn-overview-grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.qqn-overview-item {
  border: 1px solid #dde2eb;
  border-radius: 16px;
  background: #fff;
  padding: 12px;
}

:root[data-mode="dark"] .qqn-overview-item {
  border-color: rgba(95, 132, 206, 0.48);
  background: rgba(15, 37, 76, 0.86);
}

.qqn-overview-item .qqn-stat-value {
  color: #21262d;
}

:root[data-mode="dark"] .qqn-overview-item .qqn-stat-value {
  color: #e8f2ff;
}

.qqn-missing-card {
  margin-top: 16px;
  border: 1px solid #c8ddff;
  border-radius: 22px;
  background: linear-gradient(140deg, #dfecff, #eff6ff);
  padding: 18px;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
}

:root[data-mode="dark"] .qqn-missing-card {
  border-color: rgba(96, 136, 215, 0.5);
  background: linear-gradient(140deg, rgba(22, 47, 95, 0.9), rgba(16, 36, 76, 0.9));
}

.qqn-missing-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  background: #f3f8ff;
  border: 1px solid #c8ddff;
}

:root[data-mode="dark"] .qqn-missing-icon {
  background: rgba(23, 53, 108, 0.9);
  border-color: rgba(95, 136, 214, 0.52);
}

.qqn-missing-main h3 {
  margin: 0;
  font-size: 21px;
}

.qqn-missing-main p {
  margin: 6px 0 12px;
  color: #4f6992;
}

:root[data-mode="dark"] .qqn-missing-main p {
  color: #a9c2e9;
}

.qqn-hero-hot {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
}

.qqn-hero-hot .qqn-chip {
  max-width: 46%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qqn-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.qqn-stat-card {
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--qqn-border);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.82), rgba(209, 233, 255, 0.74));
}

:root[data-mode="dark"] .qqn-stat-card {
  background: linear-gradient(150deg, rgba(16, 42, 82, 0.84), rgba(18, 58, 118, 0.66));
}

.qqn-stat-label {
  color: var(--qqn-text-soft);
  font-size: 12px;
}

.qqn-stat-value {
  margin-top: 2px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.qqn-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.qqn-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(47, 147, 255, 0.14);
  border: 1px solid rgba(63, 143, 245, 0.26);
  color: var(--qqn-text);
  font-size: 12px;
  transition: all 0.18s ease;
}

.qqn-chip:hover,
.qqn-chip.is-active {
  color: #fff;
  background: linear-gradient(140deg, var(--qqn-primary), var(--qqn-primary-2));
  border-color: transparent;
}

.qqn-rank-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.qqn-rank-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.qqn-rank-board {
  border: 1px solid var(--qqn-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--qqn-card) 92%, transparent);
  padding: 10px;
}

.qqn-rank-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.qqn-rank-board-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

.qqn-rank-list {
  display: grid;
  gap: 6px;
}

.qqn-rank-item {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 6px;
  align-items: center;
  min-height: 30px;
  padding: 5px 6px;
  border-radius: 8px;
  background: rgba(70, 143, 237, 0.08);
}

.qqn-rank-no {
  color: #1c82ff;
  font-weight: 700;
  font-size: 12px;
}

.qqn-rank-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qqn-rank-score {
  font-size: 12px;
  color: var(--qqn-warning);
}

.qqn-rank-score.is-type {
  color: var(--qqn-text-soft);
}

.qqn-media-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.qqn-media-card {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--qqn-border);
  background: color-mix(in srgb, var(--qqn-card) 95%, transparent);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.qqn-media-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(24, 90, 188, 0.22);
}

.qqn-poster {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4.2;
  min-height: 150px;
  background: var(--poster) center/cover no-repeat;
}

.qqn-rank-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 42px;
  height: 20px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: linear-gradient(140deg, rgba(255, 143, 46, 0.52), rgba(255, 74, 107, 0.42));
  box-shadow: 0 4px 10px rgba(255, 80, 81, 0.18);
  backdrop-filter: blur(5px);
}

.qqn-episode-badge {
  position: absolute;
  left: 8px;
  bottom: 8px;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 0, 0, 0.48);
}

.qqn-media-body {
  padding: 8px;
  display: grid;
  gap: 4px;
}

.qqn-media-title {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.qqn-meta-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  overflow: hidden;
}

.qqn-meta-tag {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: transparent;
  color: var(--qqn-text-soft);
  font-size: 11px;
  border: 1px solid rgba(123, 168, 236, 0.35);
  white-space: nowrap;
}

.qqn-meta-tag.is-score {
  color: #fff;
  background: linear-gradient(140deg, #ff8e3c, #ff5f58);
  border-color: transparent;
}

.qqn-meta-line {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--qqn-text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qqn-media-desc {
  margin: 0;
  color: var(--qqn-text-soft);
  font-size: 12px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.qqn-list-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.qqn-pager {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.qqn-pager-bottom {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.qqn-pager button {
  border: 1px solid var(--qqn-border);
  background: rgba(255, 255, 255, 0.7);
  color: var(--qqn-text);
  min-height: 32px;
  border-radius: 9px;
  padding: 0 12px;
  cursor: pointer;
}

.qqn-pager button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.qqn-filter-wrap {
  display: grid;
  gap: 10px;
}

.qqn-filter-row {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 8px;
  align-items: start;
}

.qqn-filter-label {
  padding-top: 5px;
  color: var(--qqn-text-soft);
}

.qqn-detail-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 14px;
}

.qqn-detail-cover {
  width: 100%;
  aspect-ratio: 3 / 4.3;
  border-radius: 14px;
  border: 1px solid var(--qqn-border);
  background: var(--poster) center/cover no-repeat;
}

.qqn-detail-title {
  margin: 0;
  font-size: 25px;
  line-height: 1.25;
}

.qqn-desc {
  margin: 10px 0;
  color: var(--qqn-text-soft);
  line-height: 1.65;
  font-size: 14px;
}

.qqn-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.qqn-info-item {
  border-radius: 10px;
  border: 1px solid var(--qqn-border);
  background: rgba(92, 154, 237, 0.09);
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
}

.qqn-info-key {
  color: var(--qqn-text-soft);
}

.qqn-search-state {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.qqn-state-pill {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(46, 137, 245, 0.14);
  border: 1px solid var(--qqn-border);
  font-size: 12px;
}

.qqn-footer {
  margin-top: 4px;
  border-top: 1px solid var(--qqn-border);
  background: color-mix(in srgb, var(--qqn-card) 72%, transparent);
}

.qqn-footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  color: var(--qqn-text-soft);
  font-size: 12px;
}

.qqn-spider-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.qqn-spider-links a {
  border: 1px solid var(--qqn-border);
  border-radius: 999px;
  min-height: 24px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
}

.qqn-empty,
.qqn-loading {
  min-height: 140px;
  border-radius: 12px;
  border: 1px dashed var(--qqn-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--qqn-text-soft);
}

.qqn-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.qqn-modal.is-open {
  display: flex;
}

.qqn-modal-mask {
  position: absolute;
  inset: 0;
  background: rgba(10, 27, 58, 0.56);
}

.qqn-modal-card {
  position: relative;
  width: min(760px, calc(100% - 20px));
  max-height: min(86vh, 780px);
  overflow: auto;
  border-radius: 16px;
  border: 1px solid var(--qqn-border);
  background: var(--qqn-card);
  box-shadow: var(--qqn-shadow);
  padding: 14px;
}

.qqn-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.qqn-field {
  display: grid;
  gap: 5px;
}

.qqn-field.wide {
  grid-column: 1 / -1;
}

.qqn-field label {
  color: var(--qqn-text-soft);
  font-size: 12px;
}

.qqn-field input,
.qqn-field select,
.qqn-field textarea {
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid var(--qqn-border);
  padding: 8px 10px;
  outline: none;
  font-size: 13px;
  color: var(--qqn-text);
  background: rgba(255, 255, 255, 0.78);
}

:root[data-mode="dark"] .qqn-field input,
:root[data-mode="dark"] .qqn-field select,
:root[data-mode="dark"] .qqn-field textarea {
  background: rgba(11, 31, 70, 0.7);
}

.qqn-field textarea {
  resize: vertical;
  min-height: 88px;
}

.qqn-form-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.qqn-status-ok {
  color: var(--qqn-success);
}

.qqn-status-bad {
  color: var(--qqn-danger);
}

@media (max-width: 1140px) {
  .qqn-media-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .qqn-list-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .qqn-topbar-inner {
    flex-wrap: wrap;
    padding: 8px 0;
    min-height: 0;
  }

  .qqn-toolbar {
    width: 100%;
    justify-content: flex-end;
  }

  .qqn-brand {
    flex: 1 1 100%;
  }

  .qqn-brand-subtitle {
    max-width: 100%;
  }

  .qqn-hero,
  .qqn-detail-layout {
    grid-template-columns: 1fr;
  }

  .qqn-hero-v2 {
    grid-template-columns: 1fr;
  }

  .qqn-search-card,
  .qqn-overview-card {
    border-radius: 20px;
    padding: 14px;
  }

  .qqn-search-shell-v2 {
    grid-template-columns: 1fr;
  }

  .qqn-drive-inline {
    flex: 0 0 92px;
  }

  .qqn-overview-grid {
    grid-template-columns: 1fr;
  }

  .qqn-rank-grid {
    grid-template-columns: 1fr;
  }

  .qqn-media-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .qqn-list-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .qqn-search-shell {
    grid-template-columns: 1fr;
  }

  .qqn-info-grid,
  .qqn-form-grid {
    grid-template-columns: 1fr;
  }

  .qqn-filter-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .qqn-main {
    padding-top: 10px;
  }

  .qqn-title {
    font-size: 16px;
  }

  .qqn-hero-main {
    padding: 12px;
  }

  .qqn-hero-title {
    font-size: 22px;
  }

  .qqn-media-grid,
  .qqn-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qqn-nav {
    width: 100%;
    order: 3;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .qqn-toolbar {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .qqn-topmenu {
    width: 100%;
  }

  .qqn-stat-grid {
    grid-template-columns: 1fr;
  }

  .qqn-search-input-wrap {
    min-height: 56px;
    border-radius: 18px;
    gap: 8px;
    padding: 0 10px;
  }

  .qqn-search-input-wrap input {
    min-height: 50px;
    font-size: 16px;
  }

  .qqn-search-input-wrap input::placeholder {
    font-size: 14px;
  }

  .qqn-drive-inline {
    flex: 0 0 84px;
  }

  .qqn-drive-inline select {
    min-height: 34px;
    font-size: 12px;
  }

  .qqn-search-shell-v2 .qqn-btn-primary {
    min-height: 52px;
    border-radius: 16px;
  }
}

/* ===== V5 Full Visual Redesign ===== */
:root {
  --qqn-bg: #f1f7ff;
  --qqn-bg-2: #dcecff;
  --qqn-card: rgba(255, 255, 255, 0.9);
  --qqn-card-deep: rgba(15, 82, 204, 0.92);
  --qqn-text: #0e2d63;
  --qqn-text-soft: #5b79a9;
  --qqn-primary: #1e74ff;
  --qqn-primary-2: #18bfff;
  --qqn-success: #14c97b;
  --qqn-danger: #ff4f73;
  --qqn-warning: #ff9f2b;
  --qqn-border: rgba(106, 153, 233, 0.33);
  --qqn-shadow: 0 12px 36px rgba(34, 97, 196, 0.16);
  --qqn-radius: 16px;
  --qqn-radius-sm: 12px;
}

:root[data-mode="dark"] {
  --qqn-bg: #081735;
  --qqn-bg-2: #102b58;
  --qqn-card: rgba(12, 30, 67, 0.84);
  --qqn-card-deep: rgba(29, 111, 255, 0.88);
  --qqn-text: #e3eeff;
  --qqn-text-soft: #9db8e3;
  --qqn-primary: #56a2ff;
  --qqn-primary-2: #37d3ff;
  --qqn-border: rgba(86, 133, 214, 0.54);
  --qqn-shadow: 0 18px 44px rgba(3, 11, 30, 0.6);
}

body {
  background: linear-gradient(180deg, #ebf5ff 0%, #dceeff 42%, #f4f9ff 100%);
}

body::before {
  background:
    radial-gradient(ellipse 360px 130px at 18% 17%, rgba(255, 255, 255, 0.9) 0 44%, transparent 56%),
    radial-gradient(ellipse 430px 140px at 49% 22%, rgba(255, 255, 255, 0.78) 0 44%, transparent 56%),
    radial-gradient(ellipse 340px 120px at 80% 24%, rgba(255, 255, 255, 0.74) 0 44%, transparent 56%),
    radial-gradient(960px 460px at 50% -8%, rgba(126, 193, 255, 0.28), transparent 74%);
  opacity: 0.72;
}

body::after {
  background:
    radial-gradient(circle at 88% 11%, rgba(255, 230, 126, 0.98) 0 40px, rgba(255, 230, 126, 0.28) 41px 74px, transparent 76px),
    radial-gradient(circle at 83.5% 8.8%, rgba(255, 255, 255, 0.34) 0 12px, transparent 16px);
}

:root[data-mode="dark"] body {
  background: linear-gradient(180deg, #06142f 0%, #0a2250 50%, #13356b 100%);
}

:root[data-mode="dark"] body::before {
  background:
    radial-gradient(720px 290px at 16% -5%, rgba(54, 104, 189, 0.4), transparent 74%),
    radial-gradient(680px 280px at 86% -4%, rgba(47, 95, 183, 0.34), transparent 74%),
    radial-gradient(ellipse 310px 120px at 24% 74%, rgba(9, 29, 63, 0.3) 0 52%, transparent 66%),
    radial-gradient(ellipse 340px 130px at 74% 78%, rgba(8, 25, 55, 0.28) 0 52%, transparent 66%),
    radial-gradient(circle at 14% 23%, rgba(255, 255, 255, 0.62) 0 1.2px, transparent 2px),
    radial-gradient(circle at 29% 15%, rgba(255, 255, 255, 0.54) 0 1.1px, transparent 2px),
    radial-gradient(circle at 47% 24%, rgba(255, 255, 255, 0.58) 0 1.1px, transparent 2px),
    radial-gradient(circle at 63% 16%, rgba(255, 255, 255, 0.52) 0 1px, transparent 2px),
    radial-gradient(circle at 79% 11%, rgba(255, 255, 255, 0.6) 0 1.15px, transparent 2px),
    radial-gradient(circle at 92% 25%, rgba(255, 255, 255, 0.56) 0 1.05px, transparent 2px);
  opacity: 0.5;
}

:root[data-mode="dark"] body::after {
  background:
    radial-gradient(circle at 88% 11%, rgba(234, 242, 255, 0.98) 0 34px, rgba(176, 197, 236, 0.26) 35px 64px, transparent 66px),
    radial-gradient(circle at 89.8% 10.4%, rgba(9, 27, 57, 0.94) 0 26px, transparent 27px);
}

.qqn-topbar {
  background: color-mix(in srgb, var(--qqn-card) 84%, transparent);
  border-bottom: 1px solid rgba(117, 160, 233, 0.36);
}

.qqn-nav a {
  border: 1px solid transparent;
}

.qqn-nav a:hover,
.qqn-nav a.is-active {
  color: #fff;
  border-color: rgba(72, 149, 255, 0.24);
  background: linear-gradient(140deg, rgba(35, 123, 255, 0.88), rgba(42, 203, 255, 0.86));
}

.qqn-btn {
  border: 1px solid var(--qqn-border);
  background: rgba(255, 255, 255, 0.82);
  color: var(--qqn-text);
  box-shadow: 0 4px 12px rgba(35, 98, 197, 0.1);
}

.qqn-btn-primary {
  border: none;
  color: #fff;
  background: linear-gradient(140deg, var(--qqn-primary), var(--qqn-primary-2));
  box-shadow: 0 10px 22px rgba(30, 116, 255, 0.35);
}

.qqn-btn-ghost {
  background: color-mix(in srgb, #f6fbff 82%, transparent);
}

:root[data-mode="dark"] .qqn-btn {
  background: rgba(19, 44, 90, 0.9);
  border-color: rgba(95, 139, 218, 0.52);
  color: #dbe9ff;
  box-shadow: 0 6px 14px rgba(4, 14, 36, 0.35);
}

:root[data-mode="dark"] .qqn-btn-ghost,
:root[data-mode="dark"] .qqn-btn-icon {
  background: rgba(18, 41, 84, 0.92);
}

.qqn-panel {
  border: 1px solid rgba(118, 162, 234, 0.34);
  background: var(--qqn-card);
  box-shadow: var(--qqn-shadow);
}

.qqn-search-card,
.qqn-overview-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(239, 247, 255, 0.88));
}

:root[data-mode="dark"] .qqn-search-card,
:root[data-mode="dark"] .qqn-overview-card {
  background: linear-gradient(160deg, rgba(16, 39, 82, 0.93), rgba(12, 31, 68, 0.9));
  border-color: rgba(92, 132, 208, 0.52);
}

.qqn-title {
  color: var(--qqn-text);
}

.qqn-subtitle {
  color: var(--qqn-text-soft);
}

.qqn-search-input-wrap {
  border: 2px solid rgba(109, 169, 255, 0.9);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 22px rgba(33, 115, 237, 0.16);
}

:root[data-mode="dark"] .qqn-search-input-wrap {
  border-color: rgba(86, 145, 235, 0.68);
  background: rgba(15, 35, 73, 0.92);
  box-shadow: 0 12px 24px rgba(5, 17, 41, 0.42);
}

.qqn-drive-inline select {
  border: 1px solid #cae2ff;
  background: #f7fbff;
  color: #1f508f;
}

:root[data-mode="dark"] .qqn-drive-inline select {
  border-color: rgba(99, 139, 211, 0.56);
  background: rgba(24, 53, 104, 0.92);
  color: #d9e9ff;
}

.qqn-hot-inline .qqn-chip,
.qqn-chip {
  border: 1px solid rgba(123, 168, 236, 0.35);
  background: rgba(233, 245, 255, 0.84);
  color: #3b6297;
}

:root[data-mode="dark"] .qqn-hot-inline .qqn-chip,
:root[data-mode="dark"] .qqn-chip {
  border-color: rgba(91, 133, 208, 0.52);
  background: rgba(23, 52, 102, 0.84);
  color: #cde2ff;
}

.qqn-rank-board {
  border: 1px solid rgba(113, 159, 232, 0.34);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.86), rgba(235, 246, 255, 0.78));
}

.qqn-rank-item {
  background: rgba(70, 141, 235, 0.1);
}

.qqn-rank-item:hover {
  background: rgba(42, 129, 246, 0.16);
}

:root[data-mode="dark"] .qqn-rank-board {
  border-color: rgba(84, 125, 198, 0.5);
  background: linear-gradient(165deg, rgba(17, 39, 81, 0.92), rgba(12, 30, 63, 0.9));
}

:root[data-mode="dark"] .qqn-rank-item {
  background: rgba(46, 98, 176, 0.22);
}

.qqn-media-card {
  border: 1px solid rgba(114, 158, 231, 0.34);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.9), rgba(239, 248, 255, 0.8));
}

.qqn-media-card:hover {
  box-shadow: 0 14px 26px rgba(23, 92, 193, 0.26);
}

:root[data-mode="dark"] .qqn-media-card {
  border-color: rgba(88, 129, 200, 0.52);
  background: linear-gradient(170deg, rgba(16, 37, 78, 0.92), rgba(12, 30, 64, 0.9));
}

.qqn-meta-tag {
  background: rgba(46, 137, 245, 0.14);
  color: var(--qqn-text-soft);
}

:root[data-mode="dark"] .qqn-meta-tag {
  background: rgba(43, 87, 160, 0.34);
  color: #bed6ff;
}

.qqn-pager button {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(118, 163, 234, 0.38);
}

:root[data-mode="dark"] .qqn-pager button {
  background: rgba(18, 42, 86, 0.9);
  border-color: rgba(90, 133, 208, 0.52);
  color: #dbe9ff;
}

.qqn-footer {
  background: color-mix(in srgb, var(--qqn-card) 84%, transparent);
}

.qqn-hero-v2 {
  align-items: stretch;
}

.qqn-hero-v2 > .qqn-search-card,
.qqn-hero-v2 > .qqn-overview-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.qqn-search-card .qqn-hero-tip,
.qqn-overview-card .qqn-overview-tip {
  margin-top: auto;
}

.qqn-search-result-list {
  display: grid;
  gap: 10px;
}

.qqn-search-page .qqn-panel {
  background: linear-gradient(165deg, rgba(8, 31, 70, 0.95), rgba(6, 22, 52, 0.95));
  border-color: rgba(50, 110, 196, 0.44);
}

.qqn-search-page .qqn-title,
.qqn-search-page .qqn-subtitle,
.qqn-search-page .qqn-state-pill,
.qqn-search-page .qqn-search-state strong {
  color: #d8e8ff;
}

.qqn-result-card {
  display: grid;
  grid-template-columns: 86px 1fr 124px;
  gap: 10px;
  border: 1px solid rgba(58, 118, 204, 0.42);
  border-radius: 12px;
  background: linear-gradient(165deg, rgba(12, 38, 81, 0.95), rgba(9, 28, 63, 0.95));
  padding: 8px;
}

.qqn-result-cover {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  min-height: 122px;
  background: var(--poster) center/cover no-repeat;
}

.qqn-result-source {
  position: absolute;
  left: 6px;
  bottom: 6px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(10, 25, 58, 0.58);
  color: #fff;
  font-size: 11px;
}

.qqn-result-cover.is-fallback {
  background: linear-gradient(140deg, #f2f6fc, #e8eff9);
  border: 1px dashed rgba(128, 156, 199, 0.45);
}

.qqn-result-noimg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(112, 141, 188, 0.16);
  color: #58729a;
  font-size: 11px;
}

:root[data-mode="dark"] .qqn-result-cover.is-fallback {
  background: linear-gradient(140deg, #22324f, #1a2944);
  border-color: rgba(93, 126, 186, 0.5);
}

:root[data-mode="dark"] .qqn-result-noimg {
  background: rgba(95, 125, 184, 0.2);
  color: #b7caea;
}

.qqn-result-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.qqn-result-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #f3fbff;
}

.qqn-result-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #97b5de;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.qqn-result-meta-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: #78b685;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qqn-result-meta-line span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qqn-result-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.qqn-result-status,
.qqn-result-drive {
  height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid var(--qqn-border);
  background: rgba(88, 152, 245, 0.1);
  white-space: nowrap;
}

.qqn-result-status.is-bad {
  color: #ff6f82;
  border-color: rgba(255, 111, 130, 0.4);
  background: rgba(255, 111, 130, 0.12);
}

.qqn-result-drive {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.qqn-result-foot .qqn-btn {
  min-height: 28px;
  padding: 0 12px;
  border-radius: 9px;
  font-size: 12px;
}

.qqn-result-actions {
  display: grid;
  gap: 8px;
  align-content: center;
  grid-auto-rows: minmax(32px, auto);
}

.qqn-result-actions .qqn-btn {
  min-height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  justify-content: center;
  font-size: 12px;
}

.qqn-btn-success {
  border: 1px solid rgba(88, 224, 162, 0.36);
  color: #b9ffd5;
  background: linear-gradient(140deg, rgba(22, 139, 88, 0.46), rgba(20, 188, 118, 0.34));
}

.qqn-result-card-dark .qqn-btn-ghost {
  border-color: rgba(126, 165, 226, 0.46);
  color: #dbe8ff;
  background: rgba(22, 50, 96, 0.88);
}

@media (max-width: 900px) {
  .qqn-result-card {
    grid-template-columns: 78px 1fr;
    gap: 8px;
  }

  .qqn-result-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .qqn-result-cover {
    min-height: 108px;
  }

  .qqn-result-foot {
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  .qqn-result-card {
    grid-template-columns: 1fr;
  }

  .qqn-result-cover {
    min-height: 150px;
  }

  .qqn-result-title {
    font-size: 18px;
  }

  .qqn-result-actions {
    grid-template-columns: 1fr;
  }
}

/* ===== V6 Background Redesign (Only Background Layer) ===== */
body {
  background: linear-gradient(180deg, #f6fbff 0%, #e5f2ff 46%, #f8fcff 100%);
}

body::before {
  background:
    radial-gradient(ellipse 420px 138px at 18% 18%, rgba(255, 255, 255, 0.96) 0 44%, transparent 56%),
    radial-gradient(ellipse 500px 148px at 48% 24%, rgba(255, 255, 255, 0.84) 0 44%, transparent 56%),
    radial-gradient(ellipse 420px 132px at 80% 22%, rgba(255, 255, 255, 0.82) 0 44%, transparent 56%),
    linear-gradient(180deg, rgba(169, 210, 255, 0.28), rgba(169, 210, 255, 0));
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.8;
}

body::after {
  background:
    radial-gradient(circle at 86% 11%, rgba(255, 225, 108, 1) 0 34px, rgba(255, 225, 108, 0.33) 35px 64px, transparent 66px),
    radial-gradient(circle at 83.5% 8.5%, rgba(255, 255, 255, 0.35) 0 10px, transparent 14px);
}

:root[data-mode="dark"] body {
  background: linear-gradient(180deg, #050f25 0%, #0a1b3f 52%, #102a56 100%);
}

:root[data-mode="dark"] body::before {
  background:
    radial-gradient(760px 280px at 14% -8%, rgba(55, 103, 188, 0.42), transparent 74%),
    radial-gradient(700px 260px at 86% -6%, rgba(42, 90, 176, 0.38), transparent 74%),
    radial-gradient(circle at 12% 23%, rgba(255, 255, 255, 0.66) 0 1.1px, transparent 2px),
    radial-gradient(circle at 26% 14%, rgba(255, 255, 255, 0.58) 0 1px, transparent 2px),
    radial-gradient(circle at 43% 20%, rgba(255, 255, 255, 0.6) 0 1.1px, transparent 2px),
    radial-gradient(circle at 59% 16%, rgba(255, 255, 255, 0.53) 0 1px, transparent 2px),
    radial-gradient(circle at 74% 10%, rgba(255, 255, 255, 0.6) 0 1.1px, transparent 2px),
    radial-gradient(circle at 91% 22%, rgba(255, 255, 255, 0.56) 0 1px, transparent 2px);
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.56;
}

:root[data-mode="dark"] body::after {
  background:
    radial-gradient(circle at 86% 11%, rgba(236, 244, 255, 0.98) 0 32px, rgba(182, 202, 240, 0.28) 33px 58px, transparent 60px),
    radial-gradient(circle at 89% 11%, rgba(8, 24, 52, 0.96) 0 26px, transparent 27px);
}

/* ===== V7 Background Redesign Final ===== */
body {
  background:
    radial-gradient(1200px 380px at 50% -160px, rgba(145, 203, 255, 0.3), transparent 72%),
    linear-gradient(180deg, #f8fcff 0%, #ecf6ff 46%, #f8fcff 100%);
}

body::before {
  background:
    radial-gradient(ellipse 340px 116px at 16% 20%, rgba(255, 255, 255, 0.92) 0 44%, transparent 56%),
    radial-gradient(ellipse 400px 124px at 46% 24%, rgba(255, 255, 255, 0.82) 0 44%, transparent 56%),
    radial-gradient(ellipse 320px 108px at 77% 22%, rgba(255, 255, 255, 0.8) 0 44%, transparent 56%);
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.76;
}

body::after {
  background:
    radial-gradient(circle at 12% 10.5%, rgba(255, 213, 88, 0.98) 0 30px, rgba(255, 213, 88, 0.3) 31px 58px, transparent 60px),
    radial-gradient(circle at 9.8% 8.4%, rgba(255, 255, 255, 0.34) 0 8px, transparent 11px);
}

:root[data-mode="dark"] body {
  background:
    radial-gradient(980px 320px at 50% -180px, rgba(53, 97, 179, 0.36), transparent 74%),
    linear-gradient(180deg, #050f26 0%, #0a1c43 50%, #102f5f 100%);
}

:root[data-mode="dark"] body::before {
  background:
    radial-gradient(circle at 14% 20%, rgba(255, 255, 255, 0.66) 0 1.15px, transparent 2px),
    radial-gradient(circle at 23% 12%, rgba(255, 255, 255, 0.58) 0 1.05px, transparent 2px),
    radial-gradient(circle at 36% 22%, rgba(255, 255, 255, 0.6) 0 1.1px, transparent 2px),
    radial-gradient(circle at 49% 14%, rgba(255, 255, 255, 0.56) 0 1px, transparent 2px),
    radial-gradient(circle at 63% 19%, rgba(255, 255, 255, 0.62) 0 1.12px, transparent 2px),
    radial-gradient(circle at 74% 10%, rgba(255, 255, 255, 0.58) 0 1.05px, transparent 2px),
    radial-gradient(circle at 86% 18%, rgba(255, 255, 255, 0.6) 0 1.1px, transparent 2px),
    radial-gradient(circle at 93% 24%, rgba(255, 255, 255, 0.54) 0 1px, transparent 2px);
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.56;
}

:root[data-mode="dark"] body::after {
  background:
    radial-gradient(circle at 88% 11%, rgba(236, 244, 255, 0.98) 0 28px, rgba(176, 198, 236, 0.28) 29px 52px, transparent 54px),
    radial-gradient(circle at 90.4% 10.2%, rgba(8, 24, 52, 0.98) 0 22px, transparent 23px);
}

/* ===== V8 Anime Illustration Sky ===== */
body {
  background:
    radial-gradient(980px 340px at 50% -170px, rgba(170, 214, 255, 0.44), transparent 72%),
    linear-gradient(180deg, #f4f9ff 0%, #e6f2ff 46%, #f8fcff 100%);
}

body::before {
  background:
    radial-gradient(ellipse 300px 110px at 18% 22%, rgba(255, 255, 255, 0.94) 0 44%, transparent 56%),
    radial-gradient(ellipse 360px 120px at 49% 20%, rgba(255, 255, 255, 0.86) 0 44%, transparent 56%),
    radial-gradient(ellipse 310px 114px at 80% 24%, rgba(255, 255, 255, 0.84) 0 44%, transparent 56%),
    radial-gradient(65% 23% at 18% 108%, rgba(141, 186, 244, 0.46) 0 58%, transparent 62%),
    radial-gradient(72% 25% at 52% 109%, rgba(121, 173, 236, 0.44) 0 58%, transparent 63%),
    radial-gradient(68% 22% at 86% 108%, rgba(137, 182, 241, 0.44) 0 58%, transparent 63%);
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.84;
}

body::after {
  background:
    radial-gradient(circle at 12% 11%, rgba(255, 216, 92, 0.99) 0 30px, rgba(255, 216, 92, 0.35) 31px 56px, transparent 58px),
    radial-gradient(circle at 10.5% 9.2%, rgba(255, 255, 255, 0.34) 0 8px, transparent 11px);
}

:root[data-mode="dark"] body {
  background:
    radial-gradient(920px 320px at 50% -170px, rgba(67, 112, 196, 0.34), transparent 72%),
    linear-gradient(180deg, #060f28 0%, #0b1e47 50%, #13335f 100%);
}

:root[data-mode="dark"] body::before {
  background:
    radial-gradient(circle at 12% 21%, rgba(255, 255, 255, 0.7) 0 1.15px, transparent 2px),
    radial-gradient(circle at 24% 13%, rgba(255, 255, 255, 0.62) 0 1.05px, transparent 2px),
    radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.64) 0 1.1px, transparent 2px),
    radial-gradient(circle at 49% 16%, rgba(255, 255, 255, 0.56) 0 1px, transparent 2px),
    radial-gradient(circle at 63% 20%, rgba(255, 255, 255, 0.62) 0 1.1px, transparent 2px),
    radial-gradient(circle at 76% 12%, rgba(255, 255, 255, 0.58) 0 1.05px, transparent 2px),
    radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.64) 0 1.1px, transparent 2px),
    radial-gradient(circle at 93% 24%, rgba(255, 255, 255, 0.56) 0 1px, transparent 2px),
    radial-gradient(68% 24% at 16% 110%, rgba(11, 30, 62, 0.82) 0 58%, transparent 62%),
    radial-gradient(74% 26% at 50% 111%, rgba(10, 26, 56, 0.8) 0 58%, transparent 63%),
    radial-gradient(70% 23% at 86% 110%, rgba(9, 24, 51, 0.82) 0 58%, transparent 63%);
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.62;
}

:root[data-mode="dark"] body::after {
  background:
    radial-gradient(circle at 87.5% 11.2%, rgba(238, 246, 255, 0.98) 0 30px, rgba(181, 201, 238, 0.32) 31px 54px, transparent 56px),
    radial-gradient(circle at 89.6% 10.2%, rgba(8, 24, 52, 0.98) 0 22px, transparent 23px),
    radial-gradient(ellipse 140px 48px at 83% 18%, rgba(255, 255, 255, 0.08) 0 54%, transparent 62%);
}

/* ===== V9 Premium Abstract Background (No Sun/Moon) ===== */
body {
  background:
    linear-gradient(160deg, #f6fbff 0%, #ecf5ff 38%, #f9fcff 100%),
    linear-gradient(90deg, rgba(199, 224, 255, 0.18), rgba(214, 234, 255, 0));
}

body::before {
  background:
    radial-gradient(140% 74% at 50% -18%, rgba(113, 183, 255, 0.3) 0 44%, transparent 62%),
    radial-gradient(132% 66% at -8% 54%, rgba(141, 195, 255, 0.2) 0 36%, transparent 56%),
    radial-gradient(126% 64% at 108% 58%, rgba(118, 209, 255, 0.18) 0 35%, transparent 56%),
    radial-gradient(104% 54% at 50% 116%, rgba(123, 165, 245, 0.2) 0 40%, transparent 62%),
    linear-gradient(115deg, rgba(255, 255, 255, 0.44) 0%, rgba(255, 255, 255, 0) 42%);
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.94;
}

body::after {
  background:
    radial-gradient(70% 34% at 24% 12%, rgba(255, 255, 255, 0.3) 0 28%, transparent 56%),
    radial-gradient(74% 36% at 78% 16%, rgba(255, 255, 255, 0.24) 0 28%, transparent 58%),
    radial-gradient(88% 44% at 50% 108%, rgba(145, 185, 244, 0.16) 0 34%, transparent 58%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 34%);
  opacity: 0.88;
}

:root[data-mode="dark"] body {
  background:
    linear-gradient(165deg, #060f25 0%, #0b1e46 44%, #102f61 100%),
    linear-gradient(90deg, rgba(31, 76, 154, 0.16), rgba(31, 76, 154, 0));
}

:root[data-mode="dark"] body::before {
  background:
    radial-gradient(142% 74% at 50% -16%, rgba(63, 114, 196, 0.36) 0 42%, transparent 62%),
    radial-gradient(130% 66% at -8% 56%, rgba(41, 92, 171, 0.32) 0 34%, transparent 56%),
    radial-gradient(126% 66% at 108% 58%, rgba(36, 123, 190, 0.28) 0 34%, transparent 56%),
    radial-gradient(104% 56% at 50% 116%, rgba(20, 58, 118, 0.42) 0 40%, transparent 62%),
    linear-gradient(120deg, rgba(118, 171, 255, 0.09) 0%, rgba(118, 171, 255, 0) 46%);
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.92;
}

:root[data-mode="dark"] body::after {
  background:
    radial-gradient(72% 34% at 22% 13%, rgba(133, 177, 252, 0.12) 0 26%, transparent 56%),
    radial-gradient(74% 36% at 80% 15%, rgba(98, 158, 236, 0.14) 0 26%, transparent 56%),
    radial-gradient(90% 44% at 50% 108%, rgba(15, 46, 96, 0.44) 0 34%, transparent 58%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 36%);
  opacity: 0.86;
}

/* ===== Search Page Panel Color Separation ===== */
.qqn-search-page {
  --qqn-search-panel-a: linear-gradient(165deg, rgba(242, 249, 255, 0.96), rgba(226, 240, 255, 0.96));
  --qqn-search-panel-b: linear-gradient(165deg, rgba(232, 244, 255, 0.96), rgba(216, 234, 252, 0.96));
  --qqn-search-shell-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(244, 251, 255, 0.95));
}

.qqn-search-page .qqn-panel {
  border: 1px solid rgba(151, 190, 234, 0.58);
  box-shadow: 0 14px 30px rgba(84, 129, 190, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.qqn-search-page .qqn-panel:first-of-type {
  background: var(--qqn-search-panel-a);
}

.qqn-search-page .qqn-panel:nth-of-type(2) {
  background: var(--qqn-search-panel-b);
}

.qqn-search-page .qqn-search-shell {
  background: var(--qqn-search-shell-bg);
  border: 1px solid rgba(157, 194, 238, 0.56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.qqn-search-page .qqn-search-shell input,
.qqn-search-page .qqn-search-shell select {
  background: rgba(255, 255, 255, 0.96);
}

.qqn-search-page .qqn-title,
.qqn-search-page .qqn-subtitle,
.qqn-search-page .qqn-state-pill,
.qqn-search-page .qqn-search-state strong {
  color: #0f2d5e;
}

.qqn-search-page .qqn-state-pill {
  background: rgba(195, 221, 249, 0.58);
  border-color: rgba(142, 183, 232, 0.56);
}

:root[data-mode="dark"] .qqn-search-page {
  --qqn-search-panel-a: linear-gradient(165deg, rgba(8, 33, 73, 0.96), rgba(6, 24, 58, 0.96));
  --qqn-search-panel-b: linear-gradient(165deg, rgba(6, 28, 63, 0.96), rgba(4, 19, 48, 0.96));
  --qqn-search-shell-bg: linear-gradient(180deg, rgba(14, 46, 96, 0.78), rgba(10, 35, 79, 0.78));
}

:root[data-mode="dark"] .qqn-search-page .qqn-panel {
  border-color: rgba(64, 125, 214, 0.54);
  box-shadow: 0 18px 42px rgba(3, 12, 30, 0.54), inset 0 1px 0 rgba(163, 198, 255, 0.08);
}

:root[data-mode="dark"] .qqn-search-page .qqn-search-shell {
  border-color: rgba(74, 134, 224, 0.52);
  box-shadow: inset 0 1px 0 rgba(173, 208, 255, 0.1);
}

:root[data-mode="dark"] .qqn-search-page .qqn-search-shell input,
:root[data-mode="dark"] .qqn-search-page .qqn-search-shell select {
  background: rgba(8, 28, 62, 0.9);
}

.qqn-transfer-modal-card {
  width: min(560px, calc(100% - 20px));
}

.qqn-transfer-loading {
  min-height: 110px;
  border-radius: 12px;
  border: 1px dashed var(--qqn-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--qqn-text-soft);
  margin-top: 8px;
}

.qqn-transfer-link-wrap {
  margin-top: 8px;
  display: grid;
  gap: 8px;
}

.qqn-transfer-qr-wrap {
  margin-top: 8px;
  display: grid;
  justify-items: center;
  gap: 8px;
}

.qqn-transfer-qr {
  width: 202px;
  height: 202px;
  border-radius: 14px;
  border: 1px solid rgba(128, 166, 220, 0.42);
  background: rgba(255, 255, 255, 0.94);
  display: grid;
  place-items: center;
  padding: 8px;
}

.qqn-transfer-qr canvas,
.qqn-transfer-qr img {
  width: 186px;
  height: 186px;
  border-radius: 10px;
}

.qqn-transfer-qr-tips {
  margin: 0;
  font-size: 12px;
  color: var(--qqn-text-soft);
}

.qqn-transfer-label {
  font-size: 12px;
  color: var(--qqn-text-soft);
}

.qqn-transfer-link {
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid var(--qqn-border);
  padding: 8px 10px;
  outline: none;
  font-size: 13px;
  color: var(--qqn-text);
  background: rgba(255, 255, 255, 0.86);
}

:root[data-mode="dark"] .qqn-transfer-link {
  background: rgba(11, 31, 70, 0.72);
}

.qqn-transfer-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 640px) {
  .qqn-transfer-actions {
    grid-template-columns: 1fr;
  }
}

/* ===== Search Result Light/Dark Skin Override ===== */
:root:not([data-mode="dark"]) .qqn-search-page .qqn-result-card {
  border-color: rgba(145, 187, 236, 0.62);
  background: linear-gradient(165deg, rgba(246, 251, 255, 0.98), rgba(232, 244, 255, 0.98));
  box-shadow: 0 8px 18px rgba(75, 124, 188, 0.14);
}

:root:not([data-mode="dark"]) .qqn-search-page .qqn-result-title {
  color: #12376f;
}

:root[data-mode="dark"] .qqn-transfer-qr {
  background: rgba(10, 27, 62, 0.92);
  border-color: rgba(90, 132, 206, 0.52);
}

:root:not([data-mode="dark"]) .qqn-search-page .qqn-result-desc {
  color: #4b6794;
}

:root:not([data-mode="dark"]) .qqn-search-page .qqn-result-meta-line {
  color: #3b8d63;
}

:root:not([data-mode="dark"]) .qqn-search-page .qqn-result-card-dark .qqn-btn-ghost {
  border-color: rgba(128, 171, 229, 0.6);
  color: #1f4a86;
  background: rgba(228, 241, 255, 0.92);
}

:root:not([data-mode="dark"]) .qqn-search-page .qqn-result-actions .qqn-btn {
  box-shadow: 0 4px 10px rgba(56, 107, 176, 0.12);
}

:root:not([data-mode="dark"]) .qqn-search-page .qqn-result-noimg {
  background: rgba(89, 126, 183, 0.16);
  color: #3f5f8f;
}

:root[data-mode="dark"] .qqn-search-page .qqn-result-card {
  border-color: rgba(58, 118, 204, 0.42);
  background: linear-gradient(165deg, rgba(12, 38, 81, 0.95), rgba(9, 28, 63, 0.95));
  box-shadow: none;
}

@media (max-width: 640px) {
  .qqn-menu-toggle {
    font-size: 0;
    line-height: 1;
  }

  .qqn-menu-toggle::before {
    content: "☰";
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
  }

  .qqn-brand {
    min-width: 0;
  }

  .qqn-brand-text {
    min-width: 0;
    max-width: 100%;
  }

  .qqn-brand-subtitle {
    max-width: min(182px, 52vw);
  }

  .qqn-mobile-theme-toggle-main,
  .qqn-menu-toggle-main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .qqn-mobile-theme-toggle-main {
    font-size: 0;
    line-height: 1;
  }

  .qqn-mobile-theme-toggle-main::before {
    content: "◐";
    font-size: 14px;
    line-height: 1;
  }

  .qqn-topbar-inner > .qqn-menu-toggle:not(.qqn-menu-toggle-main),
  .qqn-topbar-inner > .qqn-mobile-theme-toggle:not(.qqn-mobile-theme-toggle-main) {
    display: none !important;
  }

  .qqn-topmenu .qqn-toolbar [data-theme-toggle] {
    display: none !important;
  }

  .qqn-mobile-theme-toggle-main {
    order: 2;
    margin-left: auto;
    font-size: 14px;
  }

  .qqn-menu-toggle-main {
    order: 3;
    margin-left: 4px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
  }

  .qqn-container {
    width: calc(100% - 14px);
  }

  .qqn-topbar-inner {
    position: relative;
    gap: 6px;
    padding: 6px 0;
    align-items: center;
  }

  .qqn-brand {
    flex: 1 1 auto;
    gap: 8px;
  }

  .qqn-brand-badge {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 9px;
    font-size: 11px;
  }

  .qqn-brand-title {
    font-size: 13px;
  }

  .qqn-brand-subtitle {
    font-size: 10px;
    max-width: 100%;
  }

  .qqn-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .qqn-topmenu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 120;
    display: none;
    border: 1px solid var(--qqn-border);
    border-radius: 12px;
    background: #f5f9ff;
    box-shadow: 0 12px 24px rgba(17, 58, 126, 0.18);
    backdrop-filter: blur(10px);
    padding: 9px;
    gap: 8px;
  }

  .qqn-topbar-inner.is-menu-open .qqn-topmenu {
    display: grid;
  }

  .qqn-topmenu .qqn-nav {
    width: 100%;
    order: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    overflow: visible;
    padding: 0;
  }

  .qqn-topmenu .qqn-nav a {
    width: 100%;
    text-align: center;
    padding: 7px 6px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .qqn-topmenu .qqn-toolbar {
    width: 100%;
    order: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    justify-content: initial;
    overflow: visible;
    padding: 0;
  }

  .qqn-topmenu .qqn-toolbar .qqn-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .qqn-topmenu .qqn-toolbar .qqn-btn-icon {
    width: 100%;
    min-width: 0;
    padding: 0;
  }

  :root[data-mode="dark"] .qqn-topmenu {
    background: #132c58;
    box-shadow: 0 14px 28px rgba(2, 9, 24, 0.52);
  }

  .qqn-btn {
    min-height: 32px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 10px;
  }

  .qqn-btn-icon {
    width: 32px;
    min-width: 32px;
    padding: 0;
  }

  .qqn-main {
    gap: 10px;
    padding: 10px 0 14px;
  }

  .qqn-panel-pad {
    padding: 10px;
  }

  .qqn-title {
    font-size: 15px;
  }

  .qqn-subtitle {
    font-size: 11px;
  }

  .qqn-section-head {
    gap: 8px;
    margin-bottom: 8px;
    align-items: flex-start;
  }

  .qqn-search-card,
  .qqn-overview-card {
    border-radius: 18px;
    padding: 10px;
  }

  .qqn-hero-title {
    font-size: 18px;
  }

  .qqn-hero-desc {
    margin-top: 6px;
    font-size: 12px;
  }

  .qqn-search-shell-v2 {
    margin-top: 10px;
    gap: 8px;
  }

  .qqn-search-input-wrap {
    min-height: 50px;
    border-radius: 14px;
    gap: 6px;
    padding: 0 9px;
  }

  .qqn-search-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
  }

  .qqn-search-icon svg {
    width: 20px;
    height: 20px;
  }

  .qqn-drive-inline {
    flex: 0 0 72px;
  }

  .qqn-drive-inline select {
    min-height: 30px;
    border-radius: 9px;
    padding: 0 6px;
    font-size: 11px;
  }

  .qqn-search-input-wrap input {
    min-height: 42px;
    font-size: 14px;
  }

  .qqn-search-input-wrap input::placeholder {
    font-size: 12px;
    font-weight: 400;
  }

  .qqn-search-shell-v2 .qqn-btn-primary {
    min-height: 50px;
    border-radius: 14px;
    font-size: 13px;
  }

  .qqn-hot-inline {
    margin-top: 10px;
    gap: 6px;
  }

  .qqn-hot-label {
    font-size: 12px;
  }

  .qqn-hot-inline .qqn-chip-row {
    gap: 6px;
    max-height: 58px;
  }

  .qqn-chip {
    min-height: 24px;
    padding: 0 9px;
    font-size: 11px;
  }

  .qqn-overview-grid {
    gap: 6px;
  }

  .qqn-overview-item {
    padding: 8px;
    border-radius: 12px;
  }

  .qqn-stat-value {
    font-size: 16px;
  }

  .qqn-missing-card {
    margin-top: 10px;
    padding: 10px;
    grid-template-columns: 40px 1fr;
    gap: 8px;
    border-radius: 14px;
  }

  .qqn-missing-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 20px;
  }

  .qqn-missing-main h3 {
    font-size: 15px;
  }

  .qqn-missing-main p {
    margin: 4px 0 8px;
    font-size: 12px;
  }

  .qqn-rank-tabs {
    gap: 6px;
  }

  .qqn-rank-board {
    padding: 8px;
  }

  .qqn-rank-item {
    min-height: 28px;
    padding: 4px 5px;
  }

  .qqn-rank-name {
    font-size: 12px;
  }

  .qqn-media-grid,
  .qqn-list-grid {
    gap: 8px;
  }

  .qqn-poster {
    min-height: 136px;
  }

  .qqn-rank-badge {
    top: 6px;
    right: 6px;
    min-width: 34px;
    height: 18px;
    border-radius: 7px;
    padding: 0 6px;
    font-size: 9px;
  }

  .qqn-media-body {
    padding: 7px;
    gap: 3px;
  }

  .qqn-media-title {
    font-size: 12px;
  }

  .qqn-meta-tag {
    min-height: 18px;
    padding: 0 6px;
    font-size: 10px;
  }

  .qqn-meta-line {
    font-size: 10px;
  }

  .qqn-media-desc {
    font-size: 11px;
    line-height: 1.38;
  }

  .qqn-filter-row {
    gap: 6px;
  }

  .qqn-filter-label {
    font-size: 11px;
  }

  .qqn-pager {
    gap: 6px;
    font-size: 12px;
  }

  .qqn-pager button {
    min-height: 28px;
    padding: 0 10px;
    font-size: 12px;
  }

  .qqn-search-page .qqn-search-shell {
    gap: 6px;
    padding: 6px;
  }

  .qqn-search-page .qqn-search-shell .qqn-btn-primary {
    min-width: 0;
  }

  .qqn-search-state {
    gap: 6px;
  }

  .qqn-state-pill {
    min-height: 22px;
    padding: 0 8px;
    font-size: 10px;
  }

  .qqn-result-card {
    gap: 7px;
    padding: 7px;
    border-radius: 10px;
  }

  .qqn-result-cover {
    min-height: 128px;
  }

  .qqn-result-title {
    font-size: 13px;
  }

  .qqn-result-desc {
    font-size: 11px;
  }

  .qqn-result-meta-line {
    gap: 8px;
    font-size: 10px;
  }

  .qqn-result-status,
  .qqn-result-drive {
    height: 20px;
    padding: 0 7px;
    font-size: 10px;
  }

  .qqn-result-actions {
    gap: 6px;
  }

  .qqn-result-actions .qqn-btn {
    min-height: 30px;
    font-size: 11px;
    padding: 0 10px;
  }

  .qqn-detail-cover {
    max-width: 220px;
    margin-inline: auto;
  }

  .qqn-detail-title {
    font-size: 18px;
    text-align: center;
  }

  .qqn-desc {
    margin: 8px 0;
    font-size: 12px;
    line-height: 1.55;
  }

  .qqn-info-grid {
    gap: 6px;
  }

  .qqn-info-item {
    min-height: 34px;
    padding: 6px 8px;
    font-size: 12px;
  }

  .qqn-info-key {
    font-size: 11px;
  }

  #detailWrap .qqn-chip-row {
    justify-content: center;
  }

  #detailWrap .qqn-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  #detailWrap .qqn-toolbar .qqn-btn {
    width: 100%;
  }

  .qqn-modal-card {
    width: calc(100% - 12px);
    max-height: 90vh;
    border-radius: 12px;
    padding: 10px;
  }

  .qqn-transfer-modal-card {
    width: calc(100% - 12px);
  }

  .qqn-transfer-loading {
    min-height: 84px;
    border-radius: 10px;
    font-size: 12px;
  }

  .qqn-transfer-qr {
    width: 166px;
    height: 166px;
    padding: 6px;
    border-radius: 12px;
  }

  .qqn-transfer-qr canvas,
  .qqn-transfer-qr img {
    width: 154px;
    height: 154px;
    border-radius: 8px;
  }

  .qqn-transfer-qr-tips,
  .qqn-transfer-label {
    font-size: 11px;
  }

  .qqn-transfer-link {
    min-height: 34px;
    padding: 6px 8px;
    font-size: 12px;
  }

  .qqn-footer-inner {
    min-height: 42px;
    gap: 6px 8px;
    font-size: 11px;
  }

  .qqn-spider-links {
    gap: 4px;
  }

  .qqn-spider-links a {
    min-height: 22px;
    padding: 0 7px;
    font-size: 11px;
  }
}

@media (max-width: 640px) {
  .qqn-section-head {
    flex-wrap: nowrap;
  }

  .qqn-section-head > div,
  .qqn-rank-board-head > * {
    min-width: 0;
  }

  .qqn-rank-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .qqn-rank-tabs .qqn-chip {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .qqn-rank-board-head {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .qqn-rank-board-title,
  .qqn-rank-name,
  .qqn-rank-score,
  .qqn-meta-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}