/* =================================================================
   SYNCORA v3 — tampilan
   Arah desain: "jalur". SYNCORA adalah jalur kedua menuju lomba &
   kuliah, jadi satu motif garis-rute (Terlihat → Dipilih → Dibiayai)
   menjadi elemen paling berani; sisanya tenang dan rapi.
   - huruf: Plus Jakarta Sans (karya desainer Indonesia)
   - satu aksen: oranye SYNCORA #e4461c (sama dengan presentasi)
   - gerak: satu momen masuk per halaman, angka menghitung naik,
     batang & grafik "tumbuh", menu dengan penanda yang meluncur.
     Semua gerak hanya transform/opacity dan mati saat reduced-motion.
   Mobile dulu: menu bawah di ponsel, menu samping di layar lebar.
   ================================================================= */
:root{
  --sun:#e4461c; --sun-hi:#ff6a3d; --sun-600:#c93a14;

  /* tema terang */
  --bg:#f5f5f2; --card:#ffffff; --sunken:#f0efeb; --raise:#fafaf8; --ink:#17171a; --muted:#66666e; --line:#e7e6e1; --line-strong:#d5d3cd;
  --brand:var(--sun); --brand-ink:#ffffff; --brand-soft:#fdede6; --brand-text:#c2410c;
  --ok:#15803d; --ok-soft:#e7f5ec; --warn:#b45309; --warn-soft:#fdf3e2; --bad:#c62828; --bad-soft:#fdecec;
  --shadow-sm:0 1px 2px rgba(23,23,26,.06);
  --shadow:0 1px 2px rgba(23,23,26,.04),0 6px 20px -12px rgba(23,23,26,.10);
  --shadow-hover:0 2px 4px rgba(23,23,26,.05),0 18px 36px -14px rgba(23,23,26,.22);
  --shadow-lg:0 24px 64px -16px rgba(23,23,26,.30);
  --hairline:inset 0 1px 0 rgba(255,255,255,.7);
  /* cahaya lembut di atas halaman & kilau tipis di tepi atas kartu */
  --glow:color-mix(in srgb,var(--sun) 7%,transparent);
  --card-sheen:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 120px);
  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:24px;

  --f-body:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-display:var(--f-body);
  --f-mono:var(--f-body);
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);      /* masuk: cepat lalu melambat */
  --ease-in:cubic-bezier(.4,0,1,1);         /* keluar */
  --spring:cubic-bezier(.34,1.4,.64,1);     /* sedikit memantul untuk tekanan */
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0e0e10; --card:#17171a; --sunken:#1f1f23; --raise:#1b1b1f; --ink:#f4f4f5; --muted:#a3a3ad; --line:#26262b; --line-strong:#38383f;
  --brand-soft:rgba(228,70,28,.15); --brand-text:#ff8a5c;
  --ok:#4ade80; --ok-soft:rgba(74,222,128,.12); --warn:#fbbf24; --warn-soft:rgba(251,191,36,.12); --bad:#f87171; --bad-soft:rgba(248,113,113,.12);
  --shadow-sm:none; --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px -18px rgba(0,0,0,.8);
  --shadow-hover:0 1px 0 rgba(255,255,255,.05) inset,0 20px 40px -18px rgba(0,0,0,.9);
  --shadow-lg:0 24px 64px -12px rgba(0,0,0,.7); --hairline:inset 0 1px 0 rgba(255,255,255,.04);
    --glow:color-mix(in srgb,var(--sun) 10%,transparent); --card-sheen:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 120px);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0e0e10; --card:#17171a; --sunken:#1f1f23; --raise:#1b1b1f; --ink:#f4f4f5; --muted:#a3a3ad; --line:#26262b; --line-strong:#38383f;
    --brand-soft:rgba(228,70,28,.15); --brand-text:#ff8a5c;
    --ok:#4ade80; --ok-soft:rgba(74,222,128,.12); --warn:#fbbf24; --warn-soft:rgba(251,191,36,.12); --bad:#f87171; --bad-soft:rgba(248,113,113,.12);
    --shadow-sm:none; --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px -18px rgba(0,0,0,.8);
    --shadow-hover:0 1px 0 rgba(255,255,255,.05) inset,0 20px 40px -18px rgba(0,0,0,.9);
    --shadow-lg:0 24px 64px -12px rgba(0,0,0,.7); --hairline:inset 0 1px 0 rgba(255,255,255,.04);
    --glow:color-mix(in srgb,var(--sun) 10%,transparent); --card-sheen:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 120px);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:15.5px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;font-feature-settings:"cv11";
  -webkit-tap-highlight-color:transparent;text-rendering:optimizeLegibility}
[hidden]{display:none!important}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.02em;line-height:1.2;text-wrap:balance}
h1,.disp{font-size:clamp(1.75rem,4.4vw,2.45rem);font-weight:800;letter-spacing:-.035em;line-height:1.12}
h2{font-size:1.22rem;letter-spacing:-.025em}
h3{font-size:1.03rem;letter-spacing:-.015em}
p{margin:0;text-wrap:pretty}
a{color:var(--brand-text);text-underline-offset:3px}
small,.muted{color:var(--muted)}
.hl{color:var(--sun)}
h1 .hl,h2 .hl{color:inherit} /* judul satu warna: lebih tenang & profesional */
.mono{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--sun);outline-offset:2px;border-radius:6px}
::selection{background:var(--sun);color:#fff}

/* label kecil di atas judul */
.eyebrow{display:block;font-size:13.5px;font-weight:600;color:var(--muted);margin-bottom:6px}
/* di dalam kartu: label lebih tenang, supaya hanya judul halaman yang menonjol */
.card .eyebrow{font-size:13px;margin-bottom:4px}
.page-head .eyebrow{display:flex;align-items:center;gap:8px;color:var(--brand-text);font-size:13px;letter-spacing:.01em}
.page-head .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 3px var(--brand-soft)}

