:root {
  --primary-color: #2563eb;
  --secondary-color: #64748b;
  --background: #f8fafc;
  --accent: #10b981;
  --danger: #ef4444;
  --chip-infrastructure: #fee2e2;
  --chip-education: #c7d2fe;
  --chip-healthcare: #bbf7d0;
  --chip-environment: #dcfce7;
}

html, body {
  min-height: 100%;
  background: var(--background);
  color: #222;
  font-family: 'Segoe UI', Arial, sans-serif;
  margin: 0;
  padding: 0;
  font-size: 17px;
}
a { color: var(--primary-color); text-decoration: none; }
.navbar {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 1em 2em;
}
.nav-logo { display: flex; align-items: center; }
.nav-logo img { margin-right: 0.8em; }
.nav-title { font-size: 1.5em; font-weight: 600; color: var(--primary-color);}
.nav-menu { display: flex; gap: 2em;}
.nav-menu a { color: var(--secondary-color); font-weight: 500; padding-bottom:2px;}
.nav-menu a.active, .nav-menu a:hover { color: var(--primary-color); border-bottom:2px solid var(--primary-color);}
.nav-actions { display:flex; gap:1em; }

.hero {
  background: linear-gradient(90deg,#2563eb 10%,rgba(37,99,235,0.85) 100%);
  color: #fff; text-align: center;
  padding: 2em 1em 2em 1em;
  margin-bottom: 2em;
}
.hero h1 { font-size:2em; letter-spacing:1px; }
.hero .btn-vote { background: var(--background); color: var(--primary-color); }

.container { max-width: 1100px; margin: 0 auto 2em auto; padding: 0 1em; }

input[type=text], input[type=email], select, textarea {
  width: 100%; font-size:1em; margin-bottom:0.8em;
  padding:0.65em 1em; border:1px solid #ddd; border-radius:6px;
}
textarea { min-height: 4em; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--primary-color); border: 1px solid var(--primary-color) !important;
}

button, .btn-vote, .btn-details {
  background: var(--primary-color); color: #fff;
  border: none; border-radius: 6px; padding: 0.5em 1.3em; margin: 0.2em 0.1em;
  font-size:1em; font-weight:500; cursor: pointer;
  transition: background 0.2s;
}
.btn-vote:hover, .btn-details:hover, button:hover { background: #1849b6;}
.btn-details { background: var(--secondary-color); }
.btn-details:hover { background: var(--primary-color);}
button[disabled] { opacity:0.5; cursor:not-allowed;}

.proposals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  gap:1.5em;
  margin-top: 2em;
}
.proposal-card {
  background: #fff;
  border-radius: 10px;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
  padding:1.2em 1.3em 1em 1.3em;
  display:flex; flex-direction:column;
  justify-content:space-between; min-height:230px;
}
.proposal-card h2 { font-size:1.2em; color:var(--primary-color);}
.chip {
  display: inline-block;
  padding: .2em 1em; border-radius: 2em;
  font-size: .93em; margin-right: .5em; margin-top:.3em;
  background: #e0e7ff;
}
.chip-infrastructure { background: var(--chip-infrastructure);}
.chip-education { background: var(--chip-education);}
.chip-healthcare { background: var(--chip-healthcare);}
.chip-environment { background: var(--chip-environment); }
.chip-technoloy { background: #dbeafe;}
.chip-transport { background: #e0f2fe;}
.chip-governance { background: #ddd6fe;}
.chip-other { background: #e5e7eb;}

.comment { background:#f8fafc; border-radius: 8px; margin: 0.5em 0; padding:0.8em 0.8em;}
.comment p { margin: 0; }

.modal {
  position: fixed; left:0; top:0; width:100vw; height:100vh;
  background:rgba(40,40,80,0.1); display:flex; align-items:center;justify-content:center;
  z-index:1200;
}
.modal-content {
  background:#fff;padding:2em; border-radius:1em;min-width:300px;
  box-shadow:0 8px 24px rgba(80,90,100,0.075)
}
@media(max-width:900px){
  .container{max-width:99vw;}
  .proposals-grid{grid-template-columns:1fr;}
  .navbar{flex-direction:column;}
  .nav-menu{gap:1em;}
}
::-webkit-scrollbar{height:8px;}
::-webkit-scrollbar-thumb{background:#e5e7eb; border-radius:5px;}