/* ============================================================
   玩家画廊 v4 — 顶级视觉 + 顶级交互
   CSS-only effects: aurora, 3D cards, frames, progressive reveal
   ============================================================ */

/* ---- GALLERY CSS VARIABLES ---- */
:root {
  --frame-gold-1: #8b6914;    --frame-gold-2: #c9a334;    --frame-gold-3: #f0d060;
  --frame-silver-1: #4a5568;  --frame-silver-2: #718096;  --frame-silver-3: #c0c8d4;
  --frame-amber-1: #5c2d0e;   --frame-amber-2: #8b4513;   --frame-amber-3: #c47a38;
  --frame-ivory-1: #d4c9b8;   --frame-ivory-2: #ede4d8;   --frame-ivory-3: #faf7f2;
  --frame-onyx-1: #1a1a1a;    --frame-onyx-2: #2d2d2d;    --frame-onyx-3: #444;
  --gallery-ease: cubic-bezier(0.19, 1, 0.22, 1);
  --gallery-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --gallery-slow: 0.6s;
  --gallery-normal: 0.4s;
  --gallery-fast: 0.2s;
}

/* ============================================================
   V3: AURORA BACKGROUND
   ============================================================ */
.gallery-aurora {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.gallery-aurora-orb {
  position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%;
  filter: blur(120px); opacity: 0.08;
  animation: auroraDrift var(--dur, 18s) ease-in-out infinite;
}
.gallery-aurora-orb:nth-child(1) {
  --dur: 18s;
  background: radial-gradient(circle, var(--text-accent), transparent 70%);
  top: -20%; left: -10%;
}
.gallery-aurora-orb:nth-child(2) {
  --dur: 22s; animation-delay: -7s;
  background: radial-gradient(circle, #f472b6, transparent 70%);
  top: 40%; right: -15%; opacity: 0.06;
}
.gallery-aurora-orb:nth-child(3) {
  --dur: 20s; animation-delay: -13s;
  background: radial-gradient(circle, #818cf8, transparent 70%);
  bottom: -10%; left: 30%; opacity: 0.05;
}
@keyframes auroraDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(8vw, 4vh) scale(1.15); }
  50%  { transform: translate(-4vw, 10vh) scale(0.9); }
  75%  { transform: translate(-10vw, -2vh) scale(1.1); }
}

/* ---- LOGO LINK ---- */
.logo-link {
  font-size: 0.78rem; color: var(--text-secondary); text-decoration: none;
  padding: 4px 12px; border-radius: var(--radius-sm); transition: all var(--gallery-fast);
  border: 1px solid var(--glass-border); white-space: nowrap;
}
.logo-link:hover { color: var(--text-accent); background: var(--bg-elevated); }

/* ============================================================
   MUSEUM HERO
   ============================================================ */
.gallery-hero {
  max-width: 800px; margin: 24px auto 0; padding: 20px 24px;
  text-align: center; position: relative; z-index: 1;
}
.gallery-hero-arch { position: relative; padding: 32px 20px 20px; }
.gallery-hero-arch::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 220px; height: 90px; border: 2px solid var(--text-accent);
  border-bottom: none; border-radius: 120px 120px 0 0; opacity: 0.3;
}
.gallery-hero-title {
  font-size: 2.2rem; font-weight: 700; letter-spacing: 3px; margin-bottom: 6px;
  background: linear-gradient(135deg, var(--text-accent), #f472b6, #818cf8, var(--text-accent));
  background-size: 300% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: heroShimmer 4s ease-in-out infinite;
}
@keyframes heroShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.gallery-hero-desc { font-size: 0.88rem; color: var(--text-secondary); margin-bottom: 10px; font-style: italic; }
.gallery-hero-stats { font-size: 0.78rem; color: var(--text-muted); }
.gallery-hero-stats span { color: var(--text-accent); font-weight: 700; font-size: 1.1rem; transition: all var(--gallery-normal); }

/* ============================================================
   TOOLBAR: SEARCH + FILTER
   ============================================================ */
.gallery-toolbar {
  max-width: 1400px; margin: 0 auto 16px; padding: 0 16px;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  position: relative; z-index: 1;
}
.gallery-search {
  flex: 1; min-width: 180px; max-width: 360px; padding: 10px 16px; border-radius: 24px;
  font-size: 0.85rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.1); color: var(--text-primary);
  transition: all var(--gallery-normal); box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
}
.gallery-search:focus {
  outline: none; border-color: rgba(240,192,96,0.4);
  box-shadow: 0 0 20px rgba(240,192,96,0.1), inset 0 1px 3px rgba(0,0,0,0.08);
}
.gallery-sort {
  padding: 8px 12px; border-radius: 20px; font-size: 0.75rem; cursor: pointer;
  background: var(--bg-glass); border: 1px solid var(--glass-border);
  color: var(--text-secondary); backdrop-filter: blur(8px);
  transition: all var(--gallery-fast);
}
.gallery-sort:hover, .gallery-sort.active { color: var(--text-accent); border-color: rgba(240,192,96,0.3); }

