*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--gold:#c8a96e;--gold-dark:#a8893e;--dark:#2c2c2c;--mid:#6b6b6b;--light:#f5f0ea;--white:#ffffff;--border:#e8e0d5;--success:#2d7a4f;--error:#c0392b;--radius:8px;--shadow:0 2px 12px rgba(0,0,0,0.08)}
body{font-family:'Inter',sans-serif;font-size:15px;color:var(--dark);background:var(--light);line-height:1.6}
h1,h2,h3,h4{font-family:'Cormorant Garamond',serif;line-height:1.3}
h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.2rem}
a{color:var(--gold-dark);text-decoration:none}a:hover{text-decoration:underline}
.nav{background:var(--white);border-bottom:1px solid var(--border);padding:0 32px;height:60px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:var(--shadow)}
.nav-logo{display:flex;align-items:center;gap:10px;font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:600;color:var(--dark);text-decoration:none}
.nav-links{display:flex;align-items:center;gap:24px;font-size:14px}
.nav-links a{color:var(--mid)}.nav-links a:hover{color:var(--gold-dark);text-decoration:none}
.btn-link{background:none;border:none;cursor:pointer;color:var(--mid);font-size:14px;font-family:inherit;padding:0}
.main-content{min-height:calc(100vh - 120px)}
.page-container{max-width:1100px;margin:0 auto;padding:40px 24px}
.page-narrow{max-width:700px}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:32px;gap:16px;flex-wrap:wrap}
.page-header h1{margin-bottom:4px}.page-header p{color:var(--mid)}
.back-link{display:block;color:var(--mid);font-size:14px;margin-bottom:8px}
.card{background:var(--white);border-radius:var(--radius);border:1px solid var(--border);padding:32px;box-shadow:var(--shadow)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 20px;border-radius:var(--radius);border:none;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:all 0.15s;text-decoration:none;white-space:nowrap}
.btn-primary{background:var(--gold);color:var(--white)}.btn-primary:hover{background:var(--gold-dark);text-decoration:none;color:var(--white)}
.btn-outline{background:transparent;color:var(--dark);border:1px solid var(--border)}.btn-outline:hover{border-color:var(--gold);color:var(--gold-dark);text-decoration:none}
.btn-danger{background:var(--error);color:var(--white)}
.btn-sm{padding:6px 14px;font-size:13px}.btn-full{width:100%}
.form-section{border-bottom:1px solid var(--border);padding-bottom:28px;margin-bottom:28px}
.form-section:last-of-type{border-bottom:none}
.form-section h3{color:var(--gold-dark);margin-bottom:16px}
.form-group{margin-bottom:18px}
.form-group label{display:block;font-size:13px;font-weight:500;color:var(--mid);margin-bottom:6px;text-transform:uppercase;letter-spacing:0.5px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius);font-family:inherit;font-size:15px;color:var(--dark);background:var(--white);transition:border-color 0.15s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--gold)}
.form-group textarea{resize:vertical;min-height:80px}
.form-hint{font-size:12px;color:var(--mid);margin-top:4px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-actions{display:flex;gap:12px;justify-content:flex-end;padding-top:16px}
.alert{padding:12px 16px;border-radius:var(--radius);margin-bottom:20px;font-size:14px}
.alert-error{background:#fdf0ef;color:var(--error);border:1px solid #f5c6c2}
.alert-success{background:#edf7f1;color:var(--success);border:1px solid #b7e4c7}
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:0.5px}
.badge-success{background:#edf7f1;color:var(--success)}.badge-draft{background:#f5f0ea;color:var(--mid)}
.auth-page{background:var(--light);min-height:100vh;display:flex;align-items:center}
.auth-container{width:100%;max-width:440px;margin:0 auto;padding:40px 24px}
.auth-brand{text-align:center;margin-bottom:32px}
.auth-brand h1{font-size:1.8rem;color:var(--gold-dark)}.auth-brand p{color:var(--mid);margin-top:4px}
.auth-card{background:var(--white);border-radius:var(--radius);padding:40px;box-shadow:var(--shadow)}
.auth-card h2{margin-bottom:8px}.auth-subtitle{color:var(--mid);margin-bottom:24px;font-size:14px}
.auth-note{text-align:center;font-size:13px;color:var(--mid);margin-top:24px}
.events-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}
.event-card{background:var(--white);border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;box-shadow:var(--shadow);transition:box-shadow 0.2s}
.event-card:hover{box-shadow:0 4px 20px rgba(0,0,0,0.12)}
.event-card-image{height:160px;background-size:cover;background-position:center}
.event-card-image-placeholder{background:linear-gradient(135deg,var(--gold),var(--gold-dark));display:flex;align-items:center;justify-content:center;color:white;font-family:'Cormorant Garamond',serif;font-size:1.2rem;text-transform:capitalize}
.event-card-body{padding:20px 20px 12px}.event-card-body h3{margin-bottom:8px}
.event-meta{font-size:13px;color:var(--mid);display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.event-card-stats{display:flex;align-items:center;gap:12px}.stat{font-size:13px;color:var(--mid)}
.event-card-actions{padding:12px 20px 16px;display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid var(--border)}
.info-banner{background:#fef9f0;border:1px solid var(--gold);border-radius:var(--radius);padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.empty-state{text-align:center;padding:80px 24px}.empty-icon{font-size:3rem;margin-bottom:16px}
.empty-state h2{margin-bottom:8px}.empty-state p{color:var(--mid);margin-bottom:24px}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;background:var(--white)}
th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border);font-size:14px}
th{font-weight:600;color:var(--mid);font-size:12px;text-transform:uppercase;letter-spacing:0.5px;background:var(--light)}
tr:hover td{background:#faf7f3}
.usher-page{background:var(--dark);min-height:100vh;color:var(--white)}
.usher-container{max-width:480px;margin:0 auto;padding:60px 24px;text-align:center}
.usher-result{padding:24px;border-radius:var(--radius);margin-top:24px}
.usher-result.success{background:#1a3a2a;border:1px solid var(--success)}
.usher-result.error{background:#3a1a1a;border:1px solid var(--error)}
.event-hero{height:400px;background-size:cover;background-position:center;position:relative}
.event-hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0.2),rgba(0,0,0,0.6));display:flex;align-items:flex-end;padding:48px}
.event-hero-title{color:var(--white);font-size:3rem;text-shadow:0 2px 8px rgba(0,0,0,0.4)}
.event-public-content{max-width:800px;margin:0 auto;padding:48px 24px}
.event-section{margin-bottom:48px}
.event-section h2{color:var(--gold-dark);margin-bottom:20px;border-bottom:1px solid var(--border);padding-bottom:12px}
.footer{text-align:center;padding:24px;font-size:13px;color:var(--mid);border-top:1px solid var(--border);background:var(--white)}
@media(max-width:768px){
  .nav{padding:0 16px}
  .nav-links{gap:8px}
  .nav-links a{font-size:13px}
  .page-container{padding:16px}
  .page-narrow{max-width:100%}
  .card{padding:16px}
  .form-row{grid-template-columns:1fr}
  .page-header{flex-direction:column;align-items:flex-start;gap:12px}
  .page-header h1{font-size:1.5rem}
  .events-grid{grid-template-columns:1fr}
  .form-actions{flex-direction:column}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:480px;font-size:13px}
  .seating-layout{grid-template-columns:1fr!important}
  .upgrade-modal{padding:24px 16px!important}
  .quick-actions{flex-wrap:wrap;gap:8px}
  .quick-actions a,.quick-actions button{font-size:12px;padding:6px 10px}
  .btn{padding:10px 16px;font-size:14px}
  #headcount-bar{gap:8px!important}
  #headcount-bar > div{padding:12px 16px!important}
  .event-section{padding:24px 16px!important}
  .event-section h2{font-size:1.5rem}
  .event-hero{height:200px!important}
  .event-hero-title{font-size:2rem!important}
}

