/* ─── 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:      #f0f4f8;
  --text2:     #a8b5c7;
  --text3:     #5a6b7f;

  --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;
  --anim-spring: cubic-bezier(.34, 1.56, .64, 1);
  --anim-bounce: cubic-bezier(.175, .885, .32, 1.275);
  --anim-slow:   .6s ease;
}

/* ─── 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;
  position: relative;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(0,212,255,.035) 1px, transparent 0);
  background-size: 36px 36px;
  pointer-events: none;
  z-index: 0;
}
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:linear-gradient(var(--border2), var(--text3)); border-radius:3px }
::-webkit-scrollbar-thumb:hover { background:linear-gradient(var(--text3), var(--cyan)) }

/* ─── Page progress bar ─────────────────────────────────────────────────── */
#pageProgress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--cyan), var(--purple), var(--cyan));
  background-size: 200% 100%;
  z-index: 9999;
  transition: width .4s ease, opacity .4s;
  animation: progress-shimmer 1.8s linear infinite;
  pointer-events: none;
}
@keyframes progress-shimmer {
  0%   { background-position: 200% 0 }
  100% { background-position: -200% 0 }
}

/* ─── 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);
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.navbar.scrolled {
  background: rgba(8,12,24,.97);
  box-shadow: 0 2px 24px rgba(0,0,0,.5), 0 0 0 1px rgba(0,212,255,.05);
  border-bottom-color: rgba(0,212,255,.08);
}
.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;
}
.nav-brand svg {
  transition: transform .4s var(--anim-spring), filter .3s;
}
.nav-brand:hover svg {
  transform: rotate(-15deg) scale(1.15);
  filter: drop-shadow(0 0 8px rgba(0,212,255,.6));
}
.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), background var(--transition);
  caret-color: var(--cyan);
}
.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);
  background: var(--card2);
}
.nav-search.nav-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  left: auto;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,212,255,0.05);
  min-width: 220px;
  max-width: calc(100vw - 40px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.95);
  transition: all 0.3s var(--anim-spring);
  z-index: 1000;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.nav-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: rgba(26, 34, 53, 0.98);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: none;
  z-index: 300;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.nav-search-results.show {
  display: block;
  animation: slideDown .2s ease both;
}
@keyframes slideDown {
  from { opacity:0; transform:translateY(-8px) }
  to   { opacity:1; transform:translateY(0) }
}
.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);
  border-left: 2px solid transparent;
  transition: background .15s, border-color .15s;
}
.search-result-item:hover,
.search-result-item.focused {
  background: var(--card);
  border-left-color: var(--cyan);
}
.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-icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text2);
  transition: all .3s var(--anim-spring);
  text-decoration: none;
}

.nav-icon-btn:hover {
  background: var(--card2);
  border-color: var(--cyan);
  color: var(--cyan);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  text-decoration: none;
}

.nav-icon-btn.active {
  background: var(--cyan-dim);
  border-color: var(--cyan);
  color: var(--cyan);
}

/* Enhanced tooltips for navbar icons */
.nav-icon-btn[data-tooltip] {
  position: relative;
}

.nav-icon-btn[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--card2);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 1000;
  margin-top: 8px;
}

.nav-icon-btn[data-tooltip]::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: var(--card2);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  margin-top: 3px;
  z-index: 1000;
}

.nav-icon-btn[data-tooltip]:hover::before,
.nav-icon-btn[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Fallback for browsers that don't support data-tooltip */
.nav-icon-btn[title]:not([data-tooltip]) {
  position: relative;
}


.nav-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--red);
  color: white;
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 50px;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
  animation: pulse-badge 2s ease infinite;
}

.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);
  position: relative;
  overflow: hidden;
}
.nav-call::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--cyan-dim);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.nav-call:hover::before { transform: scaleX(1) }
.nav-call:hover { text-decoration:none; border-color:var(--cyan) }
.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), box-shadow var(--transition), transform var(--transition);
}
.nav-avatar:hover {
  border-color: var(--cyan);
  box-shadow: 0 0 16px rgba(0,212,255,.3);
  transform: scale(1.05);
}
.nav-avatar img { width:100%; height:100%; object-fit:cover }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: -80px;
  left: auto;
  width: 200px;
  max-width: calc(100vw - 40px);
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: none;
  z-index: 200;
  backdrop-filter: blur(12px);
}
.nav-dropdown.show {
  display: block;
  animation: slideDown .2s ease both;
}
.nav-dd-info {
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: background 0.2s ease;
}
.nav-dd-info:hover {
  background: var(--card);
}
.nav-dd-info strong { 
  display: block; 
  font-size: .9rem; 
  color: var(--text);
  transition: color 0.2s ease;
}
.nav-dd-info small { 
  color: var(--text2); 
  font-size: .78rem;
  transition: color 0.2s ease;
}
.nav-dd-info:hover strong {
  color: var(--cyan);
}
.nav-dd-info:hover small {
  color: var(--cyan);
}
.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;
  border-left: 2px solid transparent;
}
.nav-dropdown a:hover { background:var(--card); color:var(--text); border-left-color:var(--cyan) }
.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 ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg) }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0) }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }

/* ─── 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;
  position: relative;
  overflow: hidden;
}
.btn:hover { text-decoration:none }
.btn:active { transform: scale(.97) !important }
/* Ripple */
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  transform: scale(0);
  animation: ripple-anim .55s linear;
  pointer-events: none;
}
@keyframes ripple-anim {
  to { transform: scale(4); opacity: 0 }
}
.btn-primary {
  background: linear-gradient(135deg, var(--cyan), #0099cc);
  color: #000;
  font-weight: 700;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-lg);
  background: linear-gradient(135deg, #22dfff, #00b8e6);
}
.btn-ghost {
  background: transparent;
  color: var(--text2);
  border: 1px solid var(--border2);
}
.btn-ghost:hover { border-color:var(--cyan); color:var(--cyan); background:var(--cyan-dim) }
.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); box-shadow: 0 0 16px rgba(239,68,68,.2) }
.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; transform:none !important }

/* ─── Hero / Search Section ─────────────────────────────────────────────── */
.hero {
  padding: 80px 0 60px;
  text-align: center;
  position: relative;
  overflow: visible;
  z-index: 10;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0,212,255,.1) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 80% 80%, rgba(124,58,237,.07) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(0,212,255,.04) 0%, transparent 60%);
  pointer-events: none;
  animation: hero-glow-pulse 6s ease-in-out infinite alternate;
}
@keyframes hero-glow-pulse {
  0%   { opacity: .7 }
  100% { opacity: 1 }
}
.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(transparent, var(--bg));
  pointer-events: none;
}
.hero-waves {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .4;
}
.hero-waves path {
  animation: wave-move 12s ease-in-out infinite alternate;
}
.hero-waves path:nth-child(2) { animation-delay: -6s; animation-duration: 10s; }
@keyframes wave-move {
  0%   { transform: translateX(0) }
  100% { transform: translateX(-30px) }
}
.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);
  text-shadow: 0 0 30px rgba(0,212,255,.4);
  display: inline-block;
  animation: title-glow 3s ease-in-out infinite alternate;
}
@keyframes title-glow {
  0%   { text-shadow: 0 0 20px rgba(0,212,255,.3) }
  100% { text-shadow: 0 0 40px rgba(0,212,255,.7), 0 0 80px rgba(0,212,255,.2) }
}
.hero-sub {
  color: var(--text2);
  font-size: 1.1rem;
  margin-bottom: 40px;
}
.search-box {
  position: relative;
  max-width: 580px;
  margin: 0 auto 20px;
  filter: drop-shadow(0 4px 24px rgba(0,0,0,.4));
  transition: filter .3s;
  z-index: 50;
}
.search-box:focus-within {
  filter: drop-shadow(0 4px 32px rgba(0,0,0,.5)) drop-shadow(0 0 20px rgba(0,212,255,.2));
}
.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: border-color .3s, background .3s, box-shadow .3s;
  caret-color: var(--cyan);
}
.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: 0 0 0 4px rgba(0,212,255,.08);
  background: var(--card2);
}
.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;
  position: relative;
  z-index: 1;
}
.hstat {
  text-align: center;
  cursor: default;
  padding: 8px 16px;
  border-radius: var(--radius);
  transition: background .2s;
}
.hstat:hover { background: var(--cyan-dim) }
.hstat-num {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--cyan);
  font-family: var(--mono);
  line-height: 1;
  transition: all .3s;
}
.hstat-label { font-size: .8rem; color: var(--text2); text-transform: uppercase; letter-spacing: 1px; margin-top: 4px }

/* ─── Wave circles ──────────────────────────────────────────────────────── */
.wave-circle {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0,212,255,.12);
  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) translate(-50%,-50%); opacity:.7 }
  100% { transform:scale(2.2) translate(-23%,-23%); opacity:0 }
}

/* ─── 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: linear-gradient(90deg, var(--border), transparent);
}
.section-title .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  flex-shrink: 0;
  animation: pulse-dot 2.5s ease infinite;
}
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); box-shadow: none }
  50% { transform: scale(1.5); box-shadow: 0 0 8px rgba(0,212,255,.6) }
}

/* ─── Features Grid ─────────────────────────────────────────────────────── */
.features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── CTA Card ─────────────────────────────────────────────────────────── */
.cta-card {
  position: relative;
  background: linear-gradient(135deg, var(--card2), var(--card));
  border: 1px solid var(--border2);
  border-radius: var(--radius-xl);
  padding: 40px;
  overflow: hidden;
  transition: all 0.4s var(--anim-spring);
  cursor: pointer;
}
.cta-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,212,255,.08) 0%, transparent 50%, rgba(124,58,237,.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cta-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 40px rgba(0,212,255,.15);
  border-color: rgba(0,212,255,.3);
}
.cta-card:hover::before {
  opacity: 1;
}
.cta-card-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 32px;
}
.cta-card-icon {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--cyan-dim), rgba(124,58,237,.15));
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s var(--anim-spring);
  position: relative;
}
.cta-card-icon::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  border-radius: var(--radius);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}
.cta-card:hover .cta-card-icon {
  transform: scale(1.1) rotate(5deg);
  background: linear-gradient(135deg, rgba(0,212,255,.25), rgba(124,58,237,.2));
  box-shadow: 0 8px 32px rgba(0,212,255,.3);
}
.cta-card:hover .cta-card-icon::before {
  opacity: 0.5;
}
.cta-card-text {
  flex: 1;
}
.cta-card-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.2;
  transition: color 0.3s ease;
}
.cta-card:hover .cta-card-title {
  color: var(--cyan);
}
.cta-card-desc {
  font-size: 1rem;
  color: var(--text2);
  line-height: 1.6;
  margin-bottom: 0;
}
.cta-card-action {
  flex-shrink: 0;
}
.cta-card-btn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--cyan), #0099cc);
  color: #000;
  font-weight: 700;
  padding: 16px 32px;
  font-size: 1rem;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  transform: translateY(0);
}
.cta-card-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}
.cta-card-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,212,255,.4), 0 0 20px rgba(0,212,255,.2);
  background: linear-gradient(135deg, #22dfff, #00b8e6);
}
.cta-card-btn:active {
  transform: translateY(-1px);
}
.cta-card-btn:hover::before {
  width: 300px;
  height: 300px;
}

/* Background Elements */
.cta-card-bg-elements {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.cta-card-circle {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0,212,255,.1), rgba(124,58,237,.05));
  animation: float-circle 6s ease-in-out infinite;
}
.cta-circle-1 {
  width: 120px;
  height: 120px;
  top: -60px;
  right: -60px;
  animation-delay: 0s;
}
.cta-circle-2 {
  width: 80px;
  height: 80px;
  bottom: -40px;
  left: 20%;
  animation-delay: 2s;
}
.cta-circle-3 {
  width: 60px;
  height: 60px;
  top: 30%;
  right: 10%;
  animation-delay: 4s;
}
.cta-card-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(0,212,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,.03) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cta-card:hover .cta-card-grid {
  opacity: 1;
}

@keyframes float-circle {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .cta-card {
    padding: 32px 24px;
  }
  .cta-card-content {
    flex-direction: column;
    text-align: center;
    gap: 24px;
  }
  .cta-card-icon {
    width: 64px;
    height: 64px;
  }
  .cta-card-title {
    font-size: 1.4rem;
  }
  .cta-card-desc {
    font-size: 0.95rem;
  }
  .cta-card-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .cta-card {
    padding: 24px 20px;
  }
  .cta-card-title {
    font-size: 1.2rem;
  }
  .cta-card-desc {
    font-size: 0.9rem;
  }
}

/* ─── Login Page ────────────────────────────────────────────────────────── */

/* Enhanced Particle System */
.particle-system {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.particle-container {
  position: absolute;
  inset: 0;
}
.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--cyan);
  border-radius: 50%;
  pointer-events: none;
  animation: particle-float 8s linear infinite;
  box-shadow: 0 0 6px rgba(0,212,255,.8);
}
@keyframes particle-float {
  0% {
    transform: translateY(100vh) translateX(0) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: translateY(90vh) translateX(10px) scale(1);
  }
  90% {
    opacity: 1;
    transform: translateY(10vh) translateX(-10px) scale(1);
  }
  100% {
    transform: translateY(0) translateX(0) scale(0);
    opacity: 0;
  }
}

