:root{
  --bg: #163826;
  --surface: #f8fff8;
  --surface-strong: #ffffff;
  --surface-soft: #e2f1e4;
  --border: #c9dec9;
  --text: #1f3526;
  --muted: #5f7766;
  --primary: #3f9b57;
  --primary-dark: #2f7c44;
  --secondary: #7cc48e;
  --secondary-dark: #5e9f70;
  --info: #2f7fc1;
  --info-dark: #225f92;
  --danger: #b44742;
  --danger-dark: #8d3733;
  --shadow: 0 20px 45px rgba(31, 53, 38, 0.08);
}

*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(98, 178, 119, 0.20), transparent 28%),
    radial-gradient(circle at right 20%, rgba(63, 155, 87, 0.18), transparent 26%),
    linear-gradient(180deg, #214d35 0%, #163826 100%);
}

a{color:inherit}

.container{
  width:min(1180px, calc(100% - 32px));
  margin:32px auto 48px;
}

.top-tabs{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px;
  border:1px solid rgba(255,255,255,0.35);
  border-radius:24px;
  background:rgba(47,124,68,0.92);
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
}

.top-tabs a{
  padding:12px 18px;
  border-radius:16px;
  color:#f7efe5;
  text-decoration:none;
  font-weight:600;
}

.top-tabs a.active,
.top-tabs a:hover{
  background:rgba(255,255,255,0.12);
}

.nav-right{
  margin-left:auto;
}

.panel,
.auth-panel{
  background:rgba(255,250,243,0.92);
  border:1px solid rgba(217,200,178,0.85);
  border-radius:28px;
  padding:28px;
  box-shadow:var(--shadow);
}

.hero-panel{
  margin-top:18px;
  display:grid;
  grid-template-columns:1.5fr 0.9fr;
  gap:20px;
  align-items:end;
  background:
    linear-gradient(135deg, rgba(63,155,87,0.12), rgba(124,196,142,0.14)),
    rgba(255,250,243,0.95);
}

.hero-panel.compact{
  grid-template-columns:1.4fr 0.8fr;
}

.page-header{
  margin-top:18px;
}

.eyebrow,
.section-kicker{
  margin:0 0 10px;
  color:var(--primary-dark);
  text-transform:uppercase;
  letter-spacing:0.16em;
  font-size:12px;
  font-weight:800;
}

h1,h2,h3,p{margin-top:0}
h1{
  margin-bottom:12px;
  font-size:clamp(32px, 5vw, 48px);
  line-height:1.05;
}

h2{
  margin-bottom:10px;
  font-size:28px;
}

.hero-copy,
.soft-copy,
.row-subtitle,
.event-desc{
  color:var(--muted);
  line-height:1.6;
}

.hero-meta{
  color:var(--secondary-dark);
  font-weight:600;
}

.hero-actions,
.action-row,
.row-actions,
.vote-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.stats-grid,
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
}

.content-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:minmax(0, 1.7fr) minmax(280px, 0.9fr);
  gap:18px;
}

.single-main{
  grid-template-columns:minmax(0, 1fr);
}

.stack{
  display:grid;
  gap:18px;
}

.stat-card,
.event-card,
.subpanel{
  background:var(--surface-strong);
  border:1px solid var(--border);
  border-radius:22px;
  padding:20px;
}

.stat-card span{
  display:block;
  color:var(--muted);
  margin-bottom:10px;
}

.stat-card strong{
  font-size:38px;
  line-height:1;
}

.event-title,
.row-title{
  margin-bottom:6px;
  font-size:20px;
  font-weight:700;
}

.meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  color:var(--secondary-dark);
  font-size:14px;
  margin:14px 0;
}

.feature-list{
  margin:0;
  padding-left:18px;
  color:var(--text);
  line-height:1.8;
}

.feature-list li + li{
  margin-top:6px;
}

.section-head,
.list-row,
.term-head,
.profile-card,
.participant{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}

.list-table{
  display:grid;
}

.list-row{
  padding:18px 0;
  border-top:1px solid var(--border);
}

.list-row:first-child{
  border-top:none;
  padding-top:0;
}

.row-meta{
  display:grid;
  gap:6px;
  color:var(--muted);
  font-size:14px;
  min-width:170px;
}

.form-stack{
  display:grid;
  gap:18px;
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}

.form-grid label,
.term-editor-row label{
  display:grid;
  gap:8px;
  font-weight:600;
}

