/* ===================== 变量与主题 ===================== */
:root {
  --bg-color: #f5f7fa;
  --panel-bg: rgba(255, 255, 255, 0.7);
  --hover-bg: #fff0f3;
  --text-color: #2c3e50;
  --text-muted: #8b9eb0;
  --primary-color: var(--nav-primary);
  --card-bg: rgba(255, 255, 255, 0.55);
  --card-border: rgba(255, 255, 255, 0.85);
    --header-height: 216px;
  --sidebar-width: 240px;
  --border-radius: 12px;
  --content-padding: 40px;

  /* default pink theme for nav-card */
  --nav-primary: #f7a8b8;
  --nav-secondary: #ffb3c6;
  --nav-hover-shadow: rgba(247, 168, 184, 0.22);
  --nav-hover-border: rgba(247, 168, 184, 0.4);
  --nav-after-1: rgba(247, 168, 184, 0.12);
  --nav-after-2: rgba(255, 182, 193, 0.06);

  /* default blob colors */
  --blob1-start: #ffb6c1;
  --blob1-end: #ffc0cb;
  --blob2-start: #a0c4ff;
  --blob2-end: #90e0ef;
  --blob3-start: #e0c3fc;
  --blob3-end: #c5a3ff;
}

/* data-nav-theme */
[data-nav-theme="blue"] {
  --nav-primary: #90e0ef; --nav-secondary: #caf0f8;
  --nav-hover-shadow: rgba(144, 224, 239, 0.25); --nav-hover-border: rgba(144, 224, 239, 0.5);
  --nav-after-1: rgba(144, 224, 239, 0.15); --nav-after-2: rgba(202, 240, 248, 0.08);
}
[data-nav-theme="purple"] {
  --nav-primary: #c5a3ff; --nav-secondary: #e0c3fc;
  --nav-hover-shadow: rgba(197, 163, 255, 0.25); --nav-hover-border: rgba(197, 163, 255, 0.5);
  --nav-after-1: rgba(197, 163, 255, 0.15); --nav-after-2: rgba(224, 195, 252, 0.08);
}
[data-nav-theme="green"] {
  --nav-primary: #80ed99; --nav-secondary: #b7e4c7;
  --nav-hover-shadow: rgba(128, 237, 153, 0.25); --nav-hover-border: rgba(128, 237, 153, 0.5);
  --nav-after-1: rgba(128, 237, 153, 0.15); --nav-after-2: rgba(183, 228, 199, 0.08);
}
[data-nav-theme="orange"] {
  --nav-primary: #ffb703; --nav-secondary: #ffd6a5;
  --nav-hover-shadow: rgba(255, 183, 3, 0.25); --nav-hover-border: rgba(255, 183, 3, 0.5);
  --nav-after-1: rgba(255, 183, 3, 0.15); --nav-after-2: rgba(255, 214, 165, 0.08);
}
[data-nav-theme="teal"] {
  --nav-primary: #2a9d8f; --nav-secondary: #84a98c;
  --nav-hover-shadow: rgba(42, 157, 143, 0.25); --nav-hover-border: rgba(42, 157, 143, 0.5);
  --nav-after-1: rgba(42, 157, 143, 0.15); --nav-after-2: rgba(132, 169, 140, 0.08);
}
[data-nav-theme="crimson"] {
  --nav-primary: #e63946; --nav-secondary: #e56b6f;
  --nav-hover-shadow: rgba(230, 57, 70, 0.25); --nav-hover-border: rgba(230, 57, 70, 0.5);
  --nav-after-1: rgba(230, 57, 70, 0.15); --nav-after-2: rgba(229, 107, 111, 0.08);
}

/* Background blob themes */
[data-bg-theme="default"] {
  --blob1-start: #0077b6; --blob1-end: #00b4d8;
  --blob2-start: #48cae4; --blob2-end: #90e0ef;
  --blob3-start: #03045e; --blob3-end: #0077b6;
}
[data-bg-theme="rose"] {
  --blob1-start: #ffb6c1; --blob1-end: #ffc0cb;
  --blob2-start: #a0c4ff; --blob2-end: #90e0ef;
  --blob3-start: #e0c3fc; --blob3-end: #c5a3ff;
}
[data-bg-theme="forest"] {
  --blob1-start: #2d6a4f; --blob1-end: #40916c;
  --blob2-start: #52b788; --blob2-end: #74c69d;
  --blob3-start: #1b4332; --blob3-end: #2d6a4f;
}
[data-bg-theme="sunset"] {
  --blob1-start: #e85d04; --blob1-end: #f48c06;
  --blob2-start: #dc2f02; --blob2-end: #e85d04;
  --blob3-start: #ffba08; --blob3-end: #faa307;
}
[data-bg-theme="purpleNight"] {
  --blob1-start: #7b2cbf; --blob1-end: #9d4edd;
  --blob2-start: #3c096c; --blob2-end: #5a189a;
  --blob3-start: #c8b6ff; --blob3-end: #e0aaff;
}
[data-bg-theme="golden"] {
  --blob1-start: #ffb703; --blob1-end: #ffd166;
  --blob2-start: #fb8500; --blob2-end: #fd9e02;
  --blob3-start: #f4a261; --blob3-end: #e9c46a;
}

@media (max-width: 768px) {
  :root {
    --header-height: 216px;
    --sidebar-width: 220px;
    --content-padding: 16px;
  }
}