.gallery-filter-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.gallery-filter-tag {
  padding: 5px 14px; border-radius: 16px; font-size: 0.72rem; font-weight: 500;
  cursor: pointer; border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03); color: var(--text-secondary);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: all var(--gallery-fast);
}
.gallery-filter-tag:hover { border-color: rgba(240,192,96,0.25); color: var(--text-accent); background: rgba(240,192,96,0.08); }
.gallery-filter-tag.active {
  background: rgba(240,192,96,0.18); border-color: rgba(240,192,96,0.4);
  color: var(--text-accent); font-weight: 600;
  box-shadow: 0 0 12px rgba(240,192,96,0.1);
}

/* ============================================================
   UPLOAD ZONE
   ============================================================ */
.upload-zone-wrapper { max-width: 600px; margin: 0 auto 32px; padding: 0 16px; position: relative; z-index: 1; }
.upload-zone {
  position: relative; border-radius: var(--radius-xl); cursor: pointer;
  transition: all var(--gallery-slow) var(--gallery-ease); min-height: 130px;
}
.upload-zone-glow {
  position: absolute; inset: -4px; border-radius: inherit;
  background: conic-gradient(from 0deg, transparent, rgba(240,192,96,0.2), transparent, rgba(240,192,96,0.2), transparent);
  filter: blur(10px); animation: uploadGlowSpin 5s linear infinite;
  opacity: 0; transition: opacity var(--gallery-slow); z-index: -1;
}
.upload-zone:hover .upload-zone-glow, .upload-zone.dragover .upload-zone-glow { opacity: 1; }
@keyframes uploadGlowSpin { to { transform: rotate(360deg); } }
.upload-zone-ring {
  position: absolute; inset: 0; border-radius: inherit;
  border: 2px dashed var(--glass-border); transition: all var(--gallery-slow);
}
.upload-zone:hover .upload-zone-ring, .upload-zone.dragover .upload-zone-ring {
  border-color: var(--text-accent); border-style: solid;
  box-shadow: 0 0 30px rgba(240,192,96,0.15), inset 0 0 30px rgba(240,192,96,0.05);
}
.upload-zone-inner {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; padding: 36px 20px; border-radius: inherit;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255,255,255,0.06), transparent),
              linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.upload-icon { font-size: 2.4rem; transition: transform var(--gallery-normal) var(--gallery-spring); }
.upload-zone:hover .upload-icon, .upload-zone.dragover .upload-icon { transform: scale(1.15) translateY(-4px); }
.upload-text { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.upload-main { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); }
.upload-sub { font-size: 0.72rem; color: var(--text-muted); }

/* Upload form */
.upload-form {
  margin-top: 14px; display: flex; gap: 16px; align-items: flex-start; padding: 16px;
  background: var(--bg-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
  animation: formSlideIn var(--gallery-normal) var(--gallery-ease);
}
@keyframes formSlideIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
.upload-preview-wrapper {
  position: relative; flex-shrink: 0; width: 120px; height: 120px;
  border-radius: var(--radius-md); overflow: hidden;
  border: 2px solid var(--glass-border); background: var(--bg-surface);
}
.upload-preview-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.upload-preview-remove {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,0.6); color: #fff; font-size: 0.7rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: none; transition: all var(--gallery-fast);
}
.upload-preview-remove:hover { background: var(--error); transform: scale(1.1); }
.upload-fields { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.upload-fields input[type=text] { width: 100%; padding: 8px 14px; font-size: 0.85rem; border-radius: var(--radius-md); }
#upload-as-name { font-family: 'Ma Shan Zheng', 'Zhi Mang Xing', 'KaiTi', cursive; font-size: 1.1rem; color: var(--text-accent); }

/* Upload progress */
.upload-progress-bar {
  width: 100%; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.08);
  overflow: hidden; margin-top: 8px;
}
.upload-progress-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--text-accent), #f472b6);
  width: 0%; transition: width 0.3s ease;
  animation: progressPulse 1.5s ease-in-out infinite;
}
@keyframes progressPulse {
  0%, 100% { opacity: 1; } 50% { opacity: 0.6; }
}

