body{background:linear-gradient(135deg,#caf3e0,#e8f1ff);min-height:100vh;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
body.login-page,body.landing-page{background:radial-gradient(circle at 85% 20%,#7ce8ba 0%,rgba(124,232,186,.18) 20%,transparent 35%),radial-gradient(circle at 90% 80%,#1fd7de 0%,rgba(31,215,222,.18) 22%,transparent 40%),linear-gradient(145deg,#032842 0%,#045a74 45%,#0f8f95 100%)}
.app-shell{display:grid;grid-template-columns:260px 1fr;gap:18px;padding:18px;max-width:1400px;margin:0 auto}
.sidebar-panel,.content-panel{background:rgba(255,255,255,.8);backdrop-filter:blur(8px);border-radius:24px;box-shadow:0 10px 30px rgba(46,76,109,.12)}
.sidebar-panel{padding:22px;position:sticky;top:18px;height:calc(100vh - 36px)}
.brand i{color:#198754}
.brand-logo{width:34px;height:34px;object-fit:contain;border-radius:8px;background:#fff;padding:2px}
.sidebar-panel .nav-link{color:#2f4f3a;border-radius:12px;padding:.55rem .8rem}
.sidebar-panel .nav-link:hover{background:#e8f5ec;color:#198754}
.content-panel{padding:18px 22px}
.card-soft{background:#fff;border:0;border-radius:16px;box-shadow:0 8px 20px rgba(36,68,105,.08)}
.table-wrap{background:#fff;border-radius:14px;padding:8px 12px;box-shadow:0 6px 16px rgba(36,68,105,.07);position:relative}
.table-wrap{overflow:auto;max-width:100%;max-height:70vh}
.table-wrap::-webkit-scrollbar{height:10px;width:10px}
.table-wrap::-webkit-scrollbar-thumb{background:#9bc5b2;border-radius:999px}
.table-wrap::-webkit-scrollbar-track{background:#e6f1ec;border-radius:999px}
.table-responsive{overflow:auto;max-height:72vh}

.dashboard-metric-card{border:0;border-radius:18px;color:#fff;box-shadow:0 12px 26px rgba(15,47,69,.18)}
.dashboard-metric-card small{opacity:.92;font-weight:600;letter-spacing:.02em}
.dashboard-metric-card h3{margin:.35rem 0 0;font-weight:800}
.metric-registered{background:linear-gradient(135deg,#396afc,#2948ff)}
.metric-voted{background:linear-gradient(135deg,#00b09b,#96c93d)}
.metric-pending{background:linear-gradient(135deg,#f2994a,#f2c94c);color:#24334a}
.metric-turnout{background:linear-gradient(135deg,#6441a5,#2a0845)}

.insight-tile{background:linear-gradient(180deg,#f7fbff,#eef6f3);border:1px solid #dcebe4;border-radius:14px;padding:.85rem .95rem;display:flex;flex-direction:column;gap:.25rem;min-height:88px}
.insight-tile small{color:#5a6a76;font-weight:600}
.insight-tile strong{font-size:1.45rem;color:#1c364b}


.role-card{border:0;border-radius:18px;box-shadow:0 10px 24px rgba(20,64,112,.12)}
.profile-thumb{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid #d4f2e3}
.profile-menu-btn{border-radius:999px}
.profile-preview{width:120px;height:120px;object-fit:cover;border-radius:50%;border:3px solid #d4f2e3}
@media (max-width:1024px){.app-shell{grid-template-columns:1fr}.sidebar-panel{height:auto;position:relative;top:0}}
.modal{z-index:2000}
.modal-backdrop{z-index:1990}
.action-btn{min-width:64px}

.login-page .container.py-5,.landing-page .container.py-5{min-height:100vh;padding:clamp(1rem,3vw,3rem)!important;display:grid;align-items:center}
.login-screen{width:min(1120px,100%);margin:0 auto;display:grid;grid-template-columns:minmax(280px,1fr) minmax(320px,460px);gap:clamp(1.5rem,4vw,4rem);align-items:center}
.login-brand-panel{color:#fff;display:grid;gap:1.15rem}
.login-brand-logo{width:min(100%,520px);height:auto;filter:drop-shadow(0 8px 28px rgba(0,0,0,.25))}
.login-brand-copy{max-width:40ch;font-size:1rem;line-height:1.6;color:rgba(255,255,255,.92)}
.login-card{border-radius:2rem;background:#fbfdff;box-shadow:0 18px 50px rgba(2,22,35,.26)}
.login-title{font-size:clamp(1.75rem,4vw,2.6rem);font-weight:800;color:#213141;margin-bottom:.4rem;text-align:center}
.login-subtitle{color:#486172;text-align:center;margin-bottom:1.5rem}
.login-input{border-radius:999px;padding:.78rem 1.05rem;border:1px solid #ced8e1;min-height:48px}
.login-input:focus{border-color:#09979a;box-shadow:0 0 0 .25rem rgba(9,151,154,.15)}
.login-link{font-weight:600;color:#2f5ea5;text-decoration:none}
.login-link:hover,.login-link:focus-visible{text-decoration:underline}
.login-btn{margin-top:.35rem;border-radius:999px;min-height:50px;background:linear-gradient(180deg,#148f97,#0f667f);color:#fff;font-weight:700;letter-spacing:.02em}
.login-btn:hover,.login-btn:focus-visible{background:linear-gradient(180deg,#0f7f86,#0d586f);color:#fff}
.login-contact{margin-top:.85rem;font-size:.92rem;color:#58707d;text-align:center}
@media (max-width:991.98px){.login-screen{grid-template-columns:1fr;max-width:700px}.login-brand-panel{justify-items:center;text-align:center}.login-brand-copy{max-width:60ch}}
@media (max-width:575.98px){.login-card{border-radius:1.4rem}.login-screen{gap:1rem}.login-page .container.py-5,.landing-page .container.py-5{padding:1rem!important}}

.ballot-wizard{display:grid;grid-template-columns:260px 1fr;gap:16px}
.ballot-nav{padding:14px;border-radius:16px}
.ballot-nav-title{font-weight:700;color:#198754;padding:8px 10px}
.ballot-nav-item{border:0;border-radius:12px !important;margin-bottom:6px;display:flex;align-items:center;gap:10px}
.ballot-nav-item.active{background:#dff5ea;color:#198754;border-left:4px solid #20b486}
.ballot-nav-item.is-complete .ballot-nav-icon{color:#20b486}
.ballot-main{padding:18px;border-radius:16px}
.candidate-wizard-card{border:2px solid #e7ecef;border-radius:14px;overflow:hidden;position:relative;cursor:pointer;transition:all .15s ease}
.candidate-wizard-card:hover{border-color:#7fd8be;transform:translateY(-1px)}
.candidate-wizard-card.is-selected{border:3px solid #20b486;box-shadow:0 0 0 2px rgba(32,180,134,.15)}
.candidate-wizard-img{height:180px;object-fit:cover;width:100%}
.selected-chip{position:absolute;top:10px;right:10px;background:#20b486;color:#fff;border-radius:999px;padding:4px 10px;font-size:.8rem}
@media (max-width:992px){.ballot-wizard{grid-template-columns:1fr}}

.results-dashboard{display:grid;grid-template-columns:250px 1fr;gap:16px}
.results-sidebar{display:flex;flex-direction:column;gap:8px}
.results-pos-btn{border:1px solid #dce9e2;background:#fff;color:#2f4f3a;border-radius:12px;padding:.65rem .85rem;text-align:left}
.results-pos-btn.active{background:#dff5ea;border-color:#20b486;color:#167c5c;font-weight:600}
.results-stage{background:#f9fbfc;border-radius:14px;padding:12px;min-height:260px}
.leader-row{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #e8edf1;border-radius:12px;padding:10px 12px;margin-bottom:10px}
.leader-row.winner{border-left:6px solid #20b486;background:#eefbf5}
.leader-row.last{border-left:6px solid #dc3545;background:#fff5f6}
.leader-rank{width:62px;font-size:1.3rem;font-weight:700;color:#335;display:flex;align-items:flex-end;gap:2px}
.leader-rank small{font-size:.75rem;color:#667}
.leader-avatar{width:54px;height:54px;border-radius:50%;object-fit:cover;border:2px solid #d9efe7}
.leader-meta{flex:1;min-width:0}
.leader-name{font-weight:700}
.leader-party{font-size:.88rem;color:#6c757d}
.leader-stats{display:flex;align-items:center;gap:8px}
@media (max-width:992px){.results-dashboard{grid-template-columns:1fr}}

.landing-page .container.py-5{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem)!important}
.landing-main{width:min(860px,100%)}
.landing-card{background:rgba(255,255,255,.97);border-radius:2rem;padding:clamp(1.75rem,4vw,3.5rem) clamp(1rem,4vw,2.5rem);text-align:center;box-shadow:0 24px 56px rgba(0,0,0,.34)}
.landing-main-logo{width:min(100%,540px);height:auto;display:block;margin:0 auto .75rem;filter:drop-shadow(0 10px 24px rgba(0,0,0,.12))}
.landing-main-title{font-size:clamp(2rem,6vw,3.7rem);font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#1e4a2f;margin-bottom:.35rem}
.landing-main-tagline{font-size:clamp(.95rem,2.2vw,1.35rem);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#3c6b47;display:inline-block;background:#fef9e6;border:2px solid #e6b422;border-radius:999px;padding:.45rem 1.2rem;margin-bottom:clamp(1.5rem,3vw,2.4rem)}
.landing-main-btn{background:#e6b422;color:#1e4a2f;border:0;border-radius:999px;padding:clamp(.75rem,1.8vw,1rem) clamp(1.25rem,5vw,3rem);font-size:clamp(1rem,3vw,1.6rem);font-weight:700;letter-spacing:.04em;min-width:min(100%,430px);box-shadow:0 10px 24px rgba(0,0,0,.2);transition:all .2s ease}
.landing-main-btn:hover,.landing-main-btn:focus-visible{background:#f5c542;color:#1e4a2f;transform:translateY(-1px);box-shadow:0 14px 28px rgba(0,0,0,.24)}
.landing-divider{margin:clamp(1.15rem,2.8vw,1.8rem) auto 0;border:0;height:1px;background:linear-gradient(to right,transparent,#d4e2d0,transparent);max-width:520px}
.landing-security-note{margin-top:.95rem;font-size:clamp(.75rem,1.6vw,.88rem);color:#79947d}
@media (max-width:575.98px){.landing-card{border-radius:1.25rem}.landing-main-title{letter-spacing:.04em}.landing-main-tagline{letter-spacing:.08em;padding:.35rem .85rem}}

.dataTables_wrapper{width:100%}
.dataTables_wrapper .row{margin-left:0;margin-right:0;align-items:center}
.dataTables_wrapper .col-sm-12{padding-left:0;padding-right:0}
.table.dataTable{width:100% !important;margin:0 !important}
.table.dataTable thead th,.table.dataTable tbody td{white-space:normal;vertical-align:middle}