/* Plus Jakarta Sans, divendorkan offline (satu file variabel 200-800) */
@font-face{
  font-family:'Plus Jakarta Sans';
  src:url('assets/fonts/plus-jakarta-sans.woff2') format('woff2');
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
}

/* ===== 01_site.css ===== */
body.page-site{
  --red:#1e3a5f;
  --red-dark:#16293f;
  --red-tint:#edf3f8;
  --green-tint:#E8F5EC; --green-text:#2F855A;
  --blue-tint:#EAF1FB;  --blue-text:#2B6CB0;
  --ink:#1B2430;
  --muted:#6B7280;
  --line:#EDEAEA;
  --paper:#FFFFFF;
  --paper-soft:#FBF7F7;
}
body.page-site *{ box-sizing:border-box; }
body.page-site{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body.page-site{
  margin:0;
  font-family:'Plus Jakarta Sans', sans-serif;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
body.page-site h1, body.page-site h2, body.page-site h3{ margin:0; }
body.page-site a{ text-decoration:none; color:inherit; }
body.page-site img{ max-width:100%; }
body.page-site svg{ display:block; }
body.page-site .wrap{ max-width:1160px; margin:0 auto; padding:0 20px; }
body.page-site a:focus-visible, body.page-site button:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
body.page-site .btn, body.page-site .see-all, body.page-site .profile-link{
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
@media (prefers-reduced-motion:reduce){body.page-site{ scroll-behavior:auto; }}
body.page-site .topbar{
  position:sticky; top:0; z-index:30;
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top);
}
body.page-site .topbar-inner{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 16px; max-width:1160px; margin:0 auto;
}
body.page-site .brand{ display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0; }
body.page-site .brand-icon{
  width:36px; height:36px; border-radius:10px;
  background:var(--red); display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
body.page-site .brand-logo{ width:40px; height:40px; object-fit:contain; flex-shrink:0; display:block; }
body.page-site .brand-text{ min-width:0; }
body.page-site .brand-title{ font-weight:800; font-size:14.5px; line-height:1.1; white-space:nowrap; }
body.page-site .brand-title .yr{ color:var(--red); }
body.page-site .brand-sub{
  font-size:12px; color:var(--muted); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body.page-site .topbar-right{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
body.page-site .status-pill{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px; font-weight:600; padding:6px 12px; border-radius:999px;
  border:1.5px solid var(--red); color:var(--red); white-space:nowrap;
}
body.page-site .status-pill .dot{ width:6px; height:6px; border-radius:50%; background:var(--red); flex-shrink:0; }
body.page-site .status-pill.open{ color:var(--green-text); border-color:var(--green-text); }
body.page-site .status-pill.open .dot{ background:var(--green-text); }
body.page-site .status-pill-label{ display:none; }
body.page-site .hero{ position:relative; background:var(--paper-soft); overflow:hidden; }
body.page-site .hero .hero-bg{ display:none; }
body.page-site .hero-bg{ position:absolute; inset:0; z-index:0; }
body.page-site .hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:74% 40%; display:block; }
body.page-site .hero-bg-mobile{ position:relative; width:100%; height:180px; overflow:hidden; }
body.page-site .hero-bg-mobile img{ width:100%; height:100%; object-fit:cover; object-position:70% 40%; display:block; }
body.page-site .hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr; gap:24px;
  width:100%; padding-top:28px; padding-bottom:32px;
}
body.page-site .eyebrow{ font-size:12px; font-weight:700; letter-spacing:0.03em; color:var(--red); margin-bottom:12px; }
body.page-site .hero-text h1{
  font-size:clamp(28px, 7.5vw, 44px); font-weight:800; line-height:1.14; letter-spacing:-0.01em;
  color:var(--ink);
}
body.page-site .hero-text h1 .accent{ color:var(--red); display:block; }
body.page-site .hero-text p.sub{ margin:14px 0 0; max-width:480px; color:var(--muted); font-size:15px; line-height:1.65; }
body.page-site .cta-row{ display:flex; flex-direction:column; gap:10px; margin-top:22px; }
body.page-site .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 22px; min-height:48px; border-radius:10px; font-weight:700; font-size:14.5px;
  border:1.5px solid transparent; cursor:pointer; width:100%;
}
body.page-site .btn-primary{ background:var(--red); color:#fff; box-shadow:0 8px 20px -8px rgba(30,58,95,0.55); }
body.page-site .btn-ghost{ background:#fff; color:var(--red); border-color:var(--red); }
body.page-site .btn:active, body.page-site .see-all:active, body.page-site .profile-link:active{ transform:scale(0.98); }
body.page-site .hero-visual{ display:block; }
body.page-site .stat-card{
  background:#fff; border-radius:14px; padding:16px 18px;
  box-shadow:0 14px 34px -14px rgba(20,20,30,0.25);
  border:1px solid var(--line);
  width:100%; text-align:left;
  display:grid; grid-template-columns:auto 1fr; column-gap:16px; align-items:center;
}
body.page-site .stat-icon{
  width:44px; height:44px; border-radius:50%; background:var(--red-tint);
  display:flex; align-items:center; justify-content:center; color:var(--red);
  grid-row:1 / span 3; margin:0;
}
body.page-site .stat-card .num{ font-size:28px; font-weight:800; color:var(--ink); line-height:1; }
body.page-site .stat-card .lbl{ font-size:10.5px; font-weight:700; letter-spacing:0.04em; color:var(--muted); margin-top:5px; }
body.page-site .stat-card .desc{ font-size:12.5px; color:var(--muted); margin:6px 0 0; line-height:1.55; }
body.page-site .info-strip{
  margin-top:28px;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:4px 16px;
  display:grid; grid-template-columns:1fr;
}
body.page-site .info-item{ display:flex; align-items:flex-start; gap:12px; padding:16px 0; border-top:1px solid var(--line); }
body.page-site .info-item:first-child{ border-top:none; }
body.page-site .info-icon{
  width:40px; height:40px; border-radius:50%; background:var(--red-tint);
  display:flex; align-items:center; justify-content:center; color:var(--red); flex-shrink:0;
}
body.page-site .info-item h4{ font-size:14px; font-weight:700; margin:0 0 3px; }
body.page-site .info-item p{ margin:0; font-size:13px; color:var(--muted); line-height:1.5; }
body.page-site .info-item p.hl{ color:var(--red); font-weight:700; }
body.page-site .candidates-section{ margin-top:44px; padding-bottom:8px; scroll-margin-top:84px; }
body.page-site .section-head{
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  margin-bottom:20px;
}
body.page-site .section-head h2{ font-size:21px; font-weight:800; display:flex; align-items:center; gap:10px; }
body.page-site .section-head h2 .dash{ width:30px; height:3px; background:var(--red); border-radius:2px; display:inline-block; flex-shrink:0; }
body.page-site .section-head p{ margin:6px 0 0; color:var(--muted); font-size:14px; line-height:1.5; }
body.page-site .see-all{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 18px; min-height:44px; border-radius:999px; border:1.5px solid var(--red);
  color:var(--red); font-weight:700; font-size:13.5px; white-space:nowrap;
}
body.page-site .candidates{ display:grid; grid-template-columns:1fr; gap:14px; }
body.page-site .card{
  background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  transition:box-shadow .15s ease;
}
body.page-site .card-photo{ position:relative; aspect-ratio:3/3.4; background:var(--paper-soft); }
body.page-site .card-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
body.page-site .card-photo .placeholder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
body.page-site .badge{
  position:absolute; left:14px; top:14px;
  min-width:30px; height:30px; padding:0 8px; border-radius:9px;
  background:var(--red); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px;
}
body.page-site .card-body{ padding:18px; min-width:0; }
body.page-site .card-body h3{ font-size:16.5px; font-weight:800; margin-bottom:6px; }
body.page-site .card-body .slogan{ font-size:13px; color:var(--muted); line-height:1.5; margin:0 0 14px; min-height:38px; }
body.page-site .tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
body.page-site .tag{
  font-size:11px; font-weight:700; padding:5px 11px; border-radius:14px; line-height:1.35; max-width:100%;
  background:#fff; border:1.3px solid currentColor;
}
body.page-site .tag.c0{ color:var(--red); }
body.page-site .tag.c1{ color:var(--green-text); }
body.page-site .tag.c2{ color:var(--blue-text); }
body.page-site .profile-link{
  display:flex; align-items:center; justify-content:center; gap:6px;
  border:1.5px solid var(--line); border-radius:10px; padding:11px; min-height:44px;
  font-weight:700; font-size:13.5px; color:var(--ink);
}
body.page-site .empty{
  text-align:center; padding:48px 20px; color:var(--muted);
  border:1.5px dashed var(--line); border-radius:14px;
}
body.page-site .security-banner{
  margin-top:36px; background:var(--paper-soft); border-radius:14px;
  padding:20px 16px; display:flex; align-items:center; gap:14px;
  border:1px solid var(--line);
}
body.page-site .security-banner .s-icon{
  width:44px; height:44px; border-radius:50%; background:var(--red-tint);
  display:flex; align-items:center; justify-content:center; color:var(--red); flex-shrink:0;
}
body.page-site .security-banner .s-text{ flex:1; min-width:0; }
body.page-site .security-banner h4{ font-size:14.5px; font-weight:800; margin:0 0 4px; }
body.page-site .security-banner p{ margin:0; font-size:13px; color:var(--muted); line-height:1.5; }
body.page-site .security-banner .s-deco{ display:none; margin-left:auto; opacity:0.9; }
body.page-site .footer-wave{ display:block; margin-top:36px; margin-bottom:-6px; width:100%; height:auto; }
body.page-site footer.site-footer{
  background:var(--red); color:#fff;
  padding:26px 16px calc(26px + env(safe-area-inset-bottom));
}
body.page-site .footer-inner{ display:flex; flex-direction:column; gap:14px; max-width:1160px; margin:0 auto; }
body.page-site .footer-brand{ display:flex; align-items:center; gap:10px; }
body.page-site .footer-icon{
  width:34px; height:34px; border-radius:9px; background:rgba(255,255,255,0.18);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
body.page-site .footer-title{ font-weight:800; font-size:14px; }
body.page-site .footer-sub{ font-size:11.5px; opacity:0.85; }
body.page-site .footer-copy{ display:flex; flex-direction:column; gap:2px; font-size:12.5px; line-height:1.5; opacity:0.9; }
body.page-site .footer-links{ margin-top:10px; }
body.page-site .footer-links-label{ display:block; font-size:12px; font-weight:700; letter-spacing:0.02em; opacity:0.75; margin-bottom:8px; }
body.page-site .footer-links-row{ display:flex; flex-wrap:wrap; gap:8px; }
body.page-site .foot-link{
  -webkit-appearance:none; appearance:none;
  flex:1 1 calc(50% - 4px);
  font-family:inherit; font-size:13px; font-weight:600; line-height:1.3; color:#fff; text-align:center;
  background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.28);
  border-radius:999px; padding:9px 12px; cursor:pointer;
}
@media (min-width:860px){
body.page-site .footer-links-label{ text-align:right; }
body.page-site .footer-links-row{ justify-content:flex-end; }
body.page-site .foot-link{ flex:0 1 auto; padding:8px 16px; }}
@media (min-width:560px) and (max-width:859px){body.page-site .wrap{ padding-left:24px; padding-right:24px; }
body.page-site .topbar-inner{ padding:12px 24px; }
body.page-site .status-pill{ font-size:12.5px; }
body.page-site .hero-bg-mobile{ height:230px; }
body.page-site .hero-grid{ padding-top:34px; padding-bottom:40px; }
body.page-site .hero-text p.sub{ font-size:15.5px; }
body.page-site .cta-row{ flex-direction:row; flex-wrap:wrap; }
body.page-site .cta-row .btn{ flex:1 1 220px; width:auto; }
body.page-site .info-strip{ grid-template-columns:repeat(2, 1fr); gap:22px; padding:24px 22px; margin-top:36px; }
body.page-site .info-item{ padding:0; border-top:none; }
body.page-site .candidates-section{ margin-top:56px; }
body.page-site .section-head{ flex-direction:row; align-items:flex-end; justify-content:space-between; }
body.page-site .candidates{ grid-template-columns:repeat(2, 1fr); gap:18px; }
body.page-site .security-banner{ padding:24px 22px; margin-top:48px; }
body.page-site .security-banner .s-deco{ display:block; }
body.page-site footer.site-footer{ padding-left:24px; padding-right:24px; }}
@media (min-width:700px) and (max-width:859px){body.page-site .candidates{ grid-template-columns:repeat(3, 1fr); }}
@media (max-width:559px){body.page-site .wrap{ padding-left:16px; padding-right:16px; }
body.page-site .card{ display:grid; grid-template-columns:112px 1fr; }
body.page-site .card-photo{ aspect-ratio:auto; min-height:176px; }
body.page-site .card-photo img{ position:absolute; inset:0; }
body.page-site .badge{ left:8px; top:8px; min-width:26px; height:26px; font-size:12px; border-radius:8px; }
body.page-site .card-body{ padding:14px; display:flex; flex-direction:column; }
body.page-site .card-body h3{ font-size:15.5px; }
body.page-site .card-body .slogan{ min-height:0; margin-bottom:10px; }
body.page-site .tags{ gap:6px; margin-bottom:12px; }
body.page-site .profile-link{ margin-top:auto; padding:10px; }}
@media (min-width:860px){body.page-site .topbar-inner{ padding:14px 20px; gap:24px; }
body.page-site .brand{ flex:0 1 auto; }
body.page-site .brand-icon{ width:38px; height:38px; }
body.page-site .brand-logo{ width:44px; height:44px; }
body.page-site .brand-title{ font-size:15px; }
body.page-site .hero{ min-height:520px; display:flex; align-items:center; }
body.page-site .hero .hero-bg{ display:block; }
body.page-site .hero-bg-mobile{ display:none; }
body.page-site .hero-grid{ grid-template-columns:1.15fr 1fr; align-items:end; padding-top:70px; padding-bottom:64px; gap:20px; }
body.page-site .eyebrow{ font-size:12.5px; margin-bottom:14px; }
body.page-site .hero-text p.sub{ font-size:15.5px; margin-top:16px; }
body.page-site .cta-row{ flex-direction:row; flex-wrap:wrap; gap:12px; margin-top:26px; }
body.page-site .btn{ width:auto; }
body.page-site .hero-visual{ display:flex; justify-content:flex-end; }
body.page-site .stat-card{ display:block; width:190px; max-width:none; text-align:center; padding:20px 22px; }
body.page-site .stat-icon{ margin:0 auto 10px; grid-row:auto; }
body.page-site .stat-card .lbl{ margin-top:8px; }
body.page-site .stat-card .desc{ margin-top:10px; font-size:12px; }
body.page-site .info-strip{ grid-template-columns:repeat(4, 1fr); gap:22px; padding:28px 30px; margin-top:56px; border-radius:16px; }
body.page-site .info-item{ padding:0; border-top:none; }
body.page-site .candidates-section{ margin-top:64px; }
body.page-site .section-head{ flex-direction:row; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:26px; }
body.page-site .section-head h2{ font-size:24px; }
body.page-site .candidates{ grid-template-columns:repeat(4, 1fr); gap:20px; }
body.page-site .card{ border-radius:16px; }
body.page-site .card:hover{ box-shadow:0 16px 30px -18px rgba(20,20,30,0.25); }
body.page-site .profile-link:hover{ border-color:var(--red); color:var(--red); }
body.page-site .security-banner{ margin-top:56px; padding:26px 22px; border-radius:16px; }
body.page-site .security-banner .s-deco{ display:block; }
body.page-site .footer-wave{ margin-top:56px; }
body.page-site footer.site-footer{ padding:30px 0; }
body.page-site .footer-inner{ flex-direction:row; align-items:center; justify-content:space-between; padding:0 20px; }
body.page-site .footer-copy{ align-items:flex-end; }}
@media (min-width:560px){body.page-site .status-pill-label{ display:inline; }
body.page-site .status-short{ display:none; }}

/* ===== 02_voter-login.css ===== */
body.page-voter-login{
  --red:#1e3a5f; --red-dark:#16293f; --red-deep:#0f1e30; --red-tint:#edf3f8;
  --ink:#1F2328; --muted:#6B7280; --line:#E4E6EA; --bg:#F6F7F9;
  --green:#1E9E5A;
}
body.page-voter-login *{box-sizing:border-box}
body.page-voter-login, body.page-voter-login{margin:0;min-height:100%}
body.auth{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5}
body.page-voter-login a{color:inherit;text-decoration:none}
body.page-voter-login .auth-shell{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:100vh;min-height:100dvh}
body.page-voter-login .auth-side{position:relative;overflow:hidden;color:#fff;padding:44px 52px;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(155deg,#2c5183 0%,var(--red) 38%,var(--red-dark) 78%,var(--red-deep) 100%)}
body.page-voter-login .side-brand{display:inline-flex;align-items:center;gap:12px}
body.page-voter-login .side-logo{height:44px;width:auto;display:block}
body.page-voter-login .side-icon{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
body.page-voter-login .side-brand-text{display:flex;flex-direction:column;line-height:1.2}
body.page-voter-login .side-brand-text strong{font-size:17px;font-weight:800;letter-spacing:.04em}
body.page-voter-login .side-brand-text em{font-style:normal;opacity:.8}
body.page-voter-login .side-brand-text small{font-size:12.5px;opacity:.85;font-weight:500}
body.page-voter-login .auth-side{isolation:isolate}
body.page-voter-login .auth-side::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(15,30,48,.78) 0%,rgba(22,41,63,.55) 55%,rgba(30,58,95,.25) 100%),
    linear-gradient(0deg,rgba(15,30,48,.55) 0%,rgba(15,30,48,0) 45%)}
body.page-voter-login .side-top{position:relative;z-index:2}
body.page-voter-login .side-mid{position:relative;z-index:2;max-width:480px;margin:auto 0}
body.page-voter-login .side-eyebrow{margin:0 0 14px;font-size:12px;font-weight:700;letter-spacing:.18em;opacity:.85}
body.page-voter-login .side-mid h2{margin:0 0 14px;font-size:clamp(32px,3.4vw,46px);line-height:1.1;font-weight:800;letter-spacing:-.025em}
body.page-voter-login .side-mid h2 span{display:block;color:#FFE3A8}
body.page-voter-login .side-sub{margin:0 0 26px;font-size:16px;opacity:.92;max-width:420px}
body.page-voter-login .side-points{list-style:none;margin:0;padding:0;display:grid;gap:12px}
body.page-voter-login .side-points li{display:flex;align-items:center;gap:12px;font-size:14.5px;font-weight:600}
body.page-voter-login .tick{flex:none;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.2);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800}
body.page-voter-login .side-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:.6;mix-blend-mode:luminosity;pointer-events:none;z-index:0}
body.page-voter-login .side-blob{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
body.page-voter-login .side-blob.b1{width:380px;height:380px;right:-140px;top:-120px;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 68%)}
body.page-voter-login .side-blob.b2{width:300px;height:300px;left:-110px;bottom:-110px;background:radial-gradient(circle,rgba(0,0,0,.22),transparent 70%)}
body.page-voter-login .auth-main{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px 24px;gap:18px;background:
  radial-gradient(900px 400px at 100% 0%,var(--red-tint),transparent 60%),var(--bg)}
body.page-voter-login .auth-card{width:100%;max-width:430px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px 32px 26px;box-shadow:0 18px 50px rgba(31,35,40,.07)}
body.page-voter-login .auth-card h1{margin:16px 0 6px;font-size:27px;font-weight:800;letter-spacing:-.02em}
body.page-voter-login .lead{margin:0 0 20px;color:var(--muted);font-size:14.5px}
body.page-voter-login .card-brand-mobile{display:none;align-items:center;gap:10px;font-weight:800;letter-spacing:.04em;margin-bottom:14px}
body.page-voter-login .card-brand-mobile img{height:32px;width:auto}
body.page-voter-login .card-brand-mobile em{font-style:normal;color:var(--red)}
body.page-voter-login .status{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;padding:6px 13px;border-radius:999px}
body.page-voter-login .status .dot{width:8px;height:8px;border-radius:50%;background:currentColor}
body.page-voter-login .status.open{background:#E8F6EE;color:var(--green)}
body.page-voter-login .status.open .dot{animation:pulse 1.8s infinite}
body.page-voter-login .status.closed{background:#F1F2F4;color:var(--muted)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(30,158,90,.5)}70%{box-shadow:0 0 0 8px rgba(30,158,90,0)}100%{box-shadow:0 0 0 0 rgba(30,158,90,0)}}
body.page-voter-login .alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;font-size:14px;font-weight:500;margin-bottom:16px;animation:slide .25s ease}
body.page-voter-login .alert svg{flex:none;margin-top:1px}
body.page-voter-login .alert-error{background:var(--red-tint);color:var(--red-dark);border:1px solid #c9d6e4}
body.page-voter-login .alert-success{background:#E8F6EE;color:#17794A;border:1px solid #BDE5CE}
@keyframes slide{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
body.page-voter-login .field{margin-bottom:16px}
body.page-voter-login .field label{display:block;margin-bottom:7px;font-size:13.5px;font-weight:700}
body.page-voter-login .input-wrap{position:relative}
body.page-voter-login .input-wrap input{width:100%;height:50px;padding:0 46px 0 44px;border:1.6px solid var(--line);border-radius:13px;background:#FAFAFB;font:inherit;font-size:16px;color:var(--ink);transition:border-color .15s,box-shadow .15s,background .15s}
body.page-voter-login .input-wrap input::placeholder{color:#A6ABB3;letter-spacing:0;font-weight:400}
body.page-voter-login .input-wrap input:hover{border-color:#CDD0D6}
body.page-voter-login .input-wrap input:focus{outline:none;border-color:var(--red);background:#fff;box-shadow:0 0 0 4px var(--red-tint)}
body.page-voter-login .i-left{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#9AA0A9;pointer-events:none;transition:color .15s}
body.page-voter-login .input-wrap:focus-within .i-left{color:var(--red)}
body.page-voter-login .token-input{letter-spacing:.14em;font-weight:600}
body.page-voter-login .token-input::placeholder{letter-spacing:0}
body.page-voter-login .eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;background:transparent;border-radius:10px;color:#8A9099;cursor:pointer;display:flex;align-items:center;justify-content:center}
body.page-voter-login .eye:hover{background:#F1F2F4;color:var(--ink)}
body.page-voter-login .eye .eye-off{display:none}
body.page-voter-login .eye[aria-pressed="true"] .eye-on{display:none}
body.page-voter-login .eye[aria-pressed="true"] .eye-off{display:block}
body.page-voter-login .hint{margin:7px 0 0;font-size:12.5px;color:var(--muted)}
body.page-voter-login .hint.caps{color:#B7791F;font-weight:600}
body.page-voter-login .hint[hidden]{display:none}
body.page-voter-login .btn-login{position:relative;width:100%;height:52px;margin-top:6px;border:0;border-radius:13px;cursor:pointer;
  background:linear-gradient(180deg,#2c5183,var(--red) 60%,var(--red-dark));color:#fff;font:inherit;font-size:16px;font-weight:800;letter-spacing:.01em;
  box-shadow:0 10px 22px rgba(30,58,95,.28);transition:transform .12s,box-shadow .15s,filter .15s}
body.page-voter-login .btn-login:hover{filter:brightness(1.05);box-shadow:0 12px 26px rgba(30,58,95,.34)}
body.page-voter-login .btn-login:active{transform:translateY(1px)}
body.page-voter-login .btn-login:focus-visible{outline:3px solid var(--red-tint);outline-offset:2px}
body.page-voter-login .btn-spin{display:none;position:absolute;right:20px;top:50%;width:18px;height:18px;margin-top:-9px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
body.page-voter-login .btn-login.loading{pointer-events:none;filter:saturate(.8) brightness(.97)}
body.page-voter-login .btn-login.loading .btn-spin{display:block}
@keyframes spin{to{transform:rotate(360deg)}}
body.page-voter-login .card-foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
body.page-voter-login .card-foot a{font-weight:700;color:var(--ink)}
body.page-voter-login .card-foot a:hover{color:var(--red)}
body.page-voter-login .auth-copy{margin:0;font-size:12.5px;color:var(--muted)}
body.page-voter-login .shake{animation:shake .38s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@media (max-width:900px){body.page-voter-login .auth-shell{grid-template-columns:1fr}
body.page-voter-login .auth-side{padding:22px 20px 92px;min-height:250px;justify-content:flex-start;gap:20px}
body.page-voter-login .auth-side::before{background:linear-gradient(180deg,rgba(12,27,48,.72) 0%,rgba(30,58,95,.5) 100%)}
body.page-voter-login .side-logo{height:38px}
body.page-voter-login .side-mid{margin:0;max-width:none}
body.page-voter-login .side-eyebrow, body.page-voter-login .side-sub, body.page-voter-login .side-points{display:none}
body.page-voter-login .side-mid h2{margin:0;font-size:clamp(24px,6.4vw,32px)}
body.page-voter-login .side-blob{display:none}
body.page-voter-login .auth-main{position:relative;z-index:3;margin-top:-62px;padding:0 16px calc(24px + env(safe-area-inset-bottom));background:transparent;justify-content:flex-start}
body.page-voter-login .auth-card{max-width:520px;padding:26px 22px 20px;border-radius:20px;box-shadow:0 18px 40px rgba(31,35,40,.14)}
body.page-voter-login .auth-card h1{margin-top:14px;font-size:24px}}
@media (max-width:480px){body.page-voter-login .auth-side{padding:18px 16px 88px}
body.page-voter-login .auth-main{padding-left:12px;padding-right:12px}
body.page-voter-login .auth-card{padding:22px 16px 18px}
body.page-voter-login .auth-card h1{font-size:22px}
body.page-voter-login .lead{font-size:14px;margin-bottom:16px}
body.page-voter-login .status{font-size:12px;padding:6px 11px}
body.page-voter-login .input-wrap input{height:52px}
body.page-voter-login .btn-login{height:54px}
body.page-voter-login .card-foot{flex-direction:column;gap:6px}}
@media (max-height:520px) and (min-width:901px){body.page-voter-login .auth-side{padding-top:28px;padding-bottom:28px}
body.page-voter-login .side-points{display:none}}
@media (prefers-reduced-motion:reduce){body.page-voter-login *{animation:none!important;transition:none!important}}

/* ===== 03_admin.css ===== */
body.page-admin{
  --red:#1e3a5f; --red-dark:#16293f; --red-tint:#edf3f8;
  --green-tint:#E8F5EC; --green-text:#2F855A;
  --blue-tint:#EAF1FB;  --blue-text:#2B6CB0;
  --amber-tint:#FFF6E0; --amber-text:#B7791F;
  --ink:#1B2430; --muted:#6B7280; --line:#EDEAEA;
  --paper:#FFFFFF; --paper-soft:#FBF7F7;
  --side-w:252px;
}
body.page-admin *{ box-sizing:border-box; }
body.page-admin{ -webkit-text-size-adjust:100%; }
body.admin, body.auth-admin{
  margin:0; font-family:'Plus Jakarta Sans', sans-serif; color:var(--ink);
  background:var(--paper); -webkit-font-smoothing:antialiased;
}
body.page-admin h1, body.page-admin h2, body.page-admin h3, body.page-admin h4, body.page-admin p{ margin:0; }
body.page-admin a{ color:inherit; text-decoration:none; }
body.page-admin img{ max-width:100%; }
body.page-admin svg{ display:block; }
body.page-admin a:focus-visible, body.page-admin button:focus-visible, body.page-admin input:focus-visible, body.page-admin select:focus-visible, body.page-admin textarea:focus-visible{
  outline:2px solid var(--red); outline-offset:2px;
}
body.page-admin .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px; min-height:42px; border-radius:10px; font:inherit; font-weight:700; font-size:14px;
  border:1.5px solid transparent; cursor:pointer; white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
body.page-admin .btn-primary{ background:var(--red); color:#fff; box-shadow:0 8px 20px -10px rgba(30,58,95,.6); }
body.page-admin .btn-primary:hover{ background:var(--red-dark); }
body.page-admin .btn-ghost{ background:#fff; color:var(--red); border-color:var(--red); }
body.page-admin .btn-ghost:hover{ background:var(--red-tint); }
body.page-admin .btn-plain{ background:#fff; color:var(--ink); border-color:var(--line); }
body.page-admin .btn-plain:hover{ border-color:var(--red); color:var(--red); }
body.page-admin .btn-sm{ padding:6px 12px; min-height:34px; font-size:13px; border-radius:8px; }
body.page-admin .btn:disabled{ opacity:.6; cursor:not-allowed; }
body.page-admin .alert{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:12px 16px; border-radius:12px; margin-bottom:12px;
  font-size:14px; font-weight:500; line-height:1.5;
}
body.page-admin .alert ul{ margin:0; padding-left:18px; }
body.page-admin .alert-error{ background:var(--red-tint); color:var(--red-dark); border:1px solid #c9d6e4; }
body.page-admin .alert-success{ background:var(--green-tint); color:var(--green-text); border:1px solid #BFE0CB; }
body.page-admin .alert-x{ border:0; background:transparent; color:inherit; font-size:22px; line-height:1; cursor:pointer; opacity:.6; padding:0 2px; }
body.page-admin .alert-x:hover{ opacity:1; }
body.page-admin .field{ margin-bottom:16px; }
body.page-admin .field label{ display:block; font-size:13px; font-weight:700; margin-bottom:6px; }
body.page-admin .field .hint{ font-size:12px; color:var(--muted); margin-top:5px; }
body.page-admin .input, body.page-admin .field input[type=text], body.page-admin .field input[type=password], body.page-admin .field input[type=number], body.page-admin .field input[type=url], body.page-admin .field input[type=search], body.page-admin .field input[type=datetime-local], body.page-admin .field select, body.page-admin .field textarea{
  width:100%; padding:11px 14px; min-height:46px; border:1.5px solid var(--line); border-radius:10px;
  font:inherit; font-size:14.5px; background:#fff; color:var(--ink);
}
body.page-admin .field textarea{ min-height:110px; resize:vertical; line-height:1.55; }
body.page-admin .field input:focus, body.page-admin .field select:focus, body.page-admin .field textarea:focus{ border-color:var(--red); outline:none; box-shadow:0 0 0 3px var(--red-tint); }
body.page-admin .pill{
  display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px;
  font-size:12px; font-weight:700; white-space:nowrap;
}
body.page-admin .pill .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
body.page-admin .pill-green{ background:var(--green-tint); color:var(--green-text); }
body.page-admin .pill-amber{ background:var(--amber-tint); color:var(--amber-text); }
body.page-admin .pill-red{ background:var(--red-tint); color:var(--red-dark); }
body.page-admin .pill-gray{ background:#F1F2F4; color:var(--muted); }
body.page-admin .auth-wrap{
  min-height:100vh; display:grid; place-items:center; padding:24px 16px;
  background:
    radial-gradient(700px 320px at 100% 0%, var(--red-tint), transparent 70%),
    radial-gradient(520px 260px at 0% 100%, var(--red-tint), transparent 70%),
    var(--paper-soft);
}
body.page-admin .auth-box{
  width:100%; max-width:410px; background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:30px 26px 24px; box-shadow:0 30px 60px -34px rgba(20,20,30,.35);
}
body.page-admin .auth-brand{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
body.page-admin .auth-brand .logo{
  width:44px; height:44px; border-radius:12px; background:var(--red);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
body.page-admin .auth-brand img{ width:46px; height:46px; object-fit:contain; }
body.page-admin .auth-brand strong{ display:block; font-size:16px; font-weight:800; line-height:1.15; }
body.page-admin .auth-brand strong em{ font-style:normal; color:var(--red); }
body.page-admin .auth-brand small{ display:block; font-size:12px; color:var(--muted); margin-top:2px; }
body.page-admin .auth-box h1{ font-size:22px; font-weight:800; margin-bottom:6px; }
body.page-admin .auth-box .lead{ color:var(--muted); font-size:14px; line-height:1.55; margin-bottom:20px; }
body.page-admin .input-wrap{ position:relative; }
body.page-admin .input-wrap .i-left{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; }
body.page-admin .input-wrap input{ padding-left:42px !important; }
body.page-admin .input-wrap .eye{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border:0; background:transparent; color:var(--muted); cursor:pointer; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
}
body.page-admin .input-wrap .eye:hover{ color:var(--red); }
body.page-admin .input-wrap .eye .eye-off{ display:none; }
body.page-admin .input-wrap .eye.on .eye-on{ display:none; }
body.page-admin .input-wrap .eye.on .eye-off{ display:block; }
body.page-admin .input-wrap.has-eye input{ padding-right:46px !important; }
body.page-admin .auth-box .btn-primary{ width:100%; min-height:48px; font-size:15px; }
body.page-admin .auth-foot{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:18px; font-size:13px; color:var(--muted); }
body.page-admin .auth-foot a{ color:var(--red); font-weight:700; }
body.page-admin .sidebar{
  position:fixed; top:0; bottom:0; left:0; width:var(--side-w); z-index:40;
  background:#fff; border-right:1px solid var(--line);
  display:flex; flex-direction:column;
  transform:translateX(-100%); transition:transform .2s ease;
}
body.nav-open .sidebar{ transform:none; box-shadow:0 0 40px rgba(0,0,0,.2); }
body.page-admin .scrim{ display:none; position:fixed; inset:0; background:rgba(20,24,32,.45); z-index:35; }
body.nav-open .scrim{ display:block; }
body.page-admin .side-head{ padding:18px 18px 14px; border-bottom:1px solid var(--line); }
body.page-admin .side-brand{ display:flex; align-items:center; gap:10px; }
body.page-admin .side-brand .logo{ width:38px; height:38px; border-radius:10px; background:var(--red); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
body.page-admin .side-brand img{ width:40px; height:40px; object-fit:contain; }
body.page-admin .side-brand strong{ display:block; font-size:14.5px; font-weight:800; line-height:1.1; }
body.page-admin .side-brand strong em{ font-style:normal; color:var(--red); }
body.page-admin .side-brand small{ display:block; font-size:11.5px; color:var(--muted); margin-top:2px; }
body.page-admin .side-nav{ flex:1; overflow-y:auto; padding:10px 12px 16px; }
body.page-admin .nav-group{ margin-top:14px; }
body.page-admin .nav-title{ font-size:10.5px; font-weight:800; letter-spacing:.07em; color:var(--muted); padding:0 10px 6px; text-transform:uppercase; }
body.page-admin .nav-item{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px;
  font-size:14px; font-weight:600; color:#3A4350; margin-bottom:2px;
  -webkit-tap-highlight-color:transparent;
}
body.page-admin .nav-item svg{ flex-shrink:0; color:var(--muted); }
body.page-admin .nav-item:hover{ background:var(--paper-soft); }
body.page-admin .nav-item.active{ background:var(--red-tint); color:var(--red-dark); font-weight:800; }
body.page-admin .nav-item.active svg{ color:var(--red); }
body.page-admin .side-foot{ padding:12px; border-top:1px solid var(--line); }
body.page-admin .side-foot .nav-item{ color:var(--red-dark); margin:0; }
body.page-admin .side-foot .nav-item svg{ color:var(--red); }
body.page-admin .main{ min-width:0; }
body.page-admin .topbar{
  position:sticky; top:0; z-index:30; background:rgba(255,255,255,.97); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line); padding:10px 16px; padding-top:calc(10px + env(safe-area-inset-top));
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
body.page-admin .menu-btn{
  width:40px; height:40px; border:1.5px solid var(--line); background:#fff; border-radius:10px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--ink); flex-shrink:0;
}
body.page-admin .top-title{ font-size:16px; font-weight:800; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
body.page-admin .admin-chip{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
body.page-admin .admin-avatar{
  width:36px; height:36px; border-radius:50%; background:var(--red-tint); color:var(--red-dark);
  font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center;
}
body.page-admin .admin-info{ display:none; flex-direction:column; line-height:1.2; }
body.page-admin .admin-info b{ font-size:13px; max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.page-admin .admin-info small{ font-size:11.5px; color:var(--muted); }
body.page-admin .page{ width:100%; max-width:none; margin:0; padding:20px 16px 48px; }
body.page-admin .page-head{ display:flex; flex-direction:column; gap:12px; margin-bottom:20px; }
body.page-admin .page-head h1{ font-size:22px; font-weight:800; }
body.page-admin .page-head p{ color:var(--muted); font-size:14px; margin-top:4px; line-height:1.55; }
body.page-admin .page-actions{ display:flex; gap:10px; flex-wrap:wrap; }
@media (min-width:640px){body.page-admin .admin-info{ display:flex; }
body.page-admin .page-head{ flex-direction:row; align-items:flex-end; justify-content:space-between; }
body.page-admin .page{ padding:26px 24px 56px; }}
@media (min-width:960px){body.page-admin .sidebar{ transform:none; }
body.nav-open .sidebar{ box-shadow:none; }
body.nav-open .scrim{ display:none; }
body.page-admin .main{ margin-left:var(--side-w); }
body.page-admin .menu-btn{ display:none; }
body.page-admin .topbar{ padding-left:24px; padding-right:24px; }}
@media (min-width:1400px){body.page-admin .page{ padding-left:32px; padding-right:32px; }
body.page-admin .topbar{ padding-left:32px; padding-right:32px; }}
body.page-admin .card{ background:#fff; border:1px solid var(--line); border-radius:14px; }
body.page-admin .card-pad{ padding:18px; }
body.page-admin .card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line); }
body.page-admin .card-head h2{ font-size:15.5px; font-weight:800; }
body.page-admin .card-head a{ font-size:13px; font-weight:700; color:var(--red); }
body.page-admin .grid-2{ display:grid; gap:16px; grid-template-columns:1fr; margin-top:16px; }
@media (min-width:1100px){body.page-admin .grid-2{ grid-template-columns:1.3fr 1fr; }}
body.page-admin .status-card{
  display:flex; flex-direction:column; gap:14px; padding:18px; border-radius:14px;
  background:#fff; border:1px solid var(--line); margin-bottom:16px;
}
body.page-admin .status-card h2{ font-size:15.5px; font-weight:800; margin-bottom:4px; }
body.page-admin .status-card .when{ color:var(--muted); font-size:13.5px; line-height:1.6; }
body.page-admin .status-card .big{ font-size:13px; font-weight:800; color:var(--red); margin-top:4px; }
@media (min-width:640px){body.page-admin .status-card{ flex-direction:row; align-items:center; justify-content:space-between; }}
body.page-admin .stats{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
@media (min-width:860px){body.page-admin .stats{ grid-template-columns:repeat(4, 1fr); gap:16px; }}
body.page-admin .stat{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; }
body.page-admin .stat .ic{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
body.page-admin .stat .ic.red{ background:var(--red-tint); color:var(--red); }
body.page-admin .stat .ic.green{ background:var(--green-tint); color:var(--green-text); }
body.page-admin .stat .ic.blue{ background:var(--blue-tint); color:var(--blue-text); }
body.page-admin .stat .ic.amber{ background:var(--amber-tint); color:var(--amber-text); }
body.page-admin .stat .num{ font-size:26px; font-weight:800; line-height:1; }
body.page-admin .stat .lbl{ font-size:12px; font-weight:700; color:var(--muted); margin-top:6px; }
body.page-admin .stat .sub{ font-size:12px; color:var(--muted); margin-top:4px; }
body.page-admin .bar{ height:8px; background:var(--line); border-radius:999px; overflow:hidden; }
body.page-admin .bar > i{ display:block; height:100%; background:var(--red); border-radius:999px; }
body.page-admin .bar.green > i{ background:var(--green-text); }
body.page-admin .table-wrap{ overflow-x:auto; }
body.page-admin .table{ width:100%; border-collapse:collapse; }
body.page-admin .table th, body.page-admin .table td{ padding:11px 18px; text-align:left; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:middle; }
body.page-admin .table th{ font-size:11.5px; font-weight:800; letter-spacing:.04em; color:var(--muted); text-transform:uppercase; background:var(--paper-soft); }
body.page-admin .table tr:last-child td{ border-bottom:0; }
body.page-admin .table .num{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
body.page-admin .table .bar-cell{ min-width:130px; }
body.page-admin .empty{ text-align:center; padding:30px 18px; color:var(--muted); font-size:14px; }
body.page-admin .check-list{ list-style:none; margin:0; padding:6px 18px 14px; display:grid; gap:2px; }
body.page-admin .check-list li{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; }
body.page-admin .check-list li:last-child{ border-bottom:0; }
body.page-admin .check-list .mark{
  width:24px; height:24px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:#F1F2F4; color:var(--muted);
}
body.page-admin .check-list li.ok .mark{ background:var(--green-tint); color:var(--green-text); }
body.page-admin .check-list li.no .mark{ background:var(--red-tint); color:var(--red); }
body.page-admin .check-list a{ margin-left:auto; font-size:13px; font-weight:700; color:var(--red); white-space:nowrap; }
body.page-admin .log-list{ list-style:none; margin:0; padding:4px 18px 10px; }
body.page-admin .log-list li{ padding:11px 0; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:3px; }
body.page-admin .log-list li:last-child{ border-bottom:0; }
body.page-admin .log-list .t{ font-size:13.5px; line-height:1.45; }
body.page-admin .log-list .m{ font-size:12px; color:var(--muted); display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
body.page-admin .quick{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin-top:16px; }
@media (min-width:860px){body.page-admin .quick{ grid-template-columns:repeat(4, 1fr); }}
body.page-admin .quick a{
  display:flex; align-items:center; gap:10px; padding:14px; border-radius:12px;
  background:#fff; border:1px solid var(--line); font-size:13.5px; font-weight:700;
}
body.page-admin .quick a:hover{ border-color:var(--red); color:var(--red); }
body.page-admin .quick svg{ color:var(--red); flex-shrink:0; }
body.page-admin .panel-foot{ text-align:center; color:var(--muted); font-size:12px; padding:0 16px 24px; }
@media (prefers-reduced-motion:reduce){body.page-admin .sidebar{ transition:none; }}
body.page-admin .btn-danger{ background:var(--red-tint); color:var(--red-dark); border-color:#c9d6e4; }
body.page-admin .btn-danger:hover{ background:var(--red); color:#fff; border-color:var(--red); }
body.page-admin .btn-danger-solid{ background:var(--red); color:#fff; }
body.page-admin .btn-danger-solid:hover{ background:var(--red-dark); }
body.page-admin .muted{ color:var(--muted); }
body.page-admin .hint{ font-size:12px; color:var(--muted); }
body.page-admin .error-text{ font-size:12.5px; color:var(--red-dark); margin-top:5px; }
body.page-admin .field .is-invalid{ border-color:var(--red); }
body.page-admin .field-title{ font-size:13px; font-weight:700; margin-bottom:8px; }
body.page-admin .field-row{ display:grid; gap:0 16px; grid-template-columns:minmax(0,1fr); }
@media (min-width:560px){body.page-admin .field-row{ grid-template-columns:repeat(2, minmax(0,1fr)); }}
body.page-admin .modal{
  width:min(92vw, 400px); padding:0; border:0; border-radius:16px; background:#fff; color:var(--ink);
  box-shadow:0 24px 60px -20px rgba(20,20,30,.45);
}
body.page-admin .modal::backdrop{ background:rgba(20,24,32,.5); }
body.page-admin .modal-body{ padding:22px 22px 8px; }
body.page-admin .modal-icon{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--red-tint); color:var(--red); margin-bottom:14px; }
body.page-admin .modal h2{ font-size:17px; font-weight:800; margin-bottom:6px; }
body.page-admin .modal p{ font-size:14px; line-height:1.55; color:var(--muted); }
body.page-admin .modal p strong{ color:var(--ink); }
body.page-admin .modal-actions{ display:flex; justify-content:flex-end; gap:10px; padding:18px 22px 22px; }
@media (max-width:480px){body.page-admin .modal-actions{ flex-direction:column-reverse; }
body.page-admin .modal-actions .btn{ width:100%; }}
body.page-admin .cand-cell{ display:flex; align-items:center; gap:10px; min-width:0; }
body.page-admin .cand-text{ min-width:0; }
body.page-admin .num-badge{ font-size:12.5px; font-weight:800; color:var(--red-dark); background:var(--red-tint); padding:2px 8px; border-radius:999px; flex:none; }
body.page-admin .thumb{ width:40px; height:40px; border-radius:10px; object-fit:cover; flex:none; background:var(--paper-soft); }
body.page-admin .thumb-ph{ display:grid; place-items:center; font-weight:800; font-size:15px; color:var(--red-dark); background:var(--red-tint); }
body.page-admin .cell-title{ font-weight:700; line-height:1.3; overflow-wrap:anywhere; }
body.page-admin .cell-sub{ font-size:12.5px; color:var(--muted); max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.page-admin .cell-warn{ font-size:12.5px; color:var(--amber-text); margin-top:2px; }
body.page-admin .cand-meta{ font-size:13px; color:var(--muted); }
body.page-admin .row-actions{ display:flex; gap:8px; justify-content:flex-end; }
body.page-admin .row-actions form{ margin:0; }
body.page-admin .limit-note{ font-size:14px; color:var(--muted); }
@media (max-width:720px){body.page-admin .table.cand-table, body.page-admin .cand-table tbody{ display:block; width:100%; }
body.page-admin .cand-table thead{ display:none; }
body.page-admin .cand-table tr{
    display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px;
    grid-template-areas:"cand status" "kelas kelas" "lengkap lengkap" "aksi aksi";
    padding:14px 16px; border-bottom:1px solid var(--line);
  }
body.page-admin .cand-table tr:last-child{ border-bottom:0; }
body.page-admin .table.cand-table td{ display:block; padding:0; border:0; }
body.page-admin .cand-table .c-cand{ grid-area:cand; }
body.page-admin .cand-table .c-status{ grid-area:status; align-self:start; }
body.page-admin .cand-table .c-kelas{ grid-area:kelas; }
body.page-admin .cand-table .c-lengkap{ grid-area:lengkap; }
body.page-admin .cand-table .c-aksi{ grid-area:aksi; margin-top:4px; }
body.page-admin .cell-sub{ max-width:100%; }
body.page-admin .row-actions form, body.page-admin .row-actions .btn{ flex:1; }
body.page-admin .row-actions form .btn{ width:100%; }
body.page-admin .cand-page .page-actions .btn{ width:100%; }}
body.page-admin .cand-grid, body.page-admin .form-split{ display:grid; gap:16px; grid-template-columns:minmax(0,1fr); grid-template-areas:"side" "main"; }
body.page-admin .cand-side, body.page-admin .split-side{ grid-area:side; }
body.page-admin .cand-main, body.page-admin .split-main{ grid-area:main; }
@media (min-width:900px){body.page-admin .cand-grid, body.page-admin .form-split{ grid-template-columns:minmax(0,1fr) 280px; grid-template-areas:"main side"; align-items:start; }
body.page-admin .cand-side, body.page-admin .split-side{ position:sticky; top:84px; }}
@media (max-width:639px){body.page-admin .cand-page .field input[type=text], body.page-admin .cand-page .field input[type=number], body.page-admin .cand-page .field select, body.page-admin .cand-page .field textarea, body.page-admin .voter-page .field input[type=text], body.page-admin .voter-page .field input[type=search], body.page-admin .voter-page .field input[type=number], body.page-admin .voter-page .field select, body.page-admin .voter-page .field textarea{ font-size:16px; }}
body.page-admin .photo-row{ display:flex; align-items:center; gap:14px; margin-bottom:12px; }
body.page-admin .photo-preview{ width:96px; height:96px; border-radius:14px; object-fit:cover; background:var(--paper-soft); border:1px solid var(--line); flex:none; }
body.page-admin .photo-ph{ display:grid; place-items:center; font-size:12px; color:var(--muted); }
body.page-admin .photo-preview[hidden]{ display:none; }
body.page-admin .file-btn{ position:relative; cursor:pointer; }
body.page-admin .file-btn input{ position:absolute; width:1px; height:1px; opacity:0; }
body.page-admin .file-btn:focus-within{ outline:2px solid var(--red); outline-offset:2px; }
body.page-admin .switch{ display:flex; align-items:center; gap:12px; cursor:pointer; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
body.page-admin .switch input{ position:absolute; opacity:0; width:1px; height:1px; }
body.page-admin .switch-track{ width:42px; height:24px; border-radius:999px; background:#CBD0D6; position:relative; flex:none; transition:background .15s; }
body.page-admin .switch-track::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .15s; }
body.page-admin .switch input:checked + .switch-track{ background:var(--green-text); }
body.page-admin .switch input:checked + .switch-track::after{ transform:translateX(18px); }
body.page-admin .switch input:focus-visible + .switch-track{ outline:2px solid var(--red); outline-offset:2px; }
body.page-admin .switch strong{ display:block; font-size:14px; }
body.page-admin .form-actions{ display:flex; gap:10px; justify-content:flex-end; padding-top:4px; }
@media (max-width:559px){body.page-admin .form-actions{ flex-direction:column-reverse; }
body.page-admin .form-actions .btn{ width:100%; }}
body.page-admin .sec{ margin-top:16px; scroll-margin-top:84px; }
body.page-admin .count-chip{ font-size:12px; font-weight:700; padding:2px 10px; border-radius:999px; background:var(--paper-soft); color:var(--muted); }
body.page-admin .item-list{ list-style:none; margin:0 0 16px; padding:0; border:1px solid var(--line); border-radius:12px; }
body.page-admin ol.item-list{ counter-reset:n; }
body.page-admin .item-list li{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:10px 12px; }
body.page-admin .item-list li + li{ border-top:1px solid var(--line); }
body.page-admin ol.item-list li::before{ counter-increment:n; content:counter(n) "."; color:var(--muted); min-width:1.4em; font-size:14px; }
body.page-admin .item-body{ flex:1; min-width:0; overflow-wrap:anywhere; font-size:14px; line-height:1.45; }
body.page-admin .item-body small{ display:block; color:var(--muted); font-size:12.5px; margin-top:2px; }
body.page-admin .item-list form{ margin:0; flex:none; }
body.page-admin .item-empty{ padding:14px; font-size:14px; color:var(--muted); border:1px dashed var(--line); border-radius:12px; margin-bottom:16px; }
body.page-admin .add-form{ display:grid; gap:12px; }
body.page-admin .add-form .field{ margin-bottom:0; }
body.page-admin .add-form > .btn{ align-self:end; }
@media (min-width:560px){body.page-admin .add-form.cols-2{ grid-template-columns:minmax(0,1fr) auto; }
body.page-admin .add-form.cols-3{ grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto; }}
body.page-admin .voter-page .stats{ margin-bottom:16px; }
body.page-admin .stat .bar{ margin-top:10px; }
body.page-admin .filter-bar{ display:grid; gap:12px; grid-template-columns:minmax(0,1fr); padding:16px; margin-bottom:16px; }
body.page-admin .filter-bar .field{ margin-bottom:0; }
body.page-admin .filter-actions{ display:flex; gap:8px; align-items:flex-end; }
body.page-admin .filter-actions .btn{ flex:1; }
@media (min-width:560px){body.page-admin .filter-bar{ grid-template-columns:repeat(2, minmax(0,1fr)); }}
@media (min-width:560px) and (max-width:1099px){body.page-admin .filter-bar .f-search, body.page-admin .filter-actions{ grid-column:1 / -1; }}
@media (min-width:1100px){body.page-admin .filter-bar{ grid-template-columns:minmax(0,2fr) repeat(4, minmax(0,1fr)) auto; }}
body.page-admin .voter-table .c-nis{ font-variant-numeric:tabular-nums; white-space:nowrap; }
body.page-admin .token-cell{ display:flex; align-items:center; gap:6px; }
body.page-admin .token{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight:700; font-size:13.5px; letter-spacing:.08em; padding:3px 9px; border-radius:8px;
  background:var(--paper-soft); border:1px solid var(--line);
}
body.page-admin .copy-btn{
  border:0; background:transparent; color:var(--red); font:inherit; font-size:12.5px; font-weight:700;
  cursor:pointer; padding:4px 8px; border-radius:6px; min-width:58px;
}
body.page-admin .copy-btn:hover{ background:var(--red-tint); }
body.page-admin .td-label{ display:none; }
@media (max-width:720px){body.page-admin .table.voter-table, body.page-admin .voter-table tbody{ display:block; width:100%; }
body.page-admin .voter-table thead{ display:none; }
body.page-admin .voter-table tr{
    display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; align-items:center;
    grid-template-areas:"nama status" "nis kelas" "token token" "aksi aksi";
    padding:14px 16px; border-bottom:1px solid var(--line);
  }
body.page-admin .voter-table tr:last-child{ border-bottom:0; }
body.page-admin .table.voter-table td{ display:block; padding:0; border:0; }
body.page-admin .voter-table .c-nama{ grid-area:nama; }
body.page-admin .voter-table .c-status{ grid-area:status; align-self:start; }
body.page-admin .voter-table .c-nis{ grid-area:nis; font-size:13px; color:var(--muted); }
body.page-admin .voter-table .c-kelas{ grid-area:kelas; font-size:13px; color:var(--muted); text-align:right; }
body.page-admin .voter-table .c-token{ grid-area:token; }
body.page-admin .voter-table .c-aksi{ grid-area:aksi; margin-top:4px; }
body.page-admin .td-label{ display:inline; }
body.page-admin .voter-table .row-actions .btn, body.page-admin .voter-table .row-actions form{ flex:1; }
body.page-admin .voter-table .row-actions form .btn{ width:100%; }
body.page-admin .voter-page .page-actions .btn{ flex:1; }}
body.page-admin .pager{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; flex-wrap:wrap; }
body.page-admin .pager-info{ font-size:13px; color:var(--muted); }
body.page-admin .pager-list{ display:flex; gap:6px; list-style:none; margin:0; padding:0; }
body.page-admin .pager-list a, body.page-admin .pager-list span{
  min-width:34px; height:34px; padding:0 8px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; font-size:13px; font-weight:700; border:1.5px solid var(--line); background:#fff;
}
body.page-admin .pager-list a:hover{ border-color:var(--red); color:var(--red); }
body.page-admin .pager-list .current{ background:var(--red); border-color:var(--red); color:#fff; }
body.page-admin .pager-list .gap{ border:0; background:transparent; color:var(--muted); min-width:20px; padding:0; }
body.page-admin .pager .is-disabled{ opacity:.45; pointer-events:none; }
@media (max-width:639px){body.page-admin .pager{ justify-content:center; }
body.page-admin .pager-list{ display:none; }
body.page-admin .pager-info{ order:-1; width:100%; text-align:center; }}
body.page-admin .token-box{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
body.page-admin .token-box .token{ font-size:16px; padding:6px 12px; }
body.page-admin .meta-list{ list-style:none; margin:0 0 14px; padding:0; font-size:13px; color:var(--muted); display:grid; gap:4px; }
body.page-admin .side-actions{ display:grid; gap:8px; }
body.page-admin .side-actions form{ margin:0; }
body.page-admin .side-actions .btn{ width:100%; }
body.page-admin .upload-box{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:16px; border:1.5px dashed var(--line); border-radius:12px; margin-bottom:16px; }
body.page-admin .upload-name{ font-size:14px; color:var(--muted); min-width:0; overflow-wrap:anywhere; }
body.page-admin .check{ display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.5; cursor:pointer; margin-bottom:16px; }
body.page-admin .check input{ margin-top:3px; width:18px; height:18px; accent-color:var(--red); flex:none; }
body.page-admin .check .hint{ display:block; }
body.page-admin .guide-list{ margin:0 0 14px; padding-left:20px; font-size:14px; line-height:1.7; }
body.page-admin .report-notes{ margin:12px 0 0; padding-left:18px; font-size:13.5px; line-height:1.6; color:var(--muted); }
body.page-admin .import-grid{ display:grid; gap:16px; grid-template-columns:minmax(0,1fr); }
@media (min-width:1100px){body.page-admin .import-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }}
@media (min-width:640px){body.page-admin .pager-info{ display:none; }}
body.page-admin .rank-badge{
  display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; flex:none;
  font-weight:800; font-size:13px; background:var(--paper-soft); color:var(--muted); border:1px solid var(--line);
}
body.page-admin .rank-badge.first{ background:var(--red); color:#fff; border-color:var(--red); }
body.page-admin .bar.lg{ height:10px; }
body.page-admin .bar.rest > i{ background:#B9C0CA; }
body.page-admin .pct-text{ display:block; font-weight:800; font-size:13px; margin-bottom:6px; font-variant-numeric:tabular-nums; }
body.page-admin .result-page .stats{ margin-bottom:16px; }
body.page-admin .res-head{ padding:0 0 12px; border-bottom:0; flex-wrap:wrap; }
body.page-admin .res-grid{ display:grid; gap:16px; grid-template-columns:minmax(0,1fr); }
@media (min-width:700px){body.page-admin .res-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }}
@media (min-width:1200px){body.page-admin .res-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }}
body.page-admin .res-card{ padding:18px; display:flex; flex-direction:column; gap:14px; }
body.page-admin .res-card.is-leader{ border-color:var(--red); box-shadow:0 18px 40px -28px rgba(30,58,95,.55); }
body.page-admin .res-top{ display:flex; align-items:center; gap:12px; min-width:0; }
body.page-admin .res-photo{ width:56px; height:56px; border-radius:14px; object-fit:cover; flex:none; background:var(--paper-soft); }
body.page-admin .res-name{ font-weight:800; font-size:15.5px; line-height:1.25; overflow-wrap:anywhere; }
body.page-admin .res-sub{ font-size:12.5px; color:var(--muted); margin-top:4px; display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
body.page-admin .res-score{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
body.page-admin .res-votes{ font-size:32px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
body.page-admin .res-votes small{ font-size:13px; font-weight:700; color:var(--muted); margin-left:6px; }
body.page-admin .res-pct{ font-size:18px; font-weight:800; color:var(--red-dark); font-variant-numeric:tabular-nums; }
body.page-admin .res-refresh{ margin-top:16px; }
body.page-admin .report-stack > * + *{ margin-top:16px; }
body.page-admin .report-grid{ margin-top:16px; align-items:start; }
body.page-admin .report-col > * + *{ margin-top:16px; }
body.page-admin .report-meta{ margin-bottom:16px; font-size:13.5px; }
body.page-admin .report-meta b{ color:var(--ink); }
body.page-admin .report-verdict{ font-size:14px; line-height:1.7; border-top:1px solid var(--line); }
body.page-admin .report-dl{ display:flex; gap:8px; flex-wrap:wrap; padding:0; }
body.page-admin .table tfoot td{ border-top:2px solid var(--line); border-bottom:0; background:var(--paper-soft); }
@media (max-width:639px){body.page-admin .report-page .page-actions .btn{ width:100%; }}
body.page-admin .print-only{ display:none; }
body.page-admin .print-head{ text-align:center; margin-bottom:16px; }
body.page-admin .print-head h1{ font-size:20px; font-weight:800; margin-bottom:4px; }
body.page-admin .sign-grid{ grid-template-columns:repeat(2, 1fr); gap:48px; margin-top:40px; text-align:center; }
body.page-admin .sign-role{ font-size:13px; font-weight:700; }
body.page-admin .sign-line{ height:72px; border-bottom:1px solid var(--ink); }
@media print{@page{ margin:14mm; }
body.page-admin .sidebar, body.page-admin .topbar, body.page-admin .scrim, body.page-admin .no-print, body.page-admin .panel-foot, body.page-admin .menu-btn{ display:none !important; }
body.page-admin .main{ margin-left:0 !important; }
body.page-admin .page{ padding:0 !important; max-width:none !important; }
body.page-admin .print-only{ display:block; }
body.page-admin .sign-grid.print-only{ display:grid; }
body.admin{ background:#fff; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
body.page-admin .card, body.page-admin .stat{ break-inside:avoid; box-shadow:none; }
body.page-admin .grid-2{ grid-template-columns:1fr !important; }
body.page-admin .table-wrap{ overflow:visible; }
body.page-admin .table th, body.page-admin .table td{ padding:7px 10px; font-size:12px; }}
body.page-admin .field input[type=date]{
  width:100%; padding:11px 14px; min-height:46px; border:1.5px solid var(--line); border-radius:10px;
  font:inherit; font-size:14.5px; background:#fff; color:var(--ink);
}
body.page-admin .field input[type=date]:focus{ border-color:var(--red); outline:none; box-shadow:0 0 0 3px var(--red-tint); }
body.page-admin .log-page .stats{ margin-bottom:16px; }
body.page-admin .log-table .c-waktu{ white-space:nowrap; font-variant-numeric:tabular-nums; }
body.page-admin .log-desc{ max-width:440px; overflow-wrap:anywhere; line-height:1.45; }
body.page-admin .log-code{ font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:11.5px; }
body.page-admin .log-ip{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12.5px; color:var(--muted);
  background:var(--paper-soft); border:1px solid var(--line); border-radius:6px; padding:2px 7px;
}
body.page-admin .log-table .c-pelaku .cell-sub{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; max-width:none; white-space:normal; }
body.page-admin .log-table .c-pelaku .pill{ padding:2px 8px; font-size:11px; }
@media (max-width:720px){body.page-admin .table.log-table, body.page-admin .log-table tbody{ display:block; width:100%; }
body.page-admin .log-table thead{ display:none; }
body.page-admin .log-table tr{
    display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; align-items:start;
    grid-template-areas:"aksi waktu" "pelaku pelaku" "ket ket" "ip ip";
    padding:14px 16px; border-bottom:1px solid var(--line);
  }
body.page-admin .log-table tr:last-child{ border-bottom:0; }
body.page-admin .table.log-table td{ display:block; padding:0; border:0; }
body.page-admin .log-table .c-aksi{ grid-area:aksi; }
body.page-admin .log-table .c-waktu{ grid-area:waktu; text-align:right; font-size:13px; color:var(--muted); }
body.page-admin .log-table .c-pelaku{ grid-area:pelaku; }
body.page-admin .log-table .c-ket{ grid-area:ket; }
body.page-admin .log-table .c-ip{ grid-area:ip; }
body.page-admin .log-desc{ max-width:100%; }}
@media (max-width:639px){body.page-admin .log-page .field input[type=search], body.page-admin .log-page .field input[type=date], body.page-admin .log-page .field select, body.page-admin .setting-page .field input[type=text], body.page-admin .setting-page .field input[type=datetime-local], body.page-admin .master-page .field input[type=text], body.page-admin .master-page .field input[type=number]{ font-size:16px; }}
body.page-admin .admin-table .c-login{ white-space:nowrap; color:var(--muted); font-size:13px; }
body.page-admin .admin-table .cell-title .num-badge{ margin-left:6px; vertical-align:1px; }
body.page-admin .admin-table .cell-sub{ max-width:none; }
@media (max-width:720px){body.page-admin .table.admin-table, body.page-admin .admin-table tbody{ display:block; width:100%; }
body.page-admin .admin-table thead{ display:none; }
body.page-admin .admin-table tr{
    display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; align-items:center;
    grid-template-areas:"nama status" "peran login" "aksi aksi";
    padding:14px 16px; border-bottom:1px solid var(--line);
  }
body.page-admin .admin-table tr:last-child{ border-bottom:0; }
body.page-admin .table.admin-table td{ display:block; padding:0; border:0; }
body.page-admin .admin-table .c-nama{ grid-area:nama; }
body.page-admin .admin-table .c-status{ grid-area:status; align-self:start; }
body.page-admin .admin-table .c-peran{ grid-area:peran; }
body.page-admin .admin-table .c-login{ grid-area:login; text-align:right; }
body.page-admin .admin-table .c-aksi{ grid-area:aksi; margin-top:4px; }
body.page-admin .admin-table .row-actions .btn, body.page-admin .admin-table .row-actions form{ flex:1; }
body.page-admin .admin-table .row-actions form .btn{ width:100%; }
body.page-admin .admin-page .page-actions .btn{ width:100%; }}
@media (max-width:639px){body.page-admin .admin-page .field input[type=text], body.page-admin .admin-page .field input[type=password], body.page-admin .admin-page .field select{ font-size:16px; }}

/* ===== 04_suaraku.css ===== */
/* =========================================================================
   Suaraku — komponen tambahan
   -------------------------------------------------------------------------
   Isi file ini cuma yang TIDAK ada di referensi: halaman milik Suaraku
   (panduan, cek status, tanya kandidat, simulasi, bandingkan, surat suara,
   hasil publik) plus beberapa kebutuhan panel panitia.
   Semua nilai mengikuti bahasa desain referensi (radius 10-14px, font
   Plus Jakarta Sans, border 1.5px, dsb.) supaya tidak terasa tempelan.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Token tambahan
   ------------------------------------------------------------------------- */
body.page-site,
body.page-voter-login,
body.page-admin{
  --accent:#2e7d78;          /* teal Suaraku: aksen, bukan warna utama   */
  --accent-tint:#e4f0ee;
  --accent-dark:#256b66;
}

[hidden]{ display:none !important; }
body.hidden{ display:none !important; }

/* aksen teal pada elemen yang di referensi memakai warna primer */
body.page-site .hero-text h1 .accent,
body.page-site .brand-title .yr,
body.page-site .section-head h2 .dash{ color:var(--accent); }
body.page-voter-login .side-mid h2 span{ color:#9fe3da; }

/* -------------------------------------------------------------------------
   2. Primitif halaman publik (form, seksi, pill)
   ------------------------------------------------------------------------- */
body.page-site .page-shell{
  max-width:1160px; margin:0 auto; padding:28px 16px 56px;
}
body.page-site .page-head{ margin-bottom:20px; }
body.page-site .page-head h1{ font-size:22px; font-weight:800; letter-spacing:-.01em; }
body.page-site .page-head p{ color:var(--muted); font-size:14px; margin-top:6px; line-height:1.6; }
body.page-site .back-btn{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:14px;
  font-size:13.5px; font-weight:700; color:var(--muted); background:none;
  border:0; cursor:pointer; padding:0;
}
body.page-site .back-btn:hover{ color:var(--red); }

body.page-site .field{ margin-bottom:16px; }
body.page-site .field label{
  display:block; font-size:13px; font-weight:700; margin-bottom:6px;
}
body.page-site .field .hint{ font-size:12px; color:var(--muted); margin-top:5px; }
body.page-site .field input[type=text],
body.page-site .field input[type=password],
body.page-site .field input[type=search],
body.page-site .field select,
body.page-site .field textarea,
body.page-site .field input[type=datetime-local]{
  width:100%; padding:11px 14px; min-height:46px; border:1.5px solid var(--line);
  border-radius:10px; font:inherit; font-size:14.5px; background:#fff; color:var(--ink);
}
body.page-site .field textarea{ min-height:110px; resize:vertical; line-height:1.55; }
body.page-site .field input:focus,
body.page-site .field select:focus,
body.page-site .field textarea:focus{
  border-color:var(--red); outline:none; box-shadow:0 0 0 3px var(--red-tint);
}
body.page-site .field-row{
  display:grid; gap:0 16px; grid-template-columns:minmax(0,1fr);
}
@media (min-width:560px){
  body.page-site .field-row{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
body.page-site .form-actions{
  display:flex; gap:10px; justify-content:flex-end; padding-top:4px; flex-wrap:wrap;
}
@media (max-width:559px){
  body.page-site .form-actions{ flex-direction:column-reverse; }
  body.page-site .form-actions .btn{ width:100%; }
}

body.page-site .msg{ font-size:13.5px; font-weight:600; margin-top:10px; min-height:1px; }
body.page-site .msg.error{ color:#b42318; }
body.page-site .msg.ok{ color:var(--green-text); }

body.page-site .page-card{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:18px; margin-bottom:16px;
}
body.page-site .page-card > h2{
  font-size:15.5px; font-weight:800; margin-bottom:12px;
}
body.page-site .stack > * + *{ margin-top:16px; }
body.page-site .split{
  display:grid; gap:16px; grid-template-columns:minmax(0,1fr);
}
@media (min-width:860px){
  body.page-site .split{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:start; }
}

body.page-site .pill{
  display:inline-flex; align-items:center; gap:6px; padding:4px 11px;
  border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap;
}
body.page-site .pill .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
body.page-site .pill.green{ background:var(--green-tint); color:var(--green-text); }
body.page-site .pill.gray{ background:#F1F2F4; color:var(--muted); }
body.page-site .pill.teal{ background:var(--accent-tint); color:var(--accent-dark); }

body.page-site .empty{
  text-align:center; padding:30px 18px; color:var(--muted); font-size:14px;
}
body.page-site .muted{ color:var(--muted); }
body.page-site .hint-line{ font-size:12.5px; color:var(--muted); line-height:1.6; }

body.page-site .chip-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
body.page-site .mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:700; font-size:13.5px; letter-spacing:.08em; padding:3px 9px;
  border-radius:8px; background:var(--paper-soft); border:1px solid var(--line);
}

/* -------------------------------------------------------------------------
   3. Header global: chip pengguna + dropdown
   ------------------------------------------------------------------------- */
body.page-site .user-chip{
  display:inline-flex; align-items:center; gap:9px; padding:5px 12px 5px 6px;
  border:1.5px solid var(--line); border-radius:999px; background:#fff;
  cursor:pointer; font-size:12.5px; font-weight:700; color:var(--ink);
}
body.page-site .user-chip:hover{ border-color:var(--red); }
body.page-site .user-avatar{
  width:28px; height:28px; border-radius:50%; background:var(--red-tint);
  color:var(--accent-dark); font-weight:800; font-size:12px;
  display:flex; align-items:center; justify-content:center; flex:none;
}
body.page-site .user-menu{
  position:absolute; right:16px; top:58px; z-index:40; width:210px;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 22px 48px -26px rgba(20,20,30,.45); padding:12px;
}
body.page-site .user-menu .u-name{ font-size:13.5px; font-weight:800; }
body.page-site .user-menu .u-role{ font-size:12px; color:var(--muted); margin-top:2px; }
body.page-site .user-menu .u-out{
  width:100%; margin-top:10px; justify-content:center;
}

/* bar bawah khusus HP */
body.page-site .sticky-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:35;
  display:flex; gap:10px; padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97); border-top:1px solid var(--line);
  backdrop-filter:blur(6px);
}
body.page-site .sticky-bar .btn{ flex:1; }
@media (min-width:860px){ body.page-site .sticky-bar{ display:none; } }

/* -------------------------------------------------------------------------
   4. Panduan: langkah, timeline, keamanan
   ------------------------------------------------------------------------- */
body.page-site .steps{
  display:grid; gap:14px; grid-template-columns:minmax(0,1fr);
}
@media (min-width:700px){
  body.page-site .steps{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (min-width:1100px){
  body.page-site .steps{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}
body.page-site .step-card{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px;
  display:flex; flex-direction:column; gap:10px;
}
body.page-site .step-no{
  width:30px; height:30px; border-radius:9px; background:var(--red-tint);
  color:var(--red-dark); font-weight:800; font-size:13.5px;
  display:flex; align-items:center; justify-content:center;
}
body.page-site .step-card h3{ font-size:15px; font-weight:800; }
body.page-site .step-card p{ font-size:13.5px; color:var(--muted); line-height:1.6; }

body.page-site .timeline{ list-style:none; margin:0; padding:0; position:relative; }
body.page-site .tl-step{
  position:relative; padding:0 0 22px 34px; border-left:2px solid var(--line);
  margin-left:9px;
}
body.page-site .tl-step:last-child{ border-left-color:transparent; padding-bottom:0; }
body.page-site .tl-step .dot-mark{
  position:absolute; left:-11px; top:2px; width:20px; height:20px; border-radius:50%;
  background:#fff; border:2px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; color:var(--muted);
}
body.page-site .tl-step .tl-label{ font-size:14.5px; font-weight:800; }
body.page-site .tl-step .tl-desc{ font-size:13px; color:var(--muted); margin-top:3px; line-height:1.55; }
body.page-site .tl-step.done .dot-mark{ background:var(--green-tint); border-color:#bfe0cb; color:var(--green-text); }
body.page-site .tl-step.now .dot-mark{ background:var(--red); border-color:var(--red); color:#fff; }
body.page-site .tl-step.now .tl-label{ color:var(--red-dark); }

body.page-site .security-grid{
  display:grid; gap:14px; grid-template-columns:minmax(0,1fr);
}
@media (min-width:700px){
  body.page-site .security-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
body.page-site .security-item{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px;
  display:grid; gap:8px;
}
body.page-site .security-item .icon-chip{
  width:38px; height:38px; border-radius:50%; background:var(--red-tint);
  color:var(--red); display:flex; align-items:center; justify-content:center;
}
body.page-site .security-item strong{ font-size:14.5px; }
body.page-site .security-item span{ font-size:13px; color:var(--muted); line-height:1.6; }

/* -------------------------------------------------------------------------
   5. Cek status suara
   ------------------------------------------------------------------------- */
body.page-site .cek-hasil{
  border-radius:14px; border:1px solid var(--line); background:#fff; padding:20px;
}
body.page-site .cek-hasil .cek-big{ font-size:20px; font-weight:800; margin:12px 0 6px; }
body.page-site .cek-hasil dl{ margin:14px 0 0; display:grid; gap:6px; font-size:13.5px; }
body.page-site .cek-hasil dl div{ display:flex; gap:8px; }
body.page-site .cek-hasil dt{ color:var(--muted); min-width:88px; }
body.page-site .cek-hasil dd{ margin:0; font-weight:600; }

/* -------------------------------------------------------------------------
   6. Surat suara: kartu pilih, konfirmasi, terima kasih
   ------------------------------------------------------------------------- */
body.page-site .ballot-hero{
  position:relative; overflow:hidden; border-radius:16px; color:#fff;
  background:linear-gradient(140deg,#2c5183 0%,#1e3a5f 45%,#16293f 100%);
  padding:22px 20px; margin-bottom:18px;
}
body.page-site .ballot-hero .bh-label{
  font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:#9fe3da;
}
body.page-site .ballot-hero h1{ font-size:20px; font-weight:800; margin-top:8px; }
body.page-site .ballot-hero p{ font-size:13.5px; line-height:1.6; margin-top:8px; color:rgba(255,255,255,.86); }
body.page-site .ballot-hero-art{
  position:absolute; right:-30px; bottom:-28px; width:210px; opacity:.5;
  pointer-events:none;
}
body.page-site .ballot-hero-art svg{ width:100%; height:auto; }

body.page-site .pick-grid{
  display:grid; gap:14px; grid-template-columns:minmax(0,1fr);
}
@media (min-width:700px){
  body.page-site .pick-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (min-width:1100px){
  body.page-site .pick-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
body.page-site .pick-card{
  position:relative; text-align:left; width:100%; background:#fff;
  border:1.5px solid var(--line); border-radius:16px; padding:0; overflow:hidden;
  cursor:pointer; font:inherit; color:inherit; display:flex; flex-direction:column;
}
body.page-site .pick-card:hover{ border-color:var(--red); }
body.page-site .pick-card.selected{
  border-color:var(--red);
  box-shadow:0 18px 40px -28px rgba(30,58,95,.55);
}
body.page-site .pick-card .pc-top{ display:flex; align-items:center; gap:12px; padding:16px; }
body.page-site .pick-card .pc-photo{
  width:56px; height:56px; border-radius:14px; object-fit:cover; flex:none;
  background:var(--paper-soft);
}
body.page-site .pick-card .pc-ph{
  width:56px; height:56px; border-radius:14px; flex:none; display:grid; place-items:center;
  background:var(--red-tint); color:var(--red-dark); font-weight:800; font-size:17px;
}
body.page-site .pick-card h3{ font-size:15.5px; font-weight:800; }
body.page-site .pick-card .pc-sub{ font-size:12.5px; color:var(--muted); margin-top:4px; line-height:1.5; }
body.page-site .pick-card .pc-prog{
  padding:0 16px 16px; margin:0; list-style:none; display:grid; gap:6px;
  font-size:13px; color:var(--muted); line-height:1.5;
}
body.page-site .pick-card .pc-prog li{ padding-left:16px; position:relative; }
body.page-site .pick-card .pc-prog li::before{
  content:""; position:absolute; left:0; top:7px; width:6px; height:6px;
  border-radius:50%; background:var(--accent);
}
body.page-site .pick-card .pc-check{
  margin:0 16px 16px; padding:9px; border-radius:10px; text-align:center;
  font-size:13px; font-weight:700; background:var(--paper-soft); color:var(--muted);
  border:1.5px solid var(--line);
}
body.page-site .pick-card.selected .pc-check{
  background:var(--red); color:#fff; border-color:var(--red);
}

body.page-site .confirm-box{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px;
  margin-bottom:16px;
}
body.page-site .confirm-box h2{ font-size:16px; font-weight:800; margin-bottom:6px; }
body.page-site .confirm-box p{ font-size:14px; color:var(--muted); line-height:1.6; }
body.page-site .confirm-box .btn-row{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
@media (max-width:559px){
  body.page-site .confirm-box .btn-row .btn{ flex:1; }
}

body.page-site .thanks-box{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px 20px;
  text-align:center;
}
body.page-site .thanks-box .th-icon{
  width:56px; height:56px; margin:0 auto 14px; border-radius:50%;
  background:var(--green-tint); color:var(--green-text);
  display:flex; align-items:center; justify-content:center;
}
body.page-site .thanks-box h2{ font-size:18px; font-weight:800; }
body.page-site .thanks-box p{ font-size:14px; color:var(--muted); margin-top:8px; line-height:1.65; }
body.page-site .thanks-box .btn-row{
  display:flex; gap:10px; justify-content:center; margin-top:18px; flex-wrap:wrap;
}
@media (max-width:559px){
  body.page-site .thanks-box .btn-row .btn{ width:100%; }
}

/* -------------------------------------------------------------------------
   7. Hasil publik
   ------------------------------------------------------------------------- */
body.page-site .rank-list{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
body.page-site .rank-item{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px;
}
body.page-site .rank-item.leader{
  border-color:var(--red);
  box-shadow:0 18px 40px -28px rgba(30,58,95,.55);
}
body.page-site .rank-top{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
body.page-site .rank-name{ font-size:15.5px; font-weight:800; line-height:1.3; }
body.page-site .rank-sub{ font-size:12.5px; color:var(--muted); margin-top:3px; }
body.page-site .rank-score{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:8px;
}
body.page-site .rank-votes{ font-size:26px; font-weight:800; line-height:1; }
body.page-site .rank-votes small{ font-size:13px; font-weight:700; color:var(--muted); margin-left:6px; }
body.page-site .rank-pct{ font-size:17px; font-weight:800; color:var(--red-dark); }
body.page-site .bar{ height:8px; background:var(--line); border-radius:999px; overflow:hidden; }
body.page-site .bar > i{ display:block; height:100%; background:var(--red); border-radius:999px; }
body.page-site .bar.green > i{ background:var(--green-text); }

body.page-site .winner-card{
  background:#fff; border:1px solid var(--red); border-radius:16px; padding:22px;
  text-align:center; box-shadow:0 20px 44px -30px rgba(30,58,95,.5);
}
body.page-site .winner-card .wc-label{
  font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent-dark);
}
body.page-site .winner-card h2{ font-size:22px; font-weight:800; margin-top:10px; }
body.page-site .winner-card p{ font-size:13.5px; color:var(--muted); margin-top:8px; }

body.page-site .feed-box{ list-style:none; margin:0; padding:0; }
body.page-site .feed-box li{
  display:flex; flex-direction:column; gap:2px; padding:10px 0;
  border-bottom:1px solid var(--line);
}
body.page-site .feed-box li:last-child{ border-bottom:0; }
body.page-site .feed-box .f-t{ font-size:13.5px; }
body.page-site .feed-box .f-m{ font-size:12px; color:var(--muted); }

/* -------------------------------------------------------------------------
   8. Tanya kandidat
   ------------------------------------------------------------------------- */
body.page-site .tanya-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
body.page-site .tanya-item{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px;
}
body.page-site .tanya-item .tq-meta{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px;
}
body.page-site .tanya-item .tq-text{ font-size:14.5px; line-height:1.6; }
body.page-site .tanya-item .tq-asker{ font-size:12.5px; color:var(--muted); margin-top:6px; }
body.page-site .tanya-item .tq-answer{
  margin-top:12px; padding:12px 14px; border-radius:12px;
  background:var(--accent-tint); border:1px solid #cfe6e2;
}
body.page-site .tanya-item .tq-answer .a-label{
  font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-dark);
}
body.page-site .tanya-item .tq-answer p{ font-size:14px; line-height:1.6; margin-top:6px; }

/* -------------------------------------------------------------------------
   9. Simulasi surat suara
   ------------------------------------------------------------------------- */
body.page-site .sim-hasil{
  background:#fff; border:1px solid var(--red); border-radius:16px; padding:22px;
  text-align:center;
}
body.page-site .sim-hasil h2{ font-size:18px; font-weight:800; margin-top:12px; }
body.page-site .sim-hasil p{ font-size:13.5px; color:var(--muted); margin-top:8px; line-height:1.6; }
body.page-site .sim-hasil .btn{ margin-top:16px; }

/* -------------------------------------------------------------------------
   10. Bandingkan kandidat
   ------------------------------------------------------------------------- */
body.page-site .compare-panel{
  display:grid; gap:16px; grid-template-columns:minmax(0,1fr);
}
@media (min-width:700px){
  body.page-site .compare-panel{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
body.page-site .compare-card{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px;
  display:flex; flex-direction:column; gap:12px;
}
body.page-site .compare-card h3{ font-size:16px; font-weight:800; }
body.page-site .compare-card .cc-ph{
  width:100%; aspect-ratio:4/3; border-radius:12px; object-fit:cover; background:var(--paper-soft);
}
body.page-site .compare-card .cc-ph-fallback{
  width:100%; aspect-ratio:4/3; border-radius:12px; display:grid; place-items:center;
  background:var(--red-tint); color:var(--red-dark); font-size:30px; font-weight:800;
}
body.page-site .compare-card .cc-block h4{
  font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin-bottom:6px;
}
body.page-site .compare-card ul{ margin:0; padding-left:18px; font-size:13.5px; line-height:1.65; }
body.page-site .compare-card p{ font-size:13.5px; line-height:1.65; }
body.page-site .compare-pick-row{
  display:grid; gap:12px; grid-template-columns:minmax(0,1fr);
}
@media (min-width:700px){
  body.page-site .compare-pick-row{ grid-template-columns:repeat(2, minmax(0,1fr)) auto; align-items:end; }
}

/* -------------------------------------------------------------------------
   11. Panel panitia: pelengkap
   ------------------------------------------------------------------------- */
body.page-admin .side-brand svg.logo-mark{
  width:38px; height:38px; border-radius:10px; flex:none; display:block;
}
body.page-admin .brand-logo-mark{ width:40px; height:40px; border-radius:11px; flex:none; }

body.page-admin .stat-grid-mini{
  display:grid; gap:12px; grid-template-columns:repeat(2, minmax(0,1fr));
  margin-bottom:16px;
}
@media (min-width:860px){
  body.page-admin .stat-grid-mini{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
}
body.page-admin .stat.mini{ padding:14px; }
body.page-admin .stat.mini .num{ font-size:22px; }

body.page-admin .bar-row + .bar-row{ margin-top:12px; }
body.page-admin .bar-row .br-top{
  display:flex; justify-content:space-between; gap:10px; font-size:13.5px;
  margin-bottom:6px; font-weight:600;
}
body.page-admin .bar-row .br-top small{ color:var(--muted); font-weight:700; }

body.page-admin .quick{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:16px;
}
@media (min-width:860px){
  body.page-admin .quick{ grid-template-columns:repeat(4,1fr); }
}
body.page-admin .quick a{
  display:flex; align-items:center; gap:10px; padding:14px; border-radius:12px;
  background:#fff; border:1px solid var(--line); font-size:13.5px; font-weight:700;
  cursor:pointer; text-align:left;
}
body.page-admin .quick a:hover{ border-color:var(--red); color:var(--red); }
body.page-admin .quick a svg{ color:var(--red); flex-shrink:0; }

body.page-admin .table .row-actions{ display:flex; gap:8px; justify-content:flex-end; }
body.page-admin .table .row-actions .btn{ min-height:34px; padding:6px 12px; font-size:13px; }
body.page-admin .table-wrap{ overflow-x:auto; }
body.page-admin .table .c-aksi{ white-space:nowrap; }
body.page-admin .table .num{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }

body.page-admin .page-note{
  font-size:13px; color:var(--muted); margin-top:10px; line-height:1.6;
}
body.page-admin .side-note{
  font-size:12.5px; color:var(--muted); line-height:1.6; margin-top:10px;
}
body.page-admin .switch-line{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--line);
}
body.page-admin .switch-line:last-child{ border-bottom:0; }
body.page-admin .switch-line strong{ font-size:14px; }
body.page-admin .switch-line small{ display:block; color:var(--muted); font-size:12.5px; margin-top:3px; }

body.page-admin .token-box{
  display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px;
}
body.page-admin .token-box .token{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-weight:700;
  font-size:16px; letter-spacing:.08em; padding:6px 12px; border-radius:8px;
  background:var(--paper-soft); border:1px solid var(--line);
}

body.page-admin .log-filter-grid{
  display:grid; gap:12px; grid-template-columns:minmax(0,1fr); padding:16px;
}
@media (min-width:560px){
  body.page-admin .log-filter-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (min-width:1100px){
  body.page-admin .log-filter-grid{ grid-template-columns:minmax(0,2fr) repeat(4, minmax(0,1fr)) auto; align-items:end; }
}
body.page-admin .log-filter-grid .field{ margin-bottom:0; }
body.page-admin .log-filter-grid .filter-actions{ display:flex; gap:8px; align-items:flex-end; }

body.page-admin .tanya-admin-list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
body.page-admin .tanya-admin-list li{
  border:1px solid var(--line); border-radius:12px; padding:14px; background:#fff;
}
body.page-admin .tanya-admin-list .ta-meta{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:8px;
}
body.page-admin .tanya-admin-list .ta-text{ font-size:14px; line-height:1.6; }
body.page-admin .tanya-admin-list .ta-answer{
  font-size:13.5px; color:var(--muted); margin-top:8px; line-height:1.6;
}
body.page-admin .tanya-admin-list .ta-actions{ margin-top:10px; }

/* -------------------------------------------------------------------------
   12. Panel admin: sembunyikan header publik
   ------------------------------------------------------------------------- */
body.admin-view .site-header{ display:none; }
body.admin-view .sticky-bar{ display:none; }

/* -------------------------------------------------------------------------
   13. Login pemilih: pelengkap state
   ------------------------------------------------------------------------- */
body.page-voter-login .status.closed{ color:#b42318; border-color:#f3c9c6; background:#fef3f2; }
body.page-voter-login .status.closed .dot{ background:#b42318; }
body.page-voter-login .status.wait{ color:var(--amber-text); border-color:#f0dba8; background:var(--amber-tint); }
body.page-voter-login .status.wait .dot{ background:var(--amber-text); }
body.page-voter-login .demo-note{
  margin-top:14px; font-size:12.5px; color:var(--muted); line-height:1.6;
  padding:10px 12px; border-radius:10px; background:var(--red-tint); border:1px solid #d5e2ef;
}
body.page-voter-login .card-brand-mobile .logo-mark,
body.page-voter-login .side-logo.logo-mark{
  width:44px; height:44px; border-radius:12px; display:block; flex:none;
}
body.page-voter-login .side-logo.logo-mark{ height:44px; width:44px; }
body.page-voter-login .msg{
  font-size:13px; font-weight:600; margin-top:10px; min-height:1px;
}
body.page-voter-login .msg.error{ color:#b42318; }
body.page-voter-login .msg.ok{ color:var(--green-text); }
body.page-voter-login .auth-card .btn-login{ margin-top:14px; }
body.page-admin .auth-brand svg.logo-mark{
  width:46px; height:46px; border-radius:12px; display:block; flex:none;
}

/* ===== 05_components.css ===== */
/* =====================================================================
   05_components.css -- lapisan komponen Suaraku.
   Menata markup yang DIHASILKAN app.js (kartu kandidat, bar hasil,
   kartu statistik, tabel admin, dsb) memakai bahasa desain referensi:
   Plus Jakarta Sans, radius 10-14px, border 1.5px, palet navy + teal.

   Ditulis tanpa prefix body.page-* supaya satu aturan berlaku di ketiga
   konteks (page-site / page-voter-login / page-admin); variabel warna
   tetap diwarisi dari body tiap konteks.
   ===================================================================== */

/* ---------- 1. kerangka SPA ---------------------------------------- */
.view { display: none; }
.view.active { display: block; }

.hidden { display: none !important; }

.reveal { opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease; }
.reveal.revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.revealed { opacity: 1; transform: none; transition: none; }
}

/* panel panitia hanya tampil saat view admin aktif */
#adminShell { display: none; }
#adminShell.on { display: block; }

/* ---------- 2. pil status ------------------------------------------ */
body.page-site .pill.ok,
body.page-admin .pill.ok,
body.page-voter-login .pill.ok { background: #E6F4F2; color: #1F6A65; }

body.page-site .pill.bad,
body.page-admin .pill.bad,
body.page-voter-login .pill.bad { background: #FDECEC; color: #B42318; }

body.page-site .pill.green { background: #E6F4F2; color: #1F6A65; }
body.page-site .pill.gray { background: #F1F2F4; color: #6B7280; }
body.page-site .pill.teal { background: #E6F4F2; color: #1F6A65; }

/* ---------- 3. tombol kecil ---------------------------------------- */
.btn-small {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 32px; padding: 0 11px; border-radius: 8px;
  font-family: inherit; font-size: 12.5px; font-weight: 700; line-height: 1;
  border: 1.5px solid var(--line, #E4E7EC); background: #fff; color: var(--ink, #1B2430);
  cursor: pointer; white-space: nowrap;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.btn-small:hover { border-color: var(--red, #1E3A5F); color: var(--red, #1E3A5F); }
.btn-small:disabled { opacity: .45; cursor: not-allowed; border-color: var(--line, #E4E7EC); color: var(--muted, #6B7280); }
.btn-block { display: flex; width: 100%; }

.small { font-size: 12.5px; line-height: 1.5; }
.muted.small { color: var(--muted, #6B7280); }

/* ---------- 4. kartu kandidat (dipakai beranda, surat suara, simulasi)
   markup app.js: .pick-card > .num-badge, .card-photo(>span+, img),
   .pick-body(> h3, p, .program-rows|.pills, button.btn) ------------- */
.pick-card {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1.5px solid var(--line, #E4E7EC);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.pick-card:hover { border-color: #C9D6E4; box-shadow: 0 10px 26px rgba(30, 58, 95, .09); }
.pick-card.selected { border-color: var(--red, #1E3A5F); box-shadow: 0 0 0 3px rgba(30, 58, 95, .12); }

.pick-card .num-badge {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  min-width: 30px; height: 26px; padding: 0 8px;
  border-radius: 8px; background: var(--red, #1E3A5F); color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: .2px;
  display: inline-flex; align-items: center; justify-content: center;
}

.pick-card .card-photo {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  border-radius: 10px; overflow: hidden;
  background: linear-gradient(150deg, #E8EEF5 0%, #D3DFEC 100%);
  display: flex; align-items: center; justify-content: center;
}
.pick-card .card-photo-fallback {
  font-size: 30px; font-weight: 800; color: #7C93AD; letter-spacing: .5px;
}
.pick-card .card-photo-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

.pick-card .pick-body { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; }
.pick-card .pick-body h3 {
  font-size: 15.5px; font-weight: 800; line-height: 1.3; color: var(--ink, #1B2430);
  margin: 0; padding-right: 42px;
}
.pick-card .pick-body p {
  margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted, #6B7280);
}

.pick-card .program-rows { display: flex; flex-direction: column; gap: 5px; margin: 4px 0 8px; }
.pick-card .program-row {
  position: relative; padding-left: 15px;
  font-size: 12px; line-height: 1.5; color: #3A4654;
}
.pick-card .program-row::before {
  content: ""; position: absolute; left: 3px; top: 7px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--teal, #2E7D78);
}

.pick-card .pills { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 10px; }
.pill-mini {
  display: inline-block; padding: 3px 8px; border-radius: 6px;
  background: var(--red-tint, #EDF3F8); color: #35526F;
  font-size: 11px; font-weight: 700; line-height: 1.4;
}

.pick-card .profile-btn,
.pick-card .pick-btn { margin-top: 6px; }
.pick-card .profile-btn.btn-ghost { background: transparent; }
.pick-card .btn-block { width: 100%; }

.pick-card .compare-check {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: var(--muted, #6B7280);
  margin: 2px 0 6px;
}
.pick-card .compare-check input { width: 15px; height: 15px; accent-color: var(--red, #1E3A5F); }

/* grid kartu di beranda & surat suara */
.candidates { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .candidates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .candidates { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pick-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- 5. hasil: bar perolehan --------------------------------
   markup app.js: .bar-row > .bar-label, .bar-track > .bar-fill, .bar-value */
.bars { display: flex; flex-direction: column; gap: 14px; }
.bar-row { display: flex; flex-direction: column; gap: 6px; }
.bar-row .bar-label {
  font-size: 13px; font-weight: 700; color: var(--ink, #1B2430);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.bar-row .bar-track {
  height: 8px; border-radius: 99px; background: #EDF1F5; overflow: hidden;
}
.bar-row .bar-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--red, #1E3A5F), #2C5183);
  width: 0; transition: width .7s cubic-bezier(.22, .8, .3, 1);
}
.bar-row .bar-value {
  font-size: 12px; font-weight: 600; color: var(--muted, #6B7280);
}

/* ---------- 6. kartu pemenang -------------------------------------- */
.winner-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px !important; border-radius: 14px;
  background: linear-gradient(160deg, #F4F8FB 0%, #FFFFFF 60%) !important;
  border: 1.5px solid #D9E4EF !important;
}
.winner-card .winner-photo {
  position: relative; flex: 0 0 64px; width: 64px; height: 64px;
  border-radius: 12px; overflow: hidden;
  background: #E4ECF4; display: flex; align-items: center; justify-content: center;
}
.winner-card .winner-photo-fallback { font-size: 20px; font-weight: 800; color: #7C93AD; }
.winner-card .winner-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.winner-card .winner-body { min-width: 0; }
.winner-card .winner-body h3 { font-size: 17px; font-weight: 800; margin: 6px 0 2px; }
.winner-card .winner-body p { margin: 0; font-size: 12.5px; color: var(--muted, #6B7280); }

/* ---------- 7. kartu statistik (dash-stat) ------------------------- */
.card.dash-stat { padding: 15px; display: flex; flex-direction: column; gap: 4px; }
.card.dash-stat .dash-icon {
  width: 32px; height: 32px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red-tint, #EDF3F8); color: var(--red, #1E3A5F);
  margin-bottom: 4px;
}
.card.dash-stat .dash-icon svg { width: 17px; height: 17px; }
.card.dash-stat .big {
  font-size: 26px; font-weight: 800; line-height: 1.15;
  letter-spacing: -.4px; color: var(--ink, #1B2430); margin: 0;
  font-variant-numeric: tabular-nums;
}
.card.dash-stat .dash-stat-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--muted, #6B7280); margin: 0;
}
.dash-bar { height: 7px; border-radius: 99px; background: #EDF1F5; overflow: hidden; margin-top: 6px; }
.dash-bar-fill {
  height: 100%; border-radius: 99px; width: 0;
  background: linear-gradient(90deg, var(--red, #1E3A5F), #2C5183);
  transition: width .7s cubic-bezier(.22, .8, .3, 1);
}

/* kesiapan pemilihan */
.siap-row {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 0; border-bottom: 1px solid var(--line, #EDEAEA);
  font-size: 13px; color: #3A4654;
}
.siap-row:last-child { border-bottom: 0; padding-bottom: 0; }
.siap-check {
  flex: 0 0 20px; width: 20px; height: 20px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #E6F4F2; color: #1F6A65; font-size: 11px; font-weight: 800;
}

/* ---------- 8. baris aktivitas ------------------------------------- */
.activity-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--line, #EDEAEA);
}
.activity-row:last-child { border-bottom: 0; }
.activity-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.activity-main strong { font-size: 13px; font-weight: 700; color: var(--ink, #1B2430); }
.activity-main span { font-size: 12px; color: var(--muted, #6B7280); }

/* ---------- 9. token ------------------------------------------------- */
.token-chip, .token-code {
  display: inline-block; padding: 3px 8px; border-radius: 7px;
  background: #F2F5F9; border: 1px solid #DDE5EE;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 700; letter-spacing: .6px; color: #22344D;
}
.voter-time { display: block; margin-top: 3px; font-size: 11px; color: var(--muted, #6B7280); }

/* ---------- 10. sel aksi & pager ----------------------------------- */
.aksi-cell { white-space: nowrap; }
.aksi-cell .btn-small { margin-right: 4px; }
.aksi-cell .btn-small:last-child { margin-right: 0; }
.pager {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px; border-top: 1px solid var(--line, #EDEAEA);
}
.pager .page-info { font-size: 12px; font-weight: 600; color: var(--muted, #6B7280); }

/* ---------- 11. sel kandidat di tabel admin ------------------------ */
.kand-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kand-photo {
  position: relative; flex: 0 0 38px; width: 38px; height: 38px;
  border-radius: 10px; overflow: hidden; background: #E4ECF4;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #7C93AD;
}
.kand-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kand-badge {
  flex: 0 0 auto; padding: 2px 7px; border-radius: 6px;
  background: var(--red-tint, #EDF3F8); color: #35526F;
  font-size: 11px; font-weight: 800;
}
.kand-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kand-id strong { font-size: 13px; font-weight: 700; color: var(--ink, #1B2430); }
.kand-slogan {
  font-size: 11.5px; color: var(--muted, #6B7280); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}

/* ---------- 12. hasil versi panitia ------------------------------- */
.res-grid { display: flex; flex-direction: column; gap: 10px; }
.hasil-admin-cand {
  display: grid; grid-template-columns: 34px minmax(0, 1fr);
  align-items: center; gap: 4px 12px;
  padding: 13px 15px; background: #fff;
  border: 1.5px solid var(--line, #EDEAEA); border-radius: 12px;
}
.hasil-admin-rank {
  grid-row: span 2; width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red-tint, #EDF3F8); color: var(--red, #1E3A5F);
  font-size: 12px; font-weight: 800;
}
.hasil-admin-info { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.hasil-admin-info strong { font-size: 13.5px; font-weight: 700; }
.hasil-admin-info span { font-size: 12px; color: var(--muted, #6B7280); white-space: nowrap; }
.hasil-admin-cand .dash-bar { grid-column: 2; margin: 0; }

/* ---------- 13. tanya kandidat (markup app.js) -------------------- */
.tanya-list { display: flex; flex-direction: column; gap: 10px; }
.tanya-item {
  background: #fff; border: 1.5px solid var(--line, #EDEAEA);
  border-radius: 12px; padding: 13px 14px;
}
.tanya-item .tanya-head { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; }
.tanya-item p { margin: 0 0 6px; font-size: 13px; line-height: 1.55; color: #2C3742; }
.tanya-item p.muted { font-size: 11.5px; color: var(--muted, #6B7280); margin-bottom: 0; }
.tanya-jawaban {
  margin-top: 9px; padding: 10px 12px; border-radius: 10px;
  background: #F4F8FB; border-left: 3px solid var(--teal, #2E7D78);
}
.tanya-jawaban strong {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: #1F6A65; margin-bottom: 3px;
}
.tanya-jawaban p { margin: 0; font-size: 12.5px; line-height: 1.55; }
.tanya-admin-list { display: flex; flex-direction: column; gap: 0; padding: 4px 16px 16px; }
.tanya-admin-list .tanya-item { border: 0; border-bottom: 1px solid var(--line, #EDEAEA); border-radius: 0; padding: 12px 0; }
.tanya-admin-list .tanya-item:last-child { border-bottom: 0; }
.tanya-admin-list .tanya-item .btn-small { margin-top: 6px; }

/* ---------- 14. cek status & simulasi ----------------------------- */
.cek-big { font-size: 21px; font-weight: 800; letter-spacing: -.3px; margin: 8px 0 6px; }
.sim-big { font-size: 16px; font-weight: 800; line-height: 1.4; margin: 8px 0 6px; }
.sim-hasil, .cek-hasil {
  background: #fff; border: 1.5px solid var(--line, #EDEAEA);
  border-radius: 12px; padding: 16px;
}
.sim-hasil p, .cek-hasil p { font-size: 13px; line-height: 1.55; color: #3A4654; margin: 0 0 6px; }
.sim-hasil .btn, .cek-hasil .btn { margin-top: 8px; }

/* ---------- 15. perbandingan ------------------------------------- */
.compare-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.compare-head h3 { font-size: 14px; font-weight: 800; }
.compare-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .compare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.compare-card {
  background: #fff; border: 1.5px solid var(--line, #EDEAEA);
  border-radius: 12px; padding: 14px;
}
.compare-card img {
  width: 100%; height: 130px; object-fit: cover;
  border-radius: 9px; margin-bottom: 10px; display: block;
}
.compare-card h3 { font-size: 15px; font-weight: 800; margin-bottom: 3px; }
.compare-card h4 {
  font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted, #6B7280); margin: 12px 0 5px;
}
.compare-card p { font-size: 12.5px; line-height: 1.55; color: #3A4654; margin: 0; }
.compare-card ul { margin: 0; padding-left: 16px; }
.compare-card ul li { font-size: 12.5px; line-height: 1.6; color: #3A4654; }
.compare-panel { margin-top: 14px; }

/* ---------- 16. menu user (chip header & panel) ------------------- */
.user-menu, .admin-menu {
  position: fixed; top: 62px; right: 14px; z-index: 60;
  min-width: 190px; padding: 12px;
  background: #fff; border: 1.5px solid var(--line, #E4E7EC);
  border-radius: 12px; box-shadow: 0 16px 40px rgba(20, 30, 45, .16);
}
.user-menu .u-name { font-size: 13px; font-weight: 800; color: var(--ink, #1B2430); }
.user-menu .u-role { font-size: 11.5px; color: var(--muted, #6B7280); margin-bottom: 8px; }
.user-menu .u-out { width: 100%; }

.admin-chip {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 9px 5px 5px; border-radius: 10px;
  border: 1.5px solid var(--line, #EDEAEA); background: #fff; cursor: pointer;
  font-family: inherit; text-align: left;
}
.admin-avatar {
  width: 30px; height: 30px; border-radius: 8px; flex: 0 0 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red, #1E3A5F); color: #fff; font-size: 12px; font-weight: 800;
}
.admin-info { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.admin-info b { font-size: 12.5px; font-weight: 700; color: var(--ink, #1B2430); }
.admin-info small { font-size: 10.5px; color: var(--muted, #6B7280); }
@media (max-width: 640px) { .admin-info { display: none; } }

/* ---------- 17. tabel: gulir horizontal di layar kecil ------------ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 720px) {
  .table-wrap > .table { min-width: 560px; }
}

/* ---------- 18. panel panitia: catatan kaki ----------------------- */
.panel-foot {
  padding: 16px; text-align: center;
  font-size: 11.5px; color: var(--muted, #6B7280);
  border-top: 1px solid var(--line, #EDEAEA); margin-top: 8px;
}

/* ---------- 19. konfeti ------------------------------------------- */
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 200; overflow: hidden; }
.confetti-piece {
  position: absolute; top: -14px; width: 8px; height: 13px; border-radius: 2px;
  animation-name: confettiFall; animation-timing-function: linear; animation-fill-mode: forwards;
}
@keyframes confettiFall {
  from { transform: translateY(0) rotate(0deg); opacity: 1; }
  to { transform: translateY(105vh) rotate(420deg); opacity: .9; }
}

/* ---------- 20. linimasa (markup app.js: .tl-dot / .tl-state) ----- */
.timeline { list-style: none; margin: 0; padding: 0; }
.tl-step { position: relative; padding: 0 0 18px 34px; }
.tl-step:last-child { padding-bottom: 0; }
.tl-step::before {
  content: ""; position: absolute; left: 11px; top: 24px; bottom: 0;
  width: 2px; background: var(--line, #E4E7EC);
}
.tl-step:last-child::before { display: none; }
.tl-step .tl-dot {
  position: absolute; left: 0; top: 0;
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #EDF1F5; color: #7C93AD;
  font-size: 11px; font-weight: 800;
}
.tl-step .tl-label {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13.5px; font-weight: 700; color: var(--ink, #1B2430);
  padding-top: 2px;
}
.tl-step .tl-state {
  padding: 2px 7px; border-radius: 6px; background: #F1F2F4; color: var(--muted, #6B7280);
  font-size: 10.5px; font-weight: 700; letter-spacing: .2px;
}
.tl-step .tl-desc { font-size: 12.5px; line-height: 1.55; color: var(--muted, #6B7280); margin-top: 3px; }
.tl-step.tl-done .tl-dot { background: #E6F4F2; color: #1F6A65; }
.tl-step.tl-done .tl-state { background: #E6F4F2; color: #1F6A65; }
.tl-step.tl-active .tl-dot { background: var(--red, #1E3A5F); color: #fff; }
.tl-step.tl-active .tl-state { background: var(--red-tint, #EDF3F8); color: var(--red, #1E3A5F); }
.tl-step.tl-active .tl-label { color: var(--red, #1E3A5F); }

/* ---------- 21. header publik: status periode --------------------- */
.status-pill { display: inline-flex; align-items: center; gap: 6px; }
.status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pill.closed { background: #FDECEC !important; color: #B42318 !important; }

/* ---------- 22. ukuran logo vektor (mark 48x48) -------------------- */
.brand-logo-mark, .logo-mark, .side-logo.logo-mark, .auth-brand svg.logo-mark,
.card-brand-mobile svg.logo-mark, .footer-icon svg { width: 34px; height: 34px; flex: 0 0 34px; display: block; }
body.page-site .brand-logo-mark { width: 34px; height: 34px; }
@media (min-width: 860px) { .brand-logo-mark { width: 38px; height: 38px; flex-basis: 38px; } }

/* ---------- 23. ruang untuk bar aksi lengket ---------------------- */
@media (max-width: 859px) { body.has-sticky { padding-bottom: 82px; } }

/* ---------- 24. header/footer publik disembunyikan di halaman
   login & panel panitia (kerangka halaman itu punya kepala sendiri) -- */
body.page-voter-login .site-header,
body.page-voter-login .site-footer,
body.page-voter-login .footer-wave,
body.page-admin .site-header,
body.page-admin .site-footer,
body.page-admin .footer-wave { display: none !important; }

/* aksen teal pada judul panel samping (menggantikan kuning referensi) */
body.page-voter-login .side-mid h2 span { color: #7FD1C8; }

/* ---------- 25. kartu status periode di panel ---------------------- */
body.page-admin .status-card .pill { align-self: flex-start; flex: 0 0 auto; }
body.page-admin .status-card h3 { font-size: 14px; font-weight: 800; margin: 0 0 4px; }
body.page-admin .status-card .when { font-size: 12.5px; color: var(--muted); margin: 0 0 6px; line-height: 1.55; }
body.page-admin .status-card .big { font-size: 17px; font-weight: 800; letter-spacing: -.2px; margin: 0 0 4px; }

/* ---------- 26. nav-item sekarang <button>: buang gaya bawaan ------- */
body.page-admin .nav-item {
  width: 100%; border: 0; background: transparent; font-family: inherit;
  text-align: left; cursor: pointer; color: #3A4350;
}
body.page-admin .nav-item.active { color: var(--red-dark); }
body.page-admin .nav-item:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
body.page-admin .side-foot .nav-item { background: transparent; border: 0; width: 100%; }

/* ---------- 27. tombol pilih kandidat (surat suara & profil) ------- */
.pick-card .pick-btn {
  width: 100%; min-height: 38px; margin-top: 4px;
  background: var(--red); border-color: var(--red); color: #fff;
  font-size: 13px; justify-content: center;
}
.pick-card .pick-btn:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }
.pick-card .profile-btn { justify-content: center; }

/* ---- Perbaikan mobile 2026-10-28 (audit video Sul) ---- */
body{ font-family:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; }
@media (max-width: 859px) { body.has-sticky { padding-bottom: 120px; } }
@media (max-width:720px){ body.page-admin .page-head h1{ display:none; } }
@media (max-width:720px){
  body.page-admin .table.token-table, body.page-admin .token-table tbody{ display:block; width:100%; }
  body.page-admin .token-table thead{ display:none; }
  body.page-admin .token-table tr{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; align-items:center; grid-template-areas:"nama status" "token token" "aksi aksi"; padding:14px 16px; border-bottom:1px solid var(--line); }
  body.page-admin .token-table tr:last-child{ border-bottom:0; }
  body.page-admin .table.token-table td{ display:block; padding:0; border:0; }
}
body.page-admin .token-table .c-nama{ grid-area:nama; }
body.page-admin .token-table .c-status{ grid-area:status; align-self:start; }
body.page-admin .token-table .c-token{ grid-area:token; }
body.page-admin .token-table .c-aksi{ grid-area:aksi; margin-top:4px; }
@media (max-width:720px){
  .table-wrap > .table.fit-mobile{ min-width:0; }
  .table-wrap > .table.fit-mobile th, .table-wrap > .table.fit-mobile td{ padding:10px 8px; font-size:13px; }
}
/* Tombol kembali topbar admin: tetap terlihat juga di desktop (menu-btn disembunyikan >=960px) */
body.page-admin .topbar .menu-btn.top-back-btn{ display:flex; }

/* ================= PREMIUM PASS 2026-10-29 (Sul: bangun semuanya) ================= */
/* 1. Background hero berlapis: cahaya teal + navy samar di atas paper-soft */
body.page-site .hero{
  background:
    radial-gradient(560px 260px at 85% 0%, rgba(46,125,120,0.18), rgba(46,125,120,0) 70%),
    radial-gradient(420px 240px at 6% 18%, rgba(30,58,95,0.10), rgba(30,58,95,0) 70%),
    var(--paper-soft);
}

/* 2. Hero: eyebrow lebih renggang + aksen teal, kartu statistik jadi kaca */
body.page-site .eyebrow{ letter-spacing:0.10em; color:var(--accent); font-size:11.5px; }
body.page-site .hero-text h1{ letter-spacing:-0.02em; }
body.page-site .stat-card{
  background:rgba(255,255,255,0.72);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(255,255,255,0.75);
  box-shadow:0 18px 40px -18px rgba(20,40,60,0.28);
}

/* 3. Kartu kandidat: bayangan dalam-halus, gradasi foto, badge kaca, hover naik */
body.page-site .card{ border-radius:16px; box-shadow:0 16px 34px -20px rgba(20,40,60,0.30); }
/* Gradasi bawah foto: elemen nyata (pengganti ::after yang tidak tampak di render) */
body.page-site .card-photo-shade{
  position:absolute; left:0; right:0; bottom:0; height:120px; z-index:1;
  background:linear-gradient(to top, rgba(15,30,48,0.65), rgba(15,30,48,0));
  pointer-events:none;
}
body.page-site .badge{
  border-radius:999px; background:rgba(255,255,255,0.92); color:var(--red);
  border:1px solid rgba(255,255,255,0.9); box-shadow:0 4px 12px rgba(20,40,60,0.25);
}
@media (hover:hover){
  body.page-site .card{ transition:transform .18s ease, box-shadow .18s ease; }
  body.page-site .card:hover{ transform:translateY(-4px); box-shadow:0 24px 44px -20px rgba(20,40,60,0.35); }
}

/* 4. Tombol: primer gradasi navy ke teal, sekunder outline dengan hover lembut */
body.page-site .btn-primary{
  background:linear-gradient(135deg, var(--red-dark), var(--red) 55%, var(--accent));
  box-shadow:0 12px 24px -10px rgba(22,41,63,0.55);
}
@media (hover:hover){
  body.page-site .btn-primary:hover{ filter:brightness(1.07); }
  body.page-site .btn-ghost:hover{ background:#fff; }
}

/* 5. Ritme section: label kapital + jarak antar section dilegakan */
body.page-site .candidates-section::before{
  content:"KANDIDAT"; display:block; font-size:11px; font-weight:800;
  letter-spacing:0.12em; color:var(--accent); margin-bottom:12px;
}
body.page-site .page-head::before{
  display:block; font-size:11px; font-weight:800; letter-spacing:0.12em;
  color:var(--accent); margin-bottom:8px;
}
body.page-site #view-panduan .page-head::before{ content:"PANDUAN"; }
body.page-site #view-hasil .page-head::before{ content:"HASIL PEMILIHAN"; }
body.page-site #view-bandingkan .page-head::before{ content:"BANDINGKAN"; }
body.page-site #view-cek-status .page-head::before{ content:"CEK STATUS"; }
body.page-site #view-tanya .page-head::before{ content:"TANYA KANDIDAT"; }
body.page-site #view-simulasi .page-head::before{ content:"SIMULASI"; }
body.page-site .candidates-section{ margin-top:52px; }
body.page-site .info-strip{ margin-top:36px; }
body.page-site .security-banner{ margin-top:44px; }
@media (min-width:560px){
  body.page-site .candidates-section{ margin-top:64px; }
  body.page-site .info-strip{ margin-top:44px; }
  body.page-site .security-banner{ margin-top:56px; }
}
@media (min-width:860px){
  body.page-site .candidates-section{ margin-top:72px; }
  body.page-site .info-strip{ margin-top:64px; }
  body.page-site .security-banner{ margin-top:64px; }
}

/* ================= KOREKSI PREMIUM PASS 2026-10-29 ================= */
/* Kartu beranda memakai .pick-card/.num-badge (bukan .card/.badge): */
body.page-site .pick-card{ box-shadow:0 16px 34px -20px rgba(20,40,60,0.30); }
body.page-site .pick-card .num-badge{
  border-radius:999px; background:rgba(255,255,255,0.94); color:var(--red);
  border:1px solid rgba(255,255,255,0.9); box-shadow:0 4px 12px rgba(20,40,60,0.25);
  height:30px; min-width:30px; font-size:13px;
}
/* ::after lama dihapus: digantikan .card-photo-shade di markup */
@media (hover:hover){
  body.page-site .pick-card{ transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
  body.page-site .pick-card:hover{ transform:translateY(-4px); border-color:var(--red); box-shadow:0 24px 44px -20px rgba(20,40,60,0.35); }
}
/* Glow footer: garis atas lama tertutup lekuk wave, ganti halo di lekuk + glow lebih kuat */
body.page-site footer.site-footer::before{ content:none; }
body.page-site .footer-wave{ filter:drop-shadow(0 -2px 10px rgba(46,125,120,0.45)); }
body.page-site footer.site-footer{
  background:
    radial-gradient(600px 170px at 50% 0%, rgba(46,125,120,0.38), rgba(46,125,120,0) 70%),
    var(--red);
}

/* ================= POLISH MOBILE 2026-10-29 (Sul: gas, bangun polish mobile) ================= */
/* Cakupan: layar kecil (<=859px, sama dengan jangkauan sticky-bar) + halaman publik saja.
   Desktop dan halaman panitia tidak berubah. Semua animasi hanya transform/opacity. */
@media (max-width:859px){
  /* 1. Hero: cahaya lebih terasa + gelembung cahaya melayang pelan + pola titik halus */
  body.page-site .hero{
    background:
      radial-gradient(520px 300px at 88% -4%, rgba(46,125,120,0.30), rgba(46,125,120,0) 70%),
      radial-gradient(420px 260px at 0% 12%, rgba(30,58,95,0.16), rgba(30,58,95,0) 70%),
      var(--paper-soft);
  }
  body.page-site .hero::before{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(240px 240px at 82% 8%, rgba(46,125,120,0.22), rgba(46,125,120,0) 70%);
    animation:suara-glow-drift 16s ease-in-out infinite alternate;
  }
  body.page-site .hero::after{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:radial-gradient(rgba(30,58,95,0.09) 1px, transparent 1.5px);
    background-size:22px 22px;
    -webkit-mask-image:linear-gradient(to bottom, black 0%, transparent 80%);
    mask-image:linear-gradient(to bottom, black 0%, transparent 80%);
    animation:suara-dot-drift 24s ease-in-out infinite alternate;
  }
  @keyframes suara-glow-drift{
    from{ transform:translate3d(0,0,0) scale(1); }
    to{ transform:translate3d(-18px,14px,0) scale(1.12); }
  }
  @keyframes suara-dot-drift{
    from{ transform:translateY(0); }
    to{ transform:translateY(-12px); }
  }
  /* konten hero sudah z-index:2, jadi tetap di atas kedua lapisan di atas */

  /* 2. Animasi masuk bertahap di beranda (sekali saat halaman dibuka) */
  @keyframes suara-rise{
    from{ opacity:0; transform:translateY(14px); }
    to{ opacity:1; transform:translateY(0); }
  }
  #view-beranda .hero-text .eyebrow{ animation:suara-rise .5s ease backwards; }
  #view-beranda .hero-text h1{ animation:suara-rise .5s .08s ease backwards; }
  #view-beranda .hero-text p.sub{ animation:suara-rise .5s .16s ease backwards; }
  #view-beranda .hero-text .cta-row{ animation:suara-rise .5s .24s ease backwards; }
  #view-beranda .hero-visual .stat-card{ animation:suara-rise .5s .30s ease backwards; }
  /* blok info beranda kini memakai reveal saat scroll (blok Optimalkan Menyeluruh di bawah) */
  /* kartu kandidat beranda kini memakai reveal saat scroll (blok Elegan & Hidup di bawah) */

  /* 3. Feedback ketuk: kartu mengecil sedikit saat ditekan (tombol sudah punya ini) */
  body.page-site .pick-card, body.page-site .card{
    transition:transform .12s ease, box-shadow .12s ease;
    -webkit-tap-highlight-color:transparent;
  }
  body.page-site .pick-card:active, body.page-site .card:active{ transform:scale(0.98); }
  body.page-site a, body.page-site button{ -webkit-tap-highlight-color:transparent; }

  /* 4. Kartu lebih berdimensi di layar kecil + foto kandidat sedikit lebih tinggi */
  body.page-site .pick-card{ box-shadow:0 20px 38px -18px rgba(20,40,60,0.38); }
  body.page-site .card-photo{ min-height:190px; }

  /* 5. Bar bawah lebih ramping */
  body.page-site .sticky-bar{ padding:8px 12px calc(8px + env(safe-area-inset-bottom)); gap:8px; }
}
/* Hormati setelan hemat gerak di HP: semua motion polish mati */
@media (prefers-reduced-motion:reduce){
  body.page-site .hero::before, body.page-site .hero::after{ animation:none !important; }
  #view-beranda .hero-text .eyebrow, #view-beranda .hero-text h1, #view-beranda .hero-text p.sub,
  #view-beranda .hero-text .cta-row, #view-beranda .hero-visual .stat-card,
  #view-beranda .info-strip .info-item, #view-beranda #berandaCandidates .pick-card{ animation:none !important; }
}

/* ================= ELEGAN & HIDUP 2026-10-29 (brief Sul) ================= */
/* 1. Tag program kandidat: satu gaya pil membulat di semua halaman.
   Beranda tadinya daftar bulleted, surat suara/bandingkan tadinya tag kecil 6px,
   profil dan hasil bandingkan tadinya tanpa gaya. Sekarang semua pil teal yang sama. */
body.page-site .pick-card .program-rows{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 10px; }
body.page-site .pick-card .program-row{
  position:static; padding:5px 11px; border-radius:999px;
  background:#E6F4F2; color:#1F6A65; font-size:11.5px; font-weight:700; line-height:1.4;
}
body.page-site .pick-card .program-row::before{ content:none; }
body.page-site .pick-card .pills{ gap:6px; margin:6px 0 10px; }
.pill-mini{
  padding:5px 11px; border-radius:999px;
  background:#E6F4F2; color:#1F6A65; font-size:11.5px; font-weight:700; line-height:1.4;
}
body.page-site .profil-program, body.page-site .compare-card ul{
  display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none;
}
body.page-site .profil-program li, body.page-site .compare-card ul li{
  padding:5px 11px; border-radius:999px; background:#E6F4F2; color:#1F6A65;
  font-size:11.5px; font-weight:700; line-height:1.4;
}
/* 2. Bilah bawah kaca + bayangan lembut untuk kartu yang belum punya */
body.page-site .sticky-bar{
  background:rgba(255,255,255,0.70);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
  backdrop-filter:blur(16px) saturate(1.5);
  border-top:1px solid rgba(255,255,255,0.65);
  box-shadow:0 -10px 30px rgba(20,40,60,0.10);
}
body.page-site .page-card, body.page-site .compare-card, body.page-site .confirm-box{
  box-shadow:0 16px 34px -20px rgba(20,40,60,0.28);
}
/* 3a. Ilustrasi kotak suara melayang halus di atas halaman surat suara */
body.page-site .ballot-hero-art{ animation:suara-float 3.6s ease-in-out infinite alternate; }
@keyframes suara-float{
  from{ transform:translateY(0); }
  to{ transform:translateY(-8px); }
}
/* 3b. Ripple tombol utama (shrink-on-tap sudah ada di .btn:active) */
.btn-primary{ position:relative; overflow:hidden; }
.btn-ripple{
  position:absolute; border-radius:50%; pointer-events:none;
  background:rgba(255,255,255,0.45);
  transform:translate(-50%,-50%) scale(0);
  animation:suara-ripple .6s ease-out forwards;
}
@keyframes suara-ripple{
  to{ transform:translate(-50%,-50%) scale(1); opacity:0; }
}
/* 3c. Reveal kartu kandidat saat halaman di-scroll (JS: IntersectionObserver) */
body.page-site .pick-card.reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .5s ease, transform .5s ease;
}
body.page-site .pick-card.reveal.in-view{ opacity:1; transform:none; }
body.page-site .pick-card.reveal.in-view:active{
  transform:scale(0.98); transition-duration:.12s;
}
@media (hover:hover){
  body.page-site .pick-card.reveal.in-view:hover{ transform:translateY(-4px); }
}
/* 3d. Jendela konfirmasi pilihan meluncur naik saat muncul */
body.page-site .confirm-box{ animation:suara-confirm-up .38s ease; }
@keyframes suara-confirm-up{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}
/* Hemat gerak: matikan semua motion baru */
@media (prefers-reduced-motion:reduce){
  body.page-site .ballot-hero-art, body.page-site .confirm-box{ animation:none !important; }
  .btn-ripple{ animation:none !important; }
  body.page-site .pick-card.reveal{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
}

/* ================= OPTIMALKAN MENYELURUH 2026-10-29 (brief Sul 2) ================= */
/* 1. Tombol satu keluarga: sudut 12px + gradasi primer yang sama di semua cakupan.
   Ukuran padding/font tetap kontekstual (CTA besar, baris tabel ringkas) supaya
   layout tidak rusak; yang diseragamkan adalah bentuk, gradasi, bayangan, dan
   feedback tekan. Tag program + bilah kaca sudah dikerjakan di blok sebelumnya. */
body.page-site .btn, body.page-admin .btn{ border-radius:12px; }
body.page-admin .btn-primary{
  background:linear-gradient(135deg, var(--red-dark), var(--red) 55%, var(--accent));
  box-shadow:0 12px 24px -10px rgba(22,41,63,0.55);
}
body.page-admin .btn-primary:hover{
  background:linear-gradient(135deg, var(--red-dark), var(--red) 55%, var(--accent));
  filter:brightness(1.07);
}
body.page-voter-login .btn-login{
  border-radius:12px;
  background:linear-gradient(135deg, var(--red-dark), var(--red) 55%, var(--accent));
  box-shadow:0 12px 24px -10px rgba(22,41,63,0.55);
}
.btn-small, body.page-admin .btn-sm{ border-radius:10px; }
/* Shrink-on-tap untuk semua tombol (tombol situs sudah punya; login tadinya geser 1px) */
body.page-admin .btn, .btn-small{ transition:transform .12s ease; }
body.page-admin .btn:active, .btn-small:active{ transform:scale(0.98); }
body.page-voter-login .btn-login:active{ transform:scale(0.98); }
/* 2. Bayangan lembut untuk semua kartu yang belum punya */
body.page-site .info-strip, body.page-site .security-banner, body.page-site .ballot-hero,
body.page-site .step-card, body.page-site .security-item, body.page-site .tanya-item{
  box-shadow:0 16px 34px -20px rgba(20,40,60,0.28);
}
/* 3. Scroll reveal untuk blok konten (kartu kandidat sudah punya aturannya sendiri) */
body.page-site .page-card.reveal, body.page-site .compare-card.reveal,
body.page-site .info-item.reveal, body.page-site .security-banner.reveal,
body.page-site .step-card.reveal, body.page-site .security-item.reveal,
body.page-site .tanya-item.reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .5s ease, transform .5s ease;
}
body.page-site .page-card.reveal.in-view, body.page-site .compare-card.reveal.in-view,
body.page-site .info-item.reveal.in-view, body.page-site .security-banner.reveal.in-view,
body.page-site .step-card.reveal.in-view, body.page-site .security-item.reveal.in-view,
body.page-site .tanya-item.reveal.in-view{
  opacity:1; transform:none;
}
body.page-site .info-item.reveal:nth-child(2){ transition-delay:.08s; }
body.page-site .info-item.reveal:nth-child(3){ transition-delay:.16s; }
body.page-site .info-item.reveal:nth-child(4){ transition-delay:.24s; }
/* Hemat gerak: netralkan reveal blok konten */
@media (prefers-reduced-motion:reduce){
  body.page-site .page-card.reveal, body.page-site .compare-card.reveal,
  body.page-site .info-item.reveal, body.page-site .security-banner.reveal,
  body.page-site .step-card.reveal, body.page-site .security-item.reveal,
  body.page-site .tanya-item.reveal{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
}

/* PERBAIKAN BAYANGAN HERO 2026-10-29: bayangan lembut sebelumnya terlalu samar di
   bawah banner gelap sehingga tidak terlihat; dibuat lebih pekat dan menjorok. */
body.page-site .ballot-hero{ box-shadow:0 24px 44px -14px rgba(10,25,45,0.50); }

/* ================= PERBAIKAN SCREENSHOT 2026-10-29 (Sul: gas poin 1, 2, 4 + nama + konsisten) ================= */
/* Semua aturan menarget komponen bersama (.pick-card dkk), BUKAN per halaman, sehingga
   beranda, surat suara, bandingkan, dan daftar panitia berubah serentak dan tetap sama. */
/* 1. Tag program membungkus alami (bukan bar selebar kartu): arah kolom lama di-reset. */
body.page-site .pick-card .program-rows{ flex-direction:row; align-items:flex-start; }
/* 2. Nama tidak lagi nempel ke sisi kartu: isi kartu diberi napas horizontal. */
.pick-card .pick-body{ padding:12px 8px 0; }
/* 3. Tombol Lihat Profil masuk palet: selama ini tanpa warna latar/teks eksplisit sehingga
   iOS menggambarnya sebagai tombol bawaan (abu + biru terang). Kini ghost navy. */
body.page-site .pick-card .profile-btn{
  background:#fff; color:var(--red); border:1.5px solid var(--red);
}
/* 4a. Pil status di HP: dari oval kosong bertitik menjadi titik saja. */
@media (max-width:559px){
  body.page-site .status-pill{ padding:0; border:none; background:transparent; }
  body.page-site .status-pill .dot{ width:8px; height:8px; }
}
/* 4b. Tombol bar bawah tidak melipat: satu baris. */
body.page-site .sticky-bar .btn{ font-size:13.5px; white-space:nowrap; padding:12px 10px; }

/* ================= PERBAIKAN MENU KELUAR 2026-10-29 (temuan video Sul: tombol Keluar biru di atas abu) ================= */
/* Akar sama seperti Lihat Profil: .btn-plain/.btn-sm hanya didefinisikan di body.page-admin,
   sehingga di halaman situs tombol ini tanpa warna latar/teks eksplisit dan iOS menggambar
   tombol bawaan (abu + biru terang). Kini ghost navy eksplisit. */
body.page-site .user-menu .u-out{
  background:#fff; color:var(--red); border:1.5px solid var(--red);
}

/* ================= PERBAIKAN MENU NYANGKUT DI ATAS 2026-10-29 (temuan video Sul) ================= */
/* Akar: header situs sticky (tetap di viewport saat scroll) tapi menu akun position:absolute
   yang menempel 58px dari ATAS DOKUMEN. Akibatnya menu ikut ke-scroll hilang ke atas, dan
   saat chip diketuk di bawah halaman, menu terbuka di atas dokumen (di luar viewport) sehingga
   tampak tidak muncul; baru ketemu setelah scroll balik ke atas. Kini fixed: menu menempel
   viewport tepat di bawah header lengket, di posisi scroll mana pun. */
body.page-site .user-menu{ position:fixed; }

/* ===== Banner ajakan Satu Suara di beranda demo + tautan seusai memilih ===== */
.sales-cta{
  margin-top:22px;
  background:linear-gradient(120deg,#16283F 0%,#1E3A5F 58%,#2E7D78 135%);
  border-radius:18px;
  padding:28px;
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
}
.sales-cta-text{flex:1 1 320px}
.sales-cta-text h4{color:#fff;font-size:21px;line-height:1.3;margin:0 0 8px}
.sales-cta-text p{color:#C9D6E4;font-size:15px;line-height:1.6;margin:0}
.sales-cta-actions{display:flex;gap:12px;flex-wrap:wrap}
body.page-site .btn-white{background:#fff;color:#1E3A5F}
body.page-site .btn-white:hover{background:#EAF0F6}
body.page-site .btn-outline-w{border:1.5px solid rgba(255,255,255,.55);color:#fff;background:transparent}
body.page-site .btn-outline-w:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
.thanks-cta{margin-top:16px;font-size:13.5px;line-height:1.6;color:var(--muted)}
.thanks-cta a{color:var(--accent);font-weight:700}
@media (max-width:560px){
  .sales-cta{padding:22px}
  .sales-cta-actions{width:100%}
  .sales-cta-actions .btn{flex:1;justify-content:center}
}

/* ---------- 31. profil kandidat (perbaikan 2026-11-03) ----------------
   Kelas .profil-* dari renderProfile tadinya tidak punya gaya sama sekali:
   label KANDIDAT NOMOR tampil sebagai teks polos menempel tombol kembali,
   inisial fallback "AP" muncul sebagai teks di atas foto, dan lencana nomor
   jatuh sebagai angka polos di bawah foto. Sekarang semuanya tertata:
   label kecil berhuruf renggang di atas nama, foto besar bersudut membulat
   dengan inisial sebagai lapisan cadangan di belakang gambar, dan lencana
   nomor sebagai cip navy di sudut kiri bawah foto. */
body.page-site .profil-num{
  display:block; margin:2px 0 8px;
  font-size:11.5px; font-weight:800; letter-spacing:0.16em;
  color:var(--accent, #2e7d78);
}
body.page-site .profil-name{
  font-size:clamp(27px, 6.4vw, 36px); font-weight:800;
  letter-spacing:-0.015em; line-height:1.12;
}
body.page-site .profil-tagline{
  margin-top:8px; font-size:16px; line-height:1.55; color:var(--muted);
}
body.page-site .profil-photo{
  position:relative; margin-top:22px;
  aspect-ratio:4/3.4;
  border-radius:22px; overflow:hidden;
  background:linear-gradient(150deg, #eef4f8, #dcebe6);
  box-shadow:0 18px 36px rgba(22, 41, 63, 0.14);
}
body.page-site .profil-photo-fallback{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:72px; font-weight:800; letter-spacing:0.02em; color:#52708f;
}
body.page-site .profil-photo-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 18%;
}
body.page-site .profil-badge{
  position:absolute; left:14px; bottom:14px; z-index:2;
  min-width:46px; height:46px; padding:0 13px;
  display:flex; align-items:center; justify-content:center;
  border-radius:14px; background:var(--red); color:#fff;
  font-size:19px; font-weight:800;
  border:1.5px solid rgba(255, 255, 255, 0.55);
  box-shadow:0 10px 22px rgba(22, 41, 63, 0.30);
}
body.page-site .profil-visi{ margin-top:28px; }
body.page-site .profil-visi h3{ font-size:18px; font-weight:800; margin-bottom:8px; }
body.page-site .profil-visi p{ font-size:15.5px; line-height:1.65; }