/* ── Reset & Variables ─────────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:          #07070f;
  --bg2:         #0c0c18;
  --surface:     rgba(255,255,255,0.028);
  --surface2:    rgba(255,255,255,0.052);
  --surface3:    rgba(255,255,255,0.075);
  --border:      rgba(255,255,255,0.068);
  --border2:     rgba(255,255,255,0.11);
  --border3:     rgba(255,255,255,0.16);
  --blue:        #4a8ef0;
  --blue-light:  #6aa3f5;
  --blue-dim:    rgba(74,142,240,0.13);
  --blue-dim2:   rgba(74,142,240,0.22);
  --blue-glow:   rgba(74,142,240,0.30);
  --blue-glow2:  rgba(74,142,240,0.50);
  --text:        #eeeef8;
  --text2:       #c8c8de;
  --muted:       rgba(238,238,248,0.48);
  --muted2:      rgba(238,238,248,0.24);
  --muted3:      rgba(238,238,248,0.13);
  --gold:        #f5c842;
  --silver:      #a8b5c4;
  --bronze:      #cd7f32;
  --red:         #f05050;
  --red-dim:     rgba(240,80,80,0.14);
  --green:       #34d171;
  --green-dim:   rgba(52,209,113,0.12);
  --radius:      18px;
  --radius-sm:   11px;
  --radius-xs:   8px;
  --nav-h:       60px;
  --transition:  0.18s cubic-bezier(0.4,0,0.2,1);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;height:100%}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100dvh;
  overflow-x:hidden;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:99px}

/* ── Film grain (desktop only — too heavy on mobile) ─────────────────────── */
@media (min-width: 641px){
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  opacity:0.25;animation:grain 0.2s steps(1) infinite;
}
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-1%,-1%)}
  20%{transform:translate(1%,0)}30%{transform:translate(0,1%)}
  40%{transform:translate(-1%,0)}50%{transform:translate(1%,1%)}
  60%{transform:translate(0,-1%)}70%{transform:translate(-1%,1%)}
  80%{transform:translate(1%,-1%)}90%{transform:translate(-1%,0)}
}

/* ── Ambient orbs ────────────────────────────────────────────────────────── */
.orb{position:fixed;border-radius:50%;filter:blur(100px);pointer-events:none;z-index:0}
.orb1{
  width:min(700px,90vw);height:min(700px,90vw);
  top:-200px;left:-200px;
  background:radial-gradient(circle,rgba(30,80,210,0.10),transparent 70%);
  animation:drift1 24s ease-in-out infinite;
}
.orb2{
  width:min(550px,80vw);height:min(550px,80vw);
  bottom:-100px;right:-100px;
  background:radial-gradient(circle,rgba(74,142,240,0.08),transparent 70%);
  animation:drift2 18s ease-in-out infinite;
}
.orb3{
  width:min(400px,65vw);height:min(400px,65vw);
  top:45%;left:45%;
  background:radial-gradient(circle,rgba(100,40,220,0.055),transparent 70%);
  animation:drift3 30s ease-in-out infinite;
}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-35px)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,40px)}}
@keyframes drift3{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(calc(-50% + 50px),calc(-50% - 40px))}}

/* ── Navbar ──────────────────────────────────────────────────────────────── */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:var(--nav-h);
  background:rgba(7,7,15,0.78);
  backdrop-filter:blur(28px) saturate(1.6);
  -webkit-backdrop-filter:blur(28px) saturate(1.6);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;
  padding:0 16px;gap:6px;
}
.nav-logo{
  display:flex;align-items:center;gap:9px;
  text-decoration:none;color:var(--text);flex-shrink:0;
}
.nav-logo img{height:28px;width:auto;filter:drop-shadow(0 0 8px rgba(74,142,240,0.4))}
.nav-brand{font-size:15px;font-weight:800;letter-spacing:0.1em;color:var(--text)}
.nav-links{display:flex;gap:2px;margin-left:12px}
.nav-link{
  padding:7px 12px;border-radius:9px;
  color:var(--muted);font-size:13px;font-weight:500;
  cursor:pointer;transition:all var(--transition);
  border:none;background:none;font-family:inherit;
  text-decoration:none;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;
}
.nav-link:hover,.nav-link.active{color:var(--text);background:var(--surface2)}
.nav-link svg{opacity:0.7}
.nav-link:hover svg,.nav-link.active svg{opacity:1}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:8px}

/* Connect button */
.btn-connect{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 15px;
  background:var(--blue-dim);
  border:1px solid rgba(74,142,240,0.35);
  color:var(--blue-light);border-radius:9px;
  font-size:13px;font-weight:600;cursor:pointer;
  transition:all var(--transition);font-family:inherit;white-space:nowrap;
}
.btn-connect:hover{background:var(--blue-dim2);border-color:rgba(74,142,240,0.55);transform:translateY(-1px)}

/* Hamburger */
.nav-menu-btn{
  display:none;flex-direction:column;gap:4.5px;
  background:none;border:none;cursor:pointer;
  padding:8px;color:var(--muted);border-radius:8px;
  transition:all var(--transition);
}
.nav-menu-btn:hover{background:var(--surface2);color:var(--text)}
.nav-menu-btn span{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;transition:all 0.25s}
.nav-menu-btn.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-menu-btn.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-menu-btn.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Mobile drawer */
.nav-drawer{
  display:none;
  position:fixed;top:var(--nav-h);left:0;right:0;
  background:rgba(7,7,15,0.98);
  backdrop-filter:blur(28px);
  border-bottom:1px solid var(--border);
  padding:10px 12px 16px;z-index:199;
  flex-direction:column;gap:3px;
  animation:slideDown 0.22s ease;
}
.nav-drawer.open{display:flex}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.nav-drawer .nav-link{padding:13px 14px;font-size:14px;border-radius:11px;width:100%}
.drawer-divider{height:1px;background:var(--border);margin:6px 0}

/* Avatar / user pill */
.avatar-btn{
  display:flex;align-items:center;gap:8px;
  cursor:pointer;background:var(--surface);
  border:1px solid var(--border2);
  border-radius:99px;padding:4px 12px 4px 4px;
  color:var(--text);font-family:inherit;font-size:13px;font-weight:500;
  transition:all var(--transition);
}
.avatar-btn:hover{background:var(--surface2);border-color:var(--border3)}
.avatar-img,.avatar-ph{
  width:28px;height:28px;border-radius:50%;
  border:none;object-fit:cover;flex-shrink:0;
}
.avatar-ph{
  background:var(--blue-dim2);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:var(--blue-light);
}
.avatar-name{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Dropdown */
.dropdown{
  position:absolute;top:calc(100% + 10px);right:0;
  min-width:185px;
  background:rgba(10,10,22,0.98);
  backdrop-filter:blur(28px);
  border:1px solid var(--border2);border-radius:14px;
  overflow:hidden;display:none;
  box-shadow:0 24px 80px rgba(0,0,0,0.55),0 0 0 1px rgba(255,255,255,0.04);
  z-index:300;
}
.dropdown.open{display:block;animation:fadeIn 0.15s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.dd-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;font-size:13px;color:var(--muted);
  cursor:pointer;transition:all 0.12s;text-decoration:none;
  border:none;background:none;font-family:inherit;width:100%;text-align:left;
}
.dd-item:hover{background:var(--surface2);color:var(--text)}
.dd-item svg{opacity:0.6;flex-shrink:0}
.dd-item:hover svg{opacity:1}
.dd-sep{height:1px;background:var(--border)}

/* ── Layout ──────────────────────────────────────────────────────────────── */
.page{min-height:100dvh;padding-top:var(--nav-h);position:relative;z-index:1}
.container{max-width:1100px;margin:0 auto;padding:0 16px}

/* ── Glass ───────────────────────────────────────────────────────────────── */
.glass{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 20px;border-radius:var(--radius-sm);
  font-size:14px;font-weight:600;cursor:pointer;
  transition:all var(--transition);border:none;font-family:inherit;
  white-space:nowrap;text-decoration:none;letter-spacing:0.01em;
}
.btn svg{flex-shrink:0}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 2px 16px rgba(74,142,240,0.25)}
.btn-primary:hover{background:#3a7ee0;transform:translateY(-1px);box-shadow:0 6px 28px var(--blue-glow)}
.btn-ghost{background:var(--surface2);color:var(--text2);border:1px solid var(--border2)}
.btn-ghost:hover{background:var(--surface3);color:var(--text);border-color:var(--border3)}
.btn-danger{background:var(--red-dim);color:var(--red);border:1px solid rgba(240,80,80,0.25)}
.btn-danger:hover{background:rgba(240,80,80,0.24);transform:translateY(-1px)}
.btn-success{background:var(--green-dim);color:var(--green);border:1px solid rgba(52,209,113,0.22)}
.btn-success:hover{background:rgba(52,209,113,0.22)}
.btn-sm{padding:6px 13px;font-size:12px;border-radius:8px}
.btn-xs{padding:4px 10px;font-size:11px;border-radius:7px}
.btn-icon{padding:8px;border-radius:9px}
.btn:disabled{opacity:0.4;pointer-events:none;cursor:not-allowed}

/* ── Page header ─────────────────────────────────────────────────────────── */
.page-header{padding:28px 0 20px}
.page-title{font-size:clamp(22px,5vw,30px);font-weight:800;letter-spacing:-0.02em;display:flex;align-items:center;gap:10px}
.page-title svg{color:var(--blue);opacity:0.9}
.page-sub{color:var(--muted);font-size:14px;margin-top:5px}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge{padding:3px 9px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:0.03em;display:inline-flex;align-items:center;gap:4px}
.badge svg{width:10px;height:10px}
.badge-blue{background:var(--blue-dim);border:1px solid rgba(74,142,240,0.25);color:var(--blue-light)}
.badge-green{background:var(--green-dim);border:1px solid rgba(52,209,113,0.2);color:var(--green)}
.badge-red{background:var(--red-dim);border:1px solid rgba(240,80,80,0.2);color:var(--red)}
.badge-gold{background:rgba(245,200,66,0.1);border:1px solid rgba(245,200,66,0.25);color:var(--gold)}
.badge-muted{background:var(--surface2);border:1px solid var(--border2);color:var(--muted)}

/* ── Stars ───────────────────────────────────────────────────────────────── */
.stars{display:inline-flex;gap:2px;color:var(--gold);font-size:13px}

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.form-label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.07em;display:flex;align-items:center;gap:5px}
.form-label svg{opacity:0.7}
.form-input{
  padding:11px 14px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border2);
  border-radius:var(--radius-sm);
  color:var(--text);font-size:14px;font-family:inherit;outline:none;
  transition:border-color var(--transition),box-shadow var(--transition);width:100%;
}
.form-input:focus{border-color:rgba(74,142,240,0.5);box-shadow:0 0 0 3px rgba(74,142,240,0.08)}
.form-input::placeholder{color:var(--muted3)}
textarea.form-input{resize:vertical;min-height:86px;line-height:1.55}
select.form-input{cursor:pointer;background-color:rgba(8,8,18,0.92)}
.input-wrap{position:relative}
.input-wrap .form-input{padding-left:40px}
.input-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted2);pointer-events:none}

/* ── Search bar ──────────────────────────────────────────────────────────── */
.search-bar{
  display:flex;align-items:center;gap:10px;
  padding:11px 15px;
  background:var(--surface);border:1px solid var(--border2);
  border-radius:var(--radius-sm);transition:border-color var(--transition),box-shadow var(--transition);
}
.search-bar:focus-within{border-color:rgba(74,142,240,0.45);box-shadow:0 0 0 3px rgba(74,142,240,0.07)}
.search-bar input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:14px;font-family:inherit}
.search-bar input::placeholder{color:var(--muted3)}
.search-icon{color:var(--muted2);flex-shrink:0}

/* ── Pills ───────────────────────────────────────────────────────────────── */
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{
  padding:6px 13px;border-radius:99px;
  font-size:12px;font-weight:600;cursor:pointer;
  border:1px solid var(--border2);background:transparent;
  color:var(--muted);font-family:inherit;transition:all var(--transition);
  display:inline-flex;align-items:center;gap:5px;
}
.pill:hover{background:var(--blue-dim);border-color:rgba(74,142,240,0.35);color:var(--blue-light)}
.pill.active{background:var(--blue-dim);border-color:rgba(74,142,240,0.4);color:var(--blue-light)}

