:root{
--bg:#f1f1f4;--kartu:#fff;--teks:#1c1b27;--redup:#8b8a97;--garis:#ebebef;
--sisi:#1f1d2e;--sisi-teks:#a9a7bb;--gelap:#1f1d2e;--gelap-teks:#fff;
--aksen:#f29db0;--aksen-kuat:#d9577a;--aksen-tipis:#fde4ea;
--ungu:#e8e0fb;--kuning:#fdedc9;--pink:#fcd5dd;--mint:#d3eef1;--peach:#fde3d1;--abu:#ececf0;
--hijau:#2f9467;--kuning-tua:#c48a12;--merah:#d24c55;--tipis:#f3f3f6}
@media (prefers-color-scheme:dark){:root{
--bg:#14131b;--kartu:#1e1d28;--teks:#edebf4;--redup:#9896a6;--garis:#2b2a37;
--sisi:#0d0c13;--sisi-teks:#8b89a0;--gelap:#edebf4;--gelap-teks:#14131b;
--aksen:#f29db0;--aksen-kuat:#f4a7b9;--aksen-tipis:#3d2630;
--ungu:#332c4d;--kuning:#40361f;--pink:#47293a;--mint:#1f3d42;--peach:#45311f;--abu:#2a2935;
--hijau:#55c08f;--kuning-tua:#e3ae45;--merah:#ec7a80;--tipis:#262532}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--teks);font:14.5px/1.55 "Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:inherit}
p a,td a,li a,.tautan{color:var(--aksen-kuat);text-decoration:none}
p a:hover,td a:hover,li a:hover,.tautan:hover{text-decoration:underline}

/* Kerangka: sidebar ikon + isi */
.shell{display:flex;min-height:100vh}
.sisi{position:sticky;top:16px;height:calc(100vh - 32px);margin:16px 0 16px 16px;width:72px;flex:none;background:var(--sisi);
border-radius:36px;display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:8px}
.logo{width:52px;height:52px;border-radius:50%;background:#fff;display:block;position:relative;margin-bottom:12px;flex:none}
.logo-a,.logo-b{position:absolute;border-radius:6px}
.logo-a{width:14px;height:14px;background:var(--aksen);left:13px;top:13px}
.logo-b{width:14px;height:14px;background:#1f1d2e;right:13px;bottom:13px}
.sisi-nav{display:flex;flex-direction:column;gap:6px;flex:1}
.sisi-nav a{display:grid;place-items:center;width:72px;height:48px;color:var(--sisi-teks);position:relative}
.sisi-ikon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;transition:background .15s,color .15s}
.sisi-nav a:hover .sisi-ikon{background:rgba(255,255,255,.08);color:#fff}
.sisi-nav a.aktif .sisi-ikon{background:var(--aksen);color:#1f1d2e;box-shadow:0 0 0 6px var(--bg)}
.sisi-bawah{display:flex;flex-direction:column;align-items:center;gap:10px;margin:0}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--peach);color:#1f1d2e;display:grid;place-items:center;font-weight:700;border:2px solid var(--aksen)}
.sisi-keluar{background:transparent;border:0;color:var(--sisi-teks);padding:8px;cursor:pointer;border-radius:50%}
.sisi-keluar:hover{color:#fff;background:rgba(255,255,255,.08)}
.konten{flex:1;min-width:0;padding:28px 28px 64px;max-width:1240px}

h1{font-size:26px;margin:0 0 4px;font-weight:700;letter-spacing:-.01em}
h2{font-size:18px;margin:0 0 12px;font-weight:700}
h3{font-size:15px;margin:0 0 8px;font-weight:600}
.sub{color:var(--redup);margin:0 0 24px}
.redup{color:var(--redup)}.kecil{font-size:12.5px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.kartu{background:var(--kartu);border:1px solid var(--garis);border-radius:24px;padding:20px;margin-bottom:16px}
.grid .kartu{margin-bottom:0}
.angka{font-size:28px;font-weight:700;line-height:1.1}

/* Tile pastel dan ikon bulat */
.tile{border-radius:20px;padding:16px;border:1px solid transparent}
.bg-ungu{background:var(--ungu)}.bg-kuning{background:var(--kuning)}.bg-pink{background:var(--pink)}
.bg-mint{background:var(--mint)}.bg-peach{background:var(--peach)}.bg-abu{background:var(--abu)}
.bulat{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--tipis);flex:none;color:var(--teks)}
.bulat.gelap{background:var(--gelap);color:var(--gelap-teks)}
.bulat.terang{background:rgba(255,255,255,.65)}
@media (prefers-color-scheme:dark){.bulat.terang{background:rgba(255,255,255,.08)}}
.bulat.kecil-b{width:36px;height:36px}
button.bulat,a.bulat{border:0;cursor:pointer;text-decoration:none;padding:0}
button.bulat.gelap:hover,a.bulat.gelap:hover{opacity:.85}

.banner{border-radius:18px;padding:12px 16px;margin-bottom:16px;border:1px solid transparent}
.banner.info{background:var(--ungu)}
.banner.peringatan{background:var(--kuning)}
.banner.sukses{background:var(--mint)}
.bar-baris{display:grid;grid-template-columns:minmax(120px,200px) 1fr 110px;gap:12px;align-items:center;margin:10px 0}
.bar{height:8px;background:var(--tipis);border-radius:6px;overflow:hidden}
.tile .bar{background:rgba(255,255,255,.6)}
@media (prefers-color-scheme:dark){.tile .bar{background:rgba(255,255,255,.1)}}
.bar>span{display:block;height:100%;border-radius:6px}
.isi-hijau{background:var(--hijau)}.isi-kuning{background:var(--kuning-tua)}.isi-merah{background:var(--merah)}.isi-aksen{background:var(--gelap)}
.label{display:inline-block;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--tipis);color:var(--redup)}
.label.ok{background:var(--mint);color:var(--hijau)}
.label.telat{background:var(--pink);color:var(--merah)}
.label.jalan{background:var(--ungu);color:var(--teks)}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--garis);vertical-align:top}
tr:last-child td{border-bottom:0}
th{font-weight:600;color:var(--redup);font-size:12.5px}
form.isi{display:grid;gap:12px}
.dua{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
label{display:grid;gap:4px;font-size:12.5px;color:var(--redup)}
input,select,textarea{font:inherit;color:var(--teks);background:var(--kartu);border:1px solid var(--garis);border-radius:12px;padding:9px 12px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--aksen);outline-offset:0;border-color:transparent}
textarea{min-height:90px;resize:vertical}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--gelap)}
.cek{display:flex;gap:8px;align-items:center;color:var(--teks);font-size:14.5px}
button,.tombol{font:inherit;font-weight:600;cursor:pointer;border:1px solid var(--garis);background:var(--kartu);color:var(--teks);border-radius:999px;padding:9px 18px;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
button:hover,.tombol:hover{background:var(--tipis)}
.tombol.utama,button.utama{background:var(--gelap);border-color:var(--gelap);color:var(--gelap-teks)}
button.utama:hover,.tombol.utama:hover{opacity:.88;background:var(--gelap)}
button.hapus{color:var(--merah);padding:4px 12px;font-weight:500}
.sebaris{display:inline-flex;gap:8px;align-items:center;margin:0}
.sebaris select{width:auto;padding:5px 10px;font-size:12.5px;border-radius:999px}
ul.daftar{list-style:none;padding:0;margin:0}
ul.daftar li{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--garis)}
ul.daftar li:last-child{border-bottom:0}
.selesai-coret{text-decoration:line-through;color:var(--redup)}
.tren{display:flex;align-items:flex-end;gap:8px;height:120px;padding-top:8px;position:relative}
.tren .kolom{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px;text-decoration:none}
.tren .kolom span.b{width:100%;max-width:36px;border-radius:10px;background:var(--ungu)}
.tren .kolom.ini span.b{background:var(--gelap)}
.tren .garis-target{position:absolute;left:0;right:0;border-top:1.5px dashed var(--aksen)}
.navminggu{display:flex;gap:8px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.status-dipakai{background:var(--mint)}.status-paham{background:var(--ungu)}.status-sedang{background:var(--kuning)}
.centang{margin:0;padding:10px 0;border-bottom:1px solid var(--garis)}
.centang:last-child{border-bottom:0}
.sub-centang{margin:2px 0 0 26px}
.detail-centang{margin:4px 0 0 26px}
.detail-centang summary{cursor:pointer}
.baris-centang{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.baris-centang input[type=url],.baris-centang input[type=text]{flex:1;min-width:200px;padding:5px 10px;font-size:12.5px}
.baris-centang button{padding:5px 12px;font-size:12.5px}
tr.ini td{background:var(--aksen-tipis)}
.hari-ini{border-left:3px solid var(--aksen);padding-left:10px}
.libur{color:var(--redup)}

/* Dashboard */
.dash{display:grid;grid-template-columns:340px 1fr;gap:24px;align-items:start}
.dash>*,.hero-baris>*{min-width:0}
.bisa-klik{position:relative;cursor:pointer}
.tautan-penuh{text-decoration:none;color:inherit}
.tautan-penuh::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0}
.bisa-klik form,.bisa-klik .tombol,.bisa-klik .aksi-bulat,.bisa-klik .hero-aksi,.bisa-klik a:not(.tautan-penuh){position:relative;z-index:1}
.kartu-blok.bisa-klik:hover,.hero.bisa-klik:hover{outline:2px solid var(--aksen);outline-offset:-2px}
tr.bisa-klik:hover td{background:var(--tipis)}
label.cek,summary,select,input[type=checkbox]{cursor:pointer}
.tabel-gulir{overflow-x:auto}
.panel-kiri{background:var(--kartu);border-radius:28px;padding:22px;border:1px solid var(--garis);position:sticky;top:16px}
.tile-tugas{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:20px;border:1.5px solid var(--garis);margin-bottom:10px;text-decoration:none;background:var(--kartu)}
.tile-tugas:hover{border-color:var(--aksen)}
.tile-tugas.pertama{border-color:var(--aksen);background:var(--aksen-tipis)}
.tile-tugas .isi-t{flex:1;min-width:0}
.tile-tugas .judul-t{font-weight:600;font-size:13.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nomor{display:block;font-size:11px;font-weight:700;color:var(--redup);letter-spacing:.04em;text-transform:uppercase}
.hero-baris{display:grid;grid-template-columns:minmax(260px,1.1fr) minmax(0,2fr);gap:14px;margin-bottom:28px}
.hero{border-radius:24px;padding:22px;background:var(--pink);display:flex;flex-direction:column;gap:10px}
.hero .jam-besar{font-size:13px;font-weight:600;color:var(--teks);opacity:.7}
.hero .judul-h{font-size:20px;font-weight:700;line-height:1.3}
.hero .detail-h{font-size:13.5px}
.hero-aksi{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.tile-bidang-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.tile-bidang{display:flex;flex-direction:column;gap:10px;text-decoration:none;min-height:120px}
.tile-bidang .nama-b{font-weight:600;font-size:13px}
.tile-bidang .jam-b{font-size:12px;opacity:.75}
.tile-bidang.tertinggal{border-color:var(--teks)}
.jadwal-baris{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-bottom:28px}
.kartu-blok{background:var(--kartu);border:1px solid var(--garis);border-radius:24px;padding:18px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.kartu-blok.lewat{opacity:.55}
.kartu-blok.kini{border:2px solid var(--aksen)}
.lencana{width:100%;border-radius:14px;padding:10px 12px;font-size:12.5px;line-height:1.4}
.lencana strong{display:block;font-size:13px;margin-bottom:2px}
.kotak-dua{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.kotak{background:var(--tipis);border-radius:12px;padding:8px 10px;text-align:left}
.kotak .k-label{font-size:11px;color:var(--hijau);font-weight:600}
.kotak .k-isi{font-size:13px;font-weight:600}
.aksi-bulat{display:flex;gap:8px;justify-content:center;margin-top:4px}
.judul-bagian{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.judul-bagian h2{margin:0;font-size:22px}
.sub-bagian{color:var(--redup);font-size:12.5px;margin:0 0 14px}

@media (max-width:1100px){.dash{grid-template-columns:minmax(0,1fr)}.panel-kiri{position:static}.hero-baris{grid-template-columns:minmax(0,1fr)}}
@media (max-width:720px){
.shell{display:block}
.sisi{position:fixed;z-index:10;bottom:10px;left:10px;right:10px;top:auto;height:64px;width:auto;margin:0;flex-direction:row;padding:0 10px;border-radius:32px}
.logo,.sisi-bawah .avatar{display:none}
.sisi-nav{flex-direction:row;justify-content:space-around;gap:0}
.sisi-nav a{width:auto;flex:1;height:64px}
.sisi-ikon{width:40px;height:40px}
.sisi-nav a.aktif .sisi-ikon{box-shadow:none}
.konten{padding:20px 16px 100px}
.bar-baris{grid-template-columns:1fr 90px}.bar-baris .bar{grid-column:1/-1;order:3}}