:root {
  --bg: #f6fbfc;
  --bg-soft: rgba(8, 175, 193, 0.08);
  --card: rgba(255, 255, 255, 0.92);
  --line: rgba(9, 43, 76, 0.12);
  --text: #092B4C;
  --muted: #5C7185;
  --accent: #08AFC1;
  --accent-2: #092B4C;
  --success: #15966F;
  --danger: #FF5151;
  --shadow: 0 20px 60px rgba(9, 43, 76, 0.12);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(8,175,193,.13), transparent 24%),
    radial-gradient(circle at bottom right, rgba(9,43,76,.08), transparent 28%),
    linear-gradient(135deg, #fbfeff 0%, #edf8fa 100%);
  color: var(--text);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.site-shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0 60px; position: relative; z-index: 2; }
.bg-orb { position: fixed; width: 28rem; height: 28rem; border-radius: 50%; filter: blur(70px); opacity: .24; pointer-events: none; z-index: 0; }
.orb-1 { top: -6rem; left: -8rem; background: #5ed4df; }
.orb-2 { right: -6rem; bottom: -8rem; background: #9fdde4; }
.hero-card, .glass-card, .upload-panel, .gallery-item, .moderation-card, .auth-card {
  background: var(--card);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}
.hero-card {
  border-radius: var(--radius-xl);
  padding: 28px;
  display: grid;
  grid-template-columns: 1.2fr .9fr;
  gap: 24px;
  align-items: stretch;
}
.hero-copy h1, .page-header h1, .auth-card h1 { margin: 10px 0 14px; line-height: 1.02; }
.hero-copy h1 { font-size: clamp(2.3rem, 5vw, 4.5rem); }
.hero-copy p, .page-header p, .muted, .moderation-meta p { color: var(--muted); }
.eyebrow, .slideshow-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(8,175,193,0.18);
  background: rgba(8,175,193,0.08);
  color: var(--accent);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.button {
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: 14px 18px;
  font-weight: 700;
  font-size: .98rem;
  transition: transform .2s ease, opacity .2s ease, background .2s ease, box-shadow .2s ease;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.button:hover {
  transform: translateY(-1px);
}

.button.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
  box-shadow: 0 10px 24px rgba(8,175,193,.28);
}

.button.ghost {
  background: rgba(8,175,193,0.08);
  color: var(--text);
  border: 1px solid var(--line);
}

.button.subtle {
  background: rgba(8,175,193,.12);
  color: var(--accent);
}

.button.danger {
  background: rgba(194,65,65,.12);
  color: #C83E45;
}

.button.small {
  padding: 9px 12px;
  font-size: .84rem;
  line-height: 1.15;
}
.upload-panel { border-radius: var(--radius-xl); padding: 24px; }
.upload-form { display: grid; gap: 16px; }
.upload-dropzone {
  min-height: 260px;
  border: 1.5px dashed rgba(8,175,193,.28);
  border-radius: 24px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 28px;
  background: linear-gradient(180deg, rgba(8,175,193,.06), rgba(9,43,76,.025));
}
.upload-dropzone input { display: none; }
.upload-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 2rem;
  margin-bottom: 14px;
  background: rgba(8,175,193,.12);
  color: var(--accent);
}
.info-grid, .stats-grid { display: grid; gap: 18px; margin-top: 24px; grid-template-columns: repeat(3, 1fr); }
.glass-card { padding: 22px; border-radius: var(--radius-lg); }
.page-header { margin-bottom: 24px; }
.page-header.compact { padding-top: 8px; }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.gallery-item {
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.gallery-item img, .moderation-image-wrap img {
  width: 100%; height: 100%; object-fit: cover;
}
.empty-state { text-align: center; padding: 40px 24px; }
.flash {
  padding: 14px 16px; border-radius: 16px; margin-bottom: 18px; font-weight: 600;
  border: 1px solid var(--line);
}
.flash-success {
  background: rgba(31,143,67,.10);
  color: #116D55;
}

.flash-error {
  background: rgba(194,65,65,.10);
  color: #C83E45;
}.auth-wrap { min-height: 80vh; display: grid; place-items: center; }
.auth-card { width: min(480px, 100%); }
.form-row { display: grid; gap: 8px; margin-bottom: 14px; }
.form-row input {
  width: 100%;
  background: #ffffff;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  font: inherit;
}
.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.moderation-card { padding: 14px; border-radius: 20px; }
.moderation-image-wrap { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 16px; }
.moderation-meta h3 { margin: 14px 0 8px; font-size: 1rem; }
.moderation-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.moderation-actions form { margin: 0; }
.stat-card { text-align: center; }
.stat-card strong { display: block; font-size: 2rem; margin-bottom: 8px; }
.slideshow-page { overflow: hidden; background: #000; }
.slideshow-stage { position: fixed; inset: 0; background: #000; isolation: isolate; }
.slideshow-layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity var(--fade-ms, 900ms) ease-in-out;
  will-change: opacity;
}
.slideshow-layer.is-active { opacity: 1; }
.slideshow-layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.slideshow-empty {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  color: white;
  text-align: center;
  font-size: clamp(1.1rem, 2vw, 1.8rem);
  padding: 24px;
  z-index: 2;
}
.slideshow-logo {
  position: absolute;
  z-index: 5;
  width: min(18vw, 220px);
  max-width: 220px;
  min-width: 90px;
  opacity: .9;
  pointer-events: none;
}
.slideshow-logo svg,
.slideshow-logo img {
  display: block;
  width: 100%;
  height: auto;
}
.slideshow-logo--top-left { top: 24px; left: 24px; }
.slideshow-logo--top-center { top: 24px; left: 50%; transform: translateX(-50%); }
.slideshow-logo--top-right { top: 24px; right: 24px; }
.slideshow-logo--bottom-left { bottom: 24px; left: 24px; }
.slideshow-logo--bottom-center { bottom: 24px; left: 50%; transform: translateX(-50%); }
.slideshow-logo--bottom-right { bottom: 24px; right: 24px; }
@media (max-width: 860px) {
  .hero-card { grid-template-columns: 1fr; }
  .info-grid, .stats-grid { grid-template-columns: 1fr; }
  .slideshow-logo { width: min(34vw, 160px); }
  .slideshow-logo--top-left { top: 16px; left: 16px; }
  .slideshow-logo--top-center { top: 16px; }
  .slideshow-logo--top-right { top: 16px; right: 16px; }
  .slideshow-logo--bottom-left { bottom: 16px; left: 16px; }
  .slideshow-logo--bottom-center { bottom: 16px; }
  .slideshow-logo--bottom-right { bottom: 16px; right: 16px; }
}

.filter-bar {
  margin-bottom: 18px;
}
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(8,175,193,.06);
  border: 1px solid var(--line);
  font-weight: 700;
  color: var(--text);
}

.filter-tab span {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(8,175,193,.12);
  font-size: .88rem;
}

.filter-tab.is-active {
  background: linear-gradient(135deg, rgba(8,175,193,.18), rgba(9,43,76,.10));
}
.bulk-toolbar {
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.select-all-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}
.bulk-toolbar-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.selection-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: .95rem;
  font-weight: 600;
}
.selection-badge input,
.select-all-wrap input {
  width: 18px;
  height: 18px;
}
.status-pill {
  display: inline-flex;
  margin-top: 4px;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  border: 1px solid var(--line);
}
.status-pending { background: rgba(255,255,255,.06); }
.status-approved { background: rgba(34,197,94,.16); color: #d9ffe4; }
.status-rejected { background: rgba(239,68,68,.16); color: #ffd8d8; }
.moderation-actions-3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 860px) {
  .bulk-toolbar {
    align-items: flex-start;
  }
  .bulk-toolbar-actions,
  .moderation-actions-3 {
    width: 100%;
    grid-template-columns: 1fr;
  }
}

.archive-panel {
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.archive-panel h2 {
  margin: 0 0 8px;
}
.moderation-actions-5 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1180px) {
  .moderation-actions-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .archive-panel {
    align-items: flex-start;
  }
  .moderation-actions-5 {
    grid-template-columns: 1fr;
  }
}

.upload-count { display:block; margin-top:10px; }
.bulk-toolbar-actions .button { min-width: 0; }
.moderation-actions .button { width: 100%; min-width: 0; }
.moderation-meta h3 { overflow-wrap:anywhere; }


.site-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}

.site-logo img {
  height: 70px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.08));
}


