:root{--h:221;--s:1;--d:1;--pri:hsl(calc(var(--h) + 11) calc(37% * var(--s)) calc(53% * var(--d)));--pri2:hsl(calc(var(--h) - 3) calc(71% * var(--s)) calc(58% * var(--d)));--acc:#E8B94F;--bg:hsl(calc(var(--h) - 3) calc(100% * var(--s)) 98%);--ink:hsl(calc(var(--h) + 5) calc(57% * var(--s)) calc(21% * var(--d)));--mut:hsl(calc(var(--h) - 3) calc(20% * var(--s)) calc(54% * var(--d)));--line:hsl(calc(var(--h) - 2) calc(56% * var(--s)) 93%);--side:260px}
*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,h4,h5,h6,p,ul{margin:0}ul{padding:0;list-style:none}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5;font-size:15px;-webkit-text-size-adjust:100%}
img,svg{max-width:100%}a{color:inherit}
.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.logo{width:80px;height:80px;flex:none;margin-left:-50px}
.brand{display:flex;align-items:center;gap:.7rem;min-width:0}
.brand b{display:block;font-size:.95rem;line-height:1.15}.brand small{opacity:.7;font-size:.72rem}

/* Sidebar */
.sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--side);background:linear-gradient(180deg,hsl(calc(var(--h) + 11) calc(37% * var(--s)) calc(53% * var(--d))),hsl(calc(var(--h) + 11) calc(40% * var(--s)) calc(43% * var(--d))));color:#fff;display:flex;flex-direction:column;padding:1.1rem .85rem;z-index:1040;overflow-y:auto;transition:transform .25s ease}
.sidebar .brand{padding:.2rem .5rem 1.1rem;border-bottom:1px solid #ffffff22;margin-bottom:.8rem}
.sidebar .label{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;opacity:.7;padding:.6rem .8rem .3rem}
.sidebar a{display:flex;align-items:center;gap:.75rem;color:#ffffffdd;text-decoration:none;padding:.7rem .85rem;border-radius:.7rem;font-size:.9rem;font-weight:500;margin-bottom:.2rem}
.sidebar a:hover{background:#ffffff20;color:#fff}
.sidebar a.active{background:hsl(calc(var(--h) - 3) calc(71% * var(--s)) calc(58% * var(--d)));color:#fff;box-shadow:0 4px 12px hsl(calc(var(--h) + 16) calc(49% * var(--s)) calc(37% * var(--d)) / 0.2)}
.sidebar a.logout{margin-top:auto;color:#ffb4b4}
.sidebar .badge{margin-left:auto}
.scrim{display:none;position:fixed;inset:0;background:#0008;z-index:1035}
.main{margin-left:var(--side);min-height:100vh;min-width:0}
.topbar{background:#fff;padding:.7rem 1.4rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1030}
.topbar .l{display:flex;align-items:center;gap:.6rem;font-weight:700}
.burger{display:none;background:none;border:0;padding:.35rem;border-radius:.5rem;cursor:pointer;color:var(--ink)}
.user{display:flex;align-items:center;gap:.6rem;text-align:right;line-height:1.2}.user small{color:var(--mut);display:block}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--acc);color:#4a3200;display:grid;place-items:center;font-weight:700;flex:none}
.content{padding:1.4rem;max-width:1400px}

/* Grid & cards */
.grid{display:grid;gap:1rem}.mb{margin-bottom:1rem}
.stats{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.two{grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:start}
.card{background:#fff;border-radius:1rem;box-shadow:0 2px 12px hsl(calc(var(--h) + 11) calc(37% * var(--s)) calc(53% * var(--d)) / 0.09);padding:1.2rem;min-width:0}
.card h5{font-size:1rem;margin-bottom:.6rem}
.row-b{display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap}
.stat{display:flex;align-items:center;gap:1rem}
.stat .ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;flex:none}
.stat .ico .i{width:24px;height:24px}
.stat h3{font-size:1.35rem;line-height:1.2}.stat span{color:var(--mut);font-size:.82rem}
.c-teal{background:#DFF5F1;color:#087F8C}.c-gold{background:#FFF2CC;color:#A8740A}.c-red{background:#FDE7E7;color:#C23B3B}.c-blue{background:hsl(calc(var(--h) - 7) calc(100% * var(--s)) 93%);color:hsl(var(--h) calc(56% * var(--s)) calc(47% * var(--d)))}
.hero{background:linear-gradient(110deg,hsl(calc(var(--h) - 7) calc(100% * var(--s)) 93%),hsl(calc(var(--h) + 5) calc(100% * var(--s)) 86%),hsl(calc(var(--h) + 26) calc(100% * var(--s)) 95%));color:hsl(calc(var(--h) + 5) calc(57% * var(--s)) calc(21% * var(--d)));border-radius:1rem;padding:1.4rem}
.hero small{opacity:1;color:hsl(var(--h) calc(26% * var(--s)) calc(44% * var(--d)))}.hero h4{font-size:1.4rem;color:hsl(calc(var(--h) + 5) calc(57% * var(--s)) calc(21% * var(--d)))}
.note{background:hsl(calc(var(--h) - 4) calc(100% * var(--s)) 95%);color:hsl(calc(var(--h) - 3) calc(56% * var(--s)) calc(36% * var(--d)));border-radius:.7rem;padding:.65rem .9rem;font-size:.85rem;margin-bottom:.8rem}
.muted{color:var(--mut);font-size:.85rem}


/* Table */
.tbl{width:100%;max-width:100%;overflow-x:auto;border-radius:.8rem;background:#fff}
.tbl table{width:100%;border-collapse:separate;border-spacing:0;background:#fff}
.tbl th{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.035em;color:hsl(calc(var(--h) - 3) calc(20% * var(--s)) calc(54% * var(--d)));text-align:left;padding:.9rem .75rem;background:hsl(calc(var(--h) + 1) calc(100% * var(--s)) 98%);border-bottom:1px solid hsl(calc(var(--h) - 2) calc(56% * var(--s)) 93%);white-space:nowrap}
.tbl td{padding:.9rem .75rem;border-bottom:1px solid hsl(calc(var(--h) - 3) calc(44% * var(--s)) 95%);vertical-align:middle;color:hsl(calc(var(--h) - 2) calc(37% * var(--s)) calc(24% * var(--d)));transition:background .18s ease}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .18s ease}
.tbl tbody tr:hover td{background:hsl(calc(var(--h) + 4) calc(100% * var(--s)) 98%)}
.tbl th:first-child{border-top-left-radius:.8rem}
.tbl th:last-child{border-top-right-radius:.8rem}
.tbl td .btn{white-space:nowrap}
.tbl td .badge{letter-spacing:.01em}
.tbl::-webkit-scrollbar{height:7px}
.tbl::-webkit-scrollbar-track{background:hsl(calc(var(--h) + 1) calc(56% * var(--s)) 96%);border-radius:99px}
.tbl::-webkit-scrollbar-thumb{background:hsl(calc(var(--h) + 1) calc(49% * var(--s)) 86%);border-radius:99px}
.tbl::-webkit-scrollbar-thumb:hover{background:hsl(calc(var(--h) + 2) calc(45% * var(--s)) 77%)}


/* Table action buttons */
.tbl .btn{border-radius:.55rem;padding:.5rem .8rem;font-size:.82rem;font-weight:600;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease}
.tbl .btn-ghost{background:#fff;border-color:hsl(calc(var(--h) - 3) calc(47% * var(--s)) 90%);color:hsl(calc(var(--h) - 1) calc(33% * var(--s)) calc(38% * var(--d)))}
.tbl .btn-ghost:hover{background:hsl(calc(var(--h) + 3) calc(100% * var(--s)) 97%);border-color:hsl(calc(var(--h) + 1) calc(63% * var(--s)) 83%);box-shadow:0 2px 6px hsl(calc(var(--h) + 11) calc(37% * var(--s)) calc(53% * var(--d)) / 0.06)}


/* Buttons & badges */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:1px solid transparent;border-radius:.6rem;padding:.55rem 1rem;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;font-size:.88rem}
.btn-pri{background:hsl(calc(var(--h) - 3) calc(71% * var(--s)) calc(58% * var(--d)));color:#fff}.btn-pri:hover{background:hsl(calc(var(--h) + 1) calc(56% * var(--s)) calc(48% * var(--d)))}
.btn-ghost{background:#fff;color:var(--ink);border-color:hsl(calc(var(--h) - 5) calc(35% * var(--s)) 86%)}
.btn-sm{padding:.35rem .75rem;font-size:.8rem}.btn-block{width:100%;padding:.75rem}
.btn:disabled{opacity:.45;cursor:not-allowed}
.badge{display:inline-block;padding:.2rem .6rem;border-radius:99px;font-size:.72rem;font-weight:700;white-space:nowrap}
.b-ok{background:#D9F3E4;color:#17713F}.b-warn{background:#FFF2CC;color:#8A5A00}.b-bad{background:#FDE0E0;color:#A52C2C}

/* Switch */
.sw{display:flex;align-items:center;gap:.8rem;cursor:pointer;font-weight:600}
.sw input{position:absolute;opacity:0}
.sw i{width:52px;height:28px;border-radius:99px;background:hsl(calc(var(--h) - 16) calc(20% * var(--s)) 81%);position:relative;transition:.2s;flex:none}
.sw i::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px #0003}
.sw input:checked+i{background:hsl(calc(var(--h) - 3) calc(71% * var(--s)) calc(58% * var(--d)))}.sw input:checked+i::after{left:27px}
.sw input:focus-visible+i{outline:3px solid hsl(calc(var(--h) - 3) calc(71% * var(--s)) calc(58% * var(--d)) / 0.33)}

/* Form & login */
.field{position:relative;margin-bottom:1rem}.field label{display:block;font-weight:600;margin-bottom:.35rem;font-size:.9rem}
.field .i{position:absolute;left:.85rem;bottom:.8rem;color:var(--mut);width:18px;height:18px}
.field input{width:100%;padding:.75rem .9rem .75rem 2.6rem;border:1px solid hsl(calc(var(--h) - 5) calc(35% * var(--s)) 86%);border-radius:.7rem;font:inherit;background:#fff}
.field input:focus{outline:3px solid hsl(calc(var(--h) - 3) calc(71% * var(--s)) calc(58% * var(--d)) / 0.27);border-color:hsl(calc(var(--h) - 3) calc(71% * var(--s)) calc(58% * var(--d)))}
.err{display:none;background:#FDE0E0;color:#A52C2C;border-radius:.6rem;padding:.6rem .8rem;font-size:.85rem;margin-bottom:1rem}.err.show{display:block}
.login{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:1.1fr 1fr}
.art{background:linear-gradient(150deg,hsl(calc(var(--h) + 11) calc(37% * var(--s)) calc(53% * var(--d))),hsl(calc(var(--h) + 11) calc(40% * var(--s)) calc(43% * var(--d))));color:#fff;padding:3rem;display:flex;flex-direction:column;justify-content:center}
.art .logo{width:250px;height:250px;margin-bottom:1.4rem}.art h1{font-size:2rem;margin-bottom:.6rem}.art p{opacity:.9;font-size:1.1rem}
.art li{display:flex;gap:.6rem;margin-top:.8rem;opacity:.9}
.formside{display:flex;align-items:center;justify-content:center;padding:2rem;background:#fff}
.formside form{width:100%;max-width:380px}
.formside h3{font-size:1.5rem;margin-bottom:.3rem}
.mbrand{display:none;color:var(--pri);margin-bottom:1.5rem}

/* Responsive */
@media(max-width:1199px){.two{grid-template-columns:1fr}}
@media(max-width:991px){
 .sidebar{transform:translateX(-100%)}body.nav-open .sidebar{transform:none}
 body.nav-open .scrim{display:block}body.nav-open{overflow:hidden}
 .main{margin-left:0}.burger{display:inline-flex}
 .login{grid-template-columns:1fr}.art{display:none}.mbrand{display:flex}
 .formside{align-items:flex-start;padding:2.5rem 1.2rem}
}
@media(max-width:640px){
 body{font-size:14.5px}.content{padding:.9rem}.topbar{padding:.6rem .9rem}.card{padding:1rem}
 .stats{grid-template-columns:1fr 1fr}.stat{flex-direction:column;align-items:flex-start;gap:.6rem}
 .stat .ico{width:42px;height:42px}.stat h3{font-size:1.1rem}
 .user div:first-child{display:none}
 table.stack thead{display:none}
 table.stack tr{display:block;border:1px solid var(--line);border-radius:.8rem;margin-bottom:.7rem;padding:.3rem .8rem}
 table.stack td{display:flex;justify-content:space-between;align-items:center;gap:1rem;border:0;padding:.4rem 0;text-align:right}
 table.stack td::before{content:attr(data-label);font-weight:600;color:var(--mut);text-align:left;font-size:.8rem}
 table.stack td:empty{display:none}
}
@media(max-width:360px){.stats{grid-template-columns:1fr}}


/* Tata letak halaman Pengaturan */

.settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;align-items:start}
.settings-col{display:flex;flex-direction:column;gap:1.2rem;min-width:0}
.settings-col .card{min-width:0}
.settings-col h5{margin-bottom:.8rem}
.settings-col .f2{grid-template-columns:1fr;gap:.8rem}
.settings-col .f2 .full{grid-column:auto}
.settings-col .inp{width:100%;min-width:0}
.settings-col .chips{display:flex;flex-wrap:wrap;gap:.5rem}
.settings-col .toolbar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.settings-col .toolbar .grow{flex:1 1 100px;min-width:0}
.settings-col .tbl{width:100%;overflow-x:auto}
.settings-col .tbl table{width:100%;min-width:340px}
.settings-col .tbl th,.settings-col .tbl td{padding:.7rem .5rem}
.settings-col .tbl td .inp{min-width:110px}
.settings-col .acts{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1rem}
.settings-col .hint{margin-top:.7rem;line-height:1.6}

@media(max-width:1100px){
.settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:640px){
.settings-grid{grid-template-columns:1fr;gap:1rem}
.settings-col{gap:1rem}
.settings-col .card{padding:1rem}
}



/*EXTRA*/
.toolbar{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem;align-items:center}.toolbar .grow{flex:1;min-width:180px}
.inp{width:100%;padding:.6rem .8rem;border:1px solid hsl(calc(var(--h) - 5) calc(35% * var(--s)) 86%);border-radius:.6rem;font:inherit;background:#fff;color:var(--ink)}
.inp:focus{outline:3px solid hsl(calc(var(--h) - 3) calc(71% * var(--s)) calc(58% * var(--d)) / 0.27);border-color:hsl(calc(var(--h) - 3) calc(71% * var(--s)) calc(58% * var(--d)))}.toolbar select.inp{width:auto}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}.f2 .full{grid-column:1/-1}.lbl{display:block;font-weight:600;font-size:.85rem;margin-bottom:.3rem}
.modal{position:fixed;inset:0;background:#0009;display:none;align-items:center;justify-content:center;padding:1rem;z-index:1100}.modal.show{display:flex}
.box{background:#fff;border-radius:1rem;width:100%;max-width:520px;max-height:92vh;overflow:auto;padding:1.3rem}
.box h5{font-size:1.1rem;margin-bottom:.8rem}.acts{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1.1rem;flex-wrap:wrap}
/*TOAST*/
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.8rem}.chip{display:inline-flex;align-items:center;gap:.4rem;background:hsl(calc(var(--h) + 26) calc(100% * var(--s)) 95%);color:hsl(calc(var(--h) + 11) calc(40% * var(--s)) calc(43% * var(--d)));padding:.3rem .45rem .3rem .85rem;border-radius:99px;font-weight:700}
.chip button{border:0;background:hsl(calc(var(--h) + 11) calc(40% * var(--s)) calc(43% * var(--d)) / 0.13);border-radius:50%;width:22px;height:22px;cursor:pointer;color:inherit}
.chk{display:flex;align-items:center;gap:.7rem;padding:.65rem .8rem;border:1px solid var(--line);border-radius:.7rem;margin-bottom:.5rem;cursor:pointer}.chk input{width:18px;height:18px;accent-color:hsl(calc(var(--h) - 3) calc(71% * var(--s)) calc(58% * var(--d)))}.chk b{margin-left:auto}
.proof{height:170px;border:2px dashed hsl(calc(var(--h) - 5) calc(35% * var(--s)) 86%);border-radius:.8rem;display:grid;place-items:center;color:var(--mut);background:hsl(calc(var(--h) + 2) calc(100% * var(--s)) 99%);text-align:center;margin:.8rem 0}
.va{font-size:1.5rem;font-weight:800;letter-spacing:.06em;color:var(--pri);word-break:break-all}
.kv{display:grid;grid-template-columns:150px 1fr;gap:.4rem .8rem;font-size:.9rem;margin:0}.kv dt{color:var(--mut)}.kv dd{margin:0;font-weight:600}
.seg{display:inline-flex;background:hsl(calc(var(--h) - 1) calc(55% * var(--s)) 96%);border-radius:.7rem;padding:.2rem}.seg button{border:0;background:none;padding:.4rem .9rem;border-radius:.5rem;font:inherit;font-weight:600;cursor:pointer;color:var(--ink)}.seg button.on{background:#fff;box-shadow:0 1px 4px #0002}
.rcpt{border:1px dashed hsl(calc(var(--h) - 17) calc(20% * var(--s)) 69%);padding:1rem;border-radius:.6rem}.rcpt .brand{color:var(--pri);margin-bottom:.8rem}
.hide{display:none!important}.b-info{background:hsl(calc(var(--h) - 7) calc(100% * var(--s)) 93%);color:hsl(calc(var(--h) + 1) calc(56% * var(--s)) calc(48% * var(--d)))}.acts-r{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}
.hint{font-size:.8rem;color:var(--mut);margin-top:.3rem}.mt{margin-top:1rem}
@media(max-width:640px){.f2{grid-template-columns:1fr}.kv{grid-template-columns:1fr;gap:0}.kv dd{margin-bottom:.5rem}.toolbar .btn{flex:1}.toolbar select.inp{flex:1}}
@media print{body *{visibility:hidden}.rcpt,.rcpt *{visibility:visible}.rcpt{position:fixed;left:0;top:0;width:100%;border:0}}

/*EXTRA2*/.empty{text-align:center;padding:2rem 1rem;color:var(--mut)}
.btn-danger{background:#C23B3B;color:#fff}.btn-danger:hover{background:#A52C2C}
.notif{text-align:center;max-width:400px}
.notif .ico{width:68px;height:68px;border-radius:50%;margin:.2rem auto 1rem;display:grid;place-items:center;background:#D9F3E4;color:#17713F}
.notif .ico svg{width:36px;height:36px}
.notif.bad .ico{background:#FDE0E0;color:#A52C2C}
.notif h5{font-size:1.2rem;margin-bottom:.4rem}
.notif p{color:var(--mut);line-height:1.6;margin:0}
.notif .acts{justify-content:center;margin-top:1.3rem}
.notif .acts .btn{min-width:7rem}
@keyframes notifIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.modal.show .notif{animation:notifIn .22s ease-out}

/*PAGER*/
.pager{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;justify-content:space-between;padding:.9rem 1rem;border-top:1px solid var(--line)}
.pager-info{font-size:.85rem;color:var(--mut)}
.pager-links{display:flex;gap:.3rem;flex-wrap:wrap}
.pg{min-width:2.1rem;height:2.1rem;padding:0 .5rem;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;background:#fff;color:inherit;text-decoration:none;font-size:.9rem}
a.pg:hover{border-color:var(--pri,#0d9488);color:var(--pri,#0d9488)}
.pg.on{background:var(--pri,#0d9488);border-color:var(--pri,#0d9488);color:#fff;font-weight:600}
.pg.off{opacity:.45}
.fchips{display:flex;flex-wrap:wrap;gap:.4rem;margin:-.2rem 0 1rem}
.chip{padding:.35rem .8rem;border:1px solid var(--line);border-radius:999px;font-size:.85rem;text-decoration:none;color:inherit;background:#fff}
.chip.on{background:var(--pri,#0d9488);border-color:var(--pri,#0d9488);color:#fff}
.chip b{margin-left:.3rem}
.prev-box{margin-top:.8rem;padding:.7rem .9rem;border-radius:10px;background:hsl(calc(var(--h) - 11) calc(40% * var(--s)) 96%);font-size:.88rem;line-height:1.55}

/* Notifikasi (toast) profesional */
.toasts{position:fixed;top:1rem;right:1rem;z-index:1300;display:flex;flex-direction:column;gap:.7rem;width:min(390px,calc(100vw - 2rem));pointer-events:none}
.tst{--wr:hsl(calc(var(--h) - 3) calc(70% * var(--s)) calc(52% * var(--d)));--bg:hsl(calc(var(--h) - 7) calc(100% * var(--s)) 93%);pointer-events:auto;position:relative;display:flex;gap:.8rem;align-items:flex-start;background:#fff;border:1px solid var(--line);border-left:4px solid var(--wr);border-radius:14px;padding:.85rem 2.3rem .95rem .85rem;box-shadow:0 14px 34px hsl(calc(var(--h) + 5) calc(57% * var(--s)) calc(21% * var(--d)) / 0.18);overflow:hidden;opacity:0;transform:translateX(28px);transition:opacity .28s,transform .28s}
.tst.show{opacity:1;transform:none}
.tst-sukses{--wr:#16A06B;--bg:#DDF5EA}.tst-gagal{--wr:#D64545;--bg:#FDE4E4}.tst-peringatan{--wr:#D98E04;--bg:#FFF1CC}.tst-info{--wr:hsl(calc(var(--h) - 3) calc(70% * var(--s)) calc(52% * var(--d)));--bg:hsl(calc(var(--h) - 7) calc(100% * var(--s)) 93%)}
.tst .ti{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--bg);color:var(--wr)}
.tst .ti .i{width:20px;height:20px}
.tst .tb{min-width:0;flex:1}
.tst strong{display:block;color:var(--ink);font-size:.95rem;line-height:1.3}
.tst p{margin:.15rem 0 0;color:hsl(calc(var(--h) - 6) calc(19% * var(--s)) calc(35% * var(--d)));font-size:.86rem;line-height:1.45;overflow-wrap:anywhere}
.tst .tx{position:absolute;top:.45rem;right:.55rem;border:0;background:none;color:var(--mut);font-size:1.35rem;line-height:1;cursor:pointer;padding:.15rem .4rem;border-radius:6px}
.tst .tx:hover{background:hsl(calc(var(--h) - 11) calc(40% * var(--s)) 96%);color:var(--ink)}
.tst .tp{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--wr);transform-origin:left;animation:tstBar linear forwards}
.tst.pause .tp{animation-play-state:paused}
@keyframes tstBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media(max-width:575px){.toasts{top:.6rem;right:.6rem;left:.6rem;width:auto}}
@media(prefers-reduced-motion:reduce){.tst{transition:opacity .01s;transform:none}.tst .tp{animation:none}}

/* ===== Tema warna: semua warna biru/aksen dihitung dari --h (hue). Ganti hue = ganti tema ===== */
html[data-tema="biru"]{--h:221}
html[data-tema="tosca"]{--h:176}
html[data-tema="hijau"]{--h:148}
html[data-tema="oranye"]{--h:22}
html[data-tema="merah"]{--h:352}
html[data-tema="mawar"]{--h:326}
html[data-tema="ungu"]{--h:268}
/* Hitam: netral tanpa rona (--s:0), nada kuat digelapkan (--d) */
html[data-tema="hitam"]{--h:0;--s:0;--d:.42}

/* ===== Motif garis diagonal di latar belakang semua halaman (admin & wali) =====
   Warna dihitung dari --h/--s/--d, jadi otomatis ikut semua tema (biru, tosca, hijau, ..., hitam, kustom).
   Dipasang di body::before (fixed) supaya tidak ikut ter-scroll dan tidak menutupi konten. */
body::before{
    content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:
        repeating-linear-gradient(120deg,transparent 0 18px,hsl(var(--h) calc(83% * var(--s)) calc(53% * var(--d)) / .09) 18px 19px),
        repeating-linear-gradient(120deg,transparent 0 46px,hsl(calc(var(--h) - 9) calc(96% * var(--s)) 78% / .30) 46px 49px),
        repeating-linear-gradient(120deg,transparent 0 74px,hsl(calc(var(--h) + 3) calc(64% * var(--s)) calc(33% * var(--d)) / .07) 74px 75px);
}
@media print{body::before{display:none}}