/* ═══════════════════════════════════════════════════
   Envite & Touche v2.2 — Neon Dark (WordPress-safe)
   ═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&family=DM+Mono:wght@500&family=Syne:wght@700;900&display=swap');

/* ── Variables ────────────────────────────────────── */
.et-wrap {
  --y:   #c8ff00;
  --y2:  #a8e000;
  --bg:  #111210;
  --s1:  #161814;
  --s2:  #1c1e19;
  --s3:  #23261f;
  --bd:  rgba(255,255,255,.08);
  --bd2: rgba(200,255,0,.22);
  --tx:  #f0f0eb;
  --tm:  #72786a;
  --tl:  #a8b09a;
  --red: #ff5252;
  --grn: #3fffaa;
  --r:   18px;
  --r2:  24px;

  /* Reset scoped to our wrapper only */
  box-sizing: border-box;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tx);
  background: var(--bg);
  border-radius: 20px;
  overflow: hidden;
  max-width: 1100px;
  margin: 24px auto;
}

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

/* ── Layout: sidebar + main ───────────────────────── */
.et-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  min-height: 560px;
}

/* ── Sidebar ─────────────────────────────────────── */
.et-sidebar {
  background: var(--s1);
  border-right: 1px solid var(--bd);
  padding: 24px 14px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.et-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 6px;
}
.et-logo-mark {
  width: 30px; height: 30px;
  background: var(--y);
  border-radius: 9px;
  display: grid; place-items: center;
  font-size: 14px;
  flex-shrink: 0;
}
.et-logo-name {
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--tx);
  line-height: 1.1;
}
.et-logo-name em {
  font-style: normal;
  color: var(--y);
}

.et-user {
  background: var(--s2);
  border: 1px solid var(--bd);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.et-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--y2), #5aff80);
  display: grid; place-items: center;
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 900;
  color: #0a0e00;
  flex-shrink: 0;
}
.et-user-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--tx);
  line-height: 1.2;
}
.et-user-code {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--tm);
  margin-top: 2px;
}

.et-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.et-nav-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 12px;
  color: var(--tl);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  text-decoration: none;
  transition: background .13s, color .13s;
}
.et-nav-btn:hover { background: var(--s2); color: var(--tx); }
.et-nav-btn.active { background: var(--y); color: #080e00; font-weight: 700; }
.et-nav-btn.active:hover { background: var(--y); }
.et-nav-ic { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; line-height: 1; }

.et-sb-foot {
  padding: 8px 10px;
  font-size: 11px;
  color: var(--tm);
  display: flex;
  align-items: center;
  gap: 8px;
}
.et-dot-y {
  width: 14px; height: 8px; border-radius: 99px;
  background: var(--y); position: relative; flex-shrink: 0;
}
.et-dot-y::after {
  content: ''; position: absolute;
  right: 1px; top: 1px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #0a0e00;
}

/* ── Main ─────────────────────────────────────────── */
.et-main {
  padding: 22px;
  background: var(--bg);
  overflow: hidden;
}

/* ── Top bar ─────────────────────────────────────── */
.et-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 12px;
}
.et-topbar h1 {
  font-family: 'Syne', sans-serif;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--tx);
}
.et-topbar-r { display: flex; align-items: center; gap: 8px; }
.et-search-pill {
  display: flex; align-items: center; gap: 6px;
  background: var(--s2); border: 1px solid var(--bd);
  border-radius: 10px; padding: 7px 12px;
  font-size: 12px; color: var(--tm);
}
.et-badge-y {
  background: var(--y); color: #080e00;
  font-weight: 700; font-size: 11px;
  padding: 5px 12px; border-radius: 9px;
  white-space: nowrap;
}

/* ── Bento grid ──────────────────────────────────── */
.et-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* ── Base card ───────────────────────────────────── */
.et-card {
  background: var(--s2);
  border: 1px solid var(--bd);
  border-radius: var(--r2);
  padding: 18px;
  position: relative;
  overflow: hidden;
  transition: border-color .18s;
}
.et-card:hover { border-color: rgba(200,255,0,.2); }

