/* ========= Pixvive UI (Light, matches site) ========= */
:root{
  --bg:#1f2020;
  --surface:#ffffff;
  --surface-2:#f1f4f9;
  --text:#1f2a37;
  --muted:#667085;
  --border:#e5e7eb;
  --primary:#1FE0BA;       /* Divi default accent */
  --primary-600:#1FE0BA;
  --success:#16a34a;
  --danger:#ef4444;
  --radius:14px;
  --shadow: 0 6px 24px rgba(17,24,39,.08);
}

html,body{ height:100% }
body{
  background: radial-gradient(1200px 800px at 60% -20%, rgba(46,163,242,.05), transparent 60%), var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* Navbar (light) */
.navbar{
  background: -webkit-gradient(linear, left top, left bottom, from(#ffffffcc), to(#ffffffaa));
  background: linear-gradient(180deg, #ffffffcc, #ffffffaa);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.navbar-brand{ color: var(--text); letter-spacing:.2px }
.nav-link{
  color:#334155 !important;
  opacity:.85; -webkit-transition: opacity .18s ease, -webkit-transform .18s ease; transition: opacity .18s ease, -webkit-transform .18s ease; transition: opacity .18s ease, transform .18s ease; transition: opacity .18s ease, transform .18s ease, -webkit-transform .18s ease;
}
.nav-link:hover{ opacity:1; -webkit-transform: translateY(-1px); transform: translateY(-1px) }

/* Containers & cards */
.container{ max-width: 1180px; }
.card{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  -webkit-box-shadow: var(--shadow);
          box-shadow: var(--shadow);
  -webkit-transition: border-color .18s ease, -webkit-transform .18s ease, -webkit-box-shadow .18s ease;
  transition: border-color .18s ease, -webkit-transform .18s ease, -webkit-box-shadow .18s ease;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, -webkit-transform .18s ease, -webkit-box-shadow .18s ease;
}
.card:hover{ -webkit-transform: translateY(-2px); transform: translateY(-2px); border-color:#dee3eb }

/* Headings */
h4,h5{ letter-spacing:.2px }
.text-muted{ color: var(--muted) !important }

/* Buttons */
.btn{
  border-radius: 12px; position: relative; overflow: hidden;
  -webkit-transition: border-color .2s ease, background .2s ease, -webkit-transform .15s ease, -webkit-filter .15s ease;
  transition: border-color .2s ease, background .2s ease, -webkit-transform .15s ease, -webkit-filter .15s ease;
  transition: transform .15s ease, filter .15s ease, border-color .2s ease, background .2s ease;
  transition: transform .15s ease, filter .15s ease, border-color .2s ease, background .2s ease, -webkit-transform .15s ease, -webkit-filter .15s ease;
}
.btn:active{ -webkit-transform: translateY(1px); transform: translateY(1px) }

.btn-primary{
  background: -webkit-gradient(linear, left top, left bottom, from(var(--primary)), to(var(--primary-600)));
  background: linear-gradient(180deg, var(--primary), var(--primary-600));
  border-color: var(--primary-600); color:#fff;
  -webkit-box-shadow: 0 8px 18px rgba(46,163,242,.25);
          box-shadow: 0 8px 18px rgba(46,163,242,.25);
}
.btn-primary:hover{ -webkit-filter: brightness(1.05); filter: brightness(1.05) }

.btn-outline-light{
  border-color:#cfd7e6; color:#1f2937; background:#fff;
}
.btn-outline-light:hover{ background:#f8fafc }

.btn-outline-danger{ border-color:#f3a4ad; color: var(--danger); background:#fff }
.btn-outline-danger:hover{ background:#fff5f6 }

/* Ripple (subtle) */
.ripple{
  position:absolute; border-radius:50%; pointer-events:none;
  background: rgba(255,255,255,.6);
  -webkit-transform: scale(0);
          transform: scale(0); -webkit-animation: ripple .55s ease-out; animation: ripple .55s ease-out; opacity:.9;
}
@-webkit-keyframes ripple{ to { -webkit-transform: scale(2.6); transform: scale(2.6); opacity:0 } }
@keyframes ripple{ to { -webkit-transform: scale(2.6); transform: scale(2.6); opacity:0 } }

/* Inputs */
.form-control, .form-select, textarea{
  background:#fff; color: var(--text);
  border:1px solid #d8dee9; border-radius: 12px;
  -webkit-transition: border-color .2s ease, background .2s ease, -webkit-box-shadow .2s ease;
  transition: border-color .2s ease, background .2s ease, -webkit-box-shadow .2s ease;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, -webkit-box-shadow .2s ease;
}
.form-control:focus, .form-select:focus, textarea:focus{
  border-color: var(--primary);
  -webkit-box-shadow: 0 0 0 4px rgba(46,163,242,.15);
          box-shadow: 0 0 0 4px rgba(46,163,242,.15);
  background:#fff;
}

/* File input */
input[type="file"].form-control{
  padding:.55rem .75rem; cursor: pointer;
}
input[type="file"].form-control::-webkit-file-upload-button{
  border:0; padding:.45rem .7rem; margin-right:.6rem;
  border-radius:8px; background: #edf2f7; color:#1f2937;
}

/* “Images / Videos” filter pills */
.btn-group .btn{
  border-radius: 999px !important; padding:.35rem .85rem;
}
.btn-group .btn.active{
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(46,163,242,.15)), to(rgba(46,163,242,.10)));
  background: linear-gradient(180deg, rgba(46,163,242,.15), rgba(46,163,242,.10));
  border-color: rgba(46,163,242,.35); color:#0f172a;
}

/* Thumbnails */
.thumb{
  aspect-ratio: 1/1; -o-object-fit: cover; object-fit: cover; border-radius: 12px;
  -webkit-transition: -webkit-transform .2s ease, -webkit-box-shadow .2s ease, -webkit-filter .2s ease;
  transition: -webkit-transform .2s ease, -webkit-box-shadow .2s ease, -webkit-filter .2s ease;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, -webkit-transform .2s ease, -webkit-box-shadow .2s ease, -webkit-filter .2s ease;
  -webkit-box-shadow: 0 8px 18px rgba(2,6,23,.06);
          box-shadow: 0 8px 18px rgba(2,6,23,.06);
}
.card .thumb:hover{
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 12px 28px rgba(2,6,23,.12);
          box-shadow: 0 12px 28px rgba(2,6,23,.12);
  -webkit-filter: saturate(1.04);
          filter: saturate(1.04);
}

/* Badges */
.badge-pill{ border-radius: 999px; background:#eef2f7; color:#0f172a }

/* Animations (gentle) */
.fade-in{ -webkit-animation: fadeIn .25s ease both; animation: fadeIn .25s ease both }
.slide-up{ -webkit-animation: slideUp .25s ease both; animation: slideUp .25s ease both }
@-webkit-keyframes fadeIn{ from{ opacity:0 } to { opacity:1 } }
@keyframes fadeIn{ from{ opacity:0 } to { opacity:1 } }
@-webkit-keyframes slideUp{ from{ opacity:0; -webkit-transform: translateY(8px); transform: translateY(8px) } to { opacity:1; -webkit-transform:none; transform:none } }
@keyframes slideUp{ from{ opacity:0; -webkit-transform: translateY(8px); transform: translateY(8px) } to { opacity:1; -webkit-transform:none; transform:none } }
@media (prefers-reduced-motion: reduce){ .fade-in,.slide-up{ -webkit-animation:none; animation:none } }

/* Skeletons */
.skel{ position:relative; overflow:hidden; background:#eef2f7; border-radius:12px }
.skel::after{
  content:""; position:absolute; inset:0;
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(rgba(255,255,255,.6)), to(transparent));
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%); -webkit-animation: shimmer 1.05s infinite; animation: shimmer 1.05s infinite;
}
@-webkit-keyframes shimmer{ to { -webkit-transform: translateX(100%); transform: translateX(100%) } }
@keyframes shimmer{ to { -webkit-transform: translateX(100%); transform: translateX(100%) } }

/* Toast (light) */
.toast-wrap{
  position: fixed; left:50%; top:18px; -webkit-transform: translateX(-50%); transform: translateX(-50%);
  display: grid; gap:8px; z-index: 9999; pointer-events: none;
}
.toast-item{
  pointer-events: auto;
  background: #ffffff;
  border:1px solid #dfe5f0;
  color:#0f172a; padding:.6rem .9rem; border-radius: 12px;
  -webkit-box-shadow: 0 12px 32px rgba(15,23,42,.12);
          box-shadow: 0 12px 32px rgba(15,23,42,.12);
  -webkit-transform: translateY(-10px);
          transform: translateY(-10px); opacity:0;
  -webkit-transition: opacity .22s ease, -webkit-transform .22s ease;
  transition: opacity .22s ease, -webkit-transform .22s ease;
  transition: transform .22s ease, opacity .22s ease;
  transition: transform .22s ease, opacity .22s ease, -webkit-transform .22s ease;
}
.toast-item.show{ -webkit-transform:none; transform:none; opacity:1 }

/* Utilities */
.small-muted{ color: var(--muted) }
.mt-2p{ margin-top:.25rem }