/* Komponen dashboard & halaman kelas */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.day{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 2px;border-radius:12px;background:var(--bg);animation:up .5s both;animation-delay:calc(var(--i)*60ms);transition:transform .2s,box-shadow .2s;cursor:pointer;border:0;font:inherit;color:inherit;min-width:0}
.day:hover{transform:translateY(-4px)}
.day small{color:var(--mute);font-size:12px;text-transform:capitalize}.day b{font-size:20px}
.day span{display:flex;gap:3px;height:8px}
.day span i{width:6px;height:6px;border-radius:50%;background:var(--red);animation:pop2 .4s both}
.day.today{background:var(--blue);color:#fff}.day.today small{color:#ffffffcc}.day.today span i{background:#fff}
.day.has:not(.today){box-shadow:inset 0 0 0 2px var(--amber)}
.ringcard{display:flex;gap:14px;align-items:center}
.ring{width:96px;flex:none}
.ring .bgc{fill:none;stroke:var(--line);stroke-width:9}
.ring .v{fill:none;stroke:var(--green);stroke-width:9;stroke-linecap:round;stroke-dasharray:251.3;stroke-dashoffset:251.3;animation:ringIn 1.3s .3s cubic-bezier(.2,.8,.2,1) forwards}
.ring .rt{font:800 22px "Bricolage Grotesque",sans-serif;fill:var(--ink)}
@keyframes ringIn{to{stroke-dashoffset:var(--off)}}
.still .ring .v{animation:none;stroke-dashoffset:var(--off)}
.sec{display:flex;align-items:center;justify-content:space-between;margin:20px 0 12px}.sec h2{margin:0}
.cls{text-decoration:none;color:var(--ink)}
.cls>div{min-width:0}
.cls small{display:block;color:var(--mute);font-size:12px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cls.tilt:hover{transform:perspective(700px) translateY(-4px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .08s}
.feedrow{display:flex;gap:12px;align-items:center;padding:10px 6px;border-radius:10px;color:var(--ink);text-decoration:none;border-top:1px solid var(--line);transition:background .2s,transform .2s}
.feedrow:first-of-type{border-top:0}.feedrow:hover{background:var(--bg);transform:translateX(4px)}
.feedrow .pic{width:36px;height:36px}.feedrow div{min-width:0}.feedrow strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.feedrow small{color:var(--mute)}
.pic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--bg);color:var(--amber)}
.post{display:flex;gap:14px}.pb{flex:1;min-width:0}
.post.ok .pic{color:var(--green)}.post.late .pic{color:var(--red)}.post.materi .pic,.pic.b{color:var(--blue)}
.metas{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:2px 0 6px;font-size:14px}
.meta{display:inline-flex;gap:6px;align-items:center;color:var(--mute)}.meta b{color:var(--ink);font-weight:600}.meta.dim{margin-left:auto;font-size:12px}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px}.chips:not(:empty){margin-bottom:10px}
.chip2{white-space:nowrap;border-radius:99px;padding:6px 14px;font-size:14px}
.chip2.on{background:var(--blue);border-color:var(--blue);color:#fff}
.bar{align-items:center}
.pilltabs{display:grid;grid-template-columns:repeat(var(--n,3),1fr);position:relative;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:4px;min-width:calc(var(--n,3)*72px)}
.pilltabs:before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/var(--n,3));background:var(--blue);border-radius:9px;transform:translateX(calc(var(--i,0)*100%));transition:transform .35s cubic-bezier(.3,1.3,.5,1)}
.pilltabs button{position:relative;border:0;background:none;color:var(--ink);padding:7px 10px}.pilltabs button.on{color:#fff}
.sbox{display:flex;align-items:center;gap:8px;margin:0;padding:0 12px;background:var(--card);border:1px solid var(--line);border-radius:10px;flex:1;min-width:160px;color:var(--mute);transition:border-color .2s,box-shadow .2s}
.sbox input{border:0!important;box-shadow:none!important;background:none;margin:0;padding:10px 0}
.sbox:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(45,86,240,.18)}
.lec{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.lec:first-of-type{border-top:0}.lec small{color:var(--mute);display:block}
.empty2{text-align:center;padding:24px;color:var(--mute)}
.empty2 svg{animation:flt 3.5s ease-in-out infinite}
.feats{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;list-style:none;padding:0;margin:18px 0 0;color:var(--mute);font-size:14px}
.feats li{display:flex;gap:6px;align-items:center;animation:up .5s both}.feats li:nth-child(2){animation-delay:.1s}.feats li:nth-child(3){animation-delay:.2s}
.rv{opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1)}
.rv.in,.still .rv{opacity:1;transform:none}
.card.rv{animation:none}
.sub b{color:var(--ink)}