:root {
  --qc-mh-glow: #4ea1d9;
  --qc-mh-line: #3778e5;
  --qc-mh-cut: 24px;
  --qc-mh-cut-sm: 16px;
  --qc-mh-ease: cubic-bezier(.17, .67, .22, 1.03);
  
  --qc-mh-bg: #ffffff;
  
  --qc-mh-shadow:
    drop-shadow(0 1px 1px rgba(48, 82, 122, .05))
    drop-shadow(0 10px 22px rgba(48, 88, 132, .11));
  --qc-mh-shadow-hover:
    drop-shadow(0 1px 1px rgba(48, 82, 122, .06))
    drop-shadow(0 16px 30px rgba(48, 88, 132, .16));
  --qc-mh-shadow-sm:
    drop-shadow(0 1px 1px rgba(48, 82, 122, .04))
    drop-shadow(0 6px 14px rgba(48, 88, 132, .09));
  --qc-mh-shadow-sm-hover:
    drop-shadow(0 1px 1px rgba(48, 82, 122, .05))
    drop-shadow(0 10px 20px rgba(48, 88, 132, .13));
  
  --qc-mh-hair: rgba(140, 186, 226, .12);
}

body .qc-page-index .site-card,
body .qc-page-ann .ann-card,
body .qc-page-forum .post,
body .qc-page-forum .composer,
body .qc-page-forum .signin-bar,
body .qc-page-index .search-panel {
  position: relative;
  background: var(--qc-mh-bg);
  border: 0;
  border-radius: 3px;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  filter: var(--qc-mh-shadow);
  clip-path: polygon(0 0, calc(100% - var(--qc-mh-cut)) 0, 100% var(--qc-mh-cut), 100% 100%, 0 100%);
  transition: transform .45s var(--qc-mh-ease),
              filter .3s ease,
              background-color .3s ease;
}
body .qc-page-index .site-card:hover,
body .qc-page-ann .ann-card:hover,
body .qc-page-forum .post:hover {
  filter: var(--qc-mh-shadow-hover);
  transform: translateY(-2px);
}

body .qc-page-forum .post {
  transition: filter .3s ease, background-color .3s ease;
}
body .qc-page-forum .post:hover {
  transform: none;
  filter: var(--qc-mh-shadow);
}

body .qc-page-ann .ann-card {
  background: #fff;
}
body .qc-page-ann .ann-item { border-radius: 3px; }

body .qc-page-ann .ann-item:hover { background: transparent; }

body .qc-page-ann .ann-card:hover { box-shadow: none; }
body .qc-page-ann .ann-date,
body .qc-page-ann .ann-side { background: transparent; }

body .qc-page-index .site-card::before {
  left: 0;
  top: 28px;
  bottom: 28px;
  width: 4px;
  border-radius: 0 2px 2px 0;
  background: var(--brand, var(--qc-mh-glow));
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 14%, #000 86%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 14%, #000 86%, rgba(0,0,0,0) 100%);
  opacity: .9;
}

body .qc-page-index .site-card::after { color: rgba(55, 120, 229, .06); }
body .qc-page-index .site-card:hover::after { color: rgba(55, 120, 229, .13); }

body .qc-page-ann .ann-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 26px;
  bottom: 26px;
  width: 1px;
  pointer-events: none;
  background: linear-gradient(180deg,
      rgba(120, 178, 224, 0) 0%,
      rgba(120, 178, 224, .62) 20%,
      rgba(120, 178, 224, .62) 80%,
      rgba(120, 178, 224, 0) 100%);
  opacity: .45;
}
body .qc-page-ann .ann-card:hover::before { opacity: .8; }

body .qc-page-forum .post::before {
  inset: 0 20px auto 20px;
  height: 1px;
  background: linear-gradient(90deg,
      rgba(78, 161, 217, 0),
      rgba(78, 161, 217, .42) 20%,
      rgba(55, 120, 229, .48) 50%,
      rgba(78, 161, 217, .42) 80%,
      rgba(78, 161, 217, 0));
  opacity: .55;
}
body .qc-page-forum .post:hover::before,
body .qc-page-forum .post.pinned::before { opacity: .95; }
body .qc-page-forum .post.pinned { box-shadow: none; }

body .qc-page-forum .composer::before { display: none; }

body .qc-page-ann .ann-card .card-source,
body .qc-page-forum .post-actions {
  border-top: 1px solid var(--qc-mh-hair);
}
body .qc-page-ann .ann-card:hover .card-title-sm { color: var(--qc-mh-line); }
body .qc-page-ann .ann-item:hover .ann-date .d-day { color: var(--qc-mh-line); }
body .qc-page-forum .post-head .av {
  border: 0;
  border-radius: 4px;
  background: linear-gradient(140deg, rgba(240, 248, 255, .95), rgba(219, 238, 253, .92));
  color: #3d7bb8;
}
body .qc-page-forum .cm-av { border-radius: 3px; }

