/* ─── Variables ────────────────────────────────────────────────────────── */
:root {
  --bg:        #080c18;
  --bg2:       #0d1220;
  --card:      #111827;
  --card2:     #1a2235;
  --border:    #1e2d45;
  --border2:   #2d3f5e;

  --cyan:      #00d4ff;
  --cyan-dim:  rgba(0,212,255,.12);
  --purple:    #7c3aed;
  --purple-dim:rgba(124,58,237,.12);
  --green:     #10b981;
  --amber:     #f59e0b;
  --red:       #ef4444;

  --text:      #e8f0fe;
  --text2:     #94a3b8;
  --text3:     #4a5568;

  --radius:    12px;
  --radius-sm: 8px;
  --radius-xl: 20px;
  --shadow:    0 4px 24px rgba(0,0,0,.5);
  --shadow-lg: 0 8px 48px rgba(0,0,0,.7);
  --glow:      0 0 20px rgba(0,212,255,.2);
  --glow-lg:   0 0 40px rgba(0,212,255,.3);
  --transition: .2s ease;
  --font:      'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono:      'JetBrains Mono', 'Fira Mono', 'Cascadia Code', 'Consolas', monospace;
}

/* ─── Reset & Base ──────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.6;
}
img { max-width:100%; display:block }
a  { color:var(--cyan); text-decoration:none }
a:hover { text-decoration:underline }

/* ─── Utility ───────────────────────────────────────────────────────────── */
.container { max-width:1200px; margin:0 auto; padding:0 20px }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0) }
.flex { display:flex; align-items:center }
.gap-2 { gap:8px }
.gap-3 { gap:12px }
.gap-4 { gap:16px }
.mt-4 { margin-top:16px }
.mt-6 { margin-top:24px }
.mt-8 { margin-top:32px }
.text-muted { color:var(--text2) }
.text-small { font-size:.85rem }
.mono { font-family:var(--mono) }

/* ─── Scrollbar ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width:6px; height:6px }
::-webkit-scrollbar-track { background:var(--bg) }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px }
::-webkit-scrollbar-thumb:hover { background:var(--text3) }

/* ─── Navbar ────────────────────────────────────────────────────────────── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(8,12,24,.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 64px;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.brand-text {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.5px;
}
.brand-accent { color: var(--cyan) }

/* Navbar search */
.nav-search {
  flex: 1;
  position: relative;
  max-width: 460px;
}
.nav-search input {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: 8px 18px;
  color: var(--text);
  font-family: var(--mono);
  font-size: .9rem;
  letter-spacing: .5px;
  text-transform: uppercase;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.nav-search input::placeholder { text-transform:none; font-family:var(--font); letter-spacing:0; color:var(--text3); font-size:.85rem }
.nav-search input:focus {
  border-color: var(--cyan);
  box-shadow: var(--glow);
}
.nav-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: none;
  z-index: 200;
}
.nav-search-results.show { display:block }
.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background var(--transition);
  text-decoration: none;
  color: var(--text);
}
.search-result-item:hover { background:var(--card) }
.sri-call {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--cyan);
  font-size: .95rem;
  min-width: 90px;
}
.sri-name { color: var(--text2); font-size: .85rem }
.sri-badge {
  margin-left: auto;
  font-size: .7rem;
  padding: 2px 8px;
  border-radius: 50px;
  background: var(--cyan-dim);
  color: var(--cyan);
}

/* Nav actions */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.nav-call {
  font-family: var(--mono);
  font-weight: 600;
  font-size: .9rem;
  color: var(--cyan);
  border: 1px solid var(--cyan-dim);
  padding: 5px 12px;
  border-radius: 50px;
  transition: all var(--transition);
}
.nav-call:hover { background:var(--cyan-dim); text-decoration:none }
.nav-avatar-wrap { position:relative }
.nav-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .9rem;
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color var(--transition);
}
.nav-avatar:hover { border-color:var(--cyan) }
.nav-avatar img { width:100%; height:100%; object-fit:cover }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 200px;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: none;
  z-index: 200;
}
.nav-dropdown.show { display:block }
.nav-dd-info {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.nav-dd-info strong { display:block; font-size:.9rem; color:var(--text) }
.nav-dd-info small  { color:var(--text2); font-size:.78rem }
.nav-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: var(--text2);
  font-size: .88rem;
  transition: all var(--transition);
  text-decoration: none;
}
.nav-dropdown a:hover { background:var(--card); color:var(--text) }
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav-toggle span { display:block; width:22px; height:2px; background:var(--text2); border-radius:2px; transition:all .3s }

