/* ============================================================
   PIXEL.HOME - 科幻风 Cyberpunk HUD Theme
   覆盖 pixel.css 视觉效果 · 布局保留 · 霓虹发光 · 玻璃态
   ============================================================ */

/* ---------- CSS 变量覆盖 ---------- */
:root {
  --z-bg: #060d18;
  --z-bg-light: #0a1222;
  --z-bg-card: rgba(10, 18, 34, 0.85);
  --z-bg-input: rgba(4, 8, 16, 0.95);
  --z-magenta: #f43f5e;
  --z-magenta-dim: #9f1239;
  --z-cyan: #00d4ff;
  --z-cyan-dim: #008099;
  --z-purple: #8b5cf6;
  --z-purple-dim: #5b21b6;
  --z-border: rgba(30, 45, 65, 0.8);
  --z-border-hover: rgba(0, 212, 255, 0.3);
  --z-text: #e0e7f0;
  --z-text-dim: #5a6880;
  --z-glow-magenta: rgba(244, 63, 94, 0.25);
  --z-glow-cyan: rgba(0, 212, 255, 0.3);
  --z-glow-purple: rgba(139, 92, 246, 0.2);
  --z-shadow: rgba(0, 0, 0, 0.4);
  --font-pixel: 'Orbitron', sans-serif;
  --font-body: 'Rajdhani', 'Segoe UI', sans-serif;
}

/* ---------- 背景 ---------- */
body {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(0, 212, 255, 0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(139, 92, 246, 0.05) 0%, transparent 50%),
    #080d16;
  font-family: var(--font-body);
  font-size: 1.25rem;
  text-rendering: optimizeLegibility;
  image-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 扫描线+六边形网格 ---------- */
body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,212,255,0.015) 2px, rgba(0,212,255,0.015) 3px);
  pointer-events: none; z-index: 9999;
  mix-blend-mode: normal;
}

body::after {
  content: '';
  position: fixed; inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 0h30l15 26-15 26H15L0 26z' fill='none' stroke='rgba(0,212,255,0.04)' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  pointer-events: none; z-index: 9997;
  opacity: 0.6;
}

.scanlines { display: none !important; }

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar-track { background: #080d16; }
::-webkit-scrollbar-thumb { background: var(--z-cyan-dim); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--z-cyan); }

/* ---------- 卡片 ---------- */
.pixel-card {
  background: var(--z-bg-card);
  border: 1px solid var(--z-border);
  border-radius: 10px;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}
.pixel-card::before { display: none !important; }
.pixel-card:hover {
  border-color: var(--z-cyan-dim);
  box-shadow: 0 0 20px var(--z-glow-cyan), 0 8px 32px rgba(0,0,0,0.4);
  transform: translateY(-2px);
}