body .qc-page-ann .ann-fbtn {
  position: relative;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 0;
  border-radius: 2px;
  background: #fff;
  color: var(--qc-sub);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  filter: var(--qc-mh-shadow-sm);
  transition: background-color .3s ease, color .3s ease, filter .3s ease;
}
body .qc-page-ann .ann-fbtn:hover {
  background: rgba(78, 161, 217, .04);
  color: #1d5f96;
  filter: var(--qc-mh-shadow-sm-hover);
}
body .qc-page-ann .ann-fbtn.is-on {
  background: rgba(78, 161, 217, .07);
  color: #14548c;
  font-weight: 500;
  filter: var(--qc-mh-shadow-sm-hover);
}
body .qc-page-ann .ann-fbtn.is-on::before { display: none; }
body .qc-page-ann .ann-count { color: rgba(58, 110, 160, .78); }

body .qc-page-ann .tag,
body .qc-page-forum .role-badge {
  border: 0;
  border-radius: 3px;
  background: rgba(78, 161, 217, .08);
  color: #2f6fa8;
  letter-spacing: .08em;
}

body .qc-page-index .home-actions .btn-primary,
body .qc-page-index .home-actions .btn-ghost2 {
  border-radius: 999px;
  clip-path: none;
  transform: none;
}

body .qc-page-index .search-input {
  height: 52px;
  border-radius: 999px;
  padding: 0 22px;
  border: 1px solid var(--qc-line-strong);
  background: #fff;
  box-shadow: 0 8px 22px rgba(48, 88, 132, .07);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body .qc-page-index .search-input:focus,
body .qc-page-index .search-input:focus-visible {
  border-color: rgba(36, 41, 51, .22);
  box-shadow: 0 10px 26px rgba(48, 88, 132, .10);
  outline: none;
}
body .qc-page-index .search-btn {
  border-radius: 999px;
  clip-path: none;
  white-space: nowrap;
  flex: 0 0 auto;
  min-width: 96px;
  padding: 0 26px;
}
body .qc-page-index .search-panel { border-radius: 3px; }
body .qc-page-index .sp-item { border-radius: 3px; }

body .qc-page-forum .mini-btn,
body .qc-page-forum .mini-btn.solid {
  border-radius: 999px;
  clip-path: none;
}
body .qc-page-forum .mini-btn.solid {
  background: var(--qc-blue);
  border-color: var(--qc-blue);
  box-shadow: none;
}
body .qc-page-forum .mini-btn.solid:hover { background: var(--qc-blue-hover); border-color: var(--qc-blue-hover); }
body .qc-page-forum .upload-btn { border-radius: 999px; }
body .qc-page-forum .post-actions .act { border-radius: 999px; }
body .qc-page-forum .post-img { border-radius: 3px; border-color: rgba(78, 161, 217, .18); }
body .qc-page-forum .cm-input { border-radius: 999px; }

body .qc-page-ann .card-extra {
  border-radius: 999px;
  border: 1px solid var(--qc-line);
  background: transparent;
  color: var(--qc-blue);
  letter-spacing: .04em;
  transition: border-color .3s ease, background .3s ease, color .3s ease;
}
body .qc-page-ann .card-extra:hover {
  border-color: var(--qc-blue);
  background: rgba(0, 113, 227, .07);
  color: var(--qc-blue);
}

body .qc-page-ann .ann-empty,
body .qc-page-ann .empty-tip,
body .qc-page-forum .empty-tip {
  border: 0;
  border-radius: 3px;
  background: #fff;
  color: var(--qc-muted);
  filter: var(--qc-mh-shadow-sm);
  clip-path: polygon(0 0, calc(100% - var(--qc-mh-cut-sm)) 0, 100% var(--qc-mh-cut-sm), 100% 100%, 0 100%);
}
body .qc-page-ann .modal-box {
  background: #fff;
  border: 0;
  border-radius: 3px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 24px 60px rgba(36, 41, 51, .18);
}
body .qc-page-ann .modal-box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  width: 1px;
  background: linear-gradient(180deg, rgba(78, 161, 217, 0), var(--qc-mh-glow) 22%, var(--qc-mh-glow) 78%, rgba(78, 161, 217, 0));
  opacity: .5;
}