/* ---------- tombol & form ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:9px 16px;border-radius:10px;
  border:1px solid var(--line-strong);background:var(--card);color:var(--ink);font:600 14.5px var(--f-body);letter-spacing:-.005em;
  cursor:pointer;text-decoration:none;box-shadow:var(--shadow-sm);
  transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),transform .1s var(--ease)}
.btn:hover{border-color:var(--line-strong);background:var(--sunken)}
.btn:not(.primary):not(.ghost){background-image:var(--card-sheen)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg,var(--sun-hi) -60%,var(--sun) 55%);border-color:var(--sun-600);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(201,58,20,.25),0 8px 18px -8px rgba(228,70,28,.55);transition:filter .15s var(--ease),box-shadow .2s var(--ease),transform .1s var(--ease)}
.btn.primary:hover{filter:brightness(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(201,58,20,.25),0 12px 24px -8px rgba(228,70,28,.6)}
.btn.ghost{border-color:transparent;background:transparent;box-shadow:none}
.btn.ghost:hover{background:var(--sunken)}
.btn.danger{color:var(--bad)}
.btn.danger:hover{border-color:var(--bad);background:var(--bad-soft)}
.btn.block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin:14px 0 6px}
input,select,textarea{width:100%;min-height:44px;padding:10px 12px;border-radius:11px;border:1px solid var(--line-strong);box-shadow:var(--shadow-sm);
  background:var(--card);color:var(--ink);font:16px var(--f-body);transition:border-color .15s var(--ease),box-shadow .2s var(--ease),background .15s}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--sun);box-shadow:0 0 0 3px color-mix(in srgb,var(--sun) 28%,transparent);background-color:var(--card)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}
::placeholder{color:var(--muted);opacity:.75}
select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238a8a93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
select:focus{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23e4461c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E")}
select option{background:var(--card);color:var(--ink)}
select option:checked{font-weight:600}
/* dropdown modern (Chrome/Edge baru); browser lama tetap memakai daftar bawaan */
@supports (appearance:base-select){
  select{appearance:base-select;background-image:none;display:flex;align-items:center}
  select::picker-icon{content:"";width:16px;height:16px;flex:none;margin-left:auto;background:currentColor;color:var(--muted);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") center/16px no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") center/16px no-repeat;
    transition:transform .2s var(--ease)}
  select:focus::picker-icon{color:var(--sun)}
  select:open::picker-icon{transform:rotate(180deg)}
  select{padding-right:12px}
  ::picker(select){appearance:base-select;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);
    padding:6px;margin-top:6px;box-shadow:0 12px 32px rgba(0,0,0,.14);max-height:min(320px,60vh);overflow:auto}
  select option{padding:9px 12px;border-radius:8px;font-size:15px;cursor:pointer;background:transparent}
  select option:hover,select option:focus-visible{background:var(--sunken);outline:none}
  select option:checked{background:color-mix(in srgb,var(--sun) 14%,var(--card));color:var(--ink)}
  select option::checkmark{content:"✓";color:var(--sun);font-weight:700;order:1;margin-left:auto}
}
/* tanggal, angka, pencarian */
input[type=date],input[type=time],input[type=month]{cursor:pointer}
input::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.55;border-radius:6px;padding:3px;transition:opacity .15s,background .15s}
input::-webkit-calendar-picker-indicator:hover{opacity:1;background:var(--sunken)}
input::-webkit-datetime-edit-fields-wrapper{padding:0}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;width:14px;height:14px;cursor:pointer;opacity:.6;background:var(--muted);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 3l8 8M11 3l-8 8'/%3E%3C/svg%3E") center/14px no-repeat}
input[type=search]::-webkit-search-cancel-button:hover{opacity:1}
/* slider */
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;border:0;padding:0;min-height:24px;box-shadow:none;cursor:pointer}
input[type=range]:focus{box-shadow:none;background:transparent}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--sun) var(--p,0%),var(--line-strong) var(--p,0%))}
input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:var(--line-strong)}
input[type=range]::-moz-range-progress{height:6px;border-radius:6px;background:var(--sun)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-6px;border-radius:50%;background:var(--sun);border:3px solid var(--card);box-shadow:0 0 0 1px var(--sun);transition:transform .15s var(--ease)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--sun);border:3px solid var(--card);box-shadow:0 0 0 1px var(--sun)}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12)}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 1px var(--sun),0 0 0 5px color-mix(in srgb,var(--sun) 28%,transparent)}
input[type=checkbox],input[type=radio]{width:18px;height:18px;min-height:0;padding:0;cursor:pointer;box-shadow:none}
input:disabled,select:disabled,textarea:disabled{opacity:.6;cursor:not-allowed;background-color:var(--sunken)}
/* scrollbar tipis, mengikuti tema */
html{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
*{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:10px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}
input[type=checkbox],input[type=radio]{accent-color:var(--sun)}
textarea{min-height:96px;resize:vertical}
.hint{font-size:13px;color:var(--muted);margin-top:6px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row > .grow{flex:1 1 auto}
.stack{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)} /* isi selebar apa pun tidak melebarkan halaman */

/* ---------- kartu & label ---------- */
.card{position:relative;background:var(--card) var(--card-sheen);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow)}
@media (max-width:520px){.card{padding:18px}}
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.5;
  background:var(--sunken);color:var(--muted);white-space:nowrap}
