.jua-form-wrap { max-width: 640px; margin: 0 auto 2em; }
.jua-form { background: #fafafa; border: 1px solid #e0e0e0; border-radius: 8px; padding: 24px; }
.jua-form h3 { margin-top: 0; }
.jua-form-row { margin-bottom: 16px; }
.jua-form-row label { display: block; font-weight: 600; margin-bottom: 6px; }
.jua-form-row input[type=text], .jua-form-row input[type=email], .jua-form-row input[type=tel],
.jua-form-row input[type=number], .jua-form-row input[type=password], .jua-form-row select,
.jua-form-row textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
.jua-form-cols { display: flex; gap: 16px; }
.jua-form-cols > div { flex: 1; }
.jua-btn-primary { background: #1a5f3f; color: #fff; border: none; padding: 12px 24px; border-radius: 4px; font-weight: 600; cursor: pointer; }
.jua-btn-primary:hover { background: #144a32; }
.jua-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.jua-btn-link { background: none; border: none; color: #1a5f3f; text-decoration: underline; cursor: pointer; margin-left: 8px; }
.jua-form-message .jua-success { color: #1a5f3f; font-weight: 600; }
.jua-form-message .jua-error { color: #b32d2e; font-weight: 600; }
.jua-portal-switch { text-align: center; max-width: 640px; margin: 0 auto 16px; }

.jua-payment-method-option { display: block; border: 1px solid #ddd; border-radius: 6px; padding: 12px; margin-bottom: 10px; cursor: pointer; }
.jua-payment-method-option .jua-account-number { float: right; font-family: monospace; }
.jua-payment-method-option .jua-instructions { margin: 6px 0 0; color: #555; font-size: 0.9em; }

/* Payment details popup */
.jua-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.jua-modal-box { background: #fff; border-radius: 10px; padding: 28px; max-width: 420px; width: 90%; position: relative; }
.jua-modal-close { position: absolute; top: 10px; right: 14px; background: none; border: none; font-size: 1.5em; cursor: pointer; line-height: 1; }
.jua-modal-box h3 { margin-top: 0; }
#jua-modal-instructions { color: #555; margin: 12px 0; white-space: pre-line; }
#jua-amount-display { font-weight: 700; background: #f5f5f5; }

/* Notice board */
.jua-notice-board .jua-notice-item { border-left: 4px solid #999; padding: 10px 16px; margin-bottom: 12px; background: #fff; }
.jua-notice-item.jua-notice-urgent { border-left-color: #b32d2e; }
.jua-notice-item.jua-notice-election { border-left-color: #8a5c00; }
.jua-notice-item.jua-notice-event { border-left-color: #1a5f3f; }
.jua-notice-item.jua-pinned { background: #fff8e1; }
.jua-notice-badge { font-size: 0.7em; text-transform: uppercase; background: #eee; padding: 2px 8px; border-radius: 10px; }
.jua-notice-date { color: #888; font-size: 0.85em; }

/* Directory */
.jua-directory-search { margin-bottom: 20px; display: flex; gap: 10px; }
.jua-directory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.jua-directory-card { text-align: center; border: 1px solid #eee; border-radius: 8px; padding: 12px; }
.jua-directory-card img { border-radius: 50%; }

/* Voting booth */
.jua-voting-booth { max-width: 700px; margin: 0 auto; }
.jua-vote-step { background: #fafafa; border: 1px solid #e0e0e0; border-radius: 8px; padding: 24px; margin-bottom: 16px; }
.jua-ballot-seat { border-bottom: 1px solid #eee; padding-bottom: 16px; margin-bottom: 16px; }
.jua-ballot-candidate { display: inline-block; text-align: center; margin: 8px 16px 8px 0; cursor: pointer; }
.jua-ballot-candidate img { display: block; border-radius: 50%; margin-bottom: 4px; }
#jua-selfie-video, #jua-selfie-preview { border-radius: 6px; border: 1px solid #ccc; }

/* Membership ID card v2 */
.jua-id-card-wrap { max-width: 420px; margin: 0 auto; text-align: center; }
.jua-id-card { border-radius: 14px; overflow: hidden; border: 1px solid #ddd; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.08); text-align: left; }
.jua-id-card-top { background: linear-gradient(135deg, #1a5f3f, #2f8f5f); color: #fff; padding: 14px 16px; }
.jua-id-org { font-weight: 700; font-size: 0.95em; }
.jua-id-card-label { font-size: 0.7em; letter-spacing: 1.5px; opacity: 0.85; margin-top: 2px; }
.jua-id-card-body { display: flex; gap: 14px; padding: 16px; align-items: flex-start; }
.jua-id-photo-col { flex-shrink: 0; }
.jua-id-photo img { width: 70px; height: 70px; border-radius: 10px; object-fit: cover; }
.jua-id-photo-placeholder { width: 70px; height: 70px; border-radius: 10px; background: #eaf3ee; color: #1a5f3f; font-weight: 700; font-size: 1.6em; display: flex; align-items: center; justify-content: center; }
.jua-id-details { flex: 1; min-width: 0; }
.jua-id-details h3 { margin: 0 0 2px; font-size: 1.05em; }
.jua-id-tier { margin: 0 0 8px; color: #1a5f3f; font-weight: 600; font-size: 0.85em; }
.jua-id-meta-table { font-size: 0.82em; border-collapse: collapse; }
.jua-id-meta-table td { padding: 1px 0; }
.jua-id-meta-table td:first-child { color: #888; padding-right: 8px; white-space: nowrap; }
.jua-id-qr-col { flex-shrink: 0; text-align: center; }
.jua-id-qr { width: 64px; height: 64px; }
.jua-id-code { font-family: monospace; font-size: 0.7em; color: #888; margin-top: 4px; }
.jua-id-card-bottom { background: #f7f9f8; padding: 6px 16px; font-size: 0.72em; color: #888; text-align: center; }
.jua-id-print-btn { margin-top: 14px; }

@media (max-width: 400px) {
	.jua-id-card-body { flex-direction: column; align-items: center; text-align: center; }
	.jua-id-meta-table { margin: 0 auto; }
	.jua-id-meta-table td:first-child { text-align: right; }
}

/* Print: isolate just the ID card being printed/saved as PDF */
@media print {
	body * { visibility: hidden; }
	.jua-id-print-target, .jua-id-print-target * { visibility: visible; }
	.jua-id-print-target { position: absolute; top: 0; left: 0; width: 100%; box-shadow: none; }
	.jua-id-print-btn, .jua-dash-topbar, .jua-dash-tabs, .jua-dash-status-strip { display: none !important; }
}

/* Verification checker page */
.jua-verify-result { max-width: 420px; margin: 20px auto; padding: 20px; border-radius: 12px; text-align: center; }
.jua-verify-valid { background: #eaf7ef; border: 1px solid #a8ddba; }
.jua-verify-invalid { background: #fdecec; border: 1px solid #f3a9a9; }
.jua-verify-result h3 { margin-top: 0; }
.jua-verify-table { width: 100%; margin-top: 12px; text-align: left; }
.jua-verify-table td { padding: 4px 0; }
.jua-verify-table td:first-child { color: #666; width: 40%; }

/* Member dashboard v2 - mobile-first */
.jua-dash { max-width: 720px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

.jua-dash-center-card { background: #fff; border: 1px solid #f0ad4e; background: #fffaf0; border-radius: 14px; padding: 24px 20px; text-align: center; max-width: 420px; margin: 40px auto; }
.jua-dash-center-card h2 { margin-top: 0; }
.jua-dash-center-card .jua-form { background: transparent; border: none; padding: 0; text-align: left; }

.jua-dash-topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; }
.jua-dash-identity { display: flex; align-items: center; gap: 12px; }
.jua-dash-avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.jua-dash-avatar-photo img { width: 100%; height: 100%; object-fit: cover; }
.jua-dash-avatar-initials { background: linear-gradient(135deg, #1a5f3f, #2f8f5f); color: #fff; font-weight: 700; font-size: 1.1em; }
.jua-dash-name { font-weight: 700; font-size: 1.05em; color: #1c1c1c; }
.jua-dash-sub { font-size: 0.85em; color: #777; }
.jua-dash-logout { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: #555; background: #f2f2f2; flex-shrink: 0; }
.jua-dash-logout:hover { background: #e8e8e8; color: #b32d2e; }

.jua-dash-status-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 4px 14px; }
.jua-dash-tier { font-size: 0.9em; color: #444; font-weight: 600; }
.jua-dash-expiry { font-size: 0.85em; color: #666; background: #f2f2f2; padding: 3px 10px; border-radius: 10px; }
.jua-dash-expiry-warn { background: #fdeaea; color: #b32d2e; font-weight: 600; }

.jua-dash-tabs { display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 4px; margin-bottom: 16px; border-bottom: 1px solid #eaeaea; scrollbar-width: none; }
.jua-dash-tabs::-webkit-scrollbar { display: none; }
.jua-dash-tab { flex: 0 0 auto; background: none; border: none; padding: 10px 14px; font-size: 0.92em; font-weight: 600; color: #777; cursor: pointer; border-radius: 8px 8px 0 0; white-space: nowrap; border-bottom: 3px solid transparent; }
.jua-dash-tab.active { color: #1a5f3f; border-bottom-color: #1a5f3f; }
.jua-dash-tab:hover { color: #1a5f3f; }

.jua-dash-panel { display: none; animation: juaFadeIn 0.2s ease; }
.jua-dash-panel.active { display: block; }
@keyframes juaFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.jua-dash-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 14px; padding: 18px; margin-bottom: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.03); }
.jua-dash-card h3 { margin-top: 0; margin-bottom: 10px; font-size: 1.05em; }
.jua-dash-card .jua-btn-primary { margin-top: 6px; }

.jua-dash-card .jua-form-wrap { margin: 0; }
.jua-dash-card .jua-form { background: transparent; border: none; padding: 0; }
.jua-dash-card .jua-id-card { margin: 0 auto; }
.jua-profile-photo-row { display: flex; align-items: center; gap: 16px; }
.jua-profile-photo-preview img, .jua-profile-photo-preview .jua-dash-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }

.jua-dash-quicklinks { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.jua-dash-quicklinks button { flex: 1 1 30%; background: #f5f7f6; border: 1px solid #e0e0e0; border-radius: 10px; padding: 12px 8px; font-size: 0.85em; font-weight: 600; color: #1a5f3f; cursor: pointer; }
.jua-dash-quicklinks button:hover { background: #eaf3ee; }

@media (max-width: 480px) {
	.jua-dash { padding: 0 8px; }
	.jua-dash-card { padding: 14px; border-radius: 10px; }
	.jua-dash-name { font-size: 1em; }
	.jua-dash .jua-btn-primary { width: 100%; text-align: center; }
	.jua-dash-quicklinks button { flex: 1 1 100%; }
}

/* Election page */
.jua-election-page { max-width: 800px; margin: 0 auto; }
.jua-election-phase-banner { background: #eef6f1; border-left: 4px solid #1a5f3f; padding: 14px 18px; border-radius: 6px; margin: 16px 0; }
.jua-election-seat { margin-bottom: 28px; }
.jua-result-row { display: flex; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid #eee; }
.jua-result-winner { background: #fff8e1; font-weight: 700; border-radius: 4px; }

/* Election hub: list of elections + detail panel */
.jua-election-hub { max-width: 800px; margin: 0 auto; }
.jua-election-list { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.jua-election-select-btn { background: #f5f7f6; border: 1px solid #ddd; border-radius: 8px; padding: 10px 16px; font-weight: 600; color: #1a5f3f; cursor: pointer; }
.jua-election-select-btn.active { background: #1a5f3f; color: #fff; border-color: #1a5f3f; }
.jua-election-detail { min-height: 60px; }
.jua-election-subnav { display: flex; gap: 6px; margin: 14px 0; border-bottom: 1px solid #eaeaea; }
.jua-election-sub-btn { background: none; border: none; padding: 8px 14px; font-weight: 600; color: #777; cursor: pointer; border-bottom: 3px solid transparent; }
.jua-election-sub-btn.active { color: #1a5f3f; border-bottom-color: #1a5f3f; }
.jua-election-message { background: #f5f7f6; border-radius: 8px; padding: 14px 18px; color: #555; }

/* Nomination form extras */
.jua-nomination-candidate-preview { display: flex; align-items: center; gap: 12px; background: #f5f7f6; border-radius: 8px; padding: 10px 14px; margin-bottom: 6px; }
.jua-nomination-candidate-preview img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.jua-nomination-success { background: #eaf7ef; border: 1px solid #a8ddba; border-radius: 10px; padding: 20px; text-align: center; }