/* ============================================================
   BLINK — Design System  (style.css)
   Light, minimal, privacy-first aesthetic
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --white:      #ffffff;
  --bg:         #f5f6f8;
  --surface:    #ffffff;
  --border:     #e5e7eb;
  --border-md:  #d1d5db;
  --text:       #0f1117;
  --text-2:     #4b5563;
  --text-3:     #9ca3af;
  --accent:     #17a4eb;
  --accent-h:   #0e8fd4;
  --accent-lt:  #edf8ff;
  --accent-dk:  #0a6fa8;
  --danger:     #dc2626;
  --danger-lt:  #fef2f2;
  --success:    #16a34a;
  --success-lt: #f0fdf4;
  --warning:    #d97706;
  --warn-lt:    #fffbeb;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --shadow-lg:  0 20px 48px rgba(0,0,0,.11), 0 8px 16px rgba(0,0,0,.06);
  --radius:     12px;
  --radius-sm:  8px;
  --radius-lg:  18px;
  --sans:       'Inter', system-ui, -apple-system, sans-serif;
  --mono:       'JetBrains Mono', 'Fira Code', monospace;
  --ease:       cubic-bezier(.4,0,.2,1);
  --t:          .18s;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Screen capture prevention ───────────────────────────────
   The CSS alone can't block OS-level screenshots, but combined
   with JS we do everything the browser API allows.           */
.protected-media {
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

/* ── Utility ── */
.hidden { display: none !important; }

/* ────────────────────────────────────────────────────────────
   LOGO  (SVG shield-flash icon, used everywhere)
   ──────────────────────────────────────────────────────────── */
.logo {
  display: flex; align-items: center; gap: .55rem;
  text-decoration: none; flex-shrink: 0;
}
.logo-icon {
  width: 30px; height: 30px;
  background: var(--accent);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(23,164,235,.35);
  flex-shrink: 0;
}
.logo-icon svg { color: white; }
.logo-text {
  font-size: .95rem; font-weight: 700;
  color: var(--text); letter-spacing: -.02em;
}

/* ────────────────────────────────────────────────────────────
   INIT LOADER  (dashboard boot screen with progress)
   ──────────────────────────────────────────────────────────── */
.init-loader {
  position: fixed; inset: 0;
  background: var(--white);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.5rem; z-index: 500;
  padding: 2rem;
}
.init-logo-wrap {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: .5rem;
}
.init-logo-icon {
  width: 44px; height: 44px;
  background: var(--accent);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(23,164,235,.4);
  animation: logo-pulse 2s ease-in-out infinite;
}
@keyframes logo-pulse {
  0%,100% { box-shadow: 0 4px 16px rgba(37,99,235,.35); }
  50%      { box-shadow: 0 4px 32px rgba(37,99,235,.55); }
}
.init-logo-icon svg { color: white; }
.init-logo-text { font-size: 1.4rem; font-weight: 700; color: var(--text); letter-spacing: -.02em; }

.init-progress-wrap {
  width: 220px;
}
.init-progress-track {
  height: 4px; background: var(--border); border-radius: 2px; overflow: hidden;
  margin-bottom: .75rem;
}
.init-progress-bar {
  height: 100%; background: var(--accent); border-radius: 2px;
  width: 0%; transition: width .4s var(--ease);
}
.init-msg {
  font-size: .82rem; color: var(--text-3);
  text-align: center; letter-spacing: .01em;
  min-height: 1.2em;
  transition: opacity .3s;
}

/* ────────────────────────────────────────────────────────────
   AUTH PAGE
   ──────────────────────────────────────────────────────────── */
.auth-page {
  min-height: 100vh;
  display: grid; grid-template-columns: 1fr 1fr;
}

.auth-left {
  background: linear-gradient(150deg, #0a2540 0%, #0a6fa8 50%, #17a4eb 100%);
  display: flex; flex-direction: column;
  justify-content: space-between; padding: 3rem;
  position: relative; overflow: hidden;
}
.auth-left::before {
  content:''; position:absolute;
  width:500px; height:500px; border-radius:50%;
  background: rgba(255,255,255,.03);
  top:-180px; right:-150px; pointer-events:none;
}
.auth-left::after {
  content:''; position:absolute;
  width:280px; height:280px; border-radius:50%;
  background: rgba(255,255,255,.05);
  bottom:-80px; left:-60px; pointer-events:none;
}

/* Floating shield graphic on auth left */
.auth-shield-wrap {
  position:relative; z-index:1;
  display:flex; flex-direction:column; gap:1.5rem;
}
.auth-shield {
  width:72px; height:72px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  border-radius:20px;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(8px);
  animation: float 4s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-8px); }
}
.auth-shield svg { color:white; }

