:root{--bg:#f4ede0;--bg2:#ebe1cd;--fg:#1a2e22;--muted:#6b6453;--gold:#d4a017;--primary:#0d3b2e;--primary-h:#082a20;--card:#fffdf5;--line:#d9cfb8;--red:#a0432b}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.55 'Plus Jakarta Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased}
.font-display{font-family:'Fraunces',serif}
a{color:var(--primary)}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 30px -18px rgba(13,59,46,.18)}
.btn{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:12px;padding:10px 16px;font-weight:600;font-size:14px;cursor:pointer;transition:.15s;font-family:inherit;text-decoration:none}
.btn-primary{background:var(--primary);color:#f4ede0}.btn-primary:hover{background:var(--primary-h)}
.btn-gold{background:var(--gold);color:#1a2e22;font-weight:700}.btn-gold:hover{background:#b88a13}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--fg)}.btn-ghost:hover{background:var(--bg2)}
.btn-danger{background:#fde2e1;color:var(--red);font-weight:700}.btn-danger:hover{background:#f8d0cc}
.btn-sm{padding:6px 12px;font-size:12px;border-radius:9px}
.input,.select,.textarea{width:100%;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit;color:var(--fg);transition:.15s}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(13,59,46,.12)}
.textarea{min-height:80px;resize:vertical}
.label{display:block;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700}
.b-sd{background:#fbd5c8;color:#6b2814}.b-smp,.b-smk{background:#d4e0f8;color:#1a3d6b}.b-sma{background:#e8e8e8;color:#333}
.b-mi,.b-mts,.b-ma{background:#d4e9c8;color:#2c4a1f}.b-slb{background:#fde2e1;color:#7a1f1c}
.b-masuk{background:#d4e0f8;color:#1a3d6b}.b-selesai{background:#d4e9c8;color:#2c4a1f}.b-libur{background:#fde2e1;color:#7a1f1c}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{background:var(--bg2);color:var(--primary);text-align:left;padding:9px 10px;font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.tbl td{padding:9px 10px;border-top:1px solid var(--line);vertical-align:top}
.tbl tr:hover td{background:#fffaf0}
#sidebar{position:fixed;top:0;left:0;bottom:0;width:272px;background:var(--bg2);border-right:1px solid var(--line);padding:20px 14px;overflow-y:auto;transform:translateX(-100%);transition:transform .25s;z-index:40}
#sidebar.open{transform:none}
#sidebar-wrap{width:272px;flex-shrink:0}
@media(min-width:1024px){#sidebar{position:sticky;transform:none;height:100vh}#sidebar-wrap{display:block}}
#sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(13,59,46,.45);z-index:35}
#sidebar-overlay.show{display:block}
@media(min-width:1024px){#sidebar-overlay{display:none!important}}
.nav-item{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;font-weight:600;font-size:14px;cursor:pointer;color:var(--fg);transition:.15s;text-decoration:none}
.nav-item:hover{background:rgba(13,59,46,.07)}
.nav-item.active{background:var(--primary);color:#f4ede0}
#bottom-nav{display:none;position:fixed;left:0;right:0;bottom:0;background:var(--card);border-top:1px solid var(--line);z-index:30;padding-bottom:env(safe-area-inset-bottom)}
body.app-active #bottom-nav{display:flex}
@media(min-width:768px){body.app-active #bottom-nav{display:none!important}}
.bn-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;color:var(--muted);font-size:9px;font-weight:700;cursor:pointer;border:none;background:none;font-family:inherit}
.bn-item.active{color:var(--primary)}
.modal-backdrop{position:fixed;inset:0;background:rgba(13,59,46,.55);backdrop-filter:blur(6px);z-index:60;display:flex;align-items:flex-end;justify-content:center;padding:0}
@media(min-width:640px){.modal-backdrop{align-items:center;padding:20px}}
.modal{background:var(--card);border-radius:20px 20px 0 0;width:100%;max-width:680px;max-height:92vh;overflow-y:auto;padding:22px;border:1px solid var(--line)}
@media(min-width:640px){.modal{border-radius:20px}}
.toast{position:fixed;bottom:calc(70px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:var(--primary);color:#f4ede0;padding:11px 18px;border-radius:12px;z-index:100;font-size:14px;font-weight:600;box-shadow:0 10px 30px -10px rgba(0,0,0,.4);animation:tIn .25s,tOut .3s 2.5s forwards;max-width:90vw;text-align:center}
@media(min-width:768px){.toast{bottom:24px;left:auto;right:24px}}
@keyframes tIn{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes tOut{to{opacity:0}}
.view-enter{animation:vIn .2s ease-out}
@keyframes vIn{from{opacity:0;transform:translateY(8px)}to{opacity:1}}
#loading-screen{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--bg)}
.spinner{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 0 0,rgba(212,160,23,.15),transparent 45%),radial-gradient(circle at 100% 100%,rgba(13,59,46,.10),transparent 45%),var(--bg)}
.auth-box{width:100%;max-width:430px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:0 20px 60px -20px rgba(13,59,46,.3)}
.err{background:#fde2e1;color:#7a1f1c;border-radius:10px;padding:11px 14px;font-size:13px;margin:12px 0}
.ok{background:#d4e9c8;color:#2c4a1f;border-radius:10px;padding:11px 14px;font-size:13px;margin:12px 0}
.otp-input{font-size:28px;letter-spacing:12px;text-align:center;font-weight:800}
.sem-tab{padding:9px 16px;font-weight:700;font-size:13px;border:none;background:none;border-bottom:2px solid transparent;cursor:pointer;color:var(--muted);font-family:inherit}
.sem-tab.active{color:var(--primary);border-bottom-color:var(--primary)}
.chk-metode{display:flex;align-items:center;gap:7px;font-size:12.5px;padding:6px 8px;border:1px solid var(--line);border-radius:9px;cursor:pointer;background:#fff}