/* Ε.Ε.Σ. voting — clean, neutral, official. */
:root {
	--ees-ink: #14223a;
	--ees-ink-soft: #5a6679;
	--ees-line: #e2e6ec;
	--ees-bg: #eef1f5;
	--ees-primary: #1f3a63;
	--ees-primary-d: #16294860;
	--ees-ok: #2f8f5b;
	--ees-err: #c0392b;
	--ees-amber-bg: #fff6e6;
	--ees-amber-ln: #e9c373;
}

html, body { margin: 0; }
body {
	background: var(--ees-bg);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--ees-ink);
	-webkit-font-smoothing: antialiased;
}
.ees-main { display: block; }

.ees-voting { display: flex; justify-content: center; padding: 28px 16px 60px; }
.ees-card {
	position: relative;
	width: 100%;
	max-width: 680px;
	background: #fff;
	border: 1px solid var(--ees-line);
	border-radius: 16px;
	box-shadow: 0 14px 40px -18px rgba(20, 34, 58, .35);
	padding: 0;
	overflow: hidden;
}

/* Header */
.ees-head {
	text-align: center;
	padding: 30px 26px 22px;
	background: linear-gradient(180deg, #f7f9fc, #fff);
	border-bottom: 1px solid var(--ees-line);
}
.ees-org { font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ees-ink-soft); font-weight: 600; }
.ees-title { margin: 8px 0 4px; font-size: 26px; color: var(--ees-ink); }
.ees-sub { margin: 0; color: var(--ees-ink-soft); font-size: 14.5px; }

/* States */
.ees-state { padding: 48px 26px; text-align: center; color: var(--ees-ink-soft); }
.ees-lock { font-size: 40px; margin-bottom: 10px; }
.ees-preview {
	margin: 0; padding: 12px 18px; background: var(--ees-amber-bg);
	border-bottom: 1px solid var(--ees-amber-ln); color: #7a5b16; font-size: 13.5px; text-align: center;
}

/* Steps */
.ees-step { padding: 26px; }

/* Gate */
.ees-gate-intro { margin: 0 0 14px; color: var(--ees-ink-soft); text-align: center; }
.ees-gate-row { display: flex; gap: 10px; max-width: 420px; margin: 0 auto; }
.ees-code-input {
	flex: 1; padding: 13px 14px; font-size: 18px; letter-spacing: 3px; text-align: center;
	text-transform: uppercase; border: 1.5px solid var(--ees-line); border-radius: 10px; color: var(--ees-ink);
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.ees-code-input:focus { outline: none; border-color: var(--ees-primary); box-shadow: 0 0 0 3px rgba(31,58,99,.12); }
.ees-gate-msg, .ees-submit-msg { min-height: 20px; color: var(--ees-err); font-size: 14px; text-align: center; margin-top: 12px; }

/* Greeting */
.ees-greet { font-size: 15px; font-weight: 600; color: var(--ees-primary); margin-bottom: 8px; }

/* Phase */
.ees-phase { padding-top: 8px; margin-bottom: 30px; border-top: 1px solid var(--ees-line); }
.ees-phase:first-of-type { border-top: none; }
.ees-phase-title { font-size: 19px; margin: 18px 0 8px; color: var(--ees-ink); }
.ees-phase-intro { font-size: 13.5px; line-height: 1.6; color: var(--ees-ink-soft); margin: 0 0 14px; }
.ees-counter {
	display: inline-block; font-size: 13px; font-weight: 600; color: var(--ees-primary);
	background: #eef2f8; border-radius: 999px; padding: 5px 12px; margin-bottom: 12px;
}
.ees-counter-n { font-size: 15px; }
.ees-phase--full .ees-counter { background: #e6f3ec; color: var(--ees-ok); }

/* Candidates */
.ees-cands { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ees-cand-label {
	display: flex; align-items: center; gap: 12px; padding: 13px 14px;
	border: 1.5px solid var(--ees-line); border-radius: 11px; cursor: pointer;
	transition: border-color .15s, background .15s;
}
.ees-cand-label:hover { border-color: #c6cedb; background: #fafbfd; }
.ees-cb { width: 21px; height: 21px; flex: none; accent-color: var(--ees-primary); cursor: pointer; }
.ees-cand-name { flex: 1; font-size: 15.5px; color: var(--ees-ink); }
.ees-cand-label:has(.ees-cb:checked) { border-color: var(--ees-primary); background: #f4f7fc; }
.ees-cand--disabled .ees-cand-label { opacity: .45; cursor: not-allowed; }
.ees-cand--disabled .ees-cb { cursor: not-allowed; }

/* Approach chip */
.ees-approach {
	flex: none; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
	color: var(--ap); background: var(--apbg); border: 1px solid color-mix(in srgb, var(--ap) 30%, transparent);
	white-space: nowrap;
}

/* Buttons */
.ees-btn {
	font: inherit; font-weight: 600; border: none; border-radius: 10px; cursor: pointer;
	padding: 12px 22px; transition: transform .12s, background .15s, box-shadow .15s;
}
.ees-btn--primary { background: var(--ees-primary); color: #fff; box-shadow: 0 6px 16px -8px var(--ees-primary); }
.ees-btn--primary:hover { background: #18305a; }
.ees-btn--primary:active { transform: translateY(1px); }
.ees-btn--lg { font-size: 16px; padding: 14px 30px; }
.ees-btn--ghost { background: #eef1f5; color: var(--ees-ink); }
.ees-btn:disabled { opacity: .6; cursor: default; }

.ees-submit-row { text-align: center; margin-top: 8px; }
.ees-submit-row .ees-btn { min-width: 220px; }

/* Confirm modal */
.ees-modal {
	position: absolute; inset: 0; background: rgba(20, 34, 58, .55);
	display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 10;
}
.ees-modal-box {
	background: #fff; border-radius: 14px; padding: 24px; max-width: 460px; width: 100%;
	max-height: 90%; overflow: auto; box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
.ees-modal-box h2 { margin: 0 0 6px; font-size: 20px; }
.ees-modal-box > p { margin: 0 0 16px; color: var(--ees-ink-soft); font-size: 13.5px; }
.ees-confirm-phase { margin-bottom: 14px; }
.ees-confirm-phase h3 { margin: 0 0 6px; font-size: 14px; color: var(--ees-primary); }
.ees-confirm-phase ul { margin: 0; padding-left: 20px; }
.ees-confirm-phase li { font-size: 14.5px; margin: 3px 0; }
.ees-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* Done */
.ees-done { text-align: center; padding: 44px 26px; }
.ees-done-check {
	width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%;
	background: #e6f3ec; color: var(--ees-ok); font-size: 34px; line-height: 64px; font-weight: 700;
}
.ees-done h2 { margin: 0 0 8px; font-size: 22px; }
.ees-done p { margin: 0 0 18px; color: var(--ees-ink-soft); }

@media (max-width: 480px) {
	.ees-gate-row { flex-direction: column; }
	.ees-cand-label { flex-wrap: wrap; }
	.ees-approach { order: 3; margin-left: 33px; }
}