.badge.solid{background:var(--brand-soft);color:var(--brand-text)}
.badge:is(.solid,.ok,.warn,.bad){box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 16%,transparent)}
.badge.ok{background:var(--ok-soft);color:var(--ok)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.bad{background:var(--bad-soft);color:var(--bad)}
.notice{padding:12px 14px;border-radius:var(--r);border:1px solid color-mix(in srgb,var(--warn) 22%,transparent);background:var(--warn-soft);font-size:14px}
.notice.info{background:var(--brand-soft);border-color:color-mix(in srgb,var(--sun) 22%,transparent)}
.empty{text-align:center;padding:40px 16px;color:var(--muted)}
/* kerangka muat & layar muat awal */
.skel{height:96px;border-radius:var(--r-lg);background:var(--sunken);animation:skel 1.2s ease-in-out infinite alternate}
.skel-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@keyframes skel{to{opacity:.45}}
.boot{position:fixed;inset:0;z-index:70;display:grid;place-content:center;justify-items:center;gap:14px;background:var(--bg);color:var(--ink);font-weight:800;font-size:18px;letter-spacing:-.01em}
.boot .logo{width:48px;height:48px;border-radius:14px;font-size:22px}
.boot-bar{display:block;width:96px;height:3px;border-radius:3px;background:var(--sunken);overflow:hidden}
.boot-bar::after{content:"";display:block;width:40%;height:100%;border-radius:3px;background:var(--sun);animation:bootGeser 1s var(--ease) infinite}
@keyframes bootGeser{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
.list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.bullets{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.bullets li{position:relative;padding-left:20px}
.bullets li::before{content:"";position:absolute;left:4px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--sun)}
.hud{} /* dulu hiasan sudut; sekarang kartu polos */
details > summary{transition:color .15s;list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
details > summary::-webkit-details-marker{display:none}
details > summary::before{content:"";flex:none;width:14px;height:14px;background:currentColor;transition:transform .2s var(--ease);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 3 4 4-4 4'/%3E%3C/svg%3E") center/14px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 3 4 4-4 4'/%3E%3C/svg%3E") center/14px no-repeat}
details[open] > summary::before{transform:rotate(90deg)}
details > summary:hover{color:var(--ink)}
code{font:600 .9em ui-monospace,SFMono-Regular,Consolas,monospace;background:var(--sunken);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--ink);overflow-wrap:anywhere}
details[open] > summary ~ *{animation:rise .3s var(--ease-out) both}

/* angka ringkasan */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.stat{position:relative;padding:16px 18px;border-radius:var(--r);background:var(--card) var(--card-sheen);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;
  transition:border-color .2s var(--ease),transform .2s var(--ease)}
.stat:hover{border-color:var(--line-strong)}
.stat .n{font-size:clamp(1.7rem,5vw,2.2rem);font-weight:800;line-height:1.05;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stat .n.kosong{font-size:1.15rem;font-weight:700;letter-spacing:-.01em;color:var(--muted);padding:.45em 0 .2em}
.stat .k{font-size:13px;color:var(--muted);margin-top:4px}
.card.stats{padding:12px}
@media (max-width:520px){.stats > .stat:last-child:nth-child(odd){grid-column:1/-1}} /* tidak ada kartu yatim di HP */
.card .stat{box-shadow:none;background:var(--sunken);border-color:transparent}

/* ---------- logo ---------- */
.logo{position:relative;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--sun);
  color:#fff;font-weight:800;font-size:16px;flex:none}

/* ---------- layar masuk ---------- */
.login{min-height:100vh;min-height:100dvh;display:grid;background:var(--bg)}
.login .side{padding:32px 16px;display:flex;flex-direction:column;justify-content:center}
.login .brandside{position:relative;overflow:hidden;isolation:isolate;
  background:#141416;color:#f4f4f5;
  --muted:#a1a1aa;--line:rgba(255,255,255,.12);gap:24px}
.login .brandside::before,.login .brandside::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.login .brandside::before{background:radial-gradient(520px 380px at 0% 0%,rgba(228,70,28,.30),transparent 65%),radial-gradient(480px 360px at 100% 100%,rgba(228,70,28,.14),transparent 65%)}
.login .brandside::after{background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 20% 20%,#000,transparent 75%);mask-image:radial-gradient(ellipse 80% 70% at 20% 20%,#000,transparent 75%)}
.login .brandrow{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.01em}
.login .brandside h1{font-size:clamp(2rem,6vw,3.1rem);max-width:15ch;letter-spacing:-.03em;line-height:1.08}
.login .brandside .lead{color:#d4d4d8;max-width:42ch;font-size:16px}
.login .foot{font-size:12.5px;color:#a1a1aa}
.login .formside{align-items:center}
.login .panel{width:100%;max-width:420px}
.login .panel.card{padding:26px;box-shadow:var(--shadow-hover)}
.login .formside{background:radial-gradient(600px 400px at 50% 0%,var(--glow),transparent 70%)}

/* Jalur: elemen utama layar masuk. Garis tergambar, lalu tiap halte menyala. */
.route{position:relative;margin:4px 0 0;padding:0;list-style:none;display:grid;gap:18px;max-width:420px}
.route::before,.route::after{content:"";position:absolute;left:15px;top:16px;bottom:16px;width:2px;border-radius:2px}
.route::before{background:repeating-linear-gradient(180deg,rgba(255,255,255,.18) 0 6px,transparent 6px 12px)}
.route::after{background:var(--sun);transform-origin:top;animation:drawY 1.6s .35s var(--ease-out) both}
.route li{position:relative;display:grid;grid-template-columns:32px 1fr;gap:14px;align-items:start}
.route .stop{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:#1c1b1f;border:2px solid rgba(255,255,255,.2);color:#fff;font-size:13px;font-weight:800;
  animation:stopOn .5s var(--spring) both;animation-delay:calc(.45s + var(--i) * .45s)}
.route b{display:block;font-size:16px;letter-spacing:-.01em}
.route small{display:block;color:#bdbdc4;font-size:14px;line-height:1.5;margin-top:1px}
.route li > div{animation:rise .6s var(--ease-out) both;animation-delay:calc(.5s + var(--i) * .45s)}

.tabs{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--sunken);margin-bottom:6px}
.tabs button{flex:1;min-height:38px;border:0;border-radius:9px;background:transparent;color:var(--muted);font:600 14px var(--f-body);cursor:pointer;white-space:nowrap;padding:0 14px;transition:color .15s,background .2s,box-shadow .2s}
.tabs button:hover{color:var(--ink)}
.tabs button.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow-sm),0 0 0 1px var(--line)}
.linkbtn{border:0;background:none;padding:0;color:var(--brand-text);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.linkbtn:hover{opacity:.8}
.login-links{margin-top:12px;text-align:center}
.pick{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);color:inherit;font:inherit;cursor:pointer;
  transition:border-color .15s var(--ease),background .15s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease-out)}
.pick:hover{border-color:var(--sun);box-shadow:0 0 0 4px var(--brand-soft);transform:translateX(3px)}
.pick:active{transform:scale(.985)}
.pick b{display:block;font-weight:700}
.pick small{display:block;font-size:13px}
.pick .go{margin-left:auto;color:var(--muted);font-size:20px;transition:transform .2s var(--ease-out),color .15s}
.pick:hover .go{transform:translateX(3px);color:var(--sun)}
.picks{display:grid;gap:8px}
.formside .panel > *{animation:rise .6s var(--ease-out) both}
.formside .panel > :nth-child(2){animation-delay:.08s}
.formside .panel > :nth-child(3){animation-delay:.16s}
.formside.swap .panel > *{animation:none} /* ganti tab Masuk/Daftar: langsung tampil */
/* jalur versi ringkas: hanya di HP, menggantikan .route yang tinggi */
.route-mini{display:none;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#e4e4e7}
.route-mini i{flex:0 1 22px;height:2px;border-radius:2px;background:var(--sun)}
@media (max-width:899px){
  /* HP: panel merek dibuat ringkas supaya form masuk langsung terlihat tanpa menggulir */
  .login .brandside{padding:20px 16px 22px;gap:14px}
  .login .brandside .stack{gap:8px}
  .login .brandside h1{font-size:1.45rem;max-width:22ch}
  .login .brandside :is(.lead,.route,.foot){display:none}
  .route-mini{display:flex}
  .login .formside{padding-top:20px;justify-content:flex-start}
}
@media (min-width:900px){
  .login{grid-template-columns:minmax(420px,1.05fr) 1fr}
  .login .side{padding:56px 64px}
  .login .brandside{position:sticky;top:0;height:100vh;height:100dvh;justify-content:space-between}
}

/* ---------- kerangka aplikasi ---------- */
.app{position:relative;isolation:isolate}
.app::before{content:"";position:fixed;z-index:-1;inset:0 0 auto 0;height:520px;pointer-events:none;
  background:radial-gradient(900px 420px at 72% -160px,var(--glow),transparent 70%)}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:10px 16px;
  background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s,background .2s}
.topbar.scrolled{border-bottom-color:var(--line);box-shadow:0 8px 24px -18px rgba(0,0,0,.35)}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;font-weight:800;font-size:17px;letter-spacing:-.02em}
#modeBadge{background:var(--warn-soft);color:var(--warn)}

.avatar,.avatar-btn{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:#fff;font-weight:700;font-size:13px;flex:none}
.avatar-btn{border:0;cursor:pointer;box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--line-strong);transition:box-shadow .2s,transform .2s var(--spring)}
.avatar-btn:hover{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--sun);transform:scale(1.05)}
.avatar-btn:active{transform:scale(.95)}
.view{padding:20px 16px 112px;max-width:980px;margin:0 auto}
.view:focus{outline:none}
.nav{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:20;display:flex;justify-content:space-around;
  background:color-mix(in srgb,var(--card) 82%,transparent);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);
  border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);padding:6px}
.nav button{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:52px;border:0;background:transparent;
  color:var(--muted);font:600 11px var(--f-body);cursor:pointer;padding:6px 2px;border-radius:14px;transition:color .2s}
.nav button{min-width:0;flex:1 1 0;padding:6px 0;letter-spacing:-.01em}
.nav button svg{width:22px;height:22px;flex:none;transition:transform .3s var(--spring)}
.nav .nav-l{display:none}
.nav :is(.nav-l,.nav-s){max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav button:active svg{transform:scale(.85)}
.nav button.on{color:var(--brand-text)}
.nav button.on svg{transform:translateY(-1px)}
/* penanda menu aktif yang meluncur (posisinya diatur app.js) */
.nav-ind{position:absolute;z-index:0;left:0;top:0;border-radius:14px;background:var(--brand-soft);pointer-events:none;
  transition:transform .45s var(--ease-out),width .45s var(--ease-out),height .45s var(--ease-out);will-change:transform}
.nav-ind.no-anim{transition:none}
.nav-foot{display:none!important}
.nav-group{display:none} /* judul kategori hanya di menu samping; menu bawah HP terlalu sempit */
.page-head{display:flex;align-items:flex-end;gap:16px;justify-content:space-between;flex-wrap:wrap;padding-bottom:4px}
.page-head .lead{color:var(--muted);margin-top:8px;max-width:60ch;font-size:15.5px}
/* HP: tombol di kepala halaman sama lebar, tidak bertumpuk tak rata */
@media (max-width:520px){.page-head > .row{width:100%}.page-head > .row > .btn{flex:1 1 auto}}

@media (min-width:900px){
  .app{display:grid;grid-template-columns:248px 1fr;grid-template-rows:auto 1fr}
  .topbar{grid-column:1/-1;padding:12px 24px}
  .nav{position:sticky;top:61px;left:auto;right:auto;bottom:auto;align-self:start;flex-direction:column;justify-content:flex-start;gap:2px;height:calc(100vh - 61px);
    border:0;border-right:1px solid var(--line);border-radius:0;box-shadow:none;padding:18px 12px;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav{overflow-y:auto;overscroll-behavior:contain}
  .nav .nav-l{display:block}
  .nav .nav-s{display:none}
  .nav button{flex:none;flex-direction:row;gap:12px;min-height:42px;padding:0 14px;font-size:14.5px;color:var(--muted);border-radius:12px;transition:color .2s,background .2s}
  .nav button svg{width:20px;height:20px}
  .nav button:hover{color:var(--ink);background:color-mix(in srgb,var(--sunken) 70%,transparent)}
  .nav button.on{color:var(--brand-text);background:transparent;font-weight:700}
  .nav-ind{border-radius:12px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sun) 16%,transparent)}
  .topbar{border-bottom-color:var(--line)}
  .nav-group{display:block;padding:16px 14px 6px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);opacity:.8}
  .nav-group:first-child{padding-top:2px}
  .nav-foot{display:flex!important;flex:none!important;margin-top:auto;align-items:center;gap:10px;text-align:left;padding:10px!important;min-height:58px!important;
    border:1px solid var(--line)!important;border-radius:14px!important;background:var(--card) var(--card-sheen)!important;box-shadow:var(--shadow-sm)}
  .nav-foot:hover{border-color:var(--line-strong)!important}
  .nav-foot .avatar{width:34px;height:34px;font-size:12.5px;flex:none}
  .nav-foot b{display:block;color:var(--ink);font-size:13.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
  .nav-foot small{display:block;font-size:12px;font-weight:500}
  .nav-ind::before{content:"";position:absolute;left:-12px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--sun)}
  .view{padding:36px 44px 64px;width:100%}
}

/* tenggat terdekat (beranda siswa) */
.tenggat ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:2px}
.tenggat li button{width:100%;display:flex;align-items:center;gap:14px;padding:10px;margin:0 -10px;width:calc(100% + 20px);border:0;background:transparent;
  border-radius:12px;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background .15s}
.tenggat li + li button{border-top:1px solid var(--line);border-radius:0 0 12px 12px}
.tenggat li button:hover{background:var(--sunken);border-radius:12px}
.tenggat > .row > .grow{flex:1 1 240px}
.tenggat .grow{flex:1;min-width:0}
.tenggat .grow b{display:block;font-size:14.5px;line-height:1.35}
.tenggat .grow small{display:block;font-size:13px}
.tg-hari{flex:none;width:52px;height:52px;border-radius:14px;background:var(--sunken);display:grid;place-content:center;text-align:center;
  font-size:11px;font-weight:600;color:var(--muted);line-height:1.1}
