:root{--bg:#F1F4F6;--card:#fff;--ink:#122B33;--mut:#62767F;--line:#DDE5E9;--brand:#0E7C6B;--brand2:#0A5A4E;--side:#0B3B3F;--gold:#E8A33D;--bad:#C0392B;--warn:#B7791F;--r:14px}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 'Plus Jakarta Sans',system-ui,sans-serif}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid #8CCFC3;outline-offset:2px}
input,select{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;min-width:0;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(14,124,107,.15);outline:0}
.btn{background:var(--brand);color:#fff;border:0;border-radius:10px;padding:10px 16px;font-weight:600;cursor:pointer;transition:background .2s,transform .1s}
.btn:hover{background:var(--brand2)}.btn:active{transform:scale(.97)}
.btn.ghost{background:none;color:var(--brand);border:1px solid var(--line)}.btn.ghost:hover{background:#EAF4F2}
.btn.sm{padding:5px 12px;font-size:13px}.btn.bad{color:var(--bad)}
.sub{color:var(--mut);margin:0 0 6px}
.brand{display:flex;gap:10px;align-items:center;font-size:17px;color:#fff;padding:0 8px}
.brand.dark{color:var(--ink);padding:0}
.mark{width:28px;height:28px;border-radius:8px;background:var(--gold);box-shadow:inset 0 0 0 6px var(--side),inset 0 0 0 9px var(--gold)}
.brand.dark .mark{box-shadow:inset 0 0 0 6px #fff,inset 0 0 0 9px var(--gold);background:var(--side)}
/* login */
.auth{display:grid;place-items:center;min-height:100vh;padding:16px;background:radial-gradient(900px 500px at 15% 10%,#14595A,transparent),var(--side)}
.login{width:100%;max-width:370px;display:grid;gap:12px;padding:28px;animation:pop .5s both}
.login h1{margin:6px 0 0;font-size:24px}
.err{color:var(--bad);font-size:14px;min-height:1.2em}
/* layout */
.side{position:fixed;inset:0 auto 0 0;width:232px;background:var(--side);color:#CFE5E2;padding:24px 14px;display:flex;flex-direction:column;gap:28px;z-index:5}
#nav button{display:block;width:100%;text-align:left;background:none;border:0;padding:11px 16px;border-radius:10px;color:inherit;cursor:pointer;position:relative;transition:background .2s,color .2s;margin-bottom:4px}
#nav button:hover{background:rgba(255,255,255,.07)}
#nav button.on{background:rgba(255,255,255,.13);color:#fff;font-weight:600}
#nav button.on::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--gold)}
.main{margin-left:232px;min-height:100vh}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 28px;background:rgba(241,244,246,.88);backdrop-filter:blur(8px);position:sticky;top:0;z-index:4}
.top h1{font-size:22px;margin:0;font-weight:800}.top p{margin:0;color:var(--mut);font-size:13px}
.user{display:flex;align-items:center;gap:12px;font-weight:600;text-align:right}
.user small{display:block;color:var(--mut);font-weight:400;font-size:12px}
.user a{color:var(--brand);text-decoration:none;padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:#fff}
.live{width:9px;height:9px;border-radius:50%;background:#2BB673;animation:pulse 2s infinite}
main{padding:8px 28px 40px}
section{animation:in .4s both}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.c5{grid-column:span 5}.c7{grid-column:span 7}.c12{grid-column:span 12}
.card{background:var(--card);border-radius:var(--r);padding:20px;box-shadow:0 1px 2px rgba(18,43,51,.06),0 10px 28px -14px rgba(18,43,51,.14)}
h2{font-size:15px;margin:0 0 14px}
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}.grow{flex:1}
/* ring */
.hero{display:flex;align-items:center;gap:26px}
.ring{position:relative;width:136px;height:136px;flex:none}
.ring svg{transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:12;stroke-linecap:round}
.ring .bg{stroke:#E4ECEF}
.ring .fg{stroke:url(#g);stroke-dasharray:326.7;stroke-dashoffset:326.7;transition:stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1)}
.ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:800}
.nums{display:grid;gap:12px}.n{display:block;font-size:34px;font-weight:800;line-height:1.1}.nums small{color:var(--mut)}
/* weekly bars */
@property --c1{syntax:'<color>';inherits:false;initial-value:#0E7C6B}
@property --c2{syntax:'<color>';inherits:false;initial-value:#38A898}
.chead{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.chead h2{margin:0}
.wnav{display:flex;align-items:center;gap:6px}
.wnav span{font-size:13px;color:var(--mut);min-width:132px;text-align:center}
.wnav button{width:34px;height:34px;border:1px solid var(--line);background:#fff;border-radius:10px;cursor:pointer;font-size:20px;line-height:1;color:var(--brand);transition:background .2s,transform .2s cubic-bezier(.34,1.56,.64,1)}
.wnav button:hover:not(:disabled){background:#EAF4F2;transform:translateY(-1px)}.wnav button:active:not(:disabled){transform:scale(.9)}
.wnav button:disabled{opacity:.35;cursor:default}
.week{display:flex;gap:10px;height:190px}
.week.to-l{animation:swL .5s cubic-bezier(.2,.8,.2,1)}
.week.to-r{animation:swR .5s cubic-bezier(.2,.8,.2,1)}
.col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:none;cursor:pointer;font:inherit;color:inherit}
.col .v{font-size:12px;font-weight:600;color:var(--mut);transition:color .3s;animation:rise .5s both;animation-delay:calc(var(--i) * 60ms + 300ms)}
.col .t{flex:1;min-height:0;width:100%;display:flex;align-items:flex-end;justify-content:center;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.col:hover .t{transform:translateY(-4px)}.col:active .t{transform:scale(.94)}
.bar2{display:block;width:100%;max-width:42px;height:var(--h);min-height:4px;border-radius:8px 8px 3px 3px;--c1:#0E7C6B;--c2:#38A898;background:linear-gradient(var(--c1),var(--c2));animation:grow .9s cubic-bezier(.34,1.3,.64,1) both;animation-delay:calc(var(--i) * 60ms);transition:height .8s cubic-bezier(.2,.8,.2,1),--c1 .4s,--c2 .4s}
.col b{font-size:13px;transition:color .3s}.col small{font-size:11px;color:var(--mut)}
.col.sel .bar2{--c1:#2F5FD0;--c2:#7FA2F0}
.col.today .bar2{--c1:#E8A33D;--c2:#F2C27E;animation:grow .9s cubic-bezier(.34,1.3,.64,1) both,glow 3s ease-in-out infinite;animation-delay:calc(var(--i) * 60ms),1.6s}
.col.sel .t{animation:bump .5s cubic-bezier(.34,1.56,.64,1)}
.col.sel .v,.col.sel b{color:#1F3F94}
.col.today.sel .v,.col.today.sel b{color:#8A5A0C}
.col.today b::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#E8A33D;margin-left:5px;vertical-align:middle}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;font-size:12px;color:var(--mut);margin:12px 0 0}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.dp{display:flex;gap:8px;align-items:center;font-weight:600}
h2 small{font-weight:400}
/* feed, kelas, chips */
.feed{list-style:none;margin:0;padding:0;max-height:330px;overflow:auto}
.feed li{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line)}
.feed li:last-child{border:0}
.feed li div{flex:1;min-width:0}.feed small{display:block;color:var(--mut)}
.feed time{font-weight:700;font-size:13px;color:var(--sc,var(--brand))}
.feed li.new{animation:slide .5s both,flash 2.2s}
.x{border:0;background:none;color:var(--mut);font-size:18px;cursor:pointer}.x:hover{color:var(--bad)}
.kr{margin-bottom:14px}.kr div:first-child{display:flex;justify-content:space-between;margin-bottom:5px}.kr small{color:var(--mut)}
.track{height:8px;background:#E4ECEF;border-radius:6px;overflow:hidden}
.track i{display:block;height:100%;width:var(--w);background:var(--brand);border-radius:6px;animation:wide 1s cubic-bezier(.2,.8,.2,1) both;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.chips{display:flex;flex-wrap:wrap;gap:8px;max-height:210px;overflow:auto}
.chip{padding:5px 12px;background:#EEF3F5;border-radius:99px;font:inherit;font-size:13px;color:inherit;border:0;cursor:pointer;transition:background .2s,transform .25s cubic-bezier(.34,1.56,.64,1)}
.chip:hover{background:#DDEFEA;transform:translateY(-2px)}.chip:active{transform:scale(.95)}
.empty{color:var(--mut);text-align:center;padding:14px}
/* scan */
#reader{width:100%;max-width:440px;margin:0 auto;background:#0B1F22;min-height:260px;border-radius:var(--r);overflow:hidden}
.res{max-width:440px;margin:14px auto 0;padding:16px;border-radius:var(--r);background:#E6ECEF;color:var(--mut);display:grid;gap:2px;animation:pop .3s both}
.res b{font-size:20px;color:var(--ink)}
.res.ok{background:#D9F2E8}.res.warn{background:#FBEFD5}.res.bad{background:#FBE0DD}
/* table */
.tw{padding:6px 8px;overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:13px;color:var(--mut);font-weight:600}tr:last-child td{border:0}
tbody tr{transition:background .15s}tbody tr:hover{background:#F6F9FA}
td.act{text-align:right;display:flex;gap:6px;justify-content:flex-end}
.tag{padding:2px 10px;border-radius:99px;font-size:12px;background:#E2F2EF;color:var(--brand2);font-weight:600}
.tag.admin{background:#FCEFD5;color:#8A5A0C}
dialog{border:0;border-radius:18px;padding:24px;text-align:center;animation:pop .25s both}
dialog::backdrop{background:rgba(11,59,63,.5);backdrop-filter:blur(3px)}
dialog img{width:240px;height:240px;display:block;margin:0 auto 10px}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:99px;z-index:20;animation:pop .25s both}
.toast.bad{background:var(--bad)}
@keyframes in{from{opacity:0;transform:translateY(8px)}}
@keyframes pop{from{opacity:0;transform:scale(.95)}}
@keyframes grow{from{height:0}}
@keyframes wide{from{width:0}}
@keyframes slide{from{opacity:0;transform:translateX(-16px)}}
@keyframes flash{from{background:#FFF3D6}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(43,182,115,.55)}70%,100%{box-shadow:0 0 0 9px rgba(43,182,115,0)}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}}
@keyframes bump{0%{transform:translateY(0)}35%{transform:translateY(-9px)}70%{transform:translateY(1px)}}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(232,163,61,0)}50%{box-shadow:0 0 16px 2px rgba(232,163,61,.5)}}
@keyframes swL{from{opacity:0;transform:translateX(42px)}}
@keyframes swR{from{opacity:0;transform:translateX(-42px)}}
.grid>.card{animation:in .55s cubic-bezier(.2,.8,.2,1) backwards;transition:transform .3s,box-shadow .3s}
.grid>.card:nth-child(2){animation-delay:.07s}.grid>.card:nth-child(3){animation-delay:.14s}.grid>.card:nth-child(4){animation-delay:.21s}.grid>.card:nth-child(5){animation-delay:.28s}
.grid>.card:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(18,43,51,.06),0 16px 32px -14px rgba(18,43,51,.2)}
.s-H{--sc:#0A5A4E;--sb:#DDF3EC}.s-S{--sc:#6B3FD0;--sb:#EEE7FB}.s-I{--sc:#9A6212;--sb:#FBEFD5}.s-A{--sc:#B42318;--sb:#FBE0DD}.s-B{--sc:#51636C;--sb:#EAEFF2}
.sec{font-size:18px;font-weight:800;margin:30px 0 0}
.jb{margin-top:16px}
.jh{font-size:16px;font-weight:800;margin:0 0 10px;display:flex;align-items:baseline;gap:8px}.jh small{color:var(--mut);font-weight:400;font-size:13px}
.stt{display:flex;flex-wrap:wrap;gap:6px}.nums .stt{margin-top:2px}
.sc{padding:3px 10px;border-radius:99px;font-size:12px;font-weight:700;color:var(--sc);background:var(--sb)}
.sb{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:800;flex:none;color:var(--sc);background:var(--sb)}
.feed li{cursor:pointer;transition:background .2s}.feed li:hover{background:#F6F9FA}.feed small.cat{color:var(--ink);font-style:italic}
.legend .lg{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;margin-right:6px;font-size:11px;color:var(--sc);background:var(--sb)}
.sec.first{margin-top:6px}.legend.left{justify-content:flex-start;margin:8px 0 0}
select.jksel{padding:5px 8px;border-radius:8px;font-size:13px}
dialog{width:min(380px,92vw)}dialog input{width:100%}
.codes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}
.code{border:2px solid var(--line);background:#fff;border-radius:12px;padding:10px 4px;cursor:pointer;display:grid;gap:2px;font:inherit;transition:transform .25s cubic-bezier(.34,1.56,.64,1),border-color .2s,background .2s}
.code b{font-size:20px;color:var(--sc)}.code small{color:var(--mut);font-size:12px}
.code:hover{transform:translateY(-2px)}.code.on{border-color:var(--sc);background:var(--sb);transform:scale(1.04)}
@media(max-width:900px){
  .side{inset:auto 0 0 0;width:auto;flex-direction:row;padding:6px 8px;gap:0;box-shadow:0 -6px 20px rgba(0,0,0,.15)}
  .side .brand{display:none}#nav{display:flex;width:100%}
  #nav button{text-align:center;padding:12px 4px;font-size:13px;margin:0}#nav button.on::before{inset:auto 25% 0 25%;height:3px;width:auto;top:auto}
  .main{margin-left:0}.top{padding:14px 16px}main{padding:8px 16px 100px}
  .c5,.c7{grid-column:span 12}.hero{gap:18px}.ring{width:116px;height:116px}.n{font-size:28px}
  .user>span:nth-child(2){display:none}
  .week{gap:4px;height:180px}.col small{font-size:10px}.wnav span{min-width:104px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}