.et-lbl {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--tm); margin-bottom: 8px;
  display: block;
}

/* ── Card: Balans (yellow) ───────────────────────── */
.et-card-money {
  background: var(--y);
  border-color: transparent;
}
.et-card-money:hover { border-color: transparent; }
.et-card-money .et-lbl { color: rgba(0,15,0,.5); }
.et-money-amt {
  font-family: 'Syne', sans-serif;
  font-size: 38px; font-weight: 900;
  line-height: 1; letter-spacing: -.04em;
  color: #060e00;
}
.et-money-cur { font-size: 14px; font-weight: 700; opacity: .55; margin-left: 2px; }
.et-money-note { font-size: 11px; color: rgba(0,15,0,.5); margin-top: 5px; }
.et-card-money .et-more {
  position: absolute; top: 14px; right: 14px;
  background: rgba(0,0,0,.1); border: none; border-radius: 7px;
  padding: 4px 9px; font-size: 10px; font-weight: 700;
  color: #060e00; cursor: pointer;
  font-family: 'DM Sans', sans-serif;
}

/* ── Card: Envite ────────────────────────────────── */
.et-big { font-family: 'Syne', sans-serif; font-size: 46px; font-weight: 900; line-height: 1; letter-spacing: -.04em; color: var(--tx); }
.et-sub { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--tl); margin-top: 7px; flex-wrap: wrap; }
.et-chip { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 10px; font-weight: 700; }
.et-chip-g { background: rgba(63,255,170,.1); color: var(--grn); }
.et-chip-y { background: rgba(200,255,0,.12); color: var(--y); }
.et-chip-r { background: rgba(255,82,82,.1); color: var(--red); }

/* ── Card: Progress ──────────────────────────────── */
.et-prog-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; gap: 8px; }
.et-prog-link { font-size: 10px; color: var(--y); text-decoration: none; font-weight: 700; white-space: nowrap; }
.et-cal { display: flex; gap: 5px; margin-bottom: 12px; }
.et-cal-d {
  flex: 1; text-align: center; padding: 6px 3px;
  border-radius: 9px; font-size: 10px; font-weight: 700;
  color: var(--tm); background: var(--s3); line-height: 1.4;
}
.et-cal-d.now { background: var(--y); color: #060e00; }
.et-pct { font-family: 'Syne', sans-serif; font-size: 34px; font-weight: 900; letter-spacing: -.04em; color: var(--tx); line-height: 1; }
.et-pct-sub { font-size: 11px; color: var(--grn); margin-top: 4px; }

/* ── Card: Lyen (span 2) ─────────────────────────── */
.et-span2 { grid-column: span 2; }
.et-link-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.et-link-inp {
  flex: 1; min-width: 0;
  background: var(--s3) !important;
  border: 1px solid var(--bd) !important;
  border-radius: 11px;
  color: var(--tl) !important;
  padding: 10px 12px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  outline: none;
  transition: border-color .13s;
  width: 100%;
}
.et-link-inp:focus { border-color: var(--y) !important; }
.et-code-row { font-size: 11px; color: var(--tm); }
.et-code-val { font-family: 'DM Mono', monospace; color: var(--y); margin-left: 4px; }

/* ── Buttons ─────────────────────────────────────── */
.et-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 9px 16px; border-radius: 11px; border: none;
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700;
  cursor: pointer; text-decoration: none !important;
  transition: all .13s; white-space: nowrap; line-height: 1;
}
.et-btn-y { background: var(--y); color: #060e00 !important; }
.et-btn-y:hover { filter: brightness(1.08); transform: translateY(-1px); }
.et-btn-g { background: var(--s3); color: var(--tl) !important; border: 1px solid var(--bd); }
.et-btn-g:hover { border-color: rgba(200,255,0,.3); color: var(--tx) !important; }
.et-btn-sm { padding: 7px 12px; font-size: 11px; border-radius: 9px; }

/* ── Card: Nivo (span 3) ─────────────────────────── */
.et-span3 { grid-column: span 3; }
.et-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 6px; }
.et-lvl {
  background: var(--s3); border: 1px solid var(--bd);
  border-radius: var(--r); padding: 15px; position: relative; overflow: hidden;
}
.et-lvl::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--bd); }
.et-lvl.unlocked { border-color: rgba(200,255,0,.3); }
.et-lvl.unlocked::after { background: var(--y); }
.et-lvl.started { border-color: rgba(63,255,170,.2); }
.et-lvl.started::after { background: var(--grn); }
.et-lvl.locked { opacity: .72; }
.et-lvl-ico { font-size: 18px; margin-bottom: 9px; display: block; }
.et-lvl-title { font-size: 12px; font-weight: 700; color: var(--tx); margin-bottom: 2px; }
.et-lvl-range { font-size: 10px; color: var(--tm); margin-bottom: 7px; }
.et-lvl-amt {
  font-family: 'Syne', sans-serif; font-size: 20px; font-weight: 900;
  color: var(--y); letter-spacing: -.03em; line-height: 1; margin-bottom: 9px;
}
.et-lvl-amt span { font-size: 10px; opacity: .65; margin-left: 2px; }
.et-lvl-bar { height: 4px; border-radius: 99px; background: var(--bd); overflow: hidden; margin-bottom: 5px; }
.et-lvl-bar i { display: block; height: 100%; border-radius: 99px; background: var(--y); transition: width .5s ease; }
.et-lvl.started .et-lvl-bar i { background: var(--grn); }
.et-lvl-cnt { font-size: 10px; color: var(--tm); margin-bottom: 9px; }
.et-lvl-tag {
  display: inline-block; padding: 3px 9px; border-radius: 99px;
  font-size: 10px; font-weight: 700;
  background: rgba(200,255,0,.09); color: var(--y);
}
.et-lvl.locked .et-lvl-tag { background: rgba(255,255,255,.05); color: var(--tm); }
.et-lvl.started .et-lvl-tag { background: rgba(63,255,170,.09); color: var(--grn); }
.et-lvl .et-btn { width: 100%; margin-top: 9px; font-size: 11px; padding: 8px; border-radius: 8px; }

/* ── Card: Table ─────────────────────────────────── */
.et-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.et-table th {
  text-align: left; padding: 7px 10px;
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--tm);
  border-bottom: 1px solid var(--bd);
}
.et-table td { padding: 10px; border-bottom: 1px solid var(--bd); color: var(--tl); }
.et-table tr:last-child td { border-bottom: none; }
.et-table tr:hover td { background: rgba(255,255,255,.02); }
.et-table td:first-child { color: var(--tx); font-weight: 600; }
.et-empty-cell { text-align: center; padding: 30px 10px !important; color: var(--tm) !important; font-size: 13px !important; }

.et-status {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 99px;
  font-size: 10px; font-weight: 700;
}
.et-status::before { content: '●'; font-size: 6px; }
.et-s-valid     { background: rgba(63,255,170,.1);  color: var(--grn); }
.et-s-pending   { background: rgba(200,255,0,.1);   color: var(--y); }
.et-s-rejected  { background: rgba(255,82,82,.1);   color: var(--red); }
.et-s-suspicious{ background: rgba(255,82,82,.1);   color: var(--red); }
.et-s-unlinked  { background: rgba(255,255,255,.06);color: var(--tm); }

/* ── Modal ───────────────────────────────────────── */
.et-modal {
  display: none; position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,.78); backdrop-filter: blur(8px);
  padding: 20px; overflow-y: auto;
  align-items: center; justify-content: center;
}
.et-modal-box {
  max-width: 420px; width: 100%;
  background: #1a1d17; border: 1px solid var(--bd2);
  border-radius: 22px; padding: 26px; position: relative;
  box-shadow: 0 40px 100px rgba(0,0,0,.9);
  margin: auto;
}
.et-modal-box h3 {
  font-family: 'Syne', sans-serif; font-size: 18px; font-weight: 900;
  letter-spacing: -.03em; margin-bottom: 18px; color: var(--tx);
}
.et-modal-box label {
  display: block; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--tm); margin: 12px 0 4px;
}
.et-modal-box input,
.et-modal-box select {
  width: 100%; background: var(--s3) !important;
  border: 1px solid var(--bd) !important; border-radius: 11px;
  color: var(--tx) !important; padding: 11px 13px;
  font-family: 'DM Sans', sans-serif; font-size: 13px; outline: none;
  transition: border-color .13s;
}
.et-modal-box input:focus,
.et-modal-box select:focus { border-color: var(--y) !important; }
.et-modal-close {
  position: absolute; right: 14px; top: 12px;
  background: var(--s3); border: 1px solid var(--bd);
  border-radius: 50%; width: 30px; height: 30px;
  display: grid; place-items: center;
  color: var(--tm); font-size: 16px; cursor: pointer;
  font-family: monospace; line-height: 1;
  transition: all .13s;
}
.et-modal-close:hover { background: rgba(255,82,82,.15); color: var(--red); }

/* ── Toast ───────────────────────────────────────── */
.et-toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(14px);
  background: var(--y); color: #060e00;
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 13px;
  padding: 9px 20px; border-radius: 99px; z-index: 999999;
  opacity: 0; pointer-events: none;
  transition: all .25s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 6px 20px rgba(200,255,0,.2);
  white-space: nowrap;
}
.et-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Guest page ──────────────────────────────────── */
.et-guest {
  padding: 32px;
  background: var(--bg);
}
.et-g-hero {
  background: var(--s2); border: 1px solid var(--bd);
  border-radius: var(--r2); padding: 32px; margin-bottom: 12px;
  position: relative; overflow: hidden;
}
.et-g-hero::before {
  content: ''; position: absolute; top: -50px; right: -50px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(200,255,0,.15), transparent 70%);
  pointer-events: none;
}
.et-kicker {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 99px;
  background: rgba(200,255,0,.09); border: 1px solid rgba(200,255,0,.18);
  color: var(--y); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 18px;
}
.et-g-hero h2 {
  font-family: 'Syne', sans-serif; font-size: 36px; font-weight: 900;
  letter-spacing: -.04em; line-height: 1.05; margin-bottom: 10px; color: var(--tx);
}
.et-g-hero h2 span { color: var(--y); }
.et-g-sub { font-size: 14px; color: var(--tl); max-width: 480px; margin-bottom: 26px; line-height: 1.6; }
.et-g-sub strong { color: var(--tx); }
.et-steps { display: flex; flex-direction: column; gap: 11px; margin-bottom: 26px; }
.et-step { display: flex; align-items: center; gap: 12px; }
.et-step-n {
  width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0;
  background: var(--y); color: #060e00;
  font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 900;
  display: grid; place-items: center;
}
.et-step strong { display: block; font-size: 13px; font-weight: 700; color: var(--tx); }
.et-step span   { display: block; font-size: 11px; color: var(--tm); margin-top: 1px; }
.et-g-cta { display: flex; gap: 9px; flex-wrap: wrap; }
.et-g-cta .et-btn { padding: 12px 22px; font-size: 13px; }