/* Upload ripple */
.upload-ripple {
  position: absolute; border-radius: 50%;
  border: 2px solid var(--text-accent);
  animation: rippleOut 0.8s ease-out forwards;
  pointer-events: none;
}
@keyframes rippleOut {
  0% { width: 0; height: 0; opacity: 0.8; }
  100% { width: 400px; height: 400px; margin-left: -200px; margin-top: -200px; opacity: 0; }
}

/* ============================================================
   V4: PROGRESSIVE IMAGE REVEAL
   ============================================================ */
.img-reveal {
  filter: blur(20px); opacity: 0;
  transform: scale(0.95);
  transition: filter 0.5s ease-out, opacity 0.5s ease-out, transform 0.6s var(--gallery-ease);
}
.img-reveal.loaded {
  filter: blur(0); opacity: 1; transform: scale(1);
}

/* ============================================================
   WATERFALL MASONRY
   ============================================================ */
.gallery-waterfall {
  max-width: 1400px; margin: 0 auto 40px; padding: 0 16px;
  position: relative; z-index: 1;
}
.gallery-waterfall-inner {
  column-count: 4; column-gap: 24px;
}
@media (max-width: 1100px) { .gallery-waterfall-inner { column-count: 3; } }
@media (max-width: 768px)  { .gallery-waterfall-inner { column-count: 2; column-gap: 14px; } }
@media (max-width: 480px)  { .gallery-waterfall-inner { column-count: 1; } }

.gallery-loading { text-align: center; padding: 80px; color: var(--text-secondary); font-size: 0.9rem; column-span: all; }
.gallery-waterfall-inner:empty::after {
  content: ''; display: block; column-span: all;
}

/* ---- SKELETON LOADING ---- */
.skeleton-card {
  break-inside: avoid; margin-bottom: 24px; border-radius: 6px;
  background: var(--bg-surface); overflow: hidden;
  animation: skeletonPulse 1.8s ease-in-out infinite;
  min-height: 200px;
}
@keyframes skeletonPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

/* ============================================================
   V1: ARTWORK CARD — 5 FRAME TYPES
   V2: 3D PERSPECTIVE SYSTEM
   ============================================================ */
.artwork-card {
  break-inside: avoid; margin-bottom: 24px;
  border-radius: 4px; cursor: pointer; overflow: visible;
  transition: transform var(--gallery-slow) var(--gallery-spring),
              box-shadow var(--gallery-slow) var(--gallery-ease);
  animation: cardFloatIn 0.6s var(--gallery-ease) both;
  position: relative;
  transform-style: preserve-3d;
  perspective: 800px;
}
.artwork-card:hover { z-index: 10; }

@keyframes cardFloatIn {
  from { opacity: 0; transform: translateY(40px) scale(0.88); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- FRAME: GOLD (浮金) ---- */
.artwork-card.frame-gold {
  background: linear-gradient(145deg, #6b4f12 0%, #8b6914 15%, #c9a334 35%, #f0d060 50%, #c9a334 65%, #8b6914 85%, #6b4f12 100%);
  box-shadow:
    0 4px 24px rgba(139,105,20,0.4),
    0 1px 3px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.12);
  padding: 12px;
}
.artwork-card.frame-gold::before {
  content: ''; position: absolute; inset: 3px; border-radius: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), transparent 30%, transparent 70%, rgba(0,0,0,0.15));
  pointer-events: none; z-index: 2;
}
.artwork-card.frame-gold::after {
  content: ''; position: absolute; inset: -6px; border-radius: 4px;
  background: radial-gradient(ellipse at 50% 30%, rgba(240,210,96,0.35), transparent 60%);
  opacity: 0; transition: opacity var(--gallery-slow); pointer-events: none; z-index: -1;
}
.artwork-card.frame-gold:hover {
  box-shadow: 0 24px 60px rgba(200,160,50,0.5), 0 0 50px rgba(240,210,100,0.25), 0 6px 16px rgba(0,0,0,0.4);
}
.artwork-card.frame-gold:hover::after { opacity: 1; }

/* ---- FRAME: SILVER (霜银) ---- */
.artwork-card.frame-silver {
  background: linear-gradient(145deg, #3a4450 0%, #4a5568 20%, #718096 45%, #c0c8d4 55%, #718096 70%, #4a5568 85%, #3a4450 100%);
  box-shadow:
    0 4px 20px rgba(74,85,104,0.4),
    0 1px 3px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.1);
  padding: 12px;
}
.artwork-card.frame-silver::before {
  content: ''; position: absolute; inset: 3px; border-radius: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.1), transparent 30%, transparent 70%, rgba(0,0,0,0.12));
  pointer-events: none; z-index: 2;
}
.artwork-card.frame-silver::after {
  content: ''; position: absolute; inset: -6px; border-radius: 4px;
  background: radial-gradient(ellipse at 50% 30%, rgba(180,195,215,0.3), transparent 60%);
  opacity: 0; transition: opacity var(--gallery-slow); pointer-events: none; z-index: -1;
}
.artwork-card.frame-silver:hover {
  box-shadow: 0 20px 52px rgba(120,140,170,0.5), 0 0 40px rgba(170,190,210,0.2), 0 6px 14px rgba(0,0,0,0.35);
}
.artwork-card.frame-silver:hover::after { opacity: 1; }

/* ---- FRAME: AMBER WOOD (琥珀木) ---- */
.artwork-card.frame-amber {
  background: linear-gradient(145deg, #3a1a08 0%, #5c2d0e 20%, #8b4513 40%, #b8652e 55%, #8b4513 70%, #5c2d0e 85%, #3a1a08 100%);
  box-shadow:
    0 4px 20px rgba(60,25,5,0.45),
    0 1px 3px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.06);
  padding: 12px;
}
.artwork-card.frame-amber::before {
  content: ''; position: absolute; inset: 3px; border-radius: 1px;
  background: linear-gradient(180deg, rgba(255,200,140,0.08), transparent 30%, transparent 70%, rgba(0,0,0,0.2));
  pointer-events: none; z-index: 2;
}
.artwork-card.frame-amber::after {
  content: ''; position: absolute; inset: -6px; border-radius: 4px;
  background: radial-gradient(ellipse at 50% 30%, rgba(180,100,50,0.3), transparent 60%);
  opacity: 0; transition: opacity var(--gallery-slow); pointer-events: none; z-index: -1;
}
.artwork-card.frame-amber:hover {
  box-shadow: 0 22px 56px rgba(100,40,10,0.55), 0 0 40px rgba(180,100,40,0.2), 0 6px 14px rgba(0,0,0,0.45);
}
.artwork-card.frame-amber:hover::after { opacity: 1; }

/* ---- FRAME: IVORY (象牙白) ---- */
.artwork-card.frame-ivory {
  background: linear-gradient(145deg, #c4b8a2 0%, #d4c9b8 20%, #ede4d8 45%, #faf7f2 55%, #ede4d8 70%, #d4c9b8 85%, #c4b8a2 100%);
  box-shadow:
    0 4px 16px rgba(0,0,0,0.1),
    0 1px 2px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.5);
  padding: 12px;
}
.artwork-card.frame-ivory::before {
  content: ''; position: absolute; inset: 3px; border-radius: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.4), transparent 30%, transparent 70%, rgba(0,0,0,0.06));
  pointer-events: none; z-index: 2;
}
.artwork-card.frame-ivory::after {
  content: ''; position: absolute; inset: -6px; border-radius: 4px;
  background: radial-gradient(ellipse at 50% 30%, rgba(255,255,255,0.3), transparent 60%);
  opacity: 0; transition: opacity var(--gallery-slow); pointer-events: none; z-index: -1;
}
.artwork-card.frame-ivory:hover {
  box-shadow: 0 16px 44px rgba(0,0,0,0.18), 0 0 30px rgba(230,220,200,0.4), 0 6px 12px rgba(0,0,0,0.1);
}
.artwork-card.frame-ivory:hover::after { opacity: 1; }

/* ---- FRAME: ONYX (暗曜黑) ---- */
.artwork-card.frame-onyx {
  background: linear-gradient(145deg, #0d0d0d 0%, #1a1a1a 20%, #2d2d2d 45%, #3d3d3d 55%, #2d2d2d 70%, #1a1a1a 85%, #0d0d0d 100%);
  box-shadow:
    0 4px 22px rgba(0,0,0,0.5),
    0 1px 3px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.04);
  padding: 12px;
}
.artwork-card.frame-onyx::before {
  content: ''; position: absolute; inset: 3px; border-radius: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 30%, transparent 70%, rgba(0,0,0,0.3));
  pointer-events: none; z-index: 2;
}
.artwork-card.frame-onyx::after {
  content: ''; position: absolute; inset: -6px; border-radius: 4px;
  background: radial-gradient(ellipse at 50% 30%, rgba(100,100,120,0.25), transparent 60%);
  opacity: 0; transition: opacity var(--gallery-slow); pointer-events: none; z-index: -1;
}
.artwork-card.frame-onyx:hover {
  box-shadow: 0 20px 52px rgba(0,0,0,0.7), 0 0 30px rgba(80,80,100,0.2), 0 6px 14px rgba(0,0,0,0.5);
}
.artwork-card.frame-onyx:hover::after { opacity: 1; }

/* ---- CARD INNER (image container) ---- */
.artwork-card-inner {
  position: relative; overflow: hidden;
  border-radius: 1px; z-index: 1;
  background: rgba(0,0,0,0.2);
  transform-style: preserve-3d;
}
.frame-ivory .artwork-card-inner { background: #f5f2ed; }

.artwork-card-img {
  width: 100%; display: block; transform: translateZ(30px);
  transition: transform 0.6s var(--gallery-ease), filter 0.5s ease;
}
.artwork-card:hover .artwork-card-img { transform: translateZ(30px) scale(1.06); filter: brightness(1.12); }

/* ---- GLARE LAYER (V2) ---- */
.artwork-card-glare {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  opacity: 0; transition: opacity var(--gallery-slow);
  border-radius: 1px; overflow: hidden;
}
.artwork-card:hover .artwork-card-glare { opacity: 1; }
.artwork-card-glare-inner {
  position: absolute; width: 200%; height: 200%; top: -50%; left: -50%;
  background: radial-gradient(circle 120px at var(--glare-x, 50%) var(--glare-y, 50%),
    rgba(255,255,255,0.18), rgba(255,255,255,0.04) 40%, transparent 60%);
}

/* ---- HOVER OVERLAY ---- */
.artwork-card-overlay {
  position: absolute; bottom: 12px; left: 12px; right: 12px;
  padding: 10px 14px; border-radius: 3px; z-index: 3;
  background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.9) 100%);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transform: translateY(calc(100% + 10px));
  transition: transform var(--gallery-normal) var(--gallery-ease);
  pointer-events: none;
}
.artwork-card:hover .artwork-card-overlay { transform: translateY(0); }
.frame-ivory .artwork-card-overlay {
  background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.96));
}
.artwork-card-overlay .artist-name {
  font-family: 'Ma Shan Zheng', 'Zhi Mang Xing', 'KaiTi', cursive;
  font-size: 1.05rem; letter-spacing: 1px; margin-bottom: 2px;
}
.frame-gold .artwork-card-overlay .artist-name, .frame-amber .artwork-card-overlay .artist-name { color: #f0d060; }
.frame-silver .artwork-card-overlay .artist-name { color: #e0e8f0; }
.frame-ivory .artwork-card-overlay .artist-name { color: #5d4e37; }
.frame-onyx .artwork-card-overlay .artist-name { color: #c0c0c0; }
.artwork-card-overlay .artwork-title { font-size: 0.7rem; color: rgba(255,255,255,0.65); margin-bottom: 3px; }
.artwork-card-overlay .artwork-likes { font-size: 0.68rem; color: rgba(255,255,255,0.5); }
.frame-ivory .artwork-card-overlay .artwork-title,
.frame-ivory .artwork-card-overlay .artwork-likes { color: rgba(0,0,0,0.45); }

/* ---- DRAGGING STATE (I3) ---- */
.artwork-card.dragging {
  z-index: 100; opacity: 0.95;
  transform: scale(1.05);
  box-shadow: 0 30px 70px rgba(0,0,0,0.6) !important;
  transition: none;
}
.artwork-card.drag-placeholder {
  opacity: 0.3; transform: scale(0.95);
  border: 2px dashed var(--text-accent);
  background: transparent !important;
  box-shadow: none !important;
}

/* ============================================================
   V7: EMPTY STATE — CSS ART
   ============================================================ */
.gallery-empty {
  text-align: center; padding: 80px 20px; column-span: all;
}
.gallery-empty-frame {
  display: inline-block; width: 140px; height: 180px;
  border: 8px solid;
  border-image: linear-gradient(135deg, #8b6914, #c9a334, #8b6914) 1;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3), inset 0 0 0 2px rgba(255,255,255,0.03);
  position: relative; margin-bottom: 20px;
  animation: emptyFloat 4s ease-in-out infinite;
  background:
    linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0) 55%),
    var(--bg-surface);
}
.gallery-empty-frame::after {
  content: '?'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 3rem; color: var(--text-muted); font-family: 'Ma Shan Zheng', 'KaiTi', serif;
}
@keyframes emptyFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-8px) rotate(0.5deg); }
  75% { transform: translateY(4px) rotate(-0.5deg); }
}
.gallery-empty-text { color: var(--text-secondary); font-size: 1rem; margin-bottom: 6px; }
.gallery-empty-sub { color: var(--text-muted); font-size: 0.8rem; }

/* ============================================================
   V5: LIGHTBOX — MUSEUM DISPLAY
   ============================================================ */
.gallery-lightbox {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s ease;
}
.gallery-lightbox.active { opacity: 1; pointer-events: auto; }

.lightbox-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}
html.light .lightbox-backdrop { background: rgba(0,0,0,0.78); }

/* Close button */
.lightbox-close {
  position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(ellipse 50% 30% at 50% 20%, rgba(255,255,255,0.12), transparent),
              linear-gradient(180deg, rgba(255,255,255,0.06), transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: #fff; font-size: 1.3rem; display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 10; border: 1px solid rgba(255,255,255,0.15);
  transition: all var(--gallery-normal);
}
.lightbox-close:hover { background: rgba(255,80,80,0.4); transform: rotate(90deg); }

/* Nav buttons */
.lightbox-prev, .lightbox-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 50px; height: 50px; border-radius: 50%;
  background: radial-gradient(ellipse 50% 30% at 50% 20%, rgba(255,255,255,0.1), transparent),
              linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #fff; font-size: 1.8rem; display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 10; border: 1px solid rgba(255,255,255,0.12);
  transition: all var(--gallery-fast);
}
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
.lightbox-prev:hover, .lightbox-next:hover {
  background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.3);
  box-shadow: 0 6px 24px rgba(0,0,0,0.4); transform: translateY(-50%) scale(1.1);
}

