:root {
  --bg: #f3f6ff;
  --surface: #ffffff;
  --surface-soft: #f8faff;
  --text: #0f172a;
  --muted: #64748b;
  --brand: #4f46e5;
  --brand-2: #7c3aed;
  --accent: #10b981;
  --border: rgba(148, 163, 184, 0.28);
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  font-synthesis: none;
  color: var(--text);
  background: linear-gradient(180deg, #f8fbff, #f3f6ff);
  overflow-x: hidden;
}

b, strong,
.brand,
.cta,
button,
.menu a,
.badge {
  -webkit-text-stroke: 0 transparent;
  text-shadow: none;
  font-synthesis: none;
}

.container { width: min(1160px, 92vw); margin: 0 auto; }
a { color: inherit; text-decoration: none; touch-action: manipulation; }
button, input, textarea, select { font-family: inherit; }
button{touch-action:manipulation}

.nav { position: sticky; top: 0; z-index: 900; background: #ffffff; border-bottom: 1px solid var(--border); }
.nav-inner { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; }
.brand { font-weight: 700; font-size: 1.05rem; background: linear-gradient(90deg, #6d28d9 0%, #2563eb 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.menu { display: flex; flex-wrap: wrap; gap: 8px; }

.menu-toggle{display:none;border:1px solid var(--border);background:#fff;border-radius:10px;padding:8px 10px;font-size:1.1rem;cursor:pointer;position:relative;z-index:2000}

.menu a { padding: 9px 13px; border-radius: 999px; font-weight: 500; color: #243042; transition: .16s ease; }
.menu a:hover { background: #eef2ff; }

.hero { margin-top: 20px; padding: clamp(24px, 5vw, 48px); border-radius: 24px; background: linear-gradient(135deg, #eef2ff, #ecfeff); border: 1px solid rgba(79,70,229,.18); box-shadow: var(--shadow); }
.hero h1 { margin: 0 0 10px; font-size: clamp(1.8rem, 4.8vw, 3rem); line-height: 1.1; font-weight: 700; }
.hero p { margin: 0 0 22px; max-width: 780px; color: #334155; }

.cta, button.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff;
  border-radius: 999px; padding: 11px 16px; font-weight: 500; font-family: inherit; font-size: .95rem;
  box-shadow: 0 8px 20px rgba(79, 70, 229, .28);
  transition: transform .18s ease, filter .18s ease;
}
.cta:hover { transform: translateY(-1px); filter: brightness(1.05); }

.section { padding: 34px 0; }
.grid { display: grid; gap: 16px; }
.calendar-wrap { grid-template-columns: minmax(0,1fr) minmax(280px,420px); align-items:start; }
.calendar-wrap > * { min-width: 0; }
.event-item.compact{padding:10px}
.event-item.compact small{display:block;margin-top:2px;color:var(--muted)}
#filtersCard{display:flex;flex-direction:column;height:560px;max-height:560px}
#eventsList{flex:1;overflow:auto;min-height:0}
.card, .price-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); min-width:0; }
.card h1, .card h2, .card h3 { margin-top: 0; }
.modal-card h1,.modal-card h2,.modal-card h3,.modal-card p,.event-item h3,.event-item p{overflow-wrap:anywhere;word-break:break-word}

.calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; position: relative; width:100%; }
.day-heading{font-size:.76rem;font-weight:700;text-align:center;color:#475569;padding:2px 0}
.day { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); min-height: clamp(62px, 8vw, 84px); text-align: left; padding: 8px; color: #111827; cursor: pointer; transition: .15s ease; min-width:0; overflow:hidden; }
.day strong{display:block;font-size:clamp(.78rem,1.8vw,1rem);line-height:1.1;}
.day:hover { transform: translateY(-1px); box-shadow: var(--shadow); border-color: rgba(79,70,229,.34); }
.day.sponsored { border-color: rgba(245, 158, 11, .7); background: #fffdf5; }
.day.is-empty { visibility: hidden; pointer-events: none; }
.day small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.15;font-size:clamp(.62rem,1.45vw,.76rem);word-break:normal}

.day-tooltip {
  position: absolute; width: 300px; max-height: 260px; overflow: auto; z-index: 20;
  background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
  padding: 10px; display: none;
}
.day-tooltip.open { display: block; }
.day-tooltip h4 { margin: 0 0 8px; }
.day-tooltip .event-item { cursor: pointer; }

.badge { display: inline-flex; align-items: center; font-size: .73rem; font-weight: 700; border-radius: 999px; padding: 4px 10px; color: #334155; background: #f1f5f9; }
.badge.sponsored { color: #9a4d08; background: #fff3db; }

.filters { display: grid; gap: 10px; margin-bottom: 14px; }
.filters select, .filters input, .filters textarea,
input, textarea, select { width: 100%; border: 1px solid rgba(148,163,184,.45); border-radius: 12px; padding: 10px 12px; background: #fff; font: inherit; }
input:focus, textarea:focus, select:focus { outline: 2px solid rgba(79,70,229,.2); border-color: var(--brand); }

.events-list { display: grid; gap: 10px; }
.event-item { border: 1px solid var(--border); border-radius: 14px; background: #fff; padding: 13px; transition: .15s ease; }
.event-item:hover { border-color: rgba(79,70,229,.4); box-shadow: var(--shadow); }

.modal { position: fixed; inset: 0; background: rgba(15,23,42,.5); display: none; align-items: center; justify-content: center; padding: 16px; overflow:auto; }
.modal.open { display: flex; }
.modal-card { width: min(860px, calc(100vw - 64px)); max-height: min(78vh, 760px); overflow-y: scroll; scrollbar-gutter: stable; border-radius: 18px; background: #fff; border: 1px solid var(--border); padding: 16px; box-shadow: var(--shadow); }
.modal-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 14px; }
.poster { width: 100%; border-radius: 14px; aspect-ratio: 4 / 5; object-fit: contain; background:#f8fafc; border: 1px solid var(--border); max-height: 560px; }
.modal-top-actions { display:flex; justify-content:flex-end; gap:8px; margin-bottom:8px; }
.icon-btn { width:34px; height:34px; border-radius:10px; border:1px solid var(--border); background:#fff; cursor:pointer; font-size:1.1rem; }

.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.price { font-size: 2rem; margin: 8px 0; }
.footer { color: #64748b; padding: 22px 0 36px; }

.notice{padding:10px 12px;border-radius:12px;margin:8px 0;font-weight:600;background:#eef2ff;color:#1f2a44;border:1px solid #dbe4ff}
.notice.error{background:#fef2f2;color:#991b1b;border-color:#fecaca}
.notice.success{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}
.notice:empty{display:none}
.invalid{border-color:#ef4444!important;background:#fff5f5!important}
.field-hint{display:block;color:#64748b;font-size:.82rem;margin-top:4px}
.form-grid{display:grid;gap:12px}
.row-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.row-actions button{padding:8px 12px;border-radius:10px;border:0;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;cursor:pointer;font-family:inherit;font-size:.93rem;font-weight:500}
.row-actions .cta, .price-card .cta, .row-actions button.cta { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color:#fff; border:0; }
.details-panel{margin-top:10px;padding:8px;border:1px dashed #cbd5e1;border-radius:10px;background:#fafcff}

@media (max-width: 1400px) {
  .calendar-wrap { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  .calendar-wrap, .modal-grid { grid-template-columns: 1fr; }
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center}
  .menu{display:none;flex-direction:column;align-items:stretch;width:100%;margin-top:8px}
  .nav-inner.menu-open .menu{display:flex}
  .nav-inner{flex-wrap:wrap;position:relative}
  .menu a{width:100%;text-align:left}
  .day-tooltip { width: 88vw; max-width: 340px; }
  .modal-card { width: min(94vw, 620px); max-height: 78vh; }
  .calendar{gap:6px}
  .day{min-height:58px;padding:5px;font-size:.88rem}
  .day small{font-size:.72rem}
  .dashboard-tabs{display:flex;overflow:auto;white-space:nowrap}
  .dashboard-tab{flex:1 0 auto}
  #filtersCard{height:460px;max-height:460px}
}

.active-rsvp{background:linear-gradient(135deg,#0f9f6e,#10b981)!important;color:#fff!important}

.dashboard-layout{display:grid;grid-template-columns:280px 1fr;gap:14px;align-items:start}
.dashboard-sidebar{position:sticky;top:86px}
.dashboard-tabs{display:grid;gap:8px;margin:12px 0}
.dashboard-tab{width:100%;text-align:left;border:1px solid var(--border);background:#fff;padding:10px 12px;border-radius:10px;cursor:pointer;font-weight:600}
.dashboard-tab.active{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-color:transparent}
.dashboard-panel{display:none}
.dashboard-panel.active{display:block}
@media (max-width: 960px){.dashboard-layout{grid-template-columns:1fr}.dashboard-sidebar{position:static}}

@media (max-width: 460px){
  .container{width:min(1160px,95vw)}
  .day{min-height:52px;padding:4px}
  .filters select,.filters input{font-size:.92rem}
  input,textarea,select{font-size:16px}
  #filtersCard{height:420px;max-height:420px}
}

#authGrid{grid-template-columns:1fr}
@media (max-width: 900px){#authGrid{grid-template-columns:1fr}}


.auth-stack{display:grid;gap:18px;max-width:760px;margin:0 auto}
.auth-form{padding:22px}
.auth-form label{display:block;margin-top:12px}
.auth-form input{margin-top:6px}
.auth-form .cta{margin-top:14px}
.auth-form .consent-line{display:flex;gap:10px;align-items:flex-start;margin-top:10px}
.auth-form .consent-line input{margin-top:3px}

.consent-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:#fff}
.consent-row input[type="checkbox"]{width:20px;height:20px;flex:0 0 auto;margin:0}
.consent-row span{margin-right:8px;line-height:1.4}
.day-tooltip .event-item{display:block;width:100%;min-height:56px;text-align:left;overflow:auto}


.calendar-controls{display:grid;grid-template-columns:auto minmax(260px,1fr) auto;align-items:center;gap:10px;margin-bottom:8px}
.calendar-controls-center{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.calendar-controls-center select{width:min(100%,420px)}

.day-tooltip-item{display:block;width:100%;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--text);text-align:left;padding:10px 12px;margin-bottom:8px;cursor:pointer}
.day-tooltip-item:last-child{margin-bottom:0}
.day-tooltip-item:hover{background:#f8fafc}

#prevMonth,#nextMonth{border:0;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-radius:999px;padding:9px 12px;font-weight:600}
#prevMonth,#nextMonth{transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;cursor:pointer;white-space:nowrap}
#prevMonth:hover,#nextMonth:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 8px 20px rgba(79,70,229,.24)}
#prevMonth:active,#nextMonth:active{transform:translateY(0);filter:brightness(.98)}
#prevMonth:focus-visible,#nextMonth:focus-visible{outline:2px solid #c7d2fe;outline-offset:2px}

@media (max-width: 760px){
  .calendar-controls{grid-template-columns:auto 1fr auto;align-items:start}
  .calendar-controls-center{gap:6px}
}

@media (max-width: 520px){
  .calendar{grid-template-columns:repeat(auto-fit,minmax(76px,1fr));gap:6px}
  .day-heading{display:none}
  .day{min-height:70px;padding:6px}
  .day strong{font-size:.82rem}
  .day small{font-size:.68rem}
}

@media (max-width: 960px){
  .calendar-controls{grid-template-columns:auto 1fr auto;gap:8px}
  .calendar-controls-center select{width:100%}
}

@media (max-width: 640px){
  .calendar-controls{grid-template-columns:auto 1fr auto}
  #prevMonth,#nextMonth{padding:8px 11px;min-width:42px}
  .month-btn-label{display:none}
}

.payment-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.pay-badge{font-size:.72rem;padding:4px 8px;border:1px solid var(--border);border-radius:999px;background:#fff}.trust-note{font-size:.75rem;color:var(--muted);margin-top:6px}