/* ─── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  border: none;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { text-decoration:none }
.btn-primary {
  background: linear-gradient(135deg, var(--cyan), #0099cc);
  color: #000;
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:var(--glow-lg) }
.btn-ghost {
  background: transparent;
  color: var(--text2);
  border: 1px solid var(--border2);
}
.btn-ghost:hover { border-color:var(--cyan); color:var(--cyan) }
.btn-danger {
  background: rgba(239,68,68,.15);
  color: var(--red);
  border: 1px solid rgba(239,68,68,.3);
}
.btn-danger:hover { background:rgba(239,68,68,.25) }
.btn-sm { padding:6px 14px; font-size:.82rem }
.btn-lg { padding:14px 32px; font-size:1rem }
.btn-block { width:100% }
.btn:disabled { opacity:.4; cursor:not-allowed }

/* ─── Hero / Search Section ─────────────────────────────────────────────── */
.hero {
  padding: 80px 0 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0,212,255,.08) 0%, transparent 70%);
  pointer-events: none;
}
.hero-waves {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .3;
}
.hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1.1;
  margin-bottom: 12px;
}
.hero-title span { color: var(--cyan) }
.hero-sub {
  color: var(--text2);
  font-size: 1.1rem;
  margin-bottom: 40px;
}
.search-box {
  position: relative;
  max-width: 580px;
  margin: 0 auto 20px;
}
.search-box input {
  width: 100%;
  background: var(--card);
  border: 2px solid var(--border2);
  border-radius: 60px;
  padding: 18px 130px 18px 28px;
  color: var(--text);
  font-size: 1.2rem;
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  outline: none;
  transition: all .3s;
}
.search-box input::placeholder {
  text-transform: none;
  font-family: var(--font);
  letter-spacing: 0;
  font-weight: 400;
  font-size: 1rem;
  color: var(--text3);
}
.search-box input:focus {
  border-color: var(--cyan);
  box-shadow: var(--glow-lg), inset 0 0 0 1px rgba(0,212,255,.1);
}
.search-box-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50px;
  padding: 10px 20px;
}
.hero-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 48px;
}
.hstat { text-align: center }
.hstat-num {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--cyan);
  font-family: var(--mono);
  line-height: 1;
}
.hstat-label { font-size: .8rem; color: var(--text2); text-transform: uppercase; letter-spacing: 1px; margin-top: 4px }

/* ─── Section ───────────────────────────────────────────────────────────── */
.section { padding: 48px 0 }
.section-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ─── Cards Grid ────────────────────────────────────────────────────────── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.call-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  transition: all var(--transition);
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
  display: block;
  position: relative;
  overflow: hidden;
}
.call-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  opacity: 0;
  transition: opacity var(--transition);
}
.call-card:hover {
  border-color: var(--cyan);
  transform: translateY(-3px);
  box-shadow: var(--glow);
  text-decoration: none;
}
.call-card:hover::before { opacity:1 }
.cc-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan-dim), var(--purple-dim));
  border: 2px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  overflow: hidden;
  margin-bottom: 12px;
}
.cc-avatar img { width:100%; height:100%; object-fit:cover }
.cc-call {
  font-family: var(--mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cyan);
  margin-bottom: 4px;
}
.cc-name { font-size: .88rem; color: var(--text2); margin-bottom: 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.cc-location {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .78rem;
  color: var(--text3);
}
.cc-badges {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* ─── Badges ────────────────────────────────────────────────────────────── */
.badge {
  font-size: .7rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 50px;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.badge-cyan    { background:var(--cyan-dim);  color:var(--cyan) }
.badge-purple  { background:var(--purple-dim); color:#a78bfa }
.badge-green   { background:rgba(16,185,129,.12); color:var(--green) }
.badge-amber   { background:rgba(245,158,11,.12); color:var(--amber) }
.badge-red     { background:rgba(239,68,68,.12); color:var(--red) }
.badge-verified {
  background: rgba(16,185,129,.15);
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.badge-verified svg { width:10px; height:10px }

/* ─── Search Results Page ───────────────────────────────────────────────── */
.search-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.results-count {
  color: var(--text2);
  font-size: .9rem;
}
.results-count strong { color:var(--text) }
.results-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.result-row {
  display: grid;
  grid-template-columns: 140px 1fr 140px 80px;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: var(--card);
  transition: background var(--transition);
  text-decoration: none;
  color: var(--text);
}
.result-row:hover { background:var(--card2); text-decoration:none }
.rr-call {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1rem;
  color: var(--cyan);
}
.rr-name { font-size: .9rem }
.rr-loc  { font-size: .82rem; color: var(--text2) }
.rr-class { justify-self: end }

/* ─── Callsign Detail Page ──────────────────────────────────────────────── */
.profile-hero {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 48px 0;
}
.profile-hero-inner {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}
.profile-photo {
  width: 140px;
  height: 140px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--cyan-dim), var(--purple-dim));
  border: 3px solid var(--border2);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: 800;
  color: var(--cyan);
}
.profile-photo img { width:100%; height:100%; object-fit:cover }
.profile-main-info { flex:1 }
.profile-callsign {
  font-family: var(--mono);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: var(--cyan);
  letter-spacing: 3px;
  line-height: 1;
  margin-bottom: 6px;
}
.profile-name { font-size: 1.25rem; font-weight: 600; margin-bottom: 12px }
.profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  color: var(--text2);
  font-size: .88rem;
  margin-bottom: 16px;
}
.profile-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.profile-meta-item svg { color:var(--cyan); flex-shrink:0 }
.profile-badges { display:flex; flex-wrap:wrap; gap:8px }

/* Profile info cards */
.profile-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  margin-top: 32px;
}
.info-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.info-card-title {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text3);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.info-card-title svg { color:var(--cyan) }
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: .88rem;
  gap: 12px;
}
.info-row:last-child { border-bottom:none }
.info-label { color:var(--text2) }
.info-value { font-weight:500; text-align:right }
.info-value.mono { font-family:var(--mono); font-weight:600; color:var(--cyan) }

