:root{
  --ink:#12233F;--ink-2:#3B4B66;--muted:#66758C;--bg:#EEF1F6;--paper:#fff;--line:#D8DEE8;--line-2:#E8ECF3;
  --accent:#0F766E;--accent-d:#0B5C56;--accent-t:#E3F3F1;
  --warn:#8A4A05;--warn-t:#FDF0DC;--bad:#B42318;--bad-t:#FCE8E5;
  --r:10px;--font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:15px;line-height:1.55;color:var(--ink);background:var(--bg)}
h1,h2,h3{line-height:1.2;letter-spacing:-.015em;margin:0}
a{color:var(--accent-d)}
img{max-width:100%}
code{background:var(--line-2);padding:1px 6px;border-radius:5px;font-size:.9em}
:focus-visible{outline:3px solid #7CC4BD;outline-offset:2px}
.ic{width:18px;height:18px;flex:none}
[hidden]{display:none!important}

/* tombol */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 14px/1 var(--font);padding:11px 18px;border-radius:8px;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-d)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)}.btn-ghost:hover{border-color:var(--ink-2)}
.btn-danger{background:#fff;border-color:#E9B4AE;color:var(--bad)}.btn-danger:hover{background:var(--bad-t)}
.btn-sm{padding:7px 12px;font-size:13px}
.btn-lg{padding:15px 26px;font-size:16px;width:100%}
.btn[disabled]{opacity:.7;cursor:progress}
.spinner{display:none;width:16px;height:16px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.is-loading .spinner{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* input */
.field{margin-bottom:18px}
.field label,fieldset legend{display:block;font-weight:600;font-size:14px;margin-bottom:6px;padding:0}
fieldset{border:0;padding:0;margin:0 0 18px}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=search],input[type=date],input[type=datetime-local],input[type=url],select,textarea{
  width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;transition:border-color .15s,box-shadow .15s}
textarea{resize:vertical;min-height:84px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #CFE8E5}
.field.invalid input,.field.invalid textarea,.field.invalid select{border-color:var(--bad)}
.err{color:var(--bad);font-size:13px;margin:5px 0 0;min-height:0}.err:empty{display:none}
.req{color:var(--bad)}.opt{color:var(--muted);font-weight:400}
.hint{color:var(--muted);font-size:13px;margin:5px 0 0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.stack{display:flex;flex-direction:column}

/* halaman peserta */
.public{background:var(--bg)}
.sheet{max-width:720px;margin:0 auto;background:var(--paper);border-radius:0 0 14px 14px;overflow:hidden;box-shadow:0 1px 0 var(--line)}
@media(min-width:760px){.sheet{margin-top:32px;border-radius:14px;border:1px solid var(--line)}}
.sheet-head{background:var(--ink);color:#fff;padding:26px 26px 20px}
.brand-row{display:flex;align-items:center;gap:12px;margin-bottom:22px;min-height:40px}
.logo-chip{background:#fff;border-radius:8px;padding:5px 9px;display:inline-flex}
.logo-chip img{height:30px;width:auto;display:block}
.brand-name{font-weight:600;font-size:14px;color:#C8D3E6}
.head-grid{display:flex;gap:18px;align-items:flex-start}
.stub{flex:none;width:68px;background:#fff;color:var(--ink);border-radius:10px;text-align:center;padding:8px 4px 7px;line-height:1.1;border-bottom:4px solid var(--accent)}
.stub-day{display:block;font-size:28px;font-weight:800}
.stub-mon{display:block;font-size:13px;font-weight:700;color:var(--accent-d)}
.stub-year{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.sheet-head h1{font-size:clamp(1.4rem,4.4vw,2rem);font-weight:800}
.desc{margin:10px 0 0;color:#D6DFEE;font-size:14.5px;max-width:60ch}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 22px;margin:22px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.2)}
.meta dt{font-size:12.5px;color:#A9B8D0}.meta dd{margin:2px 0 0;font-weight:600;font-size:14px}
.sheet-body{padding:26px}
.req-note{margin:0 0 18px;font-size:13px;color:var(--muted)}
.grid{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
.grid .field{grid-column:1/-1}.grid .field.half{grid-column:span 1}
@media(max-width:620px){.grid .field.half{grid-column:1/-1}.sheet-head,.sheet-body{padding-left:18px;padding-right:18px}.head-grid{flex-direction:column;gap:14px}}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tile{position:relative;cursor:pointer;margin:0!important}
.tile input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.tile span{display:flex;align-items:center;justify-content:center;min-height:52px;padding:8px;border:1.5px solid var(--line);border-radius:var(--r);font-weight:600;text-align:center;background:#fff;transition:border-color .15s,background .15s}
.tile:hover span{border-color:var(--ink-2)}
.tile input:focus-visible+span{outline:3px solid #7CC4BD;outline-offset:2px}
.t-hadir input:checked+span{border-color:var(--accent);background:var(--accent-t);color:var(--accent-d)}
.t-izin input:checked+span{border-color:#C9822A;background:var(--warn-t);color:var(--warn)}
.t-tidak_hadir input:checked+span{border-color:var(--bad);background:var(--bad-t);color:var(--bad)}
@media(max-width:420px){.tiles{grid-template-columns:1fr}}
.form-actions{margin-top:26px}
.success{text-align:center;padding:44px 26px}
.success:focus{outline:none}
.ok-mark{width:64px;height:64px;color:var(--accent);margin-bottom:12px}
.success h2{font-size:1.5rem;font-weight:800}
.success p{color:var(--ink-2);margin:10px auto 0;max-width:46ch}
.sum{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;text-align:left;max-width:420px;margin:24px auto 0;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);font-size:14px}
.sum dt{color:var(--muted)}.sum dd{margin:0;font-weight:600}
.closed{text-align:center;padding:44px 26px}.closed p{color:var(--ink-2);max-width:48ch;margin:10px auto 0}
.pub-foot{text-align:center;color:var(--muted);font-size:13px;padding:22px 16px 40px}
.toasts{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:50;width:min(92vw,420px)}
.toast{background:var(--ink);color:#fff;padding:12px 16px;border-radius:10px;font-size:14px;box-shadow:0 8px 24px rgba(18,35,63,.25)}
.toast.bad{background:var(--bad)}.toast.ok{background:var(--accent-d)}
.notice-page{min-height:100vh;display:grid;place-items:center;padding:24px}
.notice-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:32px;max-width:460px;width:100%}
.notice-card.wide{max-width:560px}
.notice-card h1{font-size:1.4rem;margin-bottom:10px}.notice-card p{color:var(--ink-2)}
.notice-logo{height:44px;margin-bottom:14px}
.checks{list-style:none;padding:0;margin:14px 0}
.checks li{padding:6px 0 6px 26px;position:relative;font-size:14px}
.checks li::before{content:"";position:absolute;left:0;top:11px;width:12px;height:12px;border-radius:50%}
.checks .ok::before{background:var(--accent)}.checks .bad::before{background:var(--bad)}.checks .warn::before{background:#C9822A}

/* alert & badge */
.alert{padding:12px 16px;border-radius:var(--r);margin-bottom:16px;font-size:14px;border:1px solid}
.a-ok{background:var(--accent-t);border-color:#B5DDD8;color:var(--accent-d)}
.a-bad{background:var(--bad-t);border-color:#F1BDB7;color:var(--bad)}
.a-warn{background:var(--warn-t);border-color:#EBCB9C;color:var(--warn)}
.badge{display:inline-block;padding:2px 10px;border-radius:99px;font-size:12.5px;font-weight:700;background:var(--line-2);color:var(--ink-2);white-space:nowrap}
.b-hadir,.b-sent,.b-open{background:var(--accent-t);color:var(--accent-d)}
.b-izin,.b-pending,.b-not_yet{background:var(--warn-t);color:var(--warn)}
.b-tidak_hadir,.b-failed{background:var(--bad-t);color:var(--bad)}

/* admin */
.shell{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.side{background:var(--ink);color:#C8D3E6;display:flex;flex-direction:column;padding:18px 12px;position:sticky;top:0;height:100vh}
.side-brand{display:flex;align-items:center;gap:10px;padding:4px 10px 20px;color:#fff}
.side-brand img{height:32px;width:auto;background:#fff;border-radius:6px;padding:3px}
.mark{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--accent);font-weight:800}
.side-brand strong{font-size:14px;line-height:1.2}
.side nav{display:flex;flex-direction:column;gap:2px}
.side nav a,.side-foot a{display:flex;align-items:center;gap:10px;color:#C8D3E6;text-decoration:none;padding:9px 12px;border-radius:8px;font-weight:500;font-size:14px}
.side nav a:hover,.side-foot a:hover{background:rgba(255,255,255,.08)}
.side nav a.on{background:rgba(255,255,255,.14);color:#fff;font-weight:600}
.side-foot{margin-top:auto;border-top:1px solid rgba(255,255,255,.12);padding-top:12px;font-size:13px}
.side-foot span{display:block;padding:0 12px 6px;color:#A9B8D0}
.main{min-width:0}
.topbar{display:none}
.content{padding:28px 32px 56px;max-width:1180px}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.page-head h1{font-size:1.5rem;font-weight:800}
.page-head .actions{display:flex;gap:8px;flex-wrap:wrap}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:20px}
.card h2{font-size:1.05rem;margin-bottom:14px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.stat b{display:block;font-size:1.9rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.stat span{color:var(--muted);font-size:13.5px}
.stat.s-hadir{border-left:4px solid var(--accent)}.stat.s-izin{border-left:4px solid #C9822A}.stat.s-tidak_hadir{border-left:4px solid var(--bad)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.two .card{margin-bottom:0}
.prop{display:flex;height:14px;border-radius:99px;overflow:hidden;background:var(--line-2)}
.prop i{display:block;height:100%}
.i-hadir{background:var(--accent)}.i-izin{background:#C9822A}.i-tidak_hadir{background:var(--bad)}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:13.5px;color:var(--ink-2)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
.trend{width:100%;height:auto;display:block}
.trend text{font:11px var(--font);fill:var(--muted)}
.trend rect{fill:var(--accent)}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
.card .tablewrap{border:0;border-radius:0}
table.t{width:100%;border-collapse:collapse;font-size:14px}
.t th{text-align:left;font-weight:600;color:var(--muted);font-size:13px;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap;background:#F8FAFC}
.t td{padding:11px 14px;border-bottom:1px solid var(--line-2);vertical-align:top}
.t tr:last-child td{border-bottom:0}
.t td.num{text-align:right;font-variant-numeric:tabular-nums}
.t .row-actions{display:flex;gap:6px;flex-wrap:wrap}
.t .sub{color:var(--muted);font-size:13px}
.empty{padding:36px 20px;text-align:center;color:var(--muted)}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}
.filters .field{margin:0;min-width:150px;flex:1}
.filters label{font-size:12.5px;color:var(--muted);font-weight:600}
.filters input,.filters select{font-size:14px;padding:9px 11px}
.pager{display:flex;gap:6px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.pager a{padding:7px 12px;border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--ink);background:#fff;font-size:13.5px}
.pager a.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.form-grid .full{grid-column:1/-1}
.check{display:flex;align-items:center;gap:8px;font-weight:500!important}
.check input{width:18px;height:18px;accent-color:var(--accent)}
.cfg td{vertical-align:middle}.cfg input[type=text]{padding:7px 10px;font-size:14px}
.share{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:start}
.qr{display:grid;place-items:center;padding:14px;background:#fff;border:1px solid var(--line);border-radius:12px;width:fit-content}
.qr img,.qr canvas{display:block}
.linkbox{display:flex;gap:8px}.linkbox input{font-size:14px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px;flex-wrap:wrap}
.kv{display:grid;grid-template-columns:150px 1fr;gap:8px 16px;font-size:14px}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:600;word-break:break-word}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px;width:100%;max-width:400px}
.login-card h1{font-size:1.35rem;margin:6px 0 4px}.login-card p{color:var(--muted);margin:0 0 20px}
.login-card .btn{width:100%}
@media(max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:260px;z-index:40;transform:translateX(-100%);transition:transform .2s;height:100%}
  .side.open{transform:none;box-shadow:0 0 0 100vmax rgba(18,35,63,.45)}
  .topbar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
  .content{padding:20px 14px 48px}
  .two,.share,.form-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation-duration:.01ms!important}}

/* cetak */
.print-only{display:none}
@media print{
  body{background:#fff}.side,.topbar,.no-print,.pager,.toasts{display:none!important}
  .shell{display:block}.content{padding:0;max-width:none}
  .print-only{display:block}
  .card,.tablewrap{border:0}
  .t th{background:#fff;border-bottom:2px solid #000}.t td{border-bottom:1px solid #999;font-size:11px;padding:6px 8px}
  .poster{text-align:center;padding-top:30px}
}

/* pilihan ganda/tunggal di formulir peserta */
select{appearance:auto}
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.choice{display:flex;align-items:center;gap:10px;margin:0!important;padding:10px 12px;border:1.5px solid var(--line);border-radius:var(--r);cursor:pointer;font-weight:500!important;background:#fff}
.choice:hover{border-color:var(--ink-2)}
.choice input{width:18px;height:18px;accent-color:var(--accent);flex:none;margin:0}
.choice:has(input:checked){border-color:var(--accent);background:var(--accent-t)}
.field.invalid .choice{border-color:#E9B4AE}

/* pembuat kolom (admin) */
.bl-list{display:flex;flex-direction:column;gap:10px}
.bl-row{border:1px solid var(--line);border-radius:var(--r);padding:12px;background:#FAFBFD}
.bl-top{display:grid;grid-template-columns:minmax(160px,1fr) 190px auto auto;gap:10px;align-items:center}
.bl-top .bl-label,.bl-top select{padding:8px 10px;font-size:14px}
.bl-type{font-size:13.5px;color:var(--muted)}
.bl-req{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;white-space:nowrap;margin:0}
.bl-req input{width:17px;height:17px;accent-color:var(--accent)}
.bl-tools{display:flex;gap:6px}
.bl-more{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:10px}
.bl-more label{font-size:12.5px;color:var(--muted);font-weight:600;display:block}
.bl-more textarea,.bl-more input{margin-top:4px;font-size:14px;padding:8px 10px}
.bl-more [hidden]{display:none}
.bl-add{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;align-items:center}
.bl-add select{width:auto;font-size:14px;padding:8px 10px}
@media(max-width:900px){.bl-top{grid-template-columns:1fr 1fr}.bl-more{grid-template-columns:1fr}}