:root {
  --bg: #0a0e17;
  --bg2: #0f1522;
  --panel: #141b2b;
  --panel2: #1b2436;
  --line: #263251;
  --text: #eaf0fb;
  --muted: #9aa7bd;
  --faint: #6b7689;
  --accent: #6d5efc;
  --accent-2: #22d3ee;
  --good: #2dd4a7;
  --warn: #f5b454;
  --bad: #f06b6b;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 16px 50px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(109, 94, 252, 0.16), transparent 60%),
    radial-gradient(900px 500px at 0% 0%, rgba(34, 211, 238, 0.10), transparent 55%),
    var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  line-height: 1.5;
  min-height: 100vh;
}

.wrap { max-width: 980px; margin: 0 auto; padding: 22px 18px 80px; }
.wrap-wide { max-width: 1280px; }

/* ---- top bar ---- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 22px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand .mark {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid; place-items: center; font-weight: 800; color: #06101c;
  box-shadow: 0 6px 22px rgba(109, 94, 252, 0.4);
}
.brand h1 { font-size: 18px; margin: 0; letter-spacing: -0.2px; font-weight: 700; }
.brand .sub { color: var(--muted); font-size: 12.5px; margin-top: 1px; }

/* ---- panels ---- */
.panel {
  background: linear-gradient(180deg, var(--panel), var(--bg2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.panel + .panel { margin-top: 18px; }
.panel h2 { margin: 0 0 4px; font-size: 17px; letter-spacing: -0.2px; }
.panel .hint { color: var(--muted); font-size: 13px; margin: 0 0 16px; }

.eyebrow {
  text-transform: uppercase; letter-spacing: 1.6px; font-size: 11px;
  color: var(--accent-2); font-weight: 700; margin-bottom: 8px;
}

/* ---- forms ---- */
label.field { display: block; margin-bottom: 14px; }
label.field > span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
input[type="text"], input[type="password"], textarea, select {
  width: 100%; padding: 11px 13px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: #0c121e; color: var(--text);
  font-size: 14.5px; font-family: inherit; outline: none; transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(109, 94, 252, 0.18);
}
textarea { resize: vertical; min-height: 70px; }
::placeholder { color: var(--faint); }

/* ---- buttons ---- */
.btn {
  appearance: none; border: 1px solid transparent; cursor: pointer; touch-action: manipulation;
  font-family: inherit; font-size: 14px; font-weight: 650; border-radius: var(--radius-sm);
  padding: 11px 18px; color: #07101d; background: linear-gradient(135deg, var(--accent), #8b7bff);
  transition: transform .08s ease, filter .15s, background .15s; display: inline-flex;
  align-items: center; gap: 8px; justify-content: center;
}
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--accent); background: rgba(109, 94, 252, 0.08); }
.btn.danger { background: transparent; color: var(--bad); border-color: rgba(240, 107, 107, 0.4); }
.btn.danger:hover { background: rgba(240, 107, 107, 0.12); }
.btn.sm { padding: 7px 12px; font-size: 12.5px; }
.btn.block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- status badges ---- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .6px;
}
.badge.draft { background: rgba(155, 167, 189, 0.14); color: var(--muted); }
.badge.live { background: rgba(45, 212, 167, 0.16); color: var(--good); }
.badge.closed { background: rgba(245, 180, 84, 0.16); color: var(--warn); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.live .dot { animation: pulse 1.4s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* ---- rating segmented control ---- */
.rate { display: inline-flex; gap: 5px; }
.rate button {
  width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line);
  background: #0c121e; color: var(--muted); font-weight: 700; font-size: 14px; cursor: pointer;
  transition: all .12s; font-family: inherit; touch-action: manipulation;
}
.rate button:hover { border-color: var(--accent); color: var(--text); }
.rate button.on {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #06101c;
  border-color: transparent;
}

/* ---- participant rating card ---- */
.pcard { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px; background: var(--panel2); }
.pcard h3 { margin: 0 0 12px; font-size: 15.5px; display: flex; align-items: center; gap: 10px; }
.pcard .pnum { width: 24px; height: 24px; border-radius: 7px; background: rgba(109,94,252,.18); color: var(--accent-2); font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.crow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px dashed rgba(38, 50, 81, 0.7); }
.crow:first-of-type { border-top: none; }
.crow .clabel { font-size: 14px; color: var(--text); }
/* guidance shown under a criterion on the rating form */
.chint { font-size: 12.5px; color: var(--muted); font-style: italic; margin-top: 3px; line-height: 1.4; overflow-wrap: anywhere; max-width: 52ch; }
/* admin criteria editor: label input + optional hint input per criterion */
.crit-row { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; }
.crit-row .crit-fields { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.crit-row input.crit-hint { font-size: 13px; color: var(--muted); }
.crit-row .btn.sm { flex: none; }

/* ---- results ---- */
.metrics { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.metric { flex: 1; min-width: 130px; background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.metric .n { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; }
.metric .l { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .8px; margin-top: 2px; }

.lb-item { padding: 14px 0; border-top: 1px solid var(--line); }
.lb-item:first-child { border-top: none; }
.lb-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.lb-rank { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--panel2); border: 1px solid var(--line); color: var(--muted); flex: none; }
.lb-rank.top { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #06101c; border-color: transparent; }
.lb-name { font-weight: 650; font-size: 15px; flex: 1; }
.lb-score { font-weight: 800; font-size: 16px; }
.lb-score small { color: var(--muted); font-weight: 600; font-size: 12px; }
.bar { height: 9px; border-radius: 999px; background: #0c121e; overflow: hidden; border: 1px solid var(--line); }
.bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .6s cubic-bezier(.2,.7,.2,1); }
.crit-bars { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
@media (max-width: 640px) { .crit-bars { grid-template-columns: 1fr; } }
.cb { font-size: 12px; }
.cb .cb-top { display: flex; justify-content: space-between; color: var(--muted); margin-bottom: 4px; }
.cb .bar { height: 6px; }

.comments { margin-top: 8px; }
.comment { padding: 10px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.comment .who { color: var(--accent-2); font-weight: 650; font-size: 12.5px; }

/* ---- misc ---- */
.notice { padding: 11px 14px; border-radius: var(--radius-sm); font-size: 13.5px; margin-bottom: 14px; }
.notice.ok { background: rgba(45, 212, 167, 0.12); color: var(--good); border: 1px solid rgba(45, 212, 167, 0.3); }
.notice.err { background: rgba(240, 107, 107, 0.12); color: var(--bad); border: 1px solid rgba(240, 107, 107, 0.3); }
.empty { text-align: center; padding: 50px 20px; color: var(--muted); }
.empty .big { font-size: 19px; color: var(--text); margin-bottom: 6px; font-weight: 650; }
.muted { color: var(--muted); }
.spin { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: rot .7s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chip-input { display: flex; gap: 8px; margin-bottom: 8px; }
.chip-input input { flex: 1; }
.live-flag { font-size: 12px; color: var(--good); display: inline-flex; align-items: center; gap: 6px; }
.fade-in { animation: fade .35s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
a { color: var(--accent-2); }

/* ---------- quick-start template picker ---------- */
.tpl-trigger { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.tpl-overlay { position: fixed; inset: 0; background: rgba(6, 10, 18, 0.72); display: grid; place-items: center; padding: 20px; z-index: 50; animation: fade .2s ease; }
.tpl-overlay .panel { width: min(580px, 100%); max-height: 84vh; display: flex; flex-direction: column; overflow: hidden; }
.tpl-head { flex: none; }
.tpl-hint { flex: none; margin-top: 6px; margin-bottom: 10px; }
.tpl-list { overflow-y: auto; margin: 0 -4px; padding: 0 4px 2px; }
.tpl-card { cursor: pointer; transition: border-color .12s, transform .06s; }
.tpl-card:hover { border-color: var(--accent); }
.tpl-card:active { transform: translateY(1px); }
.tpl-card:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(109, 94, 252, 0.25); }

/* ---------- mobile / small screens ---------- */
@media (max-width: 560px) {
  .wrap { padding: 16px 13px 70px; }
  .panel { padding: 17px 15px; border-radius: 12px; }
  .brand h1 { font-size: 16px; }
  .brand .mark { width: 34px; height: 34px; }
  .topbar { gap: 10px; margin-bottom: 16px; }

  /* rating rows: label on its own line, 5 full-width tap targets below */
  .pcard { padding: 14px 13px; }
  .crow { flex-direction: column; align-items: stretch; gap: 9px; padding: 11px 0; }
  .crow .clabel { font-size: 13.5px; font-weight: 600; }
  .rate { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; width: 100%; }
  .rate button { width: 100%; height: 46px; font-size: 16px; border-radius: 10px; }

  /* metrics: two per row, filling width */
  .metric { min-width: 0; flex: 1 1 calc(50% - 7px); }
  .metric .n { font-size: 23px; }

  /* inputs comfortable to tap, 16px avoids iOS zoom-on-focus */
  input[type="text"], input[type="password"], textarea, select { font-size: 16px; padding: 12px 13px; }
  .btn { padding: 12px 16px; }
}

@media (max-width: 380px) {
  .rate button { height: 44px; font-size: 15px; }
  .lb-name { font-size: 14px; }
}