html.dark {
  --bg-color: #1a1d23;
  --panel-bg: rgba(30, 33, 40, 0.7);
  --hover-bg: #2d2030;
  --text-color: #c8d6e5;
  --text-muted: #6b7d90;
  --primary-color: color-mix(in srgb, var(--nav-primary), black 10%);
  --card-bg: rgba(30, 33, 40, 0.7);
  --card-border: rgba(255, 255, 255, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  line-height: 1.5;
  min-height: 100vh;
  transition: background-color 0.4s ease, color 0.4s ease;
}

a { text-decoration: none; color: inherit; }
ul, li { list-style: none; }

/* ===== 玻璃棒滚动条 ===== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track {
  background: linear-gradient(90deg, rgba(200, 210, 225, 0.15), rgba(220, 230, 245, 0.35) 40%, rgba(220, 230, 245, 0.35) 60%, rgba(200, 210, 225, 0.15));
  border-radius: 5px; margin: 4px 0;
  box-shadow: inset 0 0 8px rgba(180, 195, 215, 0.2), inset 1px 0 2px rgba(255, 255, 255, 0.5), inset -1px 0 2px rgba(180, 195, 215, 0.25);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(235, 240, 250, 0.5) 25%, rgba(200, 215, 235, 0.35) 55%, rgba(225, 235, 248, 0.55) 100%);
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.55), inset -2px -3px 6px rgba(160, 180, 200, 0.2), 0 2px 10px rgba(140, 160, 185, 0.18), 0 0 14px rgba(210, 225, 245, 0.25);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); min-height: 36px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(240, 245, 255, 0.62) 25%, rgba(210, 225, 240, 0.45) 55%, rgba(235, 242, 252, 0.65) 100%);
}
::-webkit-scrollbar-thumb:active {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(245, 248, 255, 0.7) 25%, rgba(220, 232, 245, 0.5) 55%, rgba(240, 245, 252, 0.7) 100%);
}
@supports (scrollbar-width: thin) {
  * { scrollbar-width: thin; scrollbar-color: rgba(210, 220, 240, 0.55) rgba(220, 230, 245, 0.15); }
}
html.dark ::-webkit-scrollbar-track {
  background: linear-gradient(90deg, rgba(40, 48, 58, 0.2), rgba(55, 65, 80, 0.4) 40%, rgba(55, 65, 80, 0.4) 60%, rgba(40, 48, 58, 0.2));
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.25), inset 1px 0 2px rgba(255, 255, 255, 0.06), inset -1px 0 2px rgba(0, 0, 0, 0.3);
}
html.dark ::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(200, 210, 225, 0.18) 25%, rgba(150, 165, 185, 0.15) 55%, rgba(180, 195, 215, 0.2) 100%);
  border-color: rgba(255, 255, 255, 0.12);
}
@supports (scrollbar-color: auto) {
  html.dark * { scrollbar-color: rgba(180, 195, 215, 0.22) rgba(40, 48, 58, 0.2); }
}

/* ===== View Transition — 昼夜切换径向展开 ===== */
::view-transition-old(root) { animation: vt-old-fade 0.45s ease forwards; }
::view-transition-new(root) { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 50%)); animation: vt-new-reveal 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes vt-old-fade { to { opacity: 0.35; } }
@keyframes vt-new-reveal { to { clip-path: circle(150vmax at var(--vt-x, 50%) var(--vt-y, 50%)); } }

html.dark .blob { opacity: 0.35; }

/* ===================== 背景光斑 ===================== */
.bg-blobs { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; overflow: hidden; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.7; animation: float 12s infinite cubic-bezier(0.4, 0, 0.2, 1) alternate; }
.blob-1 { top: -10%; left: -10%; width: 50vw; height: 50vw; background: radial-gradient(circle, var(--blob1-start) 0%, var(--blob1-end) 100%); animation-duration: 14s; }
.blob-2 { bottom: -20%; right: -10%; width: 60vw; height: 60vw; background: radial-gradient(circle, var(--blob2-start) 0%, var(--blob2-end) 100%); animation-duration: 18s; animation-delay: -3s; }
.blob-3 { top: 30%; left: 40%; width: 40vw; height: 40vw; background: radial-gradient(circle, var(--blob3-start) 0%, var(--blob3-end) 100%); animation-duration: 15s; animation-delay: -7s; }
.custom-bg-image { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -2; background-size: cover; background-position: center; background-repeat: no-repeat; pointer-events: none; }
@keyframes float {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(5vw, -5vh) scale(1.1); }
  66% { transform: translate(-3vw, 4vh) scale(0.95); }
  100% { transform: translate(2vw, 2vh) scale(1.05); }
}