/* ── Toast / Notifications ─────────────────────────────���������─────────────────── */
#toast-container{
  position:fixed;top:72px;right:16px;
  display:flex;flex-direction:column;gap:8px;
  z-index:9000;pointer-events:none;
  max-width:min(360px,calc(100vw - 32px));
}
.toast-item{
  display:flex;align-items:flex-start;gap:11px;
  padding:13px 15px;
  background:rgba(12,12,24,0.97);
  border:1px solid var(--border2);
  border-radius:13px;
  font-size:13px;color:var(--text2);
  box-shadow:0 8px 40px rgba(0,0,0,0.5);
  pointer-events:all;
  animation:toastIn 0.28s cubic-bezier(0.34,1.56,0.64,1) both;
  transition:opacity 0.25s,transform 0.25s;
  width:100%;
}
.toast-item.hiding{opacity:0;transform:translateX(16px)}
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.toast-icon{flex-shrink:0;margin-top:1px}
.toast-icon-success{color:var(--green)}
.toast-icon-error{color:var(--red)}
.toast-icon-info{color:var(--blue-light)}
.toast-icon-warning{color:var(--gold)}
.toast-body{flex:1;min-width:0}
.toast-title{font-weight:700;font-size:13px;color:var(--text);margin-bottom:2px}
.toast-msg{font-size:12px;color:var(--muted);line-height:1.45}
.toast-close{
  flex-shrink:0;background:none;border:none;color:var(--muted2);
  cursor:pointer;padding:0;pointer-events:all;line-height:1;margin-top:1px;
  transition:color var(--transition);
}
.toast-close:hover{color:var(--text)}
.toast-item.success{border-color:rgba(52,209,113,0.25)}
.toast-item.error{border-color:rgba(240,80,80,0.25)}
.toast-item.warning{border-color:rgba(245,200,66,0.2)}

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.spinner{
  display:inline-block;width:20px;height:20px;
  border:2px solid rgba(255,255,255,0.12);
  border-top-color:var(--blue);border-radius:50%;
  animation:spin 0.75s linear infinite;flex-shrink:0;
}
.spinner-sm{width:14px;height:14px;border-width:2px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Animations ──────────────────────────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fadeUp 0.42s ease both}

/* ═══════════════════════════════════════════════════════════════════════════
   INDEX PAGE — two-column hero
═══════════════════════════════════════════════════════════════════════════ */
.hero-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  align-items:start;
  min-height:100dvh;
  max-width:1000px;
  margin:0 auto;
  padding:calc(var(--nav-h) + 16px) 24px 48px;
}

/* ── Left column ── */
.hero-left{
  display:flex;flex-direction:column;gap:24px;
  padding-top:12px;
}

/* Big logo ring */
.hero-logo-ring{
  position:relative;
  width:clamp(130px,22vw,180px);
  height:clamp(130px,22vw,180px);
}
.hero-logo-glow{
  position:absolute;inset:-20px;
  background:radial-gradient(circle,rgba(74,142,240,0.28) 0%,transparent 65%);
  border-radius:50%;
  animation:pulseGlow 5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes pulseGlow{
  0%,100%{opacity:0.55;transform:scale(1)}
  50%{opacity:1;transform:scale(1.1)}
}
.hero-logo-img{
  width:100%;height:100%;object-fit:contain;
  position:relative;z-index:1;
  filter:drop-shadow(0 6px 32px rgba(74,142,240,0.55));
  animation:logoBob 7s ease-in-out infinite;
}
@keyframes logoBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Wordmark */
.hero-wordmark{
  display:flex;flex-direction:column;line-height:1;gap:2px;
}
.hero-word-swan{
  font-size:clamp(48px,8vw,72px);
  font-weight:900;
  letter-spacing:0.08em;
  background:linear-gradient(130deg,#ffffff 0%,var(--blue-light) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-word-perth{
  font-size:clamp(16px,2.8vw,22px);
  font-weight:600;
  letter-spacing:0.32em;
  color:var(--muted);
  text-transform:uppercase;
  padding-left:4px;
}

.hero-subline{
  color:var(--muted);font-size:clamp(13px,1.8vw,15px);
  line-height:1.7;max-width:380px;
}

/* Feature chips */
.hero-chips{display:flex;flex-wrap:wrap;gap:8px}
.hero-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 13px;border-radius:99px;
  font-size:12px;font-weight:600;
  background:var(--surface2);border:1px solid var(--border2);
  color:var(--text2);
}
.hero-chip i{color:var(--blue-light);flex-shrink:0}

/* Stats row (left col) */
.hero-stats{
  display:flex;gap:0;
  background:rgba(255,255,255,0.022);
  border:1px solid var(--border);border-radius:14px;
  overflow:hidden;width:100%;max-width:340px;
}
.stat-item{
  flex:1;display:flex;flex-direction:column;align-items:center;
  gap:3px;padding:16px 12px;position:relative;
}
.stat-item+.stat-item::before{
  content:'';position:absolute;left:0;top:20%;bottom:20%;
  width:1px;background:var(--border);
}
.stat-num{font-size:clamp(18px,3vw,24px);font-weight:800;color:var(--blue-light);line-height:1}
.stat-label{font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:0.08em}

/* ── Right column: action card ── */
.hero-card{
  background:linear-gradient(145deg,rgba(255,255,255,0.042),rgba(255,255,255,0.016));
  border:1px solid rgba(255,255,255,0.10);
  border-radius:28px;
  backdrop-filter:blur(36px);-webkit-backdrop-filter:blur(36px);
  padding:32px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 40px 120px rgba(0,0,0,0.40),
    0 0 100px rgba(74,142,240,0.07);
  display:flex;flex-direction:column;gap:24px;
  animation:fadeUp 0.5s ease both;
}

/* Card header */
.hero-card-head{
  display:flex;align-items:center;gap:16px;
}
.hero-card-icon{
  width:48px;height:48px;border-radius:14px;
  background:var(--blue-dim2);border:1px solid rgba(74,142,240,0.3);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:var(--blue-light);
}
.hero-card-title{font-size:18px;font-weight:800;color:var(--text)}
.hero-card-sub{font-size:12px;color:var(--muted);margin-top:2px}

/* Perks list */
.hero-perks{
  list-style:none;display:flex;flex-direction:column;gap:10px;
}
.hero-perks li{
  display:flex;align-items:center;gap:10px;
  font-size:13px;color:var(--text2);
}
.hero-perks li i{color:var(--green);flex-shrink:0}

/* CTA group */
.hero-card-ctas{
  display:flex;flex-direction:column;gap:10px;
}
.btn-lg{padding:14px 20px;font-size:14px;font-weight:700}
.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:var(--radius-sm);
  border:1px solid var(--border3);
  background:transparent;color:var(--text2);
  font-size:14px;font-weight:600;
  cursor:pointer;font-family:inherit;
  text-decoration:none;
  transition:all var(--transition);
}
.btn-outline:hover{background:var(--surface2);border-color:rgba(74,142,240,0.4);color:var(--text)}

/* Announcement banner */
.ann-banner{
  border-radius:13px;
  background:linear-gradient(135deg,rgba(74,142,240,0.09),rgba(74,142,240,0.04));
  border:1px solid rgba(74,142,240,0.22);
  padding:14px 16px;
}
.ann-banner-label{
  font-size:10px;font-weight:700;color:var(--blue-light);
  text-transform:uppercase;letter-spacing:0.09em;margin-bottom:5px;
  display:flex;align-items:center;gap:5px;
}
.ann-banner-title{font-size:13px;font-weight:700;color:var(--text)}
.ann-banner-body{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.55}

/* Card footer note */
.hero-card-footer{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:11px;color:var(--muted3);
  letter-spacing:0.04em;
  border-top:1px solid var(--border);
  padding-top:16px;margin-top:-8px;
}

/* ── Responsive: stack on mobile ── */
@media(max-width:720px){
  .hero-wrap{
    grid-template-columns:1fr;
    padding-top:calc(var(--nav-h) + 28px);
    gap:28px;
    text-align:center;
  }
  .hero-left{align-items:center}
  .hero-subline{text-align:center}
  .hero-stats{max-width:100%}
  .hero-logo-ring{
    width:clamp(100px,30vw,140px);
    height:clamp(100px,30vw,140px);
  }
  .hero-word-swan{font-size:clamp(44px,16vw,62px)}
  .hero-word-perth{font-size:clamp(13px,4vw,18px)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUTH GATE
═══════════════════════════════════════════════════════════════════════════ */
.auth-gate{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:60vh;text-align:center;gap:18px;padding:48px 16px;
}
.auth-gate-icon{
  width:72px;height:72px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);
}
.auth-gate h2{font-size:22px;font-weight:700;margin-top:4px}
.auth-gate p{color:var(--muted);font-size:14px;max-width:300px;line-height:1.65}

/* ═══════════════════════════════════════════════════════════════════════════
   VOUCHES PAGE
═══════════════════════════════════════════════════════════════════════════ */
.filter-bar{display:flex;flex-direction:column;gap:12px;margin-bottom:22px}
.vouches-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));
  gap:14px;padding-bottom:40px;
}
.vouch-card{
  padding:0;border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);
  transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);
  animation:fadeUp 0.38s ease both;cursor:pointer;
}
.vouch-card:hover{border-color:rgba(74,142,240,0.28);transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,0.3)}

/* Receiver hero — top section */
.vc-receiver{
  display:flex;align-items:center;gap:13px;
  padding:16px 16px 14px;
  background:linear-gradient(135deg,rgba(74,142,240,0.07),transparent);
  border-bottom:1px solid var(--border);
  cursor:pointer;
}
.vc-recv-av-wrap{position:relative;flex-shrink:0}
.vc-recv-av{
  width:46px;height:46px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(74,142,240,0.35);
}
.vc-recv-av-ph{
  background:var(--blue-dim);display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:800;color:var(--blue-light);
}
.vc-recv-badge{
  position:absolute;bottom:-2px;right:-2px;
  width:18px;height:18px;border-radius:50%;
  background:var(--blue);
  border:2px solid var(--surface);
  display:flex;align-items:center;justify-content:center;
  color:#fff;
}
.vc-recv-info{flex:1;min-width:0}
.vc-recv-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--blue-light);opacity:0.85;margin-bottom:2px}
.vc-recv-name{font-size:15px;font-weight:800;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--text)}
.vc-recv-handle{font-size:12px;color:var(--muted);margin-top:1px}
.vc-recv-badge-product{font-size:11px;flex-shrink:0;align-self:flex-start;margin-top:2px}

/* Stars row */
.vc-stars-row{padding:10px 16px 0;display:flex;align-items:center;gap:6px}
.stars{color:var(--gold);font-size:13px;letter-spacing:1px}

/* Note */
.vc-note{padding:0 16px;font-size:13px;color:var(--muted);line-height:1.6;font-style:italic}

/* Footer: voucher */
.vc-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px 14px;margin-top:4px;
  flex-wrap:wrap;gap:6px;
}
.vc-voucher{
  display:flex;align-items:center;gap:7px;cursor:pointer;
  min-width:0;flex:1;
}
.vc-voucher:hover .vc-voucher-name{color:var(--blue-light)}
.vc-voucher-av{width:22px;height:22px;border-radius:50%;object-fit:cover;border:1px solid var(--border2);flex-shrink:0}
.vc-voucher-av-ph{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  background:var(--surface2);border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:800;color:var(--muted);
}
.vc-voucher-by{font-size:11px;color:var(--muted2);flex-shrink:0}
.vc-voucher-name{font-size:12px;font-weight:600;color:var(--text2);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:color var(--transition)}
.vc-time{font-size:11px;color:var(--muted2);display:flex;align-items:center;gap:4px;flex-shrink:0}

/* ═══════════════════════════════════════════════════════════════════════════
   LEADERBOARD
═══════════════════════════════════════════════════════════════════════════ */

/* Podium */
.lb-podium{
  display:flex;align-items:flex-end;justify-content:center;
  gap:12px;flex-wrap:wrap;padding:0 12px;
}
.lb-podium-item{
  display:flex;flex-direction:column;align-items:center;
  padding:14px 16px 16px;
  border-radius:14px;border:1px solid var(--border);
  background:var(--surface);
  cursor:pointer;transition:transform var(--transition),box-shadow var(--transition);
  min-width:100px;flex:1;max-width:160px;font-size:clamp(12px,2.4vw,16px);
}
.lb-podium-item:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,0.3)}

/* List rows */
.lb-row{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  cursor:pointer;
  transition:background var(--transition);
  font-size:clamp(13px,2.2vw,14px);
}
.lb-row:last-child{border-bottom:none}
.lb-row:hover{background:rgba(255,255,255,0.022)}
.lb-row-self{background:rgba(74,142,240,0.04)!important}

