:root{
  --bg:#f4f5f7;
  --card:#ffffff;
  --text:#1d2430;
  --muted:#68707d;
  --border:#dfe3e8;
  --accent:#243b64;
  --danger:#9f1d20;
  --ok:#1f6f43;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}

a{color:inherit;text-decoration:none}

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.85rem 1.25rem;
  background:#fff;
  border-bottom:1px solid var(--border);
}

.brand{font-weight:750}

.topbar nav{
  display:flex;
  gap:.9rem;
  flex-wrap:wrap;
  font-size:.95rem;
}

.page{
  position:relative;
  width:min(1100px,calc(100% - 2rem));
  margin:0 auto;
  padding:1.4rem 0 3rem;
  min-height:80vh;
}

.watermark{
  position:fixed;
  inset:45% auto auto 50%;
  transform:translate(-50%,-50%) rotate(-10deg);
  font-size:clamp(4rem,16vw,12rem);
  font-weight:900;
  letter-spacing:.08em;
  opacity:.025;
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
}

.hero{text-align:center;padding:1rem 0 1.5rem}
.hero h1{margin:.2rem 0;font-size:clamp(1.7rem,4vw,2.6rem)}
.subtitle{color:var(--muted);margin:.25rem 0}

.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin:1rem 0;
}

.rep-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1rem;
}

.rep-card,.form-card,.detail-card,.admin-card,.login-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 4px 14px rgba(0,0,0,.04);
}

.rep-card{
  padding:1.15rem;
  transition:transform .12s ease,box-shadow .12s ease;
}

.rep-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.08)}
.rep-date{font-weight:700;font-size:1.08rem}
.rep-count{font-size:1.7rem;font-weight:800;margin:.5rem 0}
.status{color:var(--ok);font-weight:650}
.status.full{color:var(--danger)}

.button,button{
  border:0;
  border-radius:10px;
  padding:.72rem 1rem;
  font:inherit;
  font-weight:700;
  cursor:pointer;
  display:inline-block;
}

