:root{
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  color:#17243a;
  background:#f5f7fa;
  font-synthesis:none;
  --navy:#073a68;
  --blue:#0868bd;
  --green:#0b8f5d;
  --red:#c9363f;
  --line:#d9e1eb;
  --stroke:#c3cfdb;
  --muted:#66758b;
  --radius:8px;
  --radius-small:6px;
  --shadow:0 8px 25px rgba(18,35,54,.10)}
*{box-sizing:border-box}
/* Panel memakai display:flex/grid, jadi atribut hidden perlu aturan eksplisit:
   tanpa ini layar "Menyiapkan eOSIS" ikut terender di atas panel yang sedang dipakai. */
[hidden]{display:none!important}
body{margin:0;min-height:100vh;background:#f5f7fa}
button,input,textarea{font:inherit}
button,a{cursor:pointer}
button{border-radius:var(--radius-small)}
:focus-visible{outline:3px solid rgba(8,104,189,.35);outline-offset:2px}
.eosis-header{height:76px;padding:0 clamp(18px,4vw,56px);display:flex;align-items:center;gap:24px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.eosis-brand{display:flex;align-items:center;gap:11px;color:var(--navy);text-decoration:none}
.eosis-brand img{width:46px;height:52px;object-fit:contain}
.eosis-brand span{display:grid;line-height:1}
.eosis-brand strong{font-size:22px}
.eosis-brand small{margin-top:5px;font-weight:700;color:var(--muted)}
.header-school{display:grid;padding-left:24px;border-left:1px solid var(--line)}
.header-school span{margin-top:4px;color:var(--muted);font-size:13px}
.quiet-command{margin-left:auto;border:1px solid var(--stroke);background:#fff;color:var(--navy);padding:10px 16px}
.eosis-main{width:min(1220px,calc(100% - 32px));margin:34px auto 60px}
.state-panel{min-height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:40px}
.state-panel.compact{min-height:260px}
.state-panel h1,.state-panel h2{margin:16px 0 8px}
.state-panel p{max-width:560px;color:var(--muted);line-height:1.6}
.loading-mark{width:42px;height:42px;border:4px solid #dce8f4;border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite}
.state-symbol{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#e5effa;color:var(--navy);font-size:24px;font-weight:800}
.success-state .state-symbol{background:#dff5e9;color:var(--green)}
.state-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;justify-content:center}
.state-actions a,.primary-command,.secondary-command,.success-command,.danger-command{border:0;border-radius:var(--radius-small);padding:11px 18px;font-weight:700;text-decoration:none}
.state-actions a,.primary-command{background:var(--navy);color:#fff}
.secondary-command{background:#fff;border:1px solid var(--stroke);color:var(--navy)}
.success-command{background:var(--green);color:#fff}
.danger-command{background:#fff1f1;color:var(--red);border:1px solid #efb8bc}
.primary-command:disabled,.secondary-command:disabled,.success-command:disabled,.danger-command:disabled{opacity:.45;cursor:not-allowed}
.workspace-heading,.student-intro{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:22px}
.workspace-heading h1,.student-intro h1{font-size:32px;margin:3px 0 8px;letter-spacing:0}
.workspace-heading span,.student-intro p{color:var(--muted)}
.eyebrow,.section-title p,.dialog-heading p{font-size:12px;color:var(--blue);font-weight:800;margin:0;text-transform:uppercase}
.status-pill{align-self:flex-start;padding:8px 14px;border:1px solid var(--stroke);border-radius:999px;background:#fff;font-weight:700;color:var(--navy)}
.status-pill[data-state="running"],.status-pill[data-state="open"]{border-color:#9ed3ba;background:#e5f5ed;color:var(--green)}
.status-pill[data-state="waiting"]{border-color:#eccb96;background:#fdf4e6;color:#8a5a10}
.status-pill[data-state="closed"]{border-color:var(--stroke);background:#eef2f6;color:var(--muted)}
.metric-strip{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:18px}
.metric-strip div{padding:20px;border-right:1px solid var(--line)}
.metric-strip div:last-child{border:0}
.metric-strip small{display:block;color:var(--muted);font-weight:700;font-size:11px}
.metric-strip strong{display:block;margin-top:7px;color:var(--navy);font-size:27px}
.admin-columns{display:grid;grid-template-columns:minmax(320px,.95fr) minmax(0,1.45fr);gap:18px;align-items:start}
.surface{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.section-title h2{margin:4px 0 0;font-size:20px}
.form-stack,.dialog-body{display:grid;gap:15px}
.form-stack label,.dialog-body label{display:grid;gap:7px}
.form-stack label span,.dialog-body label span{font-size:12px;font-weight:700;color:#40516a}
.form-stack input,.dialog-body input{width:100%;border:1px solid var(--stroke);border-radius:var(--radius-small);background:#fff;padding:11px 12px;color:#17243a}
.form-stack input:focus,.dialog-body input:focus{border-color:var(--blue)}
.form-stack textarea,.dialog-body textarea{width:100%;border:1px solid var(--stroke);border-radius:var(--radius-small);background:#fff;padding:11px 12px;color:#17243a;font:inherit;line-height:1.5}
.form-stack textarea:focus,.dialog-body textarea:focus{border-color:var(--blue);outline:2px solid rgba(8,104,189,.15);outline-offset:1px}
.form-stack textarea{resize:vertical;min-height:92px}
.form-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quiet-danger-command{color:var(--red);border-color:#efb8bc;background:#fff6f6}
.candidate-form{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.photo-field{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:start;border:1px dashed var(--stroke);border-radius:var(--radius);padding:12px;background:#fbfcfe}
.photo-field img{max-width:100%}
.photo-frame{display:grid;place-items:center;overflow:hidden;width:96px;height:128px;border:1px solid var(--line);border-radius:var(--radius-small);background:#f1f5f9}
.photo-frame-empty{padding:0 8px;text-align:center;font-size:11px;font-weight:700;color:var(--muted)}
.photo-frame.has-photo .photo-frame-empty{display:none}
.candidate-photo-preview{width:100%;height:100%;object-fit:contain}
.photo-field-body{display:grid;gap:10px;justify-items:start;min-width:0}
.photo-field-body .form-status{margin:0}
.photo-upload{display:grid;gap:6px;width:100%}
.photo-upload span{font-size:12px;font-weight:700;color:#40516a}
.photo-upload input[type=file]{width:100%;padding:10px 12px;border:1px dashed var(--stroke);border-radius:var(--radius-small);background:#fff;cursor:pointer;color:#17243a;font:inherit}
.photo-cleanup{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.photo-cleanup .form-status{margin:0}
.lifecycle-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.lifecycle-actions button{flex:1 1 160px}
.schedule-note{margin:12px 0 0;padding:11px 13px;border-left:4px solid #eccb96;border-radius:0 var(--radius-small) var(--radius-small) 0;background:#fdf4e6;color:#8a5a10;font-size:13px;line-height:1.55}
.schedule-note:empty{display:none}
.form-status{min-height:20px;color:var(--muted);font-size:13px}
.form-status.error{color:var(--red)}
.form-status.ok{color:var(--green)}
.admin-candidate-list{display:grid;gap:10px}
.admin-candidate-row{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:var(--radius-small);padding:12px 14px;background:#fff}
.candidate-thumb{flex:0 0 auto;display:grid;place-items:center;overflow:hidden;width:96px;height:128px;border:1px solid var(--line);border-radius:12px;background:#f1f5f9}
.candidate-thumb img{width:100%;height:100%;object-fit:contain}
.candidate-thumb span{font-size:20px;font-weight:800;color:var(--navy)}
.candidate-text{min-width:0;flex:1}
.candidate-text span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.baris-nama{display:block}
.candidate-number{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;font-size:18px;font-weight:800}
.admin-candidate-row strong,.admin-candidate-row span{display:block}
.admin-candidate-row span{color:var(--muted);font-size:13px;margin-top:4px}
.candidate-votes{margin-top:6px;color:var(--navy);font-weight:800}
.row-actions{display:flex;gap:8px}
.row-actions button{border:1px solid var(--stroke);border-radius:var(--radius-small);background:#fff;padding:8px 10px;color:var(--navy)}
.student-workspace{margin:auto}
.student-intro{background:linear-gradient(135deg,#073a68,#0a5691);color:#fff;border-radius:14px;padding:26px 30px;box-shadow:0 14px 34px rgba(7,58,104,.2)}
.student-intro .eyebrow,.student-intro p{color:#b9d8f4}
.student-identity{min-width:220px;padding-left:24px;border-left:1px solid #4c7297;display:grid}
.student-identity small{font-size:11px;color:#b9d8f4}
.student-identity strong{margin-top:6px}
.student-identity span{margin-top:4px;color:#fff}
.vote-steps{display:grid;grid-template-columns:repeat(3,1fr);list-style:none;padding:0;margin:18px 0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.vote-steps li{display:flex;align-items:center;gap:10px;padding:15px;border-right:1px solid var(--line);color:var(--muted)}
.vote-steps li:last-child{border:0}
.vote-steps b{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#e7edf4}
.vote-steps .active{color:var(--navy);font-weight:700}
.vote-steps .active b{background:var(--blue);color:#fff}
.ballot-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:28px 0 14px}
.ballot-heading h2{margin:0 0 4px}
.ballot-heading p{margin:0;color:var(--muted)}
.ballot-heading>span{font-size:12px;font-weight:800;color:var(--green);background:#e5f5ed;border-radius:999px;padding:8px 12px;white-space:nowrap}
.candidate-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));align-items:start;gap:18px}
.candidate-card{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:14px;outline:1px solid var(--line);overflow:hidden;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,outline-color .18s ease}
.candidate-card:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
@media(hover:hover){.candidate-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(7,58,104,.14)}}
.candidate-card.selected{outline:2px solid var(--blue);box-shadow:0 18px 40px rgba(8,104,189,.22)}
.candidate-card.selected .candidate-photo::after{opacity:1}
.candidate-photo{position:relative;aspect-ratio:3/4;background:linear-gradient(150deg,#dbe9f4,#e6eef7);display:grid;place-items:center;overflow:hidden}
.candidate-photo-mask{position:absolute;inset:0;background-position:center;background-size:cover;filter:blur(16px);transform:scale(1.15);opacity:.55}
.candidate-photo img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;transition:transform .35s ease}
.candidate-card.selected .candidate-photo img{transform:scale(1.03)}
.candidate-photo>span{font-size:54px;font-weight:800;letter-spacing:1px;color:var(--navy)}
.candidate-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,58,104,0) 45%,rgba(7,58,104,.45));opacity:0;transition:opacity .2s ease;pointer-events:none}
.candidate-badge{position:absolute;top:12px;left:12px;z-index:2;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.93);color:var(--navy);font-size:12px;font-weight:800;letter-spacing:.4px;box-shadow:0 4px 14px rgba(7,25,45,.16)}
.candidate-check{position:absolute;top:12px;right:12px;z-index:2;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;font-size:17px;font-weight:800;box-shadow:0 6px 18px rgba(8,104,189,.4);opacity:0;transform:scale(.5);transition:opacity .18s ease,transform .18s ease}
.candidate-card.selected .candidate-check{opacity:1;transform:scale(1)}
.candidate-card-body{padding:18px;display:flex;flex:1;flex-direction:column;gap:12px}
.candidate-card h3{font-size:20px;margin:0;line-height:1.3}
.candidate-card h3 small{display:block;color:var(--muted);font-size:12px;font-weight:800;margin-top:6px;letter-spacing:.5px;text-transform:uppercase}
.candidate-card blockquote{margin:0;padding-left:12px;border-left:3px solid #cfe0f2;color:var(--blue);font-weight:700;line-height:1.5}
.heading-side{display:grid;gap:8px;justify-items:end}
.pwa-link{font-size:12px;font-weight:800;color:var(--blue);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:7px 13px;background:#fff}
.pwa-link:hover{border-color:var(--blue)}
.candidate-details-wrap{display:grid;gap:10px;margin-top:auto;border-top:1px dashed var(--line);padding-top:12px}
.candidate-details{display:grid;gap:10px;font-size:13px;color:#3d4c61;line-height:1.6}
.candidate-details strong{display:block;color:#17243a}
.candidate-detail-value{white-space:pre-line}
.candidate-pick{display:grid;place-items:center;border:1px solid var(--blue);border-radius:10px;background:#fff;color:var(--blue);padding:12px;font-weight:800;transition:.18s}
.candidate-card.selected .candidate-pick{background:var(--blue);border-color:var(--blue);color:#fff}
.candidate-result{margin-top:auto;border-radius:var(--radius-small);background:#eef2f6;padding:12px;color:var(--muted);font-size:13px;font-weight:700;text-align:center}
.candidate-result strong{display:block;margin-top:4px;color:var(--navy);font-size:24px}
.candidate-result.leader{background:#e5f5ed;color:var(--green)}
.candidate-result.leader strong{color:var(--green)}
.ballot-submit{position:sticky;bottom:12px;z-index:5;margin-top:20px;padding:12px 14px;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 34px rgba(18,35,54,.14);display:flex;justify-content:space-between;align-items:center;gap:16px}
.ballot-submit span{color:var(--muted)}
.ballot-submit.result-mode{justify-content:center}
.ballot-selection{display:flex;align-items:center;gap:12px;min-width:0}
.ballot-avatar{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;overflow:hidden;background:#eaf2fb;color:var(--navy);font-size:14px;font-weight:800}
.ballot-avatar img{width:100%;height:100%;object-fit:cover}
.ballot-selection>div{min-width:0}
.ballot-selection small{display:block;font-size:10px;font-weight:800;letter-spacing:.6px;color:var(--muted)}
.ballot-selection strong{display:block;color:var(--navy);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eosis-dialog{border:0;padding:0;width:min(620px,calc(100% - 28px));border-radius:var(--radius);max-height:90vh;box-shadow:0 24px 80px rgba(7,25,45,.28)}
.eosis-dialog::backdrop{background:rgba(4,22,40,.6)}
.dialog-body{padding:24px;overflow:auto}
.dialog-heading{display:flex;justify-content:space-between;align-items:flex-start}
.dialog-heading h2{margin:4px 0}
.dialog-heading button{border:0;border-radius:var(--radius-small);background:#eef2f6;width:36px;height:36px;font-size:24px}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.vote-confirmation{border-left:4px solid var(--blue);border-radius:0 var(--radius-small) var(--radius-small) 0;background:#eef6ff;padding:18px}
.vote-confirmation strong,.vote-confirmation span{display:block}
.vote-confirmation span{margin-top:5px;color:var(--muted)}
.vote-confirm-card{display:flex;align-items:center;gap:14px}
.vote-confirm-photo{flex:0 0 auto;display:grid;place-items:center;width:96px;height:128px;overflow:hidden;border-radius:10px;background:#e4eef8;color:var(--navy);font-size:22px;font-weight:800}
.vote-confirm-photo img{width:100%;height:100%;object-fit:contain}
.vote-confirm-card strong{display:block}
.vote-confirm-card span{display:block;margin-top:5px;color:var(--muted)}
@media(prefers-reduced-motion:reduce){.candidate-card,.candidate-photo img,.candidate-check,.candidate-pick{transition:none}.candidate-card:hover{transform:none}}
.empty-state{padding:34px;text-align:center;color:var(--muted);border:1px dashed var(--stroke);border-radius:var(--radius-small)}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:850px){
  .header-school{display:none}
  .eosis-main{width:min(100% - 20px,700px);margin-top:18px}
  .workspace-heading,.student-intro{display:grid}
  .metric-strip{grid-template-columns:1fr 1fr}
  .metric-strip div:nth-child(2){border-right:0}
  .metric-strip div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .admin-columns{grid-template-columns:1fr}
  .candidate-grid{grid-template-columns:1fr;gap:14px}
  .student-identity{border-left:0;border-top:1px solid #4c7297;padding:16px 0 0}
  .vote-steps span{font-size:12px}
  .ballot-heading{align-items:flex-start}
  .ballot-submit{bottom:8px}
  .form-pair{grid-template-columns:1fr}
}
@media(max-width:480px){
  .eosis-header{height:66px;padding:0 12px}
  .eosis-brand img{width:38px;height:44px}
  .eosis-brand strong{font-size:19px}
  .quiet-command{padding:8px 10px}
  .workspace-heading h1,.student-intro h1{font-size:26px}
  .surface{padding:17px}
  .metric-strip div{padding:15px}
  .metric-strip strong{font-size:22px}
  .vote-steps li{padding:10px 7px;gap:6px}
  .vote-steps b{width:24px;height:24px}
  .ballot-submit{align-items:stretch;flex-direction:column}
  .ballot-submit button{width:100%}
}

.panel-tautan{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.command-link{padding:9px 13px;border:1px solid var(--line);border-radius:10px;background:#f6f9fc;color:var(--navy);font-size:13px;font-weight:800;text-decoration:none}
  .ballot-submit button{width:100%}
}