/* =============================
   SLPI Admin Panel — admin.css
   ============================= */

:root {
  --bg:        #070d1a;
  --bg2:       #0d1627;
  --surface:   rgba(255,255,255,0.04);
  --surface2:  rgba(255,255,255,0.07);
  --border:    rgba(255,255,255,0.08);
  --text:      #94a3b8;
  --text-w:    #e2e8f0;
  --em:        #10b981;
  --em-l:      #34d399;
  --cyan:      #06b6d4;
  --blue:      #3b82f6;
  --red:       #ef4444;
  --amber:     #f59e0b;
  --purple:    #8b5cf6;
  --r:         1rem;
  --r-sm:      0.6rem;
  --sh-em:     0 16px 48px rgba(16,185,129,0.18);
  --tr:        0.28s ease;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh}
h1,h2,h3,h4{font-family:'Syne',sans-serif;color:var(--text-w);line-height:1.2}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button,input,select,textarea{font-family:inherit}

/* ── LAYOUT ── */
.admin-layout{display:grid;grid-template-columns:260px 1fr;min-height:100vh}

/* ── SIDEBAR ── */
.admin-sidebar{
  background:var(--bg2);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.sidebar-logo{
  padding:1.5rem 1.25rem 1rem;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:.75rem;
}
.sidebar-logo .logo-icon{
  width:2.4rem;height:2.4rem;border-radius:.5rem;
  display:flex;align-items:center;justify-content:center;
  font-family:'Syne',sans-serif;font-size:.7rem;font-weight:800;color:#fff;
  flex-shrink:0;
}
.logo-icon--em  {background:linear-gradient(135deg,var(--em),var(--cyan));}
.logo-icon--blue{background:linear-gradient(135deg,var(--blue),var(--purple));}
.logo-icon--gold{background:linear-gradient(135deg,var(--amber),#f97316);}

.sidebar-logo-text h3{font-size:.95rem;color:var(--text-w);}
.sidebar-logo-text p{font-size:.7rem;color:var(--text);margin-top:.1rem;}

.sidebar-nav{flex:1;padding:1rem .75rem;}
.nav-section-label{
  font-family:'Syne',sans-serif;font-size:.62rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.15em;color:var(--text);
  padding:.5rem .6rem .25rem;margin-top:.5rem;
}
.sidebar-link{
  display:flex;align-items:center;gap:.75rem;
  padding:.65rem .75rem;border-radius:var(--r-sm);
  color:var(--text);font-size:.875rem;font-weight:500;
  transition:background var(--tr),color var(--tr);cursor:pointer;
  margin-bottom:.15rem;border:none;background:none;width:100%;text-align:left;
}
.sidebar-link svg{width:1.1rem;height:1.1rem;flex-shrink:0;opacity:.7}
.sidebar-link:hover{background:var(--surface2);color:var(--text-w);}
.sidebar-link.active{background:rgba(16,185,129,.12);color:var(--em);border:1px solid rgba(16,185,129,.18);}
.sidebar-link.active svg{opacity:1}

.sidebar-link--blue.active{background:rgba(59,130,246,.12);color:var(--blue);border-color:rgba(59,130,246,.2);}
.sidebar-link--gold.active{background:rgba(245,158,11,.1);color:var(--amber);border-color:rgba(245,158,11,.18);}
.sidebar-link--purple.active{background:rgba(139,92,246,.12);color:var(--purple);border-color:rgba(139,92,246,.2);}

.sidebar-footer{
  padding:1rem .75rem 1.25rem;
  border-top:1px solid var(--border);
}
.sidebar-user{display:flex;align-items:center;gap:.65rem;margin-bottom:.75rem;}
.sidebar-avatar{
  width:2rem;height:2rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Syne',sans-serif;font-size:.7rem;font-weight:800;color:#fff;flex-shrink:0;
}
.sidebar-user-info p:first-child{font-size:.8rem;font-weight:600;color:var(--text-w);}
.sidebar-user-info p:last-child{font-size:.7rem;color:var(--text);}
.btn-logout{
  width:100%;display:flex;align-items:center;gap:.5rem;justify-content:center;
  padding:.55rem;border-radius:var(--r-sm);
  background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.18);
  color:#fca5a5;font-size:.8rem;font-weight:600;cursor:pointer;
  transition:background var(--tr);
}
.btn-logout:hover{background:rgba(239,68,68,.18);}
.btn-logout svg{width:.9rem;height:.9rem}

/* ── TOPBAR ── */
.admin-main{display:flex;flex-direction:column;min-height:100vh;}
.admin-topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(7,13,26,.85);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  padding:.75rem 2rem;
  display:flex;align-items:center;justify-content:space-between;
}
.topbar-title{font-size:1rem;font-weight:700;color:var(--text-w);}
.topbar-right{display:flex;align-items:center;gap:.75rem;}
.topbar-badge{
  font-family:'Syne',sans-serif;font-size:.65rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
  padding:.25rem .7rem;border-radius:2rem;
}
.badge-em  {background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.25);color:var(--em);}
.badge-blue{background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.25);color:var(--blue);}
.badge-gold{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.2);color:var(--amber);}
.badge-purple{background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.25);color:var(--purple);}

/* ── CONTENT ── */
.admin-content{flex:1;padding:2rem;}
.page-section{display:none;}
.page-section.active{display:block;}

/* ── STAT CARDS ── */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:2rem;}
.stat-tile{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:1.25rem;
  display:flex;align-items:center;gap:1rem;
  transition:border-color var(--tr),transform var(--tr);
}
.stat-tile:hover{border-color:var(--border);transform:translateY(-3px);}
.stat-tile-icon{
  width:3rem;height:3rem;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;
}
.stat-tile-icon--em    {background:rgba(16,185,129,.12);}
.stat-tile-icon--blue  {background:rgba(59,130,246,.12);}
.stat-tile-icon--amber {background:rgba(245,158,11,.1);}
.stat-tile-icon--red   {background:rgba(239,68,68,.1);}
.stat-tile-icon--purple{background:rgba(139,92,246,.12);}
.stat-tile-val{font-family:'Syne',sans-serif;font-size:1.6rem;font-weight:900;color:var(--text-w);line-height:1;}
.stat-tile-lbl{font-size:.75rem;color:var(--text);margin-top:.2rem;}

/* ── SECTION HEADER ── */
.section-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1.5rem;flex-wrap:wrap;gap:.75rem;
}
.section-header h2{font-size:1.3rem;}
.btn-add{
  display:flex;align-items:center;gap:.45rem;
  padding:.6rem 1.1rem;border-radius:2rem;
  background:var(--em);color:#fff;
  font-family:'Syne',sans-serif;font-weight:700;font-size:.85rem;
  border:none;cursor:pointer;
  transition:background var(--tr),transform var(--tr),box-shadow var(--tr);
}
.btn-add:hover{background:var(--em-l);transform:translateY(-2px);box-shadow:0 6px 20px rgba(16,185,129,.3);}
.btn-add svg{width:1rem;height:1rem}

.btn-add--blue{background:var(--blue);}
.btn-add--blue:hover{background:#60a5fa;box-shadow:0 6px 20px rgba(59,130,246,.3);}

/* ── TABLE ── */
.table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:2rem;}
.data-table{width:100%;border-collapse:collapse;}
.data-table th{
  background:rgba(255,255,255,.03);
  font-family:'Syne',sans-serif;font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:var(--text);
  padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.data-table td{padding:.8rem 1rem;border-bottom:1px solid rgba(255,255,255,.04);font-size:.875rem;vertical-align:middle;}
.data-table tr:last-child td{border-bottom:none;}
.data-table tr:hover td{background:var(--surface2);}
.data-table .empty-row td{text-align:center;color:var(--text);padding:2rem;font-style:italic;}
.enroll-name-link{
  color:var(--text-w);cursor:pointer;text-decoration:underline;
  text-decoration-color:transparent;transition:text-decoration-color var(--tr),color var(--tr);
}
.enroll-name-link:hover{color:var(--purple);text-decoration-color:currentColor;}

/* ── PILL TAGS ── */
.pill{
  display:inline-block;font-family:'Syne',sans-serif;
  font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  padding:.2rem .6rem;border-radius:2rem;
}
.pill-em   {background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.25);color:var(--em);}
.pill-blue {background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.25);color:var(--blue);}
.pill-amber{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.2);color:var(--amber);}
.pill-red  {background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);color:#fca5a5;}
.pill-gray {background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--text);}

/* ── ACTION BUTTONS ── */
.btn-sm{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.35rem .75rem;border-radius:.5rem;font-size:.78rem;
  font-family:'Syne',sans-serif;font-weight:700;cursor:pointer;border:1px solid;
  transition:background var(--tr),color var(--tr);
}
.btn-sm--em   {background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.3);color:var(--em);}
.btn-sm--em:hover{background:rgba(16,185,129,.22);}
.btn-sm--red  {background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3);color:#fca5a5;}
.btn-sm--red:hover{background:rgba(239,68,68,.22);}
.btn-sm--blue {background:rgba(59,130,246,.1);border-color:rgba(59,130,246,.3);color:var(--blue);}
.btn-sm--blue:hover{background:rgba(59,130,246,.22);}
.btn-sm--amber{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.2);color:var(--amber);}
.btn-sm--amber:hover{background:rgba(245,158,11,.22);}
.btn-sm--purple{background:rgba(139,92,246,.1);border-color:rgba(139,92,246,.3);color:var(--purple);}
.btn-sm--purple:hover{background:rgba(139,92,246,.22);}
.btn-sm--green{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.3);color:#4ade80;}
.btn-sm--green:hover{background:rgba(34,197,94,.22);}
.btn-sm svg{width:.8rem;height:.8rem}

/* ── MODAL ── */
.modal-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(7,13,26,.88);backdrop-filter:blur(8px);
  z-index:200;align-items:center;justify-content:center;padding:1.5rem;
}
.modal-overlay.open{display:flex;}
.modal-box{
  background:#0d1627;border:1px solid var(--border);
  border-radius:1.5rem;width:100%;max-width:36rem;
  max-height:90vh;overflow-y:auto;
  animation:scaleIn .28s cubic-bezier(.34,1.56,.64,1);
}
.modal-box--wide{max-width:54rem;}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.5rem 1.75rem 1rem;border-bottom:1px solid var(--border);
  position:sticky;top:0;background:#0d1627;z-index:1;
}
.modal-header h3{font-size:1.15rem;}
.modal-close{
  width:1.8rem;height:1.8rem;border-radius:50%;
  background:var(--surface2);border:none;color:var(--text-w);
  cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.85rem;
  transition:background var(--tr);
}
.modal-close:hover{background:rgba(255,255,255,.12);}
.modal-body{padding:1.5rem 1.75rem;}
.modal-footer{
  padding:1rem 1.75rem 1.5rem;border-top:1px solid var(--border);
  display:flex;gap:.75rem;justify-content:flex-end;
}

/* ── FORM ── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.form-group{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.1rem;}
.form-group.full{grid-column:1/-1;}
.form-group label{font-size:.8rem;font-weight:600;color:var(--text);}
.form-group input,
.form-group select,
.form-group textarea{
  background:rgba(255,255,255,.05);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:.65rem .9rem;
  color:var(--text-w);font-size:.9rem;outline:none;
  transition:border-color var(--tr),box-shadow var(--tr);
}
.form-group input::placeholder,
.form-group textarea::placeholder{color:var(--text);}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color:var(--em);box-shadow:0 0 0 3px rgba(16,185,129,.12);
}
.form-group select option{background:#1e2a3a;color:var(--text-w);}
.form-group textarea{resize:vertical;min-height:90px;}

/* ── PRIMARY BTN ── */
.btn-primary{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.65rem 1.4rem;border-radius:2rem;
  background:var(--em);color:#fff;
  font-family:'Syne',sans-serif;font-weight:700;font-size:.9rem;
  border:none;cursor:pointer;
  transition:background var(--tr),transform var(--tr),box-shadow var(--tr);
}
.btn-primary:hover{background:var(--em-l);transform:translateY(-2px);box-shadow:0 6px 20px rgba(16,185,129,.3);}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;}
.btn-ghost{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.65rem 1.2rem;border-radius:2rem;
  background:transparent;color:var(--text);
  font-family:'Syne',sans-serif;font-weight:600;font-size:.9rem;
  border:1px solid var(--border);cursor:pointer;
  transition:background var(--tr),color var(--tr);
}
.btn-ghost:hover{background:var(--surface2);color:var(--text-w);}

/* ── ENROLL DETAIL CARDS ── */
.enroll-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;}
.enroll-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:1.25rem;
  transition:border-color var(--tr),transform var(--tr);
}
.enroll-card:hover{border-color:var(--border);transform:translateY(-2px);}
.enroll-card h4{font-size:.95rem;color:var(--text-w);margin-bottom:.35rem;}
.enroll-card p{font-size:.8rem;color:var(--text);margin-bottom:.2rem;}
.enroll-card-actions{display:flex;gap:.5rem;margin-top:.85rem;flex-wrap:wrap;}

/* ── EXPORT BTN ── */
.btn-export{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.55rem 1.1rem;border-radius:2rem;
  background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.25);
  color:var(--em);font-family:'Syne',sans-serif;font-weight:700;font-size:.8rem;
  cursor:pointer;transition:background var(--tr);
}
.btn-export:hover{background:rgba(16,185,129,.2);}
.btn-export svg{width:.9rem;height:.9rem}

/* ── SUPER ADMIN TABS ── */
.tab-row{display:flex;gap:.5rem;margin-bottom:1.5rem;flex-wrap:wrap;}
.tab-btn{
  padding:.5rem 1.1rem;border-radius:2rem;
  font-family:'Syne',sans-serif;font-size:.8rem;font-weight:700;
  border:1px solid var(--border);background:none;color:var(--text);cursor:pointer;
  transition:background var(--tr),color var(--tr),border-color var(--tr);
}
.tab-btn.active{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.3);color:var(--amber);}
.tab-btn:hover:not(.active){background:var(--surface2);color:var(--text-w);}

/* ── SEARCH INPUT ── */
.table-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;gap:.75rem;flex-wrap:wrap;}
.search-sm{
  background:var(--surface);border:1px solid var(--border);
  border-radius:.6rem;padding:.5rem .85rem;color:var(--text-w);
  font-size:.85rem;outline:none;min-width:220px;
  transition:border-color var(--tr);
}
.search-sm::placeholder{color:var(--text);}
.search-sm:focus{border-color:var(--em);}
/* Native <option> list: browsers render this with their own (often
   white) background, so without explicit colors here the light text
   we use for the dark theme becomes unreadable against it. */
.search-sm option{background:var(--bg2);color:var(--text-w);}

/* ── LOGIN PAGE ── */
.admin-login-page{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--bg);padding:2rem 1rem;
}
.login-card{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:1.5rem;padding:2.5rem 2.75rem;
  width:100%;max-width:26rem;
  animation:scaleIn .35s cubic-bezier(.34,1.56,.64,1);
}
.login-card-logo{display:flex;align-items:center;gap:.75rem;margin-bottom:2rem;}
.login-card-logo h2{font-size:1.1rem;color:var(--text-w);}
.login-card-logo p{font-size:.75rem;color:var(--text);}
.login-form{display:flex;flex-direction:column;gap:.85rem;}
.login-msg{
  padding:.75rem 1rem;border-radius:var(--r-sm);
  font-size:.85rem;display:none;
}
.login-msg--error{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);color:#fca5a5;}
.login-msg--success{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.25);color:#86efac;}

/* ── WORKSHOP CARD BADGE (super admin owner) ── */
.owner-badge{
  font-family:'Syne',sans-serif;font-size:.58rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;
  padding:.15rem .5rem;border-radius:.35rem;margin-left:.4rem;
}
.owner-badge--a1{background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.3);color:var(--em);}
.owner-badge--a2{background:rgba(59,130,246,.15);border:1px solid rgba(59,130,246,.3);color:var(--blue);}
.owner-badge--a3{background:rgba(139,92,246,.15);border:1px solid rgba(139,92,246,.3);color:var(--purple);}
.pill-purple{background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.25);color:var(--purple);}

/* ── Closed Events card grid — creative glass + gradient-border design ── */
@keyframes ceBorderSpin{to{--ce-angle:360deg;}}
@keyframes ceLockPulse{0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,.55);}50%{box-shadow:0 0 0 6px rgba(139,92,246,0);}}
@keyframes ceShine{0%{transform:translateX(-120%) rotate(8deg);}100%{transform:translateX(220%) rotate(8deg);}}

.closed-events-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.75rem;
  perspective:1200px;
}
.ce-empty{
  grid-column:1/-1;text-align:center;padding:3.5rem 1.5rem;color:var(--text);
  background:
    radial-gradient(ellipse at top left, rgba(139,92,246,.08), transparent 60%),
    var(--surface);
  border:1px dashed var(--border);border-radius:1.25rem;
  font-size:.95rem;
}

/* animated conic-gradient border wrapper via padding trick */
@property --ce-angle{syntax:'<angle>';initial-value:0deg;inherits:false;}
.ce-card{
  position:relative;
  border-radius:1.4rem;
  padding:1px; /* border thickness */
  background:conic-gradient(from var(--ce-angle),
    rgba(139,92,246,.55), rgba(6,182,212,.45), rgba(16,185,129,.4), rgba(139,92,246,.55));
  transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
  transform-style:preserve-3d;
  animation:ceBorderSpin 6s linear infinite paused;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.55);
}
.ce-card:hover{
  animation-play-state:running;
  transform:translateY(-6px) rotateX(2deg) rotateY(-2deg);
  box-shadow:0 24px 48px -16px rgba(139,92,246,.35), 0 8px 24px -8px rgba(6,182,212,.2);
}
.ce-card::after{ /* inner surface sitting on top of the gradient border */
  content:'';position:absolute;inset:1px;background:var(--bg2);border-radius:calc(1.4rem - 1px);z-index:0;
}
.ce-card > *{position:relative;z-index:1;} /* lift real content above ::after */

.ce-img-wrap{
  position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:1.4rem 1.4rem 0 0;
  background:
    linear-gradient(135deg, rgba(139,92,246,.35), rgba(6,182,212,.35)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 2px, transparent 2px 10px),
    linear-gradient(135deg,var(--em),var(--cyan));
}
.ce-img-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.22,1,.36,1);}
.ce-card:hover .ce-img-wrap img{transform:scale(1.08);}
.ce-img-wrap::before{ /* diagonal shine sweep on hover */
  content:'';position:absolute;top:-50%;left:-20%;width:40%;height:200%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  pointer-events:none;opacity:0;
}
.ce-card:hover .ce-img-wrap::before{opacity:1;animation:ceShine 1.1s ease forwards;}
.ce-img-wrap::after{ /* bottom fade so badges/text stay legible over any photo */
  content:'';position:absolute;inset:0;background:linear-gradient(to top, rgba(13,22,39,.55), transparent 55%);
}

.ce-badge{
  position:absolute;top:.85rem;left:.85rem;z-index:2;
  background:rgba(16,185,129,.18);backdrop-filter:blur(8px);
  border:1px solid rgba(16,185,129,.45);color:var(--em-l);
  font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:.35rem .75rem;border-radius:2rem;
}
.ce-lock-badge{
  position:absolute;top:.85rem;right:.85rem;z-index:2;
  display:inline-flex;align-items:center;gap:.3rem;
  background:rgba(139,92,246,.28);backdrop-filter:blur(8px);
  border:1px solid rgba(139,92,246,.55);color:#f3e8ff;
  font-size:.66rem;font-weight:700;padding:.35rem .7rem;border-radius:2rem;
  animation:ceLockPulse 2.4s ease-in-out infinite;
}

.ce-body{padding:1.5rem 1.4rem 1.4rem;}
.ce-title{
  font-family:'Syne',sans-serif;font-size:1.18rem;font-weight:800;color:var(--text-w);
  margin-bottom:1rem;position:relative;padding-left:.85rem;
}
.ce-title::before{ /* small gradient tick to echo the card's border theme */
  content:'';position:absolute;left:0;top:.15em;bottom:.15em;width:3px;border-radius:2px;
  background:linear-gradient(180deg,var(--purple),var(--cyan));
}
.ce-meta{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.4rem;}
.ce-meta span{
  font-size:.85rem;color:var(--text-w);display:flex;align-items:center;gap:.55rem;
  padding:.15rem 0;border-bottom:1px dashed rgba(255,255,255,.06);
}
.ce-meta span:last-child{border-bottom:none;}

.ce-actions{display:flex;gap:.6rem;}
.ce-actions button{
  flex:1;padding:.7rem 1rem;border-radius:.8rem;font-weight:700;font-size:.85rem;
  cursor:pointer;border:none;font-family:'DM Sans',sans-serif;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.ce-actions button:active{transform:scale(.96);}
.ce-btn-view{background:linear-gradient(135deg,#fff,#e2e8f0);color:#111;}
.ce-btn-view:hover{box-shadow:0 6px 18px -4px rgba(255,255,255,.25);transform:translateY(-2px);}
.ce-btn-edit{background:transparent;border:1px solid var(--border) !important;color:var(--text-w);}
.ce-btn-edit:hover{border-color:var(--purple) !important;color:#fff;background:linear-gradient(135deg,rgba(139,92,246,.35),rgba(6,182,212,.25));transform:translateY(-2px);}

@media (prefers-reduced-motion: reduce){
  .ce-card, .ce-img-wrap img, .ce-lock-badge, .ce-img-wrap::before{animation:none !important;transition:none !important;}
}

/* ── ENROLLMENTS VISUALIZATION (capacity/selection + attendance) ── */
.enroll-viz-row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:2rem;align-items:start;}
@media(max-width:900px){.enroll-viz-row{grid-template-columns:1fr;}}

/* ── panel: the frame that holds one whole group together ── */
.ev-panel{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.015) 60%),var(--bg2);
  border:1px solid var(--border);border-radius:1.5rem;padding:1.6rem;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 24px 50px -26px rgba(0,0,0,.7);
  animation:fadeUp .5s ease both;
}
.ev-panel::before{
  content:'';position:absolute;top:0;left:1.6rem;right:1.6rem;height:2px;z-index:2;border-radius:2px;
  background:var(--ev-accent, linear-gradient(90deg,var(--purple),var(--cyan)));
}
.ev-panel::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(50% 45% at 100% 0%, var(--ev-glow, rgba(139,92,246,.16)), transparent 70%);
}
.ev-panel--cap{--ev-accent:linear-gradient(90deg,#10b981,#f59e0b);--ev-glow:rgba(16,185,129,.18);}
.ev-panel--att{--ev-accent:linear-gradient(90deg,#06b6d4,#8b5cf6);--ev-glow:rgba(6,182,212,.18);}

.ev-group-head{position:relative;z-index:1;display:flex;align-items:center;gap:.75rem;margin-bottom:1.4rem;}
.ev-group-icon{
  width:2.35rem;height:2.35rem;border-radius:.8rem;flex-shrink:0;font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;
  background:var(--ev-accent);box-shadow:0 8px 20px -6px rgba(0,0,0,.55);
}
.ev-group-head h3{font-family:'Syne',sans-serif;font-size:1.02rem;font-weight:800;color:var(--text-w);line-height:1.2;}
.ev-group-head p{font-size:.74rem;color:var(--text);margin-top:.15rem;}

/* ── bento tile grid: hero + three supporting tiles ── */
.ev-tile-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;}

.ev-tile{
  position:relative;overflow:hidden;isolation:isolate;
  background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:1.1rem;
  padding:1.05rem 1.1rem;display:flex;flex-direction:column;gap:.4rem;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.ev-tile:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.2);
  background:rgba(255,255,255,.05);box-shadow:0 16px 32px -18px rgba(0,0,0,.6);}

.ev-tile-icon{
  width:2rem;height:2rem;border-radius:.6rem;font-size:.95rem;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.ev-tile-val{font-family:'Syne',sans-serif;font-weight:900;font-size:1.6rem;color:var(--text-w);line-height:1;}
.ev-tile-lbl{font-size:.68rem;color:var(--text);text-transform:uppercase;letter-spacing:.06em;}

/* the hero tile: spans the full width, oversized number, giant ghost icon */
.ev-tile--hero{
  grid-column:1 / -1;flex-direction:row;align-items:center;gap:1.1rem;
  color:#fff;border:none;padding:1.3rem 1.4rem;
  background:linear-gradient(135deg,var(--t1),var(--t2));
  box-shadow:0 20px 44px -18px rgba(0,0,0,.55);
}
.ev-tile--hero::before{
  content:attr(data-ghost);position:absolute;right:-.5rem;bottom:-1.2rem;z-index:0;
  font-size:6.5rem;line-height:1;opacity:.16;filter:blur(.5px);transform:rotate(-8deg);
  pointer-events:none;
}
.ev-tile--hero .ev-tile-icon{
  width:3rem;height:3rem;border-radius:.9rem;font-size:1.4rem;
  background:rgba(255,255,255,.22);position:relative;z-index:1;
}
.ev-tile--hero .ev-tile-body{position:relative;z-index:1;flex:1;min-width:0;}
.ev-tile--hero .ev-tile-val{font-size:2.5rem;color:#fff;}
.ev-tile--hero .ev-tile-lbl{color:rgba(255,255,255,.85);font-size:.72rem;}

/* mini progress bar embedded inside the hero tile */
.ev-tile-bar{position:relative;z-index:1;height:.45rem;border-radius:1rem;background:rgba(255,255,255,.25);overflow:hidden;margin-top:.5rem;max-width:16rem;}
.ev-tile-bar span{
  position:relative;display:block;height:100%;border-radius:1rem;min-width:2%;background:#fff;
  transition:width .8s cubic-bezier(.16,1,.3,1);overflow:hidden;
}
.ev-tile-bar span::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.7) 48%,transparent 70%);
  background-size:220% 100%;animation:capShimmer 2.6s linear infinite;
}
.ev-tile-bar-lbl{position:relative;z-index:1;font-size:.68rem;color:rgba(255,255,255,.85);margin-top:.35rem;}

@media(max-width:480px){
  .ev-tile-grid{grid-template-columns:1fr 1fr;}
  .ev-tile--hero{flex-direction:column;align-items:flex-start;text-align:left;}
}

@keyframes capShimmer{0%{background-position:120% 0;}100%{background-position:-40% 0;}}
@keyframes numPop{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

@media(max-width:820px){.enroll-viz-row{grid-template-columns:1fr;}}
@media(max-width:480px){.ev-chip{min-width:100%;}}

/* ── USER HISTORY ── */
.uh-summary-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.5rem;}

.uh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.25rem;}
.uh-card{
  position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:1.1rem;padding:1.25rem;cursor:pointer;overflow:hidden;
  transition:transform var(--tr),border-color var(--tr),box-shadow var(--tr);
}
.uh-card::before{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity var(--tr);
  background:radial-gradient(circle at 85% -10%, rgba(139,92,246,.28), transparent 60%);
  pointer-events:none;
}
.uh-card:hover{transform:translateY(-4px);border-color:rgba(139,92,246,.35);box-shadow:0 18px 40px -18px rgba(139,92,246,.35);}
.uh-card:hover::before{opacity:1;}
.uh-card-head{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;position:relative;z-index:1;}
.uh-avatar-ring{
  position:relative;width:2.9rem;height:2.9rem;border-radius:50%;flex-shrink:0;
  background:conic-gradient(#10b981 calc(var(--pct)*1%), rgba(255,255,255,.08) 0);
  display:flex;align-items:center;justify-content:center;padding:2px;
}
.uh-avatar-ring::after{
  content:'';position:absolute;inset:2px;border-radius:50%;background:var(--bg2);z-index:0;
}
.uh-avatar-ring .uh-avatar{position:relative;z-index:1;width:2.4rem;height:2.4rem;font-size:.75rem;}
.uh-rate-tag{
  margin-left:auto;flex-shrink:0;font-family:'Syne',sans-serif;font-size:.68rem;font-weight:800;
  padding:.2rem .55rem;border-radius:2rem;background:rgba(16,185,129,.12);
  border:1px solid rgba(16,185,129,.28);color:var(--em);align-self:flex-start;
}
.uh-card-footer{
  margin-top:.9rem;padding-top:.75rem;border-top:1px dashed rgba(255,255,255,.07);
  font-size:.72rem;font-weight:700;color:var(--purple);text-align:right;
  position:relative;z-index:1;letter-spacing:.02em;
}
.uh-avatar{
  width:2.6rem;height:2.6rem;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Syne',sans-serif;font-weight:800;font-size:.85rem;color:#fff;
  background:linear-gradient(135deg,var(--purple),var(--cyan));
}
.uh-avatar--sm{width:2.1rem;height:2.1rem;font-size:.68rem;flex-shrink:0;}
.uh-card-head h4{font-size:.92rem;color:var(--text-w);line-height:1.25;}
.uh-card-head p{font-size:.72rem;color:var(--text);}
.uh-card-stats{display:flex;flex-wrap:wrap;gap:.5rem;position:relative;z-index:1;}
.uh-stat-chip{
  flex:1 1 calc(50% - .25rem);text-align:center;padding:.5rem .35rem;border-radius:.6rem;
  background:rgba(255,255,255,.04);border:1px solid var(--border);
}
.uh-stat-chip b{display:block;font-family:'Syne',sans-serif;font-size:1.05rem;color:var(--text-w);}
.uh-stat-chip span{font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text);}
.uh-stat-chip--em b{color:var(--em);}
.uh-stat-chip--red b{color:#fca5a5;}
.uh-stat-chip--blue b{color:var(--blue);}
.uh-stat-chip--cyan b{color:var(--cyan);}
.uh-mini-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden;margin-top:.9rem;display:flex;position:relative;z-index:1;}
.uh-mini-bar span{height:100%;display:block;}
.uh-empty-msg{grid-column:1/-1;text-align:center;padding:3rem 1rem;color:var(--text);font-style:italic;}

/* Table view */
.uh-table-bar{height:6px;width:100%;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden;margin-bottom:.25rem;}
.uh-table-bar span{display:block;height:100%;border-radius:3px;transition:width .4s ease;}
.uh-table-wrap td, .uh-table-wrap th{white-space:nowrap;}

/* Detail modal: donut chart + legend + timeline */
.uh-detail-top{display:flex;gap:1.75rem;flex-wrap:wrap;align-items:center;margin-bottom:1.75rem;}
.uh-donut-wrap{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;}
.uh-donut{position:relative;width:150px;height:150px;flex-shrink:0;}
.uh-donut svg{transform:rotate(-90deg);}
.uh-donut-center{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.uh-donut-center b{font-family:'Syne',sans-serif;font-size:1.6rem;color:var(--text-w);line-height:1;}
.uh-donut-center span{font-size:.65rem;color:var(--text);text-transform:uppercase;letter-spacing:.08em;margin-top:.2rem;}
.uh-legend{display:flex;flex-direction:column;gap:.5rem;}
.uh-legend-item{display:flex;align-items:center;gap:.55rem;font-size:.82rem;color:var(--text-w);}
.uh-legend-dot{width:.65rem;height:.65rem;border-radius:50%;flex-shrink:0;}
.uh-legend-item b{margin-left:auto;font-family:'Syne',sans-serif;padding-left:1rem;}

.uh-rate-ring-wrap{display:flex;align-items:center;gap:.9rem;}
.uh-rate-ring{position:relative;width:86px;height:86px;flex-shrink:0;}
.uh-rate-ring svg{transform:rotate(-90deg);}
.uh-rate-ring-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:800;font-size:.95rem;color:var(--text-w);}
.uh-rate-lbl{font-size:.78rem;color:var(--text);max-width:9rem;line-height:1.4;}
.uh-rate-lbl b{color:var(--text-w);}

/* ============================================================
   Participant Journey Passport — full-history detail modal
   A travel-passport / boarding-pass inspired redesign.
   ============================================================ */
.modal-box--xl{max-width:62rem;}
.uhx-modal .modal-body{padding:0 1.75rem 1.5rem;}

/* ── Hero / cover ───────────────────────────────────────── */
.uhx-header{
  position:sticky;top:0;z-index:5;padding:0;border:none;
  background:#0d1627;display:block;
}
.uhx-hero-bg{
  position:relative;height:6.75rem;overflow:hidden;
  border-radius:1.5rem 1.5rem 0 0;
  background:
    radial-gradient(120% 160% at 0% 0%,   rgba(139,92,246,.55), transparent 55%),
    radial-gradient(120% 160% at 100% 0%, rgba(6,182,212,.5),  transparent 55%),
    linear-gradient(120deg,#111a30,#0d1627 60%);
}
.uhx-hero-bg::before{
  content:'';position:absolute;inset:0;opacity:.35;
  background-image:radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px);
  background-size:16px 16px;
  mask-image:linear-gradient(180deg,#000,transparent 85%);
}
.uhx-orb{position:absolute;border-radius:50%;filter:blur(22px);opacity:.55;pointer-events:none;}
.uhx-orb--a{width:6rem;height:6rem;left:-1rem;top:-1.5rem;background:radial-gradient(circle,var(--em),transparent 70%);animation:uhx-drift 9s ease-in-out infinite;}
.uhx-orb--b{width:7.5rem;height:7.5rem;right:-1.5rem;top:-2rem;background:radial-gradient(circle,var(--purple),transparent 70%);animation:uhx-drift 11s ease-in-out infinite reverse;}
@keyframes uhx-drift{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(10px,8px) scale(1.12);}
}
.uhx-close{
  position:absolute;top:.8rem;right:.9rem;z-index:6;
  background:rgba(7,13,26,.45);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px);color:#fff;
}
.uhx-close:hover{background:rgba(7,13,26,.7);}

.uhx-hero-inner{
  position:relative;z-index:2;display:flex;align-items:flex-end;gap:1rem;
  padding:0 1.75rem;margin-top:-2.35rem;
}
.uhx-avatar-wrap{position:relative;flex-shrink:0;}
.uhx-avatar-ring{
  position:relative;width:4.9rem;height:4.9rem;border-radius:50%;
  background:conic-gradient(var(--em-l) calc(var(--pct)*1%), rgba(255,255,255,.12) 0);
  display:flex;align-items:center;justify-content:center;padding:4px;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.65), 0 0 0 4px #0d1627;
}
.uhx-avatar-ring::after{content:'';position:absolute;inset:4px;border-radius:50%;background:#0d1627;z-index:0;}
.uhx-avatar-ring .uh-avatar{position:relative;z-index:1;width:4.1rem;height:4.1rem;font-size:1.25rem;}
.uhx-hero-text{min-width:0;padding-bottom:.35rem;}
.uhx-name-row{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;}
.uhx-name-row h3{font-size:1.15rem;text-shadow:0 2px 8px rgba(0,0,0,.5);}
.uhx-hero-sub{font-size:.74rem;color:var(--text);margin-top:.15rem;}
.uh-active-badge{
  display:inline-flex;align-items:center;gap:.3rem;font-size:.6rem;font-weight:700;
  letter-spacing:.04em;padding:.18rem .55rem;border-radius:99px;flex-shrink:0;
  background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--text);
}
.uh-active-badge--on{background:rgba(16,185,129,.15);border-color:rgba(16,185,129,.3);color:var(--em-l);}

/* ── Contact chips ── */
.uhx-contact-row{display:flex;gap:.5rem;flex-wrap:wrap;margin:1.15rem 0 1.35rem;}
.uhx-chip{
  font-size:.72rem;color:var(--text-w);background:rgba(255,255,255,.05);
  border:1px solid var(--border);padding:.32rem .7rem;border-radius:99px;white-space:nowrap;
}

/* ── Stat orbs ── */
.uhx-stats{display:flex;gap:.85rem;margin-bottom:1.35rem;flex-wrap:wrap;}
.uhx-stat{
  position:relative;flex:1 1 9rem;background:var(--surface);border:1px solid var(--border);
  border-radius:1.1rem;padding:1rem 1rem .95rem;display:flex;align-items:center;gap:.75rem;
  overflow:hidden;transition:transform var(--tr),border-color var(--tr),box-shadow var(--tr);
}
.uhx-stat::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--acc,var(--em));}
.uhx-stat:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.18);box-shadow:0 14px 30px -16px var(--acc,rgba(16,185,129,.5));}
.uhx-stat-icon{
  flex-shrink:0;width:2.5rem;height:2.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;background:color-mix(in srgb, var(--acc,#10b981) 18%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--acc,#10b981) 35%, transparent);
}
.uhx-stat-val{font-family:'Syne',sans-serif;font-weight:900;font-size:1.55rem;line-height:1;color:var(--acc,var(--em-l));}
.uhx-stat-lbl{font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text);font-weight:600;margin-top:.15rem;}

/* ── Success meter ── */
.uhx-meter-wrap{margin:1.5rem 0 1.75rem;}
.uhx-meter-lbl{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.55rem;}
.uhx-meter-lbl span{font-size:.78rem;color:var(--text);font-weight:600;}
.uhx-meter-lbl b{font-family:'Syne',sans-serif;font-size:1.05rem;color:var(--em-l);}
.uhx-meter{position:relative;height:12px;border-radius:99px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--border);}
.uhx-meter-fill{
  position:relative;display:block;height:100%;border-radius:99px;transition:width .7s cubic-bezier(.22,1,.36,1);
  background:linear-gradient(90deg,var(--em),var(--em-l),var(--cyan));
  box-shadow:0 0 12px rgba(16,185,129,.45);overflow:hidden;
}
.uhx-meter-fill::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 66%);
  background-size:220% 100%;animation:uhx-shine 2.6s ease-in-out infinite;
}
@keyframes uhx-shine{0%{background-position:120% 0;}100%{background-position:-40% 0;}}
.uhx-meter-tick{position:absolute;top:-3px;bottom:-3px;width:2px;background:rgba(7,13,26,.55);}

.uhx-section-title{font-size:.95rem;margin:0 0 .9rem;padding-top:1rem;border-top:1px dashed var(--border);}

/* ── Status summary chips ── */
.uhx-status-chips{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:2rem;}
.uhx-status-chip{
  display:flex;align-items:center;gap:.45rem;font-size:.76rem;color:var(--text);
  background:rgba(255,255,255,.04);border:1px solid var(--border);
  padding:.45rem .85rem;border-radius:99px;
}
.uhx-status-dot{width:.55rem;height:.55rem;border-radius:50%;flex-shrink:0;}
.uhx-status-chip b{color:var(--text-w);font-family:'Syne',sans-serif;margin-left:.15rem;}

/* ── Journey timeline (alternating road) ── */
.uhx-timeline{position:relative;padding:.25rem 0 .25rem;}
.uhx-timeline::before{
  content:'';position:absolute;left:50%;top:2px;bottom:2px;width:3px;transform:translateX(-50%);
  border-radius:99px;background:linear-gradient(180deg,var(--em),var(--cyan),var(--purple));
  opacity:.55;box-shadow:0 0 14px rgba(139,92,246,.35);
}
.uhx-tl-row{position:relative;display:flex;align-items:flex-start;margin-bottom:1.1rem;}
.uhx-tl-row:nth-child(even){flex-direction:row-reverse;}
.uhx-tl-side{flex:1 1 46%;max-width:46%;}
.uhx-tl-row:nth-child(odd) .uhx-tl-side{display:flex;justify-content:flex-end;}
.uhx-tl-spacer{flex:1 1 46%;max-width:46%;}
.uhx-tl-node{
  position:relative;z-index:2;flex-shrink:0;width:2.7rem;height:2.7rem;border-radius:50%;margin:0 .6rem;
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;border:3px solid #0d1627;
  box-shadow:0 4px 12px -2px rgba(0,0,0,.6);
}
.uhx-tl-medal{position:absolute;bottom:-.2rem;right:-.2rem;font-size:.78rem;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));}
.uhx-tl-card{
  width:100%;cursor:pointer;background:var(--surface);border:1px solid var(--border);
  border-radius:1rem;padding:.85rem 1rem;transition:border-color var(--tr),transform var(--tr),background var(--tr);
}
.uhx-tl-card:hover{border-color:rgba(255,255,255,.2);transform:translateY(-2px);background:rgba(255,255,255,.055);}
.uhx-tl-row:nth-child(odd) .uhx-tl-card{border-top-right-radius:.3rem;}
.uhx-tl-row:nth-child(even) .uhx-tl-card{border-top-left-radius:.3rem;}
.uhx-tl-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem;flex-wrap:wrap;}
.uhx-tl-title{font-size:.88rem;color:var(--text-w);margin-bottom:.15rem;}
.uhx-tl-date{font-size:.68rem;color:var(--text);}
.uhx-tl-view{font-size:.64rem;color:var(--purple);margin-top:.5rem;opacity:0;transform:translateY(-3px);transition:var(--tr);}
.uhx-tl-card:hover .uhx-tl-view{opacity:1;transform:translateY(0);}
.uhx-tl-detail{max-height:0;overflow:hidden;opacity:0;transition:max-height .35s ease,opacity .3s ease;}
.uhx-tl-row.uhx-expanded .uhx-tl-card{background:rgba(255,255,255,.045);}
.uhx-tl-row.uhx-expanded .uhx-tl-detail{max-height:30rem;opacity:1;margin-top:.8rem;}
.uhx-detail-grid{
  display:flex;flex-wrap:wrap;gap:.65rem 1.1rem;
  border-top:1px dashed var(--border);padding-top:.75rem;
}
.uhx-detail-field{flex:1 1 calc(50% - .55rem);min-width:8rem;}
.uhx-detail-field .uhx-detail-field-label{display:block;font-size:.6rem;text-transform:uppercase;letter-spacing:.07em;color:var(--text);margin-bottom:.2rem;}
.uhx-detail-field b{font-size:.78rem;color:var(--text-w);font-weight:600;}
.uhx-detail-field.full{flex-basis:100%;}
.uhx-detail-field.reason b{color:#fca5a5;}

/* ── Footer / boarding-pass stub ── */
.uhx-footer{
  position:sticky;bottom:0;background:#0d1627;z-index:1;
  padding:1.05rem 1.75rem 1.4rem;
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;
}
.uhx-footer::before{
  content:'';position:absolute;top:0;left:1.75rem;right:1.75rem;height:1px;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 7px, transparent 7px 15px);
}
.uh-footer-left{display:flex;gap:.5rem;flex-wrap:wrap;}
.uh-footer-right{display:flex;gap:.6rem;flex-wrap:wrap;}

@media (max-width:760px){
  .uhx-timeline::before{left:1.35rem;transform:none;}
  .uhx-tl-row,.uhx-tl-row:nth-child(even){flex-direction:row-reverse;}
  .uhx-tl-side{max-width:none;}
  .uhx-tl-row:nth-child(odd) .uhx-tl-side,.uhx-tl-row:nth-child(even) .uhx-tl-side{justify-content:flex-start;}
  .uhx-tl-spacer{display:none;}
  .uhx-tl-node{margin:0 .75rem 0 0;}
  .uhx-tl-row:nth-child(odd) .uhx-tl-card,.uhx-tl-row:nth-child(even) .uhx-tl-card{border-radius:1rem;}
}
@media (max-width:640px){
  .uhx-stats{gap:.5rem;}
  .uhx-stat{flex:1 1 7rem;padding:.85rem .7rem;}
  .uhx-stat-val{font-size:1.3rem;}
  .uhx-hero-inner{padding:0 1.1rem;}
  .uhx-modal .modal-body{padding:0 1.1rem 1.5rem;}
  .uhx-footer{padding:1rem 1.1rem 1.3rem;}
  .uhx-footer::before{left:1.1rem;right:1.1rem;}
  .uhx-detail-field{flex-basis:100%;}
}