@media(max-width:480px){
  .nav-links a:not(:last-child){display:none}
  .page-header h1{font-size:1.2rem}
  .card{padding:12px}
  .cd-num{font-size:1.8rem!important}
  #countdown{gap:12px!important}
  #usher-form input{font-size:1.2rem!important}
  .admin-stats{grid-template-columns:1fr!important}
  .btn-full{width:100%;text-align:center}
}

/* ── Tier lock overlay ───────────────────────────────────────────────────── */
.tier-locked {
  position: relative;
  pointer-events: none;
}

.tier-locked::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(245, 240, 234, 0.85);
  border-radius: var(--radius);
  z-index: 10;
  backdrop-filter: blur(2px);
}

.tier-lock-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  text-align: center;
  pointer-events: all;
}

.tier-lock-badge .lock-icon { font-size: 2rem; margin-bottom: 8px; }
.tier-lock-badge h4 { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; color: var(--dark); margin-bottom: 4px; }
.tier-lock-badge p { font-size: 13px; color: var(--mid); margin-bottom: 16px; }

.tier-section-wrap { position: relative; }

/* Upgrade modal */
.upgrade-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.upgrade-modal-overlay.active { display: flex; }
.upgrade-modal {
  background: var(--white);
  border-radius: 12px;
  padding: 40px;
  max-width: 480px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  text-align: center;
}
.upgrade-modal h2 { color: var(--gold-dark); margin-bottom: 8px; }
.upgrade-modal p { color: var(--mid); margin-bottom: 24px; font-size: 14px; }
.upgrade-options { display: grid; gap: 12px; margin-bottom: 24px; text-align: left; }
.upgrade-option {
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.15s;
}
.upgrade-option:hover { border-color: var(--gold); }
.upgrade-option strong { display: block; margin-bottom: 4px; }
.upgrade-option span { font-size: 13px; color: var(--mid); }
.upgrade-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--mid);
}

