:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #0a0b10;
  color: #f1f2fb;
  --line: #252735;
  --muted: #a0a4bb;
  --accent: #c3c7ff;
  --surface: #10121a;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
button:disabled { opacity: .55; cursor: wait; }
[hidden] { display: none !important; }
.nav, main, .footer { width: min(1120px, calc(100% - 56px)); margin-inline: auto; }
.nav, .footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.nav { height: 82px; border-bottom: 1px solid var(--line); }
.wordmark { display: flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 690; letter-spacing: -.055em; }
.wordmark:lang(zh) { letter-spacing: .02em; }
.nav-actions { display: flex; gap: 8px; align-items: center; }
.quiet { border: 1px solid var(--line); background: #12141c; color: #c9cbdb; border-radius: 10px; padding: 9px 13px; font-size: 13px; white-space: nowrap; }
.quiet:hover { border-color: #6b7097; }
.eyebrow { color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .16em; margin: 0 0 20px; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(43px, 6.3vw, 84px); font-weight: 690; letter-spacing: -.08em; line-height: 1.08; }
:lang(zh) h1 { letter-spacing: -.07em; }
h1 span { color: #a8aef8; display: block; }
.lead { margin-top: 23px; max-width: 390px; color: var(--muted); font-size: 16px; line-height: 1.75; }
.primary { border: 1px solid #bec2ff; background: #c3c7ff; color: #171931; padding: 12px 20px; border-radius: 11px; font-weight: 700; }
.primary:hover { background: #d7daff; }
.orbit {
  position: relative; display: grid; place-items: center; isolation: isolate; overflow: hidden;
  aspect-ratio: 1.16; border-radius: 28px; border: 1px solid #24263a;
  background: radial-gradient(ellipse at 50% 47%, #20264c 0%, #121529 41%, #10121c 72%);
}
.orbit::before, .orbit::after { content: ""; position: absolute; pointer-events: none; border: 1px solid #9299fa24; border-radius: 50%; aspect-ratio: 1; width: 66%; }
.orbit::after { width: 84%; border-color: #9299fa16; }
.orbit svg { width: 100%; height: 100%; }
.orbit .core { transition: opacity .25s; opacity: .72; }
.orbit[data-active="true"] .core { opacity: 1; }
.orbit .pill { position: absolute; bottom: 7%; display: flex; align-items: center; gap: 9px; color: #d9dcf7; border: 1px solid #393d5b; background: #121528; border-radius: 30px; padding: 8px 13px; font-size: 12px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: #a3a7bb; }
[data-active="true"] .dot { background: #a1edc1; box-shadow: 0 0 12px #76edaa94; }
.section { padding-block: 28px 38px; border-top: 1px solid var(--line); }
h2 { font-size: 23px; letter-spacing: -.035em; }
.caption { color: var(--muted); font-size: 13px; line-height: 1.55; }
.panel { border: 1px solid var(--line); background: var(--surface); border-radius: 16px; padding: 21px; }
.account-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.panel h2 { margin-bottom: 9px; }
form { display: grid; gap: 12px; max-width: 500px; margin-top: 18px; }
form label { display: grid; gap: 6px; color: #c9cbe0; font-size: 13px; }
input, select { min-width: 0; width: 100%; background: #0b0c13; color: #f1f2fb; border: 1px solid #34364a; padding: 10px 12px; border-radius: 8px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.message { min-height: 1.4em; color: #d0c9ff; margin-top: 12px; font-size: 13px; }
.admin-intro { padding-block: 58px 30px; }
.admin-intro h1 { font-size: clamp(40px, 7vw, 67px); }
.admin-intro .lead { max-width: 640px; }
.rule { padding-block: 13px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.rule a { color: var(--accent); text-decoration: underline; }
.catalog { margin-top: 12px; display: grid; gap: 6px; }
.catalog .rule { border: 0; padding: 3px 0; }
.footer { border-top: 1px solid var(--line); color: var(--muted); padding-block: 23px; font-size: 12px; }
@media (max-width: 680px) {
  .nav, main, .footer { width: calc(100% - 36px); }
  .nav { height: 68px; }
  .account-layout { grid-template-columns: 1fr; }
}

.user-portal {
  --bottom-height: calc(76px + env(safe-area-inset-bottom));
  min-height: 100dvh; display: flex; flex-direction: column; padding-bottom: var(--bottom-height);
}
.user-portal main { display: flex; flex-direction: column; flex: 1; }
.user-portal .quiet, .user-portal .primary { border-radius: 999px; }
.user-portal .section { padding-top: 19px; }

.profile-page {
  width: min(100%, 540px);
  margin: 0 auto;
  padding: 24px 0 26px;
}
.profile-head {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  margin-bottom: 18px;
}
.profile-head h1 {
  text-align: center;
  font-size: 22px;
  letter-spacing: 0;
}
.profile-head .dialog-close { background: transparent; }
.profile-head .dialog-close:hover { background: #202332; }
.profile-guest { text-align: center; margin: -4px 0 14px; }
.profile-rows { display: grid; gap: 9px; }
.profile-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 55px;
  padding: 11px 17px;
  border: 0;
  border-radius: 17px;
  background: #171922;
  color: #f1f2fb;
  text-align: start;
}
button.profile-row:hover { background: #202332; }
.profile-label { flex-shrink: 0; font-size: 15px; font-weight: 550; }
.profile-value {
  margin-inline-start: auto;
  min-width: 0;
  color: #b7b9cd;
  text-align: end;
  overflow-wrap: anywhere;
  font-size: 14px;
}
.profile-page svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.profile-head svg { width: 22px; height: 22px; }
.profile-row > svg { color: #a0a4bb; }
.profile-avatar {
  width: 38px; height: 38px;
  display: inline-grid; place-items: center;
  vertical-align: middle;
  border-radius: 11px;
  background: #222540;
  color: var(--accent);
}
.profile-logout {
  display: block;
  min-height: 44px;
  margin: 14px auto 0;
  padding: 8px 24px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #ff91a6;
  font-weight: 650;
}
.profile-logout:hover { background: #ff91a614; }
.profile-sign-in { display: block; margin: 18px auto 0; min-height: 44px; }
.profile-page > .message { text-align: center; }
.profile-page > .message:empty, #profile-notice:empty { display: none; }
.profile-catalog { margin-top: 18px; }
.avatar-picker { display: flex; justify-content: space-between; gap: 8px; margin: 0; padding: 6px 0 0; border: 0; }
.avatar-picker label { justify-items: center; min-width: 68px; padding: 8px; border-radius: 14px; background: #1c1f2d; cursor: pointer; }
.avatar-picker input, .profile-confirm input { width: auto; accent-color: var(--accent); }
.profile-confirm { grid-template-columns: auto 1fr; align-items: center; }
.profile-dialog .danger-button { color: #290f19; background: #ff91a6; border-color: #ff91a6; }

.home-view {
  background:
    radial-gradient(circle at 38px 31px, #e0e3ffba 0.7px, transparent 1.5px) 0 0 / 223px 187px,
    radial-gradient(circle at 104px 79px, #b6bbf598 0.6px, transparent 1.3px) 0 0 / 163px 229px,
    radial-gradient(circle at 23px 104px, #939ee774 0.5px, transparent 1.2px) 0 0 / 129px 147px,
    radial-gradient(circle at 155px 119px, #d6ddffac 0.8px, #9eabed35 1.5px, transparent 3px) 0 0 / 311px 257px,
    radial-gradient(circle at 86px 37px, #bac6ff66 0.5px, transparent 1px) 0 0 / 113px 197px,
    radial-gradient(circle at 47px 71px, #919de957 0.5px, transparent 1px) 0 0 / 191px 127px,
    radial-gradient(ellipse at 20% 25%, #242d561f, transparent 52%),
    radial-gradient(ellipse at 75% 52%, #30234c37, transparent 53%),
    #090a13;
  --star-offset: var(--star-x, 0px) var(--star-y, 0px);
  background-position: var(--star-offset), var(--star-offset), var(--star-offset),
    var(--star-offset), var(--star-offset), var(--star-offset), 0 0, 0 0, 0 0;
}
.home-view main { touch-action: none; }
@media (max-height: 560px) { .home-view main { touch-action: pan-y; } }

.guardian-home {
  width: min(100%, 460px); flex: 1; align-self: center;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 19px; padding: 12px 0 25px;
}
.guardian-home .orbit {
  width: min(100%, 380px); height: clamp(180px, 39dvh, 330px); border: 0; aspect-ratio: auto;
  background: radial-gradient(ellipse at 50% 47%, #1d2241 0%, #121526 37%, transparent 70%);
}
.guardian-home .orbit::before { width: 66%; max-width: 235px; }
.guardian-home .orbit::after { width: 84%; max-width: 290px; }
.home-controls { width: min(100%, 245px); display: grid; gap: 11px; }
.power-button, .mode-button, .mode-option {
  border: 0; border-radius: 999px; min-height: 52px; display: flex; align-items: center;
  gap: 10px; padding: 10px 18px; font-weight: 650;
}
.home-controls .power-button, .home-controls .mode-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
.home-controls .power-button span, .home-controls .mode-button span { grid-area: 1 / 2; text-align: center; }
.power-row { position: relative; }
.power-row .power-button { width: 100%; }
.power-help {
  position: absolute; top: 50%; inset-inline-end: 9px; transform: translateY(-50%);
  width: 34px; height: 34px; display: grid; place-items: center;
  padding: 0; border: 0;
  background: transparent; color: #222343; font-size: 12px; font-weight: 700;
}
.power-help:hover, .power-help[aria-expanded="true"] { text-decoration: underline; }
.power-hint {
  position: absolute; z-index: 1; inset-inline: 0; bottom: calc(100% + 4px);
  padding: 8px 14px; border: 1px solid #44476b; border-radius: 14px;
  background: #181b2b; color: #ececff; text-align: center; font-size: 13px; line-height: 1.4;
}
.power-button svg { grid-area: 1 / 1; justify-self: end; }
.mode-button svg { grid-area: 1 / 3; justify-self: start; }
.power-button {
  justify-content: center; min-height: 57px; color: #17172b;
  background: linear-gradient(110deg, #d3d6ff, #afb5fb);
  box-shadow: 0 8px 26px #8b94f027;
}
.power-button:hover { background: linear-gradient(110deg, #e0e2ff, #c2c7ff); }
.power-button[aria-pressed="true"] { background: #c0c7ff; box-shadow: 0 8px 30px #929df24a; }
.mode-button {
  justify-content: center; color: #d8daef; background: #161823; font-size: 14px;
}
.mode-button:hover, .mode-option:hover, .dialog-close:hover { background: #252942; }
.home-controls svg, .mode-dialog svg {
  width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.guardian-home > .message { margin: 0; text-align: center; min-height: 0; }
.guardian-home > .message:empty { display: none; }

.mode-dialog {
  width: min(420px, calc(100% - 32px)); max-height: calc(100dvh - 32px);
  border: 1px solid #303344; border-radius: 27px; padding: 21px;
  background: #141620; color: #f1f2fb; box-shadow: 0 20px 80px #0008;
}
.mode-dialog::backdrop { background: #05060abd; backdrop-filter: blur(7px); }
.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.dialog-head h2 { margin-inline-end: auto; }
.dialog-close {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: #202332; color: #d5d7ea; border: 0;
}
.mode-options { display: grid; gap: 8px; }
.mode-option { width: 100%; text-align: start; color: #f1f2fb; background: #202230; font-size: 14px; }
.mode-option span { flex: 1; }
.mode-option[aria-pressed="true"] { background: #2b3050; color: #d8dcff; }
.whitelist-link { background: #282c48; color: #d8dcff; min-height: 40px; }
.list-config-actions, .list-entry-actions, .release-hours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.list-config-actions { margin-bottom: 12px; }
.list-entry-actions { margin-block: 14px 8px; }
.list-config-actions button, .list-entry-actions button { white-space: normal; padding-inline: 8px; }
.blocklist-help { min-width: 40px; min-height: 40px; }
.release-periods { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.release-periods li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 16px; background: #1b1d2a; }
.release-periods label { display: flex; flex: 1; min-width: 0; align-items: center; gap: 9px; min-height: 44px; overflow-wrap: anywhere; }
.release-periods small { display: block; margin-top: 3px; color: var(--muted); }
.release-periods input { flex: none; width: 18px; height: 18px; accent-color: var(--accent); }
#add-release-period { width: 100%; margin-top: 14px; }
#release-form .actions { margin-top: 0; }
.whitelist-entries { list-style: none; margin: 0; padding: 0; }
.whitelist-entries li { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 46px; }
.whitelist-entries label { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; cursor: pointer; overflow-wrap: anywhere; }
.whitelist-entries input { flex: none; width: 18px; height: 18px; accent-color: var(--accent); }
#whitelist-form .actions { margin-top: 0; }
#back-to-modes { margin-top: 16px; }
#whitelist-notice { margin-top: 0; }
#whitelist-notice:empty, #import-notice:empty, #release-notice:empty { display: none; }
@media (max-width: 540px) {
  .mode-dialog { margin: auto auto max(12px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.bottom-nav {
  position: fixed; inset: auto 0 0; z-index: 2; display: flex; justify-content: center; gap: 8px;
  padding: 8px 18px max(8px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line);
  background: #0c0e16f5; backdrop-filter: blur(16px);
}
.bottom-nav button {
  width: min(150px, 45%); min-height: 52px; display: grid; place-content: center; justify-items: center;
  gap: 4px; border: 1px solid transparent; border-radius: 999px; color: var(--muted); background: none; font-size: 12px;
}
.bottom-nav button[aria-current="page"] { background: #1b1e34; color: var(--accent); border-color: #303555; }
.bottom-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linejoin: round; }