/* ==========================================================================
   sevelink — Shared Styles
   Dark, premium, glassmorphism Web3-style UI
   ========================================================================== */

:root{
  --bg-0:#06070d;
  --bg-1:#0b0d17;
  --accent-1:#7c5cff;
  --accent-2:#00e0c6;
  --accent-3:#ff5cad;
  --glass-border: rgba(255,255,255,0.08);
}

*{ -webkit-tap-highlight-color: transparent; }

html,body{
  background: var(--bg-0);
  color:#eef0f8;
  font-family:'Plus Jakarta Sans','Inter',system-ui,-apple-system,sans-serif;
  scroll-behavior:smooth;
  overscroll-behavior-y: none;
}

/* Custom scrollbar */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.12); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,0.22); }

/* Animated gradient blobs background */
.bg-scene{
  position:fixed; inset:0; z-index:-1; overflow:hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(124,92,255,0.25), transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(0,224,198,0.18), transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(255,92,173,0.14), transparent 50%),
    var(--bg-0);
}
.bg-scene::before{
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse at 50% 30%, black 20%, transparent 75%);
}
.blob{
  position:absolute; border-radius:50%; filter: blur(90px); opacity:0.55;
  animation: float 16s ease-in-out infinite;
}
.blob-1{ width:420px; height:420px; background:var(--accent-1); top:-120px; left:-100px; }
.blob-2{ width:380px; height:380px; background:var(--accent-2); bottom:-140px; right:-100px; animation-delay:-6s; }
.blob-3{ width:300px; height:300px; background:var(--accent-3); top:40%; left:60%; animation-delay:-11s; opacity:0.3;}

@keyframes float{
  0%,100%{ transform: translate(0,0) scale(1); }
  33%{ transform: translate(30px,-40px) scale(1.08); }
  66%{ transform: translate(-25px,25px) scale(0.95); }
}

