/* Dropdown kustom (lembar pilihan) dan dialog kustom, gaya neobrutalism sama seperti aplikasi */
select[data-cs]{display:none!important}
.csel{position:relative;display:block;width:100%;min-width:0}
.csel[hidden]{display:none!important}
.csel .cs-t{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px;padding:10px 12px;margin:0;border:3px solid var(--bd,#111);border-radius:12px;background:var(--cbg,#fff);color:var(--ink,#111);box-shadow:3px 3px 0 var(--sd,#111);font:inherit;font-size:14px;font-weight:600;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:translate .12s cubic-bezier(.2,.8,.2,1),box-shadow .12s cubic-bezier(.2,.8,.2,1),background-color .12s}
.csel .cs-t:active{translate:3px 3px;box-shadow:0 0 0 var(--sd,#111);background:var(--acc,#ffd83d)}
.csel .cs-v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csel .cs-v.ph{color:#777}
.csel .cs-c{display:grid;place-items:center;width:24px;height:24px;border:2px solid var(--bd,#111);border-radius:7px;background:var(--acc,#ffd83d);flex:none;transition:rotate .25s cubic-bezier(.2,.8,.2,1)}
.csel .cs-c svg{width:14px;height:14px}
.csel.open .cs-c{rotate:180deg}
.csel.open .cs-t{background:var(--acc2,#fff6b8)}
.csel.dis .cs-t{opacity:.5;cursor:not-allowed;box-shadow:none}
.bte .csel .cs-t{min-height:38px;padding:7px 9px;font-size:13px}
.bte .bcol .csel{flex:1;min-width:0}
.srow .csel{flex:none}

.ui-wrap{position:fixed;inset:0;z-index:700;display:flex;align-items:flex-end;justify-content:center;font-family:'Space Grotesk',system-ui,Roboto,sans-serif}
.ui-scrim{position:absolute;inset:0;background:rgba(17,17,17,.5);opacity:0;transition:opacity .28s cubic-bezier(.2,.8,.2,1)}
.ui-wrap.in .ui-scrim{opacity:1}
.ui-wrap.out .ui-scrim{opacity:0;transition-duration:.2s}

/* lembar pilihan */
.ui-sheet{position:relative;width:100%;max-width:560px;max-height:78vh;display:flex;flex-direction:column;background:var(--paper,#fff1d6);border:3px solid var(--bd,#111);border-bottom:0;border-radius:24px 24px 0 0;box-shadow:0 -5px 0 var(--sd,#111);translate:0 105%;transition:translate .3s cubic-bezier(.2,.8,.2,1);padding-bottom:env(safe-area-inset-bottom)}
.ui-wrap.in .ui-sheet{translate:0 0}
.ui-wrap.out .ui-sheet{translate:0 105%;transition-duration:.22s}
.ui-sh{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:22px 16px 10px 18px;flex:none}
.ui-sh b{font-size:18px;font-weight:700;color:var(--ink,#111);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-grab{position:absolute;top:8px;left:50%;width:44px;height:5px;margin-left:-22px;border-radius:99px;background:var(--ink,#111)}
.ui-x{width:38px;height:38px;display:grid;place-items:center;border:3px solid var(--bd,#111);border-radius:12px;background:var(--cbg,#fff);box-shadow:3px 3px 0 var(--sd,#111);color:var(--ink,#111);cursor:pointer;flex:none;padding:0;transition:translate .12s,box-shadow .12s,background-color .12s}
.ui-x svg{width:18px;height:18px}
.ui-x:active{translate:3px 3px;box-shadow:0 0 0 var(--sd,#111);background:var(--red,#ff6b6b)}
.ui-list{overflow-y:auto;overscroll-behavior:contain;padding:4px 14px 16px;display:flex;flex-direction:column;gap:8px}
.ui-grp{font:700 11.5px 'Space Mono',monospace;text-transform:uppercase;color:#4a4a4a;padding:10px 4px 2px}
.ui-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:10px 12px 10px 14px;border:3px solid var(--bd,#111);border-radius:14px;background:var(--cbg,#fff);box-shadow:3px 3px 0 var(--sd,#111);color:var(--ink,#111);font:inherit;font-size:15px;font-weight:600;text-align:left;cursor:pointer;opacity:0;translate:0 10px;transition:opacity .28s cubic-bezier(.2,.8,.2,1) var(--d,0ms),translate .28s cubic-bezier(.2,.8,.2,1) var(--d,0ms),background-color .12s,box-shadow .12s}
.ui-wrap.in .ui-opt{opacity:1;translate:0 0}
.ui-opt:active{translate:3px 3px!important;box-shadow:0 0 0 var(--sd,#111);transition-delay:0ms}
.ui-opt span{flex:1;min-width:0}
.ui-opt i{width:26px;height:26px;border:3px solid var(--bd,#111);border-radius:50%;background:var(--cbg,#fff);display:grid;place-items:center;flex:none}
.ui-opt i svg{width:14px;height:14px}
.ui-opt.on{background:var(--acc,#ffd83d)}
.ui-opt.on i{background:var(--green,#7ee8a2)}
.ui-opt:disabled{opacity:.4!important;cursor:not-allowed}
.ui-opt:focus-visible{outline:3px dashed #111;outline-offset:2px}

/* dialog */
.ui-dw{align-items:center;padding:20px}
.ui-dlg{position:relative;width:100%;max-width:380px;background:var(--cbg,#fff);border:3px solid var(--bd,#111);border-radius:20px;box-shadow:6px 6px 0 var(--sd,#111);overflow:hidden;scale:.88;opacity:0;transition:scale .28s cubic-bezier(.34,1.45,.64,1),opacity .2s}
.ui-wrap.in .ui-dlg{scale:1;opacity:1}
.ui-wrap.out .ui-dlg{scale:.92;opacity:0;transition-duration:.2s}
.ui-dh{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:3px solid var(--bd,#111);background:var(--blue,#8cc8ff)}
.ui-dh.danger{background:var(--red,#ff6b6b)}.ui-dh.ok{background:var(--green,#7ee8a2)}
.ui-dh b{font-size:17px;font-weight:700;color:var(--ink,#111)}
.ui-di{display:grid;place-items:center;width:34px;height:34px;border:3px solid var(--bd,#111);border-radius:11px;background:var(--cbg,#fff);color:var(--ink,#111);flex:none}
.ui-di svg{width:18px;height:18px}
.ui-db{padding:16px 18px 6px;font-size:15px;line-height:1.55;font-weight:500;color:var(--ink,#111);word-break:break-word}
.ui-in{display:block;width:calc(100% - 36px)!important;margin:10px 18px 0!important;padding:11px 12px!important;border:3px solid var(--bd,#111)!important;border-radius:12px!important;background:var(--cbg,#fff)!important;color:var(--ink,#111)!important;font:inherit!important;font-size:15px!important;font-weight:600!important;box-shadow:none!important;outline:0}
.ui-in:focus{background:var(--acc2,#fff6b8)!important}
.ui-df{display:flex;gap:10px;justify-content:flex-end;padding:14px 18px 18px}
.ui-b{min-height:44px;padding:0 18px;border:3px solid var(--bd,#111);border-radius:12px;color:var(--ink,#111);font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;box-shadow:3px 3px 0 var(--sd,#111);transition:translate .12s,box-shadow .12s,background-color .12s}
.ui-b:active{translate:3px 3px;box-shadow:0 0 0 var(--sd,#111)}
.ui-b.main{background:var(--acc,#ffd83d)}.ui-b.ghost{background:var(--cbg,#fff)}.ui-b.danger{background:var(--red,#ff6b6b)}
.ui-b:focus-visible{outline:3px dashed #111;outline-offset:2px}

@media(min-width:700px){
  .ui-wrap:not(.ui-dw){align-items:center}
  .ui-sheet{border:3px solid var(--bd,#111);border-radius:22px;box-shadow:6px 6px 0 var(--sd,#111);max-width:440px;translate:0 24px;opacity:0;transition:translate .3s cubic-bezier(.2,.8,.2,1),opacity .2s;padding-bottom:0}
  .ui-wrap.in .ui-sheet{opacity:1}
  .ui-wrap.out .ui-sheet{translate:0 24px;opacity:0}
  .ui-grab{display:none}
  .ui-sh{padding-top:14px}
}
@media(prefers-reduced-motion:reduce){.ui-wrap *,.csel *{transition-duration:.01ms!important;animation-duration:.01ms!important}}
body.noanim .ui-wrap *,body.noanim .csel *{transition:none!important;animation:none!important}
body.noanim .ui-opt{opacity:1;translate:0 0}

/* font mono (sama seperti halaman profil di referensi) untuk dialog akun, lembar foto, dan panel */
.ui-mono,.ui-mono *{font-family:'Space Mono',ui-monospace,monospace!important}

/* dialog daftar akun gaya pemilih akun */
.ui-ch{max-width:400px}
.ui-chh{padding:20px 20px 12px;text-align:center;border-bottom:3px solid var(--bd,#111)}
.ui-chh b{display:block;font-size:19px;font-weight:700;color:var(--ink,#111)}
.ui-chh small{display:block;margin-top:5px;font-size:12.5px;line-height:1.5;color:var(--mute,#4a4a4a)}
.ui-cl{display:flex;flex-direction:column;max-height:52vh;overflow-y:auto;overscroll-behavior:contain}
.ui-row{display:flex;align-items:center;gap:14px;width:100%;padding:13px 18px;border:0;border-bottom:2px dashed var(--bd,#111);background:transparent;color:var(--ink,#111);font:inherit;text-align:left;cursor:pointer;opacity:0;translate:0 8px;transition:opacity .28s cubic-bezier(.2,.8,.2,1) var(--d,0ms),translate .28s cubic-bezier(.2,.8,.2,1) var(--d,0ms),background-color .12s}
.ui-wrap.in .ui-row{opacity:1;translate:0 0}
.ui-row:active{background:var(--acc,#ffd83d);transition-delay:0ms}
.ui-row.on{background:var(--acc2,#fff6b8)}
.ui-lead{display:grid;place-items:center;width:42px;height:42px;flex:none;color:var(--ink,#111)}
.ui-lead svg{width:24px;height:24px}
.ui-lead.av{border:3px solid var(--bd,#111);border-radius:50%;background:var(--acc,#ffd83d) center/cover;font-size:18px;font-weight:700;box-shadow:2px 2px 0 var(--sd,#111)}
.ui-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ui-tx b{font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink,#111)}
.ui-tx small{font-size:12px;color:var(--mute,#4a4a4a);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-bd{display:grid;place-items:center;min-width:26px;height:26px;padding:0 8px;border:2px solid var(--bd,#111);border-radius:99px;background:var(--green,#7ee8a2);font-size:11px;font-weight:700;color:#111;flex:none}
.ui-bd svg{width:14px;height:14px}
.ui-row.danger .ui-tx b{color:var(--red,#ff6b6b)}
.ui-row.danger .ui-lead{color:var(--red,#ff6b6b)}
.ui-ch .ui-df{border-top:3px solid var(--bd,#111);padding:12px 18px}
.ui-ch .ui-df .ui-b{flex:1}

/* lembar bawah polos (pilih foto/video) */
.ui-sheet.plain{background:var(--cbg,#fff);border:0;border-radius:26px 26px 0 0;box-shadow:none;max-width:640px;padding:18px 6px calc(env(safe-area-inset-bottom) + 14px)}
.ui-sheet.plain .ui-grab{top:8px}
.ui-sl{display:flex;flex-direction:column;padding-top:8px}
.ui-sl .ui-row{border-bottom:0;padding:18px 20px}
.ui-sl .ui-lead{width:34px;height:34px;color:var(--ink,#111)}
.ui-sl .ui-tx b{font-size:17px;font-weight:400}
.ui-sl .ui-tx small{font-size:13.5px;font-weight:700;color:var(--ink,#111)}
@media(min-width:700px){.ui-sheet.plain{border:3px solid var(--bd,#111);border-radius:22px;box-shadow:6px 6px 0 var(--sd,#111)}}

/* panel tinggi untuk pengaturan */
.ui-sheet.tall{max-height:90vh;height:auto}
.ui-pb{overflow-y:auto;overscroll-behavior:contain;padding:4px 14px calc(env(safe-area-inset-bottom) + 18px);display:flex;flex-direction:column;gap:12px}
.ui-pb .sc{border:0!important;box-shadow:none!important;background:transparent!important;padding:0!important;margin:0!important;animation:none!important}
.ui-pb .sc>.sh{display:none!important}
html.dark .ui-sheet.plain{background:#000;border:3px solid var(--bd)}
html.dark .ui-row.on{background:#2d2919}
html.dark .ui-lead.av{background-color:var(--card2);color:#fff}

/* ===== perbaikan dari tes browser: baris lembar bawah rata, teks keterangan boleh 2 baris ===== */
.ui-row,.ui-opt{border-radius:0!important;box-shadow:none!important}
.ui-row:not(:last-child){border-bottom:1px solid var(--sh-soft)!important}
.ui-sl .ui-row:not(:last-child){border-bottom:2px solid var(--sh-line)!important}
.ui-tx small{white-space:normal!important;overflow:visible!important;line-height:1.4}