/* ============================================================
   FKoin 主题系统
   用法: <link rel="stylesheet" href="/theme.css">
   切换: document.documentElement.dataset.theme = 'light' | 'dark'
   ============================================================ */

/* ===== 深色主题 (默认) ===== */
:root, [data-theme="dark"] {
  --bg-primary: #0f172a;
  --bg-secondary: #1a2744;
  --bg-tertiary: rgba(255,255,255,0.04);

  --glass-bg: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.08);
  --glass-light-bg: rgba(255,255,255,0.04);
  --glass-light-border: rgba(255,255,255,0.06);

  --text-primary: #ffffff;
  --text-secondary: rgba(255,255,255,0.85);
  --text-tertiary: rgba(255,255,255,0.6);
  --text-muted: rgba(255,255,255,0.4);
  --text-blue: rgba(191,219,254,0.75);
  --text-blue-muted: rgba(191,219,254,0.45);

  --accent-from: #2563eb;
  --accent-to: #06b6d4;
  --accent-gradient: linear-gradient(135deg, #2563eb, #06b6d4);

  --bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%);

  --card-glow: none;
  --shadow-accent: transparent;

  --input-bg: rgba(255,255,255,0.05);
  --input-border: rgba(255,255,255,0.1);
  --input-placeholder: rgba(191,219,254,0.3);
  --input-focus-ring: rgba(59,130,246,0.5);

  --btn-primary-bg: linear-gradient(135deg, #2563eb, #06b6d4);
  --btn-primary-hover: linear-gradient(135deg, #1d4ed8, #0891b2);
  --btn-secondary-bg: rgba(255,255,255,0.08);
  --btn-secondary-hover: rgba(255,255,255,0.15);
  --btn-secondary-border: rgba(255,255,255,0.1);
  --btn-danger-bg: rgba(239,68,68,0.15);
  --btn-danger-text: #fca5a5;

  --modal-bg: #1a2744;
  --modal-border: rgba(255,255,255,0.1);
  --toast-bg: rgba(20,30,60,0.95);

  --scrollbar-thumb: rgba(255,255,255,0.1);
  --divider: rgba(255,255,255,0.08);

  --msg-self: linear-gradient(135deg, #2563eb, #06b6d4);
  --msg-other: rgba(255,255,255,0.12);
  --msg-other-border: rgba(255,255,255,0.06);

  --success-bg: rgba(34,197,94,0.1);
  --success-text: #86efac;
  --error-bg: rgba(239,68,68,0.1);
  --error-text: #fca5a5;

  --switch-container-bg: #3D7EAE;
  --switch-night-bg: #1D1F2C;
  --switch-sun-bg: #ECCA2F;
  --switch-moon-bg: #C4C9D1;
  --switch-spot-color: #959DB1;
  --switch-stars-color: #fff;
  --switch-clouds-color: #F3FDFF;
}

/* ===== 浅色主题 ===== */
[data-theme="light"] {
  --bg-primary: #f0f4f8;
  --bg-secondary: #ffffff;
  --bg-tertiary: rgba(0,0,0,0.02);

  --glass-bg: rgba(255,255,255,0.75);
  --glass-border: rgba(0,0,0,0.08);
  --glass-light-bg: rgba(255,255,255,0.5);
  --glass-light-border: rgba(0,0,0,0.06);

  --text-primary: #1a202c;
  --text-secondary: #2d3748;
  --text-tertiary: #4a5568;
  --text-muted: #a0aec0;
  --text-blue: #3182ce;
  --text-blue-muted: #63b3ed;

  --accent-from: #2563eb;
  --accent-to: #06b6d4;
  --accent-gradient: linear-gradient(135deg, #2563eb, #06b6d4);

  --bg-gradient: linear-gradient(135deg, #e8f0fe 0%, #d0e2ff 50%, #e8f0fe 100%);

  --card-glow: none;
  --shadow-accent: transparent;

  --input-bg: rgba(255,255,255,0.85);
  --input-border: rgba(0,0,0,0.15);
  --input-placeholder: rgba(0,0,0,0.3);
  --input-focus-ring: rgba(59,130,246,0.4);

  --btn-primary-bg: linear-gradient(135deg, #2563eb, #06b6d4);
  --btn-primary-hover: linear-gradient(135deg, #1d4ed8, #0891b2);
  --btn-secondary-bg: rgba(0,0,0,0.06);
  --btn-secondary-hover: rgba(0,0,0,0.1);
  --btn-secondary-border: rgba(0,0,0,0.1);
  --btn-danger-bg: rgba(239,68,68,0.1);
  --btn-danger-text: #dc2626;

  --modal-bg: #ffffff;
  --modal-border: rgba(0,0,0,0.1);
  --toast-bg: rgba(255,255,255,0.95);

  --scrollbar-thumb: rgba(0,0,0,0.15);
  --divider: rgba(0,0,0,0.08);

  --msg-self: linear-gradient(135deg, #2563eb, #06b6d4);
  --msg-other: #e2e8f0;
  --msg-other-border: #cbd5e1;

  --success-bg: rgba(34,197,94,0.1);
  --success-text: #166534;
  --error-bg: rgba(239,68,68,0.1);
  --error-text: #dc2626;

  --switch-container-bg: #87CEEB;
  --switch-night-bg: #1D1F2C;
  --switch-sun-bg: #FFD700;
  --switch-moon-bg: #E8E8E8;
  --switch-spot-color: #B0B0B0;
  --switch-stars-color: #fff;
  --switch-clouds-color: #FFFFFF;
}

/* ===== 基础样式 ===== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans SC', sans-serif;
  background: var(--bg-gradient);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

/* ===== 玻璃态 ===== */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
}
.glass-light {
  background: var(--glass-light-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-light-border);
}

/* ===== 公用动画 ===== */
@keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes slideIn { from { transform:translateX(-100%); } to { transform:translateX(0); } }
@keyframes slideOut { from { transform:translateX(0); } to { transform:translateX(-100%); } }
@keyframes msgDelete { to { opacity:0; transform:translateX(20px); height:0; margin:0; padding:0; overflow:hidden; } }

.animate-fade-up { animation: fadeUp 0.6s ease-out; }
.animate-fade-up-1 { animation: fadeUp 0.6s ease-out 0.1s both; }
.animate-fade-up-2 { animation: fadeUp 0.6s ease-out 0.2s both; }
.animate-fade-up-3 { animation: fadeUp 0.6s ease-out 0.3s both; }
.animate-fade-up-4 { animation: fadeUp 0.6s ease-out 0.4s both; }
.animate-fade-in { animation: fadeIn 0.3s ease forwards; }
.sidebar-open { animation: slideIn 0.3s ease-out forwards; }
.sidebar-close { animation: slideOut 0.3s ease-out forwards; }
.msg-deleting { animation: msgDelete 0.3s ease forwards; }

/* ===== 滚动条 ===== */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 2px; }

/* ===== Toast ===== */
.toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  z-index: 99999; padding: 10px 24px; border-radius: 12px; font-size: 14px;
  background: var(--toast-bg); backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border); color: var(--text-primary);
  box-shadow: 0 8px 40px rgba(0,0,0,0.4);
  opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
}
.toast.show { opacity: 1; }

/* ===== 消息气泡 ===== */
.msg-bubble-self {
  background: var(--msg-self);
  color: white;
}
.msg-bubble-other {
  background: var(--msg-other);
  border: 1px solid var(--msg-other-border);
  color: var(--text-primary);
}

/* ===== 右键菜单 ===== */
.ctx-menu {
  position: fixed; z-index: 9999; min-width: 180px;
  background: var(--modal-bg); backdrop-filter: blur(20px);
  border: 1px solid var(--modal-border); border-radius: 12px; padding: 4px;
  box-shadow: 0 10px 60px rgba(0,0,0,0.5);
  opacity: 0; transform: scale(0.95); transition: opacity 0.12s ease, transform 0.12s ease; pointer-events: none;
}
.ctx-menu.show { opacity: 1; transform: scale(1); pointer-events: auto; }
.ctx-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 12px; border-radius: 8px; color: var(--text-secondary);
  font-size: 13px; cursor: pointer; transition: all 0.12s;
  border: none; background: transparent; text-align: left;
}
.ctx-menu-item:hover { background: rgba(59,130,246,0.2); color: var(--text-primary); }
.ctx-menu-item.danger:hover { background: rgba(239,68,68,0.2); color: var(--btn-danger-text); }
.ctx-menu-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.6; }
.ctx-menu-item:hover svg { opacity: 0.9; }
.ctx-divider { height: 1px; background: var(--divider); margin: 4px 8px; }

/* ===== 加载动画 (design_sample) ===== */
.loader {
  width: 48px; height: 48px; margin: auto; position: relative;
}
.loader:before {
  content: ''; width: 48px; height: 5px;
  background: var(--text-muted); position: absolute; top: 60px; left: 0;
  border-radius: 50%; animation: shadow324 0.5s linear infinite;
}
.loader:after {
  content: ''; width: 100%; height: 100%;
  background: rgb(61, 106, 255); position: absolute; top: 0; left: 0;
  border-radius: 4px; animation: jump7456 0.5s linear infinite;
}
@keyframes jump7456 {
  15% { border-bottom-right-radius: 3px; }
  25% { transform: translateY(9px) rotate(22.5deg); }
  50% { transform: translateY(18px) scale(1,.9) rotate(45deg); border-bottom-right-radius: 40px; }
  75% { transform: translateY(9px) rotate(67.5deg); }
  100% { transform: translateY(0) rotate(90deg); }
}
@keyframes shadow324 { 0%,100% { transform: scale(1,1); } 50% { transform: scale(1.2,1); } }

/* ===== 胶囊标签切换栏 (design_sample) ===== */
.tab-switch {
  display: flex; position: relative;
  background-color: var(--glass-bg); backdrop-filter: blur(20px);
  box-shadow: 0 0 1px 0 rgba(24,94,224,0.15), 0 6px 12px 0 rgba(24,94,224,0.15);
  padding: 0.5rem; border-radius: 99px; border: 1px solid var(--glass-border);
}
.tab-switch * { z-index: 2; }
.tab-switch input[type="radio"] { display: none; }
.tab-switch .tab-item {
  display: flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 18px; font-size: 0.85rem;
  color: var(--text-tertiary); font-weight: 500;
  border-radius: 99px; cursor: pointer; transition: color 0.15s ease-in; white-space: nowrap;
}
.tab-switch input[type="radio"]:checked + .tab-item { color: #185ee0; }
.tab-switch .tab-glider {
  position: absolute; display: flex; height: 34px;
  background: var(--bg-secondary); z-index: 1; border-radius: 99px;
  transition: 0.25s ease-out; box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.tab-switch .tab-item .notification {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; font-size: 10px; margin-left: 6px;
  border-radius: 99px; padding: 0 6px; background: var(--bg-tertiary); transition: 0.15s ease-in;
}
.tab-switch input[type="radio"]:checked + .tab-item > .notification { background: #185ee0; color: #fff; }

/* ===== 纸飞机发送按钮 (design_sample) ===== */
.btn-send {
  font-family: inherit; font-size: 18px;
  background: var(--accent-gradient); color: white;
  padding: 0.6em 0.9em; padding-left: 0.8em;
  display: flex; align-items: center; border: none;
  border-radius: 16px; overflow: hidden; transition: all 0.2s; cursor: pointer;
}
.btn-send span { display: block; margin-left: 0.3em; transition: all 0.3s ease-in-out; }
.btn-send svg { display: block; transform-origin: center center; transition: transform 0.3s ease-in-out; width: 22px; height: 22px; }
.btn-send:hover .svg-wrapper { animation: fly-1 0.6s ease-in-out infinite alternate; }
.btn-send:hover svg { transform: translateX(1.2em) rotate(45deg) scale(1.1); }
.btn-send:hover span { transform: translateX(5em); }
.btn-send:active { transform: scale(0.95); }
@keyframes fly-1 { from { transform: translateY(0.1em); } to { transform: translateY(-0.1em); } }

/* ===== 首页箭头登录按钮 — 用于 index.html 的"登录" (design_sample: index.html的登录按钮.htm) ===== */
.btn-arrow {
  background: linear-gradient(135deg, #2563eb, #06b6d4); color: white;
  font-family: inherit; padding: 0.35em; padding-left: 1.2em;
  font-size: 17px; font-weight: 500; border-radius: 0.9em; border: none;
  letter-spacing: 0.05em; display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative; height: 2.8em;
  padding-right: 3.3em; cursor: pointer; text-decoration: none;
  width: 100%;
}
.btn-arrow .icon {
  background: white; margin-left: 1em; position: absolute;
  display: flex; align-items: center; justify-content: center;
  height: 2.2em; width: 2.2em; border-radius: 0.7em;
  box-shadow: 0.1em 0.1em 0.6em 0.2em rgba(37,99,235,0.4);
  right: 0.3em; transition: all 0.3s;
}
.btn-arrow:hover .icon { width: calc(100% - 0.6em); }
.btn-arrow .icon svg { width: 1.1em; transition: transform 0.3s; color: #2563eb; }
.btn-arrow:hover .icon svg { transform: translateX(0.1em); }
.btn-arrow:active .icon { transform: scale(0.95); }

/* ===== 首页注册按钮 — 用于 index.html 的"注册" (design_sample: index.html注册按钮.htm) ===== */
.btn-register {
  --color: #fff; --background: linear-gradient(135deg, #2563eb, #06b6d4); --background-hover: linear-gradient(135deg, #1d4ed8, #0891b2);
  --background-left: rgba(0,0,0,0.2); --folder: #93c5fd; --folder-inner: #60a5fa;
  --paper: #FFFFFF; --paper-lines: #bfdbfe; --paper-behind: #dbeafe;
  --pencil-cap: #fff; --pencil-top: #1d4ed8; --pencil-middle: #fff;
  --pencil-bottom: #3b82f6; --shadow: rgba(37,99,235,.2);
  border: none; outline: none; cursor: pointer; position: relative;
  border-radius: 5px; font-size: 14px; font-weight: 500; line-height: 19px;
  padding: 17px 29px 17px 69px; transition: background 0.3s;
  color: var(--color); background: var(--bg, var(--background));
  display: inline-flex; align-items: center; text-decoration: none; width: 100%;
  justify-content: center;
}
.btn-register > div {
  top: 0; left: 0; bottom: 0; width: 53px; position: absolute;
  overflow: hidden; border-radius: 5px 0 0 5px; background: var(--background-left);
}
.btn-register > div .folder {
  width: 23px; height: 27px; position: absolute; left: 15px; top: 13px;
}
.btn-register > div .folder .top {
  left: 0; top: 0; z-index: 2; position: absolute;
  transform: translateX(var(--fx, 0)); transition: transform 0.4s ease var(--fd, 0.3s);
}
.btn-register > div .folder .top svg {
  width: 24px; height: 27px; display: block; fill: var(--folder);
  transform-origin: 0 50%; transition: transform 0.3s ease var(--fds, 0.45s);
  transform: perspective(120px) rotateY(var(--fr, 0deg));
}
.btn-register > div .folder:before, .btn-register > div .folder:after,
.btn-register > div .folder .paper {
  content: ""; position: absolute; left: var(--l,0); top: var(--t,0);
  width: var(--w,100%); height: var(--h,100%); border-radius: 1px;
  background: var(--b, var(--folder-inner));
}
.btn-register > div .folder:before {
  box-shadow: 0 1.5px 3px var(--shadow), 0 2.5px 5px var(--shadow), 0 3.5px 7px var(--shadow);
  transform: translateX(var(--fx, 0)); transition: transform 0.4s ease var(--fd, 0.3s);
}
.btn-register > div .folder:after, .btn-register > div .folder .paper {
  --l: 1px; --t: 1px; --w: 21px; --h: 25px; --b: var(--paper-behind);
}
.btn-register > div .folder:after {
  transform: translate(var(--pbx,0), var(--pby,0));
  transition: transform 0.4s ease var(--pbd, 0s);
}
.btn-register > div .folder .paper { z-index: 1; --b: var(--paper); }
.btn-register > div .folder .paper:before, .btn-register > div .folder .paper:after {
  content: ""; width: var(--wp,14px); height: 2px; border-radius: 1px;
  transform: scaleY(0.5); left: 3px; top: var(--tp,3px); position: absolute;
  background: var(--paper-lines);
  box-shadow: 0 12px 0 0 var(--paper-lines), 0 24px 0 0 var(--paper-lines);
}
.btn-register > div .folder .paper:after { --tp: 6px; --wp: 10px; }
.btn-register > div .pencil {
  height: 2px; width: 3px; border-radius: 1px 1px 0 0; top: 8px;
  left: 105%; position: absolute; z-index: 3;
  transform-origin: 50% 19px; background: var(--pencil-cap);
  transform: translateX(var(--pex,0)) rotate(35deg);
  transition: transform 0.4s ease var(--pbd, 0s);
}
.btn-register > div .pencil:before, .btn-register > div .pencil:after {
  content: ""; position: absolute; display: block;
  background: var(--b, linear-gradient(var(--pencil-top) 55%, var(--pencil-middle) 55.1%, var(--pencil-middle) 60%, var(--pencil-bottom) 60.1%));
  width: var(--w,5px); height: var(--h,20px); border-radius: var(--br,2px 2px 0 0);
  top: var(--t,2px); left: var(--l,-1px);
}
.btn-register > div .pencil:before {
  -webkit-clip-path: polygon(0 5%, 5px 5%, 5px 17px, 50% 20px, 0 17px);
  clip-path: polygon(0 5%, 5px 5%, 5px 17px, 50% 20px, 0 17px);
}
.btn-register > div .pencil:after {
  --b: none; --w: 3px; --h: 6px; --br: 0 2px 1px 0; --t: 3px; --l: 3px;
  border-top: 1px solid var(--pencil-top);
  border-right: 1px solid var(--pencil-top);
}
.btn-register:before, .btn-register:after {
  content: ""; position: absolute; width: 10px; height: 2px;
  border-radius: 1px; background: var(--color);
  transform-origin: 9px 1px;
  transform: translateX(var(--cx,0)) scale(0.5) rotate(var(--r,-45deg));
  top: 26px; right: 16px; transition: transform 0.3s;
}
.btn-register:after { --r: 45deg; }
.btn-register:hover > div .folder .top { --fx: 4px; --fd: 0s; }
.btn-register:hover > div .folder .top svg { --fr: -40deg; --fds: 0s; }
.btn-register:hover > div .folder:before { --fx: 4px; --fd: 0s; }
.btn-register:hover > div .folder:after { --pbx: 50px; --pbd: 0s; }
.btn-register:hover > div .pencil { --pex: -40px; --pbd: 0s; }
.btn-register:active { scale: 0.95; }

/* ===== 登录/注册提交按钮 — 用于 login/register 的"确认"按钮 (design_sample: register.html或login.html的确认按钮.htm) ===== */
.btn-confirm {
  position: relative; display: flex; align-items: center; justify-content: center;
  gap: 4px; padding: 16px 36px; border: 4px solid transparent;
  font-size: 16px; background: #1e3a5f;
  border-radius: 100px; font-weight: 600;
  color: #93c5fd; box-shadow: 0 0 0 2px #3b82f6;
  cursor: pointer; overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  width: 100%;
}
.btn-confirm svg {
  position: absolute; width: 24px; fill: #93c5fd;
  z-index: 9; transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.btn-confirm .arr-1 { right: 16px; }
.btn-confirm .arr-2 { left: -25%; }
.btn-confirm .circle {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 20px; height: 20px; background-color: #3b82f6;
  border-radius: 50%; opacity: 0;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.btn-confirm .text { position: relative; z-index: 1; transform: translateX(-12px); transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); }
.btn-confirm:hover { box-shadow: 0 0 0 12px transparent; color: #fff; border-radius: 12px; }
.btn-confirm:hover .arr-1 { right: -25%; }
.btn-confirm:hover .arr-2 { left: 16px; }
.btn-confirm:hover .text { transform: translateX(12px); }
.btn-confirm:hover svg { fill: #fff; }
.btn-confirm:active { scale: 0.95; box-shadow: 0 0 0 4px #3b82f6; }
.btn-confirm:hover .circle { width: 600px; height: 600px; opacity: 1; }

/* ===== 退出登录按钮 (design_sample) ===== */
.btn-logout-wrap {
  position: relative; width: 40px; height: 40px; flex-shrink: 0;
}
.btn-logout {
  display: flex; align-items: center; justify-content: flex-start;
  width: 40px; height: 40px; border: none; border-radius: 50%;
  cursor: pointer; overflow: hidden;
  transition-duration: .3s; background-color: rgb(255,65,65);
  position: absolute; right: 0; top: 0; z-index: 1;
}
.btn-logout .sign { width: 100%; transition-duration: .3s; display: flex; align-items: center; justify-content: center; }
.btn-logout .sign svg { width: 16px; }
.btn-logout .sign svg path { fill: white; }
.btn-logout .text {
  position: absolute; right: 0%; width: 0%; opacity: 0;
  color: white; font-size: 1em; font-weight: 600; transition-duration: .3s; white-space: nowrap;
}
.btn-logout:hover { width: 120px; border-radius: 40px; transition-duration: .3s; }
.btn-logout:hover .sign { width: 30%; transition-duration: .3s; padding-left: 20px; }
.btn-logout:hover .text { opacity: 1; width: 70%; transition-duration: .3s; padding-right: 10px; }
.btn-logout:active { transform: translate(2px,2px); }

/* ===== 主题切换开关 (design_sample) ===== */
.theme-switch {
  --toggle-size: 28px;
  --container-width: 5.125em; --container-height: 2.2em; --container-radius: 6.25em;
  --circle-container-diameter: 3.0em; --sun-moon-diameter: 1.9em;
  --sun-bg: var(--switch-sun-bg); --moon-bg: var(--switch-moon-bg);
  --spot-color: var(--switch-spot-color);
  --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
  --stars-color: var(--switch-stars-color);
  --clouds-color: var(--switch-clouds-color);
  --back-clouds-color: #AACADF;
  --transition: .5s cubic-bezier(0,-0.02,0.4,1.25);
  --circle-transition: .3s cubic-bezier(0,-0.02,0.35,1.17);
}
.theme-switch, .theme-switch *, .theme-switch *::before, .theme-switch *::after {
  box-sizing: border-box; margin: 0; padding: 0; font-size: var(--toggle-size);
}
.theme-switch__container {
  width: var(--container-width); height: var(--container-height);
  background-color: var(--switch-container-bg); border-radius: var(--container-radius);
  overflow: hidden; cursor: pointer; transition: var(--transition); position: relative;
  box-shadow: 0em -0.062em 0.062em rgba(0,0,0,0.25), 0em 0.062em 0.125em rgba(255,255,255,0.94);
}
.theme-switch__container::before {
  content: ""; position: absolute; z-index: 1; inset: 0;
  box-shadow: 0em 0.05em 0.187em rgba(0,0,0,0.25) inset;
  border-radius: var(--container-radius);
}
.theme-switch__checkbox { display: none; }
.theme-switch__circle-container {
  width: var(--circle-container-diameter); height: var(--circle-container-diameter);
  background-color: rgba(255,255,255,0.1);
  position: absolute; left: var(--circle-container-offset); top: var(--circle-container-offset);
  border-radius: var(--container-radius);
  box-shadow: inset 0 0 0 3.375em rgba(255,255,255,0.1);
  display: flex; transition: var(--circle-transition); pointer-events: none;
}
.theme-switch__sun-moon-container {
  pointer-events: auto; position: relative; z-index: 2;
  width: var(--sun-moon-diameter); height: var(--sun-moon-diameter); margin: auto;
  border-radius: var(--container-radius); background-color: var(--sun-bg);
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254,255,239,0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
  filter: drop-shadow(0.062em 0.125em 0.125em rgba(0,0,0,0.25));
  overflow: hidden; transition: var(--transition);
}
.theme-switch__moon {
  transform: translateX(100%); width: 100%; height: 100%;
  background-color: var(--moon-bg); border-radius: inherit;
  transition: var(--transition); position: relative;
}
.theme-switch__spot {
  position: absolute; top: 0.75em; left: 0.312em;
  width: 0.75em; height: 0.75em; border-radius: var(--container-radius);
  background-color: var(--spot-color);
  box-shadow: 0em 0.0312em 0.062em rgba(0,0,0,0.25) inset;
}
.theme-switch__spot:nth-of-type(2) { width: 0.375em; height: 0.375em; top: 0.937em; left: 1.375em; }
.theme-switch__spot:nth-last-of-type(3) { width: 0.25em; height: 0.25em; top: 0.312em; left: 0.812em; }
.theme-switch__clouds {
  width: 1.25em; height: 1.25em; background-color: var(--clouds-color);
  border-radius: var(--container-radius); position: absolute;
  bottom: -0.625em; left: 0.312em;
  box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
  transition: 0.5s cubic-bezier(0,-0.02,0.4,1.25);
}
.theme-switch__stars-container {
  position: absolute; color: var(--stars-color);
  top: -100%; left: 0.312em; width: 2.75em; height: auto; transition: var(--transition);
}
.theme-switch__checkbox:checked + .theme-switch__container { background-color: var(--switch-night-bg); }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
}
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon { transform: translate(0); }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__clouds { bottom: -4.062em; }
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-container {
  top: 50%; transform: translateY(-50%);
}

/* ===== Minecraft 彩蛋模式 — 全部变直角 ===== */
.theme-switch.minecraft-mode { --container-radius: 0; }

/* ===== 设置弹窗开关样式 ===== */
.toggle-switch {
  position: relative; display: inline-block; width: 40px; height: 24px; cursor: pointer;
}
.toggle-switch input { display: none; }
.toggle-slider {
  position: absolute; inset: 0; background: var(--text-muted); border-radius: 12px; transition: .3s;
}
.toggle-slider::before {
  content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px;
  background: #fff; border-radius: 50%; transition: .3s;
}
.toggle-switch input:checked + .toggle-slider { background: #7c3aed; }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(16px); }

/* ===== 浮动标签输入框 (design_sample) ===== */
.floating-input-group {
  position: relative; padding: 20px 0 0; width: 100%;
}
.floating-input-group .floating-input {
  font-family: inherit; width: 100%; border: none;
  border-bottom: 2px solid var(--text-muted); outline: 0;
  font-size: 17px; color: var(--text-primary); padding: 7px 0;
  background: transparent; transition: border-color 0.2s;
}
.floating-input-group .floating-input::placeholder { color: transparent; }
.floating-input-group .floating-input:placeholder-shown ~ .floating-label {
  font-size: 17px; cursor: text; top: 20px; color: var(--text-muted);
}
.floating-input-group .floating-label {
  position: absolute; top: 0; display: block; transition: 0.2s;
  font-size: 17px; color: var(--text-muted); pointer-events: none;
}
.floating-input-group .floating-input:focus {
  padding-bottom: 6px; font-weight: 700; border-width: 3px;
  border-image: linear-gradient(to right, #116399, #38caef); border-image-slice: 1;
}
.floating-input-group .floating-input:focus ~ .floating-label {
  position: absolute; top: 0; display: block; transition: 0.2s;
  font-size: 17px; color: #38caef; font-weight: 700;
}
.floating-input-group .floating-input:required,
.floating-input-group .floating-input:invalid { box-shadow: none; }