/* Glassmorphism panels */
.glass{
  background: linear-gradient(160deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 8px 40px rgba(0,0,0,0.35);
}

.glass-strong{
  background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}

.gradient-text{
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2) 55%, var(--accent-3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.btn-primary{
  background: linear-gradient(90deg, var(--accent-1), #5b3df0);
  box-shadow: 0 8px 30px -8px rgba(124,92,255,0.7);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-primary:hover{ transform: translateY(-2px); filter:brightness(1.08); box-shadow: 0 12px 34px -6px rgba(124,92,255,0.85); }
.btn-primary:active{ transform: translateY(0px) scale(0.98); }

.btn-ghost{
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.btn-ghost:hover{ background: rgba(255,255,255,0.06); transform: translateY(-1px); }

/* Dropzone */
.dropzone{
  border: 1.5px dashed rgba(255,255,255,0.18);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.dropzone.drag-over{
  border-color: var(--accent-2);
  background: rgba(0,224,198,0.06);
  transform: scale(1.01);
}

/* Toggle switch */
.switch{
  width:52px; height:30px; border-radius:999px; position:relative; cursor:pointer;
  background: rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.14);
  transition: background .25s ease;
  flex-shrink:0;
}
.switch.on{ background: linear-gradient(90deg,var(--accent-1),var(--accent-2)); border-color: transparent; }
.switch .knob{
  position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:#fff; box-shadow:0 2px 6px rgba(0,0,0,0.35);
  transition: left .25s cubic-bezier(.4,0,.2,1);
}
.switch.on .knob{ left:25px; }

/* Progress bar */
.progress-track{ background: rgba(255,255,255,0.08); border-radius:999px; overflow:hidden; }
.progress-fill{ background: linear-gradient(90deg,var(--accent-1),var(--accent-2)); transition: width .2s ease; }

/* Skeleton loader */
.skeleton{
  background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.12) 37%, rgba(255,255,255,0.05) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer{ 0%{background-position:100% 0;} 100%{background-position:0 0;} }

/* Toast */
#toast-wrap{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:100; display:flex; flex-direction:column; gap:8px; align-items:center; width:calc(100% - 32px); max-width:420px;}
.toast{
  padding:12px 18px; border-radius:14px; font-size:14px; font-weight:500;
  animation: toast-in .3s ease;
  width:100%;
}
@keyframes toast-in{ from{ opacity:0; transform: translateY(12px);} to{ opacity:1; transform: translateY(0);} }

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

/* Card hover lift */
.card-lift{ transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card-lift:hover{ transform: translateY(-3px); border-color: rgba(255,255,255,0.18); }

/* ===== view.html specific: block selection / long-press save ===== */
.protected, .protected *{
  -webkit-user-select:none; -moz-user-select:none; user-select:none;
  -webkit-touch-callout:none; /* disables iOS long-press "Save Image" menu */
  -webkit-user-drag:none;
}
.media-guard{
  position:absolute; inset:0; z-index:5; background:transparent;
  -webkit-touch-callout:none;
}

.viewer-frame{
  border:1px solid rgba(255,255,255,0.1);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

/* Mobile app-like safe-area padding */
.safe-top{ padding-top: max(16px, env(safe-area-inset-top)); }
.safe-bottom{ padding-bottom: max(16px, env(safe-area-inset-bottom)); }

@media (max-width: 640px){
  .blob-1{ width:280px; height:280px; }
  .blob-2{ width:260px; height:260px; }
  .blob-3{ display:none; }
}

/* ==========================================================================
   Landing / Auth / Dashboard additions
   ========================================================================== */

/* Navbar */
.navbar{
  background: rgba(10,11,20,0.55);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.nav-link{
  position:relative; color: rgba(255,255,255,0.6); transition:color .2s ease;
}
.nav-link:hover{ color:#fff; }

/* Hero */
.hero-badge{
  background: linear-gradient(90deg, rgba(124,92,255,0.12), rgba(0,224,198,0.12));
  border:1px solid rgba(255,255,255,0.12);
}

.text-balance{ text-wrap: balance; }

.hero-glow{
  position:absolute; inset:0; z-index:-1;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(124,92,255,0.25), transparent 60%);
}

/* Feature / step cards */
.feature-card{
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border: 1px solid var(--glass-border);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.feature-card:hover{
  transform: translateY(-4px);
  border-color: rgba(124,92,255,0.35);
  background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
}
.icon-tile{
  width:44px; height:44px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(140deg, rgba(124,92,255,0.18), rgba(0,224,198,0.12));
  border: 1px solid rgba(255,255,255,0.1);
}

.step-num{
  width:34px; height:34px; border-radius:10px; font-weight:800; font-size:13px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(140deg, var(--accent-1), var(--accent-2));
  color:#08090f;
}

/* Auth pages */
.auth-shell{ min-height:100dvh; display:flex; align-items:center; justify-content:center; }
.auth-card{ width:100%; max-width:420px; }

.field-label{ font-size:12.5px; font-weight:600; color: rgba(255,255,255,0.55); margin-bottom:6px; display:block; }
.field-input{
  width:100%; background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  border-radius:12px; padding:12px 14px; font-size:14px; color:#fff; outline:none;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.field-input::placeholder{ color: rgba(255,255,255,0.28); }
.field-input:focus{
  border-color: var(--accent-1);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 3px rgba(124,92,255,0.15);
}
.field-input.field-error{ border-color:#f87171; box-shadow: 0 0 0 3px rgba(248,113,113,0.12); }

.divider-text{ display:flex; align-items:center; gap:10px; color: rgba(255,255,255,0.3); font-size:12px; }
.divider-text::before, .divider-text::after{ content:''; flex:1; height:1px; background: rgba(255,255,255,0.1); }

.btn-social{
  background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12);
  transition: background .2s ease, transform .2s ease;
}
.btn-social:hover{ background: rgba(255,255,255,0.09); transform: translateY(-1px); }

.spinner{
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.25); border-top-color:#fff;
  animation: spin .7s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* Avatar bubble */
.avatar-bubble{
  width:34px; height:34px; border-radius:50%;
  background: linear-gradient(140deg, var(--accent-1), var(--accent-3));
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px; color:#fff; flex-shrink:0;
}