.auth-hero { position:relative; z-index:1; }
.auth-hero h1 {
  font-size: clamp(1.75rem,3vw,2.4rem);
  font-weight:800; color:white;
  line-height:1.2; letter-spacing:-.03em; margin-bottom:1rem;
}
.auth-hero p { font-size:.92rem; color:rgba(255,255,255,.7); line-height:1.7; max-width:340px; }

.auth-features { display:flex; flex-direction:column; gap:.75rem; position:relative; z-index:1; }
.auth-feature  { display:flex; align-items:center; gap:.75rem; font-size:.85rem; color:rgba(255,255,255,.75); }
.auth-feature-icon {
  width:28px; height:28px; border-radius:8px;
  background:rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.auth-feature-icon svg { color:rgba(255,255,255,.9); }
.auth-brand { position:relative; z-index:1; }
.auth-brand .logo-text { color:white; font-size:1.05rem; }
.auth-brand .logo-icon { background:rgba(255,255,255,.15); box-shadow:none; }

.auth-right {
  background:var(--white);
  display:flex; align-items:center; justify-content:center;
  padding:3rem 2rem;
}
.auth-form-wrap { width:100%; max-width:380px; }
.auth-form-title { font-size:1.5rem; font-weight:700; color:var(--text); letter-spacing:-.02em; margin-bottom:.35rem; }
.auth-form-sub   { font-size:.875rem; color:var(--text-2); margin-bottom:2rem; }

.auth-tabs {
  display:flex; background:var(--bg); border-radius:var(--radius-sm);
  padding:4px; margin-bottom:1.75rem; gap:4px;
}
.auth-tab {
  flex:1; padding:.55rem 1rem; border:none; background:transparent;
  border-radius:6px; font-size:.875rem; font-weight:500; color:var(--text-2);
  cursor:pointer; transition:all var(--t) var(--ease);
}
.auth-tab.active { background:var(--white); color:var(--text); box-shadow:var(--shadow-sm); }

/* ── Fields ── */
.field { margin-bottom:1rem; }
.field-label { display:block; font-size:.8rem; font-weight:500; color:var(--text-2); margin-bottom:.4rem; }
.field-input-wrap { position:relative; }
.field-icon {
  position:absolute; left:.875rem; top:50%; transform:translateY(-50%);
  color:var(--text-3); pointer-events:none; display:flex;
}
.field-input {
  width:100%; padding:.72rem .875rem .72rem 2.6rem;
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  font-size:.9rem; color:var(--text); background:var(--white);
  outline:none; transition:border-color var(--t), box-shadow var(--t);
  font-family:var(--sans);
}
.field-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.field-input::placeholder { color:var(--text-3); }
.field-input[readonly] { background:var(--bg); cursor:default; }
.field-eye {
  position:absolute; right:.875rem; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--text-3); cursor:pointer;
  padding:0; display:flex; transition:color .15s;
}
.field-eye:hover { color:var(--text-2); }

/* Password field with no left icon */
.field-input.no-icon { padding-left:.875rem; }

/* ── Buttons ── */
.btn-primary {
  width:100%; padding:.8rem 1.5rem;
  background:var(--accent); color:white; border:none;
  border-radius:var(--radius-sm); font-size:.9rem; font-weight:600;
  cursor:pointer; transition:all var(--t) var(--ease); margin-top:.5rem;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
}
.btn-primary:hover:not(:disabled) { background:var(--accent-h); transform:translateY(-1px); box-shadow:0 4px 12px rgba(23,164,235,.35); }
.btn-primary:active { transform:translateY(0); }
.btn-primary:disabled { opacity:.6; cursor:not-allowed; }