/* Ambient Radio Signals */
.radio-signals {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.signal-pulse {
  position: absolute;
  border: 1px solid rgba(0,212,255,.3);
  border-radius: 50%;
  animation: signal-pulse 4s ease-out infinite;
}
.signal-1 {
  width: 100px;
  height: 100px;
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}
.signal-2 {
  width: 150px;
  height: 150px;
  top: 60%;
  right: 15%;
  animation-delay: 1s;
}
.signal-3 {
  width: 80px;
  height: 80px;
  bottom: 30%;
  left: 30%;
  animation-delay: 2s;
}
.signal-4 {
  width: 120px;
  height: 120px;
  top: 40%;
  right: 40%;
  animation-delay: 3s;
}
@keyframes signal-pulse {
  0% {
    transform: scale(0.8);
    opacity: 0;
    border-color: rgba(0,212,255,.6);
  }
  50% {
    opacity: 0.4;
    border-color: rgba(0,212,255,.2);
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
    border-color: rgba(124,58,237,.1);
  }
}

/* Energy Field */
.energy-field {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(0,212,255,.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(124,58,237,.03) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(0,212,255,.02) 0%, transparent 70%);
  animation: energy-shift 10s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes energy-shift {
  0% {
    opacity: 0.3;
    transform: rotate(0deg) scale(1);
  }
  100% {
    opacity: 0.6;
    transform: rotate(5deg) scale(1.1);
  }
}

/* Enhanced Form Fields */
.field-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}
.label-icon {
  position: relative;
  transition: all 0.4s var(--anim-spring);
}
.label-icon::before {
  content: '';
  position: absolute;
  inset: -4px;
  background: radial-gradient(circle, rgba(0,212,255,.2) 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.field-label:hover .label-icon {
  transform: scale(1.1) rotate(5deg);
}
.field-label:hover .label-icon::before {
  opacity: 1;
}
.label-text {
  position: relative;
  transition: color 0.3s ease;
}
.field-label:hover .label-text {
  color: var(--cyan);
}

/* Magnetic Field Effect */
.magnetic-field {
  position: relative;
  border-radius: var(--radius);
  overflow: visible;
}
.magnetic-field::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(45deg, transparent, rgba(0,212,255,.1), transparent);
  border-radius: var(--radius);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.magnetic-field:hover::before {
  opacity: 1;
  animation: magnetic-rotate 2s linear infinite;
}
@keyframes magnetic-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Input Particles */
.input-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: var(--radius);
}
.input-particle {
  position: absolute;
  width: 1px;
  height: 1px;
  background: var(--cyan);
  border-radius: 50%;
  opacity: 0;
  animation: input-particle-float 3s ease-out infinite;
}
@keyframes input-particle-float {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateY(-20px) translateX(var(--particle-x));
    opacity: 0;
  }
}

/* Enhanced Password Toggle */
.toggle-bg {
  position: absolute;
  inset: -4px;
  background: radial-gradient(circle, rgba(0,212,255,.1) 0%, transparent 70%);
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.password-toggle:hover .toggle-bg {
  opacity: 1;
}
.password-toggle {
  position: relative;
  z-index: 2;
}

/* Enhanced Submit Button */
.submit-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.loading-spinner {
  position: absolute;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  100% { transform: rotate(360deg); }
}
.submit-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: var(--radius);
}
.submit-particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(255,255,255,.8);
  border-radius: 50%;
  animation: submit-particle-burst 1s ease-out infinite;
}
@keyframes submit-particle-burst {
  0% {
    transform: translate(50%, 50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(var(--burst-x), var(--burst-y)) scale(1);
    opacity: 0;
  }
}
.submit-glow {
  position: absolute;
  inset: -4px;
  background: radial-gradient(circle, rgba(0,212,255,.2) 0%, transparent 70%);
  border-radius: var(--radius);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.login-submit:hover .submit-glow {
  opacity: 1;
  animation: glow-pulse 2s ease-in-out infinite;
}
@keyframes glow-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}
.login-hero {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, var(--bg) 0%, var(--bg2) 50%, var(--bg) 100%);
  overflow: hidden;
  z-index: 0;
}

/* Animated Radio Waves */
.radio-waves {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wave {
  position: absolute;
  border: 2px solid rgba(0,212,255,.1);
  border-radius: 50%;
  animation: radio-wave 4s ease-out infinite;
}
.wave-1 {
  width: 300px;
  height: 300px;
  animation-delay: 0s;
}
.wave-2 {
  width: 500px;
  height: 500px;
  animation-delay: 1.3s;
}
.wave-3 {
  width: 700px;
  height: 700px;
  animation-delay: 2.6s;
}
@keyframes radio-wave {
  0% {
    transform: scale(0.8);
    opacity: 0;
    border-color: rgba(0,212,255,.3);
  }
  50% {
    opacity: 0.6;
    border-color: rgba(0,212,255,.15);
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
    border-color: rgba(124,58,237,.1);
  }
}

/* Floating Morse Code Elements */
.morse-elements {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.morse-char {
  position: absolute;
  font-family: var(--mono);
  font-size: 1.2rem;
  color: rgba(0,212,255,.3);
  font-weight: 600;
  letter-spacing: 2px;
  animation: float-morse 8s ease-in-out infinite;
}
.morse-1 { top: 15%; left: 10%; animation-delay: 0s; }
.morse-2 { top: 25%; right: 15%; animation-delay: 2s; }
.morse-3 { bottom: 30%; left: 20%; animation-delay: 4s; }
.morse-4 { bottom: 20%; right: 10%; animation-delay: 6s; }
@keyframes float-morse {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.3; }
  50% { transform: translateY(-20px) rotate(5deg); opacity: 0.6; }
}

/* Signal Grid */
.signal-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(0,212,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,.02) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: grid-move 20s linear infinite;
}
@keyframes grid-move {
  0% { transform: translate(0, 0); }
  100% { transform: translate(50px, 50px); }
}

/* Login Container */
.login-container {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-card {
  background: linear-gradient(135deg, rgba(26,34,53,.95), rgba(17,24,39,.95));
  border: 1px solid var(--border2);
  border-radius: var(--radius-xl);
  padding: 48px;
  width: 100%;
  max-width: 480px;
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 40px rgba(0,212,255,.1);
  position: relative;
  overflow: hidden;
  animation: card-entrance 0.6s var(--anim-spring);
}
.login-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,212,255,.05) 0%, transparent 50%, rgba(124,58,237,.03) 100%);
  pointer-events: none;
}
@keyframes card-entrance {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* QRV73 Branding */
.login-header {
  text-align: center;
  margin-bottom: 40px;
}
.qrv73-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
}
.qrv73-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--cyan-dim), rgba(124,58,237,.15));
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(0,212,255,.3);
  position: relative;
  animation: icon-pulse 3s ease-in-out infinite;
}
.qrv73-icon::before {
  content: '';
  position: absolute;
  inset: -4px;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  border-radius: var(--radius);
  opacity: 0;
  animation: icon-glow 3s ease-in-out infinite;
  z-index: -1;
}
@keyframes icon-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes icon-glow {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.3; }
}
.qrv73-text {
  text-align: left;
}
.qrv73-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--cyan);
  margin: 0;
  line-height: 1.1;
  text-shadow: 0 0 20px rgba(0,212,255,.3);
}
.qrv73-subtitle {
  font-size: 0.9rem;
  color: var(--text2);
  margin: 4px 0 0;
  font-weight: 500;
}
.login-welcome {
  margin-top: 32px;
}
.login-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
}
.login-desc {
  font-size: 1rem;
  color: var(--text2);
  margin: 0;
}

/* Error Message */
.login-error {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(239,68,68,.15);
  border: 1px solid rgba(239,68,68,.3);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 24px;
  animation: error-shake 0.5s ease;
}
.error-icon {
  color: var(--red);
  flex-shrink: 0;
}
.error-text {
  color: var(--red);
  font-weight: 500;
}
@keyframes error-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}

/* Form Fields */
.login-form {
  margin-bottom: 32px;
}
.form-field {
  margin-bottom: 24px;
}
.field-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.field-input {
  position: relative;
}
.input-control {
  width: 100%;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  color: var(--text);
  font-size: 1rem;
  font-family: var(--font);
  transition: all 0.3s ease;
  outline: none;
}
.input-control:focus {
  border-color: var(--cyan);
  background: var(--card2);
  box-shadow: 0 0 0 4px rgba(0,212,255,.08);
}
.input-control.error {
  border-color: var(--red);
  background: rgba(239,68,68,.05);
}
.input-control.error:focus {
  box-shadow: 0 0 0 4px rgba(239,68,68,.08);
}
.input-focus-line {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  transition: width 0.3s ease;
  border-radius: 1px;
}
.input-control:focus ~ .input-focus-line {
  width: 100%;
}
.password-toggle {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: all 0.3s ease;
}
.password-toggle:hover {
  color: var(--cyan);
  background: var(--cyan-dim);
}

/* Form Options */
.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
}
.remember-me {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text2);
}
.remember-me input[type="checkbox"] {
  display: none;
}
.checkbox-custom {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border2);
  border-radius: var(--radius-sm);
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
}
.checkbox-custom svg {
  color: var(--cyan);
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s var(--anim-spring);
}
.remember-me input:checked ~ .checkbox-custom {
  background: var(--cyan-dim);
  border-color: var(--cyan);
}
.remember-me input:checked ~ .checkbox-custom svg {
  opacity: 1;
  transform: scale(1);
}
.checkbox-text small {
  opacity: 0.7;
  font-size: 0.8rem;
}
.forgot-link {
  color: var(--cyan);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.3s ease;
}
.forgot-link:hover {
  color: #22dfff;
  text-decoration: underline;
}

/* Submit Button */
.login-submit {
  position: relative;
  width: 100%;
  background: linear-gradient(135deg, var(--cyan), #0099cc);
  border: none;
  border-radius: var(--radius);
  padding: 18px 24px;
  color: #000;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  transform: translateY(0);
}
.login-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0,212,255,.4), 0 0 20px rgba(0,212,255,.2);
  background: linear-gradient(135deg, #22dfff, #00b8e6);
}
.login-submit:active {
  transform: translateY(0);
}
.submit-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  z-index: 2;
}
.submit-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.2), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}
.login-submit:hover .submit-bg {
  transform: translateX(100%);
}

/* Registration Help */
.register-help {
  text-align: center;
  padding-top: 24px;
  border-top: 1px solid var(--border2);
}
.help-text {
  font-size: 0.9rem;
  color: var(--text2);
  margin: 0 0 16px;
}
.register-link {
  display: inline-flex;
  text-decoration: none;
  color: var(--text);
  transition: all 0.3s ease;
}
.register-link:hover {
  color: var(--cyan);
  transform: translateY(-2px);
}
.register-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  transition: all 0.3s ease;
}
.register-link:hover .register-content {
  background: var(--card2);
  border-color: rgba(0,212,255,.3);
  box-shadow: 0 4px 16px rgba(0,212,255,.1);
}
.register-logo {
  height: 24px;
  width: auto;
  object-fit: contain;
}