.full-width{
  grid-column:1 / -1;
}

.input{
  width:100%;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:16px;
  background:#fffdfa;
  color:var(--text);
  font:inherit;
}

textarea.input{
  resize:vertical;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:11px 18px;
  border:none;
  border-radius:15px;
  font:inherit;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  transition:transform .15s ease, opacity .15s ease, background .15s ease;
}

.btn:hover{
  transform:translateY(-1px);
}

.btn-small{
  min-height:38px;
  padding:8px 14px;
  font-size:14px;
}

.btn-primary{
  color:#fff7f1;
  background:linear-gradient(180deg, var(--primary), var(--primary-dark));
}

.btn-secondary{
  color:#eef8f6;
  background:linear-gradient(180deg, var(--secondary), var(--secondary-dark));
}

.btn-info{
  color:#f3f9ff;
  background:linear-gradient(180deg, var(--info), var(--info-dark));
}

.btn-ghost{
  color:var(--text);
  background:#e5f2e7;
}

.btn-danger{
  color:#fff3f3;
  background:linear-gradient(180deg, var(--danger), var(--danger-dark));
}

.alert{
  margin-top:18px;
  padding:14px 18px;
  border-radius:18px;
  border:1px solid transparent;
}

.alert-success{
  background:#edf8ee;
  border-color:#bdd9c1;
}

.alert-error{
  background:#fff1f0;
  border-color:#e6b8b4;
}

.accent-panel{
  background:
    linear-gradient(150deg, rgba(124,196,142,0.18), rgba(63,155,87,0.10)),
    var(--surface);
}

.danger-panel{
  background:#fff5f4;
  border-color:#e8c0bc;
}

.danger-panel.subtle{
  background:#fff8f7;
}

.empty-state{
  padding:28px;
  border:1px dashed var(--border);
  border-radius:20px;
  background:rgba(255,255,255,0.72);
}

.term-editor-list,
.participant-list{
  display:grid;
  gap:14px;
}

.term-editor-row{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:12px;
}

.avatar{
  width:40px;
  height:40px;
  border-radius:50%;
  background:linear-gradient(180deg, #62b277, #3f9b57);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  flex-shrink:0;
}

.avatar.large{
  width:72px;
  height:72px;
  font-size:26px;
}

.badge{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background:#ddefe1;
  color:var(--secondary-dark);
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.auth-body{
  display:grid;
  place-items:center;
  padding:24px;
}

.auth-shell{
  width:min(1080px, 100%);
  display:grid;
  grid-template-columns:1.2fr 0.9fr;
  gap:18px;
}

.brand-panel{
  min-height:540px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:
    linear-gradient(180deg, rgba(31,53,38,0.10), rgba(31,53,38,0.04)),
    linear-gradient(135deg, rgba(63,155,87,0.18), rgba(124,196,142,0.14)),
    var(--surface);
}

.form-panel{
  display:grid;
  align-content:center;
  gap:16px;
}

.auth-button{
  width:100%;
}

.text-link{
  color:var(--primary-dark);
  text-decoration:none;
  font-weight:700;
}

.text-link:hover{
  text-decoration:underline;
}

.inline-password-form{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.admin-password-input{
  min-width:220px;
  max-width:260px;
  padding:10px 14px;
}

.term-dialog{
  width:min(720px, calc(100% - 32px));
  border:none;
  border-radius:24px;
  padding:24px;
  background:var(--surface-strong);
  box-shadow:0 24px 60px rgba(31, 53, 38, 0.18);
}

.term-dialog::backdrop{
  background:rgba(20, 40, 24, 0.35);
}

.dialog-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  margin-bottom:18px;
}

.dialog-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}

.dialog-column{
  padding:16px;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--surface);
}

.dialog-close{
  border:none;
  border-radius:12px;
  background:#e5f2e7;
  color:var(--text);
  padding:10px 14px;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}

@media (max-width: 900px){
  .hero-panel,
  .content-grid,
  .auth-shell,
  .form-grid,
  .term-editor-row,
  .dialog-grid{
    grid-template-columns:1fr;
  }

  .top-tabs{
    flex-wrap:wrap;
  }

  .nav-right{
    margin-left:0;
  }

  .section-head,
  .list-row,
  .term-head,
  .profile-card,
  .participant,
  .dialog-head{
    flex-direction:column;
  }

  .row-meta{
    min-width:0;
  }
}