:root { color-scheme: dark; font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; color: #f5f6fa; background: #141820; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; padding: max(22px, env(safe-area-inset-top)) 16px max(22px, env(safe-area-inset-bottom)); position: relative; isolation: isolate; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, #11151be0, #11151b55 65%, #11151b22), linear-gradient(90deg, #141820, #14182000 30%) right center / 50.16vh 100% no-repeat, url("./background-duo-20261014.webp") right center / auto 100% no-repeat; }
.navigation-card { width: min(100%, 520px); margin: 24px auto; padding: 30px; border: 1px solid #ffffff25; border-radius: 22px; background: #141820ed; box-shadow: 0 18px 60px #00000045; }
header { text-align: center; }
.brand-mark { display: grid; width: 52px; height: 52px; margin: 0 auto 14px; place-items: center; border-radius: 16px; color: #fff; background: #c83a53; font-size: 25px; font-weight: 800; }
.eyebrow { color: #a52a42; font-size: 12px; margin: 0 0 8px; }
h1 { font-size: clamp(21px, 5.4vw, 28px); margin: 0 0 12px; }
.intro { font-size: 14px; line-height: 1.7; color: #6d7480; margin: 0 0 25px; }
.entry-list { display: grid; gap: 12px; }
.entry { display: flex; align-items: center; gap: 12px; min-height: 82px; padding: 17px 18px; border: 1px solid #e1e6ef; border-radius: 13px; color: #263142; text-decoration: none; transition: border-color .15s, background .15s; }
.entry > span:first-child { flex: 1; min-width: 0; }
.entry strong { display: block; font-size: 17px; overflow-wrap: anywhere; }
.entry small { display: block; margin-top: 6px; font-size: 13px; overflow-wrap: anywhere; color: #6d7480; }
.entry > span:last-child { font-size: 25px; }
.entry-badge { flex-shrink: 0; font-size: 11px; color: #697386; background: #f0f3f8; border-radius: 5px; padding: 5px 7px; }
.entry--primary { background: #fff3f6; border-color: #f4c2ce; }
.entry--primary .entry-badge { color: #a52a42; background: #ffe1e8; }
.entry:hover { border-color: #c83a53; }
.same-domain-notice { font-size: 12px; line-height: 1.7; color: #748094; margin: 16px 2px; }
.redirect-status { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 12px; margin-bottom: 20px; border: 1px solid #e8edf4; border-radius: 12px; background: #f8fafc; }
.redirect-status p { font-size: 13px; line-height: 1.6; margin: 0; color: #526078; }
.countdown-number { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: 25px; font-weight: 800; color: #a52a42; background: #ffe8ee; }
.redirect-status.is-stopped .countdown-number { color: #8691a2; background: #e9edf3; }
button { font: inherit; font-size: 13px; cursor: pointer; border: 1px solid #dfe4ec; border-radius: 8px; background: #fff; color: #43506a; min-height: 42px; padding: 9px 12px; white-space: nowrap; }
button:disabled { cursor: default; color: #8691a2; background: #f8fafc; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #c83a5370; outline-offset: 3px; }
.bookmark { border-top: 1px solid #e9edf3; padding-top: 20px; }
.bookmark label { font-size: 13px; font-weight: 700; }
.bookmark-address { display: flex; gap: 8px; margin-top: 10px; }
.bookmark-address input { width: 100%; min-width: 0; border: 1px solid #dfe4ec; border-radius: 8px; padding: 10px; font: inherit; font-size: 13px; color: #526078; background: #f8fafc; }
.bookmark p, footer { color: #8691a2; font-size: 12px; line-height: 1.7; }
footer { margin-top: 20px; text-align: center; }
[hidden] { display: none !important; }
.eyebrow { color: #ffc3d1; }
.intro, .same-domain-notice, .bookmark p, footer { color: #c1c7d2; }
.entry { background: #262c36; color: #f5f6fa; border-color: #424a58; }
.entry small { color: #c1c7d2; }
.entry-badge { color: #dce2ec; background: #3a4351; }
.entry--primary { background: #b92f4b; border-color: #e85978; }
.entry--primary .entry-badge { color: #fff; background: #ffffff22; }
.entry:hover { border-color: #ffadc1; background: #303847; }
.entry--primary:hover { background: #cd3755; }
.redirect-status { background: #222934; border-color: #424a58; }
.redirect-status p { color: #e0e5ed; }
.bookmark { border-color: #424a58; }
button { color: #e0e5ed; background: #303847; border-color: #5a6474; }
button:disabled { color: #bac2cf; background: #252c37; }
.bookmark-address input { color: #e0e5ed; background: #222934; border-color: #5a6474; }
a:focus-visible, button:focus-visible, input:focus-visible { outline-color: #ffadc1; }
@media (min-width: 1000px) {
  .navigation-card { margin-left: max(24px, calc((100vw - 1120px) / 2)); margin-right: auto; }
}
@media (max-width: 620px) {
  header { position: relative; isolation: isolate; text-align: left; margin: -30px -30px 22px; padding: 210px 24px 24px; min-height: 330px; border-radius: 21px 21px 0 0; overflow: hidden; }
  header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #11151b10, #11151b33 40%, #11151be6 76%, #141820), url("./background-duo-20261014.webp") center top / cover no-repeat; }
  header .brand-mark { position: absolute; left: 24px; top: 20px; margin: 0; width: 42px; height: 42px; font-size: 22px; }
  header h1 { font-size: 23px; line-height: 1.4; }
  header .intro { margin-bottom: 0; font-size: 12px; color: #e0e5ed; }
}
@media (max-width: 420px) {
  body { padding-left: 12px; padding-right: 12px; }
  .navigation-card { margin: 6px auto; padding: 22px 18px; border-radius: 17px; }
  header { margin: -22px -18px 20px; padding: 210px 18px 20px; border-radius: 16px 16px 0 0; }
  header .brand-mark { left: 18px; }
  .entry { padding: 15px 13px; gap: 8px; }
  .entry-badge { font-size: 10px; padding: 5px; }
}