/* Enhanced Responsive Design */
@media (max-width: 1024px) {
  .login-card {
    max-width: 520px;
    padding: 40px 32px;
  }
  .radio-waves {
    opacity: 0.8;
  }
  .morse-char {
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  .login-container {
    padding: 16px;
  }
  
  .login-card {
    padding: 32px 24px;
    margin: 0;
    max-width: 100%;
    border-radius: var(--radius);
  }
  
  .login-hero {
    position: relative;
    min-height: 100vh;
  }
  
  .radio-waves {
    opacity: 0.6;
  }
  
  .wave {
    animation-duration: 6s;
  }
  
  .morse-elements {
    display: none;
  }
  
  .signal-grid {
    background-size: 60px 60px;
    animation-duration: 30s;
  }
  
  .qrv73-badge {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  
  .qrv73-badge .nav-brand {
    flex-direction: column;
    gap: 12px !important;
  }
  
  .qrv73-badge .brand-text {
    font-size: 1.5rem !important;
    text-align: center;
  }
  
  .qrv73-icon {
    width: 60px;
    height: 60px;
  }
  
  .qrv73-icon svg {
    width: 60px;
    height: 60px;
  }
  
  .qrv73-text {
    text-align: center;
  }
  
  .qrv73-title {
    font-size: 1.6rem;
    margin-bottom: 8px;
  }
  
  .qrv73-subtitle {
    font-size: 0.85rem;
  }
  
  .login-welcome {
    margin-top: 24px;
  }
  
  .login-title {
    font-size: 1.3rem;
  }
  
  .login-desc {
    font-size: 0.95rem;
  }
  
  .form-field {
    margin-bottom: 20px;
  }
  
  .field-label {
    font-size: 0.85rem;
    margin-bottom: 6px;
  }
  
  .input-control {
    padding: 16px;
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  .password-toggle {
    right: 12px;
  }
  
  .form-options {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-bottom: 24px;
  }
  
  .remember-me {
    justify-content: center;
  }
  
  .forgot-link {
    text-align: center;
  }
  
  .login-submit {
    padding: 16px 20px;
    font-size: 1rem;
  }
  
  .register-help {
    margin-top: 24px;
  }
  
  .help-text {
    font-size: 0.85rem;
  }
  
  .register-content {
    padding: 12px 16px;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .login-container {
    padding: 12px;
    min-height: 100vh;
    align-items: flex-start;
    padding-top: 40px;
  }
  
  .login-card {
    padding: 24px 20px;
    border-radius: var(--radius);
    box-shadow: 0 10px 40px rgba(0,0,0,.4);
  }
  
  .login-hero {
    position: fixed;
  }
  
  .radio-waves {
    opacity: 0.4;
  }
  
  .wave-1 { width: 200px; height: 200px; }
  .wave-2 { width: 350px; height: 350px; }
  .wave-3 { width: 500px; height: 500px; }
  
  .signal-grid {
    background-size: 80px 80px;
    opacity: 0.5;
  }
  
  .qrv73-badge .nav-brand {
    gap: 8px !important;
  }
  
  .qrv73-icon {
    width: 50px;
    height: 50px;
  }
  
  .qrv73-icon svg {
    width: 50px;
    height: 50px;
  }
  
  .qrv73-badge .brand-text {
    font-size: 1.3rem !important;
  }
  
  .qrv73-title {
    font-size: 1.4rem;
  }
  
  .qrv73-subtitle {
    font-size: 0.8rem;
  }
  
  .login-title {
    font-size: 1.2rem;
  }
  
  .login-desc {
    font-size: 0.9rem;
  }
  
  .login-error {
    padding: 12px;
    margin-bottom: 20px;
  }
  
  .error-icon {
    width: 18px;
    height: 18px;
  }
  
  .error-text {
    font-size: 0.9rem;
  }
  
  .form-field {
    margin-bottom: 18px;
  }
  
  .field-label {
    font-size: 0.8rem;
    gap: 6px;
  }
  
  .field-label svg {
    width: 14px;
    height: 14px;
  }
  
  .input-control {
    padding: 14px 16px;
    font-size: 16px;
    border-radius: var(--radius-sm);
  }
  
  .input-focus-line {
    height: 1.5px;
  }
  
  .password-toggle {
    right: 10px;
    padding: 6px;
  }
  
  .password-toggle svg {
    width: 18px;
    height: 18px;
  }
  
  .remember-me {
    font-size: 0.85rem;
    gap: 10px;
  }
  
  .checkbox-custom {
    width: 18px;
    height: 18px;
  }
  
  .checkbox-custom svg {
    width: 10px;
    height: 10px;
  }
  
  .forgot-link {
    font-size: 0.85rem;
  }
  
  .login-submit {
    padding: 14px 18px;
    font-size: 0.95rem;
  }
  
  .submit-content svg {
    width: 18px;
    height: 18px;
  }
  
  .register-help {
    margin-top: 20px;
  }
  
  .help-text {
    font-size: 0.8rem;
    margin-bottom: 12px;
  }
  
  .register-content {
    padding: 10px 14px;
    font-size: 0.85rem;
    gap: 8px;
  }
  
  .register-logo {
    height: 20px;
  }
  
  .register-content svg {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 360px) {
  .login-container {
    padding: 8px;
  }
  
  .login-card {
    padding: 20px 16px;
  }
  
  .qrv73-badge .brand-text {
    font-size: 1.2rem !important;
  }
  
  .qrv73-title {
    font-size: 1.3rem;
  }
  
  .login-title {
    font-size: 1.1rem;
  }
  
  .input-control {
    padding: 12px 14px;
  }
  
  .login-submit {
    padding: 12px 16px;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .login-submit:hover {
    transform: none;
  }
  
  .password-toggle:hover {
    background: none;
  }
  
  .register-link:hover {
    transform: none;
  }
  
  .register-link:hover .register-content {
    background: var(--card);
    border-color: var(--border2);
    box-shadow: none;
  }
}

/* Landscape mobile optimizations */
@media (max-height: 600px) and (orientation: landscape) {
  .login-container {
    min-height: auto;
    padding: 20px 16px;
  }
  
  .login-card {
    padding: 24px 20px;
  }
  
  .login-header {
    margin-bottom: 24px;
  }
  
  .qrv73-badge {
    gap: 12px;
  }
  
  .login-welcome {
    margin-top: 16px;
  }
  
  .login-title {
    font-size: 1.2rem;
    margin-bottom: 4px;
  }
  
  .login-desc {
    font-size: 0.85rem;
  }
  
  .form-field {
    margin-bottom: 16px;
  }
  
  .form-options {
    margin-bottom: 20px;
  }
  
  .register-help {
    margin-top: 16px;
  }
}

/* ─── Feature Cards ─────────────────────────────────────────────────────── */
.feature-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: border-color .3s, transform .3s ease, box-shadow .3s;
  cursor: default;
}
.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(0,212,255,.04) 100%);
  opacity: 0;
  transition: opacity .3s;
}
.feature-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  opacity: 0;
  transition: opacity .3s;
}
.feature-card:hover {
  border-color: rgba(0,212,255,.4);
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0,0,0,.4), 0 0 20px rgba(0,212,255,.1);
}
.feature-card:hover::before { opacity: 1 }
.feature-card:hover::after  { opacity: 1 }
.feature-card-icon {
  width: 48px;
  height: 48px;
  background: var(--cyan-dim);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: transform .4s var(--anim-spring), background .3s, box-shadow .3s;
  position: relative;
}
.feature-card:hover .feature-card-icon {
  transform: scale(1.12) rotate(-6deg);
  background: rgba(0,212,255,.2);
  box-shadow: 0 4px 16px rgba(0,212,255,.2);
}
.feature-card-title {
  font-weight: 700;
  margin-bottom: 6px;
  transition: color .2s;
}
.feature-card:hover .feature-card-title { color: var(--cyan) }
.feature-card-desc {
  font-size: .85rem;
  color: var(--text2);
  line-height: 1.6;
}

/* ─── 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: transform .3s ease, box-shadow .3s, border-color .3s;
  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 .3s;
}
.call-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,212,255,.04) 0%, transparent 50%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.call-card:hover {
  border-color: rgba(0,212,255,.4);
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 24px rgba(0,212,255,.12);
  text-decoration: none;
}
.call-card:hover::before { opacity:1 }
.call-card:hover::after  { 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;
  transition: border-color .3s, box-shadow .3s;
}
.call-card:hover .cc-avatar {
  border-color: rgba(0,212,255,.5);
  box-shadow: 0 0 12px rgba(0,212,255,.2);
}
.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;
  transition: all .2s;
}
.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: linear-gradient(135deg, rgba(16,185,129,.25), rgba(5,150,105,.2));
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(16,185,129,.4);
  box-shadow: 0 0 20px rgba(16,185,129,.3), inset 0 1px 0 rgba(255,255,255,.1);
  animation: verified-pulse 3.5s ease infinite;
  position: relative;
}

.verified-premium {
  background: linear-gradient(135deg, 
    rgba(16,185,129,.3) 0%, 
    rgba(5,150,105,.25) 50%, 
    rgba(16,185,129,.3) 100%);
  background-size: 200% 200%;
  animation: verified-gradient 4s ease infinite, verified-pulse 3.5s ease infinite;
  border: 2px solid rgba(16,185,129,.6);
  box-shadow: 
    0 0 30px rgba(16,185,129,.5),
    0 0 60px rgba(16,185,129,.2),
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -1px 0 rgba(0,0,0,.2);
  text-shadow: 0 1px 2px rgba(0,0,0,.3), 0 0 10px rgba(16,185,129,.4);
  font-weight: 800 !important;
  letter-spacing: 1px;
  transform-style: preserve-3d;
  transition: all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.verified-premium:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 
    0 0 40px rgba(16,185,129,.7),
    0 0 80px rgba(16,185,129,.3),
    0 8px 24px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.3);
  border-color: rgba(16,185,129,.8);
  text-decoration: none;
}

.verified-premium svg {
  animation: verified-icon-pulse 2s ease infinite;
}

.verified-shine {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255,255,255,.15) 50%,
    transparent 70%
  );
  animation: verified-shine 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes verified-gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes verified-icon-pulse {
  0%, 100% { 
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 3px rgba(16,185,129,.6));
  }
  50% { 
    transform: scale(1.2) rotate(5deg);
    filter: drop-shadow(0 0 8px rgba(16,185,129,.9));
  }
}

@keyframes verified-shine {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
@keyframes verified-pulse {
  0%, 100% { box-shadow: none }
  50% { box-shadow: 0 0 10px rgba(16,185,129,.35) }
}
.badge-verified svg { width:10px; height:10px }

/* ─── Admin badge ───────────────────────────────────────────────────────── */
.badge-admin {
  background: linear-gradient(135deg, rgba(251,191,36,.25), rgba(245,158,11,.2));
  color: #fbbf24;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(251,191,36,.4);
  box-shadow: 0 0 20px rgba(251,191,36,.3), inset 0 1px 0 rgba(255,255,255,.1);
  position: relative;
  overflow: hidden;
}

.admin-premium {
  background: linear-gradient(135deg,
    rgba(251,191,36,.35) 0%,
    rgba(245,158,11,.28) 50%,
    rgba(251,191,36,.35) 100%);
  background-size: 200% 200%;
  animation: admin-gradient 4s ease infinite, admin-pulse 3.5s ease infinite;
  border: 2px solid rgba(251,191,36,.65);
  box-shadow:
    0 0 28px rgba(251,191,36,.55),
    0 0 56px rgba(251,191,36,.2),
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -1px 0 rgba(0,0,0,.2);
  text-shadow: 0 1px 2px rgba(0,0,0,.4), 0 0 10px rgba(251,191,36,.5);
  font-size: .88rem;
  padding: 7px 16px;
  transition: all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.admin-premium:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow:
    0 0 40px rgba(251,191,36,.75),
    0 0 80px rgba(251,191,36,.3),
    0 8px 24px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.3);
  border-color: rgba(251,191,36,.9);
}

.admin-premium svg {
  animation: admin-star-pulse 2s ease infinite;
}

.admin-shine {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255,255,255,.18) 50%,
    transparent 70%
  );
  animation: admin-shine 2.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes admin-gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes admin-pulse {
  0%, 100% { box-shadow: 0 0 28px rgba(251,191,36,.55), 0 0 56px rgba(251,191,36,.2), inset 0 1px 0 rgba(255,255,255,.2); }
  50%       { box-shadow: 0 0 40px rgba(251,191,36,.75), 0 0 70px rgba(251,191,36,.3), inset 0 1px 0 rgba(255,255,255,.25); }
}
@keyframes admin-star-pulse {
  0%, 100% { transform: scale(1) rotate(-5deg); filter: drop-shadow(0 0 4px rgba(251,191,36,.8)); }
  50%       { transform: scale(1.25) rotate(5deg); filter: drop-shadow(0 0 10px rgba(251,191,36,1)); }
}
@keyframes admin-shine {
  0%   { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

/* ─── Band chips strip ──────────────────────────────────────────────────── */
.bands-strip {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
  overflow: hidden;
}
.band-chip {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: 5px 14px;
  font-size: .78rem;
  font-family: var(--mono);
  color: var(--text2);
  text-decoration: none;
  transition: all .2s;
  display: inline-block;
}
.band-chip:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  background: var(--cyan-dim);
  text-decoration: none;
  transform: translateY(-2px);
}

/* ─── 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), padding-left .2s;
  text-decoration: none;
  color: var(--text);
  border-left: 2px solid transparent;
}
.result-row:hover {
  background: var(--card2);
  text-decoration: none;
  border-left-color: var(--cyan);
  padding-left: 22px;
}
.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;
  position: relative;
  overflow: hidden;
}
.profile-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 10% 50%, rgba(0,212,255,.04) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 90% 50%, rgba(124,58,237,.04) 0%, transparent 60%);
  pointer-events: none;
}
.profile-hero-inner {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  position: relative;
}
.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);
  transition: transform .4s var(--anim-spring), box-shadow .4s, border-color .3s;
}
.profile-photo:hover {
  transform: scale(1.04) rotate(1deg);
  box-shadow: 0 0 32px rgba(0,212,255,.25);
  border-color: rgba(0,212,255,.5);
}
.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;
  text-shadow: 0 0 30px rgba(0,212,255,.4);
  animation: title-glow 3s ease-in-out infinite alternate;
}
.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;
  transition: color .2s;
}
.profile-meta-item:hover { color: var(--text) }
.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;
  transition: border-color .3s, box-shadow .3s;
}
.info-card:hover {
  border-color: var(--border2);
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.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);
  transition: all .2s;
}
.chip:hover { border-color: var(--border2) }
.chip.active {
  background: var(--cyan-dim);
  border-color: rgba(0,212,255,.35);
  color: var(--cyan);
  animation: chip-glow 3.5s ease infinite;
}
@keyframes chip-glow {
  0%, 100% { box-shadow: none }
  50% { box-shadow: 0 0 10px rgba(0,212,255,.25) }
}

/* 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;
  transition: all .25s var(--anim-spring);
}
.qsl-item:hover { transform: translateY(-2px) }
.qsl-item.active {
  border-color: var(--green);
  color: var(--green);
  background: rgba(16,185,129,.06);
}
.qsl-item.active:hover {
  box-shadow: 0 4px 16px rgba(16,185,129,.2);
}
.qsl-item .qsl-icon { font-size:1.4rem; margin-bottom:4px }

/* ─── Login / Auth ──────────────────────────────────────────────────────── */
.auth-wrap {
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  position: relative;
}
.auth-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 40%, rgba(0,212,255,.05) 0%, transparent 70%);
  pointer-events: none;
}
.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);
  position: relative;
  z-index: 1;
  transition: border-color .3s, box-shadow .4s;
}
.auth-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--radius-xl) + 1px);
  background: linear-gradient(135deg, rgba(0,212,255,.3), rgba(124,58,237,.2), rgba(0,212,255,.3));
  background-size: 200% 200%;
  z-index: -1;
  opacity: 0;
  transition: opacity .4s;
  animation: gradient-shift 4s ease infinite;
}
.auth-card:focus-within::before { opacity: 1 }
.auth-card:focus-within {
  border-color: rgba(0,212,255,.3);
  box-shadow: var(--shadow-lg), 0 0 40px rgba(0,212,255,.1);
}
@keyframes gradient-shift {
  0%   { background-position: 0% 50% }
  50%  { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}
.auth-logo {
  text-align: center;
  margin-bottom: 28px;
}
.auth-logo svg {
  animation: float 4s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0) }
  50% { transform: translateY(-6px) }
}
.auth-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.auth-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: .88rem;
  color: var(--text2);
  line-height: 1.4;
}
.auth-sub img {
  height: 20px;
  width: auto;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

/* Form elements */
.form-group { margin-bottom: 20px }
.form-label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 8px;
  transition: color .2s;
}
.form-group:focus-within .form-label { color: var(--cyan) }
.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 .25s, box-shadow .25s, background .25s;
  font-family: var(--font);
  caret-color: var(--cyan);
}
.form-control:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0,212,255,.1);
  background: var(--bg);
}
.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;
  transition: color .2s;
  background: none;
  border: none;
  padding: 4px;
}
.input-group-icon:hover { color: var(--cyan) }
.toggle-password { }

