/*
 * 全功能多风格个人引导页系统 - 前后台公共样式与 14 套完整主题
 * 性能原则：动画优先使用 transform / opacity / filter，关键动效添加 will-change。
 * 响应式断点：移动优先；640px 手机横屏/大屏手机；768px 平板；1024px 桌面。
 */
:root {
  --bg: #fff7fb;
  --bg-2: #ffe4ef;
  --card: rgba(255,255,255,.78);
  --card-strong: rgba(255,255,255,.94);
  --text: #33202a;
  --muted: #806777;
  --primary: #f472b6;
  --secondary: #38bdf8;
  --accent: #facc15;
  --border: rgba(255,255,255,.65);
  --shadow: 0 28px 90px rgba(244,114,182,.22);
  --button-text: #fff;
  --font-main: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  --font-display: "Microsoft YaHei", "PingFang SC", sans-serif;
  --radius-card: 32px;
  --noise-opacity: .06;
}
* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-main);
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { min-width: 44px; min-height: 44px; cursor: pointer; }
[x-cloak] { display: none !important; }
.theme-background { position: fixed; inset: 0; z-index: -5; background: var(--bg); overflow: hidden; }
.background-filter { position: absolute; inset: -30px; background-size: cover; background-position: center; transform: scale(1.04); }
.background-filter::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 10%, rgba(255,255,255,.34), transparent 28%), radial-gradient(circle at 80% 20%, rgba(255,255,255,.24), transparent 30%); pointer-events: none; }
.theme-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }
.theme-decor-root { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.preloader { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; gap: 16px; background: var(--bg); color: var(--text); }
.preloader-orbit { position: relative; width: 96px; height: 96px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--primary), transparent 62%); animation: spin 1.4s linear infinite; }
.preloader-orbit span { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 24px var(--primary); }
.preloader-orbit span:nth-child(1) { left: 39px; top: -9px; }
.preloader-orbit span:nth-child(2) { right: -4px; bottom: 16px; background: var(--secondary); box-shadow: 0 0 24px var(--secondary); }
.preloader-orbit span:nth-child(3) { left: -4px; bottom: 16px; background: var(--accent); box-shadow: 0 0 24px var(--accent); }
.preloader p { margin: 0; letter-spacing: .14em; font-weight: 700; }
@keyframes spin { to { transform: rotate(360deg); } }
.guide-shell { width: min(1120px, calc(100% - 28px)); margin: 0 auto; padding: 42px 0 84px; position: relative; z-index: 2; }
.profile-card, .component-card, .gallery-section, .search-panel, .button-group, .footer-html {
  background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: var(--radius-card); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
}
.profile-card { max-width: 820px; margin: 0 auto 18px; overflow: hidden; position: relative; }
.profile-card::before { content: ""; position: absolute; inset: -2px; background: linear-gradient(120deg, transparent, color-mix(in srgb, var(--primary), transparent 66%), transparent); transform: translateX(-120%); animation: cardSweep 7s ease-in-out infinite; pointer-events: none; }
@keyframes cardSweep { 0%, 42% { transform: translateX(-120%); } 65%, 100% { transform: translateX(120%); } }
.profile-card-inner { position: relative; padding: clamp(28px, 5vw, 54px); display: flex; flex-direction: column; align-items: center; }
.avatar-wrap { width: 138px; height: 138px; position: relative; display: grid; place-items: center; transform-style: preserve-3d; will-change: transform; transition: transform .28s ease; }
.avatar-img { width: 118px; height: 118px; object-fit: cover; position: relative; z-index: 2; border: 4px solid var(--card-strong); box-shadow: 0 18px 38px color-mix(in srgb, var(--primary), transparent 72%); transition: transform .35s ease, border-radius .35s ease; }
.avatar-circle .avatar-img { border-radius: 50%; }
.avatar-rounded .avatar-img { border-radius: 28px; }
.avatar-square .avatar-img { border-radius: 0; }
.avatar-gear .avatar-img { clip-path: polygon(50% 0%,60% 14%,76% 8%,82% 24%,100% 30%,88% 47%,100% 64%,82% 70%,76% 92%,58% 84%,50% 100%,40% 84%,24% 92%,18% 74%,0 66%,12% 50%,0 34%,18% 26%,24% 8%,40% 14%); }
.avatar-hover-rotate:hover .avatar-img { transform: rotate(6deg) scale(1.05); }
.avatar-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--primary), transparent 20%); animation: spin 12s linear infinite; }
.avatar-spark { position: absolute; inset: 12px; border-radius: 50%; background: conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--secondary), transparent 42%), transparent, color-mix(in srgb, var(--primary), transparent 50%), transparent); filter: blur(10px); opacity: .72; animation: spin 8s linear reverse infinite; }
.nickname { margin: 0 0 8px; color: var(--primary); font-weight: 800; letter-spacing: .08em; }
.main-title { margin: 0; font-family: var(--font-display); font-size: clamp(2rem, 7vw, 4.8rem); line-height: 1.05; font-weight: 950; letter-spacing: -.04em; text-shadow: 0 5px 24px color-mix(in srgb, var(--primary), transparent 80%); }
.main-title::after { content: "|"; margin-left: .08em; color: var(--primary); animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
.subtitle { margin: 14px auto 0; max-width: 680px; color: var(--muted); font-size: clamp(1rem, 2vw, 1.18rem); }
.status-pill { --status-color:#22c55e; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 7px 14px; margin-top: 16px; border-radius: 999px; background: color-mix(in srgb, var(--status-color), transparent 84%); border: 1px solid color-mix(in srgb, var(--status-color), transparent 52%); color: var(--text); font-weight: 700; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--status-color); box-shadow: 0 0 0 6px color-mix(in srgb, var(--status-color), transparent 82%), 0 0 16px var(--status-color); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(.76); opacity: .7; } }
.quote-box { display: flex; align-items: flex-start; gap: 12px; width: min(680px, 100%); margin-top: 24px; padding: 18px 20px; border-radius: 24px; background: color-mix(in srgb, var(--card-strong), transparent 18%); border: 1px solid color-mix(in srgb, var(--border), transparent 20%); color: var(--muted); }
.quote-box i { color: var(--primary); opacity: .75; }
.quote-content { flex: 1; line-height: 1.75; }
.social-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.social-icon { border: 0; border-radius: 18px; width: 52px; height: 52px; background: var(--card-strong); color: var(--text); box-shadow: 0 10px 24px rgba(0,0,0,.08); transition: transform .22s ease, color .22s ease, background .22s ease, box-shadow .22s ease; }
.social-icon:hover { transform: translateY(-5px) scale(1.08); color: var(--button-text); background: var(--primary); box-shadow: 0 18px 34px color-mix(in srgb, var(--primary), transparent 58%); }
.search-panel { max-width: 820px; margin: 18px auto; padding: 12px; }
.search-form { display: flex; gap: 10px; align-items: center; min-height: 56px; }
.search-engine, .search-input { min-height: 48px; border: 1px solid var(--border); border-radius: 16px; background: var(--card-strong); color: var(--text); outline: none; transition: box-shadow .2s ease, transform .2s ease; }
.search-engine { padding: 0 12px; flex: 0 0 108px; }
.search-input { flex: 1; padding: 0 16px; }
.search-input:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary), transparent 78%); transform: scale(1.01); }
.search-button { border: 0; width: 52px; height: 52px; border-radius: 16px; background: var(--primary); color: var(--button-text); box-shadow: 0 12px 28px color-mix(in srgb, var(--primary), transparent 62%); }
.button-zone { margin: 18px auto; max-width: 960px; display: grid; gap: 16px; }
.button-group { padding: clamp(16px, 3vw, 24px); }
.group-title, .section-title, .component-card h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 1.08rem; font-weight: 900; color: var(--text); }
.button-list { display: grid; gap: var(--button-gap, 14px); }
.button-list.layout-grid { grid-template-columns: repeat(var(--grid-columns, 3), minmax(0, 1fr)); }
.button-list.layout-row { display: flex; flex-wrap: wrap; }
.button-list.layout-column { grid-template-columns: 1fr; }
.button-list.layout-tile { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-auto-rows: minmax(92px, auto); }
.guide-button { --btn-color: var(--primary); --btn-radius: 22px; min-height: 58px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 16px; border-radius: var(--btn-radius); background: linear-gradient(135deg, color-mix(in srgb, var(--btn-color), white 8%), color-mix(in srgb, var(--btn-color), black 8%)); color: var(--button-text); font-weight: 900; letter-spacing: .02em; box-shadow: 0 14px 34px color-mix(in srgb, var(--btn-color), transparent 66%); transform: translateZ(0); transition: transform .22s ease, box-shadow .22s ease, filter .22s ease; }
.guide-button:hover { transform: translateY(-6px) scale(1.018); filter: saturate(1.08); box-shadow: 0 24px 42px color-mix(in srgb, var(--btn-color), transparent 52%); }
.button-glow { position: absolute; inset: -80% auto -80% -45%; width: 38%; transform: rotate(20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); animation: sweep 4.2s ease-in-out infinite; }
@keyframes sweep { 0%, 45% { left: -45%; } 75%, 100% { left: 120%; } }
.guide-button i, .guide-button span { position: relative; z-index: 2; }
.button-ripple { position: absolute; width: 16px; height: 16px; border-radius: 50%; transform: scale(0); background: rgba(255,255,255,.42); pointer-events: none; }
.guide-button.rippling .button-ripple { animation: ripple .55s ease-out; }
@keyframes ripple { to { transform: scale(18); opacity: 0; } }
.component-grid { max-width: 960px; margin: 18px auto; display: grid; grid-template-columns: 1fr; gap: 18px; }
.component-card { padding: clamp(18px, 3vw, 26px); }
.skill-list { display: grid; gap: 14px; }
.skill-meta { display: flex; justify-content: space-between; gap: 12px; font-weight: 800; margin-bottom: 8px; }
.skill-track { height: 12px; border-radius: 999px; background: color-mix(in srgb, var(--muted), transparent 84%); overflow: hidden; }
.skill-track span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--secondary)); box-shadow: 0 0 18px color-mix(in srgb, var(--primary), transparent 50%); animation: fillBar 1.2s cubic-bezier(.2,.8,.2,1) both; }
@keyframes fillBar { from { width: 0; } }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.tag-cloud span { padding: 8px 12px; border-radius: 999px; background: color-mix(in srgb, var(--primary), transparent 84%); border: 1px solid color-mix(in srgb, var(--primary), transparent 58%); color: var(--text); font-weight: 750; }
.timeline-list { position: relative; display: grid; gap: 16px; }
.timeline-item { display: grid; grid-template-columns: 92px 1fr; gap: 14px; position: relative; }
.timeline-item time { font-weight: 950; color: var(--primary); }
.timeline-item h3 { margin: 0 0 6px; font-size: 1rem; }
.timeline-item p { margin: 0; color: var(--muted); line-height: 1.7; }
.gallery-section { max-width: 960px; margin: 18px auto; padding: clamp(16px, 3vw, 24px); }
.guide-swiper { border-radius: 24px; overflow: hidden; }
.swiper-slide { position: relative; min-height: 280px; background: #111; }
.swiper-slide img { width: 100%; height: 100%; min-height: 280px; max-height: 520px; object-fit: cover; display: block; }
.slide-caption { position: absolute; left: 18px; right: 18px; bottom: 18px; padding: 16px; border-radius: 20px; background: rgba(0,0,0,.42); color: #fff; backdrop-filter: blur(14px); }
.slide-caption h3 { margin: 0 0 6px; font-size: 1.3rem; }
.slide-caption p { margin: 0; opacity: .86; }
.footer-html { max-width: 960px; margin: 18px auto 0; padding: 18px; text-align: center; color: var(--muted); }
.footer-html a { color: var(--primary); font-weight: 800; }
.qr-modal { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; background: rgba(0,0,0,.38); backdrop-filter: blur(16px); padding: 24px; }
.qr-card { position: relative; width: min(360px, 100%); padding: 28px; border-radius: 30px; background: var(--card-strong); border: 1px solid var(--border); box-shadow: 0 28px 80px rgba(0,0,0,.28); text-align: center; }
.qr-card img { width: 220px; height: 220px; object-fit: cover; border-radius: 20px; background: #fff; padding: 8px; }
.qr-close { position: absolute; top: 12px; right: 12px; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--muted), transparent 86%); color: var(--text); }
.music-player { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 500; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.music-disc { border: 0; border-radius: 50%; width: 50px; height: 50px; background: var(--primary); color: var(--button-text); box-shadow: 0 0 22px color-mix(in srgb, var(--primary), transparent 46%); }
.music-player.is-playing .music-disc { animation: spin 3s linear infinite; }
.music-info { display: grid; line-height: 1.2; font-weight: 900; }
.music-info small { color: var(--muted); font-weight: 700; }
.sound-wave { display: flex; align-items: end; gap: 3px; height: 26px; }
.sound-wave span { width: 4px; height: 9px; border-radius: 4px; background: var(--primary); opacity: .45; }
.music-player.is-playing .sound-wave span { animation: wave .7s ease-in-out infinite alternate; }
.music-player.is-playing .sound-wave span:nth-child(2) { animation-delay: .12s; }
.music-player.is-playing .sound-wave span:nth-child(3) { animation-delay: .24s; }
.music-player.is-playing .sound-wave span:nth-child(4) { animation-delay: .36s; }
@keyframes wave { to { height: 24px; opacity: 1; } }
.music-notes i { position: absolute; color: var(--primary); font-style: normal; animation: noteFloat 2.8s ease-in-out infinite; opacity: 0; }
.music-notes i:nth-child(1){ right: 28px; bottom: 54px; animation-delay: 0s; }
.music-notes i:nth-child(2){ right: 64px; bottom: 48px; animation-delay: .7s; }
.music-notes i:nth-child(3){ right: 94px; bottom: 52px; animation-delay: 1.3s; }
@keyframes noteFloat { 0%{ transform: translateY(0) rotate(0); opacity:0;} 25%{opacity:1;} 100%{ transform: translateY(-72px) rotate(18deg); opacity:0;} }
.reveal-item { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; will-change: transform, opacity; }
.reveal-item.is-visible { opacity: 1; transform: none; }
/* 管理后台样式 */
.admin-body { background: #f5f7fb; color: #172033; }
.admin-shell { min-height: 100vh; display: grid; grid-template-columns: 280px 1fr; }
.admin-sidebar { position: sticky; top: 0; height: 100vh; overflow: auto; padding: 22px; background: #111827; color: #fff; }
.admin-brand { display: flex; align-items: center; gap: 12px; font-size: 1.2rem; font-weight: 950; margin-bottom: 22px; }
.admin-nav { display: grid; gap: 8px; }
.admin-nav a { padding: 12px 14px; border-radius: 14px; color: rgba(255,255,255,.78); transition: background .2s ease, color .2s ease, transform .2s ease; }
.admin-nav a:hover, .admin-nav a.active { background: rgba(255,255,255,.12); color: #fff; transform: translateX(4px); }
.admin-main { padding: 22px; }
.admin-topbar { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; margin: -22px -22px 22px; background: rgba(245,247,251,.88); backdrop-filter: blur(16px); border-bottom: 1px solid #e5e7eb; }
.admin-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.admin-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 24px; box-shadow: 0 16px 46px rgba(15,23,42,.06); padding: 22px; }
.admin-card h2 { margin: 0 0 18px; display: flex; align-items: center; gap: 10px; font-size: 1.25rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.form-field { display: grid; gap: 7px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-weight: 850; color: #334155; }
.form-field input, .form-field select, .form-field textarea { width: 100%; min-height: 44px; border: 1px solid #dbe3ef; border-radius: 14px; padding: 10px 12px; background: #fff; color: #172033; outline: none; }
.form-field textarea { min-height: 110px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: #7c3aed; box-shadow: 0 0 0 4px rgba(124,58,237,.12); }
.switch-row { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.switch-row input { width: 20px; height: 20px; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.admin-btn { border: 0; border-radius: 14px; padding: 0 16px; min-height: 44px; background: #7c3aed; color: #fff; font-weight: 900; box-shadow: 0 12px 24px rgba(124,58,237,.22); }
.admin-btn.secondary { background: #e2e8f0; color: #172033; box-shadow: none; }
.admin-btn.danger { background: #ef4444; }
.admin-btn.success { background: #22c55e; }
.repeat-list { display: grid; gap: 12px; }
.repeat-item { padding: 14px; border: 1px dashed #cbd5e1; border-radius: 18px; background: #f8fafc; }
.repeat-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; cursor: grab; }
.badge { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 4px 10px; border-radius: 999px; font-size: .82rem; font-weight: 900; background: #eef2ff; color: #4338ca; }
.preview-frame { width: 100%; height: 680px; border: 1px solid #dbe3ef; border-radius: 22px; background: #fff; }
.login-page { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 20% 20%, #ede9fe, transparent 32%), radial-gradient(circle at 80% 10%, #fce7f3, transparent 32%), #f8fafc; padding: 20px; }
.login-card { width: min(420px, 100%); padding: 30px; border-radius: 28px; background: rgba(255,255,255,.86); border: 1px solid rgba(255,255,255,.8); box-shadow: 0 28px 70px rgba(15,23,42,.12); backdrop-filter: blur(18px); }
.login-card h1 { margin: 0 0 10px; font-size: 1.7rem; }
.notice { padding: 12px 14px; border-radius: 14px; background: #fef3c7; color: #92400e; margin: 12px 0; }
.notice.ok { background: #dcfce7; color: #166534; }
.notice.err { background: #fee2e2; color: #991b1b; }
/* 主题 01：极简素白 */
.theme-minimal { --bg:#ffffff; --bg-2:#f5f5f4; --card:rgba(255,255,255,.96); --card-strong:#fff; --text:#111111; --muted:#666666; --primary:#111111; --secondary:#737373; --accent:#d4d4d4; --border:#111111; --shadow:0 18px 45px rgba(0,0,0,.06); --button-text:#fff; --radius-card:8px; }
.theme-minimal .profile-card,.theme-minimal .component-card,.theme-minimal .gallery-section,.theme-minimal .search-panel,.theme-minimal .button-group,.theme-minimal .footer-html{backdrop-filter:none;border-width:1px;box-shadow:none;}
.theme-minimal .guide-button{background:#111;border:1px solid #111;border-radius:4px;box-shadow:none;}
.theme-minimal .guide-button:hover{background:#fff;color:#111;box-shadow:none;}
.theme-minimal .button-glow,.theme-minimal .avatar-spark{display:none;}
.theme-minimal .decor-minimal-line{position:absolute;background:#111;opacity:.08;transform-origin:left center;animation:minimalLine 9s ease-in-out infinite;}
@keyframes minimalLine{0%,100%{transform:scaleX(.2);opacity:.04}50%{transform:scaleX(1);opacity:.16}}
/* 主题 02：暗夜深邃 */
.theme-dark{--bg:#02040a;--bg-2:#050816;--card:rgba(5,10,25,.72);--card-strong:rgba(9,15,34,.92);--text:#e0faff;--muted:#92a9bd;--primary:#22d3ee;--secondary:#f472b6;--accent:#a78bfa;--border:rgba(34,211,238,.34);--shadow:0 0 46px rgba(34,211,238,.18),0 0 80px rgba(244,114,182,.09);--button-text:#001016;}
.theme-dark .profile-card,.theme-dark .component-card,.theme-dark .gallery-section,.theme-dark .search-panel,.theme-dark .button-group,.theme-dark .footer-html{box-shadow:0 0 0 1px rgba(34,211,238,.18),0 0 40px rgba(34,211,238,.13);}
.theme-dark .guide-button{color:#001016;text-shadow:none;}
.theme-dark .decor-neon-ring{position:absolute;border:1px solid rgba(34,211,238,.34);border-radius:50%;box-shadow:0 0 24px rgba(34,211,238,.38);animation:neonRing 6s ease-in-out infinite;}
@keyframes neonRing{0%,100%{transform:scale(.8);opacity:.25}50%{transform:scale(1.25);opacity:.8}}
/* 主题 03：毛玻璃拟态 */
.theme-glass{--bg:#dbeafe;--bg-2:#f8fafc;--card:rgba(255,255,255,.34);--card-strong:rgba(255,255,255,.58);--text:#17324d;--muted:#60758f;--primary:#60a5fa;--secondary:#c084fc;--accent:#f9a8d4;--border:rgba(255,255,255,.72);--shadow:0 30px 90px rgba(96,165,250,.22);--button-text:#fff;}
.theme-glass .theme-background{background:linear-gradient(135deg,#dbeafe,#f5d0fe,#cffafe);}
.theme-glass .decor-glass-bubble{position:absolute;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.58),rgba(255,255,255,.12));border:1px solid rgba(255,255,255,.65);box-shadow:inset 0 0 25px rgba(255,255,255,.36);animation:bubbleFloat 12s ease-in-out infinite;}
@keyframes bubbleFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(16px,-46px,0)}}
/* 主题 04：渐变流光 */
.theme-gradient{--bg:#1e1b4b;--bg-2:#312e81;--card:rgba(255,255,255,.84);--card-strong:rgba(255,255,255,.96);--text:#20143d;--muted:#675986;--primary:#7c3aed;--secondary:#06b6d4;--accent:#f472b6;--border:rgba(255,255,255,.7);--shadow:0 35px 95px rgba(124,58,237,.24);--button-text:#fff;}
.theme-gradient .theme-background{background:linear-gradient(-45deg,#7c3aed,#2563eb,#06b6d4,#f472b6);background-size:400% 400%;animation:gradientMove 12s ease infinite;}
.theme-gradient .profile-card::after{content:"";position:absolute;inset:-2px;border-radius:inherit;background:linear-gradient(90deg,#7c3aed,#06b6d4,#f472b6,#7c3aed);z-index:-1;filter:blur(18px);opacity:.55;animation:hueRotate 6s linear infinite;}
@keyframes gradientMove{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}@keyframes hueRotate{to{filter:blur(18px) hue-rotate(360deg)}}
/* 主题 05：樱花和风 */
.theme-sakura{--bg:#fff7fb;--bg-2:#ffe4ef;--card:rgba(255,255,255,.76);--card-strong:rgba(255,255,255,.94);--text:#4a2436;--muted:#8d6576;--primary:#f472b6;--secondary:#fb7185;--accent:#fbbf24;--border:rgba(255,182,213,.62);--shadow:0 28px 86px rgba(244,114,182,.24);--button-text:#fff;--font-display:"Microsoft YaHei","PingFang SC",sans-serif;}
.theme-sakura .theme-background{background:radial-gradient(circle at 20% 10%,rgba(255,255,255,.85),transparent 28%),linear-gradient(135deg,#ffe4ef,#fff7fb 45%,#e0f2fe);}
.theme-sakura .guide-button{border:1px solid rgba(255,255,255,.56);}
.theme-sakura .decor-sakura-petal{position:absolute;width:18px;height:13px;background:linear-gradient(135deg,#ffd1e1,#f472b6);border-radius:90% 10% 90% 10%;opacity:.78;filter:drop-shadow(0 4px 8px rgba(244,114,182,.18));animation:sakuraFall linear infinite;}
.theme-sakura .decor-wafuu-pattern{position:absolute;width:220px;height:220px;border-radius:50%;background:repeating-radial-gradient(circle,rgba(244,114,182,.08) 0 3px,transparent 3px 12px);animation:spin 38s linear infinite;}
@keyframes sakuraFall{0%{transform:translate3d(0,-12vh,0) rotate(0deg)}100%{transform:translate3d(var(--drift,40px),112vh,0) rotate(720deg)}}
/* 主题 06：赛博朋克 */
.theme-cyberpunk{--bg:#120024;--bg-2:#21003d;--card:rgba(17,0,38,.76);--card-strong:rgba(25,5,48,.94);--text:#f8e7ff;--muted:#cfb6dc;--primary:#00f5ff;--secondary:#ff2bd6;--accent:#faff00;--border:rgba(0,245,255,.42);--shadow:0 0 38px rgba(0,245,255,.18),0 0 70px rgba(255,43,214,.12);--button-text:#090014;--radius-card:18px;}
.theme-cyberpunk .theme-background{background:linear-gradient(135deg,#120024,#1d0b3b 48%,#0f172a);}
.theme-cyberpunk .main-title{position:relative;text-shadow:2px 0 #ff2bd6,-2px 0 #00f5ff;animation:glitchText 2.4s infinite;}
.theme-cyberpunk .guide-button{clip-path:polygon(8px 0,100% 0,calc(100% - 12px) 100%,0 100%,0 8px);border-radius:0;}
.theme-cyberpunk .decor-scanline{position:absolute;left:0;right:0;height:2px;background:rgba(0,245,255,.7);box-shadow:0 0 18px #00f5ff;animation:scanline 4s linear infinite;}
.theme-cyberpunk .decor-cyber-grid{position:absolute;inset:auto 0 0;height:42%;background-image:linear-gradient(rgba(0,245,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,43,214,.16) 1px,transparent 1px);background-size:44px 44px;transform:perspective(380px) rotateX(58deg);transform-origin:bottom;}
@keyframes scanline{0%{top:-4%}100%{top:104%}}@keyframes glitchText{0%,90%,100%{transform:none}92%{transform:translate(2px,-1px)}94%{transform:translate(-2px,1px)}96%{transform:skewX(3deg)}}
/* 主题 07：魔法少女 */
.theme-magical{--bg:#ffe7fb;--bg-2:#ede9fe;--card:rgba(255,255,255,.72);--card-strong:rgba(255,255,255,.94);--text:#5b255e;--muted:#936493;--primary:#ec4899;--secondary:#a855f7;--accent:#fef08a;--border:rgba(255,255,255,.7);--shadow:0 28px 86px rgba(236,72,153,.24);--button-text:#fff;}
.theme-magical .theme-background{background:radial-gradient(circle at 18% 18%,#fff 0 2%,transparent 12%),linear-gradient(135deg,#ffe4f7,#ede9fe,#fce7f3);}
.theme-magical .profile-card{border-style:double;border-width:4px;}
.theme-magical .decor-star{position:absolute;width:16px;height:16px;background:#fff;clip-path:polygon(50% 0,61% 36%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 36%);filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 18px #ec4899);animation:twinkle 2.4s ease-in-out infinite;}
.theme-magical .decor-heart{position:absolute;width:24px;height:22px;background:#f472b6;transform:rotate(-45deg);animation:heartFloat 7s ease-in-out infinite;}.theme-magical .decor-heart::before,.theme-magical .decor-heart::after{content:"";position:absolute;width:24px;height:22px;border-radius:50%;background:#f472b6}.theme-magical .decor-heart::before{top:-12px;left:0}.theme-magical .decor-heart::after{left:12px;top:0}
@keyframes twinkle{0%,100%{transform:scale(.65) rotate(0);opacity:.35}50%{transform:scale(1.2) rotate(90deg);opacity:1}}@keyframes heartFloat{0%,100%{transform:translateY(0) rotate(-45deg)}50%{transform:translateY(-34px) rotate(-35deg)}}
/* 主题 08：机甲战士 */
.theme-mecha{--bg:#15171d;--bg-2:#252a34;--card:rgba(32,36,45,.82);--card-strong:rgba(43,48,59,.96);--text:#f3f4f6;--muted:#a8b0bd;--primary:#f97316;--secondary:#ef4444;--accent:#facc15;--border:rgba(249,115,22,.38);--shadow:0 24px 72px rgba(249,115,22,.16);--button-text:#fff;--radius-card:12px;}
.theme-mecha .theme-background{background:linear-gradient(135deg,#111318,#252a34);}
.theme-mecha .theme-background::after{content:"";position:absolute;inset:0;background-image:linear-gradient(30deg,rgba(249,115,22,.05) 12%,transparent 12%,transparent 50%,rgba(249,115,22,.05) 50%,rgba(249,115,22,.05) 62%,transparent 62%);background-size:36px 62px;}
.theme-mecha .guide-button{clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);border-radius:0;text-transform:uppercase;}
.theme-mecha .decor-hud{position:absolute;border:1px solid rgba(249,115,22,.42);clip-path:polygon(0 0,100% 0,100% 20%,80% 20%,80% 100%,0 100%);animation:hudPulse 2s ease-in-out infinite;}
.theme-mecha .decor-mecha-dot{position:absolute;width:8px;height:8px;background:#f97316;box-shadow:0 0 18px #f97316;animation:hudPulse 1.4s ease-in-out infinite;}
@keyframes hudPulse{0%,100%{opacity:.32}50%{opacity:1}}
/* 主题 09：校园日常 */
.theme-campus{--bg:#dff4ff;--bg-2:#ffffff;--card:rgba(255,255,255,.82);--card-strong:#fff;--text:#25425f;--muted:#6b86a1;--primary:#38bdf8;--secondary:#60a5fa;--accent:#f59e0b;--border:rgba(56,189,248,.32);--shadow:0 28px 76px rgba(56,189,248,.18);--button-text:#fff;--font-display:"Comic Sans MS","Microsoft YaHei",cursive;}
.theme-campus .theme-background{background:linear-gradient(#dff4ff 0 62%,#fefce8 62%);}
.theme-campus .profile-card,.theme-campus .component-card,.theme-campus .button-group{background-image:linear-gradient(#fff 29px,#c7e6ff 30px);background-size:100% 30px;}
.theme-campus .guide-button{border:2px solid rgba(37,66,95,.12);transform:rotate(-.4deg);}
.theme-campus .decor-cloud{position:absolute;width:120px;height:42px;border-radius:999px;background:rgba(255,255,255,.82);filter:drop-shadow(0 8px 12px rgba(56,189,248,.12));animation:cloudMove linear infinite;}.theme-campus .decor-cloud::before,.theme-campus .decor-cloud::after{content:"";position:absolute;border-radius:50%;background:inherit}.theme-campus .decor-cloud::before{width:54px;height:54px;left:18px;top:-24px}.theme-campus .decor-cloud::after{width:68px;height:68px;right:18px;top:-34px}
@keyframes cloudMove{from{transform:translateX(-180px)}to{transform:translateX(calc(100vw + 180px))}}
/* 主题 10：暗黑幻想 */
.theme-darkfantasy{--bg:#110306;--bg-2:#22070c;--card:rgba(24,5,9,.82);--card-strong:rgba(38,8,13,.95);--text:#f8e7c6;--muted:#c3a980;--primary:#d4af37;--secondary:#991b1b;--accent:#fb923c;--border:rgba(212,175,55,.38);--shadow:0 28px 86px rgba(153,27,27,.22);--button-text:#190306;--radius-card:10px;}
.theme-darkfantasy .theme-background{background:radial-gradient(circle at 50% -10%,rgba(153,27,27,.42),transparent 42%),linear-gradient(135deg,#070102,#22070c);}
.theme-darkfantasy .profile-card,.theme-darkfantasy .component-card,.theme-darkfantasy .button-group{border-image:linear-gradient(45deg,#d4af37,#4b0b12,#d4af37) 1;}
.theme-darkfantasy .guide-button{background:linear-gradient(135deg,#d4af37,#7f1d1d);}
.theme-darkfantasy .decor-shadow{position:absolute;width:10px;height:10px;border-radius:50%;background:#d4af37;box-shadow:0 0 24px #991b1b;animation:shadowTrail 5s ease-in-out infinite;}
.theme-darkfantasy .decor-gothic{position:absolute;border:2px solid rgba(212,175,55,.26);border-radius:50% 50% 0 0;animation:gothicGlow 4s ease-in-out infinite;}
@keyframes shadowTrail{0%{transform:translate(0,0);opacity:0}20%{opacity:1}100%{transform:translate(var(--x,80px),var(--y,-120px));opacity:0}}@keyframes gothicGlow{50%{box-shadow:0 0 30px rgba(212,175,55,.28)}}
/* 主题 11：森林精灵 */
.theme-forest{--bg:#052e16;--bg-2:#14532d;--card:rgba(236,253,245,.78);--card-strong:rgba(255,255,255,.94);--text:#10331f;--muted:#4f6f5b;--primary:#16a34a;--secondary:#84cc16;--accent:#fbbf24;--border:rgba(22,163,74,.28);--shadow:0 30px 80px rgba(22,163,74,.22);--button-text:#fff;}
.theme-forest .theme-background{background:radial-gradient(circle at 70% 10%,rgba(132,204,22,.34),transparent 24%),linear-gradient(135deg,#064e3b,#bbf7d0);}
.theme-forest .guide-button{background:linear-gradient(135deg,#166534,#65a30d);}
.theme-forest .decor-leaf{position:absolute;width:22px;height:12px;background:linear-gradient(135deg,#22c55e,#84cc16);border-radius:100% 0 100% 0;filter:drop-shadow(0 5px 8px rgba(22,163,74,.22));animation:leafFall linear infinite;}
.theme-forest .decor-vine{position:absolute;width:160px;height:220px;border-left:4px solid rgba(22,163,74,.3);border-radius:50%;animation:vineSwing 5s ease-in-out infinite;}
@keyframes leafFall{0%{transform:translateY(-12vh) rotate(0)}100%{transform:translateY(112vh) translateX(var(--drift,50px)) rotate(540deg)}}@keyframes vineSwing{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(4deg)}}
/* 主题 12：星空幻想 */
.theme-starry{--bg:#020617;--bg-2:#0f172a;--card:rgba(15,23,42,.72);--card-strong:rgba(15,23,42,.94);--text:#eff6ff;--muted:#a5b4fc;--primary:#818cf8;--secondary:#38bdf8;--accent:#fef08a;--border:rgba(129,140,248,.34);--shadow:0 30px 90px rgba(56,189,248,.15);--button-text:#fff;}
.theme-starry .theme-background{background:radial-gradient(circle at 50% 20%,rgba(56,189,248,.18),transparent 32%),linear-gradient(135deg,#020617,#11104a);}
.theme-starry .decor-star-dot{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff;animation:starPulse 2.4s ease-in-out infinite;}
.theme-starry .decor-meteor{position:absolute;width:120px;height:2px;background:linear-gradient(90deg,transparent,#fff);transform:rotate(-25deg);animation:meteor 4s linear infinite;}
.theme-starry .decor-constellation{position:absolute;border-top:1px solid rgba(255,255,255,.32);transform-origin:left center;animation:starPulse 3.2s ease-in-out infinite;}
@keyframes starPulse{0%,100%{opacity:.28;transform:scale(.9)}50%{opacity:1;transform:scale(1.12)}}@keyframes meteor{0%{transform:translate(20vw,-10vh) rotate(-25deg);opacity:0}10%{opacity:1}100%{transform:translate(-70vw,70vh) rotate(-25deg);opacity:0}}
/* 主题 13：蒸汽波 */
.theme-vaporwave{--bg:#2d0052;--bg-2:#ff71ce;--card:rgba(255,255,255,.78);--card-strong:rgba(255,255,255,.94);--text:#2d0052;--muted:#7b4d8a;--primary:#ff71ce;--secondary:#01cdfe;--accent:#05ffa1;--border:rgba(255,255,255,.62);--shadow:0 28px 90px rgba(255,113,206,.24);--button-text:#fff;}
.theme-vaporwave .theme-background{background:linear-gradient(180deg,#2d0052 0,#7b2ff7 48%,#ff71ce 100%);}
.theme-vaporwave .decor-vapor-grid{position:absolute;left:-10%;right:-10%;bottom:-8%;height:45%;background-image:linear-gradient(rgba(5,255,161,.45) 2px,transparent 2px),linear-gradient(90deg,rgba(5,255,161,.45) 2px,transparent 2px);background-size:54px 54px;transform:perspective(420px) rotateX(62deg);transform-origin:bottom;animation:vhsJitter 2.2s steps(2,end) infinite;}
.theme-vaporwave .decor-statue{position:absolute;width:118px;height:160px;border-radius:60px 60px 18px 18px;background:linear-gradient(135deg,#fff,#d8c7ff);box-shadow:inset -18px 0 28px rgba(45,0,82,.16);opacity:.42;animation:statueFloat 6s ease-in-out infinite;}.theme-vaporwave .decor-statue::before{content:"";position:absolute;left:28px;top:-38px;width:62px;height:62px;border-radius:50%;background:inherit;}
.theme-vaporwave .profile-card{animation:vhsJitter 4s steps(2,end) infinite;}
@keyframes vhsJitter{0%,100%{transform:translateX(0)}50%{transform:translateX(1px)}}@keyframes statueFloat{50%{transform:translateY(-22px) rotate(2deg)}}
/* 主题 14：水彩水墨 */
.theme-ink{--bg:#f8f3e8;--bg-2:#ede3d1;--card:rgba(255,252,244,.82);--card-strong:rgba(255,252,244,.96);--text:#2d261c;--muted:#6f6251;--primary:#111827;--secondary:#8b5e34;--accent:#b91c1c;--border:rgba(45,38,28,.22);--shadow:0 28px 80px rgba(45,38,28,.1);--button-text:#fff;--font-display:"KaiTi","STKaiti","Microsoft YaHei",serif;}
.theme-ink .theme-background{background:#f8f3e8;}.theme-ink .theme-background::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(45,38,28,.08) 1px,transparent 1px);background-size:9px 9px;opacity:.7;}
.theme-ink .profile-card,.theme-ink .component-card,.theme-ink .button-group,.theme-ink .gallery-section{border-radius:4px;border:1px solid rgba(45,38,28,.24);}
.theme-ink .guide-button{background:linear-gradient(135deg,#111827,#8b5e34);border-radius:6px;}
.theme-ink .decor-ink-blob{position:absolute;width:160px;height:120px;border-radius:56% 44% 70% 30%;background:rgba(17,24,39,.12);filter:blur(1px);animation:inkSpread 8s ease-in-out infinite;}
.theme-ink .decor-brush-line{position:absolute;height:7px;background:linear-gradient(90deg,transparent,rgba(17,24,39,.32),transparent);border-radius:999px;animation:brushFlow 5s ease-in-out infinite;}
@keyframes inkSpread{0%,100%{transform:scale(.8) rotate(0);opacity:.08}50%{transform:scale(1.28) rotate(8deg);opacity:.2}}@keyframes brushFlow{0%{transform:scaleX(.2);opacity:.08}50%{transform:scaleX(1);opacity:.34}100%{transform:scaleX(.2);opacity:.08}}
@media (min-width: 768px){.component-grid{grid-template-columns:1fr 1fr}.guide-shell{padding-top:58px}.swiper-slide,.swiper-slide img{min-height:360px}.button-list.layout-tile .guide-button:nth-child(3n+1){grid-row:span 2}}
@media (min-width: 1024px){.guide-shell{padding-top:72px}.profile-card-inner{padding-inline:64px}.main-title{font-size:4.5rem}}
@media (max-width: 640px){.guide-shell{width:min(100% - 18px, 1120px);padding:24px 0 96px}.profile-card-inner{padding:24px 16px}.avatar-wrap{width:118px;height:118px}.avatar-img{width:102px;height:102px}.search-form{display:grid;grid-template-columns:108px 1fr 52px}.button-list.layout-grid{grid-template-columns:1fr !important}.button-list.layout-row{display:grid}.timeline-item{grid-template-columns:72px 1fr}.music-info,.sound-wave{display:none}.admin-shell{display:block}.admin-sidebar{position:relative;height:auto}.form-grid,.form-grid.cols-3{grid-template-columns:1fr}.admin-topbar{position:relative;margin:0 0 18px}.admin-main{padding:14px}.preview-frame{height:520px}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.theme-canvas,.theme-decor-root{display:none!important}}