@media(max-width:480px){
  .lb-podium{gap:8px;padding:0 8px}
  .lb-podium-item{padding:12px 12px 14px;min-width:80px;gap:6px}
  .lb-row{gap:8px;padding:10px 10px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROFILE
═══════════════════════════════════════════════════════════════════════════ */
/* Profile glass card must not clip the badge ring */
.profile-hero-wrap{overflow:visible !important}

.profile-hero{
  /* Row: avatar-badge-wrap | info column */
  display:flex;flex-direction:row;align-items:center;gap:0;
  padding:0;overflow:visible;
}

/* Avatar sizes — fixed 88px matching profile.html template */
.prof-av,.prof-av-ph{
  width:88px;height:88px;
  border-radius:50%;object-fit:cover;
  border:2px solid var(--border2);
  box-shadow:0 0 0 4px rgba(74,142,240,0.1);
  flex-shrink:0;
}
.prof-av-ph{
  background:var(--blue-dim);display:flex;align-items:center;justify-content:center;
  font-size:32px;font-weight:800;color:var(--blue-light);
}
/* Info column sits right of the avatar wrap */
.prof-info{
  flex:1;min-width:0;
  padding:20px 20px 16px;
}
.prof-name{font-size:clamp(20px,4vw,26px);font-weight:800;letter-spacing:-0.01em;line-height:1.2}
.prof-handle{font-size:14px;color:var(--muted);display:flex;align-items:center;gap:5px;margin-top:3px}
.prof-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
/* Stats & actions below info — full-width row */
.prof-stats{
  display:flex;gap:clamp(16px,4vw,32px);
  padding:12px 24px 16px;
  border-top:1px solid var(--border);
}
.prof-stat{display:flex;flex-direction:column;align-items:center;gap:2px}
.prof-stat-n{font-size:clamp(18px,4vw,22px);font-weight:800;color:var(--blue-light)}
.prof-stat-l{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.07em}
.prof-actions{display:flex;gap:8px;flex-wrap:wrap;padding:0 24px 18px}

/* Mobile: stack vertically & centre */
@media(max-width:560px){
  .profile-hero{flex-direction:column;align-items:center;text-align:center;padding-bottom:4px}
  .av-badge-wrap{margin:24px auto 16px !important}
  .prof-info{padding:0 16px 12px;text-align:center}
  .prof-handle{justify-content:center}
  .prof-stats{justify-content:center;padding:12px 16px 14px}
  .prof-actions{justify-content:center;padding:0 16px 16px}
}

/* Tabs */
.tabs{display:flex;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab-btn{
  padding:12px 16px;font-size:13px;font-weight:600;
  color:var(--muted);cursor:pointer;
  border-bottom:2px solid transparent;transition:all var(--transition);
  white-space:nowrap;background:none;border-top:none;border-left:none;border-right:none;
  font-family:inherit;display:inline-flex;align-items:center;gap:6px;
}
.tab-btn.active{color:var(--blue-light);border-bottom-color:var(--blue)}
.tab-panel{display:none;padding:18px 0 40px}
.tab-panel.active{display:block}
.vouch-list{display:flex;flex-direction:column;gap:10px}
.mini-vouch{
  padding:14px 16px;border-radius:13px;
  background:var(--surface);border:1px solid var(--border);
  transition:border-color var(--transition);
}
.mini-vouch:hover{border-color:var(--border2)}
.mini-vouch-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;flex-wrap:wrap}
.mini-vouch-name{font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px}
.mini-vouch-note{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.55}
.mini-vouch-meta{font-size:11px;color:var(--muted2);margin-top:5px;display:flex;align-items:center;gap:6px}
.vouch-form-card{padding:22px;border-radius:16px;background:var(--surface);border:1px solid var(--border);margin-top:16px}
.vouch-form-card h3{font-size:15px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px}

/* ═══════════════════════════════════════════════════════════════════════════
   SETTINGS PAGE
═══════════════════════════════════════════════════════════════════════════ */
.settings-wrap{max-width:600px;margin:0 auto;padding:28px 0 60px}
.settings-section{
  background:var(--surface);border:1px solid var(--border);
  border-radius:18px;overflow:hidden;margin-bottom:16px;
}
.settings-header{
  padding:18px 22px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:12px;
}
.settings-header-icon{
  width:38px;height:38px;border-radius:10px;
  background:var(--surface2);border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  color:var(--blue-light);flex-shrink:0;
}
.settings-header-text h3{font-size:15px;font-weight:700}
.settings-header-text p{font-size:12px;color:var(--muted);margin-top:2px}
.settings-body{padding:20px 22px}
.settings-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;border-bottom:1px solid var(--border);gap:16px;flex-wrap:wrap;
}
.settings-row:last-child{border-bottom:none;padding-bottom:0}
.settings-row-info{}
.settings-row-label{font-size:14px;font-weight:600;display:flex;align-items:center;gap:7px}
.settings-row-label svg{color:var(--muted);opacity:0.8}
.settings-row-desc{font-size:12px;color:var(--muted);margin-top:3px}
.danger-zone{border-color:rgba(240,80,80,0.2)}
.danger-zone .settings-header{border-color:rgba(240,80,80,0.15)}
.danger-zone .settings-header-icon{background:var(--red-dim);border-color:rgba(240,80,80,0.2);color:var(--red)}

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN PAGE
═══════════════════════════════════════════════════════════════════════════ */
.admin-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:26px}
.admin-stat-card{
  padding:18px 20px;border-radius:14px;
  background:var(--surface);border:1px solid var(--border);
  display:flex;flex-direction:column;gap:5px;
}
.admin-stat-icon{color:var(--blue-light);opacity:0.8;margin-bottom:4px}
.admin-stat-n{font-size:26px;font-weight:800;color:var(--blue-light)}
.admin-stat-l{font-size:12px;color:var(--muted);font-weight:500}
.admin-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}
.admin-tab{
  padding:8px 16px;border-radius:99px;
  font-size:13px;font-weight:600;cursor:pointer;
  border:1px solid var(--border2);background:transparent;
  color:var(--muted);font-family:inherit;transition:all var(--transition);
  display:inline-flex;align-items:center;gap:6px;
}
.admin-tab.active{background:var(--blue-dim);border-color:rgba(74,142,240,0.35);color:var(--blue-light)}
.admin-tab:hover:not(.active){background:var(--surface2);color:var(--text)}

.data-table{width:100%;border-collapse:collapse}
.data-table th{
  padding:10px 14px;text-align:left;
  font-size:11px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:0.06em;
  border-bottom:1px solid var(--border);white-space:nowrap;
}
.data-table td{
  padding:12px 14px;font-size:13px;
  border-bottom:1px solid rgba(255,255,255,0.03);
  vertical-align:middle;
}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:rgba(255,255,255,0.016)}
.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border)}

/* ═══════════════════════════════════════════════════════════════════════════
   LOGIN MODAL
═══════════════════════════════════════════════════════════════════════════ */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.82);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  z-index:500;display:none;
  align-items:flex-end;justify-content:center;
  padding:0;
}
.modal-overlay.open{display:flex}
.modal{
  background:rgba(9,9,22,0.99);
  border:1px solid var(--border2);
  border-radius:28px 28px 0 0;
  padding:0;width:100%;max-width:440px;
  box-shadow:0 -30px 90px rgba(0,0,0,0.6),0 0 0 1px rgba(255,255,255,0.05) inset;
  animation:slideUp 0.28s cubic-bezier(0.34,1.1,0.64,1);
  overflow:hidden;
}
@keyframes slideUp{from{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-handle{width:40px;height:4px;background:rgba(255,255,255,0.12);border-radius:99px;margin:14px auto 0}

/* Brand strip */
.modal-brand{
  display:flex;align-items:center;gap:14px;
  padding:20px 24px 18px;
  border-bottom:1px solid var(--border);
}
.modal-brand-logo{width:40px;height:40px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 2px 12px rgba(74,142,240,0.4))}
.modal-brand-title{font-size:18px;font-weight:800;letter-spacing:-0.01em}
.modal-brand-sub{font-size:12px;color:var(--muted);margin-top:2px}

.modal-body{padding:20px 24px 28px;display:flex;flex-direction:column;gap:14px}

/* Big open button */
.login-code-box{
  padding:0;background:transparent;border:none;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:56px;
}
.code-link{
  width:100%;
  color:#fff;font-weight:700;font-size:15px;
  text-decoration:none;padding:15px 20px;
  background:linear-gradient(135deg,rgba(74,142,240,0.95),rgba(40,100,200,0.95));
  border:1px solid rgba(74,142,240,0.5);
  border-radius:14px;display:flex;align-items:center;justify-content:center;gap:9px;
  transition:all var(--transition);
  box-shadow:0 4px 24px rgba(74,142,240,0.3);
}
.code-link:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 6px 32px rgba(74,142,240,0.45)}

/* Steps row */
.login-steps-row{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:14px 16px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:13px;
  flex-wrap:wrap;
}
.login-step-mini{
  display:flex;align-items:center;gap:7px;
  font-size:12px;color:var(--muted);flex:1;min-width:60px;
}
.login-step-mini span{white-space:normal;overflow:visible;text-overflow:unset;line-height:1.4}
.login-step-num{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  background:var(--blue-dim2);border:1px solid rgba(74,142,240,0.3);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:var(--blue-light);
}
.poll-status{
  font-size:13px;color:var(--muted);
  display:flex;align-items:center;gap:9px;justify-content:center;
  padding:8px 12px;background:var(--surface);border:1px solid var(--border);border-radius:10px;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer{
  position:fixed;bottom:0;left:0;right:0;
  text-align:center;padding:10px;
  font-size:11px;color:rgba(255,255,255,0.1);
  letter-spacing:0.07em;text-transform:uppercase;
  pointer-events:none;z-index:1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════════════ */
@media(max-width:639px){
  .nav-links{display:none}
  .nav-menu-btn{display:flex}
  .avatar-name{display:none}

  .hero-ctas{flex-direction:column}
  .hero-ctas .btn{width:100%}
  .hero-logo-section{padding:32px 24px 24px}
  .hero-body{padding:22px 20px 0}

  .podium-wrap{gap:7px}
  .podium-item{padding:14px 10px;min-width:80px}
  .podium-av,.podium-av-ph{width:46px;height:46px}

  .data-table th:nth-child(4),
  .data-table td:nth-child(4){display:none}

  .modal{border-radius:22px 22px 0 0}
  .modal-header{padding:16px 20px 14px}
  .modal-body{padding:16px 20px 28px}

  .settings-header{padding:16px 18px}
  .settings-body{padding:16px 18px}
  .settings-row{flex-direction:column;align-items:flex-start;gap:10px}

  .admin-stats{grid-template-columns:repeat(2,1fr)}
}

@media(min-width:640px){
  .modal-overlay{align-items:center;padding:16px}
  .modal{border-radius:24px;max-width:440px}
  .modal-handle{display:none}

  .filter-bar{flex-direction:row;align-items:center}
}

@media(min-width:1024px){
  .container{padding:0 24px}
}

/* ── Admin grid id alias ──────────────────────────────────────────────── */
#admin-stat-row{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:12px;margin-bottom:26px;
}

/* ── btn-full util ───────────────────────────────────────────────────── */
.btn-full{display:flex;width:100%}

/* ═══════════════════════════════════════════════════════════════════════════
   ADD VOUCH MODAL
═══════════════════════════════════════════════════════════════════════════ */
.vouch-modal-card{
  background:rgba(9,9,24,0.99);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:24px;
  padding:28px;
  width:100%;max-width:490px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05) inset,
    0 40px 120px rgba(0,0,0,0.65),
    0 0 80px rgba(74,142,240,0.06);
  max-height:92dvh;overflow-y:auto;
  animation:fadeUp 0.22s cubic-bezier(0.34,1.2,0.64,1) both;
}
.vm-result-row{
  display:flex;align-items:center;gap:11px;
  padding:10px 13px;border-radius:11px;
  cursor:pointer;transition:background var(--transition);
  border:1px solid transparent;
}
.vm-result-row:hover{background:var(--surface);border-color:var(--border2)}
.vm-result-av{
  width:38px;height:38px;border-radius:50%;object-fit:cover;
  border:1px solid var(--border2);flex-shrink:0;
}
.vm-result-av-ph{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:var(--blue-dim);display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:800;color:var(--blue-light);border:1px solid var(--border2);
}

/* Type pills inside modal */
.vm-type-pills{display:flex;gap:7px;flex-wrap:wrap}
.vm-type-pill{
  padding:7px 15px;border-radius:99px;
  border:1px solid var(--border2);
  background:transparent;color:var(--muted);
  font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;
  transition:all var(--transition);
}
.vm-type-pill:hover{border-color:rgba(74,142,240,0.3);color:var(--text2)}
.vm-type-pill.active{background:var(--blue-dim2);border-color:rgba(74,142,240,0.4);color:var(--blue-light)}