/* ─── 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;
  transition: border-color .3s;
}
.edit-sidebar-card:hover { border-color: var(--border2) }
.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;
  transition: transform .4s var(--anim-spring), box-shadow .3s, border-color .3s;
}
.edit-photo-wrap:hover {
  transform: scale(1.05);
  box-shadow: 0 0 24px rgba(0,212,255,.25);
  border-color: rgba(0,212,255,.4);
}
.edit-photo-wrap img { width:100%; height:100%; object-fit:cover }
.edit-photo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.65);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition);
  color: white;
  font-size: .75rem;
  flex-direction: column;
  gap: 4px;
}
.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;
  text-shadow: 0 0 16px rgba(0,212,255,.3);
}
.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;
  position: relative;
  overflow: hidden;
}
.edit-nav-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--cyan);
  transform: scaleY(0);
  transition: transform .2s;
}
.edit-nav-item:hover  { background:var(--card2); color:var(--text) }
.edit-nav-item.active { background:var(--cyan-dim); color:var(--cyan) }
.edit-nav-item.active::before { transform: scaleY(1) }
.tab-content { display:none }
.tab-content.active { display:block; animation: fadeIn .3s ease both }

/* Form sections */
.form-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 20px;
  transition: border-color .2s;
}
.form-section:hover { border-color: var(--border2) }
.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);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 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 .25s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  left: 3px;
  top: 3px;
  transition: transform .25s var(--anim-spring);
  box-shadow: 0 2px 4px rgba(0,0,0,.3);
}
.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 .2s;
  user-select: none;
}
.chip-opt:hover { border-color:var(--cyan); color:var(--cyan); transform:translateY(-1px) }
.chip-opt.selected {
  background: var(--cyan-dim);
  border-color: rgba(0,212,255,.4);
  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;
  animation: fadeIn .3s ease both;
}
.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 .2s var(--anim-spring);
  text-decoration: none;
}
.page-btn:hover    { border-color:var(--cyan); color:var(--cyan); text-decoration:none; transform:translateY(-1px) }
.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} }

/* Search loading */
.search-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  color: var(--text3);
  font-size: .85rem;
}
.search-loading .spinner { margin: 0; width: 14px; height: 14px; }

/* ─── 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);
  position: relative;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,.2), transparent);
}
.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);
  position: relative;
}
.footer-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0; right: 0;
  height: 1px;
  background: var(--cyan);
  transform: scaleX(0);
  transition: transform .2s;
}
.footer-links a:hover { color:var(--cyan); text-decoration:none }
.footer-links a:hover::after { transform: scaleX(1) }
.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 }

/* ─── Toast System ──────────────────────────────────────────────────────── */
#toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  font-size: .88rem;
  font-weight: 600;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transform: translateY(16px) scale(.95);
  transition: all .3s var(--anim-spring);
  max-width: 320px;
  display: flex;
  align-items: center;
  gap: 10px;
  backdrop-filter: blur(8px);
}
#toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}
#toast.toast-success { background:rgba(16,185,129,.15); border:1px solid rgba(16,185,129,.4); color:var(--green) }
#toast.toast-error   { background:rgba(239,68,68,.15);  border:1px solid rgba(239,68,68,.4);  color:var(--red) }
#toast.toast-info    { background:var(--cyan-dim);       border:1px solid rgba(0,212,255,.3);  color:var(--cyan) }
#toast.toast-warning { background:rgba(245,158,11,.12);  border:1px solid rgba(245,158,11,.4); color:var(--amber) }

/* ─── Scroll Reveal ─────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-scale {
  opacity: 0;
  transform: scale(.92);
  transition: opacity .6s ease, transform .6s var(--anim-spring);
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger delays for child elements */
.stagger > *:nth-child(1)  { transition-delay: .05s }
.stagger > *:nth-child(2)  { transition-delay: .10s }
.stagger > *:nth-child(3)  { transition-delay: .15s }
.stagger > *:nth-child(4)  { transition-delay: .20s }
.stagger > *:nth-child(5)  { transition-delay: .25s }
.stagger > *:nth-child(6)  { transition-delay: .30s }
.stagger > *:nth-child(7)  { transition-delay: .35s }
.stagger > *:nth-child(8)  { transition-delay: .40s }
.stagger > *:nth-child(9)  { transition-delay: .45s }
.stagger > *:nth-child(10) { transition-delay: .50s }
.stagger > *:nth-child(11) { transition-delay: .52s }
.stagger > *:nth-child(12) { transition-delay: .54s }
.stagger > *:nth-child(n+13) { transition-delay: .56s }

/* ─── 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: 768px) {
  .edit-layout    { gap:16px; padding:24px 0 }
  .admin-two-col  { grid-template-columns:1fr }
}
@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:none }
  .cards-grid { grid-template-columns:repeat(2, 1fr) }
  .profile-hero-inner { flex-direction:column; align-items:center; text-align:center }
  .profile-name { justify-content: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; gap:16px }
  .search-box input { padding:14px 110px 14px 20px; font-size:1rem }
  .section { padding:32px 0 }
  /* Mesajlaşma responsive */
  .nav-icon-btn { width:36px; height:36px }
  .nav-icon-btn svg { width:18px; height:18px }
  .nav-badge { font-size:.65rem; min-width:16px; height:16px; padding:2px 5px }
}
@media (max-width: 480px) {
  .container { padding:0 12px }
  .section { padding:20px 0 }
  .hero { padding:32px 0 28px }
  .hero-stats { gap:10px; flex-wrap:wrap }
  .hstat-num { font-size:1.2rem }
  .hstat { padding:6px 10px }
  .cards-grid { grid-template-columns:1fr }
  .result-row { grid-template-columns:1fr; gap:4px; padding:12px 14px }
  .result-row .rr-loc, .result-row .rr-class { display:none }
  .qsl-grid { grid-template-columns:1fr }
  .empty-state { padding:40px 12px }
  .auth-card { padding:24px 16px }
  .form-section { padding:16px }
  .search-box input { padding:12px 90px 12px 14px; font-size:.95rem; letter-spacing:1px }
  .search-box-btn { padding:8px 14px; font-size:.82rem }
  .footer-links { gap:10px }
  .footer-info { font-size:.75rem }
  #toast { bottom:12px; right:12px; left:12px; max-width:none }
  .nav-dropdown { width:calc(100vw - 40px); max-width:240px }
  .profile-callsign { font-size:clamp(1.5rem, 6vw, 3rem) }
}
@media (max-width: 400px) {
  .auth-card { padding:20px 14px }
}

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

/* Staggered fade-in for .fade-in children */
.fade-in-group > *:nth-child(1) { animation-delay:.05s }
.fade-in-group > *:nth-child(2) { animation-delay:.12s }
.fade-in-group > *:nth-child(3) { animation-delay:.19s }
.fade-in-group > *:nth-child(4) { animation-delay:.26s }

/* ─── Glow text ─────────────────────────────────────────────────────────── */
.text-glow { text-shadow:0 0 24px rgba(0,212,255,.6), 0 0 48px rgba(0,212,255,.2) }

/* ─── Admin Panel ───────────────────────────────────────────────────────── */
.admin-wrap {
  display: flex;
  min-height: calc(100vh - 64px);
}
.admin-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  overflow-y: auto;
}
.admin-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 16px;
  border-bottom: 1px solid var(--border);
}
.admin-nav {
  display: flex;
  flex-direction: column;
  padding: 12px 8px;
  flex: 1;
}
.admin-nav-group {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text3);
  padding: 12px 8px 6px;
}
.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  font-size: .86rem;
  color: var(--text2);
  text-decoration: none;
  transition: all var(--transition);
  margin-bottom: 1px;
  border-left: 2px solid transparent;
}
.admin-nav-item:hover { background:var(--card); color:var(--text); text-decoration:none; border-left-color:var(--border2) }
.admin-nav-item.active { background:var(--cyan-dim); color:var(--cyan); border-left-color:var(--cyan) }
.admin-main {
  flex: 1;
  padding: 0 28px 40px;
  min-width: 0;
  overflow-x: hidden;
}
.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.admin-page-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}
.admin-page-title svg { color:var(--cyan) }
.admin-topbar-date { font-size:.82rem; color:var(--text3) }
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.astat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all .2s;
}
.astat-card:hover {
  border-color: var(--border2);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.astat-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.astat-num {
  font-size: 1.5rem;
  font-weight: 800;
  font-family: var(--mono);
  line-height: 1;
  color: var(--text);
}
.astat-label { font-size: .75rem; color: var(--text3); margin-top: 3px; text-transform:uppercase; letter-spacing:.5px }
.admin-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.admin-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
}
.admin-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text3);
}
.admin-card-head svg { color:var(--cyan) }
.admin-table-wrap { overflow-x: auto }
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .86rem;
}
.admin-table th {
  padding: 10px 16px;
  text-align: left;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text3);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.admin-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.admin-table tr:last-child td { border-bottom: none }