/* ===================== 昼夜 AM/PM 切换 ===================== */
.toggleWrapper { overflow: hidden; padding: 0 60px 0 50px; color: white; display: flex; align-items: center; }
@media (max-width: 768px) { .toggleWrapper { padding: 0 50px 0 42px; } }
@media (max-width: 480px) { .toggleWrapper { padding: 0 44px 0 36px; } }
.toggleWrapper .dn-input { position: absolute; left: -99em; }
.toggle { cursor: pointer; display: inline-block; position: relative; width: 90px; height: 50px; background-color: #83d8ff; border-radius: 84px; transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95); }
.toggle::before { content: "AM"; position: absolute; left: -50px; top: 15px; font-size: 18px; color: #749ed7; }
.toggle::after { content: "PM"; position: absolute; right: -48px; top: 15px; font-size: 18px; }
.toggle__handler { display: inline-block; position: relative; z-index: 1; top: 3px; left: 3px; width: 44px; height: 44px; background-color: #ffcf96; border-radius: 50px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55); transform: rotate(-45deg); }
.toggle__handler .crater { position: absolute; background-color: #e8cda5; opacity: 0; transition: opacity 200ms ease-in-out; border-radius: 100%; }
.toggle__handler .crater--1 { top: 18px; left: 10px; width: 4px; height: 4px; }
.toggle__handler .crater--2 { top: 28px; left: 22px; width: 6px; height: 6px; }
.toggle__handler .crater--3 { top: 10px; left: 25px; width: 8px; height: 8px; }
.star { position: absolute; background-color: #fff; transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95); border-radius: 50%; }
.star--1 { top: 10px; left: 35px; z-index: 0; width: 30px; height: 3px; }
.star--2 { top: 18px; left: 28px; z-index: 1; width: 30px; height: 3px; }
.star--3 { top: 27px; left: 40px; z-index: 0; width: 30px; height: 3px; }
.star--4, .star--5, .star--6 { opacity: 0; transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95); }
.star--4 { top: 16px; left: 11px; z-index: 0; width: 2px; height: 2px; transform: translate3d(3px, 0, 0); }
.star--5 { top: 32px; left: 17px; z-index: 0; width: 3px; height: 3px; transform: translate3d(3px, 0, 0); }
.star--6 { top: 36px; left: 28px; z-index: 0; width: 2px; height: 2px; transform: translate3d(3px, 0, 0); }
.dn-input:checked + .toggle { background-color: #749dd6; }
.dn-input:checked + .toggle::before { color: #fff; }
.dn-input:checked + .toggle::after { color: #749ed7; }
.dn-input:checked + .toggle .toggle__handler { background-color: #ffe5b5; transform: translate3d(40px, 0, 0) rotate(0); }
.dn-input:checked + .toggle .toggle__handler .crater { opacity: 1; }
.dn-input:checked + .toggle .star--1 { width: 2px; height: 2px; }
.dn-input:checked + .toggle .star--2 { width: 4px; height: 4px; transform: translate3d(-5px, 0, 0); }
.dn-input:checked + .toggle .star--3 { width: 2px; height: 2px; transform: translate3d(-7px, 0, 0); }
.dn-input:checked + .toggle .star--4, .dn-input:checked + .toggle .star--5, .dn-input:checked + .toggle .star--6 { opacity: 1; transform: translate3d(0, 0, 0); }
.dn-input:checked + .toggle .star--4 { transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95); }
.dn-input:checked + .toggle .star--5 { transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95); }
.dn-input:checked + .toggle .star--6 { transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95); }
@media (max-width: 768px) { .toggleWrapper { display: none; } }

/* ===================== Header ===================== */
.header-left { display: flex; align-items: center; }
.header-center { flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; gap: 14px; }
.header-logo { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px; background: linear-gradient(135deg, var(--nav-primary), var(--nav-secondary)); color: #fff; box-shadow: 0 2px 10px color-mix(in srgb, var(--nav-primary), transparent 80%); }
.header-logo svg { width: 24px; height: 24px; }
.header-right { display: flex; align-items: center; gap: 10px; }
.header-right .toggleWrapper { flex-shrink: 0; padding: 0 4px; }
.header-right .toggle::before, .header-right .toggle::after { display: none; }

/* ===================== 网页搜索区 ===================== */
.web-search { display: flex; align-items: center; position: relative; width: 100%; max-width: 640px; background: rgba(255, 255, 255, 0.42); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 16px; box-shadow: inset 1px 1px 4px rgba(255, 255, 255, 0.6), 0 4px 16px rgba(0, 0, 0, 0.05); padding: 0 4px 0 0; transition: box-shadow .3s, border-color .3s; }
.web-search:focus-within { border-color: color-mix(in srgb, var(--nav-primary), transparent 60%); box-shadow: inset 1px 1px 4px rgba(255, 255, 255, 0.6), 0 4px 20px color-mix(in srgb, var(--nav-primary), transparent 82%); }
.ws-engine { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 12px; border: none; background: transparent; cursor: pointer; flex-shrink: 0; border-radius: 12px; transition: background .2s; }
.ws-engine:hover { background: rgba(0, 0, 0, 0.04); }
.ws-engine-icon { display: flex; align-items: center; flex-shrink: 0; }
.ws-engine-icon svg { width: 24px; height: 24px; }
.ws-engine-name { font-size: 14px; font-weight: 600; color: #333; white-space: nowrap; }
.ws-caret { color: #999; flex-shrink: 0; transition: transform .2s; }
.ws-engine.open .ws-caret { transform: rotate(180deg); }
.ws-divider { width: 1px; height: 24px; background: rgba(0, 0, 0, 0.1); margin: 0 4px; flex-shrink: 0; }
.ws-form { display: flex; align-items: center; flex: 1; min-width: 0; }
.ws-input { flex: 1; border: none; background: transparent; outline: none; font-size: 15px; color: var(--text-color); padding: 12px 0; min-width: 0; }
.ws-input::placeholder { color: #aaa; }
.ws-submit { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; border-radius: 12px; background: var(--nav-primary); color: #fff; cursor: pointer; flex-shrink: 0; transition: opacity .2s, transform .15s; }
.ws-submit:hover { opacity: 0.85; }
.ws-submit:active { transform: scale(0.92); }
.ws-engines { position: absolute; top: 100%; left: 0; transform: none; min-width: 220px; margin-top: 6px; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 14px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); padding: 6px; z-index: 200; display: flex; flex-direction: column; }
.ws-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: none; background: transparent; border-radius: 10px; cursor: pointer; font-size: 14px; color: #333; transition: background .15s; text-align: left; }
.ws-item:hover { background: rgba(0, 0, 0, 0.05); }
.ws-item.active { background: color-mix(in srgb, var(--nav-primary), transparent 88%); color: var(--nav-primary); font-weight: 600; }
.ws-item-icon { display: flex; flex-shrink: 0; }
.ws-item-icon svg { width: 24px; height: 24px; }
html.dark .web-search { background: rgba(30, 33, 40, 0.45); border-color: rgba(255, 255, 255, 0.08); box-shadow: inset 1px 1px 3px rgba(255, 255, 255, 0.03), 0 2px 10px rgba(0, 0, 0, 0.15); }
html.dark .web-search:focus-within { border-color: rgba(184, 142, 255, 0.2); }
html.dark .ws-engine-name { color: #d0d6dc; }
html.dark .ws-caret { color: #667; }
html.dark .ws-divider { background: rgba(255, 255, 255, 0.1); }
html.dark .ws-input { color: #d0d6dc; }
html.dark .ws-input::placeholder { color: #667; }
html.dark .ws-engines { background: rgba(30, 33, 40, 0.92); border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); }
html.dark .ws-item { color: #c0c8d0; }
html.dark .ws-item:hover { background: rgba(255, 255, 255, 0.06); }
html.dark .ws-item.active { background: rgba(130, 90, 255, 0.15); color: #a78bfa; }
@media (max-width: 768px) { .header-center { gap: 10px; } .ws-engine-name { display: none; } .ws-input { font-size: 14px; } }
@media (max-width: 480px) { .header-logo { display: none; } .header-center { gap: 6px; } .ws-engine { padding-left: 8px; } .ws-input { font-size: 14px; padding: 10px 0; } .ws-submit { width: 36px; height: 36px; } .ws-engines { min-width: 180px; } }

.settings-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.38); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 1px 1px 4px rgba(255, 255, 255, 0.7), inset -1px -1px 4px rgba(0, 0, 0, 0.04), 0 2px 10px rgba(0, 0, 0, 0.04); display: flex; align-items: center; justify-content: center; cursor: pointer; color: #6e6e73; transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.3s ease, color 0.3s ease, background 0.3s ease; flex-shrink: 0; }
.settings-btn:hover { color: var(--nav-primary); background: rgba(255, 255, 255, 0.55); transform: translateY(-2px); box-shadow: inset 1px 1px 4px rgba(255, 255, 255, 0.8), inset -1px -1px 4px rgba(0, 0, 0, 0.02), 0 6px 20px color-mix(in srgb, var(--nav-primary), transparent 82%); }
.settings-btn:active { transform: translateY(0) scale(0.94); }
html.dark .settings-btn { background: rgba(30, 33, 40, 0.5); border-color: rgba(255, 255, 255, 0.1); color: #8899aa; }
html.dark .settings-btn:hover { color: var(--nav-primary); background: rgba(30, 33, 40, 0.65); }

#translateSelectLanguage {
  appearance: none; -webkit-appearance: none;
  padding: 0 12px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.38);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 13px;
  color: #6e6e73;
  cursor: pointer;
  outline: none;
  transition: all 0.3s ease;
}
#translateSelectLanguage:hover {
  color: var(--nav-primary);
  background: rgba(255,255,255,0.55);
  transform: translateY(-1px);
}
#translateSelectLanguage option {
  color: #2c3e50;
  background: #fff;
}
html.dark #translateSelectLanguage {
  background: rgba(30,33,40,0.5);
  border-color: rgba(255,255,255,0.1);
  color: #8899aa;
}
html.dark #translateSelectLanguage:hover {
  color: var(--nav-primary);
  background: rgba(30,33,40,0.65);
}
html.dark #translateSelectLanguage option {
  color: #c8d6e5;
  background: #1a1d23;
}

/* glass radio group (tabs) */
.glass-radio-group { --bg: rgba(255, 255, 255, 0.4); --text: #6e6e73; display: flex; position: relative; background: var(--bg); border-radius: 1rem; backdrop-filter: blur(12px); box-shadow: inset 1px 1px 4px rgba(255, 255, 255, 0.8), inset -1px -1px 6px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.05); overflow: hidden; width: fit-content; }
.glass-radio-group input { display: none; }
.glass-radio-group label { flex: 1; display: flex; align-items: center; justify-content: center; min-width: 120px; font-size: 14px; padding: 0.8rem 1.6rem; cursor: pointer; font-weight: 600; letter-spacing: 0.3px; color: var(--text); position: relative; z-index: 2; transition: color 0.3s ease-in-out; user-select: none; }
.glass-radio-group label:hover { color: #333; }
.glass-radio-group input:checked + label { color: #222; }
.glass-glider { position: absolute; top: 0; bottom: 0; width: calc(100% / 5); border-radius: 1rem; z-index: 1; transition: transform 0.5s cubic-bezier(0.37, 1.95, 0.66, 0.56), background 0.4s ease-in-out, box-shadow 0.4s ease-in-out; }
.glass-radio-group:has(#glass-home:checked) .glass-glider { transform: translateX(0%); background: linear-gradient(135deg, #fdfbfb, #ebedee); box-shadow: 0 0 18px rgba(235, 237, 238, 0.4), 0 0 10px rgba(255, 255, 255, 0.6) inset; }
.glass-radio-group:has(#glass-contact:checked) .glass-glider { transform: translateX(100%); background: linear-gradient(135deg, #ffe0fb, #fa9fc2); box-shadow: 0 0 18px rgba(250, 159, 194, 0.4), 0 0 10px rgba(255, 180, 210, 0.6) inset; }
.glass-radio-group:has(#glass-announce:checked) .glass-glider { transform: translateX(200%); background: linear-gradient(135deg, #e0f2fe, #bae6fd); box-shadow: 0 0 18px rgba(186, 230, 253, 0.4), 0 0 10px rgba(200, 240, 255, 0.6) inset; }
.glass-radio-group:has(#glass-blog:checked) .glass-glider { transform: translateX(300%); background: linear-gradient(135deg, #ede9fe, #c4b5fd); box-shadow: 0 0 18px rgba(196, 181, 253, 0.4), 0 0 10px rgba(216, 180, 254, 0.6) inset; }
.glass-radio-group:has(#glass-guest:checked) .glass-glider { transform: translateX(400%); background: linear-gradient(135deg, #d1fae5, #a7f3d0); box-shadow: 0 0 18px rgba(167, 243, 208, 0.4), 0 0 10px rgba(180, 250, 200, 0.6) inset; }
@media (max-width: 768px) { .glass-radio-group label { min-width: 72px; font-size: 12px; padding: 0.6rem 1rem; } }
@media (max-width: 480px) { .glass-radio-group label { min-width: 40px; font-size: 11px; padding: 0.4rem 0.5rem; } }
html.dark .glass-radio-group { --bg: rgba(30, 33, 40, 0.6); --text: #8899aa; }
html.dark .glass-radio-group label:hover { color: #c8d6e5; }
html.dark .glass-radio-group input:checked + label { color: #e8e8e8; }

/* ===================== Sidebar (category radios) ===================== */
.radio-container { --main-color: var(--nav-primary); --main-color-opacity: color-mix(in srgb, var(--nav-primary), transparent 80%); display: flex; flex-direction: column; position: relative; padding-left: 0.5rem; }
.radio-container input { display: none; }
.radio-container .glider-container { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%); width: 1px; }
.radio-container .glider-container .glider { position: relative; height: calc(100% / var(--total-radio)); width: 100%; background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, var(--main-color) 50%, rgba(255, 255, 255, 0) 100%); transition: transform 0.5s cubic-bezier(0.37, 1.95, 0.66, 0.56); }
.radio-container .glider-container .glider::before { content: ""; position: absolute; height: 60%; width: 300%; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--main-color); filter: blur(10px); }
.radio-container .glider-container .glider::after { content: ""; position: absolute; left: 0; height: 100%; width: 150px; background: linear-gradient(90deg, var(--main-color-opacity) 0%, rgba(255, 255, 255, 0) 100%); pointer-events: none; }
.radio-container label { cursor: pointer; padding: 1.2rem; position: relative; color: var(--text-muted); transition: all 0.3s ease-in-out; display: flex; align-items: center; gap: 12px; font-weight: 500; z-index: 2; }
.radio-container label:hover { color: var(--text-color); transform: translateX(2px); }
.radio-container input:checked + label { color: var(--nav-primary); font-weight: bold; }
.radio-container label .cat-icon { font-size: 1.2rem; }

.search-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 20px; color: #8b9eb0; gap: 16px; }
.search-empty-icon { font-size: 3rem; opacity: 0.5; }
.search-empty p { font-size: 1rem; letter-spacing: 0.5px; }
html.dark .search-empty { color: #6b7d90; }

/* ===================== 弹窗通用 ===================== */
.modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: overlayIn 0.3s ease; }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
.modal-card { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.95); border-radius: 24px; padding: 48px 44px 36px; text-align: center; position: relative; max-width: 420px; width: 90%; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12); animation: cardIn 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); }
@keyframes cardIn { from { opacity: 0; transform: translateY(24px) scale(0.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-close { position: absolute; top: 16px; right: 20px; width: 36px; height: 36px; border: none; background: rgba(0, 0, 0, 0.04); border-radius: 50%; font-size: 1.4rem; color: #888; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; line-height: 1; }
.modal-close:hover { background: rgba(0, 0, 0, 0.08); color: #333; }
.modal-icon { font-size: 3rem; margin-bottom: 16px; }
.modal-card h2 { font-size: 1.5rem; font-weight: 700; color: #2c3e50; margin-bottom: 8px; }
.modal-desc { font-size: 0.95rem; color: #8b9eb0; margin-bottom: 28px; line-height: 1.6; }
.modal-email { display: block; font-size: 1.15rem; font-weight: 600; color: var(--nav-primary); text-decoration: none; margin-bottom: 24px; padding: 12px 20px; background: color-mix(in srgb, var(--nav-primary), transparent 92%); border-radius: 12px; transition: all 0.2s ease; word-break: break-all; }
.modal-email:hover { background: color-mix(in srgb, var(--nav-primary), transparent 85%); color: var(--nav-primary); }
.modal-copy { border: 1px solid color-mix(in srgb, var(--nav-primary), transparent 70%); background: transparent; color: var(--nav-primary); padding: 10px 32px; border-radius: 50px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.25s ease; }
.modal-copy:hover { background: var(--nav-primary); color: #fff; }
.modal-toast { display: block; margin-top: 14px; font-size: 0.85rem; color: #5cb85c; animation: toastIn 0.3s ease; }
@keyframes toastIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* 公告弹窗 */
.announce-modal { max-width: 520px; max-height: 80vh; display: flex; flex-direction: column; padding: 48px 44px 28px; }
.announce-list { overflow-y: auto; display: flex; flex-direction: column; gap: 20px; padding-right: 4px; }
.announce-list::-webkit-scrollbar { width: 4px; }
.announce-list::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.12); border-radius: 4px; }
.announce-item { text-align: left; padding: 18px 20px; background: rgba(0, 0, 0, 0.02); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 14px; transition: all 0.25s ease; }
.announce-item:hover { background: color-mix(in srgb, var(--nav-primary), transparent 96%); border-color: color-mix(in srgb, var(--nav-primary), transparent 80%); }
.announce-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.announce-title { font-size: 1.05rem; font-weight: 700; color: #2c3e50; margin: 0; flex: 1; min-width: 0; }
.announce-date { font-size: 0.8rem; color: #a0aec0; white-space: nowrap; flex-shrink: 0; }
.announce-content { font-size: 0.9rem; color: #6b7d90; line-height: 1.7; margin: 0 0 12px; }
.announce-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.announce-tag { font-size: 0.75rem; padding: 3px 10px; border-radius: 20px; background: color-mix(in srgb, var(--nav-primary), transparent 88%); color: var(--nav-primary); font-weight: 600; letter-spacing: 0.3px; }

/* dark modal overrides */
html.dark .modal-card { background: rgba(30, 33, 40, 0.94); border-color: rgba(255, 255, 255, 0.08); }
html.dark .modal-card h2 { color: #c8d6e5; }
html.dark .modal-desc { color: #6b7d90; }
html.dark .modal-close { background: rgba(255, 255, 255, 0.06); color: #8899aa; }
html.dark .modal-close:hover { background: rgba(255, 255, 255, 0.12); color: #c8d6e5; }
html.dark .modal-email { color: var(--nav-primary); background: color-mix(in srgb, var(--nav-primary), transparent 92%); }
html.dark .modal-copy { color: var(--nav-primary); border-color: color-mix(in srgb, var(--nav-primary), transparent 70%); }
html.dark .modal-copy:hover { background: var(--nav-primary); color: #1a1d23; }
html.dark .modal-toast { color: #7bc67e; }
html.dark .announce-title { color: #c8d6e5; }
html.dark .announce-content { color: #6b7d90; }
html.dark .announce-date { color: #5a6b7a; }
html.dark .announce-item { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.06); }
html.dark .announce-item:hover { background: color-mix(in srgb, var(--nav-primary), transparent 94%); border-color: color-mix(in srgb, var(--nav-primary), transparent 85%); }
html.dark .announce-tag { background: color-mix(in srgb, var(--nav-primary), transparent 85%); color: var(--nav-primary); }
html.dark .announce-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); }
@media (max-width: 768px) { .modal-card { padding: 36px 28px 28px; max-width: 340px; } .modal-card h2 { font-size: 1.3rem; } .modal-email { font-size: 1rem; } .announce-modal { padding: 36px 24px 24px; } .announce-item { padding: 14px 16px; } }
@media (max-width: 480px) { .modal-card { padding: 28px 20px 24px; border-radius: 20px; } .announce-modal { padding: 28px 18px 20px; max-height: 85vh; } .announce-item { padding: 12px 14px; } .announce-title { font-size: 0.95rem; } .announce-content { font-size: 0.82rem; } }

/* ===================== App 主布局 ===================== */
.app-container { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.app-header { display: flex; flex-direction: column; position: relative; z-index: 500; max-width: 1560px; margin: 10px auto 0; padding: 0 var(--content-padding); width: 100%; }
.header-top { display: flex; align-items: center; justify-content: space-between; height: 56px; width: 100%; gap: 12px; }
.header-search { display: flex; justify-content: center; align-items: center; height: 150px; width: 100%; position: relative; }
.sidebar-logo { font-size: 2.2rem; letter-spacing: 2px; font-weight: bold; display: flex; align-items: center; justify-content: center; gap: 10px; color: #ff8fa3; text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.9); margin-bottom: 40px; }
.app-body { display: flex; flex: 1; overflow: hidden; max-width: 1560px; width: 100%; margin: 0 auto; padding: 0 var(--content-padding); position: relative; }
.app-sidebar { width: var(--sidebar-width); flex-shrink: 0; background: transparent; padding-top: 20px; transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); }

.sidebar-toggle { display: none; width: 36px; height: 36px; border: none; background: rgba(255, 255, 255, 0.4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 10px; cursor: pointer; flex-shrink: 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px; z-index: 100; }
.sidebar-toggle span { display: block; width: 20px; height: 2px; background: var(--text-color); border-radius: 2px; transition: all 0.3s ease; }
.sidebar-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sidebar-toggle.open span:nth-child(2) { opacity: 0; }
.sidebar-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.app-content { flex: 1; overflow-y: auto; padding: 20px; min-width: 0; }

.card-grid { --card-max: 280px; --card-min: 180px; --card-gap: 24px; display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: var(--card-gap); width: 100%; max-width: calc(var(--cols, 3) * var(--card-max) + (var(--cols, 3) - 1) * var(--card-gap)); margin: 0 auto; padding: 10px; animation: gridFadeIn 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); }
@keyframes gridFadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.nav-card { opacity: 0; animation: cardEnter 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; animation-delay: var(--card-delay, 0s); }
@keyframes cardEnter { from { opacity: 0; transform: scale(0.92) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } }

@media (max-width: 900px) { .card-grid { --card-max: 340px; --card-gap: 20px; } }
@media (max-width: 768px) {
  .sidebar-toggle { display: flex; }
  .app-sidebar { position: fixed; top: var(--header-height); left: 0; bottom: 0; z-index: 90; background: var(--panel-bg); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-right: 1px solid var(--card-border); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08); padding: 20px 16px; transform: translateX(-100%); }
  .app-sidebar.open { transform: translateX(0); }
  .sidebar-backdrop { display: none; position: fixed; inset: 0; top: var(--header-height); background: rgba(0, 0, 0, 0.2); z-index: 89; }
  .sidebar-backdrop.visible { display: block; }
  .app-content { padding: 12px; }
  .sidebar-logo { font-size: 1.6rem; margin-bottom: 24px; }
  .card-grid { --card-gap: 16px; padding: 6px; }
}
@media (max-width: 480px) { .card-grid { --card-max: 400px; --card-gap: 14px; padding: 4px; } .app-content { padding: 8px; } }

/* 卡片样式 */
.nav-card { display: flex; flex-direction: column; justify-content: center; position: relative; background-color: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 18px; padding: 32px 28px; min-height: 170px; text-decoration: none; z-index: 0; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.04); transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.35s ease; cursor: pointer; }
.nav-card::before { content: ""; position: absolute; z-index: -1; top: -16px; right: -16px; background: linear-gradient(135deg, var(--nav-primary), var(--nav-secondary)); height: 32px; width: 32px; border-radius: 32px; transform: scale(1); transform-origin: 50% 50%; transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); }
.nav-card::after { content: ""; position: absolute; inset: 0; border-radius: 18px; opacity: 0; background: linear-gradient(135deg, var(--nav-after-1) 0%, var(--nav-after-2) 50%, rgba(255, 255, 255, 0) 100%); transition: opacity 0.45s ease; pointer-events: none; z-index: -1; }
.nav-card:hover { box-shadow: 0 12px 32px var(--nav-hover-shadow), 0 4px 12px rgba(0, 0, 0, 0.06); transform: translateY(-4px); border-color: var(--nav-hover-border); }
.nav-card:hover::before { transform: scale(28); }
.nav-card:hover::after { opacity: 1; }
.nav-card:active { transform: translateY(-1px) scale(0.985); transition: transform 0.1s ease; }
.card-content-default { display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); opacity: 1; pointer-events: none; }
.card-content-hover { display: flex; flex-direction: column; justify-content: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 32px 28px; transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); opacity: 0; transform: translateY(12px); pointer-events: none; }
.nav-card:hover .card-content-default { opacity: 0; transform: translateY(-12px); }
.nav-card:hover .card-content-hover { opacity: 1; transform: translateY(0); }
.card-icon { font-size: 42px; margin-bottom: 14px; transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.06)); }
.card-icon-img { width: 42px; height: 42px; object-fit: contain; margin-bottom: 14px; transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.06)); }
.nav-card:hover .card-icon, .nav-card:hover .card-icon-img { transform: scale(1.05); }
.card-content-hover h3 { color: #fff; font-size: 20px; margin-bottom: 10px; font-weight: 700; letter-spacing: 0.3px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.card-content-hover p { color: rgba(255, 255, 255, 0.92); font-size: 14px; line-height: 22px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
.card-content-default h3 { font-size: 18px; color: var(--text-color); font-weight: 600; letter-spacing: 0.2px; }
.go-corner { display: flex; align-items: center; justify-content: center; position: absolute; width: 42px; height: 42px; overflow: hidden; top: 0; right: 0; background: linear-gradient(135deg, var(--nav-primary), var(--nav-secondary)); border-radius: 0 18px 0 34px; transition: width 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), height 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); }
.nav-card:hover .go-corner { width: 48px; height: 48px; }
.go-arrow { margin-top: -6px; margin-right: -6px; font-size: 1.15rem; color: white; font-family: courier, sans-serif; font-weight: bold; transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); }
.nav-card:hover .go-arrow { transform: translate(2px, -2px); }
html.dark .sidebar-logo { color: var(--nav-primary); text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }
html.dark .nav-card { background-color: var(--card-bg); border-color: var(--card-border); }
html.dark .card-content-default h3 { color: var(--text-color); }
html.dark .app-sidebar { background: transparent; }
html.dark .sidebar-toggle { background: rgba(30, 33, 40, 0.6); }
html.dark .sidebar-toggle span { background: #c8d6e5; }
html.dark .sidebar-backdrop { background: rgba(0, 0, 0, 0.5); }

/* ===================== 设置弹窗 ===================== */
.settings-group { margin-top: 24px; text-align: left; border-top: 1px solid rgba(0, 0, 0, 0.08); padding-top: 16px; }
.settings-group h3 { font-size: 16px; margin-bottom: 12px; color: var(--text-color); font-weight: 600; }
.setting-item { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.setting-label { font-size: 14px; color: var(--text-muted); }
.theme-color-picker { display: flex; gap: 8px; }
.color-btn { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.2s, box-shadow 0.2s; position: relative; }
.color-btn.active { box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 4px var(--nav-primary); transform: scale(1.1); }
.color-btn:hover { transform: scale(1.1); }
.check-icon { color: white; font-size: 14px; font-weight: bold; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
html.dark .settings-group { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.bg-image-input-group { display: flex; gap: 8px; width: 100%; flex-wrap: wrap; }
.bg-url-input { flex: 1; min-width: 150px; padding: 6px 12px; background: var(--card-bg); border: 1px solid rgba(180, 190, 205, 0.5); border-radius: 6px; color: var(--text-color); font-size: 13px; outline: none; transition: border-color 0.3s; }
.bg-url-input:focus { border-color: var(--nav-primary); }
.bg-apply-btn, .bg-clear-btn, .bg-file-btn { padding: 6px 12px; font-size: 13px; border-radius: 6px; border: none; cursor: pointer; background: var(--nav-primary); color: white; transition: opacity 0.2s, transform 0.2s; text-align: center; }
.bg-file-btn { background: #6e6e73; }
.bg-clear-btn { background: #e63946; }
.bg-apply-btn:hover, .bg-clear-btn:hover, .bg-file-btn:hover { opacity: 0.9; transform: translateY(-1px); }
html.dark .bg-url-input { border-color: rgba(255, 255, 255, 0.15); }
.color-picker-wrapper { position: relative; overflow: hidden; }
.hidden-color-input { position: absolute; top: -10px; left: -10px; width: 200%; height: 200%; opacity: 0; cursor: pointer; }
.settings-modal { width: 95% !important; max-width: 600px !important; padding: 40px 36px 36px !important; }
.settings-modal h2 { font-size: 1.6rem !important; }
.bg-image-sliders { width: 100%; margin-top: 16px; background: var(--card-bg); padding: 12px; border-radius: 8px; border: 1px solid rgba(180, 190, 205, 0.3); }
.slider-item { width: 100%; margin-bottom: 12px; }
.slider-item:last-child { margin-bottom: 0; }
.slider-header { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-color); margin-bottom: 6px; }
.range-slider { -webkit-appearance: none; width: 100%; height: 6px; background: rgba(180, 190, 205, 0.4); border-radius: 4px; outline: none; }
.range-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--nav-primary); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.range-slider::-webkit-slider-thumb:hover { transform: scale(1.15); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); }
html.dark .bg-image-sliders { border-color: rgba(255, 255, 255, 0.1); }
html.dark .range-slider { background: rgba(255, 255, 255, 0.15); }
.custom-blobs-picker { display: flex; gap: 4px; padding: 2px; border-radius: 20px; border: 2px solid transparent; transition: all 0.2s; }
.custom-blobs-picker.active { border-color: var(--nav-primary); background: rgba(0,0,0,0.05); }
html.dark .custom-blobs-picker.active { background: rgba(255,255,255,0.05); }
.mini-picker { width: 24px; height: 24px; border: none; cursor: pointer; border-radius: 50%; }

/* ===================== 波浪页脚 ===================== */
.wave-footer { position: fixed; bottom: 0; left: 0; width: 100%; height: 130px; overflow: hidden; z-index: -1; pointer-events: none; opacity: 0.7; }
.wave-svg { position: absolute; bottom: 0; left: 0; width: 200%; height: 100%; }
.wave-layer-1 { fill: var(--blob1-start); opacity: 0.45; animation: wave-drift 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; animation-delay: -5s; }
.wave-layer-2 { fill: var(--blob2-start); opacity: 0.3; animation: wave-drift 18s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; animation-delay: -3s; }
.wave-layer-3 { fill: var(--blob3-start); opacity: 0.18; animation: wave-drift 12s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; animation-delay: -7s; }
@keyframes wave-drift { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-50%, 0, 0); } }
html.dark .wave-footer { opacity: 0.35; }

/* ===================== Toggle Switch (settings) ===================== */
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; cursor: pointer; }
.toggle-switch input { display: none; }
.toggle-track { position: absolute; inset: 0; background: rgba(180, 190, 205, 0.4); border-radius: 12px; transition: background 0.3s ease; }
.toggle-track::before { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); }
.toggle-switch input:checked + .toggle-track { background: var(--nav-primary); }
.toggle-switch input:checked + .toggle-track::before { transform: translateX(20px); }

[hidden] { display: none !important; }

/* ===================== 全局提示 Toast ===================== */
.app-toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 9999; padding: 10px 20px; border-radius: 8px; font-size: 14px; color: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); animation: toastIn 0.3s ease; max-width: 80vw; text-align: center; }
.app-toast.success { background: #5cb85c; }
.app-toast.error { background: #e63946; }
.app-toast.info { background: #4a90d9; }

/* ===================== 回到顶部按钮 ===================== */
.scroll-top-btn { position: fixed; bottom: 40px; right: 40px; width: 50px; height: 50px; border-radius: 50%; border: none; background: #4da6ff; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s, transform 0.3s; z-index: 300; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
.scroll-top-btn.visible { opacity: 1; visibility: visible; }
.scroll-top-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); }
html.dark .scroll-top-btn { background: #2b7de9; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }