/* =====================================================================
   Image Uploader App — Main Stylesheet
   Theme: Dark Glassmorphism · Animated Blob Backgrounds · Glow Effects
   ===================================================================== */

/* ─── Fonts & Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  background: var(--bg-base);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background .6s ease;
}
body.intro-active {
  height: 100svh;
  overflow: hidden;
}

/* ─── CSS Custom Properties ─────────────────────────────────────────── */
:root {
  --text-primary:   #f0eeff;
  --text-secondary: rgba(240,238,255,.65);
  --text-muted:     rgba(240,238,255,.38);
  --accent:         #a78bfa;
  --accent-2:       #38bdf8;
  --danger:         #f87171;
  --success:        #34d399;
  --warning:        #fbbf24;

  --glass:          rgba(255,255,255,.085);
  --glass-hover:    rgba(255,255,255,.14);
  --glass-border:   rgba(255,255,255,.15);
  --glass-shadow:   0 14px 38px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.1);

  --glass-inset:    rgba(0,0,0,.25);
  --glass-inset-border: rgba(255,255,255,.06);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  --blur-amount: 20px;
  --glow-opacity: 0.42;

  /* Transition */
  --t-fast:  .15s cubic-bezier(.4,0,.2,1);
  --t-med:   .3s  cubic-bezier(.4,0,.2,1);
  --t-slow:  .6s  cubic-bezier(.4,0,.2,1);
}

/* ═══════════════════════════════════════════════════════════════════════
   BACKGROUND THEMES — Blob colors change per theme
   ═══════════════════════════════════════════════════════════════════════ */

/* Aurora (default) */
[data-theme="aurora"] { --bg-base: #0d0b1e; }
[data-theme="aurora"] .blob-1 { background: radial-gradient(circle, #7c3aed 0%, transparent 70%); }
[data-theme="aurora"] .blob-2 { background: radial-gradient(circle, #0ea5e9 0%, transparent 70%); }
[data-theme="aurora"] .blob-3 { background: radial-gradient(circle, #ec4899 0%, transparent 70%); }
[data-theme="aurora"] .blob-4 { background: radial-gradient(circle, #06b6d4 0%, transparent 70%); }

/* Sunset */
[data-theme="sunset"] { --bg-base: #160a05; --accent: #fb923c; --accent-2: #fbbf24; }
[data-theme="sunset"] .blob-1 { background: radial-gradient(circle, #ea580c 0%, transparent 70%); }
[data-theme="sunset"] .blob-2 { background: radial-gradient(circle, #dc2626 0%, transparent 70%); }
[data-theme="sunset"] .blob-3 { background: radial-gradient(circle, #d97706 0%, transparent 70%); }
[data-theme="sunset"] .blob-4 { background: radial-gradient(circle, #be185d 0%, transparent 70%); }

/* Ocean */
[data-theme="ocean"] { --bg-base: #020d1a; --accent: #22d3ee; --accent-2: #38bdf8; }
[data-theme="ocean"] .blob-1 { background: radial-gradient(circle, #0284c7 0%, transparent 70%); }
[data-theme="ocean"] .blob-2 { background: radial-gradient(circle, #0891b2 0%, transparent 70%); }
[data-theme="ocean"] .blob-3 { background: radial-gradient(circle, #0d9488 0%, transparent 70%); }
[data-theme="ocean"] .blob-4 { background: radial-gradient(circle, #1d4ed8 0%, transparent 70%); }

/* Forest */
[data-theme="forest"] { --bg-base: #030d08; --accent: #4ade80; --accent-2: #a3e635; }
[data-theme="forest"] .blob-1 { background: radial-gradient(circle, #15803d 0%, transparent 70%); }
[data-theme="forest"] .blob-2 { background: radial-gradient(circle, #065f46 0%, transparent 70%); }
[data-theme="forest"] .blob-3 { background: radial-gradient(circle, #84cc16 0%, transparent 70%); }
[data-theme="forest"] .blob-4 { background: radial-gradient(circle, #0f766e 0%, transparent 70%); }

/* Neon */
[data-theme="neon"] { --bg-base: #030308; --accent: #f0abfc; --accent-2: #a3e635; }
[data-theme="neon"] .blob-1 { background: radial-gradient(circle, #a21caf 0%, transparent 70%); }
[data-theme="neon"] .blob-2 { background: radial-gradient(circle, #65a30d 0%, transparent 70%); }
[data-theme="neon"] .blob-3 { background: radial-gradient(circle, #e11d48 0%, transparent 70%); }
[data-theme="neon"] .blob-4 { background: radial-gradient(circle, #7c3aed 0%, transparent 70%); }

/* Midnight */
[data-theme="midnight"] { --bg-base: #030306; --accent: #818cf8; --accent-2: #c084fc; }
[data-theme="midnight"] .blob-1 { background: radial-gradient(circle, #1e1b4b 0%, transparent 70%); }
[data-theme="midnight"] .blob-2 { background: radial-gradient(circle, #312e81 0%, transparent 70%); }
[data-theme="midnight"] .blob-3 { background: radial-gradient(circle, #1e3a5f 0%, transparent 70%); }
[data-theme="midnight"] .blob-4 { background: radial-gradient(circle, #4a1942 0%, transparent 70%); }

/* Candy */
[data-theme="candy"] { --bg-base: #170617; --accent: #fb7185; --accent-2: #38bdf8; }
[data-theme="candy"] .blob-1 { background: radial-gradient(circle, #ec4899 0%, transparent 70%); }
[data-theme="candy"] .blob-2 { background: radial-gradient(circle, #38bdf8 0%, transparent 70%); }
[data-theme="candy"] .blob-3 { background: radial-gradient(circle, #facc15 0%, transparent 70%); }
[data-theme="candy"] .blob-4 { background: radial-gradient(circle, #a78bfa 0%, transparent 70%); }

/* Lavender */
[data-theme="lavender"] { --bg-base: #090816; --accent: #c4b5fd; --accent-2: #7dd3fc; }
[data-theme="lavender"] .blob-1 { background: radial-gradient(circle, #8b5cf6 0%, transparent 70%); }
[data-theme="lavender"] .blob-2 { background: radial-gradient(circle, #c084fc 0%, transparent 70%); }
[data-theme="lavender"] .blob-3 { background: radial-gradient(circle, #38bdf8 0%, transparent 70%); }
[data-theme="lavender"] .blob-4 { background: radial-gradient(circle, #ec4899 0%, transparent 70%); }

/* Spring */
[data-theme="spring"] { --bg-base: #04120b; --accent: #22c55e; --accent-2: #f472b6; }
[data-theme="spring"] .blob-1 { background: radial-gradient(circle, #22c55e 0%, transparent 70%); }
[data-theme="spring"] .blob-2 { background: radial-gradient(circle, #f472b6 0%, transparent 70%); }
[data-theme="spring"] .blob-3 { background: radial-gradient(circle, #fde047 0%, transparent 70%); }
[data-theme="spring"] .blob-4 { background: radial-gradient(circle, #2dd4bf 0%, transparent 70%); }

/* Prism */
[data-theme="prism"] { --bg-base: #070713; --accent: #60a5fa; --accent-2: #f97316; }
[data-theme="prism"] .blob-1 { background: radial-gradient(circle, #2563eb 0%, transparent 70%); }
[data-theme="prism"] .blob-2 { background: radial-gradient(circle, #f97316 0%, transparent 70%); }
[data-theme="prism"] .blob-3 { background: radial-gradient(circle, #eab308 0%, transparent 70%); }
[data-theme="prism"] .blob-4 { background: radial-gradient(circle, #10b981 0%, transparent 70%); }

/* ─── Blob Layer ──────────────────────────────────────────────────────── */
.bg-layer {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(calc(var(--blur-amount, 20) * 1px));
  opacity: var(--glow-opacity, .42);
  will-change: transform;
  transition: background .8s ease, opacity .8s ease, filter .6s ease;
}

.blob-1 { width: 620px; height: 620px; top: -15%;  left: -10%;
  animation: blobMove1 18s ease-in-out infinite; }
.blob-2 { width: 520px; height: 520px; top: 30%;   right: -8%;
  animation: blobMove2 22s ease-in-out infinite; }
.blob-3 { width: 460px; height: 460px; bottom: -10%; left: 30%;
  animation: blobMove3 20s ease-in-out infinite; }
.blob-4 { width: 380px; height: 380px; top: 10%;   left: 55%;
  animation: blobMove4 25s ease-in-out infinite; }

@keyframes blobMove1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(80px, 60px) scale(1.08); }
  66%       { transform: translate(-40px, 100px) scale(.95); }
}
@keyframes blobMove2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%       { transform: translate(-100px, 60px) scale(1.06); }
  70%       { transform: translate(50px, -80px) scale(.92); }
}
@keyframes blobMove3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  30%       { transform: translate(60px, -70px) scale(1.1); }
  65%       { transform: translate(-80px, 50px) scale(.96); }
}
@keyframes blobMove4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%       { transform: translate(-120px, 80px) scale(1.05); }
}

/* ─── Glassmorphism Base ─────────────────────────────────────────────── */
.glass-card {
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
}

.glass-nav {
  background: rgba(10,8,28,.55);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-bottom: 1px solid var(--glass-border);
}

.glass-inset {
  background: var(--glass-inset);
  border: 1px solid var(--glass-inset-border);
  border-radius: var(--radius-md);
}

/* ─── Screens ────────────────────────────────────────────────────────── */
.screen { position: relative; z-index: 10; }

/* ─── LOGIN ──────────────────────────────────────────────────────────── */
.screen-login {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 1.5rem;
}

/* ─── INTRO ──────────────────────────────────────────────────────────── */
.intro-screen {
  height: 100svh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: clamp(.9rem, 3vw, 2.5rem);
}
.intro-shell {
  width: min(1120px, 100%);
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  overflow: hidden;
}
.intro-copy { max-width: 620px; min-width: 0; width: 100%; }
.intro-brand {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--text-secondary); font-family: 'Syne', sans-serif;
  font-weight: 700; margin-bottom: 1.2rem;
}
.intro-logo {
  width: 40px; height: 40px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; box-shadow: 0 10px 26px rgba(0,0,0,.28);
}
.intro-copy h1 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2.25rem, 5.3vw, 4.8rem);
  line-height: .96;
  font-weight: 800;
  margin-bottom: 1rem;
  letter-spacing: 0;
  max-width: 100%;
  overflow-wrap: break-word;
}
.intro-copy p {
  max-width: 560px;
  color: var(--text-secondary);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  margin-bottom: 1.5rem;
  overflow-wrap: break-word;
}
.intro-actions { display: flex; flex-wrap: wrap; gap: .85rem; }
.intro-actions .btn-primary-gl,
.intro-actions .btn-ghost {
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 46px;
}
.intro-float-field {
  position: relative;
  width: min(540px, 100%);
  min-height: min(460px, 62svh);
  margin-left: auto;
  transform-style: preserve-3d;
}
.intro-float {
  position: absolute;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.09);
  backdrop-filter: blur(18px) saturate(1.5);
  color: var(--text-primary);
  box-shadow: 0 16px 38px rgba(0,0,0,.3);
  animation: introFloat 5s ease-in-out infinite;
}
.intro-float i { font-size: clamp(1.8rem, 5vw, 3.7rem); }
.float-a { width: 130px; height: 130px; border-radius: 24px; left: 6%; top: 4%; color: #f9a8d4; animation-delay: -.8s; }
.float-b { width: 104px; height: 104px; border-radius: 22px; right: 2%; top: 20%; color: #7dd3fc; animation-delay: -1.7s; }
.float-c { width: 92px; height: 92px; border-radius: 20px; left: 43%; top: 36%; color: #86efac; animation-delay: -2.4s; }
.float-d { width: 84px; height: 84px; border-radius: 18px; right: 22%; bottom: 2%; color: #fde68a; animation-delay: -3.1s; }
.float-e { width: 116px; height: 116px; border-radius: 22px; left: 2%; bottom: 12%; color: #c4b5fd; animation-delay: -4s; }
.float-f { width: 92px; height: 92px; border-radius: 20px; right: 4%; bottom: 27%; color: #fda4af; animation-delay: -2.9s; }
.float-g { width: 72px; height: 72px; border-radius: 18px; right: 23%; top: 5%; color: #fde68a; animation-delay: -3.7s; }
.intro-mobile-break { display: none; }
@keyframes introFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}
@keyframes introFloatMobile {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (max-width: 1040px) {
  .intro-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 1rem; }
  .intro-copy { max-width: 620px; margin: 0 auto; text-align: center; }
  .intro-brand { justify-content: center; margin-bottom: .8rem; }
  .intro-actions { justify-content: center; }
  .intro-float-field {
    width: min(640px, 100%);
    min-height: 250px;
    margin: 0 auto;
  }
  .intro-copy h1 { font-size: clamp(2rem, 8vw, 3rem); }
  .intro-copy p { margin-left: auto; margin-right: auto; }
  .float-a { width: 86px; height: 86px; left: 8%; top: 6%; }
  .float-b { width: 76px; height: 76px; right: 9%; top: 8%; }
  .float-c { width: 68px; height: 68px; left: 48%; top: 40%; }
  .float-d { width: 64px; height: 64px; right: 22%; bottom: 8%; }
  .float-e { width: 82px; height: 82px; left: 4%; bottom: 8%; }
  .float-f { width: 66px; height: 66px; right: 5%; bottom: 28%; }
  .float-g { width: 58px; height: 58px; right: 29%; top: 6%; }
}

@media (max-width: 560px) {
  .intro-screen { padding: 1rem; align-items: stretch; }
  .intro-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: min(340px, calc(100vw - 3.5rem));
    max-width: min(340px, calc(100vw - 3.5rem));
    margin: 0 auto;
    min-height: calc(100svh - 2rem);
    padding: .75rem;
    overflow: hidden;
    background: rgba(9,8,30,.62);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px;
  }
  .intro-copy {
    position: relative;
    order: 3;
    z-index: 2;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding-top: 0;
    padding-left: .2rem;
    padding-right: .2rem;
  }
  .intro-copy h1 { font-size: clamp(1.75rem, 8.1vw, 2.15rem); line-height: 1; margin-bottom: .75rem; }
  .intro-copy p { font-size: .9rem; line-height: 1.45; margin-bottom: .95rem; }
  .intro-actions { gap: .6rem; }
  .intro-actions .btn-primary-gl,
  .intro-actions .btn-ghost { width: 100%; min-height: 42px; padding: .68rem 1rem; }
  .intro-float-field {
    position: relative;
    order: 1;
    inset: auto;
    width: min(340px, calc(100vw - 3.5rem));
    max-width: min(340px, calc(100vw - 3.5rem));
    min-height: 12rem;
    flex: 0 0 12rem;
    align-self: center;
    z-index: 1;
  }
  .intro-mobile-break {
    display: block;
    order: 2;
    flex: 0 0 .55rem;
    height: .55rem;
    line-height: .55rem;
  }
  .intro-float {
    box-shadow: 0 12px 28px rgba(0,0,0,.28);
    animation-name: introFloatMobile;
  }
  .float-a { width: 58px; height: 58px; border-radius: 16px; left: 10%; top: 1.15rem; }
  .float-b { width: 54px; height: 54px; border-radius: 15px; left: auto; right: 9%; top: 1.2rem; }
  .float-c { width: 48px; height: 48px; border-radius: 13px; left: 50%; top: 8.15rem; }
  .float-d { display: inline-flex; width: 44px; height: 44px; border-radius: 12px; left: 6%; top: 8.35rem; }
  .float-e { width: 54px; height: 54px; border-radius: 15px; left: auto; right: 7%; top: 8.15rem; }
  .float-f { width: 46px; height: 46px; border-radius: 12px; left: 29%; top: 5.05rem; }
  .float-g { width: 42px; height: 42px; border-radius: 12px; left: auto; right: 20%; top: 5rem; }
}

@media (max-height: 680px) and (min-width: 821px) {
  .intro-copy h1 { font-size: clamp(2rem, 4.5vw, 3.6rem); }
  .intro-copy p { font-size: .98rem; margin-bottom: 1rem; }
  .intro-brand { margin-bottom: .8rem; }
  .intro-float-field { min-height: 330px; }
  .float-a { width: 116px; height: 116px; }
  .float-b { width: 90px; height: 90px; }
  .float-c { width: 82px; height: 82px; }
  .float-d { width: 76px; height: 76px; }
  .float-e { width: 102px; height: 102px; }
  .float-f { width: 80px; height: 80px; }
  .float-g { width: 66px; height: 66px; }
}

.login-card {
  width: 100%; max-width: 420px;
  padding: 2.5rem 2.25rem;
  animation: fadeSlideUp .5s ease both;
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.login-logo { text-align: center; margin-bottom: 2rem; }

.logo-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 18px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  font-size: 28px; color: #fff;
  box-shadow: 0 6px 20px rgba(56,189,248,.22);
  margin-bottom: .75rem;
}

h1.logo-text {
  font-family: 'Syne', sans-serif; font-weight: 800;
  font-size: 2rem; letter-spacing: 0;
  background: linear-gradient(135deg, var(--accent) 30%, var(--accent-2) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

.logo-sub { color: var(--text-secondary); font-size: .875rem; margin-top: .25rem; }
.login-footer { text-align:center; color:var(--text-muted); font-size:.78rem; margin-top:1.25rem; }
.login-footer code { background:rgba(255,255,255,.08); padding:.15rem .4rem; border-radius:4px; color:var(--accent); }
.footer-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  margin-top: .55rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-2);
  font: inherit;
  cursor: pointer;
}
.footer-link:hover { color: var(--text-primary); text-decoration: underline; }

/* ─── Form Fields ────────────────────────────────────────────────────── */
.field-group { margin-bottom: 1.1rem; }
.field-group > label {
  display: block; font-size: .8rem; font-weight: 500; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-secondary); margin-bottom: .45rem;
}

.input-wrap {
  position: relative; display: flex; align-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(56,189,248,.14);
}
.input-wrap > i:first-child {
  position: absolute; left: 14px; color: var(--text-muted); font-size: 1rem; pointer-events: none;
}
.input-wrap input, .input-wrap select {
  width: 100%; background: none; border: none; outline: none;
  color: var(--text-primary); font-family: inherit; font-size: .93rem;
  padding: .75rem .9rem .75rem 2.75rem;
}
.input-wrap select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.input-wrap input::placeholder { color: var(--text-muted); }

.eye-btn {
  background: none; border: none; color: var(--text-muted);
  width: 42px; min-width: 42px; height: 42px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1rem; flex-shrink: 0;
  transition: color var(--t-fast);
}
.eye-btn:hover { color: var(--text-primary); }

/* ─── Buttons ─────────────────────────────────────────────────────────── */
.btn-primary-gl {
  width: 100%; padding: .8rem 1.5rem;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  border: none; border-radius: var(--radius-sm);
  color: #fff; font-family: 'Syne', sans-serif; font-weight: 700; font-size: .95rem;
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  box-shadow: 0 4px 18px rgba(56,189,248,.22);
}
.btn-primary-gl::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,0); transition: background var(--t-fast);
}
.btn-primary-gl:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 7px 24px rgba(56,189,248,.28); }
.btn-primary-gl:hover:not(:disabled)::before { background: rgba(255,255,255,.08); }
.btn-primary-gl:active:not(:disabled) { transform: translateY(0); }
.btn-primary-gl:disabled { opacity: .45; cursor: not-allowed; }

.btn-ghost {
  background: none; border: 1px solid var(--glass-border);
  color: var(--text-secondary); border-radius: var(--radius-sm);
  padding: .7rem 1.4rem; font-family: inherit; font-size: .9rem;
  cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast);
}
.btn-ghost:hover { border-color: var(--text-secondary); color: var(--text-primary); }

.btn-danger {
  background: rgba(248,113,113,.15); border: 1px solid rgba(248,113,113,.3);
  color: var(--danger); border-radius: var(--radius-sm);
  padding: .7rem 1.4rem; font-family: inherit; font-size: .9rem;
  cursor: pointer; transition: background var(--t-fast);
}
.btn-danger:hover { background: rgba(248,113,113,.25); }

.link-btn {
  background: none; border: none; color: var(--accent); cursor: pointer;
  font-family: inherit; font-size: inherit; text-decoration: underline;
  padding: 0; transition: opacity var(--t-fast);
}
.link-btn:hover { opacity: .7; }

/* ─── Alert box ──────────────────────────────────────────────────────── */
.alert-box {
  padding: .75rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1.1rem;
  font-size: .875rem; background: rgba(248,113,113,.15);
  border: 1px solid rgba(248,113,113,.3); color: #fca5a5;
}
.alert-box.success {
  background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.3); color: #6ee7b7;
}

/* ─── NAVBAR ─────────────────────────────────────────────────────────── */
.pv-nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 1rem;
  padding: .75rem 1.5rem;
}

.nav-brand { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.logo-icon-sm {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  font-size: 15px; color: #fff;
  box-shadow: 0 4px 14px rgba(56,189,248,.22);
}
.brand-name {
  font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.1rem;
  background: linear-gradient(135deg, var(--accent) 30%, var(--accent-2) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.nav-center { flex: 1; display: flex; justify-content: center; }
.search-wrap {
  position: relative; width: 100%; max-width: 340px;
  display: flex; align-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--glass-border); border-radius: 50px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.search-wrap:focus-within {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(56,189,248,.12);
}
.search-wrap > i { position: absolute; left: 14px; color: var(--text-muted); }
.search-wrap input {
  width: 100%; background: none; border: none; outline: none;
  color: var(--text-primary); font-family: inherit; font-size: .875rem;
  padding: .5rem 1rem .5rem 2.6rem;
}
.search-wrap input::placeholder { color: var(--text-muted); }

.nav-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

.nav-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.06); border: 1px solid var(--glass-border);
  color: var(--text-secondary); border-radius: 50px;
  padding: .45rem .9rem; font-family: inherit; font-size: .85rem;
  cursor: pointer; transition: all var(--t-fast);
}
.nav-btn:hover { background: rgba(255,255,255,.12); color: var(--text-primary); border-color: rgba(255,255,255,.2); }
.nav-btn.danger:hover { background: rgba(248,113,113,.15); color: var(--danger); border-color: rgba(248,113,113,.3); }
.btn-txt { display: none; }
@media (min-width: 640px) { .btn-txt { display: inline; } }

.nav-user { display: flex; align-items: center; gap: .5rem; }
.user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: .85rem; color: #fff;
  flex-shrink: 0;
}
.user-name { font-size: .85rem; color: var(--text-secondary); }
@media (max-width: 500px) { .user-name { display: none; } }

/* ─── GALLERY ─────────────────────────────────────────────────────────── */
.gallery-main { padding: 1.5rem; min-height: calc(100vh - 64px); }

.gallery-stats {
  color: var(--text-muted); font-size: .82rem; margin-bottom: 1.25rem;
  display: flex; align-items: center; gap: .5rem;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

/* ─── IMAGE CARD ──────────────────────────────────────────────────────── */
.img-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
  cursor: pointer;
  animation: cardIn .35s ease both;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.img-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,.38), 0 0 0 1px rgba(56,189,248,.34);
  border-color: rgba(56,189,248,.28);
}

.card-img-wrap {
  position: relative; overflow: hidden;
  aspect-ratio: 4/3; background: rgba(255,255,255,.04);
}
.card-img-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}
.img-card:hover .card-img-wrap img { transform: scale(1.04); }

.card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 50%);
  display: flex; align-items: flex-end;
  padding: .75rem;
  opacity: 0; transition: opacity var(--t-med);
}
.img-card:hover .card-overlay { opacity: 1; }

.overlay-actions { display: flex; gap: .4rem; }
.overlay-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(255,255,255,.15); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-size: .95rem; cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
  text-decoration: none;
}
.overlay-btn:hover { background: rgba(255,255,255,.28); transform: scale(1.1); }
.overlay-btn.delete-btn:hover { background: rgba(248,113,113,.5); }
.overlay-btn.share-btn.active { background: rgba(52,211,153,.35); }

.share-badge {
  position: absolute; top: 8px; right: 8px;
  background: rgba(52,211,153,.25); backdrop-filter: blur(8px);
  border: 1px solid rgba(52,211,153,.4);
  color: var(--success); font-size: .7rem; font-weight: 600;
  padding: .2rem .55rem; border-radius: 20px; letter-spacing: .04em;
}

.card-body { padding: .75rem; }
.card-filename {
  font-size: .83rem; font-weight: 500; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: .3rem;
}
.card-meta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.card-user {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .75rem; color: var(--accent); font-weight: 500;
}
.card-user .mini-av {
  width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  font-size: .6rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.card-time { font-size: .72rem; color: var(--text-muted); }
.card-size { font-size: .72rem; color: var(--text-muted); margin-left: auto; }

/* ─── Gallery empty state ────────────────────────────────────────────── */
.gallery-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 50vh; gap: 1rem; color: var(--text-muted);
}
.gallery-empty i { font-size: 4rem; opacity: .3; }
.gallery-empty p { font-size: 1.05rem; }

/* ─── Pagination ─────────────────────────────────────────────────────── */
.pagination-area { display: flex; justify-content: center; gap: .5rem; margin-top: 2rem; padding-bottom: 2rem; }
.page-btn {
  background: var(--glass); border: 1px solid var(--glass-border);
  color: var(--text-secondary); border-radius: 8px;
  padding: .45rem .9rem; font-size: .85rem; cursor: pointer;
  transition: all var(--t-fast);
}
.page-btn:hover, .page-btn.active {
  background: rgba(167,139,250,.2); border-color: var(--accent); color: var(--text-primary);
}
.page-btn.active { font-weight: 600; }

/* ─── MODAL BASE ─────────────────────────────────────────────────────── */
.pv-modal {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  animation: modalIn .2s ease;
}
@keyframes modalIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.pv-modal-backdrop {
  position: absolute; inset: 0; z-index: 0;
  background: rgba(0,0,0,.65); backdrop-filter: blur(6px);
}
.modal-box {
  position: relative; z-index: 2; width: 100%; max-width: 600px;
  padding: 1.75rem; max-height: 90vh; overflow-y: auto;
  animation: modalSlide .25s ease;
}
@keyframes modalSlide {
  from { transform: scale(.95) translateY(12px); }
  to   { transform: scale(1) translateY(0); }
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem;
}
.modal-header h2 {
  font-family: 'Syne', sans-serif; font-size: 1.2rem; font-weight: 700;
  display: flex; align-items: center; gap: .5rem;
}
.modal-close {
  background: rgba(255,255,255,.06); border: 1px solid var(--glass-border);
  color: var(--text-secondary); border-radius: 8px;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1rem; flex-shrink: 0;
  transition: background var(--t-fast), color var(--t-fast);
}
.modal-close:hover { background: rgba(255,255,255,.14); color: var(--text-primary); }

.modal-footer {
  display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1.5rem;
}

/* ─── DROP ZONE ──────────────────────────────────────────────────────── */
.drop-zone {
  background: rgba(255,255,255,.03);
  border: 2px dashed var(--glass-border);
  border-radius: var(--radius-md);
  min-height: 220px; display: flex; align-items: center; justify-content: center;
  transition: border-color var(--t-fast), background var(--t-fast);
  overflow: hidden; margin-bottom: 1rem;
}
.drop-zone.drag-over {
  border-color: var(--accent);
  background: rgba(56,189,248,.07);
  box-shadow: inset 0 0 26px rgba(56,189,248,.08), 0 0 14px rgba(56,189,248,.12);
}
.drop-placeholder { text-align: center; padding: 2.5rem 1rem; }
.drop-icon { font-size: 2.8rem; color: var(--text-muted); margin-bottom: .75rem; }
.drop-title { font-size: 1rem; font-weight: 500; color: var(--text-secondary); margin-bottom: .35rem; }
.drop-sub { font-size: .875rem; color: var(--text-muted); }
.drop-hint { font-size: .75rem; color: var(--text-muted); margin-top: .5rem; }

.drop-preview { text-align: center; padding: 1.25rem; width: 100%; }
.drop-preview img {
  max-height: 200px; max-width: 100%; object-fit: contain;
  border-radius: 10px; border: 1px solid var(--glass-border); margin-bottom: .75rem;
}
.preview-info { font-size: .8rem; color: var(--text-muted); margin-bottom: .5rem; }
.preview-list {
  display: grid; gap: .45rem; margin: .7rem 0 .75rem;
  max-height: 150px; overflow: auto; text-align: left;
}
.preview-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: .5rem;
  padding: .5rem .6rem; border-radius: 8px;
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.08);
}
.preview-item i { color: var(--accent); font-size: .95rem; }
.preview-item span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-secondary); font-size: .78rem;
}
.preview-item small { color: var(--text-muted); font-size: .72rem; }
.remove-btn { color: var(--danger) !important; font-size: .82rem; }

/* ─── PROGRESS BAR ───────────────────────────────────────────────────── */
.progress-label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .82rem; color: var(--text-secondary); margin-bottom: .5rem;
}
#progressPct { font-weight: 700; color: var(--accent); }
.progress-track {
  position: relative; height: 8px; border-radius: 50px;
  background: rgba(255,255,255,.08); overflow: visible; margin-bottom: .5rem;
}
.progress-fill {
  height: 100%; border-radius: 50px; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .15s ease;
  position: relative; z-index: 1;
}
.progress-glow {
  position: absolute; top: 50%; left: 0;
  height: 20px; width: 0%; border-radius: 50px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(56,189,248,.24), rgba(96,165,250,.24));
  filter: blur(6px); transition: width .15s ease; z-index: 0;
}
.upload-speed { font-size: .75rem; color: var(--text-muted); text-align: right; }

/* Upload states */
.upload-success {
  color: var(--success); font-size: .9rem; font-weight: 500;
  display: flex; align-items: center; gap: .4rem; margin-bottom: .75rem;
}
.upload-error {
  background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.3);
  color: #fca5a5; padding: .65rem .9rem; border-radius: var(--radius-sm);
  font-size: .875rem; margin-bottom: .75rem;
}

/* ─── SETTINGS DROPDOWN ─────────────────────────────────────────────── */
.settings-menu-wrap { position: relative; }
.settings-menu {
  position: absolute;
  top: calc(100% + .55rem);
  right: 0;
  z-index: 420;
  width: 190px;
  padding: .45rem;
  border-radius: 14px;
  background: rgba(12,10,32,.72);
  backdrop-filter: blur(28px) saturate(1.8);
  -webkit-backdrop-filter: blur(28px) saturate(1.8);
  animation: slideDown .18s ease;
}
.settings-menu button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .68rem .75rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.settings-menu button:hover {
  background: rgba(255,255,255,.1);
  color: var(--text-primary);
  transform: translateX(2px);
}
.settings-menu button i { color: var(--accent-2); }

/* ─── SETTINGS PANEL ─────────────────────────────────────────────────── */
.settings-panel {
  position: fixed; top: 70px; right: 1.25rem; z-index: 300;
  width: 280px; padding: 1.25rem;
  animation: slideDown .2s ease;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.settings-header {
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: .95rem;
  margin-bottom: 1rem;
}

.theme-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; margin-bottom: 1.25rem; }
.theme-swatch {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.05); border: 1px solid var(--glass-border);
  border-radius: 10px; padding: .6rem .4rem; cursor: pointer;
  font-size: .7rem; color: var(--text-secondary); font-family: inherit;
  transition: all var(--t-fast);
}
.theme-swatch i { font-size: .85rem; line-height: 1; }
.theme-swatch:hover, .theme-swatch.active {
  border-color: var(--accent); background: rgba(167,139,250,.15); color: var(--text-primary);
}
.swatch {
  width: 36px; height: 24px; border-radius: 6px; flex-shrink: 0;
  background-size: cover;
}
.aurora-sw   { background: linear-gradient(135deg, #7c3aed, #0ea5e9, #ec4899); }
.sunset-sw   { background: linear-gradient(135deg, #ea580c, #dc2626, #d97706); }
.ocean-sw    { background: linear-gradient(135deg, #0284c7, #0891b2, #0d9488); }
.forest-sw   { background: linear-gradient(135deg, #15803d, #065f46, #84cc16); }
.neon-sw     { background: linear-gradient(135deg, #a21caf, #65a30d, #e11d48); }
.midnight-sw { background: linear-gradient(135deg, #1e1b4b, #312e81, #1e3a5f); }
.candy-sw    { background: linear-gradient(135deg, #ec4899, #38bdf8, #facc15); }
.lavender-sw { background: linear-gradient(135deg, #8b5cf6, #c084fc, #38bdf8); }
.spring-sw   { background: linear-gradient(135deg, #22c55e, #f472b6, #fde047); }
.prism-sw    { background: linear-gradient(135deg, #2563eb, #f97316, #10b981); }

.blur-control, .glow-control {
  margin-bottom: .9rem;
}
.blur-control label, .glow-control label {
  display: flex; justify-content: space-between;
  font-size: .78rem; color: var(--text-secondary); margin-bottom: .4rem;
}
.blur-control label span, .glow-control label span { color: var(--accent); font-weight: 600; }
input[type="range"] {
  width: 100%; accent-color: var(--accent); height: 4px;
  cursor: pointer; border-radius: 2px;
}

/* ─── LIGHTBOX ───────────────────────────────────────────────────────── */
.pv-lightbox {
  position: fixed; inset: 0; z-index: 600;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.lb-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,.85); backdrop-filter: blur(10px);
}
.lb-box {
  position: relative; z-index: 1; max-width: 92vw; max-height: 92vh;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.lb-close {
  position: fixed; top: 1.25rem; right: 1.25rem;
  background: rgba(255,255,255,.1); border: 1px solid var(--glass-border);
  color: var(--text-secondary); border-radius: 50%;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1.1rem; z-index: 2;
  transition: background var(--t-fast); backdrop-filter: blur(12px);
}
.lb-close:hover { background: rgba(255,255,255,.2); color: #fff; }
.lb-box > img {
  max-width: 90vw; max-height: 80vh; object-fit: contain;
  border-radius: 12px; box-shadow: 0 18px 48px rgba(0,0,0,.64);
}
.lb-info {
  display: flex; gap: 1.25rem; flex-wrap: wrap;
  padding: .65rem 1.25rem; font-size: .8rem; color: var(--text-secondary);
}
.lb-info > span { display: flex; align-items: center; gap: .35rem; }

/* ─── SHARE MODAL ────────────────────────────────────────────────────── */
.share-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 0; border-bottom: 1px solid var(--glass-border); margin-bottom: 1rem;
  font-size: .9rem; font-weight: 500;
}

.toggle-switch {
  position: relative; display: inline-block; width: 44px; height: 24px; cursor: pointer;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-thumb {
  position: absolute; inset: 0; border-radius: 50px;
  background: rgba(255,255,255,.15); border: 1px solid var(--glass-border);
  transition: background var(--t-fast);
}
.toggle-thumb::before {
  content: ''; position: absolute;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; top: 2px; left: 2px;
  transition: transform var(--t-fast), background var(--t-fast);
}
.toggle-switch input:checked + .toggle-thumb { background: var(--success); border-color: var(--success); }
.toggle-switch input:checked + .toggle-thumb::before { transform: translateX(20px); }

.share-link-box {
  display: flex; gap: .5rem; align-items: center;
  background: rgba(0,0,0,.3); border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm); padding: .5rem .75rem;
  margin-bottom: .75rem;
}
.share-link-box input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--accent); font-size: .82rem; font-family: monospace;
}
.copy-btn {
  background: rgba(255,255,255,.08); border: 1px solid var(--glass-border);
  color: var(--text-secondary); border-radius: 6px;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; transition: all var(--t-fast);
}
.copy-btn:hover, .copy-btn.copied { background: rgba(52,211,153,.2); color: var(--success); border-color: var(--success); }
.share-hint { font-size: .78rem; color: var(--text-muted); margin-bottom: 1rem; }

.share-embed-box { background: rgba(0,0,0,.25); border-radius: var(--radius-sm); padding: .75rem; }
.share-embed-box label { font-size: .75rem; color: var(--text-muted); display: block; margin-bottom: .4rem; }
.share-embed-box textarea {
  width: 100%; background: rgba(0,0,0,.3); border: 1px solid var(--glass-border);
  border-radius: 6px; color: var(--text-secondary); font-family: monospace;
  font-size: .78rem; padding: .5rem; resize: none; outline: none;
  transition: border-color var(--t-fast);
}
.share-embed-box textarea:focus { border-color: var(--accent); }

/* ─── ADMIN MODAL ────────────────────────────────────────────────────── */
.admin-create { padding: 1.25rem; margin-bottom: 1.25rem; }
.admin-create h4 {
  font-family: 'Syne', sans-serif; font-size: .95rem; font-weight: 700;
  margin-bottom: 1rem; display: flex; align-items: center; gap: .4rem;
}
.create-row {
  display: grid; grid-template-columns: 1fr 1fr 140px auto; gap: .75rem; align-items: flex-end;
}
@media (max-width: 640px) { .create-row { grid-template-columns: 1fr; } }
.create-btn { width: auto; padding: .72rem 1.25rem; white-space: nowrap; }
.bulk-user-box { margin-top: .9rem; }
.bulk-user-box label {
  display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); margin-bottom: .35rem;
}
.bulk-user-box textarea {
  width: 100%; resize: vertical; min-height: 86px;
  background: rgba(0,0,0,.24); border: 1px solid var(--glass-border);
  border-radius: 8px; color: var(--text-primary); padding: .75rem .85rem;
  font: .86rem/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.bulk-user-box textarea:focus { outline: none; border-color: var(--accent); }
.bulk-user-hint { margin: .45rem 0 0; color: var(--text-muted); font-size: .78rem; }

.admin-table-wrap { overflow-x: auto; }
.admin-table {
  width: 100%; border-collapse: collapse; font-size: .85rem;
}
.admin-table th {
  text-align: left; padding: .65rem .9rem;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); border-bottom: 1px solid var(--glass-border);
  white-space: nowrap;
}
.admin-table td {
  padding: .65rem .9rem; border-bottom: 1px solid rgba(255,255,255,.04);
  color: var(--text-secondary); vertical-align: middle;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: rgba(255,255,255,.03); }
.role-badge {
  display: inline-block; padding: .18rem .55rem; border-radius: 20px;
  font-size: .7rem; font-weight: 600; letter-spacing: .05em;
}
.role-badge.admin { background: rgba(167,139,250,.2); color: var(--accent); }
.role-badge.user  { background: rgba(56,189,248,.15); color: var(--accent-2); }
.status-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px;
}
.status-dot.on  { background: var(--success); box-shadow: 0 0 6px var(--success); }
.status-dot.off { background: var(--danger); }
.action-btn {
  background: none; border: 1px solid var(--glass-border);
  color: var(--text-muted); border-radius: 6px;
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: .85rem; transition: all var(--t-fast);
}
.action-btn:hover { border-color: var(--text-secondary); color: var(--text-primary); }
.action-btn.del:hover { border-color: var(--danger); color: var(--danger); }

/* ─── CONFIRM MODAL ──────────────────────────────────────────────────── */
.confirm-icon {
  font-size: 3rem; color: var(--danger); opacity: .7;
  margin-bottom: 1rem;
}
.confirm-msg { color: var(--text-secondary); font-size: .9rem; margin-bottom: 1.5rem; }

.notice-box {
  max-width: 420px;
  text-align: center;
}
.notice-icon {
  width: 70px; height: 70px; border-radius: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(251,191,36,.14);
  border: 1px solid rgba(251,191,36,.32);
  color: var(--warning);
  font-size: 2rem;
  margin-bottom: 1rem;
}
.notice-icon.danger {
  background: rgba(248,113,113,.14);
  border-color: rgba(248,113,113,.32);
  color: var(--danger);
}
.notice-icon.success {
  background: rgba(52,211,153,.14);
  border-color: rgba(52,211,153,.32);
  color: var(--success);
}
.notice-box h3 {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  margin-bottom: .6rem;
}

.toast-stack {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 900;
  display: grid;
  gap: .65rem;
  width: min(360px, calc(100vw - 2rem));
  pointer-events: none;
}
.pv-toast {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .85rem .95rem;
  border-radius: 12px;
  background: rgba(16,14,36,.84);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  box-shadow: 0 12px 30px rgba(0,0,0,.3);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  opacity: 0;
  transform: translateY(12px) scale(.98);
  transition: opacity var(--t-med), transform var(--t-med);
}
.pv-toast.show { opacity: 1; transform: translateY(0) scale(1); }
.pv-toast i { font-size: 1.1rem; line-height: 1.35; color: var(--accent); }
.pv-toast.success i { color: var(--success); }
.pv-toast.error i { color: var(--danger); }
.pv-toast.warning i { color: var(--warning); }
.pv-toast span {
  min-width: 0;
  font-size: .88rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* ─── ERROR PAGE ─────────────────────────────────────────────────────── */
.error-screen {
  min-height: 100vh;
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.error-card {
  width: min(520px, 100%);
  padding: 2.5rem;
  text-align: center;
}
.error-icon {
  width: 76px; height: 76px; border-radius: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; font-size: 2.1rem; margin-bottom: 1rem;
}
.error-code {
  color: var(--accent);
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  margin-bottom: .3rem;
}
.error-card h1 {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  margin-bottom: .7rem;
}
.error-card p { color: var(--text-secondary); }
.error-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  width: auto;
  margin-top: 1.2rem;
  text-decoration: none;
}

/* ─── SPINNER ────────────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { display: inline-block; animation: spin .75s linear infinite; }

/* ─── SCROLLBAR ──────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 50px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.22); }

/* ─── Utilities ──────────────────────────────────────────────────────── */
.text-center { text-align: center; }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }

/* ─── Responsive Layout ──────────────────────────────────────────────── */
@media (max-width: 960px) {
  .pv-nav {
    flex-wrap: wrap;
    align-items: center;
    padding: .7rem .9rem;
  }
  .nav-brand { order: 1; }
  .nav-actions {
    order: 2;
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .nav-center {
    order: 3;
    flex: 1 0 100%;
    width: 100%;
  }
  .search-wrap { max-width: none; }
  .gallery-main { min-height: calc(100vh - 118px); }
  .modal-box { max-height: calc(100svh - 1.25rem); }
  .admin-table { min-width: 720px; }
}

@media (max-width: 760px) {
  .btn-txt { display: none !important; }
  .brand-name { font-size: 1rem; }
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; }
  .settings-panel {
    top: 76px;
    left: .75rem;
    right: .75rem;
    width: auto;
  }
  .theme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .modal-header { align-items: flex-start; gap: 1rem; }
  .modal-header h2 { font-size: 1.05rem; line-height: 1.25; }
  .lb-info { justify-content: center; gap: .7rem; }
}

@media (max-width: 640px) {
  .screen-login { min-height: 100svh; padding: .9rem; }
  .login-card { max-width: 100%; padding: 1.4rem 1.1rem; border-radius: 16px; }
  .login-logo { margin-bottom: 1.25rem; }
  h1.logo-text { font-size: 1.55rem; }

  .pv-nav {
    gap: .55rem;
    padding: .65rem .7rem;
  }
  .nav-brand {
    width: 100%;
    justify-content: center;
  }
  .nav-actions {
    width: 100%;
    margin-left: 0;
    justify-content: center;
    gap: .42rem;
  }
  .nav-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    border-radius: 12px;
  }
  .nav-user { gap: .42rem; }
  .user-name { display: none; }

  .gallery-main { padding: 1rem .75rem; min-height: calc(100vh - 150px); }
  .gallery-grid { grid-template-columns: 1fr; gap: .9rem; }
  .gallery-stats { margin-bottom: .85rem; }
  .card-overlay { opacity: 1; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 62%); }
  .overlay-actions { gap: .35rem; }
  .overlay-btn { width: 36px; height: 36px; }
  .card-size { margin-left: 0; }

  .pv-modal {
    align-items: stretch;
    padding: .5rem;
  }
  .modal-box {
    align-self: center;
    padding: 1rem;
    border-radius: 16px;
    max-height: calc(100svh - 1rem);
  }
  .modal-footer {
    flex-direction: column-reverse;
    gap: .6rem;
  }
  .modal-footer button,
  .modal-footer .btn-primary-gl,
  .modal-footer .btn-ghost,
  .modal-footer .btn-danger {
    width: 100%;
  }
  .drop-zone { min-height: 175px; }
  .drop-placeholder { padding: 1.4rem .75rem; }
  .drop-icon { font-size: 2.2rem; }
  .drop-hint { line-height: 1.4; }
  .drop-preview img { max-height: 160px; }

  .admin-create { padding: 1rem; }
  .admin-table-wrap { margin: 0 -1rem; padding: 0 1rem; }
  .settings-panel {
    top: auto;
    bottom: .75rem;
    max-height: min(560px, calc(100svh - 1.5rem));
    overflow-y: auto;
  }
  .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .lb-box > img { max-width: 94vw; max-height: 72vh; }
  .lb-close { top: .75rem; right: .75rem; }
  .lb-info { width: 100%; justify-content: center; padding: .65rem .8rem; }

  .error-screen { padding: .9rem; }
  .error-card { padding: 1.6rem 1.1rem; border-radius: 16px; }
  .error-icon { width: 62px; height: 62px; border-radius: 18px; font-size: 1.65rem; }
  .error-home { width: 100%; }
  .notice-box { max-width: 100%; }
  .notice-icon { width: 60px; height: 60px; border-radius: 18px; font-size: 1.65rem; }
  .toast-stack {
    left: .75rem;
    right: .75rem;
    bottom: .75rem;
    width: auto;
  }
  .pv-toast { padding: .78rem .85rem; }
}

@media (max-width: 380px) {
  .intro-brand span:last-child { font-size: .88rem; }
  .nav-btn { width: 36px; height: 36px; }
  .user-avatar { width: 30px; height: 30px; }
  .search-wrap input { font-size: .82rem; }
  .modal-box { padding: .85rem; }
  .input-wrap input,
  .input-wrap select { font-size: .86rem; }
  .eye-btn { width: 38px; min-width: 38px; }
}