.tg-hari b{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tg-hari.dekat{background:var(--brand-soft);color:var(--brand-text)}
.tg-hari.dekat b{color:var(--brand-text)}
@media (max-width:520px){.tenggat .badge{display:none}}

/* ---------- lembar pop-up & toast ---------- */
.overlay{position:fixed;inset:0;z-index:50;background:rgba(9,9,11,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:grid;align-items:end;justify-items:center;animation:fade .25s var(--ease-out)}
.sheet{width:100%;max-width:560px;max-height:90vh;overflow:auto;background:var(--card);border-radius:24px 24px 0 0;box-shadow:var(--shadow-lg);
  border:1px solid var(--line);padding:22px 16px calc(20px + env(safe-area-inset-bottom));animation:sheetUp .42s var(--ease-out);overscroll-behavior:contain}
.sheet::before{content:"";display:block;width:40px;height:4px;border-radius:4px;background:var(--line-strong);margin:-8px auto 14px}
.sheet .sheet-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.sheet .sheet-head .btn.ghost{width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;transition:background .15s,transform .3s var(--spring)}
.overlay.closing{animation:fadeOut .2s var(--ease-in) both}
/* halaman di belakang lembar tidak ikut tergulir; ruang scrollbar tetap supaya isi tidak bergeser */
html{scrollbar-gutter:stable}
html:has(.overlay:not([hidden])){overflow:hidden}
.overlay.closing .sheet{animation:sheetDown .2s var(--ease-in) both}
@media (min-width:640px){
  .overlay{align-items:center}
  .sheet{border-radius:var(--r-xl);padding:26px;animation:pop .38s var(--ease-out)}
  .sheet::before{display:none}
  .overlay.closing .sheet{animation:popOut .18s var(--ease-in) both}
}
/* Pemberitahuan: kartu kecil bertumpuk dengan ikon berwarna dan batang waktu.
   Warna jenis lewat --tc: hijau berhasil, merah gagal, kuning peringatan, oranye info. */
.toast-stack{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;width:min(420px,calc(100% - 32px));
  display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast-item{--tc:var(--ok);position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;padding:12px 10px 12px 12px;border-radius:16px;
  background:var(--card);background-image:var(--card-sheen);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-lg),var(--hairline);
  font-size:14px;font-weight:600;line-height:1.4;pointer-events:auto;animation:toastIn .45s var(--spring) both}
.toast-item::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--tc)}
.toast-item.err{--tc:var(--bad)} .toast-item.warn{--tc:var(--warn)} .toast-item.info{--tc:var(--sun)}
.ti-ikon{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;color:var(--tc);background:color-mix(in srgb,var(--tc) 14%,transparent)}
.ti-ikon svg{width:18px;height:18px}
.toast-item.ok .ti-ikon svg path{stroke-dasharray:24;stroke-dashoffset:24;animation:centang .45s .15s var(--ease-out) forwards}
.ti-teks{flex:1;min-width:0;overflow-wrap:anywhere}
.ti-x{flex:none;display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:8px;background:none;color:var(--muted);cursor:pointer;transition:background .15s,color .15s}
.ti-x:hover{background:var(--sunken);color:var(--ink)} .ti-x svg{width:14px;height:14px}
.ti-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:color-mix(in srgb,var(--tc) 55%,transparent);transform-origin:left;
  animation:toastWaktu var(--dur,3200ms) linear forwards}
.toast-item:hover .ti-bar,.toast-item:focus-within .ti-bar{animation-play-state:paused}
.toast-item.out{animation:toastOut .2s var(--ease-in) forwards}
@media (min-width:900px){.toast-stack{left:auto;right:24px;bottom:24px;transform:none}}
@keyframes toastIn{from{opacity:0;transform:translateY(16px) scale(.95)}}
@keyframes toastOut{to{opacity:0;transform:translateY(8px) scale(.96)}}
@keyframes toastWaktu{to{transform:scaleX(0)}}
@keyframes centang{to{stroke-dashoffset:0}}

/* Dialog konfirmasi: di atas lembar pop-up dan pemberitahuan, tombol utama merah untuk tindakan menghapus. */
.dlg-overlay{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:16px;background:rgba(9,9,11,.55);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:fade .2s var(--ease-out)}
.dlg-overlay[hidden]{display:none}
html:has(.dlg-overlay:not([hidden])){overflow:hidden}
.dlg{--dc:var(--sun);width:min(400px,100%);padding:26px 22px 20px;border-radius:var(--r-xl);background:var(--card);background-image:var(--card-sheen);
  border:1px solid var(--line);box-shadow:var(--shadow-lg),var(--hairline);text-align:center;animation:pop .32s var(--spring)}
.dlg.bahaya{--dc:var(--bad)}
.dlg-ikon{position:relative;display:grid;place-items:center;width:56px;height:56px;margin:0 auto 14px;border-radius:50%;color:var(--dc);
  background:color-mix(in srgb,var(--dc) 13%,transparent)}
.dlg-ikon::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid color-mix(in srgb,var(--dc) 22%,transparent)}
.dlg-ikon svg{width:26px;height:26px}
.dlg h2{font-size:19px;margin:0 0 6px}
.dlg p{color:var(--muted);font-size:14.5px;line-height:1.55;margin:0}
.dlg-aksi{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.btn.merah{background:var(--bad);border-color:var(--bad);color:#fff;box-shadow:0 10px 22px -10px color-mix(in srgb,var(--bad) 70%,transparent)}
.btn.merah:hover{filter:brightness(1.07);background:var(--bad)}
.dlg-overlay.closing{animation:fadeOut .18s var(--ease-in) both}
.dlg-overlay.closing .dlg{animation:popOut .18s var(--ease-in) both}

/* ---------- gerak halaman ----------
   .enter dipasang app.js saat pindah menu (bukan saat menyimpan),
   jadi animasi hanya muncul sekali per halaman. */
.view.enter > .stack > *{animation:rise .55s var(--ease-out) both;animation-delay:calc(var(--i,0) * 45ms)}
.view.enter :is(.lomba-bar .track i,.kl-bar .track i){transform-origin:left;animation:grow .9s .25s var(--ease-out) both}
.view.enter .kl-chart polyline{stroke-dasharray:1;animation:draw 1.4s .3s var(--ease-out) both}
.view.enter .kl-chart circle,.view.enter .kl-chart .kl-end{animation:fade .4s 1.2s both}

/* ---------- jalur saya (beranda siswa) ---------- */
.jalur{display:grid;gap:16px}
.jalur-steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0;padding:0;list-style:none}
.jalur-steps::before,.jalur-steps .fill{content:"";position:absolute;top:15px;left:calc(100% / 6);height:2px;border-radius:2px}
.jalur-steps::before{right:calc(100% / 6);background:var(--line-strong)}
.jalur-steps .fill{width:calc((100% - 100% / 3) * var(--p,0));background:var(--sun);transform-origin:left}
.view.enter .jalur-steps .fill{animation:grow 1.1s .35s var(--ease-out) both}
.jalur-steps li{position:relative;display:grid;justify-items:center;align-content:start;text-align:center;gap:8px}
.jalur-steps .stop{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--card);border:2px solid var(--line-strong);
  color:var(--muted);font-size:13px;font-weight:800;transition:border-color .3s,background .3s}
.jalur-steps li.done .stop{background:var(--sun);border-color:var(--sun);color:#fff}
.jalur-steps li.now .stop{position:relative;border-color:var(--sun);color:var(--brand-text);box-shadow:0 0 0 4px var(--brand-soft)}
/* denyut halte aktif: cincin terpisah yang hanya memakai transform/opacity (box-shadow berulang membebani HP) */
.jalur-steps li.now .stop::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--sun);opacity:0;pointer-events:none;animation:ping 2.2s var(--ease-out) infinite}
.jalur-steps b{font-size:14px;letter-spacing:-.01em}
.jalur-steps small{font-size:12.5px;line-height:1.4;max-width:18ch}
.jalur-now{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px 14px;border-radius:var(--r);background:var(--sunken)}

