/* 七亞天堂 — 懸浮關鍵字搜尋（2026-08-13）
   色票沿用站上既有 token（--gold / --ink / --line2 / --serif…）。
   首頁的 .social-float 樣式寫在 index.html 裡，這裡只補「搜尋鈕」與面板；
   .qs-solo 是文章頁沒有那排按鈕時、由 JS 自建的單顆浮排，樣式要跟首頁那排對齊。 */

.social-float a.qs { color: var(--gold-hi); }

/* 文章頁自建的單顆浮排（首頁那排的樣式在 index.html，這裡是給 news 頁用的同款） */
.social-float.qs-solo {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: flex; flex-direction: column; gap: 16px;
}
.social-float.qs-solo a {
  width: 108px; height: 108px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #1b161c, #131015);
  border: 1px solid var(--line2); box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .6);
  transition: .18s; position: relative; color: var(--gold-hi);
}
.social-float.qs-solo a svg { width: 51px; height: 51px; }
.social-float.qs-solo a:hover {
  transform: translateY(-3px) scale(1.06); border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 8px 22px -6px rgba(0, 0, 0, .7);
}
.social-float.qs-solo a::after {
  content: attr(data-l); position: absolute; right: 124px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; background: rgba(8, 7, 9, .94); color: var(--gold-lt);
  font-size: 19px; font-weight: 700; padding: 11px 21px; border-radius: 11px;
  border: 1px solid var(--line2); pointer-events: none; transition: .16s;
  font-family: var(--serif); letter-spacing: .04em; box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .7);
}
.social-float.qs-solo a:hover::after { border-color: var(--gold); color: var(--gold-hi); }

/* ── 面板 ───────────────────────────────────────────────────────────────── */
body.qs-lock { overflow: hidden; }

.qsearch { position: fixed; inset: 0; z-index: 200; }
.qsearch[hidden] { display: none; }
.qs-veil { position: absolute; inset: 0; background: rgba(4, 3, 6, .82); backdrop-filter: blur(3px); }

.qs-box {
  position: absolute; left: 50%; top: 8vh; transform: translateX(-50%);
  width: min(720px, calc(100vw - 32px)); max-height: 84vh; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #17131a, #0e0c11);
  border: 1px solid var(--line2); border-radius: 14px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(200, 162, 74, .08);
  overflow: hidden;
}
.qs-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px; border-bottom: 1px solid var(--line);
}
.qs-seal {
  font-family: var(--serif); font-weight: 700; font-size: 14px;
  letter-spacing: .48em; text-indent: .48em; color: var(--gold-lt);
}
.qs-x {
  background: none; border: 0; color: var(--gold-lt); font-size: 30px; line-height: 1;
  cursor: pointer; padding: 0 4px; transition: .15s;
}
.qs-x:hover { color: var(--gold-hi); }

.qs-field { padding: 16px 20px 0; }
.qs-input {
  width: 100%; box-sizing: border-box; padding: 14px 16px;
  background: rgba(0, 0, 0, .38); border: 1px solid var(--line2); border-radius: 10px;
  color: var(--gold-hi); font-family: var(--sans); font-size: 17px; outline: none; transition: .15s;
}
.qs-input::placeholder { color: rgba(236, 208, 138, .42); }
/* type=search 的原生清除鈕在 WebKit 是藍色的，跟整站金色調打架，收掉 */
.qs-input::-webkit-search-cancel-button,
.qs-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.qs-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200, 162, 74, .12); }

.qs-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px 4px; }
.qs-chip {
  background: rgba(200, 162, 74, .08); border: 1px solid var(--line2); border-radius: 999px;
  color: var(--gold-lt); font-family: var(--serif); font-weight: 700; font-size: 14px;
  letter-spacing: .06em; padding: 7px 15px; cursor: pointer; transition: .15s;
}
.qs-chip:hover { border-color: var(--gold); color: var(--gold-hi); background: rgba(200, 162, 74, .16); }

.qs-out { overflow-y: auto; padding: 12px 20px 20px; }
.qs-hint, .qs-none, .qs-count {
  font-family: var(--serif); color: rgba(236, 208, 138, .62); font-size: 14px;
  letter-spacing: .06em; margin: 10px 2px 12px;
}
.qs-none a { color: var(--gold-lt); }
.qs-count { color: var(--gold); }

.qs-hit {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "cat title" ". snip";
  gap: 4px 10px; padding: 13px 14px; margin-bottom: 8px; border-radius: 10px;
  border: 1px solid transparent; text-decoration: none; transition: .15s;
}
.qs-hit:hover { border-color: var(--line2); background: rgba(200, 162, 74, .06); }
.qs-hcat {
  grid-area: cat; align-self: center; font-family: var(--serif); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; color: var(--gold); border: 1px solid var(--line2);
  border-radius: 5px; padding: 3px 8px; white-space: nowrap;
}
.qs-htitle {
  grid-area: title; align-self: center; font-family: var(--serif); font-weight: 700;
  font-size: 17px; letter-spacing: .04em; color: var(--gold-hi); line-height: 1.5;
}
.qs-hsnip {
  grid-area: snip; font-size: 13.5px; line-height: 1.75; color: rgba(231, 216, 180, .72);
}
.qs-hit em { font-style: normal; color: var(--gold-hi); background: rgba(200, 162, 74, .18); border-radius: 3px; padding: 0 2px; }

@media (max-width: 640px) {
  .social-float.qs-solo { right: 12px; bottom: 12px; gap: 14px; }
  .social-float.qs-solo a { width: 90px; height: 90px; }
  .social-float.qs-solo a svg { width: 42px; height: 42px; }
  .social-float.qs-solo a::after { display: none; }
  .qs-box { top: 0; left: 0; transform: none; width: 100vw; max-height: 100vh; height: 100%; border-radius: 0; border: 0; }
  .qs-hit { grid-template-columns: 1fr; grid-template-areas: "cat" "title" "snip"; }
  .qs-hcat { justify-self: start; }
}