/* Star rating buttons — color cascades to inner SVG via currentColor */
.vm-stars{display:flex;gap:4px}
.vm-star{
  background:none;border:none;cursor:pointer;
  color:rgba(255,255,255,0.18);
  transition:color var(--transition),transform var(--transition);
  padding:3px;font-family:inherit;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.vm-star svg,.vm-star i{color:inherit!important}
.vm-star.active{color:#f0c832}
.vm-star:hover{transform:scale(1.18);color:#f0c832!important}

/* Profile page rating stars */
.rating-star{
  background:none;border:none;cursor:pointer;
  color:rgba(255,255,255,0.18);
  transition:color var(--transition),transform var(--transition);
  padding:3px;display:flex;align-items:center;justify-content:center;
}
.rating-star svg,.rating-star i{color:inherit!important}
.rating-star.active{color:#f0c832}
.rating-star:hover{transform:scale(1.18);color:#f0c832!important}

/* ═══════════════════════════════════════════════════════════════════════════
   WALL OF SHAME
═══════════════════════════════════════════════════════════════════════════ */
.wall-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));
  gap:14px;padding-bottom:40px;
}
.wall-card{
  border-radius:18px;overflow:hidden;
  background:var(--surface);
  border:1px solid rgba(240,80,80,0.18);
  display:flex;flex-direction:column;gap:0;
  animation:fadeUp 0.38s ease both;
}
.wall-card-header{
  display:flex;align-items:center;gap:13px;
  padding:16px;
  background:linear-gradient(135deg,rgba(240,80,80,0.07),transparent);
  border-bottom:1px solid rgba(240,80,80,0.12);
}
.wall-scammer-av-wrap{position:relative;flex-shrink:0}
.wall-av{
  width:48px;height:48px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(240,80,80,0.35);
}
.wall-av-ph{
  width:48px;height:48px;border-radius:50%;flex-shrink:0;
  background:var(--red-dim);display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:800;color:var(--red);border:2px solid rgba(240,80,80,0.3);
}
.wall-danger-dot{
  position:absolute;bottom:-1px;right:-1px;
  width:14px;height:14px;border-radius:50%;
  background:var(--red);border:2px solid var(--surface);
}
.wall-id-info{flex:1;min-width:0}
.wall-name{font-size:15px;font-weight:800;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.wall-handle{font-size:12px;color:var(--muted);margin-top:1px}
.wall-region{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:4px;margin-top:2px}
.wall-note{
  padding:12px 16px;font-size:13px;color:var(--muted);
  font-style:italic;line-height:1.6;border-bottom:1px solid rgba(240,80,80,0.08);
}
.wall-card-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;flex-wrap:wrap;gap:8px;
}

/* ── Extra badges ─────────────────────────────────────────────────────── */
.badge-red{
  background:var(--red-dim);border:1px solid rgba(240,80,80,0.3);
  color:var(--red);font-size:11px;font-weight:700;
  padding:3px 8px;border-radius:6px;display:inline-flex;align-items:center;gap:4px;
}

/* ── Lucide icon alignment in buttons/links ──────────────────────────── */
a svg,button svg,span svg{vertical-align:middle}

/* ── Badge SVG icons ─────────────────────────────────────────────────── */
.badge-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--badge-colour,var(--border2));
  border-radius:7px;
  cursor:default;
  flex-shrink:0;
  transition:transform 0.15s ease,box-shadow 0.15s ease;
}
.badge-icon:hover{
  transform:scale(1.15);
  box-shadow:0 0 8px var(--badge-colour,var(--blue-glow));
}
.badge-icon svg,.badge-icon img{
  width:18px;height:18px;display:block;object-fit:contain;
}
.badge-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* ── Floating badge ring around avatar (Telegram style) ──────────────── */
.av-badge-wrap{
  position:relative;
  display:inline-block;
  flex-shrink:0;
}
/* Badge slots orbit the avatar at cardinal + diagonal positions.
   Up to 8 slots, shown via nth-child so only as many as granted appear. */
.av-badge-ring{
  position:absolute;
  inset:0;
  pointer-events:none;
}
/* Gentle float keyframe */
@keyframes badge-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
@keyframes badge-float-x{
  0%,100%{transform:translateY(-50%) translateX(0)}
  50%{transform:translateY(-50%) translateX(-2px)}
}
@keyframes badge-float-cx{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-3px)}
}

.av-badge-orbit{
  position:absolute;
  /* 36px bubble so PNG icons are clearly visible */
  width:36px;height:36px;
  background:var(--bg2);
  border:2px solid var(--border2);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,0.65);
  transition:box-shadow 0.18s ease,filter 0.18s ease;
  pointer-events:auto;
  cursor:default;
  animation:badge-float 3s ease-in-out infinite;
  z-index:4;
}
/* Stagger float timing per slot */
.av-badge-orbit:nth-child(1){animation-delay:0s}
.av-badge-orbit:nth-child(2){animation-delay:.4s}
.av-badge-orbit:nth-child(3){animation-delay:.8s}
.av-badge-orbit:nth-child(4){animation-delay:1.2s}
.av-badge-orbit:nth-child(5){animation-delay:1.6s}
.av-badge-orbit:nth-child(6){animation-delay:2.0s}
.av-badge-orbit:nth-child(7){animation-delay:2.4s}
.av-badge-orbit:nth-child(8){animation-delay:2.8s}

.av-badge-orbit:hover{
  filter:brightness(1.35);
  box-shadow:0 6px 22px rgba(0,0,0,0.75);
  z-index:6;
}
.av-badge-orbit img,.av-badge-orbit svg{
  /* 22px icon so the art is clear inside the 36px bubble */
  width:22px;height:22px;display:block;object-fit:contain;
}
/* Positions: orbit centre 20px outside the 88px avatar edge (half 36px = 18px, +2px gap) */
.av-badge-orbit:nth-child(1){top:-20px;left:50%;transform:translateX(-50%);animation-name:badge-float-cx}
.av-badge-orbit:nth-child(2){top:-12px;right:-12px}
.av-badge-orbit:nth-child(3){top:50%;right:-20px;transform:translateY(-50%);animation-name:badge-float-x}
.av-badge-orbit:nth-child(4){bottom:-12px;right:-12px}
.av-badge-orbit:nth-child(5){bottom:-20px;left:50%;transform:translateX(-50%);animation-name:badge-float-cx}
.av-badge-orbit:nth-child(6){bottom:-12px;left:-12px}
.av-badge-orbit:nth-child(7){top:50%;left:-20px;transform:translateY(-50%);animation-name:badge-float-x}
.av-badge-orbit:nth-child(8){top:-12px;left:-12px}

/* Tooltip via title attribute (native) */

/* ── Premium rainbow name ────────────────────────────────────────────── */
/* Use background-clip text for a true shimmer effect */
@keyframes rainbow-shift{
  0%   {background-position:0% 50%}
  100% {background-position:200% 50%}
}
.rainbow-name{
  background:linear-gradient(90deg,
    #f05050 0%,#f0a050 16%,#f5c842 33%,#34d171 50%,
    #4a8ef0 66%,#9b60f0 83%,#f05050 100%
  );
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:rainbow-shift 3s linear infinite;
  font-weight:700;
  display:inline-block; /* required for background-clip on inline elements */
}

/* ── Delete account modal (redesigned centred card) ─────────────────── */
.delete-modal-card{
  background:rgba(12,8,18,0.99);
  border:1px solid rgba(240,80,80,0.22);
  border-radius:22px;
  padding:32px 28px 28px;
  width:100%;max-width:420px;
  box-shadow:0 0 0 1px rgba(240,80,80,0.07) inset,0 40px 100px rgba(0,0,0,0.7);
  animation:fadeUp 0.22s ease both;
  text-align:center;
}
.delete-modal-icon{
  width:64px;height:64px;border-radius:50%;
  background:var(--red-dim);border:2px solid rgba(240,80,80,0.3);
  display:flex;align-items:center;justify-content:center;
  color:var(--red);margin:0 auto 20px;
}
.delete-modal-title{font-size:20px;font-weight:800;color:var(--text);margin-bottom:8px}
.delete-modal-body{font-size:13px;color:var(--muted);line-height:1.65;max-width:320px;margin:0 auto 20px}
.delete-modal-warning{
  background:var(--red-dim);border:1px solid rgba(240,80,80,0.2);
  border-radius:12px;padding:12px 14px;margin-bottom:22px;
  font-size:12px;color:var(--red);display:flex;align-items:flex-start;gap:9px;text-align:left;
}
.delete-modal-actions{display:flex;gap:10px}
.delete-modal-actions .btn{flex:1;justify-content:center}

/* ── Admin premium/badge user search rows ────────────────────────────── */
.pb-result-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  cursor:pointer;
  transition:background 0.12s;
  border-bottom:1px solid var(--border);
}
.pb-result-row:last-child{border-bottom:none}
.pb-result-row:hover{background:var(--surface2)}

/* ── Mobile performance: disable heavy animations on small screens ────── */
@media (max-width: 640px){
  body::after{display:none}
  .orb{animation:none !important;display:none}
  .orb1,.orb2,.orb3{display:none}
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:0.1s !important}
  /* keep rainbow, spinner & badge float alive */
  .rainbow-name{animation:rainbow-shift 3s linear infinite !important;animation-iteration-count:infinite !important;animation-duration:3s !important}
  .spinner,.spinner-sm{animation:spin 0.8s linear infinite !important;animation-iteration-count:infinite !important;animation-duration:0.8s !important}
  .av-badge-orbit{animation:badge-float 4s ease-in-out infinite !important;animation-iteration-count:infinite !important;animation-duration:4s !important}
  .av-badge-orbit:nth-child(1),.av-badge-orbit:nth-child(5){animation-name:badge-float-cx !important}
  .av-badge-orbit:nth-child(3),.av-badge-orbit:nth-child(7){animation-name:badge-float-x !important}
}

/* ── Redeem page ─────────────────────────────────────────────────────── */
.redeem-wrap{
  max-width:480px;margin:0 auto;padding:0 16px;
}
.redeem-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:32px;
}
.redeem-icon{
  width:56px;height:56px;border-radius:16px;
  background:var(--blue-dim);border:1px solid var(--blue-dim2);
  display:flex;align-items:center;justify-content:center;
  color:var(--blue);margin:0 auto 20px;
}
.redeem-title{font-size:22px;font-weight:800;text-align:center;margin-bottom:6px}
.redeem-sub{font-size:14px;color:var(--muted);text-align:center;margin-bottom:24px}
.redeem-input-row{display:flex;gap:10px;margin-bottom:16px}
.redeem-input-row input{flex:1;font-size:15px;letter-spacing:0.07em;text-transform:uppercase}
.redeem-result{
  padding:14px 16px;border-radius:var(--radius-sm);
  font-size:14px;display:flex;align-items:center;gap:10px;
  display:none;
}
.redeem-result.success{background:var(--green-dim);border:1px solid rgba(52,209,113,0.3);color:var(--green)}
.redeem-result.error  {background:var(--red-dim);border:1px solid rgba(240,80,80,0.3);color:var(--red)}