.admin-table tbody tr { transition: background .15s }
.admin-table tbody tr:hover { background: var(--card2) }
.admin-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan-dim), var(--purple-dim));
  border: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .8rem;
  overflow: hidden;
  flex-shrink: 0;
}
.admin-avatar img { width:100%; height:100%; object-fit:cover }
.toggle-vis-btn, .toggle-ver-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 50px;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid;
  transition: all var(--transition);
  white-space: nowrap;
}
.toggle-vis-btn:disabled, .toggle-ver-btn:disabled { opacity:.4; cursor:not-allowed }
.vis-visible { background:rgba(0,212,255,.08); border-color:rgba(0,212,255,.3); color:var(--cyan) }
.vis-visible:hover { background: rgba(0,212,255,.15) }
.vis-hidden  { background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.3); color:var(--red) }
.vis-hidden:hover  { background: rgba(239,68,68,.15) }
.ver-yes { background:rgba(16,185,129,.08); border-color:rgba(16,185,129,.3); color:var(--green) }
.ver-yes:hover { background: rgba(16,185,129,.15) }
.ver-no  { background:var(--card2); border-color:var(--border); color:var(--text3) }
.ver-no:hover  { border-color:var(--green); color:var(--green) }
.admin-toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-size: .88rem;
  font-weight: 600;
  z-index: 9999;
  opacity: 0;
  transform: translateY(10px);
  transition: all .25s var(--anim-spring);
  pointer-events: none;
}
.admin-toast.show { opacity:1; transform:translateY(0) }
.toast-ok  { background:rgba(16,185,129,.15); border:1px solid rgba(16,185,129,.4); color:var(--green) }
.toast-err { background:rgba(239,68,68,.15);  border:1px solid rgba(239,68,68,.4);  color:var(--red) }
@media (max-width: 1024px) {
  .admin-two-col { grid-template-columns: 1fr }
}
.admin-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.admin-sidebar-overlay.show { opacity: 1; pointer-events: auto; }
.admin-sidebar-close-btn {
  display: none;
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: color .15s, background .15s;
  flex-shrink: 0;
}
.admin-sidebar-close-btn:hover { color: var(--text); background: var(--card2) }
@media (max-width: 768px) {
  .admin-sidebar-overlay { display: block }
  .admin-sidebar-close-btn { display: flex; align-items: center; justify-content: center }
  .admin-sidebar {
    position: fixed;
    top: 0;
    left: -100vw;
    width: min(260px, 85vw);
    height: 100vh;
    z-index: 1000;
    transition: left .28s cubic-bezier(.4,0,.2,1), box-shadow .28s;
    overflow-y: auto;
  }
  .admin-sidebar.sidebar-open {
    left: 0;
    box-shadow: 6px 0 32px rgba(0,0,0,.45);
  }
  .admin-main { padding: 0 16px 40px }
  .admin-stats-grid { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 480px) {
  .admin-stats-grid { grid-template-columns: 1fr }
  .admin-main { padding: 0 12px 20px }
  .admin-topbar { padding: 12px 0 10px; flex-wrap: wrap; gap: 8px }
  .admin-topbar-date { width: 100%; font-size: .75rem }
  .admin-table th { white-space: normal; font-size: .65rem; padding: 8px 10px }
  .admin-table td { padding: 8px 10px; font-size: .82rem }
  .admin-two-col { grid-template-columns: 1fr }
}
@media (min-width: 769px) {
  .admin-sidebar-overlay { display: none !important }
  .admin-sidebar-close-btn { display: none !important }
}
.toggle-adm-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 50px;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid;
  transition: all var(--transition);
  white-space: nowrap;
}
.toggle-adm-btn:disabled { opacity:.4; cursor:not-allowed }
.adm-yes { background:rgba(245,158,11,.1); border-color:rgba(245,158,11,.4); color:var(--amber) }
.adm-yes:hover { background: rgba(245,158,11,.2) }
.adm-no  { background:var(--card2); border-color:var(--border); color:var(--text3) }
.adm-no:hover  { border-color:var(--amber); color:var(--amber) }


/* ── Additional Modern Effects ──────────────────────────────────────────── */

/* Glassmorphism effect for cards */
.glass-card {
  background: rgba(17, 24, 39, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Gradient text animation */
.gradient-text {
  background: linear-gradient(90deg, var(--cyan), var(--purple), var(--cyan));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-flow 3s linear infinite;
}

@keyframes gradient-flow {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* Floating animation for icons */
@keyframes float-gentle {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.float-icon {
  animation: float-gentle 3s ease-in-out infinite;
}

/* Pulse glow effect */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(0, 212, 255, 0.2);
  }
  50% {
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.6), 0 0 30px rgba(0, 212, 255, 0.4);
  }
}

.pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Slide in from bottom */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-in-up {
  animation: slideInUp 0.6s ease-out;
}

/* Bounce in */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

.bounce-in {
  animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Shake animation for errors */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake {
  animation: shake 0.5s;
}

/* Rotate on hover */
.rotate-hover {
  transition: transform 0.3s ease;
}

.rotate-hover:hover {
  transform: rotate(360deg);
}

/* Scale pulse */
@keyframes scale-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.scale-pulse {
  animation: scale-pulse 2s ease-in-out infinite;
}

/* Neon glow text */
.neon-text {
  text-shadow: 
    0 0 5px rgba(0, 212, 255, 0.5),
    0 0 10px rgba(0, 212, 255, 0.5),
    0 0 20px rgba(0, 212, 255, 0.5),
    0 0 40px rgba(0, 212, 255, 0.3);
  animation: neon-flicker 1.5s infinite alternate;
}

@keyframes neon-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow: 
      0 0 5px rgba(0, 212, 255, 0.5),
      0 0 10px rgba(0, 212, 255, 0.5),
      0 0 20px rgba(0, 212, 255, 0.5),
      0 0 40px rgba(0, 212, 255, 0.3);
  }
  20%, 24%, 55% {
    text-shadow: none;
  }
}

/* Gradient border animation */
.gradient-border {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(45deg, var(--cyan), var(--purple), var(--cyan));
  background-size: 400% 400%;
  border-radius: inherit;
  z-index: -1;
  animation: gradient-rotate 3s ease infinite;
}

@keyframes gradient-rotate {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Shimmer effect */
.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  animation: shimmer-slide 2s infinite;
}

@keyframes shimmer-slide {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Tilt effect on hover */
.tilt-card {
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
}

.tilt-card:hover {
  transform: perspective(1000px) rotateX(5deg) rotateY(5deg);
}

/* Magnetic button effect */
.magnetic-btn {
  transition: transform 0.2s ease;
}

/* Particle background */
.particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--cyan);
  border-radius: 50%;
  opacity: 0.3;
  animation: particle-float 10s infinite;
}

@keyframes particle-float {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.3;
  }
  90% {
    opacity: 0.3;
  }
  100% {
    transform: translateY(-100vh) translateX(50px);
    opacity: 0;
  }
}

/* Loading dots animation */
.loading-dots {
  display: inline-flex;
  gap: 4px;
}

.loading-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  animation: loading-bounce 1.4s infinite ease-in-out both;
}

.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes loading-bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* Smooth color transition */
.color-transition {
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

/* Hover lift effect */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* ══════════════════════════════════════════════════════════════════════════
   HOMEPAGE ENHANCEMENTS — Amatör Telsizci Temalı
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── Morse / CQ Ticker ──────────────────────────────────────────────────── */
.morse-ticker {
  background: rgba(0,212,255,.022);
  border-bottom: 1px solid rgba(0,212,255,.07);
  overflow: hidden;
  padding: 6px 0;
  position: relative;
  z-index: 2;
}
.morse-ticker-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.morse-ticker-tag {
  font-family: var(--mono);
  font-size: .65rem;
  font-weight: 800;
  color: var(--cyan);
  background: var(--cyan-dim);
  border: 1px solid rgba(0,212,255,.3);
  padding: 2px 10px;
  border-radius: 50px;
  letter-spacing: 3px;
  white-space: nowrap;
  flex-shrink: 0;
  animation: cq-badge-pulse 3s ease infinite;
}
@keyframes cq-badge-pulse {
  0%,100% { box-shadow:none; border-color:rgba(0,212,255,.3); }
  50%      { box-shadow:0 0 12px rgba(0,212,255,.35); border-color:rgba(0,212,255,.6); }
}
.morse-live-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .63rem;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 1px;
  text-transform: uppercase;
  flex-shrink: 0;
  white-space: nowrap;
  border-right: 1px solid var(--border);
  padding-right: 14px;
  margin-right: 4px;
}
.morse-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  animation: live-dot-blink 1.4s ease infinite;
}
@keyframes live-dot-blink {
  0%,100% { opacity:1; box-shadow:0 0 5px rgba(16,185,129,.7); }
  50%      { opacity:.3; box-shadow:none; }
}
.morse-scroll-wrap {
  flex: 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg,transparent 0%,#000 5%,#000 95%,transparent 100%);
  mask-image: linear-gradient(90deg,transparent 0%,#000 5%,#000 95%,transparent 100%);
  min-width: 0;
}
.morse-scroll-track {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--text3);
  letter-spacing: .5px;
  white-space: nowrap;
  cursor: default;
  will-change: transform;
}
.morse-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 28px;
}
.morse-item-call { color: var(--cyan); font-weight: 700; letter-spacing: 2px; text-decoration: none; }
.morse-item-call:hover { text-decoration: underline; color: var(--cyan); }
.morse-item-sep  { color: var(--border2); margin: 0 2px; }
.morse-item-kw   { color: var(--amber); font-weight: 600; }
.morse-item-txt  { color: var(--text3); }
@keyframes cq-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ─── Hero — Radar Rings ─────────────────────────────────────────────────── */
.hero-radar-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.radar-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0,212,255,.22);
  animation: radar-ring-expand 5s ease-out infinite;
}
.radar-ring:nth-child(1) { animation-delay:    0s; }
.radar-ring:nth-child(2) { animation-delay: 1.25s; }
.radar-ring:nth-child(3) { animation-delay:  2.5s; }
.radar-ring:nth-child(4) { animation-delay: 3.75s; }
@keyframes radar-ring-expand {
  0%   { width:30px;  height:30px;  border-color:rgba(0,212,255,.6); opacity:.9; }
  100% { width:900px; height:900px; border-color:rgba(0,212,255,.0); opacity:0;  }
}

/* ─── Hero — QRV Live Badge ──────────────────────────────────────────────── */
.qrv-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(16,185,129,.07);
  border: 1px solid rgba(16,185,129,.22);
  color: var(--green);
  font-size: .7rem;
  font-weight: 700;
  padding: 5px 16px;
  border-radius: 50px;
  letter-spacing: 1.5px;
  font-family: var(--mono);
  text-transform: uppercase;
  transition: all .3s;
}
.qrv-badge:hover {
  background: rgba(16,185,129,.13);
  border-color: rgba(16,185,129,.4);
  box-shadow: 0 0 16px rgba(16,185,129,.2);
}
.qrv-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  animation: qrv-dot-pulse 1.8s ease infinite;
  box-shadow: 0 0 0 0 rgba(16,185,129,.5);
}
@keyframes qrv-dot-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(16,185,129,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(16,185,129,0);  }
  100% { box-shadow: 0 0 0 0   rgba(16,185,129,0);  }
}

/* ─── Hero — Info Chips (QTH, Mode, QSL, 73) ────────────────────────────── */
.hero-info-strip {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(13,18,32,.6);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  font-size: .68rem;
  font-family: var(--mono);
  backdrop-filter: blur(4px);
  transition: border-color .25s, background .25s, transform .25s;
  cursor: default;
  white-space: nowrap;
}
.hero-chip:hover {
  border-color: rgba(0,212,255,.3);
  background: rgba(0,212,255,.05);
  transform: translateY(-2px);
}
.hero-chip-key { color: var(--text3); }
.hero-chip-val { color: var(--cyan);  font-weight: 700; letter-spacing: .5px; }

/* ─── Band Conditions Strip ──────────────────────────────────────────────── */
.band-cond {
  background: rgba(8,12,24,.7);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: visible;
}
.band-cond-inner {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
}
.band-cond-inner::-webkit-scrollbar { display: none; }
.band-cond-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: .65rem;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 2px;
  border-right: 1px solid var(--border);
  white-space: nowrap;
  flex-shrink: 0;
}
.band-cond-label svg { color: var(--cyan); }
.band-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-right: 1px solid var(--border);
  gap: 4px;
  transition: background .2s;
  flex-shrink: 0;
  cursor: default;
  position: relative;
}
.band-item::after {
  content: '';
  position: absolute;
  bottom: 0; left: 25%; right: 25%;
  height: 2px;
  border-radius: 2px;
  opacity: 0;
  transition: opacity .2s;
}
.band-item:hover { background: rgba(0,212,255,.04); }
.band-item:hover::after { opacity: 1; }
.band-freq {
  font-family: var(--mono);
  font-size: .73rem;
  font-weight: 700;
  color: var(--text);
}
.band-stat {
  font-size: .6rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.bs-good   { background:rgba(16,185,129,.15); color:var(--green); }
.bs-fair   { background:rgba(245,158,11,.12); color:var(--amber); }
.bs-poor   { background:rgba(239,68,68,.10);  color:var(--red);   }
.bs-closed { background:rgba(90,107,127,.1);  color:var(--text3); }
.band-item.bg-good::after   { background: var(--green); }
.band-item.bg-fair::after   { background: var(--amber); }
.band-item.bg-poor::after   { background: var(--red);   }
.band-item.bg-closed::after { background: var(--border2); }
.band-cond-suffix {
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: .62rem;
  color: var(--text3);
  white-space: nowrap;
  gap: 6px;
  flex-shrink: 0;
}

/* ─── Hero — Antenna Decoration ──────────────────────────────────────────── */
.hero-ant-dec {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: .055;
  z-index: 0;
}
@media (max-width: 900px) { .hero-ant-dec { display: none; } }

/* ─── Feature Card — Stat Icon ───────────────────────────────────────────── */
.hstat-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--cyan-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  transition: transform .4s var(--anim-spring), background .3s;
}
.hstat:hover .hstat-icon {
  transform: scale(1.15) rotate(-8deg);
  background: rgba(0,212,255,.2);
}

/* ─── Signal Bars (on call cards) ────────────────────────────────────────── */
.sig-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}
.sig-bar {
  width: 3px;
  border-radius: 2px;
  background: var(--border2);
  transition: background .3s;
}
.sig-bar:nth-child(1) { height: 3px;  }
.sig-bar:nth-child(2) { height: 6px;  }
.sig-bar:nth-child(3) { height: 9px;  }
.sig-bar:nth-child(4) { height: 12px; }
.sig-bar:nth-child(5) { height: 14px; }