.btn-spinner {
  width:16px; height:16px;
  border:2px solid rgba(255,255,255,.3); border-top-color:white;
  border-radius:50%; animation:spin .6s linear infinite; display:none;
}
.btn-primary.loading .btn-spinner { display:block; }
.btn-primary.loading .btn-text    { display:none; }
@keyframes spin { to { transform:rotate(360deg); } }

.btn-outline {
  padding:.5rem 1rem; border:1.5px solid var(--border);
  border-radius:var(--radius-sm); background:var(--white);
  font-size:.82rem; font-weight:600; color:var(--text);
  cursor:pointer; transition:all var(--t); display:inline-flex;
  align-items:center; gap:.4rem;
}
.btn-outline:hover { border-color:var(--border-md); background:var(--bg); }
.btn-text-sm {
  background:none; border:none; font-size:.82rem; font-weight:500;
  color:var(--text-2); cursor:pointer; padding:.4rem .6rem;
  border-radius:var(--radius-sm); transition:all var(--t);
}
.btn-text-sm:hover { background:var(--bg); color:var(--text); }
.btn-icon {
  width:34px; height:34px; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--white);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text-2); transition:all var(--t);
}
.btn-icon:hover { background:var(--bg); color:var(--text); }

.form-msg {
  font-size:.8rem; padding:.6rem .875rem;
  border-radius:var(--radius-sm); margin-top:.75rem; display:none;
}
.form-msg.error   { background:var(--danger-lt); color:var(--danger); display:block; }
.form-msg.success { background:var(--success-lt); color:var(--success); display:block; }

/* ────────────────────────────────────────────────────────────
   GATEKEEPER PAGE
   ──────────────────────────────────────────────────────────── */
.gate-page {
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  background:var(--bg); padding:2rem;
}
.gate-nav {
  position:fixed; top:0; left:0; right:0; height:60px;
  background:var(--white); border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 1.5rem; z-index:10;
}
.gate-card {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  width:100%; max-width:420px; overflow:hidden; margin-top:72px;
}
.gate-preview {
  width:100%; height:230px; position:relative;
  overflow:hidden; background:#e2e5ea;
}
.gate-preview-img {
  width:100%; height:100%; object-fit:cover;
  filter:blur(28px) brightness(.8) saturate(1.2);
  transform:scale(1.1);
}
.gate-preview-overlay {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1rem;
}
.gate-lock {
  width:56px; height:56px; background:white;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
  animation: lock-bob 3s ease-in-out infinite;
}
@keyframes lock-bob {
  0%,100% { transform:translateY(0) scale(1); }
  50%      { transform:translateY(-5px) scale(1.03); }
}
.gate-lock svg { color:var(--accent); }
.gate-lock { border: 2px solid rgba(23,164,235,.15); }
.gate-preview-label {
  font-size:.8rem; font-weight:600; color:white;
  background:rgba(0,0,0,.4); padding:.35rem .9rem;
  border-radius:20px; backdrop-filter:blur(4px);
}
.gate-body { padding:1.75rem; }
.gate-from  { font-size:.78rem; color:var(--text-3); margin-bottom:.35rem; }
.gate-title { font-size:1.2rem; font-weight:700; color:var(--text); letter-spacing:-.02em; margin-bottom:.65rem; }
.gate-meta  { display:flex; gap:1rem; font-size:.8rem; color:var(--text-2); margin-bottom:1.5rem; flex-wrap:wrap; }
.gate-meta-item { display:flex; align-items:center; gap:.35rem; }
.btn-gate {
  width:100%; padding:.875rem; background:var(--accent); color:white;
  border:none; border-radius:var(--radius-sm); font-size:.95rem; font-weight:600;
  cursor:pointer; transition:all var(--t); display:flex; align-items:center;
  justify-content:center; gap:.5rem;
}
.btn-gate:hover { background:var(--accent-h); transform:translateY(-1px); box-shadow:0 4px 16px rgba(37,99,235,.3); }