/* ── Badge equip toggle in settings ─────────────────────────────────── */
.badge-equip-row{
  display:flex;align-items:center;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--border);
}
.badge-equip-row:last-child{border-bottom:none}
.badge-equip-info{flex:1;min-width:0}
.badge-equip-name{font-size:14px;font-weight:600}
.badge-equip-desc{font-size:12px;color:var(--muted);margin-top:2px}
.badge-toggle{
  position:relative;width:40px;height:22px;flex-shrink:0;
}
.badge-toggle input{opacity:0;width:0;height:0;position:absolute}
.badge-toggle-slider{
  position:absolute;inset:0;border-radius:99px;
  background:var(--surface3);border:1px solid var(--border2);
  cursor:pointer;transition:background 0.2s;
}
.badge-toggle-slider::after{
  content:'';position:absolute;width:16px;height:16px;border-radius:50%;
  background:#fff;top:2px;left:2px;transition:transform 0.2s;
}
.badge-toggle input:checked ~ .badge-toggle-slider{background:var(--blue);border-color:var(--blue)}
.badge-toggle input:checked ~ .badge-toggle-slider::after{transform:translateX(18px)}
/* ── Reset & Variables ─────────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:          #07070f;
  --bg2:         #0c0c18;
  --surface:     rgba(255,255,255,0.028);
  --surface2:    rgba(255,255,255,0.052);
  --surface3:    rgba(255,255,255,0.075);
  --border:      rgba(255,255,255,0.068);
  --border2:     rgba(255,255,255,0.11);
  --border3:     rgba(255,255,255,0.16);
  --blue:        #4a8ef0;
  --blue-light:  #6aa3f5;
  --blue-dim:    rgba(74,142,240,0.13);
  --blue-dim2:   rgba(74,142,240,0.22);
  --blue-glow:   rgba(74,142,240,0.30);
  --blue-glow2:  rgba(74,142,240,0.50);
  --text:        #eeeef8;
  --text2:       #c8c8de;
  --muted:       rgba(238,238,248,0.48);
  --muted2:      rgba(238,238,248,0.24);
  --muted3:      rgba(238,238,248,0.13);
  --gold:        #f5c842;
  --silver:      #a8b5c4;
  --bronze:      #cd7f32;
  --red:         #f05050;
  --red-dim:     rgba(240,80,80,0.14);
  --green:       #34d171;
  --green-dim:   rgba(52,209,113,0.12);
  --radius:      18px;
  --radius-sm:   11px;
  --radius-xs:   8px;
  --nav-h:       60px;
  --transition:  0.18s cubic-bezier(0.4,0,0.2,1);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;height:100%}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100dvh;
  overflow-x:hidden;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:99px}

/* ── Film grain (desktop only — too heavy on mobile) ─────────────────────── */
@media (min-width: 641px){
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  opacity:0.25;animation:grain 0.2s steps(1) infinite;
}
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-1%,-1%)}
  20%{transform:translate(1%,0)}30%{transform:translate(0,1%)}
  40%{transform:translate(-1%,0)}50%{transform:translate(1%,1%)}
  60%{transform:translate(0,-1%)}70%{transform:translate(-1%,1%)}
  80%{transform:translate(1%,-1%)}90%{transform:translate(-1%,0)}
}

/* ── Ambient orbs ────────────────────────────────────────────────────────── */
.orb{position:fixed;border-radius:50%;filter:blur(100px);pointer-events:none;z-index:0}
.orb1{
  width:min(700px,90vw);height:min(700px,90vw);
  top:-200px;left:-200px;
  background:radial-gradient(circle,rgba(30,80,210,0.10),transparent 70%);
  animation:drift1 24s ease-in-out infinite;
}
.orb2{
  width:min(550px,80vw);height:min(550px,80vw);
  bottom:-100px;right:-100px;
  background:radial-gradient(circle,rgba(74,142,240,0.08),transparent 70%);
  animation:drift2 18s ease-in-out infinite;
}
.orb3{
  width:min(400px,65vw);height:min(400px,65vw);
  top:45%;left:45%;
  background:radial-gradient(circle,rgba(100,40,220,0.055),transparent 70%);
  animation:drift3 30s ease-in-out infinite;
}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-35px)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,40px)}}
@keyframes drift3{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(calc(-50% + 50px),calc(-50% - 40px))}}

/* ── Navbar ──────────────────────────────────────────────────────────────── */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:var(--nav-h);
  background:rgba(7,7,15,0.78);
  backdrop-filter:blur(28px) saturate(1.6);
  -webkit-backdrop-filter:blur(28px) saturate(1.6);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;
  padding:0 16px;gap:6px;
}
.nav-logo{
  display:flex;align-items:center;gap:9px;
  text-decoration:none;color:var(--text);flex-shrink:0;
}
.nav-logo img{height:28px;width:auto;filter:drop-shadow(0 0 8px rgba(74,142,240,0.4))}
.nav-brand{font-size:15px;font-weight:800;letter-spacing:0.1em;color:var(--text)}
.nav-links{display:flex;gap:2px;margin-left:12px}
.nav-link{
  padding:7px 12px;border-radius:9px;
  color:var(--muted);font-size:13px;font-weight:500;
  cursor:pointer;transition:all var(--transition);
  border:none;background:none;font-family:inherit;
  text-decoration:none;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;
}
.nav-link:hover,.nav-link.active{color:var(--text);background:var(--surface2)}
.nav-link svg{opacity:0.7}
.nav-link:hover svg,.nav-link.active svg{opacity:1}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:8px}

/* Connect button */
.btn-connect{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 15px;
  background:var(--blue-dim);
  border:1px solid rgba(74,142,240,0.35);
  color:var(--blue-light);border-radius:9px;
  font-size:13px;font-weight:600;cursor:pointer;
  transition:all var(--transition);font-family:inherit;white-space:nowrap;
}
.btn-connect:hover{background:var(--blue-dim2);border-color:rgba(74,142,240,0.55);transform:translateY(-1px)}

/* Hamburger */
.nav-menu-btn{
  display:none;flex-direction:column;gap:4.5px;
  background:none;border:none;cursor:pointer;
  padding:8px;color:var(--muted);border-radius:8px;
  transition:all var(--transition);
}
.nav-menu-btn:hover{background:var(--surface2);color:var(--text)}
.nav-menu-btn span{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;transition:all 0.25s}
.nav-menu-btn.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-menu-btn.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-menu-btn.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Mobile drawer */
.nav-drawer{
  display:none;
  position:fixed;top:var(--nav-h);left:0;right:0;
  background:rgba(7,7,15,0.98);
  backdrop-filter:blur(28px);
  border-bottom:1px solid var(--border);
  padding:10px 12px 16px;z-index:199;
  flex-direction:column;gap:3px;
  animation:slideDown 0.22s ease;
}
.nav-drawer.open{display:flex}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.nav-drawer .nav-link{padding:13px 14px;font-size:14px;border-radius:11px;width:100%}
.drawer-divider{height:1px;background:var(--border);margin:6px 0}

/* Avatar / user pill */
.avatar-btn{
  display:flex;align-items:center;gap:8px;
  cursor:pointer;background:var(--surface);
  border:1px solid var(--border2);
  border-radius:99px;padding:4px 12px 4px 4px;
  color:var(--text);font-family:inherit;font-size:13px;font-weight:500;
  transition:all var(--transition);
}
.avatar-btn:hover{background:var(--surface2);border-color:var(--border3)}
.avatar-img,.avatar-ph{
  width:28px;height:28px;border-radius:50%;
  border:none;object-fit:cover;flex-shrink:0;
}
.avatar-ph{
  background:var(--blue-dim2);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:var(--blue-light);
}
.avatar-name{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Dropdown */
.dropdown{
  position:absolute;top:calc(100% + 10px);right:0;
  min-width:185px;
  background:rgba(10,10,22,0.98);
  backdrop-filter:blur(28px);
  border:1px solid var(--border2);border-radius:14px;
  overflow:hidden;display:none;
  box-shadow:0 24px 80px rgba(0,0,0,0.55),0 0 0 1px rgba(255,255,255,0.04);
  z-index:300;
}
.dropdown.open{display:block;animation:fadeIn 0.15s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.dd-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;font-size:13px;color:var(--muted);
  cursor:pointer;transition:all 0.12s;text-decoration:none;
  border:none;background:none;font-family:inherit;width:100%;text-align:left;
}
.dd-item:hover{background:var(--surface2);color:var(--text)}
.dd-item svg{opacity:0.6;flex-shrink:0}
.dd-item:hover svg{opacity:1}
.dd-sep{height:1px;background:var(--border)}

/* ── Layout ──────────────────────────────────────────────────────────────── */
.page{min-height:100dvh;padding-top:var(--nav-h);position:relative;z-index:1}
.container{max-width:1100px;margin:0 auto;padding:0 16px}

/* ── Glass ───────────────────────────────────────────────────────────────── */
.glass{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 20px;border-radius:var(--radius-sm);
  font-size:14px;font-weight:600;cursor:pointer;
  transition:all var(--transition);border:none;font-family:inherit;
  white-space:nowrap;text-decoration:none;letter-spacing:0.01em;
}
.btn svg{flex-shrink:0}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 2px 16px rgba(74,142,240,0.25)}
.btn-primary:hover{background:#3a7ee0;transform:translateY(-1px);box-shadow:0 6px 28px var(--blue-glow)}
.btn-ghost{background:var(--surface2);color:var(--text2);border:1px solid var(--border2)}
.btn-ghost:hover{background:var(--surface3);color:var(--text);border-color:var(--border3)}
.btn-danger{background:var(--red-dim);color:var(--red);border:1px solid rgba(240,80,80,0.25)}
.btn-danger:hover{background:rgba(240,80,80,0.24);transform:translateY(-1px)}
.btn-success{background:var(--green-dim);color:var(--green);border:1px solid rgba(52,209,113,0.22)}
.btn-success:hover{background:rgba(52,209,113,0.22)}
.btn-sm{padding:6px 13px;font-size:12px;border-radius:8px}
.btn-xs{padding:4px 10px;font-size:11px;border-radius:7px}
.btn-icon{padding:8px;border-radius:9px}
.btn:disabled{opacity:0.4;pointer-events:none;cursor:not-allowed}

/* ── Page header ─────────────────────────────────────────────────────────── */
.page-header{padding:28px 0 20px}
.page-title{font-size:clamp(22px,5vw,30px);font-weight:800;letter-spacing:-0.02em;display:flex;align-items:center;gap:10px}
.page-title svg{color:var(--blue);opacity:0.9}
.page-sub{color:var(--muted);font-size:14px;margin-top:5px}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge{padding:3px 9px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:0.03em;display:inline-flex;align-items:center;gap:4px}
.badge svg{width:10px;height:10px}
.badge-blue{background:var(--blue-dim);border:1px solid rgba(74,142,240,0.25);color:var(--blue-light)}
.badge-green{background:var(--green-dim);border:1px solid rgba(52,209,113,0.2);color:var(--green)}
.badge-red{background:var(--red-dim);border:1px solid rgba(240,80,80,0.2);color:var(--red)}
.badge-gold{background:rgba(245,200,66,0.1);border:1px solid rgba(245,200,66,0.25);color:var(--gold)}
.badge-muted{background:var(--surface2);border:1px solid var(--border2);color:var(--muted)}

/* ── Stars ───────────────────────────────────────────────────────────────── */
.stars{display:inline-flex;gap:2px;color:var(--gold);font-size:13px}

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.form-label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.07em;display:flex;align-items:center;gap:5px}
.form-label svg{opacity:0.7}
.form-input{
  padding:11px 14px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border2);
  border-radius:var(--radius-sm);
  color:var(--text);font-size:14px;font-family:inherit;outline:none;
  transition:border-color var(--transition),box-shadow var(--transition);width:100%;
}
.form-input:focus{border-color:rgba(74,142,240,0.5);box-shadow:0 0 0 3px rgba(74,142,240,0.08)}
.form-input::placeholder{color:var(--muted3)}
textarea.form-input{resize:vertical;min-height:86px;line-height:1.55}
select.form-input{cursor:pointer;background-color:rgba(8,8,18,0.92)}
.input-wrap{position:relative}
.input-wrap .form-input{padding-left:40px}
.input-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted2);pointer-events:none}

/* ── Search bar ──────────────────────────────────────────────────────────── */
.search-bar{
  display:flex;align-items:center;gap:10px;
  padding:11px 15px;
  background:var(--surface);border:1px solid var(--border2);
  border-radius:var(--radius-sm);transition:border-color var(--transition),box-shadow var(--transition);
}
.search-bar:focus-within{border-color:rgba(74,142,240,0.45);box-shadow:0 0 0 3px rgba(74,142,240,0.07)}
.search-bar input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:14px;font-family:inherit}
.search-bar input::placeholder{color:var(--muted3)}
.search-icon{color:var(--muted2);flex-shrink:0}

/* ── Pills ───────────────────────────────────────────────────────────────── */
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{
  padding:6px 13px;border-radius:99px;
  font-size:12px;font-weight:600;cursor:pointer;
  border:1px solid var(--border2);background:transparent;
  color:var(--muted);font-family:inherit;transition:all var(--transition);
  display:inline-flex;align-items:center;gap:5px;
}
.pill:hover{background:var(--blue-dim);border-color:rgba(74,142,240,0.35);color:var(--blue-light)}
.pill.active{background:var(--blue-dim);border-color:rgba(74,142,240,0.4);color:var(--blue-light)}