/* ── Participant history — vibrant sticker tiles ── */
.uh-tile-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:1.15rem;margin-top:.5rem;
}
.uh-tile{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:1.15rem;min-height:150px;padding:.9rem;
  display:flex;flex-direction:column;justify-content:flex-end;
  background-image:var(--tile-grad);background-size:170% 170%;background-position:0% 0%;
  box-shadow:0 10px 22px -12px rgba(0,0,0,.6);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease,background-position .7s ease;
}
.uh-tile::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(to top,rgba(3,7,18,.86) 0%,rgba(3,7,18,.22) 55%,rgba(3,7,18,0) 82%);
}
.uh-tile::after{
  content:'';position:absolute;top:-60%;left:-70%;width:45%;height:220%;z-index:1;pointer-events:none;
  background:linear-gradient(75deg,transparent,rgba(255,255,255,.4),transparent);
  transform:rotate(15deg) translateX(-30%);
  transition:transform .85s ease;
}
.uh-tile:hover{
  transform:translateY(-7px) scale(1.04) rotate(-.6deg);
  box-shadow:0 24px 42px -16px rgba(0,0,0,.7);
  background-position:100% 100%;
}
.uh-tile:hover::after{transform:rotate(15deg) translateX(220%);}
.uh-tile-emoji{
  position:absolute;top:.6rem;left:.6rem;z-index:2;
  width:2.2rem;height:2.2rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;
  background:rgba(255,255,255,.2);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.4);box-shadow:0 3px 8px rgba(0,0,0,.3);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.uh-tile:hover .uh-tile-emoji{transform:rotate(-12deg) scale(1.1);}
.uh-tile-medal{
  position:absolute;top:-.4rem;right:-.4rem;z-index:3;
  width:2.4rem;height:2.4rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;
  background:radial-gradient(circle at 30% 30%,#fef3c7,#f59e0b 60%,#b45309);
  border:2px solid #fffbeb;
  box-shadow:0 4px 10px rgba(0,0,0,.45),0 0 0 3px rgba(245,158,11,.3);
  transform:rotate(14deg);
  animation:uh-medal-pop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes uh-medal-pop{from{transform:rotate(14deg) scale(0);}to{transform:rotate(14deg) scale(1);}}
.uh-tile-info{position:relative;z-index:2;}
.uh-tile-title{
  font-size:.85rem;font-weight:700;line-height:1.25;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.6);margin-bottom:.5rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.uh-tile-by{display:block;font-size:.6rem;color:rgba(255,255,255,.72);margin:-.35rem 0 .5rem;}
.uh-tile-meta{display:flex;align-items:center;justify-content:space-between;gap:.4rem;flex-wrap:wrap;}
.uh-tile-date{font-size:.66rem;font-weight:700;color:rgba(255,255,255,.9);}
.uh-tile-status{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#fff;
  padding:.2rem .55rem;border-radius:1rem;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(4px);
}
.uh-tile-status i{width:.42rem;height:.42rem;border-radius:50%;display:inline-block;box-shadow:0 0 5px currentColor;}

@media(max-width:640px){
  .uh-summary-row{grid-template-columns:1fr 1fr;}
  .uh-detail-top{flex-direction:column;align-items:flex-start;}
}

/* ── NOTIFICATION TOAST ── */
.toast-container{position:fixed;top:1.25rem;right:1.25rem;z-index:500;display:flex;flex-direction:column;gap:.5rem;}
.toast{
  padding:.85rem 1.25rem;border-radius:var(--r-sm);
  font-size:.875rem;font-weight:500;color:#fff;
  display:flex;align-items:center;gap:.6rem;
  animation:slideInRight .3s ease;min-width:260px;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}
.toast--success{background:#065f46;border:1px solid rgba(16,185,129,.4);}
.toast--error  {background:#7f1d1d;border:1px solid rgba(239,68,68,.4);}
.toast--info   {background:#1e3a5f;border:1px solid rgba(59,130,246,.4);}
.toast svg{width:1rem;height:1rem;flex-shrink:0;}

/* ── CONFIRMATION DIALOG ── */
.confirm-box{
  background:#0d1627;border:1px solid rgba(239,68,68,.25);
  border-radius:1.5rem;padding:2rem;max-width:24rem;width:100%;
  animation:scaleIn .25s cubic-bezier(.34,1.56,.64,1);
}
.confirm-box h3{font-size:1.1rem;margin-bottom:.5rem;}
.confirm-box p{font-size:.9rem;color:var(--text);margin-bottom:1.5rem;line-height:1.6;}
.confirm-actions{display:flex;gap:.75rem;}

/* ── KEYFRAMES ── */
@keyframes scaleIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ── RESPONSIVE ── */
.attendance-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:start;}
.admin-summary-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.5rem;margin-top:1.5rem;}

@media(max-width:900px){
  .admin-layout{grid-template-columns:1fr;}
  .admin-sidebar{position:fixed;left:-100%;top:0;z-index:150;height:100%;width:260px;transition:left .3s ease;}
  .admin-sidebar.open{left:0;}
  .stats-row{grid-template-columns:repeat(2,1fr);}
  .form-grid{grid-template-columns:1fr;}
  .attendance-grid{grid-template-columns:1fr;}
  .admin-summary-grid{grid-template-columns:1fr 1fr;}
  .data-table{min-width:640px;}
}
@media(max-width:540px){
  .stats-row{grid-template-columns:1fr 1fr;}
  .admin-content{padding:1.25rem;}
  .admin-topbar{padding:.75rem 1.1rem;flex-wrap:wrap;gap:.5rem;}
  .admin-summary-grid{grid-template-columns:1fr;}
  .closed-events-grid{grid-template-columns:1fr;}
}