@media (max-width: 980px) {
  body .qc-page-ann .ann-fbtn {
    width: auto;
    padding: 8px 14px;
    border-radius: 2px;
    border: 0;
    background: #fff;
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
  }
  body .qc-page-ann .ann-fbtn:hover { background: rgba(78, 161, 217, .04); }
  body .qc-page-ann .ann-fbtn.is-on { background: rgba(78, 161, 217, .07); }
  body .qc-page-ann .ann-count { float: none; margin-left: 6px; }
}
@media (max-width: 640px) {
  :root { --qc-mh-cut: 16px; --qc-mh-cut-sm: 12px; }
  body .qc-page-forum .composer::before { display: none; }
  body .qc-page-forum .post::before { inset: 0 16px auto 16px; }
  body .qc-page-index .site-card::before {
  left: 0;
  top: 28px;
  bottom: 28px;
  width: 4px;
  border-radius: 0 2px 2px 0;
  background: var(--brand, var(--qc-mh-glow));
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 14%, #000 86%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 14%, #000 86%, rgba(0,0,0,0) 100%);
  opacity: .9;
  }
}


@media (forced-colors: active) {
  body .qc-page-index .site-card,
  body .qc-page-ann .ann-card,
  body .qc-page-forum .post,
  body .qc-page-forum .composer,
  body .qc-page-index .search-panel { border: 1px solid CanvasText; }
}


body .qc-page-index .home-actions .btn-primary,
body .qc-page-index .home-actions .btn-ghost2 {
  transform: translateY(0);
  transition:
    transform .55s cubic-bezier(.22, .68, .24, 1),
    box-shadow .55s cubic-bezier(.22, .68, .24, 1),
    filter .55s cubic-bezier(.22, .68, .24, 1),
    background-color .45s ease,
    border-color .45s ease,
    color .45s ease;
  will-change: transform, box-shadow, filter;
}

body .qc-page-index .home-actions .btn-primary {
  background: linear-gradient(135deg, #4ea1d9 0%, #3778e5 100%);
  box-shadow: 0 8px 22px rgba(55, 120, 229, .16);
}

body .qc-page-index .home-actions .btn-primary:hover,
body .qc-page-index .home-actions .btn-primary:focus-visible {
  background: linear-gradient(135deg, #4ea1d9 0%, #3778e5 100%);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(55, 120, 229, .22);
  filter: brightness(1.05) saturate(1.02);
}

body .qc-page-index .home-actions .btn-primary:active {
  transform: translateY(0) scale(.988);
  box-shadow: 0 6px 16px rgba(55, 120, 229, .18);
  filter: brightness(.99);
  transition-duration: .16s;
}

body .qc-page-index .home-actions .btn-ghost2 {
  box-shadow: 0 2px 10px rgba(48, 88, 132, 0);
}

body .qc-page-index .home-actions .btn-ghost2:hover,
body .qc-page-index .home-actions .btn-ghost2:focus-visible {
  border-color: rgba(55, 120, 229, .32);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(48, 88, 132, .08);
}

body .qc-page-index .home-actions .btn-ghost2:active {
  transform: translateY(0) scale(.99);
  box-shadow: 0 2px 8px rgba(48, 88, 132, .06);
  transition-duration: .16s;
}

@media (prefers-reduced-motion: reduce) {
  body .qc-page-index .home-actions .btn-primary:hover,
  body .qc-page-index .home-actions .btn-ghost2:hover,
  body .qc-page-index .home-actions .btn-primary:focus-visible,
  body .qc-page-index .home-actions .btn-ghost2:focus-visible {
    transform: none;
    filter: none;
  }
}


body .qc-page-index .search-bar {
  position: relative;
  display: flex;
  gap: 0;
  align-items: center;
}

body .qc-page-index .search-input {
  padding-right: 64px;
}

body .qc-page-index .search-btn {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: none;
  margin-top: -19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  clip-path: none;
  background: transparent;
  color: var(--qc-muted);
  box-shadow: none;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background-color .24s var(--qc-ease), color .24s var(--qc-ease);
}

body .qc-page-index .search-btn svg {
  display: block;
  width: 19px;
  height: 19px;
}

body .qc-page-index .search-btn:hover,
body .qc-page-index .search-btn:focus-visible {
  background: rgba(36, 41, 51, .06);
  color: var(--qc-text);
  transform: none;
  box-shadow: none;
}

body .qc-page-index .search-btn:active {
  background: rgba(36, 41, 51, .11);
  transition-duration: .14s;
}

body .qc-page-index .search-btn:focus-visible {
  outline: 2px solid rgba(55, 120, 229, .45);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  body .qc-page-index .search-input { padding-right: 54px; }
  body .qc-page-index .search-btn {
    right: 6px;
    width: 34px;
    height: 34px;
    margin-top: -17px;
  }
  body .qc-page-index .search-btn svg { width: 17px; height: 17px; }
}