/* ── Toast / Notifications ─────────────────────────────���������─────────────────── */
#toast-container{
  position:fixed;top:72px;right:16px;
  display:flex;flex-direction:column;gap:8px;
  z-index:9000;pointer-events:none;
  max-width:min(360px,calc(100vw - 32px));
}
.toast-item{
  display:flex;align-items:flex-start;gap:11px;
  padding:13px 15px;
  background:rgba(12,12,24,0.97);
  border:1px solid var(--border2);
  border-radius:13px;
  font-size:13px;color:var(--text2);
  box-shadow:0 8px 40px rgba(0,0,0,0.5);
  pointer-events:all;
  animation:toastIn 0.28s cubic-bezier(0.34,1.56,0.64,1) both;
  transition:opacity 0.25s,transform 0.25s;
  width:100%;
}
.toast-item.hiding{opacity:0;transform:translateX(16px)}
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.toast-icon{flex-shrink:0;margin-top:1px}
.toast-icon-success{color:var(--green)}
.toast-icon-error{color:var(--red)}
.toast-icon-info{color:var(--blue-light)}
.toast-icon-warning{color:var(--gold)}
.toast-body{flex:1;min-width:0}
.toast-title{font-weight:700;font-size:13px;color:var(--text);margin-bottom:2px}
.toast-msg{font-size:12px;color:var(--muted);line-height:1.45}
.toast-close{
  flex-shrink:0;background:none;border:none;color:var(--muted2);
  cursor:pointer;padding:0;pointer-events:all;line-height:1;margin-top:1px;
  transition:color var(--transition);
}
.toast-close:hover{color:var(--text)}
.toast-item.success{border-color:rgba(52,209,113,0.25)}
.toast-item.error{border-color:rgba(240,80,80,0.25)}
.toast-item.warning{border-color:rgba(245,200,66,0.2)}

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.spinner{
  display:inline-block;width:20px;height:20px;
  border:2px solid rgba(255,255,255,0.12);
  border-top-color:var(--blue);border-radius:50%;
  animation:spin 0.75s linear infinite;flex-shrink:0;
}
.spinner-sm{width:14px;height:14px;border-width:2px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Animations ──────────────────────────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fadeUp 0.42s ease both}

/* ═══════════════════════════════════════════════════════════════════════════
   INDEX PAGE — Responsive Hero Section (Mobile-First)
═══════════════════════════════════════════════════════════════════════════ */
.hero-container{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  align-items:start;
  min-height:100dvh;
  max-width:1200px;
  margin:0 auto;
  padding:calc(var(--nav-h) + 28px) 20px 60px;
}

/* Logo showcase */
.logo-showcase{
  display:flex;justify-content:center;margin-bottom:24px;
}
.logo-ring-outer{
  position:relative;
  width:clamp(140px,24vw,200px);
  height:clamp(140px,24vw,200px);
}
.logo-glow{
  position:absolute;inset:-30px;
  background:radial-gradient(circle,rgba(74,142,240,0.35) 0%,transparent 65%);
  border-radius:50%;
  animation:pulseGlow 6s ease-in-out infinite;
  pointer-events:none;
  z-index:0;
}
@keyframes pulseGlow{
  0%,100%{opacity:0.4;transform:scale(0.9)}
  50%{opacity:1;transform:scale(1.15)}
}
.logo-img{
  width:100%;height:100%;object-fit:contain;
  position:relative;z-index:1;
  filter:drop-shadow(0 8px 40px rgba(74,142,240,0.6));
  animation:floatBob 8s ease-in-out infinite;
}
@keyframes floatBob{
  0%,100%{transform:translateY(0px)}
  50%{transform:translateY(-12px)}
}

/* Hero title */
.hero-title{
  font-size:clamp(42px,12vw,72px);
  font-weight:900;
  letter-spacing:-0.02em;
  line-height:1.1;
  margin:12px 0 20px;
  text-align:center;
}
.hero-word-main{
  background:linear-gradient(135deg,#ffffff 0%,var(--blue-light) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  display:block;
}
.hero-word-sub{
  color:var(--muted);
  font-size:clamp(16px,3vw,24px);
  letter-spacing:0.24em;
  text-transform:uppercase;
  font-weight:600;
}

/* Tagline */
.hero-tagline{
  font-size:clamp(14px,2vw,16px);
  color:var(--muted);
  line-height:1.8;
  max-width:600px;
  margin:0 auto 28px;
  text-align:center;
}

/* Trust badges grid */
.trust-badges{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:32px;
}
.trust-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  background:var(--surface2);
  border:1px solid var(--border2);
  border-radius:99px;
  font-size:12px;
  font-weight:600;
  color:var(--text2);
}
.trust-badge i{
  color:var(--blue-light);
  flex-shrink:0;
}

/* Stats grid */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:16px;
  margin-bottom:8px;
}
.stat-card{
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:16px;
  padding:20px 16px;
  text-align:center;
  backdrop-filter:blur(12px);
  transition:all var(--transition);
}
.stat-card:hover{
  background:var(--surface2);
  border-color:rgba(74,142,240,0.3);
}
.stat-value{
  font-size:clamp(20px,5vw,32px);
  font-weight:900;
  color:var(--blue-light);
  line-height:1;
  margin-bottom:6px;
}
.stat-label{
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.06em;
  font-weight:600;
}

/* ── Right column: CTA Card ── */
.hero-right{
  display:flex;
  justify-content:center;
  align-items:start;
  min-height:400px;
}
.hero-card-wrapper{
  width:100%;
  max-width:520px;
}

/* Announcement section */
.announcement-section{
  background:linear-gradient(135deg,rgba(74,142,240,0.12),rgba(74,142,240,0.05));
  border:1px solid rgba(74,142,240,0.25);
  border-radius:16px;
  padding:18px;
  margin-bottom:24px;
  animation:slideDown 0.4s ease-out;
}
@keyframes slideDown{
  from{opacity:0;transform:translateY(-12px)}
  to{opacity:1;transform:translateY(0)}
}
.announcement-header{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--blue-light);
  margin-bottom:8px;
}
.announcement-title{
  font-size:15px;
  font-weight:800;
  color:var(--text);
  margin-bottom:6px;
}
.announcement-body{
  font-size:13px;
  color:var(--muted);
  line-height:1.6;
}
.announcement-date{
  font-size:10px;
  color:var(--muted2);
  margin-top:8px;
  font-weight:500;
}

/* Main CTA card */
.cta-card{
  background:linear-gradient(145deg,rgba(255,255,255,0.055),rgba(255,255,255,0.018));
  border:1px solid rgba(255,255,255,0.12);
  border-radius:28px;
  backdrop-filter:blur(40px);
  -webkit-backdrop-filter:blur(40px);
  padding:clamp(24px,5vw,40px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05) inset,
    0 48px 140px rgba(0,0,0,0.45),
    0 0 80px rgba(74,142,240,0.08);
  display:flex;
  flex-direction:column;
  gap:28px;
  animation:fadeUp 0.5s ease both;
}

/* Card header */
.card-header{
  display:flex;
  align-items:flex-start;
  gap:18px;
}
.card-icon{
  width:56px;
  height:56px;
  border-radius:16px;
  background:var(--blue-dim2);
  border:1px solid rgba(74,142,240,0.35);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color:var(--blue-light);
}
.card-text{
  flex:1;
}
.card-title{
  font-size:clamp(20px,4vw,24px);
  font-weight:900;
  color:var(--text);
  line-height:1.2;
}
.card-subtitle{
  font-size:13px;
  color:var(--muted);
  margin-top:4px;
}

/* Features list */
.feature-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.feature-list li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:13px;
  color:var(--text2);
  line-height:1.6;
}
.feature-list li i{
  color:var(--green);
  flex-shrink:0;
  margin-top:2px;
}
.feature-list strong{
  color:var(--text);
  font-weight:700;
}

/* Button group */
.button-group{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.btn-lg{
  padding:15px 20px;
  font-size:14px;
  font-weight:700;
  border-radius:var(--radius-sm);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.btn-secondary{
  background:var(--surface2);
  border:1px solid var(--border2);
  color:var(--text2);
  transition:all var(--transition);
}
.btn-secondary:hover{
  background:var(--surface3);
  border-color:rgba(74,142,240,0.3);
  color:var(--text);
}

/* Card footer */
.card-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:11px;
  color:var(--muted3);
  letter-spacing:0.05em;
  border-top:1px solid var(--border);
  padding-top:20px;
  margin-top:8px;
}

/* ── DESKTOP: Two-column layout ── */
@media (min-width:768px){
  .hero-container{
    grid-template-columns:1.1fr 1fr;
    gap:48px;
    padding:calc(var(--nav-h) + 40px) 40px 80px;
  }

  .hero-right{
    min-height:unset;
  }

  .logo-showcase{
    justify-content:flex-start;
    margin-bottom:32px;
  }

  .hero-title{
    text-align:left;
  }

  .hero-tagline{
    text-align:left;
    margin-left:0;
  }

  .trust-badges{
    justify-content:flex-start;
  }

  .stats-grid{
    grid-template-columns:repeat(3,1fr);
    margin-top:12px;
  }

  .stat-card{
    padding:24px 20px;
  }

  .card-title{
    font-size:26px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUTH GATE
═══════════════════════════════════════════════════════════════════════════ */
.auth-gate{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:60vh;text-align:center;gap:18px;padding:48px 16px;
}
.auth-gate-icon{
  width:72px;height:72px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);
}
.auth-gate h2{font-size:22px;font-weight:700;margin-top:4px}
.auth-gate p{color:var(--muted);font-size:14px;max-width:300px;line-height:1.65}

/* ═══════════════════════════════════════════════════════════════════════════
   VOUCHES PAGE
═══════════════════════════════════════════════════════════════════════════ */
.filter-bar{display:flex;flex-direction:column;gap:12px;margin-bottom:22px}
.vouches-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));
  gap:14px;padding-bottom:40px;
}
.vouch-card{
  padding:0;border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);
  transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);
  animation:fadeUp 0.38s ease both;cursor:pointer;
}
.vouch-card:hover{border-color:rgba(74,142,240,0.28);transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,0.3)}

/* Receiver hero — top section */
.vc-receiver{
  display:flex;align-items:center;gap:13px;
  padding:16px 16px 14px;
  background:linear-gradient(135deg,rgba(74,142,240,0.07),transparent);
  border-bottom:1px solid var(--border);
  cursor:pointer;
}
.vc-recv-av-wrap{position:relative;flex-shrink:0}
.vc-recv-av{
  width:46px;height:46px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(74,142,240,0.35);
}
.vc-recv-av-ph{
  background:var(--blue-dim);display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:800;color:var(--blue-light);
}
.vc-recv-badge{
  position:absolute;bottom:-2px;right:-2px;
  width:18px;height:18px;border-radius:50%;
  background:var(--blue);
  border:2px solid var(--surface);
  display:flex;align-items:center;justify-content:center;
  color:#fff;
}
.vc-recv-info{flex:1;min-width:0}
.vc-recv-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--blue-light);opacity:0.85;margin-bottom:2px}
.vc-recv-name{font-size:15px;font-weight:800;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--text)}
.vc-recv-handle{font-size:12px;color:var(--muted);margin-top:1px}
.vc-recv-badge-product{font-size:11px;flex-shrink:0;align-self:flex-start;margin-top:2px}

/* Stars row */
.vc-stars-row{padding:10px 16px 0;display:flex;align-items:center;gap:6px}
.stars{color:var(--gold);font-size:13px;letter-spacing:1px}

/* Note */
.vc-note{padding:0 16px;font-size:13px;color:var(--muted);line-height:1.6;font-style:italic}

/* Footer: voucher */
.vc-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px 14px;margin-top:4px;
  flex-wrap:wrap;gap:6px;
}
.vc-voucher{
  display:flex;align-items:center;gap:7px;cursor:pointer;
  min-width:0;flex:1;
}
.vc-voucher:hover .vc-voucher-name{color:var(--blue-light)}
.vc-voucher-av{width:22px;height:22px;border-radius:50%;object-fit:cover;border:1px solid var(--border2);flex-shrink:0}
.vc-voucher-av-ph{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  background:var(--surface2);border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:800;color:var(--muted);
}
.vc-voucher-by{font-size:11px;color:var(--muted2);flex-shrink:0}
.vc-voucher-name{font-size:12px;font-weight:600;color:var(--text2);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:color var(--transition)}
.vc-time{font-size:11px;color:var(--muted2);display:flex;align-items:center;gap:4px;flex-shrink:0}

/* ═══════════════════════════════════════════════════════════════════════════
   LEADERBOARD
═══════════════════════════════════════════════════════════════════════════ */

/* Podium */
.lb-podium{
  display:flex;align-items:flex-end;justify-content:center;
  gap:12px;flex-wrap:wrap;padding:0 12px;
}
.lb-podium-item{
  display:flex;flex-direction:column;align-items:center;
  padding:14px 16px 16px;
  border-radius:14px;border:1px solid var(--border);
  background:var(--surface);
  cursor:pointer;transition:transform var(--transition),box-shadow var(--transition);
  min-width:100px;flex:1;max-width:160px;font-size:clamp(12px,2.4vw,16px);
}
.lb-podium-item:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,0.3)}