/* Content */
.lightbox-content {
  position: relative; z-index: 5; display: flex; flex-direction: column; align-items: center;
  gap: 16px; max-width: 92vw; max-height: 94vh;
}
.lightbox-frame {
  position: relative; padding: 20px;
  background: linear-gradient(145deg, #6b4f12 0%, #8b6914 15%, #c9a334 35%, #f0d060 50%, #c9a334 65%, #8b6914 85%, #6b4f12 100%);
  border-radius: 2px;
  box-shadow:
    0 30px 100px rgba(0,0,0,0.8),
    0 0 80px rgba(240,192,96,0.2),
    0 0 0 1px rgba(255,255,255,0.05),
    inset 0 0 0 5px rgba(255,255,255,0.04),
    inset 0 1px 0 rgba(255,255,255,0.08);
  transition: transform var(--gallery-normal) var(--gallery-spring);
  cursor: zoom-in;
}
.lightbox-frame.zoomed { cursor: zoom-out; }
.lightbox-frame img {
  max-width: 80vw; max-height: 68vh; object-fit: contain;
  display: block; border-radius: 1px;
  transition: transform var(--gallery-normal) var(--gallery-spring);
  user-select: none; -webkit-user-drag: none;
}
.lightbox-frame img.zoomed { transform: scale(var(--zoom, 1.5)); }

/* Info bar */
.lightbox-info {
  text-align: center; color: #fff;
  background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(255,255,255,0.08), transparent);
  padding: 12px 24px; border-radius: 16px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
}
.lightbox-info h3 { font-size: 1rem; font-weight: 600; margin-bottom: 2px; }
.lightbox-artist { font-family: 'Ma Shan Zheng','Zhi Mang Xing','KaiTi',cursive; font-size: 1.5rem; color: var(--text-accent); margin: 2px 0 6px; }
.lightbox-meta { display: flex; gap: 14px; justify-content: center; font-size: 0.7rem; color: rgba(255,255,255,0.5); flex-wrap: wrap; }
.lightbox-actions { display: flex; gap: 10px; justify-content: center; margin-top: 4px; }
.lightbox-actions .btn-tonal.liked {
  background: rgba(240,192,96,0.25); border-color: var(--text-accent);
  color: var(--text-accent); animation: likePop var(--gallery-spring) 0.4s;
}
@keyframes likePop {
  0% { transform: scale(1); }
  40% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* Swipe-down close hint */
.lightbox-swipe-hint {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 5px; border-radius: 3px;
  background: rgba(255,255,255,0.3); z-index: 20;
  opacity: 0; transition: opacity 0.3s;
}
@media (max-width: 768px) { .lightbox-swipe-hint { opacity: 1; } }

/* ============================================================
   INFINITE SCROLL TRIGGER
   ============================================================ */
.gallery-scroll-sentinel {
  height: 1px; width: 100%; column-span: all;
}

/* ============================================================
   LOGIN DRAWER
   ============================================================ */
.login-drawer-overlay {
  position: fixed; inset: 0; z-index: 1500;
  opacity: 0; pointer-events: none; transition: opacity 0.35s;
}
.login-drawer-overlay.active { opacity: 1; pointer-events: auto; }
.login-drawer-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.login-drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: 390px; max-width: 94vw;
  background: radial-gradient(ellipse 60% 20% at 50% 0%, rgba(255,255,255,0.06), transparent 70%),
              linear-gradient(180deg, rgba(17,24,39,0.98) 0%, rgba(17,24,39,0.95) 100%);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-left: 1px solid var(--glass-border);
  box-shadow: -10px 0 50px rgba(0,0,0,0.5);
  transform: translateX(100%); transition: transform 0.45s var(--gallery-ease);
  overflow-y: auto; overscroll-behavior: contain;
}
.login-drawer-overlay.active .login-drawer { transform: translateX(0); }
html.light .login-drawer {
  background: radial-gradient(ellipse 60% 20% at 50% 0%, rgba(255,255,255,0.15), transparent 70%),
              linear-gradient(180deg, rgba(245,246,248,0.98) 0%, rgba(245,246,248,0.95) 100%);
}
.login-drawer-close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(128,128,128,0.12); color: var(--text-primary); font-size: 1rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  z-index: 5; border: none; transition: all var(--gallery-fast);
}
.login-drawer-close:hover { background: rgba(255,80,80,0.3); transform: rotate(90deg); }
.login-drawer-inner { padding: 50px 24px 24px; }

/* Tabs */
.login-tabs { display: flex; gap: 0; border-radius: 22px; overflow: hidden; border: 1px solid var(--glass-border); margin-bottom: 20px; }
.login-tab {
  flex: 1; padding: 9px 0; font-size: 0.8rem; font-weight: 500; text-align: center;
  cursor: pointer; transition: all var(--gallery-fast); background: transparent; color: var(--text-secondary); border: none;
}
.login-tab.active { background: var(--text-accent); color: var(--on-accent); font-weight: 600; }
.login-tab:not(.active):hover { background: var(--bg-elevated); }

