:root{
  --bg:#0f1724;
  --card:#0b1220;
  --muted:#9aa4b2;
  --accent:#7c5cff;
  --glass: rgba(255,255,255,0.04);
  --accent-2:#00d4ff;
  --radius:14px;
  --container-width:1100px;
}
*{box-sizing:border-box;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial}
body{margin:0;background:linear-gradient(180deg,var(--bg),#071026);color:#f3f6f9;line-height:1.5}
.container{max-width:var(--container-width);margin:0 auto;padding:28px}
.site-header{backdrop-filter: blur(6px);background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);border-bottom:1px solid rgba(255,255,255,0.04)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 28px}
.brand{display:flex;gap:14px;align-items:center}
.logo{width:56px;height:56px;border-radius:10px;object-fit:cover;box-shadow:0 6px 18px rgba(0,0,0,0.6)}
.brand h1{margin:0;font-size:20px;letter-spacing:0.3px}
.tagline{margin:0;font-size:13px;color:var(--muted)}
.main-nav a{color:var(--muted);text-decoration:none;margin-left:18px;padding:8px 10px;border-radius:8px}
.main-nav a:hover{color:#fff;background:rgba(255,255,255,0.03)}

.hero{display:grid;grid-template-columns:1fr 360px;gap:32px;align-items:center;margin:28px 0;padding:28px;background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);border-radius:var(--radius);box-shadow:0 10px 30px rgba(2,6,23,0.6)}
.hero h2{font-size:28px;margin:0 0 10px}
.hero p{color:var(--muted);margin:0 0 18px}
.button{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;padding:12px 18px;border-radius:12px;border:none;cursor:pointer;text-decoration:none;display:inline-block}
.button.muted{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}
.hero-illustration{height:200px;background:linear-gradient(90deg, rgba(124,92,255,0.18), rgba(0,212,255,0.12));border-radius:12px;box-shadow:inset 0 -40px 60px rgba(0,0,0,0.5)}

.card-grid{margin-top:22px}
.card-grid h3{margin:6px 0 12px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}

.card{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 8px 24px rgba(2,6,23,0.5)}
.event-card{overflow:hidden;border-radius:12px;transition:transform .18s ease, box-shadow .18s ease}
.event-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(2,6,23,0.6)}
.event-card img{width:100%;height:150px;object-fit:cover;display:block}
.event-card .meta{padding:12px}
.event-card h4{margin:0 0 6px;font-size:16px}
.event-card p{margin:0;color:var(--muted);font-size:13px}
.badge{display:inline-block;padding:6px 8px;border-radius:999px;font-size:12px;background:rgba(255,255,255,0.03);color:var(--muted)}

.info{margin-top:20px;padding:18px;border-radius:12px}
.site-footer{padding:18px;margin-top:30px;color:var(--muted);text-align:center}

.search-panel .form-row{display:flex;flex-direction:column;margin-bottom:12px}
.search-panel label{font-size:13px;color:var(--muted);margin-bottom:6px}
.search-panel input, .search-panel select{padding:10px;border-radius:8px;background:transparent;border:1px solid rgba(255,255,255,0.04);color:#fff}

.form-actions{display:flex;gap:10px;margin-top:8px}

.no-results{padding:12px;color:var(--muted);text-align:center}

.event-page .card{display:grid;grid-template-columns:380px 1fr;gap:20px}
.event-media img{width:100%;height:260px;object-fit:cover;border-radius:10px}
.event-main h2{margin-top:0}
.progress-wrap{background:rgba(255,255,255,0.04);padding:8px;border-radius:10px}
.progress-bar{height:12px;border-radius:8px;background:linear-gradient(90deg,var(--accent),var(--accent-2));width:0}

.details-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.meta-item{background:var(--glass);padding:10px;border-radius:8px}

.register{display:inline-block;margin-top:14px}

.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);z-index:80}
.modal.show{display:flex}
.modal-content{background:#041021;padding:20px;border-radius:12px;max-width:520px;width:95%;position:relative}
.modal-close{position:absolute;right:12px;top:10px;background:transparent;border:none;color:#fff;font-size:22px;cursor:pointer}

.card-grid .grid .event-card .meta .row{display:flex;justify-content:space-between;align-items:center;margin-top:10px}


.search-panel input,
.search-panel select {
  pointer-events: auto;
  position: relative;
  z-index: 3;
  -webkit-appearance: textfield;
  appearance: textfield;
}

.search-panel input[type="date"] {
  cursor: pointer;
  background-clip: padding-box;
  padding-right: 14px;
}

.search-panel input[type="date"]::-webkit-calendar-picker-indicator {
  display: inline-block;
  cursor: pointer;
  filter: invert(1) brightness(1.2);
  opacity: 0.95;
}

.search-panel select {
  background: #ffffff;
  color: #0b1220;
  border: 1px solid rgba(0,0,0,0.06);
  -webkit-appearance: menulist;
  appearance: menulist;
}

.search-panel select option {
  color: #0b1220;
  background: #ffffff;
}

@media (max-width: 560px) {
  .search-panel input[type="date"],
  .search-panel select {
    font-size: 15px;
  }
}