/* List rows */
.lb-row{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  cursor:pointer;
  transition:background var(--transition);
  font-size:clamp(13px,2.2vw,14px);
}
.lb-row:last-child{border-bottom:none}
.lb-row:hover{background:rgba(255,255,255,0.022)}
.lb-row-self{background:rgba(74,142,240,0.04)!important}

@media(max-width:480px){
  .lb-podium{gap:8px;padding:0 8px}
  .lb-podium-item{padding:12px 12px 14px;min-width:80px;gap:6px}
  .lb-row{gap:8px;padding:10px 10px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROFILE
═══════════════════════════════════════════════════════════════════════════ */
/* Profile glass card must not clip the badge ring */
.profile-hero-wrap{overflow:visible !important}

.profile-hero{
  /* Row: avatar-badge-wrap | info column */
  display:flex;flex-direction:row;align-items:center;gap:0;
  padding:0;overflow:visible;
}

/* Avatar sizes — fixed 88px matching profile.html template */
.prof-av,.prof-av-ph{
  width:88px;height:88px;
  border-radius:50%;object-fit:cover;
  border:2px solid var(--border2);
  box-shadow:0 0 0 4px rgba(74,142,240,0.1);
  flex-shrink:0;
}
.prof-av-ph{
  background:var(--blue-dim);display:flex;align-items:center;justify-content:center;
  font-size:32px;font-weight:800;color:var(--blue-light);
}
/* Info column sits right of the avatar wrap */
.prof-info{
  flex:1;min-width:0;
  padding:20px 20px 16px;
}
.prof-name{font-size:clamp(20px,4vw,26px);font-weight:800;letter-spacing:-0.01em;line-height:1.2}
.prof-handle{font-size:14px;color:var(--muted);display:flex;align-items:center;gap:5px;margin-top:3px}
.prof-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
/* Stats & actions below info — full-width row */
.prof-stats{
  display:flex;gap:clamp(16px,4vw,32px);
  padding:12px 24px 16px;
  border-top:1px solid var(--border);
}
.prof-stat{display:flex;flex-direction:column;align-items:center;gap:2px}
.prof-stat-n{font-size:clamp(18px,4vw,22px);font-weight:800;color:var(--blue-light)}
.prof-stat-l{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.07em}
.prof-actions{display:flex;gap:8px;flex-wrap:wrap;padding:0 24px 18px}

/* Mobile: stack vertically & centre */
@media(max-width:560px){
  .profile-hero{flex-direction:column;align-items:center;text-align:center;padding-bottom:4px}
  .av-badge-wrap{margin:24px auto 16px !important}
  .prof-info{padding:0 16px 12px;text-align:center}
  .prof-handle{justify-content:center}
  .prof-stats{justify-content:center;padding:12px 16px 14px}
  .prof-actions{justify-content:center;padding:0 16px 16px}
}

/* Tabs */
.tabs{display:flex;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab-btn{
  padding:12px 16px;font-size:13px;font-weight:600;
  color:var(--muted);cursor:pointer;
  border-bottom:2px solid transparent;transition:all var(--transition);
  white-space:nowrap;background:none;border-top:none;border-left:none;border-right:none;
  font-family:inherit;display:inline-flex;align-items:center;gap:6px;
}
.tab-btn.active{color:var(--blue-light);border-bottom-color:var(--blue)}
.tab-panel{display:none;padding:18px 0 40px}
.tab-panel.active{display:block}
.vouch-list{display:flex;flex-direction:column;gap:10px}
.mini-vouch{
  padding:14px 16px;border-radius:13px;
  background:var(--surface);border:1px solid var(--border);
  transition:border-color var(--transition);
}
.mini-vouch:hover{border-color:var(--border2)}
.mini-vouch-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;flex-wrap:wrap}
.mini-vouch-name{font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px}
.mini-vouch-note{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.55}
.mini-vouch-meta{font-size:11px;color:var(--muted2);margin-top:5px;display:flex;align-items:center;gap:6px}
.vouch-form-card{padding:22px;border-radius:16px;background:var(--surface);border:1px solid var(--border);margin-top:16px}
.vouch-form-card h3{font-size:15px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px}

/* ═══════════════════════════════════════════════════════════════════════════
   SETTINGS PAGE
═══════════════════════════════════════════════════════════════════════════ */
.settings-wrap{max-width:600px;margin:0 auto;padding:28px 0 60px}
.settings-section{
  background:var(--surface);border:1px solid var(--border);
  border-radius:18px;overflow:hidden;margin-bottom:16px;
}
.settings-header{
  padding:18px 22px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:12px;
}
.settings-header-icon{
  width:38px;height:38px;border-radius:10px;
  background:var(--surface2);border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  color:var(--blue-light);flex-shrink:0;
}
.settings-header-text h3{font-size:15px;font-weight:700}
.settings-header-text p{font-size:12px;color:var(--muted);margin-top:2px}
.settings-body{padding:20px 22px}
.settings-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;border-bottom:1px solid var(--border);gap:16px;flex-wrap:wrap;
}
.settings-row:last-child{border-bottom:none;padding-bottom:0}
.settings-row-info{}
.settings-row-label{font-size:14px;font-weight:600;display:flex;align-items:center;gap:7px}
.settings-row-label svg{color:var(--muted);opacity:0.8}
.settings-row-desc{font-size:12px;color:var(--muted);margin-top:3px}
.danger-zone{border-color:rgba(240,80,80,0.2)}
.danger-zone .settings-header{border-color:rgba(240,80,80,0.15)}
.danger-zone .settings-header-icon{background:var(--red-dim);border-color:rgba(240,80,80,0.2);color:var(--red)}

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN PAGE
═══════════════════════════════════════════════════════════════════════════ */
.admin-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:26px}
.admin-stat-card{
  padding:18px 20px;border-radius:14px;
  background:var(--surface);border:1px solid var(--border);
  display:flex;flex-direction:column;gap:5px;
}
.admin-stat-icon{color:var(--blue-light);opacity:0.8;margin-bottom:4px}
.admin-stat-n{font-size:26px;font-weight:800;color:var(--blue-light)}
.admin-stat-l{font-size:12px;color:var(--muted);font-weight:500}
.admin-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}
.admin-tab{
  padding:8px 16px;border-radius:99px;
  font-size:13px;font-weight:600;cursor:pointer;
  border:1px solid var(--border2);background:transparent;
  color:var(--muted);font-family:inherit;transition:all var(--transition);
  display:inline-flex;align-items:center;gap:6px;
}
.admin-tab.active{background:var(--blue-dim);border-color:rgba(74,142,240,0.35);color:var(--blue-light)}
.admin-tab:hover:not(.active){background:var(--surface2);color:var(--text)}

.data-table{width:100%;border-collapse:collapse}
.data-table th{
  padding:10px 14px;text-align:left;
  font-size:11px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:0.06em;
  border-bottom:1px solid var(--border);white-space:nowrap;
}
.data-table td{
  padding:12px 14px;font-size:13px;
  border-bottom:1px solid rgba(255,255,255,0.03);
  vertical-align:middle;
}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:rgba(255,255,255,0.016)}
.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border)}

/* ═══════════════════════════════════════════════════════════════════════════
   LOGIN MODAL
═══════════════════════════════════════════════════════════════════════════ */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.82);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  z-index:500;display:none;
  align-items:flex-end;justify-content:center;
  padding:0;
}
.modal-overlay.open{display:flex}
.modal{
  background:rgba(9,9,22,0.99);
  border:1px solid var(--border2);
  border-radius:28px 28px 0 0;
  padding:0;width:100%;max-width:440px;
  box-shadow:0 -30px 90px rgba(0,0,0,0.6),0 0 0 1px rgba(255,255,255,0.05) inset;
  animation:slideUp 0.28s cubic-bezier(0.34,1.1,0.64,1);
  overflow:hidden;
}
@keyframes slideUp{from{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-handle{width:40px;height:4px;background:rgba(255,255,255,0.12);border-radius:99px;margin:14px auto 0}

/* Brand strip */
.modal-brand{
  display:flex;align-items:center;gap:14px;
  padding:20px 24px 18px;
  border-bottom:1px solid var(--border);
}
.modal-brand-logo{width:40px;height:40px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 2px 12px rgba(74,142,240,0.4))}
.modal-brand-title{font-size:18px;font-weight:800;letter-spacing:-0.01em}
.modal-brand-sub{font-size:12px;color:var(--muted);margin-top:2px}

.modal-body{padding:20px 24px 28px;display:flex;flex-direction:column;gap:14px}

/* Big open button */
.login-code-box{
  padding:0;background:transparent;border:none;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:56px;
}
.code-link{
  width:100%;
  color:#fff;font-weight:700;font-size:15px;
  text-decoration:none;padding:15px 20px;
  background:linear-gradient(135deg,rgba(74,142,240,0.95),rgba(40,100,200,0.95));
  border:1px solid rgba(74,142,240,0.5);
  border-radius:14px;display:flex;align-items:center;justify-content:center;gap:9px;
  transition:all var(--transition);
  box-shadow:0 4px 24px rgba(74,142,240,0.3);
}
.code-link:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 6px 32px rgba(74,142,240,0.45)}

/* Steps row */
.login-steps-row{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:14px 16px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:13px;
  flex-wrap:wrap;
}
.login-step-mini{
  display:flex;align-items:center;gap:7px;
  font-size:12px;color:var(--muted);flex:1;min-width:60px;
}
.login-step-mini span{white-space:normal;overflow:visible;text-overflow:unset;line-height:1.4}
.login-step-num{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  background:var(--blue-dim2);border:1px solid rgba(74,142,240,0.3);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:var(--blue-light);
}
.poll-status{
  font-size:13px;color:var(--muted);
  display:flex;align-items:center;gap:9px;justify-content:center;
  padding:8px 12px;background:var(--surface);border:1px solid var(--border);border-radius:10px;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer{
  position:fixed;bottom:0;left:0;right:0;
  text-align:center;padding:10px;
  font-size:11px;color:rgba(255,255,255,0.1);
  letter-spacing:0.07em;text-transform:uppercase;
  pointer-events:none;z-index:1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════════════ */
@media(max-width:639px){
  .nav-links{display:none}
  .nav-menu-btn{display:flex}
  .avatar-name{display:none}

  .hero-ctas{flex-direction:column}
  .hero-ctas .btn{width:100%}
  .hero-logo-section{padding:32px 24px 24px}
  .hero-body{padding:22px 20px 0}

  .podium-wrap{gap:7px}
  .podium-item{padding:14px 10px;min-width:80px}
  .podium-av,.podium-av-ph{width:46px;height:46px}

  .data-table th:nth-child(4),
  .data-table td:nth-child(4){display:none}

  .modal{border-radius:22px 22px 0 0}
  .modal-header{padding:16px 20px 14px}
  .modal-body{padding:16px 20px 28px}

  .settings-header{padding:16px 18px}
  .settings-body{padding:16px 18px}
  .settings-row{flex-direction:column;align-items:flex-start;gap:10px}

  .admin-stats{grid-template-columns:repeat(2,1fr)}
}

@media(min-width:640px){
  .modal-overlay{align-items:center;padding:16px}
  .modal{border-radius:24px;max-width:440px}
  .modal-handle{display:none}

  .filter-bar{flex-direction:row;align-items:center}
}

@media(min-width:1024px){
  .container{padding:0 24px}
}

/* ── Admin grid id alias ──────────────────────────────────────────────── */
#admin-stat-row{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:12px;margin-bottom:26px;
}

/* ── btn-full util ───────────────────────────────────────────────────── */
.btn-full{display:flex;width:100%}

/* ═══════════════════════════════════════════════════════════════════════════
   ADD VOUCH MODAL
═══════════════════════════════════════════════════════════════════════════ */
.vouch-modal-card{
  background:rgba(9,9,24,0.99);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:24px;
  padding:28px;
  width:100%;max-width:490px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05) inset,
    0 40px 120px rgba(0,0,0,0.65),
    0 0 80px rgba(74,142,240,0.06);
  max-height:92dvh;overflow-y:auto;
  animation:fadeUp 0.22s cubic-bezier(0.34,1.2,0.64,1) both;
}
.vm-result-row{
  display:flex;align-items:center;gap:11px;
  padding:10px 13px;border-radius:11px;
  cursor:pointer;transition:background var(--transition);
  border:1px solid transparent;
}
.vm-result-row:hover{background:var(--surface);border-color:var(--border2)}
.vm-result-av{
  width:38px;height:38px;border-radius:50%;object-fit:cover;
  border:1px solid var(--border2);flex-shrink:0;
}
.vm-result-av-ph{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:var(--blue-dim);display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:800;color:var(--blue-light);border:1px solid var(--border2);
}

