@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --ink:#1F2A24;
  --paper:#EFE9DA;
  --paper-2:#E4DCC8;
  --gold:#C89B3C;
  --teal:#2F6F62;
  --rose:#B5473A;
  --line: rgba(31,42,36,0.14);
  --shadow: 0 2px 10px rgba(31,42,36,0.08);
  --shadow-hover: 0 4px 16px rgba(31,42,36,0.13);
}
*{box-sizing:border-box;}
html,body{margin:0;background:var(--paper);}
body{
  color:var(--ink);
  font-family:'IBM Plex Sans', -apple-system, sans-serif;
}
a{color:var(--teal);}
.tag{max-width:640px;margin:0 auto;padding:32px 20px 48px;}

.hero{
  border:1.5px solid var(--ink);
  border-radius:6px;
  padding:28px 24px;
  margin-bottom:28px;
  background:#fff;
  box-shadow:var(--shadow);
}
.eyebrow-row{
  font-size:12px;letter-spacing:.06em;opacity:.65;margin-bottom:14px;
  font-family:'IBM Plex Mono', monospace;
  text-transform:uppercase;
}
.hero h1{
  font-family:'Fraunces', serif;font-weight:600;font-size:34px;line-height:1.1;
  margin:0;letter-spacing:-0.01em;
}
.field-label{font-size:12px;font-family:'IBM Plex Mono', monospace;letter-spacing:.03em;opacity:.7;display:block;margin-bottom:6px;}

.select-status{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:13px;}
.select-count{font-family:'IBM Plex Mono', monospace;transition:color .15s ease;}
.select-count.full{color:var(--rose);font-weight:600;}

.brand-list{border-top:1.5px solid var(--ink);}
.brand-row{border-bottom:1px solid var(--line);padding:13px 4px;border-radius:3px;transition:background-color .15s ease;}
.brand-row:hover{background:rgba(47,111,98,0.05);}
.brand-row.checked{background:rgba(200,155,60,0.1);}
.brand-row.checked:hover{background:rgba(200,155,60,0.15);}
.brand-head{display:flex;align-items:flex-start;gap:12px;cursor:pointer;}
.brand-checkbox{margin-top:3px;width:17px;height:17px;accent-color:var(--teal);flex-shrink:0;cursor:pointer;}
.brand-name{font-weight:600;font-size:15.5px;}
.brand-desc{font-size:13px;opacity:.72;line-height:1.4;margin-top:3px;}

.rating-row{display:flex;gap:6px;margin:10px 0 2px 29px;}
.rate-btn-label{cursor:pointer;}
.rate-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:1.5px solid var(--ink);background:#fff;border-radius:4px;
  font-family:'IBM Plex Mono', monospace;font-size:14px;font-weight:600;color:var(--ink);
  transition:background-color .12s ease, border-color .12s ease, transform .08s ease;
}
.rate-btn-label:hover .rate-btn{border-color:var(--gold);}
.rate-btn-label:active .rate-btn{transform:scale(0.94);}
.rate-btn.active{background:var(--gold);border-color:var(--gold);}
input:focus-visible + .rate-btn{outline:2px solid var(--teal);outline-offset:2px;}