/* ---------- kunci animasi ---------- */
@keyframes fade{from{opacity:0}}
@keyframes fadeOut{to{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
@keyframes up{from{transform:translateY(16px);opacity:0}}
@keyframes sheetUp{from{transform:translateY(100%)}}
@keyframes sheetDown{to{transform:translateY(100%)}}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.96)}}
@keyframes popOut{to{opacity:0;transform:translateY(6px) scale(.97)}}
@keyframes grow{from{transform:scaleX(0)}}
@keyframes drawY{from{transform:scaleY(0)}}
@keyframes reveal{from{clip-path:inset(0 100% 0 0 round 10px)}to{clip-path:inset(0 0 0 0 round 10px)}}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes stopOn{from{transform:scale(.4);opacity:0}to{background:var(--sun);border-color:var(--sun)}}
@keyframes ping{0%{opacity:.9;transform:scale(.8)}100%{opacity:0;transform:scale(1.6)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}

/* =================================================================
   GAYA KHUSUS FITUR
   Tiap fitur hanya menulis di dalam bagiannya sendiri (antara penanda
   "mulai" dan "selesai"), supaya pekerjaan paralel tidak bentrok.
   Utamakan kelas umum di atas (.card .btn .badge .eyebrow .stat dll).
   ================================================================= */

/* ----- fitur: lomba — mulai ----- */
.lomba-grid{display:grid;gap:14px}
@media (min-width:700px){.lomba-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1280px){.lomba-grid{grid-template-columns:repeat(3,1fr)}}
.lomba-card{display:flex;flex-direction:column;gap:14px;padding:20px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.lomba-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.lomba-card.tutup{opacity:.68}
.lomba-card.punya{border-color:color-mix(in srgb,var(--sun) 30%,var(--line))}
.lomba-top{display:flex;align-items:center;gap:10px}
.lomba-top .lomba-tags{flex:1;min-width:0}
.lomba-mono{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:12px;font-weight:800;font-size:14px;letter-spacing:-.02em;
  color:color-mix(in srgb,var(--c) 80%,var(--ink));background:color-mix(in srgb,var(--c) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 22%,transparent)}
.lomba-due{display:inline-flex;align-items:center;gap:6px;flex:none;padding:4px 10px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap;
  background:var(--sunken);color:var(--muted);font-variant-numeric:tabular-nums}
.lomba-due.mepet{background:var(--brand-soft);color:var(--brand-text)}
.lomba-due.mepet i{position:relative;width:7px;height:7px;border-radius:50%;background:var(--sun)}
.lomba-due.mepet i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--sun);animation:ping 1.6s var(--ease-out) infinite}
.lomba-due.tutup{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.lomba-judul{font-size:1.08rem;line-height:1.3;text-wrap:balance}
.lomba-tags{gap:6px}
.lomba-new{background:var(--sun);color:#fff}
.lomba-meta{font-size:13.5px;color:var(--muted);margin-top:4px}
.lomba-info{display:grid;gap:7px;font-size:13.5px}
.lomba-info span{display:flex;align-items:center;gap:9px;min-width:0;color:var(--ink)}
.lomba-info svg{flex:none;width:16px;height:16px;color:var(--muted)}
.lomba-biaya{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;padding:9px 12px;border-radius:var(--r);background:var(--sunken);font-size:13.5px;color:var(--muted)}
.lomba-biaya b{font-weight:700}
.lomba-biaya.ya{background:var(--brand-soft);color:var(--brand-text)}
.lomba-biaya span{font-size:12.5px;opacity:.9}
.lomba-kuota{display:grid;gap:8px;padding:12px;border-radius:var(--r);background:var(--sunken)}
.lomba-kuota-n{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted)}
.lomba-kuota-n b{color:var(--ink);font-size:15px;font-variant-numeric:tabular-nums}
.lomba-kuota-n em{font-style:normal;font-weight:700}
.lomba-kuota-bar{display:block;height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.lomba-kuota-bar i{display:block;height:100%;border-radius:999px;background:var(--ok)}
.lomba-kuota-bar.lebih i{background:var(--sun)}
.lomba-kaki{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.lomba-kaki .btn:not(.lomba-ik){flex:1;white-space:nowrap}
.lomba-kaki .lomba-ik{flex:none;width:42px;padding:0}
.lomba-ik svg{width:18px;height:18px}
.lomba-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:-4px 0;padding:4px 0}
.lomba-chips::-webkit-scrollbar{display:none}
.lomba-chips button{flex:none;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line-strong);background:var(--card);color:var(--muted);
  font:600 13.5px var(--f-body);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.lomba-chips button:hover{color:var(--ink);border-color:var(--muted)}
.lomba-chips button.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
/* seminar: tanda jenis, saringan Semua/Lomba/Seminar, formulir guru */
.lomba-jenis{background:color-mix(in srgb,#7c3aed 14%,transparent);color:#6d28d9}
:root[data-theme="dark"] .lomba-jenis{color:#c4b5fd}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lomba-jenis{color:#c4b5fd}}
.lomba-mono.sem svg{width:20px;height:20px}
.lomba-bar-atas{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.lomba-jseg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line)}
.lomba-jseg button,.lomba-jseg label{display:inline-flex;align-items:center;gap:6px;min-height:34px;margin:0;padding:0 14px;border:0;border-radius:999px;background:transparent;
  color:var(--muted);font:600 13.5px var(--f-body);cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}
.lomba-jseg button span{font-size:12px;font-variant-numeric:tabular-nums;opacity:.75}
.lomba-jseg button:hover,.lomba-jseg label:hover{color:var(--ink)}
.lomba-jseg .on{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.lomba-jseg label input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.lomba-jseg label:has(input:focus-visible){outline:2px solid var(--sun);outline-offset:2px}
.lomba-jseg-form{margin-bottom:6px}
.lomba-form-guru[data-jenis="seminar"] .hanya-lomba,.lomba-form-guru:not([data-jenis="seminar"]) .hanya-seminar{display:none}
.lomba-kaki a.btn{flex:1;gap:6px}
.lomba-kaki a.btn svg,.row a.btn svg{width:15px;height:15px}
.view.enter .lomba-kuota-bar i{transform-origin:left;animation:grow .9s .25s var(--ease-out) both}
.lomba-facts{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:14px;padding:10px 12px;border-radius:var(--r);background:var(--sunken)}
.lomba-facts b{display:block;font-size:12px;font-weight:600;color:var(--muted)}
.lomba-facts em{font-style:normal;font-size:12.5px;font-weight:700;margin-left:4px}
.lomba-count{gap:12px;font-size:13.5px;font-weight:600;color:var(--muted)}
.lomba-juknis{white-space:pre-wrap;font-size:15px;padding:12px 14px;border-radius:var(--r);background:var(--sunken)}
.lomba-link{border:0;background:none;padding:6px 0;color:inherit;font:inherit;font-weight:600;text-align:left;cursor:pointer}
.lomba-link:hover{color:var(--brand-text)}
.lomba-mine .list li{border-bottom:1px solid var(--line);padding-bottom:6px}
.lomba-mine .list li:last-child{border-bottom:0}
.lomba-invite{border-color:color-mix(in srgb,var(--sun) 35%,transparent)}
.lomba-inv-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.lomba-closed summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--muted);padding:8px 0;margin-bottom:8px}
.lomba-2{display:grid;gap:0 12px}
@media (min-width:480px){.lomba-2{grid-template-columns:1fr 1fr;align-items:end}}
label.lomba-check{display:inline-flex;align-items:center;gap:8px;margin:0;min-height:44px;cursor:pointer;font-weight:600}
.lomba-check input{width:18px;height:18px;min-height:0;accent-color:var(--sun)}
.lomba-rumus{font-size:13.5px;font-weight:600;word-break:break-word;padding:10px 12px;border-radius:var(--r);background:var(--sunken);font-variant-numeric:tabular-nums}
.lomba-rumus small{font-weight:400}
/* kandidat (penilaian guru) */
.lomba-cand{display:grid;gap:14px}
.lomba-cand.on{border-color:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.lomba-cand-head{display:flex;gap:12px;align-items:flex-start}
.lomba-rank{display:grid;place-items:center;min-width:30px;height:30px;border-radius:9px;background:var(--sunken);font-size:13px;font-weight:700;color:var(--muted)}
.lomba-total{text-align:right}
.lomba-total b{display:block;font-size:2rem;font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--sun);font-variant-numeric:tabular-nums}
.lomba-total small{font-size:12px}
.lomba-bars{display:grid;gap:8px}
.lomba-bar{display:grid;grid-template-columns:18px 1fr 30px;gap:2px 10px;align-items:center;font-size:13px}
.lomba-bar > span:first-child{font-weight:700;color:var(--muted)}
.lomba-bar .track{height:8px;border-radius:999px;background:var(--sunken);position:relative;overflow:hidden}
.lomba-bar .track i{position:absolute;inset:0 auto 0 0;border-radius:999px;background:var(--muted)}
.lomba-bar:first-child .track i{background:var(--sun)}
.lomba-bar b{text-align:right;font-variant-numeric:tabular-nums}
.lomba-bar small{grid-column:2/-1;font-size:12px}
.lomba-bar.kosong{opacity:.55}
.lomba-ai{font-size:14px;display:flex;gap:8px;align-items:baseline}
.lomba-why summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--muted)}
.lomba-why p{margin-top:8px;white-space:pre-wrap}
.lomba-karya{font-size:14px;justify-content:space-between}
.lomba-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:12px;background:var(--sunken)}
.lomba-seg button{min-height:38px;border:0;border-radius:9px;background:transparent;color:var(--muted);font:600 14px var(--f-body);cursor:pointer}
.lomba-seg button:hover{color:var(--ink)}
.lomba-seg button.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow-sm)}
.lomba-slider input[type=range]{flex:1;min-height:0;padding:0;border:0;box-shadow:none;accent-color:var(--sun)}
.lomba-slider b{width:28px;text-align:right;font-variant-numeric:tabular-nums}
/* tim */
fieldset.lomba-tim{margin:0;padding:12px 14px 14px;border:1px solid var(--line);border-radius:var(--r);display:grid;gap:2px}
.lomba-tim legend{padding:0 6px;font-size:13.5px;font-weight:700}
.lomba-tim label.lomba-check{min-height:36px;font-weight:500}
.lomba-tim input[type=radio]{width:18px;height:18px;min-height:0;accent-color:var(--sun)}
.lomba-timinfo{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px}
label.lomba-timpilih{display:flex;align-items:center;gap:10px;margin:0;font-weight:600;font-size:14px}
.lomba-timpilih select{flex:1;min-height:38px}
.lomba-tims{display:grid;gap:10px}
@media (min-width:640px){.lomba-tims{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}
.lomba-timbox{padding:12px 14px;border-radius:var(--r);background:var(--sunken)}
.lomba-timbox.belum{background:var(--warn-soft)}
.lomba-timbox ul{margin:6px 0 0;padding-left:18px;font-size:14px;display:grid;gap:2px}
.lomba-timku .list li{padding:8px 12px;border-radius:var(--r);background:var(--sunken)}
/* saringan & tampilan ringkas di halaman penilaian */
.lomba-saring{justify-content:space-between}
.lomba-saring .tabs{margin:0;flex:1 1 320px;min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none}
.lomba-saring .tabs::-webkit-scrollbar{display:none}
.lomba-saring .tabs button{flex:1 0 auto;padding:0 10px}
.lomba-cands.ringkas :is(.lomba-bars,.lomba-why,.lomba-karya,.lomba-ai){display:none}
.lomba-cands.ringkas .lomba-cand{gap:10px;padding:14px 16px}
/* ----- fitur: lomba — selesai ----- */


/* ----- fitur: tanya — mulai ----- */
.tq-item{display:grid;gap:10px}
.tq-item.mine{border-color:rgba(228,70,28,.35)}
.tq-meta{gap:8px}
.tq-q{font-weight:600;line-height:1.5;overflow-wrap:anywhere}
.tq-resmi{padding:12px 14px;border-radius:var(--r);background:var(--ok-soft)}
.tq-resmi p,.tq-ai p{margin-top:6px;overflow-wrap:anywhere}
.tq-resmi .badge.solid{background:var(--ok);color:#fff}
.tq-ai{padding:12px 14px;border-radius:var(--r);background:var(--sunken);color:var(--muted);font-size:14px}
.tq-tunggu{color:var(--muted);font-size:14px}
.tq-tabs{flex:0 0 auto}
#tqSaringComp{flex:1 1 220px;width:auto}
.tq-tabs button{padding:0 12px}
.tq-item.tq-hidden{opacity:.65;border-style:dashed}
/* ----- fitur: tanya — selesai ----- */


/* ----- fitur: sertifikat — mulai ----- */
.sert-list{display:grid;gap:0}
.sert-item{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--line)}
.sert-item:last-child{border-bottom:0}
.sert-item .grow{flex:1 1 200px;min-width:0;overflow-wrap:anywhere}
.sert-item a{color:var(--brand-text);font-size:13px;font-weight:600}
.sert-act{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sert-act .btn{min-height:36px;padding:6px 12px;font-size:13.5px}
button.sert-pick{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--ink);text-align:left;font:inherit;cursor:pointer;flex-wrap:nowrap;padding:12px 8px;border-radius:0}
button.sert-pick:hover{background:var(--sunken)}
.sert-filter .btn{min-height:34px;padding:6px 12px;font-size:13px;border-radius:999px}
.sert-filter .btn.primary{background:var(--ink);border-color:var(--ink);color:var(--card);box-shadow:none}
.sert-sec{border-top:1px solid var(--line);padding-top:14px}
.sert-nilai{display:grid;gap:12px}
.sert-sem{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.sert-sem span{display:inline-flex;gap:6px;padding:4px 10px;border-radius:999px;background:var(--sunken);font-size:12.5px;color:var(--muted)}
.sert-sem span b{color:var(--ink);font-variant-numeric:tabular-nums}
.sert-catatan{margin-top:6px;padding:8px 10px;border-radius:10px;background:var(--bad-soft);color:var(--ink);font-size:13.5px}
.sert-chips{gap:6px;margin-bottom:8px}
.sert-chips .btn{min-height:32px;padding:4px 10px;font-size:13px;border-radius:999px}
/* ----- fitur: sertifikat — selesai ----- */


/* ----- fitur: potensi — mulai ----- */
.pt-filter{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:640px){.pt-filter{grid-template-columns:1fr 160px}}
.pt-check{display:flex;gap:8px;align-items:center;font-size:14px;font-weight:600;cursor:pointer;margin:0}
.pt-check input{width:auto;min-height:0;margin:0}
.pt-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.pt-table{width:100%;border-collapse:collapse;font-size:14px}
.pt-table th,.pt-table td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--line)}
.pt-table tr:last-child td{border-bottom:0}
.pt-table th{font-size:12.5px;font-weight:600;color:var(--muted);background:var(--sunken)}
.pt-prev{border-top:1px solid var(--line);padding-top:16px;margin-top:4px}
.pt-row{padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.pt-row:last-child{border-bottom:0}
.pt-nilai{font-size:22px;font-weight:800;letter-spacing:-.02em;min-width:48px;text-align:right;color:var(--sun);font-variant-numeric:tabular-nums}
/* tombol file berbahasa Indonesia: input asli disembunyikan, label yang tampil */
.file-pick{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0;font-weight:500;cursor:pointer}
.file-pick input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.file-pick:focus-within .btn{outline:2px solid var(--sun);outline-offset:2px}
.file-pick:hover .btn{border-color:var(--line-strong)}
input[type=file]{padding:8px;cursor:pointer;color:var(--muted);font-size:14px}
input[type=file]::file-selector-button{font:600 14px var(--f-body);color:var(--ink);background:var(--sunken);border:1px solid var(--line);
  border-radius:10px;padding:8px 14px;margin-right:12px;cursor:pointer;transition:background .15s,border-color .15s}
input[type=file]:hover::file-selector-button{border-color:var(--line-strong);background:var(--card)}
/* daftar nilai */
.pt-nf-filter{display:grid;gap:0 12px;grid-template-columns:1fr 1fr}
.pt-nf-filter > div:first-child{grid-column:1/-1}
.pt-nf-filter label{margin-top:0}
@media (min-width:900px){.pt-nf-filter{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr))}.pt-nf-filter > div:first-child{grid-column:auto}}
.pt-nf-count{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--muted);margin-bottom:10px}
.pt-nf-count b{color:var(--ink)}
.pt-nf-hapus{min-height:34px;padding:0 10px;font-size:13px}
.pt-scroll:has(.pt-nf-table){max-height:520px;overflow:auto}
.pt-nf-table thead th{position:sticky;top:0;z-index:1}
.pt-nf-table td{vertical-align:middle}
.pt-nf-table td:first-child b{display:block;font-weight:600}
.pt-nf-table td:first-child small{display:block;font-size:12.5px;color:var(--muted)}
.pt-belum{color:var(--warn);font-weight:600}
.pt-nf-in{width:78px;min-height:36px;padding:6px 8px;text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.pt-nf-in.pt-tersimpan{border-color:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.pt-nf-aksi{white-space:nowrap;text-align:right}
.pt-nf-aksi .btn{min-height:34px;padding:0 10px;font-size:13px}
.pt-2{display:grid;gap:0 12px}
@media (min-width:480px){.pt-2{grid-template-columns:1fr 1fr}}
.pt-smt-m{display:none}
@media (max-width:640px){
  .pt-nf-table thead{display:none}
  .pt-nf-table,.pt-nf-table tbody{display:block}
  .pt-nf-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;padding:12px;border-bottom:1px solid var(--line)}
  .pt-nf-table tr:last-child{border-bottom:0}
  .pt-nf-table td{padding:0;border:0}
  .pt-nf-table td:nth-child(2){grid-column:1;font-size:13.5px}
  .pt-nf-table td:nth-child(3){display:none}
  .pt-nf-table td:nth-child(4){grid-column:2;grid-row:1/span 2}
  .pt-nf-table td.pt-nf-aksi{grid-column:1/-1;text-align:left;margin-top:4px}
  .pt-smt-m{display:inline;color:var(--muted)}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ----- fitur: potensi — selesai ----- */


/* ----- fitur: kuliah — mulai ----- */
/* warna garis grafik: dicek terbaca di latar terang & gelap */
.kl-fig,.kl-legs,.kl-sec{--kl0:#e4461c;--kl1:#2563eb;--kl2:#15803d;--kl3:#9333ea;--kl4:#b45309;--kl5:#0f766e}
:root[data-theme="dark"] :is(.kl-fig,.kl-legs,.kl-sec){--kl0:#ff7a50;--kl1:#60a5fa;--kl2:#4ade80;--kl3:#c084fc;--kl4:#fbbf24;--kl5:#2dd4bf}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.kl-fig,.kl-legs,.kl-sec){--kl0:#ff7a50;--kl1:#60a5fa;--kl2:#4ade80;--kl3:#c084fc;--kl4:#fbbf24;--kl5:#2dd4bf}}
.kl-c0{--c:var(--kl0)}.kl-c1{--c:var(--kl1)}.kl-c2{--c:var(--kl2)}.kl-c3{--c:var(--kl3)}.kl-c4{--c:var(--kl4)}.kl-c5{--c:var(--kl5)}
.kl-fig{margin:0}
.kl-chart{display:block;width:100%;height:auto;max-height:280px;overflow:visible}
.kl-chart .kl-grid{stroke:var(--line);stroke-width:1}
.kl-chart .kl-ax{fill:var(--muted);font:500 11.5px var(--f-body)}
.kl-chart polyline{fill:none;stroke:var(--c);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.kl-chart circle{fill:var(--card);stroke:var(--c);stroke-width:2.5}
.kl-chart .kl-end{fill:var(--c);font:700 12px var(--f-body)}
.kl-legs{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;font-size:13px;color:var(--muted)}
.kl-leg{display:inline-flex;align-items:center;gap:6px}
.kl-leg i{width:14px;height:3px;border-radius:2px;background:var(--c)}
.kl-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.kl-table{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
.kl-table th,.kl-table td{text-align:right;padding:7px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.kl-table th:first-child{text-align:left}
.kl-table thead th{font-size:12.5px;font-weight:600;color:var(--muted);background:var(--sunken)}
.kl-table tbody th{font-weight:600}
.kl-table tr:last-child>*{border-bottom:0}
.kl-table .kl-avg>*{background:var(--sunken);font-weight:700}
.kl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kl-sems{display:flex;flex-wrap:wrap;gap:6px}
.kl-sems span{display:inline-flex;gap:6px;padding:4px 10px;border-radius:999px;background:var(--sunken);font-size:12.5px;color:var(--muted)}
.kl-sems b{color:var(--ink);font-variant-numeric:tabular-nums}
/* kuis */
.kl-prog{height:6px;border-radius:999px;background:var(--sunken);overflow:hidden;margin-bottom:6px}
.kl-prog i{display:block;height:100%;border-radius:999px;background:var(--sun);transition:width .25s var(--ease)}
.kl-q{font-size:1.15rem;line-height:1.4}
.kl-opsi{display:grid;gap:8px}
.kl-opt{min-height:46px;padding:10px 14px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--card);color:var(--ink);
  font:500 15px var(--f-body);text-align:left;cursor:pointer;transition:border-color .15s var(--ease),background .15s var(--ease),box-shadow .15s}
.kl-opt:hover{border-color:var(--sun);box-shadow:0 0 0 3px var(--brand-soft)}
.kl-opt.on{border-color:var(--sun);background:var(--brand-soft);color:var(--brand-text);font-weight:600}
.kl-skala{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.kl-skala .kl-opt{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;text-align:center}
.kl-skala .kl-opt b{font-size:1.15rem}
.kl-skala .kl-opt small{font-size:11.5px;line-height:1.25;color:inherit;opacity:.8}
.kl-bars{display:grid;gap:10px}
.kl-bar{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;font-size:14px}
.kl-bar span{font-weight:600}
.kl-bar b{font-variant-numeric:tabular-nums}
.kl-bar .track{grid-column:1/-1;height:8px;border-radius:999px;background:var(--sunken);overflow:hidden}
.kl-bar .track i{display:block;height:100%;border-radius:999px;background:var(--muted)}
.kl-bar.top .track i{background:var(--sun)}
.kl-link{border:0;background:none;padding:0;color:var(--brand-text);font:inherit;font-weight:600;cursor:pointer}
.kl-lomba li,.kl-pres li{padding:8px 0;border-bottom:1px solid var(--line)}
.kl-lomba li:last-child,.kl-pres li:last-child{border-bottom:0}
/* saran prodi */
.kl-saran{display:grid;gap:10px}
@media (min-width:700px){.kl-saran{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
.kl-sar{display:grid;gap:8px;align-content:start;padding:14px;border-radius:var(--r);background:var(--sunken)}
.kl-sar:first-child{background:var(--brand-soft)}
.kl-sar .badge{background:var(--card);color:var(--ink);white-space:normal}
.kl-chips{gap:6px}
/* form & daftar */
.kl-form{display:grid;gap:0 12px}
.kl-form label{margin-top:0}
.kl-form>div{margin-top:4px}
@media (min-width:640px){.kl-form{grid-template-columns:1fr 1fr}}
.kl-filter{display:grid;gap:0 12px;grid-template-columns:1fr 1fr}
.kl-filter label{margin-top:0}
@media (min-width:760px){.kl-filter{grid-template-columns:1.4fr 1fr 1fr 120px}}
.kl-check{display:flex;gap:8px;align-items:center;font-size:14px;font-weight:600;cursor:pointer;margin:0}
.kl-check input{width:auto;min-height:0;margin:0}
.kl-list{display:grid}
.kl-item{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.kl-item:last-child{border-bottom:0}
.kl-item .grow{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.kl-item > .badge{min-width:64px;justify-content:center;text-align:center;flex:none}
button.kl-pick{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--ink);text-align:left;font:inherit;cursor:pointer;padding:12px 8px;border-radius:0}
button.kl-pick:hover{background:var(--sunken)}
.kl-pick .kl-chips{margin-top:6px}
.kl-go{color:var(--muted);font-size:20px}
.kl-sec{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:14px}
.kl-target{margin:0;padding-left:20px;display:grid;gap:4px}
.kl-jalur{display:grid;gap:6px}
.kl-jalur h3{font-size:.95rem;color:var(--brand-text)}
label.kl-cek{display:flex;gap:10px;align-items:flex-start;margin:0;padding:10px 12px;border-radius:var(--r);background:var(--sunken);font-weight:500;cursor:pointer}
.kl-cek input{width:18px;height:18px;min-height:0;margin:2px 0 0;flex:none}
.kl-cek b{display:block;font-weight:600}
.kl-cek small{display:block;font-size:12.5px}
.kl-cek:has(input:checked) b{text-decoration:line-through;color:var(--muted)}
/* ----- fitur: kuliah — selesai ----- */


/* ----- fitur: pemerataan — mulai ----- */
/* kartu utama: angka besar di kiri, titik sebelum/sesudah di kanan */
.pm-hero{display:grid;gap:22px;overflow:hidden;isolation:isolate;padding:26px}
.pm-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(420px 260px at 0% 0%,color-mix(in srgb,var(--sun) 14%,transparent),transparent 70%)}
@media (min-width:860px){.pm-hero{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:34px;padding:30px}
  .pm-hero-r{border-left:1px solid var(--line);padding-left:34px}}
.pm-hero-l,.pm-hero-r{display:grid;gap:12px;align-content:start}
.pm-label{font-size:13px;font-weight:700;color:var(--muted)}
.pm-big{font-size:clamp(3.4rem,11vw,5.4rem);font-weight:800;line-height:.95;letter-spacing:-.05em;color:var(--sun);font-variant-numeric:tabular-nums}
.pm-big.kosong{font-size:2rem;letter-spacing:-.03em;color:var(--muted)}
.pm-kal{font-size:16.5px;max-width:34ch}
.pm-delta-row{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.pm-delta{display:inline-flex;align-items:center;gap:4px;padding:4px 11px;border-radius:999px;font-size:13.5px;font-weight:700;background:var(--sunken);color:var(--muted);font-variant-numeric:tabular-nums}
.pm-delta.naik{background:var(--ok-soft);color:var(--ok)}
.pm-delta.turun{background:var(--bad-soft);color:var(--bad)}
.pm-delta-row small{font-size:13px;color:var(--muted)}
.pm-dots-row{display:grid;gap:8px;padding:14px 16px;border-radius:var(--r);background:var(--sunken)}
.pm-dots-h{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.pm-dots-h small{color:var(--muted);font-size:12.5px}
.pm-dots-p{margin-left:auto;align-self:center;font-weight:800;font-size:18px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pm-dots{display:flex;flex-wrap:wrap;gap:5px}
.pm-dots i{width:13px;height:13px;border-radius:50%;background:var(--line-strong)}
.pm-dots i.n{background:var(--sun)}
.pm-dots-kosong{font-size:14px}
.view.enter .pm-dots i{animation:pop .35s var(--spring) both;animation-delay:calc(.3s + var(--d) * 14ms)}
.pm-nums{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.pm-legend{display:flex;gap:16px;font-size:13px;color:var(--muted)}
.pm-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
.pm-legend i.u{background:var(--line-strong)}
.pm-legend i.n{background:var(--sun)}

/* angka ringkas dengan ikon; kartu "menunggu" bisa diklik */
.pm-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.pm-stats > .pm-aksi{grid-column:1/-1}
@media (min-width:700px){.pm-stats{grid-template-columns:repeat(5,minmax(0,1fr))}.pm-stats > .pm-aksi{grid-column:auto}}
.pm-stats .stat .n.kosong{font-size:1rem;padding:.55em 0 .3em}
.pm-kpi{display:grid;gap:2px;align-content:start;text-align:left;font:inherit;color:inherit}
.pm-kpi .k small{font-size:12px}
.pm-ik{display:grid;place-items:center;width:32px;height:32px;margin-bottom:6px;border-radius:10px;background:var(--sunken);color:var(--muted)}
.pm-ik svg{width:19px;height:19px}
button.pm-aksi{cursor:pointer;transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
button.pm-aksi:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.pm-aksi.ada{border-color:color-mix(in srgb,var(--sun) 45%,var(--line));background:linear-gradient(180deg,var(--brand-soft),var(--card) 80%)}
.pm-aksi.ada .pm-ik{background:var(--sun);color:#fff}
.pm-aksi.ada .n{color:var(--sun)}
.pm-aksi.ada small{color:var(--brand-text);font-weight:600}

/* sebaran & corong */
.pm-charts{display:grid;gap:14px}
@media (min-width:760px){.pm-charts{grid-template-columns:1fr 1fr}}
.pm-hbars{display:grid;gap:16px}
.pm-hrow{display:grid;grid-template-columns:1fr auto;gap:5px 10px;align-items:center}
.pm-hl{font-size:14px;font-weight:600}
.pm-hv{text-align:right;font-size:17px;font-variant-numeric:tabular-nums}
.pm-htrack{grid-column:1/-1;display:flex;height:12px;border-radius:999px;background:var(--sunken);overflow:hidden}
.pm-htrack i{display:block;height:100%}
.pm-htrack i.n{background:var(--sun)}
.pm-htrack i.u{background:var(--line-strong)}
.pm-hk{grid-column:1/-1;font-size:12.5px;color:var(--muted)}
.pm-steps{display:grid;gap:12px}
.pm-step{display:grid;gap:6px}
.pm-step-bar{height:34px;border-radius:9px;background:var(--sunken);overflow:hidden}
.pm-step-bar i{display:block;height:100%;width:var(--w);border-radius:9px;background:color-mix(in srgb,var(--sun) 35%,var(--sunken))}
.pm-step:last-child .pm-step-bar i{background:var(--sun)}
.pm-step-t{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;font-size:14px}
.pm-step-t b{font-size:17px;font-variant-numeric:tabular-nums}
.pm-step-t small{color:var(--muted);font-size:12.5px;margin-left:auto}
.view.enter :is(.pm-htrack i,.pm-step-bar i){transform-origin:left;animation:grow .9s .25s var(--ease-out) both}

/* per lomba */
.pm-lomba{display:grid}
.pm-lomba-r{display:grid;gap:6px 16px;padding:12px 0;border-bottom:1px solid var(--line)}
.pm-lomba-r:last-child{border-bottom:0;padding-bottom:0}
.pm-lomba-r:first-child{padding-top:0}
@media (min-width:760px){.pm-lomba-r{grid-template-columns:minmax(0,1.3fr) auto minmax(120px,.7fr);align-items:center}}
.pm-lomba-j{font-size:14.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-lomba-n{display:flex;gap:14px;font-size:13px;color:var(--muted);white-space:nowrap}
.pm-lomba-n b{color:var(--ink);font-variant-numeric:tabular-nums}
.pm-lomba-n .hl b{color:var(--sun)}
.pm-lomba-bar{display:block;height:8px;border-radius:999px;background:var(--sunken);overflow:hidden}
.pm-lomba-bar > i{display:block;height:100%;background:var(--line-strong);border-radius:999px;overflow:hidden}
.pm-lomba-bar > i > i{display:block;height:100%;background:var(--sun)}

/* pemantauan */
.pm-filter{display:grid;gap:12px;align-items:end}
@media (min-width:560px){.pm-filter{grid-template-columns:220px auto}}
.pm-check{display:flex;gap:8px;align-items:center;margin:0 0 10px;cursor:pointer}
.pm-check input{width:18px;height:18px;min-height:0}
.pm-people{display:grid;gap:8px;margin:0;padding:0;list-style:none;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));max-height:440px;overflow:auto}
.pm-people li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r);background:var(--sunken);min-width:0}
.pm-people .grow{min-width:0;flex:1}
.pm-people b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-people small{display:block;font-size:12.5px}
.pm-people .avatar{width:32px;height:32px;font-size:12px}
.pm-cara summary{cursor:pointer;font-weight:700}
.pm-2{display:grid;gap:0 12px}
@media (min-width:480px){.pm-2{grid-template-columns:1fr 1fr}}
/* pilihan format unduhan */
.pm-fmts{display:grid;gap:10px}
.pm-fmt{display:grid;gap:2px;text-align:left;padding:14px 16px;border-radius:var(--r);border:1px solid var(--line-strong);background:var(--card);color:var(--ink);font:inherit;cursor:pointer;transition:border-color .15s,background .15s}
.pm-fmt:hover{border-color:var(--sun);background:var(--brand-soft)}
.pm-fmt small{color:var(--muted);font-size:13px}
/* ----- fitur: pemerataan — selesai ----- */

/* ----- fitur: akun — mulai ----- */
.ak-kode{font:700 13px/1 var(--f-mono);letter-spacing:.08em;padding:3px 6px;border-radius:6px;background:var(--sunken)}
.ak-kode-besar{font:800 40px/1.1 var(--f-display);letter-spacing:.18em;text-align:center;padding:18px 12px;border-radius:var(--r);background:var(--brand-soft);color:var(--brand-text)}
.ak-table td{vertical-align:middle}
.ak-aksi{white-space:nowrap;text-align:right}
.ak-aksi .btn{min-height:32px;padding:0 10px;font-size:13px}
.ak-satu summary{font-weight:600;font-size:14px;padding:4px 0}
.ak-satu-form{display:grid;gap:0 12px;margin-top:4px}
@media (min-width:640px){.ak-satu-form{grid-template-columns:140px 1fr 140px auto;align-items:end}}
.ak-satu-form > div:last-child{margin-top:12px}
/* ----- fitur: akun — selesai ----- */