/* ────────────────────────────────────────────────────────────
   MODAL
   ──────────────────────────────────────────────────────────── */
.modal-backdrop {
  position:fixed; inset:0; z-index:100;
  background:rgba(0,0,0,.45); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:1rem; animation:fade-in .15s ease;
}
@keyframes fade-in { from{opacity:0} to{opacity:1} }
.modal {
  background:var(--white); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); width:100%; max-width:400px;
  padding:2rem; animation:modal-up .22s cubic-bezier(.16,1,.3,1);
  position:relative; max-height:90vh; overflow-y:auto;
}
@keyframes modal-up { from{opacity:0;transform:translateY(18px) scale(.97)} to{opacity:1;transform:none} }
.modal-close {
  position:absolute; top:1.1rem; right:1.1rem;
  background:var(--bg); border:none; width:30px; height:30px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text-2); transition:all var(--t);
}
.modal-close:hover { background:var(--border); }
.modal-title { font-size:1.15rem; font-weight:700; color:var(--text); margin-bottom:.3rem; letter-spacing:-.02em; }
.modal-sub   { font-size:.82rem; color:var(--text-2); margin-bottom:1.5rem; }

/* ────────────────────────────────────────────────────────────
   VIEWER  (media display after auth)
   ──────────────────────────────────────────────────────────── */
.viewer-page {
  min-height:100vh; background:#0f1117;
  display:flex; flex-direction:column;
}
.viewer-nav {
  height:60px; background:rgba(15,17,23,.95);
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 1.5rem; position:sticky; top:0; z-index:10;
  backdrop-filter:blur(12px);
}
.viewer-nav .logo-text { color:white; }
.viewer-nav .logo-icon { background:rgba(23,164,235,.25); box-shadow:none; border:1px solid rgba(23,164,235,.3); }
.viewer-nav-right { display:flex; align-items:center; gap:.75rem; }
.viewer-body {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:2rem;
}
.viewer-stage {
  width:100%; max-width:860px; position:relative;
  border-radius:var(--radius); overflow:hidden;
  background:#000; box-shadow:0 24px 80px rgba(0,0,0,.6);
}

/* ── ANTI-CAPTURE: every layer we can control ── */
.viewer-stage img,
.viewer-stage video {
  display:block; width:100%; max-height:72vh; object-fit:contain;
  pointer-events:none;
  user-select:none; -webkit-user-select:none;
  -webkit-user-drag:none;
  /* Some browsers respect this for screenshots */
  -webkit-touch-callout:none;
}

/* Transparent shield layer — absorbs mouse events above media */
.media-shield {
  position:absolute; inset:0; z-index:5;
  background:transparent; pointer-events:all; cursor:default;
}

/* Watermark overlay — deters casual screenshot sharing */
.media-watermark {
  position:absolute; bottom:.875rem; right:1rem;
  z-index:6; user-select:none; pointer-events:none;
  display:flex; align-items:center; gap:.4rem;
  background:rgba(0,0,0,.35); backdrop-filter:blur(6px);
  padding:.3rem .65rem; border-radius:20px;
}
.media-watermark span { font-size:.7rem; font-weight:600; color:rgba(255,255,255,.6); letter-spacing:.03em; }

.viewer-info {
  margin-top:1.5rem; width:100%; max-width:860px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
}
.viewer-meta { font-size:.85rem; color:rgba(255,255,255,.5); }
.viewer-meta strong { color:rgba(255,255,255,.8); }