/* ── Sidebar Layout ──────────────────────────────────────────────────────── */
:root {
  --sidebar-width: 220px;
  --sidebar-bg: #F2EFE7;
  --sidebar-border: #e0d8cc;
  --sidebar-active: #8F2E24;
  --sidebar-text: rgba(59,42,33,0.6);
  --sidebar-text-active: #8F2E24;
  --mobile-topbar-h: 52px;
  --mobile-bottomnav-h: 58px;
}

body.has-sidebar { margin: 0; }

/* Sidebar */
.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  z-index: 200;
  overflow-y: auto;
}

.sidebar-logo {
  padding: 16px 14px 12px;
  border-bottom: 1px solid var(--sidebar-border);
  background: #fff;
}
.sidebar-logo a { display: flex; flex-direction: column; align-items: center; text-decoration: none; }
.sidebar-logo-img { width: 100%; max-height: 60px; object-fit: contain; display: block; }
.sidebar-logo-text { font-size: 10px; color: #A8893D; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 6px; }

.sidebar-plan {
  padding: 10px 14px;
  border-bottom: 1px solid var(--sidebar-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.plan-badge {
  background: #8F2E24;
  color: #fff;
  font-size: 10px;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: capitalize;
  letter-spacing: 0.3px;
}
.sidebar-user { font-size: 11px; color: var(--sidebar-text); }

.sidebar-nav {
  flex: 1;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--sidebar-text);
  font-size: 13px;
  background: none;
  border: none;
  width: 100%;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.sidebar-item i { font-size: 17px; color: rgba(59,42,33,0.4); transition: color 0.15s; }
.sidebar-item:hover { background: rgba(143,46,36,0.06); color: #8F2E24; }
.sidebar-item:hover i { color: #8F2E24; }
.sidebar-item.active { background: rgba(143,46,36,0.1); color: #8F2E24; font-weight: 500; }
.sidebar-item.active i { color: #8F2E24; }
.sidebar-child { padding-left: 20px; font-size: 12px; }
.sidebar-logout { color: rgba(59,42,33,0.35); }
.sidebar-logout i { color: rgba(59,42,33,0.25); }
.sidebar-divider { height: 1px; background: var(--sidebar-border); margin: 6px 0; }

/* Main content offset */
.main-content.with-sidebar {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
}

/* Overlay */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(59,42,33,0.45);
  z-index: 199;
}
.sidebar-overlay.active { display: block; }

/* Mobile topbar — hidden on desktop */
.mobile-topbar { display: none; }
.mobile-bottom-nav { display: none; }

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    width: 260px;
    top: 0;
  }
  .sidebar.open { transform: translateX(0); }

  .main-content.with-sidebar {
    margin-left: 0;
    padding-top: var(--mobile-topbar-h);
    padding-bottom: var(--mobile-bottomnav-h);
  }

  .mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: var(--mobile-topbar-h);
    background: #F2EFE7;
    border-bottom: 1px solid var(--sidebar-border);
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 150;
  }
  .mobile-menu-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #8F2E24;
    font-size: 22px;
    display: flex;
    align-items: center;
    padding: 4px;
  }
  .mobile-logo { height: 30px; object-fit: contain; }

  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--mobile-bottomnav-h);
    background: #F2EFE7;
    border-top: 1px solid var(--sidebar-border);
    z-index: 150;
  }
  .mobile-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: rgba(59,42,33,0.45);
    font-size: 9px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
  }
  .mobile-nav-item i { font-size: 20px; }
  .mobile-nav-item.active { color: #8F2E24; }
  .mobile-nav-item.active i { color: #8F2E24; }

  /* Hide old nav */
  .nav { display: none; }
}

/* Hide old nav when sidebar is active */
@media (min-width: 769px) {
  .has-sidebar .nav { display: none; }
}