/* Forms */
.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-field { display: flex; flex-direction: column; gap: 4px; }
.login-field label { font-size: 0.78rem; color: var(--text-secondary); font-weight: 500; }
.login-field input, .login-field select {
  padding: 10px 14px; font-size: 0.85rem; border-radius: var(--radius-md);
  background: var(--bg-elevated); color: var(--text-primary);
  border: 1px solid var(--glass-border);
}
.login-field input:focus, .login-field select:focus {
  outline: none; border-color: rgba(240,192,96,0.35);
}
.login-field-hint { font-size: 0.65rem; color: var(--text-muted); margin-top: 2px; }
.login-submit { width: 100%; margin-top: 4px; }
.login-hint { font-size: 0.72rem; text-align: center; min-height: 18px; transition: color var(--gallery-fast); }
.login-hint.error { color: var(--error); }
.login-hint.success { color: #4caf50; }

/* Logged-in card */
.logged-in-card { text-align: center; padding: 24px 0; }
.logged-in-avatar { font-size: 3.2rem; margin-bottom: 10px; animation: avatarFloat 3s ease-in-out infinite; }
@keyframes avatarFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.logged-in-card h3 { font-family: 'Ma Shan Zheng','Zhi Mang Xing','KaiTi',cursive; font-size: 1.7rem; color: var(--text-accent); }
.logged-in-status { font-size: 0.78rem; color: var(--text-muted); margin: 6px 0 16px; }

/* Recover */
.recover-question { font-size: 0.9rem; color: var(--text-primary); text-align: center; margin-bottom: 10px; line-height: 1.6; }
.recover-question strong { color: var(--text-accent); font-size: 1.1rem; }
.recover-success { text-align: center; font-size: 1.2rem; margin-bottom: 10px; }

/* ============================================================
   TOAST
   ============================================================ */
#toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 3000;
  display: flex; flex-direction: column-reverse; gap: 8px;
  pointer-events: none;
}
.gallery-toast {
  padding: 11px 20px; border-radius: var(--radius-md);
  background: var(--bg-glass); border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-size: 0.82rem; color: var(--text-primary); pointer-events: auto;
  animation: toastSlideIn 0.35s var(--gallery-spring);
  box-shadow: var(--elevation-3);
  transition: all var(--gallery-fast);
}
.gallery-toast.removing { opacity: 0; transform: translateX(40px); }
.gallery-toast.error { border-color: var(--error); color: var(--error); }
.gallery-toast.success { border-color: #4caf50; color: #4caf50; }
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(40px) scale(0.9); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* ============================================================
   V8: THEME TRANSITION
   ============================================================ */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .gallery-hero-title { font-size: 1.5rem; }
  .gallery-hero-arch::before { width: 150px; height: 60px; }
  .gallery-toolbar { flex-direction: column; align-items: stretch; }
  .gallery-search { max-width: none; }
  .gallery-filter-tags { justify-content: center; }
  .upload-form { flex-direction: column; align-items: center; }
  .upload-preview-wrapper { width: 160px; height: 160px; }
  .lightbox-frame { padding: 12px; }
  .lightbox-frame img { max-width: 90vw; max-height: 55vh; }
  .lightbox-prev, .lightbox-next { width: 38px; height: 38px; font-size: 1.3rem; }
  .lightbox-prev { left: 6px; } .lightbox-next { right: 6px; }
  .artwork-card-overlay { transform: translateY(0); opacity: 0.88; }
  /* 移动端禁用3D悬浮 */
  .artwork-card:hover .artwork-card-img { transform: none; filter: none; }
  .artwork-card-glare { display: none; }
}

@media (max-width: 480px) {
  .gallery-hero { padding: 12px; }
  .gallery-hero-title { font-size: 1.3rem; letter-spacing: 1px; }
  .upload-zone-inner { padding: 24px 14px; }
  .upload-icon { font-size: 2rem; }
  .lightbox-info { padding: 10px 16px; }
  .login-drawer { width: 100vw; max-width: 100vw; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .gallery-aurora-orb { animation: none; }
  .artwork-card { animation: none; }
  .artwork-card:hover .artwork-card-img { transform: none; filter: none; }
  .artwork-card:hover { transform: translateY(-3px); }
  .gallery-hero-title { animation: none; }
  .gallery-empty-frame { animation: none; }
  .logged-in-avatar { animation: none; }
}