.et-g-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.et-g-card {
  background: var(--s2); border: 1px solid var(--bd);
  border-radius: var(--r2); padding: 22px;
}
.et-g-card h3 {
  font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 900;
  color: var(--tx); margin-bottom: 14px;
}
.et-lvl-rows { display: flex; flex-direction: column; gap: 8px; }
.et-lvl-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--s3); border: 1px solid var(--bd);
  border-radius: 12px; padding: 10px 13px;
}
.et-lvl-row-l { font-size: 12px; font-weight: 600; color: var(--tx); }
.et-lvl-row-l small { display: block; font-size: 10px; color: var(--tm); font-weight: 400; margin-top: 1px; }
.et-lvl-row-r { font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 900; color: var(--y); }
.et-trust { display: flex; flex-direction: column; gap: 11px; }
.et-trust-r { display: flex; align-items: flex-start; gap: 11px; }
.et-trust-r > span { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.et-trust-r strong { display: block; font-size: 12px; font-weight: 700; color: var(--tx); }
.et-trust-r small  { display: block; font-size: 11px; color: var(--tm); margin-top: 1px; }

/* ── Admin styles (keep WP-friendly) ─────────────── */
.etouche-admin-blue .etouche-admin-hero{background:linear-gradient(135deg,#0d180d,#1a3d1a);padding:22px;border-radius:16px;margin:14px 0;box-shadow:0 12px 30px rgba(0,0,0,.25);border:1px solid rgba(200,255,0,.18)}
.etouche-admin-blue .etouche-admin-hero h1{color:#f5f5f0;margin:0 0 4px}
.etouche-admin-blue .etouche-admin-hero p{color:#90b890;max-width:680px;font-size:13px}
.etouche-admin-blue code{background:rgba(200,255,0,.14);color:#c8ff00;border-radius:5px;padding:2px 7px;font-size:12px}
.etouche-admin .etouche-stats{max-width:880px;margin:16px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:10px}
.etouche-admin .etouche-stats>div{background:#fff;border:1px solid #dde8f0;border-radius:12px;padding:14px}
.etouche-admin .etouche-stats span{color:#5a7faa;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:3px}
.etouche-admin .etouche-stats b{color:#0c2040;font-size:24px;font-weight:900;display:block}
.etouche-admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:10px;margin:16px 0}
.etouche-admin-grid a{display:block;text-decoration:none;background:#fff;border:1px solid #dde8f0;border-radius:12px;padding:16px;font-weight:800;color:#0c3a82;font-size:13px;box-shadow:0 3px 12px rgba(0,50,160,.05);transition:box-shadow .13s,border-color .13s}
.etouche-admin-grid a:hover{border-color:#3b82f6;box-shadow:0 5px 20px rgba(59,130,246,.12)}
.etouche-admin-form{display:flex;gap:7px;flex-wrap:wrap;background:#fff;padding:12px;margin:12px 0;border-radius:11px;border:1px solid #dde8f0}
.etouche-admin-form input{min-width:120px}
.wp-admin #toplevel_page_envite-touche .wp-menu-image::before{color:#c8ff00!important}
.wrap .widefat{margin-top:12px;border-radius:9px;overflow:hidden}

/* ── Animations ──────────────────────────────────── */
@keyframes etUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.et-card{animation:etUp .38s ease both}
.et-card:nth-child(2){animation-delay:.06s}
.et-card:nth-child(3){animation-delay:.11s}
.et-card:nth-child(4){animation-delay:.16s}
.et-card:nth-child(5){animation-delay:.21s}
.et-card:nth-child(6){animation-delay:.26s}

/* ── Responsive ──────────────────────────────────── */
@media(max-width:860px){
  .et-layout{grid-template-columns:1fr}
  .et-sidebar{display:none}
  .et-grid{grid-template-columns:1fr 1fr}
  .et-span2,.et-span3{grid-column:span 2}
}
@media(max-width:560px){
  .et-wrap{border-radius:0;margin:0}
  .et-main{padding:14px}
  .et-grid{grid-template-columns:1fr}
  .et-span2,.et-span3{grid-column:span 1}
  .et-big{font-size:36px}
  .et-money-amt{font-size:30px}
  .et-g-hero h2{font-size:26px}
  .et-g-cards{grid-template-columns:1fr}
  .et-g-cta .et-btn{width:100%}
  .et-guest{padding:16px}
  .et-g-hero{padding:20px}
  .et-levels{grid-template-columns:1fr 1fr}
}