/* Type pills inside modal */
.vm-type-pills{display:flex;gap:7px;flex-wrap:wrap}
.vm-type-pill{
  padding:7px 15px;border-radius:99px;
  border:1px solid var(--border2);
  background:transparent;color:var(--muted);
  font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;
  transition:all var(--transition);
}
.vm-type-pill:hover{border-color:rgba(74,142,240,0.3);color:var(--text2)}
.vm-type-pill.active{background:var(--blue-dim2);border-color:rgba(74,142,240,0.4);color:var(--blue-light)}

/* Star rating buttons — color cascades to inner SVG via currentColor */
.vm-stars{display:flex;gap:4px}
.vm-star{
  background:none;border:none;cursor:pointer;
  color:rgba(255,255,255,0.18);
  transition:color var(--transition),transform var(--transition);
  padding:3px;font-family:inherit;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.vm-star svg,.vm-star i{color:inherit!important}
.vm-star.active{color:#f0c832}
.vm-star:hover{transform:scale(1.18);color:#f0c832!important}

/* Profile page rating stars */
.rating-star{
  background:none;border:none;cursor:pointer;
  color:rgba(255,255,255,0.18);
  transition:color var(--transition),transform var(--transition);
  padding:3px;display:flex;align-items:center;justify-content:center;
}
.rating-star svg,.rating-star i{color:inherit!important}
.rating-star.active{color:#f0c832}
.rating-star:hover{transform:scale(1.18);color:#f0c832!important}

/* ═══════════════════════════════════════════════════════════════════════════
   WALL OF SHAME
═══════════════════════════���═══════════════════════════════════════════════ */
.wall-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));
  gap:14px;padding-bottom:40px;
}
.wall-card{
  border-radius:18px;overflow:hidden;
  background:var(--surface);
  border:1px solid rgba(240,80,80,0.18);
  display:flex;flex-direction:column;gap:0;
  animation:fadeUp 0.38s ease both;
}
.wall-card-header{
  display:flex;align-items:center;gap:13px;
  padding:16px;
  background:linear-gradient(135deg,rgba(240,80,80,0.07),transparent);
  border-bottom:1px solid rgba(240,80,80,0.12);
}
.wall-scammer-av-wrap{position:relative;flex-shrink:0}
.wall-av{
  width:48px;height:48px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(240,80,80,0.35);
}
.wall-av-ph{
  width:48px;height:48px;border-radius:50%;flex-shrink:0;
  background:var(--red-dim);display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:800;color:var(--red);border:2px solid rgba(240,80,80,0.3);
}
.wall-danger-dot{
  position:absolute;bottom:-1px;right:-1px;
  width:14px;height:14px;border-radius:50%;
  background:var(--red);border:2px solid var(--surface);
}
.wall-id-info{flex:1;min-width:0}
.wall-name{font-size:15px;font-weight:800;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.wall-handle{font-size:12px;color:var(--muted);margin-top:1px}
.wall-region{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:4px;margin-top:2px}
.wall-note{
  padding:12px 16px;font-size:13px;color:var(--muted);
  font-style:italic;line-height:1.6;border-bottom:1px solid rgba(240,80,80,0.08);
}
.wall-card-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;flex-wrap:wrap;gap:8px;
}

/* ── Extra badges ─────────────────────────────────────────────────────── */
.badge-red{
  background:var(--red-dim);border:1px solid rgba(240,80,80,0.3);
  color:var(--red);font-size:11px;font-weight:700;
  padding:3px 8px;border-radius:6px;display:inline-flex;align-items:center;gap:4px;
}

/* ── Lucide icon alignment in buttons/links ──────────────────────────── */
a svg,button svg,span svg{vertical-align:middle}

/* ── Badge SVG icons ─────────────────────────────────────────────────── */
.badge-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--badge-colour,var(--border2));
  border-radius:7px;
  cursor:default;
  flex-shrink:0;
  transition:transform 0.15s ease,box-shadow 0.15s ease;
}
.badge-icon:hover{
  transform:scale(1.15);
  box-shadow:0 0 8px var(--badge-colour,var(--blue-glow));
}
.badge-icon svg,.badge-icon img{
  width:18px;height:18px;display:block;object-fit:contain;
}
.badge-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* ── Floating badge ring around avatar (Telegram style) ──────────────── */
.av-badge-wrap{
  position:relative;
  display:inline-block;
  flex-shrink:0;
}
/* Badge slots orbit the avatar at cardinal + diagonal positions.
   Up to 8 slots, shown via nth-child so only as many as granted appear. */
.av-badge-ring{
  position:absolute;
  inset:0;
  pointer-events:none;
}
/* Gentle float keyframe */
@keyframes badge-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
@keyframes badge-float-x{
  0%,100%{transform:translateY(-50%) translateX(0)}
  50%{transform:translateY(-50%) translateX(-2px)}
}
@keyframes badge-float-cx{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-3px)}
}

.av-badge-orbit{
  position:absolute;
  /* 36px bubble so PNG icons are clearly visible */
  width:36px;height:36px;
  background:var(--bg2);
  border:2px solid var(--border2);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,0.65);
  transition:box-shadow 0.18s ease,filter 0.18s ease;
  pointer-events:auto;
  cursor:default;
  animation:badge-float 3s ease-in-out infinite;
  z-index:4;
}
/* Stagger float timing per slot */
.av-badge-orbit:nth-child(1){animation-delay:0s}
.av-badge-orbit:nth-child(2){animation-delay:.4s}
.av-badge-orbit:nth-child(3){animation-delay:.8s}
.av-badge-orbit:nth-child(4){animation-delay:1.2s}
.av-badge-orbit:nth-child(5){animation-delay:1.6s}
.av-badge-orbit:nth-child(6){animation-delay:2.0s}
.av-badge-orbit:nth-child(7){animation-delay:2.4s}
.av-badge-orbit:nth-child(8){animation-delay:2.8s}

.av-badge-orbit:hover{
  filter:brightness(1.35);
  box-shadow:0 6px 22px rgba(0,0,0,0.75);
  z-index:6;
}
.av-badge-orbit img,.av-badge-orbit svg{
  /* 22px icon so the art is clear inside the 36px bubble */
  width:22px;height:22px;display:block;object-fit:contain;
}
/* Positions: orbit centre 20px outside the 88px avatar edge (half 36px = 18px, +2px gap) */
.av-badge-orbit:nth-child(1){top:-20px;left:50%;transform:translateX(-50%);animation-name:badge-float-cx}
.av-badge-orbit:nth-child(2){top:-12px;right:-12px}
.av-badge-orbit:nth-child(3){top:50%;right:-20px;transform:translateY(-50%);animation-name:badge-float-x}
.av-badge-orbit:nth-child(4){bottom:-12px;right:-12px}
.av-badge-orbit:nth-child(5){bottom:-20px;left:50%;transform:translateX(-50%);animation-name:badge-float-cx}
.av-badge-orbit:nth-child(6){bottom:-12px;left:-12px}
.av-badge-orbit:nth-child(7){top:50%;left:-20px;transform:translateY(-50%);animation-name:badge-float-x}
.av-badge-orbit:nth-child(8){top:-12px;left:-12px}

/* Tooltip via title attribute (native) */

/* ── Premium rainbow name ────────────────────────────────────────────── */
/* Use background-clip text for a true shimmer effect */
@keyframes rainbow-shift{
  0%   {background-position:0% 50%}
  100% {background-position:200% 50%}
}
.rainbow-name{
  background:linear-gradient(90deg,
    #f05050 0%,#f0a050 16%,#f5c842 33%,#34d171 50%,
    #4a8ef0 66%,#9b60f0 83%,#f05050 100%
  );
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:rainbow-shift 3s linear infinite;
  font-weight:700;
  display:inline-block; /* required for background-clip on inline elements */
}

/* ── Delete account modal (redesigned centred card) ─────────────────── */
.delete-modal-card{
  background:rgba(12,8,18,0.99);
  border:1px solid rgba(240,80,80,0.22);
  border-radius:22px;
  padding:32px 28px 28px;
  width:100%;max-width:420px;
  box-shadow:0 0 0 1px rgba(240,80,80,0.07) inset,0 40px 100px rgba(0,0,0,0.7);
  animation:fadeUp 0.22s ease both;
  text-align:center;
}
.delete-modal-icon{
  width:64px;height:64px;border-radius:50%;
  background:var(--red-dim);border:2px solid rgba(240,80,80,0.3);
  display:flex;align-items:center;justify-content:center;
  color:var(--red);margin:0 auto 20px;
}
.delete-modal-title{font-size:20px;font-weight:800;color:var(--text);margin-bottom:8px}
.delete-modal-body{font-size:13px;color:var(--muted);line-height:1.65;max-width:320px;margin:0 auto 20px}
.delete-modal-warning{
  background:var(--red-dim);border:1px solid rgba(240,80,80,0.2);
  border-radius:12px;padding:12px 14px;margin-bottom:22px;
  font-size:12px;color:var(--red);display:flex;align-items:flex-start;gap:9px;text-align:left;
}
.delete-modal-actions{display:flex;gap:10px}
.delete-modal-actions .btn{flex:1;justify-content:center}

/* ── Admin premium/badge user search rows ────────────────���───────────── */
.pb-result-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  cursor:pointer;
  transition:background 0.12s;
  border-bottom:1px solid var(--border);
}
.pb-result-row:last-child{border-bottom:none}
.pb-result-row:hover{background:var(--surface2)}

/* ── Mobile performance: disable heavy animations on small screens ────── */
@media (max-width: 640px){
  body::after{display:none}
  .orb{animation:none !important;display:none}
  .orb1,.orb2,.orb3{display:none}
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:0.1s !important}
  /* keep rainbow, spinner & badge float alive */
  .rainbow-name{animation:rainbow-shift 3s linear infinite !important;animation-iteration-count:infinite !important;animation-duration:3s !important}
  .spinner,.spinner-sm{animation:spin 0.8s linear infinite !important;animation-iteration-count:infinite !important;animation-duration:0.8s !important}
  .av-badge-orbit{animation:badge-float 4s ease-in-out infinite !important;animation-iteration-count:infinite !important;animation-duration:4s !important}
  .av-badge-orbit:nth-child(1),.av-badge-orbit:nth-child(5){animation-name:badge-float-cx !important}
  .av-badge-orbit:nth-child(3),.av-badge-orbit:nth-child(7){animation-name:badge-float-x !important}
}

/* ── Redeem page ─────────────────────────────────────────────────────── */
.redeem-wrap{
  max-width:480px;margin:0 auto;padding:0 16px;
}
.redeem-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:32px;
}
.redeem-icon{
  width:56px;height:56px;border-radius:16px;
  background:var(--blue-dim);border:1px solid var(--blue-dim2);
  display:flex;align-items:center;justify-content:center;
  color:var(--blue);margin:0 auto 20px;
}
.redeem-title{font-size:22px;font-weight:800;text-align:center;margin-bottom:6px}
.redeem-sub{font-size:14px;color:var(--muted);text-align:center;margin-bottom:24px}
.redeem-input-row{display:flex;gap:10px;margin-bottom:16px}
.redeem-input-row input{flex:1;font-size:15px;letter-spacing:0.07em;text-transform:uppercase}
.redeem-result{
  padding:14px 16px;border-radius:var(--radius-sm);
  font-size:14px;display:flex;align-items:center;gap:10px;
  display:none;
}
.redeem-result.success{background:var(--green-dim);border:1px solid rgba(52,209,113,0.3);color:var(--green)}
.redeem-result.error  {background:var(--red-dim);border:1px solid rgba(240,80,80,0.3);color:var(--red)}

/* ── Badge equip toggle in settings ─────────────────────────────────── */
.badge-equip-row{
  display:flex;align-items:center;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--border);
}
.badge-equip-row:last-child{border-bottom:none}
.badge-equip-info{flex:1;min-width:0}
.badge-equip-name{font-size:14px;font-weight:600}
.badge-equip-desc{font-size:12px;color:var(--muted);margin-top:2px}
.badge-toggle{
  position:relative;width:40px;height:22px;flex-shrink:0;
}
.badge-toggle input{opacity:0;width:0;height:0;position:absolute}
.badge-toggle-slider{
  position:absolute;inset:0;border-radius:99px;
  background:var(--surface3);border:1px solid var(--border2);
  cursor:pointer;transition:background 0.2s;
}
.badge-toggle-slider::after{
  content:'';position:absolute;width:16px;height:16px;border-radius:50%;
  background:#fff;top:2px;left:2px;transition:transform 0.2s;
}
.badge-toggle input:checked ~ .badge-toggle-slider{background:var(--blue);border-color:var(--blue)}
.badge-toggle input:checked ~ .badge-toggle-slider::after{transform:translateX(18px)}