:root{--bg-page: #eef3fb;--bg-panel: #ffffff;--bg-frame-a: #ffffff;--bg-frame-b: #e4edfa;--gold: #b9d0f0;--gold-dark: #7ba3d8;--gold-light: #4a89dc;--green: #1b56b0;--green-dark: #123c80;--green-light: #2f74d6;--orange: #f37021;--orange-dark: #d85a12;--orange-light: #ff8a45;--blue: #1b56b0;--amber: #d85a12;--text-dark: #14294d;--text-mid: #2c4468;--text-soft: #5b7196;--text-onpage: #14294d;--text-onpage-soft: #5b7196;--text-onblue: #eaf2fe;--text-onblue-soft: #a9c4ec;--danger: #d64545;--radius: 16px;--radius-sm: 10px;--hairline: #dfe9f7;--hairline-str: #c9dbf1;--shadow-sm: 0 1px 2px rgba(20,41,77,.05), 0 1px 3px rgba(20,41,77,.06);--shadow-md: 0 2px 6px rgba(20,41,77,.06), 0 8px 20px rgba(20,41,77,.07);--shadow-lift: 0 4px 10px rgba(20,41,77,.08), 0 14px 30px rgba(20,41,77,.1);--font: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif}.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fffffff0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--hairline);padding:6px 2px calc(8px + env(safe-area-inset-bottom))}.tabbar-inner{display:flex;justify-content:space-around;align-items:center;max-width:720px;margin:0 auto}.tab-item{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:56px;min-height:48px;padding:4px 6px;border:none;background:none;font:600 9.5px var(--font);color:var(--text-soft);text-decoration:none;cursor:pointer}.tab-item.active{color:var(--green);font-weight:800}@media (min-width:700px){.tabbar{display:none}}.streak-chip{display:inline-flex;align-items:center;gap:5px;flex:none;background:#fff2e8;color:var(--orange-dark);font:800 11.5px var(--font);padding:6px 10px;border-radius:999px}.header-icon-btn{width:32px;height:32px;flex:none;border-radius:9px;display:grid;place-items:center;color:var(--text-onblue-soft);border:1px solid rgba(255,255,255,.22);background:#ffffff0f;text-decoration:none}.avatar-chip{position:relative;width:32px;height:32px;flex:none;border-radius:50%;background:var(--green-light);color:#fff;display:grid;place-items:center;font:800 13px var(--font);text-decoration:none}.avatar-chip .role-dot{position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:var(--orange);border:1.5px solid #fff}.sec-head{display:flex;align-items:center;gap:8px;margin:22px 0 10px}.sec-head span{font:800 11.5px var(--font);letter-spacing:.05em;text-transform:uppercase;color:var(--text-mid)}.sec-head i{flex:1;height:1px;background:var(--hairline-str)}.search-field{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--hairline);border-radius:12px;padding:10px 13px;box-shadow:var(--shadow-sm);margin-bottom:14px;color:var(--text-soft)}.search-field input{flex:1;min-width:0;border:none;outline:none;background:none;font:14px var(--font);color:var(--text-dark)}.search-field button{border:none;background:none;color:var(--text-soft);cursor:pointer;padding:2px}.tool-list{display:flex;flex-direction:column;gap:9px}.tool-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border:1px solid var(--hairline);border-radius:14px;padding:13px 14px;box-shadow:var(--shadow-sm);cursor:pointer;min-height:48px}.tool-row:hover{box-shadow:var(--shadow-md)}.tool-row.locked{opacity:.72}.tool-row-icon{width:40px;height:40px;flex:0 0 40px;border-radius:12px;display:grid;place-items:center}.tool-row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.tool-row-title{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font:800 14px var(--font);color:var(--text-dark)}.tool-row-sub{font:11.5px/1.5 var(--font);color:var(--text-soft);text-wrap:pretty}.tool-badge{display:inline-flex;align-items:center;gap:4px;background:#fff2e8;color:var(--orange-dark);font:800 9.5px var(--font);padding:3px 7px;border-radius:999px;letter-spacing:.03em}.tool-row-arrow{color:var(--gold-dark);flex:none}.sheet-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#14294d73;z-index:50}.sheet{position:fixed;left:0;right:0;bottom:0;z-index:51;background:#fff;border-radius:20px 20px 0 0;padding:10px 18px calc(20px + env(safe-area-inset-bottom));max-width:720px;margin:0 auto;box-shadow:var(--shadow-lift)}.sheet-handle{width:40px;height:4px;border-radius:999px;background:var(--hairline-str);margin:0 auto 14px}.sheet-title{font:800 16px var(--font);color:var(--text-dark);margin-bottom:8px}.sheet-body{font:13px/1.65 var(--font);color:var(--text-soft);margin:0 0 10px;text-wrap:pretty}.sheet-actions{display:flex;flex-direction:column;gap:8px;margin-top:14px}.sheet-actions .block{width:100%;justify-content:center;text-decoration:none}.xp-card{padding:16px}.xp-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}.xp-level{font:700 11px var(--font);color:var(--text-soft);letter-spacing:.03em}.xp-num{font:800 22px var(--font);color:var(--text-dark);margin-top:2px}.streak-badge{display:inline-flex;align-items:center;gap:6px;flex:none;background:#fff2e8;color:var(--orange-dark);font:800 12px var(--font);padding:7px 12px;border-radius:999px}.xp-bar{height:9px;background:var(--bg-frame-b);border-radius:999px;overflow:hidden}.xp-bar>div{height:100%;background:linear-gradient(90deg,var(--green),var(--green-light))}.xp-foot{font:11.5px var(--font);color:var(--text-soft);margin-top:7px}.misi-list{display:flex;flex-direction:column;gap:9px}.misi-row{padding:13px 14px}.misi-top{display:flex;align-items:center;gap:11px;min-width:0}.misi-ic{width:32px;height:32px;flex:0 0 32px;border-radius:10px;display:grid;place-items:center;background:#fff2e8;color:var(--orange-dark)}.misi-ic.done{background:#e6f4ee;color:#168a5a}.misi-title{font:800 13px var(--font);color:var(--text-dark)}.misi-sub{font:11px var(--font);color:var(--text-soft);margin-top:2px}.misi-btn{flex:none;border:none;border-radius:999px;padding:7px 13px;min-height:34px;font:800 11px var(--font);background:var(--bg-frame-b);color:var(--text-soft)}.misi-btn.claim{background:var(--orange);color:#fff;cursor:pointer}.misi-btn.done{background:#e6f4ee;color:#168a5a}.misi-bar{height:6px;background:var(--bg-frame-b);border-radius:999px;overflow:hidden;margin-top:10px}.misi-bar>div{height:100%}.board{padding:6px 14px}.board-row{display:flex;align-items:center;gap:11px;padding:9px 0;min-width:0;border-top:1px solid var(--hairline)}.board-row:first-child{border-top:none}.board-row.me{font-weight:800}.board-rank{width:22px;text-align:center;font:800 12.5px var(--font);color:var(--text-soft)}.board-ini{width:28px;height:28px;flex:0 0 28px;border-radius:50%;background:var(--bg-frame-b);color:var(--green);display:grid;place-items:center;font:800 11px var(--font)}.board-name{flex:1;min-width:0;font:13px var(--font);color:var(--text-dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.board-val{flex:none;font:800 12.5px var(--font);color:var(--green)}.tier-ladder{display:flex;flex-direction:column;gap:9px}.tier-step{padding:14px;opacity:.72}.tier-step.on{opacity:1}.tier-head{display:flex;align-items:center;gap:10px;margin-bottom:9px}.tier-medal{width:28px;height:28px;flex:none;border-radius:50%;background:var(--bg-frame-b);color:var(--green);display:grid;place-items:center;font:800 12px var(--font)}.tier-step.on .tier-medal{background:var(--green);color:#fff}.tier-label{flex:1;min-width:0;font:800 13px var(--font);color:var(--text-dark)}.tier-state{display:inline-flex;align-items:center;gap:4px;font:800 10px var(--font);color:var(--text-soft);background:var(--bg-frame-b);padding:4px 9px;border-radius:999px}.tier-state.on{background:#e6f4ee;color:#168a5a}.tier-perks{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}.tier-perks li{font:12.5px/1.5 var(--font);color:var(--text-mid)}.fineprint{display:flex;align-items:center;gap:6px;font:11.5px/1.6 var(--font);color:var(--text-soft);margin:14px 0 0}.perf-grid-wrap{display:flex;flex-direction:column;gap:12px;min-width:0}.perf-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}.perf-title{font:800 18px var(--font);color:var(--text-dark)}.perf-sub{font:12.5px var(--font);color:var(--text-soft);margin-top:3px}.perf-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.perf-periods{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff;border:1px solid var(--hairline);border-radius:14px;padding:11px 14px;box-shadow:var(--shadow-sm)}.perf-plabel{font:800 10px var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--text-mid);flex:none}.perf-pills{display:flex;gap:5px;flex-wrap:wrap;min-width:0}.perf-pill{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer;border:1px solid var(--gold);background:#fff;color:var(--text-mid);border-radius:999px;padding:7px 13px;min-height:36px;font:700 12px var(--font)}.perf-pill.on{background:var(--green);border-color:var(--green);color:#fff;font-weight:800}.perf-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--gold-dark);flex:none}.perf-pill .dot.lock{background:#9aa5b1}.perf-pill.on .dot{background:#fffc}.perf-hint{margin-left:auto;font:11.5px var(--font);color:var(--text-soft)}.perf-tabs{display:flex;gap:6px;border-bottom:1px solid var(--hairline-str)}.perf-tab{border:none;background:none;cursor:pointer;padding:10px 16px 11px;font:800 13px var(--font);color:var(--text-soft);border-bottom:3px solid transparent}.perf-tab.on{color:var(--green);border-bottom-color:var(--green)}.perf-banner{display:flex;align-items:flex-start;gap:11px;border-radius:14px;padding:13px 15px;border:1px solid}.perf-banner .pb-ic{width:26px;height:26px;flex:0 0 26px;border-radius:50%;display:grid;place-items:center}.perf-banner .pb-title{font:800 12.5px var(--font)}.perf-banner .pb-text{font:11.5px/1.6 var(--font);color:var(--text-mid);margin-top:3px;text-wrap:pretty}.perf-banner.biru{background:#f2f7fe;border-color:#b9d0f0}.perf-banner.biru .pb-ic{background:#e7f0fb;color:var(--green)}.perf-banner.biru .pb-title{color:var(--green)}.perf-banner.oranye{background:#fff8f3;border-color:#ffd9c0}.perf-banner.oranye .pb-ic{background:#fff2e8;color:var(--orange-dark)}.perf-banner.oranye .pb-title{color:var(--orange-dark)}.perf-banner.kuning{background:#fdf6e6;border-color:#f0dda8}.perf-banner.kuning .pb-ic{background:#fdf0c8;color:#8a6a00}.perf-banner.kuning .pb-title{color:#7a5a00}.perf-banner.abu{background:#f6f8fc;border-color:#dbe3ee}.perf-banner.abu .pb-ic{background:#eef1f5;color:#6b7a90}.perf-banner.abu .pb-title{color:#3d4d63}.perf-paste{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#fff;border:1px solid var(--hairline);border-radius:14px;padding:12px 15px;box-shadow:var(--shadow-sm)}.perf-paste .pp-ic{width:32px;height:32px;flex:0 0 32px;border-radius:10px;background:var(--bg-frame-b);color:var(--green);display:grid;place-items:center;font:800 11px var(--font)}.perf-paste .pp-title{font:800 12.5px var(--font);color:var(--text-dark)}.perf-paste .pp-sub{font:11.5px/1.55 var(--font);color:var(--text-soft);margin-top:2px;text-wrap:pretty}.pp-input{flex:none;width:180px;border:1px dashed var(--gold-dark);border-radius:9px;padding:9px 11px;font:12px var(--font);color:var(--text-dark);background:#fbfdff;outline:none}.pp-input:focus{border-color:var(--green);background:#f2f7fe}.perf-table-card{background:#fff;border:1px solid var(--hairline);border-radius:14px;box-shadow:var(--shadow-sm);overflow:hidden;min-width:0}.perf-table{width:100%;border-collapse:collapse;font:12px var(--font);min-width:900px}.perf-table th{text-align:right;padding:10px 12px;white-space:nowrap;background:var(--bg-page);font:800 10px var(--font);letter-spacing:.05em;text-transform:uppercase;color:var(--text-mid)}.perf-table th.sticky-col{text-align:left;min-width:180px}.perf-table th.sticky-col,.perf-table td.sticky-col{position:sticky;left:0;z-index:1}.perf-table th.sticky-col{background:var(--bg-page)}.perf-table td{padding:7px 8px;text-align:right;border-top:1px solid var(--hairline)}.perf-table td.sticky-col{text-align:left;min-width:180px;background:#fff;display:table-cell}.perf-table td.sticky-col .pc-ini{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--bg-frame-b);color:var(--green);font:800 10px var(--font);margin-right:9px;vertical-align:middle}.perf-table td.sticky-col .pc-name{font:700 12px var(--font);color:var(--text-dark);vertical-align:middle}.perf-table tr.r-edit td,.perf-table tr.r-edit td.sticky-col{background:#fbfdff}.perf-table tr.r-empty td,.perf-table tr.r-empty td.sticky-col{background:#fffaf6}.perf-table tr.r-lock td,.perf-table tr.r-lock td.sticky-col{background:#fcfdfe}.pc-cell{width:100%;min-width:74px;text-align:right;border:1px solid var(--hairline);border-radius:7px;padding:7px 9px;font:700 12px var(--font);color:var(--text-dark);background:#fff;outline:none}.pc-cell:focus{border-color:var(--green);background:#f2f7fe}.pc-cell.kosong{background:#fff8f3;border-color:#ffd9c0}.pc-cell[readonly]{background:#f6f8fc;border-color:#f6f8fc;color:#6b7a90}.pc-st{font:800 10px var(--font);padding:4px 9px;border-radius:999px;white-space:nowrap}.pc-st.saved{background:#e6f4ee;color:#168a5a}.pc-st.edit{background:#e7f0fb;color:var(--green)}.pc-st.empty{background:#fff2e8;color:var(--orange-dark)}.pc-st.lock{background:#eef1f5;color:#6b7a90}.perf-foot{display:flex;align-items:center;gap:14px;padding:11px 15px;border-top:1px solid var(--hairline);flex-wrap:wrap;font:11.5px var(--font);color:var(--text-soft)}.perf-foot .legend{margin-left:auto;display:flex;gap:14px;flex-wrap:wrap;font:700 11px var(--font)}.perf-foot .l-empty{color:var(--orange-dark)}.perf-foot .l-edit{color:var(--green)}.perf-foot .l-saved{color:#168a5a}.confirm-card{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:51;width:min(440px,calc(100vw - 32px));background:var(--green-dark);color:var(--text-onblue);border-radius:18px;padding:18px 20px;box-shadow:var(--shadow-lift)}.confirm-card .cc-title{font:800 14px var(--font);color:#fff}.confirm-card .cc-body{font:12.5px/1.65 var(--font);color:#cddffa;margin-top:7px;text-wrap:pretty}.confirm-card .cc-actions{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}.spin{animation:spin 1s linear infinite}@media (max-width:699px){.header-nav{display:none}}.sb-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}.sb-scroll::-webkit-scrollbar{width:6px}.sb-scroll::-webkit-scrollbar-thumb{background:#ffffff38;border-radius:999px}.sb-scroll::-webkit-scrollbar-thumb:hover{background:#ffffff57}.sb-scroll::-webkit-scrollbar-track{background:transparent}.sb-scroll .sb-nav{flex:none}.sb-toggle{width:100%;cursor:pointer;border:none;background:none;font-family:inherit;text-align:left}.sb-section.sb-toggle:after{display:none}.sb-toggle .sb-rule{flex:1;height:1px;background:#ffffff24;border-radius:2px}.sb-toggle:hover{color:var(--text-onblue)}.sb-toggle:hover .sb-rule{background:#ffffff47}.sb-toggle .sb-chev{flex:none;transition:transform .18s ease;opacity:.8}.sb-toggle.buka .sb-chev{transform:rotate(180deg)}.sb-count{flex:none;background:#ffffff24;color:var(--text-onblue);font-size:9.5px;font-weight:800;padding:2px 7px;border-radius:999px;letter-spacing:0}.sb-here{flex:none;width:6px;height:6px;border-radius:50%;background:var(--orange)}.er-mode-label{font:800 10px var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--text-mid);margin-bottom:7px}.er-modes{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:16px}.er-mode{display:flex;flex-direction:column;gap:2px;align-items:flex-start;cursor:pointer;border:1px solid var(--hairline-str);background:#fff;border-radius:12px;padding:11px 13px;min-height:48px;text-align:left}.er-mode b{font:800 13.5px var(--font);color:var(--text-dark)}.er-mode span{font:11px var(--font);color:var(--text-soft)}.er-mode.on{border-color:var(--green);background:#f2f7fe;box-shadow:var(--shadow-sm)}.er-mode.on b{color:var(--green)}.er-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:9px}.er-label{font:700 11px var(--font);color:var(--text-soft)}.er-hint{font:10.5px/1.45 var(--font);color:var(--text-soft);margin-bottom:10px;text-wrap:pretty}.er-hasil{padding:20px 18px;margin-bottom:12px;border-width:1.5px}.er-angka{font:800 44px/1 var(--font);letter-spacing:-.02em}.er-angka span{font-size:22px;margin-left:3px}.er-judul{font:700 13.5px var(--font);color:var(--text-mid);margin-top:7px}.er-rumus{font:11.5px var(--font);color:var(--text-soft);margin-top:5px}.er-catatan{display:flex;gap:8px;align-items:flex-start;margin-top:12px;background:var(--bg-frame-b);border-radius:10px;padding:10px 12px;font:11.5px/1.6 var(--font);color:var(--text-mid);text-wrap:pretty}.er-catatan svg{flex:none;margin-top:2px;color:var(--green)}.er-skala{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px}.er-tick{font:700 11px var(--font);white-space:nowrap}.er-periode-info{font:11.5px/1.55 var(--font);color:var(--text-mid);background:var(--bg-frame-b);border-radius:9px;padding:8px 11px;margin:2px 0 4px;text-wrap:pretty}.er-galat{display:flex;align-items:center;gap:7px;font:700 11.5px var(--font);color:var(--orange-dark);background:#fff2e8;border:1px solid #ffd9c0;border-radius:9px;padding:8px 11px;margin:2px 0 4px}.er-galat svg{flex:none}.er-dasar{font:11.5px/1.6 var(--font);color:var(--text-mid);margin-top:8px;text-wrap:pretty}.er-panduan{display:flex;flex-direction:column;gap:9px}.er-guide{padding:0;overflow:hidden}.er-guide-head{display:flex;align-items:center;width:100%;cursor:pointer;border:none;background:none;padding:13px 15px;font:800 13px var(--font);color:var(--text-dark);text-align:left}.er-guide-head b{flex:1;min-width:0}.er-guide-chev{flex:none;color:var(--text-soft);transition:transform .18s ease}.er-guide-head.buka .er-guide-chev{transform:rotate(180deg)}.er-steps{margin:0;padding:0 16px 14px 34px;display:flex;flex-direction:column;gap:6px;font:12.5px/1.55 var(--font);color:var(--text-mid)}.er-steps li{text-wrap:pretty}.er-disclaimer{padding:15px 16px;margin-top:12px;background:var(--bg-frame-b);border-color:var(--hairline-str)}.er-disc-head{display:flex;align-items:center;gap:7px;font:800 12.5px var(--font);color:var(--text-dark);margin-bottom:8px}.er-disc-head svg{flex:none;color:var(--green)}.er-disclaimer p{font:12/1.65 var(--font);color:var(--text-mid);margin:0 0 8px;text-wrap:pretty}.er-disclaimer p:last-child{margin-bottom:0}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font);background:var(--bg-page);color:var(--text-onpage);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer;border:none;background:none}input,textarea,select{font-family:inherit}.app-shell{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}.app-main{flex:1;display:flex;flex-direction:column;min-width:0}.app-content{flex:1;padding:20px 16px 56px;width:100%;max-width:720px;margin:0 auto;min-width:0;overflow-x:hidden}.header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#123c80;border-bottom:1px solid rgba(255,255,255,.12);position:sticky;top:0;z-index:20;gap:8px}.header-left{display:flex;align-items:center;gap:6px;min-width:0;flex-shrink:1}.brand-pill{display:flex;align-items:center;gap:7px;white-space:nowrap}.brand-pill .sb-logo{width:28px;height:28px;border-radius:50%;flex:0 0 28px;background:radial-gradient(circle,var(--green),var(--green-dark));border:2px solid var(--gold);display:grid;place-items:center;color:#fff;font-size:13px}.brand-pill .sb-name{font-weight:800;font-size:12px;color:var(--text-onblue);white-space:nowrap}.header-nav{display:flex;gap:6px;align-items:center;min-width:0;overflow-x:auto;scrollbar-width:none}.header-nav::-webkit-scrollbar{display:none}.header-link{display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:var(--radius-sm);font-size:12px;font-weight:600;color:var(--text-onblue);white-space:nowrap;border:1.5px solid rgba(255,255,255,.22);background:#ffffff0f;transition:background .12s,color .12s,border-color .12s}.header-link:hover{background:#ffffff29;border-color:#fff6;color:#fff}.header-link.active{background:#fff;color:var(--green);border-color:#fff;font-weight:800}.header-link-cta{background:var(--orange);color:#fff;font-weight:700;border-color:var(--orange-dark)}.header-link-cta:hover{background:var(--orange-light);color:#fff;border-color:var(--orange-dark)}.header-link-cta.active{background:var(--orange);color:#fff;border-color:var(--orange-dark)}.header-link-cta .cta-label{display:inline}@media (max-width:520px){.header-link-cta .cta-label{display:none}}.header-link svg{flex:0 0 auto}.header-auth{display:flex;align-items:center;gap:6px;flex:0 0 auto}.user-chip{font-size:11px;font-weight:700;color:var(--text-onblue);display:flex;align-items:center;gap:6px}.role-badge{font-size:8px;font-weight:800;text-transform:uppercase;background:var(--gold);color:var(--text-dark);padding:1px 6px;border-radius:10px}.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:20;background:#123c80;border-top:1px solid rgba(255,255,255,.12);padding:6px 0 calc(8px + env(safe-area-inset-bottom))}.bottom-nav-inner{display:flex;justify-content:space-around;align-items:center}.bnav-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 8px;border-radius:8px;color:var(--text-onblue-soft);font-size:10px;font-weight:700;transition:color .12s;min-width:56px}.bnav-item.active{color:#a7e8cf}.bnav-item svg{flex:0 0 auto}.tool-drawer-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;background:#00000080}.tool-drawer{position:fixed;bottom:0;left:0;right:0;z-index:31;background:#123c80;border-top:1px solid rgba(255,255,255,.12);border-radius:22px 22px 0 0;padding:16px 16px 32px;max-height:80vh;overflow-y:auto}.tool-drawer-handle{width:40px;height:4px;background:var(--gold-dark);border-radius:2px;margin:0 auto 16px}.tool-drawer-title{font-size:12px;font-weight:800;color:var(--gold);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}.tool-drawer-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tool-drawer-item{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:9px;background:#ffffff0f;border:1px solid var(--gold-dark);color:var(--text-onblue-soft);font-size:13px;font-weight:600;transition:background .12s,color .12s}.tool-drawer-item.active{background:#2f74d64d;color:#a7e8cf;border-color:var(--green)}.tool-drawer-item.locked{color:#6b5a3a}.sidebar{width:218px;flex:0 0 218px;background:#123c80;background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 2px,transparent 2px 24px);border-right:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;height:100dvh;z-index:10}.sb-brand{display:flex;align-items:center;gap:10px;padding:18px 16px 14px}.sb-logo{width:38px;height:38px;border-radius:50%;flex:0 0 38px;background:radial-gradient(circle,var(--green),var(--green-dark));border:2px solid var(--gold);display:grid;place-items:center;color:#fff;font-size:17px}.sb-name{font-weight:800;font-size:13px;color:var(--text-onblue)}.sb-sub{font-size:9px;color:var(--text-onblue-soft);font-weight:600;letter-spacing:.05em;text-transform:uppercase}.sb-section{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--gold);padding:12px 16px 6px;display:flex;align-items:center;gap:6px}.sb-section:after{content:"";flex:1;height:1px;background:#ffffff24;border-radius:2px}.sb-nav{display:flex;flex-direction:column;gap:2px;padding:0 10px;flex:1}.sb-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:var(--radius-sm);color:var(--text-onblue-soft);font-size:13px;font-weight:600;width:100%;text-align:left;transition:background .12s,color .12s}.sb-item:hover{background:#ffffff1a;color:var(--text-onblue)}.sb-item.active{background:#2f74d64d;color:#a7e8cf;border:1px solid var(--green)}.sb-item.locked{color:#6b5a3a}.sb-item .lock-ic{margin-left:auto;opacity:.6}.sb-dot{width:6px;height:6px;border-radius:50%;flex:0 0 6px}.sb-dot.g{background:var(--green-light)}.sb-dot.b{background:#5a9fd8}.sb-dot.y{background:var(--gold-light)}.sb-footer{padding:14px 16px;border-top:1px solid rgba(255,255,255,.12);margin-top:auto}.sb-user{display:flex;align-items:center;gap:9px}.sb-avatar{width:32px;height:32px;border-radius:50%;flex:0 0 32px;background:radial-gradient(circle,var(--green),var(--green-dark));border:2px solid var(--gold);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800}.sb-uname{font-size:12px;font-weight:700;color:var(--text-onblue);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sb-tier{font-size:9px;font-weight:800;background:var(--gold);color:var(--text-dark);padding:1px 7px;border-radius:10px}.btn-logout{font-size:11px;color:var(--text-onblue-soft);font-weight:700;padding:6px 0 0;width:100%;text-align:left}.btn-logout:hover{color:var(--text-onblue)}.frame{border:1px solid var(--hairline);border-radius:var(--radius);background:var(--bg-panel);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}.frame.admin{background:#f7fbff;border-color:var(--hairline-str)}.ribbon{background:var(--green);color:#fff;text-align:center;padding:8px 0;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;position:relative}.ribbon:before,.ribbon:after{content:"";position:absolute;top:0;width:0;height:0;border-style:solid}.ribbon:before{left:-13px;border-width:0 13px 15px 0;border-color:transparent var(--green-dark) transparent transparent}.ribbon:after{right:-13px;border-width:15px 13px 0 0;border-color:var(--green-dark) transparent transparent transparent}.btn-primary{display:inline-flex;align-items:center;gap:7px;justify-content:center;background:var(--green);color:#fff;border:1px solid var(--green);padding:11px 18px;border-radius:var(--radius-sm);font-weight:700;font-size:14px;box-shadow:var(--shadow-sm);transition:background .15s,box-shadow .15s,transform .1s}.btn-primary:hover{background:var(--green-light)}.btn-primary:disabled{opacity:.45;cursor:not-allowed}.btn-primary.block{width:100%;padding:12px}.btn-ghost{display:inline-flex;align-items:center;gap:6px;background:var(--bg-panel);border:1px solid var(--hairline-str);color:var(--text-soft);padding:9px 14px;border-radius:var(--radius-sm);font-weight:600;font-size:13px;transition:border-color .15s,color .15s,background .15s}.btn-ghost:hover{color:var(--text-onpage)}.btn-ghost-gold{display:inline-flex;align-items:center;gap:6px;background:#1b56b00f;border:1px solid var(--hairline-str);color:var(--green);padding:9px 14px;border-radius:var(--radius-sm);font-weight:700;font-size:13px;transition:background .15s,color .15s}.btn-ghost-gold:hover{background:var(--green);color:#fff}.btn-google{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--bg-panel);color:var(--text-dark);border:1px solid var(--hairline-str);padding:12px;border-radius:var(--radius-sm);font-weight:700;font-size:14px;box-shadow:var(--shadow-sm)}.btn-google:hover{background:#fff}.btn-google:disabled{opacity:.45;cursor:not-allowed}.eyebrow{color:var(--orange);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 6px}.page h1{font-size:22px;font-weight:800;letter-spacing:-.01em;margin:0 0 8px;line-height:1.2;color:var(--text-onpage)}.hero-sub{color:var(--text-onpage-soft);font-size:14px;max-width:100%;margin:0 0 18px;line-height:1.55}.guest-note{margin-top:14px;font-size:13px;color:var(--text-onpage-soft)}.guest-note a{color:var(--gold-light);font-weight:700}.player-frame{padding:14px;margin-bottom:14px}.player-head{display:flex;align-items:center;gap:12px}.p-medallion{width:52px;height:52px;border-radius:50%;flex:0 0 52px;position:relative;background:radial-gradient(circle,var(--green),var(--green-dark));border:none;box-shadow:0 0 0 3px #1b56b01a;color:#fff;display:grid;place-items:center;font-size:19px;font-weight:800}.p-name{font-size:16px;font-weight:800;color:var(--text-dark)}.p-alias{font-size:10px;color:var(--gold-dark);margin:2px 0 7px;font-weight:600}.p-xpbar{height:8px;background:var(--bg-frame-b);border:none;border-radius:6px;overflow:hidden}.p-xpfill{height:100%;background:linear-gradient(90deg,var(--green),var(--green-light))}.p-xptxt{font-size:10px;color:var(--text-mid);margin-top:4px;font-weight:700}.p-tiermedal{width:52px;height:52px;flex:0 0 52px;border-radius:50%;background:radial-gradient(circle,var(--gold-light),var(--gold));border:none;box-shadow:0 0 0 3px #1b56b01a;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 0 3px var(--bg-panel) inset}.p-tiermedal .tl{font-size:7px;font-weight:800;color:var(--text-mid)}.p-tiermedal .tv{font-size:16px;font-weight:800;color:var(--text-dark)}.p-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:12px}.p-stat{background:var(--bg-panel);border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:10px 11px;text-align:center}.p-stat .l{font-size:8px;font-weight:800;color:var(--gold-dark);letter-spacing:.04em;text-transform:uppercase}.p-stat .v{font-size:13px;font-weight:800;color:var(--text-dark);margin-top:2px}.mod-grid{display:grid;grid-template-columns:1fr;gap:9px}.mod-card{position:relative;display:flex;align-items:center;gap:13px;background:var(--bg-panel);border:1px solid var(--hairline);border-radius:var(--radius);padding:15px 16px;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .14s,box-shadow .14s,border-color .14s}.mod-card:hover{transform:translateY(-1px);box-shadow:0 4px 12px #8a6d1240}.mod-card.locked{opacity:.6}.mod-card.span2{grid-column:span 1}.mod-card.komisi{background:linear-gradient(160deg,#fdf0c8,#f6dca0)}.mod-icon{width:40px;height:40px;border-radius:12px;flex:0 0 40px;display:grid;place-items:center;font-size:18px;border:none;background:#1b56b012}.mod-title{font-weight:800;font-size:14px;color:var(--text-dark);display:flex;align-items:center;gap:6px}.mod-sub{font-size:11px;color:var(--text-soft);margin-top:2px}.mod-arrow{margin-left:auto;color:var(--gold);flex:0 0 auto}.hud-tip{display:none;position:absolute;width:220px;background:var(--bg-panel);border:1px solid var(--hairline-str);border-radius:var(--radius-sm);padding:11px 13px;z-index:20;pointer-events:none;box-shadow:var(--shadow-lift)}.hud-tip.show{display:block}.hud-tip-title{font-weight:800;font-size:12px;color:var(--text-dark);margin-bottom:3px}.hud-tip-desc{font-size:11px;color:var(--text-soft);line-height:1.5}.sec-t{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mid);margin:14px 0 8px;display:flex;align-items:center;gap:8px}.sec-t:before,.sec-t:after{content:"";flex:1;height:2px;background:var(--gold);border-radius:2px}.month-card,.feat-card{padding:14px;margin-bottom:12px}.bar-area{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;align-items:end;height:56px;margin-bottom:5px;padding:0 2px}.bar-w{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}.bar{width:70%;border-radius:5px 5px 0 0;background:var(--bg-frame-b);border:none}.bar.hi{background:var(--green);border-color:var(--green-dark)}.bl{font-size:9px;color:var(--text-soft);margin-top:3px;font-weight:700}.chip{font-size:10px;font-weight:700;padding:4px 10px;border:1px solid;border-radius:14px;display:inline-block;margin:2px 3px 0 0}.chip-g{color:var(--green-dark);border-color:var(--green);background:#fff}.chip-y{color:var(--amber);border-color:var(--gold);background:#fff}.tbl-s{overflow-x:auto;margin-top:8px;-webkit-overflow-scrolling:touch}table{width:100%;border-collapse:collapse;font-size:11px}th{color:var(--text-soft);font-weight:800;font-size:9px;letter-spacing:.03em;padding:5px;border-bottom:2px solid var(--gold);text-align:left}td{padding:5px;border-bottom:1px solid var(--bg-frame-b);color:var(--text-dark);font-weight:600}tr:last-child td{border-bottom:none}.tg{color:var(--green-dark);font-weight:800}.ach-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:6px}.ach{background:var(--bg-panel);border:1px solid var(--hairline);border-radius:50%;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.ach-ic{font-size:16px;color:var(--green)}.ach-nm{font-size:7px;font-weight:700;color:var(--text-mid);text-align:center;padding:0 3px}.ach-ct{font-size:9px;color:var(--green-dark);font-weight:800}.feat-row{display:flex;align-items:flex-start;gap:9px;padding:7px 0;border-bottom:1px solid var(--bg-frame-b)}.feat-row:last-child{border-bottom:none}.feat-dot{width:7px;height:7px;border-radius:50%;flex:0 0 7px;margin-top:4px}.feat-name{font-size:12px;font-weight:700;color:var(--text-dark);flex:1}.feat-sub{font-size:11px;color:var(--text-soft)}.feat-time{font-size:10px;color:var(--text-soft);white-space:nowrap}.login-grid{display:grid;grid-template-columns:1fr;gap:14px;max-width:480px;margin:0 auto}.login-cardhead{display:flex;align-items:center;gap:10px;padding:14px 16px 10px}.login-icon{width:36px;height:36px;border-radius:11px;flex:0 0 36px;display:grid;place-items:center;font-size:16px;border:none;background:#1b56b012}.login-cardtitle{font-weight:800;font-size:14px;color:var(--text-dark)}.login-cardsub{font-size:10px;color:var(--text-soft);margin-top:1px}.login-body{padding:0 16px 16px}.login-label{font-size:12px;font-weight:700;color:var(--text-mid);display:block;margin-bottom:5px}.login-input{display:block;width:100%;margin-top:5px;padding:12px 13px;border:1px solid var(--hairline-str);border-radius:var(--radius-sm);background:var(--bg-panel);font-size:14px;color:var(--text-dark);margin-bottom:12px;transition:border-color .15s,box-shadow .15s}.login-input:focus{outline:none;border-color:var(--green-light);box-shadow:0 0 0 3px #2f74d61f}.login-input:focus{outline:none;border-color:var(--green)}.hint-txt{font-size:11px;color:var(--text-soft);margin:10px 0 0;line-height:1.5;text-align:center}.form-err{color:var(--danger);font-size:12px;margin-bottom:10px;font-weight:600}.banner{padding:10px 13px;border-radius:8px;font-size:12px;margin-bottom:12px;border:2px solid}.banner.warn{background:#fdf0c8;color:var(--text-mid);border-color:var(--gold)}.placeholder-card{background:var(--bg-panel);border:2px dashed var(--gold-dark);border-radius:var(--radius);padding:28px 16px;text-align:center;margin-top:14px;color:var(--text-soft);font-size:13px}.info-card{display:flex;gap:12px;align-items:center;justify-content:space-between;background:var(--bg-panel);border:2px solid var(--gold);border-radius:var(--radius);padding:14px;margin-top:14px;flex-wrap:wrap}.route-loading{padding:40px;text-align:center;color:var(--text-onpage-soft)}@media (min-width:700px){.app-shell{flex-direction:row}.app-main{flex-direction:column}.app-content{padding:24px 28px 48px;max-width:960px}.sidebar{display:flex}.bottom-nav,.tool-drawer-overlay,.tool-drawer{display:none!important}.header .brand-pill{display:none}.mod-grid{grid-template-columns:1fr 1fr}.mod-card.span2{grid-column:span 2}.login-grid{grid-template-columns:1fr 1fr;max-width:680px}.page h1{font-size:24px}}@media (max-width:699px){.sidebar{display:none!important}.bottom-nav{display:block}.app-content{padding:16px 14px calc(84px + env(safe-area-inset-bottom))}.p-stats{grid-template-columns:repeat(3,1fr)}.header-nav .header-link.nav-dup{display:none}.header-nav{gap:6px}.header{padding:10px 12px;gap:6px}.header-link{padding:6px 10px}}@media (max-width:400px){.header .brand-pill .sb-name{display:none}.header-link span:not(.cta-label){font-size:11.5px}}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}.spinner{width:20px;height:20px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:spin .7s linear infinite;display:inline-block;vertical-align:middle}.spinner.dark{border-color:#2f74d640;border-top-color:var(--green)}.input-err{border-color:var(--danger)!important}.field-err{color:var(--danger);font-size:11px;margin-top:-6px;margin-bottom:8px;font-weight:600}.result-box{white-space:pre-wrap;font-size:13px;line-height:1.75;color:var(--text-dark);padding:14px;background:var(--bg-panel);border-radius:8px;border:1px solid var(--gold-dark)}.char-count{font-size:10px;color:var(--text-soft);text-align:right;margin-top:-6px;margin-bottom:8px}.char-count.warn{color:var(--danger)}.btn-accent{display:inline-flex;align-items:center;gap:7px;justify-content:center;background:var(--orange);color:#fff;border:2px solid var(--orange-dark);padding:10px 16px;border-radius:8px;font-weight:800;font-size:14px;transition:background .12s}.btn-accent:hover{background:var(--orange-light)}.btn-accent.block{width:100%;padding:12px}.badge-accent{background:var(--orange);color:#fff;font-weight:800;font-size:10px;padding:2px 9px;border-radius:12px;text-transform:uppercase;letter-spacing:.03em}.komisi-hero{display:flex;align-items:center;gap:16px;background:linear-gradient(100deg,var(--orange),var(--orange-dark));border-radius:14px;padding:18px 20px;margin-bottom:18px;text-decoration:none;transition:transform .12s,box-shadow .12s;box-shadow:0 3px 12px #f3702147}.komisi-hero:hover{transform:translateY(-2px);box-shadow:0 6px 18px #f3702161}.komisi-icon{width:52px;height:52px;border-radius:12px;flex:0 0 52px;display:grid;place-items:center;background:#ffffff38;color:#fff}.komisi-title{font-weight:800;font-size:17px;color:#fff;line-height:1.25}.komisi-sub{font-size:12.5px;color:#ffffffeb;margin-top:3px;line-height:1.45}.komisi-cta{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;background:#fff;color:var(--orange-dark);font-weight:800;font-size:13px;padding:9px 16px;border-radius:9px}@media (max-width:560px){.komisi-hero{padding:15px;gap:12px;flex-wrap:wrap}.komisi-icon{width:44px;height:44px;flex:0 0 44px}.komisi-title{font-size:15px}.komisi-cta{width:100%;justify-content:center}}.badge-guest{background:#fff2e8;color:var(--orange-dark);font-weight:800;font-size:10.5px;padding:2px 9px;border-radius:20px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}.badge-member{background:#e7f0fb;color:var(--green);font-weight:800;font-size:10.5px;padding:2px 9px;border-radius:20px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}.artikel{color:var(--text-dark);font-size:14px;line-height:1.75}.artikel h1,.artikel h2,.artikel h3{color:var(--green-dark);font-weight:800;margin:18px 0 8px;line-height:1.3}.artikel h1{font-size:19px}.artikel h2{font-size:17px}.artikel h3{font-size:15px}.artikel h1:first-child,.artikel h2:first-child,.artikel h3:first-child{margin-top:0}.artikel p{margin-bottom:12px}.artikel ul,.artikel ol{margin:0 0 12px 20px}.artikel li{margin-bottom:6px}.artikel strong{color:var(--text-dark);font-weight:800}.artikel a{color:var(--green);font-weight:600}.artikel blockquote{border-left:3px solid var(--orange);padding:8px 14px;margin:12px 0;background:#f370210f;border-radius:0 8px 8px 0;color:var(--text-mid)}.artikel code{background:var(--bg-frame-b);padding:2px 6px;border-radius:5px;font-size:13px}.artikel pre{background:var(--bg-frame-b);padding:12px 14px;border-radius:9px;overflow-x:auto;margin-bottom:12px}.artikel pre code{background:none;padding:0}.artikel img{max-width:100%;border-radius:9px;margin:8px 0}.artikel hr{border:0;border-top:1px solid var(--gold);margin:18px 0}html,body{overflow-x:hidden;max-width:100%}.page{min-width:0}.frame table{width:100%}.frame>table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-sm)}.mod-card,.mod-card>*,.player-head,.player-head>*{min-width:0}.mod-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);border-color:var(--hairline-str)}.btn-primary:hover{box-shadow:var(--shadow-md)}.btn-primary:active,.btn-accent:active{transform:translateY(1px)}.btn-ghost:hover{background:#1b56b00d;border-color:var(--green-light);color:var(--green)}