.primary{background:var(--accent);color:#fff}
.secondary{background:#e8edf5;color:var(--accent)}
.danger{background:#f8e6e7;color:var(--danger);margin-top:1rem}

.form-card,.detail-card,.login-card{
  max-width:720px;
  margin:1rem auto;
  padding:1.25rem;
}

.login-card{max-width:430px;margin-top:10vh}

.form-grid{
  display:grid;
  gap:1rem;
}

label{font-weight:650;display:grid;gap:.35rem}

input,textarea,select{
  width:100%;
  padding:.78rem .85rem;
  border:1px solid #cdd3da;
  border-radius:9px;
  font:inherit;
  background:#fff;
}

textarea{min-height:90px;resize:vertical}

.check{
  display:flex;
  grid-template-columns:none;
  align-items:center;
  gap:.6rem;
  font-weight:600;
}

.check input{width:1.2rem;height:1.2rem}

.reservation-list{
  display:grid;
  gap:.55rem;
}

.reservation-row{
  background:#fff;
  border:1px solid var(--border);
  border-radius:11px;
  padding:.85rem 1rem;
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:.8rem;
  align-items:center;
}

.reservation-row small{
  display:block;
  color:var(--muted);
  margin-top:.15rem;
}

.places{font-weight:800;white-space:nowrap}

.badge{
  display:inline-block;
  background:#edf0f4;
  border-radius:999px;
  padding:.28rem .55rem;
  font-size:.82rem;
  font-weight:750;
}

.badges{display:flex;gap:.4rem;flex-wrap:wrap}

.detail-card dl{
  display:grid;
  grid-template-columns:160px 1fr;
  gap:.55rem 1rem;
}

.detail-card dt{color:var(--muted)}
.detail-card dd{margin:0;font-weight:650}

.spectators{display:grid;gap:.4rem}
.spectator{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.65rem .75rem;
  border:1px solid var(--border);
  border-radius:9px;
}

.search-form{
  display:grid;
  grid-template-columns:1fr auto;
  gap:.6rem;
  margin-bottom:1rem;
}

.admin-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:1rem;
}

.admin-card{padding:1rem}
.admin-line{padding:.55rem 0;border-bottom:1px solid var(--border)}
.admin-line:last-child{border-bottom:0}

.empty{
  padding:1rem;
  color:var(--muted);
  text-align:center;
}

.messages{display:grid;gap:.5rem;margin-bottom:1rem}
.message{
  padding:.75rem 1rem;
  border-radius:9px;
  background:#eef1f4;
}
.message.success{background:#e7f4ec;color:#175a35}
.message.error{background:#fae9ea;color:#85181c}

.spectator-edit{
  padding-top:.5rem;
  border-top:1px solid var(--border);
  display:grid;
  gap:.75rem;
}

@media (max-width:650px){
  .topbar{
    align-items:flex-start;
    flex-direction:column;
    padding:.7rem 1rem;
  }

  .topbar nav{
    width:100%;
    justify-content:space-between;
    gap:.45rem;
    font-size:.87rem;
  }

  .page{
    width:min(100% - 1rem,1100px);
    padding-top:.8rem;
  }

  .stack-mobile{
    align-items:stretch;
    flex-direction:column;
  }

  .stack-mobile .button{
    text-align:center;
    width:100%;
  }

  .reservation-row{
    grid-template-columns:1fr auto;
  }

  .reservation-row .badge{
    grid-column:1 / -1;
    width:max-content;
  }

  .detail-card dl{
    grid-template-columns:1fr;
    gap:.15rem;
  }

  .detail-card dd{
    margin-bottom:.6rem;
  }

  .search-form{
    grid-template-columns:1fr;
  }

  input,textarea,select,button,.button{
    min-height:46px;
  }

  .watermark{
    display:none;
  }
}

.rep-edit-form{
  border-top:1px solid var(--border);
  padding-top:.85rem;
  margin-top:.85rem;
}
.rep-edit-form:first-of-type{
  border-top:0;
  padding-top:0;
  margin-top:0;
}
.rep-edit-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.75rem;
}
.rep-actions{
  margin-top:.75rem;
}
.compact{
  min-height:auto;
  padding:.48rem .7rem;
}
@media (max-width:650px){
  .rep-edit-grid{grid-template-columns:1fr}
}

.admin-user-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.75rem;
}
.admin-user-line form{margin:0}
.people-list{
  max-height:420px;
  overflow:auto;
}
.people-list small{
  display:block;
  color:var(--muted);
  margin-top:.15rem;
}
hr{
  border:0;
  border-top:1px solid var(--border);
  margin:1rem 0;
}

.piece-title{margin:.1rem 0 .25rem;font-size:clamp(2rem,5vw,3.4rem);line-height:1.05;font-weight:850}
.season-title{margin:0;font-size:clamp(1rem,2.1vw,1.35rem);color:var(--muted);font-weight:650}
.danger-zone{border-color:#e9b9bb}
.danger-zone h2{color:var(--danger)}


/* V4.3 */
.rep-time{margin-top:.12rem;color:var(--muted);font-weight:700}
.date-heading{margin-bottom:.1rem}
.time-heading,.form-time{color:var(--muted);font-weight:700;margin:.1rem 0 .65rem}
.form-date{font-weight:800;font-size:1.08rem;margin-top:.25rem}
.date-nav{display:flex;gap:.5rem;overflow-x:auto;padding:.25rem 0 .8rem;margin-bottom:.2rem;scrollbar-width:thin}
.date-nav-item{flex:0 0 auto;min-width:155px;background:#fff;border:1px solid var(--border);border-radius:10px;padding:.6rem .75rem}
.date-nav-item span,.date-nav-item small{display:block}
.date-nav-item small{margin-top:.2rem;color:var(--muted);font-weight:700}
.date-nav-item.current{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.form-actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.field-help{color:var(--muted);font-weight:500;font-size:.86rem}
.spectator-edit-line>span{display:flex;gap:.5rem;align-items:center}

.admin-dashboard{display:grid;grid-template-columns:minmax(220px,.9fr) minmax(320px,1.35fr) minmax(260px,1fr) minmax(280px,1.05fr);gap:1rem;align-items:start}
.admin-column{display:grid;gap:1rem;align-content:start}
.admin-card h2{margin-top:.15rem}
.admin-fixed-scroll{max-height:calc(100vh - 190px);overflow:auto;padding-right:.25rem;scrollbar-width:thin}
.admin-rep-item{padding:.75rem 0;border-bottom:1px solid var(--border)}
.admin-rep-item:last-child{border-bottom:0}
.admin-rep-summary{display:grid;gap:.12rem;margin-bottom:.45rem}
.admin-rep-summary span,.admin-rep-summary small{color:var(--muted)}
.admin-rep-summary small{font-size:.82rem}
.admin-reps-card .rep-edit-form{margin-top:.25rem;padding-top:0;border-top:0}
.admin-reps-card .rep-edit-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem}
.compact-form{gap:.65rem}
.compact-form input,.compact-form select,.compact-form textarea{padding:.58rem .65rem;min-height:38px}
.compact-form textarea{min-height:58px}
.people-add-form{grid-template-columns:1fr 1fr}
.people-add-form button{grid-column:1/-1}
.admin-people-card .people-list{max-height:calc(100vh - 430px);min-height:220px}
.admin-reset-card{margin-top:1rem}
.reset-form{display:flex;gap:.75rem;align-items:end;flex-wrap:wrap}
.reset-form label{min-width:260px;flex:1}

@media (max-width:1200px){
  .admin-dashboard{grid-template-columns:repeat(2,minmax(0,1fr))}
  .admin-fixed-scroll,.admin-people-card .people-list{max-height:520px}
}
@media (max-width:700px){
  .admin-dashboard{grid-template-columns:1fr}
  .admin-fixed-scroll,.admin-people-card .people-list{max-height:none}
  .people-add-form{grid-template-columns:1fr}
  .people-add-form button{grid-column:auto}
  .date-nav-item{min-width:145px}
  .form-actions .button,.form-actions button{width:100%;text-align:center}
}

.top-actions{
  display:flex;
  gap:.6rem;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.top-form-actions{
  display:flex;
  justify-content:flex-end;
  margin:.4rem 0 1rem;
}
@media (max-width:650px){
  .top-actions,
  .top-form-actions{
    width:100%;
  }
  .top-actions .button,
  .top-form-actions .button{
    width:100%;
    text-align:center;
  }
}