:root {
  --brand: #178a4c;
  --brand-dark: #0f6b3a;
  --brand-soft: #e8f5ee;
  --ink: #1d2b24;
  --muted-bg: #f4f7f5;
}

body { color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.voter-body, .admin-body { background: var(--muted-bg); min-height: 100vh; }

.brand { color: var(--brand); font-weight: 700; font-size: 1.1rem; }
.brand i { margin-right: .25rem; }
.text-brand { color: var(--brand) !important; }
.bg-brand { background-color: var(--brand) !important; }

.btn-brand { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.btn-brand:hover, .btn-brand:focus { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-brand:disabled { background: var(--brand); opacity: .6; color: #fff; }

.voter-top { background: #fff; border-bottom: 1px solid #e3e9e5; }

.vote-card, .stat-card { border: 1px solid #e3e9e5; border-radius: 14px; box-shadow: 0 1px 2px rgba(16, 40, 28, .04); background: #fff; }

.status-pill { font-size: .78rem; font-weight: 600; padding: .3rem .75rem; border-radius: 999px; white-space: nowrap; }
.status-open    { background: var(--brand-soft); color: var(--brand-dark); }
.status-pending { background: #fff4d6; color: #7a5a00; }
.status-closed  { background: #eceff1; color: #455a64; }

/* progress dots */
.step-dots { display: flex; gap: 6px; }
.step-dots span { width: 28px; height: 5px; border-radius: 5px; background: #dfe7e2; }
.step-dots .active { background: var(--brand); }
.step-dots .done { background: #9fd1b5; }

.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(23, 138, 76, .15);
}
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }

.otp-input { text-align: center; font-size: 2rem; letter-spacing: .6rem; font-family: ui-monospace, Menlo, monospace; }

/* candidate cards */
.candidate {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .25rem;
  padding: 1rem .75rem; border: 2px solid #e3e9e5; border-radius: 12px; cursor: pointer;
  position: relative; height: 100%; transition: border-color .15s, background .15s; background: #fff;
}
.candidate img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: #eef2ef; margin-bottom: .35rem; }
.candidate .cand-name { font-weight: 600; line-height: 1.2; }
.candidate .cand-party { font-size: .82rem; color: #6c7a72; }
.candidate .tick { position: absolute; top: .55rem; right: .6rem; color: var(--brand); font-size: 1.3rem; opacity: 0; transition: opacity .15s; }
.candidate:hover { border-color: #b9dcc8; }
.btn-check:checked + .candidate { border-color: var(--brand); background: var(--brand-soft); }
.btn-check:checked + .candidate .tick { opacity: 1; }
.btn-check:focus-visible + .candidate { box-shadow: 0 0 0 .25rem rgba(23, 138, 76, .25); }

.needs-choice { animation: nudge .5s ease 2; border-color: #dc3545 !important; }
@keyframes nudge { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.sticky-submit { position: sticky; bottom: 0; padding: .75rem 0 1rem; background: linear-gradient(to top, var(--muted-bg) 70%, transparent); }

.done-icon {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand); font-size: 2.4rem;
}
.brand-mark { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-size: 1.4rem; }

/* results */
.result-row { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; }
.result-row + .result-row { border-top: 1px dashed #e6ece8; }
.result-row img, .thumb { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #eef2ef; flex-shrink: 0; }
.progress { background: #eef2ef; }
.bg-secondary-subtle { background-color: #c9d3cd !important; }

/* admin */
.admin-nav { background: var(--brand); }
.admin-nav .brand { color: #fff; }
.admin-nav .nav-link { color: rgba(255, 255, 255, .8); }
.admin-nav .nav-link:hover, .admin-nav .nav-link.active { color: #fff; }
.admin-nav .nav-link.active { font-weight: 600; }
.admin-nav .status-pill { background: rgba(255, 255, 255, .18); color: #fff; }
.table > :not(caption) > * > * { padding: .7rem .9rem; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: #6c7a72; font-weight: 600; background: #fafcfb; }