@font-face{font-family:'Wondra';src:url('fonts/Wondra.otf') format('opentype');font-display:swap}
@font-face{font-family:'Neulis Neue';src:url('fonts/NeulisNeue-Light.otf') format('opentype');font-weight:300;font-display:swap}
@font-face{font-family:'Neulis Neue';src:url('fonts/NeulisNeue-Regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'Neulis Neue';src:url('fonts/NeulisNeue-Medium.otf') format('opentype');font-weight:500;font-display:swap}
@font-face{font-family:'Neulis Neue';src:url('fonts/NeulisNeue-Bold.otf') format('opentype');font-weight:700;font-display:swap}

:root{color-scheme:light;--accent:#ff6f00;--accent-2:#ffa726;--ok:#16a34a;--warn:#d99a00;--bad:#dc2626;
  --text:#1b1d2a;--muted:#5f6478;--bg-a:#fff1e3;--bg-b:#e6ecff;--bg-c:#ffe0ec;
  --glass:rgba(255,255,255,.55);--glass-strong:rgba(255,255,255,.78);--glass-b:rgba(255,255,255,.75);
  --field:rgba(255,255,255,.7);--line:rgba(30,35,60,.12);--shadow:0 10px 40px rgba(60,50,120,.14);--cell:rgba(30,35,60,.12)}
:root[data-theme=dark]{color-scheme:dark;--text:#eef0fa;--muted:#a3a9c4;--bg-a:#1c1030;--bg-b:#0a1a33;--bg-c:#2a0f1c;
  --glass:rgba(28,32,56,.5);--glass-strong:rgba(28,32,56,.78);--glass-b:rgba(255,255,255,.12);
  --field:rgba(10,14,30,.5);--line:rgba(255,255,255,.12);--shadow:0 10px 40px rgba(0,0,0,.45);--cell:rgba(255,255,255,.14);
  --ok:#34d399;--warn:#fbbf24;--bad:#f87171}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;font-family:'Neulis Neue',system-ui,sans-serif;color:var(--text);line-height:1.5;
  background:linear-gradient(135deg,var(--bg-a),var(--bg-b) 55%,var(--bg-c));background-attachment:fixed;overflow-x:hidden}
body::before,body::after{content:"";position:fixed;z-index:-1;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none}
body::before{width:46vmax;height:46vmax;left:-14vmax;top:-12vmax;background:radial-gradient(circle,var(--accent),transparent 65%)}
body::after{width:40vmax;height:40vmax;right:-12vmax;bottom:-10vmax;background:radial-gradient(circle,#6c7bff,transparent 65%)}
h1,h2,h3,.display{font-family:'Wondra','Neulis Neue',sans-serif;font-weight:400;letter-spacing:.2px;margin:0}
a{color:inherit}
.container{width:min(1180px,100%);margin:0 auto;padding:14px 14px 70px}
.glass{background:var(--glass);backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);
  border:1px solid var(--glass-b);border-radius:22px;box-shadow:var(--shadow)}
.pad{padding:18px}.pad-s{padding:12px 14px}
.stack>*+*{margin-top:14px}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.between{justify-content:space-between}.grow{flex:1}
.muted{color:var(--muted)}.small{font-size:.85rem}.tiny{font-size:.75rem}.center{text-align:center}.bold{font-weight:700}.hide{display:none!important}
.grid{display:grid;gap:12px}.g2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.g3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.g4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
/* topbar */
.topbar{position:sticky;top:10px;z-index:30;margin:10px auto 16px;width:min(1180px,calc(100% - 20px));padding:10px 14px;display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.brand img{width:38px;height:38px;border-radius:10px}.brand b{font-family:'Wondra',sans-serif;font-weight:400;font-size:1.15rem;white-space:nowrap}
.brand small{display:block;color:var(--muted);font-size:.72rem;margin-top:-3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.nav a{padding:7px 12px;border-radius:12px;text-decoration:none;font-size:.88rem;color:var(--muted)}
.nav a:hover,.nav a.on{background:var(--field);color:var(--text)}
.logo-l{display:none}:root[data-theme=dark] .logo-l{display:block}:root[data-theme=dark] .logo-d{display:none}
@media(max-width:720px){.brand small{display:none}.nav a{padding:6px 9px;font-size:.8rem}.topbar{flex-wrap:wrap}}
/* controls */
.btn{font:inherit;font-weight:500;border:1px solid var(--glass-b);background:var(--glass-strong);color:var(--text);padding:10px 16px;border-radius:14px;cursor:pointer;
  display:inline-flex;gap:8px;align-items:center;justify-content:center;transition:.18s;text-decoration:none}
.btn:hover{transform:translateY(-1px);border-color:var(--accent)}.btn:active{transform:none}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border:0;box-shadow:0 8px 22px rgba(255,111,0,.35)}
.btn.danger{color:var(--bad)}.btn.sm{padding:6px 11px;font-size:.84rem;border-radius:11px}.btn.icon{padding:8px 11px}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
input,select,textarea{font:inherit;color:var(--text);background:var(--field);border:1px solid var(--line);border-radius:13px;padding:10px 13px;width:100%;outline:none;transition:.15s}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,111,0,.18)}
select option{background:#fff;color:#111}:root[data-theme=dark] select option{background:#161a30;color:#eee}
label.f{display:block;font-size:.82rem;color:var(--muted);margin:0 0 5px 3px}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);padding:0}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font:inherit;font-size:.88rem;padding:7px 14px;border-radius:99px;border:1px solid var(--line);background:var(--field);color:var(--text);cursor:pointer;transition:.15s}
.chip:hover{border-color:var(--accent)}.chip.on{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border-color:transparent}
.seg{display:flex;background:var(--field);border:1px solid var(--line);border-radius:15px;padding:4px;gap:4px}
.seg button{flex:1;font:inherit;font-size:.9rem;border:0;background:transparent;color:var(--muted);padding:9px 8px;border-radius:11px;cursor:pointer}
.seg button.on{background:var(--glass-strong);color:var(--text);box-shadow:0 2px 10px rgba(0,0,0,.15);font-weight:700}
.seg button.on.s-lapor{color:var(--ok)}.seg button.on.s-ulang{color:var(--warn)}
/* cards & stats */
.stat{padding:14px 16px}.stat .v{font-family:'Wondra',sans-serif;font-size:1.9rem;line-height:1.1}.stat .l{color:var(--muted);font-size:.8rem}
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;font-size:.75rem;background:var(--field);border:1px solid var(--line)}
.badge.ok{color:var(--ok)}.badge.warn{color:var(--warn)}.badge.bad{color:var(--bad)}.badge.acc{color:var(--accent)}
.bar{display:flex;height:10px;border-radius:99px;overflow:hidden;background:var(--cell)}.bar i{display:block;height:100%}
.bar .l{background:var(--ok)}.bar .u{background:var(--warn)}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--cell)}.dot.on{background:var(--ok)}
.rank{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--field);font-weight:700;font-size:.85rem;flex:none}
.rank.r1{background:linear-gradient(135deg,#ffd54a,#ff9800);color:#fff}.rank.r2{background:linear-gradient(135deg,#d7dde8,#9aa5b8);color:#fff}.rank.r3{background:linear-gradient(135deg,#e2a77a,#b46a37);color:#fff}
.item{display:flex;gap:12px;align-items:center;padding:11px 14px;border-radius:16px;cursor:pointer;transition:.15s}.item:hover{background:var(--field)}
.item .nm{font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}.tabs .chip{white-space:nowrap}
.win{padding:14px 16px;position:relative;overflow:hidden}.win .t{font-size:.76rem;color:var(--muted)}.win .n{font-weight:700;font-size:1.05rem;margin:2px 0}
.win::after{content:"🏆";position:absolute;right:12px;top:8px;font-size:1.5rem;opacity:.8}
/* juz grid */
.cells{display:flex;flex-wrap:wrap;gap:3px}.cell{width:14px;height:14px;border-radius:4px;background:var(--cell)}
.cell.l{background:var(--ok)}.cell.u{background:var(--warn)}
.cells.big .cell{width:auto;height:auto;padding:6px 9px;font-size:.78rem;border-radius:9px;color:var(--text)}
.cells.big .cell.l,.cells.big .cell.u{color:#fff}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.82rem;color:var(--muted)}.legend i{display:inline-block;width:12px;height:12px;border-radius:4px;vertical-align:-1px;margin-right:5px;background:var(--cell)}
.legend i.l{background:var(--ok)}.legend i.u{background:var(--warn)}
.sp{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:7px}
.sp button{font:inherit;font-size:.82rem;border:1px solid var(--line);background:var(--field);color:var(--text);border-radius:12px;padding:8px 6px;cursor:pointer;text-align:center;line-height:1.25}
.sp button small{display:block;color:var(--muted);font-size:.68rem}
.sp button.l{border-color:var(--ok)}.sp button.u{border-color:var(--warn)}
.sp button.sel{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border-color:transparent}.sp button.sel small{color:#ffeedd}
/* tables */
.tw{overflow:auto;border-radius:16px;border:1px solid var(--line);max-height:68vh}
table{border-collapse:collapse;width:100%;font-size:.88rem}
th{position:sticky;top:0;background:var(--glass-strong);backdrop-filter:blur(10px);text-align:left;padding:9px 10px;font-weight:700;font-size:.78rem;white-space:nowrap;cursor:pointer;z-index:2}
td{padding:4px 5px;border-top:1px solid var(--line)}
td input,td select{padding:6px 8px;border-radius:9px;min-width:90px;background:transparent;border-color:transparent}
td input:hover,td select:hover{border-color:var(--line)}td input:focus,td select:focus{background:var(--field)}
td.saved input,td.saved select{background:rgba(22,163,74,.2)}td.err input,td.err select{background:rgba(220,38,38,.2)}
tr.add td{background:rgba(255,111,0,.08)}
/* modal / toast */
.ov{position:fixed;inset:0;z-index:60;background:rgba(10,12,28,.5);backdrop-filter:blur(6px);display:grid;place-items:center;padding:14px;animation:fi .18s}
.modal{width:min(680px,100%);max-height:90vh;overflow:auto;padding:20px;position:relative}
.modal .x{position:absolute;right:12px;top:12px}
@keyframes fi{from{opacity:0}}
.toasts{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;width:min(440px,calc(100% - 24px))}
.toast{padding:12px 16px;border-radius:16px;animation:up .25s;display:flex;gap:10px;align-items:center;justify-content:space-between}
.toast.err{border-color:var(--bad)}.toast.ok{border-color:var(--ok)}
@keyframes up{from{opacity:0;transform:translateY(10px)}}
.skel{height:64px;border-radius:16px;background:linear-gradient(90deg,var(--cell),transparent,var(--cell));background-size:200% 100%;animation:sk 1.3s infinite}
@keyframes sk{to{background-position:-200% 0}}
.empty{padding:30px;text-align:center;color:var(--muted)}
svg.chart text{fill:var(--muted);font-size:10px;font-family:inherit}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}