.warn-banner{
  background:rgba(181,71,58,0.1);border:1px solid var(--rose);color:var(--rose);
  font-size:13px;padding:9px 12px;border-radius:4px;margin-bottom:14px;
}
.success-banner{
  background:rgba(47,111,98,0.1);border:1px solid var(--teal);color:var(--teal);
  font-size:13px;padding:9px 12px;border-radius:4px;margin-bottom:14px;
}
.field-input{
  width:100%;padding:10px 12px;border:1.5px solid var(--ink);border-radius:4px;
  font-family:'IBM Plex Sans', sans-serif;font-size:14px;color:var(--ink);
  margin-bottom:10px;transition:border-color .15s ease;background:#fff;
}
.field-input:focus-visible{outline:2px solid var(--teal);outline-offset:1px;}
.invite-form{display:flex;flex-direction:column;align-items:stretch;}
.invite-form .field-input{max-width:360px;}
.invite-form .ghost-btn{align-self:flex-start;margin-top:2px;}
.submit-btn{
  width:100%;padding:14px;margin-top:24px;background:var(--ink);color:var(--paper);
  border:none;border-radius:4px;font-size:15px;font-weight:600;cursor:pointer;
  transition:background-color .15s ease, transform .08s ease;
}
.submit-btn:hover{background:#2c3a32;}
.submit-btn:active{transform:scale(0.99);}
.submit-btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
.submit-btn:disabled{opacity:.5;cursor:not-allowed;}

.confirm-box{text-align:center;padding:40px 20px;border:1.5px solid var(--ink);border-radius:6px;background:#fff;box-shadow:var(--shadow);}
.confirm-box h2{font-family:'Fraunces', serif;font-size:24px;margin:0 0 10px;}
.link-btn{background:none;border:none;text-decoration:underline;color:var(--teal);font-size:14px;cursor:pointer;padding:0;}
.link-btn:hover{color:#255a4f;}

.lock-box{border:1.5px solid var(--ink);border-radius:6px;padding:32px 24px;text-align:center;background:#fff;box-shadow:var(--shadow);}
.lock-box h2{font-family:'Fraunces', serif;font-size:22px;margin:0 0 8px;}
.lock-box code{background:var(--paper-2);padding:1px 6px;border-radius:3px;font-family:'IBM Plex Mono', monospace;font-size:12.5px;}
.lock-input{width:100%;max-width:220px;padding:10px 12px;border:1.5px solid var(--ink);border-radius:4px;text-align:center;font-family:'IBM Plex Mono', monospace;font-size:15px;margin-bottom:12px;transition:border-color .15s ease;}
.lock-input:focus-visible{outline:2px solid var(--teal);outline-offset:1px;}
.unlock-btn{padding:10px 20px;background:var(--ink);color:var(--paper);border:none;border-radius:4px;font-weight:600;cursor:pointer;font-size:14px;transition:background-color .15s ease;}
.unlock-btn:hover{background:#2c3a32;}
.unlock-btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}

.results-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px;}
.ghost-btn{background:#fff;border:1.5px solid var(--ink);border-radius:4px;padding:7px 12px;font-size:13px;cursor:pointer;color:var(--ink);transition:background-color .15s ease;}
.ghost-btn:hover{background:var(--paper-2);}
.ghost-btn.danger{border-color:var(--rose);color:var(--rose);}
.ghost-btn.danger:hover{background:rgba(181,71,58,0.08);}
.ghost-btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}

.rank-row{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line);border-radius:3px;transition:background-color .15s ease;}
.rank-row:hover{background:rgba(31,42,36,0.03);}
.rank-num{font-family:'IBM Plex Mono', monospace;font-size:13px;opacity:.55;width:20px;}
.rank-name{font-weight:600;font-size:14.5px;flex:1;}
.rank-bar-wrap{flex:1;max-width:120px;height:8px;background:var(--paper-2);border-radius:4px;overflow:hidden;}
.rank-bar{height:100%;background:var(--gold);border-radius:4px;transition:width .4s ease;}
.rank-score{font-family:'IBM Plex Mono', monospace;font-size:13px;width:90px;text-align:right;}

.voters-section{margin-top:34px;}
.voters-section h3{font-family:'Fraunces', serif;font-size:17px;margin:0 0 12px;}
.voter-card{border:1px solid var(--line);border-radius:4px;padding:10px 12px;margin-bottom:8px;font-size:13px;background:#fff;transition:box-shadow .15s ease;}
.voter-card:hover{box-shadow:var(--shadow);}
.voter-name{font-weight:600;margin-bottom:4px;}
.voter-picks{opacity:.8;line-height:1.5;}
.empty-note{font-size:13px;opacity:.6;padding:14px 0;}

.site-footer{
  text-align:center;font-size:11.5px;opacity:.45;margin-top:40px;
  font-family:'IBM Plex Mono', monospace;letter-spacing:.02em;
}

@media (max-width:480px){
  .tag{padding:22px 14px 36px;}
  .hero{padding:22px 18px;}
  .hero h1{font-size:27px;}
  .rank-bar-wrap{max-width:70px;}
  .rank-score{width:74px;font-size:12px;}
}