:root{--bg-page: #2e2014;--bg-panel: #fdf6e3;--bg-frame-a: #f6e8c8;--bg-frame-b: #ead8a8;--gold: #c9a227;--gold-dark: #8a6d12;--gold-light: #f6d878;--green: #1d7a5c;--green-dark: #0d4a36;--green-light: #2da57e;--blue: #185fa5;--amber: #854f0b;--text-dark: #3a2a1a;--text-mid: #5a4520;--text-soft: #7a6020;--text-onpage: #f6e8c8;--text-onpage-soft: #c9a868;--danger: #a32d2d;--radius: 10px;--radius-sm: 7px;--font: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif}*{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}.app-main{flex:1;display:flex;flex-direction:column}.app-content{flex:1;padding:20px 16px 56px;width:100%;max-width:720px;margin:0 auto}.header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#241a0f;border-bottom:3px solid var(--gold-dark);position:sticky;top:0;z-index:20;gap:8px}.header-left{display:flex;align-items:center;gap:6px;min-width:0}.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-onpage);white-space:nowrap}.header-nav{display:flex;gap:2px;align-items:center}.header-link{display:flex;align-items:center;gap:5px;padding:6px 10px;border-radius:var(--radius-sm);font-size:12px;font-weight:600;color:var(--text-onpage-soft);white-space:nowrap;transition:background .12s,color .12s}.header-link:hover{background:#c9a2271f;color:var(--text-onpage)}.header-link.active{color:#a7e8cf;background:#1d7a5c33}.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-onpage);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:#241a0f;border-top:2px solid var(--gold-dark);padding:6px 0 8px}.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-onpage-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:#241a0f;border-top:3px solid var(--gold-dark);border-radius:20px 20px 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:#c9a22714;border:1px solid var(--gold-dark);color:var(--text-onpage-soft);font-size:13px;font-weight:600;transition:background .12s,color .12s}.tool-drawer-item.active{background:#1d7a5c40;color:#a7e8cf;border-color:var(--green)}.tool-drawer-item.locked{color:#6b5a3a}.sidebar{width:218px;flex:0 0 218px;background:#241a0f;background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 2px,transparent 2px 24px);border-right:3px solid var(--gold-dark);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;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-onpage)}.sb-sub{font-size:9px;color:var(--text-onpage-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:2px;background:var(--gold-dark);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-onpage-soft);font-size:13px;font-weight:600;width:100%;text-align:left;transition:background .12s,color .12s}.sb-item:hover{background:#c9a2271f;color:var(--text-onpage)}.sb-item.active{background:#1d7a5c40;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:2px solid var(--gold-dark);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-onpage);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-onpage-soft);font-weight:700;padding:6px 0 0;width:100%;text-align:left}.btn-logout:hover{color:var(--text-onpage)}.frame{border:3px solid var(--gold);border-radius:var(--radius);background:linear-gradient(160deg,var(--bg-frame-a),var(--bg-frame-b));position:relative;overflow:hidden}.frame:before,.frame:after{content:"";position:absolute;width:20px;height:20px;border:3px solid var(--gold-dark);z-index:2}.frame:before{top:-3px;left:-3px;border-right:none;border-bottom:none}.frame:after{bottom:-3px;right:-3px;border-left:none;border-top:none}.frame.admin{background:linear-gradient(160deg,#dce8df,#c4dac9);border-color:var(--green)}.frame.admin:before,.frame.admin:after{border-color:var(--green-dark)}.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:2px solid var(--green-dark);padding:10px 16px;border-radius:8px;font-weight:800;font-size:14px;transition:background .12s}.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:transparent;border:2px solid var(--gold-dark);color:var(--text-soft);padding:8px 13px;border-radius:8px;font-weight:600;font-size:13px;transition:border-color .12s,color .12s}.btn-ghost:hover{color:var(--text-onpage)}.btn-ghost-gold{display:inline-flex;align-items:center;gap:6px;background:#c9a2271f;border:2px solid var(--gold);color:var(--gold-light);padding:8px 13px;border-radius:8px;font-weight:700;font-size:13px;transition:background .12s,color .12s}.btn-ghost-gold:hover{background:#c9a22738;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:2px solid var(--gold);padding:11px;border-radius:8px;font-weight:800;font-size:14px}.btn-google:hover{background:#fff}.btn-google:disabled{opacity:.45;cursor:not-allowed}.eyebrow{color:var(--gold-light);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:3px solid var(--gold);color:#fff;display:grid;place-items:center;font-size:19px;font-weight:800}.p-medallion:after{content:"";position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;border:1px dashed var(--gold);border-radius:50%}.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:10px;background:var(--bg-frame-b);border:2px solid var(--gold-dark);border-radius:7px;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:3px solid var(--gold-dark);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:2px solid var(--gold);border-radius:8px;padding:8px 9px;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:12px;background:var(--bg-panel);border:2px solid var(--gold);border-radius:9px;padding:12px 14px;cursor:pointer;transition:transform .12s,box-shadow .12s}.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:38px;height:38px;border-radius:9px;flex:0 0 38px;display:grid;place-items:center;font-size:18px;border:2px solid currentColor;background:#fff}.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:2px solid var(--gold-dark);border-radius:8px;padding:10px 12px;z-index:20;pointer-events:none;box-shadow:0 4px 14px #00000040}.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:3px 3px 0 0;background:var(--bg-frame-b);border:1.5px solid var(--gold-dark)}.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:3px 9px;border:2px 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:2px solid var(--gold);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:34px;height:34px;border-radius:9px;flex:0 0 34px;display:grid;place-items:center;font-size:16px;border:2px solid currentColor;background:#ffffff80}.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:11px 12px;border:2px solid var(--gold);border-radius:7px;background:var(--bg-panel);font-size:14px;color:var(--text-dark);margin-bottom:10px}.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 80px}.p-stats{grid-template-columns:repeat(3,1fr)}}@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:#1d7a5c33;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)}