:root{
  --blue:#0071e3;--blue2:#0a84ff;--ink:#111827;--text:#1d1d1f;--muted:#6e6e73;
  --bg:#f5f5f7;--card:rgba(255,255,255,.88);--line:rgba(17,24,39,.09);
  --shadow:0 12px 35px rgba(15,23,42,.07);--shadow2:0 22px 60px rgba(15,23,42,.12);
  --green:#34c759;--red:#ff3b30;--orange:#ff9f0a;--radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body:before{content:"";position:fixed;inset:0;z-index:-2;background:radial-gradient(circle at 15% -10%,rgba(10,132,255,.13),transparent 32%),radial-gradient(circle at 90% 0%,rgba(175,82,222,.10),transparent 30%),linear-gradient(180deg,#fafafa 0%,#f5f5f7 48%,#f2f2f5 100%)}
a{color:var(--blue)}
.topbar{min-height:68px;padding:0 max(22px,4vw);display:flex;align-items:center;justify-content:space-between;gap:20px;position:sticky;top:0;z-index:100;background:rgba(250,250,252,.78);border-bottom:1px solid rgba(0,0,0,.07);box-shadow:0 1px 0 rgba(255,255,255,.8),0 10px 30px rgba(0,0,0,.035);backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px)}
.brand-head{display:flex;align-items:center;gap:12px;min-width:0}.brand-head>div{min-width:0}.topbar strong{display:block;font-size:17px;font-weight:700;letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar span{display:block;margin:2px 0 0;color:var(--muted);font-size:12px}.topbar a{text-decoration:none;font-weight:650;color:var(--blue)}.user{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;white-space:nowrap}.site-logo{object-fit:contain;background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:12px;padding:4px}.mini-logo{width:42px;height:42px}
.container{width:min(1180px,100%);margin:34px auto;padding:0 22px}.hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:255px;margin-bottom:24px;padding:42px 44px;border:1px solid rgba(255,255,255,.92);border-radius:30px;background:linear-gradient(135deg,#fff 0%,#f8fbff 52%,#edf6ff 100%);box-shadow:0 18px 55px rgba(15,23,42,.10);isolation:isolate}.hero:before{content:"";position:absolute;inset:0 0 0 27%;z-index:-2;background-image:url("uploads/bg_sekolah_yapia.png");background-size:cover;background-position:center right;opacity:.82;filter:saturate(.92) contrast(.98);-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 8%,#000 31%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 8%,#000 31%,#000 100%)}.hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(255,255,255,.995) 0%,rgba(255,255,255,.97) 27%,rgba(255,255,255,.70) 48%,rgba(255,255,255,.22) 72%,rgba(255,255,255,.04) 100%);pointer-events:none}.hero>div:first-child{position:relative;z-index:2;max-width:650px}.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:850;letter-spacing:2.2px;color:var(--blue)}.eyebrow:before{content:"";width:24px;height:3px;border-radius:99px;background:var(--blue)}.hero h1{margin:10px 0 9px;font-size:clamp(31px,4.2vw,48px);line-height:1.02;letter-spacing:-2.1px}.hero p{margin:0;color:#5f6368;font-size:15px;line-height:1.55;max-width:560px}.hero-icon{position:relative;z-index:3;flex:0 0 auto;width:86px;height:86px;border-radius:27px;display:grid;place-items:center;font-size:38px;color:var(--blue);background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.96);box-shadow:0 18px 40px rgba(0,113,227,.16),0 2px 8px rgba(15,23,42,.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.card,.nav-card,.stat{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.card{border-radius:var(--radius);padding:27px;margin-bottom:22px}.card:hover{box-shadow:var(--shadow2)}.card-title,.section-head{display:flex;justify-content:space-between;align-items:center;gap:14px}.card-title h2,.section-head h3{margin:0 0 18px;font-size:20px;letter-spacing:-.55px}.section-head{margin-top:22px}.section-head h3{margin-bottom:12px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;background:#eaf4ff;color:var(--blue);font-size:12px;font-weight:750;border:1px solid rgba(0,113,227,.09)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}label{display:block;margin:0 0 7px;font-size:12px;font-weight:700;color:#4b5563;letter-spacing:.1px}input,select{width:100%;margin:0 0 15px;padding:12px 14px;border:1px solid rgba(17,24,39,.13);border-radius:14px;background:rgba(255,255,255,.86);color:var(--text);font:inherit;font-size:14px;outline:none;transition:border-color .2s,box-shadow .2s,transform .2s}input:hover,select:hover{border-color:rgba(0,113,227,.25)}input:focus,select:focus{border-color:rgba(0,113,227,.65);box-shadow:0 0 0 4px rgba(0,113,227,.11)}input[readonly]{background:#f7f7f8;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:13px;padding:11px 16px;background:#eef0f3;color:#1d1d1f;text-decoration:none;font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.08)}.btn:active{transform:translateY(0) scale(.98)}.btn.primary{background:linear-gradient(135deg,#0071e3,#0a84ff);color:#fff;box-shadow:0 8px 20px rgba(0,113,227,.22)}.btn.primary:hover{box-shadow:0 12px 28px rgba(0,113,227,.28)}.btn.full{width:100%;margin-top:8px}.btn.small{padding:8px 11px;border-radius:10px;font-size:12px}.btn.danger{background:#fff0ef;color:#d70015}.form-actions{display:flex;justify-content:flex-end;margin-top:22px}.print-tools{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}.print-btn{background:#0071e3;color:#fff}.pdf-btn{background:#ff3b30;color:#fff}
.stats{margin-top:18px}.stats input{font-size:23px;font-weight:750}.absence-row{display:grid;grid-template-columns:1fr 130px 160px 42px;gap:9px;margin:6px 0}.remove{border:0;background:#fff0ef;color:#d70015;border-radius:12px;font-size:20px;height:43px;cursor:pointer}.note,.public-note{padding:13px 15px;background:#f3f7fb;border-left:4px solid var(--blue);margin-top:12px;border-radius:10px;font-size:13px;color:#4b5563}.success-note{background:#effaf2;color:#1f6b34;border-left-color:var(--green)}.alert{background:#fff0ef;color:#b42318;border-radius:12px;padding:12px 14px;margin:15px 0;border:1px solid rgba(255,59,48,.12)}.alert.ok{background:#effaf2;color:#1f6b34;border-color:rgba(52,199,89,.14)}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.62)}table{width:100%;border-collapse:separate;border-spacing:0;min-width:650px}th,td{text-align:left;padding:13px 14px;border-bottom:1px solid rgba(17,24,39,.07);font-size:13px}th{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#6e6e73;background:#f8f8fa}tbody tr:last-child td{border-bottom:0}tbody tr:hover td{background:rgba(0,113,227,.025)}.green{color:#248a3d}.red{color:#d70015}.muted{color:var(--muted)}.empty,.empty-big{text-align:center;padding:34px!important;color:var(--muted)}
.admin-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}.nav-card{min-height:128px;border-radius:20px;padding:18px;color:var(--text);text-decoration:none;display:flex;flex-direction:column;justify-content:center;gap:8px;transition:transform .2s,box-shadow .2s,border-color .2s}.nav-card:hover{transform:translateY(-3px);box-shadow:var(--shadow2);border-color:rgba(0,113,227,.18)}.nav-card:first-letter{font-size:25px}.nav-card b{font-size:14px;color:var(--text)}.nav-card span{font-size:11px;color:var(--muted)}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}.stat{border-radius:20px;padding:20px;position:relative;overflow:hidden}.stat:after{content:"";position:absolute;right:-30px;bottom:-50px;width:120px;height:120px;border-radius:50%;background:rgba(0,113,227,.06)}.stat small{display:block;color:var(--muted);font-size:12px;font-weight:650}.stat b{display:block;margin-top:7px;font-size:34px;letter-spacing:-1px;color:var(--text)}
.filter{display:grid;grid-template-columns:1fr 1fr auto;gap:10px}.filter input,.filter select{margin:0}.room-filter{grid-template-columns:280px auto;align-items:end;margin-top:12px}.filter-action{padding-bottom:13px}.monitor-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:8px 0 18px}.monitor-box{border-radius:16px;padding:15px 16px;border:1px solid var(--line);background:rgba(255,255,255,.7)}.monitor-box span{display:block;font-size:12px;font-weight:700;color:#4b5563}.monitor-box b{display:block;font-size:21px;margin-top:5px}.monitor-box.ok b{color:#248a3d}.monitor-box.waiting b{color:#d70015}.monitor-box.total b{color:var(--blue)}.status-pill{display:inline-flex;align-items:center;border-radius:999px;padding:7px 10px;font-size:10px;font-weight:850;white-space:nowrap}.status-done{background:#eaf8ee;color:#248a3d}.status-waiting{background:#fff0ef;color:#d70015}.monitor-note{margin-top:16px}
.login-page{min-height:100vh;display:grid;place-items:center;padding:30px 0;background:radial-gradient(circle at 50% -10%,#fff,transparent 45%),linear-gradient(180deg,#f5f5f7,#ededf0)}.login-card{width:min(460px,92%);padding:38px;border-radius:30px;background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.8);box-shadow:0 30px 80px rgba(0,0,0,.12);backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px)}.brand-mark{width:66px;height:66px;border-radius:20px;background:linear-gradient(135deg,#0071e3,#0a84ff);color:#fff;display:grid;place-items:center;font-weight:800;font-size:20px;box-shadow:0 12px 28px rgba(0,113,227,.22)}.login-logo{width:88px;height:88px;object-fit:contain;background:#fff;border-radius:22px;padding:7px;border:1px solid rgba(0,0,0,.07);box-shadow:0 10px 24px rgba(0,0,0,.06)}.login-card h1{font-size:30px;letter-spacing:-1px;margin:20px 0 5px}.login-hint{margin-top:18px;padding:13px;background:#f6f6f8;border-radius:12px;font-size:12px;line-height:1.7;color:var(--muted)}.login-foot{text-align:center;color:#86868b;font-size:11px;margin-top:20px}
.logo-preview{display:flex;align-items:center;gap:12px;margin-bottom:10px}.logo-preview img{width:80px;height:80px;object-fit:contain;border:1px solid var(--line);border-radius:16px;padding:5px;background:#fff}.setting-line{border:0;border-top:1px solid var(--line);margin:25px 0}.color-input{height:55px;padding:5px;cursor:pointer}.theme-preview{border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:18px}.preview-bar{color:#fff;padding:15px;font-weight:800}.preview-body{padding:25px;background:#f5f5f7}.preview-card{background:#fff;padding:20px;border-radius:14px;box-shadow:0 5px 20px rgba(0,0,0,.06)}
.ket{font-weight:700}.count-badge{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;background:#f2f2f7;color:#6e6e73;font-size:11px;font-weight:750}.toolbar,.head,.header{display:flex;align-items:center;justify-content:space-between;gap:12px}.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.group{margin-bottom:22px}.group-card{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.82)}.group-head{padding:15px 16px;background:linear-gradient(135deg,#f1f7ff,#fff);font-weight:800}.group-title{font-size:14px}.detail{font-size:12px;color:var(--muted)}.public-wrap{width:min(900px,100%);margin:35px auto;padding:0 20px}.footer{text-align:center;color:#86868b;font-size:11px;padding:30px 0}.check{display:flex;align-items:center;gap:7px}.check input{width:auto;margin:0}.inline{display:inline}
.print-only{display:none}
@media(max-width:900px){.admin-nav{grid-template-columns:repeat(2,1fr)}.grid3{grid-template-columns:1fr}.container{margin-top:24px}.hero{padding:28px}.hero-icon{width:72px;height:72px;font-size:30px}.monitor-summary,.summary{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.hero{min-height:190px;padding:22px 20px;margin-bottom:18px;border-radius:22px;align-items:flex-start}.hero:before{inset:0 0 0 42%;opacity:.42;background-size:cover;background-position:center right;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 22%,#000 65%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 22%,#000 65%,#000 100%)}.hero:after{background:linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.99) 52%,rgba(255,255,255,.82) 73%,rgba(255,255,255,.32) 100%)}.hero>div:first-child{max-width:76%;z-index:3}.eyebrow{font-size:10px;letter-spacing:1.8px;gap:6px}.eyebrow:before{width:20px;height:2px}.hero h1{font-size:27px;line-height:1.02;letter-spacing:-1.25px;margin:8px 0 8px}.hero p{font-size:12px;line-height:1.45;max-width:245px;color:#4f5661}.topbar{padding:0 16px}.user{font-size:0}.user a{font-size:12px}.container{padding:0 12px;margin-top:16px}.hero-icon{display:none}.card{padding:18px;border-radius:19px}.grid2,.admin-nav,.stat-grid,.monitor-summary,.summary{grid-template-columns:1fr}.absence-row{grid-template-columns:1fr 1fr 1fr 40px}.filter,.room-filter{grid-template-columns:1fr}.filter-action{padding-bottom:0}.login-card{padding:26px;border-radius:23px}}
@media print{body{background:#fff!important}.topbar,.no-print,.print-tools{display:none!important}.container{max-width:none;margin:0;padding:0}.card{box-shadow:none;border:0;padding:0}.print-only{display:block}.hero{box-shadow:none;border:0}.table-wrap{border:0}th,td{border-color:#ddd}}

.status-rejected{background:#fff7e8;color:#b45309}.modal-backdrop{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px;background:rgba(15,23,42,.38);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.modal-backdrop[hidden]{display:none}.modal-card{width:min(520px,100%);padding:24px;border-radius:24px;background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.9);box-shadow:0 30px 90px rgba(0,0,0,.22)}.modal-close{width:36px;height:36px;border:0;border-radius:50%;background:#f2f2f7;color:#6e6e73;font-size:24px;cursor:pointer}.modal-card textarea{width:100%;resize:vertical;padding:13px 14px;border:1px solid rgba(17,24,39,.13);border-radius:14px;background:#fff;font:inherit;outline:none}.modal-card textarea:focus{border-color:rgba(0,113,227,.65);box-shadow:0 0 0 4px rgba(0,113,227,.11)}.modal-open{overflow:hidden}.request-card{position:relative}.nav-card b{display:flex;align-items:center;gap:8px}.nav-badge{font-style:normal;display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#ff3b30;color:#fff;font-size:11px}
@media(max-width:620px){.modal-card{padding:20px;border-radius:20px}.modal-card .form-actions{flex-direction:column}.modal-card .form-actions .btn{width:100%}}