@font-face{font-family:"Poppins";font-weight:400;font-style:normal;font-display:swap;src:url("/assets/fonts/poppins-400.woff") format("woff")}
@font-face{font-family:"Poppins";font-weight:500;font-style:normal;font-display:swap;src:url("/assets/fonts/poppins-500.woff") format("woff")}
@font-face{font-family:"Poppins";font-weight:700;font-style:normal;font-display:swap;src:url("/assets/fonts/poppins-700.woff") format("woff")}

.ab{--red:#c1121f;--red-deep:#8f0d18;
  --ink:#2a0a0e;--ink2:rgba(42,10,14,.84);--ink3:rgba(42,10,14,.70);
  --line:rgba(193,18,31,.22);--line-soft:rgba(120,10,20,.12);
  --c-red:#c1121f;--c-amber:#e8871e;--c-mauve:#8d7b86;--c-maroon:#4a0e17;
  position:relative;isolation:isolate;overflow:hidden;border-radius:28px;
  padding:clamp(14px,2.6vw,30px);color:var(--ink);line-height:1.45;
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:linear-gradient(150deg,#ffffff 0%,#fff3f3 46%,#fbdcdc 100%)}
.ab *{box-sizing:border-box}
.ab::before,.ab::after,.ab-orb{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.ab::before{width:42rem;height:42rem;top:-16rem;right:-12rem;background:radial-gradient(circle at 40% 40%,rgba(193,18,31,.62),rgba(193,18,31,0) 66%)}
.ab::after{width:36rem;height:36rem;bottom:-14rem;left:-10rem;background:radial-gradient(circle at 55% 45%,rgba(232,72,85,.42),rgba(232,72,85,0) 66%)}
.ab-orb{width:20rem;height:20rem;top:34%;left:38%;background:radial-gradient(circle at 50% 50%,rgba(255,130,130,.42),rgba(255,130,130,0) 68%)}

.ab-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:14px 24px;margin-bottom:clamp(14px,2vw,20px)}
.ab-brand{display:flex;align-items:center;gap:clamp(12px,2vw,20px);min-width:0}
.ab-logo{flex:none;height:clamp(60px,8vw,88px);width:auto;filter:drop-shadow(0 4px 10px rgba(120,10,20,.28))}
.ab-school{margin:0 0 .3rem;font-size:.82rem;letter-spacing:.04em;font-weight:500;color:var(--red)}
.ab-title{margin:0;font-family:"Poppins",system-ui,sans-serif;font-weight:400;font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.1;text-wrap:balance}
.ab-take{margin:.6rem 0 0;font-size:1rem;color:var(--ink2);max-width:42rem;min-height:1.45em}
.ab-take span{font-variant-numeric:tabular-nums;font-weight:600;color:var(--red)}
.ab-status{display:inline-flex;align-items:center;gap:.55rem;padding:.4rem .95rem;border-radius:999px;font-size:.8rem;
  background:rgba(255,255,255,.62);border:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.ab-dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--c-amber)}

.ab-units{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:clamp(14px,2vw,20px)}
.ab-unit{appearance:none;border:1px solid var(--line);background:rgba(255,255,255,.6);color:var(--ink);padding:.45rem 1.05rem;border-radius:999px;font:inherit;font-size:.88rem;cursor:pointer;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ab-unit:hover{background:rgba(255,255,255,.92)}
.ab-unit.is-empty{border-style:dashed;color:var(--ink3)}
.ab-unit.is-on{background:var(--red);color:#fff;border-color:var(--red);border-style:solid;font-weight:600}
.ab-unit:focus-visible,.ab-chip:focus-visible,.ab-search:focus-visible{outline:2px solid var(--red-deep);outline-offset:2px}

.ab-grid{display:grid;gap:clamp(12px,1.8vw,20px);grid-template-columns:repeat(12,minmax(0,1fr))}
.ab-c-rate{grid-column:span 5}.ab-c-tiles{grid-column:span 7}
.ab-c-bars{grid-column:span 7}.ab-c-tugas{grid-column:span 5}
.ab-c-table{grid-column:span 12}
@media (max-width:860px){.ab-c-rate,.ab-c-tiles,.ab-c-bars,.ab-c-tugas{grid-column:span 12}}

.ab-card{min-width:0;border-radius:22px;padding:clamp(14px,2vw,22px);border:1px solid rgba(255,255,255,.9);
  background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(255,255,255,.44));
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 10px 30px rgba(120,10,20,.16),inset 0 1px 0 rgba(255,255,255,.9)}
.ab-ch{margin:0;font-size:1.05rem;font-weight:500}
.ab-note{margin:.2rem 0 0;font-size:.82rem;color:var(--ink3)}

.ab-ring{width:min(100%,190px);aspect-ratio:1;margin:1.1rem auto .8rem;border-radius:50%;border:16px solid rgba(193,18,31,.14);
  display:grid;place-content:center;text-align:center;background:rgba(255,255,255,.35)}
.ab-ring b{font-family:"Poppins",system-ui,sans-serif;font-weight:400;font-size:2.4rem;line-height:1;color:var(--ink3)}
.ab-ring small{margin-top:.3rem;font-size:.78rem;color:var(--ink3)}
.ab-wait{margin:0;font-size:.88rem;color:var(--ink2);text-align:center}

.ab-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:clamp(12px,1.8vw,20px)}
.ab-tile{display:flex;flex-direction:column;justify-content:space-between;gap:.6rem}
.ab-tile-l{display:flex;align-items:center;gap:.55rem;font-size:.9rem;color:var(--ink2)}
.ab-d{flex:none;width:.6rem;height:.6rem;border-radius:50%;background:var(--c)}
.ab .k1{--c:var(--c-red)}.ab .k2{--c:var(--c-maroon)}.ab .k3{--c:var(--c-mauve)}.ab .k4{--c:var(--c-amber)}
.ab-big{font-family:"Poppins",system-ui,sans-serif;font-weight:400;font-size:clamp(2.2rem,4.4vw,3.2rem);line-height:1;font-variant-numeric:tabular-nums}
.ab-tile-n{font-size:.8rem;color:var(--ink3)}

.ab-lg{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-top:.7rem;font-size:.8rem;color:var(--ink2)}
.ab-lg span{display:inline-flex;align-items:center;gap:.45rem}
.ab-lg i{width:.6rem;height:.6rem;border-radius:3px;display:inline-block}
.ab-bars{min-height:14rem;margin-top:.6rem}
.ab-bars svg{display:block;width:100%;height:auto}
.ab svg text{fill:var(--ink3);font-size:11px;font-family:inherit}
.ab-empty{display:grid;place-content:center;min-height:inherit;height:100%;padding:1.5rem 1rem;text-align:center;font-size:.88rem;color:var(--ink3)}

.ab-tugas{min-height:12rem;margin-top:.6rem}
.ab-tl{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.ab-ti{display:flex;flex-direction:column;gap:.1rem;padding:.55rem .75rem;border-radius:14px;background:rgba(255,255,255,.58);border:1px solid var(--line-soft)}
.ab-ti .nm{font-size:.9rem;font-weight:500}
.ab-ti .tg{font-size:.8rem;color:var(--ink3)}

.ab-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .8rem;margin:.8rem 0}
.ab-search{flex:1 1 14rem;min-width:0;max-width:22rem;padding:.5rem .9rem;border-radius:999px;font:inherit;font-size:.88rem;color:var(--ink);
  background:rgba(255,255,255,.68);border:1px solid var(--line)}
.ab-search::placeholder{color:rgba(42,10,14,.6)}
.ab-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.ab-chip{appearance:none;border:1px solid var(--line);background:rgba(255,255,255,.6);color:var(--ink);padding:.35rem .85rem;border-radius:999px;font:inherit;font-size:.8rem;cursor:pointer}
.ab-chip:hover{background:rgba(255,255,255,.9)}
.ab-chip.is-on{background:var(--red);color:#fff;border-color:var(--red);font-weight:600}
.ab-tablewrap{max-height:26rem;overflow:auto;border-radius:14px;border:1px solid var(--line-soft);background:rgba(255,255,255,.4)}
.ab-table{width:100%;min-width:620px;border-collapse:collapse;font-size:.88rem}
.ab-table th{position:sticky;top:0;z-index:1;text-align:left;padding:.65rem .85rem;font-weight:500;color:var(--ink3);background:rgba(255,246,246,.97);white-space:nowrap}
.ab-table td{padding:.6rem .85rem;border-top:1px solid var(--line-soft);vertical-align:top}
.ab-table tbody tr:hover{background:rgba(193,18,31,.06)}
.ab-table td:nth-child(1){font-weight:500}
.ab-table td:nth-child(6){font-variant-numeric:tabular-nums}
.ab-table td:nth-child(7){color:var(--ink3)}
@media (max-width:760px){.ab-table th:nth-child(3),.ab-table td:nth-child(3),.ab-table th:nth-child(4),.ab-table td:nth-child(4){display:none}.ab-table{min-width:0}}
.ab-tstate{min-height:0;padding:.2rem 0;font-size:.85rem;color:var(--ink3)}
.ab-tstate.dash-skeleton{min-height:6rem}
.ab-foot{margin:clamp(14px,2vw,22px) 0 0;font-size:.8rem;color:var(--ink3);max-width:60rem}

.ab-tip{display:none;position:absolute;z-index:5;pointer-events:none;max-width:15rem;padding:.4rem .7rem;border-radius:10px;font-size:.78rem;color:#fff;
  background:rgba(42,10,14,.95);border:1px solid rgba(255,255,255,.3);box-shadow:0 8px 24px rgba(60,0,10,.35)}
.ab-tip-t{font-weight:600;margin-bottom:.15rem}
.ab-tip-r{display:flex;align-items:center;gap:.45rem}
.ab-sw{width:.55rem;height:.55rem;border-radius:50%;display:inline-block;border:1px solid rgba(255,255,255,.6)}
.ab-fail{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:inherit;height:100%;font-size:.8rem;color:var(--ink3)}
.ab-fail-dot{width:.375rem;height:.375rem;border-radius:50%;background:var(--red)}
.ab [data-dash-source-state=empty]{color:transparent}
.ab [data-dash-source-state=refreshing]{opacity:.5;transition:opacity .3s}
@media (prefers-reduced-motion:no-preference){.ab-dot{animation:ab-pulse 2.4s ease-out infinite}}
@keyframes ab-pulse{0%{box-shadow:0 0 0 0 rgba(232,135,30,.55)}70%{box-shadow:0 0 0 8px rgba(232,135,30,0)}100%{box-shadow:0 0 0 0 rgba(232,135,30,0)}}

html,body{margin:0;background:#fff3f3}
body{min-height:100vh}
.ab.page{border-radius:0;min-height:100vh}
.ab-title{font-weight:700}
.ab-big{font-weight:600}
.ab-ring b{font-weight:600}
.ab a{color:var(--red-deep)}
.ab-top{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.ab-status.ok .ab-dot{background:#1f9d55;animation:none}
.ab-status.off .ab-dot{background:var(--c-amber)}
.ab-btn{appearance:none;display:inline-block;border:1px solid var(--line);background:rgba(255,255,255,.7);color:var(--ink);padding:.45rem 1.05rem;border-radius:999px;font:inherit;font-size:.85rem;cursor:pointer;text-decoration:none}
.ab-btn:hover{background:#fff}
.ab-btn.pri{background:var(--red);border-color:var(--red);color:#fff;font-weight:600}
.ab-btn.pri:hover{background:var(--red-deep)}
.ab-btn.sm{padding:.3rem .8rem;font-size:.78rem}
.ab-date{padding:.42rem .8rem;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.7);font:inherit;font-size:.85rem;color:var(--ink)}
.ab-ring{position:relative;border:0;background:none;padding:0}
.ab-ring svg{width:100%;height:100%;display:block}
.ab-ring .mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ab-ring .mid b{color:var(--ink)}
.ab-pill{display:inline-block;padding:.12rem .6rem;border-radius:999px;font-size:.75rem;font-weight:500;white-space:nowrap}
.ab-pill.hadir{background:rgba(31,157,85,.14);color:#136b39}
.ab-pill.terlambat{background:rgba(232,135,30,.18);color:#8a4a05}
.ab-pill.belum,.ab-pill.absen{background:rgba(193,18,31,.12);color:var(--red-deep)}
.ab-pill.tanpa_mesin,.ab-pill.nodata{background:rgba(120,100,110,.14);color:#5b4a52}
.ab-table td:nth-child(n+4){font-variant-numeric:tabular-nums}
.ab-narrow{max-width:26rem;margin:0 auto}
.ab-form{display:grid;gap:.8rem}
.ab-form label{display:grid;gap:.25rem;font-size:.85rem;color:var(--ink2)}
.ab-form input[type=text],.ab-form input[type=password],.ab-form input[type=time],.ab-form select,.ab-input{padding:.55rem .9rem;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.85);font:inherit;font-size:.9rem;color:var(--ink);width:100%}
.ab-form input:focus-visible,.ab-form select:focus-visible,.ab-date:focus-visible,.ab-btn:focus-visible{outline:2px solid var(--red-deep);outline-offset:2px}
.ab-err{padding:.6rem .9rem;border-radius:12px;background:rgba(193,18,31,.12);border:1px solid var(--line);color:var(--red-deep);font-size:.85rem}
.ab-ok{padding:.6rem .9rem;border-radius:12px;background:rgba(31,157,85,.12);border:1px solid rgba(31,157,85,.3);color:#136b39;font-size:.85rem}
.ab-center{display:grid;place-items:center;min-height:100vh}
.ab-stack{display:grid;gap:clamp(12px,1.8vw,20px)}
.ab-mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.82rem;word-break:break-all;background:rgba(255,255,255,.7);padding:.5rem .7rem;border-radius:10px;border:1px solid var(--line-soft)}
.ab-two{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.ab-table input.uid{width:7rem;padding:.3rem .6rem;border-radius:10px;border:1px solid var(--line);background:#fff;font:inherit;font-size:.85rem}
.ab-hint{font-size:.78rem;color:var(--ink3)}
.ab-list2{display:grid;gap:.35rem;margin:0;padding:0;list-style:none}
.ab-list2 li{display:flex;justify-content:space-between;gap:.8rem;padding:.45rem .75rem;border-radius:12px;background:rgba(255,255,255,.58);border:1px solid var(--line-soft);font-size:.88rem}
.ab-list2 small{color:var(--ink3)}

.ab .k5{--c:#1f9d55}
@media (max-width:760px){
 .ab-table th:nth-child(3),.ab-table td:nth-child(3),.ab-table th:nth-child(5),.ab-table td:nth-child(5),.ab-table th:nth-child(7),.ab-table td:nth-child(7){display:none}
 .ab-table th:nth-child(4),.ab-table td:nth-child(4){display:table-cell}
 #ab-table{min-width:0}
}