#app{max-width:980px;margin:0 auto;padding:18px 14px 60px}
.top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px;padding:10px 16px;border-radius:20px;border:1px solid var(--edge);
  background:linear-gradient(145deg,var(--g1),var(--g2));backdrop-filter:blur(var(--blur)) saturate(1.7);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.7);box-shadow:inset 0 1px 0 #fff,var(--shadow)}
.top img{width:44px;height:44px;object-fit:contain}
.top h1{font-size:1.2rem;margin:0;color:var(--brown)}.top small{display:block;color:var(--muted)}.top .grow{flex:1}
.livepill{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 10px;border:1px solid rgb(255 255 255/.9);border-radius:99px;background:rgb(255 255 255/.65);font-weight:800;font-size:.8rem;letter-spacing:.08em;color:var(--brown)}
.livepill i{width:9px;height:9px;border-radius:50%;background:#e53935;box-shadow:0 0 0 0 rgb(229 57 53/.6);animation:pulse 1.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgb(229 57 53/0)}100%{box-shadow:0 0 0 0 rgb(229 57 53/0)}}
.ring{width:34px;height:34px;transform:rotate(-90deg)}.ring circle{fill:none;stroke-width:3.5}.ring .bg{stroke:rgb(107 68 35/.2)}.ring .fg{stroke:var(--brown);stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.tabs{display:flex;gap:10px 14px;flex-wrap:wrap;align-items:center;margin-bottom:14px}.tabs .seg{max-width:100%}.tabs>b{padding:5px 16px;border-radius:14px;background:rgb(255 255 255/.55);border:1px solid rgb(255 255 255/.85);color:var(--brown)}
.me{position:relative;overflow:hidden;margin-bottom:16px;padding:16px 18px;background:linear-gradient(135deg,rgb(255 238 209/.92),rgb(255 255 255/.45));border-color:#fff}
.me h3{margin:0 0 2px;color:var(--brown);font-size:1.15rem}.me .big{font:700 2.4rem/1 var(--mono);color:#000}.me .big small{font-size:1rem;color:var(--muted);font-weight:500}
.me .row{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-end;margin-top:8px}
.podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:12px;align-items:end;margin:6px 0 20px}
.pod{position:relative;text-align:center;padding:18px 10px 14px;border-radius:22px;border:1px solid #fff;min-width:0;
  background:linear-gradient(160deg,var(--g1),var(--g2));backdrop-filter:blur(var(--blur)) saturate(1.7);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.7);box-shadow:inset 0 1px 0 #fff,var(--shadow)}
.pod.p1{padding-top:28px;padding-bottom:22px;background:linear-gradient(160deg,rgb(255 238 209/.97),rgb(255 255 255/.45));box-shadow:inset 0 1px 0 #fff,0 18px 44px -12px rgb(107 68 35/.6)}
.medal{display:grid;place-items:center;width:46px;height:46px;margin:-36px auto 8px;border-radius:50%;font:800 1.3rem var(--mono);border:3px solid #fff;box-shadow:0 6px 14px -4px rgb(0 40 38/.5)}
.p1 .medal{width:58px;height:58px;margin-top:-48px;font-size:1.6rem;color:#4a2c10;background:conic-gradient(from 200deg,#fff6dc,#e9b94f,#fff6dc,#e9b94f)}
.p2 .medal{color:#1d3b39;background:conic-gradient(from 200deg,#fff,#b7c8c8,#fff,#b7c8c8)}.p3 .medal{color:#fff;background:conic-gradient(from 200deg,#e7b98d,#8f5428,#e7b98d,#8f5428)}
.pod .nm{font-weight:700;line-height:1.25;overflow-wrap:anywhere}.pod .kl{font-size:.8rem;color:var(--muted)}
.pod .tot{font:800 1.7rem var(--mono);margin-top:8px;color:var(--brown)}.p1 .tot{font-size:2.2rem}
.pod .av{font-size:.8rem;color:var(--muted)}
.find{display:flex;gap:10px;margin:0 0 12px}.find input{margin:0}
.rows{display:grid;gap:10px}
.rw{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:11px 14px;border:1px solid var(--edge);border-radius:18px;position:relative;overflow:hidden;
  background:linear-gradient(145deg,var(--g1),var(--g2));backdrop-filter:blur(var(--blur)) saturate(1.6);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.6);box-shadow:inset 0 1px 0 #fff,0 8px 22px -12px rgb(0 60 56/.5)}
.rw .bar{position:absolute;left:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--teal),var(--brown));border-radius:0 4px 0 0}
.rw .rk{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;font:800 1rem var(--mono);background:rgb(255 255 255/.75);color:var(--brown);border:1px solid #fff}
.rw .rk.r1{background:linear-gradient(135deg,#fff6dc,#f0c870);color:#4a2c10}.rw .rk.r2{background:linear-gradient(135deg,#fff,#c9d6d6);color:#1d3b39}.rw .rk.r3{background:linear-gradient(135deg,#e7b98d,#a8693a);color:#fff}
.rw .who{min-width:0}.rw .who b{display:block;overflow-wrap:anywhere;line-height:1.25}.rw .who small{color:var(--muted)}
.rw .sc{text-align:right}.rw .sc b{display:block;font:800 1.25rem var(--mono);color:#000}.rw .sc small{color:var(--muted);font-family:var(--mono)}
.rw.mine{border:2px solid var(--brown);background:linear-gradient(135deg,rgb(255 238 209/.95),rgb(255 255 255/.5))}
.rw .per{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.sj{font-size:.74rem;padding:2px 9px;border-radius:9px;border:1px solid rgb(255 255 255/.9);background:rgb(255 255 255/.6);color:var(--muted);white-space:nowrap}.sj b{color:#000;font-family:var(--mono);margin-left:4px}.sj.low b{color:var(--low)}
.mv{font:700 .72rem var(--mono);margin-left:6px}.mv.up{color:var(--good)}.mv.dn{color:var(--low)}
.tag{display:inline-block;font-size:.7rem;font-weight:700;color:var(--cream);background:var(--brown);border-radius:7px;padding:0 8px;margin-left:6px;vertical-align:middle}
.sec{margin:26px 0 8px;font-size:1rem;color:var(--brown)}
.msg{text-align:center;padding:40px 20px}.msg h2{margin-bottom:6px}
.lg{width:min(390px,100%);margin:10vh auto 0;text-align:center;padding:28px}.lg img{width:80px;height:80px;object-fit:contain;filter:drop-shadow(0 4px 8px rgb(0 60 56/.35))}.lg label{text-align:left}
.stamp{margin-top:18px;text-align:center;font-size:.78rem;color:var(--brown);font-weight:600}
@media(max-width:560px){.podium{gap:8px}.pod{padding:16px 6px 12px}.pod .tot{font-size:1.25rem}.p1 .tot{font-size:1.6rem}.pod .nm{font-size:.85rem}.rw{grid-template-columns:38px minmax(0,1fr) auto;padding:9px 10px}}

.rw.lowrow{border:2px solid var(--low);background:linear-gradient(135deg,rgb(255 205 200/.95),rgb(255 255 255/.4))}
.rw.lowrow .rk{background:var(--low);color:#fff}.tag.red{background:var(--low);color:#fff}
.pod.lowrow{border:2px solid var(--low)}

/* motto lembaga */
.motto{margin-top:28px;display:flex;justify-content:center}
.motto-in{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 14px;padding:12px 22px;border-radius:999px;border:1px solid rgb(255 255 255/.9);
  background:linear-gradient(180deg,rgb(255 255 255/.7),rgb(255 255 255/.25));backdrop-filter:blur(var(--blur)) saturate(1.8);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.8);
  box-shadow:inset 0 1.5px 0 #fff,inset 0 -10px 16px -12px rgb(32 197 186/.5),0 14px 30px -14px rgb(0 70 66/.6)}
.mt{display:inline-flex;align-items:center;gap:8px;font-weight:800;letter-spacing:.04em;color:var(--brown);white-space:nowrap}
.mt svg{width:20px;height:20px;fill:none;stroke:var(--brown);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.motto .dot{width:5px;height:5px;border-radius:50%;background:var(--brown);opacity:.45}
@media(max-width:560px){.motto-in{border-radius:24px;padding:12px 16px}.motto .dot{display:none}.mt{font-size:.9rem}}
.stamp{display:table;margin:18px auto 0;padding:4px 16px;border-radius:99px;background:rgb(255 255 255/.55);border:1px solid rgb(255 255 255/.85);backdrop-filter:blur(10px)}