/* ShareHub — global styles */
:root { color-scheme: dark; }

html, body { background: #07070b; }

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Glassmorphism */
.glass {
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

/* Floating cards */
.float {
  transition: transform .35s ease, box-shadow .35s ease;
}
.float:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px -15px rgba(91,98,255,0.35);
}

/* Animated gradient blob backgrounds */
.bg-blobs {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.bg-blobs::before, .bg-blobs::after {
  content: ''; position: absolute; width: 480px; height: 480px; border-radius: 50%;
  filter: blur(110px); opacity: .35;
}
.bg-blobs::before { background: #5b62ff; top: -120px; left: -80px; animation: float1 14s ease-in-out infinite; }
.bg-blobs::after  { background: #c026d3; bottom: -160px; right: -60px; animation: float2 18s ease-in-out infinite; }
@keyframes float1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,30px)} }
@keyframes float2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-30px,-40px)} }

/* Loader (circle) */
.loader {
  width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite;
}
.loader-lg { width: 56px; height: 56px; border-width: 4px; border-top-color: #5b62ff; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Fade-in */
.animate-fade-in { animation: fadeIn .35s ease both; }
@keyframes fadeIn { from{opacity:0; transform: translateY(6px)} to{opacity:1; transform: translateY(0)} }

/* Material-style input + button (used on auth pages) */
.m-field { position: relative; }
.m-field input {
  width: 100%; background: transparent; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px; padding: 18px 14px 8px; color: #fff; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.m-field input:focus { border-color: #5b62ff; box-shadow: 0 0 0 4px rgba(91,98,255,.15); }
.m-field label {
  position: absolute; left: 14px; top: 14px; color: #9aa3b2; pointer-events: none;
  transition: all .15s ease; font-size: 14px;
}
.m-field input:focus + label,
.m-field input:not(:placeholder-shown) + label {
  top: 4px; font-size: 11px; color: #7c83ff;
}
.m-btn {
  position: relative; overflow: hidden; cursor: pointer;
  background: linear-gradient(135deg, #5b62ff, #c026d3);
  color: #fff; padding: 12px 20px; border-radius: 12px; font-weight: 600;
  box-shadow: 0 10px 30px -10px rgba(91,98,255,.6);
  transition: transform .15s ease, box-shadow .2s;
}
.m-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 40px -12px rgba(192,38,211,.6); }
.m-btn:active { transform: translateY(0); }
.m-btn .ripple {
  position: absolute; border-radius: 50%; background: rgba(255,255,255,.4);
  transform: scale(0); animation: ripple .6s linear; pointer-events: none;
}
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

/* Selly / display font helper */
.font-sell { font-family: 'Caveat', cursive; }

/* Custom scrollbar (dark) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #222433; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #2d3146; }

/* Pointer everywhere on buttons & links */
button, a, [role=button] { cursor: pointer; }