:root{--bg:#EEF2F7;--card:#FFFFFF;--surf:#FFFFFF;--lk:#1D4F9F;--z:1;--tint:#E7EEF9;--tint2:#F5F8FB;--track:#E1E8F0;--bd:#BCC8D6;--bubble:#E9EEF5;--pre:#F5F8FB;--luar:#8D9BAD;--ok-bg:#E1F3E8;--ok-ink:#14703A;--warn-bg:#FCEFD2;--warn-ink:#94560A;--err-bg:#FCE8E6;--err-ink:#B3261E;--neu-bg:#E8EDF3;--neu-ink:#43536A;--impbg:#FFF6DF;--impink:#5A4208;--impbd:#F0D9A0;--amber:#94560A;--ink:#0F1C2E;--muted:#4F5F73;--faint:#667689;--p:#1D4F9F;--p2:#163F82;--acc:#1D4F9F;--acc2:#163F82;--on-acc:#FFFFFF;--in:#14703A;--out:#B3261E;--line:#D7DFE9;--line-soft:#E6ECF3;--brand:#1D4F9F;--brand-hover:#163F82;--brand-ink:#1D4F9F;--on-brand:#FFFFFF;--brand-tint:#E7EEF9;--brand-tint2:#D3E1F5;--brand-soft:#8AA7D6;--brand-950:#0F2547;--focus:rgba(29,79,159,.38);--focus-ring:0 0 0 4px rgba(29,79,159,.14);--surface-3:#E9EEF5;--line-strong:#BCC8D6;--scrim:rgba(10,20,35,.55);--card-glass:rgba(255,255,255,.96);--ok-solid:#1B9A55;--warn-solid:#D9880F;--danger-solid:#D1362B;--bayang:0 1px 2px rgba(15,28,46,.05);--shadow-sm:0 1px 3px rgba(15,28,46,.09),0 1px 2px rgba(15,28,46,.05);--shadow-lg:0 14px 28px -6px rgba(15,28,46,.16),0 4px 8px -2px rgba(15,28,46,.06);--r:16px;--sbw:290px;--sbw-mini:90px;--maks:1120px;--sab:0px;--sat:0px;--mtop-h:56px;--msub-h:52px;--mbar-h:66px;--font:"Outfit","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Roboto,Arial,sans-serif;color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-variant-numeric:tabular-nums;margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:calc(15px*var(--z));line-height:1.5;-webkit-font-smoothing:antialiased}
/* Font Seruma = Plus Jakarta Sans. CSP aplikasi hanya mengizinkan 'self', jadi font harus dilayani dari /static/fonts/.
   Letakkan PlusJakartaSans-latin-wght.woff2 (variabel, 500-800) di app/static/fonts/ lalu aktifkan blok ini:
@font-face{font-family:"Plus Jakarta Sans";src:url("/static/fonts/PlusJakartaSans-latin-wght.woff2") format("woff2");font-weight:500 800;font-display:swap}
   Tanpa file itu, tampilan memakai font sistem (tidak ada permintaan jaringan yang gagal). */
a{color:var(--lk);text-decoration:none}
h1{font-size:calc(22px*var(--z));font-weight:650;letter-spacing:-.01em;margin:0}h2{font-size:calc(16px*var(--z));font-weight:650;margin:0 0 8px}h3{font-size:calc(12px*var(--z));font-weight:650;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:18px 4px 6px}
small{font-size:calc(12px*var(--z));display:block;color:var(--muted)}
.wrap{max-width:560px;margin:0 auto;padding:max(14px,var(--sat)) 14px 24px}
.wrap.has-nav{padding-bottom:calc(92px + var(--sab))}
body.punya-rumah .wrap{padding-top:14px}
.muted{color:var(--muted)}.center{text-align:center}.grow{flex:1;min-width:0}
.row{display:flex;align-items:center;gap:10px}.between{justify-content:space-between}.gap{gap:8px;margin-top:10px}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 12px;flex-wrap:wrap}
.top a{font-weight:600}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:12px;box-shadow:var(--bayang)}
.hero{background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;border-color:transparent}.hero small{color:rgba(255,255,255,.78)}.hero a{color:#CFE0FA;text-decoration:underline}
.big{font-size:calc(28px*var(--z));font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.grid2 .card{margin:0}.grid2{margin-bottom:12px}
.pill{background:var(--ok-bg);color:var(--ok-ink);padding:3px 10px;border-radius:99px;font-size:calc(12px*var(--z));font-weight:650}.pill.off{background:var(--err-bg);color:var(--out)}
.amt{font-weight:650;white-space:nowrap;font-variant-numeric:tabular-nums}.amt.pemasukan{color:var(--in)}.amt.pengeluaran{color:var(--out)}
.trx{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);color:inherit}
.card>.trx:first-of-type,.card>small+.trx{border-top:0}
a.card.trx{padding:12px 16px}
.trx b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ico{width:38px;height:38px;border-radius:12px;background:var(--tint);display:grid;place-items:center;font-size:calc(18px*var(--z));flex:none}
.btn{box-shadow:var(--bayang);display:inline-block;background:var(--acc);color:var(--on-acc);border:0;border-radius:10px;padding:11px 18px;font-weight:650;font-size:calc(15px*var(--z));font-family:inherit;cursor:pointer;text-align:center}
.btn:hover,.btn:active{background:var(--acc2)}.btn.block{display:block;width:100%;margin-top:10px}
.btn.ghost{background:var(--surf);color:var(--ink);border:1px solid var(--bd)}.btn.ghost:hover,.btn.ghost:active{background:var(--tint)}.btn.danger{background:var(--surf);color:var(--out);border:1px solid var(--out)}
.link{background:none;border:0;font-size:calc(18px*var(--z));cursor:pointer;padding:4px;color:var(--lk)}
.form label{display:block;font-weight:600;margin-bottom:12px;font-size:calc(13px*var(--z))}
input,select{display:block;width:100%;margin-top:5px;padding:12px;border:1px solid var(--bd);border-radius:12px;font-size:calc(16px*var(--z));font-family:inherit;background:var(--surf);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand-soft);box-shadow:var(--focus-ring)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.big-input{font-size:calc(24px*var(--z));font-weight:650}
.flash{padding:10px 14px;border-radius:12px;margin-bottom:10px;font-weight:600;word-break:break-word}
.flash.ok{background:var(--ok-bg);color:var(--ok-ink)}.flash.error{background:var(--err-bg);color:var(--err-ink)}
.chips{display:flex;gap:8px;overflow-x:auto;margin:0 0 12px;padding-bottom:2px}
.chip{padding:7px 14px;border-radius:99px;background:var(--surf);border:1px solid var(--line);font-weight:600;white-space:nowrap;font-size:calc(13px*var(--z));color:var(--ink)}
.chip.on{background:var(--p);color:#fff;border-color:var(--p)}
.monthbar{margin-bottom:10px}.monthbar a{font-size:calc(26px*var(--z));padding:0 14px;color:var(--ink)}
.bar{margin:8px 0}.track{height:8px;background:var(--track);border-radius:9px;margin-top:4px}.track div{height:8px;background:var(--acc);border-radius:9px}
.brand{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:calc(24px*var(--z));font-weight:650;letter-spacing:-.01em;margin:8px 0 18px}.brand img{width:56px;height:56px;border-radius:16px;box-shadow:var(--shadow-sm)}.brand small{margin-top:0;font-size:calc(13px*var(--z));font-weight:500;color:var(--muted)}
body[data-auth="0"]>.wrap{display:flex;flex-direction:column;justify-content:center;min-height:100dvh;padding-top:24px;padding-bottom:24px}
body[data-auth="0"]>.wrap .card{box-shadow:var(--shadow-lg);padding:22px}
.menu a{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:8px;color:var(--ink);box-shadow:var(--bayang)}
.menu a b{display:block;font-weight:650}
.menu+form{margin-top:18px}
.fab{display:none!important;position:fixed;right:max(16px,calc(50% - 264px));bottom:calc(84px + var(--sab));background:var(--acc);color:var(--on-acc);font-weight:650;padding:13px 20px;border-radius:99px;box-shadow:0 6px 18px rgba(0,0,0,.22)}
.bottom{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;background:var(--surf);border-top:1px solid var(--line);padding:6px 6px calc(6px + var(--sab));z-index:5}
.bottom a{position:relative;flex:1;max-width:112px;text-align:center;font-size:calc(11px*min(var(--z),1.1));font-weight:600;color:var(--muted);padding:6px 0 4px}
.bottom a svg{display:block;margin:0 auto 2px}.bottom a.on{color:var(--ink);font-weight:650}
.bottom a.on::before{content:"";position:absolute;top:-7px;left:28%;right:28%;height:3px;border-radius:0 0 3px 3px;background:var(--acc)}
.copy{font-size:calc(13px*var(--z));margin-bottom:8px}
/* ---- Step 2A: kunci PIN, penanda sinkron ---- */
.terkunci main,.terkunci .app>*,.terkunci .mbar,.terkunci .fab,.terkunci #sync-pill{visibility:hidden}
#kunci{display:none;position:fixed;inset:0;z-index:100;background:var(--bg);align-items:center;justify-content:center;padding:20px}
.terkunci #kunci{display:flex}
.kunci-box{width:100%;max-width:320px;text-align:center}
#kunci-titik{display:flex;justify-content:center;gap:12px;margin:14px 0}
#kunci-titik i{width:14px;height:14px;border-radius:50%;border:2px solid var(--p)}
#kunci-titik i.on{background:var(--p)}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0 14px}
.keypad button{font-weight:650;font-size:calc(22px*var(--z));font-family:inherit;padding:16px 0;border-radius:14px;border:1px solid var(--line);background:var(--surf);color:var(--ink);cursor:pointer}
.keypad button:active{background:var(--tint)}
#kunci-pesan{min-height:22px;margin:0}
#sync-pill{position:fixed;top:max(8px,var(--sat));right:10px;z-index:6;font-size:calc(11px*var(--z));font-weight:650;padding:4px 10px;border-radius:99px;background:var(--ok-bg);color:var(--ok-ink);box-shadow:0 2px 8px rgba(0,0,0,.12)}
#sync-pill.wait{background:var(--warn-bg);color:var(--warn-ink)}#sync-pill.off{background:var(--neu-bg);color:var(--neu-ink)}#sync-pill.warn{background:var(--err-bg);color:var(--err-ink)}
[hidden]{display:none!important}
/* ---- Step 2B: anggaran, kalender, tugas ---- */
.track.aman div{background:var(--in)}.track.hampir div{background:#D99A00}.track.lewat div{background:var(--out)}
.st-aman{color:var(--in)}.st-hampir{color:var(--amber)}.st-lewat{color:var(--out)}
.kal{padding:10px}
.kal-head,.kal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.kal-head span{font-size:calc(11px*var(--z));font-weight:650;color:var(--muted);padding-bottom:4px}
.kal-hari{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:46px;border-radius:12px;color:var(--ink);font-weight:600}
.kal-hari.luar{color:var(--luar)}.kal-hari.ini span{background:var(--p);color:#fff;border-radius:99px;padding:0 7px}
.kal-hari.pilih{background:var(--tint);outline:2px solid var(--p)}
.dots{display:flex;gap:3px;min-height:6px;font-style:normal}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--muted)}
.dot.agenda{background:var(--p)}.dot.tagihan{background:var(--acc)}.dot.tugas{background:#7C6BC4}
.kal-legend{margin-top:8px;text-align:center}.kal-legend .dot{margin-right:3px}
.tugas .cek{width:28px;height:28px;border-radius:50%;border:2px solid var(--p);background:var(--surf);color:#fff;font-size:calc(15px*var(--z));line-height:1;cursor:pointer;padding:0}
.tugas.selesai .cek{background:var(--p)}.tugas.selesai b{text-decoration:line-through;color:var(--muted)}
.telat{color:var(--out);font-weight:650}
.row.gap input{margin-top:0}
code{background:var(--tint2);padding:1px 6px;border-radius:6px;font-size:calc(13px*var(--z))}
button.chip{cursor:pointer;font-weight:600;font-size:calc(13px*var(--z));font-family:inherit}

.tbl{border-collapse:collapse;width:100%;font-size:calc(12px*var(--z));white-space:nowrap}.tbl th,.tbl td{padding:5px 8px;text-align:right;border-bottom:1px solid var(--line)}.tbl th:first-child,.tbl td:first-child{text-align:left}
.dot.cicilan{background:var(--out)}
details>summary{cursor:pointer;font-weight:600;color:var(--lk)}

/* ---- Step 3B: aset, neraca, laporan ---- */
.pie{width:120px;height:120px;flex:none}.legend{font-size:calc(13px*var(--z));display:grid;gap:4px}
.swatch{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
.chart{width:100%;height:110px;display:block}.chart-lbl{display:flex;justify-content:space-between;font-size:calc(11px*var(--z));color:var(--muted);margin-top:2px}
.up{color:var(--in)}.down{color:var(--out)}.trx small.up,.trx small.down{display:block}

/* ---- Step 3C ---- */
.tagchip{display:inline-block;padding:1px 8px;border-radius:99px;font-size:calc(11px*var(--z));font-weight:650;color:var(--c,#9A5F45);border:1px solid var(--c,#9A5F45);margin:2px 2px 0 0}
.chips.wrap{flex-wrap:wrap;overflow:visible}.chip.tagopt{display:inline-flex;gap:6px;align-items:center;cursor:pointer}.chip.tagopt input{width:auto;margin:0}
.thumbs{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0}.thumb{width:96px;text-align:center}.thumb img{width:96px;height:128px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.field>span{display:block;font-weight:600;margin-bottom:4px}
.pre{white-space:pre-wrap;word-break:break-word;font-size:calc(13px*var(--z));line-height:1.5;font-family:inherit;background:var(--pre);border-radius:10px;padding:10px}
textarea{width:100%;font:inherit;padding:10px;border:1px solid var(--bd);border-radius:12px;background:var(--surf);color:var(--ink)}
input[type=color]{width:44px;height:38px;padding:2px;flex:none}
[hidden]{display:none!important}

/* ---- Step 4A: perawatan, keluarga, tugas rumah ---- */
.dot.servis{background:#D97706}.dot.ultah{background:#DB2777}.dot.tugasrt{background:#0EA5E9}
.st{font-size:calc(11px*var(--z));font-weight:650;padding:3px 9px;border-radius:99px;white-space:nowrap;flex:none;display:inline-block}
.st-ok{background:var(--ok-bg);color:var(--ok-ink)}.st-segera{background:var(--warn-bg);color:var(--warn-ink)}.st-terlambat{background:var(--err-bg);color:var(--err-ink)}.st-belum_ada{background:var(--neu-bg);color:var(--neu-ink)}
.trx.tugas.selesai b{text-decoration:line-through;color:var(--muted)}
.trx .chip{font-size:calc(12px*var(--z));padding:5px 10px}

/* Step 4C: Berdua */
.sampul{width:100%;max-height:220px;object-fit:cover;border-radius:12px;margin-bottom:10px;display:block}
.kartu-tanya{font-size:calc(16px*var(--z));font-weight:600;line-height:1.45;margin:8px 0}
.kartu-besar{font-size:calc(20px*var(--z));font-weight:650;margin:14px 6px}
.hero .kartu-tanya{color:#fff}
.bubble{background:var(--bubble);border-radius:12px;padding:10px 12px;margin:8px 0}
.bubble audio{width:100%;margin-top:6px}
#rekam audio{width:100%;margin:8px 0}
a.card.momen{display:block;color:inherit}
.thn{margin:14px 2px 6px;color:var(--muted);font-size:calc(13px*var(--z))}
img.mini{width:72px;height:72px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.imp-bar{background:var(--impbg);color:var(--impink);border:1px solid var(--impbd);border-radius:12px;padding:8px 12px;margin-bottom:10px;font-size:calc(13px*var(--z))}.imp-bar form{display:inline;margin-left:8px}
.land-hero{text-align:center;padding:22px 4px 10px}.land-hero h1{font-size:calc(26px*var(--z));line-height:1.2;margin:0 0 10px}.land-hero p{color:var(--muted);margin:0 0 14px}
article.card p{line-height:1.55}article.card ul,.card ul{padding-left:20px}

/* ---- Step 5C: tema (terang bawaan | gelap | ikut perangkat) dan ukuran huruf. Palet = SatuMSP (theme.css) ---- */
html[data-tema="gelap"]{--bg:#0A1119;--card:#101A25;--surf:#101A25;--lk:#7FB0F5;--tint:#16294A;--tint2:#15212E;--track:#243445;--bd:#364B61;--bubble:#1C2B3A;--pre:#15212E;--luar:#5F7388;--ok-bg:#11301F;--ok-ink:#5FD08F;--warn-bg:#3A2A0B;--warn-ink:#F0B45A;--err-bg:#411A17;--err-ink:#FF9A91;--neu-bg:#1F2D3C;--neu-ink:#B4C2D1;--impbg:#2C2410;--impink:#F5E3A0;--impbd:#5A4716;--amber:#F0B45A;--ink:#E8EEF5;--muted:#A3B3C4;--faint:#7D8FA4;--p:#2C68C8;--p2:#3A78DB;--acc:#2C68C8;--acc2:#3A78DB;--on-acc:#FFFFFF;--in:#5FD08F;--out:#FF9A91;--line:#243445;--line-soft:#1A2837;--brand:#2C68C8;--brand-hover:#3A78DB;--brand-ink:#7FB0F5;--brand-tint:#16294A;--brand-tint2:#1D3760;--brand-soft:#4C78BD;--brand-950:#070E1A;--focus:rgba(127,176,245,.55);--focus-ring:0 0 0 4px rgba(127,176,245,.18);--surface-3:#1C2B3A;--line-strong:#364B61;--scrim:rgba(0,4,10,.7);--card-glass:rgba(16,26,37,.96);--ok-solid:#2FAE6A;--warn-solid:#E49A24;--danger-solid:#E5483C;--bayang:0 1px 2px rgba(0,0,0,.4);--shadow-sm:0 1px 3px rgba(0,0,0,.5);--shadow-lg:0 14px 28px -6px rgba(0,0,0,.65),0 4px 8px -2px rgba(0,0,0,.4);color-scheme:dark}
@media (prefers-color-scheme:dark){html[data-tema="sistem"]{--bg:#0A1119;--card:#101A25;--surf:#101A25;--lk:#7FB0F5;--tint:#16294A;--tint2:#15212E;--track:#243445;--bd:#364B61;--bubble:#1C2B3A;--pre:#15212E;--luar:#5F7388;--ok-bg:#11301F;--ok-ink:#5FD08F;--warn-bg:#3A2A0B;--warn-ink:#F0B45A;--err-bg:#411A17;--err-ink:#FF9A91;--neu-bg:#1F2D3C;--neu-ink:#B4C2D1;--impbg:#2C2410;--impink:#F5E3A0;--impbd:#5A4716;--amber:#F0B45A;--ink:#E8EEF5;--muted:#A3B3C4;--faint:#7D8FA4;--p:#2C68C8;--p2:#3A78DB;--acc:#2C68C8;--acc2:#3A78DB;--on-acc:#FFFFFF;--in:#5FD08F;--out:#FF9A91;--line:#243445;--line-soft:#1A2837;--brand:#2C68C8;--brand-hover:#3A78DB;--brand-ink:#7FB0F5;--brand-tint:#16294A;--brand-tint2:#1D3760;--brand-soft:#4C78BD;--brand-950:#070E1A;--focus:rgba(127,176,245,.55);--focus-ring:0 0 0 4px rgba(127,176,245,.18);--surface-3:#1C2B3A;--line-strong:#364B61;--scrim:rgba(0,4,10,.7);--card-glass:rgba(16,26,37,.96);--ok-solid:#2FAE6A;--warn-solid:#E49A24;--danger-solid:#E5483C;--bayang:0 1px 2px rgba(0,0,0,.4);--shadow-sm:0 1px 3px rgba(0,0,0,.5);--shadow-lg:0 14px 28px -6px rgba(0,0,0,.65),0 4px 8px -2px rgba(0,0,0,.4);color-scheme:dark}}
html[data-huruf="kecil"]{--z:.9}html[data-huruf="besar"]{--z:1.15}html[data-huruf="sangat_besar"]{--z:1.3}
html[data-tema="gelap"] .kal-hari.pilih{outline-color:var(--lk)}
@media (prefers-color-scheme:dark){html[data-tema="sistem"] .kal-hari.pilih{outline-color:var(--lk)}}
html[data-tema="gelap"] img.mini,html[data-tema="gelap"] .thumb img{opacity:.92}
/* skor & syariah */
.gauge{display:block;margin:0 auto;max-width:220px;width:100%}.gauge .g-track{stroke:var(--track)}.gauge text{fill:var(--ink)}
.gauge.sehat .g-isi{stroke:var(--in)}.gauge.cukup .g-isi{stroke:#65A30D}.gauge.perhatian .g-isi{stroke:var(--amber)}.gauge.rawan .g-isi{stroke:var(--out)}
.komp{padding:10px 0;border-top:1px solid var(--line)}.komp:first-of-type{border-top:0}
.komp .track div{background:var(--p)}
.waktu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.waktu{background:var(--tint2);border-radius:12px;padding:10px 12px;display:flex;justify-content:space-between;align-items:baseline}
.waktu b{font-size:calc(18px*var(--z))}.waktu.now{outline:2px solid var(--lk)}.waktu.sunat{opacity:.75}
.kiblat{display:block;margin:6px auto;width:120px;height:120px}.kiblat circle{fill:var(--tint2);stroke:var(--line)}.kiblat .jarum{stroke:var(--out);stroke-width:4;stroke-linecap:round}.kiblat text{fill:var(--muted);font-size:11px}
.hasil{border:2px solid var(--lk)}.hasil.tidak{border-color:var(--line)}
.seg{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}.seg label{margin:0;flex:1;min-width:120px;font-weight:600}
.pilih-kartu{display:flex;gap:10px;align-items:center;border:1px solid var(--bd);border-radius:12px;padding:10px 12px;margin-bottom:8px;background:var(--surf);cursor:pointer}
.pilih-kartu input{width:auto;margin:0}.pilih-kartu:has(input:checked){border-color:var(--lk);outline:1px solid var(--lk)}
.tema-contoh{display:inline-block;width:34px;height:22px;border-radius:6px;border:1px solid var(--line);flex:none}


/* ================= Kerangka gaya SatuMSP =================
   HP: bilah atas + strip menu bagian + bilah bawah (Catat menonjol di tengah) + lembar Menu berisi ubin.
   Desktop (>=861px): sidebar putih berkelompok (bisa diciutkan) + bilah atas berisi judul, pencarian, tema, notifikasi, Catat, akun.
   Hanya dirender bila ada rumah aktif (g.rumah). Warna semuanya dari token di atas. */
.mtop,.mbar,.msub,.msheet-bd,.sheet-x,.mlaunch,.topbar{display:none}
.msheet-bd[hidden],.msub[hidden]{display:none!important}
.nbadge{display:inline-block;min-width:19px;height:19px;line-height:15px;padding:0 5px;border-radius:99px;background:var(--danger-solid);color:#fff;font:600 10.5px/15px var(--font);font-style:normal;text-align:center;border:2px solid var(--card);box-sizing:border-box}
.tema-btn svg:nth-of-type(2){display:none}.tema-btn svg{pointer-events:none}
html[data-mode="gelap"] .tema-btn svg:nth-of-type(1){display:none}html[data-mode="gelap"] .tema-btn svg:nth-of-type(2){display:block}
.sb-nav{display:flex;flex-direction:column;gap:2px}
.sb-item{position:relative;display:flex;align-items:center;gap:12px;min-height:40px;padding:8px 12px;border-radius:10px;color:var(--ink);font-weight:500;font-size:calc(14px*var(--z));text-decoration:none}
.sb-item svg{width:20px;height:20px;flex:none;color:var(--muted)}
.sb-item:hover{background:var(--surface-3)}
.sb-item.on,.sb-item.on:hover{background:var(--brand-tint);color:var(--brand-ink);font-weight:600}
.sb-item.on svg{color:var(--brand-ink)}
.sb-label{padding:12px 12px 6px;font-size:calc(12px*var(--z));font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}
.ng{flex:none}
.ng-h{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:8px 12px;border:0;border-radius:10px;background:none;color:var(--ink);font:inherit;font-size:calc(14px*var(--z));font-weight:500;text-align:left;cursor:pointer}
.ng-h>svg:first-child{width:20px;height:20px;flex:none;color:var(--muted)}
.ng-h>span{flex:1 1 auto;min-width:0;line-height:1.25}
.ng-h>svg:last-child{width:18px;height:18px;flex:none;color:var(--faint);transition:transform .18s ease}
.ng-h:hover{background:var(--surface-3)}
.ng.open>.ng-h,.ng.open>.ng-h>svg{color:var(--brand-ink)}
.ng.open>.ng-h>svg:last-child{transform:rotate(180deg)}
.ng-b{display:flex;flex-direction:column;gap:1px;margin:2px 0 8px 22px;padding-left:10px;border-left:2px solid var(--line)}
.js .ng:not(.open)>.ng-b{display:none}
.ng-b .sb-item{min-height:38px;padding:7px 10px;font-size:calc(13.5px*var(--z));border-radius:8px;gap:10px}
.ng-b .sb-item svg{width:18px;height:18px}
.ng-b .sb-item.on{box-shadow:inset 3px 0 0 var(--brand)}
.me{display:none}
.kosong-js{display:none}
.main-in{min-width:0}

/* ---- palet pencarian ---- */
.sp{position:fixed;inset:0;z-index:200;display:flex;justify-content:center;align-items:flex-start;padding:9vh 16px 16px}
.sp[hidden]{display:none!important}
.sp-bd{position:absolute;inset:0;background:var(--scrim)}
.sp-box{position:relative;width:min(680px,100%);max-height:78vh;display:flex;flex-direction:column;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-lg);overflow:hidden;color:var(--ink)}
.sp-form{display:flex;align-items:center;gap:12px;padding:0 14px;border-bottom:1px solid var(--line);margin:0}
.sp-form>svg{width:22px;height:22px;flex:none;color:var(--muted)}
.sp-form input[type=search]{flex:1 1 auto;min-width:0;height:58px;border:0;box-shadow:none;background:transparent;color:var(--ink);font:inherit;font-size:17px;padding:0;margin:0;outline:0;-webkit-appearance:none;appearance:none}
.sp-form input[type=search]:focus{box-shadow:none;outline:0}
.sp-form input[type=search]::-webkit-search-cancel-button{display:none}
.sp-x{flex:none;border:1px solid var(--bd);border-radius:8px;background:var(--tint2);color:var(--muted);font:600 12px var(--font);padding:5px 9px;cursor:pointer}
.sp-list{overflow-y:auto;overscroll-behavior:contain;padding:6px 8px 10px;min-height:60px;margin:0;list-style:none}
.sp-g{padding:12px 10px 5px;font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.sp-i{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;color:var(--ink);text-decoration:none}
.sp-i[aria-selected="true"],.sp-i:hover{background:var(--brand-tint)}
.sp-ic{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:9px;background:var(--surface-3);color:var(--brand-ink);font-size:16px;font-style:normal}
.sp-ic svg{width:19px;height:19px}
.sp-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.sp-t b{font-weight:600;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-t small{color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-r{flex:none;font-size:12.5px;font-weight:600;color:var(--muted)}
.sp mark,.sr mark{background:var(--warn-bg);color:inherit;border-radius:3px;padding:0 1px}
.sp-empty{padding:20px 12px;color:var(--muted);font-size:14px;text-align:center}
.sp-foot{display:flex;gap:16px;flex-wrap:wrap;padding:9px 14px;border-top:1px solid var(--line);background:var(--tint2);color:var(--muted);font-size:12px}
.sp-foot kbd{margin-right:4px}
body.sp-open{overflow:hidden}
kbd{font:600 11px/1 var(--font);padding:4px 6px;border-radius:6px;background:var(--card);border:1px solid var(--bd);color:var(--muted)}
.sr-hasil a.sp-i{border:1px solid var(--line);margin-bottom:8px;background:var(--card)}

/* ---- notifikasi (kotak masuk) ---- */
.notif{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-top:1px solid var(--line);color:var(--ink)}
.notif:first-child{border-top:0}
.notif.baru{background:var(--brand-tint)}
.notif .nd{width:9px;height:9px;border-radius:50%;background:transparent;flex:none;margin-top:6px}
.notif.baru .nd{background:var(--brand)}
.notif b{display:block;font-weight:600}.notif small{display:block}
.notif time{font-size:calc(11.5px*var(--z));color:var(--faint);white-space:nowrap}
.notif-kosong{padding:22px 14px;text-align:center;color:var(--muted)}
.push-ajak{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;padding:10px 14px;border:1px solid var(--brand-soft);border-radius:12px;background:var(--brand-tint);color:var(--ink)}
.push-ajak span{flex:1 1 200px}
.push-ajak .btn{padding:7px 14px}
.push-ajak button.link{font-size:calc(14px*var(--z))}

/* ================= HP (<=860px) ================= */
@media (max-width:860px){
  body{-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
  body.menu-open{overflow:hidden}
  .app{min-height:100dvh;overflow-x:clip;max-width:100vw}
  .app .main{max-width:100vw;min-width:0;padding:14px 12px calc(var(--mbar-h) + var(--sab) + 22px)}
  .mtop{display:flex;align-items:center;gap:0;position:sticky;top:0;z-index:30;height:calc(var(--mtop-h) + var(--sat));padding:var(--sat) 6px 0 14px;background:var(--card);color:var(--ink);border-bottom:1px solid var(--line)}
  .mtop-brand{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0;color:var(--ink);text-decoration:none}
  .mtop-brand img{height:30px;width:30px;border-radius:8px;flex:none}
  .mtop-brand b{font-size:16.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mtop-act{position:relative;display:grid;place-items:center;width:42px;height:44px;border-radius:12px;background:none;border:0;padding:0;color:var(--ink);cursor:pointer;flex:none;font:inherit}
  .mtop-act svg{width:22px;height:22px}
  .mtop-act:active,.mtop-act.on{background:var(--brand-tint);color:var(--brand-ink)}
  .mtop-act .nbadge{position:absolute;top:1px;right:-2px;margin:0}
  .msub{display:flex;gap:8px;position:sticky;top:calc(var(--mtop-h) + var(--sat));z-index:29;height:var(--msub-h);align-items:center;padding:0 12px;overflow-x:auto;background:var(--card);border-bottom:1px solid var(--line);scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .msub::-webkit-scrollbar{display:none}
  .msub a{flex:none;display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:99px;border:1px solid var(--bd);background:var(--card);color:var(--ink);font-size:13.5px;font-weight:600;white-space:nowrap;text-decoration:none}
  .msub a.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}

  .mbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;position:fixed;left:0;right:0;bottom:0;z-index:40;height:calc(var(--mbar-h) + var(--sab));padding:0 4px var(--sab);background:var(--card);border-top:1px solid var(--line);box-shadow:0 -4px 18px rgba(15,28,46,.08);transform:translateZ(0);-webkit-transform:translateZ(0)}
  .mbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:var(--mbar-h);padding:6px 2px 4px;min-width:0;color:var(--muted);text-decoration:none;position:relative;font-weight:600}
  .mbar svg{width:22px;height:22px;flex:none;box-sizing:content-box;padding:4px 18px;border-radius:99px;transition:background-color .15s}
  .mbar span{font-size:11px;font-weight:600;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mbar .mbar-i.on,.mbar .mbar-more[aria-expanded="true"]{color:var(--brand-ink)}
  .mbar .mbar-i.on svg,.mbar .mbar-more[aria-expanded="true"] svg{background:var(--brand-tint)}
  .mbar .mbar-i:active svg{background:var(--surface-3)}
  .mbar .nbadge{position:absolute;top:3px;left:calc(50% + 6px);margin:0;min-width:18px;height:18px;line-height:14px;padding:0 4px;font-size:10px}
  /* Catat: tindakan utama aplikasi, jadi tombol bulat menonjol di tengah */
  .mbar .mbar-catat{color:var(--brand-ink);height:auto;align-self:end;padding-bottom:5px}
  .mbar .mbar-catat svg{width:26px;height:26px;padding:15px;margin-top:-26px;background:var(--brand);color:var(--on-brand);border:4px solid var(--card);box-shadow:0 6px 16px rgba(15,28,46,.28)}
  .mbar .mbar-catat:active svg{background:var(--brand-hover);transform:scale(.96)}
  .mbar .mbar-catat.on svg{box-shadow:0 0 0 3px var(--brand-tint2),0 6px 16px rgba(15,28,46,.28)}
  .mbar :focus-visible{outline-offset:-3px;border-radius:12px}

  /* lembar menu: sidebar berubah jadi lembar geser dari bawah */
  .msheet-bd{display:block;position:fixed;inset:0;z-index:50;background:var(--scrim)}
  .side{display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:0;z-index:60;max-height:86dvh;overflow:hidden;padding:0;border-radius:20px 20px 0 0;background:var(--card);color:var(--ink);transform:translateY(105%);visibility:hidden;transition:transform .26s cubic-bezier(.2,.8,.2,1),visibility 0s linear .26s;box-shadow:0 -10px 40px rgba(0,0,0,.35)}
  .side.open{transform:none;visibility:visible;transition:transform .26s cubic-bezier(.2,.8,.2,1),visibility 0s}
  .side::before{order:-2;content:"";flex:none;width:40px;height:4px;border-radius:2px;background:var(--bd);margin:9px auto 2px}
  .side .sb-brand{display:none}
  .side .me{order:-1;flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:8px 64px 12px 18px;border-bottom:1px solid var(--line)}
  .side .me-who{min-width:0}.side .me b{display:block;font-size:16px;font-weight:650}.side .me small{display:block;margin:0;font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
  .side .me form{margin:0;flex:none}
  .side .me .linkbtn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;font:inherit;font-size:14px;font-weight:600;color:var(--ink);border:1px solid var(--bd);border-radius:10px;background:var(--card);cursor:pointer}
  .side .me .linkbtn svg{width:17px;height:17px}
  .sheet-x{display:grid;place-items:center;position:absolute;top:10px;right:10px;width:42px;height:42px;border:0;border-radius:12px;background:var(--surface-3);color:var(--ink);cursor:pointer}
  .sheet-x svg{width:20px;height:20px}
  .side .mlaunch{display:block;order:1;flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 14px calc(14px + var(--sab));overscroll-behavior:contain}
  .side .mlg h5{margin:14px 4px 8px;font-size:11.5px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
  .side .mlg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .side .mlt{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:84px;padding:12px 6px 10px;border-radius:14px;background:var(--tint2);border:1px solid var(--line);color:var(--ink);text-decoration:none;text-align:center}
  .side .mlt svg{width:24px;height:24px;color:var(--brand-ink)}
  .side .mlt span{font-size:12.5px;font-weight:600;line-height:1.2;overflow-wrap:anywhere}
  .side .mlt:active{background:var(--brand-tint)}
  .side .mlt.on{background:var(--brand-tint);border-color:var(--brand-soft)}
  .side .mlt .nbadge{position:absolute;top:6px;right:8px;margin:0}
  .side .mlall{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;margin-top:16px;padding:0 14px;border:1px dashed var(--bd);border-radius:12px;background:none;color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
  .side .mlall svg{width:20px;height:20px;flex:none}.side .mlall span{flex:1 1 auto;text-align:left}.side .mlall svg:last-child{transition:transform .2s}
  .side .mlall[aria-expanded="true"] svg:last-child{transform:rotate(180deg)}
  .side .sb-nav{order:2;display:none;flex:0 0 auto;padding:0 12px calc(14px + var(--sab))}
  .side.show-all .sb-nav{display:flex}
  .side.show-all .mlaunch{flex:0 1 auto;overflow:visible;padding-bottom:0}
  .side.show-all{overflow-y:auto;-webkit-overflow-scrolling:touch}
  .side.show-all .me{position:sticky;top:0;z-index:2;background:var(--card)}
  .side .ng-h{min-height:50px;font-size:15.5px;padding:10px 12px}
  .side .sb-item{min-height:48px;font-size:15px}
  .side .ng-b .sb-item{min-height:46px;font-size:15px}
  .app .bilah-catat{display:none}
  #sync-pill{top:auto;bottom:calc(var(--mbar-h) + var(--sab) + 10px);right:auto;left:10px}
  /* sentuhan HP: kolom 16px agar iOS tidak memperbesar layar saat fokus */
  .btn{min-height:44px}
  .sp{padding:0;align-items:stretch}
  .sp-box{width:100%;max-height:none;height:100dvh;border-radius:0;border:0}
  .sp-form{padding:var(--sat) 12px 0}
  .sp-form input[type=search]{height:56px;font-size:16px}
  .sp-list{flex:1 1 auto;padding-bottom:calc(14px + var(--sab))}
  .sp-i{min-height:54px}.sp-foot{display:none}
}
@media (max-width:380px){.mtop-act{width:38px}.mtop-brand b{font-size:15px}.mbar span{font-size:10.5px}.mbar svg{padding:4px 14px}.side .mlg-grid{gap:6px}}

/* ================= Desktop (>=861px) ================= */
@media (min-width:861px){
  .app{display:grid;grid-template-columns:var(--sbw) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"side head" "side main";min-height:100vh;transition:grid-template-columns .2s ease}
  .app.side-mini{--sbw:var(--sbw-mini)}
  .side{grid-area:side;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:0 20px 12px;background:var(--card);border-right:1px solid var(--line);min-width:0;overflow:hidden}
  .topbar{grid-area:head;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:30;height:68px;padding:0 24px;background:var(--card);border-bottom:1px solid var(--line)}
  .app>.main{grid-area:main;max-width:none;margin:0;padding:24px 32px 80px;min-width:0}
  .app .main-in{max-width:var(--maks);margin:0 auto}
  .sb-brand{display:flex;gap:12px;align-items:center;padding:22px 4px 18px;color:var(--ink);text-decoration:none;flex:none}
  .sb-brand img{width:40px;height:40px;border-radius:11px;flex:none}
  .sb-brand span{min-width:0}
  .sb-brand b{display:block;font-size:calc(17px*var(--z));font-weight:650;line-height:1.2;letter-spacing:-.01em}
  .sb-brand small{display:block;color:var(--muted);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sb-nav{flex:1 1 auto;min-height:0;margin:0 0 10px;padding-right:4px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--bd) transparent}
  .sb-nav::-webkit-scrollbar{width:6px}.sb-nav::-webkit-scrollbar-thumb{background:var(--bd);border-radius:3px}
  .sb-nav>.sb-item,.ng-h{flex:none}
  .tb-toggle{display:inline-grid;place-items:center;width:40px;height:40px;flex:none;border:1px solid var(--bd);border-radius:10px;background:transparent;color:var(--muted);cursor:pointer;box-shadow:var(--bayang)}
  .tb-toggle:hover{background:var(--tint2);color:var(--ink)}.tb-toggle svg{width:20px;height:20px}
  .bilah-judul{min-width:120px;flex:1 1 auto;max-width:340px;line-height:1.2;display:flex;flex-direction:column}
  .bilah-judul b{font-size:calc(17px*var(--z));font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
  .bilah-judul small{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tb-search{display:flex;align-items:center;gap:10px;flex:0 100 380px;min-width:0;height:42px;margin-left:10px;padding:0 10px 0 12px;border:1px solid var(--bd);border-radius:10px;background:var(--tint2);color:var(--muted);font:inherit;font-size:14px;text-align:left;cursor:pointer}
  .tb-search:hover{background:var(--card);border-color:var(--brand-soft)}
  .tb-search svg{width:19px;height:19px;flex:none}
  .tb-search span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tb-right{margin-left:auto;display:flex;align-items:center;gap:10px}
  .bilah-catat{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:99px;background:var(--brand);color:var(--on-brand);font-weight:600;white-space:nowrap;text-decoration:none}
  .bilah-catat:hover{background:var(--brand-hover)}
  .bilah-catat kbd{background:rgba(255,255,255,.18);border-color:transparent;color:#fff}
  .tb-icon{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--bd);border-radius:50%;color:var(--ink);background:transparent;box-shadow:var(--bayang);cursor:pointer;padding:0}
  .tb-icon:hover{background:var(--tint2)}
  .tb-icon.on{color:var(--brand-ink);background:var(--card)}
  .tb-icon svg{width:20px;height:20px}
  .tb-icon .nbadge{position:absolute;top:-3px;right:-3px;margin:0}
  .udrop{position:relative}
  .udrop>summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;padding:4px 6px 4px 4px;border-radius:99px}
  .udrop>summary::-webkit-details-marker{display:none}
  .udrop>summary:hover{background:var(--tint2)}
  .u-av{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--brand-tint);color:var(--brand-ink);font-weight:650;font-size:16px;flex:none}
  .u-name{font-weight:500;font-size:14px;max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .udrop>summary svg{width:18px;height:18px;color:var(--muted);transition:transform .2s;flex:none}
  .udrop[open]>summary svg{transform:rotate(180deg)}
  .u-menu{position:absolute;right:0;top:calc(100% + 10px);width:270px;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);z-index:60}
  .u-who{padding:4px 8px 12px;border-bottom:1px solid var(--line-soft);margin-bottom:8px}
  .u-who b{display:block;font-size:14px;font-weight:650;overflow-wrap:anywhere}.u-who small{margin-top:2px}
  .u-menu a,.u-menu button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 8px;border:0;border-radius:8px;background:none;font:inherit;font-size:14px;font-weight:500;color:var(--ink);text-align:left;cursor:pointer;text-decoration:none}
  .u-menu a:hover,.u-menu button:hover{background:var(--surface-3)}
  .u-menu svg{width:20px;height:20px;color:var(--muted);flex:none}
  .u-menu form{margin:0}
  /* menu diciutkan: satu ikon per kelompok */
  .app.side-mini .side{padding:0 14px 12px}
  .app.side-mini .sb-brand{justify-content:center;padding:22px 0 18px}.app.side-mini .sb-brand span{display:none}
  .app.side-mini .sb-label{font-size:0;height:1px;margin:14px 8px;padding:0;background:var(--line)}
  .app.side-mini .ng-h,.app.side-mini .sb-nav>.sb-item{justify-content:center;padding:10px 0}
  .app.side-mini .ng-h>span,.app.side-mini .ng-h>svg:last-child,.app.side-mini .sb-nav>.sb-item>span{display:none}
  .app.side-mini .ng-b{margin:0 0 8px;padding-left:0;border-left:0}
  .app.side-mini .ng-b .sb-item{justify-content:center;padding:9px 0}.app.side-mini .ng-b .sb-item span{display:none}
  .app.side-mini .ng.open>.ng-h{background:var(--brand-tint)}
  .app.side-mini .ng-b .sb-item.on{box-shadow:none}
  .top.disalin{margin:0 0 14px}
  .top.disalin.kosong{display:none}
  .top.disalin>a:first-child{font-size:calc(13px*var(--z));color:var(--muted)}
  #sync-pill{top:auto;bottom:16px;right:auto;left:calc(var(--sbw) + 16px)}
  .menu{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
  .menu>h3{grid-column:1/-1;margin:14px 2px 0}
  .menu>p,.menu>button,.menu>.btn{grid-column:1/-1}
  .menu a{margin:0;border-radius:16px;padding:14px 16px;transition:border-color .12s}
  .menu a:hover{border-color:var(--brand-soft)}
  .form{max-width:640px}
  .beranda-atas{display:grid;grid-template-columns:7fr 5fr;gap:18px;margin-bottom:18px;align-items:stretch}
  .beranda-atas>.hero{margin:0;padding:22px 24px;display:flex;flex-direction:column;justify-content:center;gap:6px}
  .beranda-atas .big{font-size:calc(42px*var(--z));line-height:1.05}
  .beranda-atas>.grid2{grid-template-columns:1fr;margin:0;gap:18px}
  .beranda-atas>.grid2 .card{display:flex;flex-direction:column;justify-content:center}
  .beranda-kisi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
  .beranda-kisi>.card,.beranda-kisi>a.card{margin:0}
  .hanya-mobile{display:none}
}
@media (min-width:861px) and (max-width:1100px){.u-name{display:none}.topbar{padding:0 16px}.app>.main{padding:20px 20px 80px}.tb-search kbd{display:none}.bilah-judul{max-width:150px}}
@media (min-width:861px) and (max-width:980px){.tb-search span{display:none}.tb-search{flex:0 0 42px;padding:0;justify-content:center}}
@media (prefers-reduced-motion:reduce){.ng-h>svg:last-child,.mbar svg,.side{transition:none!important}}
@media print{.side,.topbar,.mtop,.mbar,.msub,.sp,.fab{display:none!important}.app{display:block}.app>.main{padding:0}}

/* Area aman (poni / bar gestur) hanya berlaku saat dibuka sebagai aplikasi terpasang. Di tab peramban, env() bisa berubah-ubah saat bilah alamat
   disembunyikan ketika scroll, dan itulah yang membuat bilah bawah ikut "terangkat". Karena itu bawaannya 0. */
@media (display-mode:standalone),(display-mode:fullscreen){:root{--sab:env(safe-area-inset-bottom,0px);--sat:env(safe-area-inset-top,0px)}}
html.standalone{--sab:env(safe-area-inset-bottom,0px);--sat:env(safe-area-inset-top,0px)}
/* kotak centang / radio sebaris dengan teksnya (label.row) */
label.row{display:flex;align-items:center;gap:10px}
input[type=checkbox],input[type=radio]{display:inline-block;width:18px;height:18px;margin:0;flex:none;padding:0;accent-color:var(--brand)}
input[type=file]{padding:9px}

/* ---- Resep referensi (R4.3) ---- */
.ref-cari{display:flex;gap:8px;margin:10px 0 8px}.ref-cari input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font:inherit}
.ref-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.ref-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
.ref-kartu{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;color:inherit;box-shadow:var(--bayang)}
.ref-kartu img{display:block;width:100%;height:auto;aspect-ratio:640/420;object-fit:cover;background:var(--tint)}
.ref-isi{display:block;padding:9px 11px 11px}.ref-isi b{display:block;font-size:calc(14px*var(--z));line-height:1.25}.ref-isi small{margin-top:2px}
.ref-hero{padding:0;overflow:hidden}.ref-hero img{display:block;width:100%;height:auto;aspect-ratio:640/420;object-fit:cover;background:var(--tint)}.ref-hero p{margin:12px 16px 6px}
.ref-meta{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 14px}.ref-meta .pill{background:var(--tint);color:var(--brand-ink)}
.ref-porsi{display:flex;align-items:center;gap:6px}.ref-porsi input{width:64px;padding:7px 8px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:inherit}
.ref-bahan,.ref-langkah{margin:8px 0 0;padding-left:20px}.ref-bahan li,.ref-langkah li{margin:5px 0}.ref-langkah li{padding-left:2px}
.ref-tips{margin:12px 0 0;padding:10px 12px;border-radius:12px;background:var(--warn-bg);color:var(--warn-ink)}
@media(min-width:700px){.ref-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1000px){.ref-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---- Navigasi cepat (R4.3) ---- */
#cepat-bar{position:fixed;left:0;top:0;height:3px;width:0;background:var(--brand);z-index:9999;pointer-events:none;opacity:0;box-shadow:0 0 8px var(--focus)}
#cepat-bar.jalan{opacity:1;transition:width .5s ease-out}
html.cepat-sibuk .main-in{opacity:.55;transition:opacity .15s;pointer-events:none}
@media(prefers-reduced-motion:reduce){#cepat-bar.jalan{transition:none}html.cepat-sibuk .main-in{transition:none}}
/* ---- Pasang aplikasi & data lokal (R4.3) ---- */
.pasang-status{display:flex;align-items:center;gap:8px;margin:6px 0}
.pasang-stat{width:10px;height:10px;border-radius:50%;background:var(--faint);flex:none}.pasang-stat.ok{background:var(--ok-solid)}.pasang-stat.warn{background:var(--warn-solid)}
.pasang-tabel{width:100%;border-collapse:collapse}.pasang-tabel td{padding:6px 0;border-top:1px solid var(--line)}.pasang-tabel td:last-child{text-align:right;font-weight:650}
.pasang-aksi{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.pasang-aksi .btn{flex:1 1 180px}

/* ===== R6: pengajuan beli, silsilah, kontak, peliharaan, obrolan ===== */
.btn.wa,.chip.wa{background:var(--ok-solid);border-color:var(--ok-solid);color:#fff}.btn.wa:hover,.btn.wa:active{background:var(--ok-ink)}
.cek{display:flex!important;align-items:center;gap:8px}.cek input{width:auto;margin:0}
.aj-baris{padding:8px 0;border-top:1px solid var(--line-soft)}.aj-baris:first-of-type{border-top:0}
.aj-baris.aj-setuju{border-left:3px solid var(--ok-solid);padding-left:10px}.aj-baris.aj-tolak{border-left:3px solid var(--danger-solid);padding-left:10px}
.aj-alasan{white-space:pre-wrap;background:var(--tint2);border-radius:12px;padding:10px 12px}
.aj-pill-menunggu{background:var(--warn-bg);color:var(--warn-ink)}.aj-pill-ditolak,.aj-pill-dibatalkan{background:var(--err-bg);color:var(--err-ink)}.aj-pill-dibeli{background:var(--neu-bg);color:var(--neu-ink)}
.aj-dibatalkan b,.aj-dibatalkan .grow{opacity:.65}
.kt .chip{flex:none}.kt .grow small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.pk-kotak{padding:14px 8px}.pk-geser{overflow-x:auto;text-align:center;padding-bottom:6px}
.pk,.pk ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center}
.pk{display:inline-flex;min-width:min-content}
.pk ul{padding-top:22px;position:relative}
.pk li{position:relative;padding:22px 6px 0;display:flex;flex-direction:column;align-items:center}
.pk li::before,.pk li::after{content:"";position:absolute;top:0;right:50%;width:50%;height:22px;border-top:2px solid var(--line-strong)}
.pk li::after{right:auto;left:50%;border-left:2px solid var(--line-strong)}
.pk li:only-child::before,.pk li:only-child::after{display:none}.pk li:only-child{padding-top:0}
.pk li:first-child::before,.pk li:last-child::after{border:0 none}
.pk li:last-child::before{border-right:2px solid var(--line-strong);border-radius:0 8px 0 0}.pk li:first-child::after{border-radius:8px 0 0 0}
.pk ul::before{content:"";position:absolute;top:0;left:50%;border-left:2px solid var(--line-strong);height:22px}
.pk>li{padding-top:0}.pk>li::before,.pk>li::after{display:none}
.pk-unit{display:flex;align-items:center;gap:4px;position:relative}
.pk-orang{display:flex;align-items:center;gap:6px;background:var(--surf);border:1px solid var(--line);border-radius:14px;padding:7px 9px;box-shadow:var(--bayang);min-width:96px;max-width:150px}
.pk-orang.g-L{border-top:3px solid var(--brand)}.pk-orang.g-P{border-top:3px solid var(--warn-solid)}.pk-orang.wafat{opacity:.7}
.pk-nama{display:block;color:var(--ink);text-align:left;min-width:0}.pk-nama b{display:block;font-size:calc(13px*var(--z));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:96px}
.pk-nama small{font-size:calc(11px*var(--z))}
.pk-wa{flex:none;background:var(--ok-solid);color:#fff;border-radius:8px;padding:3px 6px;font-size:calc(11px*var(--z));font-weight:650}
.pk-hati{color:var(--out);font-size:calc(14px*var(--z))}
.pk-tambah{flex:none;width:26px;height:26px;border-radius:50%;background:var(--tint);color:var(--lk);display:grid;place-items:center;font-weight:700}

.hw-atas{display:flex;align-items:center;gap:12px;color:inherit}
.hw-foto{width:64px;height:64px;border-radius:16px;object-fit:cover;flex:none;background:var(--tint)}
.hw-ikon{display:grid;place-items:center;font-size:calc(32px*var(--z))}
.hw-besar{width:132px;height:132px;border-radius:50%;object-fit:cover;margin:0 auto 8px;display:block;background:var(--tint)}.hw-besar.hw-ikon{font-size:calc(64px*var(--z))}
.hw-makan{display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft)}

.ob{display:flex;flex-direction:column;height:calc(100dvh - var(--mtop-h) - var(--mbar-h) - 36px - var(--sab));min-height:380px;background:var(--tint2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media (min-width:861px){.ob{height:calc(100dvh - 130px)}}
.ob-kepala{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--card);border-bottom:1px solid var(--line)}
.ob-kepala b{display:block}.ob-kembali{font-size:calc(24px*var(--z));line-height:1;color:var(--lk);padding-right:2px}
.ob-av{width:38px;height:38px;border-radius:50%;background:var(--brand);color:var(--on-brand);display:grid;place-items:center;font-weight:700;flex:none}
.ob-daftar{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:12px 12px 6px;display:flex;flex-direction:column;gap:3px}
.ob-hari{display:flex;justify-content:center;margin:10px 0 6px}.ob-hari span{background:var(--surf);border:1px solid var(--line);color:var(--muted);border-radius:99px;padding:2px 12px;font-size:calc(11.5px*var(--z));font-weight:600}
.ob-kosong,.ob-lama{align-self:center;margin:auto;color:var(--muted);text-align:center;font-size:calc(13px*var(--z))}
.ob-lama{margin:0 auto 8px;background:var(--surf);border:1px solid var(--line);border-radius:99px;padding:6px 14px;cursor:pointer;font-family:inherit}
.ob-m{display:flex;flex-direction:column;max-width:82%}.ob-m.saya{align-self:flex-end;align-items:flex-end}.ob-m.lawan{align-self:flex-start;align-items:flex-start}
.ob-b{position:relative;padding:7px 11px 5px;border-radius:16px;box-shadow:var(--bayang);word-break:break-word;min-width:64px}
.ob-m.saya .ob-b{background:var(--brand-tint2);border-bottom-right-radius:5px;cursor:pointer}
.ob-m.lawan .ob-b{background:var(--card);border:1px solid var(--line);border-bottom-left-radius:5px}
.ob-m.hapus .ob-b{opacity:.7;font-style:italic;cursor:default}
.ob-t{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.4}
.ob-w{display:block;text-align:right;font-size:calc(10.5px*var(--z));color:var(--faint);margin-top:1px}
.ob-c{font-style:normal;letter-spacing:-2px;margin-left:2px}.ob-c.baca{color:var(--lk);font-weight:700}
.ob-aksi{display:none;margin-top:3px}.ob-m.buka .ob-aksi{display:block}
.ob-x{background:var(--err-bg);color:var(--err-ink);border:0;border-radius:99px;padding:4px 12px;font-size:calc(12px*var(--z));font-family:inherit;cursor:pointer}
.ob-tulis{display:flex;align-items:flex-end;gap:8px;padding:8px 10px calc(8px + var(--sab));background:var(--card);border-top:1px solid var(--line)}
.ob-tulis textarea{flex:1;resize:none;max-height:132px;border-radius:22px;padding:10px 14px;line-height:1.35;font-size:calc(16px*var(--z));margin:0}
.ob-kirim{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--acc);color:var(--on-acc);display:grid;place-items:center;cursor:pointer}
.ob-kirim:disabled{opacity:.5;cursor:default}.ob-kirim:hover:not(:disabled){background:var(--acc2)}
.ob-galat{background:var(--err-bg);color:var(--err-ink);padding:6px 12px;font-size:calc(13px*var(--z));font-weight:600}