/* ─── Responsive tweaks ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .morse-live-indicator { display: none; }
  .band-cond-label { display: none; }
  .hero-info-strip { gap: 6px; }
  .hero-chip { font-size: .62rem; padding: 4px 9px; }
}

/* Glow on focus */
input:focus, textarea:focus, select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
}

/* Smooth page transitions */
.page-transition {
  animation: fadeIn 0.4s ease-in-out;
}

/* Badge pulse */
.badge-pulse {
  animation: badge-pulse-anim 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes badge-pulse-anim {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Skeleton loading improved */
.skeleton-wave {
  background: linear-gradient(
    90deg,
    var(--card) 0%,
    var(--card2) 20%,
    var(--card) 40%,
    var(--card) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-wave 1.5s linear infinite;
}

@keyframes skeleton-wave {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Spotlight effect */
.spotlight {
  position: relative;
  overflow: hidden;
}

.spotlight::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(0, 212, 255, 0.1) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.spotlight:hover::before {
  opacity: 1;
}

/* Typewriter cursor */
.typewriter-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--cyan);
  margin-left: 2px;
  animation: cursor-blink 1s step-end infinite;
}

@keyframes cursor-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Smooth transitions for all interactive elements */
a, button, input, select, textarea, .btn, .badge, .chip {
  transition: all 0.2s ease;
}

/* Focus visible for accessibility */
*:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Equipment Tag Input ──────────────────────────────────────────────── */
.equipment-tag-input-wrap {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
  min-height: 80px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
  transition: border-color .25s, box-shadow .25s;
}

.equipment-tag-input-wrap:focus-within {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0,212,255,.1);
}

.equipment-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}

.equipment-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 50px;
  padding: 5px 10px 5px 14px;
  font-size: .85rem;
  color: var(--text);
  transition: all .2s;
  animation: bounce-in .3s ease;
}

.equipment-tag:hover {
  border-color: var(--cyan);
  background: var(--cyan-dim);
  transform: translateY(-1px);
}

.equipment-tag-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(239,68,68,.15);
  border: none;
  color: var(--red);
  cursor: pointer;
  transition: all .2s;
  padding: 0;
  flex-shrink: 0;
}

.equipment-tag-remove:hover {
  background: rgba(239,68,68,.25);
  transform: scale(1.1);
}

.equipment-input {
  flex: 1;
  min-width: 200px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: .9rem;
  padding: 6px 8px;
  font-family: var(--font);
}

.equipment-input::placeholder {
  color: var(--text3);
}

/* Equipment Chip List (Display) */
.equipment-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.equipment-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--card2), var(--card));
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-size: .88rem;
  color: var(--text);
  transition: all .3s var(--anim-spring);
  position: relative;
  overflow: hidden;
}

.equipment-chip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,212,255,.05), transparent);
  opacity: 0;
  transition: opacity .3s;
}

.equipment-chip:hover {
  border-color: var(--cyan);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0,0,0,.3), 0 0 20px rgba(0,212,255,.15);
}

.equipment-chip:hover::before {
  opacity: 1;
}

.equipment-chip svg {
  color: var(--cyan);
  flex-shrink: 0;
  transition: transform .3s;
}

.equipment-chip:hover svg {
  transform: scale(1.15) rotate(-5deg);
}

.equipment-chip span {
  font-weight: 500;
  position: relative;
  z-index: 1;
}

/* Association Chip (Dernek) */
.association-chip {
  background: linear-gradient(135deg, rgba(124,58,237,.08), rgba(124,58,237,.03));
  border-color: rgba(124,58,237,.3);
}

.association-chip::before {
  background: linear-gradient(135deg, rgba(124,58,237,.08), transparent);
}

.association-chip:hover {
  border-color: var(--purple);
  box-shadow: 0 8px 20px rgba(0,0,0,.3), 0 0 20px rgba(124,58,237,.2);
}

.association-chip svg {
  color: var(--purple);
}

@keyframes fade-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.8); }
}


/* ── Logo Responsive Styles ──────────────────────────────────────────────── */
.nav-brand img {
  transition: transform 0.4s var(--anim-spring), filter 0.3s;
  display: block;
}

.nav-brand:hover img {
  transform: scale(1.05);
  filter: drop-shadow(0 0 8px rgba(0,212,255,.6));
}

.footer-brand img {
  transition: transform 0.3s ease, filter 0.3s;
}

.footer-brand:hover img {
  transform: scale(1.02);
  filter: brightness(1.1);
}

/* Logo upload preview */
#logoPreview:hover {
  border-color: var(--cyan);
  background: var(--card);
}

#logoPreview img {
  transition: transform 0.3s ease;
}

#logoPreview:hover img {
  transform: scale(1.05);
}

/* Responsive logo adjustments */
@media (max-width: 680px) {
  .nav-brand img {
    height: 28px !important;
    max-width: 100px !important;
  }
  
  .footer-brand img {
    height: 24px !important;
    max-width: 80px !important;
  }
  
  .brand-text {
    font-size: 1.2rem;
  }
}

@media (max-width: 400px) {
  .nav-brand img {
    height: 24px !important;
    max-width: 80px !important;
  }
  
  .brand-text {
    font-size: 1.1rem;
  }
}

/* Logo animation on page load */
@keyframes logo-entrance {
  0% {
    opacity: 0;
    transform: scale(0.8) rotate(-10deg);
  }
  60% {
    transform: scale(1.1) rotate(5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.nav-brand {
  animation: logo-entrance 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Logo hover glow effect */
.nav-brand svg,
.nav-brand img {
  filter: drop-shadow(0 0 0 transparent);
  transition: filter 0.3s ease;
}

.nav-brand:hover svg,
.nav-brand:hover img {
  filter: drop-shadow(0 0 8px rgba(0,212,255,.6));
}


/* ── Social Media Links ──────────────────────────────────────────────── */
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--card2);
  border: 1px solid var(--border);
  color: var(--text2);
  transition: all .3s var(--anim-spring);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.social-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--cyan-dim), var(--purple-dim));
  opacity: 0;
  transition: opacity .3s;
}

.social-link:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 16px rgba(0,0,0,.3), 0 0 16px rgba(0,212,255,.2);
  text-decoration: none;
}

.social-link:hover::before {
  opacity: 1;
}

.social-link svg {
  position: relative;
  z-index: 1;
  transition: transform .3s;
}

.social-link:hover svg {
  transform: scale(1.15) rotate(-5deg);
}


/* ── Clickable Badges & Chips ──────────────────────────────────────── */
a.badge {
  transition: all .3s var(--anim-spring);
}

a.badge:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  text-decoration: none;
}

a.badge-cyan:hover {
  background: rgba(0,212,255,.2);
  box-shadow: 0 4px 12px rgba(0,212,255,.3);
}

a.badge-verified:hover {
  background: rgba(16,185,129,.25);
  box-shadow: 0 4px 12px rgba(16,185,129,.3);
}

a.badge-red:hover {
  background: rgba(239,68,68,.2);
  box-shadow: 0 4px 12px rgba(239,68,68,.3);
}

a.equipment-chip {
  cursor: pointer;
}

a.equipment-chip:hover {
  text-decoration: none;
}

a.association-chip:hover {
  border-color: var(--purple);
  box-shadow: 0 8px 20px rgba(0,0,0,.3), 0 0 20px rgba(124,58,237,.25);
}


/* ── Clickable Info Row Links ──────────────────────────────────────── */
.info-row a:hover {
  color: var(--cyan) !important;
  text-decoration: underline !important;
}

.info-row a.mono:hover {
  transform: translateX(3px);
  text-shadow: 0 0 8px rgba(0,212,255,.4);
}


/* ── Equipment Autocomplete Suggestions ──────────────────────────────────── */
.equipment-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: rgba(26, 34, 53, 0.98);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  max-height: 200px;
  overflow-y: auto;
  z-index: 100;
  display: none;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.equipment-suggestion-item {
  padding: 10px 14px;
  cursor: pointer;
  transition: all .15s;
  font-size: .88rem;
  color: var(--text);
  border-left: 2px solid transparent;
}

.equipment-suggestion-item:hover {
  background: var(--card);
  border-left-color: var(--cyan);
  color: var(--cyan);
}

.equipment-tag-input-wrap {
  position: relative;
}


/* ── Silent Key Badge ──────────────────────────────────────────────── */
.badge-silent-key {
  background: linear-gradient(135deg, 
    rgba(148,163,184,.25) 0%, 
    rgba(100,116,139,.2) 50%, 
    rgba(148,163,184,.25) 100%);
  background-size: 200% 200%;
  animation: sk-gradient 4s ease infinite, sk-pulse 3.5s ease infinite;
  border: 2px solid rgba(148,163,184,.5);
  box-shadow: 
    0 0 30px rgba(148,163,184,.4),
    0 0 60px rgba(148,163,184,.15),
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -1px 0 rgba(0,0,0,.2);
  color: #94a3b8;
  text-shadow: 0 1px 2px rgba(0,0,0,.4), 0 0 10px rgba(148,163,184,.3);
  font-weight: 800 !important;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  cursor: help;
  transition: all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.badge-silent-key:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 
    0 0 40px rgba(148,163,184,.6),
    0 0 80px rgba(148,163,184,.25),
    0 8px 24px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.25);
  border-color: rgba(148,163,184,.7);
}

.badge-silent-key svg {
  animation: sk-icon-float 3s ease infinite;
}

.sk-shine {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255,255,255,.1) 50%,
    transparent 70%
  );
  animation: sk-shine-move 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes sk-gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes sk-pulse {
  0%, 100% { 
    box-shadow: 
      0 0 30px rgba(148,163,184,.4),
      0 0 60px rgba(148,163,184,.15),
      inset 0 1px 0 rgba(255,255,255,.15);
  }
  50% { 
    box-shadow: 
      0 0 40px rgba(148,163,184,.6),
      0 0 80px rgba(148,163,184,.25),
      inset 0 1px 0 rgba(255,255,255,.2);
  }
}

@keyframes sk-icon-float {
  0%, 100% { 
    transform: translateY(0) rotate(0deg);
    filter: drop-shadow(0 0 3px rgba(148,163,184,.6));
  }
  50% { 
    transform: translateY(-3px) rotate(-5deg);
    filter: drop-shadow(0 0 6px rgba(148,163,184,.8));
  }
}

@keyframes sk-shine-move {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}


/* ── Silent Key Toggle Button (Admin) ──────────────────────────────────── */
.toggle-sk-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 50px;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid;
  transition: all var(--transition);
  white-space: nowrap;
}

.toggle-sk-btn:disabled { 
  opacity: .4; 
  cursor: not-allowed; 
}

.sk-yes { 
  background: rgba(148,163,184,.12); 
  border-color: rgba(148,163,184,.4); 
  color: #94a3b8; 
}

.sk-yes:hover { 
  background: rgba(148,163,184,.2); 
}

.sk-no { 
  background: var(--card2); 
  border-color: var(--border); 
  color: var(--text3); 
}

.sk-no:hover { 
  border-color: #94a3b8; 
  color: #94a3b8; 
}


/* ── Messaging System ──────────────────────────────────────────────── */
.messages-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  min-height: calc(100vh - 200px);
}

.messages-sidebar {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  height: fit-content;
  position: sticky;
  top: 88px;
}

.messages-sidebar-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.messages-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.messages-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text2);
  text-decoration: none;
  transition: all .2s;
  position: relative;
  font-size: .9rem;
}

.messages-nav-item:hover {
  background: var(--card2);
  color: var(--text);
  text-decoration: none;
}

.messages-nav-item.active {
  background: var(--cyan-dim);
  color: var(--cyan);
  font-weight: 600;
}

.messages-nav-item svg {
  flex-shrink: 0;
}

.messages-nav-item span:nth-child(2) {
  flex: 1;
}

.messages-badge {
  background: var(--red);
  color: white;
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 50px;
  min-width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse-badge 2s ease infinite;
}

@keyframes pulse-badge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.messages-main {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: 600px;
  position: relative;
}

.messages-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 600px;
}

.message-list {
  display: flex;
  flex-direction: column;
}

.message-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: all .2s;
  position: relative;
}

.message-item:hover {
  background: var(--card2);
}

.message-item.unread {
  background: rgba(0,212,255,.03);
  border-left: 3px solid var(--cyan);
}

.message-item.unread:hover {
  background: rgba(0,212,255,.06);
}

.message-avatar {
  width: 48px;
  height: 48px;
  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;
  color: var(--cyan);
  overflow: hidden;
  flex-shrink: 0;
}

.message-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message-info {
  flex: 1;
  min-width: 0;
}

.message-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.message-from {
  font-weight: 700;
  color: var(--text);
  font-size: .95rem;
}

.message-time {
  font-size: .78rem;
  color: var(--text3);
}