.hero-brand {
  margin-bottom: 14px;
}

.hero-brand img {
  height: 60px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.08));
}.form-row select,
.form-row textarea {
  width: 100%;
  background: #ffffff;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  font: inherit;
}
.hero-brand svg { height:60px; width:auto; max-width:260px; object-fit:contain; filter:drop-shadow(0 4px 10px rgba(0,0,0,0.08)); }
.event-edit-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.event-edit-grid .form-row { margin:0; }
.moderator-list { display:grid; gap:8px; margin-top:10px; }
.moderator-row { padding:10px; border:1px solid var(--line); border-radius:14px; }


/* Event upload personalization */
.event-upload-hero{max-width:1180px;margin:0 auto 22px;border-radius:28px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.18);background:rgba(255,255,255,.08)}
.event-upload-hero img{display:block;width:100%;height:clamp(220px,36vw,520px);object-fit:cover}
.qr-created-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center}
.qr-box{display:flex;flex-direction:column;align-items:center;gap:10px}
.qr-box img{width:220px;max-width:100%;height:auto;background:#fff;padding:10px;border-radius:16px}
.danger-zone{padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}
@media (max-width:760px){.qr-created-card{grid-template-columns:1fr}.qr-box{align-items:flex-start}}

/* VivaPic public landing page */
.vivapic-wordmark,.landing-brand{font-size:2rem;font-weight:800;letter-spacing:-.06em;color:var(--accent)}
.public-footer{margin-top:24px;text-align:center;color:var(--muted);font-size:.9rem}
.landing-nav{display:flex;align-items:center;justify-content:space-between;padding:8px 2px 34px}.landing-nav nav{display:flex;gap:24px;color:var(--muted);font-weight:700}.landing-nav nav a:hover{color:var(--accent)}
.landing-hero{min-height:560px;border-radius:36px;padding:clamp(28px,5vw,64px);display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(235,249,251,.96));border:1px solid var(--line);box-shadow:var(--shadow)}
.landing-hero h1{font-size:clamp(2.7rem,6vw,5.6rem);letter-spacing:-.06em;line-height:.94;margin:18px 0 24px}.landing-hero p{font-size:1.15rem;line-height:1.7;color:var(--muted);max-width:720px}
.landing-demo-card{position:relative;min-height:430px;display:grid;place-items:center}.demo-screen{width:min(100%,460px);aspect-ratio:16/10;border-radius:28px;background:linear-gradient(135deg,#092B4C,#08AFC1);color:white;padding:34px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:0 30px 70px rgba(9,43,76,.28)}.demo-screen span{position:absolute;top:22%;margin-left:10px;background:#fff;color:var(--accent);padding:7px 11px;border-radius:999px;font-size:.75rem;font-weight:800}.demo-screen strong{font-size:1.8rem}.demo-screen small{margin-top:10px;opacity:.8;line-height:1.5}.demo-phone{position:absolute;right:0;bottom:0;width:165px;height:245px;border:8px solid #092B4C;border-radius:30px;background:white;padding:22px;color:var(--accent);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.2)}.demo-phone span{display:grid;place-items:center;width:72px;height:72px;background:var(--bg-soft);border-radius:18px;font-size:1.4rem;font-weight:800;margin-bottom:18px}
.landing-section{padding:96px 0 16px}.section-heading{max-width:760px;margin-bottom:34px}.section-heading h2,.contact-panel h2{font-size:clamp(2rem,4vw,3.5rem);letter-spacing:-.04em;margin:14px 0}.section-heading p,.contact-panel p{color:var(--muted);line-height:1.7}.feature-grid,.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature-grid .glass-card,.price-card{padding:28px;border-radius:24px}.feature-grid h3,.price-card h3{font-size:1.3rem;margin:0 0 12px}.feature-grid p,.price-card p{color:var(--muted);line-height:1.65}.price-card{background:rgba(255,255,255,.9);border:1px solid var(--line);box-shadow:var(--shadow)}.price-card.featured{transform:translateY(-10px);border-color:rgba(8,175,193,.34)}.price{font-size:2rem!important;font-weight:800;color:var(--text)!important}.price-card .button{margin-top:12px;width:100%}
.contact-panel{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:42px;margin-top:80px;border-radius:28px;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(235,249,251,.96));border:1px solid var(--line);box-shadow:var(--shadow)}.landing-footer{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:70px;padding:28px 0 0;border-top:1px solid var(--line);color:var(--muted)}.landing-footer strong{color:var(--accent)}
@media (max-width:900px){.landing-hero{grid-template-columns:1fr}.landing-demo-card{min-height:360px}.feature-grid,.pricing-grid{grid-template-columns:1fr}.price-card.featured{transform:none}.contact-panel{display:block}.contact-actions{margin-top:24px}}
@media (max-width:640px){.landing-nav nav{display:none}.landing-hero{padding:28px 22px;min-height:auto}.landing-hero h1{font-size:2.7rem}.landing-demo-card{min-height:300px}.demo-phone{width:130px;height:200px}.landing-section{padding-top:64px}}


/* VivaPic brand system */
.vivapic-logo{display:block;width:auto;max-width:100%;height:auto}
.vivapic-logo--nav{width:210px;max-height:74px}
.vivapic-logo--upload{width:min(360px,100%);max-height:110px}
.vivapic-logo--footer{width:150px;max-height:54px}
.landing-brand{display:inline-flex;align-items:center}
.hero-brand .vivapic-logo{filter:none}
.button.primary{background:linear-gradient(135deg,#08AFC1 0%,#0795A5 48%,#092B4C 100%);box-shadow:0 10px 26px rgba(8,175,193,.24)}
.button.primary:hover{box-shadow:0 14px 32px rgba(8,175,193,.30)}
.eyebrow{border-color:rgba(8,175,193,.22);background:rgba(8,175,193,.08);color:#087E8B}
.price-card.featured{position:relative;border-color:rgba(255,81,81,.32)}
.price-card.featured::before{content:'';position:absolute;top:0;left:28px;right:28px;height:4px;border-radius:0 0 999px 999px;background:#FF5151}
.demo-screen span{box-shadow:0 0 0 3px rgba(255,81,81,.15)}
.demo-phone span{color:#092B4C}
.landing-footer strong{display:flex;align-items:center}
.upload-dropzone:hover{border-color:rgba(8,175,193,.48);background:linear-gradient(180deg,rgba(8,175,193,.09),rgba(9,43,76,.025))}
@media (max-width:640px){.vivapic-logo--nav{width:170px}.vivapic-logo--footer{width:130px}.vivapic-logo--upload{width:min(300px,100%)}}

/* VivaPic contact + legal pages */
.contact-section{display:grid;grid-template-columns:.8fr 1.2fr;gap:34px;align-items:start}.contact-copy{padding-top:18px}.contact-copy h2{font-size:clamp(2rem,4vw,3.5rem);letter-spacing:-.04em;margin:14px 0}.contact-copy p{color:var(--muted);line-height:1.7}.text-link{color:var(--accent);font-weight:700}.contact-form{padding:30px}.contact-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}.form-row span{font-weight:700;font-size:.92rem}.form-row textarea,.form-row select{width:100%;background:#fff;color:var(--text);border:1px solid var(--line);border-radius:14px;padding:14px 16px;font:inherit;resize:vertical}.form-row textarea:focus,.form-row input:focus,.form-row select:focus{outline:3px solid rgba(8,175,193,.12);border-color:rgba(8,175,193,.5)}.captcha-box{display:grid;grid-template-columns:1fr 150px;gap:18px;align-items:end;padding:18px;margin:8px 0 16px;border-radius:18px;background:linear-gradient(135deg,rgba(8,175,193,.08),rgba(9,43,76,.05));border:1px solid var(--line)}.captcha-box strong{display:block;font-size:1.25rem;margin:10px 0 4px}.captcha-box small{color:var(--muted)}.captcha-input{margin:0}.privacy-check{display:flex;gap:10px;align-items:flex-start;margin:6px 0 20px;color:var(--muted);font-size:.9rem;line-height:1.5}.privacy-check input{margin-top:3px;width:18px;height:18px;accent-color:var(--accent)}.hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.legal-wrap{padding:34px 0}.legal-card{max-width:860px;margin:0 auto;padding:clamp(26px,5vw,56px);background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow)}.legal-card h1{font-size:clamp(2.5rem,5vw,4.5rem);letter-spacing:-.05em;margin:16px 0 34px}.legal-card h2{margin:30px 0 8px;font-size:1.2rem}.legal-card p{color:var(--muted);line-height:1.75}.legal-card a{color:var(--accent);font-weight:700}.legal-notice{padding:16px 18px;border-radius:16px;background:rgba(255,81,81,.08);border:1px solid rgba(255,81,81,.2);margin-bottom:28px}.legal-notice p{margin:0;color:#9a3434}.legal-page .site-shell{max-width:1180px}
@media (max-width:900px){.contact-section{grid-template-columns:1fr}.contact-form-grid{grid-template-columns:1fr}.captcha-box{grid-template-columns:1fr}.contact-form{padding:24px}}

/* Persistent VivaPic branding in public and protected headers */
.landing-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 12px 18px;
  margin: -8px -18px 22px;
  border: 1px solid rgba(9,43,76,.08);
  border-radius: 0 0 20px 20px;
  background: rgba(246,251,252,.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(9,43,76,.07);
}
.app-brand-header {
  position: sticky;
  top: 0;
  z-index: 35;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 82px;
  padding: 10px 18px;
  margin: -16px 0 26px;
  border: 1px solid rgba(9,43,76,.10);
  border-radius: 20px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 34px rgba(9,43,76,.08);
}
.app-brand-link { display:flex; align-items:center; gap:16px; min-width:0; }
.vivapic-logo--backend { width: 178px; max-height: 62px; object-fit: contain; }
.app-brand-area {
  padding-left: 16px;
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: .86rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.app-brand-home { color: var(--accent-2); font-size: .9rem; font-weight: 700; white-space: nowrap; }
.app-brand-home:hover { color: var(--accent); }
@media (max-width: 640px) {
  .landing-nav { margin-left:-8px; margin-right:-8px; padding-left:12px; padding-right:12px; }
  .app-brand-header { min-height:72px; padding:9px 12px; margin-top:-18px; }
  .vivapic-logo--backend { width: 142px; max-height: 52px; }
  .app-brand-area { font-size:.72rem; padding-left:10px; }
  .app-brand-home { display:none; }
}