.expiry-badge {
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.8rem; font-weight:600; padding:.35rem .85rem;
  border-radius:20px; background:rgba(217,119,6,.2);
  color:#fbbf24; border:1px solid rgba(251,191,36,.2);
}
.expiry-badge.danger { background:rgba(220,38,38,.2); color:#f87171; border-color:rgba(248,113,113,.2); }

.expired-overlay {
  position:fixed; inset:0; background:rgba(15,17,23,.96);
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; z-index:200; text-align:center; padding:2rem;
}
.expired-icon { font-size:3rem; margin-bottom:1rem; }
.expired-title { font-size:1.5rem; font-weight:700; color:white; margin-bottom:.5rem; }
.expired-sub   { font-size:.9rem; color:rgba(255,255,255,.5); }
.btn-dash {
  margin-top:1.5rem; padding:.75rem 1.75rem;
  background:var(--accent); color:white; border:none;
  border-radius:var(--radius-sm); font-size:.9rem; font-weight:600;
  cursor:pointer; transition:all var(--t);
}
.btn-dash:hover { background:var(--accent-h); }

/* ────────────────────────────────────────────────────────────
   DASHBOARD  (sidebar layout)
   ──────────────────────────────────────────────────────────── */
.db-page { min-height:100vh; background:var(--bg); display:flex; flex-direction:column; }

.db-nav {
  height:60px; background:var(--white); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 1.5rem; position:sticky; top:0; z-index:10;
}
.db-nav-left  { display:flex; align-items:center; gap:1rem; }
.db-nav-right { display:flex; align-items:center; gap:.75rem; }

/* Nav links */
.nav-links { display:flex; align-items:center; gap:.25rem; margin-left:1.5rem; }
.nav-link {
  display:flex; align-items:center; gap:.4rem;
  padding:.4rem .75rem; border-radius:var(--radius-sm);
  font-size:.82rem; font-weight:500; color:var(--text-2);
  text-decoration:none; cursor:pointer; background:none; border:none;
  transition:all var(--t);
}
.nav-link:hover { background:var(--bg); color:var(--text); }
.nav-link.active { background:var(--accent-lt); color:var(--accent); }

.nav-avatar {
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg, #17a4eb, #0a6fa8);
  color:white; font-size:.8rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.nav-user-name { font-size:.875rem; font-weight:600; color:var(--text); }

.db-main { flex:1; max-width:860px; width:100%; margin:0 auto; padding:2rem 1.5rem; }
.db-header { margin-bottom:2rem; }
.db-title { font-size:1.4rem; font-weight:700; color:var(--text); letter-spacing:-.02em; margin-bottom:.25rem; }
.db-sub   { font-size:.875rem; color:var(--text-2); }

/* ── Upload card ── */
.upload-card {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.5rem;
  margin-bottom:1.5rem; box-shadow:var(--shadow-sm);
}
.upload-card-title { font-size:.95rem; font-weight:600; color:var(--text); margin-bottom:1.1rem; }

.upload-zone {
  border:2px dashed var(--border-md); border-radius:var(--radius-sm);
  padding:2.25rem 1.5rem; text-align:center; cursor:pointer;
  transition:all var(--t); position:relative; margin-bottom:1.25rem;
  background:var(--bg);
}
.upload-zone:hover, .upload-zone.drag-over {
  border-color:var(--accent); background:var(--accent-lt);
}
.upload-zone input[type="file"] {
  position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%;
}
.upload-zone-icon {
  width:48px; height:48px; background:var(--accent-lt); border-radius:12px;
  display:flex; align-items:center; justify-content:center; margin:0 auto .875rem;
}
.upload-zone-icon svg { color:var(--accent); }
.upload-zone-text { font-size:.875rem; color:var(--text-2); line-height:1.5; }
.upload-zone-text strong { color:var(--accent); font-weight:600; }

/* ── Expiry picker ── */
.expiry-section { margin-bottom:1.25rem; }
.expiry-section-title {
  font-size:.8rem; font-weight:500; color:var(--text-2);
  margin-bottom:.65rem; display:flex; align-items:center; gap:.4rem;
}
.expiry-presets { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.75rem; }
.expiry-option {
  padding:.35rem .8rem; border:1.5px solid var(--border);
  border-radius:20px; font-size:.8rem; font-weight:500; color:var(--text-2);
  background:var(--white); cursor:pointer; transition:all var(--t);
}
.expiry-option:hover   { border-color:var(--accent); color:var(--accent); }
.expiry-option.selected { border-color:var(--accent); background:var(--accent); color:white; }

/* Custom expiry input row */
.expiry-custom {
  display:flex; align-items:center; gap:.5rem;
  padding:.6rem .875rem; border:1.5px solid var(--border);
  border-radius:var(--radius-sm); background:var(--white);
}
.expiry-custom-label { font-size:.8rem; color:var(--text-2); white-space:nowrap; }
.expiry-custom-input {
  width:60px; border:none; outline:none; font-size:.875rem; font-weight:600;
  color:var(--text); text-align:center; font-family:var(--sans); background:transparent;
}
.expiry-custom-unit {
  font-size:.78rem; color:var(--text-3);
}
.expiry-custom-err { font-size:.75rem; color:var(--danger); display:none; margin-top:.35rem; }

/* ── Progress ── */
.upload-progress {
  height:4px; background:var(--border); border-radius:2px;
  margin-bottom:.75rem; overflow:hidden; display:none;
}
.upload-progress-bar {
  height:100%; background:linear-gradient(90deg, #17a4eb, #0e8fd4);
  width:0%; transition:width .25s var(--ease); border-radius:2px;
}
.upload-status { font-size:.82rem; color:var(--text-2); min-height:1.2em; margin-bottom:.875rem; }
.upload-status.error   { color:var(--danger); }
.upload-status.success { color:var(--success); }

/* ── Result card ── */
.result-card {
  background:var(--success-lt); border:1px solid #bbf7d0;
  border-radius:var(--radius-sm); padding:1rem; margin-bottom:1rem;
  animation:slide-up .3s cubic-bezier(.16,1,.3,1);
}
@keyframes slide-up { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.result-label {
  font-size:.78rem; font-weight:600; color:var(--success); margin-bottom:.6rem;
  display:flex; align-items:center; gap:.4rem;
}
.result-link-row { display:flex; gap:.5rem; }
.result-link {
  flex:1; padding:.55rem .75rem; background:var(--white);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  font-family:var(--mono); font-size:.78rem; color:var(--accent);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.btn-copy {
  padding:.55rem 1rem; background:var(--accent); color:white;
  border:none; border-radius:var(--radius-sm); font-size:.8rem; font-weight:600;
  cursor:pointer; white-space:nowrap; transition:all var(--t); flex-shrink:0;
}
.btn-copy:hover  { background:var(--accent-h); }
.btn-copy.copied { background:var(--success); }

/* ── Section header ── */
.section-header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem;
}
.section-title { font-size:1rem; font-weight:600; color:var(--text); letter-spacing:-.01em; }
.section-count { font-size:.8rem; color:var(--text-3); }

/* ── Vibes list ── */
.vibes-list { display:flex; flex-direction:column; gap:.65rem; }
.vibe-row {
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
  display:flex; align-items:center; gap:1rem; padding:.875rem 1rem;
  box-shadow:var(--shadow-sm); transition:all var(--t);
}
.vibe-row:hover { box-shadow:var(--shadow-md); border-color:var(--border-md); }
.vibe-thumb {
  width:50px; height:50px; border-radius:var(--radius-sm);
  background:var(--bg); overflow:hidden; flex-shrink:0;
}
.vibe-thumb img, .vibe-thumb video {
  width:100%; height:100%; object-fit:cover; pointer-events:none;
}
.vibe-info  { flex:1; min-width:0; }
.vibe-name  { font-size:.875rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:.2rem; }
.vibe-sub   { font-size:.78rem; color:var(--text-3); display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.vibe-expiry-pill {
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.72rem; font-weight:500; padding:.2rem .5rem;
  border-radius:10px; background:var(--warn-lt); color:var(--warning);
}
.vibe-expiry-pill.soon { background:var(--danger-lt); color:var(--danger); }
.vibe-actions { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }

/* ── Empty state ── */
.empty-state {
  text-align:center; padding:3rem 1.5rem; color:var(--text-3);
  background:var(--white); border:1.5px dashed var(--border-md);
  border-radius:var(--radius);
}
.empty-state-icon { font-size:2.5rem; margin-bottom:.75rem; }
.empty-state p    { font-size:.875rem; line-height:1.6; }

/* ────────────────────────────────────────────────────────────
   PROFILE PAGE
   ──────────────────────────────────────────────────────────── */
.profile-card {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
  overflow:hidden; margin-bottom:1.25rem;
}
.profile-header {
  background:linear-gradient(135deg, #0a6fa8, #17a4eb);
  padding:2rem 1.75rem;
  display:flex; align-items:center; gap:1.25rem;
}
.profile-avatar-lg {
  width:64px; height:64px; border-radius:50%;
  background:rgba(255,255,255,.2); border:3px solid rgba(255,255,255,.4);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; font-weight:700; color:white; flex-shrink:0;
}
.profile-header-info h2 { font-size:1.1rem; font-weight:700; color:white; letter-spacing:-.01em; margin-bottom:.2rem; }
.profile-header-info p  { font-size:.82rem; color:rgba(255,255,255,.7); }
.profile-body { padding:1.5rem 1.75rem; }
.profile-field { margin-bottom:1.25rem; }
.profile-field:last-child { margin-bottom:0; }
.profile-field-label {
  font-size:.75rem; font-weight:600; color:var(--text-3);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:.4rem;
}
.profile-field-value {
  font-size:.9rem; color:var(--text); padding:.65rem .875rem;
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:space-between;
}
.profile-badge {
  font-size:.72rem; font-weight:500; padding:.2rem .6rem;
  border-radius:10px; background:var(--accent-lt); color:var(--accent);
}

/* Privacy notice card */
.privacy-card {
  background:var(--accent-lt); border:1px solid #bfdbfe;
  border-radius:var(--radius); padding:1.25rem 1.5rem;
}
.privacy-card-title {
  font-size:.875rem; font-weight:600; color:var(--accent);
  margin-bottom:.75rem; display:flex; align-items:center; gap:.5rem;
}
.privacy-items { display:flex; flex-direction:column; gap:.5rem; }
.privacy-item  { display:flex; align-items:flex-start; gap:.6rem; font-size:.82rem; color:var(--text-2); }
.privacy-dot   { width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0; margin-top:.45rem; }

/* ────────────────────────────────────────────────────────────
   RESPONSIVE
   ──────────────────────────────────────────────────────────── */
/* ── Mobile bottom nav ── */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: var(--white);
  border-top: 1px solid var(--border);
  z-index: 20;
  padding: 0 1rem;
}
.bottom-nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  max-width: 400px;
  margin: 0 auto;
}
.bottom-nav-item {
  display: flex; flex-direction: column;
  align-items: center; gap: .2rem;
  font-size: .68rem; font-weight: 500;
  color: var(--text-3); background: none; border: none;
  cursor: pointer; padding: .4rem .75rem;
  border-radius: var(--radius-sm);
  transition: color var(--t);
  min-width: 60px;
}
.bottom-nav-item svg { flex-shrink: 0; }
.bottom-nav-item.active { color: var(--accent); }
.bottom-nav-item:hover  { color: var(--text-2); }

@media (max-width:700px) {
  .auth-page { grid-template-columns:1fr; }
  .auth-left  { display:none; }
  .gate-card  { max-width:100%; margin-top:72px; }
  .db-main    { padding:1.25rem 1rem; padding-bottom:80px; }
  .nav-links  { display:none; }
  .db-nav-right .nav-user-name { display:none; }
  .db-nav-right .btn-text-sm   { display:none; }
  .bottom-nav  { display:block; }
  .vibe-row    { flex-wrap:wrap; }
  .expiry-presets { gap:.35rem; }
  .expiry-option  { font-size:.75rem; padding:.3rem .65rem; }
  .viewer-body { padding:1rem; }
  .viewer-nav .btn-outline { font-size:.75rem; padding:.4rem .65rem; }
}