.message-subject {
  font-weight: 600;
  color: var(--text);
  font-size: .9rem;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.message-preview {
  font-size: .85rem;
  color: var(--text2);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.message-unread-dot {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: var(--cyan);
  border-radius: 50%;
  animation: pulse-dot 2s ease infinite;
}

.message-read-badge,
.message-unread-badge {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: .7rem;
  padding: 3px 8px;
  border-radius: 50px;
  font-weight: 600;
}

.message-read-badge {
  background: rgba(16,185,129,.12);
  color: var(--green);
}

.message-unread-badge {
  background: rgba(148,163,184,.12);
  color: var(--text3);
}

/* Message Detail */
.message-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.message-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.message-detail-body {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

.message-detail-main {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: var(--card2);
  border-radius: var(--radius);
  margin-bottom: 24px;
}

.message-detail-avatar {
  width: 56px;
  height: 56px;
  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.3rem;
  color: var(--cyan);
  overflow: hidden;
  flex-shrink: 0;
}

.message-detail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message-detail-from {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.message-detail-subject {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
}

.message-detail-content {
  font-size: .95rem;
  color: var(--text2);
  line-height: 1.7;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.message-replies {
  margin-top: 24px;
}

.message-replies-title {
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text3);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.message-reply {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: var(--bg2);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  border-left: 2px solid var(--cyan);
}

/* Blocked Users */
.blocked-list {
  display: flex;
  flex-direction: column;
}

.blocked-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.blocked-item:last-child {
  border-bottom: none;
}

/* New Message Modal */
.message-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn .3s ease;
}

.message-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(10px);
}

.message-modal-content {
  position: relative;
  width: 90%;
  max-width: 600px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  animation: slideInUp .3s ease;
}

.message-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.message-modal-header h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
}

.message-modal-close {
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  padding: 4px;
  transition: color .2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.message-modal-close:hover {
  color: var(--cyan);
}

.message-modal-content form {
  padding: 24px;
}

.recipient-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: rgba(26, 34, 53, 0.98);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  max-height: 280px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.recipient-suggestion-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  transition: all .15s;
  border-left: 2px solid transparent;
}

.recipient-suggestion-item:hover {
  background: var(--card);
  border-left-color: var(--cyan);
}

.recipient-suggestion-item:active {
  transform: scale(0.98);
}

/* Responsive */
@media (max-width: 900px) {
  .messages-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .messages-sidebar {
    position: static;
  }
}

@media (max-width: 480px) {
  .messages-layout { gap: 12px }
  .messages-sidebar { padding: 14px }
  .messages-sidebar-header { gap: 10px; margin-bottom: 14px; padding-bottom: 14px }
}

@media (max-width: 680px) {
  .message-modal-content {
    width: 95%;
    max-width: none;
  }

  .message-item {
    padding: 12px 16px;
  }
  
  .message-avatar {
    width: 40px;
    height: 40px;
    font-size: .95rem;
  }
  
  .message-detail-avatar {
    width: 48px;
    height: 48px;
    font-size: 1.1rem;
  }
}


/* ── Conversation View ──────────────────────────────────────────────── */
.conversation-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 600px;
}

.conversation-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--card2);
}

.conversation-user {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.conversation-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--bg);
  max-height: 500px;
}

.conversation-message {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  animation: fadeIn .3s ease;
}

.conversation-message.mine {
  flex-direction: row-reverse;
}

.conversation-bubble {
  max-width: 60%;
  padding: 12px 16px;
  border-radius: var(--radius);
  position: relative;
}

.conversation-message.theirs .conversation-bubble {
  background: var(--card);
  border-bottom-left-radius: 4px;
}

.conversation-message.mine .conversation-bubble {
  background: linear-gradient(135deg, var(--cyan), #0099cc);
  color: #000;
  border-bottom-right-radius: 4px;
}

.conversation-text {
  font-size: .9rem;
  line-height: 1.5;
  word-wrap: break-word;
}

.conversation-time {
  font-size: .7rem;
  margin-top: 4px;
  opacity: .7;
}

.conversation-input {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  background: var(--card);
}

.conversation-input textarea {
  flex: 1;
  border-radius: var(--radius-sm);
}

.conversation-input .btn {
  align-self: flex-end;
}

.message-unread-badge {
  background: var(--red);
  color: white;
  font-size: .7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 50px;
  min-width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 680px) {
  .conversation-bubble {
    max-width: 80%;
  }
  
  .conversation-messages {
    max-height: 400px;
  }
}

/* Bio HTML içeriği */
.bio-content h2,.bio-content h3,.bio-content h4{margin:.6em 0 .3em;color:var(--text)}
.bio-content p{margin:.3em 0}

/* ─── DX Cluster macOS Window Styles ─────────────────────────────────────────── */
.dx-cluster-section {
  padding: 40px 0;
  background: linear-gradient(135deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.1) 100%);
}

.dx-window {
  max-width: 1200px;
  margin: 0 auto;
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(20px);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 
    0 8px 32px rgba(0,0,0,.3),
    0 0 0 1px rgba(255,255,255,.05),
    inset 0 1px 0 rgba(255,255,255,.1);
  overflow: hidden;
  animation: windowSlideIn 0.6s cubic-bezier(.34,1.56,.64,1);
}

/* Window Header */
.dx-window-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.08);
  user-select: none;
}

.dx-window-controls {
  display: flex;
  gap: 8px;
}

.dx-control {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.dx-control:hover {
  transform: scale(1.1);
}

.dx-control-close {
  background: #ff5f57;
}

.dx-control-minimize {
  background: #ffbd2e;
}

.dx-control-maximize {
  background: #28ca42;
}

.dx-window-title {
  display: flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.8);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

.dx-title-icon {
  display: flex;
  align-items: center;
  color: var(--cyan);
}

.dx-live-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #28ca42;
  font-weight: 500;
}

.dx-live-dot {
  width: 6px;
  height: 6px;
  background: #28ca42;
  border-radius: 50%;
  animation: livePulse 2s ease infinite;
  box-shadow: 0 0 8px rgba(40,202,66,.5);
}

.dx-window-actions {
  display: flex;
  gap: 8px;
}

.dx-refresh-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(255,255,255,.08);
  border-radius: 6px;
  color: rgba(255,255,255,.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.dx-refresh-btn:hover {
  background: rgba(0,212,255,.2);
  color: var(--cyan);
  transform: rotate(180deg);
}

/* Window Content */
.dx-window-content {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 500px;
}

/* Sidebar */
.dx-sidebar {
  background: rgba(0,0,0,.2);
  border-right: 1px solid rgba(255,255,255,.08);
  padding: 20px;
}

.dx-sidebar-section {
  margin-bottom: 24px;
}

.dx-sidebar-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,.5);
  margin-bottom: 12px;
}

.dx-filter-group {
  margin-bottom: 16px;
}

.dx-filter-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,.6);
  margin-bottom: 8px;
}

.dx-band-filters,
.dx-mode-filters {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dx-band-btn,
.dx-mode-btn {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.dx-band-btn:hover,
.dx-mode-btn:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.15);
  transform: translateX(2px);
}

.dx-band-btn.active,
.dx-mode-btn.active {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--bg);
  font-weight: 600;
}

/* Stats Panel */
.dx-stats-panel {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 16px;
}

.dx-stats-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,.5);
  margin-bottom: 12px;
}

.dx-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.dx-stat-item {
  text-align: center;
}

.dx-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--cyan);
  font-family: var(--mono);
  margin-bottom: 4px;
}

.dx-stat-label {
  font-size: 10px;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Main Content */
.dx-main-content {
  padding: 20px;
}

.dx-spots-container {
  min-height: 460px;
}

/* Sticker Selection Styles */
.form-section {
  margin-bottom: 32px;
  padding: 24px;
  background: var(--card2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
}
.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 20px;
}
.sticker-selection {
  margin-bottom: 16px;
}
.sticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
}
.sticker-item {
  display: block;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  border-radius: var(--radius);
  padding: 16px;
  background: var(--card);
  text-align: center;
}
.sticker-item:hover {
  transform: translateY(-4px);
  border-color: var(--cyan);
  box-shadow: 0 8px 24px rgba(0,212,255,.15);
  background: var(--card2);
}
.sticker-item.selected {
  border-color: var(--cyan);
  border-width: 3px;
  background: rgba(0,212,255,.10);
  box-shadow: 0 0 0 4px rgba(0,212,255,.18), 0 6px 20px rgba(0,212,255,.25);
  transform: translateY(-3px) scale(1.03);
}
.sticker-item.selected::after {
  content: "✓";
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 0.75rem;
  font-weight: 800;
  color: #fff;
  background: var(--cyan);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 18px;
}
.sticker-item input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.sticker-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  min-height: 32px;
}
.sticker-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.sticker-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}
.sticker-category {
  font-size: 0.75rem;
  color: var(--text3);
  background: var(--bg2);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Profile Sticker Display */
.profile-callsign-section {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.profile-sticker {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  transition: all 0.3s ease;
}
.profile-sticker:hover {
  transform: scale(1.1);
  border-color: var(--cyan);
  box-shadow: 0 4px 16px rgba(0,212,255,.3);
}

/* Morse Ticker Sticker Styles */
.morse-item-sticker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--card2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  margin-right: 8px;
  transition: all 0.3s ease;
}
.morse-item-sticker:hover {
  transform: scale(1.15);
  border-color: var(--cyan);
  box-shadow: 0 2px 8px rgba(0,212,255,.4);
}

/* QSL Tracking Table Styles */
.dx-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 460px;
  color: rgba(255,255,255,.5);
  font-size: 14px;
}

.dx-loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255,255,255,.1);
  border-top: 2px solid var(--cyan);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* DX Spots Grid */
.dx-spots-grid {
  display: grid;
  gap: 8px;
  animation: fadeInUp 0.4s ease;
}

.dx-spot {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.dx-spot::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--cyan), var(--purple));
  opacity: 0;
  transition: opacity 0.2s ease;
}

.dx-spot:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(0,212,255,.3);
  transform: translateX(4px);
}

.dx-spot:hover::before {
  opacity: 1;
}

.dx-spot-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dx-spot-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dx-spot-callsign {
  font-weight: 700;
  color: var(--cyan);
  font-size: 14px;
  font-family: var(--mono);
}

.dx-spot-freq {
  background: rgba(0,212,255,.15);
  color: var(--cyan);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--mono);
}

.dx-spot-mode {
  background: rgba(124,58,237,.15);
  color: var(--purple);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.dx-spot-band {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.6);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
}

.dx-spot-time {
  color: rgba(255,255,255,.4);
  font-size: 11px;
  font-family: var(--mono);
}

.dx-spot-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,.5);
  font-size: 12px;
}

.dx-spotter {
  display: flex;
  align-items: center;
  gap: 4px;
}

.dx-spotter-callsign {
  font-family: var(--mono);
  color: rgba(255,255,255,.7);
}

.dx-spot-country {
  display: flex;
  align-items: center;
  gap: 4px;
}

.dx-spot-actions {
  display: flex;
  align-items: center;
}

.dx-btn-qso {
  padding: 6px 12px;
  background: var(--cyan);
  color: var(--bg);
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dx-btn-qso:hover {
  background: var(--purple);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(124,58,237,.3);
}

.dx-error {
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.2);
  color: var(--red);
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
}

/* Animations */
@keyframes windowSlideIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.2); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fadeInUp {
  from { 
    opacity: 0; 
    transform: translateY(20px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

/* Responsive */
@media (max-width: 768px) {
  .dx-cluster-section {
    padding: 20px 0;
  }
  
  .dx-window {
    margin: 0 16px;
  }
  
  .dx-window-content {
    grid-template-columns: 1fr;
  }
  
  .dx-sidebar {
    display: none;
  }
  
  .dx-spot {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .dx-spot-actions {
    justify-content: flex-start;
  }
}

/* Hero Stats Bar */
.hero-stats-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  background: linear-gradient(135deg, rgba(0,212,255,.05) 0%, rgba(124,58,237,.05) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
}

.stats-bar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255,255,255,.02);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.05);
  transition: all var(--transition);
}

.stats-bar-item:hover {
  background: rgba(0,212,255,.08);
  border-color: var(--cyan);
  transform: translateY(-2px);
}

.stats-bar-icon {
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--cyan-dim);
  border-radius: 50%;
  color: var(--cyan);
}

.stats-bar-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stats-bar-label {
  font-size: 0.75rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.stats-bar-value {
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 700;
}

/* Enhanced Hero Info Strip */
.hero-info-strip {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding: 12px;
  background: rgba(0,0,0,.2);
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
}

.hero-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  font-size: 0.8rem;
  color: var(--text2);
  transition: all var(--transition);
}

.hero-chip:hover {
  background: var(--cyan-dim);
  border-color: var(--cyan);
  color: var(--cyan);
  transform: translateY(-2px);
}

.hero-chip-key {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hero-chip-val {
  opacity: 0.8;
}

/* Stats Bar Responsive */
@media (max-width: 768px) {
  .hero-stats-bar {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
  }
  
  .stats-bar-item {
    padding: 10px;
  }
  
  .stats-bar-icon {
    width: 35px;
    height: 35px;
    font-size: 1.2rem;
  }
  
  .hero-info-strip {
    gap: 8px;
  }
  
  .hero-chip {
    font-size: 0.75rem;
    padding: 4px 8px;
  }
}

/* ─── Solar Page Styles ──────────────────────────────────────────────────────── */
.solar-hero {
  background: linear-gradient(135deg, rgba(255,193,7,.1) 0%, rgba(255,87,34,.05) 100%);
  border-bottom: 1px solid var(--border);
  padding: 80px 0 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.solar-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,193,7,.1) 0%, transparent 50%),
              radial-gradient(circle at 70% 80%, rgba(255,87,34,.05) 0%, transparent 50%);
  pointer-events: none;
}