/* Chip lists */
.chip-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px }
.chip {
  background: var(--card2);
  border: 1px solid var(--border);
  padding: 5px 12px;
  border-radius: 50px;
  font-size: .8rem;
  color: var(--text2);
}
.chip.active { background:var(--cyan-dim); border-color:var(--cyan); color:var(--cyan) }

/* QSL section */
.qsl-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:8px }
.qsl-item {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  text-align: center;
  font-size: .8rem;
}
.qsl-item.active { border-color:var(--green); color:var(--green) }
.qsl-item .qsl-icon { font-size:1.4rem; margin-bottom:4px }

/* ─── Login / Forms ─────────────────────────────────────────────────────── */
.auth-wrap {
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 40px;
  box-shadow: var(--shadow-lg);
}
.auth-logo {
  text-align: center;
  margin-bottom: 28px;
}
.auth-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.auth-sub { font-size: .88rem; color: var(--text2) }

/* Form elements */
.form-group { margin-bottom: 20px }
.form-label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 8px;
}
.form-control {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  color: var(--text);
  font-size: .92rem;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  font-family: var(--font);
}
.form-control:focus { border-color:var(--cyan); box-shadow:var(--glow) }
.form-control::placeholder { color:var(--text3) }
textarea.form-control { resize:vertical; min-height:100px }
select.form-control { cursor:pointer }
select.form-control option { background:var(--card2) }
.form-control.is-invalid { border-color:var(--red) }
.form-hint { font-size:.78rem; color:var(--text3); margin-top:5px }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.input-group { position:relative }
.input-group .form-control { padding-right:44px }
.input-group-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text3);
  cursor: pointer;
}

/* ─── Profile Edit Page ──────────────────────────────────────────────────── */
.edit-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  padding: 40px 0;
}
.edit-sidebar { }
.edit-sidebar-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  position: sticky;
  top: 88px;
}
.edit-photo-wrap {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan-dim), var(--purple-dim));
  border: 3px solid var(--border2);
  margin: 0 auto 16px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.edit-photo-wrap img { width:100%; height:100%; object-fit:cover }
.edit-photo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition);
  color: white;
  font-size: .75rem;
}
.edit-photo-wrap:hover .edit-photo-overlay { opacity:1 }
.edit-callsign-display {
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--cyan);
  margin-bottom: 4px;
}
.edit-sidebar-nav {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.edit-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: .88rem;
  color: var(--text2);
  cursor: pointer;
  transition: all var(--transition);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.edit-nav-item:hover  { background:var(--card2); color:var(--text) }
.edit-nav-item.active { background:var(--cyan-dim); color:var(--cyan) }
.tab-content { display:none }
.tab-content.active { display:block }

/* Form sections */
.form-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 20px;
}
.form-section-title {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text3);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

/* Toggle switch */
.toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}
.toggle-label { font-size:.9rem }
.toggle {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.toggle input { opacity:0; width:0; height:0 }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border2);
  border-radius: 50px;
  cursor: pointer;
  transition: background .2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  left: 3px;
  top: 3px;
  transition: transform .2s;
}
.toggle input:checked ~ .toggle-slider { background:var(--cyan) }
.toggle input:checked ~ .toggle-slider::before { transform:translateX(20px) }

