:root {
  --qy-navy: #101b2e;
  --qy-blue: #2e68ff;
  --qy-blue-soft: #eef3ff;
  --qy-ink: #182033;
  --qy-muted: #7b8496;
  --qy-border: #e8ebf1;
  --qy-bg: #f6f7fa;
  --qy-sidebar: 252px;
  --qy-radius: 18px;
  --qy-shadow: 0 12px 34px rgba(26, 37, 61, 0.07);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 94px; }
body.qy-page { margin: 0; min-width: 320px; color: var(--qy-ink); background: var(--qy-bg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

.qy-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; display: flex; width: var(--qy-sidebar); flex-direction: column; color: #dce5f6; background: radial-gradient(circle at 8% 4%, rgba(65,111,204,.32), transparent 30%), linear-gradient(160deg, #121f35 0%, #0d1728 72%); box-shadow: 12px 0 40px rgba(12,23,41,.12); }
.qy-brand { display: flex; align-items: center; gap: 13px; min-height: 92px; padding: 22px 24px; border-bottom: 1px solid rgba(255,255,255,.08); }
.qy-brand-mark { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; color: #fff; background: linear-gradient(135deg, #3975ff, #1849bd); border: 1px solid rgba(255,255,255,.24); border-radius: 13px; box-shadow: 0 8px 24px rgba(33,93,230,.35); font-size: 20px; font-weight: 800; }
.qy-brand strong { display: block; color: #fff; font-size: 18px; letter-spacing: .04em; }
.qy-brand small { display: block; margin-top: 4px; color: #8091ad; font-size: 8px; letter-spacing: .17em; }
.qy-nav { flex: 1; overflow: auto; padding: 20px 13px; scrollbar-width: thin; }
.qy-nav-item { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; align-items: center; gap: 11px; min-height: 46px; margin: 3px 0; padding: 0 13px; color: #aab6ca; border-radius: 12px; font-size: 13px; transition: .2s ease; }
.qy-nav-item:hover { color: #fff; background: rgba(255,255,255,.06); }
.qy-nav-item.is-active { color: #fff; background: linear-gradient(90deg, rgba(47,105,255,.72), rgba(47,105,255,.24)); }
.qy-nav-icon { color: #6f86a8; font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.qy-nav-item.is-active .qy-nav-icon { color: #dce8ff; }
.qy-nav-item > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qy-nav-item em { min-width: 23px; padding: 3px 6px; color: #7f90aa; background: rgba(255,255,255,.06); border-radius: 99px; font-size: 10px; font-style: normal; text-align: center; }
.qy-nav-item.is-active em { color: #fff; background: rgba(255,255,255,.14); }
.qy-sidebar-foot { display: flex; align-items: center; gap: 8px; padding: 18px 24px 22px; color: #74849d; border-top: 1px solid rgba(255,255,255,.07); font-size: 11px; }
.qy-sidebar-foot a { margin-left: auto; color: #b7c7df; }
.qy-status-dot { width: 7px; height: 7px; background: #43cf88; border-radius: 50%; box-shadow: 0 0 0 4px rgba(67,207,136,.1); }

.qy-main { min-height: 100vh; margin-left: var(--qy-sidebar); }
.qy-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 20px; height: 78px; padding: 0 clamp(22px,4vw,60px); background: rgba(255,255,255,.88); border-bottom: 1px solid rgba(225,229,237,.86); backdrop-filter: blur(18px); }
.qy-menu-button { display: none; width: 38px; height: 38px; padding: 0; color: var(--qy-ink); background: #fff; border: 1px solid var(--qy-border); border-radius: 11px; cursor: pointer; }
.qy-search-wrap { position: relative; display: flex; width: min(560px,55vw); align-items: center; }
.qy-search-icon { position: absolute; left: 17px; z-index: 1; color: #8993a5; font-size: 22px; transform: rotate(-15deg); }
.qy-search-wrap input { width: 100%; height: 46px; padding: 0 52px 0 48px; color: var(--qy-ink); background: #f5f7fa; border: 1px solid transparent; border-radius: 13px; outline: none; transition: .2s ease; }
.qy-search-wrap input:focus { background: #fff; border-color: #b8cbff; box-shadow: 0 0 0 4px rgba(46,104,255,.09); }
.qy-search-wrap kbd { position: absolute; right: 13px; display: grid; width: 25px; height: 25px; place-items: center; color: #9aa3b2; background: #fff; border: 1px solid #e3e6ec; border-bottom-width: 2px; border-radius: 7px; font: 12px/1 inherit; }
.qy-top-actions { display: flex; margin-left: auto; align-items: center; gap: 18px; }
.qy-count { color: #929bab; font-size: 12px; }
.qy-count strong { color: var(--qy-ink); }
.qy-manage { padding: 10px 15px; color: #fff; background: var(--qy-navy); border-radius: 11px; font-size: 12px; font-weight: 700; transition: .2s ease; }
.qy-manage:hover { background: var(--qy-blue); transform: translateY(-1px); }
.qy-content { width: min(1540px,100%); margin: 0 auto; padding: 46px clamp(22px,4vw,60px) 30px; }

.qy-hero { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 220px; min-height: 270px; margin-bottom: 44px; padding: clamp(30px,5vw,58px); overflow: hidden; color: #fff; background: radial-gradient(circle at 88% 18%, rgba(83,132,255,.45), transparent 26%), radial-gradient(circle at 58% 110%, rgba(243,182,80,.12), transparent 36%), linear-gradient(120deg,#12213a,#142a4d 68%,#18396d); border-radius: 24px; box-shadow: 0 20px 55px rgba(19,37,67,.17); }
.qy-hero::after { content: ""; position: absolute; right: -82px; bottom: -150px; width: 330px; height: 330px; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; box-shadow: 0 0 0 42px rgba(255,255,255,.025), 0 0 0 84px rgba(255,255,255,.02); }
.qy-eyebrow { margin: 0 0 18px; color: #9db8ef; font-size: 10px; font-weight: 800; letter-spacing: .22em; }
.qy-hero h1 { margin: 0; font-size: clamp(30px,4vw,50px); line-height: 1.18; letter-spacing: -.035em; }
.qy-hero h1 span { color: #bcd0ff; font-weight: 500; }
.qy-intro { max-width: 570px; margin: 22px 0 0; color: #aebbd1; font-size: 14px; line-height: 1.8; }
.qy-hero-card { position: relative; z-index: 1; align-self: center; justify-self: end; width: 180px; padding: 25px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; backdrop-filter: blur(12px); }
.qy-hero-card span, .qy-hero-card small { display: block; color: #aebbd1; font-size: 11px; }
.qy-hero-card strong { display: block; margin: 8px 0 5px; color: #fff; font-size: 40px; line-height: 1; }

.qy-quick-section, .qy-category { margin: 0 0 46px; }
.qy-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.qy-section-heading > div { display: flex; align-items: center; gap: 11px; min-width: 0; }
.qy-section-heading h2 { margin: 0; overflow: hidden; font-size: 20px; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.qy-section-heading p { margin: 0; color: #969ead; font-size: 11px; }
.qy-heading-index { display: grid; min-width: 31px; height: 25px; padding: 0 7px; place-items: center; color: var(--qy-blue); background: var(--qy-blue-soft); border-radius: 7px; font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.qy-private { padding: 3px 7px; color: #9a6a1b; background: #fff3dc; border-radius: 6px; font-size: 9px; }
.qy-quick-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.qy-quick-card { display: flex; min-width: 0; align-items: center; gap: 12px; padding: 14px; background: #fff; border: 1px solid var(--qy-border); border-radius: 14px; transition: .2s ease; }
.qy-quick-card:hover { border-color: #c7d5ff; box-shadow: var(--qy-shadow); transform: translateY(-2px); }
.qy-quick-card > span:last-child { min-width: 0; }
.qy-quick-card strong, .qy-quick-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qy-quick-card strong { font-size: 13px; }
.qy-quick-card small { margin-top: 4px; color: #9aa2b0; font-size: 10px; }
.qy-card-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.qy-site-card { position: relative; display: flex; min-width: 0; min-height: 116px; align-items: flex-start; gap: 14px; padding: 19px; overflow: hidden; background: #fff; border: 1px solid var(--qy-border); border-radius: var(--qy-radius); transition: .22s ease; }
.qy-site-card:hover { border-color: #c6d5ff; box-shadow: var(--qy-shadow); transform: translateY(-3px); }
.qy-site-card:hover .qy-card-arrow { color: var(--qy-blue); opacity: 1; transform: translate(2px,-2px); }
.qy-site-icon { position: relative; display: grid; width: 42px; height: 42px; flex: 0 0 42px; overflow: hidden; place-items: center; color: #315da6; background: #edf3ff; border: 1px solid #dce7ff; border-radius: 12px; }
.qy-site-icon::after { content: ""; position: absolute; right: -9px; bottom: -9px; width: 22px; height: 22px; background: rgba(46,104,255,.08); border-radius: 50%; }
.qy-site-icon b { position: relative; z-index: 1; font-size: 16px; }
.qy-site-icon img { position: absolute; inset: 7px; z-index: 2; width: 28px; height: 28px; object-fit: contain; border-radius: 6px; }
.qy-site-copy { min-width: 0; padding-right: 18px; }
.qy-site-copy strong { display: block; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.qy-site-copy small { display: -webkit-box; min-height: 34px; margin-top: 7px; overflow: hidden; color: var(--qy-muted); font-size: 11px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.qy-site-copy em { display: block; margin-top: 7px; overflow: hidden; color: #b0b6c1; font-size: 9px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.qy-card-arrow { position: absolute; top: 16px; right: 16px; color: #aeb6c5; font-size: 13px; opacity: .5; transition: .2s ease; }
.qy-searchable[hidden], .qy-category[hidden], .qy-quick-section[hidden] { display: none !important; }
.qy-empty { margin: 30px 0 50px; padding: 44px; color: #8b94a4; background: #fff; border: 1px dashed #d8dde7; border-radius: 18px; text-align: center; }
.qy-empty strong, .qy-empty span { display: block; }
.qy-empty strong { color: var(--qy-ink); font-size: 16px; }
.qy-empty span { margin-top: 8px; font-size: 12px; }
.qy-footer { display: flex; justify-content: space-between; padding: 24px 0 8px; color: #a3aab7; border-top: 1px solid var(--qy-border); font-size: 10px; }
.qy-overlay { display: none; }
.qy-back-top { position: fixed; right: 24px; bottom: 24px; z-index: 20; width: 42px; height: 42px; color: #fff; background: var(--qy-navy); border: 0; border-radius: 13px; box-shadow: 0 8px 24px rgba(16,27,46,.2); cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(10px); transition: .2s ease; }
.qy-back-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }

@media (min-width: 1420px) { .qy-card-grid { grid-template-columns: repeat(5,minmax(0,1fr)); } }
@media (max-width: 1080px) { .qy-quick-grid, .qy-card-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .qy-count { display: none; } }
@media (max-width: 860px) {
  :root { --qy-sidebar: 238px; }
  .qy-sidebar { transform: translateX(-102%); transition: transform .24s ease; }
  .qy-sidebar.is-open { transform: none; }
  .qy-main { margin-left: 0; }
  .qy-menu-button { display: block; }
  .qy-overlay { position: fixed; inset: 0; z-index: 40; display: block; background: rgba(9,17,29,.48); opacity: 0; pointer-events: none; transition: .2s ease; }
  .qy-overlay.is-visible { opacity: 1; pointer-events: auto; }
  .qy-quick-grid, .qy-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 600px) {
  html { scroll-padding-top: 72px; }
  .qy-topbar { height: 66px; gap: 10px; padding: 0 14px; }
  .qy-search-wrap { width: auto; flex: 1; }
  .qy-search-wrap input { height: 42px; padding-right: 16px; }
  .qy-search-wrap kbd, .qy-top-actions { display: none; }
  .qy-content { padding: 18px 14px 24px; }
  .qy-hero { grid-template-columns: 1fr; min-height: 0; margin-bottom: 30px; padding: 30px 24px; border-radius: 19px; }
  .qy-hero h1 { font-size: 30px; }
  .qy-intro { margin-top: 15px; font-size: 12px; }
  .qy-hero-card { display: none; }
  .qy-quick-section, .qy-category { margin-bottom: 32px; }
  .qy-section-heading { align-items: center; }
  .qy-section-heading p { display: none; }
  .qy-quick-grid { display: flex; margin: 0 -14px; padding: 0 14px 7px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
  .qy-quick-grid::-webkit-scrollbar { display: none; }
  .qy-quick-card { min-width: 175px; scroll-snap-align: start; }
  .qy-card-grid { grid-template-columns: 1fr; gap: 10px; }
  .qy-site-card { min-height: 104px; padding: 16px; }
  .qy-footer { display: block; line-height: 2; }
  .qy-footer span { display: block; }
  .qy-back-top { right: 14px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } }

/* 第二版：浅色、直角、单页导航 */
:root {
  --qy-navy: #17233a;
  --qy-blue: #2764d8;
  --qy-blue-soft: #edf3ff;
  --qy-ink: #202938;
  --qy-muted: #727d8f;
  --qy-border: #dfe4ea;
  --qy-bg: #f5f7f9;
  --qy-radius: 0;
  --qy-shadow: 0 8px 22px rgba(46, 63, 88, .06);
}
body.qy-page { background: var(--qy-bg); }
.qy-sidebar { color: #4d596b; background: #fff; border-right: 1px solid var(--qy-border); box-shadow: none; }
.qy-brand { border-bottom-color: var(--qy-border); }
.qy-brand-mark { color: #fff; background: var(--qy-blue); border: 0; border-radius: 0; box-shadow: none; }
.qy-brand strong { color: #263245; }
.qy-brand small { color: #9aa4b3; }
.qy-nav-item { color: #657084; border-left: 3px solid transparent; border-radius: 0; }
.qy-nav-item:hover { color: #263e68; background: #f4f7fb; }
.qy-nav-item.is-active { color: #1f56bb; background: #edf3ff; border-left-color: var(--qy-blue); }
.qy-nav-icon, .qy-nav-item.is-active .qy-nav-icon { color: #8b99ad; }
.qy-nav-item.is-active .qy-nav-icon { color: var(--qy-blue); }
.qy-nav-item em { color: #8a94a4; background: #f0f2f5; }
.qy-nav-item.is-active em { color: var(--qy-blue); background: #dfeaff; }
.qy-sidebar-foot { color: #8a95a5; border-top-color: var(--qy-border); }
.qy-sidebar-version { margin-left: auto; color: #a6aebb; font-size: 9px; letter-spacing: .09em; }
.qy-status-dot { background: #55b77a; box-shadow: none; }
.qy-topbar { height: 82px; gap: 18px; background: rgba(255,255,255,.96); border-bottom-color: var(--qy-border); }
.qy-menu-button { border-radius: 0; }
.qy-search-panel { display: flex; min-width: 0; flex: 1; align-items: center; gap: 10px; }
.qy-search-modes { display: flex; flex: 0 0 auto; height: 42px; background: #f3f5f7; border: 1px solid var(--qy-border); }
.qy-search-modes button { min-width: 58px; padding: 0 12px; color: #6d7788; background: transparent; border: 0; border-right: 1px solid var(--qy-border); cursor: pointer; font-size: 12px; }
.qy-search-modes button:last-child { border-right: 0; }
.qy-search-modes button:hover { color: #244b91; background: #f8faff; }
.qy-search-modes button.is-active { color: #fff; background: var(--qy-blue); }
.qy-search-wrap { min-width: 160px; width: auto; flex: 1; }
.qy-search-wrap input { height: 42px; background: #fff; border-color: var(--qy-border); border-radius: 0; }
.qy-search-wrap input:focus { border-color: #7ea2e7; box-shadow: 0 0 0 2px rgba(39,100,216,.09); }
.qy-search-wrap kbd { border-radius: 0; }
.qy-search-submit { height: 42px; flex: 0 0 auto; padding: 0 18px; color: #fff; background: var(--qy-blue); border: 1px solid var(--qy-blue); border-radius: 0; cursor: pointer; font-size: 12px; font-weight: 700; }
.qy-search-submit:hover { background: #1f55bd; }
.qy-top-actions { min-width: 58px; }
.qy-content { padding-top: 30px; }
.qy-quick-section { margin-top: 0; }
.qy-heading-index, .qy-private { border-radius: 0; }
.qy-quick-card, .qy-site-card { border-radius: 0; box-shadow: none; }
.qy-quick-card:hover, .qy-site-card:hover { border-color: #8ca9df; box-shadow: var(--qy-shadow); transform: translateY(-2px); }
.qy-site-icon { background: #f0f4fb; border-color: #dce5f4; border-radius: 0; }
.qy-site-icon img { border-radius: 0; }
.qy-empty { border-radius: 0; }
.qy-back-top { border-radius: 0; }

@media (max-width: 1180px) {
  .qy-search-modes button { min-width: 52px; padding: 0 9px; }
  .qy-top-actions { display: none; }
}
@media (max-width: 860px) {
  .qy-sidebar { background: #fff; box-shadow: 10px 0 30px rgba(30,43,64,.12); }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 120px; }
  .qy-topbar { height: 112px; padding: 10px 12px; align-items: flex-start; gap: 9px; }
  .qy-menu-button { flex: 0 0 38px; margin-top: 1px; }
  .qy-search-panel { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
  .qy-search-modes { grid-column: 1 / -1; height: 34px; }
  .qy-search-modes button { min-width: 0; flex: 1; padding: 0 7px; font-size: 11px; }
  .qy-search-wrap { min-width: 0; width: 100%; }
  .qy-search-wrap input { height: 40px; padding-right: 14px; }
  .qy-search-submit { height: 40px; padding: 0 12px; }
  .qy-content { padding-top: 22px; }
}