.solar-hero-content {
  position: relative;
  z-index: 1;
}

.solar-hero-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
  color: #ffc107;
  animation: solarPulse 3s ease infinite;
}

.solar-hero-title {
  font-size: clamp(2rem,5vw,3rem);
  font-weight: 800;
  color: var(--text);
  margin-bottom: 16px;
  line-height: 1.2;
}

.solar-hero-sub {
  font-size: 1.1rem;
  color: var(--text2);
  margin-bottom: 24px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.solar-hero-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text3);
}

.solar-data-source {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255,255,255,.05);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.1);
}

/* Solar Cards */
.solar-current {
  padding: 60px 0;
  background: var(--bg2);
}

.solar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.solar-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all var(--transition);
}

.solar-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
}

.solar-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--cyan);
}

.solar-card-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.solar-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
}

.solar-icon.solar-sfi {
  background: linear-gradient(135deg, #ffc107, #ff9800);
}

.solar-icon.solar-k {
  background: linear-gradient(135deg, #2196f3, #1976d2);
}

.solar-icon.solar-a {
  background: linear-gradient(135deg, #4caf50, #388e3c);
}

.solar-icon.solar-sn {
  background: linear-gradient(135deg, #ff5722, #e64a19);
}

.solar-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text2);
  margin: 0;
}

.solar-value {
  font-size: 3rem;
  font-weight: 800;
  color: var(--cyan);
  font-family: var(--mono);
  margin: 16px 0 8px;
  line-height: 1;
}

.solar-unit {
  font-size: 0.9rem;
  color: var(--text3);
  margin-bottom: 12px;
}

.solar-status {
  font-size: 0.95rem;
  color: var(--text2);
  font-weight: 600;
}

/* Solar Cycle */
.solar-cycle {
  padding: 60px 0;
  background: var(--bg);
}

.cycle-info {
  margin-bottom: 40px;
}

.cycle-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 800px;
  margin: 0 auto;
}

.cycle-card h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
}

.cycle-card p {
  color: var(--text2);
  line-height: 1.6;
}

.cycle-chart {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 900px;
  margin: 0 auto;
}

/* HF Bands */
.hf-bands {
  padding: 60px 0;
  background: var(--bg2);
}

.bands-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 32px;
}

.band-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}

.band-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.band-card.excellent::before {
  background: linear-gradient(90deg, #10b981, #059669);
}

.band-card.good::before {
  background: linear-gradient(90deg, #3b82f6, #2563eb);
}

.band-card.fair::before {
  background: linear-gradient(90deg, #f59e0b, #d97706);
}

.band-card.poor::before {
  background: linear-gradient(90deg, #ef4444, #dc2626);
}

.band-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.band-card.active {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0,212,255,.2);
}

.band-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.band-header h4 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.band-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  animation: indicatorPulse 2s ease infinite;
}

.band-indicator.excellent {
  background: #10b981;
  box-shadow: 0 0 12px rgba(16,185,129,.5);
}

.band-indicator.good {
  background: #3b82f6;
  box-shadow: 0 0 12px rgba(59,130,246,.5);
}

.band-indicator.fair {
  background: #f59e0b;
  box-shadow: 0 0 12px rgba(245,158,11,.5);
}

.band-indicator.poor {
  background: #ef4444;
  box-shadow: 0 0 12px rgba(239,68,68,.5);
}

.band-freq {
  font-size: 0.9rem;
  color: var(--text3);
  font-family: var(--mono);
  margin-bottom: 8px;
}

.band-status {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.band-desc {
  font-size: 0.85rem;
  color: var(--text2);
  line-height: 1.4;
}

/* Solar Explanation */
.solar-explanation {
  padding: 60px 0;
  background: var(--bg);
}

.explanation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.explanation-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

.explanation-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
}

.explanation-card p {
  color: var(--text2);
  line-height: 1.6;
}

/* Solar History */
.solar-history {
  padding: 60px 0;
  background: var(--bg2);
}

.history-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 32px;
  max-width: 100%;
}

.chart-container {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.chart-container h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 16px;
  text-align: center;
}

.chart-container canvas {
  width: 100% !important;
  height: auto !important;
  max-height: 250px;
}

/* Animations */
@keyframes solarPulse {
  0%, 100% { 
    transform: scale(1); 
    opacity: 1; 
  }
  50% { 
    transform: scale(1.05); 
    opacity: 0.8; 
  }
}

@keyframes indicatorPulse {
  0%, 100% { 
    transform: scale(1); 
    opacity: 1; 
  }
  50% { 
    transform: scale(1.2); 
    opacity: 0.7; 
  }
}

/* Solar Page Responsive */
@media (max-width: 1200px) {
  .history-charts {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

@media (max-width: 768px) {
  .solar-hero {
    padding: 48px 0 36px;
  }
  
  .solar-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .solar-card {
    padding: 20px;
  }
  
  .solar-value {
    font-size: 2.2rem;
  }
  
  .bands-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .explanation-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .history-charts {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .chart-container {
    padding: 16px;
  }
  
  .chart-container canvas {
    max-height: 200px;
  }
  
  .cycle-chart {
    padding: 16px;
  }
  
  .cycle-chart canvas {
    max-height: 300px;
  }
}

@media (max-width: 480px) {
  .solar-card {
    padding: 16px;
  }
  
  .solar-value {
    font-size: 2rem;
  }
  
  .chart-container {
    padding: 12px;
  }
  
  .chart-container h3 {
    font-size: 0.9rem;
    margin-bottom: 12px;
  }
  
  .chart-container canvas {
    max-height: 180px;
  }
  
  .cycle-chart {
    padding: 12px;
  }
  
  .cycle-chart canvas {
    max-height: 250px;
  }
}

.bio-content ul,.bio-content ol{padding-left:1.4em;margin:.4em 0}
.bio-content a{color:var(--cyan);text-decoration:underline}
.bio-content blockquote{border-left:3px solid var(--border);margin:.5em 0;padding-left:.8em;color:var(--text3)}
.bio-content code{background:var(--bg3);padding:.1em .3em;border-radius:4px;font-family:var(--mono);font-size:.85em}
.bio-content pre{background:var(--bg3);padding:.8em 1em;border-radius:8px;overflow-x:auto;font-family:var(--mono);font-size:.82em;margin:.4em 0}

/* ─── Satellite Page Styles ───────────────────────────────────────────────────── */
.satellite-hero {
  background: linear-gradient(135deg, rgba(16,185,129,.1) 0%, rgba(59,130,246,.05) 100%);
  border-bottom: 1px solid var(--border);
  padding: 80px 0 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.satellite-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 20%, rgba(16,185,129,.1) 0%, transparent 50%),
              radial-gradient(circle at 70% 80%, rgba(59,130,246,.05) 0%, transparent 50%);
  pointer-events: none;
}

.satellite-hero-content {
  position: relative;
  z-index: 1;
}

.satellite-hero-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
  color: #10b981;
  animation: satellitePulse 3s ease infinite;
}

.satellite-hero-title {
  font-size: clamp(2rem,5vw,3rem);
  font-weight: 800;
  color: var(--text);
  margin-bottom: 16px;
  line-height: 1.2;
}

.satellite-hero-sub {
  font-size: 1.1rem;
  color: var(--text2);
  margin-bottom: 24px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.satellite-hero-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text3);
}

.satellite-data-source {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255,255,255,.05);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.1);
}


/* Live Satellite Positions */
.satellite-live {
  padding: 60px 0;
  background: var(--bg);
}

.satellite-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.satellite-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: all var(--transition);
}

.satellite-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--green), var(--cyan));
}

.satellite-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--cyan);
}

.satellite-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.satellite-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
}

.satellite-icon.iss {
  background: linear-gradient(135deg, #10b981, #059669);
}

.satellite-icon.so50 {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.satellite-icon.ao91 {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.satellite-icon.ao92 {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.satellite-info {
  flex: 1;
  margin-left: 12px;
}

.satellite-info h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.satellite-type {
  font-size: 0.85rem;
  color: var(--text3);
  font-family: var(--mono);
}

.satellite-status {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.satellite-status.online {
  background: rgba(16,185,129,.1);
  color: var(--green);
  border: 1px solid rgba(16,185,129,.2);
}

.satellite-position {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.position-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.position-label {
  font-size: 0.75rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.position-value {
  font-size: 0.95rem;
  color: var(--text);
  font-weight: 600;
  font-family: var(--mono);
}

/* Satellite Explanation */
.satellite-explanation {
  padding: 60px 0;
  background: var(--bg);
}

.explanation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.explanation-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

.explanation-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
}

.explanation-card p {
  color: var(--text2);
  line-height: 1.6;
}

/* Active Satellites */
.active-satellites {
  padding: 60px 0;
  background: var(--bg2);
}

.satellites-list {
  display: grid;
  gap: 16px;
  margin-top: 32px;
}

.satellite-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all var(--transition);
}

.satellite-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--cyan);
}

.satellite-badge {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

.satellite-badge.fm {
  background: rgba(245,158,11,.1);
  color: var(--amber);
  border: 1px solid rgba(245,158,11,.2);
}

.satellite-badge.linear {
  background: rgba(59,130,246,.1);
  color: var(--cyan);
  border: 1px solid rgba(59,130,246,.2);
}

.satellite-details {
  flex: 1;
}

.satellite-details h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.satellite-details p {
  font-size: 0.85rem;
  color: var(--text2);
  line-height: 1.4;
}

.satellite-freq {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--text3);
  background: var(--bg3);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* Upcoming Passes */
.upcoming-passes {
  padding: 60px 0;
  background: var(--bg);
}

.passes-container {
  margin-top: 32px;
}

.pass-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.satellite-select {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.9rem;
  min-width: 200px;
}

.passes-list {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

.pass-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
  color: var(--text3);
}

.pass-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top: 2px solid var(--cyan);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.pass-empty {
  text-align: center;
  color: var(--text3);
  padding: 40px;
}

.passes-list-inner {
  display: grid;
  gap: 16px;
}

.pass-item {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  animation: fadeInUp 0.4s ease;
}

.pass-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.pass-time {
  display: flex;
  gap: 16px;
}

.pass-start,
.pass-max {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pass-label {
  font-size: 0.75rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pass-value {
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 600;
  font-family: var(--mono);
}

.pass-elevation {
  text-align: center;
}

.pass-max-el {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--cyan);
  font-family: var(--mono);
  line-height: 1;
}

.pass-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.pass-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

/* Satellite Resources */
.satellite-resources {
  padding: 60px 0;
  background: var(--bg2);
}

.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.resource-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  text-decoration: none;
  color: var(--text);
  transition: all var(--transition);
  display: block;
}

.resource-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--cyan);
  color: var(--text);
  text-decoration: none;
}

.resource-icon {
  width: 48px;
  height: 48px;
  background: var(--cyan-dim);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan);
  margin-bottom: 16px;
}

.resource-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.resource-card p {
  font-size: 0.85rem;
  color: var(--text2);
  line-height: 1.4;
}

/* Animations */
@keyframes satellitePulse {
  0%, 100% { 
    transform: scale(1); 
    opacity: 1; 
  }
  50% { 
    transform: scale(1.05); 
    opacity: 0.8; 
  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fadeInUp {
  from { 
    opacity: 0; 
    transform: translateY(20px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

/* Satellite Page Responsive */
@media (max-width: 768px) {
  .satellite-hero {
    padding: 48px 0 36px;
  }
  
  .satellite-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .satellite-card {
    padding: 20px;
  }
  
  .satellite-position {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .satellite-item {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  
  .pass-controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .satellite-select {
    min-width: auto;
  }
  
  .pass-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  
  .pass-time {
    flex-direction: column;
    gap: 8px;
  }
  
  .pass-details {
    grid-template-columns: 1fr;
  }
  
  .resources-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .satellite-card {
    padding: 16px;
  }
  
  .satellite-position {
    grid-template-columns: 1fr;
  }
  
  .pass-item {
    padding: 16px;
  }
  
  .resource-card {
    padding: 16px;
  }
}

.bio-content ul,.bio-content ol{padding-left:1.4em;margin:.4em 0}
.bio-content a{color:var(--cyan);text-decoration:underline}
.bio-content blockquote{border-left:3px solid var(--border);margin:.5em 0;padding-left:.8em;color:var(--text3)}
.bio-content code{background:var(--bg3);padding:.1em .3em;border-radius:4px;font-family:var(--mono);font-size:.85em}
.bio-content pre{background:var(--bg3);padding:.8em 1em;border-radius:8px;overflow-x:auto;font-family:var(--mono);font-size:.82em;margin:.4em 0}