/* Chip selector */
.chip-selector { display:flex; flex-wrap:wrap; gap:8px }
.chip-opt {
  background: var(--card2);
  border: 1px solid var(--border);
  padding: 6px 14px;
  border-radius: 50px;
  font-size: .82rem;
  cursor: pointer;
  transition: all var(--transition);
  user-select: none;
}
.chip-opt:hover { border-color:var(--cyan) }
.chip-opt.selected { background:var(--cyan-dim); border-color:var(--cyan); color:var(--cyan) }

/* ─── Alert messages ────────────────────────────────────────────────────── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-size: .88rem;
  margin-bottom: 20px;
}
.alert-success { background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.3); color:var(--green) }
.alert-error   { background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3); color:var(--red) }
.alert-info    { background:var(--cyan-dim); border:1px solid rgba(0,212,255,.2); color:var(--cyan) }

/* ─── Pagination ────────────────────────────────────────────────────────── */
.pagination {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-top: 40px;
  flex-wrap: wrap;
}
.page-btn {
  min-width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text2);
  font-size: .85rem;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
}
.page-btn:hover    { border-color:var(--cyan); color:var(--cyan); text-decoration:none }
.page-btn.active   { background:var(--cyan-dim); border-color:var(--cyan); color:var(--cyan); font-weight:700 }
.page-btn.disabled { opacity:.3; cursor:default; pointer-events:none }

/* ─── Loading / Spinner ─────────────────────────────────────────────────── */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border2);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: 20px auto;
}
@keyframes spin { to { transform:rotate(360deg) } }
.skeleton {
  background: linear-gradient(90deg, var(--card) 25%, var(--card2) 50%, var(--card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
  height: 16px;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ─── Empty state ───────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 80px 20px;
  color: var(--text3);
}
.empty-state svg { margin:0 auto 16px; opacity:.3 }
.empty-state h3  { font-size:1.1rem; color:var(--text2); margin-bottom:8px }

/* ─── Footer ────────────────────────────────────────────────────────────── */
.footer {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding: 32px 0;
  background: var(--bg2);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-brand p { color:var(--text3); font-size:.82rem; margin-top:4px }
.footer-links { display:flex; gap:20px; flex-wrap:wrap }
.footer-links a { color:var(--text3); font-size:.85rem; transition:color var(--transition) }
.footer-links a:hover { color:var(--cyan); text-decoration:none }
.footer-info { color:var(--text3); font-size:.8rem }

/* ─── Setup Page ────────────────────────────────────────────────────────── */
.setup-box {
  max-width: 640px;
  margin: 60px auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 40px;
}
.setup-step {
  display: flex;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: .9rem;
}
.setup-step:last-child { border-bottom:none }
.setup-icon { width:20px; height:20px; flex-shrink:0; margin-top:2px }

/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .profile-grid   { grid-template-columns:1fr }
  .edit-layout    { grid-template-columns:1fr }
  .edit-sidebar   { position:static }
  .edit-sidebar-card { position:static }
  .result-row     { grid-template-columns:110px 1fr; }
  .result-row .rr-loc, .result-row .rr-class { display:none }
}
@media (max-width: 680px) {
  .hero { padding:48px 0 40px }
  .hero-stats { gap:24px }
  .hstat-num  { font-size:1.4rem }
  .nav-search { display:none }
  .nav-toggle { display:flex }
  .cards-grid { grid-template-columns:repeat(auto-fill, minmax(160px,1fr)) }
  .profile-hero-inner { flex-direction:column; align-items:center; text-align:center }
  .profile-meta { justify-content:center }
  .form-row { grid-template-columns:1fr }
  .qsl-grid { grid-template-columns:1fr 1fr }
  .footer-inner { flex-direction:column; text-align:center }
  .search-box input { padding:14px 110px 14px 20px; font-size:1rem }
}
@media (max-width: 400px) {
  .auth-card { padding:28px 20px }
}

/* ─── Animations ────────────────────────────────────────────────────────── */
@keyframes fadeIn  { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.fade-in { animation: fadeIn .4s ease both }

/* ─── Glow text ─────────────────────────────────────────────────────────── */
.text-glow { text-shadow:0 0 20px rgba(0,212,255,.5) }

/* ─── Wave animation for hero ───────────────────────────────────────────── */
.wave-circle {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0,212,255,.1);
  animation: waveExpand 4s ease-out infinite;
  pointer-events: none;
}
.wave-circle:nth-child(2) { animation-delay:1.3s }
.wave-circle:nth-child(3) { animation-delay:2.6s }
@keyframes waveExpand {
  0%   { transform:scale(.3); opacity:.6 }
  100% { transform:scale(2);  opacity:0  }
}