/* ---------- 按钮 ---------- */
.pixel-btn {
  font-family: var(--font-pixel);
  font-size: 0.72rem;
  padding: 10px 18px;
  background: rgba(10, 18, 34, 0.8);
  color: var(--z-cyan);
  border: 1px solid var(--z-cyan-dim);
  border-radius: 6px;
  letter-spacing: 1.5px;
  backdrop-filter: blur(8px);
  transition: all 0.25s;
  text-shadow: 0 0 8px var(--z-glow-cyan);
  box-shadow: none;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
}
.pixel-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,0.08), transparent);
  transition: left 0.4s;
}
.pixel-btn:hover { border-color: var(--z-cyan); color: #fff; box-shadow: 0 0 15px var(--z-glow-cyan), inset 0 0 10px rgba(0,212,255,0.08); text-shadow: 0 0 12px var(--z-glow-cyan); }
.pixel-btn:hover::before { left: 100%; }
.pixel-btn:active { transform: scale(0.97); background: rgba(0, 212, 255, 0.12); }
.pixel-btn.btn-sm { font-size: 0.6rem; padding: 6px 12px; }
.pixel-btn.active { background: rgba(0, 212, 255, 0.12); border-color: var(--z-cyan); color: #fff; box-shadow: 0 0 15px var(--z-glow-cyan); }
.pixel-btn.btn-danger { border-color: rgba(244,63,94,0.4); color: var(--z-magenta); }
.pixel-btn.btn-danger:hover { border-color: var(--z-magenta); box-shadow: 0 0 15px var(--z-glow-magenta); color: #fff; }
.pixel-btn.btn-secondary { background: transparent; border-color: var(--z-border); color: var(--z-text-dim); }
.pixel-btn.btn-secondary:hover { border-color: var(--z-cyan-dim); color: var(--z-cyan); box-shadow: 0 0 10px var(--z-glow-cyan); }
.pixel-btn.btn-primary { background: rgba(0,212,255,0.1); border-color: var(--z-cyan); color: #fff; }
.logout-btn { background: transparent !important; border-color: var(--z-magenta-dim) !important; color: var(--z-magenta-dim) !important; font-size: 0.45rem !important; }
.logout-btn:hover { border-color: var(--z-magenta) !important; color: var(--z-magenta) !important; box-shadow: 0 0 10px var(--z-glow-magenta) !important; }

/* ---------- 输入框 ---------- */
.pixel-input, .pixel-select, .pixel-textarea {
  background: var(--z-bg-input) !important;
  color: var(--z-cyan) !important;
  border: 1px solid var(--z-border) !important;
  border-radius: 6px !important;
  font-family: var(--font-body);
  font-size: 1.1rem;
  padding: 10px 14px;
  transition: all 0.2s;
  box-shadow: none !important;
  text-shadow: none !important;
}
.pixel-input:focus, .pixel-select:focus, .pixel-textarea:focus {
  border-color: var(--z-cyan) !important;
  box-shadow: 0 0 12px var(--z-glow-cyan) !important;
}
.pixel-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%2300d4ff' stroke-width='1.5'/%3E%3C/svg%3E") !important;
}

/* ---------- 导航 ---------- */
.pixel-header {
  background: rgba(6, 13, 24, 0.9) !important;
  border-bottom: 1px solid rgba(0, 212, 255, 0.15) !important;
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 20px rgba(0, 212, 255, 0.06) !important;
}
.logo { font-family: var(--font-pixel); font-size: 0.7rem; color: var(--z-cyan); text-shadow: 0 0 15px var(--z-glow-cyan); letter-spacing: 2px; }
.logo-accent { color: var(--z-purple); text-shadow: 0 0 10px var(--z-glow-purple); }
.nav-btn { font-family: var(--font-pixel) !important; font-size: 0.48rem !important; letter-spacing: 1px !important; }
.nav-btn::after { content: ''; position: absolute; bottom: 2px; left: 20%; right: 20%; height: 2px; background: var(--z-cyan); border-radius: 1px; transform: scaleX(0); transition: transform 0.3s; }
.nav-btn:hover::after, .nav-btn.active::after { transform: scaleX(1); box-shadow: 0 0 8px var(--z-glow-cyan); }
.nav-btn:hover { border-color: var(--z-cyan-dim); color: var(--z-cyan); box-shadow: 0 0 8px var(--z-glow-cyan); }
.nav-btn.active { border-color: var(--z-cyan); color: var(--z-cyan); background: rgba(0,212,255,0.08); box-shadow: 0 0 12px var(--z-glow-cyan); }

/* ---------- 首页 ---------- */
.profile-card { border-color: var(--z-border) !important; border-image: linear-gradient(135deg, var(--z-cyan-dim), transparent, var(--z-purple-dim)) 1 !important; border-radius: 10px !important; box-shadow: 0 0 40px rgba(0, 212, 255, 0.06), 0 0 80px rgba(139, 92, 246, 0.04) !important; }
.profile-card::before { border-color: transparent !important; box-shadow: none !important; }
.profile-avatar { border-radius: 50% !important; border: 2px solid var(--z-cyan) !important; box-shadow: 0 0 20px var(--z-glow-cyan) !important; }
.avatar-frame { border-radius: 50% !important; border: 1px solid var(--z-purple) !important; animation: sciRotate 12s linear infinite !important; }
@keyframes sciRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.profile-name { font-family: var(--font-pixel) !important; font-size: 0.9rem !important; color: var(--z-cyan) !important; text-shadow: 0 0 15px var(--z-glow-cyan) !important; letter-spacing: 3px !important; }
.profile-bio { font-family: var(--font-pixel) !important; font-size: 0.4rem !important; color: var(--z-text-dim) !important; letter-spacing: 2px !important; }
.profile-stats { background: rgba(0,0,0,0.2) !important; border: 1px solid var(--z-border) !important; border-radius: 8px !important; }
.stat-num { font-family: var(--font-pixel) !important; color: var(--z-cyan) !important; text-shadow: 0 0 10px var(--z-glow-cyan) !important; }
.stat-label { font-family: var(--font-pixel) !important; font-size: 0.38rem !important; color: var(--z-text-dim) !important; }
.pixel-badge { font-family: var(--font-pixel) !important; font-size: 0.35rem !important; border-radius: 4px !important; border-color: var(--z-cyan-dim) !important; color: var(--z-cyan-dim) !important; background: rgba(0,212,255,0.05) !important; }

/* ---------- 模块标题 ---------- */
.module-header { border-bottom: 1px solid var(--z-border) !important; }
.module-header::after { background: linear-gradient(90deg, transparent, var(--z-cyan), var(--z-purple), var(--z-cyan), transparent) !important; box-shadow: 0 0 10px var(--z-glow-cyan) !important; }
.pixel-title { font-family: var(--font-pixel) !important; font-size: 0.75rem !important; color: var(--z-cyan) !important; text-shadow: 0 0 15px var(--z-glow-cyan) !important; letter-spacing: 4px !important; }
.pixel-subtitle { color: var(--z-text-dim) !important; font-family: var(--font-body) !important; }

/* ---------- 工具栏 ---------- */
.toolbar { background: rgba(0,0,0,0.2) !important; border: 1px solid var(--z-border) !important; border-radius: 8px !important; }

/* ---------- 相册 ---------- */
.album-card { border: 1px solid var(--z-border) !important; border-radius: 10px !important; background: var(--z-bg-card) !important; overflow: hidden !important; }
.album-card:hover { border-color: var(--z-cyan) !important; box-shadow: 0 0 20px var(--z-glow-cyan) !important; }
.album-card-cover { border-bottom: 1px solid var(--z-border) !important; }
.album-card-name { font-family: var(--font-pixel) !important; font-size: 0.5rem !important; color: var(--z-cyan) !important; }
.album-card-count { font-family: var(--font-pixel) !important; font-size: 0.35rem !important; }
.photo-view-header { background: rgba(0,0,0,0.2) !important; border: 1px solid var(--z-border) !important; border-left: 3px solid var(--z-cyan) !important; border-radius: 8px !important; }
.photo-view-title { font-family: var(--font-pixel) !important; font-size: 0.58rem !important; color: var(--z-cyan) !important; }
.photo-count-label { font-family: var(--font-pixel) !important; font-size: 0.4rem !important; background: rgba(0,212,255,0.08) !important; border: 1px solid var(--z-cyan-dim) !important; border-radius: 4px !important; color: var(--z-cyan) !important; }
.upload-zone { border: 1px dashed var(--z-border) !important; border-radius: 10px !important; background: rgba(0,0,0,0.2) !important; }
.upload-zone:hover, .upload-zone.drag-over { border-color: var(--z-cyan) !important; box-shadow: 0 0 20px var(--z-glow-cyan) !important; background: rgba(0, 212, 255, 0.02) !important; }
.upload-zone:hover .upload-icon { color: var(--z-cyan) !important; text-shadow: 0 0 10px var(--z-glow-cyan) !important; }
.album-item { border: 1px solid var(--z-border) !important; border-radius: 6px !important; overflow: hidden !important; }
.album-item:hover { border-color: var(--z-cyan) !important; box-shadow: 0 0 15px var(--z-glow-cyan) !important; }
.album-item.selected { border-color: var(--z-cyan) !important; box-shadow: 0 0 20px var(--z-glow-cyan) !important; }
.album-item-check { border-radius: 4px !important; border-color: var(--z-cyan-dim) !important; }
.album-item.selected .album-item-check { background: var(--z-cyan) !important; border-color: var(--z-cyan) !important; color: #000 !important; }
.album-move-item { border: 1px solid var(--z-border) !important; border-radius: 6px !important; font-family: var(--font-pixel) !important; font-size: 0.45rem !important; background: var(--z-bg-card) !important; }
.album-move-item:hover { border-color: var(--z-cyan) !important; box-shadow: 0 0 12px var(--z-glow-cyan) !important; }
.empty-hint { border: 1px dashed var(--z-border) !important; border-radius: 8px !important; background: rgba(0,0,0,0.1) !important; font-family: var(--font-pixel) !important; font-size: 0.45rem !important; }

/* ---------- 弹窗 ---------- */
.pixel-modal-backdrop { background: rgba(6, 13, 24, 0.9) !important; backdrop-filter: blur(8px) !important; }
.pixel-modal-content {
  background: rgba(10, 18, 34, 0.95) !important;
  border: 1px solid var(--z-cyan-dim) !important;
  border-radius: 10px !important;
  box-shadow: 0 0 40px rgba(0, 212, 255, 0.08), 0 10px 40px rgba(0,0,0,0.5) !important;
  backdrop-filter: blur(16px) !important;
  animation: modalIn 0.25s ease-out forwards !important;
}
.pixel-modal-close { border-radius: 6px !important; border-color: var(--z-border) !important; color: var(--z-text-dim) !important; font-family: var(--font-pixel) !important; }
.pixel-modal-close:hover { background: var(--z-magenta) !important; border-color: var(--z-magenta) !important; color: #fff !important; box-shadow: 0 0 12px var(--z-glow-magenta) !important; transform: rotate(90deg) !important; }
.pixel-modal-content h3 { font-family: var(--font-pixel) !important; font-size: 0.6rem !important; color: var(--z-cyan) !important; text-shadow: 0 0 10px var(--z-glow-cyan) !important; }
#albumPreviewImg { border: 1px solid var(--z-border) !important; border-radius: 4px !important; }

/* ---------- 笔记 ---------- */
.note-card { border: 1px solid var(--z-border) !important; border-radius: 6px !important; background: var(--z-bg-card) !important; }
.note-card:hover { border-color: var(--z-cyan) !important; box-shadow: 0 0 12px var(--z-glow-cyan) !important; }
.note-card-title { font-family: var(--font-pixel) !important; font-size: 0.5rem !important; color: var(--z-cyan) !important; }
.note-tag { font-family: var(--font-pixel) !important; font-size: 0.38rem !important; border-radius: 4px !important; border-color: var(--z-cyan-dim) !important; color: var(--z-cyan) !important; background: rgba(0,212,255,0.04) !important; }

/* ---------- 书签 ---------- */
.bookmark-card { border: 1px solid var(--z-border) !important; border-radius: 6px !important; background: var(--z-bg-card) !important; }
.bookmark-card:hover { border-color: var(--z-cyan) !important; box-shadow: 0 0 12px var(--z-glow-cyan) !important; }
.bookmark-card.selected { border-color: var(--z-cyan) !important; box-shadow: 0 0 20px var(--z-glow-cyan) !important; }
.bookmark-name { font-family: var(--font-pixel) !important; font-size: 0.52rem !important; color: var(--z-cyan) !important; }
.bookmark-group-tag { font-family: var(--font-pixel) !important; font-size: 0.32rem !important; border-radius: 3px !important; }
.bookmark-check { border-radius: 4px !important; border-color: var(--z-cyan-dim) !important; }
.bookmark-card.selected .bookmark-check { background: var(--z-cyan) !important; border-color: var(--z-cyan) !important; }

/* ---------- 设置 ---------- */
.settings-card { border: 1px solid var(--z-border) !important; border-radius: 10px !important; background: var(--z-bg-card) !important; }
.settings-card h3 { font-family: var(--font-pixel) !important; font-size: 0.52rem !important; color: var(--z-cyan) !important; text-shadow: 0 0 8px var(--z-glow-cyan) !important; }
.theme-color { border-radius: 6px !important; border-color: var(--z-border) !important; }
.theme-color:hover, .theme-color.active { border-color: var(--z-cyan) !important; box-shadow: 0 0 15px var(--z-glow-cyan) !important; }

/* ---------- 登录 ---------- */
.login-overlay { background: radial-gradient(ellipse at 50% 40%, rgba(0, 212, 255, 0.08) 0%, transparent 60%), #080d16 !important; }
.login-card { background: var(--z-bg-card) !important; border: 1px solid var(--z-cyan-dim) !important; border-radius: 10px !important; box-shadow: 0 0 60px rgba(0, 212, 255, 0.08) !important; backdrop-filter: blur(16px) !important; }
.login-icon { color: var(--z-cyan) !important; text-shadow: 0 0 30px var(--z-glow-cyan) !important; animation: sciPulse 2s ease-in-out infinite !important; }
@keyframes sciPulse { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
.login-card .pixel-title { font-family: var(--font-pixel) !important; color: var(--z-cyan) !important; font-size: 0.75rem !important; }
.login-subtitle { font-family: var(--font-pixel) !important; font-size: 0.38rem !important; color: var(--z-text-dim) !important; }
.login-label { font-family: var(--font-pixel) !important; font-size: 0.45rem !important; color: var(--z-cyan) !important; text-shadow: 0 0 8px var(--z-glow-cyan) !important; }
.login-error { font-family: var(--font-pixel) !important; font-size: 0.4rem !important; color: var(--z-magenta) !important; }
.login-btn { font-size: 0.65rem !important; }

/* ---------- Toast ---------- */
.pixel-toast {
  background: var(--z-bg-card) !important;
  border: 1px solid var(--z-cyan) !important;
  border-radius: 6px !important;
  box-shadow: 0 0 20px var(--z-glow-cyan) !important;
  font-family: var(--font-pixel) !important;
  font-size: 0.45rem !important;
  color: var(--z-cyan) !important;
  backdrop-filter: blur(12px) !important;
}

/* ---------- 页脚 ---------- */
.pixel-footer { border-top: 1px solid var(--z-border) !important; font-family: var(--font-pixel) !important; font-size: 0.38rem !important; color: var(--z-text-dim) !important; }

/* ---------- 转场 ---------- */
.glitch-overlay.active { animation: sciFade 0.3s ease forwards !important; }
@keyframes sciFade { 0% { opacity: 0; background: #080d16; } 50% { opacity: 0.9; background: var(--z-cyan); } 100% { opacity: 0; background: #080d16; } }

/* ---------- 主题切换按钮 ---------- */
#themeToggleBtn { font-family: var(--font-pixel) !important; border-radius: 6px !important; }

/* ---------- logo::before ---------- */
.logo::before { animation: sciPulse 2s ease-in-out infinite !important; }

/* 禁用像素风专属动画 */
@keyframes katanaShake { 0%,100%{transform:none} }
@keyframes vhsFlicker { 0%,100%{opacity:1} }
@keyframes crtOn { 0%{opacity:0;transform:scale(.98)}100%{opacity:1;transform:scale(1)} }
@keyframes crtOff { 0%{opacity:1}100%{opacity:0} }
@keyframes loginErrorShake { 0%,100%{transform:translateX(0)} }
@keyframes glitchFlicker { 0%,100%{opacity:1} }
@keyframes avatarPulse { 0%,100%{} }
@keyframes iconBreath { 0%,100%{} }
@keyframes rotate { 0%{}100%{} }

/* ---------- 响应式 ---------- */
@media (max-width: 768px) {
  .pixel-nav { background: rgba(6, 13, 24, 0.95) !important; backdrop-filter: blur(16px) !important; }
}
@media (max-width: 480px) {
  body { font-size: 1.15rem !important; }
  .logo-text { font-size: 0.55rem !important; }
}